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.

server/mess-reaktion.mjs

@@ -2472,6 +2472,37 @@ await zuschauer.kontext.close();
     console.log(`   Handy offen: Saal ${platzHandy.saal} = Leiste ${platzHandy.leiste} `
       + `+ Kino ${platzHandy.kino} + Regie ${platzHandy.pult}`);
     console.log(`   Handy Zeilen: ${platzHandy.alle}`);
+    /* UEBERLAPPEN SICH DIE KNOEPFE DER LEISTE?
+       `pruef-handy` fragt nur, ob die MITTE eines Knopfes frei ist
+       -- zwei Knoepfe koennen sich an den Raendern ueberlagern und
+       trotzdem beide „erreichbar" sein. Auf dem Bildschirmfoto
+       sieht das aus wie ein Fehler, und wer danebentippt, trifft
+       den falschen. */
+    const gedraengt = await chef.seite.evaluate(() => {
+      const knoepfe = [...document.querySelectorAll(".transport button, .transport input")]
+        .map((e) => ({ e, r: e.getBoundingClientRect() }))
+        .filter((x) => x.r.width > 0 && x.r.height > 0);
+      const raus = [];
+      for (let i = 0; i < knoepfe.length; i++) {
+        for (let j = i + 1; j < knoepfe.length; j++) {
+          const a = knoepfe[i].r, b = knoepfe[j].r;
+          const ueber = Math.min(a.right, b.right) - Math.max(a.left, b.left);
+          const hoch = Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top);
+          if (ueber > 1 && hoch > 1) {
+            const n = (x) => x.e.id || x.e.className.split(" ")[0] || x.e.tagName;
+            raus.push(`${n(knoepfe[i])} / ${n(knoepfe[j])} (${Math.round(ueber)}x${Math.round(hoch)} px)`);
+          }
+        }
+      }
+      return raus;
+    });
+    if (gedraengt.length) {
+      console.log(`   ACHTUNG: ${gedraengt.length} Knopfpaar(e) in der Leiste `
+        + `ueberlappen sich: ${gedraengt.slice(0, 4).join(", ")}`);
+      ausgang = 1;
+    } else {
+      console.log("   Kein Knopf der Transportleiste liegt ueber einem anderen.");
+    }
     const spur = await chef.seite.evaluate(() => {
       const saal = document.getElementById("saal");
       const r = saal.getBoundingClientRect();