/* Layout: dunkle Navigationsspalte links, rechts das gewählte Interface; Kundendetails als Seitenpanel von rechts (wie Notion). Bewusst nur helles Theme wie der bestehende Rechner. */
:root{
 --pet:#04202c;--pet2:#0a3446;--neon:#00f56a;--neon-soft:#d9fde8;
 --bg:#f3f6f7;--card:#ffffff;--col:#e9eff1;--tx:#04202c;--mu:#4f6974;--mu2:#7d939c;--bd:#dbe4e7;
 --warn:#9a4a00;--warn-bg:#fff1df;--bad:#b42318;--bad-bg:#fde9e7;--ok-bg:#e4f7ec;
 --f:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 color-scheme:light}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 var(--f);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--neon);outline-offset:2px}
.num,.amt{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* App-Gerüst */
.app{display:grid;grid-template-columns:228px minmax(0,1fr);height:100%}
.nav{background:var(--pet);color:#fff;display:flex;flex-direction:column;padding:20px 12px 14px;gap:4px;min-height:0}
.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.4px;padding:0 10px 18px}
.logo .u{position:relative;display:inline-block}
.logo .u:after{content:"";position:absolute;left:2%;right:2%;bottom:-3px;height:4px;border-radius:4px;background:var(--neon);transform:rotate(-1.5deg)}
.logo small{display:block;font-size:.68rem;font-weight:600;color:#8fa9b3;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.ni{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;color:#c6d5db;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600;text-align:left;position:relative}
.ni svg{width:19px;height:19px;flex:none}
.ni:hover{background:rgba(255,255,255,.06);color:#fff}
.ni.on{background:rgba(0,245,106,.12);color:#fff}
.ni.on:before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--neon)}
.ni .bd{margin-left:auto;background:var(--neon);color:var(--pet);font-size:.7rem;font-weight:800;border-radius:999px;padding:1px 7px}
.nsep{height:1px;background:rgba(255,255,255,.09);margin:10px 8px}
.ngrp{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#7f9aa4;padding:4px 12px;font-weight:700}
.nfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.me{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.05)}
.me b{display:block;font-size:.88rem}.me span{font-size:.74rem;color:#9fb3bb}
.reset{border:0;background:none;color:#7f9aa4;font-size:.74rem;cursor:pointer;text-align:left;padding:0 10px;text-decoration:underline}
.av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--neon);color:var(--pet);display:inline-grid;place-items:center;font-weight:800;font-size:.72rem}
.av.s{width:22px;height:22px;font-size:.6rem}
.av.d{background:var(--pet);color:var(--neon)}

.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 26px;background:var(--card);border-bottom:1px solid var(--bd)}
.top h1{font-size:1.25rem;font-weight:800;margin:0;letter-spacing:-.3px;margin-right:auto}
.as{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--mu);font-weight:600}
.as .pill{background:var(--warn-bg);color:var(--warn);border-radius:999px;padding:3px 9px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.in{width:100%;padding:9px 11px;background:var(--card);border:1px solid var(--bd);border-radius:10px;min-width:0}
.in:hover{border-color:#a9bcc3}.in:focus{outline:2px solid var(--neon);outline-offset:0;border-color:transparent}
select.in{cursor:pointer}
textarea.in{resize:vertical;min-height:64px;line-height:1.45}
.as select{width:auto;padding:7px 10px;font-weight:700;color:var(--tx)}
.view{flex:1;min-height:0;overflow:auto;padding:22px 26px 40px}
.view.board-v{overflow:hidden;display:flex;flex-direction:column;padding-bottom:16px}

/* Buttons im smart.fino-Stil */
.btn{border:0;font-weight:800;padding:10px 20px;cursor:pointer;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);transition:filter .15s,transform .15s;white-space:nowrap}
.btn:hover{filter:brightness(.94);transform:translateY(-1px)}.btn:active{transform:none}
.btn.gr{background:var(--neon);color:var(--pet)}.btn.dk{background:var(--pet);color:#fff}.btn.gh{background:var(--col);color:var(--tx)}
.btn.sm{padding:7px 14px;font-size:.82rem}
.btn.bad{background:var(--bad-bg);color:var(--bad)}
.btn.red{background:var(--bad);color:#fff}
.lnk{border:0;background:none;padding:0;color:var(--mu);font-weight:700;font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lnk:hover{color:var(--tx)}
.x{border:0;background:none;cursor:pointer;color:var(--mu2);font-size:1.1rem;line-height:1;padding:4px 6px;border-radius:6px}.x:hover{color:var(--bad);background:var(--bad-bg)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:800;letter-spacing:.03em;padding:2px 8px;border-radius:6px;white-space:nowrap}
.chip.lead{background:var(--neon);color:var(--pet)}
.chip.eigen{background:var(--card);color:var(--pet);box-shadow:inset 0 0 0 1.5px var(--pet)}
.chip.elead{background:var(--neon-soft);color:var(--pet);box-shadow:inset 0 0 0 1.5px #00c957}
.chip.ne{background:var(--warn-bg);color:var(--warn)}
.chip.ap{background:var(--col);color:var(--pet)}
.chip.won{background:var(--ok-bg);color:#0b6b37}.chip.lost{background:var(--bad-bg);color:var(--bad)}
.chip.st{background:var(--col);color:var(--mu)}

/* Pipeline */
.ptool{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ptool label{font-size:.78rem;font-weight:700;color:var(--mu);display:flex;align-items:center;gap:8px}
.ptool select{width:auto}
.ptool .sum{margin-left:auto;font-size:.82rem;color:var(--mu)}.ptool .sum b{color:var(--tx);font-size:1rem}
.board{flex:1;min-height:0;display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:stretch}
.col{flex:0 0 268px;background:var(--col);border-radius:14px;display:flex;flex-direction:column;min-height:0}
.col.vl{background:#dfe8eb;flex-basis:280px}
.ch{padding:12px 12px 8px}
.ch b{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;gap:6px}
.ch b span{font-size:.72rem;color:var(--mu);font-weight:700}
.ch small{display:block;font-size:.76rem;color:var(--mu);font-weight:600;margin-top:2px}
.cb{flex:1;overflow-y:auto;padding:4px 8px 12px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.col.over{outline:2px dashed var(--neon);outline-offset:-4px}
.mh{display:flex;justify-content:space-between;font-size:.7rem;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;padding:8px 4px 0}
.mh:first-child{padding-top:0}
.tile{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:10px 11px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s,border-color .15s}
.tile:hover{border-color:#aebfc5;box-shadow:0 6px 18px rgba(4,32,44,.08)}
.tile.drag{opacity:.4}
.tile.stale{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.tile.stale .tm span[title="Letzter Kontakt"]{color:var(--bad)}
.tile.ro{background:#f8fafb;border-style:dashed}
.t1{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.t1 b{font-size:.9rem;line-height:1.25;overflow-wrap:anywhere}
.tv{display:flex;align-items:baseline;gap:6px}
.tv .amt{font-size:1.06rem;font-weight:800;white-space:nowrap}
.tv{flex-wrap:wrap;column-gap:6px;row-gap:0}
.tv small{font-size:.7rem;color:var(--mu);font-weight:600}
.tm{display:grid;grid-template-columns:auto auto;justify-content:start;gap:3px 14px;font-size:.74rem;color:var(--mu);font-weight:600}
.tm span{display:inline-flex;align-items:center;gap:4px}
.tm svg{width:13px;height:13px}
.tm .warn{color:var(--warn)}.tm .late{color:var(--bad)}
.tb{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tb .av{margin-left:auto}
.empty{font-size:.78rem;color:var(--mu2);text-align:center;padding:16px 6px;border:1.5px dashed #c8d5da;border-radius:10px}

/* Karten, Tabellen */
.card{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:18px 20px}
.card h2{font-size:1rem;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card h2:before{content:"";display:inline-block;width:18px;height:5px;border-radius:5px;background:var(--neon);transform:rotate(-3deg)}
.card h2 .ex{margin-left:auto;font-size:.76rem;font-weight:600;color:var(--mu)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);font-weight:800;padding:8px 10px;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #edf1f3;vertical-align:middle}
td.r,th.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.ck{cursor:pointer}tr.ck:hover td{background:#f6f9fa}
.hint{font-size:.8rem;color:var(--mu);line-height:1.5}

/* Dashboard */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.dcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi.kpi3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi>div{background:var(--card);border:1px solid var(--bd);border-left:5px solid var(--neon);border-radius:14px;padding:12px 16px;min-width:0}
.kpi span{display:block;font-size:.68rem;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.06em}
.kpi b{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;margin:2px 0}
.kpi small{color:var(--mu);font-size:.76rem;font-weight:600}
.kpi .k2{border-left-color:var(--pet)}
.seg{display:inline-flex;background:var(--col);padding:3px;gap:2px;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
.seg button{border:0;background:none;padding:7px 12px;font-weight:700;font-size:.78rem;cursor:pointer;color:var(--mu);clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.seg button.on{background:var(--pet);color:#fff}
.dhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dhead .hint{margin-right:auto}
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;height:170px;padding-top:8px}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.stk{display:flex;flex-direction:column-reverse;width:100%;max-width:46px;border-radius:6px 6px 2px 2px;overflow:hidden;min-height:2px;background:var(--col)}
.stk i{display:block;min-height:2px}
.o1{background:var(--neon)}.o2{background:#2f8aa3}.o3{background:var(--pet)}.p{background:#b9c8ce}
.lg-d{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:.76rem;color:var(--mu);font-weight:700}
table.orig tr.sep td{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);font-weight:800;padding-top:14px}
table.orig tr.tot td{font-weight:800;border-bottom:0;border-top:2px solid var(--bd)}
.bar b{font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar span{font-size:.72rem;color:var(--mu);font-weight:700}
.att{display:flex;flex-direction:column}
.att button{display:flex;gap:10px;align-items:center;border:0;background:none;text-align:left;padding:9px 4px;border-bottom:1px solid #edf1f3;cursor:pointer;width:100%}
.att button:hover{background:#f6f9fa}
.att b{font-size:.86rem}.att span{font-size:.76rem;color:var(--mu)}
.att .chip{margin-left:auto}
.side{position:sticky;top:0}

/* Rechner */
.calc{display:flex;flex-direction:column;gap:12px}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fl{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:700;color:var(--mu);min-width:0}
.fl.span2{grid-column:1/-1}
.fl small{font-weight:600;color:var(--mu2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.res{background:linear-gradient(135deg,var(--pet),var(--pet2));color:#fff;border-radius:16px;padding:16px 18px}
.res .tag{display:inline-block;background:var(--neon);color:var(--pet);font-weight:800;font-size:.76rem;padding:3px 14px;border-radius:6px;transform:skewX(-10deg)}
.res .big{font-size:2.1rem;font-weight:800;color:var(--neon);margin:6px 0 8px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.res .l{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid rgba(255,255,255,.14);font-size:.84rem}
.res .l span{color:#a5bac2}.res .l b{text-align:right;font-variant-numeric:tabular-nums}
.res .l.hi b{color:var(--neon)}.res .l.hi span{color:#fff}
.res .hint{color:#a5bac2;font-size:.76rem;margin-top:6px}
.res .sub-h{margin:14px 0 2px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--neon)}
.toggles{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.calc .seg{display:flex;width:100%}.calc .seg button{flex:1;white-space:nowrap;padding:7px 4px;font-size:.74rem}

/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(4,32,44,.28);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--card);z-index:41;box-shadow:-18px 0 40px rgba(4,32,44,.18);transform:translateX(104%);transition:transform .22s ease;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer.on{transform:none}
.dh{padding:16px 20px 14px;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:10px}
.dh .row1{display:flex;gap:8px;align-items:center}
.dh .row1 .chips{display:flex;gap:6px;margin-right:auto;flex-wrap:wrap}
.nmrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nmrow .in{font-weight:800;font-size:1.05rem;padding:8px 10px}
.db{flex:1;overflow-y:auto;padding:16px 20px 30px;display:flex;flex-direction:column;gap:20px}
.sec h3{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin:0 0 10px;font-weight:800;display:flex;align-items:center;gap:8px}
.sec h3 em{font-style:normal;margin-left:auto;text-transform:none;letter-spacing:0;font-size:.76rem;font-weight:600}
.ff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ro-v{padding:9px 11px;background:var(--bg);border-radius:10px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:40px}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.panel{background:var(--bg);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.banner{border-radius:12px;padding:10px 12px;font-weight:700;font-size:.85rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner.won{background:var(--ok-bg);color:#0b6b37}.banner.lost{background:var(--bad-bg);color:var(--bad)}.banner.info{background:var(--warn-bg);color:var(--warn)}
.banner .lnk{margin-left:auto;color:inherit}
.ctr{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #edf1f3}
.ctr .ci{flex:1;min-width:0}
.ctr b{font-size:.86rem;display:block}
.ctr span{font-size:.76rem;color:var(--mu)}
.ctr .cv{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctr .cv small{display:block;font-weight:600;color:var(--mu);font-size:.7rem}
.tl{display:flex;flex-direction:column;position:relative;margin-top:6px}
.tl:before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--col)}
.ti{display:flex;gap:12px;padding:7px 0;position:relative}
.ti .dot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--pet);color:var(--neon);display:grid;place-items:center;z-index:1}
.ti .dot svg{width:14px;height:14px}
.ti.ne .dot{background:var(--warn-bg);color:var(--warn)}
.ti.fut .dot{background:var(--neon);color:var(--pet)}
.ti.nt .dot{background:var(--col);color:var(--mu)}
.ti b{font-size:.84rem}.ti span{font-size:.74rem;color:var(--mu);margin-left:6px}
.ti p{margin:2px 0 0;font-size:.82rem;color:var(--tx);white-space:pre-wrap;overflow-wrap:anywhere}
.ti .x{margin-left:auto;align-self:flex-start}
.af{display:grid;grid-template-columns:1fr 150px 124px;gap:8px}
.af textarea{grid-column:1/-1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.82rem}
.kv dt{color:var(--mu);font-weight:600}.kv dd{margin:0;font-weight:700}
details.lg summary{cursor:pointer;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);font-weight:800}
details.lg ul{margin:8px 0 0;padding-left:18px;font-size:.78rem;color:var(--mu)}
details.lg li{margin:3px 0}

/* Eingang, Struktur */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lc{display:flex;flex-direction:column;gap:10px}
.lc .hd{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.lc .hd b{font-size:1rem}
.lc .asg{display:flex;gap:8px}
.lc .asg select{flex:1}
.tree ul{list-style:none;margin:0;padding-left:22px;border-left:2px solid var(--col)}
.tree>ul{padding-left:0;border:0}
.tree li{margin:8px 0}
.tree .nd{display:inline-flex;gap:8px;align-items:center;background:var(--bg);border-radius:10px;padding:6px 10px;font-weight:700;font-size:.84rem}
.tree .nd small{color:var(--mu);font-weight:600}
.cols2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px}
.rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rates table td{padding:6px 8px}

.sh{border:0;background:none;padding:0;font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;font-weight:800;cursor:pointer;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.sh span{font-size:.55rem;opacity:.35;letter-spacing:-1px}.sh:hover{color:var(--tx)}.sh.on{color:var(--tx)}.sh.on span{opacity:1;color:var(--pet)}
th.r .sh{flex-direction:row}
.fpanel{margin-bottom:14px;padding:14px 16px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
td.late{color:var(--bad);font-weight:700}
@media (max-width:1100px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}
.teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:4px}
.team{border:1px solid var(--bd);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.tmh{display:flex;gap:10px;align-items:center}.tmh b{font-size:.95rem}
.tg>span{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin-bottom:5px}
.tg>div{display:flex;flex-wrap:wrap;gap:6px}
.ovl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%}
table.strt td{vertical-align:middle}table.strt select{min-width:130px}
th.imc,td.imc{background:#f6f9fa}
.rin{width:84px;text-align:right;padding:7px 8px;font-variant-numeric:tabular-nums}
table.rt td{padding:7px 6px;font-size:.8rem}table.rt th{padding:6px}
.card h2 .lnk.ex{margin-left:auto}
.srcf{display:flex;gap:6px;flex-wrap:wrap}
.sf{border:0;font:inherit;font-size:.74rem;font-weight:800;padding:6px 11px;border-radius:7px;cursor:pointer;opacity:.38;transition:opacity .15s}
.sf.on{opacity:1}.sf:hover{opacity:.8}.sf.on:hover{opacity:1}
.sf.lead{background:var(--neon);color:var(--pet)}.sf.eigen{background:var(--card);color:var(--pet);box-shadow:inset 0 0 0 1.5px var(--pet)}.sf.elead{background:var(--neon-soft);color:var(--pet);box-shadow:inset 0 0 0 1.5px #00c957}
.agef{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--mu)}
.agef input{width:58px;padding:7px 8px}.agef select{width:auto;padding:7px 8px}
.col.coll{flex:0 0 46px;padding:0}
.colt{border:0;background:none;cursor:pointer;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;color:var(--tx);font-weight:800;border-radius:14px}
.colt:hover{background:#d3dfe3}
.colt .vt{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.chev,.colx{font-size:1.1rem;line-height:1;font-weight:800}
.vlh{display:inline-flex;align-items:center;gap:6px}
.colx{border:0;background:var(--card);color:var(--tx);width:22px;height:22px;border-radius:6px;cursor:pointer;display:inline-grid;place-items:center;padding:0}
.colx:hover{background:var(--neon)}
.netimes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:.74rem;font-weight:700;color:var(--mu)}
.lrg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lr{display:flex;gap:8px;align-items:flex-start;background:var(--card);border:1px solid var(--bd);border-radius:9px;padding:7px 9px;font-size:.8rem;font-weight:600;cursor:pointer}
.lr:has(input:checked){border-color:var(--pet);box-shadow:inset 0 0 0 1px var(--pet)}
.lr input{accent-color:var(--pet);margin-top:2px}
.lcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:10px}
.sub-l{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin-bottom:6px}
.lb{display:grid;grid-template-columns:minmax(0,1fr) 80px 22px;gap:8px;align-items:center;font-size:.8rem;padding:4px 0}
.lb span{overflow-wrap:anywhere}.lb i{display:block;height:8px;border-radius:4px;background:var(--bad);opacity:.75}.lb b{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:820px){.lrg,.lcols{grid-template-columns:1fr}}
.av.lg{width:46px;height:46px;font-size:.95rem}.av.xl{width:84px;height:84px;font-size:1.6rem}
.av.img{background:var(--col);padding:0;overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;display:block}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pc{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--bd);background:var(--card);border-radius:14px;padding:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pc:hover{border-color:#aebfc5;box-shadow:0 6px 18px rgba(4,32,44,.08)}
.pci{min-width:0;display:flex;flex-direction:column;gap:2px}.pci b{font-size:.95rem}
.pcs{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.pc.add{border-style:dashed;background:none}.pc.add .plus{width:46px;height:46px;border-radius:50%;background:var(--neon);color:var(--pet);display:grid;place-items:center;font-size:1.5rem;font-weight:800;flex:none}
.uph{display:flex;gap:14px;align-items:center}.ufl{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ufl .in{font-weight:800;font-size:1.05rem}
.rgrp{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.mailp{margin-top:10px;border:1px dashed var(--bd);border-radius:12px;padding:12px 14px;font-size:.82rem}
.mailp p{margin:6px 0}.mh2{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--mu)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.dfil{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:12px 16px}
.fgrp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flab{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--mu)}
.krow2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:12px;align-items:stretch}
.kpi1{background:var(--card);border:1px solid var(--bd);border-left:5px solid var(--pet);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi1>span{font-size:.68rem;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.06em}
.kpi1>b{font-size:2rem;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.kpi1>small{color:var(--mu);font-size:.78rem;font-weight:600}
.wls{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--bd)}
.wl{display:grid;grid-template-columns:1fr auto 64px;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid #edf1f3;font-size:.82rem}
.wl b{font-variant-numeric:tabular-nums}.wl small{color:var(--mu);text-align:right}
.qcard{padding:14px 16px}.qcard h2{margin-bottom:6px}
table.qt td{padding:8px 6px}table.qt th{padding:8px 6px}table.qt tr.tot td{font-weight:800;border-top:2px solid var(--bd);border-bottom:0}
.qc{display:inline-flex;gap:8px;align-items:center;justify-content:flex-end}
.qb{display:inline-block;width:46px;height:8px;border-radius:4px;background:var(--col);overflow:hidden}.qb i{display:block;height:100%;background:var(--neon)}
@media (max-width:1100px){.krow2{grid-template-columns:1fr}}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:stretch}
.wrow>.card{min-width:0}
.calcrow{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.wrow,.calcrow{grid-template-columns:1fr}}
tr.oh{cursor:pointer}tr.oh:hover td{background:#f6f9fa}
.tg2{display:inline-block;width:16px;color:var(--mu);font-size:.8rem}
tr.osub td{font-size:.8rem;padding:6px 10px;border-bottom:1px dashed #e6ecee;background:#fbfcfd}
tr.osub td:first-child{padding-left:44px}
.tmark{display:inline-block;font-size:.64rem;font-weight:800;background:var(--warn-bg);color:var(--warn);border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.col.fz{background:#e4e9f0;flex-basis:260px}.col.fz.coll{flex:0 0 46px}
.col.fz .colt:hover{background:#d4dce6}
.tile.frz{background:#f5f7fa;opacity:.85}.tile.frz:hover{opacity:1}
.chip.frz{background:#dde5f0;color:#2b4a6b}
.banner.frz{background:#e8eef6;color:#2b4a6b}
.ctrow{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.ctrow .in{padding:7px 10px;font-size:.85rem}
.info{margin-top:12px;border:1px solid var(--bd);border-radius:12px;padding:10px 12px;background:#fbfcfd}
.ih{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ih span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mu);font-weight:800}
.ibtn{border:0;background:none;cursor:pointer;color:var(--mu);width:28px;height:28px;border-radius:7px;display:grid;place-items:center}
.ibtn:hover{background:var(--col);color:var(--tx)}.ibtn svg{width:16px;height:16px}
.itext{white-space:pre-wrap;font-size:.86rem;line-height:1.55;overflow-wrap:anywhere}
.info .acts{margin-top:8px}
.lct{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:600}
.lct span{display:inline-flex;gap:6px;align-items:center}.lct svg{width:14px;height:14px;color:var(--mu)}
.lc .itext{background:var(--bg);border-radius:10px;padding:8px 10px;font-size:.82rem}
@media (max-width:820px){.ctrow{grid-template-columns:1fr}}
.krel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.krel>div{background:var(--bg);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.krel span{display:flex;gap:5px;align-items:center;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.krel svg{width:13px;height:13px}.krel b{font-size:.9rem;font-variant-numeric:tabular-nums}.krel small{font-size:.74rem;color:var(--mu)}
.banner.nebn{background:var(--warn-bg);color:var(--warn);margin-top:8px;font-weight:600}.banner.nebn svg{width:16px;height:16px;flex:none}
@media (max-width:820px){.krel{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--pet);color:#fff;font-weight:700;padding:11px 20px;border-radius:12px;z-index:60;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--neon)}

@media (max-width:1100px){.dgrid{grid-template-columns:1fr}.side{position:static}.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.cols2{grid-template-columns:1fr}}
@media (max-width:820px){
 .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .nav{order:2;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));gap:2px;overflow-x:auto}
 .logo,.nsep,.ngrp,.nfoot{display:none}
 .ni{flex-direction:column;gap:3px;font-size:.62rem;padding:7px 8px;min-width:64px;align-items:center;text-align:center}
 .ni.on:before{display:none}
 .ni .bd{position:absolute;top:2px;right:8px;margin:0}
 .top{padding:12px 16px}
 .view{padding:16px 16px 30px}
 .col{flex-basis:82vw}.col.vl{flex-basis:82vw}
 .fg,.ff,.rates{grid-template-columns:1fr}
 .kpi b{font-size:1.15rem}
 .nmrow{grid-template-columns:1fr}
 .af{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Echtbetrieb: Anmeldung, Konto, Ladezustand ---------- */
[hidden]{display:none!important}
.me{border:0;color:#fff;cursor:pointer;width:100%;text-align:left;font:inherit}
.me:hover{background:rgba(255,255,255,.1)}
.av.img{overflow:hidden;background:var(--pet)}.av.img img{width:100%;height:100%;object-fit:cover;display:block}
.accb{display:none;border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.btn svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
body.busy{cursor:progress}
body.busy .drawer .btn,body.busy .view .btn{pointer-events:none;opacity:.7}
.auth{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:var(--pet)}
.authc{width:min(400px,100%);background:var(--card);border-radius:18px;padding:30px 26px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.authc .logo{color:var(--pet);padding:0 0 22px}
.authc .logo small{color:var(--mu2)}
.authc h1{font-size:1.2rem;margin:0 0 6px;letter-spacing:-.2px}
.authc p{margin:0 0 16px;color:var(--mu)}
.authc form{display:flex;flex-direction:column;gap:12px}
.authc .btn{width:100%;justify-content:center;padding:12px 16px}
.authc .lnk{align-self:flex-start}
.lmsg{min-height:1.2em;color:var(--bad);font-weight:600;font-size:.86rem}
.lmsg.ok{color:#0a7a3d}
.authf{margin-top:18px;font-size:.74rem;color:var(--mu2)}
@media (max-width:820px){.accb{display:inline-flex}}
@media (max-width:820px){.col.coll,.col.vl.coll,.col.fz.coll{flex:0 0 46px}}
.av.s{font-size:.55rem;letter-spacing:-.3px}