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 ---------- */