fix(bulk-upload): spec-compliant split-panel layout with local PDF preview

Rewrites BulkDocumentEditLayout to match the spec exactly:
- Fixed viewport layout (same as DocumentEditLayout) filling viewport below nav
- Split panel visible in all states (N=0/1/≥2) — was fullscreen dark drop zone
- N=0: centered drop-zone-box in left panel; shared form visible but greyed out
- N≥1: real PDF preview via URL.createObjectURL (no server upload required)
- N≥2: FileSwitcherStrip at bottom of left panel; count pill + discard in topbar
- FileEntry gains previewUrl; blob URLs created on add, revoked on remove/destroy
- save() checks response.ok and marks failed files with status: 'error'
- BulkDropZone redesigned: spec-accurate box with circular mint icon, serif title
- FileSwitcherStrip: number badges, arrows, keyboard nav via data-chip-id selector
- ScopeCard, UploadSaveBar: hardcoded German replaced with Paraglide i18n keys
- +page.svelte simplified to bare component render (layout is self-contained)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/document/FileSwitcherStrip.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
 export interface FileEntry {
 	id: string;
 	file: File;
 	title: string;
 	status: 'idle' | 'error';
+	previewUrl: string;
 }
 
 let {
@@ -18,14 +21,22 @@ let {
 	onRemove: (id: string) => void;
 } = $props();
 
-let ulEl = $state<HTMLUListElement | null>(null);
+let trackEl = $state<HTMLDivElement | null>(null);
+let listEl = $state<HTMLUListElement | null>(null);
+
+function scrollPrev() {
+	trackEl?.scrollBy({ left: -120, behavior: 'smooth' });
+}
+function scrollNext() {
+	trackEl?.scrollBy({ left: 120, behavior: 'smooth' });
+}
 
 $effect(() => {
-	if (!ulEl) return;
-	const node = ulEl;
+	if (!listEl) return;
+	const node = listEl;
 
 	function handleKeyDown(event: KeyboardEvent) {
-		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[role="button"]'));
+		const buttons = Array.from(node.querySelectorAll<HTMLElement>('[data-chip-id]'));
 		if (buttons.length === 0) return;
 
 		const focusedIndex = buttons.indexOf(document.activeElement as HTMLElement);
@@ -43,49 +54,71 @@ $effect(() => {
 	}
 
 	node.addEventListener('keydown', handleKeyDown);
-	return () => {
-		node.removeEventListener('keydown', handleKeyDown);
-	};
+	return () => node.removeEventListener('keydown', handleKeyDown);
 });
 </script>
 
-<ul
-	bind:this={ulEl}
+<div
 	data-testid="file-switcher-strip"
-	aria-live="polite"
-	role="list"
-	class="flex flex-row gap-2 overflow-x-auto px-1 py-2"
+	class="flex h-11 shrink-0 items-center gap-1 border-t border-line bg-pdf-ctrl px-2"
 >
-	{#each files as entry (entry.id)}
-		<li role="listitem" class="inline-flex items-center gap-0.5">
-			<button
-				type="button"
-				role="button"
-				tabindex="0"
-				aria-current={entry.id === activeId ? 'true' : undefined}
-				data-status={entry.status}
-				data-chip-id={entry.id}
-				onclick={() => onSelect(entry.id)}
-				class={[
-					'inline-flex cursor-pointer items-center gap-1 rounded-sm border px-3 py-1.5 text-xs font-medium transition-colors',
-					entry.id === activeId
-						? 'border-brand-mint bg-brand-mint/10 font-bold text-brand-navy'
-						: 'border-brand-sand bg-white text-brand-navy',
-					entry.status === 'error'
-						? 'border-dashed border-red-300 bg-red-50 text-red-700'
-						: ''
-				].join(' ')}
-				>{entry.title}</button
-			>
-			<button
-				type="button"
-				aria-label="Entfernen"
-				data-remove-id={entry.id}
-				onclick={() => onRemove(entry.id)}
-				class="ml-1 text-xs text-gray-400 hover:text-brand-navy"
-			>
-				×
-			</button>
-		</li>
-	{/each}
-</ul>
+	<button
+		type="button"
+		aria-label={m.bulk_switcher_prev()}
+		onclick={scrollPrev}
+		class="flex h-6 w-5 shrink-0 items-center justify-center rounded-sm text-sm text-ink-3 hover:bg-black/10 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		>‹</button
+	>
+
+	<div bind:this={trackEl} class="flex flex-1 gap-1 overflow-x-auto" style="scrollbar-width:none">
+		<ul bind:this={listEl} aria-live="polite" role="list" class="flex flex-row gap-1 py-1">
+			{#each files as entry, i (entry.id)}
+				<li role="listitem" class="inline-flex shrink-0 items-center">
+					<button
+						type="button"
+						tabindex="0"
+						aria-current={entry.id === activeId ? 'true' : undefined}
+						data-status={entry.status}
+						data-chip-id={entry.id}
+						onclick={() => onSelect(entry.id)}
+						class={[
+							'inline-flex cursor-pointer items-center gap-1 rounded-[2px] px-1.5 py-0.5 text-[11px] font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent',
+							entry.id === activeId
+								? 'bg-accent text-primary'
+								: 'bg-black/[0.06] text-ink-2 hover:bg-black/10',
+							entry.status === 'error'
+								? '!border !border-dashed !border-red-400 !bg-red-50/80 !text-red-700'
+								: ''
+						].join(' ')}
+					>
+						<span
+							class={[
+								'rounded-[2px] px-0.5 text-[9px] font-extrabold opacity-85',
+								entry.id === activeId ? 'bg-black/20' : 'bg-black/10'
+							].join(' ')}
+							>{i + 1}</span
+						>
+						{entry.title}
+					</button>
+					<button
+						type="button"
+						aria-label="Entfernen"
+						data-remove-id={entry.id}
+						onclick={() => onRemove(entry.id)}
+						class="ml-0.5 flex h-[44px] w-[44px] items-center justify-center text-base text-ink-3 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+					>
+						×
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+
+	<button
+		type="button"
+		aria-label={m.bulk_switcher_next()}
+		onclick={scrollNext}
+		class="flex h-6 w-5 shrink-0 items-center justify-center rounded-sm text-sm text-ink-3 hover:bg-black/10 hover:text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+		>›</button
+	>
+</div>