diff --git a/web/app/src/spieler.ts b/web/app/src/spieler.ts
index 241ef5a..0ca6932 100644
--- a/web/app/src/spieler.ts
+++ b/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 ---------- */
 
diff --git a/web/app/src/style.css b/web/app/src/style.css
index 0f5ad20..7bf55ce 100644
--- a/web/app/src/style.css
+++ b/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. */