From 55e681c209dcd17110c01de6c5b4e8c3bb3f05f0 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 30 Mar 2026 22:01:02 +0200
Subject: [PATCH] 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>