From 57fff63516dda3e298a5766fa306589eff10479a Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Wed, 7 Oct 2026 20:44:13 +0200
Subject: [PATCH] =?UTF-8?q?Die=20=C3=9Cberschrift=20des=20Versatzes=20brac?=
 =?UTF-8?q?h=20um?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

„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 | 11 +++++++++--
 web/app/src/style.css  |  8 ++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

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