feat(chronik): align layout to grouped card pattern; fix duplicate rollup count

- ChronikTimeline: date buckets now render as bordered cards with muted
  header (border-line / bg-surface / shadow-sm) and divide-y row
  separators, matching the DocumentList card pattern
- ChronikRow: remove rounded-sm (card handles clipping), hover:bg-canvas
  → hover:bg-muted/50; restore rollup count badge after doc title
- Messages (de/en/es): remove embedded {count} from all four rollup verb
  strings so the badge is the single source of truth, consistent with
  DashboardActivityFeed

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

frontend/src/lib/components/chronik/ChronikRow.svelte

@@ -108,7 +108,7 @@ const rowHref: string = $derived(
 <a
 	href={rowHref}
 	data-variant={variant}
-	class="group flex items-start gap-3 rounded-sm p-3 transition-colors hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none
+	class="group flex items-start gap-3 p-3 transition-colors hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none
 		{variant === 'for-you' ? 'border-l-[3px] border-accent bg-accent-bg/10' : ''}"
 >
 	<!-- Avatar -->

frontend/src/lib/components/chronik/ChronikTimeline.svelte

@@ -43,17 +43,19 @@ const grouped: Record<DayBucket, ActivityFeedItemDTO[]> = $derived.by(() => {
 });
 </script>
 
-<div class="flex flex-col">
+<div class="mt-6 flex flex-col">
 	{#each BUCKET_ORDER as bucket (bucket)}
 		{#if grouped[bucket].length > 0}
-			<section data-testid="chronik-bucket-{bucket}">
-				<div class="mt-6 mb-2 flex items-center gap-3">
-					<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+			<section
+				data-testid="chronik-bucket-{bucket}"
+				class="mb-4 overflow-hidden border border-line bg-surface shadow-sm"
+			>
+				<div class="border-b border-line bg-muted px-5 py-2">
+					<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{bucketLabel(bucket)}
 					</span>
-					<span class="h-px flex-1 bg-line"></span>
 				</div>
-				<ul role="list" class="flex flex-col gap-2">
+				<ul role="list" class="divide-y divide-line">
 					{#each grouped[bucket] as it (it.kind + it.happenedAt + it.documentId)}
 						<li>
 							<ChronikRow item={it} />