feat(upload): replace Unicode arrow with SVG icon in UploadZone

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

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

@@ -81,8 +81,21 @@ function handleDrop(e: DragEvent) {
 			ondragleave={() => (isDragging = false)}
 			ondrop={handleDrop}
 		>
-			<div class="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white/40">
-				↑
+			<div
+				class="upload-zone-icon flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white/40"
+			>
+				<svg
+					width="16"
+					height="16"
+					viewBox="0 0 32 32"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<polygon
+						fill="currentColor"
+						points="6 12.5 16 2 26 12.5 24.5714286 14 16.999 6.049 17 30 15 30 14.999 6.051 7.42857143 14"
+					/>
+				</svg>
 			</div>
 			<p class="max-w-[200px] truncate text-xs font-medium text-white/50">{filename}</p>
 			<p class="text-xs text-white/30">Noch keine Datei hochgeladen</p>

frontend/src/lib/components/document/UploadZone.svelte.spec.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import UploadZone from './UploadZone.svelte';
+
+afterEach(cleanup);
+
+describe('UploadZone', () => {
+	it('renders an SVG arrow icon (not a Unicode character) in idle state', async () => {
+		const { container } = render(UploadZone, {
+			filename: 'test.pdf',
+			isUploading: false,
+			error: null
+		});
+		// The icon must be an SVG element, not the raw "↑" text
+		const svg = container.querySelector('.upload-zone-icon svg');
+		expect(svg).not.toBeNull();
+		expect(container.textContent).not.toContain('↑');
+	});
+
+	it('shows the filename in idle state', async () => {
+		render(UploadZone, { filename: 'my-document.pdf', isUploading: false, error: null });
+		await expect.element(page.getByText('my-document.pdf')).toBeInTheDocument();
+	});
+});