@font-face{font-family:Inter;src:url(/assets/fonts/inter.woff2?v=907a8b54) format("woff2");font-weight:300 800;font-display:swap}
:root{
  --night:#061510;--forest:#0d3a2d;--green:#1f6b52;--sage:#6fae91;--leaf:#a9d6b7;--gold:#edc86b;--gold-deep:#c99a2e;--cream:#f3efe3;--ink:#0b261e;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.4,.64,1);
  --pad:clamp(20px,4vw,64px);
  --glass:rgba(6,21,16,.38);--glass-line:rgba(243,239,227,.14);
}
*{box-sizing:border-box}
html{background:var(--night);color:var(--cream);scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--sans);font-feature-settings:"cv11","ss03";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh}
main{position:relative;z-index:1;view-transition-name:page-content}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,pre{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
main:focus{outline:none}
.container{width:min(1440px,100% - 2 * var(--pad));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-100px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:600}
.skip-link:focus{top:12px}
.stage{position:fixed;inset:0 0 auto;z-index:0;width:100%;height:100vh;height:100lvh;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.has-stage .stage{opacity:1}

/* Erst zeigen, wenn Schrift und 3D-Szene bereit sind. Die Ladeanzeige erscheint nur, wenn das länger dauert; nach 5 Sekunden wird die Seite in jedem Fall sichtbar. */
main,.site-footer{transition:opacity .8s ease}
@media (scripting:enabled){
  html:not(.is-ready) main,html:not(.is-ready) .site-header,html:not(.is-ready) .site-footer{opacity:0;animation:gate 0s 5s forwards}
  html:not(.is-ready) body::before{content:"LifeBudget";position:fixed;inset:0;z-index:180;display:grid;place-items:center;font-size:clamp(2.6rem,8vw,6rem);font-weight:780;letter-spacing:-.06em;background:linear-gradient(100deg,rgba(243,239,227,.25) 30%,var(--cream) 50%,rgba(243,239,227,.25) 70%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:fade-in .5s .45s forwards,shimmer 1.8s linear infinite,fade-out .4s 5s forwards}
  html:not(.is-ready) body::after{content:"";position:fixed;left:50%;bottom:clamp(40px,10vh,90px);z-index:180;width:min(240px,50vw);height:2px;margin-left:min(-120px,-25vw);background:linear-gradient(90deg,transparent,var(--gold),transparent) 0 0/50% 100% no-repeat,rgba(243,239,227,.12);opacity:0;animation:fade-in .5s .45s forwards,slide 1.2s var(--ease) infinite,fade-out .4s 5s forwards}
}
@keyframes gate{to{opacity:1}}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes shimmer{to{background-position:-300% 0}}
@keyframes slide{from{background-position:-100% 0,0 0}to{background-position:200% 0,0 0}}

/* Themen: Text- und Linienfarben pro Abschnitt. Die Hintergrundfarbe malt die 3D-Bühne. */
[data-theme]{position:relative;--muted:rgba(243,239,227,.84);--line:rgba(243,239,227,.16);--surface:rgba(243,239,227,.06);--accent:var(--gold);color:var(--cream)}
[data-theme=cream]{--muted:rgba(11,38,30,.8);--line:rgba(11,38,30,.14);--surface:rgba(255,255,255,.55);--accent:var(--green);color:var(--ink)}
html:not(.has-stage) [data-theme=forest]{background:radial-gradient(120% 80% at 80% 10%,#1d6a50 0,transparent 55%),radial-gradient(90% 70% at 10% 90%,#0d3a2d 0,transparent 60%),var(--night)}
html:not(.has-stage) [data-theme=aurora]{background:radial-gradient(100% 70% at 20% 20%,#2f8a72 0,transparent 55%),radial-gradient(90% 80% at 90% 80%,#0b3f44 0,transparent 60%),#05181b}
html:not(.has-stage) [data-theme=gold]{background:radial-gradient(90% 80% at 50% 50%,#c99a2e 0,#6b4f10 45%,#1b1405 100%)}
html:not(.has-stage) [data-theme=cream]{background:radial-gradient(90% 70% at 85% 15%,#dbe8d6 0,transparent 60%),#f2eddf}

/* Typografie */
.mega{font-size:clamp(4.2rem,16vw,17rem);font-weight:750;line-height:.82;letter-spacing:-.07em;margin-left:-.05em}
h2{font-size:clamp(2.5rem,6.2vw,6.4rem);font-weight:700;line-height:.94;letter-spacing:-.055em;max-width:14ch;text-wrap:balance}
h3{font-size:1.3rem;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.lead{font-size:clamp(1.15rem,1.9vw,1.65rem);font-weight:450;line-height:1.32;letter-spacing:-.018em;max-width:30ch}
.fine{font-size:.9rem;color:var(--muted)}
.legal-card a,.sources a{text-decoration-thickness:1px;text-underline-offset:4px}

/* Text-Animationen (nur mit JavaScript aktiv) */
/* Großzügiger Rand um jedes Wort: Die Maske für das Einfahren darf keine Buchstabenteile abschneiden. */
.split-line{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .16em .16em;margin:-.12em -.16em -.16em}
.split-item{display:inline-block}
.mega .split-line,.mega-link .split-line{padding-bottom:.3em;margin-bottom:-.3em}
.fx .split-item{transform:translate3d(0,115%,0) rotate(6deg);transition:transform 1.2s var(--ease) calc(var(--i) * 32ms)}
.fx .is-in .split-item{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fx [data-reveal]{opacity:0;transform:translate3d(0,48px,0);transition:opacity 1s ease,transform 1.2s var(--ease)}
.fx [data-reveal].is-in{opacity:1;transform:none}

/* Kopfleiste */
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:18px;transition:transform .7s var(--ease),opacity .8s ease}
.site-header.is-hidden{transform:translateY(-130%)}
.header-inner{display:flex;align-items:center;gap:10px}
.navigation,.lang,.home-mark,.menu-button{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:var(--cream);transition:background .4s ease,color .4s ease,border-color .4s ease}
.home-mark{display:none;place-items:center;width:48px;height:48px;border-radius:50%}
.home-mark img{width:30px;height:30px;border-radius:9px}
.navigation{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px}
.navigation a{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:999px;font-size:.92rem;font-weight:550;text-decoration:none;transition:background .3s ease,color .3s ease}
.navigation a:hover,.navigation a[aria-current=page]{background:rgba(243,239,227,.12)}
.navigation .nav-download{display:none}
.header-end{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-download{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.92rem;font-weight:650;text-decoration:none;transition:background .3s ease,color .3s ease,transform .5s var(--spring)}
.header-download:hover,.header-download[aria-current=page]{background:#f6dc8f;transform:translateY(-2px)}
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;height:48px;padding:5px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-decoration:none;isolation:isolate;overflow:hidden}
.lang span{display:grid;place-items:center;width:40px;height:36px;transition:color .5s ease}
.lang::before{content:"";position:absolute;left:5px;top:5px;z-index:-1;width:40px;height:36px;border-radius:999px;background:var(--gold);box-shadow:0 0 22px rgba(237,200,107,.45);transition:transform .75s var(--spring)}
.lang[data-lang=en]::before,.lang.is-switching[data-lang=de]::before{transform:translateX(40px)}
.lang.is-switching[data-lang=en]::before{transform:none}
.lang[data-lang=de] span:first-child,.lang[data-lang=en] span:last-child,.lang.is-switching[data-lang=de] span:last-child,.lang.is-switching[data-lang=en] span:first-child{color:var(--ink)}
.lang.is-switching[data-lang=de] span:first-child,.lang.is-switching[data-lang=en] span:last-child{color:inherit}
.lang:hover::before{box-shadow:0 0 30px rgba(237,200,107,.7)}
.tone-light .navigation,.tone-light .lang,.tone-light .home-mark,.tone-light .menu-button{background:rgba(255,255,255,.55);border-color:rgba(11,38,30,.1);color:var(--ink)}
.tone-light .navigation a:hover,.tone-light .navigation a[aria-current=page]{background:rgba(11,38,30,.08)}
.tone-light .header-download{background:var(--ink);color:var(--cream)}
.menu-button{display:none;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:600;cursor:pointer}
.menu-button::after{content:"";width:18px;height:8px;border-block:2px solid currentColor;transition:transform .5s var(--spring),height .3s ease}
.menu-button[aria-expanded=true]::after{height:0;border-bottom:0;transform:rotate(45deg)}

/* Knöpfe und Links */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:0 34px;border:0;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:650;font-size:1.02rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .6s var(--spring)}
.button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cream);transform:translateY(101%);transition:transform .6s var(--ease)}
.button:hover::before{transform:none}
.button span{display:inline-block;transform:translate3d(calc(var(--mx,0) * .4),calc(var(--my,0) * .4),0);transition:transform .6s var(--spring)}
[data-theme=cream] .button{background:var(--ink);color:var(--cream)}
[data-theme=cream] .button::before{background:var(--green)}
.more{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0;border:0;background:none;font-weight:600;text-decoration:none;cursor:pointer;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 calc(100% - 10px);transition:background-size .5s var(--ease)}
.more:hover{background-size:100% 1px}
.more span{transition:transform .5s var(--spring)}
.more:hover span{transform:translateX(6px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:40px}

/* Telefon (Bild ohne 3D) */
.phone{position:relative;width:min(300px,72vw);aspect-ratio:600/1298;padding:9px;border-radius:44px;background:#0b1512;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 60px 90px -40px rgba(0,0,0,.6)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:36px}

/* Startseite */
.home-hero{container-type:inline-size;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(120px,18vh,180px);overflow:hidden}
.home-hero .lead{font-size:clamp(1.3rem,2.4vw,2.2rem);max-width:19ch;font-weight:550;letter-spacing:-.03em}
.mega-brand{font-size:calc((100cqi - 2 * var(--pad)) / 4.55);padding-inline:var(--pad);margin:0 0 .3em;white-space:nowrap;background:linear-gradient(180deg,var(--cream) 30%,rgba(243,239,227,.25) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Der Verlauf endet an der Box jedes Buchstabens; der Rand fasst auch überstehende Teile von i, f oder t. */
.fx .mega-brand .split-item{padding:0 .12em .3em;margin:0 -.12em -.3em;background:linear-gradient(180deg,var(--cream) 30%,rgba(243,239,227,.25) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.parts{height:240vh}
.parts-head{padding-top:clamp(110px,16vh,160px)}
.part-list{position:absolute;inset:auto var(--pad) clamp(28px,6vh,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.part{padding:24px;border-radius:24px;border:1px solid var(--line);background:rgba(6,21,16,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .6s ease,transform .8s var(--ease)}
.part h3{font-size:clamp(1.6rem,2.4vw,2.4rem);font-weight:700;letter-spacing:-.04em;margin-bottom:8px;color:var(--gold)}
.part p{color:var(--muted);font-size:1.05rem}
.fx .part{opacity:var(--o,0);transform:translate3d(0,calc((1 - var(--o,0)) * 30px),0)}
@media (min-width:901px){
  .has-stage .part-list{inset:0;display:block;pointer-events:none}
  .has-stage .part{position:absolute;left:0;top:0;width:min(320px,24vw);transform:translate3d(var(--x,0),calc(var(--y,0) + (1 - var(--o,0)) * 30px),0);pointer-events:auto}
  .has-stage .part::before{content:"";position:absolute;left:-46px;top:38px;width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
  .has-stage .part.is-left::before{left:auto;right:-46px;background:linear-gradient(270deg,transparent,var(--gold))}
}

.story{padding-block:clamp(96px,16vh,180px)}
.words{font-size:clamp(2.2rem,5.6vw,6rem);font-weight:700;line-height:1;letter-spacing:-.055em;max-width:18ch}
.fx .words .split-item{opacity:.32;transform:none;transition:opacity .4s ease}
.fx .words .split-item.on{opacity:1}

.gallery{height:300vh}
.gallery-head{padding-top:clamp(110px,16vh,160px)}
.gallery-list{position:absolute;left:var(--pad);bottom:clamp(56px,11vh,110px);width:min(420px,calc(100% - 2 * var(--pad)))}
.gallery-item{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .7s var(--ease);pointer-events:none}
.gallery-item.is-active{opacity:1;transform:none;pointer-events:auto}
.gallery-item h3{font-size:clamp(2.2rem,4vw,4rem);font-weight:750;letter-spacing:-.055em;line-height:1;margin-bottom:10px}
.gallery-item p{color:var(--muted);max-width:30ch;font-size:1.1rem}
.gallery-item .phone{display:none}
html:not(.has-stage) .gallery{height:auto}
html:not(.has-stage) .gallery .pin{position:static;height:auto;overflow:visible;padding-bottom:96px}
html:not(.has-stage) .gallery-list{position:static;display:flex;gap:28px;width:auto;margin:48px var(--pad) 0;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
html:not(.has-stage) .gallery-item{position:static;flex:0 0 min(300px,75vw);opacity:1;transform:none;scroll-snap-align:start}
html:not(.has-stage) .gallery-item .phone{display:block;margin-top:24px;width:100%}
html:not(.has-stage) .gallery-progress{display:none}
.gallery-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:24px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.gallery-progress span{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}

.play{display:grid;align-content:center;padding-block:clamp(80px,12vh,140px)}
.play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.play .lead{margin-top:28px}
.deck{display:grid;gap:20px}
.deck-progress{display:flex;gap:8px}
.deck-progress span{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(11,38,30,.12);overflow:hidden}
.deck-progress span::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.deck-progress .is-now::after{transform:scaleX(.3)}
.deck-progress .is-done::after{transform:none}
.card{padding:clamp(28px,3vw,44px);border-radius:34px;background:#fbf9f2;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 50px 80px -40px rgba(11,38,30,.45),0 0 0 1px rgba(11,38,30,.06)}
.card h3{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:750;letter-spacing:-.05em;margin-bottom:10px}
.card-text{color:rgba(11,38,30,.7);font-size:1.05rem}
.card-options{display:grid;gap:10px;margin-top:28px}
.option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 22px;border:1px solid rgba(11,38,30,.12);border-radius:20px;background:#fff;text-align:left;cursor:pointer;transition:background .3s ease,border-color .3s ease,transform .4s var(--spring),opacity .4s ease}
.option strong{font-size:1.05rem;font-weight:650}
.option span{flex:none;font-size:.95rem;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.option:hover{border-color:var(--green);transform:translateX(6px)}
.option.is-chosen{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.option.is-chosen span{color:var(--gold)}
.card.is-answered .option:not(.is-chosen){opacity:.35;pointer-events:none}
.card-insight{margin-top:24px;padding:18px 22px;border-radius:20px;background:#e6efe3;font-weight:550;font-size:1.05rem}
.card-result .more{margin-top:10px}
.card-final{display:flex;flex-direction:column;gap:20px}
.final-sum{font-size:clamp(3.6rem,7vw,6.4rem);font-weight:780;letter-spacing:-.065em;line-height:.9;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--green),var(--ink));-webkit-background-clip:text;background-clip:text;color:transparent}
.final-text{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:550;letter-spacing:-.02em;line-height:1.35;max-width:34ch}
.card-final .button{align-self:flex-start;margin-top:12px}
.deck:not(.is-live) .card:nth-of-type(n+5),.deck:not(.is-live) .card-result button,.deck:not(.is-live) .deck-progress{display:none}
.fx .deck.is-live{position:relative;display:block;height:540px;perspective:1400px}
.fx .deck.is-live .deck-progress{position:absolute;inset:0 0 auto}
.fx .deck.is-live .card{position:absolute;inset:28px 0 auto;opacity:0;transform:translate3d(0,40px,-120px) rotateX(8deg);transition:transform 1s var(--ease),opacity .6s ease;pointer-events:none}
.fx .deck.is-live .card.is-current{opacity:1;transform:none;pointer-events:auto;z-index:2}
.fx .deck.is-live .card.is-next{opacity:.55;transform:translate3d(0,-22px,-80px) scale(.94);z-index:1}
.fx .deck.is-live .card.is-gone{opacity:0;transform:translate3d(-120%,-10%,0) rotate(-14deg)}
.fx .deck.is-live .card.is-out{visibility:hidden;transition:none}
.fx .deck.is-live .card-final{transform:translate3d(0,40px,0) scale(.9)}
.fx .deck.is-live .card-final.is-current{transform:none}
.fx .card-result{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s var(--ease),opacity .5s ease}
.fx .card.is-answered .card-result{max-height:240px;opacity:1}

.further{display:grid;align-items:center;padding-block:clamp(72px,11vh,130px)}
.further-text{font-size:clamp(2.2rem,5.4vw,5.6rem);font-weight:700;line-height:1.08;letter-spacing:-.055em;max-width:19ch;text-wrap:balance}
.further-text a{text-decoration:none;color:var(--cream);background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% .09em no-repeat;transition:background-size .7s var(--ease),color .4s ease;border-radius:.08em}
.further-text a:hover,.further-text a:focus-visible{background-size:100% 100%;color:var(--ink)}

.finale{display:grid;place-items:center;text-align:center;padding-block:clamp(96px,16vh,180px)}
.mega-link{display:inline-block;font-size:clamp(2.4rem,12.6vw,14rem);font-weight:780;letter-spacing:-.07em;line-height:.9;text-decoration:none;color:var(--cream);transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .7s var(--spring)}
.mega-link .split-item{transition:transform 1.2s var(--ease) calc(var(--i) * 32ms),color .4s ease}
.mega-link:hover .split-item{color:#fff3c4;animation:wave .9s var(--ease) calc(var(--i) * 40ms)}
@keyframes wave{40%{transform:translateY(-14%)}}
.finale-note{margin-top:28px;font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:600;letter-spacing:-.02em}

/* Unterseiten */
.page-hero{min-height:80svh;display:flex;flex-direction:column;justify-content:flex-end;padding-block:150px clamp(56px,10vh,110px);overflow:hidden}
.page-hero-short{min-height:70svh}
.page-hero-legal{min-height:52svh;padding-bottom:clamp(40px,7vh,80px)}
.page-hero .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);align-items:end;gap:32px 64px}
.page-hero .mega{grid-column:1/-1;font-size:clamp(2.4rem,12.4vw,16rem);white-space:nowrap}
.page-hero-legal .mega{font-size:clamp(2.4rem,10vw,12rem)}
.page-hero .lead{grid-column:2;padding-bottom:.6em}
.page-hero .actions{grid-column:1/-1;margin-top:8px}

.lost{min-height:100svh;display:grid;align-items:center;padding-block:130px 70px;text-align:center;overflow:hidden}
.lost .mega{font-size:clamp(9rem,34vw,30rem);margin:0}
.lost .lead{margin:24px auto 0;max-width:32ch}
.lost .lead span{display:block;color:var(--muted)}
.lost .actions{justify-content:center}

.tabs{height:400vh}
.tabs-track{display:flex;height:100%;width:max-content;transform:translate3d(var(--shift,0px),0,0);will-change:transform}
.tab-panel{position:relative;width:100vw;height:100%;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 80px}
.tab-panel h2{margin-bottom:24px;font-size:clamp(3rem,8vw,8.4rem)}
.tab-panel>p{font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--muted);max-width:30ch;line-height:1.4}
.tab-panel .phone{position:absolute;right:calc(var(--pad) + 4vw);top:50%;width:min(300px,24vw);transform:translateY(-50%) rotate(4deg)}
.has-stage .tab-panel .phone{display:none}
html:not(.has-stage) .tabs{height:auto}
html:not(.has-stage) .tabs .pin{position:static;height:auto}
html:not(.has-stage) .tabs-track{display:block;width:auto;transform:none}
html:not(.has-stage) .tab-panel{width:auto;min-height:100vh}

/* Jeder Abschnitt füllt mindestens den Bildschirm, damit Hintergrund und Textfarbe immer zusammenpassen. */
.know,.prepare,.goals,.lesson,.steps,.team,.sources-section{display:grid;align-content:center;padding-block:clamp(72px,11vh,130px)}
.know-grid,.goals-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.know-grid .lead+.lead{margin-top:24px}
.know-grid .lead{max-width:36ch}


.goal-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 32px;padding:22px 0;border-top:1px solid var(--line)}
.goal-list li:last-child{border-bottom:1px solid var(--line)}
.goal-list strong{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.goal-list span{color:var(--muted)}

.team-list{margin-top:64px;border-top:1px solid var(--line)}
.team-list li{padding:clamp(14px,2vw,26px) 0;border-bottom:1px solid var(--line);transition:padding .6s var(--ease)}
.team-list li:hover{padding-left:clamp(12px,2vw,32px)}
.team-name{font-size:clamp(2.4rem,7.4vw,7.6rem);font-weight:750;letter-spacing:-.065em;line-height:1;transition:color .4s ease,letter-spacing .7s var(--ease)}
.team-list li:hover .team-name{color:var(--gold);letter-spacing:-.04em}
.sources-section .lead{margin:24px 0 32px}
.sources h3{margin:48px 0 12px;font-size:clamp(1.4rem,2.2vw,2rem);font-weight:700;letter-spacing:-.04em}
.sources li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.sources li:last-child{border-bottom:1px solid var(--line)}
.sources li span{color:var(--muted);font-size:.95rem}
.sources-section .fine{margin-top:28px}

/* Rechtliches */
.legal{padding-block:0 clamp(64px,10vh,120px)}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.page-datenschutz .legal-grid{grid-template-columns:260px minmax(0,1fr)}
.legal-cards{display:grid;gap:18px;max-width:900px}
.legal-card{position:relative;padding:clamp(28px,4vw,48px);border-radius:32px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 40px 80px -60px rgba(11,38,30,.4)}
.legal-card h2{font-size:clamp(1.7rem,2.8vw,2.6rem);max-width:none;margin-bottom:18px}
.legal-card p,.legal-card dd{max-width:68ch;color:rgba(11,38,30,.82)}
.legal-card p+p{margin-top:14px}
.translation{font-size:.95rem;color:var(--muted)}
.mail{display:inline-block;font-size:clamp(1.2rem,2vw,1.6rem);font-weight:650;letter-spacing:-.02em}
.facts-list div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.facts-list dt{font-weight:650}
.checks li{position:relative;padding:12px 0 12px 40px;border-top:1px solid var(--line);font-weight:550}
.checks li::before{content:"✓";position:absolute;left:0;top:10px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--gold);font-size:.8rem}
.toc{position:sticky;top:110px;align-self:start;padding:24px;border-radius:24px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid transparent;font-size:.92rem;line-height:1.3;text-decoration:none;color:var(--muted);transition:color .3s ease,border-color .3s ease,transform .4s var(--ease)}
.toc a:hover,.toc a.is-active{color:var(--ink);transform:translateX(4px)}
.toc a.is-active{border-color:var(--green)}
.toc-bar{display:block;height:3px;margin-top:16px;border-radius:3px;background:var(--line);overflow:hidden}
.toc-bar span{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--p,0))}

/* Lizenzdateien in Editor-Optik */
.files-title{font-size:clamp(2rem,4.4vw,4rem);margin-top:24px}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;margin:32px 0 72px}
.file a{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;background:#fbf9f2;color:var(--ink);text-decoration:none;box-shadow:0 0 0 1px rgba(11,38,30,.08),0 40px 60px -45px rgba(11,38,30,.5);transition:transform .6s var(--spring),box-shadow .4s ease}
.file a:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 0 0 1px var(--green),0 50px 70px -45px rgba(11,38,30,.6)}
.file-bar{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:#ebe5d3;font:600 .78rem/1.4 var(--mono);color:rgba(11,38,30,.7)}
.file-name{min-width:0;overflow-wrap:anywhere}
.file-size{flex:none}
.file-title{padding:18px 18px 0;font-size:1.2rem;font-weight:700;letter-spacing:-.03em}
.file-title span{display:block;font-size:.9rem;font-weight:450;letter-spacing:0;color:var(--muted)}
.file-preview{flex:1;min-height:150px;max-height:170px;margin:12px 0 0;padding:4px 18px 18px;overflow:hidden;font:.72rem/1.55 var(--mono);color:rgba(11,38,30,.58);white-space:pre-wrap;overflow-wrap:anywhere;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.files-note{margin-top:-40px}

/* Fuß */
.site-footer{position:relative;z-index:1;padding:clamp(60px,10vh,120px) 0 40px;overflow:hidden;border-top:1px solid var(--line)}
.site-footer .container{container-type:inline-size}
.footer-mark{font-size:calc(100cqi / 4.65);font-weight:800;letter-spacing:-.075em;line-height:.8;padding-block:.06em .26em;margin:-.06em 0 calc(clamp(40px,6vw,80px) - .26em) -.05em;white-space:nowrap;background:linear-gradient(180deg,rgba(243,239,227,.9),rgba(243,239,227,.05) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.footer-navigation,.footer-links{display:flex;flex-direction:column;align-items:flex-start}
.footer-navigation a,.footer-links a{display:inline-flex;align-items:center;min-height:40px;font-size:1.05rem;font-weight:550;text-decoration:none;color:var(--muted);transition:color .3s ease,transform .5s var(--ease)}
.footer-navigation a:hover,.footer-links a:hover,.footer-navigation a[aria-current=page],.footer-links a[aria-current=page]{color:var(--cream);transform:translateX(6px)}
.footer-credit{color:var(--muted);text-align:right}

@media (max-width:900px){
  body{font-size:16px}
  .home-mark{display:grid}
  .header-download{display:none}
  .js .menu-button:not([hidden]){display:inline-flex}
  .js .navigation{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:100px var(--pad) 40px;border:0;border-radius:0;background:rgba(6,21,16,.94);visibility:hidden;opacity:0;clip-path:circle(0 at calc(100% - 60px) 42px);transition:clip-path .8s var(--ease),opacity .4s ease,visibility 0s .8s}
  .js .navigation.is-open{visibility:visible;opacity:1;clip-path:circle(150% at calc(100% - 60px) 42px);transition:clip-path .9s var(--ease),opacity .3s ease}
  .js .navigation a{min-height:72px;padding:0;font-size:clamp(2.4rem,11vw,4rem);font-weight:750;letter-spacing:-.06em;background:none;color:var(--cream);border-bottom:1px solid rgba(243,239,227,.12);border-radius:0;opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .8s var(--ease)}
  .js .navigation.is-open a{opacity:1;transform:none}
  .js .navigation.is-open a:nth-child(2){transition-delay:.05s}
  .js .navigation.is-open a:nth-child(3){transition-delay:.1s}
  .js .navigation.is-open a:nth-child(4){transition-delay:.15s}
  .js .navigation.is-open a:nth-child(5){transition-delay:.2s}
  .navigation .nav-download,.js .navigation .nav-download{display:flex;justify-content:center;margin-top:24px;min-height:64px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:1.2rem;letter-spacing:-.02em;border:0}
  .tone-light .navigation.is-open a:not(.nav-download){color:var(--cream)}
  .navigation{flex-wrap:wrap}
  .page-hero .container,.play-grid,.know-grid,.goals-grid{grid-template-columns:1fr}
  .page-hero .lead{grid-column:1}
  .part-list{grid-template-columns:1fr;gap:10px;bottom:24px}
  .fx .part-list{display:block;height:200px}
  .fx .part{position:absolute;inset:auto 0 0 0}
  .part{padding:16px 18px}
  .part h3{font-size:1.4rem}
  .part p{font-size:.88rem}
  .gallery-list{bottom:56px}
  .tab-panel{justify-content:flex-start;padding-top:150px}
  .has-stage .tab-panel .phone,.tab-panel .phone{display:block;position:static;align-self:center;width:auto;height:min(42svh,400px);margin-top:24px;transform:rotate(3deg)}
  .has-stage .tabs-track{display:block;width:auto;transform:none;will-change:auto}
  .has-stage .tab-panel{position:absolute;inset:0;width:auto;padding:clamp(96px,15svh,140px) var(--pad) 72px;opacity:0;transform:translate3d(0,24px,0);transition:opacity .5s ease,transform .7s var(--ease);pointer-events:none}
  .has-stage .tab-panel.is-active{opacity:1;transform:none;pointer-events:auto}
  /* Weichzeichner über der laufenden 3D-Szene kostet auf Handys jedes Bild Rechenzeit; deckendere Flächen ersetzen ihn. */
  .navigation,.lang,.home-mark,.menu-button,.part,.legal-card,.toc{backdrop-filter:none;-webkit-backdrop-filter:none}
  .lang,.home-mark,.menu-button{background:rgba(6,21,16,.72)}
  .part{background:rgba(6,21,16,.84)}
  .legal-card,.toc{background:rgba(255,255,255,.72)}
  .page-datenschutz .legal-grid{grid-template-columns:1fr}
  .toc{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-credit{grid-column:1/-1;text-align:left}
}
@media (max-width:640px){
  .goal-list li,.sources li{grid-template-columns:1fr;gap:4px}
  .facts-list div{grid-template-columns:1fr;gap:4px}
  .actions .button{flex:1 1 100%}
  .fx .deck.is-live{height:600px}
  .option{flex-direction:column;align-items:flex-start;gap:2px}
}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(page-content){animation:vt-out .55s var(--ease) both}
::view-transition-new(page-content){animation:vt-in 1s var(--ease) both}
/* Sprachwechsel: ganze Seite an Ort und Stelle überblenden, Texte erscheinen ohne erneutes Einfahren. */
.lang-swap .split-item,.lang-swap [data-reveal]{transition:none!important}
/* Die 3D-Szene läuft dabei live und scharf weiter; Kopfzeile und Footer liegen als eigene Ebenen darüber. */
.lang-swap .stage{view-transition-name:stage}
.lang-swap .site-header{view-transition-name:site-header}
.lang-swap .site-footer{view-transition-name:site-footer}
.lang-swap::view-transition-old(stage){display:none}
.lang-swap::view-transition-new(stage){animation:none}
.lang-swap::view-transition-old(page-content),.lang-swap::view-transition-old(site-header),.lang-swap::view-transition-old(site-footer){animation:lang-out .35s ease both}
.lang-swap::view-transition-new(page-content),.lang-swap::view-transition-new(site-header),.lang-swap::view-transition-new(site-footer){animation:lang-in .55s var(--ease) both}
@keyframes lang-out{to{opacity:0;filter:blur(5px)}}
@keyframes lang-in{from{opacity:0;filter:blur(5px)}}
@keyframes vt-out{to{opacity:0;transform:translateY(-6vh) scale(.97);filter:blur(6px)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0);transform:translateY(10vh)}to{clip-path:inset(0);transform:none}}
@media (max-width:900px){
  /* Ohne Weichzeichner und ohne Verschiebung; beides ruckelt am Handy. */
  @keyframes lang-out{to{opacity:0}}
  @keyframes lang-in{from{opacity:0}}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  /* Verzögerungen bleiben erhalten, damit die Sicherung der Ladeanzeige weiter greift. */
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{
  html,body{background:#fff;color:#000}
  body::before,body::after{display:none!important}
  main,.site-footer{opacity:1!important}
  .stage,.site-header,.site-footer,.actions,.finale,.further{display:none!important}
  [data-theme]{color:#000;background:none!important}
  .pin{position:static;height:auto}
  .parts,.gallery,.tabs{height:auto}
  .fx [data-reveal],.fx .split-item{opacity:1!important;transform:none!important}
}