/* =============================================================================
   Hilfsklassen (Review 15.10.2026, M7)

   Ersetzen 875 der bis dahin rund 1.300 Inline-Styles in den Ansichten
   (maschinell umgestellt, berechnete Styles auf 85 Seiten Desktop + Handy
   vorher/nachher identisch). Nicht umgestellt: Elemente mit id/data-*/hidden
   (werden per JS angesprochen) und Einzelwerte ohne passende Klasse. Vorteile:
   einheitliche Abstände/Schriftgrößen, zentral änderbar (Dichte, Dunkelmodus),
   und weniger Bedarf an style-src 'unsafe-inline' in der CSP.

   Die Klassen tragen !important: sie ersetzen Inline-Styles, die bisher Vorrang
   vor jeder Komponentenklasse hatten (z. B. .note{margin-top:14px} + mt-10).
   Ohne !important würde die Umstellung das Layout still verändern.

   Benennung: <eigenschaft>-<wert>, Werte in px (mt-10 = margin-top:10px),
   Schriftgrößen ohne Punkt (fs-125 = 12.5px).
   ========================================================================== */

/* ---- Abstände ------------------------------------------------------------ */
.m-0{margin:0!important}
.mt-0{margin-top:0!important}.mt-2{margin-top:2px!important}.mt-3{margin-top:3px!important}.mt-4{margin-top:4px!important}.mt-6{margin-top:6px!important}.mt-8{margin-top:8px!important}
.mt-10{margin-top:10px!important}.mt-12{margin-top:12px!important}.mt-14{margin-top:14px!important}.mt-16{margin-top:16px!important}
.mt-18{margin-top:18px!important}.mt-20{margin-top:20px!important}.mt-24{margin-top:24px!important}
.mb-0{margin-bottom:0!important}.mb-4{margin-bottom:4px!important}.mb-6{margin-bottom:6px!important}.mb-8{margin-bottom:8px!important}
.mb-10{margin-bottom:10px!important}.mb-12{margin-bottom:12px!important}.mb-14{margin-bottom:14px!important}.mb-16{margin-bottom:16px!important}
.mb-18{margin-bottom:18px!important}.mb-20{margin-bottom:20px!important}.mb-24{margin-bottom:24px!important}
.ml-auto{margin-left:auto!important}.ml-4{margin-left:4px!important}.ml-6{margin-left:6px!important}.ml-8{margin-left:8px!important}
.mr-4{margin-right:4px!important}.mr-6{margin-right:6px!important}.mr-8{margin-right:8px!important}
.m-0-0-6{margin:0 0 6px!important}.m-0-0-8{margin:0 0 8px!important}.m-0-0-10{margin:0 0 10px!important}.m-0-0-12{margin:0 0 12px!important}
.m-0-0-14{margin:0 0 14px!important}.m-0-0-16{margin:0 0 16px!important}.m-14-0-0{margin:14px 0 0!important}
.p-0{padding:0!important}.pl-18{padding-left:18px!important}
.pad-box{padding:18px 20px!important}.pad-head{padding:14px 20px!important}.b-0{border:0!important}

/* ---- Schrift -------------------------------------------------------------- */
.fs-11{font-size:11px!important}.fs-115{font-size:11.5px!important}.fs-12{font-size:12px!important}
.fs-125{font-size:12.5px!important}.fs-13{font-size:13px!important}.fs-135{font-size:13.5px!important}.fs-14{font-size:14px!important}
.fs-15{font-size:15px!important}.fs-24{font-size:24px!important}
.fw-400{font-weight:400!important}.fw-500{font-weight:500!important}.fw-600{font-weight:600!important}.fw-700{font-weight:700!important}
.ff-display{font-family:var(--display)!important}.ff-mono{font-family:var(--mono)!important}
.lh-19{line-height:1.9!important}
.c-ink{color:var(--ink)!important}.c-soft{color:var(--ink-soft)!important}.c-muted{color:var(--muted)!important}
.c-muted2{color:var(--muted-2)!important}.c-red{color:var(--red)!important}.c-amber{color:var(--amber)!important}
.c-petrol{color:var(--petrol)!important}
.ta-right{text-align:right!important}.ta-center{text-align:center!important}.ta-left{text-align:left!important}
.nowrap{white-space:nowrap!important}.pointer{cursor:pointer!important}.td-none{text-decoration:none!important}
.break-word{overflow-wrap:anywhere!important}

/* ---- Anzeige & Flex ------------------------------------------------------- */
/* Anzeige-Klassen bewusst OHNE !important: el.style.display (JS) und [hidden]
   muessen sie weiterhin ueberstimmen koennen (Ein-/Ausblenden). */
.d-inline{display:inline}.d-block{display:block}.d-flex{display:flex}
.d-inline-flex{display:inline-flex}.d-grid{display:grid}
.fd-col{flex-direction:column!important}
.ai-center{align-items:center!important}.ai-start{align-items:flex-start!important}.ai-end{align-items:flex-end!important}
.jc-between{justify-content:space-between!important}.jc-end{justify-content:flex-end!important}.jc-center{justify-content:center!important}
.fw-wrap{flex-wrap:wrap!important}.flex-1{flex:1!important}.as-start{align-self:flex-start!important}
.gap-4{gap:4px!important}.gap-6{gap:6px!important}.gap-8{gap:8px!important}.gap-10{gap:10px!important}
.gap-12{gap:12px!important}.gap-16{gap:16px!important}
.minw-200{min-width:200px!important}.minw-220{min-width:220px!important}.minw-240{min-width:240px!important}
.span-all{grid-column:1/-1!important}
.ox-auto{overflow-x:auto!important}.of-hidden{overflow:hidden!important}

/* ---- Symbole --------------------------------------------------------------- */
.ico-14{width:14px!important;height:14px!important}.ico-15{width:15px!important;height:15px!important}
.ico-16{width:16px!important;height:16px!important}.ico-18{width:18px!important;height:18px!important}

/* ---- Wiederkehrende Bausteine ---------------------------------------------- */
/* Kartenüberschrift (vorher: font-family:var(--display);font-size:15px;margin:0 0 14px) */
.card-title{font-family:var(--display);font-size:15px;margin:0 0 14px}
/* Formular ohne Rahmen (fieldset zum gemeinsamen Sperren) */
.fs-plain{border:0!important;padding:0!important;margin:0!important;min-width:0}
/* Zeile mit Titel links, Status rechts */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Checkbox mit Text in einer Zeile */
.check-line{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;margin:6px 0}
/* Hinweistext unter Feldern */
.form-hint{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
/* Warnhinweis in Karten */
.note.warn{color:var(--amber);background:var(--amber-bg);border-radius:var(--radius-s);padding:10px 12px;font-size:13px}
/* Kennzahl groß */
.kpi-num{font-size:24px;font-weight:700;font-family:var(--display)}
/* Aufzählung in Karten */
.list-soft{margin:0;padding-left:18px;font-size:13px;color:var(--ink-soft);line-height:1.9}

/* ---- KI-Kennzeichnung (Review 15.10.2026, M6) ------------------------------- */
.ki-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--blue);background:var(--blue-bg);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.ki-ok{font-size:11px;color:var(--petrol);background:transparent;border:1px solid var(--euc-100);border-radius:999px;
  padding:0 8px;margin-left:4px;cursor:pointer;line-height:18px}
.ki-ok:hover{background:var(--euc-50)}
.ki-ok:focus-visible{outline:2px solid var(--petrol);outline-offset:1px}
.ki-pruefen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--blue-bg);color:var(--ink);
  border-radius:var(--radius-s);padding:10px 14px;margin:0 0 12px;font-size:13px}
.ki-pruefen .ki-badge{margin-left:0}

/* ---- [hidden] gewinnt immer ------------------------------------------------ */
/* Wiederholt die Regel aus app.css NACH den Hilfsklassen: bei gleicher
   Spezifitaet entscheidet die Reihenfolge — sonst schluege z. B. .d-flex ein
   verborgenes Element wieder auf. */
[hidden]{display:none!important}

/* ---- KI nicht verfügbar (Review 15.10.2026) -------------------------------- */
/* Ist die KI nicht eingerichtet oder für den Mandanten ausgeschaltet, setzt das Layout
   body.ki-aus: KI-Knöpfe verschwinden, statt beim Klick „Bitte zustimmen" o. Ä. zu melden. */
.ki-aus .ki-btn,.ki-aus [data-ki],.ki-aus #akteFillBtn,.ki-aus #atlas-ask{display:none!important}