fix(e2e): fix admin tag test (use existing tag) and annotation locator

- Admin tag test: "Familie" never existed in the database; use "Fest"
  which is a real seeded tag, with a matching rename-back to restore state
- Annotation hash test: the broad `[data-testid^="annotation-"]` locator
  also matched `annotation-side-panel` (always in DOM, even when
  off-screen); extend the :not() exclusion list to cover it

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

backend/src/main/java/org/raddatz/familienarchiv/config/DataInitializer.java

@@ -84,6 +84,14 @@ public class DataInitializer {
             TagRepository tagRepo,
             PasswordEncoder passwordEncoder) {
         return args -> {
+            // Always reset the admin password to the configured value so a failed password-reset
+            // test from a previous run can never leave the account locked out.
+            userRepository.findByUsername(adminUsername).ifPresent(admin -> {
+                admin.setPassword(passwordEncoder.encode(adminPassword));
+                userRepository.save(admin);
+                log.info("E2E seed: Admin-Passwort auf konfigurierten Wert zurückgesetzt.");
+            });
+
             // Always ensure the read-only test user exists, even when seed data was already loaded.
             if (userRepository.findByUsername("reader").isEmpty()) {
                 log.info("E2E seed: Erstelle 'reader'-Testbenutzer...");

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

@@ -41,4 +41,10 @@ public class AdminController {
                 documentService.getDocumentsWithoutVersions());
         return ResponseEntity.ok(new BackfillResult(count));
     }
+
+    @PostMapping("/backfill-file-hashes")
+    public ResponseEntity<BackfillResult> backfillFileHashes() {
+        int count = documentService.backfillFileHashes();
+        return ResponseEntity.ok(new BackfillResult(count));
+    }
 }

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

@@ -4,10 +4,12 @@ import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.raddatz.familienarchiv.dto.CreateAnnotationDTO;
 import org.raddatz.familienarchiv.model.AppUser;
+import org.raddatz.familienarchiv.model.Document;
 import org.raddatz.familienarchiv.model.DocumentAnnotation;
 import org.raddatz.familienarchiv.security.Permission;
 import org.raddatz.familienarchiv.security.RequirePermission;
 import org.raddatz.familienarchiv.service.AnnotationService;
+import org.raddatz.familienarchiv.service.DocumentService;
 import org.raddatz.familienarchiv.service.UserService;
 import org.springframework.http.HttpStatus;
 import org.springframework.security.core.Authentication;
@@ -23,6 +25,7 @@ import java.util.UUID;
 public class AnnotationController {
 
     private final AnnotationService annotationService;
+    private final DocumentService documentService;
     private final UserService userService;
 
     @GetMapping
@@ -38,7 +41,8 @@ public class AnnotationController {
             @RequestBody CreateAnnotationDTO dto,
             Authentication authentication) {
         UUID userId = resolveUserId(authentication);
-        return annotationService.createAnnotation(documentId, dto, userId);
+        Document doc = documentService.getDocumentById(documentId);
+        return annotationService.createAnnotation(documentId, dto, userId, doc.getFileHash());
     }
 
     @DeleteMapping("/{annotationId}")

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

@@ -2,7 +2,11 @@ package org.raddatz.familienarchiv.controller;
 
 import java.io.IOException;
 import java.time.LocalDate;
+import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+import java.util.Set;
 import java.util.UUID;
 
 
@@ -23,6 +27,7 @@ import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.core.io.InputStreamResource;
+import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PathVariable;
@@ -103,6 +108,73 @@ public class DocumentController {
         }
     }
 
+    // --- DELETE ---
+
+    @DeleteMapping("/{id}")
+    @RequirePermission(Permission.WRITE_ALL)
+    public ResponseEntity<Void> deleteDocument(@PathVariable UUID id) {
+        documentService.deleteDocument(id);
+        return ResponseEntity.noContent().build();
+    }
+
+    // --- QUICK UPLOAD ---
+
+    private static final Set<String> ALLOWED_CONTENT_TYPES = Set.of(
+            "application/pdf", "image/jpeg", "image/png", "image/tiff");
+
+    public record UploadError(String filename, String code) {}
+    public record QuickUploadResult(List<Document> created, List<Document> updated, List<UploadError> errors) {}
+
+    @PostMapping(value = "/quick-upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
+    @RequirePermission(Permission.WRITE_ALL)
+    public QuickUploadResult quickUpload(
+            @RequestPart(value = "files", required = false) List<MultipartFile> files) {
+        List<Document> created = new ArrayList<>();
+        List<Document> updated = new ArrayList<>();
+        List<UploadError> errors = new ArrayList<>();
+
+        if (files == null || files.isEmpty()) {
+            return new QuickUploadResult(created, updated, errors);
+        }
+
+        for (MultipartFile file : files) {
+            if (!ALLOWED_CONTENT_TYPES.contains(file.getContentType())) {
+                errors.add(new UploadError(file.getOriginalFilename(), "UNSUPPORTED_FILE_TYPE"));
+                continue;
+            }
+            try {
+                DocumentService.StoreResult result = documentService.storeDocument(file);
+                if (result.isNew()) {
+                    created.add(result.document());
+                } else {
+                    updated.add(result.document());
+                }
+            } catch (Exception e) {
+                errors.add(new UploadError(file.getOriginalFilename(), "FILE_UPLOAD_FAILED"));
+                log.warn("Quick upload failed for file {}: {}", file.getOriginalFilename(), e.getMessage());
+            }
+        }
+
+        return new QuickUploadResult(created, updated, errors);
+    }
+
+    @GetMapping("/incomplete-count")
+    public Map<String, Long> getIncompleteCount() {
+        return Map.of("count", documentService.getIncompleteCount());
+    }
+
+    @GetMapping("/incomplete")
+    public List<Document> getIncomplete() {
+        return documentService.findIncompleteDocuments();
+    }
+
+    @GetMapping("/incomplete/next")
+    public ResponseEntity<Document> getNextIncomplete(@RequestParam UUID excludeId) {
+        return documentService.findNextIncompleteDocument(excludeId)
+                .map(ResponseEntity::ok)
+                .orElse(ResponseEntity.noContent().build());
+    }
+
     @GetMapping("/search")
     public ResponseEntity<List<Document>> search(
             @RequestParam(required = false) String q,

backend/src/main/java/org/raddatz/familienarchiv/dto/DocumentUpdateDTO.java

@@ -17,4 +17,5 @@ public class DocumentUpdateDTO {
     private UUID senderId;
     private List<UUID> receiverIds;
     private String tags;
+    private Boolean metadataComplete;
 }

backend/src/main/java/org/raddatz/familienarchiv/exception/ErrorCode.java

@@ -17,6 +17,8 @@ public enum ErrorCode {
     FILE_NOT_FOUND,
     /** An error occurred while uploading a file to object storage. 500 */
     FILE_UPLOAD_FAILED,
+    /** The uploaded file's content type is not supported (PDF/JPEG/PNG/TIFF only). 400 */
+    UNSUPPORTED_FILE_TYPE,
 
     // --- Users ---
     /** A user with the given ID or username does not exist. 404 */

backend/src/main/java/org/raddatz/familienarchiv/model/Document.java

@@ -39,6 +39,10 @@ public class Document {
     @Column(name = "content_type")
     private String contentType;
 
+    // SHA-256 hash of the uploaded file — used to link annotations to a file version
+    @Column(name = "file_hash", length = 64)
+    private String fileHash;
+
     // Originaler Dateiname beim Upload (z.B. "Brief_Oma_1940.pdf")
     @Column(name = "original_filename", nullable = false)
     @Schema(requiredMode = Schema.RequiredMode.REQUIRED)
@@ -82,6 +86,11 @@ public class Document {
     @Schema(requiredMode = Schema.RequiredMode.REQUIRED)
     private LocalDateTime updatedAt;
 
+    @Column(name = "metadata_complete", nullable = false)
+    @Schema(requiredMode = Schema.RequiredMode.REQUIRED)
+    @Builder.Default
+    private boolean metadataComplete = false;
+
     @ManyToMany(fetch = FetchType.EAGER)
     @JoinTable(name = "document_receivers", joinColumns = @JoinColumn(name = "document_id"), inverseJoinColumns = @JoinColumn(name = "person_id"))
     @Builder.Default

backend/src/main/java/org/raddatz/familienarchiv/model/DocumentAnnotation.java

@@ -49,6 +49,9 @@ public class DocumentAnnotation {
     @Schema(requiredMode = Schema.RequiredMode.REQUIRED)
     private String color;
 
+    @Column(name = "file_hash", length = 64)
+    private String fileHash;
+
     @Column(name = "created_by")
     private UUID createdBy;
 

backend/src/main/java/org/raddatz/familienarchiv/repository/AnnotationRepository.java

@@ -14,4 +14,6 @@ public interface AnnotationRepository extends JpaRepository<DocumentAnnotation,
     List<DocumentAnnotation> findByDocumentIdAndPageNumber(UUID documentId, int pageNumber);
 
     Optional<DocumentAnnotation> findByIdAndDocumentId(UUID id, UUID documentId);
+
+    List<DocumentAnnotation> findByDocumentIdAndFileHashIsNull(UUID documentId);
 }

backend/src/main/java/org/raddatz/familienarchiv/repository/DocumentRepository.java

@@ -21,6 +21,9 @@ public interface DocumentRepository extends JpaRepository<Document, UUID>, JpaSp
     // Wichtig für den Abgleich beim Excel-Import & Datei-Upload
     Optional<Document> findByOriginalFilename(String originalFilename);
 
+    // Wie oben, gibt aber nur das erste Ergebnis zurück — sicher wenn doppelte Dateinamen existieren
+    Optional<Document> findFirstByOriginalFilename(String originalFilename);
+
     // Findet alle Dokumente mit einem bestimmten Status
     // z.B. um alle offenen "PLACEHOLDER" zu finden
     List<Document> findByStatus(DocumentStatus status);
@@ -37,6 +40,14 @@ public interface DocumentRepository extends JpaRepository<Document, UUID>, JpaSp
     @Query("SELECT d FROM Document d WHERE d.id NOT IN (SELECT DISTINCT dv.documentId FROM DocumentVersion dv)")
     List<Document> findDocumentsWithoutVersions();
 
+    List<Document> findByFileHashIsNullAndFilePathIsNotNull();
+
+    long countByMetadataCompleteFalse();
+
+    List<Document> findByMetadataCompleteFalse(Sort sort);
+
+    Optional<Document> findFirstByMetadataCompleteFalseAndIdNot(UUID id, Sort sort);
+
     @Query("SELECT DISTINCT d FROM Document d " +
             "JOIN d.receivers r " +
             "WHERE " +

backend/src/main/java/org/raddatz/familienarchiv/repository/PersonRepository.java

@@ -28,6 +28,9 @@ public interface PersonRepository extends JpaRepository<Person, UUID> {
     // Lookup by full alias string, used during ODS mass import
     Optional<Person> findByAliasIgnoreCase(String alias);
 
+    // Exact first+last name match, used for filename-based sender lookup
+    Optional<Person> findByFirstNameIgnoreCaseAndLastNameIgnoreCase(String firstName, String lastName);
+
     // --- Correspondent queries ---
 
     @Query(value = """

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

@@ -23,7 +23,7 @@ public class AnnotationService {
     }
 
     @Transactional
-    public DocumentAnnotation createAnnotation(UUID documentId, CreateAnnotationDTO dto, UUID userId) {
+    public DocumentAnnotation createAnnotation(UUID documentId, CreateAnnotationDTO dto, UUID userId, String fileHash) {
         List<DocumentAnnotation> existing =
                 annotationRepository.findByDocumentIdAndPageNumber(documentId, dto.getPageNumber());
 
@@ -41,6 +41,7 @@ public class AnnotationService {
                 .width(dto.getWidth())
                 .height(dto.getHeight())
                 .color(dto.getColor())
+                .fileHash(fileHash)
                 .createdBy(userId)
                 .build();
 
@@ -61,6 +62,14 @@ public class AnnotationService {
         annotationRepository.delete(annotation);
     }
 
+    @Transactional
+    public void backfillAnnotationFileHashForDocument(UUID documentId, String fileHash) {
+        annotationRepository.findByDocumentIdAndFileHashIsNull(documentId).forEach(a -> {
+            a.setFileHash(fileHash);
+            annotationRepository.save(a);
+        });
+    }
+
     // ─── private helpers ──────────────────────────────────────────────────────
 
     private boolean overlaps(DocumentAnnotation existing, CreateAnnotationDTO dto) {

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

@@ -18,6 +18,8 @@ import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.multipart.MultipartFile;
 
 import java.io.IOException;
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
 import java.time.LocalDate;
 import java.util.ArrayList;
 import java.util.Arrays;
@@ -38,42 +40,55 @@ public class DocumentService {
     private final FileService fileService;
     private final TagService tagService;
     private final DocumentVersionService documentVersionService;
+    private final AnnotationService annotationService;
+
+    public record StoreResult(Document document, boolean isNew) {}
 
     /**
      * Lädt eine Datei hoch.
      * - Prüft, ob ein Eintrag (aus Excel) schon existiert.
-     * - Wenn JA: Aktualisiert Status und verknüpft Datei.
-     * - Wenn NEIN: Erstellt neuen Eintrag (wartet auf Metadaten).
+     * - Wenn JA: Aktualisiert Status und verknüpft Datei — isNew = false.
+     * - Wenn NEIN: Erstellt neuen Eintrag — isNew = true.
      */
     @Transactional
-    public Document storeDocument(MultipartFile file) throws IOException {
+    public StoreResult storeDocument(MultipartFile file) throws IOException {
         String originalFilename = file.getOriginalFilename();
 
-        // 1. Check for existing record
-        Optional<Document> existingDoc = documentRepository.findByOriginalFilename(originalFilename);
+        // 1. Check for existing record (findFirst to survive duplicate filenames in the DB)
+        Optional<Document> existingDoc = documentRepository.findFirstByOriginalFilename(originalFilename);
+        boolean isNew = existingDoc.isEmpty();
         Document document;
 
         if (existingDoc.isPresent()) {
             document = existingDoc.get();
         } else {
+            // New uploads from the drop zone always start as incomplete
+            ParsedFilename parsed = parseFilenameData(originalFilename);
+            Person sender = (parsed != null)
+                    ? personService.findByName(parsed.firstName(), parsed.lastName()).orElse(null)
+                    : null;
             document = Document.builder()
                     .originalFilename(originalFilename)
-                    .title(originalFilename)
+                    .title(parsed != null ? parsed.title() : stripExtension(originalFilename))
+                    .documentDate(parsed != null ? parsed.date() : null)
+                    .sender(sender)
                     .status(DocumentStatus.UPLOADED)
+                    .metadataComplete(false)
                     .build();
         }
 
         // 2. Delegate Storage to FileService
-        String s3Key = fileService.uploadFile(file, originalFilename);
+        FileService.UploadResult upload = fileService.uploadFile(file, originalFilename);
 
         // 3. Update Database
-        document.setFilePath(s3Key);
+        document.setFilePath(upload.s3Key());
+        document.setFileHash(upload.fileHash());
         document.setContentType(file.getContentType());
         if (document.getStatus() == DocumentStatus.PLACEHOLDER) {
             document.setStatus(DocumentStatus.UPLOADED);
         }
 
-        return documentRepository.save(document);
+        return new StoreResult(documentRepository.save(document), isNew);
     }
 
     @Transactional
@@ -82,15 +97,31 @@ public class DocumentService {
                 ? file.getOriginalFilename()
                 : (dto.getTitle() != null ? dto.getTitle() : "Unbenanntes Dokument");
 
+        // If the caller explicitly sets metadataComplete, use it.
+        // Otherwise apply heuristic: complete if at least one key field is present.
+        boolean metadataComplete;
+        if (dto.getMetadataComplete() != null) {
+            metadataComplete = dto.getMetadataComplete();
+        } else {
+            metadataComplete = dto.getDocumentDate() != null
+                    || dto.getSenderId() != null
+                    || (dto.getReceiverIds() != null && !dto.getReceiverIds().isEmpty());
+        }
+
+        String titleToUse = (dto.getTitle() != null && !dto.getTitle().isBlank())
+                ? dto.getTitle()
+                : titleFromFilename(filename);
+
         Document doc = Document.builder()
                 .originalFilename(filename)
-                .title(dto.getTitle())
+                .title(titleToUse)
                 .documentDate(dto.getDocumentDate())
                 .location(dto.getLocation())
                 .documentLocation(dto.getDocumentLocation())
                 .transcription(dto.getTranscription())
                 .summary(dto.getSummary())
                 .status(DocumentStatus.PLACEHOLDER)
+                .metadataComplete(metadataComplete)
                 .build();
 
         doc = documentRepository.save(doc);
@@ -120,8 +151,9 @@ public class DocumentService {
 
         // Datei
         if (file != null && !file.isEmpty()) {
-            String s3Key = fileService.uploadFile(file, file.getOriginalFilename());
-            doc.setFilePath(s3Key);
+            FileService.UploadResult upload = fileService.uploadFile(file, file.getOriginalFilename());
+            doc.setFilePath(upload.s3Key());
+            doc.setFileHash(upload.fileHash());
             doc.setContentType(file.getContentType());
             doc.setStatus(DocumentStatus.UPLOADED);
         }
@@ -168,14 +200,16 @@ public class DocumentService {
             doc.getReceivers().clear(); // Alle entfernen
         }
 
+        // 3b. metadataComplete — only update when explicitly set in the DTO
+        if (dto.getMetadataComplete() != null) {
+            doc.setMetadataComplete(dto.getMetadataComplete());
+        }
+
         // 4. Datei austauschen (nur wenn eine neue ausgewählt wurde)
         if (newFile != null && !newFile.isEmpty()) {
-            // Alte Datei könnte man hier theoretisch löschen (optional)
-
-            // Neue Datei hochladen
-            String s3Key = fileService.uploadFile(newFile, newFile.getOriginalFilename());
-
-            doc.setFilePath(s3Key);
+            FileService.UploadResult upload = fileService.uploadFile(newFile, newFile.getOriginalFilename());
+            doc.setFilePath(upload.s3Key());
+            doc.setFileHash(upload.fileHash());
             doc.setOriginalFilename(newFile.getOriginalFilename());
             doc.setContentType(newFile.getContentType());
             doc.setStatus(DocumentStatus.UPLOADED);
@@ -232,8 +266,8 @@ public class DocumentService {
                 .and(hasReceiver(receiver))
                 .and(hasTags(tags));
 
-        // Immer sortiert nach Datum
-        return documentRepository.findAll(spec, Sort.by(Sort.Direction.ASC, "documentDate"));
+        // Neueste zuerst (nach Erstellungsdatum)
+        return documentRepository.findAll(spec, Sort.by(Sort.Direction.DESC, "createdAt"));
     }
 
     // 2. SPEZIALITÄT: Der Schriftwechsel
@@ -275,6 +309,27 @@ public class DocumentService {
         return documentRepository.findConversation(senderId, receiverId, dateFrom, dateTo, sort);
     }
 
+    public long getIncompleteCount() {
+        return documentRepository.countByMetadataCompleteFalse();
+    }
+
+    public List<Document> findIncompleteDocuments() {
+        return documentRepository.findByMetadataCompleteFalse(Sort.by(Sort.Direction.DESC, "createdAt"));
+    }
+
+    public Optional<Document> findNextIncompleteDocument(UUID currentId) {
+        return documentRepository.findFirstByMetadataCompleteFalseAndIdNot(
+                currentId, Sort.by(Sort.Direction.DESC, "createdAt"));
+    }
+
+    @Transactional
+    public void deleteDocument(UUID id) {
+        if (!documentRepository.existsById(id)) {
+            throw DomainException.notFound(ErrorCode.DOCUMENT_NOT_FOUND, "Document not found: " + id);
+        }
+        documentRepository.deleteById(id);
+    }
+
     @Transactional
     public void deleteTagCascading(UUID tagId) {
         documentRepository.findByTags_Id(tagId).forEach(doc -> {
@@ -283,4 +338,120 @@ public class DocumentService {
         });
         tagService.delete(tagId);
     }
+
+    @Transactional
+    public int backfillFileHashes() {
+        List<Document> docs = documentRepository.findByFileHashIsNullAndFilePathIsNotNull();
+        int count = 0;
+        for (Document doc : docs) {
+            try {
+                byte[] bytes = fileService.downloadFileBytes(doc.getFilePath());
+                String hash = sha256Hex(bytes);
+                doc.setFileHash(hash);
+                documentRepository.save(doc);
+                annotationService.backfillAnnotationFileHashForDocument(doc.getId(), hash);
+                count++;
+            } catch (Exception e) {
+                log.warn("Failed to backfill hash for document {}: {}", doc.getId(), e.getMessage());
+            }
+        }
+        return count;
+    }
+
+    // ─── private helpers ──────────────────────────────────────────────────────
+
+    private static String stripExtension(String filename) {
+        if (filename == null) return null;
+        int dot = filename.lastIndexOf('.');
+        return dot > 0 ? filename.substring(0, dot) : filename;
+    }
+
+    private record ParsedFilename(LocalDate date, String firstName, String lastName) {
+        String title() {
+            String dateDisplay = String.format("%02d.%02d.%d",
+                    date.getDayOfMonth(), date.getMonthValue(), date.getYear());
+            return firstName + " " + lastName + " (" + dateDisplay + ")";
+        }
+    }
+
+    /**
+     * Parses a structured filename into its date and name components.
+     *
+     * Algorithm: split stem on "_", identify the date token (first or last segment),
+     * treat the outermost remaining segment as firstName, rest as lastName parts.
+     * Compound last names (e.g. "de_Gruyter") are supported naturally.
+     * Returns null for unrecognised filenames.
+     *
+     * Examples:
+     *   18881025_de_Gruyter_Walter.pdf  → date=1888-10-25, firstName=Walter, lastName=de Gruyter
+     *   1965-03-12_Mueller_Hans.pdf     → date=1965-03-12, firstName=Hans,   lastName=Mueller
+     *   Mueller_Hans_19650312.pdf       → date=1965-03-12, firstName=Hans,   lastName=Mueller
+     */
+    private static ParsedFilename parseFilenameData(String filename) {
+        if (filename == null) return null;
+        int dot = filename.lastIndexOf('.');
+        if (dot < 0) return null;
+        String stem = filename.substring(0, dot);
+
+        String[] parts = stem.split("_", -1);
+        if (parts.length < 3) return null;
+
+        String dateIso;
+        String[] nameParts;
+
+        String dateFromFirst = tryParseDate(parts[0]);
+        if (dateFromFirst != null) {
+            dateIso = dateFromFirst;
+            nameParts = Arrays.copyOfRange(parts, 1, parts.length);
+        } else {
+            String dateFromLast = tryParseDate(parts[parts.length - 1]);
+            if (dateFromLast == null) return null;
+            dateIso = dateFromLast;
+            nameParts = Arrays.copyOfRange(parts, 0, parts.length - 1);
+        }
+
+        if (nameParts.length < 2) return null;
+        for (String p : nameParts) {
+            if (!p.matches("\\p{L}+")) return null;
+        }
+
+        String firstName = nameParts[nameParts.length - 1];
+        String lastName = String.join(" ", Arrays.copyOfRange(nameParts, 0, nameParts.length - 1));
+        return new ParsedFilename(LocalDate.parse(dateIso), firstName, lastName);
+    }
+
+    // Used by tests and as a public utility; delegates to parseFilenameData.
+    static String titleFromFilename(String filename) {
+        if (filename == null) return null;
+        ParsedFilename parsed = parseFilenameData(filename);
+        return parsed != null ? parsed.title() : stripExtension(filename);
+    }
+
+    private static String tryParseDate(String s) {
+        if (s.matches("\\d{4}-\\d{2}-\\d{2}")) {
+            int m = Integer.parseInt(s.substring(5, 7));
+            int d = Integer.parseInt(s.substring(8, 10));
+            if (m >= 1 && m <= 12 && d >= 1 && d <= 31) return s;
+        } else if (s.matches("\\d{8}")) {
+            int m = Integer.parseInt(s.substring(4, 6));
+            int d = Integer.parseInt(s.substring(6, 8));
+            if (m >= 1 && m <= 12 && d >= 1 && d <= 31)
+                return s.substring(0, 4) + "-" + s.substring(4, 6) + "-" + s.substring(6, 8);
+        }
+        return null;
+    }
+
+    private static String sha256Hex(byte[] bytes) {
+        try {
+            MessageDigest digest = MessageDigest.getInstance("SHA-256");
+            byte[] hash = digest.digest(bytes);
+            StringBuilder sb = new StringBuilder(64);
+            for (byte b : hash) {
+                sb.append(String.format("%02x", b));
+            }
+            return sb.toString();
+        } catch (NoSuchAlgorithmException e) {
+            throw new IllegalStateException("SHA-256 not available", e);
+        }
+    }
 }

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

@@ -13,6 +13,9 @@ import org.springframework.web.multipart.MultipartFile;
 import org.springframework.core.io.InputStreamResource;
 
 import java.io.IOException;
+import java.io.InputStream;
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
 import java.util.UUID;
 
 @Service
@@ -29,10 +32,14 @@ public class FileService {
     }
 
     /**
-     * Uploads a file to S3/MinIO and returns the generated object key.
+     * Uploads a file to S3/MinIO.
+     * Returns an {@link UploadResult} containing the S3 key and the SHA-256
+     * hash of the file content.  The hash is used to link annotations to the
+     * specific file version they were created against.
      */
-    public String uploadFile(MultipartFile file, String originalFilename) throws IOException {
-        // Generate secure unique path: "documents/UUID_filename"
+    public UploadResult uploadFile(MultipartFile file, String originalFilename) throws IOException {
+        byte[] bytes = file.getBytes();
+        String fileHash = sha256Hex(bytes);
         String s3Key = "documents/" + UUID.randomUUID() + "_" + originalFilename;
 
         try {
@@ -42,11 +49,10 @@ public class FileService {
                     .contentType(file.getContentType())
                     .build();
 
-            s3Client.putObject(putObjectRequest,
-                    RequestBody.fromInputStream(file.getInputStream(), file.getSize()));
+            s3Client.putObject(putObjectRequest, RequestBody.fromBytes(bytes));
 
-            log.info("Uploaded file to S3: {}", s3Key);
-            return s3Key;
+            log.info("Uploaded file to S3: {} (hash={})", s3Key, fileHash);
+            return new UploadResult(s3Key, fileHash);
         } catch (S3Exception e) {
             log.error("S3 Upload Error", e);
             throw new IOException("Failed to upload file to storage", e);
@@ -58,32 +64,72 @@ public class FileService {
      * Returns a wrapper containing the stream and content type.
      */
     public S3FileDownload downloadFile(String s3Key) {
-    try {
-        GetObjectRequest getObjectRequest = GetObjectRequest.builder()
-                .bucket(bucketName)
-                .key(s3Key)
-                .build();
+        try {
+            GetObjectRequest getObjectRequest = GetObjectRequest.builder()
+                    .bucket(bucketName)
+                    .key(s3Key)
+                    .build();
 
-        ResponseInputStream<GetObjectResponse> s3Object = s3Client.getObject(getObjectRequest);
+            ResponseInputStream<GetObjectResponse> s3Object = s3Client.getObject(getObjectRequest);
 
-        // Use whatever content type S3 has stored (set at upload time)
-        String contentType = s3Object.response().contentType();
-        if (contentType == null || contentType.isBlank()) {
-            contentType = "application/octet-stream";
+            String contentType = s3Object.response().contentType();
+            if (contentType == null || contentType.isBlank()) {
+                contentType = "application/octet-stream";
+            }
+
+            return new S3FileDownload(new InputStreamResource(s3Object), contentType);
+
+        } catch (NoSuchKeyException e) {
+            throw new StorageFileNotFoundException("File not found in storage: " + s3Key);
+        } catch (S3Exception e) {
+            throw new RuntimeException("Storage Error: " + e.getMessage());
         }
-
-        return new S3FileDownload(new InputStreamResource(s3Object), contentType);
-
-    } catch (NoSuchKeyException e) {
-        throw new StorageFileNotFoundException("File not found in storage: " + s3Key);
-    } catch (S3Exception e) {
-        throw new RuntimeException("Storage Error: " + e.getMessage());
     }
-}
-    // Helper Record to carry the stream and metadata back to the controller
+
+    /**
+     * Downloads a file from S3/MinIO and returns its raw bytes.
+     * Used for hash backfill — callers are responsible for not calling this on large files unnecessarily.
+     */
+    public byte[] downloadFileBytes(String s3Key) throws IOException {
+        try {
+            GetObjectRequest getObjectRequest = GetObjectRequest.builder()
+                    .bucket(bucketName)
+                    .key(s3Key)
+                    .build();
+            try (InputStream in = s3Client.getObject(getObjectRequest)) {
+                return in.readAllBytes();
+            }
+        } catch (NoSuchKeyException e) {
+            throw new StorageFileNotFoundException("File not found in storage: " + s3Key);
+        } catch (S3Exception e) {
+            throw new IOException("Failed to download file from storage: " + e.getMessage(), e);
+        }
+    }
+
+    // ─── private helpers ──────────────────────────────────────────────────────
+
+    private static String sha256Hex(byte[] bytes) {
+        try {
+            MessageDigest digest = MessageDigest.getInstance("SHA-256");
+            byte[] hash = digest.digest(bytes);
+            StringBuilder sb = new StringBuilder(64);
+            for (byte b : hash) {
+                sb.append(String.format("%02x", b));
+            }
+            return sb.toString();
+        } catch (NoSuchAlgorithmException e) {
+            throw new IllegalStateException("SHA-256 not available", e);
+        }
+    }
+
+    // ─── result types ─────────────────────────────────────────────────────────
+
+    /** Carries the S3 object key and the content hash back to the caller. */
+    public record UploadResult(String s3Key, String fileHash) {}
+
+    /** Carries the download stream and content type. */
     public record S3FileDownload(InputStreamResource resource, String contentType) {}
 
-    // Custom Exception
     public static class StorageFileNotFoundException extends RuntimeException {
         public StorageFileNotFoundException(String message) { super(message); }
     }

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

@@ -312,6 +312,9 @@ public class MassImportService {
                 .originalFilename(originalFilename)
                 .build());
 
+        // Heuristic: mark as complete if at least one key field is present in the spreadsheet row
+        boolean metadataComplete = date != null || !senderRaw.isBlank() || !receiversRaw.isBlank();
+
         doc.setTitle(buildTitle(index, date, location));
         doc.setFilePath(s3Key);
         doc.setContentType(contentType);
@@ -325,6 +328,7 @@ public class MassImportService {
         doc.setSender(sender);
         doc.getReceivers().addAll(receivers);
         if (tag != null) doc.getTags().add(tag);
+        doc.setMetadataComplete(metadataComplete);
 
         documentRepository.save(doc);
         log.info("Importiert{}: {}", file.isEmpty() ? " (nur Metadaten)" : "", originalFilename);

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

@@ -1,6 +1,7 @@
 package org.raddatz.familienarchiv.service;
 
 import java.util.List;
+import java.util.Optional;
 import java.util.UUID;
 
 import org.raddatz.familienarchiv.dto.PersonUpdateDTO;
@@ -42,6 +43,10 @@ public class PersonService {
         return personRepository.findAllById(ids);
     }
 
+    public Optional<Person> findByName(String firstName, String lastName) {
+        return personRepository.findByFirstNameIgnoreCaseAndLastNameIgnoreCase(firstName, lastName);
+    }
+
     @Transactional
     public Person findOrCreateByAlias(String rawName) {
         String alias = rawName.trim();

backend/src/main/resources/db/migration/V13__add_file_hash.sql

@@ -0,0 +1,7 @@
+-- Add content-based file hash to documents for annotation versioning
+ALTER TABLE documents
+    ADD COLUMN file_hash VARCHAR(64);
+
+-- Each annotation remembers which file version it was created against
+ALTER TABLE document_annotations
+    ADD COLUMN file_hash VARCHAR(64);

backend/src/main/resources/db/migration/V14__add_cascade_delete_to_document_join_tables.sql

@@ -0,0 +1,12 @@
+-- Add ON DELETE CASCADE to document_tags and document_receivers so that
+-- deleting a document automatically removes its tag and receiver associations.
+
+ALTER TABLE public.document_tags
+    DROP CONSTRAINT fkc99c5qjulwx9gru07yrhicgd2,
+    ADD CONSTRAINT fkc99c5qjulwx9gru07yrhicgd2
+        FOREIGN KEY (document_id) REFERENCES public.documents(id) ON DELETE CASCADE;
+
+ALTER TABLE public.document_receivers
+    DROP CONSTRAINT fks7t60twjgfmpeqcuc3g0fvjpm,
+    ADD CONSTRAINT fks7t60twjgfmpeqcuc3g0fvjpm
+        FOREIGN KEY (document_id) REFERENCES public.documents(id) ON DELETE CASCADE;

backend/src/main/resources/db/migration/V15__add_metadata_complete_to_documents.sql

@@ -0,0 +1,6 @@
+-- Add metadata_complete flag to documents.
+-- Existing rows default to true (already reviewed before this feature existed).
+-- New documents created via Java will receive false from the entity default.
+
+ALTER TABLE documents
+    ADD COLUMN metadata_complete BOOLEAN NOT NULL DEFAULT TRUE;

backend/src/test/java/org/raddatz/familienarchiv/controller/AdminControllerTest.java

@@ -58,4 +58,29 @@ class AdminControllerTest {
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$.count").value(1));
     }
+
+    // ─── POST /api/admin/backfill-file-hashes ──────────────────────────────────
+
+    @Test
+    void backfillFileHashes_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(post("/api/admin/backfill-file-hashes"))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser(roles = "USER")
+    void backfillFileHashes_returns403_whenNotAdmin() throws Exception {
+        mockMvc.perform(post("/api/admin/backfill-file-hashes"))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(authorities = "ADMIN")
+    void backfillFileHashes_returns200_withCount_whenAdmin() throws Exception {
+        when(documentService.backfillFileHashes()).thenReturn(3);
+
+        mockMvc.perform(post("/api/admin/backfill-file-hashes"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.count").value(3));
+    }
 }

backend/src/test/java/org/raddatz/familienarchiv/controller/AnnotationControllerTest.java

@@ -4,10 +4,12 @@ import org.junit.jupiter.api.Test;
 import org.raddatz.familienarchiv.config.SecurityConfig;
 import org.raddatz.familienarchiv.exception.DomainException;
 import org.raddatz.familienarchiv.exception.ErrorCode;
+import org.raddatz.familienarchiv.model.Document;
 import org.raddatz.familienarchiv.model.DocumentAnnotation;
 import org.raddatz.familienarchiv.security.PermissionAspect;
 import org.raddatz.familienarchiv.service.AnnotationService;
 import org.raddatz.familienarchiv.service.CustomUserDetailsService;
+import org.raddatz.familienarchiv.service.DocumentService;
 import org.raddatz.familienarchiv.service.UserService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.autoconfigure.aop.AopAutoConfiguration;
@@ -36,6 +38,7 @@ class AnnotationControllerTest {
     @Autowired MockMvc mockMvc;
 
     @MockitoBean AnnotationService annotationService;
+    @MockitoBean DocumentService documentService;
     @MockitoBean UserService userService;
     @MockitoBean CustomUserDetailsService customUserDetailsService;
 
@@ -85,7 +88,8 @@ class AnnotationControllerTest {
         DocumentAnnotation saved = DocumentAnnotation.builder()
                 .id(UUID.randomUUID()).documentId(docId).pageNumber(1)
                 .x(0.1).y(0.1).width(0.2).height(0.2).color("#ff0000").build();
-        when(annotationService.createAnnotation(any(), any(), any())).thenReturn(saved);
+        when(documentService.getDocumentById(any())).thenReturn(Document.builder().build());
+        when(annotationService.createAnnotation(any(), any(), any(), any())).thenReturn(saved);
 
         mockMvc.perform(post("/api/documents/" + docId + "/annotations")
                         .contentType(MediaType.APPLICATION_JSON)
@@ -97,7 +101,8 @@ class AnnotationControllerTest {
     @Test
     @WithMockUser(authorities = "ANNOTATE_ALL")
     void createAnnotation_returns409_whenOverlap() throws Exception {
-        when(annotationService.createAnnotation(any(), any(), any()))
+        when(documentService.getDocumentById(any())).thenReturn(Document.builder().build());
+        when(annotationService.createAnnotation(any(), any(), any(), any()))
                 .thenThrow(DomainException.conflict(ErrorCode.ANNOTATION_OVERLAP, "Overlap"));
 
         mockMvc.perform(post("/api/documents/" + UUID.randomUUID() + "/annotations")

backend/src/test/java/org/raddatz/familienarchiv/controller/DocumentControllerTest.java

@@ -21,6 +21,7 @@ import org.springframework.test.web.servlet.MockMvc;
 import java.time.LocalDateTime;
 import java.util.Collections;
 import java.util.List;
+import java.util.Optional;
 import java.util.UUID;
 
 import static org.mockito.ArgumentMatchers.any;
@@ -121,6 +122,169 @@ class DocumentControllerTest {
                 .andExpect(status().isOk());
     }
 
+    // ─── DELETE /api/documents/{id} ──────────────────────────────────────────
+
+    @Test
+    void deleteDocument_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(org.springframework.test.web.servlet.request.MockMvcRequestBuilders
+                        .delete("/api/documents/" + UUID.randomUUID()))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void deleteDocument_returns403_whenMissingWritePermission() throws Exception {
+        mockMvc.perform(org.springframework.test.web.servlet.request.MockMvcRequestBuilders
+                        .delete("/api/documents/" + UUID.randomUUID()))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void deleteDocument_returns204_whenHasWritePermission() throws Exception {
+        UUID id = UUID.randomUUID();
+        mockMvc.perform(org.springframework.test.web.servlet.request.MockMvcRequestBuilders
+                        .delete("/api/documents/" + id))
+                .andExpect(status().isNoContent());
+    }
+
+    // ─── POST /api/documents/quick-upload ────────────────────────────────────
+
+    @Test
+    void quickUpload_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(multipart("/api/documents/quick-upload"))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void quickUpload_returns403_whenMissingWritePermission() throws Exception {
+        mockMvc.perform(multipart("/api/documents/quick-upload"))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void quickUpload_returns200_withValidPdfFile() throws Exception {
+        Document doc = Document.builder()
+                .id(UUID.randomUUID()).title("scan001").originalFilename("scan001.pdf").build();
+        when(documentService.storeDocument(any()))
+                .thenReturn(new DocumentService.StoreResult(doc, true));
+
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("files", "scan001.pdf", "application/pdf", new byte[]{1});
+
+        mockMvc.perform(multipart("/api/documents/quick-upload").file(file))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.created[0].title").value("scan001"))
+                .andExpect(jsonPath("$.updated").isEmpty())
+                .andExpect(jsonPath("$.errors").isEmpty());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void quickUpload_placesDocumentInUpdated_whenFilenameAlreadyExists() throws Exception {
+        Document existing = Document.builder()
+                .id(UUID.randomUUID()).title("Alter Brief").originalFilename("scan001.pdf").build();
+        when(documentService.storeDocument(any()))
+                .thenReturn(new DocumentService.StoreResult(existing, false));
+
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("files", "scan001.pdf", "application/pdf", new byte[]{1});
+
+        mockMvc.perform(multipart("/api/documents/quick-upload").file(file))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.created").isEmpty())
+                .andExpect(jsonPath("$.updated[0].title").value("Alter Brief"))
+                .andExpect(jsonPath("$.errors").isEmpty());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void quickUpload_skipsUnsupportedFileType_andReturnsError() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("files", "report.docx",
+                        "application/vnd.openxmlformats-officedocument.wordprocessingml.document", new byte[]{1});
+
+        mockMvc.perform(multipart("/api/documents/quick-upload").file(file))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.created").isEmpty())
+                .andExpect(jsonPath("$.errors[0].filename").value("report.docx"))
+                .andExpect(jsonPath("$.errors[0].code").value("UNSUPPORTED_FILE_TYPE"));
+    }
+
+    // ─── GET /api/documents/incomplete-count ─────────────────────────────────
+
+    @Test
+    void getIncompleteCount_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(get("/api/documents/incomplete-count"))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void getIncompleteCount_returns200_withCount() throws Exception {
+        when(documentService.getIncompleteCount()).thenReturn(3L);
+
+        mockMvc.perform(get("/api/documents/incomplete-count"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.count").value(3));
+    }
+
+    // ─── GET /api/documents/incomplete ───────────────────────────────────────
+
+    @Test
+    void getIncomplete_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(get("/api/documents/incomplete"))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void getIncomplete_returns200_withList() throws Exception {
+        Document doc = Document.builder()
+                .id(UUID.randomUUID()).title("Unvollständig").originalFilename("scan.pdf").build();
+        when(documentService.findIncompleteDocuments()).thenReturn(List.of(doc));
+
+        mockMvc.perform(get("/api/documents/incomplete"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].title").value("Unvollständig"));
+    }
+
+    // ─── GET /api/documents/incomplete/next ──────────────────────────────────
+
+    @Test
+    void getNextIncomplete_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(get("/api/documents/incomplete/next")
+                        .param("excludeId", UUID.randomUUID().toString()))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void getNextIncomplete_returns200_whenNextExists() throws Exception {
+        UUID excludeId = UUID.randomUUID();
+        Document next = Document.builder()
+                .id(UUID.randomUUID()).title("Nächster").originalFilename("next.pdf").build();
+        when(documentService.findNextIncompleteDocument(excludeId)).thenReturn(Optional.of(next));
+
+        mockMvc.perform(get("/api/documents/incomplete/next")
+                        .param("excludeId", excludeId.toString()))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.title").value("Nächster"));
+    }
+
+    @Test
+    @WithMockUser
+    void getNextIncomplete_returns204_whenNoneRemain() throws Exception {
+        UUID excludeId = UUID.randomUUID();
+        when(documentService.findNextIncompleteDocument(excludeId)).thenReturn(Optional.empty());
+
+        mockMvc.perform(get("/api/documents/incomplete/next")
+                        .param("excludeId", excludeId.toString()))
+                .andExpect(status().isNoContent());
+    }
+
     // ─── GET /api/documents/{id}/versions ────────────────────────────────────
 
     @Test

backend/src/test/java/org/raddatz/familienarchiv/service/AnnotationServiceTest.java

@@ -44,7 +44,7 @@ class AnnotationServiceTest {
         when(annotationRepository.findByDocumentIdAndPageNumber(docId, 1))
                 .thenReturn(List.of(existing));
 
-        assertThatThrownBy(() -> annotationService.createAnnotation(docId, dto, userId))
+        assertThatThrownBy(() -> annotationService.createAnnotation(docId, dto, userId, null))
                 .isInstanceOf(DomainException.class)
                 .satisfies(e -> assertThat(((DomainException) e).getStatus()).isEqualTo(CONFLICT));
 
@@ -63,7 +63,7 @@ class AnnotationServiceTest {
                 .x(0.0).y(0.0).width(0.05).height(0.05).color("#ff0000").createdBy(userId).build();
         when(annotationRepository.save(any())).thenReturn(saved);
 
-        DocumentAnnotation result = annotationService.createAnnotation(docId, dto, userId);
+        DocumentAnnotation result = annotationService.createAnnotation(docId, dto, userId, null);
 
         assertThat(result).isEqualTo(saved);
         verify(annotationRepository).save(any());
@@ -117,6 +117,35 @@ class AnnotationServiceTest {
         verify(annotationRepository).delete(annotation);
     }
 
+    @Test
+    void createAnnotation_setsFileHash_whenProvided() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        CreateAnnotationDTO dto = new CreateAnnotationDTO(1, 0.0, 0.0, 0.05, 0.05, "#ff0000");
+        String fileHash = "abc123";
+
+        when(annotationRepository.findByDocumentIdAndPageNumber(docId, 1)).thenReturn(List.of());
+        when(annotationRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        DocumentAnnotation result = annotationService.createAnnotation(docId, dto, userId, fileHash);
+
+        assertThat(result.getFileHash()).isEqualTo(fileHash);
+    }
+
+    @Test
+    void createAnnotation_setsNullFileHash_whenNoneProvided() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        CreateAnnotationDTO dto = new CreateAnnotationDTO(1, 0.0, 0.0, 0.05, 0.05, "#ff0000");
+
+        when(annotationRepository.findByDocumentIdAndPageNumber(docId, 1)).thenReturn(List.of());
+        when(annotationRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        DocumentAnnotation result = annotationService.createAnnotation(docId, dto, userId, null);
+
+        assertThat(result.getFileHash()).isNull();
+    }
+
     // ─── listAnnotations ──────────────────────────────────────────────────────
 
     @Test
@@ -128,4 +157,30 @@ class AnnotationServiceTest {
 
         assertThat(annotationService.listAnnotations(docId)).containsExactly(a);
     }
+
+    // ─── backfillAnnotationFileHashForDocument ────────────────────────────────
+
+    @Test
+    void backfillAnnotationFileHashForDocument_setsHashOnAnnotationsWithNullHash() {
+        UUID docId = UUID.randomUUID();
+        String hash = "abc123";
+        DocumentAnnotation a = DocumentAnnotation.builder()
+                .id(UUID.randomUUID()).documentId(docId).build();
+        when(annotationRepository.findByDocumentIdAndFileHashIsNull(docId)).thenReturn(List.of(a));
+
+        annotationService.backfillAnnotationFileHashForDocument(docId, hash);
+
+        assertThat(a.getFileHash()).isEqualTo(hash);
+        verify(annotationRepository).save(a);
+    }
+
+    @Test
+    void backfillAnnotationFileHashForDocument_doesNothingWhenNoAnnotations() {
+        UUID docId = UUID.randomUUID();
+        when(annotationRepository.findByDocumentIdAndFileHashIsNull(docId)).thenReturn(List.of());
+
+        annotationService.backfillAnnotationFileHashForDocument(docId, "hash");
+
+        verify(annotationRepository, never()).save(any());
+    }
 }

backend/src/test/java/org/raddatz/familienarchiv/service/DocumentServiceTest.java

@@ -2,6 +2,7 @@ package org.raddatz.familienarchiv.service;
 
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.ArgumentCaptor;
 import org.mockito.InjectMocks;
 import org.mockito.Mock;
 import org.mockito.junit.jupiter.MockitoExtension;
@@ -9,9 +10,13 @@ import org.raddatz.familienarchiv.dto.DocumentUpdateDTO;
 import org.raddatz.familienarchiv.exception.DomainException;
 import org.raddatz.familienarchiv.model.Document;
 import org.raddatz.familienarchiv.model.DocumentStatus;
+import org.raddatz.familienarchiv.model.Person;
 import org.raddatz.familienarchiv.model.Tag;
 import org.raddatz.familienarchiv.repository.DocumentRepository;
+import org.springframework.data.domain.Sort;
+import org.springframework.mock.web.MockMultipartFile;
 
+import java.time.LocalDate;
 import java.util.HashSet;
 import java.util.List;
 import java.util.Optional;
@@ -21,6 +26,7 @@ import java.util.UUID;
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.assertj.core.api.Assertions.assertThatThrownBy;
 import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
 import static org.mockito.Mockito.*;
 
 @ExtendWith(MockitoExtension.class)
@@ -31,8 +37,32 @@ class DocumentServiceTest {
     @Mock FileService fileService;
     @Mock TagService tagService;
     @Mock DocumentVersionService documentVersionService;
+    @Mock AnnotationService annotationService;
     @InjectMocks DocumentService documentService;
 
+    // ─── deleteDocument ───────────────────────────────────────────────────────
+
+    @Test
+    void deleteDocument_deletesById_whenExists() {
+        UUID id = UUID.randomUUID();
+        when(documentRepository.existsById(id)).thenReturn(true);
+
+        documentService.deleteDocument(id);
+
+        verify(documentRepository).deleteById(id);
+    }
+
+    @Test
+    void deleteDocument_throwsNotFound_whenMissing() {
+        UUID id = UUID.randomUUID();
+        when(documentRepository.existsById(id)).thenReturn(false);
+
+        assertThatThrownBy(() -> documentService.deleteDocument(id))
+                .isInstanceOf(DomainException.class)
+                .hasMessageContaining(id.toString());
+        verify(documentRepository, never()).deleteById(any());
+    }
+
     // ─── getDocumentById ──────────────────────────────────────────────────────
 
     @Test
@@ -135,6 +165,48 @@ class DocumentServiceTest {
         assertThat(documentService.getDocumentsByReceiver(receiverId)).containsExactly(doc);
     }
 
+    // ─── file hash propagation ───────────────────────────────────────────────
+
+    @Test
+    void createDocument_setsFileHashFromUpload_whenFileProvided() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("Doc");
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "scan.pdf", "application/pdf", new byte[]{1});
+        FileService.UploadResult uploadResult = new FileService.UploadResult("documents/uuid_scan.pdf", "deadbeef");
+
+        Document savedDoc = Document.builder().id(UUID.randomUUID()).title("Doc")
+                .originalFilename("scan.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(savedDoc);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(savedDoc));
+        when(fileService.uploadFile(any(), any())).thenReturn(uploadResult);
+
+        documentService.createDocument(dto, file);
+
+        org.mockito.ArgumentCaptor<Document> captor = org.mockito.ArgumentCaptor.forClass(Document.class);
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues()).anySatisfy(d -> assertThat(d.getFileHash()).isEqualTo("deadbeef"));
+    }
+
+    @Test
+    void updateDocument_setsFileHashFromUpload_whenNewFileProvided() throws Exception {
+        UUID id = UUID.randomUUID();
+        Document existing = Document.builder()
+                .id(id).title("Alt").originalFilename("old.pdf")
+                .status(DocumentStatus.UPLOADED).build();
+        org.springframework.mock.web.MockMultipartFile newFile =
+                new org.springframework.mock.web.MockMultipartFile("file", "new.pdf", "application/pdf", new byte[]{2});
+        FileService.UploadResult uploadResult = new FileService.UploadResult("documents/uuid_new.pdf", "cafebabe");
+
+        when(documentRepository.findById(id)).thenReturn(Optional.of(existing));
+        when(fileService.uploadFile(any(), any())).thenReturn(uploadResult);
+        when(documentRepository.save(any())).thenReturn(existing);
+
+        documentService.updateDocument(id, new DocumentUpdateDTO(), newFile);
+
+        assertThat(existing.getFileHash()).isEqualTo("cafebabe");
+    }
+
     // ─── versioning ───────────────────────────────────────────────────────────
 
     @Test
@@ -167,4 +239,435 @@ class DocumentServiceTest {
 
         verify(documentVersionService).recordVersion(any(Document.class));
     }
+
+    // ─── storeDocument ───────────────────────────────────────────────────────
+
+    @Test
+    void storeDocument_setsTitle_withoutFileExtension_forNewDocument() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "scan001.pdf", "application/pdf", new byte[]{1});
+        FileService.UploadResult uploadResult = new FileService.UploadResult("documents/uuid_scan001.pdf", "abc123");
+        Document saved = Document.builder().id(UUID.randomUUID()).title("scan001").originalFilename("scan001.pdf").build();
+
+        when(documentRepository.findFirstByOriginalFilename("scan001.pdf")).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(fileService.uploadFile(any(), any())).thenReturn(uploadResult);
+
+        org.mockito.ArgumentCaptor<Document> captor = org.mockito.ArgumentCaptor.forClass(Document.class);
+        documentService.storeDocument(file);
+
+        verify(documentRepository).save(captor.capture());
+        assertThat(captor.getValue().getTitle()).isEqualTo("scan001");
+    }
+
+    @Test
+    void storeDocument_preservesExistingTitle_whenPlaceholderAlreadyExists() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "scan001.pdf", "application/pdf", new byte[]{1});
+        FileService.UploadResult uploadResult = new FileService.UploadResult("documents/uuid_scan001.pdf", "abc123");
+        Document placeholder = Document.builder()
+                .id(UUID.randomUUID()).title("Brief an Oma").originalFilename("scan001.pdf")
+                .status(DocumentStatus.PLACEHOLDER).build();
+
+        when(documentRepository.findFirstByOriginalFilename("scan001.pdf")).thenReturn(Optional.of(placeholder));
+        when(documentRepository.save(any())).thenReturn(placeholder);
+        when(fileService.uploadFile(any(), any())).thenReturn(uploadResult);
+
+        documentService.storeDocument(file);
+
+        assertThat(placeholder.getTitle()).isEqualTo("Brief an Oma");
+    }
+
+    @Test
+    void storeDocument_marksResultAsNew_whenNoExistingDocument() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "new.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).originalFilename("new.pdf").build();
+
+        when(documentRepository.findFirstByOriginalFilename("new.pdf")).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("documents/new.pdf", "hash"));
+
+        DocumentService.StoreResult result = documentService.storeDocument(file);
+
+        assertThat(result.isNew()).isTrue();
+    }
+
+    @Test
+    void storeDocument_marksResultAsNotNew_whenDocumentWithSameFilenameExists() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "existing.pdf", "application/pdf", new byte[]{1});
+        Document existing = Document.builder().id(UUID.randomUUID()).originalFilename("existing.pdf")
+                .status(DocumentStatus.UPLOADED).build();
+
+        when(documentRepository.findFirstByOriginalFilename("existing.pdf")).thenReturn(Optional.of(existing));
+        when(documentRepository.save(any())).thenReturn(existing);
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("documents/existing.pdf", "hash"));
+
+        DocumentService.StoreResult result = documentService.storeDocument(file);
+
+        assertThat(result.isNew()).isFalse();
+    }
+
+    // ─── backfillFileHashes ───────────────────────────────────────────────────
+
+    @Test
+    void backfillFileHashes_skipsDocumentsWithNoFilePath() throws Exception {
+        Document noFile = Document.builder().id(UUID.randomUUID()).build();
+        when(documentRepository.findByFileHashIsNullAndFilePathIsNotNull()).thenReturn(List.of());
+
+        int count = documentService.backfillFileHashes();
+
+        assertThat(count).isZero();
+        verify(fileService, never()).downloadFileBytes(any());
+    }
+
+    @Test
+    void backfillFileHashes_computesHashAndSavesDocument() throws Exception {
+        UUID docId = UUID.randomUUID();
+        Document doc = Document.builder().id(docId).filePath("documents/scan.pdf").build();
+        when(documentRepository.findByFileHashIsNullAndFilePathIsNotNull()).thenReturn(List.of(doc));
+        when(fileService.downloadFileBytes("documents/scan.pdf")).thenReturn(new byte[]{1, 2, 3});
+        when(documentRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        documentService.backfillFileHashes();
+
+        assertThat(doc.getFileHash()).isNotNull().hasSize(64);
+        verify(documentRepository).save(doc);
+    }
+
+    @Test
+    void backfillFileHashes_propagatesHashToAnnotations() throws Exception {
+        UUID docId = UUID.randomUUID();
+        Document doc = Document.builder().id(docId).filePath("documents/scan.pdf").build();
+        when(documentRepository.findByFileHashIsNullAndFilePathIsNotNull()).thenReturn(List.of(doc));
+        when(fileService.downloadFileBytes("documents/scan.pdf")).thenReturn(new byte[]{1, 2, 3});
+        when(documentRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        documentService.backfillFileHashes();
+
+        verify(annotationService).backfillAnnotationFileHashForDocument(eq(docId), any());
+    }
+
+    // ─── getIncompleteCount ───────────────────────────────────────────────────
+
+    @Test
+    void getIncompleteCount_delegatesToRepository() {
+        when(documentRepository.countByMetadataCompleteFalse()).thenReturn(5L);
+        assertThat(documentService.getIncompleteCount()).isEqualTo(5L);
+    }
+
+    // ─── findIncompleteDocuments ──────────────────────────────────────────────
+
+    @Test
+    void findIncompleteDocuments_returnsDocumentsOrderedByCreatedAtDesc() {
+        Document doc = Document.builder().id(UUID.randomUUID()).title("Test").build();
+        when(documentRepository.findByMetadataCompleteFalse(any(Sort.class))).thenReturn(List.of(doc));
+
+        assertThat(documentService.findIncompleteDocuments()).containsExactly(doc);
+        verify(documentRepository).findByMetadataCompleteFalse(Sort.by(Sort.Direction.DESC, "createdAt"));
+    }
+
+    // ─── findNextIncompleteDocument ───────────────────────────────────────────
+
+    @Test
+    void findNextIncompleteDocument_returnsNext_whenAnotherIncompleteExists() {
+        UUID currentId = UUID.randomUUID();
+        Document next = Document.builder().id(UUID.randomUUID()).title("Next").build();
+        when(documentRepository.findFirstByMetadataCompleteFalseAndIdNot(eq(currentId), any(Sort.class)))
+                .thenReturn(Optional.of(next));
+
+        assertThat(documentService.findNextIncompleteDocument(currentId)).contains(next);
+    }
+
+    @Test
+    void findNextIncompleteDocument_returnsEmpty_whenNoMoreIncomplete() {
+        UUID currentId = UUID.randomUUID();
+        when(documentRepository.findFirstByMetadataCompleteFalseAndIdNot(eq(currentId), any(Sort.class)))
+                .thenReturn(Optional.empty());
+
+        assertThat(documentService.findNextIncompleteDocument(currentId)).isEmpty();
+    }
+
+    // ─── storeDocument metadataComplete ──────────────────────────────────────
+
+    @Test
+    void storeDocument_setsMetadataCompleteFalse_forNewDocument() throws Exception {
+        MockMultipartFile file = new MockMultipartFile("file", "scan.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).originalFilename("scan.pdf").build();
+        when(documentRepository.findFirstByOriginalFilename("scan.pdf")).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.storeDocument(file);
+
+        verify(documentRepository).save(captor.capture());
+        assertThat(captor.getValue().isMetadataComplete()).isFalse();
+    }
+
+    @Test
+    void storeDocument_doesNotChangeMetadataComplete_forExistingDocument() throws Exception {
+        MockMultipartFile file = new MockMultipartFile("file", "scan.pdf", "application/pdf", new byte[]{1});
+        Document existing = Document.builder().id(UUID.randomUUID()).originalFilename("scan.pdf")
+                .status(DocumentStatus.PLACEHOLDER).metadataComplete(true).build();
+        when(documentRepository.findFirstByOriginalFilename("scan.pdf")).thenReturn(Optional.of(existing));
+        when(documentRepository.save(any())).thenReturn(existing);
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        documentService.storeDocument(file);
+
+        assertThat(existing.isMetadataComplete()).isTrue();
+    }
+
+    @Test
+    void storeDocument_parsesDateFromFilename_forNewDocument() throws Exception {
+        MockMultipartFile file = new MockMultipartFile("file", "19650312_Mueller_Hans.pdf", "application/pdf", new byte[]{1});
+        when(documentRepository.findFirstByOriginalFilename(any())).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+        when(personService.findByName(any(), any())).thenReturn(Optional.empty());
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.storeDocument(file);
+
+        verify(documentRepository).save(captor.capture());
+        assertThat(captor.getValue().getDocumentDate()).isEqualTo(java.time.LocalDate.of(1965, 3, 12));
+        assertThat(captor.getValue().getTitle()).isEqualTo("Hans Mueller (12.03.1965)");
+    }
+
+    @Test
+    void storeDocument_setsSender_whenPersonExistsForParsedName() throws Exception {
+        MockMultipartFile file = new MockMultipartFile("file", "18881025_de_Gruyter_Walter.pdf", "application/pdf", new byte[]{1});
+        Person walter = Person.builder().id(UUID.randomUUID()).firstName("Walter").lastName("de Gruyter").build();
+        when(documentRepository.findFirstByOriginalFilename(any())).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+        when(personService.findByName("Walter", "de Gruyter")).thenReturn(Optional.of(walter));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.storeDocument(file);
+
+        verify(documentRepository).save(captor.capture());
+        assertThat(captor.getValue().getSender()).isEqualTo(walter);
+    }
+
+    @Test
+    void storeDocument_leavesSenderNull_whenPersonNotFound() throws Exception {
+        MockMultipartFile file = new MockMultipartFile("file", "19650312_Mueller_Hans.pdf", "application/pdf", new byte[]{1});
+        when(documentRepository.findFirstByOriginalFilename(any())).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+        when(personService.findByName(any(), any())).thenReturn(Optional.empty());
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.storeDocument(file);
+
+        verify(documentRepository).save(captor.capture());
+        assertThat(captor.getValue().getSender()).isNull();
+    }
+
+    // ─── createDocument title fallback ────────────────────────────────────────
+
+    @Test
+    void createDocument_usesTitleFromFilename_whenDtoTitleIsNull() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        // dto.title is null
+        MockMultipartFile file = new MockMultipartFile("file", "Brief_1965.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Brief_1965")
+                .originalFilename("Brief_1965.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, file);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).getTitle()).isEqualTo("Brief_1965");
+    }
+
+    @Test
+    void createDocument_usesTitleFromFilename_whenDtoTitleIsBlank() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("   ");
+        MockMultipartFile file = new MockMultipartFile("file", "Rechnung_1980.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Rechnung_1980")
+                .originalFilename("Rechnung_1980.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, file);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).getTitle()).isEqualTo("Rechnung_1980");
+    }
+
+    @Test
+    void createDocument_keepsDtoTitle_whenProvided() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("Mein Titel");
+        MockMultipartFile file = new MockMultipartFile("file", "scan.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Mein Titel")
+                .originalFilename("scan.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, file);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).getTitle()).isEqualTo("Mein Titel");
+    }
+
+    // ─── createDocument metadataComplete ─────────────────────────────────────
+
+    @Test
+    void createDocument_setsMetadataCompleteFromDto_whenExplicitlyProvided() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("Doc");
+        dto.setMetadataComplete(true);
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Doc")
+                .originalFilename("Doc").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, null);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).isMetadataComplete()).isTrue();
+    }
+
+    @Test
+    void createDocument_setsMetadataCompleteFalse_whenAllKeyFieldsMissingAndNoExplicitFlag() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("Doc");
+        // no documentDate, no senderId, no receiverIds, no metadataComplete flag
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Doc")
+                .originalFilename("Doc").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, null);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).isMetadataComplete()).isFalse();
+    }
+
+    @Test
+    void createDocument_setsMetadataCompleteTrue_whenDatePresentAndNoExplicitFlag() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("Doc");
+        dto.setDocumentDate(LocalDate.of(2020, 1, 1));
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Doc")
+                .originalFilename("Doc").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, null);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).isMetadataComplete()).isTrue();
+    }
+
+    // ─── updateDocument metadataComplete ─────────────────────────────────────
+
+    @Test
+    void updateDocument_setsMetadataComplete_whenDtoHasValue() throws Exception {
+        UUID id = UUID.randomUUID();
+        Document existing = Document.builder().id(id).title("Doc").originalFilename("doc.pdf")
+                .status(DocumentStatus.PLACEHOLDER).metadataComplete(false).build();
+        when(documentRepository.findById(id)).thenReturn(Optional.of(existing));
+        when(documentRepository.save(any())).thenReturn(existing);
+
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setMetadataComplete(true);
+        documentService.updateDocument(id, dto, null);
+
+        assertThat(existing.isMetadataComplete()).isTrue();
+    }
+
+    @Test
+    void updateDocument_doesNotChangeMetadataComplete_whenDtoHasNull() throws Exception {
+        UUID id = UUID.randomUUID();
+        Document existing = Document.builder().id(id).title("Doc").originalFilename("doc.pdf")
+                .status(DocumentStatus.PLACEHOLDER).metadataComplete(false).build();
+        when(documentRepository.findById(id)).thenReturn(Optional.of(existing));
+        when(documentRepository.save(any())).thenReturn(existing);
+
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        // metadataComplete not set → null
+        documentService.updateDocument(id, dto, null);
+
+        assertThat(existing.isMetadataComplete()).isFalse();
+    }
+
+    @Test
+    void backfillFileHashes_returnsCountOfUpdatedDocuments() throws Exception {
+        UUID id1 = UUID.randomUUID();
+        UUID id2 = UUID.randomUUID();
+        Document doc1 = Document.builder().id(id1).filePath("documents/a.pdf").build();
+        Document doc2 = Document.builder().id(id2).filePath("documents/b.pdf").build();
+        when(documentRepository.findByFileHashIsNullAndFilePathIsNotNull()).thenReturn(List.of(doc1, doc2));
+        when(fileService.downloadFileBytes(any())).thenReturn(new byte[]{1});
+        when(documentRepository.save(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        int count = documentService.backfillFileHashes();
+
+        assertThat(count).isEqualTo(2);
+    }
+
+    // ─── titleFromFilename ────────────────────────────────────────────────────
+
+    @Test
+    void titleFromFilename_dateIso_name() {
+        assertThat(DocumentService.titleFromFilename("1965-03-12_Mueller_Hans.pdf"))
+                .isEqualTo("Hans Mueller (12.03.1965)");
+    }
+
+    @Test
+    void titleFromFilename_dateCompact_name() {
+        assertThat(DocumentService.titleFromFilename("19650312_Mueller_Hans.pdf"))
+                .isEqualTo("Hans Mueller (12.03.1965)");
+    }
+
+    @Test
+    void titleFromFilename_name_dateIso() {
+        assertThat(DocumentService.titleFromFilename("Mueller_Hans_1965-03-12.pdf"))
+                .isEqualTo("Hans Mueller (12.03.1965)");
+    }
+
+    @Test
+    void titleFromFilename_name_dateCompact() {
+        assertThat(DocumentService.titleFromFilename("Mueller_Hans_19650312.pdf"))
+                .isEqualTo("Hans Mueller (12.03.1965)");
+    }
+
+    @Test
+    void titleFromFilename_compound_lastName_dateFirst() {
+        assertThat(DocumentService.titleFromFilename("18881025_de_Gruyter_Walter.pdf"))
+                .isEqualTo("Walter de Gruyter (25.10.1888)");
+    }
+
+    @Test
+    void titleFromFilename_compound_lastName_dateLast() {
+        assertThat(DocumentService.titleFromFilename("de_Gruyter_Walter_18881025.pdf"))
+                .isEqualTo("Walter de Gruyter (25.10.1888)");
+    }
+
+    @Test
+    void titleFromFilename_fallsBackToStripExtension() {
+        assertThat(DocumentService.titleFromFilename("scan_001.pdf")).isEqualTo("scan_001");
+    }
+
+    @Test
+    void titleFromFilename_null_returnsNull() {
+        assertThat(DocumentService.titleFromFilename(null)).isNull();
+    }
 }

backend/src/test/java/org/raddatz/familienarchiv/service/FileServiceTest.java

@@ -0,0 +1,85 @@
+package org.raddatz.familienarchiv.service;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.mockito.ArgumentCaptor;
+import org.springframework.mock.web.MockMultipartFile;
+import software.amazon.awssdk.core.sync.RequestBody;
+import software.amazon.awssdk.services.s3.S3Client;
+import software.amazon.awssdk.services.s3.model.PutObjectRequest;
+
+import java.io.IOException;
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.*;
+
+class FileServiceTest {
+
+    private S3Client s3Client;
+    private FileService fileService;
+
+    @BeforeEach
+    void setUp() {
+        s3Client = mock(S3Client.class);
+        fileService = new FileService(s3Client, "test-bucket");
+    }
+
+    @Test
+    void uploadFile_returnsS3Key() throws IOException {
+        MockMultipartFile file = new MockMultipartFile(
+                "file", "test.pdf", "application/pdf", new byte[]{1, 2, 3});
+
+        FileService.UploadResult result = fileService.uploadFile(file, "test.pdf");
+
+        assertThat(result.s3Key()).startsWith("documents/");
+        assertThat(result.s3Key()).endsWith("_test.pdf");
+        verify(s3Client).putObject(any(PutObjectRequest.class), any(RequestBody.class));
+    }
+
+    @Test
+    void uploadFile_returnsCorrectSha256FileHash() throws IOException, NoSuchAlgorithmException {
+        byte[] content = "hello pdf content".getBytes();
+        MockMultipartFile file = new MockMultipartFile(
+                "file", "doc.pdf", "application/pdf", content);
+
+        FileService.UploadResult result = fileService.uploadFile(file, "doc.pdf");
+
+        // Compute expected hash independently
+        MessageDigest digest = MessageDigest.getInstance("SHA-256");
+        byte[] hashBytes = digest.digest(content);
+        StringBuilder expected = new StringBuilder();
+        for (byte b : hashBytes) {
+            expected.append(String.format("%02x", b));
+        }
+
+        assertThat(result.fileHash()).isEqualTo(expected.toString());
+    }
+
+    @Test
+    void uploadFile_differentContents_produceDifferentHashes() throws IOException {
+        MockMultipartFile file1 = new MockMultipartFile(
+                "f", "a.pdf", "application/pdf", new byte[]{1, 2, 3});
+        MockMultipartFile file2 = new MockMultipartFile(
+                "f", "b.pdf", "application/pdf", new byte[]{4, 5, 6});
+
+        FileService.UploadResult r1 = fileService.uploadFile(file1, "a.pdf");
+        FileService.UploadResult r2 = fileService.uploadFile(file2, "b.pdf");
+
+        assertThat(r1.fileHash()).isNotEqualTo(r2.fileHash());
+    }
+
+    @Test
+    void uploadFile_sameContents_produceSameHash() throws IOException {
+        byte[] content = new byte[]{10, 20, 30};
+        MockMultipartFile file1 = new MockMultipartFile("f", "x.pdf", "application/pdf", content);
+        MockMultipartFile file2 = new MockMultipartFile("f", "y.pdf", "application/pdf", content);
+
+        FileService.UploadResult r1 = fileService.uploadFile(file1, "x.pdf");
+        FileService.UploadResult r2 = fileService.uploadFile(file2, "y.pdf");
+
+        assertThat(r1.fileHash()).isEqualTo(r2.fileHash());
+    }
+}

frontend/e2e/admin.spec.ts

@@ -180,19 +180,19 @@ test.describe('Admin — tag management', () => {
 		// Wait for the tags list to render after the tab switch
 		await page.waitForSelector('ul > li');
 
-		// Hover over the "Familie" row to reveal the opacity-0 action buttons
-		const familieRow = page
+		// Hover over the "Fest" row to reveal the opacity-0 action buttons
+		const festRow = page
 			.locator('ul > li')
-			.filter({ has: page.locator('span', { hasText: /^Familie$/ }) });
-		await familieRow.hover();
-		await familieRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
+			.filter({ has: page.locator('span', { hasText: /^Fest$/ }) });
+		await festRow.hover();
+		await festRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
 
 		// After clicking edit, {#if editingTagId} replaces the span with a form —
-		// the familieRow filter no longer matches, so we find the input directly.
-		await page.locator('input[name="name"]').fill('Familie (E2E)');
+		// the festRow filter no longer matches, so we find the input directly.
+		await page.locator('input[name="name"]').fill('Fest (E2E)');
 		await page.getByRole('button', { name: 'Speichern' }).click();
 
-		await expect(page.getByText('Familie (E2E)')).toBeVisible();
+		await expect(page.getByText('Fest (E2E)')).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/admin-tag-renamed.png' });
 	});
 
@@ -205,14 +205,46 @@ test.describe('Admin — tag management', () => {
 
 		const renamedRow = page
 			.locator('ul > li')
-			.filter({ has: page.locator('span', { hasText: /^Familie \(E2E\)$/ }) });
+			.filter({ has: page.locator('span', { hasText: /^Fest \(E2E\)$/ }) });
 		await renamedRow.hover();
 		await renamedRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
 
-		await page.locator('input[name="name"]').fill('Familie');
+		await page.locator('input[name="name"]').fill('Fest');
 		await page.getByRole('button', { name: 'Speichern' }).click();
 
-		await expect(page.getByText('Familie')).toBeVisible();
+		await expect(page.getByText('Fest')).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/admin-tag-restored.png' });
 	});
 });
+
+// ─── System tab — backfill file hashes ────────────────────────────────────────
+
+test.describe('Admin system tab — backfill file hashes', () => {
+	test('admin triggers file hash backfill and sees success message', async ({ request, page }) => {
+		test.setTimeout(60_000);
+
+		// Create a document via API so there is at least one without a hash
+		const createRes = await request.post('/api/documents', {
+			multipart: { title: 'E2E Backfill Hash Test' }
+		});
+		if (!createRes.ok()) throw new Error(`Create failed: ${createRes.status()}`);
+
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		// Navigate to System tab
+		await page.getByRole('button', { name: /system/i }).click();
+
+		// Click the backfill hashes button
+		const btn = page.getByRole('button', { name: /datei-hashes berechnen/i });
+		await expect(btn).toBeVisible();
+		await btn.click();
+
+		// Success message must appear (count >= 0)
+		await expect(page.locator('text=/\\d+ Dokumente wurden aktualisiert/i')).toBeVisible({
+			timeout: 15000
+		});
+
+		await page.screenshot({ path: 'test-results/e2e/admin-backfill-hashes.png' });
+	});
+});

frontend/e2e/documents.spec.ts

@@ -25,7 +25,7 @@ test.describe('Document list', () => {
 
 	test('navigation bar shows active state for Dokumente', async ({ page }) => {
 		const navLink = page.getByRole('navigation').getByRole('link', { name: 'Dokumente' });
-		await expect(navLink).toHaveClass(/text-brand-navy/);
+		await expect(navLink).toHaveClass(/bg-nav-active/);
 	});
 
 	test('text search filters the document list', async ({ page }) => {
@@ -77,12 +77,49 @@ test.describe('Document detail', () => {
 });
 
 test.describe('New document', () => {
-	test('renders the upload form', async ({ page }) => {
+	test('renders the upload form with file input first', async ({ page }) => {
 		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
 		await expect(page.getByRole('heading', { name: /Neues Dokument/i })).toBeVisible();
-		await expect(page.getByLabel('Titel')).toBeVisible();
+		// File input comes before the title field in DOM order
+		const fileInput = page.locator('input[type="file"]');
+		const titleInput = page.getByLabel('Titel');
+		await expect(fileInput).toBeVisible();
+		await expect(titleInput).toBeVisible();
+		const fileBox = await fileInput.boundingBox();
+		const titleBox = await titleInput.boundingBox();
+		expect(fileBox!.y).toBeLessThan(titleBox!.y);
 		await page.screenshot({ path: 'test-results/e2e/document-new.png' });
 	});
+
+	test('title field is pre-filled from filename when a file is selected', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+		const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+		const fileInput = page.locator('input[type="file"]');
+		await fileInput.setInputFiles({
+			name: 'Brief_1965.pdf',
+			mimeType: 'application/pdf',
+			buffer: fs.readFileSync(PDF_FIXTURE)
+		});
+		await expect(page.getByLabel('Titel')).toHaveValue('Brief_1965');
+		await page.screenshot({ path: 'test-results/e2e/document-new-filename-prefill.png' });
+	});
+
+	test('typed title is not overwritten when a file is selected', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+		await page.getByLabel('Titel').fill('Weihnachtsbrief 1965');
+		const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+		const fileInput = page.locator('input[type="file"]');
+		await fileInput.setInputFiles({
+			name: 'Brief_1965.pdf',
+			mimeType: 'application/pdf',
+			buffer: fs.readFileSync(PDF_FIXTURE)
+		});
+		await expect(page.getByLabel('Titel')).toHaveValue('Weihnachtsbrief 1965');
+		await page.screenshot({ path: 'test-results/e2e/document-new-title-not-overwritten.png' });
+	});
 });
 
 test.describe('Document creation', () => {
@@ -91,12 +128,27 @@ test.describe('Document creation', () => {
 		await page.waitForSelector('[data-hydrated]');
 
 		await page.getByLabel('Titel').fill('E2E Testbrief');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 
 		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
 		await expect(page.getByRole('heading', { name: 'E2E Testbrief' })).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/document-create.png' });
 	});
+
+	test('user saves a document with only a file — title comes from filename', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+		const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+		await page.locator('input[type="file"]').setInputFiles({
+			name: 'Brief_1965.pdf',
+			mimeType: 'application/pdf',
+			buffer: fs.readFileSync(PDF_FIXTURE)
+		});
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
+		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
+		await expect(page.getByRole('heading', { name: 'Brief_1965' })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/document-create-file-only.png' });
+	});
 });
 
 test.describe('Document editing', () => {
@@ -112,10 +164,10 @@ test.describe('Document editing', () => {
 		await page.waitForSelector('[data-hydrated]');
 
 		await page.getByLabel('Titel').fill('E2E Testbrief (überarbeitet)');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 
 		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
-		await expect(page.getByText('E2E Testbrief (überarbeitet)')).toBeVisible();
+		await expect(page.getByRole('heading', { name: 'E2E Testbrief (überarbeitet)' })).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/document-edit-save.png' });
 	});
 });
@@ -327,10 +379,12 @@ test.describe('PDF annotations — admin', () => {
 		await page.waitForSelector('[data-hydrated]');
 		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 20000 });
 
-		// Ensure annotation is visible before enabling annotate mode
+		// Ensure at least one annotation is visible before enabling annotate mode
 		await expect(page.locator('[data-testid^="annotation-"]').first()).toBeVisible({
 			timeout: 8000
 		});
+		// Record count now — the draw test may have created more than one annotation
+		const countBefore = await page.locator('[data-testid^="annotation-"]').count();
 
 		// Enable annotate mode to show delete buttons
 		await page.getByRole('button', { name: /^annotieren$/i }).click();
@@ -339,7 +393,7 @@ test.describe('PDF annotations — admin', () => {
 		await expect(deleteBtn).toBeVisible({ timeout: 8000 });
 		await deleteBtn.click();
 
-		await expect(page.locator('[data-testid^="annotation-"]')).toHaveCount(0, {
+		await expect(page.locator('[data-testid^="annotation-"]')).toHaveCount(countBefore - 1, {
 			timeout: 8000
 		});
 
@@ -347,13 +401,147 @@ test.describe('PDF annotations — admin', () => {
 	});
 });
 
+// ─── PDF Annotations — file hash (version awareness) ─────────────────────────
+
+test.describe('PDF annotations — file hash versioning', () => {
+	const baseURL = process.env.E2E_BASE_URL ?? 'http://localhost:3000';
+	const PDF_FIXTURE2 = path.resolve(__dirname, 'fixtures/minimal2.pdf');
+
+	test('annotations are hidden after a different file is uploaded', async ({ page, request }) => {
+		test.setTimeout(90_000);
+
+		// 1. Create document and upload original PDF
+		const createRes = await request.post('/api/documents', {
+			multipart: { title: 'E2E Hash Test — version' }
+		});
+		if (!createRes.ok()) throw new Error(`Create failed: ${createRes.status()}`);
+		const doc = await createRes.json();
+
+		const uploadRes = await request.put(`/api/documents/${doc.id}`, {
+			multipart: {
+				title: doc.title,
+				file: {
+					name: 'minimal.pdf',
+					mimeType: 'application/pdf',
+					buffer: fs.readFileSync(PDF_FIXTURE)
+				}
+			}
+		});
+		if (!uploadRes.ok()) throw new Error(`Upload failed: ${uploadRes.status()}`);
+
+		// 2. Create an annotation via API
+		const annotRes = await request.post(`/api/documents/${doc.id}/annotations`, {
+			data: { pageNumber: 1, x: 0.1, y: 0.1, width: 0.2, height: 0.2, color: '#ff0000' }
+		});
+		if (!annotRes.ok()) throw new Error(`Create annotation failed: ${annotRes.status()}`);
+
+		// 3. Verify annotation appears before re-upload
+		await page.goto(`${baseURL}/documents/${doc.id}`);
+		await page.waitForSelector('[data-hydrated]');
+		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 20000 });
+		await expect(page.locator('[data-testid^="annotation-"]').first()).toBeVisible({
+			timeout: 8000
+		});
+
+		// 4. Upload a different file (different hash)
+		const reuploadRes = await request.put(`/api/documents/${doc.id}`, {
+			multipart: {
+				title: doc.title,
+				file: {
+					name: 'minimal2.pdf',
+					mimeType: 'application/pdf',
+					buffer: fs.readFileSync(PDF_FIXTURE2)
+				}
+			}
+		});
+		if (!reuploadRes.ok()) throw new Error(`Re-upload failed: ${reuploadRes.status()}`);
+
+		// 5. Reload — annotation must be hidden and notice shown
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 20000 });
+
+		// Use :not() to exclude the outdated-notice and side-panel elements whose testid also starts with "annotation-"
+		await expect(
+			page.locator(
+				'[data-testid^="annotation-"]:not([data-testid="annotation-outdated-notice"]):not([data-testid="annotation-side-panel"])'
+			)
+		).toHaveCount(0, { timeout: 8000 });
+		await expect(page.locator('[data-testid="annotation-outdated-notice"]')).toBeVisible({
+			timeout: 5000
+		});
+
+		await page.screenshot({ path: 'test-results/e2e/annotation-hidden-after-reupload.png' });
+	});
+
+	test('annotations reappear after re-uploading the original file', async ({ page, request }) => {
+		test.setTimeout(90_000);
+
+		// 1. Create document and upload original PDF
+		const createRes = await request.post('/api/documents', {
+			multipart: { title: 'E2E Hash Test — restore' }
+		});
+		if (!createRes.ok()) throw new Error(`Create failed: ${createRes.status()}`);
+		const doc = await createRes.json();
+
+		const originalBytes = fs.readFileSync(PDF_FIXTURE);
+		const uploadRes = await request.put(`/api/documents/${doc.id}`, {
+			multipart: {
+				title: doc.title,
+				file: { name: 'minimal.pdf', mimeType: 'application/pdf', buffer: originalBytes }
+			}
+		});
+		if (!uploadRes.ok()) throw new Error(`Upload failed: ${uploadRes.status()}`);
+
+		// 2. Create annotation
+		const annotRes = await request.post(`/api/documents/${doc.id}/annotations`, {
+			data: { pageNumber: 1, x: 0.1, y: 0.1, width: 0.2, height: 0.2, color: '#0000ff' }
+		});
+		if (!annotRes.ok()) throw new Error(`Create annotation failed: ${annotRes.status()}`);
+
+		// 3. Replace with different file
+		const replaceRes = await request.put(`/api/documents/${doc.id}`, {
+			multipart: {
+				title: doc.title,
+				file: {
+					name: 'minimal2.pdf',
+					mimeType: 'application/pdf',
+					buffer: fs.readFileSync(PDF_FIXTURE2)
+				}
+			}
+		});
+		if (!replaceRes.ok()) throw new Error(`Replace failed: ${replaceRes.status()}`);
+
+		// 4. Re-upload original file (restoring the hash)
+		const restoreRes = await request.put(`/api/documents/${doc.id}`, {
+			multipart: {
+				title: doc.title,
+				file: { name: 'minimal.pdf', mimeType: 'application/pdf', buffer: originalBytes }
+			}
+		});
+		if (!restoreRes.ok()) throw new Error(`Restore failed: ${restoreRes.status()}`);
+
+		// 5. Verify annotation reappears and notice is gone
+		await page.goto(`${baseURL}/documents/${doc.id}`);
+		await page.waitForSelector('[data-hydrated]');
+		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 20000 });
+
+		await expect(page.locator('[data-testid^="annotation-"]').first()).toBeVisible({
+			timeout: 8000
+		});
+		await expect(page.locator('[data-testid="annotation-outdated-notice"]')).not.toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/annotation-restored.png' });
+	});
+});
+
 // ─── PDF Annotations (read-only user) ─────────────────────────────────────────
 
 test.describe('PDF annotations — read-only user', () => {
 	// Isolated session — does not share the admin storage state
 	test.use({ storageState: { cookies: [], origins: [] } });
 
-	test('read-only user sees a disabled Annotieren button', async ({ page }) => {
+	test('read-only user does not see the Annotieren button', async ({ page }) => {
 		test.setTimeout(60_000);
 		await page.goto('/login');
 		await page.getByLabel('Benutzername').fill('reader');
@@ -365,12 +553,10 @@ test.describe('PDF annotations — read-only user', () => {
 		const baseURL = process.env.E2E_BASE_URL ?? 'http://localhost:3000';
 		await page.goto(`${baseURL}/documents/${sharedAnnotationDocId}`);
 		await page.waitForSelector('[data-hydrated]');
-		// Wait for the PDF canvas — once rendered, the controls bar (with disabled button) is shown.
-		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 30000 });
 
-		const disabledBtn = page.getByRole('button', { name: /annotieren/i });
-		await expect(disabledBtn).toBeVisible({ timeout: 5000 });
-		await expect(disabledBtn).toBeDisabled();
+		// Reader users do not have ANNOTATE_ALL permission — the button must not be shown at all.
+		const annotateBtn = page.getByRole('button', { name: /annotieren/i });
+		await expect(annotateBtn).not.toBeVisible({ timeout: 5000 });
 
 		await page.screenshot({ path: 'test-results/e2e/annotations-button-reader.png' });
 	});

frontend/e2e/fixtures/minimal2.pdf

@@ -0,0 +1,21 @@
+%PDF-1.4
+1 0 obj
+<</Type/Catalog/Pages 2 0 R>>
+endobj
+2 0 obj
+<</Type/Pages/Kids[3 0 R]/Count 1>>
+endobj
+3 0 obj
+<</Type/Page/MediaBox[0 0 3 3]/Parent 2 0 R>>
+endobj
+xref
+0 4
+0000000000 65535 f 
+0000000009 00000 n 
+0000000058 00000 n 
+0000000115 00000 n 
+trailer
+<</Size 4/Root 1 0 R>>
+startxref
+190
+%%EOF

frontend/e2e/history.spec.ts

@@ -25,7 +25,7 @@ test.describe('Document history panel', () => {
 		await page.goto('/documents/new');
 		await page.waitForSelector('[data-hydrated]');
 		await page.getByLabel('Titel').fill('E2E History Test Dokument');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 		// Wait for redirect to the new document's UUID-based URL (not /documents/new)
 		await page.waitForURL(/\/documents\/[0-9a-f-]{36}$/);
 		docPath = new URL(page.url()).pathname;
@@ -34,7 +34,7 @@ test.describe('Document history panel', () => {
 		await page.goto(`${docPath}/edit`);
 		await page.waitForSelector('[data-hydrated]');
 		await page.getByLabel('Titel').fill('E2E History Test Dokument (bearbeitet)');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 		await page.waitForURL(/\/documents\/[0-9a-f-]{36}$/);
 
 		await context.close();

frontend/e2e/persons.spec.ts

@@ -212,7 +212,7 @@ test.describe('Conversations', () => {
 	test('nav link is active on the conversations page', async ({ page }) => {
 		await page.goto('/conversations');
 		const navLink = page.getByRole('link', { name: 'Konversationen' });
-		await expect(navLink).toHaveClass(/text-brand-navy/);
+		await expect(navLink).toHaveClass(/bg-nav-active/);
 	});
 
 	test('sort toggle changes the button label', async ({ page }) => {

frontend/e2e/theme.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Theme toggle', () => {
+	test.beforeEach(async ({ page }) => {
+		// Clear any saved theme preference before each test
+		await page.goto('/');
+		await page.evaluate(() => localStorage.removeItem('theme'));
+	});
+
+	test('toggle button is visible in the header', async ({ page }) => {
+		await page.goto('/');
+		await expect(
+			page.getByRole('banner').getByRole('button', { name: /dark mode|light mode/i })
+		).toBeVisible();
+	});
+
+	test('clicking the toggle switches to dark mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		const html = page.locator('html');
+		await expect(html).not.toHaveAttribute('data-theme', 'dark');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+
+		await expect(html).toHaveAttribute('data-theme', 'dark');
+	});
+
+	test('clicking the toggle again switches back to light mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /light mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+	});
+
+	test('theme persists after page reload', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+		await page.reload();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+	});
+
+	test('saved theme is applied before first paint (no flash)', async ({ page }) => {
+		// Set dark theme in localStorage before navigating
+		await page.goto('/');
+		await page.evaluate(() => localStorage.setItem('theme', 'dark'));
+
+		// Intercept the initial HTML to verify data-theme is set immediately
+		await page.goto('/');
+		const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+		expect(theme).toBe('dark');
+	});
+});

frontend/messages/de.json

@@ -2,10 +2,12 @@
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"error_annotation_not_found": "Die Annotation wurde nicht gefunden.",
 	"error_annotation_overlap": "Die Annotation überschneidet sich mit einer vorhandenen.",
+	"annotation_outdated_notice": "Einige Annotationen beziehen sich auf eine frühere Dateiversion und werden nicht angezeigt.",
 	"error_document_not_found": "Das Dokument wurde nicht gefunden.",
 	"error_document_no_file": "Diesem Dokument ist noch keine Datei zugeordnet.",
 	"error_file_not_found": "Die Datei konnte im Speicher nicht gefunden werden.",
 	"error_file_upload_failed": "Die Datei konnte nicht hochgeladen werden.",
+	"error_unsupported_file_type": "Dieses Dateiformat wird nicht unterstützt.",
 	"error_user_not_found": "Der Benutzer wurde nicht gefunden.",
 	"error_import_already_running": "Ein Import läuft bereits. Bitte warten Sie, bis dieser abgeschlossen ist.",
 	"error_unauthorized": "Sie sind nicht angemeldet.",
@@ -22,6 +24,7 @@
 	"btn_edit": "Bearbeiten",
 	"btn_create": "Erstellen",
 	"btn_delete": "Löschen",
+	"doc_delete_confirm": "Dokument wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
 	"btn_back_to_overview": "Zurück zur Übersicht",
 	"btn_back": "Zurück",
 	"btn_back_to_document": "Zurück zum Dokument",
@@ -36,7 +39,7 @@
 	"form_placeholder_location": "z.B. Berlin, Wien…",
 	"form_label_sender": "Absender",
 	"form_label_receivers": "Empfänger",
-	"form_label_title": "Titel *",
+	"form_label_title": "Titel",
 	"form_label_tags": "Schlagworte",
 	"form_label_content": "Inhalt",
 	"form_placeholder_content": "Kurze Beschreibung des Inhalts…",
@@ -72,6 +75,7 @@
 	"doc_file_replace_label": "Neue Datei hochladen",
 	"doc_file_replace_note": "(ersetzt die aktuelle Datei)",
 	"doc_current_file_label": "Aktuelle Datei:",
+	"doc_more_details": "Weitere Details",
 	"doc_new_heading": "Neues Dokument",
 	"doc_edit_heading": "Bearbeiten",
 	"doc_section_details": "Details",
@@ -241,6 +245,10 @@
 	"admin_system_backfill_description": "Erstellt einen initialen Verlaufseintrag für alle Dokumente, die noch keinen Verlauf haben (z.B. importierte Dokumente). Dadurch werden beim nächsten Bearbeiten nur die tatsächlich geänderten Felder hervorgehoben.",
 	"admin_system_backfill_btn": "Jetzt auffüllen",
 	"admin_system_backfill_success": "{count} Dokumente wurden aufgefüllt.",
+	"admin_system_backfill_hashes_heading": "Datei-Hashes berechnen",
+	"admin_system_backfill_hashes_description": "Berechnet den SHA-256-Hash für alle bereits hochgeladenen Dokumente, die noch keinen Hash haben. Dadurch werden Annotationen korrekt mit ihrer Dateiversion verknüpft und wieder angezeigt.",
+	"admin_system_backfill_hashes_btn": "Datei-Hashes berechnen",
+	"admin_system_backfill_hashes_success": "{count} Dokumente wurden aktualisiert.",
 	"comp_expandable_show_more": "Mehr anzeigen",
 	"comp_expandable_show_less": "Weniger anzeigen",
 	"error_comment_not_found": "Der Kommentar wurde nicht gefunden.",
@@ -257,5 +265,34 @@
 	"doc_panel_tab_history": "Verlauf",
 	"doc_panel_annotate": "Annotieren",
 	"doc_panel_annotate_stop": "Fertig",
-	"doc_panel_annotation_thread_title": "Annotation"
+	"doc_panel_annotation_thread_title": "Annotation",
+	"doc_panel_discussion_annotation_tab": "Annotation · Seite {page}",
+	"pdf_annotations_show": "Annotierungen anzeigen",
+	"pdf_annotations_hide": "Annotierungen verbergen",
+	"upload_drop_hint": "Einzeln oder mehrere Dateien auf einmal hochladen",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"upload_filename_hint": "Tipp: 2024-03-15_Mueller_Hans.pdf → Datum und Absender werden vorausgefüllt",
+	"upload_success": "{count} Dokument(e) erstellt",
+	"upload_duplicate": "{filename} existiert bereits —",
+	"upload_duplicate_link": "Zum Dokument",
+	"upload_invalid_type": "{filename}: Dateiformat nicht unterstützt",
+	"upload_error": "Fehler beim Hochladen von {filename}",
+	"enrich_list_back": "Zurück zur Übersicht",
+	"enrich_list_count": "Dokumente",
+	"btn_save_and_mark_reviewed": "Speichern & abschließen",
+	"btn_mark_for_review": "Zur Überprüfung markieren",
+	"enrich_needs_metadata_title": "Dokumente ohne Metadaten",
+	"enrich_needs_metadata_count": "{count} Dokument(e) warten auf Metadaten",
+	"enrich_needs_metadata_cta": "Jetzt vervollständigen",
+	"enrich_list_heading": "Dokumente ohne Metadaten",
+	"enrich_list_empty_heading": "Alle Dokumente vollständig",
+	"enrich_list_empty_body": "Es gibt keine Dokumente, die noch Metadaten benötigen.",
+	"enrich_list_start": "Überprüfung starten",
+	"enrich_progress": "{count} verbleibend",
+	"enrich_skip": "Überspringen",
+	"enrich_done_heading": "Alles erledigt!",
+	"enrich_done_body": "Alle Dokumente wurden bearbeitet.",
+	"enrich_back_to_list": "Zurück zur Liste",
+	"comment_empty_hint": "Noch keine Kommentare – starte die Diskussion!",
+	"comment_start_discussion": "Diskussion starten →"
 }

frontend/messages/en.json

@@ -2,10 +2,12 @@
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"error_annotation_not_found": "Annotation not found.",
 	"error_annotation_overlap": "The annotation overlaps an existing one.",
+	"annotation_outdated_notice": "Some annotations refer to an earlier file version and are not shown.",
 	"error_document_not_found": "Document not found.",
 	"error_document_no_file": "No file is associated with this document.",
 	"error_file_not_found": "The file could not be found in storage.",
 	"error_file_upload_failed": "The file could not be uploaded.",
+	"error_unsupported_file_type": "This file format is not supported.",
 	"error_user_not_found": "User not found.",
 	"error_import_already_running": "An import is already running. Please wait for it to finish.",
 	"error_unauthorized": "You are not logged in.",
@@ -22,6 +24,7 @@
 	"btn_edit": "Edit",
 	"btn_create": "Create",
 	"btn_delete": "Delete",
+	"doc_delete_confirm": "Really delete this document? This action cannot be undone.",
 	"btn_back_to_overview": "Back to overview",
 	"btn_back": "Back",
 	"btn_back_to_document": "Back to document",
@@ -36,7 +39,7 @@
 	"form_placeholder_location": "e.g. Berlin, Vienna…",
 	"form_label_sender": "Sender",
 	"form_label_receivers": "Recipients",
-	"form_label_title": "Title *",
+	"form_label_title": "Title",
 	"form_label_tags": "Tags",
 	"form_label_content": "Content",
 	"form_placeholder_content": "Brief description of the content…",
@@ -72,6 +75,7 @@
 	"doc_file_replace_label": "Upload new file",
 	"doc_file_replace_note": "(replaces the current file)",
 	"doc_current_file_label": "Current file:",
+	"doc_more_details": "More details",
 	"doc_new_heading": "New document",
 	"doc_edit_heading": "Edit",
 	"doc_section_details": "Details",
@@ -241,6 +245,10 @@
 	"admin_system_backfill_description": "Creates an initial history entry for all documents that do not have one yet (e.g. imported documents). This ensures that future edits only highlight actually changed fields.",
 	"admin_system_backfill_btn": "Backfill now",
 	"admin_system_backfill_success": "{count} documents were backfilled.",
+	"admin_system_backfill_hashes_heading": "Compute file hashes",
+	"admin_system_backfill_hashes_description": "Computes the SHA-256 hash for all previously uploaded documents that do not have one yet. This ensures annotations are correctly linked to their file version and shown again.",
+	"admin_system_backfill_hashes_btn": "Compute file hashes",
+	"admin_system_backfill_hashes_success": "{count} documents were updated.",
 	"comp_expandable_show_more": "Show more",
 	"comp_expandable_show_less": "Show less",
 	"error_comment_not_found": "The comment could not be found.",
@@ -257,5 +265,34 @@
 	"doc_panel_tab_history": "History",
 	"doc_panel_annotate": "Annotate",
 	"doc_panel_annotate_stop": "Done",
-	"doc_panel_annotation_thread_title": "Annotation"
+	"doc_panel_annotation_thread_title": "Annotation",
+	"doc_panel_discussion_annotation_tab": "Annotation · Page {page}",
+	"pdf_annotations_show": "Show annotations",
+	"pdf_annotations_hide": "Hide annotations",
+	"upload_drop_hint": "Drop one or multiple files at once",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"upload_filename_hint": "Tip: 2024-03-15_Mueller_Hans.pdf → date and sender pre-filled",
+	"upload_success": "{count} document(s) created",
+	"upload_duplicate": "{filename} already exists —",
+	"upload_duplicate_link": "View document",
+	"upload_invalid_type": "{filename}: unsupported file format",
+	"upload_error": "Error uploading {filename}",
+	"enrich_list_back": "Back to overview",
+	"enrich_list_count": "documents",
+	"btn_save_and_mark_reviewed": "Save & mark as reviewed",
+	"btn_mark_for_review": "Mark for review",
+	"enrich_needs_metadata_title": "Documents without metadata",
+	"enrich_needs_metadata_count": "{count} document(s) waiting for metadata",
+	"enrich_needs_metadata_cta": "Complete now",
+	"enrich_list_heading": "Documents without metadata",
+	"enrich_list_empty_heading": "All documents complete",
+	"enrich_list_empty_body": "There are no documents that still need metadata.",
+	"enrich_list_start": "Start reviewing",
+	"enrich_progress": "{count} remaining",
+	"enrich_skip": "Skip",
+	"enrich_done_heading": "All done!",
+	"enrich_done_body": "All documents have been processed.",
+	"enrich_back_to_list": "Back to list",
+	"comment_empty_hint": "No comments yet – start the discussion!",
+	"comment_start_discussion": "Start discussion →"
 }

frontend/messages/es.json

@@ -2,10 +2,12 @@
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"error_annotation_not_found": "Anotación no encontrada.",
 	"error_annotation_overlap": "La anotación se superpone con una existente.",
+	"annotation_outdated_notice": "Algunas anotaciones hacen referencia a una versión anterior del archivo y no se muestran.",
 	"error_document_not_found": "Documento no encontrado.",
 	"error_document_no_file": "No hay ningún archivo asociado a este documento.",
 	"error_file_not_found": "El archivo no pudo encontrarse en el almacenamiento.",
 	"error_file_upload_failed": "No se pudo subir el archivo.",
+	"error_unsupported_file_type": "Este formato de archivo no está admitido.",
 	"error_user_not_found": "Usuario no encontrado.",
 	"error_import_already_running": "Ya hay una importación en curso. Por favor, espere a que finalice.",
 	"error_unauthorized": "No ha iniciado sesión.",
@@ -22,6 +24,7 @@
 	"btn_edit": "Editar",
 	"btn_create": "Crear",
 	"btn_delete": "Eliminar",
+	"doc_delete_confirm": "¿Realmente eliminar este documento? Esta acción no se puede deshacer.",
 	"btn_back_to_overview": "Volver al resumen",
 	"btn_back": "Volver",
 	"btn_back_to_document": "Volver al documento",
@@ -36,7 +39,7 @@
 	"form_placeholder_location": "p.ej. Berlín, Viena…",
 	"form_label_sender": "Remitente",
 	"form_label_receivers": "Destinatarios",
-	"form_label_title": "Título *",
+	"form_label_title": "Título",
 	"form_label_tags": "Etiquetas",
 	"form_label_content": "Contenido",
 	"form_placeholder_content": "Breve descripción del contenido…",
@@ -72,6 +75,7 @@
 	"doc_file_replace_label": "Subir nuevo archivo",
 	"doc_file_replace_note": "(reemplaza el archivo actual)",
 	"doc_current_file_label": "Archivo actual:",
+	"doc_more_details": "Más detalles",
 	"doc_new_heading": "Nuevo documento",
 	"doc_edit_heading": "Editar",
 	"doc_section_details": "Detalles",
@@ -241,6 +245,10 @@
 	"admin_system_backfill_description": "Crea una entrada de historial inicial para todos los documentos que aún no tienen ninguna (p.ej. documentos importados). Así, en la próxima edición solo se resaltarán los campos realmente modificados.",
 	"admin_system_backfill_btn": "Completar ahora",
 	"admin_system_backfill_success": "{count} documentos fueron completados.",
+	"admin_system_backfill_hashes_heading": "Calcular hashes de archivo",
+	"admin_system_backfill_hashes_description": "Calcula el hash SHA-256 para todos los documentos ya subidos que aún no tienen uno. Así las anotaciones se vinculan correctamente a su versión del archivo y vuelven a mostrarse.",
+	"admin_system_backfill_hashes_btn": "Calcular hashes de archivo",
+	"admin_system_backfill_hashes_success": "{count} documentos fueron actualizados.",
 	"comp_expandable_show_more": "Mostrar más",
 	"comp_expandable_show_less": "Mostrar menos",
 	"error_comment_not_found": "El comentario no pudo encontrarse.",
@@ -257,5 +265,34 @@
 	"doc_panel_tab_history": "Historial",
 	"doc_panel_annotate": "Anotar",
 	"doc_panel_annotate_stop": "Listo",
-	"doc_panel_annotation_thread_title": "Anotación"
+	"doc_panel_annotation_thread_title": "Anotación",
+	"doc_panel_discussion_annotation_tab": "Anotación · Página {page}",
+	"pdf_annotations_show": "Mostrar anotaciones",
+	"pdf_annotations_hide": "Ocultar anotaciones",
+	"upload_drop_hint": "Uno o varios archivos a la vez",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"upload_filename_hint": "Consejo: 2024-03-15_Mueller_Hans.pdf → fecha y remitente prellenados",
+	"upload_success": "{count} documento(s) creado(s)",
+	"upload_duplicate": "{filename} ya existe —",
+	"upload_duplicate_link": "Ver documento",
+	"upload_invalid_type": "{filename}: formato de archivo no admitido",
+	"upload_error": "Error al subir {filename}",
+	"enrich_list_back": "Volver a la vista general",
+	"enrich_list_count": "documentos",
+	"btn_save_and_mark_reviewed": "Guardar y marcar como revisado",
+	"btn_mark_for_review": "Marcar para revisión",
+	"enrich_needs_metadata_title": "Documentos sin metadatos",
+	"enrich_needs_metadata_count": "{count} documento(s) esperando metadatos",
+	"enrich_needs_metadata_cta": "Completar ahora",
+	"enrich_list_heading": "Documentos sin metadatos",
+	"enrich_list_empty_heading": "Todos los documentos completos",
+	"enrich_list_empty_body": "No hay documentos que necesiten metadatos.",
+	"enrich_list_start": "Comenzar revisión",
+	"enrich_progress": "{count} restante(s)",
+	"enrich_skip": "Omitir",
+	"enrich_done_heading": "¡Todo listo!",
+	"enrich_done_body": "Todos los documentos han sido procesados.",
+	"enrich_back_to_list": "Volver a la lista",
+	"comment_empty_hint": "Aún no hay comentarios – ¡inicia la discusión!",
+	"comment_start_discussion": "Iniciar discusión →"
 }

frontend/src/app.html

@@ -3,6 +3,12 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script>
+			(function () {
+				var t = localStorage.getItem('theme');
+				if (t === 'dark' || t === 'light') document.documentElement.setAttribute('data-theme', t);
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

frontend/src/lib/components/AnnotationCommentPanel.svelte

@@ -25,16 +25,16 @@ let {
 
 <!-- Desktop / tablet panel (≥ sm): absolute overlay on the right side -->
 <div
-	class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-brand-sand bg-white shadow-2xl sm:flex"
+	class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-line bg-surface shadow-2xl sm:flex"
 >
-	<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
-		<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
+	<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
+		<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
 			{m.comment_panel_title()}
 		</h3>
 		<button
 			onclick={onClose}
 			aria-label={m.comment_panel_close()}
-			class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+			class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
 		>
 			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -60,15 +60,15 @@ let {
 	<div class="flex-1 bg-black/40" onclick={onClose} role="presentation"></div>
 
 	<!-- Slide-up panel -->
-	<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-white shadow-2xl">
-		<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
-			<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
+	<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-surface shadow-2xl">
+		<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
+			<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
 				{m.comment_panel_title()}
 			</h3>
 			<button
 				onclick={onClose}
 				aria-label={m.comment_panel_close()}
-				class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+				class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
 			>
 				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />

frontend/src/lib/components/AnnotationLayer.svelte

@@ -1,15 +1,5 @@
 <script lang="ts">
-type Annotation = {
-	id: string;
-	documentId: string;
-	pageNumber: number;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	color: string;
-	createdAt: string;
-};
+import type { Annotation } from '$lib/types';
 
 type DrawRect = {
 	x: number;

frontend/src/lib/components/AnnotationSidePanel.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import CommentThread from './CommentThread.svelte';
+
+type Props = {
+	documentId: string;
+	activeAnnotationId: string | null;
+	activeAnnotationPage: number | null;
+	canComment: boolean;
+	currentUserId: string | null;
+	canAdmin: boolean;
+	onClose: () => void;
+};
+
+let {
+	documentId,
+	activeAnnotationId,
+	activeAnnotationPage,
+	canComment,
+	currentUserId,
+	canAdmin,
+	onClose
+}: Props = $props();
+
+const visible = $derived(activeAnnotationId !== null);
+</script>
+
+<div
+	class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-line bg-surface shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
+		? 'translate-x-0'
+		: 'pointer-events-none translate-x-full'}"
+	data-testid="annotation-side-panel"
+>
+	<!-- Header -->
+	<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
+		<span class="font-sans text-xs font-medium text-ink">
+			{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
+		</span>
+		<button
+			onclick={onClose}
+			aria-label={m.comment_panel_close()}
+			class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
+		>
+			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Comment thread -->
+	<div class="flex-1 overflow-y-auto p-4">
+		{#if activeAnnotationId}
+			{#key activeAnnotationId}
+				<CommentThread
+					documentId={documentId}
+					annotationId={activeAnnotationId}
+					canComment={canComment}
+					currentUserId={currentUserId}
+					canAdmin={canAdmin}
+					loadOnMount={true}
+				/>
+			{/key}
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/CommentThread.svelte

@@ -1,25 +1,7 @@
 <script lang="ts">
 import { onMount, untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-
-type CommentReply = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-};
-
-type Comment = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	replies: CommentReply[];
-};
+import type { Comment, CommentReply } from '$lib/types';
 
 type Props = {
 	documentId: string;
@@ -185,180 +167,138 @@ function cancelReply() {
 onMount(() => {
 	if (loadOnMount) {
 		reload();
+	} else {
+		const total = initialComments.reduce((s, c) => s + 1 + c.replies.length, 0);
+		onCountChange?.(total);
 	}
 });
 </script>
 
+<!--
+  Renders a single comment or reply entry.
+  showReplyButton: whether the "Reply" button appears (only on last item in a thread).
+-->
+{#snippet commentEntry(comment: Comment | CommentReply, threadId: string, showReplyButton: boolean)}
+	{#if editingId === comment.id}
+		<div class="flex flex-col gap-2">
+			<textarea
+				class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+				rows={3}
+				bind:value={editText}
+			></textarea>
+			<div class="flex items-center gap-3">
+				<button
+					class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
+					disabled={posting}
+					onclick={() => saveEdit(comment.id)}
+				>
+					{m.btn_save()}
+				</button>
+				<button
+					class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
+					onclick={cancelEdit}
+				>
+					{m.btn_cancel()}
+				</button>
+			</div>
+		</div>
+	{:else}
+		<div class="flex items-start justify-between gap-2">
+			<div class="min-w-0 flex-1">
+				<div class="flex flex-wrap items-center gap-2">
+					<span class="font-sans text-xs font-semibold text-ink">{comment.authorName}</span>
+					<span class="font-sans text-xs text-ink-3">{timeAgo(comment.createdAt)}</span>
+					{#if wasEdited(comment)}
+						<span class="font-sans text-xs text-ink-3">
+							{m.comment_edited_label()}
+							{timeAgo(comment.updatedAt)}
+						</span>
+					{/if}
+				</div>
+				<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{comment.content}</p>
+			</div>
+			{#if canModify(comment)}
+				<div class="flex shrink-0 items-center gap-2">
+					<button
+						class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
+						onclick={() => startEdit(comment)}
+					>
+						{m.btn_edit()}
+					</button>
+					<button
+						class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
+						onclick={() => deleteComment(comment.id)}
+					>
+						{m.btn_delete()}
+					</button>
+				</div>
+			{/if}
+		</div>
+		{#if showReplyButton && canComment}
+			<div class="mt-1">
+				<button
+					class="font-sans text-xs font-medium text-accent transition-colors hover:text-ink"
+					onclick={() => startReply(threadId)}
+				>
+					{m.comment_btn_reply()}
+				</button>
+			</div>
+		{/if}
+	{/if}
+{/snippet}
+
 <div class="space-y-4">
+	{#if comments.length === 0}
+		<div class="flex flex-col items-center gap-3 py-8 text-center">
+			<svg
+				class="h-10 w-10 text-ink-3"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+				/>
+			</svg>
+			<p class="font-sans text-sm text-ink-3">{m.comment_empty_hint()}</p>
+		</div>
+	{/if}
 	{#each comments as thread, ti (thread.id)}
-		<div class={ti > 0 ? 'border-t border-brand-sand pt-4' : ''}>
+		<div class={ti > 0 ? 'border-t border-line pt-4' : ''}>
 			<!-- Root comment -->
 			<div>
-				{#if editingId === thread.id}
-					<div class="flex flex-col gap-2">
-						<textarea
-							class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
-							rows={3}
-							bind:value={editText}
-						></textarea>
-						<div class="flex items-center gap-3">
-							<button
-								class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
-								disabled={posting}
-								onclick={() => saveEdit(thread.id)}
-							>
-								{m.btn_save()}
-							</button>
-							<button
-								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
-								onclick={cancelEdit}
-							>
-								{m.btn_cancel()}
-							</button>
-						</div>
-					</div>
-				{:else}
-					<div class="flex items-start justify-between gap-2">
-						<div class="min-w-0 flex-1">
-							<div class="flex flex-wrap items-center gap-2">
-								<span class="font-sans text-xs font-semibold text-brand-navy"
-									>{thread.authorName}</span
-								>
-								<span class="font-sans text-xs text-gray-400">{timeAgo(thread.createdAt)}</span>
-								{#if wasEdited(thread)}
-									<span class="font-sans text-xs text-gray-400">
-										{m.comment_edited_label()}
-										{timeAgo(thread.updatedAt)}
-									</span>
-								{/if}
-							</div>
-							<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{thread.content}</p>
-						</div>
-						{#if canModify(thread)}
-							<div class="flex shrink-0 items-center gap-2">
-								<button
-									class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
-									onclick={() => startEdit(thread)}
-								>
-									{m.btn_edit()}
-								</button>
-								<button
-									class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
-									onclick={() => deleteComment(thread.id)}
-								>
-									{m.btn_delete()}
-								</button>
-							</div>
-						{/if}
-					</div>
-					<!-- Reply button on root comment only if there are no replies -->
-					{#if thread.replies.length === 0 && canComment}
-						<div class="mt-1">
-							<button
-								class="font-sans text-xs font-medium text-brand-mint transition-colors hover:text-brand-navy"
-								onclick={() => startReply(thread.id)}
-							>
-								{m.comment_btn_reply()}
-							</button>
-						</div>
-					{/if}
-				{/if}
+				{@render commentEntry(thread, thread.id, thread.replies.length === 0)}
 			</div>
 
 			<!-- Replies -->
 			{#each thread.replies as reply, ri (reply.id)}
-				<div class="mt-3 ml-6 border-l-2 border-brand-sand pl-4">
-					{#if editingId === reply.id}
-						<div class="flex flex-col gap-2">
-							<textarea
-								class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
-								rows={3}
-								bind:value={editText}
-							></textarea>
-							<div class="flex items-center gap-3">
-								<button
-									class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
-									disabled={posting}
-									onclick={() => saveEdit(reply.id)}
-								>
-									{m.btn_save()}
-								</button>
-								<button
-									class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
-									onclick={cancelEdit}
-								>
-									{m.btn_cancel()}
-								</button>
-							</div>
-						</div>
-					{:else}
-						<div class="flex items-start justify-between gap-2">
-							<div class="min-w-0 flex-1">
-								<div class="flex flex-wrap items-center gap-2">
-									<span class="font-sans text-xs font-semibold text-brand-navy"
-										>{reply.authorName}</span
-									>
-									<span class="font-sans text-xs text-gray-400">{timeAgo(reply.createdAt)}</span>
-									{#if wasEdited(reply)}
-										<span class="font-sans text-xs text-gray-400">
-											{m.comment_edited_label()}
-											{timeAgo(reply.updatedAt)}
-										</span>
-									{/if}
-								</div>
-								<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{reply.content}</p>
-							</div>
-							{#if canModify(reply)}
-								<div class="flex shrink-0 items-center gap-2">
-									<button
-										class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
-										onclick={() => startEdit(reply)}
-									>
-										{m.btn_edit()}
-									</button>
-									<button
-										class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
-										onclick={() => deleteComment(reply.id)}
-									>
-										{m.btn_delete()}
-									</button>
-								</div>
-							{/if}
-						</div>
-						<!-- Reply button only on the last reply -->
-						{#if ri === thread.replies.length - 1 && canComment}
-							<div class="mt-1">
-								<button
-									class="font-sans text-xs font-medium text-brand-mint transition-colors hover:text-brand-navy"
-									onclick={() => startReply(thread.id)}
-								>
-									{m.comment_btn_reply()}
-								</button>
-							</div>
-						{/if}
-					{/if}
+				<div class="mt-3 ml-6 border-l-2 border-line pl-4">
+					{@render commentEntry(reply, thread.id, ri === thread.replies.length - 1)}
 				</div>
 			{/each}
 
-			<!-- Reply textarea (shown when replyingTo === thread.id) -->
+			<!-- Reply compose box -->
 			{#if replyingTo === thread.id}
 				<div class="mt-3 ml-6 flex flex-col gap-2">
 					<textarea
-						class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+						class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 						rows={3}
 						placeholder={m.comment_placeholder()}
 						bind:value={replyText}
 					></textarea>
 					<div class="flex items-center gap-3">
 						<button
-							class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
+							class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
 							disabled={posting}
 							onclick={() => postReply(thread.id)}
 						>
 							{m.comment_btn_post()}
 						</button>
 						<button
-							class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 							onclick={cancelReply}
 						>
 							{m.btn_cancel()}
@@ -369,19 +309,19 @@ onMount(() => {
 		</div>
 	{/each}
 
-	<!-- New top-level comment textarea -->
+	<!-- New top-level comment -->
 	{#if canComment}
-		<div class={comments.length > 0 ? 'border-t border-brand-sand pt-4' : ''}>
+		<div class={comments.length > 0 ? 'border-t border-line pt-4' : ''}>
 			<div class="flex flex-col gap-2">
 				<textarea
-					class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+					class="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 					rows={3}
 					placeholder={m.comment_placeholder()}
 					bind:value={newText}
 				></textarea>
 				<div>
 					<button
-						class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
+						class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
 						disabled={posting || !newText.trim()}
 						onclick={postComment}
 					>

frontend/src/lib/components/CommentThread.svelte.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import CommentThread from './CommentThread.svelte';
+import type { Comment } from '$lib/types';
+
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+});
+
+function makeComment(id: string, content = 'Hello'): Comment {
+	return {
+		id,
+		authorId: 'user-1',
+		authorName: 'Alice',
+		content,
+		createdAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString(),
+		replies: []
+	};
+}
+
+const baseProps = {
+	documentId: 'doc-1',
+	canComment: true,
+	currentUserId: 'user-1',
+	canAdmin: false
+};
+
+describe('CommentThread – empty state', () => {
+	it('shows empty state hint when there are no comments', async () => {
+		render(CommentThread, { ...baseProps, initialComments: [] });
+		await expect
+			.element(page.getByText('Noch keine Kommentare – starte die Diskussion!'))
+			.toBeInTheDocument();
+	});
+
+	it('does not show empty state hint when comments exist', async () => {
+		render(CommentThread, { ...baseProps, initialComments: [makeComment('c-1')] });
+		await expect
+			.element(page.getByText('Noch keine Kommentare – starte die Diskussion!'))
+			.not.toBeInTheDocument();
+	});
+});
+
+describe('CommentThread – onCountChange', () => {
+	it('calls onCountChange with initial SSR count on mount', async () => {
+		const onCountChange = vi.fn();
+		render(CommentThread, {
+			...baseProps,
+			initialComments: [makeComment('c-1'), makeComment('c-2')],
+			onCountChange
+		});
+		expect(onCountChange).toHaveBeenCalledWith(2);
+	});
+
+	it('calls onCountChange with 0 when no initial comments', async () => {
+		const onCountChange = vi.fn();
+		render(CommentThread, { ...baseProps, initialComments: [], onCountChange });
+		expect(onCountChange).toHaveBeenCalledWith(0);
+	});
+
+	it('counts replies in the total', async () => {
+		const onCountChange = vi.fn();
+		const comment = { ...makeComment('c-1'), replies: [makeComment('r-1') as never] };
+		render(CommentThread, { ...baseProps, initialComments: [comment], onCountChange });
+		expect(onCountChange).toHaveBeenCalledWith(2);
+	});
+});

frontend/src/lib/components/DocumentBottomPanel.svelte

@@ -4,27 +4,7 @@ import PanelMetadata from './PanelMetadata.svelte';
 import PanelTranscription from './PanelTranscription.svelte';
 import PanelDiscussion from './PanelDiscussion.svelte';
 import PanelHistory from './PanelHistory.svelte';
-
-type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
-
-type CommentReply = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-};
-
-type Comment = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	replies: CommentReply[];
-};
+import type { Comment, DocumentPanelTab } from '$lib/types';
 
 type Doc = {
 	id: string;
@@ -47,9 +27,7 @@ type Props = {
 	canAdmin: boolean;
 	open: boolean;
 	height: number;
-	activeTab: Tab;
-	activeAnnotationId: string | null;
-	onAnnotationCommentCountChange?: (annotationId: string, count: number) => void;
+	activeTab: DocumentPanelTab;
 };
 
 let {
@@ -60,23 +38,25 @@ let {
 	canAdmin,
 	open = $bindable(),
 	height = $bindable(),
-	activeTab = $bindable(),
-	activeAnnotationId,
-	onAnnotationCommentCountChange
+	activeTab = $bindable()
 }: Props = $props();
 
 const MIN_HEIGHT = 52; // drag handle (8px) + tab bar (~44px)
-const DEFAULT_HEIGHT = 320;
 
 let isDragging = $state(false);
 let dragStartY = 0;
 let dragStartHeight = 0;
 
-function openTab(tab: Tab) {
+function fullHeight() {
+	const topbar = document.querySelector('[data-topbar]');
+	return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
+}
+
+function openTab(tab: DocumentPanelTab) {
 	activeTab = tab;
 	if (!open) {
 		open = true;
-		if (height <= MIN_HEIGHT) height = DEFAULT_HEIGHT;
+		if (height <= MIN_HEIGHT) height = fullHeight();
 	}
 }
 
@@ -95,14 +75,14 @@ function onDragMove(e: PointerEvent) {
 	if (!isDragging) return;
 	const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel
 	const newHeight = dragStartHeight + delta;
-	const maxHeight = Math.floor(window.innerHeight * 0.8);
+	const maxHeight = fullHeight();
 
 	if (newHeight <= MIN_HEIGHT + 20) {
 		// collapsed past threshold → close
 		open = false;
 	} else {
 		open = true;
-		height = Math.max(DEFAULT_HEIGHT / 4, Math.min(newHeight, maxHeight));
+		height = Math.max(80, Math.min(newHeight, maxHeight));
 	}
 }
 
@@ -110,7 +90,7 @@ function onDragEnd() {
 	isDragging = false;
 }
 
-const tabs: { id: Tab; label: () => string }[] = [
+const tabs: { id: DocumentPanelTab; label: () => string }[] = [
 	{ id: 'metadata', label: m.doc_panel_tab_metadata },
 	{ id: 'transcription', label: m.doc_panel_tab_transcription },
 	{ id: 'discussion', label: m.doc_panel_tab_discussion },
@@ -118,16 +98,22 @@ const tabs: { id: Tab; label: () => string }[] = [
 ];
 
 const panelHeight = $derived(open ? height : MIN_HEIGHT);
+
+let discussionCount = $state((() => comments.reduce((s, c) => s + 1 + c.replies.length, 0))());
+
+function handleCountChange(count: number) {
+	discussionCount = count;
+}
 </script>
 
 <div
-	class="fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t border-brand-sand bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
+	class="fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t border-line bg-surface shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
 	style="height: {panelHeight}px"
 	data-testid="bottom-panel"
 >
 	<!-- Drag handle -->
 	<div
-		class="flex h-2 shrink-0 cursor-ns-resize items-center justify-center bg-white"
+		class="flex h-2 shrink-0 cursor-ns-resize items-center justify-center bg-surface"
 		style="touch-action: none"
 		role="separator"
 		aria-orientation="horizontal"
@@ -137,20 +123,27 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 		onpointerup={onDragEnd}
 		onpointercancel={onDragEnd}
 	>
-		<div class="h-1 w-12 rounded-full bg-gray-200"></div>
+		<div class="h-1 w-12 rounded-full bg-line"></div>
 	</div>
 
 	<!-- Tab bar -->
-	<div class="flex shrink-0 items-center border-b border-brand-sand bg-white px-4">
+	<div class="flex shrink-0 items-center border-b border-line bg-surface px-4">
 		{#each tabs as tab (tab.id)}
 			<button
 				onclick={() => openTab(tab.id)}
 				class="mr-1 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open
-					? 'border-b-2 border-brand-navy text-brand-navy'
-					: 'text-gray-400 hover:text-brand-navy'}"
+					? 'border-b-2 border-primary text-ink'
+					: 'text-ink-3 hover:text-ink'}"
 				aria-pressed={activeTab === tab.id && open}
 			>
 				{tab.label()}
+				{#if tab.id === 'discussion'}
+					<span
+						data-testid="discussion-count-badge"
+						class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 font-sans text-[10px] font-bold text-primary-fg"
+						>{discussionCount}</span
+					>
+				{/if}
 			</button>
 		{/each}
 
@@ -162,7 +155,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 				onclick={closePanel}
 				data-testid="panel-close-btn"
 				aria-label="Panel schließen"
-				class="rounded p-1.5 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+				class="rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
 			>
 				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -181,12 +174,11 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 			{:else if activeTab === 'discussion'}
 				<PanelDiscussion
 					documentId={doc.id}
-					activeAnnotationId={activeAnnotationId}
 					initialComments={comments}
 					canComment={canComment}
 					currentUserId={currentUserId}
 					canAdmin={canAdmin}
-					onAnnotationCommentCountChange={onAnnotationCommentCountChange}
+					onCountChange={handleCountChange}
 				/>
 			{:else if activeTab === 'history'}
 				<PanelHistory documentId={doc.id} />

frontend/src/lib/components/DocumentBottomPanel.svelte.spec.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import DocumentBottomPanel from './DocumentBottomPanel.svelte';
+import type { Comment } from '$lib/types';
+
+afterEach(cleanup);
+
+function makeComment(id: string): Comment {
+	return {
+		id,
+		authorId: 'user-1',
+		authorName: 'Alice',
+		content: 'Hello',
+		createdAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString(),
+		replies: []
+	};
+}
+
+const doc = { id: 'doc-1', title: 'Test' };
+
+const baseProps = {
+	doc,
+	canComment: true,
+	currentUserId: 'user-1',
+	canAdmin: false,
+	height: 300,
+	activeTab: 'discussion' as const
+};
+
+describe('DocumentBottomPanel – discussion badge', () => {
+	it('always shows a badge on the Discussion tab', async () => {
+		render(DocumentBottomPanel, { ...baseProps, comments: [], open: true });
+		await expect.element(page.getByTestId('discussion-count-badge')).toBeInTheDocument();
+		await expect.element(page.getByTestId('discussion-count-badge')).toHaveTextContent('0');
+	});
+
+	it('shows the correct count when comments exist', async () => {
+		render(DocumentBottomPanel, {
+			...baseProps,
+			comments: [makeComment('c-1'), makeComment('c-2')],
+			open: true
+		});
+		await expect.element(page.getByTestId('discussion-count-badge')).toHaveTextContent('2');
+	});
+});

frontend/src/lib/components/DocumentTopBar.svelte

@@ -58,16 +58,17 @@ const compactMeta = $derived.by(() => {
 </script>
 
 <div
-	class="z-20 flex shrink-0 items-center justify-between border-b border-brand-sand bg-white px-6 py-3 shadow-sm"
+	class="z-20 flex shrink-0 items-center justify-between border-b border-line bg-surface px-6 py-3 shadow-sm"
+	data-topbar
 >
 	<!-- Left: back + title -->
 	<div class="flex min-w-0 items-center gap-4 overflow-hidden">
 		<a
 			href="/"
-			class="group flex shrink-0 items-center gap-2 font-sans text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
+			class="group flex shrink-0 items-center gap-2 font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
 		>
 			<div
-				class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-sand transition-colors group-hover:bg-brand-mint"
+				class="flex h-8 w-8 items-center justify-center rounded-full bg-canvas transition-colors group-hover:bg-accent"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -79,15 +80,15 @@ const compactMeta = $derived.by(() => {
 			<span class="hidden sm:inline">{m.btn_back()}</span>
 		</a>
 
-		<div class="min-w-0 border-l border-gray-200 pl-4">
+		<div class="min-w-0 border-l border-line pl-4">
 			<h1
-				class="truncate font-serif text-base leading-tight text-brand-navy"
+				class="truncate font-serif text-base leading-tight text-ink"
 				title={doc.title ?? doc.originalFilename ?? ''}
 			>
 				{doc.title || doc.originalFilename}
 			</h1>
 			{#if compactMeta}
-				<p class="truncate font-sans text-xs text-gray-500" title={compactMeta}>
+				<p class="truncate font-sans text-xs text-ink-2" title={compactMeta}>
 					{compactMeta}
 				</p>
 			{/if}
@@ -100,10 +101,16 @@ const compactMeta = $derived.by(() => {
 			<button
 				onclick={() => (annotateMode = !annotateMode)}
 				aria-label={annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
-				class="rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
-					? 'bg-brand-navy text-white'
-					: 'border border-brand-navy text-brand-navy hover:bg-brand-navy hover:text-white'}"
+				class="flex items-center gap-1.5 rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
+					? 'bg-primary text-white'
+					: 'border border-primary text-ink hover:bg-primary hover:text-white'}"
 			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4 {annotateMode ? 'invert' : ''}"
+				/>
 				{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
 			</button>
 		{/if}
@@ -111,7 +118,7 @@ const compactMeta = $derived.by(() => {
 		{#if canWrite}
 			<a
 				href="/documents/{doc.id}/edit"
-				class="flex items-center gap-2 rounded border border-brand-navy bg-transparent px-3 py-1.5 text-xs font-medium text-brand-navy transition hover:bg-brand-navy hover:text-white"
+				class="flex items-center gap-2 rounded border border-primary bg-transparent px-3 py-1.5 text-xs font-medium text-ink transition hover:bg-primary hover:text-white"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
@@ -127,7 +134,7 @@ const compactMeta = $derived.by(() => {
 			<a
 				href={fileUrl}
 				download={doc.originalFilename}
-				class="rounded border border-transparent bg-brand-sand/50 p-1.5 text-brand-navy transition hover:bg-brand-mint"
+				class="rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent"
 				title={m.doc_download_title()}
 			>
 				<img

frontend/src/lib/components/DocumentViewer.svelte

@@ -6,6 +6,7 @@ type Doc = {
 	id: string;
 	filePath?: string | null;
 	contentType?: string | null;
+	fileHash?: string | null;
 };
 
 type Props = {
@@ -15,6 +16,7 @@ type Props = {
 	error: string;
 	annotateMode: boolean;
 	activeAnnotationId: string | null;
+	activeAnnotationPage: number | null;
 	onAnnotationClick: (id: string) => void;
 };
 
@@ -25,13 +27,14 @@ let {
 	error,
 	annotateMode = $bindable(),
 	activeAnnotationId = $bindable(),
+	activeAnnotationPage = $bindable(),
 	onAnnotationClick
 }: Props = $props();
 </script>
 
-<div class="absolute inset-0 bg-[#2A2A2A]">
+<div class="absolute inset-0 bg-pdf-bg">
 	{#if isLoading}
-		<div class="flex h-full flex-col items-center justify-center text-brand-mint">
+		<div class="flex h-full flex-col items-center justify-center text-accent">
 			<svg
 				class="mb-4 h-8 w-8 animate-spin"
 				xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +52,7 @@ let {
 			<span class="font-sans text-sm tracking-wide">{m.doc_loading()}</span>
 		</div>
 	{:else if error}
-		<div class="flex h-full flex-col items-center justify-center px-4 text-center text-gray-400">
+		<div class="flex h-full flex-col items-center justify-center px-4 text-center text-ink-3">
 			<p class="mb-2 font-serif">{error}</p>
 			{#if doc.filePath}
 				<a
@@ -62,8 +65,8 @@ let {
 			{/if}
 		</div>
 	{:else if !doc.filePath}
-		<div class="flex h-full flex-col items-center justify-center text-gray-400">
-			<div class="mb-6 rounded-full bg-white/5 p-8">
+		<div class="flex h-full flex-col items-center justify-center text-ink-3">
+			<div class="mb-6 rounded-full bg-surface/5 p-8">
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
 					alt=""
@@ -79,7 +82,9 @@ let {
 			documentId={doc.id}
 			bind:annotateMode={annotateMode}
 			bind:activeAnnotationId={activeAnnotationId}
+			bind:activeAnnotationPage={activeAnnotationPage}
 			onAnnotationClick={onAnnotationClick}
+			documentFileHash={doc.fileHash ?? null}
 		/>
 	{:else if fileUrl}
 		<div class="flex h-full w-full items-center justify-center overflow-auto p-8">

frontend/src/lib/components/ExpandableText.svelte

@@ -18,14 +18,14 @@ $effect(() => {
 	<div
 		bind:this={el}
 		style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
-		class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
+		class="rounded border border-line bg-muted p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-ink"
 	>
 		{text}
 	</div>
 	{#if isClamped || expanded}
 		<button
 			onclick={() => (expanded = !expanded)}
-			class="mt-2 font-sans text-xs text-gray-400 transition hover:text-brand-navy"
+			class="mt-2 font-sans text-xs text-ink-3 transition hover:text-ink"
 		>
 			{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
 		</button>

frontend/src/lib/components/PanelDiscussion.svelte

@@ -1,85 +1,27 @@
 <script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
 import CommentThread from './CommentThread.svelte';
-
-type CommentReply = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-};
-
-type Comment = {
-	id: string;
-	authorId: string | null;
-	authorName: string;
-	content: string;
-	createdAt: string;
-	updatedAt: string;
-	replies: CommentReply[];
-};
+import type { Comment } from '$lib/types';
 
 type Props = {
 	documentId: string;
-	activeAnnotationId: string | null;
 	initialComments: Comment[];
 	canComment: boolean;
 	currentUserId: string | null;
 	canAdmin: boolean;
-	onAnnotationCommentCountChange?: (annotationId: string, count: number) => void;
+	onCountChange?: (count: number) => void;
 };
 
-let {
-	documentId,
-	activeAnnotationId,
-	initialComments,
-	canComment,
-	currentUserId,
-	canAdmin,
-	onAnnotationCommentCountChange
-}: Props = $props();
+let { documentId, initialComments, canComment, currentUserId, canAdmin, onCountChange }: Props =
+	$props();
 </script>
 
-<div class="space-y-8 p-6">
-	<!-- Annotation thread (shown when an annotation is active) -->
-	{#if activeAnnotationId}
-		<div>
-			<h4
-				class="mb-3 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
-			>
-				{m.doc_panel_annotation_thread_title()}
-			</h4>
-			{#key activeAnnotationId}
-				<CommentThread
-					documentId={documentId}
-					annotationId={activeAnnotationId}
-					canComment={canComment}
-					currentUserId={currentUserId}
-					canAdmin={canAdmin}
-					loadOnMount={true}
-					onCountChange={(count) => onAnnotationCommentCountChange?.(activeAnnotationId, count)}
-				/>
-			{/key}
-		</div>
-	{/if}
-
-	<!-- General document discussion -->
-	<div>
-		{#if activeAnnotationId}
-			<h4
-				class="mb-3 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
-			>
-				{m.comment_section_title()}
-			</h4>
-		{/if}
-		<CommentThread
-			documentId={documentId}
-			initialComments={initialComments}
-			canComment={canComment}
-			currentUserId={currentUserId}
-			canAdmin={canAdmin}
-		/>
-	</div>
+<div class="flex-1 overflow-y-auto p-6">
+	<CommentThread
+		documentId={documentId}
+		initialComments={initialComments}
+		canComment={canComment}
+		currentUserId={currentUserId}
+		canAdmin={canAdmin}
+		onCountChange={onCountChange}
+	/>
 </div>

frontend/src/lib/components/PanelHistory.svelte

@@ -270,11 +270,11 @@ $effect(() => {
 
 <div class="space-y-4 p-6">
 	{#if historyLoading}
-		<p class="font-sans text-xs text-gray-400">{m.history_loading()}</p>
+		<p class="font-sans text-xs text-ink-3">{m.history_loading()}</p>
 	{:else if !historyLoaded}
 		<!-- initial state before effect runs — show nothing -->
 	{:else if versions.length === 0}
-		<p class="font-serif text-sm text-gray-400 italic">{m.history_empty()}</p>
+		<p class="font-serif text-sm text-ink-3 italic">{m.history_empty()}</p>
 	{:else}
 		<!-- Compare mode toggle -->
 		<div class="flex justify-end">
@@ -286,8 +286,8 @@ $effect(() => {
 					selectedVersionId = null;
 				}}
 				class="font-sans text-xs font-medium transition {compareMode
-					? 'text-brand-navy underline'
-					: 'text-gray-400 hover:text-brand-navy'}"
+					? 'text-ink underline'
+					: 'text-ink-3 hover:text-ink'}"
 			>
 				{m.history_compare_mode()}
 			</button>
@@ -296,13 +296,13 @@ $effect(() => {
 		{#if compareMode}
 			<div class="space-y-2">
 				<div>
-					<label for="compare-a" class="mb-1 block font-sans text-[10px] text-gray-400 uppercase"
+					<label for="compare-a" class="mb-1 block font-sans text-[10px] text-ink-3 uppercase"
 						>{m.history_compare_select_a()}</label
 					>
 					<select
 						id="compare-a"
 						bind:value={compareA}
-						class="w-full rounded border border-brand-sand bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
@@ -311,13 +311,13 @@ $effect(() => {
 					</select>
 				</div>
 				<div>
-					<label for="compare-b" class="mb-1 block font-sans text-[10px] text-gray-400 uppercase"
+					<label for="compare-b" class="mb-1 block font-sans text-[10px] text-ink-3 uppercase"
 						>{m.history_compare_select_b()}</label
 					>
 					<select
 						id="compare-b"
 						bind:value={compareB}
-						class="w-full rounded border border-brand-sand bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
@@ -328,38 +328,109 @@ $effect(() => {
 				<button
 					onclick={applyCompare}
 					disabled={!compareA || !compareB || compareA === compareB}
-					class="w-full rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white transition hover:bg-brand-navy/80 disabled:cursor-not-allowed disabled:opacity-40"
+					class="w-full rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white transition hover:bg-primary/80 disabled:cursor-not-allowed disabled:opacity-40"
 				>
 					{m.history_compare_apply()}
 				</button>
 			</div>
+
+			<!-- Diff panel for compare mode -->
+			{#if diffLoading}
+				<p class="font-sans text-xs text-ink-3">{m.history_loading()}</p>
+			{:else if noDiff}
+				<div
+					data-testid="history-diff"
+					class="rounded-sm border border-line bg-surface p-4 font-serif text-sm text-ink-3 italic"
+				>
+					{m.history_diff_no_changes()}
+				</div>
+			{:else if diffEntries.length > 0}
+				<div
+					data-testid="history-diff"
+					class="space-y-4 rounded-sm border border-line bg-surface p-4"
+				>
+					{#each diffEntries as entry (entry.field)}
+						<div>
+							<span
+								class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-ink-3 uppercase"
+								>{entry.label}</span
+							>
+							{#if entry.kind === 'text'}
+								<p class="font-serif text-sm leading-relaxed">
+									{#each entry.parts as part, partIdx (partIdx)}
+										{#if part.added}
+											<span class="bg-green-50 text-green-700">{part.value}</span>
+										{:else if part.removed}
+											<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
+										{:else}
+											<span>{part.value}</span>
+										{/if}
+									{/each}
+								</p>
+							{:else if entry.kind === 'scalar'}
+								<div class="flex items-center gap-2 font-serif text-sm">
+									<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
+									<svg
+										class="h-3 w-3 flex-shrink-0 text-ink-3"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										aria-hidden="true"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+									<span class="text-green-700">{entry.newVal || '—'}</span>
+								</div>
+							{:else if entry.kind === 'relation'}
+								<div class="flex flex-wrap gap-1.5">
+									{#each entry.removed as item (item)}
+										<span
+											class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
+											>{item}</span
+										>
+									{/each}
+									{#each entry.added as item (item)}
+										<span
+											class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
+											>{item}</span
+										>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
 		{:else}
-			<!-- Version list -->
-			<ul class="divide-y divide-brand-sand">
+			<!-- Version list with inline diff below each selected item -->
+			<ul class="divide-brand-sand divide-y">
 				{#each versions as v, i (v.id)}
 					<li>
 						<button
 							onclick={() => selectVersion(v.id)}
 							data-testid="history-version"
-							class="w-full py-2 text-left transition hover:bg-brand-sand/30 {selectedVersionId ===
+							class="w-full py-2 text-left transition hover:bg-muted {selectedVersionId ===
 							v.id
-								? 'border-l-2 border-brand-mint pl-2'
+								? 'border-l-2 border-accent pl-2'
 								: 'pl-0'}"
 						>
 							<div class="flex items-baseline justify-between gap-2">
-								<span class="font-sans text-xs font-medium text-brand-navy">
+								<span class="font-sans text-xs font-medium text-ink">
 									Version {i + 1}
 								</span>
-								<span class="font-sans text-[10px] text-gray-400">
+								<span class="font-sans text-[10px] text-ink-3">
 									{formatDateTime(v.savedAt)}
 								</span>
 							</div>
-							<span class="font-sans text-[11px] text-gray-500">{v.editorName}</span>
+							<span class="font-sans text-[11px] text-ink-2">{v.editorName}</span>
 							{#if v.changedFields && v.changedFields.length > 0}
 								<div class="mt-1 flex flex-wrap gap-1">
 									{#each v.changedFields as field (field)}
 										<span
-											class="rounded bg-brand-sand/50 px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-gray-500 uppercase"
+											class="rounded bg-muted px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-ink-2 uppercase"
 										>
 											{fieldLabels[field] ? fieldLabels[field]() : field}
 										</span>
@@ -367,80 +438,82 @@ $effect(() => {
 								</div>
 							{/if}
 						</button>
+
+						<!-- Diff shown inline below the selected version -->
+						{#if selectedVersionId === v.id}
+							{#if diffLoading}
+								<p class="pb-3 pl-2 font-sans text-xs text-ink-3">{m.history_loading()}</p>
+							{:else if noDiff}
+								<div
+									data-testid="history-diff"
+									class="mb-2 rounded-sm border border-line bg-surface p-4 font-serif text-sm text-ink-3 italic"
+								>
+									{m.history_diff_no_changes()}
+								</div>
+							{:else if diffEntries.length > 0}
+								<div
+									data-testid="history-diff"
+									class="mb-2 space-y-4 rounded-sm border border-line bg-surface p-4"
+								>
+									{#each diffEntries as entry (entry.field)}
+										<div>
+											<span
+												class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-ink-3 uppercase"
+												>{entry.label}</span
+											>
+											{#if entry.kind === 'text'}
+												<p class="font-serif text-sm leading-relaxed">
+													{#each entry.parts as part, partIdx (partIdx)}
+														{#if part.added}
+															<span class="bg-green-50 text-green-700">{part.value}</span>
+														{:else if part.removed}
+															<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
+														{:else}
+															<span>{part.value}</span>
+														{/if}
+													{/each}
+												</p>
+											{:else if entry.kind === 'scalar'}
+												<div class="flex items-center gap-2 font-serif text-sm">
+													<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
+													<svg
+														class="h-3 w-3 flex-shrink-0 text-ink-3"
+														viewBox="0 0 20 20"
+														fill="currentColor"
+														aria-hidden="true"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+													<span class="text-green-700">{entry.newVal || '—'}</span>
+												</div>
+											{:else if entry.kind === 'relation'}
+												<div class="flex flex-wrap gap-1.5">
+													{#each entry.removed as item (item)}
+														<span
+															class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
+															>{item}</span
+														>
+													{/each}
+													{#each entry.added as item (item)}
+														<span
+															class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
+															>{item}</span
+														>
+													{/each}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							{/if}
+						{/if}
 					</li>
 				{/each}
 			</ul>
 		{/if}
-
-		<!-- Diff panel -->
-		{#if diffLoading}
-			<p class="font-sans text-xs text-gray-400">{m.history_loading()}</p>
-		{:else if noDiff}
-			<div
-				data-testid="history-diff"
-				class="rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
-			>
-				{m.history_diff_no_changes()}
-			</div>
-		{:else if diffEntries.length > 0}
-			<div
-				data-testid="history-diff"
-				class="space-y-4 rounded-sm border border-brand-sand bg-white p-4"
-			>
-				{#each diffEntries as entry (entry.field)}
-					<div>
-						<span
-							class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-gray-400 uppercase"
-							>{entry.label}</span
-						>
-						{#if entry.kind === 'text'}
-							<p class="font-serif text-sm leading-relaxed">
-								{#each entry.parts as part, partIdx (partIdx)}
-									{#if part.added}
-										<span class="bg-green-50 text-green-700">{part.value}</span>
-									{:else if part.removed}
-										<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
-									{:else}
-										<span>{part.value}</span>
-									{/if}
-								{/each}
-							</p>
-						{:else if entry.kind === 'scalar'}
-							<div class="flex items-center gap-2 font-serif text-sm">
-								<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
-								<svg
-									class="h-3 w-3 flex-shrink-0 text-gray-400"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									aria-hidden="true"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-								<span class="text-green-700">{entry.newVal || '—'}</span>
-							</div>
-						{:else if entry.kind === 'relation'}
-							<div class="flex flex-wrap gap-1.5">
-								{#each entry.removed as item (item)}
-									<span
-										class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
-										>{item}</span
-									>
-								{/each}
-								{#each entry.added as item (item)}
-									<span
-										class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
-										>{item}</span
-									>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/if}
 	{/if}
 </div>

frontend/src/lib/components/PanelMetadata.svelte

@@ -21,14 +21,14 @@ let { doc }: { doc: Doc } = $props();
 	<!-- DETAILS GROUP -->
 	<div>
 		<h3
-			class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
+			class="mb-4 border-b border-line pb-2 font-sans text-xs font-bold tracking-widest text-ink uppercase"
 		>
 			{m.doc_section_details()}
 		</h3>
 		<div class="space-y-5">
 			<!-- Date -->
 			<div class="flex items-start">
-				<span class="mt-0.5 w-8 text-brand-mint">
+				<span class="mt-0.5 w-8 text-accent">
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
 						alt=""
@@ -37,16 +37,16 @@ let { doc }: { doc: Doc } = $props();
 					/>
 				</span>
 				<div>
-					<span class="block font-serif text-lg text-brand-navy">
+					<span class="block font-serif text-lg text-ink">
 						{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 					</span>
-					<span class="font-sans text-xs text-gray-500">{m.doc_label_document_date()}</span>
+					<span class="font-sans text-xs text-ink-2">{m.doc_label_document_date()}</span>
 				</div>
 			</div>
 
 			<!-- Creation Location -->
 			<div class="flex items-start">
-				<span class="mt-0.5 w-8 text-brand-mint">
+				<span class="mt-0.5 w-8 text-accent">
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
 						alt=""
@@ -55,17 +55,17 @@ let { doc }: { doc: Doc } = $props();
 					/>
 				</span>
 				<div>
-					<span class="block font-serif text-lg text-brand-navy">
+					<span class="block font-serif text-lg text-ink">
 						{doc.location ? doc.location : '—'}
 					</span>
-					<span class="font-sans text-xs text-gray-500">{m.doc_label_creation_location()}</span>
+					<span class="font-sans text-xs text-ink-2">{m.doc_label_creation_location()}</span>
 				</div>
 			</div>
 
 			<!-- Physical Archive Location -->
 			{#if doc.documentLocation}
 				<div class="flex items-start">
-					<span class="mt-0.5 w-8 text-brand-mint">
+					<span class="mt-0.5 w-8 text-accent">
 						<img
 							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Folder-MD.svg"
 							alt=""
@@ -74,10 +74,10 @@ let { doc }: { doc: Doc } = $props();
 						/>
 					</span>
 					<div>
-						<span class="block font-serif text-lg text-brand-navy">
+						<span class="block font-serif text-lg text-ink">
 							{doc.documentLocation}
 						</span>
-						<span class="font-sans text-xs text-gray-500"
+						<span class="font-sans text-xs text-ink-2"
 							>{m.doc_label_archive_location_original()}</span
 						>
 					</div>
@@ -87,7 +87,7 @@ let { doc }: { doc: Doc } = $props();
 			<!-- Tags -->
 			{#if doc.tags && doc.tags.length > 0}
 				<div class="flex items-start">
-					<span class="mt-0.5 w-8 text-brand-mint">
+					<span class="mt-0.5 w-8 text-accent">
 						<img
 							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Bookmark/Bookmark-Outline-MD.svg"
 							alt=""
@@ -100,14 +100,14 @@ let { doc }: { doc: Doc } = $props();
 							{#each doc.tags as tag (tag.id)}
 								<a
 									href="/?tag={encodeURIComponent(tag.name)}"
-									class="inline-flex items-center rounded bg-brand-sand/50 px-2 py-0.5 text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
+									class="inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-white"
 									title={m.doc_tag_filter_title({ name: tag.name })}
 								>
 									{tag.name}
 								</a>
 							{/each}
 						</div>
-						<span class="font-sans text-xs text-gray-500">{m.form_label_tags()}</span>
+						<span class="font-sans text-xs text-ink-2">{m.form_label_tags()}</span>
 					</div>
 				</div>
 			{/if}
@@ -117,61 +117,59 @@ let { doc }: { doc: Doc } = $props();
 	<!-- PERSONEN GROUP -->
 	<div>
 		<h3
-			class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
+			class="mb-4 border-b border-line pb-2 font-sans text-xs font-bold tracking-widest text-ink uppercase"
 		>
 			{m.doc_section_persons()}
 		</h3>
 
 		<div class="mb-6">
-			<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
-				>{m.form_label_sender()}</span
-			>
+			<span class="mb-2 block font-sans text-xs text-ink-3 uppercase">{m.form_label_sender()}</span>
 			{#if doc.sender}
 				<a
 					href="/persons/{doc.sender.id}"
-					class="group block rounded border border-brand-sand bg-brand-sand/20 p-3 transition hover:border-brand-mint hover:bg-brand-mint/10"
+					class="group block rounded border border-line bg-muted p-3 transition hover:border-accent hover:bg-accent/10"
 				>
 					<div class="flex items-center gap-3">
 						<div
-							class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-navy font-serif text-sm text-white"
+							class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-serif text-sm text-white"
 						>
 							{doc.sender.firstName[0]}{doc.sender.lastName[0]}
 						</div>
 						<div>
 							<p
-								class="font-serif text-brand-navy decoration-brand-mint underline-offset-2 group-hover:underline"
+								class="font-serif text-ink decoration-brand-mint underline-offset-2 group-hover:underline"
 							>
 								{doc.sender.firstName}
 								{doc.sender.lastName}
 							</p>
 							{#if doc.sender.alias}
-								<p class="font-sans text-xs text-gray-500">{doc.sender.alias}</p>
+								<p class="font-sans text-xs text-ink-2">{doc.sender.alias}</p>
 							{/if}
 						</div>
 					</div>
 				</a>
 			{:else}
-				<span class="font-serif text-sm text-gray-400 italic">{m.doc_sender_not_specified()}</span>
+				<span class="font-serif text-sm text-ink-3 italic">{m.doc_sender_not_specified()}</span>
 			{/if}
 		</div>
 
 		<div>
-			<span class="mb-2 block font-sans text-xs text-gray-400 uppercase"
+			<span class="mb-2 block font-sans text-xs text-ink-3 uppercase"
 				>{m.form_label_receivers()}</span
 			>
 			{#if doc.receivers && doc.receivers.length > 0}
 				<div class="space-y-2">
 					{#each doc.receivers as receiver (receiver.id)}
 						<div
-							class="group flex items-center justify-between rounded border border-brand-sand bg-white p-3 transition hover:border-brand-navy"
+							class="group flex items-center justify-between rounded border border-line bg-surface p-3 transition hover:border-primary"
 						>
 							<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
 								<div
-									class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-100 font-serif text-xs text-gray-500"
+									class="flex h-6 w-6 items-center justify-center rounded-full bg-muted font-serif text-xs text-ink-2"
 								>
 									{receiver.firstName[0]}{receiver.lastName[0]}
 								</div>
-								<span class="truncate font-serif text-sm text-brand-navy">
+								<span class="truncate font-serif text-sm text-ink">
 									{receiver.firstName}
 									{receiver.lastName}
 								</span>
@@ -180,7 +178,7 @@ let { doc }: { doc: Doc } = $props();
 							{#if doc.sender}
 								<a
 									href="/conversations?senderId={doc.sender.id}&receiverId={receiver.id}"
-									class="text-gray-300 transition hover:text-brand-mint"
+									class="text-ink-3 transition hover:text-accent"
 									title={m.doc_conversation_title()}
 								>
 									<img
@@ -195,7 +193,7 @@ let { doc }: { doc: Doc } = $props();
 					{/each}
 				</div>
 			{:else}
-				<span class="font-serif text-sm text-gray-400 italic">{m.doc_no_receivers()}</span>
+				<span class="font-serif text-sm text-ink-3 italic">{m.doc_no_receivers()}</span>
 			{/if}
 		</div>
 	</div>

frontend/src/lib/components/PanelTranscription.svelte

@@ -12,28 +12,24 @@ let { doc }: { doc: Doc } = $props();
 <div class="flex justify-center px-6 py-8">
 	<div class="w-full max-w-prose space-y-8">
 		{#if !doc.summary && !doc.transcription}
-			<p class="font-serif text-sm text-gray-400 italic">—</p>
+			<p class="font-serif text-sm text-ink-3 italic">—</p>
 		{/if}
 
 		{#if doc.summary}
 			<div>
-				<span
-					class="mb-3 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-3 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.doc_label_summary()}
 				</span>
-				<p class="font-serif text-base leading-relaxed text-brand-navy">{doc.summary}</p>
+				<p class="font-serif text-base leading-relaxed text-ink">{doc.summary}</p>
 			</div>
 		{/if}
 
 		{#if doc.transcription}
 			<div>
-				<span
-					class="mb-3 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-3 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.form_label_transcription()}
 				</span>
-				<p class="font-serif text-base leading-relaxed whitespace-pre-wrap text-brand-navy">
+				<p class="font-serif text-base leading-relaxed whitespace-pre-wrap text-ink">
 					{doc.transcription}
 				</p>
 			</div>

frontend/src/lib/components/PdfViewer.svelte

@@ -3,19 +3,25 @@ import { onMount } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist';
 import AnnotationLayer from './AnnotationLayer.svelte';
+import type { Annotation } from '$lib/types';
+import { m } from '$lib/paraglide/messages.js';
 
 let {
 	url,
 	documentId = '',
 	annotateMode = $bindable(false),
 	activeAnnotationId = $bindable<string | null>(null),
-	onAnnotationClick
+	activeAnnotationPage = $bindable<number | null>(null),
+	onAnnotationClick,
+	documentFileHash
 }: {
 	url: string;
 	documentId?: string;
 	annotateMode?: boolean;
 	activeAnnotationId?: string | null;
+	activeAnnotationPage?: number | null;
 	onAnnotationClick?: (id: string) => void;
+	documentFileHash?: string | null;
 } = $props();
 
 let pdfDoc = $state<PDFDocumentProxy | null>(null);
@@ -38,21 +44,15 @@ let textLayerInstance: { cancel: () => void } | null = null;
 let pdfjsLib: typeof import('pdfjs-dist') | null = null;
 let pdfjsReady = $state(false);
 
-type Annotation = {
-	id: string;
-	documentId: string;
-	pageNumber: number;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	color: string;
-	createdAt: string;
-};
-
 let annotations = $state<Annotation[]>([]);
 let annotateColor = $state('#ffff00');
 let commentCounts = new SvelteMap<string, number>();
+let showAnnotations = $state(true);
+
+const visibleAnnotations = $derived(
+	annotations.filter((a) => !a.fileHash || !documentFileHash || a.fileHash === documentFileHash)
+);
+const outdatedCount = $derived(annotations.length - visibleAnnotations.length);
 
 onMount(async () => {
 	// Dynamic import keeps pdfjs out of the SSR bundle entirely
@@ -213,6 +213,7 @@ async function handleAnnotationDraw(rect: { x: number; y: number; width: number;
 			const created: Annotation = await res.json();
 			annotations = [...annotations, created];
 			activeAnnotationId = created.id;
+			activeAnnotationPage = created.pageNumber;
 			onAnnotationClick?.(created.id);
 		}
 	} catch {
@@ -236,6 +237,8 @@ async function handleAnnotationDelete(annotationId: string) {
 
 function handleAnnotationClick(id: string) {
 	activeAnnotationId = id;
+	const ann = annotations.find((a) => a.id === id);
+	activeAnnotationPage = ann?.pageNumber ?? null;
 	onAnnotationClick?.(id);
 }
 
@@ -262,6 +265,10 @@ $effect(() => {
 	}
 });
 
+$effect(() => {
+	if (annotateMode) showAnnotations = true;
+});
+
 function prevPage() {
 	if (currentPage > 1) currentPage -= 1;
 }
@@ -280,28 +287,47 @@ function zoomOut() {
 </script>
 
 {#if !url}
-	<div class="flex h-full w-full items-center justify-center bg-[#2A2A2A] text-gray-400">
+	<div class="flex h-full w-full items-center justify-center bg-pdf-bg text-ink-3">
 		<p class="font-sans text-sm">Keine Datei vorhanden</p>
 	</div>
 {:else if error}
-	<div
-		class="flex h-full w-full flex-col items-center justify-center gap-3 bg-[#2A2A2A] text-gray-300"
-	>
+	<div class="flex h-full w-full flex-col items-center justify-center gap-3 bg-pdf-bg text-ink-3">
 		<p class="font-sans text-sm text-red-400">Fehler beim Laden der PDF</p>
 		<a
 			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="font-sans text-xs text-brand-mint underline hover:opacity-80"
+			class="font-sans text-xs text-accent underline hover:opacity-80"
 		>
 			Direkt öffnen
 		</a>
 	</div>
 {:else}
-	<div class="flex h-full w-full flex-col bg-[#2A2A2A]">
+	<div class="flex h-full w-full flex-col bg-pdf-bg">
+		{#if outdatedCount > 0}
+			<div
+				class="flex shrink-0 items-center gap-2 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2"
+				data-testid="annotation-outdated-notice"
+			>
+				<svg
+					class="h-4 w-4 shrink-0 text-amber-400"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+					/>
+				</svg>
+				<span class="font-sans text-xs text-amber-300">{m.annotation_outdated_notice()}</span>
+			</div>
+		{/if}
 		<!-- Controls -->
 		<div
-			class="flex shrink-0 items-center justify-between gap-2 border-b border-white/10 px-4 py-2"
+			class="flex shrink-0 items-center justify-between gap-2 border-b border-pdf-ctrl px-4 py-2"
 		>
 			<!-- Page navigation -->
 			<div class="flex items-center gap-2">
@@ -309,7 +335,7 @@ function zoomOut() {
 					onclick={prevPage}
 					disabled={currentPage <= 1}
 					aria-label="Zurück"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10 disabled:opacity-40"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10 disabled:opacity-40"
 				>
 					<svg
 						class="h-4 w-4"
@@ -323,7 +349,7 @@ function zoomOut() {
 				</button>
 
 				{#if totalPages > 0}
-					<span class="font-sans text-xs text-gray-300 tabular-nums">
+					<span class="font-sans text-xs text-ink-3 tabular-nums">
 						{currentPage} / {totalPages}
 					</span>
 				{/if}
@@ -332,7 +358,7 @@ function zoomOut() {
 					onclick={nextPage}
 					disabled={!pdfDoc || currentPage >= totalPages}
 					aria-label="Weiter"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10 disabled:opacity-40"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10 disabled:opacity-40"
 				>
 					<svg
 						class="h-4 w-4"
@@ -351,7 +377,7 @@ function zoomOut() {
 				<button
 					onclick={zoomOut}
 					aria-label="Verkleinern"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10"
 				>
 					<svg
 						class="h-4 w-4"
@@ -369,7 +395,7 @@ function zoomOut() {
 				<button
 					onclick={zoomIn}
 					aria-label="Vergrößern"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10"
 				>
 					<svg
 						class="h-4 w-4"
@@ -396,6 +422,44 @@ function zoomOut() {
 					title="Farbe wählen"
 				/>
 			{/if}
+			<!-- Annotation visibility toggle (shown when annotations exist) -->
+			{#if annotations.length > 0}
+				<button
+					onclick={() => (showAnnotations = !showAnnotations)}
+					aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+					class="flex items-center gap-1.5 rounded px-2 py-1 font-sans text-xs transition {showAnnotations
+						? 'text-ink-3 hover:bg-surface/10'
+						: 'bg-surface/10 text-accent'}"
+				>
+					<svg
+						class="h-3.5 w-3.5 shrink-0"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						{#if showAnnotations}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						{:else}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						{/if}
+					</svg>
+					{showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+				</button>
+			{/if}
 		</div>
 
 		<!-- PDF canvas area -->
@@ -419,15 +483,17 @@ function zoomOut() {
 							class="textLayer"
 							style="position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; line-height: 1;"
 						></div>
-						<AnnotationLayer
-							annotations={annotations.filter((a) => a.pageNumber === currentPage)}
-							canAnnotate={annotateMode}
-							color={annotateColor}
-							onDraw={handleAnnotationDraw}
-							onDelete={handleAnnotationDelete}
-							commentCounts={Object.fromEntries(commentCounts)}
-							onAnnotationClick={handleAnnotationClick}
-						/>
+						{#if showAnnotations}
+							<AnnotationLayer
+								annotations={visibleAnnotations.filter((a) => a.pageNumber === currentPage)}
+								canAnnotate={annotateMode}
+								color={annotateColor}
+								onDraw={handleAnnotationDraw}
+								onDelete={handleAnnotationDelete}
+								commentCounts={Object.fromEntries(commentCounts)}
+								onAnnotationClick={handleAnnotationClick}
+							/>
+						{/if}
 					</div>
 				</div>
 			{/if}

frontend/src/lib/components/PersonMultiSelect.svelte

@@ -80,18 +80,18 @@ function clickOutside(node: HTMLElement) {
 
 <div class="relative" use:clickOutside>
 	<div
-		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-white p-2 focus-within:border-brand-navy focus-within:ring-1 focus-within:ring-brand-navy"
+		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>
 		{#each selectedPersons as person (person.id)}
 			<span
-				class="inline-flex items-center gap-1 rounded bg-brand-sand/40 px-2 py-1 text-sm font-medium text-brand-navy"
+				class="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
 			>
 				{person.firstName}
 				{person.lastName}
 				<button
 					type="button"
 					onclick={() => removePerson(person.id)}
-					class="ml-0.5 text-brand-navy/50 hover:text-red-500 focus:outline-none"
+					class="ml-0.5 text-ink/50 hover:text-red-500 focus:outline-none"
 					aria-label={m.comp_multiselect_remove()}
 				>
 					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -121,14 +121,14 @@ function clickOutside(node: HTMLElement) {
 	{#if showDropdown && (results.length > 0 || loading)}
 		<div
 			style={dropdownStyle}
-			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
+			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
 		>
 			{#if loading}
-				<div class="p-2 text-sm text-gray-500">{m.comp_multiselect_loading()}</div>
+				<div class="p-2 text-sm text-ink-2">{m.comp_multiselect_loading()}</div>
 			{:else}
 				{#each results as person (person.id)}
 					<div
-						class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-brand-sand/30"
+						class="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"

frontend/src/lib/components/PersonTypeahead.svelte

@@ -9,6 +9,7 @@ interface Props {
 	label: string;
 	value?: string;
 	initialName?: string;
+	suggestedName?: string;
 	restrictToCorrespondentsOf?: string;
 	onchange?: (value: string) => void;
 }
@@ -18,12 +19,20 @@ let {
 	label,
 	value = $bindable(''),
 	initialName = '',
+	suggestedName = '',
 	restrictToCorrespondentsOf,
 	onchange
 }: Props = $props();
 
 let searchTerm = $state(initialName);
 
+$effect(() => {
+	const suggested = suggestedName;
+	if (suggested && !untrack(() => value)) {
+		searchTerm = suggested;
+	}
+});
+
 let results: Person[] = $state([]);
 let showDropdown = $state(false);
 let loading = $state(false);
@@ -111,7 +120,7 @@ function clickOutside(node: HTMLElement) {
 </script>
 
 <div class="relative" use:clickOutside>
-	<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+	<label for={name} class="block text-sm font-medium text-ink-2">{label}</label>
 
 	<input type="hidden" name={name} bind:value={value} />
 
@@ -123,19 +132,19 @@ function clickOutside(node: HTMLElement) {
 		oninput={handleInput}
 		onfocus={handleFocus}
 		placeholder={m.comp_typeahead_placeholder()}
-		class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+		class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent"
 	/>
 
 	{#if showDropdown && (results.length > 0 || loading)}
 		<div
-			class="ring-opacity-5 absolute top-full left-0 z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black focus:outline-none sm:text-sm"
+			class="ring-opacity-5 absolute top-full left-0 z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black focus:outline-none sm:text-sm"
 		>
 			{#if loading}
-				<div class="p-2 text-sm text-gray-500">{m.comp_typeahead_loading()}</div>
+				<div class="p-2 text-sm text-ink-2">{m.comp_typeahead_loading()}</div>
 			{:else}
 				{#each results as person (person.id)}
 					<div
-						class="relative cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-blue-100"
+						class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"

frontend/src/lib/components/TagInput.svelte

@@ -85,19 +85,17 @@ function clickOutside(node: HTMLElement) {
 <div class="w-full" use:clickOutside>
 	<!-- Tag Container -->
 	<div
-		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-white p-2 focus-within:border-brand-navy focus-within:ring-1 focus-within:ring-brand-navy"
+		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>
 		<!-- Render Selected Tags -->
 		{#each tags as tag, i (i)}
-			<span
-				class="flex items-center gap-1 rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy"
-			>
+			<span class="flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
 				{tag}
 				<button
 					type="button"
 					onclick={() => removeTag(i)}
 					aria-label={m.comp_taginput_remove()}
-					class="text-brand-navy/50 hover:text-red-500 focus:outline-none"
+					class="text-ink/50 hover:text-red-500 focus:outline-none"
 				>
 					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 						><path
@@ -130,16 +128,16 @@ function clickOutside(node: HTMLElement) {
 			<!-- Typeahead Dropdown -->
 			{#if showSuggestions && suggestions.length > 0}
 				<ul
-					class="absolute top-full left-0 z-50 mt-1 max-h-48 w-full overflow-y-auto rounded border border-gray-200 bg-white shadow-lg"
+					class="absolute top-full left-0 z-50 mt-1 max-h-48 w-full overflow-y-auto rounded border border-line bg-surface shadow-lg"
 				>
 					{#each suggestions as suggestion, i (i)}
 						<li
 							role="option"
 							aria-selected={i === activeIndex}
 							tabindex="0"
-							class="cursor-pointer px-3 py-2 text-sm hover:bg-brand-sand/20 {i === activeIndex
-                                ? 'bg-brand-sand/20 font-bold text-brand-navy'
-                                : 'text-gray-700'}"
+							class="cursor-pointer px-3 py-2 text-sm hover:bg-muted {i === activeIndex
+                                ? 'bg-muted font-bold text-ink'
+                                : 'text-ink-2'}"
 							onclick={() => addTag(suggestion)}
 							onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)}
 						>
@@ -151,6 +149,6 @@ function clickOutside(node: HTMLElement) {
 		</div>
 	</div>
 	{#if allowCreation}
-		<p class="mt-1 text-xs text-gray-400">{m.comp_taginput_create_hint()}</p>
+		<p class="mt-1 text-xs text-ink-3">{m.comp_taginput_create_hint()}</p>
 	{/if}
 </div>

frontend/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+
+type Theme = 'light' | 'dark';
+
+function systemPrefersDark(): boolean {
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function resolveInitialTheme(): Theme {
+	const saved = localStorage.getItem('theme');
+	if (saved === 'light' || saved === 'dark') return saved;
+	return systemPrefersDark() ? 'dark' : 'light';
+}
+
+let theme = $state<Theme>('light');
+
+onMount(() => {
+	theme = resolveInitialTheme();
+});
+
+function toggle() {
+	theme = theme === 'dark' ? 'light' : 'dark';
+	localStorage.setItem('theme', theme);
+	document.documentElement.setAttribute('data-theme', theme);
+}
+</script>
+
+<button
+	type="button"
+	onclick={toggle}
+	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
+	title={theme === 'dark' ? 'light mode' : 'dark mode'}
+	class="rounded p-1.5 text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+>
+	{#if theme === 'dark'}
+		<!-- Sun icon — click to go light -->
+		<svg
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+		>
+			<circle cx="12" cy="12" r="4" />
+			<path
+				stroke-linecap="round"
+				d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+			/>
+		</svg>
+	{:else}
+		<!-- Moon icon — click to go dark -->
+		<svg
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
+			/>
+		</svg>
+	{/if}
+</button>

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import TagInput from '$lib/components/TagInput.svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	tags = $bindable<string[]>([]),
+	initialTitle = '',
+	initialDocumentLocation = '',
+	initialSummary = '',
+	titleRequired = false,
+	suggestedTitle = '',
+	hideTitle = false
+}: {
+	tags?: string[];
+	initialTitle?: string;
+	initialDocumentLocation?: string;
+	initialSummary?: string;
+	titleRequired?: boolean;
+	suggestedTitle?: string;
+	hideTitle?: boolean;
+} = $props();
+
+let titleDirty = $state(false);
+let titleOverride = $state(untrack(() => initialTitle));
+let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride);
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_description()}
+	</h2>
+
+	<div class="space-y-5">
+		{#if !hideTitle}
+			<!-- Titel -->
+			<div>
+				<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
+					>{m.form_label_title()}{#if titleRequired}
+						*{/if}</label
+				>
+				<input
+					id="title"
+					type="text"
+					name="title"
+					value={titleValue}
+					oninput={(e) => {
+						titleOverride = (e.target as HTMLInputElement).value;
+						titleDirty = true;
+					}}
+					required={titleRequired}
+					class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				/>
+			</div>
+		{/if}
+
+		<!-- Aufbewahrungsort -->
+		<div>
+			<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_archive_location()}</label
+			>
+			<input
+				id="documentLocation"
+				type="text"
+				name="documentLocation"
+				value={initialDocumentLocation}
+				placeholder={m.form_placeholder_archive_location()}
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+			/>
+			<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
+		</div>
+
+		<!-- Schlagworte -->
+		<div>
+			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</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-ink-2"
+				>{m.form_label_content()}</label
+			>
+			<textarea
+				id="summary"
+				name="summary"
+				rows="5"
+				placeholder={m.form_placeholder_content()}
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+				>{initialSummary}</textarea
+			>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { initialTranscription = '' }: { initialTranscription?: string } = $props();
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.form_label_transcription()}
+	</h2>
+	<textarea
+		id="transcription"
+		name="transcription"
+		rows="12"
+		placeholder={m.form_placeholder_transcription()}
+		class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+		>{initialTranscription}</textarea
+	>
+</div>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
+import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
+import { m } from '$lib/paraglide/messages.js';
+
+interface Person {
+	id: string;
+	firstName: string;
+	lastName: string;
+}
+
+let {
+	senderId = $bindable(''),
+	selectedReceivers = $bindable<Person[]>([]),
+	initialDateIso = '',
+	initialLocation = '',
+	initialSenderName = '',
+	suggestedDateIso = '',
+	suggestedSenderName = ''
+}: {
+	senderId?: string;
+	selectedReceivers?: Person[];
+	initialDateIso?: string;
+	initialLocation?: string;
+	initialSenderName?: string;
+	suggestedDateIso?: string;
+	suggestedSenderName?: string;
+} = $props();
+
+let dateDisplay = $state(untrack(() => isoToGerman(initialDateIso)));
+let dateIso = $state(untrack(() => initialDateIso));
+let dateDirty = $state(false);
+
+const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
+
+function handleDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	dateDisplay = result.display;
+	dateIso = result.iso;
+	dateDirty = true;
+}
+
+$effect(() => {
+	const suggested = suggestedDateIso;
+	if (suggested && !untrack(() => dateDirty)) {
+		dateDisplay = isoToGerman(suggested);
+		dateIso = suggested;
+	}
+});
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_who_when()}
+	</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-ink-2"
+				>{m.form_label_date()}</label
+			>
+			<input
+				id="documentDate"
+				type="text"
+				inputmode="numeric"
+				value={dateDisplay}
+				oninput={handleDateInput}
+				placeholder={m.form_placeholder_date()}
+				maxlength="10"
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm
+                       {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
+				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">{m.form_date_error()}</p>
+			{/if}
+		</div>
+
+		<!-- Ort -->
+		<div>
+			<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_location()}</label
+			>
+			<input
+				id="location"
+				type="text"
+				name="location"
+				value={initialLocation}
+				placeholder={m.form_placeholder_location()}
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+			/>
+		</div>
+
+		<!-- Absender -->
+		<div>
+			<PersonTypeahead
+				name="senderId"
+				label={m.form_label_sender()}
+				bind:value={senderId}
+				initialName={initialSenderName}
+				suggestedName={suggestedSenderName}
+			/>
+		</div>
+
+		<!-- Empfänger -->
+		<div>
+			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
+			<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
+		</div>
+	</div>
+</div>

frontend/src/lib/components/user/UserGroupsSection.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+let {
+	groups,
+	selectedGroupIds = []
+}: {
+	groups: { id: string; name: string }[];
+	selectedGroupIds?: string[];
+} = $props();
+</script>
+
+<div class="flex flex-wrap gap-3">
+	{#each groups as group (group.id)}
+		<label class="inline-flex items-center gap-2 text-sm text-ink-2">
+			<input
+				type="checkbox"
+				name="groupIds"
+				value={group.id}
+				checked={selectedGroupIds.includes(group.id)}
+				class="rounded border-line text-ink focus:ring-accent"
+			/>
+			{group.name}
+		</label>
+	{/each}
+</div>

frontend/src/lib/components/user/UserPasswordSection.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { required = false }: { required?: boolean } = $props();
+</script>
+
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_new_password()}
+		</span>
+		<input
+			type="password"
+			name="newPassword"
+			required={required}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+	</label>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_new_password_confirm()}
+		</span>
+		<input
+			type="password"
+			name="confirmPassword"
+			required={required}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+	</label>
+</div>

frontend/src/lib/components/user/UserProfileSection.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	firstName = '',
+	lastName = '',
+	birthDate = '',
+	email = '',
+	contact = ''
+}: {
+	firstName?: string;
+	lastName?: string;
+	birthDate?: string;
+	email?: string;
+	contact?: string;
+} = $props();
+
+let birthDateDisplay = $state(untrack(() => isoToGerman(birthDate)));
+let birthDateIso = $state(untrack(() => birthDate));
+
+function handleBirthDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	birthDateDisplay = result.display;
+	birthDateIso = result.iso;
+}
+</script>
+
+<div class="space-y-4">
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+		<label class="block">
+			<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.profile_label_first_name()}
+			</span>
+			<input
+				type="text"
+				name="firstName"
+				value={firstName}
+				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			/>
+		</label>
+
+		<label class="block">
+			<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.profile_label_last_name()}
+			</span>
+			<input
+				type="text"
+				name="lastName"
+				value={lastName}
+				class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			/>
+		</label>
+	</div>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_birth_date()}
+		</span>
+		<input
+			type="text"
+			placeholder="TT.MM.JJJJ"
+			value={birthDateDisplay}
+			oninput={handleBirthDateInput}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+		<input type="hidden" name="birthDate" value={birthDateIso} />
+	</label>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_email()}
+		</span>
+		<input
+			type="email"
+			name="email"
+			value={email}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+		/>
+	</label>
+
+	<label class="block">
+		<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.profile_label_contact()}
+		</span>
+		<textarea
+			name="contact"
+			rows="3"
+			placeholder={m.profile_contact_placeholder()}
+			class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+			>{contact}</textarea
+		>
+	</label>
+</div>

frontend/src/lib/errors.ts

@@ -9,6 +9,7 @@ export type ErrorCode =
 	| 'DOCUMENT_NO_FILE'
 	| 'FILE_NOT_FOUND'
 	| 'FILE_UPLOAD_FAILED'
+	| 'UNSUPPORTED_FILE_TYPE'
 	| 'USER_NOT_FOUND'
 	| 'EMAIL_ALREADY_IN_USE'
 	| 'WRONG_CURRENT_PASSWORD'
@@ -54,6 +55,8 @@ export function getErrorMessage(code: ErrorCode | string | undefined): string {
 			return m.error_file_not_found();
 		case 'FILE_UPLOAD_FAILED':
 			return m.error_file_upload_failed();
+		case 'UNSUPPORTED_FILE_TYPE':
+			return m.error_unsupported_file_type();
 		case 'USER_NOT_FOUND':
 			return m.error_user_not_found();
 		case 'EMAIL_ALREADY_IN_USE':

frontend/src/lib/generated/api.ts

@@ -180,6 +180,86 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/documents/{documentId}/comments": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getDocumentComments"];
+        put?: never;
+        post: operations["postDocumentComment"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/documents/{documentId}/comments/{commentId}/replies": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["replyToDocumentComment"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/documents/{documentId}/annotations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["listAnnotations"];
+        put?: never;
+        post: operations["createAnnotation"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/documents/{documentId}/annotations/{annotationId}/comments": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getAnnotationComments"];
+        put?: never;
+        post: operations["postAnnotationComment"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/documents/{documentId}/annotations/{annotationId}/comments/{commentId}/replies": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["replyToAnnotationComment"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/auth/reset-password": {
         parameters: {
             query?: never;
@@ -260,6 +340,22 @@ export interface paths {
         patch: operations["updateGroup"];
         trace?: never;
     };
+    "/api/documents/{documentId}/comments/{commentId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete: operations["deleteComment"];
+        options?: never;
+        head?: never;
+        patch: operations["editComment"];
+        trace?: never;
+    };
     "/api/tags": {
         parameters: {
             query?: never;
@@ -372,6 +468,54 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/documents/incomplete-count": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getIncompleteCount"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/documents/incomplete": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getIncomplete"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/documents/incomplete/next": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getNextIncomplete"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/documents/search": {
         parameters: {
             query?: never;
@@ -420,6 +564,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/documents/{documentId}/annotations/{annotationId}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete: operations["deleteAnnotation"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -510,6 +670,7 @@ export interface components {
             title: string;
             filePath?: string;
             contentType?: string;
+            fileHash?: string;
             originalFilename: string;
             /** @enum {string} */
             status: "PLACEHOLDER" | "UPLOADED" | "TRANSCRIBED" | "REVIEWED" | "ARCHIVED";
@@ -548,6 +709,63 @@ export interface components {
             name?: string;
             permissions?: string[];
         };
+        CreateCommentDTO: {
+            content?: string;
+        };
+        DocumentComment: {
+            /** Format: uuid */
+            id: string;
+            /** Format: uuid */
+            documentId: string;
+            /** Format: uuid */
+            annotationId?: string;
+            /** Format: uuid */
+            parentId?: string;
+            /** Format: uuid */
+            authorId?: string;
+            authorName: string;
+            content: string;
+            /** Format: date-time */
+            createdAt: string;
+            /** Format: date-time */
+            updatedAt: string;
+            replies: components["schemas"]["DocumentComment"][];
+        };
+        CreateAnnotationDTO: {
+            /** Format: int32 */
+            pageNumber?: number;
+            /** Format: double */
+            x?: number;
+            /** Format: double */
+            y?: number;
+            /** Format: double */
+            width?: number;
+            /** Format: double */
+            height?: number;
+            color?: string;
+        };
+        DocumentAnnotation: {
+            /** Format: uuid */
+            id: string;
+            /** Format: uuid */
+            documentId: string;
+            /** Format: int32 */
+            pageNumber: number;
+            /** Format: double */
+            x: number;
+            /** Format: double */
+            y: number;
+            /** Format: double */
+            width: number;
+            /** Format: double */
+            height: number;
+            color: string;
+            fileHash?: string;
+            /** Format: uuid */
+            createdBy?: string;
+            /** Format: date-time */
+            createdAt: string;
+        };
         ResetPasswordRequest: {
             token?: string;
             newPassword?: string;
@@ -1062,6 +1280,205 @@ export interface operations {
             };
         };
     };
+    getDocumentComments: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"][];
+                };
+            };
+        };
+    };
+    postDocumentComment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateCommentDTO"];
+            };
+        };
+        responses: {
+            /** @description Created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"];
+                };
+            };
+        };
+    };
+    replyToDocumentComment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+                commentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateCommentDTO"];
+            };
+        };
+        responses: {
+            /** @description Created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"];
+                };
+            };
+        };
+    };
+    listAnnotations: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentAnnotation"][];
+                };
+            };
+        };
+    };
+    createAnnotation: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateAnnotationDTO"];
+            };
+        };
+        responses: {
+            /** @description Created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentAnnotation"];
+                };
+            };
+        };
+    };
+    getAnnotationComments: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                annotationId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"][];
+                };
+            };
+        };
+    };
+    postAnnotationComment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+                annotationId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateCommentDTO"];
+            };
+        };
+        responses: {
+            /** @description Created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"];
+                };
+            };
+        };
+    };
+    replyToAnnotationComment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+                commentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateCommentDTO"];
+            };
+        };
+        responses: {
+            /** @description Created */
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"];
+                };
+            };
+        };
+    };
     resetPassword: {
         parameters: {
             query?: never;
@@ -1192,6 +1609,54 @@ export interface operations {
             };
         };
     };
+    deleteComment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+                commentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description No Content */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    editComment: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+                commentId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateCommentDTO"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["DocumentComment"];
+                };
+            };
+        };
+    };
     searchTags: {
         parameters: {
             query?: {
@@ -1402,6 +1867,77 @@ export interface operations {
             };
         };
     };
+    getIncompleteCount: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": {
+                        count: number;
+                    };
+                };
+            };
+        };
+    };
+    getIncomplete: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["Document"][];
+                };
+            };
+        };
+    };
+    getNextIncomplete: {
+        parameters: {
+            query: {
+                excludeId: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["Document"];
+                };
+            };
+            /** @description No Content */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     importStatus: {
         parameters: {
             query?: never;
@@ -1422,4 +1958,25 @@ export interface operations {
             };
         };
     };
+    deleteAnnotation: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                documentId: string;
+                annotationId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description No Content */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
 }

frontend/src/lib/types.ts

@@ -0,0 +1,33 @@
+export type CommentReply = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+};
+
+export type Comment = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+	replies: CommentReply[];
+};
+
+export type DocumentPanelTab = 'metadata' | 'transcription' | 'discussion' | 'history';
+
+export type Annotation = {
+	id: string;
+	documentId: string;
+	pageNumber: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	color: string;
+	createdAt: string;
+	fileHash?: string | null;
+};

frontend/src/lib/utils.ts

@@ -1,20 +1 @@
-/**
- * Converts an ISO date string (YYYY-MM-DD) to German display format (DD.MM.YYYY).
- * Returns an empty string for invalid or empty input.
- */
-export function isoToGerman(iso: string): string {
-	if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return '';
-	const [y, m, d] = iso.split('-');
-	return `${d}.${m}.${y}`;
-}
-
-/**
- * Converts a German date string (DD.MM.YYYY) to ISO format (YYYY-MM-DD).
- * Returns an empty string for invalid or empty input.
- */
-export 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}`;
-}
+export { isoToGerman, germanToIso } from '$lib/utils/date';

frontend/src/lib/utils/date.ts

@@ -9,3 +9,44 @@ export function formatDate(isoDate: string): string {
 		year: 'numeric'
 	}).format(new Date(isoDate + 'T12:00:00'));
 }
+
+/**
+ * Converts an ISO date string (YYYY-MM-DD) to German display format (DD.MM.YYYY).
+ * Returns an empty string for invalid or empty input.
+ */
+export function isoToGerman(iso: string): string {
+	if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) return '';
+	const [y, m, d] = iso.split('-');
+	return `${d}.${m}.${y}`;
+}
+
+/**
+ * Converts a German date string (DD.MM.YYYY) to ISO format (YYYY-MM-DD).
+ * Returns an empty string for invalid or empty input.
+ */
+export 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}`;
+}
+
+/**
+ * Handles a date input event for German-format date fields (DD.MM.YYYY).
+ * Strips non-digits, formats with dots, mutates the input's displayed value,
+ * and returns the display string and its ISO equivalent.
+ */
+export function handleGermanDateInput(e: Event): { display: string; iso: string } {
+	const input = e.target as HTMLInputElement;
+	const digits = input.value.replace(/\D/g, '').slice(0, 8);
+	let display: string;
+	if (digits.length <= 2) {
+		display = digits;
+	} else if (digits.length <= 4) {
+		display = `${digits.slice(0, 2)}.${digits.slice(2)}`;
+	} else {
+		display = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+	input.value = display;
+	return { display, iso: germanToIso(display) };
+}

frontend/src/lib/utils/filename.spec.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest';
+import { parseFilename, stripExtension } from './filename';
+
+describe('parseFilename', () => {
+	describe('date-first patterns', () => {
+		it('YYYY-MM-DD_Lastname_Firstname', () => {
+			expect(parseFilename('1965-03-12_Mueller_Hans.pdf')).toEqual({
+				dateIso: '1965-03-12',
+				personName: 'Hans Mueller',
+				suggestedTitle: 'Hans Mueller (12.03.1965)'
+			});
+		});
+
+		it('YYYYMMDD_Lastname_Firstname', () => {
+			expect(parseFilename('19650312_Mueller_Hans.pdf')).toEqual({
+				dateIso: '1965-03-12',
+				personName: 'Hans Mueller',
+				suggestedTitle: 'Hans Mueller (12.03.1965)'
+			});
+		});
+
+		it('YYYYMMDD_compound_lastname_Firstname', () => {
+			expect(parseFilename('18881025_de_Gruyter_Walter.pdf')).toEqual({
+				dateIso: '1888-10-25',
+				personName: 'Walter de Gruyter',
+				suggestedTitle: 'Walter de Gruyter (25.10.1888)'
+			});
+		});
+
+		it('handles umlauts in names', () => {
+			const result = parseFilename('2024-01-15_Müller_Jürgen.pdf');
+			expect(result.personName).toBe('Jürgen Müller');
+		});
+	});
+
+	describe('date-last patterns', () => {
+		it('Lastname_Firstname_YYYY-MM-DD', () => {
+			expect(parseFilename('Mueller_Hans_1965-03-12.pdf')).toEqual({
+				dateIso: '1965-03-12',
+				personName: 'Hans Mueller',
+				suggestedTitle: 'Hans Mueller (12.03.1965)'
+			});
+		});
+
+		it('Lastname_Firstname_YYYYMMDD', () => {
+			expect(parseFilename('Mueller_Hans_19650312.pdf')).toEqual({
+				dateIso: '1965-03-12',
+				personName: 'Hans Mueller',
+				suggestedTitle: 'Hans Mueller (12.03.1965)'
+			});
+		});
+
+		it('compound_lastname_Firstname_YYYYMMDD', () => {
+			expect(parseFilename('de_Gruyter_Walter_18881025.pdf')).toEqual({
+				dateIso: '1888-10-25',
+				personName: 'Walter de Gruyter',
+				suggestedTitle: 'Walter de Gruyter (25.10.1888)'
+			});
+		});
+	});
+
+	describe('non-matching filenames', () => {
+		it('returns empty for date-only filename', () => {
+			expect(parseFilename('1965-03-12.pdf')).toEqual({});
+		});
+
+		it('returns empty for two segments with no date', () => {
+			expect(parseFilename('Mueller_Hans.pdf')).toEqual({});
+		});
+
+		it('returns empty for unstructured filename', () => {
+			expect(parseFilename('scan_001.pdf')).toEqual({});
+		});
+
+		it('returns empty for three name segments with no date', () => {
+			expect(parseFilename('Mueller_Hans_Juergen.pdf')).toEqual({});
+		});
+
+		it('returns empty for filename without extension', () => {
+			expect(parseFilename('1965-03-12_Mueller_Hans')).toEqual({});
+		});
+
+		it('rejects implausible date (month 13)', () => {
+			expect(parseFilename('19651345_Mueller_Hans.pdf')).toEqual({});
+		});
+	});
+});
+
+describe('stripExtension', () => {
+	it('removes the extension', () => {
+		expect(stripExtension('document.pdf')).toBe('document');
+	});
+
+	it('removes only the last extension', () => {
+		expect(stripExtension('archive.tar.gz')).toBe('archive.tar');
+	});
+
+	it('leaves names without extension unchanged', () => {
+		expect(stripExtension('nodotfile')).toBe('nodotfile');
+	});
+});

frontend/src/lib/utils/filename.ts

@@ -0,0 +1,83 @@
+import { isoToGerman } from './date';
+
+export interface FilenameParseResult {
+	/** ISO format: YYYY-MM-DD */
+	dateIso?: string;
+	/** "Firstname Lastname" — order reversed from filename convention */
+	personName?: string;
+	/** Ready-to-use title, e.g. "Hans Mueller (12.03.1965)" */
+	suggestedTitle?: string;
+}
+
+// A date token is either YYYY-MM-DD or YYYYMMDD with a plausible month/day range.
+function tryParseDate(s: string): string | undefined {
+	if (/^\d{4}-\d{2}-\d{2}$/.test(s)) {
+		const m = parseInt(s.slice(5, 7));
+		const d = parseInt(s.slice(8, 10));
+		if (m >= 1 && m <= 12 && d >= 1 && d <= 31) return s;
+	} else if (/^\d{8}$/.test(s)) {
+		const m = parseInt(s.slice(4, 6));
+		const d = parseInt(s.slice(6, 8));
+		if (m >= 1 && m <= 12 && d >= 1 && d <= 31)
+			return `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`;
+	}
+	return undefined;
+}
+
+const NAME_PART = /^\p{L}+$/u;
+
+/**
+ * Parses a structured filename and extracts a date and person name.
+ *
+ * Supported conventions (date-first or date-last, compound last names supported):
+ *   YYYY-MM-DD_Lastname_Firstname.ext
+ *   YYYYMMDD_Lastname_Firstname.ext
+ *   YYYYMMDD_de_Gruyter_Walter.ext   ← compound last name: lastName="de Gruyter"
+ *   Lastname_Firstname_YYYY-MM-DD.ext
+ *   Lastname_Firstname_YYYYMMDD.ext
+ *   de_Gruyter_Walter_YYYYMMDD.ext   ← compound last name: lastName="de Gruyter"
+ *
+ * Algorithm: split on "_", identify the date token (first or last segment),
+ * treat the outermost remaining segment as firstName, rest as lastName parts.
+ * Returns {} for anything that doesn't match cleanly.
+ */
+export function parseFilename(filename: string): FilenameParseResult {
+	const dot = filename.lastIndexOf('.');
+	if (dot < 0) return {}; // no extension — not a real file
+	const stem = filename.slice(0, dot);
+	const parts = stem.split('_');
+
+	// Minimum: date + at least one lastName segment + firstName = 3 parts
+	if (parts.length < 3) return {};
+
+	let dateIso: string;
+	let nameParts: string[];
+
+	const dateFromFirst = tryParseDate(parts[0]);
+	if (dateFromFirst) {
+		dateIso = dateFromFirst;
+		nameParts = parts.slice(1);
+	} else {
+		const dateFromLast = tryParseDate(parts[parts.length - 1]);
+		if (!dateFromLast) return {};
+		dateIso = dateFromLast;
+		nameParts = parts.slice(0, -1);
+	}
+
+	// Need at least lastName + firstName after removing the date
+	if (nameParts.length < 2) return {};
+
+	// All name segments must be pure letters (covers umlauts via \p{L})
+	if (!nameParts.every((p) => NAME_PART.test(p))) return {};
+
+	const firstName = nameParts[nameParts.length - 1];
+	const lastName = nameParts.slice(0, -1).join(' ');
+	const personName = `${firstName} ${lastName}`;
+	const suggestedTitle = `${personName} (${isoToGerman(dateIso)})`;
+
+	return { dateIso, personName, suggestedTitle };
+}
+
+export function stripExtension(filename: string): string {
+	return filename.replace(/\.[^/.]+$/, '');
+}

frontend/src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 import './layout.css';
-import { enhance } from '$app/forms';
 import { page } from '$app/state';
 import { onMount } from 'svelte';
-import { m } from '$lib/paraglide/messages.js';
 import { setLocale, getLocale } from '$lib/paraglide/runtime';
+import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+import AppNav from './AppNav.svelte';
+import UserMenu from './UserMenu.svelte';
 
 let { children, data } = $props();
 
@@ -23,7 +24,9 @@ onMount(() => {
 	hydrated = true;
 });
 
-let userMenuOpen = $state(false);
+const isAuthPage = $derived(
+	['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))
+);
 
 const userInitials = $derived.by(() => {
 	const first = data?.user?.firstName?.[0];
@@ -31,166 +34,49 @@ const userInitials = $derived.by(() => {
 	if (first && last) return (first + last).toUpperCase();
 	return null;
 });
-
-function clickOutside(node: HTMLElement) {
-	const handleClick = (event: MouseEvent) => {
-		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
-			userMenuOpen = false;
-		}
-	};
-	document.addEventListener('click', handleClick, true);
-	return () => {
-		document.removeEventListener('click', handleClick, true);
-	};
-}
 </script>
 
-<div class="min-h-screen bg-white" data-hydrated={hydrated || undefined}>
-	{#if !['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))}
-		<header class="sticky top-0 z-50 border-b border-gray-100 bg-white">
+<div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}>
+	{#if !isAuthPage}
+		<header class="sticky top-0 z-50 border-b border-line-2 bg-surface">
 			<!-- De Gruyter Brill purple accent strip -->
 			<div class="h-1 bg-brand-purple"></div>
 
 			<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 				<div class="flex h-16 justify-between">
 					<!-- Logo & Nav -->
-					<div class="flex">
-						<div class="mr-10 flex flex-shrink-0 items-center">
-							<a href="/" class="flex items-center" aria-label="Familienarchiv">
-								<span class="font-sans text-xl font-bold tracking-widest text-brand-navy uppercase"
-									>Familienarchiv</span
-								>
-							</a>
-						</div>
-
-						<nav class="hidden items-center sm:flex sm:space-x-1">
-							<a
-								href="/"
-								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
-                                    ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                    : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
-							>
-								{m.nav_documents()}
-							</a>
-
-							<a
-								href="/persons"
-								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname.startsWith('/persons')
-                                    ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                    : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
-							>
-								{m.nav_persons()}
-							</a>
-
-							<a
-								href="/conversations"
-								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname.startsWith('/conversations')
-                                    ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                    : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
-							>
-								{m.nav_conversations()}
-							</a>
-							{#if isAdmin}
-								<a
-									href="/admin"
-									class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
-                                   {page.url.pathname.startsWith('/admin')
-                                        ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                        : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
-								>
-									{m.nav_admin()}
-								</a>
-							{/if}
-						</nav>
-					</div>
+					<AppNav isAdmin={isAdmin} />
 
 					<!-- Right Side -->
 					<div class="flex items-center gap-3">
 						<!-- Language selector -->
-						<div class="flex items-center gap-1 border-r border-gray-200 pr-3">
+						<div class="flex items-center gap-1 border-r border-line pr-3">
 							{#each locales as locale (locale)}
 								<button
 									type="button"
 									onclick={() => setLocale(localeMap[locale])}
 									class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
                                         {activeLocale === locale
-                                            ? 'font-bold text-brand-navy'
-                                            : 'font-normal text-gray-400 hover:text-brand-navy'}"
+                                            ? 'font-bold text-ink'
+                                            : 'font-normal text-ink-3 hover:text-ink'}"
 								>
 									{locale}
 								</button>
 							{/each}
 						</div>
 
-						<!-- User menu -->
-						<div
-							class="relative"
-							{@attach clickOutside}
-							onkeydown={(e) => { if (e.key === 'Escape') userMenuOpen = false; }}
-							role="none"
-						>
-							{#if userInitials}
-								<button
-									type="button"
-									aria-expanded={userMenuOpen}
-									aria-haspopup="true"
-									onclick={() => (userMenuOpen = !userMenuOpen)}
-									class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-navy font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
-								>
-									{userInitials}
-								</button>
-							{:else}
-								<button
-									type="button"
-									aria-label={m.nav_profile()}
-									aria-expanded={userMenuOpen}
-									aria-haspopup="true"
-									onclick={() => (userMenuOpen = !userMenuOpen)}
-									class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
-								>
-									<img
-										src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-4 w-4 opacity-50"
-									/>
-								</button>
-							{/if}
+						<!-- Theme toggle -->
+						<ThemeToggle />
 
-							{#if userMenuOpen}
-								<div
-									class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-brand-sand bg-white shadow-md"
-								>
-									<a
-										href="/profile"
-										onclick={() => (userMenuOpen = false)}
-										class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
-									>
-										{m.nav_profile()}
-									</a>
-									<div class="border-t border-brand-sand">
-										<form action="/logout" method="POST" use:enhance>
-											<button
-												type="submit"
-												class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
-											>
-												{m.nav_logout()}
-											</button>
-										</form>
-									</div>
-								</div>
-							{/if}
-						</div>
+						<!-- User menu -->
+						<UserMenu userInitials={userInitials} />
 					</div>
 				</div>
 			</div>
 		</header>
 	{/if}
 
-	<main class="py-6">
+	<main class={isAuthPage ? '' : 'py-6'}>
 		{@render children()}
 	</main>
 </div>

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

@@ -12,7 +12,7 @@ export async function load({ url, fetch }) {
 	const api = createApiClient(fetch);
 
 	try {
-		const [docsResult, personsResult] = await Promise.all([
+		const [docsResult, personsResult, incompleteCountResult] = await Promise.all([
 			api.GET('/api/documents/search', {
 				params: {
 					query: {
@@ -25,7 +25,8 @@ export async function load({ url, fetch }) {
 					}
 				}
 			}),
-			api.GET('/api/persons')
+			api.GET('/api/persons'),
+			api.GET('/api/documents/incomplete-count')
 		]);
 
 		if (docsResult.response.status === 401 || personsResult.response.status === 401) {
@@ -39,8 +40,13 @@ export async function load({ url, fetch }) {
 		const senderObj = allPersons.find((p) => p.id === senderId);
 		const receiverObj = allPersons.find((p) => p.id === receiverId);
 
+		const incompleteCount = incompleteCountResult.response.ok
+			? (incompleteCountResult.data?.count ?? 0)
+			: 0;
+
 		return {
 			documents,
+			incompleteCount,
 			initialValues: {
 				senderName: senderObj ? `${senderObj.firstName} ${senderObj.lastName}` : '',
 				receiverName: receiverObj ? `${receiverObj.firstName} ${receiverObj.lastName}` : ''
@@ -53,6 +59,7 @@ export async function load({ url, fetch }) {
 		console.error('Error loading data:', e);
 		return {
 			documents: [],
+			incompleteCount: 0,
 			initialValues: { senderName: '', receiverName: '' },
 			filters: { q, from, to, senderId, receiverId, tags },
 			error: 'Daten konnten nicht geladen werden.' as string | null

frontend/src/routes/+page.svelte

@@ -1,12 +1,11 @@
 <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 { untrack } from 'svelte';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
+import SearchFilterBar from './SearchFilterBar.svelte';
+import DropZone from './DropZone.svelte';
+import DocumentList from './DocumentList.svelte';
 import { m } from '$lib/paraglide/messages.js';
-import { formatDate } from '$lib/utils/date';
 
 let { data } = $props();
 
@@ -18,8 +17,6 @@ let senderId = $state(untrack(() => data.filters?.senderId || ''));
 let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
 let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
 
-let searchTimer: ReturnType<typeof setTimeout>;
-
 const hasAdvancedFilters = (filters: typeof data.filters) =>
 	(filters?.tags?.length ?? 0) > 0 ||
 	!!filters?.senderId ||
@@ -29,27 +26,22 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
 
 let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
 
+let searchTimer: ReturnType<typeof setTimeout>;
+
 function triggerSearch() {
 	const params = new SvelteURLSearchParams();
-
 	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);
+	searchTimer = setTimeout(() => triggerSearch(), 500);
 }
 
 // Trigger search when tags change
@@ -75,303 +67,54 @@ $effect(() => {
 });
 </script>
 
-<!-- Outer Container: Matches the 'Sand' background of the layout -->
 <main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
-	<!-- SEARCH & FILTER CARD -->
-	<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 items-center gap-4">
-			<!-- Full Text Search -->
-			<div class="relative flex-1">
-				<input
-					type="text"
-					bind:value={q}
-					oninput={handleTextSearch}
-					onfocus={() => (qFocused = true)}
-					onblur={() => (qFocused = false)}
-					placeholder={m.docs_search_placeholder()}
-					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="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-4 w-4 opacity-40"
-					/>
-				</div>
-			</div>
+	<SearchFilterBar
+		bind:q={q}
+		bind:from={from}
+		bind:to={to}
+		bind:senderId={senderId}
+		bind:receiverId={receiverId}
+		bind:tagNames={tagNames}
+		bind:showAdvanced={showAdvanced}
+		initialSenderName={data.initialValues?.senderName}
+		initialReceiverName={data.initialValues?.receiverName}
+		onSearch={handleTextSearch}
+		onfocus={() => (qFocused = true)}
+		onblur={() => (qFocused = false)}
+	/>
 
-			<!-- Toggle Advanced Button -->
-			<button
-				onclick={() => (showAdvanced = !showAdvanced)}
-				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"
-			>
+	{#if data.canWrite}
+		<DropZone />
+	{/if}
+
+	{#if data.incompleteCount > 0}
+		<a
+			href="/enrich"
+			class="mb-6 flex items-center justify-between rounded-sm border border-accent/40 bg-accent-bg px-6 py-4 transition-colors hover:bg-accent/20"
+		>
+			<div class="flex items-center gap-4">
 				<img
-					src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Info/Block/Info-Block-Border-MD.svg"
 					alt=""
 					aria-hidden="true"
-					class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
+					class="h-6 w-6 opacity-60"
 				/>
-				{m.docs_btn_filter()}
-			</button>
-
-			<!-- Reset Button -->
-			<a
-				href="/"
-				class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
-				title={m.docs_btn_reset_title()}
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-5 w-5 opacity-40"
-				/>
-			</a>
-		</div>
-
-		<!-- ROW 2: Advanced Filters (Collapsible) -->
-		{#if showAdvanced}
-			<div
-				transition:slide
-				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="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase">
-						{m.docs_filter_label_tags()}
+				<div>
+					<p class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
+						{m.enrich_needs_metadata_title()}
+					</p>
+					<p class="mt-0.5 font-serif text-sm text-ink-2">
+						{m.enrich_needs_metadata_count({ count: data.incompleteCount })}
 					</p>
-					<TagInput bind:tags={tagNames} allowCreation={false} />
-				</div>
-
-				<!-- Sender -->
-				<div class="md:col-span-3">
-					<div
-						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"
-							label={m.docs_filter_label_sender()}
-							bind:value={senderId}
-							initialName={data.initialValues?.senderName}
-							onchange={triggerSearch}
-						/>
-					</div>
-				</div>
-
-				<!-- Receiver -->
-				<div class="md:col-span-3">
-					<div
-						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"
-							label={m.docs_filter_label_receivers()}
-							bind:value={receiverId}
-							initialName={data.initialValues?.receiverName}
-							onchange={triggerSearch}
-						/>
-					</div>
-				</div>
-
-				<!-- Dates -->
-				<div class="grid grid-cols-2 gap-4 md:col-span-6">
-					<div>
-						<label
-							for="from"
-							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
-							>{m.docs_filter_label_from()}</label
-						>
-						<input
-							type="date"
-							id="from"
-							bind:value={from}
-							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
-						/>
-					</div>
-					<div>
-						<label
-							for="to"
-							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
-							>{m.docs_filter_label_to()}</label
-						>
-						<input
-							type="date"
-							id="to"
-							bind:value={to}
-							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
-						/>
-					</div>
 				</div>
 			</div>
-		{/if}
-	</div>
-
-	<!-- DOCUMENT LIST HEADER -->
-	<div class="mb-2 flex justify-end">
-		{#if data.canWrite}
-			<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"
+			<span
+				class="font-sans text-xs font-bold tracking-widest text-ink uppercase transition-colors hover:text-ink-2"
 			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4"
-				/>
-				{m.docs_btn_new()}
-			</a>
-		{/if}
-	</div>
+				{m.enrich_needs_metadata_cta()} →
+			</span>
+		</a>
+	{/if}
 
-	<!-- DOCUMENT LIST -->
-	<div class="border border-brand-sand bg-white shadow-sm">
-		{#if data.error}
-			<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 (doc.id)}
-					<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 gap-6 sm:flex-row">
-								<!-- Main Info -->
-								<div class="flex-1">
-									<div class="mb-2 flex items-baseline justify-between">
-										<!-- Title: Serif & Brand Navy -->
-										<h3
-											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 rounded-full border px-2.5 py-0.5 text-[10px] font-bold tracking-wide uppercase
-                                            {doc.status === 'UPLOADED'
-												? '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="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
-										<div class="flex items-center">
-											<img
-												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
-												alt=""
-												aria-hidden="true"
-												class="mr-1.5 h-4 w-4"
-											/>
-											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
-										</div>
-										{#if doc.location}
-											<div class="flex items-center">
-												<img
-													src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
-													alt=""
-													aria-hidden="true"
-													class="mr-1.5 h-4 w-4"
-												/>
-												{doc.location}
-											</div>
-										{/if}
-									</div>
-
-									<!-- Sender/Receiver Info -->
-									<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 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
-												>{m.docs_list_from()}</span
-											>
-											{#if doc.sender}
-												<span class="text-gray-900"
-													>{doc.sender.firstName} {doc.sender.lastName}</span
-												>
-											{:else}
-												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
-											{/if}
-										</div>
-										<div class="flex items-baseline">
-											<span
-												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
-												>{m.docs_list_to()}</span
-											>
-											{#if doc.receivers && doc.receivers.length > 0}
-												<span class="text-gray-900">
-													{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
-												</span>
-											{:else}
-												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
-											{/if}
-										</div>
-									</div>
-
-									<!-- Tags Display -->
-									{#if doc.tags && doc.tags.length > 0}
-										<div class="mt-4 flex flex-wrap gap-2 pt-3">
-											{#each doc.tags as tag (tag.id)}
-												<button
-													type="button"
-													class="relative z-10 inline-flex cursor-pointer 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"
-													onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
-												>
-													{tag.name}
-												</button>
-											{/each}
-										</div>
-									{/if}
-								</div>
-
-								<!-- Arrow Icon -->
-								<div
-									class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
-								>
-									<img
-										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-6 w-6"
-									/>
-								</div>
-							</div>
-						</a>
-					</li>
-				{/each}
-			</ul>
-		{:else}
-			<!-- Empty State -->
-			<div class="p-16 text-center">
-				<div
-					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
-				>
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-6 w-6"
-					/>
-				</div>
-				<h3 class="font-serif text-lg font-medium text-brand-navy">{m.docs_empty_heading()}</h3>
-				<p class="mt-1 font-sans text-sm text-gray-500">
-					{m.docs_empty_text()}
-				</p>
-				<button
-					onclick={() => goto('/')}
-					class="mt-6 text-sm font-bold tracking-wide text-brand-mint uppercase transition hover:text-brand-navy"
-				>
-					{m.docs_empty_btn_clear()}
-				</button>
-			</div>
-		{/if}
-	</div>
+	<DocumentList documents={data.documents ?? []} canWrite={data.canWrite} error={data.error} />
 </main>

frontend/src/routes/AppNav.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+let { isAdmin = false }: { isAdmin?: boolean } = $props();
+</script>
+
+<div class="flex">
+	<div class="mr-10 flex flex-shrink-0 items-center">
+		<a href="/" class="flex items-center" aria-label="Familienarchiv">
+			<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
+				>Familienarchiv</span
+			>
+		</a>
+	</div>
+
+	<nav class="hidden items-center sm:flex sm:space-x-1">
+		<a
+			href="/"
+			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
+                    ? 'rounded bg-nav-active text-ink'
+                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+		>
+			{m.nav_documents()}
+		</a>
+
+		<a
+			href="/persons"
+			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname.startsWith('/persons')
+                    ? 'rounded bg-nav-active text-ink'
+                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+		>
+			{m.nav_persons()}
+		</a>
+
+		<a
+			href="/conversations"
+			class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname.startsWith('/conversations')
+                    ? 'rounded bg-nav-active text-ink'
+                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+		>
+			{m.nav_conversations()}
+		</a>
+		{#if isAdmin}
+			<a
+				href="/admin"
+				class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
+                   {page.url.pathname.startsWith('/admin')
+                        ? 'rounded bg-nav-active text-ink'
+                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
+			>
+				{m.nav_admin()}
+			</a>
+		{/if}
+	</nav>
+</div>

frontend/src/routes/DocumentList.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+import { goto } from '$app/navigation';
+import { m } from '$lib/paraglide/messages.js';
+import { formatDate } from '$lib/utils/date';
+
+let {
+	documents,
+	canWrite,
+	error
+}: {
+	documents: {
+		id: string;
+		title?: string | null;
+		originalFilename: string;
+		documentDate?: string | null;
+		location?: string | null;
+		sender?: { firstName: string; lastName: string } | null;
+		receivers?: { firstName: string; lastName: string }[];
+		tags?: { id: string; name: string }[];
+	}[];
+	canWrite: boolean;
+	error?: string | null;
+} = $props();
+</script>
+
+<!-- DOCUMENT LIST HEADER -->
+<div class="mb-2 flex justify-end">
+	{#if canWrite}
+		<a
+			href="/documents/new"
+			class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-4 w-4"
+			/>
+			{m.docs_btn_new()}
+		</a>
+	{/if}
+</div>
+
+<!-- DOCUMENT LIST -->
+<div class="border border-line bg-surface shadow-sm">
+	{#if error}
+		<div class="bg-red-50 p-8 text-center text-red-600">
+			{error}
+		</div>
+	{:else if documents.length > 0}
+		<ul class="divide-y divide-line-2">
+			{#each documents as doc (doc.id)}
+				<li class="group transition-colors duration-200 hover:bg-muted/50">
+					<a href="/documents/{doc.id}" class="block p-6">
+						<div class="flex flex-col gap-6 sm:flex-row">
+							<!-- Main Info -->
+							<div class="flex-1">
+								<div class="mb-2 flex items-baseline justify-between">
+									<h3
+										class="font-serif text-xl font-medium text-ink decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
+									>
+										{doc.title || doc.originalFilename}
+									</h3>
+								</div>
+
+								<!-- Metadata Row -->
+								<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
+									<div class="flex items-center">
+										<img
+											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
+											alt=""
+											aria-hidden="true"
+											class="mr-1.5 h-4 w-4"
+										/>
+										{doc.documentDate ? formatDate(doc.documentDate) : '—'}
+									</div>
+									{#if doc.location}
+										<div class="flex items-center">
+											<img
+												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
+												alt=""
+												aria-hidden="true"
+												class="mr-1.5 h-4 w-4"
+											/>
+											{doc.location}
+										</div>
+									{/if}
+								</div>
+
+								<!-- Sender/Receiver Info -->
+								<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 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
+											>{m.docs_list_from()}</span
+										>
+										{#if doc.sender}
+											<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
+										{:else}
+											<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
+										{/if}
+									</div>
+									<div class="flex items-baseline">
+										<span
+											class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
+											>{m.docs_list_to()}</span
+										>
+										{#if doc.receivers && doc.receivers.length > 0}
+											<span class="text-ink">
+												{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
+											</span>
+										{:else}
+											<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
+										{/if}
+									</div>
+								</div>
+
+								<!-- Tags Display -->
+								{#if doc.tags && doc.tags.length > 0}
+									<div class="mt-4 flex flex-wrap gap-2 pt-3">
+										{#each doc.tags as tag (tag.id)}
+											<button
+												type="button"
+												class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+												onclick={(e) => {
+													e.preventDefault();
+													e.stopPropagation();
+													goto(`/?tag=${encodeURIComponent(tag.name)}`);
+												}}
+											>
+												{tag.name}
+											</button>
+										{/each}
+									</div>
+								{/if}
+							</div>
+
+							<!-- Arrow Icon -->
+							<div
+								class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
+							>
+								<img
+									src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
+									alt=""
+									aria-hidden="true"
+									class="h-6 w-6"
+								/>
+							</div>
+						</div>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<!-- Empty State -->
+		<div class="p-16 text-center">
+			<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-6 w-6"
+				/>
+			</div>
+			<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
+			<p class="mt-1 font-sans text-sm text-ink-2">
+				{m.docs_empty_text()}
+			</p>
+			<button
+				onclick={() => goto('/')}
+				class="mt-6 text-sm font-bold tracking-wide text-accent uppercase transition hover:text-ink"
+			>
+				{m.docs_empty_btn_clear()}
+			</button>
+		</div>
+	{/if}
+</div>

frontend/src/routes/DropZone.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+import { invalidateAll } from '$app/navigation';
+import { m } from '$lib/paraglide/messages.js';
+import { getErrorMessage } from '$lib/errors';
+
+const ACCEPTED_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
+
+let isDragging = $state(false);
+let windowDragging = $state(false);
+let dragCounter = 0;
+let isUploading = $state(false);
+let uploadProgress = $state(0);
+let uploadMessages = $state<{ text: string; isError: boolean; link?: string }[]>([]);
+let fileInput: HTMLInputElement;
+
+function handleDragOver(e: DragEvent) {
+	e.preventDefault();
+	isDragging = true;
+}
+
+function handleDragLeave() {
+	isDragging = false;
+}
+
+async function handleDrop(e: DragEvent) {
+	e.preventDefault();
+	isDragging = false;
+	windowDragging = false;
+	dragCounter = 0;
+	const files = Array.from(e.dataTransfer?.files ?? []);
+	await uploadFiles(files);
+}
+
+async function handleFileSelect(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const files = Array.from(input.files ?? []);
+	input.value = '';
+	await uploadFiles(files);
+}
+
+async function uploadFiles(files: File[]) {
+	if (files.length === 0) return;
+
+	const messages: { text: string; isError: boolean; link?: string }[] = [];
+
+	const valid: File[] = [];
+	for (const file of files) {
+		if (!ACCEPTED_TYPES.includes(file.type)) {
+			messages.push({ text: m.upload_invalid_type({ filename: file.name }), isError: true });
+		} else {
+			valid.push(file);
+		}
+	}
+
+	if (valid.length === 0) {
+		uploadMessages = messages;
+		return;
+	}
+
+	isUploading = true;
+	uploadProgress = 0;
+	try {
+		const formData = new FormData();
+		for (const file of valid) {
+			formData.append('files', file);
+		}
+
+		const { ok, body } = await new Promise<{ ok: boolean; body: string }>((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', '/api/documents/quick-upload');
+			xhr.upload.addEventListener('progress', (e) => {
+				if (e.lengthComputable) uploadProgress = Math.round((e.loaded / e.total) * 100);
+			});
+			xhr.addEventListener('load', () => resolve({ ok: xhr.status < 300, body: xhr.responseText }));
+			xhr.addEventListener('error', () => reject(new Error('Network error')));
+			xhr.send(formData);
+		});
+
+		if (ok) {
+			const result = JSON.parse(body);
+			if (result.created?.length > 0) {
+				messages.push({ text: m.upload_success({ count: result.created.length }), isError: false });
+			}
+			for (const doc of result.updated ?? []) {
+				messages.push({
+					text: m.upload_duplicate({ filename: doc.originalFilename }),
+					isError: false,
+					link: `/documents/${doc.id}`
+				});
+			}
+			for (const err of result.errors ?? []) {
+				messages.push({
+					text: `${err.filename}: ${getErrorMessage(err.code)}`,
+					isError: true
+				});
+			}
+			await invalidateAll();
+		} else {
+			for (const file of valid) {
+				messages.push({ text: m.upload_error({ filename: file.name }), isError: true });
+			}
+		}
+	} finally {
+		isUploading = false;
+		uploadProgress = 0;
+		uploadMessages = messages;
+	}
+}
+
+$effect(() => {
+	function onWindowDragEnter(e: DragEvent) {
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		dragCounter++;
+		windowDragging = true;
+	}
+
+	function onWindowDragLeave() {
+		dragCounter--;
+		if (dragCounter <= 0) {
+			dragCounter = 0;
+			windowDragging = false;
+		}
+	}
+
+	function onWindowDrop() {
+		dragCounter = 0;
+		windowDragging = false;
+	}
+
+	window.addEventListener('dragenter', onWindowDragEnter);
+	window.addEventListener('dragleave', onWindowDragLeave);
+	window.addEventListener('drop', onWindowDrop);
+
+	return () => {
+		window.removeEventListener('dragenter', onWindowDragEnter);
+		window.removeEventListener('dragleave', onWindowDragLeave);
+		window.removeEventListener('drop', onWindowDrop);
+	};
+});
+</script>
+
+<div
+	role="button"
+	tabindex="0"
+	class="mb-4 flex cursor-pointer flex-col items-center justify-center gap-2 border border-dashed px-6 transition-all duration-200 {isDragging
+		? 'border-primary bg-accent-bg py-10 text-primary'
+		: windowDragging
+			? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
+			: 'border-ink/20 py-6 text-ink-3 hover:border-primary hover:text-primary'}"
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondrop={handleDrop}
+	onclick={() => fileInput.click()}
+	onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
+>
+	{#if isUploading}
+		<div class="flex w-48 flex-col items-center gap-1">
+			<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
+				<div
+					class="h-full rounded-full bg-primary transition-all duration-200"
+					style="width: {uploadProgress}%"
+				></div>
+			</div>
+			<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
+		</div>
+	{:else}
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Copy-Item-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-8 w-8 opacity-40"
+		/>
+		<div class="flex flex-col items-center gap-0.5 text-center">
+			<span class="font-sans text-sm text-ink-2">{m.upload_drop_hint()}</span>
+			<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
+			<span class="font-sans text-xs text-ink-3 italic">{m.upload_filename_hint()}</span>
+		</div>
+	{/if}
+</div>
+
+{#if uploadMessages.length > 0}
+	<div class="mb-4 flex flex-col gap-1">
+		{#each uploadMessages as msg, i (i)}
+			<p
+				class="font-sans text-sm {msg.isError
+					? 'text-red-600'
+					: msg.link
+						? 'text-amber-700'
+						: 'text-green-700'}"
+			>
+				{msg.text}
+				{#if msg.link}
+					<a href={msg.link} class="underline hover:no-underline">{m.upload_duplicate_link()}</a>
+				{/if}
+			</p>
+		{/each}
+	</div>
+{/if}
+
+<input
+	bind:this={fileInput}
+	type="file"
+	multiple
+	accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
+	class="sr-only"
+	onchange={handleFileSelect}
+/>

frontend/src/routes/SearchFilterBar.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import TagInput from '$lib/components/TagInput.svelte';
+import { slide } from 'svelte/transition';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	q = $bindable(''),
+	from = $bindable(''),
+	to = $bindable(''),
+	senderId = $bindable(''),
+	receiverId = $bindable(''),
+	tagNames = $bindable<string[]>([]),
+	showAdvanced = $bindable(false),
+	initialSenderName = '',
+	initialReceiverName = '',
+	onSearch,
+	onfocus,
+	onblur
+}: {
+	q?: string;
+	from?: string;
+	to?: string;
+	senderId?: string;
+	receiverId?: string;
+	tagNames?: string[];
+	showAdvanced?: boolean;
+	initialSenderName?: string;
+	initialReceiverName?: string;
+	onSearch: () => void;
+	onfocus?: () => void;
+	onblur?: () => void;
+} = $props();
+</script>
+
+<div class="mb-8 rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<!-- ROW 1: Main Search (One Line) -->
+	<div class="flex items-center gap-4">
+		<!-- Full Text Search -->
+		<div class="relative flex-1">
+			<input
+				type="text"
+				bind:value={q}
+				oninput={onSearch}
+				onfocus={onfocus}
+				onblur={onblur}
+				placeholder={m.docs_search_placeholder()}
+				class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
+			/>
+			<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4 opacity-40"
+				/>
+			</div>
+		</div>
+
+		<!-- Toggle Advanced Button -->
+		<button
+			onclick={() => (showAdvanced = !showAdvanced)}
+			class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
+			/>
+			{m.docs_btn_filter()}
+		</button>
+
+		<!-- Reset Button -->
+		<a
+			href="/"
+			class="flex items-center justify-center border border-transparent px-3 py-2.5 text-ink-3 transition hover:text-red-500"
+			title={m.docs_btn_reset_title()}
+		>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 opacity-40"
+			/>
+		</a>
+	</div>
+
+	<!-- ROW 2: Advanced Filters (Collapsible) -->
+	{#if showAdvanced}
+		<div
+			transition:slide
+			class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
+		>
+			<!-- Tag Filter -->
+			<div class="md:col-span-12">
+				<p class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
+					{m.docs_filter_label_tags()}
+				</p>
+				<TagInput bind:tags={tagNames} allowCreation={false} />
+			</div>
+
+			<!-- Sender -->
+			<div class="md:col-span-3">
+				<div
+					class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+				>
+					<PersonTypeahead
+						name="senderId"
+						label={m.docs_filter_label_sender()}
+						bind:value={senderId}
+						initialName={initialSenderName}
+						onchange={onSearch}
+					/>
+				</div>
+			</div>
+
+			<!-- Receiver -->
+			<div class="md:col-span-3">
+				<div
+					class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+				>
+					<PersonTypeahead
+						name="receiverId"
+						label={m.docs_filter_label_receivers()}
+						bind:value={receiverId}
+						initialName={initialReceiverName}
+						onchange={onSearch}
+					/>
+				</div>
+			</div>
+
+			<!-- Dates -->
+			<div class="grid grid-cols-2 gap-4 md:col-span-6">
+				<div>
+					<label
+						for="from"
+						class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
+						>{m.docs_filter_label_from()}</label
+					>
+					<input
+						type="date"
+						id="from"
+						bind:value={from}
+						onchange={onSearch}
+						class="block w-full border-line py-2.5 text-sm shadow-sm"
+					/>
+				</div>
+				<div>
+					<label for="to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
+						>{m.docs_filter_label_to()}</label
+					>
+					<input
+						type="date"
+						id="to"
+						bind:value={to}
+						onchange={onSearch}
+						class="block w-full border-line py-2.5 text-sm shadow-sm"
+					/>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

frontend/src/routes/UserMenu.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { userInitials }: { userInitials: string | null } = $props();
+
+let userMenuOpen = $state(false);
+
+function clickOutside(node: HTMLElement) {
+	const handleClick = (event: MouseEvent) => {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			userMenuOpen = false;
+		}
+	};
+	document.addEventListener('click', handleClick, true);
+	return () => {
+		document.removeEventListener('click', handleClick, true);
+	};
+}
+</script>
+
+<div
+	class="relative"
+	{@attach clickOutside}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') userMenuOpen = false;
+	}}
+	role="none"
+>
+	{#if userInitials}
+		<button
+			type="button"
+			aria-expanded={userMenuOpen}
+			aria-haspopup="true"
+			onclick={() => (userMenuOpen = !userMenuOpen)}
+			class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
+		>
+			{userInitials}
+		</button>
+	{:else}
+		<button
+			type="button"
+			aria-label={m.nav_profile()}
+			aria-expanded={userMenuOpen}
+			aria-haspopup="true"
+			onclick={() => (userMenuOpen = !userMenuOpen)}
+			class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-4 w-4 opacity-50"
+			/>
+		</button>
+	{/if}
+
+	{#if userMenuOpen}
+		<div
+			class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-line bg-overlay shadow-md"
+		>
+			<a
+				href="/profile"
+				onclick={() => (userMenuOpen = false)}
+				class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted hover:text-ink"
+			>
+				{m.nav_profile()}
+			</a>
+			<div class="border-t border-line">
+				<form action="/logout" method="POST" use:enhance>
+					<button
+						type="submit"
+						class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:bg-muted hover:text-ink"
+					>
+						{m.nav_logout()}
+					</button>
+				</form>
+			</div>
+		</div>
+	{/if}
+</div>

frontend/src/routes/admin/+page.svelte

@@ -1,539 +1,74 @@
 <script lang="ts">
-import { enhance } from '$app/forms';
 import { slide } from 'svelte/transition';
 import { m } from '$lib/paraglide/messages.js';
+import UsersTab from './UsersTab.svelte';
+import TagsTab from './TagsTab.svelte';
+import GroupsTab from './GroupsTab.svelte';
+import SystemTab from './SystemTab.svelte';
 
 let { data, form } = $props();
 
 let activeTab = $state('users');
-let editingTagId: string | null = $state(null);
-let editingTagName = $state('');
-let editingGroupId: string | null = $state(null);
-let backfillResult: number | null = $state(null);
-let backfillLoading = $state(false);
-
-const availablePermissions = ['WRITE_ALL', 'ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'];
-
-function startEditTag(tag: { id: string; name: string }) {
-	editingTagId = tag.id;
-	editingTagName = tag.name;
-}
-
-function cancelEditTag() {
-	editingTagId = null;
-	editingTagName = '';
-}
-
-function startEditGroup(id: string) {
-	editingGroupId = id;
-}
-
-function cancelEditGroup() {
-	editingGroupId = null;
-}
-
-async function backfillVersions() {
-	backfillLoading = true;
-	backfillResult = null;
-	try {
-		const res = await fetch('/api/admin/backfill-versions', { method: 'POST' });
-		if (res.ok) {
-			const data = await res.json();
-			backfillResult = data.count;
-		}
-	} finally {
-		backfillLoading = false;
-	}
-}
 </script>
 
 <div class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
 	<div class="mb-8 flex items-center justify-between">
-		<h1 class="font-serif text-3xl text-brand-navy">{m.admin_heading()}</h1>
+		<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>
 
 		<!-- Tabs -->
-		<div class="flex rounded-lg border border-gray-200 bg-white p-1 shadow-sm">
+		<div class="flex rounded-lg border border-line bg-surface p-1 shadow-sm">
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'users'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
 			>
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'groups'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
 			>
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'tags'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
 			>
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'system'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
 			>
 		</div>
 	</div>
 
 	{#if form?.message}
-		<div class="mb-6 rounded border border-brand-mint/50 bg-brand-mint/20 p-4 text-brand-navy">
+		<div class="mb-6 rounded border border-accent/50 bg-accent/20 p-4 text-ink">
 			{form.message}
 		</div>
 	{/if}
 
 	{#if activeTab === 'users'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
-			<div class="flex items-center justify-between border-b border-gray-100 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
-				<a
-					href="/admin/users/new"
-					class="inline-flex items-center gap-1 rounded-sm bg-brand-navy px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
-				>
-					<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>
-					{m.admin_btn_new_user()}
-				</a>
-			</div>
-
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
-					<tr>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_login()}</th
-						>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_full_name()}</th
-						>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_groups()}</th
-						>
-						<th
-							class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_actions()}</th
-						>
-					</tr>
-				</thead>
-				<tbody class="divide-y divide-gray-200 bg-white">
-					{#each data.users as user (user.id)}
-						<tr class="group/row hover:bg-gray-50">
-							<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900">
-								{user.username}
-							</td>
-							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-								{#if user.firstName || user.lastName}
-									{user.firstName ?? ''} {user.lastName ?? ''}
-								{:else}
-									<span class="text-gray-300 italic">–</span>
-								{/if}
-							</td>
-							<td class="px-6 py-4 text-sm text-gray-500">
-								<div class="flex flex-wrap gap-1">
-									{#if user.groups && user.groups.length > 0}
-										{#each user.groups as group (group.id)}
-											<span
-												class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
-											>
-												{group.name}
-											</span>
-										{/each}
-									{:else}
-										<span class="text-xs text-gray-400 italic">{m.admin_no_groups()}</span>
-									{/if}
-								</div>
-							</td>
-							<td class="px-6 py-4 text-right whitespace-nowrap">
-								<div class="flex items-center justify-end gap-4">
-									<a
-										href="/admin/users/{user.id}"
-										class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
-									>
-										{m.btn_edit()}
-									</a>
-
-									<form
-										method="POST"
-										action="?/deleteUser"
-										use:enhance={({ cancel }) => {
-											if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
-												cancel();
-											}
-											return async ({ update }) => {
-												await update();
-											};
-										}}
-										class="flex items-center"
-									>
-										<input type="hidden" name="id" value={user.id} />
-										<button
-											class="p-1 text-gray-300 transition-colors hover:text-red-600"
-											title={m.admin_btn_delete_user_title()}
-										>
-											<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-												/>
-											</svg>
-										</button>
-									</form>
-								</div>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
+		<div in:slide>
+			<UsersTab users={data.users} />
 		</div>
 	{:else if activeTab === 'tags'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
-			<div class="border-b border-gray-100 bg-yellow-50/50 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
-				<p class="mt-1 text-xs text-yellow-800">
-					{m.admin_tags_warning()}
-				</p>
-			</div>
-
-			<ul class="max-h-[600px] divide-y divide-gray-100 overflow-y-auto">
-				{#each data.tags as tag (tag.id)}
-					<li class="group flex items-center justify-between px-6 py-3 hover:bg-gray-50">
-						{#if editingTagId === tag.id}
-							<form
-								method="POST"
-								action="?/updateTag"
-								use:enhance={() =>
-									async ({ update }) => {
-										await update();
-										cancelEditTag();
-									}}
-								class="flex flex-1 items-center gap-2"
-							>
-								<input type="hidden" name="id" value={tag.id} />
-								<input
-									type="text"
-									name="name"
-									bind:value={editingTagName}
-									class="flex-1 rounded border-brand-mint px-2 py-1 text-sm ring-1 ring-brand-mint"
-								/>
-								<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
-									><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-										><path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M5 13l4 4L19 7"
-										/></svg
-									></button
-								>
-								<button
-									type="button"
-									onclick={cancelEditTag}
-									aria-label={m.btn_cancel()}
-									class="text-gray-400 hover:text-gray-600"
-									><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-										><path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M6 18L18 6M6 6l12 12"
-										/></svg
-									></button
-								>
-							</form>
-						{:else}
-							<span class="rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy">
-								{tag.name}
-							</span>
-							<div
-								class="flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100"
-							>
-								<button
-									onclick={() => startEditTag(tag)}
-									aria-label={m.admin_btn_edit_tag_label()}
-									class="p-1 text-gray-400 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-										/></svg
-									>
-								</button>
-								<form
-									method="POST"
-									action="?/deleteTag"
-									use:enhance={({ cancel }) => {
-										if (
-											!confirm(m.admin_tag_delete_confirm())
-										) {
-											cancel();
-										}
-										return async ({ update }) => {
-											await update();
-										};
-									}}
-									class="inline"
-								>
-									<input type="hidden" name="id" value={tag.id} />
-									<button
-										aria-label={m.admin_btn_delete_tag_label()}
-										class="p-1 text-gray-400 hover:text-red-600"
-									>
-										<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-											/></svg
-										>
-									</button>
-								</form>
-							</div>
-						{/if}
-					</li>
-				{/each}
-			</ul>
+		<div in:slide>
+			<TagsTab tags={data.tags} />
 		</div>
 	{:else if activeTab === 'groups'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
-			<div class="flex items-center justify-between border-b border-gray-100 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2>
-			</div>
-
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
-					<tr>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_name()}</th
-						>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_permissions()}</th
-						>
-						<th
-							class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
-							>{m.admin_col_actions()}</th
-						>
-					</tr>
-				</thead>
-				<tbody class="divide-y divide-gray-200 bg-white">
-					{#each data.groups as group (group.id)}
-						<tr class="group/row hover:bg-gray-50">
-							{#if editingGroupId === group.id}
-								<!-- EDIT MODE -->
-								<td colspan="3" class="px-6 py-4">
-									<form
-										method="POST"
-										action="?/updateGroup"
-										use:enhance={() =>
-											async ({ update }) => {
-												await update();
-												cancelEditGroup();
-											}}
-										class="flex w-full flex-col items-start gap-4 sm:flex-row"
-									>
-										<input type="hidden" name="id" value={group.id} />
-
-										<div class="w-full sm:w-1/3">
-											<input
-												type="text"
-												name="name"
-												value={group.name}
-												class="w-full rounded border-brand-mint text-sm"
-												required
-											/>
-										</div>
-
-										<div class="flex h-full flex-1 flex-wrap items-center gap-4 pt-2">
-											{#each availablePermissions as perm (perm)}
-												<label
-													class="inline-flex items-center text-xs font-bold text-gray-600 uppercase"
-												>
-													<input
-														type="checkbox"
-														name="permissions"
-														value={perm}
-														checked={group.permissions.includes(perm)}
-														class="mr-2 rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
-													/>
-													{perm.replace('_', ' ')}
-												</label>
-											{/each}
-										</div>
-
-										<div class="flex gap-2 self-start sm:self-center">
-											<button
-												type="submit"
-												aria-label={m.btn_save()}
-												class="p-1 text-green-600 hover:text-green-800"
-											>
-												<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-													><path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="M5 13l4 4L19 7"
-													/></svg
-												>
-											</button>
-											<button
-												type="button"
-												onclick={cancelEditGroup}
-												aria-label={m.btn_cancel()}
-												class="p-1 text-gray-400 hover:text-red-500"
-											>
-												<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-													><path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="M6 18L18 6M6 6l12 12"
-													/></svg
-												>
-											</button>
-										</div>
-									</form>
-								</td>
-							{:else}
-								<!-- VIEW MODE -->
-								<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-brand-navy">
-									{group.name}
-								</td>
-								<td class="px-6 py-4 text-sm text-gray-500">
-									<div class="flex flex-wrap gap-1">
-										{#each group.permissions as perm (perm)}
-											<span
-												class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
-                                                {perm === 'ADMIN'
-													? 'border-red-100 bg-red-50 text-red-700'
-													: 'border-gray-200 bg-gray-100 text-gray-600'}"
-											>
-												{perm}
-											</span>
-										{/each}
-									</div>
-								</td>
-								<td class="px-6 py-4 text-right whitespace-nowrap">
-									<div class="flex items-center justify-end gap-3">
-										<button
-											onclick={() => startEditGroup(group.id)}
-											class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
-										>
-											{m.btn_edit()}
-										</button>
-
-										<form
-											method="POST"
-											action="?/deleteGroup"
-											use:enhance={({ cancel }) => {
-												if (!confirm(m.admin_group_delete_confirm())) {
-													cancel();
-												}
-												return async ({ update }) => {
-													await update();
-												};
-											}}
-										>
-											<input type="hidden" name="id" value={group.id} />
-											<button
-												class="p-1 text-gray-300 transition-colors hover:text-red-600"
-												title={m.btn_delete()}
-											>
-												<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-													/>
-												</svg>
-											</button>
-										</form>
-									</div>
-								</td>
-							{/if}
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-
-			<!-- CREATE GROUP FORM -->
-			<div class="border-t border-gray-200 bg-gray-50 p-6">
-				<h3 class="mb-4 text-xs font-bold tracking-wide text-gray-500 uppercase">
-					{m.admin_section_new_group()}
-				</h3>
-				<form
-					method="POST"
-					action="?/createGroup"
-					use:enhance
-					class="flex flex-col items-start gap-4 md:flex-row md:items-center"
-				>
-					<div class="w-full flex-1">
-						<input
-							type="text"
-							name="name"
-							placeholder={m.admin_group_name_placeholder()}
-							required
-							class="w-full rounded border-gray-300 text-sm"
-						/>
-					</div>
-
-					<div class="flex items-center gap-4">
-						{#each availablePermissions as perm (perm)}
-							<label class="inline-flex items-center text-xs font-bold text-gray-600 uppercase">
-								<input
-									type="checkbox"
-									name="permissions"
-									value={perm}
-									class="mr-2 rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
-								/>
-								{perm.replace('_', ' ')}
-							</label>
-						{/each}
-					</div>
-
-					<button
-						type="submit"
-						class="w-full rounded bg-brand-navy px-6 py-2 text-sm font-bold text-white uppercase hover:bg-brand-mint hover:text-brand-navy md:w-auto"
-					>
-						{m.btn_create()}
-					</button>
-				</form>
-			</div>
+		<div in:slide>
+			<GroupsTab groups={data.groups} />
 		</div>
 	{:else if activeTab === 'system'}
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2>
-			<p class="mb-4 text-sm text-gray-500">{m.admin_system_backfill_description()}</p>
-			<button
-				onclick={backfillVersions}
-				disabled={backfillLoading}
-				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-brand-mint hover:text-brand-navy disabled:cursor-not-allowed disabled:opacity-50"
-			>
-				{backfillLoading ? '…' : m.admin_system_backfill_btn()}
-			</button>
-			{#if backfillResult !== null}
-				<p class="mt-4 text-sm font-medium text-brand-navy">
-					{m.admin_system_backfill_success({ count: backfillResult })}
-				</p>
-			{/if}
+		<div in:slide>
+			<SystemTab />
 		</div>
 	{/if}
 </div>

frontend/src/routes/admin/GroupsTab.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { groups }: { groups: { id: string; name: string; permissions: string[] }[] } = $props();
+
+const availablePermissions = ['WRITE_ALL', 'ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'];
+
+let editingGroupId: string | null = $state(null);
+
+function startEditGroup(id: string) {
+	editingGroupId = id;
+}
+
+function cancelEditGroup() {
+	editingGroupId = null;
+}
+</script>
+
+<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
+	<div class="flex items-center justify-between border-b border-line-2 p-6">
+		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
+	</div>
+
+	<table class="min-w-full divide-y divide-line">
+		<thead class="bg-muted">
+			<tr>
+				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_name()}</th
+				>
+				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_permissions()}</th
+				>
+				<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_actions()}</th
+				>
+			</tr>
+		</thead>
+		<tbody class="divide-y divide-line bg-surface">
+			{#each groups as group (group.id)}
+				<tr class="group/row hover:bg-muted">
+					{#if editingGroupId === group.id}
+						<!-- EDIT MODE -->
+						<td colspan="3" class="px-6 py-4">
+							<form
+								method="POST"
+								action="?/updateGroup"
+								use:enhance={() =>
+									async ({ update }) => {
+										await update();
+										cancelEditGroup();
+									}}
+								class="flex w-full flex-col items-start gap-4 sm:flex-row"
+							>
+								<input type="hidden" name="id" value={group.id} />
+
+								<div class="w-full sm:w-1/3">
+									<input
+										type="text"
+										name="name"
+										value={group.name}
+										class="w-full rounded border-accent text-sm"
+										required
+									/>
+								</div>
+
+								<div class="flex h-full flex-1 flex-wrap items-center gap-4 pt-2">
+									{#each availablePermissions as perm (perm)}
+										<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
+											<input
+												type="checkbox"
+												name="permissions"
+												value={perm}
+												checked={group.permissions.includes(perm)}
+												class="mr-2 rounded border-line text-ink focus:ring-accent"
+											/>
+											{perm.replace('_', ' ')}
+										</label>
+									{/each}
+								</div>
+
+								<div class="flex gap-2 self-start sm:self-center">
+									<button
+										type="submit"
+										aria-label={m.btn_save()}
+										class="p-1 text-green-600 hover:text-green-800"
+									>
+										<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+											><path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M5 13l4 4L19 7"
+											/></svg
+										>
+									</button>
+									<button
+										type="button"
+										onclick={cancelEditGroup}
+										aria-label={m.btn_cancel()}
+										class="p-1 text-ink-3 hover:text-red-500"
+									>
+										<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+											><path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/></svg
+										>
+									</button>
+								</div>
+							</form>
+						</td>
+					{:else}
+						<!-- VIEW MODE -->
+						<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-ink">
+							{group.name}
+						</td>
+						<td class="px-6 py-4 text-sm text-ink-2">
+							<div class="flex flex-wrap gap-1">
+								{#each group.permissions as perm (perm)}
+									<span
+										class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
+                                        {perm === 'ADMIN'
+											? 'border-red-100 bg-red-50 text-red-700'
+											: 'border-line bg-muted text-ink-2'}"
+									>
+										{perm}
+									</span>
+								{/each}
+							</div>
+						</td>
+						<td class="px-6 py-4 text-right whitespace-nowrap">
+							<div class="flex items-center justify-end gap-3">
+								<button
+									onclick={() => startEditGroup(group.id)}
+									class="text-sm font-bold tracking-wide text-accent uppercase hover:text-ink"
+								>
+									{m.btn_edit()}
+								</button>
+
+								<form
+									method="POST"
+									action="?/deleteGroup"
+									use:enhance={({ cancel }) => {
+										if (!confirm(m.admin_group_delete_confirm())) {
+											cancel();
+										}
+										return async ({ update }) => {
+											await update();
+										};
+									}}
+								>
+									<input type="hidden" name="id" value={group.id} />
+									<button
+										class="p-1 text-ink-3 transition-colors hover:text-red-600"
+										title={m.btn_delete()}
+									>
+										<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+									</button>
+								</form>
+							</div>
+						</td>
+					{/if}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+
+	<!-- CREATE GROUP FORM -->
+	<div class="border-t border-line bg-muted p-6">
+		<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
+			{m.admin_section_new_group()}
+		</h3>
+		<form
+			method="POST"
+			action="?/createGroup"
+			use:enhance
+			class="flex flex-col items-start gap-4 md:flex-row md:items-center"
+		>
+			<div class="w-full flex-1">
+				<input
+					type="text"
+					name="name"
+					placeholder={m.admin_group_name_placeholder()}
+					required
+					class="w-full rounded border-line text-sm"
+				/>
+			</div>
+
+			<div class="flex items-center gap-4">
+				{#each availablePermissions as perm (perm)}
+					<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
+						<input
+							type="checkbox"
+							name="permissions"
+							value={perm}
+							class="mr-2 rounded border-line text-ink focus:ring-accent"
+						/>
+						{perm.replace('_', ' ')}
+					</label>
+				{/each}
+			</div>
+
+			<button
+				type="submit"
+				class="w-full rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase hover:bg-accent hover:text-ink md:w-auto"
+			>
+				{m.btn_create()}
+			</button>
+		</form>
+	</div>
+</div>

frontend/src/routes/admin/SystemTab.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let backfillResult: number | null = $state(null);
+let backfillLoading = $state(false);
+let backfillHashesResult: number | null = $state(null);
+let backfillHashesLoading = $state(false);
+
+async function backfillVersions() {
+	backfillLoading = true;
+	backfillResult = null;
+	try {
+		const res = await fetch('/api/admin/backfill-versions', { method: 'POST' });
+		if (res.ok) {
+			const data = await res.json();
+			backfillResult = data.count;
+		}
+	} finally {
+		backfillLoading = false;
+	}
+}
+
+async function backfillFileHashes() {
+	backfillHashesLoading = true;
+	backfillHashesResult = null;
+	try {
+		const res = await fetch('/api/admin/backfill-file-hashes', { method: 'POST' });
+		if (res.ok) {
+			const data = await res.json();
+			backfillHashesResult = data.count;
+		}
+	} finally {
+		backfillHashesLoading = false;
+	}
+}
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
+	<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
+	<button
+		onclick={backfillVersions}
+		disabled={backfillLoading}
+		class="rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
+	>
+		{backfillLoading ? '…' : m.admin_system_backfill_btn()}
+	</button>
+	{#if backfillResult !== null}
+		<p class="mt-4 text-sm font-medium text-ink">
+			{m.admin_system_backfill_success({ count: backfillResult })}
+		</p>
+	{/if}
+</div>
+
+<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-1 text-lg font-bold text-ink-2">
+		{m.admin_system_backfill_hashes_heading()}
+	</h2>
+	<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
+	<button
+		onclick={backfillFileHashes}
+		disabled={backfillHashesLoading}
+		class="rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
+	>
+		{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
+	</button>
+	{#if backfillHashesResult !== null}
+		<p class="mt-4 text-sm font-medium text-ink">
+			{m.admin_system_backfill_hashes_success({ count: backfillHashesResult })}
+		</p>
+	{/if}
+</div>

frontend/src/routes/admin/TagsTab.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { tags }: { tags: { id: string; name: string }[] } = $props();
+
+let editingTagId: string | null = $state(null);
+let editingTagName = $state('');
+
+function startEditTag(tag: { id: string; name: string }) {
+	editingTagId = tag.id;
+	editingTagName = tag.name;
+}
+
+function cancelEditTag() {
+	editingTagId = null;
+	editingTagName = '';
+}
+</script>
+
+<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
+	<div class="border-b border-line-2 bg-yellow-50/50 p-6">
+		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
+		<p class="mt-1 text-xs text-yellow-800">
+			{m.admin_tags_warning()}
+		</p>
+	</div>
+
+	<ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
+		{#each tags as tag (tag.id)}
+			<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
+				{#if editingTagId === tag.id}
+					<form
+						method="POST"
+						action="?/updateTag"
+						use:enhance={() =>
+							async ({ update }) => {
+								await update();
+								cancelEditTag();
+							}}
+						class="flex flex-1 items-center gap-2"
+					>
+						<input type="hidden" name="id" value={tag.id} />
+						<input
+							type="text"
+							name="name"
+							bind:value={editingTagName}
+							class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
+						/>
+						<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
+							><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+								><path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/></svg
+							></button
+						>
+						<button
+							type="button"
+							onclick={cancelEditTag}
+							aria-label={m.btn_cancel()}
+							class="text-ink-3 hover:text-ink-2"
+							><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+								><path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/></svg
+							></button
+						>
+					</form>
+				{:else}
+					<span class="rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
+						{tag.name}
+					</span>
+					<div class="flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
+						<button
+							onclick={() => startEditTag(tag)}
+							aria-label={m.admin_btn_edit_tag_label()}
+							class="p-1 text-ink-3 hover:text-ink"
+						>
+							<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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+								/></svg
+							>
+						</button>
+						<form
+							method="POST"
+							action="?/deleteTag"
+							use:enhance={({ cancel }) => {
+								if (!confirm(m.admin_tag_delete_confirm())) {
+									cancel();
+								}
+								return async ({ update }) => {
+									await update();
+								};
+							}}
+							class="inline"
+						>
+							<input type="hidden" name="id" value={tag.id} />
+							<button
+								aria-label={m.admin_btn_delete_tag_label()}
+								class="p-1 text-ink-3 hover:text-red-600"
+							>
+								<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+									/></svg
+								>
+							</button>
+						</form>
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>

frontend/src/routes/admin/UsersTab.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	users
+}: {
+	users: {
+		id: string;
+		username: string;
+		firstName?: string;
+		lastName?: string;
+		groups?: { id: string; name: string }[];
+	}[];
+} = $props();
+</script>
+
+<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm">
+	<div class="flex items-center justify-between border-b border-line-2 p-6">
+		<h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
+		<a
+			href="/admin/users/new"
+			class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+		>
+			<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>
+			{m.admin_btn_new_user()}
+		</a>
+	</div>
+
+	<table class="min-w-full divide-y divide-line">
+		<thead class="bg-muted">
+			<tr>
+				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_login()}</th
+				>
+				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_full_name()}</th
+				>
+				<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_groups()}</th
+				>
+				<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
+					>{m.admin_col_actions()}</th
+				>
+			</tr>
+		</thead>
+		<tbody class="divide-y divide-line bg-surface">
+			{#each users as user (user.id)}
+				<tr class="group/row hover:bg-muted">
+					<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
+						{user.username}
+					</td>
+					<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
+						{#if user.firstName || user.lastName}
+							{user.firstName ?? ''} {user.lastName ?? ''}
+						{:else}
+							<span class="text-ink-3 italic">–</span>
+						{/if}
+					</td>
+					<td class="px-6 py-4 text-sm text-ink-2">
+						<div class="flex flex-wrap gap-1">
+							{#if user.groups && user.groups.length > 0}
+								{#each user.groups as group (group.id)}
+									<span
+										class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
+									>
+										{group.name}
+									</span>
+								{/each}
+							{:else}
+								<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
+							{/if}
+						</div>
+					</td>
+					<td class="px-6 py-4 text-right whitespace-nowrap">
+						<div class="flex items-center justify-end gap-4">
+							<a
+								href="/admin/users/{user.id}"
+								class="text-sm font-bold tracking-wide text-accent uppercase hover:text-ink"
+							>
+								{m.btn_edit()}
+							</a>
+
+							<form
+								method="POST"
+								action="?/deleteUser"
+								use:enhance={({ cancel }) => {
+									if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
+										cancel();
+									}
+									return async ({ update }) => {
+										await update();
+									};
+								}}
+								class="flex items-center"
+							>
+								<input type="hidden" name="id" value={user.id} />
+								<button
+									class="p-1 text-ink-3 transition-colors hover:text-red-600"
+									title={m.admin_btn_delete_user_title()}
+								>
+									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										/>
+									</svg>
+								</button>
+							</form>
+						</div>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

frontend/src/routes/admin/users/[id]/+page.svelte

@@ -1,47 +1,19 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
+import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
+import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte';
 
 let { data, form } = $props();
 
-function isoToGerman(iso: string | undefined): string {
-	if (!iso) return '';
-	const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-	if (!match) return '';
-	return `${match[3]}.${match[2]}.${match[1]}`;
-}
-
-function germanToIso(german: string): string {
-	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-	if (!match) return '';
-	return `${match[3]}-${match[2]}-${match[1]}`;
-}
-
-let birthDateDisplay = $state(untrack(() => isoToGerman(data.editUser?.birthDate)));
-let birthDateIso = $state(untrack(() => data.editUser?.birthDate ?? ''));
-
-function handleBirthDateInput(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;
-	birthDateDisplay = formatted;
-	birthDateIso = germanToIso(formatted);
-}
+const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
 </script>
 
 <div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
 	<a
 		href="/admin"
-		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 	>
 		<svg
 			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -55,7 +27,7 @@ function handleBirthDateInput(e: Event) {
 		{m.btn_back_to_overview()}
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">
 		{m.admin_user_edit_heading({ username: data.editUser.username })}
 	</h1>
 
@@ -72,159 +44,48 @@ function handleBirthDateInput(e: Event) {
 
 	<form method="POST" use:enhance class="space-y-6">
 		<!-- Profile card -->
-		<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">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
-
-			<div class="space-y-4">
-				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-						>
-							{m.profile_label_first_name()}
-						</span>
-						<input
-							type="text"
-							name="firstName"
-							value={data.editUser.firstName ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-						/>
-					</label>
-
-					<label class="block">
-						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-						>
-							{m.profile_label_last_name()}
-						</span>
-						<input
-							type="text"
-							name="lastName"
-							value={data.editUser.lastName ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-						/>
-					</label>
-				</div>
-
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_birth_date()}
-					</span>
-					<input
-						type="text"
-						placeholder="TT.MM.JJJJ"
-						value={birthDateDisplay}
-						oninput={handleBirthDateInput}
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-					/>
-					<input type="hidden" name="birthDate" value={birthDateIso} />
-				</label>
-
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_email()}
-					</span>
-					<input
-						type="email"
-						name="email"
-						value={data.editUser.email ?? ''}
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-					/>
-				</label>
-
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_contact()}
-					</span>
-					<textarea
-						name="contact"
-						rows="3"
-						placeholder={m.profile_contact_placeholder()}
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-						>{data.editUser.contact ?? ''}</textarea
-					>
-				</label>
-			</div>
+			<UserProfileSection
+				firstName={data.editUser.firstName ?? ''}
+				lastName={data.editUser.lastName ?? ''}
+				birthDate={data.editUser.birthDate ?? ''}
+				email={data.editUser.email ?? ''}
+				contact={data.editUser.contact ?? ''}
+			/>
 		</div>
 
 		<!-- Groups card -->
-		<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">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_col_groups()}
 			</h2>
-
-			<div class="flex flex-wrap gap-3">
-				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
-						<input
-							type="checkbox"
-							name="groupIds"
-							value={group.id}
-							checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
-							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
-						/>
-						{group.name}
-					</label>
-				{/each}
-			</div>
+			<UserGroupsSection groups={data.groups} selectedGroupIds={selectedGroupIds} />
 		</div>
 
 		<!-- Password card -->
-		<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">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_label_new_password_optional()}
 			</h2>
-
-			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_new_password()}
-					</span>
-					<input
-						type="password"
-						name="newPassword"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-					/>
-				</label>
-
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_new_password_confirm()}
-					</span>
-					<input
-						type="password"
-						name="confirmPassword"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-					/>
-				</label>
-			</div>
+			<UserPasswordSection />
 		</div>
 
 		<!-- 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)]"
+			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
 			<a
 				href="/admin"
-				class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
+				class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
 			>
 				{m.btn_cancel()}
 			</a>
 			<button
 				type="submit"
-				class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 			>
 				{m.btn_save()}
 			</button>

frontend/src/routes/admin/users/new/+page.svelte

@@ -1,37 +1,17 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
+import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
+import AccountSection from './AccountSection.svelte';
 
 let { data, form } = $props();
-
-function germanToIso(german: string): string {
-	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-	if (!match) return '';
-	return `${match[3]}-${match[2]}-${match[1]}`;
-}
-
-let birthDateIso = $state('');
-
-function handleBirthDateInput(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;
-	birthDateIso = germanToIso(formatted);
-}
 </script>
 
 <div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
 	<a
 		href="/admin"
-		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 	>
 		<svg
 			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -45,7 +25,7 @@ function handleBirthDateInput(e: Event) {
 		{m.btn_back_to_overview()}
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.admin_user_new_heading()}</h1>
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.admin_user_new_heading()}</h1>
 
 	{#if form?.error}
 		<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
@@ -53,148 +33,35 @@ function handleBirthDateInput(e: Event) {
 		</div>
 	{/if}
 
-	<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+	<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
 		<form method="POST" use:enhance class="space-y-5">
-			<!-- Account -->
-			<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
-				{m.admin_section_users()}
-			</h2>
-
-			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
-					{m.admin_col_login()}
-				</span>
-				<input
-					type="text"
-					name="username"
-					required
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-				/>
-			</label>
-
-			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
-					{m.admin_label_initial_password()}
-				</span>
-				<input
-					type="password"
-					name="password"
-					required
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-				/>
-			</label>
+			<AccountSection />
 
 			<!-- Profile -->
-			<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
+			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
-
-			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_first_name()}
-					</span>
-					<input
-						type="text"
-						name="firstName"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-					/>
-				</label>
-
-				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
-						{m.profile_label_last_name()}
-					</span>
-					<input
-						type="text"
-						name="lastName"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-					/>
-				</label>
-			</div>
-
-			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
-					{m.profile_label_birth_date()}
-				</span>
-				<input
-					type="text"
-					placeholder="TT.MM.JJJJ"
-					oninput={handleBirthDateInput}
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-				/>
-				<input type="hidden" name="birthDate" value={birthDateIso} />
-			</label>
-
-			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
-					{m.profile_label_email()}
-				</span>
-				<input
-					type="email"
-					name="email"
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-				/>
-			</label>
-
-			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
-					{m.profile_label_contact()}
-				</span>
-				<textarea
-					name="contact"
-					rows="3"
-					placeholder={m.profile_contact_placeholder()}
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
-				></textarea>
-			</label>
+			<UserProfileSection />
 
 			<!-- Groups -->
-			<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
+			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_col_groups()}
 			</h2>
-
-			<div class="flex flex-wrap gap-3">
-				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
-						<input
-							type="checkbox"
-							name="groupIds"
-							value={group.id}
-							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
-						/>
-						{group.name}
-					</label>
-				{/each}
-			</div>
+			<UserGroupsSection groups={data.groups} />
 
 			<!-- Save bar -->
 			<div
-				class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
+				class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
 			>
 				<a
 					href="/admin"
-					class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
+					class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
 				>
 					{m.btn_cancel()}
 				</a>
 				<button
 					type="submit"
-					class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 				>
 					{m.btn_create()}
 				</button>

frontend/src/routes/admin/users/new/AccountSection.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+	{m.admin_section_users()}
+</h2>
+
+<label class="block">
+	<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.admin_col_login()}
+	</span>
+	<input
+		type="text"
+		name="username"
+		required
+		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+	/>
+</label>
+
+<label class="block">
+	<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.admin_label_initial_password()}
+	</span>
+	<input
+		type="password"
+		name="password"
+		required
+		class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
+	/>
+</label>

frontend/src/routes/conversations/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 import { goto } from '$app/navigation';
-import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
 import { untrack } from 'svelte';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { m } from '$lib/paraglide/messages.js';
-import { formatDate } from '$lib/utils/date';
+import ConversationFilterBar from './ConversationFilterBar.svelte';
+import ConversationTimeline from './ConversationTimeline.svelte';
 
 let { data } = $props();
 
@@ -14,14 +14,6 @@ let fromDate = $state(untrack(() => data.filters.from));
 let toDate = $state(untrack(() => data.filters.to));
 let sortDir = $state(untrack(() => data.filters.dir));
 
-const documentYears = $derived(
-	data.documents
-		.map((doc) => (doc.documentDate ? new Date(doc.documentDate).getFullYear() : null))
-		.filter((y): y is number => y !== null)
-);
-const yearFrom = $derived(documentYears.length > 0 ? Math.min(...documentYears) : null);
-const yearTo = $derived(documentYears.length > 0 ? Math.max(...documentYears) : null);
-
 // Sync with server data after navigation
 $effect(() => {
 	senderId = data.filters.senderId;
@@ -52,153 +44,36 @@ function swapPersons() {
 	receiverId = tmp;
 	applyFilters();
 }
-
-const enrichedDocuments = $derived(
-	data.documents.map((doc, i) => {
-		const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
-		const prevYear =
-			i > 0 && data.documents[i - 1].documentDate
-				? new Date(data.documents[i - 1].documentDate!).getFullYear()
-				: null;
-		return { doc, year, showYearDivider: year !== null && year !== prevYear };
-	})
-);
 </script>
 
 <div class="mx-auto max-w-5xl px-4 py-10">
 	<!-- Page Header -->
-	<div class="mb-8 border-b border-brand-navy/10 pb-4">
-		<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.conv_heading()}</h1>
-		<p class="mt-2 font-sans text-sm text-brand-navy/60">
+	<div class="mb-8 border-b border-ink/10 pb-4">
+		<h1 class="font-serif text-3xl font-medium text-ink">{m.conv_heading()}</h1>
+		<p class="mt-2 font-sans text-sm text-ink/60">
 			{m.conv_subtitle()}
 		</p>
 	</div>
 
-	<!-- FILTER BAR -->
-	<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
-		<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
-			<!-- Sender -->
-			<div
-				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
-			>
-				<PersonTypeahead
-					name="senderId"
-					label={m.conv_label_person_a()}
-					bind:value={senderId}
-					initialName={data.initialValues.senderName}
-					restrictToCorrespondentsOf={receiverId || undefined}
-					onchange={() => applyFilters()}
-				/>
-			</div>
-
-			<!-- Swap button — always rendered to hold grid column width on desktop.
-			     On mobile: hidden (display:none) when no persons selected so no gap appears.
-			     On desktop: invisible (visibility:hidden) when no persons so both 1fr columns stay equal. -->
-			<div class="{senderId && receiverId ? 'flex' : 'hidden md:flex'} items-end">
-				<button
-					data-testid="conv-swap-btn"
-					onclick={swapPersons}
-					class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
-					receiverId
-						? ''
-						: 'invisible'}"
-					title={m.conv_swap_btn()}
-				>
-					<svg
-						class="h-4 w-4 flex-shrink-0 md:rotate-90"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
-						></path>
-					</svg>
-					<span class="md:hidden">{m.conv_swap_btn()}</span>
-				</button>
-			</div>
-
-			<!-- Receiver -->
-			<div
-				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
-			>
-				<PersonTypeahead
-					name="receiverId"
-					label={m.conv_label_person_b()}
-					bind:value={receiverId}
-					initialName={data.initialValues.receiverName}
-					restrictToCorrespondentsOf={senderId || undefined}
-					onchange={() => applyFilters()}
-				/>
-			</div>
-		</div>
-
-		<div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
-			<!-- Date From -->
-			<div>
-				<label
-					for="dateFrom"
-					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
-					>{m.conv_label_from()}</label
-				>
-				<input
-					id="dateFrom"
-					type="date"
-					bind:value={fromDate}
-					onchange={() => applyFilters()}
-					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
-				/>
-			</div>
-
-			<!-- Date To -->
-			<div>
-				<label
-					for="dateTo"
-					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
-					>{m.conv_label_to()}</label
-				>
-				<input
-					id="dateTo"
-					type="date"
-					bind:value={toDate}
-					onchange={() => applyFilters()}
-					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
-				/>
-			</div>
-
-			<!-- Sort Toggle -->
-			<div>
-				<button
-					onclick={toggleSort}
-					class="flex h-[42px] w-full items-center justify-center border border-brand-sand text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
-				>
-					<span class="mr-2">{m.conv_sort_label()}</span>
-					<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
-					<svg
-						class="ml-2 h-4 w-4 transform {sortDir === 'ASC'
-							? 'rotate-180'
-							: ''} transition-transform"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
-						></path>
-					</svg>
-				</button>
-			</div>
-		</div>
-	</div>
+	<ConversationFilterBar
+		bind:senderId={senderId}
+		bind:receiverId={receiverId}
+		bind:fromDate={fromDate}
+		bind:toDate={toDate}
+		bind:sortDir={sortDir}
+		initialSenderName={data.initialValues.senderName}
+		initialReceiverName={data.initialValues.receiverName}
+		onapplyFilters={applyFilters}
+		ontoggleSort={toggleSort}
+		onswapPersons={swapPersons}
+	/>
 
 	<!-- RESULTS LIST SECTION -->
 	{#if !senderId || !receiverId}
 		<div
-			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-brand-sand bg-white py-24 text-center"
+			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-24 text-center"
 		>
-			<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
+			<div class="mb-4 rounded-full bg-muted p-4 text-ink">
 				<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 					><path
 						stroke-linecap="round"
@@ -208,139 +83,22 @@ const enrichedDocuments = $derived(
 					/></svg
 				>
 			</div>
-			<p class="font-serif text-lg text-brand-navy">{m.conv_empty_heading()}</p>
-			<p class="mt-1 font-sans text-sm text-gray-500">{m.conv_empty_text()}</p>
+			<p class="font-serif text-lg text-ink">{m.conv_empty_heading()}</p>
+			<p class="mt-1 font-sans text-sm text-ink-2">{m.conv_empty_text()}</p>
 		</div>
 	{:else if data.documents.length === 0}
 		<div
-			class="flex flex-col items-center justify-center rounded-sm border border-brand-sand bg-white py-24 text-center shadow-sm"
+			class="flex flex-col items-center justify-center rounded-sm border border-line bg-surface py-24 text-center shadow-sm"
 		>
-			<p class="font-serif text-brand-navy">{m.conv_no_results_heading()}</p>
-			<p class="mt-2 text-sm text-gray-400">{m.conv_no_results_text()}</p>
+			<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
+			<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
 		</div>
 	{:else}
-		<!-- Summary bar -->
-		<div class="mb-4 flex items-center justify-between">
-			{#if yearFrom !== null && yearTo !== null}
-				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-brand-navy/70">
-					{m.conv_summary({ count: data.documents.length, yearFrom, yearTo })}
-				</p>
-			{:else}
-				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-brand-navy/70">
-					{data.documents.length}
-				</p>
-			{/if}
-			{#if data.canWrite}
-				<a
-					data-testid="conv-new-doc-link"
-					href="/documents/new?senderId={senderId}&receiverId={receiverId}"
-					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"
-						></path>
-					</svg>
-					{m.conv_new_doc_link()}
-				</a>
-			{/if}
-		</div>
-
-		<!-- CHAT CONTAINER -->
-		<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
-			<!-- Decoration: Central Timeline Line -->
-			<div
-				class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-brand-sand/30 md:block"
-			></div>
-
-			<div class="p-6 md:p-8">
-				<div class="relative z-10 flex flex-col gap-4">
-					{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
-						{#if showYearDivider}
-							<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
-								<div class="flex-grow border-t border-brand-sand"></div>
-								<span
-									class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
-									>{year}</span
-								>
-								<div class="flex-grow border-t border-brand-sand"></div>
-							</div>
-						{/if}
-						{@const isRight = doc.sender?.id === senderId}
-
-						<!-- Message Row -->
-						<div class="flex w-full {isRight ? 'justify-end' : 'justify-start'}">
-							<!-- Bubble Group -->
-							<div
-								class="flex max-w-[90%] gap-3 md:max-w-[70%] {isRight
-									? 'flex-row-reverse'
-									: 'flex-row'}"
-							>
-								<!-- AVATAR -->
-								<div class="mt-auto mb-1 hidden flex-shrink-0 sm:block">
-									<div
-										class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
-                                    {isRight
-											? 'border-brand-navy bg-brand-navy text-white'
-											: 'border-brand-sand bg-white text-brand-navy'}"
-									>
-										{#if doc.sender}
-											{doc.sender.firstName[0]}{doc.sender.lastName[0]}
-										{:else}
-											?
-										{/if}
-									</div>
-								</div>
-
-								<!-- BUBBLE CARD -->
-								<a
-									href="/documents/{doc.id}"
-									class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
-                               {isRight
-										? 'rounded-br-none border-brand-navy bg-brand-navy text-white'
-										: 'rounded-bl-none border-brand-sand bg-brand-sand/10 text-brand-navy'}"
-								>
-									<!-- Header -->
-									<div class="mb-2 flex items-start justify-between gap-4">
-										<h3
-											class="font-serif text-sm leading-snug font-medium {isRight
-												? 'text-white'
-												: 'text-brand-navy'}"
-										>
-											{doc.title || doc.originalFilename}
-										</h3>
-
-										<!-- Status Dot -->
-										<span
-											class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
-                                        {doc.status === 'UPLOADED'
-												? 'bg-brand-mint'
-												: 'bg-yellow-400'}"
-											title={doc.status}
-										>
-										</span>
-									</div>
-
-									<!-- Metadata -->
-									<div
-										class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
-											? 'text-blue-100'
-											: 'text-gray-500'}"
-									>
-										<span class="flex items-center">
-											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
-										</span>
-										{#if doc.location}
-											<span class="flex items-center">
-												• {doc.location}
-											</span>
-										{/if}
-									</div>
-								</a>
-							</div>
-						</div>
-					{/each}
-				</div>
-			</div>
-		</div>
+		<ConversationTimeline
+			documents={data.documents}
+			senderId={senderId}
+			receiverId={receiverId}
+			canWrite={data.canWrite}
+		/>
 	{/if}
 </div>

frontend/src/routes/conversations/ConversationFilterBar.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	senderId = $bindable(''),
+	receiverId = $bindable(''),
+	fromDate = $bindable(''),
+	toDate = $bindable(''),
+	sortDir = $bindable('DESC'),
+	initialSenderName = '',
+	initialReceiverName = '',
+	onapplyFilters,
+	ontoggleSort,
+	onswapPersons
+}: {
+	senderId?: string;
+	receiverId?: string;
+	fromDate?: string;
+	toDate?: string;
+	sortDir?: string;
+	initialSenderName?: string;
+	initialReceiverName?: string;
+	onapplyFilters: () => void;
+	ontoggleSort: () => void;
+	onswapPersons: () => void;
+} = $props();
+</script>
+
+<div class="relative z-20 mb-10 border border-line bg-surface p-8 shadow-sm">
+	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
+		<!-- Sender -->
+		<div
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+		>
+			<PersonTypeahead
+				name="senderId"
+				label={m.conv_label_person_a()}
+				bind:value={senderId}
+				initialName={initialSenderName}
+				restrictToCorrespondentsOf={receiverId || undefined}
+				onchange={() => onapplyFilters()}
+			/>
+		</div>
+
+		<!-- Swap button -->
+		<div class="{senderId && receiverId ? 'flex' : 'hidden md:flex'} items-end">
+			<button
+				data-testid="conv-swap-btn"
+				onclick={onswapPersons}
+				class="flex w-full items-center justify-center gap-2 border border-line px-3 py-2.5 text-xs font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white md:w-auto {senderId &&
+				receiverId
+					? ''
+					: 'invisible'}"
+				title={m.conv_swap_btn()}
+			>
+				<svg
+					class="h-4 w-4 flex-shrink-0 md:rotate-90"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
+					></path>
+				</svg>
+				<span class="md:hidden">{m.conv_swap_btn()}</span>
+			</button>
+		</div>
+
+		<!-- Receiver -->
+		<div
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+		>
+			<PersonTypeahead
+				name="receiverId"
+				label={m.conv_label_person_b()}
+				bind:value={receiverId}
+				initialName={initialReceiverName}
+				restrictToCorrespondentsOf={senderId || undefined}
+				onchange={() => onapplyFilters()}
+			/>
+		</div>
+	</div>
+
+	<div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
+		<!-- Date From -->
+		<div>
+			<label
+				for="dateFrom"
+				class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
+				>{m.conv_label_from()}</label
+			>
+			<input
+				id="dateFrom"
+				type="date"
+				bind:value={fromDate}
+				onchange={() => onapplyFilters()}
+				class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+			/>
+		</div>
+
+		<!-- Date To -->
+		<div>
+			<label for="dateTo" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
+				>{m.conv_label_to()}</label
+			>
+			<input
+				id="dateTo"
+				type="date"
+				bind:value={toDate}
+				onchange={() => onapplyFilters()}
+				class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
+			/>
+		</div>
+
+		<!-- Sort Toggle -->
+		<div>
+			<button
+				onclick={ontoggleSort}
+				class="flex h-[42px] w-full items-center justify-center border border-line text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+			>
+				<span class="mr-2">{m.conv_sort_label()}</span>
+				<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
+				<svg
+					class="ml-2 h-4 w-4 transform {sortDir === 'ASC'
+						? 'rotate-180'
+						: ''} transition-transform"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
+					></path>
+				</svg>
+			</button>
+		</div>
+	</div>
+</div>

frontend/src/routes/conversations/ConversationTimeline.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { formatDate } from '$lib/utils/date';
+
+let {
+	documents,
+	senderId,
+	receiverId,
+	canWrite
+}: {
+	documents: {
+		id: string;
+		title?: string;
+		originalFilename: string;
+		documentDate?: string;
+		location?: string;
+		status: string;
+		sender?: { id: string; firstName: string; lastName: string } | null;
+	}[];
+	senderId: string;
+	receiverId: string;
+	canWrite: boolean;
+} = $props();
+
+const documentYears = $derived(
+	documents
+		.map((doc) => (doc.documentDate ? new Date(doc.documentDate).getFullYear() : null))
+		.filter((y): y is number => y !== null)
+);
+const yearFrom = $derived(documentYears.length > 0 ? Math.min(...documentYears) : null);
+const yearTo = $derived(documentYears.length > 0 ? Math.max(...documentYears) : null);
+
+const enrichedDocuments = $derived(
+	documents.map((doc, i) => {
+		const year = doc.documentDate ? new Date(doc.documentDate).getFullYear() : null;
+		const prevYear =
+			i > 0 && documents[i - 1].documentDate
+				? new Date(documents[i - 1].documentDate!).getFullYear()
+				: null;
+		return { doc, year, showYearDivider: year !== null && year !== prevYear };
+	})
+);
+</script>
+
+<!-- Summary bar -->
+<div class="mb-4 flex items-center justify-between">
+	{#if yearFrom !== null && yearTo !== null}
+		<p data-testid="conv-summary" class="font-sans text-sm font-medium text-ink/70">
+			{m.conv_summary({ count: documents.length, yearFrom, yearTo })}
+		</p>
+	{:else}
+		<p data-testid="conv-summary" class="font-sans text-sm font-medium text-ink/70">
+			{documents.length}
+		</p>
+	{/if}
+	{#if canWrite}
+		<a
+			data-testid="conv-new-doc-link"
+			href="/documents/new?senderId={senderId}&receiverId={receiverId}"
+			class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
+		>
+			<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"
+				></path>
+			</svg>
+			{m.conv_new_doc_link()}
+		</a>
+	{/if}
+</div>
+
+<!-- CHAT CONTAINER -->
+<div class="relative overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
+	<!-- Decoration: Central Timeline Line -->
+	<div
+		class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-muted md:block"
+	></div>
+
+	<div class="p-6 md:p-8">
+		<div class="relative z-10 flex flex-col gap-4">
+			{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
+				{#if showYearDivider}
+					<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
+						<div class="flex-grow border-t border-line"></div>
+						<span class="mx-4 font-sans text-xs font-bold tracking-widest text-ink/40 uppercase"
+							>{year}</span
+						>
+						<div class="flex-grow border-t border-line"></div>
+					</div>
+				{/if}
+				{@const isRight = doc.sender?.id === senderId}
+
+				<!-- Message Row -->
+				<div class="flex w-full {isRight ? 'justify-end' : 'justify-start'}">
+					<!-- Bubble Group -->
+					<div
+						class="flex max-w-[90%] gap-3 md:max-w-[70%] {isRight
+							? 'flex-row-reverse'
+							: 'flex-row'}"
+					>
+						<!-- AVATAR -->
+						<div class="mt-auto mb-1 hidden flex-shrink-0 sm:block">
+							<div
+								class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
+                                {isRight
+									? 'border-primary bg-primary text-primary-fg'
+									: 'border-line bg-surface text-ink'}"
+							>
+								{#if doc.sender}
+									{doc.sender.firstName[0]}{doc.sender.lastName[0]}
+								{:else}
+									?
+								{/if}
+							</div>
+						</div>
+
+						<!-- BUBBLE CARD -->
+						<a
+							href="/documents/{doc.id}"
+							class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
+                               {isRight
+								? 'rounded-br-none border-primary bg-primary text-primary-fg'
+								: 'rounded-bl-none border-line bg-muted/50 text-ink'}"
+						>
+							<!-- Header -->
+							<div class="mb-2 flex items-start justify-between gap-4">
+								<h3
+									class="font-serif text-sm leading-snug font-medium {isRight
+										? 'text-primary-fg'
+										: 'text-ink'}"
+								>
+									{doc.title || doc.originalFilename}
+								</h3>
+
+								<!-- Status Dot -->
+								<span
+									class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
+                                    {doc.status === 'UPLOADED' ? 'bg-accent' : 'bg-yellow-400'}"
+									title={doc.status}
+								>
+								</span>
+							</div>
+
+							<!-- Metadata -->
+							<div
+								class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
+									? 'text-primary-fg/70'
+									: 'text-ink-2'}"
+							>
+								<span class="flex items-center">
+									{doc.documentDate ? formatDate(doc.documentDate) : '—'}
+								</span>
+								{#if doc.location}
+									<span class="flex items-center">
+										• {doc.location}
+									</span>
+								{/if}
+							</div>
+						</a>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>

frontend/src/routes/documents/[id]/+page.svelte

@@ -3,8 +3,8 @@ import { onMount } from 'svelte';
 import DocumentTopBar from '$lib/components/DocumentTopBar.svelte';
 import DocumentViewer from '$lib/components/DocumentViewer.svelte';
 import DocumentBottomPanel from '$lib/components/DocumentBottomPanel.svelte';
-
-type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
+import AnnotationSidePanel from '$lib/components/AnnotationSidePanel.svelte';
+import type { DocumentPanelTab } from '$lib/types';
 
 let { data } = $props();
 
@@ -56,55 +56,72 @@ async function loadFile(id: string) {
 
 let annotateMode = $state(false);
 let activeAnnotationId = $state<string | null>(null);
+let activeAnnotationPage = $state<number | null>(null);
 
-// When an annotation is clicked, open the Diskussion tab.
+// Close the panel when entering annotate mode so the PDF is fully visible.
 $effect(() => {
-	if (activeAnnotationId) {
-		activeTab = 'discussion';
-		panelOpen = true;
-	}
+	if (annotateMode) panelOpen = false;
 });
 
 // ── Bottom panel state ────────────────────────────────────────────────────────
 
-const LS_KEY_OPEN = 'doc-panel-open';
 const LS_KEY_HEIGHT = 'doc-panel-height';
 const LS_KEY_TAB = 'doc-panel-tab';
+const LS_KEY_OPEN = 'doc-panel-open';
 
 let panelOpen = $state(false);
-let panelHeight = $state(320);
-let activeTab = $state<Tab>('metadata');
+let panelHeight = $state(0); // set to full height on mount
+let navHeight = $state(0);
+let activeTab = $state<DocumentPanelTab>('metadata');
 let localStorageRestored = $state(false);
 
 onMount(() => {
-	const savedOpen = localStorage.getItem(LS_KEY_OPEN);
+	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
+
 	const savedHeight = localStorage.getItem(LS_KEY_HEIGHT);
 	const savedTab = localStorage.getItem(LS_KEY_TAB);
+	const savedOpen = localStorage.getItem(LS_KEY_OPEN);
 
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
-		activeTab = savedTab as Tab;
+		activeTab = savedTab as DocumentPanelTab;
 	}
+	const topbar = document.querySelector('[data-topbar]');
+	panelHeight = window.innerHeight - navHeight - (topbar?.getBoundingClientRect().height ?? 0);
 	if (savedHeight) {
 		const h = parseInt(savedHeight, 10);
 		if (!isNaN(h) && h >= 80) panelHeight = h;
 	}
-	if (savedOpen !== null) {
-		panelOpen = savedOpen === 'true';
-	} else if (!doc.filePath) {
-		// No previous state and no file → open to Metadaten by default
+
+	if (savedOpen === 'true') {
+		panelOpen = true;
+	} else if (savedOpen === null && !doc?.filePath) {
+		// No prior state and no file — open to metadata so the panel is immediately useful.
 		panelOpen = true;
 		activeTab = 'metadata';
 	}
 
 	localStorageRestored = true;
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			if (activeAnnotationId) {
+				activeAnnotationId = null;
+				activeAnnotationPage = null;
+			} else if (panelOpen) {
+				panelOpen = false;
+			}
+		}
+	}
+	document.addEventListener('keydown', onKeyDown);
+	return () => document.removeEventListener('keydown', onKeyDown);
 });
 
 // Persist panel state whenever it changes (after initial restore).
 $effect(() => {
 	if (!localStorageRestored) return;
-	localStorage.setItem(LS_KEY_OPEN, String(panelOpen));
 	localStorage.setItem(LS_KEY_HEIGHT, String(panelHeight));
 	localStorage.setItem(LS_KEY_TAB, activeTab);
+	localStorage.setItem(LS_KEY_OPEN, String(panelOpen));
 });
 </script>
 
@@ -112,7 +129,11 @@ $effect(() => {
 	<title>{doc.title || doc.originalFilename || 'Dokument'}</title>
 </svelte:head>
 
-<div class="flex h-screen flex-col overflow-hidden bg-white" data-hydrated>
+<div
+	class="fixed right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden bg-surface"
+	style="top: {navHeight}px"
+	data-hydrated
+>
 	<DocumentTopBar
 		doc={doc}
 		canWrite={data.canWrite ?? false}
@@ -129,21 +150,33 @@ $effect(() => {
 			error={fileError}
 			bind:annotateMode={annotateMode}
 			bind:activeAnnotationId={activeAnnotationId}
+			bind:activeAnnotationPage={activeAnnotationPage}
 			onAnnotationClick={(id) => {
 				activeAnnotationId = id;
 			}}
 		/>
+		<AnnotationSidePanel
+			documentId={doc.id}
+			activeAnnotationId={activeAnnotationId}
+			activeAnnotationPage={activeAnnotationPage}
+			canComment={canComment}
+			currentUserId={currentUserId}
+			canAdmin={canAdmin}
+			onClose={() => {
+				activeAnnotationId = null;
+				activeAnnotationPage = null;
+			}}
+		/>
 	</div>
-</div>
 
-<DocumentBottomPanel
-	doc={doc}
-	comments={(data.comments ?? []) as never[]}
-	canComment={canComment}
-	currentUserId={currentUserId}
-	canAdmin={canAdmin}
-	bind:open={panelOpen}
-	bind:height={panelHeight}
-	bind:activeTab={activeTab}
-	activeAnnotationId={activeAnnotationId}
-/>
+	<DocumentBottomPanel
+		doc={doc}
+		comments={(data.comments ?? []) as never[]}
+		canComment={canComment}
+		currentUserId={currentUserId}
+		canAdmin={canAdmin}
+		bind:open={panelOpen}
+		bind:height={panelHeight}
+		bind:activeTab={activeTab}
+	/>
+</div>

frontend/src/routes/documents/[id]/edit/+page.server.ts

@@ -41,7 +41,7 @@ export async function load({
 }
 
 export const actions = {
-	default: async ({ request, params, fetch }) => {
+	update: async ({ request, params, fetch }) => {
 		// Raw fetch is used here because FormData multipart bodies are passed through
 		// directly from the browser without transformation.
 		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
@@ -58,5 +58,67 @@ export const actions = {
 		}
 
 		throw redirect(303, `/documents/${params.id}`);
+	},
+
+	markForReview: async ({
+		params,
+		fetch
+	}: {
+		params: { id: string };
+		fetch: typeof globalThis.fetch;
+	}) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+		const api = createApiClient(fetch);
+
+		// Fetch current document to preserve all existing fields
+		const docResult = await api.GET('/api/documents/{id}', { params: { path: { id: params.id } } });
+		if (!docResult.response.ok) {
+			const code = (docResult.error as unknown as { code?: string })?.code;
+			return fail(docResult.response.status, { error: getErrorMessage(code) });
+		}
+
+		const doc = docResult.data!;
+		const formData = new FormData();
+		if (doc.title) formData.set('title', doc.title);
+		if (doc.documentDate) formData.set('documentDate', doc.documentDate);
+		if (doc.location) formData.set('location', doc.location);
+		if (doc.documentLocation) formData.set('documentLocation', doc.documentLocation);
+		if (doc.transcription) formData.set('transcription', doc.transcription);
+		if (doc.summary) formData.set('summary', doc.summary);
+		if (doc.sender?.id) formData.set('senderId', doc.sender.id);
+		if (doc.receivers?.length) {
+			doc.receivers.forEach((r: { id: string }) => formData.append('receiverIds', r.id));
+		}
+		if (doc.tags?.length) {
+			formData.set('tags', doc.tags.map((t: { name: string }) => t.name).join(','));
+		}
+		formData.set('metadataComplete', 'false');
+
+		const res = await fetch(`${baseUrl}/api/documents/${params.id}`, {
+			method: 'PUT',
+			body: formData
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return fail(res.status, { error: getErrorMessage(backendError?.code) });
+		}
+
+		throw redirect(303, `/documents/${params.id}`);
+	},
+
+	delete: async ({ params, fetch }) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+
+		const res = await fetch(`${baseUrl}/api/documents/${params.id}`, {
+			method: 'DELETE'
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return fail(res.status, { error: getErrorMessage(backendError?.code) });
+		}
+
+		throw redirect(303, '/');
 	}
 };

frontend/src/routes/documents/[id]/edit/+page.svelte

@@ -1,11 +1,12 @@
 <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';
 import { untrack } from 'svelte';
-import { isoToGerman, germanToIso } from '$lib/utils';
 import { m } from '$lib/paraglide/messages.js';
+import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
+import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
+import FileSectionEdit from './FileSectionEdit.svelte';
+import SaveBar from './SaveBar.svelte';
 
 let { data, form } = $props();
 
@@ -13,29 +14,6 @@ let { document: doc } = untrack(() => data);
 let tags = $state(doc.tags ? doc.tags.map((t: { name: string }) => t.name) : []);
 let senderId = $state(doc.sender?.id ?? '');
 let selectedReceivers = $state(doc.receivers ?? []);
-
-let dateDisplay = $state(isoToGerman(doc.documentDate ?? ''));
-let dateIso = $state(doc.documentDate ?? '');
-let dateDirty = $state(false);
-
-const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
-
-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;
-}
 </script>
 
 <div class="mx-auto max-w-4xl px-4 py-8">
@@ -43,7 +21,7 @@ function handleDateInput(e: Event) {
 	<div class="mb-6">
 		<a
 			href="/documents/{doc.id}"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -53,9 +31,9 @@ function handleDateInput(e: Event) {
 			/>
 			{m.btn_back_to_document()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">
+		<h1 class="font-serif text-3xl text-ink">
 			{m.doc_edit_heading()} —
-			<span class="text-brand-navy/70">{doc.title || doc.originalFilename}</span>
+			<span class="text-ink/70">{doc.title || doc.originalFilename}</span>
 		</h1>
 	</div>
 
@@ -63,201 +41,33 @@ function handleDateInput(e: Event) {
 		<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">
-				{m.doc_section_who_when()}
-			</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"
-						>{m.form_label_date()}</label
-					>
-					<input
-						id="documentDate"
-						type="text"
-						inputmode="numeric"
-						value={dateDisplay}
-						oninput={handleDateInput}
-						placeholder={m.form_placeholder_date()}
-						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">{m.form_date_error()}</p>
-					{/if}
-				</div>
-
-				<!-- Ort -->
-				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
-						>{m.form_label_location()}</label
-					>
-					<input
-						id="location"
-						type="text"
-						name="location"
-						value={doc.location || ''}
-						placeholder={m.form_placeholder_location()}
-						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={m.form_label_sender()}
-						bind:value={senderId}
-						initialName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
-					/>
-				</div>
-
-				<!-- Empfänger -->
-				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</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">
-				{m.doc_section_description()}
-			</h2>
-
-			<div class="space-y-5">
-				<!-- Titel -->
-				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
-						>{m.form_label_title()} *</label
-					>
-					<input
-						id="title"
-						type="text"
-						name="title"
-						value={doc.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"
-						>{m.form_label_archive_location()}</label
-					>
-					<input
-						id="documentLocation"
-						type="text"
-						name="documentLocation"
-						value={doc.documentLocation || ''}
-						placeholder={m.form_placeholder_archive_location()}
-						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">{m.form_helper_archive_location()}</p>
-				</div>
-
-				<!-- Schlagworte -->
-				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</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"
-						>{m.form_label_content()}</label
-					>
-					<textarea
-						id="summary"
-						name="summary"
-						rows="5"
-						placeholder={m.form_placeholder_content()}
-						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"
-						>{doc.summary || ''}</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">
-				{m.form_label_transcription()}
-			</h2>
-			<textarea
-				id="transcription"
-				name="transcription"
-				rows="12"
-				placeholder={m.form_placeholder_transcription()}
-				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"
-				>{doc.transcription || ''}</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">
-				{m.doc_section_file()}
-			</h2>
-
-			<div
-				class="mb-4 flex items-center gap-3 rounded bg-brand-sand/20 px-3 py-2 text-sm text-gray-600"
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4 flex-shrink-0"
-				/>
-				<span
-					>{m.doc_current_file_label()}
-					<strong class="font-medium text-brand-navy">{doc.originalFilename}</strong></span
-				>
-			</div>
-
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
-				{m.doc_file_replace_label()}
-				<span class="font-normal text-gray-400">({m.doc_file_replace_note()})</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="/documents/{doc.id}"
-				class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
-			>
-				{m.btn_cancel()}
-			</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"
-			>
-				{m.btn_save()}
-			</button>
-		</div>
+	<form
+		id="update-form"
+		method="POST"
+		action="?/update"
+		enctype="multipart/form-data"
+		use:enhance
+		class="space-y-6 pb-20"
+	>
+		<WhoWhenSection
+			bind:senderId={senderId}
+			bind:selectedReceivers={selectedReceivers}
+			initialDateIso={doc.documentDate ?? ''}
+			initialLocation={doc.location ?? ''}
+			initialSenderName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
+		/>
+		<DescriptionSection
+			bind:tags={tags}
+			initialTitle={doc.title ?? ''}
+			initialDocumentLocation={doc.documentLocation ?? ''}
+			initialSummary={doc.summary ?? ''}
+			titleRequired={true}
+		/>
+		<TranscriptionSection initialTranscription={doc.transcription ?? ''} />
+		<FileSectionEdit originalFilename={doc.originalFilename} />
+		<SaveBar docId={doc.id} />
 	</form>
+
+	<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>
+	<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
 </div>

frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { originalFilename }: { originalFilename: string } = $props();
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_file()}
+	</h2>
+
+	<div class="mb-4 flex items-center gap-3 rounded bg-muted px-3 py-2 text-sm text-ink-2">
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-4 w-4 flex-shrink-0"
+		/>
+		<span
+			>{m.doc_current_file_label()}
+			<strong class="font-medium text-ink">{originalFilename}</strong></span
+		>
+	</div>
+
+	<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
+		{m.doc_file_replace_label()}
+		<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
+	</label>
+	<input
+		id="file-upload"
+		type="file"
+		name="file"
+		class="block w-full cursor-pointer text-sm
+               text-ink-2 file:mr-4 file:rounded
+               file:border-0 file:bg-muted
+               file:px-4 file:py-2
+               file:text-sm file:font-semibold
+               file:text-ink hover:file:bg-muted"
+	/>
+</div>

frontend/src/routes/documents/[id]/edit/SaveBar.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { docId }: { docId: string } = $props();
+
+let confirmDelete = $state(false);
+</script>
+
+<div
+	class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+>
+	<!-- Left: delete -->
+	<div class="flex items-center gap-3">
+		{#if confirmDelete}
+			<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+			<button
+				type="submit"
+				form="delete-form"
+				class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+			>
+				{m.btn_delete()}
+			</button>
+			<button
+				type="button"
+				onclick={() => (confirmDelete = false)}
+				class="text-sm text-ink-2 transition-colors hover:text-ink"
+			>
+				{m.btn_cancel()}
+			</button>
+		{:else}
+			<button
+				type="button"
+				onclick={() => (confirmDelete = true)}
+				class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<polyline points="3 6 5 6 21 6" />
+					<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+					<path d="M10 11v6M14 11v6" />
+					<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+				</svg>
+				{m.btn_delete()}
+			</button>
+		{/if}
+	</div>
+
+	<!-- Right: cancel + mark for review + save -->
+	<div class="flex items-center gap-4">
+		<a
+			href="/documents/{docId}"
+			class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="mark-for-review-form"
+			class="rounded-sm border border-gray-300 px-4 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+		>
+			{m.btn_mark_for_review()}
+		</button>
+		<button
+			type="submit"
+			class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
+		>
+			{m.btn_save()}
+		</button>
+	</div>
+</div>

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

@@ -55,22 +55,41 @@ export async function load({
 	};
 }
 
+async function submitNewDocument(
+	request: Request,
+	fetch: typeof globalThis.fetch,
+	metadataComplete: boolean
+) {
+	const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+	const formData = await request.formData();
+	formData.set('metadataComplete', String(metadataComplete));
+
+	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}`);
+}
+
 export const actions = {
-	default: async ({ request, fetch }) => {
-		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
-		const formData = await request.formData();
+	save: async ({ request, fetch }: { request: Request; fetch: typeof globalThis.fetch }) => {
+		return submitNewDocument(request, fetch, false);
+	},
 
-		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}`);
+	saveReviewed: async ({
+		request,
+		fetch
+	}: {
+		request: Request;
+		fetch: typeof globalThis.fetch;
+	}) => {
+		return submitNewDocument(request, fetch, true);
 	}
 };

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

@@ -1,10 +1,12 @@
 <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';
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
+import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
+import FileSectionNew from './FileSectionNew.svelte';
+import { type FilenameParseResult } from '$lib/utils/filename';
 
 let { data, form } = $props();
 
@@ -14,35 +16,31 @@ let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $
 	untrack(() => data.initialReceivers)
 );
 
-let dateDisplay = $state('');
-let dateIso = $state('');
-let dateDirty = $state(false);
+let parsedSuggestion = $state<FilenameParseResult>({});
 
-const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
+// Title is derived from the filename suggestion unless the user has typed something
+let titleDirty = $state(false);
+let titleOverride = $state('');
+let titleValue = $derived(
+	titleDirty ? titleOverride : (parsedSuggestion.suggestedTitle ?? titleOverride)
+);
 
-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}`;
-}
+// Details panel: starts open when prefill data is present or a form error occurred.
+// Auto-opens when filename parsing finds a date/sender, but never force-closes — user
+// can always collapse the section manually.
+let detailsOpen = $state(
+	!!(
+		untrack(() => data.initialSenderId) ||
+		untrack(() => data.initialReceivers).length > 0 ||
+		untrack(() => form)?.error
+	)
+);
 
-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)}`;
+$effect(() => {
+	if (parsedSuggestion.dateIso || senderId || selectedReceivers.length > 0) {
+		detailsOpen = true;
 	}
-	input.value = formatted;
-	dateDisplay = formatted;
-	dateIso = germanToIso(formatted);
-	dateDirty = true;
-}
+});
 </script>
 
 <div class="mx-auto max-w-4xl px-4 py-8">
@@ -50,7 +48,7 @@ function handleDateInput(e: Event) {
 	<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"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<svg
 				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -67,7 +65,7 @@ function handleDateInput(e: Event) {
 			</svg>
 			{m.btn_back_to_overview()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">{m.doc_new_heading()}</h1>
+		<h1 class="font-serif text-3xl text-ink">{m.doc_new_heading()}</h1>
 	</div>
 
 	{#if form?.error}
@@ -75,179 +73,78 @@ function handleDateInput(e: Event) {
 	{/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">
-				{m.doc_section_who_when()}
-			</h2>
+		<!-- File upload — prominent, at the top -->
+		<FileSectionNew onfileParsed={(r) => (parsedSuggestion = r)} />
 
-			<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"
-						>{m.form_label_date()}</label
-					>
-					<input
-						id="documentDate"
-						type="text"
-						inputmode="numeric"
-						value={dateDisplay}
-						oninput={handleDateInput}
-						placeholder={m.form_placeholder_date()}
-						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">
-							{m.form_date_error()}
-						</p>
-					{/if}
-				</div>
-
-				<!-- Ort -->
-				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
-						>{m.form_label_location()}</label
-					>
-					<input
-						id="location"
-						type="text"
-						name="location"
-						placeholder={m.form_placeholder_location()}
-						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={m.form_label_sender()}
-						bind:value={senderId}
-						initialName={data.initialSenderName}
-					/>
-				</div>
-
-				<!-- Empfänger -->
-				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</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">
-				{m.doc_section_description()}
-			</h2>
-
-			<div class="space-y-5">
-				<!-- Titel -->
-				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
-						>{m.form_label_title()} *</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"
-						>{m.form_label_archive_location()}</label
-					>
-					<input
-						id="documentLocation"
-						type="text"
-						name="documentLocation"
-						placeholder={m.form_placeholder_archive_location()}
-						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">{m.form_helper_archive_location()}</p>
-				</div>
-
-				<!-- Schlagworte -->
-				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</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"
-						>{m.form_label_content()}</label
-					>
-					<textarea
-						id="summary"
-						name="summary"
-						rows="5"
-						placeholder={m.form_placeholder_content()}
-						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">
-				{m.form_label_transcription()}
-			</h2>
-			<textarea
-				id="transcription"
-				name="transcription"
-				rows="12"
-				placeholder={m.form_placeholder_transcription()}
-				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">
-				{m.doc_section_file()}
-			</h2>
-
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
-				{m.doc_file_upload_label()}
-				<span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
-			</label>
+		<!-- Standalone title card -->
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<label for="new-title" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_title()}</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"
+				id="new-title"
+				type="text"
+				name="title"
+				value={titleValue}
+				oninput={(e) => {
+					titleOverride = (e.target as HTMLInputElement).value;
+					titleDirty = true;
+				}}
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+				placeholder="Titel eingeben…"
 			/>
 		</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)]"
+		<!-- Collapsible further details -->
+		<details
+			bind:open={detailsOpen}
+			class="group rounded-sm border border-line bg-surface shadow-sm"
 		>
-			<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
+			<summary class="cursor-pointer list-none px-6 py-4">
+				<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
+					>{m.doc_more_details()}</span
+				>
+			</summary>
+			<div class="space-y-6 px-0 pb-6">
+				<WhoWhenSection
+					bind:senderId={senderId}
+					bind:selectedReceivers={selectedReceivers}
+					initialSenderName={data.initialSenderName}
+					suggestedDateIso={parsedSuggestion.dateIso ?? ''}
+					suggestedSenderName={parsedSuggestion.personName ?? ''}
+				/>
+				<DescriptionSection bind:tags={tags} hideTitle={true} />
+				<TranscriptionSection />
+			</div>
+		</details>
+
+		<!-- Sticky Save Bar -->
+		<div
+			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+		>
+			<a href="/" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
 				{m.btn_cancel()}
 			</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"
-			>
-				{m.btn_save()}
-			</button>
+			<div class="flex items-center gap-3">
+				<button
+					type="submit"
+					name="metadataComplete"
+					value="false"
+					formaction="?/save"
+					class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+				>
+					{m.btn_save()}
+				</button>
+				<button
+					type="submit"
+					name="metadataComplete"
+					value="true"
+					formaction="?/saveReviewed"
+					class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+				>
+					{m.btn_save_and_mark_reviewed()}
+				</button>
+			</div>
 		</div>
 	</form>
 </div>

frontend/src/routes/documents/new/FileSectionNew.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { parseFilename, stripExtension, type FilenameParseResult } from '$lib/utils/filename';
+
+let {
+	onfileParsed
+}: {
+	onfileParsed?: (result: FilenameParseResult) => void;
+} = $props();
+
+let selectedFilename = $state<string | null>(null);
+
+function handleFileChange(e: Event) {
+	const file = (e.target as HTMLInputElement).files?.[0];
+	if (!file) return;
+	selectedFilename = file.name;
+	const parsed = parseFilename(file.name);
+	const result: FilenameParseResult = {
+		...parsed,
+		suggestedTitle: parsed.suggestedTitle ?? stripExtension(file.name)
+	};
+	onfileParsed?.(result);
+}
+</script>
+
+<div class="rounded-sm border border-line bg-surface shadow-sm">
+	<div class="border-b border-line px-6 py-4">
+		<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.doc_section_file()}
+		</h2>
+	</div>
+
+	<label
+		for="file-upload"
+		class="flex cursor-pointer flex-col items-center gap-3 px-6 py-10 transition-colors hover:bg-muted/40"
+	>
+		<svg
+			class="h-10 w-10 text-ink-3"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.5"
+				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+			/>
+		</svg>
+		{#if selectedFilename}
+			<span class="text-ink-1 text-sm font-medium">{selectedFilename}</span>
+		{:else}
+			<span class="text-sm font-medium text-ink-2">{m.doc_file_upload_label()}</span>
+			<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span>
+		{/if}
+	</label>
+	<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
+</div>

frontend/src/routes/enrich/+page.server.ts

@@ -0,0 +1,23 @@
+import { redirect } from '@sveltejs/kit';
+import { createApiClient } from '$lib/api.server';
+
+export async function load({
+	fetch,
+	locals
+}: {
+	fetch: typeof globalThis.fetch;
+	locals: App.Locals;
+}) {
+	const canWrite =
+		locals.user?.groups?.some((g: { permissions: string[] }) =>
+			g.permissions.includes('WRITE_ALL')
+		) ?? false;
+	if (!canWrite) throw redirect(303, '/');
+
+	const api = createApiClient(fetch);
+	const result = await api.GET('/api/documents/incomplete');
+
+	const documents = result.response.ok ? (result.data ?? []) : [];
+
+	return { documents };
+}

frontend/src/routes/enrich/+page.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { data } = $props();
+
+const documents = $derived(data.documents);
+const count = $derived(documents.length);
+
+function formatUploadDate(createdAt: string): string {
+	return new Intl.DateTimeFormat('de-DE', {
+		day: 'numeric',
+		month: 'long',
+		year: 'numeric'
+	}).format(new Date(createdAt));
+}
+</script>
+
+<div class="mx-auto max-w-4xl px-4 py-10">
+	<!-- Back Link -->
+	<a
+		href="/"
+		class="group mb-4 inline-flex items-center font-sans text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+	>
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+		/>
+		{m.enrich_list_back()}
+	</a>
+
+	<!-- Page Header -->
+	<div class="border-brand-sand mb-8 flex items-center justify-between border-b pb-6">
+		<div>
+			<h1 class="font-serif text-3xl font-medium text-brand-navy">
+				{m.enrich_list_heading()}
+			</h1>
+			{#if count > 0}
+				<p class="mt-2 font-sans text-sm text-brand-navy/60">
+					{count}
+					{m.enrich_list_count()}
+				</p>
+			{/if}
+		</div>
+
+		{#if count > 0}
+			<a
+				href="/enrich/{documents[0].id}"
+				class="bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+			>
+				{m.enrich_list_start()}
+			</a>
+		{/if}
+	</div>
+
+	<!-- Empty State -->
+	{#if count === 0}
+		<div
+			class="border-brand-sand flex flex-col items-center justify-center rounded-sm border border-dashed bg-white py-20 text-center"
+		>
+			<div class="bg-brand-sand/60 mb-4 flex h-14 w-14 items-center justify-center rounded-full">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Check/Check-Circle-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-7 w-7 opacity-50"
+				/>
+			</div>
+			<p class="font-serif text-lg font-medium text-brand-navy">
+				{m.enrich_list_empty_heading()}
+			</p>
+			<p class="mt-2 max-w-xs font-sans text-sm text-brand-navy/60">
+				{m.enrich_list_empty_body()}
+			</p>
+		</div>
+	{:else}
+		<!-- Document Rows -->
+		<div class="border-brand-sand border bg-white shadow-sm">
+			<ul class="divide-brand-sand divide-y">
+				{#each documents as doc (doc.id)}
+					<li class="group hover:bg-brand-sand/30 transition-colors duration-200">
+						<a href="/enrich/{doc.id}" class="flex items-center justify-between p-6">
+							<div class="min-w-0 flex-1">
+								<p
+									class="font-serif text-lg font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
+								>
+									{doc.title || doc.originalFilename}
+								</p>
+								<p class="mt-1 font-sans text-xs text-brand-navy/50">
+									{formatUploadDate(doc.createdAt)}
+								</p>
+							</div>
+							<img
+								src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
+								alt=""
+								aria-hidden="true"
+								class="ml-4 h-5 w-5 shrink-0 opacity-30 transition-opacity group-hover:opacity-70"
+							/>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</div>

frontend/src/routes/enrich/[id]/+page.server.ts

@@ -0,0 +1,109 @@
+import { error, redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage, parseBackendError } from '$lib/errors';
+
+export async function load({
+	params,
+	fetch,
+	locals
+}: {
+	params: { id: string };
+	fetch: typeof globalThis.fetch;
+	locals: App.Locals;
+}) {
+	const canWrite =
+		locals.user?.groups?.some((g: { permissions: string[] }) =>
+			g.permissions.includes('WRITE_ALL')
+		) ?? false;
+	if (!canWrite) throw redirect(303, '/');
+
+	const { id } = params;
+	const api = createApiClient(fetch);
+
+	const [docResult, countResult] = await Promise.all([
+		api.GET('/api/documents/{id}', { params: { path: { id } } }),
+		api.GET('/api/documents/incomplete-count')
+	]);
+
+	if (!docResult.response.ok) {
+		const code = (docResult.error as unknown as { code?: string })?.code;
+		throw error(docResult.response.status, getErrorMessage(code));
+	}
+
+	const incompleteCount = countResult.response.ok ? (countResult.data?.count ?? 0) : 0;
+
+	return {
+		document: docResult.data!,
+		incompleteCount
+	};
+}
+
+async function redirectToNext(id: string, fetch: typeof globalThis.fetch): Promise<never> {
+	const api = createApiClient(fetch);
+	const nextResult = await api.GET('/api/documents/incomplete/next', {
+		params: { query: { excludeId: id } }
+	});
+
+	if (nextResult.response.ok && nextResult.data) {
+		throw redirect(303, `/enrich/${nextResult.data.id}`);
+	}
+	throw redirect(303, '/enrich/done');
+}
+
+export const actions = {
+	skip: async ({ params, fetch }: { params: { id: string }; fetch: typeof globalThis.fetch }) => {
+		await redirectToNext(params.id, fetch);
+	},
+
+	save: async ({
+		params,
+		request,
+		fetch
+	}: {
+		params: { id: string };
+		request: Request;
+		fetch: typeof globalThis.fetch;
+	}) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+		const formData = await request.formData();
+
+		const res = await fetch(`${baseUrl}/api/documents/${params.id}`, {
+			method: 'PUT',
+			body: formData
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return { error: getErrorMessage(backendError?.code) };
+		}
+
+		await redirectToNext(params.id, fetch);
+	},
+
+	saveAndReview: async ({
+		params,
+		request,
+		fetch
+	}: {
+		params: { id: string };
+		request: Request;
+		fetch: typeof globalThis.fetch;
+	}) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+		const formData = await request.formData();
+		formData.set('metadataComplete', 'true');
+
+		const res = await fetch(`${baseUrl}/api/documents/${params.id}`, {
+			method: 'PUT',
+			body: formData
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return { error: getErrorMessage(backendError?.code) };
+		}
+
+		await redirectToNext(params.id, fetch);
+	}
+};

frontend/src/routes/enrich/[id]/+page.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { onMount, untrack } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
+import DocumentViewer from '$lib/components/DocumentViewer.svelte';
+import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
+import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+
+let { data, form } = $props();
+
+const doc = $derived(data.document);
+
+// File preview state
+let fileUrl = $state('');
+let fileError = $state('');
+let isLoading = $state(false);
+
+let navHeight = $state(0);
+onMount(() => {
+	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
+});
+
+// Dummy bindable state required by DocumentViewer
+let annotateMode = $state(false);
+let activeAnnotationId = $state<string | null>(null);
+let activeAnnotationPage = $state<number | null>(null);
+
+$effect(() => {
+	if (doc?.id && doc?.filePath) {
+		loadFile(doc.id);
+	}
+});
+
+async function loadFile(id: string) {
+	isLoading = true;
+	fileError = '';
+	fileUrl = '';
+	try {
+		const response = await fetch(`/api/documents/${id}/file`);
+		if (!response.ok) throw new Error('Fehler');
+		const blob = await response.blob();
+		fileUrl = URL.createObjectURL(blob);
+	} catch {
+		fileError = m.doc_file_error_preview();
+	} finally {
+		isLoading = false;
+	}
+}
+
+// Form state
+let tags = $state(untrack(() => doc.tags?.map((t: { name: string }) => t.name) ?? []));
+let senderId = $state(untrack(() => doc.sender?.id ?? ''));
+let selectedReceivers = $state(untrack(() => doc.receivers ?? []));
+</script>
+
+<svelte:head>
+	<title>{doc.title || doc.originalFilename || 'Dokument'} — Anreicherung</title>
+</svelte:head>
+
+<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
+	<!-- Top bar -->
+	<div class="flex items-center justify-between border-b border-line bg-surface px-6 py-3">
+		<a
+			href="/enrich"
+			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+			/>
+			{m.enrich_back_to_list()}
+		</a>
+
+		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
+			{doc.title || doc.originalFilename}
+		</p>
+
+		<p class="font-sans text-xs text-ink-3">
+			{m.enrich_progress({ count: data.incompleteCount })}
+		</p>
+	</div>
+
+	<!-- Main content -->
+	<div class="flex flex-1 overflow-hidden">
+		<!-- Left: PDF preview (60%) -->
+		<div class="relative flex-[6] overflow-hidden border-r border-line">
+			<DocumentViewer
+				doc={doc}
+				fileUrl={fileUrl}
+				isLoading={isLoading}
+				error={fileError}
+				bind:annotateMode={annotateMode}
+				bind:activeAnnotationId={activeAnnotationId}
+				bind:activeAnnotationPage={activeAnnotationPage}
+				onAnnotationClick={() => {}}
+			/>
+		</div>
+
+		<!-- Right: form (40%) -->
+		<div class="flex flex-[4] flex-col overflow-hidden">
+			{#if form?.error}
+				<div class="border-b border-red-200 bg-red-50 px-6 py-3 text-sm text-red-700">
+					{form.error}
+				</div>
+			{/if}
+
+			<form
+				id="save-form"
+				method="POST"
+				action="?/save"
+				enctype="multipart/form-data"
+				use:enhance
+				class="flex-1 space-y-5 overflow-y-auto p-6"
+			>
+				<WhoWhenSection
+					bind:senderId={senderId}
+					bind:selectedReceivers={selectedReceivers}
+					initialDateIso={doc.documentDate ?? ''}
+					initialLocation={doc.location ?? ''}
+					initialSenderName={doc.sender
+						? `${doc.sender.firstName} ${doc.sender.lastName}`
+						: ''}
+				/>
+				<DescriptionSection bind:tags={tags} initialTitle={doc.title ?? ''} titleRequired={true} />
+			</form>
+
+			<!-- Skip form (outside main form to avoid nesting) -->
+			<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
+
+			<!-- Action bar -->
+			<div class="flex items-center justify-between gap-3 border-t border-line bg-surface p-4">
+				<!-- Skip button linked to skip-form -->
+				<button
+					type="submit"
+					form="skip-form"
+					class="font-sans text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+				>
+					{m.enrich_skip()}
+				</button>
+
+				<div class="flex items-center gap-3">
+					<!-- Save -->
+					<button
+						type="submit"
+						form="save-form"
+						formaction="?/save"
+						class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+					>
+						{m.btn_save()}
+					</button>
+
+					<!-- Save & mark as reviewed -->
+					<button
+						type="submit"
+						form="save-form"
+						formaction="?/saveAndReview"
+						class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+					>
+						{m.btn_save_and_mark_reviewed()}
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

frontend/src/routes/enrich/done/+page.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<div class="mx-auto max-w-4xl px-4 py-10">
+	<div
+		class="border-brand-sand flex flex-col items-center justify-center rounded-sm border bg-white py-20 text-center shadow-sm"
+	>
+		<img
+			src="/degruyter-icons/Simple/Large-32px/SVG/Action/Check/Check-Double-LG.svg"
+			alt=""
+			aria-hidden="true"
+			class="mb-6 h-16 w-16"
+		/>
+
+		<h1 class="font-serif text-2xl font-medium text-brand-navy">
+			{m.enrich_done_heading()}
+		</h1>
+
+		<p class="mt-2 max-w-xs font-sans text-sm text-gray-500">
+			{m.enrich_done_body()}
+		</p>
+
+		<div class="mt-8 flex flex-col items-center gap-4">
+			<a
+				href="/"
+				class="bg-brand-navy px-6 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+			>
+				{m.btn_back_to_overview()}
+			</a>
+
+			<a
+				href="/enrich"
+				class="font-sans text-xs text-gray-400 underline-offset-4 transition-colors hover:text-brand-navy hover:underline"
+			>
+				{m.enrich_back_to_list()}
+			</a>
+		</div>
+	</div>
+</div>

frontend/src/routes/forgot-password/+page.svelte

@@ -4,7 +4,7 @@ import { m } from '$lib/paraglide/messages.js';
 let { form }: { form?: { error?: string; success?: boolean } } = $props();
 </script>
 
-<div class="relative flex min-h-screen flex-col bg-white">
+<div class="relative flex min-h-screen flex-col bg-surface">
 	<!-- Accent strip -->
 	<div class="h-1 bg-brand-purple"></div>
 
@@ -13,15 +13,15 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 			<!-- Logo -->
 			<div class="mb-10 text-center">
 				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
-					<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
+					<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
 						>Familienarchiv</span
 					>
 				</a>
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
-				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
+			<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
+				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
 					{m.forgot_password_heading()}
 				</h1>
 
@@ -30,9 +30,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 						<p class="font-sans text-xs text-green-700">{m.forgot_password_success()}</p>
 					</div>
 
-					<a
-						href="/login"
-						class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+					<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 						>{m.forgot_password_back_to_login()}</a
 					>
 				{:else}
@@ -40,7 +38,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 						<div>
 							<label
 								for="email"
-								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 								>{m.forgot_password_email_label()}</label
 							>
 							<input
@@ -49,7 +47,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 								id="email"
 								required
 								autocomplete="email"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>
 
@@ -59,15 +57,13 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 
 						<button
 							type="submit"
-							class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
 						>
 							{m.forgot_password_submit()}
 						</button>
 
 						<div class="mt-4 text-center">
-							<a
-								href="/login"
-								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 								>{m.forgot_password_back_to_login()}</a
 							>
 						</div>
@@ -79,6 +75,6 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 
 	<!-- Footer -->
 	<div class="py-4 text-center">
-		<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
+		<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
 	</div>
 </div>