fix(geschichte-detail): span directory width with centered reading column

The detail page stayed at max-w-3xl and looked narrower than every
other page. The outer container now matches the directory width
(max-w-7xl) so the sheet spans the page like Dokumente/Personen, while
an inner max-w-3xl column keeps the prose line length readable.

Refs #799
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/specs/geschichten-reader-journey-spec.html

@@ -640,7 +640,7 @@
           <thead><tr><th>Element</th><th>Wert</th><th>Hinweise</th></tr></thead>
           <tbody>
             <tr class="grp"><td colspan="3">Artikel-Container</td></tr>
-            <tr><td>Article container</td><td>max-w-3xl mx-auto px-4 py-8</td><td>zentriert, volle Breite auf Mobile</td></tr>
+            <tr><td>Article container</td><td>max-w-7xl mx-auto px-4 py-8; innere Lesespalte: max-w-3xl mx-auto</td><td>Seite so breit wie Dokumente/Personen; Textspalte bleibt lesbar zentriert</td></tr>
             <tr><td>Article sheet</td><td>rounded-sm border border-line bg-sheet shadow-sm px-5 py-6 sm:px-10 sm:py-10</td><td>Lesebogen-Panel zwischen Canvas und weißen Karten (Token --color-sheet); BackButton bleibt außerhalb</td></tr>
             <tr><td>Story title</td><td>font-family:var(--font-display);font-size:clamp(22px,4vw,32px);color:var(--navy)</td><td>Fraunces, nicht fett</td></tr>
             <tr><td>Back button</td><td>&lt;BackButton /&gt; aus $lib/components/BackButton.svelte</td><td>history.back(); nicht &lt;a href&gt;</td></tr>

docs/specs/lesereisen-reader-spec.html

@@ -629,7 +629,7 @@
           <tbody>
             <tr class="grp"><td colspan="3">Seitenstruktur</td></tr>
             <tr><td>Bedingte Logik</td><td>{#if geschichte.type === 'JOURNEY'} JourneyReader {:else} StoryReader {/if}</td><td>in +page.svelte von /geschichten/[id]</td></tr>
-            <tr><td>Artikel-Container</td><td>max-w-3xl mx-auto px-4 py-8</td><td>gleich wie StoryReader</td></tr>
+            <tr><td>Artikel-Container</td><td>max-w-7xl mx-auto px-4 py-8; innere Lesespalte: max-w-3xl mx-auto</td><td>gleich wie StoryReader (R-2)</td></tr>
             <tr><td>Artikel-Sheet</td><td>rounded-sm border border-line bg-sheet shadow-sm px-5 py-6 sm:px-10 sm:py-10</td><td>Lesebogen-Panel zwischen Canvas und weißen Karten (Token --color-sheet), gleich wie Story (R-2); BackButton bleibt außerhalb</td></tr>
             <tr><td>Journey-Badge</td><td>inline-flex px-2 py-px rounded-sm text-[10px] font-bold uppercase tracking-widest bg-journey-tint text-journey border border-journey-border mb-2</td><td>über dem Titel; nicht für STORY</td></tr>
             <tr><td>Titel</td><td>font-serif text-3xl text-ink leading-tight mb-4</td><td>gleich wie Story</td></tr>

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

@@ -48,7 +48,7 @@ async function handleDelete() {
 }
 </script>
 
-<div class="mx-auto max-w-3xl px-4 py-8">
+<div class="mx-auto max-w-7xl px-4 py-8">
 	<div class="mb-6">
 		<BackButton />
 	</div>
@@ -57,6 +57,7 @@ async function handleDelete() {
 		aria-labelledby="geschichte-title"
 		class="rounded-sm border border-line bg-sheet px-5 py-6 shadow-sm sm:px-10 sm:py-10"
 	>
+		<div class="mx-auto max-w-3xl">
 			<header class="mb-6">
 				{#if isJourney}
 					<span
@@ -126,5 +127,6 @@ async function handleDelete() {
 			{:else}
 				<StoryReader geschichte={g} />
 			{/if}
+		</div>
 	</article>
 </div>

frontend/src/routes/geschichten/[id]/page.svelte.test.ts

@@ -70,6 +70,20 @@ describe('geschichten/[id] page', () => {
 			.toBeVisible();
 	});
 
+	it('spans the directory width with a centered reading column inside the sheet (#799)', async () => {
+		render(GeschichtePage, {
+			context: new Map([[CONFIRM_KEY, createConfirmService()]]),
+			props: { data: baseData() }
+		});
+
+		const outer = document.querySelector('[class*="mx-auto"]');
+		expect(outer!.className).toContain('max-w-7xl');
+
+		const column = document.querySelector('article [class*="max-w-3xl"]');
+		expect(column).not.toBeNull();
+		expect(column!.className).toContain('mx-auto');
+	});
+
 	it('renders the article on a reading-sheet surface card (#797)', async () => {
 		render(GeschichtePage, {
 			context: new Map([[CONFIRM_KEY, createConfirmService()]]),