/* ═══════════════════════════════════════════════════════════════════
   TOKENS · identisch zu design-system.html
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg-app:#050506; --bg-base:#0a0a0c; --bg-surface:#0f0f12; --bg-raised:#141418; --bg-elevated:#1a1a1f;
  --bg-hover:rgba(255,255,255,.035); --bg-active:rgba(255,255,255,.06); --bg-selected:rgba(255,255,255,.08);
  --bg-inset:rgba(0,0,0,.28);   /* versenkte Flächen: readonly, gesperrt (design.md §2.1) */
  --border-faint:#16161a; --border-subtle:#1e1e23; --border-default:#26262c; --border-strong:#35353d; --border-focus:#5b5be0;
  --text-primary:#f4f4f5; --text-secondary:#a4a4ad; --text-tertiary:#71717d; --text-quaternary:#52525c; --text-disabled:#3d3d45; --text-inverse:#0a0a0c;
  --blue:#5b8def;   --blue-soft:rgba(91,141,239,.13);  --blue-line:rgba(91,141,239,.26);
  --violet:#a78bfa; --violet-soft:rgba(167,139,250,.13); --violet-line:rgba(167,139,250,.26);
  --green:#4ade80;  --green-soft:rgba(74,222,128,.12);  --green-line:rgba(74,222,128,.24);
  --lime:#bef264;   --lime-soft:rgba(190,242,100,.11);  --lime-line:rgba(190,242,100,.22);
  --amber:#fbbf24;  --amber-soft:rgba(251,191,36,.12);  --amber-line:rgba(251,191,36,.24);
  --orange:#fb923c; --orange-soft:rgba(251,146,60,.12); --orange-line:rgba(251,146,60,.24);
  --red:#f87171;    --red-soft:rgba(248,113,113,.12);   --red-line:rgba(248,113,113,.26);
  --pink:#f472b6;   --cyan:#22d3ee;  --cyan-soft:rgba(34,211,238,.12); --cyan-line:rgba(34,211,238,.24);
  --teal:#2dd4bf;   --teal-soft:rgba(45,212,191,.12);  --teal-line:rgba(45,212,191,.24);
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:15px;
  --fs-xl:17px; --fs-2xl:20px; --fs-3xl:24px; --fs-4xl:30px;
  --ls-caps:.08em;
  --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px; --sp-7:14px; --sp-8:16px;
  --sp-9:20px; --sp-10:24px; --sp-12:32px; --sp-13:40px; --sp-16:64px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:14px; --r-3xl:18px; --r-4xl:22px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(0,0,0,.4); --sh-sm:0 2px 6px rgba(0,0,0,.4); --sh-md:0 6px 18px rgba(0,0,0,.45);
  --sh-lg:0 16px 40px rgba(0,0,0,.55); --sh-xl:0 28px 70px rgba(0,0,0,.65);
  --sh-inner:inset 0 1px 0 rgba(255,255,255,.04); --sh-ring:0 0 0 3px rgba(120,120,255,.22);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --control-h-xs:24px; --control-h-sm:28px; --control-h-md:34px; --header-h:56px;
}

/* ═══════════════ RESET ═══════════════ */
*,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.5;letter-spacing:-.01em;
  color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;min-height:100vh}
button,input,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer} a{color:inherit;text-decoration:none} svg{display:block} table{border-collapse:collapse}
:focus{outline:none}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:rgba(120,120,255,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--r-full);border:3px solid var(--bg-base)}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
[hidden]{display:none !important}
.icon{width:16px;height:16px;flex:none;stroke-width:1.8}
.icon-sm{width:14px;height:14px} .icon-lg{width:20px;height:20px} .icon-xl{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ═══════════════ GERÜST ═══════════════ */
.appbar{height:var(--header-h);display:flex;align-items:center;gap:var(--sp-6);padding:0 var(--sp-9);
  border-bottom:1px solid var(--border-faint);background:var(--bg-app);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:var(--sp-5)}
.brand-mark{width:24px;height:24px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#3f3f46,#18181b);color:#e4e4e7;box-shadow:var(--sh-xs)}
.brand-mark svg{width:13px;height:13px}
.brand-name{font-size:var(--fs-md);font-weight:var(--fw-semibold);letter-spacing:-.02em}
.wrap{max-width:1420px;margin:0 auto;padding:var(--sp-10) var(--sp-12) var(--sp-16)}

.page-title{display:flex;align-items:center;gap:var(--sp-5)}
.page-title h1{font-size:var(--fs-3xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;line-height:1.2}
.page-sub{font-size:var(--fs-base);color:var(--text-tertiary);margin-top:var(--sp-3)}

/* ═══════════════ KPI-KARTEN ═══════════════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--sp-6);margin-top:var(--sp-10)}
.kpi{padding:var(--sp-8);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-2xl);text-align:left;transition:all var(--dur-base) var(--ease-out)}
.kpi:hover{border-color:var(--border-default);background:var(--bg-raised);transform:translateY(-2px);box-shadow:var(--sh-md)}
.kpi.is-on{border-color:var(--border-strong);background:var(--bg-raised);box-shadow:var(--sh-inner)}
.kpi-label{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--text-tertiary)}
.kpi-value{font-size:var(--fs-4xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  line-height:1;margin-top:var(--sp-5)}
.kpi-foot{font-size:var(--fs-sm);color:var(--text-quaternary);margin-top:var(--sp-4)}
.kpi-bar{height:3px;border-radius:var(--r-full);background:var(--bg-elevated);margin-top:var(--sp-5);overflow:hidden}
.kpi-bar i{display:block;height:100%;border-radius:inherit}

/* ═══════════════ TOOLBAR ═══════════════ */
.bar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-12)}
.filters{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7)}
.searchbox{display:flex;align-items:center;gap:var(--sp-4);width:300px;max-width:100%;height:var(--control-h-md);
  padding:0 var(--sp-6);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);color:var(--text-tertiary);transition:all var(--dur-fast)}
.searchbox:focus-within{border-color:var(--border-strong);background:var(--bg-raised);box-shadow:var(--sh-ring)}
.searchbox input{flex:1;min-width:0;font-size:var(--fs-md);color:var(--text-primary)}
.searchbox input::placeholder{color:var(--text-quaternary)}

.segmented{display:inline-flex;padding:3px;gap:2px;background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--r-lg)}
.segmented button{display:inline-flex;align-items:center;gap:var(--sp-4);height:28px;padding:0 var(--sp-6);
  border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-tertiary);
  transition:all var(--dur-fast) var(--ease-out)}
.segmented button:hover{color:var(--text-primary);background:var(--bg-hover)}
.segmented button.is-on{background:var(--bg-elevated);color:var(--text-primary);box-shadow:var(--sh-xs),var(--sh-inner)}

.filter-chip{display:inline-flex;align-items:center;gap:var(--sp-4);height:32px;padding:0 var(--sp-5) 0 var(--sp-6);
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-full);
  font-size:var(--fs-md);color:var(--text-secondary);transition:all var(--dur-fast)}
.filter-chip:hover{border-color:var(--border-default);color:var(--text-primary);background:var(--bg-raised)}
.filter-chip.is-set{color:var(--text-primary);border-color:var(--border-default)}
.filter-chip .icon:first-child{color:var(--text-quaternary)}
.filter-chip-val{color:var(--text-primary);font-weight:var(--fw-medium)}
.filter-chip-add{border-style:dashed;color:var(--text-tertiary)}

/* ═══════════════ TABELLE ═══════════════ */
.table-wrap{border:1px solid var(--border-subtle);border-radius:var(--r-2xl);background:var(--bg-surface);margin-top:var(--sp-8)}
.table-scroll{border-radius:inherit}
@media (max-width:1400px){.table-scroll{overflow-x:auto}}
.table{width:100%;font-size:var(--fs-md);min-width:1180px}
.table th{text-align:left;height:40px;padding:0 var(--sp-7);white-space:nowrap;font-size:var(--fs-md);
  font-weight:var(--fw-medium);color:var(--text-tertiary);background:var(--bg-base);
  border-bottom:1px solid var(--border-subtle);border-right:1px solid var(--border-default)}
.table th:last-child{border-right:none}
.table th:first-child{border-top-left-radius:13px} .table th:last-child{border-top-right-radius:13px}
.th-in{display:flex;align-items:center;gap:var(--sp-4)}
.table th .icon{color:var(--text-quaternary);width:14px;height:14px}
.table th.sortable{cursor:pointer;user-select:none}
.table th.sortable:hover{color:var(--text-primary);background:var(--bg-raised)}
.table th .sort{margin-left:auto;opacity:0;transition:opacity var(--dur-fast)}
.table th.sortable:hover .sort,.table th.is-sorted .sort{opacity:1}
.table th.is-sorted{color:var(--text-primary)}
.table td{height:56px;padding:0 var(--sp-7);border-bottom:1px solid var(--border-faint);
  border-right:1px solid var(--border-default);color:var(--text-secondary);white-space:nowrap}
.table td:last-child{border-right:none}
.table tbody tr{transition:background var(--dur-fast)}
.table tbody tr:hover{background:var(--bg-hover)}
.table tbody tr.is-sel{background:var(--bg-active)}
.table tbody tr:last-child td{border-bottom:none}
.col-check{width:46px;padding-right:0 !important}
/* Ausrichtung nach Inhaltstyp: .c zentriert (kategorial) · .r rechts (Zahlen) */
.table th.c,.table td.c{text-align:center} .table th.c .th-in{justify-content:center}
.table th.r,.table td.r{text-align:right}  .table th.r .th-in{justify-content:flex-end}
.table th.c .sort,.table th.r .sort{margin-left:0}
.cell-name{display:flex;align-items:center;gap:var(--sp-5);color:var(--text-primary);font-weight:var(--fw-medium)}
.cell-sub{font-size:var(--fs-sm);color:var(--text-quaternary);font-weight:var(--fw-normal)}
.cell-mail{color:var(--text-tertiary);text-decoration:underline;text-decoration-color:var(--border-default);
  text-underline-offset:3px;transition:all var(--dur-fast)}
.cell-mail:hover{color:var(--text-secondary)}
.cell-money{font-variant-numeric:tabular-nums;color:var(--text-primary);font-weight:var(--fw-medium)}
.cell-actions{display:flex;gap:var(--sp-3);align-items:center;justify-content:flex-end}

/* ═══════════════ STATUS-AUSWAHL (inline) ═══════════════ */
.status-pick{position:relative;display:inline-flex}
.status-pick>summary{list-style:none;cursor:pointer}
.status-pick>summary::-webkit-details-marker{display:none}
.status-btn{display:inline-flex;align-items:center;gap:var(--sp-4);height:26px;padding:0 var(--sp-4) 0 var(--sp-5);
  border-radius:var(--r-sm);border:1px solid transparent;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  white-space:nowrap;transition:all var(--dur-fast)}
.status-btn:hover{filter:brightness(1.25)}
.status-btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status-btn .chev{width:11px;height:11px;opacity:.6}
.st-neu{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.st-kontaktiert{background:var(--cyan-soft);color:var(--cyan);border-color:var(--cyan-line)}
.st-interesse{background:var(--violet-soft);color:var(--violet);border-color:var(--violet-line)}
.st-angebot{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.st-gewonnen{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.st-kein{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}

/* ═══════════════ PIPELINE ═══════════════ */
.pipeline{display:flex;gap:var(--sp-6);margin-top:var(--sp-8);overflow-x:auto;padding-bottom:var(--sp-6)}
.pipe-col{width:266px;flex:none;display:flex;flex-direction:column;gap:var(--sp-5)}
.pipe-head{display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-3);font-size:var(--fs-md);font-weight:var(--fw-medium)}
.pipe-sum{margin-left:auto;font-size:var(--fs-sm);color:var(--text-quaternary);font-variant-numeric:tabular-nums}
.pipe-card{padding:var(--sp-6);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);display:flex;flex-direction:column;gap:var(--sp-5);cursor:pointer;
  transition:all var(--dur-base) var(--ease-out);text-align:left;width:100%}
.pipe-card:hover{border-color:var(--border-default);background:var(--bg-raised);transform:translateY(-2px);box-shadow:var(--sh-md)}
.pipe-empty{padding:var(--sp-9) var(--sp-6);border:1.5px dashed var(--border-subtle);border-radius:var(--r-xl);
  text-align:center;font-size:var(--fs-sm);color:var(--text-quaternary)}

/* ═══════════════ BULK-LEISTE ═══════════════ */
.bulkbar{display:none;align-items:center;gap:var(--sp-6);margin-top:var(--sp-7);
  padding:var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-8);background:var(--bg-elevated);
  border:1px solid var(--border-default);border-radius:var(--r-xl);box-shadow:var(--sh-sm);
  animation:slide-down var(--dur-base) var(--ease-out);flex-wrap:wrap}
.bulkbar.is-on{display:flex}
.bulk-count{font-size:var(--fs-md);font-weight:var(--fw-medium)}
.bulk-count b{font-variant-numeric:tabular-nums}

/* ═══════════════ BUTTONS · BADGES ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);height:var(--control-h-md);
  padding:0 var(--sp-7);border-radius:var(--r-lg);border:1px solid transparent;font-size:var(--fs-md);
  font-weight:var(--fw-medium);white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform 60ms,opacity var(--dur-fast)}
.btn:active{transform:translateY(.5px) scale(.985)}
.btn:disabled{opacity:.42;pointer-events:none}
.btn-sm{height:var(--control-h-sm);padding:0 var(--sp-5);font-size:var(--fs-sm);border-radius:var(--r-md);gap:var(--sp-3)}
.btn-sm .icon{width:14px;height:14px}
.btn-primary{background:#fafafa;color:var(--text-inverse);box-shadow:var(--sh-xs)}
.btn-primary:hover{background:#fff;box-shadow:var(--sh-sm)}
.btn-secondary{background:var(--bg-raised);color:var(--text-primary);border-color:var(--border-default);box-shadow:var(--sh-inner)}
.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--border-strong)}
.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-ghost.is-on{background:var(--bg-active);color:var(--text-primary)}
.btn-split{display:inline-flex;align-items:stretch}
.btn-split>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:var(--sp-6)}
.btn-row{display:inline-flex;align-items:center;gap:var(--sp-3);height:26px;padding:0 var(--sp-5);
  background:var(--bg-raised);border:1px solid var(--border-faint);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text-tertiary);white-space:nowrap;transition:all var(--dur-fast) var(--ease-out)}
.btn-row .icon{width:12px;height:12px}
.btn-row:hover{background:var(--bg-elevated);border-color:var(--border-subtle);color:var(--text-primary)}
.iconbtn{display:inline-grid;place-items:center;width:var(--control-h-md);height:var(--control-h-md);
  border-radius:var(--r-lg);color:var(--text-tertiary);border:1px solid transparent;transition:all var(--dur-fast) var(--ease-out)}
.iconbtn:hover{background:var(--bg-hover);color:var(--text-primary)}
.iconbtn:active{transform:scale(.94)}
.iconbtn-sm{width:var(--control-h-sm);height:var(--control-h-sm);border-radius:var(--r-md)}
.iconbtn-xs{width:22px;height:22px;border-radius:var(--r-sm)} .iconbtn-xs .icon{width:13px;height:13px}
.iconbtn-star.is-on{color:var(--amber)} .iconbtn-star.is-on svg{fill:currentColor}

.badge{display:inline-flex;align-items:center;gap:var(--sp-3);height:22px;padding:0 var(--sp-5);
  border-radius:var(--r-sm);border:1px solid transparent;font-size:var(--fs-xs);font-weight:var(--fw-medium);white-space:nowrap}
.badge .icon{width:11px;height:11px}
.badge-neutral{background:var(--bg-elevated);color:var(--text-tertiary);border-color:var(--border-subtle)}
.badge-blue{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.badge-violet{background:var(--violet-soft);color:var(--violet);border-color:var(--violet-line)}
.badge-green{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.badge-amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.badge-red{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
.badge-count{min-width:20px;height:20px;padding:0 var(--sp-3);display:inline-grid;place-items:center;
  border-radius:var(--r-sm);background:var(--bg-elevated);border:1px solid var(--border-subtle);
  font-size:var(--fs-xs);color:var(--text-secondary);font-variant-numeric:tabular-nums}

.avatar{flex:none;border-radius:var(--r-full);display:grid;place-items:center;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:#fff;user-select:none;width:30px;height:30px}
.avatar-xs{width:20px;height:20px;font-size:var(--fs-2xs)}
.avatar-sm{width:24px;height:24px;font-size:var(--fs-2xs)}
.avatar-lg{width:40px;height:40px;font-size:var(--fs-base)}
.av-1{background:linear-gradient(140deg,#60a5fa,#3b82f6)} .av-2{background:linear-gradient(140deg,#f472b6,#db2777)}
.av-3{background:linear-gradient(140deg,#34d399,#059669)} .av-4{background:linear-gradient(140deg,#a78bfa,#7c3aed)}
.av-5{background:linear-gradient(140deg,#fbbf24,#f97316)} .av-6{background:linear-gradient(140deg,#22d3ee,#0891b2)}
.av-7{background:linear-gradient(140deg,#fb7185,#e11d48)} .av-8{background:linear-gradient(140deg,#818cf8,#4f46e5)}

.check{display:inline-flex;align-items:center;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check-box{width:17px;height:17px;flex:none;position:relative;border:1.5px solid var(--border-strong);
  border-radius:var(--r-xs);background:var(--bg-surface);display:grid;place-items:center;
  transition:all var(--dur-fast) var(--ease-out)}
.check-box svg{width:11px;height:11px;stroke:var(--text-inverse);stroke-width:3;fill:none;opacity:0;
  transform:scale(.5);transition:all var(--dur-fast) var(--ease-spring)}
.check:hover .check-box{border-color:var(--text-quaternary)}
.check input:checked+.check-box{background:#fafafa;border-color:#fafafa}
.check input:checked+.check-box svg{opacity:1;transform:scale(1)}
.check input:focus-visible+.check-box{box-shadow:var(--sh-ring)}

.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--sp-3);
  background:var(--bg-elevated);border:1px solid var(--border-default);border-bottom-width:2px;
  border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-tertiary)}
.divider{height:1px;background:var(--border-faint)}
.divider-v{width:1px;background:var(--border-subtle);align-self:stretch}
.sect-label{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-quaternary)}
.t-3{color:var(--text-tertiary)} .t-4{color:var(--text-quaternary)}
.t-sm{font-size:var(--fs-sm)} .t-md{font-size:var(--fs-md)}

/* ═══════════════ PAGINATION ═══════════════ */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;padding-top:var(--sp-7)}
.pager-info{font-size:var(--fs-md);color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.pagination{display:flex;align-items:center;gap:var(--sp-2)}
.pagination button{min-width:30px;height:30px;padding:0 var(--sp-4);border-radius:var(--r-md);
  display:inline-grid;place-items:center;font-size:var(--fs-md);color:var(--text-tertiary);
  font-variant-numeric:tabular-nums;border:1px solid transparent;transition:all var(--dur-fast)}
.pagination button:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}
.pagination button.is-on{background:var(--bg-active);border-color:var(--border-subtle);color:var(--text-primary);font-weight:var(--fw-medium)}
.pagination button:disabled{opacity:.3;pointer-events:none}

/* ═══════════════ MENÜS ═══════════════ */
.menu-wrap{position:relative;display:inline-flex}
.menu-wrap>summary{list-style:none;cursor:pointer}
.menu-wrap>summary::-webkit-details-marker{display:none}
.menu-wrap[open]{z-index:40}
.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:218px;padding:var(--sp-3);
  background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);animation:menu-in var(--dur-base) var(--ease-out)}
.menu-left{right:auto;left:0}
/* `min-height` statt `height`: ein langer Eintrag wie „Transferdruckerei
   (Druckdienst Roman Nötzel)" bricht auf zwei Zeilen um und lief bei fester
   Höhe über den Nachbarn. Die Polsterung sorgt dafür, dass zwei Zeilen Luft
   nach oben und unten behalten. */
.menu-item{display:flex;align-items:center;gap:var(--sp-5);width:100%;
  min-height:32px;padding:var(--sp-4) var(--sp-5);line-height:1.35;
  border-radius:var(--r-md);font-size:var(--fs-md);color:var(--text-secondary);text-align:left;transition:all 60ms}
.menu-item .icon{flex:none}
.menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.menu-item .icon{color:var(--text-quaternary)}
.menu-item:hover .icon{color:var(--text-secondary)}
.menu-item.is-danger{color:var(--red)} .menu-item.is-danger .icon{color:var(--red)}
.menu-item.is-danger:hover{background:var(--red-soft)}
.menu-item .kbd{margin-left:auto}
.menu-sep{height:1px;background:var(--border-subtle);margin:var(--sp-3) calc(var(--sp-3) * -1)}
.menu-label{padding:var(--sp-4) var(--sp-5) var(--sp-3);font-size:var(--fs-2xs);text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--text-quaternary);font-weight:var(--fw-semibold)}
.opt-check{width:15px;height:15px;flex:none;opacity:0}
.menu-item.is-sel .opt-check{opacity:1;color:var(--text-primary)} .menu-item.is-sel{color:var(--text-primary)}
.st-swatch{width:9px;height:9px;border-radius:50%;flex:none}

/* Custom Select */
.cselect{position:relative;display:inline-flex;width:100%}
.cselect>summary{list-style:none;cursor:pointer;width:100%}
.cselect>summary::-webkit-details-marker{display:none}
.cselect>summary:focus-visible .cselect-btn{box-shadow:var(--sh-ring);border-color:var(--border-strong)}
.cselect-btn{display:flex;align-items:center;gap:var(--sp-4);width:100%;height:var(--control-h-md);
  padding:0 var(--sp-5) 0 var(--sp-6);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);font-size:var(--fs-md);color:var(--text-primary);transition:all var(--dur-fast) var(--ease-out)}
.cselect-btn:hover{border-color:var(--border-default);background:var(--bg-raised)}
.cselect[open] .cselect-btn{border-color:var(--border-strong);background:var(--bg-raised)}
.cselect-btn .chev{margin-left:auto;color:var(--text-quaternary);transition:transform var(--dur-base) var(--ease-out)}
.cselect[open] .cselect-btn .chev{transform:rotate(180deg)}
.cselect .menu{left:0;right:auto;min-width:0;width:100%}

/* ═══════════════ DRAWER · DIALOGE ═══════════════ */
dialog{margin:auto;border:none;padding:0;background:none;color:inherit;max-width:none;max-height:none}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px);animation:fade-in var(--dur-base) var(--ease-out)}
dialog.drawer-host{margin:0 0 0 auto;width:min(96vw,480px);height:100vh;max-height:100vh}
.drawer{width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-raised);
  border-left:1px solid var(--border-default);box-shadow:var(--sh-xl);animation:slide-left var(--dur-slow) var(--ease-out)}
.drawer-head{display:flex;align-items:flex-start;gap:var(--sp-6);padding:var(--sp-8) var(--sp-9);
  border-bottom:1px solid var(--border-faint)}
.drawer-body{flex:1;overflow-y:auto;padding:var(--sp-9)}
.drawer-foot{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-9);
  border-top:1px solid var(--border-faint)}
.modal{position:relative;width:min(92vw,560px);max-height:86vh;display:flex;flex-direction:column;
  background:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--r-3xl);
  box-shadow:var(--sh-xl);animation:modal-in var(--dur-slow) var(--ease-out)}
.modal-sm{width:min(92vw,410px)} .modal-lg{width:min(94vw,680px)}
.modal-head{display:flex;align-items:flex-start;gap:var(--sp-6);padding:var(--sp-9) var(--sp-9) var(--sp-6)}
.modal-icon{width:36px;height:36px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none}
.modal-title{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:-.02em}
.modal-desc{font-size:var(--fs-md);color:var(--text-secondary);margin-top:var(--sp-3);line-height:1.55}
.modal-body{padding:0 var(--sp-9) var(--sp-7);overflow-y:auto}
/* Solange ein Auswahlfeld offen ist, darf sein Menü über den scrollenden Rand
   des Dialogs hinausragen — sonst wird ein Dropdown weiter unten abgeschnitten. */
.modal-body:has(.cselect[open]){overflow:visible}
.modal-foot{display:flex;align-items:center;gap:var(--sp-4);justify-content:flex-end;padding:var(--sp-7) var(--sp-9);
  border-top:1px solid var(--border-faint)}
.modal-x{position:absolute;top:var(--sp-6);right:var(--sp-6)}

.field{display:flex;flex-direction:column;gap:var(--sp-4)}
.field-label{font-size:var(--fs-md);font-weight:var(--fw-medium)}
.field-req{color:var(--red)} .field-opt{color:var(--text-quaternary);font-weight:var(--fw-normal);font-size:var(--fs-sm)}
.field-hint{font-size:var(--fs-sm);color:var(--text-tertiary)}
.input{width:100%;height:var(--control-h-md);padding:0 var(--sp-6);background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--r-lg);font-size:var(--fs-md);
  color:var(--text-primary);transition:all var(--dur-fast)}
.input:focus{border-color:var(--border-strong);background:var(--bg-raised);box-shadow:var(--sh-ring)}
.input::placeholder{color:var(--text-quaternary)}
textarea.input{height:auto;min-height:84px;padding:var(--sp-5) var(--sp-6);resize:vertical;line-height:1.6}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
.form-grid .full{grid-column:1/-1}

.switch{display:inline-flex;align-items:flex-start;gap:var(--sp-5);cursor:pointer;user-select:none;font-size:var(--fs-md)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{width:36px;height:20px;flex:none;margin-top:1px;border-radius:var(--r-full);
  background:var(--bg-elevated);border:1px solid var(--border-default);position:relative;
  transition:all var(--dur-base) var(--ease-out)}
.switch-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-tertiary);transition:all var(--dur-base) var(--ease-spring)}
.switch input:checked+.switch-track{background:#fafafa;border-color:#fafafa}
.switch input:checked+.switch-track .switch-thumb{left:18px;background:var(--bg-app)}
.switch-desc{font-size:var(--fs-sm);color:var(--text-tertiary)}

/* Timeline im Drawer */
.tl{display:flex;gap:var(--sp-6);padding-bottom:var(--sp-8);position:relative}
.tl:last-child{padding-bottom:0}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex:none}
.tl-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg-elevated);
  border:1px solid var(--border-subtle);color:var(--text-tertiary)}
.tl-dot .icon{width:12px;height:12px}
.tl-line{flex:1;width:1px;background:var(--border-faint);margin:var(--sp-3) 0}
.tl:last-child .tl-line{display:none}
.tl-txt{font-size:var(--fs-md);color:var(--text-secondary);padding-top:2px}
.tl-txt b{color:var(--text-primary);font-weight:var(--fw-medium)}
.tl-time{font-size:var(--fs-sm);color:var(--text-quaternary);margin-top:2px}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);padding:var(--sp-5) 0;font-size:var(--fs-md)}
.meta-row+.meta-row{border-top:1px solid var(--border-faint)}
.meta-row dt{color:var(--text-tertiary)} .meta-row dd{color:var(--text-primary)}
.note{padding:var(--sp-6);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);font-size:var(--fs-md);color:var(--text-secondary);line-height:1.6}

/* Import-Zuordnung */
.map-row{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:var(--sp-5);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--border-faint)}
.map-row:last-child{border-bottom:none}
.map-src{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-tertiary);
  padding:var(--sp-3) var(--sp-5);background:var(--bg-app);border:1px solid var(--border-faint);border-radius:var(--r-md)}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);padding:var(--sp-13) var(--sp-9);
  text-align:center;border:1.5px dashed var(--border-default);border-radius:var(--r-2xl);
  background:var(--bg-surface);cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
.dropzone:hover{border-color:var(--border-strong);background:var(--bg-raised)}

/* Toast · Empty */
/* Meldungen müssen über allem liegen — auch über einem modalen Dialog. Der
   liegt im Top Layer, und dagegen kommt kein z-index an; deshalb hängt
   `app.js` diesen Bereich in den offenen Dialog um, solange einer offen ist.
   `position:fixed` bleibt dabei gültig, weil am `<dialog>` selbst kein
   `transform` liegt. */
.toast-host{position:fixed;bottom:var(--sp-9);right:var(--sp-9);z-index:90;
  width:fit-content;max-width:100vw;margin:0;padding:0;border:none;background:none;
  display:flex;flex-direction:column;gap:var(--sp-5)}
.toast{position:relative;display:flex;align-items:flex-start;gap:var(--sp-6);width:400px;max-width:90vw;
  padding:var(--sp-7);background:var(--bg-elevated);border:1px solid var(--border-default);
  border-radius:var(--r-2xl);box-shadow:var(--sh-lg);animation:toast-in var(--dur-slow) var(--ease-out)}
.toast-title{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.toast-desc{font-size:var(--fs-md);color:var(--text-secondary);margin-top:2px;line-height:1.35}
.toast-actions{display:flex;gap:var(--sp-7);margin-top:var(--sp-5)}
.toast-actions button{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-primary)}
.toast-actions button:hover{opacity:.7;text-decoration:underline;text-underline-offset:3px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);padding:var(--sp-16) var(--sp-9)}
.empty-art{width:52px;height:52px;border-radius:var(--r-2xl);display:grid;place-items:center;
  background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-quaternary)}
.empty-title{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
.empty-text{font-size:var(--fs-md);color:var(--text-tertiary);max-width:40ch;line-height:1.6}

@keyframes menu-in{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes slide-left{from{transform:translateX(100%)}to{transform:none}}
@keyframes slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{to{opacity:0;transform:translateY(4px)}}

@media (max-width:900px){ .wrap{padding:var(--sp-9) var(--sp-8) var(--sp-13)} .form-grid{grid-template-columns:1fr} }

/* ═══════════════ SEITE: LEAD-VERWALTUNG ═══════════════ */
/* Rollen-Umschalter in der Appbar */
.roleswitch summary{list-style:none;cursor:pointer}
.roleswitch summary::-webkit-details-marker{display:none}
.role-btn{display:inline-flex;align-items:center;gap:var(--sp-5);height:var(--control-h-sm);
  padding:0 var(--sp-4) 0 var(--sp-5);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-full);font-size:var(--fs-sm);color:var(--text-secondary);transition:all var(--dur-fast) var(--ease-out)}
.role-btn:hover{border-color:var(--border-default);background:var(--bg-raised);color:var(--text-primary)}
.role-btn .chev{color:var(--text-quaternary)}

/* Hinweis-Streifen für die Mitarbeiter-Sicht */
.alert{display:flex;align-items:flex-start;gap:var(--sp-6);padding:var(--sp-7) var(--sp-8);margin-top:var(--sp-9);
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-xl)}
.alert-info{background:var(--blue-soft);border-color:var(--blue-line)}
.alert-title{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.alert-text{font-size:var(--fs-md);color:var(--text-secondary);margin-top:2px;line-height:1.5}

/* Team-Karten — zugleich Filter nach Zuständigkeit */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--sp-6);margin-top:var(--sp-7)}
.member{display:flex;flex-direction:column;gap:var(--sp-6);padding:var(--sp-7);text-align:left;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-2xl);
  transition:all var(--dur-base) var(--ease-out)}
.member:hover{border-color:var(--border-default);background:var(--bg-raised);transform:translateY(-2px);box-shadow:var(--sh-md)}
.member.is-on{border-color:var(--border-strong);background:var(--bg-raised);box-shadow:var(--sh-inner)}
.member.is-drop{border-color:var(--blue-line);background:var(--blue-soft)}
.member-top{display:flex;align-items:center;gap:var(--sp-5)}
.member-name{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-primary)}
.member-role{font-size:var(--fs-sm);color:var(--text-quaternary)}
.member-nums{display:flex;align-items:baseline;gap:var(--sp-4)}
.member-count{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.member-sum{font-size:var(--fs-sm);color:var(--text-tertiary);font-variant-numeric:tabular-nums;margin-left:auto}
.member-load{display:flex;flex-direction:column;gap:var(--sp-3)}
.member-load-txt{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-quaternary)}
.member-bar{height:4px;border-radius:var(--r-full);background:var(--bg-elevated);overflow:hidden}
.member-bar i{display:block;height:100%;border-radius:inherit;transition:width var(--dur-slow) var(--ease-out)}

/* Zuständigkeits-Zelle in der Tabelle */
.own-cell{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-md);color:var(--text-secondary)}
.own-pick{position:relative;display:inline-flex}
.own-pick>summary{list-style:none;cursor:pointer}
.own-pick>summary::-webkit-details-marker{display:none}
.own-btn{display:inline-flex;align-items:center;gap:var(--sp-4);height:26px;padding:0 var(--sp-4) 0 var(--sp-4);
  border:1px solid transparent;border-radius:var(--r-sm);font-size:var(--fs-md);color:var(--text-secondary);
  white-space:nowrap;transition:all var(--dur-fast) var(--ease-out)}
.own-btn:hover{background:var(--bg-hover);border-color:var(--border-subtle);color:var(--text-primary)}
.own-btn .chev{width:11px;height:11px;opacity:.5}
.own-btn.is-none{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);padding:0 var(--sp-4) 0 var(--sp-5)}
tr.is-unassigned td:first-child{box-shadow:inset 2px 0 0 var(--amber)}

@media (max-width:900px){ .team{grid-template-columns:1fr} }

/* Spalten, die nur die Teamleitung sieht */
.table.no-manage .col-manage,.table.no-manage .col-own{display:none}
.table.no-manage th:nth-child(2){border-top-left-radius:13px}

/* ═══════════════ GEMEINSAME NAVIGATION (alle Module) ═══════════════ */
/* Die Kopfzeile trägt nur noch Marke, Verbindung und Konto.
   Gewechselt wird über die Modulkacheln am Seitenfuß. */
.brand-link{display:flex;align-items:center;gap:var(--sp-5);transition:opacity var(--dur-fast)}
.brand-link:hover{opacity:.75}

/* ── Tableiste · unter der Kopfzeile ──
   Das Dashboard steht fest links, geöffnete Module reihen sich an. */
.tabbar{position:sticky;top:var(--header-h);z-index:45;display:flex;align-items:flex-end;gap:2px;
  padding:0 var(--sp-9);background:var(--bg-app);border-bottom:1px solid var(--border-faint);
  overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:var(--sp-4);height:36px;padding:0 var(--sp-5) 0 var(--sp-6);
  border:1px solid transparent;border-bottom:none;border-radius:var(--r-md) var(--r-md) 0 0;
  font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-tertiary);white-space:nowrap;
  transition:all var(--dur-fast) var(--ease-out);position:relative;top:1px}
.tab:hover{color:var(--text-primary);background:var(--bg-hover)}
.tab .icon{color:var(--text-quaternary)}
.tab:hover .icon{color:currentColor}
.tab.is-on{background:var(--bg-base);border-color:var(--border-faint);color:var(--text-primary)}
.tab.is-on .icon{color:currentColor}
.tab.is-on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bg-base)}
.tab-x{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:var(--sp-3);
  border-radius:var(--r-xs);color:var(--text-quaternary);opacity:0;transition:all var(--dur-fast)}
.tab:hover .tab-x,.tab.is-on .tab-x{opacity:1}
.tab-x:hover{background:var(--bg-active);color:var(--text-primary)}
.tab-add{padding:0 var(--sp-5);color:var(--text-quaternary);list-style:none;cursor:pointer}
.tab-add::-webkit-details-marker{display:none}
.menu-wrap[open] .tab-add{color:var(--text-primary);background:var(--bg-hover)}
/* Die Leiste scrollt waagerecht und schneidet damit jedes Menü darin ab.
   Deshalb aus dem Fluss nehmen und beim Öffnen am Knopf ausrichten (design.md §7.3). */
.tabbar .menu{position:fixed;top:auto;left:auto;right:auto}

/* ── Modulkacheln · nur auf dem Dashboard ── */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:var(--sp-6)}
.mod{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-8);background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--r-2xl);transition:all var(--dur-base) var(--ease-out)}
.mod:hover{border-color:var(--border-default);background:var(--bg-raised);transform:translateY(-2px);box-shadow:var(--sh-md)}
.mod.is-on{border-color:var(--border-strong);background:var(--bg-raised);box-shadow:var(--sh-inner)}
.mod.is-on:hover{transform:none}
.mod-icon{width:34px;height:34px;border-radius:var(--r-lg);display:grid;place-items:center}
.mod-name{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.mod-desc{font-size:var(--fs-sm);color:var(--text-tertiary);line-height:1.5}
.mod-num{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin-top:auto}
.mod-hier{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--text-quaternary)}
.conn{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--text-tertiary)}
.conn i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.conn.is-off i{background:var(--red)}
.conn.is-off{color:var(--red)}

/* ═══════════════ KARTEN · PANELS (modulübergreifend) ═══════════════ */
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-2xl)}
.card-pad{padding:var(--sp-8)}
.panel{border:1px solid var(--border-subtle);border-radius:var(--r-2xl);background:var(--bg-surface)}
.panel-head{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-7) var(--sp-8);border-bottom:1px solid var(--border-faint)}
.panel-title{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.panel-desc{font-size:var(--fs-sm);color:var(--text-tertiary);margin-top:2px}
.panel-body{padding:var(--sp-8)}
.panel-body.is-flush{padding:var(--sp-3) var(--sp-8)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
.cols2 .full{grid-column:1/-1}
.stat{display:flex;flex-direction:column;gap:var(--sp-4)}
.stat-label{font-size:var(--fs-sm);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--sp-3)}
.stat-value{font-size:var(--fs-4xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.stat-foot{font-size:var(--fs-sm);color:var(--text-quaternary)}
/* display:block ist Pflicht — als <span> in einer Tabellenzelle ignoriert
   ein inline-Element Höhe und Breite und der Balken läuft aus der Zeile. */
.progress{display:block;height:5px;border-radius:var(--r-full);background:var(--bg-elevated);overflow:hidden;width:100%}
.progress-bar{display:block;height:100%;border-radius:inherit;background:#fafafa;transition:width var(--dur-slow) var(--ease-out)}
.progress-xs{height:3px}
.tabs{display:flex;align-items:center;gap:var(--sp-2);border-bottom:1px solid var(--border-subtle)}
.tabs button{position:relative;height:34px;padding:0 var(--sp-6);font-size:var(--fs-md);font-weight:var(--fw-medium);
  color:var(--text-tertiary);transition:color var(--dur-fast)}
.tabs button::after{content:'';position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:-1px;height:2px;
  background:var(--text-primary);border-radius:2px 2px 0 0;opacity:0;transform:scaleX(.4);transition:all var(--dur-base) var(--ease-out)}
.tabs button:hover{color:var(--text-secondary)}
.tabs button.is-on{color:var(--text-primary)}
.tabs button.is-on::after{opacity:1;transform:scaleX(1)}
.pill{display:inline-flex;align-items:center;gap:var(--sp-3);height:22px;padding:0 var(--sp-5);border-radius:var(--r-full);
  border:1px solid var(--border-subtle);background:var(--bg-elevated);font-size:var(--fs-xs);
  font-weight:var(--fw-medium);color:var(--text-tertiary);white-space:nowrap}

/* Detailseite statt Drawer — gleiche Mechanik wie in der Nutzerverwaltung */
.editbar{position:sticky;top:var(--header-h);z-index:20;display:flex;align-items:center;gap:var(--sp-6);
  padding:var(--sp-7) 0;margin-bottom:var(--sp-8);background:var(--bg-base);border-bottom:1px solid var(--border-faint)}
.crumb{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-tertiary)}
.crumb:hover{color:var(--text-primary)}
.editbar-name{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:-.02em}
.editbar-sub{font-size:var(--fs-sm);color:var(--text-tertiary)}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pageview{animation:page-in var(--dur-slow) var(--ease-out)}

@media (max-width:900px){ .cols2{grid-template-columns:1fr} }

/* ═══════════════ DIAGRAMME ═══════════════ */
.charttip{position:fixed;z-index:200;pointer-events:none;padding:var(--sp-4) var(--sp-6);
  background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--r-md);
  box-shadow:var(--sh-md);font-size:var(--fs-sm);color:var(--text-primary);white-space:nowrap}
.hit{cursor:default}
svg .hit:hover{opacity:.82}
.legend{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-6)}
.legend span{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--text-tertiary)}
.legend i{width:10px;height:10px;border-radius:3px;flex:none}

.bar-row,.div-row,.fun-row{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-5) 0}
.bar-row+.bar-row,.div-row+.div-row,.fun-row+.fun-row{border-top:1px solid var(--border-faint)}
.bar-row:hover,.div-row:hover,.fun-row:hover{background:var(--bg-hover)}
.bar-label{font-size:var(--fs-md);color:var(--text-secondary);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:none}
.bar-track{flex:1;min-width:40px;height:10px;border-radius:var(--r-full);background:var(--bg-elevated);overflow:hidden}
.bar-track i{display:block;height:100%;border-radius:var(--r-full)}
.bar-val{font-size:var(--fs-md);font-variant-numeric:tabular-nums;color:var(--text-primary);
  font-weight:var(--fw-medium);min-width:84px;text-align:right;flex:none}
.bar-sub{font-size:var(--fs-sm);color:var(--text-quaternary);min-width:74px;text-align:right;flex:none}
.fun-q{font-size:var(--fs-sm);color:var(--text-tertiary);font-variant-numeric:tabular-nums;
  min-width:52px;text-align:right;flex:none}
.div-track{flex:1;min-width:80px;height:10px;border-radius:var(--r-full);background:var(--bg-elevated);position:relative}
.div-track i{position:absolute;top:0;height:100%;border-radius:var(--r-full)}
.div-zero{position:absolute;left:50%;top:-3px;width:1px;height:16px;background:var(--border-strong)}

.hero{display:flex;flex-direction:column;gap:var(--sp-5)}
.hero-value{font-size:52px;font-weight:var(--fw-semibold);letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.hero-label{font-size:var(--fs-md);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--sp-4)}
.tile{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-8);background:var(--bg-surface);
  border:1px solid var(--border-subtle);border-radius:var(--r-2xl)}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6)}
.tile-value{font-size:var(--fs-3xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.delta{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.delta.is-up{color:var(--green)} .delta.is-down{color:var(--red)} .delta .icon{width:13px;height:13px}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-8);align-items:start}
.chart-grid .wide{grid-column:1/-1}
/* Grid- und Flex-Kinder haben `min-width:auto` und wachsen damit über ihren
   Container hinaus, sobald der Inhalt breiter ist — ein Diagramm mit fester
   Beschriftung reicht dafür. `min-width:0` erlaubt das Schrumpfen; ohne das
   schiebt eine einzelne Karte die ganze Seite in die Breite. */
.chart-grid>*,.cols2>*,.kpis>*{min-width:0}
@media (max-width:1040px){ .chart-grid{grid-template-columns:1fr} }

/* ═══════════════ ZEIT · KAPAZITÄT (modulübergreifend) ═══════════════ */
/* Sieben Tageskacheln nebeneinander — Zeiterfassung und Abwesenheiten zeigen
   dieselbe Woche, also derselbe Baustein. */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.day{padding:var(--sp-6);background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);display:flex;flex-direction:column;gap:var(--sp-5);min-height:104px;text-align:left}
.day:hover{border-color:var(--border-default);background:var(--bg-raised)}
.day.is-today{border-color:var(--border-strong);box-shadow:var(--sh-inner)}
.day.is-off{opacity:.55}
.day.is-lock{background:var(--bg-inset)}
.day-name{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--text-tertiary)}
.day-h{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.day.is-full .day-h{color:var(--green)}
.day-span{font-size:var(--fs-sm);color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.day-bar{height:4px;border-radius:var(--r-full);background:var(--bg-elevated);overflow:hidden;margin-top:auto}
/* Inline-Elemente ignorieren Höhe und Breite — der Balken liefe sonst aus der Zeile. */
.day-bar i{display:block;height:100%;border-radius:inherit}

/* Personen × Tage. Erste Spalte klebt, damit der Name beim Scrollen bleibt. */
.matrix{border:1px solid var(--border-subtle);border-radius:var(--r-2xl);overflow-x:auto;margin-top:var(--sp-7)}
.mx-row{display:grid;grid-template-columns:186px repeat(var(--mx-cols,7),minmax(58px,1fr)) 128px;
  align-items:stretch;border-top:1px solid var(--border-faint)}
.mx-row:first-child{border-top:0}
.mx-head{background:var(--bg-base);font-size:var(--fs-sm);color:var(--text-tertiary)}
.mx-head .mx-cell,.mx-head .mx-name,.mx-head .mx-sum{padding:var(--sp-5) var(--sp-6);min-height:0}
.mx-name{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-6);font-size:var(--fs-md);
  color:var(--text-primary);background:var(--bg-surface);position:sticky;left:0;z-index:1;min-width:0}
.mx-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:var(--sp-5) var(--sp-3);border-left:1px solid var(--border-faint);
  font-size:var(--fs-md);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.mx-cell b{font-weight:var(--fw-medium);color:var(--text-primary)}
.mx-cell.is-ok{background:var(--green-soft);color:var(--green)}
.mx-cell.is-teil{background:var(--amber-soft);color:var(--amber)}
.mx-cell.is-fehlt{background:var(--red-soft);color:var(--red)}
.mx-cell.is-frei{color:var(--text-quaternary)}
.mx-cell.is-abw{background:var(--bg-inset);color:var(--text-tertiary)}
.mx-sum{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-5);padding:var(--sp-6);
  border-left:1px solid var(--border-faint);font-size:var(--fs-md);font-variant-numeric:tabular-nums}

/* Saldo: Vorzeichen ist Bedeutung, deshalb steht es im Text und nicht nur in der Farbe. */
.saldo{font-variant-numeric:tabular-nums;font-weight:var(--fw-medium);color:var(--text-tertiary)}
.saldo.is-plus{color:var(--green)} .saldo.is-minus{color:var(--red)}

.alert-warning{background:var(--amber-soft);border-color:var(--amber-line)}
.alert-danger{background:var(--red-soft);border-color:var(--red-line)}
.alert-success{background:var(--green-soft);border-color:var(--green-line)}

/* ═══════════════ AKTE: DOKUMENTE · ZEITLEISTE · PROTOKOLL ═══════════════ */
/* Anklickbare Listenzeile. Stand bisher dreimal fast gleich in einzelnen
   Seiten — seit die Kundenakte Projekte, Verträge, Dokumente und Mails in
   derselben Form zeigt, gehört sie hierher. */
.linkrow{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) 0;width:100%;text-align:left}
.linkrow+.linkrow{border-top:1px solid var(--border-faint)}
.linkrow:hover .linkrow-title{text-decoration:underline;text-underline-offset:3px}
.linkrow-title{display:block;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-primary)}
.linkrow-sub{display:block;font-size:var(--fs-sm);color:var(--text-tertiary);margin-top:2px}
.linkrow-act{display:flex;align-items:center;gap:var(--sp-3);flex:none;opacity:0;transition:opacity var(--dur-fast)}
.linkrow:hover .linkrow-act,.linkrow:focus-within .linkrow-act{opacity:1}
/* Ein Symbol mit farbig hinterlegter Fläche — Dokumentart, Vertragsart, Aktivitätsart. */
.art-icon{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;flex:none}
.art-icon-sm{width:24px;height:24px;border-radius:var(--r-sm)}

/* Zeitleiste mit Datumsspalte. Baut auf .tl auf: gleiche Schiene, gleicher
   Punkt — nur bekommt jeder Eintrag links sein Datum, weil eine Kontakthistorie
   ohne Datum keine Historie ist. */
.tl-datum{flex:none;width:82px;text-align:right;font-size:var(--fs-sm);color:var(--text-quaternary);
  font-variant-numeric:tabular-nums;padding-top:3px}
.tl-body{flex:1;min-width:0;padding-top:1px}
.tl-titel{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--text-primary)}
.tl-text{font-size:var(--fs-md);color:var(--text-secondary);margin-top:2px;line-height:1.55;white-space:pre-wrap}
.tl-meta{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-sm);
  color:var(--text-quaternary);margin-top:var(--sp-4)}
/* Abgeleitetes ist blasser als Handeingetragenes: was das System selbst weiß,
   soll das Telefonat von gestern nicht überstrahlen. */
.tl.is-system .tl-titel{font-weight:var(--fw-normal);color:var(--text-secondary)}
.tl.is-system .tl-dot{background:var(--bg-surface);color:var(--text-quaternary)}
.tl.is-faellig .tl-dot{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}

/* Protokollzeile. Eng gesetzt und einfarbig — es sind viele, und keine davon
   ist wichtiger als die anderen. */
.prot{display:flex;align-items:baseline;gap:var(--sp-6);padding:var(--sp-5) 0;font-size:var(--fs-sm)}
.prot+.prot{border-top:1px solid var(--border-faint)}
.prot-zeit{flex:none;color:var(--text-quaternary);font-variant-numeric:tabular-nums;white-space:nowrap}
.prot-wer{flex:none;width:96px;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prot-was{flex:1;min-width:0;color:var(--text-secondary);line-height:1.6}
.prot-feld{color:var(--text-primary);font-weight:var(--fw-medium)}
.prot-wert{font-family:var(--font-mono);font-size:var(--fs-xs);padding:1px var(--sp-4);border-radius:var(--r-xs);
  background:var(--bg-app);border:1px solid var(--border-faint);color:var(--text-secondary);
  word-break:break-word}
.prot-wert.is-weg{color:var(--text-quaternary);text-decoration:line-through}
.prot-sys{color:var(--text-quaternary);font-style:italic}

/* Rechenweg. Wer nur das Ergebnis sieht, prüft es nicht nach — deshalb steht
   jeder Schritt einzeln da und das Ergebnis ist nur der letzte davon. */
.rechnung{border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--bg-app);
  padding:var(--sp-5) var(--sp-7)}
.rechnung-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-8);
  padding:var(--sp-4) 0;font-size:var(--fs-md)}
.rechnung-row+.rechnung-row{border-top:1px solid var(--border-faint)}
.rechnung-row dt{color:var(--text-tertiary)}
.rechnung-row dd{color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}
.rechnung-row.is-stark dt{color:var(--text-secondary)}
.rechnung-row.is-stark dd{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* Dateiablage. Die Zone ist zugleich Knopf und Ziel für das Fallenlassen. */
.dropzone.is-over{border-color:var(--blue);background:var(--blue-soft)}
.dropzone-fort{width:100%;margin-top:var(--sp-5)}

/* ═══════════════════════════════════════════════════════════════════
   KLEINE BILDSCHIRME
   Eine Stelle für alle Module. Zwei Stufen:
   ≤ 900 px — schmaler Laptop, Tablet quer: mehrspaltiges wird einspaltig.
   ≤ 640 px — Telefon: Tabellen werden zu Karten, Bedienelemente wachsen auf
              Fingergröße, alles Waagerechte bricht um.
   Geschrieben wird von der großen zur kleinen Stufe, damit die kleinere
   gewinnt — nicht umgekehrt.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:900px){
  .wrap{padding:var(--sp-8) var(--sp-7) var(--sp-13)}
  .page-title h1{font-size:var(--fs-2xl)}
  /* Die Kopfzeile trägt auf schmalen Geräten nur noch das Nötige. */
  .appbar{padding:0 var(--sp-7);gap:var(--sp-5)}
  .conn span{display:none}
  .tabbar{padding:0 var(--sp-7)}
  /* Detailkopf: Name oben, Knöpfe darunter in einer scrollenden Reihe. */
  .editbar{flex-wrap:wrap;row-gap:var(--sp-5)}
  .editbar>.btn,.editbar>.iconbtn,.editbar>a.btn{flex:none}
  .cols2,.chart-grid,.form-grid{grid-template-columns:1fr}
  .modal-lg,.modal{width:min(96vw,680px)}
}

@media (max-width:640px){
  :root{--header-h:52px}
  .wrap{padding:var(--sp-7) var(--sp-6) var(--sp-16)}
  .page-title{flex-wrap:wrap}
  .page-title h1{font-size:var(--fs-xl);letter-spacing:-.02em}
  .page-sub{font-size:var(--fs-md)}

  /* ── Fingergrößen ──
     28 px trifft man mit der Maus, mit dem Daumen nicht. Alles, was angetippt
     wird, wächst — die Schriftgröße bleibt, damit nichts umbricht. */
  .btn{height:40px;padding:0 var(--sp-8)}
  .btn-sm{height:36px;padding:0 var(--sp-7);font-size:var(--fs-md)}
  .iconbtn{width:40px;height:40px}
  .iconbtn-sm{width:36px;height:36px}
  .btn-row{height:32px;padding:0 var(--sp-6)}
  .filter-chip{height:36px}
  .segmented button{height:34px;padding:0 var(--sp-7)}
  .input,.cselect-btn{height:42px;font-size:var(--fs-base)}
  .menu-item{height:40px}
  .tab{height:42px}
  /* iOS zoomt beim Antippen in jedes Feld unter 16 px hinein. */
  input,textarea,select{font-size:16px}
  .searchbox{width:100%;height:42px}
  .searchbox input{font-size:16px}

  /* ── Kennzahlen: zwei nebeneinander statt vier untereinander ── */
  .kpis{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .kpi{padding:var(--sp-7)}
  .kpi-value{font-size:var(--fs-2xl) !important;margin-top:var(--sp-4)}
  .kpi-label{font-size:var(--fs-xs)}
  .kpi-foot{font-size:var(--fs-xs)}
  .mods{grid-template-columns:1fr 1fr}
  .last-grid{grid-template-columns:1fr 1fr}

  /* ── Werkzeugleisten und Kartenköpfe brechen um ──
     Ein Panel-Kopf trägt oft Titel, Beschreibung und rechts eine Aktion
     (Exportieren, Neu, Im Modul). Nebeneinander braucht das mehr Platz, als
     das Gerät hat — also darunter. */
  .panel-head{flex-wrap:wrap;row-gap:var(--sp-5);padding:var(--sp-6) var(--sp-7)}
  /* `flex-wrap` allein reichte nicht: der Textblock trägt `flex:1` und darf
     beliebig schrumpfen, ein Umschalter oder Knopf daneben nicht — also wurde
     die Beschreibung auf fünf Zeichen gequetscht, statt dass die Aktion
     umbricht. Mit voller Grundbreite gewinnt der Text die Zeile und alles
     andere rutscht darunter, so wie es oben beschrieben steht.
     `!important` und der Attributselektor, weil 34 der 41 Panel-Köpfe im Haus
     ihr `flex:1` als Inline-Stil tragen — und der schlägt jede Regel aus dem
     Stylesheet. Dieselbe Notlösung wie zwei Zeilen weiter unten bei `.bar`. */
  .panel-head>div{min-width:0}
  .panel-head>div[style*="flex:1"]{flex:1 1 100% !important}
  .panel-body{padding:var(--sp-7)}
  .panel-body.is-flush{padding:var(--sp-3) var(--sp-7)}
  .bar,.filters{gap:var(--sp-5)}
  .bar>.btn{flex:1 1 auto}
  .bar>div[style*="flex:1"]{display:none}      /* der Platzhalter, der Knöpfe nach rechts schiebt */
  /* Ein Umschalter mit vier Punkten ist breiter als das Gerät. Er bricht nicht
     um — nebeneinander ist seine Aussage —, also scrollt er. */
  .segmented{max-width:100%;overflow-x:auto;scrollbar-width:none;flex:0 1 auto}
  .segmented::-webkit-scrollbar{display:none}
  .segmented button{flex:none}
  /* ── Aufklappmenüs ──
     Am Schreibtisch hängt ein Menü unter seinem Knopf. Auf dem Telefon geht
     das nicht auf: steht der Knopf am linken Rand, läuft das Menü nach links
     hinaus, steht er rechts, nach rechts. Deshalb wird jedes Menü hier zu
     einem Blatt am unteren Bildschirmrand — über die volle Breite, in
     Daumenreichweite, und immer an derselben Stelle.

     `!important` ist nötig, weil die Tableiste ihre Menüs beim Öffnen per
     Inline-Stil ausrichtet (app.js) — das gewinnt sonst gegen jede Regel. */
  .menu{position:fixed !important;
    left:var(--sp-6) !important; right:var(--sp-6) !important;
    top:auto !important; bottom:var(--sp-6) !important;
    width:auto !important; min-width:0; max-width:none;
    max-height:min(70vh,460px); overflow-y:auto;
    box-shadow:var(--sh-xl); animation:menu-hoch var(--dur-base) var(--ease-out)}
  .cselect .menu{width:auto !important}
}
@keyframes menu-hoch{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  /* Auswahlfelder tragen ihre Breite oft als Inline-Stil (`cselect(…, {width})`).
     Auf dem Telefon gilt trotzdem: nie breiter als der Platz. */
  .cselect,.cselect-btn{max-width:100%}

  /* ── Tabellen werden Karten ──
     Jede Zeile ein Block, jede Zelle mit ihrer Überschrift davor. Die
     Überschrift setzt `beschrifteTabellen()` in app.js als `data-spalte`.
     `!important` ist hier nötig, weil mehrere Module ihre Mindestbreite als
     Attribut am Element tragen — und das schlägt sonst jede Regel. */
  .table-wrap{border:none;background:none;border-radius:0}
  .table-scroll{overflow-x:visible}
  .table{min-width:0 !important;width:100%;font-size:var(--fs-md)}
  .table thead{display:none}
  .table tbody,.table tr,.table td{display:block;width:auto}
  .table tbody tr{background:var(--bg-surface);border:1px solid var(--border-subtle);
    border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-7);margin-bottom:var(--sp-5)}
  .table tbody tr:hover{background:var(--bg-surface)}
  .table td{height:auto;min-height:0;padding:var(--sp-4) 0;border:none;white-space:normal;
    display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);text-align:right}
  .table td+td{border-top:1px solid var(--border-faint)}
  .table td::before{content:attr(data-spalte);flex:none;text-align:left;
    font-size:var(--fs-sm);color:var(--text-tertiary);font-weight:var(--fw-normal)}
  .table td:empty,.table td[data-spalte=""]:empty{display:none}
  /* Die erste Zelle ist die Überschrift der Karte: volle Breite, ohne Etikett. */
  .table td:first-child{padding-top:0;font-size:var(--fs-base);display:block;text-align:left}
  .table td:first-child::before{display:none}
  .table td.c,.table td.r{text-align:right}
  .table .cell-actions{justify-content:flex-end}
  .col-check{width:auto !important;padding-right:0 !important}
  /* Fortschrittsbalken und Auswahlfelder in Zellen brauchen wieder Breite. */
  .table td .progress,.table td .bar-track{width:auto;min-width:80px;flex:1}

  /* ── Wochenraster: sieben Kacheln passen nicht nebeneinander ── */
  .week{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .day{min-height:88px}
  /* Personen × Tage bleibt eine Tabelle, aber der Name wird schmaler. */
  .mx-row{grid-template-columns:118px repeat(var(--mx-cols,7),minmax(44px,1fr)) 96px}
  .mx-name{padding:var(--sp-5)}
  .mx-name span{font-size:var(--fs-sm)}

  /* ── Dialoge fast bildschirmfüllend ── */
  .modal,.modal-sm,.modal-lg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;
    border-radius:0;border:none}
  .modal-head{padding:var(--sp-8) var(--sp-7) var(--sp-5)}
  /* Der Körper füllt, was Kopf und Fuß übriglassen — sonst klebt der Fuß mit
     „Speichern" in der Bildschirmmitte und darunter bleibt es leer. */
  .modal-body{padding:0 var(--sp-7) var(--sp-6);flex:1}
  .modal-foot{padding:var(--sp-6) var(--sp-7);flex-wrap:wrap;
    padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1 1 auto}
  .modal-x{top:var(--sp-5);right:var(--sp-5)}
  dialog.drawer-host{width:100vw}
  /* Toasts von unten über die volle Breite — oben rechts erreicht der Daumen
     nicht. `width:auto` muss sein: die Grundregel setzt `fit-content`, und das
     schlägt sonst die beiden Randangaben. */
  .toast-host{left:var(--sp-6);right:var(--sp-6);bottom:var(--sp-6);width:auto;
    padding-bottom:env(safe-area-inset-bottom)}
  .toast{width:auto}

  /* ── Detailkopf ──
     Am Schreibtisch klebt die Kopfzeile oben und bleibt beim Scrollen sichtbar.
     Auf dem Telefon brechen die Knöpfe auf drei bis vier Zeilen um — ein
     mitfahrender Block dieser Höhe verdeckt den halben Bildschirm. Also
     scrollt sie hier mit weg. */
  .editbar{position:static;padding:var(--sp-6) 0;gap:var(--sp-5)}
  .editbar .btn{height:36px;padding:0 var(--sp-6);font-size:var(--fs-md);flex:1 1 auto}
  .editbar .iconbtn{height:36px;width:36px}
  .editbar-name{font-size:var(--fs-md)}
  .akte-tabs{top:var(--header-h)}

  /* ── Listenzeilen und Zeitleiste ── */
  .linkrow{flex-wrap:wrap;row-gap:var(--sp-4)}
  .linkrow-act{opacity:1}                       /* ohne Mauszeiger gibt es kein „hover" */
  .tl-datum{width:56px;font-size:var(--fs-xs)}
  .tl{gap:var(--sp-5)}
  .prot{flex-wrap:wrap;row-gap:2px}
  .prot-wer{width:auto}
  .prot-was{flex:1 1 100%}
  .meta-row{gap:var(--sp-6)}
  .meta-row dd{text-align:right}
  .rechnung-row{gap:var(--sp-6)}

  /* ── Diagramme ── */
  .bar-label{width:auto !important;max-width:44%}
  .bar-val{min-width:64px}
  .bar-sub{display:none}
  .hero-value{font-size:38px}
  .pipe-col{width:82vw}
}

/* Sehr schmale Geräte. Die Grenze liegt bewusst unter 375: das ist die Breite
   von iPhone SE und mini, und dort stehen zwei Kennzahlen nebeneinander noch
   gut. Erst darunter wird es eng. */
@media (max-width:340px){
  .kpis,.mods,.last-grid{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
}

/* Zeigegerät ohne Mauszeiger: Aktionen, die sonst erst beim Überfahren
   erscheinen, sind hier dauerhaft sichtbar — sonst findet sie niemand. */
@media (hover:none){
  .linkrow-act,.tab-x,.table th .sort{opacity:1}
}

/* ═══════════════ DRUCK ═══════════════ */
@media print{
  :root{color-scheme:light}
  .appbar,.tabbar,.no-print,.bar,.filters,.pager,.toast-host,.charttip{display:none !important}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .panel,.card,.kpi,.tile{border-color:#d4d4d8;background:#fff;box-shadow:none;break-inside:avoid}
  .panel-head{border-color:#e4e4e7}
  .stat-value,.tile-value,.hero-value,.kpi-value,.bar-val,.editbar-name{color:#000}
  .page-sub,.panel-desc,.stat-label,.kpi-label,.bar-label,.t-3,.t-4{color:#3f3f46}
  .bar-track,.div-track{background:#e4e4e7;print-color-adjust:exact}
  .bar-track i,.div-track i{print-color-adjust:exact}
  svg{print-color-adjust:exact}
  .table{font-size:10pt} .table td,.table th{border-color:#e4e4e7;color:#000;background:#fff}
  .print-only{display:block !important}
  h1{font-size:20pt} .chart-grid{gap:16px;break-inside:auto}
  @page{margin:16mm}
}
.print-only{display:none}

/* ═══════════════════════════════════════════════════════════════════
   Finger statt Maus
   ═══════════════════════════════════════════════════════════════════
   Die Steuerhöhen oben sind für den Mauszeiger gemacht: 34 px, kleine
   Varianten 28 und 22. Am Bildschirm ist das richtig — mit dem Daumen trifft
   man es nicht. Am 12.08.2026 gemessen: „Zurück zur Liste" im Postfach war
   20×28, „Postfächer anzeigen" 28×28, das Tab-Kreuz 18×18.

   Gegriffen wird über `pointer: coarse` und nicht über die Bildschirmbreite:
   Ein schmales Fenster am Rechner wird weiterhin mit der Maus bedient, ein
   iPad im Querformat mit dem Finger. Die Breite sagt darüber nichts.

   Vergrößert wird die **Trefferfläche**, nicht das Aussehen: Icons und
   Schriftgrößen bleiben, wo sie sind — sonst wäre es ein anderes Design.
   Die 40 px kommen aus dem Auftrag; Apple nennt 44, Google 48. */
@media (pointer: coarse) {
  .iconbtn, .iconbtn-sm, .iconbtn-xs {
    min-width: 40px; min-height: 40px;
    /* `place-items:center` hält das Icon in der Mitte — die Fläche wächst
       nach außen, das Bild bleibt gleich groß. */
  }
  .btn, .btn-sm, .btn-row { min-height: 40px; }
  /* Ein Chip mit 26 px ist ein Wort mit Rahmen, kein Ziel. Die Zeilenhöhe
     bleibt, der Rahmen wächst. */
  .chip, .chip-ai, .tag, .seg, .segmented > button { min-height: 40px; }
  /* Eingabefelder: ein 20 px hohes Suchfeld trifft niemand. */
  .searchbox, .input, select, textarea { min-height: 40px; }
  /* Blättern: die Seitenzahlen standen bei 30×30. */
  .pager button, .pages button, .page-btn { min-width: 40px; min-height: 40px; }
  /* Zeilen in Listen und Menüs — dort wird am häufigsten danebengetippt. */
  .menu a, .menu button, .menu-item, .folder, .box { min-height: 40px; }
}

/* Die gemeinsame Kopf- und Tableiste. Sie steht über jedem Modul, also wirkt
   hier jeder Pixel viermal. Gemessen am 12.08.2026 bei 375 px: das Kreuz am
   Tab war 18×18, der Avatar 24×24, das Plus 36 breit. */
@media (pointer: coarse) {
  .tab { min-height: 44px; }
  .tab-x { min-width: 40px; min-height: 40px; margin-left: var(--sp-4);
    /* Ein Kreuz, das man nur sieht, wenn man mit der Maus darüberfährt, gibt
       es am Telefon nicht — dort ist es immer da. */
    opacity: 1; }
  .tab-add { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .appbar .menu-wrap > summary.avatar { min-width: 40px; min-height: 40px; }
  /* Das Feld füllt seinen Rahmen aus — der ist das Ziel, nicht der Text darin. */
  .searchbox input { align-self: stretch; }
  /* 39 statt 40 — ein Pixel, aber die Regel ist die Regel und Menüzeilen sind
     das, was man am häufigsten trifft. */
  .menu-item, .menu a { min-height: 40px; }
  /* Ein Etikett am Postfach ist nicht nur Beschriftung: ein Klick filtert
     danach, einer vergibt ein neues. 22 Pixel trifft niemand. */
  .etikett, button.etikett, .etikett-auto { min-height: 32px; }
  /* Die eigenen Auswahlfelder und Filter (Rolle, Status, Zugang) standen bei 36. */
  .cselect, .cselect-btn, [data-cselect], .filter-chip, .cselect > summary { min-height: 40px; }
  /* Ein Knopf, der nur ein Icon trägt, war 38 breit. */
  .btn:has(> svg:only-child), .btn-sm:has(> svg:only-child) { min-width: 40px; }
  /* Zeilen in Tabellen sind das Ziel, nicht der Text darin. */
  table.klickbar tbody tr, tbody tr[data-open], tbody tr.is-klick { min-height: 44px; }
}