feat(topbar): add divider between sender/receiver block and action buttons

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

frontend/.gitignore

@@ -31,3 +31,6 @@ src/lib/paraglide
 # src/lib/generated/api.ts
 src/lib/paraglide_bak*
 /coverage
+
+# Playwright auth state — regenerated at the start of each CI run via auth.setup.ts
+e2e/.auth/

frontend/e2e/accessibility.spec.ts

@@ -37,6 +37,57 @@ test.describe('Accessibility — authenticated pages', () => {
 	}
 });
 
+test.describe('Accessibility — dark mode (system preference)', () => {
+	for (const { name, path } of AUTHENTICATED_PAGES) {
+		test(`${name} page has no wcag2a/wcag2aa violations in prefers-color-scheme: dark`, async ({
+			browser
+		}) => {
+			const context = await browser.newContext({
+				colorScheme: 'dark',
+				storageState: 'e2e/.auth/user.json'
+			});
+			const page = await context.newPage();
+			await page.goto(path);
+			await page.waitForSelector('[data-hydrated]');
+
+			const results = await buildAxe(page).analyze();
+
+			if (results.violations.length > 0) {
+				const summary = results.violations
+					.map((v) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} node(s))`)
+					.join('\n');
+				console.log(`\nAccessibility violations on ${name} (dark/media):\n${summary}`);
+			}
+
+			await context.close();
+			expect(results.violations).toEqual([]);
+		});
+	}
+});
+
+test.describe('Accessibility — dark mode (manual toggle)', () => {
+	for (const { name, path } of AUTHENTICATED_PAGES) {
+		test(`${name} page has no wcag2a/wcag2aa violations with data-theme='dark'`, async ({
+			page
+		}) => {
+			await page.goto(path);
+			await page.waitForSelector('[data-hydrated]');
+			await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+
+			const results = await buildAxe(page).analyze();
+
+			if (results.violations.length > 0) {
+				const summary = results.violations
+					.map((v) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} node(s))`)
+					.join('\n');
+				console.log(`\nAccessibility violations on ${name} (dark/manual):\n${summary}`);
+			}
+
+			expect(results.violations).toEqual([]);
+		});
+	}
+});
+
 test.describe('Accessibility — login page', () => {
 	test.use({ storageState: { cookies: [], origins: [] } });
 

frontend/e2e/dashboard-classic-split.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+import { login } from './helpers/auth';
+
+/**
+ * Classic Split layout — verifies the right column visibility guard.
+ *
+ * The right column (DropZone + NeedsMetadata queue) is only rendered when
+ * `canWrite === true` or there are incomplete docs. A read-only user with a
+ * complete archive must never see an empty 300px ghost column.
+ */
+
+test.describe('Dashboard Classic Split — write user', () => {
+	test('right column is visible for admin user', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByTestId('dashboard-right-column')).toBeVisible();
+	});
+});
+
+test.describe('Dashboard Classic Split — read-only user', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test.beforeEach(async ({ page }) => {
+		await login(page, 'reader', 'reader123');
+	});
+
+	test('right column is absent for read-only user with no incomplete docs', async ({ page }) => {
+		await expect(page.getByTestId('dashboard-right-column')).not.toBeVisible();
+	});
+});

frontend/e2e/focus-rings.spec.ts

@@ -0,0 +1,88 @@
+import { test, expect } from '@playwright/test';
+
+// Expected focus ring resolved colors
+// Light: --c-focus-ring: #012851 (brand-navy)
+const FOCUS_RING_LIGHT = 'rgb(1, 40, 81)';
+// Dark:  --c-focus-ring: #a1dcd8 (brand-mint)
+const FOCUS_RING_DARK = 'rgb(161, 220, 216)';
+
+test.describe('Focus ring token — CSS custom property', () => {
+	test('--c-focus-ring is defined in light mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		const value = await page.evaluate(() =>
+			getComputedStyle(document.documentElement).getPropertyValue('--c-focus-ring').trim()
+		);
+		expect(value).toBe('#012851');
+	});
+
+	test('--c-focus-ring is defined in dark mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+
+		const value = await page.evaluate(() =>
+			getComputedStyle(document.documentElement).getPropertyValue('--c-focus-ring').trim()
+		);
+		expect(value).toBe('#a1dcd8');
+	});
+});
+
+test.describe('Focus ring — header interactive elements', () => {
+	test('ThemeToggle has brand-navy ring in light mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: /dark mode|dunkelmodus/i }).focus();
+		const boxShadow = await page.evaluate(
+			() => getComputedStyle(document.activeElement as HTMLElement).boxShadow
+		);
+		expect(boxShadow).toContain(FOCUS_RING_LIGHT);
+	});
+
+	test('AppNav link has brand-mint ring in dark mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+
+		// Focus first desktop nav link
+		await page.locator('header nav').getByRole('link').first().focus();
+		const boxShadow = await page.evaluate(
+			() => getComputedStyle(document.activeElement as HTMLElement).boxShadow
+		);
+		expect(boxShadow).toContain(FOCUS_RING_DARK);
+	});
+});
+
+test.describe('Focus ring — form inputs', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test('login username input has brand-mint ring in dark mode', async ({ page }) => {
+		await page.goto('/login');
+		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+
+		await page.locator('#username').focus();
+		const boxShadow = await page.evaluate(
+			() => getComputedStyle(document.activeElement as HTMLElement).boxShadow
+		);
+		expect(boxShadow).toContain(FOCUS_RING_DARK);
+	});
+});
+
+test.describe('Focus ring — PersonTypeahead', () => {
+	test('PersonTypeahead input has brand-navy ring in light mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		// Open advanced filter panel to expose the sender PersonTypeahead
+		await page.getByRole('button', { name: /filter/i }).click();
+		await page.waitForSelector('#senderId-search');
+
+		await page.locator('#senderId-search').focus();
+		const boxShadow = await page.evaluate(
+			() => getComputedStyle(document.activeElement as HTMLElement).boxShadow
+		);
+		expect(boxShadow).toContain(FOCUS_RING_LIGHT);
+	});
+});

frontend/e2e/header.spec.ts

@@ -0,0 +1,118 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+// #012851 — brand-navy, set as --c-header in layout.css (both light and dark mode)
+const BRAND_NAVY = 'rgb(1, 40, 81)';
+
+test.describe('Header — brand-navy background', () => {
+	test('header background is brand-navy in light mode', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByRole('navigation')).toBeVisible();
+
+		const bg = await page.locator('header').evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('header passes accessibility audit in light mode', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByRole('navigation')).toBeVisible();
+
+		const results = await new AxeBuilder({ page }).include('header').analyze();
+		expect(results.violations).toEqual([]);
+	});
+
+	test('header background stays brand-navy after switching to dark mode', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByRole('navigation')).toBeVisible();
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+		const bg = await page.locator('header').evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('header passes accessibility audit in dark mode', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByRole('navigation')).toBeVisible();
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+		const results = await new AxeBuilder({ page }).include('header').analyze();
+		expect(results.violations).toEqual([]);
+	});
+
+	test('logo text is visible at 375px viewport', async ({ page }) => {
+		await page.setViewportSize({ width: 375, height: 812 });
+		await page.goto('/');
+
+		await expect(page.getByRole('banner').getByText('Familienarchiv')).toBeVisible();
+	});
+
+	test('hamburger menu opens on tablet viewport (768px)', async ({ page }) => {
+		await page.setViewportSize({ width: 768, height: 1024 });
+		await page.goto('/');
+		await expect(page.getByRole('navigation')).toBeVisible();
+
+		const hamburger = page.getByRole('button', { name: /menü öffnen/i });
+		await expect(hamburger).toBeVisible();
+		await hamburger.click();
+
+		await expect(
+			page.getByRole('navigation', { name: /mobile/i }).or(page.locator('#mobile-nav'))
+		).toBeVisible();
+	});
+});
+
+test.describe('Login page — AuthHeader', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test('login page has brand-navy header with language switcher', async ({ page }) => {
+		await page.goto('/login');
+
+		const header = page.locator('header');
+		await expect(header).toBeVisible();
+
+		const bg = await header.evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+
+		await expect(header.getByRole('button', { name: 'DE' })).toBeVisible();
+	});
+
+	test('login page header passes accessibility audit', async ({ page }) => {
+		await page.goto('/login');
+		await expect(page.locator('header')).toBeVisible();
+
+		const results = await new AxeBuilder({ page }).include('header').analyze();
+		expect(results.violations).toEqual([]);
+	});
+});
+
+test.describe('Forgot-password page — AuthHeader', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test('forgot-password page has brand-navy header', async ({ page }) => {
+		await page.goto('/forgot-password');
+
+		const header = page.locator('header');
+		await expect(header).toBeVisible();
+
+		const bg = await header.evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('forgot-password page header passes accessibility audit', async ({ page }) => {
+		await page.goto('/forgot-password');
+		await expect(page.locator('header')).toBeVisible();
+
+		const results = await new AxeBuilder({ page }).include('header').analyze();
+		expect(results.violations).toEqual([]);
+	});
+});

frontend/e2e/password-reset.spec.ts

@@ -80,8 +80,7 @@ test.describe('Password reset', () => {
 		await page.locator('input[name="currentPassword"]').fill(newPassword);
 		await page.locator('input[name="newPassword"]').fill(originalPassword);
 		await page.locator('input[name="confirmPassword"]').fill(originalPassword);
-		// Profile page has two "Speichern" buttons — the password form is the last one
-		await page.locator('button[type="submit"]').last().click();
+		await page.getByTestId('submit-password').click();
 		// After changing password, auth_token is stale → redirect to login
 		await expect(page).toHaveURL(/\/login/);
 

frontend/e2e/theme.spec.ts

@@ -60,6 +60,48 @@ test.describe('Theme toggle', () => {
 		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
 	});
 
+	test('header uses --c-header token background in dark mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+
+		const headerBg = await page.evaluate(() => {
+			const header = document.querySelector('header');
+			return header ? getComputedStyle(header).backgroundColor : null;
+		});
+		// --c-header in dark mode = #012851 (brand navy) → rgb(1, 40, 81)
+		expect(headerBg).toBe('rgb(1, 40, 81)');
+	});
+
+	test('color-scheme is dark when data-theme=dark is set', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+
+		const colorScheme = await page.evaluate(
+			() => getComputedStyle(document.documentElement).colorScheme
+		);
+		expect(colorScheme).toBe('dark');
+	});
+
+	test('color-scheme is dark in prefers-color-scheme: dark media', async ({ browser }) => {
+		const context = await browser.newContext({
+			colorScheme: 'dark',
+			storageState: 'e2e/.auth/user.json'
+		});
+		const page = await context.newPage();
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		const colorScheme = await page.evaluate(
+			() => getComputedStyle(document.documentElement).colorScheme
+		);
+		await context.close();
+		expect(colorScheme).toBe('dark');
+	});
+
 	test('saved theme is applied before first paint (no flash)', async ({ page }) => {
 		// Set dark theme in localStorage before navigating
 		await page.goto('/');

frontend/messages/de.json

@@ -223,6 +223,12 @@
 	"admin_label_initial_password": "Passwort",
 	"doc_file_error_preview": "Vorschau konnte nicht geladen werden.",
 	"doc_download_title": "Herunterladen",
+	"topbar_back_label": "Zurück zur Dokumentenliste",
+	"topbar_more_actions": "Weitere Aktionen",
+	"topbar_overflow_more": "+{count} weitere",
+	"topbar_overflow_suffix": "weitere",
+	"topbar_overflow_heading": "Weitere Empfänger",
+	"topbar_overflow_show": "{count} weitere Empfänger anzeigen",
 	"doc_tag_filter_title": "Nach {name} filtern",
 	"doc_conversation_title": "Konversation anzeigen",
 	"doc_preview_iframe_title": "Dokumentvorschau",
@@ -321,6 +327,7 @@
 	"doc_panel_tab_history": "Verlauf",
 	"doc_panel_annotate": "Annotieren",
 	"doc_panel_annotate_stop": "Fertig",
+	"doc_panel_annotate_hint": "Klicken und ziehen Sie, um einen Bereich zu markieren",
 	"doc_panel_annotation_thread_title": "Annotation",
 	"doc_panel_discussion_annotation_tab": "Annotation · Seite {page}",
 	"pdf_annotations_show": "Annotierungen anzeigen",
@@ -375,6 +382,8 @@
 	"dashboard_needs_metadata_heading": "Metadaten fehlen",
 	"dashboard_needs_metadata_show_all": "Alle anzeigen",
 	"dashboard_recent_heading": "Zuletzt aktiv",
+	"dashboard_stats_documents": "Dokumente",
+	"dashboard_stats_persons": "Personen",
 	"dashboard_resume_label": "Zuletzt geöffnet:",
 	"dashboard_resume_fallback": "Unbekanntes Dokument",
 	"doc_status_placeholder": "Platzhalter",

frontend/messages/en.json

@@ -223,6 +223,12 @@
 	"admin_label_initial_password": "Password",
 	"doc_file_error_preview": "Could not load preview.",
 	"doc_download_title": "Download",
+	"topbar_back_label": "Back to document list",
+	"topbar_more_actions": "More actions",
+	"topbar_overflow_more": "+{count} more",
+	"topbar_overflow_suffix": "more",
+	"topbar_overflow_heading": "More receivers",
+	"topbar_overflow_show": "Show {count} more receivers",
 	"doc_tag_filter_title": "Filter by {name}",
 	"doc_conversation_title": "Show conversation",
 	"doc_preview_iframe_title": "Document Preview",
@@ -321,6 +327,7 @@
 	"doc_panel_tab_history": "History",
 	"doc_panel_annotate": "Annotate",
 	"doc_panel_annotate_stop": "Done",
+	"doc_panel_annotate_hint": "Click and drag to mark an area",
 	"doc_panel_annotation_thread_title": "Annotation",
 	"doc_panel_discussion_annotation_tab": "Annotation · Page {page}",
 	"pdf_annotations_show": "Show annotations",
@@ -375,6 +382,8 @@
 	"dashboard_needs_metadata_heading": "Missing Metadata",
 	"dashboard_needs_metadata_show_all": "Show all",
 	"dashboard_recent_heading": "Recent Activity",
+	"dashboard_stats_documents": "Documents",
+	"dashboard_stats_persons": "Persons",
 	"dashboard_resume_label": "Last opened:",
 	"dashboard_resume_fallback": "Unknown document",
 	"doc_status_placeholder": "Placeholder",

frontend/messages/es.json

@@ -223,6 +223,12 @@
 	"admin_label_initial_password": "Contraseña",
 	"doc_file_error_preview": "No se pudo cargar la vista previa.",
 	"doc_download_title": "Descargar",
+	"topbar_back_label": "Volver a la lista de documentos",
+	"topbar_more_actions": "Más acciones",
+	"topbar_overflow_more": "+{count} más",
+	"topbar_overflow_suffix": "más",
+	"topbar_overflow_heading": "Más destinatarios",
+	"topbar_overflow_show": "Mostrar {count} destinatarios más",
 	"doc_tag_filter_title": "Filtrar por {name}",
 	"doc_conversation_title": "Ver conversación",
 	"doc_preview_iframe_title": "Vista previa del documento",
@@ -321,6 +327,7 @@
 	"doc_panel_tab_history": "Historial",
 	"doc_panel_annotate": "Anotar",
 	"doc_panel_annotate_stop": "Listo",
+	"doc_panel_annotate_hint": "Haga clic y arrastre para marcar un área",
 	"doc_panel_annotation_thread_title": "Anotación",
 	"doc_panel_discussion_annotation_tab": "Anotación · Página {page}",
 	"pdf_annotations_show": "Mostrar anotaciones",
@@ -375,6 +382,8 @@
 	"dashboard_needs_metadata_heading": "Metadatos incompletos",
 	"dashboard_needs_metadata_show_all": "Ver todos",
 	"dashboard_recent_heading": "Actividad reciente",
+	"dashboard_stats_documents": "Documentos",
+	"dashboard_stats_persons": "Personas",
 	"dashboard_resume_label": "Último abierto:",
 	"dashboard_resume_fallback": "Documento desconocido",
 	"doc_status_placeholder": "Marcador",

frontend/src/lib/actions/clickOutside.svelte.spec.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, afterEach } from 'vitest';
+
+const { clickOutside } = await import('./clickOutside');
+
+describe('clickOutside action', () => {
+	const nodes: HTMLElement[] = [];
+
+	function makeNode(): HTMLElement {
+		const node = document.createElement('div');
+		document.body.appendChild(node);
+		nodes.push(node);
+		return node;
+	}
+
+	afterEach(() => {
+		nodes.forEach((n) => n.remove());
+		nodes.length = 0;
+	});
+
+	it('registers a capture-phase click listener on mount', () => {
+		const node = makeNode();
+		const original = document.addEventListener.bind(document);
+		let registered = false;
+		document.addEventListener = (type: string, _fn: unknown, opts: unknown) => {
+			if (type === 'click' && opts === true) registered = true;
+			original(type as string, _fn as EventListener, opts as boolean);
+		};
+		clickOutside(node);
+		expect(registered).toBe(true);
+		document.addEventListener = original;
+	});
+
+	it('dispatches clickoutside when clicking outside the node', () => {
+		const node = makeNode();
+		const outside = makeNode();
+		let fired = false;
+		node.addEventListener('clickoutside', () => (fired = true));
+		clickOutside(node);
+		outside.click();
+		expect(fired).toBe(true);
+	});
+
+	it('does not dispatch clickoutside when clicking inside the node', () => {
+		const node = makeNode();
+		const child = document.createElement('span');
+		node.appendChild(child);
+		let fired = false;
+		node.addEventListener('clickoutside', () => (fired = true));
+		clickOutside(node);
+		child.click();
+		expect(fired).toBe(false);
+	});
+
+	it('removes the listener on destroy', () => {
+		const node = makeNode();
+		const outside = makeNode();
+		let count = 0;
+		node.addEventListener('clickoutside', () => count++);
+		const { destroy } = clickOutside(node);
+		destroy();
+		outside.click();
+		expect(count).toBe(0);
+	});
+});

frontend/src/lib/actions/clickOutside.ts

@@ -0,0 +1,15 @@
+export function clickOutside(node: HTMLElement): { destroy: () => void } {
+	function handleClick(event: MouseEvent) {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			node.dispatchEvent(new CustomEvent('clickoutside'));
+		}
+	}
+
+	document.addEventListener('click', handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true);
+		}
+	};
+}

frontend/src/lib/components/AnnotateHintStrip.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+type Props = {
+	annotateMode: boolean;
+};
+
+let { annotateMode }: Props = $props();
+</script>
+
+{#if annotateMode}
+	<div
+		data-testid="annotate-hint-strip"
+		class="hidden h-[29px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
+		style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
+	>
+		<span class="text-[16px] font-bold tracking-wide text-primary uppercase"
+			>{m.doc_panel_annotate()}</span
+		>
+		<span class="text-[16px] text-ink-2">{m.doc_panel_annotate_hint()}</span>
+	</div>
+{/if}

frontend/src/lib/components/AnnotateHintStrip.svelte.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AnnotateHintStrip from './AnnotateHintStrip.svelte';
+
+afterEach(cleanup);
+
+describe('AnnotateHintStrip', () => {
+	it('is absent from the DOM when annotateMode is false', async () => {
+		render(AnnotateHintStrip, { annotateMode: false });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).not.toBeInTheDocument();
+	});
+
+	it('is present in the DOM when annotateMode is true', async () => {
+		render(AnnotateHintStrip, { annotateMode: true });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).toBeInTheDocument();
+	});
+
+	it('has hidden md:flex class to hide below 768px', async () => {
+		render(AnnotateHintStrip, { annotateMode: true });
+		const strip = page.getByTestId('annotate-hint-strip');
+		await expect.element(strip).toHaveClass('hidden');
+		await expect.element(strip).toHaveClass('md:flex');
+	});
+});

frontend/src/lib/components/CommentThread.svelte

@@ -312,7 +312,7 @@ onMount(async () => {
 			<div
 				data-comment-id={thread.id}
 				class={highlightedCommentId === thread.id
-					? 'rounded ring-2 ring-accent ring-offset-1 transition-shadow'
+					? 'rounded outline-2 outline-offset-1 outline-accent transition-shadow outline-dotted'
 					: ''}
 			>
 				{@render commentEntry(thread, thread.id, thread.replies.length === 0)}
@@ -323,7 +323,7 @@ onMount(async () => {
 				<div
 					data-comment-id={reply.id}
 					class="mt-3 ml-6 border-l-2 border-line pl-4 {highlightedCommentId === reply.id
-						? 'rounded ring-2 ring-accent ring-offset-1 transition-shadow'
+						? 'rounded outline-2 outline-offset-1 outline-accent transition-shadow outline-dotted'
 						: ''}"
 				>
 					{@render commentEntry(reply, thread.id, ri === thread.replies.length - 1)}

frontend/src/lib/components/DashboardMentions.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-import * as m from '$lib/paraglide/messages.js';
-
-type NotificationDTO = {
-	id: string;
-	type: 'REPLY' | 'MENTION';
-	documentId?: string;
-	referenceId?: string;
-	annotationId?: string;
-	read: boolean;
-	createdAt: string;
-	actorName?: string;
-};
-
-interface Props {
-	mentions: NotificationDTO[];
-}
-
-let { mentions }: Props = $props();
-</script>
-
-{#if mentions.length > 0}
-	<div data-testid="dashboard-mentions" class="rounded-sm border border-line bg-surface p-6">
-		<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
-			{m.dashboard_notifications_heading()}
-		</h2>
-		<div>
-			{#each mentions as mention (mention.id)}
-				<div class="flex items-center gap-3 border-b border-line py-2 last:border-0">
-					{#if mention.documentId}
-						<a
-							href={mention.annotationId
-								? `/documents/${mention.documentId}?commentId=${mention.referenceId}&annotationId=${mention.annotationId}`
-								: `/documents/${mention.documentId}?commentId=${mention.referenceId}`}
-							class="font-serif text-lg text-ink hover:text-ink-2 hover:underline"
-							>{mention.actorName ?? ''}</a
-						>
-						<span class="font-sans text-xs text-gray-400">
-							{mention.type === 'MENTION'
-								? m.dashboard_notification_mentioned()
-								: m.dashboard_notification_replied()}
-						</span>
-					{:else}
-						<span class="font-serif text-lg text-ink">{mention.actorName ?? ''}</span>
-					{/if}
-				</div>
-			{/each}
-		</div>
-		<div class="mt-4 border-t border-line pt-4">
-			<a
-				href="/notifications"
-				class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-				>{m.notification_history_view_link()}</a
-			>
-		</div>
-	</div>
-{/if}

frontend/src/lib/components/DashboardMentions.svelte.spec.ts

@@ -1,85 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-
-import DashboardMentions from './DashboardMentions.svelte';
-
-afterEach(cleanup);
-
-type NotificationDTO = {
-	id: string;
-	type: 'REPLY' | 'MENTION';
-	documentId?: string;
-	referenceId?: string;
-	annotationId?: string;
-	read: boolean;
-	createdAt: string;
-	actorName?: string;
-};
-
-function makeMention(overrides: Partial<NotificationDTO> = {}): NotificationDTO {
-	return {
-		id: 'notif-1',
-		type: 'MENTION',
-		documentId: 'doc-abc',
-		referenceId: 'comment-xyz',
-		read: false,
-		createdAt: '2026-01-15T10:00:00Z',
-		actorName: 'Anna Schmidt',
-		...overrides
-	};
-}
-
-describe('DashboardMentions', () => {
-	it('renders nothing when mentions list is empty', async () => {
-		render(DashboardMentions, { mentions: [] });
-		const widget = page.getByTestId('dashboard-mentions');
-		await expect.element(widget).not.toBeInTheDocument();
-	});
-
-	it('shows a heading when mentions are present', async () => {
-		render(DashboardMentions, { mentions: [makeMention()] });
-		const widget = page.getByTestId('dashboard-mentions');
-		await expect.element(widget).toBeInTheDocument();
-	});
-
-	it('builds link with commentId param when no annotationId', async () => {
-		render(DashboardMentions, {
-			mentions: [makeMention({ documentId: 'doc-1', referenceId: 'cmt-1' })]
-		});
-		const link = page.getByRole('link');
-		await expect.element(link).toHaveAttribute('href', '/documents/doc-1?commentId=cmt-1');
-	});
-
-	it('builds link with commentId and annotationId when annotationId is present', async () => {
-		render(DashboardMentions, {
-			mentions: [makeMention({ documentId: 'doc-2', referenceId: 'cmt-2', annotationId: 'ann-9' })]
-		});
-		const link = page.getByRole('link');
-		await expect
-			.element(link)
-			.toHaveAttribute('href', '/documents/doc-2?commentId=cmt-2&annotationId=ann-9');
-	});
-
-	it('shows actor name in each row', async () => {
-		render(DashboardMentions, { mentions: [makeMention({ actorName: 'Maria Müller' })] });
-		await expect.element(page.getByText('Maria Müller')).toBeInTheDocument();
-	});
-
-	it('shows "replied" label for REPLY type', async () => {
-		render(DashboardMentions, { mentions: [makeMention({ type: 'REPLY' })] });
-		const widget = page.getByTestId('dashboard-mentions');
-		await expect.element(widget).toBeInTheDocument();
-		const link = page.getByRole('link');
-		await expect.element(link).toBeInTheDocument();
-	});
-
-	it('renders a span instead of a link when documentId is absent', async () => {
-		render(DashboardMentions, {
-			mentions: [makeMention({ documentId: undefined, actorName: 'Lena Bauer' })]
-		});
-		await expect.element(page.getByText('Lena Bauer')).toBeInTheDocument();
-		const links = page.getByRole('link');
-		await expect.element(links).not.toBeInTheDocument();
-	});
-});

frontend/src/lib/components/DashboardRecentDocuments.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import { getLocale } from '$lib/paraglide/runtime.js';
+import type { components } from '$lib/generated/api';
 
 type Document = {
 	id: string;
@@ -9,11 +10,14 @@ type Document = {
 	sender?: { id: string; firstName: string; lastName: string };
 };
 
+type StatsDTO = components['schemas']['StatsDTO'];
+
 interface Props {
 	recentDocs: Document[];
+	stats?: StatsDTO | null;
 }
 
-let { recentDocs }: Props = $props();
+let { recentDocs, stats = null }: Props = $props();
 
 function formatDate(dateStr: string): string {
 	// updatedAt is a full ISO datetime — no T12:00:00 noon-anchor needed here
@@ -31,7 +35,10 @@ function formatDate(dateStr: string): string {
 			{m.dashboard_recent_heading()}
 		</h2>
 		{#each recentDocs as doc (doc.id)}
-			<div class="flex items-center justify-between border-b border-line py-2 last:border-0">
+			<div
+				data-testid="doc-row-{doc.id}"
+				class="flex min-h-[44px] items-center justify-between border-b border-line py-2 last:border-0"
+			>
 				<a
 					href="/documents/{doc.id}"
 					class="font-serif text-lg text-ink hover:text-ink-2 hover:underline"
@@ -48,5 +55,12 @@ function formatDate(dateStr: string): string {
 				{/if}
 			</div>
 		{/each}
+		{#if stats?.totalDocuments != null}
+			<p data-testid="dashboard-stats-footnote" class="mt-4 font-sans text-sm text-ink-3">
+				{stats.totalDocuments}
+				{m.dashboard_stats_documents()} · {stats.totalPersons}
+				{m.dashboard_stats_persons()}
+			</p>
+		{/if}
 	</div>
 {/if}

frontend/src/lib/components/DashboardRecentDocuments.svelte.spec.ts

@@ -55,3 +55,40 @@ describe('DashboardRecentDocuments', () => {
 		await expect.element(dateEl).toBeInTheDocument();
 	});
 });
+
+describe('DashboardRecentDocuments — stats footnote', () => {
+	it('renders stats footnote when stats.totalDocuments is provided', async () => {
+		render(DashboardRecentDocuments, {
+			recentDocs: [makeDoc('d1', 'Taufschein')],
+			stats: { totalDocuments: 248, totalPersons: 34 }
+		});
+		const footnote = page.getByTestId('dashboard-stats-footnote');
+		await expect.element(footnote).toBeInTheDocument();
+	});
+
+	it('omits stats footnote when stats is null', async () => {
+		render(DashboardRecentDocuments, {
+			recentDocs: [makeDoc('d1', 'Taufschein')],
+			stats: null
+		});
+		const footnote = page.getByTestId('dashboard-stats-footnote');
+		await expect.element(footnote).not.toBeInTheDocument();
+	});
+
+	it('shows "0 Documents" when totalDocuments is 0', async () => {
+		render(DashboardRecentDocuments, {
+			recentDocs: [makeDoc('d1', 'Taufschein')],
+			stats: { totalDocuments: 0, totalPersons: 0 }
+		});
+		const footnote = page.getByTestId('dashboard-stats-footnote');
+		await expect.element(footnote).toBeInTheDocument();
+	});
+});
+
+describe('DashboardRecentDocuments — touch targets', () => {
+	it('each doc row has min-h-[44px] class for WCAG touch target', async () => {
+		render(DashboardRecentDocuments, { recentDocs: [makeDoc('d1', 'Taufschein')] });
+		const row = page.getByTestId('doc-row-d1');
+		await expect.element(row).toHaveClass('min-h-[44px]');
+	});
+});

frontend/src/lib/components/DocumentStatusChip.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { statusDotClass, statusLabel } from '$lib/utils/personFormat';
+
+type DocumentStatus = 'PLACEHOLDER' | 'UPLOADED' | 'TRANSCRIBED' | 'REVIEWED' | 'ARCHIVED';
+
+type Props = {
+	status: DocumentStatus;
+};
+
+let { status }: Props = $props();
+
+const dotClass = $derived(statusDotClass(status));
+const label = $derived(statusLabel(status));
+</script>
+
+<span
+	class="hidden shrink-0 md:block {dotClass} h-4 w-4 rounded-full"
+	title={label}
+	aria-label={label}
+></span>

frontend/src/lib/components/DocumentTopBar.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import { formatDate } from '$lib/utils/personFormat';
+import { clickOutside } from '$lib/actions/clickOutside';
+import PersonChipRow from './PersonChipRow.svelte';
+import AnnotateHintStrip from './AnnotateHintStrip.svelte';
+import OverflowPillButton from './OverflowPillButton.svelte';
 
 type Person = { id: string; firstName: string; lastName: string };
 
@@ -25,128 +30,207 @@ type Props = {
 let { doc, canWrite, canAnnotate, fileUrl, annotateMode = $bindable() }: Props = $props();
 
 const isPdf = $derived(!!doc.filePath && doc.contentType?.startsWith('application/pdf'));
+const receivers = $derived(doc.receivers ?? []);
+const extraCount = $derived(Math.max(0, receivers.length - 2));
+const overflowPersons = $derived(receivers.slice(2));
 
-const receiverDisplay = $derived.by(() => {
-	const receivers = doc.receivers ?? [];
-	if (receivers.length === 0) return null;
-	const shown = receivers.slice(0, 2);
-	const extra = receivers.length - shown.length;
-	const names = shown.map((r) => `${r.firstName} ${r.lastName}`).join(', ');
-	return extra > 0 ? `${names} +${extra}` : names;
-});
+const shortDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'short') : null);
+const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long') : null);
 
-const compactMeta = $derived.by(() => {
-	const parts: string[] = [];
-	if (doc.documentDate) {
-		parts.push(
-			new Intl.DateTimeFormat('de-DE', {
-				day: 'numeric',
-				month: 'numeric',
-				year: 'numeric'
-			}).format(new Date(doc.documentDate + 'T12:00:00'))
-		);
-	}
-	if (doc.sender) {
-		const senderName = `${doc.sender.firstName} ${doc.sender.lastName}`;
-		const receiver = receiverDisplay;
-		parts.push(receiver ? `${senderName} → ${receiver}` : senderName);
-	} else if (receiverDisplay) {
-		parts.push(`→ ${receiverDisplay}`);
-	}
-	return parts.join(' · ');
-});
+let mobileMenuOpen = $state(false);
 </script>
 
-<div
-	class="z-20 flex shrink-0 items-center justify-between border-b border-line bg-surface px-3 py-3 shadow-sm sm:px-6"
-	data-topbar
->
-	<!-- Left: back + title -->
-	<div class="flex min-w-0 items-center gap-4 overflow-hidden">
+{#snippet annotateBtn(mobile: boolean)}
+	<button
+		onclick={() => {
+			annotateMode = true;
+			if (mobile) mobileMenuOpen = false;
+		}}
+		aria-label={m.doc_panel_annotate()}
+		aria-pressed={false}
+		class={mobile
+			? 'flex w-full items-center gap-2 rounded px-3 py-2 text-left text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
+			: 'hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex'}
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-5 w-5 shrink-0"
+		/>
+		{m.doc_panel_annotate()}
+	</button>
+{/snippet}
+
+{#snippet annotateStopBtn(mobile: boolean)}
+	<button
+		onclick={() => {
+			annotateMode = false;
+			if (mobile) mobileMenuOpen = false;
+		}}
+		aria-label={m.doc_panel_annotate_stop()}
+		aria-pressed={true}
+		class={mobile
+			? 'flex w-full items-center gap-2 rounded bg-primary px-3 py-2 text-left text-[16px] text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'
+			: 'flex items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary'}
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-5 w-5 shrink-0 invert"
+		/>
+		{m.doc_panel_annotate_stop()}
+	</button>
+{/snippet}
+
+{#snippet downloadLink(mobile: boolean)}
+	<a
+		href={fileUrl}
+		download={doc.originalFilename}
+		onclick={() => {
+			if (mobile) mobileMenuOpen = false;
+		}}
+		class={mobile
+			? 'flex items-center gap-2 rounded px-3 py-2 text-[16px] text-ink transition hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary'
+			: 'hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block'}
+		title={m.doc_download_title()}
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-5 w-5 shrink-0"
+		/>
+		{#if mobile}{m.doc_download_title()}{/if}
+	</a>
+{/snippet}
+
+<div data-topbar class="relative z-10 border-b border-line bg-surface shadow-sm">
+	<!-- Main row -->
+	<div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
+		<!-- Accent bar -->
+		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
+
+		<!-- Back link — 44×44px touch target -->
 		<a
 			href="/"
-			class="group flex shrink-0 items-center gap-2 font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+			aria-label={m.topbar_back_label()}
+			class="group -ml-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
 		>
-			<div
-				class="flex h-8 w-8 items-center justify-center rounded-full bg-canvas transition-colors group-hover:bg-accent"
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4"
-				/>
-			</div>
-			<span class="hidden sm:inline">{m.btn_back()}</span>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5"
+			/>
 		</a>
 
-		<div class="min-w-0 border-l border-line pl-4">
+		<!-- Divider -->
+		<div class="mx-2 h-6 w-px shrink-0 bg-line"></div>
+
+		<!-- Title + meta -->
+		<div class="min-w-0 flex-1 overflow-hidden">
 			<h1
-				class="truncate font-serif text-base leading-tight text-ink"
+				class="truncate font-serif text-[18px] leading-tight text-ink lg:text-[20px]"
 				title={doc.title ?? doc.originalFilename ?? ''}
 			>
 				{doc.title || doc.originalFilename}
 			</h1>
-			{#if compactMeta}
-				<p class="truncate font-sans text-xs text-ink-2" title={compactMeta}>
-					{compactMeta}
+			{#if shortDate}
+				<p class="font-sans text-[16px] text-ink-2">
+					<span class="lg:hidden">{shortDate}</span>
+					<span class="hidden lg:inline">{longDate}</span>
 				</p>
 			{/if}
 		</div>
+
+		<!-- Chip row — desktop only, hidden on small screens to make room for buttons -->
+		<div class="mx-3 hidden min-w-0 shrink-0 md:block">
+			<PersonChipRow sender={doc.sender} receivers={receivers} abbreviated={true} extraCount={0} />
+		</div>
+
+		<!-- Overflow pill button (desktop) + status dot -->
+		{#if extraCount > 0}
+			<OverflowPillButton extraCount={extraCount} persons={overflowPersons} />
+		{/if}
+
+		<!-- Divider between metadata and actions -->
+		<div class="mx-3 hidden h-6 w-px shrink-0 bg-line md:block"></div>
+
+		<!-- Action buttons -->
+		<div class="flex shrink-0 items-center gap-1.5 pr-3 font-sans">
+			{#if canAnnotate && isPdf && !annotateMode}
+				{@render annotateBtn(false)}
+			{/if}
+
+			{#if canAnnotate && isPdf && annotateMode}
+				{@render annotateStopBtn(false)}
+			{/if}
+
+			{#if canWrite && !annotateMode}
+				<a
+					href="/documents/{doc.id}/edit"
+					aria-label={m.btn_edit()}
+					class="flex items-center gap-1.5 rounded border border-primary bg-transparent px-3 py-1.5 text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary"
+				>
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-5 w-5"
+					/>
+					<span class="hidden sm:inline">{m.btn_edit()}</span>
+				</a>
+			{/if}
+
+			{#if doc.filePath && !annotateMode}
+				{@render downloadLink(false)}
+			{/if}
+
+			<!-- Kebab menu — mobile only, contains actions hidden below md -->
+			{#if (canAnnotate && isPdf) || doc.filePath}
+				<div
+					role="group"
+					class="relative md:hidden"
+					use:clickOutside
+					onclickoutside={() => (mobileMenuOpen = false)}
+				>
+					<button
+						type="button"
+						onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
+						aria-label={m.topbar_more_actions()}
+						aria-haspopup="true"
+						aria-expanded={mobileMenuOpen}
+						class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary"
+					>
+						<img
+							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/View-More-MD.svg"
+							alt=""
+							aria-hidden="true"
+							class="h-5 w-5"
+						/>
+					</button>
+
+					{#if mobileMenuOpen}
+						<div
+							role="menu"
+							class="absolute top-full right-0 z-50 mt-1 min-w-[200px] rounded-md border border-line bg-surface p-2 shadow-lg"
+						>
+							{#if canAnnotate && isPdf && !annotateMode}
+								{@render annotateBtn(true)}
+							{/if}
+
+							{#if doc.filePath}
+								{@render downloadLink(true)}
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
 	</div>
 
-	<!-- Right: actions -->
-	<div class="ml-4 flex shrink-0 items-center gap-2 font-sans">
-		{#if canAnnotate && isPdf}
-			<button
-				onclick={() => (annotateMode = !annotateMode)}
-				aria-label={annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
-				class="flex items-center gap-1.5 rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
-					? 'bg-primary text-primary-fg'
-					: 'border border-primary text-ink hover:bg-primary hover:text-primary-fg'}"
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4 {annotateMode ? 'invert' : ''}"
-				/>
-				<span class="hidden sm:inline"
-					>{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}</span
-				>
-			</button>
-		{/if}
-
-		{#if canWrite}
-			<a
-				href="/documents/{doc.id}/edit"
-				aria-label={m.btn_edit()}
-				class="flex items-center gap-2 rounded border border-primary bg-transparent px-3 py-1.5 text-xs font-medium text-ink transition hover:bg-primary hover:text-primary-fg"
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4"
-				/>
-				<span class="hidden sm:inline">{m.btn_edit()}</span>
-			</a>
-		{/if}
-
-		{#if doc.filePath}
-			<a
-				href={fileUrl}
-				download={doc.originalFilename}
-				class="rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent"
-				title={m.doc_download_title()}
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-5 w-5"
-				/>
-			</a>
-		{/if}
-	</div>
+	<!-- Hint strip — only when annotateMode, only at ≥768px -->
+	<AnnotateHintStrip annotateMode={annotateMode} />
 </div>

frontend/src/lib/components/LanguageSwitcher.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { setLocale, getLocale } from '$lib/paraglide/runtime';
 
+let { inverted = false }: { inverted?: boolean } = $props();
+
 const locales = ['DE', 'EN', 'ES'] as const;
 const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
 const activeLocale = $derived(getLocale().toUpperCase());
@@ -10,8 +12,14 @@ const activeLocale = $derived(getLocale().toUpperCase());
 	<button
 		type="button"
 		onclick={() => setLocale(localeMap[locale])}
-		class="font-sans tracking-widest transition-colors
-               {activeLocale === locale ? 'font-bold text-ink' : 'font-normal text-ink-3 hover:text-ink'}"
+		class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring
+               {activeLocale === locale
+			? inverted
+				? 'font-bold text-white'
+				: 'font-bold text-ink'
+			: inverted
+				? 'font-normal text-white/70 hover:text-white'
+				: 'font-normal text-ink-3 hover:text-ink'}"
 	>
 		{locale}
 	</button>

frontend/src/lib/components/LanguageSwitcher.svelte.spec.ts

@@ -0,0 +1,94 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import LanguageSwitcher from './LanguageSwitcher.svelte';
+
+const mockSetLocale = vi.hoisted(() => vi.fn());
+
+vi.mock('$lib/paraglide/runtime', () => ({
+	getLocale: vi.fn(() => 'de'),
+	setLocale: mockSetLocale
+}));
+
+beforeEach(() => mockSetLocale.mockClear());
+afterEach(cleanup);
+
+// ─── inverted=true (dark background) ──────────────────────────────────────
+
+describe('LanguageSwitcher – inverted=true', () => {
+	it('active locale button has text-white and font-bold', async () => {
+		render(LanguageSwitcher, { inverted: true });
+
+		const el = await page.getByRole('button', { name: 'DE' }).element();
+
+		expect(el.className).toMatch(/\btext-white\b/);
+		expect(el.className).toMatch(/\bfont-bold\b/);
+	});
+
+	it('inactive locale buttons have text-white/70', async () => {
+		render(LanguageSwitcher, { inverted: true });
+
+		const el = await page.getByRole('button', { name: 'EN' }).element();
+
+		expect(el.className).toMatch(/text-white\/70/);
+	});
+
+	it('inactive locale buttons do not have font-bold', async () => {
+		render(LanguageSwitcher, { inverted: true });
+
+		const el = await page.getByRole('button', { name: 'EN' }).element();
+
+		expect(el.className).not.toMatch(/\bfont-bold\b/);
+	});
+});
+
+// ─── inverted=false (light background) ─────────────────────────────────────
+
+describe('LanguageSwitcher – inverted=false', () => {
+	it('active locale button has text-ink and font-bold', async () => {
+		render(LanguageSwitcher, { inverted: false });
+
+		const el = await page.getByRole('button', { name: 'DE' }).element();
+
+		expect(el.className).toMatch(/\btext-ink\b/);
+		expect(el.className).toMatch(/\bfont-bold\b/);
+	});
+
+	it('inactive locale buttons have text-ink-3', async () => {
+		render(LanguageSwitcher, { inverted: false });
+
+		const el = await page.getByRole('button', { name: 'EN' }).element();
+
+		expect(el.className).toMatch(/\btext-ink-3\b/);
+	});
+
+	it('inactive locale buttons do not have text-white', async () => {
+		render(LanguageSwitcher, { inverted: false });
+
+		const el = await page.getByRole('button', { name: 'EN' }).element();
+
+		expect(el.className).not.toMatch(/\btext-white\b/);
+	});
+});
+
+// ─── locale switching ──────────────────────────────────────────────────────
+
+describe('LanguageSwitcher – locale switching', () => {
+	it('calls setLocale with en when EN button is clicked', async () => {
+		render(LanguageSwitcher, { inverted: false });
+
+		const el = await page.getByRole('button', { name: 'EN' }).element();
+		el.click();
+
+		expect(mockSetLocale).toHaveBeenCalledWith('en');
+	});
+
+	it('calls setLocale with es when ES button is clicked', async () => {
+		render(LanguageSwitcher, { inverted: false });
+
+		const el = await page.getByRole('button', { name: 'ES' }).element();
+		el.click();
+
+		expect(mockSetLocale).toHaveBeenCalledWith('es');
+	});
+});

frontend/src/lib/components/MentionEditor.svelte

@@ -187,7 +187,7 @@ const popupOpen = $derived(query !== null);
 <div class="relative">
 	<textarea
 		{@attach attachTextarea}
-		class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+		class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		rows={rows}
 		placeholder={placeholder}
 		disabled={disabled}

frontend/src/lib/components/NotificationBell.svelte

@@ -154,7 +154,7 @@ onDestroy(() => {
 			: m.notification_bell_label()}
 		aria-expanded={open}
 		aria-haspopup="true"
-		class="relative rounded-sm p-2 text-ink-2 transition-colors hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	>
 		<!-- Bell SVG -->
 		<svg

frontend/src/lib/components/OverflowPillButton.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+import { tick } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
+
+type Person = { id: string; firstName: string; lastName: string };
+
+type Props = {
+	extraCount: number;
+	persons: Person[];
+};
+
+let { extraCount, persons }: Props = $props();
+
+let open = $state(false);
+let buttonEl: HTMLButtonElement | undefined = $state();
+
+function toggle() {
+	open = !open;
+}
+
+async function close() {
+	open = false;
+	await tick();
+	buttonEl?.focus();
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Escape') {
+		e.stopPropagation();
+		close();
+	}
+}
+</script>
+
+<div
+	role="group"
+	class="relative hidden md:block"
+	use:clickOutside
+	onclickoutside={() => (open = false)}
+	onkeydown={handleKeydown}
+>
+	<button
+		bind:this={buttonEl}
+		type="button"
+		aria-haspopup="true"
+		aria-expanded={open}
+		aria-label={m.topbar_overflow_show({ count: extraCount })}
+		onclick={toggle}
+		onkeydown={handleKeydown}
+		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
+	>
+		+{extraCount}<span class="hidden lg:inline">&nbsp;{m.topbar_overflow_suffix()}</span>
+	</button>
+
+	{#if open}
+		<div
+			role="list"
+			class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
+		>
+			<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">
+				{m.topbar_overflow_heading()}
+			</p>
+			{#each persons as person (person.id)}
+				<div role="listitem">
+					<a
+						href="/persons/{person.id}"
+						class="block py-0.5 text-[18px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
+					>
+						{person.firstName}
+						{person.lastName}
+					</a>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/OverflowPillButton.svelte.spec.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page, userEvent } from 'vitest/browser';
+import OverflowPillButton from './OverflowPillButton.svelte';
+
+afterEach(cleanup);
+
+const persons = [
+	{ id: 'p1', firstName: 'Anna', lastName: 'Müller' },
+	{ id: 'p2', firstName: 'Hans', lastName: 'Schmidt' }
+];
+
+describe('OverflowPillButton', () => {
+	it('renders button with correct aria-haspopup and collapsed aria-expanded', async () => {
+		render(OverflowPillButton, { extraCount: 2, persons });
+		const btn = page.getByRole('button');
+		await expect.element(btn).toHaveAttribute('aria-haspopup', 'true');
+		await expect.element(btn).toHaveAttribute('aria-expanded', 'false');
+	});
+
+	it('shows tooltip on click and sets aria-expanded true', async () => {
+		render(OverflowPillButton, { extraCount: 2, persons });
+		const btn = page.getByRole('button');
+		await userEvent.click(btn);
+		const tooltip = page.getByRole('list');
+		await expect.element(tooltip).toBeInTheDocument();
+		await expect.element(btn).toHaveAttribute('aria-expanded', 'true');
+	});
+
+	it('closes tooltip on Escape and returns focus to button', async () => {
+		render(OverflowPillButton, { extraCount: 2, persons });
+		const btn = page.getByRole('button');
+		await userEvent.click(btn);
+		await expect.element(page.getByRole('list')).toBeInTheDocument();
+		await userEvent.keyboard('{Escape}');
+		await expect.element(page.getByRole('list')).not.toBeInTheDocument();
+		await expect.element(btn).toHaveFocus();
+	});
+
+	it('renders person links inside tooltip', async () => {
+		render(OverflowPillButton, { extraCount: 2, persons });
+		await userEvent.click(page.getByRole('button'));
+		const links = page.getByRole('link');
+		await expect.element(links.nth(0)).toHaveAttribute('href', '/persons/p1');
+		await expect.element(links.nth(1)).toHaveAttribute('href', '/persons/p2');
+	});
+});

frontend/src/lib/components/OverflowPillDisplay.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+type Props = {
+	extraCount: number;
+};
+
+let { extraCount }: Props = $props();
+</script>
+
+<span
+	aria-hidden="true"
+	class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2"
+>
+	+{extraCount}
+</span>

frontend/src/lib/components/PanelHistory.svelte

@@ -302,7 +302,7 @@ $effect(() => {
 					<select
 						id="compare-a"
 						bind:value={compareA}
-						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
@@ -317,7 +317,7 @@ $effect(() => {
 					<select
 						id="compare-b"
 						bind:value={compareB}
-						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}

frontend/src/lib/components/PersonChip.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { abbreviateName, personAvatarColor } from '$lib/utils/personFormat';
+
+type Person = { id: string; firstName: string; lastName: string };
+
+type Props = {
+	person: Person;
+	abbreviated: boolean;
+};
+
+let { person, abbreviated }: Props = $props();
+
+const displayName = $derived(
+	abbreviated ? abbreviateName(person) : `${person.firstName} ${person.lastName}`
+);
+const avatarColor = $derived(personAvatarColor(person.id));
+const initials = $derived(
+	`${person.firstName.charAt(0)}${person.lastName.charAt(0)}`.toUpperCase()
+);
+</script>
+
+<a
+	href="/persons/{person.id}"
+	class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5 hover:border-primary hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
+>
+	<span
+		class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white"
+		style="background-color: {avatarColor}"
+		aria-hidden="true"
+	>
+		{initials}
+	</span>
+	<span class="text-[14px] font-semibold text-ink">{displayName}</span>
+</a>

frontend/src/lib/components/PersonChipRow.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+import PersonChip from './PersonChip.svelte';
+import OverflowPillDisplay from './OverflowPillDisplay.svelte';
+
+type Person = { id: string; firstName: string; lastName: string };
+
+type Props = {
+	sender: Person | null | undefined;
+	receivers: Person[];
+	abbreviated: boolean;
+	extraCount: number;
+};
+
+let { sender, receivers, abbreviated, extraCount }: Props = $props();
+
+const visibleReceivers = $derived(receivers.slice(0, 2));
+</script>
+
+<div class="hidden min-w-0 items-center gap-1.5 overflow-hidden xs:flex">
+	{#if sender}
+		<PersonChip person={sender} abbreviated={abbreviated} />
+	{/if}
+
+	{#if sender && receivers.length > 0}
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-6 w-6 shrink-0 opacity-40"
+		/>
+	{/if}
+
+	{#each visibleReceivers as receiver, i (receiver.id)}
+		<span class={i === 1 ? 'hidden md:contents' : ''}>
+			<PersonChip person={receiver} abbreviated={abbreviated} />
+		</span>
+	{/each}
+
+	{#if extraCount > 0}
+		<OverflowPillDisplay extraCount={extraCount} />
+	{/if}
+</div>

frontend/src/lib/components/PersonMultiSelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { components } from '$lib/generated/api';
 import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
 type Person = components['schemas']['Person'];
 
 interface Props {
@@ -56,20 +57,6 @@ function selectPerson(person: Person) {
 function removePerson(id: string | undefined) {
 	selectedPersons = selectedPersons.filter((p) => p.id !== id);
 }
-
-function clickOutside(node: HTMLElement) {
-	const handleClick = (e: MouseEvent) => {
-		if (node && !node.contains(e.target as Node) && !e.defaultPrevented) {
-			showDropdown = false;
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
 </script>
 
 <svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
@@ -78,7 +65,7 @@ function clickOutside(node: HTMLElement) {
 	<input type="hidden" name="receiverIds" value={person.id} />
 {/each}
 
-<div class="relative" use:clickOutside>
+<div class="relative" use:clickOutside onclickoutside={() => (showDropdown = false)}>
 	<div
 		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>

frontend/src/lib/components/PersonTypeahead.svelte

@@ -2,6 +2,7 @@
 import { untrack } from 'svelte';
 import type { components } from '$lib/generated/api';
 import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
 type Person = components['schemas']['Person'];
 
 interface Props {
@@ -118,23 +119,9 @@ function selectPerson(person: Person) {
 	showDropdown = false;
 	onchange?.(person.id!);
 }
-
-function clickOutside(node: HTMLElement) {
-	const handleClick = (event: MouseEvent) => {
-		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
-			showDropdown = false;
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
 </script>
 
-<div class="relative" use:clickOutside>
+<div class="relative" use:clickOutside onclickoutside={() => (showDropdown = false)}>
 	<label
 		for={name}
 		class={compact
@@ -154,8 +141,8 @@ function clickOutside(node: HTMLElement) {
 		onfocus={handleFocus}
 		placeholder={placeholder ?? m.comp_typeahead_placeholder()}
 		class={compact
-			? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
-			: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'}
+			? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'
+			: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}
 	/>
 
 	{#if showDropdown && (results.length > 0 || loading)}

frontend/src/lib/components/TagInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
 
 interface Props {
 	tags?: string[];
@@ -66,23 +67,9 @@ function handleKeydown(e: KeyboardEvent) {
 		activeIndex = (activeIndex - 1 + suggestions.length) % suggestions.length;
 	}
 }
-
-function clickOutside(node: HTMLElement) {
-	const handleClick = (e: MouseEvent) => {
-		if (node && !node.contains(e.target as Node) && !e.defaultPrevented) {
-			showSuggestions = false;
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
 </script>
 
-<div class="w-full" use:clickOutside>
+<div class="w-full" use:clickOutside onclickoutside={() => (showSuggestions = false)}>
 	<!-- Tag Container -->
 	<div
 		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"

frontend/src/lib/components/ThemeToggle.svelte

@@ -31,12 +31,12 @@ function toggle() {
 	onclick={toggle}
 	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
 	title={theme === 'dark' ? 'light mode' : 'dark mode'}
-	class="rounded p-1.5 text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+	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-4 w-4"
+			class="h-5 w-5"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -52,7 +52,7 @@ function toggle() {
 	{:else}
 		<!-- Moon icon — click to go dark -->
 		<svg
-			class="h-4 w-4"
+			class="h-5 w-5"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"

frontend/src/lib/components/document/DescriptionSection.svelte

@@ -49,7 +49,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 						titleDirty = true;
 					}}
 					required={titleRequired}
-					class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+					class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</div>
 		{/if}
@@ -65,7 +65,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 				name="documentLocation"
 				value={initialDocumentLocation}
 				placeholder={m.form_placeholder_archive_location()}
-				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 			<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
 		</div>
@@ -87,7 +87,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 				name="summary"
 				rows="5"
 				placeholder={m.form_placeholder_content()}
-				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				>{initialSummary}</textarea
 			>
 		</div>

frontend/src/lib/components/document/TranscriptionSection.svelte

@@ -13,7 +13,7 @@ let { initialTranscription = '' }: { initialTranscription?: string } = $props();
 		name="transcription"
 		rows="12"
 		placeholder={m.form_placeholder_transcription()}
-		class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+		class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>{initialTranscription}</textarea
 	>
 </div>

frontend/src/lib/components/document/WhoWhenSection.svelte

@@ -71,7 +71,7 @@ $effect(() => {
 				placeholder={m.form_placeholder_date()}
 				maxlength="10"
 				class="block w-full rounded border border-line p-2 text-sm shadow-sm
-                       {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
+                       {dateInvalid ? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
 				aria-describedby={dateInvalid ? 'date-error' : undefined}
 			/>
 			<input type="hidden" name="documentDate" value={dateIso} />
@@ -91,7 +91,7 @@ $effect(() => {
 				name="location"
 				value={initialLocation}
 				placeholder={m.form_placeholder_location()}
-				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</div>
 

frontend/src/lib/components/user/UserGroupsSection.svelte

@@ -18,7 +18,7 @@ let selected = $derived([...selectedGroupIds]);
 				name="groupIds"
 				value={group.id}
 				bind:group={selected}
-				class="rounded border-line text-ink focus:ring-accent"
+				class="rounded border-line text-ink focus:ring-focus-ring"
 			/>
 			{group.name}
 		</label>

frontend/src/lib/components/user/UserPasswordSection.svelte

@@ -13,7 +13,7 @@ let { required = false }: { required?: boolean } = $props();
 			type="password"
 			name="newPassword"
 			required={required}
-			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</label>
 
@@ -25,7 +25,7 @@ let { required = false }: { required?: boolean } = $props();
 			type="password"
 			name="confirmPassword"
 			required={required}
-			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</label>
 </div>

frontend/src/lib/components/user/UserProfileSection.svelte

@@ -37,7 +37,7 @@ function handleBirthDateInput(e: Event) {
 				type="text"
 				name="firstName"
 				value={firstName}
-				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</label>
 
@@ -49,7 +49,7 @@ function handleBirthDateInput(e: Event) {
 				type="text"
 				name="lastName"
 				value={lastName}
-				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</label>
 	</div>
@@ -63,7 +63,7 @@ function handleBirthDateInput(e: Event) {
 			placeholder="TT.MM.JJJJ"
 			value={birthDateDisplay}
 			oninput={handleBirthDateInput}
-			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 		<input type="hidden" name="birthDate" value={birthDateIso} />
 	</label>
@@ -76,7 +76,7 @@ function handleBirthDateInput(e: Event) {
 			type="email"
 			name="email"
 			value={email}
-			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</label>
 
@@ -88,7 +88,7 @@ function handleBirthDateInput(e: Event) {
 			name="contact"
 			rows="3"
 			placeholder={m.profile_contact_placeholder()}
-			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			>{contact}</textarea
 		>
 	</label>

frontend/src/lib/utils/date.ts

@@ -31,6 +31,63 @@ export function germanToIso(german: string): string {
 	return `${y}-${m}-${d}`;
 }
 
+/**
+ * Formats a raw date string into German DD.MM.YYYY format.
+ *
+ * Handles two modes:
+ * - Pure digit stream (no dots): auto-inserts dots after position 2 and 4
+ * - Manual dot entry: preserves user-typed dots, pads single-digit day/month,
+ *   and overflows extra digits from day→month and month→year
+ */
+export function formatGermanDateInput(raw: string): string {
+	if (!raw.includes('.')) {
+		const digits = raw.replace(/\D/g, '').slice(0, 8);
+		if (digits.length <= 2) return digits;
+		if (digits.length <= 4) return `${digits.slice(0, 2)}.${digits.slice(2)}`;
+		return `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+
+	const trailingDot = raw.endsWith('.');
+	const parts = raw.split('.').map((p) => p.replace(/\D/g, ''));
+
+	let day = parts[0] ?? '';
+	let month = parts[1] ?? '';
+	let year = parts[2] ?? '';
+
+	let dayOverflowed = false;
+	if (day.length > 2) {
+		month = day.slice(2) + month;
+		day = day.slice(0, 2);
+		dayOverflowed = true;
+	}
+
+	let monthOverflowed = false;
+	if (month.length > 2) {
+		year = month.slice(2) + year;
+		month = month.slice(0, 2);
+		monthOverflowed = true;
+	}
+
+	year = year.slice(0, 4);
+
+	const afterDay = !dayOverflowed && parts.length >= 2;
+
+	if (day.length === 1 && (month || (trailingDot && !dayOverflowed))) {
+		day = '0' + day;
+	}
+	if (month.length === 1 && (year || (trailingDot && afterDay && !monthOverflowed))) {
+		month = '0' + month;
+	}
+
+	if (year) return `${day}.${month}.${year}`;
+	if (month) {
+		const dot2 = trailingDot && afterDay && !monthOverflowed ? '.' : '';
+		return `${day}.${month}${dot2}`;
+	}
+	const dot1 = trailingDot && !dayOverflowed ? '.' : '';
+	return `${day}${dot1}`;
+}
+
 /**
  * Handles a date input event for German-format date fields (DD.MM.YYYY).
  * Strips non-digits, formats with dots, mutates the input's displayed value,
@@ -38,15 +95,7 @@ export function germanToIso(german: string): string {
  */
 export function handleGermanDateInput(e: Event): { display: string; iso: string } {
 	const input = e.target as HTMLInputElement;
-	const digits = input.value.replace(/\D/g, '').slice(0, 8);
-	let display: string;
-	if (digits.length <= 2) {
-		display = digits;
-	} else if (digits.length <= 4) {
-		display = `${digits.slice(0, 2)}.${digits.slice(2)}`;
-	} else {
-		display = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
-	}
+	const display = formatGermanDateInput(input.value);
 	input.value = display;
 	return { display, iso: germanToIso(display) };
 }

frontend/src/lib/utils/personFormat.spec.ts

@@ -0,0 +1,171 @@
+import { describe, it, expect } from 'vitest';
+import {
+	abbreviateName,
+	formatXsMeta,
+	personAvatarColor,
+	formatDate,
+	statusDotClass,
+	statusLabel
+} from './personFormat';
+
+// ─── abbreviateName ──────────────────────────────────────────────────────────
+
+describe('abbreviateName', () => {
+	it('abbreviates first name to initial + last name', () => {
+		expect(abbreviateName({ firstName: 'Karl', lastName: 'Raddatz' })).toBe('K. Raddatz');
+	});
+
+	it('returns single name as-is when no last name', () => {
+		expect(abbreviateName({ firstName: 'Elfriede', lastName: '' })).toBe('Elfriede');
+	});
+
+	it('preserves hyphenated last name', () => {
+		expect(abbreviateName({ firstName: 'Karl', lastName: 'Müller-Schmidt' })).toBe(
+			'K. Müller-Schmidt'
+		);
+	});
+
+	it('handles leading/trailing whitespace in names', () => {
+		expect(abbreviateName({ firstName: '  Karl  ', lastName: '  Raddatz  ' })).toBe('K. Raddatz');
+	});
+});
+
+// ─── formatXsMeta ────────────────────────────────────────────────────────────
+
+type Doc = {
+	sender?: { firstName: string; lastName: string } | null;
+	receivers?: { firstName: string; lastName: string }[];
+	documentDate?: string | null;
+};
+
+describe('formatXsMeta', () => {
+	const sender = { firstName: 'Karl', lastName: 'Raddatz' };
+	const receiver1 = { firstName: 'Elfriede', lastName: 'Raddatz' };
+	const receiver2 = { firstName: 'Anna', lastName: 'Müller' };
+	const receiver3 = { firstName: 'Hans', lastName: 'Schmidt' };
+
+	it('formats sender with no receivers and date', () => {
+		const doc: Doc = { sender, receivers: [], documentDate: '1943-12-24' };
+		expect(formatXsMeta(doc)).toBe('K.Raddatz · 24.12.1943');
+	});
+
+	it('formats sender with one receiver and date', () => {
+		const doc: Doc = { sender, receivers: [receiver1], documentDate: '1943-12-24' };
+		expect(formatXsMeta(doc)).toBe('K.Raddatz → E.Raddatz · 24.12.1943');
+	});
+
+	it('formats sender with three receivers showing +2', () => {
+		const doc: Doc = {
+			sender,
+			receivers: [receiver1, receiver2, receiver3],
+			documentDate: '1943-12-24'
+		};
+		expect(formatXsMeta(doc)).toBe('K.Raddatz → E.Raddatz +2 · 24.12.1943');
+	});
+
+	it('formats without sender', () => {
+		const doc: Doc = { sender: null, receivers: [receiver1], documentDate: '1943-12-24' };
+		expect(formatXsMeta(doc)).toBe('E.Raddatz · 24.12.1943');
+	});
+
+	it('formats without date', () => {
+		const doc: Doc = { sender, receivers: [], documentDate: null };
+		expect(formatXsMeta(doc)).toBe('K.Raddatz');
+	});
+
+	it('formats with no sender and no date', () => {
+		const doc: Doc = { sender: null, receivers: [receiver1], documentDate: null };
+		expect(formatXsMeta(doc)).toBe('E.Raddatz');
+	});
+});
+
+// ─── personAvatarColor ───────────────────────────────────────────────────────
+
+const PALETTE = ['#012851', '#5A3080', '#007596', '#2A6040', '#803020'];
+
+describe('personAvatarColor', () => {
+	it('returns a value from the palette', () => {
+		expect(PALETTE).toContain(personAvatarColor('abc'));
+	});
+
+	it('is deterministic — same id always returns same color', () => {
+		const id = '550e8400-e29b-41d4-a716-446655440000';
+		expect(personAvatarColor(id)).toBe(personAvatarColor(id));
+	});
+
+	it('all 5 palette entries are reachable across 1000 random UUIDs', () => {
+		const seen = new Set<string>();
+		for (let i = 0; i < 1000; i++) {
+			seen.add(personAvatarColor(crypto.randomUUID()));
+		}
+		expect(seen.size).toBe(5);
+	});
+});
+
+// ─── formatDate ──────────────────────────────────────────────────────────────
+
+describe('formatDate', () => {
+	it('formats short date as dd.mm.yyyy', () => {
+		expect(formatDate('1943-12-24', 'short')).toBe('24.12.1943');
+	});
+
+	it('formats long date with German month name', () => {
+		expect(formatDate('1943-12-24', 'long')).toBe('24. Dezember 1943');
+	});
+
+	it('does not shift Dec 31 to Jan 1 (UTC off-by-one guard)', () => {
+		expect(formatDate('1943-12-31', 'short')).toBe('31.12.1943');
+	});
+
+	it('does not shift Jan 1 to Dec 31 (UTC off-by-one guard)', () => {
+		expect(formatDate('1944-01-01', 'short')).toBe('01.01.1944');
+	});
+});
+
+// ─── statusDotClass ──────────────────────────────────────────────────────────
+
+describe('statusDotClass', () => {
+	it('PLACEHOLDER → bg-gray-400', () => {
+		expect(statusDotClass('PLACEHOLDER')).toBe('bg-gray-400');
+	});
+
+	it('UPLOADED → bg-emerald-500', () => {
+		expect(statusDotClass('UPLOADED')).toBe('bg-emerald-500');
+	});
+
+	it('TRANSCRIBED → bg-blue-400', () => {
+		expect(statusDotClass('TRANSCRIBED')).toBe('bg-blue-400');
+	});
+
+	it('REVIEWED → bg-amber-400', () => {
+		expect(statusDotClass('REVIEWED')).toBe('bg-amber-400');
+	});
+
+	it('ARCHIVED → bg-emerald-600', () => {
+		expect(statusDotClass('ARCHIVED')).toBe('bg-emerald-600');
+	});
+});
+
+// ─── statusLabel ─────────────────────────────────────────────────────────────
+
+describe('statusLabel', () => {
+	it('PLACEHOLDER → "Platzhalter"', () => {
+		expect(statusLabel('PLACEHOLDER')).toBe('Platzhalter');
+	});
+
+	it('UPLOADED → "Hochgeladen"', () => {
+		expect(statusLabel('UPLOADED')).toBe('Hochgeladen');
+	});
+
+	it('TRANSCRIBED → "Transkribiert"', () => {
+		expect(statusLabel('TRANSCRIBED')).toBe('Transkribiert');
+	});
+
+	it('REVIEWED → "Geprüft"', () => {
+		expect(statusLabel('REVIEWED')).toBe('Geprüft');
+	});
+
+	it('ARCHIVED → "Archiviert"', () => {
+		expect(statusLabel('ARCHIVED')).toBe('Archiviert');
+	});
+});

frontend/src/lib/utils/personFormat.ts

@@ -0,0 +1,102 @@
+import { formatDocumentStatus } from './documentStatusLabel';
+
+type Person = { firstName: string; lastName: string };
+type DocumentStatus = 'PLACEHOLDER' | 'UPLOADED' | 'TRANSCRIBED' | 'REVIEWED' | 'ARCHIVED';
+type DocForMeta = {
+	sender?: Person | null;
+	receivers?: Person[];
+	documentDate?: string | null;
+};
+
+const AVATAR_PALETTE = ['#012851', '#5A3080', '#007596', '#2A6040', '#803020'] as const;
+
+function djb2(str: string): number {
+	let hash = 5381;
+	for (let i = 0; i < str.length; i++) {
+		hash = (hash * 33) ^ str.charCodeAt(i);
+	}
+	return Math.abs(hash);
+}
+
+export function abbreviateName(person: Person): string {
+	const first = person.firstName.trim();
+	const last = person.lastName.trim();
+	if (!last) return first;
+	return `${first.charAt(0)}. ${last}`;
+}
+
+function abbreviateCompact(person: Person): string {
+	const first = person.firstName.trim();
+	const last = person.lastName.trim();
+	if (!last) return first;
+	return `${first.charAt(0)}.${last}`;
+}
+
+export function formatXsMeta(doc: DocForMeta): string {
+	const parts: string[] = [];
+
+	const receivers = doc.receivers ?? [];
+	if (doc.sender) {
+		const senderAbbr = abbreviateCompact(doc.sender);
+		if (receivers.length === 0) {
+			parts.push(senderAbbr);
+		} else {
+			const extra = receivers.length - 1;
+			const firstReceiver = abbreviateCompact(receivers[0]);
+			parts.push(
+				extra > 0
+					? `${senderAbbr} → ${firstReceiver} +${extra}`
+					: `${senderAbbr} → ${firstReceiver}`
+			);
+		}
+	} else if (receivers.length > 0) {
+		const extra = receivers.length - 1;
+		const firstReceiver = abbreviateCompact(receivers[0]);
+		parts.push(extra > 0 ? `${firstReceiver} +${extra}` : firstReceiver);
+	}
+
+	if (doc.documentDate) {
+		parts.push(formatDate(doc.documentDate, 'short'));
+	}
+
+	return parts.join(' · ');
+}
+
+export function personAvatarColor(personId: string): string {
+	return AVATAR_PALETTE[djb2(personId) % AVATAR_PALETTE.length];
+}
+
+export function formatDate(isoDate: string, format: 'short' | 'long'): string {
+	const date = new Date(isoDate + 'T12:00:00');
+	if (format === 'short') {
+		return new Intl.DateTimeFormat('de-DE', {
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric'
+		}).format(date);
+	}
+	return new Intl.DateTimeFormat('de-DE', {
+		day: 'numeric',
+		month: 'long',
+		year: 'numeric'
+	}).format(date);
+}
+
+export function statusDotClass(status: DocumentStatus): string {
+	switch (status) {
+		case 'PLACEHOLDER':
+			return 'bg-gray-400';
+		case 'UPLOADED':
+			return 'bg-emerald-500';
+		case 'TRANSCRIBED':
+			return 'bg-blue-400';
+		case 'REVIEWED':
+			return 'bg-amber-400';
+		case 'ARCHIVED':
+			return 'bg-emerald-600';
+	}
+}
+
+export function statusLabel(status: string): string {
+	return formatDocumentStatus(status);
+}

frontend/src/routes/+layout.svelte

@@ -35,7 +35,8 @@ const userInitials = $derived.by(() => {
 
 <div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}>
 	{#if !isAuthPage}
-		<header class="sticky top-0 z-50 border-b border-line-2 bg-surface">
+		<header class="sticky top-0 z-50 bg-header">
+			<div class="h-1 bg-accent"></div>
 			<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 				<div class="flex h-16 justify-between">
 					<!-- Logo & Nav -->
@@ -45,9 +46,9 @@ const userInitials = $derived.by(() => {
 					<div class="flex items-center gap-3">
 						<!-- Language selector (desktop only — mobile lives in nav drawer) -->
 						<div
-							class="hidden items-center gap-1 border-r border-line pr-3 sm:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
+							class="hidden items-center gap-1 pr-3 lg:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
 						>
-							<LanguageSwitcher />
+							<LanguageSwitcher inverted />
 						</div>
 
 						<!-- Theme toggle -->

frontend/src/routes/+page.server.ts

@@ -3,7 +3,7 @@ import { createApiClient } from '$lib/api.server';
 import type { components } from '$lib/generated/api';
 
 type IncompleteDocumentDTO = components['schemas']['IncompleteDocumentDTO'];
-type NotificationDTO = components['schemas']['NotificationDTO'];
+type StatsDTO = components['schemas']['StatsDTO'];
 type Document = components['schemas']['Document'];
 
 export async function load({ url, fetch }) {
@@ -55,19 +55,19 @@ export async function load({ url, fetch }) {
 		const receiverObj = allPersons.find((p) => p.id === receiverId);
 
 		// Dashboard widgets — failures are isolated and don't crash the page
-		let mentions: NotificationDTO[] = [];
+		let stats: StatsDTO | null = null;
 		let incompleteDocs: IncompleteDocumentDTO[] = [];
 		let recentDocs: Document[] = [];
 
 		if (isDashboard) {
-			const [mentionsResult, incompleteResult, recentResult] = await Promise.allSettled([
-				api.GET('/api/notifications', { params: { query: { size: 5 } } }),
-				api.GET('/api/documents/incomplete', { params: { query: { size: 5 } } }),
+			const [statsResult, incompleteResult, recentResult] = await Promise.allSettled([
+				api.GET('/api/stats'),
+				api.GET('/api/documents/incomplete', { params: { query: { size: 3 } } }),
 				api.GET('/api/documents/recent-activity', { params: { query: { size: 5 } } })
 			]);
 
-			if (mentionsResult.status === 'fulfilled' && mentionsResult.value.response.ok) {
-				mentions = mentionsResult.value.data?.content ?? [];
+			if (statsResult.status === 'fulfilled' && statsResult.value.response.ok) {
+				stats = statsResult.value.data ?? null;
 			}
 			if (incompleteResult.status === 'fulfilled' && incompleteResult.value.response.ok) {
 				incompleteDocs = incompleteResult.value.data ?? [];
@@ -80,7 +80,7 @@ export async function load({ url, fetch }) {
 		return {
 			isDashboard,
 			documents,
-			mentions,
+			stats,
 			incompleteDocs,
 			recentDocs,
 			initialValues: {
@@ -96,7 +96,7 @@ export async function load({ url, fetch }) {
 		return {
 			isDashboard,
 			documents: [],
-			mentions: [],
+			stats: null,
 			incompleteDocs: [],
 			recentDocs: [],
 			initialValues: { senderName: '', receiverName: '' },

frontend/src/routes/+page.svelte

@@ -6,7 +6,6 @@ import SearchFilterBar from './SearchFilterBar.svelte';
 import DropZone from './DropZone.svelte';
 import DocumentList from './DocumentList.svelte';
 import DashboardResumeStrip from '$lib/components/DashboardResumeStrip.svelte';
-import DashboardMentions from '$lib/components/DashboardMentions.svelte';
 import DashboardNeedsMetadata from '$lib/components/DashboardNeedsMetadata.svelte';
 import DashboardRecentDocuments from '$lib/components/DashboardRecentDocuments.svelte';
 import { m } from '$lib/paraglide/messages.js';
@@ -69,6 +68,11 @@ $effect(() => {
 	tagNames = data.filters?.tags || [];
 	if (hasAdvancedFilters(data.filters)) showAdvanced = true;
 });
+
+// Right column is only rendered when there is something to show.
+// Omitting it prevents an empty 300px ghost column for read-only users
+// with a complete archive.
+const showRightColumn = $derived(data.canWrite || (data.incompleteDocs?.length ?? 0) > 0);
 </script>
 
 <svelte:head>
@@ -94,20 +98,25 @@ $effect(() => {
 	{#if data.isDashboard}
 		<DashboardResumeStrip />
 
-		{#if data.canWrite}
-			<div class="mt-4">
-				<DropZone />
-			</div>
-		{/if}
+		<!-- Classic Split: right column first in DOM so it appears above recent docs on mobile.
+		     lg:order-last moves it back to the visual right on desktop. -->
+		<!-- No items-start — CSS Grid stretch default makes both columns equal height -->
+		<div class="mt-4 grid grid-cols-1 gap-4 {showRightColumn ? 'lg:grid-cols-[1fr_300px]' : ''}">
+			{#if showRightColumn}
+				<div data-testid="dashboard-right-column" class="flex h-full flex-col gap-4 lg:order-last">
+					{#if data.canWrite}
+						<DropZone />
+					{/if}
+					<!-- flex-1 + min-h-0 fills remaining height after DropZone.
+					     min-h-0 overrides the default min-height:auto that prevents flex
+					     children from shrinking below their content size. -->
+					<div class="flex min-h-0 flex-1 flex-col">
+						<DashboardNeedsMetadata incompleteDocs={data.incompleteDocs ?? []} />
+					</div>
+				</div>
+			{/if}
 
-		<div
-			class="mt-6 grid gap-4 {(data.mentions?.length ?? 0) > 0 && (data.incompleteDocs?.length ?? 0) > 0 ? 'lg:grid-cols-2' : ''}"
-		>
-			<DashboardMentions mentions={data.mentions ?? []} />
-			<DashboardNeedsMetadata incompleteDocs={data.incompleteDocs ?? []} />
-		</div>
-		<div class="mt-4">
-			<DashboardRecentDocuments recentDocs={data.recentDocs ?? []} />
+			<DashboardRecentDocuments recentDocs={data.recentDocs ?? []} stats={data.stats} />
 		</div>
 	{:else}
 		<DocumentList documents={data.documents ?? []} canWrite={data.canWrite} error={data.error} />

frontend/src/routes/AppNav.svelte

@@ -28,53 +28,53 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 }
 </script>
 
-<div class="flex items-center">
-	<div class="mr-10 hidden flex-shrink-0 items-center md:flex">
+<div class="flex items-stretch">
+	<div class="mr-10 flex flex-shrink-0 items-center">
 		<a href="/" class="flex items-center" aria-label="Familienarchiv">
-			<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
+			<span class="font-sans text-xl font-bold tracking-widest text-white uppercase"
 				>Familienarchiv</span
 			>
 		</a>
 	</div>
 
 	<!-- Desktop nav -->
-	<nav class="hidden items-center sm:flex sm:space-x-1">
+	<nav class="hidden items-stretch lg:flex lg:space-x-1">
 		<a
 			href="/"
-			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                    ? 'rounded bg-nav-active text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/70 hover:text-white'}"
 		>
 			{m.nav_documents()}
 		</a>
 
 		<a
 			href="/persons"
-			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname.startsWith('/persons')
-                    ? 'rounded bg-nav-active text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/70 hover:text-white'}"
 		>
 			{m.nav_persons()}
 		</a>
 
 		<a
 			href="/korrespondenz"
-			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+			class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname.startsWith('/korrespondenz')
-                    ? 'rounded bg-nav-active text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/70 hover:text-white'}"
 		>
 			{m.nav_conversations()}
 		</a>
 		{#if isAdmin}
 			<a
 				href="/admin"
-				class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+				class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
                    {page.url.pathname.startsWith('/admin')
-                        ? 'rounded bg-nav-active text-ink'
-                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+					? 'border-b-2 border-accent text-white'
+					: 'text-white/70 hover:text-white'}"
 			>
 				{m.nav_admin()}
 			</a>
@@ -83,7 +83,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 	<!-- Hamburger toggle (mobile only) -->
 	<button
-		class="ml-auto flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink sm:hidden"
+		class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring lg:hidden"
 		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
 		aria-expanded={mobileNavOpen}
 		aria-controls="mobile-nav"
@@ -131,41 +131,41 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 <!-- Mobile nav overlay -->
 {#if mobileNavOpen}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 top-[68px] z-40 sm:hidden" onkeydown={handleOverlayKeydown}>
+	<div class="fixed inset-0 top-[68px] z-40 lg:hidden" onkeydown={handleOverlayKeydown}>
 		<!-- Backdrop -->
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="absolute inset-0 bg-black/20" onclick={closeMobileNav}></div>
 
-		<!-- Panel -->
+		<!-- Panel — white background with navy text (reverses the dark header) -->
 		<div class="relative border-b border-line bg-surface shadow-md">
 			<nav id="mobile-nav">
 				<a
 					href="/"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                            {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                            ? 'bg-nav-active text-ink'
-                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+						? 'bg-accent-bg text-ink'
+						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 				>
 					{m.nav_documents()}
 				</a>
 
 				<a
 					href="/persons"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                            {page.url.pathname.startsWith('/persons')
-                            ? 'bg-nav-active text-ink'
-                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+						? 'bg-accent-bg text-ink'
+						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 				>
 					{m.nav_persons()}
 				</a>
 
 				<a
 					href="/korrespondenz"
-					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+					class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                            {page.url.pathname.startsWith('/korrespondenz')
-                            ? 'bg-nav-active text-ink'
-                            : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+						? 'bg-accent-bg text-ink'
+						: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 				>
 					{m.nav_conversations()}
 				</a>
@@ -173,10 +173,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 				{#if isAdmin}
 					<a
 						href="/admin"
-						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors
+						class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
                                {page.url.pathname.startsWith('/admin')
-                                ? 'bg-nav-active text-ink'
-                                : 'text-ink-2 hover:bg-muted hover:text-ink'}"
+							? 'bg-accent-bg text-ink'
+							: 'text-ink-2 hover:bg-muted hover:text-ink'}"
 					>
 						{m.nav_admin()}
 					</a>

frontend/src/routes/AuthHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
+</script>
+
+<header class="bg-header">
+	<div class="h-1 bg-accent"></div>
+	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+		<div class="flex h-12 items-center justify-between">
+			<a href="/" class="flex items-center" aria-label="Familienarchiv">
+				<span class="font-sans text-sm font-bold tracking-widest text-white uppercase"
+					>Familienarchiv</span
+				>
+			</a>
+			<div class="flex items-center gap-1">
+				<LanguageSwitcher inverted />
+			</div>
+		</div>
+	</div>
+</header>

frontend/src/routes/SearchFilterBar.svelte

@@ -46,7 +46,7 @@ let {
 				onblur={onblur}
 				aria-label={m.docs_search_placeholder()}
 				placeholder={m.docs_search_placeholder()}
-				class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 			<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 				<img

frontend/src/routes/UserMenu.svelte

@@ -1,27 +1,17 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
 
 let { userInitials }: { userInitials: string | null } = $props();
 
 let userMenuOpen = $state(false);
-
-function clickOutside(node: HTMLElement) {
-	const handleClick = (event: MouseEvent) => {
-		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
-			userMenuOpen = false;
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return () => {
-		document.removeEventListener('click', handleClick, true);
-	};
-}
 </script>
 
 <div
 	class="relative"
-	{@attach clickOutside}
+	use:clickOutside
+	onclickoutside={() => (userMenuOpen = false)}
 	onkeydown={(e) => {
 		if (e.key === 'Escape') userMenuOpen = false;
 	}}
@@ -33,7 +23,7 @@ function clickOutside(node: HTMLElement) {
 			aria-expanded={userMenuOpen}
 			aria-haspopup="true"
 			onclick={() => (userMenuOpen = !userMenuOpen)}
-			class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-primary-fg transition-opacity hover:opacity-80"
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-white font-sans text-xs font-bold text-brand-navy transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>
 			{userInitials}
 		</button>
@@ -44,13 +34,13 @@ function clickOutside(node: HTMLElement) {
 			aria-expanded={userMenuOpen}
 			aria-haspopup="true"
 			onclick={() => (userMenuOpen = !userMenuOpen)}
-			class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
+			class="group rounded-sm p-2 transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		>
 			<img
 				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
 				alt=""
 				aria-hidden="true"
-				class="h-4 w-4 opacity-50"
+				class="h-5 w-5 opacity-65 brightness-0 invert transition-opacity group-hover:opacity-100"
 			/>
 		</button>
 	{/if}

frontend/src/routes/admin/EntityNav.svelte

@@ -63,7 +63,7 @@ function handleKeydown(event: KeyboardEvent) {
 >
 	<!-- Desktop-only heading -->
 	<div
-		class="hidden px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase lg:block"
+		class="hidden px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/50 uppercase lg:block"
 	>
 		{m.admin_heading()}
 	</div>
@@ -123,7 +123,7 @@ function handleKeydown(event: KeyboardEvent) {
 					d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
 				/>
 			</svg>
-			<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}">
+			<span class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/50'}">
 				{userCount}
 			</span>
 			<span
@@ -190,7 +190,7 @@ function handleKeydown(event: KeyboardEvent) {
 					d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
 				/>
 			</svg>
-			<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}">
+			<span class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/50'}">
 				{groupCount}
 			</span>
 			<span
@@ -259,7 +259,7 @@ function handleKeydown(event: KeyboardEvent) {
 				/>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
 			</svg>
-			<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
+			<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/50'}">
 				{tagCount}
 			</span>
 			<span
@@ -355,7 +355,7 @@ function handleKeydown(event: KeyboardEvent) {
 		transition:fly={{ x: -160, duration: 180 }}
 	>
 		<!-- Heading -->
-		<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/30 uppercase">
+		<div class="px-3 pt-3 pb-1 text-[9px] font-extrabold tracking-widest text-white/50 uppercase">
 			{m.admin_heading()}
 		</div>
 
@@ -384,7 +384,7 @@ function handleKeydown(event: KeyboardEvent) {
 					/>
 				</svg>
 				<span
-					class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/20'}"
+					class="text-[13px] font-black {isActive('users') ? 'text-white/65' : 'text-white/50'}"
 				>
 					{userCount}
 				</span>
@@ -422,7 +422,7 @@ function handleKeydown(event: KeyboardEvent) {
 					/>
 				</svg>
 				<span
-					class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/20'}"
+					class="text-[13px] font-black {isActive('groups') ? 'text-white/65' : 'text-white/50'}"
 				>
 					{groupCount}
 				</span>
@@ -460,7 +460,7 @@ function handleKeydown(event: KeyboardEvent) {
 					/>
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
 				</svg>
-				<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/20'}">
+				<span class="text-[13px] font-black {isActive('tags') ? 'text-white/65' : 'text-white/50'}">
 					{tagCount}
 				</span>
 				<span

frontend/src/routes/admin/groups/[id]/+page.svelte

@@ -133,7 +133,7 @@ const ADMIN_PERMISSIONS = $derived([
 					name="name"
 					value={data.group.name}
 					required
-					class="bg-background w-full rounded-sm border border-line px-3 py-2 font-sans text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none"
+					class="bg-background w-full rounded-sm border border-line px-3 py-2 font-sans text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</div>
 
@@ -150,7 +150,7 @@ const ADMIN_PERMISSIONS = $derived([
 								name="permissions"
 								value={perm.value}
 								checked={data.group.permissions.includes(perm.value)}
-								class="h-4 w-4 rounded border-line text-primary focus:ring-primary"
+								class="h-4 w-4 rounded border-line text-primary focus:ring-focus-ring"
 							/>
 							{perm.label}
 						</label>

frontend/src/routes/admin/groups/layout.svelte.spec.ts

@@ -109,10 +109,12 @@ describe('GroupsListPanel — collapse toggle', () => {
 	});
 
 	it('persists collapse state using the groups-specific localStorage key', async () => {
-		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
 		render(GroupsListPanel, { groups });
+		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
 		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
-		expect(setSpy).toHaveBeenCalledWith('admin_groups_list_collapsed', 'true');
+		await vi.waitFor(() =>
+			expect(setSpy).toHaveBeenCalledWith('admin_groups_list_collapsed', 'true')
+		);
 		setSpy.mockRestore();
 	});
 });

frontend/src/routes/admin/groups/new/+page.svelte

@@ -101,7 +101,7 @@ beforeNavigate(({ cancel, to }) => {
 					name="name"
 					placeholder={m.admin_group_name_placeholder()}
 					required
-					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
+					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</div>
 
@@ -117,7 +117,7 @@ beforeNavigate(({ cancel, to }) => {
 								type="checkbox"
 								name="permissions"
 								value={perm.value}
-								class="rounded border-line text-primary focus:ring-primary"
+								class="rounded border-line text-primary focus:ring-focus-ring"
 							/>
 							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
 							<span class="text-ink-3">— {perm.label}</span>
@@ -146,7 +146,7 @@ beforeNavigate(({ cancel, to }) => {
 								type="checkbox"
 								name="permissions"
 								value={perm.value}
-								class="rounded border-line text-primary focus:ring-primary"
+								class="rounded border-line text-primary focus:ring-focus-ring"
 							/>
 							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
 							<span class="font-normal text-ink-3">— {perm.label}</span>

frontend/src/routes/admin/tags/[id]/+page.svelte

@@ -104,7 +104,7 @@ $effect(() => {
 					name="name"
 					value={data.tag.name}
 					required
-					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:ring-1 focus:ring-primary focus:outline-none"
+					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</div>
 		</form>

frontend/src/routes/admin/tags/layout.svelte.spec.ts

@@ -88,10 +88,12 @@ describe('TagsListPanel — collapse toggle', () => {
 	});
 
 	it('persists collapse state using the tags-specific localStorage key', async () => {
-		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
 		render(TagsListPanel, { tags });
+		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
 		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
-		expect(setSpy).toHaveBeenCalledWith('admin_tags_list_collapsed', 'true');
+		await vi.waitFor(() =>
+			expect(setSpy).toHaveBeenCalledWith('admin_tags_list_collapsed', 'true')
+		);
 		setSpy.mockRestore();
 	});
 });

frontend/src/routes/admin/users/UsersListPanel.svelte

@@ -106,7 +106,7 @@ const filtered = $derived(
 				type="search"
 				bind:value={searchQuery}
 				placeholder={m.admin_users_search_placeholder()}
-				class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
+				class="w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</div>
 

frontend/src/routes/admin/users/layout.svelte.spec.ts

@@ -131,10 +131,12 @@ describe('UsersListPanel — collapse toggle', () => {
 	});
 
 	it('persists collapse state using the users-specific localStorage key', async () => {
-		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
 		render(UsersListPanel, { users });
+		const setSpy = vi.spyOn(Storage.prototype, 'setItem');
 		document.querySelector<HTMLButtonElement>('[aria-label="Liste einklappen"]')!.click();
-		expect(setSpy).toHaveBeenCalledWith('admin_users_list_collapsed', 'true');
+		await vi.waitFor(() =>
+			expect(setSpy).toHaveBeenCalledWith('admin_users_list_collapsed', 'true')
+		);
 		setSpy.mockRestore();
 	});
 });

frontend/src/routes/admin/users/new/AccountSection.svelte

@@ -14,7 +14,7 @@ import { m } from '$lib/paraglide/messages.js';
 		type="text"
 		name="username"
 		required
-		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	/>
 </label>
 
@@ -26,6 +26,6 @@ import { m } from '$lib/paraglide/messages.js';
 		type="password"
 		name="password"
 		required
-		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	/>
 </label>

frontend/src/routes/conversations/ConversationFilterBar.svelte

@@ -31,7 +31,7 @@ let {
 	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 		<!-- Sender -->
 		<div
-			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="senderId"
@@ -73,7 +73,7 @@ let {
 
 		<!-- Receiver -->
 		<div
-			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="receiverId"
@@ -99,7 +99,7 @@ let {
 				type="date"
 				bind:value={fromDate}
 				onchange={() => onapplyFilters()}
-				class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full border-line py-2.5 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</div>
 
@@ -113,7 +113,7 @@ let {
 				type="date"
 				bind:value={toDate}
 				onchange={() => onapplyFilters()}
-				class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full border-line py-2.5 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</div>
 

frontend/src/routes/conversations/page.svelte.spec.ts

@@ -48,9 +48,9 @@ const withDocs = {
 // ─── Empty state ──────────────────────────────────────────────────────────────
 
 describe('Conversations page – empty state', () => {
-	it('shows the "select two persons" prompt when no persons are selected', async () => {
+	it('shows the empty-state heading when no persons are selected', async () => {
 		render(Page, { data: baseData });
-		await expect.element(page.getByText(/Wählen Sie zwei Personen aus/i)).toBeInTheDocument();
+		await expect.element(page.getByText(/Korrespondenz durchsuchen/i)).toBeInTheDocument();
 	});
 
 	it('hides the swap button when no persons are selected', async () => {

frontend/src/routes/documents/new/+page.svelte

@@ -90,7 +90,7 @@ $effect(() => {
 					titleOverride = (e.target as HTMLInputElement).value;
 					titleDirty = true;
 				}}
-				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				placeholder="Titel eingeben…"
 			/>
 		</div>

frontend/src/routes/forgot-password/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import AuthHeader from '../AuthHeader.svelte';
 
 let { form }: { form?: { error?: string; success?: boolean } } = $props();
 </script>
 
-<div class="relative flex min-h-screen flex-col bg-surface">
+<div class="flex min-h-screen flex-col bg-canvas">
+	<AuthHeader />
 	<div class="flex flex-1 items-center justify-center px-4">
 		<div class="w-full max-w-sm">
 			<!-- Logo -->
@@ -44,7 +46,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 								id="email"
 								required
 								autocomplete="email"
-								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 							/>
 						</div>
 

frontend/src/routes/korrespondenz/ConversationFilterBar.svelte

@@ -31,7 +31,7 @@ let {
 	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 		<!-- Sender -->
 		<div
-			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="senderId"
@@ -73,7 +73,7 @@ let {
 
 		<!-- Receiver -->
 		<div
-			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="receiverId"
@@ -99,7 +99,7 @@ let {
 				type="date"
 				bind:value={fromDate}
 				onchange={() => onapplyFilters()}
-				class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full border-line py-2.5 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</div>
 
@@ -113,7 +113,7 @@ let {
 				type="date"
 				bind:value={toDate}
 				onchange={() => onapplyFilters()}
-				class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				class="block w-full border-line py-2.5 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			/>
 		</div>
 

frontend/src/routes/korrespondenz/CorrespondentSuggestionsDropdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import { clickOutside } from '$lib/actions/clickOutside';
 
 interface Correspondent {
 	id: string;
@@ -17,20 +18,6 @@ interface Props {
 
 let { correspondents, loading, senderName, onselect, onclose }: Props = $props();
 
-function clickOutside(node: HTMLElement) {
-	const handleClick = (event: MouseEvent) => {
-		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
-			onclose();
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return {
-		destroy() {
-			document.removeEventListener('click', handleClick, true);
-		}
-	};
-}
-
 function getOptionElements(container: HTMLElement): HTMLElement[] {
 	return Array.from(container.querySelectorAll<HTMLElement>('[role="option"]'));
 }
@@ -60,6 +47,7 @@ function getInitials(person: Correspondent): string {
 
 <div
 	use:clickOutside
+	onclickoutside={onclose}
 	role="listbox"
 	tabindex="-1"
 	aria-label={m.conv_suggestions_heading()}
@@ -78,7 +66,7 @@ function getInitials(person: Correspondent): string {
 				role="option"
 				aria-selected="false"
 				tabindex="0"
-				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none"
+				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
 				onclick={() => onselect(person.id)}
 				onkeydown={(e) => e.key === 'Enter' && onselect(person.id)}
 			>
@@ -103,7 +91,7 @@ function getInitials(person: Correspondent): string {
 		role="option"
 		aria-selected="false"
 		tabindex="0"
-		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none"
+		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset"
 		onclick={() => onselect('')}
 		onkeydown={(e) => e.key === 'Enter' && onselect('')}
 	>

frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte

@@ -42,7 +42,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		bind:value={fromDate}
 		onchange={() => onapplyFilters()}
 		placeholder={m.conv_strip_from_placeholder()}
-		class="h-8 w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none {fromDate ? 'border-primary' : 'border-line'}"
+		class="h-8 w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {fromDate ? 'border-primary' : 'border-line'}"
 	/>
 
 	<span class="text-xs text-ink-3">–</span>
@@ -52,7 +52,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		bind:value={toDate}
 		onchange={() => onapplyFilters()}
 		placeholder={m.conv_strip_to_placeholder()}
-		class="h-8 w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none {toDate ? 'border-primary' : 'border-line'}"
+		class="h-8 w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {toDate ? 'border-primary' : 'border-line'}"
 	/>
 
 	<!-- Document count -->

frontend/src/routes/layout.css

@@ -5,6 +5,9 @@
 
 /* ─── 2. Raw palette — never used directly in components ──────────────────── */
 @theme {
+	/* Breakpoints */
+	--breakpoint-xs: 375px;
+
 	/* Brand palette constants */
 	--palette-navy: #012851;
 	--palette-mint: #a1dcd8;
@@ -48,14 +51,17 @@
 	--color-primary: var(--c-primary);
 	--color-primary-fg: var(--c-primary-fg);
 
-	/* Nav active state */
-	--color-nav-active: var(--c-nav-active);
-
 	/* PDF viewer */
 	--color-pdf-bg: var(--c-pdf-bg);
 	--color-pdf-ctrl: var(--c-pdf-ctrl);
 	--color-pdf-text: var(--c-pdf-text);
 
+	/* Header surface — independent from canvas/surface for per-mode control */
+	--color-header: var(--c-header);
+
+	/* Focus ring — keyboard focus indicator, mode-aware (navy in light, mint in dark) */
+	--color-focus-ring: var(--c-focus-ring);
+
 	/* Static brand tokens (not themed) */
 	--color-brand-navy: var(--palette-navy);
 	--color-brand-mint: var(--palette-mint);
@@ -84,7 +90,11 @@
 	--c-primary: #012851;
 	--c-primary-fg: #ffffff;
 
-	--c-nav-active: rgba(180, 185, 255, 0.15);
+	/* Header is brand-navy in light mode; same in dark mode for contrast compliance */
+	--c-header: #012851;
+
+	/* Focus ring: brand-navy in light mode — 14:1 on white, ~11:1 on sand */
+	--c-focus-ring: #012851;
 
 	--c-pdf-bg: #ebebeb;
 	--c-pdf-ctrl: #d8d8d8;
@@ -92,19 +102,26 @@
 }
 
 /* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
+/*
+   Navy-tinted dark palette derived from brand-navy (#012851).
+   KEEP THESE TWO BLOCKS IN SYNC — they cover the same design intent via
+   different activation paths (system preference vs. manual toggle).
+*/
 @media (prefers-color-scheme: dark) {
 	:root:not([data-theme='light']) {
-		--c-canvas: #0d0d0d;
-		--c-surface: #1a1a1a;
-		--c-overlay: #242424;
-		--c-muted: #252525;
+		color-scheme: dark;
 
-		--c-line: #3d3d3d;
-		--c-line-2: #2e2e2e;
+		--c-canvas: #010e1e;
+		--c-surface: #011526;
+		--c-overlay: #011e38;
+		--c-muted: #011a30;
+
+		--c-line: #0d3358;
+		--c-line-2: #092843;
 
 		--c-ink: #f0efe9;
-		--c-ink-2: #9ca3af; /* gray-400 — 7.5:1 on dark surface — WCAG AAA ✓ */
-		--c-ink-3: #8b97a5; /* gray-450 — 6.5:1 on dark surface — WCAG AA ✓ */
+		--c-ink-2: #9ca3af; /* 7.5:1 on #011526 — WCAG AAA ✓ */
+		--c-ink-3: #8b97a5; /* 7.1:1 on #011526 — WCAG AAA ✓ */
 
 		--c-accent: #00c7b1;
 		--c-accent-bg: rgba(0, 199, 177, 0.12);
@@ -112,27 +129,34 @@
 		--c-primary: #a1dcd8;
 		--c-primary-fg: #012851;
 
-		--c-nav-active: rgba(180, 185, 255, 0.12);
+		/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
+		--c-header: #012851;
 
-		--c-pdf-bg: #1e1e1e;
-		--c-pdf-ctrl: #2a2a2a;
-		--c-pdf-text: #d1d1d1;
+		/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
+		--c-focus-ring: #a1dcd8;
+
+		--c-pdf-bg: #010e1e;
+		--c-pdf-ctrl: #011526;
+		--c-pdf-text: #f0efe9;
 	}
 }
 
 /* Manual dark override — takes precedence over media query */
+/* KEEP IN SYNC with the @media block above */
 :root[data-theme='dark'] {
-	--c-canvas: #0d0d0d;
-	--c-surface: #1a1a1a;
-	--c-overlay: #242424;
-	--c-muted: #252525;
+	color-scheme: dark;
 
-	--c-line: #3d3d3d;
-	--c-line-2: #2e2e2e;
+	--c-canvas: #010e1e;
+	--c-surface: #011526;
+	--c-overlay: #011e38;
+	--c-muted: #011a30;
+
+	--c-line: #0d3358;
+	--c-line-2: #092843;
 
 	--c-ink: #f0efe9;
-	--c-ink-2: #9ca3af;
-	--c-ink-3: #6b7280;
+	--c-ink-2: #9ca3af; /* 7.5:1 on #011526 — WCAG AAA ✓ */
+	--c-ink-3: #8b97a5; /* 7.1:1 on #011526 — WCAG AAA ✓ */
 
 	--c-accent: #00c7b1;
 	--c-accent-bg: rgba(0, 199, 177, 0.12);
@@ -140,11 +164,15 @@
 	--c-primary: #a1dcd8;
 	--c-primary-fg: #012851;
 
-	--c-nav-active: rgba(180, 185, 255, 0.12);
+	/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
+	--c-header: #012851;
 
-	--c-pdf-bg: #1e1e1e;
-	--c-pdf-ctrl: #2a2a2a;
-	--c-pdf-text: #d1d1d1;
+	/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
+	--c-focus-ring: #a1dcd8;
+
+	--c-pdf-bg: #010e1e;
+	--c-pdf-ctrl: #011526;
+	--c-pdf-text: #f0efe9;
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */
@@ -219,4 +247,17 @@
 		text-decoration-thickness: 2px;
 		text-underline-offset: 4px;
 	}
+
+	/* Fallback focus ring for any interactive element not styled with ring-focus-ring */
+	:focus-visible {
+		outline: 2px solid var(--c-focus-ring);
+		outline-offset: 2px;
+	}
+}
+
+/* Ensure focus rings are visible in Windows High Contrast / forced-colors mode */
+@media (forced-colors: active) {
+	:focus-visible {
+		outline: 3px solid ButtonText;
+	}
 }

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

@@ -1,34 +1,16 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { setLocale, getLocale } from '$lib/paraglide/runtime';
+import AuthHeader from '../AuthHeader.svelte';
 
 let { form }: { form?: { error?: string; success?: boolean } } = $props();
-
-const locales = ['DE', 'EN', 'ES'] as const;
-const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
-const activeLocale = $derived(getLocale().toUpperCase());
 </script>
 
 <svelte:head>
 	<title>{m.page_title_login()}</title>
 </svelte:head>
 
-<div class="relative flex min-h-screen flex-col bg-canvas">
-	<!-- Language switcher -->
-	<div class="absolute top-4 right-4 flex items-center gap-1">
-		{#each locales as locale (locale)}
-			<button
-				type="button"
-				onclick={() => setLocale(localeMap[locale])}
-				class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
-                    {activeLocale === locale
-                        ? 'font-bold text-ink'
-                        : 'font-normal text-ink-3 hover:text-ink'}"
-			>
-				{locale}
-			</button>
-		{/each}
-	</div>
+<div class="flex min-h-screen flex-col bg-canvas">
+	<AuthHeader />
 
 	<div class="flex flex-1 items-center justify-center px-4">
 		<div class="w-full max-w-sm">
@@ -60,7 +42,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="username"
 							required
 							autocomplete="username"
-							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 						/>
 					</div>
 
@@ -76,7 +58,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="password"
 							required
 							autocomplete="current-password"
-							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 						/>
 					</div>
 

frontend/src/routes/login/page.svelte.spec.ts

@@ -10,7 +10,9 @@ afterEach(cleanup);
 describe('Login page – rendering', () => {
 	it('renders the page title', async () => {
 		render(LoginPage, {});
-		await expect.element(page.getByRole('link', { name: 'Familienarchiv' })).toBeInTheDocument();
+		await expect
+			.element(page.getByRole('link', { name: 'Familienarchiv' }).first())
+			.toBeInTheDocument();
 		await page.screenshot({ path: 'test-results/screenshots/login-default.png' });
 	});
 

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

@@ -111,7 +111,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeType === null && activeReadFilter === null}
 				onclick={() => setFilter({ type: null, read: null })}
 				class={[
-					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeType === null && activeReadFilter === null
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'
@@ -126,7 +126,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeReadFilter === 'false'}
 				onclick={() => setFilter({ read: 'false', type: null })}
 				class={[
-					'inline-flex items-center gap-1.5 rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'inline-flex items-center gap-1.5 rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeReadFilter === 'false'
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'
@@ -149,7 +149,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeType === 'MENTION'}
 				onclick={() => setFilter({ type: 'MENTION', read: null })}
 				class={[
-					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeType === 'MENTION'
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'
@@ -164,7 +164,7 @@ function typeBadgeLabel(type: NotificationItem['type']): string {
 				aria-checked={activeType === 'REPLY'}
 				onclick={() => setFilter({ type: 'REPLY', read: null })}
 				class={[
-					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2',
+					'rounded-full px-3 py-2 font-sans text-sm font-medium focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
 					activeType === 'REPLY'
 						? 'bg-primary text-primary-fg'
 						: 'bg-muted text-ink'

frontend/src/routes/page.server.spec.ts

@@ -22,14 +22,14 @@ function makeUrl(params: Record<string, string | string[]> = {}) {
 // ─── dashboard mode (no search filters) ──────────────────────────────────────
 
 describe('home page load — dashboard mode', () => {
-	it('sets isDashboard true and fetches all three widget APIs', async () => {
+	it('sets isDashboard true and fetches stats, incomplete, and recent APIs', async () => {
 		const mockGet = vi
 			.fn()
 			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
 			.mockResolvedValueOnce({
 				response: { ok: true },
-				data: { content: [{ id: 'n1' }] }
-			}) // notifications
+				data: { totalDocuments: 42, totalPersons: 7 }
+			}) // stats
 			.mockResolvedValueOnce({ response: { ok: true }, data: [{ id: 'd1' }] }) // incomplete
 			.mockResolvedValueOnce({ response: { ok: true }, data: [{ id: 'd2' }] }); // recent
 		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
@@ -39,17 +39,20 @@ describe('home page load — dashboard mode', () => {
 		const result = await load({ url: makeUrl(), fetch: vi.fn() as unknown as typeof fetch });
 
 		expect(result.isDashboard).toBe(true);
-		expect(result.mentions).toHaveLength(1);
+		expect(result.stats).toEqual({ totalDocuments: 42, totalPersons: 7 });
 		expect(result.incompleteDocs).toHaveLength(1);
 		expect(result.recentDocs).toHaveLength(1);
 		expect(result.documents).toEqual([]);
 	});
 
-	it('defaults mentions to [] when notifications API rejects', async () => {
+	it('returns stats with totalDocuments from /api/stats', async () => {
 		const mockGet = vi
 			.fn()
 			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
-			.mockRejectedValueOnce(new Error('network')) // notifications
+			.mockResolvedValueOnce({
+				response: { ok: true },
+				data: { totalDocuments: 248, totalPersons: 34 }
+			}) // stats
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // incomplete
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }); // recent
 		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
@@ -58,7 +61,24 @@ describe('home page load — dashboard mode', () => {
 
 		const result = await load({ url: makeUrl(), fetch: vi.fn() as unknown as typeof fetch });
 
-		expect(result.mentions).toEqual([]);
+		expect(result.stats?.totalDocuments).toBe(248);
+		expect(result.stats?.totalPersons).toBe(34);
+	});
+
+	it('returns stats: null when /api/stats rejects', async () => {
+		const mockGet = vi
+			.fn()
+			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
+			.mockRejectedValueOnce(new Error('network')) // stats
+			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // incomplete
+			.mockResolvedValueOnce({ response: { ok: true }, data: [] }); // recent
+		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
+			typeof createApiClient
+		>);
+
+		const result = await load({ url: makeUrl(), fetch: vi.fn() as unknown as typeof fetch });
+
+		expect(result.stats).toBeNull();
 	});
 
 	it('defaults incompleteDocs to [] when incomplete API rejects', async () => {
@@ -81,7 +101,10 @@ describe('home page load — dashboard mode', () => {
 		const mockGet = vi
 			.fn()
 			.mockResolvedValueOnce({ response: { ok: true, status: 200 }, data: [] }) // persons
-			.mockResolvedValueOnce({ response: { ok: true }, data: { content: [] } }) // notifications
+			.mockResolvedValueOnce({
+				response: { ok: true },
+				data: { totalDocuments: 0, totalPersons: 0 }
+			}) // stats
 			.mockResolvedValueOnce({ response: { ok: true }, data: [] }) // incomplete
 			.mockRejectedValueOnce(new Error('network')); // recent
 		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
@@ -113,7 +136,7 @@ describe('home page load — search mode', () => {
 
 		expect(result.isDashboard).toBe(false);
 		expect(result.documents).toHaveLength(1);
-		expect(result.mentions).toEqual([]);
+		expect(result.stats).toBeNull();
 		expect(result.incompleteDocs).toEqual([]);
 		expect(result.recentDocs).toEqual([]);
 		// Only two API calls — no widget calls

frontend/src/routes/page.svelte.spec.ts

@@ -21,8 +21,12 @@ const emptyData = {
 	user: undefined,
 	canWrite: true,
 	canAnnotate: false,
+	isDashboard: false,
 	filters: { q: '', from: '', to: '', senderId: '', receiverId: '', tags: [] },
 	documents: [],
+	incompleteDocs: [],
+	recentDocs: [],
+	stats: null,
 	incompleteCount: 0,
 	initialValues: { senderName: '', receiverName: '' },
 	error: null
@@ -189,6 +193,42 @@ describe('Home page – search input keystroke preservation', () => {
 	});
 });
 
+// ─── Dashboard mode ───────────────────────────────────────────────────────────
+
+describe('Home page – dashboard mode', () => {
+	const dashboardData = {
+		...emptyData,
+		isDashboard: true,
+		canWrite: false,
+		incompleteDocs: [],
+		recentDocs: []
+	};
+
+	it('hides the right column when canWrite is false and incompleteDocs is empty', async () => {
+		render(Page, { data: dashboardData });
+		const rightCol = page.getByTestId('dashboard-right-column');
+		await expect.element(rightCol).not.toBeInTheDocument();
+	});
+
+	it('shows the right column when canWrite is true', async () => {
+		render(Page, { data: { ...dashboardData, canWrite: true } });
+		const rightCol = page.getByTestId('dashboard-right-column');
+		await expect.element(rightCol).toBeInTheDocument();
+	});
+
+	it('shows the right column when incompleteDocs is non-empty', async () => {
+		render(Page, {
+			data: {
+				...dashboardData,
+				canWrite: false,
+				incompleteDocs: [{ id: 'd1', title: 'Taufschein' }]
+			}
+		});
+		const rightCol = page.getByTestId('dashboard-right-column');
+		await expect.element(rightCol).toBeInTheDocument();
+	});
+});
+
 // ─── Error state ──────────────────────────────────────────────────────────────
 
 describe('Home page – error state', () => {

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

@@ -54,7 +54,7 @@ function handleSearch() {
 					oninput={handleSearch}
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
-					class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+					class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 				<div
 					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"

frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte

@@ -26,7 +26,7 @@ let {
 			type="text"
 			required
 			value={person.firstName}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 	<div>
@@ -39,7 +39,7 @@ let {
 			type="text"
 			required
 			value={person.lastName}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 	<div class="md:col-span-2">
@@ -51,7 +51,7 @@ let {
 			name="alias"
 			type="text"
 			value={person.alias ?? ''}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 	<div>
@@ -66,7 +66,7 @@ let {
 			max="2100"
 			placeholder={m.person_placeholder_year()}
 			value={person.birthYear ?? ''}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 	<div>
@@ -81,7 +81,7 @@ let {
 			max="2100"
 			placeholder={m.person_placeholder_year()}
 			value={person.deathYear ?? ''}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 		/>
 	</div>
 	<div class="md:col-span-2">
@@ -93,7 +93,7 @@ let {
 			name="notes"
 			rows="4"
 			placeholder={m.person_placeholder_notes()}
-			class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
+			class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 			>{person.notes ?? ''}</textarea
 		>
 	</div>

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

@@ -48,7 +48,7 @@ let { form } = $props();
 						name="firstName"
 						type="text"
 						required
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 
@@ -61,7 +61,7 @@ let { form } = $props();
 						name="lastName"
 						type="text"
 						required
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 
@@ -74,7 +74,7 @@ let { form } = $props();
 						name="alias"
 						type="text"
 						placeholder={m.form_placeholder_alias()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 
@@ -89,7 +89,7 @@ let { form } = $props();
 						min="1"
 						max="2100"
 						placeholder={m.person_placeholder_year()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 
@@ -104,7 +104,7 @@ let { form } = $props();
 						min="1"
 						max="2100"
 						placeholder={m.person_placeholder_year()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 
@@ -117,7 +117,7 @@ let { form } = $props();
 						name="notes"
 						rows="4"
 						placeholder={m.person_placeholder_notes()}
-						class="block w-full resize-y rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+						class="block w-full resize-y rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					></textarea>
 				</div>
 			</div>

frontend/src/routes/persons/page.svelte.spec.ts

@@ -64,7 +64,7 @@ describe('Persons page – rendering', () => {
 
 	it('shows alias in italic when provided', async () => {
 		render(Page, { data: { ...emptyData, persons: [makePerson({ alias: 'Maxi' })] } });
-		await expect.element(page.getByText('"Maxi"')).toBeInTheDocument();
+		await expect.element(page.getByText('„Maxi"')).toBeInTheDocument();
 	});
 
 	it('shows life date range when birthYear is provided', async () => {

frontend/src/routes/profile/PasswordChangeForm.svelte

@@ -39,7 +39,7 @@ let {
 					type="password"
 					name="currentPassword"
 					required
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</label>
 
@@ -51,7 +51,7 @@ let {
 					type="password"
 					name="newPassword"
 					required
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</label>
 
@@ -63,13 +63,14 @@ let {
 					type="password"
 					name="confirmPassword"
 					required
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</label>
 		</div>
 
 		<button
 			type="submit"
+			data-testid="submit-password"
 			class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
 		>
 			{m.btn_save()}

frontend/src/routes/profile/PersonalInfoForm.svelte

@@ -57,7 +57,7 @@ function handleBirthDateInput(e: Event) {
 					type="text"
 					name="firstName"
 					value={user?.firstName ?? ''}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</label>
 
@@ -69,7 +69,7 @@ function handleBirthDateInput(e: Event) {
 					type="text"
 					name="lastName"
 					value={user?.lastName ?? ''}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</label>
 
@@ -82,7 +82,7 @@ function handleBirthDateInput(e: Event) {
 					placeholder="TT.MM.JJJJ"
 					value={birthDateDisplay}
 					oninput={handleBirthDateInput}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 				<input type="hidden" name="birthDate" value={birthDateIso} />
 			</label>
@@ -95,7 +95,7 @@ function handleBirthDateInput(e: Event) {
 					type="email"
 					name="email"
 					value={user?.email ?? ''}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 				/>
 			</label>
 
@@ -107,7 +107,7 @@ function handleBirthDateInput(e: Event) {
 					name="contact"
 					rows="3"
 					placeholder={m.profile_contact_placeholder()}
-					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>{user?.contact ?? ''}</textarea
 				>
 			</label>

frontend/src/routes/reset-password/+page.svelte

@@ -53,7 +53,7 @@ let {
 								id="newPassword"
 								required
 								autocomplete="new-password"
-								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 							/>
 						</div>
 
@@ -69,7 +69,7 @@ let {
 								id="confirmPassword"
 								required
 								autocomplete="new-password"
-								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 							/>
 						</div>