Der Hintergrund wird erst weich, wenn etwas darüberläuft

Er war es immer: 28 Bildpunkte Weichzeichnung über die ganze Detailseite,
damit der Text darüber lesbar bleibt. Oben steht aber gar nichts darüber —
dort ist das Bild das Beste, was die Seite zu bieten hat, und es lag als
Farbschlieren da. Unscharf gehört es erst, wenn wirklich etwas darüber
hinwegläuft: die Folgen, die Besetzung, die Medienangaben.

Jetzt folgt die Weichzeichnung dem Bildlauf, über etwa siebzig Prozent
einer Bildschirmhöhe und quadratisch statt geradlinig — die ersten
Bildpunkte sollen nichts tun, sonst wäre „scharf, solange nichts
darüberliegt" nach einem Fingerbreit schon dahin. Gerundet auf ganze
Bildpunkte, weil jeder neue Wert eine bildschirmfüllende Fläche neu
zeichnen lässt; über die ganze Strecke sind das 28 Male. Gemessen über 58
Bilder beim Hinunterrollen: 8,3 ms im Mittel, kein Bild über 9,2 ms.

**Und die Deckung geht mit, das ist der unscheinbare Teil.** Eine
Weichzeichnung verrührt die hellen Stellen mit den dunklen; ein scharfes
Bild hat die weisse Stelle genau dort, wo die Zeile steht. Gemessen an der
dunklen Vorlage von „Dark": vorher 4,07∶1, scharf bei derselben Deckung
nur noch 2,44∶1. An einer hellen — Hubschrauber vor blauem Himmel —
vorher 2,75∶1. Mit 0,28 scharf und 0,45 weich stehen beide wieder bei rund
4,0∶1, die helle sogar besser als zuvor.

Der Zuhörer räumt sich selbst ab: die Detailseite wird nicht gemerkt, und
für ungemerkte Ansichten ruft `einhaengen` kein Abbruchsignal.

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

web/app/src/style.css

@@ -513,8 +513,25 @@ svg { width: 20px; height: 20px; display: block; flex: none; }
 .detail-hintergrund {
   position: fixed; inset: 0;
   z-index: -1;
+  pointer-events: none;
+}
+
+/* **Scharf, solange nichts darüberliegt.** Die Weichzeichnung steht nicht
+ * mehr fest hier, sondern wächst mit dem Bildlauf — gerechnet in
+ * `weichNachBildlauf()`. Ohne Skript bleibt sie bei 0; dann sieht man ein
+ * scharfes Bild, und das ist kein Fehler, sondern genau der Zustand, in dem
+ * die Seite aufgeht. */
+.detail-bild {
+  position: absolute; inset: 0;
   background-size: cover; background-position: center top;
-  opacity: .45; filter: blur(28px) saturate(1.1);
+  /* **Scharf etwas blasser als weich, und das ist gemessen.** Eine
+   * Weichzeichnung verrührt die hellen Stellen mit den dunklen; ein scharfes
+   * Bild hat die weisse Stelle genau dort, wo die Zeile steht. Bei „Dark"
+   * kam der kleinste Abstand der Eckdaten zum Hintergrund auf 4,07∶1, solange
+   * weichgezeichnet wurde — scharf bei derselben Deckung nur noch auf 2,44∶1.
+   * Bei 0,28 sind es wieder 4,02∶1: so lesbar wie vorher, nur eben scharf. */
+  opacity: var(--det-deckung, .28);
+  filter: blur(var(--det-weich, 0px)) saturate(1.1);
   /* Weiter hochgezogen als das Bild selbst: die Unschärfe würde sonst am
      Rand als harte Kante sichtbar. */
   transform: scale(1.1);