/* ==========================================================================
 abrechnung.css — Abrechnung-Tab (Feature Abrechnung)

 Konsumenten: web/js/sections/abrechnung.js, web/js/components/cards/abr-card.js,
              web/js/components/drawers/abr-drawer.js, web/js/components/lists/abr-grid.js

 SSOT-Hinweis: Section-Chrome (Toolbar/Monats-Switcher) kommt aus LoD.PageToolbar +
 LoD.MonthSwitcher, die Karten aus den Card-Primitiven (.card-v2 + abr-card-app),
 der Drawer aus EntityDrawer. Diese Datei enthält nur noch das, was es als SSOT
 NICHT gibt: das 2-stufige editierbare Grid (abr-grid.js) + ein paar Layout-Hooks
 für Listen-Host, Drawer-Header-Meta und Drawer-Body.
 Tab-Container-Flex + Section-Root-Flex sind zentral in layout.css gesetzt.
 ========================================================================== */

#tab-content-abrechnung.hidden { display: none; }

/* ── Listen-Host (GroupedList-Karten-Grid) ──────────────────────── */
.abr-list-host { padding: var(--space-3); }

/* ══════════════════════════════════════════════════════════════
   Drawer (auf EntityDrawer aufgesetzt) — Header-Meta + Body
   ══════════════════════════════════════════════════════════════ */

/* Header-Meta: zweizeilig (Pill-Tag + Status-Pille, dann Titel + Untertitel). */
.abr-head-meta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.abr-head-row1 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.abr-head-title {
  margin: 0; line-height: 1.2;
  font-size: var(--font-size-lg); font-weight: var(--fw-semibold); color: var(--color-text);
}
.abr-head-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Body: Chips → KPI-Strip → Grid, gestapelt mit Abstand. */
.abr-drawer-body { display: flex; flex-direction: column; gap: var(--space-3); }
/* Kein overflow-x am Host — der Horizontal-Scroll des breiten Grids lebt in
   .abr-grid-wrap (innerhalb der gerahmten Karte), der Kartenrahmen bleibt stehen. */

/* ══════════════════════════════════════════════════════════════
   2-stufiges Grid (Aufgabe → Zeiteintrag) — feature-spezifisch (abr-grid.js).
   Es existiert kein generisches editierbares Tabellen-Modul (DataTable V1 = read-only).
   ══════════════════════════════════════════════════════════════ */
/* table-layout: fixed — Spaltenbreiten kommen aus der (stabilen) Kopfzeile, NICHT aus dem
   Zelleninhalt. Sonst rechnet die Auto-Layout-Engine die Spalten bei jedem Gruppenwechsel
   neu (andere Gruppen-Kopf-Texte/Einrückung) → die ganze Tabelle „springt". Fix: jede Spalte
   außer der Titel-Spalte hat eine feste Breite (s.u.), Titel nimmt den Rest. Lange Inhalte
   (ZE-Titel, Gruppen-Köpfe) brechen um statt die Spalten zu verschieben. */
.abr-grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--font-size-sm); }
.abr-grid th {
  text-align: left; padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted); font-weight: var(--fw-semibold);
  position: sticky; top: 0; background: var(--color-surface); z-index: 1;
}
.abr-grid td { padding: var(--space-1-5) var(--space-2); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.abr-c-num, .abr-c-fak { text-align: right; white-space: nowrap; width: 92px; }
.abr-c-titel { width: auto; }

.abr-auf-bulk { text-align: right; }

/* Titel + Lock in EINER Flex-Zeile — sonst faellt das inline Lock-Icon (ui-ico) hinter
   dem block-level .abr-ze-titel auf eine eigene Zeile zwischen Titel und Meta. */
.abr-ze-titelrow { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.abr-ze-titel { display: block; color: var(--color-text); }
.abr-ze-meta { display: block; font-size: var(--fs-badge); color: var(--color-text-muted); }
.abr-grid-ze.abr-ze-dirty td { background: var(--status-warning-bg); }
.abr-grid-ze.abr-ze-frozen { opacity: .7; }
.abr-lock { flex: 0 0 auto; }
/* Abrechnungshinweis des Mitarbeiters (lod_kommentarintern) — eigene markierte Zeile
   unter der Meta-Zeile, voller Wortlaut. Amber = "vor dem Abrechnen beachten". */
.abr-ma-hinweis {
  display: flex; align-items: flex-start; gap: var(--space-1);
  margin-top: var(--space-1); padding: 2px var(--space-1-5);
  border-radius: var(--radius-sm); line-height: 1.35;
  background: var(--status-warning-bg); color: var(--status-warning-fg);
  font-size: var(--fs-badge);
}
.abr-ma-hinweis .ui-ico { flex: 0 0 auto; }
.abr-ma-hinweis-txt { min-width: 0; }
.abr-na { color: var(--color-text-muted); }

.abr-in-faktor, .abr-in-abg, .abr-in-bulk {
  width: 72px; text-align: right; padding: var(--space-1) var(--space-1-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}
/* Gruppen-Bulk-Feld: gestrichelter Rahmen → lesbar als Gruppen-Steuerung (kaskadiert
   den Faktor auf alle ZE der Gruppe), nicht als einzelner Zeilenwert. */
.abr-in-bulk { width: 64px; border-style: dashed; }
.abr-in-faktor:focus, .abr-in-abg:focus, .abr-in-bulk:focus { outline: 2px solid var(--brand-default); outline-offset: -1px; }
.abr-in-faktor:disabled, .abr-in-bulk:disabled { opacity: .55; cursor: not-allowed; background: var(--color-bg-muted); }

.abr-grid-total td { border-top: 2px solid var(--color-border); font-weight: var(--fw-semibold); color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════
   Responsive (Notebook 1000–1399 · Tablet 600–999 · Mobile <600)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {
  .abr-list-host { padding: var(--space-2); }
}
@media (max-width: 599px) {
  .abr-list-host { padding: var(--space-2); }
  .abr-c-num, .abr-c-fak { width: 64px; }
  /* Input an die 48px-Content-Box (64px Spalte − 2×8px Padding) anpassen, sonst ragt
     der 56px-Input ueber die Zellgrenze in die Nachbarspalte. */
  .abr-in-faktor, .abr-in-abg, .abr-in-bulk { width: 48px; }
  /* Zweiwortige Header (Abger. (h) / Faktor %) umbrechen lassen statt ueberlaufen. */
  .abr-grid th.abr-c-num, .abr-grid th.abr-c-fak { white-space: normal; }
  /* Aktions-Spalten-Verschmaelerung steht weiter unten (nach der 208px-Basisregel bei .abr-c-act),
     sonst gewinnt die spaetere unbedingte 208px-Regel bei gleicher Spezifitaet. */
}

/* ══════════════════════════════════════════════════════════════
   Drawer-Grid-Toolbar (Gruppierung im AbrGrid)
   ══════════════════════════════════════════════════════════════ */
/* Grid-Karte: Toolbar (Kopf) + Tabelle (Körper) = EINE gerahmte Einheit, damit die
   Gruppierungs-Leiste nicht nackt zwischen KPI-Kacheln und Tabelle schwebt.
   overflow:clip clippt die Radius-Ecken OHNE neuen Scroll-Kontext → der sticky <th>
   der .abr-grid-Kopfzeile (top:0 gegen den Drawer-Body-Scroll) bleibt funktionsfähig.
   Der Horizontal-Scroll der breiten Tabelle wandert in .abr-grid-wrap, der
   Kartenrahmen bleibt stehen. */
.abr-grid-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: clip;
}
.abr-grid-card .abr-grid-wrap { overflow-x: auto; }
.abr-grid-card .abr-grid tr:last-child td { border-bottom: none; }   /* untere Kartenkante sauber */

/* Toolbar = Kopf-Streifen der Karte (statt nackter Zeile). Gruppierung links (ViewSwitcher-
   SSOT, Mount .abr-grid-groupby-host), echte Mengen-Zähler rechts. Drawer ist .app-scope
   (#lod-drawer-host) → .app-scope .anfr-view-switcher liefert die Segment-Optik. */
.abr-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.abr-grid-toolbar.abr-grid-card-head {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}
.abr-grid-toolbar-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.abr-grid-toolbar-lbl { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.abr-grid-toolbar-meta {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap;
}
.abr-tb-stat strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.abr-tb-sep { color: var(--color-text-muted); }
@media (max-width: 599px) {
  .abr-grid-toolbar.abr-grid-card-head { padding: var(--space-2); gap: var(--space-1-5); }
  .abr-grid-toolbar-meta { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ── Spalten MA (HR-Kürzel) + Δ (Faktor-Richtung) ── */
.abr-c-ma { width: 44px; text-align: center; white-space: nowrap; }
.abr-c-delta { width: 96px; text-align: right; white-space: nowrap; }
.abr-ma {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill-sm, 10px); background: var(--color-bg-muted);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); color: var(--color-text-muted);
}

/* ── Gruppen-Header (alle Ebenen) + Indentation pro Verschachtelung ── */
.abr-grid-grp td { background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border); }
.abr-grp-titel { font-weight: var(--fw-semibold); color: var(--color-text); }
/* Mixed-Abrechnung: „Support"-Badge am Gruppenkopf — trennt Support-Anfragen sichtbar
   von den Projekt-Aufgaben (Koepfe sind sonst identisch gestylt). */
.abr-grp-badge {
  display: inline-flex; align-items: center; margin-left: var(--space-2, 8px);
  padding: 0 6px; height: 18px; border-radius: var(--radius-pill-sm, 10px);
  background: var(--brand-bg-subtle); color: var(--brand-default);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); white-space: nowrap;
}
/* „läuft noch"-Variante des Gruppen-Badges: Warnton — Support-Aufgabe noch offen
   (Zeit evtl. nicht final). Nur Farbwechsel, erbt Form/Abstand von .abr-grp-badge. */
.abr-grp-badge-wip { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.abr-grid .abr-c-titel.abr-lvl-1 { padding-left: var(--space-5, 20px); }
.abr-grid .abr-c-titel.abr-lvl-2 { padding-left: var(--space-7, 28px); }

/* ── Drill-Links (Aufgaben-Gruppenkopf + Zeiteintrag-Titel → Aufgabe-Drawer) ── */
.abr-drill {
  background: none; border: none; padding: 0; margin: 0; font: inherit; text-align: left;
  color: var(--color-text); cursor: pointer;
}
.abr-drill:hover { color: var(--brand-default); text-decoration: underline; }
.abr-drill:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Richtungs-Differenzierung: Kulanz (runter, rot) vs. Aufschlag (hoch, grün) ── */
.abr-delta { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); }
.abr-delta-down { color: var(--red-700); }
.abr-delta-up   { color: var(--status-success-fg); }
.abr-delta-flat { color: var(--color-text-muted); }
.abr-dir-down .abr-in-faktor, .abr-dir-down .abr-c-fak { color: var(--red-700); }
.abr-dir-up   .abr-in-faktor, .abr-dir-up   .abr-c-fak { color: var(--status-success-fg); }

/* ── Abrechnungshinweise (nur Abrechnungstab) ──────────────────────────────────
   Hinweise stehen DIREKT an der Zeile (MA-Hinweis-Zeile + >12h-Warn-Icon) — die
   fruehere gesammelte Warn-Leiste oben im Drawer ist entfallen (redundant). */
/* Zeilen-Markierung: betroffene Abgerechnet-Zelle dezent tönen + Warn-Icon. */
/* Abgerechnet-Spalte: breiter als die anderen Zahlenspalten, weil Input + Warn-Icon
   nebeneinander stehen (sonst laeuft das Icon ueber die Zellgrenze / in die Nachbarzeile). */
.abr-c-abg { white-space: nowrap; width: 110px; }
/* Input + Warn-Icon in EINEM zentrierten Inline-Flex → Icon sitzt vertikal mittig zum
   Input (statt per vertical-align unter die Grundlinie zu rutschen) und bricht nicht um. */
.abr-abg-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); max-width: 100%; }
.abr-grid-ze.abr-ze-warn .abr-c-abg { background: var(--status-warning-bg); box-shadow: inset 2px 0 0 var(--status-warning-border); }
.abr-warn { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: help; }
.abr-warn img { width: 14px; height: 14px; }

@media (max-width: 999px) {
  .abr-c-ma { width: 40px; }
  .abr-c-delta { width: 80px; }
}

/* ══════════════════════════════════════════════════════════════
   Kontingent-Kontext-Leiste (Drawer)
   ══════════════════════════════════════════════════════════════ */
.abr-kont-empty {
  padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-muted);
}

/* ── Abrechnungs-Kontextkarten (Kontingent · Empfänger · Rechnungsdaten) ───────
   EINE Designsprache mit den KPI-Tiles (kpi-tiles.css): weisse Karte, gray-200-Rahmen,
   radius-lg, einheitliche Typo — Label xs/gray-500 (KEIN Uppercase), Wert sm/semibold,
   Sub xs/gray-500, Tones = turquoise-900 (success) / danger.

   ALLES in EINEM Block (.abr-headzone) — Kontingent · Monatszahlen ·
   Empfänger + Rechnungsdaten, durch Haarlinien in Abschnitte getrennt. Nur der Block hat einen
   Rahmen; Empfänger/Rechnungsdaten sind rahmenlose Abschnitte darin. Ziel: ein ruhiges Ganzes
   statt mehrerer konkurrierender Kästen. */
.abr-headzone {
  /* Abstand kommt aus .abr-drawer-body { gap: space-3 } — kein eigenes margin (sonst doppelt). */
  padding: var(--space-3);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
/* Empfänger + Rechnungsdaten: kein eigener Rahmen/Padding mehr — sie sind Abschnitte IM Block. */
.abr-empf-card,
.abr-rechnungsdaten { min-width: 0; }
/* Kopfzone-Innenleben: Kontingent-Strip oben, dünne Trennlinie, dann die KPI-Tiles.
   Die Trennlinie nur, wenn ein Kontingent-Kontext existiert (Support-Firma blendet ihn leer). */
.abr-headzone [data-abr-kont]:not(:empty) {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--lod-gray-200);
}
/* KPI-Tiles IN der Kopfzone sind rahmen-/hintergrundlos — die Zone ist der einzige Rahmen,
   die Tiles werden zu einer dichten Stat-Reihe (Tones färben weiterhin den Wert, nicht den
   Rahmen, daher bleibt die Erfolgs-/Warn-Codierung erhalten). */
.abr-headzone .kpi-tile {
  border: none; background: transparent; padding: 0; min-height: 0;
  /* flex-start statt space-between: ohne Stretch keine vertikale Verteilung — Wert sitzt direkt
     unter dem Label, NICHT am Tile-Boden. So liegen alle Werte auf einer Linie, egal ob ein Tile
     eine Sub-Zeile hat (Abgerechnet/Zuschläge waren sonst gegen Dauer/Kulanz versetzt). Gilt für
     BEIDE Tile-Reihen (Kontingent-Zahlen + Monats-KPIs) — eine identische Tile-Familie. */
  justify-content: flex-start;
}
/* Tiles NICHT auf Reihenhöhe strecken → jedes Tile ist content-hoch, alle starten oben, die
   großen Zahlen fluchten (Sub-Zeilen hängen darunter, ohne den Wert zu verschieben). */
.abr-headzone .kpi-tiles-grid { align-items: start; }

/* Empfänger + Rechnungsdaten nebeneinander. auto-fit → 2 Spalten wenn Platz, sonst 1.
   Ist die Rechnungsdaten-Karte leer (kein BC-Beleg / keine Rolle), greift ihr :empty-display:none
   und der Empfänger füllt die Zeile allein. align-items:start → ungleiche Höhen strecken nicht. */
.abr-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3) var(--space-5);
  /* stretch → beide Abschnitte exakt gleich hoch, egal welcher mehr Inhalt hat. */
  align-items: stretch;
}
/* Fuß-Abschnitt im Block: Haarlinie + Abstand nach oben (trennt Empfänger/Rechnungsdaten von den
   Monatszahlen — analog zur Linie zwischen Kontingent und KPIs). */
.abr-headzone .abr-meta-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--lod-gray-200);
}
/* Notebook/Tablet: Spaltenwechsel macht das intrinsische auto-fit selbst (kein fixer Breakpoint
   nötig). Mobile: Kopfzone + Meta-Reihe brauchen nur etwas weniger Innenabstand. */
@media (max-width: 999px) {
  .abr-meta-row { gap: var(--space-2-5); }
}
@media (max-width: 599px) {
  .abr-headzone { padding: var(--space-2); }
  .abr-meta-row { gap: var(--space-2); }
}
.abr-empf-head,
.abr-rechnungsdaten-head {
  display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap;
  margin-bottom: var(--space-2-5);
}
.abr-empf-head strong,
.abr-rechnungsdaten-head strong {
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text);
}
.abr-empf-head .ui-ico img,
.abr-rechnungsdaten-head .ui-ico img { opacity: .55; }
.abr-rechnungsdaten-sub,
.abr-empf-sub { font-size: var(--font-size-xs); color: var(--lod-gray-500); }

/* Kontingent-ZAHLEN (Umfang/Satz/Offen) kommen über das KpiTiles-Modul → identische Designsprache
   + Größe wie die Monats-KPIs darunter. Hier nur die ruhige Titel-/Kontext-Zeile mit den Vertrags-
   TEXTEN (Typ · Abrechnungsart). */
.abr-kont-cap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-2-5); }
.abr-kont-cap strong { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.abr-kont-cap-sub { font-size: var(--font-size-sm); color: var(--lod-gray-500); }
.abr-kont-cap .ui-ico img { opacity: .55; }

/* Abrechnungsempfänger als FELD: der Empfänger
   liegt in derselben Feld-Sprache wie die Datums-Trigger der Rechnungsdaten-Karte daneben —
   Label oben (.abr-bc-date-lbl, geteilt) + ein Rahmen-Control mit abschließendem Stift-Icon. Klick
   öffnet die Auswahl (wie ein Datums-Trigger den Picker öffnet). So lesen beide Block-Hälften als
   EIN Formular. Die alte Prosa-Zeile (.abr-empf-row / -an / -hint) bleibt nur noch als Lade-/
   Fallback-Markup bestehen. */
.abr-empf-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.abr-empf-tag {
  display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap;
  padding: 1px 8px; border-radius: var(--radius-circular);
  background: var(--lod-gray-100); color: var(--lod-gray-600);
  font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
}
/* Override-Empfänger (manuell/angepasst) — darkblue getönt, damit „weicht vom Standard ab" auffällt. */
.abr-empf-tag--override { background: var(--lod-darkblue-50); color: var(--lod-darkblue); }
/* Warn-Empfänger (Standard-Kontakt fehlt o.ä.) — EINE Definition, semantischer Token. */
.abr-empf-warn { color: var(--status-warning-fg, var(--color-text)); font-weight: var(--fw-semibold); }

/* Feld-Typo der Abrechnungs-Formulare: 13px liegt bewusst zwischen --font-size-sm (12px)
   und der Body-Schrift — als EINE Variable statt mehrfach hart (Empfänger-Feld, Selects,
   Edit-Buttons und CustomSelect-Trigger teilen dieselbe Feldsprache wie die Datums-Trigger). */
.abr-drawer-body { --abr-fs-field: 13px; }

/* Das Empfänger-Feld-Control. EXAKT die Box-Sprache der Datums-Trigger (.app-drawer-date-trigger):
   gray-200-Rahmen, radius-md, white. Spezifität 0,2,0 ist Pflicht — der globale Reset
   `.app-scope button { background:none; border:none; padding:0 }` (0,1,1) strippt es sonst.
   min-height (kein fixes 32px): der Empfänger ist 2-zeilig (Name + Mail), das Feld wächst mit. */
.app-scope .abr-empf-trigger {
  display: flex; align-items: center; gap: var(--space-2-5);
  width: 100%; min-height: 32px; box-sizing: border-box;
  padding: var(--space-1-5) var(--space-2-5);
  border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--lod-font-sans); font-size: var(--abr-fs-field, 13px); text-align: left; cursor: pointer;
}
.app-scope .abr-empf-trigger:hover { border-color: var(--lod-gray-400); }
.app-scope .abr-empf-trigger:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 2px; }
.abr-empf-trigger-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.abr-empf-trigger-name {
  font-size: var(--abr-fs-field, 13px); font-weight: var(--fw-semibold); color: var(--lod-darkblue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abr-empf-trigger-mail {
  font-size: var(--font-size-sm); color: var(--lod-gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abr-empf-trigger-ico { flex: 0 0 auto; }
.abr-empf-trigger-ico img { opacity: .5; }
.app-scope .abr-empf-trigger:hover .abr-empf-trigger-ico img { opacity: 1; }
/* „Kein Empfänger"-Feld: Warn-Text trägt die Farbe, das Add-Icon bleibt ruhig. */
.abr-empf-trigger--empty .abr-empf-trigger-name { font-weight: var(--fw-semibold); }
/* „Auf Standard zurücksetzen" unter dem Feld — nur bei aktivem Override. Ruhiger Text-Link. */
.abr-empf-resetrow { margin-top: var(--space-1-5); }
/* Bearbeiten-Modus: Auswahl (Kontakt-Dropdown) + optional manuelle Adresse + Aktionen. */
.abr-empf-edit-wrap { display: flex; flex-direction: column; gap: var(--space-2-5); }
.abr-empf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Edit-Controls (Dropdown + manuelle Felder) — EXAKT wie die Datums-Trigger:
   32px-Box, gray-200-Rahmen, radius-md, 13px. Spezifität 0,2,0 ist Pflicht: die globale
   Regel `.app-scope select { font-size: inherit }` (0,1,1) schlägt sonst jede 0,1,0-Klasse
   und das native <select> erbt die Body-Schrift (wirkt riesig neben den 13px-Feldern). */
.app-scope .abr-empf-select {
  width: 100%; max-width: 480px; height: 32px; box-sizing: border-box;
  border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md);
  color: var(--lod-darkblue); font-family: var(--lod-font-sans); font-size: var(--abr-fs-field, 13px);
  /* Chevron-Hintergrund + appearance:none kommen aus der Basis-`select{}`-Regel. */
}
.app-scope .abr-empf-ctrl {
  width: 100%; height: 32px; box-sizing: border-box; padding: 0 var(--space-2-5);
  border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--lod-darkblue);
  font-family: var(--lod-font-sans); font-size: var(--abr-fs-field, 13px);
}
.app-scope .abr-empf-select:hover, .app-scope .abr-empf-ctrl:hover { border-color: var(--lod-gray-400); }
.app-scope .abr-empf-select:focus, .app-scope .abr-empf-ctrl:focus { outline: none; border-color: var(--brand-default); }
.abr-empf-manual { display: flex; flex-wrap: wrap; gap: var(--space-2-5); }
.abr-empf-manual .abr-empf-field { flex: 1 1 220px; }
.abr-empf-editactions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Übernehmen + Abbrechen: schlanke 32px-Buttons in der Feld-Größensprache (13px + space-3,
   wie Datums-Trigger/Select) — kein chunkiges space-4/12px-Muster mehr, das aus der Reihe sprang.
   „Als Buchhaltungskontakt speichern" ist jetzt ein ruhiger Text-Link (.abr-empf-edit), kein
   dritter Voll-Button — dadurch springt der Block größentechnisch nicht mehr aus dem Muster. */
.abr-empf-editactions .fk-buchen { height: 32px; padding: 0 var(--space-3); font-size: var(--abr-fs-field, 13px); }
/* Read-only-Empfänger im „Abrechnen & Versenden"-Dialog (Quelle = die Empfänger-Karte). */
.abr-ab-empf { font-size: var(--font-size-sm); color: var(--color-text); padding: 2px 0; }

/* fk-buchen-Buttons IM Drawer (.app-scope) re-asserten: der globale Reset `.app-scope button
   { background:none; padding:0 }` strippt sie sonst zu nacktem Text. Modals (an <body>) sind
   nicht betroffen; der Drawer-Host #lod-drawer-host trägt aber .app-scope. Spezifität 0,2,0
   schlägt den Reset 0,1,1. Display/Font/Radius erbt die Basis-.fk-buchen-Regel. */
.abr-drawer-body .fk-buchen { background: var(--brand-default); color: var(--brand-text-on); padding: var(--space-1-5) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); box-sizing: border-box; font-size: var(--font-size-sm); font-weight: var(--fw-semibold); }
.abr-drawer-body .fk-buchen:hover { background: var(--brand-hover); }
/* Sekundär-Buttons (Abbrechen / Als Buchhaltungskontakt speichern) — IDENTISCHE Größe wie
   .fk-buchen (Padding/Border/Radius/Box erben aus der Regel darüber), nur Outline statt Füllung.
   Gleiche Spezifität (0,2,0), steht danach → gewinnt bei den Farb-Properties. */
.abr-drawer-body .fk-buchen--cancel { background: var(--color-surface); color: var(--color-text); border-color: var(--lod-gray-300); }
.abr-drawer-body .fk-buchen--cancel:hover { background: var(--lod-gray-100); border-color: var(--lod-gray-400); }
/* Die Konfigurations-Ansicht ist eine .app-scope-Section (KEIN Drawer) → derselbe Reset
   plättet ihren „Speichern"-Button (.fk-buchen): Brand-Füllung weg, das weiße on-dark-
   Save-Icon wird unsichtbar auf dem hellen Panel. Restore analog zur Drawer-Regel oben. */
.abr-config .fk-buchen { background: var(--brand-default); color: var(--brand-text-on); padding: var(--space-1-5) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); box-sizing: border-box; font-size: var(--font-size-sm); font-weight: var(--fw-semibold); }
.abr-config .fk-buchen:hover { background: var(--brand-hover); }

/* CustomSelect-Trigger IM Drawer re-asserten. Jedes <select> wird global per
   custom-select.js zu einem <button class="cs-trigger"> enhanced; der Reset
   `.app-scope button { background:none; border:none; padding:0; font-size:inherit }`
   (0,1,1) strippt ihn sonst zu nacktem großem Text ohne Box/Chevron. Spezifität 0,2,0
   stellt die Box wieder her — identisch zu den Datums-Triggern (32px, gray-200, 13px).
   Chevron-Fill %23616161 im Data-URI = --color-text-tertiary (Data-URIs können keine
   CSS-Variablen konsumieren — bei Token-Änderung hier manuell nachziehen). */
.abr-drawer-body .cs-trigger {
  box-sizing: border-box;
  height: 32px;
  line-height: 30px;
  padding: 0 var(--space-8) 0 var(--space-2-5);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
  color: var(--lod-darkblue);
  font-size: var(--abr-fs-field, 13px);
  text-align: left;
}
.abr-drawer-body .cs-trigger:hover { border-color: var(--lod-gray-400); }
.abr-drawer-body .cs-open .cs-trigger,
.abr-drawer-body .cs-trigger:focus-visible { border-color: var(--brand-default); outline: none; }
/* Empfänger-Dropdown auf sinnvolle Feldbreite begrenzen (nicht über die ganze Karte) — füllt
   die halbe Empfänger-Spalte, bleibt aber auch full-width ein tidy Form-Feld statt einer Insel. */
.abr-empf-field .cs-wrap { width: 100%; max-width: 480px; }
.abr-empfaenger:empty { display: none; }
.abr-rechnungsdaten-host:empty { display: none; }

/* ══════════════════════════════════════════════════════════════
   Abrechnungs-Modal-Bausteine (Reopen / Protokoll / Abschluss)
   ══════════════════════════════════════════════════════════════ */
/* Eigene Klassen statt mitbenutzter admin-mt-*-Styles: Admin-CSS-Aenderungen duerfen
   nicht unbemerkt in die Abrechnungs-Dialoge durchschlagen. Werte bewusst identisch
   zur Admin-Feldsprache (gleiche Optik, getrennte SSOT). Skelett + Close-Wiring
   liefert AbrShared.openOverlayModal (bm-overlay/bm-modal + .abr-modal). */
.abr-modal-title { font-weight: var(--fw-semibold); }
.abr-field-label {
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
/* Feld-Basis: Block + volle Breite — die Felder liegen direkt im Modal-Body (ohne
   Flex-Wrap), sonst faellt ein <textarea> auf seine Default-cols-Breite (~20 Zeichen)
   zurueck. In Flex-Zeilen (Testlauf) gewinnt die flex-basis ueber die width. */
.abr-input {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-1-5) var(--space-2-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);
  background: var(--color-surface);
  color: var(--color-text);
}
.abr-input:focus {
  outline: none;
  border-color: var(--brand-default);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.abr-input--textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.45;
  padding: var(--space-2) var(--space-2-5);
}
/* Async-Aktions-Buttons (PDF/SharePoint) im Busy-Zustand: Label + Icon werden unsichtbar,
   behalten aber ihren Platz (keine Breiten-/Umbruch-Spruenge in der Fusszeile), ein
   zentriertes „…" liegt als Overlay darueber — Inline-Styles fuer Layout-Properties
   (Breiten-Freeze per JS) sind verboten. */
.abr-modal .fk-buchen.is-busy { position: relative; color: transparent; }
.abr-modal .fk-buchen.is-busy .ui-ico { visibility: hidden; }
.abr-modal .fk-buchen.is-busy::after {
  content: '…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--brand-text-on);
}

/* Protokoll-Dialog: breiter als der 480px-Modal-Default + groesseres Textfeld
   (Ueberstunden-Hinweis wird aus dem Kontingent vorbefuellt). */
/* Nur ab Tablet aufwaerts breiter — sonst schlaegt diese ID-Regel (hohe Spezifitaet)
   die Mobile-Vollbild-Regel von .bm-modal und der Dialog bliebe ein 92vw-Kasten. */
@media (min-width: 600px) {
  #abr-protokoll-overlay .bm-modal { max-width: 560px; width: 92vw; }
}
#abr-protokoll-overlay .abr-prot-ue { min-height: 190px; }
/* Viele Aktions-Buttons (HTML-Vorschau / PDF / SharePoint) passen nicht in eine
   Zeile → Fußzeile umbrechen lassen statt rechts abzuschneiden, Buttons rechtsbündig. */
#abr-protokoll-overlay .bm-modal-footer { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2); }
/* "Abbrechen" links, Aktions-Buttons rechts (Standard-Dialog-Muster). */
#abr-protokoll-overlay .fk-buchen--cancel { margin-right: auto; }

/* ══════════════════════════════════════════════════════════════
   Zeitzuschlag-Spalte (Grid) + Reisekosten-Block (Drawer)
   ══════════════════════════════════════════════════════════════ */
/* Zuschlag-Wert + „abrechnen"-Haken + Wochentags-Vorschlag liegen kompakt in der „Abrechnung"-
   Spalte (.abr-act-row → .abr-zs-line); Styling weiter unten im Spalten-Block. */

/* Wochentag in der ZE-Meta-Zeile — Sa/So hervorgehoben, damit der PL Wochenend-
   Eintraege erkennt und rueckwirkend einen Zuschlag setzen kann. */
.abr-ze-wd { font-weight: var(--fw-semibold); }
.abr-ze-wd-we { color: var(--status-warning-fg); }
/* Zuschlag-Wert-Select im Review (immer sichtbar, auch bei "Kein Zuschlag"). Klein
   gehalten, sitzt inline in der Meta-Zeile (kein H-Scroll, max 150px). */
.abr-zs-select {
  font-size: var(--fs-badge); padding: 1px 4px; max-width: 150px; vertical-align: middle;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text);
}
.abr-zs-select:disabled { opacity: .6; cursor: not-allowed; }
/* Wochentags-Vorschlag ("+ Samstag") — uebernimmt den Auto-Wert (zeitzuschlagAuto) per Klick. */
.abr-zs-suggest {
  font-size: var(--fs-badge); padding: 1px 6px; vertical-align: middle; cursor: pointer; white-space: nowrap;
  border: 1px dashed var(--status-warning-border); border-radius: var(--radius-pill-sm, 10px);
  background: transparent; color: var(--status-warning-fg);
}
.abr-zs-suggest:hover { background: var(--status-warning-bg); }
.abr-zs-suggest:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }

/* Support-Anfragen-Auswahl (kind 'support-firma'): leerer Host → ausgeblendet. */
.abr-anfragen-host:empty { display: none; }

/* Zwei-Tabellen-Split (Mixed „Projekt & Support"): leerer Projekt-Host (alle
   anderen Abrechnungsarten) ausgeblendet; Sektions-Label über jeder Tabelle. */
.abr-grid-host:empty { display: none; }
.abr-grid-section-label {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-1-5);
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.abr-anfragen {
  margin: var(--space-3) 0 0 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted);
}
.abr-anfragen-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.abr-anfragen-head strong { font-weight: var(--fw-semibold); font-size: var(--font-size-sm); color: var(--color-text); }
/* „Alle auswählen / abwählen" rechts in der Kopfzeile; der Hinweistext rückt
   dank flex-basis:100% in eine eigene Zeile darunter. */
/* Parent-Präfix hebt die Spezifität auf (0,2,0) — sonst plättet der globale
   .app-scope button-Reset (0,1,1) border/background/padding (siehe app-scope-button-reset). */
.abr-anfragen-head .abr-anfr-selectall {
  margin-left: auto; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-sm); padding: 2px var(--space-2);
  font-size: var(--font-size-xs); color: var(--brand-default); cursor: pointer;
}
.abr-anfragen-head .abr-anfr-selectall:hover { background: var(--color-bg-subtle); border-color: var(--color-border-pressed); }
.abr-anfragen-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); flex-basis: 100%; }
.abr-anfragen-list { display: flex; flex-direction: column; gap: var(--space-1); }
.abr-anfr-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  cursor: pointer; border: 1px solid transparent;
}
.abr-anfr-row:hover { background: var(--color-bg-subtle); }
/* Tastatur-Fokus auf der Zeile sichtbar machen (Geld-relevante Auswahl) — sonst nur
   der native Checkbox-Ring, waehrend Hover/is-on die Zeile reich hervorheben. */
.abr-anfr-row:focus-within { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.abr-anfr-row.is-on { background: color-mix(in srgb, var(--lod-darkblue) 8%, transparent); border-color: color-mix(in srgb, var(--lod-darkblue) 25%, transparent); }
.abr-anfr-titel { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abr-anfr-std { flex: 0 0 auto; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Freigegebene Anfragen: eingefroren, dezent abgesetzt (muted Basis), aber ANHAKBAR zum
   Abschliessen (schliessen beim „Abrechnen & Versenden" mit) — Checkbox + „Wieder öffnen" pro Zeile. */
.abr-anfragen-freigegeben { margin-top: var(--space-2-5); }
.abr-anfragen-subhead { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.abr-anfr-row--frei { background: var(--color-bg-muted); border-color: var(--color-border-light); }
.abr-anfr-row--frei:hover { background: var(--color-bg-subtle); }
.abr-anfr-badge {
  flex: 0 0 auto; font-size: var(--fs-badge); font-weight: var(--fw-semibold);
  padding: 1px var(--space-1-5); border-radius: var(--radius-pill);
}
.abr-anfr-badge--frei { background: var(--status-warning-bg); color: var(--status-warning-fg); }
/* „berechnet" — bereits per Direktrechnung gebucht (Beleg-Nr), nur noch abzuschliessen. */
.abr-anfr-badge--beleg { background: var(--status-success-bg); color: var(--status-success-fg); }
/* „Abgerechnet" (Mixed) — in DIESEM Lauf freigegeben, read-only; Reopen via Monats-Freigabe. */
.abr-anfr-badge--abger { background: var(--status-success-bg); color: var(--status-success-fg); }
/* „davon X h abger." (Mixed) — Anfrage teilweise abgerechnet, Rest noch offen/anhakbar. */
.abr-anfr-badge--teil { background: var(--color-bg-muted); color: var(--color-text-secondary); }
/* Read-only Freigegeben-Zeile (Mixed): kein Checkbox/Reopen, nur „Abgerechnet"-Anzeige. */
.abr-anfr-row--frei.is-readonly { cursor: default; }
.abr-anfr-row--frei.is-readonly:hover { background: var(--color-bg-muted); }
/* „Wieder öffnen" pro Zeile — kompakter Outline-Button (fk-buchen--cancel liefert den Look). */
.abr-drawer-body .fk-buchen.abr-anfr-reopen { flex: 0 0 auto; height: 26px; padding: 0 var(--space-2); font-size: var(--font-size-xs); }

/* Rechnungsstatus „noch kein Beleg" — dezent, damit der Zustand immer eindeutig ist. */
.abr-beleg-bar--none .abr-beleg-stat { color: var(--color-text-muted); }
.abr-beleg-bar--none .ui-ico img { opacity: .5; }

/* Reisekosten-Block: leerer Host → ausgeblendet (kein Ballast wenn keine Fahrten).
   .abr-alt (extern abgerechneter Altbestand) teilt Box + Tabellen-Klassen —
   dasselbe Drawer-Sekundaertabellen-Muster unter dem Abrechnungs-Grid. */
.abr-reisen-host:empty, .abr-alt-host:empty { display: none; }
.abr-reisen, .abr-alt {
  margin: var(--space-3) 0 0 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted);
}
/* Altbestand-Tabelle: feste Schmalspalten (Datum/MA), Rest teilt sich Kontext + Betreff. */
.abr-alt-col-datum { width: 96px; }
.abr-alt-col-ma { width: 48px; }
.abr-alt td { white-space: nowrap; text-overflow: ellipsis; }
.abr-reisen-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.abr-reisen-head strong { font-weight: var(--fw-semibold); font-size: var(--font-size-sm); color: var(--color-text); }
.abr-reisen-sub { font-size: var(--font-size-xs); }
/* Eigener Horizontal-Scroll-Container (wie .abr-grid-wrap) → die feste Reise-Tabelle
   (380px feste Spalten + MA-Spalte) drueckt auf schmalen Drawern nicht den Body breit. */
.abr-reisen-scroll { overflow-x: auto; }
/* table-layout: fixed + feste Spaltenbreiten → die Reise-Tabelle „wackelt" nicht,
 wenn beim Faktor-Tippen neu gerendert wird. */
.abr-reisen-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--font-size-sm); }
.abr-reisen-table th, .abr-reisen-table td { padding: var(--space-1) var(--space-2); text-align: left; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.abr-reisen-table th { font-weight: var(--fw-semibold); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.abr-reisen-table .abr-c-num { text-align: right; white-space: nowrap; }
.abr-reise-col-num { width: 84px; }
.abr-reise-col-eur { width: 128px; }
.abr-reisen-table tfoot td { font-weight: var(--fw-semibold); border-bottom: none; }
.abr-reisen-confirm { white-space: nowrap; }
/* Reisekosten „abrechnen"-Toggle: Haken + Betrag (km × Satz × Faktor) als gruene Pille, wenn
   abgerechnet wird. Eigene Klasse — das Zuschlag-Pendant ist .abr-zs-line. */
.abr-reise-bill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin: 0; padding: 3px var(--space-2);
  font-size: var(--fs-badge); font-weight: var(--fw-regular); line-height: 1;
  color: var(--color-text-muted); cursor: pointer; user-select: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill-sm);
  background: var(--color-surface);
}
.abr-reise-bill.is-on { color: var(--status-success-fg); font-weight: var(--fw-semibold); border-color: var(--status-success-border); background: var(--status-success-bg); }
/* Der geerbte Fokus-Ring (--focus-ring, 4px box-shadow nach aussen) wuerde vom
   overflow:hidden der Tabellenzelle abgeschnitten. Stattdessen ein inset-Outline
   auf der Pille als zellsicherer Tastatur-Fokus-Indikator. */
.abr-reise-bill:focus-within { outline: 2px solid var(--brand-default); outline-offset: -1px; }
.abr-reise-bill input[type="checkbox"]:focus-visible { box-shadow: none; }
.abr-reise-bill input[type="checkbox"] { width: 14px; height: 14px; margin: 0; cursor: pointer; flex: 0 0 auto; vertical-align: middle; }
/* Touch: größere Tap-Fläche für die kleinen Abrechnungs-Checkboxen (Desktop bleibt kompakt). */
@media (hover: none) { .abr-reise-bill input[type="checkbox"], .abr-zs-line input[type="checkbox"] { width: 22px; height: 22px; } }
.abr-reise-bill input[type="checkbox"]:checked { background: var(--status-success-fg); border-color: var(--status-success-fg); }
.abr-reise-bill input[type="checkbox"]:checked::after { top: 50%; left: 50%; width: 3.5px; height: 7px; transform: translate(-50%, -58%) rotate(45deg); }
.abr-reise-bill:has(input:disabled) { opacity: .55; cursor: not-allowed; }
/* Fahrt-Gruppenkopf (eine Fahrt = Aufgabe + Tag); darunter pro MA eine Zeile —
 macht „mehrere Mitarbeiter, dieselbe Fahrt" erkennbar. */
.abr-reise-grp td {
  background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border);
  padding-top: var(--space-1-5); padding-bottom: var(--space-1-5);
}
.abr-reise-grp-titel { font-weight: var(--fw-semibold); color: var(--color-text); }
.abr-reise-grp-meta { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-left: var(--space-2); }
.abr-reise-row .abr-reise-ma { padding-left: var(--space-4, 16px); }
.abr-in-reisefaktor, .abr-in-reisekm {
  width: 64px; text-align: right; padding: var(--space-1) var(--space-1-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}
.abr-in-reisefaktor:focus, .abr-in-reisekm:focus { outline: 2px solid var(--brand-default); outline-offset: -1px; }
.abr-in-reisefaktor:disabled, .abr-in-reisekm:disabled { opacity: .55; }
/* Native Spinner-Pfeile aus: sie kollidieren im 64px-Feld mit der rechtsbuendigen Zahl. */
.abr-in-reisefaktor::-webkit-outer-spin-button,
.abr-in-reisefaktor::-webkit-inner-spin-button,
.abr-in-reisekm::-webkit-outer-spin-button,
.abr-in-reisekm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.abr-in-reisefaktor, .abr-in-reisekm { -moz-appearance: textfield; }

/* „Reise/km hinzufügen" — Button im Reisekosten-Kopf + einklappbares Mini-Formular
   (km Pflicht, Fahrtdauer + Datum optional). Manuelle km-Erfassung direkt in der Abrechnung. */
/* Parent-Präfix hebt die Spezifität auf (0,2,0) — sonst plättet der globale
   .app-scope button-Reset (0,1,1) border/background/padding (siehe app-scope-button-reset). */
.abr-reisen-head .abr-reise-add-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--brand-default); font: inherit; font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold); cursor: pointer;
}
.abr-reisen-head .abr-reise-add-btn:hover { background: var(--color-bg-subtle); }
.abr-reise-add { margin-bottom: var(--space-2); padding: var(--space-2-5); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-bg-muted); }
.abr-reise-add-grid { display: flex; flex-wrap: wrap; gap: var(--space-2-5); }
.abr-reise-add-f { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.abr-reise-add-f input { padding: var(--space-1) var(--space-1-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }
.abr-reise-add-f input:focus { outline: 2px solid var(--brand-default); outline-offset: -1px; }
.abr-reise-add-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2-5); }
.abr-reisen-empty { padding: var(--space-3); font-size: var(--font-size-sm); text-align: center; }

/* ══════════════════════════════════════════════════════════════
   Business Central — Mehrstunden-Beleg (Drawer, Mgmt/Invoicing)
   Aktions-Kopf (Erzeugen/Buchen/In BC öffnen)
   + Vorschau-Panel (Belegnr./Kunde/Zeilen-Tabelle/Summen). Leerer Host →
   ausgeblendet (kein Recht / nicht aktiv vor erstem Render).
   ══════════════════════════════════════════════════════════════ */
.abr-bc-host:empty { display: none; }
/* Kontextkarte in der Designsprache der Kopfzone (weiss / gray-200 / radius-lg statt Grau-Box).
   Direkte Kinder werden per flex-gap gleichmaessig gestapelt — keine per-Element-margins. */
.abr-bc {
  margin: var(--space-3) 0 0 0; padding: var(--space-3);
  border: 1px solid var(--lod-gray-200); border-radius: var(--radius-lg); background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.abr-bc-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.abr-bc-head strong { font-weight: var(--fw-semibold); font-size: var(--font-size-sm); color: var(--color-text); }
.abr-bc-head .ui-ico img { opacity: .55; }
.abr-bc-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* Status-Badge im Kopf (Entwurf/Gebucht) — rechtsbündig. */
.abr-bc-status { margin-left: auto; font-size: var(--fs-badge); font-weight: var(--fw-semibold); padding: 2px 9px; border-radius: var(--radius-pill); }
.abr-bc-status.is-draft { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.abr-bc-status.is-posted { background: var(--status-success-bg); color: var(--status-success-fg); }

/* Hero: der offene Saldo als EINE Held-Zahl (Label / grosser tone-codierter Wert / Kontext),
   Haarlinie darunter — KPI-Tile-Typografie der Nachbarkarten. */
.abr-bc-hero { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-light); }
.abr-bc-hero-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1; }
.abr-bc-hero-val { font-size: var(--font-size-h4); font-weight: var(--fw-bold); color: var(--lod-darkblue); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.01em; }
.abr-bc-hero-val.is-mehr { color: var(--lod-turquoise-900); }
.abr-bc-hero-val.is-minus { color: var(--status-danger-fg); }
.abr-bc-hero-sub { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; line-height: 1.35; }

/* Segmented-Control (Saldo | Abrechnen) — die Entscheidung in einem Blick, statt loser Radio-Stapel.
   .app-scope-Praefix schlaegt den globalen Button-Reset im Drawer-Host. */
.abr-bc-seg { display: flex; gap: 2px; padding: 2px; background: var(--lod-gray-100); border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md); }
.app-scope .abr-bc-seg-btn {
  flex: 1; border: 0; background: transparent; border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-2); cursor: pointer; font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text-tertiary);
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.app-scope .abr-bc-seg-btn:hover { color: var(--color-text); }
.app-scope .abr-bc-seg-btn.is-active { background: var(--color-surface); color: var(--lod-darkblue); box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 40, .10)); }
.app-scope .abr-bc-seg-btn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 2px; }

/* Abrechnen-Panel (progressive disclosure) — nur wenn „Zusätzlich abrechnen" gewaehlt. */
.abr-bc-panel { display: flex; flex-direction: column; gap: var(--space-2-5); }
.abr-bc-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.abr-bc-field-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.abr-bc-amount {
  display: flex; align-items: baseline; gap: var(--space-1-5); max-width: 220px;
  padding: var(--space-1-5) var(--space-2-5); border: 1px solid var(--lod-gray-300);
  border-radius: var(--radius-md); background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.abr-bc-amount:focus-within { border-color: var(--brand-default); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 22%, transparent); }
.app-scope .abr-bc-amount-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit;
  font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-text);
  font-variant-numeric: tabular-nums; padding: 0;
}
.abr-bc-amount-unit { font-size: var(--font-size-sm); color: var(--color-text-muted); flex: 0 0 auto; }
.abr-bc-field-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.abr-bc-open { font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.abr-bc-sum { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }
/* Flow-Hinweis: ruhige Rand-Notiz statt Textwand. */
.abr-bc-hint { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.45; padding-left: var(--space-2-5); border-left: 2px solid var(--lod-gray-200); }
/* Hinweis bei negativem Saldo (nichts abzurechnen). */
.abr-bc-warn { display: flex; align-items: flex-start; gap: var(--space-1-5); margin: 0; font-size: var(--font-size-xs); color: var(--status-warning-fg); line-height: 1.4; }
.abr-bc-warn .ui-ico img { opacity: .8; }
/* Primaerer CTA — die eine Aktion, volle Breite (Spezifitaet 0,3,0 schlaegt .abr-drawer-body .fk-buchen). */
.abr-drawer-body .fk-buchen.abr-bc-cta { width: 100%; justify-content: center; padding: var(--space-2) var(--space-4); }

/* Ruhige Bestaetigung (Saldo-Modus) — kein Beleg-Pfad, kein toter CTA. */
.abr-bc-confirm { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2-5) var(--space-3); background: var(--lod-turquoise-50); border: 1px solid var(--lod-turquoise-100); border-radius: var(--radius-md); }
.abr-bc-confirm-ico img { opacity: .7; }
.abr-bc-confirm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.abr-bc-confirm-title { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--lod-turquoise-900); }
.abr-bc-confirm-sub { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.4; font-variant-numeric: tabular-nums; }

/* Leistungs-/Beleg-/Buchungsdatum (editierbar, nur vor dem Entwurf): Reihe gelabelter Datums-
   Trigger (.app-drawer-date-trigger wiederverwendet). flex-wrap bricht auf schmalen Drawern
   sauber um — keine eigenen Breakpoints noetig. */
/* Datumsfelder GLEICHMÄSSIG über die Kartenbreite (Grid), nicht links klebend mit
   Leerraum rechts. Trigger füllen ihre Zelle (align-items:stretch der Spalte). */
/* 2×2-Raster (feste 2 Spalten) statt auto-fit — auf der halbbreiten Rechnungsdaten-Karte passten
   sonst 3 Felder in Zeile 1 und „Buchungsdatum" brach als verwaister 4. Wert um. */
.abr-bc-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2-5); margin-top: var(--space-2); }
.abr-bc-date { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Trigger füllt seine Grid-Zelle (volle Breite) und behält 32px Höhe. Der globale
   `.app-drawer-date-trigger`-Stil hat `flex:1` — im Spalten-Flex von .abr-bc-date würde
   das die Höhe auf den Inhalt (~19px) kollabieren lassen; hier explizit fixieren. */
.app-scope .abr-bc-dates .app-drawer-date-trigger { flex: 0 0 auto; width: 100%; height: 32px; box-sizing: border-box; justify-content: space-between; }
.abr-bc-date-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Aktions-Zeile (Sub-Text links, Buttons rechts) — Entwurf/gebucht. Abstand via .abr-bc flex-gap. */
.abr-bc-actions-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* Aktions-Buttons rechtsbündig — schiebt sich bei genug Platz an den rechten Rand,
   bricht auf schmalen Drawern unter den Sub-Text (flex-wrap an der Zeile). */
.abr-bc-actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* a + button teilen denselben Aktions-Look — Link bekommt explizit den Button-Reset,
   damit "In BC öffnen" nicht als Standard-Hyperlink (unterstrichen/blau) erscheint. */
a.abr-bc-btn { text-decoration: none; }
/* Hinweis-Text im BC-Block (dormant / Projekt ohne Kontingent / Support-Direktrechnung). */
.abr-bc-note-txt { margin: 0; font-size: var(--font-size-xs); }

/* ── Rechnungsdaten (allgemeiner Block, gilt für den ganzen BC-Beleg) ──────────
   Leistungszeitraum + Beleg-/Buchungsdatum — bewusst aus dem Mehrstunden-Block
   herausgelöst, eigener Block analog .abr-bc / .abr-kont. */
/* .abr-rechnungsdaten / -head / -sub: Surface + Header sind oben im vereinheitlichten
   Kontextkarten-Block definiert (eine Designsprache mit Kontingent/Empfänger + KPI-Tiles). */

/* Persistenter „In BC öffnen"-Link in der Beleg-Leiste (XLINK-1). */
.abr-beleg-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-left: var(--space-2); font-size: var(--font-size-xs);
  color: var(--brand-default, var(--color-brand)); text-decoration: none;
}
.abr-beleg-link:hover { text-decoration: underline; }

/* Vorschau-Panel (gerahmte Karte wie abr-grid-card). Eigener H-Scroll-Container für die
   Zeilen-Tabelle → schmaler Drawer drückt den Body nicht breit. */
.abr-bc-preview:empty { display: none; }
/* Abstand zur Aktions-Zeile kommt aus dem .abr-bc flex-gap — kein eigenes margin-top. */
/* Premium-Beleg-Karte (Entwurfsrechnung/Vorschau aus BC) — Kopf darkblue-getönt wie ein echter
   Beleg, klare Tabellen-Zeilen, Summen unten abgesetzt. */
.abr-bc-card {
  border: 1px solid var(--lod-gray-200); border-radius: var(--radius-md);
  background: var(--color-surface); overflow: clip;
}
.abr-bc-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  background: var(--lod-darkblue-50); border-bottom: 1px solid var(--lod-gray-200);
  font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.abr-bc-meta-no strong { color: var(--lod-darkblue); font-weight: var(--fw-semibold); }
.abr-bc-meta-cust { color: var(--color-text); }
.abr-bc-scroll { overflow-x: auto; }
/* table-layout: fixed → die Tabelle „wackelt" nicht bei Neu-Render (analog abr-reisen-table). */
.abr-bc-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--font-size-sm); }
.abr-bc-table th, .abr-bc-table td {
  padding: var(--space-1) var(--space-2); text-align: left;
  border-bottom: 1px solid var(--color-border-light); overflow: hidden;
}
.abr-bc-table th { font-weight: var(--fw-semibold); color: var(--color-text-muted); white-space: nowrap; }
.abr-bc-table .abr-c-num { text-align: right; white-space: nowrap; }
.abr-bc-c-desc { color: var(--color-text); }
.abr-bc-col-num { width: 104px; }
.abr-bc-table tfoot td { font-weight: var(--fw-semibold); color: var(--color-text); border-top: 2px solid var(--color-border); border-bottom: none; }

@media (max-width: 999px) {
  .abr-bc-col-num { width: 88px; }
}
@media (max-width: 599px) {
  .abr-bc { padding: var(--space-2); gap: var(--space-2-5); }
  .abr-bc-hero-val { font-size: var(--font-size-lg); }
  .abr-bc-actions { margin-left: 0; width: 100%; }
  .abr-bc-actions .abr-bc-btn { flex: 1 1 auto; justify-content: center; }
  .abr-bc-col-num { width: 70px; }
  .abr-bc-table th, .abr-bc-table td { padding: var(--space-1) var(--space-1-5); }
}

/* ══════════════════════════════════════════════════════════════
   Position-Exclude (lod_nicht_abrechnen) — Grid-Zeile + Toggles (G4)
   ══════════════════════════════════════════════════════════════ */
/* Ausgeschlossene ZE-Zeile: durchgestrichen + ausgegraut, klar als "nicht auf dem
   Beleg" erkennbar. Ueberschreibt die Faktor-Richtungstoenung (abr-dir-*). */
.abr-grid-ze.abr-ze-excluded { opacity: 0.55; }
.abr-grid-ze.abr-ze-excluded .abr-ze-titel,
.abr-grid-ze.abr-ze-excluded .abr-c-num,
.abr-grid-ze.abr-ze-excluded .abr-c-delta { text-decoration: line-through; }
/* ── „Abrechnung"-Spalte („abrechnen = nur Zuschlag") ──────
   Alle Zeilen-Entscheidungen liegen gebuendelt in EINER rechten Spalte statt verstreut in
   der Titel-/Meta-Zeile: oben die Zuschlag-Steuerung (das „abrechnen" betrifft AUSSCHLIESSLICH
   den Zuschlag), darunter die ruhige Ausnahme-Aktion „Ausschließen". Eine Zeile wird im Normal-
   fall IMMER abgerechnet — der Ausschluss ist selten und daher bewusst dezent. table-layout ist
   fixed → die Breite kommt aus dem <th>. */
.abr-c-act { width: 208px; vertical-align: top; }
/* EINE kompakte Zeile: links Zuschlag (Haken + Wert-Chip, gruen wenn „abrechnen" an), rechts oben
   das dezente Ausschließen-Symbol. min-width:0 + Limits → nichts bricht aus der Spalte. */
.abr-act-row { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; max-width: 100%; padding-top: 2px; }

/* Zuschlag: Haken VOR dem Wert-Chip — Haken = „abrechnen" (betrifft NUR den Zuschlag, geht an
   Business Central). Angehakt → Haken + Chip gruen. „Kein Zuschlag" zurueckhaltend (gestrichelt). */
.abr-zs-line { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; max-width: 100%; }
.abr-zs-line input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; flex: 0 0 auto; vertical-align: middle; }
.abr-zs-line input[type="checkbox"]:checked { background: var(--status-success-fg); border-color: var(--status-success-fg); }
.abr-zs-line input[type="checkbox"]:checked::after { top: 50%; left: 50%; width: 3.5px; height: 7px; transform: translate(-50%, -58%) rotate(45deg); }
.abr-zs-line input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
/* Wert-Chip: custom-select-Trigger auf Chip-Maße, hart auf die Zellbreite begrenzt (Ellipsis statt
   Ausbruch). Spezifitaet 0,2,0 schlaegt die generische `.abr-drawer-body .cs-trigger`-Regel oben. */
.abr-zs-wrap { display: inline-flex; min-width: 0; max-width: 100%; }
.abr-c-act .cs-wrap { max-width: 100%; min-width: 0; }
.abr-c-act .cs-trigger {
  height: 26px; line-height: 24px; min-width: 88px; max-width: 100%;
  padding: 0 24px 0 var(--space-2-5);
  border-radius: var(--radius-pill); font-size: var(--fs-badge);
  background-position: right var(--space-2) center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abr-c-act .abr-zs-select { max-width: 100%; }
.abr-zs-wrap.is-none .cs-trigger { color: var(--lod-gray-500); border-style: dashed; }
/* „abrechnen" an → Wert-Chip gruen (passend zum gruenen Haken). */
.abr-zs-line.is-on .cs-trigger { color: var(--status-success-fg); border-color: var(--status-success-border); background: var(--status-success-bg); }
.abr-c-act .abr-zs-suggest { flex: 0 0 auto; }

/* Ausschließen = seltene Ausnahme → dezenter Icon-Button, oben rechts in der Zeile. Standard sehr
   leise (graues Symbol), bei Hover/aktiv kraeftiger. Die ausgeschlossene Zeile (grau + durch-
   gestrichen) traegt die eigentliche visuelle Last; das Symbol ist nur der Schalter. */
.abr-excl-btn {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  border-radius: var(--radius-sm); cursor: pointer;
}
.abr-excl-btn .ui-ico img { width: 16px; height: 16px; opacity: .32; }
.abr-excl-btn:hover { background: var(--lod-gray-100); }
.abr-excl-btn:hover .ui-ico img { opacity: .85; }
.abr-excl-btn.is-on .ui-ico img { opacity: 1; }
.abr-excl-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   Beleg-/Versand-Leiste (Pro-Lauf-Tracking, G2) — Spiegel der Kont-Leiste
   ══════════════════════════════════════════════════════════════ */
.abr-beleg-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-muted); font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.abr-beleg-bar strong { color: var(--color-text); }
.abr-beleg-stat { display: inline-flex; align-items: center; gap: var(--space-1); }

/* „Ändern"/„Zurücksetzen"/„Abbrechen" als ruhige Text-Links — kein floatender Button.
   „Übernehmen" bleibt der primäre .fk-buchen-Button. */
/* .app-scope-Praefix → schlaegt die Basis-Regel `.app-scope button` (sonst erbt „Ändern"
   Groesse/Farbe des Default-Buttons statt des ruhigen Links). */
.app-scope .abr-empf-edit {
  flex-shrink: 0; background: none; border: 0; padding: 2px; line-height: 1.2;
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  color: var(--brand-default, var(--lod-darkblue-700)); cursor: pointer;
}
.app-scope .abr-empf-edit:hover { text-decoration: underline; }
.app-scope .abr-empf-edit:focus-visible { outline: 2px solid var(--brand-default, var(--lod-darkblue-700)); outline-offset: 2px; border-radius: 4px; }
/* „Als Buchhaltungskontakt speichern" ist tertiär — dezenter Grau-Link, damit im Edit-Modus nur
   EIN blaues Element (Übernehmen) führt. Steht nach .abr-empf-edit → gewinnt bei den Farben. */
.app-scope .abr-empf-savefirma { color: var(--lod-gray-600); font-weight: var(--fw-regular); }
.app-scope .abr-empf-savefirma:hover { color: var(--lod-gray-800); }

/* ══════════════════════════════════════════════════════════════
   Diagnose-Leiste: verwaiste fakturierbare ZEs (G7)
   ══════════════════════════════════════════════════════════════ */
.abr-diagnose { margin-bottom: var(--space-2); }
.abr-diagnose-box {
  border: 1px solid var(--status-warning-border, var(--color-border));
  border-radius: var(--radius-md); background: var(--status-warning-bg, var(--color-bg-muted));
}
.abr-diagnose-box > summary {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm);
  color: var(--status-warning-fg, var(--color-text)); font-weight: var(--fw-semibold);
}
.abr-diagnose-detail { padding: 0 var(--space-3) var(--space-2); overflow-x: auto; }
.abr-diagnose-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.abr-diagnose-table th, .abr-diagnose-table td {
  padding: var(--space-1) var(--space-2); text-align: left;
  border-bottom: 1px solid var(--color-border-light); white-space: nowrap;
}
.abr-diagnose-table th { font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.abr-diagnose-table .abr-diag-h { text-align: right; }

@media (max-width: 599px) {
  .abr-beleg-bar { gap: var(--space-1-5); }
  .abr-diagnose-detail { padding-left: var(--space-2); padding-right: var(--space-2); }
  /* Aktions-Spalte auf Mobile schmaler (Tabelle scrollt in .abr-grid-wrap) — NACH der 208px-
     Basisregel, damit sie tatsaechlich greift (Media-Query erhoeht die Spezifitaet nicht). */
  .abr-c-act { width: 172px; }
}

/* ══════════════════════════════════════════════════════════════
   Abrechnen-&-Versenden — gefuehrter Abschluss-Dialog
   ══════════════════════════════════════════════════════════════ */
#abr-abschluss-overlay .bm-modal { max-width: 560px; width: 92vw; }
.abr-ab-steps {
  display: flex; flex-direction: column; gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted);
}
.abr-ab-opt { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); cursor: pointer; }
.abr-ab-opt input { cursor: pointer; }
.abr-ab-progress { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.abr-ab-step { font-size: var(--font-size-sm); }
.abr-ab-step.is-ok { color: var(--status-success-fg); }
.abr-ab-step.is-err { color: var(--status-warning-fg, var(--color-text)); }
#abr-abschluss-overlay .bm-modal-footer { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2); }
/* Testlauf-Gruppe „an mich" — dezent abgesetzter Block (gestrichelter Rahmen = „kein echter
   Versand"), Eingabe + Sekundär-Button in einer Zeile. */
.abr-ab-test {
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted);
}
.abr-ab-test-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1-5); }
.abr-ab-test-row .abr-input { flex: 1 1 220px; min-width: 0; }
.abr-drawer-body .abr-ab-test-btn,
#abr-abschluss-overlay .abr-ab-test-btn { flex: 0 0 auto; white-space: nowrap; }
#abr-abschluss-overlay .fk-buchen--cancel { margin-right: auto; }

/* ══════════════════════════════════════════════════════════════
   Wieder-Öffnen — abgerechnete Support-Anfragen
   ══════════════════════════════════════════════════════════════ */
.abr-card-hint { font-size: var(--fs-badge); color: var(--color-text-muted); margin-top: var(--space-1); }
#abr-reopen-overlay .bm-modal { max-width: 560px; width: 92vw; }
.abr-reopen-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 50vh; overflow-y: auto; }
.abr-reopen-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm); font-size: var(--font-size-sm); cursor: pointer;
}
.abr-reopen-row input { cursor: pointer; flex: 0 0 auto; }
.abr-reopen-titel { flex: 1 1 auto; min-width: 0; }
.abr-reopen-tn { color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.abr-reopen-date { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--fs-badge); }
#abr-reopen-overlay .fk-buchen--cancel { margin-right: auto; }

/* ══════════════════════════════════════════════════════════════
   BC-Abrechnungs-Konfiguration — Sub-View „Einstellungen"
   Editierbare globale Artikel-/Preis-Einrichtung (CRM-Integration-Singleton in BC).
   Premium-Karten-Layout: je Abrechnungs-Szenario eine Karte (Icon-Chip + Titel +
   Beschreibung), gestapelte Felder mit Such-Combobox (AsyncPicker) / Preis-Inputs
   (DrawerMounts). Sticky Speichern-Leiste. Alles tokenbasiert + 4 Breakpoints.
   ══════════════════════════════════════════════════════════════ */
/* In der Config-View die Listen-Toolbar ausblenden (ViewSwitcher bleibt im Page-Header). */
#tab-content-abrechnung .abr-mode-config > .lod-section-toolbar { display: none; }

/* ── Toolbar-Positions-Stabilität ────────────────────────────────────────────
   Der frühere Abrechnung-Sonderfall (feste LEFT-Basis + reaktivierter Spacer
   gegen das horizontale „Springen" beim Sub-View-Wechsel) ist seit 2026-07-13
   der GLOBALE Toolbar-Default (SSOT für alle Toolbars) — siehe
   web/styles/components/toolbar/toolbar.css (Slot-Modell) und
   docs/reference/design-system/modules/toolbar.md. Die Abrechnung braucht hier
   deshalb keine eigene Override mehr. */

/* 940px (statt 860): Platz für 3 gleich breite Felder (2×320 Lookup + 1 schmales) in einer
   Zeile ohne Umbruch — bleibt eine ruhige, zentrierte Settings-Breite. */
#tab-content-abrechnung .abr-config { max-width: 940px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-4); }

/* Kopf */
.abr-config .abr-cfg-head { margin-bottom: var(--space-6); }
.abr-config .abr-cfg-back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: none; border: none; cursor: pointer; padding: var(--space-1) 0; margin-bottom: var(--space-3);
  color: var(--color-text-muted); font-size: var(--fs-sm);
}
.abr-config .abr-cfg-back:hover { color: var(--color-accent); }
.abr-config .abr-cfg-back img { opacity: .7; }
.abr-config .abr-cfg-title { font-size: var(--font-size-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin: 0 0 var(--space-1); }
.abr-config .abr-cfg-sub { color: var(--color-text-muted); font-size: var(--font-size-md); margin: 0; max-width: 60ch; }

/* Karten */
.abr-config .abr-cfg-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.abr-config .abr-cfg-card {
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  background: var(--color-bg-surface); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.abr-config .abr-cfg-card-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.abr-config .abr-cfg-card-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent-bg-soft);
}
.abr-config .abr-cfg-card-icon img { width: 20px; height: 20px; }
.abr-config .abr-cfg-card-headtext { min-width: 0; }
.abr-config .abr-cfg-card-title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); margin: 0; }
.abr-config .abr-cfg-card-desc { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 2px 0 0; }

/* Felder im Karten-Body — flex-wrap: Artikel-Picker breit, Preis-/schmale Felder kompakt. */
/* align-items:flex-start: Felder NICHT auf gleiche Höhe strecken. Sonst zieht ein Feld mit
   2-zeiligem Hint sein 1-zeiliges Nachbarfeld mit — und dessen Lookup-Control (füllt die
   gestreckte Höhe) wird 57px statt 40px. Top-Ausrichtung hält alle Controls einheitlich 40px. */
.abr-config .abr-cfg-card-body { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
/* Konsistentes Raster: Felder wachsen NICHT auf volle Kartenbreite (grow 0), sondern haben
   eine feste Basis → Lookups sind über alle Karten gleich breit (links gepackt, Weißraum
   rechts). Bei knapper Breite schrumpfen sie gemeinsam (shrink 1); <600px volle Breite. */
.abr-config .abr-cfg-field { flex: 0 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.abr-config .abr-cfg-field--narrow { flex: 0 1 160px; }     /* Preise/Codes: schmal (nur wenige Zeichen) */
.abr-config .abr-cfg-field-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.abr-config .abr-cfg-hint { font-size: var(--fs-badge); color: var(--color-text-muted); }

/* Such-Combobox (AsyncPicker) + Inputs — einheitliche Premium-Höhe/Look */
.abr-config .app-async-picker {
  display: flex; align-items: center; gap: var(--space-1-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0 var(--space-3); min-height: 40px; cursor: pointer;
  background: var(--color-bg-default); width: 100%; transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.abr-config .app-async-picker:hover { border-color: var(--color-border-hover); }
.abr-config .app-async-picker:focus,
.abr-config .app-async-picker:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-bg-soft); }
.abr-config .app-drawer-input { width: 100%; min-height: 40px; }
.abr-config .app-drawer-number-wrap { min-height: 40px; }

/* Speichern-Leiste — in-flow (NICHT sticky): eine sticky Leiste sprang im Scroll-Container;
   ein ruhiger rechtsbündiger Abschluss mit Trennlinie ist berechenbarer. */
.abr-config .abr-cfg-footer {
  margin-top: var(--space-5); padding-top: var(--space-4);
  display: flex; justify-content: flex-end;
  border-top: 1px solid var(--color-border-light);
}
.abr-config .abr-cfg-state { margin-top: var(--space-4); }
.abr-config .abr-cfg-state strong { display: block; margin-bottom: var(--space-1); }

/* Notebook (1000–1399) + Tablet (600–999): Karten bleiben voll, Felder umbrechen via flex-wrap. */
@media (max-width: 999px) {
  #tab-content-abrechnung .abr-config { padding: var(--space-5) var(--space-4) var(--space-4); }
}
/* Mobile (<600): jedes Feld volle Breite, kompaktere Karten. */
@media (max-width: 599px) {
  #tab-content-abrechnung .abr-config { padding: var(--space-4) var(--space-3) var(--space-3); }
  .abr-config .abr-cfg-card { padding: var(--space-4); }
  .abr-config .abr-cfg-card-body { gap: var(--space-3); }
  .abr-config .abr-cfg-field,
  .abr-config .abr-cfg-field--narrow { flex-basis: 100%; }
}

/* Touch-Targets >= 36px ab Tablet (Responsive-Audit Sektion 2, Regel 4):
   Auf Desktop bleiben Empfänger-Select und Exclude-Toggle kompakt; ab Tablet
   wächst die Tap-Fläche. Die Reise-Pille (.abr-reise-bill) bleibt bewusst
   kompakt — ihr <label> ist die Tap-Fläche (dokumentierte Audit-FPs).
   Regeln einzeln (keine Komma-Gruppen): der Audit-Parser matcht Tablet-
   Overrides selektorgenau. */
@media (max-width: 999px) {
  .app-scope .abr-empf-select { height: auto; min-height: 36px; }
  .app-scope .abr-empf-ctrl { height: auto; min-height: 36px; }
  .abr-excl-btn { width: 36px; height: 36px; }
  /* Reise-Add-Formular ist ein eigenständiges Formular (kein dichtes Grid) → Tap-Fläche ≥36px. */
  .abr-reise-add-f input { min-height: 36px; }
  /* Zuschlag-Checkbox steht solo im <span> (kein Label) → moderat größere Box.
     36px sähe kaputt aus; der ::after-Haken bleibt zentriert (translate-basiert). */
  .abr-zs-line input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   Lizenzabrechnungs-Kontrolle (Sub-View „Lizenzen", abrechnung.js _abrRenderLizenz)
   Read-only Kontroll-/Vorschau-Schicht: je Kunde die fälligen Lizenz-Positionen
   (Seats × VK) + RSS-25-%-Zeile + Marge + BC-Abgleich. KpiTiles-Hero-Band + Kunden-
   Karten mit Positionstabelle. Tokenbasiert, 4 Breakpoints. SSOT-Motor: api/services/
   lizenz-abrechnung.js. In der Lizenz-View blenden wir die listen-spezifischen
   Toolbar-Controls (Status/Gruppierung/Sortierung) aus — Monat + Suche + Counter bleiben.
   ══════════════════════════════════════════════════════════════ */
#tab-content-abrechnung .abr-mode-lizenz [data-toolbar-state-wrap],
#tab-content-abrechnung .abr-mode-lizenz [data-toolbar-action="open-grouping"],
#tab-content-abrechnung .abr-mode-lizenz [data-toolbar-action="open-sort"] { display: none; }

#tab-content-abrechnung .abr-lizenz-host { padding: var(--space-3); }
#tab-content-abrechnung .abr-liz { display: flex; flex-direction: column; gap: var(--space-3); }
#tab-content-abrechnung .abr-liz-kpis { margin-bottom: var(--space-1); }
#tab-content-abrechnung .abr-liz-note { margin: 0; }
#tab-content-abrechnung .abr-liz-empty { padding: var(--space-6) var(--space-3); text-align: center; color: var(--color-text-muted); }

#tab-content-abrechnung .abr-liz-card {
  border: var(--surface-border, 1px solid #e5e7eb); border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #fff); box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,0.05));
  overflow: hidden;
}
#tab-content-abrechnung .abr-liz-card.is-ready { border-left: 3px solid var(--lod-turquoise); }
#tab-content-abrechnung .abr-liz-card.is-blocked { border-left: 3px solid var(--lod-amber-600, #9a6700); }
#tab-content-abrechnung .abr-liz-card-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2-5, 10px) var(--space-3); border-bottom: var(--surface-border, 1px solid #e5e7eb);
  background: var(--color-bg-subtle, #fafafa);
}
#tab-content-abrechnung .abr-liz-avatar { width: 28px; height: 28px; font-size: 11px; flex: 0 0 auto; }
#tab-content-abrechnung .abr-liz-card-name { font-weight: var(--fw-semibold, 600); font-size: var(--font-size-md, 14px); margin-right: auto; }
#tab-content-abrechnung .abr-liz-chip {
  font-size: 11px; line-height: 1.5; padding: 1px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle, #e5e7eb); white-space: nowrap;
}
#tab-content-abrechnung .abr-liz-chip--ok { border-color: transparent; color: var(--lod-turquoise-900, #3c6669); background: color-mix(in srgb, var(--lod-turquoise) 12%, transparent); }
#tab-content-abrechnung .abr-liz-chip--warn { border-color: var(--status-warning-fg, #9a6700); color: var(--status-warning-fg, #9a6700); background: var(--status-warning-bg, #fdf3e6); }
#tab-content-abrechnung .abr-liz-chip--muted { color: var(--color-text-muted); }
#tab-content-abrechnung .abr-liz-chip--open { border-color: color-mix(in srgb, var(--lod-amber-600, #9a6700) 45%, transparent); color: var(--lod-amber-700, #7a5200); }
#tab-content-abrechnung .abr-liz-chip--rss { border-color: color-mix(in srgb, var(--lod-turquoise) 55%, transparent); color: var(--lod-turquoise-900, #3c6669); background: color-mix(in srgb, var(--lod-turquoise) 10%, transparent); font-weight: var(--fw-semibold, 600); }
/* --loc: autoritativer Zielzustand „von LoC gebucht" — kräftiger Marken-Blau-Chip, hebt sich
   bewusst vom advisory BC-„Über BC berechnet" (--ok, türkis) ab. --draft: LoC-Entwurf offen. */
#tab-content-abrechnung .abr-liz-chip--loc { border-color: transparent; color: #fff; background: var(--lod-darkblue, #1b3a5b); font-weight: var(--fw-semibold, 600); }
#tab-content-abrechnung .abr-liz-chip--draft { border-style: dashed; border-color: color-mix(in srgb, var(--lod-darkblue, #1b3a5b) 45%, transparent); color: var(--lod-darkblue, #1b3a5b); }

/* Aktionszeile je Kunde (Entwurf/Buchen/Mail/Storno) — nur bei verbundenem BC gerendert. */
#tab-content-abrechnung .abr-liz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 2px 2px; margin-top: 10px; border-top: 1px solid var(--color-border-subtle, #e5e7eb); }
#tab-content-abrechnung .abr-liz-actinfo { margin-right: auto; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
#tab-content-abrechnung .abr-liz-act { font-size: 12.5px; font-weight: var(--fw-semibold, 600); padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border, #d1d5db); background: var(--color-surface, #fff); color: var(--color-text, #111); cursor: pointer; transition: background .12s ease, border-color .12s ease; }
#tab-content-abrechnung .abr-liz-act:hover { background: var(--color-surface-hover, #f3f4f6); }
#tab-content-abrechnung .abr-liz-act:disabled { opacity: .55; cursor: default; }
#tab-content-abrechnung .abr-liz-act--primary { background: var(--lod-darkblue, #1b3a5b); border-color: transparent; color: #fff; }
#tab-content-abrechnung .abr-liz-act--primary:hover { background: var(--lod-darkblue-900, #14283c); }
#tab-content-abrechnung .abr-liz-act--danger { border-color: color-mix(in srgb, var(--status-danger-fg, #a6443a) 45%, transparent); color: var(--status-danger-fg, #a6443a); background: transparent; }
#tab-content-abrechnung .abr-liz-act--danger:hover { background: color-mix(in srgb, var(--status-danger-fg, #a6443a) 8%, transparent); }

#tab-content-abrechnung .abr-liz-tablewrap { overflow-x: auto; }
#tab-content-abrechnung .abr-liz-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, 13px); }
#tab-content-abrechnung .abr-liz-table th {
  text-align: left; font-size: 11px; font-weight: var(--fw-semibold, 600); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3); border-bottom: var(--surface-border, 1px solid #e5e7eb);
}
#tab-content-abrechnung .abr-liz-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle, #eef0f2); vertical-align: top; }
#tab-content-abrechnung .abr-liz-table tbody tr:last-child td { border-bottom: 0; }
#tab-content-abrechnung .abr-liz-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#tab-content-abrechnung .abr-liz-strong { font-weight: var(--fw-semibold, 600); }
#tab-content-abrechnung .abr-liz-muted { color: var(--color-text-muted); }
#tab-content-abrechnung .abr-liz-neg { color: var(--status-danger-fg, #b3261e); }
#tab-content-abrechnung .abr-liz-pos { color: var(--lod-turquoise-900, #3c6669); }
#tab-content-abrechnung .abr-liz-row--dim td { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-bg-subtle, #fafafa) 55%, transparent); }
#tab-content-abrechnung .abr-liz-pname { display: inline; }
#tab-content-abrechnung .abr-liz-poswarn { display: block; font-size: 11px; color: var(--status-warning-fg, #9a6700); margin-top: 1px; }
#tab-content-abrechnung .abr-liz-sub { display: block; font-size: 11px; font-weight: var(--fw-regular, 400); color: var(--color-text-muted); }
#tab-content-abrechnung .abr-liz-vdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--lod-gray-400, #9aa0a6); }
#tab-content-abrechnung .abr-liz-vdot--ms { background: var(--lod-darkblue, #0f6cbd); }
#tab-content-abrechnung .abr-liz-vdot--adobe { background: var(--lod-danger, #b3261e); }
#tab-content-abrechnung .abr-liz-vdot--ave { background: var(--lod-turquoise); }
#tab-content-abrechnung .abr-liz-rss-row td { background: color-mix(in srgb, var(--lod-turquoise) 5%, transparent); font-weight: var(--fw-semibold, 600); }
#tab-content-abrechnung .abr-liz-table tfoot td { padding: var(--space-2-5, 10px) var(--space-3); border-top: 2px solid var(--color-border-subtle, #e5e7eb); font-weight: var(--fw-semibold, 600); }

@media (max-width: 999px) {
  #tab-content-abrechnung .abr-liz-c-ek { display: none; }
}
@media (max-width: 599px) {
  #tab-content-abrechnung .abr-lizenz-host { padding: var(--space-2); }
  #tab-content-abrechnung .abr-liz-c-marge { display: none; }
}
#tab-content-abrechnung .abr-liz-foot { font-size: var(--font-size-xs); color: var(--color-text-muted); padding-top: var(--space-1); }