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>