/* EWORA v4 — Planung als Erlebnis. Keine externen Ressourcen. */
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-wght.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF; --paper-2:#ECECEE; /* v33: Hintergrund überall weiß (vorher Beige #F4EEE9 / #EAE1D8) */ --ink:#1F2126; --mute:#5A5E66; --faint:#8A8E96;
  --line:rgba(31,33,38,.12); --line-2:rgba(31,33,38,.26);
  --accent:#D4552F; --accent-deep:#B8451F; --accent-soft:rgba(212,85,47,.16); --peach:#E89A74; --slate:#7C97AB;
  --char:#17191D; --char-2:#1F2126; --on-dark:#F4EEE9; --on-dark-mute:#A3A6AD; --dline:rgba(244,238,233,.14);
  --warm:#F3D9A4;
  --gutter:clamp(20px,4.2vw,72px); --max:1480px;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --brand:"Montserrat",var(--sans);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --h1:clamp(46px,7.1vw,112px); --h2:clamp(34px,4.8vw,72px); --h3:clamp(22px,2vw,28px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px;overflow-anchor:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas,picture{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.dark :focus-visible{outline-color:var(--accent)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.dark .eyebrow{color:var(--on-dark-mute)}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--mute);max-width:36em}
.dark .lead{color:var(--on-dark-mute)}
.h2{font-size:var(--h2);line-height:1.02;letter-spacing:-.032em;font-weight:560}
.muted{color:var(--mute)}
.dark .muted{color:var(--on-dark-mute)}
.note{font-size:13px;line-height:1.55;color:var(--mute)}
.dark .note{color:var(--on-dark-mute)}

/* ---------- Buttons ---------- */
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 26px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;font-size:15px;font-weight:520;letter-spacing:.005em;border-radius:2px;cursor:pointer;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease-out),background .25s,color .25s,border-color .25s}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{background:#262826}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:#fff}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--ease-out)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.link svg{width:16px;height:16px}

/* ---------- Navigation ---------- */
/* Glas-Bubble: schwebende Pille aus mattem Glas mit Lichtrand, der aktive Punkt sitzt in einer kleinen Glasblase */
.nav{position:fixed;inset:14px var(--gutter) auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;height:62px;padding:0 9px 0 22px;border-radius:999px;max-width:calc(var(--max) - 2*var(--gutter));margin:0 auto;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.28));border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 -10px 18px -12px rgba(31,33,38,.12),0 14px 34px -16px rgba(31,33,38,.32),0 2px 6px rgba(31,33,38,.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
  transition:background .45s var(--ease),border-color .45s,color .45s,box-shadow .45s}
.nav::before{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 18% -30%,rgba(255,255,255,.75),transparent 55%),radial-gradient(60% 80% at 92% 130%,rgba(255,255,255,.35),transparent 60%)}
.nav.is-scrolled{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.36))}
.nav.on-dark{color:var(--on-dark);background:linear-gradient(180deg,rgba(70,73,80,.55),rgba(23,25,29,.42));border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),0 14px 34px -16px rgba(0,0,0,.6)}
.nav.on-dark::before{background:radial-gradient(120% 90% at 18% -30%,rgba(255,255,255,.16),transparent 55%)}
.nav-bubble{position:absolute;left:0;top:50%;height:40px;width:0;border-radius:999px;pointer-events:none;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,inset 0 -6px 10px -8px rgba(31,33,38,.18),0 4px 12px -4px rgba(31,33,38,.25);
  transition:transform .55s cubic-bezier(.3,1.35,.5,1),width .55s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.nav-bubble.is-on{opacity:1}
.nav.on-dark .nav-bubble{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -4px rgba(0,0,0,.5)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:26px;height:26px}
.brand b{font-weight:640;letter-spacing:.2em;font-size:15px}
.nav .brand .m-ink{stroke:currentColor}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);list-style:none;margin:0;padding:0}
.nav-links a{font-size:14px;text-decoration:none;opacity:.78;transition:opacity .2s;position:relative;padding:6px 0}
.nav-links a:hover,.nav-links a.is-active{opacity:1}
.nav .btn{height:44px;border-radius:999px;padding:0 22px}
.nav.on-dark .btn{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.menu-btn{display:none;background:none;border:0;padding:10px;cursor:pointer;align-items:center;gap:10px;font-size:14px}
.menu-btn i{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:transform .3s}
.menu-btn i::after{content:"";position:absolute;left:0;top:6px;width:22px;height:1px;background:currentColor;transition:transform .3s,top .3s}
.menu-btn[aria-expanded="true"] i{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:0;transform:rotate(-90deg)}
@media (max-width:1020px){
  .menu-btn{display:inline-flex}
  .nav-links{position:fixed;inset:86px var(--gutter) auto;flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 22px;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 18px 40px -18px rgba(31,33,38,.35);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--ease-out),visibility .3s}
  .nav-links.is-open{opacity:1;visibility:visible;transform:none}
  .nav-links a{display:block;font-size:20px;padding:14px 0;border-bottom:1px solid var(--line);opacity:1}
  .nav-links a.is-active::after{display:none}
  .nav-links li:last-child a{border:0}
  .nav > .btn{display:none}
}
@media (min-width:1021px){.nav-links .only-mobile{display:none}}
/* v36: Menü-Knopf rechts statt in der Mitte (das unsichtbare <nav> zählte als drittes Element mit) */
@media (max-width:1020px){
  .nav > nav{position:absolute;left:0;top:0}
  .menu-btn{margin-left:auto}
}
/* v36 Handy: Leiste oben, links und rechts bündig, ohne Schatten; nur unten der gläserne, runde Rand */
@media (max-width:860px){
  .nav{inset:0 0 auto;max-width:none;margin:0;height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 var(--gutter);
    border:0;border-bottom:1px solid rgba(255,255,255,.75);border-radius:0 0 22px 22px;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.35),inset 0 -10px 18px -14px rgba(31,33,38,.1)}
  .nav-links{top:calc(72px + env(safe-area-inset-top))}
}

/* ---------- Scroll scenes ---------- */
.scene{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js [data-draw]{stroke-dasharray:1 1;stroke-dashoffset:1}
.fade{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}
.fade.is-in{opacity:1;transform:none}
.no-js .fade{opacity:1;transform:none}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.2s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- 01 Hero + Verstehen: Filmanfang (Skizze) ---------- */
.story{height:830vh} /* v30: Scrollweg vor allem dort, wo sich am Haus etwas tut (siehe FILM_KEYS) */
.story .stage{background:#fff}
/* Film im Breitformat 21:9 (v14): gleiche Hausgröße wie vorher (Bildbreite ×1,369), das Haus steht bei 64,8 % der Bildbreite; links füllt echte Landschaft.
   Links reicht das Bild bis unter den Text und läuft nur am Rand weich aus; ein leichter Schimmer hinter dem Text hält ihn lesbar. */
@media (min-width:861px){
  .frame-box,.frame-over{--W:calc(max(80vw,140svh)*1.369);--H:calc(var(--W)/2.359);position:absolute;aspect-ratio:2944/1248;width:var(--W);left:min(0px,max(calc(100vw - var(--W)),calc(64vw - var(--W)*.648)));top:calc(100svh - var(--H))}
  .frame-box{-webkit-mask:linear-gradient(180deg,transparent 0,#000 18%);mask:linear-gradient(180deg,transparent 0,#000 18%)}
}
.story .shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 62% at 20% 52%,rgba(255,255,255,.8),rgba(255,255,255,.45) 55%,rgba(255,255,255,0) 100%)}
.frame-box .poster,.frame-box canvas{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 11px/26px var(--mono);text-align:center;opacity:0;transform:scale(.5);transition:opacity .5s var(--ease),transform .7s var(--ease-out),background .4s}
.pin.is-in{opacity:1;transform:none}
.pin.is-now{background:var(--accent)}
.pin.is-now::after{content:"";position:absolute;inset:-8px;border:1px solid var(--accent);border-radius:50%;animation:ping 1.8s var(--ease) infinite}
.pin i{font-style:normal}
/* Erklärung über dem Haus: Glas-Etikett oberhalb des Dachs über dem aktiven Punkt */
.frame-over{z-index:2;pointer-events:none}
.pin .tip{position:absolute;left:50%;top:auto;bottom:calc(13px + (var(--y) - 7) * var(--H) / 100);width:max-content;max-width:340px;padding:11px 14px 12px;border-radius:14px;font:400 13.5px/1.42 var(--sans);text-align:left;color:var(--ink);background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 12px 30px -12px rgba(31,33,38,.35);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);opacity:0;transform:translate(-50%,8px);transition:opacity .45s var(--ease),transform .6s var(--ease-out)}
.pin .tip b{display:block;margin-bottom:3px;font:600 10.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep)}
.pin.is-now .tip{opacity:1;transform:translate(-50%,0)}
/* Punkt nahe am rechten Rand (Außengerät): Etikett endet über dem Punkt statt mittig */
.pin.r .tip{left:auto;right:-14px;transform:translateY(8px)}
.pin.r.is-now .tip{transform:none}
@media (max-width:860px){.pin .tip{display:none}}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.story-copy{position:absolute;left:var(--gutter);top:0;bottom:0;width:min(40%,600px);z-index:3}
/* Die Überschrift muss in die schmale Spalte passen, sonst schneidet .ln den letzten Buchstaben ab */
@media (min-width:861px){.story .h1{font-size:min(var(--h1),4.6vw,68px)}}
.hero-text,.ch-text{position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);transition:opacity .7s var(--ease),transform .9s var(--ease-out)}
.h1{font-size:var(--h1);line-height:1;letter-spacing:-.04em;font-weight:560}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h1 .ln > span{display:block;transform:translateY(105%);transition:transform 1.25s var(--ease-out)}
.h1 .ln + .ln > span{transition-delay:.12s}
.is-loaded .h1 .ln > span,.no-js .h1 .ln > span{transform:none}
.h1 .soft{color:var(--mute)}
.hero-text .lead{max-width:30em;margin:28px 0 30px;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .6s,transform 1.2s var(--ease-out) .6s}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .8s,transform 1.2s var(--ease-out) .8s}
.is-loaded .hero-text .lead,.is-loaded .hero-cta,.no-js .hero-text .lead,.no-js .hero-cta{opacity:1;transform:none}
.story.is-past-hero .hero-text{opacity:0;transform:translateY(calc(-50% - 26px));pointer-events:none}
.ch-text{opacity:0;transform:translateY(calc(-50% + 24px));pointer-events:none}
.story.is-past-hero .ch-text{opacity:1;transform:translateY(-50%);pointer-events:auto}
.ch-text .h2{font-size:clamp(28px,2.8vw,44px);margin:20px 0 18px}
.ch-text .lead{font-size:16px;max-width:30em}
.legend{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.legend li{display:grid;grid-template-columns:34px 1fr;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--faint);transition:color .4s}
.legend li .n{font-family:var(--mono);font-size:11px;padding-top:2px}
.legend li b{font-weight:560}
.legend li em{font-style:normal;margin-left:10px}
.legend li.is-in{color:var(--ink)}
.legend li.is-in em{color:var(--mute)}
.legend li.is-now .n{color:var(--accent)}
.no-js .legend li{color:var(--ink)}
.readout{display:none}
.hero-scroll{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--mute)} /* v35: Hinweis statt Button und Link am Anfang */
.hero-scroll i{flex:none;width:1px;height:34px;background:var(--line-2);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
/* v36: Desktop wieder mit Button (ohne Textlink daneben) und dem Hinweis unten links; der Hinweistext steht nur auf dem Handy */
@media (min-width:861px){.hero-cta .hero-scroll{display:none}}
@media (max-width:860px){.hero-cta .btn{display:none}}
.scroll-cue{position:absolute;left:var(--gutter);bottom:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:12px;transition:opacity .5s}
.scroll-cue i{width:1px;height:34px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 2.2s var(--ease) infinite}
.story.is-past-hero .scroll-cue,.story.is-final .scroll-cue{opacity:0}
@media (max-width:860px){.scroll-cue{display:none}}
/* Handy (v27): Text oben, der Film als großes Band unten am Bildschirm, das Haus steht in der Mitte.
   Das Band ist höchstens halb so hoch wie der Bildschirm, damit der Text darüber immer Platz hat. */
@media (max-width:860px){
  .story{height:690vh}
  .frame-box,.frame-over{--W:min(260vw,118svh);--H:calc(var(--W)/2.359);position:absolute;aspect-ratio:2944/1248;width:var(--W);left:calc(50vw - var(--W)*.648);top:calc(100svh - var(--H))}
  .frame-box{-webkit-mask:linear-gradient(180deg,transparent 0,#000 16%);mask:linear-gradient(180deg,transparent 0,#000 16%)}
  .story .shade{display:none}
  .story-copy{width:auto;right:var(--gutter);top:100px;bottom:auto}
  .hero-text,.ch-text{top:0;transform:none}
  .story.is-past-hero .hero-text{transform:translateY(-20px)}
  .ch-text{transform:translateY(20px)}
  .story.is-past-hero .ch-text{transform:none}
  .story .h1{font-size:min(9.6vw,5.4svh,44px)}
  .hero-text .lead{display:none}
  .hero-cta{margin-top:22px;gap:14px 24px}
  .ch-text .h2{font-size:min(7vw,3.9svh,34px);margin:12px 0 0}
  .ch-text .lead,.legend{display:none}
  .pin{width:24px;height:24px;margin:-12px 0 0 -12px;line-height:24px;font-size:11px}
  .readout{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
  .readout .n{font-family:var(--mono);font-size:11px;color:var(--accent)}
  .readout b{font-weight:600}
  .readout em{grid-column:2;font-style:normal;color:var(--mute)}
}
@media (max-width:860px) and (max-height:700px){
  .readout{margin-top:12px;padding-top:10px;font-size:14px}
}

/* ---------- Dark band ---------- */
.dark{background:var(--char);color:var(--on-dark)}
/* v34: Die früher dunklen Abschnitte 02/03 sind jetzt weiß wie der Rest; die Farben darin kommen aus diesen Variablen */
.problem.dark,.process.dark{--char:#FFFFFF;--on-dark:var(--ink);--on-dark-mute:var(--mute);--dline:var(--line)}

/* 02 Problem */
.problem{height:265vh} /* v35: etwas langsamer (vorher 220vh) */
.problem .stage{display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
.problem .inner{max-width:var(--max);margin:0 auto;width:100%}
.problem .h2{max-width:14em;margin:26px 0 clamp(36px,6vh,72px);color:var(--on-dark)}
.stmts{list-style:none;margin:0;padding:0;border-top:1px solid var(--dline)}
.stmts li{font-size:clamp(28px,4.2vw,64px);letter-spacing:-.03em;line-height:1.08;padding:clamp(12px,1.8vh,22px) 0;border-bottom:1px solid var(--dline);display:flex;align-items:baseline;gap:clamp(16px,3vw,48px);opacity:.14;transition:opacity .8s var(--ease),color .8s}
.stmts li .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--on-dark-mute);width:2.4em;flex:none}
.stmts li.is-in{opacity:.42}
.stmts li.is-now{opacity:1}
.problem .therefore{margin-top:clamp(28px,5vh,56px);font-size:clamp(20px,2vw,30px);letter-spacing:-.015em;color:var(--accent);display:flex;align-items:center;gap:18px}
.problem .therefore::before{content:"";width:48px;height:1px;background:currentColor}
.no-js .stmts li{opacity:1}

/* 03 Prozess / Blaupause */
.process{height:265vh} /* v35: etwas langsamer (vorher 220vh) */
.process .stage{display:grid;grid-template-columns:minmax(300px,.9fr) 1.3fr;gap:clamp(24px,4vw,72px);align-items:center;padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.process .h2{font-size:clamp(30px,3.6vw,54px);margin:22px 0 clamp(26px,5vh,48px)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:18px 0 18px 64px;border-top:1px solid var(--dline);color:var(--faint);transition:color .5s}
.steps li:last-child{border-bottom:1px solid var(--dline)}
.steps li .n{position:absolute;left:0;top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.steps li h3{font-size:clamp(19px,1.7vw,24px);font-weight:540;letter-spacing:-.012em;color:inherit}
.steps li p{max-height:0;overflow:hidden;opacity:0;font-size:15px;line-height:1.55;transition:max-height .7s var(--ease),opacity .6s,margin .6s;margin-top:0}
.steps li .bar{position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--accent)}
.steps li.is-now{color:var(--on-dark)}
.steps li.is-now p{max-height:6em;opacity:1;margin-top:8px;color:var(--on-dark-mute)}
.steps li.is-done{color:var(--mute)}
.steps li.is-done .bar{width:100%}
.no-js .steps li p{max-height:none;opacity:1}
@media (max-width:860px){
  .process{height:240vh}
  .process .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding-top:88px;gap:8px}
  .process .intro .h2{display:none}
  .steps li{padding:12px 0 12px 44px}
  .steps li .n{top:14px}
  .steps li:not(.is-now) h3{font-size:16px}
}

.bp{position:relative;aspect-ratio:16/9;width:100%;--mx:0;--my:0;-webkit-mask:radial-gradient(120% 120% at 50% 50%,#000 62%,transparent 80%);mask:radial-gradient(120% 120% at 50% 50%,#000 62%,transparent 80%)}
/* 03 · Blaupause aus v4 in den v5-Farben: jeder Schritt zeichnet etwas dazu */
.bp{-webkit-mask:none;mask:none;border-radius:6px;overflow:hidden}
.va{position:absolute;inset:0}
.va .bp-grid{position:absolute;inset:-6%;background-image:linear-gradient(rgba(31,33,38,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,33,38,.06) 1px,transparent 1px);background-size:24px 24px;transform:translate(calc(var(--mx)*-8px),calc(var(--my)*-8px));transition:transform .6s var(--ease-out);-webkit-mask:radial-gradient(closest-side,#000 60%,transparent);mask:radial-gradient(closest-side,#000 60%,transparent)}
.va svg{position:absolute;left:4%;top:3%;width:92%;height:86%;overflow:visible;transform:translate(calc(var(--mx)*4px),calc(var(--my)*4px));transition:transform .6s var(--ease-out)}
.va .house path,.va .house rect{vector-effect:non-scaling-stroke;fill:none;stroke:#3A3D44;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.va .house .h-dim,.va .house .h-cons,.va .house .h-hatch{stroke:rgba(31,33,38,.32);stroke-width:.9}
.va .house .h-loss{stroke:var(--peach);stroke-width:1.2;stroke-dasharray:4 5;opacity:0;transition:opacity .6s}
.va .house .h-pipe,.va .house .h-ufh{stroke:var(--accent);stroke-width:1.9}
.va .house .h-rad{transition:fill 1.4s var(--ease),stroke 1s}
.va .house .h-light{stroke:none;fill:var(--warm);opacity:0;transition:opacity 1.6s var(--ease)}
.va .house .h-cross{stroke:var(--accent);stroke-width:1.4}
.va .g-survey,.va .g-heat,.va .g-cand,.va .g-new,.va .g-old{transition:opacity .7s var(--ease)}
.va .g-survey,.va .g-cand,.va .g-new,.va .g-heat{opacity:0}
.bp[data-step="1"] .va .g-survey{opacity:1}
.bp[data-step="2"] .va .h-loss{opacity:1;animation:flow 1.2s linear infinite}
.bp[data-step="2"] .va .g-heat{opacity:1}
.bp[data-step="2"] .va .h-rad{stroke:var(--peach)}
.bp[data-step="3"] .va .g-cand{opacity:1}
.bp[data-step="3"] .va .c1,.bp[data-step="3"] .va .c2{opacity:.25;transition:opacity .6s .9s}
.bp[data-step="4"] .va .g-new{opacity:1}
.bp[data-step="4"] .va .g-old{opacity:.28}
.bp[data-step="4"] .va .h-rad{fill:rgba(212,85,47,.32);stroke:var(--accent)}
.bp[data-step="4"] .va .h-light{opacity:.55}
@keyframes flow{to{stroke-dashoffset:-18}}
.bp-read{position:absolute;left:8%;bottom:4%;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-mute);display:flex;gap:14px}
.bp-read b{color:var(--accent);font-weight:500}
@media (min-width:861px){.process .stage{grid-template-columns:minmax(300px,.8fr) 1.7fr}}
@media (max-width:860px){.process .bp{order:-1;width:100%}.bp-read{display:none}}

/* 04 Unabhängigkeit */
.indep{height:280vh}
.indep .stage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,96px);align-items:center;padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.big{font-size:clamp(40px,6.2vw,100px);line-height:.98;letter-spacing:-.045em;font-weight:560}
.big .ln{display:block;transition:opacity .8s var(--ease),transform 1s var(--ease-out)}
.big .ln.b{color:var(--mute)}
.js .big .ln{opacity:.1}
.big .ln.is-in{opacity:1}
.indep .lead{margin-top:clamp(24px,4vh,44px);max-width:32em}
.path{position:relative}
.path ol{list-style:none;margin:0;padding:0;position:relative}
.path li{position:relative;display:flex;align-items:center;gap:22px;padding:clamp(12px,2.2vh,22px) 0;color:var(--faint);transition:color .6s}
.path li .dot{width:13px;height:13px;border-radius:50%;border:1.3px solid currentColor;background:var(--paper);flex:none;position:relative;z-index:1;transition:background .5s,border-color .5s}
.path li b{font-size:clamp(19px,1.8vw,26px);font-weight:540;letter-spacing:-.015em}
.path li small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.path li.is-in{color:var(--ink)}
.path li.is-in small{color:var(--mute)}
.path li.is-in .dot{background:var(--ink)}
.path li.final.is-in .dot{background:var(--accent);border-color:var(--accent-deep)}
.path .rail{position:absolute;left:6px;top:28px;bottom:28px;width:1.3px;overflow:hidden}
/* Linie wächst von oben nach unten (skaliert statt gestrichelt, damit sie nie in Stücken erscheint) */
.path .rail .prog{position:absolute;inset:0;background:var(--ink);transform-origin:top center;transform:scaleY(0)}
.lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:4px clamp(8px,1.2vw,18px);margin-top:clamp(16px,3vh,32px);align-items:end}
.lineup img{width:100%;height:auto;mix-blend-mode:multiply;border-bottom:2px solid transparent;padding-bottom:6px;transition:opacity .7s var(--ease),transform .9s var(--ease-out),filter .7s,border-color .5s}
.lineup img.is-out{opacity:.14;filter:grayscale(1);transform:translateY(6px)}
.lineup img.is-pick{border-color:var(--accent);transform:translateY(-6px)}
.lineup-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:12px}
@media (max-width:860px){
  .indep{height:240vh}
  .indep .stage{grid-template-columns:1fr;align-content:center;gap:18px;padding-top:70px}
  .big{font-size:clamp(34px,9.4vw,52px)}
  .indep .lead{display:none}
  .path li{padding:8px 0}
  .path li b{font-size:18px}
  /* v27: die sechs Geräte in einer Reihe, damit auch kleine Handys alles zeigen */
  .indep .stage{padding-top:84px}
  .lineup{grid-template-columns:repeat(6,1fr);gap:4px 6px;margin-top:6px}
}
@media (max-width:860px) and (max-height:700px){.big{font-size:min(9.4vw,34px)}.path li{padding:6px 0}.path li b{font-size:17px}}

/* 05 Vergleich */
.compare{height:280vh}
.compare .stage{display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.cmp-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:clamp(20px,4vh,44px)}
.cmp-say{font-size:clamp(30px,4.2vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:560}
.cmp-say span{display:block;transition:opacity .7s var(--ease),transform .9s var(--ease-out)}
.js .cmp-say span{opacity:.1}
.cmp-say span.is-in{opacity:1}
.cmp-say span.pick{color:var(--accent-deep)}
.cmp{display:grid;grid-template-columns:minmax(150px,1fr) repeat(3,minmax(0,1.25fr));border-top:1px solid var(--line-2)}
.cmp > *{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);min-width:0}
.cmp .sys{padding-top:18px;padding-bottom:16px;transition:opacity .8s var(--ease)}
.cmp .sys img{width:min(170px,100%);height:auto;margin-bottom:8px;mix-blend-mode:multiply}
.cmp .sys b{display:block;font-size:17px;font-weight:560}
.cmp .sys small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cmp .rowlab{font-size:14.5px;color:var(--mute);display:flex;align-items:center}
.cmp .cell{display:flex;flex-direction:column;justify-content:center;gap:6px;transition:opacity .8s var(--ease)}
.meter{position:relative;height:6px;background:var(--paper-2)}
.meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width 1.1s var(--ease-out)}
.meter .req{position:absolute;top:-5px;bottom:-5px;width:1.3px;background:var(--accent-deep);opacity:0;transition:opacity .5s}
.cell small{font-size:12px;color:var(--mute);min-height:1.2em;line-height:1.2}
.cell.bad small{color:var(--ink)}
.cell.bad .meter i{background:repeating-linear-gradient(90deg,var(--faint) 0 5px,transparent 5px 8px)}
.cmp.is-req .meter .req{opacity:1}
.cmp .sys.is-out,.cmp .cell.is-out{opacity:.16}
.cmp .sys.is-pick b{color:var(--accent-deep)}
.cmp .sys.is-pick img{filter:drop-shadow(0 10px 18px rgba(212,85,47,.18))}
.cmp .cell.is-pick .meter i{background:var(--accent-deep)}
.cmp-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:14px}
.cmp-foot .legend{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mute)}
.cmp-foot .legend i{width:1.3px;height:14px;background:var(--accent-deep)}
@media (max-width:860px){
  .compare{height:240vh}
  .compare .stage{padding-top:74px;justify-content:flex-start}
  .cmp-head{grid-template-columns:1fr;margin-bottom:10px}
  .cmp-say{font-size:clamp(24px,7vw,34px)}
  .cmp{grid-template-columns:repeat(3,1fr)}
  .cmp .corner{display:none}
  .cmp .rowlab{grid-column:1/-1;padding:8px 0 0;border:0;font-size:12px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .cmp > *{padding:6px 10px 8px 0}
  .cmp .sys img{width:84px;margin-bottom:2px}
  .cmp .sys b{font-size:14px}
  .cmp .sys small{display:none}
  .cell small{font-size:11px}
  .cmp-foot .note{font-size:11.5px}
}
@media (max-width:860px) and (max-height:760px){.cmp .sys img{display:none}.cell small{display:none}}

/* 06 Mensch */
.person{position:relative;min-height:100vh;overflow:hidden;background:var(--char);color:#fff}
.person .media{position:absolute;inset:0;clip-path:inset(var(--clip,8%) var(--clip,8%) round 2px);will-change:clip-path}
.person picture,.person img{width:100%;height:112%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform}
.person .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,29,0) 35%,rgba(23,25,29,.72) 100%)}
.person .copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,10vh,110px);max-width:var(--max);margin:0 auto}
.person .h2{max-width:13em;color:#fff}
.person .lead{color:rgba(255,255,255,.82);margin-top:22px;max-width:30em}
@media (max-width:860px){.person{min-height:100svh}.person .h2{font-size:clamp(30px,8.4vw,44px)}}


/* 08 Wirtschaftlichkeit */
.section{padding:clamp(96px,16vh,180px) 0}
.econ .head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,96px);align-items:end;margin-bottom:clamp(40px,7vh,80px)}
.econ .head .h2{margin-top:22px;max-width:12em}
.calc{border-top:1px solid var(--line-2)}
.calc-row{display:grid;grid-template-columns:minmax(160px,1.1fr) 1fr 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.calc-row.headrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:16px 0}
.calc-row .k{color:var(--mute);font-size:15px}
.calc-row .k small{display:block;font-size:12px;color:var(--faint)}
.calc-row .v{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.025em;font-weight:520;font-variant-numeric:tabular-nums}
.calc-row .v small{font-size:13px;letter-spacing:0;color:var(--mute);font-weight:400;margin-left:6px}
.calc-row .v.hp{color:var(--accent-deep)}
.calc-row .v.text{font-size:clamp(16px,1.3vw,19px);letter-spacing:0;font-weight:450;color:var(--ink)}
.calc-row.total .v{font-size:clamp(28px,3.2vw,48px)}
.slider{display:grid;grid-template-columns:minmax(160px,1.1fr) 2fr;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.slider label{font-size:15px;color:var(--mute)}
.slider .ctl{display:flex;align-items:center;gap:22px}
.slider output{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.025em;font-weight:520;min-width:6.4em;font-variant-numeric:tabular-nums}
.slider output small{font-size:13px;font-weight:400;color:var(--mute);letter-spacing:0;margin-left:6px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink)}
input[type=range]::-moz-range-track{height:1px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1.4px solid var(--ink);margin-top:-9px;transition:transform .2s}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.4px solid var(--ink)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.bars{display:grid;grid-template-columns:minmax(160px,1.1fr) 2fr;gap:24px;padding:28px 0 8px}
.bars .k{font-size:15px;color:var(--mute)}
.bars .b{display:grid;gap:14px}
.bars .bar{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;font-size:13.5px}
.bars .bar span{color:var(--mute)}
.bars .bar i{display:block;height:10px;background:var(--ink);width:0;transition:width 1.2s var(--ease-out)}
.bars .bar.hp i{background:var(--accent)}
.econ-foot{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,96px);margin-top:40px;align-items:start}
.econ-foot .note{max-width:48em}
@media (max-width:860px){
  .econ .head,.econ-foot{grid-template-columns:1fr}
  .calc-row{grid-template-columns:1fr 1fr;gap:4px 18px}
  .calc-row .k{grid-column:1/-1}
  .calc-row.headrow .k{display:none}
  .slider,.bars{grid-template-columns:1fr;gap:10px}
  .bars .bar{grid-template-columns:96px 1fr}
}

/* 09 Förderung */
.fund{border-top:1px solid var(--line)}
.fund .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,6vw,110px);align-items:center}
.pct{font-size:clamp(88px,15vw,240px);line-height:.86;letter-spacing:-.06em;font-weight:520;display:flex;align-items:flex-start;gap:.06em;font-variant-numeric:tabular-nums}
.pct .pre{font-size:.16em;letter-spacing:-.01em;font-weight:500;margin-top:.5em;color:var(--mute)}
.pct .unit{font-size:.42em;margin-top:.12em;color:var(--accent-deep)}
.fund .qual{margin-top:22px;max-width:34em;font-size:14.5px;color:var(--mute);border-left:1px solid var(--accent);padding-left:16px}
.fund .h2{margin:22px 0 22px;max-width:11em}
.fund figure{margin:clamp(40px,7vh,80px) 0 0;position:relative;overflow:hidden;aspect-ratio:21/8}
.fund figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease-out)}
.fund figure.is-in img{transform:none}
.fund figure{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-out)}
.fund figure.is-in{clip-path:inset(0 0 0 0)}
.no-js .fund figure{clip-path:none}
@media (max-width:860px){.fund .grid{grid-template-columns:1fr}.fund figure{aspect-ratio:4/3}}

/* 10 Projektverlauf */
.journey{height:320vh;border-top:1px solid var(--line)}
.journey .stage{display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);max-width:var(--max);margin:0 auto}
.journey .h2{margin:22px 0 clamp(40px,8vh,90px);max-width:12em}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.tl li{position:relative;padding:34px 18px 0 0;color:var(--faint);transition:color .5s}
.tl li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;border:1.3px solid currentColor;background:var(--paper);transition:background .4s}
.tl li .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.tl li h3{font-size:clamp(18px,1.6vw,23px);font-weight:540;letter-spacing:-.015em;margin-top:6px}
.tl li p{font-size:14.5px;line-height:1.55;color:var(--mute);margin-top:10px;max-height:0;opacity:0;overflow:hidden;transition:max-height .8s var(--ease),opacity .6s}
.tl li.is-in{color:var(--ink)}
.tl li.is-in::before{background:var(--ink)}
.tl li.is-now::before{background:var(--accent);border-color:var(--accent-deep)}
.tl li.is-now p,.tl li.is-in p{max-height:9em;opacity:1}
.tl li.is-in:not(.is-now) p{opacity:.55}
.no-js .tl li p{max-height:none;opacity:1}
@media (max-width:860px){
  .journey{height:300vh}
  .journey .stage{justify-content:flex-start;padding-top:96px}
  .journey .h2{margin:14px 0 28px;font-size:clamp(28px,8vw,40px)}
  .tl{grid-template-columns:1fr}
  .tl li{padding:0 0 14px 34px}
  .tl li h3{margin-top:0;font-size:18px}
  .tl li .n{display:none}
  .tl li.is-in:not(.is-now) p{max-height:0;opacity:0}
}

/* 11 FAQ */
.faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,110px)}
.faq .h2{margin-top:22px}
.faq .side p{margin-top:24px}
.qa{border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:20px;align-items:center;padding:24px 0}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:clamp(18px,1.55vw,22px);font-weight:500;letter-spacing:-.012em;transition:color .2s}
.qa summary:hover h3{color:var(--mute)}
.qa summary i{position:relative;width:16px;height:16px;justify-self:end}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;top:7.5px;width:16px;height:1.3px;background:var(--ink);transition:transform .45s var(--ease-out)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa .a{padding:0 44px 26px 0;color:var(--mute);max-width:44em}
.qa details[open] .a{animation:open .5s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr}.qa .a{padding-right:0}}

/* 12 Abschluss */
.final{border-top:1px solid var(--line);overflow:hidden}
.final .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:end}
.final .h2{font-size:clamp(38px,5.6vw,88px);line-height:1;letter-spacing:-.04em;margin-top:22px;max-width:11em}
.final .lead{margin-top:22px}
.final-media{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:2px}
.final-media.team{aspect-ratio:1600/1194;margin:0;border-radius:18px;box-shadow:0 30px 60px -30px rgba(31,33,38,.4)}
.final-media picture,.final-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.form-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,90px);margin-top:clamp(40px,7vh,72px)}
.mode{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:2px;margin-bottom:26px}
.mode label{position:relative;cursor:pointer}
.mode input{position:absolute;opacity:0;inset:0;cursor:pointer}
.mode span{display:block;padding:11px 18px;font-size:14px;transition:background .25s,color .25s}
.mode input:checked + span{background:var(--ink);color:var(--paper)}
.mode input:focus-visible + span{outline:2px solid var(--accent-deep);outline-offset:2px}
.contact-alt{margin-top:20px;font-size:15px;color:var(--mute)}
.contact-alt a{color:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.field{position:relative;border-bottom:1px solid var(--line-2);padding-top:22px;margin-bottom:18px;transition:border-color .25s}
.field:focus-within{border-color:var(--ink)}
.field label{position:absolute;left:0;top:26px;font-size:16px;color:var(--mute);transition:transform .3s var(--ease-out),font-size .3s,color .3s;transform-origin:0 0;pointer-events:none}
.field input{width:100%;border:0;background:transparent;padding:6px 0 10px;font-size:17px;outline:0}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-24px);font-size:12px;color:var(--ink)}
.field.full{grid-column:1/-1}
.consent{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;font-size:13.5px;color:var(--mute);margin:10px 0 24px;cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.form-status{font-size:14.5px;min-height:1.4em}
.form-status.ok{color:var(--accent-deep)}
.form-status.err{color:#9A4A33}
@media (max-width:860px){
  .final .top,.form-wrap{grid-template-columns:1fr}
    .form{grid-template-columns:1fr}
}

/* Footer */
.foot{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px;color:var(--mute)}
.foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
.foot .brand{color:var(--ink)}
.foot .claim{margin-top:14px;max-width:24em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:14px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13px}

/* Rechtsseiten */
.legal-page{padding:150px 0 110px}
.legal-page .h2{margin:22px 0 48px}
.legal-page .prose{max-width:46em}
.legal-page .prose h2{font-size:21px;font-weight:560;letter-spacing:-.01em;margin:40px 0 12px}
.legal-page .prose p{margin:0 0 12px;color:#2b2b29}
.legal-page .prose a{color:var(--ink)}

/* ---------- Feinschliff ---------- */
:root{--h1:clamp(42px,5vw,92px)}
.brand b{font-family:var(--brand);font-weight:600;letter-spacing:.24em}
.foot .tagline{font-family:var(--brand);font-size:10.5px;letter-spacing:.26em;color:var(--mute);margin-top:10px}
.final .top{align-items:center}
.path-list{position:relative}
.path .rail{top:30px;height:calc(100% - 60px)}
.compare .stage{padding-top:84px}
.cmp-say{font-size:clamp(28px,3.4vw,54px)}
.tl-wrap{position:relative}
.tl-wrap .track{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.tl-wrap .track i{position:absolute;left:0;top:0;height:1px;background:var(--ink);width:calc(var(--p,0)*100%)}
.reveal-clip img{transform:scale(1.08);transition:transform 1.8s var(--ease-out)}
.reveal-clip.is-in img{transform:none}
@media (max-width:860px){
  :root{--h1:clamp(38px,10.5vw,56px)}
  .tl-wrap .track{left:6px;right:auto;top:6px;bottom:20px;width:1px;height:auto}
  .tl-wrap .track i{width:1px;height:calc(var(--p,0)*100%)}
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .h1 .ln > span,.hero-below .lead,.hero-cta,.fade,.reveal{transform:none!important;opacity:1!important}
  .person .media{clip-path:none}
  .person img{transform:none}
}
.legal-page .prose address{font-style:normal;margin:0 0 12px}
.lineup img,.cmp .sys img{-webkit-mask:radial-gradient(closest-side,#000 72%,transparent);mask:radial-gradient(closest-side,#000 72%,transparent)}

/* Rechner: Hebel zwischen Gas (kWh) und Öl (Liter) */
.fuel{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin:6px 0 18px;padding:4px;border:1px solid rgba(255,255,255,.85);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.3));box-shadow:inset 0 1px 0 #fff,0 8px 22px -14px rgba(31,33,38,.35)}
.fuel legend{position:absolute;left:0;bottom:calc(100% + 8px);padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.fuel label{position:relative;z-index:1;cursor:pointer}
.fuel input{position:absolute;opacity:0;pointer-events:none}
.fuel label span{display:block;min-width:112px;padding:10px 20px;text-align:center;border-radius:999px;font-weight:540;font-size:15px;color:var(--mute);transition:color .3s}
.fuel label span small{font-family:var(--mono);font-size:11px;margin-left:4px;opacity:.75}
.fuel input:checked + span{color:#fff}
.fuel input:focus-visible + span{outline:2px solid var(--accent-deep);outline-offset:2px}
.fuel i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -6px rgba(31,33,38,.6);transition:transform .45s cubic-bezier(.3,1.35,.5,1)}
.fuel:has(input[value="oil"]:checked) i{transform:translateX(100%)}
.fuel.is-oil i{transform:translateX(100%)}
.calc .fuel{margin-top:34px}
/* Rechner: berechneter Wärmebedarf direkt unter dem Verbrauchsregler */
.calc-row.demand{margin:12px 0 6px;padding:20px 18px;border:0;border-radius:14px;background:linear-gradient(90deg,var(--accent-soft),rgba(212,85,47,.04))}
.calc-row.demand .v:not(.text){font-size:clamp(28px,3.2vw,46px);letter-spacing:-.03em;color:var(--accent-deep)}
.calc-row.demand .v.text{font-size:14px;color:var(--mute)}
.calc-row.demand .onsite{display:block;margin-top:6px;font-weight:560;color:var(--ink)}
/* Keine sichtbare Scrollleiste; Scrollen per Rad, Trackpad und Tastatur bleibt */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
/* Große Bildschirme (ab 1260 px): Skizze weit rechts, breite Textspalte, jeder Satz der Überschrift auf einer Zeile; links liegt der Text auf dem Bild */
@media (min-width:1260px){
  .frame-box,.frame-over{left:min(0px,max(calc(100vw - var(--W)),calc(77vw - var(--W)*.648)))}
  .story-copy{width:min(54vw,820px)}
  .story .h1{font-size:min(var(--h1),3.75vw,57px)}
  .story .h1 .ln > span{white-space:nowrap}
  .story .shade{background:radial-gradient(ellipse 34% 58% at 17% 60%,rgba(255,255,255,.82),rgba(255,255,255,.45) 60%,rgba(255,255,255,0) 100%)}
  /* v14: Die Skizze trägt links am Haus die Höhenmaße 9,40 m und 6,20 m. Die Überschrift steht deshalb oben über dem Dach,
     und die Spalte mit den drei Punkten ist schmal, damit die Maße frei bleiben. */
  .hero-text{top:84px;bottom:clamp(110px,15vh,170px);transform:none;display:flex;flex-direction:column}
  .hero-text .h1{margin-top:auto}
  .hero-text .lead{margin:auto 0 24px}
  .story.is-past-hero .hero-text{transform:translateY(-26px)}
  .ch-text{right:auto;width:min(560px,39vw);top:60%;margin-left:-26px;padding:24px 26px 18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.82));border:1px solid rgba(31,33,38,.07);box-shadow:inset 0 1px 0 #fff,0 18px 40px -22px rgba(31,33,38,.35)}
}

/* Ende der Szene: Bild dunkler, Punkte und Punkte-Text blenden aus, der Text vom Anfang kommt an derselben Stelle wieder (weiß) */
.story .frame-over,.story .shade,.story-copy{transition:opacity .6s var(--ease)}
.story .frame-over.is-out,.story .shade.is-out{opacity:0;pointer-events:none}
.story .dim-end{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease);background:linear-gradient(180deg,rgba(24,20,16,.12) 0%,rgba(24,20,16,.3) 50%,rgba(24,20,16,.62) 100%)}
.story .dim-end.is-in{opacity:1}
/* Start ohne Maße (v18) */
.frame-box .clean{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s var(--ease)}
.frame-box .clean.is-out{opacity:0}
/* Schluss: Anfangstext wieder da, weiß auf dem abgedunkelten Bild */
.story.is-final .hero-text{opacity:1;transform:none;pointer-events:auto}
.story.is-final .ch-text{opacity:0;pointer-events:none}
.story.is-final .hero-text .h1{color:#fff}
.story.is-final .hero-text .h1 .soft{color:rgba(255,255,255,.78)}
.story.is-final .hero-text .lead{color:rgba(255,255,255,.86)}
.story.is-final .hero-text .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.story .hero-text .h1,.story .hero-text .lead,.story .hero-text .hero-scroll{transition:color .6s var(--ease)}
/* Handy: Der Text steht über dem Bild auf Weiß, also bleibt er dunkel; abgedunkelt wird nur das Filmband */
@media (max-width:860px){
  .story .dim-end{inset:auto 0 0;height:calc(min(260vw,118svh)/2.359);background:linear-gradient(180deg,rgba(24,20,16,0) 0%,rgba(24,20,16,.18) 40%,rgba(24,20,16,.42) 100%)}
  .story.is-final .hero-text .h1{color:var(--ink)}
  .story.is-final .hero-text .h1 .soft{color:var(--mute)}
  .story.is-final .hero-scroll{color:var(--mute)}
  .story.is-final .hero-scroll i{background:var(--line-2)}
  .story.is-final .hero-scroll i::after{background:var(--ink)}
}
/* 06: Text läuft gestaffelt ein, sobald der Abschnitt ins Bild kommt */
.person .copy .reveal:nth-child(2){transition-delay:.12s}
.person .copy .reveal:nth-child(3){transition-delay:.24s}


/* Start (v23): Das Logo zeichnet sich wie mit Bleistift, die Balken schieben sich hinein, der Leitspruch folgt Wort für Wort.
   Danach blendet der Vorhang aus und gibt die Skizze frei; die Überschrift läuft erst dann ein. */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#fff;transition:opacity .75s var(--ease),visibility 0s .75s}
.no-js .boot,.no-intro .boot{display:none}
.boot.is-done{opacity:0;visibility:hidden}
.boot-mark{display:grid;justify-items:center;transition:transform 1s var(--ease-out)}
.boot.is-done .boot-mark{transform:translateY(-10px) scale(.97)}
.boot svg{width:clamp(78px,8vw,116px);height:auto;overflow:visible}
.boot .i-roof{stroke-dasharray:1;stroke-dashoffset:1;animation:i-draw .75s cubic-bezier(.45,.05,.3,1) .1s forwards}
.boot .i-bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:i-grow .5s var(--ease-out) forwards}
.boot .i-bar:nth-of-type(1){animation-delay:.58s}
.boot .i-bar:nth-of-type(2){animation-delay:.72s}
.boot .i-bar:nth-of-type(3){animation-delay:.86s}
.boot-word{margin:22px 0 0;font:600 clamp(20px,2.1vw,28px)/1 var(--brand);letter-spacing:.3em;padding-left:.3em;color:var(--ink);opacity:0;transform:translateY(8px);animation:i-in .6s var(--ease-out) .95s forwards}
.boot-tag{margin:14px 0 0;font:500 clamp(10px,.9vw,12px)/1 var(--brand);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.boot-tag span{display:inline-block;opacity:0;transform:translateY(6px);animation:i-in .5s var(--ease-out) forwards}
.boot-tag span:nth-child(1){animation-delay:1.1s}
.boot-tag span:nth-child(2){animation-delay:1.25s}
.boot-tag span:nth-child(3){animation-delay:1.4s}
@keyframes i-draw{to{stroke-dashoffset:0}}
@keyframes i-grow{to{transform:scaleX(1)}}
@keyframes i-in{to{opacity:1;transform:none}}
/* Überschrift, Text und Buttons laufen erst nach dem Start ein */
.intro-on .h1 .ln > span{transform:translateY(105%)}
.intro-on .hero-text .lead,.intro-on .hero-cta{opacity:0;transform:translateY(14px)}
/* Bilder und Film nicht per Ziehen oder Rechtsklick speichern (hält nur Gelegenheitsnutzer ab) */
img,canvas,picture{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* v33: Die kleine Zeile über den Überschriften (01 · Verstehen …) ist weg; die Überschrift beginnt oben bündig */
.h2:first-child{margin-top:0 !important}