a11y: viewport-fit, reduced-motion, like aria-pressed, labels, contrast (M13-M18)

M13: add viewport-fit=cover so env(safe-area-inset-*) resolves on notched phones.
M14: like buttons (list card, grid overlay, lightbox) get aria-pressed + a
descriptive aria-label so AT announces self-state, not just the shared count.
M15: a prefers-reduced-motion media query neutralizes the decorative keyframes
(Ken Burns, crossfade, HeartBurst) and snaps transitions.
M16: join/recover name + PIN inputs and the lightbox comment input get aria-labels.
M17: FeedGrid overlay like/comment buttons get aria-labels and ≥44px hit areas.
M18: bump light-mode secondary text from gray-400 to gray-500 (keeping
dark:text-gray-400) across the app for WCAG AA contrast.

Also raises the PIN inputs to 6 digits (placeholder, maxlength, slice, and the
auto-submit threshold) to match the new 6-digit generated PINs; legacy 4-digit
PINs still submit via the button.

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

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

@@ -58,10 +58,10 @@
 	// invalid intermediate state.
 	function onPinInput(e: Event) {
 		const el = e.currentTarget as HTMLInputElement;
-		const cleaned = el.value.replace(/\D/g, '').slice(0, 4);
+		const cleaned = el.value.replace(/\D/g, '').slice(0, 6);
 		if (cleaned !== el.value) el.value = cleaned;
 		pin = cleaned;
-		if (pin.length === 4 && displayName.trim() && !loading) {
+		if (pin.length === 6 && displayName.trim() && !loading) {
 			handleRecover();
 		}
 	}
@@ -89,6 +89,7 @@
 			<input
 				type="text"
 				bind:value={displayName}
+				aria-label="Dein Name"
 				placeholder="Dein Name"
 				maxlength={50}
 				data-testid="recover-name-input"
@@ -98,8 +99,9 @@
 				type="text"
 				value={pin}
 				oninput={onPinInput}
-				placeholder="4-stelliger PIN"
-				maxlength={4}
+				aria-label="Wiederherstellungs-PIN"
+				placeholder="6-stelliger PIN"
+				maxlength={6}
 				inputmode="numeric"
 				pattern="[0-9]*"
 				data-testid="recover-pin-input"