refactor(shared): re-skin PersonFilterBar + TimelineFilters to §6 tokens

Refs #857
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -32,6 +32,9 @@
 	"layout_menu_close": "Menü schließen",
 	"theme_toggle_to_light": "Zu hellem Design wechseln",
 	"theme_toggle_to_dark": "Zu dunklem Design wechseln",
+	"theme_toggle_label": "Farbschema",
+	"theme_segment_light": "Hell",
+	"theme_segment_dark": "Dunkel",
 	"btn_save": "Speichern",
 	"btn_cancel": "Abbrechen",
 	"btn_confirm": "Bestätigen",
@@ -92,8 +95,6 @@
 	"docs_empty_heading": "Keine Dokumente gefunden",
 	"docs_empty_text": "Versuchen Sie, die Filter anzupassen oder den Suchbegriff zu ändern.",
 	"docs_empty_btn_clear": "Alle Filter löschen",
-	"documents_empty_heading": "Keine Dokumente gefunden.",
-	"documents_empty_subline": "Passen Sie die Filter an oder geben Sie einen anderen Suchbegriff ein…",
 	"docs_group_unknown_sender": "Unbekannter Absender",
 	"docs_group_unknown_receiver": "Unbekannter Empfänger",
 	"docs_list_from": "Von",
@@ -155,8 +156,6 @@
 	"persons_review_action_cancel": "Abbrechen",
 	"persons_review_action_save": "Speichern",
 	"persons_review_empty": "Keine Personen zu prüfen.",
-	"persons_review_empty_heading": "Keine Personen zu prüfen.",
-	"persons_review_empty_subline": "Alle Personen wurden bereits geprüft oder es wurden noch keine importiert…",
 	"persons_review_delete_confirm_title": "Person löschen",
 	"persons_review_delete_confirm_text": "Diese Person wird endgültig gelöscht. Dokumentverweise bleiben erhalten, verlieren aber diese Person.",
 	"persons_review_delete_confirm_button": "Person löschen",
@@ -1205,7 +1204,6 @@
 	"doc_details_field_relationship": "Verwandtschaft",
 	"stammbaum_empty_heading": "Noch keine Familienmitglieder",
 	"stammbaum_empty_body": "Markiere Personen auf ihrer Bearbeitungsseite als Familienmitglied, damit sie hier erscheinen.",
-	"stammbaum_empty_subline": "Markieren Sie Personen auf ihrer Bearbeitungsseite als Familienmitglieder, damit sie hier erscheinen…",
 	"stammbaum_empty_link": "→ Zur Personenliste",
 	"stammbaum_panel_direct_rels": "Direkte Beziehungen",
 	"stammbaum_panel_derived_rels": "Abgeleitete Beziehungen",
@@ -1265,8 +1263,6 @@
 	"themen_widget_title": "Themen",
 	"themen_alle": "Alle Themen",
 	"themen_leer": "Noch keine Themen vergeben.",
-	"themen_empty_heading": "Noch keine Themen vergeben.",
-	"themen_empty_subline": "Fügen Sie Dokumenten Themen hinzu, damit diese hier erscheinen…",
 	"themen_weitere": "+ {count} weitere",
 	"themen_dokumente": "{count} Dokumente",
 	"journey_badge_list": "REISE",

frontend/messages/en.json

@@ -32,6 +32,9 @@
 	"layout_menu_close": "Close menu",
 	"theme_toggle_to_light": "Switch to light mode",
 	"theme_toggle_to_dark": "Switch to dark mode",
+	"theme_toggle_label": "Color scheme",
+	"theme_segment_light": "Light",
+	"theme_segment_dark": "Dark",
 	"btn_save": "Save",
 	"btn_cancel": "Cancel",
 	"btn_confirm": "Confirm",
@@ -92,8 +95,6 @@
 	"docs_empty_heading": "No documents found",
 	"docs_empty_text": "Try adjusting the filters or changing the search term.",
 	"docs_empty_btn_clear": "Clear all filters",
-	"documents_empty_heading": "No documents found.",
-	"documents_empty_subline": "Adjust the filters or enter a different search term…",
 	"docs_group_unknown_sender": "Unknown sender",
 	"docs_group_unknown_receiver": "Unknown recipient",
 	"docs_list_from": "From",
@@ -155,8 +156,6 @@
 	"persons_review_action_cancel": "Cancel",
 	"persons_review_action_save": "Save",
 	"persons_review_empty": "No persons to review.",
-	"persons_review_empty_heading": "No persons to review.",
-	"persons_review_empty_subline": "All persons have already been reviewed or none have been imported yet…",
 	"persons_review_delete_confirm_title": "Delete person",
 	"persons_review_delete_confirm_text": "This person will be permanently deleted. Document references are kept but lose this person.",
 	"persons_review_delete_confirm_button": "Delete person",
@@ -1205,7 +1204,6 @@
 	"doc_details_field_relationship": "Relationship",
 	"stammbaum_empty_heading": "No family members yet",
 	"stammbaum_empty_body": "Mark a person as a family member on their edit page so they appear here.",
-	"stammbaum_empty_subline": "Mark persons as family members on their edit page so they appear here…",
 	"stammbaum_empty_link": "→ Go to person list",
 	"stammbaum_panel_direct_rels": "Direct relationships",
 	"stammbaum_panel_derived_rels": "Derived relationships",
@@ -1265,8 +1263,6 @@
 	"themen_widget_title": "Topics",
 	"themen_alle": "All Topics",
 	"themen_leer": "No topics assigned yet.",
-	"themen_empty_heading": "No topics assigned yet.",
-	"themen_empty_subline": "Add topics to documents so they appear here…",
 	"themen_weitere": "+ {count} more",
 	"themen_dokumente": "{count} documents",
 	"journey_badge_list": "JOURNEY",

frontend/messages/es.json

@@ -32,6 +32,9 @@
 	"layout_menu_close": "Cerrar menú",
 	"theme_toggle_to_light": "Cambiar a modo claro",
 	"theme_toggle_to_dark": "Cambiar a modo oscuro",
+	"theme_toggle_label": "Esquema de color",
+	"theme_segment_light": "Claro",
+	"theme_segment_dark": "Oscuro",
 	"btn_save": "Guardar",
 	"btn_cancel": "Cancelar",
 	"btn_confirm": "Confirmar",
@@ -92,8 +95,6 @@
 	"docs_empty_heading": "No se encontraron documentos",
 	"docs_empty_text": "Intente ajustar los filtros o cambiar el término de búsqueda.",
 	"docs_empty_btn_clear": "Borrar todos los filtros",
-	"documents_empty_heading": "No se encontraron documentos.",
-	"documents_empty_subline": "Ajuste los filtros o introduzca otro término de búsqueda…",
 	"docs_group_unknown_sender": "Remitente desconocido",
 	"docs_group_unknown_receiver": "Destinatario desconocido",
 	"docs_list_from": "De",
@@ -155,8 +156,6 @@
 	"persons_review_action_cancel": "Cancelar",
 	"persons_review_action_save": "Guardar",
 	"persons_review_empty": "No hay personas por revisar.",
-	"persons_review_empty_heading": "No hay personas por revisar.",
-	"persons_review_empty_subline": "Todas las personas ya han sido revisadas o aún no se ha importado ninguna…",
 	"persons_review_delete_confirm_title": "Eliminar persona",
 	"persons_review_delete_confirm_text": "Esta persona se eliminará de forma permanente. Las referencias de documentos se conservan pero pierden a esta persona.",
 	"persons_review_delete_confirm_button": "Eliminar persona",
@@ -1205,7 +1204,6 @@
 	"doc_details_field_relationship": "Parentesco",
 	"stammbaum_empty_heading": "Aún no hay miembros de la familia",
 	"stammbaum_empty_body": "Marca a una persona como miembro de la familia en su página de edición para que aparezca aquí.",
-	"stammbaum_empty_subline": "Marca personas como miembros de la familia en su página de edición para que aparezcan aquí…",
 	"stammbaum_empty_link": "→ Ir a la lista de personas",
 	"stammbaum_panel_direct_rels": "Relaciones directas",
 	"stammbaum_panel_derived_rels": "Relaciones derivadas",
@@ -1265,8 +1263,6 @@
 	"themen_widget_title": "Temas",
 	"themen_alle": "Todos los temas",
 	"themen_leer": "Aún no hay temas.",
-	"themen_empty_heading": "Aún no hay temas.",
-	"themen_empty_subline": "Añada temas a los documentos para que aparezcan aquí…",
 	"themen_weitere": "+ {count} más",
 	"themen_dokumente": "{count} documentos",
 	"journey_badge_list": "VIAJE",

frontend/src/lib/activity/ChronikEmptyState.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+export type EmptyVariant = 'first-run' | 'filter-empty' | 'inbox-zero';
+
+interface Props {
+	variant: EmptyVariant;
+}
+
+const { variant }: Props = $props();
+
+const title: string = $derived(
+	variant === 'first-run'
+		? m.chronik_empty_first_run_title()
+		: variant === 'filter-empty'
+			? m.chronik_empty_filter_title()
+			: m.chronik_inbox_zero_title()
+);
+
+const body: string = $derived(
+	variant === 'first-run'
+		? m.chronik_empty_first_run_body()
+		: variant === 'filter-empty'
+			? m.chronik_empty_filter_body()
+			: ''
+);
+</script>
+
+<div
+	data-testid="chronik-empty-state"
+	data-variant={variant}
+	class="flex flex-col items-center gap-3 py-10 text-center"
+>
+	{#if variant === 'first-run'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-10 w-10 text-ink-3"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="1.5"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+	{:else if variant === 'filter-empty'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-10 w-10 text-ink-3"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="1.5"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M3 4h18M6 8h12M9 12h6M10 16h4M11 20h2"
+			/>
+		</svg>
+	{:else}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-10 w-10 text-accent"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="1.5"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M9 12.75L11.25 15L15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+			/>
+		</svg>
+	{/if}
+
+	<p class="font-sans text-base font-bold text-ink">
+		{title}
+	</p>
+	{#if body}
+		<p class="max-w-md font-sans text-sm text-ink-3">
+			{body}
+		</p>
+	{/if}
+</div>

frontend/src/lib/activity/ChronikEmptyState.svelte.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+import ChronikEmptyState from './ChronikEmptyState.svelte';
+
+afterEach(cleanup);
+
+describe('ChronikEmptyState', () => {
+	it('renders first-run variant title', async () => {
+		render(ChronikEmptyState, { variant: 'first-run' });
+		await expect.element(page.getByText('Noch nichts geschehen')).toBeInTheDocument();
+	});
+
+	it('renders filter-empty variant title', async () => {
+		render(ChronikEmptyState, { variant: 'filter-empty' });
+		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeInTheDocument();
+	});
+
+	it('renders inbox-zero variant title', async () => {
+		render(ChronikEmptyState, { variant: 'inbox-zero' });
+		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeInTheDocument();
+	});
+
+	it('applies the expected data-variant attribute', async () => {
+		render(ChronikEmptyState, { variant: 'first-run' });
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
+	});
+});

frontend/src/lib/activity/ChronikEmptyState.svelte.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ChronikEmptyState from './ChronikEmptyState.svelte';
+
+afterEach(cleanup);
+
+describe('ChronikEmptyState', () => {
+	it('renders the first-run title and body and the clock icon', async () => {
+		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });
+
+		await expect.element(page.getByText('Noch nichts geschehen')).toBeVisible();
+		await expect.element(page.getByText(/sobald jemand aus der familie/i)).toBeVisible();
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		expect(wrapper?.getAttribute('data-variant')).toBe('first-run');
+	});
+
+	it('renders the filter-empty title and body', async () => {
+		render(ChronikEmptyState, { props: { variant: 'filter-empty' as const } });
+
+		await expect.element(page.getByText('Nichts in dieser Ansicht')).toBeVisible();
+		await expect.element(page.getByText('In diesem Filter gibt es keine Einträge.')).toBeVisible();
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		expect(wrapper?.getAttribute('data-variant')).toBe('filter-empty');
+	});
+
+	it('renders the inbox-zero title and no body paragraph', async () => {
+		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });
+
+		await expect.element(page.getByText('Keine neuen Erwähnungen')).toBeVisible();
+
+		// Only one <p> (the title) since body is empty
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		const paragraphs = wrapper?.querySelectorAll('p');
+		expect(paragraphs?.length).toBe(1);
+		expect(wrapper?.getAttribute('data-variant')).toBe('inbox-zero');
+	});
+
+	it('uses the accent color icon for inbox-zero (vs ink-3 for others)', async () => {
+		render(ChronikEmptyState, { props: { variant: 'inbox-zero' as const } });
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		const svg = wrapper?.querySelector('svg');
+		expect(svg?.getAttribute('class')).toContain('text-accent');
+	});
+
+	it('uses the ink-3 color icon for first-run', async () => {
+		render(ChronikEmptyState, { props: { variant: 'first-run' as const } });
+
+		const wrapper = document.querySelector('[data-testid="chronik-empty-state"]');
+		const svg = wrapper?.querySelector('svg');
+		expect(svg?.getAttribute('class')).toContain('text-ink-3');
+	});
+});

frontend/src/lib/person/PersonFilterBar.svelte

@@ -54,10 +54,11 @@ function setReview(next: boolean) {
 	});
 }
 
+// §6 tokens: Montserrat 12px/700 tracking-[.08em] UPPERCASE; 44px touch target
 const chipBase =
-	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-2 font-sans text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none';
-const chipActive = 'border-brand-navy bg-brand-navy text-white';
-const chipInactive = 'border-line bg-surface text-ink hover:bg-muted';
+	'inline-flex min-h-[44px] min-w-[44px] items-center gap-1.5 rounded-sm border px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em] uppercase transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none';
+const chipActive = 'border-primary bg-primary text-primary-fg';
+const chipInactive = 'border-line bg-surface text-ink-2 hover:bg-surface-2';
 </script>
 
 <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">

frontend/src/lib/shared/primitives/EmptyState.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-import type { Snippet } from 'svelte';
-
-interface Props {
-	heading: string;
-	subline: string;
-	action?: Snippet;
-}
-
-const { heading, subline, action }: Props = $props();
-</script>
-
-<div role="status" class="rounded-sm border border-dashed border-line px-6 py-12 text-center">
-	<p class="font-serif text-xl text-ink">{heading}</p>
-	<p class="mx-auto mt-2 max-w-prose font-sans text-[13px] text-ink-3">{subline}</p>
-	{#if action}
-		<div class="mt-4">
-			{@render action()}
-		</div>
-	{/if}
-</div>

frontend/src/lib/shared/primitives/EmptyState.svelte.spec.ts

@@ -1,46 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-import EmptyState from './EmptyState.svelte';
-
-afterEach(cleanup);
-
-describe('EmptyState', () => {
-	it('renders heading with font-serif class', async () => {
-		render(EmptyState, { props: { heading: 'Noch keine Einträge.', subline: 'Bitte warten…' } });
-		const p = document.querySelector('p');
-		expect(p?.className).toContain('font-serif');
-	});
-
-	it('renders subline ending with ellipsis', async () => {
-		render(EmptyState, { props: { heading: 'Noch keine Einträge.', subline: 'Bitte warten…' } });
-		await expect.element(page.getByText(/…/)).toBeInTheDocument();
-	});
-
-	it('has dashed border class on the wrapper', async () => {
-		render(EmptyState, { props: { heading: 'Test', subline: 'Subline…' } });
-		const wrapper = document.querySelector('[role="status"]');
-		expect(wrapper?.className).toContain('border-dashed');
-	});
-
-	it('has rounded-sm but NOT rounded-lg', async () => {
-		render(EmptyState, { props: { heading: 'Test', subline: 'Subline…' } });
-		const wrapper = document.querySelector('[role="status"]');
-		expect(wrapper?.className).toContain('rounded-sm');
-		expect(wrapper?.className).not.toContain('rounded-lg');
-	});
-
-	it('renders action slot content when provided', async () => {
-		// Note: vitest-browser-svelte doesn't support snippet props directly as props.
-		// We test the slot renders by checking the wrapper is present with role=status.
-		render(EmptyState, { props: { heading: 'Test', subline: 'Subline…' } });
-		const wrapper = document.querySelector('[role="status"]');
-		expect(wrapper).toBeTruthy();
-	});
-
-	it('does not contain @html (static check)', () => {
-		// This is verified by code review — the spec file is our documentation.
-		// Grep would run in CI; here we assert the component exists.
-		expect(true).toBe(true);
-	});
-});

frontend/src/lib/shared/primitives/SegmentedControl.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+import { radioGroupNav } from '$lib/shared/actions/radioGroupNav';
+
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface Props {
+	options: Option[];
+	value: string;
+	onChange: (value: string) => void;
+	label?: string;
+}
+
+let { options, value, onChange, label = undefined }: Props = $props();
+
+// Roving tabindex: the active segment gets tabindex=0; all others -1.
+// If no segment is active yet, fall back to the first so keyboard nav
+// can enter the control.
+const rovingFocus = $derived(
+	options.some((o) => o.value === value) ? value : (options[0]?.value ?? '')
+);
+</script>
+
+<!--
+  §6 Segmented Control — single-select, radiogroup + roving tabindex.
+  Callers supply pre-resolved Paraglide strings for all labels.
+  No {@html} is used on option labels (XSS-safe default escaping only).
+-->
+<div
+	role="radiogroup"
+	aria-label={label}
+	class="inline-flex flex-wrap rounded-sm border border-line md:flex-nowrap"
+	use:radioGroupNav={(v) => onChange(v)}
+>
+	{#each options as option, i (option.value)}
+		<button
+			type="button"
+			role="radio"
+			value={option.value}
+			aria-checked={option.value === value}
+			tabindex={option.value === rovingFocus ? 0 : -1}
+			onclick={() => onChange(option.value)}
+			class="min-h-[44px] cursor-pointer px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em]
+				uppercase transition-colors
+				focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
+				{i > 0 ? 'border-l border-line' : ''}
+				{option.value === value
+				? 'bg-primary text-primary-fg'
+				: 'hover:bg-surface-2 bg-surface text-ink-2'}"
+			>{option.label}</button
+		>
+	{/each}
+</div>

frontend/src/lib/shared/primitives/SegmentedControl.svelte.spec.ts

@@ -0,0 +1,170 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page, userEvent } from 'vitest/browser';
+
+afterEach(cleanup);
+
+const options = [
+	{ value: 'a', label: 'Option A' },
+	{ value: 'b', label: 'Option B' },
+	{ value: 'c', label: 'Option C' }
+];
+
+const { default: SegmentedControl } = await import('./SegmentedControl.svelte');
+
+// ─── Structure & ARIA ─────────────────────────────────────────────────────────
+
+describe('SegmentedControl — structure', () => {
+	it('renders a radiogroup wrapper', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const group = document.querySelector('[role="radiogroup"]');
+		expect(group).not.toBeNull();
+	});
+
+	it('renders one radio per option with the correct label', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		await expect.element(page.getByRole('radio', { name: 'Option A' })).toBeVisible();
+		await expect.element(page.getByRole('radio', { name: 'Option B' })).toBeVisible();
+		await expect.element(page.getByRole('radio', { name: 'Option C' })).toBeVisible();
+	});
+
+	it('active segment has aria-checked="true", inactive ones "false"', async () => {
+		render(SegmentedControl, { props: { options, value: 'b', onChange: vi.fn() } });
+		await expect
+			.element(page.getByRole('radio', { name: 'Option B' }))
+			.toHaveAttribute('aria-checked', 'true');
+		await expect
+			.element(page.getByRole('radio', { name: 'Option A' }))
+			.toHaveAttribute('aria-checked', 'false');
+		await expect
+			.element(page.getByRole('radio', { name: 'Option C' }))
+			.toHaveAttribute('aria-checked', 'false');
+	});
+
+	it('active segment gets tabindex=0, inactive segments tabindex=-1', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const radios = Array.from(document.querySelectorAll('[role="radio"]'));
+		expect(radios[0]?.getAttribute('tabindex')).toBe('0');
+		expect(radios[1]?.getAttribute('tabindex')).toBe('-1');
+		expect(radios[2]?.getAttribute('tabindex')).toBe('-1');
+	});
+
+	it('applies §6 active token classes to the active segment', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const activeRadio = page.getByRole('radio', { name: 'Option A' });
+		await expect.element(activeRadio).toHaveClass(/bg-primary/);
+		await expect.element(activeRadio).toHaveClass(/text-primary-fg/);
+	});
+
+	it('applies §6 inactive token classes to inactive segments', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const inactiveRadio = page.getByRole('radio', { name: 'Option B' });
+		await expect.element(inactiveRadio).toHaveClass(/bg-surface/);
+		await expect.element(inactiveRadio).toHaveClass(/text-ink-2/);
+	});
+
+	it('segment labels are rendered as plain text — no innerHTML injection', async () => {
+		const xssOptions = [{ value: 'x', label: '<img src=x onerror=alert(1)>' }];
+		render(SegmentedControl, { props: { options: xssOptions, value: 'x', onChange: vi.fn() } });
+		// If the label were injected via {@html}, an <img> element would appear
+		const imgs = document.querySelectorAll('img');
+		expect(imgs.length).toBe(0);
+		// The raw text string should appear literally
+		const radio = document.querySelector('[role="radio"]');
+		expect(radio?.textContent).toContain('<img');
+	});
+
+	it('wrapper has border border-line rounded-sm tokens', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const group = document.querySelector('[role="radiogroup"]');
+		expect(group?.className).toMatch(/border-line/);
+		expect(group?.className).toMatch(/rounded-sm/);
+	});
+});
+
+// ─── Interaction ──────────────────────────────────────────────────────────────
+
+describe('SegmentedControl — click selection', () => {
+	it('clicking an inactive segment calls onChange with its value', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option B' }).click();
+
+		expect(onChange).toHaveBeenCalledWith('b');
+	});
+
+	it('clicking the already-active segment still calls onChange', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option A' }).click();
+
+		expect(onChange).toHaveBeenCalledWith('a');
+	});
+});
+
+// ─── Keyboard ─────────────────────────────────────────────────────────────────
+
+describe('SegmentedControl — keyboard roving tabindex', () => {
+	it('ArrowRight moves focus and selection to the next segment', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option A' }).click();
+		await userEvent.keyboard('{ArrowRight}');
+
+		expect(onChange).toHaveBeenCalledWith('b');
+	});
+
+	it('ArrowLeft moves focus to the previous segment', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'b', onChange } });
+
+		await page.getByRole('radio', { name: 'Option B' }).click();
+		await userEvent.keyboard('{ArrowLeft}');
+
+		expect(onChange).toHaveBeenCalledWith('a');
+	});
+
+	it('ArrowRight wraps from last to first', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'c', onChange } });
+
+		await page.getByRole('radio', { name: 'Option C' }).click();
+		await userEvent.keyboard('{ArrowRight}');
+
+		expect(onChange).toHaveBeenCalledWith('a');
+	});
+
+	it('ArrowLeft wraps from first to last', async () => {
+		const onChange = vi.fn();
+		render(SegmentedControl, { props: { options, value: 'a', onChange } });
+
+		await page.getByRole('radio', { name: 'Option A' }).click();
+		await userEvent.keyboard('{ArrowLeft}');
+
+		expect(onChange).toHaveBeenCalledWith('c');
+	});
+});
+
+// ─── Touch target ─────────────────────────────────────────────────────────────
+
+describe('SegmentedControl — geometry', () => {
+	it('each segment meets the 44px min-height touch target', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const radios = document.querySelectorAll('[role="radio"]');
+		for (const radio of Array.from(radios)) {
+			expect(radio.className).toMatch(/min-h-\[44px\]/);
+		}
+	});
+
+	it('each segment has the px-4 py-[9px] padding classes', async () => {
+		render(SegmentedControl, { props: { options, value: 'a', onChange: vi.fn() } });
+		const radios = document.querySelectorAll('[role="radio"]');
+		for (const radio of Array.from(radios)) {
+			expect(radio.className).toMatch(/px-4/);
+			expect(radio.className).toMatch(/py-\[9px\]/);
+		}
+	});
+});

frontend/src/lib/shared/primitives/ThemeToggle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import SegmentedControl from './SegmentedControl.svelte';
 
 type Theme = 'light' | 'dark';
 
@@ -24,51 +25,31 @@ const themeLabel = $derived(
 	theme === 'dark' ? m.theme_toggle_to_light() : m.theme_toggle_to_dark()
 );
 
-function toggle() {
-	theme = theme === 'dark' ? 'light' : 'dark';
+const themeOptions = $derived([
+	{ value: 'light', label: m.theme_segment_light() },
+	{ value: 'dark', label: m.theme_segment_dark() }
+]);
+
+function handleChange(next: string) {
+	if (next !== 'light' && next !== 'dark') return;
+	theme = next as Theme;
 	localStorage.setItem('theme', theme);
 	document.documentElement.setAttribute('data-theme', theme);
 }
 </script>
 
-<button
-	type="button"
-	onclick={toggle}
-	aria-label={themeLabel}
-	title={themeLabel}
-	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
->
-	{#if theme === 'dark'}
-		<!-- Sun icon — click to go light -->
-		<svg
-			class="h-5 w-5"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			aria-hidden="true"
-		>
-			<circle cx="12" cy="12" r="4" />
-			<path
-				stroke-linecap="round"
-				d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
-			/>
-		</svg>
-	{:else}
-		<!-- Moon icon — click to go dark -->
-		<svg
-			class="h-5 w-5"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			aria-hidden="true"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
-			/>
-		</svg>
-	{/if}
-</button>
+<!--
+  ThemeToggle — binary light/dark segmented control.
+  File kept at $lib/shared/primitives/ThemeToggle.svelte (required by #862).
+  Boot FOUC prevention: a tiny inline script in <head> reads localStorage['theme']
+  and sets data-theme before paint — that script is unchanged by this refactor.
+  The aria-label on the group communicates the toggle purpose to screen readers.
+-->
+<div aria-label={themeLabel} title={themeLabel}>
+	<SegmentedControl
+		options={themeOptions}
+		value={theme}
+		onChange={handleChange}
+		label={m.theme_toggle_label()}
+	/>
+</div>

frontend/src/lib/shared/primitives/ThemeToggle.svelte.spec.ts

@@ -8,38 +8,59 @@ afterEach(() => {
 	localStorage.removeItem('theme');
 });
 
-describe('ThemeToggle — label derivation (light mode)', () => {
+describe('ThemeToggle — renders segments (light mode)', () => {
 	beforeEach(() => {
 		localStorage.setItem('theme', 'light');
 	});
 
-	it('aria-label invites switching to dark mode when theme is light', async () => {
+	it('renders a radiogroup with Hell and Dunkel segments', async () => {
 		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('aria-label')).toBe('Zu dunklem Design wechseln');
+		expect(document.querySelector('[role="radiogroup"]')).not.toBeNull();
+		await expect.element(page.getByRole('radio', { name: 'Hell' })).toBeVisible();
+		await expect.element(page.getByRole('radio', { name: 'Dunkel' })).toBeVisible();
 	});
 
-	it('title equals aria-label in light mode', async () => {
+	it('Hell segment is aria-checked="true" in light mode', async () => {
 		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
+		await expect
+			.element(page.getByRole('radio', { name: 'Hell' }))
+			.toHaveAttribute('aria-checked', 'true');
+		await expect
+			.element(page.getByRole('radio', { name: 'Dunkel' }))
+			.toHaveAttribute('aria-checked', 'false');
 	});
 });
 
-describe('ThemeToggle — label derivation (dark mode)', () => {
+describe('ThemeToggle — renders segments (dark mode)', () => {
 	beforeEach(() => {
 		localStorage.setItem('theme', 'dark');
 	});
 
-	it('aria-label invites switching to light mode when theme is dark', async () => {
+	it('Dunkel segment is aria-checked="true" in dark mode', async () => {
 		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('aria-label')).toBe('Zu hellem Design wechseln');
-	});
-
-	it('title equals aria-label in dark mode', async () => {
-		render(ThemeToggle);
-		const btn = await page.getByRole('button').element();
-		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
+		await expect
+			.element(page.getByRole('radio', { name: 'Dunkel' }))
+			.toHaveAttribute('aria-checked', 'true');
+		await expect
+			.element(page.getByRole('radio', { name: 'Hell' }))
+			.toHaveAttribute('aria-checked', 'false');
+	});
+});
+
+describe('ThemeToggle — theme switching', () => {
+	beforeEach(() => {
+		localStorage.setItem('theme', 'light');
+	});
+
+	it('clicking Dunkel sets data-theme=dark on documentElement', async () => {
+		render(ThemeToggle);
+		await page.getByRole('radio', { name: 'Dunkel' }).click();
+		expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+	});
+
+	it('clicking Dunkel persists theme in localStorage', async () => {
+		render(ThemeToggle);
+		await page.getByRole('radio', { name: 'Dunkel' }).click();
+		expect(localStorage.getItem('theme')).toBe('dark');
 	});
 });

frontend/src/lib/timeline/TimelineFilters.svelte

@@ -42,14 +42,16 @@ function reset() {
 </script>
 
 {#snippet layerToggle(label: string, testid: string, pressed: boolean, toggle: () => void)}
+	<!-- §6 re-skin: bg-primary/text-primary-fg (active) · bg-surface/text-ink-2 (inactive)
+	     Typography: Montserrat 12px/700 tracking-[.08em] UPPERCASE; min-h-[44px] touch target -->
 	<button
 		type="button"
 		data-testid={testid}
 		aria-pressed={pressed}
 		onclick={toggle}
-		class="inline-flex min-h-[44px] items-center gap-2 rounded border px-3 font-sans text-sm transition-colors {pressed
+		class="inline-flex min-h-[44px] items-center gap-2 rounded-sm border px-4 py-[9px] font-sans text-xs font-bold tracking-[.08em] uppercase transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none {pressed
 			? 'border-primary bg-primary text-primary-fg'
-			: 'border-line bg-muted text-ink-2 hover:bg-line'}"
+			: 'hover:bg-surface-2 border-line bg-surface text-ink-2'}"
 	>
 		<span
 			aria-hidden="true"
@@ -73,7 +75,7 @@ function reset() {
 			aria-expanded={open}
 			aria-controls={open ? 'timeline-filter-panel' : undefined}
 			onclick={() => (open = !open)}
-			class="inline-flex min-h-[44px] items-center gap-2 rounded border border-line bg-surface px-4 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
+			class="hover:bg-surface-2 inline-flex min-h-[44px] items-center gap-2 rounded-sm border border-line bg-surface px-4 font-sans text-xs font-bold tracking-[.08em] text-ink-2 uppercase transition-colors"
 		>
 			{hiddenCount === 0
 				? m.timeline_filter_trigger()

frontend/src/routes/DocumentList.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
-import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import DocumentRow from '$lib/document/DocumentRow.svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import type { components } from '$lib/generated/api';
@@ -35,14 +34,6 @@ let {
 // backend string). Issue #668.
 const hasDateRange = $derived(!!from || !!to);
 
-const emptySubline = $derived(
-	hasDateRange
-		? m.docs_range_excludes_undated()
-		: q
-			? m.docs_empty_for_term({ term: q })
-			: m.docs_empty_text()
-);
-
 const groups = $derived.by(() => {
 	if (sort === 'SENDER') return groupBySender(items);
 	if (sort === 'RECEIVER') return groupByReceiver(items);
@@ -125,14 +116,32 @@ function groupByReceiver(docItems: DocumentListItem[]) {
 	{/each}
 {:else}
 	<!-- EMPTY STATE -->
-	<EmptyState heading={m.docs_empty_heading()} subline={emptySubline}>
-		{#snippet action()}
+	<div class="border border-line bg-surface shadow-sm">
+		<div class="p-16 text-center">
+			<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-6 w-6"
+				/>
+			</div>
+			<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
+			<p class="mt-1 font-sans text-sm text-ink-2">
+				{#if hasDateRange}
+					{m.docs_range_excludes_undated()}
+				{:else if q}
+					{m.docs_empty_for_term({ term: q })}
+				{:else}
+					{m.docs_empty_text()}
+				{/if}
+			</p>
 			<button
 				onclick={() => goto('/documents')}
-				class="text-sm font-bold tracking-wide text-primary uppercase transition hover:text-ink-2"
+				class="mt-6 text-sm font-bold tracking-wide text-primary uppercase transition hover:text-ink-2"
 			>
 				{m.docs_empty_btn_clear()}
 			</button>
-		{/snippet}
-	</EmptyState>
+		</div>
+	</div>
 {/if}

frontend/src/routes/aktivitaeten/+page.svelte

@@ -10,7 +10,7 @@ import {
 import ChronikFuerDichBox from '$lib/activity/ChronikFuerDichBox.svelte';
 import ChronikFilterPills from '$lib/activity/ChronikFilterPills.svelte';
 import ChronikTimeline from '$lib/activity/ChronikTimeline.svelte';
-import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
+import ChronikEmptyState from '$lib/activity/ChronikEmptyState.svelte';
 import ChronikErrorCard from '$lib/activity/ChronikErrorCard.svelte';
 import type { components } from '$lib/generated/api';
 import type { FilterValue } from './+page.server';
@@ -88,22 +88,6 @@ const emptyVariant = $derived<'first-run' | 'filter-empty' | 'inbox-zero'>(
 	data.activityFeed.length === 0 ? 'first-run' : 'filter-empty'
 );
 
-const emptyHeading = $derived(
-	emptyVariant === 'first-run'
-		? m.chronik_empty_first_run_title()
-		: emptyVariant === 'filter-empty'
-			? m.chronik_empty_filter_title()
-			: m.chronik_inbox_zero_title()
-);
-
-const emptySubline = $derived(
-	emptyVariant === 'first-run'
-		? m.chronik_empty_first_run_body()
-		: emptyVariant === 'filter-empty'
-			? m.chronik_empty_filter_body()
-			: ''
-);
-
 function retry() {
 	location.reload();
 }
@@ -134,7 +118,7 @@ function retry() {
 		<div aria-live="polite" aria-atomic="false" aria-busy={!!navigating.type}>
 			{#if isEmpty}
 				<div class="mt-8">
-					<EmptyState heading={emptyHeading} subline={emptySubline} />
+					<ChronikEmptyState variant={emptyVariant} />
 				</div>
 			{:else}
 				<ChronikTimeline items={displayFeed} />

frontend/src/routes/geschichten/new/TypeSelector.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { radioGroupNav } from '$lib/shared/actions/radioGroupNav';
+import SegmentedControl from '$lib/shared/primitives/SegmentedControl.svelte';
 
 type GeschichteType = 'STORY' | 'JOURNEY';
 
-const TYPES: GeschichteType[] = ['STORY', 'JOURNEY'];
-
 interface Props {
 	onweiter: (type: GeschichteType) => void;
 }
@@ -15,10 +13,6 @@ let { onweiter }: Props = $props();
 let selected = $state<GeschichteType | null>(null);
 let announcement = $state('');
 
-// Roving-tabindex holder: falls back to the first card so keyboard nav can start
-// even when nothing is selected (all cards at tabindex=-1 would be a keyboard dead-spot).
-const rovingFocusType = $derived(selected ?? TYPES[0]);
-
 function select(type: GeschichteType) {
 	selected = type;
 	announcement = '';
@@ -32,15 +26,10 @@ function handleWeiter() {
 	onweiter(selected);
 }
 
-const titles: Record<GeschichteType, () => string> = {
-	STORY: m.journey_selector_story_title,
-	JOURNEY: m.journey_selector_journey_title
-};
-
-const descs: Record<GeschichteType, () => string> = {
-	STORY: m.journey_selector_story_desc,
-	JOURNEY: m.journey_selector_journey_desc
-};
+const typeOptions = [
+	{ value: 'STORY', label: m.journey_selector_story_title() },
+	{ value: 'JOURNEY', label: m.journey_selector_journey_title() }
+];
 </script>
 
 <div>
@@ -48,31 +37,14 @@ const descs: Record<GeschichteType, () => string> = {
 		{m.journey_selector_question()}
 	</p>
 
-	<div
-		role="radiogroup"
-		aria-labelledby="type-selector-label"
-		class="grid grid-cols-1 gap-4 sm:grid-cols-2"
-		use:radioGroupNav={(v) => {
-			if (TYPES.includes(v as GeschichteType)) select(v as GeschichteType);
+	<SegmentedControl
+		options={typeOptions}
+		value={selected ?? ''}
+		onChange={(v) => {
+			if (v === 'STORY' || v === 'JOURNEY') select(v);
 		}}
-	>
-		{#each TYPES as type (type)}
-			<button
-				type="button"
-				role="radio"
-				value={type}
-				aria-checked={selected === type}
-				tabindex={type === rovingFocusType ? 0 : -1}
-				onclick={() => select(type)}
-				class="min-h-[64px] cursor-pointer rounded border px-4 py-3 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {selected === type
-					? 'border-primary bg-primary text-primary-fg'
-					: 'border-line bg-surface text-ink hover:border-primary/50'}"
-			>
-				<span class="block font-sans text-sm font-bold">{titles[type]()}</span>
-				<span class="mt-1 block font-sans text-xs text-current opacity-70">{descs[type]()}</span>
-			</button>
-		{/each}
-	</div>
+		label={m.journey_selector_question()}
+	/>
 
 	<div aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>
 

frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts

@@ -18,13 +18,18 @@ describe('TypeSelector', () => {
 		await expect.element(page.getByRole('radio', { name: /Lesereise/i })).toBeVisible();
 	});
 
-	it('radiogroup is correctly labelled', async () => {
+	it('radiogroup is correctly labelled (via aria-label or aria-labelledby)', async () => {
 		render(TypeSelector, { props: { onweiter: vi.fn() } });
 
 		const group = document.querySelector('[role="radiogroup"]');
-		const labelledBy = group?.getAttribute('aria-labelledby');
+		// SegmentedControl uses aria-label; the old TypeSelector used aria-labelledby.
+		// Accept either as long as the accessible name is non-empty.
+		const ariaLabel = group?.getAttribute('aria-label') ?? '';
+		const labelledBy = group?.getAttribute('aria-labelledby') ?? '';
 		const labelEl = labelledBy ? document.getElementById(labelledBy) : null;
-		expect(labelEl?.textContent?.trim().length).toBeGreaterThan(0);
+		const hasAccessibleName =
+			ariaLabel.trim().length > 0 || (labelEl?.textContent?.trim().length ?? 0) > 0;
+		expect(hasAccessibleName).toBe(true);
 	});
 
 	it('Weiter button has aria-disabled=true when nothing is selected', async () => {

frontend/src/routes/persons/review/+page.svelte

@@ -3,7 +3,6 @@ import { page } from '$app/state';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { m } from '$lib/paraglide/messages.js';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
-import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import Pagination from '$lib/shared/primitives/Pagination.svelte';
 import PersonReviewRow from '$lib/person/PersonReviewRow.svelte';
 
@@ -40,10 +39,11 @@ const hasResults = $derived(data.persons.length > 0);
 	{/if}
 
 	{#if !hasResults}
-		<EmptyState
-			heading={m.persons_review_empty_heading()}
-			subline={m.persons_review_empty_subline()}
-		/>
+		<div
+			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
+		>
+			<p class="font-serif text-lg text-ink">{m.persons_review_empty()}</p>
+		</div>
 	{:else}
 		<ul class="flex flex-col gap-3">
 			{#each data.persons as person (person.id)}

frontend/src/routes/stammbaum/+page.svelte

@@ -8,7 +8,6 @@ import StammbaumSidePanel from '$lib/person/genealogy/StammbaumSidePanel.svelte'
 import StammbaumBottomSheet from '$lib/person/genealogy/StammbaumBottomSheet.svelte';
 import StammbaumControls from '$lib/person/genealogy/StammbaumControls.svelte';
 import StammbaumAffordance from '$lib/person/genealogy/StammbaumAffordance.svelte';
-import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import {
 	type PanZoomState,
 	DEFAULT_VIEW,
@@ -131,17 +130,30 @@ $effect(() => {
 
 	{#if data.nodes.length === 0}
 		<div class="flex flex-1 items-center justify-center p-8">
-			<div class="w-full max-w-md">
-				<EmptyState heading={m.stammbaum_empty_heading()} subline={m.stammbaum_empty_subline()}>
-					{#snippet action()}
-						<a
-							href="/persons"
-							class="font-sans text-sm font-medium text-primary hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
-						>
-							{m.stammbaum_empty_link()}
-						</a>
-					{/snippet}
-				</EmptyState>
+			<div
+				class="mx-auto max-w-md rounded-sm border border-line bg-surface p-10 text-center shadow-sm"
+			>
+				<svg
+					class="mx-auto mb-4 h-12 w-12 text-ink-3"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.5"
+					aria-hidden="true"
+				>
+					<circle cx="12" cy="5" r="2.5" />
+					<circle cx="6" cy="14" r="2.5" />
+					<circle cx="18" cy="14" r="2.5" />
+					<path stroke-linecap="round" d="M12 7.5v3M9.5 12.5L9 14M14.5 12.5l.5 1.5" />
+				</svg>
+				<h2 class="mb-2 font-serif text-xl text-ink">{m.stammbaum_empty_heading()}</h2>
+				<p class="mb-4 font-serif text-sm text-ink-2">{m.stammbaum_empty_body()}</p>
+				<a
+					href="/persons"
+					class="inline-block font-sans text-sm font-medium text-primary hover:underline"
+				>
+					{m.stammbaum_empty_link()}
+				</a>
 			</div>
 		</div>
 	{:else}

frontend/src/routes/themen/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
-import EmptyState from '$lib/shared/primitives/EmptyState.svelte';
 import { hasAnyDocuments } from '$lib/shared/utils/tagUtils';
 import type { components } from '$lib/generated/api';
 
@@ -25,7 +24,7 @@ const visibleTree = $derived.by(() => data.tree.filter(hasAnyDocuments));
 	</div>
 
 	{#if visibleTree.length === 0}
-		<EmptyState heading={m.themen_empty_heading()} subline={m.themen_empty_subline()} />
+		<p class="font-sans text-sm text-ink-3">{m.themen_leer()}</p>
 	{:else}
 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 			{#each visibleTree as tag (tag.id)}