/* hub.css — Optik GSV-Hub-Seite (Launcher für alle Games), Werte nur aus tokens.css (--ds-*), kein eigenes #hex/px.
   Variante A = Panel-Familie (zentriert, Karten). Variante B = eigenes Konzept (dunkle Bühne, Portal-Kreis, Pastell-Kacheln). Verlierer wird gelöscht. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100svh;background:var(--ds-farbe-grund);color:var(--ds-farbe-text);font-family:var(--ds-schrift-familie);font-size:var(--ds-schrift-m);line-height:var(--ds-zeile-normal);overflow-x:clip}
a{color:var(--ds-farbe-akzent)}
a:hover{color:var(--ds-farbe-akzent-hover)}
a:focus-visible{outline:none;box-shadow:var(--ds-fokus-ring)}
.sprung{position:absolute;left:var(--ds-abstand-6);top:var(--ds-abstand-5);padding:var(--ds-abstand-4) var(--ds-abstand-5);background:var(--ds-farbe-flaeche);color:var(--ds-farbe-text);border-radius:var(--ds-radius-m);transform:translateY(-200%);z-index:2}
.sprung:focus{transform:none}
.rahmen{width:min(100% - (2 * var(--ds-abstand-8)), var(--ds-breite-inhalt) * 1.5);margin-inline:auto}
.kopfleiste{height:var(--ds-hoehe-kopf);background:var(--ds-farbe-leiste);border-bottom:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen)}
.kopfleiste .rahmen{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--ds-abstand-6)}
.marke{display:inline-flex;align-items:center;gap:var(--ds-abstand-5);color:var(--ds-farbe-text);text-decoration:none;font-weight:var(--ds-gewicht-halbfett);font-size:var(--ds-schrift-l)}
.marke:hover{color:var(--ds-farbe-text)}
.symbol{display:inline-flex;width:var(--ds-groesse-avatar-m);height:var(--ds-groesse-avatar-m)}
.symbol svg,.symbol-gross svg{width:100%;height:100%;display:block}
.kopfleiste a.kopf-link{color:var(--ds-farbe-text-2);text-decoration:none;font-size:var(--ds-schrift-s)}
.kopfleiste a.kopf-link:hover{color:var(--ds-farbe-akzent)}
.buehne{padding-block:var(--ds-abstand-12) var(--ds-abstand-10);display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--ds-abstand-10)}
.kicker{margin:0 0 var(--ds-abstand-3);color:var(--ds-farbe-akzent);font-size:var(--ds-schrift-s);font-weight:var(--ds-gewicht-halbfett);letter-spacing:var(--ds-laufweite-kapital);text-transform:uppercase}
h1{margin:0 0 var(--ds-abstand-4);font-size:var(--ds-schrift-4xl);font-weight:var(--ds-gewicht-fett);line-height:var(--ds-zeile-eng)}
.unter{margin:0 0 var(--ds-abstand-8);color:var(--ds-farbe-text-2);font-size:var(--ds-schrift-l)}
.aktion{margin:0}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ds-groesse-knopf-xl);padding:0 var(--ds-abstand-10);border-radius:var(--ds-radius-m);border:var(--ds-linie-duenn) solid var(--ds-farbe-akzent);background:var(--ds-farbe-akzent);color:var(--ds-farbe-akzent-text);font-size:var(--ds-schrift-l);font-weight:var(--ds-gewicht-halbfett);text-decoration:none;transition:background var(--ds-dauer-schnell) var(--ds-kurve-standard)}
.knopf:hover{background:var(--ds-farbe-akzent-hover);border-color:var(--ds-farbe-akzent-hover);color:var(--ds-farbe-akzent-text)}
.knopf[aria-disabled="true"]{pointer-events:none;background:var(--ds-farbe-flaeche-3);border-color:var(--ds-farbe-rahmen);color:var(--ds-farbe-text-3)}
.meta{margin:var(--ds-abstand-6) 0 0;color:var(--ds-farbe-text-3);font-size:var(--ds-schrift-s)}
.zeichen-gross{display:flex;flex-direction:column;align-items:center;gap:var(--ds-abstand-7)}
.symbol-gross{display:block;width:var(--ds-groesse-orb);height:var(--ds-groesse-orb)}
.kacheln{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ds-abstand-4)}
.kacheln li{padding:var(--ds-abstand-3) var(--ds-abstand-6);border-radius:var(--ds-radius-voll);background:var(--ds-farbe-akzent-hauch);border:var(--ds-linie-duenn) solid var(--ds-farbe-akzent-rahmen);font-size:var(--ds-schrift-s);color:var(--ds-farbe-text)}
.kann{padding-block:0 var(--ds-abstand-12)}
.kann h2{margin:0 0 var(--ds-abstand-8);font-size:var(--ds-schrift-xl);font-weight:var(--ds-gewicht-halbfett)}
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ds-breite-popup-l),100%),1fr));gap:var(--ds-abstand-6);margin:0}
.liste div{margin:0;min-width:0;background:var(--ds-farbe-flaeche);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-l);box-shadow:var(--ds-schatten-s);padding:var(--ds-abstand-6)}
.liste dt{margin:0 0 var(--ds-abstand-2);font-size:var(--ds-schrift-l);font-weight:var(--ds-gewicht-halbfett);overflow-wrap:break-word}
.liste dd{margin:0;color:var(--ds-farbe-text-2);overflow-wrap:break-word}
.fuss{padding-block:0 var(--ds-abstand-11);color:var(--ds-farbe-text-3);font-size:var(--ds-schrift-s)}
.fuss p{margin:0 0 var(--ds-abstand-4)}
.fuss a{color:var(--ds-farbe-text-3)}
.fuss a:hover{color:var(--ds-farbe-akzent)}
@media (max-width:640px){.rahmen{width:min(100% - (2 * var(--ds-abstand-6)), 100%)}.buehne{padding-block:var(--ds-abstand-9)}.knopf{width:100%}}

/* ---- Variante B: dunkle Bühne links, Portal-Kreis rechts, Pastell-Kacheln ---- */
[data-variante="b"] .buehne{text-align:left;grid-template-columns:1.2fr 1fr;align-items:center;justify-items:stretch;background:var(--ds-farbe-terminal-grund);color:var(--ds-farbe-terminal-text);border-radius:var(--ds-radius-2xl);padding:var(--ds-abstand-12);margin-block:var(--ds-abstand-11) var(--ds-abstand-10);box-shadow:var(--ds-schatten-l)}
[data-variante="b"] .unter,[data-variante="b"] .meta{color:var(--ds-farbe-terminal-leise)}
[data-variante="b"] .kicker{color:var(--ds-farbe-akzent)}
[data-variante="b"] .symbol-gross{width:calc(var(--ds-groesse-orb) * 1.4);height:calc(var(--ds-groesse-orb) * 1.4)}
[data-variante="b"] .kacheln li{border:0;color:var(--ds-farbe-text)}
[data-variante="b"] .kacheln li:nth-child(1),[data-variante="b"] .liste div:nth-child(4n+1){background:var(--ds-farbe-pastell-minze)}
[data-variante="b"] .kacheln li:nth-child(2),[data-variante="b"] .liste div:nth-child(4n+2){background:var(--ds-farbe-pastell-lavendel)}
[data-variante="b"] .kacheln li:nth-child(3),[data-variante="b"] .liste div:nth-child(4n+3){background:var(--ds-farbe-pastell-pfirsich)}
[data-variante="b"] .kacheln li:nth-child(4),[data-variante="b"] .liste div:nth-child(4n){background:var(--ds-farbe-pastell-himmel)}
[data-variante="b"] .liste div{border-radius:var(--ds-radius-xl);box-shadow:none}
@media (max-width:640px){[data-variante="b"] .buehne{grid-template-columns:1fr;padding:var(--ds-abstand-8)}}

/* ---- Ablauf-Vorschau (OA-1008-023): reine CSS-Animation, Zyklus = 8 x --ds-dauer-puls; ohne Bewegung alle Szenen untereinander ---- */
.ablauf{padding-block:0 var(--ds-abstand-12)}
.ablauf h2{margin:0 0 var(--ds-abstand-3);font-size:var(--ds-schrift-xl);font-weight:var(--ds-gewicht-halbfett)}
.ablauf-unter{margin:0 0 var(--ds-abstand-8);color:var(--ds-farbe-text-2)}
.fenster{max-width:var(--ds-breite-inhalt);background:var(--ds-farbe-flaeche);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-xl);box-shadow:var(--ds-schatten-l);padding:var(--ds-abstand-6);display:grid;gap:var(--ds-abstand-6)}
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ds-abstand-3)}
.schritte li{text-align:center;padding:var(--ds-abstand-3) var(--ds-abstand-2);border-radius:var(--ds-radius-voll);background:var(--ds-farbe-flaeche-2);color:var(--ds-farbe-text-3);font-size:var(--ds-schrift-s);animation:ab-tab calc(var(--ds-dauer-puls) * 8) infinite}
.schritte li:nth-child(1){animation-delay:0s}
.schritte li:nth-child(2){animation-delay:calc(var(--ds-dauer-puls) * 2)}
.schritte li:nth-child(3){animation-delay:calc(var(--ds-dauer-puls) * 4)}
.schritte li:nth-child(4){animation-delay:calc(var(--ds-dauer-puls) * 6)}
.szenen{position:relative;min-height:calc(var(--ds-groesse-knopf-xl) * 4)}
.szene{position:absolute;inset:0;display:grid;align-content:start;gap:var(--ds-abstand-4);opacity:0;animation:ab-szene calc(var(--ds-dauer-puls) * 8) infinite}
.s2{animation-delay:calc(var(--ds-dauer-puls) * 2)}
.s3{animation-delay:calc(var(--ds-dauer-puls) * 4)}
.s4{animation-delay:calc(var(--ds-dauer-puls) * 6)}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-abstand-4);padding:var(--ds-abstand-4) var(--ds-abstand-6);border-radius:var(--ds-radius-m);background:var(--ds-farbe-flaeche-2);border:var(--ds-linie-duenn) solid transparent;font-size:var(--ds-schrift-m)}
.zeile.wahl{background:var(--ds-farbe-akzent-hauch);border-color:var(--ds-farbe-akzent-rahmen)}
.chip{padding:var(--ds-abstand-1) var(--ds-abstand-4);border-radius:var(--ds-radius-voll);background:var(--ds-farbe-akzent-hauch);border:var(--ds-linie-duenn) solid var(--ds-farbe-akzent-rahmen);font-size:var(--ds-schrift-xs)}
.chip.leise{background:var(--ds-farbe-flaeche-3);border-color:var(--ds-farbe-rahmen);color:var(--ds-farbe-text-3)}
.chip.neu{background:var(--ds-farbe-pastell-pfirsich)}
.balken{height:var(--ds-abstand-4);border-radius:var(--ds-radius-voll);background:var(--ds-farbe-flaeche-3);overflow:hidden}
.balken span{display:block;height:100%;width:100%;background:var(--ds-farbe-akzent);transform-origin:left;transform:scaleX(0);animation:ab-balken calc(var(--ds-dauer-puls) * 8) infinite}
.s4 .balken span{animation-delay:calc(var(--ds-dauer-puls) * 6)}
.s3 .balken span{animation-delay:calc(var(--ds-dauer-puls) * 4)}
.knopf-vorschau{justify-self:start;padding:var(--ds-abstand-4) var(--ds-abstand-8);border-radius:var(--ds-radius-m);background:var(--ds-farbe-akzent);color:var(--ds-farbe-akzent-text);font-weight:var(--ds-gewicht-halbfett);font-size:var(--ds-schrift-m)}
@keyframes ab-szene{0%{opacity:0}4%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes ab-tab{0%{background:var(--ds-farbe-flaeche-2);color:var(--ds-farbe-text-3)}4%,22%{background:var(--ds-farbe-akzent);color:var(--ds-farbe-akzent-text)}26%,100%{background:var(--ds-farbe-flaeche-2);color:var(--ds-farbe-text-3)}}
@keyframes ab-balken{0%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
.schritte{display:none}
.szenen{min-height:0;display:grid;gap:var(--ds-abstand-6)}
.szene,.schritte li,.balken span{animation:none}
.szene{position:static;opacity:1}
.balken span{transform:none}
}