/* ═══════════════════════════════════════════════════════════════════════════
   Rechnungsreiter-Redesign 6.115.0 (Teil A) — Design-System nach verbindlicher
   Vorlage design_handoff_rechnungen/README.md. Präfix rx- (kollisionsfrei zum
   Portal-CSS). Farben, Radien, Höhen und Typografie sind Vorlagenwerte —
   NICHT frei ändern.
   ═══════════════════════════════════════════════════════════════════════════ */
#view-rechnungen{
  --rx-gruen:#0E7A4B; --rx-gruen-hover:#0B6140; --rx-tint:#E9F3EE; --rx-tint-bd:#BFDCCE;
  --rx-ink:#1B1F1D; --rx-sek:#66716B; --rx-schwach:#98A29C; --rx-spalte:#7A857F;
  --rx-bg:#F2F4F3; --rx-karte:#FFF; --rx-karte-bd:#E3E8E5; --rx-input-bd:#D3DAD6;
  --rx-trenner:#F0F3F1; --rx-kopf:#FAFBFA;
  --rx-rot:#B3271D; --rx-rot-bg:#FBEDEB; --rx-amber:#9A5B0B; --rx-amber-bg:#FCF3E4;
  /* audit/250 Alternativpositionen — bewusst NICHT gruen/rot: sie sind weder erledigt
     noch fehlerhaft, sondern „steht daneben, zaehlt nicht mit". */
  --rx-alt-ink:#8A6318; --rx-alt-bd:#D8BD86; --rx-alt-bg:#FBF7EE;
  color:var(--rx-ink);
  font-variant-numeric:normal;
}
#view-rechnungen *{box-sizing:border-box}
#fx-root{background:var(--rx-bg);min-height:calc(100vh - 60px);margin:-16px;padding:0}
.rx-num{font-variant-numeric:tabular-nums}
.rx-mono{font-family:ui-monospace,Menlo,monospace}

/* ── Buttons (EIN System) ── */
.rx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;
  border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--rx-input-bd);
  background:#fff;color:var(--rx-ink);font-family:inherit;white-space:nowrap}
.rx-btn:hover{background:#F3F5F4}
.rx-btn-primary{background:var(--rx-gruen);border-color:var(--rx-gruen);color:#fff}
.rx-btn-primary:hover{background:var(--rx-gruen-hover);border-color:var(--rx-gruen-hover)}
.rx-btn-tint{background:var(--rx-tint);border-color:var(--rx-tint-bd);color:var(--rx-gruen)}
.rx-btn-tint:hover{background:#DCEDE4}
.rx-btn-quiet{background:transparent;border-color:transparent;color:var(--rx-sek);font-weight:500}
.rx-btn-quiet:hover{background:#EEF1EF;color:var(--rx-ink)}
.rx-btn-klein{height:28px;padding:0 10px;font-size:12px}
.rx-btn:disabled{opacity:.55;cursor:default}
.rx-iconbtn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  background:transparent;border:none;color:#B4BCB7;cursor:pointer;padding:0}
.rx-iconbtn:hover{background:#EEF1EF;color:var(--rx-gruen)}
.rx-iconbtn-rot:hover{background:var(--rx-rot-bg);color:var(--rx-rot)}
.rx-iconbtn32{width:32px;height:32px;border:1px solid var(--rx-input-bd);border-radius:8px;color:var(--rx-sek)}
.rx-iconbtn32:hover{background:#F3F5F4;color:var(--rx-ink)}

/* ── Inputs ── */
.rx-input,.rx-select{height:32px;padding:0 10px;border:1px solid var(--rx-input-bd);border-radius:8px;
  background:#fff;font-size:13px;color:var(--rx-ink);outline:none;font-family:inherit}
.rx-input:focus,.rx-select:focus,.rx-textarea:focus{border-color:var(--rx-gruen);box-shadow:0 0 0 3px rgba(14,122,75,.12)}
.rx-input::placeholder{color:#9AA59F}
.rx-input-klein{height:30px;font-size:12.5px;border-radius:7px}
.rx-select{padding-right:28px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2366716B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.rx-textarea{width:100%;min-height:66px;padding:8px 10px;border:1px solid var(--rx-input-bd);border-radius:8px;
  font-size:13px;line-height:1.5;color:var(--rx-ink);resize:vertical;outline:none;background:#fff;font-family:inherit}
.rx-suchfeld{position:relative;display:inline-flex;align-items:center}
.rx-suchfeld svg{position:absolute;left:10px;pointer-events:none}
.rx-suchfeld .rx-input{padding-left:32px}
.rx-label{display:block;font-size:11.5px;font-weight:600;color:var(--rx-sek);margin-bottom:5px}
.rx-inline-input{border:1px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--rx-ink);
  padding:3px 6px;margin-left:-6px;border-radius:6px;outline:none;font-family:inherit}
.rx-inline-input:hover{background:#F6F8F7}
.rx-inline-input:focus{background:#fff;border-color:var(--rx-gruen);box-shadow:0 0 0 3px rgba(14,122,75,.12)}

/* ── Karten / Seite ── */
.rx-karte{background:var(--rx-karte);border:1px solid var(--rx-karte-bd);border-radius:12px;box-shadow:0 1px 2px rgba(15,26,20,.04)}
.rx-kartekopf{padding:10px 16px;border-bottom:1px solid #EEF1EF;display:flex;align-items:center;gap:8px}
.rx-kartetitel{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--rx-spalte);text-transform:uppercase}
.rx-kpi{flex:1;background:#fff;border:1px solid var(--rx-karte-bd);border-radius:12px;padding:13px 16px}
.rx-kpi-wert{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.rx-kpi-label{font-size:12px;color:var(--rx-sek);margin-top:2px}
.rx-seite{padding:16px 24px 28px;min-width:1140px}
.rx-kopfzeile{padding:18px 24px 0;display:flex;align-items:flex-start;gap:12px}
.rx-titel{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.rx-gobd{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--rx-spalte)}

/* ── Tabs ── */
.rx-tabs{display:flex;gap:2px;padding:12px 24px 0;border-bottom:1px solid #E6EAE7}
.rx-tab{display:flex;align-items:center;gap:6px;padding:8px 11px 9px;font-size:13px;cursor:pointer;margin-bottom:-1px;
  color:var(--rx-sek);font-weight:500;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.rx-tab:hover{color:var(--rx-ink)}
.rx-tab.aktiv{color:var(--rx-gruen);font-weight:600;border-bottom-color:var(--rx-gruen)}
.rx-tab-badge{min-width:18px;height:17px;padding:0 5px;border-radius:999px;background:var(--rx-amber-bg);color:var(--rx-amber);
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* ── Pills / Chips ── */
.rx-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.rx-pill-entwurf{background:#EEF1EF;color:#52605A}
.rx-pill-offen{background:var(--rx-amber-bg);color:var(--rx-amber)}
.rx-pill-ueberfaellig{background:var(--rx-rot-bg);color:var(--rx-rot)}
.rx-pill-bezahlt{background:var(--rx-tint);color:var(--rx-gruen)}
.rx-pill-neutral{background:#F0F3F1;color:#52605A}
.rx-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;
  font-weight:600;cursor:pointer;border:1px solid var(--rx-input-bd);background:#fff;color:var(--rx-sek);font-family:inherit}
.rx-chip:hover{background:#F3F5F4}
.rx-chip.aktiv{background:var(--rx-tint);border-color:var(--rx-tint-bd);color:var(--rx-gruen)}
.rx-chip .rx-chip-n{opacity:.65;font-weight:500}
.rx-chip-klein{height:24px;padding:0 9px;font-size:11.5px}

/* ── Tabellen (Grid-Zeilen) ── */
.rx-thead{display:grid;gap:12px;align-items:center;padding:8px 16px;border-top:1px solid #EEF1EF;background:var(--rx-kopf)}
.rx-th{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--rx-spalte);cursor:default}
.rx-th.sortierbar{cursor:pointer}
.rx-th.rechts{text-align:right}
.rx-zeile{display:grid;gap:12px;align-items:center;padding:9px 16px;border-top:1px solid var(--rx-trenner)}
.rx-zeile.klickbar{cursor:pointer}
.rx-zeile.klickbar:hover{background:#F3F7F5}
.rx-zeile.gedimmt{opacity:.55}
/* audit/269 (Stefan, 24.08.2026): eine stornierte Rechnung steht nur noch als schmaler
   Platzhalter in der Liste — ihre Nummer bleibt wegen des Rechnungsnummern-Fortlaufs vergeben,
   ein Vorgang ist sie nicht mehr. Halbe Zeilenhoehe, grau, zwei Spalten statt acht. */
.rx-zeile-storniert{grid-template-columns:212px 1fr;padding:4px 16px;background:#FAFBFA}
.rx-zeile-storniert.klickbar:hover{background:#F1F4F2}
.rx-storno-nr{font-size:12px;color:var(--rx-schwach);text-decoration:line-through;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-storno-text{font-size:11.5px;color:var(--rx-schwach);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-fuss{display:flex;align-items:baseline;gap:16px;padding:10px 16px;border-top:1px solid #E9EDEA;background:var(--rx-kopf);border-radius:0 0 12px 12px;font-size:12.5px;color:var(--rx-spalte)}
.rx-leer{padding:36px 16px;text-align:center;border-top:1px solid var(--rx-trenner);font-size:13px;color:var(--rx-sek)}
.rx-zelle-1{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-zelle{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-zelle-sek{font-size:12px;color:var(--rx-spalte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-zelle-datum{font-size:12.5px;color:var(--rx-sek);font-variant-numeric:tabular-nums}
.rx-zelle-betrag{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.rx-sub{font-size:11.5px;color:var(--rx-spalte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Hinweisbanner ── */
.rx-banner{display:flex;gap:9px;align-items:flex-start;padding:10px 14px;background:#FCF7EC;border:1px solid #F0DFC0;
  border-radius:10px;margin-bottom:12px;font-size:12.5px;color:#7A5A1E;line-height:1.5}
.rx-banner-gruen{background:var(--rx-tint);border-color:var(--rx-tint-bd);color:#065f46}
.rx-banner-rot{background:var(--rx-rot-bg);border-color:#E8B7B2;color:#8C1F17}

/* ── Switch (34×20, Knopf 16) ── */
.rx-switch{width:34px;height:20px;border-radius:999px;border:none;cursor:pointer;position:relative;padding:0;
  background:#CBD4CF;transition:background .15s;flex:none}
.rx-switch.an{background:var(--rx-gruen)}
.rx-switch span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.rx-switch.an span{left:16px}

/* ── Popover / Menü ── */
@keyframes rxFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes rxSlideIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes rxScrim{from{opacity:0}to{opacity:1}}
.rx-menue{position:absolute;right:0;top:38px;width:230px;background:#fff;border:1px solid var(--rx-karte-bd);
  border-radius:10px;box-shadow:0 12px 32px rgba(15,26,20,.16);padding:5px;z-index:40;animation:rxFade .14s ease}
.rx-menue-eintrag{padding:8px 10px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--rx-ink)}
.rx-menue-eintrag:hover{background:#F3F5F4}
.rx-menue-eintrag.rot{color:var(--rx-rot)}
.rx-popover{position:absolute;width:380px;background:#fff;border:1px solid var(--rx-karte-bd);border-radius:10px;
  box-shadow:0 14px 36px rgba(15,26,20,.2);z-index:40;animation:rxFade .14s ease}
.rx-popover-fuss{padding:7px 12px;border-top:1px solid #EEF1EF;font-size:11px;color:var(--rx-schwach)}

/* ── Drawer (Katalog) ── */
.rx-scrim{position:fixed;inset:0;background:rgba(16,24,20,.24);z-index:250;animation:rxScrim .15s ease}
.rx-drawer{position:fixed;top:0;right:0;bottom:0;width:470px;background:#fff;box-shadow:-16px 0 44px rgba(15,26,20,.2);
  z-index:251;display:flex;flex-direction:column;animation:rxSlideIn .18s ease}
.rx-drawer-eintrag{display:flex;align-items:center;gap:10px;padding:8px 16px;cursor:pointer}
.rx-drawer-eintrag:hover{background:#F3F7F5}
.rx-plusknopf{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;border:1px solid var(--rx-input-bd);background:#fff;color:var(--rx-sek)}
.rx-drawer-eintrag:hover .rx-plusknopf{border-color:var(--rx-tint-bd);background:var(--rx-tint);color:var(--rx-gruen)}
.rx-plusknopf.drin{border-color:var(--rx-tint-bd);background:var(--rx-tint);color:var(--rx-gruen)}

/* ── Dialog (Festschreiben) ── */
.rx-dialog-scrim{position:fixed;inset:0;background:rgba(16,24,20,.32);z-index:300;animation:rxScrim .15s ease}
.rx-dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:440px;background:#fff;border-radius:14px;
  box-shadow:0 24px 64px rgba(15,26,20,.3);padding:20px;z-index:301;animation:rxFade .16s ease}

/* ── Toast ── */
.rx-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#15201B;color:#fff;padding:9px 16px;
  border-radius:10px;font-size:13px;display:flex;gap:8px;align-items:center;z-index:400;
  box-shadow:0 8px 24px rgba(0,0,0,.25);animation:rxFade .18s ease;white-space:nowrap}

/* ── Editor ── */
.rx-ed-topbar{display:flex;align-items:center;gap:10px;padding:9px 24px;background:#fff;border-bottom:1px solid #E6EAE7;
  position:sticky;top:0;z-index:20}
.rx-ed-trenner{width:1px;height:20px;background:#E6EAE7;flex:none}
.rx-ed-inhalt{display:flex;gap:18px;padding:18px 24px 40px;max-width:1280px}
.rx-ed-haupt{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.rx-ed-seite{width:296px;flex:none;align-self:flex-start;position:sticky;top:66px;display:flex;flex-direction:column;gap:14px}
.rx-avatar{width:36px;height:36px;border-radius:10px;background:var(--rx-tint);color:var(--rx-gruen);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.rx-griffpunkt{cursor:grab;color:#C4CCC8;user-select:none}
/* ── audit/250: Positionen verschieben + Alternativpositionen ─────────────────────────
   Der Griff war ein <svg draggable="true">. Browser werten das Attribut nur an HTML-
   Elementen aus — dragstart feuerte nie und das Ziehen war tot, ohne dass es jemand
   merkte. Ziehen laeuft jetzt ueber ein <span>; die Auf/Ab-Knoepfe sind der verlaessliche
   Weg daneben. */
.fx-pfeil{width:15px;height:11px;padding:0;line-height:9px;border:1px solid var(--rx-input-bd);border-radius:3px;
  background:#fff;color:var(--rx-sek);font-size:8px;cursor:pointer;font-family:inherit;display:block}
.fx-pfeil:hover:not(:disabled){border-color:var(--rx-gruen);color:var(--rx-gruen);background:#F7FBF9}
.fx-pfeil:disabled{opacity:.28;cursor:default}
.rx-zeile.rx-zeile-alt{background:var(--rx-alt-bg);box-shadow:inset 3px 0 0 var(--rx-alt-bd)}
.rx-altmarke{flex:none;padding:1px 5px;border:1px solid var(--rx-alt-bd);border-radius:4px;background:#F7EDD8;
  color:var(--rx-alt-ink);font-size:10px;font-weight:700;letter-spacing:.03em}
.rx-altschalter{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--rx-alt-ink);
  font-weight:600;cursor:pointer;white-space:nowrap}
.rx-altschalter input{margin:0;cursor:pointer;accent-color:#B8862B}
.rx-fassung{margin-top:8px;padding:8px 10px;border:1px solid var(--rx-karte-bd);border-radius:8px;
  background:var(--rx-kopf);font-size:11px;color:var(--rx-sek);line-height:1.5}
.rx-fassung b{color:var(--rx-ink)}
.rx-fassung .warn{color:var(--rx-amber);font-weight:600}
.rx-posplus{display:block;width:calc(100% - 32px);margin:10px 16px 12px;padding:7px;border:1px dashed #CBD4CF;
  border-radius:8px;background:transparent;color:var(--rx-sek);font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit}
.rx-posplus:hover{border-color:var(--rx-gruen);color:var(--rx-gruen);background:#F7FBF9}
.rx-klapp{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer}
.rx-klapp:hover{background:var(--rx-kopf)}
.rx-klapp svg{transition:transform .15s}
.rx-klapp.offen svg{transform:rotate(0deg)}
.rx-klapp.zu svg{transform:rotate(-90deg)}

/* ── Statistik ── */
.rx-balkenraum{display:flex;align-items:flex-end;gap:18px;padding:18px 20px 10px;height:210px}
.rx-balken{width:100%;max-width:46px;border-radius:6px 6px 0 0;background:var(--rx-gruen)}
.rx-balken.hell{background:var(--rx-tint-bd)}
.rx-fortschritt{height:6px;border-radius:999px;background:#EEF1EF;overflow:hidden}
.rx-fortschritt>div{height:6px;border-radius:999px;background:var(--rx-gruen)}

/* Sub-Dialoge im Alt-Modal (fx-kat-modal) erben die neue Optik */
#fx-kat-modal .modal-content,#fx-modal .modal-content{border-radius:14px}