From b926bdefde60dab57137849d2cc4ad9c2cc9a9d9 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 10 Jun 2026 22:24:37 +0200
Subject: [PATCH] feat(geschichte-detail): render article on a reading-sheet
 surface card

The R-2 mockup shows the article on a distinct light panel, but the
impl-ref table only specified the centered container, so the page
rendered flat on the canvas. Wrap the <article> in the standard card
pattern (BackButton stays outside on the canvas) and record the sheet
in both spec impl-ref tables so mockup and impl-ref agree.

Closes #797
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/specs/geschichten-reader-journey-spec.html     |  3 ++-
 docs/specs/lesereisen-reader-spec.html              |  1 +
 frontend/src/routes/geschichten/[id]/+page.svelte   |  5 ++++-
 .../src/routes/geschichten/[id]/page.svelte.test.ts | 13 +++++++++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/docs/specs/geschichten-reader-journey-spec.html b/docs/specs/geschichten-reader-journey-spec.html
index c30857a7..93a5a384 100644
--- a/docs/specs/geschichten-reader-journey-spec.html
+++ b/docs/specs/geschichten-reader-journey-spec.html
@@ -640,7 +640,8 @@
           <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-10</td><td>zentriert, volle Breite auf Mobile</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 sheet</td><td>rounded-sm border border-line bg-surface shadow-sm px-5 py-6 sm:px-10 sm:py-10</td><td>Lesebogen-Panel auf dem Canvas (siehe Mockup); 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>
             <tr class="grp"><td colspan="3">Metazeile</td></tr>
diff --git a/docs/specs/lesereisen-reader-spec.html b/docs/specs/lesereisen-reader-spec.html
index ccde15b5..bbaa59cf 100644
--- a/docs/specs/lesereisen-reader-spec.html
+++ b/docs/specs/lesereisen-reader-spec.html
@@ -630,6 +630,7 @@
             <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-Sheet</td><td>rounded-sm border border-line bg-surface shadow-sm px-5 py-6 sm:px-10 sm:py-10</td><td>Lesebogen-Panel auf dem Canvas, 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-orange-50 text-orange-700 border border-orange-200 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>
             <tr><td>Metabar</td><td>flex items-center gap-3 pb-4 border-b border-subtle mb-4</td><td>gleich wie Story</td></tr>
diff --git a/frontend/src/routes/geschichten/[id]/+page.svelte b/frontend/src/routes/geschichten/[id]/+page.svelte
index 4152d19b..52eaabeb 100644
--- a/frontend/src/routes/geschichten/[id]/+page.svelte
+++ b/frontend/src/routes/geschichten/[id]/+page.svelte
@@ -53,7 +53,10 @@ async function handleDelete() {
 		<BackButton />
 	</div>
 
-	<article aria-labelledby="geschichte-title">
+	<article
+		aria-labelledby="geschichte-title"
+		class="rounded-sm border border-line bg-surface px-5 py-6 shadow-sm sm:px-10 sm:py-10"
+	>
 		<header class="mb-6">
 			{#if isJourney}
 				<span
diff --git a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts
index ac5d15d0..966b102e 100644
--- a/frontend/src/routes/geschichten/[id]/page.svelte.test.ts
+++ b/frontend/src/routes/geschichten/[id]/page.svelte.test.ts
@@ -70,6 +70,19 @@ describe('geschichten/[id] page', () => {
 			.toBeVisible();
 	});
 
+	it('renders the article on a reading-sheet surface card (#797)', async () => {
+		render(GeschichtePage, {
+			context: new Map([[CONFIRM_KEY, createConfirmService()]]),
+			props: { data: baseData() }
+		});
+
+		const article = document.querySelector('article');
+		expect(article).not.toBeNull();
+		for (const cls of ['bg-surface', 'border-line', 'rounded-sm', 'shadow-sm']) {
+			expect(article!.className).toContain(cls);
+		}
+	});
+
 	it('renders the author full name from firstName + lastName', async () => {
 		render(GeschichtePage, {
 			context: new Map([[CONFIRM_KEY, createConfirmService()]]),