feat(lesereisen): implement lesereisen

frontend/src/lib/geschichte/GeschichteListRow.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { plainExcerpt } from '$lib/shared/utils/extractText';
+import { getInitials, personAvatarColor } from '$lib/person/personFormat';
+import { formatAuthorName, formatPublishedAt } from './utils';
+import type { components } from '$lib/generated/api';
+
+type GeschichteRow = Pick<
+	components['schemas']['GeschichteSummary'],
+	'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
+>;
+
+let { geschichte }: { geschichte: GeschichteRow } = $props();
+
+const isJourney = $derived(geschichte.type === 'JOURNEY');
+
+const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'));
+
+const authorName = $derived(formatAuthorName(geschichte.author));
+</script>
+
+<a
+	href="/geschichten/{geschichte.id}"
+	class="group flex min-h-[44px] transition-colors hover:bg-canvas/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+>
+	<!-- Meta column (desktop) -->
+	<div class="hidden w-40 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
+		<span
+			aria-hidden="true"
+			class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"
+			style="background-color: {personAvatarColor(authorName)}"
+		>
+			{getInitials(authorName)}
+		</span>
+		<span class="font-sans text-sm leading-tight font-semibold text-ink">{authorName}</span>
+		{#if publishedAt}
+			<span class="font-sans text-sm text-ink-3">{publishedAt}</span>
+		{/if}
+		{#if isJourney}
+			<span
+				data-testid="journey-badge"
+				class="inline-flex items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-xs font-bold tracking-wide text-journey uppercase"
+			>
+				{m.journey_badge_list()}
+			</span>
+		{/if}
+	</div>
+
+	<!-- Content column -->
+	<div class="min-w-0 flex-1 p-3 sm:px-4">
+		<!-- Compact meta line (mobile only) -->
+		<div class="mb-1 flex items-center gap-1.5 sm:hidden">
+			<!-- 7px initials render as smudge at this size — a plain color dot reads better -->
+			<span
+				aria-hidden="true"
+				class="h-2.5 w-2.5 shrink-0 rounded-full"
+				style="background-color: {personAvatarColor(authorName)}"
+			></span>
+			<span class="font-sans text-sm font-semibold text-ink">{authorName}</span>
+			{#if publishedAt}
+				<span class="ml-auto font-sans text-sm text-ink-3">{publishedAt}</span>
+			{/if}
+		</div>
+
+		<div class="mb-1 flex items-center gap-1.5">
+			<h2 class="font-serif text-lg leading-snug text-ink group-hover:underline">
+				{geschichte.title}
+			</h2>
+			{#if isJourney}
+				<span
+					data-testid="journey-badge-mobile"
+					class="inline-flex shrink-0 items-center rounded-sm border border-journey-border bg-journey-tint px-1.5 py-px font-sans text-xs font-bold tracking-wide text-journey uppercase sm:hidden"
+				>
+					{m.journey_badge_list()}
+				</span>
+			{/if}
+		</div>
+		{#if geschichte.body}
+			<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
+			<p class="line-clamp-2 font-sans text-sm leading-relaxed text-ink-3">
+				{plainExcerpt(geschichte.body, 150)}
+			</p>
+		{/if}
+	</div>
+</a>