[hidden]{display:none!important}

/* Layout: Kommandozentrale – schmale Navigationsleiste, Lagebild oben, darunter drei Arbeitsflächen (Posteingang | Unterhaltung | Bestellung). Bewusst nur dunkel. */
:root{
  color-scheme:dark;
  --void:#05070f;            /* Grund */
  --deck:#0b1020;            /* Flächen */
  --glass:rgba(22,30,58,.55);/* transparente Panels */
  --line:rgba(120,150,255,.14);
  --ink:#e8ecff;             /* Text */
  --ink-2:#9aa4c7;           /* Sekundärtext */
  --ink-3:#5f6a90;
  --cyan:#35e6ff;            /* Hauptakzent */
  --violet:#9a6bff;
  --volt:#3b7bff;            /* Electric Blue */
  --gold:#c88d4e;            /* Markenfarbe aus dem Logo */
  --ok:#3ee59a; --warn:#ffb547; --crit:#ff5577;
  --f-display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
   radial-gradient(900px 500px at 12% -10%,rgba(59,123,255,.22),transparent 60%),
   radial-gradient(800px 600px at 100% 0%,rgba(154,107,255,.18),transparent 60%),
   radial-gradient(700px 500px at 60% 120%,rgba(53,230,255,.10),transparent 60%),
   linear-gradient(rgba(120,150,255,.035) 1px,transparent 1px) 0 0/100% 32px,
   linear-gradient(90deg,rgba(120,150,255,.035) 1px,transparent 1px) 0 0/32px 100%;}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.app{position:relative;z-index:1;display:grid;grid-template-columns:76px 1fr;height:100%}

/* Navigation */
.rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:18px;border-right:1px solid var(--line);background:rgba(5,7,15,.6);backdrop-filter:blur(14px)}
.logo{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 1px rgba(200,141,78,.6),0 0 24px rgba(200,141,78,.35);margin-bottom:14px}
.nav{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;border:1px solid transparent;background:none;color:var(--ink-3);cursor:pointer;position:relative;transition:.2s}
.nav svg{width:22px;height:22px}
.nav:hover{color:var(--ink);background:var(--glass)}
.nav.on{color:var(--cyan);border-color:rgba(53,230,255,.35);background:rgba(53,230,255,.08);box-shadow:0 0 18px rgba(53,230,255,.25)}
.nav .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--crit);box-shadow:0 0 8px var(--crit)}
.rail .spacer{flex:1}

.main{display:flex;flex-direction:column;min-width:0;height:100%;padding:18px 22px;gap:16px;overflow:hidden}
header.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand h1{margin:0;font:700 22px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.brand h1 b{color:var(--gold);font-weight:700}
.brand small{display:block;margin-top:4px;color:var(--ink-3);font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.search{flex:1;min-width:200px;max-width:520px;margin-left:auto;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0}
.search kbd{font:500 11px var(--f-mono);color:var(--ink-3);border:1px solid var(--line);padding:2px 6px;border-radius:6px}
.demo-flag{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(255,181,71,.4);background:rgba(255,181,71,.08);padding:6px 10px;border-radius:8px}

/* Lagebild */
.overview{display:grid;grid-template-columns:1.1fr 1.4fr 1.5fr;gap:14px;align-items:start}
.panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(16px);position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 35%)}
.eyebrow{font:600 11px var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.ov{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bignums{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.big{font:700 54px/1 var(--f-display);background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(53,230,255,.25);font-variant-numeric:tabular-nums}
.sub{display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.sub b{font:600 15px var(--f-display);font-variant-numeric:tabular-nums}
.sub .c{color:var(--crit)} .sub .w{color:var(--warn)}
.cats{display:grid;gap:8px}
.cat{display:grid;grid-template-columns:150px 1fr 26px;gap:10px;align-items:center;font-size:13px;cursor:pointer;background:none;border:0;padding:2px 0;text-align:left;color:var(--ink-2)}
.cat:hover,.cat.on{color:var(--ink)}
.cat .bar{height:8px;border-radius:6px;background:rgba(120,150,255,.1);overflow:hidden}
.cat .bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--volt),var(--cyan));box-shadow:0 0 12px rgba(53,230,255,.5);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.cat.on .bar span{background:linear-gradient(90deg,var(--violet),var(--cyan))}
.cat em{font:500 12px var(--f-mono);font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.markets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mkt{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(5,7,15,.35);display:grid;gap:6px}
.mkt .n{display:flex;align-items:center;justify-content:space-between;font:600 14px var(--f-display);letter-spacing:.04em}
.led{width:9px;height:9px;border-radius:50%}
.led.ok{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.led.warn{background:var(--warn);box-shadow:0 0 10px var(--warn);animation:pulse 1.6s infinite}
.led.off{background:var(--ink-3)}
.mkt small{font:400 11.5px var(--f-mono);color:var(--ink-2)}
@keyframes pulse{50%{opacity:.35}}

/* Arbeitsbereich */
.work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(280px,340px);gap:14px}
.col{display:flex;flex-direction:column;min-height:0;min-width:0}
.colhead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.colhead .eyebrow{margin-right:auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:500 12px var(--f-body);padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(5,7,15,.3);color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink);border-color:rgba(53,230,255,.35)}
.chip.on{color:var(--void);background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px rgba(53,230,255,.45)}
.scroll{overflow:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(120,150,255,.25) transparent}

.thread{display:grid;grid-template-columns:4px 1fr;gap:12px;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;transition:background .15s}
.thread:hover{background:rgba(59,123,255,.07)}
.thread.on{background:linear-gradient(90deg,rgba(53,230,255,.12),rgba(154,107,255,.05) 70%,transparent)}
.thread .stripe{border-radius:0 4px 4px 0}
.thread.on .stripe{box-shadow:0 0 14px currentColor}
.t-top{display:flex;align-items:center;gap:8px;min-width:0}
.t-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-time{margin-left:auto;font:400 12px var(--f-mono);color:var(--ink-3);white-space:nowrap}
.t-sub{color:var(--ink-2);font-size:13.5px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.plat{font:700 10px var(--f-display);letter-spacing:.08em;padding:2px 6px;border-radius:5px;background:rgba(59,123,255,.18);color:#9fc0ff;border:1px solid rgba(59,123,255,.35)}
.tag{font:500 11px var(--f-body);padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.st{font:600 11px var(--f-body);padding:2px 8px;border-radius:999px}
.st.neu{background:rgba(255,85,119,.14);color:#ff8aa3;border:1px solid rgba(255,85,119,.35)}
.st.entwurf{background:rgba(154,107,255,.16);color:#c3a8ff;border:1px solid rgba(154,107,255,.4)}
.st.wartet{background:rgba(255,181,71,.12);color:var(--warn);border:1px solid rgba(255,181,71,.35)}
.st.done{background:rgba(62,229,154,.1);color:var(--ok);border:1px solid rgba(62,229,154,.3)}
.unread{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:none}

/* Unterhaltung */
.conv-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 15px var(--f-display);background:linear-gradient(135deg,var(--volt),var(--violet));box-shadow:0 0 18px rgba(154,107,255,.35);flex:none}
.conv-head h2{margin:0;font:600 18px/1.2 var(--f-display);letter-spacing:.02em}
.conv-head p{margin:2px 0 0;color:var(--ink-2);font-size:13px}
.conv-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
select.sel{background:rgba(5,7,15,.5);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}
.msgs{padding:18px;display:flex;flex-direction:column;gap:14px}
.day{align-self:center;font:500 11px var(--f-mono);color:var(--ink-3);letter-spacing:.1em}
.bubble{max-width:min(78%,620px);padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;position:relative;white-space:pre-wrap}
.bubble.in{align-self:flex-start;background:rgba(22,30,58,.85);border:1px solid var(--line);border-top-left-radius:4px}
.bubble.out{align-self:flex-end;background:linear-gradient(135deg,rgba(59,123,255,.32),rgba(154,107,255,.28));border:1px solid rgba(154,107,255,.4);border-top-right-radius:4px}
.bubble .who{display:block;font:500 11px var(--f-mono);color:var(--ink-3);margin-bottom:4px;white-space:normal}
.bubble.out .who{color:#c9d6ff}

.compose{border-top:1px solid var(--line);padding:14px 18px;display:grid;gap:10px;background:rgba(5,7,15,.35)}
.compose-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai{font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--violet);display:flex;align-items:center;gap:6px}
.ai svg{width:16px;height:16px}
.needs{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.need{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid rgba(62,229,154,.35);color:var(--ok);background:rgba(62,229,154,.07)}
.need.miss{border-color:rgba(255,181,71,.45);color:var(--warn);background:rgba(255,181,71,.07)}
textarea#draft{width:100%;min-height:130px;resize:vertical;border-radius:12px;border:1px solid rgba(154,107,255,.35);background:rgba(5,7,15,.55);padding:12px 14px;line-height:1.55;font-size:14.5px;outline:0;transition:.2s}
textarea#draft:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,230,255,.15),0 0 24px rgba(53,230,255,.15)}
.hint{font-size:12.5px;color:var(--ink-2)}
.hint b{color:var(--warn);font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(22,30,58,.7);cursor:pointer;font-weight:500;font-size:14px;transition:.15s}
.btn:hover{border-color:rgba(53,230,255,.4);box-shadow:0 0 16px rgba(53,230,255,.15)}
.btn.primary{border:0;color:#04121a;font-weight:600;background:linear-gradient(90deg,var(--cyan),#7aa8ff);box-shadow:0 0 22px rgba(53,230,255,.35)}
.btn.primary:hover{box-shadow:0 0 32px rgba(53,230,255,.55);transform:translateY(-1px)}
.btn.danger{border-color:rgba(255,85,119,.4);color:#ff9bb0}
.btn svg{width:16px;height:16px}
.actions .spacer{flex:1}
.confirm{border:1px solid rgba(255,181,71,.5);background:rgba(255,181,71,.06);border-radius:12px;padding:12px 14px;display:grid;gap:10px}
.confirm p{margin:0;font-size:13.5px}
.confirm blockquote{margin:0;padding:10px 12px;border-left:3px solid var(--warn);background:rgba(5,7,15,.5);border-radius:0 8px 8px 0;white-space:pre-wrap;font-size:13.5px;max-height:160px;overflow:auto}

/* Bestellung */
.side{padding:16px;display:grid;gap:16px;align-content:start}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.mono{font-family:var(--f-mono);font-size:13px}
.match{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:13px}
.match.ok{background:rgba(62,229,154,.07);border:1px solid rgba(62,229,154,.3);color:#b6f5d8}
.match.warn{background:rgba(255,181,71,.07);border:1px solid rgba(255,181,71,.4);color:#ffd9a0}
.match.err{background:rgba(255,85,119,.07);border:1px solid rgba(255,85,119,.4);color:#ffb3c3}
.match svg{width:16px;height:16px;flex:none;margin-top:2px}
.items{display:grid;gap:8px}
.item{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:10px;background:rgba(5,7,15,.35);border:1px solid var(--line)}
.thumb{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,rgba(59,123,255,.35),rgba(154,107,255,.25));display:grid;place-items:center;color:#cfe0ff}
.thumb svg{width:20px;height:20px}
.item b{display:block;font-weight:500;font-size:13.5px;line-height:1.3}
.item small{color:var(--ink-3);font:400 11.5px var(--f-mono)}
.qty{font:700 16px var(--f-display);color:var(--cyan);font-variant-numeric:tabular-nums}
.track{display:grid;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(53,230,255,.25);background:linear-gradient(180deg,rgba(53,230,255,.06),transparent)}
.track a{color:var(--cyan);text-decoration:none;font-family:var(--f-mono);font-size:13px;display:inline-flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.track a:hover{text-shadow:0 0 10px var(--cyan)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.steps span{height:4px;border-radius:4px;background:rgba(120,150,255,.15)}
.steps span.on{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.steps-l{display:grid;grid-template-columns:repeat(4,1fr);font-size:10.5px;color:var(--ink-3);gap:4px}
.missing{color:var(--warn);font-size:13px}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:12px;background:rgba(11,16,32,.95);border:1px solid rgba(53,230,255,.4);box-shadow:0 0 30px rgba(53,230,255,.25);transition:.3s;z-index:20;font-size:14px;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Mobile Tabs */
.order-toggle{display:none!important}
.mtabs{display:none}

@media (max-width:1280px){
  .work{grid-template-columns:minmax(280px,340px) minmax(0,1fr)}
  .work .order{display:none}
  .work.show-order .order{display:flex;position:fixed;right:16px;top:16px;bottom:16px;width:min(360px,calc(100% - 32px));z-index:15;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .order-toggle{display:inline-flex!important}
}
@media (max-width:1050px){ .overview{grid-template-columns:1fr 1fr} .overview .ov-mkt{grid-column:1/-1} }
@media (max-width:820px){
  html,body{height:auto}
  .app{grid-template-columns:1fr;height:auto}
  .rail{flex-direction:row;justify-content:space-between;padding:10px 16px;position:sticky;top:env(safe-area-inset-top,0px);z-index:10;border-right:0;border-bottom:1px solid var(--line)}
  .rail .spacer{display:none}
  .logo{margin:0;width:38px;height:38px}
  .nav{width:40px;height:40px}
  .main{padding:14px 16px;overflow:visible;height:auto}
  .overview{grid-template-columns:1fr}
  .big{font-size:44px}
  .cat{grid-template-columns:118px 1fr 22px;font-size:12.5px}
  .mtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
  .mtabs button{padding:9px;border-radius:9px;border:0;background:none;color:var(--ink-2);font:600 12px var(--f-display);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .mtabs button.on{background:rgba(53,230,255,.14);color:var(--cyan)}
  .work{display:block}
  .work .col{display:none;max-height:none}
  .work .col.mshow{display:flex}
  .work .order.mshow{display:flex;position:static;width:auto;box-shadow:none}
  .order-toggle{display:none!important}
  .scroll{overflow:visible}
  .bubble{max-width:90%}
  .search{order:3;max-width:none;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.close-order{display:none}
@media (max-width:1280px) and (min-width:821px){ .close-order{display:inline-flex} }
.boot{animation:boot .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes boot{from{transform:translateY(8px);filter:blur(4px)}to{transform:none;filter:none}}

/* ---- Ergänzungen Live-App ---- */
.view{display:none;flex:1;min-height:0;flex-direction:column;gap:16px}
.view.on{display:flex}
.page{overflow:auto;flex:1;min-height:0;display:grid;gap:16px;align-content:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}
.card{padding:18px;display:grid;gap:12px;align-content:start;min-width:0}
.card h3{margin:0;font:600 17px var(--f-display);letter-spacing:.03em}
.card p{margin:0;color:var(--ink-2);font-size:14px}
.field{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.field input,.field textarea,.field select{background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);outline:0;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,230,255,.15)}
.field textarea{min-height:90px;resize:vertical;font-family:var(--f-body);line-height:1.5}
.copy{display:flex;gap:8px;align-items:center}
.copy code{flex:1;min-width:0;overflow-wrap:anywhere;font:12.5px var(--f-mono);padding:8px 10px;border-radius:8px;background:rgba(5,7,15,.6);border:1px solid var(--line)}
.steps-list{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);font-size:14px}
.steps-list b{color:var(--ink)}
.rows{display:grid;gap:8px}
.row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:rgba(5,7,15,.35);border:1px solid var(--line);font-size:13.5px}
.row .grow{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.row small{color:var(--ink-3);font:11.5px var(--f-mono)}
.ok-t{color:var(--ok)} .err-t{color:var(--crit)} .warn-t{color:var(--warn)}
.gate{position:fixed;inset:0;display:grid;place-items:center;z-index:30;padding:16px;background:var(--void)}
.gate .panel{width:min(420px,100%);padding:28px;display:grid;gap:14px}
.gate img{width:72px;height:72px;border-radius:50%;justify-self:center;box-shadow:0 0 0 1px rgba(200,141,78,.6),0 0 30px rgba(200,141,78,.35)}
.gate h2{margin:0;text-align:center;font:700 22px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.gate .msg{min-height:20px;font-size:13px;color:var(--crit);text-align:center}
.who-pick{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.empty{padding:28px;color:var(--ink-2);display:grid;gap:8px;place-items:center;text-align:center}
.empty b{color:var(--ink);font:600 16px var(--f-display)}
.src{font:600 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;border:1px solid var(--line);color:var(--ink-2)}
.userchip{font:500 12px var(--f-mono);color:var(--ink-2);border:1px solid var(--line);padding:6px 10px;border-radius:8px;background:none;cursor:pointer}

/* ---- Rechnungen ---- */
.inv-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--glass);border:1px solid var(--line);flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:9px;border:0;background:none;color:var(--ink-2);font:600 12.5px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tab:hover{color:var(--ink)} .tab.on{background:rgba(53,230,255,.14);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(53,230,255,.3)}
.inv-flags{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.flag{font:600 11px var(--f-mono);letter-spacing:.06em;padding:6px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink-2);background:rgba(5,7,15,.4)}
.flag.warn{color:var(--warn);border-color:rgba(255,181,71,.4);background:rgba(255,181,71,.07)}
.flag.ok{color:var(--ok);border-color:rgba(62,229,154,.35);background:rgba(62,229,154,.07)}
.inv-pane{display:none;flex:1;min-height:0;flex-direction:column;gap:14px}
.inv-pane.on{display:flex}
.inv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{padding:14px 16px;display:grid;gap:4px}
.kpi small{font:600 10.5px var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.kpi b{font:700 24px var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi span{font-size:12px;color:var(--ink-3)}
.inv-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:14px}
.inv-tools{gap:10px;align-items:flex-end}
.field.inline{display:grid;gap:4px;font-size:11.5px;min-width:0}
.field.inline input{padding:7px 10px;font-size:13px;width:auto;min-width:0}
#iq{width:min(260px,60vw)}
.itable{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.itable th{position:sticky;top:0;background:rgba(11,16,32,.96);text-align:left;font:600 10.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:10px 12px;border-bottom:1px solid var(--line);z-index:1}
.itable td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.itable tr{cursor:pointer;transition:background .15s}
.itable tbody tr:hover{background:rgba(59,123,255,.07)}
.itable tr.on{background:linear-gradient(90deg,rgba(53,230,255,.12),transparent)}
.itable .r{text-align:right}
.itable .num{font-family:var(--f-mono);font-size:12.5px;color:var(--ink)}
.itable .neg{color:#ff9bb0}
.pill{font:600 11px var(--f-body);padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.pill.final{color:var(--ok);border-color:rgba(62,229,154,.35)}
.pill.entwurf{color:var(--warn);border-color:rgba(255,181,71,.4)}
.pill.test{color:#c3a8ff;border-color:rgba(154,107,255,.4)}
.pill.korrektur,.pill.storno{color:#ff9bb0;border-color:rgba(255,85,119,.4)}
#iDetail{padding:16px;gap:14px;overflow:auto}
.idet h3{margin:0;font:700 20px var(--f-display);letter-spacing:.04em}
.idet .sum{font:700 28px var(--f-display);font-variant-numeric:tabular-nums}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.note{font-size:12.5px;color:var(--ink-2)}
.setup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
@media (max-width:1100px){.inv-work{grid-template-columns:1fr}#iDetail{max-height:none}}
@media (max-width:820px){.itable th:nth-child(5),.itable td:nth-child(5),.itable th:nth-child(2),.itable td:nth-child(2){display:none}.inv-pane .scroll{overflow:auto}}
.page{grid-auto-rows:max-content}
.page > .panel{overflow:visible}
#secCard{grid-column:1/-1}
a.btn{text-decoration:none;color:inherit}
#staffCard{grid-column:1/-1}
.perm-table td,.perm-table th{text-align:center}.perm-table td:first-child,.perm-table th:first-child{text-align:left}
.perm-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--cyan);cursor:pointer}

/* ---------- Versand: Paketdienst-Farben (ausgeschriebene Namen + Farbe, nie nur Farbe) */
.car{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--f-display);letter-spacing:.06em;padding:3px 10px;border-radius:6px;white-space:nowrap}
.car.dhl{background:#FFCC00;color:#D40511}
.car.ups{background:#351C15;color:#FFB500;border:1px solid #FFB500}
.car.fedex{background:#4D148C;color:#fff;border-bottom:3px solid #FF6200}
.car.big{font-size:18px;padding:6px 16px}
.ship-alerts{display:grid;gap:8px;margin-bottom:10px}
.ship-alerts:empty{display:none}
.salert{padding:10px 14px;border-radius:10px;border:1px solid var(--line);font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.salert.crit{border-color:rgba(255,85,119,.6);background:rgba(255,85,119,.12);color:#ffd0da}
.salert.warn{border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.10);color:#ffe2b3}
.salert.ok{border-color:rgba(62,229,154,.35);background:rgba(62,229,154,.06);color:var(--ink-2)}
.salert.info{color:var(--ink-2)}
.salert b{color:inherit}
.ship-progress{padding:10px 16px}
.ship-progress .bar{height:8px;border-radius:6px;background:rgba(120,150,255,.12);overflow:hidden}
.ship-progress .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--volt),var(--cyan));transition:width .3s}
.so{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);border-left:5px solid transparent;align-items:start}
.so.dhl{border-left-color:#FFCC00}.so.ups{border-left-color:#8a5a2b}.so.fedex{border-left-color:#7d3fd1}
.so.locked{background:rgba(255,85,119,.07);border-left-color:var(--crit)}
.so .ref{font:600 14px var(--f-mono)}
.so .meta{font-size:12.5px;color:var(--ink-2)}
.so .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.so .acts .btn,.mini{padding:4px 10px;font-size:12px;border-radius:8px}
.box{margin-top:6px;padding:8px 10px;border-radius:8px;font-size:13px;display:grid;gap:4px}
.box.wish{border:1px solid rgba(255,181,71,.6);background:rgba(255,181,71,.10)}
.box.unclear,.box.lock{border:1px solid rgba(255,85,119,.65);background:rgba(255,85,119,.12)}
.box.info{border:1px solid var(--line);background:rgba(5,7,15,.35);color:var(--ink-2)}
.wsrc{font-size:12px;color:var(--ink-2)}
.wsrc q{color:var(--ink)}
.box b.t{font:700 12px var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.blk{color:#ffb3c2;font-size:12.5px}
.hint{color:var(--warn);font-size:12.5px}
.void{display:inline-block;font:800 11px var(--f-display);letter-spacing:.1em;color:#fff;background:var(--crit);padding:2px 8px;border-radius:4px}
.trk{font:12px var(--f-mono)}
.pkgtab{width:100%;border-collapse:collapse;font-size:13px}
.pkgtab td,.pkgtab th{padding:4px;text-align:left}
.pkgtab input{width:100%;background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--ink)}
dialog.nx{background:var(--deck);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:0;max-width:min(680px,94vw);width:100%}
dialog.nx::backdrop{background:rgba(0,0,0,.6)}
dialog.nx .hd{padding:14px 18px;border-bottom:1px solid var(--line);font:600 17px var(--f-display)}
dialog.nx .bd{padding:16px 18px;display:grid;gap:12px;max-height:70vh;overflow:auto}
dialog.nx .ft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.grp{border-radius:12px;border:1px solid var(--line);overflow:hidden}
.grp .gh{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap}
.grp .gb{padding:10px 14px;display:grid;gap:6px;font-size:13.5px}
.gh.dhl{background:rgba(255,204,0,.14)}.gh.ups{background:rgba(255,181,0,.08)}.gh.fedex{background:rgba(125,63,209,.18)}
.carhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:820px){.so{grid-template-columns:28px 1fr}.so > :nth-child(n+3){grid-column:2}}
#printArea{display:none}
@media print{
  body.printing > *:not(#printArea){display:none!important}
  body.printing #printArea{display:block!important;color:#000;background:#fff;font:11pt/1.35 Arial,sans-serif}
  body.printing::before{display:none}
  #printArea .pg{page-break-after:always}
  #printArea .pg:last-child{page-break-after:auto}
  #printArea h1{font-size:20pt;margin:0 0 4pt}
  #printArea .band{padding:10pt 14pt;font:bold 26pt Arial;margin-bottom:8pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printArea .band.dhl{background:#FFCC00;color:#D40511}#printArea .band.ups{background:#351C15;color:#FFB500}#printArea .band.fedex{background:#4D148C;color:#fff}
  #printArea table{width:100%;border-collapse:collapse}
  #printArea th,#printArea td{border:1px solid #888;padding:4pt 5pt;text-align:left;vertical-align:top;font-size:10pt}
  #printArea .sig{margin-top:24pt;display:flex;gap:40pt}
  #printArea .sig div{border-top:1px solid #000;padding-top:3pt;min-width:200pt}
}
/* Artikel & Preise */
#pt-setup .itable input:not([type=checkbox]),#pt-setup .itable select{background:rgba(5,7,15,.5);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;width:100%;min-width:90px}
#pt-setup .itable tr{cursor:default}

/* ---------------------------------------------------------------- E-Mails */
.mail-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(210px,250px) minmax(300px,400px) minmax(0,1fr);gap:14px}
.mail-nav .scroll{padding:8px}
.mn-act{display:grid;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.mn-act .btn{justify-content:center}
.mn-row{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:10px;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink-2);font-size:14px}
.mn-row:hover{background:rgba(59,123,255,.08);color:var(--ink)}
.mn-row.on{background:linear-gradient(90deg,rgba(53,230,255,.14),rgba(154,107,255,.05));color:var(--ink);box-shadow:inset 2px 0 0 var(--cyan)}
.mn-row .dotc{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.mn-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-row.cat{font:600 12.5px var(--f-display);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.mn-row.box{padding-left:28px;font-size:13.5px}
.mn-row.all{font:600 14px var(--f-display);letter-spacing:.04em}
.mn-row .cnt{font:600 11px var(--f-mono);padding:1px 7px;border-radius:999px;background:rgba(53,230,255,.16);color:var(--cyan)}
.mn-row .errd{color:var(--crit);font-size:12px}
.mn-foot{padding:10px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);display:grid;gap:6px}
.mail-list .colhead{gap:8px}
.mail-list .msearch{flex:1 1 100%;display:flex;align-items:center;gap:8px;background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.mail-list .msearch input{flex:1;background:none;border:0;outline:0;font-size:14px;min-width:0}
.mrow{display:grid;grid-template-columns:4px 1fr;gap:10px;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0}
.mrow:hover{background:rgba(59,123,255,.07)}
.mrow.on{background:linear-gradient(90deg,rgba(53,230,255,.12),rgba(154,107,255,.05) 70%,transparent)}
.mrow .stripe{border-radius:0 4px 4px 0;opacity:.85}
.mrow .who{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.mrow.unseen .who,.mrow.unseen .sj{font-weight:700;color:var(--ink)}
.mrow .sj{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mrow .sn{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mrow .ic{color:var(--ink-3);font-size:12px}
.mrow .fl{color:var(--warn)}
.btag{font:600 10px var(--f-display);letter-spacing:.06em;padding:1px 6px;border-radius:5px;border:1px solid currentColor;white-space:nowrap;opacity:.9}
.mail-read{min-width:0}
.mr-head{padding:16px 18px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.mr-head h2{margin:0;font:600 19px var(--f-display);letter-spacing:.01em;word-break:break-word}
.mr-meta{display:grid;gap:2px;font-size:13px;color:var(--ink-2)}
.mr-meta b{color:var(--ink);font-weight:600}
.mr-acts{display:flex;gap:6px;flex-wrap:wrap}
.mr-acts .btn{padding:6px 11px;font-size:13px}
.mr-acts select{background:rgba(22,30,58,.7);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:13px;max-width:180px}
.mr-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 18px 14px;gap:10px}
.mr-body iframe{flex:1;min-height:300px;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
.mr-text{white-space:pre-wrap;word-break:break-word;font-size:14.5px;line-height:1.6;overflow:auto;flex:1;min-height:0}
.mr-text a{color:var(--cyan)}
.mr-note{font-size:12.5px;color:var(--warn);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.atts{display:flex;gap:8px;flex-wrap:wrap}
.att{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(5,7,15,.4);font-size:13px;max-width:100%}
.att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.att small{color:var(--ink-3);font-family:var(--f-mono)}
.att button{background:none;border:0;color:var(--cyan);cursor:pointer;padding:0 2px;font-size:12.5px}
.att.danger{border-color:rgba(255,85,119,.45)}
dialog.nx.mailc{max-width:min(920px,96vw)}
.mc-grid{display:grid;grid-template-columns:90px 1fr;gap:8px 10px;align-items:center}
.mc-grid > span{font-size:13px;color:var(--ink-2)}
.mc-grid input,.mc-grid select{background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;width:100%;outline:0}
.mc-grid input:focus{border-color:var(--cyan)}
textarea.mc-text{width:100%;min-height:300px;background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:12px;font:14.5px/1.55 var(--f-body);resize:vertical;outline:0}
textarea.mc-text:focus{border-color:var(--cyan)}
.mc-drop{border:1px dashed var(--line);border-radius:10px;padding:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-3)}
.mc-drop.over{border-color:var(--cyan);background:rgba(53,230,255,.06)}
.mback{display:none}
.mail-setup .itable td{vertical-align:top}
.cat-edit{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center}
.cat-edit input[type=color]{width:40px;height:34px;padding:2px;border-radius:8px;border:1px solid var(--line);background:none}
@media (max-width:1280px){.mail-work{grid-template-columns:200px minmax(260px,340px) minmax(0,1fr)}}
@media (max-width:1050px){
  .mail-work{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:auto minmax(0,1fr)}
  .mail-nav{grid-column:1/-1}.mail-nav .scroll{display:flex;gap:6px;overflow-x:auto;padding:8px}
  .mail-nav .mn-act{display:flex;padding:8px;border-bottom:0}.mail-nav .mn-foot{display:none}.mail-nav{flex-direction:row;align-items:center}
  .mn-row,.mn-row.box,.mn-row.cat{width:auto;flex:none;padding:6px 10px;margin:0;font-size:13px}
}
@media (max-width:820px){
  .mail-work{grid-template-columns:minmax(0,1fr)}
  .mail-work .mail-read{display:none}.mail-work.reading .mail-read{display:flex}.mail-work.reading .mail-list{display:none}
  .mback{display:inline-flex}.mc-grid{grid-template-columns:1fr}
}
.mail-work > *{min-width:0}
#mailFlags{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:820px){#mailFlags{display:none}.mail-list .colhead .spacer{display:none}}
@media (max-width:1050px){.mail-nav .scroll{min-width:0;flex:1}.mail-nav .mn-act{flex:none}}
@media (max-width:820px){.mail-nav .mn-act .btn{padding:8px 10px;font-size:13px}}
@media (max-width:820px){.app{grid-template-columns:minmax(0,1fr)}.rail{overflow-x:auto;padding:8px 10px;gap:2px;scrollbar-width:none}.rail .nav{width:36px;height:36px;flex:none}.rail .logo{width:34px;height:34px;flex:none}}
.mn-row.box{padding-left:12px;font-size:14px}

/* ---- E-Mails: Feinschliff 09.10.2026 */
.mav{--c:#35e6ff;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--f-display);letter-spacing:.04em;color:var(--c);
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 10%,transparent));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--c) 18%,transparent)}
.mav.sq{width:32px;height:32px;border-radius:10px;font-size:12px}
.mav.lg{width:46px;height:46px;font-size:15px}
.mav.all{width:32px;height:32px;border-radius:10px;color:var(--cyan);background:linear-gradient(135deg,rgba(53,230,255,.22),rgba(154,107,255,.18));border:1px solid rgba(53,230,255,.35)}
.mn-row{gap:10px;padding:8px 10px;margin-bottom:2px;transition:background .15s,box-shadow .15s}
.mn-row.box{padding-left:10px}
.mn-row .nm{display:grid;line-height:1.25}
.mn-row .nm b{font-weight:600;color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis}
.mn-row .nm small{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.mn-row.on{background:linear-gradient(90deg,rgba(53,230,255,.16),rgba(154,107,255,.06));box-shadow:inset 3px 0 0 var(--cyan),0 0 22px rgba(53,230,255,.08)}
.mn-row .cnt{background:var(--cyan);color:#04121a;box-shadow:0 0 10px rgba(53,230,255,.45);min-width:22px;text-align:center}
.mn-sep{margin:14px 10px 6px;font:600 10.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mn-foot{display:flex;align-items:center;gap:8px}
.mn-foot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}
#mFolder{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:rgba(5,7,15,.5);border:1px solid var(--line)}
.seg{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:0;background:none;color:var(--ink-2);font:600 12px var(--f-body);cursor:pointer;transition:.15s}
.seg:hover{color:var(--ink)}
.seg.on{background:rgba(53,230,255,.15);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(53,230,255,.35)}
.mrow{grid-template-columns:38px 1fr;gap:12px;padding:12px 16px;transition:background .15s;position:relative}
.mrow::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:transparent}
.mrow.unseen::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.mrow.on{background:linear-gradient(90deg,rgba(53,230,255,.13),rgba(154,107,255,.06) 70%,transparent)}
.mrow.on .mav{box-shadow:0 0 18px color-mix(in srgb,var(--c) 40%,transparent)}
.mrow .t-top{gap:6px}
.mrow .unread{margin-left:4px}
.mrow .who{font-size:14px}
.mrow .sj{margin-top:1px}
.btag{color:var(--cyan);border-color:rgba(53,230,255,.4);background:rgba(53,230,255,.07);border-radius:6px;padding:2px 7px}
.mr-head{gap:12px;padding:16px 20px;background:linear-gradient(180deg,rgba(59,123,255,.06),transparent)}
.mr-head h2{font-size:21px}
.mr-from{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mr-from .mr-meta{flex:1;min-width:200px}
.mr-meta .mail-a{color:var(--ink-3)}
.mr-when{display:grid;gap:6px;justify-items:end;font:400 12px var(--f-mono);color:var(--ink-3)}
.mr-acts{align-items:center}
.mr-acts .vsep{width:1px;height:22px;background:var(--line);margin:0 4px}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:rgba(22,30,58,.7)}
.btn.flagged{color:var(--warn);border-color:rgba(255,181,71,.45)}
.mr-body{padding:14px 20px 18px}
.mr-body iframe{border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mr-text{background:rgba(5,7,15,.35);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.att{transition:.15s}.att:hover{border-color:rgba(53,230,255,.4)}
.mempty .big-ic{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;color:var(--cyan);background:linear-gradient(135deg,rgba(53,230,255,.14),rgba(154,107,255,.12));border:1px solid rgba(53,230,255,.25);box-shadow:0 0 34px rgba(53,230,255,.15);margin-bottom:6px}
@media (max-width:1050px){.mn-sep{display:none}.mn-row .nm small{display:none}}
@media (max-width:820px){.mr-when{justify-items:start}.mrow{grid-template-columns:34px 1fr}.mrow .mav{width:34px;height:34px}}
#rImgNote{color:var(--ink-3);font-size:12px}
/* Rechte-Tabelle gruppiert */
.perm-table tr.pg th{text-align:center;color:var(--cyan);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.perm-table td.gs,.perm-table thead tr:nth-child(2) th:first-child{border-left:1px solid var(--line)}
/* Nur-Ansehen */
#v-pricing.ro #prCompute,#v-pricing.ro #prNew,#v-pricing.ro #ob_add,#v-pricing.ro #prCalc,#v-pricing.ro [data-save],#v-pricing.ro [data-draft],#v-pricing.ro [data-obc],#v-pricing.ro [data-obd],#v-pricing.ro [data-res],#v-pricing.ro #prAddL,#v-pricing.ro #prEdit,#v-pricing.ro #dGen,
#v-shipping.ro #d4New,#v-shipping.ro #d4Imp,#v-shipping.ro [data-pend],#v-shipping.ro [data-go]{display:none!important}
.view.ro .inv-top::after{content:"Nur Ansicht";font:600 11px var(--f-mono);letter-spacing:.06em;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,181,71,.4);color:var(--warn);background:rgba(255,181,71,.07)}
.mr-team{flex-basis:100%;order:3;display:flex;gap:6px;flex-wrap:wrap}
.tm{font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:rgba(5,7,15,.35)}
.tm b{color:var(--ink);font-weight:600}
.tm.ok{color:var(--ok);border-color:rgba(62,229,154,.35)}
.tm.warn{color:var(--warn);border-color:rgba(255,181,71,.4);background:rgba(255,181,71,.07)}
.mrow .ic small.by{font:600 10px var(--f-mono);margin-left:2px;color:var(--ok)}
.rdel{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;color:var(--ink-3);opacity:0;transition:.15s;margin-left:2px}
.mrow:hover .rdel,.rdel:focus{opacity:1}
.rdel:hover{color:var(--crit);background:rgba(255,85,119,.12)}
.rdel.sure{opacity:1;color:#fff;background:var(--crit);box-shadow:0 0 12px rgba(255,85,119,.6)}
@media (hover:none){.rdel{opacity:.7}}
.meter{height:10px;border-radius:999px;background:rgba(5,7,15,.6);border:1px solid var(--line);overflow:hidden}
.meter span{display:block;height:100%;border-radius:inherit;box-shadow:0 0 12px rgba(53,230,255,.4)}
#mFolder .seg{padding:5px 10px}
.skr{display:grid;grid-template-columns:170px 1fr auto;gap:6px;align-items:center}
.skr select,.skr input{background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:13px;width:100%}
@media (max-width:600px){.skr{grid-template-columns:1fr auto}.skr select{grid-column:1/-1}}
.optbox{display:grid;gap:8px;padding:12px;border:1px solid rgba(53,230,255,.25);border-radius:12px;background:rgba(53,230,255,.05)}
.optbox label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.optbox input{width:auto;margin-top:3px}
.optbox span{display:grid;gap:2px;font-size:13.5px;color:var(--ink)}
.optbox small{color:var(--ink-3);font-size:12px}
.skr{grid-template-columns:240px 1fr auto}

/* ================================================================ Whiteboard + Team-Chat (12.10.2026) */
.btn.sm{padding:6px 11px;font-size:12.5px;border-radius:9px}
.btn.icon{padding:6px 8px}
.chip b{font-weight:600;opacity:.75;margin-left:2px}
.chip.warn:not(.on){color:#ffc4cf;border-color:rgba(255,85,119,.45)}
.nav .dot.count{width:auto;height:auto;min-width:17px;padding:1px 5px;top:3px;right:2px;border-radius:999px;font:700 10px/1.4 var(--f-body);color:#fff;text-align:center}
@media (max-width:820px){.rail{overflow-x:auto;gap:4px;justify-content:flex-start;scrollbar-width:none}.rail .nav,.rail .logo{flex:none}}

/* Whiteboard */
.wb-remind{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:30px}
.wb-bell{font-size:16px}
.wb-pill{font:500 12.5px var(--f-body);padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(5,7,15,.35);color:var(--ink);cursor:pointer}
.wb-pill b{font-family:var(--f-display);font-size:14px;margin-right:3px}
.wb-pill.late{border-color:rgba(255,85,119,.5);color:#ffc4cf;background:rgba(255,85,119,.1)}
.wb-pill.today{border-color:rgba(255,181,71,.5);color:#ffd9a0;background:rgba(255,181,71,.08)}
.wb-pill.me{border-color:rgba(53,230,255,.45);color:var(--cyan)}
.wb-pill.prop{border-color:rgba(154,107,255,.5);color:#cdb8ff}
.wb-quick{display:flex;align-items:center;gap:8px;padding:8px;flex-wrap:wrap;overflow:visible}
.wb-quick #wbqTitle{flex:1 1 280px;min-width:0;background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14.5px;outline:0}
.wb-quick #wbqTitle:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,230,255,.15)}
.wb-quick input[type=date]{background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color-scheme:dark}
.wb-hint{font:600 12px var(--f-mono);color:var(--cyan);min-width:0}
.view.ro .wb-quick{display:none}
.wb-list{padding:6px 10px 16px}
.wb-sec{margin-top:10px}
.wb-sec > .eyebrow{padding:8px 6px}
.wb-sec.late > .eyebrow i{background:var(--crit);box-shadow:0 0 10px var(--crit)}
.wb-sec.props > .eyebrow i{background:var(--violet);box-shadow:0 0 10px var(--violet)}
.wb-n{font-family:var(--f-mono);letter-spacing:0;color:var(--ink-3)}
.wb-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 10px;border-radius:12px;border:1px solid transparent;transition:background .15s,border-color .15s}
.wb-row:hover{background:rgba(59,123,255,.07);border-color:var(--line)}
.wb-row.late{background:linear-gradient(90deg,rgba(255,85,119,.09),transparent 60%)}
.wb-row.prio .wb-title::before{content:"❗";margin-right:4px}
.wb-row.prop{background:linear-gradient(90deg,rgba(154,107,255,.1),transparent 60%)}
.wb-row.plan{opacity:.6}
.wb-check{width:30px;height:30px;border-radius:50%;border:2px solid rgba(154,164,199,.45);background:rgba(5,7,15,.4);display:grid;place-items:center;color:transparent;cursor:pointer;transition:.15s;padding:0}
.wb-check:hover{border-color:var(--ok);color:var(--ok);box-shadow:0 0 12px rgba(62,229,154,.35)}
.wb-check.on{background:var(--ok);border-color:var(--ok);color:#03140c}
.wb-check.prop{border:1px dashed rgba(154,107,255,.6);color:#cdb8ff;cursor:default;font-size:13px}
.view.ro .wb-check:not(.prop){pointer-events:none;opacity:.5}
.wb-main{min-width:0;cursor:pointer;display:grid;gap:4px}
.wb-title{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.wb-row.done .wb-title{text-decoration:line-through;color:var(--ink-2)}
.wb-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.wb-by{color:var(--ink-3)} .wb-by b{color:var(--ink-2);font-weight:600}
.wb-notes{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-chip{font:500 11.5px var(--f-body);padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.wb-chip.today{color:#ffd9a0;border-color:rgba(255,181,71,.45)}
.wb-chip.late{color:#ffc4cf;border-color:rgba(255,85,119,.5);background:rgba(255,85,119,.1)}
.wb-chip.rec{color:#cdb8ff;border-color:rgba(154,107,255,.4)}
.wb-chip.prio{color:#ffc4cf;border-color:rgba(255,85,119,.4)}
.wb-chip.who.me{color:var(--cyan);border-color:rgba(53,230,255,.45)}
.wb-chip.run{color:var(--cyan);border-color:rgba(53,230,255,.4);background:rgba(53,230,255,.08)}
.wb-chip.done{color:var(--ok);border-color:rgba(62,229,154,.4)}
.wb-chip.open{color:var(--ink)} .wb-chip.del{text-decoration:line-through}
.wb-acts{display:flex;gap:4px;align-items:center}
.view.ro .wb-acts [data-a]:not([data-a=edit]):not([data-a=share]){display:none}
@media (hover:hover){.wb-acts .ghost{opacity:.55}.wb-row:hover .wb-acts .ghost{opacity:1}}
.wb-dlg{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;color:var(--ink);background:rgba(11,16,32,.97);overflow:auto}
.wb-dlg::backdrop{background:rgba(2,4,10,.7);backdrop-filter:blur(3px)}
.wb-form{display:grid;gap:14px;padding:18px}
.wb-fhead{display:flex;align-items:center;justify-content:space-between}
.wb-fhead h3{margin:0;font:600 18px var(--f-display)}
.wb-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.wb-quickdates{display:flex;gap:6px;flex-wrap:wrap;margin-top:-6px}
.wb-rec{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;display:grid;gap:10px;margin:0}
.wb-rec legend{font:600 11px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:0 6px}
.wb-rec select,.wb-every input,.wb-every select,.wb-form select{background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--ink)}
.wb-every{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2)}
.wb-every input{width:70px}
.wb-wd{display:flex;gap:5px;flex-wrap:wrap}
.wb-checks{display:grid;gap:8px;font-size:13.5px;color:var(--ink-2);align-self:center}
.wb-checks input{accent-color:var(--cyan);width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.field input[type=date],.field input[type=time]{color-scheme:dark}
.wb-hist{border-top:1px solid var(--line);padding-top:10px}
.wb-hist a{color:var(--cyan)}
.wb-fbtn{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wb-calwrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;flex:1;min-height:0}
.wb-cal{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.wb-calhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wb-calhead h3{margin:0 6px;font:600 18px var(--f-display);min-width:150px;text-align:center}
.wb-legend{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wb-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:-6px}
.wb-legend i.offen,.wb-ev.offen{background:rgba(53,230,255,.16);border-left-color:var(--cyan)}
.wb-legend i.laeuft,.wb-ev.laeuft{background:rgba(59,123,255,.22);border-left-color:var(--volt)}
.wb-legend i.late,.wb-ev.late{background:rgba(255,85,119,.2);border-left-color:var(--crit)}
.wb-legend i.done,.wb-ev.done{background:rgba(62,229,154,.14);border-left-color:var(--ok)}
.wb-legend i.plan,.wb-ev.plan{background:rgba(154,107,255,.12);border-left-color:rgba(154,107,255,.6)}
.wb-legend i{border:0}
.wb-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;flex:1}
.wb-wdh{font:600 11px var(--f-display);letter-spacing:.14em;color:var(--ink-3);text-align:center;padding:4px 0}
.wb-day{min-height:92px;display:flex;flex-direction:column;gap:3px;align-items:stretch;text-align:left;padding:6px;border-radius:10px;border:1px solid var(--line);background:rgba(5,7,15,.3);cursor:pointer;min-width:0;color:var(--ink)}
.wb-day:hover{border-color:rgba(53,230,255,.35)}
.wb-day.out{opacity:.4}
.wb-day.today{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(53,230,255,.35)}
.wb-day.today .wb-dn{color:var(--cyan)}
.wb-day.sel{background:rgba(53,230,255,.1)}
.wb-dn{font:600 13px var(--f-display)}
.wb-ev{font-size:11px;line-height:1.35;padding:1px 5px;border-radius:4px;border-left:3px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-ev.done{text-decoration:line-through;color:var(--ink-2)}
.wb-ev.plan{color:#cdb8ff;font-style:italic}
.wb-more{font-size:10.5px;color:var(--ink-3)}
.wb-dayp .scroll{padding:6px 8px}
@media (max-width:1100px){.wb-calwrap{grid-template-columns:1fr}.wb-dayp{min-height:240px}}
@media (max-width:820px){
  .wb-row{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .wb-acts{grid-column:2;flex-wrap:wrap}
  .wb-2{grid-template-columns:1fr}
  .wb-day{min-height:58px;padding:4px}
  .wb-ev{font-size:0;padding:0;height:6px;border-left-width:0;border-radius:3px}
  .wb-more{font-size:9.5px}
  .wb-legend{margin-left:0}
  .wb-quick input[type=date]{flex:1}
}

/* Team-Chat */
.chat-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:14px}
.chat-side .ch-search{display:flex;align-items:center;gap:8px;margin:10px 12px 4px;background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.chat-side .ch-search input{flex:1;background:none;border:0;outline:0;font-size:14px;min-width:0}
.ch-room{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:0;border-bottom:1px solid rgba(120,150,255,.07);background:none;color:var(--ink);text-align:left;cursor:pointer}
.ch-room:hover{background:rgba(59,123,255,.07)}
.ch-room.on{background:linear-gradient(90deg,rgba(53,230,255,.13),transparent)}
.ch-av{position:relative}
.ch-on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--deck)}
.ch-rt{display:grid;min-width:0}
.ch-rn{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-rp{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-rp.wrap{white-space:normal}
.ch-rp b{font-weight:500;color:var(--ink)}
.ch-rp mark{background:rgba(53,230,255,.25);color:var(--ink);border-radius:3px}
.ch-rm{display:grid;justify-items:end;gap:4px;font-size:11.5px;color:var(--ink-3)}
.ch-badge{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--cyan);color:#04121a;font:700 11px/1.5 var(--f-body);text-align:center}
.ch-sr-h{padding:8px 14px}
.chat-main.drop{outline:2px dashed var(--cyan);outline-offset:-6px}
.ch-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);min-height:58px}
.ch-head:empty{display:none}
.ch-ht{display:grid;min-width:0;flex:1}
.ch-ht b{font:600 16px var(--f-display)}
.ch-ht small{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-lock{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ch-back{display:none}
.ch-msgs{padding:12px 14px 8px;display:flex;flex-direction:column;gap:2px}
.ch-msgs > .empty{margin:auto}
.ch-day{display:flex;justify-content:center;margin:12px 0 6px}
.ch-day span,.ch-new span{font:600 11px var(--f-display);letter-spacing:.08em;padding:3px 10px;border-radius:999px;background:rgba(11,16,32,.85);border:1px solid var(--line);color:var(--ink-2)}
.ch-new{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--cyan)}
.ch-new::before,.ch-new::after{content:"";flex:1;height:1px;background:rgba(53,230,255,.35)}
.ch-new span{color:var(--cyan);border-color:rgba(53,230,255,.35)}
.ch-m{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:end;margin-top:8px;max-width:min(680px,88%)}
.ch-m.grp{margin-top:2px}
.ch-m.own{grid-template-columns:minmax(0,1fr);margin-left:auto}
.ch-m.own .ch-mav-sp,.ch-m.own .ch-mav{display:none}
.ch-mav{width:32px!important;height:32px!important;font-size:11px!important}
.ch-mav-sp{width:32px}
.ch-b{position:relative;padding:7px 11px 5px;border-radius:14px 14px 14px 4px;background:rgba(22,30,58,.85);border:1px solid var(--line);min-width:72px;justify-self:start;max-width:100%}
.ch-m.grp .ch-b{border-radius:14px}
.ch-m.own .ch-b{justify-self:end;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,rgba(53,230,255,.18),rgba(59,123,255,.16));border-color:rgba(53,230,255,.3)}
.ch-m.hl .ch-b{box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(200,141,78,.4)}
.ch-who{font:600 12.5px var(--f-body);margin-bottom:2px}
.ch-t{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.45}
.ch-t a{color:var(--cyan)}
.ch-del{color:var(--ink-3);font-size:13.5px}
.ch-meta{font:11px var(--f-mono);color:var(--ink-3);text-align:right;margin-top:2px;white-space:nowrap}
.ch-more{position:absolute;top:2px;right:-30px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:rgba(11,16,32,.9);color:var(--ink-2);cursor:pointer;opacity:0;transition:.15s;line-height:1}
.ch-m.own .ch-more{right:auto;left:-30px}
.ch-m:hover .ch-more,.ch-more:focus-visible{opacity:1}
/* (⋯ jetzt auch am Handy sichtbar) */
.ch-quote{display:grid;text-align:left;width:100%;gap:1px;margin:2px 0 5px;padding:5px 9px;border:0;border-left:3px solid var(--violet);border-radius:6px;background:rgba(5,7,15,.4);color:var(--ink-2);font-size:12.5px;cursor:pointer}
.ch-quote b{color:#cdb8ff;font-weight:600}
.ch-quote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-img img{display:block;width:min(320px,62vw);height:auto;max-height:380px;object-fit:cover;border-radius:10px;margin:2px 0;background:rgba(5,7,15,.4)}
.ch-voice{display:flex;align-items:center;gap:8px}
.ch-voice audio{height:36px;max-width:240px}
.ch-voice small{color:var(--ink-3);font-size:11px}
.ch-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(5,7,15,.4);border:1px solid var(--line);color:var(--ink);text-decoration:none;margin:2px 0}
.ch-file span{display:grid;min-width:0}
.ch-file b{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.ch-file small{color:var(--ink-3);font-size:11.5px}
.ch-rx{grid-column:2;display:flex;gap:4px;flex-wrap:wrap;margin-top:-2px}
.ch-m.own .ch-rx{grid-column:1;justify-content:flex-end}
.ch-rx button{font-size:13px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);background:rgba(11,16,32,.9);cursor:pointer;color:var(--ink)}
.ch-rx button.mine{border-color:rgba(53,230,255,.5);background:rgba(53,230,255,.12)}
.ch-sys{align-self:center;max-width:min(560px,94%);margin:10px auto;padding:8px 12px;border-radius:12px;border:1px solid rgba(200,141,78,.35);background:rgba(200,141,78,.07);font-size:13.5px}
.ch-sys.claude{border-color:rgba(154,107,255,.4);background:rgba(154,107,255,.08)}
.ch-sys-who{display:block;font:600 10.5px var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.ch-sys.claude .ch-sys-who{color:#cdb8ff}
.ch-task{display:grid;gap:7px;padding:9px 11px;margin:3px 0;border-radius:11px;border:1px solid rgba(53,230,255,.25);background:rgba(5,7,15,.45)}
.ch-task-h{font-size:14.5px}
.ch-task-m,.ch-task-a{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ch-task-a a{text-decoration:none;color:var(--ink)}
.ch-loadmore{display:flex;justify-content:center;padding:6px}
.ch-up{padding:4px 16px;color:var(--cyan)}
.ch-bar{display:flex;align-items:center;gap:10px;margin:0 12px;padding:7px 10px;border-left:3px solid var(--violet);border-radius:8px;background:rgba(5,7,15,.5)}
.ch-bar > div{display:grid;min-width:0;flex:1;font-size:12.5px}
.ch-bar b{color:#cdb8ff;font-weight:600}
.ch-bar span{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-compose{display:flex;align-items:flex-end;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.ch-compose textarea{flex:1;resize:none;min-height:42px;max-height:160px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(5,7,15,.55);outline:0;font-size:14.5px;line-height:1.4}
.ch-compose textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,230,255,.15)}
.ch-ib{flex:none;width:40px;height:42px;border-radius:12px;border:1px solid transparent;background:none;color:var(--ink-2);cursor:pointer;font-size:19px;display:grid;place-items:center}
.ch-ib:hover{color:var(--cyan);background:rgba(53,230,255,.08)}
.ch-send{flex:none;width:44px;height:42px;border-radius:12px;border:0;cursor:pointer;color:#04121a;background:linear-gradient(90deg,var(--cyan),#7aa8ff);box-shadow:0 0 18px rgba(53,230,255,.35);display:grid;place-items:center}
.ch-rec{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line);font:600 14px var(--f-mono)}
.ch-recdot{width:12px;height:12px;border-radius:50%;background:var(--crit);box-shadow:0 0 12px var(--crit);animation:recp 1s infinite}
@keyframes recp{50%{opacity:.3}}
.ch-pop{position:fixed;z-index:60;display:grid;min-width:210px;padding:6px;background:rgba(11,16,32,.98);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.ch-pop > button,.ch-pop > a{display:block;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:13.5px;cursor:pointer;text-decoration:none}
.ch-pop > button:hover,.ch-pop > a:hover{background:rgba(59,123,255,.12)}
.ch-pop .danger{color:#ff9bb0}
.ch-quick{display:flex;gap:2px;padding:2px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ch-quick button,.ch-emo button{font-size:20px;width:34px;height:34px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--ink)}
.ch-quick button:hover,.ch-emo button:hover{background:rgba(53,230,255,.12)}
.ch-emo{display:grid;grid-template-columns:repeat(8,34px);gap:2px;max-height:260px;overflow:auto}
.ch-people{display:grid;gap:6px;max-height:50vh;overflow:auto}
.ch-person{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(5,7,15,.35);cursor:pointer;color:var(--ink);font-size:14px;text-align:left}
.ch-person span{flex:1}
.ch-person:hover{border-color:rgba(53,230,255,.35)}
.ch-person input{accent-color:var(--cyan);width:18px;height:18px}
.ch-person:has(input:checked){border-color:var(--cyan);background:rgba(53,230,255,.08)}
@media (max-width:820px){
  .chat-work{display:block}
  .chat-work .chat-side{min-height:calc(100dvh - 120px)}
  .chat-work .chat-main{display:none}
  .chat-work.open .chat-side{display:none}
  .chat-work.open .chat-main{display:flex;height:calc(100dvh - 104px)}
  .chat-work .chat-main .scroll{overflow:auto}
  .chat-work .chat-side .scroll{overflow:auto}
  .ch-back{display:inline-flex;font-size:20px;padding:2px 10px}
  .ch-m{max-width:94%}
  .ch-lock{display:none}
}
.wb-dayp .wb-row{grid-template-columns:30px minmax(0,1fr);gap:10px}
.wb-dayp .wb-acts{grid-column:2;flex-wrap:wrap}
.wb-legend i{width:10px;height:10px;margin-right:-5px;border-radius:3px}
.wb-legend i.offen{background:var(--cyan)} .wb-legend i.laeuft{background:var(--volt)} .wb-legend i.late{background:var(--crit)} .wb-legend i.done{background:var(--ok)} .wb-legend i.plan{background:var(--violet)}
.ch-msgs > *{flex-shrink:0}
@media (max-width:820px){
  body:has(#v-chat.on) .top{display:none}
  .chat-work.open .chat-main{height:calc(100dvh - 96px)}
  .chat-work .chat-side{min-height:calc(100dvh - 96px)}
}
/* Whiteboard 12.10. (2): Personen-Zeile, klickbarer Status, Wiederholung */
.wb-ppl{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.wb-ppl b{color:var(--ink);font-weight:600}
.wb-ppl i{font-style:normal;color:var(--ink-3)}
.wb-ppl .me b{color:var(--cyan)} .wb-ppl .run b{color:var(--cyan)} .wb-ppl .ok b{color:var(--ok)}
.wb-stat{font:600 12.5px var(--f-body);padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(5,7,15,.4);color:var(--ink);cursor:pointer;white-space:nowrap}
.wb-stat span{opacity:.6;font-size:10px;margin-left:2px}
.wb-stat:hover{border-color:rgba(53,230,255,.45)}
.wb-stat.offen.late{color:#ffc4cf;border-color:rgba(255,85,119,.5)}
.wb-stat.laeuft{color:var(--cyan);border-color:rgba(53,230,255,.5);background:rgba(53,230,255,.1)}
.wb-stat.erledigt{color:var(--ok);border-color:rgba(62,229,154,.45);background:rgba(62,229,154,.08)}
button.wb-chip{cursor:pointer;background:none;font:inherit;font-size:11.5px}
button.wb-chip:hover{border-color:rgba(154,107,255,.7)}
.wb-chip.rec.none{color:var(--ink-3);border-style:dashed;border-color:var(--line)}
.wb-menu{min-width:240px}
.wb-menu .wb-mh{font:600 10.5px var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:6px 10px 2px}
.wb-menu .wb-msep{height:1px;background:var(--line);margin:4px 0}
.wb-menu button.on{color:var(--cyan);background:rgba(53,230,255,.08)}
.wb-menu button.on::after{content:" ✓"}
#wbqRep{background:rgba(5,7,15,.55);border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--ink)}
.view.ro .wb-stat{pointer-events:none}
/* Chat: Aktionen-Knopf in der Zeitzeile der Nachricht (immer sichtbar) */
.ch-meta .ch-more{position:static;display:inline-grid;place-items:center;width:22px;height:18px;margin-right:6px;border-radius:6px;border:0;background:rgba(5,7,15,.35);opacity:.55;font-size:12px;vertical-align:middle;color:var(--ink-2)}
.ch-meta .ch-more:hover,.ch-m:hover .ch-meta .ch-more{opacity:1;color:var(--cyan)}
#chRoomMenu{font-size:18px;padding:2px 10px}