:root{
  --bg:#f4f5f7; --panel:#ffffff; --border:#e3e5ea; --text:#1c2333; --muted:#69707f;
  --accent:#3552c9; --accent-soft:#e8edfd; --ok:#1e8e4e; --ok-soft:#e2f5e9;
  --warn:#b97a10; --warn-soft:#fdf1dc; --bad:#c23b3b; --bad-soft:#fbe7e7;
  --info:#31708f; --info-soft:#e4f0f6; --neutral-soft:#eceef2; --violet:#6741d9; --violet-soft:#efe9fc;
  --radius:10px; --shadow:0 1px 3px rgba(20,25,40,.07);
  --toast-bg:#1c2333; --toast-text:#fff; --row-hover:#f8f9fc;
}
*{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-soft);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(--accent);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}

#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}
#logo{font-size:17px;font-weight:800;padding:2px 10px 16px}
#logo span{color:var(--accent)}
.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);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:10.5px;text-transform:uppercase;letter-spacing:.5px;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)}
.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)!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:21px;font-weight:800;margin:0}
#pageActions{display:flex;gap:8px;flex-wrap:wrap}

.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}
.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}
.kpi .l{font-size:12px;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}

table.list{width:100%;border-collapse:collapse}
table.list th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
table.list td{padding:9px 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:#5a6272}
.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)}
.b-angebot,.b-offen{background:var(--warn-soft);color:var(--warn)}
.b-abgeschlossen,.b-verbucht{background:var(--accent-soft);color:var(--accent)}
.b-kunde{background:var(--accent-soft);color:var(--accent)}
.b-lieferant{background:var(--violet-soft);color:var(--violet)}
.b-kontakt{background:var(--neutral-soft);color:#5a6272}
.b-AN{background:var(--warn-soft);color:var(--warn)}
.b-AU{background:var(--info-soft);color:var(--info)}
.b-RE{background:var(--bad-soft);color:var(--bad)}
.b-GS{background:var(--violet-soft);color:var(--violet)}
.b-fahrt{background:var(--info-soft);color:var(--info)}
.b-BE{background:var(--violet-soft);color:var(--violet)}
.b-ER{background:var(--warn-soft);color:var(--warn)}
.b-bestellt{background:var(--info-soft);color:var(--info)}
.b-geliefert,.b-eingelagert,.b-aktiv{background:var(--ok-soft);color:var(--ok)}
.b-erhalten{background:var(--warn-soft);color:var(--warn)}
.b-RS{background:var(--warn-soft);color:var(--warn)}
.b-LF{background:var(--info-soft);color:var(--info)}
.b-WE{background:var(--violet-soft);color:var(--violet)}
.b-GU{background:var(--violet-soft);color:var(--violet)}
.b-reserviert{background:var(--warn-soft);color:var(--warn)}
.b-abgelaufen,.b-inaktiv{background:var(--bad-soft);color:var(--bad)}
.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:.5px;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}

/* 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:.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.widget{border:1px solid var(--border);border-radius:10px;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}
.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(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.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(--accent)}
.btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.searchbar{max-width:290px;margin-bottom:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
h2.sub{font-size:15px;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)}
.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);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:10px;padding:9px}
.kcol.dragover{outline:2px dashed var(--accent);outline-offset:-2px}
.kcol h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;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}
table.pos th{font-size:11px;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)}
.posbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sums{margin-top:12px;margin-left:auto;width:290px;font-size:13.5px}
.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(15,20,35,.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:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);width:100%;max-width:640px;padding:20px 22px}
#modalBox.wide{max-width:980px}
#modalTitle{font-size:16px;font-weight:800;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}

/* 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:16px;box-shadow:0 18px 50px rgba(0,0,0,.15);padding:34px 38px;width:420px;text-align:center}
#loginBox h1{font-size:20px;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:10px;padding:10px 14px;margin-bottom:8px;cursor:pointer}
.loginuser:hover{background:var(--accent-soft);border-color:var(--accent)}
.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)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Druck */
#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}
}
.doc{font-size:13px;color:#111;max-width:720px;margin:0 auto;padding:30px 10px}
.doc .dochead{display:flex;justify-content:space-between;margin-bottom:34px}
.doc .brand{font-size:19px;font-weight:800;letter-spacing:2px}
.doc h1{font-size:19px;margin:26px 0 4px}
.doc table{width:100%;border-collapse:collapse;margin-top:14px}
.doc th{text-align:left;border-bottom:2px solid #333;padding:6px 8px;font-size:11.5px;text-transform:uppercase}
.doc td{padding:7px 8px;border-bottom:1px solid #eee}
.doc tr.dgruppe td{font-weight:800;border-bottom:1px solid #333;padding-top:16px}
.doc tr.dtext td{font-style:italic;color:#555;border-bottom:0}
.doc tr.dleer td{border-bottom:0;padding:6px}
.doc tr.dsub td{font-weight:700;font-size:12px;border-bottom:1px solid #ddd}
.doc .docsums{width:280px;margin-left:auto;margin-top:12px}
.doc .docsums div{display:flex;justify-content:space-between;padding:3px 8px}
.doc .docsums .tot{font-weight:800;border-top:2px solid #333;margin-top:4px;padding-top:7px}
.doc .foot{margin-top:44px;font-size:11px;color:#666;border-top:1px solid #ddd;padding-top:10px}

/* 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)}
.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}
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) */
.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:#12141a; --panel:#1b1e27; --border:#2b303d; --text:#e7eaf2; --muted:#909aac;
  --accent:#7d97ff; --accent-soft:#242c4e; --ok:#4cc07a; --ok-soft:#17322a;
  --warn:#e0a344; --warn-soft:#3a3019; --bad:#e26c6c; --bad-soft:#3b2323;
  --info:#68b0d2; --info-soft:#1a2d38; --neutral-soft:#252a36; --violet:#a98ef2; --violet-soft:#2a2046;
  --shadow:0 1px 3px rgba(0,0,0,.45);
  --toast-bg:#e7eaf2; --toast-text:#12141a; --row-hover:#232836;
}
body.dark .btn.primary,body.dark .tri.active{color:#0f1220}
body.dark #modalOverlay{background:rgba(0,0,0,.6)}
/* 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%}

/* 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}