init localize

app/[locale]/components/Bracket.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useMemo, useState, useCallback } from "react";
+import { GroupTable, Match, Team, ThirdPlaceRow } from "@/lib/types";
+import { ThirdAssignment, orderedRound } from "@/lib/bracket";
+import { resolveBracket, ResolvedSide, ResolvedTie } from "@/lib/resolve-bracket";
+import { STADIUMS, MATCH_STADIUMS, MATCH_DATES } from "@/lib/stadiums";
+import Flag from "./Flag";
+
+interface TipState { x: number; y: number; text: string }
+
+function Side({
+  s, prob, teams, onShowTip, onHideTip,
+}: {
+  s: ResolvedSide; prob?: number | null; teams: Team[];
+  onShowTip: (text: string, x: number, y: number) => void;
+  onHideTip: () => void;
+}) {
+  const team = s.teamId ? teams.find((t) => t.id === s.teamId) : undefined;
+  const fix = s.teamId != null && !s.provisional;
+  const hasTip = !!s.tooltip;
+
+  return (
+    <div
+      className={`side ${s.isWinner ? "win" : ""} ${s.provisional ? "prov" : ""} ${fix ? "fix" : ""}`}
+      {...(hasTip ? {
+        onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => onShowTip(s.tooltip!, e.clientX, e.clientY),
+        onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => onShowTip(s.tooltip!, e.clientX, e.clientY),
+        onMouseLeave: onHideTip,
+      } : {})}
+    >
+      <span className="nm">
+        {s.teamId ? (
+          <>
+            <Flag team={team} size={18} />
+            <span className="tn">{s.label}</span>
+            {s.provisional && <span className="prov-mark" title="vorläufig – Gruppe/Zuordnung noch nicht fix">≈</span>}
+          </>
+        ) : (
+          <span className="lbl">{s.label}</span>
+        )}
+        {prob != null && prob > 0 && (
+          <span className="prob">{Math.round(prob * 100)}%</span>
+        )}
+      </span>
+      <span className="sc">{s.score != null ? s.score : "–"}</span>
+    </div>
+  );
+}
+
+function fmtMatchInfo(utcDate?: string, stadiumId?: string): string {
+  if (!utcDate) return "";
+  const d = new Date(utcDate);
+  const dateStr = d.toLocaleDateString("de-DE", { day: "numeric", month: "numeric" });
+  const timeStr = d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+  const city = stadiumId ? STADIUMS[stadiumId]?.city : "";
+  const parts = [`${dateStr}`, `${timeStr}`];
+  if (city) parts.push(city);
+  return parts.join(" ");
+}
+
+function Tie({
+  tie, teams, isFinal, matchInfo, onShowTip, onHideTip,
+}: {
+  tie: ResolvedTie; teams: Team[]; isFinal?: boolean;
+  matchInfo?: string;
+  onShowTip: (text: string, x: number, y: number) => void;
+  onHideTip: () => void;
+}) {
+  return (
+    <div className={`tie ${isFinal ? "final-tie" : ""}`}>
+      <div className="match-badge">{tie.matchNumber}</div>
+      <div className="tie-meta">
+        {matchInfo || `Spiel ${tie.matchNumber}`}
+      </div>
+      <Side s={tie.home} prob={tie.prob?.home} teams={teams} onShowTip={onShowTip} onHideTip={onHideTip} />
+      <Side s={tie.away} prob={tie.prob?.away} teams={teams} onShowTip={onShowTip} onHideTip={onHideTip} />
+      {tie.homePenalty != null && tie.awayPenalty != null && (
+        <div className="tie-meta" style={{ padding: "2px 10px 4px", textAlign: "center" }}>
+          ({tie.homePenalty}:{tie.awayPenalty} i.E.)
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function Bracket({
+  matches, teams, tables, thirds, assignment, annexResolved,
+  preResolved,
+}: {
+  matches: Match[]; teams: Team[]; tables: GroupTable[];
+  thirds: ThirdPlaceRow[]; assignment: ThirdAssignment | null; annexResolved: boolean;
+  preResolved?: { r32: ResolvedTie[]; later: Record<number, ResolvedTie> };
+}) {
+  const { r32: r32Array, later } = preResolved ?? resolveBracket(
+    matches, teams, tables, thirds, assignment, annexResolved,
+  );
+
+  const r32ByNum = new Map(r32Array.map((t) => [t.matchNumber, t]));
+
+  // Slot-Nummer → formatierte Anzeige (Datum/Uhrzeit aus MATCH_DATES, Stadt aus MATCH_STADIUMS)
+  const matchMeta = useMemo(() => {
+    const meta = new Map<number, string>();
+    for (let n = 73; n <= 104; n++) {
+      const utcDate = MATCH_DATES[n];
+      const stadiumId = MATCH_STADIUMS[n];
+      const info = fmtMatchInfo(utcDate, stadiumId);
+      if (info) meta.set(n, info);
+    }
+    return meta;
+  }, []);
+
+  const sfOrder = orderedRound([104]);
+  const qfOrder = orderedRound(sfOrder);
+  const r16Order = orderedRound(qfOrder);
+  const r32Order = orderedRound(r16Order);
+
+  const r32 = r32Order.map((n) => r32ByNum.get(n)).filter(Boolean) as ResolvedTie[];
+  const r16 = r16Order.map((n) => later[n]).filter(Boolean);
+  const qf = qfOrder.map((n) => later[n]).filter(Boolean);
+  const sf = sfOrder.map((n) => later[n]).filter(Boolean);
+  const fin = later[104];
+  const third = later[103];
+
+  const [tip, setTip] = useState<TipState | null>(null);
+  const showTip = useCallback((text: string, x: number, y: number) => setTip({ x, y, text }), []);
+  const hideTip = useCallback(() => setTip(null), []);
+
+  return (
+    <div>
+      <div className="bracket-banner">
+        <span className="k">Annex-C-Zuordnung der Drittplatzierten:</span>
+        <span className="v">
+          {annexResolved
+            ? "aufgelöst — die acht Dritten sind den Gruppensiegern fest zugeteilt"
+            : "noch offen — sobald die 8 besten Dritten feststehen, verbindet sich der Baum automatisch"}
+        </span>
+      </div>
+
+      <div className="bracket-scroll">
+        <div className="bracket">
+          <div className="round">
+            <div className="round-label">Letzte 32</div>
+            <div className="round-matches">
+              {r32.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} matchInfo={matchMeta.get(t.matchNumber)} onShowTip={showTip} onHideTip={hideTip} />)}
+            </div>
+          </div>
+          <div className="round">
+            <div className="round-label">Achtelfinale</div>
+            <div className="round-matches">
+              {r16.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} matchInfo={matchMeta.get(t.matchNumber)} onShowTip={showTip} onHideTip={hideTip} />)}
+            </div>
+          </div>
+          <div className="round">
+            <div className="round-label">Viertelfinale</div>
+            <div className="round-matches">
+              {qf.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} matchInfo={matchMeta.get(t.matchNumber)} onShowTip={showTip} onHideTip={hideTip} />)}
+            </div>
+          </div>
+          <div className="round">
+            <div className="round-label">Halbfinale</div>
+            <div className="round-matches">
+              {sf.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} matchInfo={matchMeta.get(t.matchNumber)} onShowTip={showTip} onHideTip={hideTip} />)}
+            </div>
+          </div>
+          <div className="round">
+            <div className="round-label">Finale</div>
+            <div className="round-matches">
+              {fin && <Tie tie={fin} teams={teams} isFinal matchInfo={matchMeta.get(fin.matchNumber)} onShowTip={showTip} onHideTip={hideTip} />}
+              {third && (
+                <div style={{ marginTop: 20 }}>
+                  <div className="round-label" style={{ marginBottom: 8 }}>Spiel um Platz 3</div>
+                  <Tie tie={third} teams={teams} matchInfo={matchMeta.get(third.matchNumber)} onShowTip={showTip} onHideTip={hideTip} />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="legend">
+        <span><i style={{ background: "var(--turf)" }} />Sieger / weiter</span>
+        <span><i style={{ background: "var(--gold)" }} />Finale</span>
+        <span><i className="leg-fix" />fix qualifiziert</span>
+        <span><i className="leg-prov" />vorläufig (≈, nach aktueller Tabelle)</span>
+        <span><i style={{ background: "var(--ink-faint)" }} />Platzhalter offen</span>
+        <span>%-Werte: Polymarket-Wahrscheinlichkeit (falls verfügbar)</span>
+      </div>
+
+      {tip && (
+        <div className="kobaum-tip" style={{ left: tip.x + 12, top: tip.y + 12 }}>
+          {tip.text}
+        </div>
+      )}
+    </div>
+  );
+}

app/[locale]/components/Fixtures.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { GROUP_IDS, GroupId, Match, Team } from "@/lib/types";
+import { computeGroupTables } from "@/lib/standings";
+import Flag from "./Flag";
+
+function teamById(teams: Team[], id: string | null) {
+  return id ? teams.find((t) => t.id === id) : undefined;
+}
+
+// Kürzel der lokalen Browser-Zeitzone, z.B. "MEZ"/"GMT+1" – einmal ermittelt.
+const TZ_LABEL = (() => {
+  try {
+    const parts = new Intl.DateTimeFormat("de-DE", { timeZoneName: "short" })
+      .formatToParts(new Date());
+    return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
+  } catch {
+    return "";
+  }
+})();
+
+function fmtDate(iso: string): string {
+  const d = new Date(iso);
+  const s = d.toLocaleString("de-DE", {
+    weekday: "short", day: "2-digit", month: "2-digit",
+    hour: "2-digit", minute: "2-digit",
+  });
+  return TZ_LABEL ? `${s} ${TZ_LABEL}` : s;
+}
+
+function statusText(m: Match): { text: string; live: boolean } {
+  switch (m.status) {
+    case "LIVE":
+    case "IN_PLAY":
+      return { text: m.minute != null ? `${m.minute}'` : "läuft", live: true };
+    case "PAUSED":
+      return { text: "Halbzeit", live: true };
+    case "FINISHED":
+      return { text: "Beendet", live: false };
+    default:
+      return { text: fmtDate(m.utcDate), live: false };
+  }
+}
+
+// Mitte: Ergebnis (wenn vorhanden) oder ein schlichtes "–" bei ungespielten
+// Spielen. Datum/Uhrzeit steht bereits links im Status und wird hier NICHT
+// wiederholt.
+function ScoreCell({ m }: { m: Match }) {
+  const hasScore = m.homeScore != null && m.awayScore != null;
+  const st = statusText(m);
+  if (hasScore) {
+    return (
+      <span className={`fx-score ${st.live ? "score-live" : ""}`}>
+        {m.homeScore} : {m.awayScore}
+      </span>
+    );
+  }
+  return <span className="fx-vs">–</span>;
+}
+
+function GroupStandings({
+  group, teams, matches,
+}: { group: GroupId; teams: Team[]; matches: Match[] }) {
+  // Live-Tabelle: laufende Spiele werden mit Zwischenstand eingerechnet.
+  const table = computeGroupTables(teams, matches, true).find((t) => t.group === group);
+  if (!table) return null;
+
+  // Teams, die gerade ein laufendes Spiel haben -> Zeile markieren.
+  const liveTeamIds = new Set<string>();
+  let hasLive = false;
+  for (const m of matches) {
+    if (m.group !== group) continue;
+    if (m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED") {
+      hasLive = true;
+      if (m.homeTeamId) liveTeamIds.add(m.homeTeamId);
+      if (m.awayTeamId) liveTeamIds.add(m.awayTeamId);
+    }
+  }
+
+  return (
+    <div className="fx-standings">
+      <div className="fx-standings-title">
+        Tabelle – Gruppe {group}
+        {hasLive && <span className="fx-standings-live">● LIVE</span>}
+      </div>
+      <table className="standings">
+        <thead>
+          <tr>
+            <th className="team">Mannschaft</th>
+            <th>Sp</th><th>S</th><th>U</th><th>N</th>
+            <th>Tore</th><th>±</th><th>Pkt</th>
+          </tr>
+        </thead>
+        <tbody>
+          {table.rows.map((r) => {
+            const team = teamById(teams, r.teamId);
+            const cls = r.rank <= 2 ? `q${r.rank}` : r.rank === 3 ? "q3" : "";
+            const isLive = liveTeamIds.has(r.teamId);
+            return (
+              <tr key={r.teamId} className={isLive ? "row-live" : ""}>
+                <td className="team">
+                  <span className={`rankdot ${cls}`}>{r.rank}</span>
+                  <Flag team={team} size={20} />
+                  <span className="team-name">{team?.localisedName ?? team?.name ?? r.teamId}</span>
+                  {isLive && <span className="row-live-dot" title="läuft gerade" />}
+                </td>
+                <td>{r.played}</td>
+                <td>{r.won}</td>
+                <td>{r.drawn}</td>
+                <td>{r.lost}</td>
+                <td>{r.goalsFor}:{r.goalsAgainst}</td>
+                <td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
+                <td className="pts">{r.points}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default function Fixtures({
+  group, teams, matches, onSelectGroup,
+}: {
+  group: GroupId; teams: Team[]; matches: Match[];
+  onSelectGroup: (g: GroupId) => void;
+}) {
+  const list = matches
+    .filter((m) => m.group === group)
+    .sort((a, b) => +new Date(a.utcDate) - +new Date(b.utcDate));
+
+  return (
+    <div>
+      <div className="grp-switch">
+        {GROUP_IDS.map((g) => (
+          <button
+            key={g}
+            className={`grp-chip ${g === group ? "active" : ""}`}
+            onClick={() => onSelectGroup(g)}
+          >
+            {g}
+          </button>
+        ))}
+      </div>
+
+      {list.length === 0 ? (
+        <div className="notice">Für Gruppe {group} liegen noch keine Spiele im Feed vor.</div>
+      ) : (
+        <div className="fixtures">
+          {list.map((m) => {
+            const home = teamById(teams, m.homeTeamId);
+            const away = teamById(teams, m.awayTeamId);
+            const st = statusText(m);
+            const homeWin = m.homeScore != null && m.awayScore != null && m.homeScore > m.awayScore;
+            const awayWin = m.homeScore != null && m.awayScore != null && m.awayScore > m.homeScore;
+            return (
+              <div className={`fx ${st.live ? "fx-live" : ""}`} key={m.id}>
+                <div className="fx-status">
+                  {st.live && <span className="dot live" />}
+                  <span>{st.text}</span>
+                </div>
+                <div className="fx-teams">
+                  <div className={`fx-team home ${homeWin ? "win" : ""}`}>
+                    <Flag team={home} size={22} />
+                    <span className="fx-name">{home?.localisedName ?? home?.name ?? "—"}</span>
+                  </div>
+                  <ScoreCell m={m} />
+                  <div className={`fx-team away ${awayWin ? "win" : ""}`}>
+                    <Flag team={away} size={22} />
+                    <span className="fx-name">{away?.localisedName ?? away?.name ?? "—"}</span>
+                  </div>
+                </div>
+                <div className="fx-meta">
+                  {m.venue && <span className="fx-venue">📍 {m.venue}</span>}
+                  {m.attendance != null && (
+                    <span className="fx-att">👥 {m.attendance.toLocaleString("de-DE")}</span>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {list.length > 0 && (
+        <GroupStandings group={group} teams={teams} matches={matches} />
+      )}
+    </div>
+  );
+}

app/[locale]/components/Flag.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { Team } from "@/lib/types";
+
+// Zeigt die Flagge/das Wappen eines Teams. Fällt auf ein neutrales Rund
+// zurück, wenn keine crest-URL vorliegt oder das Bild nicht geladen werden kann.
+export default function Flag({
+  team, size = 22,
+}: { team?: Team; size?: number }) {
+  const [imgFailed, setImgFailed] = useState(false);
+  const style = { width: size, height: size } as const;
+
+  if (team?.crest && !imgFailed) {
+    return (
+      <img
+        src={team.crest}
+        alt={team.code || team.localisedName || team.name}
+        className="flag"
+        style={style}
+        loading="lazy"
+        onError={() => setImgFailed(true)}
+      />
+    );
+  }
+  // Fallback: Kreis mit Ländercode
+  return (
+    <span className="flag flag-fallback" style={style} aria-hidden>
+      {team?.code?.slice(0, 2) || "··"}
+    </span>
+  );
+}

app/[locale]/components/Groups.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { GroupId, GroupTable, Match, Team } from "@/lib/types";
+import Flag from "./Flag";
+
+function teamById(teams: Team[], id: string) {
+  return teams.find((t) => t.id === id);
+}
+
+function liveMatchFor(group: string, matches: Match[]) {
+  return matches.find(
+    (m) => m.group === group && (m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED"),
+  );
+}
+
+function liveTeamIdsFor(group: GroupId, matches: Match[]): Set<string> {
+  const ids = new Set<string>();
+  for (const m of matches) {
+    if (m.group !== group) continue;
+    if (m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED") {
+      if (m.homeTeamId) ids.add(m.homeTeamId);
+      if (m.awayTeamId) ids.add(m.awayTeamId);
+    }
+  }
+  return ids;
+}
+
+export default function Groups({
+  tables, teams, matches, onOpenGroup,
+}: {
+  tables: GroupTable[]; teams: Team[]; matches: Match[];
+  onOpenGroup: (g: GroupId) => void;
+}) {
+  return (
+    <div className="group-grid">
+      {tables.map((t) => {
+        const live = liveMatchFor(t.group, matches);
+        const liveIds = liveTeamIdsFor(t.group, matches);
+        const groupMatches = matches.filter((m) => m.group === t.group);
+        const groupComplete = groupMatches.length > 0 && groupMatches.every((m) => m.status === "FINISHED");
+        return (
+          <div className="group-card" key={t.group}>
+            <button
+              className="group-head group-head-btn"
+              onClick={() => onOpenGroup(t.group)}
+              title={`Spiele der Gruppe ${t.group} ansehen`}
+            >
+              <span className={`group-name${groupComplete ? " group-complete" : ""}`}>Gruppe {t.group}</span>
+              <span className="group-tag">
+                {live ? "● LIVE" : "Spiele ansehen →"}
+              </span>
+            </button>
+            <table className="standings">
+              <thead>
+                <tr>
+                  <th className="team">Mannschaft</th>
+                  <th>Sp</th><th>S</th><th>U</th><th>N</th>
+                  <th>Tore</th><th>±</th><th>Pkt</th>
+                </tr>
+              </thead>
+              <tbody>
+                {t.rows.map((r) => {
+                  const team = teamById(teams, r.teamId);
+                  const cls = r.rank <= 2 ? `q${r.rank}` : r.rank === 3 ? "q3" : "";
+                  const isLive = liveIds.has(r.teamId);
+                  return (
+                    <tr key={r.teamId} className={isLive ? "row-live" : ""}>
+                      <td className="team">
+                        <span className={`rankdot ${cls}`}>{r.rank}</span>
+                        <Flag team={team} size={20} />
+                        <span className="team-name">{team?.localisedName ?? team?.name ?? r.teamId}</span>
+                        {isLive && <span className="row-live-dot" title="läuft gerade" />}
+                      </td>
+                      <td>{r.played}</td>
+                      <td>{r.won}</td>
+                      <td>{r.drawn}</td>
+                      <td>{r.lost}</td>
+                      <td>{r.goalsFor}:{r.goalsAgainst}</td>
+                      <td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
+                      <td className="pts">{r.points}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

app/[locale]/components/KoFixtures.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import { useMemo, useState, useEffect, useRef } from "react";
+import { Match, Team } from "@/lib/types";
+import { STADIUMS, MATCH_STADIUMS } from "@/lib/stadiums";
+import Flag from "./Flag";
+
+function fmtShortDate(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("de-DE", { weekday: "short", day: "2-digit", month: "2-digit" });
+}
+
+function fmtTime(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" });
+}
+
+function scoreDisplay(m: Match): string {
+  if (m.status === "SCHEDULED" || m.status === "POSTPONED" || (m.homeScore == null && m.awayScore == null)) return "– : –";
+  const base = `${m.homeScore ?? 0} : ${m.awayScore ?? 0}`;
+  if (m.homePenalty != null && m.awayPenalty != null) {
+    return `${base} (${m.homePenalty}:${m.awayPenalty} i.E.)`;
+  }
+  return base;
+}
+
+function statusLabel(m: Match): string {
+  switch (m.status) {
+    case "LIVE": case "IN_PLAY": return m.minute != null ? `${m.minute}'` : "Live";
+    case "PAUSED": return "Halbzeit";
+    case "POSTPONED": return "Verzögert";
+    case "FINISHED": return "Beendet";
+    default: return fmtTime(m.utcDate);
+  }
+}
+
+function isLive(m: Match): boolean {
+  return m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED";
+}
+
+export default function KoFixtures({ teams, matches }: { teams: Team[]; matches: Match[] }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
+
+  const koMatches = useMemo(() => {
+    return matches
+      .filter((m) =>
+        m.group == null &&
+        m.homeTeamId != null && m.awayTeamId != null &&
+        // Nur Spiele mit bekannten Teams (keine TBD)
+        teams.some(t => t.id === m.homeTeamId) &&
+        teams.some(t => t.id === m.awayTeamId),
+      )
+      .sort((a, b) => +new Date(a.utcDate) - +new Date(b.utcDate));
+  }, [matches, teams]);
+
+  // Lokale Datums-Extraktion (vermeidet UTC-Tagesverschiebung bei US-Spielen)
+  function localDateKey(iso: string): string {
+    const d = new Date(iso);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  }
+
+  // Nach Datum gruppieren (lokale Zeitzone nach Hydration, sonst UTC)
+  const groups = useMemo(() => {
+    const map = new Map<string, Match[]>();
+    for (const m of koMatches) {
+      const key = mounted ? localDateKey(m.utcDate) : m.utcDate.slice(0, 10);
+      if (!map.has(key)) map.set(key, []);
+      map.get(key)!.push(m);
+    }
+    return [...map.entries()];
+  }, [koMatches, mounted]);
+
+  const targetMatchId = useMemo(() => {
+    const live = koMatches.find(m => isLive(m));
+    if (live) return live.id;
+    const upcoming = koMatches.find(m => m.status !== "FINISHED");
+    return upcoming?.id ?? null;
+  }, [koMatches]);
+
+  const targetRef = useRef<HTMLDivElement>(null);
+  const hasScrolledRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!mounted || !targetRef.current) return;
+    if (targetMatchId === hasScrolledRef.current) return;
+    const el = targetRef.current;
+    const raf = requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect();
+      const absoluteTop = rect.top + window.scrollY;
+      const offset = 180;
+      window.scrollTo({ top: Math.max(0, absoluteTop - offset), behavior: "smooth" });
+    });
+    hasScrolledRef.current = targetMatchId;
+    return () => cancelAnimationFrame(raf);
+  }, [mounted, targetMatchId, koMatches.length]);
+
+  const [showScrollTop, setShowScrollTop] = useState(false);
+  useEffect(() => {
+    const onScroll = () => setShowScrollTop(window.scrollY > 100);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  if (koMatches.length === 0) {
+    return <div className="notice">Keine K.o.-Spiele mit bekannten Teams verfügbar.</div>;
+  }
+
+  return (
+    <>
+      <div>
+        {groups.map(([date, groupMatches]) => (
+        <div key={date} style={{ marginBottom: 24 }}>
+          <h3 style={{
+            fontFamily: "var(--font-display)", fontSize: 13,
+            textTransform: "uppercase", letterSpacing: "0.06em",
+            color: "var(--ink-dim)", margin: "0 0 10px",
+          }}>
+            {fmtShortDate(groupMatches[0].utcDate)}
+          </h3>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {groupMatches.map((m) => {
+              const home = m.homeTeamId ? teams.find(t => t.id === m.homeTeamId) : undefined;
+              const away = m.awayTeamId ? teams.find(t => t.id === m.awayTeamId) : undefined;
+              const live = isLive(m);
+              const stageMap: Record<string, string> = {
+                R32: "R32", R16: "Achtelfinale", QF: "Viertelfinale",
+                SF: "Halbfinale", "3RD": "Platz 3", FINAL: "Finale",
+              };
+
+              const city = STADIUMS[MATCH_STADIUMS[m.matchNumber]]?.city;
+              const isTarget = String(m.id) === String(targetMatchId);
+              const finished = m.status === "FINISHED";
+
+              return (
+                <div
+                  key={m.id}
+                  ref={isTarget ? targetRef : undefined}
+                  style={{
+                    background: "var(--bg-card)",
+                    border: `${isTarget ? 2 : 1}px solid ${live ? "var(--turf)" : isTarget ? "var(--turf)" : "var(--line-soft)"}`,
+                    borderRadius: "var(--radius-sm)", padding: "12px 14px",
+                    opacity: finished && !isTarget ? 0.65 : 1,
+                    boxShadow: isTarget ? "0 0 0 1px var(--turf)" : undefined,
+                  }}
+                >
+                  {/* Kopfzeile */}
+                  <div style={{
+                    display: "flex", justifyContent: "space-between", alignItems: "center",
+                    marginBottom: 8, fontSize: 11,
+                    fontFamily: "var(--font-mono)", color: "var(--ink-faint)",
+                  }}>
+                    <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      {isTarget && (
+                        <span style={{
+                          background: live ? "var(--turf)" : "var(--turf-deep)",
+                          color: "#fff", fontSize: 9, fontWeight: 700,
+                          padding: "1px 6px", borderRadius: 999,
+                          letterSpacing: "0.04em",
+                        }}>
+                          {live ? "LIVE" : "NÄCHSTES SPIEL"}
+                        </span>
+                      )}
+                      {m.status === "POSTPONED" && (
+                        <span style={{
+                          background: "var(--ink-faint)", color: "#fff",
+                          fontSize: 9, fontWeight: 700,
+                          padding: "1px 6px", borderRadius: 999,
+                          letterSpacing: "0.04em",
+                        }}>
+                          VERZÖGERT
+                        </span>
+                      )}
+                      {stageMap[m.stage] ?? m.stage} · Spiel {m.matchNumber || "—"}
+                      {city ? ` · ${city}` : ""}
+                    </span>
+                    <span style={{ color: live ? "var(--turf)" : undefined, fontWeight: live ? 700 : undefined }}>
+                      {statusLabel(m)}
+                    </span>
+                  </div>
+
+                  {/* Teams + Score */}
+                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                    <TeamLabel team={home} />
+                    <span style={{
+                      fontFamily: "var(--font-mono)", fontSize: 22, fontWeight: 700,
+                      color: live ? "var(--turf)" : "var(--ink)",
+                      padding: "0 16px",
+                    }}>
+                      {scoreDisplay(m)}
+                    </span>
+                    <TeamLabel team={away} reverse />
+                  </div>
+
+                  {/* Torabfolge */}
+                  {m.goals && m.goals.length > 0 && (
+                    <div style={{
+                      marginTop: 8, padding: "8px 10px",
+                      background: "var(--bg-raised)", borderRadius: "var(--radius-sm)",
+                      fontSize: 12, fontFamily: "var(--font-mono)",
+                    }}>
+                      <div style={{ color: "var(--ink-faint)", fontSize: 10, marginBottom: 4 }}>
+                        Tore
+                      </div>
+                      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+                        {m.goals.map((g, i) => (
+                          <span key={i} style={{
+                            display: "inline-flex", alignItems: "center", gap: 4,
+                          }}>
+                            <Flag team={g.team === "home" ? home : away} size={14} />
+                            <span style={{ color: "var(--turf)", fontWeight: 700 }}>
+                              {g.scorer}
+                            </span>
+                            <span style={{ color: "var(--ink-faint)", fontSize: 10 }}>
+                              {g.minute}&apos;
+                            </span>
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Prob (falls vorhanden) */}
+                  {m.prob && m.prob.home > 0 && (
+                    <div style={{
+                      marginTop: 6, fontSize: 10, color: "var(--ink-faint)",
+                      fontFamily: "var(--font-mono)",
+                    }}>
+                      Polymarket: {Math.round(m.prob.home * 100)}% / {Math.round(m.prob.draw * 100)}% / {Math.round(m.prob.away * 100)}%
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+    {showScrollTop && (
+      <button
+        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+        style={{
+          position: "fixed", right: 24, bottom: 24, zIndex: 50,
+          width: 48, height: 48, borderRadius: "50%",
+          background: "var(--bg-card)", color: "var(--ink-dim)",
+          border: "1px solid var(--line)", boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+          cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
+          fontSize: 22, lineHeight: 1,
+        }}
+        title="Nach oben scrollen"
+      >
+        ↑
+      </button>
+    )}
+    </>
+  );
+}
+
+function TeamLabel({ team, reverse }: { team?: Team; reverse?: boolean }) {
+  return (
+    <div style={{
+      display: "flex", alignItems: "center", gap: 8,
+      flexDirection: reverse ? "row-reverse" : "row",
+      flex: 1, minWidth: 0,
+    }}>
+      <Flag team={team} size={20} />
+      <span style={{
+        fontWeight: 600, fontSize: 14,
+        whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+        maxWidth: 120,
+      }}>
+        {team?.localisedName ?? team?.name ?? "—"}
+      </span>
+    </div>
+  );
+}

app/[locale]/components/Simulation.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useMemo } from "react";
+import { Match, Team } from "@/lib/types";
+import { computeGroupTables, computeThirdPlaceTable } from "@/lib/standings";
+import { qualifiedThirdGroups, resolveAnnexC, LATER_ROUNDS } from "@/lib/bracket";
+import { resolveBracket, ResolvedTie } from "@/lib/resolve-bracket";
+import { buildSimMatches } from "@/lib/simulation";
+import Bracket from "./Bracket";
+
+export default function Simulation({ teams, matches }: { teams: Team[]; matches: Match[] }) {
+  // ---- Simulations-Pipeline (Polymarket-Defaults, keine manuellen Overrides) ----
+  const simMatches = useMemo(() => buildSimMatches(matches, {}), [matches]);
+  const simTables = useMemo(() => computeGroupTables(teams, simMatches), [teams, simMatches]);
+  const simThirds = useMemo(() => computeThirdPlaceTable(simTables), [simTables]);
+  const simQGroups = useMemo(() => qualifiedThirdGroups(simThirds), [simThirds]);
+  const simAnnex = useMemo(
+    () => (simQGroups.length === 8 ? resolveAnnexC(simQGroups) : null),
+    [simQGroups],
+  );
+  const simAnnexResolved = simAnnex != null;
+
+  const simBracket = useMemo(
+    () => resolveBracket(simMatches, teams, simTables, simThirds, simAnnex, simAnnexResolved, true),
+    [simMatches, teams, simTables, simThirds, simAnnex, simAnnexResolved],
+  );
+
+  // Echte Tabellen/Bracket für fix/provisional-Flags (nur tatsächlich FINISHED).
+  const realTables = useMemo(() => computeGroupTables(teams, matches), [teams, matches]);
+  const realThirds = useMemo(() => computeThirdPlaceTable(realTables), [realTables]);
+  const realQGroups = useMemo(() => qualifiedThirdGroups(realThirds), [realThirds]);
+  const realAnnex = useMemo(
+    () => (realQGroups.length === 8 ? resolveAnnexC(realQGroups) : null),
+    [realQGroups],
+  );
+  const realBracket = useMemo(
+    () => resolveBracket(matches, teams, realTables, realThirds, realAnnex, realAnnex != null),
+    [matches, teams, realTables, realThirds, realAnnex],
+  );
+
+  // R32: provisional-Flags aus dem echten Bracket übernehmen.
+  const realProvisional = useMemo(() => {
+    const m = new Map<number, { home: boolean; away: boolean }>();
+    for (const tie of realBracket.r32) {
+      m.set(tie.matchNumber, { home: tie.home.provisional, away: tie.away.provisional });
+    }
+    return m;
+  }, [realBracket]);
+
+  // Folgerunden: decided-Flags aus echten Matches (status === FINISHED).
+  const realDecided = useMemo(() => {
+    const m = new Map<number, boolean>();
+    for (const mt of matches) {
+      if (mt.group == null && mt.matchNumber >= 73) {
+        m.set(mt.matchNumber, mt.status === "FINISHED");
+      }
+    }
+    return m;
+  }, [matches]);
+
+  // Sim-Bracket mit echten provisional-Flags mergen (inkl. Tooltip-Korrektur).
+  const preResolved = useMemo(() => {
+    const fixTooltip = (t: string | null, prov: boolean): string | null => {
+      if (!t) return t;
+      if (prov) return t.startsWith("aktuell ") ? t : `aktuell ${t}`;
+      return t.startsWith("aktuell ") ? t.slice(8) : t;
+    };
+
+    const r32Fixed: ResolvedTie[] = simBracket.r32.map((tie) => {
+      const rp = realProvisional.get(tie.matchNumber);
+      if (!rp) return tie;
+      return {
+        ...tie,
+        home: { ...tie.home, provisional: rp.home, tooltip: fixTooltip(tie.home.tooltip, rp.home) },
+        away: { ...tie.away, provisional: rp.away, tooltip: fixTooltip(tie.away.tooltip, rp.away) },
+      };
+    });
+
+    const laterFixed: Record<number, ResolvedTie> = {};
+    for (const km of LATER_ROUNDS) {
+      const tie = simBracket.later[km.matchNumber];
+      if (!tie) continue;
+      const homeProv = !(realDecided.get(km.fromHome) ?? false);
+      const awayProv = !(realDecided.get(km.fromAway) ?? false);
+      laterFixed[km.matchNumber] = {
+        ...tie,
+        home: { ...tie.home, provisional: homeProv },
+        away: { ...tie.away, provisional: awayProv },
+      };
+    }
+
+    return { r32: r32Fixed, later: laterFixed };
+  }, [simBracket, realProvisional, realDecided]);
+
+  return (
+    <div>
+      <div className="notice" style={{ marginBottom: 20 }}>
+        Simulation — alle ungespielten Spiele sind mit dem Polymarket-Favoriten
+        vorbelegt. Die angezeigten Wahrscheinlichkeiten stammen von Polymarket.
+      </div>
+
+      <h3 style={{ fontFamily: "var(--font-display)", fontSize: 15, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-dim)", margin: "0 0 12px" }}>
+        Simulierter K.o.-Baum
+      </h3>
+      <Bracket
+        matches={simMatches}
+        teams={teams}
+        tables={simTables}
+        thirds={simThirds}
+        assignment={simAnnex}
+        annexResolved={simAnnexResolved}
+        preResolved={preResolved}
+      />
+    </div>
+  );
+}

app/[locale]/components/ThirdPlace.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Team, ThirdPlaceRow } from "@/lib/types";
+
+export default function ThirdPlace({
+  rows, teams, secureTeams,
+}: { rows: ThirdPlaceRow[]; teams: Team[]; secureTeams?: string[] }) {
+  const name = (id: string) => {
+    const t = teams.find((t) => t.id === id);
+    return t?.localisedName ?? t?.name ?? id;
+  };
+  const secureSet = secureTeams ? new Set(secureTeams) : null;
+
+  return (
+    <div className="third-wrap">
+      <p className="notice" style={{ marginBottom: 16 }}>
+        Acht der zwölf Gruppendritten erreichen die Runde der letzten 32. Gewertet wird
+        gruppenübergreifend nach Punkten, Tordifferenz und Toren — der Direktvergleich
+        entfällt, weil diese Teams nie gegeneinander gespielt haben. Die Trennlinie markiert
+        den Schnitt zwischen Platz 8 und 9.
+      </p>
+      <table className="third-table">
+        <thead>
+          <tr>
+            <th>#</th><th>Gruppe</th><th>Team</th>
+            <th>Sp</th><th>Pkt</th><th>±</th><th>Tore</th><th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r, i) => {
+            const isCut = i === 8; // erste nicht-qualifizierte Zeile
+            return (
+              <tr
+                key={r.teamId}
+                className={`third-row ${r.qualifies ? "qual" : ""} ${isCut ? "cut" : ""}`}
+              >
+                <td>{r.overallRank}</td>
+                <td>{r.group}</td>
+                <td className={r.played === 3 ? "team-complete" : ""} style={{ fontWeight: 600 }}>
+                {name(r.teamId)}
+                {secureSet?.has(r.teamId) && (
+                  <span style={{ color: "var(--turf)", marginLeft: 6, fontSize: 13 }} title="sicher qualifiziert">✓</span>
+                )}
+              </td>
+                <td>{r.played}</td>
+                <td className="pts">{r.points}</td>
+                <td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
+                <td>{r.goalsFor}:{r.goalsAgainst}</td>
+                <td>
+                  <span className={`qual-badge ${r.qualifies ? "yes" : "no"}`}>
+                    {r.qualifies ? "weiter" : "raus"}
+                  </span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}