User-Vorgabe. Der Knopf sass seit v=210 NEBEN dem Feld; jetzt sitzt er DRIN.
Umsetzung: der Wert und der Knopf liegen in einer gemeinsamen Flex-Zeile
(`.px-zeile`, space-between), damit der Knopf rechtsbuendig steht und die
Feldhoehe nicht springt.
⚠ `.px span` setzt 1,1111rem - eine Zeile, die das erbt, wuerde den
Knopf-Text mitskalieren. Deshalb bekommt `#balance` seine Groesse explizit und
`.cb-dot` im Balance-Feld eine eigene (1,7222rem statt 2,0556rem, damit die
Box nicht hoeher wird als ihre Nachbarn).
⚠ Farb-Logik unveraendert und weiterhin die Vorgabe des Nutzers: GRUEN =
inaktiv (aus), ROT = aktiv (scharf) - bewusst nicht die uebliche
"gruen = geschuetzt"-Lesart. Der Grund steht im Markup UND im JS, damit es
niemand spaeter "korrigiert".
Struktur am ausgelieferten HTML geprueft: Knopf liegt im Balance-Feld, Wert vor
Knopf, 0 doppelte IDs, span-Balance 58/58.
⚠ Die div-Differenz von 1 ist VORBESTEHEND (ein `<div` in einem Kommentar) -
gegen HEAD verglichen, nicht angenommen: ohne Kommentare 90/90.
Pipeline A-G gruen, 97 Tests, 14 render*-Funktionen, deployt.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
