feat(eventsnap): UX review batch-3 — feed virtualization, a11y/UX fixes, shared primitives

Frontend - Feed: DOM-windowing via @tanstack/svelte-virtual (new VirtualFeed). The window virtualizer keeps the sticky header, pull-to-refresh, infinite-scroll sentinel and bottom nav working. List = dynamic measured heights keyed by upload id + anchorTo:start so an SSE prepend doesn't jump a scrolled reader; grid = measured square rows. Drops the content-visibility band-aid and the old FeedGrid. measureElement(null) on row unmount prevents ResizeObserver retention; stable option callbacks + guarded setOptions avoid O(n) re-measure on like/comment patches. - Global: viewport-fit=cover (activates safe-area insets), lang=de, PWA manifest + maskable icon + apple-touch metas, prefers-reduced-motion, safe-area-top headers. - Feed reactivity: like/comment SSE patch the single card in place; upload-processed debounced in-place merge; IntersectionObserver leak fixed; shared 60s clock. - CLS: list cards reserve the skeleton aspect box. - Destructive actions (promote/demote/unban, gallery release) routed through ConfirmSheet (host + admin). - Export OOM: streamed download via single-use ticket instead of res.blob(). - Shared primitives: IconButton (44px hit area), scrollLock action; UploadSheet a11y. - Polish: api timeout + non-JSON guard, focus-trap offsetParent fix, pull-to-refresh passive:false + guards, diashow keyboard a11y, Toaster assertive errors, dark-mode gaps, aria-pressed on like/chip state, CameraCapture mic-on-video + retry, ConfirmSheet spinner, upload beforeunload warning, emoji->SVG icons. Backend - social.rs: like/comment SSE broadcasts now carry the fresh count so feed clients patch one card in place instead of refetching page 1. - admin.rs / main.rs: supporting changes for the above. Verified: svelte-check 0 errors, frontend build clean, /feed SSR 200. Runtime feed scroll-feel validation still owed (documented in FOLLOWUPS.md). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-30 19:16:48 +02:00
parent bbec815854
commit e79e020566
42 changed files with 1245 additions and 328 deletions
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1 +1,15 @@
@import "./tailwind-theme.css";
+
+/* Respect the OS "reduce motion" setting. Collapses every animation/transition
+ * (HeartBurst, Skeleton pulse, diashow cross-fades, sheet/FAB slides) to a
+ * near-instant change rather than removing them outright, so state still updates. */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -1,10 +1,21 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<!-- viewport-fit=cover activates the env(safe-area-inset-*) padding used by the
+		     bottom nav, sheets, toasts and FAB on notched / home-indicator devices. -->
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 		<meta name="text-scale" content="scale" />
-		<meta name="theme-color" content="#ffffff" />
+		<!-- Light/dark theme-color so the browser chrome matches the active theme. -->
+		<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+		<meta name="theme-color" content="#030712" media="(prefers-color-scheme: dark)" />
+		<!-- Installable PWA keepsake: manifest + Apple home-screen metadata. -->
+		<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
+		<link rel="icon" href="%sveltekit.assets%/icon.svg" type="image/svg+xml" />
+		<link rel="apple-touch-icon" href="%sveltekit.assets%/icon.svg" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+		<meta name="apple-mobile-web-app-title" content="EventSnap" />
 		<!--
 			FOUC guard: apply the dark class *before* paint, so reloads of pages with
 			theme=dark don't flash a white screen. Mirrors the logic in
--- a/frontend/src/lib/actions/doubletap.ts
+++ b/frontend/src/lib/actions/doubletap.ts
@@ -1,9 +1,14 @@
-// Svelte action — fires a `doubletap` CustomEvent when two pointerup events occur
-// within `interval` ms on roughly the same spot. Used in the lightbox for the
-// Instagram-style "double-tap to like" gesture.
+// Svelte action — the single source of truth for tap gestures on a media element.
+// Fires a `doubletap` CustomEvent when two pointerup events occur within `interval`
+// ms on roughly the same spot (Instagram-style "double-tap to like"), and a
+// `singletap` CustomEvent once `interval` has elapsed with no second tap. Owning
+// both gestures in one place means a component no longer juggles its own debounce
+// timer alongside a separate onclick handler.
 //
 // Native `dblclick` exists, but on iOS Safari it also zooms the page; gating on
-// pointer events lets us preventDefault selectively and avoid the zoom.
+// pointer events lets us preventDefault selectively and avoid the zoom. Keyboard
+// activation still arrives as a normal `click` (detail === 0) — handle that on the
+// element itself for an immediate, latency-free open.

 import type { ActionReturn } from 'svelte/action';

@@ -16,6 +21,7 @@ export interface DoubletapOptions {

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

 export function doubletap(
@@ -26,12 +32,21 @@ export function doubletap(
 	let lastTime = 0;
 	let lastX = 0;
 	let lastY = 0;
+	let singleTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const clearSingle = () => {
+		if (singleTimer) {
+			clearTimeout(singleTimer);
+			singleTimer = null;
+		}
+	};

 	const onPointerUp = (e: PointerEvent) => {
 		const now = performance.now();
 		const dx = Math.abs(e.clientX - lastX);
 		const dy = Math.abs(e.clientY - lastY);
 		if (now - lastTime < interval && dx < MOVE_THRESHOLD && dy < MOVE_THRESHOLD) {
+			clearSingle(); // the pending single-tap was actually the first of a double
 			e.preventDefault();
 			node.dispatchEvent(new CustomEvent('doubletap'));
 			lastTime = 0; // reset so a triple-tap doesn't re-fire
@@ -40,6 +55,12 @@ export function doubletap(
 		lastTime = now;
 		lastX = e.clientX;
 		lastY = e.clientY;
+		// Defer the single-tap action until we're sure no second tap follows.
+		clearSingle();
+		singleTimer = setTimeout(() => {
+			singleTimer = null;
+			node.dispatchEvent(new CustomEvent('singletap'));
+		}, interval);
 	};

 	node.addEventListener('pointerup', onPointerUp);
@@ -49,6 +70,7 @@ export function doubletap(
 			interval = newOptions.interval ?? INTERVAL_MS;
 		},
 		destroy() {
+			clearSingle();
 			node.removeEventListener('pointerup', onPointerUp);
 		}
 	};
--- a/frontend/src/lib/actions/focus-trap.ts
+++ b/frontend/src/lib/actions/focus-trap.ts
@@ -17,8 +17,11 @@ const FOCUSABLE =
 	'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';

 function focusables(root: HTMLElement): HTMLElement[] {
+	// `offsetParent` is null for any `position: fixed` element (and our sheets/modals
+	// are fixed), so it would wrongly drop their buttons. `getClientRects().length`
+	// is true whenever the element is actually rendered — fixed or not.
 	return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
-		(el) => !el.hasAttribute('disabled') && el.offsetParent !== null
+		(el) => !el.hasAttribute('disabled') && el.getClientRects().length > 0
 	);
 }

--- a/frontend/src/lib/actions/pull-to-refresh.ts
+++ b/frontend/src/lib/actions/pull-to-refresh.ts
@@ -22,8 +22,17 @@ export function pullToRefresh(
 ): ActionReturn<PullToRefreshOptions> {
 	let opts = options;
 	let startY = 0;
+	let startX = 0;
 	let pulling = false;
 	let triggered = false;
+	let intentLocked = false; // have we decided this gesture is a vertical pull?
+
+	// Distance the finger must travel before we commit to "this is a vertical pull"
+	// vs. a horizontal swipe or an incidental tap.
+	const INTENT_SLOP = 8;
+	// Rubber-band resistance: the sheet follows the finger at a fraction of 1:1 so
+	// the pull feels elastic rather than rigid.
+	const RESISTANCE = 0.5;

 	function scroller(): HTMLElement | (Window & typeof globalThis) {
 		return node.scrollHeight > node.clientHeight ? node : window;
@@ -40,17 +49,54 @@ export function pullToRefresh(
 		opts.onpull(Math.max(0, delta), Math.max(0, delta) / threshold);
 	}

+	function reset() {
+		pulling = false;
+		intentLocked = false;
+	}
+
 	function onTouchStart(e: TouchEvent) {
 		if (opts.disabled) return;
+		// Ignore pinch / multi-finger gestures entirely.
+		if (e.touches.length !== 1) {
+			reset();
+			return;
+		}
 		if (scrollTop() > 0) return;
 		startY = e.touches[0].clientY;
+		startX = e.touches[0].clientX;
 		pulling = true;
 		triggered = false;
+		intentLocked = false;
 	}

 	function onTouchMove(e: TouchEvent) {
 		if (!pulling || triggered) return;
-		const delta = e.touches[0].clientY - startY;
+		// A second finger landing mid-gesture cancels the pull.
+		if (e.touches.length !== 1) {
+			reset();
+			return;
+		}
+
+		const rawDy = e.touches[0].clientY - startY;
+		const dx = e.touches[0].clientX - startX;
+
+		// Decide intent once, after the finger has moved past the slop. A
+		// horizontal-dominant or upward move is not a pull — bail and let the
+		// browser scroll normally.
+		if (!intentLocked) {
+			if (Math.abs(rawDy) < INTENT_SLOP && Math.abs(dx) < INTENT_SLOP) return;
+			if (rawDy <= 0 || Math.abs(rawDy) <= Math.abs(dx)) {
+				reset();
+				return;
+			}
+			intentLocked = true;
+		}
+
+		// Committed vertical pull at the top edge: stop the browser's own
+		// overscroll / pull-to-refresh from competing for the gesture.
+		if (e.cancelable) e.preventDefault();
+
+		const delta = rawDy * RESISTANCE;
 		reportPull(delta);
 		if (delta > (opts.threshold ?? 60)) {
 			triggered = true;
@@ -60,11 +106,12 @@ export function pullToRefresh(

 	function onTouchEnd() {
 		if (pulling && !triggered) reportPull(0);
-		pulling = false;
+		reset();
 	}

 	node.addEventListener('touchstart', onTouchStart, { passive: true });
-	node.addEventListener('touchmove', onTouchMove, { passive: true });
+	// Non-passive so we can preventDefault() once a top-edge pull is in progress.
+	node.addEventListener('touchmove', onTouchMove, { passive: false });
 	node.addEventListener('touchend', onTouchEnd);
 	node.addEventListener('touchcancel', onTouchEnd);

--- a/frontend/src/lib/actions/scroll-lock.ts
+++ b/frontend/src/lib/actions/scroll-lock.ts
@@ -0,0 +1,50 @@
+// Body scroll-lock for open dialogs/sheets. While any locker is active, the
+// document body can't scroll behind the overlay. Ref-counted so that nested or
+// stacked dialogs (e.g. a ConfirmSheet opened from the LightboxModal) don't let
+// the first one to close unlock the page out from under the others. Compensates
+// for the vanished scrollbar width so the layout doesn't jump on lock.
+
+import type { ActionReturn } from 'svelte/action';
+
+let lockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+
+function lock() {
+	if (typeof document === 'undefined') return;
+	if (lockCount === 0) {
+		const body = document.body;
+		const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+		savedOverflow = body.style.overflow;
+		savedPaddingRight = body.style.paddingRight;
+		body.style.overflow = 'hidden';
+		if (scrollbarWidth > 0) {
+			const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
+			body.style.paddingRight = `${current + scrollbarWidth}px`;
+		}
+	}
+	lockCount++;
+}
+
+function unlock() {
+	if (typeof document === 'undefined') return;
+	lockCount = Math.max(0, lockCount - 1);
+	if (lockCount === 0) {
+		document.body.style.overflow = savedOverflow;
+		document.body.style.paddingRight = savedPaddingRight;
+	}
+}
+
+/**
+ * Locks body scroll for the lifetime of the node. Mount the node only while the
+ * dialog is open (e.g. inside `{#if open}` or alongside a `class:` toggle) so the
+ * action's create/destroy line up with open/close.
+ */
+export function scrollLock(node: HTMLElement): ActionReturn {
+	lock();
+	return {
+		destroy() {
+			unlock();
+		}
+	};
+}
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -13,6 +13,8 @@ export class ApiError extends Error {
 	}
 }

+const TIMEOUT_MS = 20_000;
+
 async function request<T>(
 	method: string,
 	path: string,
@@ -27,23 +29,50 @@ async function request<T>(
 		headers['Content-Type'] = 'application/json';
 	}

-	const res = await fetch(`${BASE}${path}`, {
-		method,
-		headers,
-		body: body !== undefined ? JSON.stringify(body) : undefined
-	});
+	// Abort hung requests so a dead connection surfaces as a friendly error
+	// instead of a spinner that never resolves.
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), TIMEOUT_MS);
+
+	let res: Response;
+	try {
+		res = await fetch(`${BASE}${path}`, {
+			method,
+			headers,
+			body: body !== undefined ? JSON.stringify(body) : undefined,
+			signal: controller.signal
+		});
+	} catch (e) {
+		if (e instanceof DOMException && e.name === 'AbortError') {
+			throw new ApiError(0, 'timeout', 'Zeitüberschreitung – bitte erneut versuchen.');
+		}
+		throw new ApiError(0, 'network', 'Netzwerkfehler – bitte Verbindung prüfen.');
+	} finally {
+		clearTimeout(timer);
+	}

 	if (res.status === 204) {
 		return undefined as T;
 	}

-	const data = await res.json();
+	// A 5xx behind a proxy (or a crash page) can return HTML, not JSON — parsing
+	// it directly would throw an opaque SyntaxError. Read text, parse defensively.
+	const raw = await res.text();
+	let data: { error?: string; message?: string } | unknown = null;
+	if (raw) {
+		try {
+			data = JSON.parse(raw);
+		} catch {
+			data = null;
+		}
+	}

 	if (!res.ok) {
 		if (res.status === 401) {
 			clearAuth();
 		}
-		throw new ApiError(res.status, data.error ?? 'unknown', data.message ?? 'Fehler');
+		const d = (data ?? {}) as { error?: string; message?: string };
+		throw new ApiError(res.status, d.error ?? 'unknown', d.message ?? `Serverfehler (${res.status}).`);
 	}

 	return data as T;
--- a/frontend/src/lib/components/CameraCapture.svelte
+++ b/frontend/src/lib/components/CameraCapture.svelte
@@ -48,7 +48,9 @@
 		try {
 			stream = await navigator.mediaDevices.getUserMedia({
 				video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } },
-				audio: true
+				// Only request the mic for video — a photo-only session shouldn't trigger
+				// a mic permission prompt (which also blocks capture on mic-less devices).
+				audio: mode === 'video'
 			});
 			if (videoEl) {
 				videoEl.srcObject = stream;
@@ -78,6 +80,14 @@
 		await startCamera();
 	}

+	// Switching between photo and video changes whether we need the mic, so
+	// re-acquire the stream (lazily adding the mic for video, dropping it for photo).
+	async function setMode(next: 'photo' | 'video') {
+		if (mode === next) return;
+		mode = next;
+		await startCamera();
+	}
+
 	function capturePhoto() {
 		if (!videoEl || !canvasEl) return;
 		const ctx = canvasEl.getContext('2d');
@@ -156,12 +166,20 @@
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z" />
 					</svg>
 					<p class="text-sm text-white">{error}</p>
-					<button
-						onclick={onclose}
-						class="mt-4 rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
-					>
-						Schliessen
-					</button>
+					<div class="mt-4 flex justify-center gap-2">
+						<button
+							onclick={startCamera}
+							class="rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-900"
+						>
+							Erneut versuchen
+						</button>
+						<button
+							onclick={onclose}
+							class="rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
+						>
+							Schließen
+						</button>
+					</div>
 				</div>
 			</div>
 		{:else}
@@ -198,7 +216,7 @@
 						type="button"
 						role="tab"
 						aria-selected={mode === 'photo'}
-						onclick={() => (mode = 'photo')}
+						onclick={() => setMode('photo')}
 						data-testid="camera-mode-photo"
 						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
 					>
@@ -208,7 +226,7 @@
 						type="button"
 						role="tab"
 						aria-selected={mode === 'video'}
-						onclick={() => (mode = 'video')}
+						onclick={() => setMode('video')}
 						data-testid="camera-mode-video"
 						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
 					>
--- a/frontend/src/lib/components/ConfirmSheet.svelte
+++ b/frontend/src/lib/components/ConfirmSheet.svelte
@@ -6,6 +6,7 @@

 <script lang="ts">
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';

 	interface Props {
 		open: boolean;
@@ -50,6 +51,7 @@
 		class="fixed inset-0 z-50 bg-black/40"
 		aria-label="Schließen"
 		onclick={onCancel}
+		disabled={busy}
 		tabindex="-1"
 	></button>
 	<div
@@ -60,6 +62,7 @@
 		aria-labelledby={titleId}
 		data-testid="confirm-sheet"
 		use:focusTrap={{ onclose: onCancel }}
+		use:scrollLock
 	>
 		<div class="mb-4 flex justify-center">
 			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
@@ -77,17 +80,21 @@
 			onclick={handleConfirm}
 			disabled={busy}
 			data-testid="confirm-sheet-confirm"
-			class="mb-3 w-full rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
+			class="mb-3 flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
 				? 'bg-red-600 hover:bg-red-700 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400'
 				: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400'}"
 		>
+			{#if busy}
+				<span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" aria-hidden="true"></span>
+			{/if}
 			{confirmLabel}
 		</button>
 		<button
 			type="button"
 			onclick={onCancel}
+			disabled={busy}
 			data-testid="confirm-sheet-cancel"
-			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
+			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 disabled:opacity-60 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
 		>
 			{cancelLabel}
 		</button>
--- a/frontend/src/lib/components/ContextSheet.svelte
+++ b/frontend/src/lib/components/ContextSheet.svelte
@@ -22,6 +22,8 @@
 		title?: string;
 	}

+	import { scrollLock } from '$lib/actions/scroll-lock';
+
 	let { open, actions, onClose, title }: Props = $props();

 	let sheet = $state<HTMLDivElement | null>(null);
@@ -76,6 +78,12 @@
 	}
 </script>

+<!-- This sheet stays mounted (translate-y animation), so a sentinel that mounts only
+     while open drives the shared body scroll-lock. -->
+{#if open}
+	<div use:scrollLock class="hidden"></div>
+{/if}
+
 <!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
 <button
 	type="button"
--- a/frontend/src/lib/components/FeedGrid.svelte
+++ b/frontend/src/lib/components/FeedGrid.svelte
@@ -1,91 +0,0 @@
-<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, oncontextmenu, threeCol = false }: Props =
-		$props();
-
-	function isVideo(mime: string): boolean {
-		return mime.startsWith('video/');
-	}
-
-	// 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 $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 dark:bg-gray-800"
-			use:longpress={{ duration: 500 }}
-			onlongpress={() => oncontextmenu?.(upload)}
-		>
-			<button
-				onclick={() => onselect(upload)}
-				class="block h-full w-full"
-				aria-label="Upload anzeigen"
-			>
-				{#if isVideo(upload.mime_type)}
-					<div class="flex h-full items-center justify-center bg-gray-800">
-						{#if tileUrl(upload)}
-							<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">
-								<path d="M8 5v14l11-7z" />
-							</svg>
-						</div>
-					</div>
-				{:else if tileUrl(upload)}
-					<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">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-						</svg>
-					</div>
-				{/if}
-			</button>
-
-			<!-- Overlay with name and stats -->
-			<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2">
-				<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
-				<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
-					<button
-						class="pointer-events-auto flex items-center gap-0.5"
-						onclick={(e) => { e.stopPropagation(); onlike(upload.id); }}
-					>
-						<svg class="h-3.5 w-3.5 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-						</svg>
-						{upload.like_count}
-					</button>
-					<button
-						class="pointer-events-auto flex items-center gap-0.5"
-						onclick={(e) => { e.stopPropagation(); oncomment(upload.id); }}
-					>
-						<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-						</svg>
-						{upload.comment_count}
-					</button>
-				</div>
-			</div>
-		</div>
-	{/each}
-</div>
--- a/frontend/src/lib/components/FeedListCard.svelte
+++ b/frontend/src/lib/components/FeedListCard.svelte
@@ -6,11 +6,9 @@
 	import { doubletap } from '$lib/actions/doubletap';
 	import { avatarPalette, initials } from '$lib/avatar';
 	import { vibrate } from '$lib/haptics';
+	import { now } from '$lib/now';
 	import HeartBurst from './HeartBurst.svelte';

-	// Single-tap debounce so a double-tap doesn't briefly open the lightbox.
-	const SINGLE_TAP_DELAY_MS = 260;
-
 	interface Props {
 		upload: FeedUpload;
 		isOwn?: boolean;
@@ -35,8 +33,8 @@

 	const mediaSrc = $derived(pickMediaUrl($dataMode, upload));

-	function relativeTime(iso: string): string {
-		const diff = Date.now() - new Date(iso).getTime();
+	function relativeTime(iso: string, nowMs: number): string {
+		const diff = nowMs - new Date(iso).getTime();
 		const mins = Math.floor(diff / 60000);
 		if (mins < 1) return 'gerade eben';
 		if (mins < 60) return `vor ${mins} Min.`;
@@ -46,44 +44,35 @@
 		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
 	}

+	// Re-derives off the shared 60s clock so "vor 5 Min." actually advances.
+	const relTime = $derived(relativeTime(upload.created_at, $now));
+
 	function openContext() {
 		oncontextmenu?.(upload);
 	}

 	// Inline heart-burst on double-tap (consistent with the lightbox).
 	let heartBurst = $state(false);
-	let singleTapTimer: ReturnType<typeof setTimeout> | null = null;
-
-	function handleMediaClick() {
-		// Delay single-tap so a quick second tap (double-tap-to-like) wins.
-		if (singleTapTimer) clearTimeout(singleTapTimer);
-		singleTapTimer = setTimeout(() => {
-			singleTapTimer = null;
-			onselect(upload);
-		}, SINGLE_TAP_DELAY_MS);
-	}
+	let burstTimer: ReturnType<typeof setTimeout> | null = null;

 	function handleDoubleTap() {
-		if (singleTapTimer) {
-			clearTimeout(singleTapTimer);
-			singleTapTimer = null;
-		}
 		heartBurst = true;
 		vibrate(10);
 		onlike(upload.id);
-		setTimeout(() => (heartBurst = false), 700);
+		if (burstTimer) clearTimeout(burstTimer);
+		burstTimer = setTimeout(() => (heartBurst = false), 700);
 	}

-	// A feed-delta SSE event can remove this card mid-pending-tap. Clear the timer
-	// on unmount so we don't call onselect with a stale upload reference.
+	// Clear the burst timer on unmount (a feed-delta SSE event can remove this
+	// card mid-animation) so it can't fire against a stale component.
 	onDestroy(() => {
-		if (singleTapTimer) {
-			clearTimeout(singleTapTimer);
-			singleTapTimer = null;
-		}
+		if (burstTimer) clearTimeout(burstTimer);
 	});
 </script>

+<!-- Off-screen cards are removed from the DOM entirely by the parent VirtualFeed
+     window-virtualizer, so this card no longer needs content-visibility — and must
+     not use it, since the virtualizer measures each card's real rendered height. -->
 <article
 	class="bg-white dark:bg-gray-900"
 	use:longpress={{ duration: 500 }}
@@ -100,7 +89,7 @@
 			</div>
 			<div class="min-w-0">
 				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
-				<p class="text-xs text-gray-400 dark:text-gray-500">{relativeTime(upload.created_at)}</p>
+				<p class="text-xs text-gray-400 dark:text-gray-500">{relTime}</p>
 			</div>
 		</div>

@@ -120,9 +109,10 @@
 	<!-- Media -->
 	<button
 		class="relative block w-full"
-		onclick={handleMediaClick}
 		use:doubletap
+		onsingletap={() => onselect(upload)}
 		ondoubletap={handleDoubleTap}
+		onclick={(e) => { if (e.detail === 0) onselect(upload); }}
 		aria-label="Bild vergrößern"
 	>
 		<HeartBurst active={heartBurst} />
@@ -133,6 +123,8 @@
 						src={upload.thumbnail_url ?? upload.preview_url ?? ''}
 						alt=""
 						class="h-full w-full object-cover opacity-80"
+						loading="lazy"
+						decoding="async"
 					/>
 				{/if}
 				<div class="absolute inset-0 flex items-center justify-center">
@@ -144,13 +136,18 @@
 				</div>
 			</div>
 		{:else if mediaSrc}
-			<img
-				src={mediaSrc}
-				alt=""
-				class="w-full object-cover"
-				style="max-height: 80svh"
-				loading="lazy"
-			/>
+			<!-- Reserve the same 4/5 box the skeleton uses so the card doesn't collapse
+			     to height 0 and reflow as images stream in. The uncropped original is one
+			     tap away in the lightbox. -->
+			<div class="aspect-[4/5] w-full bg-gray-100 dark:bg-gray-800">
+				<img
+					src={mediaSrc}
+					alt=""
+					class="h-full w-full object-cover"
+					loading="lazy"
+					decoding="async"
+				/>
+			</div>
 		{:else}
 			<div class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800">
 				<svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -164,6 +161,8 @@
 	<div class="flex items-center gap-4 px-4 py-2">
 		<button
 			onclick={() => { vibrate(10); onlike(upload.id); }}
+			aria-pressed={upload.liked_by_me}
+			aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
 			class="flex items-center gap-1.5 text-sm font-medium transition-colors
 				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
 		>
--- a/frontend/src/lib/components/HashtagChips.svelte
+++ b/frontend/src/lib/components/HashtagChips.svelte
@@ -17,7 +17,8 @@
 	<div class="flex gap-2 overflow-x-auto pb-2">
 		<button
 			onclick={() => onselect(null)}
-			class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+			aria-pressed={selected === null}
+			class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
 				selected === null
 					? 'bg-blue-600 text-white dark:bg-blue-500'
 					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
@@ -28,7 +29,8 @@
 		{#each hashtags as h (h.tag)}
 			<button
 				onclick={() => onselect(h.tag)}
-				class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+				aria-pressed={selected === h.tag}
+				class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
 					selected === h.tag
 						? 'bg-blue-600 text-white dark:bg-blue-500'
 						: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
--- a/frontend/src/lib/components/IconButton.svelte
+++ b/frontend/src/lib/components/IconButton.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	// Icon-only button with a guaranteed ≥44px touch target (WCAG 2.5.5 / Apple HIG).
+	// The visible icon stays whatever size the caller renders; the hit area is
+	// enforced via min-h-11 min-w-11 (44px) so small glyphs are still comfortably
+	// tappable. Always require an `aria-label` since there's no text content.
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Accessible name — required, the button has no visible text. */
+		label: string;
+		onclick?: (e: MouseEvent) => void;
+		disabled?: boolean;
+		title?: string;
+		type?: 'button' | 'submit';
+		tone?: 'neutral' | 'danger';
+		/** Marks toggle state for AT (e.g. like buttons). Omit for plain actions. */
+		pressed?: boolean;
+		/** Extra classes appended after the base styles. */
+		class?: string;
+		'data-testid'?: string;
+		children: Snippet;
+	}
+
+	let {
+		label,
+		onclick,
+		disabled = false,
+		title,
+		type = 'button',
+		tone = 'neutral',
+		pressed,
+		class: extra = '',
+		'data-testid': testid,
+		children
+	}: Props = $props();
+
+	const toneClass = $derived(
+		tone === 'danger'
+			? 'text-red-600 hover:bg-red-50 active:bg-red-100 dark:text-red-400 dark:hover:bg-red-950/40 dark:active:bg-red-950/60'
+			: 'text-gray-500 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:hover:text-gray-100'
+	);
+</script>
+
+<button
+	{type}
+	{onclick}
+	{disabled}
+	{title}
+	aria-label={label}
+	aria-pressed={pressed}
+	data-testid={testid}
+	class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:pointer-events-none {toneClass} {extra}"
+>
+	{@render children()}
+</button>
--- a/frontend/src/lib/components/LightboxModal.svelte
+++ b/frontend/src/lib/components/LightboxModal.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { FeedUpload } from '$lib/types';
 	import { api } from '$lib/api';
 	import { getUserId } from '$lib/auth';
 	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { doubletap } from '$lib/actions/doubletap';
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import { toastError } from '$lib/toast-store';
 	import { vibrate } from '$lib/haptics';
 	import HeartBurst from './HeartBurst.svelte';
@@ -33,6 +35,7 @@
 	let loading = $state(false);
 	let userId = getUserId();
 	let heartBurst = $state(false);
+	let burstTimer: ReturnType<typeof setTimeout> | null = null;

 	const mediaSrc = $derived(pickMediaUrl($dataMode, upload));

@@ -40,9 +43,14 @@
 		heartBurst = true;
 		vibrate(10);
 		onlike(upload.id);
-		setTimeout(() => (heartBurst = false), 700);
+		if (burstTimer) clearTimeout(burstTimer);
+		burstTimer = setTimeout(() => (heartBurst = false), 700);
 	}

+	onDestroy(() => {
+		if (burstTimer) clearTimeout(burstTimer);
+	});
+
 	$effect(() => {
 		loadComments();
 	});
@@ -97,6 +105,7 @@
 	aria-modal="true"
 	aria-labelledby="lightbox-title"
 	use:focusTrap={{ onclose }}
+	use:scrollLock
 >
 	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
 		<!-- Media -->
@@ -104,7 +113,7 @@
 			<button
 				onclick={onclose}
 				aria-label="Schließen"
-				class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70 active:bg-black/70"
+				class="absolute right-2 top-2 z-10 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
 			>
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import type { Snippet } from 'svelte';

 	// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
@@ -48,6 +49,7 @@
 		aria-labelledby={titleId}
 		aria-label={titleId ? undefined : ariaLabel}
 		use:focusTrap={{ onclose: onClose }}
+		use:scrollLock
 	>
 		<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
 			{@render children()}
--- a/frontend/src/lib/components/OnboardingGuide.svelte
+++ b/frontend/src/lib/components/OnboardingGuide.svelte
@@ -3,6 +3,7 @@
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { themePreference, type ThemePreference } from '$lib/theme-store';
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import { vibrate } from '$lib/haptics';

 	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
@@ -100,6 +101,7 @@
 			aria-modal="true"
 			aria-labelledby="onboarding-title"
 			use:focusTrap={{ onclose: dismiss }}
+			use:scrollLock
 		>
 			<!-- Step indicator — tap a pip to jump back. The visible dot is small but
 			     the touch target is padded to ~44 px so it remains tappable on mobile. -->
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@@ -19,15 +19,17 @@
 	class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4"
 	style="bottom: calc(env(safe-area-inset-bottom) + 5rem)"
 	role="region"
-	aria-live="polite"
 	aria-label="Benachrichtigungen"
 	data-testid="toaster"
 >
 	{#each $toasts as t (t.id)}
+		<!-- Errors/warnings interrupt (assertive/alert); successes wait their turn (polite/status). -->
 		<button
 			type="button"
 			onclick={() => dismissToast(t.id)}
 			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
+			role={t.tone === 'error' || t.tone === 'warning' ? 'alert' : 'status'}
+			aria-live={t.tone === 'error' || t.tone === 'warning' ? 'assertive' : 'polite'}
 			data-testid="toast"
 			data-toast-tone={t.tone}
 		>
--- a/frontend/src/lib/components/UploadQueue.svelte
+++ b/frontend/src/lib/components/UploadQueue.svelte
@@ -19,10 +19,10 @@

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

@@ -50,9 +50,9 @@
 </script>

 {#if items.length > 0}
-	<div class="mt-4 rounded-lg border border-gray-200 bg-white">
-		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
-			<h3 class="text-sm font-semibold text-gray-900">
+	<div class="mt-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
+			<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
 				Upload-Warteschlange
 				{#if $isProcessing}
 					<span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
@@ -61,7 +61,7 @@
 			{#if hasCompleted}
 				<button
 					onclick={() => clearCompleted()}
-					class="text-xs text-gray-500 hover:text-gray-700"
+					class="inline-flex min-h-11 items-center px-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
 				>
 					Fertige entfernen
 				</button>
@@ -69,18 +69,18 @@
 		</div>

 		{#if $rateLimitRetryAt && countdown > 0}
-			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800">
+			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
 				Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
 			</div>
 		{/if}

-		<ul class="divide-y divide-gray-100">
+		<ul class="divide-y divide-gray-100 dark:divide-gray-800">
 			{#each items as item (item.id)}
 				<li class="px-4 py-3">
 					<div class="flex items-center justify-between">
 						<div class="min-w-0 flex-1">
-							<p class="truncate text-sm font-medium text-gray-900">{item.fileName}</p>
-							<p class="text-xs text-gray-500">{formatSize(item.fileSize)}</p>
+							<p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{item.fileName}</p>
+							<p class="text-xs text-gray-500 dark:text-gray-400">{formatSize(item.fileSize)}</p>
 						</div>
 						<div class="ml-3 flex items-center gap-2">
 							<span class="text-xs font-medium {statusColor(item.status)}">
@@ -89,7 +89,7 @@
 							{#if item.status === 'error'}
 								<button
 									onclick={() => retryItem(item.id)}
-									class="rounded bg-red-100 px-2 py-0.5 text-xs text-red-700 hover:bg-red-200"
+									class="inline-flex min-h-11 items-center rounded bg-red-100 px-3 text-xs font-medium text-red-700 hover:bg-red-200 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
 								>
 									Erneut
 								</button>
@@ -97,7 +97,7 @@
 							{#if item.status === 'done' || item.status === 'error'}
 								<button
 									onclick={() => removeItem(item.id)}
-									class="text-gray-400 hover:text-gray-600"
+									class="inline-flex h-9 w-9 items-center justify-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
 									aria-label="Entfernen"
 								>
 									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -109,17 +109,17 @@
 					</div>

 					{#if item.status === 'uploading'}
-						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
+						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
 							<div
 								class="h-full rounded-full bg-blue-500 transition-all duration-300"
 								style="width: {item.progress}%"
 							></div>
 						</div>
-						<p class="mt-1 text-right text-xs text-gray-400">{item.progress}%</p>
+						<p class="mt-1 text-right text-xs text-gray-400 dark:text-gray-500">{item.progress}%</p>
 					{/if}

 					{#if item.error}
-						<p class="mt-1 text-xs text-red-500">{item.error}</p>
+						<p class="mt-1 text-xs text-red-500 dark:text-red-400">{item.error}</p>
 					{/if}
 				</li>
 			{/each}
--- a/frontend/src/lib/components/UploadSheet.svelte
+++ b/frontend/src/lib/components/UploadSheet.svelte
@@ -2,11 +2,14 @@
 	import { goto } from '$app/navigation';
 	import { uploadSheetOpen } from '$lib/ui-store';
 	import { pendingFiles } from '$lib/pending-upload-store';
+	import { scrollLock } from '$lib/actions/scroll-lock';
 	import CameraCapture from '$lib/components/CameraCapture.svelte';
 	import type { PendingFile } from '$lib/pending-upload-store';

 	let showCamera = $state(false);
 	let fileInput: HTMLInputElement;
+	let sheet = $state<HTMLDivElement | null>(null);
+	let returnFocus: HTMLElement | null = null;

 	// Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
 	let open = $derived($uploadSheetOpen);
@@ -15,6 +18,47 @@
 		uploadSheetOpen.set(false);
 	}

+	// Focus-trap + Escape, wired manually because the sheet stays mounted for its
+	// translate-y animation (so use:focusTrap, which activates on mount, won't do).
+	// Mirrors ContextSheet. Suspended while the camera overlay owns the screen.
+	function onKeyDown(e: KeyboardEvent) {
+		if (showCamera) return;
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			close();
+			return;
+		}
+		if (e.key !== 'Tab' || !sheet) return;
+		const list = Array.from(sheet.querySelectorAll<HTMLElement>('button:not([disabled])'));
+		if (list.length === 0) return;
+		const first = list[0];
+		const last = list[list.length - 1];
+		const active = document.activeElement as HTMLElement | null;
+		if (e.shiftKey && (active === first || !sheet.contains(active))) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && active === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			returnFocus = (document.activeElement as HTMLElement | null) ?? null;
+			requestAnimationFrame(() => {
+				if (showCamera) return;
+				const first = sheet?.querySelector<HTMLButtonElement>('button:not([disabled])');
+				first?.focus({ preventScroll: true });
+			});
+			window.addEventListener('keydown', onKeyDown);
+			return () => window.removeEventListener('keydown', onKeyDown);
+		} else if (returnFocus) {
+			try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
+			returnFocus = null;
+		}
+	});
+
 	function openGallery() {
 		fileInput?.click();
 	}
@@ -68,22 +112,34 @@
 	onchange={handleFiles}
 />

-<!-- Backdrop -->
-<div
+<!-- Lock body scroll only while open (sheet stays mounted for its animation). -->
+{#if open && !showCamera}
+	<div use:scrollLock class="hidden"></div>
+{/if}
+
+<!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
+<button
+	type="button"
 	class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
 	class:opacity-0={!open}
 	class:pointer-events-none={!open}
 	class:opacity-100={open}
 	onclick={close}
-	aria-hidden="true"
-></div>
+	tabindex="-1"
+	aria-label="Schließen"
+></button>

 <!-- Sheet -->
 <div
+	bind:this={sheet}
 	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)"
+	role="dialog"
+	aria-modal="true"
+	aria-label="Hochladen"
+	tabindex="-1"
 >
 	<!-- Drag handle -->
 	<div class="flex justify-center pt-3 pb-1">
--- a/frontend/src/lib/components/VirtualFeed.svelte
+++ b/frontend/src/lib/components/VirtualFeed.svelte
@@ -0,0 +1,295 @@
+<script lang="ts">
+	// DOM-windowing for the feed. Only the cards/rows inside (and a small overscan
+	// around) the viewport are kept in the DOM — at ~1000 uploads this is the
+	// difference between ~1000 heavy cards (each with its own image, HeartBurst,
+	// long-press + double-tap listeners) and ~10-15.
+	//
+	// We use TanStack's *window* virtualizer (not an inner scroll container) on
+	// purpose: the feed scrolls the document, and the page's sticky header,
+	// pull-to-refresh, infinite-scroll sentinel and bottom nav all rely on that.
+	// The window virtualizer measures against `window` scroll, so every one of
+	// those keeps working untouched.
+	//
+	// Two layouts share one mechanism:
+	//   list — one full-width FeedListCard per row, heights *measured* (captions
+	//          make them variable). Keyed by upload id + `anchorTo:'start'` so an
+	//          SSE prepend (new upload) doesn't yank a scrolled-down reader.
+	//   grid — three square tiles per row, uniform height; still measured to shrug
+	//          off sub-pixel drift over hundreds of rows.
+	import { createWindowVirtualizer } from '@tanstack/svelte-virtual';
+	import { untrack } from 'svelte';
+	import { get } from 'svelte/store';
+	import { browser } from '$app/environment';
+	import type { FeedUpload } from '$lib/types';
+	import { dataMode } from '$lib/data-mode-store';
+	import { longpress } from '$lib/actions/longpress';
+	import FeedListCard from './FeedListCard.svelte';
+
+	interface Props {
+		uploads: FeedUpload[];
+		mode: 'list' | 'grid';
+		myUserId: string | null;
+		onlike: (id: string) => void;
+		oncomment: (id: string) => void;
+		onselect: (upload: FeedUpload) => void;
+		oncontextmenu?: (upload: FeedUpload) => void;
+	}
+
+	let { uploads, mode, myUserId, onlike, oncomment, onselect, oncontextmenu }: Props =
+		$props();
+
+	const COLS = 3;
+	const GRID_GAP = 2; // px — matches the `gap-0.5` the non-virtual grid used.
+	const LIST_ESTIMATE = 700; // px — first-paint guess; real heights replace it on measure.
+
+	let listEl = $state<HTMLDivElement>();
+	let containerWidth = $state(0);
+
+	// Distance from the top of the document to the list container, i.e. the height
+	// of everything above it (sticky header + chips/search). Items' `start` values
+	// are document-absolute (they include this margin), so we feed it back as
+	// `scrollMargin` and subtract it again when positioning. Read live from layout
+	// (getBoundingClientRect + scrollY is scroll-independent) so it self-corrects
+	// when the header grows — e.g. grid filter chips appear.
+	let scrollMargin = $state(0);
+
+	const rowCount = $derived(mode === 'grid' ? Math.ceil(uploads.length / COLS) : uploads.length);
+	const colWidth = $derived(
+		containerWidth > 0 ? (containerWidth - (COLS - 1) * GRID_GAP) / COLS : 120
+	);
+
+	function isVideo(mime: string): boolean {
+		return mime.startsWith('video/');
+	}
+
+	// Grid tiles always use the small thumbnail — 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 $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
+	}
+
+	// STABLE option callbacks — created once, never swapped. They read the live
+	// reactive values (`colWidth`, `uploads`, `mode`) at *call* time, so they stay
+	// current without needing a new function reference. This matters: `getItemKey`
+	// is a dependency of virtual-core's measurements memo, so handing it a fresh
+	// closure on every render would force an O(n) recompute. List keys by upload id
+	// (so an SSE prepend keeps measured heights attached to the right card); grid
+	// keys by row index (uniform rows, nothing to preserve).
+	const estimateSize = (_i: number) => (mode === 'grid' ? colWidth : LIST_ESTIMATE);
+	const getItemKey = (i: number) => (mode === 'list' ? (uploads[i]?.id ?? i) : i);
+
+	// `mode` is fixed for the lifetime of an instance (list and grid are rendered as
+	// separate <VirtualFeed> elements in the parent's {#if} branches, so toggling
+	// remounts rather than mutating this prop). Snapshot it without a reactive read
+	// to set the layout-constant options once.
+	const isGrid = untrack(() => mode === 'grid');
+
+	// Created with static placeholder count/margin; `applyOptions` pushes those.
+	const virtualizer = createWindowVirtualizer<HTMLDivElement>({
+		count: 0,
+		estimateSize,
+		getItemKey,
+		overscan: isGrid ? 4 : 3,
+		gap: isGrid ? GRID_GAP : 0,
+		anchorTo: 'start',
+		scrollMargin: 0
+	});
+
+	// Only `count` (load-more / prepend / delete) and `scrollMargin` (header height
+	// shifts) actually need to be pushed into the virtualizer. Like/comment SSE
+	// patches reassign `uploads` without changing its length — those must NOT
+	// trigger a setOptions (and its getBoundingClientRect reflow + store churn); the
+	// affected card re-renders through normal reactivity instead. We read the raw
+	// instance via `get()` rather than `$virtualizer` so writing never re-triggers
+	// this effect (that would loop).
+	let appliedCount = -1;
+	let appliedMargin = Number.NaN;
+
+	function applyOptions() {
+		const count = rowCount;
+		const margin = listEl ? listEl.getBoundingClientRect().top + window.scrollY : 0;
+		scrollMargin = margin; // drives the template transforms
+		if (count === appliedCount && Math.abs(margin - appliedMargin) < 0.5) return;
+		appliedCount = count;
+		appliedMargin = margin;
+		get(virtualizer).setOptions({ count, scrollMargin: margin });
+	}
+
+	// Re-apply when the row count or column width changes (load-more, prepend,
+	// delete, filter, rotate). `colWidth`/`rowCount` are the only tracked reads, so a
+	// length-stable like/comment patch doesn't re-run this.
+	$effect(() => {
+		void rowCount;
+		void colWidth;
+		applyOptions();
+	});
+
+	// Header offset can also shift on resize without a count change (orientation,
+	// on-screen keyboard, font scaling).
+	$effect(() => {
+		if (!browser) return;
+		const onResize = () => applyOptions();
+		window.addEventListener('resize', onResize);
+		return () => window.removeEventListener('resize', onResize);
+	});
+
+	// Hand each rendered row to the virtualizer's ResizeObserver (it reads the row's
+	// `data-index` and caches the real height by item key). On `destroy` we call
+	// `measureElement(null)`, which sweeps now-disconnected nodes out of the
+	// internal cache + ResizeObserver — without it, every card that scrolls out of
+	// the window stays observed and retained, defeating the point of virtualizing.
+	function measure(node: HTMLDivElement) {
+		get(virtualizer).measureElement(node);
+		return {
+			update() {
+				get(virtualizer).measureElement(node);
+			},
+			destroy() {
+				get(virtualizer).measureElement(null);
+			}
+		};
+	}
+</script>
+
+<div bind:this={listEl} bind:clientWidth={containerWidth} class="w-full">
+	{#if browser}
+		<div style="position: relative; width: 100%; height: {$virtualizer.getTotalSize()}px;">
+			{#each $virtualizer.getVirtualItems() as item (item.key)}
+				{#if mode === 'list'}
+					{@const upload = uploads[item.index]}
+					<div
+						data-index={item.index}
+						use:measure
+						style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({item.start -
+							scrollMargin}px);"
+					>
+						{#if upload}
+							<FeedListCard
+								{upload}
+								isOwn={upload.user_id === myUserId}
+								{onlike}
+								{oncomment}
+								{onselect}
+								{oncontextmenu}
+							/>
+						{/if}
+					</div>
+				{:else}
+					<div
+						data-index={item.index}
+						use:measure
+						style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({item.start -
+							scrollMargin}px);"
+					>
+						<div class="grid grid-cols-3 gap-0.5">
+							{#each uploads.slice(item.index * COLS, item.index * COLS + COLS) as upload (upload.id)}
+								<!-- Tile — mirrors the markup the old FeedGrid used. -->
+								<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"
+										aria-label="Upload anzeigen"
+									>
+										{#if isVideo(upload.mime_type)}
+											<div class="flex h-full items-center justify-center bg-gray-800">
+												{#if tileUrl(upload)}
+													<img
+														src={tileUrl(upload)}
+														alt=""
+														class="h-full w-full object-cover"
+														loading="lazy"
+														decoding="async"
+													/>
+												{/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">
+														<path d="M8 5v14l11-7z" />
+													</svg>
+												</div>
+											</div>
+										{:else if tileUrl(upload)}
+											<img
+												src={tileUrl(upload)}
+												alt=""
+												class="h-full w-full object-cover"
+												loading="lazy"
+												decoding="async"
+											/>
+										{:else}
+											<div class="flex h-full items-center justify-center text-gray-400">
+												<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="1.5"
+														d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+													/>
+												</svg>
+											</div>
+										{/if}
+									</button>
+
+									<div
+										class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2"
+									>
+										<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
+										<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
+											<button
+												class="pointer-events-auto -m-1 flex items-center gap-0.5 p-1"
+												onclick={(e) => {
+													e.stopPropagation();
+													onlike(upload.id);
+												}}
+												aria-pressed={upload.liked_by_me}
+												aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
+											>
+												<svg
+													class="h-4 w-4 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+													/>
+												</svg>
+												{upload.like_count}
+											</button>
+											<button
+												class="pointer-events-auto -m-1 flex items-center gap-0.5 p-1"
+												onclick={(e) => {
+													e.stopPropagation();
+													oncomment(upload.id);
+												}}
+												aria-label="Kommentare anzeigen"
+											>
+												<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="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>
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>
--- a/frontend/src/lib/data-mode-store.ts
+++ b/frontend/src/lib/data-mode-store.ts
@@ -5,7 +5,7 @@
 // of the device the guest is currently holding, not their identity.
 //
 // Used by:
-// - Feed cards (FeedListCard / FeedGrid) to pick which URL to render
+// - Feed cards (FeedListCard / VirtualFeed grid tiles) to pick which URL to render
 // - Lightbox
 // - Diashow
 // See [docs/FEATURES.md §2.5] for the user-facing model.
--- a/frontend/src/lib/now.ts
+++ b/frontend/src/lib/now.ts
@@ -0,0 +1,10 @@
+import { readable } from 'svelte/store';
+
+// A single 60-second clock shared by every component that renders a relative
+// timestamp ("vor 5 Min."). One interval for the whole app — not one per card —
+// so a 1000-item feed stays cheap, and the interval is torn down automatically
+// when the last subscriber unsubscribes.
+export const now = readable(Date.now(), (set) => {
+	const id = setInterval(() => set(Date.now()), 60_000);
+	return () => clearInterval(id);
+});
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { getToken } from '$lib/auth';
-	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';

 	onMount(() => {
@@ -12,3 +11,11 @@
 		}
 	});
 </script>
+
+<!-- Brief branded splash so the redirect doesn't flash a blank page. -->
+<div class="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
+	<div class="flex flex-col items-center gap-3">
+		<div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
+		<p class="text-sm font-medium text-gray-400 dark:text-gray-500">EventSnap</p>
+	</div>
+</div>
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -127,9 +127,9 @@

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

@@ -137,7 +137,7 @@

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
 		<div class="mx-auto flex max-w-lg items-center px-4 py-4">
 			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
 		</div>
@@ -213,7 +213,7 @@
 					<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 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
+						class="inline-flex min-h-11 items-center rounded-md bg-amber-100 px-4 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
 					>
 						{pinCopied ? 'Kopiert!' : 'Kopieren'}
 					</button>
@@ -250,9 +250,9 @@
 			</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: '🌙' }
+					{ value: 'system', label: 'System' },
+					{ value: 'light',  label: 'Hell' },
+					{ value: 'dark',   label: 'Dunkel' }
 				] as opt (opt.value)}
 					{@const selected = $themePreference === opt.value}
 					<button
@@ -265,7 +265,16 @@
 								? '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>
+						<!-- SVG icons render consistently everywhere (emoji show as tofu on some Android). -->
+						<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+							{#if opt.value === 'system'}
+								<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z" />
+							{:else if opt.value === 'light'}
+								<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+							{:else}
+								<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+							{/if}
+						</svg>
 						<span class="font-medium">{opt.label}</span>
 					</button>
 				{/each}
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -6,6 +6,7 @@
 	import { toast, toastError } from '$lib/toast-store';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import Modal from '$lib/components/Modal.svelte';
+	import IconButton from '$lib/components/IconButton.svelte';

 	interface StatsDto {
 		user_count: number;
@@ -136,6 +137,24 @@

 	const myRole = getRole();

+	// Generic confirm-then-run for irreversible / privilege-changing actions
+	// (promote, demote, unban, release gallery). Reuses the shared ConfirmSheet.
+	interface PendingConfirm {
+		title: string;
+		message: string;
+		confirmLabel: string;
+		tone: 'default' | 'danger';
+		run: () => Promise<void>;
+	}
+	let confirmAction = $state<PendingConfirm | null>(null);
+
+	async function runConfirmAction() {
+		const action = confirmAction;
+		if (!action) return;
+		await action.run();
+		confirmAction = null;
+	}
+
 	onMount(async () => {
 		const token = getToken();
 		const role = getRole();
@@ -173,7 +192,20 @@
 		}
 	}

+	// Keys rendered as number inputs — used to reject empty/invalid numeric saves.
+	const NUMBER_KEYS = new Set(
+		CONFIG_GROUPS.flatMap((g) => g.fields.filter((f) => f.kind === 'number').map((f) => f.key))
+	);
+
 	async function saveConfig() {
+		// Don't let a cleared number field persist as an empty/NaN config value.
+		for (const key of NUMBER_KEYS) {
+			const v = configDraft[key];
+			if (v !== undefined && v !== config[key] && (String(v).trim() === '' || !Number.isFinite(Number(v)))) {
+				toastError(new Error('Bitte gib für alle Zahlenfelder einen gültigen Wert ein.'));
+				return;
+			}
+		}
 		saving = true;
 		try {
 			const changes: Record<string, string> = {};
@@ -323,6 +355,17 @@
 	}
 </script>

+<!-- Confirmation for irreversible / privilege-changing actions (promote/demote/unban/release). -->
+<ConfirmSheet
+	open={confirmAction !== null}
+	title={confirmAction?.title ?? ''}
+	message={confirmAction?.message ?? ''}
+	confirmLabel={confirmAction?.confirmLabel ?? 'Bestätigen'}
+	tone={confirmAction?.tone ?? 'default'}
+	onConfirm={runConfirmAction}
+	onCancel={() => (confirmAction = null)}
+/>
+
 <!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
 <ConfirmSheet
 	open={pinResetTarget !== null}
@@ -380,17 +423,13 @@

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
 		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
-			<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 dark:text-gray-400 dark:hover:bg-gray-800"
-				aria-label="Zurück"
-			>
+			<IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
 				</svg>
-			</button>
+			</IconButton>
 			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
 		</div>
 	</div>
@@ -414,7 +453,7 @@
 		{#if loading}
 			<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
 		{:else if error}
-			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
+			<div role="alert" class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300">{error}</div>
 		{:else}

 			<!-- ── Stats tab ────────────────────────────────────────────────── -->
@@ -500,6 +539,8 @@
 												id={field.key}
 												type="number"
 												step="any"
+												min="0"
+												inputmode="decimal"
 												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"
 											/>
@@ -532,7 +573,13 @@
 					<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
 						<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
 						<button
-							onclick={releaseGallery}
+							onclick={() => (confirmAction = {
+								title: 'Galerie freigeben?',
+								message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
+								confirmLabel: 'Freigeben',
+								tone: 'danger',
+								run: releaseGallery
+							})}
 							class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 						>
 							Galerie freigeben
@@ -625,17 +672,35 @@
 								<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 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
+											<button onclick={() => (confirmAction = {
+												title: 'Sperre aufheben?',
+												message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
+												confirmLabel: 'Entsperren',
+												tone: 'default',
+												run: () => unban(user)
+											})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
 												Entsperren
 											</button>
 										{:else}
 											{#if user.role === 'guest'}
-												<button onclick={() => 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">
+												<button onclick={() => (confirmAction = {
+													title: 'Zum Host befördern?',
+													message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
+													confirmLabel: 'Befördern',
+													tone: 'default',
+													run: () => promoteToHost(user)
+												})} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60">
 													Host
 												</button>
 											{/if}
 											{#if user.role === 'host'}
-												<button onclick={() => 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">
+												<button onclick={() => (confirmAction = {
+													title: 'Zum Gast degradieren?',
+													message: `${user.display_name} verliert alle Host-Rechte.`,
+													confirmLabel: 'Degradieren',
+													tone: 'danger',
+													run: () => demoteToGuest(user)
+												})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
 													Degradieren
 												</button>
 											{/if}
--- a/frontend/src/routes/diashow/+page.svelte
+++ b/frontend/src/routes/diashow/+page.svelte
@@ -98,6 +98,14 @@
 		overlayHideTimer = setTimeout(() => (showOverlay = false), 4000);
 	}

+	// Manual toggle from the always-visible control button — stays open (no
+	// auto-hide) so keyboard users can tab through the controls without them
+	// vanishing mid-interaction.
+	function toggleOverlay() {
+		if (overlayHideTimer) clearTimeout(overlayHideTimer);
+		showOverlay = !showOverlay;
+	}
+
 	function togglePause() {
 		paused = !paused;
 		if (paused) {
@@ -166,19 +174,52 @@
 		<div class="text-white/60">Lade…</div>
 	{/if}

+	<!-- Always-visible controls: keyboard-reachable, so the show is never a trap and
+	     the controls are reachable without a pointer. Honours the notch. -->
+	<div
+		class="absolute right-0 top-0 z-10 flex gap-2 p-3"
+		style="padding-top: calc(env(safe-area-inset-top) + 0.75rem)"
+	>
+		<button
+			type="button"
+			onclick={(e) => { e.stopPropagation(); toggleOverlay(); }}
+			aria-label="Steuerung anzeigen"
+			aria-expanded={showOverlay}
+			class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
+		>
+			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
+			</svg>
+		</button>
+		<button
+			type="button"
+			onclick={(e) => { e.stopPropagation(); exit(); }}
+			aria-label="Diashow beenden"
+			class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
+		>
+			<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>
+	</div>
+
 	{#if showOverlay}
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 		<div
 			class="absolute inset-x-0 bottom-0 flex flex-col gap-3 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-6 pb-10"
-			onclick={(e) => e.stopPropagation()}
 		>
 			<div class="flex flex-wrap items-center gap-2">
 				<button
 					type="button"
 					onclick={togglePause}
-					class="rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
+					class="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
 				>
-					{paused ? '▶ Fortsetzen' : '⏸ Pause'}
+					{#if paused}
+						<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+						Fortsetzen
+					{:else}
+						<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
+						Pause
+					{/if}
 				</button>

 				<label class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm">
@@ -206,9 +247,10 @@
 				<button
 					type="button"
 					onclick={exit}
-					class="ml-auto rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
+					class="ml-auto inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
 				>
-					✕ Beenden
+					<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+					Beenden
 				</button>
 			</div>

--- a/frontend/src/routes/export/+page.svelte
+++ b/frontend/src/routes/export/+page.svelte
@@ -6,6 +6,7 @@
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { toastError } from '$lib/toast-store';
 	import { focusTrap } from '$lib/actions/focus-trap';
+	import IconButton from '$lib/components/IconButton.svelte';

 	interface JobStatus {
 		status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
@@ -75,35 +76,33 @@
 		}
 	}

-	async function downloadFile(endpoint: string, filename: string) {
+	// Stream the (potentially multi-GB) archive straight to disk via a top-level
+	// download navigation instead of fetch()+blob() — buffering the whole ZIP in
+	// memory crashes mobile Safari/Chrome. The navigation can't send the Bearer
+	// header, so we first exchange the token for a single-use ticket and pass it
+	// as a query param; the server responds with Content-Disposition: attachment,
+	// so the browser downloads it and we stay on the page.
+	async function downloadFile(endpoint: string) {
 		try {
-			const token = getToken();
-			const res = await fetch(endpoint, {
-				headers: token ? { Authorization: `Bearer ${token}` } : {}
-			});
-			if (!res.ok) {
-				toastError(new Error(`Download fehlgeschlagen (${res.status}).`));
-				return;
-			}
-			const blob = await res.blob();
-			const url = URL.createObjectURL(blob);
+			const { ticket } = await api.post<{ ticket: string }>('/export/ticket');
 			const a = document.createElement('a');
-			a.href = url;
-			a.download = filename;
+			a.href = `${endpoint}?ticket=${encodeURIComponent(ticket)}`;
+			a.rel = 'noopener';
+			document.body.appendChild(a);
 			a.click();
-			URL.revokeObjectURL(url);
+			a.remove();
 		} catch (e) {
 			toastError(e);
 		}
 	}

 	function downloadZip() {
-		downloadFile('/api/v1/export/zip', 'Gallery.zip');
+		downloadFile('/api/v1/export/zip');
 	}

 	function downloadHtml() {
 		if (localStorage.getItem(HTML_GUIDE_KEY)) {
-			downloadFile('/api/v1/export/html', 'Memories.zip');
+			downloadFile('/api/v1/export/html');
 		} else {
 			showHtmlGuide = true;
 		}
@@ -112,7 +111,7 @@
 	function confirmHtmlDownload() {
 		localStorage.setItem(HTML_GUIDE_KEY, '1');
 		showHtmlGuide = false;
-		downloadFile('/api/v1/export/html', 'Memories.zip');
+		downloadFile('/api/v1/export/html');
 	}
 </script>

@@ -154,19 +153,13 @@
 {/if}

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
-	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
 		<div class="mx-auto flex max-w-lg items-center gap-2 px-4 py-4">
-			<button
-				type="button"
-				onclick={() => goto('/feed')}
-				data-testid="export-back"
-				class="-ml-2 flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
-				aria-label="Zurück"
-			>
+			<IconButton label="Zurück" onclick={() => goto('/feed')} data-testid="export-back" class="-ml-2">
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
 				</svg>
-			</button>
+			</IconButton>
 			<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
 		</div>
 	</div>
--- a/frontend/src/routes/feed/+page.svelte
+++ b/frontend/src/routes/feed/+page.svelte
@@ -4,8 +4,7 @@
 	import { api } from '$lib/api';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { onMount, onDestroy } from 'svelte';
-	import FeedGrid from '$lib/components/FeedGrid.svelte';
-	import FeedListCard from '$lib/components/FeedListCard.svelte';
+	import VirtualFeed from '$lib/components/VirtualFeed.svelte';
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
 	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
@@ -28,6 +27,8 @@
 	let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
+	let feedObserver: IntersectionObserver | null = null;
+	let inPlaceRefreshTimer: ReturnType<typeof setTimeout> | null = null;
 	let pendingDeleteId = $state<string | null>(null);

 	// ─────────────────────────────────────────────────────────────────────────
@@ -190,7 +191,10 @@
 					uploads = [upload, ...uploads];
 				} catch { /* ignore */ }
 			}),
-			onSseEvent('upload-processed', () => loadFeed(true)),
+			// A processed upload gains preview/thumbnail URLs. Coalesce bursts (bulk
+			// uploads fire one per file) into a single in-place merge so the feed
+			// neither hammers the server nor collapses to page 1 / loses scroll.
+			onSseEvent('upload-processed', () => scheduleInPlaceRefresh()),
 			onSseEvent('upload-deleted', (data) => {
 				try {
 					const payload = JSON.parse(data) as { upload_id: string };
@@ -198,8 +202,11 @@
 					if (selectedUpload?.id === payload.upload_id) selectedUpload = null;
 				} catch { /* ignore */ }
 			}),
-			onSseEvent('like-update', () => loadFeed(true)),
-			onSseEvent('new-comment', () => loadFeed(true)),
+			// Patch the single affected card in place from the SSE payload instead of
+			// refetching page 1 — a busy event fires these constantly and a full reload
+			// would yank every scrolled-down user back to the top on each reaction.
+			onSseEvent('like-update', (data) => patchCount(data, 'like_count')),
+			onSseEvent('new-comment', (data) => patchCount(data, 'comment_count')),
 			// 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) => {
@@ -219,21 +226,68 @@
 		);

 		if (sentinel) {
-			const observer = new IntersectionObserver(
+			feedObserver = new IntersectionObserver(
 				(entries) => {
 					if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
 				},
 				{ rootMargin: '200px' }
 			);
-			observer.observe(sentinel);
+			feedObserver.observe(sentinel);
 		}
 	});

 	onDestroy(() => {
 		disconnectSse();
 		for (const unsub of unsubscribers) unsub();
+		feedObserver?.disconnect();
+		if (inPlaceRefreshTimer) clearTimeout(inPlaceRefreshTimer);
 	});

+	// Patch a single upload's like/comment count from an SSE payload without
+	// disturbing scroll position or the rest of the loaded feed.
+	function patchCount(data: string, field: 'like_count' | 'comment_count') {
+		try {
+			const payload = JSON.parse(data) as {
+				upload_id: string;
+				like_count?: number;
+				comment_count?: number;
+			};
+			const value = payload[field];
+			if (value === undefined) return;
+			uploads = uploads.map((u) => (u.id === payload.upload_id ? { ...u, [field]: value } : u));
+			if (selectedUpload?.id === payload.upload_id) {
+				selectedUpload = { ...selectedUpload, [field]: value };
+			}
+		} catch { /* ignore malformed payloads */ }
+	}
+
+	// Debounced page-1 fetch that *merges* (updates existing cards in place, prepends
+	// genuinely new ones) rather than replacing the array — preserves scroll and any
+	// pages already loaded below the fold.
+	function scheduleInPlaceRefresh() {
+		if (inPlaceRefreshTimer) return;
+		inPlaceRefreshTimer = setTimeout(() => {
+			inPlaceRefreshTimer = null;
+			void refreshFeedInPlace();
+		}, 800);
+	}
+
+	async function refreshFeedInPlace() {
+		try {
+			const params = new URLSearchParams();
+			if (selectedHashtag) params.set('hashtag', selectedHashtag);
+			params.set('limit', '20');
+			const res = await api.get<FeedResponse>(`/feed?${params}`);
+			const byId = new Map(res.uploads.map((u) => [u.id, u]));
+			const known = new Set(uploads.map((u) => u.id));
+			uploads = uploads.map((u) => byId.get(u.id) ?? u);
+			const fresh = res.uploads.filter((u) => !known.has(u.id));
+			if (fresh.length) uploads = [...fresh, ...uploads];
+		} catch {
+			// Background refresh — stay quiet, the next event or pull-to-refresh retries.
+		}
+	}
+
 	async function loadFeed(refresh = false) {
 		try {
 			const params = new URLSearchParams();
@@ -359,7 +413,7 @@
 	<!-- Live pull-progress indicator: grows during the drag, rotates past threshold,
 	     swaps to a spinner once the network refresh kicks off. -->
 	{#if refreshing || pullProgress > 0}
-		<div class="pointer-events-none fixed left-0 right-0 top-2 z-40 flex justify-center">
+		<div class="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] z-40 flex justify-center">
 			<div
 				class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300"
 				style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}"
@@ -386,7 +440,7 @@
 		</div>
 	{/if}
 	<!-- Sticky header — opaque fallback for browsers without backdrop-filter. -->
-	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900">
+	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 pt-[env(safe-area-inset-top)] backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900">
 		<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
 			<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>

@@ -538,35 +592,38 @@
 			<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 -->
+		<!-- List view: chronological full-width cards (DOM-windowed) -->
 		<div class="mx-auto max-w-2xl">
-			{#each uploads as upload (upload.id)}
-				<FeedListCard
-					{upload}
-					isOwn={upload.user_id === myUserId}
-					onlike={handleLike}
-					oncomment={openComments}
-					onselect={(u) => (selectedUpload = u)}
-					oncontextmenu={openContextSheet}
-				/>
-			{/each}
+			<VirtualFeed
+				mode="list"
+				uploads={uploads}
+				{myUserId}
+				onlike={handleLike}
+				oncomment={openComments}
+				onselect={(u) => (selectedUpload = u)}
+				oncontextmenu={openContextSheet}
+			/>
 		</div>
 	{:else}
-		<!-- Grid view: 3-col, filters applied -->
+		<!-- Grid view: 3-col, filters applied (DOM-windowed by row) -->
 		<div class="mx-auto max-w-2xl">
 			{#if displayUploads.length === 0}
 				<div class="py-16 text-center">
 					<p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p>
+					{#if nextCursor}
+						<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Es sind noch nicht alle Beiträge geladen — scrolle weiter, um mehr zu durchsuchen.</p>
+					{/if}
 					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button>
 				</div>
 			{:else}
-				<FeedGrid
+				<VirtualFeed
+					mode="grid"
 					uploads={displayUploads}
+					{myUserId}
 					onlike={handleLike}
 					oncomment={openComments}
 					onselect={(u) => (selectedUpload = u)}
 					oncontextmenu={openContextSheet}
-					threeCol={true}
 				/>
 			{/if}
 		</div>
--- a/frontend/src/routes/host/+page.svelte
+++ b/frontend/src/routes/host/+page.svelte
@@ -6,6 +6,7 @@
 	import { toast, toastError } from '$lib/toast-store';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import Modal from '$lib/components/Modal.svelte';
+	import IconButton from '$lib/components/IconButton.svelte';

 	interface UserSummary {
 		id: string;
@@ -56,6 +57,25 @@

 	const myRole = getRole();

+	// Generic confirm-then-run for the irreversible / privilege-changing actions
+	// (promote, demote, unban, release gallery) that previously fired on one tap.
+	// Reuses the shared ConfirmSheet; the wrapped fns keep their own toast/reload.
+	interface PendingConfirm {
+		title: string;
+		message: string;
+		confirmLabel: string;
+		tone: 'default' | 'danger';
+		run: () => Promise<void>;
+	}
+	let confirmAction = $state<PendingConfirm | null>(null);
+
+	async function runConfirmAction() {
+		const action = confirmAction;
+		if (!action) return;
+		await action.run();
+		confirmAction = null;
+	}
+
 	/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
 	function canResetPinFor(target: UserSummary): boolean {
 		if (target.role === 'admin') return false;
@@ -196,6 +216,17 @@
 	}
 </script>

+<!-- Confirmation for irreversible / privilege-changing actions (promote/demote/unban/release). -->
+<ConfirmSheet
+	open={confirmAction !== null}
+	title={confirmAction?.title ?? ''}
+	message={confirmAction?.message ?? ''}
+	confirmLabel={confirmAction?.confirmLabel ?? 'Bestätigen'}
+	tone={confirmAction?.tone ?? 'default'}
+	onConfirm={runConfirmAction}
+	onCancel={() => (confirmAction = null)}
+/>
+
 <!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
 <ConfirmSheet
 	open={pinResetTarget !== null}
@@ -266,17 +297,13 @@

 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
-	<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+	<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
 		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
-			<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 dark:text-gray-400 dark:hover:bg-gray-800"
-				aria-label="Zurück"
-			>
+			<IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
 				</svg>
-			</button>
+			</IconButton>
 			<div class="min-w-0">
 				<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1>
 				{#if event}
@@ -297,6 +324,7 @@
 			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
 				<button
 					onclick={() => (statsOpen = !statsOpen)}
+					aria-expanded={statsOpen}
 					class="flex w-full items-center justify-between px-5 py-4"
 				>
 					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
@@ -337,6 +365,7 @@
 			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
 				<button
 					onclick={() => (settingsOpen = !settingsOpen)}
+					aria-expanded={settingsOpen}
 					class="flex w-full items-center justify-between px-5 py-4"
 				>
 					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
@@ -357,7 +386,13 @@
 							{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
 						</button>
 						<button
-							onclick={releaseGallery}
+							onclick={() => (confirmAction = {
+								title: 'Galerie freigeben?',
+								message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
+								confirmLabel: 'Freigeben',
+								tone: 'danger',
+								run: releaseGallery
+							})}
 							disabled={event.export_released}
 							class="rounded-lg px-4 py-2 text-sm font-medium transition
 								{event.export_released ? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}"
@@ -372,6 +407,7 @@
 			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
 				<button
 					onclick={() => (usersOpen = !usersOpen)}
+					aria-expanded={usersOpen}
 					class="flex w-full items-center justify-between px-5 py-4"
 				>
 					<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
@@ -424,7 +460,13 @@
 											{#if user.role !== 'admin'}
 												{#if user.is_banned}
 													<button
-														onclick={() => unban(user)}
+														onclick={() => (confirmAction = {
+															title: 'Sperre aufheben?',
+															message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
+															confirmLabel: 'Entsperren',
+															tone: 'default',
+															run: () => unban(user)
+														})}
 														class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
 													>
 														Entsperren
@@ -432,7 +474,13 @@
 												{:else}
 													{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
 														<button
-															onclick={() => promoteToHost(user)}
+															onclick={() => (confirmAction = {
+																title: 'Zum Host befördern?',
+																message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
+																confirmLabel: 'Befördern',
+																tone: 'default',
+																run: () => promoteToHost(user)
+															})}
 															class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"
 														>
 															Host
@@ -441,7 +489,13 @@
 													{#if user.role === 'host'}
 														<!-- Hosts may demote other Hosts (never themselves); backend enforces. -->
 														<button
-															onclick={() => demoteToGuest(user)}
+															onclick={() => (confirmAction = {
+																title: 'Zum Gast degradieren?',
+																message: `${user.display_name} verliert alle Host-Rechte.`,
+																confirmLabel: 'Degradieren',
+																tone: 'danger',
+																run: () => demoteToGuest(user)
+															})}
 															class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
 														>
 															Degradieren
--- a/frontend/src/routes/recover/+page.svelte
+++ b/frontend/src/routes/recover/+page.svelte
@@ -3,6 +3,7 @@
 	import { api, ApiError } from '$lib/api';
 	import { setAuth, getPin, getToken } from '$lib/auth';
 	import { browser } from '$app/environment';
+	import IconButton from '$lib/components/IconButton.svelte';

 	function goBack() {
 		// Prefer the actual previous page (most users land here from /join or /account).
@@ -67,19 +68,13 @@
 	}
 </script>

-<div class="flex min-h-screen flex-col bg-gray-50 px-4 dark:bg-gray-950">
+<div class="flex min-h-screen flex-col bg-gray-50 px-4 pt-[env(safe-area-inset-top)] dark:bg-gray-950">
 	<div class="-mx-4 flex items-center px-2 py-3">
-		<button
-			type="button"
-			onclick={goBack}
-			data-testid="recover-back"
-			class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
-			aria-label="Zurück"
-		>
+		<IconButton label="Zurück" onclick={goBack} data-testid="recover-back">
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
 			</svg>
-		</button>
+		</IconButton>
 	</div>
 	<div class="m-auto w-full max-w-sm">
 		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -8,6 +8,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { quotaStore, refreshQuota } from '$lib/quota-store';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
+	import IconButton from '$lib/components/IconButton.svelte';
 	import { vibrate } from '$lib/haptics';
 	import type { PendingFile } from '$lib/pending-upload-store';

@@ -47,9 +48,14 @@
 		// 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();
+		// Warn before a hard browser navigation (close / reload / external link) drops
+		// staged files or an unsent caption. In-app navigation is already guarded by
+		// the discard ConfirmSheet in cancel().
+		const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+			if (stagedFiles.length > 0 || caption.trim().length > 0) {
+				e.preventDefault();
+				e.returnValue = '';
+			}
 		};
 		window.addEventListener('beforeunload', handleBeforeUnload);

@@ -60,6 +66,9 @@

 	onDestroy(() => {
 		showBottomNav.set(true);
+		// Revoke any staged preview blob URLs on leave so they don't leak. The queue
+		// holds the underlying File objects, so this is safe after submit too.
+		for (const sf of stagedFiles) URL.revokeObjectURL(sf.previewUrl);
 	});

 	function removeFile(idx: number) {
@@ -118,16 +127,12 @@
 <!-- Full-screen composer — bottom nav is suppressed -->
 <div class="flex min-h-screen flex-col bg-white dark:bg-gray-950">
 	<!-- Header -->
-	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 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 dark:text-gray-400 dark:hover:bg-gray-800"
-			aria-label="Abbrechen"
-		>
+	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] dark:border-gray-800">
+		<IconButton label="Abbrechen" onclick={cancel}>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 			</svg>
-		</button>
+		</IconButton>
 		<h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1>
 		<!-- Submit button in header for desktop convenience -->
 		<button
@@ -158,10 +163,10 @@
 						{/if}
 						<button
 							onclick={() => removeFile(i)}
-							class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white"
+							class="absolute right-1 top-1 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white"
 							aria-label="Entfernen"
 						>
-							<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+							<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
 								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 							</svg>
 						</button>