:root {
  /* Brand — Owner 23.07.: Lemon-Neon RAUS, überall das vorhandene Grün (--rw-good
     #0ca30c, wie „Summe brutto"/Sektionsmarken). Grün trägt weißen Text. */
  --primary: #0ca30c;          /* PRIMARY GRÜN — Haupt-CTA */
  --primary-hover: #0a8a0a;    /* Hover (dunkleres Grün) */
  --primary-ink: #046b04;      /* dunkles Grün für Text/Icons auf Hell */
  --primary-dark: #046b04;     /* Alias (Altbestand nutzt --primary-dark als Text) */
  --on-primary: #ffffff;       /* weiße Tinte für Text auf Grün-Flächen */
  --primary-soft: #e6f6ea;     /* helle grüne Tönung (Badges/Hover) */
  --primary-softer: #f2fbf4;   /* sehr helle grüne Tönung (Flächen) */
  /* SECONDARY NEON (#a3b812) — der ruhigere Marken-Akzent: Linien, Icons,
     Kopfzeilen-Akzente, aktive Zustände. Nicht so grell wie das Primärneon. */
  --secondary: #a3b812;
  --secondary-soft: #eef3cf;

  /* Neutrals — hell & ruhig, viel Weißraum */
  --bg: #f6f7f6;
  --surface: #ffffff;
  --surface-2: #fafbfa;
  --border: #e7e9e7;
  --border-strong: #d6dad7;
  /* Seitenmenü nach Entwurf: dunkle Pille + Neon-Icon aktiv, grüne Pille im
     Untermenü. Werte identisch zu rw.css (--rw-ink/--rw-neon/--rw-good…),
     hier nochmal an :root, weil rw.css nicht auf jeder Seite geladen ist. */
  --nav-on-bg: #0ca30c;  --nav-on-ic: #ffffff;
  --nav-sub-on: #0ca30c; --nav-sub-on-bg: #e6f6ea;
  --nav-hover: #f1f3f1;
  --text: #1a2420;
  --muted: #6a756e;

  /* Status */
  --ok-bg: #e6f6ed; --ok-fg: #1f8a52;
  --off-bg: #f0f2f0; --off-fg: #6a756e;
  --addon-bg: #f1fbc2; --addon-fg: #59670a;
  --plan-bg: #fbf1e2; --plan-fg: #a96a18;

  /* Signature dark "ink" — regio.one Brand-Dunkel (BG #0e0e0e / Card #1c1c1c).
     Ruhige dunkle Basis + Neon-Akzent = Markenkern. Für aktive Pills,
     selektierte Zeilen, dunkle Buttons. */
  --ink: #1c1c1c;
  --ink-2: #2c2c2c;
  --on-ink: #f2f2f2;
  --on-ink-muted: #8f8f8f;

  /* Geldrichtung (Ein-/Ausgang) */
  --in-fg: #1f9d57;
  --out-fg: #d8534b;

  /* Semantische Aktions-/Status-Farben — EINE Quelle der Wahrheit.
     Vorher überall als var(--success,#1f9d55)/var(--danger,#c0392b)-Fallback
     hartkodiert, OHNE :root-Definition. Jetzt zentral, damit Erfolgs-/Gefahr-
     Akzente (Buchen-Buttons, Löschen-Buttons, Ampeln) konsistent bleiben. */
  --success: #1f9d55;
  --success-dark: #18834a;
  --danger: #c2453f;        /* deckt sich mit --out-fg-Familie; ersetzt #b42318/#c0392b-Streuung */
  --danger-soft: #fdecec;   /* heller Gefahr-Grund (Alerts, Hover) */
  --danger-strong: #b42318; /* kräftiges Rot für seltene Volltonflächen */
  /* Neutrale, sehr helle Zwischenfläche (Abschnitts-/Tabellenkopf-Tönung).
     War als var(--subtle,#f3f4f6) ohne Definition gestreut. */
  --subtle: #f3f4f6;

  /* Status-Palette (Listen-Badges) — eine Quelle der Wahrheit */
  --st-neutral-bg: #eef0ee; --st-neutral-fg: #6a756e;
  --st-info-bg: #e7f0ff;    --st-info-fg: #2f6fdb;
  --st-success-bg: #e3f5ea; --st-success-fg: #1f8a52;
  --st-warn-bg: #fbf1e2;    --st-warn-fg: #a96a18;
  --st-muted-bg: #f1f2f4;   --st-muted-fg: #9aa1aa;
  --st-danger-bg: #fdeaea;  --st-danger-fg: #c0392b;

  /* Spacing-Skala — 4px-Basis. Layout-Primitives (.form-row, .form-actions,
     .board) referenzieren diese statt fixer px. Module sollen Abstände über
     diese Skala wählen, nicht frei inline (kein gap:12px/margin-top:20px mehr). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Type-Skala — die im System tatsächlich genutzten Größen, benannt. */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 22px;
  --fs-2xl: 24px;

  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
  /* dezente Linien statt Schatten; Schatten nur für schwebende Menüs */
  --shadow: none;
  --shadow-sm: 0 1px 2px rgba(18,32,26,.05);
  --shadow-md: 0 4px 16px rgba(18,32,26,.08);
  --shadow-pop: 0 10px 30px rgba(18,32,26,.12), 0 2px 6px rgba(18,32,26,.06);
  --ring: 0 0 0 3px var(--primary-soft);
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — regio.works
   Generische, wiederverwendbare Primitives. Neue Seiten nutzen DIESE Klassen;
   ältere modul-spezifische Klassen (.bf-*, .rec-*, .pay-*) werden schrittweise
   hierauf migriert. Identität: Smaragd (--primary) + warmes Ink (--ink).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary   { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover   { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost     { background: transparent; color: var(--muted); }
.btn--ghost:hover     { background: var(--surface-2); color: var(--text); }
.btn--ink       { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover       { background: var(--ink-2); }
.btn--danger    { background: var(--surface); border-color: var(--border); color: var(--out-fg); }
.btn--danger:hover    { border-color: #e3b4b0; background: #fdf3f2; }
.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--lg { padding: 11px 22px; font-size: 15px; }
.btn--block { width: 100%; }

/* ── Page toolbar / header ────────────────────────────────────────────── */
.page-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-title-icon { width: 22px; height: 22px; color: var(--primary-ink); vertical-align: -3px; margin-right: 8px; }
.toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { color: var(--muted); margin: -16px 0 22px; }

/* ── Pill tabs (segmented filter) ─────────────────────────────────────── */
.pill-tabs { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  background: none; border: none; cursor: pointer; white-space: nowrap;
}
.pill:hover { background: var(--surface-2); }
.pill.is-active { background: var(--ink); color: var(--on-ink); }
.pill-count {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--st-neutral-bg); color: var(--st-neutral-fg);
}
.pill.is-active .pill-count { background: rgba(255,255,255,.22); color: #fff; }

/* ── Status badge ─────────────────────────────────────────────────────── */
.status {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--st-neutral-bg); color: var(--st-neutral-fg);
}
.status--info    { background: var(--st-info-bg);    color: var(--st-info-fg); }
.status--success { background: var(--st-success-bg); color: var(--st-success-fg); }
.status--warn    { background: var(--st-warn-bg);    color: var(--st-warn-fg); }
.status--muted   { background: var(--st-muted-bg);   color: var(--st-muted-fg); }
.status--danger  { background: var(--st-danger-bg);  color: var(--st-danger-fg); }
.status--solid   { background: var(--primary);       color: var(--on-primary); }

/* ── Data table (full-width list pattern) ─────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Summenzeilen stehen im <tfoot> und MÜSSEN dieselbe Zellenpolsterung tragen
   wie der Tabellenkörper — sonst rutschen die Beträge um 14 px nach rechts
   und laufen bis an den Kartenrand, statt mit den Werten darüber zu fluchten
   (Owner 2026-07-20: „warum sind die summen nicht schön untereinander").
   Zentral hier, nicht je Auswertung. */
.data-table tfoot td { padding: 9px 14px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
/* Grüner Hover-Feedback auf JEDER Tabellenzeile (nicht nur klickbaren) — eine
   Regel in der Shared-Schicht, damit alle .data-table/.lv-table-Listen es erben. */
.data-table tbody tr { transition: background .1s ease; }
.data-table tbody tr:hover { background: var(--primary-softer); }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr.is-clickable:hover { background: var(--primary-softer); }
.data-table tbody tr.is-active { background: var(--ink); }
.data-table tbody tr.is-active td { color: var(--on-ink); border-bottom-color: var(--ink-2); }
.data-table .num { font-variant-numeric: tabular-nums; }
.cell-in  { color: var(--in-fg);  font-weight: 700; font-variant-numeric: tabular-nums; }
.cell-out { color: var(--out-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.cell-link { font-weight: 600; color: var(--text); text-decoration: none; }
.cell-link:hover { color: var(--primary-dark); text-decoration: underline; }

/* ── List filter bar (search + pill filters) ──────────────────────────── */
.list-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.list-search {
  flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; background: #fff;
}
.list-search:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

/* ── Listview: full-bleed register (resizable + toggleable columns) ─────── */
/* Wie die Bank-Seite: volle Breite, Spaltenbreiten per Drag, Spaltenauswahl. */
.content:has(.lv) { padding: 0; }
.lv { display: flex; flex-direction: column; min-height: calc(100vh - 60px); background: var(--surface); color: var(--text); }

.lv-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.lv-title { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lv-title h1 { margin: 0; font-size: 19px; font-weight: 700; }
.lv-title-icon { width: 22px; height: 22px; color: var(--primary-ink); flex: none; }
/* Suchformular lebt seit 2026-07 im Topbar-Slot (.topbar-search) — siehe
   Abschnitt „Topbar-Suche" am Dateiende. Die Pillen-Optik bleibt hier. */
.lv-search-form { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0; }
.lv-search { width: 100%; min-width: 0; padding: 9px 14px 9px 38px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 14px; background: var(--surface-2); }
.lv-search:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: var(--ring); }
.lv-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.lv-mid { flex: 0 0 auto; }
.lv-bar > form { margin: 0; }
.lv-select { padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 14px; background: var(--surface-2); cursor: pointer; }
.lv-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.lv-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.lv-actions form { margin: 0; }

.lv-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lv-table { table-layout: fixed; width: 100%; min-width: 100%; }
.lv-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-table tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* Optionale Kennzahlen-/Hinweisleiste unter dem Listenkopf */
.lv-subbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 10px 22px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 13px; }
.lv-stat { display: flex; align-items: baseline; gap: 7px; }
.lv-stat .muted { color: var(--muted); }
.lv-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.lv-gate { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--st-warn-bg); color: var(--st-warn-fg); font-size: 12px; font-weight: 600; }

/* Gruppierte Tabellen (z. B. Kontenrahmen) im Listview-Body */
.acct-group-head { margin: 22px 0 7px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.acct-group-head:first-child { margin-top: 4px; }
.acct-table { width: 100%; margin-bottom: 6px; }

/* Sortierbare Überschriften */
.lv-table thead th.is-sortable { cursor: pointer; user-select: none; }
.lv-table thead th .col-label { display: inline-flex; align-items: center; max-width: 100%; }
.col-sort { flex: none; }
.lv-table thead th.is-sortable .col-sort::after { content: "↕"; margin-left: 6px; font-size: 10px; color: var(--border-strong); }
.lv-table thead th.sort-asc  .col-sort::after { content: "↑"; color: var(--primary-ink); }
.lv-table thead th.sort-desc .col-sort::after { content: "↓"; color: var(--primary-ink); }

/* Spalten umsortieren (Drag der Überschrift) */
.lv-table thead th.is-reordering { opacity: .45; }
.lv-table thead th.is-drop-before { box-shadow: inset 3px 0 0 0 var(--primary); }
.lv-table thead th.is-drop-after  { box-shadow: inset -3px 0 0 0 var(--primary); }
body.col-reordering, body.col-reordering * { cursor: grabbing !important; user-select: none; }

/* Resize-Griff am rechten Rand jeder Spaltenüberschrift */
.col-grip { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; z-index: 2; }
.col-grip::after { content: ""; position: absolute; right: 4px; top: 22%; height: 56%; width: 2px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity .12s; }
.lv-table thead th:hover .col-grip::after, .col-grip.is-dragging::after { opacity: 1; }
.col-grip.is-dragging::after { background: var(--primary); }
/* Am Tablet gibt es kein Hover: der Griff wäre unsichtbar, und 9 px trifft
   kein Finger. Also breitere Fläche und der Strich immer sichtbar (Owner
   28.07.). Nur bei grobem Zeiger, damit die Maus-Ansicht ruhig bleibt. */
@media (pointer: coarse) {
  .col-grip { width: 22px; }
  .col-grip::after { opacity: .55; right: 10px; }
}
body.col-resizing { cursor: col-resize !important; user-select: none; }

/* Spaltenauswahl-Menü */
.lv-cols { position: relative; }
.lv-cols-menu {
  position: absolute; right: 0; top: 40px; z-index: 30; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 7px; max-height: 64vh; overflow: auto;
}
.lv-cols-menu-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 9px 4px; }
.lv-col-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.lv-col-item:hover { background: var(--surface-2); }
.lv-col-item input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex: none; }
.lv-col-item input:disabled { cursor: not-allowed; }
.lv-col-item.is-locked { color: var(--muted); cursor: default; }

/* ── Massenaktionen-Dropdown (core/_bulk_actions.html + bulk-actions.js) ── */
.lv-bulk { position: relative; }
.lv-bulk-caret { margin-left: 6px; opacity: .7; }
.lv-bulk-menu {
  position: absolute; left: 0; top: 40px; z-index: 30; min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 6px; max-height: 70vh; overflow: auto;
}
.lv-bulk-section-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 9px 12px 4px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.lv-bulk-section-head:first-child { border-top: 0; margin-top: 0; }
.lv-bulk-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer; transition: background .12s, color .12s;
}
.lv-bulk-item:hover { background: var(--surface-2); }
.lv-bulk-item--primary { color: var(--primary); font-weight: 600; }
.lv-bulk-item--primary:hover { background: var(--primary-soft); }
.lv-bulk-item--danger { color: var(--danger, #c0392b); }
.lv-bulk-item--danger:hover { background: var(--danger-soft, #fdecea); color: var(--danger, #c0392b); }
.lv-bulk-item:disabled { opacity: .4; cursor: not-allowed; }
.lv-bulk-item:disabled:hover { background: transparent; }

/* Styliertes Massenaktionen-Popup (ersetzt window.confirm) ---------------- */
.bulk-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.bulk-modal[hidden] { display: none; }
.bulk-modal-backdrop {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .45);
}
.bulk-modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 22px 24px; text-align: left;
}
.bulk-modal-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.bulk-modal-text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.bulk-modal-text[hidden] { display: none; }
.bulk-modal-options { display: flex; flex-direction: column; gap: 10px; }
.bulk-modal-options[hidden] { display: none; }
.bulk-modal-option {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.bulk-modal-option:hover { border-color: var(--primary); background: var(--surface-2); }
.bulk-modal-option--primary { border-color: var(--primary); }
.bulk-modal-option--primary:hover { background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.bulk-modal-option--danger:hover { border-color: var(--danger, #c0392b); background: var(--danger-soft, #fdecea); }
.bulk-modal-option-label { font-size: 14px; font-weight: 600; }
.bulk-modal-option-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.bulk-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.bulk-modal-actions[hidden] { display: none; }

/* App-weiter Bestätigungs-Dialog (confirm-dialog.js, ersetzt window.confirm) - */
html.app-confirm-lock { overflow: hidden; }
.app-confirm {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.app-confirm[hidden] { display: none; }
.app-confirm-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.app-confirm-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 22px 24px; text-align: left;
  animation: app-confirm-in .14s ease-out;
}
@keyframes app-confirm-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.app-confirm-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.app-confirm-dialog.is-danger .app-confirm-title { color: var(--danger); }
.app-confirm-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.app-confirm-msg[hidden] { display: none; }
.app-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* Roter Voltton-„Bestätigen"-Button nur für destruktive Aktionen. */
.btn.btn--danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.btn--danger-solid:hover { background: var(--danger-strong); border-color: var(--danger-strong); }
@media (prefers-reduced-motion: reduce) { .app-confirm-dialog { animation: none; } }

/* ── Tabelleneinstellungen: Icon-Trigger + Katalog-Modal (datatable.js) ── */
.lv-cols-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; }
.lv-cols-icon { width: 17px; height: 17px; display: block; }
.dt-settings {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dt-settings[hidden] { display: none; }
.dt-settings-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.dt-settings-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 820px;
  max-height: min(88vh, 760px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden;
}
.dt-settings-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--border);
}
.dt-settings-title {
  margin: 0; flex: 1; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text);
}
.dt-settings-close {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 7px;
}
.dt-settings-close:hover { background: var(--surface-2); color: var(--text); }
.dt-settings-searchwrap { padding: 14px 22px 6px; }
.dt-settings-search {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
}
.dt-settings-search:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.dt-settings-body { flex: 1; overflow-y: auto; padding: 6px 22px 16px; }
.dt-settings-group { margin-top: 14px; }
.dt-settings-group:first-child { margin-top: 4px; }
.dt-settings-group-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 4px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.dt-settings-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px;
}
.dt-settings-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 4px;
  font-size: 13.5px; color: var(--text); cursor: pointer; border-radius: 6px;
}
.dt-settings-item:hover { background: var(--surface-2); }
.dt-settings-item.is-locked { color: var(--muted); cursor: default; }
.dt-settings-item input { margin-top: 2px; flex: 0 0 auto; }
.dt-settings-empty { color: var(--muted); font-size: 13.5px; padding: 18px 4px; }
.dt-settings-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface);
}
.dt-settings-foot .dt-settings-reset { margin: 0 auto; }
@media (max-width: 720px) {
  .dt-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .dt-settings-grid { grid-template-columns: 1fr; }
}

/* ── Pro-Spalten-Filterzeile (von datatable.js erzeugt) ──
   Sitzt ÜBER der Spaltenüberschrift (erste thead-Zeile); bei geöffnetem
   Filter rückt der Spaltenkopf um die Filterhöhe (--dt-filter-h) nach unten. */
.lv-table thead tr.lv-filter-row th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  padding: 5px 8px; border-bottom: 1px solid var(--border); overflow: visible;
}
.lv-table.dt-filter-open thead tr:not(.lv-filter-row) th { top: var(--dt-filter-h, 39px); }
.lv-filter-row .lv-filter-input,
.lv-filter-row .lv-filter-select {
  width: 100%; min-width: 0; padding: 5px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
}
.lv-filter-row .lv-filter-input:focus,
.lv-filter-row .lv-filter-select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.lv-filter-row .dt-sel-th { background: var(--surface-2); }
/* Aktiver Filter-Umschalter = voller Primär-Look (wie „+ … anlegen"),
   nicht die blasse Soft-Variante mit Ton-in-Ton-Schrift. */
.btn--filter-active { border-color: var(--primary); color: var(--on-primary); background: var(--primary); }
.btn--filter-active:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }

/* ── Zeilenauswahl: Checkbox-Spalte + Auswahlleiste (datatable.js) ── */
.dt-sel-th, .dt-sel-td { width: 40px; text-align: center; padding-left: 0; padding-right: 0; }
/* Höhere Spezifität als `.data-table tbody td` (0,1,2) bzw.
   `.dt-embed .data-table tbody td` (0,2,2): sonst gewinnt deren
   `padding: 9px 14px`, der Content-Bereich der 40px-Zelle schrumpft unter die
   16px-Checkbox, sie läuft über und `text-overflow: ellipsis` malt ein „…“
   direkt neben jede Checkbox. Padding auf 0 zwingen und Ellipsis abschalten. */
.lv-table td.dt-sel-td, .lv-table th.dt-sel-th,
.dt-embed td.dt-sel-td, .dt-embed th.dt-sel-th {
  padding-left: 0; padding-right: 0;
  overflow: visible; text-overflow: clip;
}
/* Kopf-Kästchen bündig über den Zeilen-Kästchen: die generische
   `thead th { text-align:left }`-Regel gewann sonst gegen die Zentrierung
   der 40px-Auswahlspalte (Kästchen saß 11px zu weit links). */
.data-table thead th.dt-sel-th, .lv-table thead th.dt-sel-th,
.dt-embed thead th.dt-sel-th { text-align: center; }
.dt-sel-th { cursor: default; }
.dt-sel-th input, .dt-sel-td input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin: 0; }
/* Ausgewählte Zeilen (Mehrfachauswahl) — deutlich grün, in JEDER Tabelle
   (Listen tragen .data-table; Embed-Tabellen .dt-embed). Bleibt auch beim
   Überfahren grün (sonst würde der schwächere Hover die Auswahl überdecken). */
.data-table tbody tr.is-selected,
.data-table tbody tr.is-selected:hover,
.data-table tbody tr.is-selected.is-clickable:hover,
.dt-embed tbody tr.is-selected,
.dt-embed tbody tr.is-selected:hover { background: var(--primary-soft); }
.data-table tbody tr.is-selected td,
.dt-embed tbody tr.is-selected td { border-bottom-color: var(--primary); }
/* Erste Zelle bekommt einen grünen Akzentstreifen für klare Sichtbarkeit. */
.data-table tbody tr.is-selected td:first-child,
.dt-embed tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 0 var(--primary); }

/* Schwebende Auswahlleiste am unteren Rand der Liste (helle Karte) */
.lv-selbar {
  position: sticky; bottom: 16px; z-index: 5;
  display: none; align-items: center; gap: 16px;
  margin: 14px 16px 16px; padding: 10px 16px;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-pop);
}
.lv-selbar.is-active { display: flex; }
.lv-selbar-count {
  font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--text);
  padding: 4px 10px; border-radius: 999px; background: var(--primary-soft);
}
.lv-selbar-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; }
.lv-selbar-clear {
  margin-left: auto; background: var(--surface); color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: 13px; cursor: pointer; transition: background .12s, color .12s;
}
.lv-selbar-clear:hover { background: var(--surface-2); color: var(--text); }

/* ── Eingebettete Datatable (Panel-Reiter der 360°-Kontaktansicht u. a.) ──── */
/* Gleiche Tabellenform wie die Listen-Seiten (sortierbar, Status-Badges,
   Checkboxen), aber als kompakte Karte in einem Reiter statt full-bleed.
   Bewusst NICHT .lv, damit der globale `.content:has(.lv)`-Full-Bleed nicht
   greift. */
.dt-embed {
  position: relative; margin-top: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.dt-embed-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.dt-embed-body { overflow: auto; max-height: 62vh; }
.dt-embed .lv-table { table-layout: fixed; width: 100%; min-width: 100%; }
.dt-embed .lv-table thead th {
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: 9px 12px; font-size: 12px;
}
.dt-embed .data-table tbody td, .dt-embed .data-table tfoot td { padding: 9px 12px; }
.dt-embed .lv-selbar { margin: 12px; }
/* Als inv-card eingebettet (Reiter Zahlungen/Akte): Bar + Body laufen bis an
   den Kartenrand — die generische 16/22px-Einrückung der Karten-Kinder würde
   die getönte Filterleiste sonst mit weißen Rändern "abschneiden". */
.inv-card > .dt-embed-bar, .inv-card > .dt-embed-body,
.inv-editor .inv-card > .dt-embed-bar, .inv-editor .inv-card > .dt-embed-body {
  margin-left: 0; margin-right: 0;
}
/* Dasselbe für data-tables direkt in der Karte (GuV, Kontoauszug, Zahlungen-
   Übersicht): 16/22px-Einrückung PLUS width:100% machte die Tabelle 32/44px
   breiter als die Karte — die letzte Spalte lief rechts über den Rand
   (14"-MacBook: "Jahr 2025" abgeschnitten). Full-bleed; die Einrückung
   liefert das Zellen-Padding. */
.inv-card > .data-table, .inv-card > table.table,
.inv-editor .inv-card > .data-table, .inv-editor .inv-card > table.table {
  margin-left: 0; margin-right: 0;
}

/* Kompakter Filter — der Tabellenbreite angepasst, nicht raumgreifend. */
.dt-filter { flex: 0 0 auto; }
.dt-filter-input {
  width: 220px; max-width: 100%; padding: 6px 13px;
  border: 1px solid var(--border); border-radius: 999px;
  font: inherit; font-size: 13px; background: var(--surface);
}
.dt-filter-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: var(--ring); }
.dt-filter-empty td { text-align: center; color: var(--muted); padding: 28px 0; }

/* ── Hierarchie-Breadcrumb (App-Bereich › Unterseite, serverseitig) ── */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12.5px; color: var(--muted); padding: 0 0 10px; }
.breadcrumb-link { color: var(--muted); text-decoration: none; border-radius: 6px;
  padding: 1px 4px; }
.breadcrumb-link:hover { color: var(--text); background: var(--surface-2); }
.breadcrumb-sep { color: var(--border-strong); }
.breadcrumb-current { color: var(--text); font-weight: 600; }
/* Full-bleed-Listen (padding:0): Breadcrumb braucht dort eigene Seitenränder. */
.content:has(.lv) .breadcrumb { padding: 12px 20px 0; }

/* ── App shell: sidebar + main column ── */
.app-shell { display: flex; min-height: 100vh; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
  flex: 0 0 226px; width: 226px;
  background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--text); font-size: 16px; letter-spacing: -.01em; padding: 17px 16px 12px; }
.brand-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: block; object-fit: contain;
}

/* Seitenmenü nach dem abgenommenen Entwurf (masken-entwurf, .nav-link/.sublink).
   Owner-Vorgabe 22.07.: KEINE Gruppen-Überschriften („Vertrieb & Kontakte" …) —
   die Gruppen trennt nur ein Abstand. Aktiver Hauptpunkt: dunkle Pille mit
   Neon-Icon; aktiver Unterpunkt: grüne Pille mit grünem Punkt. */
.sidenav { padding: 7px 7px 22px; flex: 1; }
.nav-section { margin-bottom: 0; }
.nav-section + .nav-section { margin-top: 11px; }
.nav-section-title { display: none; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; color: var(--text); text-decoration: none; background: none; border: none; font: inherit; font-size: 14px; line-height: 1.35; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.nav-item:hover { background: var(--nav-hover); }
.nav-item.active { background: var(--nav-on-bg); color: #fff; font-weight: 600; }
.nav-item.active:hover { background: var(--nav-on-bg); }
.nav-parent.active { background: none; color: var(--text); }
/* Aktiver Elternpunkt beim Hover: heller Hover statt dunkel — sonst wird das
   dunkle Label auf dunklem Grund unsichtbar (Owner 24.07.). */
.nav-parent.active:hover { background: var(--nav-hover); color: var(--text); }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); }
.nav-item.active .nav-icon { color: var(--nav-on-ic); }
.nav-parent.active .nav-icon { color: var(--muted); }
.nav-label { flex: 1; text-align: left; }
/* Caret-Drehung erst animieren, wenn der wiederhergestellte Sidebar-Zustand
   gezeichnet ist (html.sidebar-ready, siehe base.html) — sonst schwingen die
   Pfeile beim Laden sichtbar ein. */
.nav-caret { width: 13px; height: 13px; flex: 0 0 13px; color: var(--muted); }
html.sidebar-ready .nav-caret { transition: transform .15s ease; }
.nav-caret.rot { transform: rotate(90deg); }
/* Untermenüs: auf/zu steuert die Klasse .is-open am .nav-group (kein Alpine —
   der Zustand steht schon beim Parsen fest, nichts hüpft beim Seitenwechsel). */
.nav-group.is-open > .nav-parent .nav-caret { transform: rotate(90deg); }
.nav-children { margin: 1px 0 3px; padding-left: 7px; display: none; flex-direction: column; gap: 0; }
.nav-group.is-open > .nav-children { display: flex; }
/* Unterpunkt mit Punkt-Marker wie im Entwurf (.sublink::before) */
.nav-child { position: relative; padding: 7px 9px 7px 27px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.35; font-weight: 600; white-space: nowrap; transition: background .12s ease, color .12s ease; }
.nav-child::before { content: ""; position: absolute; left: 16px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); transform: translateY(-50%); }
.nav-child:hover { background: var(--nav-hover); color: var(--text); }
.nav-child.active { color: var(--nav-sub-on); background: var(--nav-sub-on-bg); font-weight: 600; }
.nav-child.active::before { background: var(--nav-sub-on); }
.nav-child.active:hover { background: var(--nav-sub-on-bg); }
.gate-dot { color: var(--plan-fg); font-size: 9px; line-height: 1; vertical-align: middle; }
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-row > .nav-item, .nav-row > .nav-child { flex: 1 1 auto; min-width: 0; width: auto; }
.nav-open { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; color: var(--muted); opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.nav-row:hover .nav-open { opacity: .65; }
.nav-open:hover { opacity: 1; background: var(--surface-2); color: var(--text); }
.nav-open:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: 1px; }
.nav-open-icon { width: 14px; height: 14px; }

/* ── Sidebar einklappen (nur Desktop ≥900px — mobil übernimmt das
   Off-Canvas-Menü aus mobile.css, das hiervon unberührt bleibt). Der Zustand
   liegt als Klasse am <html> (localStorage 'rw:sidebar:collapsed', gesetzt
   vor dem ersten Paint in base.html). ── */
.sidebar-toggle {
  display: flex; align-items: center; gap: 10px;
  margin: 0 11px; padding: 9px 9px 9px 7px;
  position: sticky; bottom: 0;
  background: var(--surface); border: none; border-top: 1px solid var(--border);
  border-radius: 0; color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer; text-align: left;
}
.sidebar-toggle:hover { color: var(--text); }
.sidebar-toggle-icon {
  width: 15px; height: 15px; flex: 0 0 15px;
  transform: rotate(180deg);           /* Chevron zeigt zum Einklappen nach links */
}
html.sidebar-ready .sidebar-toggle-icon { transition: transform .15s ease; }
@media (max-width: 899.98px) {
  .sidebar-toggle { display: none; }   /* mobil gibt es nur das Off-Canvas-Menü */
}
@media (min-width: 900px) {
  html.sidebar-ready .sidebar { transition: flex-basis .18s ease, width .18s ease; }
  html.sidebar-collapsed .sidebar { flex-basis: 64px; width: 64px; overflow-x: hidden; }
  html.sidebar-collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sidebar-collapsed .sidebar .brand-text,
  html.sidebar-collapsed .sidebar .nav-label,
  html.sidebar-collapsed .sidebar .nav-caret,
  html.sidebar-collapsed .sidebar .nav-open,
  html.sidebar-collapsed .sidebar .nav-children { display: none; }
  /* Eingeklappt trennt eine feine Linie die Gruppen (die Abschnittstitel sind
     seit dem Entwurfs-Umbau ausgeblendet). */
  html.sidebar-collapsed .sidebar .nav-section + .nav-section {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  }
  html.sidebar-collapsed .sidenav { padding-left: 12px; padding-right: 12px; }
  html.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 9px 0; gap: 0; }
  html.sidebar-collapsed .sidebar .nav-icon { width: 19px; height: 19px; flex-basis: 19px; }
  /* Eingeklappt gibt es keine sichtbaren Kinder → die Gruppe der aktuellen
     Seite bekommt selbst die aktive Pille. */
  html.sidebar-collapsed .sidebar .nav-parent.active { background: var(--nav-on-bg); }
  html.sidebar-collapsed .sidebar .nav-parent.active .nav-icon { color: var(--nav-on-ic); }
  /* Die freigewordene Breite nutzt der Inhalt ohnehin — .content hat keinen
     Deckel mehr (Owner-Regel: immer volle Breite). */
  html.sidebar-collapsed .sidebar-toggle { justify-content: center; margin: 0; padding: 11px 0; }
  html.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.sidebar-ready .sidebar,
  html.sidebar-ready .nav-caret,
  html.sidebar-ready .sidebar-toggle-icon { transition: none; }
}

/* Flyout-Untermenü der eingeklappten Leiste: hängt am <body> und ist FIXED
   positioniert (base.html-Script), weil die schmale Leiste ein absolut
   positioniertes Panel per overflow abschneiden würde. */
.nav-flyout {
  position: fixed; z-index: 80; display: none; min-width: 190px; max-width: 260px;
  padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 24, 21, .14);
}
.nav-flyout.is-open { display: flex; flex-direction: column; gap: 1px; }
.nav-flyout-title {
  padding: 5px 10px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.nav-flyout-link {
  display: block; padding: 7px 10px; border-radius: 7px; color: var(--text);
  text-decoration: none; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nav-flyout-link:hover { background: var(--surface-2); }
.nav-flyout-link.active { color: var(--primary-dark); background: var(--primary-soft); font-weight: 600; }

/* ── Topbar (right-aligned user menu) ── */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px; height: 60px;
  position: sticky; top: 0; z-index: 10;
}
.topbar-spacer { flex: 1; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--primary); font-weight: 700; font-size: 13px; }
.user-name { font-weight: 600; }
.role-badge { font-size: 12px; color: var(--muted); background: var(--bg); padding: 2px 8px; border-radius: 999px; }
.dropdown { position: absolute; right: 0; top: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); min-width: 220px; overflow: hidden; padding: 6px; }
.dropdown-head { padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; }
.dropdown-head small { color: var(--muted); }
.dropdown-item { display: flex; align-items: center; width: 100%; box-sizing: border-box; text-align: left; text-decoration: none; background: none; border: none; border-radius: 8px; padding: 9px 12px; cursor: pointer; font: inherit; color: var(--text); white-space: nowrap; }
.dropdown-item:hover { background: var(--bg); text-decoration: none; }
/* „Abmelden" (im Formular) optisch vom Rest abtrennen. */
.dropdown form { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

/* ── Notification bell ── */
.notif-menu { position: relative; margin-right: 6px; }
.notif-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: none; border: 1px solid var(--border); cursor: pointer; color: var(--text); }
.notif-btn:hover { background: var(--bg); }
.notif-icon { width: 19px; height: 19px; }
.notif-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger, #e5484d); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.notif-dropdown { min-width: 320px; max-width: 360px; max-height: 70vh; overflow-y: auto; }
.notif-item { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.notif-item:hover { background: var(--bg); }
.notif-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.notif-item-top small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.notif-item-doc { font-size: 12px; color: var(--primary-ink, var(--muted)); font-weight: 600; }
.notif-item-body { font-size: 12px; color: var(--muted); }
.notif-empty { padding: 18px 14px; color: var(--muted); font-size: 13px; text-align: center; }
/* Fußzeile des Glocken-Dropdowns: Link zur vollen Liste + Alles-gelesen. */
.notif-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 14px; border-top: 1px solid var(--border); }
.notif-foot a { font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.notif-foot a:hover { text-decoration: underline; }
.notif-foot-read { border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--muted); }
.notif-foot-read:hover { color: var(--text); text-decoration: underline; }
/* Seite „Alle Benachrichtigungen" (Redesign 2026-07-18): volle Inhaltsbreite,
   Tages-Gruppen, kompakte Zeilen — Typ-Icon | Titel + Kurztext | Zeit rechts,
   ungelesen = Punkt + fetter Titel; Zeilen-Klick öffnet das Ziel. */
.npage-card { padding: 0; overflow: hidden; }
.npage-day { margin: 0; padding: 10px 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--border); }
.npage-list { display: flex; flex-direction: column; }
.npage-row { display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); padding-right: 10px; }
.npage-row:last-child { border-bottom: 0; }
.npage-row:hover { background: var(--bg); }
.npage-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  gap: 12px; padding: 10px 0 10px 16px; text-decoration: none; color: var(--text); }
.npage-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px;
  height: 34px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); }
.npage-icon svg { width: 17px; height: 17px; }
.npage-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.npage-title { display: flex; align-items: baseline; gap: 7px; min-width: 0;
  font-size: 13.5px; }
.npage-title strong { white-space: nowrap; }
.npage-doc { color: var(--primary-ink, var(--muted)); font-weight: 600; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npage-excerpt { font-size: 12.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.npage-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary, #a3b812); align-self: center; }
.npage-time { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.npage-read { flex: 0 0 auto; }
@media (max-width: 700px) {
  .npage-excerpt { white-space: normal; }
  .npage-time { display: none; }
}

/* ── Global quick-create ("+ Neu") ── */
.quick-create { position: relative; }
.qc-btn { display: flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); border: none; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.qc-btn:hover { background: var(--primary-dark); }
.qc-plus { font-size: 18px; line-height: 1; font-weight: 800; }
.qc-caret { width: 12px; height: 12px; flex: 0 0 12px; color: var(--on-primary); }
.qc-menu { position: absolute; left: 0; top: 50px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); min-width: 230px; overflow: hidden; padding: 6px 0; z-index: 20; }
.qc-group { padding: 12px 14px 4px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.qc-item { display: block; padding: 9px 14px; color: var(--text); text-decoration: none; font-size: 14px; }
.qc-item:hover { background: var(--bg); color: var(--primary-ink); }

/* ── Content ── */
/* Owner-Regel: JEDE Maske nutzt die volle Breite — hier steht bewusst kein
   max-width. Wer eine Zeilenlaenge begrenzen will, macht das an der Karte
   oder am Textblock, nicht am Seiten-Container. */
.content { margin: 0; padding: 28px 32px 64px; width: 100%; }
.page-head h1 { margin: 0 0 4px; font-size: 24px; }
.page-head .muted { margin: 0 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.card h2 { margin: 0 0 14px; font-size: 16px; }
.card-wide { grid-column: 1 / -1; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 0; }
/* Schmale Panel-Variante (Abo-Aside): kompakte Zeilen, kleiner Font. */
.kv--tight { grid-template-columns: 106px 1fr; gap: 5px 10px; font-size: 12.5px; }
.kv--tight dt { color: var(--muted); }
.kv--tight dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 8px 8px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.row-muted td { opacity: .65; }
code { background: var(--bg); padding: 2px 8px; border-radius: 6px; font-size: 13px; }
/* Nummern in Tabellen (Kundennr., Belegnummern, Vorschau-Kreise): normale
   UI-Schrift mit Tabellenziffern statt Monospace-Pill (Owner-Vorgabe). */
.data-table code, .table code, .lv-table code {
  background: none; padding: 0; border-radius: 0;
  font-family: inherit; font-size: inherit;
  font-variant-numeric: tabular-nums;
}

.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--off-bg); color: var(--off-fg); }
.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-off { background: var(--off-bg); color: var(--off-fg); }
.badge-addon { background: var(--addon-bg); color: var(--addon-fg); }
.badge-planned { background: var(--plan-bg); color: var(--plan-fg); }

.alert { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.alert-error { background: #fdecec; color: #b42318; border: 1px solid #f6c9c4; }
.alert-success { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid #b6e3c6; }
.alert-warning { background: var(--plan-bg); color: var(--plan-fg); border: 1px solid #f3d9a8; }
.alert-info { background: var(--st-info-bg); color: var(--st-info-fg); border: 1px solid #bcd9f7; }

/* ── Placeholder pages (menu items not built yet) ── */
.placeholder-card { max-width: 660px; }
.placeholder-flag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--plan-fg); background: var(--plan-bg); padding: 3px 11px; border-radius: 999px; margin-bottom: 14px; }
.placeholder-desc { font-size: 15px; margin: 0 0 14px; }
.placeholder-gate { margin: 0 0 14px; }
.placeholder-note { color: var(--muted); font-size: 13px; margin: 14px 0 0; }

/* ── Forms ── */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field input[type="password"],
.form-field input:not([type]),
.form-field textarea,
.form-field select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: #fff;
}
/* Datums-/Zahlenfelder an die übrigen Felder angleichen: gleiche Höhe, kein
   Monospace, der native Kalender-/Spinner-Button rechts in Markenfarbe. */
.form-field input[type="date"],
.form-field input[type="number"] {
  -webkit-appearance: none; appearance: none; min-height: 40px;
  font-variant-numeric: tabular-nums;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity .12s ease;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form-field input[type="date"]::-webkit-datetime-edit { color: var(--text); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: 2px solid var(--addon-bg); border-color: var(--primary);
}
.form-field .errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: #b42318; font-size: 13px; }
.form-field small { display: block; margin-top: 4px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
/* Kein width:auto mehr auf label.check input — die globalen Form-Controls
   (Dateiende) geben Checkboxen/Radios ihre feste 16px-Größe; width:auto
   gewann per Spezifität und quetschte die Custom-Checkbox auf 3px. */

/* ── Beleg-Erfassung (eigenständig, ruhig, einspaltig) ─────────────────── */
.bf { max-width: 880px; }

/* Kopfzeile mit Aktionen */
.bf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px; }
.bf-head h1 { margin: 0; font-size: 24px; }
.bf-head-actions { display: flex; align-items: center; gap: 10px; }
.bf-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.bf-btn svg { flex: none; }
.bf-btn-ghost { background: var(--surface); border-color: var(--border); color: var(--muted); }
.bf-btn-ghost:hover { border-color: #d9b3b1; color: #c2453f; }
.bf-btn-outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.bf-btn-outline:hover { background: var(--surface-2); }
.bf-btn-primary { background: var(--primary); color: var(--on-primary); padding: 10px 22px; }
.bf-btn-primary:hover { background: var(--primary-dark); }

.bf-note { background: #fdf6e9; border: 1px solid #f0dcb0; color: #7a5b00; margin-bottom: 20px; }

/* Karten-Sektion */
.bf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 18px; }
.bf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 16px; }
.bf-card-head h2 { margin: 0; font-size: 15px; }

/* Schlichte Radio-Reihe statt Segment-Umschalter */
.bf-radios { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bf-radios.bf-radios-sm { gap: 16px; }
.bf-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer; }
.bf-radio input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.bf-radios-label { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Kompaktes Upload-Feld (eine Zeile statt großer Dropzone) */
.bf-upload { display: flex; align-items: center; gap: 14px; width: 100%;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 14px 16px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.bf-upload:hover, .bf-upload.dragover { border-color: var(--primary); background: var(--primary-softer); }
.bf-upload-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 10px; background: var(--primary-soft); color: var(--primary-dark); }
.bf-upload-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.bf-upload-text strong { color: var(--primary-dark); }
.bf-upload-text small { color: var(--muted); font-size: 12.5px; }
.bf-upload-cta { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 7px 13px; background: var(--surface); }

/* Kompakte Vorschau (Bearbeiten mit vorhandener Datei) */
.bf-preview { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); }
.bf-preview-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.bf-preview-main { flex: 1; min-width: 0; }
.bf-preview-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-preview-actions { display: flex; gap: 16px; align-items: center; margin-top: 3px; font-size: 13px; }

.bf-link { color: var(--primary-dark); font-weight: 600; cursor: pointer; background: none; border: none;
  padding: 0; font: inherit; text-decoration: none; }
.bf-link:hover { text-decoration: underline; }
.bf-link-danger { color: #c2453f; }

/* Felder */
.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.bf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf-field-wide { grid-column: 1 / -1; }
.bf-label { font-size: 13px; font-weight: 600; color: var(--text); }
.bf-label .req { color: #c2453f; }
.bf-field input[type=text], .bf-field input[type=date], .bf-field input[type=number],
.bf-field select, .bf-field textarea, .bf-grid input, .bf-grid select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; background: var(--surface); }
.bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Positionen */
.bf-pos-list { display: flex; flex-direction: column; gap: 12px; }
.bf-pos { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); }
/* 2d: kompaktere Position — Kategorie/Artikel/Beschreibung/Betrag/USt enger in
   einer Zeile (12-Spalten-Raster, das auf schmalen Screens umbricht). */
.bf-pos-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 14px; align-items: end; }
.bf-pos-grid > .bf-field:nth-child(1) { grid-column: span 4; }  /* Kategorie */
.bf-pos-grid > .bf-field:nth-child(2) { grid-column: span 3; }  /* Artikel */
.bf-pos-grid > .bf-field:nth-child(3) { grid-column: span 5; }  /* Beschreibung */
.bf-pos-grid > .bf-field:nth-child(4) { grid-column: span 8; }  /* Betrag */
.bf-pos-grid > .bf-field:nth-child(5) { grid-column: span 4; }  /* USt */
.bf-pos-grid .bf-label { font-size: 12px; }
.bf-pos-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px;
  padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.bf-amount { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface); }
.bf-amount:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.bf-amount .bf-cur { display: inline-flex; align-items: center; padding: 0 11px; background: var(--surface-2);
  color: var(--muted); font-size: 12px; font-weight: 700; border-right: 1px solid var(--border); }
.bf-amount input { border: none !important; box-shadow: none !important; border-radius: 0; text-align: right; }
.bf-add { margin-top: 16px; }

.bf-sums { margin-top: 20px; margin-left: auto; max-width: 320px; display: flex; flex-direction: column; gap: 6px; }
.bf-sum-row { display: flex; justify-content: space-between; font-size: 14px; }
.bf-sum-total { font-weight: 700; font-size: 16px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }

.bf-scan-hint { margin-top: 4px; }

/* Schlanke Upload-Zeile (EK-Beleg-Editor): Dropzone + OCR-Button nebeneinander. */
.bf-upload-row { display: flex; align-items: center; gap: 12px;
  margin-top: 14px; margin-bottom: 18px; }
.bf-upload-row .bf-upload { margin: 0; width: auto; flex: 1; min-width: 0; }
.bf-upload--slim { padding: 8px 12px; gap: 10px; }
.bf-upload--slim .bf-upload-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; }
.bf-upload--slim .bf-upload-text { flex-direction: row; align-items: baseline; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-upload--slim .bf-upload-cta { padding: 5px 11px; }
.bf-upload-row .btn { flex: 0 0 auto; }

/* Kassa-Auswahl in der Zahlung-Radiozeile (nur bei mehreren Kassen sichtbar). */
.bf-kassa-select select { width: auto; min-width: 170px; padding: 7px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; background: var(--surface); }

/* „Weitere Angaben" als eingeklappte Sektion: das inv-dunning-Collapse-Muster,
   aber als alleiniger Karteninhalt ohne Trennlinie darüber. */
.ek-more { margin-top: 0; padding-top: 0; border-top: 0; }
.ek-more > .bf-radios { margin-top: 12px; }

@media (max-width: 720px) {
  .bf-grid { grid-template-columns: 1fr; }
  .bf-pos-grid { grid-template-columns: 1fr 1fr; }
  .bf-pos-grid > .bf-field:nth-child(n) { grid-column: span 2; }
  .bf-pos-grid > .bf-field:nth-child(4),
  .bf-pos-grid > .bf-field:nth-child(5) { grid-column: span 1; }
  .bf-upload { flex-wrap: wrap; }
}

/* ── Tabs ── */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; margin-bottom: -1px; cursor: pointer; font: inherit;
  font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary-ink); border-bottom-color: var(--primary); }
.tab-count { background: var(--addon-bg); color: var(--addon-fg); font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--plan-fg); opacity: .5; }

.empty-module { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0; }
.empty-module p { margin: 0; max-width: 540px; }

/* ── Timeline ── */
.timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.timeline-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-item.is-done { opacity: .6; }
.timeline-kind { flex: 0 0 auto; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--off-bg); color: var(--off-fg); }
.kind-note { background: var(--off-bg); color: var(--off-fg); }
.kind-call { background: #e8eef0; color: #3a5a66; }
.kind-email { background: var(--primary-soft); color: var(--addon-fg); }
.kind-task { background: var(--plan-bg); color: var(--plan-fg); }
.timeline-body { flex: 1; min-width: 0; }
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline-actions { flex: 0 0 auto; display: flex; gap: 10px; align-items: flex-start; }
.link-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--primary-ink); }
.link-btn:hover { text-decoration: underline; }
.link-danger { color: #b42318; }

/* ── Login ── */
.login-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--primary-softer), var(--bg)); }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 32px; width: 360px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand h1 { font-size: 20px; margin: 0; }
.login-sub { color: var(--muted); margin: 8px 0 20px; }
.login-card label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.login-card input:focus { outline: 2px solid var(--addon-bg); border-color: var(--primary); }
.btn-primary { width: 100%; margin-top: 22px; background: var(--primary); color: var(--on-primary); border: none; padding: 11px; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer; }
.btn-primary:hover { background: var(--primary-dark); }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .user-name { display: none; }
}

/* ── Abgleich-Cockpit (Bank) ──────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Datumsbereich-Picker (core/datepicker.js, [data-daterange]) ──────────
   Ein Feld „Zeitraum" öffnet ein Kalender-Popover im App-Stil: Schnellwahlen
   links, 2-Monats-Ansicht, Bereich als durchgehender Balken, Von/Bis in
   var(--primary). Wiederverwendbar auf allen Listen-Filterleisten. */
.drp { position: relative; display: inline-flex; }
.drp-display { width: 210px; cursor: pointer; }
.drp-display::placeholder { color: var(--muted); }
/* Fixed statt absolute: das Popover wird per JS (datepicker.js position())
   am Feld verankert und am Viewport geklemmt — kein Karten-/Overflow-Clipping,
   der Kalender ist immer vollständig sichtbar. visibility:hidden bis die
   Koordinaten gesetzt sind (kein Aufblitzen links oben). */
.drp-pop { position: fixed; z-index: 1000; visibility: hidden;
  display: flex; align-items: stretch;
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 35, 28, .16); }
.drp-quick { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  border-right: 1px solid var(--border); min-width: 128px; }
.drp-quick-btn { border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--text); text-align: left; padding: 6px 10px;
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.drp-quick-btn:hover { background: var(--surface-2, #f4f4f2); }
.drp-quick-btn.is-active { background: var(--primary-softer, #f1f6da);
  color: var(--primary-ink, var(--text)); font-weight: 600; }
.drp-main { position: relative; display: flex; flex-direction: column;
  padding: 10px 12px 12px; }
.drp-nav { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1;
  display: flex; justify-content: space-between; pointer-events: none; }
.drp-nav-btn { pointer-events: auto; border: 1px solid var(--border);
  background: var(--surface, #fff); color: var(--muted); width: 26px; height: 26px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1; }
.drp-nav-btn:hover { border-color: var(--primary); color: var(--text); }
.drp-cals { display: flex; gap: 18px; }
.drp-month { width: 224px; }
.drp-month-head { text-align: center; font-size: 13px; font-weight: 600;
  color: var(--text); padding: 6px 0 8px; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px 0;
  justify-content: center; }
.drp-wd { font-size: 11px; font-weight: 600; color: var(--muted);
  text-align: center; padding: 3px 0 5px; text-transform: uppercase; }
.drp-day { border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--text); width: 30px; height: 28px; cursor: pointer;
  border-radius: var(--radius-sm); }
.drp-day:hover { background: var(--surface-2, #f4f4f2); }
.drp-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); }
/* Bereich = durchgehender Balken; Von/Bis = kräftige Kanten in Markenfarbe. */
.drp-day.is-range { background: var(--primary-softer, #f1f6da); border-radius: 0; }
.drp-day.is-edge { background: var(--primary); color: var(--on-primary, #fff);
  border-radius: var(--radius-sm); }
.drp-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--border); }
.drp-foot .drp-hint { font-size: 13px; color: var(--muted); margin-right: auto; }
@media (max-width: 720px) {
  .drp-pop { flex-direction: column; }
  .drp-quick { flex-direction: row; flex-wrap: wrap; border-right: 0;
    border-bottom: 1px solid var(--border); }
  .drp-cals { flex-direction: column; }
}

/* ── Beleg-Lightbox (rw-overlay.js) ────────────────────────────────────
   Bewusst global und nicht `.rw-ed`-gescopt: rw-overlay.js hängt die Box an
   `.rw-ed` ODER an den Body, und der Bank-Abgleich lädt rw-editor.css nicht. */
.rw-pdf-lightbox { position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 28px; }
.rw-pdf-lightbox .lb-backdrop { position: absolute; inset: 0;
  background: rgba(16, 24, 20, .58); }
/* Breite: 880 px waren auf einem großen Monitor ein schmaler Streifen mitten im
   Bild (Owner 28.07., Bank-Transaktionen). Die Box darf so breit werden, wie
   eine Belegseite bei voller Fensterhöhe überhaupt wird — mehr wäre nur weißer
   Rand daneben. 190 px sind Kopf- und Werkzeugzeile, Bühnenrand und
   Außenabstand; 0.8 deckt A4 (0,707) und US Letter (0,773) ab, damit auch
   amerikanische Lieferantenrechnungen die volle Höhe nutzen. Der 1400er Deckel
   bremst sehr hohe Fenster. */
.rw-pdf-lightbox .lb-box { position: relative; z-index: 1;
  width: min(1400px, max(880px, (100vh - 190px) * 0.8), 100%);
  height: 100%; background: #fff; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 48px rgba(16,24,20,.34); }
.rw-pdf-lightbox .lb-h { display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); font-weight: 700; }
.rw-pdf-lightbox .lb-h .lb-t { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rw-pdf-lightbox .lb-h .lb-sp { margin-left: auto; display: flex; gap: 8px;
  flex: none; }

/* Werkzeugzeile des eigenen Renderers — nur sichtbar, wenn wir wirklich selbst
   zeichnen (bei Bildern und im Notnagel-Rahmen bleibt sie ausgeblendet). */
.rw-pdf-lightbox .lb-tools { display: flex; align-items: center; gap: 14px;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg, #f7f9f7); font-size: 13px; }
.rw-pdf-lightbox .lb-tools[hidden] { display: none; }
.rw-pdf-lightbox .lb-seg { display: inline-flex; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; }
.rw-pdf-lightbox .lb-seg button { border: 0; background: #fff; cursor: pointer;
  padding: 5px 11px; font: inherit; color: var(--muted, #6b7770); }
.rw-pdf-lightbox .lb-seg button + button { border-left: 1px solid var(--border); }
.rw-pdf-lightbox .lb-seg button.on { background: var(--accent-soft, #e8f3ec);
  color: var(--text, #16211b); font-weight: 600; }
.rw-pdf-lightbox .lb-zoom { display: inline-flex; align-items: center; gap: 4px; }
.rw-pdf-lightbox .lb-zoom button { width: 26px; height: 26px; line-height: 1;
  border: 1px solid var(--border); border-radius: 7px; background: #fff;
  cursor: pointer; font: inherit; }
.rw-pdf-lightbox .lb-zv { min-width: 48px; text-align: center;
  color: var(--muted, #6b7770); font-variant-numeric: tabular-nums; }
.rw-pdf-lightbox .lb-pg { margin-left: auto; color: var(--muted, #6b7770); }

/* Bühne: scrollt, zentriert die Seiten. Die Seitengröße setzt der Renderer als
   Inline-Maß — das Canvas füllt sie zu 100 %, damit ein feiner gezeichnetes
   Bild (devicePixelRatio) nicht größer dargestellt wird als vorgesehen. */
.rw-pdf-lightbox .lb-stage { flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; }
.rw-pdf-lightbox .lb-stage.is-pdf { gap: 14px; padding: 16px;
  background: #f0f2f0; }
.rw-pdf-lightbox .lb-page { flex: none; background: #fff;
  box-shadow: 0 2px 10px rgba(16,24,20,.16); }
.rw-pdf-lightbox .lb-page canvas { display: block; }
.rw-pdf-lightbox .lb-lade { margin: auto; color: var(--muted, #6b7770); }
.rw-pdf-lightbox .lb-img { max-width: 100%; max-height: 100%;
  object-fit: contain; margin: auto; }
.rw-pdf-lightbox iframe { flex: 1; width: 100%; border: 0; }
@keyframes rec-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes rec-spin { to { transform: rotate(360deg); } }

/* ── Zahlungen (Runple-style payments register, full-bleed) ──────────────── */
/* Break out of the centered 1180px content column: this register is full-width. */
.content:has(.pay) { padding: 0; }
.pay {
  display: flex; flex-direction: column; min-height: calc(100vh - 57px);
  background: var(--surface); color: var(--text);
}

/* Top bar: title (left) · tabs (centre) · actions (right) */
.pay-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.pay-bar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pay-bar-title h1 { margin: 0; font-size: 19px; font-weight: 700; }
.pay-bar-icon { width: 22px; height: 22px; color: var(--primary-ink); }
.pay-bar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pay-bar-actions form { margin: 0; }
.pay-sync-hint { font-size: 12px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.pay-act {
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); white-space: nowrap;
}
.pay-act:hover { background: var(--surface-2); }
.pay-act-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); text-decoration: none; }
.pay-act-primary:hover { background: var(--primary-dark); }

/* Centre tab pills */
.pay-tabs { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; }
.pay-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap;
}
.pay-tab:hover { background: var(--surface-2); }
.pay-tab.is-active { background: var(--ink); color: var(--on-ink); }
.pay-tab-count {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--off-bg); color: var(--off-fg);
}
.pay-tab.is-active .pay-tab-count { background: rgba(255,255,255,.22); color: #fff; }

/* Body: full-width table + slim right rail */
.pay-body { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.pay-table-wrap { flex: 1 1 auto; min-width: 0; overflow: auto; }

.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.pay-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 1;
}
.pay-table th.num, .pay-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-th-nr { width: 44px; }
.pay-table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pay-row { cursor: pointer; transition: background .1s ease; }
.pay-row:hover { background: var(--surface-2); }
.pay-row.is-active { background: var(--ink); }
.pay-row.is-active td { color: var(--on-ink); border-bottom-color: var(--ink-2); }
.pay-row.is-active .pay-c-nr,
.pay-row.is-active .pay-c-ref,
.pay-row.is-active .pay-c-date,
.pay-row.is-active .pay-c-created,
.pay-row.is-active .pay-c-note,
.pay-row.is-active .pay-dash { color: var(--on-ink-muted); }

.pay-c-nr { color: var(--muted); font-variant-numeric: tabular-nums; }
.pay-c-id { font-variant-numeric: tabular-nums; font-weight: 600; }
.pay-c-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-c-amount.is-in { color: var(--in-fg); }
.pay-c-amount.is-out { color: var(--out-fg); }
.pay-row.is-active .pay-c-amount.is-in { color: #5fe0a0; }
.pay-row.is-active .pay-c-amount.is-out { color: #ff928c; }
.pay-c-ref, .pay-c-note { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.pay-c-date, .pay-c-created { color: var(--muted); }
.pay-c-partner { display: flex; align-items: center; gap: 9px; }
.pay-partner-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.pay-avatar {
  flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary-dark);
}
.pay-c-acct { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pay-bankchip {
  flex: none; width: 24px; height: 16px; border-radius: 3px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9px; font-weight: 800;
  background: #2f6fdb; color: #fff; letter-spacing: .02em;
}
.pay-doc {
  display: inline-block; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--border); margin-right: 4px;
}
.pay-row.is-active .pay-doc { background: rgba(255,255,255,.12); border-color: #3a4a5d; color: #eef1f5; }
.pay-empty { text-align: center; color: var(--muted); padding: 48px 0; }

.pay-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.pay-badge-pending { background: #eceef1; color: #6b7280; }
.pay-badge-assigned { background: #e7effd; color: #2f6fdb; }
.pay-badge-booked { background: #e3f5ea; color: #1f9d57; }
.pay-badge-cancelled { background: #f1f2f4; color: #9aa1aa; }

.pay-book { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.pay-book-blockiert { background: #eceef1; color: #8a9099; }
.pay-book-bereit { background: #e3f5ea; color: #1f9d57; }
.pay-book-gebucht { background: #1f9d57; color: #fff; }

/* Slim right rail (Rechnung verknüpfen) */
.pay-drawer {
  flex: 0 0 350px; width: 350px; border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; overflow: auto;
}
.pay-drawer form { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; padding: 0 18px 18px; }
.pay-drawer-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; }
.pay-drawer-eyebrow { font-size: 13px; font-weight: 700; }
.pay-drawer-info { font-size: 12px; color: var(--primary-dark); text-decoration: none; }
.pay-drawer-info:hover { text-decoration: underline; }
.pay-drawer-x { margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); text-decoration: none; }
.pay-drawer-x:hover { color: var(--text); }
.pay-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pay-drawer-title { font-size: 16px; font-weight: 700; }
.pay-drawer-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pay-drawer-amount { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-drawer-amount.is-in { color: var(--in-fg); }
.pay-drawer-amount.is-out { color: var(--out-fg); }

.pay-unalloc { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.pay-unalloc span { color: var(--muted); }
.pay-unalloc strong { font-variant-numeric: tabular-nums; }
.pay-unalloc .is-open { color: #e0954f; }
.pay-unalloc .is-done { color: #1f9d57; }
.pay-bar-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 16px; }
.pay-bar-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width .15s ease; }

.pay-cands { display: flex; flex-direction: column; gap: 10px; }
.pay-cand { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease; }
.pay-cand.is-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pay-cand-top { display: flex; align-items: center; gap: 9px; }
.pay-cand-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: var(--plan-bg); color: var(--plan-fg);
}
.pay-cand-id { min-width: 0; flex: 1 1 auto; }
.pay-cand-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-cand-tag { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pay-cand-toggle { flex: none; cursor: pointer; }
.pay-cand-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-link-btn {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); white-space: nowrap;
}
.pay-cand.is-on .pay-link-btn { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pay-cand-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12px; }
.pay-cand-facts > div { display: flex; flex-direction: column; }
.pay-cand-facts span { color: var(--muted); font-size: 11px; }
.pay-cand-facts strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.pay-cand-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.pay-field { display: flex; flex-direction: column; gap: 4px; }
.pay-field label { font-size: 11px; font-weight: 600; color: var(--muted); }
.pay-field select, .pay-field input { padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; font-size: 13px; }
.pay-amt-input { display: flex; align-items: center; gap: 6px; }
.pay-amt-input input { flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; }
.pay-amt-input span { color: var(--muted); }
.pay-conf { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; text-transform: uppercase; letter-spacing: .02em; }
.pay-conf-high { background: #e3f5ea; color: #1f9d57; }
.pay-conf-med { background: #fff3e0; color: #d98324; }
.pay-conf-low { background: #fdeceb; color: #e0564f; }
.pay-conf-ok { background: var(--primary-soft); color: var(--primary-dark); }
.pay-nocands { color: var(--muted); font-size: 13px; padding: 14px 0; }

.pay-booking { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--surface-2); }
.pay-booking-head { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.pay-booking-no { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pay-booking-num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.pay-booking-lines { width: 100%; border-collapse: collapse; font-size: 12px; }
.pay-booking-lines td { padding: 4px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pay-booking-lines td.num { text-align: right; }
.pay-acct-no { color: var(--muted); font-variant-numeric: tabular-nums; }

.pay-drawer-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
.pay-foot-spacer { flex: 1 1 auto; }
.pay-foot-ghost { font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--muted); }
.pay-foot-ghost:hover { background: var(--surface-2); color: var(--text); }
.pay-foot-primary { font-size: 14px; font-weight: 700; padding: 9px 20px; border-radius: 8px; cursor: pointer; border: none; background: var(--primary); color: var(--on-primary); }
.pay-foot-primary:hover { background: var(--primary-dark); }

/* Bottom summary bar (full-width) */
.pay-summary {
  display: flex; align-items: center; gap: 22px; padding: 11px 22px;
  border-top: 1px solid var(--border); background: var(--surface); font-size: 13px;
}
.pay-sum-label { font-weight: 700; }
.pay-sum-n { color: var(--muted); }
.pay-sum-in strong { color: var(--in-fg); font-variant-numeric: tabular-nums; }
.pay-sum-out strong { color: var(--out-fg); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .pay-bar { grid-template-columns: 1fr; gap: 10px; }
  .pay-bar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .pay-body { flex-direction: column; }
  .pay-drawer { flex-basis: auto; width: 100%; border-left: none; border-top: 1px solid var(--border); }
}

/* ── Rechnungs-Editor (Mix-Layout: WYSIWYG links + Info/Statistik rechts) ── */
/* Alle Redesign-Masken (.rw = Wurzelklasse der neuen Masken: Listen, Beleg-
   Editor, Kundenakte, Einkauf) nutzen die volle Breite — sonst greift der
   1180px-Deckel von .content und die Maske klebt auf Breitbild links. */
.inv-editor { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 24px; align-items: start; }
/* Responsiv: auf 14"-Notebooks u. Ä. schmalere Aside, auf kleinen Screens
   unter die Positionen gestapelt – so behalten die Positionen auf jedem Gerät
   genug Breite (Owner-Feedback 14" MacBook). */
@media (max-width: 1400px) { .inv-editor { grid-template-columns: minmax(0, 1fr) 236px; gap: 18px; } }
@media (max-width: 1180px) {
  .inv-editor { grid-template-columns: minmax(0, 1fr); }
  .inv-aside { position: static; top: auto; }
}
.inv-main { min-width: 0; }
.inv-main .page-head h1 { margin-bottom: 4px; }

.inv-head-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.inv-head-grid .form-field { margin-bottom: 14px; }

/* ── Kompakter Beleg-Editor (immer aktiv, nicht erst bei kleinen Screens) ──
   Der Editor war im Vergleich zu weclapp/sevDesk bei 100 % Zoom zu luftig.
   Diese Regeln straffen Felder, Tabellenzeilen, Karten-Innenabstände und
   Schriftgrößen generell – unabhängig von der Viewport-Breite. */
.inv-editor { font-size: 14px; }
.inv-editor .form-field { margin-bottom: 10px; }
.inv-editor .form-field > label,
.inv-editor .form-field label:first-child { font-size: 12px; margin-bottom: 3px; }
.inv-editor .form-field input[type="text"],
.inv-editor .form-field input[type="email"],
.inv-editor .form-field input[type="url"],
.inv-editor .form-field input[type="tel"],
.inv-editor .form-field input[type="date"],
.inv-editor .form-field input[type="number"],
.inv-editor .form-field input[type="password"],
.inv-editor .form-field input:not([type]),
.inv-editor .form-field select,
.inv-editor .inv-prod-search {
  padding: 6px 9px; font-size: 13.5px; border-radius: var(--radius-sm);
  /* Einheitliche Höhe für ALLE Kopf-Felder (Text, Select, Datum). Datums-
     Inputs rendern sonst höher als Selects/Textfelder — box-sizing + feste
     min-height gleichen das aus, damit der Belegkopf bündige Zeilen hat. */
  min-height: 36px; box-sizing: border-box;
}
.inv-editor .form-field input[type="date"],
.inv-editor .form-field input[type="number"] { min-height: 36px; }
.inv-editor .inv-head-grid .form-field { margin-bottom: 9px; }
/* Positionstabelle straffen */
.inv-editor .inv-line-table th { padding: 5px 5px; font-size: 11px; }
.inv-editor .inv-line-table td { padding: 5px 5px; }
.inv-editor .inv-line-table input,
.inv-editor .inv-line-table select,
.inv-editor .inv-line-table .inv-prod-search,
.inv-editor .inv-line-table .line-net {
  height: 36px; min-height: 36px; box-sizing: border-box;
  font-size: 13px; padding: 5px 8px;
}
.inv-editor .inv-line-table .line-net { padding: 0 8px; }
.inv-editor .inv-line-table .col-del { padding-top: 11px; }
.inv-editor .inv-line-table .col-drag { padding-top: 9px; }
/* Karten-Innenabstände kompakter */
.inv-editor .inv-card > h2 { font-size: 11px; padding-top: 8px; padding-bottom: 8px; }
.inv-editor .inv-card > *:not(h2) { margin-left: 16px; margin-right: 16px; }
.inv-editor .inv-card > .inv-head-grid { padding: 12px 0; }
.inv-editor .inv-card > .inv-lines { padding: 4px 16px 0; }
.inv-editor .inv-card > .form-field { padding: 12px 0; }
.inv-editor .inv-card > .form-field:last-child { padding-bottom: 12px; }
.inv-editor .inv-cond-grid { padding: 12px 0; }
.inv-editor .inv-cond-grid .form-field { margin-bottom: 9px; }
/* Rich-Text-/Notizfelder niedriger */
.inv-editor .rt-area { min-height: 64px; padding: 7px 10px; }
.inv-editor textarea { min-height: 70px; }
.inv-editor .rt-btn { padding: 3px 7px; font-size: 12px; }
/* Karten-Abstand untereinander etwas verringern */
.inv-editor .inv-main .card + .card,
.inv-editor .inv-main > .card { margin-bottom: 14px; }

/* Abweichende Lieferadresse — Umschalter + zwei Spalten */
.inv-ship-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; color: var(--text); }
.inv-ship-toggle input { width: 16px; height: 16px; accent-color: var(--secondary); cursor: pointer; }
.inv-ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.inv-ship-grid .form-field { margin-bottom: 4px; }
@media (max-width: 860px) { .inv-ship-grid { grid-template-columns: 1fr; } }

/* Konditionen & Steuerung — drei kompakte Spalten */
.inv-cond-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 22px; padding: 18px 0; }
.inv-cond-grid .form-field { margin-bottom: 14px; }
.inv-cond-grid .cond-select,
.inv-cond-grid .cond-num { width: 100%; }
.inv-cond-grid .cond-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Positionstabelle */
.inv-lines { overflow-x: auto; }
/* Mindestbreite: unter Platzdruck quetschte table-layout:fixed die
   Zahlenspalten (USt/Gesamt) — lieber horizontal scrollen (.inv-lines). */
.inv-line-table { table-layout: fixed; min-width: 920px; }
.inv-line-table th.num, .inv-line-table td.num { text-align: right; }
.inv-line-table th { padding: 8px 6px; }
.inv-line-table td { padding: 8px 6px; vertical-align: top; }
.inv-line-table .col-qty { width: 76px; }
.inv-line-table .col-unit { width: 84px; }
.inv-line-table .col-price { width: 120px; }
.inv-line-table .col-disc { width: 84px; }
.inv-line-table .col-tax { width: 84px; }
.inv-line-table .col-net { width: 112px; }
/* Kopfzellen nie in die Nachbarspalte laufen lassen („RABATT %UST"). */
.inv-line-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Abo-Positionen-Editor (recurring_schedule_positions) ──
   Eigene Spaltenmaße: Produkt/Erlöskonto begrenzt statt je ⅓ der Breite,
   Zahlenspalten breit genug für „2.000,00" und rechtsbündig — vorher
   wurden Menge/Preis im Input abgeschnitten. */
#abo-line-table { table-layout: fixed; }
/* Bezeichnung trägt keine feste Breite und bekommt den Rest — die festen
   Spalten müssen zusammen deutlich unter der Kartenbreite bleiben. */
#abo-line-table .col-prod { width: 180px; }
#abo-line-table .col-qty { width: 70px; }
#abo-line-table .col-unit { width: 60px; }
#abo-line-table .col-price { width: 104px; }
#abo-line-table .col-disc { width: 84px; }
#abo-line-table .col-tax { width: 76px; }
#abo-line-table .col-del { width: 26px; }
#abo-line-table input, #abo-line-table select { width: 100%; min-width: 0; }
#abo-line-table .col-qty input,
#abo-line-table .col-price input,
#abo-line-table .col-disc input { text-align: right; }
/* Spinner der number-Inputs kosten ~20px Innenbreite — weg damit. */
#abo-line-table input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
#abo-line-table input[type="number"]::-webkit-outer-spin-button,
#abo-line-table input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#abo-line-table tbody tr { border-top: 1px solid var(--border); }
#abo-line-table tbody tr:first-child { border-top: 0; }
.inv-line-table .col-tax { width: 70px; }
.inv-line-table .col-net { width: 92px; font-variant-numeric: tabular-nums; }
.inv-line-table .col-del { width: 30px; text-align: center; padding-top: 14px; }
.inv-line-table .col-drag { width: 34px; text-align: center; padding-top: 12px; }
/* Sichtbare Positionsnummer über dem Verschiebe-Griff. */
.line-no {
  display: block; font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--muted, #8a8a8a); font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.line-no:empty { display: none; }
/* Lokalisierte Zahlenfelder (Menge/Einzelpreis/Rabatt) rechtsbündig wie die
   berechnete Netto-Spalte — bessere Lesbarkeit von „1.200,00". */
.inv-line-table td.num input { text-align: right; font-variant-numeric: tabular-nums; }
/* Griff zum Verschieben der Position (Drag&Drop). */
.line-drag {
  cursor: grab; border: none; background: none; color: var(--muted, #8a8a8a);
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: var(--radius-sm);
  touch-action: none; user-select: none;
}
.line-drag:hover { color: var(--text); background: var(--surface-2, #f1f1ef); }
.line-drag:active { cursor: grabbing; }
.inv-line-row.is-dragging { opacity: .55; background: var(--surface-2, #f5f5f3); }
.inv-line-table input, .inv-line-table select {
  width: 100%; height: 38px; padding: 8px 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; background: var(--surface);
  box-sizing: border-box; vertical-align: top;
}
.inv-line-table input:focus, .inv-line-table select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
.inv-line-table .col-desc input[type="text"] { margin-bottom: 6px; }
.inv-line-konto .konto-display { padding: 6px 9px; font-size: 13px; }
.inv-line-konto .konto-num { font-size: 10px; }
/* Berechnete Zeilensumme als gerahmtes Read-only-Feld – gleiche Höhe/Optik wie
   die Eingabefelder daneben (Menge/Einzel netto/Rabatt), nur nicht editierbar.
   So sehen alle Felder einer Zeile einheitlich aus statt freistehendem Text. */
.inv-line-table .line-net {
  display: flex; align-items: center; justify-content: flex-end;
  box-sizing: border-box; height: 38px; padding: 0 9px; text-align: right;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2, #f5f5f3); color: var(--text);
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Produkt + Bezeichnung gestapelt in einer Zelle. Die Spalte ist die einzige
   flexible — ohne Begrenzung würde sie die gesamte Restbreite schlucken und
   das Suchfeld unnötig breit machen. Deshalb Spalte UND Feld deckeln. */
/* Produkt-Spalte gedeckelt (Owner 2026-07-16: „warum so breit?"): 38 % der
   Tabelle statt der gesamten Restbreite — die Zahlenspalten brauchen die Luft. */
.inv-line-table .col-prod { width: 38%; min-width: 300px; }
.inv-line-table .inv-prod-stack { display: flex; flex-direction: column; gap: 6px; max-width: none; }
/* Such- UND Beschreibungsfeld füllen die gesamte Produktspalte (sonst wirkt die
   Bezeichnung schmaler als das Suchfeld darüber). */
.inv-line-table .inv-prod-stack > .prod-combo,
.inv-line-table .inv-prod-stack > .rt,
.inv-line-table .inv-prod-stack > select,
.inv-line-table .inv-prod-stack > textarea,
.inv-line-table .inv-prod-stack .inv-prod-search { width: 100%; }
.inv-line-table .inv-prod-hidden { display: none; }
.inv-line-hint { align-self: center; }

/* Produkt-Auswahl: eigenes, hübsches Dropdown (statt native <datalist>).
   Tippen filtert, Klick auf den Pfeil klappt die volle Liste auf. */
.prod-combo { position: relative; }
.prod-combo-control { position: relative; display: flex; align-items: center; }
.prod-combo-control .inv-prod-search { width: 100%; padding-right: 30px; }
.prod-combo-arrow {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-left: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 12px; line-height: 1;
  transition: color .12s ease, background .12s ease;
}
.prod-combo-arrow:hover { color: var(--text); background: var(--surface-2); }
.prod-combo.is-open .prod-combo-arrow { transform: none; color: var(--primary); }
.prod-combo.is-open .prod-combo-arrow svg,
.prod-combo.is-open .prod-combo-arrow .prod-combo-caret { transform: rotate(180deg); }
.prod-combo-caret { display: inline-block; transition: transform .15s ease; }
/* Der Caret ist seit 26.07. ueberall derselbe Chevron-SVG (vorher teils ein
   Zeichen „▾"). Ohne Groessenangabe wuerde ein SVG auf seine Default-Groesse
   aufgehen — darum hier verbindlich 14 px, wie es rw-editor.css im Editor
   ohnehin schon setzt. */
.prod-combo-caret svg { width: 14px; height: 14px; display: block; }
/* Fixed (not absolute) so the menu escapes the .inv-lines overflow clipping
   and is never cut off by the section below. JS (lineRow.positionMenu) anchors
   it under the search control and flips it above when space is tight. */
.prod-combo-menu {
  position: fixed; z-index: 1000;
  max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(20, 35, 28, .16);
  padding: 4px;
}
.prod-combo-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 10px; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 7px 10px; border-radius: calc(var(--radius) - 3px); cursor: pointer;
  color: var(--text); font-size: 13px; line-height: 1.3;
}
.prod-combo-item:hover, .prod-combo-item:focus { background: var(--secondary-soft); outline: none; }
.prod-combo-item .prod-combo-art {
  font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.prod-combo-item .prod-combo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-combo-item .prod-combo-price { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-combo-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; }

/* Kundenauswahl als durchsuchbare Combobox (Belegkopf). Das native <select>
   bleibt im DOM (Form-Submit), wird aber ausgeblendet; das Menü ankert hier
   absolut unter dem Suchfeld (kein JS-Positioning wie bei den Positionszeilen). */
.cust-field .inv-prod-hidden { display: none; }
.cust-combo { position: relative; }
.cust-combo .prod-combo-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
}
.cust-combo-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 4px; }
/* „+ Kunde anlegen" bleibt als Fußzeile immer sichtbar, solange die Liste offen
   ist — nicht nur im „Kein Treffer"-Fall. Bei Treffern trennt eine Linie ab. */
.cust-combo-footer { display: flex; padding: 8px 4px 2px; }
.cust-combo .prod-combo-item + .cust-combo-footer,
.cust-combo-empty + .cust-combo-footer { border-top: 1px solid var(--border); margin-top: 4px; }
.cust-combo-footer .inv-add-btn { border: none; cursor: pointer; padding: 7px 14px; }

/* Ansprechpartner-Combobox: eigene, saubere Zeilenaufteilung. Anders als die
   Produkt-/Kundenzeile (Nr. | Name | Preis) zeigt eine Person nur Name + Rolle.
   Name links (füllt, schneidet bei Bedarf ab), Rolle als dezenter Chip rechts –
   so „rutscht" die Rolle nicht mehr in eine leere Produktspalte. */
.person-combo .prod-combo-item.person-item {
  grid-template-columns: 1fr auto; align-items: center; gap: 10px;
}
.person-item .person-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-item .person-role {
  justify-self: end; font-size: 11px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis;
}

/* „Kunde anlegen"-Schnellanlage-Maske (Modal über dem Editor). */
/* Live-Duplikatswarnung im Beleg-Editor (vor dem Speichern). */
.dup-warn { margin: 4px 0 14px; padding: 10px 14px; border-radius: var(--radius);
  background: #fff6e6; border: 1px solid #e6b65c; color: #7a4b00; font-size: 13px;
  line-height: 1.45; }
.dup-warn strong { color: #7a4b00; }
.dup-warn a { color: #7a4b00; font-weight: 600; text-decoration: underline; }

.cust-create-modal { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.cust-create-backdrop { position: absolute; inset: 0; background: rgba(20, 35, 28, .45); }
.cust-create-dialog {
  position: relative; width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(20, 35, 28, .28); padding: 22px 24px;
}
.cust-create-dialog h3 { margin: 0 0 4px; }
.cust-create-dialog .muted { margin: 0 0 16px; font-size: 13px; }
.cust-create-dialog .form-field { margin-bottom: 12px; }
.cust-create-dialog .form-field label { display: block; font-size: 12px; font-weight: 600;
  color: var(--muted); margin-bottom: 4px; }
.cust-create-dialog .form-field input { width: 100%; }
.cust-create-dialog .req { color: #c2453f; }
.cust-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cust-create-grid--plz { grid-template-columns: 120px 1fr; }
.cust-create-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Belegkopf mit Aktionsleiste (PDF/Senden/Umwandeln/Projekt/Löschen) */
/* Fester Abstand unter dem Kopf: beim ANLEGEN gibt es weder Untertitel noch
   Reiterzeile — ohne margin klebte die erste Karte direkt am Titel. */
.inv-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-doc-head .inv-doc-head-title { min-width: 0; }
.inv-doc-head h1 { margin: 0 0 4px; }
.inv-doc-head .muted { margin: 0; }
/* Aktionsmenü rechtsbündig auf Höhe der Überschrift (Angebot AN-…). */
.doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  align-items: flex-start; margin-left: auto; }
.doc-actions .btn { display: inline-flex; align-items: center; }
.doc-actions .doc-wf-form { display: inline-flex; margin: 0; }
.doc-actions .doc-wf-form .btn { width: auto; }
.doc-edit-flag { align-self: center; }

/* Status-Schnellauswahl in der Belegkopf-Leiste (neben „PDF ansehen") */
.doc-status-control { display: inline-flex; align-items: center; gap: 8px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); }
.doc-status-control__label { font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.doc-status-control select { border: 0; background: transparent; padding: 8px 4px;
  font-weight: 600; cursor: pointer; }
.doc-status-control select:focus { outline: none; }

/* Überlauf-Menü „Weitere Aktionen" oben — öffnet nach unten, schwebt über dem Layout */
.doc-act-more { position: relative; }
.doc-act-more > summary { white-space: nowrap; height: 100%; box-sizing: border-box; }
.doc-act-more .inv-act-more-list { position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 35, 28, .16);
  padding: 6px; z-index: 30; }
.doc-act-more .doc-action-form { display: block; margin: 0; }
.doc-act-more .inv-act-link { white-space: nowrap; }

/* Menüleiste oben rechts auf Höhe der Überschrift: Aktionen · Nachrichten · Verlauf.
   Sitzt im selben Flex-Lauf wie Titel + Primär-CTA (kein eigener Vollbreiten-Streifen),
   wird durch das margin-left:auto der .doc-actions nach rechts oben geschoben. */
.doc-menu-bar { display: flex; flex-wrap: wrap; gap: 8px;
  align-items: flex-start; justify-content: flex-end; }
.doc-menu-bar > summary, .doc-menu-bar .doc-act-more > summary { cursor: pointer; }
/* Aktionsmenüs in Markengrün hervorheben (grüner Rahmen + lesbares Dunkeloliv). */
.doc-menu-bar .doc-act-more { border-color: var(--secondary); }
.doc-menu-bar .doc-act-more > summary { color: var(--primary-ink); }
.doc-menu-bar .doc-act-more:hover { border-color: var(--primary-ink); }
.doc-menu-bar .doc-act-more:hover > summary,
.doc-menu-bar .doc-act-more[open] > summary { background: var(--primary-soft); }
/* In der Menüleiste öffnen die Panels nach RECHTS-bündig (rechte Kante verankert). */
.doc-menu-bar .doc-act-more .inv-act-more-list { right: 0; left: auto; }

/* Breitere Panels für Nachrichten-Thread und Verlauf-Timeline. */
.doc-menu-panel { width: min(460px, 92vw); max-height: 62vh; overflow: auto; }

/* Ungelesen-Badge am Nachrichten-Menüpunkt. */
.msg-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger, #c0392b); color: #fff; font-size: .72rem;
  font-weight: 600; line-height: 1; vertical-align: middle; }

/* weclapp-artige Ordner-Reiter für die Belegseiten — echte Unterseiten
   (kein Dropdown). Aktiver Reiter sitzt weiß auf der Trennlinie mit grünem
   Akzent oben; inaktive Reiter sind dezent grau. */
.doc-tabs { display: flex; gap: 4px; margin: 18px 0 16px; padding: 0;
  border-bottom: 1px solid var(--border); }
.doc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  white-space: nowrap; border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--off-bg, #f3efe9);
  position: relative; bottom: -1px; cursor: pointer; transition: color .12s, background .12s; }
.doc-tab:hover { color: var(--ink, #2b2b2b); background: var(--primary-softer, #f6fae6); }
.doc-tab.is-active { color: var(--primary-ink, #0a7d0a); background: var(--surface, #fff);
  border-color: var(--primary); border-bottom-color: var(--surface, #fff);
  box-shadow: 0 -2px 0 var(--primary) inset; cursor: default; }
.doc-tab-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--secondary); color: #fff; font-size: .72rem; font-weight: 700;
  line-height: 1; }

/* Zahlungsplan-Seite (Beleg → Zahlungen). Den Abstand zu den Reitern liefert
   seit dem Design-Audit die .doc-tabs-Regel (margin-bottom) selbst. */
.pay-plan-card { margin-top: 0; }
.pay-plan-head { margin-bottom: 14px; }
.pay-plan-head h2 { margin: 0 0 4px; }
.pay-plan-table th, .pay-plan-table td { padding: 10px 12px; vertical-align: middle; }
.pay-plan-table th.num, .pay-plan-table td.num { text-align: right; }
.pay-plan-table tbody tr { border-top: 1px solid var(--border); }
.pay-plan-table .pay-row-rest { background: var(--off-bg, #f8f6f2); }
.pay-plan-table .pay-row-action { text-align: right; white-space: nowrap; }
.pay-plan-table .pay-row-action form { display: inline; margin: 0; }
.pay-plan-table .pay-row-action .btn { width: auto; }
.pay-plan-foot td { border-top: 2px solid var(--border); padding-top: 12px; }
/* Untergeordnete Summenzeilen (fakturiert / offen) ohne eigene Trennlinie,
   damit der Block als zusammenhängende Summen-Sektion wirkt. */
.pay-plan-table .pay-plan-subfoot td { border-top: 0; padding-top: 2px; padding-bottom: 2px; }
.pay-plan-table .pay-plan-subfoot:last-child td { padding-bottom: 12px; }

/* Nachrichten-Thread im Dropdown. */
.doc-menu-panel .msg-thread { display: flex; flex-direction: column; gap: 8px;
  padding: 4px; }
.doc-menu-panel .msg-empty { margin: 4px; }
.doc-menu-panel .msg { border-radius: var(--radius); padding: 8px 10px;
  border: 1px solid var(--border); }
.doc-menu-panel .msg-agency { background: var(--surface-muted, #f3f6f4); }
.doc-menu-panel .msg-customer { background: var(--surface); }
.doc-menu-panel .msg-meta { font-size: .74rem; color: var(--muted); margin-bottom: 3px; }
.doc-menu-panel .msg-body { font-size: .9rem; white-space: normal; }
.doc-menu-panel .msg-reply-form { display: flex; flex-direction: column; gap: 6px;
  padding: 6px 4px 4px; border-top: 1px solid var(--border); margin-top: 6px; }
.doc-menu-panel .msg-reply-form textarea { width: 100%; box-sizing: border-box;
  resize: vertical; }
.doc-menu-panel .msg-reply-form .btn--sm { align-self: flex-end; width: auto;
  padding: 5px 12px; font-size: .85rem; }

/* Verlauf-Timeline ohne eigene Card-Optik im Dropdown. */
.doc-menu-panel--verlauf .act-card { border: none; box-shadow: none; margin: 0;
  padding: 4px; background: transparent; }
.doc-menu-panel--verlauf .act-card > h2,
.doc-menu-panel--verlauf .act-card > .muted { display: none; }

/* Lese-Modus: bei einem versendeten Beleg sind die Felder ausgegraut,
   bis „Bearbeiten" geklickt wird (Speichern-Leiste dann ausgeblendet). */
.inv-editor-wrap.is-readonly .inv-card { opacity: .55; pointer-events: none; }
.inv-editor-wrap.is-readonly .inv-actionbar { display: none; }

/* Abschnitte (Zwischenüberschriften) im Zeilen-Editor */
.inv-line-section td.inv-section-cell {
  background: var(--subtle, #f3f4f6);
  border-top: 1px solid var(--border);
  padding: 7px 8px;
}
.inv-line-section .inv-section-grip {
  display: inline-block; width: 18px; color: var(--muted);
  font-weight: 700; text-align: center; user-select: none;
}
.inv-line-section .inv-section-cell input[type="text"] {
  display: inline-block; width: calc(100% - 26px); margin: 0;
  font-weight: 700; background: var(--surface);
}
.inv-hidden-fields { display: none; }

/* Abo / Wiederkehrend je Position: Chip in der Produktspalte + aufklappbare
   Detailzeile mit Abrechnung/Laufzeit/Leistungszeitraum/Datumsfeldern. */
.inv-abo-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding: 4px 11px; border: 1px solid var(--primary-dark, #6f7d10); border-radius: 999px;
  background: rgba(163, 184, 18, .16); color: var(--primary-dark, #6f7d10);
  font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.4;
}
.inv-abo-chip:hover { background: rgba(163, 184, 18, .28); border-color: var(--primary-dark, #6f7d10); }
.inv-abo-chip .inv-abo-dot { font-size: 13px; line-height: 1; color: var(--primary-dark, #6f7d10); }
/* The base rule sets display:inline-flex, which otherwise overrides the UA
   [hidden] -> display:none. Without this the chip stays visible even when
   JS sets chip.hidden = true (the Abo chip must only show for Abo articles). */
.inv-abo-chip[hidden] { display: none; }
/* Pauschal-Hinweis an einer Position (Artikel mit Abrechnungsart „Pauschal"):
   dezente, nicht klickbare Marke — signalisiert „fester Betrag, Menge-Default 1". */
.inv-flat-chip {
  display: inline-flex; align-items: center; margin-top: 6px; margin-left: 6px;
  padding: 4px 11px; border: 1px solid var(--border, #d5d9dc); border-radius: 999px;
  background: var(--surface-2, #f4f6f7); color: var(--text-muted, #5b6469);
  font-size: 12px; font-weight: 700; line-height: 1.4;
}
.inv-flat-chip[hidden] { display: none; }
/* Lagerinfo unter Menge/Einheit (nur Artikel): Bestand + Lieferzeit. */
.line-stock {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--subtle, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--text, #1f2937); white-space: nowrap;
}
.line-stock[hidden] { display: none; }
/* Grenzrabatt überschritten: das Rabatt-Feld leuchtet rot + Hinweis darunter. */
.inv-line-row input.is-over {
  border-color: var(--out-fg, #d8534b) !important;
  background: var(--out-bg, #fdeceb);
  color: var(--out-fg, #d8534b);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--out-bg, #fdeceb);
}
.disc-warn {
  margin-top: 5px; font-size: 11px; font-weight: 600; line-height: 1.3;
  color: var(--out-fg, #d8534b); text-align: right;
}
.disc-warn[hidden] { display: none; }
.line-stock.is-low {
  color: var(--out-fg, #d8534b);
  background: var(--out-bg, #fdeceb);
  border-color: var(--out-fg, #d8534b);
}
/* Die Detailzeile selbst bleibt transparent — der sichtbare Rahmen ist das
   eingerückte Panel darin, damit klar wird „gehört zu dieser Position". */
.inv-line-abo > td {
  background: transparent;
  border-top: 0;
  padding: 0 12px 12px;
}
/* Eingerücktes Panel/Card unter der Position: heller Karten-Hintergrund,
   Border/Radius im App-Stil, dezenter linker Akzent + Einrückung als Anschluss
   an die Zeile. Gilt für den direkten Wrapper — im Beleg-Editor ist das die
   Grid (Rechnung), im Angebots-Editor die Detailbox (Optional + Abo). */
.inv-line-abo > td > .inv-abo-grid,
.inv-line-abo > td > .inv-line-detail {
  margin-left: 24px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-soft);
  border-radius: var(--radius);
}
/* Ordentliches, ausgerichtetes Grid: 3–4 Spalten je nach Breite, gleiche
   Label-/Feldhöhen wie im übrigen Editor (kein loses Feld im Raum). */
.inv-abo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 14px; align-items: end;
}
.inv-abo-grid .inv-abo-active {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin: 0 0 2px; font-size: 12.5px; font-weight: 600;
}
.inv-abo-grid .form-field { margin: 0; }
.inv-abo-grid .form-field > label {
  display: block; margin: 0 0 3px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); font-weight: 600;
}
.inv-abo-grid input, .inv-abo-grid select {
  width: 100%; height: 36px; min-height: 36px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: var(--surface); box-sizing: border-box;
}
@media (max-width: 720px) {
  .inv-abo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .inv-line-abo > td > .inv-abo-grid,
  .inv-line-abo > td > .inv-line-detail { margin-left: 0; }
}

/* Details-Chip je Position: klappt dieselbe Detailzeile auf wie der Abo-Chip,
   ist aber für jede Position sichtbar (Optional-Schalter steckt im Detail). */
.inv-detail-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; margin-left: 6px;
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1.4;
}
.inv-detail-chip:hover { border-color: var(--text); color: var(--text); }
/* Detailzeile: Optional-Schalter oben, darunter (nur bei Abo) die Abo-Felder. */
.inv-line-detail { display: flex; flex-direction: column; gap: 9px; }
.inv-opt-toggle {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 12.5px; font-weight: 600;
}
.inv-opt-toggle small { font-weight: 400; }
.inv-abo-fields[hidden] { display: none; }
/* Optional markierte Position: dezent abgesetzt + „Optional“-Badge im Hinweis. */
.inv-line-row.is-optional > td { background: rgba(99, 102, 241, .05); }
.inv-opt-flag {
  display: none; margin-top: 6px; margin-left: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--subtle, #f3f4f6); border: 1px dashed var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); vertical-align: middle;
}
.inv-line-row.is-optional .inv-opt-flag { display: inline-block; }
/* Optionale Positionen unter dem Summenblock (eigener Block, nicht in der Summe). */
.inv-opt-block { display: none; }
.inv-opt-block.is-active { display: block; }
.inv-opt-block .inv-opt-line {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 2px 0;
}
.inv-opt-block .inv-opt-line .inv-opt-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Aktionen unter der Positionstabelle: + Position / + Produkt anlegen.
   Beide Buttons gleich groß + etwas Luft zum unteren Kartenrand. */
.inv-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 14px; padding-bottom: 18px; }
.inv-line-actions .inv-add-btn { display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; padding: 9px 16px; min-width: 170px; text-align: center;
  box-sizing: border-box; line-height: 1.2; }

/* Abschnitte in der Detailansicht (Positionstabelle) */
.inv-detail-section td { background: var(--subtle, #f3f4f6); }
.inv-detail-section strong { letter-spacing: .01em; }

/* Rechte Spalte: Sticky-Panel (einklappbar, überlappt nie) */
.inv-aside { position: sticky; top: 20px; display: block; }
/* Ein-/Ausklappknopf sitzt in der oberen rechten Ecke des Infoblocks
   (statt darüber), grüner Pfeil. So beginnt der Infoblock auf gleicher
   Höhe wie der Belegrahmen / die Überschrift. */
.inv-aside-toggle { position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--primary); line-height: 1; }
.inv-aside-toggle:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--surface-2); }
.inv-aside-toggle-label { white-space: nowrap; }
.inv-editor.aside-collapsed { grid-template-columns: minmax(0, 1fr) 40px; }
/* Eingeklappt: schmaler Pill im Hochformat — Pfeil oben, „Infos" senkrecht
   darunter (laufende Schrift von oben nach unten). */
.inv-editor.aside-collapsed .inv-aside-toggle { width: 32px; height: auto;
  flex-direction: column; gap: 7px; padding: 12px 0; border-radius: 999px;
  font-size: 13px; }
.inv-editor.aside-collapsed .inv-aside-toggle-label {
  writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .05em; }
/* ── EK-Beleg-Editor: Odoo-Split mit großer Belegvorschau rechts.
   Breitere rechte Spalte, damit der gescannte Beleg gut lesbar neben dem
   Formular steht (eingeklappt fällt sie wie gehabt auf den schmalen Pill). ── */
.inv-editor.ek-editor { grid-template-columns: minmax(0, 1fr) 480px; }
.inv-editor.ek-editor.aside-collapsed { grid-template-columns: minmax(0, 1fr) 40px; }
/* Kopfzeile der Belegvorschau: rechts Platz für den runden Einklapp-Knopf
   (.inv-aside-toggle, absolut oben rechts) freihalten — vorher lag der Knopf
   ÜBER dem „In neuem Tab ›"-Link. */
.ek-docview .inv-pdf-head { padding-right: 36px; }
.ek-docview-frame { margin: 8px 0 0; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; height: 72vh; min-height: 480px; }
.ek-docview-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ek-docview-img { overflow: auto; text-align: center; }
.ek-docview-img img { max-width: 100%; }
.ek-docview-zoom { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
/* EK-Positionstabelle: nur 6 Spalten → eigene Breiten, damit nichts überläuft.
   (Die VK-Tabelle reserviert col-prod min 460px für die Produkt-Combo; im
   schmaleren EK-Hauptbereich teilen sich Kategorie und Artikel den Platz.) */
/* Owner-Feinschliff 2026-07-15: Kategorie nicht mehr überbreit, Artikel
   brauchbar breit, USt/Betrag/Gesamt mit Luft (Header „Betrag netto" passt
   ohne Ellipse). */
.ek-editor .inv-line-table .col-prod { width: 34%; min-width: 240px; }
.ek-editor .inv-line-table .col-artikel { width: 26%; min-width: 200px; }
.ek-editor .inv-line-table .col-tax { width: 84px; }
.ek-editor .inv-line-table .col-price { width: 132px; }
.ek-editor .inv-line-table .col-net { width: 120px; }
/* Eine Höhe für ALLE Zeilenfelder (Picker-Inputs, natives USt-Select,
   Betrag-Input, Gesamt-Anzeige) — die Kopf-Feld-Regel (min-height 36px)
   und die Combo-Paddings drücken die Picker sonst höher als den Rest. */
.ek-editor .inv-line-table input,
.ek-editor .inv-line-table select,
.ek-editor .inv-line-table .inv-prod-search,
.ek-editor .inv-line-table .prod-combo-control input,
.ek-editor .inv-line-table .line-net {
  height: 38px; min-height: 38px; padding-top: 0; padding-bottom: 0;
  box-sizing: border-box;
}
.ek-editor .inv-line-table .prod-combo-control { height: 38px; }
.ek-editor .inv-ek-desc { margin-top: 6px; }
.ek-editor .inv-ek-desc input,
.ek-editor .inv-ek-desc textarea { width: 100%; }
.ek-editor .inv-line-table .prod-combo { width: 100%; }
.ek-editor .inv-line-table .col-prod select,
.ek-editor .inv-line-table .col-prod input,
.ek-editor .inv-line-table .col-artikel input { width: 100%; }
.inv-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.inv-panel-block { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.inv-panel-block h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.inv-panel-status { display: flex; align-items: center; gap: 10px; }
.inv-panel-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.inv-panel-num-wrap { display: inline-flex; align-items: center; gap: 6px; }
.inv-panel-num-btn { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary-dark, #6c7a12); text-decoration: underline; text-underline-offset: 2px;
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-panel-num-btn:hover { color: var(--text); }
.inv-pdf-dl { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
  color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1; }
.inv-pdf-dl:hover { color: var(--text); border-color: var(--muted); }

/* PDF-Vorschau-Popup (Punkt 4a) */
.pdf-modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.pdf-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 25, .55); }
.pdf-modal-card { position: relative; z-index: 1; background: #fff; border-radius: 12px;
  width: min(900px, 96vw); height: min(90vh, 1100px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.pdf-modal-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pdf-modal-actions { display: inline-flex; align-items: center; gap: 10px; }
.btn--sm { padding: 4px 10px; font-size: 13px; }
.pdf-modal-close { background: none; border: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 0 4px; }
.pdf-modal-close:hover { color: var(--text); }
.pdf-modal-frame { flex: 1; width: 100%; border: none; }
/* „Angebot annehmen"-Popup: gleiche Modal-Hülle wie die PDF-Vorschau, aber an
   den Inhalt angepasst (Höhe nach Inhalt statt fixer iframe-Höhe). */
.accept-modal-card { width: min(720px, 96vw); height: auto; max-height: 90vh; }
.accept-modal-body { padding: 16px; overflow: auto; }
.accept-modal-body .datatable { font-size: 14px; }
.accept-modal-body .datatable th, .accept-modal-body .datatable td { padding: 6px 8px; }
.accept-modal-actions { display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.accept-modal-actions .btn { width: auto; }
.inv-panel-flow { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.inv-panel-flow .is-on { color: var(--primary-dark); font-weight: 700; }

/* Firmenname: normal umbrechen, nur überlange Wörter notfalls im Wort trennen
   (overflow-wrap statt word-break — kein Zwangsumbruch Wort für Wort). */
.inv-panel-customer .inv-cust-name { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none;
  min-width: 0; overflow-wrap: break-word; }
a.inv-cust-name.is-link { cursor: pointer; }
a.inv-cust-name.is-link:hover { color: var(--primary, #a3b812); text-decoration: underline; }
.inv-panel-customer .inv-cust-email { font-variant-numeric: normal; overflow-wrap: anywhere; }
.inv-cust-open { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Kopf mit Name + Kundenscoring-Ampel — bei langem Namen rutscht die Ampel in
   die nächste Zeile statt abgeschnitten zu werden. */
.inv-cust-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; }
.inv-cust-addr { white-space: pre-line; }
/* Adresse als linksbündiger Block über die volle Breite — bricht nicht mehr
   unschön rechtsbündig um (Straße / „PLZ Ort" je eine Zeile). */
.inv-cust-addr-block { display: flex; flex-direction: column; gap: 1px; margin: 8px 0 4px; }
.inv-cust-addr-block .inv-cust-addr-label { color: var(--muted); font-size: 12px; }
.inv-cust-addr-block .inv-cust-addr { color: var(--text); text-align: left; }

/* Kundenscoring (Ampel): rot = überfällig, gelb = offen, grün = zahlt zuverlässig */
.inv-score { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap;
  max-width: 100%; }
/* Sicherheitsnetz: falls das Label („1 überfällig") doch mal breiter als das
   Panel ist, mit Ellipsis kürzen statt hart abzuschneiden. */
.inv-score-label { overflow: hidden; text-overflow: ellipsis; }
.inv-score-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--muted); }
.inv-score-dot.is-red   { background: var(--out-fg, #c2453f); box-shadow: 0 0 0 3px rgba(194,69,63,.15); }
.inv-score-dot.is-amber { background: var(--plan-fg, #c98a1a); box-shadow: 0 0 0 3px rgba(201,138,26,.15); }
.inv-score-dot.is-green { background: var(--success, #1f9d55); box-shadow: 0 0 0 3px rgba(31,157,85,.15); }
.inv-score-dot.is-neutral { background: var(--muted); }

/* ── Kundenscoring-Ampel in Listen (Kontakte, OP-Verwaltung) ── */
/* Shared dot, same colours as the editor's .inv-score-dot. */
.op-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 9px; background: var(--muted); vertical-align: middle; margin-right: 4px; }
/* Ampel: satte Signal-Farben (Owner: „besseres grün, orange und rot"). */
.op-dot.is-red   { background: #e11d2e; box-shadow: 0 0 0 3px rgba(225,29,46,.16); }
.op-dot.is-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.op-dot.is-green { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.op-dot.is-neutral { background: var(--muted); }
.op-ampel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.op-ampel-label { font-size: 12px; }
.badge--muted { background: var(--off-bg); color: var(--muted); margin-left: 6px; font-weight: 600; }
.op-credit { background: rgba(31,157,85,.05); }
.op-credit td:nth-child(5), .op-credit td:nth-child(7) { color: var(--success, #1f9d55); }

/* ── OP-Verwaltung (Debitoren / Offene Posten) ── */
/* Kompakte KPI-Leiste (Owner: „nimmt sehr viel Platz ein"): alle sieben
   Kennzahlen in EINER umbruchfähigen Chip-Reihe statt zwei Karten-Reihen.
   display:contents lässt die Chips beider Gruppen im Flex des Kopfes fließen. */
/* Segmentierte Leisten statt loser Pillen: eine Box für die Kern-KPIs,
   eine für das Aging — Trennstriche statt sieben einzelner Rahmen. */
.op-kpis, .op-aging { display: flex; align-items: stretch; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface, #fff); overflow: hidden;
  flex: 1 1 100%; }
/* Volle Kopf-Breite, gleichmäßig geviertelt (Owner: „besser aufteilen"):
   Label klein oben, Wert darunter — statt vier gestauchter Chips links. */
.op-kpi { background: none; border: 0; border-radius: 0;
  padding: 5px 16px 6px; display: flex; flex-flow: row wrap; align-items: baseline;
  align-content: center; column-gap: 8px; min-width: 0; flex: 1 1 0; }
/* Label als eigene Zeile, Wert + Zusatz („12 Posten") daneben in EINER Zeile —
   sonst treibt die dritte Zeile die ganze Leiste in die Höhe. */
.op-kpi-label { flex: 1 1 100%; }
.op-kpi + .op-kpi { border-left: 1px solid var(--border); }
.op-kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; line-height: 1.4; }
.op-kpi-value { font-size: 14px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-kpi-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.op-kpi--warn .op-kpi-label { color: var(--out-fg, #c2453f); }
.op-kpi--warn .op-kpi-value { color: var(--out-fg, #c2453f); }

.op-age { background: none; border: 0; border-radius: 0;
  padding: 6px 14px; display: flex; flex-direction: row; align-items: center;
  gap: 8px; min-width: 0; }
.op-age + .op-age { border-left: 1px solid var(--border); }
/* Farbpunkt statt Farbrahmen — ruhiger, gleiche Aussage. */
.op-age::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); flex: none; }
.op-age-label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.op-age-val { font-size: 13px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-age--a::before { background: #eab308; }
.op-age--b::before { background: #f59e0b; }
.op-age--c::before { background: #e11d2e; }
.op-overdue { color: var(--out-fg, #c2453f); font-weight: 600; }

/* ── Wiederkehrend-Reiter am Verkaufsbeleg (document_abo) ── */
.abo-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.abo-card-head h2 { margin: 0; }
.abo-card-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.abo-view-table th, .abo-edit-table th { white-space: nowrap; }
.abo-view-table .col-abo-interval { width: 130px; }
.abo-view-table .col-abo-term { width: 110px; }
.abo-view-table .col-abo-date { width: 110px; }
.abo-view-table .col-abo-net { width: 130px; }
.abo-edit-table { table-layout: fixed; }
.abo-edit-table .col-abo-interval { width: 150px; }
.abo-edit-table .col-abo-days { width: 72px; }
.abo-edit-table .col-abo-term { width: 112px; }
.abo-edit-table .col-abo-date { width: 142px; }
.abo-edit-table .col-abo-net { width: 120px; }
.abo-edit-table input, .abo-edit-table select { width: 100%; min-width: 0; }

/* Aktionsleiste der Beleg-Editoren (weclapp-Vorbild, Muster Kundenakte) */
/* Im Beleg-Kopf sitzt die Leiste als Flex-Kind neben dem Titel — die
   Kundenakten-Margins (12px unten, Navtrail-Hochzug) gelten dort nicht.
   Doppelte Klasse schlägt die späteren .akte-actions-Regeln. */
.akte-actions.inv-doc-menubar { margin: 0; }
.akte-rabatt-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 240px; }
.akte-rabatt-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.akte-rabatt-form .input { width: 100%; }
/* ⋯-Aktionsmenü der OP-Zeilen: EIN Knopf statt €/Verrechnen/Mahnen-Reihe. */
.op-act-more { position: relative; display: inline-block; }
/* details.… (Element+Klasse) schlägt die .inv-act-more-Basisregeln (Rahmen/
   Hintergrund am details-Element, ▾-Pfeil, 9/12px-Padding am summary) —
   gleiche Spezifität hätte per Quellreihenfolge verloren (so kamen die
   „Kastl um den Kreis"-Doppelrahmen in den OP-Listen zustande). */
details.op-act-more { border: none; border-radius: 0; background: transparent; }
/* Grüner Umriss-Kreis (Owner 2026-07-24): nur Rahmen grün, NICHT gefüllt.
   Gilt für alle ⋯-Zeilenmenüs (jede Tabelle nutzt .op-act-more). */
details.op-act-more > summary { list-style: none; display: inline-flex; align-items: center;
  justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--primary); background: var(--surface, #fff); color: var(--primary);
  font-weight: 700; cursor: pointer; line-height: 1; user-select: none;
  transition: background .12s, border-color .12s; }
details.op-act-more > summary::after { content: none; }
details.op-act-more > summary::marker { content: ""; }
details.op-act-more > summary::-webkit-details-marker { display: none; }
details.op-act-more > summary:hover, details.op-act-more[open] > summary {
  background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.op-act-more .inv-act-more-list { right: 0; left: auto; min-width: 190px; text-align: left; }
/* Die JS-Hook-Klassen (op-pay-btn/op-details-btn) bringen Icon-Rundknopf-
   Styles mit — im Menü sollen sie wie normale Menüzeilen aussehen. */
.op-act-more .op-pay-btn, .op-act-more .op-details-btn {
  width: 100%; height: auto; border: 0; border-radius: 8px; background: none;
  color: inherit; font-weight: 500; justify-content: flex-start; }
.op-act-more .op-pay-btn:hover, .op-act-more .op-details-btn:hover {
  background: var(--surface-2); color: inherit; border: 0; }
.op-due-today { color: #d99a3a; font-weight: 600; }
/* Auswahl-Summenleiste (Auftrag 2 P6): Σ-Werte in der .lv-selbar */
.op-selsum { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 16px;
  font-weight: 600; font-variant-numeric: tabular-nums; }
.op-selsum-lbl { font-size: 11px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; }
/* „€"-Bezahlung-Icon je OP-Zeile (Auftrag 2 P4) */
.op-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.op-pay-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--accent, #6f7d12); font-weight: 700;
  cursor: pointer; line-height: 1; transition: background .12s, border-color .12s; }
.op-pay-btn:hover { background: var(--accent, #a3b812); border-color: var(--accent, #a3b812); color: #fff; }
/* „⋯"-Details-Icon je OP-Zeile (Auftrag 2 P3) */
.op-details-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-weight: 700; font-size: 15px;
  cursor: pointer; line-height: 1; transition: background .12s, border-color .12s, color .12s; }
.op-details-btn:hover { background: var(--ink, #1c1c1c); border-color: var(--ink, #1c1c1c); color: #fff; }

/* Ratenplan-Editor im OP-Details-Popup (Auftrag 2 P3) */
.op-details-dialog { max-width: 540px; }
.op-plan { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; }
.op-plan-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.op-plan-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.op-plan-row { display: grid; grid-template-columns: 1fr 150px 120px 28px; gap: 6px; align-items: center; }
.op-plan-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; background: var(--surface); width: 100%; }
.op-plan-amount { text-align: right; }
.op-plan-del { border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.op-plan-del:hover { background: #fde7e7; color: #b3261e; }
.op-plan-actions { display: flex; align-items: center; gap: 8px; }
.op-plan-sum { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.op-plan-sum.is-bad { color: #b3261e; }

/* ── Aktivitäts-/Audit-Verlauf am Beleg (Odoo-Chatter) ── */
.act-note-form { display: flex; gap: 10px; align-items: center; margin: 6px 0 18px; }
.act-note-input { flex: 1 1 auto; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: var(--surface); }
.act-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.act-timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border); }
.act-item { position: relative; padding: 0 0 16px 26px; }
.act-item:last-child { padding-bottom: 0; }
.act-dot { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--muted); box-sizing: border-box; }
.act-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.act-kind { font-size: 13px; }
.act-msg { margin-top: 2px; font-size: 13px; }
.act-msg--note { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; display: inline-block; }
.act-actor { margin-top: 2px; }
/* Per-kind dot accents */
.act-created  .act-dot { border-color: var(--muted); }
.act-updated  .act-dot { border-color: #6c8cc7; }
.act-finalized .act-dot { border-color: var(--success, #1f9d55); }
.act-sent     .act-dot { border-color: #6c8cc7; }
.act-status   .act-dot { border-color: var(--plan-fg, #c98a1a); }
.act-credit_note .act-dot { border-color: var(--out-fg, #c2453f); }
.act-note     .act-dot { border-color: var(--ink, #222); background: var(--ink, #222); }
.act-deleted  .act-dot { border-color: var(--out-fg, #c2453f); background: var(--out-fg, #c2453f); }
/* Field-level change diffs in audit entries */
.act-changes { list-style: none; margin: 4px 0 0; padding: 0; }
.act-changes li { padding: 1px 0; color: var(--text, #222); }
.act-field { font-weight: 600; }
.act-old { color: var(--muted); text-decoration: line-through; }
.act-new { color: var(--text, #222); }
.act-arrow { color: var(--muted); margin: 0 2px; }

/* ── Live-PDF-Vorschau im Rechnungseditor (Runple) ── */
.inv-pdf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-pdf-refresh { border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 7px; color: var(--ink); }
.inv-pdf-refresh:hover { background: var(--surface-2); }
.inv-pdf-frame { margin: 8px 0 6px; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2); }
.inv-pdf-frame iframe { display: block; width: 100%; height: 360px; border: 0; background: #fff; }
.inv-pdf-empty { margin: 8px 0 0; }
.inv-pdf-open { display: inline-block; margin-top: 4px; font-size: 12px; text-decoration: none; }

/* Brutto-Hinweisband über der Positions-Tabelle */
.inv-price-hint { display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  padding: 9px 13px; border-radius: var(--radius); font-size: 13px;
  background: var(--secondary-soft); color: var(--primary-ink); border: 1px solid #d7e08a; }
.inv-price-hint .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }

.inv-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 2px 0; }
.inv-sum-row > span:last-child, .inv-sum-row > strong:last-child { text-align: right; }
.inv-sum-row span, .inv-sum-row strong { font-variant-numeric: tabular-nums; }
/* Label/Wert-Zeilen der Kunden-Karte (Kundennr., UID, E-Mail, Telefon):
   bei Platznot in die nächste Zeile umbrechen statt quetschen; lange Werte
   (E-Mail-Adressen) brechen notfalls im Wort statt aus dem Panel zu laufen. */
.inv-panel-customer .inv-sum-row { flex-wrap: wrap; column-gap: 10px; }
.inv-panel-customer .inv-sum-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.inv-sum-rates { margin: 2px 0; }
.inv-sum-rate { color: var(--muted); font-size: 13px; }
.inv-sum-discount { color: var(--primary-dark); font-size: 13px; }
.inv-sum-skonto { color: var(--muted); font-size: 13px; }
.inv-sum-total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 7px; font-size: 15px; }
#scheme-note { color: var(--primary-dark); font-size: 12px; margin: 4px 0 2px; }

.inv-margin-bar { height: 6px; background: var(--off-bg); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.inv-margin-fill { height: 100%; width: 0; background: var(--primary); transition: width .15s, background .15s; }
.inv-margin-pct strong { font-size: 15px; }
.inv-panel-hint { font-size: 12px; margin: 8px 0 0; }

.inv-panel-pdf { display: inline-block; padding: 8px 14px; }
.inv-panel-actions { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--off-bg, #faf8f5); }
.inv-panel-cancel { text-align: center; text-decoration: none; }

/* Aktions-Stack im Panel (Festschreiben prominent, Entwurf sekundär) */
.inv-act-finalize { margin-top: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--success, #1f9d55); }
.inv-act-finalize:hover { background: var(--success-dark, #18834a); }
.btn-ghost { width: 100%; margin-top: 0; padding: 11px; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer;
  background: var(--surface); color: var(--ink, #2b2b2b); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-dark); }

.inv-act-more { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.inv-act-more > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--muted); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.inv-act-more > summary::after { content: "▾"; font-size: 11px; }
.inv-act-more[open] > summary::after { content: "▴"; }
.inv-act-more > summary::-webkit-details-marker { display: none; }
.inv-act-more-list { display: flex; flex-direction: column; padding: 4px; border-top: 1px solid var(--border); }
.inv-act-link { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 6px;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink, #2b2b2b); text-decoration: none; }
.inv-act-link:hover { background: var(--off-bg, #f3efe9); }
.inv-act-link .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .7; }
.inv-act-link-danger { color: var(--out-fg, #c2453f); }
.inv-act-link-danger:hover { background: #fdecec; }
/* „Angebot überarbeiten" im Aktionen-Menü hervorheben (schaltet den Editor frei). */
.inv-act-link-accent { color: var(--brand-ink, #5a6a00); font-weight: 600; }
.inv-act-link-accent:hover { background: var(--brand-bg-soft, #eef3d6); }

/* Schreibschutz-Hinweis nach dem Erzeugen: schmales Info-Band über beide Spalten,
   NICHT ausgegraut. Das eigentliche Sperren macht das `inert`-Attribut auf .inv-main. */
.inv-locked-hint { grid-column: 1 / -1; margin: 0 0 4px; display: flex; align-items: center;
  gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: var(--brand-bg-soft, #eef3d6); color: var(--brand-ink, #5a6a00);
  border: 1px solid var(--brand-border, #d4dfa6); }
.inv-locked-hint__icon { font-size: 13px; }
.inv-locked-hint strong { font-weight: 700; }

/* Karten mit ruhiger Kopfzeile: neutraler Grund + schmaler Sekundär-Grün-Akzent */
.inv-card { padding: 0; overflow: visible; }
.inv-card > h2 { margin: 0; display: flex; align-items: center; gap: 9px;
  background: var(--surface-2);
  color: var(--primary-ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 22px 11px 19px; border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--secondary); border-radius: var(--radius) var(--radius) 0 0; }
.inv-card > h2 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.inv-card > *:not(h2) { margin-left: 22px; margin-right: 22px; }
.inv-card > .inv-head-grid { padding: 18px 0; }
.inv-card > .inv-lines { margin-left: 0; margin-right: 0; padding: 6px 22px 0; }
.inv-card > .form-field { padding: 18px 0; }
.inv-card > .form-field:last-child { padding-bottom: 18px; }

/* Vertikaler Karten-Rhythmus (Audit 2026-07): statische Inhaltsblöcke wie
   dl.kv, Formulare oder Texte bringen keine eigene vertikale Polsterung mit
   (im Editor liefert das .form-field). Ohne sie klebt der Inhalt oben an der
   Kartenkopfzeile und unten am Kartenrand → wirkt zusammengedrückt.
   Gilt für die Lesereiter (.inv-editor-wrap) UND alle Editor-Raster
   (.inv-editor — EK-Beleg, Abo, CRM …); vorher fehlte die Regel überall dort,
   wo kein .inv-editor-wrap-Wrapper existierte (v. a. der EK-Beleg-Editor).
   Ausgenommen: Kinder mit eigener Polsterung (Titelbänder, .form-field,
   .inv-head-grid, Tabellen-Embeds, Finanzen-Sektion, .je-sendbar). */
/* :where() hält die Spezifität beider Regeln bewusst niedrig ((0,2,0)),
   damit sich die Regeln untereinander über die Quellreihenfolge auflösen
   und modul-eigene Polster-Regeln (z. B. .je-*, .abo-kv) gewinnen können. */
.inv-editor-wrap .inv-card > :where(*:not(h2):not(.inv-lines):not(.dt-embed-bar):not(.dt-embed-body):not(.inv-head-grid):not(.form-field):not(.card-head):not(.inv-fin-head):not(.inv-fin-body):not(.je-sendbar):not(.bf-upload):not(.bf-preview):not(.dup-warn):not(.inv-price-hint)),
.inv-editor .inv-card > :where(*:not(h2):not(.inv-lines):not(.dt-embed-bar):not(.dt-embed-body):not(.inv-head-grid):not(.form-field):not(.card-head):not(.inv-fin-head):not(.inv-fin-body):not(.je-sendbar):not(.bf-upload):not(.bf-preview):not(.dup-warn):not(.inv-price-hint)) {
  padding-top: 16px;
  padding-bottom: 16px;
}
/* Umrandete Karten-Kinder (Upload-Zone, Datei-Vorschau, Warnbänder): hier
   trennt zusätzliches padding-INNEN nicht vom Kartenrand — sie bekommen
   stattdessen Außenabstand und behalten ihr eigenes Innen-Padding. */
.inv-card > .bf-upload, .inv-card > .bf-preview {
  margin-top: 14px; margin-bottom: 18px;
  /* width:100% + 16px-Seitenränder liefen 32px über den Kartenrand hinaus
     (sichtbarer Quer-Scrollbalken); als Block-Flex füllt auto exakt. */
  width: auto;
}
.inv-card > .dup-warn { margin-top: 14px; margin-bottom: 0; }
.inv-card > .inv-price-hint { margin-top: 14px; }
/* Summenblock unter den EK-Positionen: rechtsbündig halten — die generische
   Randregel (.inv-editor .inv-card > * { margin-left:16px }) übersteuerte das
   margin-left:auto von .bf-sums und schob die Summen nach links. */
.inv-card > .bf-sums,
.inv-editor .inv-card > .bf-sums { margin-left: auto; }
/* Folge-Kinder starten ohne eigenen oberen Abstand (der Vorgänger liefert ihn).
   Unsichtbare Vorgänger ([hidden], versteckte Formfelder, die Duplikats-
   warnung mit x-show) zählen dabei NICHT — sonst verlöre das erste sichtbare
   Kind seinen Abstand zum Titelband. */
.inv-editor-wrap .inv-card > :where(*:not(h2):not(.dt-embed-bar):not(.dt-embed-body):not(.dup-warn):not([hidden]):not(.inv-hidden-fields)) + :where(*:not(h2):not(.dt-embed-bar):not(.dt-embed-body):not(.inv-fin-body):not(.bf-upload):not(.bf-preview):not(.dup-warn):not(.inv-price-hint)),
.inv-editor .inv-card > :where(*:not(h2):not(.dt-embed-bar):not(.dt-embed-body):not(.dup-warn):not([hidden]):not(.inv-hidden-fields)) + :where(*:not(h2):not(.dt-embed-bar):not(.dt-embed-body):not(.inv-fin-body):not(.bf-upload):not(.bf-preview):not(.dup-warn):not(.inv-price-hint)) {
  padding-top: 0;
}

/* Untere Aktionsleiste (sticky), wie im Angebots-Design */
/* ── Finanzen-Section (ein-/ausklappbar) ──────────────────────────────── */
/* Kopf der Finanzen-Section sieht aus wie ein normaler Karten-Header
   (grüne Akzentkante + getönter Hintergrund, wie bei „Interne Notiz"),
   ist aber ein klickbarer Button zum Ein-/Ausklappen mit Pfeil rechts. */
.inv-card > .inv-fin-head { margin: 0 !important; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); color: var(--primary-ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 22px 11px 19px; border: none; border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--secondary); border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; box-shadow: none; }
.inv-editor .inv-card > .inv-fin-head { margin: 0 !important; }
.inv-fin .inv-fin-head:focus { outline: none; }
.inv-fin .inv-fin-head:focus-visible { outline: none; box-shadow: var(--ring); }
.inv-fin .inv-fin-head h2 { margin: 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; }
.inv-fin-caret { flex: 0 0 auto; transition: transform .15s ease; color: var(--primary); font-size: 13px; }
.inv-fin-caret.is-open { transform: rotate(180deg); }
.inv-fin-body { padding-top: 16px; padding-bottom: 18px; }
.inv-fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inv-fin-anzahlung { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.inv-ship { margin-top: 14px; }
.inv-ship-add { border: none; cursor: pointer; }
.inv-ship-body { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border); }
.inv-ship-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.inv-ship-title { font-weight: 600; font-size: 13px; color: var(--text); }
.inv-fin-hint { margin: 0 0 10px; }

/* ── Teilrechnung: Zahlungsplan ──────────────────────────────────────── */
/* Teilrechnungs-Zahlungsplan: als eigene, in sich geschlossene Karte – nicht
   als lose Eingabefelder auf weißem Grund. */
.inv-fin-instal { margin-top: 16px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface-2); }
.inv-instal-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.inv-instal-title { font-weight: 700; font-size: 13px; color: var(--text);
  text-transform: uppercase; letter-spacing: .03em; }
.inv-instal-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.inv-instal-table { display: flex; flex-direction: column; }
.inv-instal-row { display: grid; grid-template-columns: minmax(0,1fr) 84px 116px 116px 132px 34px;
  gap: 10px; align-items: center; }
.inv-instal-row--head { padding: 0 0 7px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.inv-instal-row--head .ic-label { padding-left: 30px; }
/* Datenzeilen sitzen auf der Karte als eigene Felder mit Innenabstand. */
#instal-body { counter-reset: instalrow; }
#instal-body .inv-instal-row { padding: 7px 0; counter-increment: instalrow; }
#instal-body .inv-instal-row + .inv-instal-row { border-top: 1px solid var(--border); }
/* Laufende Nummer vor der Bezeichnung (gelöschte Zeilen zählen nicht mit). */
.inv-instal-row .ic-label { display: flex; align-items: center; gap: 8px; }
.inv-instal-row .ic-label input { flex: 1; min-width: 0; }
.ic-rownum { flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 11px;
  font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ic-rownum::before { content: counter(instalrow); }
#instal-body .inv-instal-row.is-deleted { counter-increment: none; }
.inv-instal-row.is-deleted .ic-rownum::before { content: "–"; }
.inv-instal-row.is-deleted { opacity: .5; }
.inv-instal-row.is-deleted input { text-decoration: line-through; }
/* Eingabefelder exakt wie im übrigen Editor: 1px-Rahmen, 8px-Radius,
   kein Monospace, gleicher Fokus-Ring. */
.inv-instal-row input[type="text"],
.inv-instal-row input[type="number"],
.inv-instal-row input[type="date"] {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; font-size: 13px; background: #fff;
  box-sizing: border-box; min-height: 32px; }
.inv-instal-row input[type="number"],
.inv-instal-row input[type="date"] {
  -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums; }
.inv-instal-row input:focus {
  outline: 2px solid var(--addon-bg); border-color: var(--primary); }
.inv-instal-row input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity .12s ease; }
.inv-instal-row input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.inv-instal-row .ic-pct input, .inv-instal-row .ic-amt input,
.inv-instal-row .ic-gross input { text-align: right; }
/* Brutto-Spalte: reine Anzeige (Netto × Steuerfaktor), nie bearbeitbar. */
.inv-instal-row .ic-gross-out { background: var(--surface) !important; color: var(--muted);
  border-style: dashed !important; cursor: default; font-variant-numeric: tabular-nums; }
.inv-instal-row--head .ic-gross { text-align: right; }
.inv-instal-row .ic-del { display: flex; justify-content: center; }
/* Rest-Zeile: gleicht den Plan automatisch auf die Basis aus (keine Rundungs-
   differenz). Dezent farblich abgesetzt, „Rest"-Badge, gerechneter Betrag. */
.ic-restbadge { display: none; flex: none; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, #fff);
  color: var(--primary-dark); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.inv-instal-row.is-rest .ic-restbadge { display: inline-flex; }
.inv-instal-row.is-rest { background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-radius: 8px; }
.inv-instal-row.is-rest .ic-amt input,
.inv-instal-row.is-rest .ic-pct input { background: var(--surface);
  border-style: dashed; font-weight: 700; color: var(--ink); cursor: default; }
.inv-instal-row.is-rest .ic-rownum { background: color-mix(in srgb, var(--primary) 18%, #fff);
  border-color: color-mix(in srgb, var(--primary) 40%, #fff); color: var(--primary-dark); }
/* Kompakter runder Entfernen-/Wiederherstellen-Button (wie in den Positionen). */
.inv-instal-del { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; transition: all .12s ease; }
.inv-instal-del:hover { border-color: var(--out-fg, #d8534b); color: var(--out-fg, #d8534b);
  background: color-mix(in srgb, var(--out-fg, #d8534b) 8%, var(--surface)); }
.inv-instal-del.is-active { border-color: var(--primary); color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 14px; }
.inv-instal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.inv-instal-foot .inv-add-btn { border: 1px dashed var(--border); cursor: pointer;
  background: var(--surface); color: var(--primary-dark); font-weight: 600; padding: 7px 14px; }
.inv-instal-foot .inv-add-btn:hover { border-color: var(--primary); border-style: solid;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
/* Saldo-Anzeige als Chips. */
.inv-instal-balance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); }
.inv-instal-balance > span { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); white-space: nowrap; }
.inv-instal-balance strong { color: var(--text); font-variant-numeric: tabular-nums; }
.inv-instal-balance.is-over strong { color: var(--out-fg, #d8534b); }
.inv-instal-balance.is-over > span:last-child { border-color: var(--out-fg, #d8534b);
  background: color-mix(in srgb, var(--out-fg, #d8534b) 8%, var(--surface)); }
.inv-instal-balance .inv-instal-okmark { color: var(--primary-dark); font-weight: 700;
  border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
@media (max-width: 720px) {
  .inv-fin-grid { grid-template-columns: 1fr; }
  .inv-instal-row--head { display: none; }
  #instal-body .inv-instal-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inv-instal-row .ic-label,
  .inv-instal-row .ic-gross,
  .inv-instal-row .ic-due { grid-column: 1 / -1; }
  .inv-instal-row .ic-del { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── Interne Notiz: Chatter-Verlauf ───────────────────────────────────── */
.inv-note-compose { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
/* Eingabefeld wie der Einleitungstext-Editor: weicher Rahmen in Markenton,
   gleiches Padding/Radius, grüner Fokusring – nicht der harte Browser-Default. */
.inv-note-input {
  width: 100%; resize: vertical; min-height: 78px;
  padding: 9px 11px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; line-height: 1.5; outline: none;
}
.inv-note-input::placeholder { color: var(--muted); }
.inv-note-input:focus {
  border-color: var(--secondary); box-shadow: 0 0 0 3px var(--secondary-soft);
}
.inv-note-compose-actions { display: flex; justify-content: flex-end; }
.inv-note-feed { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inv-note-item { border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--surface-2, rgba(20, 35, 28, .02)); }
.inv-note-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.inv-note-author { font-weight: 600; font-size: 13px; color: var(--text); }
.inv-note-time { font-size: 12px; color: var(--muted); }
.inv-note-text { font-size: 14px; color: var(--text); white-space: pre-wrap; }
.inv-note-empty { padding: 6px 0; }

.inv-actionbar { position: sticky; bottom: 0; z-index: 5; margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 -2px 12px rgba(20, 35, 28, .06); padding: 8px 16px; }
.inv-actionbar-primary { display: flex; gap: 10px; flex-wrap: wrap; }
.inv-actionbar-secondary { display: flex; align-items: center; gap: 16px; }
.inv-actionbar-cancel { text-decoration: none; font-size: 14px; }
.inv-actionbar-cancel:hover { color: var(--primary-dark); }
.inv-actionbar .inv-act-more { position: relative; border: none; background: none; border-radius: 0; }
.inv-actionbar .inv-act-more > summary { padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); gap: 8px; color: var(--text); }
.inv-actionbar .inv-act-more > summary:hover { border-color: var(--primary); }
.inv-actionbar .inv-act-more-list { position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 290px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 35, 28, .16); padding: 6px; z-index: 20; }
/* Dirty state: the sticky save bar lights up the moment something is edited so
   the clerk always sees "es gibt ungespeicherte Änderungen" without scrolling. */
.inv-actionbar.is-dirty { border-color: var(--primary); box-shadow: 0 -2px 16px rgba(163, 184, 18, .30); }
.inv-dirty-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.inv-dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft, rgba(168, 196, 10, .22)); }
/* Kurze „gespeichert"-Rückmeldung in der Speicherleiste (kein seitenbreiter
   Banner). Blendet sich nach wenigen Sekunden per Alpine wieder aus. */
.inv-saved-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 600; color: var(--primary-dark, #6f7d10); }
.inv-saved-check { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 1;
  color: #fff; background: var(--primary-dark, #6f7d10); }
.inv-panel-customer-empty p { line-height: 1.4; }

/* ── Festgeschriebener Beleg: vertrauter Editor, aber read-only ──────────────
   Der Anwender bleibt nach dem Festschreiben „im Edit" — wir bouncen nicht auf
   eine separate Detailseite, sondern zeigen denselben Editor schreibgeschützt:
   Felder bleiben sichtbar (Werte ablesbar), reagieren aber nicht mehr. */
.inv-locked-banner { display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 11px 15px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2, #f5f6f8);
  color: var(--muted); font-size: .92rem; }
.inv-locked-banner strong { color: var(--text); }
.inv-locked-banner .ic { flex: none; color: var(--primary-dark, #6f7d10); }
.inv-editor--locked .inv-card input,
.inv-editor--locked .inv-card textarea,
.inv-editor--locked .inv-card select,
.inv-editor--locked .inv-card .prod-combo-arrow,
.inv-editor--locked .inv-card .inv-add-btn,
.inv-editor--locked .inv-card .link-btn,
.inv-editor--locked .inv-card .inv-abo-chip { pointer-events: none; }
.inv-editor--locked .inv-card input,
.inv-editor--locked .inv-card textarea,
.inv-editor--locked .inv-card select {
  background: var(--surface-2, #f5f6f8); border-color: transparent;
  box-shadow: none; color: var(--text); }
.inv-editor--locked .inv-card .link-danger,
.inv-editor--locked .inv-card .prod-combo-arrow { display: none; }
/* Mahnstopp: kompakter, einklappbarer „Punkt" — zugeklappt nur das Label,
   bei Klick erscheinen die Eingaben. Bleibt auch bei festgeschriebenen Belegen
   bedienbar; er steuert nur das Mahnen, ist kein unveränderlicher
   Belegbestandteil (§132). */
.inv-dunning { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border); }
.inv-dunning > summary { cursor: pointer; list-style: none; outline: none;
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  transition: color .12s ease; }
.inv-dunning > summary:hover,
.inv-dunning > summary:focus-visible { color: var(--primary-dark, #6f7d10); }
.inv-dunning > summary::-webkit-details-marker { display: none; }
.inv-dunning > summary::before { content: "\25B8"; color: currentColor;
  font-size: .9em; transition: transform .15s ease; }
.inv-dunning[open] > summary::before { transform: rotate(90deg); }
.inv-dunning-state { font-weight: 400; font-size: .8rem;
  color: var(--primary-dark, #6f7d10); }
.inv-dunning-body { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 12px 0 4px; }
/* Auswahl-/Datumsfeld wie die übrigen Design-Felder (.form-field select),
   nur kompakter (Breite nach Inhalt statt voller Spaltenbreite). */
.inv-dunning-body select,
.inv-dunning-until input {
  width: auto; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: #fff; }
/* Ohne appearance:none zeichnet das native <select> seinen eigenen (dunklen)
   Rahmen und ignoriert border/border-radius. Eigener Pfeil als Hintergrund-SVG. */
.inv-dunning-body select {
  min-width: 170px; min-height: 40px; padding-right: 34px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.inv-dunning-until input { min-height: 40px; -webkit-appearance: none;
  appearance: none; font-variant-numeric: tabular-nums; }
.inv-dunning-body select:focus,
.inv-dunning-until input:focus {
  outline: 2px solid var(--addon-bg); border-color: var(--primary); }
.inv-dunning-until { display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; color: var(--muted); }
.inv-dunning > small { display: block; margin-top: 2px; }
/* override der Lock-Sperre (höhere Spezifität als die .inv-card-Sperrregel) */
.inv-editor--locked .inv-card .inv-dunning summary,
.inv-editor--locked .inv-card .inv-dunning input,
.inv-editor--locked .inv-card .inv-dunning select,
.inv-editor--locked .inv-card .inv-dunning button { pointer-events: auto; }
.inv-editor--locked .inv-card .inv-dunning input,
.inv-editor--locked .inv-card .inv-dunning select {
  background: var(--surface); border-color: var(--border); }
.inv-actionbar--locked .inv-locked-status { display: flex; align-items: center; gap: 10px; }
.inv-actionbar--locked .inv-locked-status select { min-width: 180px; }

/* ── Responsive Dichte (Laptop/MacBook) ──
   Auf kleineren Bildschirmen schrumpfen Seitenleiste und Info-Panel, und der
   Beleg-Editor wird kompakter (kleinere Felder/Abstände), damit die
   Positionen-Tabelle mehr Platz bekommt. Die Werte greifen rein über die
   Viewport-Breite, also vollautomatisch je nach Bildschirm/Zoom. */
@media (max-width: 1500px) {
  .sidebar { flex-basis: 224px; width: 224px; }
  .inv-editor { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
}
@media (max-width: 1320px) {
  .sidebar { flex-basis: 204px; width: 204px; }
  .brand { font-size: 16px; padding: 18px 16px 12px; }
  .sidenav { padding: 4px 10px 16px; }
  .nav-item { padding: 7px 9px; gap: 9px; }
  .nav-section { margin-bottom: 14px; }
  .inv-editor { grid-template-columns: minmax(0, 1fr) 284px; gap: 16px; }
  /* Editor-Felder kompakter: weniger Innenabstand, geringere Mindesthöhe. */
  .inv-editor .form-field { margin-bottom: 11px; }
  .inv-editor .form-field input[type="text"],
  .inv-editor .form-field input[type="email"],
  .inv-editor .form-field input[type="date"],
  .inv-editor .form-field input[type="number"],
  .inv-editor .form-field input:not([type]),
  .inv-editor .form-field select,
  .inv-editor .inv-prod-search {
    padding: 7px 10px; font-size: 14px;
  }
  .inv-editor .form-field input[type="date"],
  .inv-editor .form-field input[type="number"] { min-height: 36px; }
  /* Innenabstände der Karten-Abschnitte etwas straffen. */
  .inv-editor .inv-card > .inv-head-grid { padding: 14px 0; }
  .inv-editor .inv-card > h2 { padding-top: 9px; padding-bottom: 9px; }
}

@media (max-width: 1000px) {
  .inv-editor, .inv-editor.aside-collapsed,
  .inv-editor.ek-editor, .inv-editor.ek-editor.aside-collapsed { grid-template-columns: 1fr; }
  .inv-aside { position: static; }
  .inv-editor.aside-collapsed .inv-aside-toggle { writing-mode: horizontal-tb; align-self: flex-end; padding: 6px 12px; border-radius: 999px; }
  .inv-head-grid { grid-template-columns: 1fr; }
  .inv-actionbar { flex-direction: column; align-items: stretch; }
  .inv-actionbar-primary .btn { flex: 1; }
}

/* ── Beleg-Editor (Angebot/Auftrag/Rechnung, .doc-editor): Breitbild-Balance ──
   Owner-Vorgabe: IMMER die volle Breite nutzen — kein max-width-Deckel. Damit
   Selects auf Breitbild trotzdem nicht ~1000px breit werden, verteilen sich
   die Feld-Paare in den Sektionen ab 1700px auf drei Spalten (volle Zeilen wie
   Textareas spannen weiter über alles). Die Sidebar wächst auf Breitbild auf
   360px. Unter 1500px greifen unverändert die bestehenden Stufen
   (300px / 284px / gestapelt), Einklappen (40px) bleibt wie gehabt. */
@media (min-width: 1501px) {
  .inv-editor.doc-editor:not(.aside-collapsed) { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (min-width: 1700px) {
  .inv-editor.doc-editor .inv-head-grid,
  .inv-editor.doc-editor .inv-cond-grid,
  .inv-editor.doc-editor .inv-ship-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHARED LAYOUT PRIMITIVES — Drift-Stopper für Modul-Templates
   Die 4 neuen Module (projects/crm/inventory) sowie subscriptions/products
   wiederholten dieselben Inline-Styles (2-Spalten-Formularraster, Formular-
   Aktionsleiste) und überschrieben den nur-für-Login gedachten `.btn-primary`
   (width:100%!) inline. Diese Klassen definieren das einmal. Module sollen
   diese Klassen verwenden statt style="…".
   ════════════════════════════════════════════════════════════════════════ */

/* 2-/3-spaltiges Formularraster — ersetzt
   style="display:grid; grid-template-columns:1fr 1fr; gap:12px;" (10× inline). */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) { .form-row, .form-row--3 { grid-template-columns: 1fr; } }

/* Formular-Aktionsleiste (Speichern + Abbrechen) — ersetzt
   style="margin-top:20px; display:flex; gap:12px; align-items:center;" (5× inline). */
.form-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.form-actions .btn { margin-top: 0; }
/* Sekundärer „Abbrechen"-Textlink in der Aktionsleiste */
.form-cancel { color: var(--muted); text-decoration: none; font-size: 14px; }
.form-cancel:hover { color: var(--text); }

/* Kanban-/Pipeline-Board (CRM) — die Klassen .crm-board/.crm-col/.crm-card
   existierten im Markup, hatten aber KEIN CSS und liefen komplett auf Inline-
   Styles. Hier generisch als .board/.board-col/.board-card. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: var(--space-4); overflow-x: auto; align-items: start; padding-bottom: var(--space-2); }
.board-col { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-3); min-width: 240px; }
.board-col-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3); }
.board-col-title { font-size: var(--fs-sm); font-weight: 700; }
.board-col-meta { font-size: 12px; color: var(--muted); }
.board-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: var(--space-3); }
.board-card-title { font-weight: 600; color: var(--text); text-decoration: none; }
.board-card-title:hover { color: var(--primary-dark); }
.board-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }

/* ── Projekte: Status-Board (Kacheln) + Aufgaben-Board (Planner-Stil) ─────
   Baut auf den generischen .board-Klassen auf; hier nur die Projekt-/
   Aufgaben-spezifischen Ergänzungen (Kachel-Zeilen, Fortschritt, Avatare,
   Fälligkeit, Karten-Panel). */
.board-card { cursor: grab; }
.board-card.is-dragging { opacity: .5; cursor: grabbing; }
.board-drop.is-over, .pj-drop.is-over { outline: 2px dashed var(--primary); outline-offset: -2px; }

.pj-card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pj-card-sub code { font-size: 11px; }
.pj-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pj-progress-bar { flex: 1 1 auto; height: 5px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden; }
.pj-progress-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.pj-progress-num { font-size: 11px; color: var(--muted); flex: none; }
.pj-card-foot { gap: 8px; }
.pj-foot-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pj-avatar { width: 22px; height: 22px; font-size: 10px; flex: none; }
.pj-hours { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pj-ico { width: 13px; height: 13px; flex: none; }
.pj-due { font-size: 12px; color: var(--muted); }
.pj-due.is-overdue, .tk-due.is-overdue { color: #c2453f; font-weight: 600; }
/* No-JS-Fallback (Status/Bucket per <select>); wird per JS ausgeblendet. */
.pj-move-fallback { display: flex; gap: 6px; margin-top: 8px; }
.pj-move-fallback[hidden] { display: none; }
.pj-move-fallback select { flex: 1; padding: 3px 6px; font-size: 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }

/* ── Projekt-Übersichtsboard (Statusspalten) — Redesign 2026-07 ──────────
   Planner-/Odoo-Optik: Spalten als eigenständige graue Flächen (kein weißer
   Grund mit dünner Farb-Top-Border), weiße kompakte Karten mit feinem
   Schatten. Gilt fürs Übersichtsboard (.pj-board) UND das Aufgaben-Board im
   Projekt (#project-board); das CRM-Board bleibt unberührt. */
.pj-board .board-col, #project-board .board-col {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 10px 12px; }
.pj-board .board-card, #project-board .board-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  margin-bottom: var(--space-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: box-shadow .12s, border-color .12s; }
.pj-board .board-card:hover, #project-board .board-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.pj-board .board-card-title, #project-board .board-card-title { font-size: 13.5px; }
/* Aufgaben-Karten: einheitliche Höhe statt Springen (mit/ohne Avatar/Badges).
   Karte als Flex-Spalte mit Mindesthöhe, die Fußzeile (Badges links, Avatare
   rechts) ankert per margin-top:auto immer am Kartenboden, der Titel bricht
   nach maximal 2 Zeilen mit Ellipsis ab. */
#project-board .board-card { display: flex; flex-direction: column;
  min-height: 96px; }
#project-board .tk-card-head .board-card-title { display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
#project-board .board-card .tk-foot { margin-top: auto; padding-top: 8px; }
.pj-col { --col-accent: var(--st-neutral-fg); }
.pj-col[data-status="draft"]     { --col-accent: #9aa39d; }
.pj-col[data-status="active"]    { --col-accent: var(--secondary); }
.pj-col[data-status="on_hold"]   { --col-accent: #d9982b; }
.pj-col[data-status="done"]      { --col-accent: var(--success); }
.pj-col[data-status="cancelled"] { --col-accent: var(--st-danger-fg); }
.pj-col-head { margin-bottom: var(--space-2); }
.pj-col-title { display: inline-flex; align-items: center; gap: 7px; }
.pj-col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-accent); flex: none; }
/* Zähler-Badge — Fallback-Akzent, damit es auch am Aufgaben-Board (ohne
   Status-Spaltenfarbe) sauber rendert. */
.pj-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px;
  padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: color-mix(in srgb, var(--col-accent, #6a756e) 72%, var(--text));
  background: color-mix(in srgb, var(--col-accent, #6a756e) 14%, var(--surface)); }
.pj-add { display: inline-grid; place-items: center; width: 24px; height: 24px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; }
.pj-add:hover { background: color-mix(in srgb, var(--col-accent) 16%, var(--surface)); color: var(--text); }

/* Karten: kompakt und ruhig (Planner) — der Projekt-Akzent färbt nur noch
   den Fortschrittsbalken, keine linke Kante mehr. */
.pj-card { position: relative; }
.pj-card-name { display: block; font-size: 13.5px; line-height: 1.35; }
/* hidden-Attribut gewinnt IMMER — eine display:block-Klasse hebelte es aus
   (Projekt-Board: Titel blieb neben dem Umbenennen-Input sichtbar). */
[hidden] { display: none !important; }
.pj-card-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted); margin-right: 6px; }
.pj-card .pj-progress-fill { background: var(--primary); }
.pj-card-foot { gap: 8px; margin-top: 10px; }
.pj-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pj-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; color: var(--muted);
  background: var(--subtle); white-space: nowrap; }
.pj-chip strong { color: var(--text); font-weight: 600; }
.pj-chip--due.is-overdue { color: var(--st-danger-fg); background: var(--st-danger-bg); font-weight: 600; }
.pj-chip--hours.is-billable { background: var(--secondary-soft); color: var(--primary-ink); }
.pj-chip--hours.is-billable strong { color: var(--primary-ink); }

/* Avatar-Stapel: Verantwortliche:r zuerst (Ring im Marken-Akzent), max 4 + „+N“. */
.pj-avatars { display: inline-flex; flex: none; }
.pj-avatars .pj-avatar { border: 2px solid var(--surface); }
.pj-avatars .pj-avatar + .pj-avatar { margin-left: -7px; }
.pj-avatars .pj-avatar.is-lead { box-shadow: 0 0 0 2px var(--primary); z-index: 1; }
.pj-avatar-more { background: var(--subtle); color: var(--muted); font-weight: 600; }

/* Empty-States & Dropzonen: leere Spalte zeigt nur dezenten Hinweis-Text;
   die gestrichelte Dropzone erscheint AUSSCHLIESSLICH während eines aktiven
   Drags (Klasse is-drag am Board, gesetzt bei dragstart / entfernt bei
   dragend) — keine permanenten „Hierher ziehen"-Geisterflächen mehr. */
.board-cards { min-height: 48px; }
.pj-empty { display: none; align-items: center; justify-content: center;
  padding: 14px 10px; margin-bottom: var(--space-2); font-size: 12px;
  color: var(--muted); border-radius: var(--radius-sm); }
.board-cards:not(:has(.board-card)) .pj-empty { display: flex; }
.pj-empty .pj-empty-drop { display: none; }
.board.is-drag .pj-empty { display: flex;
  border: 1.5px dashed var(--border-strong); background: var(--surface); }
.board.is-drag .pj-empty .pj-empty-hint { display: none; }
.board.is-drag .pj-empty .pj-empty-drop { display: inline; }
.pj-board-empty { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 64px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); text-align: center; }
.pj-board-empty-ico { width: 34px; height: 34px; color: var(--muted); }
.pj-board-empty h2 { margin: 0; font-size: var(--fs-lg); }

/* Zuweisungs-Chips und Inline-Zeitbuchung im Karten-Panel. */
.tkp-assign-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tkp-assign-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 3px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; background: var(--surface-2); }
.tkp-assign-chip .pj-avatar { width: 20px; height: 20px; font-size: 9px; }
.tkp-assign-x { border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1; padding: 0 3px; }
.tkp-assign-x:hover { color: var(--danger); }
.tkp-assign .prod-combo-item .pj-avatar { width: 20px; height: 20px; font-size: 9px; flex: none; }
.tkp-time { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.tkp-time-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); }
.tkp-time input[type="date"], .tkp-time-num, .tkp-time-desc {
  padding: 6px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tkp-time-num { width: 60px; }
.tkp-time-desc { flex: 1 1 auto; min-width: 0; width: 100%; }
.tkp-time-more { font-size: 12px; text-decoration: none; margin-left: auto; }
.tkp-time-more:hover { color: var(--text); }

/* Notion-Prinzipien: Inline-Titel-Edit, Erledigt-Haken an der Karte und
   stets sichtbares Quick-Add-Feld je Bucket. Aktionen erscheinen bei
   Hover/Fokus, behalten aber ein sichtbares Grundgerüst (Opacity, nie 0). */
.pj-card-head, .tk-card-head { display: flex; align-items: flex-start; gap: 6px; }
.pj-card-head .pj-card-name, .tk-card-head .board-card-title { flex: 1 1 auto; min-width: 0; }
.pj-rename { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted);
  cursor: pointer; opacity: .35; transition: opacity .12s, background .12s, color .12s; }
.pj-rename .pj-ico { width: 12px; height: 12px; }
.board-card:hover .pj-rename, .pj-rename:focus-visible { opacity: 1; }
.pj-rename:hover { background: var(--subtle); color: var(--text); }
.pj-rename-input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 3px 6px;
  font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--secondary); border-radius: var(--radius-sm); outline: none; }
.tk-done-toggle { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px;
  margin-top: 1px; border: 1.5px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); color: transparent; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.tk-done-toggle .pj-ico { width: 11px; height: 11px; }
.tk-done-toggle:hover { border-color: var(--success); color: var(--success); }
.tk-done-toggle.is-on { border-color: var(--success); background: var(--success); color: #fff; }
.board-card.is-done .board-card-title { color: var(--muted); text-decoration: line-through; }
.tk-quickadd input[type="text"] { width: 100%; padding: 7px 10px; font: inherit; font-size: 13px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; transition: border-color .12s, background .12s; }
.tk-quickadd input[type="text"]:hover { border-color: var(--secondary); }
.tk-quickadd input[type="text"]:focus { outline: none; border-style: solid;
  border-color: var(--secondary); background: var(--surface); }

/* Quick-Add-Dialog („+“ im Spaltenkopf, bulk-modal-Muster). */
.pjq-dialog { max-width: 420px; }
.pjq-status { color: var(--primary-ink); }
.pjq-dialog .form-field { margin-bottom: 14px; }
.pjq-dialog .form-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.pjq-dialog input[type="text"] { width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.pjq-dialog .bulk-modal-actions { align-items: center; }
.pjq-more { margin-right: auto; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.pjq-more:hover { color: var(--text); }

/* Aufgaben-Karten (Projekt-Detail-Board) */
.tk-labels { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.tk-label { font-size: 11px; padding: 1px 8px; border-radius: 999px; color: #0d0f08; }
.tk-check { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tk-check-bar { height: 5px; background: var(--surface-2); border-radius: 999px;
  margin-top: 3px; overflow: hidden; }
.tk-check-fill { height: 100%; background: var(--primary); border-radius: 999px; }
.tk-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px; }
.tk-foot-left { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tk-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.tk-avatars { display: inline-flex; }
.tk-avatars .avatar { width: 22px; height: 22px; font-size: 10px; border: 2px solid var(--surface); }
.tk-avatars .avatar + .avatar { margin-left: -7px; }
.tk-prio { font-size: 11px; }
/* Status-Pille auf der Karte (zweite Achse: Fortschritt je Bucket-Spalte).
   Gedeckte Ampeltöne aus der Status-Palette — nichts Neonfarbenes. */
.tk-status { display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 11px; font-weight: 600; padding: 1px 8px 1px 7px; border-radius: 999px;
  background: var(--st-neutral-bg); color: var(--st-neutral-fg); }
.tk-status-dot { width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none; }
.tk-status--open        { background: var(--st-neutral-bg); color: var(--st-neutral-fg); }
.tk-status--in_progress { background: var(--st-warn-bg);    color: var(--st-warn-fg); }
.tk-status--done        { background: var(--st-success-bg); color: var(--st-success-fg); }
.board-card.is-done .tk-status--done { opacity: .8; }
.board-add-card { display: inline-block; margin-top: 2px; font-size: 13px;
  color: var(--muted); text-decoration: none; border: 0; background: none;
  cursor: pointer; padding: 4px 2px; font-family: inherit; }
.board-add-card:hover { color: var(--text); }
.board-col-head[draggable="true"] { cursor: grab; }
.board-col.is-col-dragging { opacity: .55; }

/* Projektkopf über dem Aufgaben-Board */
.pj-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 2px 0 14px; font-size: 13px; color: var(--muted); }
.pj-head .pj-head-item { display: inline-flex; align-items: center; gap: 6px; }
.pj-head .pj-head-item strong { color: var(--text); font-weight: 600; }

/* Aufgaben-Panel (Slide-over im Stil des Abgleich-/Zahlungs-Panels) */
html.tkp-lock { overflow: hidden; }
.tkp { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.tkp[hidden] { display: none; }
.tkp-backdrop { position: absolute; inset: 0; background: rgba(13, 15, 8, .38); }
.tkp-panel { position: relative; width: min(560px, 100vw); height: 100%;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .14); display: flex; flex-direction: column;
  animation: tkp-in .16s ease-out; }
@keyframes tkp-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tkp-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); flex: none; }
.tkp-title { font-weight: 700; font-size: 15px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkp-x { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 4px 8px; border-radius: var(--radius-sm); }
.tkp-x:hover { background: rgba(0, 0, 0, .06); color: inherit; }
.tkp-body { overflow-y: auto; padding: 16px 18px; flex: 1 1 auto; }
.tkp-body .form-field { margin-bottom: 12px; }
.tkp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tkp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.tkp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--border); flex: none; background: var(--surface-2); }
.tkp-foot .tkp-delete { margin-left: auto; }
.tkp-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.tkp-section > h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }
.tkp-check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tkp-check-row input[type="text"] { flex: 1 1 auto; }
.tkp-attach { display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 6px 0; border-bottom: 1px dashed var(--border); }
.tkp-attach:last-of-type { border-bottom: 0; }
.tkp-attach a { color: var(--text); text-decoration: none; flex: 1 1 auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkp-attach a:hover { color: var(--primary-dark); }
.tkp-attach .muted { flex: none; }
.tkp-loading { padding: 40px 0; text-align: center; color: var(--muted); }

/* Projekt-Schnellbearbeitung: zentriertes Modal im Aufgaben-Popup-Stil
   (.tkm-Gerüst); Kopf/Body/Fuß kommen weiter aus den .tkp-Klassen. */
.pjm-dialog { position: relative; width: min(640px, 100%);
  max-height: calc(100vh - 48px); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22); display: flex;
  flex-direction: column; overflow: hidden; animation: tkm-in .14s ease-out; }
.pjm .tkp-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
@media (max-width: 640px) {
  .pjm { padding: 0; }
  .pjm-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}
.pjp-open { margin-left: auto; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.pjp-open:hover { color: var(--text); }

/* ── Zeiterfassung im Projekt (Detailseite): Schnell-Erfassungszeile oben,
   kompakte Einträge-Tabelle mit ⋯-Menü, Summenzeile + Summen je Kopf. ── */
.pjt-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pjt-quick input[type="date"], .pjt-hours, .pjt-desc, .pjt-task .inv-prod-search {
  padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.pjt-hours { width: 90px; }
.pjt-desc { flex: 2 1 180px; min-width: 0; }
.pjt-task { flex: 1 1 150px; min-width: 0; }
.pjt-billable { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pjt-more { font-size: 12px; text-decoration: none; }
.pjt-more:hover { color: var(--text); }
.pjt-table .pj-avatar { margin-right: 4px; vertical-align: middle; }
.pjt-col-menu { width: 40px; }
.pjt-sumrow td { font-weight: 600; border-top: 2px solid var(--border-strong); }
.pjt-menu { position: relative; display: inline-block; }
.pjt-menu > summary { list-style: none; display: inline-flex; align-items: center;
  justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; user-select: none; }
.pjt-menu > summary::marker { content: ""; }
.pjt-menu > summary::-webkit-details-marker { display: none; }
.pjt-menu[open] > summary, .pjt-menu > summary:hover {
  background: var(--subtle); color: var(--text); }
.pjt-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 150px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px;
  text-align: left; }
.pjt-menu-list a, .pjt-menu-list .link-btn { display: block; width: 100%;
  padding: 6px 9px; border-radius: 6px; font-size: 13px; text-align: left;
  color: var(--text); text-decoration: none; background: none; border: 0;
  cursor: pointer; font-family: inherit; }
.pjt-menu-list a:hover, .pjt-menu-list .link-btn:hover { background: var(--surface-2); }
.pjt-menu-list .link-danger { color: var(--danger); }
.pjt-menu-list > .muted { padding: 6px 9px; font-size: 12px; }
.pjt-sums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pjt-sum-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; background: var(--surface-2); }
.pjt-sum-chip strong { font-variant-numeric: tabular-nums; }

/* Kompakte Detail-Kopfzeile (Titel links · Aktionen rechts) — ersetzt
   style="display:flex; align-items:flex-start; justify-content:space-between; gap:16px;" */
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.detail-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }

/* ── Übersicht / Dashboard (Widget-Grid) ──────────────────────────────────
   CRM-style cockpit adapted to the regio.works light theme + Lime accent. */
/* Übersicht/Dashboard nutzt die volle Seitenbreite (kein 1180px-Cap). */

.dash { display: flex; flex-direction: column; gap: 16px; }

.dash-hello {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--primary-softer), var(--surface) 70%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.dash-hello-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.dash-hello-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-clock { text-align: right; line-height: 1.2; }
.dash-clock-time { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-clock-date { display: block; color: var(--muted); font-size: 13px; text-transform: capitalize; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24%, 400px); gap: 16px; align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.dash-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-card-title { font-size: 1rem; font-weight: 700; margin: 0; }

/* Profile + KPIs */
.dash-profile { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; }
.dash-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
}
.dash-profile-name { font-size: 1.1rem; font-weight: 700; }
.dash-profile-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.dash-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); text-decoration: none; color: var(--text);
  transition: border-color .12s ease, transform .12s ease;
}
.dash-kpi:hover { border-color: var(--primary); transform: translateY(-1px); }
.dash-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dash-kpi-value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-kpi-hint { font-size: 12px; color: var(--muted); }
.dash-kpi.is-danger .dash-kpi-value { color: var(--danger); }

/* Berichtwesen-Bausteine auf der Startseite: KPI-Kacheln sind Links,
   width:100%-Kinder (Chart-SVG, Kalender-Tabelle) rechnen die 22px-Seiten-
   ränder der inv-card ein (gleiche Korrektur wie .bw-grid im Berichtwesen). */
a.bw-kpi { text-decoration: none; color: inherit; transition: border-color .12s ease, transform .12s ease; }
a.bw-kpi:hover { border-color: var(--secondary); transform: translateY(-1px); }
.dash .inv-card > .bw-chart,
.dash .inv-card > .dash-cal-table { width: calc(100% - 44px); }

/* Tabs widget */
.dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
/* In der inv-card spannt die Tab-Zeile die volle Kartenbreite. */
.dash .inv-card > .dash-tabs { margin: 0; padding: 6px 22px 0; }
.dash-tab {
  border: none; background: none; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--muted); padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dash-tab:hover { color: var(--text); }
.dash-tab.is-active { color: var(--text); border-bottom-color: var(--primary); }

.dash-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.dash-task { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.dash-task:last-child { border-bottom: none; }
.dash-task-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
.dash-task-prio { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.dash-prio-1 { background: #9aa6a0; }
.dash-prio-2 { background: var(--primary); }
.dash-prio-3 { background: #e8a33d; }
.dash-prio-4 { background: var(--danger); }
.dash-task-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-task-proj { flex: 0 0 auto; }
.dash-task-due { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-task-due.is-danger { color: var(--danger); font-weight: 600; }
/* Projekt-Chip in „Meine Aufgaben" + „Alle …"-Zeilen unter Listen. */
.dash-chip {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.dash-more {
  display: block; padding: 10px 0 0; font-size: 13px; font-weight: 600;
  color: var(--primary-ink); text-decoration: none;
}
.dash-more:hover { text-decoration: underline; }

.dash-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 12px; }
.dash-empty-icon { width: 28px; height: 28px; color: var(--muted); opacity: .6; }
.dash-empty p { margin: 0; }

/* Calendar */
.dash-cal-table { width: 100%; border-collapse: collapse; }
.dash-cal-table th { font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 0; text-align: center; }
.dash-cal-table td { text-align: center; padding: 2px; }
.dash-cal-table td span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 13px;
}
.dash-cal-table td.is-out span { color: var(--muted); opacity: .45; }
.dash-cal-table td.is-today span { background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.dash-cal-table td.has-due:not(.is-today) span { box-shadow: inset 0 0 0 2px var(--primary-soft); }

/* Quick status */
.dash-stat-list { list-style: none; margin: 0; padding: 0; }
.dash-stat-list li { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); }
.dash-stat-list li:last-child { border-bottom: none; }
.dash-stat-list strong { font-variant-numeric: tabular-nums; }
.dash-pill { font-size: 12px; font-weight: 700; color: var(--danger, #e5484d); background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent); padding: 2px 9px; border-radius: 999px; }
.dash-msg-list { list-style: none; margin: 0; padding: 0; }
.dash-msg-list li + li { border-top: 1px solid var(--border); }
/* Kompakte Nachrichten-Zeile: Titel + Meta einzeilig. */
.dash-msg { display: block; padding: 8px 0; text-decoration: none; color: var(--text); }
.dash-msg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.dash-msg-from { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-msg-meta { flex: 0 1 auto; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-msg:hover .dash-msg-from { text-decoration: underline; }

.dash-gate { margin: 4px 2px 0; }

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── Rich-text editor (core.richtext.RichTextWidget) ─────────────────── */
.rt { position: relative; }
.rt .rt-source { display: none; }
.rt-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: 13px;
  line-height: 1; cursor: pointer; transition: background .12s ease;
}
.rt-btn:hover { background: var(--surface); border-color: var(--border-strong); }
.rt-btn:active { background: var(--secondary-soft); }
.rt-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border-strong); }
.rt-area {
  min-height: 78px; padding: 9px 11px; background: #fff;
  border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font: inherit; color: var(--text); line-height: 1.5; outline: none;
  overflow-wrap: anywhere;
}
.rt-area:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px var(--secondary-soft); }
.rt-area:empty::before { content: attr(data-rt-ph); color: var(--muted); pointer-events: none; }
.rt-area ul, .rt-area ol { margin: 4px 0; padding-left: 22px; }
.rt-area p { margin: 0 0 6px; }

/* Read-only rendering of stored rich text (detail/public pages). */
.rt-out ul, .rt-out ol { margin: 4px 0; padding-left: 22px; }
.rt-out p { margin: 0 0 6px; }
.rt-out > :last-child { margin-bottom: 0; }
/* Abo-Positionsbeschreibung: gerenderter Rich-Text in der Tabellenzelle bleibt
   lesbar (Normalgewicht, begrenzte Breite), statt roher HTML-Tags. */
.abo-desc { font-weight: 400; max-width: 640px; font-size: 13px; line-height: 1.45; }
.abo-desc b, .abo-desc strong { font-weight: 600; }

/* Inline variant for the cramped line-item table cell: tight, single-line by
   default, toolbar appears only while editing. */
.rt--inline .rt-toolbar {
  position: absolute; bottom: 100%; left: 0; z-index: 5;
  display: none; margin-bottom: 2px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop);
}
.rt--inline:focus-within .rt-toolbar { display: flex; }
.rt--inline .rt-area {
  min-height: 36px; padding: 7px 9px; border-radius: var(--radius-sm);
}
/* Lange Bezeichnungen im Positionseditor auf 3 Zeilen einklappen, damit das
   Angebot übersichtlich bleibt; per Pfeil oben links auf-/zuklappbar, beim
   Bearbeiten (Fokus) immer voll sichtbar. */
.rt--inline.is-collapsed .rt-area {
  /* Genau 3 Zeilen (line-height 1.5 → 4.5em) plus vertikales Padding (14px).
     Harter Schnitt ohne Verlauf, damit alle drei Zeilen voll lesbar sind. */
  max-height: calc(4.5em + 14px); overflow: hidden;
}
/* Ein-/Ausklapp-Pfeil im linken Rand NEBEN dem Beschreibungsrahmen (nicht im
   Feld), grob unter dem Verschiebe-Griff der Position. Größer und klar sichtbar.
   Wird nur eingeblendet, wenn der Text tatsächlich überläuft. */
.rt-toggle {
  position: absolute; top: 6px; left: -24px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 24px; padding: 0;
  font-size: 18px; line-height: 1; cursor: pointer;
  color: var(--secondary, #5a6a12); background: none; border: none; border-radius: 4px;
}
.rt-toggle:hover { color: var(--text); background: var(--surface-2, #f1f1ef); }
.rt-toggle[hidden] { display: none; }

/* === CRM ===
   CRM-spezifische Politur (Verkaufschancen / Pipeline). Listen, Detail- und
   Formularseiten nutzen bereits die geteilten Primitives (.lv, .inv-editor,
   .inv-aside, .board-*). Hier nur die wenigen CRM-eigenen Ergänzungen, damit
   die geteilte app.css konfliktfrei bleibt. */

/* Phase-ändern-Formular (Detail + Board): kompakte Inline-Zeile, Marken-Fokus. */
.crm-stage-form { display: flex; gap: 8px; align-items: center; }
.crm-stage-select {
  flex: 1; min-width: 0; padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.crm-stage-select:focus {
  outline: none; border-color: var(--secondary); box-shadow: var(--ring);
}
.crm-stage-select--sm { font-size: 12px; padding: 5px 8px; }

/* Offene-Pipeline-Summe über dem Board. */
.crm-pipeline-total { margin: 4px 0 16px; }
.crm-pipeline-total strong { color: var(--primary-dark); font-variant-numeric: tabular-nums; }

/* Board-Karte: Akzentlinie in der ruhigen Markenfarbe, Hover hebt sie an. */
.crm-board .crm-card {
  border-left: 3px solid var(--secondary);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.crm-board .crm-card:hover { box-shadow: var(--shadow-sm); border-left-color: var(--primary); }
.crm-card-contact { font-size: 13px; margin-top: 2px; }
.crm-card-value { font-size: 13px; font-variant-numeric: tabular-nums; }
.crm-card-stage { display: flex; gap: 6px; margin-top: 10px; }
.board-col-empty { font-size: 13px; margin: 6px 2px; }
/* === /CRM === */

/* === LAGER === */
/* Rechtes Info-Panel + zugehörige Bausteine für die Lager-Listen
   (stock_overview, movement_list, procurement, open_deliveries,
   warehouse_list) und die Bestand-Detailseite. Spiegelt das inv-aside-Muster
   aus contacts/quotes, aber im full-bleed Listview-Body (.lv-body). */

/* Body in Tabelle (links, scrollt) + festes Info-Panel (rechts). */
.lv-split { display: flex; align-items: stretch; gap: 0; }
.lv-split .lv-main { flex: 1 1 auto; min-width: 0; overflow: auto; }
.lv-split .lv-aside { flex: 0 0 280px; width: 280px; border-left: 1px solid var(--border);
  background: var(--surface-2); padding: 16px; overflow: auto; }

.lv-panel { display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  position: sticky; top: 0; }
.lv-panel-block { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.lv-panel-block:last-child { border-bottom: none; }
.lv-panel-block h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }

.lv-sum-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 3px 0; font-size: 13px; }
.lv-sum-row > span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.lv-sum-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.lv-sum-total > span:last-child { font-size: 15px; font-weight: 700; }

.lv-panel-link { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--primary-dark, #6c7a12);
  text-decoration: underline; text-underline-offset: 2px; }
.lv-panel-link:hover { color: var(--text); }
.lv-panel-action { display: block; width: 100%; text-align: center; }

/* Pager unter der Bewegungstabelle. */
.lv-pager { display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 0 4px; }
.lv-pager-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lv-pager .is-disabled { opacity: .45; pointer-events: none; }

/* Auf schmalen Viewports klappt das Panel unter die Tabelle. */
@media (max-width: 900px) {
  .lv-split { flex-direction: column; }
  .lv-split .lv-aside { flex: 1 1 auto; width: auto; border-left: none;
    border-top: 1px solid var(--border); }
  .lv-panel { position: static; }
}
/* === /LAGER === */

/* === ABO-EDIT + OP-LISTE === */

/* ── Abo bearbeiten: nutzt das Beleg-Editor-Layout (.inv-editor/.inv-main/
   .inv-aside). Nur ein paar abo-spezifische Feinheiten, keine Editor-Logik. ── */
.abo-editor .kv.abo-kv { padding: 14px 0; }
.abo-editor .abo-kv dt { font-size: 12px; }
.abo-editor .inv-card > .abo-kv { margin-left: 22px; margin-right: 22px; }
.abo-editor .inv-card > .abo-amount-hint { margin: -4px 22px 16px; }
.abo-editor .abo-active-field { display: flex; align-items: center; }
.abo-editor .abo-active-check { font-weight: 500; font-size: 13px; }

/* Stornieren als eigene Gefahr-Karte (rot abgesetzt). */
.abo-editor .abo-danger { border-color: #f0c9c5; }
.abo-editor .abo-danger > h2 { color: var(--out-fg, #c2453f); }
.abo-editor .abo-danger > .abo-danger-body { padding: 14px 22px 18px; }

/* Rechtes Panel: Vorschau „Kommende Rechnungen". */
.abo-editor .abo-forecast { list-style: none; margin: 0; padding: 0; }
.abo-editor .abo-forecast-item { display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); }
.abo-editor .abo-forecast-item:last-child { border-bottom: none; }
.abo-editor .abo-forecast-amount { text-align: right; white-space: nowrap; }
.abo-editor .abo-aside { position: sticky; top: 16px; }

/* ── Offene Posten: Datatable-Listenstil (.lv) wie Angebot/Rechnung. Der
   .content:has(.lv)-Reset macht den Bereich full-bleed (padding:0), darum
   bekommen Intro/Hinweis/KPIs einen eigenen gepolsterten Kopf. ── */
.op-lv-head { padding: 10px 20px 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.op-lv-head > .op-lv-intro, .op-lv-head > .alert { flex: 1 0 100%; }
.op-lv-head .op-lv-intro { margin: 0 0 14px; max-width: 80ch; }
.op-lv-head .alert { margin-bottom: 14px; }
.op-lv .lv-actions { display: flex; gap: 8px; align-items: center; }
/* Aktionsspalte (Mahnen) rechtsbündig, ohne den btn-Block die Zeile sprengen
   zu lassen. */
.op-table td.num .btn { display: inline-block; }
/* Flexible Spaltenbreiten — die .lv-table ist table-layout:fixed. */
.op-table { table-layout: auto; }

/* === /ABO-EDIT + OP-LISTE === */

/* === KONTAKT-TABS ===
   Die Kontakt-Detailseite nutzt die gleichen Ordner-Reiter (.doc-tabs/.doc-tab)
   wie die Beleg-Editoren. Dort sind die Reiter aber <button>-Elemente mit
   Alpine-Umschaltung statt <a>/<span>. Hier nur die Button-Defaults
   normalisieren, damit sie exakt wie die Beleg-Reiter aussehen — die
   bestehenden .doc-tab-Regeln werden NICHT verändert. */
.contact-tabs { flex-wrap: wrap; }
.contact-tabs .doc-tab { font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: center; -webkit-appearance: none; appearance: none; }
.contact-tabs .doc-tab .tab-dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--plan-fg); opacity: .5; }
/* === /KONTAKT-TABS === */

/* === KUNDENAKTE: AKTIONSLEISTE (weclapp-Vorbild) ===
   Rechtsbündige Button-Zeile über dem Kundennamen — auf breiten Viewports in
   die Breadcrumb-Zeile (navtrail) hochgezogen. Dropdowns im Menü-Muster der
   Massenaktionen (Fläche/Schatten wie .lv-bulk-menu, Items = .inv-act-link). */
.akte-actions { display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.akte-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.akte-act { position: relative; }
.akte-act-caret { width: 12px; height: 12px; flex: 0 0 12px;
  transform: rotate(90deg); color: currentColor; }
.akte-act-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 220px; display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.akte-act-menu .inv-act-link { white-space: nowrap; }
/* Saldenliste: Zeitraum-Popover im Dokumente-Menü. */
.akte-saldo-form { display: flex; flex-direction: column; gap: 8px;
  margin: 2px 4px 6px; padding: 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); }
.akte-saldo-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.akte-saldo-quick .badge { cursor: pointer; font: inherit; font-size: 12px; }
.akte-saldo-range { display: flex; gap: 8px; }
.akte-saldo-range label { display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--muted); }
.akte-saldo-range input[type="date"] { font: inherit; font-size: 13px;
  padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); }
/* Breadcrumb-Zeile: gibt es eine Breadcrumb, rückt die Leiste in dieselbe
   Zeile hoch (Breadcrumb links, Buttons rechts). Auf schmalen Viewports
   bleibt sie eine eigene Zeile und darf umbrechen. */
@media (min-width: 1100px) {
  .content:has(> .breadcrumb) > .akte-actions { margin-top: -34px; }
}
/* === /KUNDENAKTE: AKTIONSLEISTE === */

/* === GUTSCHRIFT-POPUP (Vollstorno / Teilgutschrift) === */
.cn-modal { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.cn-dialog { max-width: 500px; }
.cn-modes { display: grid; gap: 10px; margin: 4px 0 14px; }
.cn-mode { display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
  align-items: start; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; transition: border-color .12s, background .12s; }
.cn-mode:hover { border-color: var(--accent, #2f8f5b); }
.cn-mode.is-on { border-color: var(--accent, #2f8f5b);
  background: color-mix(in srgb, var(--accent, #2f8f5b) 8%, transparent); }
.cn-mode input[type="radio"] { grid-row: span 2; margin-top: 2px; }
.cn-mode-title { font-weight: 600; font-size: 14px; }
.cn-mode-desc { grid-column: 2; font-size: 12.5px; color: var(--muted, #6b7a72); }
.cn-reason textarea { width: 100%; resize: vertical; }
/* === /GUTSCHRIFT-POPUP === */

/* === MONATSABSCHLUSS: Upload-/Drop-Karten ============================== */
/* Ruhiges Zeilenmuster (Owner 2026-07-20): die fünf Upload-Rubriken sind
   Zeilen INNERHALB der Karte, keine Karten-in-Karte. Rahmen/Fläche bekommt nur
   die aktive Drop-Zone. */
.mc-uploads { display: flex; flex-direction: column; }
.mc-up {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.mc-up + .mc-up { border-top-color: var(--border); border-radius: 0; }
.mc-up.is-drag {
  border-color: var(--success);
  border-style: dashed;
  border-radius: var(--radius);
  background: var(--ok-bg);
  box-shadow: 0 0 0 3px rgba(31,157,85,.10);
}
.mc-up__main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mc-up__icon {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted);
}
.mc-up.is-present .mc-up__icon { background: var(--primary); color: #000; }
.mc-up__icon svg { width: 20px; height: 20px; }
.mc-check {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
  font-size: 15px; font-weight: 700; line-height: 1;
}
.mc-check--ok { background: var(--primary); color: #000; }
.mc-up__info { flex: 1 1 220px; min-width: 0; }
.mc-up__title { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; }
.mc-up__hint { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.mc-up__form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mc-up__file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* Ein-Schritt-Upload: das Label IST der Knopf (die Dateiauswahl lädt sofort
   hoch). Feste Breite, damit alle fünf Zeilen exakt gleich große Knöpfe haben
   — vorher richtete sich die Breite nach dem Text. */
.mc-up__pick {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  flex: none; width: 132px;
  padding: 7px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.mc-up__pick:hover { background: var(--surface-2); }
.mc-up__pick svg { width: 15px; height: 15px; opacity: .7; }
/* Feste Breite: das Typ-Feld der „Sonstiges"-Zeile darf den Knopf daneben
   nicht aus der Flucht der übrigen Zeilen schieben. */
.mc-up__type {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-sm); background: var(--surface);
  flex: none; width: 190px;
}
.mc-up__type:focus { outline: none; border-color: var(--success); box-shadow: 0 0 0 3px rgba(31,157,85,.12); }
.mc-up__doc-form { display: inline; }
.mc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--off-bg); color: var(--off-fg);
}
.mc-chip--ok { background: var(--ok-bg); color: var(--ok-fg); }
.mc-up__docs { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; }
.mc-up__doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.mc-up__doc + .mc-up__doc { border-top: 1px solid var(--surface-2); }
.mc-up__doc-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mc-up__doc-left svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.mc-up__doc-left a { font-size: 13.5px; text-decoration: none; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-up__doc-left a:hover { text-decoration: underline; }
.mc-up__doc-right { display: flex; align-items: center; gap: 12px; flex: none; }
.mc-up__doc-time { font-size: 12px; color: var(--muted); }
.mc-up__doc [hidden] { display: none; }
.mc-up__rename { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-up__rename-input {
  padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; background: var(--surface); min-width: 180px;
}
.mc-up__rename-input:focus { outline: none; border-color: var(--success); box-shadow: 0 0 0 3px rgba(31,157,85,.12); }
/* === /MONATSABSCHLUSS ================================================== */

/* === LEISTUNG-REITER (Auftrag · Nachkalkulation / JobEntry) ============ */
/* Eigener, klar abgegrenzter Block für quotes/document_leistung.html —
   bewusst am Dateiende, damit parallele Änderungen am Beleg-Editor-Layout
   konfliktfrei mergen. Präfix: .je- (JobEntry). */

.je-card { margin-top: 18px; }
.je-card:first-child { margin-top: 0; }
.je-card > h2 .je-head-actions {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0;
}

/* Tabellen randlos in der Karte (wie .inv-lines im Beleg-Editor) */
.inv-card > .je-tablewrap,
.inv-editor .inv-card > .je-tablewrap { margin-left: 0; margin-right: 0; overflow-x: auto; }
.je-tablewrap .data-table tfoot td {
  padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface);
}
.je-empty { text-align: center; color: var(--muted); padding: 26px 0 !important; }
.je-pos { color: var(--ok-fg, #1b873b); }
.je-neg { color: #b3261e; }
.je-cardnote { margin: 0; padding: 10px 0 14px; }

/* Buchungsformular: 12-Spalten-Raster, Label über Feld (nutzt .form-field) */
.inv-card > .je-form,
.inv-editor .inv-card > .je-form { padding: 14px 0 16px; }
.je-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; }
.je-3  { grid-column: span 3; }
.je-6  { grid-column: span 6; }
.je-12 { grid-column: span 12; }
.je-grid textarea { width: 100%; resize: vertical; font: inherit; }
/* Verrechenbar-Checkbox bündig zur Feldzeile ausrichten */
.je-billable { align-self: end; display: flex; align-items: center; min-height: 46px; }
.je-billable .check { min-height: 36px; font-size: 13.5px; }
.je-billable input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--primary); flex: none;
}
.je-actions { display: flex; justify-content: flex-end; margin-top: 2px; }

/* Leiste „Leistungsnachweis senden" (einklappbar) */
.inv-card > .je-sendbar,
.inv-editor .inv-card > .je-sendbar {
  margin-left: 0; margin-right: 0; display: flex; gap: 8px; align-items: center;
  padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.je-sendbar input[type="email"] {
  flex: 1; max-width: 340px; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; background: var(--surface);
}
.je-sendbar input[type="email"]:focus {
  outline: 2px solid var(--addon-bg); border-color: var(--primary);
}
.je-inline-form { display: inline; margin: 0; }

@media (max-width: 900px) {
  .je-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .je-12 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .je-grid { grid-template-columns: minmax(0, 1fr); }
  .je-3, .je-6, .je-12 { grid-column: auto; }
  .je-sendbar { flex-wrap: wrap; }
}/* === /LEISTUNG-REITER ================================================== */

/* === UI-POLISH: Abstands- & Bündigkeits-Utilities (Audit 2026-07) ====== */
/* Einheitlicher vertikaler Rhythmus statt verstreuter Inline-Styles
   (style="margin-top:12/14/16/20/24px", Inline-Grids, kopierte Summen-
   Zellen). Alle Werte kommen aus der --space-Skala — Konsolidierung,
   kein Restyle. Eigener Block am Dateiende, damit parallele Arbeiten
   am Bank-Abgleich konfliktfrei mergen. */

/* Abstand zwischen Karten/Sektionen einer Maske (Standard: 16px). */
.stack { margin-top: var(--space-4); }
/* Größerer Abschnittswechsel, z. B. vor Verlauf/Gefahrenzone (24px). */
.stack-lg { margin-top: var(--space-6); }
/* Block-Abstand INNERHALB einer Karte (12px). */
.stack-sm { margin-top: var(--space-3); }

/* Kartentitel-Zeile mit Aktionen/Schaltern rechts vom Titel. */
.card-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }

/* Hinweiszeile, die direkt an die Karten-Überschrift anschließt
   (ersetzt das verstreute style="margin-top:-6px"). */
.card-hint { margin: -6px 0 14px; }

/* Volle Rasterbreite für ein Feld in .form-row / .inv-head-grid. */
.form-field--wide { grid-column: 1 / -1; }

/* .form-row-Varianten für ungleiche Spalten (z. B. PLZ/Ort = 1:2). */
.form-row--12 { grid-template-columns: 1fr 2fr; }
.form-row--121 { grid-template-columns: 1fr 2fr 1fr; }
@media (max-width: 720px) {
  .form-row--12, .form-row--121 { grid-template-columns: 1fr; }
}

/* Einzeilige Feldleiste für Inline-Formulare in Karten (Ansprechpartner,
   Kontaktkanäle, Datei-Upload …): Felder wachsen, brechen sauber um. */
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.field-row > .form-field { margin: 0; flex: 1 1 160px; }
.field-row > .form-field--fix { flex: 0 0 auto; }

/* Detail-Kopfzeilen: Aktionsleiste darf umbrechen (ersetzt die Inline-
   Varianten style="display:flex; gap:8/10px; flex-wrap:wrap"). */
.detail-actions { flex-wrap: wrap; }

/* Rechtsbündiger Summenblock unter Positionstabellen der Detail-Ansichten.
   Ersetzt die vierfach kopierten Inline-Zellen (quotes/purchasing/
   subscriptions/invoicing). Zeilen-Modifier: .sum-sub (USt-Zeilen),
   .sum-strong (Summe netto), .sum-total (Brutto mit Trennlinie). */
.sum-block { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.sum-block table { min-width: 280px; }
.sum-block td { padding: 4px 0 4px 16px; text-align: right; }
.sum-block .sum-sub td { padding-top: 2px; padding-bottom: 2px; }
.sum-block td.sum-strong { font-weight: 600; }
.sum-block .sum-total td { padding-top: 6px; padding-bottom: 6px; font-weight: 700;
  border-top: 1px solid var(--border); }

/* Beleg-Editor: Belegart-/USt-Schalter — die Vertikalabstände liefert seit
   dem Design-Audit der generische Karten-Rhythmus (16px oben/unten), die
   Seitenränder kommen weiterhin aus `.inv-card > *:not(h2)`. */

/* Editor-Seitenleiste: Platzhaltertext ohne Absatz-Außenabstand
   („Wähle oben einen Kunden/Lieferanten …"). */
.inv-panel-block .inv-panel-empty { margin: 0; }

/* Checkbox-Gruppe in einer Zeile (Artikel-Flags u. Ä.). */
.check-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Aktions-Button direkt unter einer Karten-Tabelle bekommt Luft,
   statt an der letzten Zeile zu kleben. */
.table + .btn, .table + .form-actions { margin-top: var(--space-3); }

/* Abgetrennter Unterabschnitt innerhalb einer Karte (Trennlinie oben). */
.card-sep { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* Einzelnes Eingabefeld außerhalb von .form-field (Status-Select,
   Sendungsnummer …) — gleicher Rahmen/Fokus wie die .form-field-Inputs,
   statt der 15-fach kopierten Inline-Deklaration. */
.input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: #fff; }
.input:focus { outline: 2px solid var(--addon-bg); border-color: var(--primary); }
/* Kompakte Variante (Filterleisten, z. B. Audit-Log) — die Klasse wurde in
   Templates bereits verwendet, war bisher aber nirgends definiert. */
.input--sm { padding: 6px 9px; font-size: 13px; }
/* === /UI-POLISH ======================================================== */
/* ── OCR-Konfidenz-Markierung (EK-Beleg-Editor) ─────────────────────────
   Direkt nach „Beleg auslesen (OCR)" markiert der Editor automatisch
   befüllte Felder nach ihrer Erkennungs-Konfidenz: „mittel" = dezent gelb
   (bitte prüfen), „niedrig" = orange (unsicher). „hoch" wird bewusst nicht
   markiert (kein Grün-Rauschen). Die Klasse entfernt das Inline-JS, sobald
   der Nutzer das Feld anfasst. */
.ocr-conf-mittel {
  border-color: var(--st-warn-fg, #a96a18) !important;
  background-color: var(--st-warn-bg, #fbf1e2);
}
.ocr-conf-niedrig {
  border-color: #d9480f !important;
  background-color: #fdeee3;
}

/* ═══ STICKY-SPEICHERLEISTE + TOAST-MELDUNGEN (Baustein 3) ═══════════════════
   Teil A: Die Speicherleiste (.inv-actionbar, definiert weiter oben) klebt
   bereits per position:sticky am unteren Viewport-Rand ihrer Formularspalte —
   hier nur die Ergänzung für schmale Screens: Leiste über die volle Breite,
   ohne „Karten-Inseln"-Look (Ecken unten eckig, seitlich randlos).
   Teil B: Django-messages als Toast-Stack UNTEN statt Banner oben.
   Desktop: rechts unten gestapelt. Mobil: volle Breite über der Unterkante.
   success/info/warning blenden sich nach 10 s aus (Fortschrittsbalken =
   Zeitgeber, siehe Skript in base.html; Hover pausiert beides), error bleibt
   stehen, bis es aktiv weggeklickt wird. */

/* ── Teil A: Speicherleiste auf schmalen Screens randlos ── */
@media (max-width: 720px) {
  /* .content hat 28px/32px Innenabstand — die Leiste zieht sich seitlich und
     unten darüber hinaus und wirkt so wie eine fixe Systemleiste. */
  .inv-actionbar { margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8));
    border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
}

/* ── Teil B: Toast-Stack ── */
.toast-stack {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 120;
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(400px, calc(100vw - 2 * var(--space-5)));
  pointer-events: none; /* Klicks daneben gehen an die Seite; Karten selbst fangen wieder */
}
/* Seiten MIT Sticky-Speicherleiste: Toasts ÜBER der Leiste stapeln, nicht
   dahinter/darauf (Owner-Feedback 18.07. — „RB-0001 wurde unterschrieben"
   kollidierte optisch mit der Leiste). ~64px = Leistenhöhe + Luft. */
body:has(.inv-actionbar) .toast-stack { bottom: calc(var(--space-5) + 64px); }
.toast {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-2);
  pointer-events: auto; overflow: hidden;
  padding: var(--space-3) var(--space-4); padding-right: var(--space-2);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--muted); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  opacity: 1; transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast-msg { flex: 1 1 auto; font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
  overflow-wrap: anywhere; }
.toast-close {
  flex: none; width: 26px; height: 26px; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-sm);
  font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer;
}
.toast-close:hover { background: var(--subtle); color: var(--text); }
.toast-close:focus-visible { outline: none; box-shadow: var(--ring); }

/* Akzentfarben je Meldungstyp — Karte bleibt weiß, links Farbkante. */
.toast--success { border-left-color: var(--success); }
.toast--success .toast-progress { background: var(--success); }
.toast--warning { border-left-color: var(--st-warn-fg); }
.toast--warning .toast-progress { background: var(--st-warn-fg); }
.toast--error   { border-left-color: var(--danger-strong); }
.toast--info,
.toast--debug   { border-left-color: var(--border-strong); }
.toast--info .toast-progress,
.toast--debug .toast-progress { background: var(--border-strong); }

/* Auto-Hide-Zeitgeber: dünner Balken läuft in 10 s auf 0. Sein animationend
   löst das Entfernen aus — Hover pausiert deshalb Balken UND Auto-Hide. */
.toast-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  transform-origin: left; animation: toast-countdown 10s linear forwards;
}
.toast:hover .toast-progress { animation-play-state: paused; }
@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  /* Kein laufender Balken; das Skript blendet dann per schlichtem Timer aus. */
  .toast-progress { animation: none; visibility: hidden; }
  .toast { transition: none; }
}

/* Mobil: volle Breite, unten bündig gestapelt. */
@media (max-width: 720px) {
  .toast-stack { left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
    width: auto; }
  body:has(.inv-actionbar) .toast-stack { bottom: calc(var(--space-3) + 96px); }
}
/* === /STICKY-SPEICHERLEISTE + TOASTS ==================================== */

/* === NATIVER DIALOG (<dialog class="app-dialog">) =======================
   Wiederverwendbares Popup auf Basis des nativen <dialog>-Elements
   (öffnen via showModal()). Erstnutzer: darlehen („Rate buchen"). */
.app-dialog {
  width: 100%; max-width: 460px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-pop); padding: var(--space-6);
}
.app-dialog::backdrop { background: rgba(20, 35, 28, .45); }
.app-dialog h2 { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }
.app-dialog .form-field { margin-bottom: var(--space-3); }
.app-dialog .form-field label { display: block; font-size: var(--fs-xs);
  font-weight: 600; color: var(--muted); margin-bottom: var(--space-1); }
.app-dialog .form-field select,
.app-dialog .form-field input { width: 100%; }
.app-dialog .form-actions { margin-top: var(--space-4); }
/* === /NATIVER DIALOG ==================================================== */
/* ═══ DESIGN-AUDIT 2026-07-12: Ränder, Titelbänder, Mobile ══════════════════
   Konsolidierung nach Owner-Feedback („Abstände zu den Rändern, komplette
   Anpassung im gesamten System"). Nur Abstände/Konsistenz, kein Restyle. */

/* ── Kartentitel-Zeile MIT Aktionen als vollwertiges Titelband ──
   Karten wie „Positionen" im EK-Editor tragen ihren Titel in einer
   .card-head-Zeile (h2 + Schalter rechts). Ohne diese Regel fehlte dort das
   Uppercase-Titelband mit Akzentbalken — die Karte sah „nackt" aus und der
   Kopf klebte am Kartenrand. Optik exakt wie `.inv-card > h2`. */
.inv-card > .card-head,
.inv-editor .inv-card > .card-head {
  margin: 0; width: 100%; box-sizing: border-box; flex-wrap: wrap;
  background: var(--surface-2); color: var(--primary-ink);
  padding: 7px 22px 7px 19px; min-height: 40px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--secondary);
  border-radius: var(--radius) var(--radius) 0 0;
}
.inv-card > .card-head h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary-ink);
}
.inv-editor .inv-card > .card-head { min-height: 36px; }
.inv-editor .inv-card > .card-head h2 { font-size: 11px; }

/* ── EK-Editor: Belegvorschau-Spalte skaliert mit dem Bildschirm ──
   Die fixen 480px verdrängten auf Laptops (≤1500px) das Formular; die
   generischen .inv-editor-Stufen (300/284px) griffen wegen geringerer
   Spezifität nie. Eigene Stufen für den Odoo-Split. */
@media (min-width: 1321px) and (max-width: 1560px) {
  .inv-editor.ek-editor:not(.aside-collapsed) { grid-template-columns: minmax(0, 1fr) 420px; }
}
@media (min-width: 1001px) and (max-width: 1320px) {
  .inv-editor.ek-editor:not(.aside-collapsed) { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ── Warn-/Gefahr-Karten (Kreditlimit, Grenzrabatt …) ──
   Ersetzt die kopierten Inline-Deklarationen (border-left + Hex-Hintergrund)
   in _doc_head/document_detail. Token-Farben statt roher Hex-Werte. */
.card--danger { border-left: 4px solid var(--danger-strong); background: var(--danger-soft); }
.card--danger > h2 { color: var(--danger-strong); margin-top: 0; }
.card--warn { border-left: 4px solid var(--st-warn-fg); background: var(--st-warn-bg); }
.card--warn > h2 { color: var(--st-warn-fg); margin-top: 0; }
.card--ok { border-left: 4px solid var(--success); background: var(--ok-bg); }
.card--ok > h2 { color: var(--success-dark); margin-top: 0; }

/* ── Summen-Tabelle in Karten (Zahllast, Forderung, EK-Summen …) ──
   Label links, Betrag rechts, Zwischenzeilen gedämpft, Summenzeile mit
   Trennlinie — ersetzt die je Maske kopierten Inline-Zellen. */
.sum-table { width: 100%; border-collapse: collapse; }
.sum-table td { padding: 4px 0; }
.sum-table td + td { text-align: right; font-variant-numeric: tabular-nums; }
.sum-table .sum-sub td { padding: 2px 0; }
.sum-table .sum-total td { padding: 6px 0; font-weight: 700; border-top: 1px solid var(--border); }
.sum-table td.sum-strong { font-weight: 600; }
/* Fette Gesamtsummen-Zeile in Datentabellen (GuV, Kontoblatt, Verrechnung). */
.data-table tr.row-total td, .table tr.row-total td {
  padding-top: 10px; padding-bottom: 10px; font-weight: 700;
  border-top: 2px solid var(--border-strong); white-space: nowrap;
}
/* Klassen-Zwischenüberschrift + -zwischensumme (Bilanz, Saldenliste). */
.data-table tr.row-subhead td {
  padding-top: 9px; padding-bottom: 9px; color: var(--primary-ink);
  font-size: 12px; letter-spacing: .01em; background: var(--primary-softer);
  border-top: 1px solid var(--primary-soft); border-bottom: 1px solid var(--primary-soft);
}
.data-table tr.row-subtotal td {
  font-weight: 600; border-top: 1px solid var(--border-strong);
  padding-top: 7px; padding-bottom: 9px; color: var(--text-primary);
}
/* Summen-/Zwischensummenzeilen tragen dieselben Tabellenziffern wie die
   Werte darüber — auch dort, wo die Zelle (noch) kein .num trägt. So stehen
   Tausenderpunkt und Kommastellen exakt untereinander. */
.data-table tr.row-total td, .data-table tr.row-subtotal td,
.table tr.row-total td { font-variant-numeric: tabular-nums; }

/* ── Filterzeile (Zeitraum/Jahr über einer Auswertung) ─────────────────
   KEINE Sektion: eine Auswahlleiste rechtfertigt keine eigene Karte mit
   Akzentbalken und Überschrift (Owner 2026-07-20: „sieht verherend aus").
   Felder und Buttons sitzen auf EINER Grundlinie, gleiche Höhe, gleiche
   Feldbreite — Jahr/Zeitraum bleiben native Selects (kurze Enum-Auswahl,
   von der Combobox-Regel ausgenommen), sehen aber einheitlich aus. */
.filter-bar {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.filter-bar .filter-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.filter-bar .filter-field > label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  letter-spacing: .02em; text-transform: uppercase;
}
/* Feste, gleiche Feldbreite — sonst wird „Zeitraum" (längere Optionen)
   breiter als „Jahr" und die Leiste franst aus. */
.filter-bar select, .filter-bar input {
  height: 38px; width: 190px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.filter-bar select:focus, .filter-bar input:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
/* Buttons einer Filterzeile sind untereinander gleich groß und fluchten mit
   der Unterkante der Felder (Owner-Regel „Buttons in einer Gruppe gleich groß"). */
.filter-bar .btn {
  height: 38px; min-width: 132px; padding: 0 var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 700px) {
  .filter-bar { gap: var(--space-2); }
  .filter-bar .filter-field, .filter-bar select, .filter-bar input,
  .filter-bar .btn { width: 100%; min-width: 0; }
}

/* ── Auswertungs-Layout: Zahlen links, Infoblock rechts ────────────────
   Hauptseiten-Muster für die Auswertungen (UVA, GuV …). Eigene Stufe statt
   .ek-editor: dessen 480px sind für eine gescannte Belegvorschau gedacht und
   drückten hier den Zahlenteil zusammen bzw. schnitten den Infoblock ab. */
.inv-editor.report-editor { grid-template-columns: minmax(0, 1fr) 340px; }
.inv-editor.report-editor.aside-collapsed { grid-template-columns: minmax(0, 1fr) 40px; }
@media (max-width: 1320px) {
  .inv-editor.report-editor:not(.aside-collapsed) { grid-template-columns: minmax(0, 1fr) 300px; }
}
/* Der Infoblock darf nie breiter werden als seine Rasterspalte — sonst läuft
   sein Inhalt (Mini-Kontoauszug) rechts aus dem sichtbaren Bereich. */
.inv-aside { min-width: 0; }
.inv-aside .inv-card { max-width: 100%; overflow: hidden; }

/* Mini-Kontoauszug im Infoblock der GuV: feste Spaltenbreiten, langer
   Buchungstext wird gekürzt statt die Tabelle über den Kartenrand zu drücken. */
.konto-panel-facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--space-3); font-size: var(--fs-sm); margin-bottom: var(--space-2);
}
.konto-panel-facts > span, .konto-panel-facts > strong { min-width: 0; overflow-wrap: anywhere; }
.konto-panel-table { table-layout: fixed; width: 100%; font-size: 12px; }
.konto-panel-table .konto-panel-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-table.konto-panel-table thead th,
.data-table.konto-panel-table tbody td { padding-left: 0; padding-right: var(--space-2); }
.data-table.konto-panel-table thead th:last-child,
.data-table.konto-panel-table tbody td:last-child { padding-right: 0; }
.konto-panel-table .konto-panel-amount { width: 96px; }
.konto-panel-table .konto-panel-date { width: 62px; }

/* Gefahr-Hinweistext (Fehlermeldungen in Listen/Zeilen). */
.text-danger { color: var(--danger-strong); }
/* Hervorgehobene Zahlenzelle (Leitwert einer Zeile, z. B. Bestand im
   Cashflow-Plan) — ersetzt style="font-weight:600" im Markup. */
.num-strong { font-weight: 600; }
/* §132-/Storno-Sperrchip im Beleg-Editor (Klasse existierte im Markup,
   lief aber rein über kopierte Inline-Styles). */
.inv-lock-chip { display: inline-flex; align-items: center; gap: 5px;
  background: var(--st-danger-bg); color: var(--st-danger-fg); font-weight: 600;
  border-radius: 999px; padding: 2px 10px; line-height: 1.6; }
/* Checkbox-Auswahlzeile in Dialog-/Auswahllisten (Rechnung-erstellen u. Ä.). */
.check-line { display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--border); }
/* Gefahr-Aktion in Dropdown-Menüs (z. B. „Kontakt löschen"). */
.dropdown-item--danger { color: var(--danger-strong); border: 1px solid #f6c9c4;
  border-radius: 8px; width: auto; padding: 9px 16px; background: var(--danger-soft); }

/* ── Abstands-Utilities (Ergänzung zu .stack/.stack-sm/.stack-lg) ──
   .m-0/.pre-line stehen VOR den stack-Klassen, damit Kombinationen wie
   „m-0 stack-b" funktionieren (Reset + gezielter Einzelabstand). */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.pre-line { white-space: pre-line; margin: 0; }
.nowrap { white-space: nowrap; }
.stack-xs { margin-top: var(--space-2); }
.stack-b { margin-bottom: var(--space-4); }
/* Re-Deklaration der frühen stack-Klassen, damit sie auch NACH .m-0 gewinnen. */
.stack { margin-top: var(--space-4); }
.stack-sm { margin-top: var(--space-3); }
.stack-lg { margin-top: var(--space-6); }
/* Zahlen-/Betragszellen: überall rechtsbündig mit Tabellenziffern — ersetzt
   das 100-fach gestreute style="text-align:right;". */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Mobile: die Off-Canvas-Navigation, kompakten Seitenränder und
   Touch-Ziele liefert mobile.css (via pwa_head.html; Hamburger injiziert
   pwa.js). Hier nur zwei Korrekturen dazu: ── */
@media (max-width: 899.98px) {
  /* Kennzahlenleiste unter dem Listenkopf an die 12px-Mobilränder angleichen. */
  .lv-subbar { padding: 8px 12px; gap: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}
/* Speicherleiste randlos: mobile.css setzt .content auf 12px Seitenränder —
   die alte -32px-Regel (Stand: 32px-Content-Padding) lief 20px über den
   Viewport hinaus und erzeugte horizontales Scrollen im Beleg-Editor. */
@media (max-width: 720px) {
  .inv-actionbar { margin-left: -12px; margin-right: -12px; }
}
/* === /DESIGN-AUDIT 2026-07-12 =========================================== */

/* ── Einstellungen: Bereichsseite + Sub-Navigation ─────────────────────────
   core:settings_home rendert je Rubrik eine .card mit .settings-grid aus
   Kachel-Links; core/_settings_subnav.html sitzt als umbrechende Pill-Leiste
   oben auf JEDER Einstellungs-Seite (bewusst Pills statt .doc-tab: die ~20
   Punkte brechen in mehrere Zeilen um, was mit den auf der Trennlinie
   sitzenden Belegreitern kaputt aussähe). */
.settings-grid { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.settings-tile { display: flex; align-items: flex-start; gap: 12px;
  padding: var(--space-3) var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .12s, background-color .12s, box-shadow .12s; }
.settings-tile:hover { border-color: var(--secondary);
  background: var(--primary-softer); box-shadow: var(--shadow-sm); }
.settings-tile-icon { width: 34px; height: 34px; flex: none; margin-top: 1px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--primary-softer); color: var(--primary-ink);
  transition: background-color .12s; }
.settings-tile-icon svg { width: 17px; height: 17px; }
.settings-tile:hover .settings-tile-icon { background: var(--primary-soft); }
.settings-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings-tile-title { font-weight: 600; color: var(--text); }
.settings-tile-desc { font-size: var(--fs-sm); color: var(--muted); }

/* Tarif-Seite: Paket-Kacheln (ersetzt frühere Inline-Styles). */
.tarif-packages { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarif-package { margin: 0; }
.tarif-package.is-current { border-color: var(--secondary);
  box-shadow: 0 0 0 1px var(--secondary); }
.tarif-modules { margin: 8px 0 0; padding-left: 18px; }
@media (max-width: 900px) { .tarif-packages { grid-template-columns: 1fr; } }

/* ── Einstellungs-Seitenleiste ────────────────────────────────────────────
   Linkes Untermenü aller Einstellungs-Seiten (core/_settings_subnav.html).
   main.content schaltet per :has() auf zwei Spalten; jedes andere Kind wird
   in Spalte 2 gezwungen, damit Seiten mit mehreren Wurzel-Elementen nicht
   unter die Leiste rutschen. Die Leiste selbst scrollt bei Überlänge. */
main.content:has(> .settings-nav) {
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  gap: 22px; align-items: start;
}
main.content:has(> .settings-nav) > :not(.settings-nav) { grid-column: 2; }
.settings-nav {
  grid-column: 1; grid-row: 1 / span 40;
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.settings-nav-group { display: flex; flex-direction: column; gap: 1px; }
.settings-nav-heading { margin: 12px 10px 4px; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); }
.settings-nav-home, .settings-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; font-size: var(--fs-sm);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color .12s, background .12s;
}
.settings-nav-home { color: var(--ink); }
.settings-nav-item { color: var(--muted); }
.settings-nav-home:hover, .settings-nav-item:hover {
  color: var(--ink); background: var(--primary-softer); }
.settings-nav-item.is-active { color: var(--on-ink); background: var(--ink); }
.settings-nav-icon { width: 15px; height: 15px; flex: none; }
@media (max-width: 960px) {
  /* Schmale Viewports: Leiste als horizontal scrollbarer Streifen oben. */
  main.content:has(> .settings-nav) { display: block; }
  .settings-nav { position: static; max-height: none; flex-direction: row;
    overflow-x: auto; margin-bottom: 16px; }
  .settings-nav-group { flex-direction: row; }
  .settings-nav-heading { display: none; }
}
/* ── Sticky-Speicherleiste: Auto-Hide bis zur ersten Änderung (Baustein 3) ──
   Zusammen mit core/actionbar.js: eine .inv-actionbar[data-autohide] bleibt
   unsichtbar (Platz bleibt reserviert — kein Layout-Sprung), bis das Formular
   dirty ist; dann blendet sie sich dezent von unten ein. Aktivierung pro
   Maske über das data-Attribut (derzeit nur Bank-/Kassa-Masken). */
.inv-actionbar[data-autohide] { transition: opacity .22s ease, transform .22s ease; }
.inv-actionbar--hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* ── Kassa / Kassabuch ──────────────────────────────────────────────────── */
/* Filterzeile unter den Kassen-Reitern: Monat-Select im App-Stil (gleiches
   Muster wie die Abgleich-Filterleiste), rechtsbündig neben den Reitern. */
.kassa-toolbar { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 18px 0 16px; }
.kassa-toolbar .doc-tabs { flex: 1 1 auto; margin: 0; }
.kassa-toolbar--plain { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.kassa-monat { display: flex; align-items: center; gap: 8px; margin-left: auto;
  padding-bottom: 6px; }
.kassa-monat label { font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em; }
.kassa-monat select { height: 32px; padding: 0 30px 0 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface, #fff); color: var(--text);
  font-size: 14px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a756e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.kassa-monat select:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-softer, #f1f6da); }

/* Dezenter Hinweis-Punkt im Kassabuch: Ausgabe ohne zugeordneten Beleg. */
.kassa-nobeleg { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.kassa-nobeleg::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn, #e0a82e); flex: none; }

/* Kassasturz: kleines Popover unterm Seitenkopf (natives <details>). */
.kassa-sturz { position: relative; }
.kassa-sturz > summary { list-style: none; cursor: pointer; }
.kassa-sturz > summary::-webkit-details-marker { display: none; }
.kassa-sturz-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 280px; padding: 14px; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20, 35, 28, .16); }
.kassa-sturz-panel .form-field { margin-bottom: 10px; }
.kassa-sturz-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Beleg-Zuordnung in der Kassenbewegungs-Maske: Kandidatenliste links,
   Belegvorschau rechts (nutzt die bestehenden .ek-docview-Frames). */
.kassa-zuord-grid { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(240px, 4fr);
  gap: 16px; align-items: start; }
@media (max-width: 860px) { .kassa-zuord-grid { grid-template-columns: 1fr; } }
.kassa-zuord-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kassa-zuord-tools input[type="search"] { flex: 1 1 auto; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface, #fff); color: var(--text); font-size: 14px; }
.kassa-zuord-tools input[type="search"]:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-softer, #f1f6da); }
.kassa-zuord-list { max-height: 320px; overflow: auto; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.kassa-zuord-row { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border: 0; border-bottom: 1px solid var(--border);
  background: var(--surface, #fff); text-align: left; cursor: pointer; font: inherit; }
.kassa-zuord-row:last-child { border-bottom: 0; }
.kassa-zuord-row:hover { background: var(--primary-softer, #f6fae6); }
.kassa-zuord-row.is-selected { background: var(--primary-softer, #f1f6da);
  box-shadow: inset 3px 0 0 var(--primary); }
.kassa-zuord-main { flex: 1 1 auto; min-width: 0; }
.kassa-zuord-nr { font-weight: 600; font-size: 13.5px; }
.kassa-zuord-meta { font-size: 12.5px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.kassa-zuord-amt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 13.5px; white-space: nowrap; }
.kassa-zuord-amt.is-exact { color: var(--in-fg, #1f9d57); }
.kassa-zuord-empty { padding: 14px; }
.kassa-zuord-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px;
  flex-wrap: wrap; }
.kassa-zuord-preview .ek-docview-frame { height: 320px; }
.kassa-zuord-preview-empty { display: grid; place-items: center; height: 320px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13.5px; padding: 12px; text-align: center; }
.kassa-zuord-selected { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; padding: 8px 11px; border: 1px solid var(--primary-soft);
  background: var(--primary-softer, #f6fae6); border-radius: var(--radius-sm);
  font-size: 13.5px; }

/* ═══ Globale Form-Controls (Einstellungs-Redesign 2026-07-14) ═════════════
   Native <select>, Checkboxen und Radios sahen bisher überall nach Browser-
   Default aus (grauer System-Chevron, blaues Standard-Häkchen). Hier bekommen
   alle drei APP-WEIT denselben Look im Designsystem. Bewusst ganz am Datei-
   ende: die Regeln ergänzen/übersteuern modulspezifische Basis-Styles
   (Padding rechts für den Chevron gewinnt per Spezifität + Reihenfolge). */

/* — Selects: eigener Chevron, gleiche Höhe/Radius/Border wie Text-Inputs — */
select { font: inherit; color: var(--text); }
/* Klassenlose Selects (z. B. nackte Django-Widgets) auf Input-Niveau heben.
   :where() hält die Spezifität bei 0 — Modul-Styles gewinnen weiterhin. */
select:where(:not([class])) {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background-color: var(--surface, #fff); padding: 9px 12px; min-height: 40px;
  max-width: 100%;
}
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a756e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
select:not([multiple]):not([size]):focus {
  outline: none; border-color: var(--secondary); box-shadow: var(--ring);
}
select:disabled { opacity: .55; cursor: not-allowed; }

/* — Checkboxen & Radios: Custom-Optik statt Browser-Default ————————
   appearance:none + eigenes Häkchen/Punkt, damit auch das blaue Standard-
   Häkchen verschwindet und alle Plattformen identisch aussehen. Gefüllt wird
   in Markenfarbe (Neon-Fläche + dunkle Tinte, wie .btn--primary);
   accent-color bleibt als Fallback für exotische Widgets gesetzt. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1.5px solid var(--border-strong); border-radius: 5px;
  background-color: var(--surface, #fff);
  background-position: center; background-repeat: no-repeat;
  background-size: 11px auto;
  cursor: pointer; vertical-align: text-bottom;
  accent-color: var(--primary);
  transition: border-color .12s ease, background-color .12s ease,
    box-shadow .12s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover {
  border-color: var(--secondary);
}
input[type="checkbox"]:checked, input[type="radio"]:checked,
input[type="checkbox"]:indeterminate {
  border-color: var(--primary-hover); background-color: var(--primary);
}
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8l6-6.4' fill='none' stroke='%2315170a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2'%3E%3Cpath d='M1.5 1h9' fill='none' stroke='%2315170a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Radio-Punkt: innerer Ring in Flächenfarbe lässt die Mitte als Punkt stehen. */
input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--surface, #fff); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none; border-color: var(--secondary); box-shadow: var(--ring);
}
input[type="radio"]:checked:focus-visible {
  box-shadow: inset 0 0 0 3px var(--surface, #fff), var(--ring);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  opacity: .5; cursor: not-allowed;
}

/* Checkbox-Listen (Django CheckboxSelectMultiple + label.check-Stapel):
   ruhige vertikale Liste ohne ul-Einzug. */
.check-list { display: flex; flex-direction: column; gap: 7px; }
.check-list ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
.check-list label { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px; cursor: pointer; margin: 0; }
.check-list input[type="checkbox"],
.check-list input[type="radio"] { flex: none; }
/* ══ Topbar-Suche (Agent: feature/suchfeld-topbar, 2026-07-14) ═══════════════
   Das große Listen-Suchfeld sitzt in der Kopfzeile zwischen „+ Neu" (links)
   und Glocke/Benutzer (rechts). Seiten füllen {% block topbar_search %} in
   base.html; leere Seiten lassen die Mitte frei — der Container wirkt dann
   nur als Spacer (ersetzt .topbar-spacer). */
.topbar-search { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.topbar-search .lv-search-form { width: 100%; }
/* Ohne Suchfeld war die Listen-Leiste unnötig hoch — flacher machen. */
.lv-bar { padding-top: 8px; padding-bottom: 8px; min-height: 44px; }
/* ═════════════ Bearbeiter:in-Combobox im Belegkopf (handler-combo) ═════════════
   Eigener, klar abgegrenzter Abschnitt (parallele Agenten: app.css nur am
   Dateiende erweitern). Baut auf den bestehenden prod-combo-/cust-combo-Bausteinen
   auf; hier nur die Initialen-Chips der Mitarbeiter-Einträge und der
   „— niemand —"-Eintrag. */
.handler-combo .prod-combo-item.handler-item { display: flex; align-items: center; gap: 8px; }
.handler-combo .handler-ini { flex: none; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink);
  color: var(--primary); font-weight: 700; font-size: 10px; }
.handler-combo .handler-item-none .prod-combo-name { color: var(--muted); }

/* ═════════════ Topbar-Suche: Live-Vorschläge (topbar-suggest) ═════════════
   Eigener Abschnitt am Dateiende (parallele Agenten). Dropdown unter der
   Such-Pille im Topbar-Slot, gerendert von core/topbar-suggest.js aus
   core:search_suggest. Optik nach dem prod-combo-menu-Muster (Fläche,
   Rahmen, Radius, Schatten); Hover = --primary-softer, Tastatur-Auswahl =
   dunkle Ink-Zeile wie .data-table tr.is-active. */
.topbar-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 90;
  max-height: 340px; overflow-y: auto; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(20, 35, 28, .16);
  padding: 4px;
}
.topbar-suggest-group {
  padding: 7px 10px 3px; font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.topbar-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: calc(var(--radius) - 3px); cursor: pointer;
  color: var(--text); text-decoration: none; font-size: 13px; line-height: 1.3;
}
.topbar-suggest-item svg { flex: none; width: 15px; height: 15px; color: var(--muted); }
.topbar-suggest-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-suggest-sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 12px;
}
.topbar-suggest-meta {
  margin-left: auto; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.topbar-suggest-item:hover { background: var(--primary-softer); }
.topbar-suggest-item.is-active { background: var(--ink); color: var(--on-ink); }
.topbar-suggest-item.is-active svg,
.topbar-suggest-item.is-active .topbar-suggest-sub,
.topbar-suggest-item.is-active .topbar-suggest-meta { color: var(--on-ink-muted); }
.topbar-suggest-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; }

/* ═════════════ Gemeinsame Combobox ({% combo_select %}) ═════════════
   Eigener Abschnitt am Dateiende (parallele Agenten). Ergänzt die
   prod-combo-/cust-combo-Bausteine um Gruppen-Überschriften (Optik wie
   .topbar-suggest-group) und den gedämpften Leer-Eintrag (wie
   .handler-item-none). */
.prod-combo-group {
  padding: 7px 10px 3px; font-size: 11px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.prod-combo-item.combo-item-none .prod-combo-name { color: var(--muted); }
/* Kassa-Auswahl im EK-Belegkopf als Combobox: gleiche Maße wie die frühere
   select-Regel (.bf-kassa-select select) für das Suchfeld übernehmen. */
.bf-kassa-select .prod-combo { min-width: 170px; }
.bf-kassa-select .inv-prod-search { width: auto; min-width: 170px; padding: 7px 11px;
  padding-right: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; background: var(--surface); }
/* Filter-Comboboxen in Listen-Leisten: feste Grundbreite, damit der
   flex-Container sie nicht kollabieren lässt (Breite wie .mail-search input). */
.lv-bar .prod-combo { width: 220px; }

/* ── Projekt-Aufgabenliste (Notion-Muster): Status-Gruppen als einklappbare
   Karten, Aufgaben als Zeilen (Haken | Titel | Verantwortliche:r | Fälligkeit |
   Priorität), Inline-Titel-Edit und Quick-Add je Gruppe. Gilt auch für die
   „Meine Aufgaben"-Ansicht (Fälligkeits-Gruppen). ────────────────────────── */
.tl { display: flex; flex-direction: column; gap: var(--space-4); max-width: 1100px; }
.tl-group { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); }
.tl-group--overdue { border-color: var(--st-danger-fg); }
.tl-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 13px;
  border-radius: var(--radius); user-select: none; }
.tl-group-head::-webkit-details-marker { display: none; }
.tl-group-head:hover { background: var(--surface-2); }
.tl-caret { width: 10px; height: 10px; color: var(--muted); flex: none;
  transition: transform .12s ease; transform: rotate(-90deg); }
details[open] > .tl-group-head .tl-caret { transform: none; }
.tl-group-head .pj-count { margin-left: 2px; }
.tl-rows:not(:empty) { border-top: 1px solid var(--border); }
.tl-row { display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 190px 96px 96px;
  align-items: center; gap: 10px; padding: 6px 14px 6px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.tl-row:last-child { border-bottom: 0; }
.tl-row:hover { background: var(--surface-2); }
.tl-check { justify-self: start; }
.tl-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tl-milestone { color: var(--secondary); flex: none; }
.tl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; border-radius: 3px; padding: 2px 3px; margin: -2px -3px; }
.tl-name:hover { background: var(--secondary-soft); }
.tl-row.is-done .tl-name { color: var(--muted); text-decoration: line-through; }
.tl-project { flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; color: var(--muted); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; }
.tl-project:hover { color: var(--text); border-color: var(--border-strong); }
.tl-open { flex: none; margin-left: auto; font-size: 12px; color: var(--muted);
  text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 2px 8px; background: var(--surface); visibility: hidden; }
.tl-row:hover .tl-open { visibility: visible; }
.tl-open:hover { color: var(--text); border-color: var(--border-strong); }
.tl-rename-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13.5px;
  padding: 2px 6px; border: 1px solid var(--secondary); border-radius: 3px;
  background: var(--surface); outline: none; }
/* Verantwortliche:r — Zeilen-Combobox (prod-combo-Muster, Menü ankert lokal). */
.tl-assign { position: relative; min-width: 0; }
.tl-assign-btn { display: flex; align-items: center; gap: 6px; max-width: 100%;
  border: 0; background: none; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--text); padding: 3px 6px; border-radius: var(--radius-sm); }
.tl-assign-btn:hover { background: var(--secondary-soft); }
.tl-assign-val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tl-assign-val .pj-avatar { flex: none; }
.tl-assign-name { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.tl-assign-extra { flex: none; font-size: 11px; color: var(--muted); }
.tl-assign-none { color: var(--muted); }
.tl-assign-pop { position: absolute; z-index: 70; top: calc(100% + 4px); left: 0;
  width: 250px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(20, 35, 28, .16);
  padding: 6px; }
.tl-assign-pop .prod-combo-menu { position: static; box-shadow: none; border: 0;
  padding: 4px 0 0; max-height: 240px; }
.tl-assign-pop .prod-combo-item .pj-avatar { width: 20px; height: 20px;
  font-size: 9px; flex: none; }
.tl-due { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-due.is-overdue { color: var(--st-danger-fg); font-weight: 600; }
/* Priorität als Punkt-Badge (Niedrig grau, Mittel blau, Hoch ocker, Dringend rot). */
.tl-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); white-space: nowrap; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--st-muted-fg); }
.tl-dot--2 { background: var(--st-info-fg); }
.tl-dot--3 { background: var(--st-warn-fg); }
.tl-dot--4 { background: var(--st-danger-fg); }
.tl-row.is-done .tl-prio { opacity: .55; }
/* Quick-Add als letzte Zeile der Gruppe (gestricheltes Feld wie am Board). */
.tl-quickadd { padding: 8px 14px 10px 12px; }
.tl-quickadd input[type="text"] { width: 100%; padding: 6px 10px; font: inherit;
  font-size: 13px; border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm); background: transparent;
  transition: border-color .12s, background .12s; }
.tl-quickadd input[type="text"]:hover { border-color: var(--secondary); }
.tl-quickadd input[type="text"]:focus { outline: none; border-style: solid;
  border-color: var(--secondary); background: var(--surface); }
/* Fortschrittsbalken in der Projektliste (Zelle statt Kachel). */
.lv-progress { display: inline-flex; min-width: 140px; margin-top: 0; }
@media (max-width: 860px) {
  .tl-row { grid-template-columns: 34px minmax(0, 1fr) 40px 78px; }
  .tl-assign-name, .tl-assign-extra, .tl-prio { display: none; }
}
/* ── Berichtwesen: Dashboard (taxes/dashboard.html) ─────────────────────
   KPI-Kacheln (Zahl groß, Label klein, Vergleich klein darunter) und ein
   2-spaltiges Karten-Grid mit server-seitig gerenderten SVG-Balken.
   Farben bewusst ruhig: Balken in Sekundärgrün/Grau, EIN Akzent. */
.bw-filter { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 12px 0 14px; }
.bw-filter-dates { display: flex; align-items: flex-end; gap: 12px; }
.bw-filter-label { margin-left: auto; font-size: 12px; color: var(--muted); align-self: center; white-space: nowrap; }
/* Volle Breite (Owner 2026-07-17): Dashboard hebt die 1180px-Kappung auf. */
.bw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
.bw-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bw-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.bw-kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw-kpi-delta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bw-kpi-delta.is-up { color: var(--in-fg); }
.bw-kpi-delta.is-down { color: var(--out-fg); }
.bw-kpi--warn .bw-kpi-value { color: var(--out-fg); }
.bw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bw-grid .inv-card h2 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.bw-legend { display: flex; gap: 14px; padding: 2px 0 8px; }
.bw-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bw-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--secondary); }
.bw-swatch--muted { background: var(--border-strong); }
/* overflow visible: das letzte Monats-Label (z. B. „Jul 26") ragt minimal über
   die viewBox hinaus und wurde sonst abgeschnitten. */
.bw-chart { display: block; width: 100%; height: auto; overflow: visible; }
/* width:100%-Kinder (Tabelle, Chart-SVG) liefen 22px über den Kartenrand:
   die generische Regel `.inv-card > :not(h2)` gibt 22px Seitenrand, width:100%
   rechnet die aber nicht ein → Breite um beide Ränder kürzen. */
.bw-grid .inv-card > .bw-table,
.bw-grid .inv-card > .bw-chart { width: calc(100% - 44px); }
.bw-chart-bar { fill: var(--secondary); }
.bw-chart-bar--muted { fill: var(--border-strong); }
.bw-chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.bw-chart-label { font-size: 10px; fill: var(--muted); }
.bw-chart-rowlabel { font-size: 11px; fill: var(--text); }
.bw-chart-value { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.bw-chart-empty { margin: 0; padding: 18px 0 22px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .bw-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .bw-grid { grid-template-columns: 1fr; } }

/* Verschiebbare Karten: Grip-Handle im Kartenkopf + Drag-Zustände. */
.bw-grid .inv-card h2 { display: flex; align-items: center; gap: 8px; }
.bw-grip { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -2px 0 -2px -4px; padding: 0; flex: 0 0 auto;
  border: 0; background: none; color: var(--muted); cursor: grab; border-radius: 6px; }
.bw-grip:hover { background: var(--bg); color: var(--text); }
.bw-grip:active { cursor: grabbing; }
.bw-grip-ico { width: 16px; height: 16px; pointer-events: none; }
/* Während des Ziehens: gezogene Karte schwebt (Schatten, leicht gedreht) und
   ist für elementFromPoint durchlässig; Textauswahl global aus. */
.bw-movable.bw-dragging { opacity: .75; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); transform: scale(.99); z-index: 5; position: relative; }
html.bw-grabbing { cursor: grabbing; }
html.bw-grabbing * { user-select: none; }
/* ── Aufgaben-Tracker (/projekte/aufgaben/, Notion-Muster) ──────────────
   Tab „Alle Aufgaben": flache Tabelle mit Spaltenköpfen + Status-Badge-
   Spalte; unten die Inline-Anlage mit Pflicht-Projekt-Combobox. Baut auf
   den bestehenden tl-*-Bausteinen der Aufgabenliste auf. */
.tl--flat .tl-row { grid-template-columns: 34px minmax(0, 1fr) 112px 190px 132px 96px; }
.tl-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) 112px 190px 132px 96px;
  align-items: center; gap: 10px; padding: 8px 14px 8px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em; }
.tl-statuscol { min-width: 0; }
.tl-statuscol .status { white-space: nowrap; }
.trk-create { padding: 10px 14px; }
.trk-create-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trk-create-form > input[name="name"] { flex: 1 1 260px; min-width: 200px; padding: 8px 10px;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.trk-create-form > input[name="name"]:focus { outline: none; border-color: var(--secondary); }
.trk-combo { flex: 0 1 260px; min-width: 200px; }
/* Die Combobox erbt außerhalb des inv-editors keine Feld-Styles → hier
   identisch zum Titel-Input stylen, sonst rendert sie als natives Feld. */
.trk-combo .inv-prod-search { width: 100%; padding: 8px 30px 8px 10px;
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-sizing: border-box; }
.trk-combo .inv-prod-search:focus { outline: none; border-color: var(--secondary); }
.trk-create-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--st-danger-fg); }
@media (max-width: 860px) {
  .tl--flat .tl-row { grid-template-columns: 34px minmax(0, 1fr) 90px 40px 78px; }
  .tl-head { display: none; }
}

/* Top-Kunden/-Artikel als Tabellen (Odoo „Top-Verkaufsaufträge"-Optik);
   der Balken-Hintergrund kommt als linear-gradient inline aus dem Template. */
.bw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bw-table th { padding: 6px 8px; text-align: left; font-size: 11.5px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 1px solid var(--border); }
.bw-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.bw-table tr:last-child td { border-bottom: 0; }
.bw-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bw-table td a { color: inherit; text-decoration: none; }
.bw-table td a:hover { text-decoration: underline; }

/* Berichtwesen → Projekte: Aufgaben-Fortschritt + eingeklappte Abgeschlossene */
.bw-neg { color: var(--out-fg); }
.bw-progress-cell { white-space: nowrap; }
.bw-progress-num { font-size: 12px; color: var(--muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.bw-progress { display: inline-block; vertical-align: middle; width: 64px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bw-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--secondary); }
.bw-row--closed td, .bw-row--closed td a { color: var(--muted); }
.bw-closed > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 12px 0; }
.bw-closed[open] > summary { border-bottom: 1px solid var(--border); }

/* ── Leistungsnachweise (regie): Editor-Zeilen, Signatur, Kopf-Aktionen ─────
   Vor-Ort-Leistungserfassung — bewusst große, touch-taugliche Zeilen-Karten
   statt einer engen Tabellenzeile (Zielgruppe: Handy auf der Baustelle). */
/* Begrenzte Formularbreite mittig (Owner 2026-07-19: Editor war zu breit).
   Der inv-editor bleibt Haupt(1fr)+Aside(264px), der ganze Wrapper wird aber
   zentriert und gedeckelt, damit die Felder nicht über die volle Breite ziehen. */
.rg-editor-wrap { max-width: none; margin-inline: 0; }
/* Einsatzadresse: PLZ schmal + Ort daneben (PLZ füllt den Ort automatisch). */
.rg-site-zipcity { display: flex; gap: var(--space-3); }
.rg-site-zipcity .rg-site-zip { flex: 0 0 110px; }
.rg-site-zipcity .rg-site-city { flex: 1 1 auto; }
/* Interne Notiz im Aside kompakt. */
.inv-aside .rg-editor-note, .inv-aside textarea[name="notes"] { width: 100%; box-sizing: border-box; }
/* Abstand zwischen „POSITIONEN"-Überschrift und erstem Kasten. */
#rg-lines { margin-top: var(--space-3); }
.rg-line { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: var(--space-3); margin-bottom: var(--space-3); }
/* Kopfzeile der Position: Art / Einsatztag / Artikel + Entfernen rechts. */
.rg-line-head { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.rg-line-head .rg-line-kind { flex: 0 0 150px; }
.rg-line-head .rg-line-date { flex: 0 0 160px; }
.rg-line-head .rg-line-product { flex: 1 1 220px; min-width: 0; }
.rg-line-remove { margin-left: auto; align-self: flex-end; }
/* Mitarbeiter:innen (nur Arbeitszeit) + Beschreibung: eigene, ruhige Zeilen. */
.rg-line-user { margin-top: var(--space-3); }
.rg-line-desc { margin-top: var(--space-3); }
/* Beschreibung: 2 Zeilen hoch, wächst beim Tippen mit (JS Auto-Grow). */
.rg-line-desc textarea { min-height: 0; resize: none; overflow: hidden; }
/* Zahlenzeile: Menge/Einheit links, „nicht berechnen" daneben — KEINE Beträge
   (Owner 2026-07-20: reiner Leistungsnachweis ohne Preise/Summen). */
.rg-line-nums { margin-top: var(--space-3); display: flex; align-items: flex-end;
  gap: var(--space-3); flex-wrap: wrap; }
.rg-line-qty input { width: 100px; }
.rg-line-unit input { width: 90px; }
.rg-line-foot { display: flex; align-items: center; gap: var(--space-3);
  min-height: 38px; }
.rg-line-nocharge { white-space: nowrap; }
.rg-line-delete-store { display: none; }
/* Mitarbeiter:innen-Chips je Position: echtes <select multiple> unsichtbar,
   Chips + durchsuchbares Menü (Muster Aufgaben-Zuweisung im Planner). */
.rg-users-store { display: none; }
.rg-users-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rg-users-combo .prod-combo-menu { max-height: 220px; }
.rg-line-errors { margin-bottom: var(--space-2); }
.rg-line-add { display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-4); }
/* Combobox außerhalb des inv-editors wie ein normales Feld stylen
   (gleiches Muster wie .trk-combo). */
.rg-line .inv-prod-search, .inv-editor .rg-line .inv-prod-search,
.rg-sign-wrap .inv-prod-search { width: 100%; box-sizing: border-box; }
.rg-signature-img { display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; margin-bottom: var(--space-2); }
.rg-sign-wrap { max-width: 760px; margin: 0 auto; }
.rg-sign-card { margin-bottom: var(--space-4); }
@media (max-width: 860px) {
  .rg-line-head .rg-line-kind, .rg-line-head .rg-line-date { flex: 1 1 140px; }
}
@media (max-width: 560px) {
  .rg-line-head { gap: var(--space-2); }
  .rg-line-head .rg-line-kind, .rg-line-head .rg-line-date,
  .rg-line-head .rg-line-product { flex: 1 1 100%; }
  .rg-line-remove { margin-left: 0; }
  .rg-line-qty input, .rg-line-unit input { width: 100%; }
  .rg-line-qty, .rg-line-unit { flex: 1 1 30%; }
}
.je-inline-form { display: inline; }

/* ── Berichtwesen → Stundenberichte (hr-) ─────────────────────────────── */
/* Filterzeile: Datumsfelder + drei Comboboxen + Aktionen in einer Reihe. */
.hr-filter-fields { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.hr-filter-fields .prod-combo { min-width: 200px; }
/* Umschalter-Zeile: Ansicht links, Gruppierung rechts. */
.hr-switch { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: space-between; }
.hr-switch-label { align-self: center; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: var(--space-1); }
/* Gruppenkopf-Zusatz (Stunden/Quote/Wert neben dem Gruppennamen). */
.hr-group-meta { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); margin-left: var(--space-2); }
.hr-empty { margin: 0; padding: var(--space-4) 0; font-size: var(--fs-sm); color: var(--muted); }
/* Plausibilität: Leistung > Anwesenheit = rot, Anwesenheit ohne Leistung = gelb. */
.data-table tr.hr-plausi--over > td { background: var(--st-danger-bg); }
.data-table tr.hr-plausi--over > td.hr-diff { color: var(--st-danger-fg); font-weight: 600; }
.data-table tr.hr-plausi--under > td { background: var(--st-warn-bg); }
.data-table tr.hr-plausi--under > td.hr-diff { color: var(--st-warn-fg); font-weight: 600; }
.hr-legend { display: flex; gap: var(--space-4); padding-top: var(--space-3); flex-wrap: wrap; }
.hr-legend-item { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--muted); }
.hr-swatch { width: 10px; height: 10px; border-radius: 2px; }
.hr-swatch--over { background: var(--st-danger-bg); border: 1px solid var(--st-danger-fg); }
.hr-swatch--under { background: var(--st-warn-bg); border: 1px solid var(--st-warn-fg); }

/* ── Monatsabschluss „rund": UVA-Posten, Warnliste, Bank-Ampel ─────────── */
/* UVA-Betrag als Kennzahl im Aside-Infoblock. */
.mc-uva-amount { font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); }
/* Gestapelte Knöpfe unter einer Aside-Kennzahl (volle Panelbreite). */
.mc-panel-actions { display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-3); }
.mc-warnlist { margin: 0; padding-left: var(--space-5); }
.mc-warnlist li { margin: var(--space-1) 0; }
.mc-warnlist a { color: inherit; font-weight: 600; }
.mc-ampel { width: 10px; height: 10px; border-radius: 999px;
  display: inline-block; flex: none; }
.mc-ampel--ok   { background: var(--success); }
.mc-ampel--warn { background: var(--st-warn-fg); }
.mc-ampel--crit { background: var(--danger); }

/* === PROJEKT-BUDGET + NACHKALKULATION (Owner-Sprint 18./19.07.) ==
   Ist/Plan-Balken (Stunden- und Geld-Budget) auf Projektkachel und
   Stammblatt: ok = grün, ab 80 % gelb (warn), ab 100 % rot (over). */
.pj-budget { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pj-budget .pj-progress-bar { flex: 1 1 auto; }
.pj-budget-label { flex: none; min-width: 58px; font-size: var(--fs-xs); color: var(--muted); }
.pj-budget-fill { height: 100%; background: var(--success); border-radius: 999px; }
.pj-budget--warn .pj-budget-fill { background: var(--st-warn-fg); }
.pj-budget--over .pj-budget-fill { background: var(--danger); }
.pj-budget--over .pj-progress-num { color: var(--danger); font-weight: 600; }
.pj-budget-note { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--danger); font-weight: 600; }
/* Deckungsbeitrag negativ → rot (Nachkalkulations-Karte). */
.pj-db-neg { color: var(--danger); }
/* === /PROJEKT-BUDGET + NACHKALKULATION ================================== */
/* === HR (Personal): Abwesenheits-Kalender + Personalakte === */
/* Angehängter Modul-Abschnitt (COORDINATION.md) — nur Token-Farben. */
.hr-cal-scroll { overflow-x: auto; }
.hr-cal { table-layout: fixed; min-width: 900px; }
.hr-cal th.hr-cal-name, .hr-cal td.hr-cal-name { width: 180px; min-width: 180px;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-cal th.hr-cal-day { width: 30px; padding: 6px 2px; text-align: center;
  font-variant-numeric: tabular-nums; }
.hr-cal .hr-cal-dow { display: block; font-size: var(--fs-xs); color: var(--muted);
  text-transform: none; letter-spacing: 0; }
.hr-cal td.hr-cal-cell { padding: 0; height: 32px; border-left: 1px solid var(--border); }
.hr-cal th.hr-cal-day--off, .hr-cal td.hr-cal-cell--off { background: var(--st-muted-bg); }
.hr-cal tbody tr:nth-child(even) td.hr-cal-cell--off { background: var(--st-muted-bg); }
/* Abwesenheitsarten — Zellen im Kalender und Legenden-Swatches. */
.hr-abs--urlaub { background: var(--st-success-bg); }
.hr-abs--krankenstand { background: var(--st-warn-bg); }
.hr-abs--sonderurlaub { background: var(--st-info-bg); }
.hr-abs--zeitausgleich { background: var(--secondary-soft); }
.hr-abs--sonstiges { background: var(--st-neutral-bg); }
.hr-cal td.hr-abs--pending, .hr-cal-swatch.hr-abs--pending { opacity: .55;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px,
    var(--surface) 4px 6px); }
/* Abwesenheit gewinnt optisch über die Wochenend-/Feiertagsgrau-Fläche. */
.hr-cal tbody td.hr-cal-cell--off.hr-abs--urlaub { background: var(--st-success-bg); }
.hr-cal tbody td.hr-cal-cell--off.hr-abs--krankenstand { background: var(--st-warn-bg); }
.hr-cal tbody td.hr-cal-cell--off.hr-abs--sonderurlaub { background: var(--st-info-bg); }
.hr-cal tbody td.hr-cal-cell--off.hr-abs--zeitausgleich { background: var(--secondary-soft); }
.hr-cal tbody td.hr-cal-cell--off.hr-abs--sonstiges { background: var(--st-neutral-bg); }
.hr-cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4); color: var(--muted); font-size: var(--fs-sm); }
.hr-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.hr-cal-swatch { display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; border: 1px solid var(--border); }
.hr-cal-swatch--off { background: var(--st-muted-bg); }

/* ── Projekte: Planner-Ausbau 2026-07 (Popup, Kalender, Meilensteine,
   Übersicht, Auswertungen) — Aufbau wie Microsoft Planner, Optik komplett
   regio.works (Lime-/Ink-Akzente, eigene Buttons/Radien/Comboboxen). ───── */

/* Label-Farbpunkte auf den Karten (statt breiter Chips). */
.tk-label-dot { display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; flex: none; }
.tk-label .tk-label-x { border: 0; background: none; cursor: pointer;
  color: inherit; font-size: 13px; line-height: 1; padding: 0 0 0 4px; opacity: .7; }
.tk-label .tk-label-x:hover { opacity: 1; }
.tk-label { display: inline-flex; align-items: center; color: #fff; }

/* Eingeklappte „Erledigte Aufgaben“ am Bucket-Fuß. */
.tk-done-group { margin-top: 6px; }
.tk-done-group > summary { list-style: none; cursor: pointer; font-size: 12px;
  color: var(--muted); padding: 5px 2px; user-select: none; }
.tk-done-group > summary::marker { content: ""; }
.tk-done-group > summary::-webkit-details-marker { display: none; }
.tk-done-group > summary:hover { color: var(--text); }
.tk-done-group .board-card { opacity: .82; }
.tk-done-cards { margin-top: 6px; }

/* ⋯-Menü der Projektkachel (nutzt das pjt-menu-Gerüst). */
.pj-card-menu { flex: none; }
.pj-card-menu > summary { width: 24px; height: 24px; border: 0;
  background: transparent; opacity: .45; }
.pj-card:hover .pj-card-menu > summary, .pj-card-menu[open] > summary { opacity: 1; }
.pjt-menu-list form { margin: 0; }

/* Gruppen-Überschrift in Combobox-Menüs (Team zuerst, dann Weitere). */
.prod-combo-group { padding: 6px 9px 2px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ── Aufgaben-Popup (großes zentriertes Modal) ── */
.tkm { position: fixed; inset: 0; z-index: 85; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.tkm[hidden] { display: none; }
.tkm-backdrop { position: absolute; inset: 0; background: rgba(13, 15, 8, .42); }
.tkm-dialog { position: relative; width: min(760px, 100%);
  /* Feste Höhe: das Popup springt beim Reiterwechsel nicht mehr in der
     Größe — der Inhalt scrollt innen (Owner 2026-07-19). */
  height: min(calc(100vh - 48px), 860px);
  max-height: calc(100vh - 48px); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22); display: flex;
  flex-direction: column; overflow: hidden; animation: tkm-in .14s ease-out; }
@keyframes tkm-in { from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; } }
.tkm-content { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.tkm-head { display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border); flex: none; }
.tkm-done { width: 26px; height: 26px; margin-top: 4px; }
.tkm-head-main { flex: 1 1 auto; min-width: 0; }
.tkm-title { width: 100%; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 3px 8px; margin-left: -8px; font: inherit; font-size: 19px; font-weight: 700;
  color: var(--text); background: transparent; }
.tkm-title:hover { border-color: var(--border); }
.tkm-title:focus { outline: none; border-color: var(--secondary); background: var(--surface); }
.tkm-title.is-done { color: var(--muted); text-decoration: line-through; }
.tkm-meta { margin-top: 2px; font-size: 12px; color: var(--muted); }
.tkm-savestate { margin-left: 8px; color: var(--primary-ink); font-weight: 600; }
.tkm-body { overflow-y: auto; padding: 14px 20px 20px; flex: 1 1 auto; min-height: 0; }

/* Zeilen Meilenstein / Labels / Zuweisung (Planner-Anordnung). */
.tkm-row { display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px; align-items: start; margin-bottom: 12px; }
.tkm-row-label { font-size: 13px; font-weight: 600; color: var(--muted);
  padding-top: 9px; }
.tkm-row-value { min-width: 0; }
.tkm-combo { max-width: 420px; }

/* Comboboxen in Modalen (Aufgaben-Popup + Projekt-Schnellbearbeitung):
   App-Feldstil statt Roh-Browser-Optik — abgerundet, Fokus-Ring wie die
   übrigen Felder, Menü ankert unter dem Feld (kein Fixed-Positioning). */
.tkm .inv-prod-search { width: 100%; min-height: 36px;
  padding: 7px 30px 7px 10px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tkm .inv-prod-search::placeholder { color: var(--muted); }
.tkm .inv-prod-search:focus { outline: 2px solid var(--addon-bg);
  border-color: var(--primary); }
.tkm .prod-combo-arrow { border-left: 0; background: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tkm .prod-combo-menu { position: absolute; left: 0; right: 0;
  top: calc(100% + 4px); }
.tkm-labels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tkm-label-picker { position: relative; }
.tkm-label-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 230px; padding: 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); }
.tkm-label-item { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tkm-label-item:hover { background: var(--surface-2); }
.tkm-label-item.is-on { background: var(--primary-softer); }
.tkm-label-check { margin-left: auto; color: var(--primary-ink); font-weight: 700; }
.tkm-label-new { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px; }
.tkm-label-new input[type="text"] { padding: 6px 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tkm-label-palette { display: flex; gap: 6px; flex-wrap: wrap; }
.tkm-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; }
.tkm-swatch.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }

/* Zweispaltige Felder (Status | Priorität, Start | Fällig, Bucket | Aufwand) —
   einheitliche Feldhöhen (36px) und Label-Abstände (App-Feldstil). */
.tkm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
  margin-top: 6px; }
.tkm-grid .form-field { margin: 0; }
.tkm-grid .form-field > label { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 6px; }
.tkm-grid input[type="date"], .tkm-grid input[type="number"] {
  width: 100%; min-height: 36px; padding: 7px 9px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface);
  -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tkm-grid input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity .12s ease; }
.tkm-grid input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.tkm-grid input:focus { outline: 2px solid var(--addon-bg);
  border-color: var(--primary); }
.tkm-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.tkm-chip { padding: 5px 11px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface); font: inherit; font-size: 12.5px;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s,
  border-color .12s; }
.tkm-chip:hover { border-color: var(--secondary); color: var(--text); }
.tkm-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tkm-bucket { width: 100%; }
.tkm-bucket > summary { width: 100%; height: auto; min-height: 36px;
  border-radius: var(--radius-sm); border-color: var(--border-strong);
  padding: 7px 9px; font-size: 13px; color: var(--text); display: flex;
  align-items: center; justify-content: space-between; gap: 8px; }
.tkm-bucket[open] > summary, .tkm-bucket > summary:hover {
  background: var(--surface); border-color: var(--primary); }
.tkm-bucket .pjt-menu-list { left: 0; right: auto; min-width: 100%; }

/* Checkliste im Popup. */
.tkm-checklist-rows { display: flex; flex-direction: column; gap: 4px; }
.tkm-check-row { display: flex; align-items: center; gap: 9px; padding: 4px 2px;
  border-radius: var(--radius-sm); }
.tkm-check-row:hover { background: var(--surface-2); }
.tkm-check-row .tk-done-toggle { width: 18px; height: 18px; }
.tkm-check-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.tkm-check-row.is-done .tkm-check-text { color: var(--muted);
  text-decoration: line-through; }
.tkm-check-row .tkp-assign-x { opacity: 0; transition: opacity .12s; }
.tkm-check-row:hover .tkp-assign-x, .tkm-check-row .tkp-assign-x:focus-visible { opacity: 1; }
.tkm-check-add input { width: 100%; margin-top: 6px; padding: 7px 9px; font: inherit;
  font-size: 13px; border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm); background: transparent; }
.tkm-check-add input:focus { outline: none; border-style: solid;
  border-color: var(--secondary); background: var(--surface); }

/* Notizen (kleines WYSIWYG, Whitelist-HTML) — Toolbar mit ordentlichen
   kleinen Buttons (Icons/gestylte Zeichen, Hover-Zustand), Luft zum Feld. */
.tkm-notes { border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  overflow: hidden; }
.tkm-notes-bar { display: flex; align-items: center; gap: 3px; padding: 6px 8px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tkm-notes-bar button { min-width: 28px; height: 26px; border: 1px solid transparent;
  border-radius: 6px; background: none; font-size: 12.5px; color: var(--muted);
  cursor: pointer; display: inline-grid; place-items: center;
  transition: background .12s, color .12s, border-color .12s; }
.tkm-notes-bar button:hover { background: var(--surface);
  border-color: var(--border-strong); color: var(--text); }
.tkm-notes-bar button svg { width: 14px; height: 14px; fill: currentColor; }
.tkm-notes-sep { width: 1px; height: 16px; background: var(--border); margin: 0 5px; }
.tkm-notes-edit { min-height: 90px; padding: 12px; font-size: 13.5px;
  line-height: 1.5; outline: none; }
.tkm-notes-edit:focus { background: var(--surface); }
.tkm-notes-edit p { margin: 0 0 6px; }
.tkm-notes-edit ul, .tkm-notes-edit ol { margin: 0 0 6px; padding-left: 22px; }

/* Popup-Reiter Details | Anlagen | Kommentare | Zeiten. */
.tkm-tabs { margin-top: 14px; }

/* Zeiten-Reiter: Schnell-Buchungszeile (pjt-quick-Optik) + Buchungsliste. */
.tkm-timequick { margin: 2px 0 12px; }
.tkm-timequick .pjt-hours { width: 84px; }
.tkm-timequick .pjt-desc { flex: 1 1 140px; }
/* „Gebucht: X h“ neben dem geplanten Aufwand (Details-Reiter). */
.tkm-planned-label { display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px; }
.tkm-booked { font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Anlagen: Dropzone + Link-Zeile. */
.tkm-dropzone { display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; padding: 18px 12px; font-size: 13px; color: var(--muted);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .12s, background .12s; }
.tkm-dropzone.is-over { border-color: var(--secondary); background: var(--primary-softer); }
.tkm-linkadd { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tkm-linkadd input { padding: 7px 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tkm-linkadd input[type="text"] { flex: 1 1 120px; min-width: 0; }
.tkm-linkadd input[type="url"] { flex: 2 1 220px; min-width: 0; }
.tkp-attach .tkp-assign-x { opacity: 0; transition: opacity .12s; }
.tkp-attach:hover .tkp-assign-x, .tkp-attach .tkp-assign-x:focus-visible { opacity: 1; }

/* Kommentare. */
.tkm-comments { display: flex; flex-direction: column; gap: 12px; }
.tkm-comment { display: flex; gap: 10px; }
.tkm-comment-main { flex: 1 1 auto; min-width: 0; }
.tkm-comment-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.tkm-comment-text { margin-top: 2px; font-size: 13.5px; line-height: 1.45; }
.tkm-comment-add { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.tkm-comment-add input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: inherit;
  font-size: 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.tkm-empty { padding: 14px 4px; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  /* Schmale Screens: Popup als Vollbild. */
  .tkm { padding: 0; }
  .tkm-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .tkm-row { grid-template-columns: 1fr; gap: 4px; }
  .tkm-row-label { padding-top: 0; }
  .tkm-grid { grid-template-columns: 1fr; }
}

/* ── Kalender (Monat/Woche) ── */
.cal-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
.cal-bar-left { display: flex; align-items: center; gap: 8px; }
.cal-bar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-nav { display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted); text-decoration: none;
  font-size: 16px; line-height: 1; }
.cal-nav:hover { background: var(--surface-2); color: var(--text); }
.cal-label { font-size: 15px; font-weight: 700; margin-left: 6px; }
.cal { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;  display: flex; flex-direction: column; height: 100%; }
.cal-headrow { display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-hcell { padding: 7px 10px; font-size: 12px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1 1 auto; }
.cal-week + .cal-week { border-top: 1px solid var(--border); }
.cal-day { min-height: 128px; padding: 6px 8px; border-right: 1px solid var(--border);
  min-width: 0; }
.cal-day:last-child { border-right: 0; }
.cal-day.is-weekend { background: var(--surface-2); }
.cal-day.is-out { background: var(--bg); }
.cal-day.is-out .cal-day-num { opacity: .45; }
.cal-day.is-today .cal-day-num { background: var(--ink); color: var(--on-ink); }
.cal-day.is-over { outline: 2px dashed var(--secondary); outline-offset: -2px;
  background: var(--primary-softer); }
.cal-day-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px; }
.cal-day-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  padding: 0 5px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
/* Wochenansicht: Datum sitzt einzeilig im Spaltenkopf („Mo 13.07.“), die
   Heute-Spalte ist dezent hinterlegt, das Heute-Datum steht im dunklen
   Kreis. Spaltenhöhe folgt dem Inhalt (min-height statt Vollhöhe). */
.cal--week .cal-day { min-height: calc(100vh - 300px); }
.cal--week .cal-day.is-today { background: var(--primary-softer); }
.cal--week .cal-day-head { justify-content: flex-end; min-height: 22px;
  margin-bottom: 2px; }
.cal--week .cal-hcell--day { display: flex; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: 0; }
.cal-h-wd { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }
.cal-h-date { font-size: 12.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; }
.cal--week .cal-hcell--day.is-today .cal-h-date { background: var(--ink);
  color: var(--on-ink); border-radius: 999px; padding: 2px 8px; }
.cal-add { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--subtle); color: var(--text); }
.cal-tasks { display: flex; flex-direction: column; gap: 4px; }
.cal-task { display: flex; align-items: center; gap: 5px; padding: 3px 7px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 12px; cursor: pointer; min-width: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.cal-task:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.cal-task.is-overdue { border-color: var(--danger); }
.cal-task.is-done { opacity: .68; }
.cal-task.is-done .cal-task-name { color: var(--muted); text-decoration: line-through; }
.cal-task.is-dragging { opacity: .5; }
.cal-task-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal-task-proj { color: var(--muted); flex: none; max-width: 42%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cal-task-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cal-task-bucket { flex: none; font-size: 11px; color: var(--muted); }
.cal-inline-add input { width: 100%; padding: 4px 7px; font: inherit; font-size: 12px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); }
.cal-inline-add input:focus { outline: none; border-style: solid;
  border-color: var(--secondary); }

/* Projekt-Kalender: Raster + Seitenspalte „Nicht geplante Aufgaben“. */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px;
  align-items: stretch; min-height: calc(100vh - 240px);
  align-items: start; }
.cal-side { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px; position: sticky; top: 12px; }
.cal-side-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; }
.cal-side-head h2 { margin: 0; font-size: 13px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }
.cal-unplanned { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.cal-task--side { padding: 7px 9px; cursor: grab; }
.cal-task--side:active { cursor: grabbing; }
.cal-side-add { margin-top: 10px; }
@media (max-width: 900px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-side { position: static; }
}

/* ── Meilensteine ── */
.ms-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.ms-row { position: relative; display: flex; gap: 10px; align-items: flex-start;
  flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); }
.ms-main { flex: 1 1 auto; min-width: 0; }
.ms-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ms-flag { color: var(--secondary); font-size: 15px; }
.ms-flag.is-reached { color: var(--success); }
.ms-flag.is-overdue { color: var(--danger); }
.ms-name { font-size: 14.5px; }
.ms-row.is-reached .ms-name { color: var(--muted); }
.ms-desc { margin-top: 4px; font-size: 13px; color: var(--muted); }
.ms-progress { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.ms-menu { flex: none; }
.ms-edit { flex-basis: 100%; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.ms-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; }
.ms-edit input, .ms-edit textarea { padding: 7px 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.ms-edit-actions { display: flex; gap: 8px; }

/* ── Flache Zahlenzeilen (generisch, modulübergreifend) ────────────────────
   Label links / Wert rechts, getrennt durch eine feine Linie — KEIN eigener
   Rahmen und KEINE Füllfarbe je Zeile. Ersetzt geschachtelte Kästchen
   („Karte in Karte in Karte“) innerhalb einer Karte. Frei verwendbar in
   jeder Maske (Übersicht, Kundenakte, Abo-Detail, Beleg-Editor …). */
.stat-rows { display: flex; flex-direction: column; min-width: 0;
  font-size: var(--fs-sm); }
.stat-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) 0; min-width: 0; }
.stat-row + .stat-row { border-top: 1px solid var(--border); }
.stat-label { color: var(--muted); min-width: 0; }
.stat-value { font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
/* Zwischensumme / Gesamtsumme / Nebeninfo */
.stat-row--sub .stat-label { color: var(--text); font-weight: 600; }
.stat-row--total { border-top: 2px solid var(--border-strong); }
/* Steht die Gesamtsumme an erster Stelle (Leitwert eines Infoblocks), gibt es
   nichts abzugrenzen — die Linie hing sonst frei über der ersten Zeile. */
.stat-rows > .stat-row--total:first-child { border-top: none; }
.stat-row--total .stat-label { color: var(--text); font-weight: 700; }
.stat-row--total .stat-value { font-weight: 700; font-size: var(--fs-base); }
.stat-row--hint .stat-label,
.stat-row--hint .stat-value { color: var(--muted); font-size: var(--fs-xs);
  font-weight: 500; }
.stat-value.is-danger { color: var(--danger); }
/* Kompakter Leerzustand: eine schmale Zeile (+ optionaler Anlege-Link)
   statt einer leeren Karte in voller Höhe. */
.empty-line { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--fs-sm);
  color: var(--muted); }
.empty-line + .empty-line { border-top: 1px solid var(--border); }

/* ── Übersicht (KPI-Kacheln) — Aufräumen 2026-07-20 ────────────────────────
   Festes 12er-Raster: oben Eckdaten-Streifen, dann Reihe 1 mit den beiden
   betriebswirtschaftlich wichtigsten Karten (Nachkalkulation | Budget, je
   halbe Breite), Reihe 2 Stunden | Kosten | Aufgaben, Reihe 3 Meilensteine |
   Aktivität. Innerhalb der Karten KEINE umrandeten Unter-Kästchen mehr,
   sondern flache Zahlenzeilen (.stat-rows). Leerzustände einzeilig
   (.empty-line) statt vollflächig. */
.ov-facts { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: baseline;
  margin: 2px 0 14px; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); }
.ov-fact { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.ov-fact-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.ov-fact-value { font-size: 13px; font-weight: 600; min-width: 0; }
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px; align-items: stretch; }
.ov-card { grid-column: span 3; display: flex; flex-direction: column;
  min-width: 0; }
.ov-card--third { grid-column: span 4; }
.ov-card--half { grid-column: span 6; }
.ov-wide { grid-column: 1 / -1; }
@media (max-width: 1280px) {
  .ov-card, .ov-card--third { grid-column: span 6; }
}
@media (max-width: 760px) {
  .ov-card, .ov-card--third, .ov-card--half { grid-column: 1 / -1; }
}
.ov-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin-bottom: 8px; }
.ov-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.ov-danger { color: var(--danger); }
.ov-hint { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--muted); }
.ov-hint.is-over { color: var(--danger); font-weight: 600; }
.ov-ms-list { margin-top: var(--space-2); display: flex; flex-direction: column;
  gap: 6px; }
.ov-ms-name { flex: none; width: 130px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12.5px; }
.ov-ms-list .ms-progress { margin-top: 0; }
/* Zahlenzeilen in den Übersichts-Karten nutzen die generische .stat-rows-
   Klasse; hier nur der Abstand zum darunterliegenden Fortschrittsbalken. */
.ov-card .stat-rows + .pj-budget,
.ov-card .stat-rows + .pj-progress { margin-top: var(--space-3); }
.ov-card .ov-big + .stat-rows { margin-top: var(--space-2); }
/* Aktivität: letzte erledigte Aufgaben + letzte Zeitbuchungen. */
.ov-activity { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 2px; }
.ov-act { display: flex; align-items: center; gap: 8px; padding: 5px 2px;
  font-size: 12.5px; min-width: 0; border-radius: var(--radius-sm); }
.ov-act:hover { background: var(--surface-2); }
.ov-act-ico { flex: none; color: var(--muted); }
.ov-act-ico.is-done { color: var(--success); }
.ov-act-text { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ov-act-date { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Kopf-⋯-Menü (Bearbeiten | ⋯ → Löschen) in der lv-Aktionszeile. */
.pj-head-menu > summary { width: 30px; height: 30px; border-radius: var(--radius-sm); }

/* ── Auswertungen (reine CSS-Balken) ── */
.an-bars { display: flex; flex-direction: column; gap: 8px; }
.an-bar-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px;
  gap: 10px; align-items: center; }
.an-bar-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.an-bar-track { height: 12px; background: var(--surface-2); border-radius: 999px;
  overflow: hidden; }
.an-bar-fill { display: block; height: 100%; background: var(--secondary);
  border-radius: 999px; min-width: 2px; }
.an-bar-row:has(.an-bar-fill[style*="width: 0%"]) .an-bar-fill { min-width: 0; }
.an-bar-num { font-size: 12.5px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; }
.an-wide { grid-column: 1 / -1; }
.an-spark { display: flex; align-items: flex-end; gap: 14px; padding: 6px 2px 0; }
.an-spark-col { flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; gap: 4px; }
.an-spark-num { font-size: 12px; font-weight: 600; min-height: 16px; }
.an-spark-bar { width: 100%; max-width: 46px; height: 96px; display: flex;
  align-items: flex-end; background: var(--surface-2); border-radius: 6px;
  overflow: hidden; }
.an-spark-fill { display: block; width: 100%; background: var(--secondary);
  border-radius: 6px 6px 0 0; min-height: 2px; }
.an-spark-col[title$=" 0 erledigt"] .an-spark-fill { min-height: 0; }
.an-spark-label { font-size: 11px; color: var(--muted); }

/* ── Pointer-Drag (pointer-dnd.js): während des Ziehens nichts markieren ── */
body.pdnd-active { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
.board-card, .pj-card, .cal-task { user-select: none; -webkit-user-select: none; }

/* ── Projekt-Zeitleiste (Urlaubsplan-Optik): Zeile je Mitglied, Balken je Aufgabe ── */
.tlx { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; align-self: start; --tlx-col: 34px; }
/* Waagerechter Scroller: passen alle Tagesspalten (bei kürzerem Wochenfenster)
   in die Breite, füllen sie sie per 1fr; sonst scrollt das Raster als ein Block
   (Kopf und Zeilen bleiben deckungsgleich). Die Rasterbreite ist DETERMINISTISCH
   (200px Name + Tage × --tlx-col) — bewusst KEIN max-content, das würde die
   Spalten je nach Balkentext unterschiedlich breit machen (Balken lägen dann
   nicht mehr unter dem Tages-Lineal → Ziehen landet daneben, und ein
   überstehender Rest erzeugt einen verrutschten Scrollbalken). */
.tlx-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.tlx-grid { min-width: calc(200px + var(--tlx-days, 28) * var(--tlx-col)); }
.tlx-row { display: grid; grid-template-columns: 200px minmax(0, 1fr);
  border-top: 1px solid var(--border); }
.tlx-row--head { border-top: 0; background: var(--surface-2); }
.tlx-name { padding: 10px 12px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--border);
  display: flex; align-items: center; position: sticky; left: 0; z-index: 7;
  background: var(--surface); }
.tlx-row--head .tlx-name { font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; z-index: 8; background: var(--surface-2); }
.tlx-lanes { display: flex; flex-direction: column; min-width: 0; }
.tlx-lane { position: relative; display: grid;
  grid-template-columns: repeat(var(--tlx-days), minmax(0, 1fr));
  grid-auto-rows: 34px; align-items: center; min-height: 38px;
  /* Dezente senkrechte Tages-Trennlinien (eine 1px-Linie je Spaltenstart). */
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0 1px, transparent 1px calc(100% / var(--tlx-days, 28))); }
.tlx[data-tlx-edit] .tlx-lane[data-tlx-track] { cursor: crosshair; }
.tlx-lane + .tlx-lane { border-top: 1px dashed var(--border); }
.tlx-lane--head { grid-auto-rows: auto; min-height: 0; }
.tlx-dh { grid-row: 1; text-align: center; padding: 6px 0 5px; font-size: 11px; color: var(--muted);
  display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.tlx-dh b { font-size: 12px; color: var(--text); font-weight: 600; }
.tlx-dh.is-we { background: #e4e8ee; }
.tlx-dh.is-today { background: rgba(216, 242, 10, .22); }
.tlx-dh.is-today b { display: inline-grid; place-items: center; width: 22px; height: 22px;
  margin: 0 auto; border-radius: 999px; background: var(--ink); color: var(--on-ink); }
.tlx-we, .tlx-td { grid-row: 1 / -1; align-self: stretch; pointer-events: none; }
/* Wochenende + Heute klar sichtbar (Owner: kräftiger). Heute zusätzlich mit
   Lime-Spaltenkanten, damit die Spalte eindeutig ist. */
.tlx-we { background: #e4e8ee; }
.tlx-td { background: rgba(216, 242, 10, .24);
  box-shadow: inset 1px 0 0 var(--secondary), inset -1px 0 0 var(--secondary); }
.tlx-bar { grid-row: 1; position: relative; z-index: 1; margin: 4px 2px; padding: 0 8px; min-width: 0;
  height: 26px; display: flex; align-items: center; border: 1px solid transparent;
  border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  text-align: left; }
.tlx-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlx-bar--open { background: #eceeec; border-color: var(--border-strong); color: var(--text); }
.tlx-bar--progress { background: #d4ea63; border-color: var(--secondary, #a3b812); color: var(--primary-ink, #4d5a08); }
.tlx-bar--done { background: #d3ecd8; border-color: #b6ddbe; color: #4a6a52; text-decoration: line-through; }
.tlx-bar--overdue { background: #f6cfcf; border-color: var(--danger, #c2453f); color: var(--danger-strong, #b42318); }
.tlx-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); }
.tlx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tlx-key { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.tlx-key--we { background: #e4e8ee; }

/* Zeitleiste bearbeitbar: Balken greifen (umplanen) + Ränder ziehen (Dauer) */
.tlx[data-tlx-edit] .tlx-bar { cursor: grab; touch-action: none; padding: 0 12px; }
.tlx[data-tlx-edit] .tlx-bar span { pointer-events: none; }
.tlx-bar.is-dragging { cursor: grabbing; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: .96; }
.tlx.tlx-is-editing { user-select: none; }
.tlx-grip { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center; opacity: 0; }
.tlx-grip::before { content: ""; width: 3px; height: 12px; border-radius: 2px;
  background: currentColor; opacity: .55; }
.tlx-grip--l { left: 0; border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.tlx-grip--r { right: 0; border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.tlx-bar:hover .tlx-grip, .tlx-bar.is-dragging .tlx-grip { opacity: 1; }
.tlx-drag-tip { position: fixed; transform: translate(-50%, -100%); z-index: 60;
  background: var(--text); color: var(--surface); font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
/* Tastatur-Fokus auf den Balken (A11y): deutlich, aber im Marken-Look. */
.tlx-bar:focus-visible { outline: 2px solid var(--secondary, #2b6cb0); outline-offset: 2px; }
.tlx-bar.is-kb { z-index: 4; box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
/* Neuen Balken auf leerer Spur aufziehen. */
.tlx-lane.tlx-lane--creating { cursor: crosshair; }
.tlx-newbar { grid-row: 1; position: relative; z-index: 3; margin: 4px 2px; height: 26px;
  border-radius: 999px; border: 1.5px dashed var(--primary, #bed800);
  background: var(--primary-soft, #eef7c2); pointer-events: none; }
.tlx-newbar--form { display: flex; align-items: center; padding: 0 6px; pointer-events: auto;
  border-style: solid; }
.tlx-newbar--form input { width: 100%; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text); }
.tlx-newbar--form input:focus { outline: none; }
/* Zoom-Steuerung (Spaltenbreite) in der Werkzeugleiste. */
.tlx-zoom { display: inline-flex; align-items: center; gap: 4px; }
.tlx-zoom .cal-nav { font-size: 18px; font-weight: 600; }
.tlx-zoom-lvl { min-width: 34px; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.tlx-hint { color: var(--muted); }
.tlx-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Gesamt-Zeitleiste: einspaltig (kein „Nicht geplant"-Seitenpanel). */
.cal-layout--timeline { display: block; }

/* Kundenfärbung (nur Gesamt-Zeitleiste): der KUNDE bestimmt die Balkenfüllung
   (heller Kundenton) + einen kräftigen Akzentstreifen links; der STATUS bleibt
   über Rahmenfarbe/Deckkraft/Durchstreichen erkennbar (Owner-Vorgabe: Balance
   Kunde ↔ Status). --tlx-cust wird je Balken serverseitig gesetzt. */
.tlx-bar--cust { background: color-mix(in srgb, var(--tlx-cust) 20%, #fff);
  border-color: color-mix(in srgb, var(--tlx-cust) 55%, var(--border-strong));
  color: var(--text);
  box-shadow: inset 4px 0 0 var(--tlx-cust); padding-left: 12px; }
.tlx[data-tlx-edit] .tlx-bar--cust { padding-left: 16px; }
.tlx-bar--cust.tlx-bar--progress { background: color-mix(in srgb, var(--tlx-cust) 34%, #fff); }
.tlx-bar--cust.tlx-bar--done { opacity: .58; text-decoration: line-through; }
.tlx-bar--cust.tlx-bar--overdue {
  border-color: var(--danger, #c2453f);
  box-shadow: inset 4px 0 0 var(--tlx-cust), 0 0 0 1px var(--danger, #c2453f); }
.tlx-bar-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tlx-cust, currentColor); margin-right: 5px; }
.tlx-bar-proj { font-style: normal; font-weight: 500; opacity: .7; font-size: 11px; }

/* Kunden-Legende. */
.tlx-legend--cust { border-top: 0; padding-bottom: 0; }
.tlx-legend-title { font-weight: 600; color: var(--text); }
.tlx-key--dep { background: transparent; border: 0; position: relative; }
.tlx-key--dep::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 14px; height: 0; border-top: 2px solid var(--muted); }

/* Abhängigkeits-Pfeile (SVG-Overlay über dem Raster). */
.tlx-grid { position: relative; }
.tlx-arrows { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6;
  overflow: visible; }
.tlx-arrow { fill: none; stroke: var(--muted, #7a7a7a); stroke-width: 1.5;
  opacity: .8; }
.tlx-arrows #tlx-arrowhead path,
.tlx-arrows marker path { fill: var(--muted, #7a7a7a); }

/* Hover-Infofenster. */
.tlx-hovercard { position: fixed; z-index: 70; min-width: 190px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: 9px 11px; font-size: 12px; pointer-events: none; }
.tlx-hc-title { font-weight: 600; font-size: 13px; margin-bottom: 5px; color: var(--text); }
.tlx-hc-row { display: flex; gap: 8px; line-height: 1.5; }
.tlx-hc-k { flex: 0 0 78px; color: var(--muted); }
.tlx-hc-v { flex: 1 1 auto; min-width: 0; color: var(--text); }

/* Abhängigkeits-Chips im Aufgaben-Popup. */
.tkm-deps { display: flex; flex-direction: column; gap: 8px; }
.tkm-dep-chip { gap: 6px; }
.tkm-dep-proj { font-style: normal; color: var(--muted); font-size: 11px; }
.tkm-dep-blocks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); }
.tkm-dep-blocks-label { font-weight: 600; }
.tkm-dep-tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); }

/* ⋯ auf der Projektkarte öffnet direkt das Bearbeiten-Popup */
.pjt-menu-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; }
.pjt-menu-btn:hover { background: var(--surface-2); color: var(--text); }
/* Popup-Fuß: Löschen dezent rechts vor „Projekt öffnen" */
.pjp-delete { margin-left: auto; font-size: 13px; }
.pjp-delete + .pjp-open { margin-left: 16px; }

/* === Monatsabschluss „Abschluss vorbereiten“ — Übersicht-Redesign (2026-07-19) === */
/* Kompakter Kopf (UVA-Stand + Prüfstand nebeneinander), mehrspaltige Bestand-
   teile-Grid statt langer Liste; keine Info-Absätze mehr. */
.page-head--row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.page-head--row h1 { margin-bottom: 0; }
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; }
.notice--muted { color: var(--muted); }
.mb-0 { margin-bottom: 0 !important; }

/* Mehrspaltiges Grid der automatisch zusammengestellten Bestandteile. */
.mc-auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; }
.mc-auto-item { display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); }
.mc-auto-item.is-empty { background: transparent; color: var(--muted); }
.mc-auto-label { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-auto-item.is-empty .mc-auto-label { font-weight: 400; }
.mc-auto-count { flex: none; min-width: 22px; text-align: center; padding: 1px 7px;
  border-radius: 999px; background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-weight: 650; }

/* Speicherzeile im 2-Spalten-Raster der StB-Rückmeldung (linksbündig unter
   den Feldern, kein Feld-Look). */
.mc-stb-save, .mc-credit-save { display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; }

/* === Monatsabschluss — UVA-Ist-Betrag & Guthaben-Verrechnung (2026-07-19) === */
/* Guthaben-Verwendung als eigene Karte: Lieferant + offene Rechnungen
   auswählen, Rest aufs Bankkonto. */
.mc-credit-sum { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mc-credit-supplier { max-width: 420px; }
.mc-credit-table { margin: 0; }
.mc-credit-table td, .mc-credit-table th { padding: var(--space-2) var(--space-2); }
.mc-credit-table .mc-credit-pick { width: 34px; }
/* Verrechnung gegen den offenen Finanzamt-Saldo aus Vorperioden (PR #373):
   Gegenüberstellung Guthaben − offener Saldo = frei verwendbar. Das Formular
   darunter trägt sein Raster selbst (.form-row), braucht also kein eigenes
   Flex-Layout mehr. */
.mc-credit-offset { margin: 0; max-width: 460px; }
.mc-credit-offset td, .mc-credit-offset th { padding: var(--space-2) var(--space-2); }

/* === Auswahl-Summe gegen ein Budget (2026-07-20) ==========================
   Wiederverwendbar: core/templates/core/_selection_budget.html +
   core/static/core/selection-budget.js. Beträge rechtsbündig mit
   Tabellenziffern, damit Tausenderpunkt und Kommastellen exakt untereinander
   stehen (gleiche Regel wie .data-table tfoot td / tr.row-total). */
.sel-budget { margin: var(--space-3) 0 0; max-width: 460px; }
.sel-budget td, .sel-budget th { padding: var(--space-2) var(--space-2); }
.sel-budget td.num, .sel-budget th.num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.sel-budget tr.row-total.is-over th { color: var(--danger); }
.sel-budget-warn { display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-2) 0 0; font-size: var(--fs-sm); }

/* Was mit dem Rest passiert (2026-07-20): stehen lassen (Normalfall, ohne
   Buchung) oder auszahlen. Kurzes festes Enum ⇒ Radios statt Combobox. */
.mc-credit-rest { border: 0; margin: var(--space-4) 0 0; padding: 0; }
.mc-credit-rest legend { padding: 0; margin-bottom: var(--space-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.mc-credit-rest__opt { display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) 0; cursor: pointer; }
.mc-credit-rest__opt input { margin-top: 3px; flex: none; }

/* ── Zeitraum: eigenes Dropdown mit Drill-Kalender (rw-list.js, progressive enhancement) ── */
.rw-period-native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.rw-period-dd { position:relative; display:inline-block; }
/* Trigger: randlos in die Werkzeugleisten-Feldpille integriert (kein Kasten-im-Kasten,
   keine schwere Fokus-Outline). */
.rw-period-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; font-weight:700;
  height:30px; padding:0 9px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--text); cursor:pointer; white-space:nowrap; transition:background .12s; }
.rw-period-btn:hover { background:var(--primary-softer,#f2fbf4); }
.rw-period-btn:focus { outline:none; }
.rw-period-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(12,163,12,.18); }
.rw-period-dd.is-open .rw-period-btn { background:var(--primary-softer,#f2fbf4); }
.rw-period-caret { width:12px; height:12px; flex:none; color:var(--muted); transition:transform .15s; }
.rw-period-dd.is-open .rw-period-caret { transform:rotate(180deg); }
.rw-period-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; width:262px;
  background:var(--surface,#fff); border:1px solid var(--border-strong,#d6dad7); border-radius:13px;
  box-shadow:0 10px 28px rgba(26,36,32,.14), 0 2px 7px rgba(26,36,32,.07); padding:10px; }

/* Kalender-Kopf */
.rw-calx-h { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.rw-calx-title { flex:1; height:30px; border:1px solid transparent; background:transparent;
  border-radius:9px; font:inherit; font-size:13.5px; font-weight:800; color:var(--text); cursor:pointer; transition:background .12s; }
.rw-calx-title:hover { background:var(--primary-softer,#f2fbf4); }
.rw-calx-nav { width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--border); background:var(--surface,#fff); border-radius:9px; cursor:pointer;
  color:var(--text); transition:background .12s, border-color .12s; }
.rw-calx-nav:hover { background:var(--primary-softer,#f2fbf4); border-color:var(--primary); }
.rw-calx-nav svg { width:14px; height:14px; }

/* Wochentagszeile */
.rw-calx-dow { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px; }
.rw-calx-dow span { text-align:center; font-size:10px; font-weight:700; color:var(--muted); padding:3px 0; letter-spacing:.02em; }

/* Tages-Grid */
.rw-calx-grid-d { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.rw-calx-d { height:32px; border:0; background:transparent; font:inherit; font-size:12px; font-weight:600;
  color:var(--text); cursor:pointer; border-radius:9px; font-variant-numeric:tabular-nums; transition:background .1s; }
.rw-calx-d:hover { background:var(--primary-softer,#f2fbf4); }
.rw-calx-out { color:#b9c0bb; font-weight:500; }
.rw-calx-today { box-shadow:inset 0 0 0 1.5px var(--border-strong,#d6dad7); }
.rw-calx-rin { background:var(--primary-soft,#e6f6ea); border-radius:0; }
.rw-calx-rstart { background:var(--primary); color:#fff; font-weight:800; border-radius:9px 0 0 9px; }
.rw-calx-rend { background:var(--primary); color:#fff; font-weight:800; border-radius:0 9px 9px 0; }
.rw-calx-solo { background:var(--primary); color:#fff; font-weight:800; border-radius:9px; }

/* Monats-/Jahres-Grid */
.rw-calx-grid-m { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:2px; }
.rw-calx-m { height:44px; border:1px solid transparent; background:transparent; font:inherit; font-size:12.5px;
  font-weight:600; color:var(--text); cursor:pointer; border-radius:10px; font-variant-numeric:tabular-nums;
  transition:background .1s, border-color .1s; }
.rw-calx-m:hover { background:var(--primary-softer,#f2fbf4); border-color:var(--primary); }
.rw-calx-m.rw-calx-out { color:#b9c0bb; }
.rw-calx-m.rw-calx-now { box-shadow:inset 0 0 0 1.5px var(--border-strong,#d6dad7); }
.rw-calx-m.rw-calx-sel { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:800; }

.rw-calx-hidden { display:none !important; }

/* Footer */
.rw-calx-foot { margin-top:9px; padding-top:9px; border-top:1px solid var(--border); }
.rw-calx-readout { text-align:center; font-size:12.5px; font-weight:700; color:var(--primary-ink,#046b04); margin-bottom:8px; min-height:16px; }
.rw-calx-readout.is-empty { color:var(--muted); font-weight:500; }
.rw-calx-hint { color:var(--muted); font-weight:500; }
.rw-calx-acts { display:flex; gap:7px; }
.rw-calx-acts .btn { flex:1; justify-content:center; height:32px; font-size:12.5px; }

/* ── Auswertungen im rw-Design: Filterzeile, Report-Tabellen in Karten, Aside ──
   (UVA/GuV/E-A/GuV/Bilanz/Cashflow/Saldenliste teilen dieses Muster) */
.rw-lv2 .rw-filterbar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:2px 0 16px; }
.rw-lv2 .rw-filterbar .filter-field { display:flex; flex-direction:column; gap:5px; }
.rw-lv2 .rw-filterbar label { font-size:11px; font-weight:700; color:var(--rw-muted); letter-spacing:.02em; }
.rw-lv2 .rw-filterbar select,
.rw-lv2 .rw-filterbar input[type=date] { height:38px; min-width:150px; padding:0 12px;
  border:1px solid var(--rw-border-strong); border-radius:10px; background:var(--rw-surface);
  font:inherit; font-size:13.5px; color:var(--rw-ink); }
.rw-lv2 .rw-filterbar .rw-fb-spacer { flex:1; }
.rw-report-main { display:flex; flex-direction:column; gap:15px; min-width:0; }
.rw-lv2 .rw-card table.data-table { width:100%; border-collapse:collapse; margin:2px 0 0; }
.rw-lv2 .rw-card table.data-table th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--rw-muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--rw-border); white-space:nowrap; }
.rw-lv2 .rw-card table.data-table td { padding:9px 10px; border-bottom:1px solid var(--rw-border); font-size:13.5px; }
.rw-lv2 .rw-card table.data-table tbody tr:last-child td { border-bottom:0; }
.rw-lv2 .rw-card table.data-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rw-lv2 .rw-card table.data-table tfoot td,
.rw-lv2 .rw-card table.data-table tr.row-total td { font-weight:800; border-top:2px solid var(--rw-border-strong);
  border-bottom:0; background:var(--rw-bg); }
.rw-lv2 .rw-card table.data-table td.muted, .rw-lv2 .rw-card table.data-table .small { color:var(--rw-muted); }
.rw-lv2 .rw-card > h2 small { text-transform:none; letter-spacing:0; font-weight:500; color:var(--rw-muted); margin-left:8px; font-size:11.5px; }
.rw-lv2 .rw-aside-card .stat-rows { display:flex; flex-direction:column; }
.rw-lv2 .rw-aside-card .stat-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--rw-border); }
.rw-lv2 .rw-aside-card .stat-row:last-of-type { border-bottom:0; }
.rw-lv2 .rw-aside-card .stat-label { font-size:12.5px; color:var(--rw-muted); }
.rw-lv2 .rw-aside-card .stat-value { font-size:13px; font-weight:700; color:var(--rw-ink); font-variant-numeric:tabular-nums; }
.rw-lv2 .rw-aside-card .stat-row--total .stat-label { font-size:13px; font-weight:700; color:var(--rw-ink); }
.rw-lv2 .rw-aside-card .stat-row--total .stat-value { font-size:19px; font-weight:800; }
.rw-lv2 .rw-aside-card .stat-row--hint .stat-label,
.rw-lv2 .rw-aside-card .stat-row--hint .stat-value,
.rw-lv2 .rw-aside-card .stat-row--sub .stat-label { font-size:11.5px; font-weight:500; color:var(--rw-muted); }
.rw-lv2 .rw-aside-card .stat-value.is-danger { color:var(--rw-bad,#c0392b); }
.rw-lv2 .rw-aside-card .btn { margin-top:12px; width:100%; justify-content:center; }

/* ── Pflichtfelder rot, sobald jemand abzuschicken versucht ──────────────
   Systemweit seit 27.07.2026 (Owner-Ansage). Vorher gab es das nur im
   EK-Beleg-Editor über rw-einkauf.css; Kundenanlage, Monatsabschluss und
   Übergabe hatten nichts — dort zeigte allein der Browser seine Sprechblase.

   Die Klasse `was-submitted` setzt core/rw-required.js beim ersten
   Absende-Versuch. Vorher darf nichts rot sein, sonst leuchtet ein frisch
   geöffnetes Anlage-Formular sofort und die Markierung sagt nichts mehr aus.

   Steht hier in app.css statt in rw-editor.css, weil app.css das einzige
   global geladene Stylesheet ist — die Masken binden ihre Design-Schichten
   uneinheitlich von Hand ein. */
.was-submitted :required:invalid,
.was-submitted [required]:invalid {
  border-color: var(--rw-bad, #c8322b) !important;
  box-shadow: 0 0 0 3px rgba(200, 50, 43, .12) !important; }
/* Beschriftung mit — bei langen Formularen sieht man sonst nur den Rahmen. */
.was-submitted .field:has(:required:invalid) > label,
.was-submitted .form-field:has(:required:invalid) > label {
  color: var(--rw-bad, #c8322b); }