/* =====================================================================
   VanderBerg · Entwurf 2026-10-09 · LMMeier
   Grundsatz: Ohne JavaScript und mit «weniger Bewegung» ist alles
   sichtbar und lesbar. Bewegung kommt nur über html.bewegt dazu.
   Keine externen Schriften, keine CDNs.
   ===================================================================== */

@font-face{font-family:'Schibsted Grotesk';font-weight:400 800;font-style:normal;font-display:swap;src:url("../fonts/schibsted-grotesk-var-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-weight:400 800;font-style:normal;font-display:swap;src:url("../fonts/schibsted-grotesk-var-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/instrument-serif-latin.woff2") format('woff2')}
/* Runde 16: metrisch angepasste Ersatzschriften, damit der Schriftwechsel nichts verschiebt (CLS). Werte in Chrome gemessen. */
@font-face{font-family:'IS Ersatz';src:local('Georgia');size-adjust:76.3%;ascent-override:129.7%;descent-override:40.6%;line-gap-override:0%}
@font-face{font-family:'SG Ersatz';src:local('Arial');size-adjust:104.2%;ascent-override:94%;descent-override:25%;line-gap-override:0%}

:root{
  /* Flächen */
  --nacht:#141618; --nacht-2:#1C1F22; --nacht-3:#25292D; --linie:#33383D; --linie-hell:rgba(255,255,255,.18);
  --hell:#F2F3F4; --hell-linie:#CDD2D7;
  /* Text (alle Paare AA-geprüft, siehe REVIEW-RUNDEN.md) */
  --text:#E8EBED; --still:#A9B0B7; --leise:#9AA2A9; --weiss:#fff;
  --tinte:#15181B; --tinte-still:#4A5158; --tinte-leise:#5E656C;
  /* Akzente */
  --gruen:#7BD49A; --gruen-tief:#2F7A49; --gruen-tief-hover:#276B3F; --gruen-grund:#1E4A2E; --stahl:#B8BEC4;
  /* Schrift */
  --schrift:'Schibsted Grotesk','SG Ersatz',system-ui,-apple-system,'Segoe UI',sans-serif;
  --anzeige:'Instrument Serif','IS Ersatz',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  --t-klein:.8125rem; --t-mini:.75rem; --t-text:1.0625rem; --t-lead:clamp(1.0625rem,1.5vw,1.25rem);
  --t-h1:clamp(2.6rem,7.4vw,5.6rem); --t-h2:clamp(2rem,4.6vw,3.4rem); --t-h3:clamp(1.6rem,3vw,2.3rem);
  /* Raum */
  --rand:clamp(1rem,4vw,2.5rem); --breite:1180px; --teil:clamp(4.5rem,9vw,8.5rem);
  --radius:14px; --radius-gross:18px;
  --kurve:cubic-bezier(.2,.7,.2,1);
  --kopf-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 12px)}
html:not(.lenis){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:not(.lenis){scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--nacht);color:var(--text);font:400 var(--t-text)/1.65 var(--schrift);-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--gruen);text-underline-offset:3px}
a:hover{color:var(--weiss)}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--anzeige);font-weight:400;line-height:1.06;letter-spacing:.003em;text-wrap:balance}
em{font-style:italic;color:var(--gruen)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gruen);outline-offset:3px;border-radius:4px}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gruen-tief);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.sprung:focus{top:12px;color:#fff}

.mass{width:min(100% - 2*var(--rand),var(--breite));margin-inline:auto}
.teil{padding-block:var(--teil)}
.flaeche-2{background:var(--nacht-2)}
.trenn{border-top:1px solid var(--linie)}

/* ---------- Kleinteile ---------- */
.marke-zeile{display:block;font-size:var(--t-klein);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.strich{display:block;width:48px;height:2px;background:var(--gruen-tief);margin-bottom:18px;transform-origin:left}
.titel{font-size:var(--t-h2);margin-top:10px}
.lead{color:var(--still);font-size:var(--t-lead);max-width:38rem;text-wrap:pretty;margin-top:14px}
.still{color:var(--still)}
.kopfzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.5rem,4vw,2.5rem);align-items:end;margin-bottom:clamp(2rem,5vw,3.5rem)}
.kopfzeile .lead{margin-top:0}

.taste{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:10px;background:var(--gruen-tief);color:#fff;font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:background .25s,transform .25s var(--kurve)}
.taste:hover{background:var(--gruen-tief-hover);color:#fff}
.taste:active{transform:translateY(1px)}
.taste svg{width:16px;height:16px;transition:transform .3s var(--kurve)}
.taste:hover svg{transform:translateX(3px)}
.taste--leer{background:transparent;border:1px solid var(--stahl);color:var(--text)}
.taste--leer:hover{background:rgba(255,255,255,.06);border-color:#fff;color:#fff}
.taste--klein{min-height:44px;padding:9px 16px;font-size:.9375rem;white-space:nowrap}
.tasten{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--kopf-h);display:flex;align-items:center;background:linear-gradient(rgba(20,22,24,.9),rgba(20,22,24,0));transition:background .35s,box-shadow .35s}
.kopf.ist-unten,.kopf.ist-fest{background:rgba(20,22,24,.96);box-shadow:0 1px 0 var(--linie)}
.kopf.ist-fest{position:sticky;top:0}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.wortmarke{display:inline-flex;align-items:baseline;gap:9px;color:#fff;text-decoration:none;white-space:nowrap}
.wortmarke b{font-family:var(--anzeige);font-weight:400;font-size:1.65rem;letter-spacing:.01em}
.wortmarke small{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--still);font-weight:600}
.wortmarke:hover{color:#fff}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:.9375rem;font-weight:500}
.nav a:not(.taste){color:var(--text);text-decoration:none;position:relative;padding-block:6px}
.nav a:not(.taste)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--kurve)}
.nav a:not(.taste):hover::after{transform:scaleX(1)}
.kopf-fortschritt{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gruen);transform-origin:left;transform:scaleX(var(--seite,0))}
.menue-knopf{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--linie);background:transparent;color:var(--text);font-weight:600;font-size:.9375rem;cursor:pointer}
.menue-knopf i{position:relative;width:16px;height:2px;background:currentColor;display:block}
.menue-knopf i::before,.menue-knopf i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menue-knopf i::before{top:-5px}.menue-knopf i::after{top:5px}
@media (max-width:899px){
  .nav .nur-breit{display:none}
  .menue-knopf{display:inline-flex}
  .nav .taste{display:none}
  .wortmarke small{display:none}
}
.menue{position:fixed;inset:0;z-index:80;background:rgba(12,13,14,.97);display:grid;align-content:center;gap:6px;padding:var(--rand);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.menue.ist-offen{visibility:visible;opacity:1}
.menue a{font-family:var(--anzeige);font-size:2.25rem;color:#fff;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--linie)}
.menue .taste{font-family:var(--schrift);font-size:1rem;margin-top:22px;border:0}
.menue-zu{position:absolute;top:14px;right:var(--rand);min-height:44px;min-width:44px;border-radius:10px;border:1px solid var(--linie);background:transparent;color:var(--text);font-size:1.4rem;cursor:pointer}

/* ---------- Mobile Schnellkontakt ---------- */
.schnell{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(20,22,24,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linie);transition:transform .35s var(--kurve)}
.schnell a{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;border-radius:10px;font-weight:600;font-size:.9375rem;text-decoration:none}
.schnell a:first-child{border:1px solid var(--stahl);color:var(--text)}
.schnell a:last-child{background:var(--gruen-tief);color:#fff}
.schnell svg{width:18px;height:18px}
.schnell.ist-weg{transform:translateY(110%)}
@media (max-width:899px){.schnell{display:grid}body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}

/* =====================================================================
   1 · HERO — Plan → Stahl → Zaun (gepinnt)
   ===================================================================== */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;align-items:end;padding:calc(var(--kopf-h) + 48px) 0 clamp(96px,14vh,128px)}
.hero-bild{position:absolute;inset:0 0 auto 0;height:100%;max-height:100svh;z-index:-3}/* nie höher als der Bildschirm: Bild bleibt scharf */
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:38% 70%}
.hero-schleier{position:absolute;inset:0;z-index:-2;background:linear-gradient(to top,rgba(20,22,24,.97) 0%,rgba(20,22,24,.8) 38%,rgba(20,22,24,.28) 72%,rgba(20,22,24,.5) 100%)}
.raster{position:absolute;inset:-10% 0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:16px 16px,16px 16px,80px 80px,80px 80px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 60% 45%,#000 15%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 60% 45%,#000 15%,transparent 80%)}
.hero .raster{z-index:-1}
.hero-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
html:not(.bewegt) .hero-canvas{display:none}
.hero-nacht{position:absolute;inset:0;z-index:-1;background:rgba(14,16,18,.72);opacity:0;pointer-events:none}
.hero-plan{position:absolute;z-index:0;right:3vw;top:calc(var(--kopf-h) + 4vh);width:min(54vw,860px);height:auto;max-height:52vh;overflow:visible;pointer-events:none;opacity:.55}
.hero-plan g.linien{fill:none;stroke:var(--gruen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-plan .bemassung{fill:var(--still);font:500 13px/1 var(--mono);letter-spacing:.08em}
.hero-plan .bemassung path{fill:none;stroke:var(--still);stroke-width:1}
.hero-plan .blatt{fill:var(--text);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.hero-text{position:relative;z-index:2;max-width:760px;display:grid;gap:22px}
.hero h1{font-size:var(--t-h1);line-height:1.04;color:#fff}
.hero h1 .zeile{display:block;overflow:hidden;padding:.16em 0 .06em;margin-top:-.16em}/* Platz für Ü-Punkte */
.hero h1 .zeile>span{display:block}
.hero-lead{font-size:var(--t-lead);max-width:560px;color:var(--text);text-wrap:pretty}
.kennzahlen{list-style:none;margin:clamp(10px,3vh,26px) 0 0;padding:20px 0 0;display:flex;flex-wrap:wrap;gap:18px 40px;border-top:1px solid var(--linie-hell)}
.kennzahlen li{min-width:120px;padding-top:12px;border-top:1px solid var(--gruen)}
.kennzahlen b{display:block;font-family:var(--anzeige);font-weight:400;font-size:1.9rem;line-height:1;color:#fff}
.kennzahlen span{font-size:.875rem;color:var(--still)}
.hero-schritte{position:relative;z-index:2;list-style:none;margin:0;padding:0}
.hero-schritt .marke-zeile{margin-bottom:6px}
.hero-schritt h2{font-size:clamp(1.9rem,4vw,3.2rem);color:#fff}
.hero-schritt p{margin-top:10px;max-width:30rem;color:var(--text)}
.massband{position:absolute;left:var(--rand);right:var(--rand);bottom:34px;z-index:3;height:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 10px) 0 100%/100% 7px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 50px) 0 100%/100% 14px no-repeat}
.massband i{position:absolute;top:-8px;left:calc(var(--p,0) * 100%);width:2px;height:28px;background:var(--gruen);translate:-50% 0}
.massband span{position:absolute;top:-26px;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--still)}
.scroll-hinweis{position:absolute;right:var(--rand);bottom:64px;z-index:3;display:flex;align-items:center;gap:10px;color:var(--still);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.scroll-hinweis i{display:block;width:1px;height:42px;background:linear-gradient(var(--gruen),transparent);animation:fliessen 2.2s var(--kurve) infinite}
@keyframes fliessen{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.scroll-hinweis i{animation:none}}

/* Statisch (ohne JS / weniger Bewegung): Schritte als Reihe unter dem Hero-Text */
html:not(.bewegt) .hero{align-items:end}
html:not(.bewegt) .hero-inhalt{display:grid;gap:clamp(40px,7vh,72px)}
html:not(.bewegt) .hero-schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px;padding-top:24px;border-top:1px solid var(--linie-hell)}
html:not(.bewegt) .hero-schritt h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
html:not(.bewegt) .massband,html:not(.bewegt) .scroll-hinweis{display:none}
html:not(.bewegt) .hero-bild{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
/* Bewegt: Schritte liegen übereinander am unteren Rand */
html.bewegt .hero{min-height:100vh;min-height:100svh}
html.bewegt .hero-inhalt{position:relative;min-height:calc(100svh - var(--kopf-h) - 48px - clamp(96px,14vh,128px));display:grid;align-items:end}
html.bewegt .hero-inhalt>*{grid-area:1/1}
html.bewegt .hero-schritt{position:absolute;left:0;right:0;bottom:0;max-width:min(34rem,100%);opacity:0;visibility:hidden}
html.bewegt .hero-schritte{position:absolute;inset:0;pointer-events:none}

@media (max-width:899px){
  .hero-plan{right:4vw;left:4vw;width:auto;top:calc(var(--kopf-h) + 2vh);max-height:34vh}
  .kennzahlen{gap:14px 26px}
  .kennzahlen li{min-width:96px}
  .kennzahlen b{font-size:1.6rem}
  .scroll-hinweis{display:none}
  .massband{bottom:calc(92px + env(safe-area-inset-bottom))}
  .hero{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  .kennzahlen{flex-wrap:wrap;gap:18px}
  .kennzahlen li{min-width:min-content;flex:1}
  .kennzahlen span{font-size:.75rem;line-height:1.3;display:block}
  .einehand-buehne{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  html.bewegt .hero-inhalt{min-height:calc(100svh - var(--kopf-h) - 48px - 150px)}
}
@media (max-height:720px) and (min-width:900px){.kennzahlen{display:none}}

/* =====================================================================
   2 · EINSTIEG — zwei Wege
   ===================================================================== */
.einstieg{position:relative;z-index:5;margin-top:-28px}
/* Runde 17: Mit Hero-Pin ragen die Kacheln nicht in den ersten Bildschirm. Sonst rechnet der Browser beim Neuberechnen der Pins (Laden, Grössenwechsel) eine Layoutverschiebung (CLS). */
html.bewegt .einstieg{margin-top:0;padding-top:20px}
.einstieg .mass{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.weg-kachel{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:var(--nacht-3);border:1px solid var(--linie);border-radius:16px;padding:22px 24px;color:var(--text);text-decoration:none;box-shadow:0 24px 60px rgba(0,0,0,.45);transition:border-color .3s,transform .4s var(--kurve)}
.weg-kachel:hover{border-color:var(--gruen);color:var(--text);transform:translateY(-3px)}
.weg-kachel b{display:block;margin-top:5px;font-family:var(--anzeige);font-weight:400;font-size:1.55rem;line-height:1.15;color:#fff}
.weg-kachel span.klein{display:block;margin-top:5px;font-size:.9375rem;color:var(--still)}
.weg-kachel .pfeil{width:44px;height:44px;border-radius:12px;background:var(--gruen-grund);display:grid;place-items:center;color:var(--gruen);transition:transform .4s var(--kurve)}
.weg-kachel:hover .pfeil{transform:translateX(4px)}
.weg-kachel .pfeil svg{width:18px;height:18px}

/* =====================================================================
   3 · LEISTUNGEN — Bild-Enthüllungen (Bau: von unten, Zaun: Schiebetor)
   ===================================================================== */
.leistungen .mass{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.leistungen .klebend{position:sticky;top:calc(var(--kopf-h) + 36px)}
@media (max-width:899px){.leistungen .mass{grid-template-columns:1fr}.leistungen .klebend{position:static}}
.bereich{padding:clamp(24px,4vw,44px) 0;border-top:1px solid var(--linie)}
.bereich:first-child{border-top:0;padding-top:0}
.bildrahmen{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--nacht-3)}
.bildrahmen img{width:100%;height:100%;object-fit:cover}
.bereich .bildrahmen{aspect-ratio:16/10;margin-bottom:26px}
.bereich h3{font-size:var(--t-h3);margin:6px 0 12px;color:#fff}
.bereich p.text{color:var(--still);max-width:36rem;text-wrap:pretty}
.punkte{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:9px 14px}
.punkte li{display:flex;gap:12px;align-items:baseline;font-size:.98rem}
.punkte li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--gruen-tief);transform:rotate(45deg) translateY(-1px);flex:0 0 auto}
.preis-hinweis{display:inline-block;margin-top:18px;font-size:.875rem;color:var(--text);border:1px solid var(--linie);border-radius:999px;padding:6px 12px}

/* =====================================================================
   4 · EINE HAND — Bauprogramm + Zaun (gepinnt)
   ===================================================================== */
.einehand{position:relative;background:var(--nacht)}
.einehand-buehne{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--kopf-h) + 28px) 0 96px}
.einehand .raster{z-index:0}
.einehand-foto{position:absolute;inset:0;z-index:0;opacity:0}
.einehand-foto img{width:100%;height:100%;object-fit:cover;object-position:38% 70%}
.einehand-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,24,.95) 0%,rgba(20,22,24,.55) 45%,rgba(20,22,24,.4) 100%)}
.einehand-kopf{position:relative;z-index:2}
.einehand-kopf h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-top:6px}
.einehand-plan{position:relative;z-index:1;align-self:center;justify-self:end;width:min(58vw,900px);max-height:46vh;overflow:visible}
.einehand-plan .linien{fill:none;stroke:var(--gruen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.einehand-plan text{fill:var(--text);font:500 13px/1 var(--mono);letter-spacing:.08em}
.einehand-saetze{position:relative;z-index:2;list-style:none;margin:0 auto;padding:0}
.einehand-satz h3{font-size:clamp(1.8rem,3.8vw,3rem);color:#fff;margin:6px 0 10px}
.einehand-satz p{max-width:30rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips span{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.22);background:rgba(20,22,24,.6);border-radius:999px;padding:7px 12px;font-size:.8125rem}
.chips span::before{content:"";width:6px;height:6px;background:var(--gruen);border-radius:1px;transform:rotate(45deg)}
html:not(.bewegt) .einehand-saetze{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px}
html:not(.bewegt) .einehand-buehne{min-height:0;padding-block:var(--teil)}
html:not(.bewegt) .einehand-plan{margin-block:32px}
html.bewegt .einehand-saetze{min-height:230px}
html.bewegt .einehand-satz{position:absolute;left:0;bottom:0;max-width:min(34rem,100%);opacity:0;visibility:hidden}
@media (max-width:899px){.einehand-plan{width:100%;justify-self:stretch;max-height:32vh}html.bewegt .einehand-saetze{min-height:260px}}
/* Runde 16: mobil kollidierten die Chips mit dem Massband; in der gepinnten Szene genügen Titel + Satz */
@media (max-width:599px){html.bewegt .einehand-satz .chips{display:none}html.bewegt .einehand-saetze{min-height:220px}}
/* Runde 16: Die Grundregel oben überschrieb den mobilen Abstand (Reihenfolge), Text lag auf dem Massband */
@media (max-width:899px){html.bewegt .einehand-buehne{padding-bottom:calc(150px + env(safe-area-inset-bottom))}}

/* =====================================================================
   5 · MATERIAL — Bild-Parallaxe im Rahmen + Messlinie
   ===================================================================== */
.lagen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.lage{margin:0;display:grid;gap:14px;align-content:start}
.lage .bildrahmen{aspect-ratio:4/3;border:1px solid var(--linie)}
.lage .bildrahmen img{height:118%;margin-top:-9%}
.lage figcaption{display:grid;gap:6px}
.lage .messlinie{display:block;height:1px;background:var(--gruen);transform-origin:left;margin-bottom:6px}
.lage h3{font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.15;color:#fff}
.lage p{color:var(--still);font-size:.96rem;text-wrap:pretty}
.bild-hinweis{margin-top:18px;font-size:var(--t-mini);color:var(--leise)}

/* =====================================================================
   6 · SIEBEN ZUSAGEN — heller Bruch, Zähler (gepinnt ab 900 px)
   ===================================================================== */
.zusagen{background:var(--hell);color:var(--tinte)}
.zusagen .marke-zeile{color:var(--gruen-tief)}
.zusagen-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);align-items:center}
.zaehler{display:flex;align-items:baseline;gap:14px;margin-top:10px}
.zaehler b{font-family:var(--anzeige);font-weight:400;font-size:clamp(4.5rem,10vw,8.75rem);line-height:.9;letter-spacing:-.02em;color:var(--gruen-tief);font-variant-numeric:tabular-nums}
.zaehler span{font:500 .75rem/1 var(--mono);letter-spacing:.14em;color:var(--tinte-still)}
.zusagen-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:9px}
.zusagen-liste li{display:flex;gap:12px;align-items:center;font-size:.9rem;color:var(--tinte-leise);transition:color .4s}
.zusagen-liste li i{width:18px;height:2px;background:var(--hell-linie);transition:background .4s,width .4s}
.zusagen-liste li.ist-an{color:var(--tinte)}
.zusagen-liste li.ist-an i{width:32px;background:var(--gruen-tief)}
.zusagen-liste li.ist-durch i{background:var(--gruen-tief)}
.zusage{display:grid;align-content:center;gap:16px}
.zusage .nr{font-family:var(--anzeige);font-size:1.5rem;line-height:1;color:var(--gruen-tief)}
.zusage h3{font-size:clamp(2.2rem,5.2vw,5rem);line-height:1;letter-spacing:-.01em}
.zusage p{color:var(--tinte-still);font-size:clamp(1.0625rem,1.4vw,1.3rem);line-height:1.5;max-width:34rem;text-wrap:pretty}
.zusage .ohne{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--hell-linie);max-width:34rem}
.zusage .ohne small{font:500 .6875rem/1 var(--mono);letter-spacing:.14em;color:var(--tinte-leise)}
.zusage .ohne span{font-size:.97rem;color:var(--tinte-still)}
.zusagen-linie{height:2px;background:var(--hell-linie);margin-top:28px}
.zusagen-linie i{display:block;height:100%;background:var(--gruen-tief);transform-origin:left;transform:scaleX(0)}
/* Statisch + mobil: sieben Karten */
.zusagen-buehne{display:grid;gap:14px}
html:not(.bewegt) .zusagen .zaehler,html:not(.bewegt) .zusagen-liste,html:not(.bewegt) .zusagen-linie{display:none}
html:not(.bewegt) .zusagen-in{align-items:start}
html:not(.bewegt) .zusage,.zusagen.ist-karten .zusage{background:#fff;border:1px solid var(--hell-linie);border-radius:var(--radius);padding:22px 22px 20px}
html:not(.bewegt) .zusage h3,.zusagen.ist-karten .zusage h3{font-size:clamp(1.7rem,4vw,2.3rem)}
.zusagen.ist-karten .zaehler,.zusagen.ist-karten .zusagen-liste,.zusagen.ist-karten .zusagen-linie{display:none}
.zusagen.ist-karten .zusagen-in{align-items:start}
.zusagen.ist-gepinnt .zusagen-sticky{min-height:100svh;display:grid;align-items:center;padding:calc(var(--kopf-h) + 24px) 0 48px}
.zusagen.ist-gepinnt .zusagen-buehne{position:relative;min-height:min(52vh,460px)}
.zusagen.ist-gepinnt .zusage{position:absolute;inset:0;opacity:0;visibility:hidden}
@media (max-width:899px){.zusagen-in{grid-template-columns:1fr}}

/* =====================================================================
   7 · ABLAUF — Linie zeichnet mit, Punkte füllen sich
   ===================================================================== */
.ablauf-schritte{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ablauf-linie{position:absolute;left:18px;right:18px;top:17px;height:2px;background:var(--linie);overflow:hidden}
.ablauf-linie i{display:block;height:100%;background:var(--gruen);transform-origin:left;transform:scaleX(1)}
html.bewegt .ablauf-linie i{transform:scaleX(0)}
.ablauf-schritt{display:grid;gap:16px;align-content:start}
.ablauf-schritt .punkt{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--nacht);border:2px solid var(--gruen);display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--gruen);transition:background .4s,color .4s}
.ablauf-schritt.ist-an .punkt{background:var(--gruen);color:var(--nacht)}
.ablauf-schritt h3{font-family:var(--schrift);font-size:1.15rem;font-weight:600;line-height:1.3;margin-bottom:5px}
.ablauf-schritt p{color:var(--still)}
@media (max-width:899px){
  .ablauf-schritte{grid-template-columns:1fr;gap:28px;padding-left:0}
  .ablauf-linie{left:17px;right:auto;top:18px;bottom:18px;width:2px;height:auto}
  .ablauf-linie i{transform-origin:top;width:100%;height:100%}
  html.bewegt .ablauf-linie i{transform:scaleY(0)}
  .ablauf-schritt{grid-template-columns:36px 1fr;gap:18px}
}

/* =====================================================================
   8 · VERBINDLICH — belegte Angaben; Karten legen sich nacheinander,
   die grüne Kante zieht wie eine Masslinie (ersetzt Stimme + Team)
   ===================================================================== */
.belege{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.beleg{position:relative;display:grid;gap:10px;align-content:start;background:linear-gradient(160deg,var(--nacht-3),var(--nacht-2));border:1px solid var(--linie);border-radius:var(--radius-gross);padding:clamp(20px,2.4vw,28px);overflow:hidden}
.beleg::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gruen);transform-origin:left;transform:scaleX(var(--l,1))}
.beleg-nr{font:500 var(--t-mini)/1 var(--mono);letter-spacing:.14em;color:var(--still)}
.beleg h3{font-size:clamp(1.4rem,2vw,1.65rem);line-height:1.18;color:#fff}
.beleg p:not(.marke-zeile){color:var(--still);text-wrap:pretty}
.auftraggeber{margin-top:clamp(28px,4vw,48px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--linie);display:grid;gap:14px}
.auftraggeber .chips{list-style:none;margin:0;padding:0}
.auftraggeber .chips li{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linie-hell);border-radius:999px;padding:8px 14px;font-size:.9375rem;color:var(--text)}
.auftraggeber .chips li::before{content:"";width:6px;height:6px;background:var(--gruen);border-radius:1px;transform:rotate(45deg);flex:0 0 auto}
.diskret{max-width:44rem;color:var(--still);font-size:.95rem}
@media (max-width:1099px){.belege{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.belege{grid-template-columns:1fr}}

/* =====================================================================
   10 · REGION — Kantone setzen sich, Linien ziehen
   ===================================================================== */
.region .mass{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,6vw,96px);align-items:start}
.kantone{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.kantone li{position:relative;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:16px 0}
.kantone li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linie);transform-origin:left;transform:scaleX(var(--l,1))}
.kantone b{font-family:var(--anzeige);font-weight:400;font-size:clamp(1.35rem,2vw,1.65rem);color:#fff}
.kantone span{font:500 .75rem/1 var(--mono);letter-spacing:.14em;color:var(--gruen)}

/* =====================================================================
   11 · FAQ — weiches Aufklappen
   ===================================================================== */
.faq .mass{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq .klebend{position:sticky;top:calc(var(--kopf-h) + 36px)}
@media (max-width:899px){.faq .mass{grid-template-columns:1fr}.faq .klebend{position:static}}
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:20px 0;font-family:var(--anzeige);font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.25;color:#fff}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary .plus{position:relative;width:32px;height:32px;border-radius:8px;border:1px solid var(--linie);transition:border-color .3s,transform .4s var(--kurve)}
.fragen summary .plus::before,.fragen summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--gruen);translate:-50% -50%}
.fragen summary .plus::after{transform:rotate(90deg);transition:transform .4s var(--kurve)}
.fragen details[open] summary .plus::after{transform:rotate(0)}
.fragen summary:hover .plus{border-color:var(--gruen)}
.fragen .antwort{overflow:hidden}
.fragen .antwort p{padding:0 0 22px;color:var(--still);max-width:38rem;text-wrap:pretty}

/* =====================================================================
   12 · KONTAKT
   ===================================================================== */
.kontakt .raster-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,6vw,80px);align-items:start}
.wege{display:grid;gap:12px;margin-top:26px}
.wege a{display:flex;gap:14px;align-items:center;background:var(--nacht-3);border:1px solid var(--linie);border-radius:var(--radius);padding:16px 18px;color:var(--text);text-decoration:none;transition:border-color .3s}
.wege a:hover{border-color:var(--gruen);color:var(--text)}
.wege .ikon{width:42px;height:42px;border-radius:10px;background:var(--gruen-grund);display:grid;place-items:center;color:var(--gruen);flex:0 0 auto}
.wege .ikon svg{width:20px;height:20px}
.wege b{display:block;font-weight:600}
.wege small{font-size:.875rem;color:var(--still)}
.formular{position:relative;background:var(--nacht-3);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:clamp(20px,3.5vw,32px);display:grid;gap:14px}
.formular .reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.feld{display:grid;gap:6px;font-size:.9rem;font-weight:600;align-content:start}
.feld-name{display:block}
.feld .pflicht{color:var(--gruen)}
.feld input,.feld select,.feld textarea{width:100%;min-height:48px;background:var(--nacht);color:var(--text);border:1px solid #6B737A;border-radius:10px;padding:11px 14px;font-size:1rem;font-weight:400;transition:border-color .2s,box-shadow .2s}
.feld textarea{resize:vertical;min-height:96px}
.feld input::placeholder,.feld textarea::placeholder{color:#8A9299}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(123,212,154,.22)}
.feld .fehler{display:none;font-weight:500;font-size:.8125rem;color:#FFB4A8}
.feld.ist-fehler input{border-color:#FF8A7A}
.feld.ist-fehler .fehler{display:block}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--still)}
.zustimmung input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--gruen-tief);flex:0 0 auto}
.formular .taste{width:100%;min-height:52px;font-size:1rem}
.formular .fussnote{font-size:.8125rem;color:var(--leise);text-align:center}
.honig{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.vorschau-hinweis{display:none;border:1px solid var(--gruen);border-radius:10px;padding:12px 14px;font-size:.9rem;color:var(--text);background:rgba(30,74,46,.4)}
.vorschau-hinweis.ist-an{display:block}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie);padding:28px 0 36px;font-size:.9rem;color:var(--still);background:var(--nacht-2)}
.fuss-in{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start}
.fuss b{color:var(--text)}
.fuss nav{display:flex;gap:18px;flex-wrap:wrap}
.fuss nav a,.fuss nav button{color:var(--text);background:none;border:0;padding:0;cursor:pointer;font-size:.9rem;text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:4px;min-height:24px}
.fuss .klein{margin-top:18px;font-size:.8125rem;color:var(--leise)}
@media (max-width:640px){.fuss-in{grid-template-columns:1fr}}

/* ---------- Cookie-Hinweis (nur mit Ads-ID) ---------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:65;display:flex;justify-content:center;pointer-events:none}
.cookie[hidden]{display:none}
.cookie>div{pointer-events:auto;max-width:720px;width:100%;background:var(--nacht-2);border:1px solid var(--linie);border-radius:16px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.cookie p{font-size:.9rem;color:var(--still)}
@media (max-width:899px){.cookie{bottom:calc(84px + env(safe-area-inset-bottom))}.cookie>div{grid-template-columns:1fr}}

/* ---------- Unterseiten ---------- */
.recht{padding:calc(var(--teil) * .6) 0 var(--teil)}
.recht>*{max-width:760px}
.recht h1{font-size:min(var(--t-h2),11vw);margin-bottom:24px}
.recht h2{font-family:var(--schrift);font-size:1.1rem;font-weight:700;margin:32px 0 8px;color:#fff}
.recht p{color:var(--still);margin-bottom:10px}
.recht p b{color:var(--text)}
.recht .stand{margin-top:36px;font-size:.85rem;color:var(--leise);border-top:1px solid var(--linie);padding-top:16px}
.danke{padding:calc(var(--teil) * .9) 0 var(--teil);display:grid;gap:18px}
.danke>*{max-width:760px}
body:has(>main.danke){display:flex;flex-direction:column;min-height:100svh}
body:has(>main.danke)>main{flex:1 0 auto;align-content:center}
.danke h1{font-size:var(--t-h2)}

/* ---------- Bewegung: Anfangszustände nur mit html.bewegt ---------- */
html.bewegt [data-auf]{opacity:0;transform:translateY(24px)}
html.bewegt .hero h1 .zeile>span{opacity:0}
html.bewegt .hero-lead,html.bewegt .hero .tasten,html.bewegt .kennzahlen li{opacity:0}
@media print{.kopf,.schnell,.cookie,.entwurf-band,.massband,.scroll-hinweis{display:none!important}html.bewegt [data-auf]{opacity:1;transform:none}}

/* Unterseiten: Kopf ohne Menü-Knopf, Termin-Taste immer sichtbar */
.nav--unterseite .taste{display:inline-flex!important}
@media (max-width:399px){.nav--unterseite{min-width:0}.nav--unterseite .taste--klein{white-space:normal;text-align:center;line-height:1.2}}
.ganz{white-space:nowrap}