merge: resolve conflict with origin/main + fix WCAG AA contrast + add API test

- Merge origin/main (resolved conflict in +page.svelte: use res.ok check from main)
- fix(transcription): bump button text from text-brand-navy/60 (3.83:1) to
  text-brand-navy/80 (6.75:1) to pass WCAG AA 4.5:1 for 12px text
- feat(api-tests): add Transcription.http with PUT /review-all entry

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

backend/api_tests/Transcription.http

@@ -0,0 +1,3 @@
+### Mark all blocks as reviewed
+PUT http://localhost:8080/api/documents/{{documentId}}/transcription-blocks/review-all
+Authorization: Basic admin admin123

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

@@ -90,6 +90,15 @@ public class TranscriptionBlockController {
         return transcriptionService.reviewBlock(documentId, blockId, userId);
     }
 
+    @PutMapping("/review-all")
+    @RequirePermission(Permission.WRITE_ALL)
+    public List<TranscriptionBlock> markAllBlocksReviewed(
+            @PathVariable UUID documentId,
+            Authentication authentication) {
+        UUID userId = requireUserId(authentication);
+        return transcriptionService.markAllBlocksReviewed(documentId, userId);
+    }
+
     @GetMapping("/{blockId}/history")
     @RequirePermission(Permission.READ_ALL)
     public List<TranscriptionBlockVersion> getBlockHistory(

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

@@ -205,6 +205,18 @@ public class TranscriptionService {
         return saved;
     }
 
+    @Transactional
+    public List<TranscriptionBlock> markAllBlocksReviewed(UUID documentId, UUID userId) {
+        List<TranscriptionBlock> blocks = blockRepository.findByDocumentIdOrderBySortOrderAsc(documentId);
+        for (TranscriptionBlock block : blocks) {
+            if (!block.isReviewed()) {
+                block.setReviewed(true);
+                auditService.logAfterCommit(AuditKind.BLOCK_REVIEWED, userId, documentId, null);
+            }
+        }
+        return blockRepository.saveAll(blocks);
+    }
+
     public List<TranscriptionBlockVersion> getBlockHistory(UUID documentId, UUID blockId) {
         getBlock(documentId, blockId);
         return versionRepository.findByBlockIdOrderByChangedAtDesc(blockId);

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

@@ -154,6 +154,13 @@ class AnnotationControllerTest {
                 .andExpect(status().isForbidden());
     }
 
+    @Test
+    @WithMockUser(authorities = "READ_ALL")
+    void deleteAnnotation_returns403_whenUserHasOnlyReadAllPermission() throws Exception {
+        mockMvc.perform(delete("/api/documents/" + UUID.randomUUID() + "/annotations/" + UUID.randomUUID()))
+                .andExpect(status().isForbidden());
+    }
+
     @Test
     @WithMockUser(authorities = "ANNOTATE_ALL")
     void deleteAnnotation_returns204_whenHasAnnotatePermission() throws Exception {

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

@@ -260,6 +260,13 @@ class TranscriptionBlockControllerTest {
                 .andExpect(status().isForbidden());
     }
 
+    @Test
+    @WithMockUser(authorities = "READ_ALL")
+    void deleteBlock_returns403_whenUserHasOnlyReadAllPermission() throws Exception {
+        mockMvc.perform(delete(URL_BLOCK))
+                .andExpect(status().isForbidden());
+    }
+
     @Test
     @WithMockUser(authorities = "WRITE_ALL")
     void deleteBlock_returns204_whenAuthorised() throws Exception {
@@ -373,4 +380,63 @@ class TranscriptionBlockControllerTest {
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$.reviewed").value(true));
     }
+
+    // ─── PUT .../review-all ───────────────────────────────────────────────────
+
+    private static final String URL_REVIEW_ALL = URL_BASE + "/review-all";
+
+    @Test
+    void markAllBlocksReviewed_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(put(URL_REVIEW_ALL))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser(authorities = "READ_ALL")
+    void markAllBlocksReviewed_returns403_whenMissingWriteAllPermission() throws Exception {
+        mockMvc.perform(put(URL_REVIEW_ALL))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void markAllBlocksReviewed_returns200_withAllReviewedBlocks_whenAuthorised() throws Exception {
+        when(userService.findByEmail(any())).thenReturn(mockUser());
+        TranscriptionBlock b1 = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(DOC_ID).annotationId(UUID.randomUUID())
+                .text("Block 1").sortOrder(0).reviewed(true).build();
+        TranscriptionBlock b2 = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(DOC_ID).annotationId(UUID.randomUUID())
+                .text("Block 2").sortOrder(1).reviewed(true).build();
+        when(transcriptionService.markAllBlocksReviewed(eq(DOC_ID), any()))
+                .thenReturn(List.of(b1, b2));
+
+        mockMvc.perform(put(URL_REVIEW_ALL))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$").isArray())
+                .andExpect(jsonPath("$[0].reviewed").value(true))
+                .andExpect(jsonPath("$[1].reviewed").value(true));
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void markAllBlocksReviewed_returns200_withEmptyList_whenNoBlocksExist() throws Exception {
+        when(userService.findByEmail(any())).thenReturn(mockUser());
+        when(transcriptionService.markAllBlocksReviewed(eq(DOC_ID), any()))
+                .thenReturn(List.of());
+
+        mockMvc.perform(put(URL_REVIEW_ALL))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$").isArray())
+                .andExpect(jsonPath("$").isEmpty());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void markAllBlocksReviewed_returns401_whenUserNotFoundInDatabase() throws Exception {
+        when(userService.findByEmail(any())).thenReturn(null);
+
+        mockMvc.perform(put(URL_REVIEW_ALL))
+                .andExpect(status().isUnauthorized());
+    }
 }

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

@@ -506,4 +506,86 @@ class TranscriptionServiceTest {
 
         verify(auditService, never()).logAfterCommit(any(), any(), any(), any());
     }
+
+    // ─── markAllBlocksReviewed ───────────────────────────────────────────────────
+
+    @Test
+    void markAllBlocksReviewed_setsAllUnreviewedBlocksToReviewed() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        TranscriptionBlock block1 = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(false).build();
+        TranscriptionBlock block2 = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(false).build();
+        when(blockRepository.findByDocumentIdOrderBySortOrderAsc(docId))
+                .thenReturn(List.of(block1, block2));
+        when(blockRepository.saveAll(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        List<TranscriptionBlock> result = transcriptionService.markAllBlocksReviewed(docId, userId);
+
+        assertThat(result).allMatch(TranscriptionBlock::isReviewed);
+        verify(blockRepository).saveAll(List.of(block1, block2));
+    }
+
+    @Test
+    void markAllBlocksReviewed_isIdempotent_whenAllBlocksAlreadyReviewed() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        TranscriptionBlock block = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(true).build();
+        when(blockRepository.findByDocumentIdOrderBySortOrderAsc(docId))
+                .thenReturn(List.of(block));
+        when(blockRepository.saveAll(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        List<TranscriptionBlock> result = transcriptionService.markAllBlocksReviewed(docId, userId);
+
+        assertThat(result).allMatch(TranscriptionBlock::isReviewed);
+        verify(blockRepository).saveAll(any());
+    }
+
+    @Test
+    void markAllBlocksReviewed_emitsBlockReviewedAuditEvent_forEachUnreviewedBlock() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        TranscriptionBlock block1 = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(false).build();
+        TranscriptionBlock block2 = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(false).build();
+        when(blockRepository.findByDocumentIdOrderBySortOrderAsc(docId))
+                .thenReturn(List.of(block1, block2));
+        when(blockRepository.saveAll(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        transcriptionService.markAllBlocksReviewed(docId, userId);
+
+        verify(auditService, times(2)).logAfterCommit(AuditKind.BLOCK_REVIEWED, userId, docId, null);
+    }
+
+    @Test
+    void markAllBlocksReviewed_doesNotEmitAuditEvent_forAlreadyReviewedBlocks() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        TranscriptionBlock alreadyReviewed = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(true).build();
+        TranscriptionBlock unreviewed = TranscriptionBlock.builder()
+                .id(UUID.randomUUID()).documentId(docId).reviewed(false).build();
+        when(blockRepository.findByDocumentIdOrderBySortOrderAsc(docId))
+                .thenReturn(List.of(alreadyReviewed, unreviewed));
+        when(blockRepository.saveAll(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        transcriptionService.markAllBlocksReviewed(docId, userId);
+
+        verify(auditService, times(1)).logAfterCommit(AuditKind.BLOCK_REVIEWED, userId, docId, null);
+    }
+
+    @Test
+    void markAllBlocksReviewed_returnsEmptyList_whenNoBlocksExist() {
+        UUID docId = UUID.randomUUID();
+        UUID userId = UUID.randomUUID();
+        when(blockRepository.findByDocumentIdOrderBySortOrderAsc(docId)).thenReturn(List.of());
+        when(blockRepository.saveAll(any())).thenAnswer(inv -> inv.getArgument(0));
+
+        List<TranscriptionBlock> result = transcriptionService.markAllBlocksReviewed(docId, userId);
+
+        assertThat(result).isEmpty();
+    }
 }

frontend/e2e/person-typeahead.spec.ts

@@ -1,226 +0,0 @@
-/**
- * E2E regression tests for PersonTypeahead dropdown visibility.
- *
- * These tests verify that the dropdown list is never clipped by a parent
- * container's stacking context — the root cause of issue #343.
- *
- * The tests run at both desktop (1280×720) and tablet (768×1024) viewports
- * as required by the acceptance criteria.
- */
-import { test, expect } from '@playwright/test';
-
-/**
- * Find a document edit URL to use as the test page.
- * Falls back to /documents/new if no existing document is found.
- */
-async function getDocumentEditUrl(
-	page: Parameters<typeof test>[1] extends (args: { page: infer P }) => unknown ? P : never
-): Promise<string> {
-	await page.goto('/');
-	await page.waitForSelector('[data-hydrated]');
-	const firstDocLink = page.locator('a[href^="/documents/"]').first();
-	const href = await firstDocLink.getAttribute('href').catch(() => null);
-	if (href) {
-		return `${href}/edit`;
-	}
-	return '/documents/new';
-}
-
-test.describe('PersonTypeahead — dropdown visibility (desktop)', () => {
-	test.use({ viewport: { width: 1280, height: 720 } });
-
-	test('sender dropdown items are visible and not clipped in document edit', async ({ page }) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		// Find the sender typeahead input (the visible text input, not the hidden one)
-		const senderInput = page.locator('#senderId-search');
-		await expect(senderInput).toBeVisible();
-
-		// Type to trigger the dropdown
-		await senderInput.click();
-		await senderInput.fill('a');
-
-		// Wait for the dropdown to appear
-		await page.waitForTimeout(400); // debounce is 300ms
-
-		// If there are results, verify the first item is visible (not occluded)
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasResults = await dropdown.count().then((n) => n > 0);
-
-		if (hasResults) {
-			const firstOption = dropdown.locator('[role="option"]').first();
-			await expect(firstOption).toBeVisible();
-
-			// Verify the bounding box is within the viewport (not clipped)
-			const box = await firstOption.boundingBox();
-			expect(box).not.toBeNull();
-			expect(box!.y).toBeGreaterThan(0);
-			expect(box!.y + box!.height).toBeLessThan(720);
-		}
-
-		await page.screenshot({ path: 'test-results/e2e/person-typeahead-dropdown-desktop.png' });
-	});
-
-	test('dropdown is positioned below the input field (not hidden behind parent)', async ({
-		page
-	}) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		const senderInput = page.locator('#senderId-search');
-		await expect(senderInput).toBeVisible();
-
-		const inputBox = await senderInput.boundingBox();
-		expect(inputBox).not.toBeNull();
-
-		await senderInput.click();
-		await senderInput.fill('a');
-		await page.waitForTimeout(400);
-
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasDropdown = (await dropdown.count()) > 0;
-
-		if (hasDropdown) {
-			const dropdownBox = await dropdown.boundingBox();
-			expect(dropdownBox).not.toBeNull();
-
-			// Dropdown must appear below the input, not on top or clipped behind it
-			expect(dropdownBox!.y).toBeGreaterThanOrEqual(inputBox!.y + inputBox!.height - 5);
-		}
-
-		await page.screenshot({ path: 'test-results/e2e/person-typeahead-dropdown-position.png' });
-	});
-});
-
-test.describe('PersonTypeahead — dropdown visibility (tablet)', () => {
-	test.use({ viewport: { width: 768, height: 1024 } });
-
-	test('sender dropdown items are visible and not clipped on tablet viewport', async ({ page }) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		const senderInput = page.locator('#senderId-search');
-		await expect(senderInput).toBeVisible();
-
-		await senderInput.click();
-		await senderInput.fill('a');
-		await page.waitForTimeout(400);
-
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasResults = (await dropdown.count()) > 0;
-
-		if (hasResults) {
-			const firstOption = dropdown.locator('[role="option"]').first();
-			await expect(firstOption).toBeVisible();
-
-			const box = await firstOption.boundingBox();
-			expect(box).not.toBeNull();
-			expect(box!.y).toBeGreaterThan(0);
-			expect(box!.y + box!.height).toBeLessThan(1024);
-		}
-
-		await page.screenshot({ path: 'test-results/e2e/person-typeahead-dropdown-tablet.png' });
-	});
-});
-
-test.describe('PersonTypeahead — keyboard navigation', () => {
-	test.use({ viewport: { width: 1280, height: 720 } });
-
-	test('ArrowDown moves focus to the first option', async ({ page }) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		const senderInput = page.locator('#senderId-search');
-		await senderInput.click();
-		await senderInput.fill('a');
-		await page.waitForTimeout(400);
-
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasDropdown = (await dropdown.count()) > 0;
-
-		if (hasDropdown) {
-			await senderInput.press('ArrowDown');
-			// First option should now be the active descendant
-			const activeDescendant = await senderInput.getAttribute('aria-activedescendant');
-			expect(activeDescendant).toBeTruthy();
-
-			await page.screenshot({ path: 'test-results/e2e/person-typeahead-keyboard-nav.png' });
-		}
-	});
-
-	test('Escape key closes the dropdown', async ({ page }) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		const senderInput = page.locator('#senderId-search');
-		await senderInput.click();
-		await senderInput.fill('a');
-		await page.waitForTimeout(400);
-
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasDropdown = (await dropdown.count()) > 0;
-
-		if (hasDropdown) {
-			await expect(dropdown).toBeVisible();
-			await senderInput.press('Escape');
-			await page.waitForTimeout(100);
-			await expect(dropdown).not.toBeVisible();
-		}
-	});
-
-	test('aria-expanded is true when dropdown is open', async ({ page }) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		const senderInput = page.locator('#senderId-search');
-
-		// Initially closed
-		const initialExpanded = await senderInput.getAttribute('aria-expanded');
-		expect(initialExpanded).toBe('false');
-
-		await senderInput.click();
-		await senderInput.fill('a');
-		await page.waitForTimeout(400);
-
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasDropdown = (await dropdown.count()) > 0;
-
-		if (hasDropdown) {
-			const expanded = await senderInput.getAttribute('aria-expanded');
-			expect(expanded).toBe('true');
-		}
-	});
-});
-
-test.describe('PersonTypeahead — click-outside dismiss (fixed position)', () => {
-	test.use({ viewport: { width: 1280, height: 720 } });
-
-	test('clicking outside a fixed-position dropdown closes it', async ({ page }) => {
-		const editUrl = await getDocumentEditUrl(page);
-		await page.goto(editUrl);
-		await page.waitForLoadState('networkidle');
-
-		const senderInput = page.locator('#senderId-search');
-		await senderInput.click();
-		await senderInput.fill('a');
-		await page.waitForTimeout(400);
-
-		const dropdown = page.locator('[role="listbox"]').first();
-		const hasDropdown = (await dropdown.count()) > 0;
-
-		if (hasDropdown) {
-			await expect(dropdown).toBeVisible();
-			// Click somewhere else on the page
-			await page.click('body', { position: { x: 10, y: 10 } });
-			await page.waitForTimeout(100);
-			await expect(dropdown).not.toBeVisible();
-		}
-	});
-});

frontend/eslint.config.js

@@ -40,6 +40,26 @@ export default defineConfig(
 				parser: ts.parser,
 				svelteConfig
 			}
+		},
+		rules: {
+			// text-accent resolves to #a1dcd8 in light mode (1.52:1 on white — WCAG fail).
+			// layout.css documents it as decorative-only (borders, icon tints, bg fills).
+			// For any text label use text-primary or text-ink instead. This rule catches
+			// the pattern where text-accent appears inside a JavaScript string literal
+			// (e.g. conditional ternary class expressions in Svelte templates).
+			'no-restricted-syntax': [
+				'error',
+				{
+					selector: 'Literal[value=/\\btext-accent\\b/]',
+					message:
+						'text-accent is decorative-only (#a1dcd8 in light mode = 1.52:1 contrast — WCAG fail). Use text-primary or text-ink-2 for text labels.'
+				},
+				{
+					selector: 'TemplateLiteral > TemplateElement[value.raw=/\\btext-accent\\b/]',
+					message:
+						'text-accent is decorative-only (#a1dcd8 in light mode = 1.52:1 contrast — WCAG fail). Use text-primary or text-ink-2 for text labels.'
+				}
+			]
 		}
 	}
 );

frontend/messages/de.json

@@ -23,6 +23,8 @@
 	"nav_conversations": "Briefwechsel",
 	"nav_admin": "Admin",
 	"nav_logout": "Abmelden",
+	"theme_toggle_to_light": "Zu hellem Design wechseln",
+	"theme_toggle_to_dark": "Zu dunklem Design wechseln",
 	"btn_save": "Speichern",
 	"btn_cancel": "Abbrechen",
 	"btn_confirm": "Bestätigen",
@@ -816,6 +818,7 @@
 	"pagination_next": "Weiter",
 	"pagination_page_of": "Seite {page} von {total}",
 	"pagination_nav_label": "Seitennavigation",
+	"pagination_page_button": "Seite {page}",
 
 	"common_opens_new_tab": "(öffnet in neuem Tab)",
 

frontend/messages/en.json

@@ -23,6 +23,8 @@
 	"nav_conversations": "Letters",
 	"nav_admin": "Admin",
 	"nav_logout": "Sign out",
+	"theme_toggle_to_light": "Switch to light mode",
+	"theme_toggle_to_dark": "Switch to dark mode",
 	"btn_save": "Save",
 	"btn_cancel": "Cancel",
 	"btn_confirm": "Confirm",
@@ -816,6 +818,7 @@
 	"pagination_next": "Next",
 	"pagination_page_of": "Page {page} of {total}",
 	"pagination_nav_label": "Pagination",
+	"pagination_page_button": "Page {page}",
 
 	"common_opens_new_tab": "(opens in new tab)",
 

frontend/messages/es.json

@@ -23,6 +23,8 @@
 	"nav_conversations": "Cartas",
 	"nav_admin": "Admin",
 	"nav_logout": "Cerrar sesión",
+	"theme_toggle_to_light": "Cambiar a modo claro",
+	"theme_toggle_to_dark": "Cambiar a modo oscuro",
 	"btn_save": "Guardar",
 	"btn_cancel": "Cancelar",
 	"btn_confirm": "Confirmar",
@@ -816,6 +818,7 @@
 	"pagination_next": "Siguiente",
 	"pagination_page_of": "Página {page} de {total}",
 	"pagination_nav_label": "Paginación",
+	"pagination_page_button": "Página {page}",
 
 	"common_opens_new_tab": "(abre en pestaña nueva)",
 

frontend/src/lib/components/AnnotationLayer.svelte

@@ -18,7 +18,8 @@ let {
 	dimmed = false,
 	flashAnnotationId = null,
 	onDraw,
-	onAnnotationClick
+	onAnnotationClick,
+	onDeleteRequest
 }: {
 	annotations: Annotation[];
 	canDraw: boolean;
@@ -29,6 +30,7 @@ let {
 	flashAnnotationId?: string | null;
 	onDraw: (rect: DrawRect) => void;
 	onAnnotationClick?: (id: string) => void;
+	onDeleteRequest?: (annotationId: string) => void;
 } = $props();
 
 let drawStart = $state<{ x: number; y: number } | null>(null);
@@ -112,6 +114,8 @@ const containerStyle = $derived(
 			dimmed={dimmed}
 			blockNumber={blockNumbers[annotation.id]}
 			isFlashing={flashAnnotationId === annotation.id}
+			showDelete={canDraw}
+			onDeleteRequest={() => onDeleteRequest?.(annotation.id)}
 			onclick={() => onAnnotationClick?.(annotation.id)}
 			onpointerenter={() => (hoveredId = annotation.id)}
 			onpointerleave={() => (hoveredId = null)}

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

@@ -98,7 +98,7 @@ describe('AnnotationLayer', () => {
 		expect(el2.style.opacity).toBe('1');
 	});
 
-	it('does not show delete buttons (annotations owned by blocks)', async () => {
+	it('does not show delete button when annotation is not hovered or active', async () => {
 		render(AnnotationLayer, {
 			annotations: [makeAnnotation('ann-1')],
 			canDraw: true,
@@ -107,6 +107,19 @@ describe('AnnotationLayer', () => {
 		});
 
 		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
-		expect(page.getByRole('button', { name: /löschen/i }).query()).toBeNull();
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
+	});
+
+	it('does not show delete button when canDraw is false even if annotation is active', async () => {
+		render(AnnotationLayer, {
+			annotations: [makeAnnotation('ann-1')],
+			canDraw: false,
+			color: '#00C7B1',
+			activeAnnotationId: 'ann-1',
+			onDraw: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
 	});
 });

frontend/src/lib/components/AnnotationShape.svelte

@@ -11,6 +11,8 @@ let {
 	blockNumber = undefined,
 	isFlashing = false,
 	isResizable = false,
+	showDelete = false,
+	onDeleteRequest,
 	onclick,
 	onpointerenter,
 	onpointerleave
@@ -23,11 +25,15 @@ let {
 	blockNumber?: number | undefined;
 	isFlashing?: boolean;
 	isResizable?: boolean;
+	showDelete?: boolean;
+	onDeleteRequest?: () => void;
 	onclick: () => void;
 	onpointerenter: () => void;
 	onpointerleave: () => void;
 } = $props();
 
+const deleteVisible = $derived(showDelete && (isHovered || isActive));
+
 function hexToRgba(hex: string, alpha: number): string {
 	const r = parseInt(hex.slice(1, 3), 16);
 	const g = parseInt(hex.slice(3, 5), 16);
@@ -83,6 +89,7 @@ let shapeStyle = $derived(
 	onclick={onclick}
 	onkeydown={(e) => {
 		if (e.key === 'Enter' || e.key === ' ') onclick();
+		if (e.key === 'Delete' && showDelete) onDeleteRequest?.();
 	}}
 	onpointerenter={onpointerenter}
 	onpointerleave={onpointerleave}
@@ -112,6 +119,51 @@ let shapeStyle = $derived(
 			{blockNumber}
 		</div>
 	{/if}
+	{#if deleteVisible}
+		<button
+			data-testid="annotation-delete-{annotation.id}"
+			type="button"
+			aria-label="Löschen"
+			onclick={(e) => {
+				e.stopPropagation();
+				onDeleteRequest?.();
+			}}
+			style="
+				position: absolute;
+				top: 4px;
+				right: 4px;
+				min-width: 44px;
+				min-height: 44px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				background-color: #fff;
+				border: 1px solid var(--color-error, #e53e3e);
+				color: var(--color-error, #e53e3e);
+				cursor: pointer;
+				pointer-events: auto;
+				box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+				z-index: 10;
+			"
+		>
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</button>
+	{/if}
 	{#if isResizable}
 		<AnnotationEditOverlay annotation={annotation} />
 	{/if}

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

@@ -0,0 +1,177 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AnnotationShape from './AnnotationShape.svelte';
+
+afterEach(cleanup);
+
+function makeAnnotation(id = 'ann-1') {
+	return {
+		id,
+		documentId: 'doc-1',
+		pageNumber: 1,
+		x: 0.1,
+		y: 0.1,
+		width: 0.3,
+		height: 0.2,
+		color: '#00C7B1',
+		createdAt: new Date().toISOString()
+	};
+}
+
+describe('AnnotationShape', () => {
+	it('renders the annotation element', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: false,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-ann-1')).toBeInTheDocument();
+	});
+
+	it('does not show delete button when showDelete is false', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: false,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
+	});
+
+	it('does not show delete button when showDelete is true but neither hovered nor active', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		expect(page.getByTestId('annotation-delete-ann-1').query()).toBeNull();
+	});
+
+	it('shows delete button when showDelete is true and isHovered is true', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-delete-ann-1')).toBeInTheDocument();
+	});
+
+	it('shows delete button when showDelete is true and isActive is true', async () => {
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: true,
+			showDelete: true,
+			onDeleteRequest: vi.fn(),
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		await expect.element(page.getByTestId('annotation-delete-ann-1')).toBeInTheDocument();
+	});
+
+	it('calls onDeleteRequest when delete button is clicked', async () => {
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const deleteBtn = page.getByTestId('annotation-delete-ann-1');
+		await deleteBtn.click();
+
+		expect(onDeleteRequest).toHaveBeenCalledOnce();
+	});
+
+	it('does not call onclick when delete button is clicked', async () => {
+		const onclick = vi.fn();
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: true,
+			isActive: false,
+			showDelete: true,
+			onDeleteRequest,
+			onclick,
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const deleteBtn = page.getByTestId('annotation-delete-ann-1');
+		await deleteBtn.click();
+
+		expect(onclick).not.toHaveBeenCalled();
+		expect(onDeleteRequest).toHaveBeenCalledOnce();
+	});
+
+	it('calls onDeleteRequest when Delete key is pressed on the annotation', async () => {
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: true,
+			showDelete: true,
+			onDeleteRequest,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
+		annotationEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));
+
+		expect(onDeleteRequest).toHaveBeenCalledOnce();
+	});
+
+	it('does not call onDeleteRequest on Delete key when showDelete is false', async () => {
+		const onDeleteRequest = vi.fn();
+
+		render(AnnotationShape, {
+			annotation: makeAnnotation(),
+			isHovered: false,
+			isActive: true,
+			showDelete: false,
+			onDeleteRequest,
+			onclick: () => {},
+			onpointerenter: () => {},
+			onpointerleave: () => {}
+		});
+
+		const annotationEl = page.getByTestId('annotation-ann-1').element() as HTMLElement;
+		annotationEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));
+
+		expect(onDeleteRequest).not.toHaveBeenCalled();
+	});
+});

frontend/src/lib/components/DocumentViewer.svelte

@@ -24,6 +24,7 @@ type Props = {
 	flashAnnotationId?: string | null;
 	onAnnotationClick: (id: string) => void;
 	onTranscriptionDraw?: (rect: DrawRect) => void;
+	onDeleteAnnotationRequest?: (annotationId: string) => void;
 };
 
 let {
@@ -38,7 +39,8 @@ let {
 	annotationsDimmed = false,
 	flashAnnotationId = null,
 	onAnnotationClick,
-	onTranscriptionDraw
+	onTranscriptionDraw,
+	onDeleteAnnotationRequest
 }: Props = $props();
 </script>
 
@@ -98,6 +100,7 @@ let {
 			flashAnnotationId={flashAnnotationId}
 			onAnnotationClick={onAnnotationClick}
 			onTranscriptionDraw={onTranscriptionDraw}
+			onDeleteAnnotationRequest={onDeleteAnnotationRequest}
 			documentFileHash={doc.fileHash ?? null}
 		/>
 	{:else if fileUrl}

frontend/src/lib/components/NotificationBell.svelte

@@ -48,6 +48,12 @@ function handleKeydown(event: KeyboardEvent) {
 	}
 }
 
+const bellLabel = $derived(
+	stream.unreadCount > 0
+		? m.notification_bell_unread_label({ count: stream.unreadCount })
+		: m.notification_bell_label()
+);
+
 function attachBellButton(node: HTMLButtonElement) {
 	bellButtonEl = node;
 	return () => {
@@ -72,12 +78,11 @@ onDestroy(() => {
 		{@attach attachBellButton}
 		type="button"
 		onclick={toggleDropdown}
-		aria-label={stream.unreadCount > 0
+		aria-label={bellLabel}
-			? m.notification_bell_unread_label({ count: stream.unreadCount })
+		title={bellLabel}
-			: m.notification_bell_label()}
 		aria-expanded={open}
 		aria-haspopup="true"
-		class="relative rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+		class="relative cursor-pointer rounded-sm p-2 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

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

@@ -55,6 +55,34 @@ async function openDropdownAndClickFirstNotification() {
 	notifButton.click();
 }
 
+describe('NotificationBell — cursor and tooltip', () => {
+	it('bell button has cursor-pointer class', async () => {
+		render(NotificationBell);
+		const btn = document.querySelector<HTMLButtonElement>('button[aria-haspopup="true"]')!;
+		expect(btn.classList.contains('cursor-pointer')).toBe(true);
+	});
+
+	it('bell button title equals aria-label when unreadCount is 0', async () => {
+		mockNotificationList.value = [];
+		render(NotificationBell);
+		const btn = document.querySelector<HTMLButtonElement>('button[aria-haspopup="true"]')!;
+		expect(btn.getAttribute('title')).toBe('Benachrichtigungen');
+		expect(btn.getAttribute('aria-label')).toBe(btn.getAttribute('title'));
+	});
+
+	it('bell button title equals aria-label when unreadCount is 3', async () => {
+		mockNotificationList.value = [
+			makeNotification({ id: 'n1' }),
+			makeNotification({ id: 'n2' }),
+			makeNotification({ id: 'n3' })
+		];
+		render(NotificationBell);
+		const btn = document.querySelector<HTMLButtonElement>('button[aria-haspopup="true"]')!;
+		expect(btn.getAttribute('title')).toBe('3 ungelesene Benachrichtigungen');
+		expect(btn.getAttribute('aria-label')).toBe(btn.getAttribute('title'));
+	});
+});
+
 describe('NotificationBell', () => {
 	it('handleMarkRead navigates to URL including annotationId when notification has annotationId', async () => {
 		mockNotificationList.value = [makeNotification({ annotationId: 'annot-1' })];

frontend/src/lib/components/Pagination.svelte

@@ -20,6 +20,48 @@ const controlBase =
 	'inline-flex min-h-[44px] min-w-[44px] items-center justify-center gap-1.5 rounded-sm border border-line bg-white px-4 py-2 font-sans text-sm font-bold text-ink';
 const linkBase = `${controlBase} transition-colors hover:bg-surface focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none`;
 const disabledBase = `${controlBase} cursor-not-allowed opacity-40`;
+const activePageBase =
+	'inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-sm border border-brand-navy bg-brand-navy px-4 py-2 font-sans text-sm font-bold text-white';
+
+/**
+ * Builds the sliding window of 1-indexed page numbers to render as buttons.
+ * Always shows: first, last, current, one neighbor each side.
+ * null entries represent ellipsis gaps.
+ */
+const pageWindow = $derived.by(() => {
+	const first = 1;
+	const last = totalPages;
+	const current = page + 1; // convert to 1-indexed
+
+	const windowStart = Math.max(first, current - 1);
+	const windowEnd = Math.min(last, current + 1);
+
+	const result: (number | null)[] = [];
+
+	result.push(first);
+
+	if (windowStart > first + 2) {
+		result.push(null); // left ellipsis
+	} else if (windowStart === first + 2) {
+		result.push(first + 1); // bridge: one page gap, show directly instead of ellipsis
+	}
+
+	for (let p = Math.max(windowStart, first + 1); p <= Math.min(windowEnd, last - 1); p++) {
+		result.push(p);
+	}
+
+	if (windowEnd < last - 2) {
+		result.push(null); // right ellipsis
+	} else if (windowEnd === last - 2) {
+		result.push(last - 1); // bridge: one page gap, show directly instead of ellipsis
+	}
+
+	if (last > first) {
+		result.push(last);
+	}
+
+	return result;
+});
 </script>
 
 {#if totalPages > 1}
@@ -52,13 +94,60 @@ const disabledBase = `${controlBase} cursor-not-allowed opacity-40`;
 			</span>
 		{/if}
 
+		<!-- Mobile: "Seite X von Y" label (hidden on sm: and above) -->
+		<!-- aria-hidden: decorative visual label; AT uses the sr-only span below for aria-current -->
 		<span
 			data-testid="pagination-page-label"
-			aria-current="page"
+			aria-hidden="true"
-			class="font-sans text-sm text-ink-2"
+			class="font-sans text-sm text-ink-2 sm:hidden"
 		>
 			{m.pagination_page_of({ page: page + 1, total: totalPages })}
 		</span>
+		<!-- Always in the AT tree: announces current page regardless of breakpoint.
+		     On mobile, the desktop button container is display:none so this is the only AT anchor.
+		     On desktop, the active page button also carries aria-current — both announce the same info. -->
+		<span data-testid="pagination-current-page-sr" aria-current="page" class="sr-only">
+			{m.pagination_page_of({ page: page + 1, total: totalPages })}
+		</span>
+
+		<!-- Desktop: numbered page buttons (hidden below sm:) -->
+		<div data-testid="pagination-pages" class="hidden items-center gap-1 sm:flex">
+			{#each pageWindow as entry, i (entry === null ? 'ellipsis-' + i : entry)}
+				{#if entry === null}
+					{#if i === 1}
+						<span
+							data-testid="pagination-ellipsis-left"
+							aria-hidden="true"
+							class="px-2 text-sm text-ink-2">…</span
+						>
+					{:else}
+						<span
+							data-testid="pagination-ellipsis-right"
+							aria-hidden="true"
+							class="px-2 text-sm text-ink-2">…</span
+						>
+					{/if}
+				{:else if entry === page + 1}
+					<span
+						data-testid="pagination-page-{entry}"
+						aria-current="page"
+						aria-label={m.pagination_page_button({ page: entry })}
+						class={activePageBase}
+					>
+						{entry}
+					</span>
+				{:else}
+					<a
+						data-testid="pagination-page-{entry}"
+						aria-label={m.pagination_page_button({ page: entry })}
+						href={makeHref(entry - 1)}
+						class={linkBase}
+					>
+						{entry}
+					</a>
+				{/if}
+			{/each}
+		</div>
 
 		{#if hasNext}
 			<a

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

@@ -19,11 +19,145 @@ describe('Pagination', () => {
 		await expect.element(label).toHaveTextContent(/10/);
 	});
 
-	it('marks the current page label with aria-current="page"', async () => {
+	it('mobile page label is aria-hidden (desktop buttons carry the aria-current role)', async () => {
 		render(Pagination, { page: 0, totalPages: 3, makeHref });
 
 		const label = page.getByTestId('pagination-page-label');
-		await expect.element(label).toHaveAttribute('aria-current', 'page');
+		await expect.element(label).toHaveAttribute('aria-hidden', 'true');
+	});
+
+	describe('page number buttons', () => {
+		it('renders page number buttons when totalPages > 1', async () => {
+			render(Pagination, { page: 4, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			// active page button — the current page (5, 1-indexed)
+			const activeBtn = nav.getByTestId('pagination-page-5');
+			await expect.element(activeBtn).toBeInTheDocument();
+		});
+
+		it('does not render page number buttons when totalPages <= 1', async () => {
+			render(Pagination, { page: 0, totalPages: 1, makeHref });
+
+			// entire nav is hidden
+			const nav = page.getByRole('navigation');
+			await expect.element(nav).not.toBeInTheDocument();
+		});
+
+		it('marks the active page button with aria-current="page"', async () => {
+			render(Pagination, { page: 4, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const activeBtn = nav.getByTestId('pagination-page-5');
+			await expect.element(activeBtn).toHaveAttribute('aria-current', 'page');
+		});
+
+		it('active page button has brand-navy background', async () => {
+			render(Pagination, { page: 4, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const activeBtn = nav.getByTestId('pagination-page-5');
+			await expect.element(activeBtn).toHaveClass(/bg-brand-navy/);
+		});
+
+		it('active page button has 44px touch target', async () => {
+			render(Pagination, { page: 4, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const activeBtn = nav.getByTestId('pagination-page-5');
+			await expect.element(activeBtn).toHaveClass(/min-h-\[44px\]/);
+			await expect.element(activeBtn).toHaveClass(/min-w-\[44px\]/);
+		});
+
+		it('inactive page buttons link to their target page via makeHref', async () => {
+			const spy = vi.fn(makeHref);
+			render(Pagination, { page: 4, totalPages: 12, makeHref: spy });
+
+			const nav = page.getByRole('navigation');
+			// page button for page 1 (0-indexed: 0) should link to /documents?page=0
+			const firstPageBtn = nav.getByTestId('pagination-page-1');
+			await expect.element(firstPageBtn).toHaveAttribute('href', '/documents?page=0');
+		});
+
+		it('renders first and last page buttons always visible', async () => {
+			render(Pagination, { page: 5, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			await expect.element(nav.getByTestId('pagination-page-1')).toBeInTheDocument();
+			await expect.element(nav.getByTestId('pagination-page-12')).toBeInTheDocument();
+		});
+
+		it('renders ellipsis span between first page and window when gap exists', async () => {
+			// page 6 (0-indexed: 5) — window is 5,6,7 — gap between 1 and 5
+			render(Pagination, { page: 5, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const ellipses = nav.getByTestId('pagination-ellipsis-left');
+			await expect.element(ellipses).toBeInTheDocument();
+		});
+
+		it('renders ellipsis span between window and last page when gap exists', async () => {
+			// page 1 (0-indexed: 0) — window is 1,2 — gap between 2 and 12
+			render(Pagination, { page: 0, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const ellipsis = nav.getByTestId('pagination-ellipsis-right');
+			await expect.element(ellipsis).toBeInTheDocument();
+		});
+
+		it('does not render left ellipsis when window is adjacent to first page', async () => {
+			// page 1 (0-indexed: 0) — window starts at 1, adjacent to first page
+			render(Pagination, { page: 0, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const leftEllipsis = nav.getByTestId('pagination-ellipsis-left');
+			await expect.element(leftEllipsis).not.toBeInTheDocument();
+		});
+
+		it('does not render right ellipsis when window is adjacent to last page', async () => {
+			// last page (0-indexed: 11) — window ends at 12, adjacent to last page
+			render(Pagination, { page: 11, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const rightEllipsis = nav.getByTestId('pagination-ellipsis-right');
+			await expect.element(rightEllipsis).not.toBeInTheDocument();
+		});
+
+		it('page buttons container has hidden class on mobile (sm: prefix)', async () => {
+			// The page buttons container must be hidden below sm: breakpoint
+			render(Pagination, { page: 4, totalPages: 12, makeHref });
+
+			const nav = page.getByRole('navigation');
+			const pageButtons = nav.getByTestId('pagination-pages');
+			await expect.element(pageButtons).toHaveClass(/hidden/);
+			await expect.element(pageButtons).toHaveClass(/sm:flex/);
+		});
+
+		it('renders both pages without ellipsis when totalPages is 2', async () => {
+			render(Pagination, { page: 0, totalPages: 2, makeHref });
+
+			const nav = page.getByRole('navigation');
+			await expect.element(nav.getByTestId('pagination-page-1')).toBeInTheDocument();
+			await expect.element(nav.getByTestId('pagination-page-2')).toBeInTheDocument();
+			await expect.element(nav.getByTestId('pagination-ellipsis-left')).not.toBeInTheDocument();
+			await expect.element(nav.getByTestId('pagination-ellipsis-right')).not.toBeInTheDocument();
+		});
+	});
+
+	it('mobile page label is aria-hidden so screen readers skip it on wide screens', async () => {
+		render(Pagination, { page: 2, totalPages: 10, makeHref });
+
+		const label = page.getByTestId('pagination-page-label');
+		await expect.element(label).toHaveAttribute('aria-hidden', 'true');
+	});
+
+	it('sr-only span always provides aria-current="page" for screen readers at all breakpoints', async () => {
+		render(Pagination, { page: 2, totalPages: 10, makeHref });
+
+		const nav = page.getByRole('navigation');
+		const srLabel = nav.getByTestId('pagination-current-page-sr');
+		await expect.element(srLabel).toBeInTheDocument();
+		await expect.element(srLabel).toHaveAttribute('aria-current', 'page');
 	});
 
 	it('renders prev as a link pointing at page - 1 when not on first page', async () => {

frontend/src/lib/components/PdfControls.svelte

@@ -91,7 +91,7 @@ let {
 			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-2 hover:bg-surface/10'
-				: 'bg-surface/10 text-accent'}"
+				: 'bg-surface/10 text-primary'}"
 		>
 			<svg
 				class="h-3.5 w-3.5 shrink-0"

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

@@ -0,0 +1,67 @@
+import { vi, describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+
+import PdfControls from './PdfControls.svelte';
+
+afterEach(cleanup);
+
+const defaultProps = {
+	currentPage: 1,
+	totalPages: 3,
+	isLoaded: true,
+	showAnnotations: false,
+	annotationCount: 0,
+	onPrev: vi.fn(),
+	onNext: vi.fn(),
+	onZoomIn: vi.fn(),
+	onZoomOut: vi.fn(),
+	onToggleAnnotations: vi.fn()
+};
+
+describe('PdfControls — annotation toggle visibility', () => {
+	it('renders annotation toggle when annotationCount is greater than zero', async () => {
+		render(PdfControls, { ...defaultProps, annotationCount: 3 });
+		await expect
+			.element(page.getByRole('button', { name: /annotierungen anzeigen/i }))
+			.toBeInTheDocument();
+	});
+
+	it('does not render annotation toggle when annotationCount is zero', async () => {
+		render(PdfControls, { ...defaultProps, annotationCount: 0 });
+		await expect
+			.element(page.getByRole('button', { name: /annotierungen/i }))
+			.not.toBeInTheDocument();
+	});
+});
+
+describe('PdfControls — annotation toggle label', () => {
+	it('shows "Annotierungen anzeigen" label when annotations are hidden', async () => {
+		render(PdfControls, { ...defaultProps, annotationCount: 2, showAnnotations: false });
+		const btn = page.getByRole('button', { name: /annotierungen anzeigen/i });
+		await expect.element(btn).toBeInTheDocument();
+	});
+
+	it('shows "Annotierungen verbergen" label when annotations are visible', async () => {
+		render(PdfControls, { ...defaultProps, annotationCount: 2, showAnnotations: true });
+		const btn = page.getByRole('button', { name: /annotierungen verbergen/i });
+		await expect.element(btn).toBeInTheDocument();
+	});
+});
+
+describe('PdfControls — annotation toggle contrast (WCAG 2.1 AA)', () => {
+	it('uses text-primary class on annotation toggle button when annotations are hidden', async () => {
+		const { container } = render(PdfControls, {
+			...defaultProps,
+			annotationCount: 2,
+			showAnnotations: false
+		});
+		const allButtons = container.querySelectorAll('button');
+		const annotationBtn = Array.from(allButtons).find((b) =>
+			b.getAttribute('aria-label')?.toLowerCase().includes('annotierungen')
+		);
+		expect(annotationBtn).not.toBeNull();
+		expect(annotationBtn!.className).toContain('text-primary');
+		expect(annotationBtn!.className).not.toContain('text-accent');
+	});
+});

frontend/src/lib/components/PdfViewer.svelte

@@ -18,6 +18,7 @@ let {
 	activeAnnotationId = $bindable<string | null>(null),
 	onAnnotationClick,
 	onTranscriptionDraw,
+	onDeleteAnnotationRequest,
 	documentFileHash,
 	annotationsDimmed = false,
 	flashAnnotationId = null
@@ -30,6 +31,7 @@ let {
 	activeAnnotationId?: string | null;
 	onAnnotationClick?: (id: string) => void;
 	onTranscriptionDraw?: (rect: DrawRect) => void;
+	onDeleteAnnotationRequest?: (annotationId: string) => void;
 	documentFileHash?: string | null;
 	annotationsDimmed?: boolean;
 	flashAnnotationId?: string | null;
@@ -264,6 +266,7 @@ function handleAnnotationClick(id: string) {
 								flashAnnotationId={flashAnnotationId}
 								onDraw={handleDraw}
 								onAnnotationClick={handleAnnotationClick}
+								onDeleteRequest={onDeleteAnnotationRequest}
 							/>
 						{/if}
 					</div>

frontend/src/lib/components/PersonTypeahead.svelte

@@ -76,22 +76,6 @@ const typeahead = createTypeahead<Person>({
 	debounceMs: 300
 });
 
-// Fixed-position dropdown state — escapes any CSS stacking context that would clip it.
-let inputEl: HTMLInputElement;
-let dropdownStyle = $state('');
-let activeIndex = $state(-1);
-
-// Stable id linking the input's aria-controls to the listbox element.
-const listboxId = `${name}-listbox`;
-
-const isOpen = $derived(typeahead.isOpen && (typeahead.results.length > 0 || typeahead.loading));
-
-function updateDropdownPosition() {
-	if (!inputEl) return;
-	const rect = inputEl.getBoundingClientRect();
-	dropdownStyle = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px`;
-}
-
 function handleInput() {
 	if (value && searchTerm !== initialName) {
 		value = '';
@@ -104,7 +88,6 @@ function handleInput() {
 
 function handleFocus() {
 	onfocused?.();
-	updateDropdownPosition();
 	if (restrictToCorrespondentsOf) {
 		const personId = untrack(() => restrictToCorrespondentsOf)!;
 		(async () => {
@@ -126,47 +109,13 @@ function selectPerson(person: Person) {
 	value = person.id!;
 	searchTerm = person.displayName;
 	typeahead.close();
-	activeIndex = -1;
 	onchange?.(person.id!);
 }
-
-function closeDropdown() {
-	typeahead.close();
-	activeIndex = -1;
-}
-
-function handleKeydown(e: KeyboardEvent) {
-	if (!isOpen) return;
-
-	const results = typeahead.results;
-
-	if (e.key === 'ArrowDown') {
-		e.preventDefault();
-		activeIndex = (activeIndex + 1) % results.length;
-	} else if (e.key === 'ArrowUp') {
-		e.preventDefault();
-		activeIndex = (activeIndex - 1 + results.length) % results.length;
-	} else if (e.key === 'Enter') {
-		e.preventDefault();
-		if (activeIndex >= 0 && results[activeIndex]) {
-			selectPerson(results[activeIndex]);
-		}
-	} else if (e.key === 'Escape') {
-		e.preventDefault();
-		closeDropdown();
-	}
-}
-
-// Keep dropdown position current when user scrolls or resizes.
-// fixed positioning is intentional — it escapes any CSS stacking context (overflow, transform,
-// shadow-sm + z-index combinations) that would clip an absolute-positioned dropdown.
 </script>
 
-<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
+<div class="relative" use:clickOutside onclickoutside={() => typeahead.close()}>
-
-<div class="relative" use:clickOutside onclickoutside={closeDropdown}>
 	<label
-		for="{name}-search"
+		for={name}
 		class={compact
 			? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
 			: 'block text-sm font-medium text-ink-2'}
@@ -176,22 +125,13 @@ function handleKeydown(e: KeyboardEvent) {
 	<input type="hidden" name={name} bind:value={value} />
 
 	<input
-		bind:this={inputEl}
 		type="text"
 		id="{name}-search"
-		role="combobox"
 		autocomplete="off"
 		autofocus={autofocus}
 		bind:value={searchTerm}
-		aria-expanded={isOpen}
-		aria-haspopup="listbox"
-		aria-controls={listboxId}
-		aria-activedescendant={activeIndex >= 0 && typeahead.results[activeIndex]
-			? `${listboxId}-option-${typeahead.results[activeIndex].id}`
-			: undefined}
 		oninput={handleInput}
 		onfocus={handleFocus}
-		onkeydown={handleKeydown}
 		placeholder={placeholder ?? m.comp_typeahead_placeholder()}
 		class={large
 			? 'mt-2 block h-14 w-full rounded-md border border-line bg-surface px-4 text-base text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'
@@ -200,34 +140,29 @@ function handleKeydown(e: KeyboardEvent) {
 				: 'mt-1 block w-full rounded border border-line bg-surface px-2 py-3 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}
 	/>
 
-	{#if isOpen}
+	{#if typeahead.isOpen && (typeahead.results.length > 0 || typeahead.loading)}
-		<ul
+		<div
-			id={listboxId}
+			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"
-			role="listbox"
-			style={dropdownStyle}
-			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 focus:outline-none sm:text-sm"
 		>
 			{#if typeahead.loading}
-				<li class="p-2 text-sm text-ink-2">{m.comp_typeahead_loading()}</li>
+				<div class="p-2 text-sm text-ink-2">{m.comp_typeahead_loading()}</div>
 			{:else}
-				{#each typeahead.results as person, i (person.id)}
+				{#each typeahead.results as person (person.id)}
-					<li
+					<div
-						id="{listboxId}-option-{person.id}"
+						class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg"
-						role="option"
-						aria-selected={i === activeIndex}
-						class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg {i === activeIndex ? 'bg-accent-bg' : ''}"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
-						tabindex="-1"
+						role="button"
+						tabindex="0"
 					>
 						<div class="flex items-center">
 							<span class="block truncate font-medium">
 								{person.displayName}
 							</span>
 						</div>
-					</li>
+					</div>
 				{/each}
 			{/if}
-		</ul>
+		</div>
 	{/if}
 </div>

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

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
-import { page, userEvent } from 'vitest/browser';
+import { page } from 'vitest/browser';
 import PersonTypeahead from './PersonTypeahead.svelte';
 
 const waitForDebounce = () => new Promise((r) => setTimeout(r, 350));
@@ -130,11 +130,11 @@ describe('PersonTypeahead – selection', () => {
 		const input = page.getByPlaceholder('Namen tippen...');
 		await input.fill('Mu');
 		await waitForDebounce();
-		document.querySelector<HTMLElement>('[role="option"]')!.click();
+		document.querySelector<HTMLElement>('[role="button"]')!.click();
 		await tick();
 		await expect.element(input).toHaveValue('Max Mustermann');
 		await expect
-			.element(page.getByRole('option', { name: 'Max Mustermann' }))
+			.element(page.getByRole('button', { name: 'Max Mustermann' }))
 			.not.toBeInTheDocument();
 		await page.screenshot({ path: 'test-results/screenshots/person-typeahead-selected.png' });
 	});
@@ -145,7 +145,7 @@ describe('PersonTypeahead – selection', () => {
 		const input = page.getByPlaceholder('Namen tippen...');
 		await input.fill('Mu');
 		await waitForDebounce();
-		document.querySelector<HTMLElement>('[role="option"]')!.click();
+		document.querySelector<HTMLElement>('[role="button"]')!.click();
 		await tick();
 		await tick();
 		expect(hiddenInput('senderId')?.value).toBe('1');
@@ -158,7 +158,7 @@ describe('PersonTypeahead – selection', () => {
 		const input = page.getByPlaceholder('Namen tippen...');
 		await input.fill('Mu');
 		await waitForDebounce();
-		document.querySelector<HTMLElement>('[role="option"]')!.click();
+		document.querySelector<HTMLElement>('[role="button"]')!.click();
 		await tick();
 		expect(onchange).toHaveBeenCalledWith('1');
 	});
@@ -177,7 +177,7 @@ describe('PersonTypeahead – selection', () => {
 		const input = page.getByPlaceholder('Namen tippen...');
 		await input.fill('Ma');
 		await waitForDebounce();
-		document.querySelector<HTMLElement>('[role="option"]')!.click();
+		document.querySelector<HTMLElement>('[role="button"]')!.click();
 		await tick();
 		await expect.element(input).toHaveValue('Max Mustermann');
 	});
@@ -194,7 +194,7 @@ describe('PersonTypeahead – clearing a selection', () => {
 
 		await input.fill('Mu');
 		await waitForDebounce();
-		document.querySelector<HTMLElement>('[role="option"]')!.click();
+		document.querySelector<HTMLElement>('[role="button"]')!.click();
 		await tick();
 		expect(onchange).toHaveBeenCalledWith('1');
 		onchange.mockClear();
@@ -285,175 +285,3 @@ describe('PersonTypeahead – click outside', () => {
 		await expect.element(page.getByText('Max Mustermann')).not.toBeInTheDocument();
 	});
 });
-
-// ─── ARIA roles ───────────────────────────────────────────────────────────────
-
-describe('PersonTypeahead – ARIA roles', () => {
-	it('dropdown uses role="listbox" container and role="option" items', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-
-		// Container must be a listbox
-		await expect.element(page.getByRole('listbox')).toBeInTheDocument();
-
-		// Items must be options, not buttons
-		const options = page.getByRole('option');
-		await expect.element(options.first()).toBeInTheDocument();
-		await expect.element(page.getByRole('option', { name: 'Max Mustermann' })).toBeInTheDocument();
-		await expect.element(page.getByRole('option', { name: 'Anna Musterfrau' })).toBeInTheDocument();
-	});
-
-	it('input has aria-expanded="false" when dropdown is closed', async () => {
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await expect.element(input).toHaveAttribute('aria-expanded', 'false');
-	});
-
-	it('input has aria-expanded="true" when dropdown is open', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-		await expect.element(input).toHaveAttribute('aria-expanded', 'true');
-	});
-
-	it('input has aria-controls pointing to the listbox id', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-
-		const ariaControls = await input.element().getAttribute('aria-controls');
-		expect(ariaControls).toBeTruthy();
-
-		// The listbox with that id must exist
-		const listbox = document.getElementById(ariaControls!);
-		expect(listbox).not.toBeNull();
-		expect(listbox!.getAttribute('role')).toBe('listbox');
-	});
-
-	it('input has aria-haspopup="listbox"', async () => {
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await expect.element(input).toHaveAttribute('aria-haspopup', 'listbox');
-	});
-});
-
-// ─── Keyboard navigation ──────────────────────────────────────────────────────
-
-describe('PersonTypeahead – keyboard navigation', () => {
-	it('ArrowDown moves highlight to the first option', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-
-		await input.click();
-		await userEvent.keyboard('{ArrowDown}');
-		await tick();
-
-		// First option should be highlighted (aria-selected="true")
-		const firstOption = page.getByRole('option', { name: 'Max Mustermann' });
-		await expect.element(firstOption).toHaveAttribute('aria-selected', 'true');
-	});
-
-	it('ArrowDown then ArrowDown moves highlight to the second option', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-
-		await input.click();
-		await userEvent.keyboard('{ArrowDown}');
-		await tick();
-		await userEvent.keyboard('{ArrowDown}');
-		await tick();
-
-		const secondOption = page.getByRole('option', { name: 'Anna Musterfrau' });
-		await expect.element(secondOption).toHaveAttribute('aria-selected', 'true');
-	});
-
-	it('ArrowUp from first wraps to last option', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-
-		await input.click();
-		await userEvent.keyboard('{ArrowDown}'); // highlight first
-		await tick();
-		await userEvent.keyboard('{ArrowUp}'); // wrap to last
-		await tick();
-
-		const lastOption = page.getByRole('option', { name: 'Anna Musterfrau' });
-		await expect.element(lastOption).toHaveAttribute('aria-selected', 'true');
-	});
-
-	it('Enter selects the highlighted option', async () => {
-		mockFetchWithPersons([
-			{
-				id: '1',
-				firstName: 'Max',
-				lastName: 'Mustermann',
-				displayName: 'Max Mustermann',
-				personType: 'PERSON'
-			}
-		]);
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Ma');
-		await waitForDebounce();
-
-		await input.click();
-		await userEvent.keyboard('{ArrowDown}');
-		await tick();
-		await userEvent.keyboard('{Enter}');
-		await tick();
-
-		await expect.element(input).toHaveValue('Max Mustermann');
-		await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
-	});
-
-	it('Escape closes the dropdown without selecting', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-		await expect.element(page.getByRole('listbox')).toBeInTheDocument();
-
-		await input.click();
-		await userEvent.keyboard('{Escape}');
-		await tick();
-		await expect.element(page.getByRole('listbox')).not.toBeInTheDocument();
-		// Value unchanged — nothing was selected
-		await expect.element(input).toHaveValue('Mu');
-	});
-
-	it('active option id is set as aria-activedescendant on the input', async () => {
-		mockFetchWithPersons();
-		render(PersonTypeahead, { name: 'senderId', label: 'Absender' });
-		const input = page.getByPlaceholder('Namen tippen...');
-		await input.fill('Mu');
-		await waitForDebounce();
-
-		// No active option before pressing ArrowDown
-		const beforeNav = await input.element().getAttribute('aria-activedescendant');
-		expect(beforeNav).toBeFalsy();
-
-		await input.click();
-		await userEvent.keyboard('{ArrowDown}');
-		await tick();
-
-		const afterNav = await input.element().getAttribute('aria-activedescendant');
-		expect(afterNav).toBeTruthy();
-	});
-});

frontend/src/lib/components/ProgressRing.svelte

@@ -19,7 +19,7 @@ let { percentage }: { percentage: number } = $props();
 		/>
 	</svg>
 	<span
-		class="block text-center font-sans text-xs font-bold {percentage > 0 ? 'text-accent' : 'text-gray-400'}"
+		class="block text-center font-sans text-xs font-bold {percentage > 0 ? 'text-primary' : 'text-gray-400'}"
 	>
 		{percentage}%
 	</span>

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

@@ -25,12 +25,12 @@ describe('ProgressRing', () => {
 		expect(el.className).toContain('text-gray-400');
 	});
 
-	it('renders a mint-colored label when percentage is > 0', async () => {
+	it('renders a primary-colored label when percentage is > 0', async () => {
 		render(ProgressRing, { percentage: 75 });
 		const label = page.getByText('75%');
 		await expect.element(label).toBeInTheDocument();
 		const el = (await label.element()) as HTMLElement;
-		expect(el.className).toContain('text-accent');
+		expect(el.className).toContain('text-primary');
 	});
 
 	it('renders a fully filled arc for 100%', async () => {

frontend/src/lib/components/ThemeToggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { onMount } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
 
 type Theme = 'light' | 'dark';
 
@@ -19,6 +20,10 @@ onMount(() => {
 	theme = resolveInitialTheme();
 });
 
+const themeLabel = $derived(
+	theme === 'dark' ? m.theme_toggle_to_light() : m.theme_toggle_to_dark()
+);
+
 function toggle() {
 	theme = theme === 'dark' ? 'light' : 'dark';
 	localStorage.setItem('theme', theme);
@@ -29,8 +34,8 @@ function toggle() {
 <button
 	type="button"
 	onclick={toggle}
-	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
+	aria-label={themeLabel}
-	title={theme === 'dark' ? 'light mode' : 'dark mode'}
+	title={themeLabel}
 	class="rounded p-1.5 text-white/65 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 >
 	{#if theme === 'dark'}

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

@@ -0,0 +1,45 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ThemeToggle from './ThemeToggle.svelte';
+
+afterEach(() => {
+	cleanup();
+	localStorage.removeItem('theme');
+});
+
+describe('ThemeToggle — label derivation (light mode)', () => {
+	beforeEach(() => {
+		localStorage.setItem('theme', 'light');
+	});
+
+	it('aria-label invites switching to dark mode when theme is light', async () => {
+		render(ThemeToggle);
+		const btn = await page.getByRole('button').element();
+		expect(btn.getAttribute('aria-label')).toBe('Zu dunklem Design wechseln');
+	});
+
+	it('title equals aria-label in light mode', async () => {
+		render(ThemeToggle);
+		const btn = await page.getByRole('button').element();
+		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
+	});
+});
+
+describe('ThemeToggle — label derivation (dark mode)', () => {
+	beforeEach(() => {
+		localStorage.setItem('theme', 'dark');
+	});
+
+	it('aria-label invites switching to light mode when theme is dark', async () => {
+		render(ThemeToggle);
+		const btn = await page.getByRole('button').element();
+		expect(btn.getAttribute('aria-label')).toBe('Zu hellem Design wechseln');
+	});
+
+	it('title equals aria-label in dark mode', async () => {
+		render(ThemeToggle);
+		const btn = await page.getByRole('button').element();
+		expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
+	});
+});

frontend/src/lib/components/TranscriptionEditView.svelte

@@ -19,6 +19,7 @@ type Props = {
 	onSaveBlock: (blockId: string, text: string) => Promise<void>;
 	onDeleteBlock: (blockId: string) => Promise<void>;
 	onReviewToggle: (blockId: string) => Promise<void>;
+	onMarkAllReviewed?: () => Promise<void>;
 	onTriggerOcr?: (scriptType: string, useExistingAnnotations: boolean) => void;
 	canWrite?: boolean;
 	trainingLabels?: string[];
@@ -37,6 +38,7 @@ let {
 	onSaveBlock,
 	onDeleteBlock,
 	onReviewToggle,
+	onMarkAllReviewed,
 	onTriggerOcr,
 	canWrite = false,
 	trainingLabels = [],
@@ -46,12 +48,14 @@ let {
 let activeBlockId: string | null = $state(null);
 let localLabels: string[] = $derived.by(() => [...trainingLabels]);
 let listEl: HTMLElement | null = $state(null);
+let markingAllReviewed = $state(false);
 
 const sortedBlocks = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
 const hasBlocks = $derived(blocks.length > 0);
 const reviewedCount = $derived(blocks.filter((b) => b.reviewed).length);
 const totalCount = $derived(blocks.length);
 const reviewProgress = $derived(totalCount > 0 ? (reviewedCount / totalCount) * 100 : 0);
+const allReviewed = $derived(totalCount > 0 && reviewedCount === totalCount);
 
 // Sync: when an annotation is clicked on the PDF, activate the corresponding block
 $effect(() => {
@@ -60,6 +64,16 @@ $effect(() => {
 	if (block) activeBlockId = block.id;
 });
 
+async function handleMarkAllReviewed() {
+	if (!onMarkAllReviewed) return;
+	markingAllReviewed = true;
+	try {
+		await onMarkAllReviewed();
+	} finally {
+		markingAllReviewed = false;
+	}
+}
+
 const autoSave = createBlockAutoSave({ saveFn: onSaveBlock, documentId });
 
 const dragDrop = createBlockDragDrop({
@@ -147,9 +161,56 @@ async function handleLabelToggle(label: string) {
 	{#if hasBlocks}
 		<!-- Sticky review progress header -->
 		<div class="sticky top-0 z-10 border-b border-line bg-surface px-4 pt-3 pb-2">
-			<p class="font-sans text-xs text-ink-2">
+			<div class="flex items-center justify-between">
-				<span class="font-semibold text-ink">{reviewedCount} / {totalCount}</span> geprüft
+				<p class="font-sans text-xs text-ink-2">
-			</p>
+					<span class="font-semibold text-ink">{reviewedCount} / {totalCount}</span> geprüft
+				</p>
+				{#if onMarkAllReviewed}
+					<button
+						onclick={handleMarkAllReviewed}
+						disabled={allReviewed || markingAllReviewed}
+						title={allReviewed ? 'Alle Blöcke sind bereits als fertig markiert' : undefined}
+						class="flex min-h-[44px] items-center gap-1.5 rounded-sm px-3 font-sans text-xs font-medium text-brand-navy/80 transition-colors hover:text-brand-navy focus-visible:ring-2 focus-visible:ring-brand-navy disabled:opacity-40"
+					>
+						{#if markingAllReviewed}
+							<svg
+								class="h-3.5 w-3.5 animate-spin"
+								fill="none"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								></circle>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+								></path>
+							</svg>
+						{:else}
+							<svg
+								class="h-3.5 w-3.5"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+							</svg>
+						{/if}
+						Alle als fertig markieren
+					</button>
+				{/if}
+			</div>
 			<div class="bg-brand-sand mt-1.5 h-0.5 w-full overflow-hidden rounded-full">
 				<div
 					class="h-full rounded-full bg-brand-mint transition-all duration-300"

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

@@ -49,6 +49,11 @@ function renderView(overrides: Record<string, unknown> = {}, service = createCon
 	};
 }
 
+const unreviewedBlock1 = { ...block1, reviewed: false };
+const unreviewedBlock2 = { ...block2, reviewed: false };
+const reviewedBlock1 = { ...block1, reviewed: true };
+const reviewedBlock2 = { ...block2, reviewed: true };
+
 describe('TranscriptionEditView — rendering', () => {
 	it('renders blocks in sort order', async () => {
 		renderView();
@@ -269,3 +274,61 @@ describe('TranscriptionEditView — review progress counter', () => {
 		await expect.element(page.getByText(/geprüft/)).not.toBeInTheDocument();
 	});
 });
+
+// ─── Bulk mark all as reviewed ────────────────────────────────────────────────
+
+describe('TranscriptionEditView — mark all reviewed', () => {
+	it('shows "Alle als fertig markieren" button when onMarkAllReviewed is provided and blocks are unreviewed', async () => {
+		renderView({
+			blocks: [unreviewedBlock1, unreviewedBlock2],
+			onMarkAllReviewed: vi.fn().mockResolvedValue(undefined)
+		});
+		await expect
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
+			.toBeInTheDocument();
+	});
+
+	it('does not show "Alle als fertig markieren" button when onMarkAllReviewed is not provided', async () => {
+		renderView({ blocks: [unreviewedBlock1, unreviewedBlock2] });
+		await expect
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
+			.not.toBeInTheDocument();
+	});
+
+	it('disables button when all blocks are already reviewed', async () => {
+		renderView({
+			blocks: [reviewedBlock1, reviewedBlock2],
+			onMarkAllReviewed: vi.fn().mockResolvedValue(undefined)
+		});
+		await expect
+			.element(page.getByRole('button', { name: /Alle als fertig markieren/ }))
+			.toBeDisabled();
+	});
+
+	it('calls onMarkAllReviewed exactly once when button is clicked', async () => {
+		const onMarkAllReviewed = vi.fn().mockResolvedValue(undefined);
+		renderView({
+			blocks: [unreviewedBlock1, unreviewedBlock2],
+			onMarkAllReviewed
+		});
+
+		await page.getByRole('button', { name: /Alle als fertig markieren/ }).click();
+		await vi.waitFor(() => expect(onMarkAllReviewed).toHaveBeenCalledTimes(1));
+	});
+
+	it('disables button while operation is in-flight', async () => {
+		let resolveMarkAll!: () => void;
+		const onMarkAllReviewed = vi
+			.fn()
+			.mockReturnValue(new Promise<void>((r) => (resolveMarkAll = r)));
+		renderView({
+			blocks: [unreviewedBlock1, unreviewedBlock2],
+			onMarkAllReviewed
+		});
+
+		const btn = page.getByRole('button', { name: /Alle als fertig markieren/ });
+		await btn.click();
+		await expect.element(btn).toBeDisabled();
+		resolveMarkAll();
+	});
+});

frontend/src/routes/briefwechsel/ConversationFilterBar.svelte

@@ -31,7 +31,7 @@ let {
 	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 		<!-- Sender -->
 		<div
-			class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_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"
@@ -73,7 +73,7 @@ let {
 
 		<!-- Receiver -->
 		<div
-			class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_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"
@@ -86,7 +86,7 @@ let {
 		</div>
 	</div>
 
-	<div class="grid grid-cols-1 items-end gap-6 md:grid-cols-3">
+	<div class="relative z-10 grid grid-cols-1 items-end gap-6 md:grid-cols-3">
 		<!-- Date From -->
 		<div>
 			<label

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

@@ -13,9 +13,12 @@ import { getErrorMessage } from '$lib/errors';
 import { translateOcrProgress } from '$lib/ocr/translateOcrProgress';
 import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
 import { scrollToCommentFromQuery } from '$lib/utils/deepLinkScroll';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { data } = $props();
 
+const { confirm } = getConfirmService();
+
 const doc = $derived(data.document);
 const canWrite = $derived(data.canWrite ?? false);
 const currentUserId = $derived((data.user?.id as string | undefined) ?? null);
@@ -105,6 +108,26 @@ async function deleteBlock(blockId: string) {
 	annotationReloadKey++;
 }
 
+async function handleAnnotationDeleteRequest(annotationId: string) {
+	const confirmed = await confirm({
+		title: m.transcription_block_delete_confirm(),
+		destructive: true
+	});
+	if (!confirmed) return;
+
+	const block = transcriptionBlocks.find((b) => b.annotationId === annotationId);
+	if (block) {
+		await deleteBlock(block.id);
+	} else {
+		// Annotation has no linked block — delete the annotation directly
+		const res = await fetch(`/api/documents/${doc.id}/annotations/${annotationId}`, {
+			method: 'DELETE'
+		});
+		if (!res.ok) throw new Error('Delete annotation failed');
+		annotationReloadKey++;
+	}
+}
+
 async function reviewToggle(blockId: string) {
 	const res = await fetch(`/api/documents/${doc.id}/transcription-blocks/${blockId}/review`, {
 		method: 'PUT'
@@ -114,6 +137,18 @@ async function reviewToggle(blockId: string) {
 	transcriptionBlocks = transcriptionBlocks.map((b) => (b.id === blockId ? updated : b));
 }
 
+async function markAllReviewed() {
+	const res = await fetch(`/api/documents/${doc.id}/transcription-blocks/review-all`, {
+		method: 'PUT'
+	});
+	if (!res.ok) return;
+	const updated = await res.json();
+	for (const b of updated) {
+		const existing = transcriptionBlocks.find((x) => x.id === b.id);
+		if (existing) existing.reviewed = b.reviewed;
+	}
+}
+
 async function toggleTrainingLabel(label: string, enrolled: boolean) {
 	const res = await fetch(`/api/documents/${doc.id}/training-labels`, {
 		method: 'PATCH',
@@ -381,6 +416,7 @@ onMount(() => {
 				bind:activeAnnotationId={activeAnnotationId}
 				onAnnotationClick={handleAnnotationClick}
 				onTranscriptionDraw={createBlockFromDraw}
+				onDeleteAnnotationRequest={handleAnnotationDeleteRequest}
 			/>
 		</div>
 
@@ -477,6 +513,7 @@ onMount(() => {
 							onSaveBlock={saveBlock}
 							onDeleteBlock={deleteBlock}
 							onReviewToggle={reviewToggle}
+							onMarkAllReviewed={markAllReviewed}
 							onTriggerOcr={triggerOcr}
 							onToggleTrainingLabel={toggleTrainingLabel}
 						/>

frontend/src/routes/layout.css

@@ -365,6 +365,11 @@
 		text-underline-offset: 4px;
 	}
 
+	/* Tailwind preflight resets cursor on *, overriding the browser default for buttons */
+	button {
+		cursor: pointer;
+	}
+
 	/* Fallback focus ring for any interactive element not styled with ring-focus-ring */
 	:focus-visible {
 		outline: 2px solid var(--c-focus-ring);

frontend/src/routes/persons/[id]/PersonMergePanel.svelte

@@ -15,7 +15,7 @@ let mergeTargetId = $state('');
 let showMergeConfirm = $state(false);
 </script>
 
-<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
+<div class="mb-10 overflow-hidden rounded-sm border border-red-200 bg-surface shadow-sm">
 	<div class="p-6 md:p-8">
 		<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">

frontend/src/routes/persons/[id]/PersonMergePanel.svelte.spec.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import PersonMergePanel from './PersonMergePanel.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$lib/components/PersonTypeahead.svelte', () => ({
+	default: () => null
+}));
+
+afterEach(cleanup);
+
+const makePerson = (overrides = {}) => ({
+	displayName: 'Hans Müller',
+	...overrides
+});
+
+// ─── Danger indicator ────────────────────────────────────────────────────────
+
+describe('PersonMergePanel — danger indicator', () => {
+	it('renders outer container with red border class', () => {
+		const { container } = render(PersonMergePanel, {
+			props: { person: makePerson(), form: null }
+		});
+		const panel = container.firstElementChild as HTMLElement;
+		expect(panel?.classList.contains('border-red-200')).toBe(true);
+	});
+});
+
+// ─── Initial state ────────────────────────────────────────────────────────────
+
+describe('PersonMergePanel — initial state', () => {
+	it('renders merge heading', async () => {
+		render(PersonMergePanel, { props: { person: makePerson(), form: null } });
+		const heading = page.getByRole('heading', { level: 2 });
+		await expect.element(heading).toBeInTheDocument();
+	});
+
+	it('merge button is disabled when no target selected', async () => {
+		render(PersonMergePanel, { props: { person: makePerson(), form: null } });
+		const mergeBtn = page.getByRole('button', { name: /zusammenführen/i });
+		await expect.element(mergeBtn).toBeDisabled();
+	});
+});
+
+// ─── Error state ──────────────────────────────────────────────────────────────
+
+describe('PersonMergePanel — error state', () => {
+	it('renders mergeError when form contains error', async () => {
+		render(PersonMergePanel, {
+			props: { person: makePerson(), form: { mergeError: 'Zielperson nicht gefunden.' } }
+		});
+		await expect.element(page.getByText('Zielperson nicht gefunden.')).toBeInTheDocument();
+	});
+});

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

@@ -5,7 +5,7 @@ import BackButton from '$lib/components/BackButton.svelte';
 import PersonEditForm from './PersonEditForm.svelte';
 import PersonEditSaveBar from './PersonEditSaveBar.svelte';
 import NameHistoryEditCard from './NameHistoryEditCard.svelte';
-import PersonDangerZone from './PersonDangerZone.svelte';
+import PersonMergePanel from '../PersonMergePanel.svelte';
 
 let { data, form } = $props();
 const person = $derived(data.person);
@@ -35,7 +35,9 @@ const person = $derived(data.person);
 
 	<NameHistoryEditCard aliases={data.aliases} canWrite={true} aliasError={form?.aliasError} />
 
-	<PersonDangerZone person={person} form={form} />
+	{#key person.id}
+		<PersonMergePanel person={person} form={form} />
+	{/key}
 
 	<PersonEditSaveBar discardHref="/persons/{person.id}" formId="person-edit-form" />
 </div>

frontend/src/routes/persons/[id]/edit/PersonDangerZone.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
-import PersonMergePanel from '../PersonMergePanel.svelte';
-
-let {
-	person,
-	form
-}: {
-	person: { id: string; firstName?: string | null; lastName: string; displayName: string };
-	form?: { mergeError?: string } | null;
-} = $props();
-
-let open = $state(false);
-</script>
-
-<div class="mt-8 overflow-hidden rounded-sm border border-red-200 bg-surface shadow-sm">
-	<button
-		type="button"
-		onclick={() => (open = !open)}
-		class="flex w-full items-center justify-between px-6 py-4 text-left"
-		aria-expanded={open}
-	>
-		<span class="text-sm font-bold tracking-widest text-red-600 uppercase">
-			{m.person_danger_zone_heading()}
-		</span>
-		<svg
-			class="h-4 w-4 text-red-400 transition-transform {open ? 'rotate-180' : ''}"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-		>
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-		</svg>
-	</button>
-
-	{#if open}
-		<div class="border-t border-red-100 px-6 py-4">
-			{#key person.id}
-				<PersonMergePanel person={person} form={form} />
-			{/key}
-		</div>
-	{/if}
-</div>