Zwei Angaben über dieselbe Sache, so weit auseinander wie möglich

Die verstrichene Zeit stand hinter dem Lautstärkeregler, die verbleibende
ganz rechts hinter den Menüs. „1:48:20" direkt neben einem Schieber für
Lautstärke liest sich wie dessen Beschriftung — und die zweite Zahl, die
dazugehört, war einen halben Bildschirm entfernt.

Beide stehen jetzt links und rechts von dem Balken, über den sie Auskunft
geben. Schmal weicht die verbleibende Zeit; dort ist der Balken wichtiger
als die zweite Zahl.

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

web/app/src/spieler.ts

@@ -560,17 +560,28 @@ export function spieler(anfrage: Spieleranfrage): void {
 
   const links = document.createElement('div');
   links.className = 'pl-gruppe';
-  links.append(abspielknopf, tonknopf, lautstaerke, stand);
+  links.append(abspielknopf, tonknopf, lautstaerke);
 
   const rechts = document.createElement('div');
   rechts.className = 'pl-gruppe';
-  rechts.append(rest, tonmenue.knopf, textmenue.knopf, stufenmenue.knopf, vollbild);
+  rechts.append(tonmenue.knopf, textmenue.knopf, stufenmenue.knopf, vollbild);
 
   const unten = document.createElement('div');
   unten.className = 'pl-unten';
   unten.append(links, rechts);
 
-  bedienung.append(zeitleiste, unten);
+  // **Die Zeitangaben gehören an die Zeitleiste, nicht zwischen die Knöpfe.**
+  //
+  // Die verstrichene Zeit stand hinter dem Lautstärkeregler und die
+  // verbleibende ganz rechts hinter den Menüs — zwei Angaben über dieselbe
+  // Sache, so weit auseinander wie möglich, und beide neben etwas, mit dem
+  // sie nichts zu tun haben. Jetzt stehen sie links und rechts von dem
+  // Balken, über den sie Auskunft geben.
+  const zeitreihe = document.createElement('div');
+  zeitreihe.className = 'pl-zeitreihe';
+  zeitreihe.append(stand, zeitleiste, rest);
+
+  bedienung.append(zeitreihe, unten);
 
   /* ---------- Verhalten ---------- */
 

web/app/src/style.css

@@ -932,6 +932,19 @@ textarea.feld {
 .pl-stand, .pl-rest {
   font-size: 13px; color: rgba(255, 255, 255, .88);
   font-variant-numeric: tabular-nums; white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+/* **Die Zeitangaben links und rechts vom Balken.**
+ *
+ * Vorher stand die verstrichene Zeit hinter dem Lautstärkeregler und die
+ * verbleibende hinter den Menüs: zwei Angaben über dieselbe Sache, so weit
+ * auseinander wie möglich. */
+.pl-zeitreihe { display: flex; align-items: center; gap: 10px; }
+
+/* Schmal ist der Balken wichtiger als die zweite Zahl. */
+@media (max-width: 520px) {
+  .pl-zeitreihe .pl-rest { display: none; }
 }
 
 /* Zeit- und Lautstärkeregler: dieselbe Form, verschiedene Breite. */