/* Vesena · Papier, Tinte, Licht · Stand 09.11.2026
   Regeln: /root/.claude/projects/-root/memory/reference_vesena_design_system.md */

@font-face{font-family:"Mona Sans";src:url(/assets/fonts/mona-sans.627d5bfeee.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.3100e775e8.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --buehne:#ECEDF1;      /* Bühne: kühles Grau, darauf liegen die Platten */
  --platte:#FFFFFF;      /* Platte: jede Fläche mit Inhalt */
  --tinte:#0A0A0D;       /* Schrift, Knöpfe */
  --tinte-2:#5A5B66;     /* Nebentext */
  --linie:#DCDDE4;
  --nacht:#050506;       /* das eine dunkle Kapitel */
  --nacht-2:#9C9DAA;
  --licht-1:#5CC8D6;     /* Licht: der Verlauf aus dem V, einzige Farbe */
  --licht-2:#8B97F5;
  --licht-3:#B48CF2;
  --akzent:#5B4EE0;
  --licht:linear-gradient(100deg,var(--licht-1),var(--licht-2) 50%,var(--licht-3));
  --r-platte:28px; --r-innen:18px; --r-pille:999px;
  --schatten:0 1px 0 rgba(10,10,13,.04),0 24px 60px -28px rgba(10,10,13,.28);
  --kopf:"Mona Sans","Inter",system-ui,sans-serif;
  --text:"Inter",system-ui,sans-serif;
  --raus:cubic-bezier(.16,1,.3,1);
  --rand:clamp(16px,5vw,88px);
  --p:0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--buehne);color:var(--tinte);font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprung{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:12px;z-index:99}
.sprung:focus{left:8px}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:10px}

/* ── Schrift: zwei Sätze, zwei Breiten ── */
.zwei{font-family:var(--kopf);font-weight:400;line-height:.96;letter-spacing:-.03em}
.zwei>span{display:block}
.zwei .breit{font-stretch:118%;font-weight:780;font-size:clamp(2.35rem,7.2vw,7.4rem)}
.zwei .schmal{font-stretch:78%;font-weight:330;font-size:clamp(1.55rem,4.3vw,4.4rem);letter-spacing:-.015em;margin-top:.22em;color:var(--tinte-2)}
.nacht .zwei .schmal{color:var(--nacht-2)}
.mitte{text-align:center}
h1.zwei .breit{font-size:clamp(2.45rem,9.3vw,9.6rem)}
h1.zwei .schmal{font-size:clamp(1.42rem,5vw,5.2rem);color:var(--tinte)}

.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--raus);transition-delay:calc(var(--i,0)*55ms)}
.da .w>span,.da.w>span{transform:none}

/* ── Knöpfe und Pillen ── */
.knopf{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border-radius:var(--r-pille);background:var(--tinte);color:#fff;font:600 16px/1 var(--text);letter-spacing:-.01em;transform:translate(calc(var(--mx,0)*1px),calc(var(--my,0)*1px));transition:transform .5s var(--raus),background .2s,box-shadow .3s}
.knopf:hover{box-shadow:0 0 0 5px rgba(139,151,245,.35)}
.knopf-leise{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--tinte)}
.knopf-leise:hover{background:var(--platte);box-shadow:inset 0 0 0 1.5px var(--tinte),0 0 0 5px rgba(139,151,245,.35)}
.knopf-klein{height:40px;padding:0 18px;font-size:14px}
.pille{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--r-pille);box-shadow:inset 0 0 0 1.5px var(--linie);font:500 14px/1 var(--text);background:var(--platte)}
.punkt{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linie);flex:none;transition:background .35s,box-shadow .35s}
.punkt svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.4);transition:.35s var(--raus)}
.punkt.an{background:var(--tinte);box-shadow:none}
.punkt.an svg{opacity:1;transform:none}

/* ── Kopf: schwebende Pille ── */
.kopf{position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;height:60px;padding:0 10px 0 20px;border-radius:var(--r-pille);background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 rgba(10,10,13,.05),0 14px 40px -18px rgba(10,10,13,.3);font:500 14.5px/1 var(--text);white-space:nowrap;overflow:hidden;transition:background .4s,color .4s}
.kopf-marke{display:flex;align-items:center;gap:9px;font:680 19px/1 var(--kopf);font-stretch:112%;letter-spacing:-.02em}
.kopf-nav{display:flex;gap:22px;margin:0 8px}
.kopf-nav a,.kopf-an{opacity:.72;transition:opacity .2s}
.kopf-nav a:hover,.kopf-an:hover{opacity:1}
.kopf-lauf{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--licht);transform-origin:0 50%;transform:scaleX(var(--seite,0))}
.kopf.dunkel{background:rgba(22,22,26,.78);color:#fff}
.kopf.dunkel .knopf{background:#fff;color:var(--tinte)}

/* ── Auftakt ── */
.auftakt{position:relative;min-height:100svh;display:grid;place-items:center;padding:112px var(--rand) 72px;overflow:clip}
.licht{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.auftakt-in{position:relative;min-width:0;width:100%;max-width:1320px;display:flex;flex-direction:column;align-items:center;text-align:center}
.auftakt-sub{max-width:44em;margin-top:clamp(18px,2.6vw,34px);font-size:clamp(1.02rem,1.35vw,1.28rem);line-height:1.5;color:var(--tinte-2);text-wrap:balance}
.zeile-wrap{position:relative;width:min(760px,100%);margin-top:clamp(26px,3.4vw,46px)}
.zeile{position:relative;z-index:2;display:flex;align-items:center;gap:14px;height:72px;padding:0 10px 0 22px;border-radius:var(--r-pille);background:var(--platte);box-shadow:var(--schatten);font:450 clamp(1rem,1.5vw,1.22rem)/1.2 var(--text);text-align:left}
.zeile::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:var(--licht);z-index:-2;opacity:0;filter:blur(14px);animation:schluck 1.5s 1.9s var(--raus) both}
.zeile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--platte);z-index:-1}
.zeile-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip;display:flex;align-items:center}
.zeile-text .leer{color:#9a9ba6}
.strich{display:inline-block;width:2px;height:1.2em;margin-left:2px;background:var(--akzent);animation:blink 1s steps(2) infinite;flex:none}
.zeile-los{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--tinte);color:#fff;flex:none;transition:transform .4s var(--raus)}
.auftakt-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
@keyframes blink{50%{opacity:0}}
@keyframes schluck{0%{opacity:0;transform:scale(.96)}35%{opacity:.95;transform:scale(1.03)}100%{opacity:.42;transform:none}}

/* alte Bürofenster, die in die Auftragszeile fallen */
.fenster-schwarm{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1}
.fenster{position:absolute;left:0;top:0;width:190px;margin:-60px 0 0 -95px;padding:0 12px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,13,.1),0 18px 40px -18px rgba(10,10,13,.4);opacity:0;animation:saug 1.25s cubic-bezier(.6,0,.9,.4) both;animation-delay:calc(.55s + var(--n)*.17s)}
.fenster b{display:block;margin:0 -12px 10px;padding:7px 12px;border-radius:10px 10px 0 0;background:#D9DAE1;font:600 10.5px/1.2 var(--text);color:#55565f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fenster i{display:block;height:6px;margin-top:7px;border-radius:3px;background:#E6E7EC}
.fenster i:last-child{width:60%}
.fenster u{display:block;height:58px;border-radius:4px;background:repeating-linear-gradient(0deg,#E6E7EC 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,#E6E7EC 0 1px,transparent 1px 32px)}
.fenster s{display:block;height:62px;border-radius:4px;background:linear-gradient(#E6E7EC,#E6E7EC) 12px 12px/55% 8px no-repeat,linear-gradient(#EFEFF3,#EFEFF3) 12px 30px/34% 20px no-repeat,#F6F6F9;box-shadow:inset 0 0 0 1px #E6E7EC}
.f1{--n:0;--x:-46vw;--y:-40vh;--d:-9deg}
.f2{--n:2;--x:40vw;--y:-34vh;--d:7deg}
.f3{--n:4;--x:-42vw;--y:6vh;--d:5deg}
.f4{--n:1;--x:42vw;--y:10vh;--d:-6deg}
.f5{--n:3;--x:-24vw;--y:26vh;--d:-4deg}
.f6{--n:5;--x:22vw;--y:28vh;--d:9deg}
@keyframes saug{
  0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--d)) scale(.9)}
  18%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--d)) scale(1)}
  34%{opacity:1;transform:translate(calc(var(--x)*1.05),calc(var(--y)*1.05)) rotate(calc(var(--d)*1.4)) scale(1)}
  100%{opacity:0;transform:translate(0,0) rotate(calc(var(--d)*-3)) scale(.04)}
}

/* ── Laufband ── */
.band{overflow:hidden;padding:26px 0;border-block:1.5px solid var(--tinte);background:var(--buehne)}
.band-spur{display:flex;align-items:center;gap:38px;width:max-content;animation:lauf 42s linear infinite}
.band span{font:300 clamp(1.5rem,3.2vw,3rem)/1 var(--kopf);font-stretch:78%;letter-spacing:-.01em;white-space:nowrap}
.band span:nth-of-type(odd){font-weight:760;font-stretch:118%;letter-spacing:-.03em}
.band svg{width:clamp(22px,2.6vw,38px);height:clamp(22px,2.6vw,38px)}
@keyframes lauf{to{transform:translateX(-50%)}}

/* ── Ein Satz (angeheftet) ── */
.satz{position:relative;height:440vh}
.satz-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(24px,5vw,90px);padding:96px var(--rand) 32px;overflow:clip}
.satz-text .zwei .breit{font-size:clamp(2.1rem,5.2vw,5.4rem)}
.satz-text .zwei .schmal{font-size:clamp(1.5rem,3.5vw,3.6rem)}
.satz-schritte{position:relative;margin-top:clamp(22px,4vh,48px);display:grid;gap:4px;padding-left:22px}
.satz-schritte::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--linie)}
.satz-schritte::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--licht);background:linear-gradient(var(--licht-1),var(--licht-2),var(--licht-3));transform-origin:50% 0;transform:scaleY(var(--p))}
.satz-schritte li{padding:10px 0;opacity:.32;transition:opacity .5s}
.satz-schritte h3{font:650 clamp(1.05rem,1.5vw,1.3rem)/1.25 var(--kopf);font-stretch:108%;letter-spacing:-.015em}
.satz-schritte p{color:var(--tinte-2);font-size:.98rem;overflow:hidden;max-height:0;opacity:0;transition:max-height .6s var(--raus),opacity .5s}
.satz[data-akt="0"] .satz-schritte li:nth-child(1),.satz[data-akt="1"] .satz-schritte li:nth-child(2),.satz[data-akt="2"] .satz-schritte li:nth-child(3),.satz[data-akt="3"] .satz-schritte li:nth-child(4){opacity:1}
.satz[data-akt="0"] .satz-schritte li:nth-child(1) p,.satz[data-akt="1"] .satz-schritte li:nth-child(2) p,.satz[data-akt="2"] .satz-schritte li:nth-child(3) p,.satz[data-akt="3"] .satz-schritte li:nth-child(4) p{max-height:6em;opacity:1}

.app{position:relative;justify-self:center;width:min(100%,640px);height:min(74vh,660px);display:flex;flex-direction:column;border-radius:var(--r-platte);background:var(--platte);box-shadow:var(--schatten);overflow:hidden;transform:perspective(1400px) rotateY(calc((var(--p) - .5)*-7deg)) rotateX(calc((var(--p) - .5)*3deg))}
.app-kopf{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--linie);font-size:14px}
.app-v{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--tinte)}
.app-kopf b{font:650 15px/1 var(--kopf);font-stretch:110%}
.app-kopf em{margin-left:auto;font-style:normal;color:var(--tinte-2)}
.app-lauf{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px;overflow:hidden}
.app-in{display:flex;flex-direction:column;gap:14px;padding:18px 0}
.app-in>*{transition:opacity .55s var(--raus),transform .7s var(--raus),max-height .7s var(--raus),margin .7s var(--raus)}
.blase{align-self:flex-end;max-width:86%;padding:12px 16px;border-radius:20px 20px 6px 20px;background:var(--tinte);color:#fff;font-size:15px;line-height:1.4}
.arbeit{display:grid;gap:9px;font-size:14.5px;color:var(--tinte-2)}
.arbeit li{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s var(--raus),color .3s}
.pdf{display:flex;align-items:center;gap:16px;padding:12px;border-radius:var(--r-innen);background:var(--buehne)}
.pdf-blatt{width:96px;height:124px;padding:10px;border-radius:6px;background:#fff;box-shadow:0 8px 20px -10px rgba(10,10,13,.35);display:flex;flex-direction:column;gap:5px;flex:none}
.pdf-blatt b{font:700 7.5px/1.2 var(--kopf);margin:4px 0 3px}
.pdf-blatt i{height:3px;border-radius:2px;background:var(--linie)}
.pdf-blatt i.kurz{width:45%;background:var(--licht-2)}
.pdf-info b{display:block;font:600 15px/1.3 var(--text)}
.pdf-info span{font-size:13.5px;color:var(--tinte-2)}
.frage p{font-size:15.5px;line-height:1.45}
.frage-knoepfe{display:flex;gap:8px;margin-top:10px}
.pille-ja{background:var(--tinte);color:#fff;box-shadow:none;transition:transform .25s,box-shadow .4s}
.fertig{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--tinte-2)}
.app-zeile{display:flex;align-items:center;margin:0 14px 14px;height:56px;padding:0 8px 0 20px;border-radius:var(--r-pille);background:var(--buehne);font-size:14.5px;white-space:nowrap;overflow:hidden}
.app-zeile #app-tipp{overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left;unicode-bidi:plaintext}
.app-zeile .zeile-los{width:40px;height:40px;margin-left:auto}

/* Stufen: 0 tippt, 1 gesendet, 2–5 Schritte, 6 PDF, 7 Frage, 8 Ja gedrückt, 9 fertig */
.blase,.pdf,.frage,.fertig{opacity:0;transform:translateY(14px) scale(.98);max-height:0;margin-top:-14px;overflow:hidden}
.app:not([data-stufe="0"]) .blase{opacity:1;transform:none;max-height:200px;margin-top:0}
.app[data-stufe="0"] .arbeit{display:none}
.app[data-s2] .arbeit li:nth-child(1),.app[data-s3] .arbeit li:nth-child(2),.app[data-s4] .arbeit li:nth-child(3),.app[data-s5] .arbeit li:nth-child(4){opacity:1;transform:none}
.app[data-s3] .arbeit li:nth-child(1) .punkt,.app[data-s4] .arbeit li:nth-child(2) .punkt,.app[data-s5] .arbeit li:nth-child(3) .punkt,.app[data-s6] .arbeit li:nth-child(4) .punkt{background:var(--tinte);box-shadow:none}
.app[data-s3] .arbeit li:nth-child(1) .punkt svg,.app[data-s4] .arbeit li:nth-child(2) .punkt svg,.app[data-s5] .arbeit li:nth-child(3) .punkt svg,.app[data-s6] .arbeit li:nth-child(4) .punkt svg{opacity:1;transform:none}
.arbeit li .punkt{position:relative}
.app[data-s2]:not([data-s3]) .arbeit li:nth-child(1) .punkt,.app[data-s3]:not([data-s4]) .arbeit li:nth-child(2) .punkt,.app[data-s4]:not([data-s5]) .arbeit li:nth-child(3) .punkt,.app[data-s5]:not([data-s6]) .arbeit li:nth-child(4) .punkt{box-shadow:inset 0 0 0 2px var(--licht-2);animation:puls 1s ease-in-out infinite}
.app[data-s6] .pdf{opacity:1;transform:none;max-height:170px;margin-top:0}
.app[data-s7] .frage{opacity:1;transform:none;max-height:150px;margin-top:0}
.app[data-s8] .pille-ja{transform:scale(.94);box-shadow:0 0 0 6px rgba(139,151,245,.4)}
.app[data-s9] .fertig{opacity:1;transform:none;max-height:80px;margin-top:0}
.app[data-s9] .frage-knoepfe{opacity:.35}
.app:not([data-stufe="0"]) .app-zeile .strich{display:none}
@keyframes puls{50%{box-shadow:inset 0 0 0 2px var(--licht-3),0 0 0 5px rgba(139,151,245,.22)}}

/* ── Was er kann ── */
.kann{padding:clamp(80px,12vw,170px) var(--rand) clamp(80px,11vw,150px)}
.kann>.zwei{max-width:1200px;margin:0 auto}
.kacheln{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;max-width:1320px;margin:clamp(40px,6vw,84px) auto 0}
.kachel{min-width:0;grid-column:span 4;padding:14px 14px 26px;border-radius:var(--r-platte);background:var(--platte);box-shadow:var(--schatten);transform:perspective(1100px) rotateX(calc(var(--ty,0)*1deg)) rotateY(calc(var(--tx,0)*1deg));transition:transform .6s var(--raus)}
.k-browser{grid-column:span 7}
.k-folien{grid-column:span 5}
.kachel h3{margin:22px 12px 0;font:680 clamp(1.2rem,1.7vw,1.5rem)/1.15 var(--kopf);font-stretch:110%;letter-spacing:-.02em}
.kachel p{margin:8px 12px 0;color:var(--tinte-2);font-size:.98rem;max-width:38em}
.szene{position:relative;height:clamp(230px,24vw,310px);border-radius:var(--r-innen);background:var(--buehne);overflow:hidden}
.ruht *,.ruht *::before,.ruht *::after{animation-play-state:paused!important}

/* Browser */
.sz-browser{display:flex;flex-direction:column;padding:16px 16px 0}
.br-leiste{display:flex;align-items:center;gap:6px;height:42px;padding:0 8px 0 14px;border-radius:14px 14px 0 0;background:#fff;border-bottom:1px solid var(--linie)}
.br-leiste>i{width:9px;height:9px;border-radius:50%;background:var(--linie)}
.br-url{flex:1;min-width:0;margin-left:10px;padding:6px 12px;border-radius:99px;background:var(--buehne);font-size:12px;color:var(--tinte-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-ueb{padding:7px 13px;border-radius:99px;background:var(--tinte);color:#fff;font:600 12px/1 var(--text);animation:ueb 3s ease-in-out infinite}
.br-seite{position:relative;flex:1;background:#fff;padding:18px 22px;display:grid;align-content:start;gap:12px}
.br-feld label{display:block;font-size:11.5px;color:var(--tinte-2);margin-bottom:4px}
.br-feld>span{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--linie);font-size:13.5px}
.br-feld b{font-weight:500;display:inline-block;white-space:nowrap;overflow:hidden;max-width:30ch}
.t1{animation:t1 10s steps(27) infinite}
.t2{animation:t2 10s steps(27) infinite}
.br-knopf{justify-self:start;padding:10px 16px;border-radius:10px;background:var(--akzent);color:#fff;font:600 13px/1 var(--text);animation:druck 10s infinite}
.br-zeiger{position:absolute;left:0;top:0;display:flex;align-items:flex-start;animation:zeig 10s var(--raus) infinite;transform:translate(120px,120px)}
.br-zeiger em{margin:14px 0 0 -2px;padding:4px 9px;border-radius:99px;background:var(--licht);color:#0A0A0D;font:650 11px/1 var(--text);font-style:normal}
@keyframes ueb{50%{box-shadow:0 0 0 5px rgba(139,151,245,.4)}}
@keyframes t1{0%,8%{max-width:0}26%,95%{max-width:30ch}100%{max-width:0}}
@keyframes t2{0%,36%{max-width:0}54%,95%{max-width:30ch}100%{max-width:0}}
@keyframes zeig{0%{transform:translate(78%,160px)}8%,28%{transform:translate(150px,44px)}36%,56%{transform:translate(190px,104px)}66%,95%{transform:translate(90px,150px)}100%{transform:translate(78%,160px)}}
@keyframes druck{0%,67%{transform:none;box-shadow:none}70%{transform:scale(.94)}74%,93%{transform:none;box-shadow:0 0 0 5px rgba(91,78,224,.25)}100%{box-shadow:none}}
.br-zeiger{width:100%}

/* Folien */
.sz-folien{display:grid;grid-template-columns:54px 1fr;gap:14px;padding:18px}
.fo-leiste{display:grid;gap:8px;align-content:start}
.fo-leiste i{aspect-ratio:16/10;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--linie);animation:rein 8s var(--raus) infinite both}
.fo-leiste i:nth-child(2){animation-delay:.35s}.fo-leiste i:nth-child(3){animation-delay:.7s}
.fo-leiste i:first-child{box-shadow:0 0 0 2px var(--akzent)}
.fo-folie{position:relative;align-self:center;aspect-ratio:16/10;max-height:100%;border-radius:12px;background:#fff;box-shadow:0 14px 34px -18px rgba(10,10,13,.4);padding:8% 9%;display:flex;flex-direction:column}
.fo-folie b{height:11%;width:62%;border-radius:4px;background:var(--tinte);transform-origin:0 50%;animation:zieh 8s var(--raus) infinite both}
.fo-folie em{height:5%;width:38%;margin-top:4%;border-radius:3px;background:var(--linie);transform-origin:0 50%;animation:zieh 8s .25s var(--raus) infinite both}
.fo-balken{flex:1;display:flex;align-items:flex-end;gap:5%;margin-top:6%;border-bottom:1.5px solid var(--linie)}
.fo-balken i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(var(--licht-2),var(--licht-1));transform-origin:50% 100%;animation:wachs 8s var(--raus) infinite both}
.fo-balken i:nth-child(1){height:34%;animation-delay:.6s}
.fo-balken i:nth-child(2){height:52%;animation-delay:.75s}
.fo-balken i:nth-child(3){height:46%;animation-delay:.9s}
.fo-balken i:nth-child(4){height:71%;animation-delay:1.05s}
.fo-balken i:nth-child(5){height:92%;animation-delay:1.2s;background:linear-gradient(var(--licht-3),var(--akzent))}
@keyframes rein{0%{opacity:0;transform:translateX(-12px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes zieh{0%{transform:scaleX(0)}12%,92%{transform:none;opacity:1}100%{opacity:0}}
@keyframes wachs{0%{transform:scaleY(0)}16%,92%{transform:none;opacity:1}100%{opacity:0}}

/* Routinen */
.sz-routine{display:grid;align-content:center;gap:10px;padding:18px}
.ro{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;font-size:13.5px;line-height:1.2}
.ro time{flex:none;padding:5px 9px;border-radius:99px;background:var(--buehne);font:600 11.5px/1 var(--text);font-variant-numeric:tabular-nums}
.ro>span:nth-child(2){flex:1;min-width:0}
.ro .punkt{animation:ab 9s infinite both}
.ro .punkt svg{animation:abh 9s infinite both}
.r2 .punkt,.r2 .punkt svg{animation-delay:1.6s}
.r3 .punkt,.r3 .punkt svg{animation-delay:3.2s}
@keyframes ab{0%,10%{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linie)}16%,90%{background:var(--tinte);box-shadow:0 0 0 0 transparent}100%{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linie)}}
@keyframes abh{0%,10%{opacity:0;transform:scale(.4)}18%,90%{opacity:1;transform:none}100%{opacity:0}}

/* Stimme */
.sz-stimme{display:grid;place-items:center;align-content:center;gap:16px}
.kugel{width:104px;height:104px;border-radius:50%;background:conic-gradient(from 0deg,var(--licht-1),var(--licht-2),var(--licht-3),var(--akzent),var(--licht-1));filter:blur(.5px);box-shadow:0 0 50px -6px var(--licht-2),inset 0 0 26px rgba(255,255,255,.75);animation:dreh 7s linear infinite,atem 2.6s ease-in-out infinite}
.wellen{display:flex;align-items:center;gap:5px;height:30px}
.wellen i{width:4px;height:100%;border-radius:2px;background:var(--tinte);transform:scaleY(.25);animation:welle 1.1s ease-in-out infinite}
.wellen i:nth-child(2){animation-delay:-.9s}.wellen i:nth-child(3){animation-delay:-.3s}.wellen i:nth-child(4){animation-delay:-.6s}.wellen i:nth-child(5){animation-delay:-.15s}.wellen i:nth-child(6){animation-delay:-.75s}.wellen i:nth-child(7){animation-delay:-.45s}
.sz-stimme q{quotes:"„" "“";font:500 15px/1 var(--text);color:var(--tinte-2)}
@keyframes dreh{to{rotate:360deg}}
@keyframes atem{50%{scale:1.09}}
@keyframes welle{50%{transform:scaleY(1)}}

/* Gedächtnis */
.sz-merkt{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:9px;padding:20px}
.mk{padding:10px 15px;border-radius:99px;background:#fff;font:500 13.5px/1 var(--text);box-shadow:0 6px 16px -10px rgba(10,10,13,.35);animation:plopp 9s var(--raus) infinite both}
.m2{animation-delay:.8s}.m3{animation-delay:1.6s}.m4{animation-delay:2.4s}
.m2{box-shadow:inset 0 0 0 1.5px var(--licht-2),0 6px 16px -10px rgba(10,10,13,.35)}
@keyframes plopp{0%{opacity:0;transform:translateY(14px) scale(.8)}7%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}

/* ── Nacht: Vorsprung ── */
.nacht{background:var(--nacht);color:#fff}
.vorsprung{position:relative;padding:0 0 clamp(80px,10vw,150px);overflow:clip}
.kin{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.04em;font-family:var(--kopf);font-size:clamp(2.6rem,12vw,13.5rem);line-height:.88;letter-spacing:-.04em;white-space:nowrap;margin:0}
.kin span{display:block;background:var(--licht);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .1em .08em}
.kin span:first-child{font-variation-settings:"wdth" calc(75 + var(--p)*50),"wght" calc(220 + var(--p)*640);transform:translateX(calc((.5 - var(--p))*30vw))}
.kin span:last-child{font-variation-settings:"wdth" calc(125 - var(--p)*50),"wght" calc(860 - var(--p)*640);transform:translateX(calc((var(--p) - .5)*30vw))}
.vor-in{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 var(--rand)}
.vor-sub{max-width:40em;margin-top:28px;font-size:clamp(1.05rem,1.4vw,1.3rem);color:#C9CAD3}
.vergleich{margin-top:clamp(40px,6vw,84px);border-top:1px solid rgba(255,255,255,.16)}
.vg-kopf,.vg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,4vw,64px);padding:clamp(18px,2.3vw,30px) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.vg-kopf{padding:14px 0;font:500 14px/1 var(--text);color:var(--nacht-2)}
.vg-kopf span:last-child{color:#fff}
.vg>span:first-child{color:var(--nacht-2);font-size:clamp(.98rem,1.25vw,1.15rem);align-self:center}
.vg s{text-decoration:none;background:linear-gradient(var(--nacht-2),var(--nacht-2)) 0 55%/0 1.5px no-repeat;transition:background-size .9s var(--raus) .1s}
.vg>span:last-child{font:600 clamp(1.25rem,2.5vw,2.3rem)/1.12 var(--kopf);font-stretch:104%;letter-spacing:-.025em;opacity:.18;transform:translateX(26px);transition:opacity .8s .45s,transform 1s var(--raus) .45s}
.vg.da s{background-size:100% 1.5px}
.vg.da>span:last-child{opacity:1;transform:none}

/* ── Nacht: Europa ── */
.europa{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(40px,6vw,90px) var(--rand) clamp(90px,11vw,160px);max-width:none}
.eu-text{max-width:720px;justify-self:end}
.eu-text .zwei .breit{font-size:clamp(2.2rem,5.6vw,5.8rem)}
.eu-text .zwei .schmal{font-size:clamp(1.5rem,3.6vw,3.7rem)}
.eu-text>p{margin-top:26px;max-width:36em;color:#C9CAD3;font-size:clamp(1.02rem,1.3vw,1.2rem)}
.fahrplan{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.fahrplan li{display:flex;flex-direction:column;gap:6px;padding:14px 18px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);min-width:128px}
.fahrplan b{font:650 1.02rem/1 var(--kopf);font-stretch:110%}
.fahrplan span{font-size:12.5px;color:var(--nacht-2)}
.fahrplan .da{background:#fff;color:var(--tinte);box-shadow:0 0 44px -8px var(--licht-2)}
.fahrplan .da span{color:var(--akzent);font-weight:600}
.eu-karte{position:relative;width:100%;max-width:620px;aspect-ratio:78/92;justify-self:start}
.eu-karte canvas{position:absolute;inset:0;width:100%;height:100%}

/* ── Schluss ── */
.schluss{position:relative;padding:clamp(100px,14vw,200px) var(--rand) clamp(70px,8vw,120px);overflow:clip}
.schluss-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.zeile-link{width:min(680px,100%);margin-top:clamp(30px,4vw,54px);font-weight:600;cursor:pointer;transform:translate(calc(var(--mx,0)*1px),calc(var(--my,0)*1px));transition:transform .5s var(--raus)}
.zeile-link::before{animation:none;opacity:.5}
.zeile-link:hover::before{opacity:1}
.zeile-link:hover .zeile-los{transform:translateY(-3px) scale(1.06)}
.schluss-klein{max-width:34em;margin-top:22px;color:var(--tinte-2);font-size:.98rem}
.partner{margin-top:clamp(50px,7vw,96px);padding-top:26px;border-top:1.5px solid var(--tinte);width:min(680px,100%);font:500 1.02rem/1.45 var(--text)}
.partner a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

.fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:26px var(--rand) 34px;font-size:14px}
.fuss nav{display:flex;flex-wrap:wrap;gap:22px;color:var(--tinte-2)}
.fuss nav a:hover{color:var(--tinte)}

/* ── schmal ── */
@media (max-width:980px){
  .kopf-nav{display:none}
  .kacheln{grid-template-columns:1fr 1fr}
  .kachel,.k-browser,.k-folien{grid-column:span 1}
  .k-browser{grid-column:span 2}
  .europa{grid-template-columns:1fr}
  .eu-text{justify-self:start}
  .eu-karte{justify-self:center;max-width:520px}
}
@media (max-width:760px){
  body{font-size:16px}
  .kopf{top:10px;gap:10px;height:54px;padding:0 7px 0 16px;width:calc(100% - 20px);justify-content:space-between}
  .kopf-an{display:none}
  .auftakt{padding-top:96px;padding-bottom:48px}
  .zeile{height:60px;gap:10px;padding:0 7px 0 16px}
  .zeile-los{width:46px;height:46px}
  .zeile>svg{width:22px;height:22px}
  .fenster{width:132px;margin-left:-66px}
  .satz-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:14px;padding:78px 16px 14px}
  .satz-text .zwei .schmal{margin-top:.1em}
  .satz-schritte{margin-top:12px;padding-left:16px}
  .satz-schritte li{display:none;padding:2px 0}
  .satz[data-akt="0"] .satz-schritte li:nth-child(1),.satz[data-akt="1"] .satz-schritte li:nth-child(2),.satz[data-akt="2"] .satz-schritte li:nth-child(3),.satz[data-akt="3"] .satz-schritte li:nth-child(4){display:block}
  .satz-schritte p{max-height:none!important;opacity:1!important;font-size:.92rem;min-height:2.9em}
  .app{height:100%;transform:none;border-radius:22px}
  .app-kopf{padding:11px 14px}
  .app-lauf{padding:0 14px}
  .pdf-blatt{width:66px;height:86px;padding:7px;gap:4px}
  .kacheln{grid-template-columns:minmax(0,1fr)}
  .k-browser{grid-column:span 1}
  .szene{height:240px}
  .br-seite{padding:14px}
  .kin{height:80vh}
  .vg-kopf{display:none}
  .vg{grid-template-columns:1fr;gap:8px}
  .fahrplan li{min-width:0;flex:1 1 40%}
  .fuss{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .w>span{transform:none}
  .fenster-schwarm{display:none}
  .zeile::before{opacity:.42}
  .band-spur{flex-wrap:wrap;width:auto;justify-content:center;row-gap:14px}
  .kin span{transform:none!important}
  .app{transform:none}
  .vg s{background-size:100% 1.5px}
  .vg>span:last-child{opacity:1;transform:none}
}