/* ============================================================
   Fassung 2 — warm cream editorial
   Liegt NACH stil.css und lego.css. Ueberschreibt nur das Sichtbare,
   die DOM-Struktur der Module (Monster, Stationen, Baukasten) bleibt.
   Keine Schatten, nur Linien. Thunder gross, Mono klein, viel Luft.
   ============================================================ */
:root{
  --creme:#F4EFE6; --papier:#FAF7F1; --tinte:#243060;
  --linie:rgba(36,48,96,.16); --linie-stark:rgba(36,48,96,.34);
  --r:18px; --r-lg:28px; --breite:1240px; --nav-h:76px; --spalte:34rem;
}
html{scroll-padding-top:100px}
body{background:var(--creme);color:var(--tinte);font-family:var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
*{box-shadow:none!important}

/* ---------- Typo ---------- */
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-leise);display:flex;align-items:center;gap:12px;margin:0}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow--blau{color:var(--blau)}
.h1,.h2,.h3{font-family:var(--display);font-weight:700;letter-spacing:.005em;color:var(--tinte);text-transform:none}
.h2{font-size:clamp(2.8rem,5vw,4.7rem);line-height:.9;margin:16px 0 0;max-width:14ch}
.h3{font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95}
.h4{font-family:var(--sans);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;margin-top:8px}
.gross{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;max-width:var(--spalte);color:var(--text)}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.nr{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-leise)}

/* ---------- Sektionen ---------- */
.sec{padding:clamp(96px,11vw,168px) 0;border-top:1px solid var(--linie);background:var(--creme)}
.sec--weiss{background:var(--papier)}
.sec--creme-hell{background:var(--creme)}
.sec--navy{background:var(--tinte);color:#fff;border-top:0}
.sec--navy .h2,.sec--navy .h3,.sec--navy .h4{color:#fff}
.sec--navy .gross{color:var(--text-hell)}
.sec--navy .eyebrow{color:var(--tuerkis)}
.lede{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a b" "h b";gap:12px 56px;align-items:end;margin-bottom:clamp(48px,6vw,84px)}
.lede .eyebrow{grid-area:a}
.lede .h2{grid-area:h}
.lede .gross{grid-area:b;margin:0;align-self:end;max-width:32rem;justify-self:start}
p.lede{display:block}
@media(max-width:860px){.lede{grid-template-columns:1fr;grid-template-areas:"a" "h" "b"}.lede .gross{margin-top:20px}}

/* ---------- Knoepfe, Chips, Karten ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:.95rem;border-radius:999px;padding:15px 24px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;line-height:1;transition:transform .18s,background .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-1px)}
.btn--tuerkis,.btn--blau{background:var(--tinte);color:#fff}
.btn--tuerkis:hover,.btn--blau:hover{background:var(--navy-tief)}
.sec--navy .btn--tuerkis,.schluss .btn--tuerkis,.dl__form .btn--tuerkis{background:var(--tuerkis);color:#12301F}
.sec--navy .btn--tuerkis:hover,.schluss .btn--tuerkis:hover{background:#8BD0AE}
.btn--rand,.btn--rand-hell{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.btn--rand:hover,.btn--rand-hell:hover{border-color:var(--tinte)}
.sec--navy .btn--rand{color:#fff;border-color:rgba(255,255,255,.35)}
.btn--sm{padding:11px 18px;font-size:.88rem}
.btn--voll{width:100%}
.chip{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--linie-stark);border-radius:999px;padding:8px 12px;background:transparent;color:var(--tinte)}
.sec--navy .chip,.schluss .chip{border-color:rgba(255,255,255,.3);color:#fff}
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:28px}
.hinweis{background:transparent;border:1px solid var(--linie);border-left:3px solid var(--tinte);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-top:16px;font-size:.98rem;line-height:1.5}

/* ---------- Navigation (schwebende Pille) ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;background:transparent;border:0;height:auto;padding:0 16px;box-shadow:none}
.nav__in{max-width:var(--breite);margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 10px 0 22px;border-radius:999px;background:rgba(250,247,241,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--linie);transition:background .2s}
.nav--fest .nav__in{background:rgba(250,247,241,.96)}
.nav__logo{color:var(--tinte);display:flex;align-items:center;gap:10px;text-decoration:none}
.nav__logo svg{height:24px;width:auto;display:block}
.nav__tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-leise);border:1px solid var(--linie);border-radius:999px;padding:4px 8px}
.nav__links{display:flex;gap:2px}
.nav__link{color:var(--tinte);font-size:.9rem;font-weight:500;padding:8px 12px;border-radius:999px;text-decoration:none;opacity:.78;transition:opacity .15s,background .15s}
.nav__link:hover{background:rgba(36,48,96,.06);opacity:1}
.nav__rechts{display:flex;gap:8px;align-items:center}
.burger span{background:var(--tinte)}
.mobmenu{background:var(--creme);color:var(--tinte)}
.mobmenu a{color:var(--tinte);font-family:var(--display);font-size:2.6rem;letter-spacing:.01em}
.mobmenu a.btn{font-family:var(--sans);font-size:1rem}
@media(max-width:1000px){.nav__links{display:none}.nav__rechts .btn--rand-hell{display:none}}

/* ---------- Hero ---------- */
.held{padding:calc(var(--nav-h) + 72px) 0 0;background:var(--creme);position:relative;overflow:hidden}
.held__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:end}
.held__titel{font-family:var(--display);font-weight:700;font-size:clamp(4.4rem,9.6vw,9.4rem);line-height:.86;letter-spacing:.005em;color:var(--tinte);margin:22px 0 0}
.held__titel em{font-style:normal;color:var(--blau)}
.held__sub{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;max-width:32rem;margin-top:34px;color:var(--text)}
.held__klein{font-size:1rem;line-height:1.55;color:var(--text-leise);max-width:30rem;margin-top:16px}
.held__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:36px}
.held__note{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.wand{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;padding-bottom:10px}
.wand__reel{aspect-ratio:9/16;border-radius:22px;border:1px solid var(--linie-stark);background:var(--papier);padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:var(--tinte)}
.wand__reel:nth-child(2){background:var(--tinte);color:#fff;border-color:var(--tinte);transform:translateY(-28px)}
.wand__reel:nth-child(3){transform:translateY(-10px)}
.wand__zahl{font-family:var(--display);font-size:clamp(3.4rem,6vw,5.8rem);line-height:.85;letter-spacing:.01em}
.wand__label{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:8px;line-height:1.5}
.wand__meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;opacity:.85}
.wand__bar{height:3px;background:rgba(36,48,96,.12);border-radius:2px;margin-top:10px;overflow:hidden}
.wand__reel:nth-child(2) .wand__bar{background:rgba(255,255,255,.2)}
.wand__bar i{display:block;height:100%;width:38%;background:var(--tuerkis)}
.wand__reel:nth-child(2) .wand__bar i{width:64%}
.wand__reel:nth-child(3) .wand__bar i{width:92%}
.streifen{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:22px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.streifen div{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);display:flex;gap:12px;align-items:baseline;line-height:1.4}
.streifen b{font-family:var(--display);font-size:2rem;line-height:1;color:var(--tinte);letter-spacing:.01em;flex:none}
.dreier{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;margin:56px 0 0;background:var(--papier)}
.dreier a{padding:28px 30px;border-right:1px solid var(--linie);text-decoration:none;color:var(--tinte);display:block;transition:background .2s}
.dreier a:last-child{border-right:0}
.dreier a:hover{background:#fff}
.dreier .name{font-family:var(--display);font-size:2.5rem;line-height:1;letter-spacing:.01em}
.dreier .was{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);margin-top:8px}
.dreier p{margin-top:14px;font-size:.95rem;color:var(--text);line-height:1.45}
.dreier .preis{margin-top:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.dreier .preis b{font-family:var(--display);font-size:1.7rem;color:var(--tinte);letter-spacing:.01em;margin-right:6px}
.held__satz{margin:64px 0 0;padding:26px 0 0;border-top:1px solid var(--linie);font-size:1.05rem;color:var(--text);max-width:44rem}
.held__satz b{color:var(--tinte)}
@media(max-width:900px){.held__grid,.dreier,.streifen{grid-template-columns:1fr}.dreier a{border-right:0;border-bottom:1px solid var(--linie)}.dreier a:last-child{border-bottom:0}.wand{max-width:420px}.wand__reel:nth-child(2),.wand__reel:nth-child(3){transform:none}}

/* ---------- Monster ---------- */
.monster__buehne{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r-lg)}
.zaehler>div{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r)}
.zahl{font-family:var(--display);font-size:3rem;letter-spacing:.01em;line-height:1}

/* ---------- Spielregeln ---------- */
#spielregeln .karte{background:var(--papier)!important;border-color:var(--linie)!important}
.regel-liste li{border-top:1px solid var(--linie);padding:14px 0}
.regel-liste li:first-child{border-top:0}
.i-du,.i-wir{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;border-radius:999px;padding:5px 8px}
.i-du{background:var(--blau-zart);color:var(--blau-tief)}
.i-wir{background:var(--tuerkis-zart);color:var(--tuerkis-tief)}
.nicht{background:transparent;border:1px solid var(--linie);border-radius:var(--r-lg);padding:40px}
.absage{background:var(--tinte);color:#fff;border-radius:var(--r);padding:28px}
.absage .h4{color:#fff}

/* ---------- Stationen ---------- */
.saeule{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);transition:border-color .2s,background .2s}
.saeule--an{border-color:var(--tinte);background:#fff}
.saeule .h4{font-family:var(--display);font-size:1.9rem;font-weight:700;letter-spacing:.01em;line-height:1}
.menge{margin-top:40px}
.menge__opts button{border:1px solid var(--linie-stark);background:transparent;color:var(--tinte);border-radius:999px;font-family:var(--display);font-size:1.4rem}
.menge__opts button[aria-pressed="true"]{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.ergebnis{background:var(--tinte);color:#fff;border-radius:var(--r-lg);padding:40px}
.ergebnis__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tuerkis)}
.ergebnis__name{font-family:var(--display);font-size:clamp(2.8rem,4.5vw,4rem);letter-spacing:.01em;line-height:.95;color:#fff}
.ergebnis__txt{color:var(--text-hell)}
.ergebnis__preis b{font-family:var(--display);font-size:clamp(3.2rem,5.5vw,4.8rem);color:var(--tuerkis);letter-spacing:.01em;line-height:.9}
.ergebnis__preis span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-hell-leise)}

/* ---------- Baukasten ---------- */
.pillar-tabs button{border-radius:999px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.bauplatte{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);background:rgba(255,255,255,.04)}

/* ---------- Pakete ---------- */
.startblock{background:var(--tinte);color:#fff;border-radius:var(--r-lg);padding:48px}
.startblock .h3{color:#fff}
.startblock .eyebrow{color:var(--tuerkis)}
.preis-gross{font-family:var(--display);font-size:clamp(3.8rem,6vw,5.6rem);line-height:.9;color:var(--tuerkis);letter-spacing:.01em}
.startblock li{border-top:1px solid rgba(255,255,255,.14);padding:14px 0;color:var(--text-hell)}
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;margin-top:56px;background:var(--papier)}
.paket{border:0;border-right:1px solid var(--linie);border-radius:0;background:var(--papier);padding:40px 34px 34px;position:relative;transform:none}
.paket:last-child{border-right:0}
.paket--top{background:#fff;transform:none;border-color:var(--linie)}
.paket__name{font-family:var(--display);font-size:clamp(2.8rem,4vw,3.8rem);line-height:.9;letter-spacing:.01em;color:var(--tinte)}
.paket__claim{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);margin-top:10px}
.paket__preis{margin-top:28px;display:flex;align-items:baseline;gap:8px}
.paket__preis b{font-family:var(--display);font-size:clamp(3.2rem,4.6vw,4.6rem);line-height:.9;letter-spacing:.01em;color:var(--tinte)}
.paket__preis span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.paket__lauf{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);margin-top:8px}
.paket__fahne{position:absolute;top:20px;right:20px;background:var(--tinte);color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;border-radius:999px;transform:none;left:auto}
.paket__saeulen{margin-top:26px;padding-top:22px;border-top:1px solid var(--linie);display:grid;gap:10px}
.paket__saeulen>div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.92rem}
.paket ul{margin-top:24px;padding-top:24px;border-top:1px solid var(--linie);list-style:none;padding-left:0}
.paket li{font-size:.95rem;line-height:1.45;padding:8px 0 8px 22px;position:relative}
.paket li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:1px;background:var(--tinte)}
.paket__teil,.paket__fuer{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);font-size:.92rem;line-height:1.5;color:var(--text);background:transparent;border-radius:0}
.paket__teil b,.paket__fuer b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);margin-bottom:6px}
@media(max-width:900px){.pakete{grid-template-columns:1fr}.paket{border-right:0;border-bottom:1px solid var(--linie)}.paket:last-child{border-bottom:0}.startblock{padding:32px}}

.wds{margin-top:32px;border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;background:var(--papier)}
.wds__kopf,.wds__zeile{display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr 1fr;align-items:center;padding:20px 30px;border-top:1px solid var(--linie);gap:12px}
.wds__kopf{border-top:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise);background:transparent}
.wds__zeile b{font-family:var(--display);font-size:2.1rem;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--tinte)}
.wds__zeile--top{background:#fff}
.wds__wer{font-weight:600;font-size:1rem}
.wds__wer--wir{color:var(--tuerkis-tief)}
.wds__wer--du{color:var(--blau-tief)}
.wds__n{font-family:var(--display);font-size:1.8rem;letter-spacing:.01em}
.wds__preis{font-family:var(--display);font-size:2.1rem;letter-spacing:.01em;text-align:right;color:var(--tinte)}
.wds__fuss{padding:16px 30px;border-top:1px solid var(--linie);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--text-leise);line-height:1.6}
@media(max-width:700px){.wds__kopf{display:none}.wds__zeile{grid-template-columns:1fr 1fr;padding:18px 20px}.wds__zeile b{grid-column:1/-1}.wds__preis{text-align:left}}

/* ---------- Fuer wen ---------- */
.persona{background:transparent;border:0;border-top:1px solid var(--linie-stark);border-radius:0;padding:28px 0 0}
.persona__avatar{width:auto;height:auto;background:transparent!important;color:var(--tinte)!important;font-family:var(--display);font-size:4.4rem;line-height:.9;border-radius:0;display:block;margin-bottom:18px;letter-spacing:.01em}
.persona__zitat{font-family:var(--display);font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:.98;margin:12px 0 16px;letter-spacing:.005em;color:var(--tinte)}
.persona dl{border-top:1px solid var(--linie);margin-top:20px;padding-top:12px}
.persona dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise)}

/* ---------- Downloads ---------- */
.dl{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r-lg)}
.dl__form{background:var(--tinte);border-radius:var(--r-lg);color:#fff}
.dl__eingabe input{border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff}

/* ---------- FAQ ---------- */
.faq{max-width:54rem}
.f-item{border:0;border-top:1px solid var(--linie);border-radius:0;background:transparent}
.f-item:last-child{border-bottom:1px solid var(--linie)}
.f-q{font-family:var(--sans);font-weight:600;font-size:1.15rem;padding:24px 0;color:var(--tinte);background:transparent;text-align:left}
.f-a__in{padding:0 0 26px;color:var(--text);max-width:44rem;line-height:1.55}

/* ---------- Schluss ---------- */
.schluss{background:var(--tinte)}
.kalender{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg)}
.slot{border-radius:999px;font-family:var(--mono)}

/* ---------- Bewegung ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv--da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.martin{display:none!important}

/* ---------- Nachbesserung nach erstem Render ---------- */
.nav__logo svg,.nav--fest .nav__logo svg{color:var(--tinte);height:30px;width:auto}
.wand__meta{flex-direction:column;gap:3px;align-items:flex-start;line-height:1.3}

/* ============================================================
   Fassung 3 — Struktur nach impilo.health, Kleid bleibt Loop Studio
   ============================================================ */
html,body{overflow-x:clip}
body{background:var(--tinte)} /* hinter allem liegt der Footer */

/* ---------- Nav: volle Breite oben, beim Scrollen schmaler und durchsichtiger ---------- */
.nav__in{max-width:var(--breite);transition:max-width .45s cubic-bezier(.2,.8,.2,1),height .35s,background .35s,padding .35s}
.nav--fest .nav__in{max-width:860px;height:52px;background:rgba(250,247,241,.72);padding:0 8px 0 16px}
.nav .nav__link,.nav--fest .nav__link{color:var(--tinte);opacity:.75}
.nav .nav__link::after{display:none}
.nav .nav__link:hover,.nav--fest .nav__link:hover{color:var(--tinte);background:rgba(36,48,96,.07);opacity:1}
.nav__logo img{height:30px;width:auto;display:block;transition:height .35s}
.nav--fest .nav__logo img{height:24px}
.nav--fest .nav__tag{display:none}
.nav--fest .btn--sm{padding:9px 14px;font-size:.82rem}

/* ---------- Blatt-Prinzip: Hero bleibt stehen, die Seite schiebt sich darueber, der Footer liegt hinter allem ---------- */
.held{position:sticky;top:0;z-index:1;min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 80px;background:var(--creme)}
.blatt{position:relative;z-index:2;background:var(--creme);border-radius:40px 40px 0 0;box-shadow:none;overflow:clip}
.blatt>.sec:first-child{border-top:0}
.fuss{position:sticky;bottom:0;z-index:0;background:var(--tinte);color:#fff;padding:48px 0 28px}
.fuss__in{display:flex;flex-direction:column;gap:28px}
.fuss__oben{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fuss__logo{height:36px;width:auto;display:block}
.fuss__links{display:flex;gap:6px 22px;flex-wrap:wrap}
.fuss__links a{color:rgba(255,255,255,.78);text-decoration:none;font-size:.95rem;padding:4px 0}
.fuss__links a:hover{color:#fff}
.fuss__unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fuss__unten a{color:inherit;text-decoration:none}
.fuss__unten a:hover{color:#fff}

/* ---------- Hero ---------- */
.held__grid{align-items:center;gap:48px}
.held__titel{font-size:clamp(4.2rem,9vw,8.8rem)}
.wort{display:inline-grid;color:var(--blau);vertical-align:top;overflow:hidden;line-height:.86}
.wort__w{grid-area:1/1;opacity:0;transform:translateY(60%);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;will-change:transform}
.wort__w--an{opacity:1;transform:translateY(0)}
.wort__w--weg{opacity:0;transform:translateY(-60%)}
.held__sub{margin-top:28px;max-width:30rem}
.wand{gap:16px;padding:0}
.wand__reel{margin:0;padding:0;border:0;border-radius:24px;background:var(--tinte);position:relative;overflow:hidden;aspect-ratio:9/16;transform:none}
.wand__reel video{width:100%;height:100%;object-fit:cover;display:block}
.wand__reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(to top,rgba(20,28,60,.85),rgba(20,28,60,0));color:#fff;display:flex;flex-direction:column;gap:2px}
.wand__reel figcaption b{font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:.01em}
.wand__reel figcaption span{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.wand__reel:nth-child(2){margin-top:-36px}
.wand__reel:nth-child(3){margin-top:-12px}
@media(max-width:900px){.held{min-height:0;padding-top:calc(var(--nav-h) + 40px)}.wand{max-width:100%}.wand__reel:nth-child(2),.wand__reel:nth-child(3){margin-top:0}}

/* ---------- Baukasten: kleinere Steine, Label darunter, sie schweben ---------- */
.klickmich{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tuerkis);margin:18px 0 6px}
.bloecke{justify-content:flex-start;gap:26px 16px;align-items:flex-start}
.block--stein{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px 4px;border-radius:12px;animation:schweben 5.2s ease-in-out infinite}
.block--stein:nth-child(3n){animation-delay:-1.7s}.block--stein:nth-child(3n+1){animation-delay:-3.1s}.block--stein:nth-child(4n){animation-duration:6.4s}
.block--stein:hover{animation-play-state:paused}
.block--stein.block--an{animation:none;background:rgba(255,255,255,.08)}
.block__label{font-family:var(--sans);font-size:.78rem;font-weight:500;color:rgba(255,255,255,.82);white-space:nowrap}
.block--stein.block--an .block__label{color:#fff;font-weight:600}
.block--stein.block--an::after{display:none}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.block--stein{animation:none}}

/* ---------- Paket-Buehne (gepinnt) ---------- */
.pak{position:relative;height:300vh;margin-top:24px}
.pak__marken{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr 1fr}
.pak__marken i{display:block}
.pak__buehne{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.pak__grid{width:100%;max-width:var(--breite);margin:0 auto;padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.pak__punkte{display:flex;gap:8px;margin-bottom:22px}
.pak__punkte i{width:34px;height:4px;border-radius:2px;background:rgba(36,48,96,.15);transition:background .3s,width .3s}
.pak__punkte i.an{background:var(--tinte);width:56px}
.pak__saetze{display:grid}
.pak__satz{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pak__satz--an{opacity:1;transform:none;pointer-events:auto}
.pak__claim{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-leise)}
.pak__name{font-family:var(--display);font-size:clamp(4rem,9vw,8rem);line-height:.86;letter-spacing:.01em;color:var(--tinte);margin:10px 0 0}
.pak__preis{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.pak__preis b{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.6rem);line-height:.9;letter-spacing:.01em;color:var(--blau)}
.pak__preis span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.pak__stationen{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--linie);max-width:30rem}
.pak__stationen li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.pak__stationen em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.pak__stationen .w-du{background:var(--blau-zart);color:var(--blau-tief)}
.pak__stationen .w-wir{background:var(--tuerkis-zart);color:var(--tuerkis-tief)}
.pak__stationen .w-soft{background:rgba(36,48,96,.06);color:var(--text-leise)}
.pak__fuer{margin-top:18px;max-width:30rem;color:var(--text);font-size:.98rem;line-height:1.5}
.pak__satz .btn{margin-top:24px}
.pak__rechts{display:flex;flex-direction:column;align-items:center;gap:18px}
.pak__phone{width:min(300px,100%);aspect-ratio:9/16;border-radius:32px;overflow:hidden;background:var(--tinte);border:8px solid var(--tinte);position:relative;display:grid}
.pak__video{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.pak__video--an{opacity:1}
.pak__schilder{display:flex;gap:10px}
.pak__schild{border:1px solid var(--linie-stark);border-radius:999px;padding:8px 14px;display:flex;gap:10px;align-items:center;background:var(--papier);transition:background .3s,border-color .3s}
.pak__schild-k{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise)}
.pak__schild b{font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--blau)}
.pak__schild--wir{background:var(--tuerkis-zart);border-color:var(--tuerkis)}
.pak__schild--wir b{color:var(--tuerkis-tief)}
.pak__hinweis{max-width:var(--breite);margin:0 auto;padding:0 clamp(20px,4vw,48px);font-size:.98rem;color:var(--text)}
.pak__hinweis+h3{margin-top:64px}
@media(max-width:900px){
  .pak{height:auto}.pak__marken{display:none}.pak__buehne{position:static;height:auto}
  .pak__grid{grid-template-columns:1fr}.pak__saetze{display:grid;gap:40px}
  .pak__satz{position:static;opacity:1;transform:none;pointer-events:auto;grid-area:auto;border-top:1px solid var(--linie);padding-top:24px}
  .pak__punkte,.pak__rechts{display:none}
}

/* Huelle fuer Hero + Blatt: liegt ueber dem Footer, der sticky Hero endet mit ihr */
.seite{position:relative;z-index:1}
.held{z-index:0}