feat: implement i18n — extract all UI strings, add EN + ES-MX translations, add language selector

Extract all hardcoded German strings from every .svelte file and component
into Paraglide message keys. Add complete translations for all keys in
messages/en.json (English) and messages/es.json (Spanish/Mexico).

Changes:
- messages/de.json: 100+ keys covering navigation, buttons, form labels,
  placeholders, section headings, empty states, and error messages
- messages/en.json, messages/es.json: complete translations for all keys
- project.inlang/settings.json: change baseLocale from "en" to "de"
- +layout.svelte: add DE/EN/ES language selector in header using setLocale();
  active language is bold, choice persists via Paraglide cookie strategy
- All 10 route pages + 3 shared components: replace hardcoded German with m.key()
- e2e/lang.spec.ts: E2E tests for language selector visibility, switching,
  persistence across navigation, and active state highlighting

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

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { goto } from '$app/navigation';
+import { m } from '$lib/paraglide/messages.js';
 
 let { data } = $props();
 
@@ -20,16 +21,16 @@ function handleSearch(e: Event) {
 		class="mb-10 flex flex-col justify-between gap-6 border-b border-brand-navy/10 pb-6 md:flex-row md:items-end"
 	>
 		<div>
-			<h1 class="font-serif text-3xl font-medium text-brand-navy">Personenverzeichnis</h1>
+			<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.persons_heading()}</h1>
 			<p class="mt-2 max-w-xl font-sans text-sm text-brand-navy/60">
-				Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.
+				{m.persons_subtitle()}
 			</p>
 			<a
 				href="/persons/new"
 				class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
 			>
 				<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" alt="" aria-hidden="true" class="h-4 w-4" />
-				Neue Person
+				{m.persons_btn_new()}
 			</a>
 		</div>
 
@@ -40,7 +41,7 @@ function handleSearch(e: Event) {
 				<input
 					id="search"
 					type="text"
-					placeholder="Namen suchen..."
+					placeholder={m.persons_search_placeholder()}
 					value={data.q || ''}
 					oninput={handleSearch}
 					class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 font-sans text-sm text-brand-navy placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
@@ -63,8 +64,8 @@ function handleSearch(e: Event) {
 			>
 				<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
 			</div>
-			<p class="font-serif text-lg text-brand-navy">Keine Personen gefunden.</p>
-			<p class="mt-1 font-sans text-sm text-gray-500">Versuchen Sie einen anderen Suchbegriff.</p>
+			<p class="font-serif text-lg text-brand-navy">{m.persons_empty_heading()}</p>
+			<p class="mt-1 font-sans text-sm text-gray-500">{m.persons_empty_text()}</p>
 		</div>
 	{:else}
 		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">

frontend/src/routes/persons/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { enhance } from '$app/forms';
     import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+    import { m } from '$lib/paraglide/messages.js';
 
     let { data, form } = $props();
 
@@ -29,7 +30,7 @@
     <div class="mb-6">
         <a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group">
             <img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg" alt="" aria-hidden="true" class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" />
-            Zurück zur Übersicht
+            {m.btn_back_to_overview()}
         </a>
     </div>
 
@@ -42,7 +43,7 @@
                 <!-- Edit Form -->
                 <form method="POST" action="?/update" use:enhance>
                     <div class="flex flex-col gap-6">
-                        <h2 class="text-xl font-serif text-brand-navy border-b border-gray-100 pb-3">Person bearbeiten</h2>
+                        <h2 class="text-xl font-serif text-brand-navy border-b border-gray-100 pb-3">{m.person_edit_heading()}</h2>
 
                         {#if form?.updateError}
                             <p class="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{form.updateError}</p>
@@ -50,7 +51,7 @@
 
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
-                                <label for="firstName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Vorname *</label>
+                                <label for="firstName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_first_name()} *</label>
                                 <input
                                     id="firstName"
                                     name="firstName"
@@ -61,7 +62,7 @@
                                 />
                             </div>
                             <div>
-                                <label for="lastName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Nachname *</label>
+                                <label for="lastName" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_last_name()} *</label>
                                 <input
                                     id="lastName"
                                     name="lastName"
@@ -72,7 +73,7 @@
                                 />
                             </div>
                             <div class="md:col-span-2">
-                                <label for="alias" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">Rufname / Alias</label>
+                                <label for="alias" class="block text-xs font-bold uppercase tracking-widest text-gray-400 mb-1">{m.form_label_alias()}</label>
                                 <input
                                     id="alias"
                                     name="alias"
@@ -85,10 +86,10 @@
 
                         <div class="flex gap-3">
                             <button type="submit" class="px-5 py-2 bg-brand-navy text-white text-sm font-bold uppercase tracking-widest rounded hover:bg-brand-navy/80 transition-colors">
-                                Speichern
+                                {m.btn_save()}
                             </button>
                             <button type="button" onclick={() => (editMode = false)} class="px-5 py-2 border border-gray-300 text-gray-600 text-sm font-bold uppercase tracking-widest rounded hover:bg-gray-50 transition-colors">
-                                Abbrechen
+                                {m.btn_cancel()}
                             </button>
                         </div>
                     </div>
@@ -109,19 +110,19 @@
                             </h1>
                             <button onclick={() => (editMode = true)} class="ml-4 flex-shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:border-brand-navy hover:text-brand-navy transition-colors">
                                 <img src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg" alt="" aria-hidden="true" class="w-3.5 h-3.5" />
-                                Bearbeiten
+                                {m.btn_edit()}
                             </button>
                         </div>
 
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                             <div>
-                                <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Voller Name</span>
+                                <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.person_label_full_name()}</span>
                                 <span class="block text-lg font-serif text-brand-navy">{person.firstName} {person.lastName}</span>
                             </div>
 
                             {#if person.alias}
                             <div>
-                                <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">Rufname / Alias</span>
+                                <span class="block text-xs font-bold font-sans text-gray-400 uppercase tracking-widest mb-1">{m.form_label_alias()}</span>
                                 <span class="block text-lg font-serif text-brand-navy italic">"{person.alias}"</span>
                             </div>
                             {/if}
@@ -136,9 +137,9 @@
     {#key person.id}
     <div class="bg-white shadow-sm border border-brand-sand rounded-sm overflow-hidden mb-10">
         <div class="p-6 md:p-8">
-            <h2 class="text-lg font-serif text-brand-navy mb-1">Person zusammenführen</h2>
+            <h2 class="text-lg font-serif text-brand-navy mb-1">{m.person_merge_heading()}</h2>
             <p class="text-sm text-gray-500 font-sans mb-5">
-                Diese Person wird in die gewählte Zielperson überführt. Alle Dokumente und Verknüpfungen werden übertragen, danach wird diese Person gelöscht.
+                {m.person_merge_description()}
             </p>
 
             {#if form?.mergeError}
@@ -152,7 +153,7 @@
                     <div class="flex-1">
                         <PersonTypeahead
                             name="_targetPersonDisplay"
-                            label="Zusammenführen mit"
+                            label={m.person_merge_target_label()}
                             value={mergeTargetId}
                             onchange={(value) => { mergeTargetId = value; showMergeConfirm = false; }}
                         />
@@ -165,7 +166,7 @@
                             onclick={() => (showMergeConfirm = true)}
                             class="px-4 py-2 text-sm font-bold uppercase tracking-widest border border-red-300 text-red-600 rounded hover:bg-red-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                         >
-                            Zusammenführen
+                            {m.person_btn_merge()}
                         </button>
                     {:else}
                         <div class="flex gap-2">
@@ -173,14 +174,14 @@
                                 type="submit"
                                 class="px-4 py-2 text-sm font-bold uppercase tracking-widest bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
                             >
-                                Ja, zusammenführen
+                                {m.person_btn_merge_confirm()}
                             </button>
                             <button
                                 type="button"
                                 onclick={() => (showMergeConfirm = false)}
                                 class="px-4 py-2 text-sm font-bold uppercase tracking-widest border border-gray-300 text-gray-500 rounded hover:bg-gray-50 transition-colors"
                             >
-                                Abbrechen
+                                {m.btn_cancel()}
                             </button>
                         </div>
                     {/if}
@@ -188,7 +189,7 @@
 
                 {#if showMergeConfirm}
                     <p class="mt-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-3 py-2">
-                        Achtung: Diese Aktion ist nicht rückgängig zu machen. <strong>{person.firstName} {person.lastName}</strong> wird gelöscht.
+                        {m.person_merge_warning()} <strong>{person.firstName} {person.lastName}</strong> wird gelöscht.
                     </p>
                 {/if}
             </form>
@@ -199,7 +200,7 @@
     <!-- Linked Documents Section -->
     <div>
         <div class="flex items-center justify-between mb-6 border-b border-brand-navy/10 pb-2">
-            <h2 class="text-xl font-serif text-brand-navy">Gesendete Dokumente</h2>
+            <h2 class="text-xl font-serif text-brand-navy">{m.person_docs_heading()}</h2>
             <span class="bg-brand-navy text-white text-xs font-bold px-2 py-1 rounded-full">
                 {documents.length}
             </span>
@@ -207,7 +208,7 @@
 
         {#if documents.length === 0}
             <div class="p-12 text-center bg-white border border-brand-sand border-dashed rounded-sm">
-                <p class="text-gray-500 font-sans">Diese Person ist noch nicht als Absender verknüpft.</p>
+                <p class="text-gray-500 font-sans">{m.person_no_docs()}</p>
             </div>
         {:else}
             <ul class="space-y-3">

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
 let { form } = $props();
 </script>
 
@@ -22,9 +23,9 @@ let { form } = $props();
 					d="M10 19l-7-7m0 0l7-7m-7 7h18"
 				/>
 			</svg>
-			Zurück zur Übersicht
+			{m.btn_back_to_overview()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">Neue Person</h1>
+		<h1 class="font-serif text-3xl text-brand-navy">{m.persons_new_heading()}</h1>
 	</div>
 
 	{#if form?.error}
@@ -34,13 +35,13 @@ let { form } = $props();
 	<form method="POST">
 		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
-				Angaben zur Person
+				{m.persons_section_details()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<div>
 					<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
-						>Vorname *</label
+						>{m.form_label_first_name()} *</label
 					>
 					<input
 						id="firstName"
@@ -53,7 +54,7 @@ let { form } = $props();
 
 				<div>
 					<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
-						>Nachname *</label
+						>{m.form_label_last_name()} *</label
 					>
 					<input
 						id="lastName"
@@ -66,13 +67,13 @@ let { form } = $props();
 
 				<div class="md:col-span-2">
 					<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
-						>Rufname / Alias</label
+						>{m.form_label_alias()}</label
 					>
 					<input
 						id="alias"
 						name="alias"
 						type="text"
-						placeholder="z.B. Oma Frieda, Onkel Karl…"
+						placeholder={m.form_placeholder_alias()}
 						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
 					/>
 				</div>
@@ -87,13 +88,13 @@ let { form } = $props();
 				href="/persons"
 				class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
 			>
-				Abbrechen
+				{m.btn_cancel()}
 			</a>
 			<button
 				type="submit"
 				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
 			>
-				Erstellen
+				{m.btn_create()}
 			</button>
 		</div>
 	</form>