/* Planion – web UI. A well-lit workbench in the evening: calm, technical, dense. See docs/DESIGN.md. */

:root {
  --bg: #1A1F29;
  --bg-sidebar: #151A22;
  --surface: #222835;
  --surface-raised: #2A3140;
  --hover: #232A37;
  --border: #333B4C;
  --text: #E7EAF0;
  --text-muted: #8E97AA;
  --text-faint: #5E6779;
  --accent: #F5B83D;
  --on-accent: #1A1F29;
  --prio-critical: #F2727F;
  --prio-high: #F59E4C;
  --prio-normal: #6FA8F5;
  --prio-low: #7E889B;
  --in-progress: #C38FF0;
  --success: #7FCB6E;
  --danger: #F2727F;

  --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  --r: 6px;
  --r-pop: 10px;
  --sidebar-w: 248px;
  --detail-w: 400px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: calc(13px * var(--fs, 1))/1.45 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: 0; }
h1 { font-size: calc(28px * var(--fs, 1)); line-height: 1.2; }
h2 { font-size: calc(20px * var(--fs, 1)); line-height: 1.3; }
h3 { font-size: calc(13px * var(--fs, 1)); }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--font-mono); }
[hidden] { display: none !important; }
input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid #5A6478; border-radius: 50%; background: var(--bg); cursor: pointer; display: inline-grid; place-content: center; transition: border-color .12s; vertical-align: middle; }
input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; }
input[type=radio]:checked { border-color: var(--accent); }
input[type=radio]:checked::before { transform: scale(1); }
input[type=radio]:hover:not(:disabled) { border-color: var(--accent); }
input[type=radio]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=radio]:disabled { opacity: .45; cursor: default; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.faint { color: var(--text-faint); }
.muted { color: var(--text-muted); }
.danger { color: var(--danger) !important; }
.pos { color: var(--success); }
.neg { color: var(--danger); }
.grow { flex: 1 1 auto; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hint { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
small.hint { display: block; margin-top: 4px; }
kbd {
  font-size: calc(11px * var(--fs, 1)); color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px;
  padding: 0 5px; line-height: 16px; background: transparent;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 6px 10px; border-radius: var(--r); }
.skip-link:focus { left: 8px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ shell */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
}
body.has-detail .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--detail-w-user, var(--detail-w)); }
/* Drag handle on the detail panel's left edge (wide layout only; as an overlay the panel keeps its width). */
.detail-resize { display: none; position: fixed; top: 0; bottom: 0; right: calc(var(--detail-w-user, var(--detail-w)) - 4px); width: 8px; cursor: col-resize; z-index: 15; outline: none; }
.detail-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .12s; }
.detail-resize:hover::after, .detail-resize:focus-visible::after, body.detail-resizing .detail-resize::after { background: var(--accent); }
body.has-detail .detail-resize { display: block; }
body.detail-resizing { cursor: col-resize; user-select: none; }

.main { overflow-y: auto; overflow-x: hidden; min-width: 0; outline: none; }
.boot { padding: 40px; color: var(--text-muted); }

/* ------------------------------------------------------------------ sidebar */

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  padding: 14px 10px 10px;
}
.brand { display: flex; align-items: center; gap: 10px; font: 600 calc(15px * var(--fs, 1)) var(--font-display); padding: 2px 8px 12px; }
.brand-mark { width: 12px; height: 12px; background: var(--accent); transform: rotate(45deg); border-radius: 2px; }

.search {
  display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; padding: 0 8px;
  height: 30px; border: 1px solid var(--border); border-radius: var(--r); color: var(--text-faint); background: var(--bg);
}
.search:focus-within { border-color: var(--accent); }
.search input[type=search] { flex: 1; padding: 0; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text); height: 100%; }
.search input::placeholder { color: var(--text-faint); }
.search input::-webkit-search-cancel-button { filter: invert(.6); }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px;
  border-radius: var(--r); color: var(--text-muted); text-decoration: none; min-width: 0;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--surface-raised); color: var(--text); }
.nav-item .icon { flex: none; }
.nav-item > span:not(.count) { flex: 1; min-width: 0; }
.nav-item.muted { color: var(--text-faint); }
.count { margin-left: auto; font-size: calc(12px * var(--fs, 1)); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.count-alert { color: var(--danger); }
.nav-section {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 4px; padding: 0 2px 0 8px; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); font-weight: 600;
}
.nav-projects { overflow-y: auto; min-height: 40px; flex: 0 1 auto; }
.nav-empty { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); padding: 4px 8px; }
.archived summary { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); padding: 6px 8px; cursor: pointer; list-style: none; }
.archived summary::-webkit-details-marker { display: none; }
.archived summary::before { content: "›"; display: inline-block; width: 12px; transition: transform .15s; }
.archived[open] summary::before { transform: rotate(90deg); }
.sidebar-spacer { flex: 1 1 8px; min-height: 8px; }
.nav-settings { margin-top: 6px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-faint)); flex: none; }
.dot-lg { width: 12px; height: 12px; } /* project title: the color dot at text size, inline before the name */
.title-row > .dot-lg { margin-right: -2px; }

/* Stempeluhr */
.clock {
  border-top: 1px solid var(--border);
  margin: 0 -10px; padding: 12px 18px 12px;
  --state: var(--text-faint);
}
.clock.is-working { --state: var(--accent); }
.clock.is-break { --state: var(--in-progress); }
.clock-row { display: flex; align-items: baseline; gap: 8px; }
.clock-time { font-size: calc(30px * var(--fs, 1)); line-height: 1.1; color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: -0.5px; }
.clock-time:hover { color: var(--state); }
.clock-target { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.clock-state { color: var(--state); font-size: calc(12px * var(--fs, 1)); margin-top: 2px; }
.clock.is-out .clock-state { color: var(--text-muted); }
.clock-advice { color: var(--danger); font-size: calc(12px * var(--fs, 1)); margin-top: 6px; }
.progress { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.progress > span { display: block; height: 100%; background: var(--state, var(--accent)); border-radius: 2px; transition: width .5s linear; }
.clock-actions { display: flex; gap: 6px; margin-top: 10px; }
.clock-actions .btn { flex: 1; }

/* ------------------------------------------------------------------ buttons & controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--r); border: 1px solid transparent;
  background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; text-decoration: none; font-weight: 500;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover, var(--accent)); }
.btn-secondary { background: var(--surface-raised); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: #48526A; }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--on-accent); font-weight: 600; }
.btn-ghost-danger { color: var(--danger); padding-left: 8px; }
.btn-ghost-danger:hover { background: rgba(242, 114, 127, .1); }
.btn-small { height: 26px; padding: 0 9px; font-size: calc(12px * var(--fs, 1)); }
.btn-large { height: 36px; padding: 0 18px; font-size: calc(14px * var(--fs, 1)); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--r); border: 0; background: transparent;
  color: var(--text-muted); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.toggle-btn.active { color: var(--accent); }
.icon { display: block; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=number], input[type=date], input[type=time], input:not([type]), select, textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); padding: 0 9px; height: 30px; min-width: 0;
}
textarea { padding: 6px 9px; height: auto; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input[type=date], input[type=time] { color-scheme: dark; font-variant-numeric: tabular-nums; }
select { padding-right: 4px; }
.mono-input { font-family: var(--font-mono); }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span:first-child { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); display: flex; align-items: center; gap: 6px; }
.field-value { color: var(--text); font-size: calc(12px * var(--fs, 1)); margin-left: auto; }
.check-field { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer; }
.check-field input { margin-top: 2px; }
.check-field .hint { display: block; margin-top: 1px; }

.segments { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.seg {
  border: 0; background: transparent; color: var(--text-muted); padding: 0 11px; height: 28px; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
}
.seg + .seg { border-left: 1px solid var(--border); }
.seg:hover { color: var(--text); background: var(--hover); }
.seg.active { background: var(--surface-raised); color: var(--text); font-weight: 600; }
.seg-inprogress.active { color: var(--in-progress); }
.seg-done.active { color: var(--accent); }
.seg-prio.active { color: var(--prio); box-shadow: inset 0 -2px 0 var(--prio); }
.segments-small .seg { height: 26px; padding: 0 9px; font-size: calc(12px * var(--fs, 1)); }

.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer; font-size: calc(12px * var(--fs, 1)); user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { width: 28px; height: 16px; border-radius: 8px; background: var(--border); position: relative; transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; }
.switch input:checked + .switch-track { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.switch input:checked + .switch-track::after { transform: translateX(12px); background: var(--accent); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 11px; background: var(--surface-raised); color: var(--text); font-size: calc(12px * var(--fs, 1)); white-space: nowrap; border: 0;
}
.chip-faint { color: var(--text-muted); background: transparent; border: 1px solid var(--border); }
.chip-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.chip-prio { color: var(--prio); }
.chip-btn { cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); }
.chip-btn:hover:not(:disabled) { color: var(--text); border-color: #48526A; }
.chip-btn:disabled { opacity: .4; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.badge { font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; }
.kind-badge {
  font-size: calc(11px * var(--fs, 1)); font-weight: 600; padding: 1px 6px; border-radius: 4px;
  background: var(--surface-raised); color: var(--text-muted); white-space: nowrap; flex: none;
}
.kind-gitlab { color: #F59E4C; background: rgba(245, 158, 76, .12); }
.kind-polarion { color: #C38FF0; background: rgba(195, 143, 240, .12); }
.kind-github { color: #E7EAF0; background: rgba(231, 234, 240, .08); }
.kind-jira { color: #6FA8F5; background: rgba(111, 168, 245, .12); }
.kind-confluence { color: #5CC8B8; background: rgba(92, 200, 184, .12); }
.kind-docs { color: #7FCB6E; background: rgba(127, 203, 110, .12); }

/* ------------------------------------------------------------------ views */

.view { padding: 28px 32px 64px; }
.view-head { margin-bottom: 18px; }
.title-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; row-gap: 8px; }
.title-row h1 { min-width: 0; }
.view-sub { color: var(--text-muted); font-size: calc(13px * var(--fs, 1)); padding-top: 8px; }
.view-desc { color: var(--text-muted); margin-top: 8px; max-width: 760px; white-space: pre-wrap; }
.empty { color: var(--text-muted); max-width: 520px; margin: 48px auto 0; padding: 0 16px; text-align: center; line-height: 1.5; }
.card .empty, .modal .empty, .detail .empty, .notes-list .empty, .menu .empty { margin: 20px auto 12px; }
.empty a { color: var(--accent); }

.link-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 9px 0 4px; max-width: 320px;
  border: 1px solid var(--border); border-radius: var(--r); color: var(--text); text-decoration: none; background: transparent; cursor: pointer;
}
.link-chip:hover { background: var(--hover); border-color: #48526A; }
.path-chip { color: var(--text-muted); padding-left: 8px; font-size: calc(12px * var(--fs, 1)); }

.tabs-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 9px; color: var(--text-muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab-count { color: var(--text-faint); font-weight: 400; font-size: calc(12px * var(--fs, 1)); }

/* Quick add */
.quick-add { margin-bottom: 18px; }
.quick-row {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
}
.quick-row:focus-within { border-color: var(--accent); }
.quick-plus { color: var(--accent); display: flex; }
.quick-row input { flex: 1; border: 0; background: transparent; height: 100%; padding: 0; font-size: calc(14px * var(--fs, 1)); }
.quick-row input:focus { outline: none; }
.quick-help-btn { font-weight: 700; font-size: calc(13px * var(--fs, 1)); }
.quick-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; margin-top: 8px; }
.quick-preview:empty { margin-top: 0; }
.quick-enter { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); margin-left: 4px; }
.quick-help {
  margin-top: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop);
  color: var(--text-muted); font-size: calc(12px * var(--fs, 1));
}
.quick-help > code { color: var(--text); }
.quick-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; }
.quick-help dt code, .quick-help > code { background: var(--surface-raised); padding: 1px 5px; border-radius: 4px; }
.quick-help dd { margin: 0; }

/* Todo list */
.group { margin-bottom: 14px; }
.group-head { font-size: calc(13px * var(--fs, 1)); font-weight: 600; display: flex; align-items: baseline; gap: 8px; padding: 6px 0 6px; color: var(--text); }
.group-count { color: var(--text-faint); font-weight: 400; }
.group-overdue .group-head { color: var(--danger); }
.group-progress .group-head { color: var(--in-progress); }

.todo-row {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 10px 8px 14px; border-radius: var(--r); cursor: pointer;
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
  max-height: 200px;
}
.todo-row::before, .note-hit::before, .note-item::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--proj, transparent);
}
.todo-row:hover { background: var(--hover); }
.group-progress .meta-progress { display: none; }
.todo-row.selected { background: var(--surface-raised); }
.todo-row:focus-visible { outline-offset: -2px; }

.check {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--prio, var(--text-muted)); background: transparent; color: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.check:hover { background: color-mix(in srgb, var(--prio) 18%, transparent); color: var(--prio); }
.is-progress .check { border-style: dashed; }
.is-done .check, .todo-row.completing .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.todo-row.reopening .check { background: transparent; color: transparent; }

.todo-main { flex: 1; min-width: 0; }
.todo-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.title-text { font-size: calc(15px * var(--fs, 1)); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; transition: color .2s ease; }
.todo-id { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); flex: none; }
.is-done .title-text { color: var(--text-muted); }
.todo-row.completing .title-text { text-decoration: line-through; color: var(--text-faint); }
.todo-row.leaving { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }

.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); min-width: 0; }
.meta-project { display: inline-flex; align-items: center; gap: 5px; }
.meta-due.overdue { color: var(--danger); }
.meta-icon { display: inline-flex; color: var(--text-muted); }
.meta-link:hover { color: var(--accent); }
.meta-progress { color: var(--in-progress); }
.meta-result { display: inline-flex; align-items: center; gap: 5px; max-width: min(560px, 100%); min-width: 0; color: var(--text-muted); }
.meta-result .icon { flex: none; color: var(--in-progress); }
.tag { color: var(--text-muted); }

.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 3px; flex: none; }
.signal i { display: block; width: 3px; background: var(--border); border-radius: 1px; }
.signal i:nth-child(1) { height: 5px; }
.signal i:nth-child(2) { height: 8px; }
.signal i:nth-child(3) { height: 11px; }
.signal i:nth-child(4) { height: 14px; }
.signal i.on { background: var(--prio); }
.is-done .signal { opacity: .45; }

.note-hit {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; border-radius: var(--r);
  text-decoration: none; color: var(--text); position: relative;
}
.note-hit:hover { background: var(--hover); }
.note-hit .meta-project, .note-hit .faint { font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); }
.list-foot { padding: 8px 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ detail panel */

.detail {
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  box-shadow: inset 0 3px 0 var(--proj, transparent);
}
.detail-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 4px 20px; }
.save-state { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.detail-body { overflow-y: auto; padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.detail-body > * { flex-shrink: 0; }
.detail-title {
  font: 600 calc(20px * var(--fs, 1))/1.3 var(--font-display); background: transparent; border: 1px solid transparent; padding: 4px 6px; margin: 0 -7px;
  resize: none; overflow: hidden; color: var(--text);
}
.detail .detail-title { background: transparent; }
.detail-title:hover { border-color: var(--border); }
.detail .detail-title:focus { border-color: var(--accent); background: var(--bg); }
.detail .segments { display: flex; }
.detail .segments .seg { flex: 1; justify-content: center; padding: 0 6px; }
.detail input, .detail select, .detail textarea { background: var(--bg); }
.date-combo { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 6px; align-items: center; }
.parse-hint { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); min-height: 0; }
.parse-hint:empty { display: none; }
#d-rem-chips { margin-top: 2px; }
.input-with-btn { display: flex; gap: 6px; }
.input-with-btn input { flex: 1; }
.field-result > span:first-child { color: var(--in-progress); }
.detail-meta { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.detail .btn-ghost-danger { align-self: flex-start; }

/* ------------------------------------------------------------------ notes */

.notes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.notes-list-pane { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.notes-tools { display: flex; gap: 6px; }
.notes-tools input { flex: 1; }
.notes-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 230px); overflow-y: auto; }
.note-item {
  display: block; padding: 8px 10px 8px 14px; border-radius: var(--r); text-decoration: none; color: var(--text); position: relative;
}
.note-item:hover { background: var(--hover); }
.note-item.active { background: var(--surface-raised); }
.note-item-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.note-item-title .pin { color: var(--accent); display: flex; }
.note-item-snippet { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); margin-top: 1px; }
.note-editor { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.editor-empty { padding-top: 8px; }
.note-head { display: flex; flex-direction: column; gap: 8px; }
.note-title { font: 600 calc(20px * var(--fs, 1)) var(--font-display) !important; height: 40px !important; background: transparent !important; border-color: transparent !important; padding: 0 6px !important; margin: 0 -7px; }
.note-title:hover { border-color: var(--border) !important; }
.note-title:focus { border-color: var(--accent) !important; }
.note-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-tools select { max-width: 220px; }
.note-content { min-height: calc(100vh - 300px); font-size: calc(14px * var(--fs, 1)); line-height: 1.6; padding: 12px 14px; }
.note-preview { min-height: 200px; padding: 4px 2px; }

.markdown { font-size: calc(14px * var(--fs, 1)); line-height: 1.6; overflow-wrap: anywhere; }
.markdown > * + * { margin-top: 10px; }
.markdown h2 { font-size: calc(20px * var(--fs, 1)); margin-top: 18px; }
.markdown h3 { font-size: calc(16px * var(--fs, 1)); margin-top: 16px; }
.markdown h4, .markdown h5 { font-size: calc(14px * var(--fs, 1)); margin-top: 14px; }
.markdown a { color: var(--accent); }
.markdown code { background: var(--surface-raised); border-radius: 4px; padding: 1px 5px; font-size: calc(12.5px * var(--fs, 1)); }
.markdown pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; overflow-x: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown ul, .markdown ol { padding-left: 22px; margin-bottom: 0; }
.markdown li + li { margin-top: 2px; }
.markdown li.task { list-style: none; margin-left: -18px; display: flex; gap: 8px; align-items: baseline; }
.markdown .task-box { width: 12px; height: 12px; border: 1.5px solid var(--text-muted); border-radius: 50%; flex: none; transform: translateY(1px); }
.markdown .task.checked .task-box { background: var(--accent); border-color: var(--accent); }
.markdown .task.checked { color: var(--text-muted); text-decoration: line-through; }
.markdown blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-muted); }
.markdown hr { border: 0; border-top: 1px solid var(--border); }

/* Aufgabe → Beschreibung: rendered until clicked (then the textarea); same box as the textarea, so nothing jumps */
.desc-field > span:first-child .desc-edit { margin-left: auto; }
.markdown.desc-view {
  padding: 6px 9px; border: 1px solid transparent; border-radius: var(--r); cursor: text;
  font-size: calc(13px * var(--fs, 1)); line-height: 1.55; transition: border-color .12s;
}
.markdown.desc-view:hover { border-color: var(--border); }
.markdown.desc-view:focus-visible { outline: none; border-color: var(--accent); }
.markdown.desc-view > * + * { margin-top: 6px; }
.markdown.desc-view > :first-child { margin-top: 0; }
.markdown.desc-view h2 { font-size: calc(16px * var(--fs, 1)); margin-top: 12px; }
.markdown.desc-view h3 { font-size: calc(14px * var(--fs, 1)); margin-top: 12px; }
.markdown.desc-view h4, .markdown.desc-view h5 { font: 600 calc(13px * var(--fs, 1))/1.4 var(--font-display); margin: 10px 0 0; }
.markdown.desc-view pre { background: var(--bg); margin-bottom: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.markdown.desc-view a { cursor: pointer; }

/* ------------------------------------------------------------------ cards, tables */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 18px 20px; margin-bottom: 16px; }
.card > h2 { font-size: calc(15px * var(--fs, 1)); margin-bottom: 12px; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 7px 10px; border-bottom: 1px solid rgba(51, 59, 76, .55); vertical-align: middle; }
.table .num { text-align: right; }
.table .actions { text-align: right; white-space: nowrap; width: 1%; }
.table tbody tr:hover { background: var(--hover); }
.table tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--border); }
.table input, .table select { height: 28px; width: 100%; background: var(--bg); }
.table input[type=time] { width: 96px; }
.entries .note-cell { color: var(--text-muted); max-width: 260px; }

.running-badge { color: var(--accent); font-family: var(--font-text); font-size: calc(12px * var(--fs, 1)); }
.kind { font-size: calc(12px * var(--fs, 1)); }
.kind-work { color: var(--accent); }
.kind-break { color: var(--in-progress); }
.report tbody tr { cursor: pointer; }
.report tbody tr.weekend td { color: var(--text-faint); }
.report tbody tr.future td { color: var(--text-faint); }
.report tbody tr.today td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.report td a { text-decoration: none; }
.report td.daytype { color: var(--in-progress); }
.warn-icon { color: var(--danger); display: inline-flex; }

/* ------------------------------------------------------------------ time */

.balance-chip { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-muted); }
.balance-chip b { font-size: calc(18px * var(--fs, 1)); font-weight: 600; }
.time-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager { display: inline-flex; align-items: center; gap: 2px; }
.period { font-weight: 600; font-family: var(--font-display); font-size: calc(15px * var(--fs, 1)); }

.day-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.day-grid { margin-bottom: 16px; }
.day-grid .card { margin-bottom: 0; }
.clock-card { --state: var(--text-faint); }
.clock-card.is-working { --state: var(--accent); }
.clock-card.is-break { --state: var(--in-progress); }
.big-clock { font-size: calc(56px * var(--fs, 1)); font-weight: 600; line-height: 1; letter-spacing: -1px; }
.clock-card .clock-state { font-size: calc(13px * var(--fs, 1)); margin-top: 8px; color: var(--state); }
.clock-card.is-out .clock-state { color: var(--text-muted); }
.progress-lg { height: 6px; border-radius: 3px; }
.clock-card .clock-actions { margin-top: 16px; }
.clock-card .clock-actions .btn { flex: 0 1 auto; }
.advice { color: var(--danger); font-size: calc(12px * var(--fs, 1)); margin-top: 8px; }
.stamp-at { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.stamp-at summary { cursor: pointer; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.stamp-at summary:hover { color: var(--text); }
.stamp-at-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.stamp-at-form input[type=time] { width: 92px; }
.stamp-at-form input[type=date] { width: 132px; }

.facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.facts dt { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.facts dd { margin: 2px 0 0; font-size: calc(18px * var(--fs, 1)); font-weight: 600; }
.day-attrs { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; }

.warnings { border: 1px solid rgba(242, 114, 127, .35); background: rgba(242, 114, 127, .07); border-radius: var(--r-pop); padding: 10px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.warnings p { color: var(--danger); display: flex; gap: 8px; align-items: baseline; }
.warnings p .icon { flex: none; transform: translateY(2px); }
.warnings a { color: var(--danger); }
.warnings-inline { color: var(--danger); display: flex; gap: 8px; align-items: center; }

.timeline { position: relative; padding-bottom: 20px; }
.tl-track { position: relative; height: 22px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tl-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
.tl-work { background: var(--accent); }
.tl-break { background: var(--in-progress); }
.tl-running { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(26, 31, 41, .25) 6px 12px); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .7; }
.tl-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.tl-tick { position: absolute; transform: translateX(-50%); font-size: calc(11px * var(--fs, 1)); color: var(--text-faint); font-family: var(--font-mono); }
.tl-tick:first-child { transform: none; }
.tl-tick:last-child { transform: translateX(-100%); }
.legend { display: flex; gap: 16px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); margin-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lg-work { background: var(--accent); }
.lg-break { background: var(--in-progress); }

.add-entry { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.add-entry h3 { margin-bottom: 10px; }
.add-entry-grid { display: grid; grid-template-columns: 140px 100px 100px 110px minmax(120px, 1fr) minmax(140px, 1.5fr) auto; gap: 10px; align-items: end; }

.stat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat h3 { color: var(--text-muted); font-weight: 600; font-size: calc(12px * var(--fs, 1)); font-family: var(--font-text); }
.stat-value { font-size: calc(28px * var(--fs, 1)); font-weight: 600; margin: 6px 0 4px; }

/* ------------------------------------------------------------------ settings */

.settings-section h2 { font-size: calc(15px * var(--fs, 1)); margin-bottom: 14px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-bottom: 10px; }
.targets { display: flex; gap: 8px; flex-wrap: wrap; }
.target { display: flex; flex-direction: column; gap: 3px; align-items: center; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.target input { width: 64px; text-align: center; }
.settings-grid + .check-field, .field + .settings-grid { margin-top: 12px; }
.inline-field { display: flex; align-items: center; gap: 8px; }
.inline-field .check-field { padding-right: 0; }
.small-input { width: 70px; }
.settings-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--border); margin-bottom: 16px; z-index: 2; }
.copy-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.copy-line code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 9px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); font-size: calc(12px * var(--fs, 1)); }
.copy-block { display: flex; align-items: flex-start; gap: 8px; }
.copy-block pre { flex: 1; margin: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); font-size: calc(12px * var(--fs, 1)); overflow-x: auto; }
.mcp-register { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.mcp-output { margin: 8px 0 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); font-size: calc(12px * var(--fs, 1)); white-space: pre-wrap; }
.settings-section .field { margin-bottom: 12px; }
.settings-section > .hint { margin-bottom: 14px; }
.inline-field { margin-bottom: 12px; }
.about { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.about dt { color: var(--text-muted); }
.about dd { margin: 0; overflow-wrap: anywhere; font-size: calc(12px * var(--fs, 1)); }

/* ------------------------------------------------------------------ modal, toast, misc */

.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 13, 18, .6); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; z-index: 50; }
.modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); display: flex; flex-direction: column; max-height: 80vh; }
.modal-wide { max-width: 620px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 6px 20px; }
.modal-body { padding: 10px 20px 16px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); justify-content: flex-end; }
.modal-foot .grow { flex: 1; }
.confirm-text { color: var(--text); line-height: 1.5; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form input, .form textarea, .form select { background: var(--bg); }
.swatches { display: flex; gap: 8px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px var(--surface); }
.swatch.selected { border-color: var(--text); }
.links-list { display: flex; flex-direction: column; gap: 4px; }
.link-row { display: grid; grid-template-columns: auto minmax(0, 160px) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 4px 4px 8px; border: 1px solid var(--border); border-radius: var(--r); }
.link-row a { text-decoration: none; }
.link-row a:hover { color: var(--accent); }
.link-url { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.link-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-top: 6px; }

/* Messages: card, thin bar in the kind's color, actions, close, remaining-time line (hover pauses); corner from the settings. */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toasts[data-pos="top-right"] { top: 16px; bottom: auto; flex-direction: column-reverse; }
.toasts[data-pos="bottom-left"] { left: 16px; right: auto; }
.toasts[data-pos="top-left"] { top: 16px; bottom: auto; left: 16px; right: auto; flex-direction: column-reverse; }
.toast {
  --kind: var(--prio-normal);
  position: relative; overflow: hidden; display: flex; gap: 10px; align-items: flex-start; pointer-events: auto;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 12px 8px 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: opacity .14s ease-out;
}
.toast-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kind); }
.toast-error { --kind: var(--danger); }
.toast-reminder { --kind: var(--accent); }
.toast-icon { display: inline-flex; color: var(--kind); padding-top: 1px; flex: none; }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-weight: 600; margin-bottom: 2px; color: var(--text); }
.toast-msg { color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.toast-actions { display: flex; gap: 6px; margin-top: 8px; }
.toast-close { width: 24px; height: 24px; margin-top: -2px; }
.toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--kind) 55%, transparent); transform-origin: left center; animation: wb-toast-timer var(--toast-ms, 6s) linear forwards; }
.toast:hover .toast-timer, .toast:focus-within .toast-timer { animation-play-state: paused; }
.toast.leaving { opacity: 0; }
@keyframes wb-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes wb-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .toast { animation: wb-toast-in 160ms ease-out; } }

.offline { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: var(--danger); color: var(--on-accent); padding: 6px 14px; border-radius: 0 0 var(--r) var(--r); z-index: 70; font-weight: 600; }

.nav-toggle { display: none; position: fixed; top: 10px; left: 10px; z-index: 30; background: var(--surface); border: 1px solid var(--border); }
.nav-scrim { display: none; }

/* ------------------------------------------------------------------ narrower windows */

@media (max-width: 1240px) {
  body.has-detail .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  body.has-detail .detail-resize { display: none; }
  .detail { position: fixed; top: 0; right: 0; bottom: 0; width: var(--detail-w); max-width: 100vw; z-index: 20; border-left: 1px solid var(--border); }
  .view { padding: 24px 24px 64px; }
  .day-grid { grid-template-columns: 1fr; }
  .add-entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .app, body.has-detail .app { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: inline-flex; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(10, 13, 18, .5); z-index: 35; }
  .view { padding: 56px 16px 64px; }
  .notes { grid-template-columns: 1fr; }
  .notes-list-pane { position: static; }
  .notes-list { max-height: 240px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-attrs, .settings-grid, .stat-cards { grid-template-columns: 1fr; }
  .add-entry-grid { grid-template-columns: 1fr 1fr; }
  .detail { width: 100vw; }
  .link-add { grid-template-columns: 1fr; }
  .link-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .link-row .link-url { display: none; }
}

/* ------------------------------------------------------------------ links (Linksammlung) */

.kind-custom { color: #5CC8B8; background: rgba(92, 200, 184, .12); }
.search-inline { margin: 0; width: 260px; }
.link-chip.is-path, .link-url.is-path { font: inherit; }
.bm-add { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 10px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.bm-add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-add-row > input { flex: 1 1 140px; background: var(--bg); }
.bm-add-row > .bm-url-input { flex: 3 1 280px; font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1)); }
.bm-add-row > select { background: var(--bg); flex: 0 0 auto; }
.bm-add-row > .link-badge { flex: 0 1 170px; }
.bm-add .hint:empty { display: none; }
.bm-group { margin-bottom: 16px; }
.bm-group .group-head .icon { color: var(--accent); }
.group-edit { width: 22px; height: 22px; opacity: 0; }
.group-head:hover .group-edit, .group-edit:focus-visible { opacity: 1; }
.group-rename { display: flex; gap: 6px; align-items: center; padding: 4px 0 6px; }
.group-rename input { width: 260px; }

.bm-row {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 5px 8px 5px 12px;
  border-radius: var(--r); min-height: 32px;
}
.bm-row:hover, .bm-row:focus-within { background: var(--hover); }
.bm-row:focus-visible { outline-offset: -2px; }
.bm-row .kind-badge { margin-top: 3px; min-width: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.bm-row-ro::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--proj, transparent); }
.bm-main { flex: 1; min-width: 0; }
.bm-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.bm-title { color: var(--text); text-decoration: none; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 55%;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.bm-title:hover { color: var(--accent); }
.bm-url { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.bm-line .tag { font-size: calc(12px * var(--fs, 1)); flex: none; }
.bm-note { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-actions { display: flex; gap: 0; opacity: 0; flex: none; }
.bm-row:hover .bm-actions, .bm-row:focus-within .bm-actions { opacity: 1; }
.bm-row.is-pinned .bm-actions .toggle-btn.active { opacity: 1; }
.bm-actions .icon-btn { width: 26px; height: 26px; }
.bm-frequent { margin-bottom: 16px; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-chips .link-chip { max-width: 260px; }
.bm-project { padding: 8px 0 2px 12px; }
.bm-project-name { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: calc(12px * var(--fs, 1)); font-weight: 600; }
.bm-project-name:hover { color: var(--text); }
.bm-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--accent); border-radius: var(--r); margin: 2px 0; background: var(--surface); }
.bm-edit .bm-add-row > input, .bm-edit select { background: var(--bg); }

.link-row { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.link-type { display: inline-flex; gap: 6px; }
.link-row .link-title { height: 28px; background: var(--bg); }
.link-row select { height: 28px; background: var(--bg); }
.link-row .link-badge { width: 110px; height: 28px; background: var(--bg); }
.link-row .link-url { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.link-row .link-url:hover { color: var(--accent); }
.link-add { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; }
.link-add .link-badge { width: 120px; }
@media (max-width: 860px) {
  .search-inline { width: 100%; }
  .bm-actions { opacity: 1; }
  .bm-title { max-width: none; }
  .bm-url { display: none; }
  .link-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .link-row .link-type, .link-row .link-url { display: none; }
}

/* ------------------------------------------------------------------ Teilschritte, Kontierung, Projektstunden */

.meta-steps { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.meta-steps.complete { color: var(--accent); }
.steps { gap: 6px; }
.steps-head { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.steps-head > span { display: inline-flex; align-items: center; gap: 6px; }
.steps-count { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.steps-count.complete { color: var(--accent); }
.steps-progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.steps-progress > span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.steps-list { display: flex; flex-direction: column; }
.step { display: flex; align-items: center; gap: 8px; padding: 1px 0; border-radius: var(--r); }
.step:hover { background: var(--hover); }
.step-check {
  flex: none; width: 16px; height: 16px; margin-left: 4px; border-radius: 3px; border: 1.5px solid var(--text-muted);
  background: transparent; color: transparent; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.step-check:hover { border-color: var(--accent); }
.step.done .step-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.detail .step-title { flex: 1; min-width: 0; height: 28px; border-color: transparent; background: transparent; padding: 0 6px; }
.detail .step-title:hover { border-color: var(--border); }
.detail .step-title:focus { border-color: var(--accent); background: var(--bg); }
.step.done .step-title { color: var(--text-muted); text-decoration: line-through; }
.step-del { width: 24px; height: 24px; opacity: 0; }
.step:hover .step-del, .step:focus-within .step-del { opacity: 1; }
.detail .step-add { background: transparent; border-style: dashed; }
.detail .step-add:focus { border-style: solid; background: var(--bg); }

.clock-project { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); }
.clock-project select { flex: 1; min-width: 0; height: 24px; font-size: calc(12px * var(--fs, 1)); background: var(--bg); padding: 0 4px; }
.code-chip { cursor: default; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-head h2 { font-size: calc(15px * var(--fs, 1)); }
.project-hours td.strong { font-weight: 600; }
.project-hours + .hint, .table-wrap + .hint { margin-top: 10px; }
.project-hours th.num, .project-hours td.num { white-space: nowrap; }
.kind-path { color: var(--text-muted); background: var(--surface-raised); }

/* ------------------------------------------------------------------ links (calm version) */

.links-sort { height: 30px; }
.links-tabs { margin: 14px 0 10px; }
.links-tabs .tab { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font: inherit; }
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filter[hidden] { display: none; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: calc(12px * var(--fs, 1));
}
.fchip span { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.fchip:hover { color: var(--text); border-color: #48526A; }
.fchip.active { background: var(--surface-raised); color: var(--text); border-color: var(--surface-raised); }
.fchip.active span { color: var(--text-muted); }
.lk-body { margin-top: 4px; }
.lk-group { margin-bottom: 14px; }
.lk-group .group-head { padding: 8px 0 4px; }
.lk-group .group-head .dot { margin-right: 2px; }
.lk-row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 8px; border-radius: var(--r); min-width: 0; }
.lk-row:hover, .lk-row:focus-within { background: var(--hover); }
.lk-row:focus-visible { outline-offset: -2px; }
.lk-row .kind-badge { width: 76px; text-align: center; overflow: hidden; text-overflow: ellipsis; flex: none; }
.lk-fav { color: var(--accent); display: inline-flex; margin-right: -4px; }
.lk-title { color: var(--text); text-decoration: none; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 45%;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.lk-title:hover { color: var(--accent); }
.lk-url { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.lk-has-note { color: var(--text-faint); display: inline-flex; flex: none; }
.lk-actions { display: inline-flex; align-items: center; flex: none; opacity: 0; }
.lk-row:hover .lk-actions, .lk-row:focus-within .lk-actions { opacity: 1; }
.lk-actions .icon-btn { width: 26px; height: 26px; }
.lk-more { font-size: calc(16px * var(--fs, 1)); letter-spacing: 1px; line-height: 1; }
.lk-form .hint:empty { display: none; }
.lk-more-options summary { cursor: pointer; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); padding: 2px 0; }
.lk-more-options summary:hover { color: var(--text); }
.lk-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.lk-more-grid .lk-note { grid-column: 1 / -1; }
.lk-more-grid select { background: var(--bg); }

.menu { position: fixed; z-index: 80; min-width: 180px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 4px; display: flex; flex-direction: column; }
.menu-item { text-align: left; background: none; border: 0; color: var(--text); padding: 7px 10px; border-radius: var(--r); cursor: pointer; font: inherit; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item.danger { color: var(--danger); }
@media (max-width: 860px) {
  .lk-actions { opacity: 1; }
  .lk-url { display: none; }
  .lk-title { max-width: none; flex: 1; }
}

/* ------------------------------------------------------------------ absences */

.abs-vacation { --abs: var(--accent); }
.abs-sick { --abs: var(--danger); }
.abs-flexday { --abs: var(--in-progress); }
.abs-holiday { --abs: var(--text-muted); }
.vac-card { display: flex; flex-direction: column; gap: 10px; }
.vac-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-muted); }
.vac-line b { color: var(--text); font-weight: 600; font-size: calc(15px * var(--fs, 1)); }
.vac-sep { color: var(--text-faint); }
.vac-bar { display: flex; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.vac-taken { background: var(--accent); }
.vac-planned { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.vac-actions { display: flex; }
.abs-form { display: grid; grid-template-columns: 140px 150px 150px minmax(160px, 1fr) auto; gap: 10px; align-items: end; }
.abs-form input, .abs-form select { background: var(--bg); }
.abs-preview { grid-column: 1 / -1; margin-top: -4px; }
.abs-list { display: flex; flex-direction: column; margin-bottom: 16px; }
.abs-row { display: grid; grid-template-columns: 90px 190px 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 34px; padding: 0 6px; border-radius: var(--r); }
.abs-row:hover { background: var(--hover); }
.abs-row .icon-btn { opacity: 0; }
.abs-row:hover .icon-btn, .abs-row:focus-within .icon-btn { opacity: 1; }
.abs-badge { justify-self: start; font-size: calc(12px * var(--fs, 1)); font-weight: 600; padding: 1px 8px; border-radius: 10px; color: var(--abs); background: color-mix(in srgb, var(--abs) 14%, transparent); }
.abs-days { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.abs-note-text { color: var(--text-muted); }
.year-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px 18px; }
.yc-name { font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.yc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.yc-wd { font-size: calc(10px * var(--fs, 1)); color: var(--text-faint); text-align: center; }
.yc-day { height: 20px; border: 0; border-radius: 3px; background: transparent; color: var(--text-muted); font: calc(11px * var(--fs, 1)) var(--font-mono); padding: 0; cursor: pointer; }
.yc-day:hover { background: var(--hover); color: var(--text); }
.yc-day.yc-off { color: var(--text-faint); }
.yc-day.yc-holiday { text-decoration: underline dotted; }
.yc-day[class*="abs-"] { background: color-mix(in srgb, var(--abs) 28%, transparent); color: var(--text); }
.yc-day.yc-today { box-shadow: inset 0 0 0 1px var(--accent); }
.abs-legend { margin-top: 12px; flex-wrap: wrap; }
.abs-legend .lg { background: var(--abs); }
.abs-legend .yc-off-lg { background: var(--border); }
.absence-banner { border-left: 3px solid var(--abs); }
.absence-title { font: 600 calc(20px * var(--fs, 1)) var(--font-display); color: var(--abs); }
.absence-banner .hint a { color: var(--accent); }
@media (max-width: 860px) {
  .abs-form { grid-template-columns: 1fr 1fr; }
  .abs-row { grid-template-columns: 80px 1fr auto; }
  .abs-row .abs-days, .abs-row .abs-note-text { display: none; }
}

/* ------------------------------------------------------------------ Planion-Leiste designer */

.tb-intro { margin: -6px 0 14px; }
.tb-monitor { display: flex; gap: 6px; }
.tb-monitor select { flex: 1; min-width: 0; }
.field output { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
input[type=range] { accent-color: var(--accent); height: 30px; }
.tb-designer { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.tb-preview {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: calc(var(--tb-h) + 8px); padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r);
  background: color-mix(in srgb, var(--bg-sidebar) calc(var(--tb-o) * 100%), transparent);
  background-image: linear-gradient(45deg, rgba(255,255,255,.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.02) 75%);
  background-size: 16px 16px;
}
.tb-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; min-height: var(--tb-h); padding: 2px 4px; border-radius: 4px; border: 1px dashed transparent; }
.tb-zone-center { justify-content: center; }
.tb-zone-right { justify-content: flex-end; }
.tb-zone.drop-zone { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tb-zone-empty { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); padding: 0 6px; }
.tb-chip {
  display: inline-flex; align-items: center; gap: 5px; height: calc(var(--tb-h) - 6px); padding: 0 8px; border-radius: 4px;
  color: var(--text); font-size: calc(12px * var(--fs, 1)); cursor: grab; user-select: none; border: 1px solid transparent; white-space: nowrap;
}
.tb-chip:hover { background: var(--hover); }
.tb-chip.selected { border-color: var(--accent); background: var(--surface-raised); }
.tb-chip.dragging { opacity: .35; }
.tb-chip.drop-before { box-shadow: -3px 0 0 var(--accent); }
.tb-chip .icon { color: var(--text-muted); }
.tb-clock .mono { font-weight: 600; color: var(--accent); }
.tb-caret { color: var(--text-faint); font-size: calc(10px * var(--fs, 1)); }
.tb-sep { width: 9px; padding: 0; justify-content: center; }
.tb-sep::after { content: ""; width: 1px; height: 60%; background: var(--border); }
.tb-toolbar { display: flex; align-items: center; gap: 8px; }
.tb-editor { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.tb-editor-head { display: flex; align-items: center; }
.tb-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 10px 16px; }
.tb-editor-grid .tb-wide { grid-column: 1 / -1; }
.tb-editor input, .tb-editor select { background: var(--surface); }
.tb-clock-opts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tb-hint { margin: 0; }
.tb-pick-search { width: 100%; margin-bottom: 8px; background: var(--bg); }
.tb-pick-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.tb-pick-item { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-radius: var(--r); padding: 7px 10px; color: var(--text); cursor: pointer; font: inherit; }
.tb-pick-item small { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.tb-pick-item:hover { background: var(--hover); }
.desk-pin { color: var(--text-faint); display: inline-flex; }

/* ------------------------------------------------------------------ Angeheftet (desktop pins) */

.pin-list { display: flex; flex-direction: column; gap: 6px; }
.pin-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: var(--r); }
.pin-row:hover, .pin-row:focus-within { background: var(--hover); }
.pin-row .icon { color: var(--text-muted); flex: none; }
.pin-title { color: var(--text); text-decoration: none; min-width: 0; max-width: 340px; }
.pin-title:hover { color: var(--accent); }
.pin-row select, .pin-group-head select { height: 26px; font-size: calc(12px * var(--fs, 1)); max-width: 220px; background: var(--bg); }
.pin-group { border: 1px solid var(--border); border-radius: var(--r); padding: 4px 4px 6px; }
.pin-group-head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pin-group-head .icon { color: var(--text-muted); }
.pin-group-title { flex: 1; min-width: 0; height: 28px !important; background: transparent !important; border-color: transparent !important; font-weight: 600; }
.pin-group-title:hover { border-color: var(--border) !important; }
.pin-group-title:focus { border-color: var(--accent) !important; }
.pin-member { cursor: grab; }
.pin-member.dragging { opacity: .4; }
.pin-member.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.pin-grip { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); letter-spacing: -2px; }
.pin-opacity { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); }
.pin-opacity input { width: 90px; height: 20px; }
.pin-opacity output { width: 38px; font-variant-numeric: tabular-nums; }
.pin-member .btn, .pin-row .btn { opacity: .75; }

/* ------------------------------------------------------------------ appearance: compact lists */

body.compact-lists .todo-row { padding-top: 4px; padding-bottom: 4px; }
body.compact-lists .todo-meta { margin-top: 0; }
body.compact-lists .group { margin-bottom: 8px; }
body.compact-lists .lk-row { height: 28px; }
body.compact-lists .note-item { padding-top: 5px; padding-bottom: 5px; }
body.compact-lists .nav-item { height: 26px; }
body.compact-lists .pin-row { min-height: 30px; }
body.compact-lists .table td { padding-top: 4px; padding-bottom: 4px; }
.btn-primary:active:not(:disabled) { background: var(--accent-pressed, var(--accent)); }

/* ------------------------------------------------------------------ Darstellung */

.ap-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-custom { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; cursor: pointer; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.ap-custom input[type=color] { width: 30px; height: 26px; padding: 0 2px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); cursor: pointer; }
.ap-preview { display: flex; align-items: center; gap: 16px; padding: 12px 14px; margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); pointer-events: none; }
.ap-check { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; }
.ap-clock { color: var(--accent); font-size: calc(20px * var(--fs, 1)); font-weight: 600; }
.tb-preview { font-size: var(--tb-fs, 12px); }
.tb-preview .tb-chip { font-size: var(--tb-fs, 12px); }
.tb-preview.tb-edge-bottom { border-bottom: 2px solid var(--accent); }
.tb-preview.tb-edge-top { border-top: 2px solid var(--accent); }
.tb-chip[style*="--tb-c"], .tb-chip[style*="--tb-c"] .icon { color: var(--tb-c); }
.tb-glyph { font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"; font-size: 1.1em; line-height: 1; }
.tb-emoji { font-size: 1.05em; line-height: 1; }
.tb-icons { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.tb-icon-opt { width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--text); cursor: pointer; font-size: calc(15px * var(--fs, 1)); display: inline-flex; align-items: center; justify-content: center; }
.tb-icon-opt:not(.tb-glyph) { width: auto; padding: 0 8px; font-size: calc(11px * var(--fs, 1)); color: var(--text-muted); }
.tb-icon-opt:hover { background: var(--hover); }
.tb-icon-opt.selected { border-color: var(--accent); background: var(--surface-raised); }
.tb-emoji-in { width: 80px; margin-left: 6px; }
.tb-colors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-color-default { background: transparent; border: 1px solid var(--border); border-radius: 13px; height: 26px; padding: 0 10px; color: var(--text-muted); cursor: pointer; font-size: calc(12px * var(--fs, 1)); }
.tb-color-default.selected { border-color: var(--accent); color: var(--text); }
.tb-delays { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tb-dd select { max-width: 260px; }
.tb-path { display: flex; gap: 6px; align-items: center; min-width: 0; }
.tb-path input { flex: 1; min-width: 0; }
.tb-prog { display: flex; flex-direction: column; gap: 8px; }
.tb-entries { gap: 6px; }
.tb-entry-list { display: flex; flex-direction: column; gap: 4px; }
.tb-entry { display: grid; grid-template-columns: 14px 120px minmax(0, 1fr) minmax(0, 1.6fr) 70px 28px; gap: 6px; align-items: center; padding: 4px 6px; border-radius: var(--r); background: var(--surface); border: 1px solid transparent; }
.tb-entry:hover { border-color: var(--border); }
.tb-entry.dragging { opacity: .4; }
.tb-entry.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tb-entry input, .tb-entry select { height: 28px; background: var(--bg); }
.tb-entry-sep { grid-column: span 3; height: 1px; background: var(--border); }
.tb-entry-header .tb-entry-label { font-weight: 600; grid-column: span 2; }
.tb-entry-more { grid-column: 3 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.tb-entry .pin-grip { cursor: grab; }
.tb-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-app { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r); cursor: pointer; }
.tb-app:hover { background: var(--hover); }
.tb-app small { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-opts { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 4px 16px; align-items: start; margin-bottom: 12px; }
.pin-fade input { width: 100%; }

/* ------------------------------------------------------------------ help tooltips + F1 */

.help-tip { position: relative; display: inline-flex; flex: none; }
.help-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: 700 calc(12px * var(--fs, 1)) var(--font-text); cursor: pointer; padding: 0; }
.help-btn:hover, .help-tip.pinned .help-btn { color: var(--accent); border-color: var(--accent); }
.help-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: -6px; z-index: 70; width: min(480px, calc(100vw - 32px));
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 12px 14px; text-align: left;
  color: var(--text); font-size: calc(12px * var(--fs, 1)); line-height: 1.5; cursor: default; white-space: normal;
}
.help-left .help-pop { right: auto; left: -6px; }
.help-tip:hover .help-pop, .help-tip.pinned .help-pop, .help-btn:focus-visible + .help-pop { display: block; }
.help-tip.pinned .help-pop { box-shadow: 0 0 0 1px var(--accent); }
.help-title { font-weight: 600; margin-bottom: 6px; font-size: calc(13px * var(--fs, 1)); }
.help-example { margin-bottom: 8px; }
.help-list { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; margin: 0; }
.help-list dt { white-space: nowrap; }
.help-list dd { margin: 0; color: var(--text-muted); }
.help-pop code, .shortcuts code { background: var(--bg); border-radius: 4px; padding: 0 4px; font-size: calc(11.5px * var(--fs, 1)); }
.help-foot { margin-top: 8px; color: var(--text-faint); }
.help-pop kbd, .shortcuts kbd { color: var(--text-muted); }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.shortcuts h3 { font-size: calc(13px * var(--fs, 1)); margin-bottom: 6px; }
.shortcuts dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.shortcuts dd { margin: 0; color: var(--text-muted); }
.shortcuts-editor { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 12px; }
.modal-wide:has(.shortcuts) { max-width: 860px; }
.note-ed-compact .help-btn { width: 20px; height: 20px; }
.note-ed-compact .help-pop { width: min(320px, calc(100vw - 24px)); }

/* ------------------------------------------------------------------ notes tree */

.notes-list-pane .notes-tools select { flex: 1; min-width: 0; }
.tree { display: flex; flex-direction: column; gap: 1px; }
.tree-row, .tree-note {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px 0 calc(6px + var(--depth, 0) * 16px);
  border-radius: var(--r); color: var(--text); text-decoration: none; cursor: pointer; min-width: 0;
}
.tree-row:hover, .tree-note:hover { background: var(--hover); }
.tree-row.selected { background: var(--surface-raised); }
.tree-note.active { background: var(--surface-raised); }
.tree-note.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent); }
.tree-row .icon, .tree-note .icon { color: var(--text-muted); flex: none; }
.tree-twisty { width: 18px; height: 18px; border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 0; font-size: calc(11px * var(--fs, 1)); flex: none; }
.tree-twisty:hover { color: var(--text); }
.tree-name { font-weight: 600; flex: 1; }
.tree-project .tree-name { font-weight: 600; }
.tree-count { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.tree-more { width: 22px; height: 22px; opacity: 0; }
.tree-row:hover .tree-more, .tree-row:focus-within .tree-more { opacity: 1; }
.tree-note { padding-left: calc(30px + var(--depth, 0) * 16px); flex-wrap: wrap; row-gap: 0; }
.tree-note > .ellipsis { flex: 1; }
.tree-note .pin { color: var(--accent); display: inline-flex; }
.tree-date { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); flex: none; }
.tree-path { flex-basis: 100%; color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); padding: 0 0 4px 19px; margin-top: -4px; }
.tree { position: relative; }
.tree-root-drop { display: none; position: absolute; left: 0; right: 0; top: -38px; z-index: 5; background: var(--surface); border: 1px dashed var(--accent); border-radius: var(--r); padding: 6px 10px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.tree.dragging .tree-root-drop { display: block; }
.tree .drop-target { box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.note-editor-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.note-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); min-height: 18px; }
.note-crumbs span { display: inline-flex; align-items: center; gap: 5px; }
.crumb { background: none; border: 0; padding: 0; color: var(--text-muted); cursor: pointer; font: inherit; }
.crumb:hover { color: var(--accent); }
.crumb-sep { color: var(--text-faint); }

/* ------------------------------------------------------------------ Sicherung */

.bk-form, .bk-auto { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.bk-form h3, .bk-auto h3 { margin-bottom: 8px; }
.bk-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.bk-actions { display: flex; gap: 8px; margin-top: 8px; }
.bk-file { cursor: pointer; }
.bk-manifest { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.bk-manifest div { display: flex; flex-direction: column; }
.bk-counts { margin-bottom: 12px; }
.bk-messages { margin: 8px 0 0; padding-left: 18px; color: var(--text-muted); }
details.advanced { margin-top: 10px; }
details.advanced summary { cursor: pointer; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
details.advanced > .hint { margin: 8px 0; }
details.advanced a { color: var(--accent); }

/* ------------------------------------------------------------------ Zeitkonto */

.balance-btn { display: inline-flex; align-items: baseline; gap: 8px; background: none; border: 1px solid transparent; border-radius: var(--r); padding: 4px 8px; color: var(--text-muted); cursor: pointer; font: inherit; }
.balance-btn:hover { border-color: var(--border); background: var(--hover); }
.balance-btn b { font-size: calc(18px * var(--fs, 1)); font-weight: 600; }
.balance-edit { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.balance-btn:hover .balance-edit { color: var(--accent); }
.bal-now { margin-bottom: 12px; color: var(--text-muted); }
.bal-now b { font-size: calc(20px * var(--fs, 1)); margin-left: 8px; }
.bal-tabs { margin-bottom: 12px; }
.bal-form { display: grid; grid-template-columns: 160px 140px 1fr auto; gap: 10px; align-items: end; }
.bal-form input { background: var(--bg); }
#bal-set { grid-template-columns: 160px 160px auto 1fr; }
.bal-hint, .bal-preview { grid-column: 1 / -1; }
.bal-preview:empty { display: none; }
.bal-list-head { margin: 18px 0 6px; }
.bal-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.bal-row { display: grid; grid-template-columns: 100px 80px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 32px; padding: 0 6px; border-radius: var(--r); }
.bal-row:hover { background: var(--hover); }
.tb-img { width: 16px; height: 16px; object-fit: contain; display: inline-block; vertical-align: middle; }
.tb-icon-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tb-upload { cursor: pointer; }
.tb-own-icons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tb-own { position: relative; display: inline-flex; }
.tb-own-pick { width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--r); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tb-own-pick:hover { background: var(--hover); }
.tb-own.selected .tb-own-pick { border-color: var(--accent); }
.tb-own-del { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; border: 0; background: var(--danger); color: var(--on-accent); font-size: 10px; line-height: 14px; padding: 0; cursor: pointer; display: none; }
.tb-own:hover .tb-own-del { display: block; }
.tb-entry-iconbox { display: inline-flex; align-items: center; gap: 2px; }
.tb-entry-iconbox input { width: 46px; }
.tb-entry-iconbox .icon-btn { width: 22px; height: 26px; }
.tb-entry { grid-template-columns: 14px 120px minmax(0, 1fr) minmax(0, 1.6fr) auto 28px; }
.menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.menu-item { display: flex; align-items: center; gap: 10px; }
.menu-item:disabled { color: var(--text-faint); cursor: default; }
.menu-item:disabled:hover { background: none; }
.menu-label { flex: 1; }
.menu-hint { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); }
.menu-arrow { color: var(--text-faint); font-size: calc(10px * var(--fs, 1)); }
.menu-item.checked .menu-label { flex: 1; }
.menu-item.checked::after { content: "✓"; margin-left: 10px; color: var(--accent); font-weight: 600; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ------------------------------------------------------------------ Schnellsuche (Ctrl+K) */

.brand .qs-open { width: 26px; height: 26px; }
.qs-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10, 13, 18, .55); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.qs { width: 640px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); display: flex; flex-direction: column; max-height: 70vh; box-shadow: 0 16px 48px rgba(0, 0, 0, .45); }
.qs-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.qs-input { flex: 1; border: 0 !important; background: transparent !important; height: 32px !important; font-size: calc(18px * var(--fs, 1)) !important; padding: 0 !important; }
.qs-chips { display: flex; gap: 6px; padding: 8px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.qs-results { overflow-y: auto; padding: 4px 6px 8px; }
.qs-group { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); font-weight: 600; padding: 8px 10px 2px; }
.qs-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r); cursor: pointer; min-width: 0; }
.qs-row.active { background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--accent); }
.qs-icon { width: 20px; display: inline-flex; justify-content: center; color: var(--text-muted); flex: none; }
.qs-icon.done { color: var(--accent); }
.qs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qs-title { font-size: calc(14px * var(--fs, 1)); }
.qs-sub { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); display: flex; gap: 4px; flex-wrap: wrap; }
.qs-sub .chip { height: 18px; font-size: calc(11px * var(--fs, 1)); }
.qs-kind { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); flex: none; }
.qs-empty { color: var(--text-muted); padding: 16px 12px; }
.qs-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); }

/* ------------------------------------------------------------------ settings layout */

.view-settings { max-width: 1240px; }
.settings-path { margin-top: 4px; font-size: calc(12px * var(--fs, 1)); color: var(--text-faint); padding: 0; }
.settings-search { width: 300px; }
.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; }
.settings-nav-select { display: none; }
.settings-content .settings-save { position: sticky; bottom: 0; }
.settings-content .search-hit { box-shadow: -3px 0 0 var(--accent); padding-left: 8px; }
.settings-content .search-hidden { display: none !important; }
.mcp-perms { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.mcp-perm-row { display: grid; grid-template-columns: 180px auto; align-items: center; gap: 12px; }
.shortcuts-inline .shortcuts { margin-top: 8px; }
@media (max-width: 1100px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { display: none; }
  .settings-nav-select { display: block; width: 100%; margin-bottom: 4px; }
  .settings-search { width: 100%; }
}
.mcp-perm-row .segments { justify-self: start; }

/* ---------------------------------------------------------------- setup wizard */
.wz-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(10, 13, 18, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wz { width: 100%; max-width: 820px; height: min(720px, calc(100vh - 32px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.wz-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; }
.wz-brand { font-family: var(--font-display); font-weight: 600; font-size: calc(14px * var(--fs, 1)); }
.wz-steps { list-style: none; margin: 0; padding: 14px 20px; display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.wz-steps li { flex: 1 1 0; min-width: 0; }
.wz-steps button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r); cursor: pointer; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.wz-steps button:disabled { cursor: default; }
.wz-steps button:not(:disabled):hover { background: var(--hover); color: var(--text); }
.wz-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wz-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); font-variant-numeric: tabular-nums; font-weight: 600; }
.wz-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-steps li.done button { color: var(--text-muted); }
.wz-steps li.done .wz-num { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: transparent; color: var(--accent); }
.wz-steps li.current button { color: var(--text); font-weight: 600; }
.wz-steps li.current .wz-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wz-body { flex: 1 1 auto; overflow-y: auto; padding: 22px 28px 18px; display: flex; flex-direction: column; gap: 14px; outline: none; }
.wz-body > * { flex-shrink: 0; }
.wz-body .segments { align-self: flex-start; flex-wrap: wrap; }
.wz-body h1 { font-size: calc(24px * var(--fs, 1)); }
.wz-lead { color: var(--text-muted); max-width: 62ch; }
.wz-body .settings-grid { margin-bottom: 0; }
.wz-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
.wz-error { color: var(--danger); font-size: calc(12px * var(--fs, 1)); min-width: 0; }
.wz-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 40px; border: 1px solid var(--border); border-radius: var(--r-pop); background: var(--bg); cursor: pointer; }
.wz-card input { position: absolute; left: 14px; top: 16px; accent-color: var(--accent); }
.wz-card small { color: var(--text-muted); }
.wz-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wz-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.wz-split > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.wz-preview { border: 1px solid var(--border); border-radius: var(--r-pop); background: var(--bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.wz-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--font-display); }
.wz-prow { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
body.compact-lists .wz-prow { padding: 3px 4px; }
.wz-prow.done .grow { color: var(--text-faint); text-decoration: line-through; }
.wz-pcheck { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--text-faint); display: inline-flex; align-items: center; justify-content: center; }
.wz-prow.done .wz-pcheck { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wz-pclock { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.wz-pclock .mono { font-size: calc(20px * var(--fs, 1)); font-weight: 600; }
.wz-preview .btn { pointer-events: none; }
.wz-balance { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-balance-value { width: 90px; }
.wz-balance-preview { font-weight: 600; }
.wz-switch { font-size: calc(13px * var(--fs, 1)); color: var(--text); padding: 4px 0; }
.wz-elements, .wz-project { border: 1px solid var(--border); border-radius: var(--r); padding: 8px 14px 10px; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.wz-project { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wz-elements legend, .wz-project legend { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); padding: 0 6px; }
.wz-elements:disabled { opacity: .5; }
.wz-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--r); min-height: 32px; }
.wz-bar > div { display: flex; gap: 6px; flex-wrap: wrap; }
.wz-bar > div:last-child { justify-content: flex-end; }
.wz-bar.off { opacity: .35; }
.wz-bar-chip { padding: 2px 8px; border-radius: 4px; background: var(--surface-raised); color: var(--text-muted); font-size: calc(11px * var(--fs, 1)); white-space: nowrap; }
.wz-bar-chip.is-clock { color: var(--accent); font-family: var(--font-mono); font-weight: 600; }
.wz-tip { display: flex; align-items: center; gap: 6px; }
.wz-status { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.wz-status > span { min-width: 0; overflow-wrap: anywhere; }
.wz-status.ok > .icon { color: var(--success); flex: 0 0 auto; margin-top: 2px; }
.wz-status.bad > .icon { color: var(--danger); flex: 0 0 auto; margin-top: 2px; }
.wz-path { display: flex; gap: 8px; }
.wz-path input { flex: 1; min-width: 0; }
.area-via { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.area-list { display: flex; flex-direction: column; gap: 6px; }
.area-row { display: flex; align-items: center; gap: 8px; }
.area-row input[type=color] { width: 30px; height: 28px; padding: 0 2px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); cursor: pointer; }
.area-row .area-name { flex: 0 1 240px; height: 30px; }
.area-actions { margin: 8px 0 4px; }
.area-default { max-width: 360px; margin-top: 8px; }
.feature-list { display: flex; flex-direction: column; margin: 10px 0 16px; border: 1px solid var(--border); border-radius: var(--r); }
.feature-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; cursor: pointer; }
.feature-row + .feature-row { border-top: 1px solid var(--border); }
.feature-row .switch { margin-top: 2px; }
.feature-row.is-disabled { opacity: .55; cursor: default; }
.feature-text { display: flex; flex-direction: column; gap: 1px; }
.feature-view-list { display: flex; flex-wrap: wrap; gap: 0 18px; }
.detail-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.detail-note { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r); }
.detail-note:hover { background: var(--hover); }
.detail-note > .icon { color: var(--text-muted); flex: none; }
.detail-note-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.detail-note-sub { display: flex; align-items: center; gap: 4px; font-size: calc(11.5px * var(--fs, 1)); }
.detail-note-new { align-self: flex-start; margin-top: 4px; }
.chip.chip-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.about-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
@media (max-width: 760px) {
  .wz-backdrop { padding: 0; }
  .wz { height: 100vh; max-width: none; border-radius: 0; border: 0; }
  .wz-label { display: none; }
  .wz-steps li.current { flex: 0 0 auto; }
  .wz-steps li.current .wz-label { display: inline; }
  .wz-split, .wz-cards, .wz-elements { grid-template-columns: minmax(0, 1fr); }
  .wz-body { padding: 18px 16px; }
  .wz-foot [data-dismiss] { display: none; }
}

/* ---------------------------------------------------------------- guided tour */
.tour { position: fixed; inset: 0; z-index: 75; }
.tour-block { position: absolute; inset: 0; }
.tour-spot { position: absolute; border-radius: 8px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(8, 10, 14, .66); pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour.no-target .tour-spot { box-shadow: 0 0 0 9999px rgba(8, 10, 14, .66); }
.tour.no-motion .tour-spot { transition: none; }
.tour-bubble { position: absolute; width: min(360px, calc(100vw - 24px)); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 14px 16px 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 8px; outline: none; }
.tour-bubble h2 { font-size: calc(16px * var(--fs, 1)); }
.tour-bubble p { color: var(--text-muted); }
.tour-count { color: var(--accent); font-size: calc(11px * var(--fs, 1)); font-weight: 600; letter-spacing: .02em; }
.tour-try { align-self: flex-start; }
.tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Kanban boards */
.view-wide { max-width: none; }
.board { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.board-bar { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); min-width: 0; }
.board-tabs { position: relative; display: flex; align-items: flex-end; gap: 2px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.board-tab { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 8px 12px 9px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; user-select: none; }
.board-tab:hover { color: var(--text); }
.board-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.board-tab.archived { font-style: italic; }
.board-tab.dragging { opacity: .4; }
.board-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }
.board-tab-marker { position: absolute; top: 6px; bottom: 4px; width: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.board-new { flex: none; }
.board-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.board-info { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: calc(12px * var(--fs, 1)); }
.board-scope { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; }
a.board-scope:hover { color: var(--text); }
.board-search { width: 240px; height: 30px; }
.board-more { font-size: calc(16px * var(--fs, 1)); line-height: 1; }
.board-cols { position: relative; display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; min-height: 240px; scrollbar-width: thin; }
.bcol { flex: 0 0 290px; width: 290px; display: flex; flex-direction: column; background: var(--bg-sidebar); border: 1px solid var(--border); border-top: 3px solid var(--col, var(--border)); border-radius: var(--r-pop); max-height: calc(100vh - 230px); min-height: 120px; transition: border-color .12s, box-shadow .12s; }
.bcol.dragging { opacity: .4; }
.bcol.drop-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bcol.over-wip { border-top-color: var(--danger); }
.bcol-head { display: flex; align-items: center; gap: 7px; padding: 8px 8px 6px 12px; cursor: grab; user-select: none; min-width: 0; }
.bcol-head:active { cursor: grabbing; }
.bcol-name { font-weight: 600; min-width: 0; }
.bcol-count { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; flex: none; }
.bcol-wip { font-family: var(--font-mono); font-size: calc(11px * var(--fs, 1)); padding: 0 6px; border-radius: 9px; border: 1px solid var(--border); color: var(--text-muted); flex: none; }
.bcol-wip.over { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); font-weight: 600; }
.bcol-status { font-size: calc(11px * var(--fs, 1)); color: var(--text-faint); white-space: nowrap; flex: none; }
.bcol-more { width: 24px; height: 24px; flex: none; }
.bcol-cards { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 2px 8px 6px; display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.bcol-empty { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); text-align: center; padding: 14px 6px; border: 1px dashed var(--border); border-radius: var(--r); }
.bcol-foot { padding: 4px 8px 8px; }
.bcol-addcard { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r); color: var(--text-faint); cursor: pointer; font-size: calc(12px * var(--fs, 1)); }
.bcol-addcard:hover, .bcol-addcard:focus-visible { background: var(--hover); color: var(--text); }
.bcol-addcard:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bcol-quick { display: flex; flex-direction: column; gap: 4px; }
.bcol-quick-input { width: 100%; height: 32px; padding: 0 9px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r); color: var(--text); outline: none; }
.bcol-add { all: unset; box-sizing: border-box; flex: 0 0 180px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 1px dashed var(--border); border-radius: var(--r-pop); color: var(--text-muted); cursor: pointer; }
.bcol-add:hover, .bcol-add:focus-visible { color: var(--text); border-color: var(--accent); }
.bcol-marker { position: absolute; top: 2px; bottom: 14px; width: 4px; background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 2; }
.bcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; box-shadow: inset 3px 0 0 var(--proj, transparent); user-select: none; }
body.compact-lists .bcard { padding: 6px 9px 5px 11px; gap: 3px; }
.bcard:hover { border-color: #48526A; background: var(--surface-raised); }
.bcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bcard.selected { border-color: var(--accent); }
.bcard.dragging { opacity: .35; }
.bcard.is-done { opacity: .62; }
.bcard.is-done .bcard-title > span:last-child { text-decoration: line-through; color: var(--text-muted); }
.bcard.is-progress { box-shadow: inset 3px 0 0 var(--proj, transparent), inset 0 -2px 0 color-mix(in srgb, var(--in-progress) 55%, transparent); }
.bcard-title { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; line-height: 1.35; }
.bcard-check { flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; }
.bcard-meta { display: flex; align-items: center; gap: 8px; font-size: calc(11.5px * var(--fs, 1)); color: var(--text-muted); min-width: 0; }
.bcard-meta .signal { margin-top: 0; }
.bcard-id { color: var(--text-faint); }
.bcard-project { min-width: 0; max-width: 110px; color: var(--text-faint); }
.bcard-tags { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: calc(11.5px * var(--fs, 1)); }
.bcard-marker { position: absolute; left: 6px; right: 6px; height: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 2; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.board-empty-card { max-width: 520px; margin: 40px auto; padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px dashed var(--border); border-radius: var(--r-pop); color: var(--text-muted); }
.board-empty-card h2 { color: var(--text); font-size: calc(18px * var(--fs, 1)); }
.bsugg { position: fixed; z-index: 45; max-height: 340px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.bsugg-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; min-width: 0; font-size: calc(13px * var(--fs, 1)); }
.bsugg-row.active, .bsugg-row:hover { background: var(--hover); }
.bsugg-row.done .bsugg-title { color: var(--text-muted); text-decoration: line-through; }
.bsugg-st { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1.5px solid var(--text-muted); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); }
.bsugg-st.st-InProgress { border-color: var(--in-progress); border-style: dashed; }
.bsugg-st.st-Done { background: var(--accent); border-color: var(--accent); }
.bsugg-id { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); flex: none; }
.bsugg-title { flex: 1 1 auto; min-width: 0; }
.bsugg-proj { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); max-width: 130px; min-width: 0; flex: 0 1 auto; }
.bsugg-due { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); flex: none; }
.bsugg-due.overdue { color: var(--danger); }
.bsugg mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 2px; }
.bsugg-empty { margin: 0; padding: 8px; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.board-fill { border: 1px solid var(--border); border-radius: var(--r); padding: 6px 12px 8px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.board-fill legend { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); padding: 0 6px; }
.board-fill-opt { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; cursor: pointer; }
.board-fill-opt input[type=radio] { margin-top: 3px; accent-color: var(--accent); }
.board-fill-opt.is-disabled { opacity: .5; cursor: default; }
.board-fill-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.board-fill-text .hint { flex-basis: 100%; }
.board-fill-tag { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); }
.board-fill-tag input { width: 130px; height: 26px; padding: 0 7px; }
.board-fill-info { color: var(--text-muted); }
.board-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.board-template { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 10px 32px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); cursor: pointer; }
.board-template input { position: absolute; left: 10px; top: 12px; accent-color: var(--accent); }
.board-template small { color: var(--text-muted); font-size: calc(11.5px * var(--fs, 1)); }
.board-template:has(input:checked) { border-color: var(--accent); }
@media (max-width: 860px) {
  .board-search { width: 100%; }
  .bcol { flex-basis: 270px; width: 270px; max-height: none; }
  .board-templates { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ cloud: avatars, sync chip, offline banner */

.avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  width: 22px; height: 22px; font: 600 calc(10px * var(--fs, 1))/1 var(--font-text); letter-spacing: .2px;
  color: var(--c, var(--text-muted)); background: color-mix(in srgb, var(--c, var(--text-muted)) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--text-muted)) 45%, transparent);
}
.avatar-lg { width: 40px; height: 40px; font-size: calc(14px * var(--fs, 1)); }
.todo-row > .avatar { margin-top: 1px; }
.bcard-meta .avatar { width: 18px; height: 18px; font-size: calc(9px * var(--fs, 1)); }
.field > span:first-child .avatar { width: 18px; height: 18px; font-size: calc(9px * var(--fs, 1)); }

/* sidebar structure: task views · Arbeitsbereich · Projekte · compact clock · one footer row */
.nav-label { margin: 14px 0 4px; padding: 0 8px; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); font-weight: 600; }
.nav-sub {
  display: flex; align-items: center; gap: 8px; height: 24px; margin: 0 0 2px; padding: 0 8px 0 34px;
  border-radius: var(--r); color: var(--text-faint); text-decoration: none; font-size: calc(12px * var(--fs, 1));
}
.nav-sub .icon { flex: none; }
.nav-sub:hover { background: var(--hover); color: var(--text); }
.nav-sub.active { background: var(--surface-raised); color: var(--text); }
.nav-section-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; margin-left: -4px; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.nav-section-toggle:hover { color: var(--text-muted); }
.nav-section-toggle .icon { transition: transform .15s; }
.nav-section-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }

.clock-compact { padding: 8px 12px 8px 18px; }
.clock-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.clock-compact .clock-time { font-size: calc(18px * var(--fs, 1)); line-height: 1.2; letter-spacing: 0; flex: none; }
.clock-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.clock-compact .clock-state { margin-top: 0; min-width: 0; font-size: calc(11px * var(--fs, 1)); line-height: 1.3; }
.clock-compact .clock-sec, .clock-compact .clock-more { width: 26px; height: 26px; }
.clock-compact .btn-small { flex: none; }
.clock-more .icon { transition: transform .15s; }
.clock-compact.is-open .clock-more .icon { transform: rotate(90deg); }
.clock-compact .clock-progress { height: 2px; margin-top: 6px; }
.clock-detail { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.clock-full { color: var(--state); font-size: calc(12px * var(--fs, 1)); }
.clock-compact.is-out .clock-full { color: var(--text-muted); }
.clock-compact .clock-advice { margin-top: 4px; }

.side-foot { display: flex; align-items: center; gap: 4px; margin: 0 -10px -10px; padding: 6px 10px 8px; border-top: 1px solid var(--border); min-height: 42px; }
.side-user {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; height: 30px; padding: 0 8px 0 4px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit;
}
.side-user:hover, .side-user.active { background: var(--hover); color: var(--text); }
.side-local { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.side-local .sync-dot { background: var(--text-faint); }
.side-sync { padding: 0 6px; }
.side-gear.active { background: var(--surface-raised); color: var(--text); }
.sync-chip {
  --state: var(--text-faint);
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  font-size: calc(12px * var(--fs, 1)); color: var(--text-muted);
}
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--state); flex: none; }
.sync-chip.is-ok { --state: var(--success); }
.sync-chip.is-pending, .sync-chip.is-syncing { --state: var(--in-progress); }
.sync-chip.is-offline { --state: var(--text-faint); }
.sync-chip.is-error { --state: var(--danger); color: var(--danger); }
.sync-chip.is-local { --state: var(--text-faint); color: var(--text-faint); }
.totp-state .sync-chip { margin-right: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 10px; }

.cloud-banner {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--r-pop) var(--r-pop) 0 0; padding: 8px 16px; font-weight: 600;
}
.cloud-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
body.has-cloud-banner .toasts:not([data-pos^="top"]) { bottom: 56px; }

/* ------------------------------------------------------------------ cloud: detail, sharing, Konto & Teams */

.cloud-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cloud-fields .hint { margin-top: 2px; }
.badge-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.share-dialog { display: flex; flex-direction: column; gap: 14px; }
.share-add, .inline-form, .form.inline-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.share-add input { flex: 1 1 220px; background: var(--bg); }
.share-add select { background: var(--bg); }
.inline-form .field { flex: 1 1 180px; margin-bottom: 0; }
.inline-form .field:has(select) { flex: 0 1 auto; }
.inline-form input, .inline-form select { background: var(--bg); }
.settings-section .inline-form + .inline-form, .settings-section .table-wrap + .inline-form { margin-top: 12px; }
.share-head { color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.share-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--r); }
.share-row:hover { background: var(--hover); }
.share-row select { height: 28px; background: var(--bg); }
.share-who, .person-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.share-who .faint, .person-text .faint { font-size: calc(12px * var(--fs, 1)); }
.person-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.member-table td:first-child, .admin-users td:first-child { max-width: 320px; }
.table td .avatar + .avatar { margin-left: -4px; }
.table td > .avatar { display: inline-grid; }
.view-cloud .table select { width: auto; min-width: 120px; }
.view-cloud .table td.mono { white-space: nowrap; }
.org-pick { display: inline-flex; gap: 6px; }
.org-pick select { width: auto; min-width: 120px; }

.view-cloud .card-head { flex-wrap: wrap; }
.view-cloud .card-head h2 { min-width: 0; }
.profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.profile-name { font: 600 calc(15px * var(--fs, 1)) var(--font-display); }
.totp-state { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; color: var(--text-muted); }
.totp-setup { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.qr-box { background: #FFFFFF; border-radius: var(--r-pop); padding: 6px; line-height: 0; }
.qr { display: block; width: 192px; height: 192px; }
.totp-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.totp-code, .login-code { letter-spacing: 3px; font-size: calc(16px * var(--fs, 1)); }
.once { display: flex; flex-direction: column; gap: 12px; }
.once-hint { display: flex; gap: 6px; align-items: flex-start; color: var(--accent); }
.once-hint .icon { flex: none; margin-top: 2px; }
.invite-result, .invite-block { margin-top: 12px; }
.update-available { color: var(--accent); font-family: var(--font-text); }
.plugin-desc { margin: -4px 0 12px; }
.plugin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.plugin-info { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.plugin-status { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.plugin-ok { display: flex; gap: 6px; align-items: center; color: var(--success); }
.audit td.muted { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .cloud-fields { grid-template-columns: minmax(0, 1fr); }
  .org-pick { flex-direction: column; }
}

/* ------------------------------------------------------------------ login page (Planion server) */

body.login-page { overflow: auto; }
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 14px; }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.login-brand { display: flex; align-items: center; gap: 10px; font: 600 calc(17px * var(--fs, 1)) var(--font-display); }
.login-title { font-size: calc(20px * var(--fs, 1)); }
.login-tabs { width: 100%; }
.login-tabs .seg { flex: 1; justify-content: center; height: 32px; }
.login-form input { background: var(--bg); height: 34px; }
.login-form .btn-large { width: 100%; }
.login-form .btn-ghost { align-self: center; }
.login-error { display: flex; gap: 8px; align-items: flex-start; color: var(--danger); }
.login-error .icon { flex: none; margin-top: 2px; }
.login-invite { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r); color: var(--text); }
.login-invite .icon { color: var(--accent); flex: none; margin-top: 2px; }
.login-invite.is-error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.login-invite.is-error .icon { color: var(--danger); }
.login-note { margin-top: -4px; }
.login-actions { display: flex; flex-direction: column; gap: 6px; }
.login-actions .btn-large { width: 100%; }
.login-foot { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.mcp-steps { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

/* section colors (DESIGN.md "Bereichsfarben") – used by the sidebar; page titles carry no icon */
[data-sec="today"] { --sec: var(--accent); }
[data-sec="upcoming"] { --sec: #6FA8F5; }
[data-sec="inbox"] { --sec: #C38FF0; }
[data-sec="all"] { --sec: #4FD1C5; }
[data-sec="done"] { --sec: #4FD1C5; }
[data-sec="search"] { --sec: #4FD1C5; }
[data-sec="assigned"] { --sec: #F28FB0; }
[data-sec="notes"] { --sec: #7FCB6E; }
[data-sec="boards"] { --sec: #F59E4C; }
[data-sec="links"] { --sec: #5BC0EB; }
[data-sec="time"] { --sec: var(--accent); }
[data-sec="settings"] { --sec: #8E97AA; }
[data-sec="konto"] { --sec: #F28FB0; }
[data-sec="roadmap"] { --sec: #6FA8F5; }
[data-sec="papierkorb"] { --sec: #8E97AA; }
[data-sec="admin"] { --sec: #8FA3BF; }

/* ================================================================== Bereichswahl (DESIGN.md) – all looks */

.area-switch { margin: 0 2px 10px; }
.area-pick {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.area-pick:hover { border-color: #48526A; }
.area-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.area-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--text-faint)); flex: none; }
.area-chev { display: inline-flex; color: var(--text-faint); transform: rotate(90deg); }
.menu-dot { width: 8px; height: 8px; }

/* ================================================================== Lebendig (DESIGN.md, Version 2) – scoped by html.lively */

/* Lamp light: a warm cone top left of the content area; the sidebar stays darker. */
.lively .main { background: radial-gradient(900px 600px at 12% 0, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%), var(--bg); }
.lively body.login-page { background: radial-gradient(900px 600px at 30% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%), var(--bg); }

/* Section colors: sidebar icon always, active item tinted (14 %) with a 3 px bar. */
.lively .nav-item[data-sec] > .icon, .lively .nav-sub[data-sec] > .icon { color: var(--sec); }
.lively .nav-item.active[data-sec], .lively .nav-sub.active[data-sec] {
  background: color-mix(in srgb, var(--sec) 14%, transparent); box-shadow: inset 3px 0 0 var(--sec);
}

/* Page titles: no icon tiles (DESIGN.md "Seitenköpfe") – built-in views show just the title, a project its color dot. */

/* Heute: greeting, date, progress ring. */
.today-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; color: var(--text-muted); }
.today-progress { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.ring { flex: none; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 3; }
.ring-val { fill: none; stroke: var(--accent); stroke-width: 3; transition: stroke-dasharray .4s ease-out; }

/* Depth: cards and popups with a soft shadow and a light top edge. */
.lively .card, .lively .modal, .lively .menu, .lively .toast, .lively .qs, .lively .login-card {
  border-radius: var(--r-pop); box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.lively .card { transition: border-color .15s ease-out; }
.lively .card:hover { border-color: #3D4659; }
.lively .bcard {
  border-radius: var(--r-pop); transition: transform .12s ease-out, border-color .12s ease-out, background .12s ease-out;
  box-shadow: inset 3px 0 0 var(--proj, transparent), 0 2px 8px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.lively .bcard.is-progress {
  box-shadow: inset 3px 0 0 var(--proj, transparent), inset 0 -2px 0 color-mix(in srgb, var(--in-progress) 55%, transparent), 0 2px 8px rgba(0, 0, 0, .18);
}

/* Priorities: a faint red shimmer on critical rows, overdue dates as a pill. */
.lively .todo-row.is-critical { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.lively .todo-row.is-critical:hover { background: color-mix(in srgb, var(--danger) 8%, var(--hover)); }
.lively .todo-row.is-critical.selected { background: var(--surface-raised); }
.lively .meta-due.overdue { background: color-mix(in srgb, var(--danger) 14%, transparent); padding: 0 7px; border-radius: 9px; line-height: 18px; }

/* Empty states (both looks): icon – or the lamp in the lively look – centered above the text. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 520px; margin: 48px auto 0; padding: 0 16px; color: var(--text-muted); }
.empty-state.is-compact { margin: 20px auto 12px; gap: 6px; }
.empty-icon { display: inline-flex; color: var(--text-faint); }
.empty-title { color: var(--text); font-weight: 600; font-size: calc(15px * var(--fs, 1)); }
.empty-text { color: var(--text-muted); line-height: 1.5; }
.empty-text a, .empty-state a { color: var(--accent); }
.empty-action { margin-top: 6px; }
.empty-state.is-success .empty-title { font-weight: 600; }
.empty-art { display: none; }
.lively .empty-state.has-art .empty-art { display: block; color: var(--text-faint); max-width: 100%; height: auto; }
.lively .empty-state.has-art .empty-icon { display: none; }
.empty-art .ea-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-art .ea-thin { stroke-width: 1.2; }
.empty-art .ea-light { fill: var(--accent); opacity: .09; }
.empty-art .ea-glow { fill: var(--accent); opacity: .18; }
.empty-art .ea-bulb { fill: var(--accent); }

/* Avatars filled in the person's color, text dark or white by contrast. */
.lively .avatar { background: var(--c, var(--text-muted)); color: var(--on, #1A1F29); box-shadow: none; }

/* Stempeluhr: progress ring around the state dot instead of the bar. */
.clock-ring { display: none; position: relative; width: 20px; height: 20px; flex: none; }
.lively .clock-ring { display: inline-block; }
.lively .clock-compact .clock-progress { display: none; }
.clock-ring .ring { position: absolute; inset: 0; }
.clock-ring .ring-val { stroke: var(--state); }
.clock-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--state); }
.lively .clock-compact .clock-line { gap: 5px; }

/* Motion only as an answer to an action (DESIGN.md): no confetti, no sparks, nothing bouncy. */
@keyframes wb-settle { from { transform: scale(.82); } to { transform: scale(1); } }
@keyframes wb-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wb-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }

@media (prefers-reduced-motion: no-preference) {
  .lively .view { animation: wb-fade 160ms ease-out backwards; }
  .lively .todo-list.enter .todo-row { animation: wb-rise 200ms ease-out backwards; animation-delay: calc(var(--i, 12) * 15ms); }
  .lively .clock-compact.is-working .clock-dot { animation: wb-pulse 2s ease-in-out infinite; }
  .lively .todo-row.completing .check { animation: wb-settle 160ms ease-out; }
  .lively .bcard:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .ring-val { transition: none; }
}

/* ================================================================== status dots (admin health, mail) */

.sync-dot.is-good { --state: var(--success); background: var(--success); }
.sync-dot.is-bad { --state: var(--danger); background: var(--danger); }
.sync-dot.is-warn { --state: var(--accent); background: var(--accent); }

/* ================================================================== Server-Verwaltung (#/admin) */

:root { --admin: #8FA3BF; }
body.admin-mode .main, .lively body.admin-mode .main { background: #171C25; }
.sidebar.is-admin { box-shadow: inset 0 3px 0 var(--admin); }
.sidebar.is-admin > :not(.brand):not(.side-admin):not(.side-foot):not(.sidebar-spacer) { display: none !important; }
.side-admin { display: flex; flex-direction: column; gap: 10px; }
.admin-back { justify-content: flex-start; width: 100%; height: 34px; font-weight: 600; }
.admin-nav-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px; color: var(--text); font-weight: 600; font-size: calc(13px * var(--fs, 1)); }
.side-admin .nav-item.active { background: color-mix(in srgb, var(--admin) 16%, transparent); box-shadow: inset 3px 0 0 var(--admin); color: var(--text); }
.side-admin .nav-item .icon { color: var(--admin); }
.admin-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; flex: none;
  border: 1px solid color-mix(in srgb, var(--admin) 55%, transparent); color: var(--admin);
  font-size: calc(11px * var(--fs, 1)); font-weight: 600; letter-spacing: .02em;
}
.admin-head .title-row { gap: 12px; }
.admin-lead { margin-top: 6px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop); }
.admin-stat-value { font-size: calc(22px * var(--fs, 1)); font-weight: 600; color: var(--text); line-height: 1.2; }
.admin-stat-label { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.admin-stat-hint { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); }
.admin-health { display: flex; flex-direction: column; }
.admin-health-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid rgba(51, 59, 76, .55); color: var(--text-muted); text-decoration: none; }
.admin-health-row:first-child { border-top: 0; }
.admin-health-row b { color: var(--text); font-weight: 600; }
a.admin-health-row:hover { color: var(--text); }
.admin-health-row .sync-dot { background: var(--text-faint); }
.admin-health-row .sync-dot.is-good { background: var(--success); }
.admin-health-row .sync-dot.is-bad { background: var(--danger); }
.admin-health-row .sync-dot.is-warn { background: var(--accent); }
.admin-update { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.admin-update .card-head .icon { color: var(--accent); }
.admin-mail-state { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.admin-mail-state .sync-dot { background: var(--text-faint); }
.admin-mail-state .sync-dot.is-good { background: var(--success); }
.admin-mail-state .sync-dot.is-bad { background: var(--danger); }
.admin-env td { white-space: nowrap; }
.admin-env td.muted { white-space: normal; }

/* ================================================================== notifications */

.side-bell { position: relative; }
.bell-badge {
  position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #1A1F29; font: 700 calc(10px * var(--fs, 1))/16px var(--font-text); text-align: center;
}
.notif-panel {
  position: fixed; z-index: 85; display: flex; flex-direction: column; max-height: min(70vh, 560px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pop);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.notif-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--border); }
.notif-head h2 { font-size: calc(15px * var(--fs, 1)); }
.notif-count { color: var(--accent); font-size: calc(12px * var(--fs, 1)); font-weight: 600; }
.notif-list { overflow-y: auto; padding: 4px; }
.notif-item {
  all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px;
  border-radius: var(--r); cursor: pointer; position: relative;
}
.notif-item:hover, .notif-item:focus-visible { background: var(--hover); }
.notif-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.notif-item .avatar { margin-top: 1px; }
.notif-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-raised); color: var(--text-muted); flex: none; }
.notif-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.notif-title { color: var(--text-muted); line-height: 1.35; }
.notif-item.is-unread .notif-title { color: var(--text); font-weight: 600; }
.notif-body { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-time { color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 6px; }

/* ================================================================== Papierkorb */

.trash-list { display: flex; flex-direction: column; gap: 2px; }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); }
.trash-row:hover { background: var(--hover); }
.trash-icon { color: var(--text-faint); display: inline-flex; flex: none; }
.trash-main { flex: 1; min-width: 0; }
.trash-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(14px * var(--fs, 1)); }
.trash-title .badge { flex: none; }
.trash-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.trash-meta span { display: inline-flex; align-items: center; gap: 4px; }
.trash-actions { display: flex; gap: 6px; flex: none; }

/* ================================================================== comments */

.detail-comments { gap: 8px; }
.comments-head { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.comment-list { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment .avatar { margin-top: 1px; }
.comment-me { background: var(--surface-raised) !important; color: var(--text-muted) !important; }
.comment-main { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); }
.comment-meta b { color: var(--text); font-weight: 600; }
.comment-meta time { color: var(--text-faint); }
.comment-act { width: 22px; height: 22px; opacity: 0; }
.comment:hover .comment-act, .comment-act:focus-visible { opacity: 1; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.mention { color: var(--accent); font-weight: 600; }
.comment-form { display: flex; flex-direction: column; gap: 6px; }
.comment-input-wrap { position: relative; }
.comment-form textarea, .comment-edit textarea { width: 100%; background: var(--bg); min-height: 56px; }
.comment-actions { display: flex; align-items: center; gap: 8px; }
.comment-actions .hint kbd { font-size: calc(10px * var(--fs, 1)); }
.comment-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mention-pop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px; max-width: 100%; padding: 4px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.mention-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--r); cursor: pointer; }
.mention-opt .faint { font-size: calc(11px * var(--fs, 1)); }
.mention-opt.active, .mention-opt:hover { background: var(--hover); }

/* ================================================================== templates */

.quick-tpl { width: 26px; height: 26px; }
.tpl-manager { display: flex; flex-direction: column; gap: 12px; }
.tpl-list { display: flex; flex-direction: column; gap: 2px; }
.tpl-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r); }
.tpl-row:hover { background: var(--hover); }
.tpl-icon { color: var(--text-faint); display: inline-flex; }
.tpl-main { flex: 1; min-width: 0; }
.tpl-name { font-weight: 600; }
.tpl-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); min-width: 0; }

/* ================================================================== team overview */

.space-tabs { margin: 2px 0 12px; border-bottom: 1px solid var(--border); }
.space-tabs .tab { background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; }
.team-sum { color: var(--text-muted); margin-bottom: 10px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.team-card {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pop); transition: border-color .12s ease-out;
}
.team-card:hover { border-color: #48526A; }
.team-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.team-card.is-unassigned { border-style: dashed; }
.team-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-name { font-weight: 600; color: var(--text); }
.team-who .faint { font-size: calc(12px * var(--fs, 1)); margin-left: auto; }
.team-none { background: var(--surface-raised) !important; color: var(--text-muted) !important; }
.team-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.team-num { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.team-num .mono { font-size: calc(17px * var(--fs, 1)); font-weight: 600; color: var(--text); line-height: 1.2; }
.team-num > span:last-child { color: var(--text-faint); font-size: calc(10.5px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-num.is-zero .mono { color: var(--text-faint); font-weight: 400; }
.team-num.is-danger:not(.is-zero) .mono { color: var(--danger); }
.team-num.is-progress:not(.is-zero) .mono { color: var(--in-progress); }
.team-num.is-done:not(.is-zero) .mono { color: var(--success); }
.team-todos .row-actions { display: none !important; }

/* ================================================================== todo rows: quick actions, comments */

.row-actions { display: flex; gap: 0; opacity: 0; flex: none; margin-top: -3px; transition: opacity .12s ease-out; }
.todo-row:hover .row-actions, .todo-row:focus-within .row-actions, .todo-row.selected .row-actions { opacity: 1; }
.row-actions .icon-btn { width: 26px; height: 26px; color: var(--text-faint); }
.row-actions .icon-btn:hover { color: var(--text); background: var(--surface-raised); }
.meta-comments { gap: 3px; font-variant-numeric: tabular-nums; }
@media (hover: none) { .row-actions { display: none; } }

/* ================================================================== login: forgot / reset */

.login-notice { display: flex; gap: 8px; align-items: flex-start; color: var(--success); }
.login-notice .icon { flex: none; margin-top: 2px; }
.login-forgot { align-self: center; font-size: calc(12px * var(--fs, 1)); }

/* ================================================================== admin statistics: charts, distributions, facts */

.admin-stat.has-danger .admin-stat-hint { color: var(--danger); }
.admin-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.admin-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 1100px) { .admin-grid-2, .admin-grid-3 { grid-template-columns: minmax(0, 1fr); } }

.chart { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ch-legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.ch-key { display: inline-flex; align-items: center; gap: 6px; }
.ch-key i, .ch-tip i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
.ch-area { padding: 6px 40px 22px 36px; }
.ch-plot { position: relative; height: 170px; }
.ch-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.ch-yl { position: absolute; left: -36px; width: 28px; transform: translateY(-50%); text-align: right; color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.ch-xl { position: absolute; bottom: -20px; transform: translateX(-50%); color: var(--text-faint); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch-svg polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.ch-dl { position: absolute; right: -36px; width: 30px; transform: translateY(-50%); color: var(--text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.ch-barslot { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ch-bar { width: min(12px, 62%); border-radius: 4px 4px 0 0; min-height: 0; }
.ch-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--text-faint); pointer-events: none; }
.ch-tip {
  position: absolute; top: 4px; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; pointer-events: none;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.ch-tip b { color: var(--text); }
.ch-tip span { display: inline-flex; align-items: center; gap: 6px; }
.ch-table summary { color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); cursor: pointer; width: max-content; }
.ch-table summary:hover { color: var(--text-muted); }
.ch-table .table-wrap { max-height: 240px; overflow-y: auto; margin-top: 6px; }

.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 56px; align-items: center; gap: 10px; }
.hbar-label { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.hbar-track { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--border) 60%, transparent); overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 4px; background: #5A93E3; min-width: 2px; }
.hbar-value { text-align: right; color: var(--text); font-size: calc(12px * var(--fs, 1)); }
.stat-foot { margin-top: 12px; }
.stat-sub { margin: 16px 0 8px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); font-weight: 600; }

.disk { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.disk-head { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.disk-head .mono { color: var(--text); }
.disk-track { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--border) 60%, transparent); overflow: hidden; }
.disk-fill { display: block; height: 100%; border-radius: 4px; background: #5A93E3; }
.disk-fill.is-danger { background: var(--danger); }

.stat-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 16px; }
.stat-fact { display: flex; flex-direction: column; gap: 1px; }
.stat-fact .mono { font-size: calc(17px * var(--fs, 1)); font-weight: 600; color: var(--text); }
.stat-fact > span:last-child { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.inline-icon { display: inline-flex; vertical-align: -2px; color: var(--text-muted); }

/* ================================================================== pages: tree, crumbs, symbol, backlinks */

.tree-note { padding-left: calc(12px + var(--depth, 0) * 16px); }
.tree-twisty-space { width: 18px; flex: none; }
.tree-note .tree-twisty { display: inline-grid; place-items: center; }
.tree-note .tree-count { margin-left: 2px; color: var(--text-faint); font-size: calc(11px * var(--fs, 1)); }
.tree-note.drop-target { box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.crumb-page { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.crumb-page .icon { color: var(--text-faint); }
.note-crumbs .btn-small { height: 24px; }
.icon-pop {
  position: fixed; z-index: 85; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.icon-grid { display: grid; grid-template-columns: repeat(5, 30px); gap: 2px; }
.icon-grid .icon-btn { width: 30px; height: 30px; }
.icon-grid .icon-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.note-backlinks { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); }
.backlinks-head { font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.backlinks-list { display: flex; flex-direction: column; }
.backlink { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r); color: var(--text); text-decoration: none; min-width: 0; }
.backlink:hover { background: var(--hover); }
.backlink .icon { color: var(--text-faint); flex: none; }
.backlink .meta-project { margin-left: auto; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); flex: none; }

/* ================================================================== focus mode for notes (F11 / Strg+Umschalt+F) */

.focus-bar { display: none; }
body.note-focus .sidebar, body.note-focus .detail, body.note-focus #nav-toggle, body.note-focus .detail-resize,
body.note-focus .notes-list-pane, body.note-focus .view-notes > .view-head, body.note-focus .note-crumbs,
body.note-focus .note-backlinks, body.note-focus .tabs-row, body.note-focus .view-todos > .view-head { display: none !important; }
body.note-focus .app { grid-template-columns: minmax(0, 1fr) !important; }
body.note-focus .main { background: var(--bg); }
body.note-focus .view { max-width: none; padding: 48px 24px 96px; }
body.note-focus .notes { grid-template-columns: minmax(0, 1fr); }
body.note-focus .note-editor-col { max-width: 900px; width: 100%; margin: 0 auto; }
body.note-focus.note-focus-full .note-editor-col { max-width: none; padding: 0 40px; } /* + 24 px view padding = 64 px */
@media (max-width: 900px) { body.note-focus.note-focus-full .note-editor-col { padding: 0 8px; } }
body.note-focus .note-ed-head { flex-direction: column; align-items: stretch; }
/* the action row only on hover over the title area, on keyboard focus there, or with Strg+. */
body.note-focus .note-ed-actions { opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
body.note-focus .note-ed-head:hover .note-ed-actions, body.note-focus .note-ed-head:focus-within .note-ed-actions,
body.note-focus.note-focus-actions .note-ed-actions { opacity: 1; pointer-events: auto; }
body.note-focus .note-ed-title { font-size: calc(30px * var(--fs, 1)); font-weight: 600; font-family: var(--font-display); height: auto; padding: 6px 0; border-color: transparent; background: transparent; }
body.note-focus .wb-editor { font-size: calc(17px * var(--fs, 1)); line-height: 1.75; max-width: none; }
body.note-focus .note-ed-meta { display: none; }
body.note-focus .focus-bar {
  display: flex; align-items: center; gap: 14px; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40;
  padding: 4px 6px 4px 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums;
}
body.note-focus .focus-bar .btn { color: var(--text-faint); }
body.note-focus .focus-bar .btn:hover { color: var(--text); }
body.note-focus .focus-bar kbd { margin-left: 4px; }
.focus-top { display: none; }
body.note-focus .focus-top { display: flex; gap: 4px; position: fixed; top: 10px; right: 14px; z-index: 40; padding: 3px; border-radius: var(--r-pop); background: color-mix(in srgb, var(--bg) 88%, transparent); }
body.note-focus .focus-top .btn { color: var(--text-faint); }
body.note-focus .focus-top .btn:hover, body.note-focus .focus-top .btn[aria-pressed="true"] { color: var(--text); }
body.note-focus .focus-top kbd { margin-left: 4px; }

/* ================================================================== Erledigt */

.done-summary { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; color: var(--text-muted); }
.done-summary b { color: var(--text); font-weight: 600; margin-right: 4px; }
.done-summary .sep { color: var(--text-faint); }
.done-strip { flex: none; }
.done-strip .ds-bar { fill: #5BA64C; }
.done-strip .ds-zero { fill: var(--border); }
.done-strip .ds-day { fill: var(--text-faint); font: 10px var(--font-text); }
.done-note p.faint { color: var(--text-faint); }
.done-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; }
.done-tools .chip-btn.is-on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.done-tools .chip-btn .dot { width: 7px; height: 7px; }
.chip-reset { border-style: dashed; }
.done-group { margin-bottom: 14px; }
.done-group.is-collapsed { margin-bottom: 4px; }
.done-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.done-toggle .tw { color: var(--text-faint); width: 10px; font-size: calc(11px * var(--fs, 1)); }
.done-toggle:hover { color: var(--text); }
.done-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.done-row {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px 10px 6px 14px; border-radius: var(--r); cursor: pointer;
}
.done-row::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--proj, transparent); opacity: .7; }
.done-row:hover, .done-row:focus-visible { background: var(--hover); }
.done-row:focus-visible { outline-offset: -2px; }
.done-check { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-grid; place-items: center; }
.done-main { flex: 1; min-width: 0; }
.done-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.done-title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent); min-width: 0; overflow-wrap: anywhere; }
.done-line .meta-project { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.done-has-note { display: inline-flex; color: var(--text-faint); }
.done-note { margin-top: 6px; padding: 8px 10px; border-left: 2px solid color-mix(in srgb, var(--in-progress) 60%, transparent); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; }
.done-note-label { display: inline-flex; align-items: center; gap: 5px; color: var(--in-progress); font-size: calc(12px * var(--fs, 1)); margin-bottom: 2px; }
.done-note p { white-space: pre-wrap; color: var(--text); }
.done-time { flex: none; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); min-width: 64px; text-align: right; margin-top: 1px; }
.done-actions { display: flex; gap: 2px; opacity: 0; flex: none; margin-top: -3px; }
.done-row:hover .done-actions, .done-row:focus-within .done-actions { opacity: 1; }
.done-more { padding: 12px 0 24px; text-align: center; }
@media (hover: none) { .done-actions { opacity: 1; } }

/* ================================================================== Konto & Sync (desktop web UI) */

.acc-link { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.acc-tabs { align-self: flex-start; }
.acc-form input { background: var(--bg); }
.acc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-data { border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px 6px; margin: 0; }
.acc-data legend { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); padding: 0 4px; }
.acc-server { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.acc-server .mono { color: var(--text-muted); }
.link-btn { all: unset; cursor: pointer; color: var(--text-muted); }
.link-btn:hover, .link-btn:focus-visible { color: var(--accent); text-decoration: underline; }
.acc-linked { display: flex; flex-direction: column; gap: 10px; }
.acc-who { font-size: calc(14px * var(--fs, 1)); }
.wz-account { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; align-items: start; margin-top: 14px; }
.wz-choice { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; cursor: default; }
.wz-choice > b { font-size: calc(14px * var(--fs, 1)); }
.wz-account-form { align-items: stretch; }
@media (max-width: 760px) { .wz-account { grid-template-columns: minmax(0, 1fr); } }
.wz-card.wz-choice { padding: 16px 18px; }
.wz-card.wz-choice input { position: static; }

/* ---------------------------------------------------------------- Planung im Aufgabendetail */
.plan-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; }
.plan-fields .plan-milestone { grid-column: 1 / -1; padding: 0; }
.field-value.danger { color: var(--danger); }
.meta-blocked, .badge-blocked { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 10px; padding: 0 7px; font-size: calc(11px * var(--fs, 1)); line-height: 16px; }
.meta-milestone { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); }
.meta-milestone::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); border-radius: 1px; }
.deps > span:first-child { color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); display: flex; align-items: center; gap: 6px; }
.deps-cols { display: grid; grid-template-columns: 1fr; gap: 10px; }
.deps-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deps-head { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; }
.deps-col > .hint { margin: 0; }
.dep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dep-item { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 4px; border-radius: var(--r); }
.dep-item:hover { background: var(--hover); }
.dep-state { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-faint); flex: none; }
.dep-state.st-InProgress { border-color: var(--in-progress); background: var(--in-progress); }
.dep-state.st-Done { border-color: var(--success); background: var(--success); }
.dep-link { display: flex; gap: 5px; min-width: 0; flex: 1; color: var(--text); text-decoration: none; font-size: calc(13px * var(--fs, 1)); }
.dep-link:hover .ellipsis { color: var(--accent); }
.dep-item.is-done .dep-link .ellipsis { color: var(--text-muted); text-decoration: line-through; }
.dep-remove { opacity: 0; flex: none; }
.dep-item:hover .dep-remove, .dep-remove:focus-visible { opacity: 1; }
.dep-add { position: relative; }
.dep-add input { width: 100%; height: 28px; background: transparent; border-style: dashed; }
.dep-add input:focus { background: var(--surface); border-style: solid; }
.dep-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); box-shadow: 0 8px 24px rgb(0 0 0 / .3); padding: 4px; display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.dep-pop .hint { margin: 6px 8px; }
.dep-opt { display: flex; gap: 6px; align-items: center; border: 0; background: transparent; color: var(--text); text-align: left; padding: 6px 8px; border-radius: var(--r); cursor: pointer; min-width: 0; font: inherit; font-size: calc(13px * var(--fs, 1)); }
.dep-opt .ellipsis { flex: 1; }
.dep-opt .faint:last-child { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-opt.active, .dep-opt:hover { background: var(--hover); }
@media (max-width: 520px) { .plan-fields { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- mehrere Zuständige */
.avatar-stack { display: inline-flex; align-items: center; flex: none; }
.todo-row > .avatar-stack { margin-top: 1px; }
.avatar-stack .avatar { background: color-mix(in srgb, var(--c, var(--text-muted)) 18%, var(--bg)); outline: 2px solid var(--bg); }
.avatar-stack .avatar + .avatar { margin-left: -4px; }
.avatar-more { --c: var(--text-muted); font-size: calc(9px * var(--fs, 1)); }
.bcard-meta .avatar-stack .avatar { width: 18px; height: 18px; font-size: calc(9px * var(--fs, 1)); }
.assignees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 4px 2px 3px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); font-size: calc(13px * var(--fs, 1)); }
.assignee-chip .avatar { width: 20px; height: 20px; font-size: calc(9px * var(--fs, 1)); }
.assignee-chip .icon-btn { width: 20px; height: 20px; border-radius: 50%; }
.assignee-chip:not(:has(.icon-btn)) { padding-right: 10px; }
.assignee-none { font-size: calc(13px * var(--fs, 1)); margin-right: 4px; }
.lively .avatar-stack .avatar { background: var(--c, var(--text-muted)); }
.cloud-fields .field:has(.assignees) { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- Planung: Tabelle · Kalender · Zeitleiste · Roadmap */
.tabs-row .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs-row .tabs::-webkit-scrollbar { display: none; }
.tab .icon { color: var(--text-faint); }
.tab.active .icon { color: var(--accent); }
.plan-host { min-width: 0; }
.plan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.plan-bar .chip-btn.is-on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.plan-bar .chip-btn b { color: var(--accent); font-weight: 600; }
.plan-viewpick { display: inline-flex; align-items: center; gap: 7px; height: 28px; max-width: 260px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.plan-viewpick:hover { background: var(--hover); }
.plan-viewpick .icon:first-child { color: var(--accent); flex: none; }
.plan-viewpick .icon:last-child { color: var(--text-faint); transform: rotate(90deg); flex: none; }
.plan-sep { width: 1px; height: 18px; background: var(--border); }
.plan-dirty { font-size: calc(12px * var(--fs, 1)); }
.plan-loading { padding: 40px 0; text-align: center; }
.view-plan .view-head { margin-bottom: 12px; }

.plan-pop { position: fixed; z-index: 75; min-width: 300px; max-width: min(640px, calc(100vw - 16px)); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pop-head { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; }
.pop-empty { margin: 0; }
.pop-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(120px, 1.2fr) 26px; gap: 6px; align-items: center; }
.pop-row-sort { grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) 26px; }
.pop-row select, .pop-row input { height: 28px; min-width: 0; width: 100%; }
.pop-foot { display: flex; gap: 6px; flex-wrap: wrap; }
.pop-add input { width: 100%; min-width: 260px; }
.pop-add { display: flex; flex-direction: column; gap: 8px; }
.pop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.pop-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: left; padding: 6px 8px; border-radius: var(--r); cursor: pointer; min-width: 0; }
.pop-item:hover { background: var(--hover); }
.pop-item .is-done { color: var(--text-muted); text-decoration: line-through; }

/* Tabelle */
.ptable-wrap { overflow: auto; max-height: calc(100vh - 250px); min-height: 220px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.ptable { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: calc(13px * var(--fs, 1)); }
.ptable th, .ptable td { border-bottom: 1px solid var(--border); border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding: 0; height: 34px; text-align: left; vertical-align: middle; overflow: hidden; }
.ptable thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); font-weight: 600; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.ptable thead th:first-child, .ptable tbody td:first-child, .ptable tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.ptable thead th:first-child { z-index: 3; background: var(--surface); }
.ptable tbody tr:hover td { background: var(--hover); }
.pt-th { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 10px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.pt-th:hover { color: var(--text); background: var(--hover); }
.pt-sort { color: var(--accent); font-weight: 700; flex: none; }
.pt-resize { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.pt-resize:hover, body.is-resizing .pt-resize { background: color-mix(in srgb, var(--accent) 40%, transparent); }
body.is-resizing { cursor: col-resize; user-select: none; }
.pt-addcol { width: 44px; text-align: center; }
.pt-addcol .icon-btn { margin: 0 auto; }
.pt-fill { border-right: 0 !important; }
.pt-cell { padding: 0 10px !important; cursor: default; white-space: nowrap; outline: none; }
.pt-cell:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.pt-cell.is-editing { padding: 0 !important; box-shadow: inset 0 0 0 2px var(--accent); }
.pt-input { width: 100%; height: 33px; border: 0; border-radius: 0; background: var(--surface); padding: 0 10px; }
.pt-input:focus { border: 0; }
.pt-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pt-tt { overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 500; }
.pt-tt.is-done { color: var(--text-muted); text-decoration: line-through; }
.pt-open { margin-left: auto; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: calc(11px * var(--fs, 1)); border-radius: var(--r); padding: 1px 7px; cursor: pointer; opacity: 0; }
tr:hover .pt-open, .pt-cell:focus .pt-open { opacity: 1; }
.pt-open:hover { color: var(--text); border-color: #48526A; }
.pt-status { display: inline-flex; align-items: center; gap: 6px; }
.pt-status i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-faint); }
.pt-status.st-InProgress { color: var(--in-progress); }
.pt-status.st-InProgress i { border-color: var(--in-progress); background: var(--in-progress); }
.pt-status.st-Done { color: var(--text-muted); }
.pt-status.st-Done i { border-color: var(--success); background: var(--success); }
.pt-prio { color: var(--prio); }
.pt-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pt-person .avatar { width: 20px; height: 20px; font-size: calc(9px * var(--fs, 1)); }
.pt-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: calc(12px * var(--fs, 1)); color: var(--text); background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pt-pills { display: inline-flex; gap: 4px; overflow: hidden; max-width: 100%; }
.pt-check { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--text-faint); border-radius: 4px; color: var(--on-accent); }
.pt-check.on { background: var(--accent); border-color: var(--accent); }
.pt-late { color: var(--danger); }
.ptc-number, .ptc-estimate { text-align: right !important; }
.pt-cell a { color: var(--prio-normal); text-decoration: none; }
.pt-cell a:hover { text-decoration: underline; }
.pt-proj { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pt-group td { background: var(--surface) !important; height: 32px; padding: 0 10px !important; font-weight: 600; }
.pt-group-label { display: inline-flex; align-items: center; gap: 7px; position: sticky; left: 10px; }
.pt-new td { border-bottom: 0; }
.pt-newbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; background: none; color: var(--text-muted); font: inherit; cursor: pointer; position: sticky; left: 0; }
.pt-newbtn:hover { color: var(--text); }
.pt-newinput { width: min(520px, 100%); height: 34px; border: 0; border-radius: 0; background: transparent; padding: 0 10px; position: sticky; left: 0; }
.pt-emptyrow td { height: auto; border-bottom: 0; }
.ptable-wrap::-webkit-scrollbar-corner, .ptl-scroll::-webkit-scrollbar-corner { background: transparent; }
.pt-emptyrow .empty-state { position: sticky; left: 0; max-width: calc(100vw - 340px); }
.ptable tfoot td { position: sticky; bottom: 0; background: var(--surface); color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); padding: 0 10px; border-bottom: 0; border-top: 1px solid var(--border); white-space: nowrap; }
.ptable tfoot td:first-child { background: var(--surface); z-index: 2; }

/* Kalender */
.pcal { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pcal-head, .ptl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pcal-title { font-size: calc(16px * var(--fs, 1)); margin: 0 0 0 6px; font-weight: 600; }
.pcal-main, .ptl-main { display: flex; gap: 14px; min-width: 0; align-items: flex-start; }
.pcal-grid { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.pcal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border-bottom: 1px solid var(--border); }
.pcal-dow div { padding: 6px 8px; font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; }
.pcal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 28px repeat(var(--lanes, 0), 24px) minmax(18px, 1fr); position: relative; min-height: 118px; border-bottom: 1px solid var(--border); row-gap: 2px; }
.pcal-week:last-child { border-bottom: 0; }
.is-week .pcal-week { min-height: calc(100vh - 330px); }
.pcal-day { grid-row: 1 / -1; position: relative; border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding: 4px 6px; min-width: 0; z-index: 0; }
.pcal-day[style*="grid-column:7"] { border-right: 0; }
.pcal-day.is-we { background: color-mix(in srgb, var(--surface) 40%, transparent); }
.pcal-day.is-out .pcal-num { color: var(--text-faint); }
.pcal-num { font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pcal-day.is-today .pcal-num { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.pcal-day.is-drop { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.pcal-add { position: absolute; top: 3px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--text-muted); cursor: pointer; opacity: 0; }
.pcal-day:hover .pcal-add, .pcal-add:focus-visible { opacity: 1; }
.pcal-add:hover { background: var(--hover); color: var(--text); }
.pcal-more { position: absolute; left: 4px; bottom: 3px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: calc(11px * var(--fs, 1)); cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.pcal-more:hover { color: var(--text); background: var(--hover); }
.pcal-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-width: 0; height: 22px; margin: 0 3px; padding: 0 8px; border: 0; border-radius: 5px; font: inherit; font-size: calc(12px * var(--fs, 1)); text-align: left; cursor: grab; user-select: none; touch-action: none;
  color: var(--text); background: color-mix(in srgb, var(--c) 24%, var(--bg)); box-shadow: inset 3px 0 0 var(--c); }
.pcal-bar:hover { background: color-mix(in srgb, var(--c) 34%, var(--bg)); }
.pcal-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pcal-bar.cut-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; }
.pcal-bar.cut-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pcal-bar.is-done { color: var(--text-muted); text-decoration: line-through; background: color-mix(in srgb, var(--c) 10%, var(--bg)); }
.pcal-bar.is-late { box-shadow: inset 3px 0 0 var(--danger); }
.pcal-bar.is-dragging, .ptl-bar.is-dragging, .ptl-ms.is-dragging { opacity: .85; cursor: grabbing; outline: 1px dashed var(--accent); }
.pcal.is-dragging, .ptl.is-dragging { cursor: grabbing; }
.pcal-ms { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); flex: none; border-radius: 1px; }
.pcal-h, .ptl-h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; border-radius: 5px; }
.pcal-h-l, .ptl-h-l { left: -1px; }
.pcal-h-r, .ptl-h-r { right: -1px; }
.pcal-bar:hover .pcal-h, .ptl-bar:hover .ptl-h { background: color-mix(in srgb, var(--c) 60%, transparent); }
.pcal-side, .ptl-side { width: 230px; flex: none; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 250px); overflow-y: auto; }
.pcal-side-head { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; }
.pcal-side .hint, .ptl-side .hint { margin: 0; }
.pcal-undated { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pcal-chip { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: calc(12px * var(--fs, 1)); text-align: left; cursor: grab; user-select: none; touch-action: none; }
.pcal-chip .ellipsis { flex: 1; }
.pcal-chip:hover { border-color: #48526A; }
.pcal-chip.is-dragging { opacity: .5; }

/* Zeitleiste (Gantt) */
.ptl { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ptl-legend { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs, 1)); margin-left: 8px; }
.ptl-legend i { display: inline-block; margin-left: 6px; }
.ptl-key-bar { width: 16px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--prio-normal) 45%, var(--bg)); }
.ptl-key-ms { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
.ptl-key-dep { width: 16px; height: 0; border-top: 1.5px solid var(--text-muted); }
.ptl-scroll { flex: 1; min-width: 0; overflow: auto; max-height: calc(100vh - 250px); border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); position: relative; outline: none; }
.ptl-inner { position: relative; }
.ptl-scale { position: sticky; top: 0; z-index: 4; height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ptl-corner { position: sticky; left: 0; z-index: 5; width: var(--lw, 260px); height: 52px; display: flex; align-items: flex-end; padding: 0 12px 8px; background: var(--surface); border-right: 1px solid var(--border); font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; }
.ptl-scale-top, .ptl-scale-bottom { position: absolute; left: var(--lw, 260px); right: 0; height: 26px; }
.ptl-scale-top { top: 0; }
.ptl-scale-bottom { top: 26px; }
.ptl-scale-top span, .ptl-scale-bottom span { position: absolute; top: 0; height: 26px; display: flex; align-items: center; padding: 0 6px; white-space: nowrap; overflow: hidden; border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: calc(11px * var(--fs, 1)); color: var(--text-muted); }
.ptl-scale-top span { font-weight: 600; color: var(--text); }
.ptl-scale-bottom span.is-we { color: var(--text-faint); }
.ptl-labels { position: sticky; left: 0; z-index: 3; width: var(--lw, 260px); background: var(--bg); border-right: 1px solid var(--border); }
.ptl-label, .ptl-glabel { position: absolute; left: 0; right: 0; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); background: none; color: var(--text); font: inherit; font-size: calc(13px * var(--fs, 1)); text-align: left; cursor: pointer; min-width: 0; text-decoration: none; }
.ptl-label:hover { background: var(--hover); }
.ptl-label.is-indented { padding-left: 26px; }
.ptl-label.is-done .ellipsis { color: var(--text-muted); text-decoration: line-through; }
.ptl-label .ellipsis { flex: 1; }
.ptl-glabel { font-weight: 600; background: var(--surface); }
.ptl-glabel .ellipsis { flex: 1; }
.ptl-chart { position: absolute; top: 52px; }
.ptl-we { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.ptl-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.ptl-grow { position: absolute; left: 0; right: 0; height: 34px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ptl-span { position: absolute; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--c) 55%, transparent); }
.ptl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--accent); z-index: 2; pointer-events: none; }
.ptl-deps { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.ptl-deps path { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.ptl-deps path.is-conflict { stroke: var(--danger); }
.ptl-deps marker path { fill: var(--text-muted); stroke: none; }
.ptl-deps #ptl-arrow-bad path { fill: var(--danger); }
.ptl-bar { position: absolute; height: 22px; z-index: 2; display: flex; align-items: center; padding: 0 8px; border: 0; border-radius: 5px; font: inherit; font-size: calc(12px * var(--fs, 1)); text-align: left; color: var(--text); cursor: grab; user-select: none; touch-action: none; min-width: 6px;
  background: color-mix(in srgb, var(--c) 30%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.ptl-bar:hover { background: color-mix(in srgb, var(--c) 42%, var(--bg)); }
.ptl-bar:focus-visible, .ptl-ms:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ptl-bar.is-progress { box-shadow: inset 0 0 0 1px var(--in-progress); }
.ptl-bar.is-late { box-shadow: inset 0 0 0 1px var(--danger); }
.ptl-bar.is-done { color: var(--text-muted); background: color-mix(in srgb, var(--c) 12%, var(--bg)); text-decoration: line-through; }
.ptl-bar-label { min-width: 0; }
.ptl-bar.is-dragging::after { content: attr(data-tip); position: absolute; left: 0; top: -22px; white-space: nowrap; font-size: calc(11px * var(--fs, 1)); color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.ptl-outlabel { position: absolute; z-index: 2; white-space: nowrap; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); pointer-events: none; }
.ptl-ms { position: absolute; z-index: 2; width: 0; height: 0; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; user-select: none; }
.ptl-ms i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; display: block; }
.ptl-ms i::before { content: ""; position: absolute; inset: 3px; background: var(--accent); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 2px var(--bg); }
.ptl-ms.is-done i::before { background: var(--success); }
.ptl-ms.is-late i::before { background: var(--danger); }
.ptl-ms-label { position: absolute; left: 14px; top: -9px; white-space: nowrap; font-size: calc(12px * var(--fs, 1)); color: var(--text); font-weight: 600; pointer-events: none; }
.ptl-empty { flex: 1; min-width: 0; border: 1px dashed var(--border); border-radius: var(--r); padding: 24px 0; }
.ptl-ghost { position: fixed; z-index: 90; pointer-events: none; padding: 4px 10px; border-radius: 5px; background: var(--surface-raised); border: 1px solid var(--accent); color: var(--text); font-size: calc(12px * var(--fs, 1)); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); white-space: nowrap; }
@media (max-width: 860px) {
  .pcal-side, .ptl-side { display: none; }
}
.ptl-scale-bottom span { padding: 0 4px; }

/* ---------------------------------------------------------------- Branding, Datenschutz, Rechtliches */
.brand-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex: none; }
.login-brand .brand-logo { width: 28px; height: 28px; }
.brand .ellipsis { min-width: 0; }
.login-lead { margin: -6px 0 0; color: var(--text-muted); white-space: pre-wrap; }
.login-privacy { font-size: calc(13px * var(--fs, 1)); }
.login-privacy a, .login-foot a { color: var(--text-muted); }
.login-privacy a:hover, .login-foot a:hover { color: var(--accent); }
.login-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; align-items: center; }
.login-foot-ver { width: 100%; text-align: center; }
.privacy-note { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 32px));
  padding: 10px 12px 10px 14px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-pop); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.privacy-note > .icon { color: var(--accent); flex: none; }
.privacy-text { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: calc(13px * var(--fs, 1)); }
.privacy-text a { color: var(--accent); }
.danger-card { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.info-note, .warn-note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: var(--r); font-size: calc(13px * var(--fs, 1)); margin: 0 0 12px; }
.info-note { background: color-mix(in srgb, var(--prio-normal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--prio-normal) 30%, transparent); color: var(--text); }
.warn-note { background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text); }
.info-note .icon, .warn-note .icon { flex: none; margin-top: 2px; }
.warn-note .icon { color: var(--danger); }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.brand-grid .form { display: flex; flex-direction: column; gap: 14px; }
.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.accent-row input[type=color] { width: 34px; height: 28px; padding: 2px; cursor: pointer; }
.accent-hex { width: 96px; }
.swatch:disabled { cursor: default; opacity: .5; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 30px; }
.logo-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); padding: 3px; }
.file-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.file-btn.is-disabled { opacity: .5; pointer-events: none; }
.brand-side { display: flex; flex-direction: column; gap: 6px; }
.brand-preview { --accent: var(--pa); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pop); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.brand-preview .brand-mark { background: var(--pa); }
.brand-preview .login-lead { margin: 0; font-size: calc(12px * var(--fs, 1)); }
.bp-field { height: 26px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.bp-btn { height: 30px; display: grid; place-items: center; border-radius: var(--r); background: var(--pa); color: var(--pon); font-weight: 600; font-size: calc(13px * var(--fs, 1)); }
.legal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.legal-text { min-height: 360px; font-size: calc(12.5px * var(--fs, 1)); line-height: 1.55; }
.legal-preview { min-height: 360px; max-height: 520px; overflow-y: auto; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.defaults-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 16px; margin-bottom: 10px; }
.admin-instance { display: contents; }
.admin-basic { display: contents; }
@media (max-width: 860px) {
  .brand-grid, .legal-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Live-Ansichten in Notizen (Shadow-Root, js/editor/embeds.js) */
:host { all: initial; display: block; color: var(--text); font: calc(13px * var(--fs, 1))/1.45 var(--font-text); white-space: normal; text-align: left; } /* nothing from the editor around (pre-wrap, caret …) leaks in */
.wbe { border: 1px solid var(--border); border-radius: var(--r-pop); background: var(--bg); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; user-select: text; }
.wbe-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.wbe-icon { display: inline-flex; color: var(--accent); flex: none; }
.wbe-title { font-weight: 600; min-width: 0; }
.wbe-head .dot { width: 8px; height: 8px; flex: none; }
.wbe-body { min-width: 0; }
.wbe-loading { margin: 8px 0; }
.wbe .ptable-wrap, .wbe .ptl-scroll { max-height: 420px; min-height: 120px; }
.wbe .pcal-side, .wbe .ptl-side { max-height: 420px; }
.wbe .pcal-week { min-height: 92px; }
.wbe .is-week .pcal-week { min-height: 220px; }
.wbe .board-cols { max-height: 460px; }
.wbe .plan { gap: 10px; }
.wbe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wbe-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 4px; border-radius: var(--r); }
.wbe-row:hover { background: var(--hover); }
.wbe-row + .wbe-row { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.wbe-chk { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--text-faint); background: none; color: transparent; cursor: pointer; padding: 0; }
.wbe-chk:hover { border-color: var(--accent); }
.wbe-row.is-progress .wbe-chk { border-color: var(--in-progress); border-style: dashed; }
.wbe-row.is-done .wbe-chk { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wbe-t { flex: 1; min-width: 0; display: flex; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 0; }
.wbe-t:hover .ellipsis { text-decoration: underline; text-decoration-color: var(--accent); }
.wbe-row.is-done .wbe-t .ellipsis { color: var(--text-muted); text-decoration: line-through; }
.wbe-meta { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.wbe-proj { display: inline-flex; align-items: center; gap: 5px; }
.wbe-more { margin: 6px 0 0; }
.embed-kinds { flex-wrap: wrap; }
.embed-kinds .seg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* Zeitleiste: month/year labels stay readable right of the label column while scrolling */
.ptl-scale-top span { overflow: clip; }
.ptl-scale-top span em { position: sticky; left: calc(var(--lw, 260px) + 8px); font-style: normal; white-space: nowrap; }

/* ---------------------------------------------------------------- QA: narrow windows and phones */
@media (max-width: 860px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .mcp-perm-row { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 600px) {
  /* wide tables scroll inside their card instead of pushing the page sideways */
  table.table { display: block; max-width: 100%; overflow-x: auto; contain: paint; }
  .mcp-perm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* hover actions would only take room from the title on a phone (the detail has them) */
  .todo-row .row-actions { display: none; }
  .done-row { flex-wrap: wrap; }
  .done-actions { order: 5; flex-basis: 100%; padding-left: 26px; opacity: 1; margin: 2px 0 0; }
}
.list-more { height: 1px; }

/* a scrolling table must not widen the page on phones (Chrome widens the layout viewport otherwise) */
.table-wrap { contain: paint; }

/* ---------------------------------------------------------------- Anhänge (js/components/attachments.js) */
.attachments { display: flex; flex-direction: column; gap: 8px; }
.att-head { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.att-pick { cursor: pointer; }
.att-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.att-empty { margin: 0; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.att-thumb { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.att-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.att-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-img:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.att-thumb-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.att-thumb:hover .att-thumb-actions, .att-thumb:focus-within .att-thumb-actions { opacity: 1; }
.att-thumb-actions .icon-btn { width: 24px; height: 24px; background: color-mix(in srgb, var(--bg) 85%, transparent); border-radius: var(--r); }
@media (hover: none) { .att-thumb-actions { opacity: 1; } }
.att-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.att-file { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: var(--r); min-width: 0; }
.att-file:hover { background: var(--hover); }
.att-kind { position: relative; display: inline-grid; place-items: center; width: 32px; height: 36px; flex: none; color: var(--text-muted); }
.att-kind .icon { width: 30px; height: 30px; }
.att-kind b { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; letter-spacing: .02em; color: var(--text); background: var(--surface-raised); padding: 0 2px; border-radius: 2px; max-width: 40px; overflow: hidden; }
.att-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-main a { color: var(--text); text-decoration: none; }
.att-main a:hover { color: var(--accent); }
.att-main .faint { font-size: calc(11px * var(--fs, 1)); }
.att-file.is-missing .att-main a { color: var(--text-muted); }
.att-uploads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.att-uploads li { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: center; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); }
.att-bar { display: block; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.att-bar i { display: block; height: 100%; background: var(--accent); transition: width .15s; }
.file-missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 8px; color: var(--text-muted); font-size: calc(11px * var(--fs, 1)); text-align: center; border: 1px dashed var(--border); border-radius: var(--r); }
.meta-attach { gap: 3px; font-variant-numeric: tabular-nums; }
.detail.is-dropping { box-shadow: inset 0 0 0 2px var(--accent); }
.detail.is-dropping::after { content: "Dateien hier ablegen"; position: absolute; inset: 12px; display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); border-radius: var(--r-pop); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); font-weight: 600; pointer-events: none; z-index: 40; }
@media (min-width: 1241px) { .detail { position: relative; } } /* below that it is fixed already */

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; background: rgba(12, 15, 21, .94); outline: none; }
.lb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text); min-width: 0; }
.lb-name { font-weight: 600; min-width: 0; }
.lb-bar .icon-btn { color: var(--text); }
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 64px 24px; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lb-stage .file-missing { width: 320px; height: 200px; font-size: calc(13px * var(--fs, 1)); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.lb-nav:hover { border-color: var(--accent); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 600px) { .lb-stage { padding: 8px 8px 24px; } .lb-nav { top: auto; bottom: 16px; transform: none; } }
.storage { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; max-width: 520px; }
.storage-line { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.storage-line b { color: var(--text); font-weight: 600; }
.storage-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.storage-bar i { display: block; height: 100%; background: var(--text-muted); }
.storage.is-full .storage-bar i { background: var(--danger); }
.storage.is-full .storage-line b { color: var(--danger); }
.storage .hint { margin: 0; }

/* ---------------------------------------------------------------- Seitenköpfe: Seitensymbol wie in Notion */
.page-icon-zone { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 14px; min-height: 22px; margin: 0 0 2px; }
.page-icon-big { display: inline-grid; place-items: center; padding: 4px; margin: 4px 0 2px -4px; border: 0; border-radius: var(--r); background: none; color: var(--text); cursor: pointer; }
.page-icon-big:hover { background: var(--hover); }
.page-icon-big .icon { width: 44px; height: 44px; stroke-width: 1.6; }
.pi-actions { display: flex; gap: 14px; opacity: 0; transition: opacity .12s ease-out; }
.pi-actions .link-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.pi-actions .link-btn:hover, .pi-actions .link-btn:focus-visible { color: var(--text-muted); text-decoration: none; }
.page-icon-zone:hover .pi-actions, .page-icon-zone:focus-within .pi-actions, .note-ed:has(.note-ed-head:hover) .pi-actions { opacity: 1; }
@media (hover: none) { .pi-actions { opacity: 1; } }

/* ---------------------------------------------------------------- Seitenverlauf (js/components/history.js) */
.history-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 100vw); z-index: 60; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(0, 0, 0, .35); }
.hist-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--border); min-width: 0; }
.hist-head h2 { font-size: calc(17px * var(--fs, 1)); }
.hist-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.hist-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.hist-list .hint { padding: 8px; }
.hist-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.hist-item:hover { background: var(--hover); }
.hist-item.active { background: var(--surface-raised); box-shadow: inset 2px 0 0 var(--accent); }
.hist-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hist-when { font-size: calc(13px * var(--fs, 1)); }
.hist-meta .faint { font-size: calc(12px * var(--fs, 1)); }
.hist-me { --c: var(--text-muted); }
.hist-now { flex: none; font-size: calc(11px * var(--fs, 1)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 10px; padding: 0 7px; }
.hist-view { overflow-y: auto; padding: 14px 24px 32px; min-width: 0; }
.hist-view-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hist-pick { margin-top: 40px; text-align: center; }
.hist-legend { margin: 0 0 12px; }
.hist-diff { white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(14px * var(--fs, 1)); line-height: 1.7; color: var(--text); }
.hist-diff ins, .hist-legend ins { text-decoration: none; background: color-mix(in srgb, var(--success) 16%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--success) 55%, transparent); border-radius: 2px; color: var(--text); }
.hist-diff del, .hist-legend del { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 70%, transparent); background: color-mix(in srgb, var(--text-faint) 12%, transparent); border-radius: 2px; }
.hist-title { font-size: calc(20px * var(--fs, 1)); margin-bottom: 10px; }
@media (max-width: 760px) {
  .hist-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .hist-list { max-height: 34vh; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------------------------------------------------------------- Öffentlicher Link (js/components/share.js) */
.public-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pl-head { display: flex; align-items: center; gap: 10px; }
.pl-head .share-head { margin: 0; }
.public-links > .hint { margin: 0; }
.pl-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.pl-meta { font-size: calc(12px * var(--fs, 1)); }
.pl-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-qr { align-self: flex-start; padding: 6px; background: #FFFFFF; border-radius: var(--r); }
.pl-qr .qr { display: block; }
.pl-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--r); }
.pl-expiry { max-width: 240px; }
.pub-label { flex: none; font-size: calc(10px * var(--fs, 1)); color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 0 5px; line-height: 15px; }
.hist-diff del + ins, .hist-diff ins + del { margin-left: 3px; }
[data-sec="calendar"] { --sec: #5BC0EB; }

/* ---------------------------------------------------------------- Seitenleiste eingeklappt (Strg+\): Symbolleiste mit Tooltips */
.side-collapse { flex: none; }
@media (min-width: 861px) {
  body.sidebar-collapsed { --sidebar-w: 52px; }
  body.sidebar-collapsed .sidebar { padding-left: 6px; padding-right: 6px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  body.sidebar-collapsed .sidebar .brand { flex-direction: column; gap: 6px; padding: 2px 0 10px; }
  body.sidebar-collapsed .sidebar .brand > .ellipsis, body.sidebar-collapsed .sidebar .brand > .grow,
  body.sidebar-collapsed .sidebar .search, body.sidebar-collapsed .sidebar .area-switch, body.sidebar-collapsed .sidebar .nav-label,
  body.sidebar-collapsed .sidebar .nav-item > span, body.sidebar-collapsed .sidebar .nav-item > .count, body.sidebar-collapsed .sidebar .nav-sub > span,
  body.sidebar-collapsed .sidebar .nav-section, body.sidebar-collapsed .sidebar .nav-empty, body.sidebar-collapsed .sidebar .archived,
  body.sidebar-collapsed .sidebar .clock, body.sidebar-collapsed .sidebar .side-user > .ellipsis, body.sidebar-collapsed .sidebar .side-local,
  body.sidebar-collapsed .sidebar .side-bell, body.sidebar-collapsed .sidebar .side-foot:has(.side-user) .side-gear, body.sidebar-collapsed .sidebar .side-foot > .grow { display: none !important; }
  body.sidebar-collapsed .sidebar .nav-item, body.sidebar-collapsed .sidebar .nav-sub { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  body.sidebar-collapsed .sidebar .nav-sub { margin-left: 0; }
  body.sidebar-collapsed .sidebar .nav-projects { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
  body.sidebar-collapsed .sidebar .nav-projects .dot { width: 10px; height: 10px; }
  body.sidebar-collapsed .sidebar .side-foot { justify-content: center; margin: 0 -6px -10px; padding: 6px 0 8px; position: relative; }
  body.sidebar-collapsed .sidebar .side-user { padding: 3px; }
  body.sidebar-collapsed .sidebar .side-foot .side-sync { position: absolute; left: 30px; bottom: 9px; pointer-events: none; }
}
@media (max-width: 860px) { .side-collapse { display: none; } }
/* Vorlagen: 1 px between the rows, the empty state centered in the whole dialog body */
.tpl-row + .tpl-row { border-top: 1px solid var(--border); border-top-left-radius: 0; border-top-right-radius: 0; }
.tpl-list:has(> .empty-state) { min-height: 260px; justify-content: center; }
.tpl-list > .empty-state { margin: 0 auto; }

/* Zeitleiste: Abhängigkeit zu einer Aufgabe außerhalb der Ansicht (anderes Projekt, anderer Bereich, gefiltert) */
.ptl-ext { position: absolute; z-index: 2; transform: translateY(-50%); max-width: 260px; height: 20px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-raised); color: var(--text-muted); font: inherit; font-size: calc(11.5px * var(--fs, 1)); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ptl-ext:hover { color: var(--text); border-color: var(--text-faint); }
.ptl-ext:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ptl-ext.is-conflict { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }
.ptl-ext.is-done { opacity: .6; }

/* Abhängigkeiten: wo die andere Aufgabe liegt (Bereich · Projekt) */
.dep-where { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: calc(12px * var(--fs, 1)); }
.dep-where .dot { width: 7px; height: 7px; }
.dep-link .dep-where { margin-left: auto; padding-left: 6px; }
.dep-opt .dep-where { margin-left: 8px; }
.dep-opt.is-done .ellipsis { color: var(--text-muted); text-decoration: line-through; }
.dep-pop-head { padding: 6px 8px 4px; font-size: calc(11.5px * var(--fs, 1)); color: var(--text-muted); font-weight: 600; }
.dep-pop-head .faint { font-weight: 400; }

/* Seitenleiste: geteilte Projekte, Kontextmenü per langem Druck */
.side-shared { flex: none; display: inline-flex; align-items: center; color: var(--text-faint); margin-left: 2px; }
.nav-item:hover .side-shared, .nav-item.active .side-shared { color: var(--text-muted); }
.nav-shared-label { margin-top: 12px; }
.sidebar .nav-item, .board-tab, .lk-row, .group-head, .fchip { -webkit-touch-callout: none; }

/* Funktionen vorgeben: Matrix Funktion × Stufe */
.pm-table th, .pm-table td { white-space: nowrap; }
.pm-table thead th { font-size: calc(12px * var(--fs, 1)); vertical-align: bottom; }
.pm-table thead th small { display: block; font-weight: 400; }
.pm-table tbody th { font-weight: 500; text-align: left; }
.pm-cell { padding-top: 5px; padding-bottom: 5px; }
.pm-seg .seg { padding: 3px 9px; font-size: calc(12px * var(--fs, 1)); }
.pm-seg .seg.active.is-deny { color: var(--danger); }
.pm-ro { color: var(--text-faint); }
.pm-ro.is-deny { color: var(--danger); }
.pm-effect { margin-top: 12px; }
.pm-effect-list { margin: 6px 0 10px; padding-left: 18px; display: grid; gap: 4px; font-size: calc(13px * var(--fs, 1)); }
.feature-row.is-policy .hint { color: var(--text-muted); }
.feature-row.is-policy .hint { display: flex; align-items: center; gap: 5px; }
.danger-text { color: var(--danger); }
.pm-seg:not(.pm-seg-server) .seg.active[data-value="inherit"] { font-weight: 500; color: var(--text-muted); background: var(--hover); }
.pm-seg .seg.active[data-value="allow"] { color: var(--success); }
.pm-table { width: auto; min-width: min(100%, 560px); }
.pm-table tbody th { padding-right: 32px; }
.space-overview-switch { margin: 12px 0 10px; }
.email-line { display: flex; gap: 8px; align-items: center; } .email-line input { flex: 1; min-width: 0; }
.warn-text { color: var(--prio-high); }
.wbe-off { margin: 8px 12px 12px; }
.feature-group { margin-top: 16px; }
.feature-group-head { margin: 0 0 6px; font-size: calc(12px * var(--fs, 1)); font-weight: 600; color: var(--text-muted); }
.pm-table tbody th, .pm-table td { padding-top: 4px; padding-bottom: 4px; }

/* Projektkopf: Aktionen als Gruppe; wird es eng (Detailbereich offen), nur noch Symbole mit Tooltip */
.view-head { container-type: inline-size; }
.head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
@container (max-width: 820px) {
  .head-actions .lbl { display: none; }
  .head-actions .btn { padding-left: 9px; padding-right: 9px; }
}

/* Server-Verwaltung → Zustand: ruhige Karten, Hinweise oben in Klartext */
.hl-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.hl-top > :first-child { flex: 1; min-width: 0; }
.hl-meta { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 4px; font-size: calc(12px * var(--fs, 1)); }
.hl-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 7px; color: var(--text-muted); }
.hl-ok .icon { color: var(--success); }
.hl-warnings { padding: 14px 18px; border-color: color-mix(in srgb, var(--prio-high) 45%, var(--border)); }
.hl-warnings h2 { margin: 0 0 8px; font-size: calc(14px * var(--fs, 1)); }
.hl-warnings ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hl-warnings li { display: flex; gap: 8px; align-items: flex-start; }
.hl-warnings li .icon { flex: none; margin-top: 2px; color: var(--prio-high); }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.hl-card { padding: 16px 18px; display: flex; flex-direction: column; }
.hl-card h2 { margin: 0 0 10px; font-size: calc(15px * var(--fs, 1)); }
.hl-card .card-head { margin-bottom: 10px; }
.hl-card .card-head h2 { margin: 0; }
.hl-sub { font-size: calc(12px * var(--fs, 1)); font-weight: 400; margin-left: 4px; }
.hl-list { margin: 0; display: grid; gap: 0; }
.hl-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: calc(13px * var(--fs, 1)); }
.hl-row:first-child { border-top: 0; }
.hl-row dt { color: var(--text-muted); }
.hl-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hl-row.is-error dd { color: var(--danger); }
.hl-row.is-warn dd { color: var(--prio-high); }
.hl-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--hover); overflow: hidden; max-width: 260px; }
.hl-bar i { display: block; height: 100%; background: var(--text-faint); }
.hl-link { margin-top: auto; padding-top: 10px; align-self: flex-start; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); }
.hl-link:hover { color: var(--text); }
@media (max-width: 600px) { .hl-row { grid-template-columns: 1fr; gap: 2px; } .hl-top { flex-direction: column; } }
.pm-ro.is-default { color: var(--text-muted); font-style: normal; }
.hl-grid > .card { margin: 0; }
.hl-card > h2, .hl-card .card-head { min-height: 28px; display: flex; align-items: center; margin: 0 0 8px; }
.hl-card .card-head h2 { margin: 0; }

/* Vorgaben → App-Updates */
.cu-list { display: grid; gap: 0; margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--r-pop); }
.cu-row { padding: 10px 14px; }
.cu-row + .cu-row { border-top: 1px solid var(--border); }
.cu-head { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fs, 1)); }
.cu-head b { min-width: 70px; }
.cu-head .faint { font-size: calc(12px * var(--fs, 1)); }
.cu-notes { margin-top: 6px; white-space: pre-line; color: var(--text-muted); font-size: calc(12.5px * var(--fs, 1)); }
.cu-problem { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; color: var(--text-muted); font-size: calc(12.5px * var(--fs, 1)); }
.cu-problem .icon { flex: none; margin-top: 2px; color: var(--prio-high); }
.cu-switches { margin-bottom: 12px; }
.cu-min input { max-width: 160px; font-family: var(--font-mono); }
.hl-note { color: var(--prio-high); }
.cu-min { justify-content: flex-start; }
.cu-min .field { flex: 0 0 auto; }

/* Termine aus verbundenen Kalendern: nur lesbar, umrandet in der Farbe des Kalenders – kein Häkchen, keine Fläche */
.pcal-ev { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; margin: 0 3px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  border-radius: 5px; background: transparent; font: inherit; font-size: calc(12px * var(--fs, 1)); color: var(--text-muted); text-align: left; cursor: pointer; }
.pcal-ev:hover { color: var(--text); background: color-mix(in srgb, var(--c) 8%, transparent); }
.pcal-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pcal-ev.cut-l { margin-left: 0; border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pcal-ev.cut-r { margin-right: 0; border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pcal-ev-time { flex: none; font-size: calc(11px * var(--fs, 1)); color: var(--c); }
.pcal-events-btn:not(.is-on) { color: var(--text-faint); }
.ev-ring { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c); }
.pop-ev .faint { flex: none; margin-left: auto; font-size: calc(11px * var(--fs, 1)); }
.ev-pop { min-width: 260px; max-width: 360px; }
.ev-detail { display: grid; gap: 6px; padding: 4px 2px; font-size: calc(13px * var(--fs, 1)); }
.ev-detail-head { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs, 1)); }
.ev-detail-row { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted); }
.ev-detail-row .icon { flex: none; margin-top: 2px; }
.ev-detail-src { font-size: calc(12px * var(--fs, 1)); padding-top: 4px; border-top: 1px solid var(--border); }
/* Zeitleiste: Zeile „Termine“ mit dünnen Blöcken */
.ptl-evlabel { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-muted); }
.ptl-evrow { background: transparent; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.ptl-ev { position: absolute; z-index: 2; height: 10px; padding: 0; border: 1px solid color-mix(in srgb, var(--c) 75%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--c) 14%, transparent); cursor: pointer; }
.ptl-ev:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
.ptl-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ptl-key-ev { display: inline-block; width: 16px; height: 8px; border-radius: 2px; border: 1px solid var(--text-faint); vertical-align: middle; }
/* Heute: Termine heute */
.today-events { margin: 0 0 14px; padding: 10px 12px 8px; border: 1px solid var(--border); border-radius: var(--r-pop); background: var(--surface); }
.te-head { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); font-weight: 600; margin-bottom: 4px; }
.te-head .faint { font-weight: 400; }
.te-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.te-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 5px 6px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; font-size: calc(13px * var(--fs, 1)); text-align: left; cursor: pointer; }
.te-item:hover { background: var(--hover); }
.te-time { flex: none; min-width: 108px; color: var(--text-muted); font-size: calc(12px * var(--fs, 1)); }
.te-title { flex: 1; }
.te-loc { flex: none; max-width: 40%; font-size: calc(12px * var(--fs, 1)); }
@media (max-width: 600px) { .te-time { min-width: 0; } .te-loc { display: none; } }
/* Konto → Kalender */
.cal-card.is-off { opacity: .75; }
.cal-card .card-head .dot-lg { flex: none; }
.cal-facts { margin: 4px 0 6px; }
.cal-facts .hl-row { grid-template-columns: 110px 1fr; }
.cal-actions { display: flex; gap: 8px; margin-top: 8px; }
.cal-tabs { display: flex; flex-wrap: wrap; margin-bottom: 14px; }
.cal-tabs .seg { padding: 6px 12px; }
.cal-howto { margin: 4px 0 8px; font-size: calc(13px * var(--fs, 1)); color: var(--text-muted); }
.cal-howto summary { cursor: pointer; color: var(--text); }
.cal-howto p { margin: 6px 0 0; }
.cal-found { display: grid; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-pop); padding: 4px; max-height: 240px; overflow-y: auto; }
.cal-found-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r); cursor: pointer; }
.cal-found-row:hover { background: var(--hover); }
.cal-found-row .ellipsis { flex: 1; }
.cal-write { display: grid; gap: 8px; margin: 2px 0 0 26px; }
.cal-write .segments { justify-self: start; }
.cal-write .seg { cursor: pointer; }
.cal-projects { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cal-error { margin: 4px 0 0; }
.view-cloud .card-head h2 { margin: 0; }

/* Offene Einladungslinks (Gruppen, Unternehmen) */
.invite-list { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.invite-list-head { font-size: calc(13px * var(--fs, 1)); font-weight: 600; margin-bottom: 4px; }
.invite-list-head .faint { font-weight: 400; }
.invite-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 0; font-size: calc(13px * var(--fs, 1)); }
.invite-row + .invite-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.invite-row .grow { flex: 1; }
.invite-row .ellipsis { min-width: 0; }