/* Felenia-Box: Landing unter felenia.com (web/site/index.html), baut auf site.css auf.
   Eine Leiterbahn fuehrt durch sechs Stationen, die Box faehrt beim Scrollen mit (landing.js).
   Bewegung gibt es nur unter html.motion: die Klasse setzt landing.js, nicht bei reduzierter Bewegung.
   Ohne sie steht alles ruhig und sichtbar da. */

/* Bricolage als variable Schrift bis 800, fuer die grossen Titel (dieselbe Datei wie in fonts.css) */
@font-face{ font-family:"SB Display"; font-style:normal; font-weight:200 800; font-display:swap; src:url(/assets/fonts/bricolage-grotesque-var-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"SB Display"; font-style:normal; font-weight:200 800; font-display:swap; src:url(/assets/fonts/bricolage-grotesque-var-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Farbe der aktiven Station: faerbt Schein im Hintergrund, Box und Fortschritt (weich ueberblendet) */
@property --glow{ syntax:"<color>"; inherits:true; initial-value:#5B7CFF; }
.lp{--glow:#5B7CFF; transition:--glow 1s ease}
.lp main{position:relative}

.aura{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden}
.aura i{position:absolute; width:80vmax; height:80vmax; border-radius:50%; opacity:.16;
  background:radial-gradient(closest-side, var(--glow), transparent)}
.aura i:nth-child(1){left:-30vmax; top:-30vmax}
.aura i:nth-child(2){right:-36vmax; bottom:-44vmax; opacity:.11}
.motion .aura i{animation:treiben 24s ease-in-out infinite alternate}
.motion .aura i:nth-child(2){animation-duration:31s; animation-direction:alternate-reverse}
@keyframes treiben{ to{ transform:translate3d(14vmax, 10vmax, 0) scale(1.12) } }

.fortschritt{position:fixed; left:0; right:0; top:0; height:3px; z-index:40; pointer-events:none}
.fortschritt i{display:block; height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), var(--cyan), var(--glow)); box-shadow:0 0 14px var(--glow)}
html:not(.motion) .fortschritt{display:none}

/* ---------- Grosse Titel ---------- */
.riesig{margin:0; font-family:"SB Display", var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; text-wrap:balance}
/* Jede Zeile ist eine Maske, aus der der Text hochgleitet; Platz oben fuer die Punkte von Ä, Ö, Ü */
.riesig .z,.stn-h .z{display:block; overflow:hidden; padding:.13em .04em .07em; margin:-.13em -.04em -.07em}
.riesig .z > span,.stn-h .z > span{display:inline-block}
/* site.css faerbt jedes span im h1 mit Verlauf: hier nur die Zeile .g */
.riesig .z,.riesig .z > span{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--ink)}
.riesig .g > span{background:linear-gradient(92deg, #8FA5FF, var(--cyan) 55%, #B9FFF6); -webkit-background-clip:text; background-clip:text; color:transparent}
.motion .riesig .z > span,.motion .stn-h .z > span{transform:translateY(108%); transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.motion .sicht .riesig .z > span,.motion .sicht .stn-h .z > span,.motion .riesig.sicht .z > span{transform:none}
.motion .riesig .z:nth-child(2) > span,.motion .stn-h .z:nth-child(2) > span{transition-delay:.09s}

.btn.gross{height:56px; padding:0 26px; font-size:16px; border-radius:15px}
.cta.mitte{justify-content:center}

/* ---------- Hero ---------- */
/* Der erste Bildschirm zeigt Titel und schon ein gutes Stueck der echten Box: Titelgroesse auch an der Hoehe begrenzt */
.lh{position:relative; overflow:hidden; padding:clamp(28px, 6vh, 80px) 0 0; text-align:center}
.lh-kopf{display:flex; flex-direction:column; align-items:center}
.lh .eyebrow{margin-bottom:18px}
.lh h1{font-size:clamp(42px, min(7.6vw, 10.5vh), 120px)}
.lh-lead{max-width:30em; margin:20px auto 26px; font-size:clamp(17px, 1.45vw, 20px); line-height:1.55; color:var(--ink-2)}
.lh .cta{justify-content:center}
.lh .fine{margin-top:12px}
.motion .lh-lead,.motion .lh .cta,.motion .lh .fine,.motion .lh .eyebrow{opacity:0; translate:0 18px; transition:opacity .9s, translate .9s cubic-bezier(.2,.8,.2,1)}
.motion .lh.sicht .lh-lead{transition-delay:.35s}
.motion .lh.sicht .cta{transition-delay:.45s}
.motion .lh.sicht .fine{transition-delay:.55s}
.motion .lh.sicht .lh-lead,.motion .lh.sicht .cta,.motion .lh.sicht .fine,.motion .lh.sicht .eyebrow{opacity:1; translate:0 0}

/* Apps in den Stores: noch nicht erschienen, darum nur als Hinweis, ohne Link */
.stores{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0; padding:0; list-style:none}
.store{display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:12px; text-align:left;
  background:rgba(14,21,36,.78); border:1px solid var(--line-2)}
.store svg{flex:0 0 auto; width:20px; height:20px; color:var(--ink-2)}
.store span{display:flex; flex-direction:column; gap:3px}
.store small{font:600 9.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--proto)}
.store b{font-weight:600; font-size:14.5px; line-height:1.1; color:var(--ink)}
.stn .stores{justify-content:flex-start; margin-top:24px}
.stn.r .stores{justify-content:flex-end}
.motion .lh .stores{opacity:0; translate:0 18px; transition:opacity .9s .65s, translate .9s .65s cubic-bezier(.2,.8,.2,1)}
.motion .lh.sicht .stores{opacity:1; translate:0 0}
.motion .stn .stores{opacity:0; translate:0 22px; transition:opacity .8s .4s, translate .8s .4s cubic-bezier(.2,.8,.2,1)}
.motion .stn.sicht .stores{opacity:1; translate:0 0}

.lh-buehne{position:relative; width:min(1120px, calc(100% - 48px)); margin:clamp(20px, 3vh, 44px) auto 0; perspective:1800px}
.lh-bild{margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line-2); background:#0B1120; transform-origin:50% 100%;
  box-shadow:0 70px 150px -50px rgba(0,0,0,.95), 0 0 140px -30px color-mix(in srgb, var(--glow) 60%, transparent)}
.lh-bild img{width:100%; height:auto}
.motion .lh-bild{transform:rotateX(calc((1 - var(--p, 0)) * 16deg)) rotateY(calc(var(--mx, 0) * 2.5deg)) scale(calc(.92 + var(--p, 0) * .08));
  transition:transform .25s ease-out; will-change:transform}
.motion .lh-buehne{opacity:0; translate:0 36px; transition:opacity 1.1s .2s, translate 1.3s .2s cubic-bezier(.2,.8,.2,1)}
.motion .lh.sicht .lh-buehne{opacity:1; translate:0 0}

.schwebe{position:absolute; z-index:2; display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:999px; white-space:nowrap;
  font:600 14.5px/1 var(--sans); color:var(--ink); background:rgba(13,20,35,.78); border:1px solid rgba(127,152,255,.3);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 22px 44px -18px rgba(0,0,0,.9)}
.schwebe b{font:800 17px/1 "SB Display", var(--display); color:var(--cyan)}
.schwebe svg{width:16px; height:16px; color:var(--cyan)}
.s1{left:2%; top:9%}
.s2{right:2%; top:20%}
.s3{left:1%; top:52%}
.s4{right:3%; top:62%}
.s5{right:9%; top:-22px}
@media (min-width:1300px){ .s1{left:-4%} .s2{right:-5%} .s3{left:-6%} .s4{right:-3%} }
.motion .schwebe{translate:0 calc(var(--p, 0) * -110px * var(--d, 1)); animation:schweben 6s ease-in-out infinite alternate; animation-delay:calc(var(--d, 1) * -2.3s)}
@keyframes schweben{ from{ transform:translateY(0) } to{ transform:translateY(-12px) } }
.pkt{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--k, var(--plan))}
.pkt.live{background:var(--live); box-shadow:0 0 10px var(--live)}

.scroll-tipp{display:none}
.motion .scroll-tipp{position:fixed; left:50%; bottom:20px; z-index:15; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:12px 16px 10px; border-radius:999px; background:rgba(10,16,29,.72); border:1px solid rgba(36,50,79,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font:500 10.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; transition:opacity .4s}
.scroll-tipp i{position:relative; width:2px; height:36px; border-radius:2px; overflow:hidden; background:rgba(163,178,203,.18)}
.scroll-tipp i::after{content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; border-radius:2px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:fallen 1.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes fallen{ to{ top:100% } }
.motion .scroll-tipp.weg{opacity:0; pointer-events:none}
/* Auf niedrigen Bildschirmen wuerde die Pille die Zeile unter den Knoepfen verdecken */
@media (max-height:740px){ .motion .scroll-tipp{display:none} }

/* ---------- Laufband ---------- */
.band{position:relative; margin:clamp(64px, 10vh, 110px) 0 0; padding:16px 0; overflow:hidden; border-block:1px solid rgba(36,50,79,.6); background:rgba(10,16,29,.55);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)}
.band-lauf{display:flex; width:max-content}
.band-teil{display:flex; gap:12px; padding-right:12px}
.motion .band-lauf{animation:laufen 70s linear infinite}
.band:hover .band-lauf{animation-play-state:paused}
@keyframes laufen{ to{ transform:translateX(-50%) } }
.band-w{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 16px 0 8px; border-radius:13px; white-space:nowrap;
  border:1px solid var(--line); background:rgba(14,21,36,.75); font-size:14px; color:var(--ink-2)}
.band-w b{font-weight:600}
.band-w svg{width:30px; height:30px; padding:6px; border-radius:9px; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--c) 92%, #fff 8%), color-mix(in srgb, var(--c) 60%, #05070d))}
.band-w.s-plan svg{filter:saturate(.35) brightness(.8)}
.band-w.s-live{color:var(--ink); border-color:color-mix(in srgb, var(--c) 50%, var(--line))}
.band-w.s-live b::after,.band-w.s-proto b::after{content:""; display:inline-block; width:7px; height:7px; margin:0 0 2px 9px; border-radius:50%; vertical-align:middle; background:var(--live); box-shadow:0 0 8px var(--live)}
.band-w.s-proto b::after{background:var(--proto); box-shadow:none}

/* ---------- Die Fahrt ---------- */
.fahrt{position:relative; padding:24vh 0 28vh; overflow-x:clip}
.fahrt > .wrap{position:relative; z-index:1}
.bahn{position:absolute; left:0; top:0; z-index:0; pointer-events:none; overflow:visible}
.bahn path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.bahn-grund{stroke:#1D2944; stroke-width:3}
.bahn-schein{stroke:url(#bahn-farbe); stroke-width:16; opacity:.16}
.bahn-licht{stroke:url(#bahn-farbe); stroke-width:3.5}
.paket circle{fill:#F2FFFD}
.paket .h{fill:var(--cyan); opacity:.3}
html:not(.motion) .paket{display:none}
.bahn-ziel{position:absolute; left:50%; top:100%; z-index:1; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  border:3px solid var(--glow); background:var(--bg); box-shadow:0 0 0 7px color-mix(in srgb, var(--glow) 18%, transparent), 0 0 30px var(--glow)}

.fahrer{position:absolute; left:0; top:0; z-index:6; width:60px; height:64px; margin:-32px 0 0 -30px; pointer-events:none; opacity:0; transition:opacity .5s; will-change:transform}
.fahrer.da{opacity:1}
.fahrer svg{position:relative; width:100%; height:100%; filter:drop-shadow(0 12px 16px rgba(0,0,0,.65))}
.fahrer-schein{position:absolute; left:50%; top:50%; width:170px; height:170px; margin:-85px 0 0 -85px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent)}
html:not(.motion) .fahrer{display:none}

/* Station: Text auf der Seite der Bahn, Bild gegenueber; .r spiegelt */
.stn{--rail:30px; --pad:96px; position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(36px, 5vw, 76px);
  align-items:center; padding:56px 0; margin:0 0 26vh}
.stn:last-child{margin-bottom:0}
.stn.r{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
.stn-text{position:relative; padding-left:var(--pad)}
.stn.r .stn-text{order:2; padding:0 var(--pad) 0 0; text-align:right}
.stn-nr{position:absolute; left:calc(var(--rail) - 24px); top:-6px; z-index:2; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:600 13px/1 var(--mono); letter-spacing:.04em;
  color:var(--ink-3); background:var(--bg); border:2px solid #263453; transition:color .4s, background .4s, border-color .4s, box-shadow .4s}
.stn.r .stn-nr{left:auto; right:calc(var(--rail) - 24px)}
.stn.an .stn-nr,html:not(.motion) .stn-nr{color:#061018; background:var(--c); border-color:var(--c);
  box-shadow:0 0 0 7px color-mix(in srgb, var(--c) 20%, transparent), 0 0 34px var(--c)}
.stn-tag{display:flex; align-items:center; gap:12px; min-height:36px; margin:0 0 20px; font:600 12.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--c)}
.stn.r .stn-tag{justify-content:flex-end}
.stn-tag .chip{letter-spacing:.08em}
.stn-h{margin:0 0 24px; font-family:"SB Display", var(--display); font-weight:800; font-size:clamp(32px, 3.55vw, 54px); line-height:.92; letter-spacing:-.03em; text-transform:uppercase}
.stn-h .z:last-child{color:color-mix(in srgb, var(--c) 72%, #fff)}
.stn-satz{max-width:24em; margin:0; font-size:clamp(17px, 1.35vw, 19.5px); line-height:1.55; color:var(--ink-2)}
.stn.r .stn-satz{margin-left:auto}
.stn-link{display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:6px 0; font-weight:600; font-size:16px; color:color-mix(in srgb, var(--c) 70%, #fff); text-decoration:none}
.stn-link svg{width:17px; height:17px; transition:translate .25s}
.stn-link:hover svg,.stn-link:focus-visible svg{translate:4px 0}
.motion .stn-tag,.motion .stn-satz,.motion .stn-link{opacity:0; translate:0 22px; transition:opacity .8s .25s, translate .8s .25s cubic-bezier(.2,.8,.2,1)}
.motion .stn.sicht .stn-tag,.motion .stn.sicht .stn-satz,.motion .stn.sicht .stn-link{opacity:1; translate:0 0}
.motion .stn.sicht .stn-link{transition-delay:.4s}
.motion .stn.sicht .stn-tag{transition-delay:0s}

.stn-bild{position:relative; margin:0}
.motion .stn-bild{opacity:0; scale:.9; translate:0 calc(var(--v, 0) * 46px); transition:opacity 1s, scale 1.2s cubic-bezier(.2,.8,.2,1)}
.motion .stn.sicht .stn-bild{opacity:1; scale:1}

.rahmen{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line-2); background:#0B1120;
  box-shadow:0 60px 120px -48px rgba(0,0,0,.95), 0 0 100px -30px color-mix(in srgb, var(--c) 65%, transparent)}
.rahmen-kopf{display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:#0E1524; border-bottom:1px solid var(--line)}
.rahmen-kopf i{width:10px; height:10px; border-radius:50%; background:#26324D}
/* Adresse auf der Innenseite, die Etiketten sitzen aussen: so verdeckt keines die Adresse */
.rahmen-kopf span{flex:1; min-width:0; margin-left:8px; text-align:left; font:500 11.5px/1 var(--mono); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stn.r .rahmen-kopf span{text-align:right}
.rahmen img,.fenster img,.handy img{width:100%; height:auto}

/* Neigen mit dem Zeiger, mit Glanz */
.kipp{transform:perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.kipp.zieht{transition:transform .1s linear}
.kipp::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.11), transparent 45%)}
.kipp.zieht::after{opacity:1}

/* Etiketten am Bild */
.marke{position:absolute; z-index:5; display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:999px; white-space:nowrap;
  font:600 13.5px/1 var(--sans); color:var(--ink); background:rgba(12,18,32,.84); border:1px solid color-mix(in srgb, var(--c) 45%, var(--line-2));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 18px 40px -16px rgba(0,0,0,.95)}
.marke svg{width:16px; height:16px; color:var(--c)}
.marke kbd{padding:4px 7px; border-radius:6px; font:600 11.5px/1 var(--mono); color:var(--ink); background:#1A2440; border:1px solid #2E3D62; border-bottom-width:2px}
.marke kbd + kbd{margin-left:-4px}
.m-a{top:-20px; right:7%}
.m-b{bottom:-20px; left:7%}
.stn.r .m-a{right:auto; left:7%}
.stn.r .m-b{left:auto; right:7%}
.motion .marke{opacity:0; scale:.75; transition:opacity .5s .7s, scale .7s .7s cubic-bezier(.3,1.6,.5,1)}
.motion .stn.sicht .marke{opacity:1; scale:1; animation:schweben 5s ease-in-out 1.5s infinite alternate}
.motion .stn.sicht .m-b{transition-delay:.9s; animation-delay:2.4s}
/* Tastenkuerzel nur dort, wo es eine Tastatur gibt */
@media (hover:none) and (pointer:coarse){ .marke.tasten{display:none} }

/* 04 Team */
.team{padding:22px; background:linear-gradient(180deg, #111A2E, #0A101D)}
.team-kopf{display:flex; align-items:center; gap:13px; margin-bottom:18px; text-align:left}
.team-kopf b{display:block; font:700 19px/1.1 var(--display)}
.team-kopf small{display:block; margin-top:4px; font:500 11px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.team-zahl{margin-left:auto; padding:8px 11px; border-radius:999px; font:600 12px/1 var(--mono); color:#E9D9FF; border:1px solid rgba(178,107,255,.45); background:rgba(178,107,255,.13)}
.team-link{display:flex; align-items:center; gap:10px; height:48px; padding:0 7px 0 14px; border-radius:12px; border:1px solid var(--line-2); background:#090E1A;
  font:500 13px/1 var(--mono); color:var(--ink-2)}
.team-link span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left}
.team-link em{padding:10px 12px; border-radius:9px; font:600 12.5px/1 var(--sans); font-style:normal; color:#fff; background:linear-gradient(180deg, #B98BFF, #8E4DF0); white-space:nowrap}
.sitze{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.sitze li{display:grid; grid-template-columns:40px minmax(0, 1fr) auto; align-items:center; gap:13px; padding:10px 12px; border-radius:13px;
  border:1px solid var(--line); background:rgba(14,21,36,.75); text-align:left}
.av{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 16px/1 "SB Display", var(--display); color:#071022; background:var(--k)}
.sitze b{font-weight:600; font-size:15px}
.sitze em{padding:6px 9px; border-radius:999px; font:500 12.5px/1 var(--mono); font-style:normal; color:var(--k);
  background:color-mix(in srgb, var(--k) 13%, transparent); border:1px solid color-mix(in srgb, var(--k) 38%, transparent)}
.sitze .frei{border-style:dashed; background:transparent}
.sitze .frei .av{background:transparent; border:1.5px dashed #34466C; color:var(--ink-3); font-weight:600}
.sitze .frei b{color:var(--ink-3); font-weight:500}
.motion .sitze li{opacity:0; translate:-26px 0; transition:opacity .5s, translate .7s cubic-bezier(.2,.8,.2,1); transition-delay:calc(.55s + var(--i) * .15s)}
.motion .stn.sicht .sitze li{opacity:1; translate:0 0}
.motion .team-link em{opacity:0; scale:.7; transition:opacity .4s 1.5s, scale .6s 1.5s cubic-bezier(.3,1.6,.5,1)}
.motion .stn.sicht .team-link em{opacity:1; scale:1}

/* 05 Ueberall: Windows-Fenster und Handy davor */
.geraete{padding:0 0 9%}
.fenster{position:relative; border-radius:10px; overflow:hidden; border:1px solid #2A3654; background:#0B1120;
  box-shadow:0 60px 120px -48px rgba(0,0,0,.95), 0 0 100px -30px color-mix(in srgb, var(--c) 60%, transparent)}
.handy{position:absolute; z-index:3; right:-3%; bottom:-4%; width:27%; border-radius:26px; overflow:hidden; border:6px solid #141C2E; background:#0B1120;
  box-shadow:0 44px 90px -30px rgba(0,0,0,.95), 0 0 0 1px #2A3654}
.motion .handy{translate:0 calc(var(--v, 0) * -64px)}
.geraete .m-a{top:auto; bottom:-2%; right:auto; left:5%}

/* 06 Was kommt */
.raster{padding:24px 22px 0; background:linear-gradient(180deg, #101828, #0A0F1C)}
.raster-gitter{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:18px 8px}
.rt{position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
.rt::before{content:""; position:absolute; z-index:1; top:-4px; left:calc(50% - 33px); width:11px; height:11px; border-radius:50%; border:2px solid #0F1627; background:var(--plan)}
.rt.s-live::before{background:var(--live); box-shadow:0 0 10px var(--live)}
.rt.s-proto::before{background:var(--proto)}
.rt svg{width:58px; height:58px; padding:15px; border-radius:17px; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--c) 92%, #fff 8%), color-mix(in srgb, var(--c) 60%, #05070d));
  box-shadow:0 10px 24px -12px var(--c), inset 0 1px 0 rgba(255,255,255,.28)}
.rt.s-plan svg{filter:saturate(.3) brightness(.72)}
/* Getrennt wird an den Wortfugen (weiche Trennzeichen aus dem Generator), nie mitten im Wort */
.rt b{max-width:100%; font-size:11.5px; font-weight:500; line-height:1.25; color:var(--ink-2); overflow:hidden; -webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.rt.s-live b{color:var(--ink); font-weight:600}
.raster-fuss{display:flex; flex-wrap:wrap; gap:8px 16px; margin:20px -22px 0; padding:12px 22px; border-top:1px solid var(--line);
  font:500 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:rgba(7,11,20,.35); text-align:left}
.motion .rt{opacity:0; scale:.55; transition:opacity .45s, scale .6s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(.35s + var(--i) * .07s)}
.motion .stn.sicht .rt{opacity:1; scale:1}
.motion .stn.sicht .rt.s-plan svg,.motion .stn.sicht .rt.s-proto svg{animation:aufleuchten 1.3s ease-out both; animation-delay:calc(1.6s + var(--i) * .11s)}
@keyframes aufleuchten{
  0%{ filter:saturate(.3) brightness(.72) }
  35%{ filter:saturate(1.15) brightness(1.3); box-shadow:0 0 34px -2px var(--c), inset 0 1px 0 rgba(255,255,255,.4) }
}
.motion .stn.sicht .rt.s-proto svg{animation-name:aufleuchten-ganz}
@keyframes aufleuchten-ganz{ 35%{ filter:brightness(1.3); box-shadow:0 0 34px -2px var(--c), inset 0 1px 0 rgba(255,255,255,.4) } }

/* ---------- Preise und Fragen ---------- */
.lsec{position:relative; padding:clamp(90px, 15vh, 170px) 0}
.lsec-satz{max-width:34em; margin:28px auto 60px; text-align:center; font-size:clamp(17px, 1.5vw, 20px); color:var(--ink-2)}
.wander-rahmen{overflow:hidden; padding:0 0 6px}
.wander{font-size:clamp(28px, 9.6vw, 150px); text-align:center; white-space:nowrap}
.motion .wander .z:nth-child(1){translate:calc(var(--q, 0) * 16vw) 0}
.motion .wander .z:nth-child(2){translate:calc(var(--q, 0) * -16vw) 0}
.lp .plans{gap:20px}
.lp .plan{border-radius:24px; padding:30px 26px 26px; transition:translate .5s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s}
.lp .plan.hi{background:radial-gradient(420px 220px at 50% -10%, rgba(91,124,255,.28), transparent 70%), linear-gradient(180deg, rgba(20,30,54,.92), rgba(12,18,32,.8))}
.lp .plan h3{font:800 24px/1.1 "SB Display", var(--display); text-transform:uppercase; letter-spacing:-.01em}
.lp .price{flex-wrap:wrap; row-gap:6px}
.lp .price b{font:800 clamp(40px, 3.5vw, 50px)/1 "SB Display", var(--display); white-space:nowrap}
.lp .plan ul{align-content:start}
.motion .lsec .plan{opacity:0; translate:0 46px; transition:opacity .8s, translate .9s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s}
.motion .lsec.sicht .plan{opacity:1; translate:0 0}
.motion .lsec.sicht .plan:nth-child(2){transition-delay:.12s}
.motion .lsec.sicht .plan:nth-child(3){transition-delay:.24s}
.lp .plan:hover{border-color:#3A4C74}
.motion .lp .plan:hover,.motion .lsec.sicht .plan:hover{translate:0 -6px; transition-delay:0s}
.lp .plan.hi:hover{border-color:rgba(127,152,255,.8)}
.riesig.klein{font-size:clamp(38px, 6.4vw, 96px); text-align:center; margin-bottom:48px}
.fragen .faq{margin:0 auto}
.lp .faq details{transition:border-color .2s, background .2s}
.lp .faq details[open]{border-color:var(--line-2); background:rgba(18,27,46,.75)}

/* ---------- Schluss: Box mit Deckel, der Deckel geht beim Scrollen auf ---------- */
.schluss{position:relative; overflow:hidden; padding:0 0 clamp(70px, 11vh, 130px); text-align:center}
.schluss h2{font-size:clamp(46px, 7.4vw, 112px)}
.fragen{padding-bottom:clamp(40px, 7vh, 80px)}
.kiste{--s:150px; --p:1; position:relative; width:var(--s); height:calc(var(--s) * 2.6); margin:0 auto 30px; perspective:1000px}
.kiste-3d{position:absolute; z-index:1; left:0; bottom:46px; width:var(--s); height:var(--s); transform-style:preserve-3d; transform:rotateX(-24deg) rotateY(-38deg)}
.k{position:absolute; inset:0; display:block; border:1.5px solid rgba(160,180,255,.55); border-radius:4px}
.k-vorne{transform:translateZ(calc(var(--s) / 2)); background:linear-gradient(160deg, #6382FF, #2D44B8); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92)}
.k-vorne svg{width:46%; height:46%}
.k-hinten{transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); background:#1A2766}
.k-rechts{transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); background:linear-gradient(160deg, #3A56E8, #1B2C82)}
.k-links{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); background:#22348F}
.k-boden{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); background:#0D1640}
.k-innen{transform:rotateX(90deg) translateZ(calc(var(--s) / 2 - 3px)); border:0; opacity:var(--p);
  background:radial-gradient(closest-side, #F2FFFD, #6EE7DA 45%, rgba(43,212,196,.25) 80%, transparent)}
/* Scharnier an der hinteren Kante: dorthin schieben, drehen, zurueckschieben */
.k-deckel{background:linear-gradient(135deg, #A9BBFF, #5B7CFF 60%, #4A69F2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transform:translate3d(0, calc(var(--s) / -2), calc(var(--s) / -2)) rotateX(calc(var(--p) * 118deg)) translate3d(0, calc(var(--s) / 2), calc(var(--s) / 2)) rotateX(90deg) translateZ(calc(var(--s) / 2))}
.kiste-schatten{position:absolute; left:50%; bottom:6px; width:calc(var(--s) * 1.9); height:60px; translate:-50% 0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(91,124,255,.42), transparent)}
.strahl{position:absolute; left:50%; bottom:calc(46px + var(--s) * .95); width:calc(var(--s) * 2.1); height:calc(var(--s) * 1.45); translate:-50% 0; transform-origin:50% 100%;
  background:radial-gradient(55% 100% at 50% 100%, rgba(150,245,235,.6), rgba(91,124,255,.2) 55%, transparent 78%);
  clip-path:polygon(34% 100%, 66% 100%, 100% 0, 0 0); opacity:var(--p); scale:1 var(--p)}
.aufstieg{position:absolute; z-index:2; left:50%; bottom:calc(46px + var(--s) * .9); width:0; height:0}   /* vor dem Deckel */
.auf{position:absolute; left:-23px; top:-23px; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb, var(--c) 92%, #fff 8%), color-mix(in srgb, var(--c) 60%, #05070d));
  box-shadow:0 14px 30px -12px var(--c), inset 0 1px 0 rgba(255,255,255,.3);
  translate:calc(var(--x) * 54px * var(--p)) calc(var(--y) * -1px * var(--p)); scale:calc(.35 + var(--p) * .65); opacity:clamp(0, calc(var(--p) * 1.6 - .3), 1)}
.auf svg{width:23px; height:23px}
.motion .auf{animation:schweben 3.6s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -.55s)}
.schluss .lsec-satz{margin:24px auto 34px}
/* Schmal: erst Titel und Knoepfe, dann die Box direkt ueber dem Fuss. So geht der Deckel ganz unten auf und die
   aufsteigenden Werkzeuge bleiben unter der Kopfleiste, auch auf kleinen Handys */
@media (max-width:900px){
  .schluss-innen{display:flex; flex-direction:column; align-items:center}
  .schluss-text{order:1}
  .schluss .kiste{order:2; margin:26px auto 0}
}
/* Breit: Box links, Schluss rechts. So steht die offene Box am Seitenende ganz im Bild, auch auf niedrigen Bildschirmen */
@media (min-width:901px){
  .schluss-innen{display:flex; align-items:center; justify-content:center; gap:clamp(24px, 3vw, 56px)}
  .schluss .kiste{flex:0 0 auto; margin:0 clamp(150px, 12vw, 180px) 0}
  .schluss-text{min-width:0; text-align:left}
  .schluss-text .lsec-satz{margin-left:0; text-align:left}
  .schluss-text .cta.mitte{justify-content:flex-start}
}

/* ---------- Tablet und Handy ---------- */
@media (max-width:1100px){
  .stn{--pad:82px}
}
@media (max-width:900px){
  .fahrt{padding:18vh 0 22vh}
  .stn,.stn.r{grid-template-columns:minmax(0, 1fr); gap:30px; padding:0 0 0 54px; margin-bottom:24vh}
  .stn .stn-text,.stn.r .stn-text{order:0; padding:0; text-align:left}
  .stn-nr,.stn.r .stn-nr{left:-54px; right:auto; top:-2px; width:42px; height:42px; font-size:12px}
  .stn.r .stn-tag{justify-content:flex-start}
  .stn-tag{min-height:38px; margin-bottom:14px}
  .stn-h{font-size:clamp(30px, 7.4vw, 50px); margin-bottom:16px}
  .stn.r .stn-satz{margin-left:0}
  .stn.r .m-a{left:auto; right:6%}
  .stn.r .m-b{right:auto; left:6%}
  .fahrer{width:42px; height:45px; margin:-22px 0 0 -21px}
  .fahrer-schein{width:120px; height:120px; margin:-60px 0 0 -60px}
}
@media (max-width:760px){
  .lh-buehne{width:min(290px, 76vw)}
  .lh-bild{border-radius:34px; border:7px solid #141C2E; box-shadow:0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px #2A3654, 0 0 100px -20px color-mix(in srgb, var(--glow) 60%, transparent)}
  .schwebe{padding:9px 13px; font-size:12.5px; gap:7px}
  .schwebe b{font-size:15px}
  .s1{left:-12%; top:7%}
  .s2{right:-12%; top:27%}
  .s3{left:-12%; top:22%}   /* ueber der Scroll-Pille */
  .s4{display:none}
  .s5{right:-12%; top:74%}
  .band{margin-top:56px}
  .marke{padding:8px 12px; font-size:12px}
  .team{padding:16px}
  .team-link{font-size:11.5px}
  .sitze li{grid-template-columns:34px minmax(0, 1fr) auto; gap:10px; padding:8px 10px}
  .av{width:34px; height:34px; font-size:14px}
  .sitze b{font-size:14px}
  .sitze em{font-size:11px; padding:5px 7px}
  .raster{padding:18px 12px 0}
  .raster-gitter{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px 4px}
  .rt svg{width:46px; height:46px; padding:12px; border-radius:14px}
  .rt::before{left:calc(50% - 27px)}
  .rt b{font-size:10.5px}
  .raster-fuss{margin:16px -12px 0; padding:11px 12px}
  .handy{width:30%; border-width:4px; border-radius:18px}
  .kiste{--s:112px}
  .schluss{padding-bottom:56px}
  .auf{width:40px; height:40px; left:-20px; top:-20px; border-radius:12px}
  .auf{translate:calc(var(--x) * 44px * var(--p)) calc(var(--y) * -.72px * var(--p))}
}
@media (max-width:420px){
  /* Beide Knoepfe nebeneinander, damit das Bild der Box frueher ins Bild kommt; sehr schmal stapeln sie sich */
  .lh .cta{width:100%}
  .lh .cta .btn{width:auto; flex:1 1 140px; height:52px; padding:0 12px; font-size:15px}
  .riesig.klein{margin-bottom:34px}
  .team-kopf small{display:none}
  .schluss .cta .btn{width:auto; flex:1 1 0; padding:0 14px}
}