/* DigiManagement – UI-Prototyp
 * Ausrichtung: Kommunikation und Planung mit dem Kunden, für Menschen ohne Technik-Hintergrund.
 * Gestaltung 1.3: volle Bildschirmbreite, Seitenleiste in DigiRift-Navy, ruhige Karten, klare Hierarchie.
 * Farben nach DigiRift-Branding (Navy #0a3e76 hell, Blau #4a90e2 dunkel, wie DigiChat).
 * Diagrammfarben mit dem Palette-Validator geprüft (Kategorisch 3 Slots, Ordinal 3 Stufen, hell + dunkel).
 * Schriften: Poppins (Überschriften) und Inter (Oberfläche), lokal einzubinden – kein CDN. Ersatz: Systemschrift.
 */

:root {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eceff5;
  --border: #e4e8ef;
  --border-strong: #cfd5df;
  --ink: #0f172a;
  --ink-2: #475467;
  --ink-3: #5f6b7e;
  --accent: #0a3e76;
  --accent-fg: #ffffff;
  --accent-soft: rgba(37, 112, 208, 0.09);
  --accent-soft-2: rgba(37, 112, 208, 0.17);
  --accent-text: #0d4f9c;
  --accent-bright: #2470d0;
  --customer: #8a4b00;
  --customer-soft: rgba(214, 132, 0, 0.12);

  /* Seitenleiste */
  --side-bg: linear-gradient(180deg, #082a52 0%, #0a3e76 100%);
  --side-ink: rgba(255, 255, 255, 0.76);
  --side-muted: rgba(255, 255, 255, 0.52);
  --side-hover: rgba(255, 255, 255, 0.08);
  --side-active: rgba(255, 255, 255, 0.15);
  --side-line: rgba(255, 255, 255, 0.1);

  /* Kopfbereich Start */
  --hero-bg: linear-gradient(120deg, #082a52 0%, #0a3e76 48%, #1d64b8 100%);

  /* Status (reserviert: nur für gut/knapp/kritisch, immer mit Symbol + Wort) */
  --good: #0ca30c;
  --good-text: #006300;
  --warn: #fab219;
  --warn-text: #7a4a0a;
  --crit: #d03b3b;
  --crit-text: #a11919;

  /* Diagramme */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --o-done: #104281;
  --o-wip: #2a78d6;
  --o-open: #86b6ef;
  --grid: #e9ecf1;
  --axis: #c3c2b7;
  --ref: #6b7280;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.22);
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-head: Poppins, Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: 32px;
  --gap: 20px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0d13;
  --surface: #11151d;
  --surface-2: #171c26;
  --surface-3: #1e2430;
  --border: #222938;
  --border-strong: #353d4e;
  --ink: #e9ecf3;
  --ink-2: #b0b8c8;
  --ink-3: #8f99ad;
  --accent: #4a90e2;
  --accent-fg: #04101a;
  --accent-soft: rgba(74, 144, 226, 0.13);
  --accent-soft-2: rgba(74, 144, 226, 0.24);
  --accent-text: #8ab6ec;
  --accent-bright: #4a90e2;
  --customer: #f0b35a;
  --customer-soft: rgba(240, 179, 90, 0.13);
  --side-bg: linear-gradient(180deg, #0b1322 0%, #0e1b31 100%);
  --hero-bg: linear-gradient(120deg, #0b1f3b 0%, #0f2f57 55%, #17457d 100%);
  --good-text: #56d397;
  --warn-text: #f5b54b;
  --crit-text: #ff8f8f;
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --o-done: #9ec5f4;
  --o-wip: #3987e5;
  --o-open: #184f95;
  --grid: #222733;
  --axis: #383835;
  --ref: #9da2af;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.5 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 650; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; }
h2 { font-size: 15.5px; }
h3 { font-size: 14px; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft-2); }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 14px; height: 14px; }
.icon.lg { width: 20px; height: 20px; }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: var(--gap); }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--side-bg);
  color: var(--side-ink);
  padding: 18px 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 20px; }
.brand-mark { width: 32px; height: 32px; color: #fff; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.01em; }
.brand-sub { font-size: 11.5px; color: var(--side-muted); margin-top: -1px; }
.nav-label { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.09em; color: var(--side-muted); padding: 20px 12px 6px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 10px; min-height: 38px;
  color: var(--side-ink); font-weight: 500; cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--side-active); color: #fff; }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #8cc0f5; }
.nav-item .count { margin-left: auto; min-width: 21px; text-align: center; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.13); color: #fff; padding: 1px 7px; border-radius: 999px; }
.nav-item .count.hot { background: #2470d0; box-shadow: 0 0 0 2px rgba(36, 112, 208, 0.25); }
.nav-item .nl { min-width: 0; line-height: 1.3; flex: 1; }
.nav-item small { display: block; font-size: 11.5px; font-weight: 400; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .nav-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-left: auto; }
.nav-dot.good { background: #3ccf6e; }
.nav-dot.warning { background: var(--warn); }
.nav-dot.critical { background: #ff6b6b; }
.side-cta { margin: 18px 2px 0; justify-content: center; background: #fff !important; color: #0a3e76 !important; border-color: transparent !important; }
.side-cta:hover { filter: none !important; background: #eaf2fd !important; }
.sidebar-foot { margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid var(--side-line); display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--side-muted); }
.sidebar-foot .av, .sidebar-foot .av.customer { background: rgba(255, 255, 255, 0.16); color: #fff; border: 0; }
.sidebar-foot b { display: block; color: #fff; font-weight: 600; font-size: 13px; }
.proj-key { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--ink-2); }

/* Projekt-Kennzeichen: Farbe steht für das Projekt, Name immer daneben */
.pav { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.pav.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.pav.md { width: 36px; height: 36px; border-radius: 10px; font-size: 12.5px; }
.pav.KEHL { background: linear-gradient(135deg, #2563eb, #1e3a8a); }
.pav.DCHAT { background: linear-gradient(135deg, #0f766e, #115e59); }
.pav.DNOTE { background: linear-gradient(135deg, #7c3aed, #5b21b6); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 var(--pad);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.search-btn {
  display: flex; align-items: center; gap: 10px; flex: 0 1 480px; min-width: 260px; height: 40px;
  padding: 0 12px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--ink-3); cursor: pointer; box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--ink-2); background: var(--surface); }
.search-btn .kbd { margin-left: auto; }
.search-btn > span:not(.kbd) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.demo-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; color: var(--warn-text); background: color-mix(in srgb, var(--warn) 17%, transparent); padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: help; }
.topbar-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.topbar-title .subtle { font-weight: 400; }
.content { padding: 28px var(--pad) 56px; width: 100%; }

/* ---------- Buttons, Pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font-weight: 550; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-xs); transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, filter 0.15s;
}
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--border-strong) 70%, var(--ink-3)); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff) 0%, var(--accent) 100%);
  border-color: var(--accent); color: var(--accent-fg);
  box-shadow: 0 1px 2px rgba(10, 62, 118, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon-only { width: 38px; min-height: 38px; padding: 0; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 10px; }
.seg button { border: 0; background: none; padding: 5px 12px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 1px 4px rgba(15, 23, 42, 0.06); }
:root[data-theme="dark"] .seg button.on { background: var(--surface-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 550; padding: 2px 9px; border-radius: 999px; line-height: 1.5;
  background: var(--surface-3); color: var(--ink-2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.good { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good-text); }
.pill.warning { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn-text); }
.pill.critical { background: color-mix(in srgb, var(--crit) 13%, transparent); color: var(--crit-text); }
.pill.customer { background: var(--customer-soft); color: var(--customer); }
.pill.accent { background: var(--accent-soft); color: var(--accent-text); }
.pill.outline { background: transparent; border: 1px solid var(--border-strong); padding: 1px 8px; }

.type { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.type .icon { width: 14px; height: 14px; }
.type.feature .icon { color: var(--accent-text); }
.type.bug .icon { color: var(--crit-text); }
.type.cr .icon { color: var(--customer); }
.type.question .icon { color: var(--warn-text); }
.key { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.nr { display: inline-block; font-size: 11.5px; font-weight: 650; color: var(--ink-2); background: var(--surface-3); border-radius: 6px; padding: 0 7px; line-height: 1.7; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nr-c { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-size: 11.5px; font-weight: 700; }
.nr-c.soft { background: var(--surface-3); color: var(--ink-2); }
.vis { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.card-h .vis { margin-left: auto; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; }
.status .ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink-3); }
.status.geplant .ring { border-style: dotted; }
.status.arbeit .ring { border-color: var(--accent-text); background: conic-gradient(var(--accent-text) 0 50%, transparent 0); }
.status.abnahme .ring { border-color: var(--customer); background: conic-gradient(var(--customer) 0 80%, transparent 0); }
.status.erledigt .ring { border-color: var(--good-text); background: var(--good-text); }

/* Avatare: Team rund, Kunden rund mit Rahmen, Automatik eckig und grau */
.av {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--accent-soft-2); color: var(--accent-text);
}
.av.customer { background: var(--customer-soft); color: var(--customer); border: 1px solid color-mix(in srgb, var(--customer) 40%, transparent); }
.av.lg { width: 36px; height: 36px; font-size: 12px; }
.av.none { background: transparent; border: 1px dashed var(--border-strong); color: var(--ink-3); }
.av.system { border-radius: 7px; background: var(--surface-3); color: var(--ink-2); }
.who { display: inline-flex; align-items: center; gap: 7px; }

.live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); flex: none; }
.live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-bright); opacity: 0; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live::after { animation: none; } * { transition: none !important; } }

/* ---------- Karten, Kacheln, Raster ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; min-height: 56px; }
.card-h .subtle { margin-left: auto; }
.card-h > a.subtle:hover { color: var(--accent-text); }
.card-b { padding: 4px 20px 20px; }
.card-b.flush { padding: 0; }
.grid { display: grid; gap: var(--gap); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
.g-detail { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 420px); align-items: start; }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); align-items: start; }

/* Spalten: breit drei, mittel zwei (dritte rutscht unter die zweite), schmal eine */
.cols { display: grid; gap: var(--gap); align-items: start; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); }
.cols > * { min-width: 0; }

.page-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.page-h .crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.page-h .crumbs a { color: var(--ink-3); }
.page-h .crumbs a:hover { color: var(--accent-text); }
.page-h .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.page-intro { color: var(--ink-2); margin-top: 6px; max-width: 760px; }
.h-sub { font-family: var(--font); font-weight: 400; font-size: 15px; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.proj-title { display: flex; align-items: center; gap: 14px; }

.tabs {
  display: flex; gap: 2px; margin: 0 0 24px; padding: 4px; width: fit-content; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-xs);
  overflow-x: auto; scrollbar-width: none;
}
.tabs a, .tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 0; background: none;
  color: var(--ink-2); font-weight: 550; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.tabs a:hover, .tabs button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.tabs a.on, .tabs button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.tabs.inner { margin: 0 0 16px; }

.tile { padding: 18px 20px; position: relative; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; }
.tile-top { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.tile-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); }
.tile.tone-kunde .tile-ic { background: var(--customer-soft); color: var(--customer); }
.tile.tone-good .tile-ic { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good-text); }
.tile.tone-warning .tile-ic { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn-text); }
.tile.tone-critical .tile-ic { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit-text); }
.tile.tone-neutral .tile-ic { background: var(--surface-3); color: var(--ink-2); }
.tile .label { font-size: 13px; color: var(--ink-2); font-weight: 550; }
.tile .label.row { flex-wrap: wrap; gap: 4px 8px; }
.tile .value { font-size: 30px; font-weight: 700; margin-top: 12px; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .delta { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.tile .delta.up-good { color: var(--good-text); }
.tile .delta.late, .subtle.late { color: var(--warn-text); font-weight: 600; }
.tile.click { cursor: pointer; }
.tile.click:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
.tile .meter { margin-top: 12px; }

/* Meter: Spur ist eine hellere Stufe derselben Farbe */
.meter { position: relative; height: 8px; border-radius: 999px; background: var(--accent-soft-2); overflow: visible; }
.meter > .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-bright); }
.meter.warning { background: color-mix(in srgb, var(--warn) 25%, transparent); }
.meter.warning > .fill { background: var(--warn); }
.meter.critical { background: color-mix(in srgb, var(--crit) 18%, transparent); }
.meter.critical > .fill { background: var(--crit); }
.meter.good { background: color-mix(in srgb, var(--good) 18%, transparent); }
.meter.good > .fill { background: var(--good); }
.meter > .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.meter.thin { height: 6px; }

/* ---------- Kopfbereich Start und Portal ---------- */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(0, 2.6fr); gap: 28px; align-items: center;
  padding: 26px 28px; margin-bottom: var(--gap); border-radius: 18px;
  background: var(--hero-bg); color: #fff; box-shadow: 0 10px 30px rgba(8, 42, 82, 0.18);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 420px; height: 420px; right: -120px; top: -220px; background: radial-gradient(circle, rgba(140, 192, 245, 0.28), transparent 65%); }
.hero::after { width: 300px; height: 300px; left: 22%; bottom: -220px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 65%); }
.hero > * { position: relative; z-index: 1; min-width: 0; }
.hero-date { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); font-weight: 500; }
.hero h1 { font-size: 30px; margin-top: 4px; color: #fff; }
.hero-sub { color: rgba(255, 255, 255, 0.82); margin-top: 8px; font-size: 14px; line-height: 1.55; max-width: 460px; }
.hero-sub b { color: #fff; font-weight: 600; }
.hero-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hero .btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: none; }
.hero .btn:hover { background: rgba(255, 255, 255, 0.2); }
.hero .btn.primary { background: #fff; color: #0a3e76; border-color: #fff; }
.hero-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.htile {
  padding: 16px 18px; border-radius: 14px; cursor: pointer; min-width: 0;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px); transition: background 0.15s, transform 0.15s;
}
.htile:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }
.htile .hl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.8); font-weight: 550; }
.htile .hl .icon { color: #9cc8f6; }
.htile .hv { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.htile .hd { font-size: 12px; color: rgba(255, 255, 255, 0.72); margin-top: 6px; line-height: 1.4; }
.hero .meter { background: rgba(255, 255, 255, 0.18); }
.hero .meter > .fill { background: #9cc8f6; }
.hero .pill.good { background: rgba(60, 207, 110, 0.2); color: #b6f2c9; }
.hero .fields dt { color: rgba(255, 255, 255, 0.65); }
.hero .fields dd { color: #fff; }
.hero .who .av { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ---------- Tabellen ---------- */
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); }
.t thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.t thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.t td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t td.num, .t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.t td.num, .t td.right { white-space: nowrap; }
.t tbody tr.click { cursor: pointer; transition: background 0.12s; }
.t tbody tr.click:hover { background: var(--surface-2); }
.t .group td { background: var(--surface-2); font-weight: 650; font-size: 12.5px; color: var(--ink-2); }
details .t th { background: transparent; }

/* ---------- Listen ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.list > li:first-child { border-top: 0; }
.list > li.click { cursor: pointer; transition: background 0.12s; }
.list > li.click:hover { background: var(--surface-2); }
.list > li > .icon:last-child { color: var(--ink-3); margin-top: 9px; }
.list .li-main { min-width: 0; flex: 1; }
.list .li-title { font-weight: 550; }
.list .li-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.li-main > .row { align-items: flex-start; }
.li-main > .row > .subtle { white-space: nowrap; flex: none; padding-top: 1px; }
.card > .list:last-child > li:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.q-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); flex: none; font-weight: 700; font-size: 13px; }
.q-icon.drafts, .q-icon.angebot, .q-icon.neu, .q-icon.auftrag { background: var(--accent-soft); color: var(--accent-text); }
.q-icon.triage, .q-icon.fehler { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--crit-text); }
.q-icon.budget { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); }
.q-icon.request { background: var(--customer-soft); color: var(--customer); }
.q-icon.bericht { background: var(--surface-3); color: var(--ink-2); }
.q-icon.done { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good-text); }
.q-icon .live { width: 9px; height: 9px; }
.wait-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.req-t { font-weight: 550; }

/* ---------- Projektzeilen ---------- */
.proj-row { display: grid; grid-template-columns: minmax(0, 1.35fr) 118px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 20px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); cursor: pointer; transition: background 0.12s; }
.proj-row:first-child { border-top: 0; }
.proj-row:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.proj-row:hover { background: var(--surface-2); }
.proj-row .pname { font-weight: 650; }
.proj-row .pcell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.proj-row .row.subtle { white-space: nowrap; }

/* ---------- Diagramme ---------- */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .ln { display: inline-block; width: 16px; height: 0; border-top: 2px solid; margin-right: 6px; vertical-align: 3px; }
.legend .ln.dash { border-top-style: dashed; }
.sbar { display: flex; gap: 2px; height: 12px; width: 100%; }
.sbar > span { display: block; height: 100%; min-width: 2px; }
.sbar > span:first-child { border-radius: 4px 0 0 4px; }
.sbar > span:last-child { border-radius: 0 4px 4px 0; }
.sbar > span:only-child { border-radius: 4px; }
.sbar.thick { height: 18px; }
.epic-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; }
.epic-row .ename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-wrap { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; max-height: 420px; }
.chart text { fill: var(--ink-3); font-size: 11px; font-family: var(--font); }
.chart .lbl { fill: var(--ink-2); font-size: 11.5px; font-weight: 500; }
.tip {
  position: absolute; pointer-events: none; z-index: 30;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 9px 12px; font-size: 12px; min-width: 150px; display: none;
}
.tip .tip-h { font-weight: 650; margin-bottom: 4px; }
.tip .tip-r { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tip .tip-r b { margin-left: auto; font-weight: 650; padding-left: 10px; }

/* ---------- Aufgaben ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.col { background: color-mix(in srgb, var(--surface-3) 65%, var(--bg)); border-radius: var(--radius); padding: 10px; min-height: calc(100vh - 330px); border: 1px solid transparent; min-width: 0; transition: background 0.15s, border-color 0.15s; }
.col.drop { border-color: var(--accent-bright); background: var(--accent-soft); }
.col-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; font-weight: 650; font-size: 13px; }
.col-h .subtle { margin-left: auto; background: var(--surface); border-radius: 999px; padding: 0 8px; font-weight: 600; }
.kcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px; margin-bottom: 10px;
  box-shadow: var(--shadow); cursor: pointer; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.kcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kcard.dragging { opacity: 0.5; }
.kcard .kt { font-weight: 550; margin: 6px 0 10px; line-height: 1.4; }
.kcard .kf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.kcard .kf > span { display: inline-flex; align-items: center; gap: 4px; }
.kcard .kh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kcard .warnbar { font-size: 11.5px; color: var(--warn-text); background: color-mix(in srgb, var(--warn) 15%, transparent); border-radius: 7px; padding: 4px 8px; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.prio { font-size: 11px; font-weight: 650; }
.prio.dringend { color: var(--crit-text); background: color-mix(in srgb, var(--crit) 11%, transparent); padding: 1px 7px; border-radius: 999px; }
.prio.hoch { color: var(--warn-text); }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--accent-bright) 30%, var(--border)); border-radius: var(--radius); background: var(--accent-soft); }

/* ---------- Aufgabe ---------- */
.prose p { margin: 0 0 10px; line-height: 1.6; }
.crit { list-style: none; margin: 0; padding: 0; }
.crit li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.crit li:first-child { border-top: 0; }
.cbox { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; margin-top: 1px; }
.cbox.on { background: var(--good-text); border-color: var(--good-text); color: #fff; }
.cbox .icon { width: 12px; height: 12px; stroke-width: 3; }
.evidence { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.fields { display: grid; grid-template-columns: 116px 1fr; gap: 10px 12px; font-size: 13px; align-items: baseline; margin: 0; }
.fields dt { color: var(--ink-3); }
.fields dd { margin: 0; min-width: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.timeline li:first-child { border-top: 0; }
.timeline.compact li { grid-template-columns: 24px minmax(0, 1fr); }

/* ---------- Fenster ---------- */
.overlay { position: fixed; inset: 0; background: rgba(8, 14, 26, 0.45); backdrop-filter: blur(3px); z-index: 100; display: grid; place-items: start center; padding-top: 9vh; animation: fade 0.15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(660px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop 0.18s ease-out; }
@keyframes pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } }
.modal.wide { width: min(840px, 94vw); }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-h h2 { font-size: 17px; }
.modal-b { padding: 20px; max-height: 64vh; overflow: auto; }
.modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.palette input { width: 100%; border: 0; outline: 0; background: transparent; padding: 18px 20px; font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--border); }
.palette .pl-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 8px; border-radius: 9px; cursor: pointer; }
.palette .pl-item.sel { background: var(--accent-soft); color: var(--accent-text); }
.palette .pl-group { font-size: 11px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 20px 4px; }
pre.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow: auto; white-space: pre-wrap; margin: 0; line-height: 1.55; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.form input, .form select, .form textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.form textarea { min-height: 88px; resize: vertical; }
.hint { font-size: 12.5px; color: var(--ink-2); background: var(--accent-soft); border-radius: 10px; padding: 11px 13px; display: flex; gap: 9px; align-items: flex-start; line-height: 1.5; }
.hint .icon { color: var(--accent-text); margin-top: 2px; }
.hint.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.hint.warn .icon { color: var(--warn-text); }

.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: grid; gap: 8px; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 13px; display: flex; gap: 9px; align-items: center; max-width: 440px; animation: tin 0.2s ease-out; }
.toast.warn { background: var(--warn); color: #1a1205; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Anmeldung ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-side { position: relative; overflow: hidden; background: var(--hero-bg); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side::before { content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 192, 245, 0.3), transparent 65%); }
.auth-side::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 64%; background: url("assets/login-hero.webp") 50% 55% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
.auth-side > * { position: relative; z-index: 1; }
.auth-side h1 { font-size: 36px; line-height: 1.15; max-width: 480px; color: #fff; }
.auth-side ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; max-width: 460px; }
.auth-side li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.auth-side li .icon { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
.auth-main { display: grid; place-items: center; padding: 32px; }
.auth-card { width: min(400px, 100%); }
.auth-card h1 { font-size: 28px; }
.auth-card .form input { padding: 11px 13px; }
.auth-card .btn { min-height: 42px; }
.otp { display: flex; gap: 8px; }
.otp input { width: 48px; height: 52px; text-align: center; font-size: 20px; font-family: var(--mono); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Portal ---------- */
.big { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.accept { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface); }
.accept:hover { border-color: var(--border-strong); }
.hero .big { color: #fff; }

/* ---------- Anfragen ---------- */
.pill.stage-kunde { background: var(--customer-soft); color: var(--customer); }
.pill.stage-intern { background: var(--accent-soft); color: var(--accent-text); }
.src { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rchip { font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.rchip.k { background: var(--surface-3); color: var(--ink-2); }

/* Leiste: Anzahl je Stufe */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 12px; margin-bottom: 20px; }
.pipe > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; position: relative; overflow: hidden; }
.pipe > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-bright); }
.pipe > div.k::before { background: var(--customer); }
.pipe > div.zero::before, .pipe > div.arch::before { background: var(--border-strong); }
.pipe .n { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.pipe .l { font-size: 12.5px; color: var(--ink-2); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pipe .w { font-size: 11.5px; color: var(--ink-3); }
.pipe .zero .n { color: var(--ink-3); font-weight: 500; }
.pipe .arch { background: var(--surface-2); }

/* Stufen einer Anfrage */
.stepper { display: flex; gap: 0; list-style: none; margin: 0 0 16px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: none; }
.stepper li { flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.stepper li::before { content: ""; position: absolute; top: 12px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; border-radius: 2px; background: var(--border); }
.stepper li:first-child::before { display: none; }
.stepper .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; background: var(--surface); position: relative; z-index: 1; }
.stepper .dot .icon { width: 13px; height: 13px; stroke-width: 3; }
.stepper li.done { color: var(--ink-2); }
.stepper li.done .dot { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; }
.stepper li.done::before, .stepper li.cur::before { background: var(--accent-bright); }
.stepper li.cur { color: var(--accent-text); font-weight: 650; }
.stepper li.cur .dot { border-color: var(--accent-bright); box-shadow: 0 0 0 5px var(--accent-soft-2); }
.stepper li.cur .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-bright); }
.wait-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 16px; font-size: 13px; color: var(--ink-2); }

/* Original-Mail */
.mailbox { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--customer); border-radius: 4px 10px 10px 4px; padding: 12px 14px; font-size: 13px; }
.mailbox .mh { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; display: grid; gap: 1px; }
.mailbox .mb { white-space: pre-wrap; line-height: 1.55; }
.mailbox .mb.clamp { max-height: 220px; overflow-y: auto; }

/* Ablaufdiagramm */
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.flow-side { display: none; }
.flow svg { display: block; width: 100%; height: auto; max-width: 820px; margin: 0 auto; }
.flow text { font-family: var(--font); font-size: 12px; fill: var(--ink); }
.flow .muted-t { fill: var(--ink-3); }
.flow .elabel { font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.flow .badge text { font-size: 10.5px; font-weight: 700; fill: var(--accent-fg); }
.flow g[data-tiprow] { cursor: help; }
.flow-text { margin: 0; padding-left: 20px; font-size: 13px; }
.flow-text li { margin: 4px 0; }
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.rule-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; }
.rule-list li:hover { background: var(--surface-2); }
.rule-list .nr-c { width: 22px; height: 22px; font-size: 11px; border-radius: 50%; }

/* Bildschirm-Entwürfe: bewusst als Skizze */
.wf-frame { border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); padding: 0 0 14px; position: relative; font-size: 12.5px; color: var(--ink-2); overflow: hidden; }
.wf-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1.5px dashed var(--border-strong); font-size: 11.5px; color: var(--ink-3); background: var(--surface-3); }
.wf-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); display: inline-block; }
.wf-stamp { position: absolute; top: 6px; right: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3); border: 1.5px solid var(--ink-3); border-radius: 4px; padding: 1px 6px; transform: rotate(4deg); opacity: 0.7; }
.wf-body { padding: 14px 14px 0; display: grid; gap: 10px; }
.wf-h { font-weight: 650; color: var(--ink); font-size: 14px; }
.wf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wf-box { border: 1.5px solid var(--border-strong); border-radius: 8px; background: var(--surface); padding: 8px 10px; position: relative; }
.wf-box b { display: block; color: var(--ink); font-size: 15px; }
.wf-group { font-weight: 650; color: var(--ink); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.wf-row { display: grid; grid-template-columns: 18px minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 8px; align-items: center; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); padding: 6px 8px; }
.wf-row .r { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.wf-cb { width: 14px; height: 14px; border: 1.5px solid var(--ink-3); border-radius: 3px; display: grid; place-items: center; }
.wf-cb.on::after { content: ""; width: 7px; height: 7px; background: var(--ink-3); border-radius: 1px; }
.wf-tag { font-size: 10.5px; border: 1px solid var(--ink-3); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; position: relative; }
.wf-btn { border: 1.5px solid var(--ink-3); border-radius: 7px; padding: 4px 10px; background: var(--surface); color: var(--ink); white-space: nowrap; }
.wf-btn.p { background: var(--ink-3); color: var(--surface); border-color: var(--ink-3); }
.wf-field { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; }
.wf-input { border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--surface); padding: 4px 8px; color: var(--ink); }
.wf-anno { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 700; flex: none; }
.wf-box > .wf-anno, .wf-actions > .wf-anno.abs { position: absolute; top: -9px; right: -7px; }
.wf-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.wf-notes li { display: flex; gap: 9px; align-items: flex-start; }
.wf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--gap); align-items: start; }

/* Schätzspanne */
.range { position: relative; height: 34px; margin: 6px 0 2px; }
.range .track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 999px; background: var(--accent-soft-2); }
.range .band { position: absolute; top: 13px; height: 8px; border-radius: 999px; background: var(--accent-bright); opacity: 0.5; }
.range .mk { position: absolute; top: 7px; width: 3px; height: 20px; border-radius: 2px; background: var(--accent-bright); margin-left: -1.5px; }
.range-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Angebot */
.agrid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.agrid > * { min-width: 0; margin-top: 0 !important; }
.offer-h { display: flex; align-items: center; gap: 10px; }
.offer-h .btn { margin-left: auto; }
.assume label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.assume label:first-child { border-top: 0; }
.assume input { margin-top: 3px; accent-color: var(--accent-bright); width: 16px; height: 16px; flex: none; }
details.orig summary { cursor: pointer; color: var(--accent-text); font-size: 13px; margin: 6px 0; }
.price-big { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks .icon { color: var(--good-text); margin-top: 2px; }

/* Nächster Schritt */
.next {
  display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; margin: 0 0 var(--gap); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent-bright) 28%, var(--border));
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-bright) 11%, var(--surface)) 0%, var(--surface) 75%);
  box-shadow: var(--shadow);
}
.next-i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex: none; box-shadow: 0 4px 12px rgba(10, 62, 118, 0.25); }
.next.busy .next-i { background: var(--surface); box-shadow: none; border: 1px solid var(--border); }
.next.wait { background: linear-gradient(110deg, color-mix(in srgb, var(--customer) 13%, var(--surface)) 0%, var(--surface) 75%); border-color: color-mix(in srgb, var(--customer) 32%, var(--border)); }
.next.wait .next-i { background: var(--customer); color: #fff; box-shadow: none; }
.next.done { background: linear-gradient(110deg, color-mix(in srgb, var(--good) 11%, var(--surface)) 0%, var(--surface) 75%); border-color: color-mix(in srgb, var(--good) 32%, var(--border)); }
.next.done .next-i { background: var(--good-text); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .next.wait .next-i, :root[data-theme="dark"] .next.done .next-i { color: #04101a; }
.next-t { font-weight: 650; font-size: 16px; font-family: var(--font-head); letter-spacing: -0.01em; }
.next-d { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; max-width: 980px; }
.next-d .pill { margin-left: 4px; }
.next-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Gespräche */
.inbox { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--gap); align-items: stretch; height: calc(100vh - 210px); min-height: 560px; }
.inbox > .card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.inbox-list .list { overflow-y: auto; flex: 1; }
.inbox-list .list > li.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-bright); }
.inbox-thread > .card-b { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.inbox-thread .thread { flex: 1; max-height: none; }
.inbox-thread > .card-h { border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.inbox-ctx { display: none; overflow-y: auto; }
.inbox-ctx .ctx-sec { padding: 16px 20px; border-top: 1px solid var(--border); }
.inbox-ctx .ctx-sec:first-child { border-top: 0; }
.inbox-ctx .ctx-h { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 10px; }
.inbox-ctx .person { display: flex; gap: 12px; align-items: center; }
.inbox-ctx .ctx-links { display: grid; gap: 6px; font-size: 13px; }
.inbox-ctx .ctx-links a { display: flex; gap: 8px; align-items: center; }
.inbox-ctx .list > li { padding: 10px 0; }
.thread { display: grid; gap: 14px; align-content: start; max-height: 560px; overflow-y: auto; padding: 16px 2px 8px; }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: min(88%, 860px); }
.msg.mine { flex-direction: row-reverse; margin-left: auto; }
.bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 10px 14px; min-width: 0; }
.msg.mine .bubble { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-bright) 22%, var(--border)); border-radius: 14px 4px 14px 14px; }
.msg.note .bubble { background: color-mix(in srgb, var(--warn) 11%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--warn) 55%, var(--border)); }
.bubble .mh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; margin-bottom: 4px; }
.bubble .mb { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.msg.sys { display: block; max-width: none; font-size: 12.5px; color: var(--ink-2); text-align: center; padding: 2px 24px; margin: 0; }
.msg.sys .icon { color: var(--good-text); vertical-align: -3px; margin-right: 5px; }
.thread-reqs { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px 0 0; border-top: 1px solid var(--border); margin-top: 8px; }
.composer { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color 0.15s, box-shadow 0.15s; }
.composer:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.composer textarea { font: inherit; color: var(--ink); background: transparent; border: 0; outline: 0; resize: vertical; min-height: 64px; padding: 2px; }
.composer.is-note { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-style: dashed; }
.composer .seg { justify-self: start; }
.composer .seg button { display: inline-flex; align-items: center; gap: 5px; }

/* Zeitplan */
.tl { display: grid; font-size: 13px; }
.tl-row { display: grid; grid-template-columns: minmax(0, clamp(240px, 21vw, 380px)) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--border); min-height: 50px; }
.tl.compact .tl-row { grid-template-columns: minmax(0, clamp(190px, 15vw, 290px)) minmax(0, 1fr); }
.tl-row.click { cursor: pointer; }
.tl-row.click:hover { background: var(--surface-2); }
.tl-head { border-top: 0; min-height: 60px; align-items: end; }
.tl-label { padding: 6px 16px 6px 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.tl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; font-weight: 500; }
.tl-row.grp .tl-name { font-weight: 650; }
.tl-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-state.angebot, .tl-state.abnahme { color: var(--customer); }
.tl-state.beauftragt { color: var(--good-text); }
.tl-track { position: relative; height: 100%; min-height: 50px; }
.tl-head .tl-track { min-height: 60px; }
.tl-month { position: absolute; bottom: 4px; font-size: 11.5px; font-weight: 550; color: var(--ink-3); padding-left: 8px; height: 18px; white-space: nowrap; overflow: hidden; }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--grid); pointer-events: none; }
.tl-head .tl-grid { top: auto; height: 22px; }
.tl-bar { position: absolute; top: 50%; height: 16px; margin-top: -8px; border-radius: 999px; background: var(--accent-bright); min-width: 8px; display: flex; align-items: center; overflow: hidden; cursor: default; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.tl-row.grp .tl-bar { height: 8px; margin-top: -4px; background: var(--accent-soft-2); box-shadow: none; }
.tl-row.grp .tl-bar.geplant { background: transparent; }
.tl-bar.clip { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-bar.abnahme { background: var(--customer); }
.tl-bar.geplant { background: transparent; border: 1.5px dashed var(--border-strong); box-shadow: none; }
.tl-bar.angebot { background: var(--customer-soft); border: 1.5px dashed var(--customer); box-shadow: none; }
.tl-bar.beauftragt { background: var(--good); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--crit); opacity: 0.6; pointer-events: none; z-index: 1; }
.tl-markline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ink-3); opacity: 0.5; pointer-events: none; }
.tl-today-l { position: absolute; top: 2px; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: #fff; background: var(--crit); padding: 0 6px; border-radius: 999px; line-height: 1.6; }
.tl-mark { position: absolute; top: 0; transform: translateX(-8px); display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.tl-mark + .tl-mark { top: 15px; }
.tl-mark b { font-weight: 650; }
.tl-legend { margin-bottom: 8px; }
.tl-sw { display: inline-block; width: 18px; height: 9px; border-radius: 999px; margin-right: 6px; vertical-align: 0; background: var(--accent-bright); }
.tl-sw.abnahme { background: var(--customer); }
.tl-sw.geplant { background: transparent; border: 1.5px dashed var(--border-strong); }
.tl-sw.angebot { background: var(--customer-soft); border: 1.5px dashed var(--customer); }
.tl-sw.beauftragt { background: var(--good); }
.tl-sw.today { width: 0; height: 12px; border-radius: 0; border-left: 2px solid var(--crit); background: none; vertical-align: -2px; }

/* Termine */
.ev-list > li { align-items: center; }
.ev-date { display: grid; place-items: center; width: 48px; flex: none; border-radius: 11px; padding: 4px 0 5px; line-height: 1.15; background: var(--surface-2); border: 1px solid var(--border); }
.ev-date b { font-size: 13.5px; }
.ev-date span { font-size: 10.5px; font-weight: 650; color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.04em; }
.ev-list .li-meta .icon { vertical-align: -2px; }
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.week li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; align-items: center; }

/* Budget */
.split-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 170px; }
.budget-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink); }

/* Erklärung aufklappen */
details.explain { border-top: 1px solid var(--border); padding: 12px 20px 14px; font-size: 13px; }
details.explain summary { cursor: pointer; color: var(--accent-text); font-weight: 550; }
details.explain p { color: var(--ink-2); }

/* Schalter */
.switch { display: flex !important; grid-template-columns: none; gap: 12px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-ui { width: 36px; height: 21px; border-radius: 999px; background: var(--border-strong); position: relative; flex: none; transition: background 0.15s; margin-top: 1px; }
.sw-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.switch input:checked + .sw-ui { background: var(--accent-bright); }
.switch input:checked + .sw-ui::after { transform: translateX(15px); }
.switch input:focus-visible + .sw-ui { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.switch .sw-l { display: block; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.switch .subtle { display: block; }

.m-only { display: none !important; }

/* ---------- Breite Bildschirme ---------- */
@media (min-width: 1500px) {
  .next { align-items: center; }
  .next > .li-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
  .next > .li-main > .next-b { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 1600px) {
  .cols.even { align-items: stretch; }
  .cols.wide1 > :first-child { grid-column: span 2; }
}
@media (min-width: 1500px) {
  .agrid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .agrid > .span-2 { grid-column: 1 / -1; }
  .flow-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
  .flow-side { display: block; }
  .inbox.ctx { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 300px); }
  .inbox.ctx .inbox-ctx { display: flex; flex-direction: column; }
  .inbox.ctx .inbox-thread .thread-reqs, .inbox.ctx .composer [data-act="thread-to-request"] { display: none; }
}
@media (min-width: 1900px) {
  :root { --pad: 40px; --gap: 24px; }
  .inbox.ctx { grid-template-columns: minmax(0, 400px) minmax(0, 1fr) minmax(0, 340px); }
}

/* ---------- Mittlere Bildschirme ---------- */
@media (max-width: 1599px) {
  .cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .cols > :first-child { grid-row: 1 / span 2; }
  .cols > :nth-child(3) { grid-column: 2; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1280px) {
  .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .htile { padding: 14px; }
  .htile .hv { font-size: 26px; }
}
@media (max-width: 900px) {
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .g-detail, .g-2, .g-3, .wf-grid { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .cols > * { grid-row: auto !important; grid-column: auto !important; }
  .proj-row { grid-template-columns: minmax(0, 1fr) 110px 120px; }
  .proj-row .hide-m { display: none; }
  .inbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .inbox > .card { max-height: none; }
  .inbox-list .list { max-height: 340px; }
  .m-only { display: inline-flex !important; }
  .tl-row, .tl.compact .tl-row { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 760px) {
  :root { --pad: 14px; --gap: 14px; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; overflow-x: auto; padding: 10px; gap: 4px; align-items: center; }
  .sidebar .nav-label, .sidebar .nav-sub, .sidebar-foot, .brand-sub, .nav-item small, .nav-item .nav-dot { display: none; }
  .brand { padding: 0 8px 0 4px; }
  .brand-name { display: none; }
  .nav-item { width: auto; white-space: nowrap; flex: none; }
  .nav-item.active::before { display: none; }
  .side-cta { margin: 0; flex: none; }
  .search-btn { min-width: 0; flex: none; }
  .search-btn span, .search-btn .kbd, .topbar .kbd, .topbar > .subtle, .demo-chip span { display: none; }
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; }
  .topbar .spacer { display: none; }
  .content { padding: 16px 12px 40px; }
  h1 { font-size: 22px; }
  .hero { padding: 20px; }
  .hero h1 { font-size: 24px; }
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .htile { padding: 12px; }
  .htile .hv { font-size: 22px; }
  .page-h { flex-wrap: wrap; align-items: flex-start; }
  .page-h .actions { margin-left: 0; justify-content: flex-start; }
  .tabs { width: 100%; }
  .epic-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 4px 10px; }
  .epic-row > .sbar, .epic-row > div { grid-column: 1 / -1; grid-row: 2; }
  .card-b.flush { overflow-x: auto; }
  .card-h { flex-wrap: wrap; }
  .card-h .seg { margin-left: 0 !important; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile .value { font-size: 22px; }
  .fields { grid-template-columns: 96px 1fr; }
  .auth-wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-main { padding: 24px 20px; }
  .auth-card .btn { white-space: normal; text-align: center; }
  .auth-side { display: none; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-tiles { grid-template-columns: 1fr; }
  .wf-row { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .wf-row > .hide-m { display: none; }
  .wf-field { grid-template-columns: 1fr; gap: 4px; }
  .stepper li { min-width: 78px; }
  .wait-line .spacer { display: none; }
  .hide-s, .demo-l { display: none; }
  .tl-row, .tl.compact .tl-row { grid-template-columns: minmax(0, 1fr); }
  .tl-label { padding: 8px 0 0; }
  .tl-head .tl-label { display: none; }
  .tl-track { min-height: 28px; }
  .msg { max-width: 100%; }
  .week li { grid-template-columns: 70px minmax(0, 1fr); }
  .week li .pill { display: none; }
  .split-row { grid-template-columns: minmax(0, 1fr) auto !important; }
  .board { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
  .board.flow { grid-template-columns: repeat(7, minmax(220px, 1fr)); }
  .col { min-height: 320px; }
  .topbar .btn.primary .bl { display: none; }
  .topbar .btn.icon-only { width: 34px; min-height: 34px; }
  .topbar .btn.primary { padding: 0 11px; min-height: 34px; }
  .topbar .seg button { padding: 5px 8px; }
  .search-btn { height: 34px; padding: 0 9px; }
}

/* ---------- Bilder: Logo, Anmeldung, Begrüßung, leere Zustände (erzeugt mit dem OpenAI-Bildmodell, lokal abgelegt) ---------- */
img.brand-mark { display: block; flex: none; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 14px rgba(0, 0, 0, 0.28); }
.auth-wordmark { display: block; height: 38px; width: auto; }
.auth-side h1, .auth-side li { text-shadow: 0 1px 12px rgba(4, 20, 44, 0.45); }
.auth-side h1 { max-width: 400px; }
@media (max-width: 1500px) { .auth-side::after { width: 100%; opacity: 0.4; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 75%); mask-image: linear-gradient(90deg, transparent 10%, #000 75%); } }
.auth-logo { display: none; margin-bottom: 28px; }
.auth-logo img { height: 34px; width: auto; }
.auth-logo .wm-dark { display: none; }
@media (max-width: 760px) { .auth-logo { display: block; } }
:root[data-theme="dark"] .auth-logo .wm-light { display: none; }
:root[data-theme="dark"] .auth-logo .wm-dark { display: inline; }
.hero { background: linear-gradient(90deg, rgba(8, 42, 82, 0.1) 0%, rgba(8, 42, 82, 0) 50%, rgba(8, 42, 82, 0.4) 100%), url("assets/hero-band.webp") right center / cover no-repeat, var(--hero-bg); }
:root[data-theme="dark"] .hero { background: linear-gradient(90deg, rgba(6, 12, 24, 0.35) 0%, rgba(6, 12, 24, 0.2) 50%, rgba(6, 12, 24, 0.5) 100%), url("assets/hero-band.webp") right center / cover no-repeat, var(--hero-bg); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 16px 22px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.empty img { width: 112px; height: 112px; object-fit: contain; margin-bottom: 6px; }
.empty b { color: var(--ink); font-size: 14px; font-weight: 600; }
.empty span { max-width: 38ch; }
.list > li.empty-li { display: block; padding: 0; }

/* ---------- Board vom Wunsch bis zur Abnahme ---------- */
.board.flow { grid-template-columns: repeat(7, minmax(200px, 1fr)); gap: 10px; }
.board.flow .col { padding: 10px 8px; min-height: calc(100vh - 380px); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent-bright) 45%, transparent); }
.board.flow .col.k { box-shadow: inset 0 3px 0 var(--customer); background: color-mix(in srgb, var(--customer-soft) 45%, color-mix(in srgb, var(--surface-3) 65%, var(--bg))); }
.board.flow .col[data-status="erledigt"] { box-shadow: inset 0 3px 0 var(--good); }
.board.flow .col-h { padding: 6px 6px 2px; font-size: 13.5px; }
.col-h .cnt { margin-left: auto; background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.col-sub { display: flex; align-items: center; gap: 5px; padding: 0 6px 10px; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.col.k .col-sub { color: var(--customer); }
.col-empty { padding: 18px 6px; text-align: center; font-size: 12px; color: var(--ink-3); }
.kstate { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; line-height: 1.5; margin-bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--accent-soft); color: var(--accent-text); }
.kstate.kunde { background: var(--customer-soft); color: var(--customer); }
.kstate.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-2); }
.kstate.good { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good-text); }
.kcard .warnbar.k { color: var(--customer); background: var(--customer-soft); }
.kcard.k { border-color: color-mix(in srgb, var(--customer) 28%, var(--border)); }
.kcard.later { opacity: 0.72; }
.kcard .kh .nr { margin: 0; }
.kcost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; }
.kcost dt { color: var(--ink-3); }
.kcost dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kcost .kc-h { grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 650; }
.ksub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: -4px 0 10px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.kprog { height: 4px; margin: 0 0 10px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.kprog > span { display: block; height: 100%; border-radius: 2px; background: var(--accent-bright); }
.kcard .kbtn { margin: 0 0 10px; }
.kcard .kf .src { font-size: 12px; }
.board-bar { margin-bottom: 14px; gap: 10px; }
.bstat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); }
.bstat.k { color: var(--customer); background: var(--customer-soft); border-color: transparent; }

/* Projektkopf: Lage auf einen Blick, Reiter nur auf dem Handy */
.proj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); }
.pchip.k { color: var(--customer); background: var(--customer-soft); border-color: transparent; }
.crumbs a { color: inherit; }

/* Seitenleiste im Projekt */
.side-back { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; color: var(--side-muted); text-decoration: none; }
.side-back:hover { color: #fff; background: var(--side-hover); text-decoration: none; }
.side-back .icon { transform: rotate(180deg); }
.side-proj { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px 14px; border-bottom: 1px solid var(--side-line); }
.side-proj .sp-t { flex: 1; min-width: 0; }
.side-proj b { display: block; font-size: 14.5px; color: #fff; }
.side-proj small { display: block; font-size: 12px; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-person { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 12.5px; color: var(--side-ink); }
.side-person b { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.side-person small { font-size: 11.5px; color: var(--side-muted); }
.side-person .av, .side-person .av.customer { background: rgba(255, 255, 255, 0.16); color: #fff; border: 0; }

/* Angebot: Drittkosten und laufende Kosten */
.morecost { display: grid; gap: 8px; margin-top: 14px; }
.morecost > div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.morecost span { display: block; font-size: 12px; color: var(--ink-3); }
.morecost b { font-size: 14px; }
.morecost small { display: block; margin-top: 2px; color: var(--ink-2); }

/* Überblick: Stand über alle Tickets */
.flowpipe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.flowpipe a { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); text-decoration: none; overflow: hidden; }
.flowpipe a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-bright); }
.flowpipe a.k::before { background: var(--customer); }
.flowpipe a.zero::before { background: var(--border-strong); }
.flowpipe a:hover { border-color: var(--border-strong); text-decoration: none; }
.flowpipe .n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.flowpipe .zero .n { font-weight: 500; color: var(--ink-3); }
.flowpipe .l { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flowpipe .w { font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 1300px) { .flowpipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .flowpipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar .side-proj, .sidebar .side-person { display: none; }
  .side-back { flex: none; margin: 0; padding: 6px 8px; }
  .side-back span { display: none; }
  .proj-chips { display: none; }
}
.card-h h2 .h-note { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
@media (max-width: 760px) {
  .tile .label.row { flex-wrap: wrap; }
  .tile .label .pill { display: none; }
  .card-b.flush { overflow-x: auto; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { flex: none; }
}

/* ---------- Aufgeräumt (1.5): weniger doppelte Angaben, Kundensicht in vier Schritten ---------- */
.only-s { display: none; }
@media (max-width: 760px) { .only-s { display: inline-flex; } }
.foot-acts { display: flex; gap: 2px; margin-left: auto; }
.sidebar-foot .btn.icon-only { width: 30px; min-height: 30px; color: var(--side-muted); background: transparent; border: 0; }
.sidebar-foot .btn.icon-only:hover { color: #fff; background: var(--side-hover); }
.seg-n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; background: var(--customer-soft); color: var(--customer); }
.hero-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .hero-tiles.three { grid-template-columns: 1fr 1fr; } }
.two-lists { align-items: start; }
@media (max-width: 1100px) { .two-lists { grid-template-columns: 1fr; } }
details.more summary { cursor: pointer; margin-top: 8px; font-size: 12.5px; color: var(--accent-text); }

/* Kundensicht: Entscheidungen */
.decisions { display: flex; flex-direction: column; gap: 8px; }
.dec { display: block; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.dec:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.dec > summary { list-style: none; cursor: pointer; }
.dec > summary::-webkit-details-marker { display: none; }
.dec > summary, a.dec { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.dec[open] { border-color: color-mix(in srgb, var(--accent-bright) 40%, var(--border)); box-shadow: var(--shadow); }
.dec[open] > summary .dec-a .btn { visibility: hidden; }
.dec-i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.dec-i.k { background: var(--customer-soft); color: var(--customer); }
.dec-t { flex: 1; min-width: 0; }
.dec-t b { display: block; font-size: 14px; font-weight: 600; }
.dec-t small { display: block; font-size: 12.5px; color: var(--ink-2); }
.dec-a { flex: none; }
.dec-b { padding: 4px 14px 14px 60px; }
@media (max-width: 760px) { .dec-b { padding-left: 14px; } .dec-a { display: none; } }

/* Kundensicht: vier Schritte je Anfrage */
.csteps { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.csteps span { width: 18px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.csteps span.done { background: var(--accent-bright); }
.csteps span.cur { background: var(--accent-bright); box-shadow: 0 0 0 2px var(--accent-soft-2); }
.csteps.you span.cur { background: var(--customer); box-shadow: 0 0 0 2px var(--customer-soft); }
.csteps b { margin-left: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csteps.you b { color: var(--customer); }

/* Kundensicht: Angebot auf einen Blick */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.glance > div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.glance span { display: block; font-size: 12px; color: var(--ink-3); }
.glance b { display: block; margin: 2px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.glance small { display: block; font-size: 12px; color: var(--ink-2); }
@media (max-width: 1300px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Schriftzug, solange das Logo offen ist */
.wordmark { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark > span { font-weight: 500; opacity: 0.72; }
.brand { padding-left: 12px; }
.brand-name .wordmark { font-size: 18px; }
.auth-brand .wordmark { font-size: 22px; color: #fff; }
.auth-logo .wordmark { font-size: 24px; color: var(--ink); }

/* ---------- Board 2: Phasen, ruhige Karten, Erledigt eingeklappt ---------- */
.board-wrap { position: relative; overflow-x: auto; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 10px; scroll-padding: 0 var(--pad); }
.board-wrap.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.board.flow2 { display: grid; grid-template-columns: repeat(6, minmax(236px, 1fr)) 64px; grid-template-rows: auto 1fr; gap: 0 10px; min-width: min-content; }
.board.flow2.show-done { grid-template-columns: repeat(7, minmax(236px, 1fr)); }
.board.flow2 .phase { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.board.flow2 .phase::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--border); }
.board.flow2 .phase.p1::after { background: color-mix(in srgb, var(--customer) 45%, var(--border)); }
.board.flow2 .phase.p2::after { background: color-mix(in srgb, var(--accent-bright) 50%, var(--border)); }
.board.flow2 .phase.p3::after { background: color-mix(in srgb, var(--good) 45%, var(--border)); }
.board.flow2 .col { min-width: 0; min-height: 220px; padding: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; display: flex; flex-direction: column; }
:root[data-theme="dark"] .board.flow2 .col { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.board.flow2 .col.drop { border-color: var(--accent-bright); background: var(--accent-soft); }
.board.flow2 .col-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; margin: 0; font-size: 13px; font-weight: 650; }
.board.flow2 .col-t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board.flow2 .col.k .col-t .icon { color: var(--customer); }
.board.flow2 .col-h .cnt { margin-left: auto; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-3); }
.board.flow2 .col.k .col-h .cnt { color: var(--customer); background: var(--customer-soft); }
.board.flow2 .col-x { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; }
.board.flow2 .col-x:hover { background: var(--surface-3); color: var(--ink); }
.board.flow2 .col-b { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.board.flow2 .col-empty { padding: 14px 0; text-align: center; color: var(--ink-3); font-size: 12px; }
.board.flow2 .col.rail { align-items: stretch; }
.rail-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; border: 0; border-radius: 14px; background: transparent; color: var(--good-text); cursor: pointer; font: inherit; }
.rail-btn:hover { background: color-mix(in srgb, var(--good) 8%, transparent); }
.rail-btn b { font-size: 13px; }
.rail-btn span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); }

.kc { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; }
.kc:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kc.dragging { opacity: 0.5; }
.kc.later, .kc.done { background: transparent; box-shadow: none; }
.kc.later .kc-title, .kc.done .kc-title { font-weight: 500; color: var(--ink-2); }
.kc-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--ink-3); }
.kc-kind { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kc-kind.bug { color: var(--crit-text); }
.kc-ref { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-3); background: var(--surface-3); padding: 0 6px; border-radius: 5px; }
.kc-prio { font-size: 11px; font-weight: 700; color: var(--crit-text); }
.kc-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kc-line { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.kc-line .icon { flex: none; }
.kc-line.k { color: var(--customer); }
.kc-line.a { color: var(--accent-text); }
.kc-line.g { color: var(--good-text); }
.kc-line.mute { color: var(--ink-3); }
.kc-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.kc-cost-s { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kc-cost { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; background: var(--customer-soft); }
.kc-cost b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kc-cost span { font-size: 12px; color: var(--ink-2); }
.kc-cost small { font-size: 11.5px; color: var(--ink-2); }
.kc-prog { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.kc-prog > span { display: block; height: 100%; border-radius: 2px; background: var(--accent-bright); }
.kc-btn { align-self: flex-start; }
.kc-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.kc-foot .av { width: 22px; height: 22px; font-size: 9.5px; }
.kc-none { font-style: italic; }
.kc-due, .kc-since { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 760px) {
  .board-wrap { margin: 0 -12px; padding: 0 12px 10px; }
  .board.flow2 { grid-template-columns: repeat(6, 78vw) 56px; }
  .board.flow2.show-done { grid-template-columns: repeat(7, 78vw); }
}

/* Dokumente einer Anfrage */
.doc-grp { padding: 12px 20px 4px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.doc-grp + .list > li:first-child { border-top: 0; }
.tab-n { margin-left: 6px; min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; background: var(--surface-3); color: var(--ink-2); }

/* ---------- Startseite: was heute wichtig ist ---------- */
.hero.slim { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 24px 28px; }
.hero.slim .hero-sub { max-width: 640px; }
.hero.slim .hero-actions { margin-top: 0; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .today-grid { grid-template-columns: 1fr; } .hero.slim { grid-template-columns: 1fr; } .hero.slim .hero-actions { margin-top: 12px; } }
.trow { align-items: center !important; }
.trow .li-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trow .btn { flex: none; }
.pchip-s { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pav.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 8px; }
.q-icon.wait { background: var(--customer-soft); color: var(--customer); }
.today-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--ink-2); text-decoration: none; }
.today-foot:hover { color: var(--accent-text); text-decoration: none; }
.pcards { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.pcard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.pcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.pc-h { display: flex; align-items: center; gap: 10px; }
.pc-t { flex: 1; min-width: 0; }
.pc-t b { display: block; font-size: 14px; }
.pc-t small { display: block; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-m { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
.pc-w { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pc-w span { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pc-w span.k { background: var(--customer-soft); color: var(--customer); }

/* Anmeldung: drei Schritte statt Werbe-Aufzählung */
.auth-side h1.auth-claim { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; max-width: 440px; }
.auth-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 10px; max-width: 400px; }
.auth-steps li { display: grid; grid-template-columns: 30px 92px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.auth-steps span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: 12.5px; font-weight: 700; }
.auth-steps b { font-size: 15px; font-weight: 600; }
.auth-steps em { font-style: normal; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); }
.auth-foot { font-size: 12px; opacity: 0.7; }

/* Anmeldung: Ablauf als schlanke Zeitleiste */
.auth-flow { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; max-width: 380px; position: relative; }
.auth-flow li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: -20px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.auth-flow li { position: relative; display: block; padding-left: 30px; }
.auth-flow li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #0a3e76; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.auth-flow li:last-child::before { background: #fff; }
.auth-flow b { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.auth-flow span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.auth-foot { display: flex; gap: 16px; font-size: 12px; opacity: 0.75; }
.auth-foot a { color: inherit; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* Zeichen DigiManagement (Entwurf P2 als Vektor) */
span.brand-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); }
span.brand-mark img { display: block; height: 22px; width: auto; }
.brand { gap: 10px; padding-left: 10px; }
.auth-brand { gap: 12px; align-items: center; }
.auth-mark { display: block; height: 34px; width: auto; }
.auth-logo { align-items: center; gap: 12px; }
@media (max-width: 760px) { .auth-logo { display: flex; } }

/* ---------- Zeitleiste 2: Monatsspalten, Fortschritt in den Balken, Meilenstein-Rauten ---------- */
.tl.v2 .tl-row { min-height: 54px; transition: background 0.12s; }
.tl.v2 .tl-row.click:hover { background: var(--accent-soft); }
.tl.v2 .tl-row.grp { background: var(--surface-2); }
.tl.v2 .tl-head { min-height: 74px; border-bottom: 1px solid var(--border-strong); }
.tl.v2 .tl-head .tl-track { min-height: 74px; }
.tl-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--surface-3) 55%, transparent); pointer-events: none; }
.tl.v2 .tl-month { bottom: 8px; padding-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.tl.v2 .tl-grid { border-left-color: var(--border); }
.tl.v2 .tl-today { border-left: 2px solid var(--crit); opacity: 0.55; z-index: 2; }
.tl.v2 .tl-today-l { top: 4px; z-index: 3; font-size: 11px; padding: 1px 8px; box-shadow: 0 2px 6px rgba(208, 59, 59, 0.3); }
.tl.v2 .tl-markline { border-left: 1.5px dashed color-mix(in srgb, var(--accent-bright) 55%, transparent); opacity: 1; }
.tl.v2 .tl-mark { top: 4px; transform: translateX(-6px); gap: 6px; padding: 1px 8px 1px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; color: var(--ink); z-index: 3; }
.tl.v2 .tl-mark.alt { top: 28px; }
.tl.v2 .tl-mark + .tl-mark:not(.alt) { top: 4px; }
.tl.v2 .tl-mark i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--accent-bright); transform: rotate(45deg); }
.tl.v2 .tl-mark em { font-style: normal; color: var(--ink-3); }
.tl.v2 .tl-bar { height: 24px; margin-top: -12px; border-radius: 7px; border: 0; box-shadow: none; background: color-mix(in srgb, var(--accent-bright) 22%, transparent); z-index: 1; cursor: pointer; }
.tl.v2 .tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--accent-bright); }
.tl.v2 .tl-in { position: relative; z-index: 1; padding: 0 9px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
.tl.v2 .tl-bar.abnahme { background: color-mix(in srgb, var(--customer) 26%, transparent); }
.tl.v2 .tl-bar.abnahme .tl-fill { background: var(--customer); }
.tl.v2 .tl-bar.geplant { background: repeating-linear-gradient(-45deg, var(--surface-3) 0 5px, var(--surface) 5px 10px); border: 1px solid var(--border-strong); }
.tl.v2 .tl-bar.angebot { background: repeating-linear-gradient(-45deg, var(--customer-soft) 0 5px, transparent 5px 10px); border: 1.5px dashed var(--customer); }
.tl.v2 .tl-bar.beauftragt { background: var(--good); }
.tl.v2 .tl-row.grp .tl-bar { height: 10px; margin-top: -5px; border-radius: 3px; background: var(--surface-3); }
.tl.v2 .tl-row.grp .tl-bar .tl-fill { background: var(--accent); }
.tl.v2 .tl-row.grp .tl-bar.geplant { background: repeating-linear-gradient(-45deg, var(--surface-3) 0 4px, transparent 4px 8px); border: 1px solid var(--border-strong); }
.tl-end { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; pointer-events: none; z-index: 1; }
.tl.v2 .tl-state { display: inline-flex; align-items: center; gap: 6px; }
.tl-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent-bright); }
.tl-dot.abnahme, .tl-dot.angebot { background: var(--customer); }
.tl-dot.geplant { background: transparent; border: 1.5px solid var(--ink-3); }
.tl-dot.beauftragt { background: var(--good); }
.tl-sw { height: 10px; border-radius: 4px; }
.tl-sw.geplant { background: repeating-linear-gradient(-45deg, var(--surface-3) 0 3px, var(--surface) 3px 6px); border: 1px solid var(--border-strong); }
.tl-sw.angebot { background: repeating-linear-gradient(-45deg, var(--customer-soft) 0 3px, transparent 3px 6px); border: 1.5px dashed var(--customer); }
.tl-sw.mark { width: 9px; height: 9px; border-radius: 2px; background: var(--accent-bright); transform: rotate(45deg); }
@media (max-width: 760px) { .tl-end { display: none; } .tl.v2 .tl-mark em { display: none; } }
.tl-legend .tl-sw.today { width: 2px; height: 12px; border: 0; border-radius: 1px; background: var(--crit); vertical-align: -2px; }
.tl-end { background: var(--surface); padding: 0 5px; border-radius: 4px; }
.tl.v2 .tl-row.grp .tl-end { background: var(--surface-2); }

/* ---------- Zugänge sicher teilen ---------- */
.card.vault .card-h h2 { display: inline-flex; align-items: center; gap: 8px; }
.vrow { align-items: flex-start !important; }
.vrow .li-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vfields { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.vfields dt { color: var(--ink-3); }
.vfields dd { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.vmask { letter-spacing: 0.2em; color: var(--ink-2); }
.vmask.gone { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; color: var(--ink-3); font-style: italic; }
.vval { font-family: var(--mono); font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--warn-soft, rgba(250, 178, 25, 0.16)); color: var(--ink); }
.vlink { font-family: var(--mono); font-size: 12.5px; color: var(--accent-text); word-break: break-all; }
.vlog { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.vnote { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.vact { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.label-s { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
label.chk { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13.5px; margin-bottom: 4px; }
@media (max-width: 760px) { .vrow { flex-wrap: wrap; } .vact { flex-direction: row; flex-wrap: wrap; } .vfields { grid-template-columns: 1fr; } }

/* Kundensicht: Projektstand als Board */
.board.cust4 { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 10px; }
.board.cust4 .col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 0; min-height: 260px; }
.board.cust4 .col.k { background: color-mix(in srgb, var(--customer-soft) 45%, var(--surface-2)); }
.board.cust4 .col-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; font-size: 13px; font-weight: 650; }
.board.cust4 .col-t { display: inline-flex; align-items: center; gap: 6px; }
.board.cust4 .col.k .col-t .icon { color: var(--customer); }
.board.cust4 .cnt { margin-left: auto; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--surface-3); }
.board.cust4 .col.k .cnt { color: var(--customer); background: var(--customer-soft); }
.board.cust4 .col-b { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.board.cust4 .col-empty { padding: 14px 0; text-align: center; color: var(--ink-3); font-size: 12px; }
.kc.cust.you { border-color: color-mix(in srgb, var(--customer) 35%, var(--border)); }
.kc-ref .icon { vertical-align: -2px; }
.dec.flat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.vgroup { display: flex; flex-direction: column; gap: 8px; }
.vgroup-h { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.vgroup-h:hover { color: var(--accent-text); }
@media (max-width: 760px) { .board.cust4 { grid-template-columns: repeat(4, 80vw); } }

/* ---------- Geräteprüfung: Handy, Tablet, Touch ---------- */
.next .li-main { min-width: 0; }
.next-d .pill { white-space: normal; }
@media (max-width: 760px) {
  .next { gap: 12px; padding: 14px; }
  .next-i { width: 34px; height: 34px; border-radius: 10px; }
  .next-t { overflow-wrap: anywhere; font-size: 15px; }
  .next-b { flex-wrap: wrap; }
  .tile .label { white-space: normal; }
  .vact { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .vact .btn { flex: 1 1 auto; justify-content: center; }
  .page-h h1 { overflow-wrap: anywhere; }
}
/* Eingabefelder ab 16 px, damit iOS beim Tippen nicht hineinzoomt */
@media (max-width: 820px), (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
}
/* Touch-Geräte: Tippflächen mindestens 40 bis 44 px */
@media (pointer: coarse) {
  .btn { min-height: 42px; }
  .btn.sm { min-height: 38px; padding-left: 12px; padding-right: 12px; }
  .btn.icon-only, .topbar .btn.icon-only { min-width: 42px; min-height: 42px; }
  .search-btn { min-height: 42px; }
  .seg button { min-height: 38px; }
  .tabs a, .tabs button { min-height: 42px; }
  .nav-item { min-height: 44px; }
  .side-back { min-height: 40px; }
  .crumbs a { display: inline-block; padding: 8px 0; }
  details > summary { min-height: 40px; display: flex; align-items: center; }
  .sidebar-foot .btn.icon-only { width: 40px; min-height: 40px; }
  .kc, .pcard, .list > li.click { min-height: 44px; }
  .col-x { width: 36px; height: 36px; }
  .topbar .btn.primary { min-height: 42px; }
  .card-h a { display: inline-block; padding: 10px 0; }
}
.tile-top .label { min-width: 0; }
details.explain > div { overflow-x: auto; }
@media (max-width: 420px) { .g-4 { grid-template-columns: 1fr; } }

/* Kopfzeile und Seitenleiste für Handy quer, Tablet und kleine Laptops */
@media (min-width: 761px) { .sidebar { height: 100vh; height: 100dvh; } }
.app { min-height: 100vh; min-height: 100dvh; }
.search-btn { min-width: 0; }
.topbar-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1360px) { .demo-l { display: none; } }
@media (max-width: 1180px) { .demo-chip span { display: none; } .demo-chip { padding: 6px 8px; } .topbar-title .subtle { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .app { grid-template-columns: 224px minmax(0, 1fr); }
  .brand-sub { display: none; }
  .topbar .btn.primary .bl { display: none; }
  .topbar .btn.primary { padding: 0 12px; }
}
.card-b.flush { overflow-x: auto; }
@media (max-width: 1100px) { .hide-s { display: none; } }
/* Große Monitore: alles gleichmäßig etwas größer, damit Zeilen nicht zu lang und Schrift nicht zu klein wird */
@media (min-width: 2200px) { html { zoom: 1.15; } }
@media (min-width: 3000px) { html { zoom: 1.35; } }
/* Dialoge passen immer in den Bildschirm, nur der Inhalt scrollt */
.overlay { padding: min(9vh, 64px) 12px 12px; }
.modal { display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - min(9vh, 64px) - 12px); }
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal-b { max-height: none; min-height: 0; flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
.modal-h, .modal-f { flex: none; }
@media (max-height: 500px) { .overlay { padding-top: 8px; } .modal { max-height: calc(100dvh - 16px); } .modal-h { padding: 10px 16px; } .modal-f { padding: 10px 16px; } }
@media (max-width: 760px) {
  .topbar-title { flex: 0 0 auto; max-width: 30px; font-size: 0; gap: 0; }
  .topbar-title .pav { font-size: 10.5px; }
  .dec.flat { flex-wrap: wrap; }
  .dec.flat .dec-a { display: block; width: 100%; padding-left: 46px; }
  .dec.flat .dec-a .btn { width: 100%; justify-content: center; }
}
/* Sehr kleine Handys (unter 370 px): Kopfzeile in einer Zeile halten */
@media (max-width: 369px) {
  .topbar { padding: 6px 8px; gap: 4px; }
  .topbar .demo-chip, .topbar [data-act="theme"] { display: none !important; }
  .topbar .seg button { padding: 5px 7px; }
}