/* Entwurf A · „Der Balken ist die Sonne" · Rolle 13 · mobil zuerst (390 px)
   Farbrollen (Regel 40, Gewichtung Runde 5 nach Lukas' iPhone-Review v4 „zu blau"): Grund dunkler und ohne Blaustich.
   GOLD = Licht: Balkenfüllung, Sonne/Horizont, Knopf, die vier Höhepunkt-Kursiven, Lichtfläche der Kurvenlücke, Funke.
   EISBLAU = nur Gemessenes: Mono-Zeilen, Zahlen, Linien, Achsen, leere Balkenspur, Kurve „normal".
   GRÜN = Zustand: Linie des Hyperathlete-Ansatzes, Gegenfeld, Vollstand im Finale, Erfolg, Delta. Nichts unter 15 px. */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/manrope-latin.woff2) format("woff2");unicode-range:U+2080-2089,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+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/fonts/manrope-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-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-latin.woff2) format("woff2");unicode-range:U+2080-2089,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+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-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:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+2080-2089,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+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(assets/fonts/jetbrains-mono-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}

:root{
  --nacht:#0A0806; --grund:#0A0806;
  --tinte:#F4EFE6; --text:#CFC9BE; --leise:#A29C92;
  --eis:#5F8CA6; --eis-hell:#9DBFD0; --eis-tief:#2C4A5C;
  --gold:#FFC46B; --gold-hell:#FFE9C4; --glut:#FF8A4C; /* Gold: nur Licht */
  --gold-verlauf:linear-gradient(180deg,#FFF3DC 8%,#FFD9A0 52%,#FFC46B 100%);
  --gruen:#34D399; --gruen-hell:#A7F0CB; --gruen-tief:#10A86A; /* Grün: nur Zustand */
  --zahl-verlauf:linear-gradient(180deg,#F4EFE6 12%,#9DBFD0 96%);
  --warn:#FFB3A6;
  --linie:rgba(244,239,230,.13);
  --rand:clamp(20px,5.2vw,72px);
  --kurve:cubic-bezier(.2,.7,.2,1);
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --p:0; --licht:.6; --hero:0;
  --dock:78px; --dockh:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--grund);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:300 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{display:block;max-width:100%}
h1,h2,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--eis);color:#0A0806}

/* ---------- Licht und Korn: liegen fest hinter und über allem ---------- */
.licht{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% calc(14% + 50% * var(--licht)) at 50% 104%, rgba(255,196,107,calc(.2 * var(--licht))) 0, rgba(255,138,76,calc(.07 * var(--licht))) 44%, rgba(255,138,76,0) 76%)}
.korn{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.fuss{position:relative;z-index:1}

/* ---------- Typo-Rollen ---------- */
h1,h2{font-weight:200;color:var(--tinte);letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
h2{font-size:clamp(36px,9.6vw,84px)}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.012em;font-size:1.13em;line-height:1;color:var(--tinte);padding-right:.06em}
/* Runde 5, Hebel 2: Die Serif-Kursive steht nur noch an vier Höhepunkten (Hero, „Jetzt.", Sektion 11, Finale) und trägt dort
   Gold als Licht. Dazu die stille Sektion 3 (nicht anfassen) und das Gegenfeld. Überall sonst ist die betonte Hälfte Manrope:
   gleiche Größe, mehr Gewicht, volle Tinte. So hat die Kursive wieder Kraft. */
main em:not(.hero h1 em):not(.jetzt em):not(.zehn em):not(.finale__headline em):not(#s3 em){font-family:var(--sans)!important;font-style:normal!important;font-size:1em!important;line-height:inherit!important;letter-spacing:inherit!important;font-weight:400;padding-right:0}
main :is(h1,h2,.profil,.claim,.zusage,.satz2) em:not(.hero h1 em):not(.zehn em):not(.finale__headline em):not(#s3 em){font-weight:400}
.hero h1 em,.jetzt em,.zehn em,.finale__headline em{background:var(--gold-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,196,107,.38))}
/* große Zahlen: Eisblau, weil gemessen */
.fakt__zahl,.grosszahl__zahl{background:var(--zahl-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
strong{font-weight:400;color:var(--tinte)}
.mono{font-family:var(--mono);font-weight:400;font-size:15px;line-height:1.5;letter-spacing:.01em;color:var(--eis);font-variant-numeric:tabular-nums}
.gross{font-size:clamp(21px,5.6vw,30px);line-height:1.32;color:var(--tinte);font-weight:300;letter-spacing:-.012em}
.kicker{font-family:var(--mono);font-size:15px;letter-spacing:.22em;color:var(--eis)}
.quelle{color:var(--leise);margin-top:28px;max-width:44em}

/* Balkenstand je Sektion: Mini-Balken plus Mono-Zeile */
.stand{font-family:var(--mono);font-size:15px;line-height:1.4;color:var(--eis);display:flex;gap:12px;align-items:flex-start;margin-bottom:clamp(26px,6vw,44px);letter-spacing:.01em}
.stand::before{content:"";flex:0 0 44px;height:5px;margin-top:8px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold) 0 calc(var(--s,0) * 1%),rgba(95,140,166,.3) calc(var(--s,0) * 1%) 100%)}

/* ---------- Gerüst ---------- */
.sek{position:relative;padding-block:clamp(76px,12.5vh,160px);isolation:isolate}
.innen{padding-inline:var(--rand);max-width:1240px;margin-inline:auto;position:relative}
.absaetze{display:grid;gap:22px;margin-top:clamp(28px,7vw,48px);max-width:40em}
.absaetze--gross p{font-size:clamp(20px,5.3vw,26px);line-height:1.36;color:var(--tinte);letter-spacing:-.01em}

.bild{position:relative;overflow:hidden;margin:0}
.bild img{width:100%;height:100%;object-fit:cover}
.bild--grund{position:absolute;inset:0;z-index:-1}
.bild--grund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--grund) 0,rgba(10,8,6,0) 16%,rgba(10,8,6,0) 78%,var(--grund) 100%)}
/* Bildränder laufen per Maske ins Durchsichtige: so gibt es keine Kante gegen das Licht dahinter */
.bild--grund,.bild--band{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 82%,transparent 100%)}
.hero__bild{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%)}
.finale__bild{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 62%,transparent 100%)}
.bild--band{height:min(96vw,70vh)}
.bild--band.bild--flach{height:min(66vw,62vh)}
.bild--band::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--grund) 0,rgba(10,8,6,0) 22%,rgba(10,8,6,0) 52%,var(--grund) 100%)}
.hoch{margin-top:-84px}
#s2,#s5{padding-top:0}

/* ---------- Knopf ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border:0;border-radius:29px;cursor:pointer;
  font:600 17px/1 var(--sans);letter-spacing:-.005em;color:#120C04;text-decoration:none;
  background:linear-gradient(180deg,#FFF6E0 0%,#FFD98F 40%,#FFB84F 100%);box-shadow:0 0 0 1px rgba(255,243,220,.75) inset,0 0 0 1px rgba(255,196,107,.5),0 10px 44px rgba(255,180,84,.45),0 0 90px -10px rgba(255,138,76,.5);
  transition:transform .4s var(--kurve),box-shadow .4s var(--kurve)}
.knopf:active{transform:scale(.975)}
.knopf--voll{width:100%}
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}

/* ---------- Kopf ---------- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:30;padding:calc(14px + env(safe-area-inset-top,0px)) var(--rand) 30px;pointer-events:none;
  background:linear-gradient(to bottom,var(--grund) 0,var(--grund) 38%,transparent 100%);opacity:0;transition:opacity .6s var(--kurve)}
.kopf[data-an]{opacity:1}
.kopf__marke{display:block;width:150px;pointer-events:auto}
.wm{width:100%;height:auto;fill:var(--tinte)}

/* ---------- Dock: der Balken in der Daumenzone. Spur Eisblau (gemessen), Füllung Gold (Licht) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:12px var(--rand) calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(10,8,6,.95),rgba(10,8,6,.66));-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid rgba(244,239,230,.14);transition:transform .9s var(--kurve),opacity .9s var(--kurve),border-color .4s,background .4s}
.dock[data-weg]{transform:translateY(110%);opacity:0}
/* In Sektion 5 ist das Kurvenfeld die ausgeklappte Form des Docks: eine Glasfläche, eine Oberkante (die des Feldes) */
.dock[data-instrument]{background:rgba(10,8,6,.97);border-top-color:transparent}
.dock__spur{position:relative;height:6px;border-radius:3px;background:rgba(95,140,166,.26)}
.dock__fuellung{position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(90deg,#FF8A4C 0%,#FFC46B 52%,#FFE9C4 100%);
  clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0 round 3px)}
.dock__kopf{position:absolute;top:50%;left:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FFF6E6;
  box-shadow:0 0 0 3px rgba(255,196,107,.22),0 0 22px 6px rgba(255,196,107,.55)}
.dock__zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;min-height:38px}
.dock__marke{color:var(--eis);white-space:nowrap}
.dock__hero span:last-child{font-family:var(--mono);color:var(--leise);letter-spacing:0}
.dock__cta{flex:none;font:600 15px/1 var(--sans);color:var(--gold);text-decoration:none;padding:11px 15px;border-radius:20px;box-shadow:0 0 0 1.5px rgba(255,196,107,.85) inset,0 0 18px rgba(255,180,84,.3);
  transition:opacity .5s var(--kurve)}
.dock[data-hero] .dock__cta{opacity:0;pointer-events:none;position:absolute}
/* In Sektion 5 steht rechts der Zähler statt des Knopfs */
.dock__zaehler{display:none;white-space:nowrap;color:var(--eis);letter-spacing:-.01em}
.dock__zaehler .kreuze__zahl{color:var(--tinte)}
.dock[data-zaehler] .dock__zaehler{display:block}
.dock[data-zaehler] .dock__cta{display:none}

/* ---------- Auftritte ---------- */
.js [data-auftritt]{opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--kurve),transform 1.4s var(--kurve);transition-delay:calc(var(--i,0) * 120ms)}
.js [data-auftritt][data-da]{opacity:1;transform:none}
.js [data-auftritt="langsam"]{transition-duration:2.6s,2.6s}
.js [data-auftritt="bild"]{transform:none;transition:opacity 1.6s var(--kurve)}
.js [data-auftritt="bild"] img{transform:scale(1.14);transition:transform 2.4s var(--kurve)}
.js [data-auftritt="bild"][data-da] img{transform:none}
.js [data-auftritt="reihe"]{opacity:1;transform:none}

/* ---------- HERO (Runde 5, Hebel 1: Bild-Moment. Erster Bildschirm = Wortmarke, Headline, Knopf) ---------- */
.hero{position:relative}
.hero__buehne{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
  padding:calc(96px + env(safe-area-inset-top,0px)) var(--rand) calc(var(--dock) + 22px + env(safe-area-inset-bottom,0px))}
.hero__bild{inset:0}
.hero__bild img{position:absolute;left:0;top:0;width:100%;height:100%;object-position:50% 100%;filter:sepia(.12) saturate(1.1)}
.js .hero__bild{transform:scale(calc(1 + var(--hero) * .06));transform-origin:58% 62%}
.hero__bild::after{background:linear-gradient(to bottom,rgba(10,8,6,.92) 0,rgba(16,11,7,.78) 24%,rgba(22,14,8,.36) 38%,rgba(10,8,6,0) 46%,rgba(10,8,6,0) 78%,rgba(10,8,6,.6) 92%,var(--grund) 100%)}
/* Die Sonne am Horizont des Bildes: Gold als Licht. Beim ersten Daumenzug geht sie auf. */
.hero__sonne{position:absolute;left:58%;top:60%;width:130vmin;height:130vmin;margin:-65vmin 0 0 -65vmin;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,233,196,.55) 0,rgba(255,196,107,.3) 16%,rgba(255,138,76,.1) 42%,rgba(255,138,76,0) 70%);
  opacity:calc(.3 + var(--hero) * .6);transform:scale(calc(.6 + var(--hero) * .7))}
.hero__marke{position:absolute;left:var(--rand);right:var(--rand);top:calc(22px + env(safe-area-inset-top,0px));max-width:560px}
.hero__text{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:24px}
.hero h1{font-size:clamp(34px,10.6vw,84px);line-height:1.02;max-width:11em}
.hero h1 em{display:block;font-size:1.3em;line-height:.98;margin-top:.14em;padding-bottom:.1em}
.hero .knopf{width:100%;max-width:420px}
.hero__nach{padding-block:clamp(40px,10vw,84px) clamp(8px,2vw,20px)}
.hero__sub{font-size:clamp(22px,5.9vw,34px);line-height:1.26;font-weight:200;letter-spacing:-.02em;color:var(--tinte);max-width:24em}
.hero__mono{margin-top:clamp(22px,5vw,34px);letter-spacing:-.03em;color:var(--eis)}
.js .hero__marke,.js .hero__text>*{animation:heroauf 1.5s var(--kurve) both}
.js .hero__text>:nth-child(1){animation-delay:.25s}.js .hero__text>:nth-child(2){animation-delay:.6s}
.js .hero__bild img{animation:herozoom 3.2s var(--kurve) both}
@keyframes heroauf{from{opacity:0;transform:translateY(26px)}}
@keyframes herozoom{from{transform:scale(1.1);filter:sepia(.12) saturate(1.1) brightness(.45)}}

/* ---------- 1 · Harte Fakten ---------- */
.schlag{font-size:clamp(50px,14.2vw,128px);line-height:.96;letter-spacing:-.045em}
.schlag em{display:block;font-size:1.12em;margin-top:.06em;padding-bottom:.1em}
#s1 .bild--band{margin-top:clamp(40px,10vw,80px)}
#s1 .bild--band+.innen{margin-top:-64px}
.puls{position:absolute;inset:0;width:100%;height:100%}
.puls path{fill:none;stroke:var(--eis);stroke-width:1.5;vector-effect:non-scaling-stroke}
.puls__linie{filter:drop-shadow(0 0 6px rgba(95,140,166,.9))}
/* v7c: Aufbau von der Bildmitte nach rechts, an den Scroll gekoppelt (--ekg 0..1 aus main.js); ohne JS und bei reduzierter Bewegung steht die ganze Linie */
.js [data-auftritt="bild"] .puls--linie{clip-path:inset(0 calc((1 - var(--ekg,1)) * 100%) 0 0)}

/* Wischreihen (Fakten, Dimensionen, Stufen) */
.wisch{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:6px var(--rand) 10px;margin-top:clamp(44px,11vw,80px);scroll-padding-inline:var(--rand)}
.wisch::-webkit-scrollbar{display:none}
.wisch>*{flex:0 0 min(78vw,340px);scroll-snap-align:start}
/* Sektion 1 (Runde 4, Lukas' iPhone-Review): keine Wischleiste mehr. Die Zahlen stehen als Messreihe untereinander,
   oben die Zahl und rechts daneben die Kurzkennung der Quelle, darunter die Einordnung über die volle Breite.
   Kommt mit dem senkrechten Scrollen. Die Mono-Zeile (.fakt__zeile) hat keinen eigenen Kasten, damit ihre zwei Teile
   einzeln im Raster stehen; im Dokument bleibt sie eine Zeile. */
.fakten{display:grid;gap:0;padding-inline:var(--rand);max-width:1240px;margin:clamp(40px,10vw,72px) auto 0}
.fakt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:5px;align-items:end;padding:13px 0 14px;border-top:1px solid rgba(95,140,166,.26)}
.fakt:last-child{border-bottom:1px solid rgba(95,140,166,.26)}
.fakt__zahl{grid-area:1/1;font-weight:200;font-size:clamp(36px,10.2vw,46px);line-height:1;letter-spacing:-.055em;padding:.02em .06em .04em 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.fakt__zeile{display:contents;letter-spacing:-.02em;line-height:1.4}
.fakt .einordnung{grid-area:2/1/3/-1;color:var(--text);overflow-wrap:anywhere}
.fakt .kennung{grid-area:1/2;justify-self:end;text-align:right;margin:0 0 5px}
/* Kurzkennung: der letzte Abschnitt einer Mono-Zeile ist die Quelle in Kurzform; die lange Referenz steht ganz unten */
.kennung{display:block;margin-top:6px;color:var(--eis);letter-spacing:.02em}
.kennung::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;border:1px solid var(--eis);background:rgba(95,140,166,.3)}
.kennung a,.qn{color:var(--eis-hell);text-decoration:none;border-bottom:1px solid rgba(95,140,166,.5)}

/* ---------- 2 · Handlungsspielraum ---------- */
.grosszahl{margin-top:clamp(56px,14vw,110px)}
.grosszahl__zahl{display:block;font-weight:200;font-size:clamp(112px,33vw,260px);line-height:.84;letter-spacing:-.065em;font-variant-numeric:tabular-nums;margin-left:-.04em;padding:.04em .08em .04em 0;white-space:nowrap}
.grosszahl p{font-size:clamp(20px,5.3vw,26px);line-height:1.36;color:var(--tinte);margin-top:22px;max-width:30em}
.neun{display:flex;gap:9px;margin-top:26px}
.neun i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--eis);transition:background 0.7s var(--kurve),border-color .7s,box-shadow .7s;transition-delay:calc(.5s + var(--n) * 110ms)}
.grosszahl[data-da] .neun i,.ruhig .neun i{background:var(--eis);border-color:var(--eis);box-shadow:0 0 18px rgba(95,140,166,.7)}
.jetzt{margin-top:clamp(64px,16vw,120px);font-size:clamp(21px,5.6vw,30px);color:var(--tinte);line-height:1.3}
.jetzt em{display:block;margin-top:.2em;font-size:1.5em;line-height:1.04}
.jetzt em[data-riesig]{font-size:clamp(140px,43vw,340px);line-height:.86;margin:.06em 0 0 -.03em;padding-bottom:.12em;letter-spacing:-.03em;filter:drop-shadow(0 0 70px rgba(255,196,107,.4))}
.satz2{margin-top:clamp(52px,13vw,96px);font-size:clamp(24px,6.5vw,38px);line-height:1.2;font-weight:200;color:var(--tinte);letter-spacing:-.02em;max-width:22em}
.satz2 em{display:block;margin-top:.2em;font-size:1.5em;line-height:1.02;padding-bottom:.08em}
.quellen{margin-top:clamp(48px,12vw,90px);display:grid;gap:14px;max-width:46em}
.quellen p{font-family:var(--mono);font-size:15px;line-height:1.45;letter-spacing:-.02em;color:var(--leise);padding-left:14px;border-left:1px solid rgba(95,140,166,.6)}

/* ---------- 3 · Mutter: alles Licht aus ---------- */
.sek--stille{min-height:128vh;min-height:128svh;display:grid;align-content:center;
  background:linear-gradient(to bottom,rgba(2,2,4,0) 0,#020204 16%,#020204 84%,rgba(2,2,4,0) 100%)}
.sek--stille .stand{opacity:.6}
.stille__satz{font-size:clamp(54px,15.4vw,140px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.stille__text{margin-top:clamp(40px,11vw,80px)}
.stille__text p{font-size:clamp(21px,5.6vw,30px);line-height:1.34;color:var(--text)}
.stille__text em{display:block;font-size:clamp(34px,9.4vw,64px);line-height:1.02;margin-top:.3em;padding-bottom:.1em}
.funke{width:10px;height:10px;border-radius:50%;margin-top:clamp(48px,13vw,90px);background:#FFF1D6;box-shadow:0 0 0 6px rgba(255,196,107,.16),0 0 60px 22px rgba(255,196,107,.45),0 0 160px 70px rgba(255,138,76,.2)}

/* ---------- 4 · Verantwortung, 9 · Community: Vollbild ---------- */
.sek--vollbild{min-height:118vh;min-height:118svh;display:grid;align-content:start}
.sek--vollbild .bild--grund::after{background:linear-gradient(to bottom,var(--grund) 0,rgba(10,8,6,.86) 14%,rgba(10,8,6,.72) 44%,rgba(10,8,6,.5) 60%,rgba(10,8,6,0) 80%,rgba(10,8,6,0) 88%,var(--grund) 100%)}
.reihe{font-size:clamp(40px,11vw,92px);line-height:1.04}
.reihe .satz{display:block}
.js .reihe .satz{opacity:0;transform:translateY(22px);transition:opacity 1.2s var(--kurve),transform 1.4s var(--kurve);transition-delay:calc(var(--n) * 260ms)}
.js .reihe[data-da] .satz{opacity:1;transform:none}
.reihe em{font-size:1.16em;line-height:1;margin-top:.24em;padding-bottom:.1em}
#s4 .absaetze{margin-top:clamp(30px,8vw,56px);max-width:22em}
#s4 .absaetze em{display:block;margin-top:.3em;font-size:1.3em;line-height:1.06;padding-bottom:.08em}
#s9 h2{font-size:clamp(38px,10.4vw,88px)}
#s9 h2 em{display:block;margin-top:.14em;padding-bottom:.1em}
.b2{font-size:1.24em}.b3{font-size:1.56em}

/* ---------- 5 + 6 · Liste und Instrument (Runde 5, ART-DIRECTION-V4 §3 „Instrument im Dock", Regel 42) ----------
   Die Liste liest sich wie Fließtext der Seite (Manrope 300, 17 px, Trennlinie wie überall), kein Rahmen, kein Kasten.
   Der Haken ist ein 18-px-Kreis; getippt zeichnet sich ein Strich und der Kreis bekommt einen Lichthof (Gold = Licht).
   Mobil klebt genau EIN Element: das Kurvenfeld sitzt auf dem Dock und teilt dessen Glas. Am Listenende setzt es sich ab.
   Farben: Wörter und Linie „normal" Eisblau (gemessen), Lücke Gold (Licht), Linie Hyperathlete-Ansatz Grün (Zustand). */
.kreuze{margin-top:clamp(26px,7vw,52px);max-width:860px}
.kreuze>.kreuze__zaehler{color:var(--eis);letter-spacing:.02em;padding-bottom:10px;border-bottom:1px solid var(--linie)}
.kreuze>.kreuze__zaehler .kreuze__zahl{color:var(--tinte)}
html:not(.js):not(.ruhig) .kreuze__zaehler{display:none}
.kreuze__liste label{position:relative;display:flex;align-items:center;gap:13px;min-height:48px;padding:6px 0;border-bottom:1px solid var(--linie);cursor:pointer;
  font:300 17px/1.3 var(--sans);color:rgba(244,239,230,.8);transition:color .4s var(--kurve);-webkit-tap-highlight-color:transparent}
/* Tap-Fläche 46 × 46 px über dem Kreis (unsichtbar), dazu die ganze Zeile */
.kreuze__liste input{position:absolute;z-index:2;left:-14px;top:50%;width:46px;height:46px;margin:-23px 0 0;opacity:0;cursor:pointer}
.kasten{flex:none;position:relative;width:18px;height:18px;border-radius:50%;border:1.25px solid rgba(244,239,230,.45);transition:border-color .28s var(--kurve),box-shadow .5s var(--kurve)}
.kasten::after{content:"";position:absolute;left:5.6px;top:2.4px;width:4.4px;height:8.4px;border:solid var(--tinte);border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
  clip-path:inset(0 0 100% 0);transition:clip-path .28s var(--kurve)}
input:checked+.kasten{border-color:var(--tinte);box-shadow:0 0 0 4px rgba(255,196,107,.1),0 0 16px 2px rgba(255,196,107,.5)}
input:checked+.kasten::after{clip-path:inset(0)}
input:checked~.kreuz__text{color:var(--tinte)}
input:focus-visible+.kasten{outline:2px solid var(--tinte);outline-offset:3px}
/* Gegenfeld: kein Rahmen, 32 px Abstand, Serif-Kursive. Zustand „nichts trifft zu" = Grün (Regel 40): Haken, Hof, Antwortstrich. */
.gegenfeld{margin-top:32px}
.gegenfeld:empty{display:none}
.gegenfeld label{border-bottom:0;font:italic 400 25px/1.12 var(--serif);letter-spacing:-.012em;color:var(--tinte)}
.gegenfeld input:checked+.kasten{border-color:var(--gruen);box-shadow:0 0 0 4px rgba(52,211,153,.12),0 0 18px 2px rgba(52,211,153,.7)}
.gegenfeld input:checked+.kasten::after{border-color:var(--gruen)}
.antwort--gegen{padding-left:16px;border-left:2px solid var(--gruen)}
/* Antworten: ohne Kreuz gibt es den Block nicht ([hidden]); mit Kreuz teilen sich beide Antworten einen Platz */
.antworten{display:grid;margin-top:clamp(36px,9vw,64px);max-width:40em}
.js .antwort:not([hidden]){animation:antwortauf .9s var(--kurve) both}
@keyframes antwortauf{from{opacity:0;transform:translateY(18px)}}
.antwort--gegen .absaetze{margin-top:0}
.antwort--gegen p{font-size:clamp(26px,7vw,44px);line-height:1.14;font-weight:200;letter-spacing:-.025em;color:var(--tinte)}
.antworten>.antwort{grid-area:1/1}
.antworten>.antwort[hidden]{display:block!important;visibility:hidden}
.antwort--auf .absaetze{margin-top:0}
.antwort--auf p{font-size:clamp(19px,5vw,24px);line-height:1.4;color:var(--tinte)}
.antwort--auf p:first-child{font-size:clamp(30px,8.2vw,52px);line-height:1.08;font-weight:200;letter-spacing:-.03em}
.antwort--auf em{display:block;margin-top:.5em}

/* Kurvenfeld: mobil knapp 200 px über dem Balken (Wortzeile, Kurve 110 px, der Hinweis „keine Vorhersage" in zwei Zeilen) */
.duo__rechts{display:contents}
.kopplung{position:sticky;bottom:var(--dockh);z-index:6;margin:30px calc(var(--rand) * -1) 0;padding:9px var(--rand) 5px;transition:background .4s var(--kurve),box-shadow .4s var(--kurve)}
.kopplung[data-klebt]{background:rgba(10,8,6,.97);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 -1px 0 rgba(244,239,230,.14)}
/* ohne JavaScript: nichts klebt, nichts zählt; Liste und Kurve stehen untereinander */
html:not(.js):not(.ruhig) .kopplung{position:static}
.gruppen{display:flex;flex-wrap:nowrap;white-space:nowrap;list-style:none;padding:0;margin:0;line-height:22px;letter-spacing:.02em}
.gruppen li{color:rgba(95,140,166,.58);transition:color .5s var(--kurve),text-shadow .5s var(--kurve)}
.gruppen li+li::before{content:"·";margin:0 .5em;color:rgba(95,140,166,.45);text-shadow:none}
.gruppen li[data-an]{color:var(--tinte);text-shadow:0 0 14px rgba(255,196,107,.8),0 0 34px rgba(255,196,107,.45)}
.kurve{margin:4px 0 0}
.kurve__bild{position:relative;height:110px;width:100%}
.kurve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kurve path{fill:none;vector-effect:non-scaling-stroke}
.k-raster,.kurve .k-start{display:none}
.k-achse{stroke:rgba(95,140,166,.5);stroke-width:1}
.k-life{stroke:rgba(244,239,230,.85);stroke-width:1.25}
.k-ende{stroke:rgba(244,239,230,.85);stroke-width:1.25;stroke-dasharray:3 5;opacity:.7}
.k-normal{stroke:var(--eis);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-hyper{stroke:url(#k-linie);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.k-hyper--glut{stroke:var(--gruen);stroke-width:9;filter:url(#k-glut);opacity:.5}
.kurve .k-flaeche{fill:url(#k-flaeche);opacity:calc(.4 + .6 * var(--k,0))}
/* „Start": der Punkt, an dem die Linien auseinandergehen (HTML statt SVG-Kreis, damit er bei gestauchtem Feld rund bleibt) */
.k-punkt{position:absolute;left:22.47%;top:29.33%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--grund);border:1.5px solid var(--tinte)}
/* Was unter dem abgesetzten Feld steht: Legende, Achsen, Hinweis (volle Figur) */
.kurve__ruhe{margin-top:0;display:grid;gap:10px}
.kurve__ruhe .km{white-space:nowrap;line-height:1.3;letter-spacing:-.03em}
.kurve__marken{display:flex;flex-wrap:wrap;gap:6px 18px}
.kurve__marken .km{display:inline-flex;align-items:center;gap:8px}
.kurve__marken .km::before{content:"";flex:none;width:18px;border-radius:2px}
.km--life{color:var(--tinte)}.km--life::before{height:1.25px;background:var(--tinte)}
.km--normal{color:var(--eis)}.km--normal::before{height:2px;background:var(--eis)}
.km--hyper{color:var(--gruen)}.km--hyper::before{height:3px;background:linear-gradient(90deg,#10A86A,#34D399);box-shadow:0 0 10px rgba(52,211,153,.8)}
.kurve__achsen{display:flex;flex-wrap:wrap;gap:4px 18px;color:rgba(95,140,166,.75)}
.km--x::before{content:"→ "}.km--y::before{content:"↑ "}
.kurve__hinweis{margin-top:4px;line-height:19px;letter-spacing:-.03em;color:rgba(95,140,166,.82)}
.kurve__zusatz{line-height:19px;letter-spacing:-.03em;color:var(--leise)}
.sek--nach{padding-top:clamp(36px,8vh,96px)}
.nach{display:grid}
.nach__kurve:empty{display:none}
.nach__text{margin-top:clamp(26px,6vw,44px)}

/* RÜCKFALL (Regel 42): <body data-kopplung="aus">. Sektion 5 = Liste mit Zähler (im Dock), Sektion 6 = Kurve allein.
   main.js hängt das Kurventeil nach Sektion 6 und koppelt nichts; hier fällt nur weg, was zur Kopplung gehört. */
[data-kopplung="aus"] .duo__rechts{display:block;position:static}
[data-kopplung="aus"] .kopplung{position:static;margin:0;padding:0;background:none;box-shadow:none}
[data-kopplung="aus"] .gruppen{display:none}
[data-kopplung="aus"] .kurve{margin:0}
[data-kopplung="aus"] .kurve__bild{height:auto;aspect-ratio:356/190}
[data-kopplung="aus"] .nach__kurve{margin-top:clamp(30px,8vw,56px);max-width:860px}

/* ---------- 7 · Hyperathlete ---------- */
#s7 h2 em{display:block;margin-top:.2em;padding-bottom:.1em}
.definition{margin-top:clamp(56px,14vw,110px);padding-top:26px;border-top:1px solid rgba(244,239,230,.3);max-width:44em}
.definition__wort{margin-top:22px;font-size:clamp(34px,9.2vw,60px);line-height:1;color:var(--tinte);font-weight:300;letter-spacing:-.03em}
.definition__wort strong{font-weight:300}
.definition__wort em{font-size:.62em;margin-left:.1em}
.definition__text{margin-top:22px;font-size:clamp(22px,5.9vw,32px);line-height:1.28;color:var(--tinte);letter-spacing:-.015em}
.definition__leit{margin-top:22px;font-size:clamp(26px,7vw,40px);line-height:1.1}
.definition--de{margin-top:0;border-top-color:var(--linie)}
.definition--de .definition__wort{margin-top:0}
.buehne{position:relative;isolation:isolate;min-height:128vh;min-height:128svh;display:grid;align-content:end;padding-bottom:16svh;margin-block:clamp(60px,14vw,120px) clamp(56px,13vw,100px)}
.buehne .bild--grund::after{background:linear-gradient(to bottom,var(--grund) 0,rgba(10,8,6,0) 18%,rgba(10,8,6,0) 44%,rgba(10,8,6,.86) 74%,var(--grund) 100%)}
.profil{font-weight:200;font-size:clamp(56px,15.8vw,150px);line-height:.94;letter-spacing:-.05em;color:var(--tinte)}
.profil strong{font-weight:200;display:block}
.profil em{display:block;font-size:1.12em;padding-bottom:.12em;margin-top:.04em}
/* Englische Fassung: Absatz von Karte 2 der Definition unter „A third profile." (auf Deutsch leer und hidden) */
.profil__absatz{margin-top:clamp(22px,4vw,34px);max-width:36em;font-size:clamp(17px,4.4vw,21px);line-height:1.5;color:var(--tinte)}
.profil__text{margin-top:28px;font-size:clamp(18px,4.7vw,21px);line-height:1.5;color:var(--text);max-width:34em}
.gruender{margin-top:clamp(64px,16vw,130px);display:grid;gap:clamp(28px,7vw,60px);max-width:1240px;margin-inline:auto}
.gruender__bild{aspect-ratio:1600/894;width:100%}
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:clamp(34px,9vw,60px) calc(var(--rand) * -1) 0}
.portrait{aspect-ratio:3/4}
.portrait img{object-position:50% 18%}
.portrait figcaption{position:absolute;left:14px;bottom:12px;color:var(--tinte);letter-spacing:.06em;text-shadow:0 1px 12px rgba(10,8,6,.9)}
.portrait::after{content:"";position:absolute;inset:60% 0 0 0;background:linear-gradient(to bottom,rgba(10,8,6,0),rgba(10,8,6,.7));pointer-events:none}
/* Runde 5, Hebel 3: Die Bildsektionen 4, 7 und 9 enden an einer Kante (kein Masken-Auslauf) und öffnen sich beim Scrollen
   per clip-path. Masken bleiben an Hero, Finale und den schmalen Bändern. */
#s4 .bild--grund,#s9 .bild--grund,.buehne .bild--grund{-webkit-mask-image:none;mask-image:none}
#s4 .bild--grund::after,#s9 .bild--grund::after{background:linear-gradient(to bottom,rgba(10,8,6,.84) 0,rgba(10,8,6,.72) 34%,rgba(10,8,6,.42) 58%,rgba(10,8,6,0) 80%)}
.buehne .bild--grund::after{background:linear-gradient(to bottom,rgba(10,8,6,0) 44%,rgba(10,8,6,.78) 78%,rgba(10,8,6,.9) 100%)}
.js #s4 .bild--grund,.js #s9 .bild--grund,.js .buehne .bild--grund,.js .gruender__bild{clip-path:inset(7% 6% 7% 6%);transition:clip-path 1.9s var(--kurve),opacity 1.2s var(--kurve)}
.js #s4 .bild--grund[data-da],.js #s9 .bild--grund[data-da],.js .buehne .bild--grund[data-da],.js .gruender__bild[data-da]{clip-path:inset(0)}
.gruender__text .absaetze{margin-top:0}
.gruender__text em{display:block;margin-top:.24em;font-size:1.34em;line-height:1.04;padding-bottom:.1em}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;color:var(--tinte)}
.marken span{padding:9px 13px;border:1px solid var(--linie);color:var(--eis)}
.marken span:first-child{border-color:rgba(244,239,230,.4);color:var(--tinte)}
.trenner{display:none!important}
.claim{margin-top:clamp(72px,18vw,150px);font-weight:200;font-size:clamp(34px,9.2vw,76px);line-height:1.04;letter-spacing:-.035em;color:var(--tinte);max-width:18em}
.claim em{display:block;margin-top:.22em;padding-bottom:.1em;font-size:.9em;line-height:1.06}
.kernsatz{margin-top:clamp(48px,12vw,90px);padding-top:24px;border-top:1px solid rgba(244,239,230,.3);font-size:clamp(22px,5.9vw,32px);line-height:1.25;color:var(--tinte);max-width:26em}
.kernsatz em{display:block;font-size:1.5em;margin-top:.14em;padding-bottom:.1em}

/* ---------- 8 · System ---------- */
#s8 h2 em{display:block;margin-top:.14em;padding-bottom:.1em}
.punkte{margin-top:clamp(30px,8vw,60px);height:clamp(250px,72vw,460px);position:relative}
.punkte canvas{width:100%;height:100%}
.absaetze--system{gap:clamp(34px,9vw,60px)}
.absaetze--system p{font-size:clamp(20px,5.3vw,26px);line-height:1.38;color:var(--tinte)}
.absaetze--system p:nth-child(3):not(:last-child),.absaetze--system p:nth-child(4):not(:last-child){font-size:clamp(18px,4.7vw,21px);color:var(--text)}
.absaetze--system em{display:block;margin-top:.3em;font-size:1.55em;line-height:1.04;padding-bottom:.1em}
.absaetze--system p:last-child{font-size:clamp(24px,6.5vw,36px);line-height:1.2;font-weight:200}
.absaetze--system p:last-child em{font-size:1.7em}
.messgroessen{display:flex;flex-wrap:wrap;gap:8px;padding-inline:var(--rand);margin:clamp(56px,14vw,110px) auto 0;max-width:1240px;color:var(--tinte)}
.messgroessen li{padding:10px 14px;border:1px solid var(--linie);color:var(--eis)}
.messgroessen .karte{order:-1;flex:0 0 calc(50% - 4px);aspect-ratio:3/4;position:relative;padding:0;border:0;overflow:hidden;display:grid;align-content:end;color:var(--tinte)}
.karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.karte::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.92) 0,rgba(10,8,6,0) 46%)}
.karte span{position:relative;z-index:1;padding:14px}

/* ---------- 10 · Delta ---------- */
.delta{max-width:560px;margin-bottom:clamp(28px,7vw,48px)}
.delta svg{width:100%;height:auto;overflow:visible}
.delta path,.delta circle{vector-effect:non-scaling-stroke}
.delta__spur{fill:none;stroke:var(--gruen);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(52,211,153,.7))}
.js .delta svg{clip-path:inset(-20px 100% -20px -20px);transition:clip-path 2.6s var(--kurve) .3s}
.js .delta[data-da] svg{clip-path:inset(-20px -20px -20px -20px)}
.delta__lot{fill:none;stroke:rgba(95,140,166,.5);stroke-width:1;stroke-dasharray:2 5}
.delta circle{fill:var(--grund);stroke:var(--eis);stroke-width:2}
.delta .delta__ziel{fill:var(--gruen-hell);stroke:var(--gruen);filter:drop-shadow(0 0 12px rgba(52,211,153,.8))}
.dim{display:flex;flex-direction:column;gap:18px;min-height:230px;padding:22px 20px;border-top:1px solid rgba(244,239,230,.3);background:linear-gradient(160deg,rgba(244,239,230,.06),rgba(244,239,230,.015) 60%)}
.dim__titel{color:var(--eis)}
.dim__text{font-size:clamp(22px,5.9vw,28px);line-height:1.2;color:var(--tinte);font-weight:300;letter-spacing:-.015em;margin-top:auto}
.zusage{margin-top:clamp(56px,14vw,100px);font-size:clamp(24px,6.5vw,40px);line-height:1.2;font-weight:200;color:var(--tinte);letter-spacing:-.02em;max-width:24em}
.zusage em{display:block;margin:.26em 0;font-size:1.3em;line-height:1.04;padding-bottom:.08em}
.siegel{margin-top:38px;display:flex;align-items:center;gap:14px;color:var(--eis);letter-spacing:.14em}
.siegel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--eis),transparent)}
.ausblick{margin-top:clamp(72px,18vw,140px);display:grid;gap:0;max-width:40em}
.ausblick p{position:relative;padding:0 0 30px 30px;font-size:clamp(20px,5.3vw,26px);line-height:1.34;color:var(--tinte);border-left:1px solid rgba(95,140,166,.4)}
.ausblick p::before{content:"";position:absolute;left:-6px;top:.42em;width:11px;height:11px;border-radius:50%;background:var(--eis-hell);box-shadow:0 0 16px rgba(95,140,166,.9)}
.ausblick p:last-child{border-left-style:dashed;padding-bottom:0}
.ausblick p:last-child::before{background:var(--grund);border:1.5px solid var(--eis);box-shadow:none}
.ausblick em{display:block;margin-top:.14em;font-size:1.34em;padding-bottom:.08em}

/* ---------- 11 · Preis und Plätze ---------- */
.zehn{font-size:clamp(44px,12vw,104px)}
.zehn em{display:block;margin-top:.12em;font-size:1.16em;line-height:1;padding-bottom:.12em}
.zehn em[data-riesig]{font-size:clamp(168px,52vw,440px);line-height:.8;margin:.03em 0 0 -.04em;padding:0 .08em .14em 0;letter-spacing:-.04em}
/* Zehn Plätze als zehn Lichtpunkte (Gold = Licht, keine Fläche) */
.plaetze{display:flex;flex-wrap:wrap;gap:clamp(14px,4.4vw,22px);margin:clamp(22px,6vw,36px) 0 clamp(30px,8vw,50px)}
.plaetze i{width:13px;height:13px;border-radius:50%;background:#FFF1D6;box-shadow:0 0 0 3px rgba(255,196,107,.18),0 0 18px 4px rgba(255,196,107,.55)}
.js .plaetze i{opacity:0;transform:scale(.6);transition:opacity .7s var(--kurve),transform .9s var(--kurve);transition-delay:calc(var(--n) * 90ms)}
.js .plaetze[data-da] i{opacity:1;transform:none}
.wisch--stufen{align-items:stretch}
.stufe{display:flex;flex-direction:column;gap:16px;min-height:300px;padding:22px 20px;border:1px solid var(--linie);background:rgba(244,239,230,.03)}
.stufe--mitte{border-color:var(--eis);background:linear-gradient(170deg,rgba(95,140,166,.15),rgba(95,140,166,.03) 70%);box-shadow:0 30px 80px -30px rgba(95,140,166,.45)}
.stufe__preis{font-weight:200;font-size:clamp(60px,17vw,84px);line-height:.9;letter-spacing:-.055em;padding:.04em .06em .06em 0;white-space:nowrap}
.stufe__mono{color:var(--eis)}
.stufe--mitte .stufe__mono{color:var(--eis-hell)}
.stufe__text{font-size:clamp(20px,5.3vw,24px);line-height:1.28;color:var(--tinte);margin-top:auto}
.fehlt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:10px;padding-left:10px;border-left:2px dashed rgba(95,140,166,.5);
  font:400 15px/1.4 var(--mono);letter-spacing:0;color:var(--leise);text-transform:none}
#s11 .absaetze em{display:block;margin-top:.4em}
/* Preis: ein Angebot, keine Stufen (Text v5). Die Zahl ist Tinte (kein Messwert), die Mono-Zeile Eisblau. */
.preis{margin-top:clamp(48px,12vw,90px);padding-top:26px;border-top:1px solid rgba(244,239,230,.3);max-width:40em}
.preis:empty{display:none}
.preis__zahl{display:block;font-weight:200;font-size:clamp(72px,21vw,150px);line-height:.9;letter-spacing:-.06em;color:var(--tinte);margin-left:-.04em;padding:.02em 0 .06em;white-space:nowrap}
.preis__mono{margin-top:14px}
.preis__text{margin-top:14px;font-size:clamp(20px,5.3vw,26px);line-height:1.36;color:var(--tinte)}
#s11 .preis+.absaetze{margin-top:clamp(40px,10vw,70px)}
/* Ausblick: ruhige Zwei-Zeilen-Zeitleiste */
.zukunft{margin-top:clamp(84px,21vw,160px);max-width:40em}
.zukunft:empty{display:none}
.zukunft>p{font-size:clamp(24px,6.5vw,38px);line-height:1.2;font-weight:200;letter-spacing:-.02em;color:var(--tinte)}
.zukunft>p em{display:block;margin-top:.2em}
.zeitleiste{margin:clamp(30px,8vw,52px) 0;display:grid}
.zeitleiste li{position:relative;display:grid;gap:4px;padding:0 0 28px 28px;border-left:1px solid rgba(95,140,166,.4);line-height:1.45;color:var(--text);letter-spacing:-.01em}
.zeitleiste li::before{content:"";position:absolute;left:-6px;top:.3em;width:11px;height:11px;border-radius:50%;background:var(--eis-hell)}
.zeitleiste li:last-child{border-left-style:dashed;padding-bottom:0}
.zeitleiste li:last-child::before{background:var(--grund);border:1.5px solid var(--eis)}
.zeitleiste .jahr{color:var(--tinte);font-size:20px;letter-spacing:-.02em}

/* ---------- Finale ---------- */
.finale{position:relative;isolation:isolate;padding:clamp(230px,40svh,420px) 0 clamp(70px,14vw,130px);overflow:hidden}
.finale__bild{inset:0 0 auto 0;height:max(125svh,900px)}
.finale__bild img{object-position:50% 0;filter:brightness(.42) saturate(.85) sepia(.15);transition:filter 3s var(--kurve) .3s}
.finale[data-voll] .finale__bild img{filter:brightness(1.04) saturate(1.12) sepia(.15)}
.finale__bild::after{background:linear-gradient(to bottom,var(--grund) 0,rgba(10,8,6,0) 10%,rgba(10,8,6,0) 34%,rgba(8,7,10,.74) 58%,var(--grund) 100%)}
/* Runde 4: keine gemalte Sonne. Das warme Licht am Horizont liegt im Bild und wird beim Vollstand heller; darüber
   geht mit dem vollen Balken ein grünes Zustandslicht auf (Regel 40: Grün = Zustand). */
.finale__sonne{position:absolute;left:50%;top:24%;width:170vmin;height:170vmin;margin:-85vmin 0 0 -85vmin;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(167,240,203,.34) 0,rgba(52,211,153,.16) 14%,rgba(16,168,106,0) 34%),
    radial-gradient(closest-side,rgba(255,233,196,.6) 0,rgba(255,196,107,.34) 20%,rgba(255,138,76,.12) 46%,rgba(255,138,76,0) 72%);
  opacity:0;transform:scale(.4);transition:opacity 3s var(--kurve) 1.6s,transform 3.6s var(--kurve) 1.6s}
.finale[data-voll] .finale__sonne{opacity:1;transform:none}
.finale__zahl{position:relative;font-weight:200;font-size:clamp(112px,33.5vw,380px);line-height:.82;letter-spacing:-.07em;margin-left:-.05em;padding:.03em .08em .05em 0;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:var(--zahl-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 46px rgba(95,140,166,.38));
  transition:filter 1.4s var(--kurve) 1.9s}
[data-voll] .finale__zahl{background-image:linear-gradient(180deg,#F5FDF9 8%,#A7F0CB 46%,#34D399 96%);filter:drop-shadow(0 0 50px rgba(52,211,153,.55))}
.finale__spur{position:relative;height:20px;border-radius:10px;margin-top:22px;background:rgba(95,140,166,.3);overflow:hidden}
.finale__fuellung{position:absolute;inset:0;border-radius:10px;transform-origin:0 50%;background:linear-gradient(90deg,#FF8A4C 0%,#FFC46B 52%,#FFE9C4 100%)}
/* Zustand voll: das Licht (Gold) kippt in den Zustand (Grün) */
.finale__fuellung::after{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(90deg,#10A86A,#34D399 55%,#A7F0CB);opacity:0;transition:opacity 1.4s var(--kurve) 1.9s}
.js .finale__fuellung{transform:scaleX(0);transition:transform 2.1s var(--kurve)}
.js [data-voll] .finale__fuellung{transform:none}
[data-voll] .finale__fuellung::after{opacity:1}
[data-voll] .finale__spur{box-shadow:0 0 0 1px rgba(52,211,153,.7),0 0 60px 6px rgba(52,211,153,.75);transition:box-shadow 1.4s var(--kurve) 1.9s}
.finale__marke{margin-top:14px;color:var(--eis);transition:color 1.4s var(--kurve) 1.9s}
[data-voll] .finale__marke{color:var(--gruen)}
.finale__marke::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;background:currentColor;box-shadow:0 0 12px currentColor}
.finale__headline{margin-top:clamp(70px,18vw,150px);font-size:clamp(42px,11.6vw,104px)}
.finale__headline em{display:block;margin-top:.16em;padding-bottom:.1em}
.finale .gross{margin-top:26px;max-width:26em;font-size:clamp(19px,5vw,24px)}
.formular{margin-top:clamp(36px,9vw,60px);display:grid;gap:14px;max-width:540px;padding:22px 20px 20px;
  background:rgba(9,11,18,.66);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(244,239,230,.14);border-radius:4px;box-shadow:0 40px 120px -40px rgba(255,196,107,.3)}
.feld{display:grid;gap:7px;font-size:15px;color:var(--leise)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feld input{width:100%;min-width:0;height:58px;padding:0 16px;border:1px solid rgba(244,239,230,.24);border-radius:3px;background:rgba(244,239,230,.07);color:var(--tinte);font:300 18px/1 var(--sans);outline:0;transition:border-color .3s,background .3s}
.feld input::placeholder{color:rgba(244,239,230,.4)}
.feld input:focus{border-color:var(--tinte);background:rgba(244,239,230,.1)}
.haken{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:15px;line-height:1.45;color:var(--text);cursor:pointer;padding-block:6px}
.haken{position:relative}
.haken input{position:absolute;z-index:2;left:-11px;top:-5px;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.haken__box{width:22px;height:22px;border:1.25px solid rgba(244,239,230,.5);border-radius:50%;margin-top:1px;position:relative;transition:background .3s,border-color .3s}
.haken__box::after{content:"";position:absolute;left:7px;top:3.4px;width:5px;height:10px;border:solid var(--tinte);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);opacity:0}
.haken input:checked+.haken__box{border-color:var(--tinte);box-shadow:0 0 0 4px rgba(255,196,107,.1),0 0 16px 2px rgba(255,196,107,.5)}
.haken input:checked+.haken__box::after{opacity:1}
.haken input:focus-visible+.haken__box{outline:2px solid var(--eis-hell);outline-offset:3px}
.formular__klein{font-size:15px;line-height:1.45;color:var(--leise)}
.formular__klein a{color:var(--tinte);text-underline-offset:3px}
.formular__hinweis{text-align:center}
.meldung{font-size:15px;line-height:1.4;color:var(--warn);padding-left:12px;border-left:2px solid #FF7A66}
.erfolg{padding:16px;border:1px solid var(--gruen);border-radius:3px;background:rgba(52,211,153,.16);box-shadow:0 0 44px -8px rgba(52,211,153,.6);font-size:16px;line-height:1.45;color:var(--tinte)}
.erfolg__titel{font-family:var(--serif);font-style:italic;font-size:34px;line-height:1;margin-bottom:8px;color:var(--gruen)}
.demo{color:var(--leise);padding:10px 12px;border:1px dashed rgba(244,239,230,.25);text-align:center}

/* ---------- Quellen: ganz unten, über dem Fuß (Runde 4). Text kommt aus der Sektion „Quellen" der Textquelle. ---------- */
.quellenteil{position:relative;z-index:1;padding:clamp(44px,11vw,90px) 0 clamp(40px,10vw,80px);border-top:1px solid var(--linie);background:rgba(4,6,12,.55)}
.quellenteil__titel{font-family:var(--mono);font-weight:400;font-size:15px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:var(--eis)}
.quellenteil__liste{display:grid;gap:0;margin-top:20px;max-width:60em;list-style:none;padding:0}
.quellenteil__liste li{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:0 8px;padding:11px 0;border-top:1px solid rgba(95,140,166,.2);
  font-family:var(--mono);font-size:15px;line-height:1.45;letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere;scroll-margin-top:90px}
.quellenteil__liste li:target{color:var(--tinte);background:rgba(95,140,166,.1)}
.quellenteil__nr{color:var(--eis)}
.quellenteil__liste li:not(:has(.quellenteil__nr))>span{grid-column:1/-1}
.quellenteil__text{margin-top:16px;max-width:44em;font-size:16px;line-height:1.5;color:var(--leise)}
.quellenteil .fehlt{-webkit-line-clamp:4;line-clamp:4;margin-top:18px}
.quellenteil__liste em{font-size:1.06em;line-height:inherit;padding-right:0}
/* ohne JavaScript (oder ohne Inhalt) bleibt kein leerer Kasten stehen */
.quellenteil:has([data-quellen-inhalt]:empty){display:none}

/* ---------- Fuß ---------- */
.fuss{padding:clamp(60px,14vw,120px) 0 calc(48px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linie);background:rgba(4,4,6,.5)}
.fuss__zeichen{width:40px;height:40px;opacity:.9}
.fuss__marke{width:min(100%,560px);margin-top:26px}
.fuss__leit{margin-top:18px;font-size:clamp(26px,7vw,36px);line-height:1.1}
.fuss__links{margin-top:34px;font-size:17px;color:var(--tinte)}
.fuss__links a{text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:2px}
.fuss__klein{margin-top:14px;color:var(--leise)}
.fuss__links.fuss__sprache{margin-top:14px;font-size:15px}
/* Neuigkeiten-Liste (TODO § 2g): ruhiger als das Einladungs-Formular — kein Glas, kein Gold; der Knopf ist eine Kontur */
.news{position:relative;display:grid;gap:12px;max-width:720px;margin-top:clamp(40px,9vw,64px);padding-top:clamp(28px,6vw,40px);border-top:1px solid var(--linie)}
.news__titel{font:400 clamp(22px,5.6vw,28px)/1.15 var(--sans);letter-spacing:-.01em;color:var(--tinte)}
.news__text{font-size:15px;line-height:1.5;color:var(--leise);max-width:36em;margin-bottom:6px}
.news__zeile{display:grid;gap:12px}
.news .feld input{height:50px;font-size:17px}
.news__knopf{min-height:50px;border-radius:25px;font-size:16px;color:var(--tinte);background:none;border:1px solid rgba(244,239,230,.5);box-shadow:none}
.news__knopf:hover{border-color:var(--tinte)}
.news .haken,.news .formular__klein{font-size:13px;line-height:1.5;color:var(--leise)}
.news .erfolg__titel{font-size:28px}
@media (min-width:900px){
  .news__zeile{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:end}
  .news__knopf{padding:0 26px}
}

/* Runde 5, Hebel 2 (Rhythmus): drei Sätze bekommen einen eigenen Bildschirm mit viel Luft, nach dem Vorbild der stillen
   Sektion 3: „… zeigen nur deine Daten." (2), der Kernsatz (7), die Zusage (10). Ein Satz, groß, sonst nichts. */
.satz2,.kernsatz,.zusage{min-height:74svh;display:grid;align-content:center;margin-block:clamp(20px,5vw,60px);padding-top:0;border-top:0;
  font-size:clamp(30px,8.4vw,60px);line-height:1.1;font-weight:200;letter-spacing:-.03em;color:var(--tinte);max-width:16em}
.satz2 em,.kernsatz em,.zusage em{display:block;margin:.3em 0 0}
.zusage em{margin-bottom:.3em}
.jetzt{margin-top:0}

/* ---------- ab 900 px: gleiche Welt, mehr Luft ---------- */
@media (min-width:900px){
  body{font-size:18px}
  :root{--dock:74px}
  .hero__buehne{padding-top:19svh;padding-bottom:calc(var(--dock) + 6vh)}
  .hero__bild img{object-position:50% 60%}
  .hero__sonne{left:50%;top:60%}
  .hero__marke{top:34px;right:auto;width:52vw;max-width:none}
  .hero h1{font-size:clamp(46px,min(4.6vw,7.4svh),84px)}
  .hero__text{margin-left:36%;max-width:760px}
  .hero .knopf{width:auto;min-width:320px}
  .portraits{margin-inline:0;gap:4px}
  .bild--band{height:min(46vw,72vh)}
  .bild--band.bild--flach{height:min(40vw,66vh)}
  .hoch{margin-top:-140px}
  .wisch{padding-inline:max(var(--rand),calc((100vw - 1240px) / 2 + var(--rand)));scroll-padding-inline:max(var(--rand),calc((100vw - 1240px) / 2 + var(--rand)))}
  .wisch>*{flex-basis:340px}
  .fakten{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}
  .fakt{align-content:start;row-gap:10px;padding:18px 0 22px}
  .fakt:last-child{border-bottom:0}
  .fakt__zahl{font-size:clamp(44px,4.4vw,64px)}
  .duo__paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);column-gap:clamp(40px,5vw,84px);align-items:start;margin-top:clamp(28px,3.4vw,52px)}
  .duo .kreuze{margin-top:0}
  .kreuze__liste label{font-size:18px}
  .duo__rechts{display:block;position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
  .kopplung,.kopplung[data-klebt]{position:static;margin:0;padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .kurve{margin-top:18px}
  .kurve__bild{height:auto;aspect-ratio:356/150}
  .kurve__ruhe{margin-top:18px}
  [data-kopplung="aus"] .duo__paar{display:block}
  .nach{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:clamp(40px,5vw,84px);align-items:end}
  .nach__kurve{grid-column:1/-1;grid-row:2}
  .nach h2{font-size:clamp(40px,4.5vw,66px)}
  .nach__text{margin-top:0}
  .messgroessen .karte{flex-basis:calc(25% - 6px)}
  .gruender{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start;padding-inline:var(--rand)}
  .gruender__text{padding-inline:0}
  .dock__zeile{max-width:1240px;margin-inline:auto}
  .dock__spur{max-width:1240px;margin-inline:auto}
  .sek--vollbild .bild--grund img,.buehne .bild--grund img,.finale__bild img{object-position:50% 70%}
  .finale__bild img{object-position:50% 22%}
  .finale__sonne{top:30%}
}

/* ---------- ohne Bewegung: Endzustand ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ======================================================================================================
   v6 (Runde 6, ART-DIRECTION-V6 + PRUEFUNG): alle Breiten
   ====================================================================================================== */
/* Punkt 4: Erklärung vor Liste und Diagramm (nur bei gekoppelter Fassung; im Rückfall bleibt die h2 in Sektion 6) */
.duo__erklaerung{font-size:clamp(20px,5.4vw,30px);line-height:1.25;font-weight:300;color:var(--tinte);letter-spacing:-.015em;max-width:22em;margin-bottom:clamp(28px,7vw,48px);padding-bottom:clamp(20px,5vw,32px);border-bottom:1px solid var(--linie)}
.duo__erklaerung em{display:block}
[data-kopplung="an"] #s6 .nach__kopf h2{display:none}
[data-kopplung="aus"] .duo__erklaerung{display:none}
/* Punkt 5 + PRUEFUNG: Diagramm und Legende im Hauptdesign, kein Text-/Linien-/Haken-Glow */
.gruppen li{color:var(--leise)}
.gruppen li[data-an]{color:var(--tinte);text-shadow:none;text-decoration:underline;text-underline-offset:3px}
.k-achse{stroke:rgba(244,239,230,.22);stroke-width:1}
.k-life{stroke:rgba(244,239,230,.7);stroke-width:1}
.k-ende{stroke:rgba(244,239,230,.5);stroke-width:1;stroke-dasharray:2 4;opacity:1}
.k-normal{stroke:var(--eis);stroke-width:1.5}
.k-hyper{stroke:var(--gruen);stroke-width:2}
.k-hyper--glut{display:none}
.kurve .k-flaeche{opacity:calc(.35 + .65 * var(--k,0))}
.k-punkt{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-width:1.25px}
.kurve__marken{display:grid;gap:6px}
.kurve__marken .km{color:var(--leise);letter-spacing:.04em}
.km--life::before{height:1px;background:var(--tinte)}
.km--normal::before{height:1.5px;background:var(--eis)}
.km--hyper::before{height:2px;background:var(--gruen);box-shadow:none}
.kurve__achsen{color:var(--leise)}
.kurve__hinweis,.kurve__zusatz{font-size:15px;line-height:20px;color:var(--leise)}
input:checked+.kasten{box-shadow:none}
.gegenfeld input:checked+.kasten{box-shadow:none}
/* Punkt 7.3: betonte Satzhälften über Helligkeit, nicht über Gewicht; Absatztext in --text */
.absaetze--gross p{color:var(--text)}

/* v6 Mobilblock (Punkt 2 + 3 + 7.3): nur Größen, Abstände, mobil-aus; Sektion 3 (.stille__*) bleibt ausgenommen */
@media (max-width:899px){
  body{font-size:16px;line-height:1.5}
  h2{font-size:clamp(30px,8.2vw,56px)}
  .hero h1{font-size:clamp(29px,9vw,56px)} .hero h1 em{font-size:1.22em}
  .hero__sub{font-size:clamp(19px,5vw,26px)}
  .schlag{font-size:clamp(42px,12vw,84px)}
  .reihe{font-size:clamp(34px,9.4vw,64px)}
  #s9 h2{font-size:clamp(32px,8.8vw,60px)}
  .profil{font-size:clamp(48px,13.4vw,96px)}
  .zehn{font-size:clamp(37px,10.2vw,72px)}
  .finale__headline{font-size:clamp(36px,9.9vw,72px)}
  .grosszahl__zahl{font-size:clamp(95px,28vw,180px)}
  .jetzt em[data-riesig]{font-size:clamp(119px,36.5vw,240px)}
  .zehn em[data-riesig]{font-size:clamp(143px,44vw,300px)}
  .preis__zahl{font-size:clamp(61px,17.8vw,110px)}
  .satz2,.kernsatz,.zusage{font-size:clamp(26px,7.1vw,44px);min-height:56svh}
  .definition__wort{font-size:clamp(29px,7.8vw,44px)}
  .definition__text,.dim__text{font-size:clamp(19px,5vw,24px)}
  .definition__leit{font-size:clamp(22px,6vw,30px)}
  .absaetze--gross p,.grosszahl p,.absaetze--system p,.preis__text,.gross,.jetzt{font-size:clamp(17px,4.5vw,21px);line-height:1.4}
  .absaetze--system p:last-child{font-size:clamp(20px,5.5vw,28px)}
  .antwort--auf p:first-child{font-size:clamp(26px,7vw,40px)} .antwort--gegen p{font-size:clamp(22px,6vw,34px)}
  .kreuze__liste label{font-size:16px;min-height:44px;padding:5px 0}
  .gegenfeld label{font-size:22px}
  .sek{padding-block:clamp(64px,10.5vh,110px)}
  .absaetze{gap:18px;margin-top:clamp(24px,6vw,40px)}
  .stand{margin-bottom:clamp(22px,5vw,36px)}
  .sek--vollbild{min-height:100svh} .buehne{min-height:105svh}
  .knopf{min-height:52px;font-size:16px} .feld input{height:52px;font-size:16px}
  .fakt__zahl{font-size:clamp(31px,8.7vw,40px)}
  .mobil-aus{display:none!important}
  .fakt:nth-child(3),.fakt:nth-child(5),.fakt:nth-child(7){display:none}
  main .absaetze:not(.stille__text) em{font-size:1em!important;color:var(--tinte)}
}

/* v6 Bewegungsblock (Punkt 8): scroll-gesteuert, nur mit Unterstützung und ohne reduzierte Bewegung */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  /* overflow:hidden macht .bild zum Scroll-Container und hält view() an; clip schneidet gleich, ohne Scroll-Container zu sein */
  .bild--band,.bild--grund{overflow:clip}
  .bild--band img{animation:bandzug linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes bandzug{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}
  #s4 .bild--grund img,#s9 .bild--grund img,.buehne .bild--grund img{animation:naeher linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  @keyframes naeher{from{transform:scale(1.2)}to{transform:scale(1)}}
}}
/* v6 7.4: Dock-Zeile im Hero ist jetzt Mono; enger gesetzt, damit „schematisch, keine Vorhersage" bei 390 px nicht abgeschnitten wird */
.dock__marke{letter-spacing:-.06em}
.dock__hero span:last-child{letter-spacing:-.06em}

/* v7 · Runde 7 (Bauanweisung ART-DIRECTION-V7 + PRUEFUNG) */
/* 2 · Zahlenblöcke in Hauptschrift */
.fakt .einordnung{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.45;letter-spacing:0;color:var(--tinte)}
/* 4 · „Jetzt" ohne Abschnitt, Studie lesbar */
.jetzt em[data-riesig]{margin-left:0;padding-left:.13em;padding-right:.05em}
#s2 .quellen p{font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:0;color:var(--text)}
#s2 .quellen{margin-top:clamp(28px,7vw,48px)}
/* 6 · Diagramm getrennt (data-kopplung="aus"), eine Spalte */
.dock[data-zaehler] .dock__wert{display:none}
.k-achse{stroke:var(--eis)}
.kurve__achsen,.kurve__achsen .km{color:var(--eis)}
.kurve__marken .km{font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--text)}
.nach__kurve{margin-top:clamp(30px,8vw,56px)}
@media (min-width:900px){.nach{display:block}.nach__text{max-width:40em;margin-top:clamp(26px,3vw,44px);text-align:left}.nach__kurve{max-width:860px}}
/* 7 · Jonas: Hero, Gründer, Portraits am Ende, Finale, Ausblick */
.hero__text{align-items:center;text-align:center}
.hero h1{margin-inline:auto}
@media (min-width:900px){.hero__text{margin-inline:auto}.gruender{align-items:center}}
.abschluss{margin-top:clamp(72px,18vw,140px);text-align:center}
.abschluss .portraits{margin-top:0}
.abschluss__frage{margin-top:clamp(28px,7vw,48px)}
.abschluss .knopf{margin:24px auto 0;width:100%;max-width:420px}
.finale__paar{display:grid;gap:clamp(28px,7vw,48px);margin-top:clamp(28px,7vw,48px)}
.finale .preis{margin-top:0;padding-top:0;border-top:0}
.finale__paar>.formular{margin-top:0}
@media (min-width:900px){.finale__paar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,84px);align-items:start}}
[data-ausblick]{max-width:40em;margin-inline:auto}
[data-ausblick]>p:first-child{text-align:center}

/* v7b · Jonas Mobil (Lukas 15:58): Säulen raus, Hero tiefer, Knopf direkt unter dem Opener */
@media (max-width:480px){
  .hero__buehne{padding-top:calc(96px + 48px + env(safe-area-inset-top,0px))}
  .hero__text{justify-content:flex-start;gap:22px;flex:0 0 auto}
  .hero .knopf{margin:0 auto}
}

/* v7c · Lukas 16:22 */
.hero__huelle{position:absolute;inset:0;overflow:hidden;z-index:-1}
.hero__buehne{overflow:visible}
.js .hero .knopf{will-change:translate}
/* v7e · 6 · Kurve baut sich wie im ersten Entwurf vom Vormittag auf: festgehaltene Bühne (sticky) über eine lange Strecke, Zeichnen per stroke-dashoffset
   (erst Lifespan + Healthspan normal, dann Hyperathlete-Ansatz mit Schreibkopf, danach Lücke/Fläche). Ohne JS / bei reduzierter Bewegung: ganze Kurve (kein .js). */
.js [data-kopplung="aus"] .nach__kurve{height:250vh;height:250svh;max-width:860px}
@media (max-width:899px){
  .js [data-kopplung="aus"] .nach__kurve{height:180vh;height:180svh}
  /* v7f · 3 · Grafik senkrecht mittig zwischen Kopf und Dock der festgehaltenen Bühne */
  .js [data-kopplung="aus"] .nach__kurve>.duo__rechts,.js [data-kopplung="aus"] .nach__kurve>[data-kurventeil]{top:0;height:calc(100vh - var(--dockh,78px));height:calc(100svh - var(--dockh,78px));display:flex;flex-direction:column;justify-content:center}
  .js [data-kopplung="aus"] .nach__kurve>.duo__rechts>.kopplung{margin-top:0}
}
.js [data-kopplung="aus"] .nach__kurve>.duo__rechts,.js [data-kopplung="aus"] .nach__kurve>[data-kurventeil]{position:sticky;top:max(72px,9svh)}
.js .kurve .k-life,.js .kurve .k-normal,.js .kurve .k-hyper{stroke-dasharray:1;stroke-dashoffset:1}
.js .kurve .k-flaeche,.js .kurve .k-luecke{opacity:0}
.js .kurve .k-ende{opacity:0}
.k-kopf{display:none}
.js .k-kopf{display:block;position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#E6FFF1;box-shadow:0 0 12px 3px rgba(95,227,161,.75);opacity:0;pointer-events:none}
.js .kurve__bild .k-punkt{opacity:0}
.js .kurve__marken .km{transition:opacity .6s var(--kurve)}
@media (max-width:899px){.buehne .bild--grund img[data-slot="profil"]{object-position:66% 30%}}

/* v7d (Fund Leerfläche nach „Jetzt."/Studie): Sektion 3 nicht mehr 128svh hoch und zentriert; bis ≤ 899 px natürliche Höhe, Abstand zur Stand-Zeile ≈ Rhythmus der anderen Sektionen */
@media (max-width:899px){
  .sek--stille{min-height:0;align-content:start;padding-top:clamp(16px,5vw,32px)}
}

/* ===== v7e · Runde 7e (Lukas-Review v7c) ===== */
/* 2 · „Jetzt." weiter zur Mitte: das J (Schwung links) steht mit mindestens 28 px Luft */
.jetzt em[data-riesig]{padding-left:.24em}
/* 3a · Slot profil: VO₂max-Messung (Maske, Messgerät, Rad im Hintergrund) statt Kettlebell-Mann; Ausschnitt auf Maske und Rad */
.buehne .bild--grund img[data-slot="profil"]{object-position:50% 55%}
@media (max-width:899px){.buehne .bild--grund img[data-slot="profil"]{object-position:96% 45%}}
/* 4 · EKG: ganze Linie baut sich beim Scrollen von links nach rechts auf (--ekg 0..1); Schreibkopf = dünner Lichtstrich an der Kante. Ohne JS / ruhig: ganze Linie, kein Kopf. */
.puls__kopf{display:none}
.js .puls__kopf{display:block;position:absolute;top:8%;bottom:8%;left:calc(var(--ekg,1) * 100%);width:2px;margin-left:-1px;background:linear-gradient(to bottom,transparent,var(--eis) 30%,var(--eis) 70%,transparent);box-shadow:0 0 12px 2px rgba(95,140,166,.8);opacity:0;pointer-events:none}
.js .bild--band[data-schreibt] .puls__kopf{opacity:1}
/* 7 · Preis und Warteliste: links Überschrift + Preis, rechts das Formular, beide ungefähr gleich hoch (Desktop); mobil untereinander */
.finale__links{display:flex;flex-direction:column;gap:clamp(22px,5vw,34px)}
.finale__links .finale__headline{margin-top:0;font-size:clamp(26px,6.9vw,44px);line-height:1.08}
.finale__links .gross{margin:0}
.finale__paar{margin-top:clamp(70px,18vw,150px)}
.preis__mono{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:900px){.finale__paar{align-items:stretch}.finale__links{justify-content:space-between}.finale__links .finale__headline{font-size:clamp(34px,3.4vw,50px)}}
/* 8 · Abschluss „Das System ist erst der Anfang": zentriert, nach Preis/Warteliste, vor dem Fuß */
.schlussblock{position:relative;z-index:1;padding-block:clamp(72px,18vw,150px);text-align:center;background:rgba(4,4,6,.35)}
.schlussblock .zukunft{margin:0 auto;max-width:34em}
.schlussblock .zukunft>p{text-align:center}
.schlussblock .zeitleiste{display:inline-grid;text-align:left;margin-inline:auto}
/* 9 · Quellen: deutlich kleiner, Hauptschrift (Manrope), im Fuß unter dem Leitsatz und über Impressum/Datenschutz */
.fuss .quellenteil{padding:0;margin-top:clamp(22px,5vw,32px);border-top:0;background:none}
.fuss .quellenteil__titel{font-family:var(--sans);font-weight:500;font-size:12px;line-height:1.4;letter-spacing:.04em;text-transform:none;color:var(--leise)}
.fuss .quellenteil__liste{margin-top:10px;max-width:none}
.fuss .quellenteil__liste li{font-family:var(--sans);font-size:11px;line-height:1.45;letter-spacing:0;color:var(--leise);padding:5px 0;grid-template-columns:2.4em minmax(0,1fr);scroll-margin-top:96px}
.fuss .quellenteil__nr{color:var(--leise)}
.fuss .quellenteil__text{font-family:var(--sans);font-size:11px;line-height:1.45;margin-top:8px;color:var(--leise)}
.fuss .quellenteil__liste li:target{color:var(--tinte)}
.fuss .quellenteil__liste em{font-style:normal}
.schlussblock .zeitleiste{margin-block:clamp(28px,7vw,44px)}
/* 10 · Warteliste-Knopf zwischen den Sektionen (Stil des Hero-Knopfs) */
.zwischenknopf{position:relative;z-index:1;display:flex;justify-content:center;padding:clamp(36px,9vw,72px) var(--rand)}
.zwischenknopf .knopf{width:100%;max-width:420px}
@media (min-width:900px){.zwischenknopf .knopf{width:auto;min-width:320px}}
#warteliste-formular{scroll-margin-top:84px}

/* v7f · 1 · Sprachzeile vorerst nicht zeigen (Text bleibt in content.js) */
[data-t="footer.sprache"]{display:none!important}
/* v7f · 2 · Dock-Knopf erst, wenn der große Hero-Knopf aus dem Bild ist (Klasse per IntersectionObserver; ohne JS sichtbar) */
.dock.dock--heroknopf .dock__cta{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s var(--kurve),visibility 0s linear .2s}
.dock .dock__cta{transition:opacity .2s var(--kurve),visibility 0s}

/* =====================================================================
   v8 · Lukas-Review v7g (15 Punkte). Alles Bewegte hat ohne JS (kein .js) und bei reduzierter Bewegung (.ruhig) seinen Endzustand.
   ===================================================================== */
/* 1 · Dock: Schrift wie das Hauptdesign (Manrope statt Mono) */
.dock__marke,.dock__marke span,.dock__hero span:last-child{font-family:var(--sans)!important;font-weight:500;font-size:15px;letter-spacing:0!important;font-variant-numeric:tabular-nums}
.dock__marke{color:var(--eis)}
.dock__hero span:last-child{color:var(--leise)}
/* 3 · Absatz hinter den Studienkarten */
.s1__nach{margin-top:clamp(40px,10vw,72px)}
.s1__nach .absaetze{margin-top:0}
/* 4 · neun Punkte: ohne JS gefüllt, mit JS erst, wenn sie im Bildschirm stehen */
.neun i{background:var(--eis);border-color:var(--eis);box-shadow:0 0 18px rgba(95,140,166,.7);transition-delay:calc(var(--n) * 110ms)}
.js .neun:not([data-da]) i{background:transparent;border-color:var(--eis);box-shadow:none}
.js .neun[data-da] i{transition-delay:calc(.15s + var(--n) * 140ms)}
/* 5 · Schluss von Sektion 2: eng, nacheinander, größer und fetter */
.s2folge{margin-top:clamp(40px,10vw,72px);display:grid;gap:0}
.s2folge p{margin:0;color:var(--tinte)}
.s2folge .welche{font-size:clamp(22px,5.9vw,30px);line-height:1.22;font-weight:200;letter-spacing:-.02em;max-width:22em;min-height:0;display:block;border:0;padding:0}
.s2folge .welche em{display:block;margin-top:.2em;font-size:1.3em;line-height:1.05;padding-bottom:.08em}
.s2folge .nein{font-size:clamp(34px,10vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.035em;margin-top:.34em;min-height:0;display:block}
.s2folge .nein+.nein{margin-top:.12em}
.s2folge .jetzt{margin-top:.16em;min-height:0;font-size:clamp(21px,5.6vw,30px)}
.s2folge .jetzt em[data-riesig]{margin-top:0}
.js .s2folge>*{opacity:0;transform:translateY(26px);transition:opacity 1s var(--kurve),transform 1.1s var(--kurve);transition-delay:calc(var(--i,0) * .85s)}
.js .s2folge>.jetzt{transition-delay:calc(var(--i,0) * .85s + .3s)}
.js .s2folge[data-da]>*{opacity:1;transform:none}
/* 6 · Mutter-Sektion nicht gerendert */
#s3[hidden]{display:none!important}
/* 7 · Warteliste-Knopf unten am Bild Vater/Kind; die nächste Sektion beginnt minimal tiefer */
#s4{grid-template-rows:auto 1fr}
.s4__knopf{position:relative;z-index:2;align-self:end;display:flex;justify-content:center;padding:clamp(24px,6vw,40px) var(--rand) clamp(20px,5vh,40px)}
.s4__knopf .knopf{width:100%;max-width:420px}
@media (min-width:900px){.s4__knopf .knopf{width:auto;min-width:320px}}
#s5{margin-top:clamp(28px,7vw,52px)}
/* 8 · Kurve: kürzere festgehaltene Strecke */
.js [data-kopplung="aus"] .nach__kurve{height:140vh;height:140svh}
@media (max-width:899px){.js [data-kopplung="aus"] .nach__kurve{height:118vh;height:118svh}}
/* 10 + 15 · drei Dimensionen in „Gemessen an uns“, untereinander, ohne Seitwärtsscrollen */
.dimensionen{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
.dimensionen .dim{min-height:0;gap:12px;padding:20px 18px;overflow-wrap:anywhere}
/* 12 · Satz unter den vier Bildern */
.s8__weitere{margin-top:clamp(18px,4.5vw,30px)}
.s8__weitere p{margin:0;color:var(--tinte)}
.messgroessen{margin-bottom:0}
.messgroessen .karte::after{display:none}
/* 13 · Abstand zwischen den vier Bildern und „Leute wie du sind selten“ bewusst kleiner */
#s8{padding-bottom:clamp(20px,5vw,36px)}
#s9{margin-top:0}
/* 14 · Healthspan 92 %: Linie zeichnet sich, Punkte leuchten kurz gold, am Ende groß grün mit Gold */
.delta__spur{stroke-dasharray:1;stroke-dashoffset:0}
.js .delta svg{clip-path:none;transition:none}
.js .delta .delta__spur{stroke-dashoffset:1;opacity:0}
.js .delta .delta__lot{opacity:0;transition:opacity 1.2s var(--kurve) .2s}
.js .delta[data-da] .delta__lot{opacity:1}
.js .delta[data-da] .delta__spur{opacity:1;animation:dZeichnen 3.4s linear .3s forwards,dEnde 2.4s ease-out 3.7s forwards}
.js .delta circle{opacity:.0;transform-box:fill-box;transform-origin:center}
.js .delta[data-da] circle{opacity:1;animation:dPunkt 1.1s ease-out both}
.js .delta[data-da] circle:nth-of-type(1){animation-delay:.3s}
.js .delta[data-da] circle:nth-of-type(2){animation-delay:1.95s}
.js .delta[data-da] circle:nth-of-type(3){animation-delay:3.65s;animation-duration:2.4s;animation-name:dZiel}
@keyframes dZeichnen{to{stroke-dashoffset:0}}
@keyframes dPunkt{0%{opacity:0;transform:scale(.5);fill:var(--grund);stroke:var(--eis)}25%{opacity:1;transform:scale(1.5);fill:#FFC46B;stroke:#FFE9C4;filter:drop-shadow(0 0 14px rgba(255,196,107,.95))}100%{opacity:1;transform:none;fill:var(--grund);stroke:var(--eis);filter:none}}
@keyframes dZiel{0%{opacity:0;transform:scale(.5);fill:var(--grund)}20%{opacity:1;transform:scale(1.8);fill:#FFC46B;stroke:#FFE9C4;filter:drop-shadow(0 0 16px rgba(255,196,107,.95))}60%{transform:scale(2.4);fill:#B7F5D4;stroke:var(--gruen);filter:drop-shadow(0 0 30px rgba(52,211,153,.95)) drop-shadow(0 0 16px rgba(255,196,107,.6))}100%{opacity:1;transform:scale(1.25);fill:var(--gruen-hell);stroke:var(--gruen);filter:drop-shadow(0 0 16px rgba(52,211,153,.9))}}
@keyframes dEnde{0%{filter:drop-shadow(0 0 8px rgba(52,211,153,.7))}35%{filter:drop-shadow(0 0 26px rgba(52,211,153,1)) drop-shadow(0 0 18px rgba(255,196,107,.85))}100%{filter:drop-shadow(0 0 14px rgba(52,211,153,.9)) drop-shadow(0 0 6px rgba(255,196,107,.35))}}

/* v8 · 4: „90 %“ steht groß darüber; im Satz bleibt es nur für Vorlesegeräte und die Volltext-Prüfung (Textquelle wörtlich) */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* v8b: Hero mobil ohne Sepia (nur das Hochformat-Bild; Desktop-Bild unverändert) */
@media (max-width:899px){.hero__bild img{filter:none}@keyframes herozoom{from{transform:scale(1.1);filter:brightness(.45)}}}
/* v8b: Ergebnis-Bild (s10), quadratisch, ohne Zuschnitt, kein Filter */
.ergebnis{margin-top:clamp(28px,7vw,48px);max-width:560px}
.ergebnis img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
/* v8b: Kreis-Bild ab 900 px: Köpfe und Oberkörper */
/* v8c: Köpfe erst unter dem letzten Textabsatz (Text endet ≈ 670 px unter Sektionsoberkante; Köpfe liegen bei ≈ 0,59 · Breite) */
@media (min-width:900px){#s9 .bild--grund img[data-slot="kreis"]{object-position:50% 30%;object-position:50% min(0px,calc(740px - 59vw))}#s9{min-height:88vw}}
/* v8b: Kreis-Bild mobil nach unten gerückt, damit die Köpfe unter Headline und Text liegen (Leinwand oben/unten dunkel) */
@media (max-width:899px){#s9 .bild--grund img[data-slot="kreis"]{margin-top:15vh;margin-top:15svh}}

/* ===== Launch 01.10.2026 · Feedback Jonas ===== */
/* 1 · „Jeder siebte …" liegt auf dem Arm-/Armband-Bild; Bild abgedunkelt, bleibt erkennbar */
#s1 .bild--titel{height:min(132vw,86vh)}
#s1 .bild--titel img{filter:brightness(.5) saturate(.9)}
#s1 .bild--titel .schlag{position:absolute;z-index:2;inset:0;margin:0 auto;max-width:1240px;padding:16% var(--rand) 0;text-shadow:0 2px 30px rgba(0,0,0,.55);pointer-events:none}
@media (min-width:900px){#s1 .bild--titel{height:min(60vw,86vh)}#s1 .bild--titel .schlag{padding-top:9%}}
/* 3 · Gründerfoto: so weit herangezoomt, dass es genau so hoch ist wie der Text daneben */
@media (min-width:900px){
  .gruender{align-items:stretch}
  .gruender__bild{aspect-ratio:auto;height:auto;min-height:340px}
  .gruender__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
}
/* 4 · „Gebaut an der Grenze …" unter der Punkte-Linie, direkt am eigenen Text */
#s8 .punkte+.innen h2{margin-top:clamp(28px,6vw,48px)}
#s8 .punkte+.innen h2+.absaetze{margin-top:clamp(16px,3.5vw,26px)}
/* 5 · „By measurement, not feel" dicht an die Geld-zurück-Zusage */
#s10 .zusage{min-height:0;margin-bottom:0}
#s10 .siegel{margin-top:clamp(14px,3vw,22px)}
#s10.sek{padding-bottom:clamp(20px,4vw,36px)}
/* 6 · Porträts folgen mit kurzem Abstand */
#s11.sek{padding-top:clamp(20px,4vw,36px)}
#s11 .abschluss{margin-top:0}
/* Launch 01.10. · Platz sparen (gemessen 390 px: 20.185 px Seitenhöhe) */
.sek{padding-block:clamp(52px,8.5vh,108px)}
@media (max-width:899px){.sek{padding-block:clamp(44px,7vh,74px)}}
/* Kurven-Strecke: Lukas v8 · 8 gilt (140/118 svh, oben) */

/* ===== Launch 01.10. · Intro: Logo mittig → oben, dann der Hero ===== */
.kopf{text-align:center}
.kopf__marke{margin-inline:auto}
.js .intro{position:relative}
.js .intro .hero__buehne{position:sticky;top:0}
.js .intro__strecke{height:60vh;height:60svh}
.js .hero__marke{
  /* Größe wie die Wortmarke auf dem Teaser: Bildschirm minus Rand, höchstens 1200 px */
  --w:min(calc(100vw - 2 * var(--rand)),1200px);
  position:absolute;z-index:3;left:50%;right:auto;max-width:none;
  width:var(--w);top:calc(14px + env(safe-area-inset-top,0px));
  /* Nur transform animieren (kein Layout pro Scroll-Frame); main.js setzt translate/scale direkt */
  transform-origin:50% 0;will-change:transform;
  transform:translate(-50%,30svh) scale(1);
  animation:introauf 1.6s var(--kurve) both}
@keyframes introauf{from{opacity:0;filter:blur(8px)}}
/* Das Bild liegt von Anfang an hinter dem Logo, etwas gedimmt, und hellt beim Scrollen auf */
.js .intro .hero__bild{opacity:calc(.6 + var(--intro,0) * .4)}
.js .intro .hero__text{opacity:clamp(0, calc((var(--intro,0) - .6) * 3), 1);translate:0 calc(max(0, .95 - var(--intro,0)) * 40px)}
/* Hero-Bild (mit filter) und Sonne (mix-blend) als eigene Ebenen: beim Scrollen nur zusammensetzen, nicht neu rastern */
.js .hero__bild,.js .hero__sonne{will-change:transform}
@media (prefers-reduced-motion:reduce){.js .intro__strecke{display:none}.js .intro .hero__buehne{position:relative}}
/* Übergabe ohne Flackern: Das Intro-Logo endet exakt dort, wo das Kopf-Logo sitzt; der Kopf erscheint ohne Überblendung */
.kopf{transition:none}
/* Launch 01.10. · Kurve: Startpunkt als grüner Punkt auf der Linie statt dunkler Ring (der Ring schnitt beide Linien durch) */
.kurve__bild .k-punkt{width:8px;height:8px;margin:-4px 0 0 -4px;background:#5FE3A1;border:0;box-shadow:0 0 10px 2px rgba(95,227,161,.55)}
/* v8d: Bildfeld mobil 26 px tiefer (unten überstehend, von .hero__buehne beschnitten): Gesichter bleiben unter der Headline, auch bei niedrigem sichtbarem Bereich */
@media (max-width:899px){.hero__bild{bottom:-26px}}

/* ===== v9 · Lukas-Review v8d (01.10. ~18:15) ===== */
/* 1 · Satzfolge Sektion 2: mehr Abstand; die ersten beiden Zeilen so groß wie der Absatz davor; Erscheinen an den Scroll gekoppelt (main.js setzt --o je Zeile), Platz reserviert.
   Ohne JavaScript und bei reduzierter Bewegung (--o = 1) steht alles vollständig. */
.s2folge{margin-top:clamp(52px,13vw,96px)}
.s2folge .nein{font-size:clamp(22px,5.9vw,30px);line-height:1.2;margin-top:clamp(22px,6vw,34px)}
.s2folge .nein+.nein{margin-top:clamp(18px,5vw,28px)}
.s2folge .jetzt{margin-top:clamp(22px,6vw,34px)}
.js .s2folge .s2zeile,.js .s2folge[data-da] .s2zeile{opacity:var(--o,0);transform:none;transition:none}
/* 2 · Warteliste-Knopf sitzt mittig auf der Naht zwischen Deich-Bild (s4) und Nacht-Bild (s5) */
#s4{position:relative}
#s4 .s4__knopf{position:absolute;left:0;right:0;bottom:0;transform:translateY(50%);padding:0 var(--rand);z-index:5;align-self:auto}
#s5{margin-top:0}
/* 3 + 4 · Kurve im normalen Seitenfluss (keine festgehaltene Bühne), kleinere Abstände davor und danach */
.js [data-kopplung="aus"] .nach__kurve,.js [data-kopplung="aus"] .nach__kurve>.duo__rechts,.js [data-kopplung="aus"] .nach__kurve>[data-kurventeil]{height:auto;position:static;top:auto;display:block}
.nach__kurve,[data-kopplung="aus"] .nach__kurve{margin-top:clamp(20px,4.5vw,32px);margin-bottom:0}
.sek--nach{padding-bottom:clamp(28px,6vw,44px)}
/* 5 · Profil-Bild und Gründerbild direkt aneinander */
.buehne{margin-bottom:0}
.gruender{margin-top:0}
/* 6 · „Gemessen und verifiziert an unseren Daten:“ als einzelne Zeile, kein Kasten */
.marken{margin-top:clamp(28px,7vw,44px);gap:0}
.marken span,.marken span:first-child{padding:0;border:0;color:var(--tinte)}
.dimensionen{margin-top:16px}
/* 8 · Delta-Animation schneller (3,4 s → 2,4 s, Zeitpunkte mitgezogen) */
.js .delta[data-da] .delta__spur{animation:dZeichnen 2.4s linear .3s forwards,dEnde 1.7s ease-out 2.7s forwards}
.js .delta[data-da] circle:nth-of-type(2){animation-delay:1.47s}
.js .delta[data-da] circle:nth-of-type(3){animation-delay:2.65s;animation-duration:1.7s;animation-name:dZiel}
/* 7 · „Leute wie du sind selten“ mobil: Überschrift zweizeilig; Subtext unter den Füßen der Männer (dunkler Bereich unter dem Foto), nicht über den Köpfen */
@media (max-width:899px){
  #s9{display:flex;flex-direction:column;min-height:calc(100svh + 10px);padding-bottom:clamp(40px,9vw,64px)}
  #s9 h2{font-size:clamp(24px,7.35vw,40px)}
  #s9 .innen{flex:1 1 auto;display:flex;flex-direction:column}
  #s9 .innen .absaetze{margin-top:auto}
  #s9 .bild--grund img[data-slot="kreis"]{margin-top:12svh}
}

/* ===== v9b · In-App-Browser (Instagram) robust machen; außerhalb von html.inapp / html.wk bleibt alles wie v9 ===== */
/* 1 · Korn: in WebKit rendert die erste SVG-Filter-Kachel weiß (Quadrat oben links); dort und im In-App-Modus ganz aus. Chromium behält das Korn. */
html.inapp .korn{display:none}
/* 2 · Dock: flächig deckend, Unschärfe nur Zugabe (WebKit und In-App) */
html.inapp .dock{background:rgba(10,8,6,.96)}
html.inapp .dock[data-instrument]{background:rgba(10,8,6,.97)}
/* 3 · In-App: nichts hängt am Scroll. Bild-Parallaxen aus (Endzustand), Hero-Knopf steht fest unter dem Opener */
html.inapp .bild--band img{animation:none!important;transform:scale(1.14)}
html.inapp #s4 .bild--grund img,html.inapp #s9 .bild--grund img,html.inapp .buehne .bild--grund img{animation:none!important;transform:none}
html.inapp .hero .knopf{will-change:auto} /* v9c: Position setzt main.js einmal (knopfUnten), nicht scrollgekoppelt */
html.inapp.js .s2folge .s2zeile,html.inapp.js .s2folge[data-da] .s2zeile{transition:opacity .6s var(--kurve)}
/* 4 · Dock-Abstand unten +8 px (Instagram meldet oft safe-area 0); niedriger Webview: dichteres Dock, flachere Kurve */
html.inapp .dock{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
@media (max-height:640px){
  html.inapp .dock{padding-top:8px}
  html.inapp .dock__zeile{margin-top:6px;min-height:34px}
  html.inapp .kurve__bild{height:80px;aspect-ratio:auto}
}
/* 1b · Das Quadrat oben links (WebKit): die Zahl im Finale (background-clip:text + drop-shadow-Filter) malt ihre erste Kachel an die Seitenecke.
   In WebKit/In-App ohne den Filter (nur der Schein um die Zahl entfällt), Chromium bleibt wie v9. */
html.inapp .finale__zahl,html.inapp [data-voll] .finale__zahl{filter:none}

/* Launch 01.10. (Jonas) · Geld-zurück-Zusage links, Bild „Zettel vor dem Laptop" rechts, leichter vertikaler Fade */
.zusage-paar .ergebnis{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
@media (min-width:900px){
  .zusage-paar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;margin-top:clamp(56px,14vw,100px)}
  .zusage-paar .zusage{margin-top:0}
  .zusage-paar .ergebnis{margin-top:0;max-width:none}
}
/* Launch 01.10. (Jonas) · Dimensionen unter Gründerfoto und Text; ab 900 px nebeneinander */
.gruender__dims{max-width:1240px;margin-inline:auto}
@media (min-width:900px){.gruender__dims .dimensionen{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3vw,44px)}}
/* Launch 01.10. (Jonas) · Geld-zurück: Text etwas kleiner und leicht über den linken Fade des Bildes; Bild größer, weiche Kante zum Text */
.zusage-paar .zusage{font-size:clamp(21px,5.6vw,32px)}
.zusage-paar .ergebnis{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 32%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 32%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect}
@media (min-width:900px){
  .zusage-paar{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0}
  .zusage-paar .zusage{position:relative;z-index:2;margin-right:-14%;font-size:clamp(24px,2.3vw,34px)}
}
/* Launch 01.10. (Jonas) · Zettel-Bild stimmiger: rundum weiche Kanten, leicht in den Seitenton gedimmt; mobil randlos */
.zusage-paar .ergebnis img{filter:brightness(.86) saturate(.88)}
.zusage-paar .ergebnis{
  margin-inline:calc(var(--rand) * -1);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%)}
@media (min-width:900px){
  .zusage-paar .ergebnis{
    margin-inline:0 calc(var(--rand) * -1);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 34%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%)}
}
/* Launch 01.10. (Jonas) · „Denn wir sind felsenfest …" links über der Zusage, neben dem Bild */
.zusage-links{position:relative;z-index:2}
.zusage-vor{margin-top:0}
.zusage-vor p{color:var(--leise)}
.zusage-links .zusage{margin-top:clamp(18px,4vw,28px)}
@media (min-width:900px){.zusage-links{margin-right:-14%}.zusage-paar .zusage{margin-right:0}}
/* Launch 01.10. (Jonas) · Zettel-Bild: Hauch Gold wie das Startbild, setzt sich beim Hereinscrollen mit langsamem Zoom */
.zusage-paar .ergebnis img{filter:sepia(.14) saturate(.95) brightness(.86)}
.js .zusage-paar .ergebnis img{transform:scale(1.09);transition:transform 2.8s var(--kurve)}
.js .zusage-paar .ergebnis[data-da] img{transform:none}
@media (prefers-reduced-motion:reduce){.js .zusage-paar .ergebnis img{transform:none;transition:none}}
/* Launch 01.10. (Jonas) · Kacheln 01–03: Text oben bündig unter dem Titel statt unten */
.gruender__dims .dim__text{margin-top:0}

/* Okt. 2026 (Jonas) · Sektion 8: Text-Overlay auf den vier Messwert-Kacheln.
   Titel steht immer unten (Mono, Eisblau = Gemessenes), der Erklärtext erscheint oben bündig bei Hover/Fokus (Rechner) oder Antippen (Handy). */
/* Die Karte bleibt 3:4, wächst aber mit, wenn der offene Text mehr Platz braucht (Handy): Knopf liegt im Fluss, overflow:clip statt hidden. */
.messgroessen .karte--info{overflow:clip;align-content:stretch}
.karte--info .karte__knopf{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:stretch;cursor:pointer;-webkit-tap-highlight-color:transparent}
.karte--info .karte__knopf:focus-visible{outline:2px solid var(--tinte);outline-offset:-2px}
.karte--info .karte__knopf::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,8,6,.9) 0,rgba(10,8,6,.55) 22%,rgba(10,8,6,0) 48%);transition:background .45s var(--kurve)}
.karte__info{position:relative;z-index:2;width:100%;padding:14px;display:flex;flex-direction:column}
.karte__titel{margin-top:auto;padding-top:16px;border-top:1px solid rgba(244,239,230,.3);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:12px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--eis-hell)}
.karte__zeichen{position:relative;flex:none;width:11px;height:11px;margin-top:2px}
.karte__zeichen::before,.karte__zeichen::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1px;background:currentColor;transition:transform .35s var(--kurve)}
.karte__zeichen::after{transform:rotate(90deg)}
.karte__text{order:-1;display:grid;grid-template-rows:0fr;opacity:0;margin-bottom:0;font-family:var(--sans);letter-spacing:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;font-size:13px;line-height:1.42;font-weight:300;color:var(--tinte);overflow:hidden;
  transition:grid-template-rows .45s var(--kurve),opacity .35s var(--kurve),margin-bottom .45s var(--kurve)}
.karte--info span{position:static;z-index:auto;padding:0}
.karte__innen{min-height:0;overflow:hidden}
.karte--info .karte__knopf img{z-index:0}
.karte__knopf[aria-expanded="true"]::before{background:rgba(10,8,6,.82)}
.karte__knopf[aria-expanded="true"] .karte__text{grid-template-rows:1fr;opacity:1;margin-bottom:16px}
.karte__knopf[aria-expanded="true"] .karte__zeichen::after{transform:rotate(0)}
@media (hover:hover){
  .karte__knopf:is(:hover,:focus-visible)::before{background:rgba(10,8,6,.82)}
  .karte__knopf:is(:hover,:focus-visible) .karte__text{grid-template-rows:1fr;opacity:1;margin-bottom:16px}
  .karte__knopf:is(:hover,:focus-visible) .karte__zeichen::after{transform:rotate(0)}
}
@media (min-width:900px){
  .karte__info{padding:18px}
  .karte__titel{font-size:13px}
  .karte__text{font-size:15px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){.karte__text,.karte__knopf::before,.karte__zeichen::after{transition:none}}


/* ---------- Invite only (Jonas, 10./11.10.2026): Code-Feld vor dem unscharfen Formular ----------
   Das Formular steht von Anfang an da, aber unscharf und gesperrt (inert, siehe main.js). Davor, mittig, Code-Feld und
   ein kleiner Knopf in einer Zeile. Ein gültiger Code nimmt Unschärfe und Sperre weg; der Code-Block blendet aus. */
.formular{position:relative}
.schritt{display:grid;gap:14px;transition:filter .8s var(--kurve),opacity .8s var(--kurve)}
.formular--zu .schritt{filter:blur(7px);opacity:.45;pointer-events:none;user-select:none;-webkit-user-select:none}
.schloss{position:absolute;z-index:2;left:20px;right:20px;top:50%;translate:0 -50%;transition:opacity .4s var(--kurve),visibility 0s}
.schloss::before{content:"";position:absolute;inset:-40px -20px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(9,11,18,.92),rgba(9,11,18,.6) 60%,rgba(9,11,18,0))}
.formular:not(.formular--zu) .schloss{opacity:0;visibility:hidden;transition:opacity .4s var(--kurve),visibility 0s linear .4s}
.schloss label{color:var(--tinte)}
.schloss__zeile{display:flex;gap:10px;align-items:center}
.feld.schloss input{flex:1;height:48px;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.schloss .knopf--klein{flex:none;min-height:48px;padding:0 20px;font-size:15px;border-radius:24px;
  box-shadow:0 0 0 1px rgba(255,243,220,.75) inset,0 0 0 1px rgba(255,196,107,.5),0 6px 22px rgba(255,180,84,.3)}
@media (prefers-reduced-motion:reduce){.schritt,.schloss,.formular:not(.formular--zu) .schloss{transition:none}}

/* Rechts-Check 12.10.2026 (Punkt 14): Hinweis „KI-generiert“ — dezent, klein, rechts unten im Bild.
   Bänder und Grundbilder blenden oben und unten aus (mask), dort sitzt er über der Ausblendung. */
.ki-hinweis{position:absolute;right:10px;bottom:10px;z-index:2;pointer-events:none;font-family:var(--mono);font-size:9px;line-height:1;letter-spacing:.08em;color:rgba(244,239,230,.5);text-shadow:0 1px 6px rgba(10,8,6,.8)}
.bild--band .ki-hinweis{bottom:20%}
.bild--grund .ki-hinweis{bottom:14%}
.karte .ki-hinweis{position:absolute;padding:0;top:10px;bottom:auto}
.finale__bild .ki-hinweis{top:9%;bottom:auto}