diff --git a/web/app/src/spieler.ts b/web/app/src/spieler.ts
index 129dafb..2f83c8a 100644
--- a/web/app/src/spieler.ts
+++ b/web/app/src/spieler.ts
@@ -386,8 +386,15 @@ export function spieler(anfrage: Spieleranfrage): void {
   // Eintrag, und die standen zwischen den Sprachen wie weitere Sprachen.
   // Hier wird gezogen, und zwar erst beim Loslassen — jede Änderung baut den
   // Strom neu auf, und das tut man nicht zwanzigmal beim Hinschieben.
+  // Name links, Wert rechts — in einer Zeile. „TONVERSATZ — OHNE VERSATZ"
+  // am Stück brach in dem schmalen Menü um und sah nach zwei Dingen aus.
   const versatzkopf = document.createElement('div');
   versatzkopf.className = 'pl-fusstitel';
+  const versatzname = document.createElement('span');
+  versatzname.textContent = 'Tonversatz';
+  const versatzwert = document.createElement('span');
+  versatzwert.className = 'pl-fusswert';
+  versatzkopf.append(versatzname, versatzwert);
 
   const versatzregler = document.createElement('input');
   versatzregler.type = 'range';
@@ -400,7 +407,7 @@ export function spieler(anfrage: Spieleranfrage): void {
   const versatzzurueck = knopf('Zurücksetzen', 'pl-punkt');
 
   function versatzstand(): void {
-    versatzkopf.textContent = `Tonversatz — ${versatzWort(tonversatz)}`;
+    versatzwert.textContent = versatzWort(tonversatz);
     versatzregler.value = String(tonversatz);
     versatzregler.setAttribute('aria-valuetext', versatzWort(tonversatz));
     versatzzurueck.classList.toggle('hidden', tonversatz === 0);
@@ -415,7 +422,7 @@ export function spieler(anfrage: Spieleranfrage): void {
 
   // Beim Ziehen nur die Zahl mitlaufen lassen, beim Loslassen rechnen.
   versatzregler.oninput = () => {
-    versatzkopf.textContent = `Tonversatz — ${versatzWort(Number(versatzregler.value))}`;
+    versatzwert.textContent = versatzWort(Number(versatzregler.value));
   };
   versatzregler.onchange = () => versatzSetzen(Number(versatzregler.value));
   versatzregler.onclick = e => e.stopPropagation();
diff --git a/web/app/src/style.css b/web/app/src/style.css
index 2907cef..4ee80c2 100644
--- a/web/app/src/style.css
+++ b/web/app/src/style.css
@@ -908,9 +908,17 @@ textarea.feld {
   display: flex; flex-direction: column; gap: 6px;
 }
 .pl-fusstitel {
+  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-snug);
   font-size: 11px; font-weight: 600; letter-spacing: .04em;
   text-transform: uppercase; color: var(--text-muted);
 }
+/* Der eingestellte Wert, nicht die Überschrift — deshalb hell und ohne Versalien. */
+.pl-fusswert {
+  text-transform: none; letter-spacing: 0; font-weight: 500;
+  color: var(--text); white-space: nowrap;
+}
+/* Breit genug für „Ton 3 s früher" neben der Überschrift. */
+.pl-menue .pl-liste { min-width: 230px; }
 /* Breiter als der Lautstärkeregler — hier wird genau gezielt, nicht gewischt. */
 .pl-versatz { width: 100%; }
 /* Die Mitte markieren: ohne sie trifft man die Null nur durch Zufall. */