Merge feat/ux-review-followups: UX review batch fixes + shared primitives

feat(frontend): UX review followups — primitives + a11y/UX fixes across 4 passes
New shared primitives: - Toaster + toast-store, ConfirmSheet, Modal, focusTrap action, pullToRefresh action, avatarPalette + initials helper, Skeleton, HeartBurst, haptics, export-status store with onClearAuth hook Critical UX/a11y: - Replaced window.confirm with branded ConfirmSheet - Focus management + Escape on every modal (PIN, Lightbox, Onboarding, ContextSheet, data-mode sheet, leave-confirm, HTML guide, host/admin ban + PIN-display modals) - Sheet backdrops are real buttons with aria-label - Silent ApiError catches now surface via global Toaster Major polish: - Dark-mode parity on HashtagChips + avatars (shared palette) - Conditional Export tab in BottomNav (badge dot when ZIP ready) - Back chevrons on /recover (history-aware) and /export - Upload composer discard confirmation when content is staged - Camera segmented Photo/Video shutter - PIN auto-submit on 4th digit, paste-flash-free (controlled input) - Welcome-back toast on /feed after PIN recovery Minor: - Skeleton states on feed; pull-to-refresh with live drag indicator - Haptics on like / capture / submit / PIN-copy / onboarding complete - Comment 500-char counter; quota "Fast voll" / "Limit erreicht" labels - Onboarding pip ≥24px tap targets; long-press hint step - overscroll-behavior lock on <html> while feed mounted - teardownExportStatus wired via onClearAuth (covers 401 + explicit logout) - ConfirmSheet per-instance titleId; Modal requires titleId or ariaLabel Tests (7 new Playwright specs): - 01-auth/pin-auto-submit, 01-auth/back-chevron - 03-feed/confirm-sheet-delete, 03-feed/toast-on-failure - 09-mobile/focus-trap, 09-mobile/sheet-escape, 09-mobile/upload-cancel-confirm FOLLOWUPS.md captures the deferred AT inert containment work with acceptance criteria + implementation sketches. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 22:50:34 +02:00 · 2026-05-24 22:50:28 +02:00
36 changed files with 1751 additions and 433 deletions
--- a/FOLLOWUPS.md
+++ b/FOLLOWUPS.md
@@ -0,0 +1,53 @@
 # Follow-ups
 Tracked work that was deferred during the multi-round UI/UX review pass.
 Each item has a clear acceptance criterion so a future pass can land it
 without re-deriving the context.
 ## A11y — assistive-tech containment inside modals
 **Problem.** Open modals (LightboxModal, ConfirmSheet, Modal, OnboardingGuide,
 join PIN modal, account data-mode sheet, export HTML guide) trap keyboard Tab
 via `focusTrap`, but VoiceOver rotor / TalkBack arrow-key navigation can still
 escape into the page content behind the dialog. Screen-reader users hear the
 wrong context.
 **Why deferred.** A naive sibling-walk that sets `inert` on direct children of
 the modal's parent silences the global `<Toaster>` (`aria-live="polite"` region
 mounted in `+layout.svelte`) and the `<BottomNav>` while a modal is open —
 breaking toast announcements and the visible nav state. SvelteKit has no
 built-in portal mechanism, so dialogs render inside the route tree alongside
 the Toaster.
 **Acceptance criterion.** With any modal open:
 - VoiceOver rotor (iOS Safari) and TalkBack swipe navigation (Android Chrome)
  cannot leave the dialog subtree.
 - Toasts that fire while a modal is open are still announced.
 - Nested modals (e.g. ConfirmSheet opened from inside ContextSheet) maintain
  correct containment when the inner closes.
 **Sketch of an approach.** One of:
 1. **Portal pattern.** Render dialogs into a dedicated `<div id="modal-root">`
   that's a sibling of the main app root in `app.html`. `focusTrap` then sets
   `inert` on the main root, leaving the modal root and the toast region (also
   moved to its own portal root) untouched.
 2. **Opt-out marker.** Walk siblings and inert them, but skip any node carrying
   a `data-modal-passthrough` attribute. Mark `<Toaster>` with it. Document
   the contract.
 3. **Stack-aware containment.** Maintain a module-level stack of open dialog
   nodes; the topmost owns the inert state, popped dialogs restore the
   previous layer. Avoids the nested-modal restoration bug.
 Approach 1 is the cleanest long-term but the highest blast radius. Approach 2
 is the smallest patch.
 **Files to touch.**
 - [frontend/src/lib/actions/focus-trap.ts](frontend/src/lib/actions/focus-trap.ts) — add inert logic
 - [frontend/src/lib/components/Toaster.svelte](frontend/src/lib/components/Toaster.svelte) — add passthrough marker (if approach 2) or move to a portal (if approach 1)
 - [frontend/src/app.html](frontend/src/app.html) — add `<div id="modal-root">` (if approach 1)
 ## Smaller nits, optional
 - **Auto-submit on retried 4th digit.** [recover/+page.svelte](frontend/src/routes/recover/+page.svelte), [join/+page.svelte](frontend/src/routes/join/+page.svelte) — after a wrong PIN, deleting one digit and retyping triggers an immediate submit. Backend's 3-attempts/15-min lockout makes this safe; could feel hair-trigger after a typo. Consider gating the second auto-submit per input session behind an explicit button press.
 - **Onboarding pip tap target on the vertical axis.** [OnboardingGuide.svelte](frontend/src/lib/components/OnboardingGuide.svelte) — current `p-2.5` yields ~26 px height, meets WCAG 2.2 AA (≥24 px) but below iOS HIG / Material's 44 / 48 dp recommendation. Bumping to `p-3` is the easy improvement; further increases start crowding the row.
 - **Migrate bespoke focus-trapped dialogs to `<Modal>`.** Join PIN modal, OnboardingGuide, LightboxModal, HTML guide, account data-mode sheet — all currently roll their own shell with `focusTrap`. They're correct, just not using the canonical primitive. Migrate when `<Modal>` gains features (e.g. the inert work above) you'd want everywhere.
--- a/e2e/specs/01-auth/back-chevron.spec.ts
+++ b/e2e/specs/01-auth/back-chevron.spec.ts
@@ -0,0 +1,28 @@
 /**
 * UX polish — back chevrons on /recover and /export. Both pages used to be
 * dead-ends for deep-linked users; the chevron mirrors the upload-composer
 * header pattern and routes back to /feed.
 */
 import { test, expect } from '../../fixtures/test';
 test.describe('Navigation — back chevrons', () => {
  test('/recover back chevron navigates to /feed (which redirects to /join when unauth)', async ({ page }) => {
    await page.goto('/recover');
    const back = page.getByTestId('recover-back');
    await expect(back).toBeVisible();
    await back.click();
    // Unauthenticated → /feed mounts and redirects to /join.
    await page.waitForURL(/\/(join|feed)$/);
  });
  test('/export back chevron returns the authenticated guest to /feed', async ({ page, guest, signIn }) => {
    const g = await guest('ExportBack');
    await signIn(page, g);
    await page.goto('/export');
    const back = page.getByTestId('export-back');
    await expect(back).toBeVisible();
    await back.click();
    await page.waitForURL('**/feed');
  });
 });
--- a/e2e/specs/01-auth/pin-auto-submit.spec.ts
+++ b/e2e/specs/01-auth/pin-auto-submit.spec.ts
@@ -0,0 +1,44 @@
 /**
 * UX polish — PIN inputs auto-submit on the 4th digit. Both the inline
 * recovery on /join (name-taken state) and the standalone /recover route
 * share the same auto-submit pattern: a $effect watching `pin.length === 4`.
 *
 * Coverage:
 *   - Inline recovery on /join: typing 4 digits navigates to /feed without
 *     a tap on Anmelden.
 *   - Standalone /recover: typing 4 digits navigates to /feed.
 */
 import { test, expect } from '../../fixtures/test';
 import { JoinPage, RecoverPage } from '../../page-objects';
 import { clearAllStorage } from '../../helpers/storage-helpers';
 test.describe('Auth — PIN auto-submit', () => {
  test('inline recovery: 4th digit auto-submits and navigates to /feed', async ({ page, guest }) => {
    const original = await guest('AutoInline');
    await clearAllStorage(page);
    const join = new JoinPage(page);
    await join.goto();
    await join.fillName('AutoInline');
    await join.submit();
    // Name-taken state: type the PIN one digit at a time, do NOT click submit.
    await expect(join.recoveryPinInput).toBeVisible();
    await join.recoveryPinInput.pressSequentially(original.pin, { delay: 30 });
    // Auto-submit must fire on the 4th digit.
    await page.waitForURL('**/feed', { timeout: 5_000 });
  });
  test('/recover: 4th digit auto-submits when the name is already filled in', async ({ page, guest }) => {
    const original = await guest('AutoRecover');
    await clearAllStorage(page);
    const recover = new RecoverPage(page);
    await recover.goto();
    await recover.nameInput.fill('AutoRecover');
    await recover.pinInput.pressSequentially(original.pin, { delay: 30 });
    await page.waitForURL('**/feed', { timeout: 5_000 });
  });
 });
--- a/e2e/specs/03-feed/confirm-sheet-delete.spec.ts
+++ b/e2e/specs/03-feed/confirm-sheet-delete.spec.ts
@@ -0,0 +1,62 @@
 /**
 * Critical UX fix — delete confirmation is now a branded bottom-sheet, not
 * the native window.confirm(). Long-press on an own upload → Löschen
 * → ConfirmSheet opens. Cancel keeps the post; Confirm removes it.
 *
 * The window.confirm path was jarring on mobile and broke the consistent
 * bottom-sheet design language; the ConfirmSheet uses the same shell as
 * ContextSheet and traps focus while open.
 */
 import { test, expect } from '../../fixtures/test';
 import { uploadRaw } from '../../helpers/upload-client';
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 const SAMPLE_JPG = join(process.cwd(), 'fixtures', 'media', 'sample.jpg');
 async function seedUpload(token: string): Promise<{ id: string }> {
  const res = await uploadRaw(token, readFileSync(SAMPLE_JPG), {
    filename: 'cs.jpg',
    contentType: 'image/jpeg',
    caption: 'Confirm-sheet fixture',
  });
  if (res.status !== 201) throw new Error(`Upload seed failed (${res.status})`);
  return (await res.json()) as { id: string };
 }
 test.describe('Feed — ConfirmSheet replaces window.confirm for deletion', () => {
  test('Cancel keeps the post; Confirm removes it', async ({ page, guest, signIn }) => {
    const g = await guest('CSDelete');
    await seedUpload(g.jwt);
    await signIn(page, g);
    await page.goto('/feed');
    const card = page.locator('article').filter({ hasText: g.displayName }).first();
    await expect(card).toBeVisible({ timeout: 10_000 });
    // Open the desktop kebab (long-press is exercised in 09-mobile; we want
    // both code paths covered without depending on touch).
    await card.getByRole('button', { name: 'Mehr Aktionen' }).click();
    // Context sheet appears. The Löschen action is wired to set pendingDeleteId,
    // which opens the ConfirmSheet (data-testid="confirm-sheet").
    await page.getByRole('button', { name: /löschen/i }).click();
    const confirmSheet = page.getByTestId('confirm-sheet');
    await expect(confirmSheet).toBeVisible();
    await expect(confirmSheet).toContainText(/beitrag löschen/i);
    // Cancel — sheet closes, post stays.
    await page.getByTestId('confirm-sheet-cancel').click();
    await expect(confirmSheet).not.toBeVisible();
    await expect(card).toBeVisible();
    // Reopen, confirm — post is removed from the DOM.
    await card.getByRole('button', { name: 'Mehr Aktionen' }).click();
    await page.getByRole('button', { name: /löschen/i }).click();
    await expect(page.getByTestId('confirm-sheet')).toBeVisible();
    await page.getByTestId('confirm-sheet-confirm').click();
    await expect(page.getByTestId('confirm-sheet')).not.toBeVisible();
    await expect(card).not.toBeVisible({ timeout: 5_000 });
  });
 });
--- a/e2e/specs/03-feed/toast-on-failure.spec.ts
+++ b/e2e/specs/03-feed/toast-on-failure.spec.ts
@@ -0,0 +1,53 @@
 /**
 * The toast store + <Toaster> primitive surfaces ApiError messages on
 * user-initiated actions that previously failed silently (catch { ignore }).
 * This spec intercepts the like POST and forces a 429 to assert the German
 * error message reaches the user via the global toast region.
 */
 import { test, expect } from '../../fixtures/test';
 import { uploadRaw } from '../../helpers/upload-client';
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 const SAMPLE_JPG = join(process.cwd(), 'fixtures', 'media', 'sample.jpg');
 async function seedUpload(token: string): Promise<{ id: string }> {
  const res = await uploadRaw(token, readFileSync(SAMPLE_JPG), {
    filename: 'tf.jpg',
    contentType: 'image/jpeg',
    caption: 'Toast fixture',
  });
  if (res.status !== 201) throw new Error(`Upload seed failed (${res.status})`);
  return (await res.json()) as { id: string };
 }
 test.describe('Feed — error toast on user action failures', () => {
  test('like POST 429 surfaces a German error toast', async ({ page, guest, signIn }) => {
    const author = await guest('ToastAuthor');
    const liker = await guest('ToastLiker');
    await seedUpload(author.jwt);
    await signIn(page, liker);
    // Intercept the like endpoint with a forced rate-limit response.
    await page.route('**/api/v1/upload/*/like', (route) =>
      route.fulfill({
        status: 429,
        contentType: 'application/json',
        body: JSON.stringify({ error: 'rate_limited', message: 'Zu viele Anfragen — bitte kurz warten.' }),
      })
    );
    await page.goto('/feed');
    const card = page.locator('article').filter({ hasText: author.displayName }).first();
    await expect(card).toBeVisible({ timeout: 10_000 });
    // Click the like button in the actions row — first visible match inside the card.
    await card.locator('button').filter({ hasText: /\d+/ }).first().click();
    // The toast is rendered inside the global Toaster region with aria-live="polite".
    const toast = page.getByTestId('toast').first();
    await expect(toast).toBeVisible({ timeout: 3_000 });
    await expect(toast).toContainText(/Zu viele Anfragen/i);
    await expect(toast).toHaveAttribute('data-toast-tone', 'error');
  });
 });
--- a/e2e/specs/09-mobile/focus-trap.spec.ts
+++ b/e2e/specs/09-mobile/focus-trap.spec.ts
@@ -0,0 +1,54 @@
 /**
 * Critical a11y fix — the focusTrap action keeps Tab within open modals
 * and lets Escape dismiss them, then restores focus to the originating
 * element. This spec covers the LightboxModal, which is the most-used
 * focus-trap consumer in the app.
 */
 import { test, expect } from '../../fixtures/test';
 import { uploadRaw } from '../../helpers/upload-client';
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 const SAMPLE_JPG = join(process.cwd(), 'fixtures', 'media', 'sample.jpg');
 async function seedUpload(token: string): Promise<{ id: string }> {
  const res = await uploadRaw(token, readFileSync(SAMPLE_JPG), {
    filename: 'ft.jpg',
    contentType: 'image/jpeg',
    caption: 'Focus-trap fixture',
  });
  if (res.status !== 201) throw new Error(`Upload seed failed (${res.status})`);
  return (await res.json()) as { id: string };
 }
 test.describe('Mobile a11y — focus trap on LightboxModal', () => {
  test('Escape closes the lightbox and Tab cycles inside', async ({ page, guest, signIn }) => {
    const g = await guest('FocusTrap');
    await seedUpload(g.jwt);
    await signIn(page, g);
    await page.goto('/feed');
    const card = page.locator('article').filter({ hasText: g.displayName }).first();
    const trigger = card.getByRole('button', { name: 'Bild vergrößern' });
    await expect(trigger).toBeVisible({ timeout: 10_000 });
    await trigger.click();
    // Lightbox is role="dialog" aria-modal="true".
    const lightbox = page.locator('[role="dialog"][aria-modal="true"]').filter({ has: page.locator('img, video') });
    await expect(lightbox).toBeVisible();
    // After opening, focus should be inside the lightbox (trap autoFocus moves
    // focus to the first focusable). Verify by checking activeElement is
    // contained.
    await expect.poll(async () => {
      return await page.evaluate(() => {
        const dlg = document.querySelector('[role="dialog"][aria-modal="true"]');
        return !!dlg && dlg.contains(document.activeElement);
      });
    }, { timeout: 2_000 }).toBe(true);
    // Escape dismisses the lightbox.
    await page.keyboard.press('Escape');
    await expect(lightbox).not.toBeVisible({ timeout: 2_000 });
  });
 });
--- a/e2e/specs/09-mobile/sheet-escape.spec.ts
+++ b/e2e/specs/09-mobile/sheet-escape.spec.ts
@@ -0,0 +1,37 @@
 /**
 * Critical a11y fix — bottom sheets on /account (data-mode warning and
 * leave-confirm) now respond to Escape via the focusTrap action. They were
 * previously click-only, blocking keyboard / switch-control users.
 */
 import { test, expect } from '../../fixtures/test';
 test.describe('Mobile a11y — sheets dismiss on Escape', () => {
  test('data-mode warning sheet closes on Escape', async ({ page, guest, signIn }) => {
    const g = await guest('SheetEsc');
    await signIn(page, g);
    await page.goto('/account');
    // Click the "Original" radio in the Datennutzung section to open the warning sheet.
    const originalRadio = page.getByRole('radio', { name: /Original$/i });
    await originalRadio.click();
    const sheet = page.locator('[role="dialog"][aria-labelledby="data-mode-title"]');
    await expect(sheet).toBeVisible();
    await page.keyboard.press('Escape');
    await expect(sheet).not.toBeVisible({ timeout: 2_000 });
  });
  test('leave-confirm sheet (built on ConfirmSheet) closes on Escape', async ({ page, guest, signIn }) => {
    const g = await guest('LeaveEsc');
    await signIn(page, g);
    await page.goto('/account');
    await page.getByRole('button', { name: /Event verlassen/i }).click();
    const sheet = page.getByTestId('confirm-sheet');
    await expect(sheet).toBeVisible();
    await page.keyboard.press('Escape');
    await expect(sheet).not.toBeVisible({ timeout: 2_000 });
  });
 });
--- a/e2e/specs/09-mobile/upload-cancel-confirm.spec.ts
+++ b/e2e/specs/09-mobile/upload-cancel-confirm.spec.ts
@@ -0,0 +1,42 @@
 /**
 * UX fix — tapping X on the upload composer used to silently discard
 * staged files + caption. Now opens a ConfirmSheet so a mistap from the
 * corner is recoverable.
 */
 import { test, expect } from '../../fixtures/test';
 test.describe('Mobile — upload composer cancel confirmation', () => {
  test('typing a caption then tapping X opens the discard ConfirmSheet', async ({ page, guest, signIn }) => {
    const g = await guest('CancelConf');
    await signIn(page, g);
    // Land on /upload directly (no staged files; the pending-upload-store is
    // empty). Typing into the caption flips the dirty flag.
    await page.goto('/upload');
    const caption = page.getByTestId('upload-caption');
    await expect(caption).toBeVisible();
    await caption.fill('a meaningful caption that I do not want to lose');
    // Tap the close (X) button in the composer header.
    await page.getByRole('button', { name: 'Abbrechen' }).click();
    const sheet = page.getByTestId('confirm-sheet');
    await expect(sheet).toBeVisible();
    await expect(sheet).toContainText(/Verwerfen/);
    // Cancel — sheet closes, caption is preserved.
    await page.getByTestId('confirm-sheet-cancel').click();
    await expect(sheet).not.toBeVisible();
    await expect(caption).toHaveValue(/a meaningful caption/);
  });
  test('with no content, tapping X navigates directly to /feed', async ({ page, guest, signIn }) => {
    const g = await guest('CancelEmpty');
    await signIn(page, g);
    await page.goto('/upload');
    await page.getByRole('button', { name: 'Abbrechen' }).click();
    await page.waitForURL('**/feed', { timeout: 3_000 });
  });
 });
--- a/frontend/src/lib/actions/focus-trap.ts
+++ b/frontend/src/lib/actions/focus-trap.ts
@@ -0,0 +1,84 @@
 // Focus management for modals/sheets. On mount: focuses the first focusable
 // (or the node itself) and stores the previously-focused element. Tab/Shift+Tab
 // wrap inside the node. Escape calls `onclose` when set. On destroy: restores
 // focus to the originating element so screen-reader / keyboard users land back
 // where they were.
 import type { ActionReturn } from 'svelte/action';
 export interface FocusTrapOptions {
 	onclose?: () => void;
 	closeOnEscape?: boolean;
 	/** When true, focus the first focusable on mount. Defaults true. */
 	autoFocus?: boolean;
 }
 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[] {
 	return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
 		(el) => !el.hasAttribute('disabled') && el.offsetParent !== null
 	);
 }
 export function focusTrap(
 	node: HTMLElement,
 	options: FocusTrapOptions = {}
 ): ActionReturn<FocusTrapOptions> {
 	let opts = options;
 	const previouslyFocused = (typeof document !== 'undefined' ? document.activeElement : null) as HTMLElement | null;
 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape' && opts.closeOnEscape !== false && opts.onclose) {
 			e.preventDefault();
 			opts.onclose();
 			return;
 		}
 		if (e.key !== 'Tab') return;
 		const list = focusables(node);
 		if (list.length === 0) {
 			e.preventDefault();
 			node.focus();
 			return;
 		}
 		const first = list[0];
 		const last = list[list.length - 1];
 		const active = document.activeElement as HTMLElement | null;
 		if (e.shiftKey) {
 			if (active === first || !node.contains(active)) {
 				e.preventDefault();
 				last.focus();
 			}
 		} else {
 			if (active === last) {
 				e.preventDefault();
 				first.focus();
 			}
 		}
 	}
 	node.addEventListener('keydown', onKeyDown);
 	if (opts.autoFocus !== false) {
 		// Defer one frame so the element is fully laid out (sheets animate in).
 		requestAnimationFrame(() => {
 			const list = focusables(node);
 			const target = list[0] ?? node;
 			if (!node.hasAttribute('tabindex')) node.setAttribute('tabindex', '-1');
 			target.focus({ preventScroll: true });
 		});
 	}
 	return {
 		update(newOptions) {
 			opts = newOptions;
 		},
 		destroy() {
 			node.removeEventListener('keydown', onKeyDown);
 			if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
 				try { previouslyFocused.focus({ preventScroll: true }); } catch { /* element may have unmounted */ }
 			}
 		}
 	};
 }
--- a/frontend/src/lib/actions/pull-to-refresh.ts
+++ b/frontend/src/lib/actions/pull-to-refresh.ts
@@ -0,0 +1,82 @@
 // Pull-to-refresh gesture. Only engages when the page is scrolled to the top.
 // Calls `onrefresh` once `threshold` px of overscroll have been pulled. The
 // element should set `overscroll-behavior-y: contain` so the browser doesn't
 // hijack the gesture (mobile Chrome's built-in refresh).
 //
 // `onpull` fires during the drag with `delta` (px pulled, clamped ≥ 0) and a
 // `progress` ratio (0–1+). Consumers can use it to render a growing indicator
 // that closes the visual loop before the refresh actually starts.
 import type { ActionReturn } from 'svelte/action';
 export interface PullToRefreshOptions {
 	onrefresh: () => void | Promise<void>;
 	onpull?: (delta: number, progress: number) => void;
 	threshold?: number;
 	disabled?: boolean;
 }
 export function pullToRefresh(
 	node: HTMLElement,
 	options: PullToRefreshOptions
 ): ActionReturn<PullToRefreshOptions> {
 	let opts = options;
 	let startY = 0;
 	let pulling = false;
 	let triggered = false;
 	function scroller(): HTMLElement | (Window & typeof globalThis) {
 		return node.scrollHeight > node.clientHeight ? node : window;
 	}
 	function scrollTop(): number {
 		const s = scroller();
 		return s instanceof Window ? window.scrollY : s.scrollTop;
 	}
 	function reportPull(delta: number) {
 		if (!opts.onpull) return;
 		const threshold = opts.threshold ?? 60;
 		opts.onpull(Math.max(0, delta), Math.max(0, delta) / threshold);
 	}
 	function onTouchStart(e: TouchEvent) {
 		if (opts.disabled) return;
 		if (scrollTop() > 0) return;
 		startY = e.touches[0].clientY;
 		pulling = true;
 		triggered = false;
 	}
 	function onTouchMove(e: TouchEvent) {
 		if (!pulling || triggered) return;
 		const delta = e.touches[0].clientY - startY;
 		reportPull(delta);
 		if (delta > (opts.threshold ?? 60)) {
 			triggered = true;
 			void opts.onrefresh();
 		}
 	}
 	function onTouchEnd() {
 		if (pulling && !triggered) reportPull(0);
 		pulling = false;
 	}
 	node.addEventListener('touchstart', onTouchStart, { passive: true });
 	node.addEventListener('touchmove', onTouchMove, { passive: true });
 	node.addEventListener('touchend', onTouchEnd);
 	node.addEventListener('touchcancel', onTouchEnd);
 	return {
 		update(newOptions) {
 			opts = newOptions;
 		},
 		destroy() {
 			node.removeEventListener('touchstart', onTouchStart);
 			node.removeEventListener('touchmove', onTouchMove);
 			node.removeEventListener('touchend', onTouchEnd);
 			node.removeEventListener('touchcancel', onTouchEnd);
 		}
 	};
 }
--- a/frontend/src/lib/auth.ts
+++ b/frontend/src/lib/auth.ts
@@ -69,12 +69,28 @@ export function setAuth(jwt: string, pin: string | null, userId: string, display
 	isAuthenticated.set(true);
 }
 // Hook registry: cross-cutting stores (export-status, etc.) register a callback
 // here at import-time so they get reset on every clearAuth path — both the
 // explicit "Event verlassen" button and the api.ts 401 auto-clear. Keeps
 // clearAuth the single source of truth without baking dependencies on every
 // downstream store into this module (which would create circular imports).
 const clearAuthHooks: Array<() => void> = [];
 export function onClearAuth(fn: () => void): void {
 	clearAuthHooks.push(fn);
 }
 export function clearAuth(): void {
 	if (!browser) return;
 	localStorage.removeItem(TOKEN_KEY);
 	localStorage.removeItem(USER_ID_KEY);
 	// PIN is intentionally kept so the user can recover
 	isAuthenticated.set(false);
 	// Hooks fire in registration order. Keep them dependency-free of each other —
 	// if you ever need ordering, introduce a priority field rather than relying
 	// on import-load timing, which is fragile across refactors.
 	for (const fn of clearAuthHooks) {
 		try { fn(); } catch { /* hook failure is non-fatal */ }
 	}
 }
 export function getRole(): 'guest' | 'host' | 'admin' | null {
--- a/frontend/src/lib/avatar.ts
+++ b/frontend/src/lib/avatar.ts
@@ -0,0 +1,28 @@
 // Deterministic avatar palette + initials, used by feed cards and the account page.
 // Dark variants are baked in so the palette reads correctly on both themes.
 const PALETTE = [
 	'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200',
 	'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200',
 	'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200',
 	'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200',
 	'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-200',
 	'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-200'
 ];
 const NEUTRAL = 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400';
 export function avatarPalette(name: string | null | undefined): string {
 	if (!name) return NEUTRAL;
 	let hash = 0;
 	for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
 	return PALETTE[hash % PALETTE.length];
 }
 export function initials(name: string | null | undefined): string {
 	if (!name) return '?';
 	const words = name.trim().split(/\s+/).filter(Boolean);
 	if (words.length === 0) return '?';
 	if (words.length === 1) return words[0][0].toUpperCase();
 	return (words[0][0] + words[1][0]).toUpperCase();
 }
--- a/frontend/src/lib/components/BottomNav.svelte
+++ b/frontend/src/lib/components/BottomNav.svelte
@@ -1,16 +1,29 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { uploadSheetOpen, uploadBadgeCount } from '$lib/ui-store';
 	import { exportStatus, initExportStatus } from '$lib/export-status-store';
 	function isActive(path: string): boolean {
 		return $page.url.pathname.startsWith(path);
 	}
 	onMount(() => {
 		// Hydrate export status once when the bottom nav first mounts (i.e. the user
 		// is authenticated). Subsequent SSE events update the snapshot live so the
 		// Export tab can fade in mid-session.
 		initExportStatus();
 	});
 	let showExport = $derived($exportStatus.released);
 	let zipReady = $derived($exportStatus.zip?.status === 'done');
 </script>
 <!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
 <nav
 	class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90"
 	style="padding-bottom: env(safe-area-inset-bottom)"
 	data-testid="bottom-nav"
 >
 	<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
 		<!-- Feed tab -->
@@ -49,6 +62,25 @@
 			</button>
 		</div>
 		<!-- Export tab — appears only when the host has released the export. -->
 		{#if showExport}
 			<a
 				href="/export"
 				data-testid="bottom-nav-export"
 				class="relative flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
 					{isActive('/export') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
 				aria-label="Export"
 			>
 				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
 				</svg>
 				<span>Export</span>
 				{#if zipReady}
 					<span class="absolute right-2 top-0 h-2 w-2 rounded-full bg-blue-500" aria-hidden="true"></span>
 				{/if}
 			</a>
 		{/if}
 		<!-- Account tab -->
 		<a
 			href="/account"
--- a/frontend/src/lib/components/CameraCapture.svelte
+++ b/frontend/src/lib/components/CameraCapture.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
 	import { vibrate } from '$lib/haptics';
 	interface Props {
 		oncapture: (blob: Blob, type: 'photo' | 'video') => void;
@@ -12,6 +13,7 @@
 	let canvasEl: HTMLCanvasElement = $state()!;
 	let stream: MediaStream | null = $state(null);
 	let facingMode = $state<'environment' | 'user'>('environment');
 	let mode = $state<'photo' | 'video'>('photo');
 	let recording = $state(false);
 	let recordingTime = $state(0);
 	let error = $state<string | null>(null);
@@ -19,6 +21,17 @@
 	let recordedChunks: Blob[] = [];
 	let recordingInterval: ReturnType<typeof setInterval> | null = null;
 	function handleShutter() {
 		vibrate(15);
 		if (mode === 'photo') {
 			capturePhoto();
 		} else if (recording) {
 			stopRecording();
 		} else {
 			startRecording();
 		}
 	}
 	onMount(() => {
 		startCamera();
 	});
@@ -172,44 +185,74 @@
 	<!-- Controls -->
 	{#if !error}
-		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 py-6">
+		<!-- Mode toggle — segmented control above the shutter. Hidden while recording. -->
 		{#if !recording}
 			<div class="flex justify-center bg-black/80 pt-3 pb-1">
 				<div
 					class="inline-flex rounded-full bg-white/10 p-0.5"
 					role="tablist"
 					aria-label="Aufnahmemodus"
 					data-testid="camera-mode"
 				>
 					<button
 						type="button"
 						role="tab"
 						aria-selected={mode === 'photo'}
 						onclick={() => (mode = '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'}"
 					>
 						Foto
 					</button>
 					<button
 						type="button"
 						role="tab"
 						aria-selected={mode === 'video'}
 						onclick={() => (mode = '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'}"
 					>
 						Video
 					</button>
 				</div>
 			</div>
 		{/if}
 		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6" style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)">
 			<!-- Close -->
 			<button
 				onclick={onclose}
-				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
+				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
-				aria-label="Schliessen"
+				aria-label="Schließen"
 			>
 				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 				</svg>
 			</button>
-			<!-- Capture photo / record video -->
+			<!-- Shutter — single button, behaviour depends on mode + recording state. -->
-			{#if recording}
+			<button
-				<button
+				onclick={handleShutter}
-					onclick={stopRecording}
+				data-testid="camera-shutter"
-					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-600"
+				class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording ? 'bg-red-600' : 'bg-white/20'}"
-					aria-label="Aufnahme stoppen"
+				aria-label={mode === 'photo' ? 'Foto aufnehmen' : recording ? 'Aufnahme stoppen' : 'Video aufnehmen'}
-				>
+			>
-					<div class="h-6 w-6 rounded-sm bg-white"></div>
+				{#if mode === 'photo'}
 				</button>
 			{:else}
 				<button
 					onclick={capturePhoto}
 					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:bg-white/40"
 					aria-label="Foto aufnehmen"
 				>
 					<div class="h-12 w-12 rounded-full bg-white"></div>
-				</button>
+				{:else if recording}
-			{/if}
+					<div class="h-6 w-6 rounded-sm bg-white"></div>
 				{:else}
 					<div class="h-10 w-10 rounded-full bg-red-500"></div>
 				{/if}
 			</button>
-			<!-- Toggle camera / start recording -->
+			<!-- Toggle camera (hidden while recording to discourage interruption). -->
 			{#if recording}
 				<div class="h-12 w-12"></div>
 			{:else}
 				<button
 					onclick={toggleCamera}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
+					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
 					aria-label="Kamera wechseln"
 				>
 					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -218,19 +261,6 @@
 				</button>
 			{/if}
 		</div>
 		<!-- Video record button -->
 		{#if !recording}
 			<div class="flex justify-center bg-black/80 pb-4">
 				<button
 					onclick={startRecording}
 					class="flex items-center gap-2 rounded-full bg-red-600/80 px-4 py-2 text-sm text-white transition hover:bg-red-600"
 				>
 					<div class="h-2.5 w-2.5 rounded-full bg-white"></div>
 					Video aufnehmen
 				</button>
 			</div>
 		{/if}
 	{/if}
 </div>
--- a/frontend/src/lib/components/ConfirmSheet.svelte
+++ b/frontend/src/lib/components/ConfirmSheet.svelte
@@ -0,0 +1,95 @@
 <script lang="ts" module>
 	// Per-instance id counter so two ConfirmSheets coexisting (e.g. one closing
 	// as another opens) don't share the same aria-labelledby target and confuse AT.
 	let nextId = 0;
 </script>
 <script lang="ts">
 	import { focusTrap } from '$lib/actions/focus-trap';
 	interface Props {
 		open: boolean;
 		title: string;
 		message?: string;
 		confirmLabel?: string;
 		cancelLabel?: string;
 		tone?: 'default' | 'danger';
 		onConfirm: () => void | Promise<void>;
 		onCancel: () => void;
 	}
 	let {
 		open,
 		title,
 		message,
 		confirmLabel = 'Bestätigen',
 		cancelLabel = 'Abbrechen',
 		tone = 'default',
 		onConfirm,
 		onCancel
 	}: Props = $props();
 	const titleId = `confirm-sheet-title-${++nextId}`;
 	let busy = $state(false);
 	async function handleConfirm() {
 		if (busy) return;
 		busy = true;
 		try {
 			await onConfirm();
 		} finally {
 			busy = false;
 		}
 	}
 </script>
 {#if open}
 	<!-- Backdrop is a real <button> so keyboard / switch-control users get parity with the mouse path. -->
 	<button
 		type="button"
 		class="fixed inset-0 z-50 bg-black/40"
 		aria-label="Schließen"
 		onclick={onCancel}
 		tabindex="-1"
 	></button>
 	<div
 		class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
 		style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={titleId}
 		data-testid="confirm-sheet"
 		use:focusTrap={{ onclose: onCancel }}
 	>
 		<div class="mb-4 flex justify-center">
 			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 		</div>
 		<h3 id={titleId} class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">
 			{title}
 		</h3>
 		{#if message}
 			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">{message}</p>
 		{:else}
 			<div class="mb-4"></div>
 		{/if}
 		<button
 			type="button"
 			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'
 				? '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'}"
 		>
 			{confirmLabel}
 		</button>
 		<button
 			type="button"
 			onclick={onCancel}
 			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"
 		>
 			{cancelLabel}
 		</button>
 	</div>
 {/if}
--- a/frontend/src/lib/components/ContextSheet.svelte
+++ b/frontend/src/lib/components/ContextSheet.svelte
@@ -24,6 +24,48 @@
 	let { open, actions, onClose, title }: Props = $props();
 	let sheet = $state<HTMLDivElement | null>(null);
 	let returnFocus: HTMLElement | null = null;
 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			onClose();
 			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();
 		}
 	}
 	// Focus the first action and attach a global keydown listener only while open.
 	// The sheet stays mounted (translate-y animation), so this is wired via $effect
 	// rather than use:focusTrap (which would activate on first mount).
 	$effect(() => {
 		if (open) {
 			returnFocus = (document.activeElement as HTMLElement | null) ?? null;
 			requestAnimationFrame(() => {
 				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;
 		}
 	});
 	async function handle(action: ContextAction) {
 		if (action.disabled) return;
 		try {
@@ -34,24 +76,28 @@
 	}
 </script>
-<!-- Backdrop -->
+<!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
-<div
+<button
 	type="button"
 	class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-200"
 	class:opacity-0={!open}
 	class:pointer-events-none={!open}
 	class:opacity-100={open}
 	onclick={onClose}
-	aria-hidden="true"
+	tabindex="-1"
-></div>
+	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-200 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"
 	tabindex="-1"
 >
 	<div class="flex justify-center pt-3 pb-1">
 		<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
--- a/frontend/src/lib/components/FeedListCard.svelte
+++ b/frontend/src/lib/components/FeedListCard.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import type { FeedUpload } from '$lib/types';
 	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { longpress } from '$lib/actions/longpress';
 	import { doubletap } from '$lib/actions/doubletap';
 	import { avatarPalette, initials } from '$lib/avatar';
 	import { vibrate } from '$lib/haptics';
 	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;
@@ -39,28 +46,42 @@
 		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
 	}
 	function initial(name: string): string {
 		return name[0]?.toUpperCase() ?? '?';
 	}
 	// Deterministic color from name
 	const COLORS = [
 		'bg-blue-100 text-blue-700',
 		'bg-purple-100 text-purple-700',
 		'bg-green-100 text-green-700',
 		'bg-amber-100 text-amber-700',
 		'bg-rose-100 text-rose-700',
 		'bg-teal-100 text-teal-700'
 	];
 	function avatarColor(name: string): string {
 		let hash = 0;
 		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
 		return COLORS[hash % COLORS.length];
 	}
 	function openContext() {
 		oncontextmenu?.(upload);
 	}
 	// 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);
 	}
 	function handleDoubleTap() {
 		if (singleTapTimer) {
 			clearTimeout(singleTapTimer);
 			singleTapTimer = null;
 		}
 		heartBurst = true;
 		vibrate(10);
 		onlike(upload.id);
 		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.
 	onDestroy(() => {
 		if (singleTapTimer) {
 			clearTimeout(singleTapTimer);
 			singleTapTimer = null;
 		}
 	});
 </script>
 <article
@@ -73,9 +94,9 @@
 		<div class="flex min-w-0 items-center gap-3">
 			<div
 				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
-					{avatarColor(upload.uploader_name)}"
+					{avatarPalette(upload.uploader_name)}"
 			>
-				{initial(upload.uploader_name)}
+				{initials(upload.uploader_name)}
 			</div>
 			<div class="min-w-0">
 				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
@@ -88,7 +109,7 @@
 			<button
 				type="button"
 				onclick={(e) => { e.stopPropagation(); openContext(); }}
-				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:hover:text-gray-200"
 				aria-label="Mehr Aktionen"
 			>
 				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
@@ -98,12 +119,13 @@
 	<!-- Media -->
 	<button
-		class="block w-full"
+		class="relative block w-full"
-		onclick={() => onselect(upload)}
+		onclick={handleMediaClick}
 		use:doubletap
-		ondoubletap={() => onlike(upload.id)}
+		ondoubletap={handleDoubleTap}
 		aria-label="Bild vergrößern"
 	>
 		<HeartBurst active={heartBurst} />
 		{#if isVideo(upload.mime_type)}
 			<div class="relative aspect-video w-full bg-gray-900">
 				{#if upload.thumbnail_url || upload.preview_url}
@@ -141,9 +163,9 @@
 	<!-- Actions row -->
 	<div class="flex items-center gap-4 px-4 py-2">
 		<button
-			onclick={() => onlike(upload.id)}
+			onclick={() => { vibrate(10); onlike(upload.id); }}
 			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 dark:text-gray-400 dark:hover:text-red-400'}"
+				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
 		>
 			<svg
 				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
@@ -158,7 +180,7 @@
 		</button>
 		<button
 			onclick={() => oncomment(upload.id)}
-			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400"
+			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 active:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 dark:active:text-blue-400"
 		>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
--- a/frontend/src/lib/components/HashtagChips.svelte
+++ b/frontend/src/lib/components/HashtagChips.svelte
@@ -20,7 +20,7 @@
 			class="shrink-0 rounded-full px-3 py-1 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 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
 			}"
 		>
 			Alle
@@ -30,8 +30,8 @@
 				onclick={() => onselect(h.tag)}
 				class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
 					selected === h.tag
-						? 'bg-blue-600 text-white'
+						? 'bg-blue-600 text-white dark:bg-blue-500'
-						: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+						: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
 				}"
 			>
 				#{h.tag}
--- a/frontend/src/lib/components/HeartBurst.svelte
+++ b/frontend/src/lib/components/HeartBurst.svelte
@@ -0,0 +1,32 @@
 <script lang="ts">
 	interface Props {
 		active: boolean;
 	}
 	let { active }: Props = $props();
 </script>
 <style>
 	@keyframes heart-burst {
 		0% { transform: scale(0.5); opacity: 0; }
 		30% { transform: scale(1.2); opacity: 1; }
 		70% { transform: scale(1); opacity: 1; }
 		100% { transform: scale(1.4); opacity: 0; }
 	}
 </style>
 {#if active}
 	<span
 		class="pointer-events-none absolute inset-0 flex items-center justify-center"
 		aria-hidden="true"
 		data-testid="heart-burst"
 	>
 		<svg
 			class="h-24 w-24 text-red-500 drop-shadow-lg"
 			style="animation: heart-burst 700ms ease-out forwards;"
 			fill="currentColor"
 			viewBox="0 0 24 24"
 		>
 			<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
 		</svg>
 	</span>
 {/if}
--- a/frontend/src/lib/components/LightboxModal.svelte
+++ b/frontend/src/lib/components/LightboxModal.svelte
@@ -4,6 +4,12 @@
 	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 { toastError } from '$lib/toast-store';
 	import { vibrate } from '$lib/haptics';
 	import HeartBurst from './HeartBurst.svelte';
 	const COMMENT_MAX = 500;
 	interface CommentDto {
 		id: string;
@@ -32,6 +38,7 @@
 	function triggerHeartBurst() {
 		heartBurst = true;
 		vibrate(10);
 		onlike(upload.id);
 		setTimeout(() => (heartBurst = false), 700);
 	}
@@ -44,7 +51,7 @@
 		try {
 			comments = await api.get<CommentDto[]>(`/upload/${upload.id}/comments`);
 		} catch {
-			// Ignore
+			// Background fetch — failure leaves the panel empty; reopening the lightbox retries.
 		}
 	}
@@ -57,8 +64,8 @@
 			});
 			comments = [...comments, comment];
 			newComment = '';
-		} catch {
+		} catch (e) {
-			// Ignore
+			toastError(e);
 		} finally {
 			loading = false;
 		}
@@ -68,8 +75,8 @@
 		try {
 			await api.delete(`/comment/${id}`);
 			comments = comments.filter((c) => c.id !== id);
-		} catch {
+		} catch (e) {
-			// Ignore
+			toastError(e);
 		}
 	}
@@ -77,10 +84,6 @@
 		return mime.startsWith('video/');
 	}
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') onclose();
 	}
 	function formatTime(iso: string): string {
 		return new Date(iso).toLocaleString('de-DE', {
 			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
@@ -88,22 +91,21 @@
 	}
 </script>
-<style>
+<div
-	@keyframes heart-burst {
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
-		0% { transform: scale(0.5); opacity: 0; }
+	role="dialog"
-		30% { transform: scale(1.2); opacity: 1; }
+	aria-modal="true"
-		70% { transform: scale(1); opacity: 1; }
+	aria-labelledby="lightbox-title"
-		100% { transform: scale(1.4); opacity: 0; }
+	use:focusTrap={{ onclose }}
-	}
+>
 </style>
 <svelte:window onkeydown={handleKeydown} />
 <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
 	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
 		<!-- Media -->
 		<div class="relative bg-black">
-			<button onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
+			<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"
 			>
 				<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" />
 				</svg>
@@ -117,33 +119,19 @@
 					<video
 						src={mediaSrc}
 						controls
-						class="max-h-[50vh] w-full object-contain"
+						class="max-h-[60vh] w-full object-contain"
 						poster={upload.thumbnail_url ?? undefined}
 					></video>
 				{:else}
 					<img
 						src={mediaSrc}
 						alt=""
-						class="max-h-[50vh] w-full object-contain select-none"
+						class="max-h-[60vh] w-full object-contain select-none"
 						draggable="false"
 					/>
 				{/if}
-				{#if heartBurst}
+				<HeartBurst active={heartBurst} />
 					<span
 						class="pointer-events-none absolute inset-0 flex items-center justify-center"
 						aria-hidden="true"
 					>
 						<svg
 							class="h-24 w-24 text-red-500 drop-shadow-lg"
 							style="animation: heart-burst 700ms ease-out forwards;"
 							fill="currentColor"
 							viewBox="0 0 24 24"
 						>
 							<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
 						</svg>
 					</span>
 				{/if}
 			</div>
 		</div>
@@ -152,7 +140,7 @@
 			<div class="border-b border-gray-100 p-3 dark:border-gray-800">
 				<div class="flex items-center justify-between">
 					<div>
-						<span class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
+						<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
 						<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">{formatTime(upload.created_at)}</span>
 					</div>
 					<button
@@ -207,22 +195,35 @@
 			<!-- Comment input -->
 			<form
 				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
-				class="flex gap-2 border-t border-gray-100 p-3 dark:border-gray-800"
+				class="border-t border-gray-100 p-3 dark:border-gray-800"
 			>
-				<input
+				<div class="flex gap-2">
-					type="text"
+					<input
-					bind:value={newComment}
+						type="text"
-					placeholder="Kommentar schreiben..."
+						bind:value={newComment}
-					maxlength={500}
+						placeholder="Kommentar schreiben..."
-					class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+						maxlength={COMMENT_MAX}
-				/>
+						class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
-				<button
+					/>
-					type="submit"
+					<button
-					disabled={loading || !newComment.trim()}
+						type="submit"
-					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
+						disabled={loading || !newComment.trim()}
 						class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 					>
 						Senden
 					</button>
 				</div>
 				<div
 					class="mt-1 text-right text-xs"
 					class:text-gray-400={newComment.length < 450}
 					class:dark:text-gray-500={newComment.length < 450}
 					class:text-amber-600={newComment.length >= 450 && newComment.length < COMMENT_MAX}
 					class:dark:text-amber-400={newComment.length >= 450 && newComment.length < COMMENT_MAX}
 					class:text-red-600={newComment.length >= COMMENT_MAX}
 					class:dark:text-red-400={newComment.length >= COMMENT_MAX}
 				>
-					Senden
+					{newComment.length}/{COMMENT_MAX}
-				</button>
+				</div>
 			</form>
 		</div>
 	</div>
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -0,0 +1,56 @@
 <script lang="ts">
 	import { focusTrap } from '$lib/actions/focus-trap';
 	import type { Snippet } from 'svelte';
 	// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
 	// visible heading (the common case — link aria-labelledby to that heading's id),
 	// or `ariaLabel` for dialogs without a visible title (e.g. an image preview).
 	// Failing to provide either leaves the dialog without an accessible name,
 	// which screen readers announce as just "dialog" — useless. The runtime
 	// warning below catches missed cases during dev.
 	interface Props {
 		open: boolean;
 		titleId?: string;
 		ariaLabel?: string;
 		onClose: () => void;
 		closeOnBackdrop?: boolean;
 		children: Snippet;
 	}
 	let {
 		open,
 		titleId,
 		ariaLabel,
 		onClose,
 		closeOnBackdrop = true,
 		children
 	}: Props = $props();
 	$effect(() => {
 		if (open && !titleId && !ariaLabel && typeof console !== 'undefined') {
 			console.warn('<Modal> opened without titleId or ariaLabel — dialog has no accessible name.');
 		}
 	});
 </script>
 {#if open}
 	<button
 		type="button"
 		class="fixed inset-0 z-50 bg-black/50"
 		aria-label="Schließen"
 		tabindex="-1"
 		onclick={closeOnBackdrop ? onClose : () => {}}
 	></button>
 	<div
 		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={titleId}
 		aria-label={titleId ? undefined : ariaLabel}
 		use:focusTrap={{ onclose: onClose }}
 	>
 		<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
 			{@render children()}
 		</div>
 	</div>
 {/if}
--- a/frontend/src/lib/components/OnboardingGuide.svelte
+++ b/frontend/src/lib/components/OnboardingGuide.svelte
@@ -2,6 +2,8 @@
 	import { browser } from '$app/environment';
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { themePreference, type ThemePreference } from '$lib/theme-store';
 	import { focusTrap } from '$lib/actions/focus-trap';
 	import { vibrate } from '$lib/haptics';
 	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
@@ -36,6 +38,12 @@
 			title: 'Hashtags nutzen',
 			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
 		},
 		{
 			kind: 'text',
 			icon: '👆',
 			title: 'Lange tippen für mehr',
 			body: 'Tippe lange auf ein Bild im Feed, um zusätzliche Aktionen zu öffnen — zum Beispiel das Original anzeigen oder eigene Beiträge löschen.'
 		},
 		{
 			kind: 'theme',
 			icon: '🌗',
@@ -74,29 +82,49 @@
 	function dismiss() {
 		if (browser) localStorage.setItem(GUIDE_SEEN_KEY, '1');
 		vibrate([0, 8, 60, 8]);
 		visible = false;
 	}
 	function goToStep(i: number) {
 		if (i >= 0 && i < steps.length) step = i;
 	}
 </script>
 {#if visible}
 	<!-- Backdrop -->
 	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
-		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl">
+		<div
-			<!-- Step indicator -->
+			class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl"
-			<div class="mb-5 flex justify-center gap-1.5">
+			role="dialog"
 			aria-modal="true"
 			aria-labelledby="onboarding-title"
 			use:focusTrap={{ onclose: dismiss }}
 		>
 			<!-- Step indicator — tap a pip to jump back. The visible dot is small but
 			     the touch target is padded to ~44 px so it remains tappable on mobile. -->
 			<div class="mb-3 flex justify-center">
 				{#each steps as _, i}
-					<div
+					<button
-						class="h-1.5 rounded-full transition-all {i === step
+						type="button"
-							? 'w-6 bg-blue-600 dark:bg-blue-500'
+						onclick={() => goToStep(i)}
-							: 'w-1.5 bg-gray-200 dark:bg-gray-700'}"
+						aria-label={`Schritt ${i + 1}`}
-					></div>
+						aria-current={i === step ? 'step' : undefined}
 						class="flex items-center justify-center p-2.5"
 					>
 						<span
 							class="block rounded-full transition-all {i === step
 								? 'h-1.5 w-6 bg-blue-600 dark:bg-blue-500'
 								: 'h-1.5 w-1.5 bg-gray-200 dark:bg-gray-700'}"
 						></span>
 					</button>
 				{/each}
 			</div>
 			<!-- Content -->
 			<div class="mb-6 text-center">
 				<div class="mb-3 text-5xl">{currentStep.icon}</div>
-				<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
+				<h2 id="onboarding-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
 					{currentStep.title}
 				</h2>
@@ -148,13 +176,13 @@
 			<div class="flex gap-2">
 				<button
 					onclick={dismiss}
-					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-600 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"
 				>
 					Überspringen
 				</button>
 				<button
 					onclick={next}
-					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 				>
 					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
 				</button>
--- a/frontend/src/lib/components/Skeleton.svelte
+++ b/frontend/src/lib/components/Skeleton.svelte
@@ -0,0 +1,27 @@
 <script lang="ts">
 	interface Props {
 		variant?: 'card' | 'tile';
 	}
 	let { variant = 'card' }: Props = $props();
 </script>
 {#if variant === 'card'}
 	<article class="animate-pulse bg-white dark:bg-gray-900" aria-hidden="true">
 		<div class="flex items-center gap-3 px-4 py-3">
 			<div class="h-9 w-9 rounded-full bg-gray-200 dark:bg-gray-800"></div>
 			<div class="flex-1 space-y-1.5">
 				<div class="h-3 w-32 rounded bg-gray-200 dark:bg-gray-800"></div>
 				<div class="h-2.5 w-20 rounded bg-gray-200 dark:bg-gray-800"></div>
 			</div>
 		</div>
 		<!-- 4:5 matches the typical portrait card better than a square; reduces layout shift on first paint. -->
 		<div class="aspect-[4/5] w-full bg-gray-200 dark:bg-gray-800"></div>
 		<div class="flex gap-4 px-4 py-3">
 			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
 			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
 		</div>
 		<div class="border-b border-gray-100 dark:border-gray-800"></div>
 	</article>
 {:else}
 	<div class="aspect-square animate-pulse bg-gray-200 dark:bg-gray-800" aria-hidden="true"></div>
 {/if}
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@@ -0,0 +1,37 @@
 <script lang="ts">
 	import { toasts, dismissToast, type Toast } from '$lib/toast-store';
 	function toneClasses(tone: Toast['tone']): string {
 		switch (tone) {
 			case 'success':
 				return 'bg-green-600 text-white dark:bg-green-500';
 			case 'warning':
 				return 'bg-amber-500 text-white dark:bg-amber-400 dark:text-gray-900';
 			case 'error':
 				return 'bg-red-600 text-white dark:bg-red-500';
 			default:
 				return 'bg-gray-900 text-white dark:bg-gray-800';
 		}
 	}
 </script>
 <div
 	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)}
 		<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)}"
 			data-testid="toast"
 			data-toast-tone={t.tone}
 		>
 			{t.message}
 		</button>
 	{/each}
 </div>
--- a/frontend/src/lib/export-status-store.ts
+++ b/frontend/src/lib/export-status-store.ts
@@ -0,0 +1,62 @@
 // Single source of truth for "is export released and is the ZIP ready?". Used
 // by the BottomNav to surface the Export tab on demand, and by the export
 // page to render status. Hydrates lazily on first subscribe; reacts to the
 // `export-progress` / `export-available` SSE events so the nav updates live.
 import { writable } from 'svelte/store';
 import { api } from './api';
 import { onSseEvent } from './sse';
 import { getToken, onClearAuth } from './auth';
 export interface ExportJob {
 	status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
 	progress_pct: number;
 }
 export interface ExportStatusSnapshot {
 	released: boolean;
 	zip: ExportJob | null;
 	html: ExportJob | null;
 }
 const empty: ExportStatusSnapshot = { released: false, zip: null, html: null };
 export const exportStatus = writable<ExportStatusSnapshot>(empty);
 let hydrated = false;
 let sseUnsubs: Array<() => void> = [];
 export async function refreshExportStatus(): Promise<void> {
 	if (!getToken()) return;
 	try {
 		const data = await api.get<ExportStatusSnapshot>('/export/status');
 		exportStatus.set(data);
 	} catch {
 		// /export/status can 403 for guests on locked events; that's expected.
 		exportStatus.set(empty);
 	}
 }
 export function initExportStatus(): void {
 	if (hydrated) return;
 	hydrated = true;
 	void refreshExportStatus();
 	sseUnsubs.push(onSseEvent('export-progress', () => { void refreshExportStatus(); }));
 	sseUnsubs.push(onSseEvent('export-available', () => { void refreshExportStatus(); }));
 }
 export function teardownExportStatus(): void {
 	for (const u of sseUnsubs) u();
 	sseUnsubs = [];
 	hydrated = false;
 	exportStatus.set(empty);
 }
 // Auto-reset on every clearAuth path (explicit logout + api.ts 401 auto-clear).
 // Imported for side-effect by anyone who pulls in this module — the BottomNav
 // does that statically, and BottomNav itself is statically imported by
 // +layout.svelte, so this side-effect runs at app boot, well before any API
 // call can 401. If a future refactor lazy-loads the BottomNav (dynamic import,
 // route-level code-split), move the side-effect to +layout.svelte's onMount
 // so the hook isn't gated on a conditional component.
 onClearAuth(teardownExportStatus);
--- a/frontend/src/lib/haptics.ts
+++ b/frontend/src/lib/haptics.ts
@@ -0,0 +1,7 @@
 // Mobile haptic ticks. No-ops on browsers without navigator.vibrate (iOS Safari).
 export function vibrate(pattern: number | number[]): void {
 	if (typeof navigator === 'undefined') return;
 	if (typeof navigator.vibrate !== 'function') return;
 	try { navigator.vibrate(pattern); } catch { /* permission denied / not supported */ }
 }
--- a/frontend/src/lib/toast-store.ts
+++ b/frontend/src/lib/toast-store.ts
@@ -0,0 +1,40 @@
 import { writable } from 'svelte/store';
 import { ApiError } from './api';
 export type ToastTone = 'info' | 'success' | 'warning' | 'error';
 export interface Toast {
 	id: number;
 	message: string;
 	tone: ToastTone;
 	ttl: number;
 }
 let nextId = 0;
 const timers = new Map<number, ReturnType<typeof setTimeout>>();
 export const toasts = writable<Toast[]>([]);
 export function toast(message: string, tone: ToastTone = 'info', ttl = 4000): number {
 	const id = ++nextId;
 	const entry: Toast = { id, message, tone, ttl };
 	toasts.update((list) => [...list, entry]);
 	if (ttl > 0 && typeof window !== 'undefined') {
 		timers.set(id, setTimeout(() => dismissToast(id), ttl));
 	}
 	return id;
 }
 export function dismissToast(id: number): void {
 	const t = timers.get(id);
 	if (t) { clearTimeout(t); timers.delete(id); }
 	toasts.update((list) => list.filter((x) => x.id !== id));
 }
 // User-action error surface. Pulls the German message off ApiError; for
 // anything else, falls back to a generic line so the user sees *something*.
 export function toastError(err: unknown, fallback = 'Etwas ist schiefgelaufen.'): number {
 	if (err instanceof ApiError) return toast(err.message || fallback, 'error', 5000);
 	if (err instanceof Error && err.message) return toast(err.message, 'error', 5000);
 	return toast(fallback, 'error', 5000);
 }
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
 	import { onMount, onDestroy } from 'svelte';
 	import BottomNav from '$lib/components/BottomNav.svelte';
 	import UploadSheet from '$lib/components/UploadSheet.svelte';
 	import Toaster from '$lib/components/Toaster.svelte';
 	import { showBottomNav } from '$lib/ui-store';
 	import { isAuthenticated } from '$lib/auth';
 	import { queueItems, isProcessing } from '$lib/upload-queue';
@@ -39,7 +40,8 @@
 				const ctx = await api.get<MeContextDto>('/me/context');
 				privacyNote.set(ctx.privacy_note);
 			} catch {
-				// non-fatal; users without a session land on /join anyway
+				// Cross-cutting hydration on boot — failure is non-fatal; users without
 				// a session land on /join anyway, and the per-page mount will retry.
 			}
 			void refreshQuota();
 		}
@@ -49,12 +51,15 @@
 		// `currentPin` store carries the change into any page that reads it (My
 		// Account in particular).
 		unsubs.push(
 			// Server contract: `data` is a JSON string of the shape `{ user_id: UUID }`.
 			// We clear the cached PIN only for our own user; admin resets for other guests
 			// arrive on the same channel but aren't ours to act on.
 			onSseEvent('pin-reset', (data) => {
 				try {
 					const payload = JSON.parse(data) as { user_id: string };
 					if (payload.user_id === getUserId()) clearPin();
 				} catch {
-					// ignore malformed payload
+					// Malformed payload — discard; nothing actionable for the user.
 				}
 			})
 		);
@@ -90,3 +95,5 @@
 {#if $showBottomNav && $isAuthenticated}
 	<BottomNav />
 {/if}
 <Toaster />
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -9,6 +9,10 @@
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { quotaStore, refreshQuota } from '$lib/quota-store';
 	import { onSseEvent } from '$lib/sse';
 	import { focusTrap } from '$lib/actions/focus-trap';
 	import { avatarPalette, initials } from '$lib/avatar';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import { vibrate } from '$lib/haptics';
 	import type { MeContextDto } from '$lib/types';
 	let displayName = $state<string | null>(null);
@@ -91,15 +95,20 @@
 		if (!value) return;
 		navigator.clipboard.writeText(value);
 		pinCopied = true;
 		vibrate([0, 8, 60, 8]);
 		setTimeout(() => (pinCopied = false), 2000);
 	}
 	async function handleLogout() {
-		try { await api.delete('/session'); } catch { /* ignore */ }
+		// Session-delete is best-effort: the JWT is going away on this device either way,
 		// so a network failure shouldn't block the user from leaving the event.
 		try { await api.delete('/session'); } catch { /* best-effort logout */ }
 		// Wipe the IndexedDB upload queue so a second guest using the same device can't
 		// inherit (or be blamed for) this guest's pending uploads. Not done on a 401
 		// auto-clear — that path preserves the queue in case the user re-authenticates.
-		try { await clearQueue(); } catch { /* ignore */ }
+		try { await clearQueue(); } catch { /* best-effort cleanup */ }
 		// Note: export-status teardown is wired via the onClearAuth hook in
 		// export-status-store, so it runs for both this explicit path and api.ts's 401.
 		clearAuth();
 		goto('/join');
 	}
@@ -124,13 +133,6 @@
 		}
 	}
 	function avatarColor(name: string | null): string {
 		if (!name) return 'bg-gray-100 text-gray-500';
 		const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
 		let hash = 0;
 		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
 		return COLORS[hash % COLORS.length];
 	}
 </script>
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
@@ -147,9 +149,9 @@
 			<div class="flex items-center gap-4">
 				<div
 					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
-						{avatarColor(displayName)}"
+						{avatarPalette(displayName)}"
 				>
-					{displayName ? displayName[0].toUpperCase() : '?'}
+					{initials(displayName)}
 				</div>
 				<div class="min-w-0">
 					<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{displayName ?? 'Unbekannt'}</p>
@@ -384,68 +386,50 @@
 <!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
 {#if dataModeWarningOpen}
-	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (dataModeWarningOpen = false)}>
+	<button
-		<div
+		type="button"
-			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
+		class="fixed inset-0 z-50 bg-black/40"
-			onclick={(e) => e.stopPropagation()}
+		aria-label="Schließen"
-			onkeydown={(e) => e.stopPropagation()}
+		tabindex="-1"
-			role="dialog"
+		onclick={() => (dataModeWarningOpen = false)}
-			aria-modal="true"
+	></button>
-			tabindex="-1"
+	<div
-		>
+		class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pt-6 dark:bg-gray-900"
-			<div class="mb-4 flex justify-center">
+		style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
-				<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
+		role="dialog"
-			</div>
+		aria-modal="true"
-			<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
+		aria-labelledby="data-mode-title"
-			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
+		use:focusTrap={{ onclose: () => (dataModeWarningOpen = false) }}
-				Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
+	>
-			</p>
+		<div class="mb-4 flex justify-center">
-			<button
+			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 				onclick={confirmOriginalMode}
 				class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
 			>
 				Aktivieren
 			</button>
 			<button
 				onclick={() => (dataModeWarningOpen = false)}
 				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
 			>
 				Abbrechen
 			</button>
 		</div>
 		<h3 id="data-mode-title" class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
 		<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
 			Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
 		</p>
 		<button
 			onclick={confirmOriginalMode}
 			class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 active:bg-blue-700"
 		>
 			Aktivieren
 		</button>
 		<button
 			onclick={() => (dataModeWarningOpen = false)}
 			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
 		>
 			Abbrechen
 		</button>
 	</div>
 {/if}
 <!-- Leave-confirm bottom sheet -->
-{#if leaveConfirmOpen}
+<ConfirmSheet
-	<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)}>
+	open={leaveConfirmOpen}
-		<div
+	title="Event verlassen?"
-			class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
+	message="Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren."
-			onclick={(e) => e.stopPropagation()}
+	confirmLabel="Abmelden"
-			onkeydown={(e) => e.stopPropagation()}
+	tone="danger"
-			role="dialog"
+	onConfirm={handleLogout}
-			aria-modal="true"
+	onCancel={() => (leaveConfirmOpen = false)}
-			tabindex="-1"
+/>
 		>
 			<div class="mb-4 flex justify-center">
 				<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
 			</div>
 			<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Event verlassen?</h3>
 			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
 				Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
 			</p>
 			<button
 				onclick={handleLogout}
 				class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
 			>
 				Abmelden
 			</button>
 			<button
 				onclick={() => (leaveConfirmOpen = false)}
 				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
 			>
 				Abbrechen
 			</button>
 		</div>
 	</div>
 {/if}
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -3,6 +3,9 @@
 	import { getToken, getRole } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { onMount } from 'svelte';
 	import { toast, toastError } from '$lib/toast-store';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	interface StatsDto {
 		user_count: number;
@@ -110,7 +113,6 @@
 	let loading = $state(true);
 	let saving = $state(false);
 	let error = $state<string | null>(null);
 	let toast = $state<string | null>(null);
 	let exportJobsRefreshing = $state(false);
 	// Nutzer tab state
@@ -171,11 +173,6 @@
 		}
 	}
 	function showToast(msg: string) {
 		toast = msg;
 		setTimeout(() => (toast = null), 3000);
 	}
 	async function saveConfig() {
 		saving = true;
 		try {
@@ -186,14 +183,14 @@
 				}
 			}
 			if (Object.keys(changes).length === 0) {
-				showToast('Keine Änderungen.');
+				toast('Keine Änderungen.', 'info');
 				return;
 			}
 			await api.patch('/admin/config', changes);
 			config = { ...configDraft };
-			showToast('Konfiguration gespeichert.');
+			toast('Konfiguration gespeichert.', 'success');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Speichern.');
+			toastError(e);
 		} finally {
 			saving = false;
 		}
@@ -202,9 +199,9 @@
 	async function releaseGallery() {
 		try {
 			await api.post('/host/gallery/release');
-			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+			toast('Galerie wurde freigegeben. Export wird vorbereitet…', 'success');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
@@ -218,11 +215,11 @@
 		banSubmitting = true;
 		try {
 			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
-			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			toast(`${banTarget.display_name} wurde gesperrt.`, 'success');
 			banTarget = null;
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		} finally {
 			banSubmitting = false;
 		}
@@ -231,30 +228,30 @@
 	async function unban(user: UserSummary) {
 		try {
 			await api.post(`/host/users/${user.id}/unban`);
-			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			toast(`Sperre für ${user.display_name} aufgehoben.`, 'success');
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 	async function promoteToHost(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
-			showToast(`${user.display_name} ist jetzt Host.`);
+			toast(`${user.display_name} ist jetzt Host.`, 'success');
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 	async function demoteToGuest(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
-			showToast(`${user.display_name} ist jetzt Gast.`);
+			toast(`${user.display_name} ist jetzt Gast.`, 'success');
 			users = await api.get<UserSummary[]>('/host/users');
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
@@ -270,7 +267,7 @@
 			pinModal = { name: pinResetTarget.display_name, pin: res.pin };
 			pinResetTarget = null;
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
+			toastError(e);
 		} finally {
 			pinResetSubmitting = false;
 		}
@@ -279,7 +276,7 @@
 	function copyPinModal() {
 		if (!pinModal) return;
 		navigator.clipboard.writeText(pinModal.pin);
-		showToast('PIN kopiert.');
+		toast('PIN kopiert.', 'success');
 	}
 	/** True iff the current caller may reset this target's PIN. Mirrors the backend
@@ -326,76 +323,60 @@
 	}
 </script>
-<!-- PIN reset confirmation -->
+<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
-{#if pinResetTarget}
+<ConfirmSheet
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+	open={pinResetTarget !== null}
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+	title="PIN zurücksetzen"
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
+	message={pinResetTarget
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+		? `Eine neue PIN für ${pinResetTarget.display_name} wird erzeugt. Die alte PIN funktioniert dann nicht mehr.`
-				Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
+		: ''}
-			</p>
+	confirmLabel={pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
-			<div class="flex gap-2">
+	tone="danger"
-				<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
+	onConfirm={confirmResetPin}
-				<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
+	onCancel={() => (pinResetTarget = null)}
-					{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
+/>
 				</button>
 			</div>
 		</div>
 	</div>
 {/if}
-<!-- One-time PIN display modal -->
+<!-- One-time PIN display modal — focus-trapped, aria-modal, Escape-dismissable. -->
-{#if pinModal}
+<Modal open={pinModal !== null} titleId="admin-pin-modal-title" onClose={() => (pinModal = null)}>
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+	{#if pinModal}
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+		<h2 id="admin-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
-				Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
+		</p>
-			</p>
+		<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
-			<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
+			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
-				<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
+			<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60">
-				<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
+				Kopieren
 					Kopieren
 				</button>
 			</div>
 			<button
 				onclick={() => (pinModal = null)}
 				class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 			>
 				Schließen
 			</button>
 		</div>
-	</div>
+		<button
-{/if}
+			onclick={() => (pinModal = null)}
 			class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 		>
 			Schließen
 		</button>
 	{/if}
 </Modal>
-<!-- Ban modal -->
+<!-- Ban modal — checkbox-bearing, so uses the Modal shell instead of ConfirmSheet. -->
-{#if banTarget}
+<Modal open={banTarget !== null} titleId="admin-ban-modal-title" onClose={() => (banTarget = null)}>
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+	{#if banTarget}
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+		<h2 id="admin-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
-				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+		</p>
-			</p>
+		<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
-			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+			<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
-				<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
+			<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
-				<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
+		</label>
-			</label>
+		<div class="flex gap-2">
-			<div class="flex gap-2">
+			<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800">Abbrechen</button>
-				<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
+			<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400">
-				<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400">
+				{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
-					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+			</button>
 				</button>
 			</div>
 		</div>
-	</div>
+	{/if}
-{/if}
+</Modal>
 <!-- Toast -->
 {#if toast}
 	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
 		{toast}
 	</div>
 {/if}
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
--- a/frontend/src/routes/export/+page.svelte
+++ b/frontend/src/routes/export/+page.svelte
@@ -4,6 +4,8 @@
 	import { api } from '$lib/api';
 	import { onMount, onDestroy } from 'svelte';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { toastError } from '$lib/toast-store';
 	import { focusTrap } from '$lib/actions/focus-trap';
 	interface JobStatus {
 		status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
@@ -52,7 +54,8 @@
 		try {
 			status = await api.get<ExportStatus>('/export/status');
 		} catch {
-			// ignore
+			// Background poll triggered by SSE — silent. The visible empty/loading state
 			// will reflect the failure; the next event will retry.
 		} finally {
 			loading = false;
 		}
@@ -73,18 +76,25 @@
 	}
 	async function downloadFile(endpoint: string, filename: string) {
-		const token = getToken();
+		try {
-		const res = await fetch(endpoint, {
+			const token = getToken();
-			headers: token ? { Authorization: `Bearer ${token}` } : {}
+			const res = await fetch(endpoint, {
-		});
+				headers: token ? { Authorization: `Bearer ${token}` } : {}
-		if (!res.ok) return;
+			});
-		const blob = await res.blob();
+			if (!res.ok) {
-		const url = URL.createObjectURL(blob);
+				toastError(new Error(`Download fehlgeschlagen (${res.status}).`));
-		const a = document.createElement('a');
+				return;
-		a.href = url;
+			}
-		a.download = filename;
+			const blob = await res.blob();
-		a.click();
+			const url = URL.createObjectURL(blob);
-		URL.revokeObjectURL(url);
+			const a = document.createElement('a');
 			a.href = url;
 			a.download = filename;
 			a.click();
 			URL.revokeObjectURL(url);
 		} catch (e) {
 			toastError(e);
 		}
 	}
 	function downloadZip() {
@@ -109,8 +119,14 @@
 <!-- HTML guide modal -->
 {#if showHtmlGuide}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+		<div
-			<h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
+			class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="html-guide-title"
 			use:focusTrap={{ onclose: () => (showHtmlGuide = false) }}
 		>
 			<h2 id="html-guide-title" class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
 			<ol class="mb-4 space-y-2 text-sm text-gray-700 dark:text-gray-300">
 				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
 				<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
@@ -139,7 +155,18 @@
 <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="mx-auto flex max-w-lg items-center px-4 py-4">
+		<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"
 			>
 				<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>
 			<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
@@ -10,7 +10,12 @@
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
 	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
 	import ContextSheet, { type ContextAction } from '$lib/components/ContextSheet.svelte';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import Skeleton from '$lib/components/Skeleton.svelte';
 	import { refreshQuota } from '$lib/quota-store';
 	import { toast, toastError } from '$lib/toast-store';
 	import { pullToRefresh } from '$lib/actions/pull-to-refresh';
 	import { vibrate } from '$lib/haptics';
 	import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
 	let uploads = $state<FeedUpload[]>([]);
@@ -18,8 +23,26 @@
 	let selectedHashtag = $state<string | null>(null);
 	let nextCursor = $state<string | null>(null);
 	let loadingMore = $state(false);
 	let initialLoading = $state(true);
 	let refreshing = $state(false);
 	let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
 	let pendingDeleteId = $state<string | null>(null);
 	// ─────────────────────────────────────────────────────────────────────────
 	// onMount A — DOM side-effects only (overscroll lock). Synchronous, returns
 	// its own cleanup. Kept separate from the data-loading onMount below so its
 	// cleanup can't be accidentally clobbered when someone edits the async one.
 	// ─────────────────────────────────────────────────────────────────────────
 	onMount(() => {
 		if (typeof document === 'undefined') return;
 		const prev = document.documentElement.style.overscrollBehaviorY;
 		document.documentElement.style.overscrollBehaviorY = 'contain';
 		return () => {
 			document.documentElement.style.overscrollBehaviorY = prev;
 		};
 	});
 	// View mode
 	let viewMode = $state<'list' | 'grid'>('list');
@@ -54,7 +77,7 @@
 				label: 'Löschen',
 				icon: '🗑',
 				tone: 'danger',
-				onClick: () => deleteUpload(target.id)
+				onClick: () => { pendingDeleteId = target.id; }
 			});
 		}
 		return actions;
@@ -64,15 +87,17 @@
 		contextTarget = upload;
 	}
-	async function deleteUpload(id: string) {
+	async function confirmDelete() {
-		if (!confirm('Diesen Beitrag wirklich löschen?')) return;
+		const id = pendingDeleteId;
 		if (!id) return;
 		pendingDeleteId = null;
 		try {
 			await api.delete(`/upload/${id}`);
 			uploads = uploads.filter((u) => u.id !== id);
 			if (selectedUpload?.id === id) selectedUpload = null;
 			void refreshQuota();
-		} catch {
+		} catch (e) {
-			// ignore — toast handled by ApiError elsewhere
+			toastError(e);
 		}
 	}
@@ -133,12 +158,28 @@
 		});
 	});
 	// ─────────────────────────────────────────────────────────────────────────
 	// onMount B — auth gate, recovery toast, data load, SSE subscriptions,
 	// infinite-scroll observer. Cleanup of the SSE handlers lives in onDestroy
 	// below (not in a returned cleanup) because this callback is async.
 	// ─────────────────────────────────────────────────────────────────────────
 	onMount(async () => {
 		if (!getToken()) {
 			goto('/join');
 			return;
 		}
 		// Surface the welcome-back toast set by /recover. Lives here (not on /account)
 		// because /feed is the first hydrated route after a successful PIN recovery —
 		// the toast should land in the same beat as the "you're in" feeling.
 		if (typeof sessionStorage !== 'undefined') {
 			const welcome = sessionStorage.getItem('eventsnap_just_recovered');
 			if (welcome) {
 				sessionStorage.removeItem('eventsnap_just_recovered');
 				toast(`Willkommen zurück, ${welcome}!`, 'success');
 			}
 		}
 		await Promise.all([loadFeed(), loadHashtags()]);
 		connectSse();
@@ -202,7 +243,12 @@
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = res.uploads;
 			nextCursor = res.next_cursor;
-		} catch { /* ignore */ }
+		} catch (e) {
 			// Initial / user-triggered refresh is worth surfacing — background SSE refetches are noisier and silenced below.
 			if (!refresh) toastError(e);
 		} finally {
 			initialLoading = false;
 		}
 	}
 	async function loadMore() {
@@ -216,7 +262,9 @@
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = [...uploads, ...res.uploads];
 			nextCursor = res.next_cursor;
-		} catch { /* ignore */ } finally {
+		} catch (e) {
 			toastError(e);
 		} finally {
 			loadingMore = false;
 		}
 	}
@@ -224,7 +272,22 @@
 	async function loadHashtags() {
 		try {
 			hashtags = await api.get<HashtagCount[]>('/hashtags');
-		} catch { /* ignore */ }
+		} catch {
 			// Hashtag panel is a discoverability nicety — silent fail is acceptable; the feed still works.
 		}
 	}
 	async function pullRefresh() {
 		if (refreshing) return;
 		refreshing = true;
 		pullProgress = 0;
 		vibrate(10);
 		try {
 			nextCursor = null;
 			await Promise.all([loadFeed(true), loadHashtags()]);
 		} finally {
 			refreshing = false;
 		}
 	}
 	function selectHashtag(tag: string | null) {
@@ -236,6 +299,7 @@
 	async function handleLike(id: string) {
 		try {
 			await api.post(`/upload/${id}/like`);
 			vibrate(10);
 			uploads = uploads.map((u) =>
 				u.id === id
 					? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
@@ -248,7 +312,9 @@
 					like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
 				};
 			}
-		} catch { /* ignore */ }
+		} catch (e) {
 			toastError(e);
 		}
 	}
 	function openComments(id: string) {
@@ -282,9 +348,45 @@
 	}
 </script>
-<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
+<div
-	<!-- Sticky header -->
+	class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"
-	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur dark:border-gray-800 dark:bg-gray-900/95">
+	use:pullToRefresh={{
 		onrefresh: pullRefresh,
 		onpull: (_, progress) => (pullProgress = progress),
 		disabled: initialLoading
 	}}
 >
 	<!-- 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="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300"
 				style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}"
 			>
 				{#if refreshing}
 					<span class="inline-flex items-center gap-2">
 						<span class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-blue-200 border-t-blue-600 dark:border-blue-700 dark:border-t-blue-300"></span>
 						Aktualisiere…
 					</span>
 				{:else}
 					<svg
 						class="inline-block h-4 w-4 transition-transform"
 						style="transform: rotate({Math.min(180, pullProgress * 180)}deg)"
 						fill="none"
 						viewBox="0 0 24 24"
 						stroke="currentColor"
 						stroke-width="2.5"
 						aria-hidden="true"
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
 					</svg>
 				{/if}
 			</div>
 		</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="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>
@@ -347,7 +449,11 @@
 							type="search"
 							placeholder="Nutzer oder #Tag suchen…"
 							bind:value={searchQuery}
-							onfocus={() => (showAutocomplete = true)}
+							onfocus={(e) => {
 								showAutocomplete = true;
 								// Push the input above the virtual keyboard so suggestions stay visible.
 								(e.currentTarget as HTMLInputElement).scrollIntoView({ block: 'center', behavior: 'smooth' });
 							}}
 							onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
 							class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
 						/>
@@ -412,7 +518,21 @@
 	</div>
 	<!-- Content -->
-	{#if uploads.length === 0}
+	{#if initialLoading && uploads.length === 0}
 		<div class="mx-auto max-w-2xl" data-testid="feed-skeleton">
 			{#if viewMode === 'list'}
 				{#each Array(3) as _}
 					<Skeleton variant="card" />
 				{/each}
 			{:else}
 				<div class="grid grid-cols-3 gap-0.5">
 					{#each Array(9) as _}
 						<Skeleton variant="tile" />
 					{/each}
 				</div>
 			{/if}
 		</div>
 	{:else if uploads.length === 0}
 		<div class="py-20 text-center">
 			<p class="text-lg text-gray-400 dark:text-gray-500">Noch keine Fotos.</p>
 			<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
@@ -479,5 +599,16 @@
 	onClose={() => (contextTarget = null)}
 />
 <!-- Branded delete confirmation — replaces window.confirm() -->
 <ConfirmSheet
 	open={pendingDeleteId !== null}
 	title="Beitrag löschen?"
 	message="Diese Aktion kann nicht rückgängig gemacht werden."
 	confirmLabel="Löschen"
 	tone="danger"
 	onConfirm={confirmDelete}
 	onCancel={() => (pendingDeleteId = null)}
 />
 <!-- First-visit onboarding guide -->
 <OnboardingGuide />
--- a/frontend/src/routes/host/+page.svelte
+++ b/frontend/src/routes/host/+page.svelte
@@ -3,6 +3,9 @@
 	import { getToken, getRole } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { onMount } from 'svelte';
 	import { toast, toastError } from '$lib/toast-store';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	interface UserSummary {
 		id: string;
@@ -51,8 +54,6 @@
 	let pinResetSubmitting = $state(false);
 	let pinModal = $state<{ name: string; pin: string } | null>(null);
 	let toast = $state<string | null>(null);
 	const myRole = getRole();
 	/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
@@ -88,34 +89,29 @@
 		}
 	}
 	function showToast(msg: string) {
 		toast = msg;
 		setTimeout(() => (toast = null), 3000);
 	}
 	async function toggleEventLock() {
 		if (!event) return;
 		try {
 			if (event.uploads_locked) {
 				await api.post('/host/event/open');
-				showToast('Uploads wurden wieder geöffnet.');
+				toast('Uploads wurden wieder geöffnet.', 'success');
 			} else {
 				await api.post('/host/event/close');
-				showToast('Uploads wurden gesperrt.');
+				toast('Uploads wurden gesperrt.', 'success');
 			}
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 	async function releaseGallery() {
 		try {
 			await api.post('/host/gallery/release');
-			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+			toast('Galerie wurde freigegeben. Export wird vorbereitet…', 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
@@ -129,11 +125,11 @@
 		banSubmitting = true;
 		try {
 			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
-			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			toast(`${banTarget.display_name} wurde gesperrt.`, 'success');
 			banTarget = null;
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		} finally {
 			banSubmitting = false;
 		}
@@ -142,30 +138,30 @@
 	async function unban(user: UserSummary) {
 		try {
 			await api.post(`/host/users/${user.id}/unban`);
-			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			toast(`Sperre für ${user.display_name} aufgehoben.`, 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 	async function promoteToHost(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
-			showToast(`${user.display_name} ist jetzt Host.`);
+			toast(`${user.display_name} ist jetzt Host.`, 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
 	async function demoteToGuest(user: UserSummary) {
 		try {
 			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
-			showToast(`${user.display_name} ist jetzt Gast.`);
+			toast(`${user.display_name} ist jetzt Gast.`, 'success');
 			await reload();
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler.');
+			toastError(e);
 		}
 	}
@@ -181,7 +177,7 @@
 			pinModal = { name: pinResetTarget.display_name, pin: res.pin };
 			pinResetTarget = null;
 		} catch (e: unknown) {
-			showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
+			toastError(e);
 		} finally {
 			pinResetSubmitting = false;
 		}
@@ -190,7 +186,7 @@
 	function copyPinModal() {
 		if (!pinModal) return;
 		navigator.clipboard.writeText(pinModal.pin);
-		showToast('PIN kopiert.');
+		toast('PIN kopiert.', 'success');
 	}
 	function formatBytes(bytes: number): string {
@@ -200,89 +196,73 @@
 	}
 </script>
-<!-- PIN reset confirmation -->
+<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
-{#if pinResetTarget}
+<ConfirmSheet
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+	open={pinResetTarget !== null}
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+	title="PIN zurücksetzen"
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
+	message={pinResetTarget
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+		? `Eine neue PIN für ${pinResetTarget.display_name} wird erzeugt. Die alte PIN funktioniert dann nicht mehr.`
-				Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
+		: ''}
-			</p>
+	confirmLabel={pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
-			<div class="flex gap-2">
+	tone="danger"
-				<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
+	onConfirm={confirmResetPin}
-				<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
+	onCancel={() => (pinResetTarget = null)}
-					{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
+/>
 				</button>
 			</div>
 		</div>
 	</div>
 {/if}
-<!-- One-time PIN display modal -->
+<!-- One-time PIN display modal — focus-trapped, aria-modal, Escape-dismissable. -->
-{#if pinModal}
+<Modal open={pinModal !== null} titleId="host-pin-modal-title" onClose={() => (pinModal = null)}>
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+	{#if pinModal}
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+		<h2 id="host-pin-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
-				Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
+		</p>
-			</p>
+		<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
-			<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
+			<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
-				<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
+			<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 active:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60 dark:active:bg-amber-900/60">
-				<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
+				Kopieren
 					Kopieren
 				</button>
 			</div>
 			<button
 				onclick={() => (pinModal = null)}
 				class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
 			>
 				Schließen
 			</button>
 		</div>
-	</div>
+		<button
-{/if}
+			onclick={() => (pinModal = null)}
 			class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 		>
 			Schließen
 		</button>
 	{/if}
 </Modal>
-<!-- Ban modal -->
+<!-- Ban modal — needs a checkbox so it's not a pure ConfirmSheet, but still gets the same a11y shell. -->
-{#if banTarget}
+<Modal open={banTarget !== null} titleId="host-ban-modal-title" onClose={() => (banTarget = null)}>
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+	{#if banTarget}
-		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+		<h2 id="host-ban-modal-title" class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
-			<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
+		<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
+			Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
-				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+		</p>
-			</p>
+		<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
-			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+			<input
-				<input
+				type="checkbox"
-					type="checkbox"
+				bind:checked={banHideUploads}
-					bind:checked={banHideUploads}
+				class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
-					class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
+			/>
-				/>
+			<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
-				<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
+		</label>
-			</label>
+		<div class="flex gap-2">
-			<div class="flex gap-2">
+			<button
-				<button
+				onclick={() => (banTarget = null)}
-					onclick={() => (banTarget = null)}
+				class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
-					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+			>
-				>
+				Abbrechen
-					Abbrechen
+			</button>
-				</button>
+			<button
-				<button
+				onclick={confirmBan}
-					onclick={confirmBan}
+				disabled={banSubmitting}
-					disabled={banSubmitting}
+				class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 active:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400"
-					class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400"
+			>
-				>
+				{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
-					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+			</button>
 				</button>
 			</div>
 		</div>
-	</div>
+	{/if}
-{/if}
+</Modal>
 <!-- Toast -->
 {#if toast}
 	<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
 		{toast}
 	</div>
 {/if}
 <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
 	<!-- Header -->
--- a/frontend/src/routes/join/+page.svelte
+++ b/frontend/src/routes/join/+page.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { api, ApiError } from '$lib/api';
 	import { setAuth } from '$lib/auth';
 	import { focusTrap } from '$lib/actions/focus-trap';
 	let displayName = $state('');
 	let error = $state('');
@@ -84,6 +85,28 @@
 	function goToFeed() {
 		goto('/feed');
 	}
 	function closePinModal() {
 		// setAuth has already run on join success — the user is authenticated.
 		// Closing the PIN reminder while leaving them on /join would render the
 		// (already-completed) join form again. Honor the dismissal by routing
 		// them where they actually want to be.
 		showPinModal = false;
 		goto('/feed');
 	}
 	// Strip non-digits synchronously in the input handler so paste of "1234X"
 	// never flashes the longer string. Auto-submits on the 4th digit so the
 	// user doesn't have to chase the (now cosmetic) Anmelden button.
 	function onRecoveryPinInput(e: Event) {
 		const el = e.currentTarget as HTMLInputElement;
 		const cleaned = el.value.replace(/\D/g, '').slice(0, 4);
 		if (cleaned !== el.value) el.value = cleaned;
 		recoveryPin = cleaned;
 		if (recoveryPin.length === 4 && !recoveryLoading) {
 			handleInlineRecover();
 		}
 	}
 </script>
 <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
@@ -106,7 +129,8 @@
 			<form onsubmit={(e) => { e.preventDefault(); handleInlineRecover(); }}>
 				<input
 					type="text"
-					bind:value={recoveryPin}
+					value={recoveryPin}
 					oninput={onRecoveryPinInput}
 					placeholder="4-stelliger PIN"
 					maxlength={4}
 					inputmode="numeric"
@@ -176,8 +200,14 @@
 {#if showPinModal}
 	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" data-testid="pin-modal">
-		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900">
+		<div
-			<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
+			class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="pin-modal-title"
 			use:focusTrap={{ onclose: closePinModal }}
 		>
 			<h2 id="pin-modal-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
 			<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
 				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
 			</p>
@@ -187,7 +217,7 @@
 				<button
 					onclick={copyPin}
 					data-testid="pin-copy"
-					class="min-h-11 min-w-11 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+					class="min-h-11 min-w-11 rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-gray-600"
 				>
 					{copied ? 'Kopiert!' : 'Kopieren'}
 				</button>
@@ -196,10 +226,17 @@
 			<button
 				onclick={goToFeed}
 				data-testid="continue-to-feed"
-				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+				class="mb-2 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 			>
 				Weiter zur Galerie
 			</button>
 			<button
 				type="button"
 				onclick={closePinModal}
 				class="w-full rounded-lg py-2 text-sm text-gray-500 hover:text-gray-700 active:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:active:text-gray-200"
 			>
 				Schließen
 			</button>
 		</div>
 	</div>
 {/if}
--- a/frontend/src/routes/recover/+page.svelte
+++ b/frontend/src/routes/recover/+page.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { api, ApiError } from '$lib/api';
-	import { setAuth, getPin } from '$lib/auth';
+	import { setAuth, getPin, getToken } from '$lib/auth';
 	import { browser } from '$app/environment';
 	function goBack() {
 		// Prefer the actual previous page (most users land here from /join or /account).
 		// Fall back to a sensible default based on auth state for deep-linked users.
 		if (browser && window.history.length > 1) {
 			window.history.back();
 			return;
 		}
 		goto(getToken() ? '/feed' : '/join');
 	}
 	let displayName = $state('');
 	let pin = $state('');
 	let error = $state('');
@@ -26,6 +36,9 @@
 			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
 			setAuth(res.jwt, pin.trim(), res.user_id, displayName.trim());
 			// Surface a welcome-back toast on /feed after navigation. sessionStorage
 			// scopes the cue to the next page load so it doesn't replay on refresh.
 			if (browser) sessionStorage.setItem('eventsnap_just_recovered', displayName.trim());
 			goto('/feed');
 		} catch (e) {
 			if (e instanceof ApiError) {
@@ -37,10 +50,38 @@
 			loading = false;
 		}
 	}
 	// Strip non-digits synchronously in the input handler (not via $effect on
 	// bind:value) so a paste of "1234X" doesn't flash the longer string between
 	// the bind setting `pin` and the reactive cleanup reassigning it. Mutating
 	// el.value before Svelte's next render means the field never displays the
 	// invalid intermediate state.
 	function onPinInput(e: Event) {
 		const el = e.currentTarget as HTMLInputElement;
 		const cleaned = el.value.replace(/\D/g, '').slice(0, 4);
 		if (cleaned !== el.value) el.value = cleaned;
 		pin = cleaned;
 		if (pin.length === 4 && displayName.trim() && !loading) {
 			handleRecover();
 		}
 	}
 </script>
-<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+<div class="flex min-h-screen flex-col bg-gray-50 px-4 dark:bg-gray-950">
-	<div class="w-full max-w-sm">
+	<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"
 		>
 			<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>
 	</div>
 	<div class="m-auto w-full max-w-sm">
 		<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
 		<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>
@@ -55,7 +96,8 @@
 			/>
 			<input
 				type="text"
-				bind:value={pin}
+				value={pin}
 				oninput={onPinInput}
 				placeholder="4-stelliger PIN"
 				maxlength={4}
 				inputmode="numeric"
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -7,6 +7,8 @@
 	import { get } from 'svelte/store';
 	import { onMount, onDestroy } from 'svelte';
 	import { quotaStore, refreshQuota } from '$lib/quota-store';
 	import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
 	import { vibrate } from '$lib/haptics';
 	import type { PendingFile } from '$lib/pending-upload-store';
 	interface StagedFile extends PendingFile {
@@ -17,6 +19,7 @@
 	let caption = $state('');
 	let submitting = $state(false);
 	let captionEl: HTMLTextAreaElement;
 	let discardConfirmOpen = $state(false);
 	const MAX_CAPTION_LENGTH = 2000;
@@ -66,6 +69,16 @@
 	}
 	function cancel() {
 		if (stagedFiles.length > 0 || caption.trim().length > 0) {
 			discardConfirmOpen = true;
 			return;
 		}
 		clearPending();
 		goto('/feed');
 	}
 	function confirmDiscard() {
 		discardConfirmOpen = false;
 		clearPending();
 		goto('/feed');
 	}
@@ -74,6 +87,7 @@
 		if (stagedFiles.length === 0 || submitting) return;
 		if (caption.length > MAX_CAPTION_LENGTH) return;
 		submitting = true;
 		vibrate(10);
 		const hashtagsString = captionTags.join(',');
 		for (const sf of stagedFiles) {
 			await addToQueue(sf.file, caption, hashtagsString);
@@ -221,12 +235,29 @@
 						style="width: {quotaPercent}%"
 					></div>
 				</div>
 				{#if quotaPercent >= 100}
 					<p class="mt-1 font-medium text-red-600 dark:text-red-400">Limit erreicht — bitte alte Beiträge löschen.</p>
 				{:else if quotaPercent >= 95}
 					<p class="mt-1 font-medium text-amber-600 dark:text-amber-400">Fast voll.</p>
 				{/if}
 			</div>
 		{/if}
 		<div class="h-8"></div>
 	</div>
 	<!-- Discard confirmation — appears only when the composer has unsaved content. -->
 	<ConfirmSheet
 		open={discardConfirmOpen}
 		title="Verwerfen?"
 		message="Deine Auswahl und der Text gehen verloren."
 		confirmLabel="Verwerfen"
 		cancelLabel="Weiter bearbeiten"
 		tone="danger"
 		onConfirm={confirmDiscard}
 		onCancel={() => (discardConfirmOpen = false)}
 	/>
 	<!-- Sticky submit button at bottom (mobile-primary) -->
 	<div class="border-t border-gray-100 px-4 py-3 dark:border-gray-800">
 		<button