Live-Ergebnisse: Stream-Seite, Anzeige, automatischer Mapwechsel

- Stream-Übersicht unter /stream/<Zuschauercode> (1920x1080, Lobby, Veto, Spielstand)
- Live-Stand, Rundenverlauf und Serienstand auf Match-Seite und Übersicht
- Parser mit echten AMP-Logs geprüft: Game Over mit leerer Map-Gruppe,
  Match_Start vor der Aufwärmphase, veraltete Seitenzuordnung nach der Halbzeit
- Nach Map-Ende automatisch nächste Map bzw. Abschluss der entschiedenen Serie
- LOG_DEBUG zur Fehlersuche, README und .env.example ergänzt

client/src/App.jsx

@@ -4,9 +4,20 @@ import { api } from './lib/api.js';
 import Overview from './pages/Overview.jsx';
 import CreateMatch from './pages/CreateMatch.jsx';
 import MatchPage from './pages/MatchPage.jsx';
+import StreamPage from './pages/StreamPage.jsx';
 import { JoinPage, WatchPage } from './pages/AccessPages.jsx';
 
 export default function App() {
+  return (
+    <Routes>
+      {/* Stream-Übersicht ohne Kopfzeile, als Vollbild bzw. OBS-Browserquelle */}
+      <Route path="/stream/:code" element={<StreamPage />} />
+      <Route path="*" element={<MainLayout />} />
+    </Routes>
+  );
+}
+
+function MainLayout() {
   const [config, setConfig] = useState(null);
   const [configError, setConfigError] = useState(null);
 

client/src/components/OrganizerPanel.jsx

@@ -25,6 +25,12 @@ export default function OrganizerPanel({ state, act, busy, matchId, token }) {
             {open && <button className="link-btn" disabled={!!busy} onClick={() => regen(key, label)}>Neuer Code</button>}
           </div>
           <CopyField value={links[key]} />
+          {key === 'spectator' && (
+            <div className="stream-link">
+              <CopyField label="Stream-Übersicht (als Browserquelle in OBS, 1920×1080)" value={links.stream} />
+              <a className="btn btn-sm" href={links.stream} target="_blank" rel="noreferrer">Stream-Ansicht öffnen</a>
+            </div>
+          )}
         </div>
       ))}
       <details className="org-link">

client/src/components/RoundStrip.jsx

@@ -0,0 +1,53 @@
+// Rundenverlauf einer Map: ein Feld pro Runde in der Farbe des Siegerteams,
+// mit Symbol für den Grund. Nach der Halbzeit (und jeder Verlängerungshälfte) ein Trenner.
+
+export const REASON_LABEL = {
+  bomb: 'Bombe explodiert',
+  defuse: 'Bombe entschärft',
+  time: 'Zeit abgelaufen',
+  elimination: 'Alle ausgeschaltet',
+  surrender: 'Aufgegeben',
+  other: 'Runde gewonnen',
+};
+
+export function ReasonIcon({ reason, size = 12 }) {
+  const common = { width: size, height: size, viewBox: '0 0 16 16', 'aria-hidden': true, className: 'reason-icon' };
+  switch (reason) {
+    case 'bomb':
+      return (
+        <svg {...common}><circle cx="7" cy="9.5" r="5" fill="currentColor" /><path d="M10.5 5.5 13 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /><circle cx="13.6" cy="2.4" r="1.4" fill="currentColor" /></svg>
+      );
+    case 'defuse':
+      return (
+        <svg {...common}><path d="M3 13 9.5 6.5M6.5 3.5 12.5 9.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /><circle cx="11.5" cy="4.5" r="2.5" fill="none" stroke="currentColor" strokeWidth="1.8" /></svg>
+      );
+    case 'time':
+      return (
+        <svg {...common}><circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="1.8" /><path d="M8 4.5V8l2.5 1.8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
+      );
+    case 'elimination':
+      return (
+        <svg {...common}><circle cx="8" cy="8" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M8 1v4M8 11v4M1 8h4M11 8h4" stroke="currentColor" strokeWidth="1.6" /></svg>
+      );
+    default:
+      return <svg {...common}><circle cx="8" cy="8" r="3" fill="currentColor" /></svg>;
+  }
+}
+
+export default function RoundStrip({ rounds = [], maxRounds = 24, teams, size = 'md' }) {
+  const half = maxRounds / 2;
+  const total = Math.max(rounds.length, maxRounds);
+  const cells = [];
+  for (let i = 1; i <= total; i++) {
+    const r = rounds.find((x) => x.number === i);
+    const breakBefore = i > 1 && (i - 1 === half || (i - 1 > maxRounds && (i - 1 - maxRounds) % 3 === 0));
+    cells.push(
+      <li key={i}
+        className={`round ${r ? `won-${r.winner}` : 'open'} ${breakBefore ? 'break' : ''}`}
+        title={r ? `Runde ${i}: ${teams[r.winner].name} (${REASON_LABEL[r.reason] ?? ''})` : `Runde ${i}`}>
+        {r ? <ReasonIcon reason={r.reason} /> : null}
+      </li>,
+    );
+  }
+  return <ol className={`round-strip round-strip-${size}`} aria-label="Rundenverlauf">{cells}</ol>;
+}

client/src/components/SeriesList.jsx

@@ -1,5 +1,6 @@
 import MapImage from './MapImage.jsx';
 import SideIcon from './SideIcon.jsx';
+import RoundStrip from './RoundStrip.jsx';
 
 const STATUS = { pending: 'Ausstehend', next: 'Wird eingerichtet', live: 'Aktuell', done: 'Gespielt' };
 
@@ -13,11 +14,26 @@ export default function SeriesList({ state }) {
           const map = state.maps.find((m) => m.id === s.map);
           const ct = s.ctTeam ? teams[s.ctTeam].name : null;
           const t = s.ctTeam ? teams[s.ctTeam === 'A' ? 'B' : 'A'].name : null;
+          const isLive = s.live?.status === 'live' && s.status !== 'done';
+          const hasScore = s.live && (s.live.rounds.length > 0 || s.status === 'done');
           return (
-            <li key={s.number} className={`series-item is-${s.status}`} style={{ '--map': map?.color ?? '#556' }}>
+            <li key={s.number} className={`series-item is-${s.status} ${isLive ? 'is-playing' : ''}`} style={{ '--map': map?.color ?? '#556' }}>
               <MapImage map={map} className="series-art" />
               <span className="series-no">Map {s.number}</span>
               <strong className="series-map">{s.mapName}</strong>
+              <span className="series-status">
+                {isLive ? <span className="live-badge">Live</span> : STATUS[s.status]}
+              </span>
+              {hasScore && (
+                <span className="series-score" aria-label={`${teams.A.name} ${s.score.A} zu ${s.score.B} ${teams.B.name}`}>
+                  <span className={`team-a ${s.winner === 'A' ? 'is-winner' : ''}`}>{s.score.A}</span>
+                  <span className="colon">:</span>
+                  <span className={`team-b ${s.winner === 'B' ? 'is-winner' : ''}`}>{s.score.B}</span>
+                  {s.status === 'done' && (
+                    <small>{s.winner ? `${teams[s.winner].name} gewinnt` : 'Unentschieden'}</small>
+                  )}
+                </span>
+              )}
               <span className="series-origin">
                 {s.pickedBy ? `Pick von ${teams[s.pickedBy].name}` : 'Entscheidungsmap'}
               </span>
@@ -29,7 +45,11 @@ export default function SeriesList({ state }) {
                   </>
                 ) : 'Seiten im Spiel festlegen'}
               </span>
-              <span className="series-status">{STATUS[s.status]}</span>
+              {hasScore && (
+                <div className="series-rounds">
+                  <RoundStrip rounds={s.live.rounds} maxRounds={state.maxRounds} teams={teams} size="sm" />
+                </div>
+              )}
             </li>
           );
         })}

client/src/components/ServerPanel.jsx

@@ -10,6 +10,32 @@ const RETRY = {
 };
 const ACTIVE = ['starting', 'ready', 'configuring', 'configured', 'config_failed', 'failed'];
 
+/** Zeigt dem Organisator, ob Live-Daten vom Server ankommen und ob die Map vorbei ist. */
+function LiveDataStatus({ state, hasNext }) {
+  const current = state.series.find((s) => s.number === state.currentMapNumber);
+  if (!current) return null;
+  const updatedAt = current.live?.updatedAt;
+  if (current.status === 'done') {
+    const auto = state.autoAdvanceSeconds >= 0;
+    return (
+      <div className="alert alert-ok">
+        Map {current.number} ist beendet.{' '}
+        {auto
+          ? (hasNext ? `Die nächste Map wird nach ${state.autoAdvanceSeconds} s automatisch geladen, sofern die Serie nicht entschieden ist.` : 'Das Match wird automatisch abgeschlossen.')
+          : (hasNext ? 'Lade jetzt die nächste Map.' : 'Das war die letzte Map – schließ das Match ab.')}
+      </div>
+    );
+  }
+  return (
+    <p className="small live-data">
+      <span className={`status-dot ${updatedAt ? 'tone-ok' : 'tone-muted'}`} />
+      {updatedAt
+        ? `Live-Daten vom Server empfangen, zuletzt um ${new Date(updatedAt).toLocaleTimeString('de-DE')}.`
+        : 'Noch keine Live-Daten. Sie kommen, sobald die Aufwärmphase endet und der Server diese Webseite erreicht (LOG_RECEIVER_URL).'}
+    </p>
+  );
+}
+
 export default function ServerPanel({ state, isOrg, act, busy }) {
   const { server } = state;
   const label = serverLabel(server);
@@ -63,6 +89,8 @@ export default function ServerPanel({ state, isOrg, act, busy }) {
         <p className="small muted">CSTV ist auf diesem Server deaktiviert.</p>
       )}
 
+      {isOrg && server?.status === 'configured' && <LiveDataStatus state={state} hasNext={hasNext} />}
+
       {isOrg && server && !closed && (
         <div className="org-controls">
           {canRetry && (

client/src/pages/MatchPage.jsx

@@ -106,7 +106,13 @@ export default function MatchPage() {
         <div className="versus">
           <h1>
             <span className="team-a">{state.teams.A.name}</span>
-            <span className="vs">vs.</span>
+            {state.series.length > 1 ? (
+              <span className="series-total" title="Serienstand (gewonnene Maps)">
+                {state.seriesScore.A}<span className="colon">:</span>{state.seriesScore.B}
+              </span>
+            ) : (
+              <span className="vs">vs.</span>
+            )}
             <span className="team-b">{state.teams.B.name}</span>
           </h1>
         </div>

client/src/pages/Overview.jsx

@@ -54,10 +54,19 @@ function MatchRow({ match: m }) {
       <Link to={`/m/${m.id}`} className="match-row">
         <div className="match-row-teams">
           <span className="team-a">{m.teamA}</span>
-          <span className="vs">vs.</span>
+          {m.seriesScore && m.format !== 'bo1' ? (
+            <span className="row-score" title="Serienstand">{m.seriesScore.A}:{m.seriesScore.B}</span>
+          ) : (
+            <span className="vs">vs.</span>
+          )}
           <span className="team-b">{m.teamB}</span>
         </div>
         <div className="match-row-meta">
+          {m.currentMap && (
+            <span className={m.currentMap.finished ? '' : 'row-live'}>
+              {m.currentMap.finished ? '' : <span className="live-badge">Live</span>} {m.currentMap.name} {m.currentMap.score.A}:{m.currentMap.score.B}
+            </span>
+          )}
           <span>{m.modeLabel}</span>
           <span>{FORMAT_LABEL[m.format]}</span>
           {m.group === 'open' && <span>{m.players.A + m.players.B}/{m.players.teamSize * 2} Spieler</span>}

client/src/pages/StreamPage.jsx

@@ -0,0 +1,278 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { api } from '../lib/api.js';
+import { FORMAT_LABEL } from '../lib/labels.js';
+import { useMatch } from '../lib/useMatch.js';
+import MapImage from '../components/MapImage.jsx';
+import SideIcon from '../components/SideIcon.jsx';
+import RoundStrip from '../components/RoundStrip.jsx';
+import '../stream.css';
+
+const STAGE_W = 1920;
+const STAGE_H = 1080;
+
+/**
+ * Vollbild-Übersicht für den Stream: /stream/<Zuschauercode>
+ * Optional ?bg=transparent für eine transparente OBS-Browserquelle.
+ */
+export default function StreamPage() {
+  const { code } = useParams();
+  const [matchId, setMatchId] = useState(null);
+  const [error, setError] = useState(null);
+  const transparent = new URLSearchParams(window.location.search).get('bg') === 'transparent';
+
+  useEffect(() => {
+    api('/access', { method: 'POST', body: { code } })
+      .then((info) => {
+        if (info.access !== 'spectator') throw new Error('Für die Stream-Ansicht wird der Zuschauercode benötigt.');
+        setMatchId(info.matchId);
+      })
+      .catch((e) => setError(e.message));
+  }, [code]);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('stream-transparent', transparent);
+    document.documentElement.classList.add('stream-mode');
+    return () => document.documentElement.classList.remove('stream-mode', 'stream-transparent');
+  }, [transparent]);
+
+  return (
+    <ScaledStage>
+      {error ? <StreamMessage title="Stream-Ansicht nicht verfügbar" text={error} />
+        : matchId ? <StreamContent matchId={matchId} code={code} />
+          : <StreamMessage title="Verbinde …" />}
+    </ScaledStage>
+  );
+}
+
+/** Feste 1920×1080-Bühne, auf die Fenstergröße skaliert. */
+function ScaledStage({ children }) {
+  const ref = useRef(null);
+  const [scale, setScale] = useState(1);
+  useLayoutEffect(() => {
+    const fit = () => setScale(Math.min(window.innerWidth / STAGE_W, window.innerHeight / STAGE_H));
+    fit();
+    window.addEventListener('resize', fit);
+    return () => window.removeEventListener('resize', fit);
+  }, []);
+  return (
+    <div className="stream-viewport">
+      <div ref={ref} className="stream-stage" style={{ width: STAGE_W, height: STAGE_H, transform: `translate(-50%, -50%) scale(${scale})` }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function StreamMessage({ title, text }) {
+  return (
+    <div className="st-message">
+      <img src="/brand/maxlan-logo.webp" alt="MaxLAN e.V." />
+      <h1>{title}</h1>
+      {text && <p>{text}</p>}
+    </div>
+  );
+}
+
+function useClock() {
+  const [now, setNow] = useState(() => new Date());
+  useEffect(() => {
+    const t = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(t);
+  }, []);
+  return now;
+}
+
+function StreamContent({ matchId, code }) {
+  const { state, connected } = useMatch(matchId, code);
+  const now = useClock();
+  if (!state) return <StreamMessage title="Lade Match …" />;
+
+  const { teams } = state;
+  const current = state.series.find((s) => s.number === state.currentMapNumber);
+  const playing = current?.live?.status === 'live' && current.status !== 'done';
+  const phase = state.status === 'lobby' ? 'lobby' : state.status === 'veto' ? 'veto' : 'match';
+  const showSeries = state.series.length > 1;
+  // Im Laufband nur, was Zuschauer interessiert – keine technischen Servermeldungen
+  const tickerEvent = state.events.find((e) => ['veto', 'score', 'series', 'join', 'captain', 'status'].includes(e.type));
+
+  return (
+    <div className={`st-root phase-${phase} ${phase !== 'lobby' && state.series.length > 0 ? 'has-maps' : 'no-maps'}`}>
+      <header className="st-top">
+        <img className="st-logo" src="/brand/maxlan-logo.webp" alt="MaxLAN e.V." />
+        <div className="st-meta">
+          <span>Counter-Strike 2</span>
+          <span>{state.modeLabel}</span>
+          <span>{FORMAT_LABEL[state.format]}</span>
+        </div>
+        <div className="st-clock">
+          {playing && <span className="st-live">Live</span>}
+          {!connected && connected !== null && <span className="st-offline">Verbindung …</span>}
+          <time>{now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}</time>
+        </div>
+      </header>
+
+      <section className="st-hero">
+        <div className="st-team st-team-a">
+          <h1>{teams.A.name}</h1>
+        </div>
+        <div className="st-center">
+          <span className="st-slash" aria-hidden="true" />
+          {showSeries && phase === 'match' ? (
+            <div className="st-series" aria-label="Serienstand">
+              <span className="a">{state.seriesScore.A}</span>
+              <span className="sep">–</span>
+              <span className="b">{state.seriesScore.B}</span>
+              <small>Maps</small>
+            </div>
+          ) : (
+            <div className="st-vs">vs</div>
+          )}
+        </div>
+        <div className="st-team st-team-b">
+          <h1>{teams.B.name}</h1>
+        </div>
+      </section>
+
+      <section className="st-main">
+        {phase === 'lobby' && <LobbyScene state={state} />}
+        {phase === 'veto' && <VetoScene state={state} />}
+        {phase === 'match' && <MatchScene state={state} current={current} />}
+      </section>
+
+      {phase !== 'lobby' && state.series.length > 0 && (
+        <section className="st-maps">
+          {state.series.map((s) => <SeriesCard key={s.number} s={s} state={state} />)}
+        </section>
+      )}
+
+      <footer className="st-ticker">
+        <span className="st-ticker-label">{phaseLabel(state)}</span>
+        <span className="st-ticker-text" key={tickerEvent?.at}>{tickerEvent?.message ?? 'Warten auf die Teams'}</span>
+      </footer>
+    </div>
+  );
+}
+
+function phaseLabel(state) {
+  if (state.status === 'lobby') return 'Lobby';
+  if (state.status === 'veto') return 'Map-Veto';
+  if (state.status === 'finished') return 'Endstand';
+  if (state.status === 'cancelled') return 'Abgebrochen';
+  return 'Match';
+}
+
+function LobbyScene({ state }) {
+  return (
+    <div className="st-lobby">
+      {['A', 'B'].map((key) => {
+        const team = state.teams[key];
+        return (
+          <div key={key} className={`st-roster st-roster-${key}`}>
+            <h2>{team.readiness.ready ? 'Bereit' : `${team.readiness.count} / ${team.teamSize} Spieler`}</h2>
+            <ul>
+              {team.players.map((p) => (
+                <li key={p.id} className={p.ready ? 'is-ready' : ''}>
+                  <span>{p.nickname}</span>
+                  {p.isCaptain && <em>Captain</em>}
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      })}
+      <div className="st-lobby-note">Das Map-Veto beginnt gleich</div>
+    </div>
+  );
+}
+
+function VetoScene({ state }) {
+  const { veto, teams } = state;
+  const current = veto?.current;
+  const mapsById = Object.fromEntries(state.maps.map((m) => [m.id, m]));
+  const action = current && ({ ban: 'bannt', pick: 'wählt', side: 'wählt die Startseite auf' })[current.type];
+  return (
+    <div className="st-veto">
+      {current && (
+        <div className={`st-turn st-turn-${current.team}`}>
+          <strong>{teams[current.team].name}</strong> {action}
+          {current.type === 'side' ? ` ${mapsById[current.map]?.name}` : ' eine Map'}
+        </div>
+      )}
+      <div className="st-veto-grid" style={{ '--count': veto.maps.length }}>
+        {veto.maps.map((m) => (
+          <div key={m.id} className={`st-vmap status-${m.status} ${m.by ? `by-${m.by}` : ''} ${current?.map === m.id ? 'is-side' : ''}`}>
+            <MapImage map={mapsById[m.id]} />
+            <span className="st-vmap-name">{mapsById[m.id]?.name}</span>
+            <span className="st-vmap-status">
+              {m.status === 'banned' && `Bann ${teams[m.by].name}`}
+              {m.status === 'picked' && `Pick ${teams[m.by].name}`}
+              {m.status === 'decider' && 'Decider'}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MatchScene({ state, current }) {
+  const { teams } = state;
+  if (!current) return <div className="st-waiting">Server wird vorbereitet</div>;
+  const map = state.maps.find((m) => m.id === current.map);
+  const live = current.live;
+  const sides = live?.sides ?? (current.ctTeam ? { CT: current.ctTeam, T: current.ctTeam === 'A' ? 'B' : 'A' } : null);
+  const sideOf = (team) => (sides ? (sides.CT === team ? 'CT' : 'T') : null);
+  const finished = current.status === 'done';
+  const waiting = !live || live.status === 'warmup';
+
+  return (
+    <div className="st-board" style={{ '--map': map?.color ?? '#556' }}>
+      <MapImage map={map} className="st-board-art" />
+      <div className="st-board-head">
+        <span>Map {current.number}{state.series.length > 1 ? ` von ${state.series.length}` : ''}</span>
+        <strong>{current.mapName}</strong>
+        <span className="st-board-state">{finished ? 'Endstand' : waiting ? 'Aufwärmphase' : `Runde ${(live?.rounds.length ?? 0) + 1}`}</span>
+      </div>
+      <div className="st-score">
+        <div className={`st-score-team a ${current.winner === 'A' ? 'won' : ''}`}>
+          {sideOf('A') && <SideIcon side={sideOf('A')} size={64} />}
+          <span className="num">{current.score.A}</span>
+        </div>
+        <span className="st-score-colon">:</span>
+        <div className={`st-score-team b ${current.winner === 'B' ? 'won' : ''}`}>
+          <span className="num">{current.score.B}</span>
+          {sideOf('B') && <SideIcon side={sideOf('B')} size={64} />}
+        </div>
+      </div>
+      {finished && current.winner && <div className="st-winner">{teams[current.winner].name} gewinnt {current.mapName}</div>}
+      <div className="st-rounds">
+        <RoundStrip rounds={live?.rounds ?? []} maxRounds={state.maxRounds} teams={teams} size="lg" />
+      </div>
+    </div>
+  );
+}
+
+function SeriesCard({ s, state }) {
+  const map = state.maps.find((m) => m.id === s.map);
+  const isCurrent = s.number === state.currentMapNumber && state.status === 'live';
+  const playing = isCurrent && s.live?.status === 'live' && s.status !== 'done';
+  return (
+    <div className={`st-mapcard is-${s.status} ${playing ? 'is-playing' : ''}`} style={{ '--map': map?.color ?? '#556' }}>
+      <MapImage map={map} />
+      <span className="st-mapcard-no">Map {s.number}</span>
+      <strong>{s.mapName}</strong>
+      <span className="st-mapcard-foot">
+        {s.status === 'done' || playing ? (
+          <span className="st-mapcard-score">
+            <b className={s.winner === 'A' ? 'won a' : 'a'}>{s.score.A}</b>
+            <i>:</i>
+            <b className={s.winner === 'B' ? 'won b' : 'b'}>{s.score.B}</b>
+          </span>
+        ) : (
+          <span className="st-mapcard-origin">{s.pickedBy ? `Pick ${state.teams[s.pickedBy].name}` : 'Decider'}</span>
+        )}
+      </span>
+    </div>
+  );
+}

client/src/stream.css

@@ -0,0 +1,167 @@
+/* ---------- Stream-Übersicht (1920×1080, skaliert) ---------- */
+html.stream-mode, html.stream-mode body { background: #000; overflow: hidden; height: 100%; }
+html.stream-mode.stream-transparent, html.stream-mode.stream-transparent body { background: transparent; }
+
+.stream-viewport { position: fixed; inset: 0; overflow: hidden; }
+.stream-stage { position: absolute; left: 50%; top: 50%; transform-origin: center center; }
+
+.st-root {
+  position: relative; width: 100%; height: 100%; overflow: hidden;
+  display: grid; grid-template-rows: 104px 260px 1fr 190px 60px;
+  padding: 0 72px; color: var(--text); font-family: var(--body);
+  background:
+    radial-gradient(900px 600px at 0% 30%, rgba(52, 74, 153, .28), transparent 70%),
+    radial-gradient(900px 600px at 100% 30%, rgba(167, 42, 28, .26), transparent 70%),
+    #000;
+}
+.stream-transparent .st-root { background: transparent; }
+/* Ohne Map-Leiste (Lobby, Veto) bekommt die Hauptfläche den Platz */
+.st-root.no-maps { grid-template-rows: 104px 260px 1fr 60px; }
+.phase-veto .st-veto-grid { align-items: stretch; }
+.phase-veto .st-vmap { min-height: 420px; }
+
+/* Kopfzeile */
+.st-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 3px solid var(--brand-red); }
+.st-logo { height: 58px; width: auto; }
+.st-meta { display: flex; gap: 28px; font: 600 26px var(--display); color: var(--muted); }
+.st-meta span + span { padding-left: 28px; border-left: 2px solid var(--line-strong); }
+.st-clock { justify-self: end; display: flex; align-items: center; gap: 22px; font: 600 30px var(--display); font-variant-numeric: tabular-nums; }
+.st-live {
+  display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 12px; border-radius: 4px;
+  background: var(--brand-red); color: #fff; font: 700 24px var(--display);
+}
+.st-live::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: st-blink 1.4s ease-in-out infinite; }
+.st-offline { color: var(--pending); font-size: 22px; }
+@keyframes st-blink { 50% { opacity: .25; } }
+
+/* Teams und Serienstand */
+.st-hero { display: grid; grid-template-columns: 1fr 380px 1fr; align-items: center; }
+.st-team h1 {
+  margin: 0; font: 700 108px/0.95 var(--display); letter-spacing: -.01em;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
+}
+.st-team-a { text-align: right; }
+.st-team-a h1 { color: var(--team-a); }
+.st-team-b h1 { color: var(--team-b); }
+.st-center { position: relative; display: grid; place-items: center; height: 100%; }
+/* Das rote X aus dem Logo als diagonaler Schnitt */
+.st-slash {
+  position: absolute; width: 34px; height: 230px; background: var(--brand-red); transform: rotate(18deg);
+  border-radius: 6px; box-shadow: 0 0 60px rgba(167, 42, 28, .55); opacity: .9;
+}
+.st-series { position: relative; display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 0 34px; text-shadow: 0 4px 24px #000; }
+.st-series span { font: 700 150px/1 var(--display); font-variant-numeric: tabular-nums; }
+.st-series .a { text-align: right; color: var(--team-a); }
+.st-series .b { color: var(--team-b); }
+/* Der rote Schrägstrich übernimmt die Trennung zwischen den Ziffern */
+.st-series .sep { visibility: hidden; }
+.st-series small { grid-column: 1 / -1; text-align: center; font: 600 24px var(--display); color: var(--muted); margin-top: -6px; }
+.st-vs { position: relative; font: 700 84px var(--display); color: #fff; text-shadow: 0 4px 30px #000; }
+
+.st-main { min-height: 0; padding: 18px 0 24px; }
+
+/* Lobby */
+.st-lobby { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 24px 80px; height: 100%; }
+.st-roster { padding: 30px 40px; background: rgba(17, 20, 30, .82); border-top: 6px solid var(--team-a); border-radius: 8px; }
+.st-roster-B { border-top-color: var(--team-b); }
+.st-roster h2 { font: 600 36px var(--display); color: var(--muted); margin-bottom: 18px; }
+.st-roster ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
+.st-roster li { display: flex; align-items: baseline; gap: 16px; font: 600 44px var(--display); color: var(--muted); }
+.st-roster li.is-ready { color: var(--text); }
+.st-roster li.is-ready::after { content: 'bereit'; font: 500 24px var(--body); color: var(--ok); }
+.st-roster em { font: 500 22px var(--body); font-style: normal; color: var(--pending); }
+.st-lobby-note { grid-column: 1 / -1; text-align: center; font: 600 34px var(--display); color: var(--muted); }
+
+/* Veto */
+.st-veto { display: grid; grid-template-rows: auto 1fr; gap: 26px; height: 100%; }
+.st-turn {
+  justify-self: center; padding: 14px 40px; font: 600 40px var(--display); border-radius: 6px;
+  background: rgba(17, 20, 30, .85); border-left: 8px solid var(--team-a);
+}
+.st-turn-B { border-left-color: var(--team-b); }
+.st-turn strong { color: var(--team-a); }
+.st-turn-B strong { color: var(--team-b); }
+.st-veto-grid { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
+.st-vmap { --by: var(--line-strong); position: relative; overflow: hidden; border-radius: 6px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; min-height: 0; }
+.st-vmap.by-A { --by: var(--team-a); }
+.st-vmap.by-B { --by: var(--team-b); }
+.st-vmap .map-art::after { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .9)); }
+.st-vmap-name, .st-vmap-status { position: relative; z-index: 2; }
+.st-vmap-name { font: 700 46px/1 var(--display); text-shadow: 0 2px 12px #000; }
+.st-vmap-status { font: 600 24px var(--display); color: var(--by); margin-top: 6px; min-height: 30px; }
+.st-vmap.status-banned { filter: grayscale(.95) brightness(.5); }
+.st-vmap.status-banned::after {
+  content: ''; position: absolute; inset: 0; z-index: 3;
+  background: linear-gradient(to top right, transparent calc(50% - 5px), var(--by) calc(50% - 5px), var(--by) calc(50% + 5px), transparent calc(50% + 5px));
+}
+.st-vmap.status-picked::before, .st-vmap.status-decider::before, .st-vmap.is-side::before {
+  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 6px; box-shadow: inset 0 0 0 6px var(--by);
+}
+.st-vmap.status-decider { --by: #fff; }
+.st-vmap.is-side::before { animation: st-side 1.6s ease-in-out infinite; }
+@keyframes st-side { 50% { box-shadow: inset 0 0 0 6px var(--pending); } }
+
+/* Spielstand der aktuellen Map */
+.st-board {
+  position: relative; overflow: hidden; height: 100%; border-radius: 10px;
+  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; padding: 26px 48px 30px;
+  background: rgba(17, 20, 30, .7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06);
+}
+.st-board-art { opacity: .38; }
+.st-board-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .85)); }
+.st-board > :not(.st-board-art) { position: relative; z-index: 1; }
+.st-board-head { display: flex; align-items: baseline; gap: 26px; font: 600 30px var(--display); color: var(--muted); }
+.st-board-head strong { font: 700 56px var(--display); color: var(--text); }
+.st-board-state { color: var(--pending); }
+.st-score { display: flex; align-items: center; gap: 40px; }
+.st-score-team { display: flex; align-items: center; gap: 28px; }
+.st-score .num { font: 700 230px/0.9 var(--display); font-variant-numeric: tabular-nums; min-width: 2ch; }
+.st-score-team.a .num { color: var(--team-a); text-align: right; }
+.st-score-team.b .num { color: var(--team-b); }
+.st-score-team.won .num { text-shadow: 0 0 40px currentColor; }
+.st-score-colon { font: 700 120px var(--display); color: var(--muted); }
+.st-score .side-icon { filter: drop-shadow(0 4px 16px #000); }
+.st-winner { font: 700 40px var(--display); color: var(--ok); margin-bottom: 8px; }
+.st-rounds { width: 100%; display: flex; justify-content: center; }
+.st-waiting { display: grid; place-items: center; height: 100%; font: 600 48px var(--display); color: var(--muted); }
+
+/* Map-Leiste */
+.st-maps { display: flex; gap: 18px; padding-bottom: 16px; }
+.st-mapcard {
+  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 8px;
+  display: grid; align-content: end; padding: 14px 20px; border-bottom: 6px solid var(--map);
+}
+.st-mapcard .map-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .9)); }
+.st-mapcard > :not(.map-art) { position: relative; z-index: 1; }
+.st-mapcard-no { font: 600 22px var(--display); color: var(--muted); }
+.st-mapcard strong { font: 700 40px/1.05 var(--display); }
+.st-mapcard-foot { font: 600 26px var(--display); color: var(--muted); min-height: 36px; }
+.st-mapcard-score { display: inline-flex; gap: 10px; align-items: baseline; font-size: 38px; }
+.st-mapcard-score b { font-weight: 700; color: var(--muted); }
+.st-mapcard-score b.won.a { color: var(--team-a); }
+.st-mapcard-score b.won.b { color: var(--team-b); }
+.st-mapcard.is-playing .st-mapcard-score b.a { color: var(--team-a); }
+.st-mapcard.is-playing .st-mapcard-score b.b { color: var(--team-b); }
+.st-mapcard.is-pending, .st-mapcard.is-next { opacity: .65; }
+.st-mapcard.is-playing { box-shadow: 0 0 0 4px var(--brand-red), 0 0 40px rgba(167, 42, 28, .5); }
+
+/* Laufband */
+.st-ticker { display: flex; align-items: stretch; margin: 0 -72px; background: #05060a; border-top: 2px solid var(--line); }
+.st-ticker-label { display: flex; align-items: center; padding: 0 30px 0 72px; background: var(--brand-red); color: #fff; font: 700 26px var(--display); }
+.st-ticker-text { display: flex; align-items: center; padding: 0 30px; font: 500 26px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: st-in .5s ease-out; }
+@keyframes st-in { from { opacity: 0; transform: translateY(8px); } }
+
+.st-message { display: grid; place-items: center; align-content: center; gap: 24px; height: 100%; text-align: center; background: #000; }
+.st-message img { height: 90px; }
+.st-message h1 { font: 700 64px var(--display); margin: 0; }
+.st-message p { font-size: 28px; color: var(--muted); }
+
+/* Große Rundenleiste */
+.round-strip-lg { gap: 6px; }
+.round-strip-lg .round { width: 50px; height: 50px; border-radius: 5px; }
+.round-strip-lg .round.break { margin-left: 22px; }
+.round-strip-lg .reason-icon { width: 24px; height: 24px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .st-live::before, .st-vmap.is-side::before, .st-ticker-text { animation: none; }
+}

client/src/styles.css

@@ -443,3 +443,43 @@ input:focus, select:focus { border-color: var(--link); outline: none; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; }
 }
+
+/* ---------- Live-Ergebnisse ---------- */
+.live-badge {
+  display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border-radius: 3px;
+  background: var(--brand-red); color: #fff; font: 700 .8125rem var(--display); vertical-align: middle;
+}
+.live-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
+.series-total { font-variant-numeric: tabular-nums; color: var(--text); }
+.series-total .colon, .series-score .colon { color: var(--muted); margin: 0 .12em; }
+.row-score { font: 700 1.375rem var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
+.row-live { color: var(--text); }
+
+.series-score {
+  grid-column: 3; grid-row: 2 / 4; align-self: center; justify-self: end; text-align: right;
+  font: 700 2.25rem/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
+}
+.series-score small { display: block; font: 500 .8125rem var(--body); color: var(--muted); margin-top: 4px; }
+.series-score .is-winner { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
+.series-rounds { grid-column: 1 / -1; margin-top: 10px; overflow-x: auto; }
+.series-item.is-playing { box-shadow: inset 0 0 0 2px var(--brand-red); }
+
+.round-strip { list-style: none; display: flex; gap: 3px; padding: 0; margin: 0; }
+.round {
+  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 3px;
+  background: var(--surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--line);
+}
+.round.won-A { background: var(--team-a); box-shadow: none; }
+.round.won-B { background: var(--team-b); box-shadow: none; }
+.round.break { margin-left: 10px; }
+.round-strip-sm .round { width: 18px; height: 18px; }
+.round-strip-sm .reason-icon { width: 10px; height: 10px; }
+.round-strip-sm .round.break { margin-left: 8px; }
+
+.alert-ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
+.live-data { display: flex; align-items: center; gap: 8px; color: var(--muted); }
+.stream-link { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
+.stream-link .copy-field { width: 100%; }
+@media (max-width: 640px) {
+  .series-score { grid-column: 2; grid-row: 2; font-size: 1.75rem; }
+}