Breitbild sass oben statt mittig

Ein 21:9-Film war in der Breite richtig und in der Höhe nicht: der schwarze
Rand lag ganz unten statt gleichmässig oben und unten. Im Fenster fällt das
kaum auf, im Vollbild sofort.

Gemessen an einem 2560×1080-Film in einem 1024×768-Fenster:

    Hülle        768 hoch
    Videokasten  459 hoch, bei oben 0

Woran es lag: die Hülle ist ein Raster mit `place-items: center`. Damit
wird das Videoelement nicht gedehnt, und sein `height: 100%` löst sich
gegen eine Zeile auf, die ihre Höhe wiederum aus dem Element nimmt — die
Prozentangabe hatte nichts, woran sie sich halten konnte. Herausgekommen
ist ein Kasten, der weder die volle Höhe hatte noch mittig sass.

Jetzt liegt das Videoelement im grossen Spieler absolut über der ganzen
Hülle. `object-fit: contain` rechnet damit gegen den vollen Bildschirm und
legt den Rand von selbst zu gleichen Teilen oben und unten — in beiden
Richtungen, nicht nur in der einen, die vorher stimmte.

Nachher dieselbe Messung: Kasten 1024 × 768, oben 0.

Die kleine Leiste bleibt unberührt — sie positioniert dasselbe Element
ohnehin absolut und mit eigenen Massen; deshalb das `:not(.pl-klein)`.
Nachgemessen: 128 × 70, `object-fit: cover`, unverändert.

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

web/app/src/style.css

@@ -838,6 +838,26 @@ textarea.feld {
 }
 .pl-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
 
+/* **Das Bild füllt die Fläche, dann sitzt es auch mittig.**
+ *
+ * Gemessen an einem 21:9-Film auf einem 1024×768-Fenster: die Hülle war
+ * 768 hoch, der Videokasten 459 — und er klebte bei oben 0. Die Breite
+ * stimmte, die Höhe nicht, und der schwarze Rand lag ganz unten statt
+ * gleichmässig oben und unten. Im Fenster fällt das kaum auf, im Vollbild
+ * sofort.
+ *
+ * **Woran es lag.** Die Hülle ist ein Raster mit `place-items: center`.
+ * Damit wird das Videoelement nicht gedehnt, und sein `height: 100%` löst
+ * sich gegen eine Zeile auf, die ihre Höhe wiederum aus dem Element nimmt —
+ * die Prozentangabe hatte nichts, woran sie sich halten konnte.
+ *
+ * Absolut über die ganze Hülle nimmt die Frage weg: `object-fit: contain`
+ * rechnet dann gegen den vollen Bildschirm und legt den schwarzen Rand von
+ * selbst zu gleichen Teilen oben und unten. Die kleine Leiste positioniert
+ * dasselbe Element ohnehin absolut und bleibt unberührt — deshalb das
+ * `:not(.pl-klein)`. */
+.pl:not(.pl-klein) .pl-video { position: absolute; inset: 0; }
+
 .pl-dreher { position: absolute; margin: 0; }
 
 /* Kopf und Leiste blenden sich weg, während etwas läuft. */