chore(frontend): add ESLint + Prettier; fix real findings; format the tree

The frontend had no JS/TS linter — only svelte-check. Add flat-config ESLint (typescript-eslint + eslint-plugin-svelte) and Prettier (tabs/single-quote, matching the existing style). Rules encode "catch bugs, not enforce taste": - svelte/require-each-key KEPT — it is the exact bug class as the feed mis-tap fix. Fixed every flagged block: keyed activeFilters, filteredUsers, stagedFiles (by previewUrl), captionTags, admin tabs/jobs/users, the export-viewer suggestions/filters/comments, and the static skeleton loops. - svelte/prefer-svelte-reactivity KEPT — inline-disabled only the verified-safe sites (a local freq Map in a $derived.by, throwaway URLSearchParams query builders), with a reason each. - svelte/no-navigation-without-resolve OFF — wants resolve() around every goto()/href; taste, not a bug, and pure churn. - svelte/no-unused-svelte-ignore OFF — those comments are consumed by svelte-check, which ESLint can't see, so it wrongly calls them unused; removing them would reintroduce a11y warnings. - no-explicit-any OFF for *.test.ts only (partial fixtures legitimately use any). Real code fixes beyond keys: removed a dead jobLabel(), an unused ViewerComment import and unused catch binding, an unused scroll-lock arg, and replaced an empty interface with a type alias. Then `prettier --write` (54 files). Formatting only. Verified: eslint clean, svelte-check 0 errors, vitest 46 passed, vite build succeeds. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-15 20:45:42 +02:00
parent 4d14df18d0
commit f8cba95e49
59 changed files with 4046 additions and 998 deletions
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -0,0 +1,6 @@
+.svelte-kit/
+build/
+dist/
+node_modules/
+static/export-viewer/
+package-lock.json
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,70 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+import svelteConfig from './svelte.config.js';
+
+/**
+ * Flat-config ESLint for the SvelteKit frontend. Type-aware where it's cheap; Prettier owns
+ * formatting (its config is last so it disables every stylistic rule that would fight the formatter).
+ */
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	},
+	{
+		rules: {
+			// A leading underscore is the deliberate "intentionally unused" marker (e.g. `{#each x as _}`).
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{ argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }
+			],
+			// Off on purpose. This rule wants every `goto('/x')` / `href="/x"` wrapped in `resolve()`
+			// for typed routes. That is a taste/ergonomics preference, not a correctness rule — string
+			// routes work fine and the app uses them deliberately. We keep the rules that catch actual
+			// bugs (require-each-key, prefer-svelte-reactivity) and drop this churn.
+			'svelte/no-navigation-without-resolve': 'off',
+			// Off: `svelte-ignore` comments are consumed by the Svelte compiler / svelte-check, which
+			// ESLint cannot see — so it reports every one as "unused" even when it is actively
+			// suppressing a real svelte-check a11y warning. Removing them on ESLint's say-so would
+			// reintroduce those warnings. svelte-check is the authority on these, not ESLint.
+			'svelte/no-unused-svelte-ignore': 'off'
+		}
+	},
+	{
+		// Test fixtures legitimately use `any` for partial/mock shapes (e.g. a stub upload that only
+		// sets the two fields the function under test reads). Not worth threading full types through.
+		files: ['**/*.test.ts'],
+		rules: { '@typescript-eslint/no-explicit-any': 'off' }
+	},
+	{
+		ignores: [
+			'.svelte-kit/',
+			'build/',
+			'dist/',
+			'node_modules/',
+			'static/export-viewer/',
+			'*.config.js',
+			'*.config.ts'
+		]
+	}
+);
--- a/frontend/export-viewer/src/app.css
+++ b/frontend/export-viewer/src/app.css
@@ -1,3 +1,3 @@
 /* Pulls the live app's design tokens so the offline keepsake matches visually.
 * See ../../src/tailwind-theme.css for the source of truth. */
-@import "../../src/tailwind-theme.css";
+@import '../../src/tailwind-theme.css';
--- a/frontend/export-viewer/src/routes/+page.svelte
+++ b/frontend/export-viewer/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { ViewerData, ViewerPost, ViewerComment } from '$lib/types';
+	import type { ViewerData, ViewerPost } from '$lib/types';

 	let data = $state<ViewerData | null>(null);
 	let loading = $state(true);
@@ -13,7 +13,10 @@
 	let searchQuery = $state('');
 	let showAutocomplete = $state(false);

-	interface Filter { type: 'tag' | 'user'; value: string }
+	interface Filter {
+		type: 'tag' | 'user';
+		value: string;
+	}
 	let activeFilters = $state<Filter[]>([]);

 	// Lightbox state
@@ -29,6 +32,7 @@
 	let posts = $derived(data?.posts ?? []);

 	let allTags = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local throwaway counter inside a $derived.by; never stored in $state.
 		const freq = new Map<string, number>();
 		for (const p of posts) {
 			for (const t of p.tags) {
@@ -47,7 +51,7 @@
 			if (!showAutocomplete) return [];
 			return [
 				...allUploaders.slice(0, 3).map((u) => ({ type: 'user' as const, value: u })),
-				...allTags.slice(0, 3).map(([t]) => ({ type: 'tag' as const, value: t })),
+				...allTags.slice(0, 3).map(([t]) => ({ type: 'tag' as const, value: t }))
 			];
 		}
 		if (q.startsWith('#')) {
@@ -66,7 +70,7 @@
 			...allTags
 				.filter(([t]) => t.includes(lower))
 				.slice(0, 4)
-				.map(([t]) => ({ type: 'tag' as const, value: t })),
+				.map(([t]) => ({ type: 'tag' as const, value: t }))
 		];
 	});

@@ -98,8 +102,9 @@
 			const res = await fetch('./data.json');
 			if (!res.ok) throw new Error(`HTTP ${res.status}`);
 			data = await res.json();
-		} catch (e) {
-			error = 'Daten konnten nicht geladen werden. Stelle sicher, dass data.json im selben Ordner liegt.';
+		} catch {
+			error =
+				'Daten konnten nicht geladen werden. Stelle sicher, dass data.json im selben Ordner liegt.';
 		} finally {
 			loading = false;
 		}
@@ -110,14 +115,20 @@
 	function formatDate(iso: string): string {
 		const d = new Date(iso);
 		return d.toLocaleString('de-DE', {
-			day: '2-digit', month: '2-digit', year: 'numeric',
-			hour: '2-digit', minute: '2-digit',
+			day: '2-digit',
+			month: '2-digit',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
 		});
 	}

 	function formatShortDate(iso: string): string {
 		return new Date(iso).toLocaleString('de-DE', {
-			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+			day: '2-digit',
+			month: '2-digit',
+			hour: '2-digit',
+			minute: '2-digit'
 		});
 	}

@@ -131,7 +142,7 @@
 		'bg-green-100 text-green-700',
 		'bg-amber-100 text-amber-700',
 		'bg-rose-100 text-rose-700',
-		'bg-teal-100 text-teal-700',
+		'bg-teal-100 text-teal-700'
 	];
 	function avatarColor(name: string): string {
 		let hash = 0;
@@ -214,7 +225,9 @@

 {#if loading}
 	<div class="flex min-h-screen items-center justify-center bg-gray-50">
-		<div class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
+		<div
+			class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"
+		></div>
 	</div>
 {:else if error}
 	<div class="flex min-h-screen items-center justify-center bg-gray-50 p-4">
@@ -233,20 +246,44 @@
 				<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
 					<button
 						onclick={() => switchView('list')}
-						class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+						class="rounded-md p-1.5 transition-colors {viewMode === 'list'
+							? 'bg-white text-gray-900 shadow-sm'
+							: 'text-gray-400 hover:text-gray-600'}"
 						aria-label="Listenansicht"
 					>
-						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+						<svg
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+							/>
 						</svg>
 					</button>
 					<button
 						onclick={() => switchView('grid')}
-						class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+						class="rounded-md p-1.5 transition-colors {viewMode === 'grid'
+							? 'bg-white text-gray-900 shadow-sm'
+							: 'text-gray-400 hover:text-gray-600'}"
 						aria-label="Rasteransicht"
 					>
-						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+						<svg
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
+							/>
 						</svg>
 					</button>
 				</div>
@@ -258,22 +295,20 @@
 					<div class="flex gap-2 overflow-x-auto pb-2">
 						<button
 							onclick={() => selectHashtag(null)}
-							class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
-								selectedHashtag === null
-									? 'bg-blue-600 text-white'
-									: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-							}"
+							class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {selectedHashtag ===
+							null
+								? 'bg-blue-600 text-white'
+								: 'bg-gray-200 text-gray-700 hover:bg-gray-300'}"
 						>
 							Alle
 						</button>
 						{#each allTags as [tag, count] (tag)}
 							<button
 								onclick={() => selectHashtag(tag)}
-								class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
-									selectedHashtag === tag
-										? 'bg-blue-600 text-white'
-										: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-								}"
+								class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {selectedHashtag ===
+								tag
+									? 'bg-blue-600 text-white'
+									: 'bg-gray-200 text-gray-700 hover:bg-gray-300'}"
 							>
 								#{tag}
 								<span class="ml-1 text-xs opacity-70">{count}</span>
@@ -287,9 +322,21 @@
 			{#if viewMode === 'grid'}
 				<div class="mx-auto max-w-2xl px-4 pb-3">
 					<div class="relative">
-						<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200">
-							<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+						<div
+							class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200"
+						>
+							<svg
+								class="h-4 w-4 shrink-0 text-gray-400"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+								/>
 							</svg>
 							<input
 								type="search"
@@ -301,11 +348,19 @@
 							/>
 							{#if searchQuery}
 								<button
-									onclick={() => { searchQuery = ''; }}
+									onclick={() => {
+										searchQuery = '';
+									}}
 									class="shrink-0 text-gray-400 hover:text-gray-600"
 									aria-label="Suche loschen"
 								>
-									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<svg
+										class="h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										stroke-width="2"
+									>
 										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 									</svg>
 								</button>
@@ -314,15 +369,27 @@

 						<!-- Autocomplete dropdown -->
 						{#if showAutocomplete && suggestions.length > 0}
-							<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
-								{#each suggestions as item}
+							<div
+								class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg"
+							>
+								{#each suggestions as item (item.type + ':' + item.value)}
 									<button
 										class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
 										onmousedown={() => selectSuggestion(item)}
 									>
 										{#if item.type === 'user'}
-											<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-												<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+											<svg
+												class="h-4 w-4 shrink-0 text-gray-400"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+												stroke-width="1.5"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+												/>
 											</svg>
 											<span class="font-medium text-gray-900">{item.value}</span>
 										{:else}
@@ -338,12 +405,28 @@
 					<!-- Active filter chips -->
 					{#if activeFilters.length > 0}
 						<div class="mt-2 flex flex-wrap items-center gap-1.5">
-							{#each activeFilters as filter}
-								<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
+							{#each activeFilters as filter (filter.type + ':' + filter.value)}
+								<span
+									class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700"
+								>
 									{filter.type === 'tag' ? '#' : ''}{filter.value}
-									<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
-										<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+									<button
+										onclick={() => removeFilter(filter)}
+										class="ml-0.5 hover:text-blue-900"
+										aria-label="Filter entfernen"
+									>
+										<svg
+											class="h-3 w-3"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+											stroke-width="2.5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M6 18 18 6M6 6l12 12"
+											/>
 										</svg>
 									</button>
 								</span>
@@ -364,7 +447,9 @@
 			<div class="py-20 text-center">
 				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
 				{#if activeFilters.length > 0}
-					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurucksetzen</button>
+					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline"
+						>Filter zurucksetzen</button
+					>
 				{/if}
 			</div>
 		{:else if viewMode === 'list'}
@@ -395,10 +480,16 @@
 							{#if post.media.type === 'video'}
 								<div class="relative aspect-video w-full bg-gray-900">
 									{#if post.media.thumb}
-										<img src={post.media.thumb} alt="" class="h-full w-full object-cover opacity-80" />
+										<img
+											src={post.media.thumb}
+											alt=""
+											class="h-full w-full object-cover opacity-80"
+										/>
 									{/if}
 									<div class="absolute inset-0 flex items-center justify-center">
-										<span class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white">
+										<span
+											class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white"
+										>
 											<svg class="h-7 w-7 pl-0.5" fill="currentColor" viewBox="0 0 24 24">
 												<path d="M8 5v14l11-7z" />
 											</svg>
@@ -415,8 +506,18 @@
 								/>
 							{:else}
 								<div class="flex aspect-square w-full items-center justify-center bg-gray-100">
-									<svg class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+									<svg
+										class="h-12 w-12 text-gray-300"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="1.5"
+											d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
 									</svg>
 								</div>
 							{/if}
@@ -425,14 +526,34 @@
 						<!-- Stats row (read-only) -->
 						<div class="flex items-center gap-4 px-4 py-2">
 							<span class="flex items-center gap-1.5 text-sm font-medium text-gray-500">
-								<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+								<svg
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+									/>
 								</svg>
 								{post.likes}
 							</span>
 							<span class="flex items-center gap-1.5 text-sm font-medium text-gray-500">
-								<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+								<svg
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+									/>
 								</svg>
 								{post.comments.length}
 							</span>
@@ -454,7 +575,9 @@
 			<div class="mx-auto max-w-2xl">
 				<div class="grid grid-cols-3 gap-0.5">
 					{#each displayPosts as post (post.id)}
-						<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
+						<div
+							class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100"
+						>
 							<button
 								onclick={() => openLightbox(post)}
 								class="block h-full w-full"
@@ -472,29 +595,51 @@
 										</div>
 									</div>
 								{:else if post.media.thumb}
-									<img src={post.media.thumb} alt="" class="h-full w-full object-cover" loading="lazy" />
+									<img
+										src={post.media.thumb}
+										alt=""
+										class="h-full w-full object-cover"
+										loading="lazy"
+									/>
 								{:else}
 									<div class="flex h-full items-center justify-center text-gray-400">
 										<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="1.5"
+												d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+											/>
 										</svg>
 									</div>
 								{/if}
 							</button>

 							<!-- Overlay with name and stats -->
-							<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2">
+							<div
+								class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2"
+							>
 								<p class="truncate text-xs font-medium text-white">{post.uploader}</p>
 								<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
 									<span class="flex items-center gap-0.5">
 										<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+											/>
 										</svg>
 										{post.likes}
 									</span>
 									<span class="flex items-center gap-0.5">
 										<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+											/>
 										</svg>
 										{post.comments.length}
 									</span>
@@ -519,16 +664,28 @@
 			class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
 			role="dialog"
 			tabindex="-1"
-			onclick={(e) => { if (e.target === e.currentTarget) closeLightbox(); }}
+			onclick={(e) => {
+				if (e.target === e.currentTarget) closeLightbox();
+			}}
 			ontouchstart={handleTouchStart}
 			ontouchend={handleTouchEnd}
 		>
-			<div class="flex max-h-[95vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white sm:m-4">
+			<div
+				class="flex max-h-[95vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white sm:m-4"
+			>
 				<!-- Media -->
 				<div class="relative bg-black">
-					<button onclick={closeLightbox} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
+					<button
+						onclick={closeLightbox}
+						class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70"
+					>
 						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
 						</svg>
 					</button>

@@ -539,8 +696,18 @@
 							class="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70"
 							aria-label="Vorheriges"
 						>
-							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+							<svg
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M15.75 19.5 8.25 12l7.5-7.5"
+								/>
 							</svg>
 						</button>
 						<button
@@ -548,8 +715,18 @@
 							class="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70"
 							aria-label="Nachstes"
 						>
-							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+							<svg
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="m8.25 4.5 7.5 7.5-7.5 7.5"
+								/>
 							</svg>
 						</button>
 					{/if}
@@ -562,11 +739,7 @@
 							poster={selectedPost.media.thumb || undefined}
 						></video>
 					{:else}
-						<img
-							src={selectedPost.media.full}
-							alt=""
-							class="max-h-[50vh] w-full object-contain"
-						/>
+						<img src={selectedPost.media.full} alt="" class="max-h-[50vh] w-full object-contain" />
 					{/if}
 				</div>

@@ -576,17 +749,28 @@
 						<div class="flex items-center justify-between">
 							<div>
 								<span class="font-medium text-gray-900">{selectedPost.uploader}</span>
-								<span class="ml-2 text-xs text-gray-400">{formatShortDate(selectedPost.timestamp)}</span>
+								<span class="ml-2 text-xs text-gray-400"
+									>{formatShortDate(selectedPost.timestamp)}</span
+								>
 							</div>
-							<span class="flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-1 text-sm text-gray-600">
+							<span
+								class="flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-1 text-sm text-gray-600"
+							>
 								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+									/>
 								</svg>
 								{selectedPost.likes}
 							</span>
 						</div>
 						{#if selectedPost.caption}
-							<p class="mt-1 text-sm text-gray-700 [overflow-wrap:anywhere]">{selectedPost.caption}</p>
+							<p class="mt-1 text-sm text-gray-700 [overflow-wrap:anywhere]">
+								{selectedPost.caption}
+							</p>
 						{/if}
 					</div>

@@ -596,11 +780,13 @@
 							<p class="text-center text-sm text-gray-400">Keine Kommentare.</p>
 						{:else}
 							<div class="space-y-3">
-								{#each selectedPost.comments as comment}
+								{#each selectedPost.comments as comment, i (i)}
 									<div>
 										<span class="text-sm font-medium text-gray-900">{comment.author}</span>
 										<span class="ml-1 text-sm text-gray-700">{comment.text}</span>
-										<div class="mt-0.5 text-xs text-gray-400">{formatShortDate(comment.timestamp)}</div>
+										<div class="mt-0.5 text-xs text-gray-400">
+											{formatShortDate(comment.timestamp)}
+										</div>
 									</div>
 								{/each}
 							</div>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,20 +11,33 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:unit": "vitest run",
-		"test:unit:watch": "vitest"
+		"test:unit:watch": "vitest",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"format": "prettier --write .",
+		"format:check": "prettier --check ."
 	},
 	"devDependencies": {
+		"@eslint/js": "^9.39.5",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-node": "^5.5.4",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/vite": "^4.2.2",
 		"@types/qrcode": "^1.5.6",
+		"eslint": "^9.39.5",
+		"eslint-config-prettier": "^9.1.2",
+		"eslint-plugin-svelte": "^3.20.0",
+		"globals": "^15.15.0",
 		"jsdom": "^29.1.1",
+		"prettier": "^3.9.5",
+		"prettier-plugin-svelte": "^3.5.2",
 		"svelte": "^5.54.0",
 		"svelte-check": "^4.4.2",
+		"svelte-eslint-parser": "^1.8.0",
 		"tailwindcss": "^4.2.2",
 		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.64.0",
 		"vite": "^7.3.1",
 		"vitest": "^4.1.9"
 	},
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,4 +1,4 @@
-@import "./tailwind-theme.css";
+@import './tailwind-theme.css';

 /* Respect the OS "reduce motion" setting. Collapses every animation/transition
 * (HeartBurst, Skeleton pulse, diashow cross-fades, sheet/FAB slides) to a
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -28,7 +28,8 @@
 			(function () {
 				try {
 					var pref = localStorage.getItem('eventsnap_theme') || 'system';
-					var dark = pref === 'dark' ||
+					var dark =
+						pref === 'dark' ||
 						(pref === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 					if (dark) document.documentElement.classList.add('dark');
 				} catch (_) {}
--- a/frontend/src/lib/README.md
+++ b/frontend/src/lib/README.md
@@ -3,6 +3,7 @@
 Short rules. The patterns we already follow as of v0.16 — write new code that fits.

 **One store per cross-cutting concern.** A single `*-store.ts` file owns each one:
+
 - `auth.ts` — JWT / PIN in `localStorage`, `isAuthenticated` writable
 - `ui-store.ts` — bottom-nav visibility, upload-sheet open state, FAB badge count
 - `data-mode-store.ts` — Saver vs Original media-loading preference
--- a/frontend/src/lib/actions/doubletap.ts
+++ b/frontend/src/lib/actions/doubletap.ts
@@ -20,8 +20,8 @@ export interface DoubletapOptions {
 }

 interface DoubletapAttributes {
-	'ondoubletap'?: (event: CustomEvent<void>) => void;
-	'onsingletap'?: (event: CustomEvent<void>) => void;
+	ondoubletap?: (event: CustomEvent<void>) => void;
+	onsingletap?: (event: CustomEvent<void>) => void;
 }

 export function doubletap(
--- a/frontend/src/lib/actions/focus-trap.ts
+++ b/frontend/src/lib/actions/focus-trap.ts
@@ -30,7 +30,9 @@ export function focusTrap(
 	options: FocusTrapOptions = {}
 ): ActionReturn<FocusTrapOptions> {
 	let opts = options;
-	const previouslyFocused = (typeof document !== 'undefined' ? document.activeElement : null) as HTMLElement | null;
+	const previouslyFocused = (
+		typeof document !== 'undefined' ? document.activeElement : null
+	) as HTMLElement | null;

 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape' && opts.closeOnEscape !== false && opts.onclose) {
@@ -85,7 +87,11 @@ export function focusTrap(
 		destroy() {
 			node.removeEventListener('keydown', onKeyDown);
 			if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
-				try { previouslyFocused.focus({ preventScroll: true }); } catch { /* element may have unmounted */ }
+				try {
+					previouslyFocused.focus({ preventScroll: true });
+				} catch {
+					/* element may have unmounted */
+				}
 			}
 		}
 	};
--- a/frontend/src/lib/actions/longpress.ts
+++ b/frontend/src/lib/actions/longpress.ts
@@ -24,7 +24,7 @@ export interface LongpressOptions {
 }

 interface LongpressAttributes {
-	'onlongpress'?: (event: CustomEvent<void>) => void;
+	onlongpress?: (event: CustomEvent<void>) => void;
 }

 export function longpress(
--- a/frontend/src/lib/actions/scroll-lock.ts
+++ b/frontend/src/lib/actions/scroll-lock.ts
@@ -40,7 +40,7 @@ function unlock() {
 * dialog is open (e.g. inside `{#if open}` or alongside a `class:` toggle) so the
 * action's create/destroy line up with open/close.
 */
-export function scrollLock(node: HTMLElement): ActionReturn {
+export function scrollLock(_node: HTMLElement): ActionReturn {
 	lock();
 	return {
 		destroy() {
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -15,11 +15,7 @@ export class ApiError extends Error {

 const TIMEOUT_MS = 20_000;

-async function request<T>(
-	method: string,
-	path: string,
-	body?: unknown
-): Promise<T> {
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
 	const headers: Record<string, string> = {};
 	const token = getToken();
 	if (token) {
@@ -75,7 +71,11 @@ async function request<T>(
 			clearAuth();
 		}
 		const d = (data ?? {}) as { error?: string; message?: string };
-		throw new ApiError(res.status, d.error ?? 'unknown', d.message ?? `Serverfehler (${res.status}).`);
+		throw new ApiError(
+			res.status,
+			d.error ?? 'unknown',
+			d.message ?? `Serverfehler (${res.status}).`
+		);
 	}

 	return data as T;
--- a/frontend/src/lib/auth.test.ts
+++ b/frontend/src/lib/auth.test.ts
@@ -3,100 +3,115 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';

 // auth.ts guards every localStorage access behind `browser`; force it true so the
 // jsdom localStorage is actually used (the shared mock stubs it to false).
-vi.mock('$app/environment', () => ({ browser: true, dev: false, building: false, version: 'test' }));
+vi.mock('$app/environment', () => ({
+	browser: true,
+	dev: false,
+	building: false,
+	version: 'test'
+}));

-import { setAuth, setAdminAuth, getToken, getPin, getExpiry, getRole, getUserId, clearAuth, clearPin } from './auth';
+import {
+	setAuth,
+	setAdminAuth,
+	getToken,
+	getPin,
+	getExpiry,
+	getRole,
+	getUserId,
+	clearAuth,
+	clearPin
+} from './auth';

 /** Build a JWT-shaped string (header.payload.sig) with the given claims. */
 function makeJwt(claims: object): string {
-  const seg = (o: object) => btoa(JSON.stringify(o));
-  return `${seg({ alg: 'HS256', typ: 'JWT' })}.${seg(claims)}.sig`;
+	const seg = (o: object) => btoa(JSON.stringify(o));
+	return `${seg({ alg: 'HS256', typ: 'JWT' })}.${seg(claims)}.sig`;
 }

 beforeEach(() => {
-  localStorage.clear();
-  sessionStorage.clear();
+	localStorage.clear();
+	sessionStorage.clear();
 });

 describe('auth — token storage', () => {
-  it('setAuth then getToken/getPin round-trips', () => {
-    setAuth('a.b.c', '1234', 'uid-1', 'Alice');
-    expect(getToken()).toBe('a.b.c');
-    expect(getPin()).toBe('1234');
-  });
+	it('setAuth then getToken/getPin round-trips', () => {
+		setAuth('a.b.c', '1234', 'uid-1', 'Alice');
+		expect(getToken()).toBe('a.b.c');
+		expect(getPin()).toBe('1234');
+	});

-  it('setAuth without a PIN leaves the PIN unset', () => {
-    setAuth('a.b.c', null, 'uid-1');
-    expect(getToken()).toBe('a.b.c');
-    expect(getPin()).toBeNull();
-  });
+	it('setAuth without a PIN leaves the PIN unset', () => {
+		setAuth('a.b.c', null, 'uid-1');
+		expect(getToken()).toBe('a.b.c');
+		expect(getPin()).toBeNull();
+	});

-  it('clearAuth removes the token but KEEPS the PIN (needed for recovery)', () => {
-    setAuth('a.b.c', '1234', 'uid');
-    clearAuth();
-    expect(getToken()).toBeNull();
-    expect(getPin()).toBe('1234');
-  });
+	it('clearAuth removes the token but KEEPS the PIN (needed for recovery)', () => {
+		setAuth('a.b.c', '1234', 'uid');
+		clearAuth();
+		expect(getToken()).toBeNull();
+		expect(getPin()).toBe('1234');
+	});

-  it('clearPin removes the cached PIN', () => {
-    setAuth('a.b.c', '1234', 'uid');
-    clearPin();
-    expect(getPin()).toBeNull();
-  });
+	it('clearPin removes the cached PIN', () => {
+		setAuth('a.b.c', '1234', 'uid');
+		clearPin();
+		expect(getPin()).toBeNull();
+	});
 });

 describe('auth — admin (sessionStorage) vs guest (localStorage) identity displacement', () => {
-  // Regression guard for a privilege-escalation: reads are sessionStorage-first, so a guest
-  // login MUST displace any resident admin token (else the guest silently runs as admin on a
-  // shared device), and symmetrically an admin login must displace a resident guest token.
-  it('a guest login displaces a resident admin session (no privilege escalation)', () => {
-    setAdminAuth(makeJwt({ role: 'admin' }), 'admin-uid', 'Admin');
-    expect(getRole()).toBe('admin');
+	// Regression guard for a privilege-escalation: reads are sessionStorage-first, so a guest
+	// login MUST displace any resident admin token (else the guest silently runs as admin on a
+	// shared device), and symmetrically an admin login must displace a resident guest token.
+	it('a guest login displaces a resident admin session (no privilege escalation)', () => {
+		setAdminAuth(makeJwt({ role: 'admin' }), 'admin-uid', 'Admin');
+		expect(getRole()).toBe('admin');

-    setAuth(makeJwt({ role: 'guest' }), '1234', 'guest-uid', 'Guest');
-    expect(getRole()).toBe('guest'); // NOT admin
-    expect(getUserId()).toBe('guest-uid');
-    expect(sessionStorage.getItem('eventsnap_jwt')).toBeNull(); // admin token cleared
-  });
+		setAuth(makeJwt({ role: 'guest' }), '1234', 'guest-uid', 'Guest');
+		expect(getRole()).toBe('guest'); // NOT admin
+		expect(getUserId()).toBe('guest-uid');
+		expect(sessionStorage.getItem('eventsnap_jwt')).toBeNull(); // admin token cleared
+	});

-  it('an admin login displaces a resident guest session but keeps the guest PIN', () => {
-    setAuth(makeJwt({ role: 'guest' }), '1234', 'guest-uid', 'Guest');
-    setAdminAuth(makeJwt({ role: 'admin' }), 'admin-uid', 'Admin');
-    expect(getRole()).toBe('admin');
-    expect(getUserId()).toBe('admin-uid');
-    expect(localStorage.getItem('eventsnap_jwt')).toBeNull(); // guest token cleared
-    expect(getPin()).toBe('1234'); // PIN preserved for later recovery
-  });
+	it('an admin login displaces a resident guest session but keeps the guest PIN', () => {
+		setAuth(makeJwt({ role: 'guest' }), '1234', 'guest-uid', 'Guest');
+		setAdminAuth(makeJwt({ role: 'admin' }), 'admin-uid', 'Admin');
+		expect(getRole()).toBe('admin');
+		expect(getUserId()).toBe('admin-uid');
+		expect(localStorage.getItem('eventsnap_jwt')).toBeNull(); // guest token cleared
+		expect(getPin()).toBe('1234'); // PIN preserved for later recovery
+	});

-  it('clearAuth wipes both stores', () => {
-    setAdminAuth(makeJwt({ role: 'admin' }), 'admin-uid', 'Admin');
-    clearAuth();
-    expect(getToken()).toBeNull();
-    expect(sessionStorage.getItem('eventsnap_jwt')).toBeNull();
-  });
+	it('clearAuth wipes both stores', () => {
+		setAdminAuth(makeJwt({ role: 'admin' }), 'admin-uid', 'Admin');
+		clearAuth();
+		expect(getToken()).toBeNull();
+		expect(sessionStorage.getItem('eventsnap_jwt')).toBeNull();
+	});
 });

 describe('auth — JWT claim decode', () => {
-  it('getExpiry decodes the exp claim (seconds → ms Date)', () => {
-    const exp = 2_000_000_000; // far-future unix seconds
-    setAuth(makeJwt({ exp }), null, 'u');
-    expect(getExpiry()?.getTime()).toBe(exp * 1000);
-  });
+	it('getExpiry decodes the exp claim (seconds → ms Date)', () => {
+		const exp = 2_000_000_000; // far-future unix seconds
+		setAuth(makeJwt({ exp }), null, 'u');
+		expect(getExpiry()?.getTime()).toBe(exp * 1000);
+	});

-  it('getExpiry is null with no token, no exp claim, or a malformed token', () => {
-    expect(getExpiry()).toBeNull(); // no token
-    setAuth(makeJwt({ role: 'guest' }), null, 'u'); // token without exp
-    expect(getExpiry()).toBeNull();
-    localStorage.setItem('eventsnap_jwt', 'not-a-jwt'); // unparseable
-    expect(getExpiry()).toBeNull();
-  });
+	it('getExpiry is null with no token, no exp claim, or a malformed token', () => {
+		expect(getExpiry()).toBeNull(); // no token
+		setAuth(makeJwt({ role: 'guest' }), null, 'u'); // token without exp
+		expect(getExpiry()).toBeNull();
+		localStorage.setItem('eventsnap_jwt', 'not-a-jwt'); // unparseable
+		expect(getExpiry()).toBeNull();
+	});

-  it('getRole extracts the role claim; null when absent or malformed', () => {
-    setAuth(makeJwt({ role: 'host' }), null, 'u');
-    expect(getRole()).toBe('host');
-    setAuth(makeJwt({ exp: 1 }), null, 'u'); // no role claim
-    expect(getRole()).toBeNull();
-    localStorage.setItem('eventsnap_jwt', 'x.y.z'); // unparseable payload
-    expect(getRole()).toBeNull();
-  });
+	it('getRole extracts the role claim; null when absent or malformed', () => {
+		setAuth(makeJwt({ role: 'host' }), null, 'u');
+		expect(getRole()).toBe('host');
+		setAuth(makeJwt({ exp: 1 }), null, 'u'); // no role claim
+		expect(getRole()).toBeNull();
+		localStorage.setItem('eventsnap_jwt', 'x.y.z'); // unparseable payload
+		expect(getRole()).toBeNull();
+	});
 });
--- a/frontend/src/lib/auth.ts
+++ b/frontend/src/lib/auth.ts
@@ -65,7 +65,12 @@ export function getExpiry(): Date | null {
 	}
 }

-export function setAuth(jwt: string, pin: string | null, userId: string, displayName?: string): void {
+export function setAuth(
+	jwt: string,
+	pin: string | null,
+	userId: string,
+	displayName?: string
+): void {
 	if (!browser) return;
 	// DISPLACE any resident admin session: reads are sessionStorage-first, so a leftover
 	// admin token there would otherwise shadow this guest login and hand the guest admin
@@ -130,7 +135,11 @@ export function clearAuth(): void {
 	// if you ever need ordering, introduce a priority field rather than relying
 	// on import-load timing, which is fragile across refactors.
 	for (const fn of clearAuthHooks) {
-		try { fn(); } catch { /* hook failure is non-fatal */ }
+		try {
+			fn();
+		} catch {
+			/* hook failure is non-fatal */
+		}
 	}
 }

--- a/frontend/src/lib/avatar.test.ts
+++ b/frontend/src/lib/avatar.test.ts
@@ -2,62 +2,79 @@ import { describe, it, expect } from 'vitest';
 import { avatarPalette, initials } from './avatar';

 describe('avatarPalette', () => {
-  it('returns the neutral palette for empty / nullish names', () => {
-    expect(avatarPalette(null)).toContain('bg-gray-100');
-    expect(avatarPalette(undefined)).toContain('bg-gray-100');
-    expect(avatarPalette('')).toContain('bg-gray-100');
-  });
+	it('returns the neutral palette for empty / nullish names', () => {
+		expect(avatarPalette(null)).toContain('bg-gray-100');
+		expect(avatarPalette(undefined)).toContain('bg-gray-100');
+		expect(avatarPalette('')).toContain('bg-gray-100');
+	});

-  it('is deterministic for the same name', () => {
-    // Same input, repeated calls AND a separately-constructed equal string — the palette
-    // must be a pure function of the name's characters, not of identity or call order.
-    expect(avatarPalette('Alice')).toBe(avatarPalette('Alice'));
-    expect(avatarPalette('Alice')).toBe(avatarPalette('Ali' + 'ce'));
-    expect(avatarPalette('Zoë Müller')).toBe(avatarPalette('Zoë Müller'));
-  });
+	it('is deterministic for the same name', () => {
+		// Same input, repeated calls AND a separately-constructed equal string — the palette
+		// must be a pure function of the name's characters, not of identity or call order.
+		expect(avatarPalette('Alice')).toBe(avatarPalette('Alice'));
+		expect(avatarPalette('Alice')).toBe(avatarPalette('Ali' + 'ce'));
+		expect(avatarPalette('Zoë Müller')).toBe(avatarPalette('Zoë Müller'));
+	});

-  it('returns a real palette entry (not neutral) for a non-empty name', () => {
-    expect(avatarPalette('Bob')).toMatch(/bg-(blue|purple|green|amber|rose|teal)-100/);
-  });
+	it('returns a real palette entry (not neutral) for a non-empty name', () => {
+		expect(avatarPalette('Bob')).toMatch(/bg-(blue|purple|green|amber|rose|teal)-100/);
+	});

-  it('maps different names to different palette entries', () => {
-    // Without this, `name => name ? PALETTE[0] : NEUTRAL` (i.e. the hash loop deleted)
-    // passes every other test in this file — the palette would be a constant and every
-    // avatar in the app would render the same colour.
-    expect(avatarPalette('Alice')).not.toBe(avatarPalette('Bob'));
-  });
+	it('maps different names to different palette entries', () => {
+		// Without this, `name => name ? PALETTE[0] : NEUTRAL` (i.e. the hash loop deleted)
+		// passes every other test in this file — the palette would be a constant and every
+		// avatar in the app would render the same colour.
+		expect(avatarPalette('Alice')).not.toBe(avatarPalette('Bob'));
+	});

-  it('spreads names across the whole palette, not just one bucket', () => {
-    const names = [
-      'Alice', 'Bob', 'Carol', 'Dave', 'Erin', 'Frank', 'Grace', 'Heidi',
-      'Ivan', 'Judy', 'Mallory', 'Niaj', 'Olivia', 'Peggy', 'Rupert', 'Sybil',
-      'Trent', 'Victor', 'Walter', 'Xena'
-    ];
-    const distinct = new Set(names.map((n) => avatarPalette(n)));
-    // 6 colours in the palette; 20 names must land on more than a couple of them. This
-    // catches a hash that collapses (e.g. always returns index 0, or ignores all but the
-    // first character in a way that clusters).
-    expect(distinct.size).toBeGreaterThanOrEqual(4);
-  });
+	it('spreads names across the whole palette, not just one bucket', () => {
+		const names = [
+			'Alice',
+			'Bob',
+			'Carol',
+			'Dave',
+			'Erin',
+			'Frank',
+			'Grace',
+			'Heidi',
+			'Ivan',
+			'Judy',
+			'Mallory',
+			'Niaj',
+			'Olivia',
+			'Peggy',
+			'Rupert',
+			'Sybil',
+			'Trent',
+			'Victor',
+			'Walter',
+			'Xena'
+		];
+		const distinct = new Set(names.map((n) => avatarPalette(n)));
+		// 6 colours in the palette; 20 names must land on more than a couple of them. This
+		// catches a hash that collapses (e.g. always returns index 0, or ignores all but the
+		// first character in a way that clusters).
+		expect(distinct.size).toBeGreaterThanOrEqual(4);
+	});
 });

 describe('initials', () => {
-  it('returns "?" for empty / nullish / whitespace-only names', () => {
-    expect(initials(null)).toBe('?');
-    expect(initials(undefined)).toBe('?');
-    expect(initials('')).toBe('?');
-    expect(initials('   ')).toBe('?');
-  });
+	it('returns "?" for empty / nullish / whitespace-only names', () => {
+		expect(initials(null)).toBe('?');
+		expect(initials(undefined)).toBe('?');
+		expect(initials('')).toBe('?');
+		expect(initials('   ')).toBe('?');
+	});

-  it('uses the first letter (uppercased) for a single word', () => {
-    expect(initials('alice')).toBe('A');
-  });
+	it('uses the first letter (uppercased) for a single word', () => {
+		expect(initials('alice')).toBe('A');
+	});

-  it('uses the first letters of the first two words', () => {
-    expect(initials('Alice Bob Carol')).toBe('AB');
-  });
+	it('uses the first letters of the first two words', () => {
+		expect(initials('Alice Bob Carol')).toBe('AB');
+	});

-  it('collapses runs of whitespace between words', () => {
-    expect(initials('  john   doe ')).toBe('JD');
-  });
+	it('collapses runs of whitespace between words', () => {
+		expect(initials('  john   doe ')).toBe('JD');
+	});
 });
--- a/frontend/src/lib/components/BottomNav.svelte
+++ b/frontend/src/lib/components/BottomNav.svelte
@@ -30,11 +30,17 @@
 		<a
 			href="/feed"
 			class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
-				{isActive('/feed') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+				{isActive('/feed')
+				? 'text-blue-600 dark:text-blue-400'
+				: 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
 			aria-label="Galerie"
 		>
 			<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-				<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+				/>
 			</svg>
 			<span>Galerie</span>
 		</a>
@@ -47,9 +53,23 @@
 				aria-label="Hochladen"
 			>
 				<!-- Camera + plus icon -->
-				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
-					<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
+				<svg
+					class="h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+					/>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+					/>
 				</svg>
 				<!-- Badge -->
 				{#if $uploadBadgeCount > 0}
@@ -68,15 +88,28 @@
 				href="/export"
 				data-testid="bottom-nav-export"
 				class="relative flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
-					{isActive('/export') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+					{isActive('/export')
+					? 'text-blue-600 dark:text-blue-400'
+					: 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
 				aria-label="Export"
 			>
-				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+				<svg
+					class="h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+					/>
 				</svg>
 				<span>Export</span>
 				{#if zipReady}
-					<span class="absolute right-2 top-0 h-2 w-2 rounded-full bg-blue-500" aria-hidden="true"></span>
+					<span class="absolute right-2 top-0 h-2 w-2 rounded-full bg-blue-500" aria-hidden="true"
+					></span>
 				{/if}
 			</a>
 		{/if}
@@ -85,11 +118,17 @@
 		<a
 			href="/account"
 			class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
-				{isActive('/account') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+				{isActive('/account')
+				? 'text-blue-600 dark:text-blue-400'
+				: 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
 			aria-label="Konto"
 		>
 			<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+				/>
 			</svg>
 			<span>Konto</span>
 		</a>
--- a/frontend/src/lib/components/CameraCapture.svelte
+++ b/frontend/src/lib/components/CameraCapture.svelte
@@ -57,7 +57,8 @@
 			}
 		} catch (err) {
 			if (err instanceof DOMException && err.name === 'NotAllowedError') {
-				error = 'Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff in den Browsereinstellungen.';
+				error =
+					'Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff in den Browsereinstellungen.';
 			} else if (err instanceof DOMException && err.name === 'NotFoundError') {
 				error = 'Keine Kamera gefunden.';
 			} else {
@@ -162,8 +163,18 @@
 		{#if error}
 			<div class="flex h-full items-center justify-center p-8">
 				<div class="rounded-lg bg-gray-900 p-6 text-center">
-					<svg class="mx-auto mb-3 h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z" />
+					<svg
+						class="mx-auto mb-3 h-12 w-12 text-red-400"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="1.5"
+							d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
 					</svg>
 					<p class="text-sm text-white">{error}</p>
 					<div class="mt-4 flex justify-center gap-2">
@@ -173,10 +184,7 @@
 						>
 							Erneut versuchen
 						</button>
-						<button
-							onclick={onclose}
-							class="rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
-						>
+						<button onclick={onclose} class="rounded-lg bg-white/20 px-4 py-2 text-sm text-white">
 							Schließen
 						</button>
 					</div>
@@ -193,7 +201,9 @@
 			></video>

 			{#if recording}
-				<div class="absolute left-4 top-4 flex items-center gap-2 rounded-full bg-red-600 px-3 py-1">
+				<div
+					class="absolute left-4 top-4 flex items-center gap-2 rounded-full bg-red-600 px-3 py-1"
+				>
 					<div class="h-2 w-2 animate-pulse rounded-full bg-white"></div>
 					<span class="text-sm font-medium text-white">{formatRecordingTime(recordingTime)}</span>
 				</div>
@@ -218,7 +228,9 @@
 						aria-selected={mode === 'photo'}
 						onclick={() => setMode('photo')}
 						data-testid="camera-mode-photo"
-						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
+						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo'
+							? 'bg-white text-gray-900'
+							: 'text-white/70 hover:text-white active:text-white'}"
 					>
 						Foto
 					</button>
@@ -228,7 +240,9 @@
 						aria-selected={mode === 'video'}
 						onclick={() => setMode('video')}
 						data-testid="camera-mode-video"
-						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
+						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video'
+							? 'bg-white text-gray-900'
+							: 'text-white/70 hover:text-white active:text-white'}"
 					>
 						Video
 					</button>
@@ -236,7 +250,10 @@
 			</div>
 		{/if}

-		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6" style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)">
+		<div
+			class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6"
+			style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
+		>
 			<!-- Close -->
 			<button
 				onclick={onclose}
@@ -244,7 +261,12 @@
 				aria-label="Schließen"
 			>
 				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
 				</svg>
 			</button>

@@ -252,8 +274,14 @@
 			<button
 				onclick={handleShutter}
 				data-testid="camera-shutter"
-				class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording ? 'bg-red-600' : 'bg-white/20'}"
-				aria-label={mode === 'photo' ? 'Foto aufnehmen' : recording ? 'Aufnahme stoppen' : 'Video aufnehmen'}
+				class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording
+					? 'bg-red-600'
+					: 'bg-white/20'}"
+				aria-label={mode === 'photo'
+					? 'Foto aufnehmen'
+					: recording
+						? 'Aufnahme stoppen'
+						: 'Video aufnehmen'}
 			>
 				{#if mode === 'photo'}
 					<div class="h-12 w-12 rounded-full bg-white"></div>
@@ -274,7 +302,12 @@
 					aria-label="Kamera wechseln"
 				>
 					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+						/>
 					</svg>
 				</button>
 			{/if}
--- a/frontend/src/lib/components/ConfirmSheet.svelte
+++ b/frontend/src/lib/components/ConfirmSheet.svelte
@@ -80,12 +80,16 @@
 			onclick={handleConfirm}
 			disabled={busy}
 			data-testid="confirm-sheet-confirm"
-			class="mb-3 flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
+			class="mb-3 flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone ===
+			'danger'
 				? 'bg-red-600 hover:bg-red-700 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400'
 				: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400'}"
 		>
 			{#if busy}
-				<span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" aria-hidden="true"></span>
+				<span
+					class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white"
+					aria-hidden="true"
+				></span>
 			{/if}
 			{confirmLabel}
 		</button>
--- a/frontend/src/lib/components/ContextSheet.svelte
+++ b/frontend/src/lib/components/ContextSheet.svelte
@@ -63,7 +63,11 @@
 			window.addEventListener('keydown', onKeyDown);
 			return () => window.removeEventListener('keydown', onKeyDown);
 		} else if (returnFocus) {
-			try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
+			try {
+				returnFocus.focus({ preventScroll: true });
+			} catch {
+				/* element gone */
+			}
 			returnFocus = null;
 		}
 	});
@@ -115,7 +119,9 @@
 	</div>

 	{#if title}
-		<p class="px-5 pt-1 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+		<p
+			class="px-5 pt-1 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+		>
 			{title}
 		</p>
 	{/if}
--- a/frontend/src/lib/components/FeedListCard.svelte
+++ b/frontend/src/lib/components/FeedListCard.svelte
@@ -18,14 +18,7 @@
 		oncontextmenu?: (upload: FeedUpload) => void;
 	}

-	let {
-		upload,
-		isOwn = false,
-		onlike,
-		oncomment,
-		onselect,
-		oncontextmenu
-	}: Props = $props();
+	let { upload, isOwn = false, onlike, oncomment, onselect, oncontextmenu }: Props = $props();

 	function isVideo(mime: string): boolean {
 		return mime.startsWith('video/');
@@ -88,7 +81,9 @@
 				{initials(upload.uploader_name)}
 			</div>
 			<div class="min-w-0">
-				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
+				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
+					{upload.uploader_name}
+				</p>
 				<p class="text-xs text-gray-400 dark:text-gray-500">{relTime}</p>
 			</div>
 		</div>
@@ -97,11 +92,20 @@
 			<!-- Desktop kebab — same actions as the mobile long-press context sheet. -->
 			<button
 				type="button"
-				onclick={(e) => { e.stopPropagation(); openContext(); }}
+				onclick={(e) => {
+					e.stopPropagation();
+					openContext();
+				}}
 				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:hover:text-gray-200"
 				aria-label="Mehr Aktionen"
 			>
-				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
+				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"
+					><circle cx="5" cy="12" r="2" /><circle cx="12" cy="12" r="2" /><circle
+						cx="19"
+						cy="12"
+						r="2"
+					/></svg
+				>
 			</button>
 		{/if}
 	</div>
@@ -112,7 +116,9 @@
 		use:doubletap
 		onsingletap={() => onselect(upload)}
 		ondoubletap={handleDoubleTap}
-		onclick={(e) => { if (e.detail === 0) onselect(upload); }}
+		onclick={(e) => {
+			if (e.detail === 0) onselect(upload);
+		}}
 		aria-label="Bild vergrößern"
 	>
 		<HeartBurst active={heartBurst} />
@@ -128,7 +134,9 @@
 					/>
 				{/if}
 				<div class="absolute inset-0 flex items-center justify-center">
-					<span class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white">
+					<span
+						class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white"
+					>
 						<svg class="h-7 w-7 pl-0.5" fill="currentColor" viewBox="0 0 24 24">
 							<path d="M8 5v14l11-7z" />
 						</svg>
@@ -149,9 +157,21 @@
 				/>
 			</div>
 		{:else}
-			<div class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800">
-				<svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+			<div
+				class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800"
+			>
+				<svg
+					class="h-12 w-12 text-gray-300 dark:text-gray-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+					/>
 				</svg>
 			</div>
 		{/if}
@@ -160,11 +180,16 @@
 	<!-- Actions row -->
 	<div class="flex items-center gap-4 px-4 py-2">
 		<button
-			onclick={() => { vibrate(10); onlike(upload.id); }}
+			onclick={() => {
+				vibrate(10);
+				onlike(upload.id);
+			}}
 			aria-pressed={upload.liked_by_me}
 			aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
 			class="flex items-center gap-1.5 text-sm font-medium transition-colors
-				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
+				{upload.liked_by_me
+				? 'text-red-500 dark:text-red-400'
+				: 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
 		>
 			<svg
 				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
@@ -173,7 +198,11 @@
 				stroke="currentColor"
 				stroke-width="2"
 			>
-				<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+				/>
 			</svg>
 			{upload.like_count}
 		</button>
@@ -182,7 +211,11 @@
 			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 active:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 dark:active:text-blue-400"
 		>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+				/>
 			</svg>
 			{upload.comment_count}
 		</button>
--- a/frontend/src/lib/components/HashtagChips.svelte
+++ b/frontend/src/lib/components/HashtagChips.svelte
@@ -18,11 +18,10 @@
 		<button
 			onclick={() => onselect(null)}
 			aria-pressed={selected === null}
-			class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
-				selected === null
-					? 'bg-blue-600 text-white dark:bg-blue-500'
-					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
-			}"
+			class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {selected ===
+			null
+				? 'bg-blue-600 text-white dark:bg-blue-500'
+				: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'}"
 		>
 			Alle
 		</button>
@@ -30,11 +29,10 @@
 			<button
 				onclick={() => onselect(h.tag)}
 				aria-pressed={selected === h.tag}
-				class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
-					selected === h.tag
-						? 'bg-blue-600 text-white dark:bg-blue-500'
-						: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
-				}"
+				class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {selected ===
+				h.tag
+					? 'bg-blue-600 text-white dark:bg-blue-500'
+					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'}"
 			>
 				#{h.tag}
 				<span class="ml-1 text-xs opacity-70">{h.count}</span>
--- a/frontend/src/lib/components/HeartBurst.svelte
+++ b/frontend/src/lib/components/HeartBurst.svelte
@@ -5,15 +5,6 @@
 	let { active }: Props = $props();
 </script>

-<style>
-	@keyframes heart-burst {
-		0% { transform: scale(0.5); opacity: 0; }
-		30% { transform: scale(1.2); opacity: 1; }
-		70% { transform: scale(1); opacity: 1; }
-		100% { transform: scale(1.4); opacity: 0; }
-	}
-</style>
-
 {#if active}
 	<span
 		class="pointer-events-none absolute inset-0 flex items-center justify-center"
@@ -26,7 +17,30 @@
 			fill="currentColor"
 			viewBox="0 0 24 24"
 		>
-			<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
+			<path
+				d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z"
+			/>
 		</svg>
 	</span>
 {/if}
+
+<style>
+	@keyframes heart-burst {
+		0% {
+			transform: scale(0.5);
+			opacity: 0;
+		}
+		30% {
+			transform: scale(1.2);
+			opacity: 1;
+		}
+		70% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		100% {
+			transform: scale(1.4);
+			opacity: 0;
+		}
+	}
+</style>
--- a/frontend/src/lib/components/LightboxModal.svelte
+++ b/frontend/src/lib/components/LightboxModal.svelte
@@ -55,7 +55,9 @@
 		try {
 			const { comment_id } = JSON.parse(data) as { comment_id: string };
 			comments = comments.filter((c) => c.id !== comment_id);
-		} catch { /* ignore */ }
+		} catch {
+			/* ignore */
+		}
 	});

 	// Pull in a comment posted from another device on the CURRENTLY-open upload, so the
@@ -66,7 +68,9 @@
 		try {
 			const { upload_id } = JSON.parse(data) as { upload_id: string };
 			if (upload_id === upload.id) void loadComments(upload.id);
-		} catch { /* ignore */ }
+		} catch {
+			/* ignore */
+		}
 	});

 	onDestroy(() => {
@@ -124,7 +128,10 @@

 	function formatTime(iso: string): string {
 		return new Date(iso).toLocaleString('de-DE', {
-			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
+			day: '2-digit',
+			month: '2-digit',
+			hour: '2-digit',
+			minute: '2-digit'
 		});
 	}
 </script>
@@ -138,7 +145,9 @@
 	use:scrollLock
 	use:modalInert
 >
-	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
+	<div
+		class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900"
+	>
 		<!-- Media -->
 		<div class="relative bg-black">
 			<button
@@ -147,14 +156,15 @@
 				class="absolute right-2 top-2 z-10 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
 			>
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
 				</svg>
 			</button>
-			<div
-				class="relative"
-				use:doubletap
-				ondoubletap={triggerHeartBurst}
-			>
+			<div class="relative" use:doubletap ondoubletap={triggerHeartBurst}>
 				{#if isVideo(upload.mime_type)}
 					<video
 						src={mediaSrc}
@@ -180,19 +190,31 @@
 			<div class="border-b border-gray-100 p-3 dark:border-gray-800">
 				<div class="flex items-center justify-between">
 					<div>
-						<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
-						<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">{formatTime(upload.created_at)}</span>
+						<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100"
+							>{upload.uploader_name}</span
+						>
+						<span class="ml-2 text-xs text-gray-400 dark:text-gray-500"
+							>{formatTime(upload.created_at)}</span
+						>
 					</div>
 					<button
 						onclick={() => onlike(upload.id)}
-						class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {
-							upload.liked_by_me
-								? 'bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-300'
-								: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
-						}"
+						class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {upload.liked_by_me
+							? 'bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-300'
+							: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}"
 					>
-						<svg class="h-4 w-4 {upload.liked_by_me ? 'fill-current' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+						<svg
+							class="h-4 w-4 {upload.liked_by_me ? 'fill-current' : ''}"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+							/>
 						</svg>
 						{upload.like_count}
 					</button>
@@ -211,9 +233,13 @@
 						{#each comments as comment (comment.id)}
 							<div class="flex items-start gap-2">
 								<div class="flex-1">
-									<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{comment.uploader_name}</span>
+									<span class="text-sm font-medium text-gray-900 dark:text-gray-100"
+										>{comment.uploader_name}</span
+									>
 									<span class="ml-1 text-sm text-gray-700 dark:text-gray-300">{comment.body}</span>
-									<div class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">{formatTime(comment.created_at)}</div>
+									<div class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
+										{formatTime(comment.created_at)}
+									</div>
 								</div>
 								{#if comment.user_id === userId}
 									<button
@@ -222,7 +248,12 @@
 										aria-label="Löschen"
 									>
 										<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/>
 										</svg>
 									</button>
 								{/if}
@@ -234,7 +265,10 @@

 			<!-- Comment input -->
 			<form
-				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
+				onsubmit={(e) => {
+					e.preventDefault();
+					submitComment();
+				}}
 				class="border-t border-gray-100 p-3 dark:border-gray-800"
 			>
 				<div class="flex gap-2">
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -19,14 +19,7 @@
 		children: Snippet;
 	}

-	let {
-		open,
-		titleId,
-		ariaLabel,
-		onClose,
-		closeOnBackdrop = true,
-		children
-	}: Props = $props();
+	let { open, titleId, ariaLabel, onClose, closeOnBackdrop = true, children }: Props = $props();

 	$effect(() => {
 		if (open && !titleId && !ariaLabel && typeof console !== 'undefined') {
@@ -56,7 +49,9 @@
 			use:focusTrap={{ onclose: onClose }}
 			use:scrollLock
 		>
-			<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			<div
+				class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"
+			>
 				{@render children()}
 			</div>
 		</div>
--- a/frontend/src/lib/components/OnboardingGuide.svelte
+++ b/frontend/src/lib/components/OnboardingGuide.svelte
@@ -63,10 +63,15 @@
 	// 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 }> = [
+	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: '🌙' }
+		{ value: 'light', label: 'Hell', hint: 'Heller Hintergrund', icon: '☀️' },
+		{ value: 'dark', label: 'Dunkel', hint: 'Dunkler Hintergrund', icon: '🌙' }
 	];

 	if (browser && !localStorage.getItem(GUIDE_SEEN_KEY)) {
@@ -106,7 +111,7 @@
 			<!-- Step indicator — tap a pip to jump back. The visible dot is small but
 			     the touch target is padded to ~44 px so it remains tappable on mobile. -->
 			<div class="mb-3 flex justify-center">
-				{#each steps as _, i}
+				{#each steps as _, i (i)}
 					<button
 						type="button"
 						onclick={() => goToStep(i)}
@@ -148,8 +153,8 @@
 								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'}"
+									? '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">
@@ -159,11 +164,17 @@
 								<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'}"
+										? '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">
+										<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}
@@ -186,7 +197,7 @@
 					onclick={next}
 					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 				>
-					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
+					{step < steps.length - 1 ? 'Weiter' : "Los geht's!"}
 				</button>
 			</div>
 		</div>
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@@ -27,7 +27,9 @@
 		<button
 			type="button"
 			onclick={() => dismissToast(t.id)}
-			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
+			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(
+				t.tone
+			)}"
 			role={t.tone === 'error' || t.tone === 'warning' ? 'alert' : 'status'}
 			aria-live={t.tone === 'error' || t.tone === 'warning' ? 'assertive' : 'polite'}
 			data-testid="toast"
--- a/frontend/src/lib/components/UploadQueue.svelte
+++ b/frontend/src/lib/components/UploadQueue.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { queueItems, isProcessing, retryItem, removeItem, clearCompleted, rateLimitRetryAt } from '$lib/upload-queue';
+	import {
+		queueItems,
+		isProcessing,
+		retryItem,
+		removeItem,
+		clearCompleted,
+		rateLimitRetryAt
+	} from '$lib/upload-queue';
 	import type { QueueItem } from '$lib/upload-queue';

 	function formatSize(bytes: number): string {
@@ -10,21 +17,31 @@

 	function statusLabel(status: QueueItem['status']): string {
 		switch (status) {
-			case 'pending': return 'Wartend';
-			case 'uploading': return 'Wird hochgeladen';
-			case 'done': return 'Fertig';
-			case 'error': return 'Fehler';
-			case 'blocked': return 'Gesperrt';
+			case 'pending':
+				return 'Wartend';
+			case 'uploading':
+				return 'Wird hochgeladen';
+			case 'done':
+				return 'Fertig';
+			case 'error':
+				return 'Fehler';
+			case 'blocked':
+				return 'Gesperrt';
 		}
 	}

 	function statusColor(status: QueueItem['status']): string {
 		switch (status) {
-			case 'pending': return 'text-gray-500 dark:text-gray-400';
-			case 'uploading': return 'text-blue-600 dark:text-blue-400';
-			case 'done': return 'text-green-600 dark:text-green-400';
-			case 'error': return 'text-red-600 dark:text-red-400';
-			case 'blocked': return 'text-red-600 dark:text-red-400';
+			case 'pending':
+				return 'text-gray-500 dark:text-gray-400';
+			case 'uploading':
+				return 'text-blue-600 dark:text-blue-400';
+			case 'done':
+				return 'text-green-600 dark:text-green-400';
+			case 'error':
+				return 'text-red-600 dark:text-red-400';
+			case 'blocked':
+				return 'text-red-600 dark:text-red-400';
 		}
 	}

@@ -52,8 +69,12 @@
 </script>

 {#if items.length > 0}
-	<div class="mt-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
-		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
+	<div
+		class="mt-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
+	>
+		<div
+			class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800"
+		>
 			<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
 				Upload-Warteschlange
 				{#if $isProcessing}
@@ -71,7 +92,9 @@
 		</div>

 		{#if $rateLimitRetryAt && countdown > 0}
-			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
+			<div
+				class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300"
+			>
 				Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
 			</div>
 		{/if}
@@ -81,7 +104,9 @@
 				<li class="px-4 py-3">
 					<div class="flex items-center justify-between">
 						<div class="min-w-0 flex-1">
-							<p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{item.fileName}</p>
+							<p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">
+								{item.fileName}
+							</p>
 							<p class="text-xs text-gray-500 dark:text-gray-400">{formatSize(item.fileSize)}</p>
 						</div>
 						<div class="ml-3 flex items-center gap-2">
@@ -103,7 +128,12 @@
 									aria-label="Entfernen"
 								>
 									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M6 18L18 6M6 6l12 12"
+										/>
 									</svg>
 								</button>
 							{/if}
@@ -111,7 +141,9 @@
 					</div>

 					{#if item.status === 'uploading'}
-						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+						<div
+							class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+						>
 							<div
 								class="h-full rounded-full bg-blue-500 transition-all duration-300"
 								style="width: {item.progress}%"
--- a/frontend/src/lib/components/UploadSheet.svelte
+++ b/frontend/src/lib/components/UploadSheet.svelte
@@ -59,7 +59,11 @@
 			window.addEventListener('keydown', onKeyDown);
 			return () => window.removeEventListener('keydown', onKeyDown);
 		} else if (returnFocus) {
-			try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
+			try {
+				returnFocus.focus({ preventScroll: true });
+			} catch {
+				/* element gone */
+			}
 			returnFocus = null;
 		}
 	});
@@ -170,46 +174,74 @@
 				Schließen
 			</button>
 		{:else}
-		<!-- Gallery option -->
-		<button
-			onclick={openGallery}
-			class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600"
-		>
-			<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300">
-				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
-				</svg>
-			</span>
-			<div>
-				<p class="font-semibold text-gray-900 dark:text-gray-100">Galerie</p>
-				<p class="text-sm text-gray-500 dark:text-gray-400">Foto oder Video wählen</p>
-			</div>
-		</button>
+			<!-- Gallery option -->
+			<button
+				onclick={openGallery}
+				class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600"
+			>
+				<span
+					class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300"
+				>
+					<svg
+						class="h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+						/>
+					</svg>
+				</span>
+				<div>
+					<p class="font-semibold text-gray-900 dark:text-gray-100">Galerie</p>
+					<p class="text-sm text-gray-500 dark:text-gray-400">Foto oder Video wählen</p>
+				</div>
+			</button>

-		<!-- Camera option -->
-		<button
-			onclick={openCamera}
-			class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600"
-		>
-			<span class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300">
-				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
-					<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
-				</svg>
-			</span>
-			<div>
-				<p class="font-semibold text-gray-900 dark:text-gray-100">Kamera</p>
-				<p class="text-sm text-gray-500 dark:text-gray-400">Jetzt aufnehmen</p>
-			</div>
-		</button>
+			<!-- Camera option -->
+			<button
+				onclick={openCamera}
+				class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600"
+			>
+				<span
+					class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300"
+				>
+					<svg
+						class="h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+						/>
+					</svg>
+				</span>
+				<div>
+					<p class="font-semibold text-gray-900 dark:text-gray-100">Kamera</p>
+					<p class="text-sm text-gray-500 dark:text-gray-400">Jetzt aufnehmen</p>
+				</div>
+			</button>

-		<!-- Cancel -->
-		<button
-			onclick={close}
-			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-600 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
-		>
-			Abbrechen
-		</button>
+			<!-- Cancel -->
+			<button
+				onclick={close}
+				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-600 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+			>
+				Abbrechen
+			</button>
 		{/if}
 	</div>
 </div>
--- a/frontend/src/lib/components/VirtualFeed.svelte
+++ b/frontend/src/lib/components/VirtualFeed.svelte
@@ -35,8 +35,7 @@
 		oncontextmenu?: (upload: FeedUpload) => void;
 	}

-	let { uploads, mode, myUserId, onlike, oncomment, onselect, oncontextmenu }: Props =
-		$props();
+	let { uploads, mode, myUserId, onlike, oncomment, onselect, oncontextmenu }: Props = $props();

 	const COLS = 3;
 	const GRID_GAP = 2; // px — matches the `gap-0.5` the non-virtual grid used.
@@ -218,7 +217,11 @@
 													/>
 												{/if}
 												<div class="absolute inset-0 flex items-center justify-center">
-													<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
+													<svg
+														class="h-10 w-10 text-white/80"
+														fill="currentColor"
+														viewBox="0 0 24 24"
+													>
 														<path d="M8 5v14l11-7z" />
 													</svg>
 												</div>
--- a/frontend/src/lib/data-mode-store.test.ts
+++ b/frontend/src/lib/data-mode-store.test.ts
@@ -2,29 +2,29 @@ import { describe, it, expect } from 'vitest';
 import { pickMediaUrl } from './data-mode-store';

 const upload = {
-  id: 'abc-123',
-  preview_url: '/api/v1/upload/abc-123/preview',
-  thumbnail_url: '/api/v1/upload/abc-123/thumbnail',
+	id: 'abc-123',
+	preview_url: '/api/v1/upload/abc-123/preview',
+	thumbnail_url: '/api/v1/upload/abc-123/thumbnail'
 };

 describe('pickMediaUrl', () => {
-  it('original mode → the original API route, ignoring preview/thumbnail', () => {
-    expect(pickMediaUrl('original', upload)).toBe('/api/v1/upload/abc-123/original');
-  });
+	it('original mode → the original API route, ignoring preview/thumbnail', () => {
+		expect(pickMediaUrl('original', upload)).toBe('/api/v1/upload/abc-123/original');
+	});

-  it('saver mode → preview_url when present', () => {
-    expect(pickMediaUrl('saver', upload)).toBe('/api/v1/upload/abc-123/preview');
-  });
+	it('saver mode → preview_url when present', () => {
+		expect(pickMediaUrl('saver', upload)).toBe('/api/v1/upload/abc-123/preview');
+	});

-  it('saver mode → thumbnail_url when preview is null', () => {
-    expect(pickMediaUrl('saver', { ...upload, preview_url: null })).toBe(
-      '/api/v1/upload/abc-123/thumbnail'
-    );
-  });
+	it('saver mode → thumbnail_url when preview is null', () => {
+		expect(pickMediaUrl('saver', { ...upload, preview_url: null })).toBe(
+			'/api/v1/upload/abc-123/thumbnail'
+		);
+	});

-  it('saver mode → original route when both preview and thumbnail are null', () => {
-    expect(pickMediaUrl('saver', { id: 'x', preview_url: null, thumbnail_url: null })).toBe(
-      '/api/v1/upload/x/original'
-    );
-  });
+	it('saver mode → original route when both preview and thumbnail are null', () => {
+		expect(pickMediaUrl('saver', { id: 'x', preview_url: null, thumbnail_url: null })).toBe(
+			'/api/v1/upload/x/original'
+		);
+	});
 });
--- a/frontend/src/lib/diashow/queue.ts
+++ b/frontend/src/lib/diashow/queue.ts
@@ -46,9 +46,7 @@ export class SlideQueue {
 		// 2. Refill shuffle queue from `allKnown` minus recently shown.
 		if (this.shuffleQueue.length === 0) {
 			this.shuffleQueue = shuffle(
-				Array.from(this.allKnown.values()).filter(
-					(s) => !this.recentlyShown.includes(s.id)
-				)
+				Array.from(this.allKnown.values()).filter((s) => !this.recentlyShown.includes(s.id))
 			);
 			// If everything is recently shown (small event), fall back to the full pool.
 			if (this.shuffleQueue.length === 0) {
--- a/frontend/src/lib/diashow/transitions/crossfade.svelte
+++ b/frontend/src/lib/diashow/transitions/crossfade.svelte
@@ -20,14 +20,7 @@
 >
 	{#if isVideo}
 		<!-- svelte-ignore a11y_media_has_caption -->
-		<video
-			{src}
-			autoplay
-			muted
-			playsinline
-			{onended}
-			class="h-full w-full object-contain"
-		></video>
+		<video {src} autoplay muted playsinline {onended} class="h-full w-full object-contain"></video>
 	{:else}
 		<img {src} alt="" class="h-full w-full object-contain" />
 	{/if}
@@ -35,7 +28,11 @@

 <style>
 	@keyframes crossfade-in {
-		from { opacity: 0; }
-		to   { opacity: 1; }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 </style>
--- a/frontend/src/lib/diashow/transitions/kenburns.svelte
+++ b/frontend/src/lib/diashow/transitions/kenburns.svelte
@@ -24,14 +24,7 @@
 >
 	{#if isVideo}
 		<!-- svelte-ignore a11y_media_has_caption -->
-		<video
-			{src}
-			autoplay
-			muted
-			playsinline
-			{onended}
-			class="h-full w-full object-contain"
-		></video>
+		<video {src} autoplay muted playsinline {onended} class="h-full w-full object-contain"></video>
 	{:else}
 		<img
 			{src}
@@ -44,11 +37,19 @@

 <style>
 	@keyframes kb-fade {
-		from { opacity: 0; }
-		to   { opacity: 1; }
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 	@keyframes kb-zoom {
-		from { transform: scale(1.0); }
-		to   { transform: scale(1.1); }
+		from {
+			transform: scale(1);
+		}
+		to {
+			transform: scale(1.1);
+		}
 	}
 </style>
--- a/frontend/src/lib/diashow/wakelock.ts
+++ b/frontend/src/lib/diashow/wakelock.ts
@@ -13,7 +13,9 @@ let sentinel: SentinelLike | null = null;
 let visibilityHandler: (() => void) | null = null;

 export async function acquireWakeLock(): Promise<void> {
-	const wakeLock = (navigator as Navigator & { wakeLock?: { request: (t: string) => Promise<SentinelLike> } }).wakeLock;
+	const wakeLock = (
+		navigator as Navigator & { wakeLock?: { request: (t: string) => Promise<SentinelLike> } }
+	).wakeLock;
 	if (!wakeLock) return;
 	try {
 		sentinel = await wakeLock.request('screen');
--- a/frontend/src/lib/export-status-store.ts
+++ b/frontend/src/lib/export-status-store.ts
@@ -41,14 +41,26 @@ export function initExportStatus(): void {
 	if (hydrated) return;
 	hydrated = true;
 	void refreshExportStatus();
-	sseUnsubs.push(onSseEvent('export-progress', () => { void refreshExportStatus(); }));
-	sseUnsubs.push(onSseEvent('export-available', () => { void refreshExportStatus(); }));
+	sseUnsubs.push(
+		onSseEvent('export-progress', () => {
+			void refreshExportStatus();
+		})
+	);
+	sseUnsubs.push(
+		onSseEvent('export-available', () => {
+			void refreshExportStatus();
+		})
+	);
 	// A reopen INVALIDATES the released keepsake server-side (it clears `export_released_at` and
 	// both ready flags). Without refreshing here, the nav would keep advertising a download that
 	// now 404s — the host reopens to collect more photos and every guest still sees "keepsake
 	// ready" until a manual reload. `event-opened` is the only signal for this: a superseded
 	// worker deliberately emits no `export-progress`.
-	sseUnsubs.push(onSseEvent('event-opened', () => { void refreshExportStatus(); }));
+	sseUnsubs.push(
+		onSseEvent('event-opened', () => {
+			void refreshExportStatus();
+		})
+	);
 }

 export function teardownExportStatus(): void {
--- a/frontend/src/lib/feed-filter.test.ts
+++ b/frontend/src/lib/feed-filter.test.ts
@@ -10,7 +10,7 @@ const uploads = [
 	u('2', 'Bob', 'party #party'),
 	u('3', 'Alice', 'more #wedding #party'),
 	u('4', 'Carol', 'no tags here'),
-	u('5', 'Bob', null), // no caption
+	u('5', 'Bob', null) // no caption
 ];

 const ids = (r: any[]) => r.map((x) => x.id);
--- a/frontend/src/lib/haptics.ts
+++ b/frontend/src/lib/haptics.ts
@@ -3,5 +3,9 @@
 export function vibrate(pattern: number | number[]): void {
 	if (typeof navigator === 'undefined') return;
 	if (typeof navigator.vibrate !== 'function') return;
-	try { navigator.vibrate(pattern); } catch { /* permission denied / not supported */ }
+	try {
+		navigator.vibrate(pattern);
+	} catch {
+		/* permission denied / not supported */
+	}
 }
--- a/frontend/src/lib/sse.ts
+++ b/frontend/src/lib/sse.ts
@@ -113,9 +113,7 @@ export function connectSse(): void {
 		};

 		for (const eventName of KNOWN_EVENTS) {
-			eventSource.addEventListener(eventName, (e) =>
-				dispatch(eventName, (e as MessageEvent).data)
-			);
+			eventSource.addEventListener(eventName, (e) => dispatch(eventName, (e as MessageEvent).data));
 		}

 		// `resync` is emitted by the server when our broadcast subscription fell
@@ -201,9 +199,7 @@ function extractCreatedAt(data: string): string | undefined {
 */
 async function deltaFetchAndFan(since: string, attempt = 0): Promise<void> {
 	try {
-		const response = await api.get<DeltaResponse>(
-			`/feed/delta?since=${encodeURIComponent(since)}`
-		);
+		const response = await api.get<DeltaResponse>(`/feed/delta?since=${encodeURIComponent(since)}`);
 		// Advance the cursor to the server clock this delta was computed at, so the next
 		// reconnect resumes exactly where the server left off (no browser-clock skew).
 		lastEventTime = response.server_time;
--- a/frontend/src/lib/toast-store.ts
+++ b/frontend/src/lib/toast-store.ts
@@ -20,14 +20,20 @@ export function toast(message: string, tone: ToastTone = 'info', ttl = 4000): nu
 	const entry: Toast = { id, message, tone, ttl };
 	toasts.update((list) => [...list, entry]);
 	if (ttl > 0 && typeof window !== 'undefined') {
-		timers.set(id, setTimeout(() => dismissToast(id), ttl));
+		timers.set(
+			id,
+			setTimeout(() => dismissToast(id), ttl)
+		);
 	}
 	return id;
 }

 export function dismissToast(id: number): void {
 	const t = timers.get(id);
-	if (t) { clearTimeout(t); timers.delete(id); }
+	if (t) {
+		clearTimeout(t);
+		timers.delete(id);
+	}
 	toasts.update((list) => list.filter((x) => x.id !== id));
 }

--- a/frontend/src/lib/ui-store.ts
+++ b/frontend/src/lib/ui-store.ts
@@ -8,6 +8,7 @@ export const showBottomNav = writable(true);
 export const uploadSheetOpen = writable(false);

 // Count of items currently pending or uploading — shown as FAB badge.
-export const uploadBadgeCount = derived(queueItems, ($items) =>
-	$items.filter((i) => i.status === 'pending' || i.status === 'uploading').length
+export const uploadBadgeCount = derived(
+	queueItems,
+	($items) => $items.filter((i) => i.status === 'pending' || i.status === 'uploading').length
 );
--- a/frontend/src/lib/upload-queue.test.ts
+++ b/frontend/src/lib/upload-queue.test.ts
@@ -9,36 +9,36 @@ import { classifyUploadStatus, isReversibleLock, entryToQueueItem } from './uplo
 * fired against a dead session. 401 must be `auth` (blob kept, re-auth), NEVER `terminal`.
 */
 describe('classifyUploadStatus', () => {
-  it('2xx → success', () => {
-    expect(classifyUploadStatus(200)).toBe('success');
-    expect(classifyUploadStatus(201)).toBe('success');
-    expect(classifyUploadStatus(299)).toBe('success');
-  });
+	it('2xx → success', () => {
+		expect(classifyUploadStatus(200)).toBe('success');
+		expect(classifyUploadStatus(201)).toBe('success');
+		expect(classifyUploadStatus(299)).toBe('success');
+	});

-  it('401 → auth, NOT terminal (never purge the blob on a dead session)', () => {
-    expect(classifyUploadStatus(401)).toBe('auth');
-  });
+	it('401 → auth, NOT terminal (never purge the blob on a dead session)', () => {
+		expect(classifyUploadStatus(401)).toBe('auth');
+	});

-  it('429 → rate_limit (back off, auto-resume)', () => {
-    expect(classifyUploadStatus(429)).toBe('rate_limit');
-  });
+	it('429 → rate_limit (back off, auto-resume)', () => {
+		expect(classifyUploadStatus(429)).toBe('rate_limit');
+	});

-  it('408 → transient (request timeout is retryable, not terminal)', () => {
-    expect(classifyUploadStatus(408)).toBe('transient');
-  });
+	it('408 → transient (request timeout is retryable, not terminal)', () => {
+		expect(classifyUploadStatus(408)).toBe('transient');
+	});

-  it('genuinely permanent 4xx → terminal (locked / banned / released / quota)', () => {
-    expect(classifyUploadStatus(403)).toBe('terminal'); // banned / locked / released
-    expect(classifyUploadStatus(413)).toBe('terminal'); // quota exhausted
-    expect(classifyUploadStatus(400)).toBe('terminal');
-    expect(classifyUploadStatus(404)).toBe('terminal');
-  });
+	it('genuinely permanent 4xx → terminal (locked / banned / released / quota)', () => {
+		expect(classifyUploadStatus(403)).toBe('terminal'); // banned / locked / released
+		expect(classifyUploadStatus(413)).toBe('terminal'); // quota exhausted
+		expect(classifyUploadStatus(400)).toBe('terminal');
+		expect(classifyUploadStatus(404)).toBe('terminal');
+	});

-  it('5xx / unexpected → transient (retryable, blob kept)', () => {
-    expect(classifyUploadStatus(500)).toBe('transient');
-    expect(classifyUploadStatus(502)).toBe('transient');
-    expect(classifyUploadStatus(503)).toBe('transient');
-  });
+	it('5xx / unexpected → transient (retryable, blob kept)', () => {
+		expect(classifyUploadStatus(500)).toBe('transient');
+		expect(classifyUploadStatus(502)).toBe('transient');
+		expect(classifyUploadStatus(503)).toBe('transient');
+	});
 });

 /**
@@ -48,27 +48,27 @@ describe('classifyUploadStatus', () => {
 * loses a photo the guest expected to survive a reopen, or lets a banned device retry forever.
 */
 describe('isReversibleLock', () => {
-  it('an `uploads_locked` code is reversible at any status (event closed / released)', () => {
-    expect(isReversibleLock(403, 'uploads_locked')).toBe(true);
-    expect(isReversibleLock(409, 'uploads_locked')).toBe(true);
-  });
+	it('an `uploads_locked` code is reversible at any status (event closed / released)', () => {
+		expect(isReversibleLock(403, 'uploads_locked')).toBe(true);
+		expect(isReversibleLock(409, 'uploads_locked')).toBe(true);
+	});

-  it('a `forbidden` 403 (banned) is PERMANENT — purge, never resume', () => {
-    expect(isReversibleLock(403, 'forbidden')).toBe(false);
-  });
+	it('a `forbidden` 403 (banned) is PERMANENT — purge, never resume', () => {
+		expect(isReversibleLock(403, 'forbidden')).toBe(false);
+	});

-  it('an unidentifiable 403 (unparseable proxy/WAF/captive-portal body) is treated reversible', () => {
-    // Losing a photo is the worst outcome; 403 is the reversible-lock status here.
-    expect(isReversibleLock(403, undefined)).toBe(true);
-    expect(isReversibleLock(403, null)).toBe(true);
-    expect(isReversibleLock(403, '')).toBe(true);
-  });
+	it('an unidentifiable 403 (unparseable proxy/WAF/captive-portal body) is treated reversible', () => {
+		// Losing a photo is the worst outcome; 403 is the reversible-lock status here.
+		expect(isReversibleLock(403, undefined)).toBe(true);
+		expect(isReversibleLock(403, null)).toBe(true);
+		expect(isReversibleLock(403, '')).toBe(true);
+	});

-  it('a non-403 permanent 4xx (e.g. 413 quota) is NOT reversible unless explicitly locked', () => {
-    expect(isReversibleLock(413, undefined)).toBe(false);
-    expect(isReversibleLock(400, 'bad_request')).toBe(false);
-    expect(isReversibleLock(413, 'uploads_locked')).toBe(true); // explicit tag still wins
-  });
+	it('a non-403 permanent 4xx (e.g. 413 quota) is NOT reversible unless explicitly locked', () => {
+		expect(isReversibleLock(413, undefined)).toBe(false);
+		expect(isReversibleLock(400, 'bad_request')).toBe(false);
+		expect(isReversibleLock(413, 'uploads_locked')).toBe(true); // explicit tag still wins
+	});
 });

 /**
@@ -78,32 +78,32 @@ describe('isReversibleLock', () => {
 * re-selecting the same file after a reload would MISS the duplicate and queue it twice.
 */
 describe('entryToQueueItem', () => {
-  const base = {
-    id: 'e1',
-    userId: 'u1',
-    fileName: 'photo.jpg',
-    fileSize: 1234,
-    lastModified: 1_700_000_000_000,
-    mimeType: 'image/jpeg',
-    status: 'pending' as const
-  };
+	const base = {
+		id: 'e1',
+		userId: 'u1',
+		fileName: 'photo.jpg',
+		fileSize: 1234,
+		lastModified: 1_700_000_000_000,
+		mimeType: 'image/jpeg',
+		status: 'pending' as const
+	};

-  it('carries lastModified across rehydration (dedup depends on it)', () => {
-    expect(entryToQueueItem(base).lastModified).toBe(1_700_000_000_000);
-  });
+	it('carries lastModified across rehydration (dedup depends on it)', () => {
+		expect(entryToQueueItem(base).lastModified).toBe(1_700_000_000_000);
+	});

-  it('downgrades an interrupted `uploading` entry to `pending` so it resumes', () => {
-    expect(entryToQueueItem({ ...base, status: 'uploading' }).status).toBe('pending');
-  });
+	it('downgrades an interrupted `uploading` entry to `pending` so it resumes', () => {
+		expect(entryToQueueItem({ ...base, status: 'uploading' }).status).toBe('pending');
+	});

-  it('a `done` entry reports 100% progress; others start at 0', () => {
-    expect(entryToQueueItem({ ...base, status: 'done' }).progress).toBe(100);
-    expect(entryToQueueItem(base).progress).toBe(0);
-  });
+	it('a `done` entry reports 100% progress; others start at 0', () => {
+		expect(entryToQueueItem({ ...base, status: 'done' }).progress).toBe(100);
+		expect(entryToQueueItem(base).progress).toBe(0);
+	});

-  it('defaults caption/hashtags to empty strings', () => {
-    const item = entryToQueueItem(base);
-    expect(item.caption).toBe('');
-    expect(item.hashtags).toBe('');
-  });
+	it('defaults caption/hashtags to empty strings', () => {
+		const item = entryToQueueItem(base);
+		expect(item.caption).toBe('');
+		expect(item.hashtags).toBe('');
+	});
 });
--- a/frontend/src/lib/upload-queue.ts
+++ b/frontend/src/lib/upload-queue.ts
@@ -97,7 +97,9 @@ async function requeueRetriable(): Promise<void> {
 	}
 	queueItems.update((items) =>
 		items.map((item) =>
-			item.status === 'error' ? { ...item, status: 'pending' as const, progress: 0, error: undefined } : item
+			item.status === 'error'
+				? { ...item, status: 'pending' as const, progress: 0, error: undefined }
+				: item
 		)
 	);
 }
@@ -637,11 +639,7 @@ async function uploadItem(id: string): Promise<void> {
 	}
 }

-function updateItemStatus(
-	id: string,
-	status: QueueItem['status'],
-	error?: string
-): void {
+function updateItemStatus(id: string, status: QueueItem['status'], error?: string): void {
 	queueItems.update((items) =>
 		items.map((item) =>
 			item.id === id
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -98,10 +98,7 @@
 		class="fixed z-30 h-0.5 bg-gray-200 transition-all"
 		style="bottom: calc(3.5rem + env(safe-area-inset-bottom)); left: 0; right: 0"
 	>
-		<div
-			class="h-full bg-blue-500 transition-all duration-500"
-			style="width: {progressPct}%"
-		></div>
+		<div class="h-full bg-blue-500 transition-all duration-500" style="width: {progressPct}%"></div>
 	</div>
 {/if}

--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -15,7 +15,9 @@
 <!-- Brief branded splash so the redirect doesn't flash a blank page. -->
 <div class="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
 	<div class="flex flex-col items-center gap-3">
-		<div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
+		<div
+			class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"
+		></div>
 		<p class="text-sm font-medium text-gray-400 dark:text-gray-500">EventSnap</p>
 	</div>
 </div>
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -107,11 +107,17 @@
 		// via PIN), not just this device.
 		try {
 			await api.delete(everywhere ? '/sessions' : '/session');
-		} catch { /* best-effort logout */ }
+		} catch {
+			/* best-effort logout */
+		}
 		// Wipe the IndexedDB upload queue so a second guest using the same device can't
 		// inherit (or be blamed for) this guest's pending uploads. Not done on a 401
 		// auto-clear — that path preserves the queue in case the user re-authenticates.
-		try { await clearQueue(); } catch { /* best-effort cleanup */ }
+		try {
+			await clearQueue();
+		} catch {
+			/* best-effort cleanup */
+		}
 		// Note: export-status teardown is wired via the onClearAuth hook in
 		// export-status-store, so it runs for both this explicit path and api.ts's 401.
 		clearAuth();
@@ -124,25 +130,32 @@

 	function roleLabel(r: string | null): string {
 		switch (r) {
-			case 'admin': return 'Admin';
-			case 'host': return 'Gastgeber';
-			default: return 'Gast';
+			case 'admin':
+				return 'Admin';
+			case 'host':
+				return 'Gastgeber';
+			default:
+				return 'Gast';
 		}
 	}

 	function roleColor(r: string | null): string {
 		switch (r) {
-			case 'admin': return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
-			case 'host': return 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200';
-			default: return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
+			case 'admin':
+				return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
+			case 'host':
+				return 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200';
+			default:
+				return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
 		}
 	}
-
 </script>

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
+	<div
+		class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900"
+	>
 		<div class="mx-auto flex max-w-lg items-center px-4 py-4">
 			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
 		</div>
@@ -150,7 +163,9 @@

 	<div class="mx-auto max-w-lg space-y-3 p-4">
 		<!-- Profile card -->
-		<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+		<div
+			class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+		>
 			<div class="flex items-center gap-4">
 				<div
 					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
@@ -159,33 +174,63 @@
 					{initials(displayName)}
 				</div>
 				<div class="min-w-0">
-					<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{displayName ?? 'Unbekannt'}</p>
-					<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
+					<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">
+						{displayName ?? 'Unbekannt'}
+					</p>
+					<span
+						class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(
+							role
+						)}"
+					>
 						{roleLabel(role)}
 					</span>
 				</div>
 			</div>
 			{#if expiry}
-				<p class="mt-3 text-xs text-gray-400 dark:text-gray-500">Sitzung gültig bis {formatDate(expiry)}</p>
+				<p class="mt-3 text-xs text-gray-400 dark:text-gray-500">
+					Sitzung gültig bis {formatDate(expiry)}
+				</p>
 			{/if}
 		</div>

 		<!-- Dashboards section (host + admin only) -->
 		{#if role === 'host' || role === 'admin'}
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+			<div
+				class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+			>
 				<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
-					<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Dashboards</h2>
+					<h2
+						class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+					>
+						Dashboards
+					</h2>
 				</div>
 				<a
 					href="/host"
 					class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50 dark:hover:bg-gray-700/50"
 				>
 					<!-- Star icon -->
-					<svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+					<svg
+						class="h-5 w-5 text-amber-500"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+						/>
 					</svg>
 					<span class="flex-1 font-medium text-gray-900 dark:text-gray-100">Host-Dashboard</span>
-					<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+					<svg
+						class="h-4 w-4 text-gray-300 dark:text-gray-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
 					</svg>
 				</a>
@@ -195,11 +240,27 @@
 						class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/50"
 					>
 						<!-- Shield icon -->
-						<svg class="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
+						<svg
+							class="h-5 w-5 text-blue-600 dark:text-blue-400"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+							/>
 						</svg>
 						<span class="flex-1 font-medium text-gray-900 dark:text-gray-100">Admin-Dashboard</span>
-						<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<svg
+							class="h-4 w-4 text-gray-300 dark:text-gray-600"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
 							<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
 						</svg>
 					</a>
@@ -208,14 +269,22 @@
 		{/if}

 		<!-- PIN card -->
-		<div class="rounded-xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-800/60 dark:bg-amber-950/30">
+		<div
+			class="rounded-xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-800/60 dark:bg-amber-950/30"
+		>
 			<h2 class="mb-1 font-semibold text-amber-900 dark:text-amber-200">Wiederherstellungs-PIN</h2>
 			<p class="mb-3 text-sm text-amber-700 dark:text-amber-300/90">
-				Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib ihn auf!
+				Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib
+				ihn auf!
 			</p>
 			{#if $pin}
-				<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm dark:bg-gray-900">
-					<span class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{$pin}</span>
+				<div
+					class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm dark:bg-gray-900"
+				>
+					<span
+						class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+						>{$pin}</span
+					>
 					<button
 						onclick={copyPin}
 						class="inline-flex min-h-11 items-center rounded-md bg-amber-100 px-4 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
@@ -224,8 +293,11 @@
 					</button>
 				</div>
 			{:else}
-				<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm dark:bg-gray-900 dark:text-gray-500">
-					PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN anzumelden.
+				<div
+					class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm dark:bg-gray-900 dark:text-gray-500"
+				>
+					PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN
+					anzumelden.
 				</div>
 			{/if}
 		</div>
@@ -235,30 +307,46 @@
 			href="/diashow"
 			class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white px-5 py-4 transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50 sm:hidden"
 		>
-			<svg class="h-5 w-5 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z" />
+			<svg
+				class="h-5 w-5 text-purple-500 dark:text-purple-400"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="1.5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z"
+				/>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M10 9.75 14.5 12 10 14.25v-4.5Z" />
 			</svg>
 			<div class="flex-1">
 				<p class="font-medium text-gray-900 dark:text-gray-100">Diashow starten</p>
 				<p class="text-xs text-gray-500 dark:text-gray-400">Vollbild-Präsentation der Beiträge</p>
 			</div>
-			<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<svg
+				class="h-4 w-4 text-gray-300 dark:text-gray-600"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
 			</svg>
 		</a>

 		<!-- Theme / Design -->
-		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+		<div
+			class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+		>
 			<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
-				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Design</h2>
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+					Design
+				</h2>
 			</div>
 			<div class="grid grid-cols-3 gap-2 p-3" role="radiogroup" aria-label="Design">
-				{#each [
-					{ value: 'system', label: 'System' },
-					{ value: 'light',  label: 'Hell' },
-					{ value: 'dark',   label: 'Dunkel' }
-				] as opt (opt.value)}
+				{#each [{ value: 'system', label: 'System' }, { value: 'light', label: 'Hell' }, { value: 'dark', label: 'Dunkel' }] as opt (opt.value)}
 					{@const selected = $themePreference === opt.value}
 					<button
 						type="button"
@@ -267,17 +355,36 @@
 						onclick={() => themePreference.set(opt.value as ThemePreference)}
 						class="flex flex-col items-center gap-1 rounded-lg border-2 px-2 py-3 text-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200
 							{selected
-								? 'border-blue-600 bg-blue-50 text-blue-700 dark:border-blue-500 dark:bg-blue-950/40 dark:text-blue-200'
-								: 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700/50'}"
+							? 'border-blue-600 bg-blue-50 text-blue-700 dark:border-blue-500 dark:bg-blue-950/40 dark:text-blue-200'
+							: 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700/50'}"
 					>
 						<!-- SVG icons render consistently everywhere (emoji show as tofu on some Android). -->
-						<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+						<svg
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+							aria-hidden="true"
+						>
 							{#if opt.value === 'system'}
-								<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z" />
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z"
+								/>
 							{:else if opt.value === 'light'}
-								<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+								/>
 							{:else}
-								<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+								/>
 							{/if}
 						</svg>
 						<span class="font-medium">{opt.label}</span>
@@ -287,9 +394,13 @@
 		</div>

 		<!-- Data mode -->
-		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+		<div
+			class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+		>
 			<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
-				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Datennutzung</h2>
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+					Datennutzung
+				</h2>
 			</div>
 			<!--
 				Custom buttons styled as radios. The store is the single source of truth;
@@ -299,10 +410,7 @@
 				model drift apart on cancel and on subsequent switches).
 			-->
 			<div class="px-5 py-4 space-y-2" role="radiogroup" aria-label="Datenmodus">
-				{#each [
-					{ value: 'saver',    title: 'Datensparer (empfohlen)', body: 'Lädt komprimierte Vorschauen. Schnell und mobildatenfreundlich.' },
-					{ value: 'original', title: 'Original',                 body: 'Lädt die Originaldateien. Bessere Qualität, höherer Datenverbrauch.' }
-				] as opt (opt.value)}
+				{#each [{ value: 'saver', title: 'Datensparer (empfohlen)', body: 'Lädt komprimierte Vorschauen. Schnell und mobildatenfreundlich.' }, { value: 'original', title: 'Original', body: 'Lädt die Originaldateien. Bessere Qualität, höherer Datenverbrauch.' }] as opt (opt.value)}
 					{@const selected = $dataMode === opt.value}
 					<button
 						type="button"
@@ -312,7 +420,9 @@
 						class="flex w-full cursor-pointer items-start gap-3 rounded-lg p-1 text-left transition hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200 dark:hover:bg-gray-700/50"
 					>
 						<span
-							class="mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition {selected ? 'border-blue-600 dark:border-blue-400' : 'border-gray-300 dark:border-gray-600'}"
+							class="mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition {selected
+								? 'border-blue-600 dark:border-blue-400'
+								: 'border-gray-300 dark:border-gray-600'}"
 						>
 							{#if selected}
 								<span class="block h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400"></span>
@@ -329,15 +439,21 @@

 		<!-- Per-user quota widget -->
 		{#if $quotaStore.enabled && $quotaStore.limit_bytes != null}
-			<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
-				<h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+			<div
+				class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+			>
+				<h2
+					class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+				>
 					Dein Speicherkontingent
 				</h2>
 				<div class="flex items-baseline justify-between">
 					<span class="text-2xl font-bold text-gray-900 dark:text-gray-100">
 						{formatBytes($quotaStore.used_bytes)}
 					</span>
-					<span class="text-sm text-gray-500 dark:text-gray-400">von {formatBytes($quotaStore.limit_bytes)}</span>
+					<span class="text-sm text-gray-500 dark:text-gray-400"
+						>von {formatBytes($quotaStore.limit_bytes)}</span
+					>
 				</div>
 				<div class="mt-2 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
 					<div
@@ -356,18 +472,27 @@

 		<!-- Datenschutzhinweis (preformatted, plain text) -->
 		{#if $privacyNote.trim()}
-			<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
-				<h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+			<div
+				class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+			>
+				<h2
+					class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+				>
 					Datenschutzhinweis
 				</h2>
-				<pre class="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">{$privacyNote}</pre>
+				<pre
+					class="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">{$privacyNote}</pre>
 			</div>
 		{/if}

 		<!-- Konto section -->
-		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+		<div
+			class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+		>
 			<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
-				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Konto</h2>
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+					Konto
+				</h2>
 			</div>

 			<!-- Recover / device switch -->
@@ -375,35 +500,83 @@
 				href="/recover"
 				class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50 dark:hover:bg-gray-700/50"
 			>
-				<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" />
+				<svg
+					class="h-5 w-5 text-gray-400 dark:text-gray-500"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3"
+					/>
 				</svg>
-				<span class="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300">Gerät wechseln / PIN nutzen</span>
-				<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<span class="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300"
+					>Gerät wechseln / PIN nutzen</span
+				>
+				<svg
+					class="h-4 w-4 text-gray-300 dark:text-gray-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+				>
 					<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
 				</svg>
 			</a>

 			<!-- Leave / logout (this device) -->
 			<button
-				onclick={() => { leaveEverywhere = false; leaveConfirmOpen = true; }}
+				onclick={() => {
+					leaveEverywhere = false;
+					leaveConfirmOpen = true;
+				}}
 				class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50 dark:border-gray-700 dark:hover:bg-red-950/30"
 			>
-				<svg class="h-5 w-5 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+				<svg
+					class="h-5 w-5 text-red-500 dark:text-red-400"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
+					/>
 				</svg>
-				<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400">Event verlassen</span>
+				<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400"
+					>Event verlassen</span
+				>
 			</button>

 			<!-- Sign out everywhere (all devices) -->
 			<button
-				onclick={() => { leaveEverywhere = true; leaveConfirmOpen = true; }}
+				onclick={() => {
+					leaveEverywhere = true;
+					leaveConfirmOpen = true;
+				}}
 				class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50 dark:border-gray-700 dark:hover:bg-red-950/30"
 			>
-				<svg class="h-5 w-5 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+				<svg
+					class="h-5 w-5 text-red-500 dark:text-red-400"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.5"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+					/>
 				</svg>
-				<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400">Auf allen Geräten abmelden</span>
+				<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400"
+					>Auf allen Geräten abmelden</span
+				>
 			</button>
 		</div>
 	</div>
@@ -429,7 +602,12 @@
 		<div class="mb-4 flex justify-center">
 			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 		</div>
-		<h3 id="data-mode-title" class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
+		<h3
+			id="data-mode-title"
+			class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100"
+		>
+			Original-Dateien laden?
+		</h3>
 		<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
 			Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
 		</p>
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -56,8 +56,8 @@
 		{
 			title: 'Limits & Größen',
 			fields: [
-				{ key: 'max_image_size_mb',       label: 'Max. Bildgröße (MB)',     kind: 'number' },
-				{ key: 'max_video_size_mb',       label: 'Max. Videogröße (MB)',    kind: 'number' }
+				{ key: 'max_image_size_mb', label: 'Max. Bildgröße (MB)', kind: 'number' },
+				{ key: 'max_video_size_mb', label: 'Max. Videogröße (MB)', kind: 'number' }
 				// compression_concurrency is set via COMPRESSION_WORKER_CONCURRENCY at
 				// boot, not live — omitted so it isn't a dead no-op control.
 			]
@@ -65,30 +65,50 @@
 		{
 			title: 'Rate-Limits',
 			fields: [
-				{ key: 'rate_limits_enabled', label: 'Rate-Limits aktiv',           kind: 'bool', hint: 'Hauptschalter — wenn aus, sind alle Rate-Limits deaktiviert.' },
-				{ key: 'upload_rate_enabled', label: 'Upload-Limit aktiv',          kind: 'bool' },
-				{ key: 'feed_rate_enabled',   label: 'Feed-Limit aktiv',            kind: 'bool' },
-				{ key: 'export_rate_enabled', label: 'Export-Limit aktiv',          kind: 'bool' },
-				{ key: 'join_rate_enabled',   label: 'Join-Limit aktiv',            kind: 'bool' },
-				{ key: 'upload_rate_per_hour', label: 'Upload-Limit pro Stunde',    kind: 'number' },
-				{ key: 'feed_rate_per_min',    label: 'Feed-Anfragen pro Minute',   kind: 'number' },
-				{ key: 'export_rate_per_day',  label: 'Export-Downloads pro Tag',   kind: 'number' }
+				{
+					key: 'rate_limits_enabled',
+					label: 'Rate-Limits aktiv',
+					kind: 'bool',
+					hint: 'Hauptschalter — wenn aus, sind alle Rate-Limits deaktiviert.'
+				},
+				{ key: 'upload_rate_enabled', label: 'Upload-Limit aktiv', kind: 'bool' },
+				{ key: 'feed_rate_enabled', label: 'Feed-Limit aktiv', kind: 'bool' },
+				{ key: 'export_rate_enabled', label: 'Export-Limit aktiv', kind: 'bool' },
+				{ key: 'join_rate_enabled', label: 'Join-Limit aktiv', kind: 'bool' },
+				{ key: 'upload_rate_per_hour', label: 'Upload-Limit pro Stunde', kind: 'number' },
+				{ key: 'feed_rate_per_min', label: 'Feed-Anfragen pro Minute', kind: 'number' },
+				{ key: 'export_rate_per_day', label: 'Export-Downloads pro Tag', kind: 'number' }
 			]
 		},
 		{
 			title: 'Quoten',
 			fields: [
-				{ key: 'quota_enabled',              label: 'Quoten aktiv', kind: 'bool', hint: 'Hauptschalter — wenn aus, wird nichts geprüft.' },
-				{ key: 'storage_quota_enabled',      label: 'Speicher-Quote aktiv', kind: 'bool' },
-				{ key: 'upload_count_quota_enabled', label: 'Upload-Anzahl-Quote aktiv', kind: 'bool', hint: 'Reserviert für künftige Anzahl-Limits.' },
-				{ key: 'quota_tolerance',            label: 'Toleranz (0–1)', kind: 'number' },
-				{ key: 'estimated_guest_count',      label: 'Geschätzte Gästezahl', kind: 'number' }
+				{
+					key: 'quota_enabled',
+					label: 'Quoten aktiv',
+					kind: 'bool',
+					hint: 'Hauptschalter — wenn aus, wird nichts geprüft.'
+				},
+				{ key: 'storage_quota_enabled', label: 'Speicher-Quote aktiv', kind: 'bool' },
+				{
+					key: 'upload_count_quota_enabled',
+					label: 'Upload-Anzahl-Quote aktiv',
+					kind: 'bool',
+					hint: 'Reserviert für künftige Anzahl-Limits.'
+				},
+				{ key: 'quota_tolerance', label: 'Toleranz (0–1)', kind: 'number' },
+				{ key: 'estimated_guest_count', label: 'Geschätzte Gästezahl', kind: 'number' }
 			]
 		},
 		{
 			title: 'Datenschutzhinweis',
 			fields: [
-				{ key: 'privacy_note', label: 'Datenschutzhinweis (freier Text)', kind: 'text', hint: 'Wird wörtlich im Konto-Bereich angezeigt. Kein HTML — Leerzeichen und Zeilenumbrüche werden übernommen.' }
+				{
+					key: 'privacy_note',
+					label: 'Datenschutzhinweis (freier Text)',
+					kind: 'text',
+					hint: 'Wird wörtlich im Konto-Bereich angezeigt. Kein HTML — Leerzeichen und Zeilenumbrüche werden übernommen.'
+				}
 			]
 		}
 	];
@@ -103,7 +123,12 @@
 	}

 	type AdminTab = 'stats' | 'config' | 'export' | 'users';
-	const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
+	const TAB_LABELS: Record<AdminTab, string> = {
+		stats: 'Stats',
+		config: 'Config',
+		export: 'Export',
+		users: 'Nutzer'
+	};

 	let activeTab = $state<AdminTab>('stats');

@@ -215,7 +240,11 @@
 		// Don't let a cleared number field persist as an empty/NaN config value.
 		for (const key of NUMBER_KEYS) {
 			const v = configDraft[key];
-			if (v !== undefined && v !== config[key] && (String(v).trim() === '' || !Number.isFinite(Number(v)))) {
+			if (
+				v !== undefined &&
+				v !== config[key] &&
+				(String(v).trim() === '' || !Number.isFinite(Number(v)))
+			) {
 				toastError(new Error('Bitte gib für alle Zahlenfelder einen gültigen Wert ein.'));
 				return;
 			}
@@ -350,20 +379,29 @@

 	function statusBadgeClass(status: string): string {
 		switch (status) {
-			case 'done':    return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200';
-			case 'running': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
-			case 'failed':  return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
-			default:        return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
+			case 'done':
+				return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200';
+			case 'running':
+				return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
+			case 'failed':
+				return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
+			default:
+				return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
 		}
 	}

 	function statusLabel(status: string): string {
 		switch (status) {
-			case 'pending': return 'Ausstehend';
-			case 'running': return 'Läuft';
-			case 'done': return 'Fertig';
-			case 'failed': return 'Fehlgeschlagen';
-			default: return status;
+			case 'pending':
+				return 'Ausstehend';
+			case 'running':
+				return 'Läuft';
+			case 'done':
+				return 'Fertig';
+			case 'failed':
+				return 'Fehlgeschlagen';
+			default:
+				return status;
 		}
 	}
 </script>
@@ -395,13 +433,23 @@
 <!-- One-time PIN display modal — focus-trapped, aria-modal, Escape-dismissable. -->
 <Modal open={pinModal !== null} titleId="admin-pin-modal-title" onClose={() => (pinModal = null)}>
 	{#if pinModal}
-		<h2 id="admin-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
+		<h2 id="admin-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">
+			Neue PIN für {pinModal.name}
+		</h2>
 		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
+			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie
+			verworfen.
 		</p>
-		<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
-			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
-			<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60">
+		<div
+			class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30"
+		>
+			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+				>{pinModal.pin}</span
+			>
+			<button
+				onclick={copyPinModal}
+				class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60"
+			>
 				Kopieren
 			</button>
 		</div>
@@ -417,14 +465,24 @@
 <!-- Ban modal — ban always hides now, so this is a plain confirm (no checkbox). -->
 <Modal open={banTarget !== null} titleId="admin-ban-modal-title" onClose={() => (banTarget = null)}>
 	{#if banTarget}
-		<h2 id="admin-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
+		<h2 id="admin-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">
+			Benutzer sperren
+		</h2>
 		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			<strong>{banTarget.display_name}</strong> wird gesperrt: alle Uploads verschwinden aus
-			Galerie, Diashow und Export, und die Sitzung wird beendet. Rückgängig machbar über „Entsperren“.
+			<strong>{banTarget.display_name}</strong> wird gesperrt: alle Uploads verschwinden aus Galerie,
+			Diashow und Export, und die Sitzung wird beendet. Rückgängig machbar über „Entsperren“.
 		</p>
 		<div class="flex gap-2">
-			<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800">Abbrechen</button>
-			<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400">
+			<button
+				onclick={() => (banTarget = null)}
+				class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
+				>Abbrechen</button
+			>
+			<button
+				onclick={confirmBan}
+				disabled={banSubmitting}
+				class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400"
+			>
 				{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
 			</button>
 		</div>
@@ -433,11 +491,17 @@

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
+	<div
+		class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900"
+	>
 		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
 			<IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+					/>
 				</svg>
 			</IconButton>
 			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
@@ -445,13 +509,17 @@
 	</div>

 	<!-- Inner tab bar -->
-	<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+	<div
+		class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
+	>
 		<div class="mx-auto flex max-w-3xl min-w-max">
-			{#each Object.entries(TAB_LABELS) as [tab, label]}
+			{#each Object.entries(TAB_LABELS) as [tab, label] (tab)}
 				<button
 					onclick={() => (activeTab = tab as AdminTab)}
 					class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
-						{activeTab === tab ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
+						{activeTab === tab
+						? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+						: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
 				>
 					{label}
 				</button>
@@ -463,55 +531,95 @@
 		{#if loading}
 			<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
 		{:else if error}
-			<div role="alert" class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300">{error}</div>
+			<div
+				role="alert"
+				class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300"
+			>
+				{error}
+			</div>
 		{:else}
-
 			<!-- ── Stats tab ────────────────────────────────────────────────── -->
 			{#if activeTab === 'stats'}
 				<div class="space-y-3">
 					{#if stats}
 						<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
-								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.user_count}</p>
+							<div
+								class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
+							>
+								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+									{stats.user_count}
+								</p>
 								<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
 							</div>
-							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
-								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.upload_count}</p>
+							<div
+								class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
+							>
+								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+									{stats.upload_count}
+								</p>
 								<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
 							</div>
-							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
-								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.comment_count}</p>
+							<div
+								class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
+							>
+								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+									{stats.comment_count}
+								</p>
 								<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Kommentare</p>
 							</div>
-							<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
-								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{diskPct(stats)} %</p>
+							<div
+								class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800"
+							>
+								<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+									{diskPct(stats)} %
+								</p>
 								<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Speicher</p>
 							</div>
 						</div>
 						<!-- Disk bar -->
-						<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
-							<div class="mb-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+						<div
+							class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+						>
+							<div
+								class="mb-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+							>
 								<span>Speicherauslastung</span>
-								<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)}</span>
+								<span
+									>{formatBytes(stats.disk_used_bytes)} / {formatBytes(
+										stats.disk_total_bytes
+									)}</span
+								>
 							</div>
 							<div class="h-2.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
 								<div
-									class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
+									class="h-full rounded-full transition-all {diskPct(stats) >= 90
+										? 'bg-red-500'
+										: diskPct(stats) >= 75
+											? 'bg-amber-500'
+											: 'bg-blue-500'}"
 									style="width: {diskPct(stats)}%"
 								></div>
 							</div>
-							<p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">{formatBytes(stats.disk_free_bytes)} frei</p>
+							<p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">
+								{formatBytes(stats.disk_free_bytes)} frei
+							</p>
 						</div>
 					{/if}
 				</div>

-			<!-- ── Config tab ───────────────────────────────────────────────── -->
+				<!-- ── Config tab ───────────────────────────────────────────────── -->
 			{:else if activeTab === 'config'}
 				<div class="relative space-y-3 pb-20">
 					{#each CONFIG_GROUPS as group (group.title)}
-						<div class="rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+						<div
+							class="rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+						>
 							<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
-								<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{group.title}</h3>
+								<h3
+									class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+								>
+									{group.title}
+								</h3>
 							</div>
 							<div class="space-y-4 px-5 py-4">
 								{#each group.fields as field (field.key)}
@@ -526,14 +634,20 @@
 													onchange={() => toggleBool(field.key)}
 												/>
 												<div class="min-w-0">
-													<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{field.label}</span>
+													<span class="text-sm font-medium text-gray-900 dark:text-gray-100"
+														>{field.label}</span
+													>
 													{#if field.hint}
 														<p class="text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
 													{/if}
 												</div>
 											</label>
 										{:else if field.kind === 'text'}
-											<label for={field.key} class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{field.label}</label>
+											<label
+												for={field.key}
+												class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+												>{field.label}</label
+											>
 											<textarea
 												id={field.key}
 												rows="6"
@@ -544,7 +658,11 @@
 												<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
 											{/if}
 										{:else}
-											<label for={field.key} class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{field.label}</label>
+											<label
+												for={field.key}
+												class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
+												>{field.label}</label
+											>
 											<input
 												id={field.key}
 												type="number"
@@ -565,7 +683,9 @@
 					{/each}

 					<!-- Sticky save button -->
-					<div class="sticky bottom-0 -mx-4 border-t border-gray-100 bg-white px-5 py-3 dark:border-gray-800 dark:bg-gray-900 sm:mx-0 sm:rounded-b-xl">
+					<div
+						class="sticky bottom-0 -mx-4 border-t border-gray-100 bg-white px-5 py-3 dark:border-gray-800 dark:bg-gray-900 sm:mx-0 sm:rounded-b-xl"
+					>
 						<button
 							onclick={saveConfig}
 							disabled={saving}
@@ -576,20 +696,24 @@
 					</div>
 				</div>

-			<!-- ── Export tab ───────────────────────────────────────────────── -->
+				<!-- ── Export tab ───────────────────────────────────────────────── -->
 			{:else if activeTab === 'export'}
 				<div class="space-y-3">
 					<!-- Gallery release -->
-					<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+					<div
+						class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+					>
 						<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
 						<button
-							onclick={() => (confirmAction = {
-								title: 'Galerie freigeben?',
-								message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
-								confirmLabel: 'Freigeben',
-								tone: 'danger',
-								run: releaseGallery
-							})}
+							onclick={() =>
+								(confirmAction = {
+									title: 'Galerie freigeben?',
+									message:
+										'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
+									confirmLabel: 'Freigeben',
+									tone: 'danger',
+									run: releaseGallery
+								})}
 							class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 						>
 							Galerie freigeben
@@ -597,7 +721,9 @@
 					</div>

 					<!-- Export jobs -->
-					<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+					<div
+						class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+					>
 						<div class="mb-4 flex items-center justify-between">
 							<h3 class="font-semibold text-gray-900 dark:text-gray-100">Export-Jobs</h3>
 							<button
@@ -612,21 +738,34 @@
 							<p class="text-sm text-gray-400 dark:text-gray-500">Noch keine Export-Jobs.</p>
 						{:else}
 							<div class="space-y-3">
-								{#each exportJobs as job}
+								{#each exportJobs as job (job.type)}
 									<div class="rounded-lg border border-gray-100 p-3 dark:border-gray-700">
 										<div class="flex items-center justify-between">
-											<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{jobLabel(job.type)}</span>
-											<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
+											<span class="text-sm font-medium text-gray-900 dark:text-gray-100"
+												>{jobLabel(job.type)}</span
+											>
+											<span
+												class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(
+													job.status
+												)}"
+											>
 												{statusLabel(job.status)}
 											</span>
 										</div>
 										{#if job.status === 'running'}
 											<div class="mt-2">
-												<div class="mb-1 flex justify-between text-xs text-gray-500 dark:text-gray-400">
+												<div
+													class="mb-1 flex justify-between text-xs text-gray-500 dark:text-gray-400"
+												>
 													<span>Fortschritt</span><span>{job.progress_pct} %</span>
 												</div>
-												<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-													<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
+												<div
+													class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+												>
+													<div
+														class="h-full rounded-full bg-blue-500 transition-all"
+														style="width: {job.progress_pct}%"
+													></div>
 												</div>
 											</div>
 										{/if}
@@ -640,14 +779,28 @@
 					</div>
 				</div>

-			<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
+				<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
 			{:else if activeTab === 'users'}
-				<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+				<div
+					class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+				>
 					<!-- Search -->
 					<div class="p-4">
-						<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900">
-							<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+						<div
+							class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900"
+						>
+							<svg
+								class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+								/>
 							</svg>
 							<input
 								type="search"
@@ -658,73 +811,106 @@
 						</div>
 					</div>
 					{#if filteredUsers.length === 0}
-						<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine Treffer.</p>
+						<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
+							Keine Treffer.
+						</p>
 					{:else}
 						<div class="divide-y divide-gray-100 dark:divide-gray-700">
-							{#each filteredUsers as user}
+							{#each filteredUsers as user (user.id)}
 								<div class="flex items-center gap-3 px-5 py-3">
 									<div class="min-w-0 flex-1">
 										<div class="flex flex-wrap items-center gap-1.5">
-											<span class="font-medium text-gray-900 dark:text-gray-100">{user.display_name}</span>
+											<span class="font-medium text-gray-900 dark:text-gray-100"
+												>{user.display_name}</span
+											>
 											{#if user.role === 'host'}
-												<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">Host</span>
+												<span
+													class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
+													>Host</span
+												>
 											{:else if user.role === 'admin'}
-												<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">Admin</span>
+												<span
+													class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200"
+													>Admin</span
+												>
 											{/if}
 											{#if user.is_banned}
-												<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200">Gesperrt</span>
+												<span
+													class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200"
+													>Gesperrt</span
+												>
 											{/if}
 										</div>
 										<p class="text-xs text-gray-400 dark:text-gray-500">
-											{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
+											{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(
+												user.total_upload_bytes
+											)}
 										</p>
 									</div>
-								<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
-									{#if user.role !== 'admin'}
-										{#if user.is_banned}
-											<button onclick={() => (confirmAction = {
-												title: 'Sperre aufheben?',
-												message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
-												confirmLabel: 'Entsperren',
-												tone: 'default',
-												run: () => unban(user)
-											})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
-												Entsperren
-											</button>
-										{:else}
-											{#if user.role === 'guest'}
-												<button onclick={() => (confirmAction = {
-													title: 'Zum Host befördern?',
-													message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
-													confirmLabel: 'Befördern',
-													tone: 'default',
-													run: () => promoteToHost(user)
-												})} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60">
-													Host
+									<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
+										{#if user.role !== 'admin'}
+											{#if user.is_banned}
+												<button
+													onclick={() =>
+														(confirmAction = {
+															title: 'Sperre aufheben?',
+															message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
+															confirmLabel: 'Entsperren',
+															tone: 'default',
+															run: () => unban(user)
+														})}
+													class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+												>
+													Entsperren
+												</button>
+											{:else}
+												{#if user.role === 'guest'}
+													<button
+														onclick={() =>
+															(confirmAction = {
+																title: 'Zum Host befördern?',
+																message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
+																confirmLabel: 'Befördern',
+																tone: 'default',
+																run: () => promoteToHost(user)
+															})}
+														class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"
+													>
+														Host
+													</button>
+												{/if}
+												{#if user.role === 'host'}
+													<button
+														onclick={() =>
+															(confirmAction = {
+																title: 'Zum Gast degradieren?',
+																message: `${user.display_name} verliert alle Host-Rechte.`,
+																confirmLabel: 'Degradieren',
+																tone: 'danger',
+																run: () => demoteToGuest(user)
+															})}
+														class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+													>
+														Degradieren
+													</button>
+												{/if}
+												{#if canResetPinFor(user)}
+													<button
+														onclick={() => askResetPin(user)}
+														class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
+													>
+														PIN zurücksetzen
+													</button>
+												{/if}
+												<button
+													onclick={() => openBanModal(user)}
+													class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
+												>
+													Sperren
 												</button>
 											{/if}
-											{#if user.role === 'host'}
-												<button onclick={() => (confirmAction = {
-													title: 'Zum Gast degradieren?',
-													message: `${user.display_name} verliert alle Host-Rechte.`,
-													confirmLabel: 'Degradieren',
-													tone: 'danger',
-													run: () => demoteToGuest(user)
-												})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
-													Degradieren
-												</button>
-											{/if}
-											{#if canResetPinFor(user)}
-												<button onclick={() => askResetPin(user)} class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
-													PIN zurücksetzen
-												</button>
-											{/if}
-											<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60">
-												Sperren
-											</button>
 										{/if}
-									{/if}
-								</div>
+									</div>
 								</div>
 							{/each}
 						</div>
--- a/frontend/src/routes/admin/login/+page.svelte
+++ b/frontend/src/routes/admin/login/+page.svelte
@@ -41,10 +41,17 @@

 <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
 	<div class="w-full max-w-sm">
-		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Admin-Login</h1>
+		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
+			Admin-Login
+		</h1>
 		<p class="mb-6 text-center text-gray-500 text-sm dark:text-gray-400">Nur für Veranstalter</p>

-		<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleLogin();
+			}}
+		>
 			<input
 				type="password"
 				bind:value={password}
@@ -55,7 +62,9 @@
 			/>

 			{#if error}
-				<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="admin-login-error">{error}</p>
+				<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="admin-login-error">
+					{error}
+				</p>
 			{/if}

 			<button
--- a/frontend/src/routes/diashow/+page.svelte
+++ b/frontend/src/routes/diashow/+page.svelte
@@ -279,18 +279,28 @@
 	>
 		<button
 			type="button"
-			onclick={(e) => { e.stopPropagation(); toggleOverlay(); }}
+			onclick={(e) => {
+				e.stopPropagation();
+				toggleOverlay();
+			}}
 			aria-label="Steuerung anzeigen"
 			aria-expanded={showOverlay}
 			class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
 		>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
+				/>
 			</svg>
 		</button>
 		<button
 			type="button"
-			onclick={(e) => { e.stopPropagation(); exit(); }}
+			onclick={(e) => {
+				e.stopPropagation();
+				exit();
+			}}
 			aria-label="Diashow beenden"
 			class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
 		>
@@ -311,10 +321,14 @@
 					class="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
 				>
 					{#if paused}
-						<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+						<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"
+							><path d="M8 5v14l11-7z" /></svg
+						>
 						Fortsetzen
 					{:else}
-						<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
+						<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"
+							><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg
+						>
 						Pause
 					{/if}
 				</button>
@@ -334,7 +348,10 @@

 				<label class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm">
 					Übergang
-					<select bind:value={transitionId} class="bg-transparent text-sm font-medium focus:outline-none">
+					<select
+						bind:value={transitionId}
+						class="bg-transparent text-sm font-medium focus:outline-none"
+					>
 						{#each transitions as t (t.id)}
 							<option value={t.id} class="bg-black">{t.label}</option>
 						{/each}
@@ -346,7 +363,14 @@
 					onclick={exit}
 					class="ml-auto inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
 				>
-					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+					<svg
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
+						><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg
+					>
 					Beenden
 				</button>
 			</div>
--- a/frontend/src/routes/export/+page.svelte
+++ b/frontend/src/routes/export/+page.svelte
@@ -67,17 +67,18 @@
 		}
 	}

-	function jobLabel(type: 'zip' | 'html'): string {
-		return type === 'zip' ? 'ZIP-Archiv (Gallery.zip)' : 'HTML-Viewer (Memories.zip)';
-	}
-
 	function statusText(job: JobStatus): string {
 		switch (job.status) {
-			case 'locked': return 'Noch nicht freigegeben';
-			case 'pending': return 'Wird vorbereitet…';
-			case 'running': return `Wird erstellt (${job.progress_pct} %)`;
-			case 'done': return 'Bereit zum Download';
-			case 'failed': return 'Fehlgeschlagen';
+			case 'locked':
+				return 'Noch nicht freigegeben';
+			case 'pending':
+				return 'Wird vorbereitet…';
+			case 'running':
+				return `Wird erstellt (${job.progress_pct} %)`;
+			case 'done':
+				return 'Bereit zum Download';
+			case 'failed':
+				return 'Fehlgeschlagen';
 		}
 	}

@@ -142,13 +143,26 @@
 			aria-labelledby="html-guide-title"
 			use:focusTrap={{ onclose: () => (showHtmlGuide = false) }}
 		>
-			<h2 id="html-guide-title" class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
+			<h2 id="html-guide-title" class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">
+				Hinweis zum HTML-Viewer
+			</h2>
 			<ol class="mb-4 space-y-2 text-sm text-gray-700 dark:text-gray-300">
-				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
-				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
-				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
+				<li class="flex gap-2">
+					<span class="font-bold text-blue-600 dark:text-blue-400">1.</span> ZIP-Datei entpacken (Windows:
+					Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).
+				</li>
+				<li class="flex gap-2">
+					<span class="font-bold text-blue-600 dark:text-blue-400">2.</span>
+					<strong>index.html</strong> im Browser öffnen.
+				</li>
+				<li class="flex gap-2">
+					<span class="font-bold text-blue-600 dark:text-blue-400">3.</span> Kein Internet nötig — alles
+					ist lokal gespeichert.
+				</li>
 			</ol>
-			<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:bg-amber-950/30 dark:text-amber-300">
+			<p
+				class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:bg-amber-950/30 dark:text-amber-300"
+			>
 				Tipp: Am besten im WLAN herunterladen — die Datei kann mehrere GB groß sein.
 			</p>
 			<div class="flex gap-2">
@@ -170,9 +184,16 @@
 {/if}

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
-	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
+	<div
+		class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900"
+	>
 		<div class="mx-auto flex max-w-lg items-center gap-2 px-4 py-4">
-			<IconButton label="Zurück" onclick={() => goto('/feed')} data-testid="export-back" class="-ml-2">
+			<IconButton
+				label="Zurück"
+				onclick={() => goto('/feed')}
+				data-testid="export-back"
+				class="-ml-2"
+			>
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
 				</svg>
@@ -185,30 +206,56 @@
 		{#if loading}
 			<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
 		{:else if !status?.released}
-			<div class="rounded-xl border border-gray-200 bg-white p-6 text-center dark:border-gray-700 dark:bg-gray-800">
-				<svg class="mx-auto mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+			<div
+				class="rounded-xl border border-gray-200 bg-white p-6 text-center dark:border-gray-700 dark:bg-gray-800"
+			>
+				<svg
+					class="mx-auto mb-3 h-12 w-12 text-gray-300 dark:text-gray-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="1.5"
+						d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+					/>
 				</svg>
 				<p class="font-medium text-gray-700 dark:text-gray-300">Export noch nicht verfügbar</p>
-				<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Schau nach der Veranstaltung noch einmal vorbei.</p>
+				<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+					Schau nach der Veranstaltung noch einmal vorbei.
+				</p>
 			</div>
 		{:else if status}
 			<p class="text-sm text-gray-500 dark:text-gray-400">Wähle dein bevorzugtes Format:</p>

 			<!-- ZIP card -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+			<div
+				class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+			>
 				<div class="flex items-start justify-between gap-4">
 					<div class="min-w-0">
 						<h2 class="font-semibold text-gray-900 dark:text-gray-100">ZIP-Archiv</h2>
-						<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
-						<p class="mt-1 text-xs {status.zip.status === 'done' ? 'text-green-600 dark:text-green-400' : status.zip.status === 'failed' ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'}">
+						<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+							Alle Original-Fotos und Videos in strukturierten Ordnern.
+						</p>
+						<p
+							class="mt-1 text-xs {status.zip.status === 'done'
+								? 'text-green-600 dark:text-green-400'
+								: status.zip.status === 'failed'
+									? 'text-red-500 dark:text-red-400'
+									: 'text-gray-400 dark:text-gray-500'}"
+						>
 							{statusText(status.zip)}
 						</p>
 					</div>
 					<button
 						onclick={downloadZip}
 						disabled={status.zip.status !== 'done'}
-						class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400' : 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
+						class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done'
+							? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'
+							: 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
 					>
 						Download
 					</button>
@@ -216,26 +263,41 @@
 				{#if status.zip.status === 'running'}
 					<div class="mt-3">
 						<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-							<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.zip.progress_pct}%"></div>
+							<div
+								class="h-full rounded-full bg-blue-500 transition-all"
+								style="width: {status.zip.progress_pct}%"
+							></div>
 						</div>
 					</div>
 				{/if}
 			</div>

 			<!-- HTML card -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
+			<div
+				class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"
+			>
 				<div class="flex items-start justify-between gap-4">
 					<div class="min-w-0">
 						<h2 class="font-semibold text-gray-900 dark:text-gray-100">HTML-Viewer</h2>
-						<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
-						<p class="mt-1 text-xs {status.html.status === 'done' ? 'text-green-600 dark:text-green-400' : status.html.status === 'failed' ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'}">
+						<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+							Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.
+						</p>
+						<p
+							class="mt-1 text-xs {status.html.status === 'done'
+								? 'text-green-600 dark:text-green-400'
+								: status.html.status === 'failed'
+									? 'text-red-500 dark:text-red-400'
+									: 'text-gray-400 dark:text-gray-500'}"
+						>
 							{statusText(status.html)}
 						</p>
 					</div>
 					<button
 						onclick={downloadHtml}
 						disabled={status.html.status !== 'done'}
-						class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400' : 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
+						class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done'
+							? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'
+							: 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
 					>
 						Download
 					</button>
@@ -243,7 +305,10 @@
 				{#if status.html.status === 'running'}
 					<div class="mt-3">
 						<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-							<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.html.progress_pct}%"></div>
+							<div
+								class="h-full rounded-full bg-blue-500 transition-all"
+								style="width: {status.html.progress_pct}%"
+							></div>
 						</div>
 					</div>
 				{/if}
--- a/frontend/src/routes/feed/+page.svelte
+++ b/frontend/src/routes/feed/+page.svelte
@@ -56,7 +56,10 @@
 	let searchQuery = $state('');
 	let showAutocomplete = $state(false);

-	interface Filter { type: 'tag' | 'user'; value: string }
+	interface Filter {
+		type: 'tag' | 'user';
+		value: string;
+	}
 	let activeFilters = $state<Filter[]>([]);

 	let unsubscribers: (() => void)[] = [];
@@ -82,7 +85,9 @@
 				label: 'Löschen',
 				icon: '🗑',
 				tone: 'danger',
-				onClick: () => { pendingDeleteId = target.id; }
+				onClick: () => {
+					pendingDeleteId = target.id;
+				}
 			});
 		}
 		return actions;
@@ -108,6 +113,7 @@

 	// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
 	let allTags = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local throwaway counter inside a $derived.by; never stored in $state, so no reactivity is involved.
 		const freq = new Map<string, number>();
 		for (const u of uploads) {
 			for (const m of (u.caption ?? '').matchAll(/#(\w+)/g)) {
@@ -156,7 +162,7 @@
 			if (!showAutocomplete) return [];
 			return [
 				...frozenUploaders.slice(0, 3).map((u) => ({ type: 'user' as const, value: u })),
-				...frozenTags.slice(0, 3).map((t) => ({ type: 'tag' as const, value: t })),
+				...frozenTags.slice(0, 3).map((t) => ({ type: 'tag' as const, value: t }))
 			];
 		}
 		if (q.startsWith('#')) {
@@ -175,7 +181,7 @@
 			...frozenTags
 				.filter((t) => t.includes(lower))
 				.slice(0, 4)
-				.map((t) => ({ type: 'tag' as const, value: t })),
+				.map((t) => ({ type: 'tag' as const, value: t }))
 		];
 	});

@@ -230,7 +236,9 @@
 						return;
 					}
 					uploads = [upload, ...uploads];
-				} catch { /* ignore */ }
+				} catch {
+					/* ignore */
+				}
 			}),
 			// A processed upload gains preview/thumbnail URLs. Coalesce bursts (bulk
 			// uploads fire one per file) into a single in-place merge so the feed
@@ -241,7 +249,9 @@
 					const payload = JSON.parse(data) as { upload_id: string };
 					uploads = uploads.filter((u) => u.id !== payload.upload_id);
 					if (selectedUpload?.id === payload.upload_id) selectedUpload = null;
-				} catch { /* ignore */ }
+				} catch {
+					/* ignore */
+				}
 			}),
 			// A background transcode failed: the backend already cleaned up (refunded
 			// quota, removed the row) and an upload-deleted evicts the card. Only the
@@ -255,7 +265,9 @@
 						toast('Ein Upload konnte nicht verarbeitet werden.', 'error');
 						void refreshQuota();
 					}
-				} catch { /* ignore */ }
+				} catch {
+					/* ignore */
+				}
 			}),
 			// A banned user's uploads were hidden — drop all their cards live.
 			onSseEvent('user-hidden', (data) => {
@@ -263,7 +275,9 @@
 					const { user_id } = JSON.parse(data) as { user_id: string };
 					uploads = uploads.filter((u) => u.user_id !== user_id);
 					if (selectedUpload && selectedUpload.user_id === user_id) selectedUpload = null;
-				} catch { /* ignore */ }
+				} catch {
+					/* ignore */
+				}
 			}),
 			// Patch the single affected card in place from the SSE payload instead of
 			// refetching page 1 — a busy event fires these constantly and a full reload
@@ -308,7 +322,9 @@
 					// disconnected or lagged (a `resync`). Debounced page-1 refresh merges
 					// those fresh counts in place without disturbing scroll.
 					scheduleInPlaceRefresh();
-				} catch { /* ignore */ }
+				} catch {
+					/* ignore */
+				}
 			})
 		);

@@ -345,7 +361,9 @@
 			if (selectedUpload?.id === payload.upload_id) {
 				selectedUpload = { ...selectedUpload, [field]: value };
 			}
-		} catch { /* ignore malformed payloads */ }
+		} catch {
+			/* ignore malformed payloads */
+		}
 	}

 	// Debounced page-1 fetch that *merges* (updates existing cards in place, prepends
@@ -361,6 +379,7 @@

 	async function refreshFeedInPlace() {
 		try {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
 			const params = new URLSearchParams();
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
 			params.set('limit', '20');
@@ -381,6 +400,7 @@
 		// only in the pill's own onclick, or a pull-to-refresh leaves it stranded.
 		if (refresh) feedStale = false;
 		try {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
 			const params = new URLSearchParams();
 			if (!refresh && nextCursor) params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
@@ -400,6 +420,7 @@
 		if (!nextCursor || loadingMore) return;
 		loadingMore = true;
 		try {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- local query-string builder for a fetch; not reactive state.
 			const params = new URLSearchParams();
 			params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
@@ -447,7 +468,9 @@
 			// local state. On a second device (same recovered user), the `like-update`
 			// broadcast only carries `like_count` — so a blind invert would drift
 			// `liked_by_me` until refresh. The response gives both, exactly.
-			const res = await api.post<{ liked: boolean; like_count: number | null }>(`/upload/${id}/like`);
+			const res = await api.post<{ liked: boolean; like_count: number | null }>(
+				`/upload/${id}/like`
+			);
 			vibrate(10);
 			// like_count is null when the server's count query hiccuped — keep the current
 			// count in that case rather than adopting a wrong number.
@@ -460,7 +483,7 @@
 				selectedUpload = {
 					...selectedUpload,
 					liked_by_me: res.liked,
-					like_count: res.like_count ?? selectedUpload.like_count,
+					like_count: res.like_count ?? selectedUpload.like_count
 				};
 			}
 		} catch (e) {
@@ -510,14 +533,18 @@
 	<!-- Live pull-progress indicator: grows during the drag, rotates past threshold,
 	     swaps to a spinner once the network refresh kicks off. -->
 	{#if refreshing || pullProgress > 0}
-		<div class="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] z-40 flex justify-center">
+		<div
+			class="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] z-40 flex justify-center"
+		>
 			<div
 				class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300"
 				style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}"
 			>
 				{#if refreshing}
 					<span class="inline-flex items-center gap-2">
-						<span class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-blue-200 border-t-blue-600 dark:border-blue-700 dark:border-t-blue-300"></span>
+						<span
+							class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-blue-200 border-t-blue-600 dark:border-blue-700 dark:border-t-blue-300"
+						></span>
 						Aktualisiere…
 					</span>
 				{:else}
@@ -530,25 +557,36 @@
 						stroke-width="2.5"
 						aria-hidden="true"
 					>
-						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
+						/>
 					</svg>
 				{/if}
 			</div>
 		</div>
 	{/if}
 	{#if feedStale}
-		<div class="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] z-40 flex justify-center">
+		<div
+			class="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] z-40 flex justify-center"
+		>
 			<button
 				type="button"
 				class="pointer-events-auto rounded-full bg-blue-600 px-4 py-1.5 text-xs font-semibold text-white shadow-lg hover:bg-blue-700"
-				onclick={() => { feedStale = false; void loadFeed(true); }}
+				onclick={() => {
+					feedStale = false;
+					void loadFeed(true);
+				}}
 			>
 				Neue Beiträge – tippen zum Aktualisieren
 			</button>
 		</div>
 	{/if}
 	<!-- Sticky header — opaque fallback for browsers without backdrop-filter. -->
-	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 pt-[env(safe-area-inset-top)] backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900">
+	<div
+		class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 pt-[env(safe-area-inset-top)] backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900"
+	>
 		<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
 			<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>

@@ -560,9 +598,23 @@
 					aria-label="Diashow starten"
 					title="Diashow"
 				>
-					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z" />
-						<path stroke-linecap="round" stroke-linejoin="round" d="M10 9.75 14.5 12 10 14.25v-4.5Z" />
+					<svg
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M10 9.75 14.5 12 10 14.25v-4.5Z"
+						/>
 					</svg>
 				</button>

@@ -570,22 +622,46 @@
 				<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
 					<button
 						onclick={() => switchView('list')}
-						class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+						class="rounded-md p-1.5 transition-colors {viewMode === 'list'
+							? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100'
+							: 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
 						aria-label="Listenansicht"
 					>
 						<!-- bars-3 -->
-						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+						<svg
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+							/>
 						</svg>
 					</button>
 					<button
 						onclick={() => switchView('grid')}
-						class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+						class="rounded-md p-1.5 transition-colors {viewMode === 'grid'
+							? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100'
+							: 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
 						aria-label="Rasteransicht"
 					>
 						<!-- squares-2x2 -->
-						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+						<svg
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="1.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
+							/>
 						</svg>
 					</button>
 				</div>
@@ -603,9 +679,21 @@
 		{#if viewMode === 'grid'}
 			<div class="mx-auto max-w-2xl px-4 pb-3">
 				<div class="relative">
-					<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200 dark:border-gray-700 dark:bg-gray-800 dark:focus-within:border-blue-500 dark:focus-within:bg-gray-800">
-						<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+					<div
+						class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200 dark:border-gray-700 dark:bg-gray-800 dark:focus-within:border-blue-500 dark:focus-within:bg-gray-800"
+					>
+						<svg
+							class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+							/>
 						</svg>
 						<input
 							type="search"
@@ -614,7 +702,10 @@
 							onfocus={(e) => {
 								openAutocomplete();
 								// Push the input above the virtual keyboard so suggestions stay visible.
-								(e.currentTarget as HTMLInputElement).scrollIntoView({ block: 'center', behavior: 'smooth' });
+								(e.currentTarget as HTMLInputElement).scrollIntoView({
+									block: 'center',
+									behavior: 'smooth'
+								});
 							}}
 							onclick={openAutocomplete}
 							oninput={openAutocomplete}
@@ -623,11 +714,19 @@
 						/>
 						{#if searchQuery}
 							<button
-								onclick={() => { searchQuery = ''; }}
+								onclick={() => {
+									searchQuery = '';
+								}}
 								class="shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
 								aria-label="Suche löschen"
 							>
-								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<svg
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
 									<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 								</svg>
 							</button>
@@ -663,8 +762,18 @@
 									onclick={() => selectSuggestion(item)}
 								>
 									{#if item.type === 'user'}
-										<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-											<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+										<svg
+											class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+											stroke-width="1.5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+											/>
 										</svg>
 										<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
 									{:else}
@@ -680,18 +789,33 @@
 				<!-- Active filter chips -->
 				{#if activeFilters.length > 0}
 					<div class="mt-2 flex flex-wrap items-center gap-1.5">
-						{#each activeFilters as filter}
-							<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+						{#each activeFilters as filter (filter.type + ':' + filter.value)}
+							<span
+								class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
+							>
 								{filter.type === 'tag' ? '#' : ''}{filter.value}
-								<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100" aria-label="Filter entfernen">
-									<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+								<button
+									onclick={() => removeFilter(filter)}
+									class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100"
+									aria-label="Filter entfernen"
+								>
+									<svg
+										class="h-3 w-3"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										stroke-width="2.5"
+									>
 										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 									</svg>
 								</button>
 							</span>
 						{/each}
 						{#if activeFilters.length >= 2}
-							<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
+							<button
+								onclick={clearFilters}
+								class="text-xs text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+							>
 								Alle löschen
 							</button>
 						{/if}
@@ -705,12 +829,12 @@
 	{#if initialLoading && uploads.length === 0}
 		<div class="mx-auto max-w-2xl" data-testid="feed-skeleton">
 			{#if viewMode === 'list'}
-				{#each Array(3) as _}
+				{#each Array(3) as _, i (i)}
 					<Skeleton variant="card" />
 				{/each}
 			{:else}
 				<div class="grid grid-cols-3 gap-0.5">
-					{#each Array(9) as _}
+					{#each Array(9) as _, i (i)}
 						<Skeleton variant="tile" />
 					{/each}
 				</div>
@@ -726,7 +850,7 @@
 		<div class="mx-auto max-w-2xl">
 			<VirtualFeed
 				mode="list"
-				uploads={uploads}
+				{uploads}
 				{myUserId}
 				onlike={handleLike}
 				oncomment={openComments}
@@ -739,11 +863,19 @@
 		<div class="mx-auto max-w-2xl">
 			{#if displayUploads.length === 0}
 				<div class="py-16 text-center">
-					<p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p>
+					<p class="text-sm text-gray-400 dark:text-gray-500">
+						Keine Treffer für die gewählten Filter.
+					</p>
 					{#if nextCursor}
-						<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Es sind noch nicht alle Beiträge geladen — scrolle weiter, um mehr zu durchsuchen.</p>
+						<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
+							Es sind noch nicht alle Beiträge geladen — scrolle weiter, um mehr zu durchsuchen.
+						</p>
 					{/if}
-					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button>
+					<button
+						onclick={clearFilters}
+						class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400"
+						>Filter zurücksetzen</button
+					>
 				</div>
 			{:else}
 				<VirtualFeed
@@ -764,7 +896,9 @@
 		<div bind:this={sentinel} class="h-4"></div>
 		{#if loadingMore}
 			<div class="py-4 text-center">
-				<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
+				<div
+					class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"
+				></div>
 			</div>
 		{/if}
 	</div>
--- a/frontend/src/routes/host/+page.svelte
+++ b/frontend/src/routes/host/+page.svelte
@@ -61,8 +61,10 @@
 	// `&&` (not `||`), else a one-half failure stays stuck on "wird erstellt…" forever and the
 	// host never sees the "re-release" recovery hint.
 	let exportGenerating = $derived(
-		!!exportInfo?.released && !exportReady &&
-			exportInfo?.zip?.status !== 'failed' && exportInfo?.html?.status !== 'failed'
+		!!exportInfo?.released &&
+			!exportReady &&
+			exportInfo?.zip?.status !== 'failed' &&
+			exportInfo?.html?.status !== 'failed'
 	);
 	let exportProgress = $derived(
 		Math.min(exportInfo?.zip?.progress_pct ?? 0, exportInfo?.html?.progress_pct ?? 0)
@@ -415,13 +417,23 @@
 <!-- One-time PIN display modal — focus-trapped, aria-modal, Escape-dismissable. -->
 <Modal open={pinModal !== null} titleId="host-pin-modal-title" onClose={() => (pinModal = null)}>
 	{#if pinModal}
-		<h2 id="host-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
+		<h2 id="host-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">
+			Neue PIN für {pinModal.name}
+		</h2>
 		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
+			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie
+			verworfen.
 		</p>
-		<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
-			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
-			<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60">
+		<div
+			class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30"
+		>
+			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+				>{pinModal.pin}</span
+			>
+			<button
+				onclick={copyPinModal}
+				class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60"
+			>
 				Kopieren
 			</button>
 		</div>
@@ -437,11 +449,13 @@
 <!-- Ban modal — ban always hides now, so this is a plain confirm (no checkbox). -->
 <Modal open={banTarget !== null} titleId="host-ban-modal-title" onClose={() => (banTarget = null)}>
 	{#if banTarget}
-		<h2 id="host-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
+		<h2 id="host-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">
+			Benutzer sperren
+		</h2>
 		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			<strong>{banTarget.display_name}</strong> wird gesperrt: alle Uploads verschwinden aus
-			Galerie, Diashow und Export, und Hochladen, Liken und Kommentieren werden blockiert. Der
-			Lesezugriff (Feed ansehen, Keepsake herunterladen) bleibt bestehen. Rückgängig machbar über „Entsperren“.
+			<strong>{banTarget.display_name}</strong> wird gesperrt: alle Uploads verschwinden aus Galerie,
+			Diashow und Export, und Hochladen, Liken und Kommentieren werden blockiert. Der Lesezugriff (Feed
+			ansehen, Keepsake herunterladen) bleibt bestehen. Rückgängig machbar über „Entsperren“.
 		</p>
 		<div class="flex gap-2">
 			<button
@@ -463,11 +477,17 @@

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
+	<div
+		class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900"
+	>
 		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
 			<IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+					/>
 				</svg>
 			</IconButton>
 			<div class="min-w-0">
@@ -483,15 +503,22 @@
 		{#if loading}
 			<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
 		{:else if error}
-			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300">{error}</div>
+			<div
+				class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300"
+			>
+				{error}
+			</div>
 		{:else if event}
-
 			<!-- ── PIN-Reset-Anfragen ──────────────────────────────────────── -->
 			{#if pinResetRequests.length > 0}
-				<div class="overflow-hidden rounded-xl border border-amber-300 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30">
+				<div
+					class="overflow-hidden rounded-xl border border-amber-300 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30"
+				>
 					<div class="border-b border-amber-200 px-5 py-3 dark:border-amber-900">
 						<h2 class="font-semibold text-amber-900 dark:text-amber-200">
-							PIN vergessen — {pinResetRequests.length} Anfrage{pinResetRequests.length === 1 ? '' : 'n'}
+							PIN vergessen — {pinResetRequests.length} Anfrage{pinResetRequests.length === 1
+								? ''
+								: 'n'}
 						</h2>
 						<p class="mt-0.5 text-xs text-amber-700 dark:text-amber-400">
 							Prüfe die Identität, bevor du eine PIN zurücksetzt.
@@ -500,7 +527,9 @@
 					<ul class="divide-y divide-amber-200 dark:divide-amber-900">
 						{#each pinResetRequests as req (req.id)}
 							<li class="flex items-center justify-between gap-3 px-5 py-3">
-								<span class="min-w-0 truncate font-medium text-amber-900 dark:text-amber-100">{req.display_name}</span>
+								<span class="min-w-0 truncate font-medium text-amber-900 dark:text-amber-100"
+									>{req.display_name}</span
+								>
 								<div class="flex shrink-0 gap-2">
 									<button
 										onclick={() => dismissPinRequest(req)}
@@ -522,7 +551,9 @@
 			{/if}

 			<!-- ── Statistiken ─────────────────────────────────────────────── -->
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+			<div
+				class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+			>
 				<button
 					onclick={() => (statsOpen = !statsOpen)}
 					aria-expanded={statsOpen}
@@ -530,30 +561,51 @@
 				>
 					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
 					<svg
-						class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
-						fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+						class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {statsOpen
+							? 'rotate-180'
+							: ''}"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 					</svg>
 				</button>
-				<div class="overflow-hidden transition-[max-height] duration-200 {statsOpen ? 'max-h-[500px]' : 'max-h-0'}">
-					<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 dark:border-gray-700 sm:grid-cols-4">
+				<div
+					class="overflow-hidden transition-[max-height] duration-200 {statsOpen
+						? 'max-h-[500px]'
+						: 'max-h-0'}"
+				>
+					<div
+						class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 dark:border-gray-700 sm:grid-cols-4"
+					>
 						<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
 							<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{users.length}</p>
 							<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Teilnehmer</p>
 						</div>
 						<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
-							<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
+							<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+								{users.reduce((s, u) => s + u.upload_count, 0)}
+							</p>
 							<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
 						</div>
 						<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
-							<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}">
+							<p
+								class="text-2xl font-bold {event.uploads_locked
+									? 'text-red-600 dark:text-red-400'
+									: 'text-green-600 dark:text-green-400'}"
+							>
 								{event.uploads_locked ? 'Gesperrt' : 'Offen'}
 							</p>
 							<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
 						</div>
 						<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
-							<p class="text-2xl font-bold {event.export_released ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-500'}">
+							<p
+								class="text-2xl font-bold {event.export_released
+									? 'text-blue-600 dark:text-blue-400'
+									: 'text-gray-400 dark:text-gray-500'}"
+							>
 								{event.export_released ? 'Ja' : 'Nein'}
 							</p>
 							<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Freigegeben</p>
@@ -563,7 +615,9 @@
 			</div>

 			<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+			<div
+				class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+			>
 				<button
 					onclick={() => (settingsOpen = !settingsOpen)}
 					aria-expanded={settingsOpen}
@@ -571,32 +625,47 @@
 				>
 					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
 					<svg
-						class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
-						fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+						class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {settingsOpen
+							? 'rotate-180'
+							: ''}"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 					</svg>
 				</button>
-				<div class="overflow-hidden transition-[max-height] duration-200 {settingsOpen ? 'max-h-[500px]' : 'max-h-0'}">
+				<div
+					class="overflow-hidden transition-[max-height] duration-200 {settingsOpen
+						? 'max-h-[500px]'
+						: 'max-h-0'}"
+				>
 					<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5 dark:border-gray-700">
 						<button
 							onclick={toggleEventLock}
 							class="rounded-lg px-4 py-2 text-sm font-medium transition
-								{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400' : 'bg-amber-500 text-white hover:bg-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400'}"
+								{event.uploads_locked
+								? 'bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400'
+								: 'bg-amber-500 text-white hover:bg-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400'}"
 						>
 							{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
 						</button>
 						<button
-							onclick={() => (confirmAction = {
-								title: 'Galerie freigeben?',
-								message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
-								confirmLabel: 'Freigeben',
-								tone: 'danger',
-								run: releaseGallery
-							})}
+							onclick={() =>
+								(confirmAction = {
+									title: 'Galerie freigeben?',
+									message:
+										'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
+									confirmLabel: 'Freigeben',
+									tone: 'danger',
+									run: releaseGallery
+								})}
 							disabled={event.export_released}
 							class="rounded-lg px-4 py-2 text-sm font-medium transition
-								{event.export_released ? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}"
+								{event.export_released
+								? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500'
+								: 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}"
 						>
 							{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
 						</button>
@@ -608,14 +677,25 @@
 					{#if event.export_released}
 						<div class="mt-3 rounded-lg bg-gray-50 px-3 py-2 text-xs dark:bg-gray-800/60">
 							{#if exportGenerating}
-								<p class="font-medium text-amber-700 dark:text-amber-300">Keepsake wird erstellt… {exportProgress}%</p>
-								<div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-									<div class="h-full rounded-full bg-amber-500 transition-all" style="width: {exportProgress}%"></div>
+								<p class="font-medium text-amber-700 dark:text-amber-300">
+									Keepsake wird erstellt… {exportProgress}%
+								</p>
+								<div
+									class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+								>
+									<div
+										class="h-full rounded-full bg-amber-500 transition-all"
+										style="width: {exportProgress}%"
+									></div>
 								</div>
 							{:else if exportReady}
 								<p class="flex items-center justify-between gap-2">
-									<span class="font-medium text-green-700 dark:text-green-300">Keepsake ist bereit.</span>
-									<a href="/export" class="font-medium text-blue-600 underline dark:text-blue-400">Zum Download</a>
+									<span class="font-medium text-green-700 dark:text-green-300"
+										>Keepsake ist bereit.</span
+									>
+									<a href="/export" class="font-medium text-blue-600 underline dark:text-blue-400"
+										>Zum Download</a
+									>
 								</p>
 							{:else}
 								<p class="text-red-700 dark:text-red-300">Keepsake-Erstellung fehlgeschlagen.</p>
@@ -656,8 +736,8 @@
 								data-testid="export-rebuild"
 								class="mt-2 rounded-lg px-3 py-1.5 text-xs font-medium transition disabled:opacity-50
 									{exportReady
-										? 'text-gray-500 underline dark:text-gray-400'
-										: 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400'}"
+									? 'text-gray-500 underline dark:text-gray-400'
+									: 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400'}"
 							>
 								{rebuilding
 									? 'Wird gestartet…'
@@ -671,7 +751,9 @@
 			</div>

 			<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+			<div
+				class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+			>
 				<button
 					onclick={() => (usersOpen = !usersOpen)}
 					aria-expanded={usersOpen}
@@ -679,19 +761,40 @@
 				>
 					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
 					<svg
-						class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
-						fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+						class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {usersOpen
+							? 'rotate-180'
+							: ''}"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="2"
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 					</svg>
 				</button>
-				<div class="overflow-hidden transition-[max-height] duration-300 {usersOpen ? 'max-h-[9999px]' : 'max-h-0'}">
+				<div
+					class="overflow-hidden transition-[max-height] duration-300 {usersOpen
+						? 'max-h-[9999px]'
+						: 'max-h-0'}"
+				>
 					<div class="border-t border-gray-100 dark:border-gray-700">
 						<!-- Search -->
 						<div class="px-4 py-3">
-							<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900">
-								<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+							<div
+								class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900"
+							>
+								<svg
+									class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+									/>
 								</svg>
 								<input
 									type="search"
@@ -702,25 +805,40 @@
 							</div>
 						</div>
 						{#if filteredUsers.length === 0}
-							<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine Treffer.</p>
+							<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
+								Keine Treffer.
+							</p>
 						{:else}
 							<div class="divide-y divide-gray-100 dark:divide-gray-700">
-								{#each filteredUsers as user}
+								{#each filteredUsers as user (user.id)}
 									<div class="flex items-center gap-3 px-5 py-3">
 										<div class="min-w-0 flex-1">
 											<div class="flex flex-wrap items-center gap-1.5">
-												<span class="font-medium text-gray-900 dark:text-gray-100">{user.display_name}</span>
+												<span class="font-medium text-gray-900 dark:text-gray-100"
+													>{user.display_name}</span
+												>
 												{#if user.role === 'host'}
-													<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">Host</span>
+													<span
+														class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
+														>Host</span
+													>
 												{:else if user.role === 'admin'}
-													<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">Admin</span>
+													<span
+														class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200"
+														>Admin</span
+													>
 												{/if}
 												{#if user.is_banned}
-													<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200">Gesperrt</span>
+													<span
+														class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200"
+														>Gesperrt</span
+													>
 												{/if}
 											</div>
 											<p class="text-xs text-gray-400 dark:text-gray-500">
-												{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
+												{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(
+													user.total_upload_bytes
+												)}
 											</p>
 										</div>
 										<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
@@ -729,18 +847,19 @@
 													<!-- Only show Entsperren to someone allowed to act on this user (a plain
 													     host can't unban a peer host — that's an admin-only action, F1). -->
 													{#if canModerate(user)}
-													<button
-														onclick={() => (confirmAction = {
-															title: 'Sperre aufheben?',
-															message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
-															confirmLabel: 'Entsperren',
-															tone: 'default',
-															run: () => unban(user)
-														})}
-														class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
-													>
-														Entsperren
-													</button>
+														<button
+															onclick={() =>
+																(confirmAction = {
+																	title: 'Sperre aufheben?',
+																	message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
+																	confirmLabel: 'Entsperren',
+																	tone: 'default',
+																	run: () => unban(user)
+																})}
+															class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+														>
+															Entsperren
+														</button>
 													{/if}
 												{:else if user.id !== myUserId}
 													<!-- Never render target-actions (promote/demote/PIN/ban) on the
@@ -749,13 +868,14 @@
 													     would only ever fail. -->
 													{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
 														<button
-															onclick={() => (confirmAction = {
-																title: 'Zum Host befördern?',
-																message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
-																confirmLabel: 'Befördern',
-																tone: 'default',
-																run: () => promoteToHost(user)
-															})}
+															onclick={() =>
+																(confirmAction = {
+																	title: 'Zum Host befördern?',
+																	message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
+																	confirmLabel: 'Befördern',
+																	tone: 'default',
+																	run: () => promoteToHost(user)
+																})}
 															class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"
 														>
 															Host
@@ -765,13 +885,14 @@
 														<!-- Only an admin may demote a host (F1). A plain host demoting a
 														     peer host is a 403 on the backend, so the button is hidden. -->
 														<button
-															onclick={() => (confirmAction = {
-																title: 'Zum Gast degradieren?',
-																message: `${user.display_name} verliert alle Host-Rechte.`,
-																confirmLabel: 'Degradieren',
-																tone: 'danger',
-																run: () => demoteToGuest(user)
-															})}
+															onclick={() =>
+																(confirmAction = {
+																	title: 'Zum Gast degradieren?',
+																	message: `${user.display_name} verliert alle Host-Rechte.`,
+																	confirmLabel: 'Degradieren',
+																	tone: 'danger',
+																	run: () => demoteToGuest(user)
+																})}
 															class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
 														>
 															Degradieren
--- a/frontend/src/routes/join/+page.svelte
+++ b/frontend/src/routes/join/+page.svelte
@@ -67,10 +67,10 @@
 		recoveryLoading = true;
 		recoveryError = '';
 		try {
-			const res = await api.post<{ jwt: string; user_id: string }>(
-				'/recover',
-				{ display_name: takenName, pin: recoveryPin.trim() }
-			);
+			const res = await api.post<{ jwt: string; user_id: string }>('/recover', {
+				display_name: takenName,
+				pin: recoveryPin.trim()
+			});
 			setAuth(res.jwt, recoveryPin.trim(), res.user_id, takenName);
 			goto('/feed');
 		} catch (e) {
@@ -141,14 +141,17 @@

 <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
 	<div class="w-full max-w-sm">
-
 		{#if nameTaken}
 			<!-- Name-taken state: sign in with PIN or choose a different name -->
-			<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30">
-				<p class="font-semibold text-amber-900 dark:text-amber-200">„{takenName}" ist bereits vergeben.</p>
+			<div
+				class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30"
+			>
+				<p class="font-semibold text-amber-900 dark:text-amber-200">
+					„{takenName}" ist bereits vergeben.
+				</p>
 				<p class="mt-1 text-sm text-amber-800 dark:text-amber-300/90">
-					Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu
-					(„{takenName} M." oder „{takenName} aus Berlin").
+					Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu („{takenName}
+					M." oder „{takenName} aus Berlin").
 				</p>
 			</div>

@@ -156,7 +159,12 @@
 				Falls du das bist, melde dich mit deinem PIN an:
 			</p>

-			<form onsubmit={(e) => { e.preventDefault(); handleInlineRecover(); }}>
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleInlineRecover();
+				}}
+			>
 				<input
 					type="text"
 					value={recoveryPin}
@@ -170,7 +178,9 @@
 				/>

 				{#if recoveryError}
-					<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recovery-error">{recoveryError}</p>
+					<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recovery-error">
+						{recoveryError}
+					</p>
 				{/if}

 				<button
@@ -193,9 +203,11 @@

 			<!-- Forgot the PIN entirely — ask a host to reset it in-app. -->
 			{#if pinRequestSent}
-				<p class="mt-3 rounded-lg bg-green-50 px-4 py-3 text-center text-sm text-green-700 dark:bg-green-950/30 dark:text-green-300">
-					Anfrage gesendet. Bitte einen Host, deine PIN zurückzusetzen — danach kannst du dich
-					mit der neuen PIN anmelden.
+				<p
+					class="mt-3 rounded-lg bg-green-50 px-4 py-3 text-center text-sm text-green-700 dark:bg-green-950/30 dark:text-green-300"
+				>
+					Anfrage gesendet. Bitte einen Host, deine PIN zurückzusetzen — danach kannst du dich mit
+					der neuen PIN anmelden.
 				</p>
 			{:else}
 				<button
@@ -207,16 +219,29 @@
 					{pinRequestLoading ? 'Wird gesendet…' : 'PIN vergessen? Host um Zurücksetzen bitten'}
 				</button>
 			{/if}
-
 		{:else}
 			<!-- Normal join form -->
-			<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Willkommen!</h1>
+			<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
+				Willkommen!
+			</h1>
 			{#if eventName}
-				<p class="mb-1 text-center text-lg font-semibold text-blue-600 dark:text-blue-400" data-testid="join-event-name">{eventName}</p>
+				<p
+					class="mb-1 text-center text-lg font-semibold text-blue-600 dark:text-blue-400"
+					data-testid="join-event-name"
+				>
+					{eventName}
+				</p>
 			{/if}
-			<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen ein, um dem Event beizutreten.</p>
+			<p class="mb-6 text-center text-gray-600 dark:text-gray-400">
+				Gib deinen Namen ein, um dem Event beizutreten.
+			</p>

-			<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleJoin();
+				}}
+			>
 				<input
 					type="text"
 					bind:value={displayName}
@@ -227,7 +252,9 @@
 				/>

 				{#if error}
-					<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="join-error">{error}</p>
+					<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="join-error">
+						{error}
+					</p>
 				{/if}

 				<button
@@ -241,15 +268,21 @@
 			</form>

 			<p class="mt-4 text-center text-sm">
-				<a href="/recover" data-testid="link-to-recover" class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a>
+				<a
+					href="/recover"
+					data-testid="link-to-recover"
+					class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a
+				>
 			</p>
 		{/if}
-
 	</div>
 </div>

 {#if showPinModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" data-testid="pin-modal">
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+		data-testid="pin-modal"
+	>
 		<div
 			class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900"
 			role="dialog"
@@ -257,13 +290,21 @@
 			aria-labelledby="pin-modal-title"
 			use:focusTrap={{ onclose: closePinModal }}
 		>
-			<h2 id="pin-modal-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
+			<h2 id="pin-modal-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
+				Dein Wiederherstellungs-PIN
+			</h2>
 			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
+				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät
+				wiederherzustellen.
 			</p>

-			<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
-				<span class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100" data-testid="pin-display">{pin}</span>
+			<div
+				class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4 dark:bg-gray-800"
+			>
+				<span
+					class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100"
+					data-testid="pin-display">{pin}</span
+				>
 				<button
 					onclick={copyPin}
 					data-testid="pin-copy"
--- a/frontend/src/routes/recover/+page.svelte
+++ b/frontend/src/routes/recover/+page.svelte
@@ -101,7 +101,9 @@
 	}
 </script>

-<div class="flex min-h-screen flex-col bg-gray-50 px-4 pt-[env(safe-area-inset-top)] dark:bg-gray-950">
+<div
+	class="flex min-h-screen flex-col bg-gray-50 px-4 pt-[env(safe-area-inset-top)] dark:bg-gray-950"
+>
 	<div class="-mx-4 flex items-center px-2 py-3">
 		<IconButton label="Zurück" onclick={goBack} data-testid="recover-back">
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -110,10 +112,19 @@
 		</IconButton>
 	</div>
 	<div class="m-auto w-full max-w-sm">
-		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
-		<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>
+		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
+			Konto wiederherstellen
+		</h1>
+		<p class="mb-6 text-center text-gray-600 dark:text-gray-400">
+			Gib deinen Namen und deinen PIN ein.
+		</p>

-		<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleRecover();
+			}}
+		>
 			<input
 				type="text"
 				bind:value={displayName}
@@ -135,7 +146,9 @@
 			/>

 			{#if error}
-				<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recover-error">{error}</p>
+				<p class="mb-3 text-sm text-red-600 dark:text-red-400" data-testid="recover-error">
+					{error}
+				</p>
 			{/if}

 			<button
@@ -151,8 +164,12 @@
 		<!-- PIN lost entirely (never noted, or reset by a host while offline): a soft dead-end
 		     without this — offer the host-reset request path. -->
 		{#if pinRequestSent}
-			<p class="mt-4 text-center text-sm text-green-700 dark:text-green-400" data-testid="recover-pin-request-sent">
-				Anfrage gesendet. Bitte einen Host, deine PIN zurückzusetzen — komm danach mit der neuen PIN zurück.
+			<p
+				class="mt-4 text-center text-sm text-green-700 dark:text-green-400"
+				data-testid="recover-pin-request-sent"
+			>
+				Anfrage gesendet. Bitte einen Host, deine PIN zurückzusetzen — komm danach mit der neuen PIN
+				zurück.
 			</p>
 		{:else}
 			<button
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -13,9 +13,8 @@
 	import { vibrate } from '$lib/haptics';
 	import type { PendingFile } from '$lib/pending-upload-store';

-	interface StagedFile extends PendingFile {
-		// previewUrl and file inherited from PendingFile
-	}
+	// StagedFile is just PendingFile under a domain-specific name (previewUrl + file).
+	type StagedFile = PendingFile;

 	let stagedFiles = $state<StagedFile[]>([]);
 	let caption = $state('');
@@ -138,7 +137,9 @@
 <!-- Full-screen composer — bottom nav is suppressed -->
 <div class="flex min-h-screen flex-col bg-white dark:bg-gray-950">
 	<!-- Header -->
-	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] dark:border-gray-800">
+	<div
+		class="flex items-center justify-between border-b border-gray-100 px-4 py-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] dark:border-gray-800"
+	>
 		<IconButton label="Abbrechen" onclick={cancel}>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
@@ -161,10 +162,14 @@
 		<!-- Thumbnail strip -->
 		{#if stagedFiles.length > 0}
 			<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
-				{#each stagedFiles as sf, i}
-					<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
+				{#each stagedFiles as sf, i (sf.previewUrl)}
+					<div
+						class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800"
+					>
 						{#if isVideo(sf.file)}
-							<div class="flex h-full w-full items-center justify-center bg-gray-800 dark:bg-gray-700">
+							<div
+								class="flex h-full w-full items-center justify-center bg-gray-800 dark:bg-gray-700"
+							>
 								<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
 									<path d="M8 5v14l11-7z" />
 								</svg>
@@ -177,7 +182,13 @@
 							class="absolute right-1 top-1 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white"
 							aria-label="Entfernen"
 						>
-							<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+							<svg
+								class="h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								stroke-width="3"
+							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 							</svg>
 						</button>
@@ -188,12 +199,24 @@
 		{:else}
 			<!-- No files: prompt to go back and pick some -->
 			<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
-				<svg class="h-16 w-16 text-gray-200 dark:text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M9 9.75h.008v.008H9V9.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
+				<svg
+					class="h-16 w-16 text-gray-200 dark:text-gray-700"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M9 9.75h.008v.008H9V9.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
+					/>
 				</svg>
 				<div>
 					<p class="font-medium text-gray-500 dark:text-gray-400">Keine Dateien ausgewählt</p>
-					<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Geh zurück und tippe auf den Plus-Button.</p>
+					<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">
+						Geh zurück und tippe auf den Plus-Button.
+					</p>
 				</div>
 				<button
 					onclick={cancel}
@@ -225,8 +248,10 @@
 		<!-- Quick-tag chips (derived from typed caption) -->
 		{#if captionTags.length > 0}
 			<div class="flex flex-wrap gap-1.5 px-4 pt-2">
-				{#each captionTags as tag}
-					<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-950/40 dark:text-blue-300">
+				{#each captionTags as tag (tag)}
+					<span
+						class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-950/40 dark:text-blue-300"
+					>
 						#{tag}
 					</span>
 				{/each}
@@ -237,8 +262,17 @@
 		{#if $quotaStore.enabled && $quotaStore.limit_bytes != null}
 			<div class="px-4 pt-3 text-xs text-gray-500 dark:text-gray-400">
 				<div class="flex items-center justify-between">
-					<span>Speicher: {formatBytes($quotaStore.used_bytes + totalStagedBytes)} / {formatBytes($quotaStore.limit_bytes)}</span>
-					<span class:text-amber-600={quotaPercent >= 80} class:dark:text-amber-400={quotaPercent >= 80} class:text-red-600={quotaPercent >= 95} class:dark:text-red-400={quotaPercent >= 95}>
+					<span
+						>Speicher: {formatBytes($quotaStore.used_bytes + totalStagedBytes)} / {formatBytes(
+							$quotaStore.limit_bytes
+						)}</span
+					>
+					<span
+						class:text-amber-600={quotaPercent >= 80}
+						class:dark:text-amber-400={quotaPercent >= 80}
+						class:text-red-600={quotaPercent >= 95}
+						class:dark:text-red-400={quotaPercent >= 95}
+					>
 						{Math.round(quotaPercent)}%
 					</span>
 				</div>
@@ -252,7 +286,9 @@
 					></div>
 				</div>
 				{#if quotaPercent >= 100}
-					<p class="mt-1 font-medium text-red-600 dark:text-red-400">Limit erreicht — bitte alte Beiträge löschen.</p>
+					<p class="mt-1 font-medium text-red-600 dark:text-red-400">
+						Limit erreicht — bitte alte Beiträge löschen.
+					</p>
 				{:else if quotaPercent >= 95}
 					<p class="mt-1 font-medium text-amber-600 dark:text-amber-400">Fast voll.</p>
 				{/if}
@@ -285,15 +321,26 @@
 		>
 			{#if submitting}
 				<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+					></path>
 				</svg>
 				Wird hochgeladen…
 			{:else}
 				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+					/>
 				</svg>
-				{stagedFiles.length > 0 ? `${stagedFiles.length} Datei${stagedFiles.length > 1 ? 'en' : ''} hochladen` : 'Hochladen'}
+				{stagedFiles.length > 0
+					? `${stagedFiles.length} Datei${stagedFiles.length > 1 ? 'en' : ''} hochladen`
+					: 'Hochladen'}
 			{/if}
 		</button>
 	</div>
--- a/frontend/src/tailwind-theme.css
+++ b/frontend/src/tailwind-theme.css
@@ -7,7 +7,7 @@
 * here becomes a `bg-primary`, `text-accent`, `rounded-card`, etc.
 */

-@import "tailwindcss";
+@import 'tailwindcss';

 /* Class-based dark variant. Tailwind v4 defaults to `prefers-color-scheme`; we want
 * the user's explicit selection (saved in `theme-store.ts`) to win, so we re-bind
@@ -16,45 +16,45 @@
@custom-variant dark (&:where(.dark, .dark *));

@theme {
-    /* Brand palette — the blue used for primary buttons, FAB, active tabs. */
-    --color-primary-50:  #eff6ff;
-    --color-primary-100: #dbeafe;
-    --color-primary-500: #3b82f6;
-    --color-primary-600: #2563eb;
-    --color-primary-700: #1d4ed8;
+	/* Brand palette — the blue used for primary buttons, FAB, active tabs. */
+	--color-primary-50: #eff6ff;
+	--color-primary-100: #dbeafe;
+	--color-primary-500: #3b82f6;
+	--color-primary-600: #2563eb;
+	--color-primary-700: #1d4ed8;

-    /* Accent for hashtag chips and highlights. */
-    --color-accent-500:  #a855f7;
-    --color-accent-600:  #9333ea;
+	/* Accent for hashtag chips and highlights. */
+	--color-accent-500: #a855f7;
+	--color-accent-600: #9333ea;

-    /* Surface scale matches the existing gray-* usage. Listed here so the viewer
+	/* Surface scale matches the existing gray-* usage. Listed here so the viewer
     * picks up the same shade in case Tailwind defaults ever drift. */
-    --color-surface-0:   #ffffff;
-    --color-surface-50:  #f9fafb;
-    --color-surface-100: #f3f4f6;
-    --color-surface-200: #e5e7eb;
+	--color-surface-0: #ffffff;
+	--color-surface-50: #f9fafb;
+	--color-surface-100: #f3f4f6;
+	--color-surface-200: #e5e7eb;

-    /* Typography. Keepsake should feel like the live app — same defaults. */
-    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Courier New", monospace;
+	/* Typography. Keepsake should feel like the live app — same defaults. */
+	--font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Courier New', monospace;

-    /* Radii — keep cards and bottom sheets consistent. */
-    --radius-card:  0.75rem;   /* rounded-card */
-    --radius-sheet: 1.25rem;   /* rounded-sheet */
+	/* Radii — keep cards and bottom sheets consistent. */
+	--radius-card: 0.75rem; /* rounded-card */
+	--radius-sheet: 1.25rem; /* rounded-sheet */
 }

 /* Baseline body background + text colour so pages that haven't been re-themed yet
 * at least don't render light-on-light or dark-on-dark. Pages and cards still set
 * their own backgrounds via `bg-*` utilities, but this catches any gaps. */
@layer base {
-    html {
-        background-color: #f9fafb;   /* matches bg-gray-50 */
-        color: #111827;              /* matches text-gray-900 */
-        color-scheme: light;
-    }
-    html.dark {
-        background-color: #030712;   /* matches bg-gray-950 */
-        color: #f3f4f6;              /* matches text-gray-100 */
-        color-scheme: dark;
-    }
+	html {
+		background-color: #f9fafb; /* matches bg-gray-50 */
+		color: #111827; /* matches text-gray-900 */
+		color-scheme: light;
+	}
+	html.dark {
+		background-color: #030712; /* matches bg-gray-950 */
+		color: #f3f4f6; /* matches text-gray-100 */
+		color-scheme: dark;
+	}
 }
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -5,14 +5,16 @@ import { fileURLToPath } from 'node:url';
 // full SvelteKit plugin). It only needs to resolve the two aliases our pure-logic
 // modules use: `$lib` and SvelteKit's `$app/environment` virtual module (stubbed).
 export default defineConfig({
-  resolve: {
-    alias: {
-      '$app/environment': fileURLToPath(new URL('./src/test/mocks/app-environment.ts', import.meta.url)),
-      $lib: fileURLToPath(new URL('./src/lib', import.meta.url)),
-    },
-  },
-  test: {
-    environment: 'node',
-    include: ['src/**/*.test.ts'],
-  },
+	resolve: {
+		alias: {
+			'$app/environment': fileURLToPath(
+				new URL('./src/test/mocks/app-environment.ts', import.meta.url)
+			),
+			$lib: fileURLToPath(new URL('./src/lib', import.meta.url))
+		}
+	},
+	test: {
+		environment: 'node',
+		include: ['src/**/*.test.ts']
+	}
 });