fix(ui): use De Gruyter long arrows for swap button and timeline entries

Swap button: stack right/left arrows vertically at h-3.5 for a
compact look. Timeline: replace → ← text with Long-Arrow icons on
each letter entry and the distribution bar summary.

Refs: #179

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

frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte

@@ -91,22 +91,20 @@ function handleSuggestionSelect(id: string) {
 		class:pointer-events-none={!swapVisible}
 		tabindex={swapVisible ? 0 : -1}
 	>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="14"
-			height="14"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			aria-hidden="true"
-			class="rotate-90"
-		>
-			<path d="M7 16V4m0 0L3 8m4-4l4 4" />
-			<path d="M17 8v12m0 0l4-4m-4 4l-4-4" />
-		</svg>
+		<div class="-my-1 flex flex-col items-center">
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-3.5 w-3.5 opacity-60"
+			/>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-3.5 w-3.5 opacity-60"
+			/>
+		</div>
 	</button>
 
 	<!-- Korrespondent field -->