feat(topbar): increase all font sizes and bar height by 25% for legibility

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

frontend/src/lib/components/AnnotateHintStrip.svelte

@@ -9,10 +9,10 @@ let { annotateMode }: Props = $props();
 {#if annotateMode}
 	<div
 		data-testid="annotate-hint-strip"
-		class="hidden h-[18px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
+		class="hidden h-[23px] items-center gap-2 border-t border-dashed px-3.5 md:flex"
 		style="background: rgba(1,40,81,0.05); border-color: rgba(1,40,81,0.20)"
 	>
-		<span class="text-[10px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
-		<span class="text-[10px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
+		<span class="text-[13px] font-bold tracking-wide text-primary uppercase">Annotieren</span>
+		<span class="text-[13px] text-ink-2">Klicken Sie auf einen Bereich im Dokument</span>
 	</div>
 {/if}

frontend/src/lib/components/DocumentStatusChip.svelte

@@ -14,7 +14,7 @@ const label = $derived(statusLabel(status));
 </script>
 
 <span
-	class="hidden shrink-0 md:block {dotClass} h-2.5 w-2.5 rounded-full"
+	class="hidden shrink-0 md:block {dotClass} h-3 w-3 rounded-full"
 	title={label}
 	aria-label={label}
 ></span>

frontend/src/lib/components/DocumentTopBar.svelte

@@ -42,7 +42,7 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
 
 <div data-topbar class="border-b border-line bg-surface shadow-sm">
 	<!-- Main row -->
-	<div class="flex h-12 shrink-0 items-center xs:h-14">
+	<div class="flex h-[60px] shrink-0 items-center xs:h-[70px]">
 		<!-- Accent bar -->
 		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
 
@@ -66,13 +66,13 @@ const longDate = $derived(doc.documentDate ? formatDate(doc.documentDate, 'long'
 		<!-- Title + meta -->
 		<div class="min-w-0 flex-1 overflow-hidden">
 			<h1
-				class="truncate font-serif text-[11px] leading-tight text-ink lg:text-[13px]"
+				class="truncate font-serif text-[14px] leading-tight text-ink lg:text-[16px]"
 				title={doc.title ?? doc.originalFilename ?? ''}
 			>
 				{doc.title || doc.originalFilename}
 			</h1>
 			{#if shortDate}
-				<p class="font-sans text-[10px] text-ink-2">
+				<p class="font-sans text-[13px] text-ink-2">
 					<span class="lg:hidden">{shortDate}</span>
 					<span class="hidden lg:inline">{longDate}</span>
 				</p>

frontend/src/lib/components/OverflowPillButton.svelte

@@ -47,7 +47,7 @@ function handleKeydown(e: KeyboardEvent) {
 		aria-label="{extraCount} weitere Empfänger anzeigen"
 		onclick={toggle}
 		onkeydown={handleKeydown}
-		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[9px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
+		class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
 	>
 		+{extraCount} weitere
 	</button>
@@ -57,12 +57,12 @@ function handleKeydown(e: KeyboardEvent) {
 			role="list"
 			class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
 		>
-			<p class="mb-2 text-[9px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
+			<p class="mb-2 text-[11px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
 			{#each persons as person (person.id)}
 				<div role="listitem">
 					<a
 						href="/persons/{person.id}"
-						class="block py-0.5 text-[11px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
+						class="block py-0.5 text-[14px] text-ink hover:text-primary focus-visible:ring-2 focus-visible:ring-primary"
 					>
 						{person.firstName}
 						{person.lastName}

frontend/src/lib/components/OverflowPillDisplay.svelte

@@ -8,7 +8,7 @@ let { extraCount }: Props = $props();
 
 <span
 	aria-hidden="true"
-	class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[9px] font-bold text-ink-2"
+	class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[11px] font-bold text-ink-2"
 >
 	+{extraCount}
 </span>

frontend/src/lib/components/PersonChip.svelte

@@ -23,11 +23,11 @@ const initials = $derived(
 	class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5"
 >
 	<span
-		class="flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[8px] font-bold text-white"
+		class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
 		style="background-color: {avatarColor}"
 		aria-hidden="true"
 	>
 		{initials}
 	</span>
-	<span class="text-[9px] font-semibold text-ink">{displayName}</span>
+	<span class="text-[11px] font-semibold text-ink">{displayName}</span>
 </span>

frontend/src/lib/components/PersonChipRow.svelte

@@ -22,7 +22,7 @@ const visibleReceivers = $derived(receivers.slice(0, 2));
 	{/if}
 
 	{#if sender && receivers.length > 0}
-		<span class="shrink-0 text-[10px] text-ink-2" aria-hidden="true">→</span>
+		<span class="shrink-0 text-[13px] text-ink-2" aria-hidden="true">→</span>
 	{/if}
 
 	{#each visibleReceivers as receiver, i (receiver.id)}