Die Transportleiste steht am Handy in einer Reihe

Auf dem Bildschirmfoto nach dem Umbau lagen der runde Play-Knopf und
seine Nachbarn uebereinander. `pruef-handy` meldete das nicht: Sie
fragt, ob die MITTE eines Knopfes frei ist -- zwei Knoepfe koennen
sich an den Raendern ueberlagern und beide „erreichbar" sein. Wer
danebentippt, trifft trotzdem den falschen.

GEMESSEN (neue Stelle in mess-reaktion, die jedes Knopfpaar der
Leiste auf Ueberschneidung prueft):

    tempo-auf / v-spiel   21 x 44 px
    v-spiel / v-tauschen  21 x 38 px

URSACHE: `grid-template-columns: auto 1fr auto`. Tempo links und
„Wechseln zu <Videotitel>" rechts nahmen so viel, dass die mittlere
Spalte schmaler wurde als der 58 Pixel breite Play-Knopf -- und ein
zentrierter Inhalt, der breiter ist als seine Spalte, ragt ueber
BEIDE Raender.

Jetzt `minmax(0, auto) max-content minmax(0, auto)`: Die Mitte ist
so breit wie ihre drei Knoepfe zusammen und schrumpft nie, die
Seiten geben nach. `min-content` war dabei die falsche Zwischenstufe
-- damit war die Spalte so breit wie ihr BREITESTER Knopf, und
„−10" und „+10" brachen darunter um.

GEPRUEFT: pruef-handy, -tippziele, -css-klassen, -reaktion und
mess-quer alle EXIT 0; mess-reaktion meldet „Kein Knopf der
Transportleiste liegt ueber einem anderen" und 133 Pixel sichtbares
Bild.

workspace/assets/css/reaktion.css

@@ -3149,7 +3149,24 @@ body[data-nur="buehne"] { background: #000; }
         ihren eigenen Wert klappte -- vorher brauchte sie allein
         zwei Zeilen. */
   .transport__reihe {
-    grid-template-columns: auto 1fr auto;
+    /* DIE MITTE SCHRUMPFT NIE, DIE SEITEN SCHON.
+       Mit `auto 1fr auto` nahmen Tempo und „Wechseln zu <Titel>"
+       so viel, dass die mittlere Spalte schmaler wurde als der
+       runde Play-Knopf -- er ragte gemessen 21 Pixel ueber beide
+       Nachbarn. Auf dem Bildschirmfoto sieht das aus wie ein
+       Fehler, und wer danebentippt, trifft den falschen Knopf.
+
+       `min-content` in der Mitte heisst: so breit wie noetig, nie
+       weniger. `minmax(0, auto)` aussen heisst: nehmt euch, was
+       uebrig ist, und gebt nach, wenn es eng wird. */
+    /* `max-content` UND NICHT `min-content`: Mit dem Minimum war
+       die Spalte so breit wie ihr BREITESTER Knopf (der runde
+       Play-Knopf), und „−10" und „+10" brachen darunter um --
+       drei Knoepfe in drei Zeilen. Mit dem Maximum bleiben sie
+       nebeneinander, so wie man sie im Live sucht. Die beiden
+       Seiten geben dafuer nach; der Videotitel im Umschalter
+       kuerzt sich ohnehin. */
+    grid-template-columns: minmax(0, auto) max-content minmax(0, auto);
     justify-items: stretch;
     gap: 8px;
   }