html{scrollbar-gutter:stable}
[hidden]{display:none!important}
/* Layout: Kopfzeile wie bisher (Logo · Dashboard · Export), darunter runde Tab-Leiste; Bearbeiten öffnet eine ganze Seite */
:root{
  --bg:#f2f5f8; --surface:#ffffff; --line:#d8e1ea; --line-strong:#c6d2de; --fg:#121c26; --muted:#56687a;
  --accent:#167dbf; --accent-fg:#ffffff; --accent-soft:#e2eff8; --accent-ink:#0f5f93;
  --inc:#167dbf; --exp:#c0663a;
  --pos:#1d7a46; --neg:#b3412e; --warn:#9c4a42; --warn-soft:#f7ebe9; --pos-soft:#e3f3e9; --neg-soft:#f8e6e2;
  --f-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"Plus Jakarta Sans",system-ui,sans-serif;
  --radius:14px; --track:#e4eaf0;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0a1016; --surface:#151f2b; --line:#2b3b4b; --line-strong:#3b5064; --fg:#eef3f8; --muted:#a9b8c7;
  --accent:#5ab4ec; --accent-fg:#06131d; --accent-soft:#173750; --accent-ink:#aedaf6; --inc:#5ab4ec; --exp:#ec9d6b;
  --pos:#6bd398; --neg:#f19484; --warn:#f0b0a6; --warn-soft:#3b2622; --pos-soft:#183623; --neg-soft:#41231e; --track:#1f2c3a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a1016; --surface:#151f2b; --line:#2b3b4b; --line-strong:#3b5064; --fg:#eef3f8; --muted:#a9b8c7;
  --accent:#5ab4ec; --accent-fg:#06131d; --accent-soft:#173750; --accent-ink:#aedaf6; --inc:#5ab4ec; --exp:#ec9d6b;
  --pos:#6bd398; --neg:#f19484; --warn:#f0b0a6; --warn-soft:#3b2622; --pos-soft:#183623; --neg-soft:#41231e; --track:#1f2c3a; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;margin:0}
body:has(#ov){overflow:hidden}
/* App-Rahmen: feste Navigation links (wie fonio), rechts Seitentitel + Inhalt */
:root{--side:272px}
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;padding:24px 16px 18px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;z-index:30}
.brand{display:block;padding:0 8px}
.brand img{width:100%;height:auto;display:block}
.side-tag{display:block;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--muted);padding:0 8px;margin-top:-8px}
.tabs{display:grid;gap:3px}
.tabs button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:13px;width:100%;padding:11px 14px;border-radius:10px;font-size:16.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button svg{width:21px;height:21px;flex:none}
.tabs button:hover{background:var(--bg);color:var(--fg)}
.tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.tabs button[aria-selected="true"] svg{color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabs .cnt{margin-left:auto;font-size:12px;font-weight:700;background:var(--accent);color:var(--accent-fg);border-radius:99px;padding:0 8px;line-height:20px}
.side-foot{margin-top:auto;display:grid;gap:10px;border-top:1px solid var(--line);padding:14px 6px 0}
.side-foot .me{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);min-width:0}
.side-foot .me b{display:block;color:var(--fg);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--fg);color:var(--surface);display:grid;place-items:center;font-size:13px;font-weight:700}
.side-foot .btn{justify-content:center}
.main{min-width:0;width:100%;max-width:1400px;padding:30px clamp(16px,3vw,44px) 72px;display:grid;gap:22px;align-content:start}
.ptitle{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;min-height:46px}
#pagetitle{font-size:clamp(25px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;margin:0}
/* Ohne Anmeldung: keine Navigation, nur Logo oben */
body:has(nav[hidden]) .shell{display:block}
body:has(nav[hidden]) .side{position:static;height:auto;flex-direction:row;justify-content:flex-start;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:16px clamp(16px,3vw,40px)}
body:has(nav[hidden]) .side-tag{margin:0}
body:has(nav[hidden]) .side-foot{margin:0 0 0 auto;border:0;padding:0}
body:has(nav[hidden]) .side-tag{border-left:1px solid var(--line);padding-left:14px}
body:has(nav[hidden]) .brand img{width:auto;height:54px}
body:has(nav[hidden]) .side-foot:empty{display:none}
body:has(nav[hidden]) .ptitle{display:none}
body:has(nav[hidden]) .main{margin:0 auto}
@media (max-width:900px){
  .shell{display:block}
  .side{position:sticky;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line)}
  .brand img{height:38px;width:auto}.side-tag{display:none}
  .tabs{order:3;width:100%;display:flex;overflow-x:auto;scrollbar-width:none}
  .tabs button{width:auto;padding:8px 12px;font-size:15px}
  .side-foot{margin:0 0 0 auto;border:0;padding:0;display:flex}
  .side-foot .me{display:none}
  .main{padding-top:18px}
}
.logo-d{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-l{display:none!important}:root:not([data-theme="light"]) .logo-d{display:block!important}}
:root[data-theme="dark"] .logo-l{display:none!important}:root[data-theme="dark"] .logo-d{display:block!important}
.catrow{all:unset;display:grid;gap:4px;cursor:pointer;padding:6px 8px;margin:0 -8px;border-radius:8px}
.catrow:hover{background:var(--accent-soft)}
.catrow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.catrow:focus-visible{outline:2px solid var(--accent)}
.linkbtn{all:unset;color:var(--accent);cursor:pointer;text-decoration:underline}
.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--fg);padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.check input{width:auto}
select.inline{font-size:13px;padding:4px 6px;width:auto}
.lock{min-height:60vh;display:grid;place-items:center}
.lock .card{width:min(360px,100%);justify-items:center;text-align:center}
.lock input{text-align:center;font-size:22px;letter-spacing:.3em}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1,h2,h3{margin:0;font-family:var(--f-head);letter-spacing:-.015em}
h1{font-size:clamp(26px,3.2vw,38px);line-height:1.15}
h2{font-size:21px;text-wrap:balance}
h3{font-size:17px}
.muted{color:var(--muted)} .small{font-size:14px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.stack{display:grid;gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;display:grid;gap:14px;min-width:0}
/* Kennzahlen als eine ruhige Leiste mit Trennlinien */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.kpi{position:relative;padding:20px 22px;display:grid;gap:6px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kpi>span:first-child{font-size:14px;font-weight:500;color:var(--muted)}
.kpi span{font-size:14px;color:var(--muted)}
.kpi b{font-family:var(--f-num);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi.hl{background:var(--accent-soft);border-color:transparent}
.kpi.hl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar.exp i{background:var(--exp)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:13.5px;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.r,th.r{text-align:right}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--accent-soft)}
tfoot td{font-weight:700;border-bottom:0}
.chip{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
.chip.ok{background:var(--pos-soft);color:var(--pos)}
.chip.open{background:var(--warn-soft);color:var(--warn)}
.chip.off{background:var(--neg-soft);color:var(--neg)}
.chip.tag{background:var(--accent-soft);color:var(--accent)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{font:inherit;font-size:15px;font-weight:500;border-radius:10px;padding:10px 16px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
.btn:hover:not(:disabled){border-color:var(--line-strong)}
.btn.primary:hover:not(:disabled){filter:brightness(1.06)}
.btn svg{width:18px;height:18px}
.btn.ghost{background:transparent}
.btn.danger{color:var(--neg)}
.btn.sm{font-size:14px;padding:7px 12px}
.btn:disabled{opacity:.5;cursor:default}
a{color:var(--accent)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.empty{padding:26px 16px;text-align:center;color:var(--muted);display:grid;gap:10px;justify-items:center}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.drop{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--muted);display:grid;gap:8px;justify-items:center;cursor:pointer}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop b{color:var(--fg)}
/* Bearbeiten: ganze Seite statt Seitenpanel */
.overlay{position:fixed;inset:0;z-index:20;background:var(--bg)}
.panel{--pw:1280px;position:absolute;inset:0;overflow:hidden auto;overscroll-behavior:contain;background:var(--bg);
  padding:0 max(clamp(16px,3vw,40px),calc((100% - var(--pw)) / 2)) calc(48px + env(safe-area-inset-bottom,0px));display:grid;gap:18px;align-content:start;grid-auto-rows:max-content}
.panel.wide{--pw:1280px}
.panel-head{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) 0 14px;margin-bottom:6px}
.panel-head h2{font-size:clamp(19px,2vw,23px);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-head .back{padding:8px 12px 8px 8px}
.panel>h3{margin-top:14px}
/* zweispaltige Bearbeiten-Seite: links Daten, rechts Überblick */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.pgrid>.stack{min-width:0}
.pgrid>aside{position:sticky;top:86px;display:grid;gap:18px;min-width:0}
@media (max-width:1050px){.pgrid{grid-template-columns:1fr}.pgrid>aside{position:static}}
.group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:grid;gap:14px;min-width:0}
.group>h3{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 16px}
.fields .full{grid-column:1/-1}
label{display:grid;gap:5px;font-size:14px;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 12px;width:100%;min-width:0}
input[type=number]{font-variant-numeric:tabular-nums}
input.filled{border-color:var(--accent);background:var(--accent-soft)}
textarea{min-height:60px;resize:vertical}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px;display:grid;gap:10px}
.prod-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.calcline{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.calcline b{color:var(--fg);font-variant-numeric:tabular-nums}
.addrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.banner{padding:12px 16px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:15px;border-left:3px solid var(--warn)}
.status{padding:12px 14px;border-radius:10px;background:var(--accent-soft);font-size:15px}
.status.err{background:var(--warn-soft);color:var(--warn);border-left:3px solid var(--warn)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.list{display:grid;gap:8px}
.lrow{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.lrow.sep{border-top:1px solid var(--line);padding-top:8px;font-weight:700}
.cat{display:grid;gap:4px}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.chart svg{width:100%;height:auto;display:block}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(28px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:12px;font-size:15px;font-weight:600;z-index:60;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(10,20,30,.22)}
.toast[hidden]{display:none}
.toast.ok{background:var(--pos);color:#fff}
.toast.err{background:var(--neg);color:#fff}
.toast .ic{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.toast .ic svg{width:14px;height:14px}
.welcome{justify-items:center;text-align:center;padding:36px 24px}
.okc{width:58px;height:58px;border-radius:50%;background:var(--pos-soft);color:var(--pos);display:grid;place-items:center}
.okc svg{width:30px;height:30px}
.welcome b{font-size:19px}
@media (prefers-reduced-motion:no-preference){
  .toast:not([hidden]){animation:toastIn .26s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,12px) scale(.96)}}
  .okc{animation:pop .35s cubic-bezier(.2,.9,.3,1.3)}
  .okc path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .35s .15s ease-out forwards}
  .welcome b,.welcome span{animation:fade .3s .1s ease-out both}
  .fadein{animation:fade .3s ease-out}
  @keyframes pop{from{transform:scale(.6);opacity:0}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}}
}
@media (prefers-reduced-motion:no-preference){.overlay{animation:pgIn .2s ease-out}@keyframes pgIn{from{opacity:0;transform:translateY(10px)}}}
.items{display:grid;gap:10px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
.item .full{grid-column:1/-1}
.item-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px}
@media (max-width:480px){.item{grid-template-columns:1fr 1fr}.item label:nth-of-type(4){grid-column:1/-1}}
.preview{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px;display:grid;gap:6px}
.preview canvas{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.12);background:#fff}
.linkbtn{all:unset;color:var(--accent);cursor:pointer;text-decoration:underline}
.msg{max-width:min(620px,92%);padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.msg.me{justify-self:end;background:var(--accent-soft)}
.msg.internal{background:var(--warn-soft)}
.msg .by{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.msg p{margin:0;white-space:pre-wrap}
.thread{display:grid;gap:10px}
.tsplit{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.tsplit{grid-template-columns:1fr}}
.titem{display:grid;gap:4px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.titem.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.titem .row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.chip.gold{background:var(--warn-soft);color:var(--warn)}
.chip.blue{background:var(--accent-soft);color:var(--accent)}
.chip.err{background:var(--neg-soft);color:var(--neg)}
.chip.grey{background:var(--bg);color:var(--muted)}
.chip i{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}
.login{min-height:70vh;display:grid;place-items:center}
.login .card{width:min(420px,100%)}

/* Einstellungen mit Bereichs-Menü */
.setgrid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.setnav{display:grid;gap:4px;position:sticky;top:16px}
.setnav button{all:unset;cursor:pointer;display:grid;gap:1px;padding:10px 14px;border-radius:10px;color:var(--fg)}
.setnav button b{font-weight:600;font-size:15px}
.setnav button span{font-size:13px;color:var(--muted)}
.setnav button:hover{background:var(--surface)}
.setnav button.on{background:var(--surface);box-shadow:inset 3px 0 0 var(--accent),0 1px 2px rgba(0,0,0,.04)}
.setnav button:focus-visible{outline:2px solid var(--accent)}
@media (max-width:860px){.setgrid{grid-template-columns:1fr}.setnav{position:static;grid-auto-flow:column;overflow-x:auto;grid-auto-columns:max-content}}
/* Angebotskonfigurator */
.cfggrid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
@media (max-width:1000px){.cfggrid{grid-template-columns:1fr}}
.cfgsum{position:sticky;top:86px}
.cfgsum table{font-size:13.5px;table-layout:fixed}
.cfgsum th,.cfgsum td{padding:7px 4px}
.cfgsum th:first-child,.cfgsum td:first-child{width:38%}
.cfgsum .lrow{font-size:14px}
.cfgp summary{cursor:pointer;list-style:none}
.cfgp summary::-webkit-details-marker{display:none}
.cfgp summary h3::before{content:"▸ ";color:var(--muted)}
.cfgp[open] summary h3::before{content:"▾ "}
.cfgt td{vertical-align:middle}
.cfgt tr.sec td{background:var(--bg);font-size:13px;padding-top:8px;padding-bottom:6px}
.cfgt tr.on td{background:var(--accent-soft)}
.cfgt input[type=checkbox]{width:18px;height:18px}
tr.sec td{background:var(--bg)}
.cfggrid>.stack{min-width:0}
.cfgp{min-width:0;overflow:hidden}
.cfgp .tablewrap{max-width:100%}
.cfgt{font-size:14px}
.cfgt th{font-size:11.5px;white-space:normal}
.cfgt td{padding:9px 6px}
/* Unterreiter auf ganzen Seiten */
.subtabs{display:flex;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.subtabs button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:10px 14px 11px;border-bottom:3px solid transparent;margin-bottom:-1px;font-size:15.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.subtabs button small{grid-column:2}
.subtabs .no{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--track);color:var(--muted);font-size:12.5px;font-weight:700}
.subtabs button[aria-selected="true"] .no{background:var(--accent);color:var(--accent-fg)}
.subtabs button small{font-size:12.5px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.subtabs button:hover{color:var(--fg)}
.subtabs button[aria-selected="true"]{color:var(--fg);font-weight:600;border-bottom-color:var(--accent)}
.subtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.subp{min-width:0}
.group .prod{background:var(--bg)}
.group>.btn{justify-self:start}
/* Konfigurator */
.cfgwrap{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:1100px){.cfgwrap{grid-template-columns:1fr}}
.cfgpd{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cfgpd label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg)}
.cfgint{background:var(--bg);border-radius:10px;padding:12px 14px}
.cfgsum .btn.primary{width:100%}
.cfgt tfoot td{border-top:1px solid var(--line-strong);padding-top:10px}
.subtabs .chip{font-size:11px;padding:0 6px;margin-left:4px}
.panel-head .subtabs{flex-basis:100%;margin:2px 0 -14px}
.panel-head:has(.subtabs) h2{flex:1}
.panel:has(.panel-head .subtabs) .pgrid>aside,.panel:has(.panel-head .subtabs) .cfgsum{top:150px}
/* Kopfzeile + Tab-Leiste bleiben immer sichtbar – auch beim Bearbeiten */
/* weiße Kopfzeile über die ganze Breite (wie im Kundenportal) */
@media (max-width:640px){.head{gap:12px}}
/* Preisliste */
.card>.subtabs{margin-bottom:4px}
.pltable td{vertical-align:middle}
.pltable .plin{width:100px;padding:6px 8px;font-size:14px;text-align:right}
.pltable .plin.chg,.pltable input.chg{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.pltable tr.off td{opacity:.55}
.pltable input[type=checkbox]{width:18px;height:18px}
html,body{overflow-x:clip}
/* Vertrieb: Pipeline in 3 Stufen */
.seg{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--bg)}
.seg button{all:unset;cursor:pointer;padding:7px 14px;border-radius:7px;font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(18,28,38,.12)}
.seg button:focus-visible{outline:2px solid var(--accent)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:980px){.board{grid-template-columns:1fr}}
.lcol{background:var(--bg);border-radius:12px;padding:14px;display:grid;gap:10px;align-content:start;min-height:160px}
.lcol header{display:flex;gap:10px;align-items:flex-start}
.lcol header>div{flex:1;min-width:0}
.lcol .no{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-size:13px;font-weight:700}
.lc-cnt{font-weight:700;font-size:15px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 9px}
.lc-sum{margin-top:-4px;padding-left:36px}
.lc-list{display:grid;gap:10px}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:6px;cursor:pointer;text-align:left}
.lcard:hover{border-color:var(--accent)}
.lcard:focus-visible{outline:2px solid var(--accent)}
.lc-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lc-chips{display:flex;flex-wrap:wrap;gap:4px}
.lc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.lc-empty{padding:18px 6px;text-align:center;border:1px dashed var(--line);border-radius:10px}
.subtabs button>span:not(.no){display:grid}
/* Stufen-Auswahl beim Interessenten */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.stage{display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface);color:var(--fg)}
.stage input{position:absolute;opacity:0;pointer-events:none}
.stage b{font-size:15px}
.stage span{font-size:13px;color:var(--muted)}
.stage:hover{border-color:var(--accent)}
.stage.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.stage.lost.on{border-color:var(--neg);background:var(--neg-soft);box-shadow:inset 0 0 0 1px var(--neg)}
.stage:has(input:focus-visible){outline:2px solid var(--accent)}
.stage{position:relative}
/* Aufträge */
.order{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:10px;background:var(--surface)}
.order-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.group>.seg,.stack>.seg{justify-self:start}

/* Ein weißer Block: Logo + Tab-Leiste (gleiche Abstände oben/unten), darunter grauer Arbeitsbereich */
/* Seitenkopf beim Bearbeiten: grau wie der Arbeitsbereich, feine Linie, Aktionen (Speichern) rechts */
.panel-head{border-image:linear-gradient(to top,var(--line) 1px,var(--surface) 1px) fill 0//0 100vmax}
.panel-head .ph-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.panel-head .ph-actions .toolbar,.panel-head .ph-actions .btns{display:contents}
/* Pipeline untereinander */
.stagelist{display:grid;gap:18px}
.lstage{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lstage>header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.lstage .no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-size:14px;font-weight:700}
.ls-t{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ls-t b{font-size:16.5px}
.ls-meta{font-size:14px;color:var(--muted);white-space:nowrap}
.ls-meta b{color:var(--fg)}
.ls-empty{padding:16px}
.ls-list{display:grid}
.lrowc{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,1.3fr) minmax(150px,1fr) 90px auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer;background:var(--surface)}
.lrowc:first-child{border-top:0}
.lrowc:hover{background:var(--accent-soft)}
.lrowc:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lr-main{display:grid;min-width:0}
.lr-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.lr-val{text-align:right}
.lr-stage{display:flex;gap:8px;align-items:center;justify-content:flex-end}
@media (max-width:900px){.lrowc{grid-template-columns:1fr auto}.lr-chips,.lr-next{grid-column:1/-1}.lr-stage{grid-column:1/-1;justify-content:flex-start}}
/* gesperrter Schritt */
.locked{display:grid;gap:12px;justify-items:start;padding:26px 24px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface)}
.locked b{font-size:17px}
.subtabs button>span small{grid-column:auto}

.overlay{top:0;left:var(--side)}
@media (max-width:900px){.overlay{left:0;top:var(--headh,0px)}}

/* Hell / Dunkel */
.themesw{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.themesw button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--muted)}
.themesw button svg{width:16px;height:16px}
.themesw button[aria-pressed="true"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.themesw button:focus-visible{outline:2px solid var(--accent)}

/* Übersicht: Aufgaben + Kennzahlen + Diagramm */
.todo-list{display:grid}
.todo-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 2px;border-top:1px solid var(--line)}
.todo-row:first-child{border-top:0}
.todo-row>i{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.todo-row.hi>i{background:var(--neg)}.todo-row.mid>i{background:#d99a2b}.todo-row.low>i{background:var(--accent)}
.todo-row>div{display:grid;min-width:0}
.todo-row b{font-weight:600}
.todo-done{display:flex;align-items:center;gap:14px}
.todo-done .okc{width:40px;height:40px}.todo-done .okc svg{width:20px;height:20px}
.todo-done>div{display:grid}
.ovgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:22px;align-items:start}
@media (max-width:1100px){.ovgrid{grid-template-columns:1fr}}
details.more>summary{list-style:none;cursor:pointer;display:grid;gap:2px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary h2::after{content:"  ▾";color:var(--muted);font-size:15px}
details.more[open]>summary h2::after{content:"  ▴"}
.kpi .small{font-size:13px}
/* Spalten-Diagramm (Vertriebsportal) */
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;height:180px;padding-top:8px}
.cols>div{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;min-width:0}
.cols .b{display:flex;align-items:flex-end;justify-content:center;gap:3px}
.cols .b i{display:block;width:40%;max-width:14px;border-radius:4px 4px 0 0;background:var(--inc);min-height:2px}
.cols .b i.e{background:var(--exp)}
.cols span{font-size:12px;color:var(--muted);text-align:center}
.stagebars{display:grid;gap:10px}
.stagebars button{all:unset;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.stagebars .bar{grid-column:1/-1}
.stagebars button:hover b{color:var(--accent)}

/* Schnell erfassen */
.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.qa svg{grid-row:span 2;width:22px;height:22px;color:var(--accent)}
.qa b{font-size:15px}.qa span{font-size:13px;color:var(--muted)}
.qa:hover{border-color:var(--accent);background:var(--accent-soft)}
.qa:focus-visible{outline:2px solid var(--accent)}
.klein{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.group.quick{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}
/* Kein "Gummiband"-Scrollen über den Seitenrand hinaus */
html,body{overscroll-behavior:none}
.side{overscroll-behavior:contain;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
/* Niedrige Bildschirme: Leiste kompakter, damit alles ohne Scrollen sichtbar ist */
@media (min-width:901px) and (max-height:920px){
  .side{gap:14px;padding-top:18px;padding-bottom:14px}
  .side-tag{font-size:19px;margin-top:-6px}
  .tabs button,nav.tabs button{padding:8px 14px}
  .side-foot{gap:8px;padding-top:10px}
}
@media (min-width:901px) and (max-height:760px){
  .side-foot .me{display:none}
  .tabs button,nav.tabs button{padding:6px 12px;font-size:15.5px}
}
/* Break-even auf der Übersicht */
.be{gap:14px}
.card.be{display:flex;flex-direction:column}
.be-chart{position:relative;flex:1 1 auto;min-height:260px;margin-top:4px}
.be-chart svg{display:block;overflow:visible}
.be-tip{position:absolute;pointer-events:none;display:grid;gap:3px;min-width:200px;padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 22px rgba(13,42,64,.12);font-size:13px;z-index:2}
.be-legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.be-legend span{display:inline-flex;align-items:center;gap:7px}
.be-legend i.ln{width:18px;height:0;border-top:2.5px solid var(--accent);border-radius:2px}
.be-legend i.ln.dash{border-top:2px dashed var(--pos)}
.be-res{font-family:var(--f-num);font-size:26px;font-weight:700;letter-spacing:-.02em}
.be-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.be-nums div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--bg)}
.be-nums span{font-size:13.5px;color:var(--muted)}
.be-nums b{font-family:var(--f-num);font-size:21px;font-weight:700}
.be-nums small{font-size:12px;line-height:1.35}
.be-bar{height:10px}.be-bar i{background:var(--pos)}
.be .chart svg{max-height:200px}
/* Angemeldetes Konto oben rechts */
.acct{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border:1px solid var(--line);border-radius:99px;background:var(--surface);min-width:0;max-width:300px}
.acct .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-size:13px;font-weight:700}
.acct-t{display:grid;min-width:0;line-height:1.25}
.acct-t small{font-size:12px;color:var(--muted)}
.acct-t b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Module als Häkchen-Chips */
.modchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.modchip{display:inline-flex;align-items:center;cursor:pointer}
.modchip input{position:absolute;opacity:0;pointer-events:none}
.modchip span{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:14px;background:var(--surface);color:var(--muted)}
.modchip input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.modchip input:checked+span::before{content:"✓ "}
.modchip input:focus-visible+span{outline:2px solid var(--accent)}
.modchips.ro .modchip span{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);font-size:13px;padding:3px 10px}
.prod.off{opacity:.75}
.prod-head .check{font-size:16px}
.modlist{display:grid;gap:8px}
.modrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.modrow.off input[type=text]{color:var(--muted);text-decoration:line-through}
/* Vorgefertigte Mails */
.mailbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mailbtn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.mailbtn svg{grid-row:span 2;width:22px;height:22px;color:var(--accent)}
.mailbtn b{font-size:15px}.mailbtn span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailbtn:hover:not([disabled]){border-color:var(--accent);background:var(--accent-soft)}
.mailbtn[disabled]{opacity:.5;cursor:not-allowed}
.mailbtn:focus-visible{outline:2px solid var(--accent)}
/* Berechtigungen mit Vorschau */
details.perms{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
details.perms>summary{list-style:none;cursor:pointer;display:grid;gap:2px}
details.perms>summary::-webkit-details-marker{display:none}
details.perms>summary b::after{content:"  ▾";color:var(--muted)}
details.perms[open]>summary b::after{content:"  ▴"}
.permgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0}
.perm{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer}
.perm-h{display:flex;align-items:center;gap:8px}
.perm-h input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.perm:has(input:not(:checked)) .pv{opacity:.35;filter:grayscale(1)}
.perm:has(input:not(:checked)) .perm-h b{color:var(--muted);text-decoration:line-through}
.pv{display:grid;gap:4px;padding:8px 10px;border-radius:8px;background:var(--surface);border:1px dashed var(--line);font-size:12.5px;color:var(--fg)}
.pv-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:18px}
.pv i{font-style:normal;padding:1px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px}
.pv i.ok{background:var(--pos-soft);color:var(--pos)}
.pv i.btn{background:var(--accent);color:var(--accent-fg);border-radius:6px}
.pv .bar{display:block;width:100%;height:6px}
.pv .bar span{display:block;height:100%;background:var(--accent);border-radius:99px}
/* Buchhaltung: „verbucht“-Häkchen */
.bk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap}
.bk input{width:18px;height:18px;margin:0;accent-color:var(--pos)}
.bk input:checked+span{color:var(--pos);font-weight:600}
details.costs>summary{cursor:pointer;font-size:14px;color:var(--muted);padding:4px 0}
details.costs[open]>summary{margin-bottom:10px}
/* Stufen-Leiste im Vertrieb: 1 Potenzial → 5 Gewonnen, Verloren abgesetzt */
.stagebar{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.stagebar .sb{position:relative;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:99px;background:var(--surface);cursor:pointer;font-size:14.5px;color:var(--muted)}
.stagebar .sb input{position:absolute;opacity:0;pointer-events:none}
.stagebar .sb .no{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted)}
.stagebar .sb b{font-weight:600}
.stagebar .sb.done{color:var(--fg)}
.stagebar .sb.done .no{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.stagebar .sb.on{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.stagebar .sb.on .no{background:var(--accent-fg);color:var(--accent);border-color:transparent}
.stagebar .sb.lost{margin-left:auto}
.stagebar .sb.lost.on{background:var(--neg);border-color:var(--neg);color:#fff}
.stagebar .sb.lost.on .no{color:var(--neg);background:#fff}
.stagebar .sb:hover:not(.on){border-color:var(--accent)}
.stagebar .sb:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.sb-desc{margin-top:6px}
/* Seitenleiste fest am linken Rand (statt sticky) – verrutscht nicht mehr, wenn die Seite unter einem geöffneten Fenster kürzer wird */
@media (min-width:901px){
  .shell{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--side);height:auto}
  .main{margin-left:var(--side)}
  body:has(nav[hidden]) .side{position:static;width:auto}
  body:has(nav[hidden]) .main{margin-left:auto}
}
/* Partner-Freigaben mit Live-Vorschau */
.permlive{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);gap:22px;align-items:start;margin-top:8px}
@media (max-width:1000px){.permlive{grid-template-columns:1fr}}
.pl-left{display:grid;gap:16px}
.pl-group{display:grid;gap:4px}
.pl-group>b{color:var(--muted);margin-bottom:2px}
.pl-group[data-dep]{padding-left:14px;border-left:2px solid var(--line)}
.pl-group.off{opacity:.45;pointer-events:none}
.sw{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:8px 10px;border-radius:10px;cursor:pointer}
.sw:hover{background:var(--bg)}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw-ui{width:38px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:background .15s}
.sw-ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked+.sw-ui{background:var(--accent)}
.sw input:checked+.sw-ui::after{transform:translateX(16px)}
.sw input:focus-visible+.sw-ui{outline:2px solid var(--accent);outline-offset:2px}
.sw-t{display:grid;line-height:1.35}
.pl-right{position:sticky;top:12px;display:grid;gap:8px}
.pv-portal{display:grid;grid-template-columns:120px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);font-size:12.5px;min-height:240px}
.pv-side{display:grid;align-content:start;gap:3px;padding:10px 8px;background:var(--surface);border-right:1px solid var(--line)}
.pv-side b{font-size:12px;margin-bottom:6px;color:var(--muted)}
.pv-side span{padding:4px 8px;border-radius:6px;color:var(--muted)}
.pv-side span.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.pv-main{display:grid;align-content:start;gap:6px;padding:10px}
.pv-h{font-weight:700;font-size:13px;margin-top:4px}
.pv-card{display:grid;gap:4px;padding:8px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.pv-card i{font-style:normal;padding:1px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px}
.pvbar{display:block;height:5px;border-radius:99px;background:var(--line);margin-top:3px}
.pvbar em{display:block;height:100%;border-radius:99px;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.sw-ui,.sw-ui::after{transition:none}}
/* Module in den Einstellungen */
.modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.modcol{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.modcol header{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.modcol header .ic{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--surface)}
.modcol header .ic svg{width:20px;height:20px}
.modlist{display:grid;gap:6px}
.modrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}
.modrow input[type=text]{padding:7px 10px;font-size:14.5px;background:var(--surface)}
.modrow.off input[type=text]{color:var(--muted);text-decoration:line-through}
.sw.mini{padding:4px;grid-template-columns:auto}
.iconbtn{all:unset;cursor:pointer;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:18px}
.iconbtn:hover{background:var(--neg-soft);color:var(--neg)}
.iconbtn.confirm{width:auto;padding:0 8px;font-size:12.5px;font-weight:600;background:var(--neg-soft);color:var(--neg)}
.iconbtn:focus-visible{outline:2px solid var(--accent)}
.modadd{display:grid;grid-template-columns:1fr auto;gap:6px}
.modadd input{padding:7px 10px;font-size:14.5px}
@media (min-width:901px){.main{width:auto}}
.modgrid{grid-template-columns:1fr}
.modcol .modlist{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:14px}
.modcol .modadd{max-width:460px}
/* Mail-Ablauf im Interessenten */
.flow{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.flow-t{font-size:15px}
.flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
@media (max-width:760px){.flow ol{grid-template-columns:1fr}}
.flow li{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.flow li .no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.flow li .fl-txt{display:grid;line-height:1.3}
.flow li .fl-txt small{font-size:12.5px;color:var(--muted)}
.flow li .btn{grid-column:1/-1;justify-content:center}
.flow li.done .no{background:var(--pos-soft);border-color:transparent;color:var(--pos)}
.flow li.due{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.flow li.due .no{background:var(--accent);border-color:transparent;color:var(--accent-fg)}
.flow li.due small{color:var(--accent-ink)}
.flow li.open{opacity:.6}
/* Vertriebs-Mails in den Einstellungen */
.mailflow-set{display:grid;gap:14px}
.mtcard{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.mtcard header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mtcard header .no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:13.5px}
.mtcard .delay{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-left:auto}
.mtcard .delay input{width:64px;padding:5px 8px;text-align:center}
.mtcard label{display:grid;gap:4px}
.modtable td.nowrap{white-space:nowrap}
.iconbtn.up{width:30px;height:30px;font-size:16px}
.iconbtn.up:hover:not([disabled]){background:var(--accent-soft);color:var(--accent)}
.iconbtn[disabled]{opacity:.3;cursor:default}
.pltable tr.sec td{background:var(--bg);font-size:14px}
.modtable .iconbtn{display:inline-grid;vertical-align:middle}
/* Große Bildschirme: Inhalt mittig im freien Bereich, gleich breit wie die geöffneten Seiten */
@media (min-width:901px){
  .main{max-width:none;padding-inline:max(clamp(16px,3vw,44px),calc((100vw - var(--side) - 1400px) / 2))}
  .panel,.panel.wide{--pw:1400px}
}
/* Übersicht: Kunden je Leistung, Tickets */
.svcrows{display:grid;gap:6px}
.svcrow{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:8px 10px;border-radius:10px}
.svcrow:hover{background:var(--bg)}
.svcrow .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.svcrow .ic svg{width:19px;height:19px}
.svcrow .nm{font-weight:500}
.svcrow b{font-family:var(--f-num);font-size:20px;min-width:24px;text-align:right}
.svcrow .small{min-width:70px;text-align:right}
.tkpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--bg);border-left:4px solid var(--line)}
.tk b{font-family:var(--f-num);font-size:26px;font-weight:700;line-height:1.1}
.tk span{font-size:13px;color:var(--muted)}
.tk.ts{border-left-color:var(--neg)}.tk.as{border-left-color:#d99a2b}
.tk:hover{background:var(--accent-soft)}
/* Weniger Rand links/rechts auf großen Bildschirmen */
@media (min-width:901px){
  .main{padding-inline:max(clamp(16px,2vw,32px),calc((100vw - var(--side) - 1600px) / 2))}
  .panel,.panel.wide{--pw:1600px;padding-inline:max(clamp(16px,2vw,32px),calc((100% - var(--pw)) / 2))}
}
.svcrow .ic{color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
/* Handy: Kennzahlen zweispaltig, Break-even kompakt */
@media (max-width:600px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:14px 14px}
  .kpi b{font-size:22px}
  .kpi .small,.kpi span{font-size:12.5px}
  .be-nums{gap:6px}
  .be-nums div{padding:9px 10px}
  .be-nums b{font-size:16px}
  .be-nums span{font-size:12px}
  .svcrow{grid-template-columns:auto 1fr auto;gap:4px 10px}
  .svcrow .small{grid-column:2/-1;text-align:left;min-width:0}
  .tk b{font-size:22px}
}
.svcrow{gap:10px}
.svcrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Einstellungs-Menü links bleibt beim Scrollen stehen */
@media (min-width:861px){.setgrid{align-items:start}.setnav{position:sticky;top:24px;align-self:start}}
/* Kunden-Karte: Zeilen bündig mit Überschrift/Fußzeile, gleichmäßig verteilt */
.custcard{display:flex;flex-direction:column;gap:14px}
.custcard .svcrows{flex:1;margin-inline:-10px;align-content:space-evenly}
/* Vertrieb: zwei Wege (E-Mail / Vor Ort) */
.waychip{display:inline-flex;align-items:center;gap:4px;vertical-align:1px;margin-left:6px;padding:2px 8px 2px 6px;border-radius:99px;font-size:12px;font-weight:600;line-height:1.5}
.waychip svg{width:13px;height:13px}
.waychip.mail{background:var(--accent-soft,rgba(22,125,191,.12));color:var(--accent-ink,var(--accent))}
.waychip.besuch{background:color-mix(in srgb,#2e9e6b 15%,transparent);color:#2e9e6b}
.waypick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:600px){.waypick{grid-template-columns:1fr}}
.wayopt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer}
.wayopt input{position:absolute;opacity:0;pointer-events:none}
.wayopt .wi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.wayopt .wi svg{width:19px;height:19px}
.wayopt b{display:block;font-size:15px}
.wayopt small{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.wayopt:hover{border-color:var(--accent)}
.wayopt.on,.wayopt:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wayopt:has(input:checked) .wi{background:var(--accent);color:var(--accent-fg);border-color:transparent}
.wayopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.wayseg button{display:inline-flex;align-items:center;gap:6px}
.wayseg svg{width:15px;height:15px}
.flow ol:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.flow ol:has(> li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.flow ol:has(> li:nth-child(4)){grid-template-columns:1fr}}
.flow li .fl-ctl{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.flow li .fl-ctl .btn{flex:1 1 auto}
.flow li .vplan{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.flow li .vplan input{flex:1 1 100%;min-width:0;font-size:14px;padding:7px 9px}
.flow li.opt{border-style:dashed}
/* Übersicht: beide Spalten enden auf gleicher Höhe – die letzte Karte jeder Spalte füllt den Rest */
@media (min-width:1101px){.ovgrid{align-items:stretch}.ovgrid>.stack{display:flex;flex-direction:column}.ovgrid>.stack>:last-child{flex:1 1 auto}}
/* Einstellungen: Überschrift und Navigation bleiben beim Scrollen stehen */
@media (min-width:861px){
  body:has(.setgrid) .ptitle{position:sticky;top:0;z-index:15;background:var(--bg);margin-top:-30px;padding:30px 0 14px;box-shadow:0 1px 0 var(--line)}
}
/* Segment-Leisten in Karten nicht über die volle Breite ziehen */
.card>.seg,.card>div>.seg{justify-self:start;max-width:100%;overflow-x:auto}
.mtgroup{margin:6px 0 -2px;font-size:15px}
.webpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.webpick .wayopt{grid-template-columns:1fr;padding:10px 12px}
@media (max-width:700px){.webpick{grid-template-columns:1fr}}
/* Gebuchte Module beim Kunden: Liste, ein Modul pro Zeile */
.bmods{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.bmods-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.bmods-head>div{display:grid;gap:2px}
.bmods-head b{font-size:15px}
.bmods-sec{display:grid;gap:4px}
.bmods-st{font-size:13px;font-weight:600;color:var(--muted);padding-top:2px}
.bmods-grid{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bmod{position:relative;display:grid;grid-template-columns:auto minmax(170px,280px) 1fr;gap:4px 14px;align-items:center;padding:10px 14px;cursor:pointer;background:var(--surface)}
.bmod+.bmod{border-top:1px solid var(--line)}
.bmod input{position:absolute;opacity:0;pointer-events:none}
.bm-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--surface);display:grid;place-items:center}
.bm-txt{display:contents}
.bm-txt b{font-size:14.5px;font-weight:600}
.bm-txt small{font-size:13.5px;color:var(--muted);line-height:1.4}
.bmod:hover{background:var(--bg)}
.bmod:has(input:checked){background:var(--accent-soft)}
.bmod:has(input:checked) .bm-box{background:var(--accent);border-color:var(--accent)}
.bmod:has(input:checked) .bm-box::after{content:"";width:5px;height:10px;border:solid var(--accent-fg);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.bmod:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:700px){.bmod{grid-template-columns:auto 1fr;align-items:start}.bm-txt small{grid-column:2}}
.bmods.miss{border-color:var(--neg)}
.bmods-st .req{color:var(--neg);font-weight:600}
.bm-box.rd{border-radius:50%}
.bmod:has(input:checked) .bm-box.rd::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--accent-fg);transform:none}
/* Beim Laden (auch nach Neu laden) nichts Halbfertiges zeigen – nur ein ruhiger Ladekreis */
/* Beim Laden ruhig halten – die Anmeldung aber immer sofort zeigen */
body.boot .shell:not(:has(.lshell)){visibility:hidden}
body.boot:not(:has(.lshell))::after{content:"";position:fixed;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;border:3px solid #d8e1ea;border-top-color:#167dbf;animation:bootspin .8s linear infinite}
@keyframes bootspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){body.boot:not(:has(.lshell))::after{animation-duration:2.4s}}
/* Ticket-Detail (Dashboard) */
.tfilter{flex-wrap:wrap}
.tfilter .cnt0{font-weight:500;color:var(--muted);margin-left:2px}
.tfilter button.on .cnt0{color:inherit}
.tdetail{gap:14px}
.tstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tstat button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:10px 8px;border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:14px;color:var(--muted);background:var(--bg)}
.tstat button:hover{border-color:var(--accent);color:var(--fg)}
.tstat button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.tstat button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:700px){.tstat{grid-template-columns:repeat(2,1fr)}}
.tinfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.tinfo>div{display:grid;gap:2px;min-width:0;align-content:start}
.tinfo b{overflow-wrap:anywhere}
.tinfo a{color:var(--accent)}
.tmsg{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0}
.tfacts>div{padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.tfacts dt{font-size:13px;color:var(--muted)}
.tfacts dd{margin:2px 0 0;font-weight:600}
.tdesc{display:grid;gap:4px}
.tdesc p{margin:0;white-space:pre-wrap;font-size:15.5px;line-height:1.6}
.tnotes{display:grid;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.tnote{padding:10px 12px;border-radius:10px;background:var(--bg);border:1px dashed var(--line-strong)}
.tnote p{margin:2px 0 0;white-space:pre-wrap}
/* Ticket-Status in Farbe: offen rot · in Bearbeitung blau · wartet auf Kunde gelb · erledigt grün */
.chip.wait{background:#fdf3d6;color:#8a5a00}
:root[data-theme="dark"] .chip.wait{background:#3a2e12;color:#f0c66b}
.tstat button{--sc:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px}
.tstat button i{width:9px;height:9px;border-radius:50%;background:var(--sc);flex:none}
.tstat .st-offen{--sc:#c8402f}
.tstat .st-in-Bearbeitung{--sc:#167dbf}
.tstat .st-wartet-auf-Kunde{--sc:#d49a00}
.tstat .st-erledigt{--sc:#1d8a52}
.tstat button.on{background:var(--sc);border-color:var(--sc);color:#fff}
.tstat button.on i{background:#fff}
.tstat .st-wartet-auf-Kunde.on{color:#2a1d00}
.tstat .st-wartet-auf-Kunde.on i{background:#2a1d00}
.tstat button:not(.on):hover{border-color:var(--sc);color:var(--fg)}
/* Leistungs-Farben (überall gleich) */
.chip.svc-chat,.chip.svc-telefon,.chip.svc-website,.chip.svc-sonstiges{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.chip[class*="svc-"] svg{width:13px;height:13px;flex:none}
.chip.svc-chat{background:#f7edd8;color:#8a5f12}
.chip.svc-telefon{background:#dcf5f0;color:#0b7a6a}
.chip.svc-website{background:#efe7fd;color:#6236b8}
.chip.svc-sonstiges{background:#eef1f4;color:#56687a}
:root[data-theme="dark"] .chip.svc-chat{background:#3a2c12;color:#f0c66b}
:root[data-theme="dark"] .chip.svc-telefon{background:#123a33;color:#5fe0c6}
:root[data-theme="dark"] .chip.svc-website{background:#2c2148;color:#c6aefa}
.svc-ic{display:inline-grid;place-items:center;border-radius:8px;color:#fff;flex:none;box-shadow:0 3px 8px -4px rgba(15,27,45,.5)}
.svc-ic svg{width:58%;height:58%}
label.check.svc-pick{gap:8px}
label.check.svc-pick .svc-ic{width:22px;height:22px;border-radius:6px}
/* Karten in der Übersicht oben ausrichten (kein leerer Raum über der Überschrift) */
.ovgrid>.stack>.card{align-content:start}
/* Vertriebsportal: Finanzen auf einen Blick */
.fincard .cols{min-height:180px}
.finrows{display:grid;border-top:1px solid var(--line);margin-top:4px}
.finrows>button,.finrows>.sum{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.finrows>button:hover{background:var(--bg)}
.finrows>button:focus-visible{outline:2px solid var(--accent)}
.finrows>.sum{cursor:default;border-bottom:0;font-weight:600}
.finrows .sum b{font-size:18px}


.tclass{display:grid;gap:6px}
.tclass .seg button.danger.on{background:var(--neg-soft);color:var(--neg)}
.incl-h{display:grid;gap:2px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
/* Speicherplatz: Ring-Diagramme */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 12px}
.st-areas{grid-column:1/-1}
.st-areas .st-txt{flex:1;max-width:520px}
.st-tile{display:flex;align-items:center;gap:24px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.st-ring{width:128px;height:128px;flex:none}
.st-ring circle{transition:stroke-dasharray .6s ease}
.st-big{font-family:var(--f-num);font-weight:700;font-size:19px;fill:var(--fg)}
.st-sub{font-size:11px;fill:var(--muted)}
.st-txt{display:grid;gap:3px;min-width:0}
.st-txt b{font-family:var(--f-head);font-size:16px}
.st-txt .num{font-family:var(--f-num);font-weight:600;font-size:15px;margin-top:6px}
.st-free{font-size:13px;color:var(--pos);font-weight:500}
.st-free.neg{color:var(--neg)}
.st-legend{display:grid;gap:7px;margin-top:6px}
.st-legend div{display:grid;grid-template-columns:10px 1fr auto 44px;align-items:center;gap:9px;font-size:13.5px}
.st-legend i{width:10px;height:10px;border-radius:3px}
.st-legend .small{text-align:right}
@media (max-width:1100px){.st-tile{gap:14px;padding:16px}.st-ring{width:112px;height:112px}}
@media (max-width:640px){.st-grid{grid-template-columns:1fr}.st-ring{width:104px;height:104px}}
@media (prefers-reduced-motion:reduce){.st-ring circle{transition:none}}
.st-legend .num{margin-top:0;font-size:14px;text-align:right}
/* Mail-Ablauf: Text zum Kopieren */
.flow ol{grid-template-columns:1fr}
.flow li .fl-box{grid-column:1/-1}
.fl-mail{border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.fl-mail>summary{cursor:pointer;padding:9px 12px;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px}
.fl-mail>summary::-webkit-details-marker{display:none}
.fl-mail>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.fl-mail[open]>summary::before{transform:rotate(45deg)}
.fl-copy{display:grid;gap:8px;padding:0 12px 12px}
.fl-row{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center}
.fl-row.top{align-items:start}
.fl-row.top .btn{align-self:end}
.fl-row input,.fl-row textarea{width:100%;font:inherit;font-size:14px}
.fl-row textarea{min-height:180px;resize:vertical;line-height:1.45}
.group>.fl-mail{margin-top:2px}
.btn.ok{background:var(--pos-soft);color:var(--pos);border-color:transparent}
@media (max-width:640px){.fl-row{grid-template-columns:1fr}.fl-row .btn{justify-self:start}}
.flow li .fl-row .btn{grid-column:auto;justify-content:center;min-width:92px}
.flow li [data-flowunsent]{justify-self:start;grid-column:1/-1}
@media (max-width:640px){.flow li .fl-row .btn{justify-self:start}}