scrolling

app/components/KoFixtures.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState, useEffect } from "react";
+import { useMemo, useState, useEffect, useRef } from "react";
 import { Match, Team } from "@/lib/types";
 import { STADIUMS, MATCH_STADIUMS } from "@/lib/stadiums";
 import Flag from "./Flag";
@@ -76,6 +76,21 @@ export default function KoFixtures({ teams, matches }: { teams: Team[]; matches:
     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);
+
+  useEffect(() => {
+    if (mounted && targetRef.current) {
+      targetRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [mounted]);
+
   if (koMatches.length === 0) {
     return <div className="notice">Keine K.o.-Spiele mit bekannten Teams verfügbar.</div>;
   }
@@ -106,6 +121,7 @@ export default function KoFixtures({ teams, matches }: { teams: Team[]; matches:
               return (
                 <div
                   key={m.id}
+                  ref={m.id === targetMatchId ? targetRef : undefined}
                   style={{
                     background: "var(--bg-card)", border: `1px solid ${live ? "var(--turf)" : "var(--line-soft)"}`,
                     borderRadius: "var(--radius-sm)", padding: "12px 14px",