feat(timeline): give LetterCard an event variant and chip suppression

Add a `variant="event"` that marks the card `.lcard.ev` for Ereignis-mode event
clusters (#827, REQ-014) and a `suppressTagChip` that hides the per-letter
TagChip inside its own Thema bucket where the header already conveys the topic
(REQ-017). Datum/Ereignis keep the #838 per-letter chip behaviour.

Refs #827
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/timeline/LetterCard.svelte

@@ -12,9 +12,19 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
  * precision-aware date chip, linking to the document. Names/titles are
  * OCR/import-derived — rendered via default `{...}` escaping with
  * `whitespace-pre-line` for line breaks (REQ-021); never the raw-HTML directive.
+ *
+ * In Ereignis mode the card sits inside an event cluster and renders as the
+ * `.lcard.ev` variant (#827, REQ-014). In Thema mode the per-letter tag chip is
+ * suppressed inside its own root-tag bucket, where the bucket header already
+ * carries the topic (`suppressTagChip`, REQ-017).
  */
-let { entry }: { entry: TimelineEntryDTO } = $props();
+let {
+	entry,
+	variant = 'plain',
+	suppressTagChip = false
+}: { entry: TimelineEntryDTO; variant?: 'plain' | 'event'; suppressTagChip?: boolean } = $props();
 
+const isEventVariant = $derived(variant === 'event');
 const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
 const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
 const receiver = $derived(
@@ -28,7 +38,8 @@ const receiver = $derived(
 <a
 	href="/documents/{entry.documentId}"
 	style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
-	class="rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+	class="lcard rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+	class:ev={isEventVariant}
 >
 	{#if entry.title}
 		<!-- ✉ + sr-only label are static chrome rendered as sibling nodes, NEVER
@@ -47,9 +58,10 @@ const receiver = $derived(
 			<span data-testid="letter-date"> · {dateLabel}</span>
 		{/if}
 	</span>
-	{#if entry.rootTagName}
+	{#if entry.rootTagName && !suppressTagChip}
 		<!-- The primary root-tag chip sits on its own line beneath the meta line
-		     (#835 §3); absent when the letter has no tag (REQ-005). -->
+		     (#835 §3); absent when the letter has no tag (REQ-005), and suppressed in
+		     Thema mode inside its own root-tag bucket where the header conveys it (REQ-017). -->
 		<TagChip name={entry.rootTagName} color={entry.rootTagColor ?? null} />
 	{/if}
 </a>

frontend/src/lib/timeline/LetterCard.svelte.spec.ts

@@ -127,3 +127,28 @@ describe('LetterCard', () => {
 		expect(chip?.textContent).toContain('Familie');
 	});
 });
+
+describe('LetterCard — grouping variants (#827, REQ-014/017)', () => {
+	it('carries the .lcard.ev class in the event variant (REQ-014)', () => {
+		render(LetterCard, { entry: makeEntry(), variant: 'event' });
+		expect(document.querySelector('a.lcard.ev')).not.toBeNull();
+	});
+
+	it('is a plain card with no .ev marker by default (REQ-014)', () => {
+		render(LetterCard, { entry: makeEntry() });
+		expect(document.querySelector('a.ev')).toBeNull();
+	});
+
+	it('suppresses the per-letter tag chip when asked, even with a root tag (REQ-017)', () => {
+		render(LetterCard, {
+			entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }),
+			suppressTagChip: true
+		});
+		expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
+	});
+
+	it('still shows the per-letter tag chip when not suppressed — Datum/Ereignis (REQ-017)', () => {
+		render(LetterCard, { entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }) });
+		expect(document.querySelector('[data-testid="tag-chip"]')).not.toBeNull();
+	});
+});