feat(upload): show progress bar in drop zone during upload

Replaces fetch with XMLHttpRequest to get upload progress events.
The drop zone shows a filling progress bar and percentage while
files are uploading, then reverts to the normal hint when done.

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,9 @@ package org.raddatz.familienarchiv.controller;
 
 import java.io.IOException;
 import java.time.LocalDate;
+import java.util.ArrayList;
 import java.util.List;
+import java.util.Set;
 import java.util.UUID;
 
 
@@ -23,6 +25,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 +106,56 @@ 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("/search")
     public ResponseEntity<List<Document>> search(
             @RequestParam(required = false) String q,

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)

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,8 @@ 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();
+
     @Query("SELECT DISTINCT d FROM Document d " +
             "JOIN d.receivers r " +
             "WHERE " +

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,19 +40,23 @@ 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()) {
@@ -58,22 +64,23 @@ public class DocumentService {
         } else {
             document = Document.builder()
                     .originalFilename(originalFilename)
-                    .title(originalFilename)
+                    .title(stripExtension(originalFilename))
                     .status(DocumentStatus.UPLOADED)
                     .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
@@ -120,8 +127,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);
         }
@@ -170,12 +178,9 @@ public class DocumentService {
 
         // 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 +237,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 +280,14 @@ public class DocumentService {
         return documentRepository.findConversation(senderId, receiverId, dateFrom, dateTo, sort);
     }
 
+    @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 +296,45 @@ 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 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/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/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

@@ -121,6 +121,97 @@ 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/{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

@@ -21,6 +21,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 +32,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 +160,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 +234,128 @@ 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());
+    }
+
+    @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);
+    }
 }

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

@@ -216,3 +216,35 @@ test.describe('Admin — tag management', () => {
 		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

@@ -347,13 +347,142 @@ 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 });
+
+		await expect(page.locator('[data-testid^="annotation-"]')).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 +494,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/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",
@@ -241,6 +244,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 +264,15 @@
 	"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": "Dateien ablegen oder auswählen",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"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}"
 }

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",
@@ -241,6 +244,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 +264,15 @@
 	"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 files or click to select",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"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}"
 }

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",
@@ -241,6 +244,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 +264,15 @@
 	"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": "Soltar archivos o hacer clic para seleccionar",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"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}"
 }

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/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

@@ -191,26 +191,26 @@ onMount(() => {
 
 <div class="space-y-4">
 	{#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"
+							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-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={() => saveEdit(thread.id)}
 							>
 								{m.btn_save()}
 							</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={cancelEdit}
 							>
 								{m.btn_cancel()}
@@ -221,29 +221,27 @@ onMount(() => {
 					<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>
+								<span class="font-sans text-xs font-semibold text-ink">{thread.authorName}</span>
+								<span class="font-sans text-xs text-ink-3">{timeAgo(thread.createdAt)}</span>
 								{#if wasEdited(thread)}
-									<span class="font-sans text-xs text-gray-400">
+									<span class="font-sans text-xs text-ink-3">
 										{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>
+							<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{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"
+									class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 									onclick={() => startEdit(thread)}
 								>
 									{m.btn_edit()}
 								</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={() => deleteComment(thread.id)}
 								>
 									{m.btn_delete()}
@@ -255,7 +253,7 @@ onMount(() => {
 					{#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"
+								class="font-sans text-xs font-medium text-accent transition-colors hover:text-ink"
 								onclick={() => startReply(thread.id)}
 							>
 								{m.comment_btn_reply()}
@@ -267,24 +265,24 @@ onMount(() => {
 
 			<!-- Replies -->
 			{#each thread.replies as reply, ri (reply.id)}
-				<div class="mt-3 ml-6 border-l-2 border-brand-sand pl-4">
+				<div class="mt-3 ml-6 border-l-2 border-line 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"
+								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-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={() => saveEdit(reply.id)}
 								>
 									{m.btn_save()}
 								</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={cancelEdit}
 								>
 									{m.btn_cancel()}
@@ -295,29 +293,27 @@ onMount(() => {
 						<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>
+									<span class="font-sans text-xs font-semibold text-ink">{reply.authorName}</span>
+									<span class="font-sans text-xs text-ink-3">{timeAgo(reply.createdAt)}</span>
 									{#if wasEdited(reply)}
-										<span class="font-sans text-xs text-gray-400">
+										<span class="font-sans text-xs text-ink-3">
 											{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>
+								<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{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"
+										class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 										onclick={() => startEdit(reply)}
 									>
 										{m.btn_edit()}
 									</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={() => deleteComment(reply.id)}
 									>
 										{m.btn_delete()}
@@ -329,7 +325,7 @@ onMount(() => {
 						{#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"
+									class="font-sans text-xs font-medium text-accent transition-colors hover:text-ink"
 									onclick={() => startReply(thread.id)}
 								>
 									{m.comment_btn_reply()}
@@ -344,21 +340,21 @@ onMount(() => {
 			{#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()}
@@ -371,17 +367,17 @@ onMount(() => {
 
 	<!-- New top-level comment textarea -->
 	{#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/DocumentBottomPanel.svelte

@@ -48,8 +48,6 @@ type Props = {
 	open: boolean;
 	height: number;
 	activeTab: Tab;
-	activeAnnotationId: string | null;
-	onAnnotationCommentCountChange?: (annotationId: string, count: number) => void;
 };
 
 let {
@@ -60,23 +58,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 fullHeight() {
+	const topbar = document.querySelector('[data-topbar]');
+	return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
+}
+
 function openTab(tab: Tab) {
 	activeTab = tab;
 	if (!open) {
 		open = true;
-		if (height <= MIN_HEIGHT) height = DEFAULT_HEIGHT;
+		if (height <= MIN_HEIGHT) height = fullHeight();
 	}
 }
 
@@ -95,14 +95,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));
 	}
 }
 
@@ -121,13 +121,13 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 </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,17 +137,17 @@ 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()}
@@ -162,7 +162,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 +181,10 @@ 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}
 				/>
 			{:else if activeTab === 'history'}
 				<PanelHistory documentId={doc.id} />

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,5 +1,4 @@
 <script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
 import CommentThread from './CommentThread.svelte';
 
 type CommentReply = {
@@ -23,63 +22,21 @@ type Comment = {
 
 type Props = {
 	documentId: string;
-	activeAnnotationId: string | null;
 	initialComments: Comment[];
 	canComment: boolean;
 	currentUserId: string | null;
 	canAdmin: boolean;
-	onAnnotationCommentCountChange?: (annotationId: string, count: number) => void;
 };
 
-let {
-	documentId,
-	activeAnnotationId,
-	initialComments,
-	canComment,
-	currentUserId,
-	canAdmin,
-	onAnnotationCommentCountChange
-}: Props = $props();
+let { documentId, initialComments, canComment, currentUserId, canAdmin }: 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}
+	/>
 </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,24 @@ import { onMount } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist';
 import AnnotationLayer from './AnnotationLayer.svelte';
+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);
@@ -48,11 +53,18 @@ type Annotation = {
 	height: number;
 	color: string;
 	createdAt: string;
+	fileHash?: string | null;
 };
 
 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 +225,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 +249,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 +277,10 @@ $effect(() => {
 	}
 });
 
+$effect(() => {
+	if (annotateMode) showAnnotations = true;
+});
+
 function prevPage() {
 	if (currentPage > 1) currentPage -= 1;
 }
@@ -280,28 +299,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 +347,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 +361,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 +370,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 +389,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 +407,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 +434,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 +495,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

@@ -111,7 +111,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 +123,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/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;
@@ -420,6 +516,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 +622,7 @@ export interface components {
             title: string;
             filePath?: string;
             contentType?: string;
+            fileHash?: string;
             originalFilename: string;
             /** @enum {string} */
             status: "PLACEHOLDER" | "UPLOADED" | "TRANSCRIBED" | "REVIEWED" | "ARCHIVED";
@@ -548,6 +661,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 +1232,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 +1561,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?: {
@@ -1422,4 +1839,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/routes/+layout.svelte

@@ -5,6 +5,7 @@ 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';
 
 let { children, data } = $props();
 
@@ -23,6 +24,10 @@ onMount(() => {
 	hydrated = true;
 });
 
+const isAuthPage = $derived(
+	['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))
+);
+
 let userMenuOpen = $state(false);
 
 const userInitials = $derived.by(() => {
@@ -45,9 +50,9 @@ function clickOutside(node: HTMLElement) {
 }
 </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>
 
@@ -57,7 +62,7 @@ function clickOutside(node: HTMLElement) {
 					<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"
+								<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
 									>Familienarchiv</span
 								>
 							</a>
@@ -68,8 +73,8 @@ function clickOutside(node: HTMLElement) {
 								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'}"
+                                    ? 'rounded bg-nav-active text-ink'
+                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 							>
 								{m.nav_documents()}
 							</a>
@@ -78,8 +83,8 @@ function clickOutside(node: HTMLElement) {
 								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'}"
+                                    ? 'rounded bg-nav-active text-ink'
+                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 							>
 								{m.nav_persons()}
 							</a>
@@ -88,8 +93,8 @@ function clickOutside(node: HTMLElement) {
 								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'}"
+                                    ? 'rounded bg-nav-active text-ink'
+                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 							>
 								{m.nav_conversations()}
 							</a>
@@ -98,8 +103,8 @@ function clickOutside(node: HTMLElement) {
 									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'}"
+                                        ? 'rounded bg-nav-active text-ink'
+                                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 								>
 									{m.nav_admin()}
 								</a>
@@ -110,21 +115,24 @@ function clickOutside(node: HTMLElement) {
 					<!-- 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>
 
+						<!-- Theme toggle -->
+						<ThemeToggle />
+
 						<!-- User menu -->
 						<div
 							class="relative"
@@ -138,7 +146,7 @@ function clickOutside(node: HTMLElement) {
 									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"
+									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>
@@ -149,7 +157,7 @@ function clickOutside(node: HTMLElement) {
 									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"
+									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"
@@ -162,20 +170,20 @@ function clickOutside(node: HTMLElement) {
 
 							{#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"
+									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-gray-600 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
+										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-brand-sand">
+									<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-gray-400 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
+												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>
@@ -190,7 +198,7 @@ function clickOutside(node: HTMLElement) {
 		</header>
 	{/if}
 
-	<main class="py-6">
+	<main class={isAuthPage ? '' : 'py-6'}>
 		{@render children()}
 	</main>
 </div>

frontend/src/routes/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
-import { goto } from '$app/navigation';
+import { goto, invalidateAll } 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 { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
+import { getErrorMessage } from '$lib/errors';
 
 let { data } = $props();
 
@@ -18,6 +19,16 @@ let senderId = $state(untrack(() => data.filters?.senderId || ''));
 let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
 let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
 
+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;
+
 let searchTimer: ReturnType<typeof setTimeout>;
 
 const hasAdvancedFilters = (filters: typeof data.filters) =>
@@ -29,6 +40,101 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
 
 let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
 
+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 }[] = [];
+
+	// Client-side type validation
+	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;
+	}
+}
+
 function triggerSearch() {
 	const params = new SvelteURLSearchParams();
 
@@ -62,6 +168,40 @@ $effect(() => {
 	}
 });
 
+// Expand drop zone whenever a file is dragged anywhere over the browser window
+$effect(() => {
+	if (!data.canWrite) return;
+
+	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);
+	};
+});
+
 // Sync local state with server data after navigation.
 // Guard q: skip overwrite while the user is actively typing in the search field.
 $effect(() => {
@@ -78,7 +218,7 @@ $effect(() => {
 <!-- 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">
+	<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 -->
@@ -90,7 +230,7 @@ $effect(() => {
 					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"
+					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
@@ -105,7 +245,7 @@ $effect(() => {
 			<!-- 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"
+				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"
@@ -119,7 +259,7 @@ $effect(() => {
 			<!-- 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"
+				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
@@ -135,11 +275,11 @@ $effect(() => {
 		{#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"
+				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-gray-500 uppercase">
+					<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} />
@@ -148,7 +288,7 @@ $effect(() => {
 				<!-- 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"
+						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"
@@ -163,7 +303,7 @@ $effect(() => {
 				<!-- 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"
+						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"
@@ -180,7 +320,7 @@ $effect(() => {
 					<div>
 						<label
 							for="from"
-							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+							class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 							>{m.docs_filter_label_from()}</label
 						>
 						<input
@@ -188,13 +328,13 @@ $effect(() => {
 							id="from"
 							bind:value={from}
 							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
+							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-gray-500 uppercase"
+							class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 							>{m.docs_filter_label_to()}</label
 						>
 						<input
@@ -202,7 +342,7 @@ $effect(() => {
 							id="to"
 							bind:value={to}
 							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
+							class="block w-full border-line py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 				</div>
@@ -210,12 +350,80 @@ $effect(() => {
 		{/if}
 	</div>
 
+	{#if data.canWrite}
+		<!-- UPLOAD DROP ZONE -->
+		<div
+			role="button"
+			tabindex="0"
+			class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm 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-3 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()}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4 shrink-0 opacity-50"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+				<polyline points="17 8 12 3 7 8" />
+				<line x1="12" y1="3" x2="12" y2="15" />
+			</svg>
+			{#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}
+				<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
+				<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
+			{/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}
+	{/if}
+
 	<!-- 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"
+				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"
@@ -229,15 +437,15 @@ $effect(() => {
 	</div>
 
 	<!-- DOCUMENT LIST -->
-	<div class="border border-brand-sand bg-white shadow-sm">
+	<div class="border border-line bg-surface 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">
+			<ul class="divide-y divide-line-2">
 				{#each data.documents as doc (doc.id)}
-					<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
+					<li class="group transition-colors duration-200 hover:bg-muted/50">
 						<!-- LINK TO DETAIL PAGE -->
 						<a href="/documents/{doc.id}" class="block p-6">
 							<div class="flex flex-col gap-6 sm:flex-row">
@@ -246,24 +454,14 @@ $effect(() => {
 									<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"
+											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>
-
-										<!-- 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="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"
@@ -290,28 +488,26 @@ $effect(() => {
 									<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"
+												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-gray-900"
-													>{doc.sender.firstName} {doc.sender.lastName}</span
-												>
+												<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
 											{:else}
-												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
+												<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-gray-400 uppercase"
+												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-gray-900">
+												<span class="text-ink">
 													{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
 												</span>
 											{:else}
-												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
+												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
 											{/if}
 										</div>
 									</div>
@@ -322,7 +518,7 @@ $effect(() => {
 											{#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"
+													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}
@@ -334,7 +530,7 @@ $effect(() => {
 
 								<!-- Arrow Icon -->
 								<div
-									class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
+									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"
@@ -351,9 +547,7 @@ $effect(() => {
 		{: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"
-				>
+				<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=""
@@ -361,17 +555,25 @@ $effect(() => {
 						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">
+				<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-brand-mint uppercase transition hover:text-brand-navy"
+					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>
+	<input
+		bind:this={fileInput}
+		type="file"
+		multiple
+		accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
+		class="sr-only"
+		onchange={handleFileSelect}
+	/>
 </main>

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

@@ -11,6 +11,8 @@ let editingTagName = $state('');
 let editingGroupId: string | null = $state(null);
 let backfillResult: number | null = $state(null);
 let backfillLoading = $state(false);
+let backfillHashesResult: number | null = $state(null);
+let backfillHashesLoading = $state(false);
 
 const availablePermissions = ['WRITE_ALL', 'ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'];
 
@@ -45,58 +47,72 @@ async function backfillVersions() {
 		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="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>
+		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
+			<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-brand-navy px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					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
@@ -110,38 +126,37 @@ async function backfillVersions() {
 				</a>
 			</div>
 
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+			<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-gray-500 uppercase"
+						<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-gray-500 uppercase"
+						<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-gray-500 uppercase"
+						<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-gray-500 uppercase"
+						<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-gray-200 bg-white">
+				<tbody class="divide-y divide-line bg-surface">
 					{#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">
+						<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-gray-500">
+							<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-gray-300 italic">–</span>
+									<span class="text-ink-3 italic">–</span>
 								{/if}
 							</td>
-							<td class="px-6 py-4 text-sm text-gray-500">
+							<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)}
@@ -152,7 +167,7 @@ async function backfillVersions() {
 											</span>
 										{/each}
 									{:else}
-										<span class="text-xs text-gray-400 italic">{m.admin_no_groups()}</span>
+										<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
 									{/if}
 								</div>
 							</td>
@@ -160,7 +175,7 @@ async function backfillVersions() {
 								<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"
+										class="text-sm font-bold tracking-wide text-accent uppercase hover:text-ink"
 									>
 										{m.btn_edit()}
 									</a>
@@ -180,7 +195,7 @@ async function backfillVersions() {
 									>
 										<input type="hidden" name="id" value={user.id} />
 										<button
-											class="p-1 text-gray-300 transition-colors hover:text-red-600"
+											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">
@@ -201,17 +216,17 @@ async function backfillVersions() {
 			</table>
 		</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>
+		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
+			<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-gray-100 overflow-y-auto">
+			<ul class="max-h-[600px] divide-y divide-line-2 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">
+					<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
 						{#if editingTagId === tag.id}
 							<form
 								method="POST"
@@ -228,7 +243,7 @@ async function backfillVersions() {
 									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"
+									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"
@@ -244,7 +259,7 @@ async function backfillVersions() {
 									type="button"
 									onclick={cancelEditTag}
 									aria-label={m.btn_cancel()}
-									class="text-gray-400 hover:text-gray-600"
+									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"
@@ -256,7 +271,7 @@ async function backfillVersions() {
 								>
 							</form>
 						{:else}
-							<span class="rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy">
+							<span class="rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
 								{tag.name}
 							</span>
 							<div
@@ -265,7 +280,7 @@ async function backfillVersions() {
 								<button
 									onclick={() => startEditTag(tag)}
 									aria-label={m.admin_btn_edit_tag_label()}
-									class="p-1 text-gray-400 hover:text-brand-navy"
+									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
@@ -294,7 +309,7 @@ async function backfillVersions() {
 									<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"
+										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
@@ -313,29 +328,28 @@ async function backfillVersions() {
 			</ul>
 		</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 class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
+			<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-gray-200">
-				<thead class="bg-gray-50">
+			<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-gray-500 uppercase"
+						<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-gray-500 uppercase"
+						<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-gray-500 uppercase"
+						<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-gray-200 bg-white">
+				<tbody class="divide-y divide-line bg-surface">
 					{#each data.groups as group (group.id)}
-						<tr class="group/row hover:bg-gray-50">
+						<tr class="group/row hover:bg-muted">
 							{#if editingGroupId === group.id}
 								<!-- EDIT MODE -->
 								<td colspan="3" class="px-6 py-4">
@@ -356,7 +370,7 @@ async function backfillVersions() {
 												type="text"
 												name="name"
 												value={group.name}
-												class="w-full rounded border-brand-mint text-sm"
+												class="w-full rounded border-accent text-sm"
 												required
 											/>
 										</div>
@@ -364,14 +378,14 @@ async function backfillVersions() {
 										<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"
+													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-gray-300 text-brand-navy focus:ring-brand-mint"
+														class="mr-2 rounded border-line text-ink focus:ring-accent"
 													/>
 													{perm.replace('_', ' ')}
 												</label>
@@ -397,7 +411,7 @@ async function backfillVersions() {
 												type="button"
 												onclick={cancelEditGroup}
 												aria-label={m.btn_cancel()}
-												class="p-1 text-gray-400 hover:text-red-500"
+												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
@@ -413,17 +427,17 @@ async function backfillVersions() {
 								</td>
 							{:else}
 								<!-- VIEW MODE -->
-								<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-brand-navy">
+								<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-gray-500">
+								<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-gray-200 bg-gray-100 text-gray-600'}"
+													: 'border-line bg-muted text-ink-2'}"
 											>
 												{perm}
 											</span>
@@ -434,7 +448,7 @@ async function backfillVersions() {
 									<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"
+											class="text-sm font-bold tracking-wide text-accent uppercase hover:text-ink"
 										>
 											{m.btn_edit()}
 										</button>
@@ -453,7 +467,7 @@ async function backfillVersions() {
 										>
 											<input type="hidden" name="id" value={group.id} />
 											<button
-												class="p-1 text-gray-300 transition-colors hover:text-red-600"
+												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">
@@ -475,8 +489,8 @@ async function backfillVersions() {
 			</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">
+			<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
@@ -491,18 +505,18 @@ async function backfillVersions() {
 							name="name"
 							placeholder={m.admin_group_name_placeholder()}
 							required
-							class="w-full rounded border-gray-300 text-sm"
+							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-gray-600 uppercase">
+							<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-gray-300 text-brand-navy focus:ring-brand-mint"
+									class="mr-2 rounded border-line text-ink focus:ring-accent"
 								/>
 								{perm.replace('_', ' ')}
 							</label>
@@ -511,7 +525,7 @@ async function backfillVersions() {
 
 					<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"
+						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>
@@ -519,21 +533,40 @@ async function backfillVersions() {
 			</div>
 		</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>
+		<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-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"
+				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-brand-navy">
+				<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>
 	{/if}
 </div>

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

@@ -41,7 +41,7 @@ function handleBirthDateInput(e: Event) {
 <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 +55,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,8 +72,8 @@ 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>
 
@@ -81,7 +81,7 @@ function handleBirthDateInput(e: Event) {
 				<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"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_first_name()}
 						</span>
@@ -89,13 +89,13 @@ function handleBirthDateInput(e: Event) {
 							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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_last_name()}
 						</span>
@@ -103,15 +103,13 @@ function handleBirthDateInput(e: Event) {
 							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"
+							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-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_birth_date()}
 					</span>
 					<input
@@ -119,36 +117,32 @@ function handleBirthDateInput(e: Event) {
 						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"
+						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-gray-400 uppercase"
-					>
+					<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={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"
+						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-gray-400 uppercase"
-					>
+					<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-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						>{data.editUser.contact ?? ''}</textarea
 					>
 				</label>
@@ -156,20 +150,20 @@ function handleBirthDateInput(e: Event) {
 		</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">
+					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 						<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"
+							class="rounded border-line text-ink focus:ring-accent"
 						/>
 						{group.name}
 					</label>
@@ -178,35 +172,31 @@ function handleBirthDateInput(e: Event) {
 		</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"
-					>
+					<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"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						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-gray-400 uppercase"
-					>
+					<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"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 				</label>
 			</div>
@@ -214,17 +204,17 @@ function handleBirthDateInput(e: Event) {
 
 		<!-- 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

@@ -31,7 +31,7 @@ function handleBirthDateInput(e: Event) {
 <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 +45,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,129 +53,115 @@ 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">
+			<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-gray-400 uppercase"
-				>
+				<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-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					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-gray-400 uppercase"
-				>
+				<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-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				/>
 			</label>
 
 			<!-- 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"
-					>
+					<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"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						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-gray-400 uppercase"
-					>
+					<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"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						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-gray-400 uppercase"
-				>
+				<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"
 					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"
+					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-gray-400 uppercase"
-				>
+				<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"
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					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-gray-400 uppercase"
-				>
+				<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-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				></textarea>
 			</label>
 
 			<!-- 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">
+					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 						<input
 							type="checkbox"
 							name="groupIds"
 							value={group.id}
-							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+							class="rounded border-line text-ink focus:ring-accent"
 						/>
 						{group.name}
 					</label>
@@ -184,17 +170,17 @@ function handleBirthDateInput(e: Event) {
 
 			<!-- 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/conversations/+page.svelte

@@ -67,19 +67,19 @@ const enrichedDocuments = $derived(
 
 <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="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-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"
+				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"
@@ -98,7 +98,7 @@ const enrichedDocuments = $derived(
 				<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 &&
+					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'}"
@@ -123,7 +123,7 @@ const enrichedDocuments = $derived(
 
 			<!-- 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"
+				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"
@@ -141,7 +141,7 @@ const enrichedDocuments = $derived(
 			<div>
 				<label
 					for="dateFrom"
-					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+					class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 					>{m.conv_label_from()}</label
 				>
 				<input
@@ -149,7 +149,7 @@ const enrichedDocuments = $derived(
 					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"
+					class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
 				/>
 			</div>
 
@@ -157,7 +157,7 @@ const enrichedDocuments = $derived(
 			<div>
 				<label
 					for="dateTo"
-					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+					class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 					>{m.conv_label_to()}</label
 				>
 				<input
@@ -165,7 +165,7 @@ const enrichedDocuments = $derived(
 					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"
+					class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
 				/>
 			</div>
 
@@ -173,7 +173,7 @@ const enrichedDocuments = $derived(
 			<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"
+					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>
@@ -196,9 +196,9 @@ const enrichedDocuments = $derived(
 	<!-- 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,25 +208,25 @@ 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">
+				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-ink/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">
+				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-ink/70">
 					{data.documents.length}
 				</p>
 			{/if}
@@ -234,7 +234,7 @@ const enrichedDocuments = $derived(
 				<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"
+					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"
@@ -246,10 +246,10 @@ const enrichedDocuments = $derived(
 		</div>
 
 		<!-- CHAT CONTAINER -->
-		<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
+		<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-brand-sand/30 md:block"
+				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">
@@ -257,12 +257,11 @@ const enrichedDocuments = $derived(
 					{#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"
+								<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-brand-sand"></div>
+								<div class="flex-grow border-t border-line"></div>
 							</div>
 						{/if}
 						{@const isRight = doc.sender?.id === senderId}
@@ -280,8 +279,8 @@ const enrichedDocuments = $derived(
 									<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'}"
+											? 'border-primary bg-primary text-primary-fg'
+											: 'border-line bg-surface text-ink'}"
 									>
 										{#if doc.sender}
 											{doc.sender.firstName[0]}{doc.sender.lastName[0]}
@@ -296,15 +295,15 @@ const enrichedDocuments = $derived(
 									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'}"
+										? '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-white'
-												: 'text-brand-navy'}"
+												? 'text-primary-fg'
+												: 'text-ink'}"
 										>
 											{doc.title || doc.originalFilename}
 										</h3>
@@ -313,7 +312,7 @@ const enrichedDocuments = $derived(
 										<span
 											class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
                                         {doc.status === 'UPLOADED'
-												? 'bg-brand-mint'
+												? 'bg-accent'
 												: 'bg-yellow-400'}"
 											title={doc.status}
 										>
@@ -323,8 +322,8 @@ const enrichedDocuments = $derived(
 									<!-- Metadata -->
 									<div
 										class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
-											? 'text-blue-100'
-											: 'text-gray-500'}"
+											? 'text-primary-fg/70'
+											: 'text-ink-2'}"
 									>
 										<span class="flex items-center">
 											{doc.documentDate ? formatDate(doc.documentDate) : '—'}

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

@@ -3,6 +3,7 @@ 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';
+import AnnotationSidePanel from '$lib/components/AnnotationSidePanel.svelte';
 
 type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
 
@@ -56,53 +57,59 @@ 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';
 
 let panelOpen = $state(false);
-let panelHeight = $state(320);
+let panelHeight = $state(0); // set to full height on mount
+let navHeight = $state(0);
 let activeTab = $state<Tab>('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);
 
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
 		activeTab = savedTab as Tab;
 	}
+	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
-		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);
 });
@@ -112,7 +119,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 +140,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,20 @@ export const actions = {
 		}
 
 		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

@@ -17,6 +17,7 @@ let selectedReceivers = $state(doc.receivers ?? []);
 let dateDisplay = $state(isoToGerman(doc.documentDate ?? ''));
 let dateIso = $state(doc.documentDate ?? '');
 let dateDirty = $state(false);
+let confirmDelete = $state(false);
 
 const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
 
@@ -43,7 +44,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 +54,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,17 +64,23 @@ 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">
+	<form
+		method="POST"
+		action="?/update"
+		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">
+		<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-gray-700"
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_date()}</label
 					>
 					<input
@@ -84,8 +91,8 @@ function handleDateInput(e: Event) {
 						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'}"
+						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} />
@@ -96,7 +103,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Ort -->
 				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_location()}</label
 					>
 					<input
@@ -105,7 +112,7 @@ function handleDateInput(e: Event) {
 						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"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
@@ -121,22 +128,22 @@ function handleDateInput(e: Event) {
 
 				<!-- Empfänger -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{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">
+		<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">
 				<!-- Titel -->
 				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_title()} *</label
 					>
 					<input
@@ -145,13 +152,13 @@ function handleDateInput(e: Event) {
 						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"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<!-- Aufbewahrungsort -->
 				<div>
-					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_archive_location()}</label
 					>
 					<input
@@ -160,21 +167,21 @@ function handleDateInput(e: Event) {
 						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"
+						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-gray-400">{m.form_helper_archive_location()}</p>
+					<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-gray-700">{m.form_label_tags()}</p>
+					<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-gray-700"
+					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_content()}</label
 					>
 					<textarea
@@ -182,7 +189,7 @@ function handleDateInput(e: Event) {
 						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"
+						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 						>{doc.summary || ''}</textarea
 					>
 				</div>
@@ -190,8 +197,8 @@ function handleDateInput(e: Event) {
 		</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">
+		<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
@@ -199,20 +206,18 @@ function handleDateInput(e: Event) {
 				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"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 				>{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">
+		<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-brand-sand/20 px-3 py-2 text-sm text-gray-600"
-			>
+			<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=""
@@ -221,43 +226,93 @@ function handleDateInput(e: Event) {
 				/>
 				<span
 					>{m.doc_current_file_label()}
-					<strong class="font-medium text-brand-navy">{doc.originalFilename}</strong></span
+					<strong class="font-medium text-ink">{doc.originalFilename}</strong></span
 				>
 			</div>
 
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+			<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-gray-400">({m.doc_file_replace_note()})</span>
+				<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-gray-500 file:mr-4 file:rounded
-                       file:border-0 file:bg-brand-sand/40
+                       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-brand-navy hover:file:bg-brand-sand/60"
+                       file:text-ink hover:file:bg-muted"
 			/>
 		</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)]"
+			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="/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>
+			<!-- 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 + save -->
+			<div class="flex items-center gap-4">
+				<a
+					href="/documents/{doc.id}"
+					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+				>
+					{m.btn_cancel()}
+				</a>
+				<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>
 	</form>
+
+	<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
 </div>

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

@@ -50,7 +50,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 +67,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}
@@ -76,15 +76,15 @@ function handleDateInput(e: Event) {
 
 	<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">
+		<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-gray-700"
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_date()}</label
 					>
 					<input
@@ -95,8 +95,8 @@ function handleDateInput(e: Event) {
 						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'}"
+						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} />
@@ -109,7 +109,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Ort -->
 				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_location()}</label
 					>
 					<input
@@ -117,7 +117,7 @@ function handleDateInput(e: Event) {
 						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"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
@@ -133,22 +133,22 @@ function handleDateInput(e: Event) {
 
 				<!-- Empfänger -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{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">
+		<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">
 				<!-- Titel -->
 				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_title()} *</label
 					>
 					<input
@@ -156,13 +156,13 @@ function handleDateInput(e: Event) {
 						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"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<!-- Aufbewahrungsort -->
 				<div>
-					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_archive_location()}</label
 					>
 					<input
@@ -170,21 +170,21 @@ function handleDateInput(e: Event) {
 						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"
+						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-gray-400">{m.form_helper_archive_location()}</p>
+					<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-gray-700">{m.form_label_tags()}</p>
+					<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-gray-700"
+					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_content()}</label
 					>
 					<textarea
@@ -192,15 +192,15 @@ function handleDateInput(e: Event) {
 						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"
+						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 					></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">
+		<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
@@ -208,43 +208,43 @@ function handleDateInput(e: Event) {
 				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"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 			></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">
+		<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>
 
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
 				{m.doc_file_upload_label()}
-				<span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
+				<span class="font-normal text-ink-3">({m.doc_file_upload_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
+                       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-brand-navy hover:file:bg-brand-sand/60"
+                       file:text-ink hover:file:bg-muted"
 			/>
 		</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)]"
+			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-gray-500 transition-colors hover:text-brand-navy">
+			<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"
+				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>

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>

frontend/src/routes/layout.css

@@ -1,34 +1,176 @@
-/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
-/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
+/* ─── 1. Fonts & Tailwind ──────────────────────────────────────────────────── */
+/* Tinos = Times substitute | Montserrat = Gotham substitute (De Gruyter Brill CI) */
 @import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
 @import 'tailwindcss';
 
-/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
+/* ─── 2. Raw palette — never used directly in components ──────────────────── */
 @theme {
-	/* COLORS — exact De Gruyter Brill brand palette */
-	--color-brand-navy: #012851; /* Prussian Blue */
-	--color-brand-mint: #a1dcd8; /* Aqua Island */
-	--color-brand-purple: #b4b9ff; /* Melrose */
-	--color-brand-sand: #f0efe9; /* Neutral paper tone */
-	--color-brand-white: #ffffff;
-	--color-brand-dark: #0d0d0d;
+	/* Brand palette constants */
+	--palette-navy: #012851;
+	--palette-mint: #a1dcd8;
+	--palette-turquoise: #00c7b1;
+	--palette-sand: #f0efe9;
+	--palette-purple: #b4b9ff;
 
-	/* FONTS */
+	/* Typography */
 	--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
 	--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
 
 	--text-huge: 4rem;
 }
 
-/* 3. Base Styles */
+/* ─── 3. Semantic tokens — Tailwind utilities backed by CSS variables ──────── */
+/*
+   @theme inline makes Tailwind generate utility classes (bg-surface, text-ink,
+   border-line, etc.) whose values are CSS custom properties, not hardcoded hex.
+   Changing --c-surface on :root is all it takes to retheme the whole UI.
+*/
+@theme inline {
+	/* Surfaces */
+	--color-canvas: var(--c-canvas);
+	--color-surface: var(--c-surface);
+	--color-overlay: var(--c-overlay);
+	--color-muted: var(--c-muted);
+
+	/* Borders */
+	--color-line: var(--c-line);
+	--color-line-2: var(--c-line-2);
+
+	/* Text */
+	--color-ink: var(--c-ink);
+	--color-ink-2: var(--c-ink-2);
+	--color-ink-3: var(--c-ink-3);
+
+	/* Accent (mint ↔ turquoise) */
+	--color-accent: var(--c-accent);
+	--color-accent-bg: var(--c-accent-bg);
+
+	/* Primary interactive (navy ↔ mint) */
+	--color-primary: var(--c-primary);
+	--color-primary-fg: var(--c-primary-fg);
+
+	/* Nav active state */
+	--color-nav-active: var(--c-nav-active);
+
+	/* PDF viewer */
+	--color-pdf-bg: var(--c-pdf-bg);
+	--color-pdf-ctrl: var(--c-pdf-ctrl);
+	--color-pdf-text: var(--c-pdf-text);
+
+	/* Static brand tokens (not themed) */
+	--color-brand-purple: var(--palette-purple);
+	--color-brand-navy: var(--palette-navy);
+	--color-brand-mint: var(--palette-mint);
+}
+
+/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
+:root {
+	--c-canvas: #f0efe9;
+	--c-surface: #ffffff;
+	--c-overlay: #ffffff;
+	--c-muted: #f5f4ef;
+
+	--c-line: #e4e2d7;
+	--c-line-2: #eeede8;
+
+	--c-ink: #012851;
+	--c-ink-2: #6b7280;
+	--c-ink-3: #9ca3af;
+
+	--c-accent: #a1dcd8;
+	--c-accent-bg: rgba(161, 220, 216, 0.15);
+
+	--c-primary: #012851;
+	--c-primary-fg: #ffffff;
+
+	--c-nav-active: rgba(180, 185, 255, 0.15);
+
+	--c-pdf-bg: #ebebeb;
+	--c-pdf-ctrl: #d8d8d8;
+	--c-pdf-text: #333333;
+}
+
+/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		--c-canvas: #0d0d0d;
+		--c-surface: #1a1a1a;
+		--c-overlay: #242424;
+		--c-muted: #252525;
+
+		--c-line: #2e2e2e;
+		--c-line-2: #222222;
+
+		--c-ink: #f0efe9;
+		--c-ink-2: #9ca3af;
+		--c-ink-3: #6b7280;
+
+		--c-accent: #00c7b1;
+		--c-accent-bg: rgba(0, 199, 177, 0.12);
+
+		--c-primary: #a1dcd8;
+		--c-primary-fg: #012851;
+
+		--c-nav-active: rgba(180, 185, 255, 0.12);
+
+		--c-pdf-bg: #1e1e1e;
+		--c-pdf-ctrl: #2a2a2a;
+		--c-pdf-text: #d1d1d1;
+	}
+}
+
+/* Manual dark override — takes precedence over media query */
+:root[data-theme='dark'] {
+	--c-canvas: #0d0d0d;
+	--c-surface: #1a1a1a;
+	--c-overlay: #242424;
+	--c-muted: #252525;
+
+	--c-line: #2e2e2e;
+	--c-line-2: #222222;
+
+	--c-ink: #f0efe9;
+	--c-ink-2: #9ca3af;
+	--c-ink-3: #6b7280;
+
+	--c-accent: #00c7b1;
+	--c-accent-bg: rgba(0, 199, 177, 0.12);
+
+	--c-primary: #a1dcd8;
+	--c-primary-fg: #012851;
+
+	--c-nav-active: rgba(180, 185, 255, 0.12);
+
+	--c-pdf-bg: #1e1e1e;
+	--c-pdf-ctrl: #2a2a2a;
+	--c-pdf-text: #d1d1d1;
+}
+
+/* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */
+/*
+   In dark mode, invert all brand icons so they read as white on dark surfaces.
+   Exclude .invert icons (already inverted for placement on dark backgrounds)
+   so they don't get double-inverted back to black.
+*/
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) img[src*='degruyter-icons']:not(.invert) {
+		filter: invert(1);
+	}
+}
+
+:root[data-theme='dark'] img[src*='degruyter-icons']:not(.invert) {
+	filter: invert(1);
+}
+
+/* ─── 7. Base styles ───────────────────────────────────────────────────────── */
 @layer base {
 	html {
 		overscroll-behavior: none;
 	}
 
 	body {
-		background-color: #ffffff;
-		color: var(--color-brand-navy);
+		background-color: var(--c-canvas);
+		color: var(--c-ink);
 		font-family: var(--font-serif);
 	}
 
@@ -41,4 +183,12 @@
 		font-family: var(--font-sans);
 		font-weight: 600;
 	}
+
+	/* Form controls — always use surface bg and ink text so they theme correctly */
+	input,
+	textarea,
+	select {
+		background-color: var(--c-surface);
+		color: var(--c-ink);
+	}
 }

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

@@ -9,7 +9,7 @@ const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
 const activeLocale = $derived(getLocale().toUpperCase());
 </script>
 
-<div class="relative flex min-h-screen flex-col bg-white">
+<div class="relative flex min-h-screen flex-col bg-canvas">
 	<!-- DGB purple accent strip -->
 	<div class="h-1 bg-brand-purple"></div>
 
@@ -21,8 +21,8 @@ const activeLocale = $derived(getLocale().toUpperCase());
 				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>
@@ -34,15 +34,15 @@ const activeLocale = $derived(getLocale().toUpperCase());
 			<!-- 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.login_heading()}
 				</h1>
 
@@ -50,7 +50,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 					<div>
 						<label
 							for="username"
-							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.login_label_username()}</label
 						>
 						<input
@@ -59,14 +59,14 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="username"
 							required
 							autocomplete="username"
-							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>
 
 					<div>
 						<label
 							for="password"
-							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.login_label_password()}</label
 						>
 						<input
@@ -75,7 +75,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="password"
 							required
 							autocomplete="current-password"
-							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>
 
@@ -85,7 +85,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 
 					<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.login_btn_submit()}
 					</button>
@@ -93,7 +93,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 					<div class="mt-4 text-center">
 						<a
 							href="/forgot-password"
-							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"
 							>{m.login_forgot_password()}</a
 						>
 					</div>
@@ -104,6 +104,6 @@ const activeLocale = $derived(getLocale().toUpperCase());
 
 	<!-- 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>

frontend/src/routes/page.svelte.spec.ts

@@ -5,7 +5,7 @@ import Page from './+page.svelte';
 
 const tick = () => new Promise((r) => setTimeout(r, 0));
 
-vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+vi.mock('$app/navigation', () => ({ goto: vi.fn(), invalidateAll: vi.fn() }));
 
 // Silence fetch calls from PersonTypeahead when advanced filters are open
 vi.stubGlobal(

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

@@ -26,17 +26,17 @@ function handleSearch() {
 <div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
 	<!-- Header Area -->
 	<div
-		class="mb-10 flex flex-col justify-between gap-6 border-b border-brand-navy/10 pb-6 md:flex-row md:items-end"
+		class="mb-10 flex flex-col justify-between gap-6 border-b border-ink/10 pb-6 md:flex-row md:items-end"
 	>
 		<div>
-			<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.persons_heading()}</h1>
-			<p class="mt-2 max-w-xl font-sans text-sm text-brand-navy/60">
+			<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
+			<p class="mt-2 max-w-xl font-sans text-sm text-ink/60">
 				{m.persons_subtitle()}
 			</p>
 			{#if data.canWrite}
 				<a
 					href="/persons/new"
-					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+					class="mt-3 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"
@@ -61,10 +61,10 @@ function handleSearch() {
 					oninput={handleSearch}
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
-					class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 font-sans text-sm text-brand-navy placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+					class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 				/>
 				<div
-					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
+					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
 				>
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
@@ -79,11 +79,9 @@ function handleSearch() {
 
 	{#if data.persons.length === 0}
 		<div
-			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-brand-sand bg-white py-16 text-center"
+			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface py-16 text-center"
 		>
-			<div
-				class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
-			>
+			<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-ink">
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
 					alt=""
@@ -91,25 +89,25 @@ function handleSearch() {
 					class="h-6 w-6"
 				/>
 			</div>
-			<p class="font-serif text-lg text-brand-navy">{m.persons_empty_heading()}</p>
-			<p class="mt-1 font-sans text-sm text-gray-500">{m.persons_empty_text()}</p>
+			<p class="font-serif text-lg text-ink">{m.persons_empty_heading()}</p>
+			<p class="mt-1 font-sans text-sm text-ink-2">{m.persons_empty_text()}</p>
 		</div>
 	{:else}
 		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
 			{#each data.persons as person (person.id)}
 				<a href="/persons/{person.id}" class="group block h-full">
 					<div
-						class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-brand-sand bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
+						class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-line bg-surface p-6 shadow-sm transition-all duration-200 hover:border-primary hover:shadow-md"
 					>
 						<!-- Decorative Accent on Hover -->
 						<div
-							class="absolute top-0 bottom-0 left-0 w-1 bg-brand-navy opacity-0 transition-opacity group-hover:opacity-100"
+							class="absolute top-0 bottom-0 left-0 w-1 bg-primary opacity-0 transition-opacity group-hover:opacity-100"
 						></div>
 
 						<!-- Avatar -->
 						<div class="flex-shrink-0">
 							<div
-								class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-navy font-serif text-lg text-white transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
+								class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-white transition-colors group-hover:bg-accent group-hover:text-ink"
 							>
 								{person.firstName[0]}{person.lastName[0]}
 							</div>
@@ -118,13 +116,13 @@ function handleSearch() {
 						<!-- Info -->
 						<div class="min-w-0 flex-1">
 							<p
-								class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
+								class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
 							>
 								{person.firstName}
 								{person.lastName}
 							</p>
 							{#if person.alias}
-								<p class="mt-0.5 truncate font-sans text-xs text-gray-500">"{person.alias}"</p>
+								<p class="mt-0.5 truncate font-sans text-xs text-ink-2">"{person.alias}"</p>
 							{/if}
 						</div>
 					</div>

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

@@ -98,7 +98,7 @@ $effect(() => {
 	<div class="mb-6">
 		<a
 			href="/persons"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group 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"
@@ -111,15 +111,15 @@ $effect(() => {
 	</div>
 
 	<!-- Header / Metadata Card -->
-	<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
-		<div class="h-2 w-full bg-brand-navy"></div>
+	<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
+		<div class="h-2 w-full bg-primary"></div>
 
 		<div class="p-8 md:p-10">
 			{#if editMode && data.canWrite}
 				<!-- Edit Form -->
 				<form method="POST" action="?/update" use:enhance>
 					<div class="flex flex-col gap-6">
-						<h2 class="border-b border-gray-100 pb-3 font-serif text-xl text-brand-navy">
+						<h2 class="border-b border-line-2 pb-3 font-serif text-xl text-ink">
 							{m.person_edit_heading()}
 						</h2>
 
@@ -133,7 +133,7 @@ $effect(() => {
 							<div>
 								<label
 									for="firstName"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.form_label_first_name()} *</label
 								>
 								<input
@@ -142,13 +142,13 @@ $effect(() => {
 									type="text"
 									required
 									value={person.firstName}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
 								<label
 									for="lastName"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.form_label_last_name()} *</label
 								>
 								<input
@@ -157,13 +157,13 @@ $effect(() => {
 									type="text"
 									required
 									value={person.lastName}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div class="md:col-span-2">
 								<label
 									for="alias"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.form_label_alias()}</label
 								>
 								<input
@@ -171,13 +171,13 @@ $effect(() => {
 									name="alias"
 									type="text"
 									value={person.alias ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
 								<label
 									for="birthYear"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_birth_year()}</label
 								>
 								<input
@@ -188,13 +188,13 @@ $effect(() => {
 									max="2100"
 									placeholder={m.person_placeholder_year()}
 									value={person.birthYear ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
 								<label
 									for="deathYear"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_death_year()}</label
 								>
 								<input
@@ -205,13 +205,13 @@ $effect(() => {
 									max="2100"
 									placeholder={m.person_placeholder_year()}
 									value={person.deathYear ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div class="md:col-span-2">
 								<label
 									for="notes"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_notes()}</label
 								>
 								<textarea
@@ -219,7 +219,7 @@ $effect(() => {
 									name="notes"
 									rows="4"
 									placeholder={m.person_placeholder_notes()}
-									class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 									>{person.notes ?? ''}</textarea
 								>
 							</div>
@@ -228,14 +228,14 @@ $effect(() => {
 						<div class="flex gap-3">
 							<button
 								type="submit"
-								class="rounded bg-brand-navy px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
+								class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
 							>
 								{m.btn_save()}
 							</button>
 							<button
 								type="button"
 								onclick={() => (editMode = false)}
-								class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+								class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
 							>
 								{m.btn_cancel()}
 							</button>
@@ -247,15 +247,15 @@ $effect(() => {
 				<div class="flex flex-col items-start gap-8 md:flex-row">
 					<div class="flex-shrink-0">
 						<div
-							class="flex h-24 w-24 items-center justify-center rounded-full border border-brand-sand bg-brand-sand/30 text-brand-navy"
+							class="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
 						>
 							<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
 						</div>
 					</div>
 
 					<div class="w-full flex-1">
-						<div class="mb-8 flex items-start justify-between border-b border-gray-100 pb-4">
-							<h1 class="font-serif text-4xl text-brand-navy">
+						<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
+							<h1 class="font-serif text-4xl text-ink">
 								{person.firstName}
 								{person.lastName}
 							</h1>
@@ -263,7 +263,7 @@ $effect(() => {
 								{#if data.canWrite}
 									<button
 										onclick={() => (editMode = true)}
-										class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:border-brand-navy hover:text-brand-navy"
+										class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
@@ -280,10 +280,10 @@ $effect(() => {
 						<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
 							<div>
 								<span
-									class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_full_name()}</span
 								>
-								<span class="block font-serif text-lg text-brand-navy"
+								<span class="block font-serif text-lg text-ink"
 									>{person.firstName} {person.lastName}</span
 								>
 							</div>
@@ -291,23 +291,21 @@ $effect(() => {
 							{#if person.alias}
 								<div>
 									<span
-										class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+										class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 										>{m.form_label_alias()}</span
 									>
-									<span class="block font-serif text-lg text-brand-navy italic"
-										>"{person.alias}"</span
-									>
+									<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
 								</div>
 							{/if}
 
 							{#if person.birthYear || person.deathYear}
 								<div>
 									<span
-										class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+										class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>
 										{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
 									</span>
-									<span class="block font-serif text-lg text-brand-navy">
+									<span class="block font-serif text-lg text-ink">
 										{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear}
 											&nbsp;{/if}{#if person.deathYear}† {person.deathYear}{/if}
 									</span>
@@ -317,10 +315,10 @@ $effect(() => {
 							{#if person.notes}
 								<div class="md:col-span-2">
 									<span
-										class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+										class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 										>{m.person_label_notes()}</span
 									>
-									<p class="font-serif text-base whitespace-pre-wrap text-brand-navy">
+									<p class="font-serif text-base whitespace-pre-wrap text-ink">
 										{person.notes}
 									</p>
 								</div>
@@ -335,10 +333,10 @@ $effect(() => {
 	<!-- Merge Section -->
 	{#if data.canWrite}
 		{#key person.id}
-			<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
+			<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
 				<div class="p-6 md:p-8">
-					<h2 class="mb-1 font-serif text-lg text-brand-navy">{m.person_merge_heading()}</h2>
-					<p class="mb-5 font-sans text-sm text-gray-500">
+					<h2 class="mb-1 font-serif text-lg text-ink">{m.person_merge_heading()}</h2>
+					<p class="mb-5 font-sans text-sm text-ink-2">
 						{m.person_merge_description()}
 					</p>
 
@@ -381,7 +379,7 @@ $effect(() => {
 									<button
 										type="button"
 										onclick={() => (showMergeConfirm = false)}
-										class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-gray-500 uppercase transition-colors hover:bg-gray-50"
+										class="rounded border border-line px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
 									>
 										{m.btn_cancel()}
 									</button>
@@ -406,17 +404,17 @@ $effect(() => {
 	<!-- Co-Correspondents Section -->
 	{#if coCorrespondents.length > 0}
 		<div class="mb-6">
-			<h3 class="mb-3 text-xs font-bold tracking-widest text-gray-400 uppercase">
+			<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.person_co_correspondents_heading()}
 			</h3>
 			<div class="flex flex-wrap gap-2">
 				{#each coCorrespondents as c (c.id)}
 					<a
 						href="/conversations?senderId={person.id}&receiverId={c.id}"
-						class="inline-flex items-center gap-1.5 rounded-full border border-brand-sand px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
+						class="inline-flex items-center gap-1.5 rounded-full border border-line px-3 py-1 font-serif text-sm text-ink transition-colors hover:border-primary"
 					>
 						{c.name}
-						<span class="font-sans text-xs text-gray-400">({c.count})</span>
+						<span class="font-sans text-xs text-ink-3">({c.count})</span>
 					</a>
 				{/each}
 			</div>
@@ -425,18 +423,18 @@ $effect(() => {
 
 	<!-- Sent Documents Section -->
 	<div class="mb-10">
-		<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
-			<h2 class="font-serif text-xl text-brand-navy">{m.person_docs_heading()}</h2>
-			<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
+		<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
+			<h2 class="font-serif text-xl text-ink">{m.person_docs_heading()}</h2>
+			<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
 				{sentDocuments.length}
 			</span>
 			{#if sentYearRange}
-				<span class="font-sans text-xs text-gray-400">{sentYearRange}</span>
+				<span class="font-sans text-xs text-ink-3">{sentYearRange}</span>
 			{/if}
 			{#if sentDocuments.length > 1}
 				<button
 					onclick={() => (sortDirSent = sortDirSent === 'DESC' ? 'ASC' : 'DESC')}
-					class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
+					class="ml-auto text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
 				>
 					{sortDirSent === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
 				</button>
@@ -444,8 +442,8 @@ $effect(() => {
 		</div>
 
 		{#if sentDocuments.length === 0}
-			<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
-				<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
+			<div class="rounded-sm border border-dashed border-line bg-surface p-12 text-center">
+				<p class="font-sans text-ink-2">{m.person_no_docs()}</p>
 			</div>
 		{:else}
 			<ul class="space-y-3">
@@ -453,12 +451,12 @@ $effect(() => {
 					<li class="group">
 						<a
 							href="/documents/{doc.id}"
-							class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
+							class="block border border-line bg-surface p-4 transition-all duration-200 hover:border-primary hover:shadow-md"
 						>
 							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-4 overflow-hidden">
 									<div
-										class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
+										class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-muted text-ink transition-colors group-hover:bg-accent group-hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -469,16 +467,16 @@ $effect(() => {
 									</div>
 									<div class="min-w-0">
 										<div
-											class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
+											class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
 										>
 											{doc.title || doc.originalFilename}
 										</div>
-										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
+										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-ink-2">
 											<span
 												>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
 											>
 											{#if doc.location}
-												<span class="text-brand-mint">•</span>
+												<span class="text-accent">•</span>
 												<span>{doc.location}</span>
 											{/if}
 										</div>
@@ -488,7 +486,7 @@ $effect(() => {
 									<span
 										class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
                                         {doc.status === 'UPLOADED'
-                                            ? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
+                                            ? 'border-accent/50 bg-accent/20 text-ink'
                                             : 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
 									>
 										{doc.status}
@@ -508,7 +506,7 @@ $effect(() => {
 			{#if sentDocuments.length > DOCS_PREVIEW_LIMIT && !showAllSent}
 				<button
 					onclick={() => (showAllSent = true)}
-					class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
+					class="mt-3 text-xs font-bold tracking-widest text-ink/50 uppercase transition-colors hover:text-ink"
 				>
 					{m.person_show_more({ count: sentDocuments.length - DOCS_PREVIEW_LIMIT })}
 				</button>
@@ -518,18 +516,18 @@ $effect(() => {
 
 	<!-- Received Documents Section -->
 	<div>
-		<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
-			<h2 class="font-serif text-xl text-brand-navy">{m.person_received_docs_heading()}</h2>
-			<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
+		<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
+			<h2 class="font-serif text-xl text-ink">{m.person_received_docs_heading()}</h2>
+			<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
 				{receivedDocuments.length}
 			</span>
 			{#if receivedYearRange}
-				<span class="font-sans text-xs text-gray-400">{receivedYearRange}</span>
+				<span class="font-sans text-xs text-ink-3">{receivedYearRange}</span>
 			{/if}
 			{#if receivedDocuments.length > 1}
 				<button
 					onclick={() => (sortDirReceived = sortDirReceived === 'DESC' ? 'ASC' : 'DESC')}
-					class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
+					class="ml-auto text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
 				>
 					{sortDirReceived === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
 				</button>
@@ -537,8 +535,8 @@ $effect(() => {
 		</div>
 
 		{#if receivedDocuments.length === 0}
-			<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
-				<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
+			<div class="rounded-sm border border-dashed border-line bg-surface p-12 text-center">
+				<p class="font-sans text-ink-2">{m.person_no_received_docs()}</p>
 			</div>
 		{:else}
 			<ul class="space-y-3">
@@ -546,12 +544,12 @@ $effect(() => {
 					<li class="group">
 						<a
 							href="/documents/{doc.id}"
-							class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
+							class="block border border-line bg-surface p-4 transition-all duration-200 hover:border-primary hover:shadow-md"
 						>
 							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-4 overflow-hidden">
 									<div
-										class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
+										class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-muted text-ink transition-colors group-hover:bg-accent group-hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -562,16 +560,16 @@ $effect(() => {
 									</div>
 									<div class="min-w-0">
 										<div
-											class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
+											class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
 										>
 											{doc.title || doc.originalFilename}
 										</div>
-										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
+										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-ink-2">
 											<span
 												>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
 											>
 											{#if doc.location}
-												<span class="text-brand-mint">•</span>
+												<span class="text-accent">•</span>
 												<span>{doc.location}</span>
 											{/if}
 										</div>
@@ -581,7 +579,7 @@ $effect(() => {
 									<span
 										class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
                                         {doc.status === 'UPLOADED'
-                                            ? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
+                                            ? 'border-accent/50 bg-accent/20 text-ink'
                                             : 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
 									>
 										{doc.status}
@@ -601,7 +599,7 @@ $effect(() => {
 			{#if receivedDocuments.length > DOCS_PREVIEW_LIMIT && !showAllReceived}
 				<button
 					onclick={() => (showAllReceived = true)}
-					class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
+					class="mt-3 text-xs font-bold tracking-widest text-ink/50 uppercase transition-colors hover:text-ink"
 				>
 					{m.person_show_more({ count: receivedDocuments.length - DOCS_PREVIEW_LIMIT })}
 				</button>

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

@@ -8,7 +8,7 @@ let { form } = $props();
 	<div class="mb-6">
 		<a
 			href="/persons"
-			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"
@@ -25,7 +25,7 @@ let { form } = $props();
 			</svg>
 			{m.btn_back_to_overview()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">{m.persons_new_heading()}</h1>
+		<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
 	</div>
 
 	{#if form?.error}
@@ -33,14 +33,14 @@ let { form } = $props();
 	{/if}
 
 	<form method="POST">
-		<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.persons_section_details()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<div>
-					<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_first_name()} *</label
 					>
 					<input
@@ -48,12 +48,12 @@ let { form } = $props();
 						name="firstName"
 						type="text"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<div>
-					<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_last_name()} *</label
 					>
 					<input
@@ -61,12 +61,12 @@ let { form } = $props();
 						name="lastName"
 						type="text"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<div class="md:col-span-2">
-					<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_alias()}</label
 					>
 					<input
@@ -74,7 +74,7 @@ let { form } = $props();
 						name="alias"
 						type="text"
 						placeholder={m.form_placeholder_alias()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 			</div>
@@ -82,17 +82,14 @@ let { form } = $props();
 
 		<!-- 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="/persons"
-				class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
-			>
+			<a href="/persons" 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"
+				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_create()}
 			</button>

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

@@ -42,7 +42,7 @@ function handleBirthDateInput(e: Event) {
 	<!-- Back link -->
 	<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"
@@ -56,12 +56,12 @@ function handleBirthDateInput(e: Event) {
 		{m.btn_back_to_overview()}
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.profile_heading()}</h1>
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.profile_heading()}</h1>
 
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 		<!-- Personal info 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>
 
@@ -80,7 +80,7 @@ function handleBirthDateInput(e: Event) {
 				<div class="space-y-4">
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_first_name()}
 						</span>
@@ -88,13 +88,13 @@ function handleBirthDateInput(e: Event) {
 							type="text"
 							name="firstName"
 							value={data.user?.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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_last_name()}
 						</span>
@@ -102,13 +102,13 @@ function handleBirthDateInput(e: Event) {
 							type="text"
 							name="lastName"
 							value={data.user?.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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_birth_date()}
 						</span>
@@ -117,14 +117,14 @@ function handleBirthDateInput(e: Event) {
 							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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_email()}
 						</span>
@@ -132,13 +132,13 @@ function handleBirthDateInput(e: Event) {
 							type="email"
 							name="email"
 							value={data.user?.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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_contact()}
 						</span>
@@ -146,7 +146,7 @@ function handleBirthDateInput(e: Event) {
 							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"
+							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 							>{data.user?.contact ?? ''}</textarea
 						>
 					</label>
@@ -154,7 +154,7 @@ function handleBirthDateInput(e: Event) {
 
 				<button
 					type="submit"
-					class="mt-5 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="mt-5 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>
@@ -162,8 +162,8 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Password change 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_password()}
 			</h2>
 
@@ -186,7 +186,7 @@ function handleBirthDateInput(e: Event) {
 				<div class="space-y-4">
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_current_password()}
 						</span>
@@ -194,13 +194,13 @@ function handleBirthDateInput(e: Event) {
 							type="password"
 							name="currentPassword"
 							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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_new_password()}
 						</span>
@@ -208,13 +208,13 @@ function handleBirthDateInput(e: Event) {
 							type="password"
 							name="newPassword"
 							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"
+							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-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_new_password_confirm()}
 						</span>
@@ -222,14 +222,14 @@ function handleBirthDateInput(e: Event) {
 							type="password"
 							name="confirmPassword"
 							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"
+							class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 				</div>
 
 				<button
 					type="submit"
-					class="mt-5 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="mt-5 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/reset-password/+page.svelte

@@ -11,7 +11,7 @@ let {
 } = $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>
 
@@ -20,15 +20,15 @@ let {
 			<!-- 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.reset_password_heading()}
 				</h1>
 
@@ -37,9 +37,7 @@ let {
 						<p class="font-sans text-xs text-green-700">{m.reset_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}
@@ -49,7 +47,7 @@ let {
 						<div>
 							<label
 								for="newPassword"
-								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.reset_password_label()}</label
 							>
 							<input
@@ -58,14 +56,14 @@ let {
 								id="newPassword"
 								required
 								autocomplete="new-password"
-								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>
 
 						<div>
 							<label
 								for="confirmPassword"
-								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.reset_password_confirm_label()}</label
 							>
 							<input
@@ -74,7 +72,7 @@ let {
 								id="confirmPassword"
 								required
 								autocomplete="new-password"
-								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>
 
@@ -88,15 +86,13 @@ let {
 
 						<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.reset_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>
@@ -108,6 +104,6 @@ let {
 
 	<!-- 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>

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

@@ -23,7 +23,7 @@ const initials = $derived.by(() => {
 	<!-- Back link -->
 	<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"
@@ -37,21 +37,21 @@ const initials = $derived.by(() => {
 		Zurück
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.user_profile_heading()}</h1>
 
 	<div class="max-w-md">
-		<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">
 			<!-- Avatar -->
 			<div class="mb-5 flex justify-center">
 				{#if initials}
 					<div
-						class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
 					>
 						<span class="font-serif text-xl font-bold">{initials}</span>
 					</div>
 				{:else}
 					<div
-						class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
 					>
 						<svg
 							class="h-8 w-8"
@@ -72,9 +72,9 @@ const initials = $derived.by(() => {
 
 			<!-- Name and username -->
 			<div class="mb-5 text-center">
-				<h2 class="font-serif text-xl font-bold text-brand-navy">{fullName}</h2>
+				<h2 class="font-serif text-xl font-bold text-ink">{fullName}</h2>
 				{#if data.profileUser.firstName || data.profileUser.lastName}
-					<p class="mt-0.5 font-sans text-sm text-gray-400">@{data.profileUser.username}</p>
+					<p class="mt-0.5 font-sans text-sm text-ink-3">@{data.profileUser.username}</p>
 				{/if}
 			</div>
 
@@ -82,19 +82,19 @@ const initials = $derived.by(() => {
 			<div class="flex flex-col gap-4">
 				{#if data.profileUser.email}
 					<div class="flex flex-col gap-0.5">
-						<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 							>E-Mail</span
 						>
-						<span class="font-serif text-sm text-brand-navy">{data.profileUser.email}</span>
+						<span class="font-serif text-sm text-ink">{data.profileUser.email}</span>
 					</div>
 				{/if}
 
 				{#if data.profileUser.contact}
 					<div class="flex flex-col gap-0.5">
-						<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 							>Kontakt</span
 						>
-						<span class="font-serif text-sm text-brand-navy">{data.profileUser.contact}</span>
+						<span class="font-serif text-sm text-ink">{data.profileUser.contact}</span>
 					</div>
 				{/if}
 			</div>

frontend/tailwind.config.js

@@ -1,25 +1,4 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		extend: {
-			colors: {
-				brand: {
-					navy: '#002850', // Header & Hero background
-					mint: '#A6DAD8', // The Comma accent color
-					sand: '#E4E2D7', // Content background
-					white: '#ffffff'
-				}
-			},
-			fontFamily: {
-				// Montserrat for UI/Headers, Merriweather for Body text (as established previously)
-				sans: ['Montserrat', 'sans-serif'],
-				serif: ['Merriweather', 'serif']
-			},
-			fontSize: {
-				huge: '4rem' // For the large stats numbers (e.g., "29", "5000+")
-			}
-		}
-	},
-	plugins: []
+	content: ['./src/**/*.{html,js,svelte,ts}']
 };