KO round

app/page.tsx

@@ -8,6 +8,7 @@ import ThirdPlace from "./components/ThirdPlace";
 import Bracket from "./components/Bracket";
 import Fixtures from "./components/Fixtures";
 import Simulation from "./components/Simulation";
+import KoFixtures from "./components/KoFixtures";
 
 interface ApiData {
   updatedAt: string;
@@ -21,12 +22,12 @@ interface ApiData {
   annexResolved: boolean;
 }
 
-type Tab = "groups" | "fixtures" | "thirds" | "bracket" | "sim";
+type Tab = "groups" | "groupfixtures" | "kofixtures" | "thirds" | "bracket" | "sim";
 
 export default function Home() {
   const [data, setData] = useState<ApiData | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [tab, setTab] = useState<Tab>("groups");
+  const [tab, setTab] = useState<Tab>("kofixtures");
   // Zuletzt gewählte Gruppe für den Spiele-Tab. null = noch keine gewählt.
   const [fixturesGroup, setFixturesGroup] = useState<GroupId | null>(null);
 
@@ -53,7 +54,7 @@ export default function Home() {
   // Klick auf einen Gruppen-Header: Gruppe merken und zum Spiele-Tab wechseln.
   const openGroupFixtures = useCallback((g: GroupId) => {
     setFixturesGroup(g);
-    setTab("fixtures");
+    setTab("groupfixtures");
   }, []);
 
   const anyLive = data?.matches.some(
@@ -77,14 +78,17 @@ export default function Home() {
                 : "Lade Daten…"}
           </span>
           <nav className="tabs masthead-tabs">
+            <button className={`tab ${tab === "kofixtures" ? "active" : ""}`} onClick={() => setTab("kofixtures")}>
+              K.O.-Spiele
+            </button>
             <button className={`tab ${tab === "groups" ? "active" : ""}`} onClick={() => setTab("groups")}>
               Gruppen
             </button>
             <button
-              className={`tab ${tab === "fixtures" ? "active" : ""}`}
-              onClick={() => { if (!fixturesGroup) setFixturesGroup("A"); setTab("fixtures"); }}
+              className={`tab ${tab === "groupfixtures" ? "active" : ""}`}
+              onClick={() => { if (!fixturesGroup) setFixturesGroup("A"); setTab("groupfixtures"); }}
             >
-              {fixturesGroup ? `Spiele – Gruppe ${fixturesGroup}` : "Spiele"}
+              {fixturesGroup ? `Gruppenspiele – ${fixturesGroup}` : "Gruppenspiele"}
             </button>
             <button className={`tab ${tab === "thirds" ? "active" : ""}`} onClick={() => setTab("thirds")}>
               Drittplatzierte
@@ -116,13 +120,16 @@ export default function Home() {
             </div>
           )}
 
+          {data && tab === "kofixtures" && (
+            <KoFixtures teams={data.teams} matches={data.matches} />
+          )}
           {data && tab === "groups" && (
             <Groups
               tables={data.groupTablesLive} teams={data.teams} matches={data.matches}
               onOpenGroup={openGroupFixtures}
             />
           )}
-          {data && tab === "fixtures" && fixturesGroup && (
+          {data && tab === "groupfixtures" && fixturesGroup && (
             <Fixtures
               group={fixturesGroup} teams={data.teams} matches={data.matches}
               onSelectGroup={setFixturesGroup}