From df5bfec331a72d2058351be8807bdb6a066c79a7 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Thu, 20 Aug 2026 14:10:56 +0200
Subject: [PATCH] fix: Ankreuzfelder zentral von der Textfeld-Regel ausnehmen

In der Passwortrichtlinie stand das Haekchen mittig und der Text ganz rechts.
Ursache war die globale Regel "input, select { width: 100% }": sie erwischt
auch Ankreuzfelder und zieht sie ueber die volle Breite. Vier Stellen im
Code umgingen das bereits einzeln (.checklist, .dt-pop-opt, .checkline,
.datatable td) - eine fuenfte Umgehung waere die falsche Antwort gewesen.

Ankreuz- und Auswahlfelder sind jetzt zentral ausgenommen, die vier
Einzelfaelle entfallen. Nebeneffekt: sie tragen ueberall dieselbe
Akzentfarbe (bisher nur an zwei Stellen) und sitzen in Tabellenzellen
mittig, statt durch das geerbte margin-top um 5px nach unten gedrueckt zu
werden.

Die Karte selbst nutzt jetzt .checkline, das vorhandene Muster fuer
"Ankreuzfeld plus Text"; .field-inline richtet an der Grundlinie aus und
war hier von vornherein das falsche.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/finance.css                   |  5 -----
 web/src/pages/settings/PolicyCard.jsx |  6 ++++--
 web/src/styles.css                    | 14 ++++++++++----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/src/finance.css b/web/src/finance.css
index 00602a2..d6a8815 100644
--- a/web/src/finance.css
+++ b/web/src/finance.css
@@ -379,10 +379,6 @@ tr.budget-total-row td {
   gap: var(--sp-2);
   margin-bottom: var(--sp-2);
 }
-.checkline input[type="checkbox"] {
-  width: auto;
-  margin-top: 0;
-}
 .checkline span {
   color: var(--text);
   font-weight: 560;
@@ -590,7 +586,6 @@ tr.row-dup {
 .datatable td input[inputmode],
 .datatable td input[type="text"] { max-width: none; width: 100%; }
 .datatable td .catsel { width: 100%; }
-.datatable td input[type="checkbox"] { width: auto; }
 
 /* ---------- Kategorie-Auswahl (auf-/zuklappbarer Baum, Ersatz für <select>) ---------- */
 .catsel {
diff --git a/web/src/pages/settings/PolicyCard.jsx b/web/src/pages/settings/PolicyCard.jsx
index a870b45..7b95871 100644
--- a/web/src/pages/settings/PolicyCard.jsx
+++ b/web/src/pages/settings/PolicyCard.jsx
@@ -83,9 +83,11 @@ export default function PolicyCard() {
                }} />
       </label>
 
+      {/* .checkline ist das Muster für „Ankreuzfeld plus Text"; .field-inline
+          richtet Felder an der Grundlinie aus und passt hier nicht. */}
       <div style={{ marginTop: "var(--sp-3)" }}>
         {SCHALTER.map((k) => (
-          <label key={k} className="field-inline" style={{ marginBottom: 6 }}>
+          <label key={k} className="checkline">
             <input type="checkbox" checked={entwurf[k]}
                    onChange={(e) => setEntwurf({ ...entwurf, [k]: e.target.checked })} />
             <span>{t(`policy.${k}`)}</span>
@@ -94,7 +96,7 @@ export default function PolicyCard() {
       </div>
 
       <div style={{ marginTop: "var(--sp-4)", paddingTop: "var(--sp-3)", borderTop: "1px solid var(--border)" }}>
-        <label className="field-inline">
+        <label className="checkline">
           <input type="checkbox" checked={entwurf.mfa_required}
                  onChange={(e) => setEntwurf({ ...entwurf, mfa_required: e.target.checked })} />
           <span>{t("policy.mfaRequired")}</span>
diff --git a/web/src/styles.css b/web/src/styles.css
index 0febb3a..7cc437d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -239,6 +239,16 @@ input:focus, select:focus {
   box-shadow: 0 0 0 3px var(--accent-soft);
 }
 input::placeholder { color: var(--muted); opacity: 0.7; }
+/* Ankreuzfelder sind keine Textfelder: die Regel oben (width:100%, margin-top)
+   zoege sie sonst ueber die volle Breite, das Haekchen landete in der Mitte und
+   der Text daneben ganz rechts. Hier zentral ausgenommen, damit das nicht an
+   jeder Einsatzstelle einzeln nachgeholt werden muss. */
+input[type="checkbox"], input[type="radio"] {
+  width: auto;
+  margin: 0;
+  flex: 0 0 auto;
+  accent-color: var(--accent);
+}
 .row { display: flex; gap: var(--sp-3); align-items: flex-start; }
 .row .grow { flex: 1; }
 
@@ -524,7 +534,6 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .picklist .link-btn { display: block; width: 100%; padding: 9px 4px; }
 .picklist .link-btn:hover { text-decoration: none; background: var(--surface-2); }
 .checklist label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: inherit; color: var(--text); }
-.checklist input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
 .checklist li.done .item-name { text-decoration: line-through; color: var(--muted); }
 .item-name { font-weight: 560; }
 
@@ -651,9 +660,6 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .dt-pop-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; }
 .dt-pop-opt { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 0.85rem; cursor: pointer; margin: 0; }
 .dt-pop-opt:hover { background: var(--surface-2); }
-/* Ohne diese Ausnahme erben die Checkboxen die globale input-Regel (width:100%,
-   Rahmen, margin) und sprengen die Zeile. */
-.dt-pop-opt input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; accent-color: var(--accent); }
 .dt-pop-opt span { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dt-tree-cell { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
 /* Kategorie-Pfad: Oberkategorien klein und gedämpft, Blatt normal. */