feat: add create document feature via web interface

- Backend: new POST /api/documents endpoint with DocumentService.createDocument()
  reusing DocumentUpdateDTO; handles file upload, tags, sender, receivers
- Frontend: new /documents/new route with same four-section form as edit page
  (Wer & Wann, Beschreibung, Transkription, Datei) but with empty fields
- Home page: subtle '+ Neues Dokument' link above the document list

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

backend/src/main/java/org/raddatz/familienarchiv/controller/DocumentController.java

@@ -22,6 +22,7 @@ import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
@@ -78,6 +79,18 @@ public class DocumentController {
                 .orElseThrow(() -> DomainException.notFound(ErrorCode.DOCUMENT_NOT_FOUND, "Document not found: " + id));
     }
 
+    @PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
+    @RequirePermission(Permission.WRITE_ALL)
+    public Document createDocument(
+            @ModelAttribute DocumentUpdateDTO dto,
+            @RequestPart(value = "file", required = false) MultipartFile file) {
+        try {
+            return documentService.createDocument(dto, file);
+        } catch (IOException e) {
+            throw DomainException.internal(ErrorCode.FILE_UPLOAD_FAILED, "Failed to upload file: " + e.getMessage());
+        }
+    }
+
     @PutMapping(value = "/{id}", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
     @RequirePermission(Permission.WRITE_ALL)
     public Document updateDocument(

backend/src/main/java/org/raddatz/familienarchiv/service/DocumentService.java

@@ -77,6 +77,57 @@ public class DocumentService {
         return documentRepository.save(document);
     }
 
+    @Transactional
+    public Document createDocument(DocumentUpdateDTO dto, MultipartFile file) throws IOException {
+        String filename = (file != null && !file.isEmpty())
+                ? file.getOriginalFilename()
+                : (dto.getTitle() != null ? dto.getTitle() : "Unbenanntes Dokument");
+
+        Document doc = Document.builder()
+                .originalFilename(filename)
+                .title(dto.getTitle())
+                .documentDate(dto.getDocumentDate())
+                .location(dto.getLocation())
+                .documentLocation(dto.getDocumentLocation())
+                .transcription(dto.getTranscription())
+                .summary(dto.getSummary())
+                .status(DocumentStatus.PLACEHOLDER)
+                .build();
+
+        doc = documentRepository.save(doc);
+
+        // Tags
+        List<String> tags = new ArrayList<>();
+        if (dto.getTags() != null && !dto.getTags().isBlank()) {
+            tags = Arrays.stream(dto.getTags().split(","))
+                    .map(String::trim)
+                    .filter(s -> !s.isEmpty())
+                    .toList();
+        }
+        updateDocumentTags(doc.getId(), tags);
+        doc = documentRepository.findById(doc.getId()).orElseThrow();
+
+        // Sender
+        if (dto.getSenderId() != null) {
+            doc.setSender(personRepository.findById(dto.getSenderId()).orElse(null));
+        }
+
+        // Empfänger
+        if (dto.getReceiverIds() != null && !dto.getReceiverIds().isEmpty()) {
+            doc.setReceivers(new HashSet<>(personRepository.findAllById(dto.getReceiverIds())));
+        }
+
+        // Datei
+        if (file != null && !file.isEmpty()) {
+            String s3Key = fileService.uploadFile(file, file.getOriginalFilename());
+            doc.setFilePath(s3Key);
+            doc.setContentType(file.getContentType());
+            doc.setStatus(DocumentStatus.UPLOADED);
+        }
+
+        return documentRepository.save(doc);
+    }
+
     @Transactional
     public Document updateDocument(UUID id, DocumentUpdateDTO dto, MultipartFile newFile) throws IOException {
         Document doc = documentRepository.findById(id)

frontend/src/lib/generated/api.ts

@@ -100,6 +100,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/documents": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["createDocument"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/admin/trigger-import": {
         parameters: {
             query?: never;
@@ -635,6 +651,30 @@ export interface operations {
             };
         };
     };
+    createDocument: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": components["schemas"]["DocumentUpdateDTO"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["Document"];
+                };
+            };
+        };
+    };
     triggerMassImport: {
         parameters: {
             query?: never;

frontend/src/routes/+page.svelte

@@ -1,89 +1,86 @@
 <script lang="ts">
-    import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
-    import { goto } from '$app/navigation';
-	import TagInput from '$lib/components/TagInput.svelte';
-	import { slide } from 'svelte/transition';
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import { goto } from '$app/navigation';
+import TagInput from '$lib/components/TagInput.svelte';
+import { slide } from 'svelte/transition';
 
-    export let data;
+export let data;
 
-    // Local state variables
-    let q = data.filters?.q || '';
-    let from = data.filters?.from || '';
-    let to = data.filters?.to || '';
-    let senderId = data.filters?.senderId || '';
-    let receiverId = data.filters?.receiverId || '';
-    let tagNames = data.filters?.tags || [];
+// Local state variables
+let q = data.filters?.q || '';
+let from = data.filters?.from || '';
+let to = data.filters?.to || '';
+let senderId = data.filters?.senderId || '';
+let receiverId = data.filters?.receiverId || '';
+let tagNames = data.filters?.tags || [];
 
-    // Debounce Timer
-    let searchTimer: any;
+// Debounce Timer
+let searchTimer: any;
 
-    let showAdvanced = false;
-    
+let showAdvanced = false;
 
-    function triggerSearch() {
-        const params = new URLSearchParams();
+function triggerSearch() {
+	const params = new URLSearchParams();
 
-        if (q) params.set('q', q);
-        if (from) params.set('from', from);
-        if (to) params.set('to', to);
-        if (senderId) params.set('senderId', senderId);
-        if (receiverId) params.set('receiverId', receiverId);
-        if(tagNames) tagNames.forEach(tag => params.append('tag', tag));
+	if (q) params.set('q', q);
+	if (from) params.set('from', from);
+	if (to) params.set('to', to);
+	if (senderId) params.set('senderId', senderId);
+	if (receiverId) params.set('receiverId', receiverId);
+	if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
 
-        goto(`/?${params.toString()}`, { 
-            keepFocus: true, 
-            noScroll: true 
-        });
-    }
+	goto(`/?${params.toString()}`, {
+		keepFocus: true,
+		noScroll: true
+	});
+}
 
+function handleTextSearch() {
+	clearTimeout(searchTimer);
+	searchTimer = setTimeout(() => {
+		triggerSearch();
+	}, 500);
+}
 
-    function handleTextSearch() {
-        clearTimeout(searchTimer);
-        searchTimer = setTimeout(() => {
-            triggerSearch();
-        }, 500);
-    }
+let previousTags = tagNames.join(',');
+$: {
+	const currentTags = tagNames.join(',');
+	if (currentTags !== previousTags) {
+		previousTags = currentTags;
+		triggerSearch();
+	}
+}
 
-    let previousTags = tagNames.join(',');
-    $: {
-        const currentTags = tagNames.join(',');
-        if (currentTags !== previousTags) {
-            previousTags = currentTags;
-            triggerSearch();
-        }
-    }
+function toggleAdvanced() {
+	showAdvanced = !showAdvanced;
+}
 
-
-    function toggleAdvanced() {
-        showAdvanced = !showAdvanced;
-    }
-
-    // Sync with server data (e.g. after reset)
-    $: {
-        q = data.filters?.q || '';
-        from = data.filters?.from || '';
-        to = data.filters?.to || '';
-        senderId = data.filters?.senderId || '';
-        receiverId = data.filters?.receiverId || '';
-    }
+// Sync with server data (e.g. after reset)
+$: {
+	q = data.filters?.q || '';
+	from = data.filters?.from || '';
+	to = data.filters?.to || '';
+	senderId = data.filters?.senderId || '';
+	receiverId = data.filters?.receiverId || '';
+}
 </script>
 
 <!-- Outer Container: Matches the 'Sand' background of the layout -->
-<main class="max-w-7xl mx-auto py-8 sm:px-6 lg:px-8 font-sans">
+<main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
 	<!-- SEARCH & FILTER CARD -->
-	<div class="bg-white p-6 shadow-sm border border-brand-sand mb-8 rounded-sm">
+	<div class="mb-8 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
 		<!-- ROW 1: Main Search (One Line) -->
-		<div class="flex gap-4 items-center">
+		<div class="flex items-center gap-4">
 			<!-- Full Text Search -->
-			<div class="flex-1 relative">
+			<div class="relative flex-1">
 				<input
 					type="text"
 					bind:value={q}
 					on:input={handleTextSearch}
 					placeholder="Suche in Titel, Inhalt, Ort..."
-					class="block w-full border-gray-300 shadow-sm focus:border-brand-navy focus:ring-brand-navy placeholder-gray-400 py-2.5 pl-3 pr-10"
+					class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
 				/>
-				<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 					<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 						><path
 							stroke-linecap="round"
@@ -98,10 +95,10 @@
 			<!-- Toggle Advanced Button -->
 			<button
 				on:click={toggleAdvanced}
-				class="flex items-center gap-2 px-4 py-2.5 border border-gray-300 bg-gray-50 text-gray-600 text-sm font-bold uppercase tracking-wide hover:bg-gray-100 hover:text-brand-navy transition"
+				class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
 			>
 				<svg
-					class="w-4 h-4 transform transition-transform duration-200 {showAdvanced
+					class="h-4 w-4 transform transition-transform duration-200 {showAdvanced
 						? 'rotate-180'
 						: ''}"
 					fill="none"
@@ -121,10 +118,10 @@
 			<!-- Reset Button -->
 			<a
 				href="/"
-				class="flex items-center justify-center px-3 py-2.5 border border-transparent text-gray-400 hover:text-red-500 transition"
+				class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
 				title="Filter zurücksetzen"
 			>
-				<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 					><path
 						stroke-linecap="round"
 						stroke-linejoin="round"
@@ -139,18 +136,20 @@
 		{#if showAdvanced}
 			<div
 				transition:slide
-				class="mt-6 pt-6 border-t border-gray-100 grid grid-cols-1 md:grid-cols-12 gap-6"
+				class="mt-6 grid grid-cols-1 gap-6 border-t border-gray-100 pt-6 md:grid-cols-12"
 			>
 				<!-- Tag Filter -->
 				<div class="md:col-span-12">
-					<p class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2">Schlagworte</p>
+					<p class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase">
+						Schlagworte
+					</p>
 					<TagInput bind:tags={tagNames} allowCreation={false} on:change={triggerSearch} />
 				</div>
 
 				<!-- Sender -->
 				<div class="md:col-span-3">
 					<div
-						class="[&_label]:text-xs [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:mb-2 [&_input]:py-2.5 [&_input]:border-gray-300"
+						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
 					>
 						<PersonTypeahead
 							name="senderId"
@@ -165,7 +164,7 @@
 				<!-- Receiver -->
 				<div class="md:col-span-3">
 					<div
-						class="[&_label]:text-xs [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:mb-2 [&_input]:py-2.5 [&_input]:border-gray-300"
+						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
 					>
 						<PersonTypeahead
 							name="receiverId"
@@ -178,11 +177,11 @@
 				</div>
 
 				<!-- Dates -->
-				<div class="md:col-span-6 grid grid-cols-2 gap-4">
+				<div class="grid grid-cols-2 gap-4 md:col-span-6">
 					<div>
 						<label
 							for="from"
-							class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2"
+							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
 							>Von</label
 						>
 						<input
@@ -190,13 +189,13 @@
 							id="from"
 							bind:value={from}
 							on:change={triggerSearch}
-							class="block w-full border-gray-300 shadow-sm text-sm py-2.5"
+							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 					<div>
 						<label
 							for="to"
-							class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2"
+							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
 							>Bis</label
 						>
 						<input
@@ -204,7 +203,7 @@
 							id="to"
 							bind:value={to}
 							on:change={triggerSearch}
-							class="block w-full border-gray-300 shadow-sm text-sm py-2.5"
+							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 				</div>
@@ -212,42 +211,55 @@
 		{/if}
 	</div>
 
+	<!-- DOCUMENT LIST HEADER -->
+	<div class="mb-2 flex justify-end">
+		<a
+			href="/documents/new"
+			class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+		>
+			<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+			Neues Dokument
+		</a>
+	</div>
+
 	<!-- DOCUMENT LIST -->
-	<div class="bg-white shadow-sm border border-brand-sand">
+	<div class="border border-brand-sand bg-white shadow-sm">
 		{#if data.error}
-			<div class="p-8 text-center text-red-600 bg-red-50">
+			<div class="bg-red-50 p-8 text-center text-red-600">
 				{data.error}
 			</div>
 		{:else if data.documents && data.documents.length > 0}
 			<ul class="divide-y divide-gray-100">
 				{#each data.documents as doc}
-					<li class="group hover:bg-brand-sand/10 transition-colors duration-200">
+					<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
 						<!-- LINK TO DETAIL PAGE -->
 						<a href="/documents/{doc.id}" class="block p-6">
-							<div class="flex flex-col sm:flex-row gap-6">
+							<div class="flex flex-col gap-6 sm:flex-row">
 								<!-- Main Info -->
 								<div class="flex-1">
-									<div class="flex items-baseline justify-between mb-2">
+									<div class="mb-2 flex items-baseline justify-between">
 										<!-- Title: Serif & Brand Navy -->
 										<h3
-											class="text-xl font-serif font-medium text-brand-navy group-hover:underline decoration-brand-mint decoration-2 underline-offset-4"
+											class="font-serif text-xl font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
 										>
 											{doc.title || doc.originalFilename}
 										</h3>
 
 										<!-- Status Badge -->
 										<span
-											class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border
+											class="ml-3 inline-flex items-center rounded-full border px-2.5 py-0.5 text-[10px] font-bold tracking-wide uppercase
                                             {doc.status === 'UPLOADED'
-												? 'bg-brand-mint/20 text-brand-navy border-brand-mint/50'
-												: 'bg-yellow-50 text-yellow-700 border-yellow-200'}"
+												? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
+												: 'border-yellow-200 bg-yellow-50 text-yellow-700'}"
 										>
 											{doc.status}
 										</span>
 									</div>
 
 									<!-- Metadata Row -->
-									<div class="flex flex-wrap gap-6 text-sm text-gray-500 mb-4 font-sans">
+									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
 										<div class="flex items-center">
 											<svg
 												class="mr-1.5 h-4 w-4 text-brand-mint"
@@ -288,10 +300,10 @@
 									</div>
 
 									<!-- Sender/Receiver Info -->
-									<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm font-serif">
+									<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
 										<div class="flex items-baseline">
 											<span
-												class="w-10 text-xs font-sans font-bold text-gray-400 uppercase tracking-wide"
+												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
 												>Von</span
 											>
 											{#if doc.sender}
@@ -304,7 +316,7 @@
 										</div>
 										<div class="flex items-baseline">
 											<span
-												class="w-10 text-xs font-sans font-bold text-gray-400 uppercase tracking-wide"
+												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
 												>An</span
 											>
 											{#if doc.receivers && doc.receivers.length > 0}
@@ -319,11 +331,11 @@
 
 									<!-- NEW: Tags Display -->
 									{#if doc.tags && doc.tags.length > 0}
-										<div class="flex flex-wrap gap-2 mt-4 pt-3">
+										<div class="mt-4 flex flex-wrap gap-2 pt-3">
 											{#each doc.tags as tag}
 												<button
 													type="button"
-													class="inline-flex items-center px-2 py-1 rounded text-[10px] font-bold uppercase tracking-widest bg-brand-sand/30 text-brand-navy hover:bg-brand-navy hover:text-white transition-colors relative z-10"
+													class="relative z-10 inline-flex items-center rounded bg-brand-sand/30 px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
 													on:click|preventDefault|stopPropagation={() =>
 														goto(`/?tag=${encodeURIComponent(tag.name)}`)}
 												>
@@ -336,7 +348,7 @@
 
 								<!-- Arrow Icon -->
 								<div
-									class="hidden sm:flex items-center text-gray-300 group-hover:text-brand-mint transition-colors"
+									class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
 								>
 									<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 										<path
@@ -356,9 +368,9 @@
 			<!-- Empty State -->
 			<div class="p-16 text-center">
 				<div
-					class="mx-auto w-12 h-12 bg-brand-sand/30 rounded-full flex items-center justify-center mb-4"
+					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
 				>
-					<svg class="w-6 h-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+					<svg class="h-6 w-6 text-brand-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 						><path
 							stroke-linecap="round"
 							stroke-linejoin="round"
@@ -367,13 +379,13 @@
 						/></svg
 					>
 				</div>
-				<h3 class="text-lg font-serif font-medium text-brand-navy">Keine Dokumente gefunden</h3>
-				<p class="text-gray-500 mt-1 font-sans text-sm">
+				<h3 class="font-serif text-lg font-medium text-brand-navy">Keine Dokumente gefunden</h3>
+				<p class="mt-1 font-sans text-sm text-gray-500">
 					Versuchen Sie, die Filter anzupassen oder den Suchbegriff zu ändern.
 				</p>
 				<button
 					on:click={() => goto('/')}
-					class="mt-6 text-brand-mint font-bold text-sm uppercase tracking-wide hover:text-brand-navy transition"
+					class="mt-6 text-sm font-bold tracking-wide text-brand-mint uppercase transition hover:text-brand-navy"
 				>
 					Alle Filter löschen
 				</button>

frontend/src/routes/documents/new/+page.server.ts

@@ -0,0 +1,35 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+import { createApiClient } from '$lib/api.server';
+import { parseBackendError, getErrorMessage } from '$lib/errors';
+
+export async function load({ fetch }) {
+	const api = createApiClient(fetch);
+	const personsResult = await api.GET('/api/persons');
+
+	if (!personsResult.response.ok) {
+		return { persons: [] };
+	}
+
+	return { persons: personsResult.data };
+}
+
+export const actions = {
+	default: async ({ request, fetch }) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+		const formData = await request.formData();
+
+		const res = await fetch(`${baseUrl}/api/documents`, {
+			method: 'POST',
+			body: formData
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return fail(res.status, { error: getErrorMessage(backendError?.code) });
+		}
+
+		const created = await res.json();
+		throw redirect(303, `/documents/${created.id}`);
+	}
+};

frontend/src/routes/documents/new/+page.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import TagInput from '$lib/components/TagInput.svelte';
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
+
+export let form;
+
+let tags: string[] = [];
+let senderId = '';
+let selectedReceivers: { id: string; firstName: string; lastName: string }[] = [];
+
+let dateDisplay = '';
+let dateIso = '';
+let dateDirty = false;
+
+function germanToIso(german: string): string {
+	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+	if (!match) return '';
+	const [, d, m, y] = match;
+	return `${y}-${m}-${d}`;
+}
+
+function handleDateInput(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const digits = input.value.replace(/\D/g, '').slice(0, 8);
+	let formatted: string;
+	if (digits.length <= 2) {
+		formatted = digits;
+	} else if (digits.length <= 4) {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
+	} else {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+	input.value = formatted;
+	dateDisplay = formatted;
+	dateIso = germanToIso(formatted);
+	dateDirty = true;
+}
+
+$: dateInvalid = dateDirty && dateDisplay.length > 0 && dateIso === '';
+</script>
+
+<div class="mx-auto max-w-4xl px-4 py-8">
+	<!-- Heading -->
+	<div class="mb-6">
+		<a
+			href="/"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		>
+			<svg
+				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 19l-7-7m0 0l7-7m-7 7h18"
+				/>
+			</svg>
+			Zurück zur Übersicht
+		</a>
+		<h1 class="font-serif text-3xl text-brand-navy">Neues Dokument</h1>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
+	{/if}
+
+	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
+		<!-- ── Section 1: Wer & Wann ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Wer &amp; Wann</h2>
+
+			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+				<!-- Datum -->
+				<div>
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
+						>Datum</label
+					>
+					<input
+						id="documentDate"
+						type="text"
+						inputmode="numeric"
+						value={dateDisplay}
+						on:input={handleDateInput}
+						placeholder="TT.MM.JJJJ"
+						maxlength="10"
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
+                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
+						aria-describedby={dateInvalid ? 'date-error' : undefined}
+					/>
+					<input type="hidden" name="documentDate" value={dateIso} />
+					{#if dateInvalid}
+						<p id="date-error" class="mt-1 text-xs text-red-600">
+							Bitte im Format TT.MM.JJJJ eingeben, z.B. 20.12.2026
+						</p>
+					{/if}
+				</div>
+
+				<!-- Ort -->
+				<div>
+					<label for="location" class="mb-1 block text-sm font-medium text-gray-700">Ort</label>
+					<input
+						id="location"
+						type="text"
+						name="location"
+						placeholder="z.B. Berlin, Wien…"
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					/>
+				</div>
+
+				<!-- Absender -->
+				<div>
+					<PersonTypeahead name="senderId" label="Absender" bind:value={senderId} />
+				</div>
+
+				<!-- Empfänger -->
+				<div>
+					<p class="mb-1 block text-sm font-medium text-gray-700">Empfänger</p>
+					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
+				</div>
+			</div>
+		</div>
+
+		<!-- ── Section 2: Beschreibung ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Beschreibung</h2>
+
+			<div class="space-y-5">
+				<!-- Titel -->
+				<div>
+					<label for="title" class="mb-1 block text-sm font-medium text-gray-700">Titel *</label>
+					<input
+						id="title"
+						type="text"
+						name="title"
+						required
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					/>
+				</div>
+
+				<!-- Aufbewahrungsort -->
+				<div>
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+						>Aufbewahrungsort</label
+					>
+					<input
+						id="documentLocation"
+						type="text"
+						name="documentLocation"
+						placeholder="z.B. Schrank 3, Mappe B"
+						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					/>
+					<p class="mt-1 text-xs text-gray-400">Wo befindet sich das Originaldokument?</p>
+				</div>
+
+				<!-- Schlagworte -->
+				<div>
+					<p class="mb-1 block text-sm font-medium text-gray-700">Schlagworte</p>
+					<TagInput bind:tags={tags} />
+					<input type="hidden" name="tags" value={tags.join(',')} />
+				</div>
+
+				<!-- Inhalt -->
+				<div>
+					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700">Inhalt</label>
+					<textarea
+						id="summary"
+						name="summary"
+						rows="5"
+						placeholder="Kurze Beschreibung des Inhalts…"
+						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					></textarea>
+				</div>
+			</div>
+		</div>
+
+		<!-- ── Section 3: Transkription ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Transkription</h2>
+			<textarea
+				id="transcription"
+				name="transcription"
+				rows="12"
+				placeholder="Vollständiger Text des Dokuments…"
+				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+			></textarea>
+		</div>
+
+		<!-- ── Section 4: Datei ── -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">Datei</h2>
+
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+				Datei hochladen <span class="font-normal text-gray-400">(optional)</span>
+			</label>
+			<input
+				id="file-upload"
+				type="file"
+				name="file"
+				class="block w-full cursor-pointer text-sm
+                       text-gray-500 file:mr-4 file:rounded
+                       file:border-0 file:bg-brand-sand/40
+                       file:px-4 file:py-2
+                       file:text-sm file:font-semibold
+                       file:text-brand-navy hover:file:bg-brand-sand/60"
+			/>
+		</div>
+
+		<!-- ── Sticky Save Bar ── -->
+		<div
+			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+		>
+			<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
+				Abbrechen
+			</a>
+			<button
+				type="submit"
+				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
+			>
+				Speichern
+			</button>
+		</div>
+	</form>
+</div>