/* ---------- Version 2: ruhige Optik (IBM Plex), Seitenleiste mit Bereichen, Einstellungen oben rechts, Dunkelmodus ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(/fonts/plex-sans.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/plex-mono-500.woff2) format('woff2'); }

:root {
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: #fbfbfa; --panel: #ffffff; --side: #f6f6f4; --soft: #f3f4f3; --hover: rgba(30, 40, 45, .05);
  --text: #23292d; --muted: #737c82; --faint: #a1a8ad; --line: #e7e8e6; --line2: #d9dcdb;
  --blue: #0091a7; --blue-dark: #00788a; --blue-soft: #e8f3f5;
  --green: #76b728; --green-dark: #5b8f1f;
  --red: #c4554d; --red-soft: #f8e9e7; --orange: #c4843a; --orange-soft: #f8efe3;
  --ok-bg: #e6efdf; --ok-fg: #4c6e34; --mid-bg: #f6e7d1; --mid-fg: #87591f; --hi-bg: #f2dcd8; --hi-fg: #8d3c33;
  --bar-wohn: #b9dbe1; --bar-gew: #cfe2b6; --bar-best: #d9d2e3; --bar-sonst: #dfe2e3; --bar-edge: rgba(0, 0, 0, .14);
  --grid: #f0f1ef; --grid-y: #dedfdc; --today: #c4554d;
  --shadow: 0 1px 2px rgba(20, 30, 35, .05), 0 4px 16px rgba(20, 30, 35, .05);
  --radius: 8px;
  --xs-head: #0391a5; --xs-head-fg: #ffffff; --xs-run: #eff1f1; --xs-bau: #dde3e4; --xs-g1: #e3ebd2; --xs-g2: #f0f4e7; --xs-ek: #f7c948; --xs-ek-fg: #3b2f05; --xs-zero: #f6e4e2; --xs-na: #e9ebeb; --xs-cell: #ffffff; --xs-edge: #e1e4e4;
  --st-res: #fbe9d6; --st-res-fg: #8a5a1c; --st-ent: #dcecf5; --st-ent-fg: #275f7d; --st-not: #e9e2f3; --st-not-fg: #5b3f86; --st-vk: #e0eed6; --st-vk-fg: #43672b; --st-frei: #e6e8e8;
  font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--text);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191b; --panel: #1f2225; --side: #1b1d20; --soft: #25292c; --hover: rgba(255, 255, 255, .06);
    --text: #e3e6e8; --muted: #9aa3a9; --faint: #6f777d; --line: #2e3337; --line2: #3a4045;
    --blue: #3fb3c5; --blue-dark: #64c4d3; --blue-soft: #1d3338;
    --red: #e07d74; --red-soft: #3a2422; --orange: #dca263; --orange-soft: #3a2e20;
    --ok-bg: #26362a; --ok-fg: #a9cf8e; --mid-bg: #3d3122; --mid-fg: #e3b77a; --hi-bg: #432826; --hi-fg: #f0a39a;
    --bar-wohn: #2c5960; --bar-gew: #405a2d; --bar-best: #4a4258; --bar-sonst: #3d4245; --bar-edge: rgba(255, 255, 255, .12);
    --grid: #24282b; --grid-y: #353a3e; --today: #e07d74;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --xs-head: #0b6876; --xs-head-fg: #eaf6f8; --xs-run: #262b2e; --xs-bau: #354048; --xs-g1: #2a3524; --xs-g2: #232b20; --xs-ek: #6e5716; --xs-ek-fg: #f6dc8c; --xs-zero: #3a2826; --xs-na: #24282b; --xs-cell: #1f2225; --xs-edge: #30363a;
    --st-res: #3d2f1d; --st-res-fg: #e6b97c; --st-ent: #1d3440; --st-ent-fg: #8cc4e0; --st-not: #2f2840; --st-not-fg: #bfa8e6; --st-vk: #263623; --st-vk-fg: #a9cf8e; --st-frei: #33393d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17191b; --panel: #1f2225; --side: #1b1d20; --soft: #25292c; --hover: rgba(255, 255, 255, .06);
  --text: #e3e6e8; --muted: #9aa3a9; --faint: #6f777d; --line: #2e3337; --line2: #3a4045;
  --blue: #3fb3c5; --blue-dark: #64c4d3; --blue-soft: #1d3338;
  --red: #e07d74; --red-soft: #3a2422; --orange: #dca263; --orange-soft: #3a2e20;
  --ok-bg: #26362a; --ok-fg: #a9cf8e; --mid-bg: #3d3122; --mid-fg: #e3b77a; --hi-bg: #432826; --hi-fg: #f0a39a;
  --bar-wohn: #2c5960; --bar-gew: #405a2d; --bar-best: #4a4258; --bar-sonst: #3d4245; --bar-edge: rgba(255, 255, 255, .12);
  --grid: #24282b; --grid-y: #353a3e; --today: #e07d74;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --xs-head: #0b6876; --xs-head-fg: #eaf6f8; --xs-run: #262b2e; --xs-bau: #354048; --xs-g1: #2a3524; --xs-g2: #232b20; --xs-ek: #6e5716; --xs-ek-fg: #f6dc8c; --xs-zero: #3a2826; --xs-na: #24282b; --xs-cell: #1f2225; --xs-edge: #30363a;
  --st-res: #3d2f1d; --st-res-fg: #e6b97c; --st-ent: #1d3440; --st-ent-fg: #8cc4e0; --st-not: #2f2840; --st-not-fg: #bfa8e6; --st-vk: #263623; --st-vk-fg: #a9cf8e; --st-frei: #33393d;
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--sans); }
b, strong { font-weight: 600; }

/* ---------- Grundgerüst ---------- */
.layout.v2 { display: grid; grid-template-columns: 248px minmax(0, 1fr) auto; grid-template-rows: 52px minmax(0, 1fr); height: 100vh; }
.v2 > .sidebar { grid-row: 1 / 3; grid-column: 1; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.v2 > .topbar { grid-row: 1; grid-column: 2 / 4; }
.v2 > .main { grid-row: 2; grid-column: 2; }
.v2 > .detail { grid-row: 2; grid-column: 3; }
.v2 .side-logo { display: flex; align-items: center; height: 52px; padding: 0 18px; flex: none; border: 0; background: none; cursor: pointer; }
.v2 .side-logo img { height: 22px; width: auto; display: block; }
:root[data-theme="dark"] .v2 .side-logo img { filter: brightness(0) invert(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2 .side-logo img, :root:not([data-theme="light"]) .auth-card img { filter: brightness(0) invert(.92); } }
:root[data-theme="dark"] .auth-card img { filter: brightness(0) invert(.92); }
.v2 .side-scroll { overflow-y: auto; flex: 1; padding: 4px 12px 24px; }
.v2 .nav-sec { margin-top: 6px; }
.v2 .nav-sec + .nav-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.v2 .nav-sec > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 10px 8px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.v2 .nav-sec > button:hover { color: var(--text); }
.v2 .nav-sec > button .car { order: 2; margin-left: auto; transition: transform .15s, opacity .15s; font-size: 9px; opacity: 0; }
.v2 .nav-sec > button:hover .car, .v2 .nav-sec.closed > button .car { opacity: 1; }
.v2 .nav-sec.closed > button .car { transform: rotate(90deg); }
.v2 .nav-sec.closed > .nav-items { display: none; }
.v2 .nav-items { display: grid; gap: 2px; }
.v2 .nav-item { position: relative; }
.v2 .nav-item { padding: 7px 10px; gap: 10px; border-radius: 7px; font-size: 13.5px; color: var(--text); font-weight: 400; }
.v2 .nav-item:hover { background: var(--hover); }
.v2 .nav-item.active { border: 0; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 30, 35, .04); font-weight: 500; }
.v2 .nav-item .ico { width: 16px; height: 16px; color: var(--muted); display: grid; place-items: center; }
.v2 .nav-item .ico svg { width: 16px; height: 16px; }
.v2 .nav-item.active .ico { color: var(--blue); }
.v2 .nav-item.sub { padding: 5px 10px 5px 36px; font-size: 13px; color: var(--muted); }
.v2 .nav-item.sub.active { color: var(--text); box-shadow: none; background: none; font-weight: 500; }
.v2 .nav-item.sub.active::before { content: ''; position: absolute; left: 18px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--blue); }
.v2 .nav-item.later { color: var(--muted); }
.v2 .nav-item.later .ico { color: var(--faint); }
.v2 .nav-item .count { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.v2 .nav-item .count.red { background: var(--red); color: #fff; border-radius: 9px; padding: 0 6px; line-height: 17px; font-family: var(--sans); font-weight: 600; }
.v2 .nav-item .soon { font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .04em; }
.v2 .nav-item .lock { font-size: 10px; color: var(--faint); }

/* Kopfzeile */
.topbar { display: flex; align-items: center; gap: 6px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; }
.topbar .menu-btn { display: none; }
.qs { position: relative; flex: 1; max-width: 560px; }
.qs input { width: 100%; height: 34px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 0 64px 0 34px; font-size: 13.5px; color: var(--text); }
.qs input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.qs .qs-ic { position: absolute; left: 11px; top: 9px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.qs kbd { position: absolute; right: 9px; top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 17px; background: var(--bg); }
.qs-pop { position: absolute; top: 40px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 60; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; }
.qs-pop .h { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 8px 10px 4px; }
.qs-pop .it { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; color: var(--text); font-size: 13.5px; }
.qs-pop .it:hover, .qs-pop .it.sel { background: var(--hover); }
.qs-pop .it small { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.qs-pop .ask { color: var(--blue); }
.qs-pop .ans { padding: 10px 12px; margin: 4px; border-radius: 8px; background: var(--soft); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.qs-pop .ans.muted { color: var(--muted); }
.tb-sp { flex: 1; }
.tb-btn { position: relative; width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; color: var(--muted); display: grid; place-items: center; padding: 0; }
.tb-btn:hover { background: var(--hover); color: var(--text); }
.tb-btn svg { width: 18px; height: 18px; }
.tb-btn .bdg { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: #e0473c; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 4px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.tb-av { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font-size: 11px; font-weight: 600; display: grid; place-items: center; margin-left: 6px; border: 0; padding: 0; }
.pop { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 60; }
.notif { top: 46px; right: 70px; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 6px; }
.notif .h { display: flex; align-items: center; padding: 8px 10px; font-weight: 500; }
.notif .h span { flex: 1; }
.notif .n { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); }
.notif .n:hover { background: var(--hover); }
.notif .n.unread { background: var(--blue-soft); }
.notif .n small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* Hauptbereich */
.v2 .main-head { padding: 22px 32px 10px; gap: 10px 14px; align-items: flex-end; }
.v2 .main-head h1 { font-size: 22px; font-weight: 500; color: var(--text); letter-spacing: -.01em; flex: 1 1 auto; }
.v2 .main-head .subtitle { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.v2 .head-title { flex: 1 1 320px; min-width: 0; }
.v2 .main-head .actions { flex-wrap: wrap; }
.v2 .main-body { padding: 4px 32px 28px; }
.v2 .btn { border-radius: 7px; font-weight: 500; }
.v2 .btn.secondary { background: var(--panel); color: var(--text); border: 1px solid var(--line2); }
.v2 .btn.secondary:hover { background: var(--soft); }
.v2 .btn.danger { background: var(--panel); }
.v2 .field input, .v2 .field select, .v2 .field textarea, .modal .field input, .modal .field select, .modal .field textarea { background: var(--panel); color: var(--text); border-color: var(--line2); }
.modal { background: var(--panel); color: var(--text); }
.modal-bg { background: rgba(15, 20, 23, .4); }
.toast { background: #2a3136; color: #fff; }

/* Platzhalter */
.ph { max-width: 520px; margin: 60px auto; text-align: center; color: var(--muted); }
.ph .big { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.ph h2 { font-weight: 500; color: var(--text); font-size: 18px; margin: 0 0 8px; }

/* Werkzeugleiste mit Auswahl-Chips */
.tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 14px; }
.tools .grow { flex: 1; }
.dd { position: relative; }
.dd > button { display: inline-flex; align-items: center; gap: 6px; height: 28px; border: 1px solid var(--line2); background: var(--panel); border-radius: 14px; padding: 0 11px; font-size: 12.5px; color: var(--text); }
.dd > button .l { color: var(--muted); }
.dd > button.set { border-color: var(--blue); background: var(--blue-soft); }
.dd > button .car { color: var(--faint); font-size: 9px; }
.dd-menu { position: absolute; top: 32px; left: 0; min-width: 190px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 4px; z-index: 55; }
.dd-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 6px 9px; border-radius: 5px; font-size: 13px; color: var(--text); white-space: nowrap; }
.dd-menu button:hover { background: var(--hover); }
.dd-menu button .ck { width: 14px; color: var(--blue); }
.dd-menu button small { margin-left: auto; color: var(--faint); font-family: var(--mono); font-size: 11px; padding-left: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; padding: 2px; background: var(--panel); }
.seg button { border: 0; background: none; padding: 3px 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); }
.seg button.on { background: var(--soft); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.sw-t { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; }
.sw-t i { width: 28px; height: 16px; border-radius: 8px; background: var(--line2); position: relative; transition: background .15s; }
.sw-t i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.sw-t.on i { background: var(--blue); }
.sw-t.on i::after { left: 14px; }
.sw-t.on { color: var(--text); }

/* Einstellungen: Leiste von rechts */
.drawer-bg { position: fixed; inset: 0; background: rgba(15, 20, 23, .25); z-index: 70; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); z-index: 71; display: flex; flex-direction: column; animation: drin .18s ease-out; }
@keyframes drin { from { transform: translateX(24px); opacity: .4; } }
.drawer .dh { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer .dh b { flex: 1; font-weight: 500; }
.drawer .db { overflow-y: auto; padding: 8px 10px 20px; flex: 1; }
.drawer .lab { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 14px 8px 6px; }
.drawer .seg { margin: 0 8px; }
.drawer .di { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; color: var(--text); text-align: left; }
.drawer .di:hover { background: var(--hover); }
.drawer .di .ico { width: 16px; color: var(--muted); display: grid; place-items: center; }
.drawer .di .ico svg { width: 16px; height: 16px; }
.drawer .di small { margin-left: auto; color: var(--faint); font-size: 11px; }
.drawer .who { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* Dashboard */
.dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; grid-auto-flow: dense; }
.dash .w { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; min-height: 120px; display: flex; flex-direction: column; position: relative; }
.dash .w1 { grid-column: span 2; } .dash .w2 { grid-column: span 3; } .dash .w3 { grid-column: span 4; } .dash .w4 { grid-column: span 6; }
.dash .wh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash .wh .t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex: 1; }
.dash .wh .a { border: 0; background: none; color: var(--blue); font-size: 12px; padding: 0; }
.dash .big { text-align: left; font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.dash .big.red { color: var(--red); }
.dash .sub { color: var(--muted); font-size: 12px; }
.dash .li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; min-width: 0; }
.dash .li:first-of-type { border-top: 0; }
.dash .li .x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .li .p { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.dash .li .d { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dash .li .d.r { color: var(--red); } .dash .li .d.o { color: var(--orange); }
.dash .empty-s { color: var(--faint); font-size: 13px; padding: 10px 0; }
.dash.edit .w { outline: 1px dashed var(--line2); outline-offset: 3px; cursor: grab; }
.dash .wctl { display: none; position: absolute; top: 8px; right: 8px; gap: 3px; background: var(--panel); }
.dash.edit .wctl { display: flex; }
.dash .wctl button { border: 1px solid var(--line2); background: var(--panel); border-radius: 5px; font-size: 11px; padding: 1px 6px; color: var(--muted); }
.dash .wctl button.on { background: var(--blue-soft); color: var(--blue-dark); border-color: var(--blue); }
.dash .w.dragging { opacity: .4; }
.dash .w.over { box-shadow: 0 0 0 2px var(--blue); }
.dash-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; align-items: center; font-size: 12.5px; color: var(--muted); }
.dash-add button { border: 1px dashed var(--line2); background: none; border-radius: 14px; padding: 3px 10px; font-size: 12.5px; color: var(--text); }
.mini-bars { display: flex; gap: 3px; align-items: flex-end; height: 46px; margin-top: 8px; }
.mini-bars i { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.mini-bars i.now { outline: 1px solid var(--text); outline-offset: 1px; }
.lvl-ok { background: var(--ok-bg); color: var(--ok-fg); } .lvl-mid { background: var(--mid-bg); color: var(--mid-fg); } .lvl-hi { background: var(--hi-bg); color: var(--hi-fg); }

/* Projekte-Liste */
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.ptable td.nw, .ptable td:last-child { white-space: nowrap; }
.ptable td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ptable tr.r { cursor: pointer; }
.ptable tr.r:hover td { background: var(--hover); }
.ptable tr.g td { padding: 18px 10px 6px; border-bottom: 1px solid var(--line2); font-weight: 500; font-size: 13px; }
.ptable tr.g td span { font-family: var(--mono); color: var(--faint); font-size: 11px; margin-left: 6px; font-weight: 400; }
.ptable .nm { font-weight: 500; }
.ptable .sm { color: var(--muted); font-size: 12px; }
.ptable .ck { color: var(--green-dark); }
.ptable .warn { color: var(--orange); }
.pill2 { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.pill2.blue { background: var(--blue-soft); color: var(--blue-dark); }
.pill2.green { background: var(--ok-bg); color: var(--ok-fg); }
.pill2.orange { background: var(--mid-bg); color: var(--mid-fg); }
.pill2.red { background: var(--hi-bg); color: var(--hi-fg); }
.pill2.q { border: 1px dashed var(--orange); background: none; color: var(--orange); }
.tscroll { overflow-x: auto; }

/* Projektkopf: nur Projektstand und Objektart */
.phead { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 0 0 16px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.steps { display: inline-flex; align-items: center; gap: 0; }
.steps span { font-size: 12.5px; color: var(--faint); padding: 3px 12px; border: 1px solid var(--line2); margin-left: -1px; background: var(--panel); }
.steps span:first-child { border-radius: 14px 0 0 14px; margin-left: 0; }
.steps span:last-child { border-radius: 0 14px 14px 0; }
.steps span.done { color: var(--muted); background: var(--soft); }
.steps span.cur { color: #fff; background: var(--blue); border-color: var(--blue); font-weight: 500; }
.phead .k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 3px; }
.phead .v { font-size: 13px; }
.phead .grow { flex: 1; }
.mieter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mieter .m { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--panel); font-size: 13px; }
.mieter .m small { display: block; color: var(--muted); }

/* Bestätigung von Änderungen */
.diff { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0 14px; }
.diff div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 13px; }
.diff div:first-child { border-top: 0; }
.diff .k { color: var(--muted); }
.diff s { color: var(--faint); }
.diff b { font-weight: 500; color: var(--blue-dark); }
.segf { display: flex; gap: 0; margin-bottom: 14px; }
.segf label { flex: 1; text-align: center; border: 1px solid var(--line2); padding: 7px 4px; font-size: 13px; cursor: pointer; margin-left: -1px; color: var(--muted); }
.segf label:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.segf label:last-child { border-radius: 0 7px 7px 0; }
.segf input { display: none; }
.segf label:has(input:checked) { background: var(--blue); color: #fff; border-color: var(--blue); }
.checks2 { display: flex; gap: 18px; margin: 4px 0 14px; font-size: 13px; }
.checks2 label { display: inline-flex; align-items: center; gap: 7px; }
.checks2 input { width: 16px; height: 16px; accent-color: var(--blue); }

/* Zeitplan (Balken) */
.gt-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); max-height: calc(100vh - 210px); position: relative; }
.gt { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.gt th, .gt td { padding: 0; white-space: nowrap; }
.gt thead th { position: sticky; top: 0; z-index: 7; background: var(--panel); font-weight: 400; }
.gt thead tr.gy th { top: 0; height: 26px; }
.gt thead tr.gq th { top: 26px; height: 24px; border-bottom: 1px solid var(--line2); }
.gt .gl { position: sticky; left: 0; z-index: 6; background: var(--panel); border-right: 1px solid var(--line2); text-align: left; }
.gt thead .gl { z-index: 8; }
.gt .lc { display: flex; align-items: center; height: 100%; }
.gt .lc > span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; flex: none; }
.gt .lc > span.n { text-align: right; font-family: var(--mono); font-size: 11.5px; }
.gt thead .lc > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--faint); white-space: normal; line-height: 1.15; }
.gt .yh { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: left; padding-left: 8px; border-left: 1px solid var(--grid-y); }
.gt .yh.cur { color: var(--text); font-weight: 500; }
.gt .qh { position: relative; height: 24px; }
.gt .qh span { position: absolute; top: 5px; font-family: var(--mono); font-size: 10px; color: var(--faint); transform: translateX(-50%); }
.gt .qh span.now { color: var(--today); font-weight: 500; }
.gt td.trk, .gt th.trk { position: relative; }
.gt .bgq { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--grid-y) 1px, transparent 1px), linear-gradient(to right, var(--grid) 1px, transparent 1px); background-size: calc(var(--qw) * 4) 100%, var(--qw) 100%; pointer-events: none; }
.gt .tline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--today); z-index: 1; pointer-events: none; opacity: .7; }
.gt tr.r td { height: 34px; border-bottom: 1px solid var(--grid); }
.gt.nums tr.r td { height: 40px; }
.gt tr.r:hover td.gl, .gt tr.r:hover td.trk { background-color: var(--soft); }
.gt tr.r .nm { font-weight: 500; font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; }
.gt tr.r .sb { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.gt tr.r .nmc { cursor: pointer; }
.gt tr.r .nmc:hover .nm { color: var(--blue); }
.gt tr.sec td { height: 30px; background: var(--soft); border-bottom: 1px solid var(--line2); border-top: 1px solid var(--line2); }
.gt tr.sec td.gl { background: var(--soft); }
.gt tr.sec .st { padding: 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); font-weight: 500; }
.gt tr.sec .st small { color: var(--muted); letter-spacing: .02em; text-transform: none; font-family: var(--sans); font-weight: 400; margin-left: 8px; font-size: 11.5px; }
.gt tr.sum td { height: 30px; border-bottom: 1px solid var(--line2); }
.gt tr.sum .lc > span:first-child { font-weight: 500; }
.gt .bar { position: absolute; top: 12px; height: 14px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--bar-edge); z-index: 2; }
.gt.nums .bar { top: 16px; height: 19px; border-radius: 10px; }
.gt .bar.wohn { background: var(--bar-wohn); } .gt .bar.gew { background: var(--bar-gew); } .gt .bar.best { background: var(--bar-best); } .gt .bar.sonst { background: var(--bar-sonst); }
.gt .bar.guess { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .45) 5px 7px); }
.gt .bar.ed { cursor: grab; }
.gt .bar.ed::before, .gt .bar.ed::after { content: ''; position: absolute; top: 3px; bottom: 3px; width: 2px; border-radius: 1px; background: var(--bar-edge); opacity: 0; }
.gt .bar.ed::before { left: 4px; } .gt .bar.ed::after { right: 4px; }
.gt .bar.ed:hover::before, .gt .bar.ed:hover::after { opacity: 1; }
.gt .bar.drag { box-shadow: 0 0 0 2px var(--blue); cursor: grabbing; }
.gt .blab { position: absolute; top: 0; font-size: 10px; color: var(--muted); z-index: 2; pointer-events: none; }
.gt.nums .blab { top: 2px; }
.gt .qv { position: absolute; top: 19px; font-family: var(--mono); font-size: 10.5px; text-align: center; z-index: 3; pointer-events: none; color: var(--muted); }
.gt .qv.in { color: var(--text); }
.gt .qs2 { position: absolute; top: 5px; height: 20px; line-height: 20px; border-radius: 4px; font-family: var(--mono); font-size: 10.5px; text-align: center; z-index: 2; }
.gt .ghost { position: absolute; top: 10px; height: 16px; border: 1px dashed var(--line2); border-radius: 8px; color: var(--faint); font-size: 10.5px; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 1; }
.gt tr.r:hover .ghost { display: flex; }
.gt td.trk.add { cursor: copy; }
.gl-note { font-size: 12px; color: var(--muted); margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.gl-note .sw2 { display: inline-block; width: 18px; height: 9px; border-radius: 5px; vertical-align: middle; margin-right: 5px; box-shadow: inset 0 0 0 1px var(--bar-edge); }

/* Aufgaben: Kacheln */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kcol { background: var(--soft); border-radius: 10px; padding: 8px; min-height: 200px; }
.kcol.over { box-shadow: inset 0 0 0 2px var(--blue); }
.kcol .kh { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-size: 13px; font-weight: 500; }
.kcol .kh i { width: 8px; height: 8px; border-radius: 50%; }
.kcol .kh span { font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 400; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-bottom: 7px; cursor: pointer; font-size: 13px; }
.kcard:hover { border-color: var(--line2); }
.kcard.selected { box-shadow: 0 0 0 2px var(--blue); }
.kcard.done .kt { color: var(--muted); }
.kcard .kt { margin-bottom: 7px; line-height: 1.35; }
.kcard .km { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.kcard .km .grow { flex: 1; }
.kcard .due.r { color: var(--red); } .kcard .due.o { color: var(--orange); }
.who { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.who .av { width: 18px; height: 18px; border-radius: 50%; font-size: 8.5px; font-weight: 600; color: #fff; display: grid; place-items: center; }
.v2 .todo .who { margin-left: 4px; min-width: 70px; }
.prog { font-size: 11px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 9px; padding: 0 7px; white-space: nowrap; }

/* Prüfliste */
.chk-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chk-sum button { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 8px 14px; text-align: left; min-width: 130px; }
.chk-sum button.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.chk-sum b { display: block; font-size: 20px; font-weight: 400; }
.chk-sum small { color: var(--muted); font-size: 12px; }
.chk { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.chk .lv { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.chk .lv.r { background: var(--red); } .chk .lv.o { background: var(--orange); } .chk .lv.b { background: var(--blue); }
.chk .tx { flex: 1; min-width: 0; font-size: 13.5px; }
.chk .tx small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.chk .tx .pj { color: var(--muted); }
.chk .ac { display: flex; gap: 6px; flex: none; }
.chk-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 4px; display: flex; gap: 8px; }
.chk-h span { color: var(--faint); }

/* Dunkelmodus: ältere Bausteine auf Farbtokens umstellen */
:root[data-theme="dark"] .row, :root[data-theme="dark"] .task, :root[data-theme="dark"] .card, :root[data-theme="dark"] .hcard, :root[data-theme="dark"] .fv .tile, :root[data-theme="dark"] .fv .fc, :root[data-theme="dark"] .addbar, :root[data-theme="dark"] .todo-add, :root[data-theme="dark"] .fv .tw, :root[data-theme="dark"] .ftodo, :root[data-theme="dark"] .detail, :root[data-theme="dark"] .akte-sec { background: var(--panel) !important; color: var(--text); border-color: var(--line) !important; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line2) !important; }
:root[data-theme="dark"] .fv table.rt th, :root[data-theme="dark"] .fv table.rt td { background: var(--panel); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .fv table.rt tr.g td, :root[data-theme="dark"] .fv table.rt tr.s td { background: var(--soft); }
:root[data-theme="dark"] .pill, :root[data-theme="dark"] .tag, :root[data-theme="dark"] .chip { background: var(--soft); color: var(--muted); border-color: var(--line2); }
:root[data-theme="dark"] .pill.act { background: var(--blue-soft); color: var(--blue-dark); }
:root[data-theme="dark"] .check { background: var(--panel); }
:root[data-theme="dark"] .ptab.act { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .row, :root:not([data-theme="light"]) .task, :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .hcard, :root:not([data-theme="light"]) .fv .tile, :root:not([data-theme="light"]) .fv .fc, :root:not([data-theme="light"]) .addbar, :root:not([data-theme="light"]) .todo-add, :root:not([data-theme="light"]) .fv .tw, :root:not([data-theme="light"]) .ftodo, :root:not([data-theme="light"]) .detail, :root:not([data-theme="light"]) .akte-sec { background: var(--panel) !important; color: var(--text); border-color: var(--line) !important; }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line2) !important; }
  :root:not([data-theme="light"]) .fv table.rt th, :root:not([data-theme="light"]) .fv table.rt td { background: var(--panel); border-color: var(--line); color: var(--text); }
  :root:not([data-theme="light"]) .fv table.rt tr.g td, :root:not([data-theme="light"]) .fv table.rt tr.s td { background: var(--soft); }
  :root:not([data-theme="light"]) .pill, :root:not([data-theme="light"]) .tag, :root:not([data-theme="light"]) .chip { background: var(--soft); color: var(--muted); border-color: var(--line2); }
  :root:not([data-theme="light"]) .check { background: var(--panel); }
}

/* Schmale Fenster */
@media (max-width: 900px) {
  .layout.v2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); }
  .v2 > .topbar { grid-column: 1; padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); }
  .v2 > .main { grid-column: 1; }
  .v2 > .sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); z-index: 65; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--shadow); }
  .v2 > .sidebar.open { transform: none; }
  .topbar .menu-btn { display: grid; }
  .qs kbd { display: none; }
  .qs input { padding-right: 10px; }
  .v2 .main-head { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
  .v2 .main-body { padding: 4px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash .w1, .dash .w2, .dash .w3, .dash .w4 { grid-column: span 1; }
  .kanban { grid-template-columns: minmax(0, 1fr); }
  .tb-hide { display: none; }
  .notif { right: 8px; }
  .gt-wrap { max-height: none; }
}

@media print {
  .v2 > .sidebar, .topbar, .tools, .drawer, .drawer-bg, .dash-add, .wctl { display: none !important; }
  .layout.v2 { display: block; height: auto; }
  .v2 .main-body { overflow: visible; padding: 0; }
  .gt-wrap { max-height: none; overflow: visible; border: 0; }
  .gt .gl { position: static; }
}

/* ---------- Finanzierungsübersicht wie die Excel-Liste ---------- */
/* Finanzierungsübersicht im App-Design: eine Karte, ruhige Köpfe, Quartale als durchgehende gerundete Spuren, Heute-Linie */
.xs-wrap { overflow: auto; max-height: calc(100vh - 200px); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.xs-in { position: relative; width: max-content; padding: 6px 14px 12px 0; }
.xs { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.xs td, .xs th { padding: 3px 3px; vertical-align: middle; font-weight: 400; text-transform: none; letter-spacing: normal; font-family: var(--sans); }
.xs td.xq, .xs th.xq { padding-left: 0; padding-right: 0; }
.xs .c { border-radius: 8px; min-height: 38px; padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; white-space: nowrap; }
.xs .xn { position: sticky; left: 0; z-index: 3; background: var(--panel); padding-left: 14px; padding-right: 10px; }
.xs .xn .c { width: 236px; align-items: flex-start; text-align: left; white-space: normal; padding-left: 0; }
.xs .xk .c { width: 86px; }
.xs .xq .c { min-width: 100px; width: auto; }
.xs .xc .c { width: 230px; align-items: flex-start; text-align: left; white-space: normal; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
/* Köpfe: leise, ohne Farbflächen */
.xs .c.hd { color: var(--muted); align-items: flex-end; text-align: right; font-size: 10.5px; line-height: 1.25; min-height: 30px; justify-content: flex-end; padding-bottom: 6px; }
.xs .c.hd b { font-weight: 500; font-size: 11px; color: var(--text); }
.xs .c.hd small { font-size: 10px; color: var(--faint); }
.xs .xn .c.hd { align-items: flex-start; text-align: left; }
.xs .xn .c.hd b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--blue-dark); font-weight: 500; }
.xs .xc .c.hd { align-items: flex-start; }
.xs .xh1 th, .xs .xh2 th { border-bottom: 1px solid var(--line); }
.xs .xh1 th.xq { border-bottom: 0; }
.xs .c.hd.yr { min-height: 20px; padding: 0 10px 2px; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted); }
.xs .c.hd.yr.cur { color: var(--text); }
.xs .c.hd.q { min-height: 22px; align-items: center; font-size: 10.5px; padding-bottom: 5px; }
.xs th.xq.now .c.hd.q { color: var(--today); font-weight: 500; }
.xs tbody.xs-sec tr:first-child th { padding-top: 26px; }
.xs tbody.xs-sec:first-child tr:first-child th { padding-top: 8px; }
.xs tbody.xs-body tr.xr:first-child td { padding-top: 8px; }
/* Projektname */
.xs .c.nm { cursor: pointer; gap: 1px; min-height: 36px; }
.xs .c.nm b { font-weight: 600; font-size: 12.5px; }
.xs .c.nm small { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.xs tr.xr:hover .c.nm b { color: var(--blue-dark); }
.xs tr.xr:hover td.xn { background: color-mix(in srgb, var(--panel) 92%, var(--blue)); }
.xs tr.xr td.xn { border-radius: 8px 0 0 8px; }
/* Kennzahlen: Zahlen ohne Kästen */
.xs .c.na, .xs .c.w, .xs .c.g1, .xs .c.gn, .xs .c.gl2 { background: transparent; }
.xs .c.w { font-style: italic; color: var(--muted); }
.xs .c.zero { color: var(--faint); }
.xs .c.gn { color: var(--ok-fg); }
.xs .c.b { font-weight: 600; }
.xs .c.sm { font-size: 11px; white-space: normal; line-height: 1.25; color: var(--muted); }
/* Quartale: durchgehende Spur, nur an den Enden gerundet, keine Trennlinien */
.xs td.xq .c { border-radius: 0; }
.xs .c.run { background: var(--xs-run); color: var(--muted); }
.xs .c.bau { background: var(--xs-bau); font-weight: 500; }
.xs .c.l { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.xs .c.r { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.xs td.xq:has(.c.l) { padding-left: 3px; }
.xs td.xq:has(.c.r) { padding-right: 3px; }
.xs .c.bau.ed { cursor: grab; }
.xs .c.bau.drag { background: color-mix(in srgb, var(--xs-bau) 70%, var(--blue)); }
.xs .c.add { cursor: copy; }
.xs .c.add:hover { background: var(--blue-soft); border-radius: 9px; }
.xs .c.add:hover::after { content: '＋ Bauzeit'; font-size: 11px; color: var(--blue); }
.xs td.xq .c.e, .xs td.xq .c.add { background: transparent; }
.xs .c.hd.yr { width: auto; }
/* Summenzeile je Abschnitt */
.xs .xsum td { padding-top: 10px; }
.xs .xsum td.xn .c, .xs .xsum td.xk .c { background: transparent; }
.xs .c.ek { min-height: 34px; }
.xs .c.ek b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted); font-weight: 500; }
.xs .c.ek.b { color: var(--text); }
.xs .c.hd.s { min-height: 34px; justify-content: center; padding-bottom: 5px; }
.xs .c.sum { font-weight: 600; min-height: 34px; background: var(--soft); border-radius: 0; }
.xs .c.sum.lvl-ok { background: var(--ok-bg); color: var(--ok-fg); }
.xs .c.sum.lvl-mid { background: var(--mid-bg); color: var(--mid-fg); }
.xs .c.sum.lvl-hi { background: var(--hi-bg); color: var(--hi-fg); }
.xs.nokpi .xn .c { width: 260px; }
.xs-today { position: absolute; width: 2px; margin-left: -1px; background: var(--today); z-index: 2; pointer-events: none; }
.xs-today span { position: absolute; top: -4px; left: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--today); font-size: 0; }
/* ---------- Verkaufslisten ---------- */
.st-res { --st: var(--st-res); --stf: var(--st-res-fg); } .st-ent { --st: var(--st-ent); --stf: var(--st-ent-fg); } .st-not { --st: var(--st-not); --stf: var(--st-not-fg); } .st-vk { --st: var(--st-vk); --stf: var(--st-vk-fg); } .st-frei { --st: var(--st-frei); --stf: var(--muted); }
.st-mark { --st: var(--soft); --stf: var(--muted); }
.vk-pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.vk-pick button { border: 1px solid var(--line2); background: var(--panel); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: var(--text); display: flex; gap: 8px; align-items: baseline; }
.vk-pick button small { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.vk-pick button.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.vk-kpis { align-items: start; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 10px; margin-bottom: 18px; }
.vk-k { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vk-k > span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.vk-k > b { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-k > small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.vk-bar { display: flex; gap: 2px; height: 10px; margin: 6px 0 4px; }
.vk-bar i { background: var(--st); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--stf); opacity: .9; }
.vk-leg { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.vk-leg button { border: 0; background: none; padding: 2px 5px; border-radius: 5px; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.vk-leg button b { color: var(--text); font-weight: 600; }
.vk-leg button i { width: 9px; height: 9px; border-radius: 3px; background: var(--st); box-shadow: inset 0 0 0 1px var(--stf); }
.vk-leg button:hover { background: var(--hover); } .vk-leg button.on { background: var(--blue-soft); color: var(--text); }
.vk-tabs { margin-bottom: 12px; }
.vk-wrap { overflow: auto; max-height: calc(100vh - 330px); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.vk-t { border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 100%; }
.vk-t th { position: sticky; top: 0; background: var(--xs-head); color: var(--xs-head-fg); font-weight: 500; font-size: 11px; line-height: 1.25; padding: 7px 8px; text-align: center; vertical-align: bottom; border-right: 1px solid rgba(255, 255, 255, .18); min-width: 58px; z-index: 2; }
.vk-t thead tr:first-child th { top: 0; padding: 6px 10px; text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--xs-head) 82%, #000); }
.vk-t thead tr:first-child th span { text-transform: none; letter-spacing: 0; font-family: var(--sans); opacity: .8; margin-left: 6px; }
.vk-t thead tr:nth-child(2) th { top: 26px; }
.vk-t th.mu { font-style: italic; opacity: .85; }
.vk-t td { padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel); }
.vk-t td.n { text-align: right; }
.vk-t td.mu { color: var(--faint); font-style: italic; }
.vk-t td.tx { font-size: 12px; color: var(--muted); }
.vk-t td.tx span { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.vk-t td.l0, .vk-t th.l0 { position: sticky; left: 0; z-index: 1; min-width: 70px; }
.vk-t td.l1, .vk-t th.l1 { position: sticky; left: 70px; z-index: 1; min-width: 48px; box-shadow: 1px 0 0 var(--line); }
.vk-t th.l0, .vk-t th.l1 { z-index: 3; }
.vk-t tr.et1 td { border-top: 1px solid var(--line2); }
.vk-t tbody tr.r { cursor: pointer; }
.vk-t tbody tr.r:hover td { background: var(--hover); }
.vk-t tbody tr[class*='st-'] td { background: color-mix(in srgb, var(--st) 70%, var(--panel)); }
.vk-t tbody tr[class*='st-']:hover td { background: var(--st); }
.vk-t .pos { color: var(--ok-fg); font-weight: 500; }
.vk-t tfoot td { position: sticky; bottom: 0; background: var(--xs-head); color: var(--xs-head-fg); font-weight: 600; border: 0; }
.vk-pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--st, var(--soft)); color: var(--stf, var(--muted)); white-space: nowrap; font-weight: 500; }
.vk-free { color: var(--faint); font-size: 12px; }
.vk-warn { font-size: 10.5px; background: #f7e7a1; color: #5e4b05; border-radius: 4px; padding: 0 5px; }
.vk-note { font-size: 12px; color: var(--muted); margin: 10px 2px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vk-park { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-top: 22px; align-items: start; }
.vk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vk-ch { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--xs-head); color: var(--xs-head-fg); font-weight: 500; font-size: 13px; }
.vk-ch small { opacity: .8; font-weight: 400; font-size: 12px; flex: 1; }
.vk-ch .btn { background: rgba(255, 255, 255, .15); color: inherit; border-color: transparent; }
.vk-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vk-mini th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 7px 12px; border-bottom: 1px solid var(--line); }
.vk-mini td { padding: 6px 12px; border-bottom: 1px solid var(--line); }
.vk-mini .n { text-align: right; } .vk-mini .mu { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.vk-mini tr.on td { background: color-mix(in srgb, var(--blue-soft) 45%, var(--panel)); }
.vk-et { margin-bottom: 22px; }
.vk-eth { font-weight: 500; font-size: 14px; margin: 18px 0 10px; display: flex; gap: 10px; align-items: baseline; }
.vk-eth small { font-weight: 400; font-size: 12px; color: var(--muted); }
.vk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vk-wc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.vk-wh { display: flex; gap: 8px; align-items: baseline; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.vk-wh span { color: var(--muted); font-size: 12px; flex: 1; }
.vk-wc[class*='st-'] .vk-wh { background: color-mix(in srgb, var(--st) 70%, var(--panel)); }
.vk-rm { display: flex; justify-content: space-between; gap: 10px; padding: 4px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vk-rm:nth-of-type(2) { padding-top: 8px; }
.vk-ws { margin-top: auto; display: flex; justify-content: space-between; padding: 8px 12px; background: var(--xs-head); color: var(--xs-head-fg); font-size: 12.5px; }
.vk-ws { margin-top: 8px; }
.vk-tot { display: flex; justify-content: space-between; max-width: 360px; padding: 10px 14px; border-radius: 10px; background: var(--xs-head); color: var(--xs-head-fg); font-size: 14px; }
.vk-log { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vk-log > div { background: var(--panel); padding: 8px 12px; font-size: 13px; display: grid; gap: 2px; }
.vk-log .mu { font-size: 11.5px; color: var(--faint); }
.lnk { border: 0; background: none; color: var(--blue); font-size: 12px; padding: 0; cursor: pointer; }
.vk-h2s { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.vk-form fieldset { border: 0; padding: 0; margin: 0; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.vk-cks { display: flex; gap: 18px; margin: 2px 0 12px; font-size: 13px; }
.vk-sum { background: var(--soft); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.vk-sum b { color: var(--text); font-weight: 600; }
.vk-rr { display: grid; grid-template-columns: 1fr 110px 24px; gap: 8px; margin-bottom: 6px; align-items: center; }
.vk-rr input { height: 32px; border: 1px solid var(--line2); border-radius: 6px; padding: 0 8px; background: var(--panel); color: var(--text); }
@media (max-width: 1200px) { .vk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vk-park { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .vk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vk-k.vk-st { grid-column: 1 / -1; } .row3 { grid-template-columns: 1fr; } .xs .xn .c { width: 150px; } }

/* ---------- v3: Phase-Pillen ---------- */
.phpill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; border-radius: 10px; padding: 0 9px 0 8px; line-height: 20px; white-space: nowrap; background: var(--soft); color: var(--muted); }
.phpill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.phpill.projektierung { background: var(--st-ent); color: var(--st-ent-fg); }
.phpill.bau { background: var(--mid-bg); color: var(--mid-fg); }
.phpill.fertig { background: var(--ok-bg); color: var(--ok-fg); }

/* ---------- v3: Kalkulationen ---------- */
.kk-lock { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; padding: 8px 12px; color: var(--muted); font-size: 12px; margin: 0 0 14px; max-width: 760px; }
.kk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.kk-kpis small b { font-weight: 600; color: var(--text); }
.pos { color: var(--ok-fg); } .neg { color: var(--hi-fg); }
.kk-bar { height: 6px; border-radius: 4px; background: var(--soft); overflow: hidden; margin: 4px 0 2px; }
.kk-bar i { display: block; height: 100%; background: var(--st-vk-fg); opacity: .55; border-radius: 4px; }
.kk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kk-right { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.kk-right > .btn { align-self: flex-start; }
.kk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 16px; }
.kk-left { padding: 4px 16px 10px; }
.kk-sec + .kk-sec { border-top: 1px solid var(--line); }
.kk-sec { padding: 8px 0 6px; }
.kk-sh, .kk-l { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.kk-sh { grid-template-columns: 26px minmax(0, 1fr) auto 120px; padding: 6px 0 4px; }
.kk-sh em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 6px; text-align: center; line-height: 20px; }
.kk-sh span { font-weight: 600; font-size: 13px; }
.kk-sh i, .kk-l i { font-style: normal; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.kk-sh b, .kk-l b { text-align: right; font-weight: 600; white-space: nowrap; }
.kk-l { padding: 4px 0; font-size: 12.5px; }
.kk-sec .kk-l { padding-left: 38px; }
.kk-sec .kk-l b { font-weight: 400; }
.kk-l.tot { border-top: 1px solid var(--line); padding: 9px 0; font-size: 13px; }
.kk-card > .kk-l.tot:first-child { border-top: 0; }
.kk-l.tot span { font-weight: 600; }
.kk-res .kk-l:not(.tot) b { font-weight: 400; }
.kk-card .kk-sh + .kk-l { border-top: 0; }
.kk-card:not(.kk-left) .kk-l { padding-left: 0; }
.kk-card:not(.kk-left) > .kk-sh { grid-template-columns: 34px minmax(0, 1fr) auto 120px; }
.kk-db .kk-l b { font-size: 15px; }
.kk-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); padding: 0 4px; }
.kk-facts b { color: var(--text); font-weight: 500; }
.kk-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; }
.kk-tools .grow { flex: 1; }
.mu { color: var(--muted); }
.kk-leg { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.kk-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.kk-st { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; background: var(--line2); }
.kk-st.k-anf { background: #e9cf5f; } .kk-st.k-ang { background: #b7a6dc; } .kk-st.k-ver { background: #6cc4c6; }
.kk-tw { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow-x: auto; }
.kk-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kk-t th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 10px 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kk-t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.kk-t td b { font-weight: 500; }
.kk-t .n { text-align: right; white-space: nowrap; }
.kk-t td.nr { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.kk-t td.mu { color: var(--muted); }
.kk-t tr.r { cursor: pointer; }
.kk-t tr.r:hover td { background: var(--hover); }
.kk-t tfoot td { border-bottom: 0; font-weight: 600; background: var(--soft); }
.kk-t tfoot tr.sum2 td { font-weight: 400; color: var(--muted); background: var(--panel); }
.kk-sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; max-width: 1100px; }
.kk-sumgrid .kk-l { grid-template-columns: minmax(0, 1fr) auto 130px; }
.kk-fh { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 12px 0 2px; }
.kk-form .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; align-items: end; }
@media (max-width: 1200px) { .kk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kk-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .kk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }