/* ==========================================================================
   Startseite = Terminalhalle — Design-QoL 41 (BAUPLAN-DESIGN-QOL.md Runde 2), Figma YRUirscc0yHUgTS69n5bDU
   „🟡 Paket A · Haustür · Final“: H-1…H-4 764:51251 ff. (1440) · M-1…M-4 765:51251 ff. (430), abgenommen 25.10.2026.
   Seite 1440, Inhalt 1200 (Rand 120). Nur Material der Site: Buehne (tw.css .tw-sf-buehne), Ticket (.tw-sf-ticket), Klappschrift
   (.tw-tk-ks), Zeitungspapier (.tw-sf-ztg), Poster (tw-teams.css .tw-r-p), Aushang (tw-baum.css .tw-b5-aushang), Podest
   (.tw-sf-podest.kompakt), Bordkarten-Abschnitte — keine Kartenkaesten mit Radius + Rahmen (BRAND §4).
   Barlow Condensed (--st-tafel) = BRAND-Ausnahme fuer Anzeigetafel, Abschnitts-Kicker, Aushang, Bordkarten-Nummern und
   Wallet-Countdown (BRAND.md §Schriften). Die Bloecke Queue-Board (.st-live/.st-q*) und Termin-Zeile (.st-zeile*) bleiben hier,
   weil /live und die Partnerseite sie ueber js/st-bausteine.js laden.
   ========================================================================== */

.st-seite { --st-rand: 120px; --st-tafel: 'Barlow Condensed', 'Outfit', sans-serif; }
@media (max-width: 1280px) { .st-seite { --st-rand: 40px; } }
@media (max-width: 600px)  { .st-seite { --st-rand: 16px; } }

.st-wrap { width: min(1280px, calc(100% - 2 * var(--st-rand))); margin: 0 auto; }

/* Leiste liegt durchsichtig auf dem Rift; ab dem ersten Scrollen (start.js) oder mit offener
   Schublade wieder auf Grund, sonst laeuft Text unter ihr durch. */
.st-seite .navbar { background: transparent; transition: background-color .2s ease; }
.st-seite.st-unten .navbar,
.st-seite .navbar:has(.navbar-nav.open) { background: var(--grund); }

/* ── Bausteine dieser Seite (Figma 58:5 / 58:7). W0 macht daraus den Website-Knopf. ── */
.st-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px;
          border: 1px solid var(--violett-knopf); border-radius: 8px; background: var(--violett-knopf);
          color: var(--w100); font: 500 14px/1 var(--font-brand); white-space: nowrap; text-decoration: none;
          transition: background-color .15s ease, border-color .15s ease; }
.st-btn:hover { background: var(--violett-knopf-hover); border-color: var(--violett-knopf-hover); color: var(--w100); }
.st-btn.still { background: transparent; border-color: var(--w12); }
.st-btn.still:hover { background: var(--w06); border-color: var(--w25); }
.st-btn:focus-visible, .st-link:focus-visible, .st-schalter button:focus-visible,
.st-karte:focus-visible, .st-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.st-link { display: inline-flex; align-items: center; gap: 6px; color: var(--violett-text);
           font: 500 14px/18px var(--font-brand); text-decoration: none; white-space: nowrap; }
.st-link:hover { color: var(--w100); }
.st-pfeil { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5;
            stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.st-link:hover .st-pfeil, .st-q:hover .st-pfeil { transform: translateX(2px); }

.st-k { font: 600 11px/14px var(--font-brand); letter-spacing: .88px; text-transform: uppercase; color: var(--w70); }
.st-k-leise { color: var(--w45); }
.st-t { margin: 8px 0 0; font: 600 34px/43px var(--font-brand); color: var(--w100); }
.st-t-30 { font-size: 30px; line-height: 38px; }
.st-klein { font-size: 12px; color: var(--w45); }


/* ── Kopfzeile eines Abschnitts (Figma „Kopfzeile“): Kicker in Tafelschrift · Linie · Link rechts ── */
.st-abschnitt { padding-top: 64px; min-width: 0; }
.st-abschnitt:empty { display: none; }
.st-kz { display: flex; align-items: center; gap: 12px 16px; min-width: 0; }
.st-kzt { margin: 0; font: 600 13px/16px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--w45); min-width: 0; overflow-wrap: anywhere; }
.st-kzl { flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--w08); }
.st-kz .st-link { flex: none; }

/* ── 1 · Halle (Figma 764:51307): Buehne = Cover des Hero-Cups unscharf (tw.css .tw-sf-buehne.unscharf, hier ueber die ganze Halle),
      links Claim + Anzeigetafel + Knoepfe (560), rechts das Ticket (584), Abstand 56 ── */
.st-halle { position: relative; isolation: isolate; overflow: hidden; padding: 144px 0 72px; }
.st-halle .tw-sf-buehne, .st-halle .tw-sf-buehne.unscharf { top: 0; height: 100%; }
.st-halle-in { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 584px); justify-content: space-between; gap: 40px 56px; align-items: start; }
.st-claim { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.st-terminal { margin: 0 0 22px; font: 600 12px/17px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--w55); }
.st-h1 { margin: 0; font: 800 64px/67px var(--font-brand); letter-spacing: -.02em; color: var(--w100); }
.st-sub { margin: 22px 0 0; max-width: 520px; font: 400 16px/22px var(--font-brand); color: var(--w70); }
.st-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.st-ctas .tw-btn { height: 44px; padding: 0 18px; font-size: 14px; }
.st-ctas .tw-btn svg { width: 14px; height: 14px; }
.st-ctas .tw-btn .dc { width: 16px; height: 16px; fill: currentColor; }
/* Anzeigetafel (764:51315): Blaetter 15 × 24, Beschriftung 72 breit; Statuswort in Zustandsfarbe; Klappen beim ersten Zeichnen (erst) und je geaenderter Zeile (klapp) */
.st-tafel { --font-tafel: var(--st-tafel); --ks-w: 15px; --ks-h: 24px; --ks-fs: 15px; margin: 22px 0 0; display: flex; flex-direction: column; gap: 6px; min-height: 118px; }
.st-tz { display: flex; align-items: center; gap: 14px; min-height: 24px; min-width: 0; }
.st-tz dt { flex: 0 0 72px; font: 600 11px/14px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--w45); }
.st-tz dd { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--w100); overflow: hidden; }
.st-tz dd .tw-tk-ks { flex: 0 0 auto; }
.st-tz .tw-tk-ks.t-violett { color: var(--violett-text); }
.st-tz .tw-tk-ks.t-gruen { color: #b6e07a; }
.st-tz .tw-tk-ks.t-amber { color: var(--gold2); }
.st-tz .tw-tk-ks.t-grau { color: var(--w45); }
.st-tafel.erst .tw-tk-ks i, .st-tz.klapp .tw-tk-ks i { animation: tk-klapp 420ms cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(var(--n, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) { .st-tafel.erst .tw-tk-ks i, .st-tz.klapp .tw-tk-ks i { animation: none; } }
/* Ticket-Spalte (764:51579): Kicker mit Bildmarke, Ticket (Container-Einheit aus der Spaltenbreite, gekippt wie das Share-Bild), darunter Unterzeile + Knoepfe */
.st-tk-spalte { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding-top: 10px; }
.st-tkick { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 12px/16px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--violett-text); min-width: 0; }
.st-tkick b { font-weight: 600; overflow-wrap: anywhere; }
.st-tkick .st-marke { width: 20px; height: 20px; flex: none; }
.st-tkick .tw-logo { --gr: 20px; border-radius: 5px; }
.st-tkf { width: 100%; display: flex; justify-content: center; cursor: pointer; }
.st-tkf .tw-sf-ticket { max-width: none; }
@media (min-width: 961px) { .st-tkf .tk { transform: rotate(3deg); } }
.st-takt { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.st-takt .tw-tk-unter { margin: 0; flex: 1 1 240px; font: 400 14px/18px var(--font-brand); color: var(--w70); min-width: 0; overflow-wrap: anywhere; }
.st-takt .tw-tk-unter .tw-zahl { color: inherit; font: inherit; }
.st-takt .tw-tk-akt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.st-takt .tw-tk-akt .tw-btn { height: 38px; }
.tw-tk-fehler { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(237, 87, 97, .12); border: 1px solid rgba(237, 87, 97, .4);
    font: 500 14px/18px var(--font-brand); color: #ff8a92; text-align: center; }
.tw-tk-fehler[hidden] { display: none; }
/* Geister-Ticket (H-2 764:52256 · Tafel offline · Skelett) */
.st-geist { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 48px;
    border: 1.5px dashed rgba(124, 92, 255, .45); border-radius: 18px; background: rgba(20, 21, 27, .55); backdrop-filter: blur(2px); box-sizing: border-box; }
.st-geist .kap { margin: 0; font: 600 12px/15px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--violett-text); }
.st-geist h2 { margin: 0; font: 800 32px/40px var(--font-brand); letter-spacing: -.01em; color: var(--w100); overflow-wrap: anywhere; }
.st-geist .txt { margin: 0; max-width: 440px; font: 400 15px/20px var(--font-brand); color: var(--w70); }
.st-geist .tw-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; }
.st-geist.fehler { border-color: rgba(255, 255, 255, .22); }
.st-geist.fehler .kap { color: var(--w55); }
.st-geist.skel { align-items: flex-start; text-align: left; border-style: solid; border-color: var(--w08); background: rgba(255, 255, 255, .03); }
.st-geist.skel i { display: block; height: 14px; max-width: 100%; border-radius: 6px; background: var(--w08); animation: st-puls 1.6s ease-in-out infinite; }
.st-geist.skel i.g { height: 40px; }
@keyframes st-puls { 50% { opacity: .5; } }

/* ── 2 · Queue-Zeile (H-3 764:53035, nur ab 1 Spieler): Ring 80 · Kicker/Bracket/Zahlen · Rollen x/2 · ARAM/Classic · Link — EIN Link nach /live ── */
.st-queue:empty { display: none; }
.st-queue { padding-top: 28px; }
.st-qz { display: grid; grid-template-columns: 80px minmax(160px, 1fr) auto auto auto; align-items: center; gap: 16px 32px; padding: 19px 0;
    border-top: 1px solid var(--w08); border-bottom: 1px solid var(--w08); color: inherit; text-decoration: none; transition: background-color .15s ease; }
.st-qz:hover { background: var(--w03); }
.st-qz:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.st-qz .st-ring { width: 80px; height: 80px; }
.st-qz .st-ring-n { font: 700 18px/23px var(--font-brand); }
.st-qz .st-ring-sub { font-size: 9px; line-height: 12px; letter-spacing: .08em; }
.st-qz .st-ring-sub.leer { max-width: 62px; text-transform: none; letter-spacing: 0; font: 500 9px/11px var(--font-brand); color: var(--w55); text-align: center; }
.st-qz-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-qz-k { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/14px var(--st-tafel); letter-spacing: .14em; text-transform: uppercase; color: var(--gruen); }
.st-qz-text b { font: 600 16px/20px var(--font-brand); color: var(--w100); }
.st-qz-text small { font: 500 12px/15px var(--font-brand); color: var(--w45); }
.st-qz-rollen { display: flex; gap: 28px; }
.st-qz-rolle { display: flex; flex-direction: column; gap: 6px; width: 54px; }
.st-qz-rolle .st-rolle-kopf { gap: 6px; }
.st-qz-modi { display: flex; gap: 24px; }
.st-qz-modus { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.st-qz-modus::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--w25); }
.st-qz-modus.aram::before { background: var(--q-aram); }
.st-qz-modus.classic::before { background: var(--q-classic); }
.st-qz-modus b { font: 600 15px/19px var(--font-brand); color: var(--w100); }
.st-qz-modus span { font: 500 13px/16px var(--font-brand); color: var(--w70); }
.st-qz-modus span.leer { color: var(--w45); }
.st-qz > .st-link { justify-self: end; }

/* ── 3 · Live · Queue-Streifen (72:1275) ──────────────────────────────────── */
.st-live { padding-top: 40px; }
.st-live-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.st-live-k { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/14px var(--font-brand);
             letter-spacing: .88px; text-transform: uppercase; color: var(--gruen); }
.st-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: none; }
.st-punkt.klein { width: 6px; height: 6px; }
.st-live-zahlen { font: 500 13px/16px var(--font-brand); color: var(--w45); }
.st-live-zahlen i { font-style: normal; padding: 0 8px; }

.st-q { display: block; color: inherit; text-decoration: none; border-top: 1px solid var(--w08);
        border-bottom: 1px solid var(--w08); transition: background-color .15s ease; }
a.st-q:hover { background: var(--w03); color: inherit; }
.st-q-streifen { display: flex; align-items: stretch; min-height: 232px; border-bottom: 1px solid var(--w08); }

.st-q-ring { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px;
             padding: 32px 40px 32px 0; border-right: 1px solid var(--w08); }
.st-ring { position: relative; width: 132px; height: 132px; display: flex; flex-direction: column;
           align-items: center; justify-content: center; }
.st-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-ring path { fill: var(--w12); }
.st-ring path.an { fill: var(--q-5v5); }
.st-ring-n { position: relative; font: 700 28px/35px var(--font-brand); color: var(--w100); }
.st-ring.leer .st-ring-n { color: var(--w45); }
.st-ring-sub { position: relative; font: 600 10px/13px var(--font-brand); letter-spacing: 1px; text-transform: uppercase; color: var(--w45); }
.st-ring-b { font: 600 12px/15px var(--font-brand); color: var(--w70); white-space: nowrap; }
/* N1: leerer Ring im Board — keine Zahl, ein Satz in der Mitte (die Queue-Zeile der Startseite hat ihre eigene, kleinere Form) */
.st-q .st-ring-sub.leer { max-width: 96px; text-transform: none; letter-spacing: 0; font: 500 11px/14px var(--font-brand); color: var(--w55); text-align: center; }

.st-q-rollen { flex: 1 1 auto; min-width: 0; display: flex; }
.st-rolle { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 32px 20px; }
.st-rolle-kopf { display: flex; justify-content: space-between; font: 600 11px/14px var(--font-brand); }
.st-rolle-kopf span { letter-spacing: .88px; text-transform: uppercase; color: var(--w45); }
.st-rolle-kopf b { font-weight: 600; color: var(--w45); }
.st-rolle-kopf b.halb { color: var(--w100); }
.st-rolle-kopf b.voll { color: var(--gruen); }
.st-balken { display: flex; gap: 3px; }
.st-balken i { flex: 1 1 0; height: 3px; border-radius: 2px; background: var(--w12); }
.st-balken i.an { background: var(--gruen); }
.st-platz { display: flex; align-items: center; gap: 10px; min-width: 0; height: 28px; }
.st-platz img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; }
.st-platz span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/18px var(--font-brand); color: var(--w100); }
.st-platz.frei { width: 28px; border: 1.5px dashed var(--w25); border-radius: 50%; box-sizing: border-box; }

.st-q-modi { flex: none; width: 240px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px;
             padding: 32px 0 32px 40px; border-left: 1px solid var(--w08); }
.st-modus { display: flex; flex-direction: column; gap: 8px; }
.st-modus-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.st-modus-kopf > span:first-child { font: 600 15px/19px var(--font-brand); color: var(--w100); }
.st-modus-n b { font: 700 28px/35px var(--font-brand); color: var(--w100); }
.st-modus-n small { margin-left: 2px; font: 500 13px/16px var(--font-brand); color: var(--w45); }
.st-punkte { display: flex; gap: 5px; }
.st-punkte i { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--w25); }
.st-punkte.aram i.an { background: var(--q-aram); border-color: var(--q-aram); }
.st-punkte.classic i.an { background: var(--q-classic); border-color: var(--q-classic); }

.st-q-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 18px 0; }
.st-q-fuss-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-width: 0; }
.st-q-lauf { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/16px var(--font-brand); color: var(--w70); }
.st-q-br { font: 400 13px/16px var(--font-brand); color: var(--w45); white-space: nowrap; }
.st-q-br span { margin-left: 8px; }
.st-q-br.an { font-weight: 600; color: var(--w100); }

/* ── 4 · Termine (72:1132): Zeile 92 mit Haarlinie ───────────────────────── */
.st-termine { padding: 96px 0; }
.st-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.st-liste { margin-top: 28px; border-top: 1px solid var(--w08); }
.st-zeile { display: flex; align-items: center; gap: 28px; min-height: 92px; border-bottom: 1px solid var(--w08); }
.st-datum { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; }
.st-datum span { font: 600 11px/14px var(--font-brand); letter-spacing: .88px; text-transform: uppercase; color: var(--w45); }
.st-datum b { font: 700 26px/33px var(--font-brand); color: var(--w100); }
.st-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-info b { font: 600 18px/23px var(--font-brand); color: var(--w100); }
.st-info span:last-child { font: 400 13px/16px var(--font-brand); color: var(--w70); }
.st-info b, .st-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-typ { font: 600 11px/14px var(--font-brand); letter-spacing: .88px; text-transform: uppercase; }
.st-typ.abend { color: var(--gruen); }
.st-typ.turnier { color: var(--violett-text); }
.st-zahl, .st-host { flex: none; display: flex; flex-direction: column; gap: 2px; }
.st-zahl { width: 130px; }
.st-zahl b { font: 600 18px/23px var(--font-brand); color: var(--w100); }
.st-zahl span, .st-host small { font: 400 12px/15px var(--font-brand); color: var(--w45); }
.st-zahl .st-satz { font: 500 13px/17px var(--font-brand); color: var(--w70); }   /* N1: Satz statt „0 signed up“ */
.st-host { width: 150px; }
.st-host span { font: 500 14px/18px var(--font-brand); color: var(--w70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-zeile .st-btn { flex: none; }
.st-leer { margin: 0; padding: 28px 0; color: var(--w70); font-size: 14px; border-bottom: 1px solid var(--w08); }

/* Handlungen (19.10.2026, aus /inhouse): Zusage in der Termin-Zeile, „ARAM-Queue beitreten“ im Board — js/st-bausteine.js */
.st-zusage { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 210px; }
.st-dabei { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/16px var(--font-brand); color: var(--gruen); white-space: nowrap; }
.st-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.st-meld { margin: 0; padding: 12px 0 16px; font: 400 13px/18px var(--font-brand); color: var(--w70); border-bottom: 1px solid var(--w08); }
.st-meld a { color: var(--violett-text); }
.st-q-fuss-r { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.st-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 24px 0 0;
              font: 500 14px/18px var(--font-brand); color: var(--w70); }

/* ── 3 · Zeitung „Diese Woche“ (764:51685): Papier = TW.sf.ausgabeTeaser (tw.css .tw-sf-ztg), leicht gedreht → 8 px Luft ── */
.st-zeitung .tw-sf-ztg { margin: 30px 8px 0; }

/* ── 4 · Roster-Streifen (764:51792): TK14-Poster (tw-teams.css, Variablen wie .page-teams), darunter „Dein Team hier“ ── */
.st-roster { --lime: 182, 224, 122; --lime-r: 140, 198, 63; --gold-t: 243, 227, 181; --b5: var(--st-tafel); }
.st-poster { margin-top: 30px; }
.st-rz { display: flex; align-items: center; gap: 12px 16px; margin-top: 22px; flex-wrap: wrap; min-width: 0; }
.st-rz b { font: 600 13px/16px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--w100); white-space: nowrap; }
.st-rz > span { font: 400 13px/16px var(--font-brand); color: var(--w55); min-width: 0; }
.st-rz .st-link { flex: none; }

/* ── 5 · Spitze der Rangliste (764:51840): Aushang-Papier (tw-baum.css .tw-b5-aushang, TK5) links 527 · Podest rechts 660 ── */
.st-sp { display: grid; grid-template-columns: minmax(0, 527fr) minmax(0, 660fr); gap: 40px 112px; align-items: end; margin-top: 30px; }
.st-sp.ohne { grid-template-columns: minmax(0, 720px); }
.st-sp-l { padding: 6px 8px 8px; min-width: 0; }
.st-sp-r { min-width: 0; }
.st-au-w { gap: 0; }
.st-au { padding: 28px 30px 18px; }
.st-au .kick { font-size: 11px; }
.st-au h3 { margin: 4px 0 10px; font-size: 26px; line-height: 30px; }
.st-au .az { grid-template-columns: 36px minmax(0, 1fr) 70px 50px; min-height: 35px; text-decoration: none; color: inherit; gap: 0 8px; }
.st-au .az.kopf .w { text-align: right; }
.st-au .az .r { font-size: 17px; color: rgba(29, 28, 34, .5); }
.st-au .az.p1 .r { color: #c89b3c; }
.st-au .az.p2 .r { color: #8c93a3; }
.st-au .az.p3 .r { color: #c8743c; }
.st-au .az .t .n { font: 600 15px/19px var(--font-brand); }
.st-au a.az:hover .n { color: #5a3fd9; }
.st-au a.az:focus-visible { outline: 2px solid #5a3fd9; outline-offset: 2px; }
.st-au .pk { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: rgba(29, 28, 34, .3); }
.st-au .pk.gold { background: #c89b3c; }
.st-au .pk.silber { background: #8c93a3; }
.st-au .pk.bronze { background: #c8743c; }
.st-au .az .w { font: 600 17px/1 var(--st-tafel); text-align: right; font-variant-numeric: tabular-nums; }
.st-au .az .w.sn { font-weight: 400; color: rgba(29, 28, 34, .55); }
.st-au-fuss { margin: 14px 0 0; font: 600 10px/13px var(--st-tafel); letter-spacing: .12em; text-transform: uppercase; color: rgba(29, 28, 34, .5); }
.st-au-leer { margin: 8px 0 0; font: 400 15px/21px var(--font-brand); color: rgba(29, 28, 34, .7); }
.st-stempel { position: absolute; right: 56px; top: 30px; transform: rotate(-6deg); padding: 6px 12px; border: 2px solid #2f7d3a; color: #2f7d3a;
    font: 600 17px/22px var(--st-tafel); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* ── 6 · So geht's (764:51947): drei Bordkarten-Abschnitte — Abschnitt 64 violett mit Klappschrift-Nummer, Perforation + Kerben, Text ── */
.st-bks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.st-bk { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 116px; background: var(--flaeche); min-width: 0; }
.st-bk::before, .st-bk::after { content: ""; position: absolute; left: 55px; width: 20px; height: 20px; border-radius: 50%; background: var(--grund); z-index: 1; }
.st-bk::before { top: -10px; }
.st-bk::after { bottom: -10px; }
.st-bk-stub { position: relative; display: flex; align-items: center; justify-content: center; background: var(--violett-knopf);
    --font-tafel: var(--st-tafel); --ks-w: 20px; --ks-h: 30px; --ks-fs: 20px; }
.st-bk-stub::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; border-right: 2px dashed rgba(255, 255, 255, .35); }
.st-bk-stub .tw-tk-ks { color: #fff; }
.st-bk-h { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px 24px; min-width: 0; }
.st-bk-h b { font: 600 17px/21px var(--font-brand); color: var(--w100); }
.st-bk-h span { font: 400 14px/18px var(--font-brand); color: var(--w55); }
/* Wallet-Zeile (H-4 764:54158, angemeldet mit Ticket): Abschnitt 120 mit Countdown in Klappschrift, Kicker + Name + Code-Zeile, Knoepfe */
.st-wl { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 0 28px; margin-top: 18px; min-height: 120px; background: var(--flaeche); }
.st-wl::before, .st-wl::after { content: ""; position: absolute; left: 110px; width: 20px; height: 20px; border-radius: 50%; background: var(--grund); z-index: 1; }
.st-wl::before { top: -10px; }
.st-wl::after { bottom: -10px; }
.st-wl-stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; align-self: stretch; padding: 12px 8px;
    background: var(--violett-knopf); color: #fff; text-decoration: none; text-align: center; --font-tafel: var(--st-tafel); --ks-w: 15px; --ks-h: 22px; --ks-fs: 15px; }
.st-wl-stub::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; border-right: 2px dashed rgba(255, 255, 255, .35); }
.st-wl-stub .l { font: 600 9px/12px var(--font-brand); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.st-wl-stub .g { font: 800 20px/24px var(--font-brand); }
.st-wl-stub .tw-tk-ks { color: #f3e3b5; }
.st-wl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 16px 0; }
.st-wl-t .k { margin: 0; font: 600 11px/14px var(--st-tafel); letter-spacing: .16em; text-transform: uppercase; color: var(--violett-text); }
.st-wl-t h3 { margin: 0; font: 600 20px/24px var(--font-brand); color: var(--w100); overflow-wrap: anywhere; }
.st-wl-t h3 a { color: inherit; text-decoration: none; }
.st-wl-t h3 a:hover { color: var(--violett-text); }
.st-wl-t .z { margin: 0; font: 400 13px/16px var(--font-brand); color: var(--w55); overflow-wrap: anywhere; }
.st-wl-kn { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-right: 28px; }

/* ── 7 · Client (764:51993, halbe Hoehe): Text 440 links, Client-Screen 760 × 428 rechts, unten buendig ── */
.st-client { position: relative; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: end; gap: 48px; min-height: 500px; margin-top: 64px;
    padding: 72px 0 0 calc((100% - min(1200px, 100% - 2 * var(--st-rand))) / 2); overflow: hidden;
    background: radial-gradient(1440px 393px at -144px 354px, color-mix(in srgb, var(--violett) 18%, transparent), transparent); }
.st-client-text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; align-self: center; padding-bottom: 72px; min-width: 0; }
.st-client-t { margin: 0; font: 600 36px/42px var(--font-brand); color: var(--w100); }
.st-client-s { margin: 0; max-width: 400px; font: 400 16px/25px var(--font-brand); color: var(--w70); }
.st-tat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.st-client .st-tat { margin-top: 0; padding-top: 8px; gap: 16px; }
.st-client .st-tat .tw-btn { height: 40px; }
.st-client .st-tat .tw-btn svg { width: 14px; height: 14px; }
.st-client-bild { display: block; width: 760px; max-width: 100%; height: auto; aspect-ratio: 760 / 428; justify-self: start; margin-left: 48px; margin-bottom: -2px;
    border: 1px solid var(--w08); border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); object-fit: cover; object-position: top; }

/* ── Schmaler als Figma ───────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .st-halle-in { gap: 32px 40px; }
    .st-h1 { font-size: 56px; line-height: 60px; }
    .st-sp { gap: 40px 64px; }
    .st-q-modi { width: 200px; padding-left: 28px; }
    .st-q-ring { padding-right: 28px; }
    .st-rolle { padding: 32px 14px; }
}

@media (max-width: 1080px) {
    .st-qz { grid-template-columns: 80px minmax(160px, 1fr) auto; gap: 14px 24px; }
    .st-qz-rollen { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
    .st-host { display: none; }
    .st-client { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; min-height: 0; padding-top: 56px; }
    .st-client-text { padding-bottom: 0; padding-right: var(--st-rand); }
    .st-client-bild { width: min(760px, 100%); margin-left: 0; }
}

@media (max-width: 960px) {
    /* Halle einspaltig (M-1 765:51279): Claim + Tafel, dann das Ticket (≤ 760 als Pass, tw.css) */
    .st-halle { padding: 120px 0 56px; }
    .st-halle-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .st-tk-spalte { padding-top: 0; }
    .st-tkick { justify-content: center; }
    .st-takt { justify-content: center; text-align: center; }
    .st-takt .tw-tk-akt { margin-left: 0; justify-content: center; }
    .st-sp, .st-sp.ohne { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .st-sp-r { order: -1; }
    .st-bks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .st-q-streifen { flex-wrap: wrap; }
    .st-q-ring { border-right: 0; padding-right: 32px; }
    .st-q-modi { flex: 1 1 auto; border-left: 0; padding: 32px 0; }
    .st-q-rollen { order: 3; flex-basis: 100%; border-top: 1px solid var(--w08); }
    .st-zahl { width: 90px; }
}

@media (max-width: 760px) {
    .st-qz { grid-template-columns: 80px minmax(0, 1fr); }
    .st-qz-modi { grid-column: 1 / -1; }
    .st-qz > .st-link { grid-column: 1 / -1; justify-self: start; }
    .st-wl { grid-template-columns: 120px minmax(0, 1fr); }
    .st-wl-kn { grid-column: 1 / -1; justify-content: flex-start; padding: 0 16px 16px; }
}

@media (max-width: 600px) {
    .st-abschnitt { padding-top: 48px; }
    .st-h1 { font-size: 44px; line-height: 46px; }
    .st-sub { font-size: 15px; line-height: 21px; }
    .st-t { font-size: 26px; line-height: 32px; }
    .st-t-30 { font-size: 24px; line-height: 30px; }
    /* Anzeigetafel 430 (M-1 765:51287): Blaetter 10 × 18 mit 1 px Luft (26 Blaetter = 286 px passen ab 375 breit), Beschriftung 50;
       was dennoch nicht passt, schneidet die Zeile hinten ab (leere Blaetter) — nie die Seite verbreitern */
    .st-tafel { --ks-w: 10px; --ks-h: 18px; --ks-fs: 11px; gap: 6px; min-height: 0; }
    .st-tafel .tw-tk-ks { gap: 1px; }
    .st-tz { gap: 8px; }
    .st-tz dt { flex-basis: 50px; font-size: 10px; letter-spacing: .1em; }
    .st-tz dd { overflow: hidden; gap: 6px; }
    .st-tz dd .tw-tk-ks { flex: 0 0 auto; }
    .st-ctas { flex-direction: column; align-items: stretch; margin-top: 18px; }
    .st-ctas .tw-btn { height: 46px; }
    .st-geist { min-height: 240px; padding: 28px 20px; }
    .st-geist h2 { font-size: 26px; line-height: 32px; }
    .st-kz { flex-wrap: wrap; }
    .st-kzl { display: none; }
    .st-kz .st-link { margin-left: auto; }
    .st-zeitung .tw-sf-ztg { margin: 24px 0 0; }
    .st-poster { margin-top: 24px; }
    .st-rz { flex-direction: column; align-items: flex-start; gap: 6px; }
    .st-rz .st-kzl { display: none; }
    .st-sp-l { padding: 4px 4px 6px; }
    .st-au { padding: 22px 20px 16px; }
    .st-au h3 { font-size: 22px; line-height: 26px; }
    .st-au .az { grid-template-columns: 30px minmax(0, 1fr) 56px 40px; }
    .st-stempel { right: 20px; top: 22px; font-size: 14px; line-height: 18px; }
    .st-bk { min-height: 104px; }
    .st-bk-h { padding: 16px 18px; }
    .st-wl::before, .st-wl::after { left: 102px; }
    .st-wl { grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; }
    .st-wl-t { padding: 12px 0; }
    .st-client { padding-top: 40px; margin-top: 48px; }
    .st-client-text { width: 100%; box-sizing: border-box; }
    .st-client-t { font-size: 28px; line-height: 34px; }
    .st-client-bild { border-radius: 10px 10px 0 0; }
    /* Queue-Board + Termin-Zeile (geteilt mit /live) */
    .st-q-ring { padding: 24px 20px 24px 0; }
    .st-ring { width: 104px; height: 104px; }
    .st-ring-n { font-size: 22px; line-height: 28px; }
    .st-q .st-ring-sub.leer { max-width: 78px; font-size: 10px; line-height: 13px; }
    .st-q-modi { padding: 24px 0; gap: 18px; }
    .st-punkte { gap: 4px; }
    .st-punkte i { width: 11px; height: 11px; }
    .st-q-rollen { flex-direction: column; }
    .st-rolle { display: grid; grid-template-columns: 76px 1fr 1fr; grid-template-rows: auto auto; align-items: center;
                gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--w08); }
    .st-rolle:last-child { border-bottom: 0; }
    .st-rolle-kopf { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; gap: 2px; }
    .st-balken { grid-column: 2 / span 2; grid-row: 1; }
    .st-qz .st-ring { width: 80px; height: 80px; }
    .st-qz .st-ring-n { font-size: 18px; line-height: 23px; }
    .st-qz-rolle { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; }
    .st-qz-rolle .st-rolle-kopf { flex-direction: row; gap: 6px; }
    .st-qz-rolle .st-balken { width: 100%; }
    .st-qz-rollen { gap: 10px; }
    .st-q-fuss { flex-direction: column; align-items: flex-start; }
    .st-termine { padding: 64px 0; }
    .st-zeile { display: grid; grid-template-columns: 48px 1fr; gap: 6px 16px; padding: 16px 0; }
    .st-datum { width: 48px; grid-row: 1 / span 2; }
    .st-zahl { grid-column: 2; flex-direction: row; align-items: baseline; gap: 6px; width: auto; }
    .st-zahl b { font-size: 15px; }
    .st-zeile .st-btn { grid-column: 2; justify-self: start; height: 36px; }
    .st-zusage { grid-column: 2; justify-content: flex-start; min-width: 0; }
}