/* ============================================================
   STARTZEITEN — „Die Tafel"
   Präfix st-, Werte aus tokens.css/seite.css.

   Die Tafel steht auf Dunkel. Das ist kein Effekt, sondern Funktion: Der
   Blick soll in zwei Sekunden erfassen, wo etwas frei ist, und Grün leuchtet
   auf Tanne nun einmal, während es auf Weiß nur liegt. Anzeigetafel-Logik —
   nur dass hier nicht Flüge stehen, sondern Startzeiten.

   Bewegung hat hier eine Aufgabe: Sie zeigt, dass sich etwas GEÄNDERT hat
   (Tageswechsel, neue Daten), und sie führt den Blick von links nach rechts
   durch den Tag. Alles andere wäre Zierrat und ist weggelassen.
   ============================================================ */

:root{
  /* Die Tafel besteht fast nur aus Akzentelementen — mit dem Neon-Akzent
     der Marke wäre sie eine Wand. Hier gilt deshalb das sanfte Grün der
     Scorekarte; das Neon bleibt den übrigen Seiten vorbehalten (03.09.2026,
     Andreas: „farblich der Scorekarte anpassen, sonst zu heftig"). */
  --lime:#9AD75E;
  --st-neon:#CCFF00;            /* punktuell wie auf der Scorekarte: gewählter
                                   Tag, „als nächstes", Fokus, Formular-Auswahl */
  --st-frei:#9AD75E;            /* freier Platz */
  --st-frei-dunkel:#78BE3F;     /* dasselbe auf hellem Grund (Kontrast) */
  --st-telefon:#E8B44A;         /* telefonisch buchbar */
  --st-flaeche:rgba(255,255,255,.055);
  --st-flaeche-hover:rgba(255,255,255,.10);
  --st-rand:rgba(255,255,255,.14);
  --st-schrift:rgba(255,255,255,.72);
  --st-schrift-leise:rgba(255,255,255,.5);
}

/* ============================================================
   1. HERO — die Antwort steht schon oben
   ============================================================ */

.st-hero .hero-buehne img{transform:scale(1.04)}
/* Der Sonnenaufgang ist oben sehr hell — der Standard-Verlauf greift erst ab
   der Mitte, die Überschrift stünde also fast ohne Kontrast im Himmel.
   Hier deckt er von oben mit ab (Vorgabe: großer Text mindestens 3:1). */
.st-hero::after{background:linear-gradient(180deg,rgba(6,26,17,.46) 0%,rgba(7,32,21,.16) 34%,rgba(6,26,17,.48) 72%,rgba(6,26,17,.88) 100%)}

.st-naechste{
  margin-left:auto;align-self:flex-end;flex:none;min-width:330px;max-width:390px;
  background:rgba(7,48,31,.55);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-karte);padding:20px 24px 22px;
  animation:st-panel-auf .9s var(--ease) both .25s;
}
@keyframes st-panel-auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.st-n-kicker{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.st-n-zeit{display:flex;align-items:baseline;gap:12px;margin-top:10px;flex-wrap:wrap}
.st-n-zeit time{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.045em;
  font-size:clamp(46px,5vw,62px);line-height:.92;color:#fff;font-variant-numeric:tabular-nums}
.st-n-wann{font-family:'Hanken Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--st-neon)}
.st-n-detail{display:flex;align-items:center;gap:11px;margin-top:14px;flex-wrap:wrap;
  font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.8)}
.st-n-detail b{font-weight:700;color:#fff}
.st-n-btn{width:100%;margin-top:18px}
.st-n-fuss{margin-top:11px;font-size:12.5px;color:rgba(255,255,255,.5);text-align:center}

/* Der Live-Punkt (Schwester des Platzstatus-Punkts) */
.st-livedot{width:8px;height:8px;min-width:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.st-livedot.an{background:var(--live);animation:st-puls 1.8s infinite}
@keyframes st-puls{0%,100%{box-shadow:0 0 0 0 rgba(255,90,77,.45)}55%{box-shadow:0 0 0 6px rgba(255,90,77,0)}}

/* Punkte-Reihe: vier Plätze, gefüllte sind frei — überall dieselbe Grammatik */
.st-punkte{display:inline-flex;gap:4px;align-items:center}
.st-punkte i{width:8px;height:8px;border-radius:50%;background:var(--st-frei);
  box-shadow:0 0 0 1px rgba(154,215,94,.35)}
.st-punkte i.belegt{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}

/* ============================================================
   2. DIE TAFEL — dunkle Sektion
   ============================================================ */

.st-tafel-sektion{background:var(--tanne);color:#fff;padding:var(--luft) 0 calc(var(--luft) - 10px);
  scroll-margin-top:80px}
.st-tafel-sektion .kapitel-kopf h2{color:#fff}
.st-tafel-sektion .kapitel-kopf .lead{color:rgba(255,255,255,.72)}
.st-tafel-sektion .kapitel-marke{border-top-color:var(--hairline-dunkel)}
.st-tafel-sektion .kapitel-marke .nr{color:var(--st-neon)}
.st-tafel-sektion .kapitel-marke .was{color:rgba(255,255,255,.55)}

/* ---------- Die Woche ---------- */
.st-woche{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:0 var(--inset)}
.st-tag{display:flex;flex-direction:column;gap:7px;padding:14px 14px 13px;text-decoration:none;
  background:var(--st-flaeche);border:1px solid var(--st-rand);border-radius:12px;
  transition:background var(--t-schnell),border-color var(--t-schnell),transform var(--t-mittel) var(--ease)}
.st-tag:hover{background:var(--st-flaeche-hover);border-color:rgba(255,255,255,.32);transform:translateY(-3px)}
.st-tag:focus-visible{outline:2px solid var(--st-neon);outline-offset:3px}
.st-tag.ist{background:var(--pine);border-color:var(--st-neon);box-shadow:0 0 0 1px var(--st-neon) inset}
.st-tag-label{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-tag.ist .st-tag-label{color:var(--lime)}
.st-tag-datum{display:flex;align-items:baseline;gap:3px;font-family:'Space Grotesk',sans-serif;color:#fff}
.st-tag-datum b{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.st-tag-datum small{font-size:13px;font-weight:600;color:rgba(255,255,255,.55)}
/* Der Balken zeigt den freien Anteil — er wächst beim Hereinscrollen */
.st-tag-balken{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.st-tag-balken i{display:block;height:100%;width:var(--quote,0%);border-radius:2px;background:var(--st-frei);
  transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.reveal.sichtbar .st-tag-balken i,.st-woche.geladen .st-tag-balken i{transform:scaleX(1)}
.st-tag-frei{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.st-tag.ist .st-tag-frei{color:#fff}
.st-tag.leer .st-tag-balken i{background:rgba(255,255,255,.25)}
.st-tag.leer .st-tag-frei{color:rgba(255,255,255,.45)}

/* ---------- Steuerleiste ---------- */
.st-steuer{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;margin:22px var(--inset) 0}

/* Der Weg in die Anmeldung — eine ruhige Zeile, kein Banner. Sie sagt, was
   man davon hat (die Namen im Flight), und liegt dort, wo man hinschaut,
   bevor man eine Zeit antippt. */
.st-wer{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  margin:14px var(--inset) 0;padding:11px 15px;border-radius:var(--r-karte);
  background:rgba(255,255,255,.04);border:1px solid var(--st-rand)}
.st-wer-text{margin:0;display:flex;align-items:center;gap:9px;flex:1 1 260px;
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;line-height:1.45;color:var(--st-schrift)}
.st-wer-text b{color:#fff;font-weight:700}
.st-wer-punkt{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lime)}
.st-wer-knopf{flex:none;text-decoration:none;font-family:'Space Grotesk',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 15px;border-radius:99px;background:var(--lime);color:var(--pine)}
.st-wer-knopf.leise{background:none;color:rgba(255,255,255,.6);
  border:1px solid var(--st-rand);letter-spacing:.06em}
@media (max-width:620px){
  .st-wer{align-items:stretch}
  .st-wer-knopf{text-align:center}
}

/* Startpunkt: ein Schalter mit gleitendem Reiter (JS setzt --x/--w) */
/* Eigene display-Regeln überstimmen sonst das hidden-Attribut — beide
   Steuerteile werden per hidden ein- und ausgeblendet. */
.st-schalter[hidden],.st-filter[hidden]{display:none}
.st-schalter{position:relative;display:inline-flex;padding:4px;gap:2px;
  background:rgba(7,48,31,.6);border:1px solid var(--st-rand);border-radius:var(--r-pill)}
.st-schalter-reiter{position:absolute;top:4px;bottom:4px;left:0;width:var(--w,0);
  transform:translateX(var(--x,0));background:var(--lime);border-radius:var(--r-pill);
  transition:transform .45s var(--ease),width .45s var(--ease);pointer-events:none}
.st-schalter-knopf{position:relative;z-index:1;display:flex;flex-direction:column;gap:1px;
  padding:9px 20px;border-radius:var(--r-pill);text-decoration:none;color:rgba(255,255,255,.72);
  transition:color var(--t-schnell)}
.st-schalter-knopf b{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase}
.st-schalter-knopf small{font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;color:inherit;opacity:.72}
.st-schalter-knopf:hover{color:#fff}
.st-schalter-knopf:focus-visible{outline:2px solid var(--st-neon);outline-offset:2px}
.st-schalter-knopf.ist,.st-schalter-knopf.ist:hover{color:var(--pine)}

/* Filter: eigene Pillen, keine Systemknöpfe */
.st-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-filter-label{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.st-filter-pillen{display:flex;gap:6px;flex-wrap:wrap}
.st-pille{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--st-rand);background:transparent;
  color:rgba(255,255,255,.72);cursor:pointer;transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.st-pille:hover{background:var(--st-flaeche-hover);color:#fff}
.st-pille:focus-visible{outline:2px solid var(--st-neon);outline-offset:2px}
.st-pille.ist{background:#fff;border-color:#fff;color:var(--pine)}

.st-stand-halter{margin-left:auto}
.st-stand{display:flex;align-items:center;gap:10px;font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.st-stand b{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff}

/* ---------- Tageshinweis aus PC CADDIE ---------- */
.st-hinweis{display:flex;align-items:flex-start;gap:12px;margin:20px var(--inset) 0;padding:15px 20px;
  background:rgba(232,180,74,.12);border-left:3px solid var(--st-telefon);border-radius:0 10px 10px 0;
  font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;line-height:1.5;color:#FCEBC8}
.st-hinweis svg{flex:none;margin-top:1px;color:var(--st-telefon)}
.st-hinweis[hidden]{display:none}

/* ============================================================
   3. TAGESPROFIL — die Signature-Grafik
   ============================================================ */

.st-profil{margin:26px var(--inset) 0;padding:0}
.st-profil-buehne{position:relative;background:var(--pine);border-radius:var(--r-karte);padding:14px 14px 0;overflow:hidden}
.st-profil-svg{display:block;width:100%;height:132px}

.st-p-nacht{fill:rgba(0,0,0,.22)}
.st-p-licht{fill:rgba(154,215,94,.07)}
.st-p-boden{stroke:rgba(255,255,255,.2);stroke-width:1}
/* Das Raster: eine Zelle je Startzeit. Jede zweite ist minimal aufgehellt,
   damit man die Teilung sieht — und die Zelle unter dem Zeiger leuchtet, weil
   genau sie beim Klick angesprungen wird. */
.st-p-zelle{fill:transparent;cursor:pointer;transition:fill var(--t-schnell)}
.st-p-zelle.vorbei{pointer-events:none;cursor:default}
.st-p-zelle.ung{fill:rgba(255,255,255,.035)}
.st-p-zelle:hover{fill:rgba(154,215,94,.22)}

/* Balken: wachsen von unten, gestaffelt von links nach rechts — der Blick
   läuft dabei durch den Tag, genau so, wie man ihn liest */
.st-p-bar{transform-origin:center bottom;transform:scaleY(0);
  transition:transform .5s var(--ease);transition-delay:calc(var(--i) * 7ms)}
[data-st-profil].laeuft .st-p-bar{transform:scaleY(1)}
.st-p-bar.frei{fill:var(--st-frei)}
.st-p-bar.voll{fill:rgba(255,255,255,.22)}
.st-p-bar.telefon{fill:var(--st-telefon)}
.st-p-bar.zu{fill:rgba(255,255,255,.14)}
.st-p-bar.vorbei{fill:rgba(255,255,255,.13)}

.st-p-marke line{stroke:rgba(255,255,255,.4);stroke-width:1.5;stroke-dasharray:3 4}
.st-p-marke.m9 line{stroke:rgba(232,180,74,.6)}
.st-p-jetzt{stroke:var(--live);stroke-width:2;animation:st-jetzt-puls 2.6s ease-in-out infinite}
@keyframes st-jetzt-puls{0%,100%{opacity:1}50%{opacity:.45}}

/* Beschriftung als HTML — bleibt unverzerrt und lesbar. Die Schilder stehen
   ÜBER dem Kasten: Innen lagen sie auf den Balken und verdeckten bei vollem
   Tag genau die Stelle, die sie erklären. Der seitliche Rand ist derselbe wie
   die Polsterung der Bühne (14px) plus ihre Kante (1px) — damit fällt
   `left:var(--pos)` genau auf die gestrichelte Linie im Bild darunter. */
.st-p-marken{position:relative;height:46px;margin:0 15px 6px}
.st-p-label{position:absolute;top:0;left:var(--pos);transform:translateX(-50%);
  font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;color:rgba(255,255,255,.62);
  white-space:nowrap;padding:3px 8px;background:rgba(7,48,31,.85);border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.14)}
.st-p-label b{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.st-p-label.m9{top:24px;color:rgba(252,235,200,.8);border-color:rgba(232,180,74,.4)}
.st-p-label.links{transform:translateX(-100%);margin-left:-6px}

/* Das Schild unter dem Zeiger: Uhrzeit und Stand der Zeit, an der man gerade
   steht. Es sitzt im freien Streifen über den Balken — die Marken sind dort
   ausgezogen, der Platz ist frei. */
.st-p-tip{position:absolute;top:8px;left:0;transform:translateX(-50%);pointer-events:none;
  font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;color:rgba(255,255,255,.72);
  white-space:nowrap;padding:3px 9px;background:rgba(7,48,31,.94);border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);z-index:2}
.st-p-tip[hidden]{display:none}
.st-p-tip b{font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;margin-right:5px}
.st-profil-fuss{position:relative;height:22px;margin-top:2px}
.st-p-stunde{position:absolute;left:var(--pos);transform:translateX(-50%);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.38);font-variant-numeric:tabular-nums}

/* ============================================================
   4. DIE ZEITEN
   ============================================================ */

.st-tafel{margin:30px var(--inset) 0}
/* Jeder Abschnitt bekommt die Farbe seiner Tageszeit (--ablicht kommt aus
   derselben Sonnenstands-Rechnung wie die Lichtlinie): ein Schimmer im
   Rücken, eine farbige Kante am Kopf und der Name im Licht dieser Stunde.
   Das bricht das durchgehende Grün auf, ohne eine zweite Designsprache
   aufzumachen. */
.st-abschnitt{position:relative;margin-top:34px;--ablicht:#fff}
.st-abschnitt:first-child{margin-top:0}
.st-abschnitt::before{content:"";position:absolute;left:calc(var(--inset) * -1);right:calc(var(--inset) * -1);
  top:-14px;height:340px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,var(--ablicht) 0%,transparent 100%);opacity:.1}
.st-abschnitt>*{position:relative;z-index:1}

.st-abschnitt-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--hairline-dunkel);margin-bottom:16px;cursor:default}
.st-abschnitt-name{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff}
.st-abschnitt-zeit{font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums}
.st-abschnitt-frei{margin-left:auto;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;
  color:var(--lime);font-variant-numeric:tabular-nums}
.st-abschnitt-name{color:var(--ablicht)}
.st-abschnitt-kopf{border-bottom-color:color-mix(in srgb,var(--ablicht) 34%,transparent)}

/* ---------- Das Raster ---------- */
.st-raster{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:8px}

/* Nur für Screenreader — die Bildbeschreibung des Profils steht im Text,
   nicht im Bild (seite.css bringt keine solche Klasse mit) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.st-slot{min-width:0}
/* Der Filter blendet Zeiten per [hidden] aus. Im Zeitstrahl trägt die Zeile
   selbst ein display (.st-zs{display:grid}) — das schlägt das display:none,
   das der Browser an [hidden] hängt, und der Filter blieb dort wirkungslos.
   Diese Regel ist spezifischer als beide und gilt für alle Ansichten. */
.st-slot[hidden]{display:none}
.st-kachel{position:relative;display:flex;flex-direction:column;gap:7px;height:100%;
  padding:12px 13px 11px;border-radius:12px;text-decoration:none;overflow:hidden;
  background:var(--st-flaeche);border:1px solid var(--st-rand);
  transition:background var(--t-schnell),border-color var(--t-schnell),transform var(--t-mittel) var(--ease)}
.st-zeit{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.045em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.st-zustand{font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:var(--st-schrift);
  font-variant-numeric:tabular-nums;line-height:1.3}
.st-zustand b{font-weight:700;color:#fff}

/* Licht-Chip: die eigene Rechnung der Seite — reicht es noch für 18 oder 9? */
.st-licht{position:absolute;top:11px;right:11px;display:flex;align-items:baseline;gap:2px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:3px 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.st-licht small{font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.st-licht.kurz{background:rgba(232,180,74,.16);color:#F2D18C}
.st-licht.knapp{background:rgba(255,90,77,.14);color:#FFB3AC}
.st-licht.frueh{background:rgba(150,170,210,.16);color:#CBD8EE;gap:4px;align-items:center}

/* Freie Zeit: die ganze Kachel ist der Weg in die Buchung */
.st-frei .st-kachel{background:rgba(154,215,94,.09);border-color:rgba(154,215,94,.34)}
.st-frei .st-kachel:hover{background:rgba(154,215,94,.16);border-color:var(--lime);transform:translateY(-3px)}
.st-frei .st-kachel:focus-visible{outline:2px solid var(--st-neon);outline-offset:3px}
.st-frei .st-zustand b{color:var(--lime)}

/* Der Buchen-Streifen fährt beim Zeigen von unten ein */
.st-pfeil{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pine);background:var(--st-neon);
  margin:1px -13px -11px;padding:8px 13px;
  transform:translateY(110%);opacity:0;transition:transform .3s var(--ease),opacity .2s}
.st-frei .st-kachel:hover .st-pfeil,.st-frei .st-kachel:focus-visible .st-pfeil{transform:none;opacity:1}
.st-pfeil svg{transition:transform .3s var(--ease)}
.st-frei .st-kachel:hover .st-pfeil svg{transform:translateX(3px)}

/* Die nächste freie Zeit trägt den Ring — sie ist die Antwort auf die Frage,
   mit der die meisten hier ankommen. Das Fähnchen sitzt ÜBER der Kachel, im
   Raster-Zwischenraum: So bleibt jede Kachel gleich hoch. */
.st-slot{position:relative}
.st-slot.naechste .st-kachel{border-color:var(--st-neon);box-shadow:0 0 0 1px var(--st-neon)}
/* Nur im Raster — im Zeitstrahl ist ::before die Lichtlinie, dort trägt eine
   eigene Fahne den Hinweis. */
.st-raster .st-slot.naechste::before{content:'als Nächstes';position:absolute;top:-9px;left:10px;z-index:2;
  font-family:'Space Grotesk',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine);background:var(--st-neon);padding:2px 8px;border-radius:var(--r-pill)}

/* Belegt, gesperrt, vorbei: ruhig, aber lesbar */
.st-voll .st-kachel,.st-gesperrt .st-kachel{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09)}
.st-voll .st-zeit,.st-gesperrt .st-zeit{color:rgba(255,255,255,.5)}
.st-voll .st-zustand,.st-gesperrt .st-zustand{color:rgba(255,255,255,.42)}
.st-voll .st-punkte i.belegt{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.st-vorbei .st-kachel{background:transparent;border-color:rgba(255,255,255,.07);opacity:.5}
.st-vorbei .st-zeit{color:rgba(255,255,255,.42);font-size:22px}
.st-vorbei .st-punkte{display:none}

/* Gesperrte Strecke am Stück — ein Band statt fünfzehn gleicher Kacheln.
   Bei Turnieren steht hier der volle Name aus dem Turnierkalender, darunter
   die Eckdaten; der Belegungsplan allein kennt nur einen abgeschnittenen
   Satz. */
.st-band{grid-column:1/-1}
.st-band-inhalt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--st-telefon);border-radius:0 10px 10px 0}
.st-band-inhalt>svg{flex:none;color:var(--st-telefon)}
.st-band-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.st-band-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.01em;color:#fff}
.st-band-meta{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;line-height:1.45;
  color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.st-band-tasten{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.st-band-mehr,.st-band-pdf{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:8px 14px;border-radius:var(--r-pill);transition:background var(--t-schnell),color var(--t-schnell)}
.st-band-mehr{background:var(--st-telefon);color:#3A2A05}
.st-band-mehr:hover{background:#F2C978;color:#2A1E03}
.st-band-pdf{border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.8)}
.st-band-pdf:hover{border-color:#fff;color:#fff}
.st-band-mehr:focus-visible,.st-band-pdf:focus-visible{outline:2px solid var(--st-neon);outline-offset:2px}

/* Telefonisch: kein toter Slot, sondern eine andere Tür */
.st-telefon .st-kachel{background:rgba(232,180,74,.07);border-color:rgba(232,180,74,.28)}
.st-telefon a.st-kachel:hover{background:rgba(232,180,74,.14);border-color:var(--st-telefon);transform:translateY(-3px)}
.st-telefon .st-zustand{color:#F2D18C}
.st-telefon .st-pfeil{background:var(--st-telefon);color:#3A2A05;transform:none;opacity:1;
  justify-content:center;letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* Einlauf: gestaffelt, aber kurz — beim Tageswechsel soll man den Wechsel
   sehen, nicht auf ihn warten */
.st-tafel.wechsel .st-slot{animation:st-slot-auf .42s var(--ease) both;
  animation-delay:calc(var(--n,0) * 9ms)}
@keyframes st-slot-auf{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.st-tafel.laedt{opacity:.45;transition:opacity .2s}

.st-leer{margin:0;padding:30px;background:var(--st-flaeche);border-radius:var(--r-karte);
  font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--st-schrift)}
.st-leer a{color:var(--lime)}

/* ============================================================
   4b. DER ZEITSTRAHL — die Standardansicht

   Der Tag ist eine Linie, und die Linie ist das Licht: Ihre Farbe kommt aus
   dem echten Sonnenstand dieses Tages (st_a_lichtfarbe). Der Knoten darauf
   ist die Sonne dieses Augenblicks — morgens rot, mittags weißgold, nach
   Sonnenuntergang der Mond (Schwester der Tagesschiene auf /oeffnungszeiten).
   Beides zündet beim Scrollen zeilenweise durch.

   Rechts der Linie stehen die BEIDEN Startpunkte nebeneinander: 18 Loch ab
   Tee 1, 9 Loch ab Tee 9. Was über mehrere Zeiten gleich bleibt, wird ein
   durchgehendes Band, das nur oben beschriftet ist.
   ============================================================ */

.st-strahl{
  --zs-zeit:64px;      /* Spalte Uhrzeit */
  --zs-gleis:34px;     /* Spalte Linie + Knoten */
  list-style:none;margin:0;padding:0;position:relative}

/* „Kein Plan"-Hinweis über dem Strang (Tee 9 außerhalb der Freigaben) und
   der „Tag gelaufen"-Satz teilen dieses Markup. Der Titel steht als eigene
   Zeile über dem Grund — ohne die Regel klebte <b> ohne Abstand am Satz. */
.st-zs-ohne{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;
  padding:12px 16px;border:1px solid rgba(255,255,255,.13);border-radius:12px;
  font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.62)}
.st-zs-ohne b{font-family:'Space Grotesk',sans-serif;font-size:14.5px;color:#fff}
.st-zs-ohne a{color:var(--lime)}

.st-zs{position:relative;display:grid;
  grid-template-columns:var(--zs-zeit) var(--zs-gleis) minmax(0,1fr);
  align-items:stretch;padding:3px 0}

/* Die Lichtlinie: durchgehend sichtbar, ohne Hof. Ein Schein um die Linie
   sah aus wie ein Fehler im Bild statt wie Licht. */
.st-zs::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--zs-zeit) + var(--zs-gleis)/2 - 1.5px);width:3px;border-radius:2px;
  background:var(--licht,#5b6b62)}

.st-zs-zeit{grid-column:1;justify-self:end;padding:11px 14px 0 0;align-self:start;
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.02em;
  line-height:1;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
  transition:color var(--t-schnell)}

/* Der Knoten IST die Sonne: Farbe aus dem Licht dieser Uhrzeit, Lichtkante
   oben links, Hof außen herum. Nach Sonnenuntergang wird daraus der Mond. */
.st-zs-knoten{grid-column:2;justify-self:center;align-self:start;margin-top:8px;position:relative;z-index:2;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 33% 29%,rgba(255,255,255,.96) 0%,var(--licht,#ccc) 58%,rgba(0,0,0,.22) 100%);
  box-shadow:0 0 0 3px rgba(11,65,43,.9);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* Mond: kühl und kraterig statt sonnenwarm */
.st-zs.nacht .st-zs-knoten{width:13px;height:13px;margin-top:10px;
  background:
    radial-gradient(circle at 64% 63%,rgba(140,166,200,.4) 0 13%,rgba(140,166,200,0) 34%),
    radial-gradient(circle at 41% 76%,rgba(140,166,200,.3) 0 9%,rgba(140,166,200,0) 26%),
    radial-gradient(circle at 32% 27%,#ffffff 0%,#f6f9fd 34%,#e2ebf7 68%,#bccce2 100%)}
/* Die Sonne der einzelnen Zeile gibt es nicht mehr — auf dem Nachtbrett
   läuft genau eine mit (siehe Abschnitt 8). Die Grundform bleibt hier
   stehen, weil die Kachel-Ansicht sie weiterverwendet. */

/* ---------- Die beiden Startpunkte ---------- */
.st-zs-spalten{grid-column:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.st-strahl-eins .st-zs-spalten{grid-template-columns:minmax(0,1fr)}

.st-zs-zelle{display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:9px 13px;border-radius:12px;text-decoration:none;min-width:0;
  background:var(--st-flaeche);border:1px solid var(--st-rand);
  transition:background var(--t-schnell),border-color var(--t-schnell),transform var(--t-mittel) var(--ease)}
.st-zs-kopfzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.st-zs-sagt{font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:var(--st-schrift);line-height:1.25}
.st-zs-sagt b{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;color:#fff;
  margin-right:3px;font-variant-numeric:tabular-nums}
.st-zs-sagt small{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums}
.st-zs-sagt.leise{color:rgba(255,255,255,.45)}

/* Bänder: die Fläche läuft über die Zeilen durch, beschriftet ist nur die
   erste — dort steht die Spanne, danach spricht nur noch die Fläche. */
/* Läuft in beiden Spalten dasselbe Band, steht es als EINE Zeile da; ihre
   Höhe wächst mit der Dauer, gedeckelt — der gelaufene Morgen soll nicht
   die halbe Seite füllen. */
.st-zs.sammel{min-height:calc(min(var(--min,10) * .55px, 120px))}
.st-zs.sammel .st-zs-zelle{justify-content:flex-start;padding-top:11px}
.st-zs-zelle.band-auf{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;margin-bottom:-3px}
.st-zs-zelle.band-mitte{border-radius:0;border-top:0;border-bottom:0;margin:-3px 0}
.st-zs-zelle.band-zu{border-top-left-radius:0;border-top-right-radius:0;border-top:0;margin-top:-3px}
/* Eine Fläche, keine Schraffur: Ein gesperrtes Band besteht aus mehreren
   Zellen (eine je Zeile) — ein Streifenmuster fängt in jeder Zelle neu an
   und sah an den Nahtstellen versetzt aus. Die ruhige Fläche mit der
   bernsteinfarbenen Kante läuft dagegen sauber durch. */
.st-zs-zelle.st-gesperrt{border-left:3px solid var(--st-telefon);
  background:rgba(232,180,74,.07)}
.st-zs-zelle.st-gesperrt .st-zs-sagt b{font-size:15px;letter-spacing:-.01em}
.st-zs-zelle.st-vorbei,.st-zs-zelle.st-leer{background:transparent;border-color:rgba(255,255,255,.06)}
.st-zs-zelle.st-voll{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.st-zs-zelle.st-telefon{background:rgba(232,180,74,.07);border-color:rgba(232,180,74,.26)}
.st-zs-zelle.st-telefon .st-zs-sagt{color:#F2D18C}

/* Frei: die ganze Zelle ist der Weg in die Buchung, der Knopf sagt die Runde.
   Die Fläche bleibt dabei NEUTRAL — vierzig lime getönte Karten übereinander
   waren Grün auf Grün; jetzt trägt Lime nur noch das Wesentliche: die Zahl
   der freien Plätze und den Knopf. */
.st-zs-zelle.st-frei{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.17)}
.st-zs-zelle.st-frei .st-zs-sagt b{color:var(--lime)}
a.st-zs-zelle:hover{background:rgba(154,215,94,.16);border-color:var(--lime);transform:translateY(-2px)}
a.st-zs-zelle:focus-visible{outline:2px solid var(--st-neon);outline-offset:3px}
.st-zs-pfeil{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:1px;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime);background:transparent;
  border:1px solid rgba(154,215,94,.5);padding:6px 10px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background var(--t-schnell),color var(--t-schnell),gap var(--t-schnell),border-color var(--t-schnell)}
.st-zs-pfeil b{font-size:12px;font-weight:700;letter-spacing:.04em}
a.st-zs-zelle:hover .st-zs-pfeil,a.st-zs-zelle:focus-visible .st-zs-pfeil{
  background:var(--st-neon);border-color:var(--st-neon);color:var(--pine);gap:10px}
.st-zs-zelle.ist-naechste .st-zs-pfeil{background:var(--st-neon);border-color:var(--st-neon);color:var(--pine)}
.st-zs-pfeil.telefon{color:var(--st-telefon);border-color:rgba(232,180,74,.5);font-variant-numeric:tabular-nums}
a.st-zs-zelle.st-telefon:hover .st-zs-pfeil{background:var(--st-telefon);border-color:var(--st-telefon);color:#3A2A05}

/* Auf breiten Schirmen ist in der Zelle Platz für eine Zeile: Flight links,
   Buchen-Knopf rechts. Erst wenn es eng wird, stapelt sich beides. */
@media (min-width:1000px){
  .st-zs-zelle{flex-direction:row;align-items:center;gap:12px}
  .st-zs-zelle .st-zs-pfeil{margin-left:auto}
  .st-zs-zelle.st-gesperrt,.st-zs-zelle.st-telefon,.st-zs.sammel .st-zs-zelle{flex-direction:column;align-items:flex-start}
  .st-zs-zelle.st-telefon .st-zs-pfeil{margin-left:0}
}

/* Die nächste freie Zeit */
.st-zs.naechste .st-zs-zelle.ist-naechste{border-color:var(--st-neon);
  box-shadow:0 0 0 1px var(--st-neon)}
.st-zs.naechste .st-zs-knoten::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--st-neon);opacity:.85;animation:st-zs-puls 2.1s var(--ease) infinite}
@keyframes st-zs-puls{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.st-zs.naechste .st-zs-fahne{position:absolute;top:-8px;left:calc(var(--zs-zeit) + var(--zs-gleis));z-index:3;
  font-family:'Space Grotesk',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pine);background:var(--st-neon);padding:2px 8px;border-radius:var(--r-pill)}

/* Marken auf derselben Linie: Sonnenstand, letzte Startzeiten, Jetzt */
.st-zs-marke{position:relative;display:grid;
  grid-template-columns:var(--zs-zeit) var(--zs-gleis) minmax(0,1fr);align-items:center;
  padding:9px 0;min-height:34px}
.st-zs-marke::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--zs-zeit) + var(--zs-gleis)/2 - 1.5px);width:3px;border-radius:2px;
  background:var(--licht,#5b6b62)}
.st-zs-marke .st-zs-zeit{padding-top:0;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.4)}
.st-zs-markenlinie{grid-column:2/-1;height:1px;align-self:center;
  background:repeating-linear-gradient(90deg,var(--licht,rgba(255,255,255,.4)) 0 5px,transparent 5px 11px);
  opacity:.6}
.st-zs-markentext{grid-column:3;grid-row:1;justify-self:start;display:flex;align-items:baseline;gap:9px;
  background:var(--tanne);padding:0 12px 0 4px;position:relative;z-index:2}
.st-zs-markentext b{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--licht,#fff)}
.st-zs-markentext small{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;color:rgba(255,255,255,.42)}
.st-zs-marke.jetzt .st-zs-markentext b{color:var(--live)}
.st-zs-marke.jetzt .st-zs-markenlinie{background:repeating-linear-gradient(90deg,var(--live) 0 6px,transparent 6px 12px)}
.st-zs-marke.jetzt .st-zs-zeit{color:var(--live)}
.st-zs-marke.jetzt::after{content:"";position:absolute;left:calc(var(--zs-zeit) + var(--zs-gleis)/2 - 5px);
  width:10px;height:10px;border-radius:50%;background:var(--live);z-index:3;
  box-shadow:0 0 0 3px var(--pine)}

/* Der Sprung zur nächsten freien Zeit */
.st-zs-sprung{position:sticky;bottom:18px;z-index:20;display:flex;justify-content:center;
  margin:0 var(--inset);pointer-events:none;opacity:0;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.st-zs-sprung.zeigen{opacity:1;transform:none}
.st-zs-sprung button{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pine);background:var(--st-neon);border:0;cursor:pointer;
  padding:12px 20px;border-radius:var(--r-pill);box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.st-zs-sprung button:hover{background:#AEE377}

@media (prefers-reduced-motion:reduce){
  .st-zs.naechste .st-zs-knoten::after,.st-zs-marke.jetzt::after{animation:none}
}

@media (max-width:760px){
  .st-strahl{--zs-zeit:46px;--zs-gleis:30px}
  .st-zs-kopf{--zs-zeit:46px;--zs-gleis:30px}
  .st-zs-spalten,.st-zs-kopf .st-zs-spalten{gap:6px}
  .st-zs-zelle{padding:8px 9px;gap:4px}
  .st-zs-zeit{font-size:14px;padding-right:9px}
  .st-zs-sagt{font-size:13px}
  .st-zs-sagt b{font-size:17px}
  /* Der Buchen-Knopf sitzt gestapelt unter dem Flight — dann gehört er in
     die Mitte der Zelle, sonst klebt er links am Rand. */
  .st-zs-zelle .st-zs-pfeil{margin-left:0;align-self:stretch;justify-content:center;
    padding:7px 8px;font-size:9.5px;letter-spacing:.06em}
  .st-zs-pfeil b{font-size:11px}
  .st-zs-pfeil svg{display:none}
  .st-zs-markentext small{display:none}
  .st-zs-kopfspalte{flex-direction:column;gap:1px}
  .st-zs-kopfspalte small{font-size:11px}
  /* In der schmalen Spalte sonst ein Umbruch mitten im Flight */
  .st-zs-kopfzeile{gap:7px}
  .st-zs .st-punkte{gap:3px}
  .st-zs .st-punkte i.wer{font-size:16px;min-width:11px}
  /* Turnier-Band: In einer halben Handybreite passen weder ein langer
     Turniername in großer Schrift noch zwei Pillen nebeneinander — beides
     lief bisher aus der Zelle heraus. */
  .st-zs-zelle.st-gesperrt .st-zs-sagt b{font-size:13.5px;line-height:1.25}
  .st-zs-zelle .st-zs-bandmeta,.st-zs-zelle .st-zs-sagt small{font-size:11.5px;line-height:1.4}
  .st-zs-zelle .st-band-tasten{flex-direction:column;align-items:stretch;gap:6px;width:100%;margin-left:0}
  .st-zs-zelle .st-band-mehr,.st-zs-zelle .st-band-pdf{white-space:normal;text-align:center;
    padding:7px 9px;font-size:9.5px;letter-spacing:.06em;max-width:100%}
}
/* ---------- Hinweis vor einer 9-Loch-Buchung ---------- */
.st-hinweis9{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(4,18,12,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:st-h9-auf .22s var(--ease) both}
@keyframes st-h9-auf{from{opacity:0}to{opacity:1}}
.st-h9-karte{width:100%;max-width:470px;background:#fff;color:var(--tinte);border-radius:var(--r-karte);
  padding:30px 32px 26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.65);
  animation:st-h9-karte-auf .32s var(--ease) both}
@keyframes st-h9-karte-auf{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.st-h9-kicker{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gruen)}
.st-h9-karte h3{margin-top:8px;font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.st-h9-text{margin-top:14px;font-family:'Hanken Grotesk',sans-serif;font-size:16px;line-height:1.6;color:var(--text)}
.st-h9-tasten{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.st-h9-ok,.st-h9-ab{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:13px 20px;cursor:pointer;
  transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.st-h9-ok{flex:1;min-width:200px;background:var(--gruen);color:#fff;border:0}
.st-h9-ok:hover{background:var(--tanne)}
.st-h9-ab{background:none;border:1px solid var(--linie-karte);color:var(--sekundaer)}
.st-h9-ab:hover{border-color:var(--tinte);color:var(--tinte)}
.st-h9-ok:focus-visible,.st-h9-ab:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}

/* Ansichtswahl: Zeitstrahl oder Kacheln */
.st-ansichtwahl{position:relative;display:inline-flex;gap:2px;padding:3px;
  background:rgba(255,255,255,.06);border:1px solid var(--st-rand);border-radius:var(--r-pill)}
.st-aw-knopf{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--r-pill);text-decoration:none;
  color:rgba(255,255,255,.6);transition:color var(--t-schnell)}
.st-aw-knopf b{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.st-aw-knopf:hover{color:#fff}
.st-aw-knopf.ist{color:var(--pine)}
.st-aw-reiter{position:absolute;top:3px;left:3px;height:calc(100% - 6px);width:var(--w,0);
  transform:translateX(var(--x,0));background:var(--lime);border-radius:var(--r-pill);
  transition:transform .34s var(--ease),width .34s var(--ease)}
.st-aw-knopf:focus-visible{outline:2px solid var(--st-neon);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .st-zs::before,.st-zs-marke::before{opacity:.9}
  .st-zs-knoten{transform:none;opacity:1}
  .st-zs-karte{opacity:1;transform:none}
  .st-zs-markenlinie{opacity:.6;transform:none}
  .st-zs.naechste .st-zs-knoten::after,.st-zs-marke.jetzt::after{animation:none}
}

@media (max-width:620px){
  .st-strahl{--zs-zeit:48px;--zs-gleis:26px}
  .st-zs-karte{padding:10px 12px;gap:10px}
  .st-zs-zeit{font-size:15px;padding-right:10px}
  .st-frei .st-zs-zeit{font-size:16px}
  .st-zs-sagt b{font-size:17px}
  .st-zs-licht{margin-left:0}
  .st-zs .st-zs-pfeil{margin-left:auto;padding:6px 11px}
  .st-zs-markentext small{display:none}
  .st-zs-band{min-height:calc(min(var(--min,10) * 1.1px, 150px))}
}

.st-fuss{margin:26px var(--inset) 0;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;
  line-height:1.6;color:rgba(255,255,255,.5);max-width:70ch}
.st-fuss a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.st-fuss a:hover{color:var(--lime)}

/* ============================================================
   5. SO WIRD GEBUCHT
   ============================================================ */

.st-ablauf{padding:var(--luft) 0}
.st-schritte{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin:0 var(--inset);padding:0;counter-reset:schritt}
.st-schritt{position:relative;padding:30px 28px 28px;background:var(--mint);border-radius:var(--r-flaeche)}
.st-schritt-nr{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:var(--gruen);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.st-schritt h3{margin-top:18px;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinte)}
.st-schritt p{margin-top:10px;font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;line-height:1.6;color:var(--text)}
/* Der Faden zwischen den Schritten zeichnet sich beim Hereinscrollen */
.st-schritt::after{content:'';position:absolute;top:51px;right:-22px;width:22px;height:2px;
  background:var(--gruen);opacity:.35;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);transition-delay:calc(var(--i) * .12s + .2s)}
.st-schritte.sichtbar .st-schritt::after{transform:scaleX(1)}
.st-schritt:last-child::after{display:none}

.st-anleitungen{margin:calc(var(--luft-s)) var(--inset) 0}
.st-anleitungen-kopf{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.st-pdfliste{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0}
.st-pdfliste a{display:flex;align-items:center;gap:10px;padding:13px 18px;text-decoration:none;
  background:#fff;border:1px solid var(--linie-karte);border-radius:var(--r-pill);
  font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--tinte);
  transition:border-color var(--t-schnell),transform var(--t-mittel) var(--ease),box-shadow var(--t-mittel)}
.st-pdfliste a:hover{border-color:var(--gruen);transform:translateY(-2px);box-shadow:var(--schatten-karte)}
.st-pdfliste a:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.st-pdfliste svg{color:var(--gruen);flex:none}
.st-pdfliste em{font-family:'Space Grotesk',sans-serif;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.14em;color:var(--muted)}

/* ============================================================
   6. SPIELREGELN
   ============================================================ */

.st-regeln{padding:0 0 var(--luft);background:#fff}
.st-regelkarten{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin:0 var(--inset);padding:0}
.st-regelkarten li{padding:26px 28px;background:var(--mint);border-left:3px solid var(--gruen)}
.st-regelkarten h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--tinte)}
.st-regelkarten p{margin-top:9px;font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;
  line-height:1.6;color:var(--text)}

/* ============================================================
   7. SCHMALE BILDSCHIRME
   Die Tafel muss auf dem Handy die beste Version ihrer selbst sein —
   dort wird sie am Abschlag geöffnet, nicht am Schreibtisch.
   ============================================================ */

@media (max-width:1100px){
  .st-woche{grid-template-columns:repeat(4,minmax(0,1fr))}
  .st-schritte{grid-template-columns:1fr;gap:14px}
  .st-schritt::after{display:none}
}
@media (max-width:900px){
  .st-naechste{margin-left:0;min-width:0;max-width:none;width:100%;margin-top:20px}
  .st-stand-halter{margin-left:0;width:100%}
  .st-regelkarten{grid-template-columns:1fr}
}
@media (max-width:620px){
  .st-woche{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .st-tag{padding:11px 12px}
  .st-tag-datum b{font-size:22px}
  .st-raster{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:7px}
  .st-zeit{font-size:24px}
  .st-schalter{width:100%}
  .st-schalter-knopf{flex:1;align-items:center;padding:9px 12px}
  .st-schalter-knopf small{display:none}
  .st-profil-svg{height:104px}
  .st-p-marken{height:40px}
  .st-p-label{font-size:10.5px;padding:2px 6px}
  .st-p-label.m9{top:21px}
  .st-p-tip{font-size:10.5px;padding:2px 7px}
}
@media (max-width:380px){
  .st-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   8. WENIGER BEWEGUNG
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .st-naechste{animation:none}
  .st-p-bar{transition:none;transform:scaleY(1)}
  .st-tag-balken i{transition:none;transform:scaleX(1)}
  .st-tafel.wechsel .st-slot{animation:none}
  .st-livedot.an,.st-p-jetzt{animation:none}
  /* Ohne Blitz bleibt der Rahmen kurz stehen — die Rückmeldung darf nicht
     ganz entfallen, sonst weiß man nach dem Sprung nicht, wo man ist. */
  .st-slot.getroffen .st-kachel,
  .st-slot.getroffen .st-zs-zelle{animation:none;box-shadow:0 0 0 2px rgba(154,215,94,.7)}
  .st-schalter-reiter{transition:none}
  .st-pfeil{transition:none}
  .st-schritt::after{transition:none;transform:scaleX(1)}
}

/* Vom Profil angesprungene Zeit — leuchtet auf und geht dann wieder aus.
   Bis zum 19.08.2026 galt das nur für die Kacheln; im Zeitstrahl (der
   Standardansicht) sprang der Klick zwar hin, aber nichts zeigte an, wo man
   gelandet war.
   Seit 24.08.2026 HÄLT das Leuchten kurz an, statt sofort abzuklingen: Der
   Weg vom Profil zur Zeile ist lang, das Scrollen dauert — ein Blitz von
   1,3 s war beim Ankommen schon durch. Das Skript startet es ohnehin erst,
   wenn das Scrollen steht; die Haltephase fängt den Rest. */
@keyframes st-blitz{
  0%   {box-shadow:0 0 0 0 rgba(154,215,94,0)}
  10%  {box-shadow:0 0 0 3px rgba(154,215,94,.95),0 0 26px 4px rgba(154,215,94,.32)}
  68%  {box-shadow:0 0 0 3px rgba(154,215,94,.95),0 0 26px 4px rgba(154,215,94,.28)}
  100% {box-shadow:0 0 0 0 rgba(154,215,94,0)}
}
.st-slot.getroffen .st-kachel,
.st-slot.getroffen .st-zs-zelle{animation:st-blitz 2.2s var(--ease) 1;position:relative;z-index:3}
/* Die Uhrzeit an der Linie leuchtet mit — sie ist das, was man oben
   angetippt hat, und im Zeitstrahl steht sie außerhalb der Zelle. */
@keyframes st-blitz-zeit{
  0%   {color:inherit}
  10%  {color:#9ad75e}
  68%  {color:#9ad75e}
  100% {color:inherit}
}
.st-slot.getroffen .st-zs-zeit,
.st-slot.getroffen .st-zeit{animation:st-blitz-zeit 2.2s var(--ease) 1}
.st-profil-buehne{cursor:crosshair}

/* Kein Plan für diesen Tag — Grund und Ausweg statt leerer Fläche */
.st-leer{padding:34px 32px;background:var(--st-flaeche);border:1px solid var(--st-rand);border-radius:var(--r-karte)}
.st-leer-titel{font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,2vw,24px);font-weight:700;
  letter-spacing:-.02em;color:#fff}
.st-leer-text{margin-top:10px;font-family:'Hanken Grotesk',sans-serif;font-size:16px;line-height:1.6;
  color:var(--st-schrift);max-width:60ch}
.st-leer-tasten{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---------- Der Flight: ein Zeichen je Platz ----------
   Belegte Plätze tragen das Zeichen für Herr/Dame, freie einen Kreis. Die
   Zusatzzeile nennt nur, was von der Regel abweicht: Cart und die kurze
   Runde. Alles zusätzlich im title und für Screenreader ausgeschrieben —
   die Symbole allein tragen keine Information (Vorgabe Barrierefreiheit). */
/* Deutlich größer als die Platz-Punkte: Wer im Flight sitzt, soll man aus
   Armlänge erkennen, nicht suchen müssen. */
.st-punkte i.wer{width:auto;min-width:13px;height:auto;border-radius:0;background:none;box-shadow:none;
  font-family:system-ui,'Helvetica Neue',sans-serif;font-size:19px;font-style:normal;line-height:1;
  color:rgba(255,255,255,.9)}
.st-punkte i.wer.w{color:#F3C4D8}
.st-punkte i.wer.m{color:#BBD9F2}
.st-punkte i.wer.x{font-size:20px;color:rgba(255,255,255,.7)}

.st-flight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-2px}
/* Cart ist eine Ansage, kein Detail: eigener Chip mit Wort, damit man ihn
   quer über das Raster sieht — und farblich von Lime (frei) und Bernstein
   (telefonisch / kurze Runde) getrennt. */
.st-cart{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);color:#fff}
.st-cart b{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.st-voll .st-cart{background:rgba(255,255,255,.16)}
.st-runde{font-family:'Hanken Grotesk',sans-serif;font-size:12px;color:rgba(255,255,255,.58);white-space:nowrap}
/* Info-Eintrag einer Timetable-Regel (*I in PC CADDIE): informiert, sperrt
   nicht — z. B. „Rookie-Golftreff". Steht wie bei PC CADDIE auf der Zeit
   selbst; still, aber lesbar, ohne mit Lime (frei) zu konkurrieren. */
.st-info{display:inline-flex;align-items:flex-start;gap:6px;min-width:0;
  font-family:'Hanken Grotesk',sans-serif;font-size:12px;line-height:1.35;
  color:rgba(255,255,255,.62)}
.st-info svg{flex:none;margin-top:2px;opacity:.75}
.st-namen{font-family:'Hanken Grotesk',sans-serif;font-size:12px;color:rgba(255,255,255,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Wer spielt: das Zeichen AN seinem Namen, nicht in einer Reihe davor.
   Die Person ist die Einheit — sie bricht als Ganzes um, nie zwischen
   Zeichen und Name. Kein Ellipsis und kein Zählen: Alle vier stehen da,
   sonst fehlt genau der, dessentwegen man hinsieht. */
.st-leute{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;min-width:0}
.st-person{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.st-person i{font-family:system-ui,'Helvetica Neue',sans-serif;font-size:16px;font-style:normal;
  line-height:1;color:rgba(255,255,255,.9)}
.st-person i.w{color:#F3C4D8}
.st-person i.m{color:#BBD9F2}
.st-person i.x{font-size:17px;color:rgba(255,255,255,.7)}
.st-person b{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.72)}
.st-voll .st-person b{color:rgba(255,255,255,.66)}
@media (max-width:760px){
  /* Auf schmalen Zellen zählt die Zeit, nicht die Gesellschaft: enger
     setzen, aber weiterhin alle zeigen. */
  .st-leute{gap:3px 9px}
  .st-person b{font-size:11.5px}
}

/* Ausgebucht ist ein Zustand, kein Ausschluss: Zeit und Flight bleiben lesbar,
   nur der Weg in die Buchung fehlt. */
.st-voll .st-kachel{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13)}
.st-voll .st-zeit{color:rgba(255,255,255,.78)}
.st-voll .st-zustand{color:rgba(255,255,255,.55)}
.st-voll .st-punkte i.wer{color:rgba(255,255,255,.75)}
.st-voll .st-punkte i.wer.w{color:#E6B6CB}
.st-voll .st-punkte i.wer.m{color:#AECBE6}

/* ============================================================
   8. NACHTBRETT

   Die Tafel steht wieder auf Dunkel — aber ganz, nicht halb: Die Kacheln
   lösen sich in Haarlinien auf, gefüllte Flächen gibt es keine mehr. Farbig
   ist nur noch, was etwas bedeutet: die Lichtachse mit ihrer wandernden
   Sonne, das Lime der freien Plätze und die Bernstein-Kante der Sperren.
   Vorher war die Seite Grün auf Grün; jetzt ist sie fast schwarz mit einem
   Lichtstreifen.

   Auf dem Gleis läuft genau EIN Punkt mit — die Sonne der Zeile, die man
   gerade liest. Die Reihe aus 90 Punkten ist weg; sie war Zierrat.
   ============================================================ */

.st-tafel-sektion{background:var(--pine)}
.st-profil-buehne{background:rgba(255,255,255,.04);border:1px solid var(--hairline-dunkel)}

/* Kacheln ohne Fläche — nur Kante */
.st-zs-zelle{background:transparent;border-color:rgba(255,255,255,.13)}
.st-zs-zelle.st-frei{background:transparent;border-color:rgba(154,215,94,.34)}
.st-zs-zelle.st-voll{background:transparent;border-color:rgba(255,255,255,.09)}
.st-zs-zelle.st-telefon{background:transparent;border-color:rgba(232,180,74,.34)}
.st-zs-zelle.st-gesperrt{background:transparent;border-color:rgba(255,255,255,.09);
  border-left-color:var(--st-telefon)}
.st-zs-zelle.st-vorbei,.st-zs-zelle.st-leer{background:transparent;border-color:rgba(255,255,255,.07)}
a.st-zs-zelle:hover{background:rgba(154,215,94,.08);border-color:var(--lime)}
.st-kachel{background:transparent}
.st-frei .st-kachel{background:transparent;border-color:rgba(154,215,94,.34)}
.st-frei .st-kachel:hover{background:rgba(154,215,94,.1);border-color:var(--lime)}
.st-voll .st-kachel,.st-gesperrt .st-kachel{background:transparent;border-color:rgba(255,255,255,.09)}
.st-telefon .st-kachel{background:transparent;border-color:rgba(232,180,74,.34)}
.st-band-inhalt{background:transparent;border-color:rgba(255,255,255,.09)}
.st-tag{background:transparent}
.st-tag.ist{background:rgba(154,215,94,.08)}
.st-schalter,.st-ansichtwahl{background:rgba(255,255,255,.05)}
.st-leer{background:transparent;border:1px solid var(--hairline-dunkel)}

/* Marken und Abschnitte: der Grund ist Pine, kein Tanne mehr */
.st-zs-markentext{background:var(--pine)}
.st-abschnitt::before{display:none}          /* kein Farbschimmer im Rücken */

/* ---------- Die eine wandernde Sonne ----------
   Ein Punkt für die ganze Tafel: Er sitzt auf der Lichtlinie und folgt der
   Zeile am Lesepunkt (assets/startzeiten.js setzt Position und Farbe). */
.st-zs-knoten{display:none}
.st-tafel{position:relative}
/* Kein Schein, kein Hof: Die Sonne ist eine saubere Scheibe auf der Linie.
   Bewegt wird sie ohne Übergang — sie liegt am Lesepunkt und der Tag zieht
   an ihr vorbei; ein Übergang auf `top` ließ sie beim Scrollen stottern. */
.st-zs-laeufer{position:absolute;z-index:3;width:15px;height:15px;border-radius:50%;
  margin-left:-7.5px;pointer-events:none;
  background:radial-gradient(circle at 33% 29%,rgba(255,255,255,.96) 0%,var(--licht,#f7b44e) 58%,rgba(0,0,0,.22) 100%);
  box-shadow:0 0 0 3px var(--pine);
  transition:background .5s linear}
.st-zs-laeufer[hidden]{display:none}

/* ============================================================
   Buchen in der Tafel (seit 18.08.2026) — das Formular steht unter der
   angetippten Zeit, in der Formularsprache der Turnieranmeldung (tu-anm):
   gerahmte Felder, 9 px Radius, Lime-Unterstrich, dunkler Grund.
   ============================================================ */
.st-buchung{list-style:none;grid-column:1/-1;margin:6px 0 10px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--lime);
  border-radius:12px;padding:18px 20px 20px;
  opacity:0;transform:translateY(-6px);transition:opacity .28s var(--ease),transform .32s var(--ease)}
.st-buchung.st-buchung-auf{opacity:1;transform:none}
.st-strahl .st-buchung{margin-left:calc(var(--zs-zeit) + var(--zs-gleis))}
.st-frei-offen{outline:2px solid var(--st-neon);outline-offset:-2px}
.st-b-kopf{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;color:rgba(255,255,255,.72)}
.st-b-zeit{font-size:22px;color:#fff;line-height:1}
.st-b-was{flex:1}
.st-b-zu{background:none;border:0;color:rgba(255,255,255,.55);font-size:16px;cursor:pointer;
  padding:4px 8px;margin:-4px -8px -4px 0;line-height:1;align-self:center}
.st-b-zu:hover,.st-b-zu:focus-visible{color:#fff}
/* Die Anmeldung sind ZWEI Felder — Kennung und Kennwort. Sie standen bis zum
   24.08.2026 in demselben vierspaltigen Raster wie die Mitspielerzeile und
   liefen deshalb auf dem Rechner über 820 px auseinander: zwei Eingaben,
   quer über die halbe Tafel, mit einer Lücke dazwischen, die aussah, als
   fehlte etwas. Auf dem Telefon war es richtig, weil dort ohnehin alles
   untereinander steht.
   Jetzt untereinander und schmal — die Form, die jeder von einem
   Anmeldefeld kennt. Die vier Spalten bleiben für die Mitspielerzeile, die
   sie wirklich braucht. */
.st-b-felder{display:grid;gap:14px;grid-template-columns:1fr;max-width:420px}
.st-b-feld:not(.st-b-schmal){grid-column:1/-1}
.st-b-breit{grid-column:1/-1}
.st-b-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.st-b-feld label{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.st-b-opt{letter-spacing:.04em;text-transform:none;font-weight:400;color:rgba(255,255,255,.42)}
.st-b-feld input:not([type=checkbox]),.st-b-feld select{font-family:'Hanken Grotesk',sans-serif;font-size:16px;
  color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-bottom:2px solid rgba(255,255,255,.3);padding:12px 14px;border-radius:9px;width:100%;
  -webkit-appearance:none;appearance:none}
.st-b-feld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:36px}
.st-b-feld select option{color:#111}
.st-b-feld input:hover,.st-b-feld select:hover{border-bottom-color:var(--st-neon)}
.st-b-feld input:focus,.st-b-feld select:focus{outline:none;border-bottom-color:var(--st-neon);
  box-shadow:0 0 0 3px rgba(154,215,94,.28)}
.st-b-wahl{justify-content:flex-end}
.st-b-check{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);
  border-radius:9px;color:#fff;cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-size:15px;
  letter-spacing:0;text-transform:none;font-weight:400}
.st-b-check input{width:18px;height:18px;accent-color:var(--st-neon);margin:0}
/* „Angemeldet bleiben" steht als eigene Zeile über den Knöpfen, nicht neben
   ihnen: Es ist eine Entscheidung, kein Beiwerk der Schaltfläche. */
.st-b-merken{margin-top:16px;max-width:820px}
.st-b-merken small{color:rgba(255,255,255,.5);font-size:13px}
.st-b-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:18px;max-width:820px}
.st-b-hinweis{flex:1 1 320px;margin:0;color:rgba(255,255,255,.5);line-height:1.5;font-size:13px}
.st-b-hinweis a{color:rgba(255,255,255,.75)}
.st-b-meldung{margin:16px 0 0;padding:12px 14px;border-radius:9px;max-width:820px;
  background:rgba(154,215,94,.14);border:1px solid rgba(154,215,94,.4);color:#fff;line-height:1.5}
.st-b-meldung[data-art="fehler"]{background:rgba(255,90,77,.14);border-color:rgba(255,90,77,.45)}
.st-b-weiter{display:inline-block;margin-top:6px;color:var(--lime);font-weight:600}
.st-b-senden[disabled]{opacity:.55;cursor:progress}
@media(max-width:600px){
  .st-strahl .st-buchung{margin-left:0}
  .st-buchung{padding:16px 14px 18px}
}
/* Schritt 2: wer spielt mit — Spielerliste wie eine Flight-Karte */
.st-b-wer{margin:0 0 12px;color:rgba(255,255,255,.72);font-size:14px}
.st-b-wer b{color:#fff;font-weight:600}
.st-b-wechsel{background:none;border:0;padding:0 0 0 10px;color:rgba(255,255,255,.55);cursor:pointer;
  font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.st-b-wechsel:hover{color:#fff}
.st-b-spieler{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:820px}
.st-b-sp{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:8px 10px 8px 6px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.04)}
.st-b-sp-selbst{border-color:rgba(154,215,94,.45)}
.st-b-sp-nr{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px}
.st-b-sp-selbst .st-b-sp-nr{background:var(--st-neon);color:var(--pine)}
.st-b-sp-name{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff}
.st-b-sp-wahl{display:grid;gap:8px;min-width:0}
.st-b-sp select,.st-b-sp input[type=text]{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-bottom:2px solid rgba(255,255,255,.3);
  padding:9px 12px;border-radius:9px;width:100%;-webkit-appearance:none;appearance:none;min-width:0}
.st-b-sp select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px}
.st-b-sp select option{color:#111}
.st-b-sp input:focus,.st-b-sp select:focus{outline:none;border-bottom-color:var(--st-neon);box-shadow:0 0 0 3px rgba(154,215,94,.28)}
.st-b-sp-namen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-b-sp-namen select{grid-column:1}
/* Auf dem Rechner klappen die Felder UNTER die Kopfzeile auf, statt sich in
   die mittlere Spalte zwischen Nummer und E-Cart zu quetschen. Oben steht
   dann nur, worum es geht — Nummer links, E-Cart und Wegnehmen rechts —,
   darunter die Eingaben über die ganze Breite. Die eigene Zeile
   (st-b-sp-selbst) bleibt einzeilig: Dort steht nur der eigene Name. */
@media(min-width:760px){
  /* `.st-b-sp-wahl` gibt es nur in Mitspielerzeilen — die eigene Zeile
     trägt stattdessen `.st-b-sp-name`. Ein Nachfahrenselektor genügt also,
     kein :has() nötig. */
  .st-b-sp > .st-b-sp-wahl{grid-column:1/-1;grid-row:2;margin-top:4px}
  .st-b-sp-namen{grid-template-columns:1fr 1fr minmax(120px,.6fr) minmax(150px,.8fr)}
}
.st-b-sp .st-b-check{padding:8px 10px;font-size:13px;white-space:nowrap}
.st-b-sp-weg{background:none;border:0;color:rgba(255,255,255,.45);cursor:pointer;font-size:14px;padding:6px}
.st-b-sp-weg:hover{color:#fff}
.st-b-plus{margin-top:10px;background:none;border:1px dashed rgba(255,255,255,.35);color:#fff;border-radius:999px;
  padding:9px 16px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.st-b-plus:hover,.st-b-plus:focus-visible{border-color:var(--st-neon);background:rgba(154,215,94,.12)}
.st-b-plus[hidden]{display:none}
.st-b-runde{margin-top:14px}
.st-b-meine{margin-top:18px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;max-width:820px}
.st-b-meine summary{cursor:pointer;color:rgba(255,255,255,.75);font-family:'Space Grotesk',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;list-style:none}
.st-b-meine summary::-webkit-details-marker{display:none}
.st-b-meine summary::before{content:"▸";display:inline-block;margin-right:8px;transition:transform .2s}
.st-b-meine[open] summary::before{transform:rotate(90deg)}
.st-b-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.st-b-liste .st-b-check{padding:8px 12px;font-size:14px}
.st-b-liste b{font-weight:600}
.st-b-liste span{color:rgba(255,255,255,.6);font-size:13px}
.st-b-storno{margin-top:10px;background:none;border:1px solid rgba(255,90,77,.6);color:#ffb3ab;border-radius:999px;
  padding:8px 14px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.st-b-storno:hover{background:rgba(255,90,77,.16);color:#fff}
@media(max-width:600px){
  .st-b-sp{grid-template-columns:24px minmax(0,1fr) auto;grid-auto-rows:auto}
  .st-b-sp .st-b-check{grid-column:2;justify-self:start}
  .st-b-sp-weg{grid-column:3;grid-row:1}
  .st-b-sp-namen{grid-template-columns:1fr}
}
/* hidden gewinnt — auch gegen display:grid der Zeilen (Falle vom 18.08.). */
.st-buchung [hidden]{display:none !important}

/* Mitspieler: zwei Wege als Segment, Namensfelder mit Beschriftung */
.st-b-sp-wege{display:inline-flex;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px;gap:2px}
.st-b-weg{background:none;border:0;border-radius:999px;padding:6px 12px;color:rgba(255,255,255,.7);cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.st-b-weg[aria-pressed="true"]{background:var(--st-neon);color:var(--pine)}
.st-b-sp-namen{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.st-b-sp-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-b-sp-l>span{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.st-b-sp-l>span em{font-style:normal;color:var(--lime);margin-left:6px;letter-spacing:.08em}
.st-b-sp-opt input{border-style:dashed}
.st-b-sp-tipp{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.55)}

/* ============================================================
   Anmelden ohne Seitenwechsel (24.08.2026)
   ============================================================
   Der Knopf über der Tafel führte auf anmelden.php — und die trägt die
   Optik der Handy-App: eigene Schale, eigene Schrift, 520 px breit. Wer
   nur sein Kennwort eingeben wollte, landete sichtbar woanders. Jetzt
   geht dasselbe Formular hier auf, in der Sprache der Tafel. */
.st-anm{border:0;padding:0;background:transparent;color:#fff;
  width:min(460px,calc(100vw - 28px));max-height:calc(100vh - 28px);margin:auto}
.st-anm::backdrop{background:rgba(7,32,21,.55);
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.st-anm[open]{animation:stAnmAuf .3s var(--ease) both}
@keyframes stAnmAuf{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.st-anm-karte{position:relative;background:var(--pine);border:1px solid var(--st-rand);
  border-radius:var(--r-karte);padding:30px 28px 26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.st-anm-zu{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;
  background:none;border:1px solid var(--st-rand);border-radius:50%;color:rgba(255,255,255,.7);
  font-size:14px;line-height:1;cursor:pointer;transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.st-anm-zu:hover,.st-anm-zu:focus-visible{background:var(--st-neon);border-color:var(--st-neon);color:var(--pine)}
.st-anm-kicker{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--st-neon)}
.st-anm-karte h3{margin:8px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(21px,2.6vw,26px);line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.st-anm-text{margin:10px 0 20px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;
  line-height:1.5;color:var(--st-schrift)}
/* Die Felder stehen hier immer untereinander — das Blatt ist schmal. */
.st-anm .st-b-felder{max-width:none}
.st-anm .st-b-merken{margin-top:14px;max-width:none}
.st-anm-senden{width:100%;margin-top:18px}
.st-anm-meldung{margin:14px 0 0;padding:11px 13px;border-radius:9px;line-height:1.5;font-size:14px;
  background:rgba(255,90,77,.14);border:1px solid rgba(255,90,77,.45)}
.st-anm-meldung[data-art="ok"]{background:rgba(154,215,94,.14);border-color:rgba(154,215,94,.4)}
.st-anm-fuss{margin:16px 0 0;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;
  line-height:1.5;color:rgba(255,255,255,.45)}
@media (max-width:560px){
  /* Wie das Aktuelles-Blatt: von unten, damit der unscharfe Grund oben
     sichtbar bleibt und man weiß, dass die Tafel noch da ist. */
  .st-anm{width:100vw;max-height:94vh;margin:auto 0 0}
  .st-anm-karte{border-radius:var(--r-karte) var(--r-karte) 0 0;
    padding:26px 20px calc(24px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .st-anm[open]{animation:none}
}