CB-Knopf ins Balance-Feld, rechts neben den Wert (v=211)

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>
This commit is contained in:
Axel Hocks
2026-08-21 10:50:35 +02:00
co-authored by Claude Opus 5
parent 0dd2e524b7
commit 75e783e882
3 changed files with 17 additions and 10 deletions
+7
View File
@@ -770,5 +770,12 @@ main{padding-bottom:4.1111rem} /* Platz für die fixe Leiste */
background:var(--surface-2); color:var(--dim); transition:filter .15s;
}
.cb-dot:active{filter:brightness(1.3)}
/* ⚠ Der Knopf sitzt IM Balance-Feld neben dem Wert (User 2026-08-21).
`.px span` setzt 1,1111rem — die Zeile darf das nicht erben, sonst wird
der Knopf-Text mitskaliert. Deshalb eigene Groesse auf `.cb-dot`. */
.px .px-zeile{display:flex; align-items:center; justify-content:space-between;
gap:0.4444rem; font-size:inherit}
.px .px-zeile > #balance{font-size:1.1111rem; font-weight:600}
.px-cb .cb-dot{width:1.7222rem; height:1.7222rem; font-size:0.6111rem}
.cb-dot.inaktiv{background:#0d2a16; border-color:#1a4731; color:#3fb950}
.cb-dot.aktiv{background:#2d0d0d; border-color:#5c1a1a; color:#f85149}