From 74b13abf53ce6d2b0733eac2efec09ccff34ab09 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 2 May 2026 18:46:31 +0200
Subject: [PATCH] fix(geschichten): widen story body and lift section-header
 contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Story-detail body now uses an explicit Tailwind block-element selector
ruleset instead of the `prose` plugin, so the body fills the full max-w-3xl
parent width — previously `prose` clamped to ~65ch inside an already narrow
page.

GeschichtenCard heading and the "+ Geschichte schreiben" link now use
text-ink-2 (#4b5563 = 7.6:1 on white, AAA-passable) instead of text-ink-3
or text-ink/60. Same fix on the "+ Geschichte anhängen" link in the
Document drawer column and on the Personen / Dokumente section headers
on the story detail page.

Closes Leonie's review B1, B2 and S4 on PR #382.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/DocumentMetadataDrawer.svelte    |  2 +-
 .../src/lib/components/GeschichtenCard.svelte   |  4 ++--
 .../src/routes/geschichten/[id]/+page.svelte    | 17 +++++++++++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/DocumentMetadataDrawer.svelte b/frontend/src/lib/components/DocumentMetadataDrawer.svelte
index e30f87c8..3baf2b79 100644
--- a/frontend/src/lib/components/DocumentMetadataDrawer.svelte
+++ b/frontend/src/lib/components/DocumentMetadataDrawer.svelte
@@ -199,7 +199,7 @@ function getFullName(person: Person): string {
 					{#if canBlogWrite && documentId}
 						<a
 							href="/geschichten/new?documentId={documentId}"
-							class="font-sans text-xs font-medium text-ink/60 hover:text-ink"
+							class="font-sans text-xs font-medium text-ink-2 hover:text-ink"
 						>
 							{m.geschichten_card_attach_action()}
 						</a>
diff --git a/frontend/src/lib/components/GeschichtenCard.svelte b/frontend/src/lib/components/GeschichtenCard.svelte
index a8e7a0b1..b97d1142 100644
--- a/frontend/src/lib/components/GeschichtenCard.svelte
+++ b/frontend/src/lib/components/GeschichtenCard.svelte
@@ -39,14 +39,14 @@ function authorName(g: Geschichte): string {
 		<header class="mb-5 flex items-center justify-between">
 			<h2
 				id="geschichten-card-heading"
-				class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
+				class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 			>
 				{m.geschichten_card_heading()}
 			</h2>
 			{#if canWrite}
 				<a
 					href="/geschichten/new?personId={personId}"
-					class="inline-flex items-center font-sans text-sm font-medium text-ink/60 hover:text-ink"
+					class="inline-flex items-center font-sans text-sm font-medium text-ink-2 hover:text-ink"
 				>
 					{m.geschichten_card_write_action()}
 				</a>
diff --git a/frontend/src/routes/geschichten/[id]/+page.svelte b/frontend/src/routes/geschichten/[id]/+page.svelte
index e96af176..f7ba5541 100644
--- a/frontend/src/routes/geschichten/[id]/+page.svelte
+++ b/frontend/src/routes/geschichten/[id]/+page.svelte
@@ -58,8 +58,17 @@ async function handleDelete() {
 			</p>
 		</header>
 
-		<div class="prose font-serif text-lg leading-relaxed text-ink">
-			<!-- Sanitised via safeHtml() (DOMPurify) on render — matches backend OWASP allow-list -->
+		<!--
+			Body styles are explicit (no `prose`) so the text uses the full max-w-3xl
+			parent width — Tailwind Typography's default `max-w-prose` clamps to ~65ch
+			and produces a much narrower column inside an already narrow page, which
+			Leonie flagged as unreadable for the senior-author persona.
+
+			Sanitised via safeHtml() (DOMPurify) on render — matches backend OWASP allow-list.
+		-->
+		<div
+			class="font-serif text-lg leading-relaxed text-ink [&_h2]:mt-8 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mt-6 [&_h3]:mb-2 [&_h3]:text-xl [&_h3]:font-bold [&_li]:mb-1 [&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-4 [&_ul]:mb-4 [&_ul]:list-disc [&_ul]:pl-6"
+		>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 			{@html sanitized}
 		</div>
@@ -68,7 +77,7 @@ async function handleDelete() {
 	<!-- 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">
+			<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase">
 				{m.geschichten_persons_section()}
 			</h2>
 			<ul class="flex flex-wrap gap-2">
@@ -89,7 +98,7 @@ async function handleDelete() {
 	<!-- 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">
+			<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase">
 				{m.geschichten_documents_section()}
 			</h2>
 			<ul class="flex flex-col gap-2">