:root{
  --navy:#1F3A5F; --blue:#2E75B6; --blue2:#3f86c7; --green:#37a05f; --green-d:#2e8a51;
  --red:#e0524d; --orange:#C77A20; --grey:#5B6672; --line:#e2e7ee; --bg:#eef1f5;
  --sidebar:#ffffff; --active:#eaf3fb;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#26313d;background:var(--bg)}
a{color:var(--blue);text-decoration:none}
.muted{color:var(--grey)} .small{font-size:12px}

/* ---- App shell ---- */
.app{display:flex;min-height:100vh;--sbw:clamp(250px,15vw,320px)}
/* Zwei getrennte Aufgaben, zwei Elemente:
   – Die Leiste selbst streckt sich als Flex-Kind über die volle Seitenhöhe.
     Damit reicht die Farbe immer bis unten, ohne vh-Rechnung. `100vh` ist
     hier untauglich, weil body{zoom} sie verfälscht (100vh ergab rund
     1,5 Fensterhöhen und ließ die Seite ins Leere scrollen).
   – Fixiert wird nur der Inhalt darin: `.side-in` klebt oben fest und bleibt
     beim Scrollen sichtbar.
   Wichtig: die Leiste darf KEIN overflow ≠ visible haben, sonst kann das
   Kind darin nicht mehr kleben. Nur im eingeklappten Zustand wird geschnitten. */
.sidebar{width:var(--sbw);background:var(--sidebar);border-right:1px solid var(--line);padding:16px 0;flex-shrink:0;overflow:visible;transition:width .18s ease}
.sidebar{align-self:stretch}
.side-in{position:sticky;top:0}
.app.nav-collapsed{--sbw:0px}
.app.nav-collapsed .sidebar{width:0;border-right:0;overflow:hidden}
.nav-toggle{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:16px;cursor:pointer;color:#5a6674;margin-right:12px;flex-shrink:0}
.nav-toggle:hover{background:#f3f6fa}
.brand{padding:10px 18px 22px;display:flex;align-items:center;gap:13px}
.brand-logo{width:66px;height:56px;flex-shrink:0}
.brand-txt{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:.005em;line-height:1;white-space:nowrap}
.brand-txt strong{color:var(--blue);margin-left:3px}
nav{display:flex;flex-direction:column}
.nav{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#41505f;font-size:clamp(15.5px,1.02vw,22px);cursor:pointer;border-left:3px solid transparent;white-space:nowrap}
.nav span{width:18px;text-align:center;color:#8794a3;display:flex;align-items:center;justify-content:center;flex:none}
/* Die Symbole sind gezeichnet (siehe templates/_navsymbole.html), nicht mehr
   Zeichen aus einer Schrift. Deshalb eine feste Pixelgröße und nicht em:
   nav-schmal.css setzt in der eingeklappten Leiste `.nav{font-size:0}`, und
   eine Größe in em wäre dort auf null geschrumpft — die Leiste wäre leer. */
.nav-sym{width:18px;height:18px;display:block}
.nav:hover{background:#f5f8fb}
.nav.active{background:var(--active);border-left-color:var(--blue);color:var(--blue);font-weight:600}
.nav.active span{color:var(--blue)}
.nav.disabled{color:#aeb7c2;cursor:not-allowed}
.nav.disabled span{color:#cdd4dc}
.nav-sep{padding:16px 20px 6px;font-size:11px;letter-spacing:.08em;color:#9aa4b0}

.workspace{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:30}
.client-select{border:1px solid var(--blue);color:var(--navy);border-radius:8px;padding:8px 14px;font-weight:600;font-size:14px;background:#fff;cursor:pointer;font-family:inherit}
.client-select:hover{background:#eff6fc}
.client-select .caret{color:var(--blue);margin-left:8px}
.topbar-right{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--grey)}
.lang{border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:14px}
.admin-badge{background:#e7f6ff;color:#1c86c4;border:1px solid #b9e2f6;border-radius:7px;padding:5px 11px;font-size:14px;font-weight:600}
.content{padding:22px 26px;overflow:visible}

/* ---- Page ---- */
.page-title{color:var(--navy);font-size:22px;margin:0 0 14px}
.page-sub{margin:-8px 0 14px;font-size:14px}
.page-sub b{color:var(--navy)}
select.per-sel{min-width:104px}
.page-drop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(46,117,182,.14)}
.page-drop.show{display:flex}
.page-drop-box{background:#fff;border:3px dashed var(--blue);border-radius:18px;padding:44px 66px;
  font-size:22px;font-weight:700;color:var(--navy);text-align:center;box-shadow:0 24px 70px rgba(20,50,90,.22)}
.page-drop-box .small{font-weight:500;font-size:14px}
.aus-cell{text-align:center}
.aus-ok{color:var(--green,#37a05f);font-weight:800;font-size:15px}
.aus-wait{opacity:.6}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:16px}
.tab{background:none;border:0;padding:10px 16px;font-size:14px;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
/* Reiter als Link (führt auf eine andere Seite, nicht nur eine Ansicht). */
.tab-a{text-decoration:none;display:inline-block}
.tab-a:hover{color:var(--blue)}
/* --- Belegsuche ------------------------------------------------------- */
.bs-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bs-form input[type=search]{flex:1;min-width:280px;font:inherit;font-size:14px;
  padding:10px 13px;border:1px solid #d8dee6;border-radius:var(--radius,8px)}
.bs-form select{font:inherit;font-size:13.5px;padding:9px 10px;
  border:1px solid #d8dee6;border-radius:var(--radius,8px);background:#fff}
.bs-hinweis{margin-top:10px;line-height:1.5}
.bs-hinweis code{background:#f2f4f8;padding:1px 6px;border-radius:5px;font-size:12px}
.bs-liste{display:flex;flex-direction:column;gap:10px}
.bs-treffer{background:#fff;border:1px solid var(--line,#e3e7ee);border-radius:10px;
  padding:12px 15px}
.bs-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bs-titel{font-size:14.5px;font-weight:600;color:var(--navy,#1e2a44);
  text-decoration:none}
.bs-titel:hover{color:var(--blue);text-decoration:underline}
.bs-quelle{font-size:11px;padding:2px 8px;border-radius:20px;background:#eef1f6;
  color:#5a6472}
.bs-quelle.dms{background:#fdf3e6;color:#8a5a1e}
.bs-meta{margin:3px 0 7px}
/* Fundstelle: Festbreitenschrift, damit Kennungen wie 26AT920000IVR796X0
   lesbar bleiben und nicht mit dem Fließtext verschwimmen. */
.bs-stelle{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.6;color:#4a5260;background:#f8fafc;
  border:1px solid #eef1f6;border-radius:7px;padding:9px 11px;
  word-break:break-word}
.pill{background:#e6ebf1;color:var(--grey);border-radius:10px;padding:1px 8px;font-size:11px;margin-left:5px}
.tab.active .pill{background:var(--blue);color:#fff}

.split-work{display:grid;grid-template-columns:1fr 40%;gap:18px;align-items:start}
/* Aktionen und Filter über die volle Breite – erst darunter beginnt die
   Zweiteilung. Sonst stünde die Vorschau ganz oben neben der Aktionsleiste
   und die eigentliche Belegliste rutschte nach unten aus dem Blick. */
.work-kopf{margin-bottom:2px}

/* ---- Kopfkarte der Belegliste (Titel + Reiter) -------------------------
   Titel, Klientendaten und die beiden Reiter stehen zusammen in einer weißen
   Karte. Vorher schwebten sie ohne Rahmen über der Seite und wirkten neben
   den gerahmten Aktions- und Filterkästen unfertig. */
.kopf-karte{background:#fff;border:1px solid var(--line,#e3e7ee);border-radius:14px;
  padding:20px 22px 0;margin:0 0 16px}
.kopf-oben{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.kopf-icon{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:none;border-radius:14px;background:#eef4ff;
  border:1px solid #dce7fb}
.kopf-icon svg{width:26px;height:26px;fill:none;stroke:var(--ds-primary,#1f4f7a);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.kopf-titel{margin:0;color:var(--navy,#1e2a44);font-size:23px;font-weight:700;
  letter-spacing:-.3px}
.kopf-sub{margin-top:4px;font-size:13.5px;color:#8a94a2}
.kopf-sub b{color:var(--ds-primary,#1f4f7a);font-weight:600}
.kopf-punkt{color:#c7cdd7;margin:0 3px}
/* Reiter als angesetzte Karten */
.kartentabs{display:flex;gap:6px}
.ktab{display:inline-flex;align-items:center;gap:9px;border:1px solid transparent;
  border-bottom:none;background:none;padding:11px 18px 12px;font:inherit;
  font-size:14.5px;color:#6b7480;cursor:pointer;border-radius:10px 10px 0 0;
  position:relative;top:1px}
.ktab:hover{color:var(--navy,#1e2a44);background:#f7f9fc}
.ktab.active{color:var(--ds-primary,#1f4f7a);font-weight:600;background:#fff;
  border-color:var(--line,#e3e7ee);box-shadow:inset 0 -2.5px 0 var(--ds-primary,#1f4f7a)}
.ktab-n{background:#eef1f6;color:#5a6472;border-radius:20px;padding:1px 9px;
  font-size:11.5px;font-weight:600}
.ktab.active .ktab-n{background:var(--ds-primary,#1f4f7a);color:#fff}
/* Symbole in der Aktionsleiste */
.tb-i{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
/* Nur die Belegliste scrollt intern; Vorschau bleibt fix (sticky). vh-basiert,
   damit es unter Safaris body{zoom} korrekt bleibt. */
.left-pane{min-width:0;max-height:calc(100 * var(--vhpx, 1vh) - 300px);display:flex;flex-direction:column;overflow:hidden;padding-right:2px}
#belegForm{display:flex;flex-direction:column;min-height:0}
/* Aktionen/Filter/Kopf bleiben fix – nur die Tabellenzeilen scrollen. */
.grid-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:auto}

/* ---- Panels / actions / filter ---- */
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.panel-label{font-size:11px;letter-spacing:.06em;color:#9aa4b0;margin-bottom:8px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px}
.filter-row select,.filter-row input{border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px;background:#fbfcfe}
.filter-row input{flex:1;min-width:180px}

.b{border:0;border-radius:7px;padding:9px 13px;font-size:13px;color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.b:hover{filter:brightness(1.06)}
.b-blue{background:var(--blue)} .b-green{background:var(--green)} .b-red{background:var(--red)}
.b-grey{background:#8593a2} .b-icon{background:var(--blue);padding:9px 11px}
.b-light{background:#eef4fb;color:var(--blue);border:1px solid #cfe0f2}

.table-info{font-size:12px;color:var(--grey);margin:4px 2px 8px}

/* ---- Grid table ---- */
.grid{width:100%;border-collapse:collapse;background:#fff}
.grid th,.grid td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;white-space:nowrap}
.grid th{background:#f6f8fb;color:#5a6674;font-weight:600;position:sticky;top:0;z-index:2}
.grid-scroll{border:1px solid var(--line);border-radius:10px;background:#fff}
.grid tbody .row{cursor:pointer}
.grid tbody .row:hover{background:#f5f9fd}
.grid tbody .row.sel{background:#eaf3fb}
/* Freigeschaltete Belege: grün mit offenem Schloss */
.grid tbody .row[data-status="freigeschalten"]{background:#e9f7ef}
.grid tbody .row[data-status="freigeschalten"]:hover{background:#ddf1e6}
.grid tbody .row[data-status="freigeschalten"].sel{background:#d3edde}
.grid tbody .row[data-status="freigeschalten"] .fname{color:#1c7a43;font-weight:600}
/* In Bearbeitung (importiert in Belegverarbeitung): amber « */
.grid tbody .row[data-status="in_bearbeitung"]{background:#fff6e6}
.grid tbody .row[data-status="in_bearbeitung"]:hover{background:#ffeecf}
.grid tbody .row[data-status="in_bearbeitung"].sel{background:#ffe6bf}
.grid tbody .row[data-status="in_bearbeitung"] .fname{color:#a86400;font-weight:600}
/* An BMD übermittelte Belege: dezent blau */
.grid tbody .row[data-status="imported"]{background:#eef4fb}
.grid tbody .row[data-status="imported"] .fname{color:var(--ds-primary,#1f4f7a)}
.grid .num{text-align:right;font-variant-numeric:tabular-nums}
.c-check{width:34px} .c-lock{width:30px;text-align:center}
.fname{max-width:300px;overflow:hidden;text-overflow:ellipsis;color:#2b3a49}
.art{background:#eef2f7;color:#51606f;border-radius:5px;padding:2px 7px;font-size:12px;font-weight:600}
.lk{font-size:14px}
.konf{font-size:11px;padding:2px 8px;border-radius:10px}
.k0{background:#f7dcdc;color:#a33}.k1{background:#fdf1e0;color:var(--orange)}.k2{background:#dcefe4;color:var(--green-d)}

/* ---- Preview ---- */
/* Startwert bis das Skript die genaue Höhe setzt – derselbe Abzug wie bei
   .left-pane, sonst zuckt die Vorschau beim Laden. */
.preview-pane{background:#2b2f36;border-radius:10px;overflow:hidden;position:sticky;top:14px;height:calc(100 * var(--vhpx, 1vh) - 300px);display:flex;flex-direction:column}
.preview-head{flex:0 0 auto;background:#20242a;color:#cfd6de;padding:9px 14px;font-size:13px;display:flex;align-items:center;gap:8px;min-width:0}
.preview-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-body{position:relative;flex:1 1 auto;min-height:0;background:#3a3f47}
.preview-body iframe{width:100%;height:100%;border:0;display:none;background:#fff}
.preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa4b0;font-size:14px;text-align:center;padding:20px}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;background:rgba(20,28,38,.5);display:none;align-items:center;justify-content:center;z-index:50}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:12px;padding:26px 30px;width:660px;max-width:94vw}
.modal-head{display:flex;justify-content:space-between;align-items:center;font-size:22px;font-weight:600;color:var(--navy);margin-bottom:18px}
.modal-head .x{background:none;border:0;font-size:20px;cursor:pointer;color:#8794a3}
.modal-box label{display:block;font-size:15px;color:var(--grey);margin:10px 0}
.modal-box select,.modal-box input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:8px;margin-top:5px;font-size:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.sample-row{display:flex;gap:8px;margin-top:4px}
.dropzone{border:2px dashed #b9c6d6;border-radius:10px;background:#f7fafd;padding:26px 16px;text-align:center;cursor:pointer;margin:12px 0;transition:.15s}
.dropzone:hover{border-color:var(--blue);background:#eff6fc}
.dropzone.drag{border-color:var(--blue);background:#e4f0fb}
.dz-icon{font-size:26px;color:var(--blue);margin-bottom:6px}
.file-list{list-style:none;padding:0;margin:0 0 8px;max-height:130px;overflow:auto}
.file-list li{font-size:13px;padding:5px 8px;background:#f2f5f8;border-radius:6px;margin-bottom:4px}
.modal-box .field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Review page ---- */
.back{display:inline-block;margin-bottom:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.beleg-view{background:#3a3f47;border-radius:10px;height:640px;overflow:hidden}
.beleg-view embed{width:100%;height:100%}
.beleg-view pre{padding:14px;white-space:pre-wrap;font-size:12px;color:#e8ebee}
.buchung{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.buchung label{display:block;font-size:13px;color:var(--grey);margin:9px 0}
.buchung input,.buchung select{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px;margin-top:3px}
.konf-banner{padding:11px 14px;border-radius:7px;margin-bottom:12px;font-size:clamp(14px,.92vw,18px)}
.konf-banner.k0{background:#f7dcdc}.konf-banner.k1{background:#fdf1e0}.konf-banner.k2{background:#dcefe4}
.netto-info{color:var(--grey);font-size:13px}
.actions{display:flex;gap:10px;margin-top:6px}
.status{font-size:11px;padding:2px 8px;border-radius:10px;background:#e6ebf1;color:var(--grey);margin-left:8px}
.s-hochgeladen{background:#fbe4e2;color:#c0392b}.s-freigeschalten{background:#dcefe4;color:var(--green-d)}.s-imported{background:#e5edf6;color:var(--blue)}
.lk.closed{color:#d9433b}.lk.open{color:#37a05f}.lk.exp{color:var(--ds-primary,#1f4f7a)}
.lk.bearb{color:#d98c00;font-weight:800;font-size:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.card.highlight{border-color:var(--orange);background:#fdf7ef}
code{background:#eef1f5;padding:2px 5px;border-radius:4px;font-size:12px}
button{font-family:inherit}
@media(max-width:1050px){.split-work,.split{display:block;grid-template-columns:1fr}.left-pane{max-height:none;overflow:visible;display:block}.grid-scroll{overflow:visible}.preview-pane{position:static;height:calc(70 * var(--vhpx, 1vh));margin-top:14px}}

/* ---- Prüf-Screen (Rechnung prüfen) ---- */
.review-top{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.review-head-title{display:flex;align-items:center;gap:10px;font-size:15px}
.edit-mark{color:var(--blue)}
/* Proportionale Aufteilung: Formular und Vorschau skalieren mit der Bildschirmbreite.
   ~48 % Formular / ~52 % Vorschau -> Formular wächst auf großen Bildschirmen mit. */
/* Formular moderat breit (Logisth.AI-Stil), Vorschau bekommt den großen Rest */
.review3{display:grid;grid-template-columns:minmax(120px,0.18fr) minmax(580px,1000px) minmax(360px,1.25fr);gap:14px;align-items:start}
.review3.no-preview{grid-template-columns:minmax(135px,0.24fr) minmax(440px,1000px)}
#acc-lines{overflow-x:auto;padding-bottom:4px}
.full{width:100%}
.rev-left{display:flex;flex-direction:column;gap:12px}
.totals{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.t-row{display:flex;justify-content:space-between;padding:10px 12px;font-size:clamp(13px,.78vw,17px);border-bottom:1px solid var(--line)}
.t-row b{font-variant-numeric:tabular-nums}
.t-row.green{background:#e6f5ec;color:var(--green-d)}
.t-row.red{background:#fbe9e8;color:#b23}
.t-row.grey{background:#eef1f5;color:#41505f}
/* Gutschrift: zeigt den Betrag so, wie er in BMD ankommt (mit Minus). */
.t-row.gutschrift{background:#fdf0e6;color:#8a4b12;font-weight:600}
.settings-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.sb-title{font-size:13px;color:#41505f;margin-bottom:6px}
.settings-box label{display:block;font-size:12px;color:var(--grey);margin:6px 0}
.settings-box select{width:100%;padding:6px;border:1px solid var(--line);border-radius:6px;background:#f6f8fb}
.thumb{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;position:relative;text-align:center}
.thumb iframe{width:100%;height:180px;border:1px solid var(--line);border-radius:6px;background:#fff}
.thumb-badge{position:absolute;top:14px;left:14px;font-size:11px;padding:2px 7px;border-radius:6px;color:#fff}
.thumb-badge.green{background:var(--green)}
.thumb-cap{font-size:11px;color:var(--grey);margin-top:4px}

/* Buchungsmaske der Belegverarbeitung: grauer Hintergrund, damit die weißen
   Felder klar hervortreten. Der graue Hintergrund gilt nur für .rev-form. */
.rev-form{background:#e9edf2;border:1px solid #d7dee7;border-radius:14px;padding:14px 16px;box-shadow:0 1px 3px rgba(20,40,80,.04)}
.rev-form-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.rev-form-head h2{margin:0;color:var(--navy);font-size:clamp(17px,1.1vw,22px);font-weight:650}
.rev-form-head .konf-banner{margin:0;flex:1;max-width:60%}
/* GLOBAL (Upload-Dialog, Review u. a.): unveränderte Originalgröße. */
.field{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:7px}
.field label{font-size:clamp(15px,.95vw,20px);color:#8a94a2}
.field input,.field select{padding:12px 14px;border:1px solid #e4e8ee;border-radius:10px;font-size:clamp(17px,1.15vw,24px);width:100%;background:#fbfcfd;transition:border-color .15s,background .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);background:#fff;box-shadow:0 0 0 3px rgba(46,117,182,.12)}
.field input:hover,.field select:hover{border-color:#cfd6e0}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-2 .field{grid-template-columns:110px 1fr;margin-bottom:0}
/* NUR in der Buchungsmaske kompakt + reinweiße Felder. */
.rev-form .field{grid-template-columns:104px minmax(0,1fr);gap:9px;margin-bottom:5px}
.rev-form .field label{font-size:clamp(13px,.8vw,15px);color:#7c8794}
.rev-form .field input,.rev-form .field select{padding:7px 11px;border:1px solid #d7dee7;border-radius:8px;font-size:clamp(14px,.9vw,16px);background:#fff}
.rev-form .field input:hover,.rev-form .field select:hover{border-color:#bcc6d3}
.rev-form .field-2{gap:10px}
.rev-form .field-2 .field{grid-template-columns:104px 1fr}
.sum-line{display:flex;gap:24px;align-items:center;background:linear-gradient(90deg,#e8f6ee,#eef6f1);border:1px solid #bfe3cc;border-left:5px solid var(--green-d);border-radius:10px;padding:10px 14px;margin:10px 0;font-size:clamp(15px,1vw,19px);font-weight:600;color:#2b3a49;box-shadow:0 1px 4px rgba(20,80,40,.06)}
.sum-line .ok{color:var(--green-d);font-weight:700}
.sum-line b{font-variant-numeric:tabular-nums;color:var(--green-d)}
/* Dubletten-Warnung */
.dup-warn{background:#fff3cd;border:1px solid #ffd666;border-left:5px solid #e8a400;border-radius:9px;padding:11px 14px;margin:10px 0;color:#7a5200;font-size:clamp(14px,.95vw,18px)}
.dup-warn b{color:#8a4b00}
.dup-warn ul{margin:6px 0 0;padding-left:18px}
.dup-warn li{margin:2px 0}
.sum-edit{width:120px;border:1px solid #bfe3cc;border-radius:8px;padding:4px 8px;font-size:.92em;font-weight:700;
          color:var(--green-d);background:#fff;text-align:right;font-variant-numeric:tabular-nums}
.sum-line.bad .sum-edit{border-color:#f0c2c2;color:#b21f1f}
.sum-edit:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);box-shadow:0 0 0 3px rgba(46,117,182,.12)}
.sum-badge{margin-left:auto;font-size:.72em;font-weight:700;padding:3px 10px;border-radius:999px}
.sum-badge.ok{color:#1c7a43;background:#d3edde}
.sum-badge.err{color:#b21f1f;background:#fbe0e0}
/* Summe stimmt nicht: rote Warn-Leiste statt grün */
.sum-line.bad{background:linear-gradient(90deg,#fdeaea,#fbf0f0);border-color:#f0c2c2;border-left-color:#d9433b;box-shadow:0 1px 4px rgba(120,20,20,.06)}
.sum-line.bad b{color:#b21f1f}
.acc-head,.stamm-head{font-size:clamp(13px,.85vw,17px);letter-spacing:.05em;color:#9aa4b0;margin:12px 0 6px}
.acc-line{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:10px}
.acc-line label{display:block;font-size:11px;color:var(--grey);margin-bottom:3px}
.acc-line input,.acc-line select{padding:7px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.rc{display:inline-block;background:#5B6672;color:#fff;border-radius:5px;padding:6px 9px;font-size:12px;font-weight:600}
.add-split{margin-top:8px;background:#eef4fb;color:var(--blue);border:1px solid #cfe0f2;border-radius:6px;width:30px;height:30px;font-size:16px;cursor:pointer}
.stamm{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.stamm-head{display:flex;justify-content:space-between;align-items:center}
/* Fehlendes Personenkonto: rot und mit Rand, weil daraus eine Neuanlage in
   BMD wird. Führt der Klient den Lieferanten dort längst unter anderer
   Schreibweise, entsteht ein zweites Konto – und das fällt erst auf, wenn
   die Offenen Posten auf zwei Konten liegen. */
.stamm-neu{margin:8px 0 10px;padding:9px 12px;border-radius:8px;
  background:#fdecea;border:1px solid #f2b8b2;color:#a3302a;
  font-size:13.5px;line-height:1.5}
.stamm-neu b{color:#8f231e}
/* Kandidaten aus dem BMD-Stamm. Vorschlag, keine Zuordnung: gesucht wird über
   den Namen vom Beleg, und der stammt oft aus dem Logo. */
.stamm-vorschlag{margin-top:9px;padding-top:8px;border-top:1px solid #f2c6c1}
.vs-titel{font-size:12.5px;color:#8f231e;margin-bottom:5px}
.vs-treffer{display:block;width:100%;text-align:left;margin:3px 0;padding:6px 9px;
  border:1px solid #dbe2ea;border-radius:7px;background:#fff;cursor:pointer;
  font:inherit;font-size:13px;color:#1f2a37}
.vs-treffer:hover{background:#eef4ff;border-color:#9dbcff}

/* Klientenzugänge eines Logins. Jede Zeile ein Klient, mit eigenen Rechten –
   die hängen am Zugang, nicht am Benutzerkonto. */
/* Zugangszeile: Name oben, Rechte als kompakte Marken darunter, „✕" rechts.
   Nebeneinander brauchten Name und sechs Kästchen mehr Platz, als die Spalte
   hat – bei der dritten Firma rutschten die Rechte untereinander und die Zeile
   wurde dreimal so hoch. */
.zg-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"name weg" "rechte weg";gap:5px 10px;align-items:center;
  padding:6px 8px;margin:3px 0;border:1px solid var(--line);border-radius:8px;
  background:#fbfcfe}
.zg-zeile.zg-aktiv{border-color:#9dbcff;background:#f4f8ff}
.zg-name{grid-area:name;font-weight:600;font-size:12.5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zg-marke{font-weight:500;font-size:11px;color:#4a6fb5;background:#e6eefc;
  border-radius:5px;padding:1px 6px;margin-left:4px}
.zg-weg{grid-area:weg}
.zg-rechte{grid-area:rechte;display:flex;gap:4px;align-items:center;
  flex-wrap:wrap;min-width:0}
/* Ein Recht = eine Marke. Angehakt ist sie blau gefüllt – so sieht man beim
   Überfliegen, was eine Firma darf, ohne sechs Kästchen zu vergleichen. */
.zg-recht{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;
  border:1px solid #dde3ec;border-radius:20px;background:#fff;cursor:pointer;
  font-size:11.5px;color:#5a6674;white-space:nowrap;line-height:1.6}
.zg-recht:hover{border-color:#b9c8dd}
.zg-recht input{width:13px;height:13px;margin:0;accent-color:var(--ds-primary,#1f4f7a);
  cursor:pointer;flex:none}
.zg-recht:has(input:checked){background:#eaf1ff;border-color:#9dbcff;
  color:#26436f;font-weight:600}
.zg-recht.warn:has(input:checked){background:#fdf1e7;border-color:#eec39a;
  color:#8a5a22}
.zg-neu{display:flex;gap:6px;margin-top:6px}
/* max-width + border-box: die Spalte hat eine feste Breite, ein starres
   280px-Feld würde bei schmalem Fenster darüber hinausragen. */
.zg-such-box{position:relative;flex:1;min-width:0;max-width:320px}
.zg-suche{width:100%;box-sizing:border-box;padding:7px 10px;
  border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px}
.zg-suche:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);box-shadow:0 0 0 3px var(--ds-primary,#1f4f7a)22}
/* Eigene Vorschlagsliste – die native datalist zeigt in Safari den
   technischen Wert und schneidet lange Namen ab. */
.zg-liste{display:none;position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);
  background:#fff;border:1px solid var(--line);border-radius:9px;
  box-shadow:0 8px 24px rgba(20,30,50,.13);max-height:260px;overflow:auto;padding:4px}
.zg-liste.show{display:block}
.zg-opt{padding:7px 10px;font-size:13px;border-radius:6px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2b3546}
.zg-opt b{color:#1f2a37;margin-right:6px}
.zg-opt:hover{background:#f0f5ff;color:#26436f}
.zg-leer{font-size:12.5px;color:#b0413b;margin-bottom:6px}

/* Firmenwechsel des Klienten in der Topbar – an derselben Stelle, an der die
   Kanzlei ihren Klienten wählt. Sieht aus wie der Kanzlei-Knopf daneben. */
.client-wahl{display:inline-flex;align-items:center;margin-left:4px}
.client-wahl select{max-width:360px;padding:7px 30px 7px 11px;font:inherit;
  font-size:14px;font-weight:600;color:var(--navy,#1e2a44);background:#fff;
  border:1px solid var(--line);border-radius:9px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7686' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  background-size:14px}
.client-wahl select:hover{border-color:#9dbcff}
.hinweis-rot{color:#b0413b;font-weight:700}
.stamm-btns{display:flex;gap:6px;flex-wrap:wrap}
.b.sm{padding:5px 9px;font-size:12px}
.stamm-ro .ro-grid{width:100%;border-collapse:collapse;font-size:13px}
.stamm-ro .ro-grid td{padding:4px 8px;border-bottom:1px solid var(--line)}
.stamm-ro .ro-grid td:first-child{color:#9aa4b0;width:90px;white-space:nowrap}
.stamm-ro .ro-grid td:last-child{color:#2b3a49}
/* Fortschrittsbalken beim Auslesen */
.pbar{height:10px;background:#e9eef4;border-radius:6px;overflow:hidden}
.pbar-fill{height:100%;width:0;background:var(--blue,var(--ds-primary,#1f4f7a));transition:width .25s ease}
#auslesen-box{margin-bottom:14px}
.rev-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.rev-actions .b{text-decoration:none;display:inline-flex;align-items:center}
.rev-preview{background:#3a3f47;border-radius:10px;overflow:auto;position:sticky;top:14px;height:calc(100vh - 170px);padding:8px}
.rev-preview iframe{width:100%;height:100%;border:0;background:#fff}
.rev-preview pre{padding:14px;white-space:pre-wrap;font-size:12px;color:#e8ebee}
.prev-zoom{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:0 2px 12px;color:#e8ebee;font-size:20px}
.prev-zoom button{background:#525a66;color:#fff;border:0;border-radius:10px;min-width:48px;height:48px;padding:0 18px;cursor:pointer;font-size:23px;line-height:1;font-weight:600}
.prev-zoom #zoomLbl{font-size:21px;min-width:74px;text-align:center;font-variant-numeric:tabular-nums}
.prev-zoom button:hover{background:#626b78}
.pdf-scroll{display:flex;flex-direction:column;gap:8px;align-items:center}
.pdf-page{width:calc(100% * var(--zoom,1));max-width:none;height:auto;display:block;background:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.35)}
/* Nebeneinander-Ansicht: Seiten in Spalten */
.pdf-scroll.cols{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.pdf-scroll.cols .pdf-page{width:calc((50% - 5px) * var(--zoom,1))}
.prev-zoom button.on{background:var(--ds-primary,#1f4f7a)}
.acc-line select.locked,.acc-line input.locked{background:#eef2f7;color:#5a6674;cursor:not-allowed}
/* Buchungszeile: saubere, ausgerichtete Spalten */
/* Buchungszeile als ausgerichtetes Grid mit EINER Kopfzeile (wie Logisth.AI) */
.acc-line{display:grid;grid-template-columns:minmax(110px,1.6fr) 74px 46px 46px 102px 74px 122px 26px;gap:7px;align-items:center;margin-bottom:6px;background:none;border:0;padding:0}
/* Rechtevergabe beim Anlegen eines Logins – klar gruppiert, große Kästchen. */
.rechte-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin-top:12px}
.rechte-gruppe{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.rechte-titel{font-size:12px;font-weight:700;color:#5a6675;text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:9px}
.rechte-items{display:flex;flex-wrap:wrap;gap:8px}
.rechte-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 14px;
  font-size:14px;color:#2b3546;cursor:pointer;user-select:none}
.rechte-item:hover{border-color:var(--ds-primary,#1f4f7a);background:#f5f8ff}
.rechte-item input[type=checkbox]{width:19px;height:19px;margin:0;accent-color:var(--ds-primary,#1f4f7a);cursor:pointer;flex:none}
.rechte-item:has(input:checked){border-color:var(--ds-primary,#1f4f7a);background:#eef4ff;font-weight:600}
.rechte-item.warn:has(input:checked){border-color:#c0392b;background:#fdecea;color:#96322b}
.rechte-item.warn input[type=checkbox]{accent-color:#c0392b}
.rechte-hint{font-size:12.5px;color:#8a94a2;margin-top:9px;line-height:1.45}
/* Rechte-Häkchen in der Benutzerliste ebenfalls gut treffbar */
td .small input[type=checkbox]{width:17px;height:17px;margin:0 4px 0 0;
  accent-color:var(--ds-primary,#1f4f7a);vertical-align:-3px;cursor:pointer}
/* --- Portal-Kopf --------------------------------------------------------
   Titel groß, darunter die beiden Aktionen, darunter die Bereichsreiter mit
   Unterstreichung. Farbe tragen nur die Hauptaktion und der aktive Reiter. */
.portal-h1{color:var(--navy);font-size:27px;font-weight:700;margin:0 0 16px;
  letter-spacing:-.5px}
.pb{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border-radius:11px;font-size:14.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;transition:background .12s,box-shadow .12s}
.pb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.pb-blau{background:var(--ds-primary,#1f4f7a);color:#fff;box-shadow:0 1px 2px rgba(47,107,255,.28)}
.pb-blau:hover{background:#2559dc}
.pb-weiss{background:#fff;color:var(--ds-primary,#1f4f7a);border-color:#dbe4f2}
.pb-weiss:hover{background:#f5f9ff;border-color:#c3d4ee}
.portal-nav-a.on{color:var(--ds-primary,#1f4f7a);font-weight:600;border-bottom-color:var(--ds-primary,#1f4f7a)}
/* Feldbeschriftung */
.p-lbl{font-size:12px;font-weight:700;color:#41546e;margin-bottom:8px;
  letter-spacing:.03em}
.p-stern{color:#8a94a2;font-weight:600}
/* --- Aktionsleiste: ruhig, nach Zweck gruppiert -------------------------
   Grundton ist weiß mit feiner Kontur; farbig sind nur die zwei Aktionen,
   die den Beleg weiterbewegen (Hochladen/Import) und die Freigabe. Löschen
   bleibt dezent und wird erst beim Darüberfahren rot. */
/* Aktionsleiste: Gruppen als Spalten mit Beschriftung darüber, getrennt durch
   feine Linien – wie im Entwurf. Die Beschriftung über der Gruppe macht
   deutlich, worauf sich „Setzen" bezieht; inline stand sie leicht im Weg. */
.tb{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px 0}
.tb-block{display:flex;flex-direction:column;gap:9px;padding:0 18px}
.tb-block:first-child{padding-left:0}
.tb-block + .tb-block{border-left:1px solid #eef1f6}
.tb-end{margin-left:auto;padding-right:0}
.tb-grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-b{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border:1px solid #e0e5ec;border-radius:10px;background:#fff;color:#3a4453;
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  line-height:1.2;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.tb-b:hover{background:#f5f8ff;border-color:#b9c9ee;color:var(--ds-primary,#1f4f7a)}
.tb-b:active{background:#eef3ff}
.tb-sm{padding:7px 12px;font-size:13px}
.tb-ico{padding:8px 11px;font-size:15px}
.tb-primary{background:var(--ds-primary,#1f4f7a);border-color:var(--ds-primary,#1f4f7a);color:#fff}
.tb-primary:hover{background:#2559d8;border-color:#2559d8;color:#fff}
.tb-ok{color:#166b39;border-color:#bfe0cc}
.tb-ok:hover{background:#e9f7ee;border-color:#8fcaa6;color:#115a30}
.tb-quiet{color:#7b8695}
.tb-quiet:hover{background:#f2f5f9;border-color:#cfd8e3;color:#3a4453}
.tb-danger{color:#8a94a2}
.tb-danger:hover{background:#fdecea;border-color:#e6b3ad;color:#b0413b}
/* Die Gruppe „Für Auswahl setzen" bekommt keinen eigenen Kasten mehr – die
   Trennlinien der Gruppen genügen und die Leiste wirkt ruhiger. */
.tb-set{padding:0}
.tb-grp.tb-set + .tb-grp{border-left:1px solid #eaeef4}
.tb-lbl{font-size:10.5px;color:#a2abb8;font-weight:600;letter-spacing:.5px;
  white-space:nowrap;min-height:13px;line-height:1.2}
/* „Aktionen" und „Weitere" in normaler Schreibweise, die mittlere Gruppe in
   Kapitälchen – so steht es im Entwurf. */
.tb-set ~ .tb-lbl,.tb-block:nth-child(2) > .tb-lbl{font-variant:small-caps;
  text-transform:lowercase;letter-spacing:.7px}
.tb-set select{padding:9px 11px;border:1px solid #e0e5ec;border-radius:10px;
  font-size:13.5px;background:#fff;max-width:200px;color:#3a4453}
/* Panels: gleiche Rundung wie die Kopfkarte, ruhigere Beschriftung */
.panel{border-radius:14px;padding:16px 18px}
.panel-label{font-size:11px;letter-spacing:.05em;color:#9aa4b0;margin-bottom:12px;
  text-transform:none}
.filter-row select,.filter-row input{border:1px solid #e0e5ec;border-radius:10px;
  padding:10px 12px;font-size:13.5px;background:#fff}
/* Seiten-Stapel in der Belegupload-Vorschau (einzelne Seiten entfernbar) */
.preview-pages{width:100%;height:100%;overflow:auto;background:#eef1f5;padding:10px}
.sv-wrap{display:flex;flex-direction:column;gap:12px}
.sv-page{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:8px;box-shadow:0 1px 3px rgba(20,40,80,.10)}
.sv-page img{width:100%;height:auto;display:block;border-radius:4px}
.sv-page.sv-hidden img{opacity:.32;filter:grayscale(1)}
.sv-del{position:absolute;top:14px;right:14px;z-index:3;margin:0}
.sv-del button{background:rgba(255,255,255,.95);border:1px solid #dde3ec;border-radius:8px;
  padding:6px 12px;cursor:pointer;font-size:12.5px;font-weight:600;color:#b0413b;
  box-shadow:0 1px 3px rgba(20,40,80,.22)}
.sv-del button:hover{background:#fdecea;border-color:#e0b4b0}
.sv-page.sv-hidden .sv-del button{color:#1a7a3c}
.sv-badge{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  background:#b0413b;color:#fff;font-size:11px;font-weight:600;padding:3px 10px;
  border-radius:20px;white-space:nowrap}
.sv-cap{text-align:center;font-size:11.5px;color:#8a94a2;padding-top:6px}
/* Hinweiszeile für ausgeblendete Seiten in der Aufbereitung */
.hidden-info{display:flex;align-items:center;gap:10px;flex-basis:100%;
  background:#f4f7fb;border:1px dashed #cdd8e6;border-radius:8px;
  padding:7px 12px;margin:0 0 8px;font-size:12.5px;color:#5a6675}
.kore-warn{background:#fdecea;border:1px solid #f3b7b1;color:#96322b;border-radius:8px;
  padding:9px 12px;margin:8px 0;font-size:13px;line-height:1.45}
/* Fehlgeschlagene BMD-Übergabe: gilt für den ganzen Lauf, steht ganz oben und
   darf nicht mit einer Feldwarnung verwechselt werden. */
.uebergabe-warn{background:#fdecea;border:1px solid #e2665c;border-left:5px solid #b0413b;
  color:#8d2b24;border-radius:8px;padding:12px 14px;margin:0 0 14px;
  font-size:14px;line-height:1.5}
/* Rückfrage vor der Übermittlung: unsicher kontierte Belege.
   ABSICHTLICH NICHT ROT. Es ist noch nichts passiert und nichts kaputt —
   es ist eine Frage. Rot steht in dieser Anwendung für „ist schiefgegangen"
   (.uebergabe-warn) oder „geht so nicht" (.kore-warn); wer diese Frage
   genauso einfärbt, macht die beiden anderen wirkungslos. Deshalb dasselbe
   Gelb wie beim Plattenplatz-Wächter: Achtung, aber kein Schaden. */
.pruef-warn{background:#fff8e1;border:1px solid #e0b34a;border-left:5px solid #b8860b;
  color:#6b4e04;border-radius:8px;padding:12px 14px;margin:0 0 14px;
  font-size:14px;line-height:1.5;display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;justify-content:space-between}
.pruef-form{display:flex;gap:12px;align-items:center;margin:0}
.pruef-ab{color:#6b4e04;font-size:13px;font-weight:600}

/* Plattenplatz-Wächter. Gelb bei „warnung" (noch Zeit zum Aufräumen), rot bei
   „kritisch" – dann steht die Datenbank kurz vor dem Aus, wie am 10.08.2026. */
.platte-warn{background:#fff8e1;border:1px solid #e0b34a;border-left:5px solid #b8860b;
  color:#7a5a05;border-radius:8px;padding:12px 14px;margin:0 0 14px;
  font-size:14px;line-height:1.5}
.platte-warn.krit{background:#fdecea;border-color:#e2665c;border-left-color:#b0413b;
  color:#8d2b24}
.platte-bar{height:8px;border-radius:4px;background:#e9e4d4;overflow:hidden;
  margin:6px 0 2px;max-width:340px}
.platte-bar i{display:block;height:100%;background:#b8860b}
.platte-warn.krit .platte-bar{background:#f3d6d3}
.platte-warn.krit .platte-bar i{background:#b0413b}
/* Klienten ohne Kostenrechnung: KoSt/KTr-Spalten fallen weg (Felder bleiben als
   hidden erhalten, damit die Zeilen-Zuordnung beim Speichern stimmt). */
#acc-lines.no-kst .acc-line{grid-template-columns:minmax(110px,1.6fr) 74px 46px 102px 74px 122px 26px}
#acc-lines.no-ktr .acc-line{grid-template-columns:minmax(110px,1.6fr) 74px 46px 102px 74px 122px 26px}
#acc-lines.no-kst.no-ktr .acc-line{grid-template-columns:minmax(120px,1.8fr) 74px 102px 74px 122px 26px}
.acc-line.head{margin-bottom:2px}
.acc-line.head>div{font-size:clamp(12.5px,.78vw,16px);color:#9aa4b0;padding-left:3px}
.acc-line label{display:none}
.acc-line input{width:100%;height:40px;border:1px solid #e4e8ee;border-radius:9px;padding:0 10px;font-size:clamp(14.5px,.92vw,19px);background:#fbfcfd;transition:border-color .15s,background .15s;box-sizing:border-box}
.acc-line input:hover{border-color:#cfd6e0}
.acc-line input:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);background:#fff;box-shadow:0 0 0 3px rgba(46,117,182,.12)}
.acc-line input.ta-r{text-align:right;font-variant-numeric:tabular-nums}
.acc-line input.locked{background:#eef2f7;color:#5a6674;cursor:not-allowed}
.acc-line .b.sm{width:100%;height:34px;padding:0}
/* Lieferant-Typeahead (BMD-Kreditorensuche) */
.typeahead{position:relative}
.ta-list{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:30;background:#fff;border:1px solid #d7dde5;border-radius:10px;box-shadow:0 10px 30px rgba(20,40,80,.16);max-height:340px;overflow:auto;display:none}
.ta-opt{padding:10px 12px;font-size:clamp(13.5px,.82vw,17px);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2b3a49}
.ta-opt:hover,.ta-opt.kr-hi{background:#eaf3fb}
.ta-list.show{display:block}
.ta-opt b{color:var(--ds-primary,#1f4f7a);margin-right:6px;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.review3{grid-template-columns:1fr}.rev-preview{height:520px}}

/* ---- Belegverarbeitung ---- */
.bv-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.bv-head .page-title{margin:4px 0 12px}
.tab-pane{margin-top:4px}
.datei-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.datei-name{font-size:14px;color:#2b3a49}
.inv-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.inv-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:clamp(14.5px,.9vw,19px);color:#33404e}
.inv-item:hover{background:#f5f9fd}
.inv-item.sel{border-color:var(--blue);background:#eaf3fb}
.inv-no{background:#5B6672;color:#fff;border-radius:5px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.inv-item.sel .inv-no{background:var(--blue)}
.inv-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-amt{font-variant-numeric:tabular-nums;font-weight:600}
.inv-amt.green{color:var(--green-d)}
.navarr{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;
  text-decoration:none;color:#fff;background:var(--blue);font-size:20px;line-height:1;
  width:44px;height:44px;border-radius:12px;border:0;box-shadow:0 2px 6px rgba(46,117,182,.30);
  transition:transform .1s,filter .1s}
.navarr:hover{filter:brightness(1.08);transform:translateY(-1px)}
.navarr:active{transform:translateY(0)}
.navarr.off{background:#eef1f5;color:#c0c8d2;box-shadow:none;cursor:default;pointer-events:none}
.file-toolbar{display:flex;gap:8px;margin:6px 0 14px}
.datei-card2{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px}
/* Rückmeldung der Auto-Aufbereitung: wie viele Leerseiten ausgeblendet wurden. */
.hinweis-leer{background:#eaf6ec;border:1px solid #bcdcc4;color:#1f6b33;border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:13.5px}
.dc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dc-check{display:flex;align-items:center}
.dc-title{flex:1;font-size:clamp(14px,.95vw,18px);color:#2b3a49;min-width:200px}
.dc-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dc-actions form{display:flex;gap:6px;align-items:center;margin:0}
.split-form input{border:1px solid var(--line);border-radius:6px;padding:5px}
.pages{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
/* Große Seitenansicht: zwei Seiten nebeneinander füllen die Breite */
.page-thumb{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;
            width:calc(50% - 8px);min-width:300px;max-width:820px;
            box-shadow:0 1px 6px rgba(20,40,60,.10)}
.page-thumb img{width:100%;display:block}
.pt-cap{font-size:14px;color:var(--grey);text-align:center;padding:7px;background:#f6f8fb}
/* Werkzeuge je Seite (Schere / Papierkorb) – mittig, groß, wie Logisth.AI */
.pt-tools{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px;
          z-index:2;opacity:0;transition:opacity .15s}
.page-thumb:hover .pt-tools{opacity:1}
.pt-tools form{margin:0}
.pt-btn{width:64px;height:64px;border:1px solid #cfd8e2;border-radius:14px;background:rgba(255,255,255,.96);
        cursor:pointer;font-size:30px;line-height:1;box-shadow:0 3px 12px rgba(20,40,60,.28);transition:all .12s}
.pt-btn:hover{background:#fff;border-color:var(--ds-primary,#1f4f7a);transform:scale(1.08)}
.pt-btn.del:hover{border-color:#d9433b;color:#d9433b}
.pt-btn.show{border-color:#2f9e5c;color:#1c7a43}
.ro-grid .ok-check{color:#1c7a43;font-weight:600}
/* Eigenes breites Dropdown für SC/Filiale (Feld schmal, Liste lesbar) */
.combo-list{position:absolute;z-index:60;min-width:250px;max-height:300px;overflow:auto;
            background:#fff;border:1px solid #cfd8e2;border-radius:10px;
            box-shadow:0 10px 28px rgba(20,40,60,.20);padding:4px}
.combo-opt{padding:9px 13px;font-size:15px;cursor:pointer;border-radius:7px;white-space:nowrap;color:#33404e}
.combo-opt:hover{background:#eaf3fb}
.combo-opt b{color:var(--ds-primary,#1f4f7a);margin-right:7px;font-variant-numeric:tabular-nums}
/* × zum Leeren in Buchungszeilen-Feldern */
.cbx{position:relative}
.cbx input{padding-right:17px}
.cbx-x{position:absolute;right:3px;top:50%;transform:translateY(-50%);border:0;background:transparent;
       color:#b3bcc7;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.cbx-x:hover{color:#d9433b}
/* Steuer-Aufschlüsselung (Netto / Vorsteuer / Brutto je Satz) */
.tax-breakdown{margin:14px 0 2px}
.tb-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff}
.tb-tbl th,.tb-tbl td{padding:11px 16px;text-align:right;font-size:18px;color:#2b3a49;
  border-bottom:1px solid #eef1f5}
.tb-tbl thead th{background:#f4f7fb;color:#6b7684;font-size:14px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase}
.tb-tbl th:first-child,.tb-tbl td.tb-rate{text-align:left}
.tb-tbl td.tb-rate{font-weight:600;color:#41505f}
.tb-tbl td.tb-brutto{font-weight:700}
.tb-tbl tbody tr:last-child td{border-bottom:0}
.tb-tbl tfoot td{background:#f0f8f2;border-top:2px solid #cfe6d6;border-bottom:0;
  font-weight:800;font-size:19px;color:var(--green-d)}
.tb-tbl tfoot td.tb-rate{color:var(--green-d)}
/* Ausgeblendete Seite: gedimmt + immer sichtbares Einblenden-Werkzeug */
.page-thumb.hidden img{opacity:.32;filter:grayscale(.6)}
.page-thumb.hidden .pt-tools{opacity:1}
.pt-badge{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;
          background:#7a5200;color:#fff;font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;
          box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* Topbar: Stammdaten-Refresh */
.client-refresh{margin-left:8px;padding:4px 10px;border:1px solid #d0d5dd;border-radius:6px;
  background:#fff;color:#344054;font-size:13px;cursor:pointer}
.client-refresh:hover{background:#f2f4f7}

/* ==== Globale Schriftvergrößerung (Listen-/Upload-Ansicht & Chrome) ==== */
.grid th,.grid td{font-size:15.5px;padding:11px 12px}
.lk{font-size:15.5px}
.lk.bearb{font-size:17px}
.art{font-size:13px}
.konf{font-size:12.5px}
.status{font-size:12.5px}
.filter-row select,.filter-row input{font-size:15px;padding:10px 12px}
.b{font-size:15px;padding:10px 15px}
.b.sm{font-size:13px;padding:6px 10px}
.tab{font-size:16.5px;padding:11px 18px}
.pill{font-size:12.5px}
.table-info{font-size:13.5px}
.page-title{font-size:25px}
.panel-label{font-size:12.5px}
.topbar-right{font-size:15px}
.client-select{font-size:16px;padding:9px 15px}
.client-refresh{font-size:15px;padding:6px 12px}
.nav{font-size:clamp(16.5px,1.05vw,22px)}
.preview-head{font-size:15px}
.preview-empty{font-size:16px}
.file-list li{font-size:14.5px}

/* ==== Schriftvergrößerung Stufe 2 ==== */
.grid th,.grid td{font-size:17.5px;padding:13px 14px}
.lk{font-size:17.5px}
.lk.bearb{font-size:19px}
.art{font-size:14.5px}
.konf{font-size:14px}
.status{font-size:14px}
.filter-row select,.filter-row input{font-size:17px;padding:12px 14px}
.b{font-size:17px;padding:12px 18px}
.b.sm{font-size:14.5px;padding:7px 12px}
.tab{font-size:18.5px;padding:13px 20px}
.pill{font-size:14px}
.table-info{font-size:15px}
.page-title{font-size:29px}
.panel-label{font-size:14px}
.topbar-right{font-size:17px}
.client-select{font-size:18px;padding:11px 17px}
.client-refresh{font-size:17px;padding:8px 14px}
.nav{font-size:clamp(18.5px,1.2vw,24px)}
.preview-head{font-size:17px}
.preview-empty{font-size:18px}
.file-list li{font-size:16.5px}
.tab .pill{font-size:14px}

/* ==== Upload-Modal vergrößern ==== */
.modal-box{padding:34px 40px;width:820px}
.modal-head{font-size:27px;margin-bottom:22px}
.modal-head .x{font-size:26px}
.modal-box label{font-size:18px;margin:14px 0}
.modal-box select,.modal-box input{padding:15px 16px;font-size:20px;border-radius:10px}
.modal-box .dz-inner b,.dropzone div{font-size:19px}
.dropzone{padding:36px 20px}
.dz-icon{font-size:36px}
.dropzone .muted.small{font-size:15px}
.modal-actions{margin-top:22px;gap:12px}
.modal-actions .b{font-size:18px;padding:13px 22px}
.sample-row .b{font-size:17px;padding:11px 18px}
.modal-box .muted.small{font-size:16px}
.file-list li{font-size:17px}

/* ==== Schriftvergrößerung Stufe 3 ==== */
.grid th,.grid td{font-size:20px;padding:15px 16px}
.lk{font-size:20px}
.lk.bearb{font-size:21px}
.art{font-size:16px}
.konf{font-size:15.5px}
.status{font-size:15.5px}
.filter-row select,.filter-row input{font-size:19px;padding:13px 16px}
.b{font-size:19px;padding:14px 20px}
.b.sm{font-size:16px;padding:8px 13px}
.tab{font-size:21px;padding:14px 22px}
.pill{font-size:15.5px}
.table-info{font-size:17px}
.page-title{font-size:33px}
.panel-label{font-size:15.5px}
.topbar-right{font-size:19px}
.client-select{font-size:20px;padding:12px 19px}
.client-refresh{font-size:19px;padding:9px 16px}
.nav{font-size:clamp(21px,1.35vw,27px)}
.preview-head{font-size:19px}
.preview-empty{font-size:20px}
.file-list li{font-size:18px}

/* Upload-Modal Stufe 2 */
.modal-head{font-size:31px}
.modal-box label{font-size:20px}
.modal-box select,.modal-box input{font-size:22px;padding:16px 18px}
.modal-box .dz-inner b,.dropzone div{font-size:21px}
.dz-icon{font-size:42px}
.modal-actions .b{font-size:20px;padding:15px 24px}
.sample-row .b{font-size:19px}
.modal-box .muted.small,.dropzone .muted.small{font-size:17px}

/* ==== Seiten-Werkzeuge in den Zwischenraum ZWISCHEN die Seiten ==== */
.pages{gap:78px}
.page-thumb{overflow:visible}
.page-thumb img{border-radius:8px 8px 0 0}
.pt-tools{inset:auto;top:50%;right:-39px;left:auto;bottom:auto;
  transform:translateY(-50%);flex-direction:column;gap:14px;width:auto;height:auto;
  opacity:1}
.pt-btn{width:56px;height:56px;font-size:26px}
.page-thumb{width:calc(50% - 40px)}
.pt-tools{right:auto;left:100%;margin-left:11px}

/* ==== Schriftvergrößerung Stufe 4 ==== */
.grid th,.grid td{font-size:22px;padding:16px 18px}
.lk{font-size:22px}
.lk.bearb{font-size:23px}
.art{font-size:17px}
.konf{font-size:17px}
.status{font-size:17px}
.filter-row select,.filter-row input{font-size:21px;padding:14px 18px}
.b{font-size:21px;padding:15px 22px}
.b.sm{font-size:17px;padding:9px 14px}
.tab{font-size:23px;padding:15px 24px}
.pill{font-size:17px}
.table-info{font-size:18.5px}
.page-title{font-size:37px}
.panel-label{font-size:17px}
.topbar-right{font-size:21px}
.client-select{font-size:22px;padding:13px 21px}
.client-refresh{font-size:21px;padding:10px 18px}
.nav{font-size:clamp(23px,1.5vw,29px)}
.preview-head{font-size:21px}
.preview-empty{font-size:22px}
.file-list li{font-size:19.5px}

/* Dateien-Tab / Kontierung Texte */
.dc-title{font-size:20px}
.dc-title .muted{font-size:17px}
.konf-banner{font-size:clamp(17px,1vw,21px)}
.t-row{font-size:clamp(17px,.9vw,21px)}
.field label{font-size:clamp(17px,1vw,22px)}
.acc-head,.stamm-head{font-size:clamp(15px,.9vw,19px)}
.acc-line.head>div{font-size:clamp(15px,.85vw,18px)}
.tb-tbl th,.tb-tbl td{font-size:20px}
.tb-tbl thead th{font-size:15.5px}
.tb-tbl tfoot td{font-size:21px}

/* Upload-Modal Stufe 3 */
.modal-head{font-size:34px}
.modal-box label{font-size:22px}
.modal-box select,.modal-box input{font-size:24px;padding:17px 19px}
.modal-actions .b{font-size:22px;padding:16px 26px}

/* ==== Buchungszeilen: Gkonto schmaler, Rest breiter, höher, größer ==== */
.acc-line{grid-template-columns:minmax(110px,1.15fr) 78px 64px 64px 92px 70px 140px 40px;
  gap:10px;margin-bottom:11px;align-items:center}
.acc-line.head{margin-bottom:6px}
.acc-line.head>div{font-size:clamp(15px,.9vw,19px);font-weight:600;color:#7b8695;padding-left:4px}
.acc-line input{height:52px;font-size:clamp(16px,1.05vw,21px);border-radius:11px;padding:0 13px}
.acc-line input.ta-r{padding-right:24px}
.acc-line .b.sm{height:46px;font-size:20px;border-radius:11px}
.cbx-x{font-size:20px;right:6px}
.acc-head,.stamm-head{font-size:clamp(16px,1vw,21px);margin:16px 0 8px}

/* ==== Buchungszeilen: grauer Rahmen, weiße Felder, höher & größer ==== */
#acc-lines{background:#eceff3;border:1px solid #dbe1e9;border-radius:14px;
  padding:16px 16px 8px;margin-top:6px}
#acc-lines .acc-line.head>div{font-size:clamp(16px,.95vw,20px);font-weight:700;color:#6b7684}
#acc-lines .acc-line{margin-bottom:13px}
#acc-lines .acc-line input{height:58px;font-size:clamp(18px,1.15vw,23px);
  background:#fff;border:1px solid #cfd7e1;border-radius:12px;box-shadow:0 1px 2px rgba(20,40,60,.05)}
#acc-lines .acc-line input:focus{border-color:var(--ds-primary,#1f4f7a);box-shadow:0 0 0 3px rgba(46,117,182,.15)}
#acc-lines .acc-line input.locked{background:#eef2f7}
#acc-lines .acc-line .b.sm{height:50px;font-size:22px}
#acc-lines .cbx-x{font-size:22px}
.acc-head{font-size:clamp(18px,1.05vw,23px);font-weight:650;color:#41505f}
.add-split{width:38px;height:38px;font-size:20px}

/* ==== Stufe 5: Summe größer als alles + genereller Bump ==== */
.sum-line{font-size:clamp(24px,1.6vw,31px);padding:20px 24px;gap:26px}
.sum-line #sumNetto{font-size:1em}
.sum-edit{font-size:.95em;width:150px;padding:8px 12px}
.sum-badge{font-size:.6em}

#acc-lines .acc-line input{height:60px;font-size:clamp(19px,1.2vw,24px)}
#acc-lines .acc-line.head>div{font-size:clamp(17px,1vw,21px)}
.acc-head{font-size:clamp(19px,1.1vw,24px)}
.field label{font-size:clamp(18px,1.05vw,23px)}
.field input,.field select{font-size:clamp(18px,1.2vw,24px);padding:14px 16px}
.tb-tbl th,.tb-tbl td{font-size:21px}
.tb-tbl tfoot td{font-size:22px}
.konf-banner{font-size:clamp(18px,1.05vw,22px)}
.t-row{font-size:clamp(18px,.95vw,22px)}

/* ==== "Lieferant Rechnung" (aus Beleg gelesen) grau abheben ==== */
.stamm-ro{background:#eceff3;border:1px solid #dbe1e9;border-radius:14px;padding:8px 18px 16px;margin-top:6px}
.stamm-ro .stamm-head{color:#6b7684}
.stamm-ro .ro-grid{font-size:clamp(16px,1vw,20px)}
.stamm-ro .ro-grid td{padding:9px 8px;border-bottom:1px solid #dce1e8}
.stamm-ro .ro-grid td:first-child{width:150px;font-size:.9em}
.stamm-ro .ro-grid tr:last-child td{border-bottom:0}

/* ==== Dubletten-Warnung zuklappbar ==== */
details.dup-warn{padding:0}
details.dup-warn>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
details.dup-warn>summary::-webkit-details-marker{display:none}
details.dup-warn>summary b{font-size:clamp(16px,1vw,20px)}
.dup-count{flex-shrink:0;font-size:15px;font-weight:600;color:#8a6a00;background:#ffe9a8;
  border:1px solid #f0d071;border-radius:999px;padding:3px 12px;white-space:nowrap}
.dup-count::after{content:" ▾"}
details.dup-warn[open] .dup-count::after{content:" ▴"}
details.dup-warn>ul{margin:0;padding:0 16px 14px 34px;font-size:15.5px}

/* ==== Modernes Upload-Modal + Custom-Dropdowns mit Avataren ==== */
.modal-box{width:900px;padding:38px 44px;border-radius:20px;box-shadow:0 24px 70px rgba(15,30,50,.30)}
.modal-head{font-size:30px;margin-bottom:26px}
.modal-box .field-2{gap:20px}
.modal-box label{font-size:19px;font-weight:600;color:#41505f}

.mdd{position:relative;margin-top:8px}
.mdd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1.6px solid #e2e7ee;border-radius:12px;padding:11px 16px;cursor:pointer;
  font-size:19px;color:#26313d;font-family:inherit;text-align:left;min-height:64px}
.mdd-btn:hover{border-color:#c9d5e6}
/* Symbol vor „– bitte wählen –", solange nichts gewählt ist (Buch-Feld). */
.mdd-icon{width:22px;height:22px;flex:none;fill:none;stroke:#a6b1c0;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-right:2px}
.mdd-cur:not(.muted) ~ .mdd-icon,.mdd-btn:has(.mdd-cur:not(.muted)) .mdd-icon{display:none}
.mdd.open .mdd-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,117,182,.15)}
.mdd-err .mdd-btn{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,82,77,.18)}
.mdd-caret{color:#8794a3;font-size:16px;transition:transform .15s}
.mdd.open .mdd-caret{transform:rotate(180deg)}
.mdd-cur{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}
.mdd-cur.muted{color:#9aa4b0}
.mdd-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:#fff;
  border:1px solid #e2e7ee;border-radius:16px;box-shadow:0 16px 40px rgba(20,40,60,.20);
  padding:8px;max-height:300px;overflow:auto;display:none}
.mdd.open .mdd-list{display:block}
.mdd-search{width:100%;box-sizing:border-box;margin:0 0 8px;padding:9px 11px;border:1px solid #d7dee7;border-radius:10px;font-size:15px;outline:none}
.mdd-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,117,182,.12)}
.mdd-opt{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;cursor:pointer}
.mdd-opt:hover{background:#eff4fb}
.mdd-av{width:46px;height:46px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:16px;color:#fff;box-shadow:0 2px 6px rgba(20,40,60,.18)}
.av-ka{background:linear-gradient(135deg,#42b06e,#2e8a51)}
.av-er{background:linear-gradient(135deg,#3f86c7,var(--ds-primary,#1f4f7a))}
.av-ar{background:linear-gradient(135deg,#e0a04a,#C77A20)}
/* Periode: blaues Kachelsymbol statt Graugradient (wie im Entwurf). */
.av-per{background:var(--ds-primary,#1f4f7a);font-size:15px;border-radius:10px;
  box-shadow:0 1px 3px rgba(47,107,255,.3)}
.mdd-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.mdd-txt b{font-size:19px;color:#26313d}
.mdd-txt small{font-size:14.5px;color:#8794a3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==== Größere, moderne Auswahl-Checkboxen + Zeilen-Klick ==== */
.grid input[type=checkbox]{width:24px;height:24px;cursor:pointer;accent-color:var(--blue);margin:0}
.c-check{width:52px;text-align:center}
.grid tbody .row{cursor:pointer;transition:background .1s}
.grid tbody .row.previewing{box-shadow:inset 4px 0 0 var(--blue)}
/* angehakte Zeile: kräftiger Rahmen zur klaren Rückmeldung */
.grid tbody .row.sel td{border-top:1px solid #9cc2e6;border-bottom:1px solid #9cc2e6}
/* Dateien-Tab: Miniatur-Auswahl größer */
.dc-check input[type=checkbox]{width:26px;height:26px;cursor:pointer;accent-color:var(--blue)}

/* ==== Kassenbuch: Richtung (Ausgang = hellrot / Eingang = grün) ==== */
.sum-line.kasse-ausgang{background:linear-gradient(90deg,#fdeaea,#faf1f1);
  border-color:#eeb4b0;border-left-color:#d9433b;color:#7a2a25}
.sum-line.kasse-ausgang .sum-edit{border-color:#eeb4b0;color:#a4302a}
.sum-dir{font-weight:800;padding:5px 14px;border-radius:999px;font-size:.6em;
  letter-spacing:.02em;white-space:nowrap}
.sum-dir.aus{background:#f6d5d1;color:#a4302a}
.sum-dir.ein{background:#d7ecdd;color:#1c7a43}

/* Kassa-Richtung: Umschalter Ausgang/Eingang */
.sum-dir-toggle{display:inline-flex;gap:6px;margin-right:6px}
.sd-btn{border:1.5px solid #d7dee7;background:#fff;color:#8794a3;border-radius:999px;
  padding:6px 13px;font-size:.58em;font-weight:800;cursor:pointer;white-space:nowrap;font-family:inherit}
.sd-btn:hover{border-color:#b9c6d6}
.sd-btn.aus.on{background:#f6d5d1;border-color:#e2a39c;color:#a4302a}
.sd-btn.ein.on{background:#d7ecdd;border-color:#a9d4ba;color:#1c7a43}

/* Buch-Auswahl in der Belegliste + Import-Hinweis */
.art-sel{border:1px solid #d7dee7;border-radius:8px;padding:6px 8px;font-size:15px;
  background:#fff;font-weight:700;color:#41505f;cursor:pointer;font-family:inherit}
.art-sel:hover{border-color:var(--ds-primary,#1f4f7a)}
.hinweis-warn{background:#fff3cd;border:1px solid #ffd666;border-left:5px solid #e8a400;
  border-radius:10px;padding:13px 16px;margin:0 0 14px;color:#7a5200;font-size:17px}

/* Modernes Inline-Dropdown im Formular (Währung/Buch in der Belegverarbeitung) */
.mdd-inline{margin-top:0;width:100%}
.mdd-inline .mdd-btn{min-height:52px;padding:9px 14px;font-size:clamp(16px,1vw,20px);border-radius:11px}
.mdd-inline .mdd-av{width:38px;height:38px;font-size:19px;border-radius:11px}
.mdd-inline .mdd-txt b{font-size:clamp(16px,1vw,20px)}
.av-cur{background:linear-gradient(135deg,#5b6b86,#38455c);color:#fff;font-weight:800}

/* Dublettenmarkierung in der Belegliste */
.dup-flag{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:700;color:#8a5a00;
  background:#fff3cd;border:1px solid #ffd666;border-radius:999px;padding:2px 10px;white-space:nowrap;cursor:pointer}
.dup-flag:hover{background:#ffe9a8}

/* Suchfeld mit Leeren-Button (×) */
.such-wrap{position:relative;flex:1;min-width:180px;display:flex}
.such-wrap #fSuche{flex:1;padding-right:38px}
.such-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:#e6ebf1;
  color:#5a6674;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1}
.such-x:hover{background:#d9e0e8;color:#26313d}

/* ---------- Login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#eef4fb,#f7f9fc);margin:0}
.login-card{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:52px 56px;width:min(560px,92vw);box-shadow:0 20px 60px rgba(20,50,90,.16)}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.login-brand .brand-logo{width:78px;height:66px}
.login-brand .brand-txt{font-size:30px}
.login-card h1{color:var(--navy);font-size:34px;margin:10px 0 26px}
.login-card label{display:block;font-size:17px;color:#40566f;margin:0 0 20px}
.login-card input{width:100%;box-sizing:border-box;margin-top:9px;padding:16px 16px;
  border:1px solid var(--line);border-radius:12px;font-size:18px}
.login-btn{width:100%;justify-content:center;padding:16px;font-size:19px;margin-top:8px}
.login-err{background:#fdecec;border:1px solid #f3c0c0;color:#a12a2a;
  padding:13px 16px;border-radius:11px;font-size:16px;margin-bottom:18px}
.login-hint{color:var(--muted);font-size:15px;margin:22px 0 0;text-align:center}
.nav-link-plain{color:var(--navy);text-decoration:none;font-size:15px;
  padding:6px 11px;border-radius:7px}
.nav-link-plain:hover{background:#eef3f9}

/* ---------- Klienten-Portal ---------- */
/* Kein fester Deckel mehr: Mit 1500px blieb bei der herunterskalierten
   Oberfläche nur ein schmaler Streifen übrig, in dem sich Liste und Vorschau
   gegenseitig die Breite wegnahmen. Jetzt nutzt das Portal die volle Fensterbreite. */
.portal-wrap{max-width:none;margin:0;padding:22px 28px}
/* Vorschau schmaler: Mit 700px blieb der Liste so wenig Platz, dass die
   Statusspalte unter die Vorschau rutschte und abgeschnitten war. */
.portal-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
/* Feste Spaltenbreiten: Der Dateiname wird gekürzt, alles andere bleibt lesbar. */
.p-tab{table-layout:fixed;width:100%}
.p-tab th:nth-child(1),.p-tab td:nth-child(1){width:32%}
.p-tab th:nth-child(2),.p-tab td:nth-child(2){width:7%}
.p-tab th:nth-child(3),.p-tab td:nth-child(3){width:11%}
.p-tab th:nth-child(4),.p-tab td:nth-child(4){width:13%}
.p-tab th:nth-child(5),.p-tab td:nth-child(5){width:16%}
.p-tab th:nth-child(6),.p-tab td:nth-child(6){width:16%}
.p-tab th:nth-child(7),.p-tab td:nth-child(7){width:7%;text-align:right}
.p-akt{white-space:nowrap}
.p-akt a{text-decoration:none;padding:0 3px;font-size:15px;color:var(--blue,#3b5bdb)}
.p-akt a:hover{color:var(--navy,#1e2a44)}
.p-tab td.p-file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Datum und Status nie umbrechen oder abschneiden. */
.p-tab td:nth-child(5),.p-tab td:nth-child(6){white-space:nowrap}
/* Kopfzeile und Filter der Belegliste */
.p-kopf{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px}
.p-filter{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.p-chip{border:0.5px solid #d8dee6;background:#fff;border-radius:20px;padding:5px 13px;
  font-size:12.5px;cursor:pointer;color:#3a3f47}
.p-chip:hover{background:#f5f9fd}
.p-chip.aktiv{background:var(--navy,#1e2a44);border-color:var(--navy,#1e2a44);color:#fff;font-weight:600}
.p-filter input[type=search]{flex:1;min-width:150px;font:inherit;font-size:12.5px;
  padding:6px 10px;border:1px solid #d8dee6;border-radius:var(--radius,8px)}
/* Reiter der Belegliste: Arbeitsvorrat und Archiv sind zwei getrennte Ansichten
   (Serverseite), damit die offenen Belege nicht in hunderten verbuchten
   untergehen. */
.p-reiter{display:flex;gap:22px;border-bottom:1px solid #e3e7ee;margin:0 0 14px}
.p-reiter-t{display:inline-flex;align-items:center;gap:7px;padding:8px 2px 9px;
  font-size:13.5px;color:#6b7480;text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.p-reiter-t:hover{color:var(--navy,#1e2a44)}
.p-reiter-t.an{color:var(--navy,#1e2a44);font-weight:600;
  border-bottom-color:var(--navy,#1e2a44)}
.p-reiter-n{background:#eef1f6;color:#5a6472;border-radius:20px;padding:1px 8px;
  font-size:11.5px;font-weight:600;line-height:1.6}
.p-reiter-t.an .p-reiter-n{background:var(--navy,#1e2a44);color:#fff}
/* Sortierbare Spaltenkoepfe */
.p-sort{padding:0}
.p-sort a{display:flex;align-items:center;gap:5px;color:inherit;text-decoration:none;
  padding:7px 8px;white-space:nowrap}
.p-sort a:hover{color:var(--navy,#1e2a44)}
.p-pfeil{font-size:9.5px;opacity:.35;line-height:1}
.p-sort.an{color:var(--navy,#1e2a44);font-weight:600}
.p-sort.an .p-pfeil{opacity:.9}
/* Blaetterleiste */
.p-blatt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:12px 0 2px;font-size:12.5px}
.p-blatt-nav,.p-blatt-info{display:flex;align-items:center;gap:5px}
.p-blatt-nav a,.p-blatt-info a{min-width:26px;text-align:center;padding:4px 7px;
  border:1px solid #e0e5ec;border-radius:6px;color:#4a5260;text-decoration:none}
.p-blatt-nav a:hover,.p-blatt-info a:hover{background:#f2f6fb;border-color:#c9d3e0}
.p-blatt-nav .an,.p-blatt-info .an{min-width:26px;text-align:center;padding:4px 7px;
  border:1px solid var(--navy,#1e2a44);border-radius:6px;
  background:var(--navy,#1e2a44);color:#fff;font-weight:600}
.p-blatt-nav .aus{min-width:26px;text-align:center;padding:4px 7px;color:#c2c8d2}
.p-blatt-info .muted{margin-right:4px}

/* ---------------------------------------------------- Mandantenverwaltung
   Voll­breite Liste mit Filter, Suche und Massenauswahl. Ausgewählt wird je
   Klient (Kopfzeile) – die weiteren Buchungsjahre hängen daran. */
.m-leiste{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.m-tabs{display:flex;gap:4px;margin-left:auto}
.m-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid #e0e5ec;border-radius:20px;font-size:12.5px;color:#4a5260;
  text-decoration:none}
.m-tab:hover{background:#f2f6fb}
.m-tab.an{background:var(--navy,#1e2a44);border-color:var(--navy,#1e2a44);
  color:#fff;font-weight:600}
.m-n{background:#eef1f6;color:#5a6472;border-radius:20px;padding:0 7px;
  font-size:11px;font-weight:600}
.m-tab.an .m-n{background:rgba(255,255,255,.22);color:#fff}
.m-suche{display:flex;gap:6px;align-items:center}
.m-suche input[type=search]{font:inherit;font-size:12.5px;padding:6px 10px;
  border:1px solid #d8dee6;border-radius:var(--radius,8px);min-width:220px}
.m-massen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:10px;padding-bottom:10px}
.m-alle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:#4a5260;cursor:pointer}
/* Spaltenraster – eine Definition für Kopf und Zeilen, damit nichts verrutscht. */
.m-kopf,.m-zeile{display:grid;align-items:center;gap:8px;
  grid-template-columns:28px minmax(180px,2fr) 92px 92px minmax(120px,1fr) 58px
                        minmax(150px,1.2fr) auto}
.m-kopf{font-size:11px;letter-spacing:.05em;color:#9aa4b0;padding:0 10px 6px}
.m-zeile{background:#fff;border:1px solid var(--line,#e3e7ee);
  border-radius:8px;padding:8px 10px;margin-bottom:8px}
.m-zeile.aus{background:#f4f5f7;opacity:.72}
.m-zeile.unter{margin-left:26px}
.m-zeile input{width:100%;min-width:0}
.m-c-akt{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.m-jahre{margin:-4px 0 10px 26px}
.m-jahre>summary{cursor:pointer;padding:2px 0;list-style:revert}
.m-jahre[open]>summary{margin-bottom:6px}
/* Höhe NICHT aus vh: unter body{zoom} liefert vh je nach Browser einen anderen
   Wert, und die Vorschau wurde höher als das Fenster – die Seite ließ sich
   danach weit ins Leere scrollen. Der Startwert ist bewusst klein, das Skript
   misst die tatsächliche Unterkante und korrigiert (siehe fitPreview). */
.portal-split .preview-pane{position:sticky;top:16px;height:420px}
.portal-split .preview-body{background:#e9edf2}
.portal-split .preview-body iframe{background:#fff}
/* Bild-Vorschau: Seiten als bildschirmbreite Bilder (nichts wird abgeschnitten). */
.pv-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:12px;display:flex;flex-direction:column;gap:12px;align-items:center}
.pv-page{width:100%;max-width:100%;height:auto;display:block;background:#fff;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.pv-load{color:#8a94a2;font-size:14px;padding:24px 16px;text-align:center}
@media(max-width:1250px){ .portal-split{grid-template-columns:minmax(0,1fr) 560px} }
@media(max-width:960px){ .portal-split{grid-template-columns:1fr} }
.p-tab tbody tr{cursor:pointer}
.p-tab tbody tr:hover{background:#f5f9fd}
.p-tab tbody tr.previewing{background:#eaf3fb}
@media(max-width:1000px){ .portal-split{grid-template-columns:1fr} .portal-split .preview-pane{position:static;height:calc(70 * var(--vhpx, 1vh))} }
/* Kopfleiste als eigene weiße Karte über der Seite */
.portal-top{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 22px;margin-bottom:22px}
/* Hilfe: runder Knopf, führt zur Kanzlei-Adresse */
.portal-hilfe{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;border:1px solid #dbe4f2;
  color:#8a94a2!important;font-size:13px;font-weight:600;text-decoration:none!important}
.portal-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-bottom:20px}
.portal-drop.drag{background:#eef4fb;border-color:var(--blue)}
/* Hinweis auf die Import-Adresse */
.portal-mail{display:flex;align-items:center;gap:12px;background:#f2faf5;
  border:1px solid #cfe8da;border-radius:11px;padding:12px 14px;font-size:13.5px;
  color:#3f6b52;margin-top:16px;line-height:1.5}
.portal-mail code{background:#fff;padding:3px 8px;border-radius:6px;
  border:1px solid #cfe8da;color:#2f5e46;font-size:12.5px}
.p-tab{border-collapse:collapse;width:100%}
.p-tab th,.p-tab td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.p-tab th{color:#5a6674;font-weight:600;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase}
.p-nowrap{white-space:nowrap}
.p-file{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-badge{padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.p-neu{background:#eef4fb;color:#2f5d92}.p-pruef{background:#fff6e9;color:#a9711b}
.p-ok{background:#eef8f0;color:#2f7d4f}
/* Klientenansicht: Firmenname als reine Anzeige, ohne Auswahlmöglichkeit. */
.client-fixed{font-weight:600;font-size:14px;color:var(--navy);padding:6px 10px}

/* Rückfrage in der Belegverarbeitung (Kanzleiseite) */
.rf-box{margin-top:6px;border:1px solid #f0d4dc;border-radius:8px;background:#fffafb;
  padding:9px 10px}
.rf-kopf{font-size:12px;font-weight:700;color:#a3364e;margin-bottom:4px}
.rf-text{font-size:12px;color:#3a3f47;white-space:pre-wrap;margin-bottom:6px}
.rf-wartet{font-size:11px;color:#8a8f98;font-style:italic;margin-bottom:6px}
.rf-antwort{font-size:12px;color:#2f5d92;background:#f4f8fd;border-radius:6px;
  padding:6px 8px;margin-bottom:6px}
.rf-box textarea{width:100%;box-sizing:border-box;font:inherit;font-size:12px;
  padding:6px 8px;border:1px solid #d8dee6;border-radius:6px;resize:vertical;
  margin-bottom:6px}

/* Rückfrage an den Mandanten – bewusst auffällig, aber nicht alarmierend rot:
   es ist eine Bitte um Mithilfe, kein Fehler. */
.p-frage{background:#fdf0f3;color:#a3364e}
.p-frage-zeile > td{padding:0 0 10px!important;background:transparent!important}
.p-frage-box{border:1px solid #f0d4dc;border-left:3px solid #c2546c;border-radius:8px;
  background:#fffafb;padding:10px 12px;margin:0 2px}
.p-frage-kopf{font-size:12px;font-weight:600;color:#a3364e;margin-bottom:3px}
.p-frage-text{font-size:13px;color:#3a3f47;white-space:pre-wrap;margin-bottom:8px}
.p-antwort{font-size:13px;color:#2f5d92;background:#f4f8fd;border-radius:6px;padding:8px 10px}
.p-antwort-form{display:flex;gap:8px;align-items:flex-start}
.p-antwort-form textarea{flex:1;font:inherit;font-size:13px;padding:6px 8px;
  border:1px solid #d8dee6;border-radius:6px;resize:vertical}
.p-antwort-form button{padding:7px 14px;border:0;border-radius:6px;cursor:pointer;
  background:#c2546c;color:#fff;font-weight:600;font-size:13px;white-space:nowrap}
.p-antwort-form button:hover{background:#a3364e}

/* ==== Globale UI-Skalierung ====
   Frühere "Schriftvergrößerung Stufe 1–4" summieren sich und lassen die
   Oberfläche auf großen Monitoren zu groß wirken. Diese eine Zeile skaliert
   die gesamte App gleichmäßig herunter (wie ein fester Browser-Zoom).
   Wert anpassen: 0.75 = kleiner, 0.9 = größer. */
/* body{zoom:.50}  -> ersetzt durch geraeteunabhaengige ui-scale-normalize (siehe <head>) */

/* ============================================================================
   Modernes Farbkonzept „RT-Beleg AI" – eigenständig, bewusst anders als
   Logisth.AI: dunkle Indigo-Sidebar, Indigo als Primärfarbe, Smaragd/Rose als
   Akzente. Steht am Ende, damit es die früheren Werte überschreibt.
   ============================================================================ */
:root{
  --navy:#1e293b;        /* Überschriften/Text (Slate-800) */
  --blue:#4f46e5;        /* Primär: Indigo-600 */
  --blue2:#4338ca;       /* Primär, dunkler (Hover) */
  --green:#10b981; --green-d:#059669;   /* Smaragd */
  --red:#f43f5e;         /* Rose */
  --orange:#d97706;      /* Amber */
  --grey:#64748b;        /* Slate-500 */
  --line:#e7eaf3;        /* Rahmen/Trennlinien */
  --bg:#f5f6fb;          /* App-Hintergrund */
  --active:#eef0ff;      /* aktive Zeile im hellen Bereich (Indigo-50) */
  --sidebar:#0f172a;     /* Sidebar dunkel (Slate-900) */
  --side-2:#1e1b4b;      /* Sidebar-Verlauf unten (Indigo-Nacht) */
  --side-txt:#c3cbdc;    /* Sidebar-Text */
  --side-accent:#818cf8; /* Sidebar-Akzent (Indigo-300) */
}
body{background:var(--bg)}

/* --- Dunkle, moderne Sidebar --- */
.sidebar{background:linear-gradient(180deg,var(--sidebar) 0%,var(--side-2) 100%);
  border-right:0;box-shadow:2px 0 22px rgba(15,23,42,.20)}
.sidebar .brand-txt{color:#fff}
.sidebar .brand-txt strong{color:var(--side-accent)}
.sidebar .brand-logo line{stroke:#fff}
.sidebar .brand-logo text{fill:#fff}
.nav{color:var(--side-txt)}
.nav span{color:#8891ad}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.active{background:rgba(129,140,248,.18);border-left-color:var(--side-accent);color:#fff}
.nav.active span{color:var(--side-accent)}
.nav.disabled{color:#5a6488}
.nav.disabled span{color:#454f6b}
.nav-sep{color:#828cab}

/* --- Topbar etwas frischer --- */
.topbar{box-shadow:0 1px 0 var(--line),0 6px 18px rgba(30,41,59,.04)}
.client-select{border-color:var(--blue);color:var(--blue);background:#fff}
.admin-badge{background:#eef0ff;color:var(--ds-primary,#1f4f7a);border-color:#c7cbff}

/* --- Buttons: sanfte Indigo/Smaragd/Rose-Verläufe, modern gerundet --- */
.b{border-radius:9px;box-shadow:0 1px 2px rgba(30,41,59,.10)}
.b-blue,.tab.active .pill,.pill.aktiv{background:linear-gradient(180deg,#6366f1,var(--ds-primary,#1f4f7a))}
.b-blue:hover{background:linear-gradient(180deg,var(--ds-primary,#1f4f7a),#4338ca)}
.b-green{background:linear-gradient(180deg,#10b981,#059669)}
.b-red{background:linear-gradient(180deg,#fb7185,#f43f5e)}
.b-grey{background:#94a3b8}
.b-icon{background:linear-gradient(180deg,#6366f1,var(--ds-primary,#1f4f7a))}
.b-light{background:#eef0ff;color:var(--blue);border-color:#c7cbff}
.b-blue,.b-green,.b-red,.b-icon{color:#fff}

/* --- Akzent-Details --- */
a{color:var(--blue)}
.pbar-fill{background:linear-gradient(90deg,#6366f1,var(--ds-primary,#1f4f7a))}
.tab.active{color:var(--blue)}

/* --- Analyse: flüssig mit der Fensterbreite skalieren (clamp = wächst auch auf
   großen/Retina-Screens, wo Media-Query-Pixel klein sind). Höhere Spezifität
   (.content …) übersteuert die festen px-Werte in den Analyse-Vorlagen. --- */
.content .an-tbl{font-size:clamp(18px, 0.45vw + 13px, 24px)}
.content .an-tbl th{font-size:clamp(15px, 0.22vw + 11px, 18px)}
.content .an-tbl td{padding:clamp(8px, 0.24vw + 6px, 13px) clamp(10px, 0.32vw + 6px, 16px)}
.content .an-tbl .an-konto{font-size:inherit}
.content .op-tbl{font-size:clamp(18px, 0.45vw + 13px, 24px)}
.content .op-tbl td{padding:clamp(6px, 0.2vw + 4px, 11px) clamp(9px, 0.3vw + 6px, 15px)}
.content .an-tab{font-size:clamp(15.5px, 0.25vw + 11px, 19px)}
.content .an-seg-btn{font-size:clamp(14.5px, 0.2vw + 10px, 17.5px)}
.content .an-suche,.content .op-suche,.content .an-stichtag input[type=date]{font-size:clamp(14.5px, 0.22vw + 10px, 17.5px)}
.content .an-mandant{font-size:clamp(12.5px, 0.16vw + 9px, 15px)}
.content .an-title,.content .op-det-title{font-size:clamp(16.5px, 0.35vw + 11px, 21px)}
.content .op-title,.content .page-title{font-size:clamp(19px, 0.5vw + 13px, 27px)}

/* --- Analyse-Kopf (Tabs + Filterleiste) unter der fixen Topbar fixieren, damit
   beim Scrollen der langen Tabellen die Steuerung sichtbar bleibt. Die Topbar ist
   60px hoch; die Tabs kleben darunter, die Filterleiste unter den Tabs. --- */
.content .an-head{position:sticky;top:60px;z-index:16;background:var(--bg);padding-top:4px}
.content .an-bar{position:sticky;top:106px;z-index:15}
/* --- Modernere Analyse-Steuerleiste (global, überschreibt die Vorlagen) --- */
.content .an-tabs{gap:2px;border-bottom:1px solid #e6ebf1}
.content .an-tab{border-radius:10px 10px 0 0;transition:background .12s,color .12s}
.content .an-tab:hover{background:#f3f6fb}
.content .an-tab.active{background:#f3f7ff}
.content .an-bar{
  background:#fbfcfe;border:1px solid #e9edf3;border-radius:14px;
  padding:10px 12px;gap:8px 14px;box-shadow:0 1px 2px rgba(20,40,80,.04);
  align-items:center}
.content .an-seg{gap:3px;align-items:center}
.content .an-seg-lbl{font-weight:700;color:#9aa4b2;letter-spacing:.6px}
.content .an-seg-btn{border-radius:9px;padding:6px 12px;font-weight:500;
  transition:background .12s,color .12s,box-shadow .12s}
.content .an-seg-btn.sm{padding:5px 9px}
.content .an-seg-btn:hover{background:#eaf1ff;color:var(--ds-primary,#1f4f7a)}
.content .an-seg-btn.on{background:var(--ds-primary,#1f4f7a);color:#fff;font-weight:600;
  box-shadow:0 2px 6px rgba(47,107,255,.30)}
/* Segmentierte Umschalter (Kumuliert/Monatlich, mit/ohne EB): heller Track, weiße Pille */
.content .seg-track{background:#eef1f6;border-radius:11px;padding:3px;gap:2px}
.content .seg-track .an-seg-btn{padding:7px 15px;font-weight:600}
.content .seg-track .an-seg-btn:hover{background:rgba(255,255,255,.6)}
.content .seg-track .an-seg-btn.on{background:#fff;color:var(--ds-primary,#1f4f7a);
  box-shadow:0 1px 3px rgba(20,40,80,.16)}
.content .an-suche,.content .op-suche{border:1px solid #e3e8ef;border-radius:10px;
  background:#fff;transition:border-color .12s,box-shadow .12s}
.content .an-suche:focus,.content .op-suche:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);
  box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.content .an-csv{border-radius:10px;font-weight:600;transition:border-color .12s,color .12s,background .12s}
.content .an-csv:hover{background:#f3f7ff;border-color:var(--ds-primary,#1f4f7a);color:var(--ds-primary,#1f4f7a)}

/* --- Analyse-Tabellen: kompakt, dezent, edel (Saldenliste/Kontenblatt/Bilanz/G&V/OP) --- */
.content .an-tbl,.content .op-tbl{
  border-collapse:separate;border-spacing:0;border:1px solid #edf1f6;
  border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(20,40,80,.04)}
.content .an-tbl thead th,.content .op-tbl thead th{
  position:sticky;top:0;z-index:2;background:#fbfcfe;color:#9aa5b4;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  border-bottom:1px solid #eef2f7}
.content .an-tbl tbody td{border-bottom:1px solid #f2f5f9}
.content .an-tbl .an-row td{transition:background .1s}
.content .an-tbl .an-row:hover td{background:#f8fafd}
/* Klassen-/Gruppenzeilen: dezent hervorgehoben, feiner Akzentstreifen */
.content .an-tbl .an-grp td{
  background:#f6f8fc;color:#3f5372;font-weight:700;
  border-top:1px solid #eaeff6;border-bottom:1px solid #eaeff6}
.content .an-tbl .an-grp td:first-child{box-shadow:inset 3px 0 0 #b9c8e6}
.content .an-tbl .an-konto{font-weight:600;color:#3f6fd6}
.content .an-tbl .an-konto:hover{text-decoration:underline}
.content .an-tbl td.neg,.content .op-tbl td.neg{color:#cf5b52}
.content .an-tbl td.muted,.content .op-tbl td.muted{color:#a4adba}
/* Summenzeile: dezent statt vollflächig dunkel */
.content .an-tbl .an-sum td{
  background:#f4f7fb;color:var(--ds-primary,#1f4f7a);font-weight:700;
  border-top:1.5px solid #dbe4f0;border-bottom:none}
.content .an-tbl .an-sum td.muted{color:#8494ad}
.content .an-tbl .an-sum td.neg{color:#cf5b52}
.content .an-tbl tbody tr:last-child td{border-bottom:none}

/* --- PDF/Druck-Button + Druckansicht für Analyse --- */
.an-print{padding:8px 14px;background:#fff;color:#42506a;border:1px solid #dde3ec;
  border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.an-print:hover{border-color:var(--ds-primary,#1f4f7a);color:var(--ds-primary,#1f4f7a);background:#f3f7ff}
.print-head{display:none}
.print-head .ph-title{font-size:20px;font-weight:700;color:var(--ds-primary,#1f4f7a)}
.print-head .ph-sub{font-size:12px;color:#555;margin-top:2px}
@media print{
  .sidebar,.topbar{display:none !important}
  .app{display:block !important}
  .content{padding:0 !important;overflow:visible !important}
  .an-tabs,.an-bar,.an-suche,.op-suche,.an-print,.an-csv,.an-stichtag,
  .kb-preview,.op-panel-head,.op-det-empty{display:none !important}
  .an-scroll,.op-scroll{overflow:visible !important;max-height:none !important;box-shadow:none !important}
  .op-split{display:block !important;margin:0 !important}
  .op-split.shifted{margin-right:0 !important}
  .op-panel{border:none !important;box-shadow:none !important;margin-bottom:10px}
  .an-tbl,.op-tbl{font-size:10px !important;box-shadow:none !important}
  .an-tbl th,.op-tbl th{position:static !important}
  a{color:#000 !important;text-decoration:none !important}
  .print-head{display:block !important;margin-bottom:8px}
  @page{size:A4 landscape;margin:12mm}
}

/* Lupe im Suchfeld der Filterzeile (Entwurf). Das ✕ erscheint erst, wenn
   wirklich etwas eingegeben ist – sonst stehen zwei Symbole nebeneinander. */
.such-lupe{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:#a2abb8;stroke-width:1.8;
  stroke-linecap:round;pointer-events:none}
.such-wrap:has(#fSuche:placeholder-shown) .such-x{display:none}
.such-wrap:not(:has(#fSuche:placeholder-shown)) .such-lupe{display:none}

/* --- Buchungssuche ---------------------------------------------------- */
/* Festes Raster statt auto-fit: nur so stehen die Felder in allen Zeilen
   bündig untereinander. Bei auto-fit springt die Spaltenzahl mit der
   Fensterbreite, und die zweite Zeile sitzt dann versetzt zur ersten. */
.bu-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px 18px;align-items:end}
.bu-raster label{display:flex;flex-direction:column;gap:7px;font-size:14px;
  color:#5b6472;min-width:0}
.bu-raster input,.bu-raster select{border:1px solid #dfe4ec;border-radius:10px;
  padding:0 14px;font:inherit;font-size:15px;background:#fff;color:#243040;
  min-width:0;height:46px;box-sizing:border-box}
.bu-raster input::placeholder{color:#a7b0bd;font-size:14.5px}
.bu-raster input:focus,.bu-raster select:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);
  box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.bu-weit{grid-column:span 2}
.bu-breit{grid-column:span 3}
.bu-knoepfe .b{height:44px;padding:0 24px;font-size:15px;
  display:inline-flex;align-items:center;border-radius:10px}
@media(max-width:1420px){
  .bu-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .bu-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bu-weit,.bu-breit{grid-column:span 2}
}

/* --- Auswahlfeld (eigenes Aufklappmenü) -------------------------------
   Das Auswahlfeld des Browsers lässt sich kaum gestalten: Schrift, Höhe und
   die aufgeklappte Liste bestimmt das Betriebssystem. Deshalb ein eigenes.
   Der Wert liegt in einem versteckten Feld – das Formular verschickt ihn
   also ganz normal, auch wenn JavaScript ausfällt. */
.dd{position:relative;min-width:0}
.dd-knopf{width:100%;height:46px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;border:1px solid #dfe4ec;
  border-radius:10px;padding:0 14px;font:inherit;font-size:15px;
  background:#fff;color:#243040;cursor:pointer;text-align:left;
  box-sizing:border-box}
.dd-knopf:hover{border-color:#cdd6e4}
.dd-knopf:focus-visible{outline:none;border-color:var(--ds-primary,#1f4f7a);
  box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.dd.offen .dd-knopf{border-color:var(--ds-primary,#1f4f7a);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.dd-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-pfeil{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:#8b95a5;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s ease}
.dd.offen .dd-pfeil{transform:rotate(180deg)}
.dd-liste{position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid #e6eaf0;border-radius:12px;padding:5px;
  box-shadow:0 16px 38px rgba(20,40,80,.14);max-height:300px;overflow:auto;
  display:none}
.dd.offen .dd-liste{display:block}
.dd-opt{display:flex;align-items:center;gap:9px;padding:11px 12px;
  border-radius:9px;font-size:15px;color:#243040;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-opt:hover,.dd-opt.hell{background:#f1f5ff}
.dd-opt.gewaehlt{color:var(--ds-primary,#1f4f7a);font-weight:600}
.dd-haken{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:var(--ds-primary,#1f4f7a);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.dd-opt.gewaehlt .dd-haken{visibility:visible}
.bu-knoepfe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.bu-knoepfe .muted{flex:1;min-width:220px;line-height:1.45}
.bu-tab td,.bu-tab th{font-size:14px;padding-top:11px;padding-bottom:11px}

/* Belegvorschau NEBEN der Trefferliste ---------------------------------
   Ein Fenster über der Liste verdeckt genau das, was man vergleichen will:
   Betrag, Konto, Datum. Deshalb rückt die Tabelle zur Seite. */
.bu-split{display:flex;gap:14px;align-items:stretch}
.bu-liste{flex:1 1 auto;min-width:0}
.bu-vorschau{flex:0 0 62%;min-width:520px;max-width:1200px;
  position:sticky;top:14px;height:calc(100vh - 118px);background:#fff;
  border:1px solid #e6eaf0;border-radius:14px;display:flex;
  flex-direction:column;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,40,80,.08)}
.bu-vorschau[hidden]{display:none}
/* Bei offener Vorschau treten die Spalten zurück, die man dabei ohnehin
   nicht liest. Sonst nimmt die Tabelle Platz weg, den der Beleg braucht –
   und genau darum geht es beim Vergleichen. */
.bu-split.offen .sp-text,
.bu-split.offen .sp-gk,
.bu-split.offen .sp-nr{display:none}
.bu-split.offen .bu-liste{max-height:calc(100vh - 118px);overflow:auto}
/* Das Auge in der Trefferzeile. */
.vs-auge{width:34px;height:30px;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;padding:0}
.vs-auge svg{width:20px;height:20px;fill:none;stroke:#8b95a5;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.vs-auge:hover{background:#eef2f8}
.vs-auge:hover svg{stroke:var(--ds-primary,#1f4f7a)}
.vs-auge.an{background:#e7eeff}
.vs-auge.an svg{stroke:var(--ds-primary,#1f4f7a)}
.bu-tab tr.aktiv td{background:#f2f6ff}
@media(max-width:1100px){
  .bu-split{flex-direction:column}
  .bu-vorschau{flex:1 1 auto;width:100%;max-width:none;position:static;
    height:70vh}
}
.vs-kopf{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid #eceff4}
.vs-titel{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:#243040;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-zu{width:36px;height:36px;flex:0 0 auto;border:0;background:#f2f5f9;
  border-radius:9px;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.vs-zu:hover{background:#e6ebf3}
.vs-zu svg{width:18px;height:18px;fill:none;stroke:#4a5563;stroke-width:2;
  stroke-linecap:round}
.vs-rahmen{flex:1;border:0;width:100%;background:#f6f8fb}
.bu-tab .r{text-align:right}
.bu-tab .nowrap{white-space:nowrap}
.bu-tab a{color:var(--ds-primary,#1f4f7a);text-decoration:none}
.bu-tab a:hover{text-decoration:underline}
/* Reiter der Kopfkarte auch als Link (führt auf eine andere Seite) */
a.ktab{text-decoration:none}

/* === Belegupload: größere Bedienelemente, moderne Auswahlfelder =========
   Das Auswahlfeld des Browsers bringt seinen eigenen Pfeil und seine eigene
   Höhe mit – beides passt nicht zum Rest. `appearance:none` schaltet das ab,
   den Pfeil zeichnen wir selbst als Hintergrundbild. Anders als beim eigenen
   Aufklappmenü der Buchungssuche bleibt das echte <select> erhalten: auf
   dieser Seite hängen an jeder Zeile Ereignisse (Buch und Periode ändern),
   die ein Nachbau alle mitschleppen müsste.
   Diese Regeln stehen bewusst am Dateiende – die Schriftstufen weiter oben
   würden sie sonst überschreiben. */
.filter-row select,
.tb-set select,
.art-sel,
.up-sel{
  -webkit-appearance:none;appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  background-size:17px;
  border:1px solid #dfe4ec;border-radius:10px;color:#243040;
  box-sizing:border-box;cursor:pointer;
  /* Höhe über den Innenabstand, NICHT über `height`. Mit fester Höhe und
     ohne senkrechten Abstand zentriert Safari den Text nicht, sondern
     schneidet ihn oben und unten ab. */
  padding:12px 38px 12px 14px;height:auto;line-height:1.25}
.filter-row select,.tb-set select{min-height:46px;font-size:16px}
.filter-row input{min-height:46px;height:auto;font-size:16px;border-radius:10px;
  border:1px solid #dfe4ec;padding:12px 14px;box-sizing:border-box;
  line-height:1.25}
.such-wrap #fSuche{padding-right:60px}
.filter-row select:hover,.tb-set select:hover,.art-sel:hover,.up-sel:hover{
  border-color:#c9d3e2}
.filter-row select:focus,.tb-set select:focus,.filter-row input:focus,
.art-sel:focus,.up-sel:focus{outline:none;border-color:var(--ds-primary,#1f4f7a);
  box-shadow:0 0 0 3px rgba(47,107,255,.12)}
/* Die Auswahlfelder in den Zeilen bleiben kleiner als die der Werkzeugleiste –
   sie sitzen in einer Tabellenzelle und dürfen die Zeile nicht aufblähen. */
.art-sel{min-height:36px;font-size:14.5px;background-position:right 8px center;
  background-size:15px;padding:7px 28px 7px 10px}
.up-sel{min-height:46px;font-size:16px;width:100%}
/* Schaltflächen der Werkzeugleiste ------------------------------------
   Farbe nach BEDEUTUNG, nicht nach Geschmack:
     blau  = der Hauptweg (hochladen, importieren)
     grün  = freigeben
     rot   = löschen
     grau  = Nebensache (Reset, Download, Papierkorb)
     weiß  = die üblichen Bearbeitungsschritte
   Nur zwei Flächen sind kräftig gefüllt – der Rest ist getönt. Wären alle
   voll gefärbt, sticht nichts mehr hervor und die Leiste wird zum Regenbogen. */
.tb-b{height:46px;padding:0 17px;font-size:15.5px;border-radius:10px;
  background:#fff;border:1px solid #dfe4ec;color:#37414f;font-weight:500}
.tb-b .tb-i{stroke:#6b7583}
.tb-b:hover{background:#f6f8fc;border-color:#c9d3e2}
.tb-b.tb-ico{padding:0 14px}

.tb-b.tb-primary{background:linear-gradient(180deg,#6366f1,var(--ds-primary,#1f4f7a));
  border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 1px 3px rgba(79,70,229,.35)}
.tb-b.tb-primary .tb-i{stroke:#fff}
.tb-b.tb-primary:hover{background:linear-gradient(180deg,var(--ds-primary,#1f4f7a),#4338ca)}

.tb-b.tb-ok{background:#e9f9f0;border-color:#b3e3c6;color:#15794a;font-weight:600}
.tb-b.tb-ok .tb-i{stroke:#15794a}
.tb-b.tb-ok:hover{background:#daf3e5;border-color:#8ed7ac}

.tb-b.tb-danger{background:#fef1f2;border-color:#f5c6cc;color:#c0394a}
.tb-b.tb-danger .tb-i{stroke:#c0394a}
.tb-b.tb-danger:hover{background:#fde1e5;border-color:#eea9b3}

.tb-b.tb-quiet{background:#f4f6fa;border-color:#e5e9f0;color:#68727e}
.tb-b.tb-quiet .tb-i{stroke:#8b95a5}
.tb-b.tb-quiet:hover{background:#ecf0f6;color:#465060}

/* Die beiden „Setzen" gehören zum Auswahlfeld daneben – dieselbe Tönung
   macht das Paar sichtbar, ohne wie eine Hauptaktion zu wirken. */
.tb-b.tb-sm{background:#eef1ff;border-color:#ccd3ff;color:#4338ca;
  font-weight:600;padding:0 15px}
.tb-b.tb-sm:hover{background:#e2e7ff;border-color:#b3bdff}

.tb-lbl{font-size:12px;letter-spacing:.06em}

/* ============ Klienten-Portal: Aufbau „Ablage oben, Liste darunter" ========
   Vorher: Buch/Periode oben, darunter eine bildschirmhohe leere Ablagefläche,
   daneben dauerhaft ein leeres graues Vorschaufeld. Die eigentliche Arbeit –
   die Belegliste – bekam dadurch weniger als die halbe Breite und stand ganz
   unten. Jetzt: drei Schritte in einer Zeile, Liste über die volle Breite,
   Vorschau erscheint erst beim Anklicken eines Belegs. Die Seite liegt in
   derselben Hülle wie die Kanzlei (base.html) – linke Leiste und Topbar
   kommen von dort, hier steht nur der Inhalt. */
/* Kein Breitendeckel: mit 1900px blieb rechts ein leerer Streifen stehen,
   während die Dateinamen in der Liste abgeschnitten waren. Die Seite nutzt die
   Fensterbreite wie die Kanzlei-Ansichten. */
.pt-seite{max-width:none}
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin:0 0 16px}
.pt-titel{color:var(--navy);font-size:25px;font-weight:700;margin:0;
  letter-spacing:-.4px;line-height:1.15}
.pt-sub{font-size:13.5px;color:#8794a3;margin-top:4px}
.pt-akt{display:flex;gap:10px;flex-wrap:wrap}
.pt-akt .pb{padding:9px 15px;font-size:13.5px}

/* Bereichsreiter waagrecht. display:inline-block je Reiter, damit sie auch
   dann nebeneinander stehen, wenn eine ältere Regel den Flexkontext stört. */
.pt-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 18px;
  border-bottom:1px solid #e6eaf1}
.pt-tab.an{color:var(--ds-primary,#1f4f7a);font-weight:600;border-bottom-color:var(--ds-primary,#1f4f7a)}

/* --- Ablage: Buch, Periode, Dateien nebeneinander ------------------------ */
.pt-up{padding:16px 20px 14px;margin-bottom:16px}
.pt-up-grid{display:grid;gap:20px;align-items:end;
  grid-template-columns:minmax(210px,290px) minmax(170px,230px) minmax(260px,1fr)}
.pt-feld .p-lbl{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:11.5px}
.pt-nr{width:18px;height:18px;flex:none;border-radius:50%;background:#eef3fc;
  color:var(--ds-primary,#1f4f7a);font-size:11px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center}
.pt-feld .mdd{margin-top:0}
.pt-feld .mdd-btn{min-height:46px;padding:8px 12px}
.pt-feld .mdd-av{width:30px;height:30px;font-size:13px;border-radius:9px}
.pt-feld .mdd-txt b{font-size:14.5px}
.pt-feld .mdd-txt small{font-size:12px}
/* Ablagefläche: eine Zeile hoch, nicht ein halber Bildschirm. Solange Buch
   und Periode fehlen, ist sie sichtbar gedämpft – der Text allein wurde
   überlesen. */
.pt-drop{display:flex;align-items:center;gap:13px;min-height:46px;
  padding:11px 16px;border:1.5px dashed #cdd9ea;border-radius:11px;
  background:#fbfcfe;cursor:pointer;opacity:.6;
  transition:border-color .12s,background .12s,opacity .12s}
.pt-drop.bereit{opacity:1;border-color:#a9c4ea;background:#fff}
.pt-drop.bereit:hover{border-color:var(--ds-primary,#1f4f7a);background:#f7faff}
.pt-drop.drag{border-color:var(--ds-primary,#1f4f7a);background:#eef4fb;opacity:1}
.pt-drop-icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;border-radius:10px;background:#eef3fc}
.pt-drop-icon svg{width:19px;height:19px;fill:none;stroke:var(--ds-primary,#1f4f7a);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pt-drop-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pt-drop-txt b{font-size:14px;color:var(--navy,#1e2a44)}
.pt-drop-txt small{font-size:12.5px;color:#8794a3;margin-top:2px}
/* Hinweis auf die Import-Adresse: eine ruhige Zeile, kein grüner Balken. */
.pt-mail{display:flex;align-items:center;gap:9px;margin:14px 0 0;
  padding-top:12px;border-top:1px solid #eef1f6;font-size:12.5px;color:#7b8694}
.pt-mail svg{width:16px;height:16px;flex:none;fill:none;stroke:#a3b0c0;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pt-mail code{background:#f4f7fb;border:1px solid #e3e9f2;border-radius:6px;
  padding:2px 7px;color:#41546e;font-size:12px}

/* --- Liste --------------------------------------------------------------- */
.pt-liste{padding:6px 20px 12px}
.pt-liste-kopf{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;border-bottom:1px solid #e3e7ee;margin:0 0 10px}
.pt-liste-kopf .p-reiter{border-bottom:0;margin:0;gap:18px}
.pt-suche{margin:0;padding:8px 0;flex:0 1 400px}
.pt-suche input[type=search]{min-width:200px}
/* Leere Liste: eine klare Aussage plus der nächste Schritt. */
.pt-leer{padding:40px 12px 46px;text-align:center}
.pt-leer-t{font-size:15px;font-weight:600;color:var(--navy,#1e2a44);
  margin-bottom:9px}
.pt-leer .muted{font-size:13px}

/* --- Vorschau: erst auf Klick ------------------------------------------- */
.portal-split{display:block}
.portal-split.mit-vorschau{display:grid;gap:18px;align-items:start;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.portal-split .preview-head{justify-content:space-between}
.pv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-zu{background:none;border:0;color:#98a2ae;font-size:19px;line-height:1;
  padding:0 2px;cursor:pointer}
.pv-zu:hover{color:#fff}
@media(max-width:1100px){ .portal-split.mit-vorschau{grid-template-columns:1fr}
  .portal-split.mit-vorschau .preview-pane{position:static;
    height:calc(70 * var(--vhpx, 1vh))} }
@media(max-width:900px){ .pt-up-grid{grid-template-columns:1fr} }

/* Liste bei offener Vorschau: Datum und Quelle kürzen sich, damit der
   Dateiname lesbar bleibt – er ist das einzige Merkmal, an dem der Klient
   seinen Beleg erkennt. */
.portal-split.mit-vorschau .p-tab th:nth-child(1),
.portal-split.mit-vorschau .p-tab td:nth-child(1){width:38%}
.portal-split.mit-vorschau .p-tab th:nth-child(4),
.portal-split.mit-vorschau .p-tab td:nth-child(4){width:11%}
.portal-split.mit-vorschau .p-tab th:nth-child(5),
.portal-split.mit-vorschau .p-tab td:nth-child(5){width:14%}

/* --- Kopfleiste in Lohn und Analyse: ruhiger, größer, weniger Kästchen ---
   Die Vorlagen bringen jeweils eigene .an-tab/.an-bar-Regeln mit; über
   `.content …` gewinnt diese Fassung, ohne dass jede Vorlage angefasst
   werden muss. Bewusst zurückhaltend: der aktive Reiter wird über einen
   schmalen Balken markiert statt über eine Füllfläche – gefüllte Reiter
   ziehen mehr Aufmerksamkeit auf sich als die Tabelle darunter. --- */
.content .an-tabs{
  gap:clamp(4px, 0.5vw, 14px);
  border-bottom:1px solid #e8edf4;
  padding-bottom:0}
.content .an-tab{
  position:relative;
  padding:clamp(10px, 0.5vw + 6px, 15px) clamp(4px, 0.35vw + 2px, 10px);
  margin:0 clamp(6px, 0.4vw, 12px);
  font-size:clamp(16px, 0.28vw + 11px, 20px);
  font-weight:500;color:#71809a;background:none;border-bottom:none;
  border-radius:0;transition:color .14s}
.content .an-tab:first-child{margin-left:2px}
.content .an-tab::after{                 /* Markierung des aktiven Reiters */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ds-primary,#1f4f7a);border-radius:2px 2px 0 0;
  transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.content .an-tab:hover{background:none;color:var(--ds-primary,#1f4f7a)}
.content .an-tab.active{background:none;color:#16233a;font-weight:650}
.content .an-tab.active::after{transform:scaleX(1)}
.content .an-tab.off{color:#c2cad6}
.content .an-tab.off::after{display:none}

.content .an-bar{
  background:#fff;border:1px solid #ebeff5;border-radius:16px;
  padding:clamp(9px, 0.4vw + 5px, 14px) clamp(10px, 0.5vw + 6px, 16px);
  gap:10px clamp(12px, 0.6vw, 20px);
  box-shadow:0 1px 2px rgba(20,40,80,.05)}
.content .seg-track{background:#f1f4f9;border-radius:12px;padding:4px}
.content .seg-track .an-seg-btn{
  padding:clamp(7px, 0.3vw + 4px, 11px) clamp(13px, 0.5vw + 9px, 20px);
  border-radius:9px;font-weight:600;color:#65718a}
.content .seg-track .an-seg-btn.on{
  background:#fff;color:#16233a;box-shadow:0 1px 3px rgba(20,40,80,.14)}
.content .an-suche,.content .op-suche{
  padding:clamp(9px, 0.3vw + 6px, 13px) clamp(12px, 0.4vw + 8px, 16px);
  border-radius:11px;border-color:#e6ebf2}
.content .an-suche::placeholder,.content .op-suche::placeholder{color:#a9b3c2}
.content .an-seg-lbl{font-weight:600;color:#a2acbb;letter-spacing:.2px;
  font-size:clamp(12.5px, 0.14vw + 10px, 14.5px)}
.content .an-new{
  padding:clamp(9px, 0.3vw + 6px, 13px) clamp(14px, 0.45vw + 10px, 20px);
  border-radius:11px;font-size:clamp(14px, 0.18vw + 11px, 16px);
  box-shadow:0 1px 2px rgba(20,40,80,.10);transition:filter .12s}
.content .an-new:hover{filter:brightness(1.06)}
.content .an-mandant{margin-top:10px}

/* --- Kopfbereich im Personalakt / Lohnkonto: leiser, aufgeräumter ---
   Sieben kräftig blaue Schaltflächen nebeneinander konkurrierten mit den
   Stammdaten darunter, obwohl sie seltener gebraucht werden. Sie werden
   deshalb zu ruhigen Umriss-Knöpfen; blau bleibt den Hauptaktionen in den
   Formularen vorbehalten (dort greift diese Regel nicht). --- */
.content .pa-toolbar{
  margin:clamp(10px, 0.5vw + 6px, 16px) 0 clamp(6px, 0.3vw + 3px, 10px);
  align-items:center;gap:10px 14px}
.content .an-back{
  margin:0;color:#71809a;font-weight:600;
  font-size:clamp(13px, 0.16vw + 10px, 15px);
  transition:color .12s}
.content .an-back:hover{color:var(--ds-primary,#1f4f7a);text-decoration:none}
.content .pa-actions{gap:6px}
.content .pa-actions .pa-btn{
  background:#fff;color:#4a5670;border:1px solid #e4e9f1;
  padding:clamp(8px, 0.25vw + 6px, 11px) clamp(11px, 0.35vw + 8px, 15px);
  border-radius:10px;font-weight:600;
  font-size:clamp(12.5px, 0.15vw + 10px, 14px);
  box-shadow:0 1px 1px rgba(20,40,80,.03);
  transition:border-color .12s,background .12s,color .12s}
.content .pa-actions .pa-btn:hover{
  background:#f7faff;border-color:#b9cdf0;color:var(--ds-primary,#1f4f7a)}

/* Blättern: Pfeile und Auswahlfeld als eine zusammenhängende Einheit statt
   drei einzelner Kästchen – ruhiger und klarer als Gruppe erkennbar. */
.content .ma-nav{gap:0;margin-left:clamp(8px, 0.6vw, 18px)}
.content .ma-pfeil{
  border-radius:0;border-right:none;width:36px;height:40px;
  background:#fff;color:#71809a}
.content .ma-pfeil:first-child{border-radius:10px 0 0 10px}
.content .ma-nav > :last-child.ma-pfeil,
.content .ma-nav > .ma-pfeil:last-child{
  border-radius:0 10px 10px 0;border-right:1px solid #e3e8ef;border-left:none}
.content .ma-wahl{
  height:40px;border-radius:0;min-width:230px;
  font-weight:600;font-size:clamp(14px, 0.16vw + 11px, 15.5px)}
.content .ma-wahl:focus{box-shadow:none;border-color:var(--ds-primary,#1f4f7a);position:relative;z-index:1}