/* ============================================================
   Rech-flow – Stylesheet (v2.38, modernisiert)
   Token-System: ruhige, kühle Neutraltöne, dezente Schatten statt
   harter Rahmen, zurückhaltende Formen statt Pillen-Buttons.
   Jede Mandanten-Akzentfarbe (--accent/--accent-soft) bleibt über
   applyAppColor() zur Laufzeit überschreibbar - Mechanik unverändert.
   ============================================================ */

:root{
  --bg:#f4f5f7;
  --surface:#fff;
  --surface2:#f6f7f9;
  --text:#181b20;
  --muted:#6b7280;
  --border:rgba(15,23,42,.09);
  --border-strong:rgba(15,23,42,.14);
  --accent:#0c7c80;
  --accent-soft:#e7f1f1;
  --accent-border:#b7d6d7;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 14px rgba(16,24,40,.07);
  --shadow-lg:0 16px 40px rgba(16,24,40,.12);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.5}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;color:var(--text)}

/* ---------- Layout ---------- */
.app-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:22px 16px;display:flex;flex-direction:column;gap:20px;
  /* Seitenleiste bleibt beim Scrollen stehen und ist immer genau bildschirmhoch: "Passwort ändern"/"Abmelden"
     sind dadurch immer unten sichtbar, egal wie lang die Seite rechts ist (v2.83.01). Reicht die Höhe nicht für
     alle Menüpunkte, scrollt nur die Menüliste selbst (siehe .menu), nicht die ganze Leiste. */
  position:sticky;top:0;height:100vh;height:100dvh;align-self:start;box-sizing:border-box}

.brand{display:flex;gap:12px;align-items:center;padding:0 8px}
.brand-mark{width:38px;height:38px;border-radius:11px;object-fit:cover;flex-shrink:0;box-shadow:var(--shadow-sm)}
.brand strong{font-size:15px;letter-spacing:-.01em}
.brand p{margin:2px 0 0;color:var(--muted);font-size:11.5px}
.menu{display:grid;gap:8px;align-content:start;flex:1 1 auto;min-height:0;overflow-y:auto;
  margin:-3px;padding:3px}  /* Innenabstand, damit Rahmen/Schatten der Buttons am Scrollrand nicht abgeschnitten werden */
.menu-btn{padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  text-align:left;font:inherit;font-size:13.6px;font-weight:500;color:#3a3f47;cursor:pointer;transition:background .12s,color .12s,border-color .12s,box-shadow .12s}
.menu-btn:hover{background:var(--surface2);border-color:var(--border-strong)}
.menu-btn.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent);font-weight:600}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.current-username{margin:5px 12px 0;font-size:11.5px;color:var(--muted)}
.sidebar-footer{padding:14px 8px 0;font-size:10.5px;color:var(--muted);border-top:1px solid var(--border)}
.content{padding:28px 32px}
.view{display:none}
.view.active{display:block}

/* Einstellungen/Systemverwaltung: Untermenü als flache Reiterleiste statt Pillen */
.submenu{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 26px;padding-bottom:0;border-bottom:1px solid var(--border)}
.submenu-sub{display:flex !important;flex-wrap:wrap;gap:2px;margin:14px 0 24px;padding:8px 14px;background:var(--surface2);border-radius:var(--radius-sm);border-bottom:none}
.submenu-sub[hidden]{display:none !important}
.submenu-sub .submenu-btn{font-size:.9em;padding:5px 4px;margin-right:16px}
.submenu-sub .submenu-btn.active{border-bottom-color:var(--accent)}
.submenu-btn{padding:10px 4px;margin-right:18px;border:none;border-bottom:2px solid transparent;border-radius:0;
  background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .12s,border-color .12s}
.submenu-btn:hover{color:var(--text)}
.submenu-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.subview{display:none}

/* Zweite Ebene innerhalb eines Untermenüs (z. B. Design -> Logo & Design / Kopf-/Fußzeile) -
   dezenter/kleiner als die Haupt-Reiter, damit die Hierarchie erkennbar bleibt. */
.datatab-btn{padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.datatab-btn:hover{border-color:var(--border-strong)}
.datatab-btn.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent);font-weight:600}
.datatab-panel{display:none}
.datatab-panel.active{display:block}
.subview.active{display:block}
.card{width:min(1700px,96%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 30px;box-shadow:var(--shadow-md)}

/* ---------- Text ---------- */
.eyebrow{letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-size:11.5px;font-weight:600}
.muted{color:var(--muted)}
.section-title{margin-top:30px;margin-bottom:10px;font-size:1.05rem;font-weight:700;letter-spacing:-.005em}

/* ---------- Import-Schritte ---------- */
.steps{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.steps button,.steps select{padding:11px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface);font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .12s,background .12s}
.steps button:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface2)}
.steps button:disabled,.steps select:disabled{opacity:.45;cursor:default}
.status{margin:12px 0;color:var(--accent);min-height:1.4em;font-size:13.5px}

/* ---------- Buttons ---------- */
.btn{padding:10.5px 17px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);
  font:inherit;font-size:13.6px;font-weight:500;cursor:pointer;text-decoration:none;color:var(--text);
  display:inline-block;transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
.btn[hidden]{display:none !important}
.btn:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;box-shadow:var(--shadow-sm)}
.btn-primary:hover{filter:brightness(1.07);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--surface)}
.top-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:flex-end}
.top-actions[hidden]{display:none}
.sidebar-btn{margin:0 16px;width:calc(100% - 32px)}
.pw-checklist{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 14px}
.pw-checklist li{color:var(--muted)}
.pw-checklist li.ok{color:var(--accent);font-weight:600}
.article-toolbar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px}
.article-toolbar>div{flex:1 1 260px;min-width:220px}
.article-toolbar input[type="text"]{width:100%;height:100%;padding:9px 11px;border:1px solid var(--border);
  border-radius:8px;font:inherit;background:var(--surface)}
.article-toolbar input[type="text"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.article-toolbar .btn{flex:0 0 auto;white-space:nowrap}
.changelog-entry{padding:12px 0;border-bottom:1px solid var(--border)}
.changelog-entry:last-child{border-bottom:none}
.changelog-version{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:12px;
  padding:3px 10px;border-radius:999px;margin-bottom:6px}
.changelog-entry ul{margin:6px 0 0 18px;padding:0}
.changelog-entry li{margin-bottom:4px}

/* ---------- Formularfelder ---------- */
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.field-card{padding:13px 15px;background:var(--surface2);border:1px solid transparent;border-radius:var(--radius-sm);
  display:flex;flex-direction:column;gap:6px;transition:border-color .12s}
.field-card:focus-within{border-color:var(--accent-border)}
.field-card[hidden]{display:none}
.field-card label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.005em}
.field-card input,select{padding:9px 11px;border:1px solid var(--border);border-radius:8px;font:inherit;
  background:var(--surface);color:var(--text);transition:border-color .12s,box-shadow .12s}
.field-card input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- Rechnungspositionen ---------- */
.line-item{display:grid;grid-template-columns:82px minmax(260px,2.4fr) 90px 90px 110px 110px 36px;gap:8px;align-items:center;padding:9px 8px;border-radius:8px}
.line-item.with-tax{grid-template-columns:70px minmax(220px,2.4fr) 80px 80px 100px 66px 100px 62px}
#lineItems .line-item:nth-child(odd),#recLineItems .line-item:nth-child(odd){background:var(--surface2)}
#lineItems .line-item:hover,#recLineItems .line-item:hover{background:var(--accent-soft)}
.line-item input{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;min-width:0;background:var(--surface)}
.line-item input[readonly]{background:var(--surface2);color:var(--muted)}
/* Allgemeine Sperr-Optik fuer schreibgeschuetzte Felder ausserhalb von
   .line-item - z. B. die aus ZUGFeRD uebernommenen Eingangsrechnungs-
   Angaben (Kopf- und Positionsfelder), die nicht mehr veraendert werden
   duerfen. */
.field-card input[readonly], .data-table input[readonly]{background:var(--surface2);color:var(--muted);cursor:not-allowed}
.line-item-head{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--border)}
/* Kopfzeile der Positionsliste im Rechnungs-/Angebotsassistenten bleibt beim
   Scrollen oben stehen. Sie steckt mit der Liste in #lineItemsWrap - dessen Ende
   begrenzt, wie weit sie mitläuft (nicht über Summen und Schaltflächen hinaus).
   Deckender Hintergrund, sonst scheinen die darunter durchlaufenden Zeilen durch. */
#lineItemsHeader{position:sticky;top:0;z-index:20;background:var(--surface);box-shadow:0 1px 0 var(--border)}
/* "+ Position hinzufügen" steht in der Liste, direkt über dem Summenblock */
#lineItems #addLine{margin:12px 0 14px 8px}
.btn-remove{border:none;background:transparent;color:var(--muted);font-size:17px;cursor:pointer;padding:0 6px;border-radius:6px;transition:color .12s,background .12s}
.btn-remove:hover{color:#c0392b;background:rgba(192,57,43,.08)}
.li-item-actions{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.li-type-toggle{border:none;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;padding:0 4px;border-radius:6px;transition:color .12s,background .12s}
.li-type-toggle:hover{color:var(--accent);background:rgba(31,122,108,.08)}
.invoice-sum-row{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-weight:700;display:flex;justify-content:space-between}
.sum-value{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Tabellen ---------- */
.data-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.6px}
.data-table th,.data-table td{border-bottom:1px solid var(--border);padding:11px 10px;text-align:left}
.data-table th{color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase}
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable:hover{color:var(--text)}
.sort-arrow{display:inline-block;width:10px}
.data-table tbody tr{transition:background .1s}
.data-table tbody tr:hover{background:var(--surface2)}

/* ---------- Responsiv ---------- */
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}
@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr;display:block}
  .mobile-topbar{display:flex;align-items:center;gap:14px;padding:12px 16px;
    background:var(--surface);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:120}
  .mobile-topbar-title{font-weight:700;font-size:15px}
  .sidebar-toggle-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:38px;height:38px;padding:0;border:1px solid var(--border);border-radius:10px;
    background:var(--surface);cursor:pointer;flex-shrink:0}
  .sidebar-toggle-btn span{display:block;width:18px;height:2px;margin:0 auto;background:var(--text);border-radius:2px}
  .sidebar{border-right:0;border-bottom:1px solid var(--border);
    position:fixed;top:0;left:0;height:100vh;width:min(82vw,320px);z-index:150;
    transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;
    box-shadow:var(--shadow-md)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:140}
  .sidebar-backdrop:not([hidden]){display:block}
  .field-grid,.line-item{grid-template-columns:1fr}
  .line-item-head{display:none}
  .content{padding:18px}
}
@media (prefers-reduced-motion: reduce){
  .sidebar{transition:none}
}

/* ---------- Vorgangs-Verlauf (Beleg-Kette) ---------- */
.chain-row > .chain-cell{background:var(--surface2);padding:14px 16px}
.chain-wrap{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.chain-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 14px;min-width:150px;flex:0 1 auto}
.chain-step.is-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.chain-kind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.chain-num{font-size:15px;font-weight:700;margin-top:2px}
.chain-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.chain-arrow{display:flex;align-items:center;color:var(--muted);font-size:18px}
.chain-jump{margin-top:6px;font-size:11.5px;padding:0;background:none;border:none;
  color:var(--accent);cursor:pointer;text-decoration:underline}
@media (max-width:900px){
  .chain-wrap{flex-direction:column}
  .chain-arrow{transform:rotate(90deg);justify-content:center;padding:2px 0}
}

/* ---------- Aufklappbare Einstellungs-Abschnitte ---------- */
.settings-section{border-top:1px solid var(--border);margin-top:18px;padding-top:4px}
.settings-section > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:6px 0;user-select:none}
.settings-section > summary::-webkit-details-marker{display:none}
.settings-section > summary::before{content:'▸';color:var(--muted);font-size:13px;
  transition:transform .15s ease;display:inline-block;flex-shrink:0}
.settings-section[open] > summary::before{transform:rotate(90deg)}
.settings-section > summary .section-title{margin:0;display:inline}
.settings-section > summary:hover .section-title{color:var(--accent)}
.settings-section > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  .settings-section > summary::before{transition:none}
}

/* ---------- Dashboard-Hierarchie ---------- */
.dash-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.dash-hero-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.dash-hero-card label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.dash-kpi-lg{font-size:30px;line-height:1.15}
.dash-hero-sub{margin-top:6px;font-size:12px;color:var(--muted)}
/* Statusfarben: nur wenn tatsächlich Handlungsbedarf besteht, sonst neutral -
   so sticht Rot wirklich heraus statt Dauerzustand zu sein. */
.dash-hero-card.is-warn{background:#fdf6e3;border-color:#e8d9a8}
.dash-hero-card.is-warn .dash-kpi-lg,.dash-hero-card.is-warn .dash-hero-sub{color:#8a6d1e}
.dash-hero-card.is-alert{background:#fdeff0;border-color:#eec2c6}
.dash-hero-card.is-alert .dash-kpi-lg,.dash-hero-card.is-alert .dash-hero-sub{color:#b3262f}
.field-card.is-warn{background:#fdf6e3;border-color:#e8d9a8}
.field-card.is-warn .dash-kpi{color:#8a6d1e}
.field-card.is-alert{background:#fdeff0;border-color:#eec2c6}
.field-card.is-alert .dash-kpi{color:#b3262f}
.dash-group-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin:22px 0 10px}
.dash-compact .dash-kpi{font-size:20px}
.dash-compact .field-card{padding:12px 14px}
@media (max-width:900px){
  .dash-hero{grid-template-columns:1fr}
}

/* ---------- Sichtbarer Tastatur-Fokus ---------- */
/* :focus-visible greift nur bei Tastaturbedienung, nicht beim Mausklick -
   so bleibt die Optik für Maus-Nutzer unverändert, während sich die
   Oberfläche per Tabulator sauber und nachvollziehbar bedienen lässt.
   Vorher hatten Buttons, Links und Menüpunkte gar keine Fokus-Anzeige. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
.menu-btn:focus-visible,
.submenu-btn:focus-visible,
[role="button"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible,
summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}
/* Auf dunklen/gefüllten Flächen (Primärbuttons) hebt sich ein heller Rahmen
   besser ab als der Akzentton auf sich selbst. */
.btn-primary:focus-visible,
.btn-danger:focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 4px rgba(12,124,128,.45);
}

/* ---------- Tabellen auf schmalen Bildschirmen ---------- */
/* Jede .data-table wird per JS in .table-scroll-wrap gewickelt (siehe
   Skript). So bekommt eine zu breite Tabelle ihren EIGENEN horizontalen
   Scrollbereich, statt die ganze Seite seitlich wegrutschen zu lassen -
   genau das Problem, das ohne diese Kapselung entsteht. */
.table-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
.table-scroll-wrap .data-table{margin-top:0}
@media (max-width: 900px){
  .table-scroll-wrap{
    /* Dezenter Hinweis, dass mehr Inhalt folgt - nur auf Mobil, wo es
       tatsächlich vorkommt */
    background:linear-gradient(to right, var(--surface) 0%, rgba(255,255,255,0) 3%),
               linear-gradient(to left, var(--surface) 0%, rgba(255,255,255,0) 3%) right;
    background-repeat:no-repeat;background-attachment:local,local;background-size:24px 100%,24px 100%;
  }
}

/* ---------- Globale Suche ---------- */
.global-search{position:relative;margin:2px 0 4px}
.global-search input[type="search"]{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font:inherit;font-size:13.5px;background:var(--surface2)}
.global-search input[type="search"]:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surface)}
.global-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);max-height:360px;overflow-y:auto;padding:6px}
.global-search-results .gsr-group-label{font-size:10.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;padding:6px 8px 2px}
.global-search-results .gsr-item{display:block;width:100%;text-align:left;padding:8px;border:none;
  background:none;border-radius:8px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--text)}
.global-search-results .gsr-item:hover,.global-search-results .gsr-item:focus{background:var(--surface2);outline:none}
.global-search-results .gsr-empty{padding:10px 8px;color:var(--muted);font-size:13px}
.global-search-results .gsr-sub{color:var(--muted);font-size:12px}

/* ---------- Globale Ladeanzeige ---------- */
#globalLoadingBar{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:var(--accent);opacity:0;transition:width .25s ease,opacity .2s ease;pointer-events:none}
#globalLoadingBar.active{opacity:1;width:70%;transition:width 2.5s cubic-bezier(.1,.6,.2,1)}
@media (prefers-reduced-motion: reduce){
  #globalLoadingBar{transition:opacity .1s linear}
  #globalLoadingBar.active{width:100%;transition:opacity .1s linear}
}

/* ---------- Rechnungszeilen: Beschreibung, farbige Bänder ---------- */
.line-item textarea{padding:9px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;min-width:0;
  resize:vertical;min-height:60px;line-height:1.4;background:var(--surface)}

.li-band{display:grid;grid-template-columns:56px 1fr 130px;gap:8px;align-items:center;
  padding:10px 12px;margin:4px 0;border-radius:10px}
.li-band .li-pos{font-weight:700}
.li-band .li-desc{min-width:0}
.li-desc-editable{position:relative;padding-right:22px;cursor:default}
.li-edit-pencil{position:absolute;right:0;top:50%;transform:translateY(-50%);border:none;background:rgba(255,255,255,.18);
  color:inherit;width:20px;height:20px;border-radius:5px;cursor:pointer;font-size:12px;line-height:1;padding:0;opacity:.85}
.li-edit-pencil:hover{opacity:1;background:rgba(255,255,255,.3)}
.li-desc-edit-textarea{width:100%;min-height:52px;padding:6px 8px;border:1px solid var(--accent-border);border-radius:8px;
  font:inherit;font-size:13px;color:var(--text);background:#fff;resize:vertical}
.li-band .li-amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.li-section{background:var(--accent);color:#fff;font-weight:700}
.li-subheader{background:var(--surface2);color:#333;font-style:italic}
.li-subtotal{background:var(--accent-soft);color:var(--accent);font-weight:700}
.li-net{background:var(--surface2);font-weight:700}
.li-tax{background:var(--surface2);font-weight:600}
.li-gross{background:var(--accent);color:#fff;font-weight:800;font-size:1.02rem}

.btn.is-disabled{opacity:.45;pointer-events:none}

.invoice-summary{margin-top:20px;margin-left:auto;width:min(360px,100%);
  border-top:1px solid var(--border);padding-top:14px;display:grid;gap:7px}
.invoice-summary .sum-line{display:flex;justify-content:space-between;gap:16px;font-size:13.8px}
.invoice-summary .sum-gross{margin-top:6px;padding-top:10px;border-top:2px solid var(--accent);
  font-weight:800;font-size:1.12rem;color:var(--accent)}
.invoice-summary .sum-value{font-variant-numeric:tabular-nums}

@media (max-width: 900px){
  .li-band{grid-template-columns:44px 1fr 96px}
}

.li-summary-title{background:var(--surface2);color:#333;font-weight:700;
  border-top:2px dashed var(--accent);border-bottom:1px dashed var(--accent)}
.li-summary-line{background:var(--accent-soft);color:#333}
.li-band.li-flush{grid-template-columns:1fr 130px}

/* Logo-Upload in den Stammdaten */
.logo-row{display:flex;gap:16px;align-items:center;margin-top:12px;flex-wrap:wrap}
.logo-preview{width:160px;height:80px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;transition:border-color .12s,background .12s}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.logo-preview span{color:var(--muted);font-size:12px;text-align:center}
.logo-actions{display:flex;flex-direction:column;gap:8px}
.logo-preview.drag-over{border-color:var(--accent);background:var(--accent-soft)}

.field-card textarea{padding:9px 11px;border:1px solid var(--border);border-radius:8px;font:inherit;resize:vertical;min-height:44px;background:var(--surface)}

/* Farbwahl in den Stammdaten */
.color-card .color-row{display:flex;align-items:center;gap:10px}
.color-card input[type="color"]{width:44px;height:36px;padding:2px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:var(--surface)}
.color-card span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);font-size:12.5px}
.btn-link{border:none;background:none;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}

/* Rechnungsübersicht: Status-Badge, Aktionen, Löschen-Button */
.badge{display:inline-block;padding:3.5px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em}
.badge-sent{background:#e4f5e8;color:#1f8a45}
.badge-open{background:var(--surface2);color:var(--muted)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions .btn{padding:7px 11px;font-size:12.2px}
.btn-danger{background:var(--surface);border-color:rgba(192,57,43,.3);color:#c0392b}
.btn-danger:hover{background:#fdf1f0;border-color:#c0392b}

/* Kostenstellen-Editor in der Kundenverwaltung */
.cc-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 40px;gap:8px;margin-bottom:8px}
.cc-row input{padding:9px 11px;border:1px solid var(--border);border-radius:8px;font:inherit;min-width:0;background:var(--surface)}
.cc-row .cc-remove{padding:0;font-size:16px;line-height:1}
@media(max-width:900px){.cc-row{grid-template-columns:1fr 1fr}}

/* ---------- Dashboard ---------- */
.dash-kpi{font-size:24px;font-weight:700;color:var(--accent,#0c7c80);margin-top:4px;letter-spacing:-.01em}
.dash-chart{display:flex;align-items:flex-end;gap:6px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow-x:auto;height:200px;box-sizing:border-box}
.dash-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:52px;flex:1;height:100%}
.dash-bar{width:64%;min-height:2px;background:var(--accent,#0c7c80);border-radius:5px 5px 0 0;transition:height .3s}
.dash-bar-label{font-size:11px;color:var(--muted);margin-top:6px;white-space:nowrap}
.dash-bar-val{font-size:10px;color:#555;margin-bottom:3px;white-space:nowrap}

/* ---------- E-Mail-Vorlagen: Platzhalter-Chips + Vorschau ---------- */
.tpl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.tpl-chip{border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;width:auto}
.tpl-chip:hover{background:var(--accent);color:#fff}
.tpl-preview{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.tpl-preview-subject{font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface2)}
.tpl-preview-body{padding:12px 14px;white-space:pre-wrap;line-height:1.5;color:#333;min-height:60px}

/* ---------- Artikel: kompakte Preisgruppen-Zeile ---------- */
.price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.price-grid .field-card{margin-bottom:0}
.price-grid label{font-size:12px}
.price-grid input{padding:6px 8px}
@media(max-width:700px){.price-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Storno-/Korrektur-Modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(2px)}
.modal-backdrop[hidden]{display:none}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);padding:26px;max-width:560px;width:100%;box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto}
.modal-box h3{margin:0 0 6px}
.storno-choice{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.storno-opt{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;line-height:1.4;transition:border-color .12s,background .12s}
.storno-opt input{margin-top:3px;width:auto}
.storno-opt:hover{border-color:var(--accent-border);background:var(--accent-soft)}

/* ---------- Preisliste ---------- */
.price-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;margin:14px 0;background:var(--surface)}
.price-card h4{margin:0 0 4px;font-size:15px;color:var(--accent)}
.price-card .muted{margin:0 0 10px}
.price-table{margin:0}
.price-table td{padding:6px 8px}
.price-notes{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.6}
.price-overview{margin:14px 0 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:10px;overflow-x:auto}
.price-overview-img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
.price-features{margin:8px 0 12px;padding-left:18px;color:#3c4a49;font-size:13px;line-height:1.65}
.price-features li{margin-bottom:3px}
.price-edit-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin:12px 0;background:var(--surface2)}
.price-tier-rows{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.price-tier-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#3c4a49}
.price-tier-row input{width:100px}
.pending-note{margin-top:8px;padding:11px 13px;border:1px solid rgba(214,158,46,.35);background:#fdf6e7;border-radius:var(--radius-sm);font-size:13px;color:#6b5518;line-height:1.5}
.pending-note .btn{margin-left:8px}
.license-table td{padding:7px 8px}
.lic-box{max-width:520px}
.lic-box .license-table{margin:0}
.tenant-company-name{margin:0 8px;padding:9px 12px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13.5px;line-height:1.3;word-break:break-word}
.article-search-results{position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:260px;overflow-y:auto;box-shadow:var(--shadow-md)}
.article-search-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border)}
.article-search-item:last-child{border-bottom:none}
.article-search-item:hover,.article-search-item.active{background:var(--accent-soft)}
.article-search-item .asi-num{color:var(--muted);font-size:11px;margin-right:6px}
.article-search-item .asi-price{float:right;color:#555;font-size:12px}
.article-search-empty{padding:10px 12px;color:var(--muted);font-size:13px}

/* ---------- Rich-Text-Editor (Kopfzeilen-Zusatz) ---------- */
.richtext-toolbar{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.richtext-toolbar button{width:29px;height:29px;border:1px solid var(--border);border-radius:7px;background:var(--surface);cursor:pointer;font-size:13px;line-height:1;transition:background .12s,border-color .12s}
.richtext-toolbar button:hover{background:var(--accent-soft);border-color:var(--accent-border)}
.richtext-toolbar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.richtext-toolbar input[type=color]{width:29px;height:29px;padding:2px;border:1px solid var(--border);border-radius:7px}
.richtext-editor{min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:14px}
.richtext-editor:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- Kopf-/Fußzeile Live-Vorschau ---------- */
.letterhead-preview{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:20px;font-size:12px;color:#333;max-width:640px;box-shadow:var(--shadow-sm)}
.lhp-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}
.lhp-address{line-height:1.5}
.lhp-company{text-align:right;line-height:1.5}
.lhp-info{margin-top:6px;color:#333}
.lhp-footer{border-top:2px solid #c00000;padding-top:6px}
.lhp-footer-title{text-align:center;font-weight:700;margin-bottom:4px}
.lhp-footer-line{height:0}
.lhp-footer-cols{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;color:#555}

/* ---------- Design: geteilte Ansicht (Eingabe links, Vorschau rechts) ---------- */
.design-split{display:flex;gap:32px;align-items:flex-start}
.design-split-left{flex:1 1 0;min-width:0}
.design-split-right{flex:0 0 380px;width:380px}
.design-preview-sticky{position:sticky;top:20px}
@media(max-width:1000px){
  .design-split{flex-direction:column}
  .design-split-right{width:100%;flex-basis:auto}
  .design-preview-sticky{position:static}
}

/* ---------- Nummernkreise: schmale Felder mit Live-Beispiel daneben ---------- */
.numbering-rows{display:flex;flex-direction:column;gap:12px;margin-top:16px;max-width:560px}
.numbering-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.numbering-row label{flex:0 0 220px;font-size:13px;color:var(--muted);font-weight:600}
.numbering-input{width:150px;flex:0 0 150px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;
  font:inherit;background:var(--surface);color:var(--text)}
.numbering-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.numbering-example{color:var(--accent);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.numbering-current{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
@media(max-width:700px){
  .numbering-row{flex-direction:column;align-items:flex-start;gap:4px}
  .numbering-row label{flex:none}
}


/* Artikelverwaltung: auf breiten Bildschirmen passen Artikelnummer,
   Einheit und Kategorie in EINE Zeile - damit bleibt das Formular auch
   mit Lesezeichen- und Taskleiste ohne Scrollen bedienbar. Auf schmaleren
   Fenstern greift weiter das normale zweispaltige Raster. */
/* Artikelverwaltung: frei anordenbares Feldraster (6 Spalten auf breiten
   Bildschirmen). Die Breite jedes Feldes wird per Inline-Style
   (grid-column: span N) gesetzt und kann vom Mandanten-Administrator im
   Bearbeitungsmodus geaendert werden. Auf schmaleren Fenstern wird die
   Spaltenzahl reduziert und die Spannweite gekappt, damit die Felder nicht
   unbenutzbar schmal werden. */
.article-field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .article-field-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
  .article-field-grid { grid-template-columns: repeat(6, 1fr); }
}
/* Unter 1000px spannt kein Feld mehr als die vollen 2 Spalten. */
@media (max-width: 999px) {
  .article-field-grid > .field-card { grid-column: span 2 !important; }
}

/* Bearbeitungsmodus */
.article-field-grid.is-editing > .field-card {
  position: relative;
  outline: 2px dashed var(--accent, #1f7a6c);
  outline-offset: 2px;
  cursor: default;
}
.article-field-grid.is-editing > .field-card.is-dragging { opacity: .45; }
.article-field-grid.is-editing > .field-card.drop-target {
  outline-style: solid;
  outline-width: 3px;
}
.afield-tools {
  position: absolute;
  top: 2px; right: 2px;
  display: flex; gap: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 6px;
  padding: 1px 2px;
  z-index: 2;
}
.afield-tools button {
  border: 1px solid #cfe0dc; background: #fff; border-radius: 4px;
  width: 22px; height: 22px; line-height: 1; font-size: 13px;
  cursor: pointer; padding: 0;
}
.afield-tools .afield-grip { cursor: grab; border-style: dashed; }
.afield-tools button:disabled { opacity: .4; cursor: default; }


/* Sichtbar gruppierte Reiterleisten (Rechnungen/Angebote, Einstellungen):
   Reiter stehen in farblich abgesetzten Bloecken mit eigener
   Kurzbezeichnung ("Gruppen-Chips"), statt flach nebeneinander - macht
   auf den ersten Blick klar, welche Punkte zusammengehoeren und welche
   nicht. Ersetzt die fruehere Zwischenueberschrift als reinen Text
   (siehe frueheres .submenu-group), die neben den gleich aussehenden
   Reitern kaum als eigene Gruppe erkennbar war. */
.tabgroup {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 8px 10px 6px;
}
.tabgroup-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
}
.tabgroup-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tabgroup .submenu-btn {
  padding: 7px 11px; margin-right: 0; border-radius: 8px; border-bottom: none;
  background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px;
}
.tabgroup .submenu-btn:hover { color: var(--text); }
.tabgroup .submenu-btn.active {
  color: var(--accent); font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-sm);
}
/* Zweite Zeile bei "Rechnungen / Angebote": optisch als Fortsetzung der
   Gruppen-Chips darueber statt lose darunter schwebend. */
.submenu-sub-grouped {
  background: var(--surface2) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  padding: 10px 14px 8px !important; margin: -6px 0 24px !important;
}
.submenu-sub-grouped .submenu-btn { font-size: 13px; }
@media (max-width: 900px) {
  .tabgroup { width: 100%; }
}

/* PDF-Vorschau im Rechnungs-/Angebotsassistenten (Fenster in der App) */
.pdf-preview-box{max-width:min(1100px,96vw);width:100%;height:92vh;max-height:92vh;padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.pdf-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pdf-preview-head a{font-size:13px}
.pdf-preview-frame{flex:1;min-height:0;width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff}
.pdf-preview-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
/* Obere Bereichsleiste (aus einer Definition erzeugt): ohne Inhalt komplett ausblenden.
   Ohne diese Regel würde .submenu{display:flex} das [hidden]-Attribut überstimmen (vgl. v2.18.02). */
.topnav[hidden]{display:none !important}

/* Dashboard: "In Bearbeitung" / "Heute versendet" */
.dash-count{font-weight:600;color:var(--accent);margin-left:4px;letter-spacing:0}
#dashGroupInProgress,#dashGroupSentToday{margin-bottom:22px}
#dashGroupInProgress[hidden],#dashGroupSentToday[hidden]{display:none !important}

/* Einheiten: Hinweise unter der Positionsliste und Verwaltung */
.unit-hints{margin:10px 0 4px;font-size:13px;color:var(--muted);line-height:1.5}
.unit-hints[hidden]{display:none !important}
.unit-hints-warn{margin-top:4px;color:#8a6d1e}
.unit-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);font-size:13px;cursor:pointer}
button.chip:hover{border-color:var(--accent)}

/* Einheiten-Auswahl (eigenes Dropdown) und Speicherleiste der Einheitenlisten */
input[data-unit-combo]{padding-right:22px;background-repeat:no-repeat;background-position:right 6px center;background-size:10px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.unit-combo-pop{position:fixed;z-index:1300;max-height:280px;overflow:auto;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16);padding:4px;font-size:14px}
.unit-combo-pop[hidden]{display:none !important}
.unit-combo-item{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:7px;cursor:pointer}
.unit-combo-item span{color:var(--muted);font-size:13px}
.unit-combo-item:hover,.unit-combo-item.active{background:var(--surface2)}
.unit-combo-empty{padding:8px 10px;color:var(--muted);font-size:13px}
.units-savebar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.units-savebar-actions{display:flex;gap:10px}
tr.unit-newrow td{background:#eef7f4}
tr.unit-changed td{background:#fdf6e4}
tr.unit-deleted td{background:#fbeaea;opacity:.75}
tr.unit-deleted input,tr.unit-deleted textarea{text-decoration:line-through}
.unit-flag{font-size:12px;color:#8a6d1e;margin-left:4px}

/* Werbebanner-Vorschau (Systemverwaltung) - entspricht dem Kasten im PDF */
.promo-preview{border:1px solid #1f7a6c;border-left:5px solid #e0a336;background:#eef7f4;border-radius:6px;padding:12px 16px;max-width:760px}
.promo-title{font-weight:700;color:#1f7a6c;font-size:15px}
.promo-text{margin-top:4px;font-size:12.5px;line-height:1.45;color:#333}
.promo-foot{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:8px}
.promo-reward{color:#14504a;font-size:13.5px}
.promo-amount{color:#b7791f}
.promo-url{color:#1f7a6c;font-size:15px;white-space:nowrap}
.promo-meta{font-size:11.5px;margin-bottom:3px}
.promo-sample-row{margin-top:8px;display:flex;align-items:center;gap:8px}
.promo-sample-row[hidden]{display:none !important}
/* Randvermerk-Vorschau: kleine Seite mit senkrechter Zeile am Rand */
.edge-preview-wrap{padding:6px 0}
.edge-preview{position:relative;width:210px;height:297px;background:#fff;border:1px solid #cfd6d6;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden}
.edge-preview-line{position:absolute;left:9px;bottom:26px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:7px;white-space:nowrap;line-height:1}
.edge-preview.edge-right .edge-preview-line{left:auto;right:9px;bottom:auto;top:26px;transform:none}
.edge-preview-content{position:absolute;left:34px;right:26px;top:70px}
.edge-preview-content i{display:block;height:6px;background:#e3e8e8;border-radius:2px;margin-bottom:9px}
.promo-preview-wrap{width:176mm;max-width:100%}