:root{
  --bg:#f4f2ef; --panel:#ffffff; --border:#e6e1d8; --text:#2e2c2a;
  /* --muted trägt Beschriftungen, Spaltenköpfe und Zusatzangaben – also echten
     Fließtext in 11–13px. Mit #8a8480 lag er bei 3.30 auf --bg und 3.07 auf
     --neutral-soft, deutlich unter den 4.5 der WCAG-AA-Vorgabe. Der Farbton
     ist derselbe warme Grauton, nur so weit abgedunkelt, dass ALLE Untergründe
     (bg, panel, neutral-soft, row-hover, accent-soft) 4.5 erreichen. */
  --muted:#6e6966;
  --accent:#8a6b47; --accent-hell:#b08d5f; --accent-soft:#f1e9dd; --accent-tief:#755835;
  --link:#82643f; /* Textlinks/Ghost-Buttons: dunkler als --accent, AA (>=4.5) auf JEDEM Untergrund –
                     auf --neutral-soft (Ghost-Knopf beim Überfahren) fehlten mit #83653f 0.02 */
  --ok:#2a7248; --ok-soft:#e3f0e4;
  --warn:#96650d; --warn-soft:#fdf1dc; --bad:#b0392e; --bad-soft:#f7e6e2;
  --info:#4f6459; --info-soft:#e6ece7; --neutral-soft:#edeae3; --neutral-text:#6b6560;
  --violet:#8a4a6d; --violet-soft:#f3e6ee;
  --radius:10px; --shadow:0 1px 2px rgba(46,40,32,.06);
  --toast-bg:#2e2c2a; --toast-text:#fff; --row-hover:#f7f4ee;
  --btn-primar-bg:#35322f; --btn-primar-text:#ffffff;
  --titel-font:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
:root{color-scheme:light}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[type=checkbox]{width:auto}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 4px}
label.inline{display:inline-flex;align-items:center;gap:6px;margin:6px 14px 4px 0;font-size:13px;color:var(--text)}
a{color:var(--link);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}

/* Titel-Typografie: Montserrat nur für Wortmarke, Seitentitel, Karten-/Modal-/Login-Titel */
h1,h2,#logo,.card h3,#modalTitle,#loginBox h1,.logintitel,.doc .brand{font-family:var(--titel-font)}

#app{display:flex;min-height:100vh}
#sidebar{width:215px;flex:0 0 215px;background:var(--panel);border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* ---- Marke „Donna" (Aufbau in 01-basis.js) ----
   Alle Farben kommen aus den Farbwelt-Variablen: die Marke trägt damit
   automatisch alle vier Welten und Hell wie Dunkel. Ein fester Farbwert hier
   sähe in drei von vier Welten falsch aus. */
#logo{padding:2px 10px 16px}
.dmarke{display:flex;align-items:center;gap:10px}
.dm-wort{font-size:16px;font-weight:300;letter-spacing:.34em;color:var(--text);
  line-height:1.1;text-indent:.34em}          /* Sperrung erzeugt rechts Luft – Einzug gleicht sie aus */
/* --accent-tief, NICHT --accent: der Akzent ist als Flaeche gedacht und liegt
   als Textfarbe in der hellen Adesigna-Welt bei 4.40 – knapp unter AA (der
   Kontrast-Test hat es gemeldet). --accent-tief ist die Textvariante und im
   Test bereits auf bg, panel und accent-soft geprueft. */
.dm-claim{font-size:8.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-tief);margin-top:3px}
.dm{flex:0 0 auto;overflow:visible;color:var(--accent)}
.dm-ring{fill:none;stroke:currentColor;stroke-width:7;opacity:.38}
.dm-netz{fill:none;stroke:currentColor;stroke-width:4;opacity:.24}
.dm-knoten{fill:currentColor;opacity:.5}
.dm-kopf{fill:currentColor}
.dm-straehne{fill:currentColor;opacity:.45}

/* Groß: der Anmeldeschirm */
.dmarke-gross{display:block;text-align:center;margin-bottom:20px}
.dmarke-gross .dm{margin:0 auto 14px;display:block}
.dmarke-gross .dm-wort{font-size:30px;letter-spacing:.42em}
.dmarke-gross .dm-claim{font-size:10px;letter-spacing:.18em;margin-top:8px}
.dm-zusatz{display:flex;align-items:center;gap:12px;margin-top:14px;
  color:var(--muted);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase}
.dm-zusatz::before,.dm-zusatz::after{content:"";flex:1;height:1px;background:var(--border)}
@media(max-width:700px){.dmarke-gross .dm-wort{font-size:24px;letter-spacing:.32em}}
.navitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px;color:var(--text);font-weight:500;margin-bottom:2px}
.navitem:hover{background:var(--neutral-soft)}
.navitem.active{background:var(--accent-soft);color:var(--accent-tief);font-weight:700}
.navitem .ico{width:18px;text-align:center}
#sidebarFoot{margin-top:auto;font-size:11px;color:var(--muted);padding:10px}

/* Objektleiste: offene Datensätze (nach banibis linker Leiste) */
#openbar{margin-top:14px;overflow-y:auto;flex:1;min-height:0}
#openbar h6{margin:10px 2px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
#openbar h6 .ogx{cursor:pointer;font-weight:400}
#openbar h6 .ogx:hover{color:var(--bad)}
.openitem{display:flex;align-items:center;gap:6px;padding:5px 7px;margin-bottom:3px;border-radius:6px;border:1px solid var(--border);border-left:4px solid var(--muted);background:var(--panel);cursor:pointer;font-size:12px;line-height:1.25}
.openitem:hover{background:var(--neutral-soft)}
.openitem.aktiv{background:var(--accent-soft);border-color:var(--accent-hell)}
.openitem .ol{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.openitem .ol b{display:block;overflow:hidden;text-overflow:ellipsis}
.openitem .ol span{color:var(--muted);font-size:10.5px}
.openitem .ox{flex:0 0 auto;color:var(--muted);padding:0 2px;font-size:12px}
.openitem .ox:hover{color:var(--bad)}
.ok-person{border-left-color:var(--accent-hell)!important}
.ok-projekt{border-left-color:var(--warn)!important}
.ok-artikel{border-left-color:var(--ok)!important}
.ok-ticket{border-left-color:var(--info)!important}
.ok-AN,.ok-RS{border-left-color:var(--warn)!important}
.ok-AU,.ok-LF{border-left-color:var(--info)!important}
.ok-RE{border-left-color:var(--bad)!important}
.ok-GU,.ok-BE,.ok-WE{border-left-color:var(--violet)!important}
.ok-ER{border-left-color:var(--warn)!important}
#main{flex:1;min-width:0;padding:22px 28px 60px}
#topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
#pageTitle{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0}
#pageActions{display:flex;gap:8px;flex-wrap:wrap}
.menuknopf{display:none}
.drawerBackdrop{display:none;position:fixed;inset:0;background:rgba(38,33,27,.45);z-index:110}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.card h3{margin:0 0 10px;font-size:14px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 15px}
.kpi .n{font-size:20px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.kpi .s{font-size:11px;color:var(--muted);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}
.row{display:flex;gap:10px}
.row>*{flex:1}
/* Leitfeld einer Formularzeile (Bezeichnung, Straße, Artikelsuche): doppelt so
   breit wie die Nachbarn. Als Klasse und nicht als style="flex:2", weil die
   Handy-Regeln (flex-basis) sonst nicht dagegen ankommen – mit basis 0 wurde
   ausgerechnet das wichtigste Feld das schmalste. */
.row>.w2{flex:2}
/* Hinweiszeilen direkt unter einem Feld (UID-Prüfung, Steuerschlüssel-Erklärung)
   klebten ohne Abstand am Rahmen darüber. */
input+.small,select+.small,textarea+.small{margin-top:4px}

table.list{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.list th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
table.list td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
table.list tr:last-child td{border-bottom:0}
table.list tr.click{cursor:pointer}
table.list tr.click:hover{background:var(--row-hover)}
td.num,th.num{text-align:right}
.empty{color:var(--muted);padding:18px;text-align:center}

.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.b-entwurf{background:var(--neutral-soft);color:var(--neutral-text)}
.b-gesendet{background:var(--info-soft);color:var(--info)}
.b-bezahlt,.b-gewonnen,.b-verrechenbar{background:var(--ok-soft);color:var(--ok)}
.b-ueberfaellig,.b-verloren{background:var(--bad-soft);color:var(--bad)}
/* Storno: durchgestrichen und ausgegraut – der Beleg existiert, zählt aber nicht */
.b-storniert{background:var(--neutral-soft);color:var(--neutral-text);text-decoration:line-through}
.b-angebot,.b-offen{background:var(--warn-soft);color:var(--warn)}
.b-abgeschlossen,.b-verbucht{background:var(--accent-soft);color:var(--accent-tief)}
.b-kunde{background:var(--accent-soft);color:var(--accent-tief)}
.b-lieferant{background:var(--violet-soft);color:var(--violet)}
.b-kontakt{background:var(--neutral-soft);color:var(--neutral-text)}
.b-fahrt{background:var(--info-soft);color:var(--info)}
.b-bestellt{background:var(--info-soft);color:var(--info)}
.b-teilgeliefert{background:var(--warn-soft);color:var(--warn)}
.b-geliefert,.b-eingelagert,.b-aktiv{background:var(--ok-soft);color:var(--ok)}
.b-erhalten{background:var(--warn-soft);color:var(--warn)}
.b-reserviert{background:var(--warn-soft);color:var(--warn)}
.b-abgelaufen,.b-inaktiv{background:var(--bad-soft);color:var(--bad)}
/* Belegarten-Chips: warme, gedeckte Töne, je Belegart unterscheidbar (Kontrast >= 4.5) */
.b-AN{background:#f6ecd9;color:#8a6510}
.b-RS{background:#f8e7dd;color:#a3512f}
.b-AU{background:#eef0da;color:#66702a}
.b-LF{background:#e5efe3;color:#3e6b45}
.b-RE{background:#f9e5e2;color:#a83a2e}
.b-GU,.b-GS{background:#f3e6ee;color:#7d3b6e}
.b-BE{background:#f1e9dd;color:#755835}
.b-WE{background:#ece5df;color:#6b5544}
.b-ER{background:#f5e4d2;color:#8a4f21}
.anlegen-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.anlegen-grid h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.anlegen-grid button{display:block;width:100%;text-align:left;margin-bottom:5px}
#dublettenHinweis{background:var(--warn-soft);color:var(--warn);border-radius:7px;padding:6px 10px;font-size:12px;margin-top:8px;display:none}
/* Hinweisbox: Zustandsmeldung am Datensatz (gesperrt / storniert / freigegeben) */
.hinweisbox{background:var(--warn-soft);color:var(--warn);border-radius:9px;padding:9px 13px;font-size:13px;line-height:1.5;margin-bottom:12px}
.hinweisbox.bad{background:var(--bad-soft);color:var(--bad)}
.hinweisbox a{color:inherit;text-decoration:underline;cursor:pointer}
.ok-text{color:var(--ok)}

/* Widget-Leiste (nach banibis Widgets-Menü) */
#widgetbar{width:290px;flex:0 0 290px;background:var(--panel);border-left:1px solid var(--border);padding:14px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
#widgetbar h5{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.widget{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.widget .whead{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;background:var(--neutral-soft);font-weight:700;font-size:12px}
.widget .whead .wx{cursor:pointer;color:var(--muted);font-weight:400;padding:0 2px}
.widget .whead .wx:hover{color:var(--bad)}
.widget .wbody{padding:10px 11px;font-size:12.5px}
.widget .wbody table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.widget .wbody td{padding:3px 4px;border-bottom:1px solid var(--border);vertical-align:top}
.widget .wbody tr:last-child td{border-bottom:0}
.widget .wbody input,.widget .wbody select{padding:5px 7px;font-size:12.5px;margin-bottom:5px}
body.widgets-off #widgetbar{display:none}
@media(max-width:1100px){#widgetbar{display:none}}
tr.opsub td{font-weight:700;background:var(--row-hover)}
tr.optotal td{font-weight:800;border-top:2px solid var(--text)}
td.negativ{color:var(--bad);font-weight:700}

.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 14px;border-radius:8px;font-weight:600}
.btn:hover{background:var(--neutral-soft)}
.btn.primary{background:var(--btn-primar-bg);border-color:var(--btn-primar-bg);color:var(--btn-primar-text)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:7px}
.btn.ghost{border-color:transparent;background:none;color:var(--link)}
.btn.active{background:var(--accent-soft);border-color:var(--accent-hell);color:var(--accent-tief)}
.searchbar{max-width:290px;margin-bottom:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
h2.sub{font-size:15px;font-weight:600;margin:22px 0 8px}
.backlink{display:inline-block;margin-bottom:10px;font-weight:600}
.kv{display:grid;grid-template-columns:160px 1fr;gap:4px 12px;font-size:13.5px}
.kv .k{color:var(--muted);font-weight:600}
.progress{height:7px;background:var(--neutral-soft);border-radius:99px;overflow:hidden;margin-top:6px}
.progress>div{height:100%;background:var(--accent-hell)}
.progress>div.over{background:var(--bad)}

/* Detail-Tabs */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin:14px 0;flex-wrap:wrap}
.tab{border:0;background:none;padding:8px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--accent-tief);border-bottom-color:var(--accent)}

/* Kanban */
.boardtabs{display:flex;gap:8px;margin-bottom:14px}
.kanban{display:flex;gap:10px;overflow-x:auto;align-items:flex-start;padding-bottom:10px}
.kcol{min-width:215px;width:215px;flex:0 0 auto;background:var(--neutral-soft);border-radius:var(--radius);padding:9px}
.kcol.dragover{outline:2px dashed var(--accent);outline-offset:-2px}
.kcol h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:space-between}
.kcard{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-bottom:8px;cursor:grab;box-shadow:var(--shadow)}
.kcard:active{cursor:grabbing}
.kcard.dragging{opacity:.45}
.kcard b{display:block;margin-bottom:3px}
.kcard .meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:5px}

/* Positionen-Editor */
table.pos{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
table.pos th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:4px 6px}
table.pos td{padding:3px 4px;vertical-align:middle}
table.pos input{padding:6px 8px}
table.pos tr.t-gruppe input.p-bez{font-weight:800;background:var(--neutral-soft)}
table.pos tr.t-text input.p-bez{font-style:italic;color:var(--muted)}
table.pos td.dbcell{font-size:11.5px;white-space:nowrap;color:var(--muted)}
/* ↑ ↓ ✕ nebeneinander: in 92px passten sie nicht und stapelten sich, was jede
   Positionszeile auf 62px aufblies. */
table.pos td.right{white-space:nowrap}
.posbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sums{margin-top:12px;margin-left:auto;width:290px;font-size:13.5px;font-variant-numeric:tabular-nums}
.sums div{display:flex;justify-content:space-between;padding:3px 0}
.sums .tot{font-weight:800;border-top:1px solid var(--border);padding-top:6px;font-size:15px}
.sums .db{color:var(--ok);font-weight:700}

/* Positions-Anzeige (readonly) */
table.list tr.rowgruppe td{font-weight:800;background:var(--row-hover)}
table.list tr.rowtext td{font-style:italic;color:var(--muted)}
table.list tr.rowsub td{font-weight:700;border-top:1px solid var(--border);font-size:12.5px}

/* Modal */
#modalOverlay{position:fixed;inset:0;background:rgba(38,33,27,.45);display:none;align-items:flex-start;justify-content:center;padding:4vh 16px;z-index:50;overflow:auto}
#modalOverlay.open{display:flex}
#modalBox{background:var(--panel);border-radius:var(--radius);box-shadow:0 18px 50px rgba(30,26,20,.25);width:100%;max-width:640px;padding:20px 22px}
#modalBox.wide{max-width:980px}
#modalTitle{font-size:17px;font-weight:700;margin:0 0 8px}
#modalFoot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--toast-bg);color:var(--toast-text);padding:10px 18px;border-radius:9px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:99}
/* Undo-Knopf im Toast (D6) */
#toast .undo{background:none;border:1px solid rgba(255,255,255,.45);color:inherit;border-radius:6px;
  padding:2px 9px;margin-left:12px;font-size:12px;font-weight:700}
#toast .undo:hover{background:rgba(255,255,255,.16)}
/* Tastaturfokus auf klickbaren Zeilen sichtbar machen (D8) */
table.list tr.click:focus-visible,a[tabindex="0"]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Login (nach banibis Benutzer-Anmeldung) */
#loginOverlay{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;z-index:200}
#loginOverlay.open{display:flex}
#loginBox{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 18px 50px rgba(30,26,20,.12);padding:34px 38px;width:420px;text-align:center}
#loginBox h1,.logintitel{font-size:21px;font-weight:700;margin:0 0 4px}
#loginBox .sub{color:var(--muted);font-size:13px;margin-bottom:22px}
.loginuser{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:10px 14px;margin-bottom:8px;cursor:pointer}
.loginuser:hover{background:var(--accent-soft);border-color:var(--accent-hell)}
.loginuser .avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.loginuser .ln b{display:block}
.loginuser .ln span{font-size:12px;color:var(--muted)}
#userChip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:99px;padding:5px 12px 5px 6px;background:var(--panel);cursor:pointer;font-weight:600;font-size:12.5px}
#userChip .avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:9.5px}
#userChip:hover{background:var(--neutral-soft)}
/* pointer-events erst im sichtbaren Zustand – sonst wäre der Undo-Knopf (D6)
   nicht klickbar, der ausgeblendete Toast aber ein unsichtbarer Klickfänger */
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* ================= Druck / Beleglayout (Banibis-Stil) ================= */
#printArea{display:none}
@media print{
  body.printing #app,body.printing #modalOverlay,body.printing #toast{display:none!important}
  body.printing #printArea{display:block}
  body{background:#fff}
}
/* Papierfläche – Belegdruck in Barlow (Banibis bettet lt. pdffonts
   Barlow-Regular/-Bold ein; selbst gehostet in app/fonts/) */
.doc{font-size:12.5px;line-height:1.42;color:#141414;background:#fff;max-width:820px;margin:0 auto;padding:26px 30px 30px;
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums}
.doc *{box-sizing:border-box}
/* Kopf-Logo (wiederholt sich im Druck auf jeder Seite; Banibis: OHNE Linien,
   Logo groß ~23mm) */
.doc .pagehd{text-align:center;padding-bottom:14px;margin-bottom:16px}
.doc .dlogo{height:100px;width:auto;max-width:70%;object-fit:contain}
.doc .docbody{min-height:40px}
/* Spacer-Tabelle: reserviert im Druck auf JEDER Seite Platz für das fixierte
   Kopf-/Fußzeilen-Chrome (thead/tfoot wiederholen sich je Druckseite) */
.doc .seitetab{width:100%;border-collapse:collapse}
.doc .seitetab>thead>tr>td,.doc .seitetab>tbody>tr>td,.doc .seitetab>tfoot>tr>td{padding:0;border:0;vertical-align:top}
/* Absender + Empfänger/Meta (Stil A) */
.doc .absender{font-size:9.5px;color:#444;margin-bottom:16px}
.doc .kopf2{display:flex;justify-content:space-between;gap:24px;margin-bottom:22px}
.doc .empf{line-height:1.5}
.doc .rechts{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.doc .liefadr{line-height:1.5;text-align:left}
.doc .liefadr .liefadrlbl{color:#333}
.doc .meta{text-align:right;color:#333;font-size:12px;white-space:nowrap}
/* Banibis: Titel/Betreff/Spaltenköpfe/Produktnamen REGULAR – fett sind nur
   Brutto-Summe, Fußzeilen-Belegnummer und die Bestellung…-Labels */
.doc h1{font-family:inherit;font-size:22px;font-weight:400;letter-spacing:0;margin:6px 0 16px}
.doc .intro{margin:2px 0 14px;color:#333}
.doc .betreff{font-weight:400;margin:2px 0 4px}
.doc .refzeile{text-decoration:underline;margin:2px 0 10px}
/* Leistungsdatum an der Gutschrift (die trägt nach Banibis keinen Meta-Block) */
.doc .lstgzeile{font-size:12px;color:#333;margin:-8px 0 12px}
.doc .notiz{font-size:11.5px;color:#555;margin-bottom:6px}
/* Positionstabelle (Kopf nach Banibis: hellgraues Band, KEINE Versalien) */
.doc .postab{width:100%;border-collapse:collapse;margin:14px 0 4px}
.doc .postab th{text-align:left;background:#ededed;border-bottom:1px solid #cfcfcf;padding:4px 8px;font-size:11px;font-weight:400;color:#222}
.doc .postab td{padding:4px 8px;border-bottom:1px solid #ececec;vertical-align:top}
/* Banibis: weißer Zwischenraum zwischen Kopfzeile und erster Zeile (nur am
   Tabellenanfang – der wiederholte Kopf auf Folgeseiten schließt direkt an) */
.doc .postab tbody::before{content:'';display:table-row;height:10px}
.doc .postab .r{text-align:right;white-space:nowrap}
.doc .postab th.r{text-align:right}
.doc .postab tr.dgruppe td{background:#ededed;border-bottom:1px solid #cfcfcf;border-top:1px solid #cfcfcf;padding:5px 8px;letter-spacing:.02em}
.doc .postab tr.dtext td{color:#333;border-bottom:0;padding-top:3px;padding-bottom:3px}
.doc .postab tr.dleer td{border-bottom:0;padding:5px}
.doc .postab tr.dopt td{font-style:normal;color:#333}
.doc .postab tr.dsub td{font-size:11.5px;border-bottom:1px solid #cfcfcf;border-top:1px solid #cfcfcf;background:#ededed}
.doc .postab td.ing{padding-left:20px}
.doc .postab .prod .ptitle{font-weight:400;display:block}
.doc .postab .prod .pdesc{display:block;font-size:10.5px;color:#666;margin-top:2px;line-height:1.35}
/* Einkaufs-Tabelle (BE/WE/ER): Zellenraster + Formular-Kästchen (EAN/Artikel#),
   zweizeilige Positionen (Wertezeile .ez + Textzeile .etxt) */
.doc .postab.raster th,.doc .postab.raster td{border:1px solid #d9d9d9}
.doc .postab.raster td{padding:2.5px 8px}
.doc .postab.raster tr.dtext td,.doc .postab.raster tr.dleer td{border-left:0;border-right:0;border-bottom:1px solid #ececec}
.doc .postab.raster tr.etxt td{font-size:11px;border-top:0}
.doc .postab.raster td.box{min-width:80px}
/* Banibis-Spaltenbreiten Bestellung: Preisspalten breit, EAN kompakt;
   Pos-Zelle optisch über beide Zeilen (keine Linie in der Pos-Spalte) */
.doc .postab.raster th:nth-child(1){width:9%}
.doc .postab.raster th:nth-child(2){width:19%}
.doc .postab.raster th:nth-child(3){width:18%}
.doc .postab.raster th:nth-child(4){width:9%}
.doc .postab.raster th:nth-child(5){width:22%}
.doc .postab.raster th:nth-child(6){width:23%}
.doc .postab.raster tr.ez td:first-child{border-bottom:0}
/* Druck ohne Preise (LF): Menge/Einheit nahe der rechten Kante */
.doc .postab.op th:nth-child(2){width:66%}
.doc .postab.op th:nth-child(3){width:12%}
/* Summenblock (Banibis: randlose hellgraue Fläche, ~halbe Breite, eckig,
   Brutto fett OHNE Trennlinie; Labels rechtsbündig an gemeinsamer Kante
   vor der Betragsspalte) */
.doc .docsums{width:48%;min-width:300px;margin:14px 0 4px auto;background:#f2f2f2}
.doc .docsums div{display:flex;justify-content:flex-end;gap:24px;padding:5px 14px}
.doc .docsums span:last-child{min-width:112px;text-align:right}
.doc .docsums .tot{font-weight:700}
/* Hinweistext */
.doc .hinweis{font-size:11px;color:#555;margin-top:14px;line-height:1.5}
/* STORNIERT-Wasserzeichen: liegt diagonal über dem Beleg, druckt bewusst mit
   (Chrome übernimmt transform+opacity in @media print) */
.doc .wasserzeichen{position:fixed;top:42%;left:0;right:0;text-align:center;font-size:86px;
  font-weight:700;letter-spacing:12px;color:rgba(190,40,40,.16);transform:rotate(-24deg);
  pointer-events:none;z-index:5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* Steuer-Pflichthinweis (ig. Lieferung / Reverse Charge / Ausfuhr) – muss bei
   0-%-Belegen unter dem Summenblock stehen und darf nicht umbrochen werden */
.doc .steuerhinweis{font-size:11px;color:#222;margin:8px 0 0 auto;width:48%;min-width:300px;line-height:1.45;break-inside:avoid}
/* Zahlungshistorie (AU/RE/GU): "bisher geleistete Zahlungen //" */
.doc .zhist{margin-top:18px}
.doc .zhtitel{margin-bottom:6px}
.doc .zhtab{width:100%;border-collapse:collapse;font-size:11.5px}
.doc .zhtab td{padding:4px 8px;border-top:1px solid #ececec;border-bottom:1px solid #ececec}
.doc .zhtab .zhdat{white-space:nowrap;width:60px}
.doc .zhtab .r{text-align:right;white-space:nowrap}
.doc .zhrest{display:flex;justify-content:flex-end;gap:26px;padding:6px 8px;font-size:11.5px}
/* Zahlblock (AU/RE/GU): Zahlungsart+Betragskasten links, QR rechts */
.doc .zahlart{font-size:13px;margin-bottom:26px}
.doc .zahlwrap{display:flex;gap:20px;align-items:flex-start;margin-top:16px;flex-wrap:wrap}
.doc .zahllinks{flex:1;min-width:220px}
.doc .zahlbox{display:inline-block;background:#f2f2f2;padding:12px 16px}
.doc .zahlbox .zblabel{font-size:12px;display:inline-block;margin-right:14px}
.doc .zahlbox .zbwert{font-size:14px;font-weight:700;display:inline-block}
.doc .qrblock{flex:1;min-width:280px}
.doc .qrblock .qrtitle{font-weight:400;font-size:12px;margin-bottom:6px}
.doc .qrflex{display:flex;gap:16px;align-items:flex-start}
.doc .qrtab{border-collapse:collapse;font-size:11px;flex:1;line-height:1.3}
.doc .qrtab td{padding:1px 8px 1px 0;vertical-align:top}
.doc .qrtab td:first-child{color:#666;white-space:nowrap}
.doc .qrimg{flex:0 0 auto}
.doc .qrimg svg{display:block;border:1px solid #eee;width:98px;height:98px}
.doc .qrfehlt{width:98px;height:98px;border:1px dashed #bbb;display:flex;align-items:center;justify-content:center;font-size:10px;color:#999;text-align:center}
/* Unterschriftszeile (Banibis): EINE Linie volle Breite + EINE Beschriftungszeile */
.doc .lfuebernahme{margin-top:30px;font-size:12.5px}
.doc .sigone{margin-top:40px}
/* Unterschriftslinien wie Banibis: feine, fast durchgezogene Haarlinie
   (border druckt vektoriell fein – Gradienten rastern im PDF zu dick) */
.doc .sigone .sigl{height:1px;margin-bottom:5px;border-bottom:1px dashed #000}
.doc .sigone .sigcap{font-size:11px;color:#222}
/* Angebot: Abschnitte 2+3 (Geschäftsbedingungen / Auftragsbestätigung) –
   Banibis: Flattersatz (kein Blocksatz) */
.doc .gbseite p,.doc .abseite p{margin:0 0 12px;line-height:1.5;text-align:left}
.doc .gblabels{border-collapse:collapse;margin-top:8px}
.doc .gblabels td{padding:1px 0}
.doc .gblabels td:first-child{font-weight:700;padding-right:24px}
.doc .abtrenn{border:0;border-top:2px solid #000;margin:34px 0 26px}
.doc .abfeld{margin:0 0 14px;display:flex;gap:6px;align-items:flex-end}
.doc .abfeld .abline{flex:1;height:1.1em;border-bottom:1px dashed #000}
/* AGB-Anhang (zweispaltig, wie Banibis-Original: Titel normalgewichtig,
   kaum größer als der Fließtext, beide Zeilen gleich groß) */
.doc .agbtitel{text-align:center;font-weight:400;font-size:11px;margin-bottom:18px;line-height:1.5}
.doc .agbtitel .agbstand{font-size:11px;font-weight:400}
.doc .agbcols{column-count:2;column-gap:26px;font-size:8.5px;line-height:1.46;text-align:justify}
.doc .agbcols .agbh{margin:7px 0 3px;break-after:avoid}
.doc .agbcols .agbp{margin:0 0 5px}
/* AGB als exakt ZWEI "nackte" Vollseiten (Banibis): eigene @page agb ohne
   Seitenzahl; die weiße .agbpage deckt das fixierte Kopf-/Fußzeilen-Chrome
   ab (höherer z-index als .pagehd/.pageft), ::after verlängert die Abdeckung
   bis zur Seitenkante unterhalb der 277mm-Box */
.doc .agbpage{page:agb;position:relative;z-index:5;background:#fff;display:flex;flex-direction:column;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc .agbpage .agbcols{flex:1 1 auto;min-height:0;column-fill:auto}
/* Angebot-Deckblatt (Stil B) */
.doc .deckblatt{min-height:210mm}
.doc .dbspacer{height:150px}
.doc .dbline{border:0;border-top:1px solid #333;margin:0 0 18px}
.doc .dbright{text-align:right}
.doc .dbright h1{margin:0 0 8px}
/* Banibis-Deckblatt: Datum/Betreff/Empfänger eine Stufe größer als der Fließtext */
.doc .dbdatum{color:#333;margin-bottom:16px;font-size:1.22em}
.doc .dbbetreff{font-weight:400;margin-bottom:22px;font-size:1.22em}
.doc .dbempf{line-height:1.55;display:inline-block;text-align:right;font-size:1.22em}
.doc .abschnitt{font-family:inherit;font-size:16px;font-weight:400;margin:6px 0 16px}
.doc .pagebreak{height:0}
/* Fußzeile (wiederholt sich im Druck auf jeder Seite) – Banibis: KEINE
   horizontale Linie, dafür dünne vertikale Trenner vor Spalte 2–4; die fette
   Belegnummern-Zeile steht linksbündig in der 4. Spalte */
.doc .pageft{margin-top:40px}
.doc .ftcols{display:grid;grid-template-columns:repeat(4,1fr);gap:0 12px;font-size:9.5px;color:#666;line-height:1.5}
.doc .ftcols>div+div{border-left:1px solid #999;padding-left:10px}
.doc .ftref{margin-top:3px;font-weight:700;font-size:9.5px;text-align:left;color:#333}
/* Druck: A4, Seitenumbrüche, wiederholte Kopf-/Fußzeile */
/* Seitenzahl "Seite x/y" rechts unten (Pendant zur .ftref-Zeile "nr / datum").
   counter(page)/counter(pages) sind NUR in @page-Margin-Boxen verfügbar – die
   position:fixed-Fußzeile wiederholt sich zwar je Seite, kann die laufende
   Seitennummer aber nicht ermitteln. counter(pages) ("/y") wird von Chrome erst
   eingeschränkt unterstützt; wo es fehlt, bleibt wenigstens "Seite x" stehen. */
/* Banibis-Satzspiegel (per pdftotext -bbox vermessen): links 15mm, rechts
   ~10mm, Chrome oben/unten läuft bis ~5-8mm an die Blattkante */
@page{size:A4;margin:8mm 10mm 8mm 15mm;
  @bottom-right{content:'Seite ' counter(page) '/' counter(pages);font-family:'Barlow',Arial,Helvetica,sans-serif;font-size:9px;color:#333}
}
/* Banibis: NUR das Angebots-Deckblatt (Seite 1 des Angebots) trägt keine
   Seitenzahl – Stil-A-Belege zeigen auch auf Seite 1 "Seite 1/y" */
.doc-AN{page:angebot}
@page angebot:first{
  @bottom-right{content:none}
}
/* AGB-Anhangseiten: volle Höhe (Banibis druckt sie randnah), keine Seitenzahl.
   Achtung: counter(pages) im "Seite x/y" der Belegseiten zählt die beiden
   AGB-Seiten weiter mit (Banibis zählt ohne) – mit CSS nicht vermeidbar. */
@page agb{margin:11mm 15mm 8mm;
  @bottom-right{content:none}
}
@media print{
  .doc{max-width:none;margin:0;padding:0;font-size:11px}
  /* Fixiertes Chrome: Logo oben (~23mm, wie Banibis), Fußzeile unten. Die
     .seitetab-Spacer (thead/tfoot) reservieren auf JEDER Seite den Platz,
     damit kein Fließinhalt unter das weiße Chrome gerät. right:5mm zentriert
     das Logo auf dem PAPIER (Satzspiegel ist asymmetrisch 15/10). */
  .doc .pagehd{position:fixed;top:0;left:0;right:5mm;height:29mm;padding:2mm 0 0;margin:0;background:#fff}
  /* 26.5mm CSS-Höhe ≈ 21.3mm Tinte (das Logo-PNG trägt Innenabstand) */
  .doc .dlogo{height:26.5mm;max-width:none}
  .doc .pageft{position:fixed;bottom:0;left:0;right:0;margin:0;background:#fff}
  .doc .seitetab>thead{display:table-header-group}
  .doc .seitetab>tfoot{display:table-footer-group}
  .doc .hdsp{height:33mm}
  .doc .ftsp{height:18mm}
  /* Stil-A-Kopf auf Banibis-Vertikalmaß: Absenderzeile ~61mm, Empfänger
     ~72mm (Fensterkuvert, 7mm eingerückt), Titel ~103mm ab Blattoberkante */
  .doc .absender{margin:20mm 0 7mm 7mm}
  .doc .empf{margin-left:7mm}
  .doc .docbody>h1{margin-top:8mm}
  /* Angebots-Deckblatt: Trennlinie über dem Titel bei ~100mm */
  .doc .dbspacer{height:59mm}
  .doc .dbbetreff{margin-bottom:20mm}
  .doc .postab thead{display:table-header-group}
  .doc .postab tr,.doc .postab tr.dgruppe,.doc .postab tr.dsub{break-inside:avoid}
  .doc .docsums,.doc .zahlwrap,.doc .qrblock,.doc .zahlbox,.doc .zhist,.doc .sigone,.doc .lfuebernahme,.doc .deckblatt,.doc .gblabels,.doc .abfeld{break-inside:avoid}
  .doc .agbcols .agbp,.doc .agbcols .agbh{break-inside:avoid}
  .doc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc .agbpage{break-before:page;height:277mm;overflow:hidden}
  .doc .agbpage::after{content:'';position:absolute;left:-10mm;right:-10mm;top:100%;height:10mm;background:#fff}
  .doc .postab tr.ez{break-after:avoid}
  .doc .pagebreak{break-before:page}
  .doc .deckblatt{min-height:auto}
}

/* Suchwerkzeuge (nach banibis Suchen-Reiter) */
.erwpanel{margin-top:10px;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg);display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:4px 26px}
.erwrow{display:flex;align-items:center;gap:8px;padding:3px 0;min-height:32px}
.erwrow select{width:auto;flex:1;min-width:120px;padding:4px 7px;font-size:12.5px}
.erwrow input{padding:4px 7px;font-size:12.5px}
.erwlabel{flex:0 0 130px;font-size:12px;color:var(--muted)}
.triwrap{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.tri{border:0;background:var(--panel);padding:4px 11px;font-size:12px;cursor:pointer;color:var(--muted)}
.tri+.tri{border-left:1px solid var(--border)}
.tri.active{background:var(--accent);color:#fff;font-weight:700}
.btn.aufheben{color:var(--muted)}
.btn.aufheben.aktiv{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:700}
.trefferzeile{margin:8px 2px}
.sumline{display:flex;gap:22px;flex-wrap:wrap;border-top:2px solid var(--border);margin-top:2px;padding:9px 10px 1px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sumline b{color:var(--text)}
.gespfilter{display:inline-flex;align-items:center;gap:2px}
.gespfilter .gespdel{color:var(--muted);font-size:10.5px;padding:2px}
.gespfilter .gespdel:hover{color:var(--bad)}

/* Listen-Feinschliff: Scroll statt Quetschen, Sortierköpfe, Aktionen-Menü */
.tscroll{overflow-x:auto}
.tscroll>table.list{min-width:640px}
table.list td.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
table.list td.num{white-space:nowrap}
th.thsort{cursor:pointer;user-select:none}
th.thsort:hover{color:var(--accent)}
.aktwrap{position:relative;display:inline-block}
.aktmenu{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);padding:6px;display:none;flex-direction:column;gap:4px;min-width:180px}
.aktmenu.open{display:flex}
.aktmenu .btn{text-align:left;width:100%;justify-content:flex-start}
.filterrow{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:center}
.filterrow .erwrow{min-height:0}
.filterrow .erwlabel{flex:0 0 auto}

/* Positions-Schnellerfassung & neue Positionstypen (nach banibis Anlegen) */
/* Feld + Beschriftung DARUNTER (Kalkulationsleiste, qFeld in 18). Nicht als
   <label> über dem Feld wie in den Dialogen: die Leiste steht in einer Karte
   ohne eigene Überschrift je Feld, und untenstehend bleibt die Zeile flach. */
.qf{display:flex;flex-direction:column;min-width:0}
.qf>span{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:3px 2px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.schnellbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px;margin:10px 0 4px}
.schnellbar input{width:auto}
.schnelltreffer{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;max-height:180px;overflow-y:auto}
.schnelltreffer .st-row{display:flex;gap:10px;padding:6px 10px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12.5px;align-items:center}
.schnelltreffer .st-row:hover,.schnelltreffer .st-row.aktiv{background:var(--accent-soft)}
.schnelltreffer .st-row:last-child{border-bottom:0}
table.pos tr.t-option td,table.pos tr.t-option input{color:var(--warn)}
table.pos tr.t-zwischensumme td{font-weight:700;border-top:2px solid var(--border)}
table.list tr.rowoption td{color:var(--warn);font-style:italic}
table.list tr.rowzsum td{font-weight:700;border-top:2px solid var(--border)}

/* Dunkles Design (Toggle in der Sidebar, Einstellung DB.settings.dunkel) */
body.dark{
  color-scheme:dark;
  --bg:#333236; --panel:#414042; --border:#55535a; --text:#e9e6e1;
  /* wie im hellen Satz: #a49f99 kam auf --panel nur auf 3.93 und auf
     --neutral-soft auf 3.39; jetzt erreicht jeder Untergrund 4.5 */
  --muted:#bcb8b4;
  --accent:#c9a87c; --accent-hell:#c9a87c; --accent-soft:rgba(201,168,124,.14); --accent-tief:#dcc9a8;
  /* Links sind hier eine Spur heller als --accent: derselbe Ton erreichte auf
     --neutral-soft nur 3.97. Als Flächenfarbe (Knöpfe, Avatar) bleibt --accent
     unverändert – dort steht dunkler Text darauf. */
  --link:#d1b48e;
  --ok:#7cc999; --ok-soft:#2e4234;
  --warn:#e0a344; --warn-soft:#453a20; --bad:#f0998d; --bad-soft:#4a2f2a;
  --info:#a9c2ae; --info-soft:#39433c; --neutral-soft:#4b494e; --neutral-text:#beb8b1;
  --violet:#d9a3c4; --violet-soft:#46323f;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --toast-bg:#e9e6e1; --toast-text:#333236; --row-hover:#4a484d;
  --btn-primar-bg:#c9a87c; --btn-primar-text:#2b2a28;
}
body.dark .btn.primary:hover{filter:brightness(1.06)}
body.dark .tri.active{background:var(--accent);color:#2b2a28}
body.dark .btn.aufheben.aktiv{color:#3a201c}
body.dark .loginuser .avatar,body.dark #userChip .avatar{color:#2b2a28}
body.dark #modalOverlay{background:rgba(0,0,0,.6)}
/* Belegarten-Chips im dunklen Design (Kontrast >= 4.5 auf dunklem Grund) */
body.dark .b-AN{background:#4a4028;color:#e6c584}
body.dark .b-RS{background:#4a382c;color:#e8b08a}
body.dark .b-AU{background:#41432a;color:#d3d68e}
body.dark .b-LF{background:#344234;color:#a9d4ac}
body.dark .b-RE{background:#4c332e;color:#f0a99b}
body.dark .b-GU,body.dark .b-GS{background:#463141;color:#dfabd0}
body.dark .b-BE{background:#463c2c;color:#c9a87c}
body.dark .b-WE{background:#423a31;color:#d0baa4}
body.dark .b-ER{background:#48392a;color:#e3b586}
body.dark .b-abgeschlossen,body.dark .b-verbucht,body.dark .b-kunde{background:#463c2c;color:#c9a87c}
/* Druckvorschau bleibt Papier – hell auch im dunklen Design */
.doc{background:#fff;border-radius:6px}
body.dark #view .doc{box-shadow:0 0 0 1px var(--border)}
#themeToggle{margin-top:8px;width:100%}

/* ===== Farbwelten (DB.settings.farbwelt, Umschalter in Einstellungen) =====
   Hell/Dunkel bleibt der eigene Schalter – eine Farbwelt liefert je EINEN
   hellen und EINEN dunklen Satz, die beiden Schalter sind unabhängig.
   Geschrieben als `:not(.dark)` bzw. `.dark.f-…`: beide Formen wiegen schwerer
   als `body.dark`, damit die Reihenfolge im Stylesheet keine Rolle spielt.
   Angefasst werden nur Marken- und Grundtöne; die Bedeutungsfarben (--ok,
   --warn, --bad, --info) bleiben überall gleich, sonst hieße Grün in einer
   Welt „in Ordnung" und in der nächsten „Markenfarbe".
   Alle Paarungen (Text/muted/Link auf bg, panel, neutral-soft; accent-tief auf
   accent-soft; Avatartext auf accent; Primärknopf; Toast) sind rechnerisch auf
   >= 4.5 geprüft. */

/* ---- Salbei & Messing ----
   Bewusst gedämpft statt Smaragd: ein Akzent, auf den man acht Stunden schaut,
   soll erkennbar sein, nicht laut. Rund die halbe Buntheit des ersten Entwurfs
   bei gleicher Helligkeit – der Kontrast bleibt, die Fläche wird ruhig. */
body.f-salbei:not(.dark){
  --bg:#f2f5f2; --panel:#ffffff; --border:#dde5dd; --text:#212a24; --muted:#616b63;
  --accent:#46634f; --accent-hell:#a9884e; --accent-soft:#e7eee8; --accent-tief:#3a5343;
  --link:#3f5a48;
  --neutral-soft:#e8ede8; --neutral-text:#5b665e; --row-hover:#eff4ef;
  --btn-primar-bg:#34483b; --btn-primar-text:#f2e9d5;
  --toast-bg:#34483b; --toast-text:#f2e9d5;
  --leiste:rgba(255,255,255,.88);
}
/* Im hellen Satz trägt das Messing nur Ränder und die Schrift des Primärknopfs –
   die Wortmarke macht die Paarung sichtbar. Nicht --accent-hell (#a9884e, nur
   3.31 auf Weiß), sondern ein tieferes Messing mit 4.97: 17px fett zählt noch
   nicht als „großer Text" und braucht die vollen 4.5. */
body.f-salbei:not(.dark) #logo span{color:#866c3e}
/* Im dunklen Satz trägt die Welt IHREN Farbton als Akzent und das Metall den
   Zweitton – genau wie im hellen. Der erste Entwurf hatte die Rollen vertauscht
   (Messing als Akzent), damit sahen Adesigna, Salbei und Petrol im Dunkeln
   praktisch gleich aus: #c9a87c, #c8b083, #c9ab7c. */
body.dark.f-salbei{
  --bg:#191e1a; --panel:#232a25; --border:#38423a; --text:#e6ebe6; --muted:#b3bcb4;
  --accent:#9dc0a5; --accent-hell:#c8b083; --accent-soft:rgba(157,192,165,.15); --accent-tief:#bcd7c2;
  --link:#a6c7ae;
  --neutral-soft:#2e372f; --neutral-text:#aeb8b0; --row-hover:#29312a;
  --btn-primar-bg:#9dc0a5; --btn-primar-text:#17251b;
  --toast-bg:#e6ebe6; --toast-text:#191e1a;
  --leiste:rgba(35,42,37,.9);
}

/* ---- Petrol & Sand ----
   Tiefes Blaugrün statt Königsblau. Ein gegrautes Blau wäre ruhiger gewesen,
   läge aber optisch fast auf Graphit & Azur – vier Welten sollen sich auf einen
   Blick unterscheiden. */
body.f-petrol:not(.dark){
  --bg:#f1f5f5; --panel:#ffffff; --border:#d9e4e4; --text:#1c2a2c; --muted:#5b6a6c;
  --accent:#245c64; --accent-hell:#b6975f; --accent-soft:#e1eded; --accent-tief:#1d4850;
  --link:#21525a;
  --neutral-soft:#e6eeee; --neutral-text:#576567; --row-hover:#edf4f4;
  --btn-primar-bg:#1d4850; --btn-primar-text:#f3e9d6;
  --toast-bg:#1d4850; --toast-text:#f3e9d6;
  --leiste:rgba(255,255,255,.88);
}
body.dark.f-petrol{
  --bg:#121a1b; --panel:#1c2527; --border:#2f3d3f; --text:#e4ecec; --muted:#a9b7b8;
  --accent:#74b8bf; --accent-hell:#c9ab7c; --accent-soft:rgba(116,184,191,.15); --accent-tief:#a2d3d8;
  --link:#7fbfc6;
  --neutral-soft:#263133; --neutral-text:#a6b4b5; --row-hover:#212b2d;
  --btn-primar-bg:#74b8bf; --btn-primar-text:#10262a;
  --toast-bg:#e4ecec; --toast-text:#121a1b;
  --leiste:rgba(28,37,39,.9);
}

/* ---- Graphit & Azur (die geläufige Kombination) ---- */
body.f-graphit:not(.dark){
  --bg:#f5f6f8; --panel:#ffffff; --border:#e1e4e9; --text:#22262c; --muted:#616a76;
  --accent:#1a66c4; --accent-hell:#4f95e5; --accent-soft:#e6f0fc; --accent-tief:#155095;
  --link:#175cb3;
  --neutral-soft:#eceef2; --neutral-text:#576068; --row-hover:#f2f5f9;
  --btn-primar-bg:#2b3138; --btn-primar-text:#ffffff;
  --toast-bg:#22262c; --toast-text:#ffffff;
  --leiste:rgba(255,255,255,.88);
}
body.dark.f-graphit{
  --bg:#16181c; --panel:#1f2227; --border:#353a42; --text:#e8eaee; --muted:#99a0aa;
  --accent:#6fb0f5; --accent-hell:#6fb0f5; --accent-soft:rgba(111,176,245,.15); --accent-tief:#a5cdf8;
  --link:#7ab8f7;
  --neutral-soft:#2a2f36; --neutral-text:#b6bcc5; --row-hover:#252a31;
  --btn-primar-bg:#6fb0f5; --btn-primar-text:#12212f;
  --toast-bg:#e8eaee; --toast-text:#16181c;
  --leiste:rgba(31,34,39,.9);
}

/* Farbwahl in den Einstellungen */
.farbwahl{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.farbknopf{
  display:flex;align-items:center;gap:9px;flex:1 1 190px;min-width:170px;
  border:1px solid var(--border);border-radius:10px;background:var(--panel);
  padding:9px 12px;text-align:left;font-weight:600;font-size:13px;color:var(--text)
}
.farbknopf:hover{background:var(--neutral-soft)}
.farbknopf.active{border-color:var(--accent-hell);background:var(--accent-soft);color:var(--accent-tief)}
.farbknopf .probe{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(0,0,0,.14);
  /* linke Hälfte Grundton, rechte Hälfte Akzent – der Charakter der Welt in einem Punkt */
  background:linear-gradient(90deg,var(--p1) 0 50%,var(--p2) 50% 100%)
}

/* Drag & Drop im Positionseditor + Untergruppen-Einrückung (nach banibis) */
table.pos .draghandle{cursor:grab;color:var(--muted);user-select:none;white-space:nowrap}
table.pos tr.dragging{opacity:.45}
table.pos tr.dropover td{border-top:2px solid var(--accent)}
table.pos tr.dropin td{background:var(--accent-soft)}
table.pos tr.untergruppe td.draghandle{padding-left:16px}
table.pos tr.untergruppe td.draghandle::before{content:'↳ ';color:var(--muted)}
table.list td.ing{padding-left:26px}
.doc td.ing{padding-left:16px}

/* ---- KI-Assistent (22i-ki.js) ---- */
.ki{display:flex;flex-direction:column;gap:10px;min-height:min(56vh,440px)}
.kiverlauf{flex:1;overflow-y:auto;max-height:min(56vh,440px);display:flex;flex-direction:column;gap:9px;padding:2px}
.kizeile{display:flex}
.kizeile.ich{justify-content:flex-end}
.kizeile.werkzeug{justify-content:center;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.kipuls{animation:pulsieren 1.2s infinite}
.kiblase{max-width:82%;padding:9px 13px;border-radius:13px;line-height:1.55;font-size:13.5px;
  background:var(--panel);border:1px solid var(--border)}
.kiblase p{margin:0 0 8px}
.kiblase p:last-child{margin-bottom:0}
.kizeile.ich .kiblase{background:var(--accent-soft);border-color:var(--accent-hell);color:var(--accent-tief)}
.kiblase.bot{background:var(--bg)}
.kiblase.fehler{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-soft)}
.kivorschlaege{margin-top:9px;padding-top:9px;border-top:1px solid var(--border);line-height:2.1}
.kibeispiele{display:flex;gap:6px;flex-wrap:wrap}
.kieingabe{display:flex;gap:8px;align-items:flex-end}
.kieingabe textarea{flex:1;resize:vertical;min-height:44px}
.kieingabe .btn{flex:0 0 auto;min-height:44px}
.kimikro{padding:9px 13px;font-size:16px;line-height:1}
.kimikro.hoert{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulsieren 1.1s infinite}
.kifuss{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:11.5px;
  border-top:1px solid var(--border);padding-top:8px}

/* ---- Plattform-Übersicht (22h-plattform.js) ---- */
.pgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px}
.pkachel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:7px}
/* Kachel mit Tabelle (KI-Verbrauch) nimmt die ganze Zeile */
.pkachel.breit{grid-column:1/-1}
table.kiverbrauch{font-size:12.5px;margin-top:2px}
table.kiverbrauch th{font-size:10px;padding:5px 8px}
table.kiverbrauch td{padding:5px 8px}
table.kiverbrauch td:first-child{white-space:nowrap}
.pkopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pkopf b{font-size:14px}
.pzweck{font-size:13px;line-height:1.5}
.phinweis{line-height:1.5}
.pbraucht{background:var(--bg);border-radius:7px;padding:6px 9px;line-height:1.45}
.pandock code{font-size:11px;word-break:break-word}
.pakt{margin-top:2px}

/* ---- Kanalleiste: anrufen, schreiben, hinfahren (22f-kanaele.js) ---- */
.kanalleiste{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.kanalleiste.leer{font-size:12.5px;color:var(--muted);padding:6px 0 14px}
.btn.kanal{padding:9px 15px;gap:7px;display:inline-flex;align-items:center}
.btn.kanal .kanalico{font-size:15px;line-height:1}
.btn.kwa{color:#1c7346;border-color:#c2ddcd}
.btn.kwa:hover{background:#eaf4ee}
body.dark .btn.kwa{color:#7cc999;border-color:#3d5a48}
body.dark .btn.kwa:hover{background:#33453a}

/* ---- QR-Codes und Scanner (22g-qr.js) ---- */
.qrkarte{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.qrbild{flex:0 0 auto;background:#fff;padding:10px;border-radius:10px;border:1px solid var(--border);line-height:0}
.qrinfo{flex:1 1 240px;min-width:0}
.qrtext{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:7px 9px;word-break:break-all}
.qrscan{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.qrscan video{width:100%;height:100%;object-fit:cover;display:block}
.qrrahmen{position:absolute;inset:16% 18%;border:3px solid rgba(255,255,255,.9);border-radius:14px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.3);pointer-events:none}
/* Etikett zum Aufkleben: QR links, Bezeichnung rechts */
.qretikett{display:flex;align-items:center;gap:9mm;padding:8mm}
.qretikett .qrelabel{display:flex;flex-direction:column;gap:3mm;font-family:var(--titel-font)}
.qretikett .qrelabel b{font-size:15pt;line-height:1.25}
.qretikett .qrelabel span{font-size:9pt;color:#555}

/* ---- Diktierknopf an mehrzeiligen Feldern (22e-sprache.js) ---- */
.btn.diktat{margin-top:6px;color:var(--muted);font-weight:600}
.btn.diktat.hoert{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulsieren 1.1s infinite}

/* ---- Kommandoleiste: ein Feld für Handlungen und Datensätze (22d) ---- */
.kpal{display:flex;flex-direction:column;gap:10px}
.kpalfeld{display:flex;gap:8px;align-items:center}
.kpalfeld input{font-size:16px;padding:11px 13px}
.kpalmikro{flex:0 0 auto;padding:9px 13px;font-size:16px;line-height:1}
.kpalmikro.hoert{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulsieren 1.1s infinite}
@keyframes pulsieren{0%,100%{opacity:1}50%{opacity:.55}}
.kpalliste{max-height:min(52vh,430px);overflow-y:auto;margin:0 -4px;padding:0 4px}
.kpalzeile{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;cursor:pointer}
.kpalzeile:hover{background:var(--neutral-soft)}
.kpalzeile.aktiv{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-hell)}
.kpalzeile .kico{flex:0 0 22px;text-align:center;color:var(--muted);font-size:15px}
.kpalzeile .ktxt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.kpalzeile .ktxt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpalzeile .ktxt span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpalzeile .kart{flex:0 0 auto;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--border);border-radius:99px;padding:1px 8px}
.kpalfuss{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--border);padding-top:8px}

/* ================= Mobil =================
   Drei Bausteine, die zusammengehören:
   1. Off-Canvas-Sidebar + untere Tableiste (<=900px) – Navigation für den Daumen
   2. Listen als Karten (<=640px) – siehe 22c-mobil.js, das die Kopfzeile als
      data-l in die Zellen schreibt; hier wird daraus die Karte
   3. Sichere Bereiche (env(safe-area-inset-*)) – die App zeichnet unter die
      Rundungen des iPhones, die Leisten halten sich frei */

/* ---- Untere Tableiste + Anlegen-Knopf (Inhalt aus 22c-mobil.js) ---- */
#tabbar{display:none}
.tabknopf,.tabplus{-webkit-tap-highlight-color:transparent}
/* Schwebende Leisten sind halbtransparent mit Weichzeichner – dafür braucht es
   den Panel-Ton MIT Alpha (color-mix wäre eleganter, ist aber nicht überall da) */
:root{--leiste:rgba(255,255,255,.88)}
body.dark{--leiste:rgba(65,64,66,.9)}

/* ---- Statuszeile: offline / neue Version (22b-pwa.js) ---- */
#netzhinweis{display:none}
#netzhinweis.an{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  position:fixed;left:0;right:0;top:0;z-index:150;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  font-size:13px;line-height:1.35;text-align:center;
  background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.12)
}
#netzhinweis.neu{background:var(--accent-soft);color:var(--accent-tief)}
#netzhinweis .btn{background:var(--panel)}

@media print{#tabbar,#netzhinweis,.tabplus{display:none!important}}

/* ===== <=900px: Drawer, Tableiste, klebender Seitenkopf ===== */
@media(max-width:900px){
  #sidebar{position:fixed;left:0;top:0;height:100vh;height:100dvh;z-index:120;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.25);overflow-y:auto;padding-top:calc(18px + env(safe-area-inset-top))}
  #sidebar.open{transform:translateX(0)}
  #sidebar.open+.drawerBackdrop,.drawerBackdrop.open{display:block}
  .menuknopf{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;padding:0}
  /* unten Platz für die Tableiste, oben für die Notch */
  #main{padding:16px 16px calc(78px + env(safe-area-inset-bottom))}
  /* Der Seitenkopf bleibt stehen: Titel und die Aktionen des Bereichs sind
     unterwegs sonst nach dem ersten Wisch unerreichbar. */
  #topbar{
    position:sticky;top:0;z-index:30;
    gap:8px;justify-content:flex-start;flex-wrap:wrap;
    margin:-16px -16px 12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    background:var(--leiste);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border)
  }
  /* Zwei Zeilen statt einer überlaufenden: oben ☰ + Titel, darunter die
     Aktionen des Bereichs – seitlich wischbar, weil manche Ansicht sechs
     davon hat (der Benutzer-Chip steht vorne, sonst wäre er weggescrollt). */
  #topbar>div:last-of-type{
    flex:1 0 100%;margin-left:0;justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  #topbar>div:last-of-type::-webkit-scrollbar{display:none}
  #topbar #pageActions{flex-wrap:nowrap}
  #topbar #pageActions .btn{flex:0 0 auto}
  #userChip{order:-1;flex:0 0 auto}
  #pageTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Widget-Leiste ist ab 1100px ausgeblendet – ihr Schalter dann auch */
  #topbar .btn[onclick^="toggleWidgets"]{display:none}
  /* Fingerfreundliche Ziele (Apple/Google nennen 44px als Untergrenze) */
  .btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .btn.sm{min-height:34px;padding:6px 12px}
  .navitem{padding:11px 10px}
  .tab{padding:11px 14px}
  /* Breite Tabellen scrollen INNERHALB ihrer Karte, statt die ganze Seite quer
     zu schieben. Auffangnetz für alle Listen ohne eigenen .tscroll-Wrapper –
     Karten haben keinen eigenen Fokus-/Overflow-Kontext, den das stören würde
     (die ⋯-Menüs sind position:fixed und bleiben davon unberührt). */
  .card,.poseditseite{overflow-x:auto}
  .kalender{overflow-x:auto}

  #tabbar{
    display:flex;align-items:stretch;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    background:var(--leiste);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--border)
  }
  .tabknopf{
    flex:1 1 0;min-width:0;min-height:48px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;background:none;border-radius:11px;padding:4px 2px;
    color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.01em
  }
  .tabknopf .tico{font-size:16px;line-height:1;padding:3px 13px;border-radius:99px;transition:background .15s}
  .tabknopf .ttext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .tabknopf.active{color:var(--accent-tief)}
  .tabknopf.active .tico{background:var(--accent-soft)}
  .tabknopf:active{background:var(--neutral-soft)}
  /* Anlegen schwebt über der Leiste: häufigste Handlung unterwegs, und ein
     sechster Tab wäre auf 375px nur noch ein Streifen */
  .tabplus{
    position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:41;
    width:54px;height:54px;border-radius:50%;border:0;
    background:var(--btn-primar-bg);color:var(--btn-primar-text);
    font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(30,26,20,.3)
  }
  .tabplus:active{transform:scale(.94)}
  /* Auf der Positionsseite deckt der schwebende Anlegen-Knopf die letzte
     Position zu und führt aus dem Beleg heraus – dort gehört er weg. */
  body:has(.poseditseite) .tabplus{display:none}
  /* Der Toast darf nicht hinter der Tableiste liegen */
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ===== <=640px: kompakte Ansicht + Karten statt Tabellen ===== */
@media(max-width:640px){
  #main{padding:12px 12px calc(76px + env(safe-area-inset-bottom))}
  #topbar{margin:-12px -12px 10px;padding:calc(9px + env(safe-area-inset-top)) 12px 9px}
  #pageTitle{font-size:19px}
  .card{padding:12px}
  .kpis{gap:8px}
  .kpi{padding:11px 13px}
  .kv{grid-template-columns:104px 1fr}
  /* iOS zoomt beim Antippen in jedes Feld unter 16px hinein und kommt nicht
     wieder heraus – deshalb sind Eingaben am Handy 16px groß. */
  input,select,textarea{font-size:16px}
  /* Auswahlfelder rechneten sich zwei Pixel niedriger als Eingabefelder – in
     einer gemischten Zeile („Warengruppe" neben „Einheit") sichtbar versetzt.
     Ein gemeinsames Mindestmaß macht sie gleich hoch und zugleich so groß wie
     die Knöpfe daneben. Schalter und Radioknöpfe bleiben außen vor. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:40px}
  .searchbar,#globalSearch{max-width:none}
  #modalOverlay{padding:0}
  /* Vollbild-Dialog: Inhalt oben, Knöpfe IMMER unten am Schirmrand – sonst
     hängen „Speichern/Abbrechen" bei kurzen Formularen mitten im Nichts. */
  #modalBox,#modalBox.wide{max-width:none;width:100%;min-height:100vh;min-height:100dvh;border-radius:0;
    padding:calc(16px + env(safe-area-inset-top)) 16px 0;display:flex;flex-direction:column}
  #modalBody{flex:1 1 auto}
  .kpalfuss span:last-child{display:none}
  /* Speichern/Abbrechen bleiben sichtbar, auch bei langen Formularen */
  #modalFoot{
    position:sticky;bottom:0;background:var(--panel);z-index:2;
    margin:16px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border)
  }
  #modalFoot .btn{flex:1 1 0;min-height:46px}
  /* Formularzeilen (.row) drängen bis zu vier Felder nebeneinander – auf 375px
     bleibt für „Straße/Hausnummer" sonst ein Stummel. Untergrenze 118px, dann
     bricht die Zeile um: zwei brauchbare Felder je Zeile statt vier Stummeln.
     (Einige Felder tragen ein enges max-width im Markup – ohne min-width geben
     ausgerechnet die freien Felder den ganzen Platz her.) */
  .row{flex-wrap:wrap}
  .row>*{min-width:0}
  /* Auch NACKTE Eingaben in einer Zeile (Kontakte, Bankverbindungen,
     Staffelpreise, Kalkulationsleiste) brauchen die Regel – sonst teilen sich
     vier Felder die Breite und aus „Funktion"/„Telefon" wird „Funktic"/„Telefor". */
  .row>div,.row>input,.row>select,.row>textarea{flex:1 1 140px;min-width:118px}
  /* Das Leitfeld bekommt am Handy eine eigene Zeile statt doppelter Breite:
     140px Grundbreite für die Nachbarn und flex-basis 0 für das Leitfeld
     hätten es zum SCHMALSTEN der Zeile gemacht. */
  .row>.w2{flex:1 1 100%;min-width:0}
  /* Beschriftungen sind unterschiedlich lang. Eine zweizeilige („Fällig /
     Ablauf (bei RS) / Liefertermin") schob ihr Feld nach unten, die Zeile stand
     versetzt. Die Spalten sind ohnehin gleich hoch (align-items:stretch) – also
     das Feld an den unteren Rand hängen: Beschriftungen oben, Felder auf einer
     Linie. Nur echte Formularspalten (Beschriftung zuerst), damit Zeilen mit
     Fließtext nicht zu Flex-Containern werden. */
  .row>div:has(>label:first-child){display:flex;flex-direction:column}
  .row>div>label:first-child+*{margin-top:auto}
  /* Wiederholzeilen (Kontakt, Bankverbindung, Staffelpreis) brauchen jetzt zwei
     Zeilen je Eintrag – ohne Rahmen wäre nicht mehr zu sehen, wo ein Eintrag
     aufhört und der nächste anfängt. */
  .row.kt-zeile,.row.bk-zeile,.row.st-zeile{
    border:1px solid var(--border);border-radius:10px;background:var(--bg);
    padding:8px;margin-bottom:8px!important
  }
  /* Untertabellen mit Eingabefeldern (Kontakte, Bankdaten, Staffelpreise)
     scrollen innerhalb des Dialogs statt ihn breiter zu machen */
  #modalBody table:not(.list){display:block;overflow-x:auto}
  .filterrow,.boardtabs,.tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .filterrow::-webkit-scrollbar,.boardtabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{height:5px}
  .filterrow::-webkit-scrollbar-thumb,.boardtabs::-webkit-scrollbar-thumb,.tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
  .erwpanel{grid-template-columns:1fr}
  #loginOverlay{padding:16px}
  #loginBox{width:100%;padding:26px 20px}
  /* Kanban: eine Spalte füllt den Schirm und rastet ein */
  .kanban{scroll-snap-type:x mandatory}
  .kcol{min-width:80vw;width:80vw;scroll-snap-align:start}
  .sums{width:100%}
  .anlegen-grid{grid-template-columns:1fr}

  /* Die Positionsseite ist am Handy selbst schon der Rahmen – 18px Innenrand
     kosten dort nur Breite, die die Positionskarten brauchen. */
  .poseditseite{padding:10px}

  /* ---- Positionseditor: Karte statt Tabellenzeile (13-projekte.js) ----
     Elf Spalten auf 390px hießen abgeschnittene Werte, Querscrollen und Zeilen,
     die 108px hoch wurden, weil ↑ ↓ ✕ in einer 44px schmalen Zelle übereinander
     rutschten. Die Zeile wird zur Karte; die Spaltenköpfe stehen als data-l an
     den Zellen (posEditRow), weil der Tabellenkopf hier entfällt. */
  table.pos,table.pos>tbody{display:block}
  table.pos>thead{display:none}
  table.pos>tbody>tr{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;
    border:1px solid var(--border);border-radius:12px;background:var(--panel);
    padding:9px 11px;margin-bottom:8px;box-shadow:var(--shadow)
  }
  table.pos>tbody>tr>td{display:flex;flex-direction:column;border:0;padding:0;min-width:0}
  /* Leerzellen (Rabatt bei Optionen, Platzhalter neben Gruppenköpfen) */
  table.pos>tbody>tr>td:empty{display:none}
  table.pos>tbody>tr>td[data-l]::before{
    content:attr(data-l);color:var(--muted);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px
  }
  /* Kopfzeile der Karte: Typ-Symbol, Positionsnummer, rechts die Zeilenknöpfe.
     Die Knöpfe stehen im Markup am Zeilenende – order holt sie nach oben, wo
     sie hingehören und nicht die Ergebniszeile zerreißen. */
  table.pos td.draghandle,table.pos td.right{flex:0 0 auto;align-self:center;flex-direction:row}
  table.pos td.draghandle{order:-3}
  table.pos td.posnr{order:-2;flex:1 1 auto;align-self:center;font-weight:700;font-size:12px}
  /* margin-left:auto statt Verlass auf die Positionsnummer – bei Leer- und
     Textzeilen bleibt die Nummernzelle leer und fällt weg. */
  table.pos td.right{order:-1;gap:5px;margin-left:auto}
  table.pos td.right .btn{min-width:42px}
  /* Bezeichnung über die volle Breite, die Zahlenfelder zu dritt darunter */
  table.pos td[data-l="Bezeichnung"],table.pos td[colspan]{flex:1 1 100%}
  table.pos td[data-l="Anz"],table.pos td[data-l="Einheit"],
  table.pos td[data-l="EK €"],table.pos td[data-l="VK €"],
  table.pos td[data-l="Rab %"]{flex:1 1 28%;min-width:88px}
  /* Ergebniszeile der Karte */
  table.pos td.p-ges,table.pos td.p-db{
    flex:1 1 40%;
    border-top:1px solid var(--border);padding-top:6px;margin-top:2px
  }
  table.pos td.p-ges{font-weight:700;align-items:flex-start;text-align:left}
  table.pos td.p-db{align-items:flex-end;text-align:right}
  /* Der Trennstrich der Zwischensumme gilt der Karte, nicht jeder Zelle */
  table.pos tr.t-zwischensumme>td{border-top:0}
  table.pos tr.t-zwischensumme{border-width:2px}
  table.pos tr.t-gruppe{background:var(--neutral-soft)}
  table.pos tr.untergruppe{margin-left:14px}
  /* Ziehen zum Sortieren gibt es am Handy nicht (HTML5-Drag kennt keine
     Berührung) – die Pfeiltasten sind dort der Weg. */
  table.pos td.draghandle{cursor:default}

  /* ---- Listen als Karten (Aufbereitung in 22c-mobil.js) ---- */
  table.list.karten{display:block;min-width:0;border-collapse:separate}
  .tscroll>table.list.karten{min-width:0}
  .tscroll:has(>table.list.karten){overflow-x:visible}
  table.list.karten>tbody{display:block}
  table.list.karten .kkopf{display:none}
  table.list.karten tr{
    position:relative;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;
    border:1px solid var(--border);border-radius:12px;background:var(--panel);
    padding:11px 13px;margin:0 0 9px;box-shadow:var(--shadow)
  }
  table.list.karten tr:last-child{margin-bottom:0}
  table.list.karten tr.click{padding-right:26px}
  /* Antippbare Karte zeigt es auch: zarter Pfeil rechts oben */
  table.list.karten tr.click::after{
    content:'›';position:absolute;right:12px;top:9px;
    color:var(--muted);font-size:19px;line-height:1
  }
  table.list.karten tr.click:active{background:var(--row-hover)}
  table.list.karten tr.gewaehlt{background:var(--accent-soft);border-color:var(--accent-hell)}
  table.list.karten td{display:block;width:100%;border:0;padding:0}
  table.list.karten td.kleer{display:none}
  table.list.karten td.kwahl{width:auto;flex:0 0 auto;padding-right:2px}
  table.list.karten td.kvor{width:auto;flex:0 0 auto;font-size:12.5px;color:var(--muted)}
  table.list.karten td.ktitel{width:auto;flex:1 1 60%;font-size:15px;font-weight:700;line-height:1.3}
  /* alle weiteren Zellen: Beschriftung links, Wert rechts */
  /* Viele Zellen tragen zwei Angaben (Wert + Zusatz in <span class="small">).
     Als Flex-Zeile stehen sie nebeneinander statt untereinander – das ist auf
     375px die bessere Aufteilung; wird es zu lang, bricht die Zeile um. */
  table.list.karten td:not(.kvor):not(.ktitel):not(.kwahl){
    display:flex;justify-content:flex-end;align-items:baseline;
    flex-wrap:wrap;gap:2px 14px;
    font-size:13px;padding:3px 0 0;text-align:right
  }
  table.list.karten td:not(.kvor):not(.ktitel):not(.kwahl)>*{min-width:0}
  /* margin-right:auto statt space-between: die Beschriftung bleibt links, und
     wenn der Wert umbricht, steht die zweite Zeile ebenfalls rechts statt
     einsam links unter der Beschriftung. */
  table.list.karten td:not(.kvor):not(.ktitel):not(.kwahl)[data-l]::before{
    content:attr(data-l);flex:0 0 auto;margin-right:auto;text-align:left;
    color:var(--muted);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;padding-top:3px
  }
  table.list.karten td.kerst{border-top:1px solid var(--border);margin-top:7px;padding-top:7px}
  table.list.karten td.num,table.list.karten td.nowrap{
    text-align:right;white-space:normal;max-width:none
  }
  /* Positionszeilen behalten ihre Bedeutung auch als Karte */
  table.list.karten tr.rowgruppe{background:var(--row-hover)}
  table.list.karten tr.rowzsum td:first-child{font-weight:700}
  table.list.karten td.ing{padding-left:0}
  table.list.karten .sumline{flex:1 0 100%;border-top:0;margin-top:6px}
}

/* ===== Barlow (Belegdruck – Banibis-Originalschrift lt. pdffonts; selbst
   gehostet, app/fonts/; latin + latin-ext für Namen wie Omeragić) ===== */
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/barlow-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/barlow-500-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/barlow-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/barlow-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===== Montserrat (selbst gehostet, app/fonts/) ===== */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/montserrat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/montserrat-600.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/montserrat-700.woff2') format('woff2');
}

/* ---- Dateien am Datensatz (19b-dateien.js) ---- */
.dateidrop{border:2px dashed var(--border);border-radius:10px;padding:14px;text-align:center;
  color:var(--muted);font-size:13px;margin:10px 0}
.dateidrop.ueber{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-tief)}

/* ---- Kalender (11c-kalender.js) ---- */
.kaldot{display:inline-block;width:9px;height:9px;border-radius:99px;vertical-align:-1px}
.kalender{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.kalkopf,.kalgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.kalkopf>div{padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
/* min-width:0 ist Pflicht: sonst wächst eine Grid-Spalte auf die Breite ihres
   längsten Eintrags und das Raster läuft aus dem Container heraus */
.kaltag{min-height:104px;min-width:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 6px}
.kaltag:nth-child(7n){border-right:0}
.kaltag.fremd{background:var(--bg);opacity:.55}
.kaltag.we{background:var(--bg)}
.kaltag.heute{box-shadow:inset 0 0 0 2px var(--accent-hell)}
.kalnr{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:3px}
.kaltag.heute .kalnr{color:var(--accent-tief)}
.kalev{font-size:11px;line-height:1.3;padding:2px 5px;margin-bottom:2px;border-left:3px solid var(--muted);
  background:var(--neutral-soft);border-radius:0 4px 4px 0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kalev:hover{background:var(--row-hover);text-decoration:underline}
.kalmehr{font-size:10.5px;color:var(--muted);padding-left:5px}
/* Mobil: Monatsraster ist auf 375px unbrauchbar – dort zählt die Terminliste */
@media(max-width:760px){.kalender{display:none}}

/* ---- Mehrfachauswahl in Belegtabellen (14b-mehrfachauswahl.js) ---- */
.auswahlbox{width:auto;margin:0;cursor:pointer}
table.list tr.gewaehlt{background:var(--accent-soft)}
.auswahlleiste{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;
  background:var(--neutral-soft);border-radius:9px;font-size:13px}
.auswahlleiste.an{display:flex}

/* ---- Positionseditor als Seite (D3) ---- */
.poseditseite{padding:18px}
.poseditseite .pos{width:100%}