:root{
  --paper:#EDF0F2; --sheet:#FFFFFF; --ink:#1B2A3A; --ink-2:#4A5866; --ink-3:#7D8995;
  --line:#D8DEE3; --line-2:#E8ECEF; --soll:#2D5A8C; --haben:#A8322D; --stamp:#2E7D5B; --warn:#B7791F;
  --soll-bg:#E6EEF7; --haben-bg:#F8E9E8; --stamp-bg:#E5F2EC; --warn-bg:#FBF1E1;
  --nav:#1B2A3A; --nav-2:#24374B; --nav-ink:#C9D3DD;
  --r-s:4px; --r-m:8px;
  --font:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* weitere Flächen und Linien */
  --sheet-2:#F7F9FA; --sheet-3:#FAFBFC; --hover:#F4F7FA; --total-bg:#EEF2F5; --field:#FFFFFF;
  --line-3:#AEBBC7; --dot:#B9C2CA;
  /* Akzentfarben als Fläche mit weißer Schrift */
  --soll-fill:#2D5A8C; --soll-fill-h:#244C77; --stamp-fill:#2E7D5B; --haben-fill:#A8322D; --grey-fill:#7D8995; --warn-fill:#B7791F; --on-fill:#FFFFFF;
  /* Ränder getönter Flächen */
  --soll-line:#C9D9EA; --haben-line:#E3B4B1; --warn-line:#E8CFA3; --stamp-line:#BFDCCD;
  /* Schrift auf getönten Flächen, Kategorie-Farben */
  --warn-ink:#7A520F; --lila:#5D3F8A; --lila-bg:#EEE7F6; --lila-line:#7A5AAE; --teal:#25606B; --teal-bg:#E6F1F3; --teal-line:#2F7480;
  --grey-ink:#3E4E5E; --grey-bg:#E9EDF1; --grey-line:#5B6B7B;
  --amber:#D9932B; --bar-aus:#D79A97; --bar-vj:#B8C4D0; --sw-blue:#9FB3C8;
  --mark-bg:#FFE9A8; --ziel-bg:#FFF6D6; --err-bg:#FFF5F5; --warn-soft:#FFFCFB;
  --focus:#5B8FC7; --preview-bg:#5E6A75; --inverse-bg:#1B2A3A; --inverse-ink:#FFFFFF;
  --glass:rgba(255,255,255,.55); --shadow-rgb:27,42,58; --backdrop:rgba(20,30,40,.45); --login-top:#E3E8EC;
  --nav-accent:#7FB3E0; --nav-muted:#8193A5; --nav-line:#3A5068;
  /* Diagramme (geprüfte Kategorie-Palette; dunkel: eigene Stufen für die dunkle Fläche) */
  --ch-c1:#2a78d6; --ch-c2:#eb6834; --ch-c3:#1baf7a; --ch-c4:#eda100; --ch-c5:#e87ba4; --ch-c6:#008300; --ch-c7:#6250d6; --ch-c8:#e34948;
  --ch-ink:#1B2A3A; --ch-cmp:#898781; --ch-rest:#c3c2b7; --ch-base:#9AA5B1; --ch-hl:rgba(27,42,58,.05);
  --ch-seq1:#86b6ef; --ch-seq2:#5598e7; --ch-seq3:#2a78d6; --ch-seq4:#1c5cab; --ch-seq5:#104281;
  color-scheme:light;
}
/* Dunkler Modus (Schalter auf der Übersicht und unten in der Seitenleiste; gespeichert je Browser).
   Nur für den Bildschirm – gedruckt wird immer hell. */
@media screen{html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0F151B; --sheet:#18212A; --ink:#E3E9EF; --ink-2:#B2BDC8; --ink-3:#8A97A4;
  --line:#313E4B; --line-2:#26313C; --soll:#7FB1E6; --haben:#EF8780; --stamp:#68C99A; --warn:#E0AE58;
  --soll-bg:#1A2C40; --haben-bg:#3A2124; --stamp-bg:#16312A; --warn-bg:#372B17;
  --nav:#0B1117; --nav-2:#16212C; --nav-ink:#B8C4D0;
  --sheet-2:#1D2731; --sheet-3:#151D25; --hover:#212C37; --total-bg:#24303C; --field:#121A21;
  --line-3:#4D5C6B; --dot:#56636F;
  --soll-fill:#3A6EA7; --soll-fill-h:#4880BC; --stamp-fill:#2B7955; --haben-fill:#B0443E; --grey-fill:#5D6A77; --warn-fill:#9C6818;
  --soll-line:#2F4C6C; --haben-line:#6A3A3B; --warn-line:#69532A; --stamp-line:#2E5A47;
  --warn-ink:#E8C27C; --lila:#C6AEF2; --lila-bg:#2A2340; --lila-line:#8E73C9; --teal:#7FCAD6; --teal-bg:#16323A; --teal-line:#3A8F9C;
  --grey-ink:#C4CED8; --grey-bg:#26313C; --grey-line:#6E7E8E;
  --bar-aus:#C0726D; --bar-vj:#5E6E7F; --sw-blue:#5F7A96;
  --mark-bg:#5C4B12; --ziel-bg:#3D3416; --err-bg:#3A2124; --warn-soft:#2A1E1E;
  --focus:#7FB1E6; --preview-bg:#26303A; --inverse-bg:#E3E9EF; --inverse-ink:#0F151B;
  --glass:rgba(255,255,255,.04); --shadow-rgb:0,0,0; --backdrop:rgba(0,0,0,.6); --login-top:#16202A;
  --nav-muted:#7A8B9C; --nav-line:#2A3A4A;
  --ch-c1:#3987e5; --ch-c2:#d95926; --ch-c3:#199e70; --ch-c4:#c98500; --ch-c5:#d55181; --ch-c6:#008300; --ch-c7:#9085e9; --ch-c8:#e66767;
  --ch-ink:#E3E9EF; --ch-cmp:#898781; --ch-rest:#77756f; --ch-base:#4D5C6B; --ch-hl:rgba(255,255,255,.06);
  --ch-seq1:#184f95; --ch-seq2:#256abf; --ch-seq3:#3987e5; --ch-seq4:#6da7ec; --ch-seq5:#9ec5f4;
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--soll)}
.num,td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.neg{color:var(--haben)} .pos{color:var(--stamp)}
.muted{color:var(--ink-3)} .small{font-size:12px}
h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-.2px}
h2{font-size:16px;font-weight:600;margin:0 0 10px}
h3{font-size:14px;font-weight:600;margin:16px 0 6px}

/* Grundgerüst */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);height:100vh}
.nav{background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;overflow:auto}
.brand{padding:14px 18px 8px;display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:17px;letter-spacing:.2px}
.brand svg{flex:none}
.firm{margin:2px 12px 8px;background:var(--nav-2);border-radius:var(--r-m);padding:7px 10px;cursor:pointer;border:1px solid transparent;text-align:left;color:var(--nav-ink);display:block;width:calc(100% - 24px)}
.firm:hover{border-color:var(--nav-line)}
.firm b{display:block;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.firm span{font-size:12px}
.nav a{display:flex;align-items:center;justify-content:space-between;padding:5px 18px;color:var(--nav-ink);text-decoration:none;border-left:3px solid transparent;font-size:13.5px}
.nav a:hover{background:var(--nav-2);color:#fff}
.nav a.on{background:var(--nav-2);color:#fff;border-left-color:var(--nav-accent)}
.nav .grp{padding:10px 18px 2px;font-size:11.5px;color:var(--nav-muted);text-transform:uppercase;letter-spacing:.5px}
.nav .badge{background:var(--nav-accent);color:var(--nav);border-radius:10px;padding:0 7px;font-size:11px;font-weight:600}
.nav .foot{margin-top:auto;padding:12px 18px;font-size:12px;color:var(--nav-muted);flex:none}
.nav .foot button{background:none;border:1px solid var(--nav-line);color:var(--nav-ink);border-radius:var(--r-s);padding:3px 8px;cursor:pointer}
.main{overflow:auto;position:relative}
.page{padding:22px 28px 60px;max-width:1500px}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.head .sp{flex:1}
/* Firmenlogo oben links auf der Übersicht – immer auf weißem Grund, weil Logos für Papier gemacht sind */
.head .firm-logo{display:inline-flex;align-items:center;justify-content:center;height:48px;max-width:180px;padding:5px 10px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-m);flex:none}
.head .firm-logo img{display:block;max-height:38px;max-width:160px;object-fit:contain}
.head .dash-titel{display:flex;flex-direction:column;min-width:0}
.head .dash-titel h1{margin:0;line-height:1.15}
.head .dash-titel .muted{font-size:13px;margin-top:2px}
@media (max-width:640px){.head .firm-logo{height:40px;max-width:130px}.head .firm-logo img{max-height:30px;max-width:110px}}

/* Bedienelemente */
.btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--sheet);border-radius:var(--r-s);padding:6px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--soll-fill);border-color:var(--soll-fill);color:var(--on-fill)}
.btn.pri:hover{background:var(--soll-fill-h);border-color:var(--soll-fill-h)}
.btn.ok{background:var(--stamp-fill);border-color:var(--stamp-fill);color:var(--on-fill)}
.btn.danger{color:var(--haben)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--line-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{padding:3px 8px;font-size:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
input,select,textarea{border:1px solid var(--line);border-radius:var(--r-s);padding:6px 8px;background:var(--field);min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--soll);outline:none;box-shadow:0 0 0 3px var(--soll-bg)}
input[type=checkbox]{width:auto}
textarea{resize:vertical}
label.f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-2)}
label.f>input,label.f>select,label.f>textarea{font-size:14px;color:var(--ink)}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2} .span3{grid-column:span 3} .span4{grid-column:1/-1}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--soll);font-weight:600}
.tabs button .c{color:var(--ink-3);font-weight:400;margin-left:4px}

.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.sheet.flush{padding:0;overflow:auto}
.note{background:var(--warn-bg);border-left:3px solid var(--warn);padding:8px 12px;border-radius:var(--r-s);margin:8px 0}
.note.info{background:var(--soll-bg);border-left-color:var(--soll)}
.note.bad{background:var(--haben-bg);border-left-color:var(--haben)}
.note.good{background:var(--stamp-bg);border-left-color:var(--stamp)}

/* Tabellen */
table.t{width:100%;border-collapse:collapse}
table.t th{font-weight:600;font-size:12px;color:var(--ink-2);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--sheet-2);position:sticky;top:0;z-index:1}
table.t th.r{text-align:right}
table.t td{padding:7px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:var(--hover)}
table.t tr.sel td{background:var(--soll-bg)}
table.t tr.sum td{font-weight:600;border-top:1px solid var(--ink-3);background:var(--sheet-2)}
table.t tr.total td{font-weight:700;border-top:2px solid var(--ink);background:var(--total-bg)}
table.t td.ind{padding-left:28px}
table.t tfoot td{font-weight:600;border-top:1px solid var(--ink-3)}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.trunc{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Stempel – das Markenzeichen */
.stamp{display:inline-block;transform:rotate(-4deg);border:1.5px solid currentColor;border-radius:3px;padding:0 6px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:18px;white-space:nowrap;opacity:.9}
.stamp.s0{color:var(--warn)} .stamp.s1{color:var(--soll)} .stamp.s2{color:var(--stamp)} .stamp.s3{color:var(--ink-2)} .stamp.dup{color:var(--haben)}
.stamp.big{font-size:15px;line-height:26px;padding:0 10px;border-width:2px}

.chip{display:inline-block;background:var(--line-2);border-radius:10px;padding:0 8px;font-size:12px;margin:1px 2px 1px 0}
.chip.sug{background:var(--soll-bg);color:var(--soll);cursor:pointer}
.chip.sug:hover{background:var(--soll-line)}

/* Dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px}
.kpi .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .l{font-size:12px;color:var(--ink-2)}
.kpi.link{cursor:pointer} .kpi.link:hover{border-color:var(--ink-3)}
.dash{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.bars{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:10px}
.bars .m{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bars .pair{display:flex;gap:2px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.bars .b{width:42%;max-width:16px;border-radius:2px 2px 0 0}
.bars .b.e{background:var(--soll)} .bars .b.a{background:var(--bar-aus)}
.bars .lbl{font-size:11px;color:var(--ink-3)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* Beleg-Detail */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(540px,1fr);gap:16px;height:calc(100vh - 110px)}
.preview{background:var(--preview-bg);border-radius:var(--r-m);overflow:hidden;display:flex;align-items:center;justify-content:center}
.preview iframe,.preview embed{width:100%;height:100%;border:0;background:#fff}
.preview img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.form-pane{overflow:auto;padding-right:4px}
.lines{table-layout:fixed;border-collapse:collapse}
.lines td{padding:4px 4px;border-bottom:0}
.lines th{font-weight:600;color:var(--ink-2);padding:0 4px}
.lines input,.lines select{width:100%}
.lines td.del{width:28px}
.drop{border:2px dashed var(--line-3);border-radius:var(--r-m);padding:22px;text-align:center;color:var(--ink-2);background:var(--glass);cursor:pointer;transition:background .15s}
.drop.over{background:var(--soll-bg);border-color:var(--soll)}
.progress{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:var(--soll);transition:width .2s}
pre.ocr{white-space:pre-wrap;font:12px/1.4 var(--mono);background:var(--sheet-2);border:1px solid var(--line);padding:10px;border-radius:var(--r-s);max-height:300px;overflow:auto}

/* Dialog */
dialog{border:0;border-radius:var(--r-m);padding:0;background:var(--sheet);color:var(--ink);box-shadow:0 20px 60px rgba(var(--shadow-rgb),.35);max-width:min(960px,94vw);width:100%}
dialog::backdrop{background:var(--backdrop)}
dialog .dh{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
dialog .dh h2{margin:0;flex:1}
dialog .db{padding:16px 18px;max-height:70vh;overflow:auto}
dialog .df{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--sheet-2)}

#toast{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:1000}
#toast div{background:var(--inverse-bg);color:var(--inverse-ink);padding:10px 14px;border-radius:var(--r-m);max-width:420px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#toast div.err{background:var(--haben-fill);color:var(--on-fill)}

/* Rechnungseditor */
.items td{padding:4px}
.items input,.items select,.items textarea{width:100%}
.totals{margin-left:auto;min-width:300px}
.totals td{padding:3px 8px}

/* Onboarding */
.welcome{max-width:640px;margin:8vh auto;padding:0 20px}
.welcome .mark{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.welcome .mark b{font-size:28px;font-weight:600;letter-spacing:-.3px}

.firmcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.firmcard{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;cursor:pointer}
.firmcard:hover{border-color:var(--soll)}
.firmcard.on{border-color:var(--soll);box-shadow:inset 3px 0 0 var(--soll)}

.report-head{display:none}
/* Auswahl in den PDF-Dialogen der Auswertungen (BWA-Teile, Auswertungsmappe, Kontenblatt) */
.ap-wahl{display:flex;flex-direction:column;gap:1px;margin:4px 0 2px;min-width:min(440px,80vw)}
.ap-opt{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:var(--r-s);cursor:pointer}
.ap-opt:hover{background:var(--hover)}
.ap-opt input{margin-top:3px;flex:none}
.ap-opt b{display:block;font-weight:600}
.ap-opt .small{display:block;margin-top:1px}
.ap-deck{margin-top:6px;border-top:1px solid var(--line);padding-top:10px;border-radius:0}
.ap-sub{margin:-2px 0 4px 26px;padding-left:6px;border-left:2px solid var(--line)}
.ap-sub .ap-opt{padding:3px 8px}
.ap-sub.aus{opacity:.45;pointer-events:none}
@media print{
  .nav,.noprint,.head .btn,.tabs,#toast{display:none!important}
  .app{display:block;height:auto} .main{overflow:visible} .page{padding:0;max-width:none}
  body{background:#fff;font-size:11px} .sheet{border:0;padding:0}
  .report-head{display:block;margin-bottom:10px}
  table.t th{position:static}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr} .nav{display:none}
  .split{grid-template-columns:1fr;height:auto} .preview{height:60vh}
  .dash{grid-template-columns:1fr} .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
#upd-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1001;background:var(--inverse-bg);color:var(--inverse-ink);padding:10px 12px 10px 16px;border-radius:var(--r-m);box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;gap:12px;align-items:center;font-size:14px}
#upd-bar .btn{white-space:nowrap}
.dash>*{min-width:0}
.sumrow{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.sumrow>div{display:flex;flex-direction:column;gap:2px}
.sumrow b{font-size:17px}
.dash .grid{grid-template-columns:minmax(0,1fr)}
.dash table.t td{overflow-wrap:anywhere;hyphens:auto}
.dash{align-items:start}

/* ---- Fundament 1.3: Navigation, Firmenauswahl, Übersicht, Einstellungen ---- */
.nav .navlist{display:flex;flex-direction:column;padding-bottom:6px}
.firm:focus-visible{outline:2px solid var(--nav-accent)}
@media (max-height:1000px){ .nav a{padding:3px 18px} .nav .grp{padding:7px 18px 1px} .brand{padding:10px 18px 6px} .firm{padding:5px 10px} }
@media (max-height:760px){ .nav a{padding:2px 18px;font-size:13px} .nav .grp{padding:5px 18px 0} }

.picker{max-width:980px;margin:6vh auto 40px;padding:0 24px}
.picker .mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.picker .mark b{font-size:26px;font-weight:600;letter-spacing:-.3px}
.picker h1{font-size:24px;margin-bottom:4px}
.picker .pk-search{width:min(420px,100%);margin:14px 0 4px;font-size:15px;padding:8px 10px}
.picker .pk-search-l{display:flex;flex-direction:column;gap:3px;margin:14px 0 8px}
.picker .pk-search-l .pk-search{margin:0}
.pickcard .pc-nr b{color:var(--ink-2);font-weight:600}
.pickcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:16px}
.pickcard{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s, box-shadow .12s}
.pickcard:hover,.pickcard:focus-visible{border-color:var(--soll);box-shadow:0 2px 10px rgba(var(--shadow-rgb),.08)}
.pickcard[hidden]{display:none}
.pickcard .avatar{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px;overflow:hidden;background:#fff}
.pickcard .avatar img{max-width:100%;max-height:100%;object-fit:contain}
.pickcard .pc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pickcard .pc-body b{font-size:15px;overflow:hidden;text-overflow:ellipsis}
.warn-t{color:var(--warn)}

.placeholder{text-align:center;padding:48px 24px;color:var(--ink-2)}
.placeholder svg{color:var(--ink-3);margin-bottom:8px}
.placeholder h2{margin-bottom:6px}
.placeholder p{max-width:460px;margin:0 auto 16px}

.dash-period{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 14px}
.dash-period select{padding:5px 8px}
.dash-period .btn.ghost{padding:4px 10px;font-size:16px;line-height:1}
.dash-period .btn.ghost.sm{font-size:12px}
.delta{display:block;font-size:12px;margin-top:2px}
.bars .m.click{cursor:pointer}
.bars .m.click:hover .pair{background:var(--line-2);border-radius:3px}
.bars.days{gap:2px}
.bars.days .b{width:45%;max-width:7px}
.bars.days .lbl{font-size:10px}
.widget h2 a{color:inherit;text-decoration:none}
.widget h2 a:hover{text-decoration:underline}

.form-h{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-2);font-size:14px}
#sf>.form-h:first-child{margin-top:0;padding-top:0;border-top:0}
.form-hint{margin:0}
.checkrow{color:var(--ink);flex-wrap:nowrap;align-items:flex-start}
.checkrow>input[type=checkbox]{flex:none;margin-top:2px}
.secret-row{display:flex;gap:6px;align-items:center}
.secret-row input{flex:1;min-width:0;font-size:14px;color:var(--ink)}
.secret-state{font-size:12px;white-space:nowrap;color:var(--ink-3)}
.secret-state.ok{color:var(--stamp)}
.secret-state.ok::before{content:"✓ "}
.settings-split{align-items:start}
.logo-prev{min-height:120px;border:1px dashed var(--line);border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;padding:14px;
  background-color:#fff;background-image:linear-gradient(45deg,#F1F3F5 25%,transparent 25%),linear-gradient(-45deg,#F1F3F5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#F1F3F5 75%),linear-gradient(-45deg,transparent 75%,#F1F3F5 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.logo-prev img{max-width:100%;max-height:160px;object-fit:contain}
.logo-prev.empty{background-image:none}
@media (max-width:1100px){ .settings-split{grid-template-columns:minmax(0,1fr)} }

/* Einstellungen: senkrechte Reiterliste (viele Bereiche) */
.settings-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
.stabs{display:flex;flex-direction:column;gap:1px;position:sticky;top:0}
.stabs button{border:0;background:none;text-align:left;padding:7px 12px;border-radius:var(--r-s);cursor:pointer;color:var(--ink-2);border-left:3px solid transparent}
.stabs button:hover{background:var(--line-2);color:var(--ink)}
.stabs button.on{background:var(--sheet);color:var(--ink);font-weight:600;border-left-color:var(--soll);box-shadow:0 1px 0 var(--line)}
@media (max-width:1000px){ .settings-layout{grid-template-columns:minmax(0,1fr)} .stabs{flex-direction:row;flex-wrap:wrap;position:static} }
.warn{color:var(--warn)}
.pickcard .avatar.has-logo{width:76px;border:1px solid var(--line-2);padding:4px}

/* Automatisches Speichern – Statusanzeige */
#autosave{position:fixed;left:248px;bottom:16px;z-index:1002;font-size:12.5px;padding:5px 11px;border-radius:999px;background:var(--sheet);border:1px solid var(--line);color:var(--ink-2);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:0 2px 8px rgba(var(--shadow-rgb),.08)}
#autosave.on{opacity:1;transform:none}
#autosave.as-ok{color:var(--stamp)}
#autosave.as-fehler{color:var(--haben);background:var(--err-bg)}
#autosave.as-warten{color:var(--warn)}

/* ---- Zugang, Anmeldung, Rechte, automatisches Speichern (1.3, Paket G) ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,var(--login-top) 0%,var(--paper) 60%)}
.login-card{width:min(420px,100%);padding:26px 28px 22px;box-shadow:0 12px 40px rgba(var(--shadow-rgb),.10)}
.login-card .mark{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-card .mark b{font-size:21px;font-weight:600;letter-spacing:-.2px}
.login-card h1{font-size:20px;margin-bottom:4px}
.login-card form{margin:14px 0 10px;grid-template-columns:minmax(0,1fr)}
.login-card label.f>input,.login-card .pw-row input{width:100%}
.login-card .lg-btn{justify-content:center;padding:9px 12px;font-size:15px}
.login-card .lg-fp code{display:block;font:11.5px/1.5 var(--mono);word-break:break-all;background:var(--sheet-2);border:1px solid var(--line);border-radius:var(--r-s);padding:6px 8px;margin:4px 0}
.login-card details summary{cursor:pointer;color:var(--soll)}
.lg-err{color:var(--haben);font-size:13px;min-height:1px}
.lg-err:empty{display:none}
.pw-row{display:flex;gap:6px;align-items:center}
.pw-row input{flex:1;min-width:0;font-size:14px;color:var(--ink)}
.pw-meter{display:inline-block;width:120px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;vertical-align:middle;margin-right:8px}
.pw-meter i{display:block;height:100%;width:0;background:var(--haben);transition:width .2s}
.pw-meter.s1 i{width:25%} .pw-meter.s2 i{width:50%;background:var(--warn)} .pw-meter.s3 i{width:75%;background:var(--stamp)} .pw-meter.s4 i{width:100%;background:var(--stamp)}
.userbox{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--nav-ink)}
.userbox .ub-av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--nav-2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;border:1px solid var(--nav-line)}
.userbox .ub-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.userbox .ub-t b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-act{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.nav .foot .ub-act button{font-size:11.5px;padding:2px 7px}
.pk-user{margin-top:22px}
.pk-user .userbox{color:var(--ink-2)} .pk-user .userbox .ub-t b{color:var(--ink)} .pk-user .userbox .ub-av{background:var(--soll-fill);border-color:var(--soll-fill)}
.pk-user .ub-act button{background:none;border:1px solid var(--line);border-radius:var(--r-s);padding:3px 8px;cursor:pointer;color:var(--ink-2)}
.ro-bar{background:var(--soll-bg);color:var(--ink-2);border-bottom:1px solid var(--line);padding:7px 28px;font-size:13px;position:sticky;top:0;z-index:5}
input.invalid,select.invalid,textarea.invalid{border-color:var(--haben);box-shadow:0 0 0 3px var(--haben-bg)}
label.btn.disabled{opacity:.5;pointer-events:none}
.row-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row-note>span{flex:1;min-width:240px}
.dash-sections{display:grid;gap:16px;margin-top:16px}
.dash-sections:empty{display:none}
.rf-state{margin-top:8px}
.rf-pending{position:sticky;top:0;z-index:3;box-shadow:0 4px 14px rgba(var(--shadow-rgb),.08)}
.note.warn{background:var(--warn-bg);border-left-color:var(--warn)}
@media print{ .ro-bar,#autosave{display:none!important} }
button.chip{border:1px solid transparent;font:inherit;font-size:12px;line-height:1.5;cursor:pointer;color:inherit}
@media (max-width:900px){ #autosave{left:16px} }

/* Zahlungsabgleich im Beleg (passende Zahlung / doppelte Barzahlung) */
.pm-box { margin-top: 10px; }
.pm-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.pm-row .pm-info { min-width: 0; }
.pm-row .btn { flex: none; }
@media (max-width: 1200px) { .pm-row { flex-direction: column; align-items: flex-start; } }

/* Hell/Dunkel-Schalter */
.theme-sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--sheet);color:var(--ink-3);border-radius:999px;padding:5px 11px;cursor:pointer;font:inherit;font-size:12.5px;line-height:1;white-space:nowrap}
.theme-sw:hover{border-color:var(--ink-3)}
.theme-sw .ts-w{display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.theme-sw .ts-w.on{color:var(--ink);font-weight:600}
.theme-sw .ts-track{position:relative;width:34px;height:20px;border-radius:10px;background:var(--line);flex:none;transition:background .2s}
.theme-sw .ts-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.theme-sw[aria-checked="true"] .ts-track{background:var(--soll-fill)}
.theme-sw[aria-checked="true"] .ts-knob{transform:translateX(14px)}
.nav .foot .theme-sw,.nav .theme-sw{background:transparent;border:1px solid var(--nav-line);color:var(--nav-muted);margin:0 0 12px;padding:5px 10px;border-radius:999px}
.nav .theme-sw .ts-w.on{color:#fff}
.nav .theme-sw .ts-track{background:var(--nav-2);box-shadow:inset 0 0 0 1px var(--nav-line)}
.nav .theme-sw[aria-checked="true"] .ts-track{background:var(--nav-accent);box-shadow:none}
@media (prefers-reduced-motion:reduce){.theme-sw .ts-knob,.theme-sw .ts-track{transition:none}}
.theme-sw.ts-klein .ts-w span{display:none}
.theme-sw.ts-klein{padding:5px 9px;gap:6px}
/* Einstellungen → Firma: Mandantennummer (nur Anzeige) */
.mnr-row{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink-2)}.mnr-row b{font-size:16px;letter-spacing:.02em;color:var(--ink)}.mnr-row small{font-size:12px}
/* Einstellungen → Kopie an mich: Schalter je Art von E-Mail */
.kopie-sheet .kopie-adr{max-width:420px;margin:6px 0 4px}
.kopie-list{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--line-2)}
.kopie-row{display:flex;align-items:center;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line-2);cursor:pointer}
.kopie-row .kr-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.switch{position:relative;display:inline-flex;flex:none;width:42px;height:24px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:12px;background:var(--line-3);transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+i{background:var(--stamp-fill)}
.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:2px solid var(--focus);outline-offset:2px}
.switch input:disabled+i{opacity:.5}
.kopie-hint{margin:6px 0 0}
/* Support */
.sp-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:16px;align-items:start}
.sp-form{display:flex;flex-direction:column;gap:12px}
.sp-form .f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-2)}
.sp-betreff{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-s);background:var(--field);overflow:hidden}
.sp-betreff .sp-basis{display:flex;align-items:center;padding:0 8px;background:var(--sheet-2);color:var(--ink-2);font-size:13px;white-space:nowrap;border-right:1px solid var(--line-2);max-width:60%;overflow:hidden;text-overflow:ellipsis}
.sp-betreff input{border:0;flex:1;min-width:0;border-radius:0}
.sp-antwort{max-width:360px}
.sp-dateien{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sp-liste{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.sp-side{display:flex;flex-direction:column;gap:16px}
.sp-kv td{padding:6px 8px}
.sp-vl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sp-vl li{display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line-2);padding-bottom:8px}
@media (max-width:860px){.sp-layout{grid-template-columns:1fr}.sp-betreff{flex-direction:column}.sp-betreff .sp-basis{max-width:none;padding:6px 8px;border-right:0;border-bottom:1px solid var(--line-2);white-space:normal}}
.chip .linklike{background:none;border:0;padding:0 2px;margin-left:2px;color:var(--ink-3);cursor:pointer;font:inherit}
.chip .linklike:hover{color:var(--haben)}
/* Dokumente → Subunternehmerverträge */
.sv-tabs a{padding:8px 12px;color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.sv-tabs a:hover{color:var(--ink)}
.sv-tabs a.on{color:var(--ink);border-bottom-color:var(--soll);font-weight:600}
.sv-st{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;background:var(--grey-bg);color:var(--grey-ink);white-space:nowrap}
.sv-st-ok{background:var(--stamp-bg);color:var(--stamp)}
.sv-st-wait{background:var(--warn-bg);color:var(--warn-ink)}
.sv-st-del{background:var(--haben-bg);color:var(--haben)}
.sv-form{display:flex;flex-direction:column;gap:14px;max-width:980px}
.sv-form .sheet h2{margin-top:0}
.sv-wahl{max-width:520px;margin-bottom:12px}
.sv-req{color:var(--haben)}
.sv-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:16px;align-items:start}
.sv-side{display:flex;flex-direction:column;gap:16px}
.sv-kv td{padding:5px 8px;vertical-align:top}
.sv-kv td:first-child{width:34%}
.sv-vg{border-bottom:1px solid var(--line-2);padding:6px 0}
.sv-vg summary{cursor:pointer}
.sv-ev{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.sv-pdf{height:min(80vh,1100px)}
.sv-pdf iframe{width:100%;height:100%;border:0;background:var(--paper)}
.linklike-l{color:var(--soll);text-decoration:underline;cursor:pointer}
@media (max-width:900px){.sv-detail{grid-template-columns:1fr}}
#sv-mail[hidden],#sv-ag-padbox[hidden],#sv-ag-alt[hidden],.sv-form [hidden],.sp-form [hidden],.kopie-sheet [hidden]{display:none!important}

/* 1.14: Server-Betrieb – Bestätigen mit Handy-Code, Hinweis nach dem Umzug */
dialog.bst-dlg{max-width:min(440px,94vw)}
dialog.bst-dlg form{margin:0}
.umzug-bar{background:var(--warn-bg,#fff4d6);color:var(--ink);border-bottom:1px solid var(--line);padding:10px 18px;font-size:14px;line-height:1.45}
.umzug-bar a{font-weight:600}
.picker .umzug-bar{border:1px solid var(--line);border-radius:var(--r-m);margin:0 0 14px}
.srv-box .srv-adr{font-size:18px;font-weight:600;word-break:break-all}
.srv-box .srv-qr svg{width:120px;height:120px}
.umz-schritte{margin:8px 0 0;padding-left:20px}
.umz-schritte li{margin:4px 0}
.umz-befehl{display:block;white-space:pre-wrap;word-break:break-all;background:var(--sheet-2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;font-size:13px}
.umz-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0}
.umz-bar span{display:block;height:100%;background:var(--accent,#2D5A8C);transition:width .4s}