Zwei Dinge in derselben Ecke, und ein Modus, den niemand bestellt hat

Der Gesehen-Haken und die drei Punkte sassen beide oben rechts — auf dem
Plakat sah das aus wie ein Fehler. Jetzt hat jede Ecke eine Aufgabe: oben
links die Auswahl, oben rechts der Stand, unten links Abspielen, unten rechts
das Menü.

Der Knopf „Auswählen" ist weg. Gemessen, warum er stören musste: der längere
Text „Auswahl beenden" brach die Filterzeile um und schob das Raster um
zwanzig Bildpunkte nach unten. Und grundsätzlicher ist ein Modus ein Zustand,
den man kennen muss, bevor man etwas tun kann. Jetzt trägt jede Kachel oben
links ein Kästchen, das beim Überfahren erscheint — wie die drei Punkte auch.
Der erste Haken fängt die Auswahl an, der letzte beendet sie.

Der Spieler lässt sich verkleinern. Er rutscht in eine Leiste am unteren Rand
und läuft weiter, während man die Mediathek aufräumt; ein Klick darauf holt
ihn zurück. Dasselbe Videoelement, nur anders eingerahmt — ein zweiter
Spieler unten hiesse, das Video auszuhängen, und dabei hört es auf zu
spielen.

Das Zahnrad mit acht Strahlen sah aus wie eine Sonne. Jetzt: Wellenform für
den Ton, CC-Kasten für die Untertitel, Schieberegler für die Qualität. Alle
drei Menüs stehen immer da — vorher verschwanden sie bei nur einer Tonspur
oder ohne Untertitel, und wer sie suchte, fand nichts und wusste nicht warum.

Dabei gefunden und behoben: die Wiedergabe blieb nach zwanzig Sekunden
stehen, obwohl längst der ganze Rest auf der Platte lag. Results.File setzte
Last-Modified, der Browser legte die Playlist mit zwei Einträgen ab, und
hls.js bekam bei jedem Nachfragen dieselben zwei zurück. Eine wachsende Liste
ist das Gegenteil von zwischenspeicherbar.

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

web/app/src/style.css

@@ -842,9 +842,79 @@ h2 { font-size: var(--t-abschnitt); font-weight: 700; letter-spacing: -.015em; m
   text-align: center; line-height: 1.5; font-size: 15px;
 }
 
-/* Hinter dem Spieler soll nichts scrollen. */
+/* Hinter dem Spieler soll nichts scrollen — aber nur im ganzen Bild. */
 body.pl-offen { overflow: hidden; }
 
+/* ---------- Die kleine Fassung ----------
+ *
+ * **Wie bei Plex und YouTube: der Film rutscht nach unten, statt zu enden.**
+ * Wer nebenbei Plakate geraderückt oder etwas sucht, soll ihn nicht verlieren.
+ *
+ * Es ist dieselbe Hülle und dasselbe Videoelement — nur anders eingerahmt.
+ * Ein zweiter Spieler unten hiesse, das Video aus dem Dokument zu nehmen und
+ * woanders wieder einzuhängen; dabei hört es auf zu spielen und puffert neu.
+ */
+.pl.pl-klein {
+  inset: auto 0 0 0;
+  height: 72px;
+  /* **`place-items` muss ausdrücklich zurück.** Im ganzen Bild zentriert die
+     Hülle ihre Kinder; in der Leiste zog das die Beschriftung in die Mitte,
+     weit weg vom Vorschaubild, an dem sie hängt. */
+  display: block;
+  place-items: normal;
+  background: var(--chrome);
+  border-top: 1px solid var(--line);
+  box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.pl.pl-klein .pl-video {
+  position: absolute; left: 0; top: 1px;
+  width: 128px; height: 71px;
+  object-fit: cover; cursor: pointer;
+}
+.pl.pl-klein .pl-kopf,
+.pl.pl-klein .pl-leiste,
+.pl.pl-klein .pl-dreher,
+.pl.pl-klein .pl-meldung { display: none; }
+.pl-kleinleiste { display: none; }
+.pl.pl-klein .pl-kleinleiste {
+  display: flex; align-items: center; gap: var(--s-snug);
+  width: 100%; height: 100%; padding: 0 var(--s-regular) 0 140px;
+  cursor: pointer;
+}
+
+.pl-kleintext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.pl-kleintitel {
+  font-size: 14px; font-weight: 600; color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pl-kleinstand {
+  font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums;
+}
+
+/* Der Fortschritt als dünner Strich ganz oben auf der Leiste. */
+.pl-kleinbalken {
+  position: absolute; left: 0; right: 0; top: 0; height: 2px;
+  background: rgba(255, 255, 255, .14);
+}
+.pl-kleinbalken div { height: 100%; background: var(--accent); transition: width .25s linear; }
+
+/* **Platz für die Leiste.** Ohne das läge die letzte Kachelreihe darunter,
+   und niemand käme an den letzten Film. */
+body.pl-leiste-da #content { padding-bottom: 88px; }
+body:has(.pl.pl-klein) .hinweise { bottom: 92px; }
+body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
+
+@media (max-width: 640px) {
+  .pl.pl-klein .pl-video { width: 96px; height: 71px; }
+  .pl.pl-klein .pl-kleinleiste { padding-left: 106px; }
+  .pl-kleinstand { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pl-kleinbalken div { transition: none; }
+}
+
 @media (max-width: 640px) {
   .pl-laut { display: none; }
   .pl-rest { display: none; }
@@ -1298,8 +1368,14 @@ input[type="datetime-local"].feld::-webkit-calendar-picker-indicator:hover {
  *
  * Rechtsklick findet nur, wer ihn vermutet, und auf dem Telefon gibt es ihn
  * gar nicht. Beim Überfahren und bei Tastaturfokus erscheinen drei Punkte. */
+/* **Unten rechts, nicht oben rechts.**
+ *
+ * Oben rechts sitzt der Gesehen-Haken, und beide übereinander waren genau das,
+ * was auf dem Plakat wie ein Fehler aussah. Jetzt hat jede Ecke eine Aufgabe:
+ * oben links die Auswahl, oben rechts der Stand, unten links Abspielen, unten
+ * rechts das Menü. */
 .kachel-mehr {
-  position: absolute; right: 6px; top: 6px; z-index: 4;
+  position: absolute; right: 6px; bottom: 6px; z-index: 4;
   display: grid; place-items: center;
   width: 28px; height: 28px; border-radius: 50%;
   background: rgba(10, 10, 12, .78);
@@ -1353,31 +1429,48 @@ input[type="datetime-local"].feld::-webkit-calendar-picker-indicator:hover {
 
 /* ---------- Mehrfachauswahl in der Mediathek ----------
  *
- * **Die Marke sitzt oben links**, gegenüber von Haken und Folgenzahl. Beide
- * in dieselbe Ecke zu legen hiesse, dass die Auswahl verdeckt, was man
- * auswählt. */
+ * **Oben links, gegenüber vom Gesehen-Haken.** Jede Ecke des Plakats hat eine
+ * Aufgabe: oben links die Auswahl, oben rechts der Stand, unten links
+ * Abspielen, unten rechts das Menü. Zwei Dinge in derselben Ecke sahen auf
+ * dem Plakat wie ein Fehler aus.
+ *
+ * **Kein Modus, den man erst einschaltet.** Das Kästchen erscheint beim
+ * Überfahren — so wie die drei Punkte. Wer nichts damit zu tun hat, sieht es
+ * nie; wer etwas auswählen will, findet es dort, wo er ohnehin hinsieht. */
 .wahlmarke {
-  position: absolute; top: 8px; left: 8px; z-index: 4;
+  position: absolute; top: 8px; left: 8px; z-index: 5;
   width: 26px; height: 26px; border-radius: 50%;
   display: grid; place-items: center;
   background: rgba(10, 10, 12, .62);
   border: 2px solid rgba(255, 255, 255, .72);
   backdrop-filter: blur(4px);
-  transition: background .15s ease-out, border-color .15s ease-out;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity .15s ease, background .15s ease-out, border-color .15s ease-out;
 }
 .wahlmarke svg { width: 15px; height: 15px; color: #fff; opacity: 0; transition: opacity .15s; }
 
+/* Beim Überfahren, bei Tastaturfokus — und durchgehend, solange überhaupt
+   etwas gewählt ist. Sonst müsste man für jede weitere Kachel erst wieder
+   das richtige Eck treffen. */
+.kachel:hover .wahlmarke,
+.kachel:focus-within .wahlmarke,
+.raster.waehlt .wahlmarke,
+.kachel.gewaehlt .wahlmarke { opacity: 1; }
+.wahlmarke:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
 .kachel.gewaehlt .wahlmarke {
   background: var(--accent); border-color: var(--accent);
 }
 .kachel.gewaehlt .wahlmarke svg { opacity: 1; }
 
-/* **Im Auswahlmodus kein Abspielknopf und kein Griff.** Beide führten
-   woandershin, und ein Klick darauf wählt jetzt nur noch aus. */
-.raster.auswahl .schweber,
-.raster.auswahl .kachel-mehr { display: none; }
-.raster.auswahl .kachel { cursor: pointer; }
-.raster.auswahl .kachel:hover .plakat { transform: scale(1.02); }
+/* **Solange etwas gewählt ist, führt kein Klick mehr woandershin.** Der
+   Abspielknopf und der Griff blieben sonst stehen und täten etwas anderes als
+   das, was der Klick daneben tut. */
+.raster.waehlt .schweber,
+.raster.waehlt .kachel-mehr { display: none; }
+.raster.waehlt .kachel { cursor: pointer; }
+.raster.waehlt .kachel:hover .plakat { transform: scale(1.02); }
 
 /* Das Gewählte deutlich abheben — Rahmen und leichtes Abdunkeln, damit es
    auch ohne Farbwahrnehmung zu erkennen ist. */
@@ -1417,3 +1510,13 @@ body:has(.auswahlleiste:not(.hidden)) .hinweise { bottom: 104px; }
 @media (max-width: 640px) {
   body:has(.auswahlleiste:not(.hidden)) .hinweise { bottom: 148px; }
 }
+
+/* Die Leiste kommt mit dem ersten Haken — ohne Sprung. */
+.auswahlleiste:not(.hidden) { animation: leiste-auf .18s ease-out; }
+@keyframes leiste-auf { from { opacity: 0; transform: translate(-50%, 8px); } }
+@media (max-width: 640px) {
+  @keyframes leiste-auf { from { opacity: 0; transform: translateY(8px); } }
+}
+@media (prefers-reduced-motion: reduce) {
+  .auswahlleiste:not(.hidden) { animation: none; }
+}