/* BIZZKALK Designsystem v1 – Tokens, Komponenten, Hell/Dunkel. Ohne Build, ohne Fremdschriften (Systemschrift), CSP-konform (keine Inline-Styles nötig). */
:root{
  --pri:#2457d6; --accent:var(--pri); --pri-d:color-mix(in srgb,var(--pri) 78%,#000);
  --pri-soft:color-mix(in srgb,var(--pri) 11%,transparent); --pri-line:color-mix(in srgb,var(--pri) 35%,transparent);
  --link:var(--pri);
  --bg:#f4f6fb; --surface:#fff; --surface-2:#f8f9fc; --line:#e3e7ef; --line-strong:#ccd3e0;
  --fg:#101828; --mut:#586174; --faint:#657086;
  --ok:#146c37; --ok-bg:#dff5e6; --warn:#8a5300; --warn-bg:#fdf0cf; --bad:#b4231c; --bad-bg:#fde4e2; --info:#1a4fc4; --info-bg:#e2ebff;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.05);
  --shadow-lg:0 24px 60px rgba(16,24,40,.22),0 8px 20px rgba(16,24,40,.12);
  --r-sm:.4rem; --r:.65rem; --r-lg:1rem;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --side-w:252px; --top-h:58px;
  --font:system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs:15px;
  --btn-h:38px; --btn-sm-h:30px; --icon-w:38px; --icon-sm-w:30px; --field-h:38px;
  --ring:0 0 0 3px color-mix(in srgb,var(--pri) 38%,transparent);
  /* --- Werte, die vorher als Einzelwerte in den Regeln standen. Gleiche Werte wie bisher, nur benannt. --- */
  --black:#000; --paper:#fff;
  --on-pri:#fff; --on-ok:#fff; --on-bad:#fff;
  --on-pri-fill:rgba(255,255,255,.16); --on-pri-fill-hover:rgba(255,255,255,.28); --on-pri-line:rgba(255,255,255,.38);
  --shade:rgba(8,12,24,.5); --shade-strong:rgba(8,12,24,.55);
  --lamp-ok:#22a35a; --lamp-warn:#e5a800; --lamp-bad:#e0453c;
  --hint:#d9a400; --hint-bg:rgba(217,164,0,.12);
  --receipt-bg:#fafafa; --receipt-line:#aaa;
  --chart-1:#0f4c81; --liq-in:#1a8a4a; --liq-out:#c0392b;
  --pri-tint:rgba(37,99,235,.06); --bad-tint:rgba(200,60,60,.06);
  --hero-2:#7c3aed; --login-2:#6d28d9;
  --shadow-up:0 -6px 18px rgba(16,24,40,.12);
  --boot-fg:#444; --boot-fg-dark:#ccc;
  /* Bestandswerte der Abschnitte 1.4.3–1.5.x: dort wurden --muted, --bd und --accent-soft benutzt,
     aber nie definiert – wirksam waren die (hier unverändert übernommenen) Ersatzwerte. */
  --mut-legacy:#667; --line-legacy:#ddd; --pri-soft-legacy:rgba(40,100,200,.14);
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0a0f1d; --surface:#111829; --surface-2:#151e33; --line:#232e48; --line-strong:#33405f;
  --fg:#e9edf6; --mut:#a1acc4; --faint:#8190ab;
  --link:color-mix(in srgb,var(--pri) 52%,#fff);
  --pri-soft:color-mix(in srgb,var(--pri) 24%,transparent);
  --ok:#6ee79a; --ok-bg:#12331f; --warn:#f6c453; --warn-bg:#3a2d0c; --bad:#ff8b84; --bad-bg:#401a18; --info:#8db1ff; --info-bg:#162a57;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 16px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.65);
  color-scheme:dark;
}
html[data-zoom="gross"]{--fs:18px}
html[data-zoom="sehr"]{--fs:22px}
html[data-buttons="gross"]{--btn-h:44px;--btn-sm-h:36px;--icon-w:44px;--icon-sm-w:36px;--field-h:44px}
html[data-buttons="sehr"]{--btn-h:48px;--btn-sm-h:40px;--icon-w:48px;--icon-sm-w:40px;--field-h:48px}
html[data-contrast="hoch"]{
  --fg:#0b0b0b; --mut:#1a1a1a; --faint:#242424;
  --bg:#fff; --surface:#fff; --surface-2:#f4f4f4;
  --line:#1a1a1a; --line-strong:#111;
  --pri:#0033a0; --link:#0033a0;
  --ok:#0b5c2e; --bad:#9b1b1b; --warn:#7a4100;
}
html[data-theme="dark"][data-contrast="hoch"]{
  --fg:#fff; --mut:#f4f4f4; --faint:#e8e8e8;
  --bg:#000; --surface:#000; --surface-2:#161616;
  --line:#fff; --line-strong:#fff;
  --pri:#ffe14a; --link:#ffe14a; --on-pri:#111;
  --ok:#c6ffc0; --bad:#ffc1bb; --warn:#ffe7a3;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs)/1.5 var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--pri)}
h1{font-size:1.65rem;line-height:1.2;margin:0;font-weight:700;letter-spacing:-.02em}
h2{font-size:1.05rem;margin:0 0 .6rem;font-weight:650;letter-spacing:-.01em}
h3{font-size:.95rem;margin:0 0 .4rem}
p{margin:.4rem 0}
.muted{color:var(--mut)}.err{color:var(--bad)}.ok{color:var(--ok)}.sp{flex:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-4rem;background:var(--pri);color:var(--on-pri);padding:.6rem var(--s4);border-radius:var(--r-sm);z-index:100;transition:top .15s}.skip:focus{top:var(--s2);text-decoration:none}
.ic{flex:none;vertical-align:-.2em}
kbd{font:600 .72rem/1 var(--font);padding:.18rem .4rem;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:.3rem;background:var(--surface-2);color:var(--mut)}

/* ---------- App-Rahmen ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
aside.side{background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:30}
.side .brand{display:flex;align-items:center;gap:.65rem;padding:0 1.1rem;height:var(--top-h);font-weight:750;font-size:1.08rem;letter-spacing:-.01em;color:var(--fg);flex:none}
.side .brand img{height:30px;max-width:110px;border-radius:8px}
.side nav{flex:1;overflow:auto;padding:.3rem .65rem var(--s4)}
.side h6{margin:1.1rem .6rem .35rem;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}
.side nav a{display:flex;align-items:center;gap:.7rem;padding:var(--s2) .65rem;margin:1px 0;color:var(--mut);border-radius:var(--r-sm);font-weight:520;position:relative}
.side nav a:hover{background:var(--surface-2);color:var(--fg);text-decoration:none}
.side nav a.active{background:var(--pri-soft);color:var(--link);font-weight:650}
.side nav a.active::before{content:"";position:absolute;left:-.65rem;top:.4rem;bottom:.4rem;width:3px;border-radius:0 3px 3px 0;background:var(--pri)}
/* Favoriten: jede Menüzeile ist Link + Stern. Der Stern erscheint beim Überfahren, dauerhaft bei angeheftet. */
.side nav .navrow{display:flex;align-items:center;gap:.1rem}
.side nav .navrow>a{flex:1;min-width:0}
.side nav .navstar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--faint);border-radius:var(--r-sm);opacity:0;transition:opacity .12s}
.side nav .navrow:hover .navstar,.side nav .navrow:focus-within .navstar{opacity:1}
.side nav .navstar:hover{background:var(--surface-2);color:var(--warn)}
.side nav .navstar.on{opacity:1;color:var(--warn)}
.side nav .navstar.on .ic{fill:currentColor}
@media (pointer:coarse){.side nav .navstar{opacity:1}}
.side nav .navrow.active>a{background:var(--pri-soft);color:var(--link);font-weight:650}
.side .foot{border-top:1px solid var(--line);padding:var(--s3);display:flex;align-items:center;gap:.65rem;flex:none}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--pri);color:var(--on-pri);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.side .who{min-width:0;line-height:1.25}.side .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}.side .who span{font-size:.76rem;color:var(--mut)}
.main-col{min-width:0;display:flex;flex-direction:column}
header.top{position:sticky;top:0;z-index:20;height:var(--top-h);display:flex;align-items:center;gap:.6rem;padding:0 1.4rem;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .menu-btn{display:none}
.searchbtn{display:flex;align-items:center;gap:.6rem;min-width:min(380px,40vw);padding:.48rem var(--s3);border:1px solid var(--line);background:var(--surface);color:var(--mut);border-radius:var(--r);cursor:pointer;font:inherit;box-shadow:var(--shadow-sm)}
input.searchbtn{color:var(--fg);width:min(420px,46vw)}
input.searchbtn::placeholder{color:var(--mut)}
.searchbtn:hover{border-color:var(--line-strong);color:var(--fg)}.searchbtn kbd{margin-left:auto}
main#content{padding:var(--s5) 1.6rem 3rem;min-width:0;max-width:1480px;width:100%;margin:0 auto;outline:none;animation:rise .25s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.backdrop{display:none}
.pagehead{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:1.2rem}
.pagehead .sub{color:var(--mut);margin-top:var(--s1)}
.pagehead .acts{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.crumbs{font-size:.82rem;color:var(--mut);margin-bottom:.35rem;display:flex;gap:.35rem;align-items:center}

/* ---------- Karten, Raster, Kennzahlen ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:var(--s4);box-shadow:var(--shadow-sm)}
.card>h2:first-child{margin-bottom:.8rem}
.card.flush{padding:0;overflow:hidden}.card.flush>h2{padding:var(--s4) 1.2rem 0}
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:var(--s4)}
.grid>.card{margin-bottom:0}
.cols2{display:grid;gap:var(--s4);grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
.cols2>.card,.cols2>div>.card:last-child{margin-bottom:var(--s4)}
.kpi{display:flex;gap:.9rem;align-items:center;transition:transform .15s,box-shadow .15s}
a.kpi{color:inherit}a.kpi:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi .chip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--pri-soft);color:var(--link);flex:none}
.kpi .chip.ok{background:var(--ok-bg);color:var(--ok)}.kpi .chip.bad{background:var(--bad-bg);color:var(--bad)}.kpi .chip.warn{background:var(--warn-bg);color:var(--warn)}
.kpi .v{font-size:1.45rem;font-weight:750;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--mut);font-size:.84rem}
.kpi .v.err{color:var(--bad)}.kpi .v.ok{color:var(--ok)}
.hero{background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,var(--hero-2)));color:var(--on-pri);border:0;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.hero h2{color:var(--on-pri);font-size:1.3rem;margin:0}.hero p{margin:var(--s1) 0 0;opacity:.92}
.hero .acts{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.hero .btn,.hero button{background:var(--on-pri-fill);color:var(--on-pri);border-color:var(--on-pri-line)}
.hero .btn:hover,.hero button:hover{background:var(--on-pri-fill-hover);text-decoration:none}
.hero .btn.primary{background:var(--paper);color:color-mix(in srgb,var(--pri) 80%,var(--black));border-color:var(--paper)}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:var(--s4)}
.quick a{display:flex;flex-direction:column;gap:.45rem;padding:.9rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);color:var(--fg);font-weight:600;box-shadow:var(--shadow-sm);transition:border-color .15s,transform .15s}
.quick a:hover{text-decoration:none;border-color:var(--pri-line);transform:translateY(-2px)}
.quick a .ic{color:var(--link)}.quick a small{font-weight:400;color:var(--mut)}
.list-plain{list-style:none;margin:0;padding:0}.list-plain li{display:flex;gap:.7rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line)}.list-plain li:first-child{border-top:0}
.chart{width:100%;height:auto;display:block}.chart text{fill:var(--mut);font:11px var(--font)}.chart .bar-rect{fill:var(--pri)}.chart .bar-rect.alt{fill:color-mix(in srgb,var(--pri) 35%,transparent)}.chart .axis{stroke:var(--line)}
.bk-sichart .bk-silabel{fill:var(--fg);font:600 12px var(--font)}
.legend{display:flex;gap:var(--s4);color:var(--mut);font-size:.82rem;margin-top:.4rem}.legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;background:var(--pri);margin-right:.35rem;vertical-align:-1px}.legend i.alt{background:color-mix(in srgb,var(--pri) 35%,transparent)}

/* ---------- Tabellen ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
.card .tablewrap{box-shadow:none}
.card.flush .tablewrap{border:0;border-radius:0;box-shadow:none}
/* Tabellen nie aus ihrem Behälter laufen lassen (betrifft jede Seite und jede Seitenspalte).
   Ohne diese Regel gilt für Tabellen implizit min-width:max-content: sie sprengen dann schmale
   Behälter wie die Seitenspalte des Angebots-Editors und erzeugen einen Schieberegler am falschen Ort. */
.tablewrap,.card,.qside,figure{max-width:100%;min-width:0}
.tablewrap table,.qside table,figure table{width:100%;max-width:100%}
th,td{overflow-wrap:anywhere;min-width:0}
table{width:100%;border-collapse:collapse}
th,td{padding:.62rem .85rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);background:var(--surface-2);font-weight:700;white-space:nowrap;position:sticky;top:0}
th button.sort{all:unset;cursor:pointer;display:inline-flex;gap:.3rem;align-items:center;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit}
th button.sort:hover{color:var(--fg)}th button.sort:focus-visible{outline:2px solid var(--pri);border-radius:3px}
th[aria-sort] button.sort{color:var(--link)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
th.n button.sort{flex-direction:row-reverse}
tr.click{cursor:pointer}tr.click:hover td{background:var(--pri-soft)}
tr.click:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}
td.rowact{width:1%;white-space:nowrap;text-align:right}
td.rowact .btn,td.rowact button{opacity:.0;transition:opacity .12s}
tr:hover td.rowact .btn,tr:hover td.rowact button,tr:focus-within td.rowact .btn,tr:focus-within td.rowact button{opacity:1}
@media (hover:none){td.rowact .btn,td.rowact button{opacity:1}}
td.num-id{font-weight:650;white-space:nowrap}
tr.sk td{padding:.9rem .85rem}

/* ---------- Werkzeugleiste, Filter ---------- */
.bar{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-bottom:.9rem}
.bar .sp{flex:1}
.toolbar{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.field-search{position:relative;flex:1 1 260px;max-width:420px}
.field-search .ic{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.field-search input{width:100%;padding-left:2.2rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:.3rem var(--s3);border:1px solid var(--line-strong);border-radius:99px;font-size:.84rem;color:var(--mut);background:var(--surface)}
.chip-btn:hover{border-color:var(--pri-line);color:var(--fg)}
.chip-btn[aria-pressed=true]{background:var(--pri-soft);border-color:var(--pri-line);color:var(--link);font-weight:650}
.chip-btn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.pager{display:flex;gap:var(--s2);align-items:center;padding:.7rem .2rem;color:var(--mut);font-size:.88rem;flex-wrap:wrap}

/* ---------- Schaltflächen ---------- */
button,.btn{font:inherit;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:var(--btn-h);padding:.4rem .95rem;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);border-radius:var(--r-sm);cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s,box-shadow .12s,transform .05s;box-shadow:var(--shadow-sm)}
button:hover,.btn:hover{border-color:var(--pri-line);background:var(--surface-2);text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button.primary,.btn.primary{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
button.primary:hover,.btn.primary:hover{background:var(--pri-d);border-color:var(--pri-d)}
button.ghost,.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--mut)}
button.ghost:hover,.btn.ghost:hover{background:var(--surface-2);color:var(--fg)}
button.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
button.danger:hover{background:var(--bad-bg);border-color:var(--bad)}
button.danger.solid{background:var(--bad);color:var(--on-bad);border-color:var(--bad)}
button.sm,.btn.sm{min-height:var(--btn-sm-h);padding:.15rem .6rem;font-size:.85rem}
button.icon-btn{width:var(--icon-w);padding:0}button.icon-btn.sm{width:var(--icon-sm-w)}
button:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
button.busy{position:relative;color:transparent!important;pointer-events:none}
button.busy::after{content:"";position:absolute;width:1rem;height:1rem;border:2px solid var(--on-pri);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
button:not(.primary).busy::after{border-color:var(--pri);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Formulare ---------- */
input,select,textarea{font:inherit;padding:var(--s2) .7rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);max-width:100%;min-height:var(--field-h);transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox]{min-height:0;width:1.1rem;height:1.1rem;accent-color:var(--pri)}
textarea{width:100%;min-height:5.5rem;resize:vertical}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad)}
input[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 30%,transparent)}
form.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.95rem 1.2rem}
form.f label,.fld{display:flex;flex-direction:column;font-size:.84rem;font-weight:600;color:var(--fg);gap:.3rem}
form.f label.wide,.fld.wide{grid-column:1/-1}
form.f label .req{color:var(--bad);margin-left:.15rem}
form.f label .help{font-weight:400;color:var(--mut);font-size:.8rem}
form.f label .msg-err{font-weight:500;color:var(--bad);font-size:.8rem;min-height:0}
form.f .act{grid-column:1/-1;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding-top:.3rem}
/* Zwischenüberschrift in langen Formularen (z. B. „Zugang zum Programm“ unter den Stammdaten) */
form.f .form-sec{grid-column:1/-1;margin:.35rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.95rem;font-weight:650}
form.f .form-sec .help{display:block;font-weight:400;color:var(--mut);font-size:.8rem;margin-top:.15rem}
form.f label.check{flex-direction:row;align-items:center;gap:.55rem;font-weight:500}
.savestate{font-size:.84rem;color:var(--mut);display:inline-flex;gap:.35rem;align-items:center}.savestate.ok{color:var(--ok)}.savestate.err{color:var(--bad)}
.picker{position:relative}
.picker input{width:100%}
.picker ul{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);list-style:none;margin:0;padding:.3rem;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-md);max-height:260px;overflow:auto}
.picker li{padding:.45rem .6rem;border-radius:var(--r-sm);cursor:pointer;display:flex;justify-content:space-between;gap:.6rem;font-weight:500}
.picker li small{color:var(--mut);font-weight:400}
.picker li[aria-selected=true],.picker li:hover{background:var(--pri-soft)}
.picker li.none{cursor:default;color:var(--mut)}
.picker .picked{display:flex;gap:var(--s2);align-items:center;justify-content:space-between;padding:.45rem .7rem;border:1px solid var(--pri-line);background:var(--pri-soft);border-radius:var(--r-sm);font-weight:600}
/* Fehlende Stammdaten direkt an der Auswahl anlegen (picker({ create })) – Knopf unter dem Suchfeld. */
.picker-new{display:flex;margin-top:var(--s2)}
.picker-new[hidden]{display:none}
.picker li.none .btn{margin-left:var(--s2);vertical-align:middle}

/* ---------- Status ---------- */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.12rem .65rem;border-radius:99px;font-size:.78rem;font-weight:650;background:var(--surface-2);color:var(--mut);border:1px solid var(--line);white-space:nowrap}
.pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor;opacity:.85}
.pill.green,.pill.paid,.pill.accepted,.pill.ok,.pill.completed,.pill.done,.pill.on{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.pill.yellow,.pill.sent,.pill.issued,.pill.in_progress,.pill.partially_paid,.pill.confirmed,.pill.planned{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.pill.red,.pill.cancelled,.pill.error,.pill.rejected,.pill.off{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.pill.ordered,.pill.quoted,.pill.invoiced{background:var(--info-bg);color:var(--info);border-color:transparent}
.light{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;margin-right:.4rem;background:var(--faint);box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
.light.green{background:var(--lamp-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp-ok) 25%,transparent)}.light.yellow{background:var(--lamp-warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp-warn) 25%,transparent)}.light.red{background:var(--lamp-bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp-bad) 25%,transparent)}
.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden;min-width:90px}.progress>span{display:block;height:100%;background:var(--pri);border-radius:99px}

/* ---------- Tabs, Schlüssel/Wert ---------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;flex-wrap:wrap;overflow-x:auto}
.tabs a{padding:.6rem var(--s4);border-bottom:2px solid transparent;color:var(--mut);font-weight:600;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--fg);text-decoration:none}
.tabs a.active{border-bottom-color:var(--pri);color:var(--link)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.4rem;margin:0}.kv dt{color:var(--mut)}.kv dd{margin:0;font-weight:560}
pre{background:var(--surface-2);border:1px solid var(--line);padding:.7rem;border-radius:var(--r-sm);overflow:auto;font-size:.85rem}

/* ---------- Leere Zustände, Skeletons ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.6rem 1.2rem;gap:var(--s2);color:var(--mut)}
.empty .art{width:64px;height:64px;border-radius:20px;background:var(--pri-soft);color:var(--link);display:grid;place-items:center;margin-bottom:.4rem}
.empty h3{font-size:1.05rem;color:var(--fg);margin:0}.empty p{max-width:46ch;margin:0}.empty .acts{display:flex;gap:var(--s2);margin-top:.7rem;flex-wrap:wrap;justify-content:center}
.skel{background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 45%,var(--surface)) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.3s infinite linear;border-radius:var(--r-sm);display:block;height:1rem}
.skel.t{height:1.8rem;width:min(320px,60%);margin-bottom:1.3rem}.skel.b{height:5.2rem;border-radius:var(--r)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- Toasts ---------- */
.toasts{position:fixed;right:var(--s4);bottom:var(--s4);display:flex;flex-direction:column;gap:var(--s2);z-index:90;max-width:min(420px,calc(100vw - 2rem))}
.toast{display:flex;gap:.65rem;align-items:flex-start;padding:var(--s3) .95rem;border-radius:var(--r);background:var(--surface);color:var(--fg);border:1px solid var(--line);border-left:4px solid var(--ok);box-shadow:var(--shadow-md);animation:rise .2s ease both}
.toast.err{border-left-color:var(--bad)}.toast .ic{margin-top:.1rem;color:var(--ok)}.toast.err .ic{color:var(--bad)}
.toast button{margin-left:auto;min-height:24px;padding:0 .3rem;border:0;background:none;box-shadow:none;color:var(--mut)}

/* ---------- Dialog, Befehlspalette, Tour ---------- */
dialog{border:1px solid var(--line);border-radius:var(--r-lg);padding:0;background:var(--surface);color:var(--fg);box-shadow:var(--shadow-lg);max-width:min(520px,calc(100vw - 2rem));width:100%}
dialog::backdrop{background:var(--shade-strong);backdrop-filter:blur(2px)}
dialog[open]{animation:pop .16s ease both}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.dlg{padding:1.3rem 1.4rem}.dlg h2{font-size:1.15rem}.dlg .acts{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:1.2rem}
.dlg input,.dlg textarea{width:100%;margin-top:.6rem}
dialog.palette{max-width:640px;margin-top:12vh;overflow:hidden}
.pal-in{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
.pal-in input{border:0;box-shadow:none;padding:0;font-size:1.05rem;flex:1;background:transparent;min-height:30px}
.pal-list{max-height:min(55vh,420px);overflow:auto;padding:.4rem;margin:0;list-style:none}
.pal-list h6{margin:.6rem .7rem .2rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.pal-list li.opt{display:flex;gap:.7rem;align-items:center;padding:.55rem .7rem;border-radius:var(--r-sm);cursor:pointer}
.pal-list li.opt small{margin-left:auto;color:var(--mut)}
.pal-list li.opt[aria-selected=true]{background:var(--pri-soft);color:var(--link)}
.pal-list li.opt .ic{color:var(--mut)}.pal-list li.opt[aria-selected=true] .ic{color:var(--link)}
.pal-foot{display:flex;gap:var(--s4);padding:.55rem var(--s4);border-top:1px solid var(--line);font-size:.78rem;color:var(--mut);background:var(--surface-2)}
.pal-empty{padding:1.6rem;text-align:center;color:var(--mut)}
.tour-shade{position:fixed;inset:0;z-index:70;background:var(--shade)}
.tour-spot{position:fixed;z-index:71;border-radius:var(--r);box-shadow:0 0 0 9999px var(--shade-strong),0 0 0 3px var(--pri);pointer-events:none;transition:all .25s ease}
.tour-pop{position:fixed;z-index:72;width:min(360px,calc(100vw - 1.5rem));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.2rem;box-shadow:var(--shadow-lg)}
.tour-pop h3{font-size:1.05rem;margin:0 0 .3rem}.tour-pop p{color:var(--mut);margin:0 0 .9rem}
.tour-pop .row{display:flex;gap:var(--s2);align-items:center}.tour-dots{display:flex;gap:.3rem}.tour-dots i{width:.45rem;height:.45rem;border-radius:50%;background:var(--line-strong)}.tour-dots i.on{background:var(--pri)}

/* ---------- Assistent (Wizard) ---------- */
.steps{display:flex;gap:.4rem;margin-bottom:1.3rem;counter-reset:s;flex-wrap:wrap;list-style:none;padding:0}
.steps li{display:flex;align-items:center;gap:.55rem;color:var(--mut);font-weight:600;padding:.35rem .8rem .35rem .4rem;border-radius:99px;border:1px solid var(--line);background:var(--surface)}
.steps li::before{counter-increment:s;content:counter(s);width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--mut);font-size:.8rem}
.steps li.on{color:var(--link);border-color:var(--pri-line);background:var(--pri-soft)}.steps li.on::before{background:var(--pri);color:var(--on-pri)}
.steps li.done::before{content:"✓";background:var(--ok);color:var(--on-ok)}.steps li.done{color:var(--fg)}
/* Aktionsleiste des Assistenten bleibt beim Scrollen sichtbar: Auf dem Prüf-Schritt lag „Angebot
   anlegen" vorher unterhalb des Bildrands – der Hauptknopf war ohne Scrollen nicht erreichbar. */
.wizard-nav{display:flex;gap:.6rem;align-items:center;margin-top:var(--s4);flex-wrap:wrap;position:sticky;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding:.7rem 0 .85rem}
.poslist{display:grid;gap:.6rem}
/* DATANORM: Klartext-Diagnose der Vorschau (fehlender Vollstamm, fremde Preisdatei) – steht vor den Zahlen,
   damit die Ursache nicht aus Zählern geraten werden muss. */
.dn-hints{margin:0 0 var(--s4);padding:.8rem 1rem;border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm)}
.dn-hints h3{margin:0 0 .4rem;font-size:.95rem;display:flex;align-items:center;gap:.4rem}
.dn-hints ul{margin:0;padding-left:1.1rem}
.dn-hints li{margin:.25rem 0}
.posrow{display:grid;grid-template-columns:minmax(0,3fr) 5.5rem 5.5rem 7rem 2.4rem;gap:var(--s2);align-items:start}
.posrow.head{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700}
.posrow input{width:100%}
/* Summenblock im Angebots-Assistenten: EINE Spalte, rechtsbündig und in lesbarer Breite.
   Vorher standen hier zwei Rasterspalten, in die vier Zeilen liefen – „Zwischensumme netto" und
   „Netto" (immer identisch) landeten nebeneinander, die Zahlen waren schwer zu lesen. */
.sumbox{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;margin:.9rem 0 0 auto;max-width:24rem;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:.6rem}.sumbox b{font-size:1.15rem}

/* ---------- Anmeldung ---------- */
.loginwrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.loginhero{background:linear-gradient(145deg,color-mix(in srgb,var(--pri) 88%,var(--black)),color-mix(in srgb,var(--pri) 45%,var(--login-2)));color:var(--on-pri);padding:3rem;display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.loginhero h2{color:var(--on-pri);font-size:2rem;line-height:1.15;letter-spacing:-.03em;margin:0;max-width:16ch}
.loginhero ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;opacity:.95}.loginhero li{display:flex;gap:.65rem;align-items:center}
.loginbox{display:flex;align-items:center;justify-content:center;padding:var(--s6)}
.login{width:100%;max-width:380px}
.login img{height:46px;margin-bottom:.8rem;border-radius:10px}
.login h1{margin-bottom:.3rem}.login .muted{margin-bottom:1.4rem}
.login form.f{grid-template-columns:1fr}
.login .act button{width:100%}

/* ---------- KI-Chat ---------- */
.chat{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:.4rem;padding:.2rem}
.msg{padding:.6rem .9rem;border-radius:var(--r);white-space:pre-wrap;max-width:85%}
.msg.u{background:var(--pri);color:var(--on-pri);align-self:flex-end}.msg.a{background:var(--surface-2);border:1px solid var(--line)}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){.cols2{grid-template-columns:1fr}.loginwrap{grid-template-columns:1fr}.loginhero{display:none}}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  aside.side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .nav-open aside.side{transform:none}
  .nav-open .backdrop{display:block;position:fixed;inset:0;background:var(--shade);z-index:25}
  .top .menu-btn{display:inline-flex}
  header.top{padding:0 .8rem}main#content{padding:var(--s4) .85rem 5rem}
  .searchbtn{min-width:0;flex:1}.searchbtn span.txt{display:none}.searchbtn kbd{display:none}
  h1{font-size:1.4rem}
  .posrow{grid-template-columns:1fr 1fr}.posrow>:first-child{grid-column:1/-1}.posrow.head{display:none}
  td.rowact .btn,td.rowact button{opacity:1}
}
@media (max-width:560px){th,td{padding:.55rem .6rem}.grid{grid-template-columns:1fr 1fr}.kpi{flex-direction:column;align-items:flex-start;gap:var(--s2)}.kpi .chip{width:36px;height:36px}.kpi .v{font-size:1.2rem}.hero .acts{margin-left:0}}
@media (pointer:coarse){button,.btn,input,select{min-height:max(44px,var(--btn-h))}button.sm,.btn.sm{min-height:max(36px,var(--btn-sm-h))}.side nav a{padding:.65rem}}
@media (prefers-reduced-motion:no-preference){.card{animation:bk-rise .28s ease both}}
@keyframes bk-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.today-list{display:flex;flex-direction:column;gap:1rem}
.today-task{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.15rem 1.25rem}
.today-task p{font-size:1.15rem;font-weight:700;margin:0;flex:1;min-width:12rem}
.today-task .btn{min-height:calc(var(--btn-h) + 8px);min-width:11rem}
.today-rest{margin-top:1.5rem}
.plantafel{display:grid;grid-template-columns:16rem 1fr;gap:1rem;align-items:start}
.pf-pool{display:flex;flex-direction:column;gap:.5rem}
.pf-chip{min-height:48px;text-align:left;cursor:grab}
.pf-days{display:grid;grid-template-columns:repeat(5,minmax(8rem,1fr));gap:.6rem}
.pf-day{min-height:12rem;padding:.7rem;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface)}
.pf-day h3{margin:0 0 .45rem;font-size:1rem}
.pf-day.pf-over{outline:3px solid var(--pri)}
.pf-on{margin:.25rem 0;font-weight:650}
.pf-place{display:flex;flex-wrap:wrap;gap:.7rem;align-items:end}
.pf-place label{display:flex;flex-direction:column;gap:.25rem;font-weight:650}
@media (max-width:800px){.plantafel{grid-template-columns:1fr}.pf-days{grid-template-columns:1fr}}
.look-field{display:flex;flex-direction:column;gap:.35rem;margin:.2rem 0 .9rem}
.look-name{font-weight:650}
.look-steps{display:flex;flex-wrap:wrap;gap:.4rem}
.look-preview{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (forced-colors:active){.pill,.btn,button{border:1px solid CanvasText}.light{border:2px solid CanvasText}}
@media print{aside.side,header.top,.bar,.toolbar,.toasts,.pager,.quick{display:none!important}.shell{display:block}main#content{padding:0;max-width:none}.card{box-shadow:none;break-inside:avoid}body{background:var(--paper);color:var(--black)}}
.formgrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:.9rem}
.line-row input,.line-row select{min-width:0}
.sigwrap{margin:.6rem 0}
.ok-note{background:var(--ok-bg);color:var(--ok);padding:.55rem .8rem;border-radius:var(--r-sm);margin:var(--s2) 0}
.sigpad{touch-action:none;width:100%;max-width:520px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--paper);cursor:crosshair;display:block}
.sigimg{max-height:90px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:4px}
.line-row .w-desc{flex:3;min-width:12rem}.line-row .w-worker{flex:1;min-width:8rem}.line-row .w-qty{width:5.5rem}.line-row .w-unit{width:4.5rem}.line-row .w-price{width:7.5rem}
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:.8rem}
.galfig{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.galimg{display:block;width:100%;height:150px;object-fit:cover;background:var(--bg)}
.galfig figcaption{padding:.4rem .6rem;font-size:.85rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;justify-content:space-between}
.clip{display:inline-block;max-width:28rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.bar label.check{display:inline-flex;align-items:center;gap:var(--s2);font-weight:500}
ul.tight{margin:0;padding-left:1.1rem;font-size:.85rem}

/* Vorlagen-Bibliothek und Verrechnungssatz-Rechner */
.tpl-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--s4);align-items:start}
@media (max-width:820px){.tpl-layout{grid-template-columns:1fr}}
.tpl-cats{display:flex;flex-direction:column;gap:2px;position:sticky;top:8px}
.tpl-grp{margin:10px 0 2px;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:inherit}
.tpl-cat{text-align:left;background:none;border:1px solid transparent;border-radius:var(--r);padding:6px 10px;cursor:pointer;color:var(--fg)}
.tpl-cat:hover{background:var(--surface-2)}
.tpl-cat.on{background:var(--pri-soft-legacy);border-color:var(--accent);font-weight:600}
.tpl-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tpl-filter input[type=search]{flex:1 1 260px}
.tpl-list{display:flex;flex-direction:column;gap:6px}
.tpl-item{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--surface)}
.tpl-open{font-weight:600;font-size:1rem}
.tpl-note{border-left:4px solid var(--hint);background:var(--hint-bg);padding:8px 12px;border-radius:6px;margin:8px 0}
dialog .tpl-dlg{min-width:min(720px,92vw);max-height:80vh;overflow:auto}
.tpl-pick-list{display:flex;flex-direction:column;gap:4px;margin:8px 0;max-height:46vh;overflow:auto}
.tpl-pick-item{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.tpl-pick-item:hover,.tpl-pick-item:focus-visible{border-color:var(--accent)}
.tpl-t{font-weight:600}
.tpl-ctx{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.tpl-ctx .picker{flex:1 1 220px}
.tpl-detail textarea{width:100%;font-family:inherit}
.tpl-acts{flex-wrap:wrap}
.tpl-swatch{display:inline-block;width:1.2em;height:1.2em;border-radius:4px;vertical-align:middle;border:1px solid var(--line)}
.tpl-rc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.tpl-insert{margin-top:4px}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.85rem}
/* 1.3.0 System: Sicherheit, Sicherung, Update, API-Schlüssel, Mahnlauf-Vorschau */
.warn-note{background:var(--warn-bg);color:var(--warn);padding:.55rem .8rem;border-radius:var(--r-sm);margin:var(--s2) 0}
.big-code{font-size:1.25rem;letter-spacing:.06em;padding:var(--s1) .6rem;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);user-select:all}
.setup-panel ol{padding-left:1.2rem;display:grid;gap:.6rem}
.setup-panel input{max-width:14rem}
pre.snip{max-height:20rem}
dialog:has(.wide-dlg){max-width:min(1100px,96vw)}
.wide-dlg table{font-size:.88rem}
.wide-dlg details pre{white-space:pre-wrap;max-width:28rem}
#recovery-codes,#ak-key{font-size:1.05rem;user-select:all;white-space:pre-wrap;word-break:break-all}
.dlg label.wide{display:grid;gap:var(--s1);margin-top:.7rem}
.dlg select{width:100%;margin-top:.6rem}
/* 1.3.1 Preishistorie */
.trend{display:inline-block;font-size:.8rem;font-weight:600;padding:.1rem var(--s2);border-radius:999px;white-space:nowrap}
.trend.up{background:var(--bad-bg);color:var(--bad)}
.trend.down{background:var(--ok-bg);color:var(--ok)}
.spark{width:100%;max-width:520px;height:90px;margin:.4rem 0}
.spark-line{fill:none;stroke:var(--accent);stroke-width:2}
.spark-dot{fill:var(--accent)}
/* Storno / Belegkette */
ol.chain { list-style: none; margin: 0; padding: 0; }
ol.chain li { padding: .35rem 0; border-left: 3px solid var(--line); padding-left: var(--s3); margin-left: var(--s1); }
ol.chain li.depth1 { margin-left: var(--s5); }
ol.chain li.depth2 { margin-left: 2.75rem; }
ol.chain li.depth3 { margin-left: 4rem; }
ol.chain li.current { border-left-color: var(--accent); font-weight: 600; }
.st-lines input.qty { width: 6rem; text-align: right; }

/* 1.4.0: Kasse, Produktion, Marketing */
pre.receipt { font-family: ui-monospace, monospace; background: var(--receipt-bg); border: 1px dashed var(--receipt-line); padding: .8rem; white-space: pre-wrap; max-width: 32rem; }
#pos-cart input.qty, #pos-cart .qty { width: 5rem; text-align: right; }
.total { font-weight: 700; font-size: 1.2rem; text-align: right; }
#sc-video { width: 100%; max-width: 28rem; border-radius: 6px; }
#sc-video[hidden] { display: none; }

/* KI-Anbieter (Einstellungen → KI) */
.ai-dlg [hidden]{display:none!important}
.ai-dlg{max-width:46rem}
.ai-dlg input[type=checkbox]{width:auto;margin:0 .45rem 0 0}
.ai-dlg label.check{display:flex;align-items:flex-start;gap:.3rem;margin-top:.7rem}
.ai-dlg .bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.7rem}
.ai-result{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.row-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}

/* 1.4.3 Stammdaten */
.sub-tabs{margin:-4px 0 14px;display:flex;flex-wrap:wrap;gap:4px}
.sub-tabs a{padding:5px 11px;border-radius:999px;font-size:13px;color:var(--mut-legacy);text-decoration:none;border:1px solid transparent}
.sub-tabs a:hover{border-color:var(--line)}
.sub-tabs a.active{background:var(--pri-soft);color:var(--link);font-weight:600}
.md-in{width:100%;min-width:90px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font:inherit}
.md-in.narrow{width:76px;min-width:0}.md-in.wide,input.wide{min-width:320px}
.md-add{gap:8px;flex-wrap:wrap;align-items:center}.md-add input{min-width:140px}
.md-assign{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.md-row{display:grid;gap:4px;font-size:13px}.md-row>span{color:var(--mut-legacy);font-weight:600}
.md-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.md-chips .chip{display:inline-flex;gap:4px;align-items:center;padding:2px 4px 2px 10px;border-radius:999px;background:var(--pri-soft);color:var(--link);font-size:13px}
.md-chips .chip-x{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;color:inherit;padding:0 6px}
.md-preview{padding:8px 12px;border-radius:10px;background:var(--pri-soft);font-size:13px;margin:8px 0}
.md-ph{flex-wrap:wrap;gap:6px}

/* 1.4.5: Varianten, Festschreiben, Formelsammlung */
.qv-list{display:flex;flex-direction:column;gap:var(--s2)}
.qv-item{display:grid;gap:.15rem;padding:var(--s2) .6rem;border:1px solid var(--line);border-radius:8px}
.qv-item.on{border-color:var(--accent);background:var(--pri-tint)}
.qv-acts{display:flex;gap:.4rem}
.qv-tools{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:.6rem}
.qrow.qv-off{opacity:.5}
.qv-rows{display:flex;flex-direction:column;gap:.35rem;max-height:60vh;overflow:auto;margin:.6rem 0}
.qv-row{display:flex;justify-content:space-between;gap:.8rem;align-items:center}
.qv-t.d1{padding-left:var(--s4)}.qv-t.d2{padding-left:var(--s6)}.qv-t.d3{padding-left:3rem}
.fm-vars{margin:.6rem 0}
.fld .inline{display:flex;gap:.4rem}
.fld .inline .narrow{max-width:6rem}
button.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-align:left;cursor:pointer;text-decoration:underline}
button.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 1.4.6: Report-Designer, Etiketten, Dokumentmasken */
.rd-list{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0;padding:0;list-style:none}
.rd-item{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.rd-item>span{min-width:12rem}
.rd-fval{min-width:12rem}
.dm-dlg{max-width:60rem}
.dm-texts{width:100%;border-collapse:collapse}
.dm-texts th,.dm-texts td{padding:.2rem .35rem;text-align:left}
.fld .inline input.narrow,.dm-texts input.narrow{max-width:5rem}

/* 1.4.7: Dialogoptionen, Steuerschlüssel, Nummernkreis-Verzeichnis */
body.compact th,body.compact td{padding:.3rem .6rem}
.pref{margin:.4rem 0 .8rem}
.ng-group ul{margin:.3rem 0 .6rem 1.2rem}
#ng-toc{margin-top:.6rem}

/* 1.4.8: Zugriffsrechte-Matrix */
#ac-matrix td.ac-cell{text-align:center}
#ac-matrix th{text-align:center}
#ac-matrix th:first-child,#ac-matrix td:first-child{text-align:left}

/* 1.5.0 Report-Designer: Gruppierung (das Balkendiagramm des alten Designers ist entfallen;
   das Report-Studio zeichnet Diagramme serverseitig und zeigt sie im Vorschaubild) */
.rd-grouphead { background: var(--surface-2); }
.rd-subtotal { font-weight: 700; }
/* 1.5.1 Signatur */
.sigpad{width:100%;max-width:560px;height:auto;aspect-ratio:7/2;border:1px dashed var(--mut);border-radius:.5rem;background:var(--paper);touch-action:none;display:block}
.stack{display:grid;gap:.6rem;max-width:600px}
.check{display:flex;gap:.4rem;align-items:flex-start;font-size:.9rem}
.banner{padding:.6rem .9rem;border:1px solid var(--line);border-radius:.5rem;margin:0 0 var(--s4);background:var(--surface)}
.banner.ok{background:var(--ok-bg);border-color:var(--ok)}.banner.warn{background:var(--warn-bg);border-color:var(--warn)}.banner.err{background:var(--bad-bg);border-color:var(--bad)}
/* 1.5.1 Liquidität */
.liq-chart{width:100%;max-width:820px;height:auto;display:block}.liq-grid{stroke:var(--line);stroke-width:1}.liq-zero{stroke:var(--mut);stroke-width:1.2}.liq-t{font-size:10px;fill:currentColor}
.liq-in{fill:var(--liq-in)}.liq-out{fill:var(--liq-out)}.liq-line{stroke:var(--pri);stroke-width:2}.liq-dot{fill:var(--pri)}.liq-dot.neg{fill:var(--liq-out)}
.legend .sw{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;vertical-align:middle;margin-left:.6rem}.legend .sw.in{background:var(--liq-in)}.legend .sw.out{background:var(--liq-out)}.legend .sw.line{background:var(--pri)}
.neg{color:var(--bad);font-weight:600}

/* 1.6.0 Mobil-App: Geräte per QR-Code verbinden (Seite /mobile-app, plugins/office-ui/ui/pages-mobile.js) */
.pairgrid{display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap}
.qrsvg{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:.7rem;flex:0 0 auto;box-shadow:var(--shadow-sm)}
.qrside{flex:1 1 17rem;min-width:15rem;display:flex;flex-direction:column;gap:.6rem}
.qrside p{margin:0}
.codebig{font:700 1.45rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.codechips{display:inline-block;font:600 .88rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.15rem var(--s2)}
.codetext{display:block;word-break:break-all;font:.78rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--mut);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.55rem}
.pairstatus{display:flex;align-items:center;gap:var(--s2);padding:.6rem .9rem;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);margin:.9rem 0 .2rem;font-weight:600}
.pairstatus.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.pairstatus.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.howto{margin:.3rem 0 .6rem 1.2rem;padding:0;display:grid;gap:.4rem}
.howto li{padding-left:.1rem}

/* 1.6.1 SEPA-Lastschrift und Eingangsrechnungen (pages-sepa.js, pages-payables.js):
   trennt zwei Funktionsbereiche auf einer Seite, ohne eine eigene Farbe zu erfinden. */
.area-sep{margin:1.8rem 0 .9rem;padding-top:.9rem;border-top:2px solid var(--line);font-size:1.1rem}