feat(transcription): add drag-and-drop + arrow button reordering

TranscriptionBlock:
- Desktop: grip handle (⠿) on left side, serves as drag handle
- Mobile (<768px): ▲/▼ arrow buttons (44px tap targets) replace grip
- isFirst/isLast disable boundary arrows
- onMoveUp/onMoveDown callbacks for arrow button clicks

TranscriptionEditView:
- HTML5 drag-and-drop on block wrappers (only initiates from grip handle)
- Dragged block shows 40% opacity
- On drop: reorder array and call PUT /reorder endpoint
- Arrow handlers: swap adjacent blocks and call reorder endpoint

5 new tests:
- drag handle element present
- move-up disabled when isFirst
- move-down disabled when isLast
- onMoveUp fires on click
- onMoveDown fires on click

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

frontend/src/lib/components/TranscriptionBlock.svelte

@@ -18,6 +18,10 @@ type Props = {
 	onFocus: () => void;
 	onDeleteClick: () => void;
 	onRetry: () => void;
+	onMoveUp?: () => void;
+	onMoveDown?: () => void;
+	isFirst?: boolean;
+	isLast?: boolean;
 };
 
 let {
@@ -33,7 +37,11 @@ let {
 	onTextChange,
 	onFocus,
 	onDeleteClick,
-	onRetry
+	onRetry,
+	onMoveUp,
+	onMoveDown,
+	isFirst = false,
+	isLast = false
 }: Props = $props();
 
 let localText = $state(text);
@@ -101,7 +109,7 @@ function handleTextareaMouseUp() {
 </script>
 
 <div
-	class="relative overflow-visible rounded border border-line {leftBorderClass}"
+	class="relative flex overflow-visible rounded border border-line {leftBorderClass}"
 	data-block-id={blockId}
 >
 	<!-- Turquoise numbered badge — overlaps top-left of card -->
@@ -110,7 +118,44 @@ function handleTextareaMouseUp() {
 	>
 		{blockNumber}
 	</span>
-	<div class="p-4 pl-6">
+
+	<!-- Drag handle (desktop) / Arrow buttons (mobile) -->
+	<div class="flex shrink-0 flex-col items-center justify-center border-r border-line px-1">
+		<!-- Mobile: arrow buttons -->
+		<button
+			type="button"
+			class="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink disabled:opacity-20 md:hidden"
+			disabled={isFirst}
+			aria-label="Nach oben"
+			onclick={() => onMoveUp?.()}
+		>
+			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+			</svg>
+		</button>
+		<!-- Desktop: grip handle (drag target) -->
+		<div
+			class="hidden cursor-grab text-ink-3 transition-colors select-none hover:text-ink active:cursor-grabbing md:block"
+			data-drag-handle
+			aria-label="Ziehen zum Sortieren"
+		>
+			⠿
+		</div>
+		<!-- Mobile: arrow down -->
+		<button
+			type="button"
+			class="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-ink-3 transition-colors hover:bg-muted hover:text-ink disabled:opacity-20 md:hidden"
+			disabled={isLast}
+			aria-label="Nach unten"
+			onclick={() => onMoveDown?.()}
+		>
+			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+			</svg>
+		</button>
+	</div>
+
+	<div class="min-w-0 flex-1 p-4 pl-3">
 		<!-- Header -->
 		<div class="mb-2 flex items-center gap-2">
 			{#if label}