From fd2a7a8e9672383d3c2387ee7f006f74af4781e2 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 21:55:48 +0200
Subject: [PATCH 01/12] refactor(layout): remove --c-nav-active CSS token

The nav active state moves from a background pill to a bottom-border
underline, so the rgba purple tint variable is no longer needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/AppNav.svelte | 8 ++++----
 frontend/src/routes/layout.css    | 9 ---------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 8e17dbed..a9f66408 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -43,7 +43,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			href="/"
 			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                    ? 'rounded bg-nav-active text-ink'
+                    ? 'bg-nav-active rounded text-ink'
                     : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 		>
 			{m.nav_documents()}
@@ -53,7 +53,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			href="/persons"
 			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                    {page.url.pathname.startsWith('/persons')
-                    ? 'rounded bg-nav-active text-ink'
+                    ? 'bg-nav-active rounded text-ink'
                     : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 		>
 			{m.nav_persons()}
@@ -63,7 +63,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			href="/korrespondenz"
 			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                    {page.url.pathname.startsWith('/korrespondenz')
-                    ? 'rounded bg-nav-active text-ink'
+                    ? 'bg-nav-active rounded text-ink'
                     : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 		>
 			{m.nav_conversations()}
@@ -73,7 +73,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 				href="/admin"
 				class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                    {page.url.pathname.startsWith('/admin')
-                        ? 'rounded bg-nav-active text-ink'
+                        ? 'bg-nav-active rounded text-ink'
                         : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 			>
 				{m.nav_admin()}
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index e30ae17e..b5afd68a 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -48,9 +48,6 @@
 	--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);
@@ -84,8 +81,6 @@
 	--c-primary: #012851;
 	--c-primary-fg: #ffffff;
 
-	--c-nav-active: rgba(180, 185, 255, 0.15);
-
 	--c-pdf-bg: #ebebeb;
 	--c-pdf-ctrl: #d8d8d8;
 	--c-pdf-text: #333333;
@@ -112,8 +107,6 @@
 		--c-primary: #a1dcd8;
 		--c-primary-fg: #012851;
 
-		--c-nav-active: rgba(180, 185, 255, 0.12);
-
 		--c-pdf-bg: #1e1e1e;
 		--c-pdf-ctrl: #2a2a2a;
 		--c-pdf-text: #d1d1d1;
@@ -140,8 +133,6 @@
 	--c-primary: #a1dcd8;
 	--c-primary-fg: #012851;
 
-	--c-nav-active: rgba(180, 185, 255, 0.12);
-
 	--c-pdf-bg: #1e1e1e;
 	--c-pdf-ctrl: #2a2a2a;
 	--c-pdf-text: #d1d1d1;
-- 
2.49.1


From 3dfaf69fb10bb0616a7aa1529313488cd4740d62 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 21:57:01 +0200
Subject: [PATCH 02/12] feat(LanguageSwitcher): add inverted prop for
 dark-header context

When inverted=true, buttons render white text instead of ink tokens,
suitable for placement on brand-navy background.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/LanguageSwitcher.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte b/frontend/src/lib/components/LanguageSwitcher.svelte
index e14029db..7c0ac134 100644
--- a/frontend/src/lib/components/LanguageSwitcher.svelte
+++ b/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());
@@ -11,7 +13,13 @@ const activeLocale = $derived(getLocale().toUpperCase());
 		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'}"
+               {activeLocale === locale
+			? inverted
+				? 'font-bold text-white'
+				: 'font-bold text-ink'
+			: inverted
+				? 'font-normal text-white/55 hover:text-white/85'
+				: 'font-normal text-ink-3 hover:text-ink'}"
 	>
 		{locale}
 	</button>
-- 
2.49.1


From adc1f343b214fbe1b75cb1fef5770b5df1b43abb Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 21:57:39 +0200
Subject: [PATCH 03/12] feat(layout): apply brand-navy header with accent strip

- Replace bg-surface border-b with bg-brand-navy (always #012851)
- Add 4px bg-accent strip above the nav bar
- Remove border-r separator from language switcher wrapper
- Pass inverted prop to LanguageSwitcher for white text on dark bg

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 4ae6c1d1..d0f6b92c 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/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-brand-navy">
+			<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 sm:flex [&_button]:px-1.5 [&_button]:py-1 [&_button]:text-xs"
 						>
-							<LanguageSwitcher />
+							<LanguageSwitcher inverted />
 						</div>
 
 						<!-- Theme toggle -->
-- 
2.49.1


From 14b1cc7539837fb377771e783300d3d35a7e07cf Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 21:59:38 +0200
Subject: [PATCH 04/12] feat(AppNav): brand-navy header styles for logo and nav
 links

- Logo: always visible (remove hidden md:flex), text-white
- Outer wrapper: items-stretch so active border reaches header bottom
- Desktop nav: items-stretch, active = border-b-2 border-accent text-white
- Inactive links: text-white/55, hover text-white/85
- Hamburger: text-white/70, hover text-white
- Mobile drawer active: bg-accent-bg replacing removed bg-nav-active
- Focus rings: focus-visible:ring-2 ring-accent on all interactive elements

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/AppNav.svelte | 60 +++++++++++++++----------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index a9f66408..24ecbd0f 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/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 sm:flex sm: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="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                    ? 'bg-nav-active rounded text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/55 hover:text-white/85'}"
 		>
 			{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="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/persons')
-                    ? 'bg-nav-active rounded text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/55 hover:text-white/85'}"
 		>
 			{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="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/korrespondenz')
-                    ? 'bg-nav-active rounded text-ink'
-                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+				? 'border-b-2 border-accent text-white'
+				: 'text-white/55 hover:text-white/85'}"
 		>
 			{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="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                    {page.url.pathname.startsWith('/admin')
-                        ? 'bg-nav-active rounded text-ink'
-                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+					? 'border-b-2 border-accent text-white'
+					: 'text-white/55 hover:text-white/85'}"
 			>
 				{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 rounded text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent sm:hidden"
 		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
 		aria-expanded={mobileNavOpen}
 		aria-controls="mobile-nav"
@@ -137,35 +137,35 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 		<!-- 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-accent 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-accent 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-accent 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-accent 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>
-- 
2.49.1


From e65ddc655ec56b92a53407b5ac828acebf4be258 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:00:22 +0200
Subject: [PATCH 05/12] feat(UserMenu): brand-mint avatar, white guest icon,
 focus rings

- Avatar: bg-brand-mint text-brand-navy (mint circle, navy initials)
- Guest icon button: text-white/60, hover text-white
- Both buttons: focus-visible:ring-2 ring-accent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/UserMenu.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/UserMenu.svelte b/frontend/src/routes/UserMenu.svelte
index dca5e916..d803caea 100644
--- a/frontend/src/routes/UserMenu.svelte
+++ b/frontend/src/routes/UserMenu.svelte
@@ -33,7 +33,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-brand-mint font-sans text-xs font-bold text-brand-navy transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
 		>
 			{userInitials}
 		</button>
@@ -44,7 +44,7 @@ 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="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-white/60 uppercase transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
 		>
 			<img
 				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
-- 
2.49.1


From 55e681c209dcd17110c01de6c5b4e8c3bb3f05f0 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:01:02 +0200
Subject: [PATCH 06/12] feat(AuthHeader): slim brand-navy header for auth pages

Provides logo + language switcher on brand-navy background with
4px accent strip. Used on login and forgot-password pages in place
of the floating language switcher.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/AuthHeader.svelte | 34 +++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/src/routes/AuthHeader.svelte

diff --git a/frontend/src/routes/AuthHeader.svelte b/frontend/src/routes/AuthHeader.svelte
new file mode 100644
index 00000000..1e6a34a9
--- /dev/null
+++ b/frontend/src/routes/AuthHeader.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+import { setLocale, getLocale } from '$lib/paraglide/runtime';
+
+const locales = ['DE', 'EN', 'ES'] as const;
+const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
+const activeLocale = $derived(getLocale().toUpperCase());
+</script>
+
+<header class="bg-brand-navy">
+	<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">
+				{#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 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+                            {activeLocale === locale
+							? 'font-bold text-white'
+							: 'font-normal text-white/55 hover:text-white/85'}"
+					>
+						{locale}
+					</button>
+				{/each}
+			</div>
+		</div>
+	</div>
+</header>
-- 
2.49.1


From 550a9704ad570f153b6ecceeccd19dd9e6a8874e Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:01:40 +0200
Subject: [PATCH 07/12] feat(login): replace floating lang switcher with
 AuthHeader

Removes the absolutely-positioned language switcher div and replaces it
with the shared AuthHeader component (logo + lang switcher on navy bar).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/login/+page.svelte | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 598cf318..c241fc9d 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/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">
-- 
2.49.1


From 36bf591afe831203ced485556eef6dec48451df0 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:02:29 +0200
Subject: [PATCH 08/12] feat(forgot-password): add AuthHeader for consistent
 auth page branding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/forgot-password/+page.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/forgot-password/+page.svelte b/frontend/src/routes/forgot-password/+page.svelte
index 9512fd84..2bd994d0 100644
--- a/frontend/src/routes/forgot-password/+page.svelte
+++ b/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 -->
-- 
2.49.1


From c905f136d2e2e54220d0b4d9664a42b01fcf315d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:03:38 +0200
Subject: [PATCH 09/12] test(header): add Playwright tests for brand-navy
 header

- Asserts header background is rgb(1,40,81) in light mode
- Asserts header stays navy after switching to dark mode
- Asserts logo text visible at 375px viewport
- Asserts login page has AuthHeader with navy background and lang switcher

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/header.spec.ts | 50 +++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 frontend/e2e/header.spec.ts

diff --git a/frontend/e2e/header.spec.ts b/frontend/e2e/header.spec.ts
new file mode 100644
index 00000000..bda4cee3
--- /dev/null
+++ b/frontend/e2e/header.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+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 page.waitForSelector('[data-hydrated]');
+
+		const bg = await page.locator('header').evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('header background stays brand-navy after switching to dark mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		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('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.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();
+	});
+});
-- 
2.49.1


From 281934529e0253f0570c91de31d3338cfc186fc7 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:54:04 +0200
Subject: [PATCH 10/12] fix(header): consistent icon styling, focus rings, and
 responsive breakpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Normalize all header icon buttons to white/65 + white/10 hover bg
- Fix guest person icon (img tag needs brightness-0 invert, not text color)
- Add missing focus-visible rings to ThemeToggle and LanguageSwitcher
- Use focus-visible:rounded on nav links so active underline stays sharp
- Bump burger/nav breakpoint from sm→lg to prevent overflow on tablets

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/LanguageSwitcher.svelte     |  2 +-
 .../src/lib/components/NotificationBell.svelte     |  2 +-
 frontend/src/lib/components/ThemeToggle.svelte     |  6 +++---
 frontend/src/routes/+layout.svelte                 |  2 +-
 frontend/src/routes/AppNav.svelte                  | 14 +++++++-------
 frontend/src/routes/UserMenu.svelte                |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte b/frontend/src/lib/components/LanguageSwitcher.svelte
index 7c0ac134..45bc5885 100644
--- a/frontend/src/lib/components/LanguageSwitcher.svelte
+++ b/frontend/src/lib/components/LanguageSwitcher.svelte
@@ -12,7 +12,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 	<button
 		type="button"
 		onclick={() => setLocale(localeMap[locale])}
-		class="font-sans tracking-widest transition-colors
+		class="rounded px-1 font-sans tracking-widest transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
                {activeLocale === locale
 			? inverted
 				? 'font-bold text-white'
diff --git a/frontend/src/lib/components/NotificationBell.svelte b/frontend/src/lib/components/NotificationBell.svelte
index cb62dbfa..30219dce 100644
--- a/frontend/src/lib/components/NotificationBell.svelte
+++ b/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-accent"
 	>
 		<!-- Bell SVG -->
 		<svg
diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
index de85adb1..dd749944 100644
--- a/frontend/src/lib/components/ThemeToggle.svelte
+++ b/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-accent"
 >
 	{#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"
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d0f6b92c..8110cc69 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -46,7 +46,7 @@ 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 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 inverted />
 						</div>
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 24ecbd0f..7744ca3f 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -38,10 +38,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 	</div>
 
 	<!-- Desktop nav -->
-	<nav class="hidden items-stretch 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 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+			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-accent
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/55 hover:text-white/85'}"
@@ -51,7 +51,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 		<a
 			href="/persons"
-			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+			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-accent
                    {page.url.pathname.startsWith('/persons')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/55 hover:text-white/85'}"
@@ -61,7 +61,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 
 		<a
 			href="/korrespondenz"
-			class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+			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-accent
                    {page.url.pathname.startsWith('/korrespondenz')
 				? 'border-b-2 border-accent text-white'
 				: 'text-white/55 hover:text-white/85'}"
@@ -71,7 +71,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 		{#if isAdmin}
 			<a
 				href="/admin"
-				class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
+				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-accent
                    {page.url.pathname.startsWith('/admin')
 					? 'border-b-2 border-accent text-white'
 					: 'text-white/55 hover:text-white/85'}"
@@ -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-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent 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-accent lg:hidden"
 		aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
 		aria-expanded={mobileNavOpen}
 		aria-controls="mobile-nav"
@@ -131,7 +131,7 @@ 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 -->
diff --git a/frontend/src/routes/UserMenu.svelte b/frontend/src/routes/UserMenu.svelte
index d803caea..5da50c54 100644
--- a/frontend/src/routes/UserMenu.svelte
+++ b/frontend/src/routes/UserMenu.svelte
@@ -44,13 +44,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-white/60 uppercase transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+			class="group rounded-sm p-2 transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
 		>
 			<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}
-- 
2.49.1


From 53038dea68a5f9c7322173c7b77f6d5703d25a47 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 09:37:24 +0200
Subject: [PATCH 11/12] fix(header): address PR review blockers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AuthHeader: remove duplicated locale logic, use <LanguageSwitcher inverted />
- Fix text-white/55 → text-white/70 in AppNav and LanguageSwitcher (WCAG AA)
- E2E: add axe accessibility checks, replace [data-hydrated] with role selectors,
  add 768px hamburger test and BRAND_NAVY comment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/header.spec.ts                   | 50 ++++++++++++++++++-
 .../lib/components/LanguageSwitcher.svelte    |  2 +-
 frontend/src/routes/AppNav.svelte             |  8 +--
 frontend/src/routes/AuthHeader.svelte         | 19 +------
 4 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/frontend/e2e/header.spec.ts b/frontend/e2e/header.spec.ts
index bda4cee3..8317c742 100644
--- a/frontend/e2e/header.spec.ts
+++ b/frontend/e2e/header.spec.ts
@@ -1,19 +1,29 @@
 import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
 
+// #012851 — brand-navy, defined as --c-primary in layout.css
 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 page.waitForSelector('[data-hydrated]');
+		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 page.waitForSelector('[data-hydrated]');
+		await expect(page.getByRole('navigation')).toBeVisible();
 
 		await page
 			.getByRole('banner')
@@ -25,12 +35,40 @@ test.describe('Header — brand-navy background', () => {
 		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', () => {
@@ -47,4 +85,12 @@ test.describe('Login page — AuthHeader', () => {
 
 		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([]);
+	});
 });
diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte b/frontend/src/lib/components/LanguageSwitcher.svelte
index 45bc5885..314fb54c 100644
--- a/frontend/src/lib/components/LanguageSwitcher.svelte
+++ b/frontend/src/lib/components/LanguageSwitcher.svelte
@@ -18,7 +18,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 				? 'font-bold text-white'
 				: 'font-bold text-ink'
 			: inverted
-				? 'font-normal text-white/55 hover:text-white/85'
+				? 'font-normal text-white/70 hover:text-white'
 				: 'font-normal text-ink-3 hover:text-ink'}"
 	>
 		{locale}
diff --git a/frontend/src/routes/AppNav.svelte b/frontend/src/routes/AppNav.svelte
index 7744ca3f..32fce2e3 100644
--- a/frontend/src/routes/AppNav.svelte
+++ b/frontend/src/routes/AppNav.svelte
@@ -44,7 +44,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			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-accent
                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
 				? 'border-b-2 border-accent text-white'
-				: 'text-white/55 hover:text-white/85'}"
+				: 'text-white/70 hover:text-white'}"
 		>
 			{m.nav_documents()}
 		</a>
@@ -54,7 +54,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			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-accent
                    {page.url.pathname.startsWith('/persons')
 				? 'border-b-2 border-accent text-white'
-				: 'text-white/55 hover:text-white/85'}"
+				: 'text-white/70 hover:text-white'}"
 		>
 			{m.nav_persons()}
 		</a>
@@ -64,7 +64,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 			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-accent
                    {page.url.pathname.startsWith('/korrespondenz')
 				? 'border-b-2 border-accent text-white'
-				: 'text-white/55 hover:text-white/85'}"
+				: 'text-white/70 hover:text-white'}"
 		>
 			{m.nav_conversations()}
 		</a>
@@ -74,7 +74,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
 				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-accent
                    {page.url.pathname.startsWith('/admin')
 					? 'border-b-2 border-accent text-white'
-					: 'text-white/55 hover:text-white/85'}"
+					: 'text-white/70 hover:text-white'}"
 			>
 				{m.nav_admin()}
 			</a>
diff --git a/frontend/src/routes/AuthHeader.svelte b/frontend/src/routes/AuthHeader.svelte
index 1e6a34a9..6e8aafd6 100644
--- a/frontend/src/routes/AuthHeader.svelte
+++ b/frontend/src/routes/AuthHeader.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-import { setLocale, getLocale } from '$lib/paraglide/runtime';
-
-const locales = ['DE', 'EN', 'ES'] as const;
-const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
-const activeLocale = $derived(getLocale().toUpperCase());
+import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 </script>
 
 <header class="bg-brand-navy">
@@ -16,18 +12,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 				>
 			</a>
 			<div class="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 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
-                            {activeLocale === locale
-							? 'font-bold text-white'
-							: 'font-normal text-white/55 hover:text-white/85'}"
-					>
-						{locale}
-					</button>
-				{/each}
+				<LanguageSwitcher inverted />
 			</div>
 		</div>
 	</div>
-- 
2.49.1


From 2dd73cf594d317632b2f39efbd2e1830d8a74b83 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 09:43:29 +0200
Subject: [PATCH 12/12] test(LanguageSwitcher): add Vitest unit tests for
 inverted prop

Covers active/inactive class tokens for both inverted=true and inverted=false,
and verifies setLocale is called with the correct locale on button click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../LanguageSwitcher.svelte.spec.ts           | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 frontend/src/lib/components/LanguageSwitcher.svelte.spec.ts

diff --git a/frontend/src/lib/components/LanguageSwitcher.svelte.spec.ts b/frontend/src/lib/components/LanguageSwitcher.svelte.spec.ts
new file mode 100644
index 00000000..41e2df24
--- /dev/null
+++ b/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');
+	});
+});
-- 
2.49.1