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

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

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

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

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

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

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

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

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

frontend/src/lib/components/BottomNav.svelte

@@ -9,7 +9,7 @@
 
 <!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
 <nav
-	class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md"
+	class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90"
 	style="padding-bottom: env(safe-area-inset-bottom)"
 >
 	<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
@@ -17,7 +17,7 @@
 		<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' : 'text-gray-400 hover:text-gray-600'}"
+				{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">
@@ -53,7 +53,7 @@
 		<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' : 'text-gray-400 hover:text-gray-600'}"
+				{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">

frontend/src/lib/components/FeedGrid.svelte

@@ -1,30 +1,40 @@
 <script lang="ts">
 	import type { FeedUpload } from '$lib/types';
+	import { dataMode } from '$lib/data-mode-store';
+	import { longpress } from '$lib/actions/longpress';
 
 	interface Props {
 		uploads: FeedUpload[];
 		onlike: (id: string) => void;
 		oncomment: (id: string) => void;
 		onselect: (upload: FeedUpload) => void;
+		oncontextmenu?: (upload: FeedUpload) => void;
 		threeCol?: boolean;
 	}
 
-	let { uploads, onlike, oncomment, onselect, threeCol = false }: Props = $props();
+	let { uploads, onlike, oncomment, onselect, oncontextmenu, threeCol = false }: Props =
+		$props();
 
 	function isVideo(mime: string): boolean {
 		return mime.startsWith('video/');
 	}
 
-	function imageUrl(upload: FeedUpload): string {
+	// Grid uses small thumbnails by design even in Original mode — full media is one tap
+	// away in the lightbox, where the data-mode picker decides for real.
+	function tileUrl(upload: FeedUpload): string {
 		if (upload.thumbnail_url) return upload.thumbnail_url;
 		if (upload.preview_url) return upload.preview_url;
-		return '';
+		return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
 	}
 </script>
 
 <div class="grid gap-0.5 {threeCol ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}">
 	{#each uploads as upload (upload.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 dark:bg-gray-800"
+			use:longpress={{ duration: 500 }}
+			onlongpress={() => oncontextmenu?.(upload)}
+		>
 			<button
 				onclick={() => onselect(upload)}
 				class="block h-full w-full"
@@ -32,8 +42,8 @@
 			>
 				{#if isVideo(upload.mime_type)}
 					<div class="flex h-full items-center justify-center bg-gray-800">
-						{#if imageUrl(upload)}
+						{#if tileUrl(upload)}
-							<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" />
+							<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" />
 						{/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">
@@ -41,8 +51,8 @@
 							</svg>
 						</div>
 					</div>
-				{:else if imageUrl(upload)}
+				{:else if tileUrl(upload)}
-					<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
+					<img src={tileUrl(upload)} 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">

frontend/src/lib/components/FeedListCard.svelte

@@ -1,22 +1,32 @@
 <script lang="ts">
 	import type { FeedUpload } from '$lib/types';
+	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
+	import { longpress } from '$lib/actions/longpress';
+	import { doubletap } from '$lib/actions/doubletap';
 
 	interface Props {
 		upload: FeedUpload;
+		isOwn?: boolean;
 		onlike: (id: string) => void;
 		oncomment: (id: string) => void;
 		onselect: (upload: FeedUpload) => void;
+		oncontextmenu?: (upload: FeedUpload) => void;
 	}
 
-	let { upload, onlike, oncomment, onselect }: Props = $props();
+	let {
+		upload,
+		isOwn = false,
+		onlike,
+		oncomment,
+		onselect,
+		oncontextmenu
+	}: Props = $props();
 
 	function isVideo(mime: string): boolean {
 		return mime.startsWith('video/');
 	}
 
-	function mediaUrl(u: FeedUpload): string {
+	const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
-		return u.preview_url ?? u.thumbnail_url ?? '';
-	}
 
 	function relativeTime(iso: string): string {
 		const diff = Date.now() - new Date(iso).getTime();
@@ -40,40 +50,68 @@
 		'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;
 		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
 		return COLORS[hash % COLORS.length];
 	}
+
+	function openContext() {
+		oncontextmenu?.(upload);
+	}
 </script>
 
-<article class="bg-white">
+<article
+	class="bg-white dark:bg-gray-900"
+	use:longpress={{ duration: 500 }}
+	onlongpress={openContext}
+>
 	<!-- Uploader row -->
-	<div class="flex items-center gap-3 px-4 py-3">
+	<div class="flex items-center justify-between gap-3 px-4 py-3">
-		<div
+		<div class="flex min-w-0 items-center gap-3">
-			class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
+			<div
-				{avatarColor(upload.uploader_name)}"
+				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
-		>
+					{avatarColor(upload.uploader_name)}"
-			{initial(upload.uploader_name)}
+			>
-		</div>
+				{initial(upload.uploader_name)}
-		<div class="min-w-0">
+			</div>
-			<p class="truncate text-sm font-semibold text-gray-900">{upload.uploader_name}</p>
+			<div class="min-w-0">
-			<p class="text-xs text-gray-400">{relativeTime(upload.created_at)}</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">{relativeTime(upload.created_at)}</p>
+			</div>
 		</div>
+
+		{#if oncontextmenu}
+			<!-- Desktop kebab — same actions as the mobile long-press context sheet. -->
+			<button
+				type="button"
+				onclick={(e) => { e.stopPropagation(); openContext(); }}
+				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-500 dark:hover: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>
+			</button>
+		{/if}
 	</div>
 
 	<!-- Media -->
 	<button
 		class="block w-full"
 		onclick={() => onselect(upload)}
+		use:doubletap
+		ondoubletap={() => onlike(upload.id)}
 		aria-label="Bild vergrößern"
 	>
 		{#if isVideo(upload.mime_type)}
 			<div class="relative aspect-video w-full bg-gray-900">
-				{#if mediaUrl(upload)}
+				{#if upload.thumbnail_url || upload.preview_url}
-					<img src={mediaUrl(upload)} alt="" class="h-full w-full object-cover opacity-80" />
+					<img
+						src={upload.thumbnail_url ?? upload.preview_url ?? ''}
+						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">
@@ -83,17 +121,17 @@
 					</span>
 				</div>
 			</div>
-		{:else if mediaUrl(upload)}
+		{:else if mediaSrc}
 			<img
-				src={mediaUrl(upload)}
+				src={mediaSrc}
 				alt=""
 				class="w-full object-cover"
 				style="max-height: 80svh"
 				loading="lazy"
 			/>
 		{:else}
-			<div class="flex aspect-square w-full items-center justify-center bg-gray-100">
+			<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" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<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>
@@ -105,7 +143,7 @@
 		<button
 			onclick={() => onlike(upload.id)}
 			class="flex items-center gap-1.5 text-sm font-medium transition-colors
-				{upload.liked_by_me ? 'text-red-500' : 'text-gray-500 hover:text-red-400'}"
+				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 dark:text-gray-400 dark:hover:text-red-400'}"
 		>
 			<svg
 				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
@@ -120,21 +158,24 @@
 		</button>
 		<button
 			onclick={() => oncomment(upload.id)}
-			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500"
+			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 dark:text-gray-400 dark:hover: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" />
 			</svg>
 			{upload.comment_count}
 		</button>
+		{#if isOwn}
+			<span class="ml-auto text-xs text-gray-400 dark:text-gray-500">Eigener Beitrag</span>
+		{/if}
 	</div>
 
 	<!-- Caption -->
 	{#if upload.caption}
-		<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere]">
+		<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere] dark:text-gray-200">
 			{upload.caption}
 		</p>
 	{/if}
 
-	<div class="border-b border-gray-100"></div>
+	<div class="border-b border-gray-100 dark:border-gray-800"></div>
 </article>

frontend/src/lib/components/HashtagChips.svelte

@@ -19,8 +19,8 @@
 			onclick={() => onselect(null)}
 			class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
 				selected === null
-					? 'bg-blue-600 text-white'
+					? 'bg-blue-600 text-white dark:bg-blue-500'
-					: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
 			}"
 		>
 			Alle

frontend/src/lib/components/LightboxModal.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { FeedUpload } from '$lib/types';
-	import { api, ApiError } from '$lib/api';
+	import { api } from '$lib/api';
 	import { getUserId } from '$lib/auth';
+	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
+	import { doubletap } from '$lib/actions/doubletap';
 
 	interface CommentDto {
 		id: string;
@@ -24,6 +26,15 @@
 	let newComment = $state('');
 	let loading = $state(false);
 	let userId = getUserId();
+	let heartBurst = $state(false);
+
+	const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
+
+	function triggerHeartBurst() {
+		heartBurst = true;
+		onlike(upload.id);
+		setTimeout(() => (heartBurst = false), 700);
+	}
 
 	$effect(() => {
 		loadComments();
@@ -77,10 +88,19 @@
 	}
 </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>
+
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
-	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white">
+	<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 onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
@@ -88,36 +108,59 @@
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 				</svg>
 			</button>
-			{#if isVideo(upload.mime_type)}
+			<div
-				<video
+				class="relative"
-					src={upload.preview_url ?? ''}
+				use:doubletap
-					controls
+				ondoubletap={triggerHeartBurst}
-					class="max-h-[50vh] w-full object-contain"
+			>
-					poster={upload.thumbnail_url ?? undefined}
+				{#if isVideo(upload.mime_type)}
-				></video>
+					<video
-			{:else}
+						src={mediaSrc}
-				<img
+						controls
-					src={upload.preview_url ?? ''}
+						class="max-h-[50vh] w-full object-contain"
-					alt=""
+						poster={upload.thumbnail_url ?? undefined}
-					class="max-h-[50vh] w-full object-contain"
+					></video>
-				/>
+				{:else}
-			{/if}
+					<img
+						src={mediaSrc}
+						alt=""
+						class="max-h-[50vh] w-full object-contain select-none"
+						draggable="false"
+					/>
+				{/if}
+
+				{#if heartBurst}
+					<span
+						class="pointer-events-none absolute inset-0 flex items-center justify-center"
+						aria-hidden="true"
+					>
+						<svg
+							class="h-24 w-24 text-red-500 drop-shadow-lg"
+							style="animation: heart-burst 700ms ease-out forwards;"
+							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" />
+						</svg>
+					</span>
+				{/if}
+			</div>
 		</div>
 
 		<!-- Info + Comments -->
 		<div class="flex flex-1 flex-col overflow-hidden">
-			<div class="border-b border-gray-100 p-3">
+			<div class="border-b border-gray-100 p-3 dark:border-gray-800">
 				<div class="flex items-center justify-between">
 					<div>
-						<span class="font-medium text-gray-900">{upload.uploader_name}</span>
+						<span class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
-						<span class="ml-2 text-xs text-gray-400">{formatTime(upload.created_at)}</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'
+								? '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'
+								: '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">
@@ -127,27 +170,27 @@
 					</button>
 				</div>
 				{#if upload.caption}
-					<p class="mt-1 text-sm text-gray-700">{upload.caption}</p>
+					<p class="mt-1 text-sm text-gray-700 dark:text-gray-300">{upload.caption}</p>
 				{/if}
 			</div>
 
 			<!-- Comments list -->
 			<div class="flex-1 overflow-y-auto p-3">
 				{#if comments.length === 0}
-					<p class="text-center text-sm text-gray-400">Noch keine Kommentare.</p>
+					<p class="text-center text-sm text-gray-400 dark:text-gray-500">Noch keine Kommentare.</p>
 				{:else}
 					<div class="space-y-3">
 						{#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">{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">{comment.body}</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">{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
 										onclick={() => deleteComment(comment.id)}
-										class="shrink-0 text-gray-400 hover:text-red-500"
+										class="shrink-0 text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
 										aria-label="Löschen"
 									>
 										<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -164,19 +207,19 @@
 			<!-- Comment input -->
 			<form
 				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
-				class="flex gap-2 border-t border-gray-100 p-3"
+				class="flex gap-2 border-t border-gray-100 p-3 dark:border-gray-800"
 			>
 				<input
 					type="text"
 					bind:value={newComment}
 					placeholder="Kommentar schreiben..."
 					maxlength={500}
-					class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+					class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
 				/>
 				<button
 					type="submit"
 					disabled={loading || !newComment.trim()}
-					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
 				>
 					Senden
 				</button>

frontend/src/lib/components/OnboardingGuide.svelte

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

frontend/src/lib/components/UploadSheet.svelte

@@ -80,54 +80,54 @@
 
 <!-- Sheet -->
 <div
-	class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300"
+	class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300 dark:bg-gray-900"
 	class:translate-y-full={!open}
 	class:translate-y-0={open}
 	style="padding-bottom: env(safe-area-inset-bottom)"
 >
 	<!-- Drag handle -->
 	<div class="flex justify-center pt-3 pb-1">
-		<div class="h-1 w-10 rounded-full bg-gray-300"></div>
+		<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 	</div>
 
 	<div class="space-y-3 px-4 pb-4 pt-2">
 		<!-- 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"
+			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">
+			<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">Galerie</p>
+				<p class="font-semibold text-gray-900 dark:text-gray-100">Galerie</p>
-				<p class="text-sm text-gray-500">Foto oder Video wählen</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"
+			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">
+			<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">Kamera</p>
+				<p class="font-semibold text-gray-900 dark:text-gray-100">Kamera</p>
-				<p class="text-sm text-gray-500">Jetzt aufnehmen</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"
+			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>

frontend/src/routes/+layout.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
-	import { initAuth } from '$lib/auth';
+	import { initAuth, getToken, getUserId, clearPin } from '$lib/auth';
-	import { onMount } from 'svelte';
+	import { initTheme } from '$lib/theme-store';
+	import { onMount, onDestroy } from 'svelte';
 	import BottomNav from '$lib/components/BottomNav.svelte';
 	import UploadSheet from '$lib/components/UploadSheet.svelte';
 	import { showBottomNav } from '$lib/ui-store';
 	import { isAuthenticated } from '$lib/auth';
 	import { queueItems, isProcessing } from '$lib/upload-queue';
+	import { privacyNote } from '$lib/privacy-note-store';
+	import { refreshQuota } from '$lib/quota-store';
+	import { onSseEvent } from '$lib/sse';
+	import { api } from '$lib/api';
+	import type { MeContextDto } from '$lib/types';
 
 	let { children } = $props();
 
+	let unsubs: Array<() => void> = [];
+
 	// Slim progress bar: ratio of completed items to total, shown while processing.
 	let progressPct = $derived.by(() => {
 		const total = $queueItems.length;
@@ -19,8 +27,41 @@
 		return Math.round((done / total) * 100);
 	});
 
-	onMount(() => {
+	onMount(async () => {
 		initAuth();
+		// Hooks up the appliedTheme → <html class="dark"> sync. Must run early so the
+		// first paint after hydration matches the saved preference.
+		initTheme();
+		// Hydrate cross-cutting stores once on boot if the user is already authenticated.
+		// Page-level mounts will refresh again as needed.
+		if (getToken()) {
+			try {
+				const ctx = await api.get<MeContextDto>('/me/context');
+				privacyNote.set(ctx.privacy_note);
+			} catch {
+				// non-fatal; users without a session land on /join anyway
+			}
+			void refreshQuota();
+		}
+
+		// Global pin-reset listener — clears the now-invalid plaintext PIN from
+		// localStorage no matter which route the user is currently on. The reactive
+		// `currentPin` store carries the change into any page that reads it (My
+		// Account in particular).
+		unsubs.push(
+			onSseEvent('pin-reset', (data) => {
+				try {
+					const payload = JSON.parse(data) as { user_id: string };
+					if (payload.user_id === getUserId()) clearPin();
+				} catch {
+					// ignore malformed payload
+				}
+			})
+		);
+	});
+
+	onDestroy(() => {
+		for (const unsub of unsubs) unsub();
 	});
 </script>
 

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

@@ -1,36 +1,105 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
+	import { getToken, getDisplayName, getExpiry, getRole, clearAuth, currentPin } from '$lib/auth';
+	import { clearQueue } from '$lib/upload-queue';
 	import { api } from '$lib/api';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
+	import { dataMode } from '$lib/data-mode-store';
+	import { themePreference, type ThemePreference } from '$lib/theme-store';
+	import { privacyNote } from '$lib/privacy-note-store';
+	import { quotaStore, refreshQuota } from '$lib/quota-store';
+	import { onSseEvent } from '$lib/sse';
+	import type { MeContextDto } from '$lib/types';
 
-	let pin = $state<string | null>(null);
 	let displayName = $state<string | null>(null);
 	let role = $state<'guest' | 'host' | 'admin' | null>(null);
 	let expiry = $state<Date | null>(null);
 	let pinCopied = $state(false);
 	let leaveConfirmOpen = $state(false);
+	let dataModeWarningOpen = $state(false);
 
-	onMount(() => {
+	// `pin` is sourced from the shared `currentPin` store so a global pin-reset SSE
+	// event (handled in the layout) clears the display live without a reload.
+	const pin = currentPin;
+
+	const unsubs: Array<() => void> = [];
+
+	onMount(async () => {
 		if (!getToken()) {
 			goto('/join');
 			return;
 		}
-		pin = getPin();
 		displayName = getDisplayName();
 		role = getRole();
 		expiry = getExpiry();
+
+		// Refresh server-driven state. Quota + privacy note may have changed since last visit.
+		try {
+			const ctx = await api.get<MeContextDto>('/me/context');
+			privacyNote.set(ctx.privacy_note);
+		} catch {
+			// non-fatal
+		}
+		void refreshQuota();
+
+		// If admin edits the privacy note while we're sitting on the page, pick it up.
+		unsubs.push(
+			onSseEvent('event-updated', async () => {
+				try {
+					const ctx = await api.get<MeContextDto>('/me/context');
+					privacyNote.set(ctx.privacy_note);
+				} catch {
+					// ignore
+				}
+			})
+			// Note: `pin-reset` is handled globally in the root layout.
+		);
 	});
 
+	onDestroy(() => {
+		for (const u of unsubs) u();
+	});
+
+	function chooseDataMode(mode: 'saver' | 'original') {
+		if (mode === 'original' && $dataMode !== 'original') {
+			dataModeWarningOpen = true;
+			return;
+		}
+		dataMode.set(mode);
+	}
+
+	function confirmOriginalMode() {
+		dataMode.set('original');
+		dataModeWarningOpen = false;
+	}
+
+	function formatBytes(bytes: number | null | undefined): string {
+		if (bytes == null || bytes <= 0) return '0 MB';
+		const mb = bytes / (1024 * 1024);
+		if (mb < 1024) return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
+		return `${(mb / 1024).toFixed(1)} GB`;
+	}
+
+	const quotaPercent = $derived(
+		$quotaStore.limit_bytes && $quotaStore.limit_bytes > 0
+			? Math.min(100, ($quotaStore.used_bytes / $quotaStore.limit_bytes) * 100)
+			: 0
+	);
+
 	function copyPin() {
-		if (!pin) return;
+		const value = $pin;
-		navigator.clipboard.writeText(pin);
+		if (!value) return;
+		navigator.clipboard.writeText(value);
 		pinCopied = true;
 		setTimeout(() => (pinCopied = false), 2000);
 	}
 
 	async function handleLogout() {
 		try { await api.delete('/session'); } catch { /* ignore */ }
+		// 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 { /* ignore */ }
 		clearAuth();
 		goto('/join');
 	}
@@ -64,17 +133,17 @@
 	}
 </script>
 
-<div class="min-h-screen bg-gray-50 pb-24">
+<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white">
+	<div class="border-b border-gray-200 bg-white 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">Mein Konto</h1>
+			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
 		</div>
 	</div>
 
 	<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">
+		<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
@@ -83,47 +152,47 @@
 					{displayName ? displayName[0].toUpperCase() : '?'}
 				</div>
 				<div class="min-w-0">
-					<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
+					<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">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">
+			<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">
+				<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">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"
+					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>
-					<span class="flex-1 font-medium text-gray-900">Host-Dashboard</span>
+					<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" 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>
 				{#if role === 'admin'}
 					<a
 						href="/admin"
-						class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50"
+						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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<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">Admin-Dashboard</span>
+						<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" 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>
@@ -132,44 +201,169 @@
 		{/if}
 
 		<!-- PIN card -->
-		<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
+		<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">Wiederherstellungs-PIN</h2>
+			<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">
+			<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!
 			</p>
-			{#if pin}
+			{#if $pin}
-				<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm">
+				<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">{pin}</span>
+					<span class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{$pin}</span>
 					<button
 						onclick={copyPin}
-						class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200"
+						class="rounded-md bg-amber-100 px-3 py-1.5 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"
 					>
 						{pinCopied ? 'Kopiert!' : 'Kopieren'}
 					</button>
 				</div>
 			{:else}
-				<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm">
+				<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>
 
+		<!-- Diashow tile — primarily mobile, where the feed header doesn't show the icon. -->
+		<a
+			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" />
+				<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">
+				<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="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>
+			</div>
+			<div class="grid grid-cols-3 gap-2 p-3" role="radiogroup" aria-label="Design">
+				{#each [
+					{ value: 'system', label: 'System', icon: '🖥️' },
+					{ value: 'light',  label: 'Hell',   icon: '☀️' },
+					{ value: 'dark',   label: 'Dunkel', icon: '🌙' }
+				] as opt (opt.value)}
+					{@const selected = $themePreference === opt.value}
+					<button
+						type="button"
+						role="radio"
+						aria-checked={selected}
+						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'}"
+					>
+						<span class="text-2xl leading-none">{opt.icon}</span>
+						<span class="font-medium">{opt.label}</span>
+					</button>
+				{/each}
+			</div>
+		</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="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>
+			</div>
+			<!--
+				Custom buttons styled as radios. The store is the single source of truth;
+				we don't lean on `<input type="radio">` because the native checked-state
+				model fights the "show confirm sheet first, then maybe commit" UX
+				(Svelte's reactive `checked={…}` and the browser's interactive state
+				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)}
+					{@const selected = $dataMode === opt.value}
+					<button
+						type="button"
+						role="radio"
+						aria-checked={selected}
+						onclick={() => chooseDataMode(opt.value as 'saver' | 'original')}
+						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'}"
+						>
+							{#if selected}
+								<span class="block h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400"></span>
+							{/if}
+						</span>
+						<div>
+							<p class="font-medium text-gray-900 dark:text-gray-100">{opt.title}</p>
+							<p class="text-xs text-gray-500 dark:text-gray-400">{opt.body}</p>
+						</div>
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- 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">
+					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>
+				</div>
+				<div class="mt-2 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
+					<div
+						class="h-full transition-all"
+						class:bg-blue-500={quotaPercent < 80}
+						class:bg-amber-500={quotaPercent >= 80 && quotaPercent < 95}
+						class:bg-red-500={quotaPercent >= 95}
+						style="width: {quotaPercent}%"
+					></div>
+				</div>
+				<p class="mt-2 text-xs text-gray-400 dark:text-gray-500">
+					Geschätzt für {$quotaStore.active_uploaders} aktive Beitragende.
+				</p>
+			</div>
+		{/if}
+
+		<!-- 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">
+					Datenschutzhinweis
+				</h2>
+				<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">
+		<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">
+			<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">Konto</h2>
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Konto</h2>
 			</div>
 
 			<!-- Recover / device switch -->
 			<a
 				href="/recover"
-				class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
+				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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+				<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">Gerät wechseln / PIN nutzen</span>
+				<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" 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>
@@ -177,22 +371,22 @@
 			<!-- Leave / logout -->
 			<button
 				onclick={() => (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"
+				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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+				<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">Event verlassen</span>
+				<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400">Event verlassen</span>
 			</button>
 		</div>
 	</div>
 </div>
 
-<!-- Leave-confirm bottom sheet -->
+<!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
-{#if leaveConfirmOpen}
+{#if dataModeWarningOpen}
-	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
+	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (dataModeWarningOpen = false)} aria-hidden="true">
 		<div
-			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
+			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			role="dialog"
@@ -200,21 +394,55 @@
 			tabindex="-1"
 		>
 			<div class="mb-4 flex justify-center">
-				<div class="h-1 w-10 rounded-full bg-gray-300"></div>
+				<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 			</div>
-			<h3 class="mb-1 text-center text-lg font-bold text-gray-900">Event verlassen?</h3>
+			<h3 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">
+			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
-				Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
+				Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
 			</p>
 			<button
-				onclick={handleLogout}
+				onclick={confirmOriginalMode}
-				class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
+				class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
 			>
-				Abmelden
+				Aktivieren
 			</button>
 			<button
-				onclick={() => (leaveConfirmOpen = false)}
+				onclick={() => (dataModeWarningOpen = false)}
-				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+			>
+				Abbrechen
+			</button>
+		</div>
+	</div>
+{/if}
+
+<!-- Leave-confirm bottom sheet -->
+{#if leaveConfirmOpen}
+	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
+		<div
+			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+			role="dialog"
+			aria-modal="true"
+			tabindex="-1"
+		>
+			<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 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Event verlassen?</h3>
+			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
+				Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
+			</p>
+			<button
+				onclick={handleLogout}
+				class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
+			>
+				Abmelden
+			</button>
+			<button
+				onclick={() => (leaveConfirmOpen = false)}
+				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
 			>
 				Abbrechen
 			</button>

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

@@ -34,16 +34,68 @@
 		created_at: string;
 	}
 
-	const CONFIG_LABELS: Record<string, string> = {
+	type ConfigKind = 'number' | 'bool' | 'text';
-		max_image_size_mb: 'Max. Bildgröße (MB)',
+	interface ConfigField {
-		max_video_size_mb: 'Max. Videogröße (MB)',
+		key: string;
-		upload_rate_per_hour: 'Upload-Limit pro Stunde',
+		label: string;
-		feed_rate_per_min: 'Feed-Anfragen pro Minute',
+		kind: ConfigKind;
-		export_rate_per_day: 'Export-Downloads pro Tag',
+		hint?: string;
-		quota_tolerance: 'Speicherkontingent-Toleranz (0–1)',
+	}
-		estimated_guest_count: 'Geschätzte Gästezahl',
+	interface ConfigGroup {
-		compression_concurrency: 'Kompressions-Worker'
+		title: string;
-	};
+		fields: ConfigField[];
+	}
+
+	// Grouped sections — adding a new key is one entry in the right group, no other
+	// code changes required. The form renders each field based on `kind`.
+	const CONFIG_GROUPS: ConfigGroup[] = [
+		{
+			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: 'compression_concurrency', label: 'Kompressions-Worker',     kind: 'number' }
+			]
+		},
+		{
+			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' }
+			]
+		},
+		{
+			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' }
+			]
+		},
+		{
+			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.' }
+			]
+		}
+	];
+
+	function isTrue(v: string | undefined): boolean {
+		if (!v) return false;
+		return ['true', '1', 'yes', 'on'].includes(v.trim().toLowerCase());
+	}
+
+	function toggleBool(key: string) {
+		configDraft = { ...configDraft, [key]: isTrue(configDraft[key]) ? 'false' : 'true' };
+	}
 
 	type AdminTab = 'stats' | 'config' | 'export' | 'users';
 	const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
@@ -74,6 +126,12 @@
 	let banHideUploads = $state(false);
 	let banSubmitting = $state(false);
 
+	// PIN reset state — `pinModal` holds the freshly-issued plaintext PIN. We forget it
+	// the moment the modal closes.
+	let pinResetTarget = $state<UserSummary | null>(null);
+	let pinResetSubmitting = $state(false);
+	let pinModal = $state<{ name: string; pin: string } | null>(null);
+
 	const myRole = getRole();
 
 	onMount(async () => {
@@ -200,6 +258,39 @@
 		}
 	}
 
+	function askResetPin(user: UserSummary) {
+		pinResetTarget = user;
+	}
+
+	async function confirmResetPin() {
+		if (!pinResetTarget) return;
+		pinResetSubmitting = true;
+		try {
+			const res = await api.post<{ pin: string }>(`/host/users/${pinResetTarget.id}/pin-reset`);
+			pinModal = { name: pinResetTarget.display_name, pin: res.pin };
+			pinResetTarget = null;
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
+		} finally {
+			pinResetSubmitting = false;
+		}
+	}
+
+	function copyPinModal() {
+		if (!pinModal) return;
+		navigator.clipboard.writeText(pinModal.pin);
+		showToast('PIN kopiert.');
+	}
+
+	/** True iff the current caller may reset this target's PIN. Mirrors the backend
+	 *  rules in `handlers::host::reset_user_pin`. */
+	function canResetPinFor(target: UserSummary): boolean {
+		if (target.role === 'admin') return false;
+		if (myRole === 'admin') return true; // any non-admin
+		if (myRole === 'host') return target.role === 'guest';
+		return false;
+	}
+
 	function formatBytes(bytes: number): string {
 		if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
 		if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
@@ -217,10 +308,10 @@
 
 	function statusBadgeClass(status: string): string {
 		switch (status) {
-			case 'done': return 'bg-green-100 text-green-700';
+			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';
+			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';
+			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';
+			default:        return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
 		}
 	}
 
@@ -235,21 +326,63 @@
 	}
 </script>
 
+<!-- PIN reset confirmation -->
+{#if pinResetTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
+			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+				Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
+			</p>
+			<div class="flex gap-2">
+				<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
+				<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
+					{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- One-time PIN display modal -->
+{#if pinModal}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			<h2 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.
+			</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 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
+					Kopieren
+				</button>
+			</div>
+			<button
+				onclick={() => (pinModal = null)}
+				class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+			>
+				Schließen
+			</button>
+		</div>
+	</div>
+{/if}
+
 <!-- Ban modal -->
 {#if banTarget}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
+			<h2 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">
+			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
 				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
 			</p>
-			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
+			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
-				<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500" />
+				<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
-				<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
+				<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
 			</label>
 			<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">Abbrechen</button>
+				<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover: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 disabled:opacity-50">
+				<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 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400">
 					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
 				</button>
 			</div>
@@ -259,36 +392,36 @@
 
 <!-- Toast -->
 {#if toast}
-	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
 		{toast}
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50 pb-24">
+<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white">
+	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
 		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
 			<button
 				onclick={() => goto('/account')}
-				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
 				aria-label="Zurück"
 			>
 				<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" />
 				</svg>
 			</button>
-			<h1 class="text-xl font-bold text-gray-900">Admin-Dashboard</h1>
+			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
 		</div>
 	</div>
 
 	<!-- Inner tab bar -->
-	<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white">
+	<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]}
 				<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' : 'border-transparent text-gray-500 hover:text-gray-700'}"
+						{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>
@@ -298,7 +431,7 @@
 
 	<div class="mx-auto max-w-3xl p-4">
 		{#if loading}
-			<div class="py-16 text-center text-gray-400">Laden…</div>
+			<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">{error}</div>
 		{:else}
@@ -308,63 +441,103 @@
 				<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">
+							<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">{stats.user_count}</p>
+								<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">Gäste</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">
+							<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">{stats.upload_count}</p>
+								<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">Uploads</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">
+							<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">{stats.comment_count}</p>
+								<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">Kommentare</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">
+							<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">{diskPct(stats)} %</p>
+								<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">Speicher</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">
+						<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">
+							<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>
 							</div>
-							<div class="h-2.5 overflow-hidden rounded-full bg-gray-200">
+							<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'}"
 									style="width: {diskPct(stats)}%"
 								></div>
 							</div>
-							<p class="mt-1.5 text-xs text-gray-400">{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 ───────────────────────────────────────────────── -->
 			{:else if activeTab === 'config'}
-				<div class="relative">
+				<div class="relative space-y-3 pb-20">
-					<div class="space-y-3 rounded-xl border border-gray-200 bg-white p-5 pb-20">
+					{#each CONFIG_GROUPS as group (group.title)}
-						{#each Object.entries(CONFIG_LABELS) as [key, label]}
+						<div class="rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
-							<div>
+							<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
-								<label for={key} class="mb-1 block text-sm font-medium text-gray-700">{label}</label>
+								<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{group.title}</h3>
-								<input
-									id={key}
-									type="number"
-									step="any"
-									bind:value={configDraft[key]}
-									class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
-								/>
 							</div>
-						{/each}
+							<div class="space-y-4 px-5 py-4">
-					</div>
+								{#each group.fields as field (field.key)}
+									<div>
+										{#if field.kind === 'bool'}
+											<label class="flex cursor-pointer items-start gap-3" for={field.key}>
+												<input
+													id={field.key}
+													type="checkbox"
+													class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+													checked={isTrue(configDraft[field.key])}
+													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>
+													{#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>
+											<textarea
+												id={field.key}
+												rows="6"
+												bind:value={configDraft[field.key]}
+												class="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 font-mono text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+											></textarea>
+											{#if field.hint}
+												<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>
+											<input
+												id={field.key}
+												type="number"
+												step="any"
+												bind:value={configDraft[field.key]}
+												class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+											/>
+											{#if field.hint}
+												<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
+											{/if}
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/each}
+
 					<!-- Sticky save button -->
-					<div class="sticky bottom-0 border-t border-gray-100 bg-white px-5 py-3">
+					<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}
-							class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50"
+							class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
 						>
 							{saving ? 'Wird gespeichert…' : 'Speichern'}
 						</button>
@@ -375,52 +548,52 @@
 			{:else if activeTab === 'export'}
 				<div class="space-y-3">
 					<!-- Gallery release -->
-					<div class="rounded-xl border border-gray-200 bg-white p-5">
+					<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">Galerie</h3>
+						<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
 						<button
 							onclick={releaseGallery}
-							class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
+							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
 						</button>
 					</div>
 
 					<!-- Export jobs -->
-					<div class="rounded-xl border border-gray-200 bg-white p-5">
+					<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">Export-Jobs</h3>
+							<h3 class="font-semibold text-gray-900 dark:text-gray-100">Export-Jobs</h3>
 							<button
 								onclick={refreshExportJobs}
 								disabled={exportJobsRefreshing}
-								class="text-xs text-blue-600 hover:underline disabled:opacity-50"
+								class="text-xs text-blue-600 hover:underline disabled:opacity-50 dark:text-blue-400"
 							>
 								{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
 							</button>
 						</div>
 						{#if exportJobs.length === 0}
-							<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
+							<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}
-									<div class="rounded-lg border border-gray-100 p-3">
+									<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">{jobLabel(job.type)}</span>
+											<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">
+												<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">
+												<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}
 										{#if job.error_message}
-											<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
+											<p class="mt-1 text-xs text-red-600 dark:text-red-400">{job.error_message}</p>
 										{/if}
 									</div>
 								{/each}
@@ -431,66 +604,71 @@
 
 			<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
 			{:else if activeTab === 'users'}
-				<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<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">
+						<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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+							<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"
 								placeholder="Nutzer suchen…"
 								bind:value={userSearch}
-								class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+								class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
 							/>
 						</div>
 					</div>
 					{#if filteredUsers.length === 0}
-						<p class="px-5 py-8 text-center text-sm text-gray-400">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">
+						<div class="divide-y divide-gray-100 dark:divide-gray-700">
 							{#each filteredUsers as user}
 								<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">{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">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">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">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">
+										<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)}
 										</p>
 									</div>
-									<div class="flex shrink-0 gap-1.5">
+								<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
-										{#if user.role !== 'admin'}
+									{#if user.role !== 'admin'}
-											{#if user.is_banned}
+										{#if user.is_banned}
-												<button onclick={() => unban(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
+											<button onclick={() => 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
+												Entsperren
-												</button>
+											</button>
-											{:else}
+										{:else}
-												{#if user.role === 'guest'}
+											{#if user.role === 'guest'}
-													<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100">
+												<button onclick={() => 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
+													Host
-													</button>
-												{/if}
-												{#if user.role === 'host' && myRole === 'admin'}
-													<button onclick={() => demoteToGuest(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
-														Degradieren
-													</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">
-													Sperren
 												</button>
 											{/if}
+											{#if user.role === 'host'}
+												<button onclick={() => 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}
-									</div>
+									{/if}
+								</div>
 								</div>
 							{/each}
 						</div>

frontend/src/routes/admin/login/+page.svelte

@@ -34,10 +34,10 @@
 	}
 </script>
 
-<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+<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">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">Nur für Veranstalter</p>
+		<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(); }}>
 			<input
@@ -45,24 +45,24 @@
 				bind:value={password}
 				placeholder="Passwort"
 				autocomplete="current-password"
-				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+				class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
 			/>
 
 			{#if error}
-				<p class="mb-3 text-sm text-red-600">{error}</p>
+				<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
 			{/if}
 
 			<button
 				type="submit"
 				disabled={loading || !password}
-				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
 			>
 				{loading ? 'Wird angemeldet…' : 'Anmelden'}
 			</button>
 		</form>
 
-		<p class="mt-4 text-center text-sm text-gray-500">
+		<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
-			<a href="/join" class="text-blue-600 hover:underline">Zurück zum Event</a>
+			<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Zurück zum Event</a>
 		</p>
 	</div>
 </div>

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

@@ -109,26 +109,26 @@
 <!-- HTML guide modal -->
 {#if showHtmlGuide}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-3 text-lg font-bold text-gray-900">Hinweis zum HTML-Viewer</h2>
+			<h2 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">
+			<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">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">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
-				<li class="flex gap-2"><span class="font-bold text-blue-600">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">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
-				<li class="flex gap-2"><span class="font-bold text-blue-600">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">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">
+			<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">
 				<button
 					onclick={() => (showHtmlGuide = false)}
-					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
+					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
 				>
 					Abbrechen
 				</button>
 				<button
 					onclick={confirmHtmlDownload}
-					class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700"
+					class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 				>
 					Herunterladen
 				</button>
@@ -137,48 +137,48 @@
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50 pb-24">
+<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
-	<div class="border-b border-gray-200 bg-white">
+	<div class="border-b border-gray-200 bg-white 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">Export</h1>
+			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
 		</div>
 	</div>
 
 	<div class="mx-auto max-w-lg space-y-4 p-4">
 		{#if loading}
-			<div class="py-16 text-center text-gray-400">Laden…</div>
+			<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">
+			<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" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<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">Export noch nicht verfügbar</p>
+				<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">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">Wähle dein bevorzugtes Format:</p>
+			<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">
+			<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">ZIP-Archiv</h2>
+						<h2 class="font-semibold text-gray-900 dark:text-gray-100">ZIP-Archiv</h2>
-						<p class="mt-0.5 text-sm text-gray-500">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
+						<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' : status.zip.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
+						<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' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
+						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>
 				</div>
 				{#if status.zip.status === 'running'}
 					<div class="mt-3">
-						<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+						<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>
 					</div>
@@ -186,26 +186,26 @@
 			</div>
 
 			<!-- HTML card -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5">
+			<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">HTML-Viewer</h2>
+						<h2 class="font-semibold text-gray-900 dark:text-gray-100">HTML-Viewer</h2>
-						<p class="mt-0.5 text-sm text-gray-500">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
+						<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' : status.html.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
+						<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' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
+						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>
 				</div>
 				{#if status.html.status === 'running'}
 					<div class="mt-3">
-						<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+						<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>
 					</div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken } from '$lib/auth';
+	import { getToken, getUserId } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { onMount, onDestroy } from 'svelte';
@@ -9,7 +9,9 @@
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
 	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
-	import type { FeedUpload, FeedResponse, HashtagCount } from '$lib/types';
+	import ContextSheet, { type ContextAction } from '$lib/components/ContextSheet.svelte';
+	import { refreshQuota } from '$lib/quota-store';
+	import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
 
 	let uploads = $state<FeedUpload[]>([]);
 	let hashtags = $state<HashtagCount[]>([]);
@@ -31,6 +33,49 @@
 
 	let unsubscribers: (() => void)[] = [];
 
+	// Long-press / context-sheet state for post actions
+	let contextTarget = $state<FeedUpload | null>(null);
+	const myUserId = getUserId();
+	const contextActions = $derived<ContextAction[]>(buildContextActions(contextTarget));
+
+	function buildContextActions(target: FeedUpload | null): ContextAction[] {
+		if (!target) return [];
+		const actions: ContextAction[] = [
+			{
+				label: 'Original anzeigen',
+				icon: '⤓',
+				onClick: () => {
+					window.open(`/api/v1/upload/${target.id}/original`, '_blank');
+				}
+			}
+		];
+		if (target.user_id === myUserId) {
+			actions.unshift({
+				label: 'Löschen',
+				icon: '🗑',
+				tone: 'danger',
+				onClick: () => deleteUpload(target.id)
+			});
+		}
+		return actions;
+	}
+
+	function openContextSheet(upload: FeedUpload) {
+		contextTarget = upload;
+	}
+
+	async function deleteUpload(id: string) {
+		if (!confirm('Diesen Beitrag wirklich löschen?')) return;
+		try {
+			await api.delete(`/upload/${id}`);
+			uploads = uploads.filter((u) => u.id !== id);
+			if (selectedUpload?.id === id) selectedUpload = null;
+			void refreshQuota();
+		} catch {
+			// ignore — toast handled by ApiError elsewhere
+		}
+	}
+
 	// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
 	let allTags = $derived.by(() => {
 		const freq = new Map<string, number>();
@@ -105,8 +150,31 @@
 				} catch { /* ignore */ }
 			}),
 			onSseEvent('upload-processed', () => loadFeed(true)),
+			onSseEvent('upload-deleted', (data) => {
+				try {
+					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 */ }
+			}),
 			onSseEvent('like-update', () => loadFeed(true)),
-			onSseEvent('new-comment', () => loadFeed(true))
+			onSseEvent('new-comment', () => loadFeed(true)),
+			// Synthetic event from the SSE client after a foreground reconnect — merge
+			// any uploads + deletions we missed while the tab was hidden.
+			onSseEvent('feed-delta', (data) => {
+				try {
+					const delta = JSON.parse(data) as DeltaResponse;
+					if (delta.uploads.length) {
+						const seen = new Set(uploads.map((u) => u.id));
+						const fresh = delta.uploads.filter((u) => !seen.has(u.id));
+						if (fresh.length) uploads = [...fresh, ...uploads];
+					}
+					if (delta.deleted_ids.length) {
+						const dead = new Set(delta.deleted_ids);
+						uploads = uploads.filter((u) => !dead.has(u.id));
+					}
+				} catch { /* ignore */ }
+			})
 		);
 
 		if (sentinel) {
@@ -214,34 +282,49 @@
 	}
 </script>
 
-<div class="min-h-screen bg-gray-50 pb-24">
+<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Sticky header -->
-	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
+	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur dark:border-gray-800 dark:bg-gray-900/95">
 		<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">Galerie</h1>
+			<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>
 
-			<!-- List / Grid toggle -->
+			<div class="flex items-center gap-2">
-			<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
+				<!-- Diashow entry — tablet/desktop only (mobile uses the Account page tile). -->
 				<button
-					onclick={() => switchView('list')}
+					onclick={() => goto('/diashow')}
-					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="hidden rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 sm:inline-flex"
-					aria-label="Listenansicht"
+					aria-label="Diashow starten"
+					title="Diashow"
 				>
-					<!-- 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" />
+						<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>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M10 9.75 14.5 12 10 14.25v-4.5Z" />
-				</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'}"
-					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>
 				</button>
+
+				<!-- List / Grid toggle -->
+				<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'}"
+						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>
+					</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'}"
+						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>
+					</button>
+				</div>
 			</div>
 		</div>
 
@@ -256,8 +339,8 @@
 		{#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">
+					<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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+						<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
@@ -266,12 +349,12 @@
 							bind:value={searchQuery}
 							onfocus={() => (showAutocomplete = true)}
 							onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
-							class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+							class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
 						/>
 						{#if searchQuery}
 							<button
 								onclick={() => { searchQuery = ''; }}
-								class="shrink-0 text-gray-400 hover:text-gray-600"
+								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">
@@ -283,20 +366,20 @@
 
 					<!-- 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">
+						<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 dark:border-gray-700 dark:bg-gray-900">
 							{#each suggestions as item}
 								<button
-									class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
+									class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-800"
 									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">
+										<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">{item.value}</span>
+										<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
 									{:else}
-										<span class="text-blue-500 font-medium">#</span>
+										<span class="font-medium text-blue-500 dark:text-blue-400">#</span>
-										<span class="font-medium text-gray-900">{item.value}</span>
+										<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
 									{/if}
 								</button>
 							{/each}
@@ -308,9 +391,9 @@
 				{#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">
+							<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" aria-label="Filter entfernen">
+								<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>
@@ -318,7 +401,7 @@
 							</span>
 						{/each}
 						{#if activeFilters.length >= 2}
-							<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
+							<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}
@@ -331,8 +414,8 @@
 	<!-- Content -->
 	{#if uploads.length === 0}
 		<div class="py-20 text-center">
-			<p class="text-lg text-gray-400">Noch keine Fotos.</p>
+			<p class="text-lg text-gray-400 dark:text-gray-500">Noch keine Fotos.</p>
-			<p class="mt-1 text-sm text-gray-400">Tippe auf den Plus-Button unten!</p>
+			<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
 		</div>
 	{:else if viewMode === 'list'}
 		<!-- List view: chronological full-width cards -->
@@ -340,9 +423,11 @@
 			{#each uploads as upload (upload.id)}
 				<FeedListCard
 					{upload}
+					isOwn={upload.user_id === myUserId}
 					onlike={handleLike}
 					oncomment={openComments}
 					onselect={(u) => (selectedUpload = u)}
+					oncontextmenu={openContextSheet}
 				/>
 			{/each}
 		</div>
@@ -351,8 +436,8 @@
 		<div class="mx-auto max-w-2xl">
 			{#if displayUploads.length === 0}
 				<div class="py-16 text-center">
-					<p class="text-sm text-gray-400">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>
-					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">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}
 				<FeedGrid
@@ -360,6 +445,7 @@
 					onlike={handleLike}
 					oncomment={openComments}
 					onselect={(u) => (selectedUpload = u)}
+					oncontextmenu={openContextSheet}
 					threeCol={true}
 				/>
 			{/if}
@@ -371,7 +457,7 @@
 		<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"></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>
@@ -386,5 +472,12 @@
 	/>
 {/if}
 
+<!-- Context sheet for post long-press / kebab tap -->
+<ContextSheet
+	open={contextTarget !== null}
+	actions={contextActions}
+	onClose={() => (contextTarget = null)}
+/>
+
 <!-- First-visit onboarding guide -->
 <OnboardingGuide />

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

@@ -45,10 +45,24 @@
 	let banHideUploads = $state(false);
 	let banSubmitting = $state(false);
 
+	// PIN reset modal state. `pinModal` holds the freshly-issued plaintext PIN; it is
+	// shown once and forgotten on close.
+	let pinResetTarget = $state<UserSummary | null>(null);
+	let pinResetSubmitting = $state(false);
+	let pinModal = $state<{ name: string; pin: string } | null>(null);
+
 	let toast = $state<string | null>(null);
 
 	const myRole = getRole();
 
+	/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
+	function canResetPinFor(target: UserSummary): boolean {
+		if (target.role === 'admin') return false;
+		if (myRole === 'admin') return true;
+		if (myRole === 'host') return target.role === 'guest';
+		return false;
+	}
+
 	onMount(async () => {
 		const token = getToken();
 		const role = getRole();
@@ -155,6 +169,30 @@
 		}
 	}
 
+	function askResetPin(user: UserSummary) {
+		pinResetTarget = user;
+	}
+
+	async function confirmResetPin() {
+		if (!pinResetTarget) return;
+		pinResetSubmitting = true;
+		try {
+			const res = await api.post<{ pin: string }>(`/host/users/${pinResetTarget.id}/pin-reset`);
+			pinModal = { name: pinResetTarget.display_name, pin: res.pin };
+			pinResetTarget = null;
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
+		} finally {
+			pinResetSubmitting = false;
+		}
+	}
+
+	function copyPinModal() {
+		if (!pinModal) return;
+		navigator.clipboard.writeText(pinModal.pin);
+		showToast('PIN kopiert.');
+	}
+
 	function formatBytes(bytes: number): string {
 		if (bytes < 1024) return `${bytes} B`;
 		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -162,33 +200,75 @@
 	}
 </script>
 
+<!-- PIN reset confirmation -->
+{#if pinResetTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
+			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+				Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
+			</p>
+			<div class="flex gap-2">
+				<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
+				<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
+					{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- One-time PIN display modal -->
+{#if pinModal}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			<h2 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.
+			</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 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
+					Kopieren
+				</button>
+			</div>
+			<button
+				onclick={() => (pinModal = null)}
+				class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+			>
+				Schließen
+			</button>
+		</div>
+	</div>
+{/if}
+
 <!-- Ban modal -->
 {#if banTarget}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
-			<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
+			<h2 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">
+			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
 				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
 			</p>
-			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
+			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
 				<input
 					type="checkbox"
 					bind:checked={banHideUploads}
-					class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
+					class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
 				/>
-				<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
+				<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
 			</label>
 			<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"
+					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover: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 disabled:opacity-50"
+					class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400"
 				>
 					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
 				</button>
@@ -199,18 +279,18 @@
 
 <!-- Toast -->
 {#if toast}
-	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
 		{toast}
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50 pb-24">
+<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white">
+	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
 		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
 			<button
 				onclick={() => goto('/account')}
-				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
 				aria-label="Zurück"
 			>
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -218,9 +298,9 @@
 				</svg>
 			</button>
 			<div class="min-w-0">
-				<h1 class="text-xl font-bold text-gray-900">Host-Dashboard</h1>
+				<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1>
 				{#if event}
-					<p class="truncate text-sm text-gray-500">{event.name}</p>
+					<p class="truncate text-sm text-gray-500 dark:text-gray-400">{event.name}</p>
 				{/if}
 			</div>
 		</div>
@@ -228,71 +308,71 @@
 
 	<div class="mx-auto max-w-3xl space-y-3 p-4">
 		{#if loading}
-			<div class="py-16 text-center text-gray-400">Laden…</div>
+			<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">{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}
 
 			<!-- ── Statistiken ─────────────────────────────────────────────── -->
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
 				<button
 					onclick={() => (statsOpen = !statsOpen)}
 					class="flex w-full items-center justify-between px-5 py-4"
 				>
-					<h2 class="font-semibold text-gray-900">Statistiken</h2>
+					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
 					<svg
-						class="h-5 w-5 text-gray-400 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
+						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 sm:grid-cols-4">
+					<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">
+						<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">{users.length}</p>
+							<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">Gäste</p>
+							<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
 						</div>
-						<div class="rounded-xl bg-gray-50 p-4 text-center">
+						<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">{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">Uploads</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">
+						<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' : 'text-green-600'}">
+							<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">Uploads</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">
+						<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' : 'text-gray-400'}">
+							<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">Freigegeben</p>
+							<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Freigegeben</p>
 						</div>
 					</div>
 				</div>
 			</div>
 
 			<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
 				<button
 					onclick={() => (settingsOpen = !settingsOpen)}
 					class="flex w-full items-center justify-between px-5 py-4"
 				>
-					<h2 class="font-semibold text-gray-900">Event-Einstellungen</h2>
+					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
 					<svg
-						class="h-5 w-5 text-gray-400 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
+						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="flex flex-wrap gap-3 border-t border-gray-100 p-5">
+					<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' : 'bg-amber-500 text-white hover:bg-amber-600'}"
+								{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>
@@ -300,7 +380,7 @@
 							onclick={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' : 'bg-blue-600 text-white hover:bg-blue-700'}"
+								{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>
@@ -309,63 +389,63 @@
 			</div>
 
 			<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
-			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
 				<button
 					onclick={() => (usersOpen = !usersOpen)}
 					class="flex w-full items-center justify-between px-5 py-4"
 				>
-					<h2 class="font-semibold text-gray-900">Nutzerverwaltung</h2>
+					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
 					<svg
-						class="h-5 w-5 text-gray-400 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
+						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="border-t border-gray-100">
+					<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">
+							<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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<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"
 									placeholder="Nutzer suchen…"
 									bind:value={userSearch}
-									class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+									class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
 								/>
 							</div>
 						</div>
 						{#if filteredUsers.length === 0}
-							<p class="px-5 py-8 text-center text-sm text-gray-400">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">
+							<div class="divide-y divide-gray-100 dark:divide-gray-700">
 								{#each filteredUsers as user}
 									<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">{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">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">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">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">
+											<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)}
 											</p>
 										</div>
-										<div class="flex shrink-0 gap-1.5">
+										<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
 											{#if user.role !== 'admin'}
 												{#if user.is_banned}
 													<button
 														onclick={() => unban(user)}
-														class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+														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>
@@ -373,22 +453,31 @@
 													{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
 														<button
 															onclick={() => promoteToHost(user)}
-															class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+															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' && myRole === 'admin'}
+													{#if user.role === 'host'}
+														<!-- Hosts may demote other Hosts (never themselves); backend enforces. -->
 														<button
 															onclick={() => demoteToGuest(user)}
-															class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+															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"
+														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>

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

@@ -86,20 +86,20 @@
 	}
 </script>
 
-<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+<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">
+			<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">„{takenName}" ist bereits vergeben.</p>
+				<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">
+				<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").
 				</p>
 			</div>
 
-			<p class="mb-3 text-sm font-medium text-gray-700">
+			<p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
 				Falls du das bist, melde dich mit deinem PIN an:
 			</p>
 
@@ -111,17 +111,17 @@
 					maxlength={4}
 					inputmode="numeric"
 					pattern="[0-9]*"
-					class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+					class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
 				/>
 
 				{#if recoveryError}
-					<p class="mb-3 text-sm text-red-600">{recoveryError}</p>
+					<p class="mb-3 text-sm text-red-600 dark:text-red-400">{recoveryError}</p>
 				{/if}
 
 				<button
 					type="submit"
 					disabled={recoveryLoading || recoveryPin.length < 4}
-					class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+					class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
 				>
 					{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
 				</button>
@@ -129,15 +129,15 @@
 
 			<button
 				onclick={tryDifferentName}
-				class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50"
+				class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
 			>
 				Anderen Namen wählen
 			</button>
 
 		{:else}
 			<!-- Normal join form -->
-			<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Willkommen!</h1>
+			<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Willkommen!</h1>
-			<p class="mb-6 text-center text-gray-600">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(); }}>
 				<input
@@ -145,25 +145,24 @@
 					bind:value={displayName}
 					placeholder="Dein Name"
 					maxlength={50}
-					class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+					class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
 				/>
 
 				{#if error}
-					<p class="mb-3 text-sm text-red-600">{error}</p>
+					<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
 				{/if}
 
 				<button
 					type="submit"
 					disabled={loading || !displayName.trim()}
-					class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+					class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
 				>
 					{loading ? 'Wird geladen...' : 'Beitreten'}
 				</button>
 			</form>
 
-			<p class="mt-4 text-center text-sm text-gray-500">
+			<p class="mt-4 text-center text-sm">
-				Schon dabei?
+				<a href="/recover" class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a>
-				<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
 			</p>
 		{/if}
 
@@ -172,17 +171,17 @@
 
 {#if showPinModal}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
-		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
+		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900">
-			<h2 class="mb-2 text-xl font-bold text-gray-900">Dein Wiederherstellungs-PIN</h2>
+			<h2 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">
+			<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.
 			</p>
 
-			<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4">
+			<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">{pin}</span>
+				<span class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100">{pin}</span>
 				<button
 					onclick={copyPin}
-					class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300"
+					class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
 				>
 					{copied ? 'Kopiert!' : 'Kopieren'}
 				</button>
@@ -190,7 +189,7 @@
 
 			<button
 				onclick={goToFeed}
-				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700"
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 			>
 				Weiter zur Galerie
 			</button>

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

@@ -39,10 +39,10 @@
 	}
 </script>
 
-<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+<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">Konto wiederherstellen</h1>
+		<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">Gib deinen Namen und deinen PIN ein.</p>
+		<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(); }}>
 			<input
@@ -50,7 +50,7 @@
 				bind:value={displayName}
 				placeholder="Dein Name"
 				maxlength={50}
-				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+				class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
 			/>
 			<input
 				type="text"
@@ -59,25 +59,25 @@
 				maxlength={4}
 				inputmode="numeric"
 				pattern="[0-9]*"
-				class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+				class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
 			/>
 
 			{#if error}
-				<p class="mb-3 text-sm text-red-600">{error}</p>
+				<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
 			{/if}
 
 			<button
 				type="submit"
 				disabled={loading || !displayName.trim() || pin.length < 4}
-				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
 			>
 				{loading ? 'Wird geladen...' : 'Wiederherstellen'}
 			</button>
 		</form>
 
-		<p class="mt-4 text-center text-sm text-gray-500">
+		<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
 			Noch kein Konto?
-			<a href="/join" class="text-blue-600 hover:underline">Neu beitreten</a>
+			<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Neu beitreten</a>
 		</p>
 	</div>
 </div>

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

@@ -6,6 +6,7 @@
 	import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
 	import { get } from 'svelte/store';
 	import { onMount, onDestroy } from 'svelte';
+	import { quotaStore, refreshQuota } from '$lib/quota-store';
 	import type { PendingFile } from '$lib/pending-upload-store';
 
 	interface StagedFile extends PendingFile {
@@ -17,6 +18,8 @@
 	let submitting = $state(false);
 	let captionEl: HTMLTextAreaElement;
 
+	const MAX_CAPTION_LENGTH = 2000;
+
 	// Quick-tag chips derived from caption as the user types
 	let captionTags = $derived.by(() => {
 		const matches = [...caption.matchAll(/#(\w+)/g)];
@@ -30,6 +33,7 @@
 			return;
 		}
 		loadQueue();
+		void refreshQuota();
 
 		// Pull staged files from the pending store (written by UploadSheet)
 		const pf = get(pendingFiles);
@@ -39,6 +43,16 @@
 
 		// Auto-focus caption textarea after a short delay (let layout settle)
 		setTimeout(() => captionEl?.focus(), 80);
+
+		// Revoke blob URLs if user abandons the upload page
+		const handleBeforeUnload = () => {
+			clearPending();
+		};
+		window.addEventListener('beforeunload', handleBeforeUnload);
+
+		return () => {
+			window.removeEventListener('beforeunload', handleBeforeUnload);
+		};
 	});
 
 	onDestroy(() => {
@@ -58,9 +72,11 @@
 
 	async function handleSubmit() {
 		if (stagedFiles.length === 0 || submitting) return;
+		if (caption.length > MAX_CAPTION_LENGTH) return;
 		submitting = true;
+		const hashtagsString = captionTags.join(',');
 		for (const sf of stagedFiles) {
-			await addToQueue(sf.file, caption, '');
+			await addToQueue(sf.file, caption, hashtagsString);
 		}
 		clearPending();
 		goto('/feed');
@@ -69,28 +85,42 @@
 	function isVideo(file: File): boolean {
 		return file.type.startsWith('video/');
 	}
+
+	function formatBytes(bytes: number | null | undefined): string {
+		if (bytes == null || bytes <= 0) return '0 MB';
+		const mb = bytes / (1024 * 1024);
+		if (mb < 1024) return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
+		return `${(mb / 1024).toFixed(1)} GB`;
+	}
+
+	const totalStagedBytes = $derived(stagedFiles.reduce((sum, sf) => sum + sf.file.size, 0));
+	const quotaPercent = $derived(
+		$quotaStore.limit_bytes && $quotaStore.limit_bytes > 0
+			? Math.min(100, (($quotaStore.used_bytes + totalStagedBytes) / $quotaStore.limit_bytes) * 100)
+			: 0
+	);
 </script>
 
 <!-- Full-screen composer — bottom nav is suppressed -->
-<div class="flex min-h-screen flex-col bg-white">
+<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">
+	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
 		<button
 			onclick={cancel}
-			class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+			class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
 			aria-label="Abbrechen"
 		>
 			<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" />
 			</svg>
 		</button>
-		<h1 class="text-base font-semibold text-gray-900">Neuer Beitrag</h1>
+		<h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1>
 		<!-- Submit button in header for desktop convenience -->
 		<button
 			onclick={handleSubmit}
 			disabled={stagedFiles.length === 0 || submitting}
 			class="rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white transition
-				hover:bg-blue-700 disabled:opacity-40"
+				hover:bg-blue-700 disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-400"
 		>
 			{submitting ? 'Wird hochgeladen…' : 'Hochladen'}
 		</button>
@@ -101,9 +131,9 @@
 		{#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">
+					<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">
+							<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>
@@ -123,20 +153,20 @@
 					</div>
 				{/each}
 			</div>
-			<div class="border-b border-gray-100"></div>
+			<div class="border-b border-gray-100 dark:border-gray-800"></div>
 		{: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" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+				<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">Keine Dateien ausgewählt</p>
+					<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">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}
-					class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+					class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
 				>
 					Zurück
 				</button>
@@ -148,34 +178,60 @@
 			<textarea
 				bind:this={captionEl}
 				bind:value={caption}
+				maxlength={MAX_CAPTION_LENGTH}
 				placeholder="Beschreibung hinzufügen… (#hashtags möglich)"
 				rows="4"
 				class="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900
-					placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200"
+					placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200
+					dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:bg-gray-800"
 			></textarea>
+			<div class="mt-1 text-xs text-gray-500 text-right dark:text-gray-400">
+				{caption.length} / {MAX_CAPTION_LENGTH}
+			</div>
 		</div>
 
 		<!-- 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">
+					<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}
 			</div>
 		{/if}
 
+		<!-- Per-user quota — hidden when admin disabled enforcement -->
+		{#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}>
+						{Math.round(quotaPercent)}%
+					</span>
+				</div>
+				<div class="mt-1 h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+					<div
+						class="h-full transition-all"
+						class:bg-blue-500={quotaPercent < 80}
+						class:bg-amber-500={quotaPercent >= 80 && quotaPercent < 95}
+						class:bg-red-500={quotaPercent >= 95}
+						style="width: {quotaPercent}%"
+					></div>
+				</div>
+			</div>
+		{/if}
+
 		<div class="h-8"></div>
 	</div>
 
 	<!-- Sticky submit button at bottom (mobile-primary) -->
-	<div class="border-t border-gray-100 px-4 py-3">
+	<div class="border-t border-gray-100 px-4 py-3 dark:border-gray-800">
 		<button
 			onclick={handleSubmit}
 			disabled={stagedFiles.length === 0 || submitting}
 			class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-semibold
-				text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40"
+				text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-400"
 		>
 			{#if submitting}
 				<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">