diff --git a/frontend/src/lib/person/genealogy/StammbaumTree.svelte b/frontend/src/lib/person/genealogy/StammbaumTree.svelte
index 7cfbddd1..6d85067e 100644
--- a/frontend/src/lib/person/genealogy/StammbaumTree.svelte
+++ b/frontend/src/lib/person/genealogy/StammbaumTree.svelte
@@ -30,11 +30,17 @@ const layout = $derived.by<Layout>(() => buildLayout(nodes, edges));
 // too costly on a 320 px screen).
 const GUTTER_WIDTH_DESKTOP = 100;
 const GUTTER_MEDIA_QUERY = '(min-width: 768px)';
-let isMdOrUp = $state(false);
+// Seed synchronously so the first paint already has the right gutter state —
+// otherwise the test (and a brief flash on real CSR mount) would see the
+// pre-effect false. SSR has no window; the gutter stays hidden until hydrate.
+let isMdOrUp = $state(
+	typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+		? window.matchMedia(GUTTER_MEDIA_QUERY).matches
+		: false
+);
 $effect(() => {
 	if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
 	const mq = window.matchMedia(GUTTER_MEDIA_QUERY);
-	isMdOrUp = mq.matches;
 	const handler = (e: MediaQueryListEvent) => (isMdOrUp = e.matches);
 	mq.addEventListener('change', handler);
 	return () => mq.removeEventListener('change', handler);