/* ==========================================================================
   rn-skin.css — regio.network-Kleid für regio.works (Re-Skin, NUR Optik)
   --------------------------------------------------------------------------
   Quelle: /Projekte/regio.network/konzepte/design-system (tokens.css,
   komponenten.css, README §10 Owner-Entscheide 26.10.2026).
   Lädt als LETZTES Stylesheet. Ändert keine Klassen, IDs, data-* oder Markup —
   es biegt nur die vorhandenen ERP-Variablen auf die Portal-Werte um und legt
   die Portal-Optik über die bestehenden ERP-Klassen.
   Akzent: Navy + EIN Lime-Detail (Symbol im Hauptknopf, Marke in der Leiste).
   ========================================================================== */

/* ── 1. Portal-Tokens (tokens.css, Akzent = Navy-Variante) ─────────────── */
:root {
  --rail-grund:#15181d; --rail-linie:#262a32;
  --rail-text:#f2f4f6; --rail-leise:#aab2bd; --rail-still:#78818d;
  --rail-hover:#1d2128; --rail-an:#232830; --rail-badge:#2a3039;
  --grund:#f6f7f9; --karte:#ffffff; --flaeche:#fafbfc; --karte-hoch:#f0f2f5;
  --linie:#e2e6eb; --linie-stark:#cbd2da; --linie-fein:#eef1f4;
  --rahmen-hover:#c3cad3;
  --leise:#4d5763; --still:#78828f;
  --akzent:#16222f; --akzent-hell:#243547; --akzent-bg:#f0f2f5; --akzent-rand:#cbd2da;
  --navy:#16222f; --navy-hell:#243547; --lime:#d8f20a;
  --rot:#c81e1e; --gelb:#a85c06; --blau:#1d4ed8; --gruen:#12703a; --lila:#6428d0;
  --rot-bg:#fde5e5; --gelb-bg:#fdf0d5; --blau-bg:#dde9fd; --gruen-bg:#d8f4e2; --lila-bg:#e9e2fc;
  --r:9px; --r-gross:12px;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --schatten:0 1px 2px rgba(28,36,48,.05);
  --schatten-hoch:0 4px 12px rgba(28,36,48,.09);
  --schatten-liste:0 8px 28px rgba(28,36,48,.16);
  --schatten-toast:0 10px 28px rgba(21,29,40,.28);
  --ring-navy:0 0 0 3px rgba(22,34,47,.10);
  --feld-h:36px;  /* Owner 26.10.: kompakt fürs MacBook 14" → einheitlich 36 */
}

/* ── 2. ERP-Variablen → Portal-Werte (Alias-Tabelle README §7.2) ───────── */
:root {
  --bg: var(--grund); --surface: var(--karte); --surface-2: var(--flaeche);
  --subtle: var(--karte-hoch); --border: var(--linie); --border-strong: var(--linie-stark);
  --text: #151d28; --muted: var(--leise);
  --ink: var(--rail-grund); --ink-2: #232830; --on-ink: #fff; --on-ink-muted: var(--rail-leise);
  /* Owner 26.10.: der grüne Hauptknopf entfällt → Navy */
  --primary: var(--navy); --primary-hover: var(--navy-hell);
  --primary-ink: var(--navy); --primary-dark: var(--navy); --on-primary: #fff;
  --primary-soft: var(--karte-hoch); --primary-softer: var(--flaeche);
  --secondary: var(--navy); --secondary-soft: var(--karte-hoch);
  --success: var(--gruen); --success-dark: var(--gruen);
  --danger: var(--rot); --danger-soft: var(--rot-bg); --danger-strong: #b42318;
  --in-fg: var(--gruen); --out-fg: var(--rot);
  --ok-bg: var(--gruen-bg); --ok-fg: var(--gruen);
  --off-bg: #e7eaee; --off-fg: var(--leise);
  --addon-bg: var(--karte-hoch); --addon-fg: var(--navy);
  --plan-bg: var(--gelb-bg); --plan-fg: var(--gelb);
  --st-neutral-bg: #e7eaee;     --st-neutral-fg: var(--leise);
  --st-info-bg: var(--blau-bg); --st-info-fg: var(--blau);
  --st-success-bg: var(--gruen-bg); --st-success-fg: var(--gruen);
  --st-warn-bg: var(--gelb-bg); --st-warn-fg: var(--gelb);
  --st-muted-bg: #eef0f3;       --st-muted-fg: var(--still);
  --st-danger-bg: var(--rot-bg); --st-danger-fg: var(--rot);
  --nav-on-bg: var(--rail-an); --nav-on-ic: var(--lime);
  --nav-sub-on: #fff; --nav-sub-on-bg: var(--rail-an); --nav-hover: var(--rail-hover);
  --radius: var(--r-gross); --radius-lg: var(--r-gross); --radius-sm: var(--r);
  --shadow: none; --shadow-sm: var(--schatten); --shadow-md: var(--schatten-hoch);
  --shadow-pop: var(--schatten-liste);
  --ring: var(--ring-navy);

  /* Redesign-Skin (rw.css) — dieselben Werte */
  --rw-surface: var(--karte); --rw-bg: var(--grund);
  --rw-border: var(--linie); --rw-border-strong: var(--linie-stark);
  --rw-ink: #151d28; --rw-muted: var(--leise);
  --rw-zebra: var(--flaeche); --rw-rowhov: var(--karte-hoch);
  --rw-radius: var(--r-gross); --rw-radius-sm: var(--r);
  --rw-shadow: none; --rw-shadow-pop: var(--schatten-liste);
  --rw-neon: var(--navy); --rw-neon-ink: var(--navy); --rw-on-neon: #fff;
  --rw-good: var(--gruen); --rw-good-ink: var(--gruen); --rw-good-soft: var(--gruen-bg); --rw-good-line: #a7dcbb;
  --rw-warn: var(--gelb); --rw-warn-ink: var(--gelb); --rw-warn-soft: var(--gelb-bg);
  --rw-bad: var(--rot); --rw-bad-ink: var(--rot); --rw-bad-soft: var(--rot-bg);
  --rw-fldh: var(--feld-h); --rw-fldpy: 8px; --rw-fldpx: 13px; --rw-fldr: var(--r);
  --rw-focus-cat: 22,34,47;
}
/* Entwurfs-Masken setzen ihre Werte lokal — dort ebenfalls umbiegen. */
.entwurf.entwurf {
  --bg: var(--grund); --surface: var(--karte); --border: var(--linie); --border-strong: var(--linie-stark);
  --ink: #151d28; --muted: var(--leise); --neon: var(--navy);
  --good: var(--gruen); --good-soft: var(--gruen-bg); --warn: var(--gelb); --warn-soft: var(--gelb-bg);
  --bad: var(--rot); --bad-soft: var(--rot-bg);
  --zebra: var(--flaeche); --rowhov: var(--karte-hoch);
  --fldh: var(--feld-h); --fldpy: 8px; --fldpx: 13px; --fldr: var(--r);
  --radius: var(--r-gross); --shadow: none; --shadow-hover: var(--schatten-hoch);
}

body { background: var(--grund); color: var(--text); font-family: var(--schrift); line-height: 1.55; }
::selection { background: var(--lime); color: var(--text); }

/* ── 3. Seitenleiste: dunkel, 252 px ───────────────────────────────────── */
@media (min-width: 900px) { html:not(.sidebar-collapsed) .sidebar { flex: 0 0 252px; width: 252px; } }
.sidebar { background: var(--rail-grund); border-right: 0;
  color: var(--rail-text); scrollbar-width: thin; scrollbar-color: var(--rail-linie) transparent; }
.brand { color: #fff; padding: 22px 22px 18px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.brand-mark { content: url("rn-brand-rail.svg"); }
.sidenav { padding: 4px 10px 22px; }
.nav-section + .nav-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rail-linie); }
.nav-item { color: var(--rail-leise); font-size: 14.5px; font-weight: 450; padding: 9px 12px; gap: 12px; border-radius: var(--r); }
/* Hover in der Leiste: Limette aus der CI (Owner 26.10.) — Schrift, Symbol, Punkt */
.nav-item:hover, .nav-parent.active:hover { background: var(--rail-hover); color: var(--lime); }
/* Aktiver Punkt in Farbe (Owner 26.10.): Limette auf getöntem Grund */
.nav-item.active, .nav-item.active:hover { background: rgba(216,242,10,.14); color: var(--lime); font-weight: 600; }
.nav-parent.active { background: none; color: #fff; font-weight: 600; }
.nav-icon, .nav-parent.active .nav-icon, .nav-caret { color: var(--rail-still); }
.nav-item:hover .nav-icon, .nav-item:hover .nav-caret { color: var(--lime); }
.nav-item.active .nav-icon, .nav-parent.active .nav-icon { color: var(--lime); }
.nav-children { padding-left: 4px; }
.nav-child { color: var(--rail-leise); font-weight: 450; font-size: 13.5px; padding: 7px 10px 7px 30px; }
.nav-child::before { background: var(--rail-still); left: 18px; }
.nav-child:hover { background: var(--rail-hover); color: var(--lime); }
.nav-child:hover::before { background: var(--lime); }
.nav-child.active, .nav-child.active:hover { background: rgba(216,242,10,.14); color: var(--lime); font-weight: 600; }
.nav-child.active::before { background: var(--lime); }
.nav-open { color: var(--rail-still); }
.nav-open:hover { background: var(--rail-badge); color: var(--lime); }
.nav-open:focus-visible { outline-color: var(--lime); }
.sidebar-toggle { color: var(--rail-still); border-top-color: var(--rail-linie); background: var(--rail-grund); }
.sidebar-toggle:hover { color: var(--lime); }

/* ── 4. Kopfleiste ─────────────────────────────────────────────────────── */
.topbar { background: var(--karte); border-bottom: 1px solid var(--linie); height: 60px; padding: 0 36px; }
.qc-btn { background: var(--navy); color: #fff; border-radius: var(--r); padding: 0 16px; height: 40px; font-weight: 550; }
.qc-btn:hover { background: var(--navy-hell); }
.qc-plus { color: var(--lime); font-weight: 600; }
.lv-search { border-radius: var(--r); border-color: var(--linie-stark); background: var(--karte); height: 40px; }
.lv-search:focus { border-color: var(--navy); box-shadow: var(--ring-navy); }
.notif-btn { border-color: var(--linie-stark); }
.user-btn { border-color: var(--linie-stark); }
.avatar { background: var(--navy); color: var(--lime); font-weight: 600; }
.dropdown, .qc-menu, .notif-dropdown { border-color: var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten-liste); }

/* ── 5. Inhalt, Seitenkopf, Brotkrume ──────────────────────────────────── */
.content { padding: 26px 36px 110px; }
.page-head h1, .rw-lv2 .rw-pagehead h1, .inv-doc-head h1 {
  font-size: 29px; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.breadcrumb, .rw-lv2 .rw-crumb { font-size: 12.5px; color: var(--still); font-weight: 450; }
.breadcrumb-link { color: var(--navy); font-weight: 550; }
.breadcrumb-current, .rw-lv2 .rw-crumb b { color: var(--leise); font-weight: 550; }

/* ── 6. Karten ─────────────────────────────────────────────────────────── */
.card { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: none; padding: 20px 24px; }
.card h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
/* Redesign-Karten: keine bunten Kantenmarken, Titel wie .karte-kopf h2 */
.rw-ed .card, .rw .tablecard, .rw-lv2 .rw-tablecard, .rw-skin .inv-card, .rw .cust-head {
  border-radius: var(--r-gross); box-shadow: none; border-color: var(--linie); }
.rw-ed .card::before, .rw-skin .inv-card::before { display: none; }
.rw-ed .card > h2, .rw-ed .card .inv-fin-head h2, .rw-skin .inv-card > h2 {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.rw-skin .inv-card > h2::before { display: none; }
.rw-ed .card h2 .h2mark { display: none; }
.rw .tbl-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.rw-ed .card h2 small, .rw-skin .inv-card > h2 small { color: var(--still); font-weight: 450; }

/* ── 7. Knöpfe: Navy-Hauptknopf mit Lime-Symbol, eine pro Ansicht ──────── */
.btn { min-height: var(--feld-h); padding: 0 16px; border-radius: var(--r); font-weight: 550; font-size: 14px; gap: 8px; }
.btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn--lg { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn.btn--primary, .rw-lv2 .rw-cta, .rw .rw-cta {
  background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
  filter: none !important; box-shadow: none; font-weight: 550; }
.btn.btn--primary:hover, .rw-lv2 .rw-cta:hover, .rw .rw-cta:hover {
  background: var(--navy-hell) !important; border-color: var(--navy-hell) !important; }
.btn.btn--primary svg, .rw-cta svg { color: var(--lime); }
.btn--secondary { background: var(--karte); border-color: var(--linie-stark); color: var(--text); }
.btn--secondary:hover { background: var(--flaeche); border-color: var(--rahmen-hover); }
.btn--ghost { color: var(--leise); }
.btn--ghost:hover { background: var(--karte-hoch); color: var(--text); }
.btn--ink { background: var(--navy); color: #fff; }
.btn--ink:hover { background: var(--navy-hell); }
.btn--danger { border-color: var(--linie-stark); color: var(--rot); }
.btn--danger:hover { background: var(--rot-bg); border-color: #f1b8b8; }
.rw-cta { min-height: var(--feld-h); padding: 0 16px !important; border-radius: var(--r) !important; font-size: 14px !important; }
/* Werkzeugleisten: 36 px */
.rw-toolbar .btn, .lv-bar .btn { min-height: 36px; font-size: 13.5px; font-weight: 500; border-radius: var(--r); }
.btn--filter-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── 8. Felder: EIN Rahmen, 44 px ──────────────────────────────────────── */
.form-field label, .rw-ed .field > label, .rw-skin .form-field > label {
  font-size: 13px; font-weight: 600; color: var(--leise); text-transform: none; letter-spacing: 0; }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="url"],
.form-field input[type="tel"], .form-field input[type="date"], .form-field input[type="number"],
.form-field input[type="password"], .form-field input:not([type]), .form-field select,
.rw-ed .field input:not([type="checkbox"]):not([type="radio"]), .rw-ed .field select, .rw-ed .inp,
.rw-skin.inv-editor input:not([type="checkbox"]):not([type="radio"]), .rw-skin.inv-editor select {
  min-height: var(--feld-h); border: 1px solid var(--linie-stark); border-radius: var(--r);
  background-color: var(--karte); font-size: 14px; padding-left: 13px; padding-right: 13px; box-shadow: none; }
.form-field textarea, .rw-ed .field textarea, .rw-skin.inv-editor textarea {
  border: 1px solid var(--linie-stark); border-radius: var(--r); font-size: 14px; padding: 9px 13px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus,
.rw-ed .field input:focus, .rw-ed .field select:focus, .rw-ed .field textarea:focus, .rw-ed .inp:focus,
.rw-skin.inv-editor input:focus, .rw-skin.inv-editor select:focus, .rw-skin.inv-editor textarea:focus {
  border-color: var(--navy); box-shadow: var(--ring-navy); outline: none; }
/* Such-Comboboxen (Kunde, Bearbeiter:in, Artikel) tragen die Lupe als
   Hintergrundbild — der Platz links bleibt dafür frei (Fix 26.10.). */
.rw-ed .prod-combo input.inv-prod-search { padding-left: 31px !important; }
.rw-ed .inp--ro, .rw-ed .field input[readonly].inp--ro { background: var(--flaeche); border-color: var(--linie); }
::placeholder { color: var(--still); }
/* Schalter: an = Navy (Portal .schalter) */
.rw .sw .sw-tr { background: var(--linie-stark); }
.rw .sw input:checked + .sw-tr { background: var(--navy); }
.rw .sw input:focus-visible + .sw-tr { box-shadow: var(--ring-navy); }
.rw .sw .sw-lb { color: var(--text); font-size: 13.5px; font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); }
/* app.css zeichnet das Häkchen dunkel (für die alte Neon-Füllung) — auf Navy
   war es unsichtbar. Weißes Häkchen/Strich auf der Navy-Füllung. */
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8l6-6.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2'%3E%3Cpath d='M1.5 1h9' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── 9. Reiter → Portal-Reiterleiste (Unterstrich) ─────────────────────── */
/* Abstand bleibt 6 px: das Überlauf-Skript der Akte rechnet fest damit (contact_detail.html). */
.rw .cust-head .tabbar { gap: 6px; padding: 0; margin-top: 16px; }
.rw .tab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 13px 10px 12px; margin-bottom: -1px; font-size: 14.5px; font-weight: 450; color: var(--leise); }
.rw .tab:hover { background: none; color: var(--text); }
.rw .tab--on, .rw .tab--on:hover { background: none; color: var(--text); font-weight: 600;
  border-bottom: 2.5px solid var(--navy); }
.rw .tabn { background: var(--karte-hoch); color: var(--still); font-weight: 600; font-size: 11px; }
.rw .tab--on .tabn { background: var(--navy); color: #fff; }
.rw .tab--more { border: 0; background: none; color: var(--leise); }
.rw .tab--more.tab--on, .rw .tab--more.tab--on:hover { background: none; color: var(--text); }
.doc-tabs, .rw-skin .doc-tabs, .rwb-tabs { border-bottom: 1px solid var(--linie); gap: 24px !important; }
/* Reiter (Portal .reiterleiste): nur Text + Unterstrich. app.css, rw-skin.css und
   rw-bank.css geben Rundung, Rahmen und Fläche mit — alles hier zurücksetzen. */
.doc-tab, .rw-skin .doc-tab, .rwb-tabs .doc-tab {
  background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; box-shadow: none !important; bottom: 0; margin-bottom: -1px;
  padding: 11px 1px 10px; font-size: 14px; font-weight: 500; color: var(--leise); }
.doc-tab:hover, .rw-skin .doc-tab:hover { color: var(--text); }
.doc-tab.is-active, .rw-skin .doc-tab.is-active, .rw-skin .doc-tab.is-active:hover, .rwb-tabs .doc-tab.is-active {
  color: var(--text) !important; font-weight: 650; border-bottom-color: var(--navy) !important; }
.doc-tab-badge, .rwb-tabs .doc-tab-badge { background: var(--karte-hoch) !important; color: var(--still) !important;
  font-size: 11px; font-weight: 650; border-radius: 99px; padding: 1px 7px; margin-left: 6px; }
.doc-tab.is-active .doc-tab-badge, .rwb-tabs .doc-tab.is-active .doc-tab-badge { background: var(--navy) !important; color: #fff !important; }

/* ── 10. Kopfkarte der Akte ────────────────────────────────────────────── */
.rw .cust-head { padding: 22px 24px 0; }
.rw .cust-av { background: var(--navy); color: var(--lime); border-radius: 10px; font-weight: 700; }
.rw .cust-id .cn { font-size: 27px; font-weight: 650; letter-spacing: -.025em; color: var(--text); }
.rw .cust-id .csub { font-size: 13.5px; color: var(--leise); }

/* ── 11. Status → Portal-Chips ─────────────────────────────────────────── */
.status { border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; }
.status--solid { background: var(--lila-bg); color: var(--lila); }   /* abgeschlossen: Festgeschrieben, Verbucht, Erledigt */
.status--info    { background: var(--blau-bg);  color: var(--blau); }   /* Gebucht, Offen, Versendet */
.status--success { background: var(--gruen-bg); color: var(--gruen); }  /* Bezahlt, Angenommen */
.status--warn    { background: var(--gelb-bg);  color: var(--gelb); }   /* Teilzahlung, gesperrt */
.status--danger  { background: var(--rot-bg);   color: var(--rot); }    /* Storniert, Abgelehnt */
.status--muted   { background: #e7eaee;         color: var(--leise); }  /* Entwurf, Offen (Zahlung) */
.badge { border-radius: 6px; }

/* ── 12. Tabellen: einzeilig, Kopf auf Fläche, Hover Fläche ────────────── */
.data-table thead th, .lv-table thead th, .rw-skin .lv-table thead th, .rw .dtable thead th {
  background: var(--flaeche); color: var(--leise); font-size: 11.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--linie); border-right: 0; }
.data-table tbody td, .rw-skin .lv-table tbody td, .rw .dtable tbody td {
  border-bottom: 1px solid var(--linie); border-right: 0; font-size: 13.5px; }
.data-table tbody tr:nth-child(even), .rw-skin .lv-table tbody tr:nth-child(even) > td { background: transparent; }
.data-table tbody tr:hover, .data-table tbody tr.is-clickable:hover,
.rw-skin .lv-table tbody tr:hover > td, .rw .dtable tbody tr:hover > td { background: var(--flaeche); }
.lv-table thead th.sort-asc .col-sort::after, .lv-table thead th.sort-desc .col-sort::after { color: var(--navy); }
.cell-link { color: var(--text); }

/* ── 13. Dashboard-Kacheln → Portal-Kennzahlen ─────────────────────────── */
.bw-kpi { border-radius: var(--r-gross); border-color: var(--linie); box-shadow: none; }
.bw-kpi-label { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--leise); }
.bw-kpi-value { font-size: 32px; font-weight: 650; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ── 14. Rückmeldung rechts unten: dunkle Pille, Lime-Haken ────────────── */
.toast-stack { right: 22px; bottom: 22px; }
.toast { background: var(--text); color: #fff; border: 0; border-radius: 11px;
  box-shadow: var(--schatten-toast); padding: 12px 14px; }
.toast-msg { color: #fff; font-size: 14px; font-weight: 600; }
.toast--success::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.toast-close { color: var(--rail-leise); }
.toast-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.toast-progress { opacity: .5; }

/* ── 15. Karten-Köpfe (inv-card-Muster) = Portal .karte-kopf ───────────── */
.inv-card > h2, .inv-card > .inv-fin-head, .inv-editor .inv-card > .card-head {
  background: var(--karte); color: var(--text); border-left: 0;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-transform: none;
  padding: 16px 24px; border-bottom: 1px solid var(--linie);
  border-radius: var(--r-gross) var(--r-gross) 0 0; }
.inv-card > h2 small { color: var(--still); font-weight: 450; font-size: 12.5px; }
.inv-card > *:not(h2) { margin-left: 24px; margin-right: 24px; }
.dash-avatar { background: var(--navy); color: var(--lime); font-weight: 700; }
.dash-hello-title { font-size: 29px; font-weight: 650; letter-spacing: -.025em; }
.dash-card-title { font-size: 16px; font-weight: 600; }
/* Aside: Mono-Kicker wie .hub-heute-titel (README 5.4) */
.rw-ed .as-card h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--still); font-weight: 500; }

/* ── 17. Kompakt fürs MacBook 14" (Owner 26.10.: „wenig scrollen") ────────
   Ziel 1512 × 860: Liste ≥ 16 Zeilen, Akte ein Drittel kürzer als vorher. */
.topbar { height: 52px; }
.qc-btn, .lv-search { height: 36px; }
.notif-btn { width: 34px; height: 34px; }
.content { padding: 18px 28px 80px; }
.breadcrumb { margin-bottom: 6px; }
.content:has(.lv) .breadcrumb { padding: 10px 20px 0; }
.page-head h1, .rw-lv2 .rw-pagehead h1, .inv-doc-head h1 { font-size: 23px; letter-spacing: -.02em; }
.page-head .muted { margin-bottom: 12px; }
.rw-lv2 .rw-pagehead { margin-bottom: 10px; }
.rw-listwrap { padding: 10px 20px 16px; }
/* Werkzeugleiste einzeilig */
.rw-skin.rw-lv2 .lv .rw-toolbar, .rw-lv2 .lv .rw-toolbar, .rw-toolbar { padding: 7px 10px; gap: 6px; margin-bottom: 10px; }
.rw-toolbar .btn, .lv-bar .btn, .rw-toolbar select, .rw-toolbar input, .rw-lv2 .rw-fsearch input,
.rw-statusfld, .rw-periodfld { min-height: 32px; height: 32px; font-size: 13px; }
.rw-toolbar .btn, .lv-bar .btn { padding: 0 10px; }
/* Tabellenzeilen ~36 px */
.data-table thead th, .lv-table thead th, .rw-skin .lv-table thead th, .rw .dtable thead th { padding-top: 7px; padding-bottom: 7px; }
.data-table tbody td, .rw-skin .lv-table tbody td, .rw .dtable tbody td { padding-top: 6px; padding-bottom: 6px; }
.lv-table td .btn, .data-table td .btn, .inv-act-more, .rw-rowact { min-height: 0; }
.inv-act-more, .doc-act-more { width: 26px; height: 26px; }
.status { padding: 2px 9px; }
/* Karten + Felder enger */
.card { padding: 16px 20px; }
.inv-card > h2, .inv-card > .inv-fin-head, .inv-editor .inv-card > .card-head { padding: 11px 20px; font-size: 15px; }
.inv-card > *:not(h2) { margin-left: 20px; margin-right: 20px; }
.rw-ed .card { padding: 14px 18px; }
.rw-ed .card > h2, .rw-ed .card .inv-fin-head h2 { font-size: 15px; margin-bottom: 10px; }
.rw-ed .fgrid { gap: 9px 14px; }
.rw-ed .field { gap: 4px; }
.rw .tp.tp--on.stack, .rw .tp.tp--on.stack > form, .rw .cust-body { gap: 12px; }
.form-field { margin-bottom: 10px; }
.form-field label, .rw-ed .field > label, .rw-skin .form-field > label { font-size: 12.5px; margin-bottom: 0; }
.rw-ed .field small.muted, .form-field small { font-size: 11px; margin-top: 1px; }
/* Kopf der Akte */
.rw .cust-head { padding: 14px 20px 0; margin-bottom: 12px; }
.rw .cust-av { width: 40px; height: 40px; font-size: 14px; }
.rw .cust-id .cn { font-size: 22px; letter-spacing: -.02em; }
.rw .cust-head .tabbar { margin-top: 10px; }
.rw .tab { padding: 9px 10px 8px; font-size: 14px; }
/* Dashboard */
.dash-hello-title { font-size: 23px; }
.bw-kpi-value { font-size: 26px; }

/* Einzeilige Felder laufen zweispaltig statt über die ganze Breite (Owner 26.10.).
   Breit bleiben nur Felder, die den Platz brauchen. */
.rw-ed .fgrid > .field.full:not(.check-list):not(:has(textarea, [contenteditable], table, .tagbox, .sw, .rt-btn, input[type="file"], .check-list)) {
  grid-column: auto; }

/* Erklärsätze unter Feldern ausblenden (Owner 26.10.: „keine Info-Sätze").
   Nur direkte Feld-Hinweise; Zähler/Meta im Kartenkopf (.h2right), Prüfvermerke
   (.uidrow) und Fehlermeldungen (.errorlist) bleiben sichtbar. */
.rw-ed .field > .fhelp, .rw-ed .field > small.muted,
.form-field > small.muted, .form-field > .helptext { display: none; }

/* ══ WELLE 2 — Eingaben (Owner-Entwurf 26.10.2026) ══════════════════════════
   Combobox, Kalender, Uhrzeit, Segment, native Auswahl. Nur Optik der
   bestehenden Widgets (rw-combo.js, rw-datepicker.js, rw-timepicker.js,
   Produkt-Combobox im Editor) — Markup und Verhalten bleiben. */

/* Reste aus Welle 1: Buchen-Knopf = Hauptknopf, aktiver Beleg-Reiter lesbar */
.rw .actbar .btn--book, .btn--book { background: var(--navy) !important; border-color: var(--navy) !important;
  color: #fff !important; filter: none !important; }
.rw .actbar .btn--book:hover, .btn--book:hover { background: var(--navy-hell) !important; }
.btn--book svg { color: var(--lime); }
.rw .actdd.open .btn--dd { border-color: var(--navy); color: var(--navy); }
.doc-tab.is-active, .rw-skin .doc-tab.is-active, .rw-skin .doc-tab.is-active:hover {
  color: var(--text) !important; background: none !important; box-shadow: none; }

/* Summe brutto im Beleg-Editor: keine Mint-Fläche (Owner-Regel), Grau + Navy-Kante */
.rw-ed .sumrow.brutto { background: var(--karte-hoch); box-shadow: inset 3px 0 0 var(--navy); }
.rw-ed .sumrow.brutto, .rw-ed .sumrow.brutto * { color: var(--text) !important; }

/* Infoblock einklappen wirkte bis 1600 px nicht: rw-editor.css setzt dort
   `.rw.rw-ed { grid-template-columns: 1fr 296px }` und schlägt damit
   `.rw-ed.aside-collapsed` (gleiche Spezifität, früher). Höher gewichtet: */
.rw.rw-ed.aside-collapsed, .rw .rw-ed.aside-collapsed { grid-template-columns: minmax(0, 1fr) 34px; }
/* Positionszeile glätten (Owner 26.10.: „noch holprig") */
.rw-ed .ptable--pos thead th { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600;
  color: var(--leise); background: var(--flaeche); }
.rw-ed .ptable--pos td input:not([type="checkbox"]):not([type="radio"]):not(.inv-prod-search) {
  padding-left: 8px !important; padding-right: 8px !important; font-size: 14px; }
.rw-ed .ptable--pos td select { padding-left: 10px !important; padding-right: 26px !important; background-position: right 8px center; }
.rw-ed .ptable--pos td.c-amt, .rw-ed .ptable--pos td.col-net { line-height: var(--feld-h); font-weight: 650; }
.rw-ed tr.p-main:hover > td, .rw-ed tr.p-main:focus-within > td { background: var(--flaeche); }
.rw-ed tr.p-main.is-optional > td, .rw-ed tr.p-main.is-optional:hover > td { background: var(--karte-hoch); }
.rw-ed tr.p-main.is-optional > td:first-child { box-shadow: inset 3px 0 0 var(--still); }
.rw-ed .p-desc-tog { color: var(--leise); font-size: 12px; font-weight: 600; }
.rw-ed .p-desc-tog:hover { color: var(--text); }
.rw-ed .pdescwrap .rt-toolbar { border-color: var(--linie-stark); background: var(--flaeche); border-radius: var(--r) var(--r) 0 0; }
.rw-ed .pdescwrap .rt-area { border-color: var(--linie-stark); }
.rw-ed .pdescwrap .rt-area:focus { border-color: var(--navy); box-shadow: var(--ring-navy); }
/* ── Positionen neu (Owner 26.10.: „bau das vernünftig, auch wenn ein komplettes
   Redesign notwendig ist"). Rechnung, Angebot und Einkauf teilen dieselben acht
   Spalten; die Zeile wird per CSS-Raster neu angeordnet — Markup, Feldnamen und
   Skripte (Ziehen, Sortieren, Abo-Zeile) bleiben unverändert:
     Zeile 1  Nr · Artikel · Menge/Einheit · Preis · Rabatt · USt · Betrag · ⋮
     Zeile 2  „Beschreibung"-Schalter (+ Chips)
     Zeile 3  Beschreibung über die volle Breite (Artikel bis Betrag)
   Die Artikelzelle wird dafür „durchsichtig" (display: contents), damit ihre
   Teile eigene Rasterplätze bekommen. Abo-Positionen (andere Spalten) sind
   ausgenommen — dort fehlt th.c-qty. Unter 900 px bleibt die Tabelle. */
@media (min-width: 900px) {
  .rw-ed table.ptable--pos:has(th.c-qty) { display: block; table-layout: auto; width: 100%; min-width: 0;
    --pos-cols: 30px minmax(180px, 1fr) 150px 100px 70px 86px 98px 26px; }
  .rw-ed table.ptable--pos:has(th.c-qty) > thead,
  .rw-ed table.ptable--pos:has(th.c-qty) > tbody,
  .rw-ed table.ptable--pos:has(th.c-qty) > tfoot { display: block; }
  .rw-ed table.ptable--pos:has(th.c-qty) > thead > tr,
  .rw-ed table.ptable--pos:has(th.c-qty) > tbody > tr {
    display: grid; grid-template-columns: var(--pos-cols); column-gap: 6px; row-gap: 6px;
    align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
  .rw-ed table.ptable--pos:has(th.c-qty) > tbody > tr[hidden] { display: none !important; }
  .rw-ed table.ptable--pos:has(th.c-qty) > tbody > tr:last-child { border-bottom: 0; }
  .rw-ed table.ptable--pos:has(th.c-qty) > tfoot > tr { display: block; border-top: 1px solid var(--linie); }
  .rw-ed table.ptable--pos:has(th.c-qty) > tfoot > tr > td { display: block; }
  .rw-ed table.ptable--pos:has(th.c-qty) th,
  .rw-ed table.ptable--pos:has(th.c-qty) td {
    width: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; background: none !important; }
  /* Kopf */
  .rw-ed table.ptable--pos:has(th.c-qty) > thead > tr { background: var(--flaeche); padding-top: 8px; padding-bottom: 8px; }
  .rw-ed table.ptable--pos:has(th.c-qty) > thead th { font-size: 11.5px; line-height: 1.3; white-space: nowrap; }
  .rw-ed table.ptable--pos:has(th.c-qty) > thead th.num { text-align: right; }
  .rw-ed table.ptable--pos:has(th.c-qty) > thead th:first-child { text-align: center; }
  /* Positionszeile */
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:has(> .p-artline) { display: contents; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main .p-artline { grid-column: 2; grid-row: 1; max-width: none; min-width: 0; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main .p-metaline { grid-column: 2 / 8; grid-row: 2; max-width: none; margin: 0; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main .pdescwrap { grid-column: 2 / 8; grid-row: 3; max-width: none; margin: 0; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main .alert-inline { grid-column: 2 / 8; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(4) { grid-column: 4; grid-row: 1; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(5) { grid-column: 5; grid-row: 1; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(6) { grid-column: 6; grid-row: 1; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(7) { grid-column: 7; grid-row: 1;
    text-align: right; line-height: var(--feld-h); white-space: nowrap; font-weight: 650; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(8) { grid-column: 8; grid-row: 1 / span 3; }
  /* Einkauf: Betrag ist dort ein Eingabefeld, der berechnete Netto-Wert steht klein darunter */
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(7):has(input:not([type="hidden"])) { line-height: normal; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main > td:nth-of-type(7) .line-net { font-size: 11.5px; color: var(--still); font-weight: 500; margin-top: 3px; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main td input:not([type="checkbox"]):not([type="radio"]),
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main td select { width: 100% !important; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-qtyunit { display: flex !important; gap: 6px; justify-content: stretch; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-qtyunit > * { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-qtyunit > .p-qty-in, .rw-ed table.ptable--pos:has(th.c-qty) .p-qtyunit > input:first-child { flex: 0 0 62px !important; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-qtyunit input { width: 100% !important; }
  /* Positionsnummer: mittig zur Feldzeile, Griff erscheint beim Überfahren */
  .rw-ed table.ptable--pos:has(th.c-qty) td.pnr { height: var(--feld-h); display: flex; align-items: center; justify-content: center; }
  .rw-ed table.ptable--pos:has(th.c-qty) .pnrbox { position: relative; justify-content: center; }
  .rw-ed table.ptable--pos:has(th.c-qty) .pnrv { min-width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
    background: var(--karte-hoch); color: var(--leise); font-size: 12px; font-weight: 650; text-align: center; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-grip { position: absolute; left: -15px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .12s; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr:hover .p-grip, .rw-ed table.ptable--pos:has(th.c-qty) .p-grip:focus-visible { opacity: 1; }
  /* Aktionen: hoch · runter · löschen untereinander, ruhig */
  .rw-ed table.ptable--pos:has(th.c-qty) .p-acts { gap: 0; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-acts button { width: 26px; height: 22px; color: var(--still); border-radius: 6px; }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-acts button:hover { background: var(--karte-hoch); color: var(--text); }
  .rw-ed table.ptable--pos:has(th.c-qty) .p-acts .p-del:hover { background: var(--rot-bg); color: var(--rot); }
  /* Zeilenzustände: auf der ganzen Zeile statt je Zelle */
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main:hover,
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main:focus-within { background: var(--flaeche); }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.p-main.is-optional { background: var(--karte-hoch); box-shadow: inset 3px 0 0 var(--still); }
  /* Abschnitt (Zwischenüberschrift) */
  .rw-ed table.ptable--pos:has(th.c-qty) tr.inv-line-section > td:nth-of-type(1) { grid-column: 1; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.inv-line-section > td.inv-section-cell { grid-column: 2 / 8; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.inv-line-section > td:last-child { grid-column: 8; }
  .rw-ed table.ptable--pos:has(th.c-qty) tr.inv-line-section { background: var(--flaeche); }
  /* Abo-Zusatzzeile und sonstige Vollbreiten-Zeilen */
  .rw-ed table.ptable--pos:has(th.c-qty) > tbody > tr:not(.p-main):not(.inv-line-section) > td { grid-column: 1 / -1; }
}
/* Beschreibung: von Anfang an drei Zeilen hoch, wächst mit */
.rw-ed .pdescwrap .rt-area { min-height: 66px; }

/* Fokus überall Navy (statt Blau) */
.rw-field:focus, .rw-combo-box:focus-within, .rw-datefield input:focus, .rw-search input:focus,
.prod-combo-control:focus-within, .rw-skin .prod-combo-control:focus-within {
  border-color: var(--navy) !important; box-shadow: var(--ring-navy) !important; outline: 0; }

/* Combobox (Portal .aw): Wert + Pfeil, Suche steckt im Aufklapper */
.rw-combo-box { gap: 9px; }
.rw-combo-box .rw-cb-ic { display: none; }
.rw-combo-box .rw-cb-val { font-size: 14px; font-weight: 500; color: var(--text); }
.rw-combo-box .rw-cb-val.is-placeholder { color: var(--still); font-weight: 400; }
.rw-combo-box .rw-cb-caret { color: var(--still); }
.rw-combo-box:hover { border-color: var(--rahmen-hover); }
.rw-combo.is-open .rw-combo-box { border-color: var(--navy); box-shadow: var(--ring-navy); }
.rw-combo-pop, .rw-ed .prod-combo-menu, .rw-tp, .rw-cal {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross);
  box-shadow: var(--schatten-liste); }
.rw-combo-pop { padding: 6px; }
.rw-combo-pop .rw-cp-search { margin: 0 0 6px; padding: 0 11px; height: 36px; border: 1px solid var(--linie-stark);
  border-radius: var(--r); background: var(--flaeche); top: 0; }
.rw-combo-pop .rw-cp-search:focus-within { border-color: var(--navy); background: var(--karte); }
.rw-combo-pop .rw-cp-search input { font-size: 14px; color: var(--text); }
.rw-combo-pop .rw-cp-search svg { color: var(--still); }
.rw-combo-opt { position: relative; padding: 8px 30px 8px 11px; border-radius: 8px; }
.rw-combo-opt .rw-co-nm { font-size: 14px; font-weight: 500; color: var(--text); }
.rw-combo-opt .rw-co-ctx { font-size: 12px; color: var(--still); }
.rw-combo-opt:hover, .rw-combo-opt.is-active { background: var(--karte-hoch); }
.rw-combo-opt.is-on { background: var(--karte-hoch); }
.rw-combo-opt.is-on .rw-co-nm { color: var(--navy); font-weight: 650; }
.rw-combo-opt.is-on::after { content: "✓"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--navy); font-weight: 700; font-size: 14px; }
.rw-combo-empty { padding: 14px 11px; text-align: center; color: var(--still); font-size: 13.5px; }
.rw-combo-new { color: var(--navy); border-top: 1px solid var(--linie); border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.rw-combo-new:hover, .rw-combo-new.is-active { background: var(--karte-hoch); }
.rw-combo-new svg { color: var(--navy); }

/* Produkt-Combobox: kein Trennstrich vor dem Pfeil (Portal-Auswahl hat keinen) */
.prod-combo-arrow { border-left: 0 !important; background: transparent !important; }

/* Produkt-Combobox im Beleg-Editor: gleiche Liste */
.rw-skin .prod-combo-control, .rw-ed .prod-combo-control { border-color: var(--linie-stark); border-radius: var(--r); }
.rw-ed .prod-combo-item { border-radius: 8px; }
.rw-ed .prod-combo-item:hover, .rw-ed .prod-combo-item.is-active { background: var(--karte-hoch); }
.rw-ed .prod-combo-item .prod-combo-name { font-size: 14px; font-weight: 550; color: var(--text); }
.rw-ed .prod-combo-item .prod-combo-art, .rw-ed .prod-combo-item .pci-l2 { color: var(--still); font-size: 12px; }
.rw-ed .prod-combo-item.is-on { background: var(--karte-hoch); }
.rw-ed .prod-combo-item.is-on .prod-combo-name { color: var(--navy); }

/* Kalender (Portal .dw / Kennzahlen-Kalender): Woche ab Montag, heute = Lime-Strich */
.rw-cal { width: 272px; padding: 12px; }
.rw-cal-h { margin-bottom: 8px; }
.rw-cal-h .rw-cal-t { font-size: 13.5px; font-weight: 650; color: var(--text); }
.rw-cal-h button { width: 30px; height: 30px; border: 0; background: none; border-radius: 7px; color: var(--leise); font-size: 15px; }
.rw-cal-h button:hover { background: var(--karte-hoch); color: var(--text); }
.rw-cal-w span { font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--still); }
.rw-cal-d { height: 32px; border-radius: 8px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.rw-cal-d:hover { background: var(--karte-hoch); }
.rw-cal-d--out { color: var(--linie-stark); }
.rw-cal-d--today { box-shadow: inset 0 -2px 0 var(--lime); color: var(--text); font-weight: 700; }
.rw-cal-d--on, .rw-cal-d--on:hover { background: var(--navy); color: #fff; font-weight: 650; box-shadow: none; }
.rw-cal-d:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.rw-cal-f { gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
.rw-cal-f button { border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche);
  font-size: 12px; font-weight: 550; color: var(--leise); padding: 7px 8px; }
.rw-cal-f button:hover { border-color: var(--navy); color: var(--text); background: var(--karte); }
.rw-datefield .rw-df-ic, .rw-timefield .rw-tf-ic { color: var(--still); }

/* Uhrzeit-Liste (Viertelstunden) */
.rw-tp { padding: 6px; }
.rw-tp-o { border-radius: 8px; font-size: 14px; padding: 7px 10px; color: var(--text); font-variant-numeric: tabular-nums; }
.rw-tp-o:hover { background: var(--karte-hoch); }
.rw-tp-o.is-on, .rw-tp-o.is-on:hover { background: var(--navy); color: #fff; font-weight: 650; }

/* Segment-Schalter (Portal .sp-seg): graue Spur, gewählt weiß */
.rw-seg, .rw-ed .seg--fld, .rw-ed .seg--chip { background: var(--karte-hoch); border: 0; border-radius: var(--r); padding: 3px; gap: 2px; }
.rw-seg button, .rw-ed .seg--fld button, .rw-ed .seg--chip button {
  color: var(--leise); font-weight: 550; border-radius: 6px; background: transparent; }
.rw-seg button:hover, .rw-ed .seg--fld button:hover, .rw-ed .seg--chip button:hover { color: var(--text); background: rgba(255,255,255,.6); }
.rw-seg button.is-on, .rw-ed .seg--fld button.on, .rw-ed .seg--chip button.on {
  background: var(--karte); color: var(--text); font-weight: 650;
  box-shadow: 0 1px 2px rgba(21,29,40,.12), 0 0 0 1px rgba(21,29,40,.04); }
.rw-seg button:focus-visible { outline-color: var(--navy); }

/* Native Auswahl (wo noch kein Overlay greift): gleicher Rahmen + eigener Pfeil */
select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2378828f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px;
  padding-right: 32px !important; }

/* ══ WELLE 3 — Seitentypen (Owner-Entwurf 26.10.2026) ═══════════════════════
   Dashboard nach Hub-Muster, Einstellungen, Beleg-Editoren. Nur Optik. */

/* Dashboard: Begrüßung als Seitenkopf (keine Karte), Kennzahlen als EINE Leiste */
.dash-hello { background: none; border: 0; border-radius: 0; padding: 4px 2px 2px; }
.dash-hello-title { font-size: 26px; }
.bw-kpis { gap: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; }
.bw-kpis > .bw-kpi { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 16px 22px; }
.bw-kpis > .bw-kpi + .bw-kpi { border-left: 1px solid var(--linie); }
a.bw-kpi:hover { background: var(--flaeche); transform: none; }
.bw-kpi-delta { font-size: 12.5px; color: var(--still); }

/* Einstellungen: Unternavigation ruhig, aktiver Punkt Navy mit Kante */
.settings-nav { border-color: var(--linie); border-radius: var(--r-gross); padding: 8px; }
.settings-nav-heading { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; color: var(--still); }
.settings-nav-home, .settings-nav-item { font-size: 13.5px; font-weight: 500; border-radius: 8px; }
.settings-nav-item { color: var(--leise); }
.settings-nav-home:hover, .settings-nav-item:hover { color: var(--text); background: var(--karte-hoch); }
.settings-nav-item.is-active, .settings-nav-item.is-active:hover {
  color: var(--navy); background: var(--karte-hoch); font-weight: 650; box-shadow: inset 3px 0 0 var(--navy); }
.settings-nav-icon { color: var(--still); }
.settings-nav-item.is-active .settings-nav-icon { color: var(--navy); }
/* Bereichsseite: Kacheln mit Symbol-Kachel (Portal .pk-zeichen) */
.settings-tile { border-color: var(--linie); border-radius: var(--r-gross); padding: 14px 16px; }
.settings-tile:hover { border-color: var(--rahmen-hover); background: var(--flaeche); }
.settings-tile-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--karte-hoch); color: var(--leise); }
.settings-tile:hover .settings-tile-icon { background: var(--navy); color: var(--lime); }
.settings-tile-title { font-size: 14.5px; font-weight: 600; }
.settings-tile-desc { font-size: 12.5px; color: var(--still); }
/* Einstellungsseiten: Titel ohne eigene Karte */
main.content:has(> .settings-nav) .doc-head { background: none; border: 0; box-shadow: none; padding: 0 0 6px; }
main.content:has(> .settings-nav) .doc-head h1 { font-size: 23px; }
/* Reine Erklär-Kacheln im Infoblock (nur Titel + Hinweissatz) entfallen
   (Owner: keine Info-Sätze); bleibt der Infoblock leer, nutzt das Formular die
   volle Breite. Kacheln mit Werten, Knöpfen oder Vorschau bleiben stehen. */
.rw-ed .aside > .as-card:has(> h3 + .fhint:last-child) { display: none; }
/* (:has darf nicht verschachtelt werden — darum zwei getrennte Bedingungen:
   der Infoblock hat nur Kacheln, und keine Kachel hat mehr als Titel + Hinweis.) */
.rw-ed.inv-editor:has(> .aside > .as-card):not(:has(> .aside > :not(.as-card))):not(:has(> .aside > .as-card > :not(h3, .fhint))) {
  grid-template-columns: minmax(0, 1fr) !important; }
.rw-ed.inv-editor:has(> .aside > .as-card):not(:has(> .aside > :not(.as-card))):not(:has(> .aside > .as-card > :not(h3, .fhint))) > .aside { display: none; }
.rw-ed .field > small.fhint, .rw-ed .field > .fhint, .form-field > small.fhint { display: none; }

/* Einstellungsseiten ohne Infoblock: Karten zweispaltig (weniger Scrollen auf
   dem 14"-MacBook). Reihenfolge läuft spaltenweise; Karten brechen nicht um. */
@media (min-width: 1280px) {
  main.content:has(> .settings-nav) .rw-ed.inv-editor:has(> .aside > .as-card):not(:has(> .aside > :not(.as-card))):not(:has(> .aside > .as-card > :not(h3, .fhint))) > .inv-main,
  main.content:has(> .settings-nav) .rw-ed.inv-editor:not(:has(> .aside)) > .inv-main {
    display: block; columns: 2; column-gap: 14px; }
  /* Ein umschließendes <form> darf die Karten nicht zu einem Block bündeln
     (display: contents ändert nur die Box, das Formular sendet unverändert). */
  main.content:has(> .settings-nav) .rw-ed.inv-editor > .inv-main > form { display: contents; }
  main.content:has(> .settings-nav) .rw-ed.inv-editor > .inv-main > *,
  main.content:has(> .settings-nav) .rw-ed.inv-editor > .inv-main > form > * { break-inside: avoid; margin-bottom: 14px; }
  /* Karten mit Tabellen brauchen die volle Breite */
  main.content:has(> .settings-nav) .rw-ed.inv-editor > .inv-main > *:has(table) { column-span: all; }
}

/* Beleg-Editoren */
/* Einkauf zeigt seine Brotkrume im Kopf — die allgemeine darüber wäre doppelt */
main.content:has(> .inv-editor-wrap > .crumb) > .breadcrumb { display: none; }
.inv-editor-wrap > .crumb { font-size: 12.5px; color: var(--still); margin-bottom: 6px; }
/* Belegart-Umschalter (Rechnung/Beleg) wie alle Segmente; Erklärsatz entfällt */
.doc-editor-page .kindbar .seg--fld, .rw .kindbar .seg--fld { background: var(--karte-hoch); border: 0; padding: 3px; border-radius: var(--r); }
.doc-editor-page .kindbar .seg--fld button, .rw .kindbar .seg--fld button { color: var(--leise); font-weight: 550; border-radius: 6px; box-shadow: none; border: 0; }
.doc-editor-page .kindbar .seg--fld button.on, .rw .kindbar .seg--fld button.on {
  background: var(--karte) !important; color: var(--text) !important; font-weight: 650;
  box-shadow: 0 1px 2px rgba(21,29,40,.12), 0 0 0 1px rgba(21,29,40,.04) !important; outline: 0; }
.kindbar .kb-hint { display: none; }
.kindbar .kb-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--still); font-weight: 500; }
/* Einkauf-Positionen: Einheit „Pauschale" passt */
@media (min-width: 900px) {
  .rw-ed table.ptable--pos:has(th.c-qty) .p-qtyunit > input:first-child { flex: 0 0 54px !important; }
}
/* Kennzahl-Kacheln im Infoblock (Akte/Editor): neutral, Farbe nur im Wert */
.rw .as-kpi .ak { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; }
.rw .as-kpi .ak::before { display: none; }
.rw .as-kpi .ak-l { font-size: 10.5px; color: var(--still); font-weight: 600; }
.rw .as-kpi .ak-v { font-weight: 700; }

/* ══ WELLE 4 — Bank, Anmeldung, Restbausteine (Owner-Entwurf 26.10.2026) ═══ */

/* Bank-Abgleich: offene Zeile mit Navy-Kante, Vorschlag ohne Mint-Fläche,
   Links in Navy (Grün/Gelb/Rot nur noch für Beträge und Status) */
.rwb-row.is-open > .rwb-item, .rwb-row.is-open > .rwb-item:hover {
  background: var(--flaeche); box-shadow: inset 3px 0 0 0 var(--navy); }
.rwb-row.is-open .rwb-item-caret { color: var(--navy); }
.rwb-proposed { background: var(--karte-hoch) !important; border-color: var(--linie) !important; color: var(--text); }
.rwb-link { color: var(--navy); font-weight: 600; }
.rwb-link:hover { color: var(--navy-hell); }
/* Konto-Umsätze: Beträge und Salden nie umbrechen, Kopf wie überall */
table td.num, table th.num { white-space: nowrap; }
.rw .dtable thead th, table.table thead th { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--leise); background: var(--flaeche); }
table.table tbody tr:hover > td { background: var(--flaeche); }

/* Datei wählen (natives Feld): Knopf im Portal-Look statt Browser-Standard */
input[type="file"] { font: inherit; font-size: 13.5px; color: var(--leise); }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--text); background: var(--karte);
  border: 1px solid var(--linie-stark); border-radius: var(--r); padding: 0 14px; height: var(--feld-h);
  margin-right: 12px; cursor: pointer; transition: background .12s, border-color .12s; }
input[type="file"]::file-selector-button:hover { background: var(--flaeche); border-color: var(--rahmen-hover); }

/* Anmeldung (Portal 5.7): heller Grund, Kasten 400 px mit Lime-Kante oben,
   Hauptknopf Tinte → beim Überfahren Lime mit dunkler Schrift */
.login-page { background: var(--grund); }
.login-card { width: 400px; max-width: calc(100vw - 32px); padding: 34px; border: 1px solid var(--linie);
  border-top: 4px solid var(--lime); border-radius: var(--r-gross); box-shadow: var(--schatten-hoch); }
.login-brand img { width: 168px !important; }
.login-sub { font-size: 14px; color: var(--leise); margin: 10px 0 22px; }
.login-card label { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--leise); margin: 14px 0 6px; }
.login-card input:not([type="checkbox"]) { height: 44px; border: 1px solid var(--linie-stark); border-radius: var(--r); padding: 0 14px; font-size: 15px; }
.login-card input:not([type="checkbox"]):focus { outline: 0; border-color: var(--text); box-shadow: var(--ring-lime, 0 0 0 3px rgba(216,242,10,.45)); }
.login-card input[type="checkbox"] { accent-color: var(--navy); width: 16px; height: 16px; }
.login-card label:has(> input[type="checkbox"]) { font-size: 13.5px; color: var(--leise); letter-spacing: 0; white-space: nowrap; }
.login-card a { color: var(--leise); font-size: 13.5px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.login-card a:hover { color: var(--text); text-decoration: underline; }
.btn-primary { background: #111 !important; color: #fff !important; height: 46px; border-radius: var(--r) !important;
  font-weight: 650; transition: background .12s, color .12s; }
.btn-primary:hover { background: var(--lime) !important; color: #111 !important; }
.login-card .errorlist, .login-card .alert, .login-card .login-error {
  background: var(--rot-bg); color: var(--rot); border-radius: 6px; padding: 8px 11px; font-size: 13.5px; font-weight: 600; }

/* Betreiber-Konsole (/betrieb/): bleibt erkennbar eigener Bereich (dunkle
   Kopfleiste wie die App-Leiste, Lime-Etikett „Betrieb"), Inhalt hell wie die App,
   volle Breite. Titel auf hellem Grund lesbar (war hellgrau auf Weiß). */
.op-shell { background: var(--grund) !important; }
.op-shell .op-top { background: var(--rail-grund) !important; border-bottom: 0 !important; padding: 12px 28px !important; }
.op-shell .op-top .op-brand { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.op-shell .op-top .op-tag { background: var(--lime) !important; color: #111 !important; font-weight: 700; border-radius: 5px !important; }
.op-shell .op-top a.op-link, .op-shell .op-top .op-link { color: var(--rail-leise) !important; font-size: 14px; }
.op-shell .op-top a.op-link:hover { color: var(--lime) !important; text-decoration: none !important; }
.op-shell .op-main { max-width: none !important; padding: 22px 28px 60px !important; }
.op-shell .op-card { border: 1px solid var(--linie); border-radius: var(--r-gross) !important; box-shadow: none !important; }
.op-shell h1[style*="color"] { color: var(--text) !important; }

/* ── 16. Telefon (< 900 px) — am Ende, damit es die Regeln oben schlägt ── */
@media (max-width: 899.98px) {
  .content { padding: 16px 14px 96px; }
  .topbar { padding: 0 14px; }
  .bw-kpi-value { font-size: 24px; }
  .page-head h1, .rw-lv2 .rw-pagehead h1, .inv-doc-head h1, .dash-hello-title { font-size: 24px; }
  .rw .cust-id .cn { font-size: 22px; }
}