/* ==========================================================================
   JOY Preisseite – Styles
   Alle Regeln sind auf .joy-preise begrenzt und beeinflussen den Rest der
   Website nicht. Farben zentral über die Variablen unten anpassbar.
   ========================================================================== */

/* Schriften lokal (keine Verbindung zu Google) ---------------------------- */
@font-face { font-family: "JOY Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/lato-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "JOY Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/merriweather-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JOY Merriweather"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/merriweather-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "JOY Merriweather"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/merriweather-latin-900-normal.woff2") format("woff2"); }

.joy-preise {
	--joy-green: #1F3B2A;
	--joy-green-2: #264532;
	--joy-ocker: #E0A54A;
	--joy-ocker-mid: #A06818;
	--joy-ocker-dark: #8F5C12;
	--joy-cream: #FAF8F3;
	--joy-sage: #F2F4EF;
	--joy-white: #FFFFFF;
	--joy-ink: #1B2620;
	--joy-text: #33403A;
	--joy-muted: #4F5A53;
	--joy-line: #E3E7E0;
	--joy-serif: "JOY Merriweather", Georgia, "Times New Roman", serif;
	--joy-sans: "JOY Lato", "Helvetica Neue", Helvetica, sans-serif;
	--joy-band-y: 104px;
	--joy-radius: 20px;

	font-family: var(--joy-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--joy-ink);
	-webkit-font-smoothing: antialiased;
}

body.has-joy-preise { overflow-x: clip; }

/* Grund-Reset gegen Theme-Abstände ---------------------------------------- */
.joy-preise h1, .joy-preise h2, .joy-preise h3,
.joy-preise p, .joy-preise ul, .joy-preise ol, .joy-preise figure { margin: 0; padding: 0; }
.joy-preise > * + *, .joy-preise .wp-block-group > * + * { margin-block-start: 0; }
.joy-preise *, .joy-preise *::before, .joy-preise *::after { box-sizing: border-box; }
.joy-preise a { color: var(--joy-green); }
.joy-preise a:hover { color: var(--joy-ocker-dark); }
.joy-preise :focus-visible { outline: 3px solid var(--joy-ocker); outline-offset: 3px; border-radius: 6px; }

/* Volle Breite + Bänder -------------------------------------------------- */
.joy-preise .joy-band {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: var(--joy-band-y) 0;
	overflow: hidden;
}
.joy-preise .joy-bg-cream { background: var(--joy-cream); }
.joy-preise .joy-bg-white { background: var(--joy-white); }
.joy-preise .joy-bg-sage  { background: var(--joy-sage); }
.joy-preise .joy-bg-green { background: var(--joy-green); color: #FFFFFF; }

.joy-preise .joy-wrap,
.joy-preise .joy-wrap > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.joy-preise .joy-wrap > .wp-block-group__inner-container { padding: 0; }

/* Typografie -------------------------------------------------------------- */
.joy-preise .joy-eyebrow {
	display: flex; align-items: center; gap: 12px;
	font-size: 13px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
	color: var(--joy-ocker-dark); margin-bottom: 14px;
}
.joy-preise .joy-eyebrow::before { content: ""; width: 32px; height: 2px; background: #C88A2E; flex-shrink: 0; }
.joy-preise .joy-bg-green .joy-eyebrow { color: var(--joy-ocker); }
.joy-preise .joy-bg-green .joy-eyebrow::before { background: var(--joy-ocker); }

.joy-preise h1.joy-h1 {
	font-family: var(--joy-serif); font-weight: 900;
	font-size: clamp(38px, 5.4vw, 68px); line-height: 1.1; letter-spacing: -0.5px;
	color: var(--joy-green); margin-bottom: 28px;
}
.joy-preise h1.joy-h1 em {
	font-style: italic; font-weight: 700; color: var(--joy-ocker-dark);
	background: linear-gradient(transparent 64%, rgba(224,165,74,0.32) 64%);
	padding: 0 6px;
}
.joy-preise h2.joy-h2 {
	font-family: var(--joy-serif); font-weight: 900;
	font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2;
	color: var(--joy-green); margin-bottom: 14px;
}
.joy-preise .joy-bg-green h2.joy-h2 { color: #FFFFFF; font-size: clamp(30px, 4vw, 52px); line-height: 1.15; margin-bottom: 18px; }
.joy-preise .joy-lead { font-size: 20px; color: var(--joy-text); max-width: 600px; }
.joy-preise .joy-intro { color: var(--joy-muted); max-width: 600px; }
.joy-preise .joy-bg-green .joy-lead { color: #D7DED8; }
.joy-preise .joy-copy { color: var(--joy-text); margin-bottom: 16px; }

/* Buttons ----------------------------------------------------------------- */
.joy-preise .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.joy-preise .wp-block-button { margin: 0; }
.joy-preise .wp-block-button__link {
	display: inline-block; font-family: var(--joy-sans); font-size: 16px; font-weight: 700; line-height: 1.3;
	text-decoration: none; text-align: center; border-radius: 999px; padding: 15px 28px;
	border: 2px solid transparent; box-shadow: none;
	transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}
.joy-preise .wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.06); }
.joy-preise .joy-btn-primary .wp-block-button__link { background: var(--joy-green); color: #FFFFFF; }
.joy-preise .joy-btn-ghost .wp-block-button__link { background: transparent; color: var(--joy-green); border-color: var(--joy-green); }
.joy-preise .joy-btn-ghost .wp-block-button__link:hover { background: var(--joy-green); color: #FFFFFF; filter: none; }
.joy-preise .joy-btn-accent .wp-block-button__link { background: var(--joy-ocker); color: var(--joy-green); font-weight: 900; }
.joy-preise .joy-buttons-full { margin-top: auto; }
.joy-preise .joy-buttons-full .wp-block-button { width: 100%; }
.joy-preise .joy-buttons-full .wp-block-button__link { width: 100%; }

/* Häkchen-Listen ---------------------------------------------------------- */
.joy-preise ul.joy-checks { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.joy-preise ul.joy-checks li { position: relative; padding-left: 32px; margin: 0; }
.joy-preise ul.joy-checks li::before {
	content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A06818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.joy-preise .joy-card--featured ul.joy-checks li::before,
.joy-preise .joy-bg-green ul.joy-checks li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A54A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Hero -------------------------------------------------------------------- */
.joy-preise .joy-hero { padding: 96px 0 150px; }
.joy-preise .joy-hero-grid,
.joy-preise .joy-hero-grid > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.joy-preise .joy-hero-text { flex: 999 1 520px; min-width: 0; }
.joy-preise .joy-hero-text .wp-block-buttons { margin-top: 36px; }
.joy-preise .joy-glance {
	flex: 1 1 340px; min-width: 0; background: #FFFFFF; border-radius: var(--joy-radius);
	padding: 32px 32px 28px;
	box-shadow: 0 30px 60px -20px rgba(31,59,42,0.25), 0 0 0 1px rgba(31,59,42,0.06);
}
.joy-preise .joy-glance h3 { font-family: var(--joy-serif); font-weight: 700; font-size: 20px; color: var(--joy-green); margin-bottom: 10px; }
.joy-preise .joy-glance p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid #ECEAE2; }
.joy-preise .joy-glance p:last-of-type { border-bottom: 0; }
.joy-preise .joy-glance p strong { font-weight: 900; color: var(--joy-green); white-space: nowrap; }
.joy-preise .joy-glance p.joy-glance-note { display: block; padding: 10px 0 0; border: 0; font-size: 14px; color: var(--joy-muted); }

/* Vertrauensleiste -------------------------------------------------------- */
.joy-preise .joy-trust { padding: 20px 0; color: #E4EBE5; }
.joy-preise .joy-trust ul.joy-checks { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 15px; }
.joy-preise .joy-trust ul.joy-checks li { padding-left: 28px; }
.joy-preise .joy-trust ul.joy-checks li::before { width: 18px; height: 18px; top: 3px; }

/* Abschnittskopf mit Schalter -------------------------------------------- */
.joy-preise .joy-head-row,
.joy-preise .joy-head-row > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; }
.joy-preise .joy-head-row { margin-bottom: 64px; }
.joy-preise .joy-head-row > .wp-block-group__inner-container { margin: 0; }
.joy-preise .joy-head-text { flex: 1 1 520px; min-width: 0; }
.joy-preise .joy-section-head { margin-bottom: 56px; max-width: 760px; }

.joy-preise .joy-billing { display: inline-flex; background: var(--joy-sage); border-radius: 999px; padding: 5px; gap: 4px; }
.joy-preise .joy-billing button {
	border: 0; cursor: pointer; font-family: var(--joy-sans); font-size: 15px; font-weight: 700; line-height: 1.2;
	padding: 12px 22px; min-height: 44px; border-radius: 999px; background: transparent; color: var(--joy-green);
	transition: background-color .2s ease, color .2s ease;
}
.joy-preise .joy-billing button span { font-weight: 400; }
.joy-preise .joy-billing button.is-active { background: var(--joy-green); color: #FFFFFF; }

/* Paket-Karten ------------------------------------------------------------ */
.joy-preise .joy-cards:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-cards > .wp-block-group__inner-container {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch;
}
.joy-preise .joy-card,
.joy-preise .joy-card > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 22px; }
.joy-preise .joy-card > .wp-block-group__inner-container { height: 100%; }
.joy-preise .joy-card {
	position: relative; background: var(--joy-sage); border-radius: var(--joy-radius);
	padding: 40px 34px 34px; margin-top: 24px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.joy-preise .joy-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(31,59,42,0.35); }
.joy-preise .joy-card--featured {
	background: var(--joy-green); color: #FFFFFF; margin-top: 0; padding-top: 48px;
	box-shadow: 0 40px 70px -24px rgba(31,59,42,0.45);
}
.joy-preise .joy-card h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 26px; color: var(--joy-green); }
.joy-preise .joy-card--featured h3 { color: #FFFFFF; }
.joy-preise .joy-card-lead { color: var(--joy-muted); margin-top: -12px; }
.joy-preise .joy-card--featured .joy-card-lead { color: #D7DED8; }
.joy-preise .joy-flag {
	position: absolute; top: -15px; left: 34px; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
	color: var(--joy-green); background: var(--joy-ocker); border-radius: 999px; padding: 6px 16px;
}
.joy-preise .joy-slots {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
	color: var(--joy-green); background: #FFFFFF; border-radius: 999px; padding: 5px 12px 5px 10px; margin-bottom: -8px;
}
.joy-preise .joy-slots::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C88A2E; }

.joy-preise .joy-price {
	border-top: 1px solid #DCE2D8; border-bottom: 1px solid #DCE2D8; padding: 20px 0; min-height: 96px;
	display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; align-content: center;
}
.joy-preise .joy-card--featured .joy-price { border-color: rgba(255,255,255,0.16); }
.joy-preise .joy-price__amount { font-family: var(--joy-serif); font-weight: 900; font-size: 48px; line-height: 1.1; color: var(--joy-ocker-mid); }
.joy-preise .joy-price__amount--text { font-size: 34px; color: var(--joy-green); }
.joy-preise .joy-card--featured .joy-price__amount { color: var(--joy-ocker); }
.joy-preise .joy-price__unit { color: var(--joy-muted); }
.joy-preise .joy-price__note { flex-basis: 100%; font-size: 14px; color: var(--joy-muted); }
.joy-preise .joy-card--featured .joy-price__unit,
.joy-preise .joy-card--featured .joy-price__note { color: #C9D3CB; }
.joy-preise .joy-card ul.joy-checks { flex-grow: 1; }
.joy-preise .joy-fineprint { margin-top: 36px; font-size: 15px; color: var(--joy-muted); text-align: center; }

/* Ablauf ------------------------------------------------------------------ */
.joy-preise .joy-steps:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-steps > .wp-block-group__inner-container {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; counter-reset: joystep;
}
.joy-preise .joy-step { background: #FFFFFF; border-radius: 18px; padding: 28px 26px; box-shadow: 0 0 0 1px rgba(31,59,42,0.06); counter-increment: joystep; }
.joy-preise .joy-step::before {
	content: counter(joystep, decimal-leading-zero);
	display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
	background: var(--joy-green); color: var(--joy-ocker); font-family: var(--joy-serif); font-weight: 900; font-size: 22px;
	box-shadow: 0 0 0 6px #EBE4D3; margin-bottom: 18px;
}
.joy-preise .joy-step h3 { font-size: 21px; font-weight: 700; color: var(--joy-green); margin-bottom: 10px; font-family: var(--joy-sans); }
.joy-preise .joy-step p { color: var(--joy-text); }

/* Vergleichstabelle ------------------------------------------------------- */
.joy-preise .joy-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--joy-line); margin-top: 40px; -webkit-overflow-scrolling: touch; }
.joy-preise .joy-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 16px; margin: 0; border: 0; }
.joy-preise .joy-table th, .joy-preise .joy-table td { border: 0; border-top: 1px solid var(--joy-line); padding: 18px 16px; text-align: center; vertical-align: middle; background: transparent; }
.joy-preise .joy-table thead th { border-top: 0; background: var(--joy-sage); font-family: var(--joy-serif); font-size: 18px; color: var(--joy-green); padding: 20px 16px; }
.joy-preise .joy-table thead th:first-child { font-family: var(--joy-sans); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--joy-muted); text-align: left; padding-left: 24px; }
.joy-preise .joy-table thead th.is-featured { background: var(--joy-green); color: #FFFFFF; }
.joy-preise .joy-table tbody th { text-align: left; font-weight: 400; padding-left: 24px; }
.joy-preise .joy-table td.is-featured { background: #F4F6F2; font-weight: 700; }
.joy-preise .joy-table .joy-yes { display: inline-block; width: 20px; height: 20px; vertical-align: middle;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A06818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.joy-preise .joy-table .joy-no { color: #8A938C; }

/* Zweispaltige Abschnitte ------------------------------------------------- */
.joy-preise .joy-split,
.joy-preise .joy-split > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: 56px; }
.joy-preise .joy-split-side { flex: 1 1 320px; min-width: 0; }
.joy-preise .joy-split-main { flex: 999 1 560px; min-width: 0; }
.joy-preise .joy-split-side .wp-block-buttons { margin-top: 28px; }

/* Einzelprojekte ---------------------------------------------------------- */
.joy-preise .joy-tiles:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-tiles > .wp-block-group__inner-container {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.joy-preise .joy-tile,
.joy-preise .joy-tile > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 8px; }
.joy-preise .joy-tile > .wp-block-group__inner-container { height: 100%; }
.joy-preise .joy-tile {
	background: #FFFFFF; border-radius: 16px; padding: 26px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.joy-preise .joy-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(31,59,42,0.35); }
.joy-preise .joy-tile::before {
	content: ""; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 8px;
	background: #F3EBDB no-repeat center / 28px 28px;
}
.joy-preise .joy-tile h3 { font-family: var(--joy-sans); font-size: 19px; font-weight: 700; color: var(--joy-green); }
.joy-preise .joy-tile p { color: var(--joy-muted); font-size: 15px; flex-grow: 1; }
.joy-preise .joy-tile p.joy-tile-price { flex-grow: 0; font-size: 17px; font-weight: 900; color: var(--joy-ocker-dark); margin-top: 8px; }
.joy-preise .joy-ico-foto::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.joy-preise .joy-ico-portrait::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8'/%3E%3C/svg%3E"); }
.joy-preise .joy-ico-reels::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 9.5l3 2.5-3 2.5z'/%3E%3C/svg%3E"); }
.joy-preise .joy-ico-film::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3'/%3E%3C/svg%3E"); }
.joy-preise .joy-ico-web::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M6.5 6.5h.01M9 6.5h.01'/%3E%3C/svg%3E"); }
.joy-preise .joy-ico-drohne::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.5'/%3E%3Ccircle cx='19' cy='6' r='2.5'/%3E%3Ccircle cx='5' cy='18' r='2.5'/%3E%3Ccircle cx='19' cy='18' r='2.5'/%3E%3Crect x='9' y='10' width='6' height='4' rx='1'/%3E%3Cpath d='M7 8l2 2M17 8l-2 2M7 16l2-2M17 16l-2-2'/%3E%3C/svg%3E"); }

/* FAQ --------------------------------------------------------------------- */
.joy-preise .joy-faq { border-top: 1px solid #D9DCD2; }
.joy-preise .joy-faq details.wp-block-details { border-bottom: 1px solid #D9DCD2; padding: 24px 0; margin: 0; }
.joy-preise .joy-faq summary {
	display: flex; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none;
	font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--joy-green);
}
.joy-preise .joy-faq summary::-webkit-details-marker { display: none; }
.joy-preise .joy-faq summary::after { content: "+"; color: #C88A2E; font-size: 26px; line-height: 1; transition: transform .2s ease; flex-shrink: 0; }
.joy-preise .joy-faq details[open] summary::after { transform: rotate(45deg); }
.joy-preise .joy-faq details p { margin-top: 14px; color: var(--joy-text); max-width: 640px; }

/* Abschluss --------------------------------------------------------------- */
.joy-preise .joy-cta { padding: var(--joy-band-y) 0 220px; }
.joy-preise .joy-cta .joy-split-main { flex: 1 1 520px; }
.joy-preise .joy-cta .joy-split-side { flex: 0 1 auto; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; justify-content: center; }
.joy-preise .joy-cta .joy-split-side > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.joy-preise .joy-cta .wp-block-buttons { margin: 0; }
.joy-preise .joy-cta .joy-btn-accent .wp-block-button__link { font-size: 18px; padding: 18px 32px; }
.joy-preise .joy-contact a { color: #FFFFFF; text-decoration: none; }
.joy-preise .joy-contact a:hover { color: var(--joy-ocker); }
.joy-preise .joy-cta-note { margin: -4px 0 6px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* Tablet & Handy ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.joy-preise { --joy-band-y: 80px; }
	.joy-preise .joy-head-row { margin-bottom: 48px; }
}
@media (max-width: 781px) {
	.joy-preise { --joy-band-y: 64px; font-size: 16px; }
	.joy-preise .joy-wrap { padding-left: 16px; padding-right: 16px; }
	.joy-preise .joy-hero { padding: 56px 0 120px; }
	.joy-preise .joy-hero-grid, .joy-preise .joy-hero-grid > .wp-block-group__inner-container,
	.joy-preise .joy-split, .joy-preise .joy-split > .wp-block-group__inner-container { gap: 36px; }
	.joy-preise .joy-lead { font-size: 18px; }
	.joy-preise .joy-glance { padding: 24px; }
	.joy-preise .joy-trust ul.joy-checks { flex-direction: column; }
	.joy-preise .joy-head-row { margin-bottom: 40px; }
	.joy-preise .joy-billing { width: 100%; }
	.joy-preise .joy-billing button { flex: 1; padding: 12px 10px; }
	.joy-preise .joy-cards:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-cards > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 40px; }
	.joy-preise .joy-card { padding: 34px 24px 26px; margin-top: 0; }
	.joy-preise .joy-card--featured { order: -1; padding-top: 44px; }
	.joy-preise .joy-flag { left: 24px; }
	.joy-preise .joy-price__amount { font-size: 42px; }
	.joy-preise .joy-section-head { margin-bottom: 36px; }
	.joy-preise .joy-faq summary { font-size: 17px; }
	.joy-preise .joy-cta { padding-bottom: 170px; }
	.joy-preise .wp-block-buttons { width: 100%; }
	.joy-preise .joy-hero-text .wp-block-button,
	.joy-preise .joy-split-side .wp-block-button { flex: 1 1 100%; }
	.joy-preise .joy-hero-text .wp-block-button__link,
	.joy-preise .joy-split-side .wp-block-button__link { width: 100%; }
}

/* Weniger Bewegung, wenn gewünscht --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.joy-preise .joy-card, .joy-preise .joy-tile, .joy-preise .wp-block-button__link { transition: none; }
	.joy-preise .joy-card:hover, .joy-preise .joy-tile:hover, .joy-preise .wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   STARTSEITE
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.joy-preise .joy-home-hero { padding: 88px 0 200px; }
.joy-preise h1.joy-display { font-size: clamp(38px, 5.6vw, 76px); margin-bottom: 10px; max-width: 13ch; }
.joy-preise .joy-home-hero .joy-hero-text { flex: 999 1 540px; }
.joy-preise .joy-home-hero .joy-lead { margin-top: 26px; }

.joy-preise .joy-rotator {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em;
	font-family: var(--joy-serif); font-style: italic; font-weight: 700;
	font-size: clamp(30px, 4.2vw, 56px); line-height: 1.25; color: var(--joy-ocker-dark);
}
.joy-preise .joy-rotator__win { display: inline-block; height: 1.25em; overflow: hidden; position: relative; }
.joy-preise .joy-rotator__win::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .12em; height: .28em;
	background: rgba(224,165,74,0.32); z-index: -1;
}
.joy-preise .joy-rotator__list { display: flex; flex-direction: column; animation: joyRotate 9s cubic-bezier(.76,0,.24,1) infinite; }
.joy-preise .joy-rotator__list span { display: block; height: 1.25em; white-space: nowrap; }
@keyframes joyRotate {
	0%, 27%   { transform: translateY(0); }
	33%, 60%  { transform: translateY(-1.25em); }
	66%, 94%  { transform: translateY(-2.5em); }
	100%      { transform: translateY(-3.75em); }
}

/* Sucher-Bild ------------------------------------------------------------ */
.joy-preise .joy-viewfinder { position: relative; flex: 1 1 400px; min-width: 0; max-width: 500px; margin-left: auto; }
.joy-preise .joy-viewfinder > .wp-block-group__inner-container { position: relative; }
.joy-preise .joy-vf-img { margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(31,59,42,0.45); background: #E9E4D6; }
.joy-preise .joy-vf-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; animation: joyKenBurns 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes joyKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }

.joy-preise .joy-vf { position: absolute; inset: 18px; pointer-events: none; z-index: 2; }
.joy-preise .joy-vf__c { position: absolute; width: 38px; height: 38px; border: 0 solid #FFFFFF; opacity: .95; animation: joyBracket 1.1s cubic-bezier(.2,.8,.2,1) .3s both; }
.joy-preise .joy-vf__c--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 10px; --tx: -14px; --ty: -14px; }
.joy-preise .joy-vf__c--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 10px; --tx: 14px; --ty: -14px; }
.joy-preise .joy-vf__c--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 10px; --tx: -14px; --ty: 14px; }
.joy-preise .joy-vf__c--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 10px; --tx: 14px; --ty: 14px; }
@keyframes joyBracket { from { opacity: 0; transform: translate(var(--tx), var(--ty)); } to { opacity: .95; transform: none; } }

.joy-preise .joy-vf__rec, .joy-preise .joy-vf__meta {
	position: absolute; top: 14px; font-family: var(--joy-sans); font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #FFFFFF;
	background: rgba(27,38,32,0.45); border-radius: 999px; padding: 5px 10px; line-height: 1;
}
.joy-preise .joy-vf__rec { left: 16px; display: inline-flex; align-items: center; gap: 7px; }
.joy-preise .joy-vf__rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; animation: joyBlink 1.4s steps(1) infinite; }
.joy-preise .joy-vf__meta { right: 16px; }
@keyframes joyBlink { 50% { opacity: 0; } }
.joy-preise .joy-vf__focus {
	position: absolute; left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
	border: 2px solid var(--joy-ocker); border-radius: 6px; opacity: 0;
	animation: joyFocus 6s ease-in-out 1.4s infinite;
}
@keyframes joyFocus {
	0%   { opacity: 0; transform: scale(1.6); }
	8%   { opacity: 1; transform: scale(1); }
	12%  { opacity: .4; }
	16%  { opacity: 1; }
	40%  { opacity: 1; transform: scale(1); }
	50%, 100% { opacity: 0; transform: scale(1); }
}

.joy-preise .joy-badge { position: absolute; left: -54px; bottom: 48px; width: 132px; height: 132px; z-index: 3; filter: drop-shadow(0 18px 30px rgba(31,59,42,0.35)); }
.joy-preise .joy-badge__ring { transform-origin: 100px 100px; animation: joySpin 24s linear infinite; }
@keyframes joySpin { to { transform: rotate(360deg); } }


/* Laufband --------------------------------------------------------------- */
.joy-preise .joy-marquee-band { padding: 0; }
.joy-preise .joy-marquee { overflow: hidden; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.joy-preise .joy-marquee__track { display: flex; width: max-content; animation: joyMarquee 38s linear infinite; }
.joy-preise .joy-marquee:hover .joy-marquee__track { animation-play-state: paused; }
.joy-preise .joy-marquee__list { display: flex; list-style: none; margin: 0; padding: 0; }
.joy-preise .joy-marquee__list li {
	display: flex; align-items: center; gap: 36px; padding-right: 36px; margin: 0;
	font-family: var(--joy-serif); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); color: #FFFFFF; white-space: nowrap;
}
.joy-preise .joy-marquee__list li:nth-child(even) { font-style: italic; color: var(--joy-ocker); }
.joy-preise .joy-marquee__list li::after { content: ""; width: 9px; height: 9px; background: var(--joy-ocker); transform: rotate(45deg); flex-shrink: 0; }
@keyframes joyMarquee { to { transform: translateX(-50%); } }

/* Werte ----------------------------------------------------------------- */
.joy-preise h2.joy-h2-xl { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; }
.joy-preise h2.joy-h2 em { font-style: italic; font-weight: 700; color: var(--joy-ocker-dark); }
.joy-preise .joy-lead-wide { max-width: none; margin-bottom: 40px; }
.joy-preise .joy-values:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-values > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; counter-reset: joyval; }
.joy-preise .joy-value { border-top: 2px solid var(--joy-green); padding-top: 18px; counter-increment: joyval; }
.joy-preise .joy-value::before { content: counter(joyval, decimal-leading-zero); display: block; font-family: var(--joy-serif); font-weight: 900; font-size: 15px; color: #C88A2E; margin-bottom: 8px; }
.joy-preise .joy-value h3 { font-family: var(--joy-sans); font-size: 19px; font-weight: 700; color: var(--joy-green); margin-bottom: 6px; }
.joy-preise .joy-value p { color: var(--joy-muted); font-size: 16px; }

/* Leistungen ------------------------------------------------------------ */
.joy-preise .joy-services:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-services > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.joy-preise .joy-service { position: relative; background: #FFFFFF; border-radius: var(--joy-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.joy-preise .joy-service > .wp-block-group__inner-container { display: flex; flex-direction: column; height: 100%; }
.joy-preise .joy-service-img { margin: 0; overflow: hidden; }
.joy-preise .joy-service-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.joy-preise .joy-service-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.joy-preise .joy-service-body > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.joy-preise .joy-service h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 22px; color: var(--joy-green); }
.joy-preise .joy-service-body p { color: var(--joy-muted); font-size: 16px; }
.joy-preise .joy-service-body p.joy-more { margin-top: auto; padding-top: 8px; }
.joy-preise p.joy-more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--joy-green); text-decoration: none; }
.joy-preise p.joy-more a::after { content: "→"; transition: transform .25s ease; color: #C88A2E; }
.joy-preise p.joy-more a::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Projekte (Wisch-Leiste) ----------------------------------------------- */
.joy-preise .joy-rail-hint { color: var(--joy-muted); font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.joy-preise .joy-rail-hint::after { content: ""; width: 34px; height: 2px; background: #C88A2E; animation: joyNudge 1.8s ease-in-out infinite; }
@keyframes joyNudge { 50% { transform: translateX(8px); } }
.joy-preise .joy-rail:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-rail > .wp-block-group__inner-container {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 340px); gap: 22px;
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	padding: 4px max(24px, calc((100% - 1152px) / 2)) 24px; scroll-padding-inline: max(24px, calc((100% - 1152px) / 2));
	scrollbar-width: thin; scrollbar-color: #C88A2E transparent;
}
.joy-preise .joy-project { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.joy-preise .joy-project-img { margin: 0 0 6px; border-radius: 18px; overflow: hidden; }
.joy-preise .joy-project-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.joy-preise .joy-tag { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-ocker-dark); }
.joy-preise .joy-project h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 22px; color: var(--joy-green); }
.joy-preise .joy-project--cta { background: var(--joy-green); color: #FFFFFF; border-radius: 18px; padding: 32px 28px; justify-content: flex-end; min-height: 100%; }
.joy-preise .joy-project--cta > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; height: 100%; }
.joy-preise .joy-project--cta .joy-tag { color: var(--joy-ocker); }
.joy-preise .joy-project--cta h3 { color: #FFFFFF; font-size: 28px; line-height: 1.2; }
.joy-preise .joy-project--cta p { color: #D7DED8; }
.joy-preise .joy-project--cta .wp-block-buttons { margin-top: 10px; }

/* Ablauf mit Linie ------------------------------------------------------- */
.joy-preise .joy-process { position: relative; counter-reset: joyp; }
.joy-preise .joy-process:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-process > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; position: relative; }
.joy-preise .joy-process::before, .joy-preise .joy-process::after {
	content: ""; position: absolute; left: 30px; right: 30px; top: 29px; height: 2px; background: #DCD6C6; z-index: 0;
}
.joy-preise .joy-process::after { background: var(--joy-ocker); transform-origin: left center; }
.joy-preise .joy-pstep { position: relative; z-index: 1; counter-increment: joyp; }
.joy-preise .joy-pstep::before {
	content: counter(joyp); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
	background: var(--joy-green); color: var(--joy-ocker); font-family: var(--joy-serif); font-weight: 900; font-size: 22px;
	box-shadow: 0 0 0 8px var(--joy-cream); margin-bottom: 22px;
}
.joy-preise .joy-pstep h3 { font-family: var(--joy-sans); font-size: 20px; font-weight: 700; color: var(--joy-green); margin-bottom: 6px; }
.joy-preise .joy-pstep p { color: var(--joy-text); font-size: 16px; }
@supports (animation-timeline: view()) {
	.joy-preise .joy-process::after { animation: joyDraw linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
	@keyframes joyDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Region / Karte -------------------------------------------------------- */
.joy-preise .joy-region .joy-split-side { flex: 1 1 380px; }
.joy-preise .joy-region .joy-lead { margin-bottom: 26px; }
.joy-preise .joy-region ul.joy-checks { color: #E4EBE5; }
.joy-preise .joy-map-wrap { display: flex; justify-content: center; }
.joy-preise .joy-map { width: 100%; max-width: 560px; height: auto; display: block; overflow: visible; }
.joy-preise .joy-map__pulse { fill: none; stroke: #FAF8F3; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: joyPulse 2.6s ease-out var(--d, 0s) infinite; }
.joy-preise .joy-map__pulse--home { stroke: var(--joy-ocker); stroke-width: 3; animation-duration: 2s; }
@keyframes joyPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.joy-preise .joy-map__river { stroke-dasharray: 900; stroke-dashoffset: 0; }

/* Preis-Teaser ---------------------------------------------------------- */
.joy-preise .joy-teaser,
.joy-preise .joy-teaser > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.joy-preise .joy-teaser { background: var(--joy-cream); border-radius: 28px; padding: 56px; }
.joy-preise .joy-teaser > .wp-block-group__inner-container { padding: 0; }
.joy-preise .joy-teaser-text { flex: 999 1 420px; min-width: 0; }
.joy-preise .joy-teaser-text .joy-intro { margin-bottom: 28px; }
.joy-preise .joy-teaser .joy-glance { flex: 1 1 320px; }

/* Abschluss: Sonne geht auf -------------------------------------------- */

/* Einblenden beim Scrollen (nur mit JS, sonst sofort sichtbar) ---------- */
.joy-js .joy-preise .joy-reveal:not(.joy-cta) { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.joy-js .joy-preise .joy-reveal.is-in:not(.joy-cta) { opacity: 1; transform: none; }
.joy-js .joy-preise .joy-services .joy-reveal:nth-child(2) { transition-delay: .1s; }
.joy-js .joy-preise .joy-services .joy-reveal:nth-child(3) { transition-delay: .2s; }
.joy-js .joy-preise .joy-services .joy-reveal:nth-child(4) { transition-delay: .3s; }

/* Hover nur auf Geräten mit Maus --------------------------------------- */
@media (hover: hover) {
	.joy-preise .joy-service:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -24px rgba(31,59,42,0.4); }
	.joy-preise .joy-service:hover .joy-service-img img { transform: scale(1.06); }
	.joy-preise .joy-service:hover p.joy-more a::after { transform: translateX(6px); }
	.joy-preise .joy-project:hover .joy-project-img img { transform: scale(1.05); }
}

/* Startseite: Tablet & Handy ------------------------------------------- */
@media (max-width: 1024px) {
	.joy-preise .joy-process:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-process > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 28px; }
	.joy-preise .joy-process::before, .joy-preise .joy-process::after { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
	.joy-preise .joy-process::after { transform-origin: center top; }
	.joy-preise .joy-pstep { display: grid; grid-template-columns: 60px 1fr; column-gap: 22px; }
	.joy-preise .joy-pstep > .wp-block-group__inner-container { display: contents; }
	.joy-preise .joy-pstep::before { grid-row: span 2; margin: 0; }
	.joy-preise .joy-pstep h3 { align-self: end; margin-top: 4px; }
	@supports (animation-timeline: view()) {
		.joy-preise .joy-process::after { animation-name: joyDrawY; animation-range: entry 20% cover 60%; }
		@keyframes joyDrawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
	}
}
@media (max-width: 781px) {
	.joy-preise .joy-home-hero { padding: 48px 0 130px; }
	.joy-preise .joy-viewfinder { max-width: 420px; margin: 8px auto 0; flex-basis: 100%; }
	.joy-preise .joy-badge { width: 96px; height: 96px; left: auto; right: -8px; bottom: -28px; }
	.joy-preise .joy-vf { inset: 12px; }
	.joy-preise .joy-vf__c { width: 28px; height: 28px; }
	.joy-preise .joy-vf__focus { display: none; }
	.joy-preise .joy-marquee { padding: 16px 0; }
	.joy-preise .joy-marquee__track { animation-duration: 28s; }
	.joy-preise .joy-teaser { padding: 28px 20px; border-radius: 22px; }
	.joy-preise .joy-rail:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-rail > .wp-block-group__inner-container { grid-auto-columns: 78%; padding-inline: 16px; scroll-padding-inline: 16px; gap: 16px; }
	.joy-preise .joy-map__label { font-size: 22px; }
	.joy-preise .joy-map__tag { transform-box: fill-box; transform-origin: left center; transform: scale(1.3); }
}
@media (min-width: 782px) {
	.joy-preise .joy-rail-hint { display: none; }
}

/* Weniger Bewegung: alles Dekorative anhalten -------------------------- */
@media (prefers-reduced-motion: reduce) {
	.joy-preise .joy-rotator__list, .joy-preise .joy-vf-img img, .joy-preise .joy-vf__c, .joy-preise .joy-vf__focus,
	.joy-preise .joy-vf__rec::before, .joy-preise .joy-badge__ring, .joy-preise .joy-marquee__track,
	.joy-preise .joy-map__pulse, .joy-preise .joy-rail-hint::after, .joy-preise .joy-process::after { animation: none !important; }
	.joy-preise .joy-vf__focus { display: none; }
	.joy-preise .joy-marquee { overflow-x: auto; }
	.joy-js .joy-preise .joy-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.joy-preise .joy-service-img img, .joy-preise .joy-project-img img { transition: none; }
}

/* ==========================================================================
   Version 1.2 – schmaler Kopfbereich Preisseite, Werte 2×2, Projekt-Unterzeile
   ========================================================================== */
.joy-preise .joy-hero--slim { padding: 64px 0 96px; text-align: center; }
.joy-preise .joy-hero-slim { display: flex; flex-direction: column; align-items: center; }
.joy-preise .joy-hero-slim > .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: center; }
.joy-preise .joy-hero-slim .joy-eyebrow { justify-content: center; }
.joy-preise .joy-hero-slim .joy-eyebrow::after { content: ""; width: 32px; height: 2px; background: #C88A2E; flex-shrink: 0; }
.joy-preise h1.joy-h1--slim { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.15; letter-spacing: 0; margin-bottom: 16px; }
.joy-preise h1.joy-h1--slim em { padding: 0 4px; }
.joy-preise .joy-lead--slim { font-size: 18px; max-width: 620px; color: var(--joy-muted); }

.joy-preise .joy-values:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-values > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
.joy-preise .joy-project-sub { color: var(--joy-muted); font-size: 15px; margin-top: -4px; }

@media (max-width: 781px) {
	.joy-preise .joy-hero--slim { padding: 44px 0 66px; }
	.joy-preise .joy-lead--slim { font-size: 16px; }
	.joy-preise .joy-values:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-values > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   Version 1.3 – Berglandschaft (Schwarzwald-Kämme)
   Jede Ebene ist ein eigenes SVG: Parallax, Nebel und Sonnenaufgang laufen als
   reine Transform-Animationen auf der Grafikkarte. Ohne Unterstützung: statisch.
   ========================================================================== */
.joy-preise .joy-scape {
	position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0;
	height: clamp(190px, 23vw, 340px);
	overflow: hidden; pointer-events: none;
}
.joy-preise .joy-scape--slim { height: clamp(80px, 8.5vw, 124px); }
.joy-preise .joy-scape--cta  { height: clamp(200px, 27vw, 390px); }
.joy-preise .wp-block-html:has(> .joy-scape) { position: static; margin: 0; }
.joy-preise .joy-scape__layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }

/* Talnebel (nur Startseite) */
.joy-preise .joy-scape__mist { position: absolute; inset: 0; }
.joy-preise .joy-scape__fog {
	position: absolute; display: block; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(250,248,243,0.78), rgba(250,248,243,0.45) 45%, rgba(250,248,243,0) 100%);
}
.joy-preise .joy-scape__fog--a { left: -4%; bottom: 11%; width: 62%; height: 19%; animation: joyFogA 52s ease-in-out infinite alternate; }
.joy-preise .joy-scape__fog--b { left: 50%; bottom: 17%; width: 52%; height: 14%; animation: joyFogB 64s ease-in-out infinite alternate; }
@keyframes joyFogA { from { transform: translateX(-5%); } to { transform: translateX(9%); } }
@keyframes joyFogB { from { transform: translateX(7%); } to { transform: translateX(-9%); } }

/* Abschluss: Sonne geht beim Hinscrollen auf */
.joy-preise .joy-scape--cta .joy-scape__sky { transition: transform 2.2s cubic-bezier(.2,.75,.25,1); }
.joy-js .joy-preise .joy-cta:not(.is-in) .joy-scape__sky { transform: translateY(38%); }

/* Parallax beim Scrollen – nur Desktop, nur mit Browser-Unterstützung */
@supports (animation-timeline: scroll()) {
	@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
		.joy-preise .joy-scape--hero .joy-scape__sky       { --joy-p: 96px; }
		.joy-preise .joy-scape--hero .joy-scape__layer--1  { --joy-p: 72px; }
		.joy-preise .joy-scape--hero .joy-scape__layer--2  { --joy-p: 54px; }
		.joy-preise .joy-scape--hero .joy-scape__layer--3  { --joy-p: 38px; }
		.joy-preise .joy-scape--hero .joy-scape__layer--4,
		.joy-preise .joy-scape--hero .joy-scape__mist      { --joy-p: 24px; }
		.joy-preise .joy-scape--hero .joy-scape__layer--5  { --joy-p: 11px; }
		.joy-preise .joy-scape--slim .joy-scape__sky       { --joy-p: 30px; }
		.joy-preise .joy-scape--slim .joy-scape__layer--1  { --joy-p: 22px; }
		.joy-preise .joy-scape--slim .joy-scape__layer--2  { --joy-p: 14px; }
		.joy-preise .joy-scape--slim .joy-scape__layer--3  { --joy-p: 7px; }
		.joy-preise .joy-scape--hero .joy-scape__sky,
		.joy-preise .joy-scape--hero .joy-scape__layer,
		.joy-preise .joy-scape--hero .joy-scape__mist,
		.joy-preise .joy-scape--slim .joy-scape__sky,
		.joy-preise .joy-scape--slim .joy-scape__layer {
			animation: joyParallax linear both;
			animation-timeline: scroll(root block);
			animation-range: 0px 80vh;
		}
		@keyframes joyParallax { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--joy-p, 0px), 0); } }
	}
}

@media (max-width: 781px) {
	.joy-preise .joy-scape__fog { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.joy-preise .joy-scape__fog { animation: none !important; }
	.joy-js .joy-preise .joy-cta .joy-scape__sky { transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Version 1.4 – Sonnenuntergang beim Scrollen (Kopfbereiche)
   Die Sonne ist eine eigene Ebene; das Skript schiebt sie beim Scrollen hinter
   die Berge. Ohne Skript oder bei „Bewegung reduzieren“ bleibt sie stehen.
   ========================================================================== */
.joy-preise .joy-scape__sun { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; will-change: transform; }

/* ==========================================================================
   Version 2.0 – Leistungen, Kontakt, Referenzen (Blog), Projektbericht, Ortsseiten
   ========================================================================== */
.joy-preise [id] { scroll-margin-top: 96px; }
.joy-preise .joy-btn-light .wp-block-button__link { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.55); }
.joy-preise .joy-btn-light .wp-block-button__link:hover { background: #FFFFFF; color: var(--joy-green); filter: none; }
.joy-preise .joy-region .wp-block-buttons { margin-top: 28px; }
.joy-preise .joy-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.joy-preise p.joy-more--head { align-self: flex-end; }
.joy-preise .joy-project { position: relative; }
.joy-preise .joy-project h3 a { color: inherit; text-decoration: none; }
.joy-preise .joy-project h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.joy-preise .joy-project--cta .wp-block-buttons { position: relative; z-index: 2; }

/* Sprungmarken-Leiste (Leistungen) */
.joy-preise .joy-chips-band { padding: 18px 0; }
.joy-preise .joy-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.joy-preise .joy-chips a {
	color: #FFFFFF; text-decoration: none; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px;
	padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center;
	font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; transition: background-color .2s, color .2s, border-color .2s;
}
.joy-preise .joy-chips a:hover { background: var(--joy-ocker); border-color: var(--joy-ocker); color: var(--joy-green); }

/* Leistungs-Abschnitte (Bild + Text, abwechselnd) */
.joy-preise .joy-feature:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-feature > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.joy-preise .joy-feature-media { margin: 0; position: relative; }
.joy-preise .joy-feature-media::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid #C88A2E; border-radius: 24px; z-index: -1; }
.joy-preise .joy-feature--rev .joy-feature-media::after { inset: 18px 18px -18px -18px; }
.joy-preise .joy-feature-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.joy-preise .joy-feature--rev .joy-feature-media { order: 2; }
.joy-preise .joy-feature-text .joy-copy { margin-top: 6px; }
.joy-preise .joy-feature-text ul.joy-checks { margin: 22px 0 24px; }
.joy-preise .joy-price-hint { font-weight: 700; color: var(--joy-ocker-dark); margin-bottom: 22px; }
.joy-preise .joy-bg-sage .joy-feature-media::after { border-color: #C9A46A; }

/* Kontakt */
.joy-preise .joy-contact-grid .joy-split-main { flex: 999 1 560px; }
.joy-preise .joy-contact-grid .joy-split-side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; }
.joy-preise .joy-contact-grid .joy-split-side > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 18px; }
.joy-preise .joy-info { background: var(--joy-cream); border-radius: 20px; padding: 28px; }
.joy-preise .joy-info h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 21px; color: var(--joy-green); margin-bottom: 14px; }
.joy-preise .joy-info--dark { background: var(--joy-green); color: #FFFFFF; }
.joy-preise .joy-info--dark h3 { color: #FFFFFF; }
.joy-preise ol.joy-steps-list { list-style: none; counter-reset: joyli; display: flex; flex-direction: column; gap: 14px; }
.joy-preise ol.joy-steps-list li { counter-increment: joyli; position: relative; padding-left: 44px; margin: 0; color: var(--joy-text); }
.joy-preise ol.joy-steps-list li::before {
	content: counter(joyli); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
	background: var(--joy-green); color: var(--joy-ocker); font-family: var(--joy-serif); font-weight: 900; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.joy-preise .joy-info-note { margin-top: 16px; font-size: 15px; color: var(--joy-muted); }
.joy-preise .joy-contact-line { margin-top: 10px; }
.joy-preise .joy-contact-line a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
.joy-preise .joy-contact-line a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--joy-ocker); flex-shrink: 0; }
.joy-preise .joy-contact-line a:hover { color: var(--joy-ocker); }
.joy-preise .joy-address { line-height: 1.7; }

/* Formular */
.joy-preise .joy-form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.joy-preise .joy-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.joy-preise .joy-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.joy-preise .joy-field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.joy-preise .joy-field--full { grid-column: 1 / -1; }
.joy-preise .joy-field label, .joy-preise .joy-field legend { font-size: 14px; font-weight: 700; color: var(--joy-green); }
.joy-preise .joy-field input, .joy-preise .joy-field select, .joy-preise .joy-field textarea {
	font: inherit; font-size: 16px; color: var(--joy-ink); background: #FFFFFF; border: 1px solid #CFD6CC; border-radius: 12px;
	padding: 13px 14px; min-height: 50px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.joy-preise .joy-field textarea { min-height: 140px; resize: vertical; }
.joy-preise .joy-field input:focus, .joy-preise .joy-field select:focus, .joy-preise .joy-field textarea:focus { outline: none; border-color: var(--joy-green); box-shadow: 0 0 0 3px rgba(224,165,74,0.35); }
.joy-preise .joy-chips-field { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.joy-preise .joy-chips-field legend { margin-bottom: 10px; padding: 0; }
.joy-preise .joy-chip { position: relative; cursor: pointer; }
.joy-preise .joy-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.joy-preise .joy-chip span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px;
	border: 1px solid #CFD6CC; background: #FFFFFF; font-size: 15px; font-weight: 700; color: var(--joy-green); transition: .2s;
}
.joy-preise .joy-chip input:checked + span { background: var(--joy-green); border-color: var(--joy-green); color: #FFFFFF; }
.joy-preise .joy-chip input:focus-visible + span { outline: 3px solid var(--joy-ocker); outline-offset: 2px; }
.joy-preise .joy-consent { font-size: 14px; color: var(--joy-muted); }
.joy-preise .joy-consent label { display: flex; gap: 12px; align-items: flex-start; }
.joy-preise .joy-consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--joy-green); }
.joy-preise .joy-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.joy-preise .joy-submit {
	font: inherit; font-weight: 900; font-size: 17px; cursor: pointer; border: 0; border-radius: 999px;
	padding: 17px 34px; min-height: 52px; background: var(--joy-green); color: #FFFFFF; transition: transform .2s, filter .2s;
}
.joy-preise .joy-submit:hover { transform: translateY(-2px); filter: brightness(1.08); }
.joy-preise .joy-form__hint { font-size: 13px; color: var(--joy-muted); }
.joy-preise .joy-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.joy-preise .joy-form-notice { margin-top: 22px; padding: 18px 22px; border-radius: 14px; font-size: 16px; }
.joy-preise .joy-form-notice--ok { background: #E7F0E4; color: #1F3B2A; border: 1px solid #B9D1B2; }
.joy-preise .joy-form-notice--err { background: #FBEDE6; color: #6B2E14; border: 1px solid #EBC3AE; }

/* Referenzen-Raster (Blog-Übersicht, auch „Weitere Projekte“) */
.joy-preise .joy-ref-grid { margin-top: 8px; }
.joy-preise .joy-ref-grid ul.wp-block-post-template {
	list-style: none; margin: 0; padding: 0; display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 44px 28px;
}
.joy-preise .joy-ref-grid li.wp-block-post { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.joy-preise .joy-ref-grid .wp-block-post-featured-image { margin: 0 0 8px; border-radius: 18px; overflow: hidden; background: #E9E4D6; }
.joy-preise .joy-ref-grid .wp-block-post-featured-image a { display: block; }
.joy-preise .joy-ref-grid .wp-block-post-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.joy-preise .joy-ref-grid .wp-block-post-terms { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-ocker-dark); }
.joy-preise .joy-ref-grid .wp-block-post-terms a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
.joy-preise .joy-ref-grid .wp-block-post-title { font-family: var(--joy-serif); font-weight: 900; font-size: 24px; line-height: 1.25; margin: 0; }
.joy-preise .joy-ref-grid .wp-block-post-title a { color: var(--joy-green); text-decoration: none; }
.joy-preise .joy-ref-grid .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.joy-preise .joy-ref-grid .wp-block-post-excerpt { margin: 0; }
.joy-preise .joy-ref-grid .wp-block-post-excerpt__excerpt { color: var(--joy-muted); font-size: 16px; margin: 0; }
.joy-preise .joy-ref-grid .wp-block-post-excerpt__more-text { margin: 10px 0 0; }
.joy-preise .joy-ref-grid .wp-block-post-excerpt__more-link { display: inline-flex; gap: 8px; font-weight: 700; color: var(--joy-green); text-decoration: none; }
.joy-preise .joy-ref-grid .wp-block-post-excerpt__more-link::after { content: "→"; color: #C88A2E; transition: transform .25s; }
@media (hover: hover) {
	.joy-preise .joy-ref-grid li.wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.05); }
	.joy-preise .joy-ref-grid li.wp-block-post:hover .wp-block-post-title a { color: var(--joy-ocker-dark); }
	.joy-preise .joy-ref-grid li.wp-block-post:hover .wp-block-post-excerpt__more-link::after { transform: translateX(6px); }
}

/* Projektbericht */
.joy-preise .joy-case-cover-band { padding: 56px 0 0; }
.joy-preise .joy-case-cover { margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(31,59,42,0.45); }
.joy-preise .joy-case-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.joy-preise .joy-case-band { padding: 64px 0 96px; }
.joy-preise .joy-case-layout:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-case-layout > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; }
.joy-preise .joy-case-main { max-width: 720px; font-size: 18px; line-height: 1.75; color: var(--joy-text); }
.joy-preise .joy-case-main > * + *,
.joy-preise .joy-case-main > .wp-block-group__inner-container > * + * { margin-top: 18px; }
.joy-preise .joy-case-main h2 { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(24px, 2.6vw, 30px); color: var(--joy-green); margin-top: 48px; }
.joy-preise .joy-case-main .joy-case-intro { font-size: 21px; line-height: 1.6; color: var(--joy-ink); }
.joy-preise .joy-case-main ul.joy-checks { gap: 12px; }
.joy-preise .joy-case-main figure { margin: 36px 0; }
.joy-preise .joy-case-main figure img { display: block; width: 100%; height: auto; border-radius: 20px; }
.joy-preise .joy-quote { margin: 44px 0; padding: 0; border: 0; position: relative; }
.joy-preise .joy-quote::before { content: "„"; display: block; font-family: var(--joy-serif); font-size: 84px; line-height: .6; color: #C88A2E; margin-bottom: 8px; }
.joy-preise .joy-quote p { font-family: var(--joy-serif); font-style: italic; font-weight: 700; font-size: 24px; line-height: 1.45; color: var(--joy-green); }
.joy-preise .joy-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-muted); }
.joy-preise .joy-film-link { display: flex; align-items: center; gap: 20px; margin-top: 36px; padding: 14px; border-radius: 20px; background: var(--joy-green); color: #FFFFFF; text-decoration: none; transition: transform .25s; }
.joy-preise .joy-film-link:hover { transform: translateY(-3px); color: #FFFFFF; }
.joy-preise .joy-film-link__media { position: relative; flex: 0 0 180px; border-radius: 12px; overflow: hidden; }
.joy-preise .joy-film-link__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; opacity: .85; }
.joy-preise .joy-film-link__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--joy-ocker); }
.joy-preise .joy-film-link__play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--joy-green); }
.joy-preise .joy-film-link__text { display: flex; flex-direction: column; gap: 4px; }
.joy-preise .joy-film-link__text strong { font-family: var(--joy-serif); font-size: 20px; }
.joy-preise .joy-film-link__text span { font-size: 14px; color: #C9D3CB; }
.joy-preise .joy-case-aside { position: sticky; top: 96px; background: var(--joy-cream); border-radius: 22px; padding: 28px; }
.joy-preise .joy-case-aside h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 21px; color: var(--joy-green); margin-bottom: 8px; }
.joy-preise p.joy-fact { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid #E6E1D3; font-weight: 700; color: var(--joy-ink); }
.joy-preise p.joy-fact span { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-muted); }
.joy-preise p.joy-fact a { color: var(--joy-green); }
.joy-preise .joy-case-aside .wp-block-buttons { margin-top: 22px; }
.joy-preise .joy-case-more .joy-head-row { margin-bottom: 40px; }

/* Ortsseiten */
.joy-preise .joy-city-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.joy-preise .joy-city-grid li { margin: 0; }
.joy-preise .joy-city {
	display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 26px 26px 24px; border-radius: 18px; background: #FFFFFF;
	text-decoration: none; position: relative; transition: transform .25s, box-shadow .25s;
}
.joy-preise .joy-city::after { content: "→"; position: absolute; right: 24px; top: 24px; color: #C88A2E; font-size: 20px; transition: transform .25s; }
.joy-preise .joy-city__name { font-family: var(--joy-serif); font-weight: 900; font-size: 24px; color: var(--joy-green); }
.joy-preise .joy-city__sub { font-size: 15px; color: var(--joy-muted); }
@media (hover: hover) {
	.joy-preise .joy-city:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(31,59,42,0.35); }
	.joy-preise .joy-city:hover::after { transform: translateX(5px); }
}
.joy-preise .joy-svc3:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-svc3 > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.joy-preise .joy-svc3-card { background: #FFFFFF; border-radius: 20px; padding: 32px 30px; }
.joy-preise .joy-svc3-card h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 22px; color: var(--joy-green); margin-bottom: 18px; }
.joy-preise ul.joy-checks--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }

@media (max-width: 1024px) {
	.joy-preise .joy-case-layout:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-case-layout > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 36px; }
	.joy-preise .joy-case-aside { position: static; order: -1; }
	.joy-preise .joy-feature:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-feature > .wp-block-group__inner-container { gap: 48px; }
}
@media (max-width: 781px) {
	.joy-preise .joy-feature:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-feature > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 32px; }
	.joy-preise .joy-feature--rev .joy-feature-media { order: 0; }
	.joy-preise .joy-feature-media::after, .joy-preise .joy-feature--rev .joy-feature-media::after { inset: 10px -10px -10px 10px; }
	.joy-preise .joy-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.joy-preise .joy-chips a { flex-shrink: 0; }
	.joy-preise .joy-form__grid, .joy-preise .joy-form__grid--3 { grid-template-columns: 1fr; }
	.joy-preise .joy-submit { width: 100%; }
	.joy-preise .joy-case-cover-band { padding-top: 32px; }
	.joy-preise .joy-case-band { padding: 40px 0 64px; }
	.joy-preise .joy-case-main { font-size: 17px; }
	.joy-preise .joy-case-main .joy-case-intro { font-size: 19px; }
	.joy-preise .joy-film-link { flex-direction: column; align-items: stretch; }
	.joy-preise .joy-film-link__media { flex-basis: auto; }
	.joy-preise ul.joy-checks--2col { grid-template-columns: 1fr; }
	.joy-preise p.joy-more--head { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.joy-preise .joy-ref-grid .wp-block-post-featured-image img, .joy-preise .joy-city, .joy-preise .joy-film-link { transition: none; }
}
.joy-preise .joy-chips-field { flex-direction: row; }
.joy-preise .joy-consent label { display: block; position: relative; padding-left: 32px; }
.joy-preise .joy-consent input { position: absolute; left: 0; top: 2px; margin: 0; }
.joy-preise .joy-quote::before { height: 46px; line-height: 1; margin-bottom: 0; }
.joy-preise .joy-ref-grid--static ul.wp-block-post-template { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.joy-preise .joy-eyebrow > span { display: inline; }
.joy-preise .joy-quote::before { content: "\201C"; height: 52px; font-size: 96px; line-height: 1; overflow: hidden; }

/* ==========================================================================
   Version 2.1 – Showreel, Kundenstimmen, Branchen-, Film-, Über-uns-, Portrait-
   und Ratgeber-Seiten
   ========================================================================== */

/* Showreel-Fenster im Filmstreifen ---------------------------------------- */
@property --joy-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.joy-preise .joy-reel-band { padding-bottom: calc(var(--joy-band-y) + 16px); }
.joy-preise .joy-reel-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.joy-preise .joy-reel-head .joy-eyebrow { justify-content: center; }
.joy-preise .joy-reel-head .joy-eyebrow::after { content: ""; width: 32px; height: 2px; background: var(--joy-ocker); flex-shrink: 0; }
.joy-preise .joy-reel-head .joy-lead { margin: 0 auto; }
.joy-preise .joy-bg-white .joy-reel-head .joy-lead, .joy-preise .joy-bg-cream .joy-reel-head .joy-lead { color: var(--joy-text); }

.joy-preise .joy-reel {
	--joy-perf: 46px;
	position: relative; isolation: isolate; max-width: 1080px; margin: 0 auto;
	padding: var(--joy-perf) 18px; border-radius: 26px;
	background: #12261A; box-shadow: 0 50px 90px -40px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.joy-preise .joy-reel > .wp-block-group__inner-container { position: static; }
/* Lichtspur, die um den Rahmen läuft */
.joy-preise .joy-reel::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
	background: conic-gradient(from var(--joy-a), rgba(224,165,74,0) 0deg, rgba(224,165,74,0) 250deg, rgba(224,165,74,0.95) 320deg, rgba(255,233,190,1) 340deg, rgba(224,165,74,0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: joyTrace 9s linear infinite;
}
@keyframes joyTrace { to { --joy-a: 360deg; } }
/* warmes Streulicht hinter dem Fenster */
.joy-preise .joy-reel::before {
	content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 18%; bottom: -6%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(224,165,74,0.32), rgba(224,165,74,0));
	filter: blur(30px); animation: joyLeak 14s ease-in-out infinite alternate;
}
@keyframes joyLeak { from { transform: translate3d(-6%, 0, 0) scale(1); } to { transform: translate3d(6%, -4%, 0) scale(1.08); } }

/* Perforation oben und unten */
.joy-preise .wp-block-html:has(> .joy-reel__deco) { margin: 0; }
.joy-preise .joy-reel__deco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.joy-preise .joy-reel__perf {
	position: absolute; left: 0; width: calc(100% + 44px); height: 13px;
	background: repeating-linear-gradient(90deg, rgba(250,248,243,0.16) 0 22px, transparent 22px 44px);
	border-radius: 4px;
	animation: joyPerf 3.2s linear infinite; will-change: transform;
}
.joy-preise .joy-reel__perf--t { top: calc((var(--joy-perf) - 13px) / 2); }
.joy-preise .joy-reel__perf--b { bottom: calc((var(--joy-perf) - 13px) / 2); animation-direction: reverse; }
@keyframes joyPerf { from { transform: translate3d(-44px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.joy-preise .joy-reel__perf::before, .joy-preise .joy-reel__perf::after { content: none; }
.joy-preise .joy-reel__code {
	position: absolute; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 2px;
	color: rgba(224,165,74,0.75); text-transform: uppercase; white-space: nowrap;
}
.joy-preise .joy-reel__code--l { left: 24px; bottom: 3px; }
.joy-preise .joy-reel__code--r { right: 24px; top: 3px; }

/* Bildschirm */
.joy-preise .joy-reel__screen {
	position: relative; z-index: 2; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0C1A12;
}
.joy-preise .joy-reel__screen > .wp-block-group__inner-container { position: static; height: 100%; }
.joy-preise .joy-reel__screen figure, .joy-preise .joy-reel__screen .wp-block-html { margin: 0; }
.joy-preise .joy-reel__video { position: absolute; inset: 0; margin: 0; }
.joy-preise .joy-reel__video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0C1A12; }
.joy-preise .joy-reel__poster { position: absolute; inset: 0; margin: 0; z-index: 2; display: none; transition: opacity .6s ease, visibility .6s; }
.joy-preise .joy-reel__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; animation: joyKenBurns 26s ease-in-out infinite alternate; }
.joy-preise .joy-reel__ui { position: absolute; inset: 0; z-index: 3; display: none; transition: opacity .5s ease, visibility .5s; }
.joy-preise .joy-reel__ui::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(12,26,18,0.05) 30%, rgba(12,26,18,0.55) 100%), linear-gradient(transparent 55%, rgba(12,26,18,0.6));
}
.joy-preise .joy-reel.is-ready .joy-reel__poster, .joy-preise .joy-reel.is-ready .joy-reel__ui { display: block; }
.joy-preise .joy-reel.is-ready .joy-reel__video { opacity: 0; }
.joy-preise .joy-reel.is-playing .joy-reel__video { opacity: 1; }
.joy-preise .joy-reel.is-playing .joy-reel__poster, .joy-preise .joy-reel.is-playing .joy-reel__ui { opacity: 0; visibility: hidden; }
.joy-preise .joy-reel.is-playing .joy-reel__perf { animation-play-state: paused; }

.joy-preise .joy-reel__mark { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255,255,255,0.85); }
.joy-preise .joy-reel__mark--tl { top: 18px; left: 18px; border-top-width: 2px; border-left-width: 2px; }
.joy-preise .joy-reel__mark--tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; }
.joy-preise .joy-reel__mark--bl { bottom: 18px; left: 18px; border-bottom-width: 2px; border-left-width: 2px; }
.joy-preise .joy-reel__mark--br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; }
.joy-preise .joy-reel__label, .joy-preise .joy-reel__tc {
	position: absolute; top: 24px; font-size: 12px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: #FFFFFF;
	text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.joy-preise .joy-reel__label { left: 56px; display: inline-flex; align-items: center; gap: 9px; }
.joy-preise .joy-reel__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--joy-ocker); box-shadow: 0 0 0 4px rgba(224,165,74,0.25); }
.joy-preise .joy-reel__tc { right: 56px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.joy-preise .joy-reel__play {
	position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0; border: 0; border-radius: 50%;
	background: var(--joy-ocker); cursor: pointer; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5); transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .25s;
}
.joy-preise .joy-reel__play::after {
	content: ""; position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -9px;
	border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--joy-green);
}
.joy-preise .joy-reel__play:hover { transform: scale(1.08); background: #EBB862; }
.joy-preise .joy-reel__play:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 5px; }
.joy-preise .joy-reel__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(224,165,74,0.8); animation: joyRing 2.6s ease-out infinite; pointer-events: none; }
.joy-preise .joy-reel__ring--2 { animation-delay: 1.3s; }
@keyframes joyRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.joy-preise .joy-reel__cta {
	position: absolute; left: 0; right: 0; top: calc(50% + 70px); text-align: center; color: #FFFFFF;
	font-family: var(--joy-serif); font-style: italic; font-weight: 700; font-size: 20px; text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.joy-preise .joy-reel__soon { display: none; }
.joy-preise .joy-reel.is-empty .joy-reel__play, .joy-preise .joy-reel.is-empty .joy-reel__cta { display: none; }
.joy-preise .joy-reel.is-empty .joy-reel__soon {
	display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
	background: rgba(12,26,18,0.6); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 12px 22px;
	font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.joy-preise .joy-reel-note { text-align: center; margin-top: 30px; font-size: 15px; color: #C9D3CB; }
.joy-preise .joy-bg-white .joy-reel-note, .joy-preise .joy-bg-cream .joy-reel-note { color: var(--joy-muted); }
/* Im Editor: alles untereinander, damit Bild und Video austauschbar sind */
.editor-styles-wrapper .joy-preise .joy-reel__poster, .editor-styles-wrapper .joy-preise .joy-reel__ui { display: block; position: relative; }
.editor-styles-wrapper .joy-preise .joy-reel__video { position: relative; }
.editor-styles-wrapper .joy-preise .joy-reel__screen { aspect-ratio: auto; }

/* Kundenstimmen ------------------------------------------------------------ */
.joy-preise .joy-voices:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-voices > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.joy-preise .joy-voice {
	position: relative; background: #FFFFFF; border-radius: 22px; padding: 38px 32px 30px;
	box-shadow: 0 0 0 1px rgba(31,59,42,0.06), 0 30px 60px -40px rgba(31,59,42,0.35);
	display: flex; flex-direction: column; gap: 18px;
}
.joy-preise .joy-voice > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 18px; }
.joy-preise .joy-voice:nth-child(2) { margin-top: 36px; }
.joy-preise .joy-voice::before { content: "\201C"; font-family: var(--joy-serif); font-weight: 900; font-size: 88px; line-height: .7; height: 44px; color: #C88A2E; }
.joy-preise .joy-voice__text { font-family: var(--joy-serif); font-style: italic; font-weight: 700; font-size: 19px; line-height: 1.55; color: var(--joy-green); }
.joy-preise .joy-voice__who { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid var(--joy-line); }
.joy-preise .joy-voice__who strong { font-size: 16px; color: var(--joy-ink); }
.joy-preise .joy-voice__who span { font-size: 14px; color: var(--joy-muted); }
.joy-preise .joy-voice p.joy-more { font-size: 15px; }
.joy-preise .joy-voice p.joy-more a { position: relative; }
.joy-preise .joy-voice p.joy-more a::before { content: none; }

/* Herausforderungen (Karten) ----------------------------------------------- */
.joy-preise .joy-pains:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-pains > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; counter-reset: joypain; }
.joy-preise .joy-pain { background: #FFFFFF; border-radius: 20px; padding: 30px 28px; border-top: 3px solid var(--joy-ocker); counter-increment: joypain; }
.joy-preise .joy-bg-white .joy-pain { background: var(--joy-sage); }
.joy-preise .joy-pain::before { content: counter(joypain, decimal-leading-zero); display: block; font-family: var(--joy-serif); font-weight: 900; font-size: 15px; color: #C88A2E; margin-bottom: 10px; }
.joy-preise .joy-pain h3 { font-family: var(--joy-sans); font-size: 19px; font-weight: 700; color: var(--joy-green); margin-bottom: 8px; }
.joy-preise .joy-pain p { color: var(--joy-text); font-size: 16px; }

/* Jahreszeiten ------------------------------------------------------------- */
.joy-preise .joy-seasons:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-seasons > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.joy-preise .joy-season { position: relative; overflow: hidden; background: #FFFFFF; border-radius: 20px; padding: 30px 26px 26px; }
.joy-preise .joy-season::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--joy-season, #8DA47E); }
.joy-preise .joy-season--sommer { --joy-season: #E0A54A; }
.joy-preise .joy-season--herbst { --joy-season: #B4622D; }
.joy-preise .joy-season--winter { --joy-season: #8FA3AE; }
.joy-preise .joy-season h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 24px; color: var(--joy-green); }
.joy-preise .joy-season .joy-season__when { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-muted); margin: 4px 0 14px; }
.joy-preise .joy-season ul.joy-checks { gap: 9px; font-size: 15px; }
.joy-preise .joy-season ul.joy-checks li { padding-left: 26px; }
.joy-preise .joy-season ul.joy-checks li::before { width: 16px; height: 16px; }

/* Gegenüberstellung --------------------------------------------------------- */
.joy-preise .joy-compare:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-compare > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.joy-preise .joy-compare__col { background: var(--joy-sage); border-radius: 22px; padding: 38px 34px; }
.joy-preise .joy-compare__col--dark { background: var(--joy-green); color: #FFFFFF; }
.joy-preise .joy-compare__col h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 26px; color: var(--joy-green); margin-bottom: 4px; }
.joy-preise .joy-compare__col--dark h3 { color: #FFFFFF; }
.joy-preise .joy-compare__col .joy-compare__sub { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-ocker-dark); margin-bottom: 16px; }
.joy-preise .joy-compare__col--dark .joy-compare__sub { color: var(--joy-ocker); }
.joy-preise .joy-compare__col p { color: var(--joy-text); }
.joy-preise .joy-compare__col--dark p, .joy-preise .joy-compare__col--dark ul.joy-checks { color: #D7DED8; }
.joy-preise .joy-compare__col ul.joy-checks { margin-top: 20px; }
.joy-preise .joy-compare__col--dark ul.joy-checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0A54A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* Große Zahl ---------------------------------------------------------------- */
.joy-preise .joy-bignum { text-align: center; max-width: 760px; margin: 0 auto; }
.joy-preise .joy-bignum .joy-eyebrow { justify-content: center; }
.joy-preise .joy-bignum .joy-eyebrow::after { content: ""; width: 32px; height: 2px; background: #C88A2E; flex-shrink: 0; }
.joy-preise .joy-bignum__num { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(64px, 11vw, 132px); line-height: 1; color: var(--joy-ocker-mid); letter-spacing: -2px; }
.joy-preise .joy-bignum__unit { font-size: 20px; font-weight: 700; color: var(--joy-green); margin: 10px 0 24px; }
.joy-preise .joy-bignum .joy-intro { margin: 0 auto 10px; max-width: 620px; }

/* Folgen (Schwarzwald-Portrait) --------------------------------------------- */
.joy-preise .joy-episodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.joy-preise .joy-episode { position: relative; margin: 0; min-height: 300px; border-radius: 22px; overflow: hidden; background: var(--joy-green); color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.joy-preise .joy-episode img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.joy-preise .joy-episode::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(31,59,42,0) 30%, rgba(18,38,26,0.9)); }
.joy-preise .joy-episode > * { position: relative; }
.joy-preise .joy-episode__no { position: absolute; top: 22px; left: 26px; font-family: var(--joy-serif); font-weight: 900; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(224,165,74,0.85); }
.joy-preise .joy-episode__state { align-self: flex-start; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-green); background: var(--joy-ocker); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }
.joy-preise .joy-episode h3 { font-family: var(--joy-serif); font-weight: 900; font-size: 22px; line-height: 1.25; color: #FFFFFF; }
.joy-preise .joy-episode h3 a { color: inherit; text-decoration: none; }
.joy-preise .joy-episode h3 a::after { content: ""; position: absolute; inset: 0; }
.joy-preise .joy-episode p { color: #D7DED8; font-size: 15px; margin-top: 6px; }
.joy-preise .joy-episode--cta { background: var(--joy-ocker); color: var(--joy-green); }
.joy-preise .joy-episode--cta::before { content: none; }
.joy-preise .joy-episode--cta h3 { color: var(--joy-green); }
.joy-preise .joy-episode--cta p { color: #3B3220; }
.joy-preise .joy-episode--cta a.joy-episode__btn { align-self: flex-start; margin-top: 18px; background: var(--joy-green); color: #FFFFFF; border-radius: 999px; padding: 12px 22px; font-weight: 700; text-decoration: none; }
@media (hover: hover) { .joy-preise .joy-episode:hover img { transform: scale(1.05); } }

/* Über uns: Hochformat-Bild, Galerie, Ansprechpartner ---------------------- */
.joy-preise .joy-feature--portrait .joy-feature-media img { aspect-ratio: 4 / 5; }
.joy-preise .joy-feature--portrait:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-feature--portrait > .wp-block-group__inner-container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.joy-preise .joy-sign { font-family: var(--joy-serif); font-style: italic; font-weight: 700; font-size: 22px; color: var(--joy-ocker-dark); margin-top: 8px; }
.joy-preise .joy-facts-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.joy-preise p.joy-facts-row span { font-size: 14px; font-weight: 700; color: var(--joy-green); background: var(--joy-sage); border-radius: 999px; padding: 8px 14px; }
.joy-preise .joy-bg-sage p.joy-facts-row span { background: #FFFFFF; }
.joy-preise .joy-gallery:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-gallery > .wp-block-group__inner-container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 220px; gap: 16px; }
.joy-preise .joy-gallery figure { margin: 0; border-radius: 18px; overflow: hidden; background: #E9E4D6; position: relative; }
.joy-preise .joy-gallery figure:first-child { grid-row: span 2; }
.joy-preise .joy-gallery figure:last-child { grid-column: span 2; }
.joy-preise .joy-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.joy-preise .joy-gallery figcaption { position: absolute; left: 12px; bottom: 12px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #FFFFFF; background: rgba(27,38,32,0.55); border-radius: 999px; padding: 5px 11px; }
.joy-preise .joy-person { display: flex; align-items: center; gap: 16px; }
.joy-preise .joy-person > .wp-block-group__inner-container { display: flex; align-items: center; gap: 16px; }
.joy-preise .joy-person figure { flex: 0 0 76px; margin: 0; }
.joy-preise .joy-person img { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px rgba(224,165,74,0.6); }
.joy-preise .joy-person p { font-size: 15px; color: var(--joy-muted); line-height: 1.45; }
.joy-preise .joy-person p strong { display: block; font-size: 17px; color: var(--joy-green); }

/* Filme als Karten ------------------------------------------------------------ */
.joy-preise .joy-film-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.joy-preise .joy-film-grid .joy-film-link { margin: 0; flex-direction: column; align-items: stretch; gap: 14px; padding: 12px 12px 20px; }
.joy-preise .joy-film-grid .joy-film-link__media { flex-basis: auto; }
.joy-preise .joy-film-grid .joy-film-link__text { padding: 0 8px; }
.joy-preise .joy-film-grid .joy-film-link__text em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-ocker); }

/* FAQ mit Zwischenüberschriften ---------------------------------------------- */
.joy-preise .joy-faq h3.joy-faq-cat { font-family: var(--joy-sans); font-size: 13px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: var(--joy-ocker-dark); padding: 34px 0 6px; border-bottom: 1px solid #D9DCD2; }
.joy-preise .joy-faq h3.joy-faq-cat:first-child { padding-top: 18px; }
.joy-preise .joy-faq details ul { margin: 12px 0 0 20px; color: var(--joy-text); }

/* Teaser mit Bild ------------------------------------------------------------- */
.joy-preise .joy-tiles a { color: inherit; text-decoration: none; }
.joy-preise .joy-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.joy-preise .joy-tile { position: relative; }
.joy-preise .joy-tile h3 a:hover { color: var(--joy-ocker-dark); }
.joy-preise .joy-badge-new { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-green); background: var(--joy-ocker); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }

/* Ratgeber-Artikel ------------------------------------------------------------ */
.joy-preise .joy-case-main h3 { font-family: var(--joy-sans); font-weight: 700; font-size: 20px; color: var(--joy-green); margin-top: 32px; }
.joy-preise .joy-case-main ol:not(.joy-steps-list) { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.joy-preise .joy-case-main ul:not(.joy-checks) { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.joy-preise .joy-note { background: var(--joy-cream); border-left: 4px solid var(--joy-ocker); border-radius: 0 16px 16px 0; padding: 22px 26px; font-size: 17px; }
.joy-preise .joy-note strong:first-child { display: block; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-ocker-dark); margin-bottom: 6px; }
.joy-preise .joy-case-main .wp-block-table { margin: 28px 0; overflow-x: auto; }
.joy-preise .joy-case-main .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.joy-preise .joy-case-main .wp-block-table th, .joy-preise .joy-case-main .wp-block-table td { border: 0; border-bottom: 1px solid var(--joy-line); padding: 12px 10px; text-align: left; vertical-align: top; }
.joy-preise .joy-case-main .wp-block-table thead th { background: var(--joy-sage); color: var(--joy-green); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.joy-preise .joy-toc { margin: 4px 0 20px; }
.joy-preise .joy-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: joytoc; display: flex; flex-direction: column; }
.joy-preise .joy-toc li { counter-increment: joytoc; margin: 0; border-bottom: 1px solid #E6E1D3; }
.joy-preise .joy-toc a { display: flex; gap: 10px; padding: 10px 0; font-size: 15px; font-weight: 700; color: var(--joy-green); text-decoration: none; line-height: 1.4; }
.joy-preise .joy-toc a::before { content: counter(joytoc, decimal-leading-zero); color: #C88A2E; font-family: var(--joy-serif); font-size: 13px; padding-top: 1px; }
.joy-preise .joy-toc a:hover { color: var(--joy-ocker-dark); }
.joy-preise .joy-author { margin-top: 22px; padding-top: 20px; border-top: 1px solid #E6E1D3; }
.joy-preise .joy-article-meta { color: var(--joy-muted); }

/* Version 2.1: Tablet & Handy -------------------------------------------------- */
@media (max-width: 1024px) {
	.joy-preise .joy-seasons:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-seasons > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.joy-preise .joy-voices:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-voices > .wp-block-group__inner-container { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
	.joy-preise .joy-voice:nth-child(2) { margin-top: 0; }
}
@media (max-width: 781px) {
	.joy-preise .joy-reel { --joy-perf: 30px; padding-left: 8px; padding-right: 8px; border-radius: 18px; }
	.joy-preise .joy-reel__perf { height: 9px; background: repeating-linear-gradient(90deg, rgba(250,248,243,0.16) 0 14px, transparent 14px 28px); width: calc(100% + 28px); }
	.joy-preise .joy-reel__perf--t { top: 10px; } .joy-preise .joy-reel__perf--b { bottom: 10px; }
	@keyframes joyPerf { from { transform: translate3d(-28px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
	.joy-preise .joy-reel__code { display: none; }
	.joy-preise .joy-reel__screen { border-radius: 10px; }
	.joy-preise .joy-reel__mark { width: 16px; height: 16px; }
	.joy-preise .joy-reel__mark--tl, .joy-preise .joy-reel__mark--tr { top: 10px; } .joy-preise .joy-reel__mark--bl, .joy-preise .joy-reel__mark--br { bottom: 10px; }
	.joy-preise .joy-reel__mark--tl, .joy-preise .joy-reel__mark--bl { left: 10px; } .joy-preise .joy-reel__mark--tr, .joy-preise .joy-reel__mark--br { right: 10px; }
	.joy-preise .joy-reel__label { display: none; }
	.joy-preise .joy-reel__tc { top: 12px; right: 34px; font-size: 10px; }
	.joy-preise .joy-reel__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
	.joy-preise .joy-reel__play::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 17px; }
	.joy-preise .joy-reel__cta { top: calc(50% + 44px); font-size: 15px; }
	.joy-preise .joy-reel-head { margin-bottom: 36px; }
	.joy-preise .joy-seasons:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-seasons > .wp-block-group__inner-container,
	.joy-preise .joy-compare:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-compare > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.joy-preise .joy-compare__col { padding: 30px 24px; }
	.joy-preise .joy-voice { padding: 30px 24px 24px; }
	.joy-preise .joy-feature--portrait:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-feature--portrait > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.joy-preise .joy-feature--portrait .joy-feature-media { max-width: 420px; }
	.joy-preise .joy-gallery:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-gallery > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
	.joy-preise .joy-gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
	.joy-preise .joy-episode { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
	.joy-preise .joy-reel::after, .joy-preise .joy-reel::before, .joy-preise .joy-reel__perf, .joy-preise .joy-reel__poster img, .joy-preise .joy-reel__ring { animation: none !important; }
	.joy-preise .joy-reel__ring { display: none; }
}
.joy-preise .joy-reel-note a { color: inherit; }
.joy-preise .joy-person img { object-position: 62% 22%; }
.joy-preise .joy-center-buttons { justify-content: center; margin-top: 40px; }
.joy-preise .joy-teaser--white { background: #FFFFFF; }
.joy-preise .joy-ref-grid .wp-block-post-date { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--joy-ocker-dark); }
.joy-preise p.joy-hero-link { margin-top: 22px; }
.joy-preise p.joy-hero-link a { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--joy-green); text-decoration: none; }
.joy-preise p.joy-hero-link a::before {
	content: ""; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
	background: var(--joy-green) no-repeat 55% 50% / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23E0A54A'/%3E%3C/svg%3E");
	box-shadow: 0 0 0 5px rgba(31,59,42,0.1); transition: transform .25s;
}
.joy-preise p.joy-hero-link a:hover::before { transform: scale(1.1); }

/* Vorher/Nachher-Vergleich (Baustein für Projektberichte) -------------------
   Ohne JavaScript (und im Editor): beide Bilder nebeneinander.
   Mit JavaScript: übereinander, mit Schieberegler. */
.joy-preise .joy-ba,
.joy-preise .joy-ba > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.joy-preise .joy-ba > .wp-block-group__inner-container { grid-column: 1 / -1; }
.joy-preise .joy-ba { margin: 36px 0; }
.joy-preise .joy-ba figure { position: relative; margin: 0; }
.joy-preise .joy-ba img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.joy-preise .joy-ba figcaption {
	position: absolute; top: 14px; left: 14px; margin: 0; padding: 7px 12px; border-radius: 999px;
	background: rgba(18,38,26,0.78); color: #FFFFFF; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; line-height: 1;
}
.joy-preise .joy-ba.is-ready { display: block; position: relative; overflow: hidden; border-radius: 14px; touch-action: pan-y; }
.joy-preise .joy-ba.is-ready > .wp-block-group__inner-container { display: block; }
.joy-preise .joy-ba.is-ready .joy-ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--joy-ba, 50%)); }
.joy-preise .joy-ba.is-ready .joy-ba__after img { height: 100%; }
.joy-preise .joy-ba.is-ready .joy-ba__after figcaption { left: auto; right: 14px; background: var(--joy-ocker); color: var(--joy-green); }
.joy-preise .joy-ba__line {
	position: absolute; top: 0; bottom: 0; left: var(--joy-ba, 50%); z-index: 3; width: 2px; margin-left: -1px;
	background: #FFFFFF; box-shadow: 0 0 12px rgba(0,0,0,0.35); pointer-events: none;
}
.joy-preise .joy-ba__line::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
	background: #FFFFFF no-repeat center / 22px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M6 1L1 6l5 5M16 1l5 5-5 5' fill='none' stroke='%231F3B2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.joy-preise .joy-ba__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.joy-preise .joy-ba__range:focus-visible + .joy-ba__line::after,
.joy-preise .joy-ba:has(.joy-ba__range:focus-visible) .joy-ba__line::after { outline: 3px solid var(--joy-ocker); outline-offset: 3px; }
@media (max-width: 600px) {
	.joy-preise .joy-ba:not(.is-ready), .joy-preise .joy-ba:not(.is-ready) > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Version 2.2 – Landingpage „Im besten Licht“ (ohne Navigation)
   Scroll-Story: Morgendämmerung → Showreel → Leistungen → Referenzen → Abschluss.
   Ohne JavaScript bzw. bei reduzierter Bewegung: alles sichtbar, Endzustände.
   ========================================================================== */
body.joy-landing { margin: 0; background: #0B1710; }
body.joy-landing .joy-lp { min-height: 100vh; }
.joy-preise.joy-lp {
	--lp-night: #0B1710;
	--lp-deep: #12261A;
	--lp-forest: #1F3B2A;
	--lp-gold: #E0A54A;
	--lp-dawn: #F6D29A;
	--lp-cream: #FAF8F3;
	--lp-mist: #AEBDB2;
	--lp-ink: #1B2620;
	--lp-gutter: max(20px, 4.5vw);
	background: var(--lp-night); color: var(--lp-cream); overflow-x: clip;
	max-width: none !important; margin: 0 !important; width: 100%;
}
.joy-lp .joy-lp-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: max(var(--lp-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--lp-gutter), env(safe-area-inset-right, 0px)); }
.joy-lp .joy-lp-pin > .wp-block-group__inner-container { height: 100%; }
.joy-lp .joy-lp-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.joy-lp-on .joy-lp .joy-lp-stage { position: sticky; top: 0; }
.joy-lp .joy-lp-stage > .wp-block-group__inner-container { height: 100%; }
.joy-lp .wp-block-html { margin: 0; }

/* Typo-Bausteine */
.joy-lp .joy-lp-kicker { font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var(--lp-gold); margin-bottom: 20px; }
.joy-lp .joy-lp-h2 { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.joy-lp .joy-lp-sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 46ch; margin-top: 22px; color: inherit; opacity: .78; }

/* Buttons */
.joy-lp .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.joy-lp .wp-block-button__link { display: inline-flex; align-items: center; border-radius: 999px; padding: 17px 30px; font-size: 16px; font-weight: 900; letter-spacing: .2px; text-decoration: none; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.joy-lp .joy-btn-accent .wp-block-button__link { background: var(--lp-gold); color: var(--lp-night); box-shadow: 0 14px 40px -14px rgba(224,165,74,.75); }
.joy-lp .joy-btn-accent .wp-block-button__link:hover { transform: translateY(-2px); color: var(--lp-night); box-shadow: 0 20px 50px -14px rgba(224,165,74,.9); }
.joy-lp .joy-btn-glass .wp-block-button__link { background: rgba(250,248,243,.06); color: var(--lp-cream); border: 1px solid rgba(250,248,243,.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.joy-lp .joy-btn-glass .wp-block-button__link:hover { background: var(--lp-cream); color: var(--lp-night); }
.joy-lp .joy-btn-primary .wp-block-button__link { background: var(--lp-night); color: var(--lp-cream); }
.joy-lp .joy-btn-primary .wp-block-button__link:hover { background: var(--lp-forest); color: var(--lp-cream); }

/* Kopfleiste (ohne Navigation) */
.joy-lp .joy-lp-bar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: calc(18px + env(safe-area-inset-top, 0px)) max(var(--lp-gutter), env(safe-area-inset-right, 0px)) 18px max(var(--lp-gutter), env(safe-area-inset-left, 0px));
	transition: background .4s ease, padding .4s ease, border-color .4s ease;
	border-bottom: 1px solid transparent;
}
body.admin-bar .joy-lp .joy-lp-bar { top: var(--wp-admin--admin-bar--height, 32px); }
.joy-lp .joy-lp-bar.is-solid { background: rgba(11,23,16,.74); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); padding-top: calc(11px + env(safe-area-inset-top, 0px)); padding-bottom: 11px; border-bottom-color: rgba(250,248,243,.07); }
.joy-lp .joy-lp-logo { display: inline-flex; align-items: baseline; gap: 12px; color: var(--lp-cream); }
.joy-lp .joy-lp-logo b { font-family: var(--joy-serif); font-weight: 900; font-size: 24px; letter-spacing: 3px; }
.joy-lp .joy-lp-logo span { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--lp-mist); }
.joy-lp a.joy-lp-bar__cta { color: var(--lp-night); background: var(--lp-gold); border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 900; text-decoration: none; transition: transform .2s ease; }
.joy-lp a.joy-lp-bar__cta:hover { color: var(--lp-night); transform: translateY(-1px); }

/* 1 · Morgendämmerung ------------------------------------------------------ */
.joy-lp .joy-lp-hero { position: relative; background: var(--lp-night); }
.joy-lp-on:not(.joy-lp-still) .joy-lp .joy-lp-hero { height: 185vh; }
.joy-lp .joy-lp-sky { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 85% at 62% 80%, #24402D 0%, #142A1D 42%, #0B1710 78%); }
.joy-lp .joy-lp-sky__dawn {
	position: absolute; inset: 0;
	background: radial-gradient(70% 55% at 62% 66%, rgba(250,205,140,.62) 0%, rgba(224,165,74,.26) 32%, rgba(224,165,74,0) 68%),
		linear-gradient(to top, rgba(224,165,74,.16), rgba(224,165,74,0) 55%);
	opacity: clamp(.12, var(--p, 1), 1);
}
.joy-lp .joy-lp-sun {
	--s: clamp(84px, 8.5vw, 150px);
	position: absolute; left: 62%; top: 49%; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #FFF6E4 0%, #FBDDA6 46%, #EDB868 74%);
	box-shadow: 0 0 70px 24px rgba(250,210,150,.38), 0 0 220px 90px rgba(224,165,74,.2);
	transform: translate3d(0, calc((1 - var(--p, 1)) * 24vh), 0);
	will-change: transform;
}
.joy-lp .joy-lp-ridge { position: absolute; left: 0; bottom: -2px; width: 100%; height: 64%; display: block; will-change: transform; }
.joy-lp .joy-lp-ridge--1 { transform: translate3d(0, calc(var(--p, 0) * 3vh), 0); }
.joy-lp .joy-lp-ridge--2 { transform: translate3d(0, calc(var(--p, 0) * 6vh), 0); }
.joy-lp .joy-lp-ridge--3 { transform: translate3d(0, calc(var(--p, 0) * 10vh), 0); }
.joy-lp .joy-lp-ridge--4 { transform: translate3d(0, calc(var(--p, 0) * 15vh), 0); height: 66%; }
.joy-lp .joy-lp-sky__mist { position: absolute; left: -10%; right: -10%; bottom: 14%; height: 22%; background: radial-gradient(50% 50% at 50% 50%, rgba(214,228,214,.16), rgba(214,228,214,0)); animation: joyLpMist 40s ease-in-out infinite alternate; }
@keyframes joyLpMist { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

.joy-lp .joy-lp-hero__text {
	--lit: clamp(0, calc(var(--p, 1) / .55), 1);
	--out: clamp(0, calc((var(--p, 0) - .72) / .28), 1);
	position: relative; z-index: 3; height: 100%; max-width: 1280px; margin: 0 auto;
	padding: calc(110px + env(safe-area-inset-top, 0px)) max(var(--lp-gutter), env(safe-area-inset-right, 0px)) 26vh max(var(--lp-gutter), env(safe-area-inset-left, 0px));
	transform: translate3d(0, calc(var(--out) * -8vh), 0); opacity: calc(1 - var(--out));
}
.joy-lp .joy-lp-hero__text:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-hero__text > .wp-block-group__inner-container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.joy-lp .joy-lp-hero__text > .wp-block-group__inner-container { height: 100%; }
.joy-lp .joy-lp-title {
	font-family: var(--joy-serif); font-weight: 900; font-size: clamp(50px, 9vw, 150px); line-height: .98; letter-spacing: -0.035em; margin: 0;
	color: #F3E7D2;
	text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.joy-lp .joy-lp-title {
		color: transparent;
		background-image: linear-gradient(100deg, #FFF4E0 0%, #F8D9A2 22%, #E8B260 36%, #C29458 44%, #8DA090 54%, #6F8577 66%, #6F8577 100%);
		background-size: 280% 100%;
		background-position: calc(100% - var(--lit) * 100%) 0;
		-webkit-background-clip: text; background-clip: text;
	}
}
.joy-lp .joy-lp-lead { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.55; max-width: 34ch; margin: 30px 0 38px; color: rgba(250,248,243,.82); }
.joy-lp .joy-lp-hero .joy-lp-kicker { margin-bottom: 26px; }
.joy-lp a.joy-lp-hint {
	position: absolute; z-index: 3; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	color: rgba(250,248,243,.66); text-decoration: none; opacity: calc(1 - var(--p, 0) * 3);
}
.joy-lp a.joy-lp-hint span { width: 1px; height: 46px; background: linear-gradient(rgba(224,165,74,0), var(--lp-gold)); transform-origin: top; animation: joyLpHint 2.2s ease-in-out infinite; }
@keyframes joyLpHint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* Auftakt beim Laden – der eine inszenierte Moment */
.joy-lp .joy-lp-hero__text .joy-lp-kicker, .joy-lp .joy-lp-title, .joy-lp .joy-lp-lead, .joy-lp .joy-lp-hero .wp-block-buttons { animation: joyLpIn 1.3s cubic-bezier(.2,.75,.2,1) both; }
.joy-lp .joy-lp-title { animation-delay: .15s; }
.joy-lp .joy-lp-lead { animation-delay: .45s; }
.joy-lp .joy-lp-hero .wp-block-buttons { animation-delay: .65s; }
@keyframes joyLpIn { from { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* 2 · Film ab – Zoom ins Showreel ----------------------------------------- */
.joy-lp .joy-lp-zoom { position: relative; background: var(--lp-night); }
.joy-lp-on:not(.joy-lp-still) .joy-lp .joy-lp-zoom { height: 230vh; }
.joy-lp .joy-lp-zoom__stage:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-zoom__stage > .wp-block-group__inner-container { display: grid; place-items: center; }
.joy-lp .joy-lp-zoom__stage { --z: clamp(0, calc(var(--p, 1) / .7), 1); }
.joy-lp p.joy-lp-zoom__word {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap;
	font-family: var(--joy-serif); font-weight: 900; font-size: clamp(84px, 21vw, 360px); line-height: 1; letter-spacing: -0.04em;
	color: transparent; -webkit-text-stroke: 1.5px rgba(224,165,74,.6);
	opacity: clamp(0, calc(1 - var(--z) * 1.25), 1); transform: scale(calc(1 + var(--z) * .22));
}
.joy-lp .joy-lp-zoom .joy-reel {
	width: min(1080px, 90vw, calc((100svh - 170px) * 1.62)); max-width: none;
	transform: scale(calc(.56 + .44 * var(--z))); transform-origin: 50% 50%; will-change: transform;
}
.joy-lp .joy-lp-zoom__cap { position: absolute; left: 0; right: 0; bottom: calc(5vh + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 15px; color: var(--lp-mist); opacity: clamp(0, calc((var(--p, 1) - .7) / .2), 1); padding-inline: 20px; }

/* 3 · Statement, Wort für Wort -------------------------------------------- */
.joy-lp .joy-lp-words { background: var(--lp-cream); color: var(--lp-ink); padding-block: clamp(110px, 22vh, 260px); }
.joy-lp .joy-lp-words__text { font-family: var(--joy-serif); font-weight: 700; font-size: clamp(29px, 4.2vw, 62px); line-height: 1.2; letter-spacing: -0.015em; max-width: 24em; text-wrap: pretty; }
.joy-lp .joy-lp-w { opacity: .14; transition: opacity .4s ease, color .4s ease; }
.joy-lp .joy-lp-w.is-on { opacity: 1; }
.joy-lp .joy-lp-w.is-last { color: var(--joy-ocker-dark); }

/* 4 · Leistungen mit stehendem Bild --------------------------------------- */
.joy-lp .joy-lp-show { background: #FFFFFF; color: var(--lp-ink); padding-block: clamp(100px, 16vh, 180px); }
.joy-lp .joy-lp-head { margin-bottom: clamp(40px, 7vh, 80px); }
.joy-lp .joy-lp-show .joy-lp-kicker, .joy-lp .joy-lp-facts .joy-lp-kicker, .joy-lp .joy-lp-line .joy-lp-kicker { color: var(--joy-ocker-dark); }
.joy-lp .joy-lp-show__grid:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-show__grid > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.joy-lp .joy-lp-show__media { position: sticky; top: max(96px, calc(50vh - 34vh)); height: 68vh; min-height: 380px; border-radius: 28px; overflow: hidden; background: var(--lp-night); box-shadow: 0 50px 90px -50px rgba(11,23,16,.6); }
.joy-lp .joy-lp-show__media > .wp-block-group__inner-container { height: 100%; }
.joy-lp .joy-lp-show__media figure.joy-lp-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.08); transition: opacity .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.joy-lp .joy-lp-show__media figure.joy-lp-shot:first-of-type { opacity: 1; transform: none; }
.joy-lp .joy-lp-show__media.is-ready figure.joy-lp-shot { opacity: 0; transform: scale(1.08); }
.joy-lp .joy-lp-show__media.is-ready figure.joy-lp-shot.is-active { opacity: 1; transform: none; }
.joy-lp .joy-lp-show__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.joy-lp .joy-lp-step { min-height: 74vh; padding-block: 40px; }
.joy-lp .joy-lp-step:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-step > .wp-block-group__inner-container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.joy-lp .joy-lp-step > .wp-block-group__inner-container { min-height: inherit; }
.joy-lp-on:not(.joy-lp-still) .joy-lp .joy-lp-step { opacity: .22; transition: opacity .6s ease; }
.joy-lp-on:not(.joy-lp-still) .joy-lp .joy-lp-step.is-active { opacity: 1; }
.joy-lp .joy-lp-step__name { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 900; color: var(--joy-ocker-dark); margin-bottom: 18px; }
.joy-lp .joy-lp-step__name::before { content: ""; width: 28px; height: 2px; background: var(--lp-gold); }
.joy-lp .joy-lp-step__title { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.02em; color: var(--lp-forest); }
.joy-lp .joy-lp-step__text { font-size: 18px; line-height: 1.65; max-width: 40ch; margin-top: 20px; color: var(--joy-text); }
.joy-lp .joy-lp-step__price { margin-top: 26px; font-weight: 900; font-size: 16px; color: var(--lp-forest); padding: 9px 16px; border-radius: 999px; background: #F2F4EF; }

/* 5 · Referenzen quer --------------------------------------------------------- */
.joy-lp .joy-lp-hscroll { position: relative; background: var(--lp-deep); color: var(--lp-cream); }
.joy-lp .joy-lp-hscroll__stage { height: auto; min-height: 0; padding-block: clamp(90px, 14vh, 150px); }
.joy-lp-hs-on .joy-lp .joy-lp-hscroll__stage { height: 100vh; height: 100svh; padding-block: 0; }
.joy-lp .joy-lp-hscroll__stage:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-hscroll__stage > .wp-block-group__inner-container { display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5vh, 52px); }
.joy-lp .joy-lp-hscroll .joy-lp-head { margin-bottom: 0; }
.joy-lp .joy-lp-hscroll .joy-lp-sub { color: var(--lp-mist); opacity: 1; }
.joy-lp .joy-lp-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.joy-lp .joy-lp-track::-webkit-scrollbar { display: none; }
.joy-lp .joy-lp-track:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-track > .wp-block-group__inner-container { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: max(var(--lp-gutter), calc((100vw - 1280px) / 2 + var(--lp-gutter))); width: max-content; }
.joy-lp-hs-on .joy-lp .joy-lp-track { overflow: visible; }
.joy-lp-hs-on .joy-lp .joy-lp-track:not(:has(> .wp-block-group__inner-container)),
.joy-lp-hs-on .joy-lp .joy-lp-track > .wp-block-group__inner-container { transform: translate3d(calc(var(--hs, 0px) * -1 * var(--p, 0)), 0, 0); will-change: transform; }
.joy-lp .joy-lp-card {
	position: relative; flex: 0 0 auto; width: clamp(270px, 28vw, 420px); aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden;
	background: var(--lp-night); scroll-snap-align: start; isolation: isolate;
	padding: 26px;
}
.joy-lp .joy-lp-card:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-card > .wp-block-group__inner-container { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.joy-lp .joy-lp-card > .wp-block-group__inner-container { height: 100%; }
.joy-lp .joy-lp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,23,16,.92) 0%, rgba(11,23,16,.35) 42%, rgba(11,23,16,0) 70%); pointer-events: none; }
.joy-lp figure.joy-lp-card__img { position: absolute; inset: 0; z-index: -2; margin: 0; }
.joy-lp .joy-lp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.joy-lp .joy-lp-card:hover .joy-lp-card__img img, .joy-lp .joy-lp-card:focus-within .joy-lp-card__img img { transform: scale(1.06); }
.joy-lp .joy-lp-card__tag { font-size: 13px; font-weight: 900; color: var(--lp-gold); }
.joy-lp .joy-lp-card__name { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; margin-top: 8px; }
.joy-lp .joy-lp-card__name a { color: var(--lp-cream); text-decoration: none; }
.joy-lp .joy-lp-card__name a::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.joy-lp .joy-lp-card__name a:focus-visible { outline: none; }
.joy-lp .joy-lp-card:has(a:focus-visible) { outline: 3px solid var(--lp-gold); outline-offset: 4px; }
.joy-lp .joy-lp-card__place { font-size: 15px; color: var(--lp-mist); margin-top: 6px; }
.joy-lp .joy-lp-card--cta { background: var(--lp-gold); color: var(--lp-night); }
.joy-lp .joy-lp-card--cta::after { content: none; }
.joy-lp .joy-lp-card--cta .joy-lp-card__tag { color: var(--lp-night); }
.joy-lp .joy-lp-card--cta .joy-lp-card__name { color: var(--lp-night); font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 26px; }
.joy-lp .joy-lp-progress { display: none; width: min(1280px - 2 * 4.5vw, 100% - 2 * var(--lp-gutter)); margin-inline: auto; height: 2px; background: rgba(250,248,243,.12); border-radius: 2px; overflow: hidden; }
.joy-lp-hs-on .joy-lp .joy-lp-progress { display: block; }
.joy-lp .joy-lp-progress span { display: block; height: 100%; background: var(--lp-gold); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* 6 · Zahlen ------------------------------------------------------------------ */
.joy-lp .joy-lp-facts { background: var(--lp-cream); color: var(--lp-ink); padding-block: clamp(90px, 14vh, 160px) clamp(40px, 6vh, 70px); }
.joy-lp .joy-lp-stats:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-stats > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.joy-lp .joy-lp-stat { border-top: 1px solid rgba(31,59,42,.18); padding-top: 26px; }
.joy-lp .joy-lp-stat__num { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(44px, 4.6vw, 76px); line-height: 1; letter-spacing: -0.03em; color: var(--lp-forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.joy-lp .joy-lp-stat__text { font-size: 16px; line-height: 1.5; margin-top: 14px; color: var(--joy-muted); max-width: 24ch; }

/* 7 · Ablauf mit wachsender Linie ---------------------------------------------- */
.joy-lp .joy-lp-line { background: var(--lp-cream); color: var(--lp-ink); padding-block: clamp(70px, 12vh, 140px) clamp(100px, 16vh, 180px); }
.joy-lp .joy-lp-line__grid:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-line__grid > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.joy-lp .joy-lp-line__head { position: sticky; top: 120px; }
.joy-lp .joy-lp-line__steps { position: relative; padding-left: 74px; }
.joy-lp .joy-lp-line__steps:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-line__steps > .wp-block-group__inner-container { display: grid; gap: clamp(56px, 11vh, 110px); }
.joy-lp .joy-lp-rail { position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: rgba(31,59,42,.14); }
.joy-lp .joy-lp-rail span { display: block; height: 100%; background: linear-gradient(var(--lp-gold), var(--joy-ocker-dark)); transform-origin: top; transform: scaleY(var(--p, 1)); }
.joy-lp .joy-lp-lstep { position: relative; }
.joy-lp .joy-lp-lstep__no {
	position: absolute; left: -74px; top: -4px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--joy-serif); font-weight: 900; font-size: 18px; color: var(--lp-forest); background: var(--lp-cream); border: 2px solid rgba(31,59,42,.22);
	transition: background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.joy-lp .joy-lp-lstep.is-on .joy-lp-lstep__no, .joy-lp-still .joy-lp .joy-lp-lstep__no { background: var(--lp-gold); border-color: var(--lp-gold); transform: scale(1.08); }
.joy-lp .joy-lp-lstep__title { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(24px, 2.4vw, 34px); color: var(--lp-forest); }
.joy-lp .joy-lp-lstep__text { font-size: 18px; line-height: 1.6; margin-top: 10px; color: var(--joy-text); max-width: 42ch; }

/* 8 · Laufband ---------------------------------------------------------------- */
.joy-lp .joy-lp-marquee { background: var(--lp-forest); padding-block: clamp(46px, 8vh, 86px); overflow: hidden; }
.joy-lp .joy-lp-marquee__in { display: grid; gap: 6px; }
.joy-lp .joy-lp-row { display: flex; gap: .5em; white-space: nowrap; width: max-content; font-family: var(--joy-serif); font-weight: 900; font-size: clamp(44px, 7.4vw, 118px); line-height: 1.12; letter-spacing: -0.02em; will-change: transform; }
.joy-lp .joy-lp-row span { display: inline-flex; align-items: center; gap: .5em; }
.joy-lp .joy-lp-row span::after { content: ""; width: .18em; height: .18em; border-radius: 50%; background: var(--lp-gold); flex-shrink: 0; }
.joy-lp .joy-lp-row--a { color: var(--lp-cream); transform: translate3d(calc(-6% - var(--p, .5) * 26%), 0, 0); }
.joy-lp .joy-lp-row--b { color: transparent; -webkit-text-stroke: 1.5px rgba(250,248,243,.5); transform: translate3d(calc(-32% + var(--p, .5) * 26%), 0, 0); }

/* 9 · Abschluss mit Sonnenaufgang -------------------------------------------- */
.joy-preise.joy-lp .joy-lp-cta.joy-cta { position: relative; overflow: hidden; background: var(--lp-forest); color: var(--lp-cream); padding: clamp(100px, 15vh, 160px) 0 clamp(210px, 26vw, 380px); }
.joy-lp .joy-lp-cta .joy-scape { z-index: 0; }
.joy-lp .joy-lp-cta__grid { position: relative; z-index: 2; }
.joy-lp .joy-lp-cta__grid:not(:has(> .wp-block-group__inner-container)),
.joy-lp .joy-lp-cta__grid > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.joy-lp .joy-lp-cta .joy-lp-sub { color: rgba(250,248,243,.82); opacity: 1; }
.joy-lp .joy-lp-contact { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 4px; }
.joy-lp .joy-lp-contact li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(250,248,243,.12); }
.joy-lp .joy-lp-contact span { width: 84px; flex-shrink: 0; font-size: 14px; color: var(--lp-mist); }
.joy-lp .joy-lp-contact a { color: var(--lp-cream); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; user-select: all; }
.joy-lp .joy-lp-contact a:hover { color: var(--lp-gold); }
.joy-lp .joy-lp-cta__form { background: var(--lp-cream); color: var(--lp-ink); border-radius: 26px; padding: clamp(24px, 3vw, 42px); box-shadow: 0 60px 100px -50px rgba(0,0,0,.6); }
.joy-lp .joy-lp-form-title { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(22px, 2vw, 28px); color: var(--lp-forest); margin-bottom: 22px; }
.joy-lp .joy-lp-cta__form a { color: var(--lp-forest); }

/* Fuß */
.joy-lp .joy-lp-foot { background: var(--lp-night); color: var(--lp-mist); font-size: 14px; padding-block: 26px calc(26px + env(safe-area-inset-bottom, 0px)); }
.joy-lp .joy-lp-foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; }
.joy-lp .joy-lp-foot b { color: var(--lp-cream); margin-right: 6px; }
.joy-lp .joy-lp-foot__links { display: flex; gap: 22px; }
.joy-lp .joy-lp-foot a { color: var(--lp-mist); text-decoration: none; }
.joy-lp .joy-lp-foot a:hover { color: var(--lp-gold); }

/* Einblenden: Überschriften steigen aus einer Maske */
.joy-js .joy-preise.joy-lp .joy-reveal:not(.joy-cta) { transform: translate3d(0, 40px, 0); filter: blur(10px); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.75,.2,1), filter 1.1s ease; }
.joy-js .joy-preise.joy-lp .joy-reveal.is-in:not(.joy-cta) { transform: none; filter: none; }
/* Das Showreel im Zoom-Abschnitt wird nicht eingeblendet, sondern skaliert */
.joy-js .joy-preise.joy-lp .joy-lp-zoom .joy-reel.joy-reveal, .joy-preise.joy-lp .joy-lp-zoom .joy-reel { opacity: 1; filter: none; transform: scale(calc(.56 + .44 * var(--z))); transition: none; }

/* Tablet & Handy */
@media (max-width: 960px) {
	.joy-lp .joy-lp-show__grid:not(:has(> .wp-block-group__inner-container)),
	.joy-lp .joy-lp-show__grid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.joy-lp .joy-lp-show__media { top: calc(66px + env(safe-area-inset-top, 0px)); height: 34vh; min-height: 210px; z-index: 2; border-radius: 20px; }
	.joy-lp .joy-lp-step { min-height: 68vh; padding-block: 24px 9vh; }
	.joy-lp .joy-lp-step:not(:has(> .wp-block-group__inner-container)),
	.joy-lp .joy-lp-step > .wp-block-group__inner-container { justify-content: flex-end; }
	.joy-lp .joy-lp-line__grid:not(:has(> .wp-block-group__inner-container)),
	.joy-lp .joy-lp-line__grid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
	.joy-lp .joy-lp-line__head { position: static; }
	.joy-lp .joy-lp-cta__grid:not(:has(> .wp-block-group__inner-container)),
	.joy-lp .joy-lp-cta__grid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
	.joy-lp .joy-lp-stats:not(:has(> .wp-block-group__inner-container)),
	.joy-lp .joy-lp-stats > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.joy-lp .joy-lp-logo span { display: none; }
	.joy-lp .joy-lp-hero__text { padding-bottom: 30vh; }
	.joy-lp .joy-lp-sun { left: 70%; top: 56%; }
	.joy-lp .joy-lp-ridge { height: 46%; }
	.joy-lp .joy-lp-ridge--4 { height: 48%; }
	.joy-lp .joy-lp-hero .wp-block-buttons { flex-direction: column; align-items: stretch; width: 100%; }
	.joy-lp .joy-lp-hero .wp-block-button__link { justify-content: center; width: 100%; }
	.joy-lp .joy-lp-card { width: 78vw; }
	.joy-lp .joy-lp-line__steps { padding-left: 62px; }
	.joy-lp .joy-lp-lstep__no { left: -62px; width: 40px; height: 40px; }
	.joy-lp .joy-lp-rail { left: 19px; }
	.joy-lp .joy-lp-stat__num { font-size: clamp(40px, 12vw, 56px); }
	.joy-lp .joy-lp-contact li { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.joy-lp .joy-lp-hero__text .joy-lp-kicker, .joy-lp .joy-lp-title, .joy-lp .joy-lp-lead, .joy-lp .joy-lp-hero .wp-block-buttons,
	.joy-lp .joy-lp-sky__mist, .joy-lp a.joy-lp-hint span { animation: none !important; }
	.joy-js .joy-preise.joy-lp .joy-reveal:not(.joy-cta) { filter: none !important; }
	.joy-lp .joy-lp-show__media figure.joy-lp-shot, .joy-lp .joy-lp-card__img img { transition: none !important; }
}

/* ==========================================================================
   Version 2.3 – Startseiten-Kopf in der Morgendämmerung (Stil der Landingpage)
   Dunkles Nachtgrün, Berge mit Goldkante, Überschrift monochrom in Salbeigrün.
   ========================================================================== */
.joy-preise .joy-home-hero {
	background: radial-gradient(110% 130% at 55% 100%, #2A4733 0%, #172E20 38%, #0D1B13 72%, #0B1710 100%);
	color: #E9EFE9;
}
.joy-preise .joy-home-hero .joy-eyebrow, .joy-preise .joy-home-hero .joy-eyebrow a { color: var(--joy-ocker); }
.joy-preise .joy-home-hero .joy-eyebrow a:hover { color: #F3C98B; }
.joy-preise .joy-home-hero .joy-eyebrow::before { background: var(--joy-ocker); }
.joy-preise .joy-home-hero h1.joy-h1 { color: #728A7A; }
.joy-preise .joy-home-hero h1.joy-h1 em { color: var(--joy-ocker); background: none; padding: 0; }
.joy-preise .joy-home-hero .joy-lead, .joy-preise .joy-home-hero .joy-lead--slim { color: rgba(250,248,243,.8); }
.joy-preise .joy-home-hero .joy-rotator { color: var(--joy-ocker); }
.joy-preise .joy-home-hero .joy-rotator__win::after { background: rgba(224,165,74,.2); }
.joy-preise .joy-home-hero .joy-btn-primary .wp-block-button__link { background: var(--joy-ocker); color: var(--joy-green); font-weight: 900; }
.joy-preise .joy-home-hero .joy-btn-primary .wp-block-button__link:hover { background: #EDB868; color: var(--joy-green); }
.joy-preise .joy-home-hero .joy-btn-ghost .wp-block-button__link { background: rgba(250,248,243,.05); color: #FAF8F3; border-color: rgba(250,248,243,.38); }
.joy-preise .joy-home-hero .joy-btn-ghost .wp-block-button__link:hover { background: #FAF8F3; color: var(--joy-green); }
.joy-preise .joy-home-hero p.joy-hero-link a { color: #FAF8F3; }
.joy-preise .joy-home-hero p.joy-hero-link a::before {
	background-color: var(--joy-ocker);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%231F3B2A'/%3E%3C/svg%3E");
	box-shadow: 0 0 0 5px rgba(224,165,74,.18);
}
.joy-preise .joy-home-hero .joy-badge circle { stroke: rgba(224,165,74,.55); stroke-width: 2px; }
.joy-preise .joy-home-hero .joy-viewfinder .joy-vf-img img { box-shadow: 0 40px 80px -30px rgba(0,0,0,.65); }
.joy-preise .joy-scape--slim.joy-scape--dawn { height: clamp(84px, 9vw, 132px); }
.joy-preise .joy-scape--dawn .joy-scape__fog { background: radial-gradient(closest-side, rgba(214,228,214,.13), rgba(214,228,214,.05) 45%, rgba(214,228,214,0) 100%); }
.joy-preise .joy-scape--dawn .joy-scape__fog--a { bottom: 20%; }
.joy-preise .joy-scape--dawn .joy-scape__fog--b { bottom: 28%; }
/* Theme-Seitentitel ausblenden – die JOY-Vorlagen bringen ihre eigene H1 mit (keine doppelte Überschrift) */
body.has-joy-preise .page-header:has(> .entry-title) { display: none; }
.joy-preise .joy-cta:not(.joy-lp-cta) { padding-bottom: clamp(220px, 19vw, 280px); }
@media (max-width: 781px) { .joy-preise .joy-cta:not(.joy-lp-cta) { padding-bottom: 180px; } }
.joy-preise .joy-home-hero { padding: 64px 0 clamp(190px, 15vw, 215px); }
@media (max-width: 781px) { .joy-preise .joy-home-hero { padding: 44px 0 140px; } }


/* ==========================================================================
   Version 2.4 – Schmaler Kopfbereich „Kammlinie“ (Unterseiten, Referenzen, Ratgeber)
   Weiß, Überschrift links, Text rechts mit Goldstrich, unten eine goldene Bergkamm-Linie.
   ========================================================================== */
.joy-preise .joy-hero.joy-hero--line { background: #FFFFFF; color: var(--joy-ink); text-align: left; padding: 68px 0 108px; }
.joy-preise .joy-hero-ed:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-hero-ed > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px 56px; align-items: end; }
.joy-preise .joy-hero--line .joy-eyebrow { justify-content: flex-start; }
.joy-preise .joy-hero--line .joy-eyebrow::after { content: none; }
.joy-preise .joy-hero--line h1.joy-h1--slim { margin: 0; max-width: 20ch; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; color: var(--joy-green); }
.joy-preise .joy-hero--line .joy-lead--slim { margin: 0 0 6px; max-width: 46ch; font-size: 18px; line-height: 1.65; color: var(--joy-text); border-left: 2px solid var(--joy-ocker); padding-left: 22px; }
.joy-preise .joy-scape.joy-scape--line { top: auto; bottom: 18px; height: 60px; overflow: visible; }
.joy-preise .joy-scape--line svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; animation: joyLineDraw 1.8s cubic-bezier(.45,.05,.25,1) .15s both; }
.joy-preise .joy-scape--line .r1 { fill: none; stroke: var(--joy-ocker); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.joy-preise .joy-scape--line .r2 { fill: none; stroke: #CBD5C8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.joy-preise .joy-scape__ring { position: absolute; right: 31%; bottom: 42px; width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--joy-ocker); animation: joyRingIn 1s ease 1.4s both; }
@keyframes joyLineDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes joyRingIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 781px) {
	.joy-preise .joy-hero.joy-hero--line { padding: 46px 0 88px; }
	.joy-preise .joy-scape.joy-scape--line { bottom: 16px; height: 46px; }
	.joy-preise .joy-scape--line svg { right: auto; left: -70%; width: 240%; }
	.joy-preise .joy-hero-ed:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-hero-ed > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.joy-preise .joy-hero--line h1.joy-h1--slim { font-size: clamp(28px, 7.4vw, 34px); }
	.joy-preise .joy-hero--line .joy-lead--slim { font-size: 16px; padding-left: 18px; }
	.joy-preise .joy-scape__ring { right: 20%; bottom: 34px; width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.joy-preise .joy-scape--line svg, .joy-preise .joy-scape__ring { animation: none; }
}


/* ==========================================================================
   Version 2.5 – Feinschliff SEO & Conversion
   ========================================================================== */
/* Kopfbereich „Kammlinie“: dezente Textlinks unter der Einleitung (nächster Schritt sofort sichtbar) */
.joy-preise .joy-hero-ed__aside { min-width: 0; }
.joy-preise .joy-hero-ed__aside > .wp-block-group__inner-container { padding: 0; }
.joy-preise .joy-hero--line .joy-hero-ed__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 20px 0 6px; padding-left: 24px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.joy-preise .joy-hero-ed__links a { color: var(--joy-green); text-decoration: none; border-bottom: 1px solid rgba(143, 92, 18, .35); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.joy-preise .joy-hero-ed__links a::after { content: " →"; color: var(--joy-ocker-dark); }
.joy-preise .joy-hero-ed__links a:hover, .joy-preise .joy-hero-ed__links a:focus-visible { color: var(--joy-ocker-dark); border-color: var(--joy-ocker-dark); }
@media (max-width: 781px) {
	.joy-preise .joy-hero--line .joy-hero-ed__links { padding-left: 20px; margin-top: 16px; font-size: 14px; }
}
/* Startseite: H1 trägt das Suchwort („Kreativagentur im Schwarzwald“), der Claim bleibt groß als Absatz */
.joy-preise h1.joy-eyebrow { font-family: var(--joy-sans, "JOY Lato", sans-serif); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 4px; text-transform: uppercase; margin: 0 0 14px; }
.joy-preise p.joy-h1 { font-family: var(--joy-serif); font-weight: 900; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.1; letter-spacing: -0.5px; color: var(--joy-green); margin: 0 0 28px; }
.joy-preise p.joy-display { font-size: clamp(38px, 5.6vw, 76px); margin-bottom: 10px; max-width: 13ch; }
.joy-preise .joy-home-hero p.joy-h1 { color: #728A7A; }


/* ==========================================================================
   Version 2.5 – Go-live
   ========================================================================== */
/* Video-Fenster ohne Video: kein „folgt in Kürze“, kein Play-Knopf – nur das Standbild */
.joy-preise .joy-reel.is-empty .joy-reel__play,
.joy-preise .joy-reel.is-empty .joy-reel__cta,
.joy-preise .joy-reel.is-empty .joy-reel__soon { display: none !important; }
/* Landingpage: H1 als kleine Zeile, großer Titel als Absatz (SEO: Startseite mit sprechender H1) */
.joy-lp h1.joy-lp-kicker { font-family: inherit; line-height: 1.4; text-transform: none; margin-top: 0; }
.joy-lp p.joy-lp-title { margin: 0; }
.joy-lp .joy-lp-bar__nav { display: flex; align-items: center; gap: 22px; }
.joy-lp a.joy-lp-bar__link { color: var(--lp-cream); font-size: 14px; font-weight: 700; text-decoration: none; opacity: .86; transition: color .2s ease, opacity .2s ease; }
.joy-lp a.joy-lp-bar__link:hover { color: var(--lp-gold); opacity: 1; }
.joy-lp .joy-lp-more { margin-top: 26px; }
.joy-lp .joy-lp-more a { color: var(--lp-gold); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(224, 165, 74, .4); padding-bottom: 2px; }
.joy-lp .joy-lp-more a:hover { border-bottom-color: var(--lp-gold); }
@media (max-width: 600px) {
	.joy-lp .joy-lp-bar__nav { gap: 14px; }
	.joy-lp a.joy-lp-bar__link { font-size: 13px; }
	.joy-lp a.joy-lp-bar__cta { padding: 9px 16px; font-size: 13px; }
}
/* Referenz: Bildstrecke (z. B. Innenaufnahmen) */
.joy-preise .joy-case-gallery:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-case-gallery > .wp-block-group__inner-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 8px; }
.joy-preise .joy-case-gallery .wp-block-image { margin: 0; }
.joy-preise .joy-case-gallery .wp-block-image:first-child { grid-column: 1 / -1; }
.joy-preise .joy-case-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
@media (max-width: 600px) { .joy-preise .joy-case-gallery:not(:has(> .wp-block-group__inner-container)), .joy-preise .joy-case-gallery > .wp-block-group__inner-container { grid-template-columns: 1fr; } }

/* ==========================================================================
   2.5.4 – Projektbilder aus der Mediathek (Hotel Schwarzwald)
   ========================================================================== */
/* Große Referenz-Galerie: bleibt am Handy zweispaltig, Hochformat über zwei Reihen */
.joy-preise .joy-case-gallery .is-tall { position: relative; grid-row: span 2; }
.joy-preise .joy-case-gallery .is-tall img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 600px) {
	.joy-preise .joy-case-gallery--many:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-case-gallery--many > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; gap: 8px; }
	.joy-preise .joy-case-gallery--many img { border-radius: 10px; }
}
/* Schmale Bildleiste unter einem Abschnitt */
.joy-preise .joy-shots { margin-top: 64px; }
.joy-preise .joy-shots:not(:has(> .wp-block-group__inner-container)),
.joy-preise .joy-shots > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.joy-preise .joy-shots .wp-block-image { margin: 0; }
.joy-preise .joy-shots img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.joy-preise .joy-shots-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--joy-muted); }
.joy-preise .joy-shots-note a { color: var(--joy-green); text-underline-offset: 3px; }
@media (max-width: 780px) {
	.joy-preise .joy-shots { margin-top: 44px; }
	.joy-preise .joy-shots:not(:has(> .wp-block-group__inner-container)),
	.joy-preise .joy-shots > .wp-block-group__inner-container { grid-template-columns: 1fr 1fr; gap: 10px; }
	.joy-preise .joy-shots img { border-radius: 12px; }
}
/* Bildunterschriften in Ratgeber-Artikeln */
.joy-preise .joy-case-main figure .wp-element-caption { margin: 10px 2px 0; font-size: 14px; line-height: 1.5; color: var(--joy-muted); text-align: left; }

/* Hervorhebung in Überschriften auf nachtgrünem Grund: helles Ocker wie die Dachzeile */
.joy-preise .joy-bg-green h2.joy-h2 em { color: #E0A54A; }

/* Himmel der Berglandschaft: oben weich ausblenden, damit Sonnenschein und Farbton keine harte Kante bilden */
.joy-preise .joy-scape--hero .joy-scape__sky,
.joy-preise .joy-scape--hero .joy-scape__sun,
.joy-preise .joy-scape--cta .joy-scape__sky,
.joy-preise .joy-scape--slim .joy-scape__sky {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
}
.joy-preise .joy-scape__sky ellipse { opacity: .75; }

/* Startseite oben: auf breiten Bildschirmen so hoch, dass Berge und Sonne nicht oben abgeschnitten werden;
   nur der Himmelsschein blendet kurz aus, Sonne bleibt voll sichtbar */
.joy-preise .joy-scape--hero { height: max(clamp(190px, 23vw, 340px), 18.4vw); }
.joy-preise .joy-scape--hero .joy-scape__sun { -webkit-mask-image: none; mask-image: none; }
.joy-preise .joy-scape--hero .joy-scape__sky {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
}
/* Landingpage: Cocktail-Bild so zuschneiden, dass das Glas ganz zu sehen ist */
.joy-preise .joy-lp-shot img.wp-image-661 { object-position: 50% 72%; }
/* Landingpage-Hero: bei niedrigen Bildschirmen nicht unter die Kopfleiste rutschen */
.joy-preise.joy-lp .joy-lp-hero__text, .joy-preise.joy-lp .joy-lp-hero__text > .wp-block-group__inner-container { justify-content: safe center; }
@media (max-height: 760px) { .joy-preise.joy-lp .joy-lp-hero__text, .joy-preise.joy-lp .joy-lp-hero__text > .wp-block-group__inner-container { justify-content: flex-start; } }
/* Abschnitte vorübergehend ausblenden (Klasse im Editor wieder entfernen, um sie zu zeigen) */
.joy-preise .joy-ausgeblendet { display: none !important; }
/* Rechenbeispiel: große Zahl immer in einer Zeile */
.joy-preise .joy-bignum__num { white-space: nowrap; }
@media (min-width: 1100px) { .joy-preise .joy-bignum { max-width: 920px; } }
@media (max-width: 600px) { .joy-preise .joy-bignum__num { font-size: min(64px, 14.8vw); } }
/* Landingpage-Referenzen am Handy: Leiste wischbar machen + Hinweis */
html:not(.joy-lp-hs-on) .joy-lp .joy-lp-hscroll .joy-lp-track { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; scroll-padding-inline: var(--lp-gutter); }
.joy-preise.joy-lp .joy-lp-hscroll .joy-rail-hint { display: none; }
@media (max-width: 960px) { .joy-preise.joy-lp .joy-lp-hscroll .joy-rail-hint { display: inline-flex; color: rgba(243, 238, 228, .72); margin-top: 14px; } }