Ein Viertel des Hintergrundbildes lag hinter der Seitenleiste

Es stand auf `inset: 0` und lag damit auch hinter Seiten- und Kopfleiste —
beide undurchsichtig. Bei 1280×800 gemessen: 18,8 % der Breite, 7 % der
Höhe, zusammen 24,4 % der Bildfläche, die niemand je zu sehen bekam.

Solange alles weichgezeichnet war, fiel das nicht auf; ein verwischter
Rand sieht wie jeder andere aus. Scharf beginnt der Inhalt mitten im
Motiv — bei den Bergrettern mit einem angeschnittenen Kopf direkt an der
Kante der Seitenleiste.

Jetzt sitzt das Bild in dem Feld, in dem es auch zu sehen ist, und wird
darin ganz zugeschnitten: links die Seitenleistenbreite, oben die
Kopfleistenhöhe. Der Kontrast bleibt, wo er war — 3,95∶1 scharf statt
3,97∶1, derselbe Zuschnitt in einem anderen Feld.

Am Telefon gibt es keine Seitenleiste; dort nimmt die Navigationszeile
oben noch einen Streifen weg, solange man ganz oben steht, und ist nach
dem ersten Bildlauf weg.

Die beiden älteren Begründungen über der Regel standen noch da und sagten
inzwischen das Gegenteil — die eine erklärte, warum das Bild über die
volle Breite gehört. Sie sind zu einer zusammengefasst, die den ganzen Weg
erzählt.

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

web/app/src/style.css

@@ -502,16 +502,24 @@ svg { width: 20px; height: 20px; display: block; flex: none; }
 
 .detail { position: relative; }
 
-/* **Der Hintergrund füllt die Seite, nicht nur einen Streifen.** Bei Plex
+/* **Der Hintergrund gibt der Seite die Farbe des Films** — wie bei Plex,
-   liegt er unscharf und abgedunkelt hinter allem und gibt der Seite die
+ * aber nur über dem Inhalt, nicht über dem ganzen Fenster.
-   Farbe des Films. */
-/* **Über die volle Breite, nicht erst hinter der Seitenleiste.**
  *
- * Vorher begann das Bild bei `left: 240px` und war mit `opacity: .28` und
+ * Er hat beide Ränder schon gehabt. Zuerst begann er bei `left: 240px`, war
- * `blur(2px)` weder Bild noch Fläche — ein grau verwischter Rest, der nichts
+ * dabei mit `opacity: .28` und `blur(2px)` aber weder Bild noch Fläche: ein
- * tat. Jetzt taucht es die Seite in die Farbe des Films, so wie bei Plex. */
+ * grau verwischter Rest, der nichts tat. Die Antwort darauf war `inset: 0`
+ * — über alles hinweg. Damit lag ein Viertel des Bildes hinter Seiten- und
+ * Kopfleiste, beide undurchsichtig; bei 1280×800 gemessen 18,8 % der Breite
+ * und 7 % der Höhe, zusammen 24,4 % der Fläche. Weichgezeichnet fiel das
+ * nicht auf. Scharf beginnt der Inhalt dann mitten im Motiv, mit einem
+ * angeschnittenen Kopf am linken Rand.
+ *
+ * Jetzt sitzt es in dem Feld, in dem es auch zu sehen ist, und wird darin
+ * ganz zugeschnitten. Dass es kräftig genug dasteht, macht die Deckung —
+ * siehe `.detail-bild` —, nicht die Fläche. */
 .detail-hintergrund {
-  position: fixed; inset: 0;
+  position: fixed;
+  top: var(--topbar-h); right: 0; bottom: 0; left: var(--sidebar-w);
   z-index: -1;
   pointer-events: none;
 }
@@ -977,6 +985,9 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
   .nav-gruppe { display: none; }
   .nav-fuss { margin: 0; padding: 0; display: flex; }
   #content { margin-left: 0; padding: var(--s-loose); }
+  /* Am Telefon gibt es keine Seitenleiste; die Navigation liegt als Zeile
+     im Fluss und nimmt oben einen Streifen weg, sobald man ganz oben steht.
+     Nach dem ersten Bildlauf ist sie weg und das Feld stimmt wieder. */
   .detail-hintergrund { left: 0; }
   .detail-kopf { flex-direction: column; gap: var(--s-loose); }
   .detail-kopf .plakat { width: 160px; }