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>

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

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()]]),