feat(ui): v0.16 features + dark mode across every page

Wires up everything from the previous commits into actual UI surfaces, and
applies Tailwind dark: variants throughout. All pages now support the
'system' / 'light' / 'dark' preference set in the onboarding step or in
Mein Konto → Design.

Layout & nav:
- routes/+layout.svelte: initTheme(), global pin-reset SSE handler that
  filters by user_id and calls clearPin(), one-shot /me/context fetch
  on boot to hydrate privacyNote + quota.
- components/BottomNav.svelte: dark variants on the frosted-glass bar.
- components/UploadSheet.svelte: dark variants on backdrop, sheet,
  source buttons.
- components/OnboardingGuide.svelte: new "Helles oder dunkles Design?"
  step (3-option custom-radio grid), reactive currentStep with proper
  type narrowing, dark variants throughout. Privacy-note nudge appears
  on the PIN step only when one is configured.

Feed:
- routes/feed/+page.svelte: diashow entry icon (tablet/desktop only),
  long-press → ContextSheet (Löschen for own posts, Original anzeigen
  for all), upload-deleted + feed-delta SSE handlers, dark variants on
  header, search, autocomplete, filter chips, empty states.
- components/FeedListCard.svelte: long-press wireup, double-tap-to-like,
  data-mode-aware mediaSrc via pickMediaUrl, kebab fallback for desktop,
  isOwn prop, dark variants.
- components/FeedGrid.svelte: long-press wireup, dark variants.
- components/LightboxModal.svelte: data-mode-aware src, double-tap heart
  burst, dark variants on card / comments / input.
- components/HashtagChips.svelte: dark variants.

Account:
- routes/account/+page.svelte: theme picker (3-button radio grid), data
  mode picker (with confirm sheet for Original), live quota widget,
  preformatted Datenschutzhinweis block, diashow tile (mobile only),
  pin now sourced from the $currentPin store so a global pin-reset
  clears it live, clearQueue() on explicit logout, dark variants
  across every card + both bottom sheets.

Upload:
- routes/upload/+page.svelte: per-user quota progress bar above the
  submit button, dark variants.

Host & Admin:
- routes/host/+page.svelte: PIN-reset confirm + one-time PIN modal,
  hosts may demote other hosts, canResetPinFor() helper, dark variants
  on all cards, modals, stats, toast.
- routes/admin/+page.svelte: Config form rebuilt as CONFIG_GROUPS with
  per-field kind (number / bool / text), renders toggles for the
  rate-limit + quota switches and a textarea for the privacy_note;
  Nutzer tab gains PIN reset + hosts-may-demote-hosts wiring; same
  one-time PIN modal; dark variants everywhere.
- routes/admin/login/+page.svelte: dark variants.

Join / Recover / Export:
- routes/join/+page.svelte: rename inline link to
  "Ich habe bereits einen Account", dark variants.
- routes/recover/+page.svelte: dark variants.
- routes/export/+page.svelte: dark variants on status cards + HTML
  guide modal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/OnboardingGuide.svelte

@@ -1,32 +1,63 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { privacyNote } from '$lib/privacy-note-store';
+	import { themePreference, type ThemePreference } from '$lib/theme-store';
 
 	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
 
+	type Step =
+		| { kind: 'text'; icon: string; title: string; body: string }
+		| { kind: 'theme'; icon: string; title: string };
+
 	let visible = $state(false);
 	let step = $state(0);
 
-	const steps = [
+	// The PIN step gets an extra line when the admin has set a Datenschutzhinweis. Done
+	// reactively so the nudge appears as soon as the note loads from `/me/context`,
+	// even if the user opens the onboarding before the request returns.
+	let hasPrivacyNote = $derived($privacyNote.trim().length > 0);
+
+	let steps: Step[] = $derived([
 		{
+			kind: 'text',
 			icon: '📸',
 			title: 'Willkommen bei EventSnap!',
 			body: 'Hier kannst du Fotos und Videos mit allen Gästen teilen — in Echtzeit, ganz ohne App-Store.'
 		},
 		{
+			kind: 'text',
 			icon: '⬆️',
 			title: 'Fotos & Videos hochladen',
 			body: 'Tippe auf den Plus-Button unten in der Mitte, um Fotos aus deiner Galerie zu wählen oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
 		},
 		{
+			kind: 'text',
 			icon: '#️⃣',
 			title: 'Hashtags nutzen',
 			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
 		},
 		{
+			kind: 'theme',
+			icon: '🌗',
+			title: 'Helles oder dunkles Design?'
+		},
+		{
+			kind: 'text',
 			icon: '🔑',
 			title: 'Deinen PIN merken!',
-			body: 'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.'
+			body:
+				'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.' +
+				(hasPrivacyNote ? ' Den Datenschutzhinweis findest du ebenfalls unter „Mein Konto".' : '')
 		}
+	]);
+
+	// Derived in the script so TypeScript can narrow on `.kind` inside the template.
+	let currentStep = $derived(steps[step]);
+
+	const THEME_OPTIONS: Array<{ value: ThemePreference; label: string; hint: string; icon: string }> = [
+		{ value: 'system', label: 'System', hint: 'Folgt der Geräteeinstellung', icon: '🖥️' },
+		{ value: 'light',  label: 'Hell',   hint: 'Heller Hintergrund',          icon: '☀️' },
+		{ value: 'dark',   label: 'Dunkel', hint: 'Dunkler Hintergrund',         icon: '🌙' }
 	];
 
 	if (browser && !localStorage.getItem(GUIDE_SEEN_KEY)) {
@@ -50,32 +81,80 @@
 {#if visible}
 	<!-- Backdrop -->
 	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
-		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-2xl">
+		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl">
 			<!-- Step indicator -->
 			<div class="mb-5 flex justify-center gap-1.5">
 				{#each steps as _, i}
-					<div class="h-1.5 rounded-full transition-all {i === step ? 'w-6 bg-blue-600' : 'w-1.5 bg-gray-200'}"></div>
+					<div
+						class="h-1.5 rounded-full transition-all {i === step
+							? 'w-6 bg-blue-600 dark:bg-blue-500'
+							: 'w-1.5 bg-gray-200 dark:bg-gray-700'}"
+					></div>
 				{/each}
 			</div>
 
 			<!-- Content -->
 			<div class="mb-6 text-center">
-				<div class="mb-3 text-5xl">{steps[step].icon}</div>
-				<h2 class="mb-2 text-xl font-bold text-gray-900">{steps[step].title}</h2>
-				<p class="text-sm leading-relaxed text-gray-600">{steps[step].body}</p>
+				<div class="mb-3 text-5xl">{currentStep.icon}</div>
+				<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
+					{currentStep.title}
+				</h2>
+
+				{#if currentStep.kind === 'text'}
+					<p class="text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+						{currentStep.body}
+					</p>
+				{:else}
+					<p class="mb-4 text-sm text-gray-600 dark:text-gray-300">
+						Du kannst die Wahl jederzeit unter „Mein Konto" ändern.
+					</p>
+					<div class="space-y-2 text-left" role="radiogroup" aria-label="Design">
+						{#each THEME_OPTIONS as opt (opt.value)}
+							{@const selected = $themePreference === opt.value}
+							<button
+								type="button"
+								role="radio"
+								aria-checked={selected}
+								onclick={() => themePreference.set(opt.value)}
+								class="flex w-full cursor-pointer items-center gap-3 rounded-xl border-2 p-3 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200
+									{selected
+										? 'border-blue-600 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/40'
+										: 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800'}"
+							>
+								<span class="text-2xl leading-none">{opt.icon}</span>
+								<div class="flex-1">
+									<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{opt.label}</p>
+									<p class="text-xs text-gray-500 dark:text-gray-400">{opt.hint}</p>
+								</div>
+								<span
+									class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2
+										{selected
+											? 'border-blue-600 bg-blue-600 dark:border-blue-500 dark:bg-blue-500'
+											: 'border-gray-300 dark:border-gray-600'}"
+								>
+									{#if selected}
+										<svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+											<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+										</svg>
+									{/if}
+								</span>
+							</button>
+						{/each}
+					</div>
+				{/if}
 			</div>
 
 			<!-- Buttons -->
 			<div class="flex gap-2">
 				<button
 					onclick={dismiss}
-					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50"
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
 				>
 					Überspringen
 				</button>
 				<button
 					onclick={next}
-					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 				>
 					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
 				</button>