/* VD-Dashboard – Design-System. Tokens siehe DESIGN-SYSTEM.md */

:root {
  --logo-a: #ffffff; --logo-b: #b8b8b8;
  color-scheme: dark;
  --bg: #141619;
  --surface: #1b1e23;
  --raised: #22262c;
  --line: #2c3138;
  --line-strong: #3d434c;
  --text: #eceef1;
  --mut: #9aa3ae;
  --acc: #8fd3e8;
  --acc-ink: #0c2830;
  --acc-soft: rgba(143, 211, 232, .12);
  --ok: #5fd39a;
  --warn: #f2c14e;
  --bad: #ff7a6b;
  --ok-soft: rgba(95, 211, 154, .14);
  --warn-soft: rgba(242, 193, 78, .14);
  --bad-soft: rgba(255, 122, 107, .14);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --r-panel: 18px;
  --r-ctl: 10px;
  --pad: 22px;
  --row: 13px;
  --gap: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --logo-a: #1b1e23; --logo-b: #6b7079;
    color-scheme: light;
    --bg: #f3f4f6; --surface: #ffffff; --raised: #f7f8f9; --line: #e1e4e8; --line-strong: #c8cdd4;
    --text: #16191d; --mut: #59626e; --acc: #0a6c86; --acc-ink: #ffffff; --acc-soft: rgba(10, 108, 134, .09);
    --ok: #17784a; --warn: #8a5a00; --bad: #b3261e;
    --ok-soft: rgba(23, 120, 74, .1); --warn-soft: rgba(138, 90, 0, .1); --bad-soft: rgba(179, 38, 30, .09);
    --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  }
}
:root[data-theme="light"] {
  --logo-a: #1b1e23; --logo-b: #6b7079;
  color-scheme: light;
  --bg: #f3f4f6; --surface: #ffffff; --raised: #f7f8f9; --line: #e1e4e8; --line-strong: #c8cdd4;
  --text: #16191d; --mut: #59626e; --acc: #0a6c86; --acc-ink: #ffffff; --acc-soft: rgba(10, 108, 134, .09);
  --ok: #17784a; --warn: #8a5a00; --bad: #b3261e;
  --ok-soft: rgba(23, 120, 74, .1); --warn-soft: rgba(138, 90, 0, .1); --bad-soft: rgba(179, 38, 30, .09);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.compact { --pad: 16px; --row: 8px; --gap: 14px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 var(--font); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); }
p { margin: 0; }
code { font: .88em/1.4 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; background: var(--raised); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
mark { background: var(--acc-soft); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -1px 0 var(--acc); }
.num, time { font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); }
.small { font-size: 13px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--acc); color: var(--acc-ink); padding: 8px 14px; border-radius: var(--r-ctl); }
.skip:focus { top: 12px; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Rahmen ---------- */

.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: 22px 14px 18px; border-right: 1px solid var(--line); background: var(--bg);
}
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px 22px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); min-width: 0; }
.brand:hover { text-decoration: none; }
.mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.mark svg { display: block; width: 34px; height: auto; }
.vg-a { stop-color: var(--logo-a); }
.vg-b { stop-color: var(--logo-b); }
.mark-lg, .mark-lg svg { width: 64px; }
.mark-xs, .mark-xs svg { width: 15px; height: auto; }
.foot-brand { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.foot-brand:hover { color: var(--text); text-decoration: none; }
.brand-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-n { font: 650 16px/1.2 var(--font-display); letter-spacing: -.01em; }
.brand-p { font-size: 12px; color: var(--mut); letter-spacing: .01em; }
.menu-btn { display: none; }

.nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a, .navlink {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-ctl);
  color: var(--mut); font-size: 15px; font-weight: 500; width: 100%;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:hover, .navlink:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.nav a[aria-current="page"] .ic { color: var(--acc); }
.badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-size: 12px; font-weight: 650; display: inline-grid; place-items: center; }
.nav-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.navlink { background: none; border: 0; font: inherit; font-size: 15px; cursor: pointer; text-align: left; }

.main { padding: 40px 48px 32px; max-width: 1480px; width: 100%; outline: none; }
.foot-impulse { margin: 0; flex: 1 1 260px; text-align: center; font-style: italic; color: var(--mut); opacity: .85; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mut); font-size: 12.5px; }

/* ---------- Seitenkopf ---------- */

.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ph h1 { font-size: 30px; line-height: 1.15; font-weight: 650; letter-spacing: -.022em; }
.ph-sub { color: var(--mut); margin-top: 6px; max-width: 68ch; }
.ph-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* Tageslage: das eine markante Element */
.today { margin: 4px 0 22px; max-width: 920px; }
.today-date { color: var(--acc); font-weight: 600; font-size: 15px; letter-spacing: .01em; margin-bottom: 10px; }
.today-line {
  font: 680 clamp(28px, 3.9vw, 46px)/1.1 var(--font-display); letter-spacing: -.028em; text-wrap: balance;
}
.today-sec { color: var(--mut); font-weight: 600; }

/* Systemlinie */
.sysline { margin: 0 0 26px; }
.sysline ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sysline li { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 13px; }

/* Signale: Symbol + Text, nie nur Farbe */
.sig { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.sig-g {
  width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 750; line-height: 1; background: var(--raised); color: var(--mut); box-shadow: inset 0 0 0 1px var(--line);
}
.sig-ok .sig-g { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.sig-warnung .sig-g { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.sig-fehler .sig-g { background: var(--bad-soft); color: var(--bad); box-shadow: none; }

/* Schnellzugriffe */
.quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; margin-bottom: var(--gap); }
.quick-search, .search-main { position: relative; display: flex; align-items: center; gap: 8px; }
.quick-search .ic, .search-main .ic { position: absolute; left: 13px; color: var(--mut); pointer-events: none; }
.quick-search input, .search-main input { padding-left: 42px; }
.quick-add { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto; gap: 8px; }

/* ---------- Raster der Übersicht ---------- */

.grid { display: grid; gap: var(--gap); align-items: start; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.col-main, .col-side { display: grid; gap: var(--gap); align-content: start; min-width: 0; }

/* ---------- Panels und Listen ---------- */

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--pad) var(--pad) calc(var(--pad) - 6px); box-shadow: var(--shadow); margin-bottom: var(--gap);
}
.grid .panel, .col-side .panel { margin-bottom: 0; }
.panel > h2, .panel-h h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.panel > h2 { margin-bottom: 12px; }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; min-height: 30px; }
.panel-h a { font-size: 14px; }
.panel.note { background: transparent; box-shadow: none; }
.panel.note h2 { font-size: 15px; margin-bottom: 6px; }
.panel.note p { color: var(--mut); font-size: 14.5px; max-width: 80ch; }
.panel.danger h2 { color: var(--bad); font-size: 15px; }

.grp { display: flex; align-items: center; gap: 8px; font: 600 13.5px/1.3 var(--font); color: var(--mut); margin: 16px 0 2px; }
.panel > .grp:first-child { margin-top: 0; }
.grp .count { font-variant-numeric: tabular-nums; background: var(--raised); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.grp-sofort { color: var(--bad); }
.grp-heute { color: var(--text); }
.grp-sofort .count { background: var(--bad-soft); }

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: flex-start; gap: 12px; padding: var(--row) 0; border-top: 1px solid var(--line); }
.rows > .row:first-child { border-top: 0; }
.row-main { flex: 1; min-width: 0; }
.row-t { display: block; color: var(--text); font-weight: 550; }
a.row-t:hover { color: var(--acc); text-decoration: none; }
.row-sub { color: var(--mut); font-size: 14px; margin-top: 2px; }
.row-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 60%; }
.row-link { color: var(--mut); padding: 4px; border-radius: 8px; flex: none; }
.row-link:hover { color: var(--acc); }
.row-link .ic { width: 17px; height: 17px; }
.sep::before { content: ","; margin-right: 6px; }
.tag { color: var(--mut); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.tag:hover { color: var(--acc); }
.why::first-letter { text-transform: uppercase; }
.task.is-done .row-t { color: var(--mut); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.timeline .row-t { font-weight: 500; }
.timeline .sig { font-weight: 550; }

.tick {
  width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 1.6px solid var(--line-strong); background: transparent;
  color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.tick .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.tick:hover { border-color: var(--ok); color: var(--ok); }
.tick-on { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.tick-on:hover { background: transparent; color: var(--mut); border-color: var(--line-strong); }

.big-n { font: 680 40px/1 var(--font-display); letter-spacing: -.03em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }

.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  color: var(--mut); border: 1px solid var(--line); white-space: nowrap; background: transparent;
}
.chip-p-hoch { color: var(--warn); border-color: currentColor; }
.chip-p-niedrig { opacity: .8; }
.chip-conf { color: var(--bad); border-color: currentColor; }
.chip-test { color: var(--acc); border-color: currentColor; }
.chip-s-aktiv { color: var(--ok); border-color: currentColor; }

.empty { padding: 18px 0 14px; }
.empty-t { font-weight: 600; }
.empty-x { color: var(--mut); margin: 4px 0 12px; max-width: 60ch; font-size: 14.5px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 24px; margin: 0 0 var(--gap); }
.panel .facts { margin-bottom: 12px; }
.facts dt { color: var(--mut); font-size: 13px; }
.facts dd { margin: 2px 0 0; font-weight: 550; }

.sub-h { font-size: 14px; color: var(--mut); font-weight: 600; margin: 14px 0 6px; }
pre.content { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); white-space: pre-wrap; font: 14px/1.55 var(--font); }
.approval .btn-row { display: flex; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }

/* ---------- Bedienelemente ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-ctl);
  border: 1px solid transparent; font: 600 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; color: var(--text); background: var(--raised);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { text-decoration: none; border-color: var(--line-strong); }
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--acc); color: var(--acc-ink); }
.btn-primary:hover { border-color: transparent; filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-s { height: 34px; padding: 0 13px; font-size: 13.5px; gap: 7px; flex: none; }
.btn-icon { width: 34px; padding: 0; }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn-wide { width: 100%; }
form.inline { display: inline; margin: 0; }

input, select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line);
  background: var(--raised); color: var(--text); font: 15.5px/1.4 var(--font);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea { resize: vertical; min-height: 96px; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--acc); flex: none; }
::placeholder { color: var(--mut); opacity: .75; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 4px 0 8px; }
.f-wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 13.5px; color: var(--mut); font-weight: 550; margin-bottom: 6px; }
.form-act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.stack { display: grid; gap: 16px; }
.stack > .panel { margin-bottom: 0; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.checks { display: grid; gap: 10px; margin-top: 10px; }
.err { color: var(--bad); font-weight: 550; }

.disclose summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; list-style: none; padding-bottom: 8px;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.7px solid var(--mut); border-bottom: 1.7px solid var(--mut); transform: rotate(45deg); transition: transform .2s var(--ease); }
.disclose[open] summary::after { transform: rotate(-135deg); }
.disclose[open] summary { margin-bottom: 8px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }

.tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-bottom: var(--gap); }
.tabs a { padding: 6px 14px; border-radius: 9px; color: var(--mut); font-size: 14px; font-weight: 550; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }

.seg-group { margin-bottom: 16px; }
.seg-group legend { font-size: 13.5px; color: var(--mut); font-weight: 550; margin-bottom: 8px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 16px; border-radius: 9px; font-size: 14px; font-weight: 550; color: var(--mut); }
.seg input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
.seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 1px; }

.search-form { padding-bottom: var(--pad); }
.search-main input { flex: 1; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.sel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mut); }
.sel select { width: auto; min-height: 36px; padding: 6px 10px; }

.flash { padding: 11px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 550; border: 1px solid; animation: flash-in .35s var(--ease); }
.flash-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.flash-err { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Anmeldung ---------- */

.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-main { width: 100%; max-width: 400px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 32px 28px 28px; box-shadow: var(--shadow); }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand .mark { display: inline-block; margin-bottom: 14px; }
.login-brand h1 { font-size: 26px; font-weight: 680; letter-spacing: -.02em; }
.login-note { text-align: center; color: var(--mut); font-size: 13px; margin-top: 16px; }

/* ---------- Eine orchestrierte Bewegung: Tageslage und Systemlinie beim Laden ---------- */

@media (prefers-reduced-motion: no-preference) {
  .today-line { animation: rise .6s var(--ease) both; }
  .today-sec { animation: fade .6s .25s var(--ease) both; }
  .sysline li { animation: fade .4s var(--ease) both; }
  .sysline li:nth-child(1) { animation-delay: .30s; } .sysline li:nth-child(2) { animation-delay: .36s; }
  .sysline li:nth-child(3) { animation-delay: .42s; } .sysline li:nth-child(4) { animation-delay: .48s; }
  .sysline li:nth-child(5) { animation-delay: .54s; } .sysline li:nth-child(6) { animation-delay: .60s; }
  .sysline li:nth-child(7) { animation-delay: .66s; } .sysline li:nth-child(8) { animation-delay: .72s; }
  .sysline li:nth-child(n+9) { animation-delay: .78s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsiv ---------- */

@media (max-width: 1180px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .col-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .quick { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: sticky; top: 0; z-index: 20; height: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line);
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  .side-top { padding: 0; }
  .mark, .mark svg { width: 30px; }
  .js .menu-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--r-ctl);
    border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 550 14px/1 var(--font); cursor: pointer;
  }
  .js .nav { display: none; }
  .js .nav.open { display: flex; padding: 12px 0 6px; max-height: calc(100dvh - 60px); overflow-y: auto; }
  .nav-foot { margin-top: 8px; }
  .main { padding: 24px 16px 24px; }
  .ph h1 { font-size: 26px; }
}

@media (max-width: 640px) {
  .quick-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .quick-add input[name="title"] { grid-column: 1 / -1; }
  .quick-add .btn { grid-column: 1 / -1; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .row { flex-wrap: wrap; }
  .row-end { max-width: 100%; justify-content: flex-start; }
  .task .row-end { padding-left: 36px; width: 100%; }
  .task .row-end:empty { display: none; }
  .brand-p { font-size: 11px; }
  .panel { border-radius: 16px; }
  .search-main { flex-wrap: wrap; }
  .search-main .btn { width: 100%; }
  .search-main .ic { top: 11px; }
}

@media print {
  .side, .quick, .foot, .tick, .btn { display: none !important; }
  .shell { display: block; }
}

/* Systemlinie: Websites auf schmalen Bildschirmen zusammenfassen */
.sysline .sys-sum { display: none; }
@media (max-width: 640px) {
  .sysline .sys-site { display: none; }
  .sysline .sys-sum { display: block; }
}

/* Nextcloud-Inhalte (Markdown, sichere Teilmenge) */
.ic-s { width: 16px; height: 16px; margin-right: 8px; color: var(--mut); }
.files .row-t { display: flex; align-items: center; min-width: 0; }
.nc-doc { border-top: 1px solid var(--line); padding: 12px 0; }
.nc-doc summary { cursor: pointer; font-weight: 600; color: var(--mut); font-size: 14px; }
.nc-doc[open] summary { margin-bottom: 10px; }
.md { font-size: 15px; max-width: 80ch; }
.md h3, .md h4, .md h5, .md h6 { font-size: 15.5px; font-weight: 650; margin: 16px 0 6px; }
.md h3 { font-size: 17px; }
.md p, .md ul, .md ol, .md blockquote, .md-table, .md pre { margin: 0 0 10px; }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 3px 0; }
.md li.md-check { list-style: none; margin-left: -22px; display: flex; gap: 8px; align-items: baseline; }
.md-box { width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid var(--line-strong); display: inline-grid; place-items: center; font-size: 11px; font-weight: 750; color: var(--ok); transform: translateY(2px); }
.md li.is-done { color: var(--mut); }
.md blockquote { border-left: 3px solid var(--line-strong); padding-left: 12px; color: var(--mut); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { text-align: left; padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.md tr:first-child th { border-top: 0; background: var(--raised); font-weight: 600; }
pre.md-code { padding: 12px 14px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); overflow-x: auto; font: 13px/1.5 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }

/* Berichte */
.report { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--gap); align-items: start; margin-bottom: 12px; }
.report .panel { margin-bottom: 0; }
.report-sec h2 .count { font: 600 12px/1 var(--font); background: var(--raised); border-radius: 999px; padding: 3px 8px; margin-left: 6px; vertical-align: 2px; color: var(--mut); }
.hints { margin: 0; padding-left: 20px; }
.hints li { margin: 6px 0; max-width: 70ch; }
@media print {
  .tabs, .flash { display: none !important; }
  .report { display: block; }
  .report .panel { break-inside: avoid; border: 0; padding: 0 0 12px; }
  body { background: #fff; color: #000; }
}

/* Posteingang */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.toolbar .tabs { margin-bottom: 14px; }
.tabs .count, .panel-h .count { font: 600 11.5px/1 var(--font); background: var(--raised); border-radius: 999px; padding: 2px 7px; margin-left: 4px; color: var(--mut); }
.mails .row { align-items: center; }
.dot-unread { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; margin-top: 2px; }
.mail.is-unread .dot-unread { background: var(--acc); }
.mail.is-unread .row-t { font-weight: 650; }
.mail .row-t { font-weight: 500; }
.mail .btn-s .ic { width: 16px; height: 16px; }
.badge-soft { background: var(--acc-soft); color: var(--acc); }
.row-tools { padding-top: 0; border-top: 0; }
.disclose.mini summary { font-weight: 550; font-size: 13.5px; color: var(--mut); padding-bottom: 6px; }
.disclose.mini[open] summary { border-bottom: 0; margin-bottom: 4px; padding-bottom: 6px; }
.disclose.mini .form-row { margin: 8px 0; }
.disclose.mini .form-row input[type=password] { max-width: 320px; }
.err.small { font-size: 13px; margin-top: 2px; }
@media (max-width: 640px) {
  .row-main { min-width: 55%; }
  .mails .row { align-items: flex-start; }
  .mails .dot-unread { margin-top: 8px; }
  .mails .row-main { flex-basis: calc(100% - 20px); }
  .mails .row-end { padding-left: 20px; }
}

/* Wissen */
.snip { color: var(--mut); font-size: 13.5px; margin-top: 4px; max-width: 80ch; }
.note-body .md { max-width: none; font-size: 16.5px; line-height: 1.7; }
.note-body .md h3 { font-size: 22px; margin-top: 4px; }
.note-body .md h4 { font: 650 19px/1.3 var(--font-display); letter-spacing: -.01em; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.note-body .md > h4:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }
.note-body .md h5 { font-size: 16.5px; color: var(--acc); margin: 22px 0 6px; scroll-margin-top: 16px; }
.note-body .md h6 { font-size: 15px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 6px; }
.note-body .md p, .note-body .md ul, .note-body .md ol, .note-body .md .md-table { margin-bottom: 14px; }
.note-body .md li { margin: 7px 0; padding-left: 2px; }
.note-body .md li::marker { color: var(--acc); }
.note-body .md li > strong:first-child { color: var(--text); }
.md li.md-l1 { margin-left: 22px; list-style-type: circle; }
.md li.md-l2 { margin-left: 44px; list-style-type: square; }
.md li.md-check.md-l1 { margin-left: 0; }
.md li.md-check.md-l2 { margin-left: 22px; }
.note-body .md blockquote { margin: 0 0 14px; padding: 8px 14px; background: var(--raised); border-radius: 0 10px 10px 0; }
.md-callout { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 10px; background: var(--acc-soft); }
.md-callout.md-c-warn { border-left-color: var(--warn); background: transparent; }
.md-callout.md-c-ok { border-left-color: var(--ok); background: transparent; }
.md-callout-t { font-weight: 650; margin: 0 0 4px !important; }
.md-callout > :last-child { margin-bottom: 0; }
.kn-toc { margin: 4px 0 22px; }
.kn-toc-k { font-size: 12.5px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.kn-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.kn-toc a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--raised); font-size: 13.5px; color: var(--text); }
.kn-toc a:hover { text-decoration: none; background: var(--acc-soft); }
a.wl { text-decoration: underline; text-decoration-color: var(--acc-soft); text-underline-offset: 3px; }
.wl-missing { color: var(--mut); border-bottom: 1px dashed var(--line-strong); }
.facts dd .wl { font-weight: 500; }

/* Kalender */
.agenda { display: grid; gap: 4px; }
.ag-day { padding: 8px 0 4px; }
.ag-day + .ag-day { border-top: 1px solid var(--line); }
.ag-h { font: 600 14px/1.3 var(--font); color: var(--text); margin: 4px 0 2px; }
.ag-h .mut { font-weight: 500; margin-left: 6px; }
.ag-day.is-today .ag-h { color: var(--acc); }
.ag-list .row { padding: 8px 0; gap: 14px; align-items: baseline; }
.ag-list .row:first-child { border-top: 0; }
.ag-time { flex: none; width: 92px; font-size: 13.5px; color: var(--mut); font-weight: 550; }
.ag-task .ag-time { color: var(--warn); }
.ag-empty { margin: 2px 0 6px; }
@media (max-width: 640px) { .ag-time { width: 74px; font-size: 12.5px; } }

/* Cockpit (Übersicht) */
.cockpit-head { margin: 0 0 14px; max-width: none; padding-right: 150px; }
.cockpit-head .today-date { font-size: 13.5px; margin-bottom: 4px; }
.cockpit-head .today-line { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.25; letter-spacing: -.018em; }
.cockpit-head .today-sec { display: block; margin-top: 2px; font-size: .62em; font-weight: 500; letter-spacing: 0; }
.statusbar { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; margin-bottom: var(--gap); }
.statusbar > summary { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; list-style: none; }
.statusbar > summary::-webkit-details-marker { display: none; }
.statusbar .sb-meta { color: var(--mut); font-size: 13px; }
.statusbar .sb-more { margin-left: auto; color: var(--mut); font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.statusbar .sb-more::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.statusbar[open] .sb-more::after { transform: rotate(-135deg); }
.statusbar.st-fehler { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.statusbar.st-warnung { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.sb-body { border-top: 1px solid var(--line); padding: 6px 16px 12px; display: grid; gap: 4px; }
.sb-group h3 { font: 600 13.5px/1.3 var(--font); margin: 10px 0 2px; }
.sb-group h3 .mut { font-weight: 500; margin-left: 6px; }
.sb-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; }
.sb-foot .mut { margin-right: auto; }
.banner { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; margin-bottom: var(--gap); background: var(--acc-soft); color: var(--text); font-weight: 550; }
.banner:hover { text-decoration: none; filter: brightness(1.08); }
.banner .ic { color: var(--acc); }
.banner-go { margin-left: auto; color: var(--acc); font-size: 14px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); align-items: stretch; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px 18px 12px; min-height: 180px; box-shadow: var(--shadow); }
.tile-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tile-h h2 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.tile-h h2 .count { font: 600 12px/1 var(--font); background: var(--acc-soft); color: var(--acc); border-radius: 999px; padding: 3px 8px; margin-left: 4px; vertical-align: 2px; }
.tile-h a { font-size: 13.5px; }
.tile .ag-day { padding-top: 0; }
.tile .ag-h { display: none; }
.tile .ag-time { width: 78px; }
.tile .row-end .chip { display: none; }
.quick-add.mini { display: flex; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.quick-add.mini input { min-height: 34px; padding: 6px 10px; font-size: 14.5px; }
.proj-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.proj-strip ul a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); }
.proj-strip ul a:hover { text-decoration: none; border-color: var(--line-strong); }
.ps-n { font-weight: 600; }
.ps-s { color: var(--mut); font-size: 13px; }
@media (max-width: 1100px) { .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 720px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; }
  .statusbar > summary { flex-wrap: wrap; gap: 6px 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .statusbar { animation: fade .5s .2s var(--ease) both; }
  .tiles .tile { animation: rise .5s var(--ease) both; }
  .is-sorting .tile { animation: none; }
  .tiles .tile:nth-child(2) { animation-delay: .06s; } .tiles .tile:nth-child(3) { animation-delay: .12s; }
}

/* Wissen: Navigator mit Lesebereich */
.kn { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.kn-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px; }
.kn-search { position: relative; margin-bottom: 8px; }
.kn-search .ic { position: absolute; left: 11px; top: 11px; color: var(--mut); width: 18px; height: 18px; }
.kn-search input { padding-left: 36px; min-height: 40px; }
.kn-side > ul, .kn-side > .kt-list { overflow-y: auto; flex: 1; min-height: 0; margin: 0; }
.kt-list { list-style: none; margin: 0; padding: 0 0 0 10px; }
.kn-side > .kt-list { padding-left: 0; }
.kt-dir > summary { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.kt-dir > summary::-webkit-details-marker { display: none; }
.kt-dir > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut); transform: rotate(-45deg); transition: transform .15s var(--ease); flex: none; }
.kt-dir[open] > summary::before { transform: rotate(45deg); }
.kt-dir > summary:hover { background: var(--raised); }
.kt-count { margin-left: auto; color: var(--mut); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kt-note { display: block; padding: 5px 8px 5px 20px; border-radius: 8px; color: var(--mut); font-size: 14px; line-height: 1.35; }
.kt-note:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.kt-note.is-current { background: var(--acc-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--acc); }
.kn-side .rows.notes { overflow-y: auto; flex: 1; min-height: 0; }
.kn-side .rows.notes .row { padding: 8px 6px; }
.kn-side .rows.notes .row.is-current { background: var(--acc-soft); border-radius: 8px; }
.kn-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--mut); margin: 0 4px 4px; }
.kn-side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.kn-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 26px 32px; min-width: 0; outline: none; }
.kn-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; margin-bottom: 14px; }
.kn-head h1 { font-size: 28px; font-weight: 680; letter-spacing: -.02em; flex: 1 1 100%; order: 2; }
.kn-head .btn { order: 3; }
.kn-path { color: var(--acc); font-size: 13px; font-weight: 600; order: 1; flex: 1 1 100%; }
.kn-facts { padding: 12px 0 14px; margin-bottom: 8px; }
.kn-back { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; }
.kn-back h2 { font-size: 15px; margin-bottom: 8px; }
.kn-back h2 .count { font: 600 11.5px/1 var(--font); background: var(--raised); border-radius: 999px; padding: 2px 7px; margin-left: 4px; color: var(--mut); }
.kn-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kn-chips a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; color: var(--text); }
.kn-chips a:hover { border-color: var(--acc); text-decoration: none; }
.kn-sub { font-size: 15px; margin: 22px 0 4px; }
.kn-back-link { display: none; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 12px; }
.kn-back-link .ic { width: 16px; height: 16px; }
@media (max-width: 960px) {
  .kn { grid-template-columns: minmax(0, 1fr); }
  .kn-side { position: static; max-height: none; }
  .kn.has-note .kn-side { display: none; }
  .kn:not(.has-note) .kn-main { display: none; }
  .kn-back-link { display: inline-flex; }
  .kn-main { padding: 18px 16px; }
}

/* Kalender: Zeitstrahl */
.tl-panel { padding: 18px 20px 14px; overflow: hidden; }
.tl { display: grid; gap: 6px; }
.ag-mobile { display: none; }
.tl-hours { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 11.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tl-hours > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.tl-hours > div span { border-left: 1px solid var(--line); padding-left: 4px; }
.tl-day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.tl-day.is-weekend .tl-track { background-color: color-mix(in srgb, var(--raised) 60%, transparent); }
.tl-label { display: flex; flex-direction: column; line-height: 1.2; padding-top: 6px; }
.tl-label strong { font-size: 14px; }
.tl-label small { color: var(--mut); font-size: 12px; }
.tl-day.is-today .tl-label strong { color: var(--acc); }
.tl-track { position: relative; display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); grid-auto-rows: 34px; grid-auto-flow: row dense; row-gap: 4px; min-height: 34px; border-radius: 10px; padding: 2px 0;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 8)); background-color: var(--raised); }
.tl-day.is-today .tl-track { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent), 0 0 24px -12px var(--acc); }
.tl-ev { --c: var(--acc); position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 2px 8px; margin: 0 1px; border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 14%, transparent)); border-left: 2px solid var(--c);
  box-shadow: 0 0 14px -6px var(--c); overflow: hidden; white-space: nowrap; }
.tl-ev .tl-t { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tl-ev .tl-s { font-size: 11px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.tl-allday { flex-direction: row; align-items: center; gap: 10px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, transparent) 0 10px, color-mix(in srgb, var(--c) 16%, transparent) 10px 20px); }
.tl-ev.is-clipped { border-left-style: dashed; }
.src-1 { --c: #b39ddb; } .src-2 { --c: var(--ok); } .src-3 { --c: var(--warn); }
.tl-now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--acc); box-shadow: 0 0 10px var(--acc), 0 0 2px var(--acc); z-index: 2; pointer-events: none; }
.tl-now::before { content: ""; position: absolute; top: -3px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.tl-now span { position: absolute; top: -20px; left: 8px; font-size: 11px; font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; }
.tl-free { grid-column: 1 / -1; align-self: center; padding-left: 10px; color: var(--mut); font-size: 12px; opacity: .7; }
.tl-due { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tl-due a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--text); }
.tl-due a:hover { text-decoration: none; border-color: var(--warn); }
.tl-dm { color: var(--warn); font-size: 10px; }
@media (prefers-reduced-motion: no-preference) { .tl-now { animation: tl-pulse 2.4s ease-in-out infinite; } }
@keyframes tl-pulse { 50% { box-shadow: 0 0 18px var(--acc), 0 0 4px var(--acc); } }
@media (max-width: 720px) { .tl { display: none; } .ag-mobile { display: block; } }
.gs-1 { grid-column-start: 1; } .ge-1 { grid-column-end: 1; }
.gs-2 { grid-column-start: 2; } .ge-2 { grid-column-end: 2; }
.gs-3 { grid-column-start: 3; } .ge-3 { grid-column-end: 3; }
.gs-4 { grid-column-start: 4; } .ge-4 { grid-column-end: 4; }
.gs-5 { grid-column-start: 5; } .ge-5 { grid-column-end: 5; }
.gs-6 { grid-column-start: 6; } .ge-6 { grid-column-end: 6; }
.gs-7 { grid-column-start: 7; } .ge-7 { grid-column-end: 7; }
.gs-8 { grid-column-start: 8; } .ge-8 { grid-column-end: 8; }
.gs-9 { grid-column-start: 9; } .ge-9 { grid-column-end: 9; }
.gs-10 { grid-column-start: 10; } .ge-10 { grid-column-end: 10; }
.gs-11 { grid-column-start: 11; } .ge-11 { grid-column-end: 11; }
.gs-12 { grid-column-start: 12; } .ge-12 { grid-column-end: 12; }
.gs-13 { grid-column-start: 13; } .ge-13 { grid-column-end: 13; }
.gs-14 { grid-column-start: 14; } .ge-14 { grid-column-end: 14; }
.gs-15 { grid-column-start: 15; } .ge-15 { grid-column-end: 15; }
.gs-16 { grid-column-start: 16; } .ge-16 { grid-column-end: 16; }
.gs-17 { grid-column-start: 17; } .ge-17 { grid-column-end: 17; }
.gs-18 { grid-column-start: 18; } .ge-18 { grid-column-end: 18; }
.gs-19 { grid-column-start: 19; } .ge-19 { grid-column-end: 19; }
.gs-20 { grid-column-start: 20; } .ge-20 { grid-column-end: 20; }
.gs-21 { grid-column-start: 21; } .ge-21 { grid-column-end: 21; }
.gs-22 { grid-column-start: 22; } .ge-22 { grid-column-end: 22; }
.gs-23 { grid-column-start: 23; } .ge-23 { grid-column-end: 23; }
.gs-24 { grid-column-start: 24; } .ge-24 { grid-column-end: 24; }
.gs-25 { grid-column-start: 25; } .ge-25 { grid-column-end: 25; }
.gs-26 { grid-column-start: 26; } .ge-26 { grid-column-end: 26; }
.gs-27 { grid-column-start: 27; } .ge-27 { grid-column-end: 27; }
.gs-28 { grid-column-start: 28; } .ge-28 { grid-column-end: 28; }
.gs-29 { grid-column-start: 29; } .ge-29 { grid-column-end: 29; }
.gs-30 { grid-column-start: 30; } .ge-30 { grid-column-end: 30; }
.gs-31 { grid-column-start: 31; } .ge-31 { grid-column-end: 31; }
.gs-32 { grid-column-start: 32; } .ge-32 { grid-column-end: 32; }
.gs-33 { grid-column-start: 33; } .ge-33 { grid-column-end: 33; }
.gs-34 { grid-column-start: 34; } .ge-34 { grid-column-end: 34; }
.gs-35 { grid-column-start: 35; } .ge-35 { grid-column-end: 35; }
.gs-36 { grid-column-start: 36; } .ge-36 { grid-column-end: 36; }
.gs-37 { grid-column-start: 37; } .ge-37 { grid-column-end: 37; }
.gs-38 { grid-column-start: 38; } .ge-38 { grid-column-end: 38; }
.gs-39 { grid-column-start: 39; } .ge-39 { grid-column-end: 39; }
.gs-40 { grid-column-start: 40; } .ge-40 { grid-column-end: 40; }
.gs-41 { grid-column-start: 41; } .ge-41 { grid-column-end: 41; }
.gs-42 { grid-column-start: 42; } .ge-42 { grid-column-end: 42; }
.gs-43 { grid-column-start: 43; } .ge-43 { grid-column-end: 43; }
.gs-44 { grid-column-start: 44; } .ge-44 { grid-column-end: 44; }
.gs-45 { grid-column-start: 45; } .ge-45 { grid-column-end: 45; }
.gs-46 { grid-column-start: 46; } .ge-46 { grid-column-end: 46; }
.gs-47 { grid-column-start: 47; } .ge-47 { grid-column-end: 47; }
.gs-48 { grid-column-start: 48; } .ge-48 { grid-column-end: 48; }
.gs-49 { grid-column-start: 49; } .ge-49 { grid-column-end: 49; }
.gs-50 { grid-column-start: 50; } .ge-50 { grid-column-end: 50; }
.gs-51 { grid-column-start: 51; } .ge-51 { grid-column-end: 51; }
.gs-52 { grid-column-start: 52; } .ge-52 { grid-column-end: 52; }
.gs-53 { grid-column-start: 53; } .ge-53 { grid-column-end: 53; }
.gs-54 { grid-column-start: 54; } .ge-54 { grid-column-end: 54; }
.gs-55 { grid-column-start: 55; } .ge-55 { grid-column-end: 55; }
.gs-56 { grid-column-start: 56; } .ge-56 { grid-column-end: 56; }
.gs-57 { grid-column-start: 57; } .ge-57 { grid-column-end: 57; }
.gs-58 { grid-column-start: 58; } .ge-58 { grid-column-end: 58; }
.gs-59 { grid-column-start: 59; } .ge-59 { grid-column-end: 59; }
.gs-60 { grid-column-start: 60; } .ge-60 { grid-column-end: 60; }
.gs-61 { grid-column-start: 61; } .ge-61 { grid-column-end: 61; }
.gs-62 { grid-column-start: 62; } .ge-62 { grid-column-end: 62; }
.gs-63 { grid-column-start: 63; } .ge-63 { grid-column-end: 63; }
.gs-64 { grid-column-start: 64; } .ge-64 { grid-column-end: 64; }
.gs-65 { grid-column-start: 65; } .ge-65 { grid-column-end: 65; }
.nl-0 { left: 0%; }
.nl-1 { left: 1.5625%; }
.nl-2 { left: 3.125%; }
.nl-3 { left: 4.6875%; }
.nl-4 { left: 6.25%; }
.nl-5 { left: 7.8125%; }
.nl-6 { left: 9.375%; }
.nl-7 { left: 10.9375%; }
.nl-8 { left: 12.5%; }
.nl-9 { left: 14.0625%; }
.nl-10 { left: 15.625%; }
.nl-11 { left: 17.1875%; }
.nl-12 { left: 18.75%; }
.nl-13 { left: 20.3125%; }
.nl-14 { left: 21.875%; }
.nl-15 { left: 23.4375%; }
.nl-16 { left: 25%; }
.nl-17 { left: 26.5625%; }
.nl-18 { left: 28.125%; }
.nl-19 { left: 29.6875%; }
.nl-20 { left: 31.25%; }
.nl-21 { left: 32.8125%; }
.nl-22 { left: 34.375%; }
.nl-23 { left: 35.9375%; }
.nl-24 { left: 37.5%; }
.nl-25 { left: 39.0625%; }
.nl-26 { left: 40.625%; }
.nl-27 { left: 42.1875%; }
.nl-28 { left: 43.75%; }
.nl-29 { left: 45.3125%; }
.nl-30 { left: 46.875%; }
.nl-31 { left: 48.4375%; }
.nl-32 { left: 50%; }
.nl-33 { left: 51.5625%; }
.nl-34 { left: 53.125%; }
.nl-35 { left: 54.6875%; }
.nl-36 { left: 56.25%; }
.nl-37 { left: 57.8125%; }
.nl-38 { left: 59.375%; }
.nl-39 { left: 60.9375%; }
.nl-40 { left: 62.5%; }
.nl-41 { left: 64.0625%; }
.nl-42 { left: 65.625%; }
.nl-43 { left: 67.1875%; }
.nl-44 { left: 68.75%; }
.nl-45 { left: 70.3125%; }
.nl-46 { left: 71.875%; }
.nl-47 { left: 73.4375%; }
.nl-48 { left: 75%; }
.nl-49 { left: 76.5625%; }
.nl-50 { left: 78.125%; }
.nl-51 { left: 79.6875%; }
.nl-52 { left: 81.25%; }
.nl-53 { left: 82.8125%; }
.nl-54 { left: 84.375%; }
.nl-55 { left: 85.9375%; }
.nl-56 { left: 87.5%; }
.nl-57 { left: 89.0625%; }
.nl-58 { left: 90.625%; }
.nl-59 { left: 92.1875%; }
.nl-60 { left: 93.75%; }
.nl-61 { left: 95.3125%; }
.nl-62 { left: 96.875%; }
.nl-63 { left: 98.4375%; }
.nl-64 { left: 100%; }
.tl-ev.is-short { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 8%, transparent) 70%, transparent); box-shadow: none; }

/* Mailansicht */
.mail-view { max-width: 920px; }
.mail-head h1 { font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-bottom: 12px; }
.mail-facts { margin-bottom: 14px; }
.mail-head .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mail-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; white-space: pre-wrap; font: 15px/1.6 var(--font); max-width: 80ch; margin-bottom: var(--gap); overflow-wrap: anywhere; }
.mail-att { margin-bottom: 4px; }
.reply h2 { margin-bottom: 8px; }
.reply textarea { min-height: 260px; font: 14.5px/1.55 var(--font); }
.reply .form-act { align-items: center; flex-wrap: wrap; }
.kn-back-link.show { display: inline-flex; }

/* Projekte: Priorität erklärt, nächster Schritt aus STATUS.md */
.ns-k { color: var(--text); font-weight: 600; }
.row-sub.next-step { color: var(--text); opacity: .9; }
.next-step-box { margin: 0 0 var(--gap); padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 12px; background: var(--surface); max-width: 920px; }
.dd-sub { display: block; color: var(--mut); font-size: 12.5px; font-weight: 400; margin-top: 2px; max-width: 34ch; }

/* Wissen: breit, Leiste einklappbar, ruhiger Lesefluss */
.main:has(> .kn) { max-width: none; }
.kn.side-off { grid-template-columns: minmax(0, 1fr); }
.kn.side-off .kn-side { display: none; }
.kn-toggle { display: none; float: right; margin: -6px -10px 0 12px; }
.js .kn-toggle { display: inline-flex; }
.kn-metaline { order: 4; flex: 1 1 100%; color: var(--mut); font-size: 13.5px; margin: 2px 0 0; }
.kn-metaline a { color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.kn-lead { margin: 6px 0 24px; padding: 16px 20px; border-radius: 14px; background: var(--acc-soft); font-size: 17px; line-height: 1.6; }
.kn-lead p { margin: 0; }
.kn-lead .kn-lead-k { font-size: 12.5px; font-weight: 650; color: var(--acc); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.src { position: relative; display: inline; }
.src-ref { font: 650 10.5px/1 var(--font); vertical-align: super; color: var(--mut); background: var(--raised); border: 0; border-radius: 999px; min-width: 17px; padding: 3px 5px; margin-left: 2px; cursor: pointer; }
.src-ref:hover, .src-ref:focus-visible { color: var(--text); background: var(--acc-soft); }
.src-pop { display: none; position: absolute; left: 0; top: 1.6em; z-index: 5; width: max-content; max-width: min(360px, 80vw); padding: 8px 11px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13.5px; line-height: 1.45; color: var(--text); font-weight: 400; }
.src-ref:hover + .src-pop, .src-ref:focus + .src-pop, .src-pop:hover { display: block; }
.kn-details { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 12px; }
.kn-details > summary { cursor: pointer; color: var(--mut); font-size: 14px; font-weight: 600; }
.kn-details > summary .count { font: 600 11.5px/1 var(--font); background: var(--raised); border-radius: 999px; padding: 3px 8px; margin-left: 6px; }
.kn-details[open] > summary { margin-bottom: 12px; }
.kn-details .kn-facts { border-bottom: 0; padding-top: 0; }
.kn-details-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
@media (max-width: 960px) { .js .kn-toggle { display: none; } .kn-lead { font-size: 16px; padding: 14px 16px; } }

/* Systemzustand: Banner, Punkte in der Navigation */
.health-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--gap); padding: 11px 16px; border-radius: 12px;
  background: var(--bad-soft); border: 1px solid var(--bad); color: var(--text); }
.health-banner:hover { text-decoration: none; border-color: var(--bad); }
.health-banner .ic { color: var(--bad); flex: none; }
.health-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.health-banner .hb-since, .health-banner .hb-more { color: var(--mut); font-size: 13px; white-space: nowrap; }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; }
.nav-dot.nd-fehler { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.nav-dot.nd-warnung { background: var(--warn); }
.badge + .nav-dot { margin-left: 6px; }
.health-sum { display: grid; gap: 4px; }

/* SEO */
.seo-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.seo-site { margin: 0; }
.seo-site .panel-h h2 { font-size: 16px; }
.seo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delta { font-size: 12px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.seo-actions .row { flex-direction: column; align-items: stretch; gap: 10px; }
.seo-actions .row-t { font-weight: 600; margin: 0 0 2px; }
.seo-actions .row-sub .chip { margin-right: 4px; }
.seo-actions .row-end { flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-width: none; }
.seo-ai { margin-top: 8px; font-size: 14.5px; }
.seo-ai > summary { cursor: pointer; color: var(--acc); font-weight: 600; font-size: 13.5px; }
.seo-ai[open] { padding: 10px 14px; border-radius: 10px; background: var(--raised); }
.seo-ai ol { margin: 6px 0; padding-left: 20px; }
.seo-table td.num, .seo-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .seo-actions .row-end { max-width: none; justify-content: flex-start; } }

/* Einstellungen */
.settings { display: grid; gap: 16px; margin-bottom: 16px; }
.settings > .panel { margin-bottom: 0; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 28px; align-items: start; }
.set-grid .seg-group { margin-bottom: 0; }
.set-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.set-grid .sub-h { margin-top: 0; }
.set-save { position: sticky; bottom: 12px; z-index: 5; justify-content: flex-end; }
.set-save .btn { box-shadow: var(--shadow); }
.w-order { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.w-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.w-item + .w-item { margin-top: 8px; }
.w-item::before { counter-increment: w; content: counter(w); font: 600 12px/1 var(--font); color: var(--mut); width: 18px; flex: none; }
.w-item .check { flex: 1; }
.w-move { display: inline-flex; gap: 6px; }
.w-extra { margin-top: 14px; }
.upload input[type=file] { flex: 1 1 220px; min-width: 0; font-size: 14px; color: var(--mut); }
.upload input[type=file]::file-selector-button { font: 600 13.5px/1 var(--font); color: var(--text); background: var(--raised); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; margin-right: 10px; cursor: pointer; }
.panel .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Privat, Demnächst, Schnellerfassung, Einkauf */
.tabs-page { margin-bottom: var(--gap); }
.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.up-item { display: flex; gap: 10px; align-items: flex-start; }
.up-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--raised); display: grid; place-items: center; color: var(--acc); }
.up-ic .ic { width: 16px; height: 16px; }
.gift-list, .shop-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gift-list li, .shop-list li { display: flex; align-items: center; gap: 10px; }
.gift-list li.is-done span, .shop-list li.is-done span { color: var(--mut); text-decoration: line-through; }
.inline-add { display: flex; gap: 8px; align-items: center; flex: 1; max-width: 520px; }
.inline-add input { min-height: 36px; padding: 6px 10px; font-size: 14.5px; }
.gift-person { padding: 12px 0; border-top: 1px solid var(--line); }
.gift-person:first-of-type { border-top: 0; padding-top: 0; }
.gift-add { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.shop-add { max-width: none; margin-bottom: 14px; }
.shop-add input { min-height: 44px; font-size: 16px; }
.shop-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
.shop-list li:first-child { border-top: 0; }
.capture { max-width: 640px; margin: 0 auto var(--gap); }
.capture h1 { font: 650 28px/1.2 var(--font-display); margin-bottom: 4px; }
.capture-form { display: grid; gap: 12px; margin-top: 14px; }
.capture-form textarea { font-size: 17px; line-height: 1.5; min-height: 140px; }
.capture-text { margin: 0; white-space: normal; }
.capture-links { display: flex; justify-content: center; gap: 22px; margin-top: 8px; }
.capture-links a { display: inline-flex; align-items: center; gap: 6px; }

/* Aufgaben als Navigator */
.main:has(> .tk) { max-width: none; }
.tk-add { display: flex; gap: 6px; margin-bottom: 10px; }
.tk-add input { min-height: 40px; }
.tk-nav { overflow-y: auto; flex: 1; min-height: 0; }
.tk-k { font-size: 12px; font-weight: 650; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; margin: 12px 6px 4px; }
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk-list a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text); font-size: 14.5px; }
.tk-list a:hover { background: var(--raised); text-decoration: none; }
.tk-list a[aria-current] { background: var(--acc-soft); font-weight: 600; }
.tk-n { color: var(--mut); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tk-sofort .tk-n { color: var(--bad); font-weight: 650; }
.tk .kn-side-foot { flex-wrap: wrap; }
.tk-group + .tk-group { margin-top: 22px; }
.tk-group .grp { margin-bottom: 4px; }
.tk-actions { margin: 4px 0 18px; }
.tk-notes { margin-bottom: 8px; }
.tk-more { margin-top: 6px; }
.tk-more > summary { cursor: pointer; color: var(--mut); font-size: 13.5px; padding: 6px 8px; }

/* Routine: Check-in, Gewohnheiten, Feierabend, Überlastung, Termin-Vorbereitung */
.cockpit-head { position: relative; }
.fa-btn { position: absolute; right: 0; top: 0; }
.fa-banner { display: flex; align-items: center; gap: 12px; margin-bottom: var(--gap); padding: 12px 16px; border-radius: 12px; background: var(--acc-soft); }
.fa-banner > div { flex: 1; }
.calm-hint { margin-bottom: var(--gap); padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); background: var(--surface); }
.calm-hint p { margin: 0 0 6px; }
.calm-form ul { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.prep { margin-bottom: var(--gap); padding: 16px 18px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--surface); }
.prep .tile-h h2 { font-size: 16px; }
.prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 24px; margin-top: 8px; }
.prep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prep-list a { display: inline-flex; align-items: center; gap: 6px; }
.ck-form { display: grid; gap: 10px; }
.ck-row { border: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ck-row legend { float: left; width: 80px; font-size: 14px; color: var(--mut); padding: 0; }
.ck-scale { display: inline-flex; gap: 6px; }
.ck-scale label { position: relative; cursor: pointer; }
.ck-scale input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ck-scale span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); font-weight: 650; }
.ck-scale input:checked + span { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.ck-scale input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.ck-today { display: flex; gap: 18px; margin: 0 0 6px; font-size: 15px; }
.ck-today strong { font-size: 20px; }
.ck-chart { margin: 8px 0 0; }
.ck-chart svg { width: 100%; height: auto; display: block; }
.ck-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ck-e { stroke: var(--acc); }
.ck-m { stroke: var(--warn); }
.ck-mid { stroke: var(--line); stroke-dasharray: 4 4; }
.ck-chart figcaption { display: flex; gap: 16px; font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.ck-key::before { content: ''; display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.ck-key-e::before { background: var(--acc); }
.ck-key-m::before { background: var(--warn); }
.hb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hb-list li { display: flex; align-items: center; gap: 10px; }
.hb-list li.is-done .hb-n { color: var(--mut); }
.hb-n { flex: 1; }
.hb-streak { font-size: 12px; color: var(--ok); font-weight: 600; }
.hb-add { max-width: none; margin-top: 14px; }
.fa-list { display: grid; gap: 8px; }
.fa-form .panel { margin-bottom: var(--gap); }
.fa-go { justify-content: flex-start; }
ul.plain { list-style: none; margin: 8px 0 0; padding: 0; }
@media (max-width: 640px) { .cockpit-head { padding-right: 0; } .fa-btn { position: static; margin-top: 10px; } }

/* Kästchen verschieben */
.sortable { margin-bottom: var(--gap); }
.stack-sort { display: grid; gap: var(--gap); }
.stack-sort > .sort-item > .panel, .stack-sort > .sort-item > details.panel { margin-bottom: 0; }
.sort-item { position: relative; min-width: 0; }
.tiles > .sort-item > .tile, .tiles > .sort-item > section { height: 100%; }
.tiles > .sort-wide { grid-column: 1 / -1; }
.tiles > .sort-wide > .proj-strip { margin: 0; }
.seo-sites > .sort-item > .seo-site { height: 100%; }
.drag-h { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3; display: none; width: 34px; height: 18px; padding: 0;
  border: 0; border-radius: 9px; background: transparent; color: var(--mut); cursor: grab; touch-action: none; opacity: 0; transition: opacity .15s var(--ease), background-color .15s var(--ease); }
.js .drag-h { display: grid; place-items: center; }
.drag-h svg { width: 18px; height: 18px; transform: rotate(90deg); fill: currentColor; }
.sort-item:hover > .drag-h, .drag-h:focus-visible, .is-sorting .drag-h { opacity: 1; }
.drag-h:hover, .drag-h:focus-visible { background: var(--raised); color: var(--text); }
.drag-h:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.is-dragging { opacity: .55; }
.is-dragging > .drag-h { cursor: grabbing; }
.is-sorting { user-select: none; }
.sort-failed { outline: 1px dashed var(--bad); outline-offset: 4px; }
@media (hover: none) { .drag-h { opacity: .55; } }