/* v17: Level 2 der Jack-Roberts-Kette. Lock: Apple (weisser Raum, Typo als Stimme, Produkt als Design), Lamborghini-Buehne. */
:root{--frost:#f5f5f7;--hair:#d2d2d7;--stage:#202020}
body{background:var(--frost)}
h1,h2,h3{font-weight:700;letter-spacing:-.03em}h2{font-weight:600;letter-spacing:-.025em}
.v17-hero{background:var(--frost);padding:96px 0 0;text-align:center}
.v17-hero-copy{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:980px}
.v17-hero h1{font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:var(--ink);text-wrap:balance}
.v17-hero h1 em{font-style:normal;color:var(--orange)}
.v17-desc{font-size:clamp(19px,2vw,24px);line-height:1.3;letter-spacing:-.01em;font-weight:300;color:var(--ink);max-width:30ch;margin:0}
.v17-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.v17-actions .button{padding:12px 24px;min-height:48px;font-size:17px;font-weight:600;gap:12px;color:#fff}
.v17-btn2{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:980px;border:1px solid var(--hair);background:transparent;color:var(--ink);font-size:17px;font-weight:600;transition:border-color .2s var(--ease),background .2s var(--ease)}.v17-btn2:hover{background:#fff;border-color:#474747}
.v17-trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.v17-trust .portrait-stack{display:flex}.v17-trust .portrait-stack img{width:44px;height:44px;border-radius:50%;border:3px solid #fff;object-fit:cover;margin-left:-12px}.v17-trust .portrait-stack img:first-child{margin-left:0}
.v17-trust-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.v17-trust .stars{display:flex;gap:2px;color:#f2a516}.v17-trust .stars .icon{width:15px;height:15px;fill:currentColor;stroke:none}.v17-trust strong{font-size:15px;font-weight:600;color:var(--ink)}
.v17-logos{display:flex;gap:14px;align-items:center;padding-left:16px;border-left:1px solid var(--hair)}.v17-logos span{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#474747;white-space:nowrap}.v17-logos svg{width:15px;height:15px;flex:none}
.v17-hero-photo{margin:64px 0 0;position:relative}.v17-hero-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.v17-hero-photo figcaption{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.v17-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:48px 0 64px;border-bottom:1px solid var(--hair);text-align:left}
.v17-benefits strong{display:block;font-size:17px;font-weight:600;color:var(--ink)}.v17-benefits small{display:block;font-size:14px;color:#474747;margin-top:4px}
/* Buehne */
.v17-stage{background:var(--stage);color:var(--frost);padding:120px 0;margin:96px 0}
.v17-stage-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.v17-mark{font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:#8a8a8f;margin:0 0 20px;font-weight:500}
.v17-stage h2{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.03em;font-weight:600;color:var(--frost);text-wrap:balance}
.v17-stage-copy p:not(.v17-mark){font-size:17px;line-height:1.5;color:#c7c7cc;max-width:48ch;margin:20px 0 0}
.v17-stage-copy .button{margin-top:32px;color:#fff}
.v17-stage-photo{margin:0}.v17-stage-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0}
.v17-stage-photo figcaption{font-size:12px;color:#8a8a8f;margin-top:12px}
@media(max-width:900px){.v17-hero{padding-top:56px}.v17-hero h1{font-size:40px}.v17-desc{font-size:19px;max-width:28ch}.v17-hero-photo{margin-top:40px}.v17-hero-photo img{aspect-ratio:4/5}.v17-benefits{grid-template-columns:1fr;gap:16px;padding:32px 0 40px}.v17-logos{border-left:0;padding-left:0;width:100%;justify-content:center}.v17-trust{gap:12px}.v17-stage{padding:64px 0;margin:64px 0}.v17-stage-grid{grid-template-columns:1fr;gap:32px}.v17-stage-copy .button{margin-top:24px}}
/* Bar Hero 3: Foto >= 45 % des ersten Bildschirms */
@media(min-width:901px){.v17-hero{padding-top:64px}.v17-hero-copy{gap:20px}.v17-hero-photo{margin-top:40px}.v17-hero h1{font-size:clamp(40px,4.6vw,64px)}}
/* System-Critic Runde 11: kein Versal-Etikett auf der Buehne */
.v17-mark{text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;color:#a1a1a6}
/* Craft-Critic Runde 11: Foto >= 58 % der Falz, drei Textgroessen, Buehne zweizeilig mit 54 % Bild */
@media(min-width:901px){.v17-hero{padding-top:56px}.v17-hero-copy{gap:16px}.v17-hero h1{font-size:clamp(40px,4.4vw,62px)}}
.v17-desc{font-size:19px;line-height:1.35;max-width:38ch}
.v17-actions{margin-top:8px}.v17-trust{margin-top:8px}.v17-trust strong{font-size:17px}.v17-logos span{font-size:14px}
.v17-hero-photo{margin-top:32px}
.v17-hero-photo figcaption{position:static;text-align:left;color:#707070;text-shadow:none;font-size:12px;padding:12px 0 0;width:min(1320px,100% - 2*var(--pad));margin-inline:auto}
@media(min-width:901px){.v17-stage-grid{grid-template-columns:.78fr 1.22fr;gap:56px}}.v17-stage h2{font-size:clamp(36px,3.6vw,52px)}
.v17-stage-photo figcaption{color:#a1a1a6}
@media(max-width:900px){.v17-hero-photo figcaption{width:auto;padding:12px 20px 0}.v17-desc{font-size:18px}}
/* Override-Falle 06.09. wiederholt: Handy-Regeln stehen am Ende */
@media(max-width:900px){.v17-stage-grid{grid-template-columns:1fr;gap:32px}.v17-stage-photo img{aspect-ratio:4/3}}
/* Runde 13: Buehne als Lamborghini-Vollbild, Hero-Luft 64 px */
.v17-hero-photo{margin-top:64px}
.v17-stage{position:relative;display:flex;align-items:flex-end;background:var(--stage);overflow:hidden}@media(min-width:901px){.v17-stage{min-height:720px;padding:0;margin:96px 0}}
.v17-stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:14% 45%;display:block}
.v17-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,32,32,0) 35%,rgba(32,32,32,.78) 100%)}
.v17-stage-bar{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;padding:0 0 72px}
.v17-stage-grid,.v17-stage-photo{display:none}
.v17-stage h2{font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.03em;font-weight:600;color:var(--frost);text-wrap:balance;max-width:14ch}
.v17-stage-copy p{font-size:17px;line-height:1.5;color:#d6d6db;max-width:44ch;margin:20px 0 0}
.v17-stage-act{display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
.v17-stage-act .button{color:#fff;margin:0}.v17-stage-act small{font-size:12px;color:#a1a1a6;max-width:36ch}
@media(max-width:900px){.v17-stage{min-height:0;margin:64px 0}.v17-stage-bg{position:relative;height:auto;aspect-ratio:4/5;object-position:55% 45%}.v17-stage::after{background:linear-gradient(180deg,rgba(32,32,32,0) 40%,rgba(32,32,32,.9) 100%)}.v17-stage-bar{position:absolute;left:0;right:0;bottom:0;grid-template-columns:1fr;gap:20px;padding:0 20px 28px;width:auto}.v17-stage h2{font-size:36px;max-width:none}.v17-stage-copy p{font-size:16px;max-width:none}.v17-stage-act{align-items:flex-start;text-align:left}}
/* Sektion 3: Projekte (Lamborghini Story Grid: Datum, Titel, Bild, kein Kartenchrome; Sektionsoeffner links/rechts) */
.v17-projects{padding:0 0 96px;background:var(--frost)}
.v17-opener{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:20px;border-bottom:1px solid var(--hair);margin-bottom:40px}
.v17-opener h2{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:600;color:var(--ink);max-width:22ch;text-wrap:balance}
.v17-link{color:var(--orange-dark);font-size:17px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:44px}.v17-link:hover{text-decoration:underline}.v17-link .icon{width:18px;height:18px}
.v17-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.v17-story{display:grid;gap:10px;color:var(--ink)}.v17-story img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
.v17-story-meta{font-size:14px;color:#707070;margin-top:6px}.v17-story strong{font-size:21px;line-height:1.24;letter-spacing:-.005em;font-weight:600}.v17-story-fact{font-size:15px;color:#474747}
.v17-story:hover img{opacity:.92}
@media(max-width:900px){.v17-projects{padding-bottom:64px}.v17-opener{flex-direction:column;align-items:flex-start;gap:12px}.v17-grid3{grid-template-columns:1fr;gap:32px}.v17-story strong{font-size:19px}}
/* Runde 14: Weitwinkel-Nachtszene, leiser Zweitlink, Handy-Headline mit Luft */
.v17-stage{min-height:0;aspect-ratio:21/9}.v17-stage-bg{object-position:50% 50%}
.v17-stage picture{position:absolute;inset:0;display:block}
.v17-link-quiet{color:var(--ink);font-weight:600;font-size:17px;padding:12px 8px}
.v17-link-quiet .icon{width:20px;height:20px;color:var(--orange-dark)}
@media(max-width:900px){.v17-stage{aspect-ratio:auto}.v17-stage picture{position:relative}.v17-stage::after{background:linear-gradient(180deg,rgba(32,32,32,.15) 0%,rgba(32,32,32,0) 25%,rgba(32,32,32,.92) 100%)}.v17-stage-bar{padding-top:24px}}
/* Craft-Critic Runde 13 */
@media(min-width:901px){.v17-stage h2{max-width:none;font-size:clamp(40px,4vw,56px);line-height:1.02}}
@media(min-width:901px){.v17-stage-bar{grid-template-columns:1.25fr .75fr;gap:40px}}
.v17-stage-act{gap:24px}
@media(min-width:901px){.v17-hero-photo{margin-top:48px}.v17-hero{padding-top:48px}}
@media(max-width:900px){.v17-stage::after{background:linear-gradient(180deg,rgba(32,32,32,.55) 0%,rgba(32,32,32,.15) 22%,rgba(32,32,32,.94) 100%)}.v17-stage-bar{padding-top:32px}.v17-stage h2{text-shadow:0 1px 12px rgba(0,0,0,.45)}}
/* Override-Falle, dritte Wiederholung heute: alle Desktop-Rasterregeln nur noch unter min-width */
@media(max-width:900px){.v17-stage-bar{grid-template-columns:1fr;gap:20px}.v17-stage-act{align-items:flex-start;text-align:left}.v17-stage-act small{max-width:none}}
/* Craft-Critic Runde 14 */
.v17-link-quiet .icon{color:#4a4a4a}
@media(min-width:901px){.v17-desc{font-size:21px;line-height:1.3;max-width:34ch}}
.v17-trust-text strong{font-size:17px}.v17-logos span{font-size:15px}
.v17-stage-copy small{display:block;font-size:13px;color:#a1a1a6;margin-top:28px;max-width:44ch}
.v17-stage-act small{display:none}
@media(min-width:901px){.v17-grid3{grid-template-columns:2fr 1fr;grid-template-rows:auto auto}.v17-story:first-child{grid-row:1/3}.v17-story:first-child img{aspect-ratio:16/10;height:100%}.v17-story:first-child strong{font-size:28px;line-height:1.15;letter-spacing:-.02em}}
.v17-story img{aspect-ratio:16/10;height:auto}
/* Craft-Critic Runde 15 */
.v17-trust-text strong{font-size:16px}.v17-logos span{font-size:16px}
.v17-stage-copy small{color:#c9c9c9;font-size:16px}
.v17-story{align-content:start;gap:8px}.v17-story img{border-radius:0}
@media(min-width:901px){.v17-hero{padding-top:56px}.v17-story:first-child img{height:auto;aspect-ratio:16/10}.v17-story:first-child{align-content:start}}
/* Craft-Critic Runde 16: Projekte auf eine Grundlinie, gleiche Abstaende */
.v17-story{gap:20px}.v17-story-meta{margin-top:0}.v17-story strong{margin:0}.v17-story-fact{margin:0}
@media(min-width:901px){.v17-grid3{grid-template-rows:1fr 1fr;align-items:stretch}.v17-story:first-child{grid-template-rows:1fr auto auto auto}.v17-story:first-child img{height:100%;aspect-ratio:auto;object-fit:cover;min-height:0}}
/* v18: Startseite konsolidiert. Hero Vollbild (Apple/Lamborghini: das Bild traegt 100 %), Familie als Apple-Rail, Prozess, Foerderung, CTA */





.v18-trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.v18-trust .portrait-stack{display:flex}.v18-trust .portrait-stack img{width:40px;height:40px;border-radius:50%;border:3px solid #fff;object-fit:cover;margin-left:-12px}.v18-trust .portrait-stack img:first-child{margin-left:0}
.v18-trust-text{display:flex;flex-direction:column;gap:2px}.v18-trust .stars{display:flex;gap:2px;color:#f2a516}.v18-trust .stars .icon{width:15px;height:15px;fill:currentColor;stroke:none}.v18-trust strong{font-size:16px;font-weight:600;color:var(--ink)}
.v18-logos{display:flex;gap:14px;align-items:center;padding-left:16px;border-left:1px solid rgba(29,29,31,.2)}.v18-logos span{display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:600;color:#474747;white-space:nowrap}.v18-logos svg{width:15px;height:15px;flex:none}
.v18-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 0 48px;border-bottom:1px solid var(--hair)}
.v18-benefits strong{display:block;font-size:17px;font-weight:600;color:var(--ink)}.v18-benefits small{display:block;font-size:14px;color:#474747;margin-top:4px}
/* Familie: Apple-Rail */
.v18-family{padding:96px 0 0}
.v18-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(24px,calc((100% - 1320px)/2)) 48px;scrollbar-width:none}.v18-rail::-webkit-scrollbar{display:none}
.v18-tile{flex:0 0 340px;scroll-snap-align:start;background:#f7f0e7;border-radius:28px;padding:14px;display:grid;gap:8px;color:var(--ink);transition:transform .2s var(--ease)}.v18-tile:hover{transform:translateY(-3px)}
.v18-tile-img{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:transparent}.v18-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.v18-tile strong{font-size:21px;font-weight:600;letter-spacing:-.005em;margin-top:8px}.v18-tile>span:not(.v18-tile-img){font-size:15px;line-height:1.45;color:#474747}.v18-tile b{font-size:17px;font-weight:600}.v18-tile small{font-size:12px;color:#707070}
/* Prozess */
.v18-process{padding:96px 0 0}
.v18-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.v18-steps em{display:block;font-style:normal;font-size:40px;font-weight:300;color:#707070;line-height:1;letter-spacing:-.02em}.v18-steps h3{font-size:21px;font-weight:600;margin-top:12px;letter-spacing:-.005em}.v18-steps p{color:#474747;font-size:15px;line-height:1.5;margin-top:6px}
.v18-process-photo{margin:64px 0 0}.v18-process-photo img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 40%;display:block}.v18-process-photo figcaption{font-size:12px;color:#707070;padding:12px 0 0;width:min(1320px,100% - 2*var(--pad));margin-inline:auto}
/* Foerderung */
.v18-funding{background:#fff;padding:96px 0;margin-top:96px}
.v18-funding-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.v18-big{font-size:clamp(72px,9vw,128px);font-weight:700;letter-spacing:-.04em;line-height:.95;margin:0;color:var(--ink)}.v18-big-sub{font-size:19px;font-weight:300;color:var(--ink);margin:16px 0 0;max-width:30ch}
.v18-funding h2{font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:-.025em;font-weight:600}
.v18-dl{margin:32px 0 0;display:grid;gap:0}.v18-dl div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-top:1px solid var(--hair);font-size:17px}.v18-dl div:last-child{border-bottom:1px solid var(--hair)}.v18-dl dt{color:#474747}.v18-dl dd{margin:0;font-weight:600}
.v18-note{font-size:14px;color:#707070;margin:16px 0 24px}.v18-funding .button{color:#fff}
/* Kundenfilme, CTA */
.v18-customers{padding-top:96px}
.v18-cta{padding:120px 0 128px;text-align:center}.v18-cta h2{font-size:clamp(36px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:700;text-wrap:balance}.v18-cta p{font-size:19px;font-weight:300;color:var(--ink);margin:20px auto 32px;max-width:40ch}.v18-cta .button{color:#fff}
@media(max-width:900px){
 .v18-logos{border-left:0;padding-left:0;width:100%}
 .v18-benefits{grid-template-columns:1fr;gap:16px;padding:8px 0 40px}
 .v18-family,.v18-process,.v18-customers{padding-top:64px}.v18-rail{padding:0 20px 40px;gap:16px}.v18-tile{flex-basis:280px}
 .v18-steps{grid-template-columns:1fr;gap:24px}.v18-process-photo{margin-top:40px}.v18-process-photo img{aspect-ratio:4/3}.v18-process-photo figcaption{width:auto;padding:12px 20px 0}
 .v18-funding{padding:64px 0;margin-top:64px}.v18-funding-grid{grid-template-columns:1fr;gap:32px}
 .v18-cta{padding:80px 0 96px}
}
@media(max-width:900px){.v18-customers .client-grid{grid-template-columns:1fr;gap:24px}.v18-customers .client-card{max-width:100%}.v18-customers .video-cover img{width:100%}}
/* CTA als Fotoband (Apple Feature Banner, hell) */
.v18-cta{position:relative;overflow:hidden;min-height:640px;display:grid;align-items:center;text-align:left;padding:96px 0}
.v18-cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.v18-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,245,247,.96) 0,rgba(245,245,247,.9) 34%,rgba(245,245,247,.5) 52%,rgba(245,245,247,0) 70%)}
.v18-cta-copy{position:relative}.v18-cta h2{text-align:left;max-width:12ch}.v18-cta p{margin:20px 0 32px;text-align:left}
@media(max-width:900px){.v18-cta{min-height:0;padding:0;display:block}.v18-cta-img{position:static;aspect-ratio:4/3;height:auto}.v18-cta::before{display:none}.v18-cta-copy{padding:32px 0 56px}}
/* Hero: Text braucht ruhigen Grund (Runde 18, eigener Befund) */

.v18-trust{max-width:560px}
/* Familie: fuenf Kacheln sichtbar bei 1440, Klick-Hinweis, ein gefuellter Knopf (Runde 18 Brief + System) */
.v18-rail{gap:20px}
.v18-tile{flex:0 0 calc((min(1320px,100vw - 2*var(--pad)) - 80px)/5);padding:20px}.v18-tile strong{font-size:19px}.v18-tile>span:not(.v18-tile-img):not(.v18-tile-more){font-size:14px}.v18-tile b{font-size:16px}
.v18-tile-more{font-size:14px;font-weight:600;color:var(--orange-dark);margin-top:4px}
.v18-family-cta{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding-bottom:0}.v18-family-cta .button{color:#fff}.v18-family-cta span{font-size:15px;color:#474747}
@media(max-width:900px){.v18-tile{flex-basis:280px;padding:24px}.v18-tile strong{font-size:21px}.v18-family-cta{padding:0 0 8px}}
@media(max-width:900px){.v18-rail{gap:16px}.v18-cta{padding:0}}
/* Hero-Variante mit Negativraum links: Verlauf nur noch als Sicherheitsnetz */

/* Familie: linke Kante fluchtet mit dem Raster, gleiche Grundlinien (Craft Runde 18) */
.v18-rail{padding-left:max(var(--pad),calc((100% - 1320px)/2));padding-right:max(var(--pad),calc((100% - 1320px)/2))}
.v18-tile strong{white-space:nowrap;min-height:24px}.v18-tile>span:not(.v18-tile-img):not(.v18-tile-more){min-height:calc(4*1.45*14px)}.v18-tile b{min-height:22px}
@media(max-width:900px){.v18-rail{padding-left:20px;padding-right:20px}}

/* v20 Hero: Haus am See in echten Ebenen (Platte, Text, Haus-Freisteller, Schilf) plus Tag-zu-Nacht.
   Szene = 2200 x 1228 px, per --s skaliert (JS deckt den Viewport, --ox verschiebt auf dem Handy zum Haus).
   Nates Regel: hintere Ebene traegt am wenigsten, Vordergrund am meisten, Text bleibt stehen. */
.v20-hero{position:relative;margin-top:-96px;background:#0f1319;color:#fff}
.v20-pin{position:relative;height:100vh;height:100svh;min-height:640px;max-height:1010px;overflow:hidden}
.v20-scene{position:absolute;left:50%;top:50%;width:2200px;height:1228px;transform:translate(calc(-50% + var(--ox,0px)),-50%) scale(var(--s,.66));transform-origin:50% 50%;pointer-events:none}
.v20-back{z-index:1}.v20-front{z-index:4}
.v20-scene img{position:absolute;max-width:none;display:block;will-change:transform,opacity}
.v20-plate{left:0;top:0;width:2200px;height:1227px}
.v20-haus{left:851px;top:227px;width:1349px;height:920px}
.v20-schilf{left:0;top:560px;width:2200px;height:668px}
.v20-schilf-nacht{filter:brightness(.32) saturate(.55)}
.v20-night{opacity:0}
.v20-haze{position:absolute;left:0;top:0;width:2200px;height:1228px;background:radial-gradient(52% 34% at 22% 60%,rgba(255,214,170,.32),rgba(255,214,170,0) 70%);will-change:transform,opacity}
.v20-pin::before{content:none}
.v20-pin::after{content:none}
.v20-copy{position:absolute;left:0;right:0;top:96px;bottom:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:end;align-items:end;gap:28px 48px;padding-bottom:22vh}
.v20-hero h1{grid-column:1/-1;font-size:clamp(48px,6.4vw,92px);line-height:.94;letter-spacing:-.035em;font-weight:700;color:#000;max-width:11ch;margin:0}
.v20-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.v20-line>span{display:block}
.v20-hero h1 em{font-style:normal;color:var(--orange)}
.v20-desc{font-size:clamp(18px,1.5vw,21px);line-height:1.35;font-weight:400;color:#000;max-width:40ch;margin:0}
.v20-copy .button{padding:14px 28px;min-height:52px;font-size:17px;font-weight:600;color:#000;justify-self:end;pointer-events:auto}
.v20-beat2{opacity:0;pointer-events:none;margin:0;font-size:clamp(32px,4vw,58px);line-height:1.06;letter-spacing:-.03em;font-weight:700;color:#000;max-width:22ch;}
.v20-beat2 em{font-style:normal;display:block;color:var(--ga-brand,#ee671f)}
.v20-credit{position:absolute;right:var(--pad);bottom:20px;top:auto;z-index:8;font-size:15px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.85);margin:0}
.v19-trustband{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid rgba(29,29,31,.1)}
.v19-trustband .v18-trust{margin-top:0}
.v19-link{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink);min-height:44px}.v19-link .icon{width:20px;height:20px}.v19-link:hover{color:var(--orange-dark)}
/* Oeffnung: Headline hinter dem Schilf (der Move), Unterzeile + Knopf davor und links im freien Raum, Schilf tiefer */
.v20-copy{grid-template-columns:minmax(0,1fr);padding-bottom:16vh}
.v20-copy h1{position:relative;z-index:2}
.v20-desc,.v20-copy .button{position:relative;z-index:4}
.v20-copy .button{justify-self:start}
.v20-schilf{top:700px}

.v20-shadow{left:1180px;top:1000px;width:960px;height:80px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 70%)}
.sticky-cta{transition:opacity .3s var(--ease),translate .3s var(--ease)}.sticky-cta.is-hidden{opacity:0;pointer-events:none;translate:0 24px}
/* Buehne, Craft R20: Fussnote als Randnotiz, Headline groesser, weniger Schwarz am Fuss */
.v17-stage-note{grid-column:1/-1;font-size:15px;line-height:1.45;color:#eceeef;margin:48px 0 0;max-width:60ch}
@media(min-width:901px){.v17-stage h2{font-size:clamp(56px,4.8vw,68px);line-height:1.02}}
.v17-stage::after{background:linear-gradient(180deg,rgba(32,32,32,0) 40%,rgba(32,32,32,.62) 100%)}
.v17-stage-bar{padding-bottom:64px}
/* Familie, Craft+Brief R20: Auftakt Zeile 2 orange, eine Quellenzeile, Wisch-Hinweis nur mobil */
.v17-opener h2 em{font-style:normal;color:var(--orange)}
.v18-rail-note{display:flex;justify-content:space-between;gap:24px;font-size:15px;color:#5a5550;margin:-16px auto 32px}
.v18-rail-hint{display:none;align-items:center;gap:6px;font-weight:600;color:var(--ink)}.v18-rail-hint .icon{width:16px;height:16px}
/* R21: Sektion traegt die Nachtplatte als Grund, damit der Pin-Abstandhalter in Ganzseiten-Shots kein schwarzes Loch ist */
.v20-hero{background:#0f1319 url(/bilder/energiesystem/holzhaus-am-see-nacht.webp) center bottom/cover no-repeat}
.v20-proof{position:relative;z-index:4;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:#fff;margin:0}
.v20-proof .stars{display:flex;gap:2px;color:#e8b23a}.v20-proof .stars .icon{width:14px;height:14px;fill:currentColor;stroke:none}
.v20-copy{gap:14px 48px}.v20-copy .button{margin-top:0}
@media(prefers-reduced-motion:reduce){.v20-beat2,.v20-night{display:none}}
@media(max-width:900px){.v20-pin{height:calc(100svh - 72px);min-height:560px;max-height:820px}.v20-copy{grid-template-columns:1fr;gap:16px;padding-bottom:18vh}.v20-hero h1{font-size:44px;max-width:none}.v20-desc{font-size:17px}.v20-copy .button{justify-self:start}.v20-beat2 p{font-size:38px}.v19-trustband{padding:16px 0}}
/* Handy: Text vor allen Ebenen im dunklen Fuss, zweite Aussage ebenfalls unten (Haus fuellt sonst die Mitte) */
@media(max-width:900px){.v20-copy{padding-bottom:14vh}.v20-beat2{align-content:end;padding-bottom:16vh}.v20-pin::after{background:none}}
@media(max-width:900px){.v18-rail-hint{display:inline-flex}.v18-rail-note{flex-direction:column;gap:8px;margin:-16px auto 24px}.v18-tile{flex-basis:250px}.v17-stage-note{position:static;padding:0 var(--pad) 20px}}
/* Buehne Handy (Craft+Brief R21): Fussnote als eigene Zeile unter dem Knopf statt neben dem Textblock */
@media(max-width:900px){.v17-stage-note{margin-top:20px}.v20-copy{padding-bottom:12vh}}

/* ===== Hero-Labor (07.09.2026): vier Ansaetze unter /hero/ ===== */
.hl-proof{position:relative;z-index:4;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:500;margin:0}
.hl-proof .portrait-stack{display:flex}.hl-proof .portrait-stack img{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.9);object-fit:cover;margin-left:-10px}.hl-proof .portrait-stack img:first-child{margin-left:0}
.hl-proof strong{font-weight:600}
.hl2-marken{display:flex;align-items:center;gap:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.32)}.hl2-marken span{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;white-space:nowrap}.hl2-marken svg{width:14px;height:14px;flex:none}
.hl-proof .stars{display:flex;gap:2px;color:#e8b23a}.hl-proof .stars .icon{width:14px;height:14px;fill:currentColor;stroke:none}
.hl-note{padding:48px 0 64px;font-size:17px;color:#474747;max-width:60ch}.hl-note p{margin:0 0 16px}
.hl-index{padding:56px 0 120px}.hl-index h1{font-size:clamp(36px,4vw,56px);line-height:1;letter-spacing:-.03em;font-weight:700;margin:0 0 20px}.hl-index h1 em{font-style:normal;color:var(--orange)}
.hl-index>p{font-size:19px;color:#474747;max-width:50ch;margin:0 0 48px}
.hl-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hl-list a{display:grid;gap:10px;padding:28px;background:#fff;border-radius:28px;color:var(--ink);min-height:220px;transition:transform .2s var(--ease)}.hl-list a:hover{transform:translateY(-3px)}
.hl-list b{font-size:15px;font-weight:600;color:var(--orange-dark)}.hl-list strong{font-size:26px;font-weight:600;letter-spacing:-.015em}.hl-list span{font-size:15px;line-height:1.5;color:#474747}

/* A: Ebenen, Kamera auf die Waermepumpe */
.hlA{position:relative;background:#0f1319 url(/bilder/energiesystem/holzhaus-am-see-nacht.webp) center bottom/cover no-repeat;color:#fff}
.hlA-pin{position:relative;height:calc(100vh - 96px);height:calc(100svh - 96px);min-height:600px;max-height:960px;overflow:hidden}
.hlA-zoom{position:absolute;inset:0;transform-origin:84% 74%;will-change:transform}
.hlA-pin::after{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.4) 100%);pointer-events:none}
.hlA-copy{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;display:grid;align-content:end;justify-items:start;gap:20px;padding-bottom:12vh}
.hlA-copy h1{font-size:clamp(46px,6vw,88px);line-height:.98;letter-spacing:-.035em;font-weight:700;color:#fff;max-width:12ch;margin:0}
.hlA-copy h1 em{font-style:normal;color:var(--orange)}
.hlA-desc{font-size:clamp(18px,1.5vw,21px);line-height:1.35;color:rgba(255,255,255,.94);max-width:40ch;margin:0}
.hlA-copy .button{padding:14px 28px;min-height:52px;font-size:17px;font-weight:600;color:#fff;position:relative;z-index:4;pointer-events:auto}
.hlA-copy .hl-proof{color:rgba(255,255,255,.9)}
.hlA-beat{align-content:end;padding-bottom:12vh;justify-items:start;gap:14px}.hlA-beat span{font-size:17px;color:rgba(255,255,255,.85)}

/* B: Produkt-Reveal in drei Schnitten */
.hlB{position:relative;background:#111;color:#fff}
.hlB-pin{position:relative;height:calc(100vh - 96px);height:calc(100svh - 96px);min-height:600px;max-height:960px;overflow:hidden}
.hlB-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform,opacity}
.hlB-1{object-position:50% 50%}.hlB-2{object-position:60% 50%;opacity:0}.hlB-3{object-position:40% 60%;opacity:0}
.hlB-pin::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);pointer-events:none}
.hlB-copy{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;display:grid;align-content:end;padding-bottom:10vh}
.hlB-beat{grid-area:1/1;display:grid;gap:18px;justify-items:start;max-width:640px}
.hlB-b2,.hlB-b3{opacity:0;visibility:hidden}
.hlB-beat h1,.hlB-h{font-size:clamp(48px,7vw,104px);line-height:.96;letter-spacing:-.04em;font-weight:700;color:#fff;margin:0}
.hlB-h{font-size:clamp(40px,5.4vw,80px)}.hlB-h em{font-style:normal;color:var(--orange)}
.hlB-beat p:not(.hlB-h){font-size:clamp(18px,1.5vw,21px);line-height:1.35;color:rgba(255,255,255,.92);max-width:38ch;margin:0}
.hlB-beat .button{padding:14px 28px;min-height:52px;font-size:17px;font-weight:600;color:#fff}
.hlB-beat .hl-proof{color:rgba(255,255,255,.9)}

/* C: Kinetic Type auf Frost */
.hlC{background:var(--frost);color:var(--ink)}
.hlC-pin{min-height:calc(100svh - 96px);display:grid;align-items:center;padding:48px 0}
.hlC-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hlC-type h1{font-size:clamp(52px,7.4vw,116px);line-height:.96;letter-spacing:-.045em;font-weight:700;margin:0 0 28px;max-width:11ch}
.hlC-word{display:inline-block;vertical-align:top;height:.96em;overflow:hidden;position:relative}
.hlC-word>span{display:block;height:.96em;color:var(--orange)}.hlC-word em{font-style:normal}
.hlC-desc{font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:#474747;max-width:40ch;margin:0 0 28px}
.hlC-act{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.hlC-act .button{padding:14px 28px;min-height:52px;font-size:17px;font-weight:600;color:#fff}
.hlC-fig{margin:0}.hlC-fig img{width:100%;height:auto;display:block;border-radius:28px;will-change:transform}.hlC-fig figcaption{font-size:12px;color:#8a8a8f;margin-top:10px}

/* D: Editorial Split */
.hlD{background:#fff;color:var(--ink);padding:72px 0 96px}
.hlD-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;padding-bottom:64px}
.hlD-head h1{font-size:clamp(52px,7vw,108px);line-height:.96;letter-spacing:-.04em;font-weight:700;margin:0}.hlD-head h1 em{font-style:normal;color:var(--orange)}
.hlD-desc{font-size:clamp(18px,1.5vw,22px);line-height:1.4;color:#474747;max-width:40ch;margin:0 0 24px}
.hlD-act{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.hlD-act .button{padding:14px 28px;min-height:52px;font-size:17px;font-weight:600;color:#fff}
.hlD-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}.hlD-mediaCol{min-width:0}
.hlD-media{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:var(--frost)}
.hlD-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease)}.hlD-media img.is-on{opacity:1}
.hlD-chapters{list-style:none;margin:0;padding:0}
.hlD-chapters li{min-height:62vh;display:grid;align-content:center;gap:12px;padding:24px 0;border-top:1px solid var(--hair);opacity:.35;transition:opacity .3s var(--ease)}.hlD-chapters li.is-active{opacity:1}
.hlD-chapters li:first-child{border-top:0}
.hlD-chapters span{font-size:15px;font-weight:500;color:#8a8a8f}.hlD-chapters h2{font-size:clamp(34px,3.6vw,56px);line-height:1.02;letter-spacing:-.03em;font-weight:700;margin:0}
.hlD-chapters p{font-size:19px;line-height:1.5;color:#474747;max-width:38ch;margin:0}

@media(prefers-reduced-motion:reduce){.hlA-beat,.v20-night{display:none}.hlB-b2,.hlB-b3{display:none}}
@media(max-width:900px){
 .hlA-pin{height:calc(100svh - 72px);min-height:560px;max-height:820px}.hlA-copy{z-index:5;padding-bottom:10vh}.hlA-copy h1{font-size:44px;max-width:none}.hlA-desc{font-size:17px}.hlA-pin::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.75) 100%)}.hlA-beat p{font-size:38px}
 .hlB-pin{height:calc(100svh - 72px);min-height:560px}.hlB-beat h1{font-size:56px}.hlB-h{font-size:40px}.hlB-beat p:not(.hlB-h){font-size:17px}
 .hlC-pin{min-height:0;padding:40px 0}.hlC-grid{grid-template-columns:1fr;gap:32px}.hlC-type h1{font-size:46px;max-width:none}.hlC-fig{order:-1}.hlC-fig img{aspect-ratio:4/3;object-fit:cover}
 .hlD{padding:48px 0 64px}.hlD-head{grid-template-columns:1fr;gap:24px;padding-bottom:40px}.hlD-head h1{font-size:52px}.hlD-split{grid-template-columns:1fr;gap:24px}.hlD-media{aspect-ratio:16/10}.hlD-chapters li{min-height:0;padding:28px 0}
 .hl-index{padding:56px 0 80px}
}
.hl-list a img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;display:block;margin-bottom:8px}
main:has(.hlA,.hlB,.hlC,.hlD,.hl2,.hl-index) .breadcrumbs{display:none}
@media(max-width:900px){.hl-list{grid-template-columns:1fr}}

/* ===== Hero-Labor v2 (07.09.2026): fuenf Tiefen-Heros aus einer Szene 2200 x 1228 =====
   Ebenen liegen als absolute Bilder in zwei identisch skalierten Wrappern (hinten/vorn), Text dazwischen.
   --s skaliert die Szene auf Cover, --ox schiebt sie auf dem Handy zum Haus. GSAP transformiert NUR .hl2-zoom
   und die einzelnen Bilder, nie .hl2-scene (dort steckt die CSS-Skalierung). */
.hl2{position:relative;margin-top:-96px;background:#0d1117;color:#fff}
.hl2-pin{position:relative;height:100vh;height:100svh;min-height:660px;max-height:1030px;overflow:hidden}
.hl2-scene{position:absolute;left:50%;top:50%;width:2200px;height:1228px;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) scale(var(--s,.66));transform-origin:50% 50%;pointer-events:none}
.hl2-back{z-index:1}.hl2-front{z-index:4}
.hl2-zoom{position:absolute;inset:0;transform-origin:83% 70%;will-change:transform}
.hl2-scene img,.hl2-scene video{position:absolute;max-width:none;display:block;will-change:transform,opacity}
.hl2-platte{left:0;top:0;width:2200px;height:1227px;object-fit:cover}
.hl2-wolken{left:-100px;top:-30px;width:2400px;height:760px}
.hl2-nebel{left:-100px;top:470px;width:2400px;height:520px}
.hl2-haus{left:851px;top:227px;width:1349px;height:920px}
.hl2-vorn{left:0;top:700px;width:2200px;height:876px}
.hl2-night,.hl2-licht{opacity:0}
.hl2-dach{position:absolute;left:1180px;top:330px;width:640px;height:300px;background:linear-gradient(118deg,rgba(255,214,170,0) 22%,rgba(255,231,196,.62) 47%,rgba(255,214,170,0) 68%);opacity:0;mix-blend-mode:screen}
.hl2-pin::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(96deg,rgba(0,0,0,.6) 0,rgba(0,0,0,.46) 30%,rgba(0,0,0,.26) 54%,rgba(0,0,0,0) 82%),radial-gradient(150% 105% at 16% 64%,rgba(0,0,0,.56) 0,rgba(0,0,0,.46) 22%,rgba(0,0,0,.34) 40%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.09) 74%,rgba(0,0,0,.03) 87%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.36) 74%,rgba(0,0,0,.68) 100%);pointer-events:none}
.hl2-pin::after{content:'';position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%);pointer-events:none}
.hl2-head{position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;display:grid;align-content:end;justify-items:start;padding-bottom:calc(13vh + var(--copyH,214px) + 26px);pointer-events:none}
.hl2-copy{position:absolute;left:0;right:0;top:0;bottom:0;z-index:6;display:grid;align-content:end;justify-items:start;gap:20px;padding-bottom:13vh}
.hl2 h1{font-size:clamp(46px,6.2vw,92px);line-height:.98;letter-spacing:-.035em;font-weight:700;color:#fff;max-width:13ch;margin:0;text-shadow:0 2px 26px rgba(0,0,0,.34)}
.hl2 h1 em{font-style:normal;color:var(--orange)}
.hl2-desc{position:relative;font-size:clamp(18px,1.5vw,21px);line-height:1.35;font-weight:400;color:#fff;max-width:42ch;margin:0;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.hl2-copy .button{position:relative;padding:14px 28px;min-height:52px;font-size:17px;font-weight:600;color:#fff;pointer-events:auto}
.hl2-copy .hl-proof{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hl2-beat{position:absolute;left:0;right:0;top:0;bottom:0;z-index:7;display:grid;align-content:end;justify-items:start;gap:14px;padding-bottom:13vh;opacity:0;pointer-events:none}
.hl2-beat p{font-size:clamp(40px,5.4vw,82px);line-height:1;letter-spacing:-.035em;font-weight:700;color:#fff;max-width:13ch;margin:0;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.hl2-beat p em{font-style:normal;color:var(--orange)}
.hl2-beat span{font-size:17px;color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hl2-credit{position:absolute;left:var(--pad);bottom:16px;z-index:8;font-size:12px;color:rgba(255,255,255,.72);margin:0}
/* Ansatz 5: das drehende Wort */
.hl2-word{display:inline-block;vertical-align:top;height:.98em;overflow:hidden;position:relative}
.hl2-word>span{display:block;height:.98em;color:var(--orange);white-space:nowrap}.hl2-word em{font-style:normal}
.hl2-v5 h1{max-width:none}
/* Ansatz 4: Daumenkino */
.hl2-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;transition:opacity .25s var(--ease)}.hl2-canvas.is-on{opacity:1}
.hl2-canvas-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hl2-v4 .hl2-copy{z-index:6}
@media(prefers-reduced-motion:reduce){.hl2-beat,.hl2-night,.hl2-licht,.hl2-dach{display:none}.hl2-video{display:none}}
@media(max-width:900px){
 .hl2-pin{height:calc(100svh - 72px);min-height:580px;max-height:840px}
 .hl2-copy{padding-bottom:11vh}
 .hl2-head{padding-bottom:calc(11vh + var(--copyH,196px) + 18px);z-index:6}
 .hl2 h1{font-size:42px;max-width:none}
 .hl2-desc{font-size:17px}
 .hl2-beat{padding-bottom:11vh}.hl2-beat p{font-size:36px}
 .hl2-pin::after{background:linear-gradient(180deg,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,.34) 58%,rgba(0,0,0,.74) 100%)}
 .hl-index-note{margin-top:32px}
}
.hl-index-note{font-size:15px;color:#474747;margin-top:40px}
body:has(.hl2) .sticky-cta,body:has(.hlA) .sticky-cta,body:has(.hlB) .sticky-cta,body:has(.hlC) .sticky-cta{display:none}
@media(max-width:900px){.hl2-marken{padding-left:0;border-left:0;width:100%;gap:14px}.hl-proof{gap:8px}}
@media(max-width:900px){.hl2-pin::before{background:linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 46%,rgba(0,0,0,.46) 100%)}}
.v18-family .v17-link{color:var(--ink)}.v18-family .v17-link:hover{color:var(--orange-dark)}
@media(max-width:900px){.v20-pin::before{content:none}}
.v18-tile>span:not(.v18-tile-img){font-size:15px}
.v20-marken{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.32);font-size:17px;font-weight:600}.v20-marken svg{width:15px;height:15px}
@media(max-width:900px){.v20-marken{margin-left:0;padding-left:0;border-left:0;width:100%;gap:8px}}
@media(max-width:900px){.v20-hero,.hl2{margin-top:-72px}.v20-copy{top:72px}.v20-credit{top:88px}.v20-pin,.hl2-pin{height:100svh;max-height:none}}
@media(max-width:900px){.v20-beat2{align-content:center;padding-bottom:0}.v20-beat2 p{font-size:34px}.hl2-beat{align-content:center;padding-bottom:0}}
@media(min-width:901px){
 .v18-tile>span:not(.v18-tile-img):not(.v18-tile-more){font-size:15px;line-height:1.4;min-height:calc(3*1.4*15px)}
 .v18-tile strong{font-size:20px;white-space:normal}
 .v18-tile b{font-size:17px}
}
@media(max-width:900px){.v20-proof,.hl-proof{flex-direction:column;align-items:flex-start;gap:6px}.v20-proof .stars,.hl-proof .stars{order:-1}.v20-marken,.hl2-marken{width:auto;margin:0;padding:0;border:0}}
@media(max-width:900px){.v17-stage::after{background:linear-gradient(180deg,rgba(32,32,32,.1) 0,rgba(32,32,32,0) 22%,rgba(32,32,32,.5) 52%,rgba(32,32,32,.86) 100%)}}
@media(max-width:900px){.v18-rail{padding-right:44px}.v18-tile{flex-basis:264px}}
@media(max-width:900px){.v18-family .v18-rail{padding-left:20px;padding-right:20px;scroll-padding-left:20px}.v18-family .v18-tile{flex-basis:calc(100vw - 64px)}}
.v18-tile{grid-template-rows:auto auto 1fr auto}
@media(min-width:901px){.v17-stage-bar{grid-template-columns:1.35fr .65fr}.v17-stage-act{align-items:flex-start;padding-right:80px}}
@media(max-width:900px){.v20-credit{bottom:16px;top:auto;right:var(--pad)}}
.v17-stage-act .button{font-size:17px;min-height:50px}
@media(min-width:901px){.v17-stage-note{margin-top:40px}}
@media(min-width:901px){.v17-stage h2{font-size:56px;line-height:0.99;max-width:17ch}.v17-stage-copy p{max-width:34ch}}
@media(max-width:900px){.v17-stage-bg{object-position:34% 45%}}
@media(min-width:901px){.v17-stage-bar{row-gap:0}.v17-stage-note{margin-top:40px}}

/* ---- Hero-Labor v3: Waermepumpe als eigene Vordergrundebene, Wechselzeile auf eigener Zeile ----
   Szene 2200 x 1228. Geraet Szene x 1500-2260, y 600-1491, also von rechter und unterer Kante
   angeschnitten. Es steht damit deutlich naeher an der Kamera als das Haus (1323 px breit). */
/* Labor 3, Stapelfolge: Die Ueberschrift liegt VOR dem Haus, damit sie nie verschluckt wird.
   Nur die naechste Ebene, das Geraet, darf vor der Schrift durchlaufen. Das ist der Tiefen-Effekt:
   das kameranaechste Objekt schneidet die Typo, das weiter entfernte Haus nicht. */
.hl3 .hl2-head{z-index:5}
.hl3 .hl2-copy{z-index:7}
.hl3-near{z-index:6}
.hl3-near .hl3-vito,.hl3-near .hl3-schatten{position:absolute}
/* Geraet in Szenenkoordinaten: 470 px breit gegen 1323 px Hausbreite, steht also deutlich naeher
   an der Kamera. Sockel bei Szene y 1180, also mitten im Gras-Vordergrund. */
.hl3-schatten,.hl3-vito{left:1180px;top:662px;width:470px;height:518px}
.hl3 .hl2-head{padding-bottom:calc(13vh + var(--copyH,236px) + 24px)}
.hl3 h1{display:grid;gap:.06em;margin:0}
.hl3-anker{display:block}
.hl3-roll{display:block;position:relative;overflow:hidden;font-size:.56em;line-height:1.06;margin-top:.12em}
.hl3-roll>span{display:block;position:absolute;left:0;top:0;width:100%;white-space:nowrap}
.hl3-roll>span:first-child{position:relative}
.hl3-roll em{font-style:normal;color:var(--ga-brand,#f2914a)}
.hl3-doors{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0}
.hl3-soft{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6);pointer-events:auto}
.hl-list-copy li a{display:grid;gap:6px;padding:20px 22px}
.hl3-preview{color:var(--ga-ink,#0b0a09)}
.hl3-mech{font-size:14px;color:#6b6560}
@media(prefers-reduced-motion:reduce){.hl3-roll{height:auto}.hl3-roll>span{position:relative;white-space:normal}.hl3-roll>span:not(:first-child){display:none}}
@media(max-width:900px){.hl3-roll{white-space:normal}.hl3-doors{gap:14px}}

/* ---- Hero-Labor v4: Tiefenkarte statt Ausschnitte ----
   Das Standbild liegt unter dem Canvas und traegt die Seite, bis die drei Texturen geladen sind.
   Erst dann blendet .t4-an das Canvas darueber. Ohne WebGL bleibt es beim Standbild. */
.t4{position:relative;margin-top:-96px}
.t4-pin{position:relative;height:100vh;height:100svh;min-height:660px;max-height:1030px;overflow:hidden;background:#0b0a09}
.t4-canvas,.t4-still{position:absolute;inset:0;width:100%;height:100%;display:block}
.t4-still{object-fit:cover}
.t4-canvas{opacity:0;transition:opacity .5s ease}
.t4-an .t4-canvas{opacity:1}
.t4-pin::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(96deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.46) 32%,rgba(0,0,0,.24) 56%,rgba(0,0,0,0) 84%),linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.66) 100%);pointer-events:none}
.t4-copy{position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;display:grid;align-content:end;justify-items:start;gap:20px;padding-bottom:13vh;pointer-events:none}
.t4-copy>*{pointer-events:auto}
.t4 h1{display:grid;gap:.06em;margin:0;color:#fff;max-width:14ch}
.t4-anker{display:block}
.t4-sub{display:block;font-size:.56em;line-height:1.06;margin-top:.12em}
.t4-sub em{font-style:normal;color:var(--ga-brand,#f2914a)}
.t4 .hl2-desc{color:#fff;max-width:34ch;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.t4 .hl-proof{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.t4 .hl2-credit{position:absolute;left:0;right:0;bottom:14px;z-index:4}
@media(max-width:900px){.t4{margin-top:-72px}.t4-pin{height:100svh;max-height:none}.t4 h1{max-width:none}}
@media(prefers-reduced-motion:reduce){.t4-canvas{display:none}}

/* ---- Hero-Labor v5: "Streichen Sie Ihre ..." ----
   Kein Scroll-Effekt, kein Parallax. Das Video laeuft leise, die Schrift traegt den Bildschirm.
   Der Strich zieht von links nach rechts durch das Wort, danach wird es blasser. */
.h5{position:relative;margin-top:-96px;min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:#0b0a09;isolation:isolate}
.h5-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.h5::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(92deg,rgba(0,0,0,.76) 0,rgba(0,0,0,.62) 38%,rgba(0,0,0,.38) 66%,rgba(0,0,0,.12) 100%),linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 48%,rgba(0,0,0,.58) 100%);pointer-events:none}
.h5-copy{position:relative;z-index:2;display:grid;justify-items:start;gap:26px;padding:180px 0 15vh}
.h5-h1{margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45);display:grid;gap:.02em;font-size:clamp(40px,9vw,146px);line-height:.9;letter-spacing:-.035em;font-weight:700}
.h5-zeile1{display:block}
.h5-roll{display:block;position:relative;overflow:hidden}
.h5-wort{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(48%);transition:opacity .34s ease,transform .38s cubic-bezier(.22,.61,.36,1)}
.h5-wort.ist-da{opacity:1;transform:translateY(0)}
.h5-wort.geht-raus{opacity:0;transform:translateY(-40%)}
.h5-wort em{font-style:normal;position:relative;display:inline-block;color:#fff;transition:color .5s ease,opacity .5s ease}
.h5-wort.ist-gestrichen em{color:rgba(255,255,255,.62)}
/* Der Strich: ein Balken in Markenorange, faehrt in 460 ms von links nach rechts durch */
.h5-strich{position:absolute;left:-.02em;top:40%;height:.085em;width:calc(100% + .04em);background:var(--ga-brand,#f2630c);border-radius:.05em;transform:scaleX(0);transform-origin:0 50%;transition:transform .46s cubic-bezier(.22,.61,.36,1)}
.h5-wort.ist-gestrichen .h5-strich{transform:scaleX(1)}
.h5-sub{margin:0;color:#fff;font-size:clamp(17px,1.7vw,25px);line-height:1.42;max-width:36ch;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.h5-tueren{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0}
.h5-tueren .button{padding:15px 30px;min-height:54px;font-size:17px;font-weight:600}
.h5-soft{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.h5 .hl-proof{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.h5-credit{position:absolute;left:0;right:0;bottom:14px;z-index:2;margin:0;text-align:center;font-size:12px;color:rgba(255,255,255,.55)}
@media(max-width:900px){
 /* Am Handy scheitert jeder Ausschnitt: aus einem 16:9-Video bleibt im Hochformat nur ein
    Viertel der Breite uebrig, und darin steht entweder nur Wald oder nur die schwarze Front des
    Geraets. Deshalb kein Vollbild, sondern ein Videoband oben und die Schrift darunter auf
    Dunkel. Damit ist die Szene lesbar UND die Ueberschrift steht auf ruhigem Grund. */
 .h5{margin-top:-72px;display:block;min-height:0;background:#0b0a09}
 .h5-video{position:relative;height:46svh;min-height:280px;object-position:62% 58%}
 .h5::before{inset:0 0 auto 0;height:46svh;min-height:280px;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 62%,rgba(0,0,0,.9) 100%)}
 .h5-copy{padding:26px 0 44px;gap:18px}
 .h5-h1{font-size:clamp(36px,11.5vw,72px)}
 .h5-sub{max-width:none}
 .h5-credit{position:static;text-align:left;padding:0 0 26px}
 .h5 .hl-proof{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
}
@media(prefers-reduced-motion:reduce){.h5-wort,.h5-strich,.h5-wort em{transition:none}.h5-video{display:none}}

/* ---- Startseiten-Hero: EIN Standbild (08.09. Ebenen raus, 09.09. Video raus) ----
   Bastian: "diese ueberlappenden Bilder hast du so trashy gemacht" und "Video ist eh nicht so geil".
   Copy: "Streichen Sie Ihre" fest, darunter das Wort, das wechselt; das Bild antwortet (s.u.). */
.v20-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.v20-roll{display:inline-block;position:relative;vertical-align:bottom}
/* Nur Lage und Umbruch. KEIN eigenes transform und KEINE eigene Deckkraft mehr: GSAP rechnet ein
   vorhandenes translateY dazu, dadurch landeten die wartenden Woerter bei 150 statt 105 Prozent
   und zwei standen gleichzeitig im Kasten. Bewegung gehoert allein GSAP. */
.v20-wort{position:absolute;left:0;top:0;white-space:nowrap}
.v20-wort em{font-style:normal;display:inline-block;color:var(--ga-brand,#f2630c)}
.v20-desc br{display:block}
@media(prefers-reduced-motion:reduce){.v20-wort,.v20-wort em{transition:none}}


/* ---- 08.09.2026, Bastian: Strich raus, Portraits in die Hero-Zeile, schwarzer Schleier weg ----
   Der Schleier lag als breiter Verlauf ueber dem halben Bild und machte es duester. Jetzt nur noch
   ein schmaler Fuss unter dem Textblock plus ein Schattenrand an der Schrift selbst. Damit bleibt
   das Bild hell und der Text trotzdem ueber 4,5:1. */
.v20-proof .portrait-stack{display:inline-flex;vertical-align:middle;margin-right:12px}
.v20-proof .portrait-stack img{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.9);margin-left:-10px}
.v20-proof .portrait-stack img:first-child{margin-left:0}


/* Ohne den grossen Schleier braucht die Schrift einen eigenen Halt. Ein weicher dunkler Rand am
   Text kostet kein Bildlicht, anders als eine Flaeche ueber dem halben Foto. */

/* Auf dunklem Grund braucht das Markenorange etwas mehr Helligkeit, sonst faellt grosse Schrift
   unter die geforderten 3:1. Der Knopf behaelt das normale Markenorange. */
.v20-wort em{color:hsl(24 94% 60%)}

/* Am Handy stapelte sich die Vertrauenszeile in vier Zeilen, weil Sterne, Portraits, Text und
   Logos einzeln umbrachen. Jetzt eine Reihe, die als Ganzes umbricht. */
@media(max-width:900px){
 .v20-proof{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px 12px;width:100%;text-align:left}
 .v20-proof .portrait-stack{margin-right:0}
 .v20-proof .portrait-stack img{width:32px;height:32px}
 .v20-proof .v20-marken{display:inline-flex;align-items:center;gap:8px;flex-basis:100%;justify-content:flex-start}
}

/* Die Kinder der Vertrauenszeile erbten am Handy einen automatischen Aussenabstand und rutschten
   dadurch in die Mitte, obwohl der Kasten links steht. Hier hart auf links festgenagelt. */
@media(max-width:900px){
 .v20-proof>*{margin-left:0;margin-right:0;flex:0 0 auto}
}


/* ---- 08.09.2026, Bastian: "sie ihre in einer linie", "bisschen runtersetzen, oben abgeschnitten" ----
   Zeile 1 darf nicht mehr umbrechen, der Block sitzt tiefer, damit die Kopfleiste nichts abschneidet.
   Die Groesse haengt jetzt an der Breite (vw), damit "Streichen Sie Ihre" bei jeder Fenstergroesse
   in eine Zeile passt, statt bei einer festen Groesse zu brechen. */
.v20-hero h1{font-size:clamp(34px,6.05vw,96px);line-height:.98;letter-spacing:-.03em;max-width:none}
.v20-hero h1 .v20-line>span{white-space:nowrap}
.v20-copy{padding-bottom:16vh;padding-top:150px;align-content:center}
.v20-roll{white-space:nowrap}
/* Die Vertrauenszeile lief am Handy als Spalte, weil sie flex-direction column geerbt hatte.
   Nachgemessen: richtung column, ausrichtung center. Deshalb hier ausdruecklich als Reihe. */
.v20-proof{flex-direction:row;align-items:center}
@media(max-width:900px){
 .v20-hero h1{font-size:clamp(28px,7.6vw,44px)}
 .v20-copy{padding-top:96px;padding-bottom:10vh}
 .v20-proof{flex-direction:row!important;align-items:center;justify-content:flex-start}
}

/* Der Platzhalter spannt die Wechselzeile auf, ist aber nie zu sehen. Ohne ihn haette der Kasten
   weder Breite noch Hoehe, weil alle Woerter absolut liegen. */
.v20-platzhalter{visibility:hidden;white-space:nowrap;display:inline-block}

/* Die zweite Zeile traegt das Wechselwort. Sie braucht unten Platz fuer die Unterlaengen, und der
   negative Aussenabstand der Masken-Zeile muss dort weg, sonst rutscht die Unterzeile hinein. */
.v20-hero h1 .v20-line:last-child{padding-bottom:.16em;margin-bottom:0;margin-top:-.14em}
.v20-hero h1{margin-bottom:6px}
.v20-copy{gap:24px 48px}
@media(max-width:900px){.v20-copy{gap:18px 24px}}

/* Am Handy passt die Vertrauenszeile mit Portraits nicht in eine Zeile und bricht dreifach um.
   Die Portraits stehen direkt darunter im Vertrauensband, im Hero sind sie dort verzichtbar. */
@media(max-width:900px){
 .v20-proof .portrait-stack{display:none}
 .v20-proof{gap:6px 10px}
 .v20-proof .v20-marken{flex-basis:auto}
}

/* Bastian: "Hintergrund noch ein bisschen zu schwarz". Abdunklung weiter zurueckgenommen, dafuer
   traegt die Schrift mehr Eigenschatten. Bildlegende unten rechts ist entfernt. */
.v20-marken img{height:22px;width:auto;display:block}
.v20-marken{display:inline-flex;align-items:center}
@media(max-width:900px){.v20-marken img{height:19px}}

/* 09.09.2026, Bastian: "mach diesen schwarzen Shading komplett raus". Es liegt jetzt KEINE
   Flaeche mehr ueber dem Bild. Die Lesbarkeit traegt allein die Schrift, ueber einen mehrlagigen
   Schatten, der eng an den Buchstaben klebt statt das Foto abzudunkeln. */
.v20-pin::before,.v20-pin::after{content:none!important}

/* Der Wortwechsel rollt: ein Wort schiebt das andere heraus. Damit gibt es weder ein leeres
   Zwischenbild (das ruckelte) noch zwei uebereinanderliegende Woerter (das verwischte).
   Die Maske ist bewusst tiefer als die Zeile und der Ueberschuss per negativem Aussenabstand
   wieder herausgerechnet, sonst schnitte sie das g in "Energiekosten" ab. */
.v20-roll{overflow:hidden;padding-bottom:0;margin-bottom:0;line-height:1.18}
.v20-wort{overflow:visible;line-height:1.18}
/* Die Maske ist jetzt exakt EINE Zeile hoch, damit nie zwei Woerter gleichzeitig darin stehen.
   Platz fuer die Unterlaengen kommt aus dem groesseren Zeilenabstand, nicht aus Innenabstand.
   Der Zuwachs wird oben wieder abgezogen, damit die zwei Ueberschriftszeilen eng bleiben. */
.v20-hero h1 .v20-line:last-child{margin-top:-.24em;padding-bottom:0}

/* 09.09.2026, Bastian: "den Shading-Effekt, den schwarzen, komplett raus". Damit ist JEDES dunkle
   Element weg: keine Flaeche ueber dem Bild und kein Schein um die Buchstaben mehr. Die Schrift
   steht blank auf dem Foto. Gemessene Folge steht in decisions.md. */
.v20-hero h1,.v20-desc,.v20-proof,.v20-credit{text-shadow:none}


/* ---- 09.09.2026: das Bild antwortet auf das Wort ----
   Bastian: "kein Scrolleffekt, laeuft automatisch, startet wieder von neu" und "mach es geiler".
   Der Kopf bleibt, nur das Kostenwort wechselt. Synchron dazu markiert eine Beschriftung im Foto
   die Antwort: Stromkosten -> Photovoltaik auf dem Dach, Heizkosten -> Waermepumpe an der Wand,
   Energiekosten -> das ganze System. Bauzeichnungs-Logik: Punkt am Geraet, feine Linie, Schild.
   Die Marker-Ebene bildet object-fit:cover exakt nach, damit Prozent-Positionen bildtreu bleiben. */
.v20-marker-ebene{position:absolute;inset:0;z-index:2;pointer-events:none}
.v20-marker{position:absolute;width:0;height:0;opacity:0;visibility:hidden}
.v20-marker.ist-aus{display:none}
.v20-marker i{position:absolute;z-index:1;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--ga-brand,#ee671f);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 10px rgba(0,0,0,.35)}
.v20-marker svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
.v20-marker path{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}   /* Fuehrungslinie: gerade vom Punkt zum Schild */
.v20-schild{position:absolute;left:var(--dx);top:var(--dy);transform:translate(0,-50%);will-change:transform,opacity;white-space:nowrap;font-size:14px;font-weight:600;line-height:1;color:#111;background:rgba(255,255,255,.96);padding:8px 11px;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.22);opacity:0}
.v20-schild.links{transform:translate(-100%,-50%)}
.v20-schild.mitte{transform:translate(-50%,-50%)}
@media(max-width:900px){.v20-marker-ebene{display:none}}   /* Handy: der Text deckt das Bild, ein Schild haette keinen freien Platz */
@media(prefers-reduced-motion:reduce){.v20-marker-ebene{display:none}.v20-wort:not(:nth-of-type(3)){display:none}}