feat(geschichten): add /geschichten routes (index, detail, new, edit)

- /geschichten — published-stories index with filter pills + "+ Neue Geschichte"
  for BLOG_WRITERs; supports ?personId and ?documentId pre-filtering
- /geschichten/[id] — reader detail with sanitised {@html} body, person and
  document chip sections, BLOG_WRITER edit/delete with confirm dialog
- /geschichten/new — editor with optional ?personId and ?documentId pre-fill
  (silent ignore on unknown IDs to avoid leaking entity existence)
- /geschichten/[id]/edit — editor populated from existing story; BLOG_WRITE
  guard redirects readers to the detail page

All routes load via createApiClient(fetch) with !response.ok error handling
following the project pattern; PATCH/DELETE go through raw fetch which the
Vite dev proxy / Caddy production proxy authenticates via cookie.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/routes/geschichten/[id]/+page.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+import { goto } from '$app/navigation';
+import { m } from '$lib/paraglide/messages.js';
+import { safeHtml } from '$lib/utils/sanitize';
+import { formatDate } from '$lib/utils/date';
+import { getConfirmService } from '$lib/services/confirm.svelte';
+import BackButton from '$lib/components/BackButton.svelte';
+import type { PageData } from './$types';
+
+let { data }: { data: PageData } = $props();
+
+const g = $derived(data.geschichte);
+const sanitized = $derived(safeHtml(g.body));
+
+const publishedAt = $derived.by(() => {
+	if (!g.publishedAt) return null;
+	return formatDate(g.publishedAt.slice(0, 10), 'long');
+});
+
+function authorName(): string {
+	const a = g.author;
+	if (!a) return '';
+	const full = [a.firstName, a.lastName].filter(Boolean).join(' ').trim();
+	return full || a.email || '';
+}
+
+const confirm = getConfirmService();
+
+async function handleDelete() {
+	const ok = await confirm.confirm({
+		title: m.geschichte_delete_confirm_title(),
+		body: m.geschichte_delete_confirm_body(),
+		confirmLabel: m.btn_delete(),
+		cancelLabel: m.btn_cancel(),
+		destructive: true
+	});
+	if (!ok) return;
+	const res = await fetch(`/api/geschichten/${g.id}`, { method: 'DELETE' });
+	if (res.ok) {
+		goto('/geschichten');
+	}
+}
+</script>
+
+<div class="mx-auto max-w-3xl px-4 py-8">
+	<div class="mb-6">
+		<BackButton />
+	</div>
+
+	<article aria-labelledby="geschichte-title">
+		<header class="mb-6">
+			<h1 id="geschichte-title" class="mb-3 font-serif text-4xl font-bold text-ink">
+				{g.title}
+			</h1>
+			<p class="font-sans text-sm text-ink-3">
+				{authorName()}
+				{#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
+			</p>
+		</header>
+
+		<div class="prose font-serif text-lg leading-relaxed text-ink">
+			<!-- Sanitised via safeHtml() (DOMPurify) on render — matches backend OWASP allow-list -->
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html sanitized}
+		</div>
+	</article>
+
+	<!-- Personen -->
+	{#if g.persons && g.persons.length > 0}
+		<section class="mt-10 border-t border-line pt-6">
+			<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.geschichten_persons_section()}
+			</h2>
+			<ul class="flex flex-wrap gap-2">
+				{#each g.persons as p (p.id)}
+					<li>
+						<a
+							href="/persons/{p.id}"
+							class="inline-flex items-center rounded-full bg-muted px-3 py-1 font-sans text-sm text-ink hover:bg-accent-bg"
+						>
+							{p.displayName}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</section>
+	{/if}
+
+	<!-- Dokumente -->
+	{#if g.documents && g.documents.length > 0}
+		<section class="mt-8 border-t border-line pt-6">
+			<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+				{m.geschichten_documents_section()}
+			</h2>
+			<ul class="flex flex-col gap-2">
+				{#each g.documents as d (d.id)}
+					<li>
+						<a
+							href="/documents/{d.id}"
+							class="block rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted"
+						>
+							{d.title}
+							{#if d.documentDate}
+								<span class="ml-2 font-sans text-xs text-ink-3">
+									{formatDate(d.documentDate, 'short')}
+								</span>
+							{/if}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</section>
+	{/if}
+
+	<!-- Author actions -->
+	{#if data.canBlogWrite}
+		<div class="mt-10 flex items-center gap-3 border-t border-line pt-6">
+			<a
+				href="/geschichten/{g.id}/edit"
+				class="inline-flex h-11 items-center rounded border border-line bg-surface px-4 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			>
+				{m.btn_edit()}
+			</a>
+			<button
+				type="button"
+				onclick={handleDelete}
+				class="inline-flex h-11 items-center rounded font-sans text-sm font-medium text-danger hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			>
+				{m.btn_delete()}
+			</button>
+		</div>
+	{/if}
+</div>