/* ============================================================
   rechnungen.css — Rechnungs-Archiv
   Übernimmt das visuelle System der anderen Listen-Module
   (Auftraege, Kunden) — flat, klar, hochwertig.
   ============================================================ */

.re-outer {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---- Header ---- */

.re-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 14px;
  flex-wrap: wrap;
}

.re-titel {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 650;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.3px;
}

.re-untertitel {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
  font-weight: 500;
}

/* ---- KPI-Karten ---- */

.re-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .re-kpi-row { grid-template-columns: 1fr; }
}

.re-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.re-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.re-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-family: var(--font-display);
}

.re-kpi-sub {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

.re-kpi-warn { border-left: 3px solid var(--warn); }
.re-kpi-warn .re-kpi-val { color: var(--warn); }
.re-kpi-ok   { border-left: 3px solid var(--pos); }
.re-kpi-ok   .re-kpi-val { color: var(--pos); }

/* ---- Toolbar (Tabs + Suche) ---- */

.re-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.re-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

.re-tab {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

@media (hover: hover) {
  .re-tab:hover { color: var(--text); background: var(--surface); }
}
.re-tab:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.re-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.re-zeitraum {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.re-select {
  padding: 7px 28px 7px 10px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%235A6472' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
@media (hover: hover) {
  .re-select:hover { border-color: var(--accent); }
}
.re-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

.re-clear-zeit {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.re-clear-zeit:hover { background: var(--neg-soft); color: var(--neg); border-color: var(--neg-soft); }

.re-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
}

.re-search svg {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
}

.re-search-input {
  width: 100%;
  padding: 8px 36px 8px 36px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.re-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.re-clear {
  position: absolute;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.re-clear:hover { background: var(--neg-soft); color: var(--neg); }

/* ---- Tabelle ---- */

.re-tabelle-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
}

.re-tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;        /* feste Spaltenbreiten — kein Auto-Stretch */
}

.re-tabelle thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.re-tabelle .th-right  { text-align: right; }
.re-tabelle .th-center { text-align: center; }

.re-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.re-row:last-child { border-bottom: none; }
@media (hover: hover) {
  .re-row:hover { background: var(--surface-2); }
}

.re-td {
  padding: 7px 14px;          /* kompakt für Banking-Look */
  vertical-align: middle;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.re-col-datum  { color: var(--text-muted); font-size: 12.5px; }
.re-col-nr     { font-family: var(--font-mono); font-size: 12.5px; }
.re-col-nr strong { color: var(--text); font-weight: 700; }
.re-col-kunde  { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-col-brutto { text-align: right; }
.re-col-brutto strong { font-size: 14px; font-weight: 700; }
.re-netto-hint { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
/* ============================================================
   Tabellen-Layout — feste Spaltenbreiten + Anti-Overlap
   ============================================================ */

/* P2.1-BAU-Z5 (2026-07-14): KANONISCHER VERTIKAL-STAPEL — Neubau.
   Vorgeschichte: Z3 fixte 3-Badge-Overlap (falsche Schicht, wrap+width),
   Z4 fixte den UEBERFAELLIG-Clip (Spaltenbreite 260px), riss aber neuen
   Clip auf (BEZAHLT + "inkl. 1 Anzahlung" horizontal gequetscht). Wechsel
   der Strategie: JEDES Badge/Chip eigene Zeile, linksbuendig. Zellhoehe
   wächst mit der Anzahl — das war schon der stabile Zustand der 004/005-
   Zeilen. Kein flex-wrap-Race mehr, kein overflow:hidden-Kaschierer.

   Spaltenbreite-Herleitung: laengstes einzelnes Badge ist
   "UEBERFAELLIG · 6 TAGE" ~166px + 20px padding-right + 14px padding-left
   = ~200px. Colgroup nun 200px, min-width entsprechend. */
.re-col-status {
  min-width: 206px;                 /* passt zu colgroup 240px minus 34px Padding */
  padding-right: 20px !important;
  vertical-align: middle;
  text-align: left;
  white-space: normal;
  /* overflow:visible explizit — der Vertikal-Stapel garantiert, dass jedes
     Badge in eigener Zeile steht und nichts in die Aktions-Spalte laufen kann.
     `overflow:hidden` war das eigentliche Cutoff-Problem der Vorschichten. */
  overflow: visible;
}

/* Kanonischer Vertikal-Stapel: EIN Badge/Chip pro Zeile, linksbuendig.
   Kein flex-wrap-Race, keine Kombinatorik-Sonderfaelle. */
.re-col-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.re-col-actions {
  /* P2.1-BAU-Z7 (2026-07-14): 120→200px passend zum 5-Button-Fall
     (offene/ueberfaellige Zeile mit Bezahlt-Haken). Herleitung siehe
     colgroup-Kommentar in rechnungen.js:963-971. */
  width: 200px;
  min-width: 200px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  /* alle absolute/negative-margin-Hacks entfernt — alles im Flow */
  position: static;
}

/* Actions-Container: rechtsbündige Flex-Row mit fixem Gap */
.re-actions-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* P2.1-BAU-Z5 (2026-07-14): Marker-Row-Wrapper wird nicht mehr verwendet.
   display:contents-Reset war Z3-Symptom-Fix, jetzt tot. Selektor bleibt
   als Sicherheits-Reset falls alte Markup-Versionen im DOM landen. */
.re-marker-row { display: contents; }
.re-col-actions { text-align: right; }

/* Typ-Badge — unterscheidet visuell Anzahlungs- vs. Schluss-Rechnung */
.re-tag-typ {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 99px;
  text-transform: uppercase;
  vertical-align: middle;
}
.re-tag-abschlag {
  background: #dbeafe;
  color: #1e40af;
}
.re-tag-quick {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* Auftrags-Referenz unter der Re-Nr — kleiner Hinweis bei Solo-
   Anzahlungen, der zur Hauptauftragsnummer verlinkt und den
   ausstehenden Schluss-Status signalisiert. Sub-Zeilen zeigen
   diesen Hinweis NICHT (Kette ist visuell durch Verbindungslinie
   + Einrückung schon klar). */
.re-auftrag-ref {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.re-auftrag-ref-hint {
  color: var(--text-dim);
  font-weight: 400;
  font-style: italic;
}

/* P2.1-BAU-Z: dezenter Auftrags-Chip auf Haupt-Zeilen — Stil analog zu
   au-komm-badge im Auftrags-Modul. Nur dann sichtbar, wenn die Zeile eine
   Ketten-Auftragsnummer hat und nicht Solo-AB ist (der hat re-auftrag-ref). */
.re-auftrag-chip-wrap {
  margin-top: 3px;
}
.re-auftrag-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: var(--text-muted);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  font-weight: 500;
  letter-spacing: 0.02em;
}

.re-tag-hist {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 600;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ============================================================
   Status-Badges — Stripe/Banking-Look (CI-strict, WCAG)
   Flach, hoher Kontrast, uppercase, fixe Farb-Paare.
   ============================================================ */

.re-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;            /* fest 6px, keine Ovale */
  font-size: 11px;
  font-weight: 700;              /* Bold */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  border: none;                  /* clean — kein Border-Rahmen */
  font-variant-numeric: tabular-nums;
}

.re-status-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 6px;
  stroke: currentColor;          /* Icon-Farbe = Text-Farbe */
  opacity: 1;
}

/* Status-Farben — semantisch:
     bezahlt      = positiv (--pos-soft/--pos)
     offen        = Normalzustand, neutral grau
     heute faellig = Achtung heute, aber noch nicht ueberfaellig (--warn-soft/--warn)
     ueberfaellig = echte Achtung (--warn-soft/--warn)
     teilbezahlt  = weiter unten definiert (--warn-soft/--warn, kein Alarm) */
.re-status-bezahlt      { background: var(--pos-soft);  color: var(--pos); }
.re-status-offen        { background: var(--surface-3); color: var(--text-muted); }
.re-status-heute        { background: var(--warn-soft); color: var(--warn); }
.re-status-ueberfaellig { background: var(--warn-soft); color: var(--warn); font-weight: 700; }

/* ---- Aktions-Buttons ----
   P2.1-BAU-Z3 (2026-07-13): Doppel-Definition mit .re-actions-wrap
   weiter oben (Zeile 313) konsolidiert. Rechtsbuendig auf identischer
   Flucht in JEDER Zeile, damit das Badge-Overflow-Sicherheitsnetz nicht
   allein die Verantwortung tragen muss. */
.re-actions-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  width: 100%;
}

/* P2.1-BAU-Z2 (2026-07-13): Basis-Definition wandert nach style.css
   (.vn-action-btn / .re-btn-icon / .au-btn-icon / .mw-btn-icon gruppiert
   dort). Hier bleiben nur Modul-spezifische Hover-Farben. */
@media (hover: hover) {
  .re-btn-view:hover,
  .re-btn-pdf:hover,
  .re-btn-email:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }
  .re-btn-mark-paid:hover {
    background: var(--pos-soft);
    border-color: var(--pos);
    color: var(--pos);
  }
}

/* ---- Leerstand ---- */

.re-leer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.re-leer h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.re-leer p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 420px;
  line-height: 1.5;
}

/* ---- Toast ---- */

.re-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: var(--sidebar-bg);
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 9999;
  box-shadow: var(--shadow-modal);
  max-width: 80vw;
}
.re-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.re-toast-warn  { background: var(--warn); }
.re-toast-error { background: var(--neg); }

/* ============================================================
   Status-Erweiterung: Teilbezahlt + Marker (Mahnstopp / Bagatell)
   ============================================================ */

/* Teilbezahlt — echter Achtung-Status (Kunde hat begonnen zu zahlen,
   aber Rest steht aus) → Warn-Token, nicht neutral wie "offen". */
.re-status-teilbezahlt  { background: var(--warn-soft); color: var(--warn); }

/* Marker-Container: horizontale Flex-Row mit gap=4 — keine Stapelung */
.re-marker-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 4px;
}

/* Marker — identisches Token wie .re-status-badge */
.re-marker {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  border: none;
  font-variant-numeric: tabular-nums;
}

.re-marker svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 6px;
  stroke: currentColor;
  opacity: 1;
}

/* Marker-Farben semantisch:
     overdue-Marker   entfaellt (Info wandert ins Status-Badge)
     mahnstopp        --neg-soft/--neg (echte Sperre = kritisch)
     bagatell (Pruefbedarf) --accent-soft/--accent (Workflow-Hinweis, NICHT Warn) */
.re-marker-mahnstopp { background: var(--neg-soft);    color: var(--neg); }
.re-marker-bagatell  { background: var(--accent-soft); color: var(--accent); }

/* Ueberfaellig-Zeile: kein rosa Verlauf, kein voller Zeilen-Bg.
   Nur ein 3px --warn-Streifen links als Ruhe-Anker fuer den morgendlichen
   Scan der Liste. Nur bei echt ueberfaellig — NICHT bei "Heute faellig"
   und NICHT bei Pruefbedarf; der Streifen muss selten bleiben. */
.re-row-ueberfaellig {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--warn);
}

@media (hover: hover) {
  .re-row-ueberfaellig:hover {
    background: var(--surface-2);
  }
}

/* ============================================================
   BELEGKETTEN — Accordion für Schlussrechnung + Anzahlungen
   ------------------------------------------------------------
   Chevron-Micro-Spalte, "inkl. X Anzahlung"-Chip an der Haupt-
   zeile, dezente Sub-Zeilen mit --surface-2-Wash, Warn-Streifen
   an überfälligen Sub-Zeilen bleibt semantisch gleich stark wie
   an Hauptzeilen (Gruppierung darf Überfälligkeit nicht
   abschwächen). Gedimmte Sub-Zeilen: matchen nicht den aktiven
   Filter, bleiben aber sichtbar damit die Kette nicht zerreißt.
   ============================================================ */

/* Chevron-Micro-Spalte */
.re-col-chevron {
  padding: 0;
  width: 32px;
  text-align: center;
  color: var(--text-muted);
}

.re-btn-chevron {
  background: transparent;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.re-btn-chevron svg {
  width: 14px;
  height: 14px;
  transition: transform .18s ease;
}
.re-btn-chevron[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (hover: hover) {
  .re-btn-chevron:hover { background: var(--surface-2); color: var(--accent); }
}

/* Sub-Marker (corner-down-right) an Sub-Zeilen — kein Unicode */
.re-sub-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-dim);
}
.re-sub-marker svg { width: 12px; height: 12px; }

/* "inkl. X Anzahlung"-Chip in der Status-Spalte an der Hauptzeile.
   Zwei Varianten: --pos (alle bezahlt) und --warn (mind. eine offen).
   Klickbar, mit sichtbarem Fokus-Ring. */
.re-chip-inkl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--t-fast), box-shadow var(--t-fast);
}
.re-chip-inkl svg { width: 11px; height: 11px; flex-shrink: 0; }
.re-chip-inkl--pos {
  background: var(--pos-soft);
  color: var(--pos);
  border-color: var(--pos-soft);
}
.re-chip-inkl--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-soft);
}
@media (hover: hover) {
  .re-chip-inkl:hover { filter: brightness(.97); }
}
.re-chip-inkl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* "davon offen"-Sub-Zeile in der Brutto-Spalte an der Hauptzeile.
   Nutzt vnOffenerBetragKontext (Forderungssplit KPI/Mahnwesen). */
.re-brutto-offen-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 500;
}

/* Sub-Zeile (Anzahlung unter Schlussrechnung).
   Stärkerer Wash --surface-3, damit die Zugehörigkeit auf hellen
   Screens sichtbar bleibt. Verbindungslinie in der Chevron-Spalte
   klammert die Gruppe grafisch, Einrückung der Datums-Spalte
   zusätzlich. Letzte Sub-Zeile bekommt einen kräftigeren Abschluss-
   Border, damit die Gruppe optisch geschlossen ist. Der Warn-
   Streifen an überfälligen Sub-Zeilen bleibt volle Stärke —
   Semantik darf sich durchs Gruppieren nicht abschwächen. */
.re-row-sub .re-td {
  background: var(--surface-3);
  font-size: 12.5px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.re-row-sub .re-col-nr strong { font-weight: 600; }
.re-row-sub .re-col-brutto strong { font-size: 13px; }

/* Verbindungslinie: durchgehende 2px-Kante links in der Chevron-
   Spalte, macht die Sub-Zeilen zur visuellen Klammer der Gruppe. */
.re-row-sub .re-col-chevron {
  border-left: 2px solid var(--border-strong);
}

/* Deutliche Einrückung der Datums-Spalte, damit Sub-Zeilen sich
   klar von Solo-Anzahlungen unterscheiden. */
.re-row-sub .re-col-datum { padding-left: 32px; }

/* Gruppen-Abschluss: die letzte Sub-Zeile schließt die Kette mit
   einem kräftigeren Border-Bottom. JS setzt die Klasse. */
.re-row-sub--last .re-td {
  border-bottom: 2px solid var(--border-strong);
}
.re-row-sub--last .re-col-chevron {
  /* Kleine L-Form: die vertikale Klammer knickt am Ende ab. */
  border-bottom-left-radius: 3px;
}

/* Warn-Streifen an überfälligen Sub-Zeilen — dieselbe inset-Logik
   wie Hauptzeilen, damit die Ampel unmissverständlich bleibt. Der
   inset kommt zusätzlich zum border-left (Klammer + Warnung
   nebeneinander sichtbar). */
.re-row-sub.re-row-ueberfaellig .re-td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}
.re-row-sub.re-row-ueberfaellig { box-shadow: none; }

/* Gedimmte Zeilen: Sub-Beleg matcht nicht den aktiven Filter/Suche,
   bleibt aber sichtbar (Kette nicht zerreißen). Der amber inkl-Chip
   an der Hauptzeile bleibt ungedimmt — er trägt das Warnsignal. */
.re-row-dim .re-td {
  color: var(--text-dim);
  opacity: .72;
}
.re-row-dim .re-col-nr strong,
.re-row-dim .re-col-brutto strong { color: var(--text-dim); font-weight: 500; }
/* Der inkl-Chip trägt in dieser Situation das Warnsignal ("hier ist
   noch was offen") — er bleibt in voller Farbe, auch wenn die Haupt-
   zeile ansonsten gedimmt ist. */
.re-row-dim .re-chip-inkl { opacity: 1; }
.re-row-dim .re-chip-inkl--pos  { color: var(--pos); }
.re-row-dim .re-chip-inkl--warn { color: var(--warn); }

.re-btn-mark-paid { color: var(--color-success, #16a34a); }
.re-btn-mark-paid:hover { background: #ecfdf5; color: #166534; }

/* ============================================================
   Manuelle Zahlungserfassung — Modal
   ============================================================ */

.re-paid-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1100;
  animation: re-paid-fade .15s ease;
}
@keyframes re-paid-fade { from { opacity: 0; } to { opacity: 1; } }

.re-paid-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.re-paid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.re-paid-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.1px; }

.re-paid-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
  .re-paid-close:hover { background: var(--surface-3); color: var(--text); }
}

.re-paid-body {
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}

.re-paid-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
}
.re-paid-meta > div { display: flex; flex-direction: column; gap: 2px; }

/* Anzahlungs-Aufstellung im Zahlungs-Modal — User sieht auf einen
   Blick, was an Anzahlungen schon eingegangen ist. */
.re-paid-anzahlungen {
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--pos-soft);
  border: 1px solid var(--pos-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.re-paid-az-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--pos);
  margin-bottom: 6px;
}
.re-paid-az-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px 110px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed var(--pos-soft);
}
.re-paid-az-row:last-of-type { border-bottom: none; }
.re-paid-az-nr { font-weight: 600; color: var(--text); font-size: 12px; }
.re-paid-az-datum { color: var(--text-muted); font-size: 11px; }
.re-paid-az-status { font-size: 10.5px; font-weight: 600; }
.re-paid-az-bezahlt .re-paid-az-status { color: var(--pos); }
.re-paid-az-offen .re-paid-az-status { color: var(--text-muted); }
.re-paid-az-betrag {
  text-align: right;
  font-weight: 600;
  color: var(--pos);
}
.re-paid-az-offen .re-paid-az-betrag { color: var(--text-muted); }
.re-paid-az-trenner { display: none; }   /* Trenner ist optional, hier ungenutzt */

.re-paid-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #64748b);
}

.re-paid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.re-paid-field { display: flex; flex-direction: column; gap: 4px; }
.re-paid-field-full { grid-column: 1 / -1; }

.re-paid-input {
  border: 1px solid var(--border-mid);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.re-paid-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.re-paid-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.re-paid-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; gap: 8px;
  justify-content: flex-end;
}

/* ============================================================
   Mahnwesen — gesperrte Zeilen + disabled Mahnen-Button
   ============================================================ */

.mw-row-gesperrt {
  background: repeating-linear-gradient(45deg,
    transparent 0 6px, rgba(148, 163, 184, .04) 6px 12px);
}

.mw-btn-disabled,
.mw-btn-mahnen[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   KPI-KOPFKARTEN (Referenz-Look, spezifisch fuer Rechnungs-Archiv)
   ------------------------------------------------------------
   Analog zu .au-hd-kpi-* im Aufträge-Modul: Icon-Tint-Chip,
   Wert 28px in --text, Label uppercase --text-dim. Ersetzt die
   alten .re-kpi-* Klassen (bleiben legacy im CSS-File, greifen
   aber nicht mehr, weil der Render-Pfad nur noch re-hd-kpi-*
   rendert).
   ============================================================ */
.re-hd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.re-hd-kpi-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) {
  .re-hd-kpi-karte:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.re-hd-kpi-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.re-hd-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tint-blue);
  color: var(--tint-blue-fg);
}
.re-hd-kpi-icon svg { width: 16px; height: 16px; }

.re-hd-kpi-karte--blau    .re-hd-kpi-icon { background: var(--tint-blue);   color: var(--tint-blue-fg); }
.re-hd-kpi-karte--amber   .re-hd-kpi-icon { background: var(--tint-amber);  color: var(--tint-amber-fg); }
.re-hd-kpi-karte--neutral .re-hd-kpi-icon { background: var(--surface-3);   color: var(--text-muted); }
.re-hd-kpi-karte--gruen   .re-hd-kpi-icon { background: var(--tint-green);  color: var(--tint-green-fg); }

.re-hd-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.re-hd-kpi-wert {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

/* Semantische Wert-Faerbung — sparsam, nur wo sinnvoll ("Offen" = --warn) */
.re-hd-kpi-karte--warn .re-hd-kpi-wert { color: var(--warn); }

.re-hd-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .re-hd-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .re-hd-kpi-karte { padding: 14px 16px; }
  .re-hd-kpi-wert { font-size: 22px; }
}
@media (max-width: 420px) {
  .re-hd-kpi-grid { grid-template-columns: 1fr; }
}