fix(korrespondenz): dark theme, compact strip labels, year divider size, chevron alignment

- Add compact prop to PersonTypeahead: 7px uppercase label, 30px h input (matches spec FL/FI)
- Replace all hardcoded hex in 6 korrespondenz components with theme tokens (bg-surface,
  bg-muted, bg-canvas, border-line, text-ink, text-primary, text-accent, etc.)
- Fix year divider: text-[15px] font-black (spec: 15px/900)
- Fix log row chevron: items-center instead of items-start for vertical centering
- Fix recent-persons persistence: move persistRecentPerson to post-navigation $effect so
  senderName is resolved from server before stored in localStorage
- Add metadataComplete field to makeDoc() fixture to satisfy updated Document type
- Restore opacity-0 on swap button when only one person is set (matches spec + test)

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

frontend/src/lib/components/PersonTypeahead.svelte

@@ -11,6 +11,7 @@ interface Props {
 	initialName?: string;
 	suggestedName?: string;
 	placeholder?: string;
+	compact?: boolean;
 	restrictToCorrespondentsOf?: string;
 	onchange?: (value: string) => void;
 	onfocused?: () => void;
@@ -23,6 +24,7 @@ let {
 	initialName = '',
 	suggestedName = '',
 	placeholder,
+	compact = false,
 	restrictToCorrespondentsOf,
 	onchange,
 	onfocused
@@ -125,7 +127,13 @@ function clickOutside(node: HTMLElement) {
 </script>
 
 <div class="relative" use:clickOutside>
-	<label for={name} class="block text-sm font-medium text-ink-2">{label}</label>
+	<label
+		for={name}
+		class={compact
+			? 'block text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase'
+			: 'block text-sm font-medium text-ink-2'}
+		>{label}</label
+	>
 
 	<input type="hidden" name={name} bind:value={value} />
 
@@ -137,7 +145,9 @@ function clickOutside(node: HTMLElement) {
 		oninput={handleInput}
 		onfocus={handleFocus}
 		placeholder={placeholder ?? m.comp_typeahead_placeholder()}
-		class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent"
+		class={compact
+			? 'block h-[30px] w-full rounded-[3px] border-[1.5px] border-line bg-surface px-[7px] text-[9px] text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
+			: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'}
 	/>
 
 	{#if showDropdown && (results.length > 0 || loading)}

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

@@ -21,7 +21,7 @@ let sortDir = $state(untrack(() => data.filters.dir));
 let senderName = $state(untrack(() => data.initialValues.senderName));
 let receiverName = $state(untrack(() => data.initialValues.receiverName));
 
-// Sync with server data after navigation
+// Sync with server data after navigation; persist recent persons once the name is resolved
 $effect(() => {
 	senderId = data.filters.senderId;
 	receiverId = data.filters.receiverId;
@@ -30,6 +30,9 @@ $effect(() => {
 	sortDir = data.filters.dir;
 	senderName = data.initialValues.senderName;
 	receiverName = data.initialValues.receiverName;
+	if (data.filters.senderId && data.initialValues.senderName) {
+		persistRecentPerson(data.filters.senderId, data.initialValues.senderName);
+	}
 });
 
 const isSinglePerson = $derived(!!senderId && !receiverId);
@@ -51,9 +54,6 @@ function persistRecentPerson(id: string, name: string) {
 }
 
 function applyFilters() {
-	// Persist to recent persons when a person is selected
-	if (senderId && senderName) persistRecentPerson(senderId, senderName);
-
 	const params = new SvelteURLSearchParams();
 	if (senderId) params.set('senderId', senderId);
 	if (receiverId) params.set('receiverId', receiverId);

frontend/src/routes/korrespondenz/ConversationTimeline.svelte

@@ -80,30 +80,30 @@ const newDocUrl = $derived(
 
 {#if isBilateral && documents.length > 0}
 	<div
-		class="flex flex-col gap-1 border-b border-[#E8E4DF] bg-[#F7F5F2] px-[18px] py-2"
+		class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2"
 		role="img"
 		aria-label="Briefverteilung in diesem Zeitraum: {outCount} von {senderName ?? ''}, {inCount} von {receiverName ?? ''}"
 	>
 		<div class="flex justify-between text-[10px] font-bold">
-			<span class="text-[#002850]">{outCount} von {shortSenderName} →</span>
+			<span class="text-primary">{outCount} von {shortSenderName} →</span>
-			<span class="text-[#0F5755]">{inCount} von {shortReceiverName} ←</span>
+			<span class="text-accent">{inCount} von {shortReceiverName} ←</span>
 		</div>
-		<div class="flex h-[5px] overflow-hidden rounded-full bg-[#E0DDD6]">
+		<div class="flex h-[5px] overflow-hidden rounded-full bg-line">
-			<div class="h-full bg-[#002850] transition-all" style="width: {outPct}%"></div>
+			<div class="h-full bg-primary transition-all" style="width: {outPct}%"></div>
-			<div class="h-full bg-[#A6DAD8] transition-all" style="width: {100 - outPct}%"></div>
+			<div class="h-full bg-accent transition-all" style="width: {100 - outPct}%"></div>
 		</div>
 	</div>
 {/if}
 
-<div class="overflow-hidden rounded-sm border border-[#E0DDD6] bg-white">
+<div class="overflow-hidden rounded-sm border border-line bg-surface">
 	{#each enrichedDocuments as { doc, year, showYearDivider, isOut } (doc.id)}
 		{#if showYearDivider && year !== null}
 			<div
 				data-testid="year-divider"
-				class="flex items-baseline gap-2 border-t-2 border-b border-[#C8C4BE] border-[#D8D4CE] bg-[#F0EDE6] px-[14px] py-[6px]"
+				class="flex items-baseline gap-2 border-t-2 border-b border-line bg-muted px-[14px] py-[6px]"
 			>
-				<span class="text-base font-black tracking-tight text-[#002850]">{year}</span>
+				<span class="text-[15px] leading-none font-black tracking-tight text-primary">{year}</span>
-				<span class="text-xs font-bold text-[#AAA]">{countsByYear.get(year) ?? 0} Briefe</span>
+				<span class="text-[10px] font-bold text-ink-3">{countsByYear.get(year) ?? 0} Briefe</span>
 			</div>
 		{/if}
 
@@ -112,31 +112,31 @@ const newDocUrl = $derived(
 			aria-label="{doc.title || doc.originalFilename}, {doc.documentDate
 				? formatDate(doc.documentDate)
 				: ''}"
-			class="group flex min-h-[44px] cursor-pointer items-start gap-[9px] border-b border-l-[3px] border-[#EDEBE4] px-[14px] py-[10px] transition-colors last:border-b-0 hover:bg-[#F7F5F2]"
+			class="group flex min-h-[44px] cursor-pointer items-center gap-[9px] border-b border-l-[3px] border-line-2 px-[14px] py-[10px] transition-colors last:border-b-0 hover:bg-muted"
-			class:border-l-[#002850]={isOut}
+			class:border-l-primary={isOut}
-			class:border-l-[#A6DAD8]={!isOut}
+			class:border-l-accent={!isOut}
 		>
 			<span
-				class="w-[14px] shrink-0 pt-[1px] text-xs font-black"
+				class="w-[14px] shrink-0 text-xs font-black"
-				class:text-[#002850]={isOut}
+				class:text-primary={isOut}
-				class:text-[#0F5755]={!isOut}
+				class:text-accent={!isOut}
 				aria-hidden="true"
 			>
 				{isOut ? '→' : '←'}
 			</span>
 
 			<div class="min-w-0 flex-1">
-				<div class="mb-[2px] truncate text-sm font-bold text-[#0D2240]">
+				<div class="mb-[2px] truncate text-sm font-bold text-ink">
 					{doc.title || doc.originalFilename}
 				</div>
-				<div class="flex items-center gap-[5px] text-xs text-[#888]">
+				<div class="flex items-center gap-[5px] text-xs text-ink-3">
 					<span>{doc.documentDate ? formatDate(doc.documentDate) : '—'}</span>
 					{#if doc.location}
-						<span class="text-[#D1CCC8]">·</span>
+						<span class="text-line">·</span>
 						<span>{doc.location}</span>
 					{/if}
 					{#if !receiverId}
-						<span class="text-[#D1CCC8]">·</span>
+						<span class="text-line">·</span>
 						<span>{otherPartyName(doc)}</span>
 					{/if}
 					<span
@@ -147,18 +147,18 @@ const newDocUrl = $derived(
 			</div>
 
 			<span
-				class="shrink-0 text-[#888] opacity-0 transition-opacity group-hover:opacity-100"
+				class="shrink-0 text-ink-3 opacity-0 transition-opacity group-hover:opacity-100"
 				aria-hidden="true">›</span
 			>
 		</a>
 	{/each}
 
 	{#if canWrite}
-		<div class="flex justify-end border-t border-[#E8E4DF] px-[14px] py-[6px]">
+		<div class="flex justify-end border-t border-line px-[14px] py-[6px]">
 			<a
 				href={newDocUrl}
 				data-testid="conv-new-doc-link"
-				class="inline-flex items-center gap-1 text-xs font-bold text-[#002850]/50 transition-colors hover:text-[#002850]"
+				class="inline-flex items-center gap-1 text-xs font-bold text-primary/50 transition-colors hover:text-primary"
 			>
 				<svg
 					class="h-3 w-3"

frontend/src/routes/korrespondenz/CorrespondentSuggestionsDropdown.svelte

@@ -79,11 +79,11 @@ function getInitials(person: Correspondent): string {
 	role="listbox"
 	tabindex="-1"
 	aria-label={conv_suggestions_heading()}
-	class="absolute top-full right-0 left-0 z-30 mt-1 rounded-sm border border-[#E0DDD6] bg-white shadow-lg"
+	class="absolute top-full right-0 left-0 z-30 mt-1 rounded-sm border border-line bg-surface shadow-lg"
 	onkeydown={(e) => handleKeydown(e, e.currentTarget as HTMLElement)}
 >
 	<!-- Heading -->
-	<div class="px-3 pt-2 pb-1 text-[10px] font-bold tracking-widest text-[#888] uppercase">
+	<div class="px-3 pt-2 pb-1 text-[10px] font-bold tracking-widest text-ink-3 uppercase">
 		{conv_suggestions_heading()}
 	</div>
 
@@ -94,33 +94,32 @@ function getInitials(person: Correspondent): string {
 				role="option"
 				aria-selected="false"
 				tabindex="0"
-				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-[#333] hover:bg-[#F7F5F2] focus:bg-[#F7F5F2] focus:outline-none"
+				class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none"
 				onclick={() => onselect(person.id)}
 				onkeydown={(e) => e.key === 'Enter' && onselect(person.id)}
 			>
 				<!-- Avatar with initials -->
 				<span
-					class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#002850] text-[10px] font-bold text-white"
+					class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-fg"
 					aria-hidden="true"
 				>
 					{getInitials(person)}
 				</span>
 				<!-- Svelte auto-escapes — do not use {@html} here. -->
 				{person.lastName}, {person.firstName}
-				<!-- TODO: show proportional letter-count bar when counts are available from the API -->
 			</div>
 		{/each}
 	{/if}
 
 	<!-- Separator -->
-	<div class="mt-1 border-t border-[#E0DDD6]"></div>
+	<div class="mt-1 border-t border-line"></div>
 
 	<!-- "Alle Korrespondenten" row -->
 	<div
 		role="option"
 		aria-selected="false"
 		tabindex="0"
-		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-[#333] hover:bg-[#F7F5F2] focus:bg-[#F7F5F2] focus:outline-none"
+		class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-ink hover:bg-muted focus:bg-muted focus:outline-none"
 		onclick={() => onselect('')}
 		onkeydown={(e) => e.key === 'Enter' && onselect('')}
 	>

frontend/src/routes/korrespondenz/CorrespondenzEmptyState.svelte

@@ -30,7 +30,7 @@ onMount(() => {
 
 <div class="mx-auto flex max-w-sm flex-col items-center gap-4 py-16 text-center">
 	<!-- Icon circle -->
-	<div class="rounded-full bg-[#F0EDE6] p-4">
+	<div class="rounded-full bg-muted p-4">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			width="24"
@@ -41,7 +41,7 @@ onMount(() => {
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class="text-[#002850]"
+			class="text-primary"
 			aria-hidden="true"
 		>
 			<rect x="2" y="4" width="20" height="16" rx="2" />
@@ -50,10 +50,10 @@ onMount(() => {
 	</div>
 
 	<!-- Heading -->
-	<h2 class="font-serif text-sm font-black text-[#0D2240]">Korrespondenz durchsuchen</h2>
+	<h2 class="font-serif text-sm font-black text-ink">Korrespondenz durchsuchen</h2>
 
 	<!-- Subtext -->
-	<p class="max-w-[280px] text-xs text-[#888]">
+	<p class="max-w-[280px] text-xs text-ink-3">
 		Wähle eine Person aus dem Archiv um deren Briefe zu sehen — mit oder ohne Korrespondent.
 	</p>
 
@@ -63,7 +63,7 @@ onMount(() => {
 		data-testid="conv-empty-search"
 		aria-label={conv_empty_search_placeholder()}
 		onclick={() => onSelectPerson('')}
-		class="flex h-[28px] w-[260px] items-center rounded-sm border border-[#D1D5DB] bg-[#F9F8F6] px-3 text-xs text-[#AAA] italic transition-colors hover:border-[#002850]"
+		class="flex h-[28px] w-[260px] items-center rounded-sm border border-line bg-muted px-3 text-xs text-ink-3 italic transition-colors hover:border-primary"
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -86,15 +86,15 @@ onMount(() => {
 
 	<!-- Divider -->
 	<div class="flex w-full items-center gap-2">
-		<div class="flex-1 border-t border-[#E0DDD6]"></div>
+		<div class="flex-1 border-t border-line"></div>
-		<span class="text-[10px] font-bold tracking-wider text-[#AAA] uppercase">oder</span>
+		<span class="text-[10px] font-bold tracking-wider text-ink-3 uppercase">oder</span>
-		<div class="flex-1 border-t border-[#E0DDD6]"></div>
+		<div class="flex-1 border-t border-line"></div>
 	</div>
 
 	<!-- Recent persons -->
 	{#if recentPersons.length > 0}
 		<div class="flex w-full flex-col items-center gap-2">
-			<span class="text-[10px] font-bold tracking-widest text-[#888] uppercase">
+			<span class="text-[10px] font-bold tracking-widest text-ink-3 uppercase">
 				{conv_empty_recent_label()}
 			</span>
 			<div class="flex flex-wrap justify-center gap-2">
@@ -103,10 +103,10 @@ onMount(() => {
 					<button
 						type="button"
 						onclick={() => onSelectPerson(person.id)}
-						class="flex items-center gap-1.5 rounded-full border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-bold text-[#333] transition-colors hover:border-[#002850] hover:text-[#002850]"
+						class="flex items-center gap-1.5 rounded-full border border-line bg-surface px-3 py-1.5 text-xs font-bold text-ink transition-colors hover:border-primary hover:text-primary"
 					>
 						<span
-							class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#002850] text-[10px] text-white"
+							class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] text-primary-fg"
 							aria-hidden="true"
 						>
 							{person.name.charAt(0).toUpperCase()}

frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte

@@ -33,13 +33,13 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 </script>
 
 <div
-	class="flex items-center gap-[10px] border-b border-[#E0DDD6] bg-[#F7F5F2] px-4 py-[5px] transition-opacity sm:px-[18px]"
+	class="flex items-center gap-[10px] border-b border-line bg-muted px-4 py-[5px] transition-opacity sm:px-[18px]"
 	class:opacity-40={!senderId}
 	class:pointer-events-none={!senderId}
 	aria-disabled={!senderId}
 >
 	<!-- Period label -->
-	<span class="hidden text-xs font-bold text-[#888] sm:block">
+	<span class="hidden text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase sm:block">
 		{conv_strip_period()}
 	</span>
 
@@ -50,15 +50,12 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		onchange={() => onapplyFilters()}
 		placeholder={conv_strip_from_placeholder()}
 		aria-label="Von"
-		class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border px-1 text-xs focus:outline-none sm:min-h-0"
+		class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0"
-		class:border-[#002850]={!!fromDate}
+		class:border-primary={!!fromDate}
-		class:text-[#333]={!!fromDate}
+		class:border-line={!fromDate}
-		class:border-[#D1D5DB]={!fromDate}
-		class:text-[#AAA]={!fromDate}
-		class:italic={!fromDate}
 	/>
 
-	<span class="text-xs text-[#AAA]">–</span>
+	<span class="text-xs text-ink-3">–</span>
 
 	<!-- To date -->
 	<input
@@ -67,20 +64,17 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		onchange={() => onapplyFilters()}
 		placeholder={conv_strip_to_placeholder()}
 		aria-label="Bis"
-		class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border px-1 text-xs focus:outline-none sm:min-h-0"
+		class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0"
-		class:border-[#002850]={!!toDate}
+		class:border-primary={!!toDate}
-		class:text-[#333]={!!toDate}
+		class:border-line={!toDate}
-		class:border-[#D1D5DB]={!toDate}
-		class:text-[#AAA]={!toDate}
-		class:italic={!toDate}
 	/>
 
 	<!-- Document count -->
 	<span
 		data-testid="conv-strip-count"
-		class="ml-auto text-xs font-bold"
+		class="ml-auto text-[8px] font-bold"
-		class:text-[#002850]={hasDateFilter}
+		class:text-primary={hasDateFilter}
-		class:text-[#888]={!hasDateFilter}
+		class:text-ink-3={!hasDateFilter}
 	>
 		{conv_letters_count({ count: documentCount ?? 0 })}
 	</span>
@@ -92,11 +86,11 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 		aria-label="Sortierung umkehren"
 		aria-pressed={sortDir === 'ASC'}
 		onclick={ontoggleSort}
-		class="flex h-[22px] min-h-[44px] items-center gap-1 rounded-[3px] border px-2 text-xs font-bold sm:min-h-0"
+		class="flex h-[22px] min-h-[44px] items-center gap-1 rounded-[3px] border-[1.5px] px-2 text-[8px] font-bold sm:min-h-0"
-		class:border-[#002850]={isActive}
+		class:border-primary={isActive}
-		class:text-[#002850]={isActive}
+		class:text-primary={isActive}
-		class:border-[#D1D5DB]={!isActive}
+		class:border-line={!isActive}
-		class:text-[#888]={!isActive}
+		class:text-ink-3={!isActive}
 	>
 		{#if sortDir === 'ASC'}
 			{conv_strip_sort_oldest()}

frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte

@@ -35,7 +35,7 @@ function handleSuggestionSelect(id: string) {
 }
 </script>
 
-<div class="flex items-end gap-[9px] border-b border-[#EAE7E0] bg-white px-4 py-[9px] sm:px-[18px]">
+<div class="flex items-end gap-[9px] border-b border-line bg-surface px-4 py-[9px] sm:px-[18px]">
 	<!-- Person A -->
 	<div class="min-w-0 flex-1">
 		<PersonTypeahead
@@ -43,6 +43,7 @@ function handleSuggestionSelect(id: string) {
 			label="Person"
 			bind:value={senderId}
 			initialName={initialSenderName}
+			compact={true}
 			restrictToCorrespondentsOf={receiverId || undefined}
 			onchange={() => onapplyFilters()}
 		/>
@@ -54,7 +55,8 @@ function handleSuggestionSelect(id: string) {
 		type="button"
 		aria-label="Personen tauschen"
 		onclick={onswapPersons}
-		class="mb-1 flex h-7 w-7 shrink-0 items-center justify-center rounded border border-[#D1D5DB] bg-white text-[#888] transition-colors hover:border-[#002850] hover:text-[#002850]"
+		class="mb-[1px] flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[3px] border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
+		class:opacity-0={!swapVisible}
 		class:pointer-events-none={!swapVisible}
 		tabindex={swapVisible ? 0 : -1}
 	>
@@ -80,13 +82,14 @@ function handleSuggestionSelect(id: string) {
 		class="relative min-w-0 flex-1"
 		class:[&_input]:border-dashed={!receiverId}
 		class:[&_input]:border-solid={!!receiverId}
-		class:[&_input]:bg-[#F9F8F6]={!receiverId}
+		class:[&_input]:bg-canvas={!receiverId}
 	>
 		<PersonTypeahead
 			name="receiverId"
 			label={receiverId ? 'Korrespondent' : 'Korrespondent — optional'}
 			bind:value={receiverId}
 			initialName={initialReceiverName}
+			compact={true}
 			placeholder="Alle Korrespondenten"
 			restrictToCorrespondentsOf={senderId || undefined}
 			onchange={() => {

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

@@ -37,6 +37,7 @@ const makeDoc = (overrides: Record<string, unknown> = {}) => ({
 	status: 'UPLOADED' as const,
 	documentDate: '1923-04-12',
 	location: 'Berlin',
+	metadataComplete: false,
 	sender: { id: 'p1', firstName: 'Hans', lastName: 'Müller' },
 	receivers: [{ id: 'p2', firstName: 'Anna', lastName: 'Schmidt' }],
 	tags: [],