/* Spielplan-Seite — /schedule
 *
 * Eine Arbeitsseite, keine Werbeseite: kein Hero, keine Navigation, kein
 * Seitenkopf — nur ein Zurück-Pfeil, die Ansichts-Reiter und der Spielplan.
 *
 * Die Seite lädt bewusst NICHT styles.css: davon brauchte sie zuletzt nur
 * die Tokens und .eyebrow, der Rest waren 40 KB Startseiten-Stile auf einer
 * Seite, die Teams am Turniertag über Mobilfunk aufrufen. Die Tokens unten
 * sind 1:1 aus :root in styles.css übernommen — Änderungen dort hier
 * nachziehen. Geometrie ist hart: kein border-radius.
 */

:root {
  --ink:    #08111f;
  --court:  #102a4c;
  --flame:  #ff6b1a;
  --ember:  #e54a00;
  --bone:   #f4efe6;
  --bone-2: #ebe4d4;
  --chalk:  #e3dccb;
  --line:   rgba(8, 17, 31, 0.14);
  --line-d: rgba(244, 239, 230, 0.18);

  --f-display: "Big Shoulders Display", "Bebas Neue", "Impact", sans-serif;
  --f-sans:    "Manrope", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --max:    1280px;
  --gutter: clamp(16px, 4vw, 56px);

  /* Einziges klebendes Element ist die Ansichts-Leiste. schedule.js misst ihre
     Höhe nach dem Laden; der Startwert gilt, bis die Messung greift. */
  --viewbar-h: 46px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--viewbar-h) + 8px); }
body {
  margin: 0;
  background: var(--bone); color: var(--ink);
  font-family: var(--f-sans);
  font-size: clamp(15px, 0.92vw + 12px, 17px); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.eyebrow {
  display: block;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- Zurück-Zeile */

.minibar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 16px;
  max-width: var(--max); margin: 0 auto;
  padding: 12px var(--gutter) 11px;
}
.back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 10px 6px 0;
  color: var(--ink); text-decoration: none;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.15s ease;
}
.back:hover { color: var(--ember); }
.back-arrow { font-size: 16px; line-height: 1; }
.back-label { opacity: 0.6; }
.back:hover .back-label { opacity: 1; }

.statusline {
  display: flex; align-items: center; gap: 7px;
  margin: 0;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.6;
}
.sl-dot { width: 6px; height: 6px; flex: none; background: rgba(8, 17, 31, 0.3); }
.sl-dot.is-live { background: var(--flame); animation: sl-blink 1.2s ease-in-out infinite; }
.sl-sep { opacity: 0.4; }
.sl-state { font-weight: 500; }
@keyframes sl-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }

/* --------------------------------------------------------- Admin-Leiste */

.admbar-slot:empty { display: none; }
/* Nur im Admin-Modus im DOM — deshalb ruhig statt Alarmfarbe: eine
   Werkzeugleiste, kein Banner. */
.admbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  max-width: var(--max); margin: 0 auto;
  padding: 8px var(--gutter) 10px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.admbar-txt { opacity: 0.5; margin-right: auto; text-transform: none; letter-spacing: 0.04em; }
.admbar-btn {
  font: inherit; letter-spacing: 0.1em;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  padding: 8px 11px; min-height: 32px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admbar-btn:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.admbar-btn-warn:hover { background: var(--ember); color: var(--bone); border-color: var(--ember); }

/* ------------------------------------------------------------- Ansichten */

.viewbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bone-2);
  border-bottom: 1px solid var(--line);
}
.viewbar-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.viewtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.viewtabs::-webkit-scrollbar { display: none; }
.vtab {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink); opacity: 0.5;
  padding: 17px 16px 15px; cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.vtab:hover { opacity: 0.85; }
.vtab.is-on { opacity: 1; border-bottom-color: var(--flame); font-weight: 500; }

.view {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px var(--gutter) clamp(56px, 7vw, 96px);
}

.toolbar {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--line);
}
.toolbar-block { display: block; }
.lead {
  max-width: 74ch; margin: 0;
  font-size: 14px; opacity: 0.68;
}
/* Kurzer Sachhinweis über einer Tabelle — Mono, damit er als Beschriftung
   liest und nicht als Fliesstext. */
.note {
  max-width: 74ch; margin: 16px 0 0;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.04em; line-height: 1.7; opacity: 0.5;
}
.phase + .note { margin-top: 12px; }
.chips, .pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  padding: 10px 13px; min-height: 38px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip-team {
  font-family: var(--f-sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; padding: 9px 12px;
}
/* Kompaktzeile, wenn ein Team gewählt ist — den Namen trägt der Kopf
   direkt darunter, hier steht nur der Weg zurück zur Auswahl. */
.toolbar-pick { justify-content: flex-start; padding: 16px 0 14px; border-bottom: 0; }

.picker { display: grid; gap: 16px; }
.pick-group { display: grid; gap: 7px; }
.pick-label {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.45;
}
.jumps { display: flex; flex-wrap: wrap; gap: 2px; }
.jump {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); opacity: 0.5; text-decoration: none;
  background: none; border: 0; padding: 8px 10px; cursor: pointer;
}
.jump:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.jump.is-live { color: var(--ember); opacity: 1; }

.phase {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: 44px 0 0; padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
}
/* Genug Luft, wenn ein Sprunglink hierher zielt — die Topbar und die
   Ansichts-Leiste kleben darüber. */
.phase { scroll-margin-top: calc(var(--viewbar-h) + 10px); }
.phase-inline { font-size: 17px; margin-top: 30px; border-bottom-width: 1px; }
.cgrid > .phase-inline:first-child, .view > .phase:first-of-type { margin-top: 28px; }

/* ------------------------------------------------------------- Zeitraster */

.slot {
  display: grid; grid-template-columns: 78px 1fr;
  border-bottom: 1px solid var(--line);
}
.slot-head { border-bottom: 1px solid var(--ink); }
.slot-head .slot-hhmm, .ch-name, .ch-note {
  font-family: var(--f-mono); text-transform: uppercase;
}
.slot-head .slot-hhmm { font-size: 9.5px; letter-spacing: 0.14em; opacity: 0.5; }
.cell-head { display: grid; gap: 2px; align-content: center; padding: 10px 10px 9px; }
.ch-name { font-size: 10px; letter-spacing: 0.14em; font-weight: 500; }
.ch-note { font-size: 9px; letter-spacing: 0.1em; opacity: 0.42; }

.slot-time {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 12px 12px 0;
  border-right: 1px solid var(--line);
}
.slot-hhmm {
  font-family: var(--f-mono); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.slot-live {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember);
  animation: sl-blink 1.2s ease-in-out infinite;
}
.slot-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Im Raster steht das Feld schon in der Spaltenüberschrift — die Wiederholung
   auf jeder Karte kostet nur Platz. Unter 900px stapeln die Spalten, dort
   braucht es die Angabe wieder. */
.slot-cells .m-court { display: none; }
.slot.is-live { background: rgba(255, 107, 26, 0.055); }
.cell { border-left: 1px solid var(--line); min-width: 0; }
.cell:first-child { border-left: 0; }
.cell.is-empty { display: grid; place-items: center; padding: 14px 0; }
.cell-none {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.22;
}

.brk {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  background: var(--chalk);
  padding: 9px 14px; margin-top: 26px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.brk-t { font-weight: 500; }
.brk-l { opacity: 0.6; }

/* --------------------------------------------------------------- Spiel */

.match {
  display: grid; gap: 3px;
  padding: 11px 12px 10px;
  min-width: 0;
  transition: background 0.15s ease;
}
.match:hover { background: rgba(8, 17, 31, 0.035); }
.m-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.11em; text-transform: uppercase;
  opacity: 0.62; margin-bottom: 3px;
}
.m-time { font-size: 11px; font-weight: 500; opacity: 1; font-variant-numeric: tabular-nums; }
.m-court { font-weight: 500; }
.m-pool { opacity: 0.8; }
.m-livedot {
  color: var(--ember); opacity: 1; font-weight: 500;
  animation: sl-blink 1.2s ease-in-out infinite;
}
.m-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-width: 0;
}
.m-name {
  font-size: 13.5px; font-weight: 500; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Teamname als Button — führt zur Teamansicht, sieht aber wie Text aus. */
button.m-name {
  font-family: inherit; color: inherit;
  background: none; border: 0; border-radius: 0;
  /* Negatives Margin gleicht das Polster wieder aus: die Zeile bleibt gleich
     hoch, die Tippfläche wächst von 17 auf 27 Pixel. */
  padding: 5px 0; margin: -5px 0;
  text-align: left; cursor: pointer;
}
button.m-name:hover {
  text-decoration: underline; text-decoration-color: var(--flame);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
button.m-name:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.m-score {
  font-family: var(--f-mono); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; opacity: 0.22; flex: none;
}
.m-row.is-win .m-name { font-weight: 700; }
.m-row.is-win .m-score { opacity: 1; color: var(--ember); }
.match.is-done .m-score { opacity: 0.75; }
.m-row.is-ph .m-name {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.08em; opacity: 0.42; text-transform: uppercase;
}
.m-foot {
  display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.08em; opacity: 0.42;
  overflow: hidden;
}
.m-ref { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-flag { color: var(--ember); opacity: 1; text-transform: uppercase; letter-spacing: 0.14em; }

/* Spielnummer — der Schluessel, unter dem das Resultat erfasst wird. Etwas
   praesenter als der Rest der Kopfzeile, damit man sie im Vorbeigehen
   ablesen kann, aber nicht lauter als die Teamnamen. */
.m-id {
  font-weight: 500; opacity: 1; letter-spacing: 0.06em;
  color: var(--ink);
}
.match.is-final .m-id { color: var(--bone); }
.tr-id { font-weight: 500; letter-spacing: 0.06em; }

.match.is-u16 { background: rgba(16, 42, 76, 0.055); }
.match.is-u16:hover { background: rgba(16, 42, 76, 0.09); }
.match.is-medal { background: rgba(255, 107, 26, 0.09); }
.match.is-final { background: var(--ink); color: var(--bone); }
.match.is-final .m-score { color: var(--bone); }
.match.is-final .m-row.is-win .m-score { color: var(--flame); }
.match.is-live { box-shadow: inset 0 0 0 1px var(--flame); }

/* Score-Eingabe (nur ?admin) */
/* Darf umbrechen: sonst diktiert die Eingabezeile die Mindestbreite der
   Feldspalte und das Fünfspaltenraster wird breiter als der Bildschirm. */
.m-adm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--line);
}
.adm-in {
  width: 46px; min-width: 0; padding: 5px 6px;
  font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--bone); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
}
.adm-in:focus { outline: 2px solid var(--flame); outline-offset: -1px; }
.adm-sep { font-family: var(--f-mono); opacity: 0.4; }
.adm-lbl {
  display: flex; align-items: center; gap: 4px; margin-left: 4px;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55;
  cursor: pointer;
}
.adm-ff { accent-color: var(--ember); }
.adm-clr {
  margin-left: auto; width: 26px; height: 26px;
  background: none; border: 1px solid var(--line); border-radius: 0;
  color: inherit; cursor: pointer; line-height: 1;
}
.adm-clr:hover { border-color: var(--ember); color: var(--ember); }
.match.is-final .adm-in { background: var(--bone); }

/* ------------------------------------------------------------- Tabellen */

.tgrid {
  display: grid;
  /* min(px, 100%) statt px: sonst zieht das Raster unter ~370px Viewport
     breiter als der Bildschirm und die Seite scrollt horizontal. */
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 30px 40px;
  margin-top: 24px;
}
.tgrid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.tcard { min-width: 0; border-top: 2px solid var(--ink); }
/* Feste Spaltenbreiten: die Zahlenspalten sind schmal und bekannt, der Rest
   gehört dem Teamnamen. Damit kann eine Tabelle ihren Container nie sprengen,
   egal wie lang ein Teamname ist. */
.stand { table-layout: fixed; }
.stand td, .stand th { overflow-wrap: anywhere; }
.stand th.n, .stand td.n { width: 34px; }
.tcard-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 14px;
  padding: 11px 0 10px;
}
.tcard h4 {
  margin: 0;
  font-family: var(--f-display); font-weight: 700; font-size: 21px;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
}
.tcard-note {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45;
}
.tcard-foot {
  margin: 10px 0 0;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; opacity: 0.5;
}
.tcard-gold { border-top-color: var(--flame); }

.stand { width: 100%; border-collapse: collapse; font-size: 13px; }
.stand th {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; opacity: 0.5; font-weight: 500;
  padding: 7px 5px; border-bottom: 1px solid var(--ink); white-space: nowrap;
}
.stand td { padding: 9px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.stand .n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.stand th.n { text-align: right; }
.c-pl { width: 26px; font-family: var(--f-mono); font-size: 12px; opacity: 0.45; }
.c-pkt { font-weight: 600; opacity: 1; }
.c-team { min-width: 0; }
.c-block {
  width: 62px; text-align: right;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45;
}
.st-name {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  overflow-wrap: anywhere;
}
.st-name.is-ph { font-family: var(--f-mono); font-weight: 400; font-size: 11px; opacity: 0.35; text-transform: uppercase; letter-spacing: 0.1em; }
.st-club {
  display: block; font-size: 11px; opacity: 0.45; line-height: 1.3;
  overflow-wrap: anywhere;
}
.st-cat {
  display: inline-block; margin-top: 2px;
  font-family: var(--f-mono); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.4;
}
.stand tbody tr.is-up { background: rgba(255, 107, 26, 0.08); }
.stand-rank tr.is-open .st-name { opacity: 0.5; }
.stand-rank tr.is-fixed .c-pl { opacity: 1; font-weight: 600; }

.pending {
  margin: 12px 0 0;
  background: var(--bone-2);
  padding: 13px 15px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.05em; line-height: 1.6; opacity: 0.7;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------- Team- / Feldkopf */

.thead { padding: 26px 0 0; }
.thead .eyebrow { margin-bottom: 8px; }
.thead-name {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(28px, 7vw, 42px); line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}
.thead-meta { margin: 7px 0 0; font-size: 13px; opacity: 0.55; }
.thead-call {
  margin: 10px 0 0;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
  overflow-wrap: anywhere;
}
.thead-call b { font-weight: 500; }
.thead-call-why { opacity: 0.5; }

/* Das Nächste zuerst: wann, wo, gegen wen. */
.nextgame {
  background: var(--ink); color: var(--bone);
  padding: 14px 16px 15px; margin-top: 18px;
}
.ng-label {
  display: block;
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5;
}
.ng-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 6px;
}
.ng-time {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(30px, 8vw, 40px); line-height: 1;
  color: var(--flame); font-variant-numeric: tabular-nums;
}
.ng-court {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7;
}
.ng-opp {
  margin: 7px 0 0;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.ng-vs { font-weight: 400; opacity: 0.5; }
.ng-opp .is-ph {
  font-family: var(--f-mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55;
}
.ng-pool {
  display: block; margin-top: 6px;
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45;
}

/* Kennzahlen als eine umbrechende Zeile statt als Kachelraster. */
.statline {
  display: flex; flex-wrap: wrap; gap: 5px 18px;
  margin: 14px 0 0; padding-bottom: 2px;
}
.stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.stat-v {
  font-family: var(--f-display); font-weight: 700;
  font-size: 18px; line-height: 1; letter-spacing: 0.01em;
}
.stat-l { opacity: 0.45; }

/* --------------------------------------------------------- Team-Spielliste */

.tlist { border-top: 1px solid var(--ink); margin-top: 2px; }
.trow {
  display: grid;
  grid-template-columns: 62px 58px minmax(0, 1fr) 180px 72px;
  align-items: center; gap: 10px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--line);
}
.tr-time {
  font-family: var(--f-mono); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tr-court, .tr-pool, .tr-pre {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.11em; text-transform: uppercase; opacity: 0.45;
}
.tr-vs { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.tr-opp {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-opp.is-ph {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.42;
}
.tr-res {
  text-align: right;
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 500;
  font-variant-numeric: tabular-nums; opacity: 0.3;
}
.trow.is-done .tr-res { opacity: 0.8; }
.trow.is-win { background: rgba(28, 122, 74, 0.07); }
.trow.is-win .tr-res { color: #1c7a4a; opacity: 1; font-weight: 600; }
.trow.is-loss .tr-res { color: var(--ember); opacity: 0.75; }
.trow.is-live { background: rgba(255, 107, 26, 0.09); box-shadow: inset 0 0 0 1px var(--flame); }
.trow.is-duty .tr-res {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ember); opacity: 0.9;
}
.trow.is-duty.is-done .tr-res { color: inherit; opacity: 0.35; }

/* ------------------------------------------------------------- Feldansicht */

.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 0;
  margin-top: 2px;
}
.cgrid .phase-inline { grid-column: 1 / -1; }
.cgrid .match { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------- Anzeige

   Vollbild-Tafel fuer den Bildschirm in der Halle. Aus Distanz lesbar, also
   alles in vh statt in px: der Text waechst mit der Schirmhoehe mit, egal ob
   Laptop-Vorschau oder 65-Zoll-Fernseher. Dunkler Grund, weil die Tafel
   stundenlang laeuft und ein helles Vollbild im Saal blendet.               */

body.is-board { overflow: hidden; }
body.is-board > *:not(.board) { display: none !important; }

.board {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: var(--ink); color: var(--bone);
  font-size: clamp(12px, 1.6vh, 26px);
}
.board[hidden] { display: none; }

/* ---- Kopf ---- */
.bd-head {
  display: flex; align-items: baseline; gap: 2vw;
  padding: 2vh 2.4vw 1.6vh;
  border-bottom: 1px solid var(--line-d);
}
.bd-brand { display: flex; align-items: baseline; gap: 0.6vw; }
.bd-mark {
  font-family: var(--f-display); font-weight: 700;
  font-size: 3.4vh; line-height: 1; letter-spacing: 0.02em;
}
.bd-city {
  font-family: var(--f-mono); font-size: 1.5vh;
  letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.5;
}
.bd-title {
  margin: 0 auto 0 2vw;
  font-family: var(--f-display); font-weight: 700;
  font-size: 3.6vh; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--flame);
}
.bd-meta { display: flex; align-items: center; gap: 1.6vw; }
.bd-count {
  font-family: var(--f-mono); font-size: 1.5vh;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55;
}
.bd-dots { display: flex; gap: 0.6vh; }
.bd-dot {
  width: 1vh; height: 1vh; background: rgba(244, 239, 230, 0.25);
}
.bd-dot.is-on { background: var(--flame); }

/* ---- Rumpf ---- */
.bd-body {
  flex: 1; min-height: 0;
  padding: 2.2vh 2.4vw;
  display: flex; flex-direction: column; gap: 1.6vh;
}

.bd-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--bd-cols, 4), 1fr);
  gap: 0 2vw;
}
.bd-card { min-width: 0; display: flex; flex-direction: column; }
.bd-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8vw; padding-bottom: 0.9vh; margin-bottom: 1vh;
  border-bottom: 2px solid var(--flame);
}
.bd-card-head h3 {
  margin: 0;
  font-family: var(--f-display); font-weight: 700; font-size: 2.6vh;
  line-height: 1; text-transform: uppercase;
}
.bd-card-note {
  font-family: var(--f-mono); font-size: 1.3vh;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45;
}
.bd-pending {
  margin: 0; font-family: var(--f-mono); font-size: 1.4vh;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.35;
}

/* Zeilen fuellen die Hoehe: eine Tabelle mit fuenf Zeilen soll den Schirm
   genauso ausnutzen wie eine mit zehn. Die Obergrenze verhindert, dass die
   fuenf Zeilen auf einem 16:9-Schirm auseinanderfallen. */
.bd-rows {
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.bd-row {
  display: grid; grid-template-columns: 3vh 1fr auto auto;
  align-items: center; gap: 0.8vw;
  flex: 1 1 0; min-height: 0; max-height: 12vh;
  padding: 0.4vh 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.08);
}
.bd-rank {
  font-family: var(--f-mono); font-size: 1.9vh; opacity: 0.4;
  font-variant-numeric: tabular-nums;
}
/* Teamnamen duerfen umbrechen statt abzuschneiden: auf der Gruppentafel
   stehen fuenf Spalten nebeneinander, da passt "International Airballs" in
   keiner Schriftgroesse auf eine Zeile. Lieber zwei Zeilen als "Internation…"
   auf einem Bildschirm, an dem Leute ihren Teamnamen suchen.
   Die Groesse skaliert mit der Spaltenzahl (--bd-cols wird vererbt). */
.bd-name {
  font-size: clamp(1.9vh, calc(13vh / var(--bd-cols, 4)), 3vh);
  font-weight: 600; line-height: 1.08;
  overflow-wrap: anywhere; hyphens: auto;
}
.bd-pkt {
  font-family: var(--f-display); font-weight: 700; font-size: 3.6vh;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.bd-diff {
  font-family: var(--f-mono); font-size: 1.6vh; opacity: 0.45;
  font-variant-numeric: tabular-nums; min-width: 2.8vh; text-align: right;
}
.bd-block {
  font-family: var(--f-mono); font-size: 1.5vh; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.4;
}
.bd-row.is-top .bd-name { color: var(--flame); }
.bd-row.is-open .bd-name { opacity: 0.3; }

/* ---- Seite „Jetzt": die Felder nebeneinander ---- */
.bd-slot-time { display: flex; align-items: baseline; gap: 1.2vw; }
.bd-hhmm {
  font-family: var(--f-display); font-weight: 700;
  font-size: 7vh; line-height: 1; color: var(--flame);
  font-variant-numeric: tabular-nums;
}
.bd-livedot {
  font-family: var(--f-mono); font-size: 1.6vh;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--flame);
  animation: sl-blink 1.2s ease-in-out infinite;
}
.bd-courts {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--bd-cols, 5), 1fr);
  gap: 0 1.6vw;
}
.bd-court {
  display: flex; flex-direction: column; gap: 0.5vh;
  padding: 1.6vh 1.2vw 2.4vh;
  border-top: 2px solid var(--flame);
  background: rgba(244, 239, 230, 0.04);
}
.bd-court.is-u16 { border-top-color: var(--court-2, #16365f); background: rgba(244, 239, 230, 0.09); }
.bd-court-l {
  font-family: var(--f-mono); font-size: 1.5vh;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.bd-court-p {
  font-family: var(--f-mono); font-size: 1.2vh;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45;
  margin-bottom: 0.8vh;
}
/* Die beiden Mannschaftszeilen teilen sich die Resthoehe der Karte, damit
   der Spielstand aus der Distanz das Groesste auf dem Schirm ist. */
.bd-side {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8vw; padding: 0.6vh 0;
  border-top: 1px solid rgba(244, 239, 230, 0.08);
}
.bd-team {
  font-size: 2.8vh; font-weight: 600; line-height: 1.1;
  overflow-wrap: anywhere;
}
.bd-score {
  font-family: var(--f-display); font-weight: 700; font-size: 6vh;
  line-height: 1; font-variant-numeric: tabular-nums; opacity: 0.3;
  flex: none;
}
.bd-side.is-win .bd-team { color: var(--flame); }
.bd-side.is-win .bd-score { opacity: 1; color: var(--flame); }

/* ---- Fuss mit Fortschrittsbalken ---- */
.bd-foot {
  display: flex; align-items: center; gap: 1.6vw;
  padding: 1.2vh 2.4vw 1.6vh;
  border-top: 1px solid var(--line-d);
  font-family: var(--f-mono); font-size: 1.3vh;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.45;
}
.bd-bar { flex: 1; height: 0.4vh; background: rgba(244, 239, 230, 0.12); }
.bd-bar-fill { display: block; height: 100%; width: 0; background: var(--flame); }
body.is-paused .bd-bar-fill { background: rgba(244, 239, 230, 0.3); }
.bd-exit {
  font: inherit; letter-spacing: 0.16em;
  background: none; color: inherit; cursor: pointer;
  border: 1px solid var(--line-d); border-radius: 0;
  padding: 0.7vh 1.2vw;
}
.bd-exit:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .bd-livedot { animation: none; }
}

/* ------------------------------------------------- Format & Regeln, Fuss */

/* Zugeklappt: wer den Spielplan liest, kennt das Format meistens schon. */
.legend {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
}
.legend > summary {
  list-style: none; cursor: pointer;
  padding: 18px 0; min-height: 44px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6;
  transition: opacity 0.15s ease;
}
.legend > summary::-webkit-details-marker { display: none; }
.legend > summary::before {
  content: "+"; font-size: 14px; line-height: 1; opacity: 0.7;
}
.legend[open] > summary::before { content: "\2013"; }
.legend > summary:hover { opacity: 1; }
.legend-body { padding: 0 0 32px; max-width: 78ch; }
.legend dl { margin: 0; }
.legend dt {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 18px; opacity: 0.85;
}
.legend dt:first-child { margin-top: 0; }
.legend dd {
  margin: 5px 0 0; font-size: 13.5px; line-height: 1.6; opacity: 0.68;
}

.pagefoot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  max-width: var(--max); margin: 0 auto;
  padding: 20px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.pagefoot a {
  color: var(--ink); opacity: 0.55; text-decoration: none;
  padding: 6px 0; min-height: 30px; display: inline-flex; align-items: center;
}
.pagefoot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pagefoot span { opacity: 0.25; }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
  .trow { grid-template-columns: 58px 54px minmax(0, 1fr) 132px 64px; }
}

/* Ab hier kippt das Zeitraster von fünf Spalten auf gestapelte Karten. */
@media (max-width: 900px) {
  .slot { grid-template-columns: 1fr; }
  .slot-head { display: none; }
  .slot-time {
    flex-direction: row; align-items: baseline; gap: 10px;
    padding: 10px 12px; border-right: 0;
    background: var(--bone-2);
    position: sticky; top: var(--viewbar-h); z-index: 10;
  }
  .slot.is-live .slot-time { background: var(--flame); color: var(--ink); }
  .slot.is-live .slot-live { color: var(--ink); }
  .slot-cells { grid-auto-flow: row; grid-auto-columns: auto; }
  .cell { border-left: 0; border-top: 1px solid var(--line); }
  .cell:first-child { border-top: 0; }
  .cell.is-empty { display: none; }
  .slot-cells .m-court { display: inline; }
}

/* Tablet-Bereich: fünf Spalten sind zu eng, eine Spalte verschenkt die halbe
   Breite — die Spiele eines Slots stehen deshalb zu zweit nebeneinander. */
@media (min-width: 561px) and (max-width: 900px) {
  .slot-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .cell:nth-child(odd) { border-left: 0; }
  .cell:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 720px) {
  /* Spielzeile: Zeit + Gegner + Resultat oben, Feld und Runde darunter. */
  .trow {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "time  opp  res"
      "court pool pool";
    gap: 3px 10px;
    padding: 11px 0;
  }
  .tr-time { grid-area: time; }
  .tr-vs { grid-area: opp; }
  .tr-res { grid-area: res; }
  .tr-court { grid-area: court; }
  .tr-pool { grid-area: pool; }
  .tr-pre { display: none; }
  .tr-opp { font-size: 13.5px; white-space: normal; }
  .trow.is-live { box-shadow: none; outline: 1px solid var(--flame); outline-offset: -1px; }
  .tgrid { gap: 26px; }
  .toolbar { gap: 12px; padding: 16px 0 14px; }
  .admbar { justify-content: flex-start; }
  .admbar-txt { width: 100%; margin-right: 0; }
  /* Korbzahlen für und gegen sind auf dem Handy Ballast — Diff genügt. */
  .stand:not(.stand-rank) th:nth-child(6), .stand:not(.stand-rank) td:nth-child(6),
  .stand:not(.stand-rank) th:nth-child(7), .stand:not(.stand-rank) td:nth-child(7) { display: none; }
}

@media (max-width: 560px) {
  .view { padding-top: 4px; }
  /* Vier gleich breite Reiter statt einer Scrollleiste — auf 320px würde der
     vierte sonst unsichtbar rechts ausserhalb liegen. */
  .viewbar-inner { padding: 0; }
  .viewtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; overflow: visible; }
  .vtab { padding: 15px 2px 13px; font-size: 10px; letter-spacing: 0.06em; text-align: center; }
  .m-row { min-height: 28px; }
  button.m-name { padding: 7px 0; margin: -7px 0; }
  .phase { font-size: 21px; margin-top: 34px; }
  .thead { padding-top: 20px; }
  .statline { gap: 4px 14px; }
  .match { padding: 10px 12px 9px; }
  .m-name { font-size: 14px; }
  .m-score { font-size: 15px; }
  .chip { padding: 9px 11px; font-size: 10px; }
  .chip-team { font-size: 12.5px; }
  .legend-body { padding-bottom: 26px; }
  /* Gespielte Spiele und Siege passen nicht mehr neben Diff und Punkte. */
  .stand:not(.stand-rank) th:nth-child(3), .stand:not(.stand-rank) td:nth-child(3) { display: none; }
  .stand td, .stand th { padding: 8px 3px; }
  .st-name { font-size: 13px; }
  .c-pl { width: 20px; font-size: 11px; }
  .c-block { width: 52px; }
}

@media (max-width: 400px) {
  .minibar { padding-top: 10px; padding-bottom: 9px; }
  .statusline { font-size: 9.5px; letter-spacing: 0.05em; }
  .trow { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .tr-time { font-size: 12px; }
  .tr-res { font-size: 12.5px; }
  /* Niederlagen lassen sich aus Rang und Siegen ableiten. */
  .stand:not(.stand-rank) th:nth-child(5), .stand:not(.stand-rank) td:nth-child(5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-dot.is-live, .slot-live, .m-livedot { animation: none; }
  .viewbar, .slot-time { transition: none; }
}

/* Grobe Zeigegeräte: Tippziele nicht unter 44px, Hover-Effekte weglassen. */
@media (hover: none) {
  .match:hover, .match.is-u16:hover { background: inherit; }
  .chip, .vtab, .jump { -webkit-tap-highlight-color: rgba(255, 107, 26, 0.25); }
}

/* ------------------------------------------------------------------ Druck */

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .viewbar, .admbar-slot, .toolbar, .pagefoot, .m-adm, .back,
  .noscript { display: none !important; }
  .minibar { padding: 0 0 8px; max-width: none; }
  .legend { border: 0; padding: 0; }
  .legend > summary { display: none; }
  .nextgame { background: #fff !important; color: var(--ink); padding: 8px 0; }
  .ng-time { color: var(--ink); }
  .view { padding: 0; max-width: none; }
  body { font-size: 10px; }
  .slot, .trow, .tcard, .match { page-break-inside: avoid; }
  .match.is-final { background: #fff !important; color: var(--ink); }
  .match.is-final .m-score { color: var(--ink); }
  .slot-time { position: static; }
}