Vom Aufmacher war vor allem Grau zu sehen

Zwei Beschwerden, zwei Ursachen.

**„Niedrig" war nicht niedrig.** Mit 62 vh war es mittel mit anderem
Namen; die Spanne reichte nur nach oben, weil die fünfte Stufe damals
oben gebraucht wurde. Darunter steht jetzt „Flach" mit 46 vh — für den,
der den Aufmacher als Kopfzeile will und nicht als halbe Seite.

**Der Verlauf fing auf halber Höhe schon mit 55 % Deckung an** und wurde
erst bei 85 % durchsichtig. Von einem starken Bild blieb dadurch vor
allem Grau übrig. Jetzt kurz und steil: unten dunkel genug, dass die
Schrift trägt, und die obere Hälfte frei. Der Text sitzt unten links —
genau dort muss es tragen, und darüber nicht.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/style.css

@@ -1433,6 +1433,13 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
   --hero-hoehe: min(72vh, 640px);
   --hero-hoehe-schmal: min(52vh, 420px);
 }
+/* **Die flachste Stufe.** „Niedrig" war mit 62 vh nicht niedrig, sondern
+   mittel mit anderem Namen — die Spanne reichte nur nach oben. Wer den
+   Aufmacher als Kopfzeile will und nicht als halbe Seite, braucht das hier. */
+html[data-aufmacher="flach"] {
+  --hero-hoehe: min(46vh, 420px);
+  --hero-hoehe-schmal: min(34vh, 280px);
+}
 html[data-aufmacher="niedrig"] {
   --hero-hoehe: min(62vh, 560px);
   --hero-hoehe-schmal: min(42vh, 340px);
@@ -1477,13 +1484,20 @@ html[data-aufmacher="voll"] {
 
 /* **Zwei Verläufe, nicht einer.** Der von unten lässt die erste Reihe sich
    darüberschieben; der von links sorgt dafür, dass der Text trägt, auch wenn
-   das Bild dort hell ist. */
+   das Bild dort hell ist.
+
+   **Kurz und steil, nicht lang und flach.** Hier stand 55 % Deckung auf
+   halber Höhe und durchsichtig erst bei 85 % — von einem starken Aufmacher
+   war dadurch vor allem Grau zu sehen. Der Text sitzt unten links; genau
+   dort muss es tragen, und darüber nicht. */
 .hero-buehne::after {
   content: '';
   position: absolute; inset: 0;
   background:
-    linear-gradient(to top, var(--canvas) 2%, rgba(11, 11, 13, .55) 45%, transparent 85%),
-    linear-gradient(to right, rgba(11, 11, 13, .88) 0%, rgba(11, 11, 13, .35) 45%, transparent 75%);
+    linear-gradient(to top, var(--canvas) 0%, rgba(11, 11, 13, .70) 16%,
+                            rgba(11, 11, 13, .25) 38%, transparent 62%),
+    linear-gradient(to right, rgba(11, 11, 13, .85) 0%, rgba(11, 11, 13, .30) 30%,
+                              transparent 55%);
 }
 
 .hero-inhalt {

web/app/src/views/einstellungen/darstellung.ts

@@ -39,6 +39,7 @@ export function darstellungsbereich(): HTMLElement {
     liste.innerHTML = '';
 
     const stufen = [
+      { wert: 'flach', text: 'Flach' },
       { wert: 'niedrig', text: 'Niedrig' },
       { wert: 'mittel', text: 'Mittel' },
       { wert: 'hoch', text: 'Hoch' },