Die Überschrift des Versatzes brach um

„TONVERSATZ — OHNE VERSATZ" am Stück passte nicht in das schmale Menü und
stand auf zwei Zeilen — und sah damit nach zwei Dingen aus. Jetzt steht
der Name links und der eingestellte Wert rechts in derselben Zeile, der
Wert hell und ohne Versalien, damit man sieht, welches davon die
Einstellung ist. Die Liste ist dafür 230 statt 180 Bildpunkte breit —
„Ton 3 s früher" muss daneben passen.

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

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();

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