From 87624ae48465c9511c12d45c94199787c96cd509 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Sun, 28 Jun 2026 17:03:21 -0500
Subject: [PATCH] scrolling

---
 app/components/KoFixtures.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/components/KoFixtures.tsx b/app/components/KoFixtures.tsx
index e00b7dd..0fdf9b8 100644
--- a/app/components/KoFixtures.tsx
+++ b/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",