/* Kontor — Gestaltung aus dem klickbaren Prototyp übernommen.
   Keine externen Schriften (CSP font-src 'self'): IBM Plex, falls lokal installiert, sonst Systemschrift. */

/* ============ Tokens: light is the base set ============ */
:root{
  --ground:#F4F7F5;
  --surface:#FFFFFF;
  --surface-2:#EDF1EF;
  --surface-3:#E4EAE7;
  --ink:#132420;
  --ink-2:#4A5D58;
  --ink-3:#7C8D88;
  --line:#DCE4E0;
  --line-strong:#C3CEC9;
  --accent:#0E6E64;
  --accent-hover:#0B564E;
  --accent-soft:#DCEDEA;
  --accent-line:#9CC9C2;
  --on-accent:#FFFFFF;
  --amber:#8A5B00;
  --amber-soft:#F6EBD4;
  --amber-line:#DFC48A;
  --clay:#A03A2B;
  --clay-soft:#F7E3DF;
  --clay-line:#E0AC9F;
  --moss:#4A7238;
  --moss-soft:#E4EEDC;
  --shadow:0 1px 2px rgba(19,36,32,.05), 0 8px 24px -12px rgba(19,36,32,.18);
  --shadow-lg:0 2px 4px rgba(19,36,32,.06), 0 24px 48px -20px rgba(19,36,32,.30);
  --hatch:rgba(19,36,32,.055);
  --radius:10px;
  --sans:"IBM Plex Sans", "Segoe UI Variable Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --serif:"IBM Plex Serif", ui-serif, Georgia, serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1513;
    --surface:#161F1D;
    --surface-2:#1D2825;
    --surface-3:#25322E;
    --ink:#E7EFEC;
    --ink-2:#A5B5B0;
    --ink-3:#7B8C87;
    --line:#26332F;
    --line-strong:#35443F;
    --accent:#45B7A6;
    --accent-hover:#5FCBBB;
    --accent-soft:#15302C;
    --accent-line:#2C5C55;
    --on-accent:#08201D;
    --amber:#E0AE5C;
    --amber-soft:#2E2517;
    --amber-line:#5B4726;
    --clay:#E4907E;
    --clay-soft:#331E19;
    --clay-line:#5E362D;
    --moss:#8FBE73;
    --moss-soft:#1D2A18;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.75);
    --hatch:rgba(231,239,236,.07);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1513;
  --surface:#161F1D;
  --surface-2:#1D2825;
  --surface-3:#25322E;
  --ink:#E7EFEC;
  --ink-2:#A5B5B0;
  --ink-3:#7B8C87;
  --line:#26332F;
  --line-strong:#35443F;
  --accent:#45B7A6;
  --accent-hover:#5FCBBB;
  --accent-soft:#15302C;
  --accent-line:#2C5C55;
  --on-accent:#08201D;
  --amber:#E0AE5C;
  --amber-soft:#2E2517;
  --amber-line:#5B4726;
  --clay:#E4907E;
  --clay-soft:#331E19;
  --clay-line:#5E362D;
  --moss:#8FBE73;
  --moss-soft:#1D2A18;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.75);
  --hatch:rgba(231,239,236,.07);
}

/* ============ Base ============ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.012em}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
a{color:var(--accent); text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
svg{display:block}
.icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}


/* ============ Shell ============ */
.shell{display:grid; grid-template-columns:238px minmax(0,1fr); align-items:start}
.rail{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 0 12px;
}
.brand{display:flex; align-items:center; gap:10px; padding:0 18px 18px}
.brand-mark{
  width:30px;height:30px;border-radius:8px;background:var(--accent); color:var(--on-accent);
  display:grid;place-items:center; font-family:var(--mono); font-weight:600; font-size:15px;
  flex:none;
}
.brand-name{font-weight:600; font-size:15px; letter-spacing:-.02em}
.brand-sub{font-size:11px; color:var(--ink-3); font-family:var(--mono)}

.nav-label{
  padding:0 18px; margin:14px 0 6px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.nav{display:flex; flex-direction:column; gap:1px; padding:0 10px}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:7px 10px; border-radius:8px; color:var(--ink-2); font-size:13.5px;
  transition:background .13s, color .13s;
}
.nav-item:hover{background:var(--surface-2); color:var(--ink)}
.nav-item.is-active{background:var(--accent-soft); color:var(--accent); font-weight:600}
.nav-item .icon{flex:none; opacity:.85}
.nav-count{
  margin-left:auto; font-family:var(--mono); font-size:11px; padding:1px 6px; border-radius:99px;
  background:var(--surface-3); color:var(--ink-2);
}
.nav-item.is-active .nav-count{background:var(--accent); color:var(--on-accent)}
.nav-item.is-locked{opacity:.4; cursor:not-allowed}
.rail-foot{margin-top:auto; padding:14px 18px 0; border-top:1px solid var(--line); margin-inline:10px}

/* ============ Topbar ============ */
.topbar{
  position:sticky; flex-wrap:nowrap; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:12px 24px; background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.capture{
  flex:1; display:flex; align-items:center; gap:10px; min-width:0;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:0 12px; height:40px; box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s;
}
.capture:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.capture .icon{color:var(--accent); flex:none}
.capture input{
  flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink);
  font-family:var(--mono); font-size:13px;
}
.capture input::placeholder{color:var(--ink-3); font-family:var(--sans)}
.kbd{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 5px;
  background:var(--surface-2); white-space:nowrap;
}
.top-btn{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  color:var(--ink-2); font-size:13px; transition:border-color .15s, color .15s;
}
.top-btn:hover{border-color:var(--line-strong); color:var(--ink)}
.scope{
  display:flex; align-items:center; gap:9px; height:40px; padding:0 12px 0 10px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:13px;
}
.scope-dot{width:8px;height:8px;border-radius:99px;background:var(--moss); flex:none}
body.scoped .scope{background:var(--amber-soft); border-color:var(--amber-line); color:var(--amber)}
body.scoped .scope-dot{background:var(--amber)}
.scope select{
  border:none; background:none; outline:none; color:inherit; font:inherit; cursor:pointer;
  max-width:190px;
}

/* ============ Scope banner ============ */
.scope-banner{display:none; align-items:flex-start; gap:11px; margin:0 24px; margin-top:18px;
  padding:11px 14px; border-radius:var(--radius);
  background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber); font-size:12.5px}
body.scoped .scope-banner{display:flex}
.scope-banner .icon{flex:none; margin-top:1px}
.scope-banner b{font-weight:600}

/* ============ Layout primitives ============ */
.page{padding:22px 24px 56px; max-width:1320px}
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.page-title{font-size:22px; font-weight:600; letter-spacing:-.025em}
.page-sub{color:var(--ink-3); font-size:13px; margin-top:3px}
.page-head .spacer{flex:1}

.cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
@media (max-width:1120px){ .cols{grid-template-columns:minmax(0,1fr)} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line)}
.card-title{font-size:13px; font-weight:600; letter-spacing:.005em}
.card-head .spacer{flex:1}
.card-note{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
.stack{display:flex; flex-direction:column; gap:18px}
.row{display:flex; align-items:center; gap:10px}

.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}


/* ============ Chips / badges ============ */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:99px;
  font-size:11.5px; background:var(--surface-2); color:var(--ink-2); border:1px solid transparent;
  white-space:nowrap;
}
.chip .dot{width:6px;height:6px;border-radius:99px;background:currentColor; flex:none; opacity:.8}
.chip.project{background:var(--surface-2); color:var(--ink-2); font-family:var(--mono); font-size:11px}
.chip.aktiv{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}
.chip.wartend{background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line)}
.chip.faellig{background:var(--clay-soft); color:var(--clay); border-color:var(--clay-line)}
.chip.erledigt{background:var(--moss-soft); color:var(--moss)}
.chip.area{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase}
.chip.conf{
  color:var(--ink-2); border-color:var(--line-strong);
  background-image:repeating-linear-gradient(135deg, var(--hatch) 0 4px, transparent 4px 8px);
}

/* ============ Lists ============ */
.list{display:flex; flex-direction:column}
.item{
  display:flex; align-items:flex-start; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--line); text-align:left; width:100%;
  transition:background .12s;
}
.item:last-child{border-bottom:none}
.item:hover{background:var(--surface-2)}
.item-main{flex:1; min-width:0; display:block}
.item-title{display:block; font-size:13.5px; font-weight:500; color:var(--ink)}
.item-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px; font-size:11.5px; color:var(--ink-3)}
.item-time{font-family:var(--mono); font-size:11px; color:var(--ink-3); flex:none; padding-top:2px}

/* checkbox */
.check{
  width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line-strong); flex:none;
  margin-top:1px; display:grid; place-items:center; color:transparent; background:var(--surface);
  transition:border-color .13s, background .13s, color .13s;
}
.check:hover{border-color:var(--accent)}
.check.is-done{background:var(--moss); border-color:var(--moss); color:#fff}
.check .icon{width:11px;height:11px;stroke-width:2.6}

.task-done .item-title{text-decoration:line-through; color:var(--ink-3)}

/* status rail on task rows */
.item.has-rail{position:relative}
.item.has-rail::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent}
.item.rail-clay::before{background:var(--clay)}
.item.rail-amber::before{background:var(--amber)}
.item.rail-accent::before{background:var(--accent)}

/* ============ Tabs ============ */
.tabs{display:flex; gap:2px; padding:4px; background:var(--surface-2); border-radius:9px; align-self:flex-start}
.tab{
  padding:5px 12px; border-radius:6px; font-size:13px; color:var(--ink-2);
  display:flex; align-items:center; gap:7px; transition:background .13s, color .13s;
}
.tab:hover{color:var(--ink)}
.tab.is-active{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}
.tab .n{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.tab.is-active .n{color:var(--accent)}

/* ============ Inbox ============ */
.inbox-item{
  display:flex; align-items:flex-start; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line);
}
.inbox-item:last-child{border-bottom:none}
.inbox-body{flex:1; min-width:0}
.inbox-text{
  font-family:var(--mono); font-size:12.5px; color:var(--ink); white-space:pre-wrap;
  word-break:break-word; line-height:1.6;
}
.inbox-text a{border-bottom:1px solid var(--accent-line)}
.triage{display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap}
.tbtn{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px;
  border:1px solid var(--line-strong); background:var(--surface); font-size:12px; color:var(--ink-2);
  transition:border-color .13s, color .13s, background .13s;
}
.tbtn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.tbtn .icon{width:13px;height:13px}
.triage-hint{font-size:11.5px; color:var(--ink-3); margin-left:2px}
.is-new{animation:slideIn .32s cubic-bezier(.2,.7,.3,1)}
@keyframes slideIn{from{opacity:0; transform:translateY(-8px); background:var(--accent-soft)} to{opacity:1; transform:none}}
.is-filed{animation:fadeOut .3s ease forwards}
@keyframes fadeOut{to{opacity:0; transform:translateX(14px)}}
.empty{padding:26px 16px; text-align:center; color:var(--ink-3); font-size:12.5px}

/* ============ Log timeline ============ */
.day{margin-bottom:18px}
.day-head{
  display:flex; align-items:center; gap:10px; margin-bottom:9px; position:sticky; top:65px; z-index:5;
  padding:5px 0; background:linear-gradient(var(--ground) 70%, transparent);
}
.day-date{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink)}
.day-rule{flex:1; height:1px; background:var(--line)}
.entry{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:9px; overflow:hidden}
.entry-head{display:flex; align-items:flex-start; gap:12px; padding:13px 16px; width:100%; text-align:left}
.entry-type{
  width:26px;height:26px;border-radius:7px; display:grid; place-items:center; flex:none;
  background:var(--surface-2); color:var(--ink-2);
}
.entry-type.meeting{background:var(--accent-soft); color:var(--accent)}
.entry-title{display:block; font-size:13.5px; font-weight:600}
.entry-body{padding:0 16px 15px 54px; display:none; font-size:13px; color:var(--ink-2)}
.entry.is-open .entry-body{display:block}
.entry.is-open .caret{transform:rotate(90deg)}
.caret{color:var(--ink-3); transition:transform .18s; flex:none; margin-top:4px}
.field{margin-top:13px}
.field-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:5px}
.field ul{margin:0; padding-left:17px; display:flex; flex-direction:column; gap:4px}
.spawned{
  display:inline-flex; align-items:center; gap:6px; margin-top:5px; padding:4px 9px; border-radius:7px;
  background:var(--surface-2); border:1px dashed var(--line-strong); font-size:12px; color:var(--ink-2);
}
.spawned .icon{width:13px;height:13px; color:var(--accent)}

/* ============ Knowledge ============ */
.grid-know{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.know{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px;
  box-shadow:var(--shadow); text-align:left; display:flex; flex-direction:column; gap:9px;
  transition:border-color .14s, transform .14s;
}
.know:hover{border-color:var(--accent-line); transform:translateY(-1px)}
.know[data-knowopen]{cursor:pointer}
.know[data-knowopen] .editbtn{cursor:pointer}
.know-title{display:block; font-size:14px; font-weight:600; letter-spacing:-.01em}
.know-excerpt{display:block; font-family:var(--serif); font-size:13px; color:var(--ink-2); line-height:1.55}
.know-foot{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto}
.tag{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.know.locked{opacity:.55}
.know.locked .know-excerpt{filter:blur(3.5px); user-select:none}

/* ============ Projects ============ */
.proj{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line);
  width:100%; text-align:left; transition:background .12s;
}
.proj:last-child{border-bottom:none}
.proj:hover{background:var(--surface-2)}
.proj-mark{
  width:34px;height:34px;border-radius:9px; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:600;
  background:var(--accent-soft); color:var(--accent);
}
.proj.locked{opacity:.45; cursor:not-allowed; background:
  repeating-linear-gradient(135deg, var(--hatch) 0 5px, transparent 5px 10px)}
.proj.locked .proj-mark{background:var(--surface-3); color:var(--ink-3)}
.service{
  display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line);
  width:100%; text-align:left; transition:background .12s;
}
.service:last-child{border-bottom:none}
.service:hover{background:var(--surface-2)}
.service-mark{width:26px;height:26px;border-radius:7px;background:var(--surface-2); color:var(--ink-2);
  display:grid;place-items:center; flex:none}
.changelog{display:flex !important; flex-direction:column; gap:3px; margin-top:7px; padding-left:11px;
  border-left:2px solid var(--line)}
.changelog span{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}

/* context rail */
.ctx-item{display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line);
  width:100%; text-align:left; transition:background .12s}
.ctx-item:last-child{border-bottom:none}
.ctx-item:hover{background:var(--surface-2)}
.ctx-icon{width:22px;height:22px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);
  display:grid;place-items:center;flex:none;margin-top:1px}
.ctx-title{display:block; font-size:12.5px; color:var(--ink); line-height:1.4}
.ctx-meta{display:block; font-size:11px; color:var(--ink-3); font-family:var(--mono); margin-top:3px}

/* ============ Search overlay ============ */
.overlay{
  position:fixed; inset:0; z-index:100; display:none; padding:9vh 16px 16px;
  background:color-mix(in srgb, var(--ink) 34%, transparent); backdrop-filter:blur(3px);
}
.overlay.is-open{display:block; animation:fadeIn .14s ease}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.search-panel{
  max-width:680px; margin:0 auto; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.search-input-row{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line)}
.search-input-row input{flex:1; border:none; background:none; outline:none; font:inherit; font-size:16px; color:var(--ink)}
.search-input-row input::placeholder{color:var(--ink-3)}
.results{max-height:56vh; overflow-y:auto}
.result{display:flex; gap:12px; padding:11px 16px; width:100%; text-align:left; border-bottom:1px solid var(--line)}
.result:hover, .result:focus-visible{background:var(--accent-soft)}
.result:last-child{border-bottom:none}
.result-title{display:block; font-size:13.5px; font-weight:500}
.result-snip{display:block; font-size:12px; color:var(--ink-2); margin-top:3px}
.result-snip mark{background:var(--amber-soft); color:var(--amber); border-radius:3px; padding:0 2px}
.result-meta{display:flex; gap:7px; align-items:center; margin-top:6px; flex-wrap:wrap}
.search-foot{display:flex; gap:14px; padding:9px 16px; background:var(--surface-2); font-size:11.5px; color:var(--ink-3)}

/* ============ Drawer ============ */
.drawer-scrim{position:fixed; inset:0; z-index:90; background:color-mix(in srgb, var(--ink) 28%, transparent);
  display:none}
.drawer-scrim.is-open{display:block; animation:fadeIn .14s ease}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:95;
  background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.3,.8,.4,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.is-open{transform:none}
.drawer-head{display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--line)}
.drawer-body{padding:18px 20px; display:flex; flex-direction:column; gap:16px}
.dfield{display:flex; flex-direction:column; gap:5px}
.dfield-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.dfield-value{font-size:13.5px}
.select-fake{
  display:flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid var(--line-strong);
  border-radius:8px; background:var(--surface-2); font-size:13px; color:var(--ink);
}
.origin{
  display:flex; gap:10px; padding:11px 13px; border-radius:9px; background:var(--surface-2);
  border:1px solid var(--line);
}
.drawer-actions{display:flex; gap:8px; padding:14px 20px; border-top:1px solid var(--line); margin-top:auto}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px;
  border-radius:8px; font-size:13px; font-weight:500; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); transition:border-color .13s, background .13s;
}
.btn:hover{border-color:var(--accent-line); background:var(--surface-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}


/* ============ Toast ============ */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:120;
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:99px;
  background:var(--ink); color:var(--ground); font-size:13px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}


.pulse{width:9px; height:9px; border-radius:99px; background:var(--clay); flex:none; animation:pulse 1.7s infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.3; transform:scale(.7)}}
.timer{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-2)}

.mini{display:flex; gap:9px; padding:9px 13px; border-bottom:1px solid var(--line); width:100%; text-align:left;
  transition:background .12s}
.mini:last-child{border-bottom:none}
.mini:hover{background:var(--surface-2)}
.mini.is-open{background:var(--accent-soft)}
.mini-t{display:block; font-size:12.5px; color:var(--ink); line-height:1.4}
.mini-m{display:block; font-size:11px; color:var(--ink-3); font-family:var(--mono); margin-top:3px}
.mini-dot{width:7px; height:7px; border-radius:99px; flex:none; margin-top:5px; background:var(--line-strong)}
.mini-dot.on{background:var(--moss)}
.mini-dot.wip{background:var(--amber)}

.shotbox{position:fixed; inset:0; z-index:110; display:none; place-items:center; padding:5vh 16px;
  background:color-mix(in srgb, var(--ink) 55%, transparent)}
.shotbox.is-open{display:grid}
.shotbox > div{max-width:760px; width:100%; background:var(--surface); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-lg)}

/* Doku-Editor */
.docsec{margin-bottom:20px}
.docsec:last-child{margin-bottom:0}
.parm{display:grid; grid-template-columns:130px minmax(0,1fr); gap:2px 12px; font-size:12.5px}
.parm dt{color:var(--ink-3); font-family:var(--mono); font-size:11.5px; padding:4px 0}
.parm dd{margin:0; padding:4px 0; font-family:var(--mono); font-size:12px}
.editor{border:1px solid var(--accent-line); border-radius:10px; overflow:hidden; background:var(--surface)}
.etoolbar{display:flex; gap:4px; padding:7px 9px; border-bottom:1px solid var(--line);
  background:var(--surface-2); flex-wrap:wrap; align-items:center}
.ebtn{padding:4px 9px; border-radius:6px; font-size:12px; color:var(--ink-2); border:1px solid transparent}
.ebtn:hover{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
.ebtn.b{font-weight:700}
.ebtn.i{font-style:italic}
.ebtn.c{font-family:var(--mono); font-size:11.5px}
.etitle{width:100%; border:none; border-bottom:1px solid var(--line); padding:11px 14px; background:none;
  outline:none; font:inherit; font-size:14px; font-weight:600; color:var(--ink)}
.ebody{padding:12px 14px; min-height:110px; outline:none; font-size:13.5px; line-height:1.75; color:var(--ink)}
.ebody:empty::before{content:attr(data-ph); color:var(--ink-3)}
.ebody code{font-family:var(--mono); font-size:12px; background:var(--surface-2); padding:1px 5px; border-radius:4px}
.efoot{display:flex; gap:8px; align-items:center; padding:10px 14px; border-top:1px solid var(--line);
  background:var(--surface-2)}
.change{padding:11px 13px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); margin-bottom:8px}
.change.is-new{border-color:var(--accent-line); background:var(--accent-soft)}


/* ============ Rail: einklappbar + Gruppen ohne Label ============ */
.rail{transition:width .18s ease}
body.rail-min .rail{width:60px; overflow:hidden}
body.rail-min .rail .nav-item span:not(.nav-count),
body.rail-min .rail .brand-text,
body.rail-min .rail .rail-foot,
body.rail-min .rail .nav-count{display:none}
body.rail-min .shell{grid-template-columns:60px minmax(0,1fr)}
.navsep{height:1px; background:var(--line); margin:9px 18px}
.capture{white-space:nowrap}
.hamb{display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:var(--ink-2); flex:none}
.hamb:hover{background:var(--surface-2); color:var(--ink)}

/* ============ Filterleiste ============ */

/* ============ Dashboard-Raster ============ */
.dashgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:18px 24px 46px;
  align-items:start}
@media (max-width:1240px){ .dashgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .dashgrid{grid-template-columns:minmax(0,1fr)} }
.dcol{display:flex; flex-direction:column; gap:14px; min-width:0}

.widget{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.widget-head{display:flex; align-items:center; gap:9px 8px; flex-wrap:wrap; padding:9px 13px; border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.widget-title{font-size:12.5px; font-weight:600; white-space:nowrap}
.widget-head .spacer{flex:1}
.widget-body{padding:13px}
.widget-foot{padding:8px 13px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:var(--ink-3)}
.count{font-family:var(--mono); font-size:11px; padding:1px 7px; border-radius:99px;
  background:var(--surface-3); color:var(--ink-2)}
.scroll{overflow:auto; max-height:330px; scrollbar-width:thin}
.scroll.tall{max-height:420px}

/* Plaintext-Kachel */
.plain-head{background:var(--surface-2); gap:4px}
.ibtn{display:grid; place-items:center; min-width:28px; height:26px; padding:0 7px; border-radius:7px;
  font-family:var(--mono); font-size:13px; color:var(--ink-2); border:1px solid transparent}
.ibtn:hover{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
.ibtn:disabled{opacity:.3; cursor:not-allowed}
.plain-meta{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:5px}
.plain{width:100%; min-height:300px; resize:vertical; border:none; outline:none; background:none;
  color:var(--ink); font-family:var(--mono); font-size:12.5px; line-height:1.7; padding:0}
.plain::placeholder{color:var(--ink-3)}

/* Suchleiste in der Mitte */
.isearch-wrap{position:relative; padding:10px 12px}
.isearch{display:flex; align-items:center; gap:9px; border:1px solid var(--line-strong); border-radius:9px;
  padding:0 11px; height:38px; background:var(--surface-2); transition:border-color .14s, box-shadow .14s}
.isearch:focus-within{border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft)}
.isearch input{flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink); font:inherit; font-size:13px}
.isearch input::placeholder{color:var(--ink-3)}
.isearch-results{position:absolute; left:12px; right:12px; top:52px; z-index:40; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow-lg); overflow:hidden; display:none}
.isearch-results.is-open{display:block}
.ires{display:flex; gap:10px; width:100%; text-align:left; padding:9px 12px; border-bottom:1px solid var(--line)}
.ires:last-child{border-bottom:none}
.ires:hover{background:var(--accent-soft)}
.ires-t{display:block; font-size:12.5px; color:var(--ink)}
.ires-m{display:flex; gap:6px; align-items:center; margin-top:4px; flex-wrap:wrap}

/* Quick Actions */
.qa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
.qatile{display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; padding:11px 12px;
  border:1px solid var(--line-strong); border-radius:9px; background:var(--surface);
  transition:border-color .13s, background .13s, transform .13s}
.qatile:hover{border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px)}
.qatile .icon{color:var(--accent)}
.qatile b{font-size:12.5px; font-weight:600}
.qatile span{font-size:11px; color:var(--ink-3); line-height:1.4}

/* Tabellen */
.wsearch{width:118px; padding:4px 9px; border:1px solid var(--line-strong); border-radius:7px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:11.5px; outline:none}
.wsearch:focus{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.dtable{width:100%; border-collapse:collapse; font-size:12.5px; color:var(--ink)}
.dtable th{position:sticky; top:0; z-index:2; text-align:left; font-family:var(--mono); font-weight:500;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  background:var(--surface); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.dtable td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.dtable tr:last-child td{border-bottom:none}
.dtable tbody tr{transition:background .12s}
.dtable tbody tr:hover{background:var(--surface-2); cursor:pointer}
.dtable td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.dtable td.tight{width:1%; white-space:nowrap}
.dtable .sub{display:block; font-size:11px; color:var(--ink-3); margin-top:3px}
.dtable .empty-row td{color:var(--ink-3); text-align:center; padding:22px 12px; cursor:default}
.dtable tbody tr.empty-row:hover{background:none}
.tcheck{width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line-strong); display:grid;
  place-items:center; color:transparent; background:var(--surface)}
.tcheck:hover{border-color:var(--accent)}
.tcheck .icon{width:10px; height:10px; stroke-width:2.8}
.rowdone td{color:var(--ink-3)}
.rowdone .t{text-decoration:line-through}

/* Kalender */
.calwrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start}
@media (max-width:980px){ .calwrap{grid-template-columns:minmax(0,1fr)} }
.calgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-left:1px solid var(--line);
  border-top:1px solid var(--line)}
.caldow{padding:7px 9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface-2); text-align:left}
.calday{min-height:92px; padding:6px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface); text-align:left; display:flex; flex-direction:column; gap:4px; width:100%}
.calday:hover{background:var(--surface-2)}
.calday.is-out{background:var(--ground); cursor:default}
.calday.is-today{background:var(--accent-soft)}
.calday.is-sel{box-shadow:inset 0 0 0 2px var(--accent)}
.caldate{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.calday.is-today .caldate{color:var(--accent); font-weight:600}
.calev{font-size:10.5px; padding:2px 5px; border-radius:4px; background:var(--surface-2); color:var(--ink-2);
  border-left:2px solid var(--line-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.calev.meeting{border-left-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.calev.due{border-left-color:var(--clay); background:var(--clay-soft); color:var(--clay)}
.calev.wv{border-left-color:var(--amber); background:var(--amber-soft); color:var(--amber)}

/* Personen */
.avatar{width:30px; height:30px; border-radius:99px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:600; flex:none}

/* Ablaufende Sachen */
.bar{height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; width:110px; margin-top:5px}
.bar i{display:block; height:100%; background:var(--moss)}
.bar i.warn{background:var(--amber)}
.bar i.crit{background:var(--clay)}

/* ============ Formular-Dialog ============ */
.modal{position:fixed; inset:0; z-index:130; display:none; padding:7vh 16px 24px; overflow-y:auto;
  background:color-mix(in srgb, var(--ink) 38%, transparent); backdrop-filter:blur(3px)}
.modal.is-open{display:block; animation:fadeIn .14s ease}
.modal-box{max-width:540px; margin:0 auto; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden}
.modal-head{padding:16px 18px 13px; border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px; font-weight:600}
.modal-head p{font-size:12.5px; color:var(--ink-3); margin-top:4px}
.modal-body{padding:16px 18px; display:flex; flex-direction:column; gap:13px}
.ffield{display:flex; flex-direction:column; gap:5px}
.ffield > label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3)}
.finput{width:100%; padding:8px 11px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; outline:none;
  transition:border-color .13s, box-shadow .13s}
.finput:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
textarea.finput{resize:vertical; min-height:92px; line-height:1.6; font-family:var(--mono); font-size:12.5px}
.modal-foot{display:flex; gap:8px; align-items:center; padding:13px 18px; border-top:1px solid var(--line);
  background:var(--surface-2)}



/* ============ Plaintext mit Zeilennummern ============ */
.plainwrap{display:flex; align-items:stretch; min-height:0; border-top:1px solid var(--line)}
.pgut{flex:none; width:88px; overflow:hidden; border-right:1px solid var(--line); background:var(--surface-2);
  padding:10px 9px 10px 0; text-align:right; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  user-select:none}
.pg{height:22px; line-height:22px; white-space:nowrap}
.pg b{font-weight:500; opacity:.55; margin-right:6px}
.pg.is-empty{opacity:.35}
.plain{flex:1; min-width:0; min-height:300px; resize:vertical; border:none; outline:none; background:none;
  color:var(--ink); font-family:var(--mono); font-size:12.5px; line-height:22px; white-space:pre;
  overflow:auto; padding:10px 12px 10px 11px; scrollbar-width:thin; display:block}
.plain::placeholder{color:var(--ink-3)}
.widget-body.nopad{padding:0}

/* ============ Detailseiten ============ */
.backlink{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); margin-bottom:7px}
.backlink:hover{color:var(--accent)}
.doccard{border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin-bottom:10px;
  background:var(--surface)}
.doccard:last-child{margin-bottom:0}
.doccard.is-new{border-color:var(--accent-line); background:var(--accent-soft)}
.doccard h4{font-size:13.5px; font-weight:600}
.doccard .docmeta{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin:4px 0 8px}
.docbody{font-size:13px; line-height:1.7; color:var(--ink-2)}
.docbody p{margin-bottom:8px}
.docbody ul{margin:0 0 8px; padding-left:18px}
.docbody code{font-family:var(--mono); font-size:12px; background:var(--surface-2); padding:1px 5px; border-radius:4px}
.editor-lead{font-size:12.5px; color:var(--ink-3); margin-bottom:9px; line-height:1.55}

/* ============ Hinzufügen-Knöpfe (neu) ============ */
.addbtn{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:9px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font-size:12.5px; font-weight:500; white-space:nowrap; box-shadow:var(--shadow);
  transition:border-color .14s, box-shadow .14s, transform .14s}
.addbtn .plus{width:20px; height:20px; border-radius:6px; background:var(--surface-2); color:var(--ink-2);
  display:grid; place-items:center; flex:none; transition:background .14s, color .14s}
.addbtn .plus .icon{width:13px; height:13px; stroke-width:2}
.addbtn:hover{border-color:var(--accent-line); transform:translateY(-1px)}
.addbtn:hover .plus{background:var(--accent); color:var(--on-accent)}
.addbtn:active{transform:none}
.addbtn.mini{padding:0; width:24px; height:24px; justify-content:center; border:none; box-shadow:none;
  background:none; border-radius:7px}
.addbtn.mini .plus{width:24px; height:24px; border-radius:7px; background:transparent; color:var(--ink-3)}
.addbtn.mini:hover{transform:none}
.addbtn.mini:hover .plus{background:var(--accent-soft); color:var(--accent)}

/* ============ Inline-Zeilen zum Anlegen ============ */
.irow-input{padding:5px 9px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface);
  color:var(--ink); font:inherit; font-size:12.5px; outline:none; width:100%; min-width:0;
  transition:border-color .13s, box-shadow .13s}
.irow-input:focus{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
select.irow-input{cursor:pointer}
.irow-actions{display:flex; gap:5px; align-items:center}
.iok, .ix{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2)}
.iok .icon, .ix .icon{width:13px; height:13px; stroke-width:2.2}
.iok:hover{border-color:var(--accent); background:var(--accent); color:var(--on-accent)}
.ix:hover{border-color:var(--clay-line); color:var(--clay)}
tr.newrow td{background:var(--accent-soft); vertical-align:middle}
.item.newitem{background:var(--accent-soft)}

/* fehlendes Projekt */
.chip.missing{background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line);
  cursor:pointer; font-weight:500}
.chip.missing:hover{background:var(--amber); color:var(--surface)}
.foot-warn{color:var(--amber)}

/* ============ Bilder inline im Richtext ============ */
.inshot{display:block; margin:12px 0; max-width:360px; border:1px solid var(--line); border-radius:9px;
  overflow:hidden; background:var(--surface-2); cursor:zoom-in}
.inshot svg{width:100%; height:auto; display:block}
.inshot figcaption{padding:6px 10px; font-size:11px; color:var(--ink-3); border-top:1px solid var(--line);
  font-family:var(--mono); text-align:left}
.ebody .inshot{max-width:330px}
.ebody{min-height:140px}

/* ============ Call-Interface ============ */
.callbar2{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 24px 0;
  padding:11px 16px; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--accent-line); box-shadow:var(--shadow)}
.calllayout{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start}
@media (max-width:1100px){ .calllayout{grid-template-columns:minmax(0,1fr)} }
.cnfields{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; padding:14px 16px}
.cnhint{padding:16px; font-size:12.5px; color:var(--ink-3); line-height:1.6; text-align:center}
.cnhint svg{margin:0 auto 8px; width:22px; height:22px; color:var(--line-strong)}

/* ============ Bearbeiten ============ */
.editbtn{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:7px;
  color:var(--ink-3); flex:none; opacity:.55; transition:opacity .13s, background .13s, color .13s}
.editbtn .icon{width:13px; height:13px}
.editbtn:hover{opacity:1; background:var(--accent-soft); color:var(--accent)}
tr:hover .editbtn, .item:hover .editbtn, .know:hover .editbtn, .entry:hover .editbtn{opacity:1}
.linkbtn{font-size:11.5px; color:var(--ink-3); border-bottom:1px solid transparent; padding:0}
.linkbtn:hover{color:var(--accent); border-bottom-color:var(--accent-line)}
.linkbtn.danger:hover{color:var(--clay); border-bottom-color:var(--clay-line)}
.docactions{display:flex; gap:12px; align-items:center; margin-top:9px; padding-top:8px;
  border-top:1px dashed var(--line)}

/* ============ Segmentierte Umschalter ============ */
.seg{display:inline-flex; padding:3px; background:var(--surface-2); border-radius:8px; gap:2px}
.seg button{padding:4px 10px; border-radius:6px; font-size:11.5px; color:var(--ink-2)}
.seg button.is-on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow)}

/* ============ Fortlaufende Dokumentation ============ */
.flow{max-width:72ch}
.flowsec{padding:18px 0; border-bottom:1px solid var(--line)}
.flowsec:last-child{border-bottom:none}
.flowhead{display:flex; align-items:baseline; gap:10px; margin-bottom:9px; flex-wrap:wrap}
.flowhead h4{font-size:15px; font-weight:600; letter-spacing:-.01em}
.flowhead .when{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.flowbody{font-size:14px; line-height:1.75; color:var(--ink-2)}
.flowbody p{margin-bottom:10px}
.flowbody ul{margin:0 0 10px; padding-left:19px}
.flowbody code{font-family:var(--mono); font-size:12.5px; background:var(--surface-2); padding:1px 5px; border-radius:4px}
.flowbody .inshot{max-width:420px}

/* ============ Aufgaben-Panel breiter ============ */
.drawer{width:min(660px,96vw)}
.dtitle-input{width:100%; border:1px solid transparent; border-radius:8px; padding:5px 8px; margin-left:-8px;
  background:none; color:var(--ink); font:inherit; font-size:17px; font-weight:600; outline:none}
.dtitle-input:hover{border-color:var(--line)}
.dtitle-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface)}

/* ============ Notizen bearbeiten ============ */
.noteedit{width:100%; min-height:96px; resize:vertical; border:1px solid var(--accent-line); border-radius:8px;
  padding:9px 11px; background:var(--surface); color:var(--ink); font-family:var(--mono); font-size:12.5px;
  line-height:1.6; outline:none}
.noteedit:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* Projekt-Zelle in Tabellen */
.pcell{display:block}
.pcell .sub{display:block; font-size:11px; color:var(--ink-3); margin-top:3px}

/* ============ Durchsuchbare Projektauswahl ============ */
.ppick{position:relative}
.ppick-in{width:100%}
.ppick-list{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60; display:none;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:9px;
  box-shadow:var(--shadow-lg); max-height:236px; overflow-y:auto; scrollbar-width:thin; min-width:230px}
.ppick-list.is-open{display:block}
.ppick-opt{display:block; width:100%; text-align:left; padding:7px 11px; border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--ink)}
.ppick-opt:last-child{border-bottom:none}
.ppick-opt:hover, .ppick-opt.is-cur{background:var(--accent-soft); color:var(--accent)}
.ppick-opt .t{display:block; font-weight:500}
.ppick-opt .sub{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}
.ppick-opt.is-cur .sub{color:var(--accent)}
.ppick-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:20px; height:20px;
  border-radius:5px; display:grid; place-items:center; color:var(--ink-3)}
.ppick-clear:hover{background:var(--surface-2); color:var(--clay)}
.ppick-clear .icon{width:11px; height:11px}

/* ============ Suchtreffer ============ */
.sresult{display:flex; gap:12px; padding:11px 16px; width:100%; text-align:left;
  border-bottom:1px solid var(--line)}
.sresult:last-child{border-bottom:none}
.sresult:hover, .sresult:focus-visible{background:var(--accent-soft)}
.sresult .result-title{display:block; font-size:13.5px; font-weight:500}
.sresult .result-snip{display:block; font-size:12px; color:var(--ink-2); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sresult .result-snip mark{background:var(--amber-soft); color:var(--amber); border-radius:3px; padding:0 2px}
.sresult .result-meta{display:flex; gap:7px; align-items:center; margin-top:6px; flex-wrap:wrap}

/* ============ Notizen ============ */
.note-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px}
.note-pick{max-width:290px}
.linkbtn.pick{color:var(--accent); border-bottom-color:var(--accent-line)}
.viewsearch{width:210px; padding:7px 11px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:13px; outline:none}
.viewsearch:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* ============ Personen-Auswahl zum Tippen ============ */
.pepick{position:relative}
.pepick-in{width:100%}
.pepick-sep{padding:6px 11px 4px; font-family:var(--mono); font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.ppick-opt.is-new{color:var(--accent); font-weight:500}
.ppick-opt .role{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}
.ppick-opt.is-cur .role{color:var(--accent)}

/* ============ Feste Projektzuordnung im Projektkontext ============ */
.ppick.is-fixed{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:5px 0}
.ppick.is-fixed .chip{max-width:100%}

/* ============ Call-Detail ============ */
.callbar2.is-edit{border-color:var(--line-strong)}
.dot-static{width:9px; height:9px; border-radius:99px; background:var(--moss); flex:none}
tr[data-callopen]{cursor:pointer}
.callmeta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--ink-3)}

/* ============ Tastatur: aktiver Treffer ============ */
.sresult.is-cur, .ires.is-cur{background:var(--accent-soft)}
.sresult.is-cur{box-shadow:inset 3px 0 0 var(--accent)}
.ires.is-cur{box-shadow:inset 3px 0 0 var(--accent)}
.search-foot .kbd{margin-right:2px}

/* ============ Fokus auf Zeilen und Karten ============ */
tr[tabindex]:focus-visible, .know[tabindex]:focus-visible, [data-logopen][tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:-2px}
tr[tabindex]{cursor:pointer}

/* ============ Toast mit Rückgängig ============ */
.toast{gap:14px}
.toast-action{border:1px solid rgba(255,255,255,.28); padding:3px 10px; border-radius:99px;
  font-size:12px; color:inherit; pointer-events:auto}
.toast-action:hover{background:rgba(255,255,255,.14)}
.toast.is-on{pointer-events:auto}

/* Zweistufiges Löschen */
.linkbtn.is-arm{color:var(--clay); border-bottom-color:var(--clay); font-weight:600}

/* ============ Hinweis auf verdeckten Inhalt ============ */
.morehint{display:flex; align-items:center; gap:7px; padding:7px 13px; border-top:1px solid var(--line);
  background:var(--surface-2); font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
.morehint .icon{width:12px; height:12px}


/* ============ Mobil ============ */
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed; top:0; left:0; bottom:0; width:262px; height:100vh; z-index:140;
    flex-direction:column; align-items:stretch; overflow-y:auto; padding:18px 0 14px;
    border-right:1px solid var(--line); border-bottom:none;
    transform:translateX(-100%); transition:transform .2s ease}
  body.nav-open .rail{transform:none; box-shadow:var(--shadow-lg)}
  body.nav-open .navscrim{display:block}
  .navscrim{display:none; position:fixed; inset:0; z-index:135;
    background:color-mix(in srgb, var(--ink) 34%, transparent)}
  .rail .brand{padding:0 18px 16px}
  .rail .brand-sub, .rail .nav-label, .rail .rail-foot, .rail .navsep{display:block}
  .rail .nav{flex-direction:column; padding:0 10px; gap:2px}
  .nav-item{white-space:normal; padding:10px 12px; min-height:44px}
  .nav-count{margin-left:auto}

  .topbar{flex-wrap:nowrap; gap:8px; padding:10px 12px}
  .topbar .spacer{display:none}
  .capture{max-width:none; flex:1}
  .hamb{width:40px; height:40px}

  .page{padding:16px 14px 44px}
  .dashgrid{padding:14px 14px 40px; gap:12px}
  .filterbar, .callbar2, .scope-banner, .guide{margin-left:14px; margin-right:14px}

  /* Touchziele */
  .tbtn, .btn, .addbtn, .ibtn, .iok, .ix, .linkbtn{min-height:40px}
  .linkbtn{display:inline-flex; align-items:center}
  .addbtn.mini{width:40px; height:40px}
  .addbtn.mini .plus{width:34px; height:34px}
  .editbtn{width:38px; height:38px; opacity:1}
  .tcheck{width:22px; height:22px}
  .seg button{min-height:38px; padding:0 12px}
  .tab{min-height:40px}

  /* Tabellen als Karten */
  .dtable thead{display:none}
  .dtable, .dtable tbody, .dtable tr, .dtable td{display:block; width:auto}
  .dtable tr{border-bottom:1px solid var(--line); padding:11px 13px; position:relative}
  .dtable tr:last-child{border-bottom:none}
  .dtable td{border:none; padding:3px 0}
  .dtable td.tight, .dtable td.num{width:auto; white-space:normal}
  .dtable td:empty{display:none}
  .dtable tbody tr:hover{background:none}
  .scroll, .scroll.tall{max-height:none}
  .pgut{width:66px}
  .cols, .calllayout, .calwrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .qa{grid-template-columns:minmax(0,1fr)}
  .metrics{grid-template-columns:minmax(0,1fr)}
}

.view{display:none}
.view.is-active{display:block}


/* =====================================================================
   Ergänzungen für die echte Anwendung (ersetzen Inline-Styles des Prototyps)
   ===================================================================== */
[hidden]{display:none !important}
.sr-nur{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.flex1{flex:1}
.spacer{flex:1}
.icon.sm{width:13px; height:13px}
.icon.xs{width:11px; height:11px}
.icon.md{width:19px; height:19px}
.icon.akzent{color:var(--accent)}
.icon.leise{color:var(--ink-3)}
.icon.amber{color:var(--amber)}
.icon.moss{color:var(--moss)}
.icon.links{transform:rotate(180deg)}
.icon.runter{transform:rotate(90deg)}
.nav-item{text-decoration:none}
.brand{color:inherit; text-decoration:none}
.page.schmal{max-width:900px}
.page.mittel{max-width:1000px}
.page.weit{max-width:1100px}
.page.detail{max-width:1080px}
.page.oben{padding-bottom:0}
.page-head.ohne-abstand{margin-bottom:0}
.pad{padding:14px 16px}
.pad-s{padding:13px 15px}
.eckdaten{padding:14px 16px; display:flex; flex-direction:column; gap:12px}
.lesetext{padding:13px 15px; font-size:12.5px; color:var(--ink-2); line-height:1.6}
.hinweisbox{display:flex; gap:11px; padding:13px 16px; color:var(--amber); font-size:12.5px; align-items:flex-start}
.hinweisbox .icon{flex:none; margin-top:1px}
.abstand-u{margin-bottom:14px}
.abstand-u-l{margin-bottom:26px}
.abstand-o{margin-top:14px}
.trennzeile{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.trennzeile .linie{flex:1; height:1px; background:var(--line)}
.row.eng{gap:6px}
.row.umbruch{flex-wrap:wrap}
.row.oben{align-items:flex-start}
.feldbreit{width:250px; max-width:100%}
.feld-s{width:130px}
.feld-xs{width:72px}
.feld-zeit{width:64px}
.wsearch.gross{width:210px; padding:7px 11px; font-size:13px}
.capture.suchknopf{max-width:540px; cursor:pointer}
.capture.suchknopf .text{flex:1; text-align:left; color:var(--ink-3); font-size:13px}
.brand-mark.klein{width:24px; height:24px; font-size:12px; border-radius:6px}
.rail-foot .nutzer{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin-top:10px}
.rail-foot form{margin:0}
.scope{white-space:nowrap}
.scope b{font-weight:600}
.chip .icon{width:11px; height:11px}
.chip.klickbar{cursor:pointer}
.chip.klickbar:hover{border-color:var(--accent-line)}
.entry-type .icon{width:14px; height:14px}
.item-main.knopf{background:none; text-align:left}
.item-title.klein{font-size:12.5px}
.caret.rechts{margin-left:auto}
.avatar.klein{width:22px; height:22px; font-size:10px}
.drawer-head h2{font-size:17px; font-weight:600; margin-top:5px}
.drawer-head .kopf{flex:1; min-width:0}
.drawer-close{height:32px; padding:0 9px}
.origin .t{font-size:13px}
.origin .m{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px}
.origin .icon{color:var(--accent); flex:none; margin-top:2px}
.dfield .warn{font-size:11.5px; color:var(--amber)}
.inbox-text.leise{font-size:12px; color:var(--ink-3)}
.editor-toolsep{width:1px; height:18px; background:var(--line)}
.etoolbar .card-note{margin-left:auto}
.efoot .card-note{margin-left:auto}
.modal-foot .card-note{margin-left:auto}
.linkbtn.inline-block{margin-top:7px; display:inline-block}
.newitem .check{opacity:.3}
.newrow .tcheck{opacity:.3}
.empty.links{text-align:left; padding:0}
.empty.eng{padding:10px 12px}
.ppick-wrap{display:inline-block; min-width:230px}
.plain.hoch{min-height:220px}
.widget.begrenzt{max-width:760px}
.kopf-titel{flex:1; min-width:0}
.dtitle-input.gross{font-size:21px}
.fehlerbox{padding:14px 16px; color:var(--clay); font-size:12.5px}

/* Richtext: echte Bilder mitten im Text */
.ebody img, .rich img, .docbody img, .flowbody img{display:block; max-width:min(100%,520px); height:auto;
  margin:10px 0; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); cursor:zoom-in}
.ebody img.laedt{opacity:.45}
.ebody h3, .rich h3, .docbody h3, .flowbody h3{font-size:14.5px; margin:12px 0 6px}
.ebody ul, .ebody ol{margin:0 0 8px; padding-left:20px}
.ebody pre, .rich pre, .docbody pre, .flowbody pre{font-family:var(--mono); font-size:12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; overflow-x:auto; white-space:pre}
.ebody blockquote, .rich blockquote, .docbody blockquote, .flowbody blockquote{margin:6px 0 10px; padding-left:12px;
  border-left:3px solid var(--line-strong); color:var(--ink-2)}
.ebody a, .rich a, .docbody a, .flowbody a{border-bottom:1px solid var(--accent-line)}
.ebody.ziel{box-shadow:inset 0 0 0 2px var(--accent)}
.rich{font-size:14px; line-height:1.75; color:var(--ink-2)}
.rich p{margin-bottom:10px}
.rich ul, .rich ol{margin:0 0 10px; padding-left:19px}
.rich code{font-family:var(--mono); font-size:12.5px; background:var(--surface-2); padding:1px 5px; border-radius:4px}
.shotbox > div img{display:block; width:100%; height:auto}
.shotbox .cap{padding:9px 13px; font-size:12px; color:var(--ink-3); font-family:var(--mono)}

/* Kalender-Kopf mit Monatswechsel */
.calnav{display:flex; align-items:center; gap:6px}
.calnav .card-title{min-width:130px; text-align:center}
.calev.notiz{border-left-color:var(--line-strong)}
.calev.termin{border-left-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.calev.faellig{border-left-color:var(--clay); background:var(--clay-soft); color:var(--clay)}
.calev.wiedervorlage{border-left-color:var(--amber); background:var(--amber-soft); color:var(--amber)}
.calmore{font-size:10.5px; color:var(--ink-3); font-family:var(--mono)}

/* Anmeldung und Fehlerseite */
.solo{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.solo-box{width:min(380px,100%)}
.solo-box .brand{justify-content:center; padding:0 0 18px}
.solo-box .card{padding:20px 20px 18px}
.solo-box h1{font-size:18px; margin-bottom:14px}
.solo-box form{display:flex; flex-direction:column; gap:13px}
.meldung{padding:9px 12px; border-radius:8px; font-size:12.5px; background:var(--clay-soft); color:var(--clay);
  border:1px solid var(--clay-line)}
.fussnote{text-align:center; margin-top:14px; font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}

/* Zweiter Faktor */
.solo-box .card > p + p, .solo-box .card > p + ul{margin-top:10px}
.solo-box .card > .btn{margin-top:14px; width:100%; justify-content:center}
.solo-hinweis{font-size:12px; color:var(--ink-3); line-height:1.55}
.solo-schritte{padding-left:18px; font-size:12.5px; color:var(--ink-2); line-height:1.55; display:flex; flex-direction:column; gap:4px}
.qr{display:block; width:220px; max-width:100%; height:auto; margin:2px auto; border-radius:8px; background:#fff; padding:6px}
.solo-details summary{cursor:pointer; font-size:12px; color:var(--accent)}
.geheimnis{margin:8px 0 4px; font-size:13px; letter-spacing:.04em; word-break:break-word; user-select:all}
.code-eingabe{font-family:var(--mono); font-size:18px; letter-spacing:.18em; text-align:center}
.codeliste{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; padding:12px 14px;
  border:1px dashed var(--line-strong); border-radius:8px; font-size:14px; user-select:all}
.meldung.ist-wichtig{background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line)}
.meldung.ist-info{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line)}

/* Teilnehmer eines Calls */
.teilnehmerfeld{grid-column:1 / -1}
.teilnehmer{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px; min-height:24px; align-items:center}
.teilnehmer-chip{padding-right:3px; gap:6px}
.teilnehmer-kunde{font-family:var(--sans); font-size:10.5px; color:var(--amber); background:var(--amber-soft);
  border:1px solid var(--amber-line); border-radius:99px; padding:0 6px}
.teilnehmer-x{display:grid; place-items:center; width:18px; height:18px; border-radius:99px; color:var(--ink-3)}
.teilnehmer-x:hover{background:var(--clay-soft); color:var(--clay)}
.teilnehmer-karte + .teilnehmer-karte{border-top:1px solid var(--line)}

/* Speicherstatus */
.gespeichert.fehler{color:var(--clay)}
.laden{padding:40px 16px; text-align:center; color:var(--ink-3); font-size:12.5px}

/* Links, die wie Kacheln und Zeilen aussehen */
a.know, a.mini, a.item, a.ctx-item{color:inherit; text-decoration:none}
a.tab, a.ibtn, a.tbtn{text-decoration:none; color:var(--ink-2)}
a.tab.is-active{color:var(--ink)}
a.card-title{color:var(--ink)}
a.card-title:hover{color:var(--accent)}
.dfield-value a{border-bottom:1px solid var(--accent-line)}
.toast.ist-fehler{background:var(--clay); color:#fff}
.toast .icon{flex:none}
.leise{color:var(--ink-3)}
.calday.is-out{pointer-events:none}
.ctx-item .avatar{margin-top:1px}
.drawer .editor .etoolbar .card-note{display:none}
.modal-body .editor .ebody{min-height:120px}
.cnhint .icon{display:block}
.result-title mark, .ires-t mark, .inbox-text mark{background:var(--amber-soft); color:var(--amber); border-radius:3px; padding:0 2px}
.page-head > div:first-child{min-width:min(100%, 280px)}
@media (max-width:820px){
  .page-head > div:first-child{flex:1 1 100%}
  .capture .kbd{display:none}
  .scope > span:not(.scope-dot){display:none}
  .scope{padding:0 12px}
  .callbar2 .timer{margin-left:auto}
}

/* Mein Zugang und Benutzer */
.modal.ist-bestaetigung{z-index:150; background:color-mix(in srgb, var(--ink) 30%, transparent)}
.modal-box.schmal{max-width:400px}
.kontoliste{display:grid; grid-template-columns:max-content 1fr; gap:10px 22px; padding:14px 16px; align-items:center; font-size:13.5px}
.kontoliste dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.kontoliste dd{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0}
.einstellungen{display:flex; flex-direction:column}
.einstellung{display:flex; align-items:center; gap:16px; padding:13px 16px; border-top:1px solid var(--line)}
.einstellung:first-child{border-top:0}
.einstellung > div{flex:1; min-width:0}
.einstellung .t{font-weight:600; font-size:13.5px}
.einstellung .sub{font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.5}
.einstellung button:disabled{opacity:.45; cursor:not-allowed}
.dtable .warn{color:var(--clay); font-weight:600}
@media (max-width:560px){
  .kontoliste{grid-template-columns:1fr; gap:4px}
  .kontoliste dd{margin-bottom:8px}
  .einstellung{flex-direction:column; align-items:flex-start; gap:8px}
}

/* Uhrzeiten im Kalender */
.calzeit{font-family:var(--mono); font-size:9.5px; opacity:.75}
.zeitspanne{font-size:12px; color:var(--ink-3); margin-right:2px}
.zugangsdaten{padding:12px 14px; border:1px dashed var(--line-strong); border-radius:8px}
.zugangsdaten dd{user-select:all; word-break:break-all}
.zugangsdaten dd.gross{font-size:15px; letter-spacing:.04em}