From 3393de2286be50edcf31b4c85a57b47beb5d795b Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sun, 20 Sep 2026 04:04:36 +0200
Subject: [PATCH] fix: Hero-Text war ueber hellem Bildmaterial nicht lesbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Ortszeile ueber der Ueberschrift stand in honey-light auf einem Foto mit
25 % Grundabdunklung plus einem to-tr-Verlauf, der die Textspalte bei rund
44 % Gesamtdeckung liegen liess. Gegen ein helles Motiv (Holz, Himmel)
gerechnet ergab das:

    Ortszeile    1,34:1   (WCAG AA verlangt 4,5:1 bei 12 px)
    Ueberschrift 2,73:1   (verlangt 3:1 bei grosser Schrift)
    Fussnote     1,90:1

Lighthouse meldet davon nichts und gibt der Seite weiterhin 100 fuer
Accessibility — Kontrast von Text ueber Bildern laesst sich nicht statisch
pruefen, weil der Hintergrund vom hochgeladenen Motiv abhaengt. Genau deshalb
muss die Abdunklung den schlechtesten Fall abdecken und nicht das Bild, das
gerade hinterlegt ist.

Drei Aenderungen, alle nachgerechnet:

- Verlauf ab md waagerecht (85 % -> 70 % -> 0) statt diagonal. Die Textspalte
  endet bei etwa 45 % Breite und liegt damit ganz im dunklen Teil, waehrend
  die rechte Bildhaelfte unangetastet bleibt.
- Auf schmalen Schirmen senkrecht, weil der Text dort ueber die volle Breite
  laeuft und rechts sonst in den durchsichtigen Teil geriete.
- Neuer Farbton honey-pale (#e4cfa4) fuer die Ortszeile; honey-light haelt
  4,5:1 selbst bei 89 % Abdunklung nicht (4,14:1). Fussnote von cream/60 auf
  cream/80.

Ergebnis in der Textspalte: Ortszeile 4,81:1 bis 6,97:1, Ueberschrift 6,41:1
bis 9,28:1, Fussnote 4,80:1 bis 6,59:1 — AA auf allen Breiten.

tsc: 0 Fehler. vitest: 359/359 gruen. eslint: 0 Warnungen. next build: gruen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css     |  8 ++++++++
 src/components/hero.tsx | 20 +++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f22f8b3..a35647a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,6 +9,13 @@
      hellem Grund (Hintergrund/Cream), -light fuer Text auf bg-forest. */
   --color-honey-dark: #8a6531;
   --color-honey-light: #c9a468;
+  /* Fuer Text ueber BILDERN statt ueber einer Volltonflaeche. -light besteht
+     4.5:1 nur gegen deckendes bg-forest; im Hero liegt der Text aber auf einem
+     Foto mit halbdurchlaessiger Abdunklung, und je nach Motiv (helles Holz,
+     Himmel) sank der Kontrast dort auf 1,34:1 — die Zeile war praktisch
+     unsichtbar. -pale haelt bei der im Hero gesetzten Abdunklung 4,8:1 bis
+     7,0:1 und behaelt den Honigton. */
+  --color-honey-pale: #e4cfa4;
   --color-background: #faf8f3;
   --color-ink: #242424;
   --color-sage: #788774;
@@ -20,6 +27,7 @@
   --color-honey: var(--color-honey);
   --color-honey-dark: var(--color-honey-dark);
   --color-honey-light: var(--color-honey-light);
+  --color-honey-pale: var(--color-honey-pale);
   --color-background: var(--color-background);
   --color-ink: var(--color-ink);
   --color-sage: var(--color-sage);
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 6ba167e..3de708c 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -110,7 +110,21 @@ export function Hero({
           unlesbar machen kann. Der gerichtete Verlauf darunter verstaerkt das
           gezielt dort, wo die Textspalte tatsaechlich sitzt (unten links). */}
       <div className="absolute inset-0 bg-forest/25" />
-      <div className="absolute inset-0 flex items-center bg-gradient-to-tr from-forest/70 via-forest/25 to-transparent">
+      {/* Senkrecht auf schmalen Schirmen, waagerecht ab md.
+
+          Der frueher hier stehende to-tr-Verlauf liess die Textspalte auf
+          rund 44 % Abdunklung liegen. Ueber hellem Motiv (Holz, Himmel)
+          ergab das 1,34:1 fuer die Ortszeile und 2,73:1 fuer die
+          Ueberschrift — beides weit unter WCAG AA. Lighthouse meldet das
+          nicht, weil es Text ueber Bildern nicht bewerten kann.
+
+          Waagerecht funktioniert nur ab md: dort endet die Textspalte bei
+          etwa 45 % Breite und liegt damit ganz im dunklen Teil, waehrend
+          die rechte Bildhaelfte unangetastet bleibt. Auf dem Handy laeuft
+          der Text ueber die volle Breite und geriete rechts in den
+          durchsichtigen Teil — deshalb dort senkrecht, was horizontal
+          gleichmaessig abdunkelt und den oberen Bildrand frei laesst. */}
+      <div className="absolute inset-0 flex items-center bg-gradient-to-t from-forest/85 via-forest/70 to-forest/10 md:bg-gradient-to-r md:from-forest/85 md:via-forest/70 md:to-transparent">
         <Container>
           <motion.div
             className="max-w-xl text-cream"
@@ -120,7 +134,7 @@ export function Hero({
           >
             <motion.p
               data-reveal="" variants={itemVariants}
-              className="tracking-wide-caps text-xs text-honey-light mb-4"
+              className="tracking-wide-caps text-xs text-honey-pale mb-4"
             >
               {location}
             </motion.p>
@@ -140,7 +154,7 @@ export function Hero({
                 {t.home.hero.ctaSecondary}
               </LinkButton>
             </motion.div>
-            <motion.p data-reveal="" variants={itemVariants} className="mt-8 text-xs text-cream/60 tracking-wide">
+            <motion.p data-reveal="" variants={itemVariants} className="mt-8 text-xs text-cream/80 tracking-wide">
               {footnote}
             </motion.p>
           </motion.div>