/* StintOS-Website, Fassung 4 (25.09.2026) — Entwurf „A in 3D“.
   Maße wie die bisherige Seite (gemessen 25.09.): Kopf 63, Logo 23 hoch,
   Rand 24 am Handy, Überschrift 32 / 40, Text 18,5, Knöpfe 41.
   Schriften liegen im Theme (assets/schrift), nichts wird von Google geladen. */

:root{
  color-scheme:dark;
  --g:#08090b;--k:#14171b;--l:#23282f;
  --t:#f3f5f8;--t2:#a3abb6;--t3:#6d7580;
  --lime:#bfdc28;--rot:#f11114;--amber:#ffb020;
  --verlauf:linear-gradient(90deg,#f11114 0%,#ff5a1a 30%,#e8c21f 62%,#bfdc28 100%);
  --rand:clamp(24px,4vw,40px);
  --breite:1200px;
  --disp:"Saira","Arial Narrow",Arial,sans-serif;
  --text:"Barlow","Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
  --streifen:transparent 0 38px,#f11114 38px 70px,transparent 70px 108px,#bfdc28 108px 140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--g);color:var(--t);font:400 18.5px/1.6 var(--text);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sprungmarke{position:absolute;left:-999px;top:0;z-index:100;background:var(--lime);color:#0a0b0d;padding:10px 14px}
.sprungmarke:focus{left:12px;top:12px}
main{overflow:hidden}

/* Streifen der Zielflagge, abschnittsweise abwechselnd rechts und links
   (Betreiber: „von der anderen Seite … und dann wieder beim nächsten wie das 1. oben“). */
.st-l,.st-r{position:relative;isolation:isolate}
.st-l::after,.st-r::after{content:"";position:absolute;top:0;bottom:0;width:46%;z-index:-1;pointer-events:none;opacity:.14}
.st-r::after{right:-6%;background:repeating-linear-gradient(-60deg,var(--streifen));
  -webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
.st-l::after{left:-6%;background:repeating-linear-gradient(60deg,var(--streifen));
  -webkit-mask:linear-gradient(270deg,transparent,#000 40%);mask:linear-gradient(270deg,transparent,#000 40%)}
@media (max-width:900px){.st-l::after,.st-r::after{width:70%;opacity:.1}}

.innen{max-width:var(--breite);margin:0 auto;padding-inline:var(--rand)}
/* Kopfzeile und Aufmacher nutzen breite Schirme aus (Betreiber: „alles in der Mitte zusammengequetscht“) */
.innen.weit{max-width:1840px;padding-inline:clamp(24px,3vw,56px)}
.disp{font-family:var(--disp);font-style:italic;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:850;letter-spacing:-.01em;line-height:.95;text-transform:uppercase;text-wrap:balance}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:700 12px/1.3 var(--disp);letter-spacing:.28em;text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:28px;height:3px;background:var(--verlauf);transform:skewX(-30deg)}

/* ---------- Startsequenz: Logo in 3D als eigenes Fenster, Streifen der Zielflagge dahinter (26.09.2026) ---------- */
#intro{display:none}
html.mit-intro{overflow:hidden}
html.mit-intro #intro{display:grid;place-items:center;position:fixed;inset:0;z-index:1000;
  background:radial-gradient(ellipse at 50% 48%,#08090bf2 0%,#08090bcc 38%,#08090b66 70%,#08090b33 100%),
             repeating-linear-gradient(-60deg,transparent 0 60px,#f1111466 60px 110px,transparent 110px 170px,#bfdc2866 170px 220px),
             #08090b;
  transition:opacity .6s ease,transform .6s ease;cursor:pointer}
#intro canvas{position:absolute;inset:0;width:100%;height:100%}
#intro .intro-bild{display:none;width:min(80vw,900px);height:auto}
#intro.ohne3d canvas{display:none}
#intro.ohne3d .intro-bild{display:block;animation:intro2d 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes intro2d{from{opacity:0;transform:perspective(900px) rotateY(-50deg) scale(.6)}to{opacity:1;transform:none}}
#intro .intro-claim{position:absolute;left:0;right:0;top:calc(50% + min(11vw,150px));margin:0;text-align:center;font:700 italic clamp(12px,1.5vw,20px)/1 var(--disp);letter-spacing:.5em;text-transform:uppercase;color:var(--t2);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
#intro .intro-claim b{color:var(--rot);font-weight:700}
#intro .intro-claim i{color:var(--lime);font-style:inherit}
#intro.claim .intro-claim,#intro.ohne3d .intro-claim{opacity:1;transform:none}
#intro .intro-weiter{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:12.5px;color:var(--t3);letter-spacing:.08em}
#intro.weg{opacity:0;transform:scale(1.04);pointer-events:none}
@media (max-width:640px){#intro .intro-claim{letter-spacing:.3em}}

/* ---------- Hauptseite: Überschrift und Spiele ---------- */
.wahl h1{font-size:clamp(40px,4.2vw,80px);margin:18px 0 0}
.wahl h1 em{font-style:inherit;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.wahl .lede{max-width:720px;color:var(--t2);margin:22px 0 0}
.wahl-titel{font:700 12px/1.3 var(--disp);letter-spacing:.28em;text-transform:uppercase;color:var(--t2);margin:clamp(36px,5vw,60px) 0 0}
/* Betreiber 26.09.: ab „Unterstützte Spiele“ mittig (Kacheln, Text, Knöpfe) */
.wahl-titel,.wahl .gemeinsam{text-align:center;margin-inline:auto}
.wahl .wahl-titel ~ .aktion{justify-content:center}
@media (max-width:640px){.wahl h1{font-size:32px}}
.wahl{padding-block:clamp(28px,6vw,80px) 0}
.band-zahlen{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--l)}
/* Betreiber 26.09.: Kacheln „bissl kleiner … echt riesig“ → höchstens 1100 px breit, Bild flacher */
.wahl-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin:22px auto 0;max-width:1100px}
.spielkachel{position:relative;display:flex;flex-direction:column;background:var(--k);border:1px solid var(--l);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--t);
  transition:transform .25s ease-out,border-color .2s,box-shadow .25s}
.spielkachel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--verlauf);opacity:.8;z-index:1}
.spielkachel:hover{transform:translateY(-3px);border-color:#bfdc2899;box-shadow:0 26px 60px #000c}
.spielkachel.gewaehlt{border-color:var(--lime)}
.spielkachel .bild{display:block;aspect-ratio:2/1;overflow:hidden;background:#08090b;border-bottom:1px solid var(--l)}
.spielkachel .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease-out}
.spielkachel:hover .bild img{transform:scale(1.03)}
.spielkachel .txt{display:grid;gap:6px;padding:16px 20px 20px}
.spielkachel .name{font:850 italic clamp(22px,2vw,30px)/1 var(--disp);font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase}
.spielkachel .b{color:var(--t2);font-size:15.5px;line-height:1.5}
/* Beta als Schild im Bild rechts unten (Betreiber 27.09.2026), Form wie „NEU“ */
.spielkachel .bild{position:relative}
.spielkachel .beta{position:absolute;right:12px;bottom:12px;z-index:1;font:800 italic 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;background:var(--rot);color:#fff;padding:5px 9px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.spielkachel .los{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--lime);font:800 italic 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.spielkachel .los svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.spielkachel:hover .los svg{transform:translateX(4px)}
.spielkachel .zuletzt{position:absolute;top:12px;left:12px;z-index:1;font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;background:#08090bcc;border:1px solid var(--lime);color:var(--lime);padding:5px 9px;border-radius:3px}
.gemeinsam{color:var(--t2);margin:26px 0 20px;max-width:720px}
@media (max-width:760px){.wahl-raster{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.spielkachel,.spielkachel .bild img,.spielkachel .los svg{transition:none}.spielkachel:hover{transform:none}.spielkachel:hover .bild img{transform:none}}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:41px;padding:0 22px;font:800 14px/1 var(--disp);font-style:italic;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);border:0;cursor:pointer;white-space:nowrap}
.knopf.voll{background:var(--lime);color:#0a0b0d}
.knopf.voll:hover{background:#cfe94a}
.knopf.leer{background:#ffffff12;color:var(--t)}
.knopf.leer:hover{background:#ffffff1f}
.knopf.klein{height:38px;padding:0 16px;font-size:12.5px}
.knopf .zusatz{font-family:var(--mono);font-style:normal;font-weight:500;letter-spacing:0;opacity:.7;font-size:12.5px}

/* ---------- Kopf ---------- */
.kopf{display:flex;align-items:center;gap:26px;min-height:63px;padding-block:10px}
.kopf .marke{flex:none;display:block}
.kopf .marke img{height:30px;width:auto;max-width:none}
.kopf nav.haupt{display:flex;gap:8px;margin-inline:auto}
.kopf nav.haupt a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--l);border-radius:9px;background:#ffffff05;
  color:var(--t);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.kopf nav.haupt a:hover{border-color:#bfdc2899;background:#bfdc280f}
.kopf nav.haupt a[aria-current]{border-color:var(--lime);background:linear-gradient(90deg,#bfdc2826,#bfdc2808)}
.kopf nav.haupt .ic{width:16px;height:16px;flex:none;stroke:var(--amber);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kopf .rechts{display:flex;gap:10px;align-items:center;flex:none}
.sprache{display:inline-grid;place-items:center;height:38px;min-width:42px;padding:0 10px;border:1px solid var(--l);border-radius:4px;font:700 13px/1 var(--disp);letter-spacing:.08em;color:var(--t2);text-decoration:none}
.sprache:hover{color:var(--t);border-color:var(--t3)}
.kopf-login{display:flex;gap:8px;align-items:center;margin:0}
.feld{height:38px;width:150px;padding:0 12px;border-radius:4px;background:#ffffff08;border:1px solid var(--l);color:var(--t);font:inherit;font-size:14px}
.feld::placeholder{color:var(--t3)}
.feld:focus{outline:none;border-color:var(--lime)}
.kopf-link{font-size:15px;color:var(--t2);text-decoration:none;white-space:nowrap}
.kopf-link:hover{color:var(--t)}
.kopf-link-kurz{display:none}
[data-konto][hidden]{display:none!important}
/* Registrieren und Anmelden im Fenster (26.09.2026) */
.konto-fenster{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(4,5,7,.72);backdrop-filter:blur(3px)}
.konto-fenster[hidden]{display:none}
.kf-karte{position:relative;width:min(560px,100%);height:min(780px,calc(100vh - 32px));height:min(780px,calc(100dvh - 32px));
  border:1px solid var(--l);border-radius:14px;overflow:hidden;background:var(--k);box-shadow:0 30px 80px #000c}
.kf-karte iframe{display:block;width:100%;height:100%;border:0;background:var(--k)}
.kf-zu{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--l);
  background:rgba(8,9,11,.85);color:var(--t);font-size:18px;line-height:1;cursor:pointer}
.kf-zu:hover{border-color:var(--lime)}
body.fenster-offen{overflow:hidden}
/* Konto-Menü oben rechts (26.09.2026) */
.konto-menue{position:relative}
.kopf-konto{height:38px;padding:0 14px;border:1px solid var(--l);border-radius:999px;background:#ffffff05;color:var(--t);
  font:600 14.5px/1 var(--text);cursor:pointer;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.kopf-konto:hover,.kopf-konto[aria-expanded=true]{border-color:var(--lime)}
.konto-klapp{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;padding:8px;border:1px solid var(--l);border-radius:10px;
  background:var(--k);box-shadow:0 16px 40px #000a;display:flex;flex-direction:column}
.konto-klapp[hidden]{display:none}
.konto-klapp a{padding:10px 12px;border-radius:6px;color:var(--t);text-decoration:none;font-size:15px}
.konto-klapp a:hover{background:#bfdc2814}
.konto-als{margin:4px 12px 8px;font-size:13px;color:var(--t3);overflow-wrap:anywhere}
.menue-knopf{display:none;margin-left:auto;width:41px;height:41px;border:1px solid var(--l);border-radius:4px;background:transparent;color:var(--t);cursor:pointer}
.menue-knopf svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.klappmenue{display:none}
.sprache.nur-schmal{display:none}
/* Umbrüche gemessen (25.09.): Felder erst ab 1720 px, Reiter mit Umrandung ab 1280 px, darunter Klappmenü */
@media (max-width:1719px){.kopf-login{display:none}.kopf-link-kurz{display:inline}}
@media (max-width:1279px){
  .kopf nav.haupt,.kopf .rechts{display:none}
  .kopf .marke img{height:23px}
  .sprache.nur-schmal{display:inline-grid;margin-left:auto}
  .menue-knopf{display:inline-grid;place-items:center;margin-left:0}
  .klappmenue:not([hidden]){display:grid;gap:2px;padding:6px var(--rand) 18px;border-bottom:1px solid var(--l);background:var(--g);position:relative;z-index:5}
  .klappmenue a{padding:11px 0;text-decoration:none;font-size:17px;color:var(--t2);border-bottom:1px solid #16191d}
  .klappmenue .knopf{margin-top:12px;color:#0a0b0d;border-bottom:0;padding:0 22px}
}

/* ---------- Aufmacher mit 3D-Strecke ---------- */
.held{padding-top:clamp(28px,6vw,80px)}
.held::after{top:-30px;bottom:auto;height:120%}
.held-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(10px,2vw,40px);align-items:center}
.held h1{font-size:clamp(40px,4.2vw,92px);margin:18px 0 0}
.held h1 em{font-style:inherit;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.held .lede{max-width:600px;color:var(--t2);margin:24px 0 28px}
.aktion{display:flex;gap:12px;flex-wrap:wrap}
.klein-hinweis{margin-top:14px;font-size:14px;color:var(--t3)}
.buehne3d{position:relative;height:clamp(420px,34vw,640px);cursor:grab;touch-action:pan-y}
.buehne3d:active{cursor:grabbing}
.buehne3d canvas{position:absolute;inset:0;width:100%;height:100%}
.hud{position:absolute;right:var(--rand);bottom:6%;display:grid;gap:4px;justify-items:end;pointer-events:none;text-shadow:0 2px 12px #000}
.hud-zeit{font-size:15px;color:var(--t2)}
.hud-tempo{font:850 italic clamp(40px,5vw,72px)/1 var(--disp);font-stretch:125%;font-variation-settings:"wdth" 125;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.hud-tempo small{font:600 14px var(--text);color:var(--t2);font-style:normal}
.hud-zeile{display:flex;gap:14px;font-size:14px;color:var(--t2)}
.hud-zeile b{color:var(--lime)}
.legende{position:absolute;left:0;bottom:4%;font-size:12.5px;color:var(--t3);pointer-events:none}
.ohne3d .buehne3d{display:none}
.ohne3d .held-raster{grid-template-columns:1fr}

.spurbox{position:relative;margin-top:clamp(28px,5vw,60px);border-top:1px solid var(--l);border-bottom:1px solid var(--l);background:linear-gradient(180deg,#0c0e11,#08090b)}
.spurkopf{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;padding-block:18px 8px}
.spurkopf .zeit{font-size:30px;font-weight:700}
.spurkopf .was{color:var(--t2);font-size:14px}
.spurkopf .ablesen{margin-left:auto;font-size:13px;color:var(--t2);min-height:1.4em}
.spurkopf .ablesen b{color:var(--lime);font-weight:700}
.spur-flaeche{position:relative;padding-bottom:14px}
#spur2d{display:block;width:100%;height:clamp(240px,19vw,340px);cursor:crosshair;touch-action:pan-y}
.spur-tip{position:absolute;pointer-events:none;z-index:2;background:#0e1013f2;border:1px solid var(--l);border-radius:6px;padding:8px 11px;font-size:13px;line-height:1.45;color:var(--t2);white-space:nowrap;box-shadow:0 10px 30px #0008}
.spur-tip b{color:var(--lime);font-family:var(--mono);font-weight:700}
.spur-tip span{color:var(--t3)}

.band-reihe{border-bottom:1px solid var(--l)}
.band{display:grid;grid-template-columns:repeat(4,1fr)}
/* nur die Spalten trennen, nicht Zahl und Text darin (vorher: versetzte kurze Striche) */
.band > div{padding:26px clamp(12px,2vw,26px);border-right:1px solid var(--l)}
.band > div:last-child{border-right:0}
.band .n{font:850 italic clamp(34px,4.4vw,56px)/1 var(--disp);font-stretch:125%;font-variation-settings:"wdth" 125}
.band .n.l{color:var(--lime)}
.band .w{font-size:14.5px;color:var(--t2);margin-top:8px}

/* LMU-Seite: statt der Tempokurve, was es nur bei LMU gibt (26.09.2026) */
.lmu-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lmu-reihe > div{padding:24px clamp(12px,2vw,26px) 26px;border-right:1px solid var(--l)}
.lmu-reihe > div:first-child{padding-left:0}
.lmu-reihe > div:last-child{border-right:0}
.lmu-reihe h3{font:800 italic 20px/1.1 var(--disp);font-stretch:115%;font-variation-settings:"wdth" 115;text-transform:uppercase;margin:0 0 8px;color:var(--lime)}
.lmu-reihe p{margin:0;color:var(--t2);font-size:15.5px;line-height:1.55}
@media (max-width:1100px){.lmu-reihe{grid-template-columns:1fr 1fr}.lmu-reihe > div:nth-child(2){border-right:0}.lmu-reihe > div:nth-child(-n+2){border-bottom:1px solid var(--l)}.lmu-reihe > div:nth-child(3){padding-left:0}}
@media (max-width:640px){.lmu-reihe{grid-template-columns:1fr}.lmu-reihe > div{border-right:0;padding-left:0;border-bottom:1px solid var(--l)}.lmu-reihe > div:last-child{border-bottom:0}}

/* ---------- Abschnitte ---------- */
section{padding-block:clamp(56px,9vw,120px)}
section.dicht{padding-top:0}
h2.disp{font-size:clamp(30px,3.6vw,56px);margin:16px 0 18px}
.unter{color:var(--t2);max-width:640px;margin:0}

.raster{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px}
.kachel{grid-column:span 2;background:var(--k);border:1px solid var(--l);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .25s ease-out,box-shadow .25s;transform:perspective(900px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg))}
.kachel:hover{box-shadow:0 26px 60px #000c}
.kachel::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--verlauf);opacity:.8;z-index:1}
.kachel.gross{grid-column:span 4}
.kachel.halb{grid-column:span 3}
.kachel .bild{aspect-ratio:16/9;overflow:hidden;background:#0b0d10;border-bottom:1px solid var(--l)}
.kachel .bild img{width:100%;height:100%;object-fit:cover;object-position:top left}
.kachel .txt{padding:18px 20px 22px}
.kachel h3{font:800 italic 21px/1.1 var(--disp);font-stretch:115%;font-variation-settings:"wdth" 115;text-transform:uppercase;margin:0 0 8px}
.kachel p{margin:0;color:var(--t2);font-size:16px;line-height:1.55}
.neu{position:absolute;top:12px;right:12px;z-index:1;font:800 italic 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;background:var(--lime);color:#0a0b0d;padding:5px 9px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.mehr{margin-top:28px}
@media (max-width:900px){.kachel,.kachel.gross,.kachel.halb{grid-column:span 3}}
@media (max-width:600px){.kachel,.kachel.gross,.kachel.halb{grid-column:span 6}}

.zwei{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center}
.zwei.um{grid-template-columns:1.15fr 1fr}
.schirm{border-radius:8px;overflow:hidden;border:1px solid var(--l);box-shadow:0 30px 80px #000a;transform:perspective(1600px) rotateY(-7deg) rotateX(2deg)}
.zwei.um .schirm{transform:perspective(1600px) rotateY(7deg) rotateX(2deg)}
@media (max-width:900px){.zwei,.zwei.um{grid-template-columns:1fr}.schirm,.zwei.um .schirm{transform:none}.zwei.um>:first-child{order:2}}
ul.haken{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
ul.haken li{padding-left:30px;position:relative;color:var(--t2)}
ul.haken li::before{content:"";position:absolute;left:0;top:.6em;width:16px;height:6px;background:var(--verlauf);transform:skewX(-30deg)}
ul.haken li b{color:var(--t);font-weight:600}

.handys{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.handy{width:min(31%,230px);border-radius:26px;padding:7px;background:#1b1f24;border:1px solid #2b3139;box-shadow:0 30px 60px #0009;
  transition:transform .25s ease-out;transform:perspective(900px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg))}
.handy img{border-radius:20px}
.handy:nth-child(2){margin-top:40px}
@media (prefers-reduced-motion:reduce){.kachel,.handy{transition:none}}
.push{display:grid;gap:10px;margin-top:26px;max-width:460px}
.push div{display:flex;gap:12px;align-items:center;background:#1a1e23;border:1px solid var(--l);border-radius:12px;padding:12px 14px;font-size:15.5px}
.push img{width:34px;height:34px;border-radius:8px;flex:none}
.push small{display:block;color:var(--t3);font-size:12.5px}
/* QR-Code zur App neben den Handys (26.09.2026) */
.app-qr{display:flex;gap:16px;align-items:center;margin-top:22px;max-width:460px;text-decoration:none;color:var(--t2);font-size:14.5px;line-height:1.5}
.app-qr img{width:132px;height:132px;flex:none;background:#fff;border-radius:10px;padding:8px;box-sizing:border-box}
.app-qr b{display:block;color:var(--lime);font-family:var(--mono);font-size:15px;margin-bottom:4px}
.app-qr:hover b{text-decoration:underline}

.schritte{display:grid;grid-template-columns:repeat(3,1fr);margin:44px 0 0;counter-reset:s;list-style:none;padding:0}
.schritt{padding:28px 26px 30px;border-left:1px solid var(--l);counter-increment:s}
.schritt::before{content:counter(s);display:block;font:900 italic 64px/1 var(--disp);font-stretch:125%;font-variation-settings:"wdth" 125;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.schritt h3{font:800 italic 22px/1.1 var(--disp);text-transform:uppercase;margin:0 0 8px}
.schritt p{margin:0;color:var(--t2);font-size:16px}

.preise{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;max-width:880px}
.preis{background:var(--k);border:1px solid var(--l);border-radius:6px;padding:28px;display:flex;flex-direction:column}
.preis.abo{border-color:#bfdc2866;background:linear-gradient(180deg,#1f230f,var(--k) 60%)}
.preis h3{font:850 italic 30px/1 var(--disp);font-stretch:120%;font-variation-settings:"wdth" 120;text-transform:uppercase;margin:0}
.preis .betrag{font:700 22px/1.2 var(--mono);margin:14px 0 18px}
.preis .betrag small{font:400 14px var(--text);color:var(--t3)}
.preis ul{margin:0 0 24px;padding-left:18px;color:var(--t2);display:grid;gap:6px;font-size:16px;flex:1;align-content:start}
.preis .knopf{align-self:flex-start}

.fragen{margin-top:36px;border-top:1px solid var(--l);max-width:880px}
details{border-bottom:1px solid var(--l)}
summary{cursor:pointer;list-style:none;padding:20px 0;font:700 italic 19px/1.25 var(--disp);display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--lime);font-style:normal}
details[open] summary::after{content:"–"}
details p{margin:0 0 20px;color:var(--t2);max-width:700px}

.schluss{border-top:1px solid var(--l);padding-block:clamp(64px,10vw,130px)}
.schluss .wm{width:min(900px,100%)}
.schluss .aktion{margin-top:34px}
.fuss{border-top:1px solid var(--l);padding-block:26px;color:var(--t3);font-size:14px}
.fuss .reihe{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--t)}
.fuss .r{margin-left:auto}
.fuss .marke-hinweis{margin:14px 0 0;font-size:12.5px}

/* ---------- Unterseiten ---------- */
.seitenkopf{padding-block:clamp(36px,6vw,80px) clamp(28px,4vw,48px);border-bottom:1px solid var(--l)}
.seitenkopf h1{font-size:clamp(34px,4.6vw,72px);margin:16px 0 14px}
.seitenkopf .lede{color:var(--t2);max-width:640px;margin:0}
.fn-block{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,6vw,72px);border-bottom:1px solid var(--l)}
.fn-block.um .fn-bild{order:2}
.fn-bild{border-radius:8px;overflow:hidden;border:1px solid var(--l);box-shadow:0 24px 60px #0009}
.fn-block h2{font:850 italic clamp(26px,3vw,40px)/1 var(--disp);font-stretch:120%;font-variation-settings:"wdth" 120;text-transform:uppercase;margin:12px 0 12px}
.fn-block p{color:var(--t2);margin:0}
.fn-bild.fn-handy{max-width:300px;justify-self:center;border-radius:26px;padding:7px;background:#1b1f24}
.fn-bild.fn-handy img{border-radius:20px}
@media (max-width:900px){.fn-block{grid-template-columns:1fr}.fn-block.um .fn-bild{order:0}}

.dl-zahlen{display:flex;flex-wrap:wrap;margin-top:30px;border:1px solid var(--l);border-radius:6px;max-width:760px;background:var(--g)}
.dl-zahlen div{flex:1 1 150px;padding:16px 20px;border-right:1px solid var(--l)}
.dl-zahlen div:last-child{border-right:0}
.dl-zahlen strong{display:block;font:700 20px var(--mono)}
.dl-zahlen span{font-size:13.5px;color:var(--t3)}
.hinweisbox{background:var(--k);border:1px solid var(--l);border-left:3px solid var(--lime);border-radius:4px;padding:18px 22px;margin-top:28px;max-width:760px}
.hinweisbox h3{margin:0 0 6px;font:700 italic 18px/1.25 var(--disp)}
.hinweisbox p{margin:0;color:var(--t2);font-size:16.5px}
.text{max-width:780px}
.text h2{font:850 italic clamp(22px,2.4vw,30px)/1.1 var(--disp);font-stretch:115%;font-variation-settings:"wdth" 115;text-transform:uppercase;margin:44px 0 12px}
.text h3{font:700 19px/1.3 var(--text);margin:28px 0 8px}
.text p,.text li{color:var(--t2)}
.text ol,.text ul{padding-left:22px}
.text a{color:var(--lime)}
.text strong{color:var(--t)}
.notiz h3{font:700 17px/1.3 var(--text);color:var(--t);margin:22px 0 6px}
.notiz ul{padding-left:20px;color:var(--t2);font-size:16.5px}
.luecke{background:#ffb02026;color:var(--amber);padding:0 5px;border-radius:3px;font-family:var(--mono);font-size:.85em}
.entwurf-hinweis{border:1px solid #ffb02066;background:#ffb02012;color:var(--amber);border-radius:6px;padding:12px 16px;font-size:15px;margin-top:22px;max-width:780px}

/* ---------- Handy und Tablet ---------- */
@media (max-width:900px){
  .held-raster{grid-template-columns:1fr}
  .held h1{font-size:40px}
  h2.disp{font-size:32px}
  .buehne3d{height:min(560px,72vw);margin-inline:calc(-1 * var(--rand))}
  .hud{bottom:12%}
  .hud-tempo{font-size:40px}
  .legende{left:var(--rand)}
  .band .n{font-size:34px}
}
@media (max-width:760px){
  .band{grid-template-columns:1fr 1fr}
  .band > div:nth-child(2){border-right:0}
  .band > div:nth-child(-n+2){border-bottom:1px solid var(--l)}
  .schritte{grid-template-columns:1fr}
  .schritt{border-left:0;border-top:1px solid var(--l)}
  .preise{grid-template-columns:1fr}
}
@media (max-width:640px){
  .held h1{font-size:32px;margin-top:14px}
  .eyebrow{font-size:11px;letter-spacing:.2em}
  h2.disp{font-size:28px}
  .held .lede{margin:18px 0 24px}
  .held .aktion .knopf{flex:1 1 100%}
  .buehne3d{height:360px}
  .spurkopf .zeit{font-size:24px}
  #spur2d{height:220px}
  .spurkopf .ablesen{margin-left:0}
  section{padding-block:56px}
  .schritt::before{font-size:48px}
  .preis h3{font-size:26px}
  summary{font-size:17px}
  .seitenkopf h1{font-size:32px}
  .fuss .r{margin-left:0}
}