:root{ --bg:#0b1220; --panel:#131c2e; --line:#22304a; --ink:#f1f5f9; --muted:#93a3bb;
  --accent:#38bdf8; --green:#34d399; --amber:#fbbf24; }
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Arial,sans-serif;}
.tv-head{display:flex;align-items:baseline;justify-content:space-between;padding:22px 34px;border-bottom:1px solid var(--line);}
.tv-head h1{margin:0;font-size:34px;letter-spacing:.5px;}
.tv-head .t{font-size:22px;color:var(--accent);font-weight:700;}
.tv-head .clock{font-size:20px;color:var(--muted);}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:26px 34px;}
@media(max-width:900px){.grid{grid-template-columns:1fr;}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 24px;}
.card .board{font-size:18px;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;}
.match{display:flex;align-items:center;justify-content:space-between;}
.side{flex:1;}
.side .nm{font-size:30px;font-weight:700;}
.side .sub{font-size:16px;color:var(--muted);margin-top:2px;}
.score{font-size:60px;font-weight:800;min-width:140px;text-align:center;}
.vs{font-size:22px;color:var(--muted);padding:0 14px;}
.legs{display:inline-block;background:#1e293b;border-radius:8px;padding:2px 10px;font-size:18px;color:var(--green);margin-left:8px;}
.next-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:24px;}
.next-row:last-child{border-bottom:none;}
.next-row .b{color:var(--accent);font-weight:700;font-size:18px;min-width:110px;}
.next-row .w{color:var(--amber);font-size:18px;}
.waiting{padding:20px 34px;color:var(--muted);font-size:20px;}
.waiting span{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 14px;margin:4px;color:var(--ink);}
.empty{padding:clamp(16px,5.5vh,60px);text-align:center;color:var(--muted);font-size:clamp(16px,2.2vh,24px);}

/* ===== KOMPAKT (Auftrag Thomas 06.10.2026, Praxisbefund 05.10.2026) =====
   Die Flaeche eines Fernsehers hat keine Bedienung: was nicht hineinpasst, ist
   fuer die Zuschauer verloren. Bis dahin standen hier feste px-Groessen, und
   #content schnitt den Rest still ab (overflow:hidden). Seither richten sich
   Schrift, Zeilen, Abstaende und Kacheln an der verfuegbaren HOEHE aus -
   clamp(min, vh, max): die Obergrenze ist der bisherige Wert (auf 4K bleibt
   alles wie bisher), die Untergrenze haelt die Lesbarkeit, dazwischen skaliert
   es mit der Hoehe. Farben, Kopf und Aufbau sind unveraendert. Gemessen in
   tests/browser/design74_tv_kompakt.js (3840x2160 bis 1280x720). */

/* ===== TV Aufruf: Status-Bühne & Board-Kästchen ===== */
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;flex:1 1 auto;min-height:0;padding:clamp(8px,2.2vh,24px);}
.stage-title{font-size:clamp(40px,8.9vh,96px);font-weight:800;letter-spacing:2px;}
.stage-sub{font-size:clamp(18px,3.1vh,34px);color:var(--muted);margin-top:clamp(8px,1.7vh,18px);max-width:80%;}

.boards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;padding:26px 34px;}
.bcard{background:var(--panel);border:1px solid var(--line);border-top:6px solid var(--line);
  border-radius:16px;padding:18px 20px;min-height:180px;}
.bcard.live{border-top-color:var(--green);box-shadow:0 0 0 2px rgba(52,211,153,.25);}
.b-name{font-size:18px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.b-nogroup,.b-wait{color:var(--muted);font-size:22px;margin-top:24px;}
.b-group{font-size:30px;font-weight:800;margin-top:8px;}
.b-game{font-size:18px;color:var(--muted);margin-top:8px;}
.b-players{font-size:26px;font-weight:700;margin-top:4px;line-height:1.25;}
.b-players .vs{font-size:18px;color:var(--muted);padding:0 8px;}
.b-writer{font-size:18px;color:var(--amber);margin-top:8px;}
.b-live{margin-top:12px;color:var(--green);font-weight:700;font-size:20px;}
.b-call{margin-top:12px;color:var(--accent);font-weight:700;font-size:20px;}

/* ===== TV Aufruf: Gruppenliste (untere Hälfte) ===== */
.groups-title{font-size:22px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;
  padding:8px 34px 0;}
.groups-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;padding:14px 34px 30px;}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;}
.g-name{font-size:24px;font-weight:800;color:var(--accent);margin-bottom:8px;}
.g-players{margin:0;padding-left:26px;}
.g-players li{font-size:22px;line-height:1.5;}
.g-empty{color:var(--muted);font-size:18px;}

/* ===== Full-HD Safe-Area (Overscan) ===== */
body.tv{overflow:hidden;}
.tv .tv-safe{box-sizing:border-box;width:100vw;height:100vh;padding:2vh 2.4vw;display:flex;flex-direction:column;}
.tv .tv-head{border-bottom:1px solid var(--line);padding:0 0 clamp(6px,1.1vh,12px);margin-bottom:clamp(6px,1.3vh,14px);flex:0 0 auto;}
.tv .tv-head h1{font-size:clamp(26px,4.1vh,44px);} .tv .tv-head .t{font-size:clamp(18px,2.8vh,30px);} .tv .tv-head .clock{font-size:clamp(16px,2.4vh,26px);}
.tv .head-right{display:flex;align-items:baseline;gap:24px;}
.tv .page-ind{color:var(--accent);font-size:clamp(16px,2.2vh,24px);font-weight:800;}
.tv .head-right{display:flex;align-items:baseline;gap:20px;}
.tv #content{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;}

/* Aufruf: Board-Strip oben (gross) */
.call-strip{display:flex;gap:clamp(8px,1.3vh,14px);flex-wrap:wrap;margin-bottom:clamp(8px,1.5vh,16px);flex:0 0 auto;}
.call{flex:1 1 clamp(220px,16.7vw,320px);min-width:0;background:var(--panel);border:1px solid var(--line);border-left:7px solid var(--line);
  border-radius:12px;padding:clamp(6px,1.1vh,12px) clamp(10px,1vw,18px);display:flex;flex-direction:column;gap:clamp(2px,.4vh,4px);}
.call.live{border-left-color:var(--green);}
/* Rangfolge der Aufrufkarte: 1. Board, 2. Spielerpaarung, 3. Metadaten.
   Die Spielerzeile ist die Hauptinformation und deshalb die groesste und
   kontraststaerkste Zeile - sie war frueher klein und grau. */
.call .cb-row{display:flex;align-items:baseline;gap:10px;min-width:0;}
.call .cb{color:var(--accent);font-weight:800;font-size:clamp(14px,1.9vh,20px);text-transform:uppercase;letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call .cw{font-size:clamp(18px,min(2.1vw,3.5vh),38px);font-weight:800;color:var(--ink);line-height:1.15;
  white-space:normal;overflow-wrap:anywhere;}
.call .cw .vs{font-size:.62em;font-weight:700;color:var(--muted);font-style:normal;padding:0 .38em;
  text-transform:lowercase;letter-spacing:.5px;}
.call .cw.soon{font-size:clamp(16px,min(1.5vw,2.4vh),26px);font-weight:700;color:var(--muted);}
/* Freies Board: "frei" ist dort die Hauptinformation und bleibt gross. */
.call .cf{font-size:clamp(18px,min(2.1vw,3.5vh),38px);font-weight:800;color:var(--muted);}
/* Sekundaer: Gruppe/Training und Spielnummer, danach der Schreiber. */
.call .cg{font-size:clamp(13px,1.7vh,18px);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Ab vier Aufrufen etwas kompakter, damit der Strip nicht zu hoch wird. */
.call-strip.many .call{flex:1 1 clamp(180px,13.5vw,260px);padding:clamp(5px,.9vh,10px) clamp(8px,.8vw,14px);}
.call-strip.many .call .cw,.call-strip.many .call .cf{font-size:clamp(16px,min(1.45vw,2.6vh),28px);}
.call-strip.many .call .cb{font-size:clamp(13px,1.7vh,18px);}
.call-strip.many .call .cg{font-size:clamp(12px,1.5vh,16px);}

/* Aufruf: 2 Gruppen nebeneinander, gross */
.g-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:clamp(8px,1.7vh,18px);flex:1 1 auto;min-height:0;}
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(8px,1.7vh,18px) clamp(10px,1.2vw,22px);overflow:hidden;display:flex;flex-direction:column;min-height:0;}
.gcard .g-name{font-size:clamp(20px,3.3vh,36px);font-weight:800;color:var(--accent);margin-bottom:4px;}
.gcard .g-board{font-size:clamp(14px,2vh,22px);color:var(--green);font-weight:700;}
.gcard .g-sub{font-size:clamp(11px,1.5vh,16px);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:clamp(6px,1.3vh,14px) 0 4px;}
.g-table,.g-sched{width:100%;border-collapse:collapse;table-layout:fixed;}
.g-table th,.g-sched th{color:var(--muted);font-weight:700;font-size:clamp(11px,1.5vh,16px);text-transform:uppercase;text-align:center;padding:clamp(2px,.5vh,5px) 8px;border-bottom:2px solid var(--line);}
.g-table td,.g-sched td{text-align:center;padding:clamp(2px,.55vh,6px) 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:clamp(14px,2.2vh,24px);}
.g-table .l,.g-sched .l{text-align:left;}
.g-table td.l,.g-sched td.l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.g-table th:first-child{width:52%;} .g-table th:not(:first-child){width:12%;}
.g-sched th:nth-child(1){width:7%;} .g-sched th:nth-child(2){width:50%;}
.g-sched th:nth-child(3){width:28%;} .g-sched th:nth-child(4){width:15%;}
.g-table .pk{color:var(--green);font-weight:800;}
/* KOMPAKT: das "vs" im Spielplan erbte die 22 px der Live-Regel (.vs oben) und
   machte jede Spielplanzeile hoeher als die Tabellenzeile daneben. */
.g-sched .vs{color:var(--muted);font-size:.85em;padding:0 .45em;}
.badge{display:inline-block;border-radius:7px;padding:clamp(1px,.2vh,2px) clamp(6px,.6vw,12px);font-size:clamp(12px,1.7vh,18px);font-weight:700;}
.badge.offen{background:#1e293b;color:var(--muted);}
.badge.läuft{background:rgba(52,211,153,.18);color:var(--green);}
.badge.fertig{background:rgba(56,189,248,.15);color:var(--accent);}

/* ===== Genau EINE Trainingsgruppe: Tabelle und Spielplan nebeneinander =====
   Die Karte belegt die volle Breite und teilt sich innen in zwei Spalten.
   Beide Spalten sind eigene Flexspalten mit min-height:0 und overflow:hidden -
   dadurch waechst nichts ueber die TV-Flaeche hinaus, und ueberzaehlige Zeilen
   fallen unten aus dem Bild. Weil api/tv.php die Spiele bereits nach Status
   ordnet (laufend, offen, beendet), trifft das zuerst die beendeten Spiele. */
.g-grid.solo{grid-template-columns:1fr;}
.gcard.solo .g-name{font-size:clamp(20px,3.2vh,40px);}
.gcard.solo .g-split{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(14px,1.8vw,34px);flex:1 1 auto;min-height:0;}
.gcard.solo .g-col{display:flex;flex-direction:column;min-width:0;min-height:0;}
.gcard.solo .g-col .g-sub{margin-top:clamp(3px,.6vh,10px);flex:0 0 auto;}
.gcard.solo .g-body{flex:1 1 auto;min-height:0;overflow:hidden;}
/* KOMPAKT: Eine Trainingsgruppe mit sieben Spielern hat 21 Spiele. Damit Tabelle
   und Spielplan bei 1080 (19 px) und bei 720 CSS-Pixeln (12 px) ganz ins Bild
   passen, laufen die Zeilen hier enger als in den Gruppenkarten; ab 1440 wachsen
   sie wieder bis zum bisherigen Mass (26 px). */
.gcard.solo .g-table td,.gcard.solo .g-sched td{font-size:clamp(11.5px,1.75vh,26px);line-height:1.15;padding:clamp(0px,.35vh,7px) 8px;}
.gcard.solo .g-table th,.gcard.solo .g-sched th{font-size:clamp(10.5px,1.5vh,18px);line-height:1.15;padding:clamp(0px,.3vh,5px) 8px;}
.gcard.solo .badge{font-size:clamp(10.5px,1.6vh,20px);line-height:1.2;padding:clamp(0px,.15vh,2px) clamp(5px,.5vw,12px);}
/* SCREEN-02 (Entscheid Thomas 07.10.2026): Fallen Spielplanzeilen weg, steht als letzte
   sichtbare Zeile "+ N weitere Spiele" (assets/tv_spielplan_hinweis.js). Schrift und Abstand
   erbt sie von den Spielplanzeilen, nur gedaempft und ohne Trennlinie darunter. */
.g-sched tr.sched-mehr td{color:var(--muted);text-align:left;border-bottom:0;}

/* Live: Spieler-Subzeile */
.side .meta{font-size:clamp(12px,1.5vh,16px);color:var(--muted);margin-top:4px;}
.side .meta b{color:var(--ink);font-weight:700;}

/* Live: mitwachsende Kacheln, max. 3 nebeneinander; Kopf-an-Kopf (wie Bild).
   KOMPAKT: die Mindestbreite einer Kachel haengt an der Breite der Flaeche -
   bei 1280 px standen die sechs Kacheln sonst in EINER Spalte uebereinander. */
.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(400px,34vw,720px),1fr));gap:clamp(8px,1.7vh,18px);align-content:start;}
.live-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(8px,1.5vh,16px) clamp(12px,1.2vw,22px);overflow:hidden;}
.live-card .board{font-size:clamp(14px,1.9vh,20px);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:clamp(4px,.75vh,8px);}
.live-card .match{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.live-card .side{flex:1;min-width:0;}
.live-card .side.r{text-align:right;}
.live-card .nm{font-size:clamp(20px,3.2vh,34px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.live-card .meta{font-size:clamp(14px,2vh,22px);color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.live-card .meta b{color:var(--ink);font-weight:800;}
.live-card .sc{flex:0 0 auto;text-align:center;}
.live-card .score{font-size:clamp(36px,5.8vh,62px);font-weight:800;line-height:1;}
.live-card .sub{font-size:clamp(12px,1.5vh,16px);color:var(--muted);margin-top:4px;}

/* Dauerhafter QR-Code (führt auf die mobile Zuschauerseite) */
.qr-box{position:fixed;right:1.4vw;bottom:1.4vh;background:#fff;border-radius:10px;padding:7px 7px 4px;
  text-align:center;z-index:20;box-shadow:0 4px 18px rgba(0,0,0,.5);text-decoration:none;}
.qr-box img{display:block;width:104px;height:104px;}
.qr-box .cap{color:#0b1220;font-size:11px;font-weight:800;margin-top:3px;letter-spacing:.3px;}
/* KOMPAKT (06.10.2026): Bei 1920x1080 und kleiner - Breite hoechstens 1920 ODER
   Hoehe hoechstens 1080 CSS-Pixel - ist der QR-Code ausgeblendet; im Lokal haengt
   er ausgedruckt an der Wand. Das Element und sein Link bleiben im Dokument. */
@media (max-width:1920px), (max-height:1080px){ .qr-box{display:none;} }

/* ===== TV: KO-Baum ===== */
.cwr{display:block;font-size:clamp(12px,1.5vh,16px);color:var(--muted);margin-top:2px;}
.ko-tv-title{font-size:clamp(20px,2.8vh,30px);font-weight:800;padding:clamp(6px,1.3vh,14px) 4px clamp(3px,.6vh,6px);}
.ko-tv-grid{display:flex;gap:22px;overflow-x:auto;padding-bottom:8px;}
.ko-tv-col{min-width:420px;display:flex;flex-direction:column;gap:18px;justify-content:space-around;}
.ko-tv-h{font-size:22px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:1px;text-align:center;}
.ko-tv-m{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;}
.ko-tv-m.running{border-color:var(--green);box-shadow:0 0 0 2px rgba(52,211,153,.25);}
.ko-tv-m.finished{opacity:.75;}
.ko-tv-vs{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:30px;font-weight:800;}
.ko-tv-vs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ko-tv-vs .vs{font-size:20px;color:var(--muted);font-weight:400;flex:0 0 auto;padding:0 8px;}
.ko-tv-meta{font-size:18px;color:var(--muted);margin-top:8px;}
.ko-tv-badge{display:inline-block;border-radius:6px;padding:1px 8px;font-size:15px;font-weight:700;}
.ko-tv-badge.pending{background:rgba(147,163,187,.2);color:var(--muted);}
.ko-tv-badge.running{background:rgba(52,211,153,.2);color:var(--green);}
.ko-tv-badge.finished{background:rgba(56,189,248,.2);color:var(--accent);}