/* ==========================================================================
   XPOTENTIAL COCKPIT – Aussehen
   Farben ändern: nur im Block :root
   ========================================================================== */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2")}

:root{
  --void:#0A0A0A; --panel:#111311; --panel2:#171A17; --panel3:#1D211D; --line:#242822;
  --mint:#3DDBA8; --mint-dim:#1F6B54; --mint-bg:rgba(61,219,168,.08);
  --text:#ECEFEA; --soft:#B4BAB2; --muted:#868C84;
  --amber:#F2C14E; --amber-bg:rgba(242,193,78,.08); --rust:#E0704F; --rust-bg:rgba(224,112,79,.08);
  --blue:#6FA8FF; --violet:#B98CFF;
  --r:10px; --side:232px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--void);color:var(--text);font:15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.brand,.big{font-family:Montserrat,system-ui,sans-serif;letter-spacing:-.02em}
::selection{background:var(--mint);color:var(--void)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---------- Rahmen ---------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;padding:22px 14px}
.brand{font-weight:800;font-size:18px;letter-spacing:.04em;padding:4px 10px 2px}
.brand b{color:var(--mint)}
.brand-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 10px 22px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:none;
  border-radius:8px;cursor:pointer;color:var(--soft);font-weight:500;text-align:left}
.nav button:hover{background:var(--panel2);color:var(--text)}
.nav button.on{background:var(--mint-bg);color:var(--mint)}
.nav svg{width:18px;height:18px;flex:0 0 auto}
.nav .badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--amber);color:var(--void);border-radius:20px;padding:1px 7px}
.side-foot{margin-top:auto;padding:10px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.side-foot a{text-decoration:none}
.side-foot a:hover{color:var(--mint)}
.dotline{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--mint);box-shadow:0 0 0 3px var(--mint-bg)}

.main{padding:28px clamp(16px,3vw,40px) 80px;max-width:1320px;width:100%}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);font-weight:600}
.top h1{font-size:clamp(26px,3.2vw,36px);font-weight:800;margin-top:6px;line-height:1.1}
.top-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Bausteine ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;padding:9px 14px;cursor:pointer;
  background:var(--mint);color:var(--void);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn.small{padding:6px 10px;font-size:13px}
.btn.danger{background:transparent;color:var(--rust);border:1px solid #4a2a20}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{border:1px solid var(--line);background:var(--panel2);border-radius:7px;width:30px;height:30px;
  display:inline-grid;place-items:center;cursor:pointer;color:var(--soft)}
.icon-btn:hover{border-color:var(--mint);color:var(--mint)}
.icon-btn svg{width:15px;height:15px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h2{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px}
.card h2 .count{font-family:Inter;font-size:12px;font-weight:600;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:20px;padding:1px 8px}
.card .hint{font-size:13px;color:var(--muted);margin-top:4px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.empty{font-size:14px;color:var(--muted);padding:18px 0 6px;text-align:center}
.empty b{color:var(--soft);font-weight:500}

.grid{display:grid;gap:16px}
.g-kpi{grid-template-columns:repeat(4,1fr)}
.g-main{grid-template-columns:1.35fr 1fr;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---------- Kennzahlen ---------- */
.kpi{display:flex;align-items:center;gap:16px}
.kpi .ring{--p:0;width:64px;height:64px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--mint) calc(var(--p)*1%),var(--panel3) 0)}
.kpi .ring::before{content:"";width:50px;height:50px;border-radius:50%;background:var(--panel);grid-area:1/1}
.kpi .ring span{grid-area:1/1;font-family:Montserrat;font-weight:800;font-size:15px;z-index:1}
.kpi .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.kpi .big{font-size:28px;font-weight:800;line-height:1.1;margin-top:2px}
.kpi .big small{font-size:14px;color:var(--muted);font-weight:600}
.kpi .sub{font-size:12px;color:var(--muted)}
.kpi.warn .big{color:var(--amber)}

/* ---------- Lead-Zeilen ---------- */
.list{display:flex;flex-direction:column;gap:10px}
.row{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:12px 14px}
.row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row .who{font-weight:600}
.row .meta{font-size:12px;color:var(--muted)}
.row .acts{margin-left:auto;display:flex;gap:6px;align-items:center}
.row .msg{margin-top:10px;font-size:13px;color:var(--soft);background:var(--void);border:1px solid var(--line);
  border-radius:6px;padding:10px 12px;white-space:pre-wrap}
.row.alert{border-color:#5C4A1E;background:var(--amber-bg)}
.row.hot{border-color:var(--mint-dim);background:var(--mint-bg)}
.tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:2px 7px;border-radius:4px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.inbox{color:var(--blue);border-color:#22385a}
.tag.dm{color:var(--violet);border-color:#3d2c5a}
.tag.age{color:var(--amber);border-color:#5C4A1E}

/* ---------- Pipeline ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:300px}
.col-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.col-head .n{margin-left:auto;font-size:12px;color:var(--muted)}
.col-head i{width:8px;height:8px;border-radius:50%}
.col-body{padding:10px;display:flex;flex-direction:column;gap:8px}
.lead{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:11px 12px;cursor:pointer;transition:border-color .15s}
.lead:hover{border-color:var(--mint-dim)}
.lead .who{font-weight:600;font-size:14px}
.lead .meta{font-size:12px;color:var(--muted);margin-top:2px}
.lead .foot{display:flex;align-items:center;gap:6px;margin-top:10px}
.lead .foot .move{margin-left:auto;display:flex;gap:4px}
.lost{margin-top:14px}
.lost summary{cursor:pointer;color:var(--muted);font-size:13px}

/* ---------- Formulare / Fenster ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
input,select,textarea{background:var(--void);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--mint)}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:none;z-index:50}
.overlay.on{display:block}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(520px,100%);background:var(--panel);border-left:1px solid var(--line);
  z-index:51;transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.drawer-head h3{font-size:18px}
.drawer-head .icon-btn{margin-left:auto}
.drawer-body{padding:20px 22px;overflow-y:auto;flex:1}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
.statusbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.statusbar button{border:1px solid var(--line);background:var(--panel2);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--soft)}
.statusbar button.on{background:var(--mint);color:var(--void);border-color:var(--mint);font-weight:600}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;transition:.2s;
  background:var(--text);color:var(--void);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;z-index:99;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- Termine / Fristen ---------- */
.event{display:flex;gap:14px;align-items:center;border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:12px 14px}
.event .date{width:52px;text-align:center;flex:0 0 auto;border-right:1px solid var(--line);padding-right:12px}
.event .date b{display:block;font-family:Montserrat;font-size:20px;line-height:1}
.event .date span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.event .info{flex:1;min-width:0}
.event .info .t{font-weight:600}
.event .info .s{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event.today{border-color:var(--mint-dim);background:var(--mint-bg)}

.deadline{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.deadline:last-child{border-bottom:0}
.deadline .days{min-width:64px;text-align:center;font-weight:700;font-size:13px;border-radius:6px;padding:4px 6px;
  background:var(--panel2);border:1px solid var(--line)}
.deadline .days.soon{color:var(--amber);border-color:#5C4A1E;background:var(--amber-bg)}
.deadline .days.urgent{color:var(--rust);border-color:#4a2a20;background:var(--rust-bg)}
.deadline .t{font-weight:500}
.deadline .s{font-size:12px;color:var(--muted)}
.deadline.done .t{text-decoration:line-through;color:var(--muted)}
.deadline input[type=checkbox]{width:18px;height:18px;accent-color:var(--mint);flex:0 0 auto}

/* ---------- Zahlen ---------- */
.funnel{display:flex;flex-direction:column;gap:10px}
.fbar{display:grid;grid-template-columns:120px 1fr 48px;align-items:center;gap:12px;font-size:14px}
.fbar .track{height:26px;background:var(--panel2);border-radius:6px;overflow:hidden}
.fbar .fill{height:100%;background:linear-gradient(90deg,var(--mint-dim),var(--mint));border-radius:6px;min-width:2px}
.fbar b{text-align:right;font-family:Montserrat}
.weeks{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:end;height:200px;margin-top:10px}
.wk{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.wk .bars{display:flex;gap:4px;align-items:flex-end;height:160px}
.wk .bars i{width:14px;border-radius:3px 3px 0 0;min-height:2px}
.wk span{font-size:11px;color:var(--muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* ---------- Ich ---------- */
.scale{display:flex;gap:6px}
.scale button{flex:1;border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:10px 0;cursor:pointer;font-weight:700;font-family:Montserrat}
.scale button.on{background:var(--mint);color:var(--void);border-color:var(--mint)}
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.toggle .sw{width:44px;height:26px;border-radius:20px;background:var(--panel3);border:1px solid var(--line);position:relative;transition:.15s}
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.15s}
.toggle.on .sw{background:var(--mint-bg);border-color:var(--mint)}
.toggle.on .sw::after{left:21px;background:var(--mint)}
.range-row{display:flex;align-items:center;gap:14px}
.range-row input{padding:0;accent-color:var(--mint)}
.range-row b{font-family:Montserrat;font-size:20px;min-width:56px;text-align:right}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:6px}
.heat div{aspect-ratio:1;border-radius:6px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--muted)}
.heat .l1{background:rgba(61,219,168,.15);border-color:var(--mint-dim);color:var(--soft)}
.heat .l2{background:rgba(61,219,168,.35);border-color:var(--mint-dim);color:var(--text)}
.heat .l3{background:var(--mint);border-color:var(--mint);color:var(--void);font-weight:700}
.heat .today{outline:2px solid var(--text);outline-offset:1px}
.streak{display:flex;gap:24px;flex-wrap:wrap;margin-top:6px}
.streak div b{display:block;font-family:Montserrat;font-size:26px}
.streak div span{font-size:12px;color:var(--muted)}
.focus-done{display:flex;gap:10px;align-items:center;margin-top:8px}

/* ---------- Mobil ---------- */
.mobilebar{display:none}
@media (max-width:1100px){
  .g-kpi{grid-template-columns:repeat(2,1fr)}
  .g-main{grid-template-columns:1fr}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:18px 16px 96px}
  .mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);
    z-index:40;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mobilebar button{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;padding:6px;cursor:pointer;position:relative}
  .mobilebar button.on{color:var(--mint)}
  .mobilebar svg{width:20px;height:20px}
  .mobilebar .badge{position:absolute;top:2px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
  .g-kpi{gap:10px}
  .kpi{gap:10px}.kpi .ring{width:52px;height:52px}.kpi .ring::before{width:40px;height:40px}.kpi .big{font-size:22px}
  .card{padding:16px}
  .form .two{grid-template-columns:1fr}
  .fbar{grid-template-columns:96px 1fr 36px}
  .row .acts{margin-left:0;width:100%}
}

/* ---------- Korrekturen: nichts darf über den Rand laufen ---------- */
.main{min-width:0}
.grid>*,.stack>*{min-width:0}
.board{max-width:100%}
.row-top .meta{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .kpi{flex-direction:column;align-items:flex-start;gap:8px}
  .kpi .lbl{font-size:10px;letter-spacing:.1em}
  .kpi .sub{font-size:11px}
  .card-head{flex-wrap:wrap}
  .board{grid-template-columns:repeat(5,78vw);scroll-snap-type:x mandatory}
  .col{scroll-snap-align:start}
}
.weeks{gap:6px}
.wk{min-width:0}
.wk .bars{width:100%;justify-content:center;gap:3px}
.wk .bars i{flex:1;max-width:12px;width:auto}

/* ---------- Chat-Verlauf im Cockpit ---------- */
.bubble-c{max-width:88%;padding:10px 13px;border-radius:12px;font-size:14px;white-space:pre-wrap}
.bubble-c.me{align-self:flex-end;background:var(--mint);color:var(--void);font-weight:500;border-bottom-right-radius:4px}
.bubble-c.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px}
@media (max-width:760px){.mobilebar button{font-size:9px;padding:6px 2px}}