/* =========================================================================
   FALCONFOX Management Dashboard – Design-System v8 (Masterlayout)
   Eine konsolidierte Grundlage statt übereinandergelegter Stände. Quelle der Werte:
   Canvas „Masterlayout Management Dashboard“ (Grundlagen, Tabellen-System, Beispielseite).
   Regeln: Textfarben ≥ 4,5 : 1 auf Weiß · Tabellenkopf Navy · Zeilen mit sichtbarer Trennlinie ·
   Tabellen mit Abstand zum Kartenrand, Kartentitel bündig mit der ersten Spaltenüberschrift ·
   in Tabellen nur Symbole, Text-Schaltflächen nur für Erstellen/Speichern/Abbrechen.
   ========================================================================= */

/* ============================ Tokens ============================ */
:root {
  color-scheme: light;
  /* CI */
  --navy: #15263E;
  --navy-2: #1F3656;
  --steel: #5C7B9E;
  --steel-2: #8EA6C2;
  --steel-ink: #3E6488;        /* Steel Blue als Text/Schaltfläche (6 : 1 auf Weiß) */
  --lblue: #F2F7FF;
  --wgray: #F4F0ED;
  --red: #C41618;
  --sred: #E0ACAB;
  --charcoal: #3A3B3F;

  /* Flächen */
  --page: #F5F7FA;
  --surface: #FFFFFF;
  --tint: #EEF2F7;             /* Seitenleiste, Chips, Segment-Schalter */
  --surface-2: #EEF2F7;
  --surface-3: #E3ECF7;

  /* Text (alle ≥ 4,5 : 1 auf Weiß) */
  --ink: #1E2A3A;              /* Inhalte, 14,5 : 1 */
  --ink-strong: #15263E;       /* Titel, Hauptbezeichnungen, 15,6 : 1 */
  --ink-secondary: #4A5868;    /* Zusatzzeilen, Labels, 7,4 : 1 */
  --ink-muted: #66727F;        /* Hinweise, 4,8 : 1 */
  --ink-chart: #66727F;
  --link: var(--steel-ink);

  /* Linien */
  --border: #DDE3EA;           /* Kartenrand */
  --border-strong: #C9D5E3;    /* Eingabefelder, Kopf-Unterkante (hell) */
  --grid: #E6EAF0;             /* Zeilentrenner */
  --baseline: #CBD3DD;
  --head-line: #A9B8CA;        /* Trennlinie unter Kartentiteln – kräftiger als die Tabellenlinien */
  --focus: rgba(62, 100, 136, .22);

  /* Tabellen */
  --table-head: var(--navy);
  --table-head-ink: #FFFFFF;
  --table-head-line: var(--navy);
  --row-zebra: #F7F9FC;        /* nur mit .table-zebra */
  --row-hover: #FFF7DB;        /* Zeilen-Hover: leichtes Gelb, hebt sich von Auswahl (blau) und Zebra ab */
  --row-selected: #DCE7F5;
  --row-group: #E6EBF1;        /* Zwischenkopfzeile – bewusst anders als Hover */
  --row-total: #E4EBF4;

  /* Status (immer mit Text) */
  --good: #1A6B35;   --good-bg: #E3F2E8;
  --warn: #845300;   --warn-bg: #FBEFD5;
  --bad: #A3231B;    --bad-bg: #FBE6E4;
  /* Füllung von Statusbalken (Ampel, weich) */
  --good-bar: #80C48D; --warn-bar: #F2C75C; --bad-bar: #E1706B;
  --info: #2F5478;   --info-bg: #E3ECF6;
  --neutral: #4A5868; --neutral-bg: #EEF1F5;
  --weighted: #66727F;

  /* Schaltflächen */
  --btn-hover: #243A5C;
  --btn-save: var(--steel-ink);
  --btn-save-hover: #33557A;
  --danger-bg: #FDF1F0;
  --danger-border: #F0C7C3;

  /* Diagramme */
  --series-1: var(--navy);
  --series-2: var(--steel);
  --series-3: var(--steel-2);
  --series-4: var(--sred);
  --target: var(--red);
  --rev-ist: #1E6B52;          /* fakturiert */
  --rev-booked: #4FA383;       /* gebucht */
  --rev-fc: #B9E0CD;           /* Forecast (schraffiert) */
  --rev-fc-hatch-bg: #E6F4EE;
  --rev-def: #5C7B9E;          /* abgegrenzt */
  --result: #15263E;           /* Ergebnis (Linie im Jahresvergleich) */
  /* Kategoriale Reihen (Produktivität: Projekte, Kunden, Personen) – geprüfte Reihenfolge, nicht umsortieren */
  /* Vertragsarten: sanfte Pastelltöne, bewusst abseits der Statusfarben (Grün/Gelb/Rot/Blau) */
  --kind-once: #1C6670; --kind-once-bg: #DDF1F3;          /* Projekt: Petrol */
  --kind-retainer: #5A48A6; --kind-retainer-bg: #ECE8FA;  /* Retainer: Lavendel */
  --kind-hosting: #5B6573; --kind-hosting-bg: #EEF1F5;    /* Hosting & WebService: Grau */
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #6250d6; --cat-other: #B5BFCB;
  --cost: #B8383B;   --cost-hover: #C85A5D;
  --cost-plan: #EDB3B4; --cost-plan-hover: #F2C6C7;
  --cash-in: #1E6B52; --cash-out: #B8383B;
  --soll: #C9CFD8;
  --goal-line: #15263E;
  --prev-year: #9BB0C7;
  --badge-done: #1E6B52;

  /* Schrift & Maße */
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'OAK Sans', 'OAKSans', 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 10px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-lg: 0 12px 32px rgba(21, 38, 62, .10);
  --sb-w: 281px;
  --sb-w-collapsed: 76px;
  --card-pad: 28px;            /* Innenabstand Karten = Abstand der Tabellen zum Kartenrand */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0C1626; --surface: #15263E; --tint: #1F3556; --surface-2: #1B2F4B; --surface-3: #24395A;
    --ink: #DCE3EC; --ink-strong: #FFFFFF; --ink-secondary: #B4C2D2; --ink-muted: #8FA1B6; --ink-chart: #A9B8C9;
    --link: #9FB9D6; --steel-ink: #9FB9D6;
    --head-line: rgba(255,255,255,.28); --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --grid: rgba(255,255,255,.07); --baseline: rgba(255,255,255,.2);
    --focus: rgba(159,185,214,.3);
    --table-head: #0A1424; --table-head-line: #0A1424;
    --row-zebra: rgba(255,255,255,.02); --row-hover: rgba(255,214,102,.10); --row-selected: rgba(92,123,158,.25);
    --row-group: rgba(255,255,255,.04); --row-total: #1B2F4B;
    --good: #5FD08A; --good-bg: rgba(95,208,138,.12); --warn: #F3BD4F; --warn-bg: rgba(243,189,79,.12);
    --bad: #FF8A8C; --bad-bg: rgba(255,107,109,.14);
 --info: #9FB9D6; --info-bg: rgba(159,185,214,.12);
    --neutral: #C9D5E3; --neutral-bg: rgba(255,255,255,.08); --weighted: #8FA1B6;
    --btn-hover: #2A4468; --btn-save: #5C7B9E; --btn-save-hover: #6F8DAF; --danger-bg: rgba(255,107,109,.14); --danger-border: rgba(255,107,109,.28);
    --series-1: #DCE6F3; --series-2: #7D9BBD; --series-3: #4F6D90; --target: #FF5A5C;
    --rev-ist: #3E9A78; --rev-booked: #86CDB0; --rev-fc: #2E5A4A; --rev-fc-hatch-bg: #1D3A35; --rev-def: #6F95C8; --result: #DCE6F3;
    --kind-once: #8FD3DB; --kind-once-bg: rgba(143,211,219,.14); --kind-retainer: #BEB3F2; --kind-retainer-bg: rgba(190,179,242,.15); --kind-hosting: #B4C2D2; --kind-hosting-bg: rgba(255,255,255,.08);
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-other: #5B6B80;
    --cost: #E06A6C; --cost-hover: #EC8E90; --cost-plan: #7A4644; --cost-plan-hover: #96585A;
    --cash-in: #6CC4A0; --cash-out: #E06A6C; --soll: #4A5C76; --goal-line: #DCE6F3; --prev-year: #6F87A3; --badge-done: #3E9A78;
    --shadow-lg: 0 12px 32px rgba(0,0,0,.4);
  }
}

/* ============================ Basis ============================ */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--body); font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: #fff; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--red); }
h1, h2, h3 { color: var(--ink-strong); margin: 0; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.ico { flex: none; display: block; }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.strong, .strong th, .strong td { font-weight: 600; }
.nowrap { white-space: nowrap; }
.r, .table .r, .table th.r { text-align: right; }
.pre { white-space: pre-line; font-size: 13px; }
[hidden] { display: none !important; }
.sq { display: inline-block; width: 11px; height: 8.4px; background: var(--red); border-radius: 1.6px; vertical-align: middle; }
.techline { display: inline-flex; flex-direction: column; gap: 2px; width: 22px; }
.techline span { height: 2px; background: currentColor; border-radius: 2px; }
.techline span:nth-child(2) { width: 74%; opacity: .65; }
.techline span:nth-child(3) { width: 48%; opacity: .4; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-ink); }
.tone-good { color: var(--good) !important; }
.tone-warn { color: var(--warn) !important; }
.tone-bad { color: var(--bad) !important; }

/* ============================ Rahmen & Seitenleiste ============================ */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sb-w); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 20px 16px 14px; overflow-y: auto; overflow-x: hidden; background: var(--tint); transition: width .2s ease;
}
.sb-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 2px 10px 0; min-height: 44px; }
.sb-brand { display: flex; align-items: center; min-width: 0; }
.sb-logo { height: 34px; width: auto; display: block; }
.sb-logo-dark { display: none; }
.sb-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: none; }
.sb-product { display: none; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.sb-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-secondary); margin: 14px 0 4px; padding-left: 14px; white-space: nowrap; }
.sb-label:not(:first-child) { margin-top: 29px; }
.sb-link {
  display: flex; align-items: center; gap: 12px; padding: 7px 16px; border-radius: var(--r-md); color: #2C3A4C;
  font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: background .15s, color .15s;
}
.sb-link .ico { color: var(--ink-secondary); }
.sb-link:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-strong); }
.sb-link:hover .ico { color: var(--ink-strong); }
.sb-link.active { background: var(--navy); color: #fff; }
.sb-link.active .ico { color: #fff; }
.sb-card { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: var(--navy); color: #C9D5E3; position: sticky; bottom: 0; z-index: 2; flex: none; box-shadow: 0 -10px 18px var(--tint); }
.sb-nav + .sb-card { margin-top: 18px; }
.sb-card-icon { display: none; }
.sb-card-title { font-family: var(--display); font-weight: 700; font-size: 17px; color: #fff; }
.sb-card-text { font-size: 12.5px; color: #C2D0DF; margin: 2px 0 10px; }
.sb-backdrop { display: none; }
.sb-collapsed .sidebar { width: var(--sb-w-collapsed); padding-left: 12px; padding-right: 12px; }
.sb-collapsed .sb-logo, .sb-collapsed .sb-label, .sb-collapsed .sb-link span, .sb-collapsed .sb-card { display: none; }
.sb-collapsed .sb-icon { display: block; }
.sb-collapsed .sb-head { flex-direction: column; padding: 0; gap: 10px; align-items: center; }
.sb-collapsed .sb-link { justify-content: center; padding: 12px 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar { background: #10203A; }
  :root:not([data-theme="light"]) .sb-link { color: var(--ink-secondary); }
  :root:not([data-theme="light"]) .sb-link.active { background: #2A4468; color: #fff; }
  :root:not([data-theme="light"]) .sb-card { box-shadow: 0 -10px 18px #10203A; }
  :root:not([data-theme="light"]) .sb-logo-light { display: none; }
  :root:not([data-theme="light"]) .sb-logo-dark { display: block; }
  :root:not([data-theme="light"]) .sb-collapsed .sb-logo-dark { display: none; }
}

/* Hauptbereich & Kopfzeile */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 26px 40px 22px;
  background: color-mix(in srgb, var(--page) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.topbar-menu { display: inline-grid; margin-left: -8px; color: var(--ink-secondary); }
.topbar-menu:hover { color: var(--ink-strong); }
.topbar-title { min-width: 0; flex: 1; }
.topbar-title h1 { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: .005em; color: var(--ink-strong); }
.breadcrumb { margin-top: 4px; font-size: 13px; color: var(--ink-secondary); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--steel-ink); }
.breadcrumb span.sep { color: var(--baseline); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.year-select { display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; }
.year-select button { border: 0; background: transparent; color: var(--ink-secondary); width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; }
.year-select button:hover { background: var(--surface-2); color: var(--ink-strong); }
.year-select strong { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink-strong); padding: 0 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); }
.user-chip:hover { color: var(--ink); }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-meta b { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.user-meta small { font-size: 12px; color: var(--ink-secondary); }
.demo-badge { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-md); background: var(--red); color: #fff; flex: none; }
.container { padding: 12px 40px 16px; width: 100%; }
.footer { padding: 24px 40px 32px; font-size: 13px; color: var(--ink-secondary); display: flex; align-items: center; gap: 10px; }
.page-head { margin: 0 0 28px; display: flex; flex-direction: column; gap: 4px; }
.page-head:empty { display: none; }
.page-head p { margin: 0; }
.page-context { font-family: var(--display); font-size: 24px; font-weight: 700; margin: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; flex-direction: row; }
.row-between > p { margin: 0 0 16px; color: var(--ink-secondary); }
.back-link { margin: 0 0 16px; font-size: 14px; }

/* ============================ Karten ============================ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--card-pad); margin-bottom: 28px; }
.card-flush { padding: 0; overflow: hidden; }
.card.narrow { max-width: 480px; }
.card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; row-gap: 10px; margin-bottom: 22px; min-height: 34px; }
.card-head h2, .toolbar h2, .card > h2 { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; color: var(--ink-strong); }
.card-head h2 { margin: 0; flex: none; }
.card > h2 { margin: 0 0 18px; }
.card-head-extra { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; row-gap: 6px; flex: 1 1 auto; min-width: 0; }
.card-head-extra .muted.small { font-size: 13px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); color: var(--ink-secondary); }
.card-pad { padding-left: var(--card-pad); padding-right: var(--card-pad); }
.card-flush > .card-head.card-pad { padding-top: 24px; margin-bottom: 16px; }
.card-flush > p.card-pad, .card-flush > form.card-pad, .card-flush > div.card-pad { padding-bottom: 22px; }
.card.card-fill { display: flex; flex-direction: column; }
.card.card-fill > .chart-box { flex: 1 1 auto; min-height: 330px; }
details.card > summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
details.card > summary::-webkit-details-marker { display: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; margin-bottom: 28px; }
.grid-rev { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; margin-bottom: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; }
.grid-2 > .card, .grid-3 > .card, .grid-4 > .card, .grid-main > .card, .grid-rev > .card { margin-bottom: 0; }
.chart-box { position: relative; height: 310px; }
.chart-box.tall { height: 360px; }

/* ============================ Kennzahlen ============================ */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; }
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 26px 22px; overflow: hidden; min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.kpi-ico { order: 0; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--tint); color: var(--ink-strong); display: grid; place-items: center; flex: none; }
.kpi-ico .ico { width: 20px; height: 20px; }
.kpi-label { order: 3; flex-basis: 100%; font-size: 14px; font-weight: 500; color: var(--ink-secondary); }
.kpi > .kpi-label { order: 0; flex-basis: auto; margin-bottom: 10px; }
.kpi-value { order: 1; font-family: var(--body); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink-strong); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.kpi-sub { order: 2; margin: 6px 0 0; font-size: 13px; color: var(--ink-secondary); }
.kpi-sub a { color: var(--ink-strong); font-weight: 600; }
.kpi.kpi-hero { background: var(--navy); border-color: var(--navy); color: #D3DCE8; }
.kpi.kpi-hero .kpi-label, .kpi.kpi-hero .kpi2-label { color: #E3EAF3; }
.kpi.kpi-hero .kpi-value { color: #fff; }
.kpi.kpi-hero .kpi-ico { background: rgba(255,255,255,.12); color: #fff; }
.kpi.kpi-hero .kpi-sub { color: #C2D0DF; }
.kpi.kpi-hero .kpi-sub a { color: #fff; }
.kpis.kpis-compact .kpi-value { font-size: 26px; }
.kpi2 { display: flex; flex-direction: column; gap: 4px; }
.kpi2-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.kpi2-label { font-size: 14.5px; color: var(--ink-secondary); margin-top: 2px; }
.kpi2 .kpi-value { margin: 0; }
.big-figure { font-family: var(--body); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.1; }
.big-figure-label { font-size: 13px; color: var(--ink-secondary); margin-bottom: 4px; }

/* ============================ Status ============================ */
.pill { display: inline-flex; align-items: center; gap: 3px; font-family: var(--body); font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
.pill .ico { width: 13px; height: 13px; }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-neutral { background: var(--neutral-bg); color: var(--neutral); }
.kpi-hero .pill-good { background: rgba(95,208,138,.16); color: #9BE6B6; }
.kpi-hero .pill-warn { background: rgba(243,189,79,.16); color: #F3CD7A; }
.kpi-hero .pill-bad { background: rgba(255,107,109,.18); color: #FFA9AA; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.badge-ok { background: var(--good-bg); color: var(--good); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral); }
.badge-navy { background: var(--navy); color: #fff; }
a.badge:hover { filter: brightness(.96); }
.tag { font-size: 12px; font-weight: 500; color: var(--ink-secondary); background: var(--tint); padding: 2px 8px; border-radius: 7px; }
.tag-accent { color: var(--red); background: color-mix(in srgb, var(--red) 9%, transparent); }
.seg-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; }
.seg-count { font-weight: 500; opacity: .75; margin-left: 4px; }

/* ============================ Diagramme & Legenden ============================ */
.gauge { position: relative; max-width: 300px; margin: 4px auto 0; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge-center { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.gauge-value { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1; color: var(--ink-strong); }
.gauge-label { font-size: 13px; color: var(--ink-secondary); margin-top: 4px; }
.legend-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.legend-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.legend-list li b { margin-left: auto; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.legend-list .sq { width: 10px; height: 7.6px; }
.legend-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-secondary); flex-wrap: wrap; }
.legend-inline .dot { margin-left: 14px; }
.legend-inline .dot:first-child { margin-left: 0; }
.dot { width: 10px; height: 10px; border-radius: 4px; flex: none; background: var(--series-1); display: inline-block; }
.dot-hatch { background: repeating-linear-gradient(135deg, var(--series-2) 0 2px, transparent 2px 4px); border: 1px solid var(--series-2); }
.dot-light { background: var(--surface-3); }
.dot-target { background: var(--target); height: 3px; border-radius: 2px; }
.dot-goal { width: 16px; height: 3px; border-radius: 0; background: radial-gradient(circle, var(--goal-line) 0 1px, transparent 1.2px) 0 50% / 4px 3px repeat-x; }
.dot-rev-ist { background: var(--rev-ist); }
.dot-rev-booked { background: var(--rev-booked); }
.dot-rev-fc { background: repeating-linear-gradient(135deg, var(--rev-fc) 0 2px, var(--rev-fc-hatch-bg) 2px 4px); }
.dot-rev-def { background: var(--rev-def); }
.dot-result { width: 18px; height: 2px; border-radius: 1px; background: var(--result); position: relative; overflow: visible; }
.dot-result::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--result); }
.dot-cost { background: var(--cost); }
.dot-cost-plan { background: var(--cost-plan); }
.dot-cash-in { background: var(--cash-in); }
.dot-cash-out { background: var(--cash-out); }
.dot-soll { background: var(--soll); }
.dot-prev-year { background: var(--prev-year); }
.segbar { display: flex; gap: 6px; height: 56px; margin: 6px 0 20px; }
.segbar span { border-radius: 10px; min-width: 6px; }
.seg-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 24px; }
.seg-legend div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seg-legend .seg-name { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-legend .seg-val { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink-strong); line-height: 1.1; }
.seg-legend .seg-pct { font-size: 12.5px; color: var(--ink-secondary); }
.card-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: -8px 0 18px; flex-wrap: wrap; }
.stat-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stat-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.stat-list .stat-pct { min-width: 50px; text-align: center; padding: 6px 0; border-radius: var(--r-md); font-size: 12px; font-weight: 600; color: var(--ink-strong);
  background: repeating-linear-gradient(135deg, var(--rev-fc) 0 3px, var(--rev-fc-hatch-bg) 3px 6px); }
.stat-list .stat-pct.dark { background: var(--rev-ist); color: #fff; }
.stat-list .stat-pct.lime { background: var(--rev-booked); color: #fff; }
.stat-list .stat-pct.grey { background: var(--neutral-bg); color: var(--neutral); }
.stat-list b { margin-left: auto; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.donut-wrap { position: relative; height: 230px; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center .lbl { font-size: 12.5px; color: var(--ink-secondary); }
.donut-center .val { font-family: var(--body); font-weight: 600; font-size: 30px; color: var(--ink-strong); letter-spacing: -0.02em; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--grid); }
.feed li:last-child { border-bottom: 0; }
.feed .feed-ico { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--tint); color: var(--ink-strong); display: grid; place-items: center; flex: none; }
.feed .feed-ico.bad { background: var(--bad-bg); color: var(--bad); }
.feed .feed-main { flex: 1; min-width: 0; }
.feed .feed-title { font-weight: 500; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .feed-sub { font-size: 13px; color: var(--ink-secondary); }
.feed .feed-val { font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed-day { font-size: 13px; font-weight: 600; color: var(--ink-secondary); margin: 6px 0 2px; }

/* ============================ Tabellen ============================
   Kopf: Navy, 600 · 12,5 px Versal, 2 px Unterkante · Zeilen: 1 px Trennlinie, Hover ·
   Rahmen mit 10 px Radius · Abstand zum Kartenrand = Karten-Innenabstand · Kartentitel bündig
   mit der ersten Spaltenüberschrift (Rahmen 1 px + Zellabstand 16 px). */
.table-scroll { overflow-x: auto; }
/* Luft für den Schatten des Tabellenkopfs: der Scrollbereich schneidet sonst links/rechts/unten ab.
   Innenabstand und gleich großer negativer Außenabstand – die Tabelle bleibt an ihrer Position. */
.table-scroll:not(.card-flush > .table-scroll) { padding: 0 12px 12px; margin: 0 -12px -12px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink);
  background: transparent; }
.table th, .table td { padding: 13px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--grid); }
.table thead th {
  background: var(--table-head); color: var(--table-head-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 0; padding-top: 13px; padding-bottom: 13px;
}
.table thead tr:first-child th:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.table thead tr:first-child th:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.table thead tr:first-child th:only-child { border-radius: var(--r-md); }
.table thead th .unit-hint, .table thead th .muted, .table thead th .small { color: inherit; opacity: .75; font-weight: 500; text-transform: none; letter-spacing: 0; }
.table thead th a, .th-sort { color: inherit; text-decoration: none; }
/* Pfeil immer mit Platz reserviert (unsichtbar), damit rechtsbündige Köpfe beim Überfahren nicht springen */
.th-sort::after { content: " ▾"; opacity: 0; }
.th-sort.active::after { opacity: 1; }
.th-sort.active.asc::after { content: " ▴"; }
.th-sort:not(.active):hover::after { opacity: .5; }
.table thead th .th-light { font-weight: 400; font-size: 10.5px; }
.table tbody tr > td, .table tbody tr > th { transition: background .12s; }
.table tbody tr:hover > td, .table tbody tr:hover > th { background-color: var(--row-hover); }
/* Hover- und Auswahlzeilen abgerundet wie der Kopfbalken, 4 px Luft zwischen Kopf und erster Zeile */
.table tbody tr > td, .table tbody tr > th { background-clip: padding-box; }
.table tbody tr:first-child > td, .table tbody tr:first-child > th { border-top: 4px solid transparent; }
/* Trennlinien direkt über und unter der hervorgehobenen Zeile ausblenden – sonst ragen sie über die Rundung hinaus */
.table tbody tr:hover > td, .table tbody tr:hover > th,
.table tbody tr:has(+ tr:hover) > td, .table tbody tr:has(+ tr:hover) > th,
.table.select-rows tbody tr:has(input[type="checkbox"]:checked) > td, .table.select-rows tbody tr:has(input[type="checkbox"]:checked) > th,
.table.select-rows tbody tr:has(+ tr input[type="checkbox"]:checked) > td, .table.select-rows tbody tr:has(+ tr input[type="checkbox"]:checked) > th { border-bottom-color: transparent; }
.table tbody tr:hover > :first-child, .table.select-rows tbody tr:has(input[type="checkbox"]:checked) > :first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.table tbody tr:hover > :last-child, .table.select-rows tbody tr:has(input[type="checkbox"]:checked) > :last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.table.select-rows tbody tr:has(input[type="checkbox"]:checked) > td { background-color: var(--row-selected); }
.table tbody tr:last-child > td, .table tbody tr:last-child > th { border-bottom: 0; }
.table tfoot tr:first-child > td, .table tfoot tr:first-child > th { border-top: 0; }
.table.table-zebra tbody tr:nth-child(even) > td, .table.table-zebra tbody tr:nth-child(even) > th { background-color: var(--row-zebra); }
.table tbody th { font-weight: 500; color: var(--ink-strong); }
.table .cell-main { font-weight: 500; color: var(--ink-strong); }
.table a.cell-main:hover { color: var(--red); }
.table .sub { display: block; font-size: 13px; color: var(--ink-secondary); margin-top: 2px; font-weight: 400; }
.table td.wrap { white-space: normal; min-width: 180px; }
.table tr.strong th, .table tr.strong td { font-weight: 600; color: var(--ink-strong); }
.table td.r, .table th.r { white-space: nowrap; }
.unit-hint { font-weight: 400; color: var(--ink-secondary); font-size: 12px; }
.month-head { text-align: right !important; }
.num-table td { text-align: right; white-space: nowrap; }
.num-table th { white-space: nowrap; }
.num-table thead th:not(:first-child):not(.l) { text-align: right; } /* Kopf wie die Zahlen darunter; .l = Textspalte */
.num-table tr.muted td, .num-table tr.muted th { color: var(--ink-secondary); }
.num-table tr.sep th, .num-table tr.sep td { border-top: 1px solid var(--border-strong); }
.group-row th, .group-row td { font-size: 13px; font-weight: 600; color: var(--ink-strong); background-color: var(--row-group) !important; border-bottom: 1px solid var(--border); }
.total-row th, .total-row td { font-weight: 700; color: var(--ink-strong); background-color: var(--row-total) !important; border-top: 2px solid var(--navy); border-bottom: 0 !important; }
.table tr.total-row > :first-child { border-radius: 0 0 0 var(--r-md); }
.table tr.total-row > :last-child { border-radius: 0 0 var(--r-md) 0; }
.indent { padding-left: 32px !important; }
.row-cancelled td { color: var(--ink-muted); text-decoration: line-through; }
.row-cancelled td select, .row-cancelled td input, .row-cancelled td .badge, .row-cancelled td .sub { text-decoration: none; }
.row-muted td { opacity: .6; }
.sticky-col { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
.grid-table tbody .sticky-col { box-shadow: inset -1px 0 0 var(--border); }
.table thead .sticky-col { background: var(--table-head); z-index: 3; }
.table tbody tr:hover .sticky-col { background-color: var(--row-hover); }
.narrow-table { max-width: 560px; }
.quarter-table th, .quarter-table td { padding-top: 14px; padding-bottom: 14px; }
.quarter-table td, .quarter-table thead th { min-width: 140px; }
.year-table th, .year-table td { padding: 12px 14px; }
.year-table tbody th { font-weight: 600; text-align: left; white-space: nowrap; }
.year-table .row-current th, .year-table .row-current td { background-color: var(--rev-fc-hatch-bg) !important; }   /* laufendes Jahr: helles Grün des Forecast-Streifens */
.year-table .sub { display: block; font-size: 12px; }
.perm-table td.c, .perm-table th.c { text-align: center; width: 120px; }
.perm-table input[type=radio] { width: 18px; height: 18px; accent-color: var(--navy); }
.perm-templates { margin: 18px 0 10px; }

/* Tabellen in Karten: Abstand zum Kartenrand, Kartentitel bündig mit der ersten Spaltenüberschrift */
.card-flush > .table-scroll { padding: 0 var(--card-pad) var(--card-pad); }
.card-flush > .table { margin: 0 var(--card-pad) var(--card-pad); width: calc(100% - 2 * var(--card-pad)); }
.card-flush > .table-scroll:first-child, .card-flush > .table:first-child { margin-top: var(--card-pad); }
.card-flush > .table-scroll:first-child { padding-top: var(--card-pad); margin-top: 0; }
/* Kartentitel: CI-rotes Element bündig mit der linken Kante des Tabellenkopfs,
   Text auf Höhe der ersten Spaltenüberschrift (Zellabstand 16 px) */
.card-head h2, .toolbar h2, .card > h2 { position: relative; padding-left: 16px; }
.card-head h2::before, .toolbar h2::before, .card > h2::before {
  /* hochkant, exakt Versalhöhe der Barlow Condensed (0,7 em), von der Oberkante der Versalien bis zur Grundlinie */
  content: ""; position: absolute; left: 0; top: .257em; width: 5px; height: .7em; background: var(--red); border-radius: 1px;
}

/* Monatsraster (Deals, Plankosten, Zeiterfassung) */
.grid-table { font-size: 13.5px; }
.grid-table th, .grid-table td { padding: 10px 9px; white-space: nowrap; }
.grid-table thead th { padding-top: 12px; padding-bottom: 12px; }
.grid-table tr > :first-child { padding-left: 16px; }   /* bündig mit dem Kartentitel */
.grid-table .summary-row th, .grid-table .summary-row td { background: transparent; text-align: right; font-size: 13px; color: var(--ink-secondary); border-bottom: 1px solid var(--grid); padding-top: 8px; padding-bottom: 8px; }
.grid-table .summary-row th { text-align: left; font-weight: 500; }
.grid-table .summary-row.strong th, .grid-table .summary-row.strong td { color: var(--ink-strong); font-weight: 600; }
.grid-table .summary-row .sticky-col { background-color: var(--surface); }
.grid-table tr.head-row th { background: var(--table-head); color: var(--table-head-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-bottom: 0; }
.grid-table td.month-cell { min-width: 64px; padding: 0 2px; }
.grid-table td.month-cell.weighted input, .grid-table td.month-cell.weighted span { color: var(--weighted); font-style: italic; }
.grid-table td.month-cell span { padding: 0 8px; }
.cell-input { width: 100%; min-width: 58px; border: 1px solid var(--border); background: var(--surface); text-align: right; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; padding: 6px 8px; border-radius: 6px; color: var(--ink); }
.cell-input::placeholder { color: var(--baseline); }
.cell-input:hover { border-color: var(--border-strong); }
.cell-input:focus { outline: none; border-color: var(--steel-ink); box-shadow: 0 0 0 3px var(--focus); }
.cell-fixed { display: inline-block; padding: 6px 8px; color: var(--ink-secondary); }
.is-saved { animation: saved 1.2s ease-out; }
.is-error { border-color: var(--bad) !important; background: var(--bad-bg) !important; }
@keyframes saved { 0% { background: var(--good-bg); } 100% { background: var(--surface); } }
.sticky-table { max-height: calc(100vh - 230px); overflow: auto; }
.sticky-table thead tr.head-row th { position: sticky; top: 0; z-index: 2; }
.sticky-table thead tr.head-row th.sticky-col { z-index: 4; }
#order-grid td.sticky-col.wrap { white-space: nowrap; min-width: 0; width: 240px; max-width: 240px; }
#order-grid td.sticky-col .cell-main, #order-grid td.sticky-col .sub { display: block; overflow: hidden; text-overflow: ellipsis; }
#order-grid th, #order-grid td { padding-left: 7px; padding-right: 7px; }
#order-grid tbody td { padding-top: 12px; padding-bottom: 12px; }
#order-grid td.month-cell { min-width: 58px; padding: 0 1px; }
#order-grid .cell-input { min-width: 52px; padding: 6px 4px; }
#order-grid .summary-row th, #order-grid .summary-row td { font-size: 12.5px; }

/* Werkzeugleiste, Suche, Blättern */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.toolbar h2 { margin: 0 auto 0 0; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field .ico { position: absolute; left: 12px; color: var(--ink-secondary); pointer-events: none; }
.search-field input[type="search"] { padding-left: 38px; min-width: 260px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0 0; font-size: 13.5px; color: var(--ink-secondary); }
.pager-pages { display: flex; gap: 6px; }
.pager-info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pager-size label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; white-space: nowrap; font-size: 13.5px; color: var(--ink-secondary); font-weight: 400; }
.pager-size select { width: auto; margin: 0; padding: 5px 28px 5px 10px; font-size: 13.5px; }
.pager-pages a, .pager-pages span { min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-secondary); background: var(--surface); border: 1px solid var(--border); font-weight: 500; }
.pager-pages a:hover { background: var(--surface-2); color: var(--ink-strong); }
.pager-pages .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager-pages .gap { border: 0; background: transparent; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px var(--card-pad); }
.filters input[type="search"] { min-width: 280px; }

/* ============================ Formulare ============================ */
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 9px 12px; transition: border-color .15s, box-shadow .15s; }
select { padding-right: 30px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--steel-ink); box-shadow: 0 0 0 3px var(--focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-secondary); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); width: 16px; height: 16px; padding: 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-secondary); font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 400; }
.inline-status { max-width: 124px; padding: 6px 28px 6px 10px; font-size: 13px; border-radius: var(--r-md); }
/* Phase in der Farbe des Phasen-Badges; die Optionen der geöffneten Liste bleiben neutral */
.inline-status[data-tone] { font-weight: 600; }
.inline-status[data-tone="ok"] { background-color: var(--good-bg); color: var(--good); border-color: transparent; }
.inline-status[data-tone="warn"] { background-color: var(--warn-bg); color: var(--warn); border-color: transparent; }
.inline-status[data-tone="bad"] { background-color: var(--bad-bg); color: var(--bad); border-color: transparent; }
.inline-status[data-tone="info"] { background-color: var(--info-bg); color: var(--info); border-color: transparent; }
.inline-status[data-tone="neutral"] { background-color: var(--neutral-bg); color: var(--neutral); border-color: transparent; }
.inline-status option { background: var(--surface, #fff); color: var(--ink, #15263E); font-weight: 400; }
.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.inline-form label { flex-direction: row; align-items: center; gap: 8px; }
.inline-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-row input, .inline-row select { width: auto; }
.inline-delete { margin: -8px 0 24px; text-align: right; }
form.inline { display: inline; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 24px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
.form-grid h2 { margin: 12px 0 2px; font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.form-grid.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.new-customer { grid-column: span 3; align-self: end; }
.new-customer summary { cursor: pointer; color: var(--link); font-size: 13.5px; margin-bottom: 8px; }
.new-customer label { margin-bottom: 8px; }
.actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.distribute { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; padding: 16px 18px; background: var(--surface-2); border-radius: var(--r-md); font-size: 13.5px; color: var(--ink-secondary); }
.month-grid { display: grid; grid-template-columns: 56px repeat(12, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; align-items: end; }
.month-grid-year { font-family: var(--display); font-size: 18px; font-weight: 700; padding-bottom: 10px; color: var(--ink-strong); }
.month-input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; padding: 8px; font-size: 13.5px; }
input[readonly].month-input { background: var(--surface-2); color: var(--ink-secondary); border-color: transparent; }
.w-num { width: 80px; }
.w-full { width: 100%; }
.col-grow { width: 50%; }
.fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; margin: 4px 0 0; display: flex; flex-direction: column; gap: 18px; background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
.fieldset legend { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-ink); padding: 0 6px; }
.fieldset p { margin: 0; }
.segmented-radio { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--r-md); flex-wrap: wrap; }
.segmented-radio label.check { padding: 8px 16px; border-radius: var(--r-md); cursor: pointer; font-weight: 600; }
.segmented-radio label.check:has(input:checked) { background: var(--surface); color: var(--ink-strong); box-shadow: 0 1px 2px rgba(21,38,62,.08); }
.contract-fields .form-grid, .plan-fields .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.segmented a { padding: 8px 16px; color: var(--ink-secondary); border-radius: var(--r-md); font-weight: 600; font-size: 13.5px; }
.segmented a.active { background: var(--navy); color: #fff; }
.segmented a:hover { color: var(--ink-strong); background: var(--tint); }
.segmented a.active:hover { color: #fff; background: var(--navy); }
.tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 8px 16px; color: var(--ink-secondary); border-radius: 10px; white-space: nowrap; font-weight: 600; font-size: 14px; background: transparent; }
.tabs a.active { color: #fff; background: var(--navy); }
.tabs a:hover { color: var(--ink-strong); background: var(--surface); }
.tabs a.active:hover { color: #fff; background: var(--navy); }
.subhead, .section-title { font-size: 16px; font-weight: 600; margin: 28px 0 10px; color: var(--ink-strong); }
.section-title { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.row-edit summary { list-style: none; display: inline-flex; }
.row-edit summary::-webkit-details-marker { display: none; }
.row-edit[open] { position: relative; }
.row-edit-form { position: absolute; right: 0; top: 40px; z-index: 20; width: min(560px, 80vw); grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-lg); text-align: left; white-space: normal; }
.span-terms .row-edit-form { left: 0; right: auto; }
.storno-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: transparent; }
.storno-row input[name^="grund"] { flex: 1; min-width: 220px; }
.extra-input { width: 110px; text-align: right; padding: 6px 10px; }
.extra-full { width: 30px; height: 30px; margin-left: 4px; font-weight: 700; vertical-align: middle; }

/* ============================ Schaltflächen ============================
   Text-Schaltflächen nur für Erstellen, Speichern, Abbrechen (40 px; klein 32 px).
   In Tabellen ausschließlich Symbol-Schaltflächen (.btn-icon, 32 px, Tooltip über title). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-strong); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--surface-2); color: var(--ink-strong); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }   /* übergeordnete Aktion (Neu anlegen, Sync starten) – CI-Rot */
.btn-primary:hover { background: #A31214; border-color: #A31214; color: #fff; }
.btn-save { background: var(--btn-save); border-color: var(--btn-save); color: #fff; }      /* Speichern / Anlegen in Formularen – Steel Blue */
.btn-save:hover { background: var(--btn-save-hover); border-color: var(--btn-save-hover); color: #fff; }
.btn-accent { background: var(--red); border-color: var(--red); color: #fff; }
.btn-accent:hover { background: #A91214; border-color: #A91214; color: #fff; }
.btn-danger, .btn-cancel { background: var(--danger-bg); border-color: var(--danger-border); color: var(--bad); }
.btn-danger:hover, .btn-cancel:hover { background: var(--bad-bg); color: var(--bad); }
.btn-ghost { border-color: transparent; color: var(--steel-ink); background: transparent; }
.btn-ghost:hover { background: var(--tint); color: var(--ink-strong); }
.btn-soft { border-color: transparent; background: var(--surface-2); color: var(--ink-strong); }
.btn-small { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: var(--r); }
.btn-block { width: 100%; }
.btn-icon { border: 1px solid transparent; background: transparent; color: var(--ink-secondary); cursor: pointer; width: 38px; height: 38px; border-radius: var(--r-md); display: inline-grid; place-items: center; font-size: 16px; line-height: 1; padding: 0; vertical-align: middle; }
.btn-icon:hover { background: var(--tint); color: var(--ink-strong); }
.btn-icon .ico { width: 18px; height: 18px; }
.btn-icon-danger, .btn-icon.btn-icon-danger { color: var(--bad); }
.btn-icon-danger:hover { background: var(--danger-bg); color: var(--bad); }
.btn-icon.muted { color: var(--baseline); cursor: default; }
.btn-icon.muted:hover { background: transparent; }
.table .btn-icon, .item-actions .btn-icon, .row-actions .btn-icon { width: 32px; height: 32px; border-radius: var(--r); }
.row-actions { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.row-actions form { display: inline; }
.row-edit summary.btn-icon { display: inline-grid; }

/* ============================ Meldungen ============================ */
.alert { padding: 15px 20px; border-radius: var(--r-md); margin-bottom: 24px; font-size: 14px; line-height: 1.5; }
.alert-success { background: var(--good-bg); color: var(--good); }
.alert-error { background: var(--bad-bg); color: var(--bad); }
.alert-info { background: var(--info-bg); color: var(--ink); }
.alert a { font-weight: 600; }
.notice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.notice > div { flex: 1; min-width: 240px; }

/* ============================ Anmeldung ============================ */
.auth-page { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; background: var(--page); }
.auth-brand { background: var(--navy); color: #C9D5E3; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 16px 16px; }
.auth-brand img { height: 30px; width: auto; align-self: flex-start; }
.auth-brand h2 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; color: #fff; margin: 0 0 14px; }
.auth-brand p { max-width: 42ch; color: #B7C6D7; margin: 0; }
.auth-brand .topband { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--red); }
.auth-main { display: grid; place-items: center; padding: 24px; }
.auth-card { background: var(--surface); border-radius: var(--r-lg); padding: 34px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-lg); }
.auth-card h1 { font-family: var(--display); font-weight: 700; font-size: 32px; }
.auth-card p { margin: 0; }

/* ============================ Seiten-Bausteine ============================ */
/* Kunden */
.kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 12px 28px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-secondary); }
.kv dd { margin: 0; color: var(--ink-strong); min-width: 0; overflow-wrap: anywhere; }
.kv dd .sub { display: block; }
.item-list { display: flex; flex-direction: column; gap: 12px; }
.item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-2); line-height: 1.55; font-size: 14px; }
.item-main { min-width: 0; overflow-wrap: anywhere; }
.item-main .sub { display: block; color: var(--ink-secondary); }
.item-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 4px; }
.item-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.item-form { padding: 20px; border-radius: var(--r-md); border: 1px solid var(--border-strong); }
.customer-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.new-contact { padding: 0; background: transparent; box-shadow: none; border: 0; }
.new-contact > summary { list-style: none; display: inline-flex; margin-bottom: 4px; }
.new-contact > summary::-webkit-details-marker { display: none; }
.new-contact[open] { padding: 28px; background: var(--surface); border: 1px solid var(--border); }

/* Deals */
.deal-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.deal-box .kv { grid-template-columns: max-content minmax(0, 1fr); }
.deal-flow { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 18px; }
.deal-flow span { flex: 1; min-width: 110px; text-align: center; padding: 9px 8px; border-radius: var(--r-md); background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
/* Aktive Phase in der Farbe des Phasen-Badges, alle übrigen neutral; erledigte Phasen nur etwas kräftiger */
.deal-flow span.done { color: var(--ink-strong); }
.deal-flow span.current[data-tone="ok"] { background: var(--good-bg); color: var(--good); }
.deal-flow span.current[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); }
.deal-flow span.current[data-tone="info"] { background: var(--info-bg); color: var(--info); }
.deal-flow span.current[data-tone="neutral"] { background: var(--neutral-bg); color: var(--neutral); }
.deal-flow span.current[data-tone="bad"] { background: var(--bad-bg); color: var(--bad); }

/* Zeiterfassung */
.time-entry-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.time-entry-form > label { grid-column: span 2; }
.time-entry-form > .tf-note { grid-column: span 3; }
.time-entry-form > label:has(input[type=date]), .time-entry-form > .tf-dur { grid-column: span 1; }
.time-entry-form > .check { grid-column: span 1; align-self: center; }
.time-entry-form .tf-actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.timer-running { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.timer-running > div { flex: 1; min-width: 200px; }
.timer-dot { width: 12px; height: 12px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 0 rgba(46,158,91,.5); animation: timer-pulse 1.6s infinite; flex: none; }
@keyframes timer-pulse { 70% { box-shadow: 0 0 0 10px rgba(46,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); } }
.timer-clock { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.time-grid thead th.today { box-shadow: inset 0 -3px 0 var(--red); }
.time-grid .cell-input { width: 64px; text-align: right; }
.time-grid tr.time-add-row td { background: transparent !important; }
.time-add select { max-width: 260px; }
.time-add [data-row-note] { width: 240px; }
tr.is-running td { background: color-mix(in srgb, #2E9E5B 7%, transparent); }
.time-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 24px; }
.time-project { display: flex; flex-direction: column; }
.time-project-foot { margin-top: auto; padding-top: 24px; margin-bottom: -8px; display: flex; justify-content: flex-end; }
.time-project-foot .btn { margin-right: -10px; }
.time-project h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 600; color: var(--ink-strong); }
.time-progress { height: 8px; border-radius: 99px; background: var(--surface-2); margin: 16px 0 8px; overflow: hidden; }
.time-progress span { display: block; height: 100%; border-radius: 99px; background: var(--good-bar); }
.time-progress.over span { background: var(--bad-bar); }
.time-progress-label { font-size: 14px; margin-bottom: 4px; }
.task-progress { list-style: none; padding: 0; margin: 14px 0 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.task-progress li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.task-progress li .time-progress { grid-column: 1 / -1; height: 5px; margin: 2px 0 0; }
.activity-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.activity-group { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.activity-group legend { padding: 0 6px; font-weight: 600; }

/* ============================ Responsive ============================ */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .month-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .month-grid-year { grid-column: 1 / -1; padding: 0; }
  .contract-fields .form-grid, .plan-fields .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { .grid-rev { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  :root { --card-pad: 20px; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; width: var(--sb-w) !important; padding-left: 16px !important; padding-right: 16px !important; }
  .sb-collapsed .sidebar .sb-logo { display: block; }
  .sb-collapsed .sidebar .sb-icon { display: none; }
  .sb-collapsed .sidebar .sb-link span { display: inline; }
  .sb-collapsed .sidebar .sb-label, .sb-collapsed .sidebar .sb-card { display: block; }
  .sb-collapsed .sidebar .sb-head { flex-direction: row; }
  .sb-collapsed .sidebar .sb-link { justify-content: flex-start; padding: 10px 14px; }
  .sb-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .sb-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(12, 22, 38, .4); z-index: 50; }
  .topbar { padding: 14px 16px; flex-wrap: wrap; }
  .topbar-title h1 { font-size: 25px; }
  .container { padding: 8px 16px 12px; }
  .card { margin-bottom: 20px; }
  .grid-2, .grid-3, .grid-main, .kpis { gap: 18px; margin-bottom: 20px; }
  .grid-2, .grid-3, .form-grid, .form-grid.form-grid-2, .form-grid.form-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2, .new-customer { grid-column: auto; }
  .kpi { padding: 20px 22px; }
  .table th, .table td { padding: 11px 12px; }
  .user-meta { display: none; }
  .user-chip { padding: 4px; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px; }
  .search-field input[type="search"] { min-width: 0; }
  .deal-box { grid-template-columns: minmax(0, 1fr); }
  .time-entry-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .time-entry-form > label, .time-entry-form > .tf-note, .time-entry-form > .check, .time-entry-form .tf-actions { grid-column: 1 / -1; }
  .time-entry-form > label:has(input[type=date]), .time-entry-form > .tf-dur { grid-column: span 1; }
  .time-entry-form .tf-actions { justify-content: stretch; }
  .time-entry-form .tf-actions .btn { flex: 1; }
  .time-add select, .time-add [data-row-note] { max-width: none; width: auto; flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .kpis, .kpis.kpis-3 { grid-template-columns: minmax(0, 1fr); }
  .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contract-fields .form-grid, .plan-fields .form-grid { grid-template-columns: minmax(0, 1fr); }
  .filters input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .breadcrumb { display: none; }
  .kpi-value { font-size: 28px; }
}

/* Kopf- und Hinweisbereiche in randlosen Karten */
.flush-head { padding-top: 24px; }
.flush-head .card-head { margin-bottom: 16px; }
.card-note { margin: 0; padding-bottom: 22px; }

/* Versuch: Symbol vor dem Kartentitel (statt rotem Strich), bündig mit der linken Kante des Tabellenkopfs */
/* Symbolfläche 28 px: die Linien (ca. 75 % des Rasters) ragen gut 3 px über Versalhöhe und Grundlinie hinaus */
.card-head > .card-ico { display: inline-grid; place-items: center start; flex: none; width: 28px; height: 28px; color: var(--ink-strong); margin: 0 -2px 0 0; }
.card-head > .card-ico .ico { width: 28px; height: 28px; stroke-width: 1.8; }
.card-head:has(> .card-ico) h2, h2:has(> .card-ico) { padding-left: 0; }
.card-head:has(> .card-ico) h2::before, h2:has(> .card-ico)::before { content: none; }
/* Symbol innerhalb der Überschrift (Seiten ohne card_head-Baustein) */
h2 > .card-ico { display: inline-block; margin-right: 10px; color: var(--ink-strong); line-height: 0; vertical-align: baseline; }
h2 > .card-ico .ico { display: inline-block; width: 28px; height: 28px; vertical-align: baseline; }

/* Kopfzeile der Karte mit feiner Trennlinie auf Inhaltsbreite (von der linken bis zur rechten Inhaltskante) */
.card > .card-head, .card > .toolbar, .card > form > .card-head:first-child,
.card-flush > .card-head.card-pad, .flush-head { position: relative; padding-bottom: 18px; margin-bottom: 24px; }
.card > .card-head::after, .card > .toolbar::after, .card > form > .card-head:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--head-line);
}
.card-flush > .card-head.card-pad::after, .flush-head::after {
  content: ""; position: absolute; left: var(--card-pad); right: var(--card-pad); bottom: 0; height: 1px; background: var(--head-line);
}
.flush-head { padding-bottom: 2px; }
.flush-head .card-head { margin-bottom: 16px; }

/* Leichter, klarer Schatten für Kartentitel und Symbol (3D-Wirkung ohne Weichzeichnung) */
.card-head h2, .toolbar h2, .card > h2 { text-shadow: 0 1px 0 rgba(21, 38, 62, .11), 0 2px 1px rgba(21, 38, 62, .08); }
.card-ico .ico { filter: drop-shadow(0 1px 0 rgba(21, 38, 62, .11)) drop-shadow(0 2px 1px rgba(21, 38, 62, .08)); overflow: visible; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-head h2, :root:not([data-theme="light"]) .toolbar h2, :root:not([data-theme="light"]) .card > h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .card-ico .ico { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
}

/* Kompakterer Kartenkopf: weniger Luft über dem Titel und zwischen Titel und Trennlinie */
.card:has(> .card-head:first-child), .card:has(> .toolbar:first-child), .card:has(> form:first-child > .card-head:first-child) { padding-top: 20px; }
.card-flush > .card-head.card-pad:first-child { padding-top: 18px; }
.flush-head { padding-top: 18px; }
.card > .card-head, .card > .toolbar, .card > form > .card-head:first-child, .card-flush > .card-head.card-pad { padding-bottom: 13px; margin-bottom: 22px; }
.flush-head .card-head { margin-bottom: 13px; }

/* Gruppenzeilen als abgerundete Bänder – passend zu Tabellenkopf und Hover, mit 4 px Luft ober- und unterhalb */
.table tr.group-row > th, .table tr.group-row > td {
  background-color: var(--row-group) !important; background-clip: padding-box;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.table tr.group-row > :first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.table tr.group-row > :last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.table tbody tr:has(+ tr.group-row) > td, .table tbody tr:has(+ tr.group-row) > th { border-bottom-color: transparent; }
/* Summenzeile: Fläche nur innerhalb des Rahmens, damit Ecken und Linie sauber bleiben */
.table tr.total-row > th, .table tr.total-row > td { background-color: var(--row-total) !important; background-clip: padding-box; }
/* Summenzeile als rundum abgerundetes Band (statt 2-px-Navy-Linie), 4 px Luft darüber */
.table tr.total-row > th, .table tr.total-row > td { border-top: 4px solid transparent; border-bottom: 0 !important; }
.table tr.total-row > :first-child, .table tbody tr.total-row:hover > :first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.table tr.total-row > :last-child, .table tbody tr.total-row:hover > :last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.table tr.total-row > :only-child { border-radius: var(--r-md); }
.table tbody tr:has(+ tr.total-row) > td, .table tbody tr:has(+ tr.total-row) > th,
.table tfoot tr:has(+ tr.total-row) > td, .table tfoot tr:has(+ tr.total-row) > th { border-bottom-color: transparent; }
/* Trennlinie über Zwischensummen verschwindet, wenn die Zeile darüber überfahren wird */
.table tbody tr:hover + tr.sep > th, .table tbody tr:hover + tr.sep > td { border-top-color: transparent; }
/* Zwischenkopfzeile: Typografie wie der Tabellenkopf (Versalien, gesperrt), damit sie sich klar vom Hover abhebt */
.table tr.group-row > th, .table tr.group-row > td { padding-top: 10px; padding-bottom: 10px; }
.table tr.group-row > th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-strong); }

/* ============================ Urlaub ============================ */
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-icon-good, .btn-icon.btn-icon-good { color: var(--good); }
.btn-icon-good:hover { background: var(--good-bg); color: var(--good); }
.leave-count { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding-bottom: 8px; }
.leave-count strong { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--ink-strong); line-height: 1; }
.leave-decide input { width: 190px; padding: 7px 10px; font-size: 13px; }
.leave-cal { font-size: 12.5px; table-layout: fixed; }
.leave-cal th, .leave-cal td { padding: 6px 0; text-align: center; }
.leave-cal thead th { padding: 8px 0; font-size: 10.5px; letter-spacing: .02em; }
.leave-cal thead th span { display: block; font-size: 12.5px; letter-spacing: 0; }
.leave-cal thead th.off { color: rgba(255, 255, 255, .5); }
.leave-cal thead th.today { box-shadow: inset 0 -3px 0 var(--red); }
.leave-cal .sticky-col { width: 150px; text-align: left; padding-left: 16px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leave-cal tbody td.off { background-color: var(--surface-2); }
/* Abwesenheit als Band: verbundene Tage ohne Lücke, abgerundete Enden */
.leave-mark { display: block; height: 18px; margin: 0 -1px; background: var(--navy); }
.leave-mark.is-start { margin-left: 3px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.leave-mark.is-end { margin-right: 3px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.leave-mark.is-pending { background: repeating-linear-gradient(135deg, var(--warn-bg) 0 3px, #E8B964 3px 5px) fixed; }
.leave-mark.is-half { width: 50%; }
.leave-legend .leave-mark { display: inline-block; width: 18px; margin: 0; vertical-align: middle; }
.leave-legend .leave-mark.is-half { width: 9px; border-radius: 5px 0 0 5px; }
.leave-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 16px; }
.leave-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.leave-swatch-off { display: inline-block; width: 18px; height: 18px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); }

/* Schalterzeile über den Karten: LINKS nur der Seitenschalter (.segmented), RECHTS Funktionsbuttons (rot, mit Icon)
   und seitenweite Filter. Feste Höhe 48 px, damit die Seite beim Wechsel nicht springt. Tabellenfilter gehören in den Kartenkopf. */
.page-head.row-between { min-height: 48px; align-items: center; }
.page-head.row-between label.inline-row { white-space: nowrap; }

/* Deals-Raster: Kopf bleibt beim Scrollen über den Kennzahlzeilen, breitere Stammspalten, schmalere Monate,
   Randabstände wie in allen Tabellen (16 px links/rechts, Zahlen bündig mit den Monatsköpfen) */
.sticky-table thead tr.head-row th { z-index: 5; }
.sticky-table thead tr.head-row th.sticky-col { z-index: 6; }
.grid-table thead .summary-row .sticky-col { z-index: 1; }
#order-grid tr > :first-child { padding-left: 16px; }
#order-grid tr > :last-child { padding-right: 16px; }
#order-grid td.sticky-col.wrap, #order-grid thead tr.head-row th.sticky-col { width: 300px; min-width: 300px; max-width: 300px; }
#order-grid tbody td:nth-child(2), #order-grid thead tr.head-row th:nth-child(2) { width: 162px; min-width: 162px; padding-left: 12px; padding-right: 12px; }
#order-grid tbody td:nth-child(3), #order-grid thead tr.head-row th:nth-child(3) { width: 104px; min-width: 104px; padding-right: 14px; }
#order-grid .inline-status { width: 100%; max-width: none; }
#order-grid td.month-cell { min-width: 54px; padding: 0 2px; }
#order-grid td.month-cell:last-child { padding-right: 10px; }
#order-grid .cell-input { min-width: 48px; padding: 6px 5px; }
#order-grid th.month-head { text-align: right; padding-left: 4px; padding-right: 9px; }
#order-grid th.month-head:last-child { padding-right: 17px; }
#order-grid .summary-row td { padding-left: 4px; padding-right: 9px; }
#order-grid .summary-row td:last-child { padding-right: 17px; }

/* Einheitliche Filterzeile in Tabellen-Karten: Titel links, Suche + Filter rechts */
.toolbar-filters select { width: auto; max-width: 220px; }
.toolbar-filters .search-field input[type="search"] { min-width: 240px; }
.toolbar .unit-hint { font-family: var(--body); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-secondary); text-shadow: none; margin-left: 6px; }

/* ===== Kartenkopf – verbindliche Maße für alle Karten =====
   Kopfzeile: 36 px Inhalt + 10 px Abstand zur Trennlinie. Überschrift (30 px) mittig → 21 px unter der Kartenkante
   (1 px Rand + 17 px Innenabstand + 3 px), Trennlinie 13 px unter der Überschrift, 22 px Abstand zum Inhalt.
   Bedienelemente im Kopf kompakt (36 px), damit die Überschrift überall gleich steht. */
.card:has(> .card-head:first-child), .card:has(> .toolbar:first-child),
.card:has(> form:first-child > .card-head:first-child), .card:has(> h2:first-child) { padding-top: 17px; }
.card-flush:has(> .card-head:first-child), .card-flush:has(> .toolbar:first-child), .card-flush:has(> .flush-head:first-child) { padding-top: 0; }
.card-head, .toolbar { min-height: 46px; align-items: center; }
.card > .card-head, .card > .toolbar, .card > form > .card-head:first-child, .card-flush > .card-head.card-pad { padding-bottom: 10px; margin-bottom: 22px; }
.card-flush > .card-head.card-pad:first-child { padding-top: 17px; min-height: 63px; }
.card-flush > .card-pad.flush-head { padding: 17px var(--card-pad) 0; margin-bottom: 22px; }
.card-flush > .card-pad.flush-head > .card-head { margin: 0; padding-bottom: 10px; }
.card > h2:first-child { display: flex; align-items: center; min-height: 46px; margin: 0 0 22px; padding-bottom: 10px; position: relative; }
.card > h2:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--head-line); }
/* kompakte Bedienelemente im Kopf */
:is(.card-head, .toolbar) :is(input:not([type="checkbox"]):not([type="radio"]), select) { height: 36px; padding-top: 0; padding-bottom: 0; }
:is(.card-head, .toolbar) .btn { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
:is(.card-head, .toolbar) .segmented { padding: 2px; }
:is(.card-head, .toolbar) .segmented a { padding: 7px 14px; line-height: 18px; }
/* Überschrift selbst 36 px hoch (Zeilenhöhe), damit sie auch neben umbrechenden Legenden oder Zusatzinfos gleich steht */
:is(.card-head, .toolbar) > h2 { line-height: 36px; min-height: 36px; }
/* Formular-Karten: versteckte Felder vor dem Kopf zählen nicht */
form.card:has(> .card-head:first-of-type) { padding-top: 17px; }
/* Überschriften mit eingebettetem Icon/Zusatzinfo: mittig ausrichten statt an der Grundlinie (sonst wird die Zeile höher) */
:is(.card-head, .toolbar) > h2:has(> .card-ico), :is(.card-head, .toolbar) > h2:has(> .unit-hint), .card > h2:first-child { display: flex; align-items: center; line-height: 36px; }
:is(.card-head, .toolbar) > h2 > .card-ico, .card > h2:first-child > .card-ico { display: inline-flex; align-items: center; margin-right: 10px; }
:is(.card-head, .toolbar) .segmented a { padding-top: 6px; padding-bottom: 6px; }

/* Seitenleiste: Logo so breit wie die aktive Menü-Hinterlegung; Einklapp-Icon rechtsbündig in der Zeile „Übersicht“
   (rechte Kante bündig mit Logo und aktivem Menüpunkt). In der Kopfzeile nur noch mobil. */
.sb-head { padding: 2px 0 0; justify-content: flex-start; }
.sb-brand { width: 100%; }
.sb-logo { width: 100%; height: auto; }
.sb-label-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; }
.sb-label-row .sb-label { margin: 0; }
.sb-toggle { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; margin-right: -1px; border: 0; background: transparent; color: var(--ink-secondary); cursor: pointer; border-radius: 4px; }
.sb-toggle:hover { color: var(--ink-strong); }
.sb-toggle .ico { width: 16px; height: 16px; }
.topbar-menu { display: none; }
.sb-collapsed .sb-label-row { justify-content: center; margin-top: 18px; }
.sb-collapsed .sb-label-row .sb-label { display: none; }
@media (max-width: 960px) {
  .topbar-menu { display: inline-grid; }
  .sb-toggle { display: none; }
  .sb-collapsed .sidebar .sb-label-row .sb-label { display: block; }
}

/* Heutiger Tag im Tabellenkopf: rote, abgerundete Hinterlegung mit Abstand zu den Nachbartagen */
.time-grid thead th.today, .leave-cal thead th.today { box-shadow: none; }
.day-pill { display: inline-block; border-radius: var(--r-md); }
.time-grid thead .day-pill { padding: 6px 9px; margin: -6px -9px -6px 0; }
.leave-cal thead .day-pill { padding: 4px 3px; margin: -4px 0; min-width: 24px; }
thead th.today .day-pill { background: var(--red); color: #fff; }
thead th.today .day-pill .muted, thead th.today .day-pill span { color: #fff; opacity: 1; }

/* Zeitraum-Navigation (Woche/Monat) wie die Jahresauswahl: ‹ KW 43 › – „Heute“ nur, wenn ein anderer Zeitraum angezeigt wird */
.year-select a { color: var(--ink-secondary); width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; }
.year-select a:hover { background: var(--surface-2); color: var(--ink-strong); }
:is(.card-head, .toolbar) .period-nav { padding: 1px; }
.period-nav strong { min-width: 74px; text-align: center; }

/* Zeile „Zeile hinzufügen“ geht über die ganze Breite: keine Trennkante der festen ersten Spalte */
.time-grid tr.time-add-row .sticky-col { box-shadow: none; position: static; }

/* Zeiterfassung: Projektname fett */
.time-grid .cell-main, #page-zeit .cell-main, .time-entries .cell-main { font-weight: 700; }

/* Kunden-Logos: Favicon statt Initialen, volles Logo auf der Kundenseite */
.feed .feed-ico.has-logo, .customer-ico.has-logo { background: #fff; border: 1px solid var(--border); padding: 6px; }
.feed-ico.has-logo img, .customer-ico.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.customer-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--tint); color: var(--ink-strong); display: inline-grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; box-sizing: border-box; }
.customer-logo { height: 40px; max-width: 200px; object-fit: contain; display: block; }
.customer-logo-lg { height: 56px; max-width: 260px; }
.logo-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.logo-label { font-size: 13px; font-weight: 600; color: var(--ink-strong); margin-bottom: 10px; }
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 56px; }
.logo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo-actions label.btn { cursor: pointer; flex-direction: row; font-size: 13px; color: var(--ink-strong); }
.logo-empty { display: inline-grid; place-items: center; height: 56px; padding: 0 18px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--ink-muted); font-size: 13px; }
@media (max-width: 1100px) { .logo-grid { grid-template-columns: minmax(0, 1fr); } }
/* Kundenliste: Icon vor dem Namen */
.cust-cell { display: flex; align-items: center; gap: 12px; }
.customer-ico-sm { width: 32px; height: 32px; font-size: 12px; }
.customer-ico-sm.has-logo { padding: 5px; }
.table td.wrap:has(> .cust-cell) { min-width: 260px; }
/* flächiges Kunden-Icon: Ecken leicht gerundet (3 px), Größe und Abstand unverändert */
.has-logo.is-flat img { border-radius: 3px; }

/* Kundenlogo einfarbig in CI-Navy (im Dunkelmodus automatisch hell): Logo als Maske über der Titelfarbe */
.logo-tint { position: relative; display: inline-block; flex: none; }
.logo-tint img { display: block; height: 100%; width: auto; max-width: inherit; visibility: hidden; }
.logo-tint::after { content: ""; position: absolute; inset: 0; background: var(--ink-strong);
  -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }

/* Kunden-Icons einheitlich in CI-Navy (Duoton: dunkel → Navy, hell → Weiß); die gespeicherten Favicons bleiben farbig */
.has-logo img { filter: url(#ffx-duotone); }

/* Kunden-Icon ohne Kachel: bei vorhandenem Icon füllt es die Fläche der Kachel (kein Rahmen, kein Innenabstand) */
.feed .feed-ico.has-logo, .customer-ico.has-logo { background: transparent; border: 0; padding: 0; }
.feed .feed-ico.has-logo img, .customer-ico.has-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Weiße Icon-Hintergründe übernehmen die Farbe des Untergrunds (Hover, Gruppenzeilen) – Navy bleibt Navy */
.feed .feed-ico.has-logo img, .customer-ico.has-logo img { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .has-logo img { mix-blend-mode: normal; } }
/* Kunden-Icons in Dashboard-Listen so groß wie in der Kundenliste (32 px) – wirkt ruhiger */
.feed .feed-ico { width: 32px; height: 32px; font-size: 12px; }
/* Kundennamen in Dashboard-Listen als Link (wie Kundenliste) */
.feed .feed-title a.cell-main { color: inherit; font-weight: inherit; }
.feed .feed-title a.cell-main:hover { color: var(--red); }

/* Kopfzeile: Kundenlogo weiß auf Navy neben dem Firmennamen */
.title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.title-logo { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-md); background: var(--navy); flex: none; }
.title-logo .title-logo-img { height: 20px; max-width: 180px; }
.title-logo .logo-tint::after { background: #fff; }
/* Laufendes Jahr wie eine Hover-Zeile: abgerundet, angrenzende Trennlinien ausgeblendet */
.year-table tbody tr.row-current > :first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.year-table tbody tr.row-current > :last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.year-table tbody tr.row-current > *, .year-table tbody tr:has(+ tr.row-current) > * { border-bottom-color: transparent; }
/* Eingeklappte Seitenleiste: FALCONFOX-Icon mittig über den Menü-Icons */
.sb-collapsed .sb-brand { width: auto; justify-content: center; }
.sb-collapsed .sb-head { justify-content: center; }

/* Urlaubsfarben: genehmigt Dunkelgelb, beantragt gelb schraffiert, Feiertag Flieder, Wochenende Hellgrau */
:root { --leave-ok: #D19A10; --leave-pend-a: #FBEFD5; --leave-pend-b: #E8B964; --leave-hol: #E9E2F6; --leave-hol-ink: #CDBEF0; --leave-we: var(--surface-2); }
.leave-mark { background: var(--leave-ok); }
.leave-mark.is-pending { background: repeating-linear-gradient(135deg, var(--leave-pend-a) 0 3px, var(--leave-pend-b) 3px 5px) fixed; }
.leave-cal tbody td.we { background-color: var(--leave-we); }
.leave-cal tbody td.hol { background-color: var(--leave-hol); }
.leave-cal thead th.hol { color: var(--leave-hol-ink); }
.leave-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); }
.leave-swatch-we { background: var(--leave-we); }
.leave-swatch-hol { background: var(--leave-hol); border-color: #D9CFF0; }

/* Jahresband: Personen als Zeilen, 365 Tage nebeneinander, Bilanz rechts */
.leave-year { min-width: 980px; font-size: 13px; }
.ly-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 220px; align-items: center; gap: 0 16px; padding: 7px 0; border-bottom: 1px solid var(--grid); }
.ly-row:last-child { border-bottom: 0; }
.ly-name { padding-left: 16px; font-weight: 500; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ly-days { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); height: 22px; }
.ly-days > i { display: block; height: 100%; }
.ly-days > i.we { background: var(--leave-we); }
.ly-days > i.hol { background: var(--leave-hol); }
.ly-days > i.ok { background: var(--leave-ok); }
.ly-days > i.half { background: linear-gradient(90deg, var(--leave-ok) 50%, transparent 50%); }
.ly-days > i.pend { background: repeating-linear-gradient(135deg, var(--leave-pend-a) 0 2px, var(--leave-pend-b) 2px 4px) fixed; }
.ly-days > i.mstart { box-shadow: inset 1px 0 0 var(--border-strong); }
.ly-days > i.today { box-shadow: inset 2px 0 0 var(--red); }
.ly-sum { display: grid; grid-template-columns: repeat(3, 1fr); text-align: right; padding-right: 16px; font-variant-numeric: tabular-nums; }
/* Kopf: Monate (Navy-Leiste) und Kalenderwochen darunter */
.ly-head { border-bottom: 0; padding: 0; }
.ly-head:not(.ly-weeks) { background: var(--table-head); color: #fff; border-radius: var(--r-md); padding: 11px 0; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ly-head:not(.ly-weeks) .ly-name { color: #fff; font-weight: 600; }
.ly-head .ly-days { height: auto; }
.ly-head:not(.ly-weeks) .ly-days a { color: #fff; text-align: center; border-left: 1px solid rgba(255,255,255,.18); }
.ly-head:not(.ly-weeks) .ly-days a:first-child { border-left: 0; }
.ly-head:not(.ly-weeks) .ly-days a:hover { color: var(--sred); }
.ly-head:not(.ly-weeks) .ly-sum span { font-size: 11px; }
.ly-weeks { padding: 4px 0 6px; border-bottom: 1px solid var(--grid); }
.ly-weeks .ly-name { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-secondary); }
.ly-weeks .ly-days span { text-align: center; font-size: 10.5px; color: var(--ink-muted); border-left: 1px solid var(--grid); line-height: 18px; }
.ly-weeks .ly-days span.is-now { color: #fff; background: var(--red); border-radius: 5px; border-left-color: transparent; font-weight: 600; }
/* Jahresband – Feinschliff: breitere Bilanz-Spalte, ruhigere KW-Zeile */
.ly-row { grid-template-columns: 170px minmax(0, 1fr) 270px; }
.ly-sum { gap: 0 14px; }
.ly-head:not(.ly-weeks) .ly-sum span { font-size: 10.5px; letter-spacing: .04em; }
.ly-weeks .ly-days span { font-size: 10px; border-left-color: var(--border); }
.ly-days > i.mstart.ok, .ly-days > i.mstart.pend, .ly-days > i.mstart.half { box-shadow: none; }

/* Jahresband: KW-Zeile ohne Trennstriche, Zahlen zentriert und frei überstehend, aktuelle KW als roter Pill */
.ly-weeks .ly-days span { border-left: 0; display: flex; justify-content: center; overflow: visible; white-space: nowrap; min-width: 0; }
.ly-weeks .ly-days span b { font-weight: 500; }
.ly-weeks .ly-days span.is-now { background: none; color: inherit; }
.ly-weeks .ly-days span.is-now b { position: relative; z-index: 1; color: #fff; background: var(--red); border-radius: 9px; padding: 0 6px; font-weight: 600; }

/* Urlaub: Jahr in Wochen – Box je KW mit Kürzel, Zeitraum und Tagen der Abwesenden */
.leave-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding-bottom: 18px; }
.lwk { display: flex; flex-direction: column; gap: 4px; min-height: 74px; padding: 8px 10px 9px; border: 1px solid var(--border); border-radius: var(--r-md); background-color: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.lwk:hover { border-color: var(--head-line); background-color: var(--row-hover); text-decoration: none; }
.lwk.is-past { background-color: var(--surface-2); }
.lwk.is-past .lwk-head, .lwk.is-past .lwk-row { opacity: .7; }
.lwk.is-month { border-color: var(--head-line); }
.lwk.is-now { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.lwk-head { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--ink-muted); margin-bottom: 2px; white-space: nowrap; }
.lwk-head b { font-weight: 600; color: var(--ink-strong); letter-spacing: .02em; }
.lwk.is-now .lwk-head b { color: #fff; background: var(--red); border-radius: 9px; padding: 0 6px; }
.lwk-head em { font-style: normal; font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); }
.lwk-head > span { margin-left: auto; font-variant-numeric: tabular-nums; }
.lwk-row { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; min-width: 0; white-space: nowrap; }
.lwk-row i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background-color: var(--leave-ok); }
.lwk-row i.pend { background: repeating-linear-gradient(135deg, var(--leave-pend-a) 0 2px, var(--leave-pend-b) 2px 4px); }
.lwk-row b { font-weight: 700; color: var(--ink-strong); min-width: 20px; }
.lwk-row > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.lwk-row small { flex: 0 0 auto; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lwk-hol i { background-color: var(--leave-hol-ink); }
.lwk-hol > span { color: var(--ink-muted); }

/* Deal-Verlauf: Retainer mit Angebot verknüpfen */
.offer-link { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; }
.offer-link select { width: 340px; max-width: 100%; text-overflow: ellipsis; }

/* Live-Filter: Karte kurz abgeblendet, solange die Treffer geladen werden */
.card.is-loading > :not(.toolbar):not(form) { opacity: .55; transition: opacity .15s; }
/* Retainer: Platz für das längste Status-Badge („gekündigt“ plus Phase), damit die Spalten beim Ein-/Ausblenden beendeter Verträge stehen bleiben */
.table th.col-status { min-width: 128px; }

/* Einstellungen → Darstellung */
.theme-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 32px; }
.theme-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-secondary); margin: 6px 0 8px; }
.theme-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.theme-row input[type="color"] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; flex: none; }
.theme-label { flex: 1; font-size: 14px; }
.theme-label .sub { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.theme-row.is-changed .theme-label { font-weight: 600; }
.theme-groups > .theme-col { min-width: 0; }
.theme-col .theme-group + .theme-group { margin-top: 18px; }
.theme-preview { min-width: 0; }
.theme-preview .theme-preview-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-secondary); margin: 6px 0 8px; }
.table tbody tr.theme-preview-hover > td { background-color: var(--row-hover); }

/* Kundenseite: Forderung ausbuchen */
.write-off-form { justify-content: flex-end; flex-wrap: nowrap; }
.write-off-form input[type="date"] { width: 140px; }
.write-off-form input[type="text"] { width: 180px; }

/* Deals: erste Spalte ohne abgeschnittene Infos – Titel bis zwei Zeilen, Infozeile bricht um */
#order-grid td.deal-cell .cell-main { white-space: normal; }
#order-grid td.deal-cell .deal-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#order-grid td.deal-cell .deal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font-size: 12.5px; color: var(--ink-muted); white-space: normal; }
#order-grid td.deal-cell .deal-meta .tag { font-size: 11.5px; padding: 1px 7px; }

/* Deal-Detail: Angebotsauswahl mit Stift-Symbol zum Entsperren */
.offer-field { display: flex; align-items: center; gap: 6px; }
.offer-field select { flex: 1; min-width: 0; }

.w-accounts { width: 150px; }

/* Einstellungen → Kostenarten: gruppiert (Gruppenzeilen im Standardstil), Formularzeilen ohne Auswahl-Hinterlegung */
.cost-cats .group-row .group-count { font-weight: 500; color: var(--ink-muted); margin-left: 6px; letter-spacing: 0; }
.cost-cats tbody tr:not(.group-row) td:first-child { padding-left: 20px; }
.cost-cats td.c, .cost-cats th.c { text-align: center; }
.cost-cats input[name="name"] { width: 200px; }
.cost-cats select[name="guv_position"] { width: 180px; }
.cost-cats .btn-icon-save { color: var(--btn-save); }
.ocat-table .btn-icon-save { color: var(--btn-save); }
.ocat-table input[name="name"] { width: 220px; }
.ocat-table td:last-child { width: 1%; }
.cost-cats .w-accounts { width: 125px; }
.act-cats td:first-child input { width: 280px; }
.act-cats select { width: 220px; }
.w-group { width: 135px; }

/* Kosten: Forecast-Monate kursiv, Vertragswerte über Plan markiert */
.cost-table td.fc-cell, span.fc-cell { font-style: italic; color: var(--ink-secondary); }
.cost-table td.fc-contract, span.fc-contract { color: var(--info); font-weight: 600; }

/* Plankosten: Festschreiben und Planungsassistent */
.plan-lock { display: flex; align-items: center; gap: 8px; }
.plan-assistant > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: var(--font-display, inherit); font-size: 18px; font-weight: 700; list-style: none; }
.plan-assistant > summary::-webkit-details-marker { display: none; }
.plan-assistant[open] > summary { margin-bottom: 12px; }
.plan-choice { justify-content: flex-end; gap: 6px; font-weight: 500; }

/* Einschalt-Effekt nach dem Login: wie ein Röhrenfernseher – Lichtpunkt, horizontale Linie, dann öffnet sich das Bild von der Mitte */
html.boot-fx, html.boot-fx body { background: #0C1626; overflow: hidden; }
html.boot-fx { scrollbar-gutter: stable; } /* Platz der Scrollbar freihalten, damit der Inhalt nach dem Effekt nicht springt */
html.boot-fx .app { background: var(--page); animation: crt-on 2.2s cubic-bezier(.22,.8,.25,1) 1.8s both; transform-origin: 50% 50%; }
.boot-fx-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.boot-fx-layer::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #fff;
  box-shadow: 0 0 12px 3px rgba(190,220,255,.9), 0 0 50px 10px rgba(120,170,255,.45); animation: crt-line 2.2s ease-out 1.8s both; }
.boot-fx-layer::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
  animation: crt-scan 2.8s ease-out 1.8s both; }
@keyframes crt-on {
  0%   { clip-path: inset(50vh 50% calc(100% - 50vh) 50%); filter: brightness(5) saturate(0); }
  20%  { clip-path: inset(calc(50vh - 1px) 0 calc(100% - 50vh - 1px) 0); filter: brightness(5) saturate(0); }
  32%  { clip-path: inset(calc(50vh - 1px) 0 calc(100% - 50vh - 1px) 0); filter: brightness(4) saturate(0); }
  62%  { clip-path: inset(0 0 calc(100% - 100vh) 0); filter: brightness(1.8) saturate(.5) contrast(1.1); }
  72%  { filter: brightness(.85) saturate(.9); }
  80%  { filter: brightness(1.25); }
  99%  { clip-path: inset(0 0 calc(100% - 100vh) 0); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes crt-line {
  0%   { transform: scaleX(0); opacity: 0; }
  3%   { opacity: 1; }
  20%  { transform: scaleX(1); opacity: 1; }
  34%  { transform: scaleX(1) scaleY(1); opacity: 1; }
  55%  { transform: scaleX(1) scaleY(30); opacity: 0; }
  100% { opacity: 0; }
}
/* Vorher: Logo mittig auf dunkelblauem Grund ein- und wieder ausblenden, danach zieht das Bild auf */
.boot-fx-logo { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(300px, 60vw); transform: translate(-50%, -50%);
  animation: crt-logo 1.6s ease-in-out both; }
@keyframes crt-logo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}
@keyframes crt-scan { 0% { opacity: 0; } 3%, 45% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.boot-fx .app, .boot-fx-layer::before, .boot-fx-layer::after, .boot-fx-logo { animation: none; }
  .boot-fx-layer { display: none; }
}

/* Einstellungen: Reiter und Abschnitte im Reiter „Personal & Zeit“ */
.settings-tabs { flex-wrap: wrap; }
.settings-section { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; font-size: 20px; color: var(--ink-strong); }
.settings-section:first-of-type { margin-top: 4px; }
.settings-section svg { color: var(--ink-muted); }
.form-subhead { margin: 10px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.settings-link { gap: 6px; }
.grid-top { align-items: start; }
.fold-card > summary { align-items: center; }
.fold-card > summary strong { font-family: var(--font-display, inherit); font-size: 18px; }
.fold-card[open] > summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.tax-total { margin: 4px 0 0; }

/* Aufklappbare Karten: Pfeil rechts, dreht sich beim Öffnen */
.fold-card > summary .fold-chevron { margin-left: auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-md); color: var(--ink-muted); transition: transform .2s ease, background-color .2s ease; }
.fold-card > summary:hover .fold-chevron { background: var(--row-hover); color: var(--ink-strong); }
.fold-card[open] > summary .fold-chevron { transform: rotate(180deg); }
.fold-card > summary { flex-wrap: wrap; row-gap: 4px; }
.fold-card > summary .fold-chevron { order: 2; }
.fold-card > summary .muted { order: 3; flex: 1 1 100%; padding-left: 40px; }

/* Dialog (z. B. Bearbeiten in Tabellen) */
dialog.modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--r-lg, 14px); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(12, 22, 38, .28); }
dialog.modal::backdrop { background: rgba(12, 22, 38, .45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .fold-card > summary .fold-chevron { transition: none; } }

/* Anmeldung mit zweitem Faktor */
.auth-card-wide { max-width: 520px; }
.code-input { font-family: var(--mono, monospace); font-size: 22px; letter-spacing: .18em; text-align: center; }
.setup-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.setup-steps li { padding-left: 4px; }
.totp-setup { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.totp-qr { width: 168px; height: 168px; flex: none; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; }
.totp-qr svg { width: 100%; height: 100%; display: block; }
.totp-setup > div:last-child { display: grid; gap: 4px; min-width: 0; }
.totp-secret { font-family: var(--mono, monospace); font-size: 14px; word-break: break-all; padding: 6px 8px; background: var(--tint, #F1F4F8); border-radius: 6px; }
.recovery-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.recovery-codes code { display: block; text-align: center; font-family: var(--mono, monospace); font-size: 15px; padding: 8px; background: var(--tint, #F1F4F8); border-radius: 6px; letter-spacing: .06em; }
.auth-help summary { cursor: pointer; color: var(--link, var(--ink-secondary)); font-size: 13px; }
.auth-help p { margin-top: 6px !important; }

/* Mobil: Kartenüberschriften dürfen umbrechen statt über den Rand zu ragen */
@media (max-width: 600px) {
  .card-head h2 { flex: 1 1 auto; min-width: 0; font-size: 22px; overflow-wrap: anywhere; }
  /* Reiter-Schalter: Beschriftung einzeilig, bei Bedarf seitlich wischen */
  .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented a { white-space: nowrap; flex: none; }
  .page-head { min-width: 0; }
  /* Teamkalender (Monat): feste Mindestbreite je Tag, die Tabelle wird seitlich gewischt; Personenspalte schmaler */
  .leave-cal { min-width: calc(110px + 31 * 30px); }
  .leave-cal .sticky-col { width: 110px; padding-left: 10px; }
}

/* Tabellenkopf als erhabene Leiste (3D): leichter Verlauf, Lichtkante oben, dunklere Kante unten und weicher Schatten
   darunter – je Zelle, damit der Schatten den runden Ecken folgt (vom Nutzer so abgenommen).
   Kein filter auf thead (würde fixierte Spalten/Kopfzeilen und die Summenzeilen der Deal-Tabelle stören). */
.table {
  --thead-relief: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 48%, rgba(0, 0, 0, .14) 100%);
  --thead-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 2px 2px rgba(21, 38, 62, .18), 0 5px 9px rgba(21, 38, 62, .20);
}
:root[data-theme="dark"] .table { --thead-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 2px 2px rgba(0, 0, 0, .45), 0 5px 9px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .table { --thead-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 2px 2px rgba(0, 0, 0, .45), 0 5px 9px rgba(0, 0, 0, .5); } }
.table thead tr:first-child > th { background-image: var(--thead-relief); box-shadow: var(--thead-shadow); }

/* Hinweistext direkt unter einem Kartenraster: rückt an das Raster heran, darunter normaler Kartenabstand */
.section-note { margin: -14px 0 28px; }
.actions .actions-end { margin-left: auto; }

/* Aktiver Filter als entfernbares Etikett */
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--ink-strong); font-size: 13px; text-decoration: none; }
.filter-chip:hover { color: var(--red); }
/* Spalte „sevdesk“: Knopf öffnet die Rechnung in sevdesk */
.table .col-sd { width: 1%; white-space: nowrap; text-align: center; }
.sd-open img { display: block; border-radius: 4px; transition: transform .15s ease; }
.sd-open:hover img { transform: scale(1.12); }

/* Kartentitel, ruhiger: etwas kleiner, ohne Prägeschatten; Symbol als navyblaues Plättchen im 3D-Stil des
   Tabellenkopfs; Trennlinie blendet nach rechts aus */
.card-head h2, .toolbar h2, .card > h2 { font-size: 21px; letter-spacing: .015em; text-shadow: none !important; }
.card-head > .card-ico, h2 > .card-ico, .fold-card > summary > .card-ico {
  display: inline-grid; place-items: center; flex: none; width: 32px; min-width: 32px; height: 32px; margin: 0 2px 0 0; border-radius: 9px;
  color: #fff; background-color: var(--table-head); background-image: var(--plate-relief);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .28); /* Relief ja, Schlagschatten nein */
}
h2 > .card-ico { margin-right: 10px; vertical-align: middle; position: relative; top: -2px; }
.card-head > .card-ico .ico, h2 > .card-ico .ico, .fold-card > summary > .card-ico .ico { width: 17px !important; height: 17px !important; min-width: 17px; stroke-width: 2; filter: none; }
:root { --plate-relief: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 50%, rgba(0, 0, 0, .16) 100%); }
.card > .card-head::after, .card > .toolbar::after, .card > form > .card-head:first-child::after,
.card-flush > .card-head.card-pad::after, .flush-head::after, .card > h2:first-child::after {
  height: 1px;
  background: linear-gradient(90deg, var(--head-line), rgba(169, 184, 202, 0) 85%);
}
.card-head > .card-ico, h2 > .card-ico, .fold-card > summary > .card-ico { position: relative; overflow: visible; }
:is(.card-head, .toolbar) > h2 > .card-ico, .card > h2:first-child > .card-ico { justify-content: center; align-items: center; top: 0; }
.fold-card > summary strong { font-size: 19px; letter-spacing: .015em; }
.fold-card > summary .muted { padding-left: 44px; }
/* Aufklappbare Karte: Symbol | Titel | Pfeil in einer Zeile, Hinweistext darunter */
.fold-card > summary { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; }
.fold-card > summary > .card-ico { grid-column: 1; grid-row: 1; }
.fold-card > summary > strong { grid-column: 2; grid-row: 1; min-width: 0; }
.fold-card > summary > .fold-chevron { grid-column: 3; grid-row: 1; margin-left: 0; }
.fold-card > summary > .muted { grid-column: 2 / 4; grid-row: 2; padding-left: 0; }

/* Karten und Kennzahl-Kacheln heben sich beim Überfahren leicht an (nur mit Maus; ohne Bewegung bei „Bewegung reduzieren“) */
@media (hover: hover) {
  .card, .kpi { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .card:hover, .kpi:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 2px 4px rgba(21, 38, 62, .05), 0 10px 24px rgba(21, 38, 62, .10); }
  .card .card, .card .kpi { transform: none !important; box-shadow: none !important; }
}
@media (hover: hover) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.card, .kpi):hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] :is(.card, .kpi):hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .card:hover, .kpi:hover { transform: none; } }

/* Dashboard „Handlungsbedarf“ oben rechts neben dem Kennzahlen-Panel; Einträge untereinander mit feiner Linie
   wie die übrigen Listen. */
.action-card { display: flex; flex-direction: column; }
.action-list { list-style: none; margin: -6px 0 0; padding: 0; }
.action-list li { border-bottom: 1px solid var(--grid); }
.action-list li:last-child { border-bottom: 0; }
.action-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; color: var(--ink); text-decoration: none; }
.action-item:hover { text-decoration: none; }
.action-item:hover .action-title { color: var(--red); }
.action-ico { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); }
.tone-bad .action-ico { background: var(--bad-bg); color: var(--bad); }
.tone-warn .action-ico { background: var(--warn-bg); color: var(--warn); }
.tone-info .action-ico { background: var(--info-bg); color: var(--info); }
.action-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.action-title { font-weight: 500; color: var(--ink-strong); transition: color .15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-sub { font-size: 13px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.tone-bad .action-val { color: var(--bad); }
.action-go { flex: none; color: var(--ink-muted); display: inline-flex; }
.action-empty { display: flex; align-items: center; gap: 8px; margin: 0; }
.action-empty .ico { color: var(--good); }
@media (min-width: 1281px) {
  /* bis zu sechs Punkte ohne Scrollen; das Kennzahlen-Panel wächst mit (Felder bleiben vertikal mittig) */
  .dash-top > .action-card .action-list { max-height: 336px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
}
.card[id] { scroll-margin-top: 96px; } /* Sprungziele aus „Handlungsbedarf“ nicht unter der Kopfzeile */

/* Kennzahlen-Panel oben links: acht Werte in einer Karte, je Thema eine Zeile (Thema | Wert | Wert),
   getrennt nur durch feine Linien – keine Box in Box */
.kpi-panel { display: flex; flex-direction: column; padding: 4px 0; }
.kpi-group { flex: 1; display: grid; grid-template-columns: 172px minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.kpi-group + .kpi-group { border-top: 1px solid var(--grid); }
.kpi-group-title { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 14px 14px 14px 24px; }
.kpi-group-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--tint); color: var(--ink-strong); }
.kpi-group-ico .ico { width: 20px; height: 20px; }
.kpi-group-title h2 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .015em; line-height: 1.1; color: var(--ink-strong); }
.kpi-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 22px; min-width: 0; border-left: 1px solid var(--grid); }
.kpi-cell-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.kpi-cell-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-cell-head .pill { flex: none; }
.kpi-cell-value { font-family: var(--body); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.kpi-cell .kpi-sub { margin: 0; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 720px) {
  .kpi-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi-group-title { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; padding: 14px 18px 0; }
  .kpi-group-ico { width: 38px; height: 38px; }
  .kpi-cell { padding: 8px 18px 12px; }
  .kpi-cell:nth-child(2) { border-left: 0; }
}
@media (max-width: 420px) {
  .kpi-group { grid-template-columns: minmax(0, 1fr); }
  .kpi-cell { border-left: 0; }
  .kpi-cell + .kpi-cell { border-top: 1px dashed var(--grid); }
}
/* Erste Zeile (Umsatz) als Anker: navyblau mit weißer Schrift wie früher die Hauptkachel */
.kpi-panel { padding: 0; overflow: hidden; }
.kpi-group.kpi-hero { background: var(--navy); color: #D3DCE8; }
.kpi-group.kpi-hero + .kpi-group { border-top: 0; }
.kpi-hero .kpi-cell { border-left-color: rgba(255, 255, 255, .12); }
.kpi-hero .kpi-group-title h2, .kpi-hero .kpi-cell-value { color: #fff; }
.kpi-hero .kpi-group-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.kpi-hero .kpi-cell-label { color: #E3EAF3; }
.kpi-hero .kpi-sub { color: #C2D0DF; }
@media (max-width: 420px) { .kpi-hero .kpi-cell + .kpi-cell { border-top-color: rgba(255, 255, 255, .12); } }
.kpi-group:not(.kpi-hero) .kpi-group-title h2 { font-size: 18px; white-space: nowrap; } /* „Kosten & Ergebnis“ ohne Umbruch */
/* Dashboard: „Umsatz & Kosten je Monat“ füllt die Höhe der Zielerreichung (kein Weißraum unten); Zielerreichung kompakter */
.card.dash-monthly > .chart-box { flex: 1 1 0; height: auto; min-height: 280px; }
.dash-goal .donut-wrap { height: 230px; }
/* Legende der Zielerreichung als 2 × 2 unter dem Donut: Prozent-Plättchen, daneben Bezeichnung und Betrag untereinander */
.stat-list.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
.stat-grid li { align-items: center; gap: 8px; min-width: 0; }
.stat-grid .stat-pct { min-width: 42px; }
.stat-grid .stat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.stat-grid .stat-txt > span { font-size: 13px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid .stat-txt b { margin-left: 0; font-size: 15px; }
/* Ist die Zielerreichung breit genug (große Bildschirme oder einspaltig unter 1280 px), stehen alle vier Legendenpunkte nebeneinander */
.card.dash-goal { container-type: inline-size; }
@container (min-width: 500px) {
  .stat-list.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; }
  .stat-grid .stat-txt b { font-size: 14px; }
}
.stat-grid .stat-txt b { white-space: nowrap; }
.sub.tone-info { color: var(--info); }
/* Zahl mit Einheit in einem Feld, z. B. Kündigungsfrist „1 | Monate“ */
.input-unit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.input-unit select { width: 100%; }

/* Plankosten: Verträge je Kostenart (aufklappbar) */
.contract-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border: 0; border-radius: 999px; background: var(--info-bg); color: var(--info);
  font: 600 11.5px/1.5 var(--body); cursor: pointer; white-space: nowrap; vertical-align: middle; }
.contract-toggle.is-open-question { background: var(--warn-bg); color: var(--warn); }
.contract-toggle .ico { transition: transform .15s ease; }
.contract-toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.cost-table tr.contract-sub td { background: var(--tint); color: var(--ink-secondary); font-size: 12.5px; }
.cost-table tr.contract-sub .contract-name { padding-left: 28px; }
.cost-table tr.contract-sub .contract-name a { color: var(--ink-secondary); }
.cost-table tr.plan-total-row td { font-weight: 600; color: var(--ink-strong); }
.cost-table tr.contract-question td { white-space: normal; }
.cost-table tr.contract-question form { margin-left: 8px; }
.cost-table .contract-question-box { position: sticky; left: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: min(860px, 70vw); }
.cost-table tr.contract-question form { margin-left: 0; }
/* Donut: Tooltip (im Canvas) liegt über dem Text in der Mitte statt darunter */
.donut-wrap canvas { position: relative; z-index: 1; }
.donut-center { z-index: 0; }

/* Meldungen und Sicherheitsabfragen als Dialog (ersetzt Browser-confirm/-alert) */
dialog.modal.ff-dialog { width: min(460px, calc(100vw - 32px)); padding: 24px; }
.ff-dialog-body { display: flex; gap: 16px; align-items: flex-start; }
.ff-dialog-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 700 20px/1 var(--display); background: var(--info-bg); color: var(--info); }
.ff-dialog-warn .ff-dialog-ico { background: var(--warn-bg); color: var(--warn); }
.ff-dialog-danger .ff-dialog-ico { background: var(--bad-bg); color: var(--bad); }
.ff-dialog h2 { margin: 2px 0 6px; font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--ink-strong); }
.ff-dialog p { margin: 0; color: var(--ink-secondary); line-height: 1.5; white-space: pre-line; }
.ff-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.btn-danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger-solid:hover { filter: brightness(1.08); color: #fff; }
dialog.modal.ff-dialog[open] { animation: ff-dialog-in .16s ease-out; }
@keyframes ff-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.modal.ff-dialog[open] { animation: none; } }

/* Angebote ↔ Rechnungen: Angebote ohne passende Rechnung eingeklappt */
.offers-rest > summary { list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.offers-rest > summary::-webkit-details-marker { display: none; }
.offers-rest > summary .fold-chevron { display: inline-flex; color: var(--ink-muted); transition: transform .15s ease; }
.offers-rest[open] > summary .fold-chevron { transform: rotate(180deg); }

/* Angebote ↔ Rechnungen: Überschrift der Angebotsliste (keine eigene Karte), bleibt beim Scrollen unter der Kopfzeile stehen */
.offers-head { position: sticky; top: var(--offers-head-top, 104px); z-index: 20; margin: 0 -4px 16px; padding: 10px 4px 12px; background: var(--page); }
.offers-head .card-head { margin-bottom: 0; }
.offers-head .card-head h2 { font-size: 24px; }
@media (max-width: 760px) { .offers-head { position: static; } }

/* Angebote ↔ Rechnungen: eine Karte mit Kopf; je Angebot eine übergeordnete Position (hinterlegt), darunter Storno und Rechnungen */
.offer-block + .offer-block { margin-top: 26px; }
.offers-rest .offer-block:first-of-type { margin-top: 18px; }
.offer-pos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--tint); }
.offer-pos > label.check { margin-right: auto; }
.offer-pos .cell-main { font-weight: 600; }
.offers-card > .offers-actions { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--grid); justify-content: flex-end; }

/* Einstellungen → Schnittstellen: vier Status-Karten nebeneinander, Sync-Protokoll einzeilig (Klick zeigt alle Zeilen) */
@media (max-width: 1500px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-4 { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 20px; } }
.grid-4 .kv { grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; }
.sync-log td:last-child { max-width: 0; width: 100%; }
.sync-log summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sync-log details[open] summary { white-space: normal; }
.voucher-setting { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 10px; text-align: left; }
.voucher-setting label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: 13px; color: var(--ink-secondary); flex: 1 1 160px; }
.search-field .search-check { display: inline-flex; width: auto; margin-left: 14px; white-space: nowrap; cursor: pointer; }
.search-field .search-check input { width: auto; min-width: 0; padding: 0; }

/* Kartentitel: Zusatz in kleiner Schrift (Anzahl, Summe …) bündig mit der Grundlinie der Überschrift; das Symbol bleibt mittig */
:is(.card-head, .toolbar) > h2:has(> .card-ico), :is(.card-head, .toolbar) > h2:has(> .unit-hint), .card > h2:first-child { align-items: baseline; }
:is(.card-head, .toolbar) > h2 > .card-ico, .card > h2:first-child > .card-ico { align-self: center; }
:root { --title-hint-lift: 1px; } /* Zusatz etwas über der Grundlinie – hier zentral anpassen */
h2 > .unit-hint { position: relative; top: calc(-1 * var(--title-hint-lift)); }
/* im Flex-Titel fällt das Leerzeichen vor dem Zusatz weg – Abstand daher fest */
:is(.card-head, .toolbar) > h2 > .unit-hint, .card > h2:first-child > .unit-hint { margin-left: 8px; }

/* Zeiterfassung: Projekt anlegen mit dem Angebot daneben (2/3 Formular, 1/3 Angebot) */
.project-with-offer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 28px; }
.project-with-offer > .card { margin-bottom: 0; }
.offer-panel { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
.offer-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.offer-positions { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: pos; }
.offer-positions > li { padding: 12px 0; border-top: 1px solid var(--grid); }
.offer-positions > li.is-optional { opacity: .7; }
.offer-pos-head { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-strong); }
.offer-hours { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 6px 10px; border-radius: var(--r-md); background: var(--tint); font-size: 13px; }
.offer-text { margin-top: 8px; font-size: 13px; }
.offer-text > summary { cursor: pointer; color: var(--link, var(--ink-secondary)); font-weight: 600; }
.offer-html { margin-top: 6px; color: var(--ink-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.offer-html p { margin: 0 0 6px; }
.offer-html ul, .offer-html ol { margin: 0 0 6px; padding-left: 18px; }
.offer-sum { display: flex; justify-content: space-between; padding: 10px 0 0; border-top: 1px solid var(--grid); margin-top: 4px; }
input.is-filled { box-shadow: 0 0 0 3px var(--good-bg); border-color: var(--good); transition: box-shadow .2s; }
dialog.modal.pdf-layer { width: min(1000px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
dialog.modal.pdf-layer:not([open]) { display: none; }
.pdf-layer-head { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--grid); }
.pdf-layer iframe { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 1100px) { .project-with-offer { grid-template-columns: minmax(0, 1fr); } .offer-panel { position: static; max-height: none; } }
.offer-show { display: none; }
.project-with-offer.offer-hidden { grid-template-columns: minmax(0, 1fr); }
.project-with-offer.offer-hidden > .offer-panel { display: none; }
.project-with-offer.offer-hidden .offer-show { display: inline-flex; }


/* Zeiterfassung: Notiz je Zelle im Wochenraster */
.time-grid .cell-wrap { position: relative; display: inline-block; }
.cell-note { position: absolute; top: 50%; left: -20px; transform: translateY(-50%); display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; border-radius: 4px; color: var(--baseline); cursor: pointer; opacity: 0; transition: opacity .12s; }
.cell-note[hidden] { display: none; }
.time-grid td:hover .cell-note, .cell-note:focus-visible, .cell-note.has-note { opacity: 1; }
.cell-note:hover { color: var(--steel-ink); background: var(--surface-2, var(--bg)); }
.cell-note.has-note { color: var(--steel-ink); }
.cell-note-dialog h2 { margin-top: 0; }
.cell-note-dialog input[name="note"] { width: 100%; margin-top: 12px; }


/* ============================ Produktivität ============================ */
.prod-head { gap: 16px; flex-wrap: wrap; }
.prod-period { gap: 10px; flex-wrap: wrap; }
.prod-range { position: relative; }
.prod-range > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; min-width: 220px; justify-content: space-between; }
.prod-range > summary::-webkit-details-marker { display: none; }
.prod-range[open] > summary .ico:last-child { transform: rotate(180deg); }
.prod-range-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 16px; min-width: 460px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.prod-presets { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--grid); padding-right: 14px; }
.prod-presets a { padding: 7px 10px; border-radius: 8px; color: var(--ink); font-weight: 500; }
.prod-presets a:hover { background: var(--surface-2); color: var(--ink-strong); }
.prod-presets a.active { background: var(--navy); color: #fff; }
.prod-custom { display: flex; flex-direction: column; gap: 10px; align-self: start; }
.prod-custom label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-secondary); }
.prod-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px 20px; margin-bottom: 24px; }
.prod-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.prod-filters select { min-width: 150px; max-width: 240px; }
.prod-filter-sep { align-self: stretch; width: 1px; background: var(--grid); margin: 0 4px; }
.prod-reset { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding-bottom: 9px; margin-left: auto; }
.prod-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.prod-split { align-items: stretch; }
.prod-split > .card { display: flex; flex-direction: column; }
.prod-split .chart-box { flex: 1 1 auto; min-height: 300px; }
.prod-table td, .prod-table th { vertical-align: middle; }
.prod-name { display: inline-flex; align-items: center; gap: 8px; }
.prod-indent { padding-left: 46px; color: var(--ink-secondary); }
.prod-toggle { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: var(--surface-2); color: var(--ink-secondary); cursor: pointer; }
.prod-toggle .ico { transition: transform .15s ease; }
.prod-toggle[aria-expanded="true"] .ico { transform: rotate(90deg); }
.prod-sub td { background: var(--tint); font-size: 13px; }
.prod-share-col { width: 22%; }
.prod-share { display: inline-block; vertical-align: middle; width: calc(100% - 44px); height: 8px; margin-right: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.prod-share span { display: block; height: 100%; border-radius: 4px; }
.prod-meter { display: inline-block; vertical-align: middle; width: 90px; height: 8px; margin-right: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.prod-meter span { display: block; height: 100%; border-radius: 4px; background: var(--steel); }
/* Statusbalken: graue Spur, Füllung in den Farben der Status-Badges (aktiv / gekündigt / Hinweis) */
.prod-meter.tone-good span { background: var(--good-bar); }
.prod-meter.tone-warn span { background: var(--warn-bar); }
.prod-meter.tone-bad span { background: var(--bad-bar); }
.prod-donut { position: relative; height: 230px; }
.prod-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.prod-donut-center strong { font-size: 24px; font-weight: 600; color: var(--ink-strong); letter-spacing: -0.02em; }
.prod-donut-center span { font-size: 12px; color: var(--ink-muted); }
.prod-legend { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.prod-legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; }
.prod-legend li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-entries tr.prod-day th { color: var(--ink-strong); font-weight: 600; text-align: left; }
.prod-entries tr.prod-day th.r { text-align: right; }
.prod-matrix th, .prod-matrix td { white-space: nowrap; }
.prod-matrix thead .is-weekend { color: rgba(255, 255, 255, .55); }
.prod-heat { background: color-mix(in srgb, var(--steel) calc(var(--heat) * 55%), transparent); font-variant-numeric: tabular-nums; }
.prod-heat:empty { background: none; }
@media (max-width: 900px) {
  .prod-range-pop { grid-template-columns: 1fr; min-width: 0; width: min(92vw, 360px); }
  .prod-presets { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--grid); padding-bottom: 10px; }
  .prod-filters select { min-width: 0; max-width: none; width: 100%; }
  .prod-filters label { flex: 1 1 45%; }
  .prod-filter-sep { display: none; }
}

/* Segment-Link mit Pfeil (führt auf eine andere Seite): Pfeil in derselben Zeile */
.segmented a.seg-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Rechnungen: Auftragszeile mit begrenzter Breite, dahinter Quelle als Kürzel (A = automatisch, M = manuell) */
.assign-cell { display: flex; align-items: center; gap: 8px; }
.assign-cell .single-deal { flex: none; margin: 0; }
.assign-cell .single-deal .btn { white-space: nowrap; }
.assign-cell .assign-invoice { width: 260px; max-width: 100%; text-overflow: ellipsis; }
.assign-src { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11.5px; font-weight: 700; cursor: help; }
.assign-src-a { background: var(--good-bg); color: var(--good); }
.assign-src-m { background: var(--info-bg); color: var(--info); }

/* Deals & Forecast: Umsatz ohne zugeordneten Deal (fixe erste Zeile, Rechnungen aufklappbar) */
#order-grid tr.no-deal-row > td { background: var(--tint); }
#order-grid tr.no-deal-row .deal-meta .contract-toggle { margin-left: 0; }
#order-grid tr.no-deal-sub > td { background: var(--tint); font-size: 12.5px; color: var(--ink-secondary); }
#order-grid tr.no-deal-sub .deal-cell { padding-left: 28px; }

/* Vertragsart-Kennzeichen (Projekt · Retainer · Hosting & WebService) */
.tag.tag-kind-once { background: var(--kind-once-bg); color: var(--kind-once); }
.tag.tag-kind-retainer { background: var(--kind-retainer-bg); color: var(--kind-retainer); }
.tag.tag-kind-hosting { background: var(--kind-hosting-bg); color: var(--kind-hosting); }

/* Mehrfachauswahl mit Checkboxen (sieht aus wie ein Auswahlfeld) */
.multi-select { position: relative; }
.multi-select > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 190px; max-width: 280px;
  font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.multi-select > summary::-webkit-details-marker { display: none; }
.multi-select > summary span { overflow: hidden; text-overflow: ellipsis; }
.multi-select > summary .ico { flex: none; color: var(--ink-secondary); transition: transform .15s ease; }
.multi-select[open] > summary { border-color: var(--steel-ink); box-shadow: 0 0 0 3px var(--focus); }
.multi-select[open] > summary .ico { transform: rotate(180deg); }
.multi-select-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 100%; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.multi-select-pop label.check { padding: 7px 10px; border-radius: 7px; white-space: nowrap; cursor: pointer; }
.multi-select-pop label.check:hover { background: var(--surface-2); }

/* Projekt: Unteraufgaben mit Zeitraum und Monatsansicht */
.task-head { justify-content: space-between; align-items: center; }
.task-head h3 { font-size: inherit; margin: 0; }
.month-nav { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.month-nav strong { min-width: 74px; text-align: center; }
.link-btn { background: none; border: 0; padding: 0 0 0 4px; color: var(--link); cursor: pointer; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.task-table td, .task-table th { vertical-align: middle; padding-left: 12px; padding-right: 12px; }
.task-table thead th, .task-table thead th.r { white-space: normal; line-height: 1.25; }
.task-table .task-name { width: 100%; min-width: 470px; max-width: 610px; }
.task-table td:first-child { width: 36%; }
.task-table .w-num { width: 70px; }
.task-table .w-unit { width: auto; padding: 6px 4px 6px 8px; margin-left: 4px; font-size: 13px; }
.task-table input[name$="[sort]"] { width: 60px; padding-left: 10px; padding-right: 6px; }
/* Angebot daneben eingeblendet: weniger Platz – Aufgabenfeld und Abstände etwas knapper */
.project-with-offer:not(.offer-hidden) .task-table .task-name { min-width: 370px; width: 370px; }
.project-with-offer:not(.offer-hidden) .task-table td:first-child { width: auto; }
.project-with-offer:not(.offer-hidden) .task-table td, .project-with-offer:not(.offer-hidden) .task-table th { padding-left: 8px; padding-right: 8px; }
.task-period { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.task-period select { padding: 6px 4px 6px 10px; width: 88px; min-width: 0; }
.month-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 16px 0 8px; }
.period-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; }
.period-cell:hover { background: var(--surface-3); }
.period-cell.current { outline: 2px solid var(--link); outline-offset: -2px; }
.period-cell .time-progress { margin: 4px 0 2px; height: 5px; }

/* Kundenfarbe: Akzent oben auf der Projektkarte, Farbfeld beim Kunden */
.time-project[style*="--project-color"] { box-shadow: inset 0 4px 0 var(--project-color); }
.color-field { display: flex; flex-direction: column; gap: 6px; }
.color-field .inline-row { display: flex; align-items: center; gap: 12px; }
.color-field .w-hex { width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.color-field input[type="color"] { width: 48px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }

/* Zeiterfassung: Tag außerhalb des Zeitraums der Unteraufgabe – gesperrtes, schraffiertes Feld */
.time-grid .cell-closed { width: 64px; height: 32px; padding: 0; vertical-align: middle; border-radius: 6px; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px); border: 1px dashed var(--border); }
.member-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Schnellerfassung (App-Fenster, pages/erfassung.php) ---------- */
.quick-app { background: var(--page); min-height: 100vh; }
.qa-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.qa-logo { height: 22px; width: auto; }
.qa-sums { margin-left: auto; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qa-main { max-width: 560px; margin: 0 auto; padding: 14px 16px 24px; display: grid; gap: 14px; }
.qa-main > .alert { margin: 0; }
.qa-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--ink-secondary); margin: 0 0 6px; }
.qa-running { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-left: 4px solid var(--good-bar, #80C48D); }
.qa-running-text { flex: 1; min-width: 0; }
.qa-running .timer-clock { font-size: 26px; }
.qa-recent { display: grid; gap: 6px; }
.qa-combo { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 6px 2px 2px; }
.qa-combo.is-running { box-shadow: 0 0 0 2px var(--good-bar, #80C48D); }
.qa-combo-pick { flex: 1; min-width: 0; display: grid; text-align: left; background: none; border: 0; padding: 7px 10px; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.qa-combo-pick:hover { background: var(--surface-2); }
.qa-combo-main { display: block; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-combo .muted, .qa-entry .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-play { color: var(--good, #2E7D4F); }
.qa-form { display: grid; gap: 10px; }
.qa-form label { display: grid; gap: 4px; }
.qa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qa-actions .btn-primary { margin-right: auto; }
.qa-dur { width: 72px; text-align: right; }
.qa-date { width: 140px; }
.qa-today { display: grid; gap: 6px; }
.qa-entry { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 6px 8px 12px; }
.qa-entry > div { flex: 1; min-width: 0; }
.qa-entry-dur { font-variant-numeric: tabular-nums; }
.qa-foot { text-align: center; margin: 4px 0 0; }
@media (max-width: 420px) { .qa-row { grid-template-columns: 1fr; } .qa-sums .muted { display: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qa-logo.sb-logo-light { display: none; }
  :root:not([data-theme="light"]) .qa-logo.sb-logo-dark { display: block; }
}
.qa-main, .qa-recent, .qa-today, .qa-form { grid-template-columns: minmax(0, 1fr); }
.qa-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qa-form select, .qa-form label > input { width: 100%; min-width: 0; }
@media (max-width: 420px) { .qa-row { grid-template-columns: minmax(0, 1fr); } }
.qa-start { justify-content: center; }
.qa-manual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.qa-manual > span { flex-basis: 100%; }
.qa-manual .qa-date { flex: 1; min-width: 120px; width: auto; }
.qa-more > summary { cursor: pointer; padding: 4px 2px; list-style: none; }
.qa-more > summary::-webkit-details-marker { display: none; }
.qa-more > summary::before { content: '▸ '; }
.qa-more[open] > summary::before { content: '▾ '; }
.qa-more > .qa-recent { margin-top: 6px; }
.qa-running-tag { color: var(--good, #2E7D4F); font-weight: 600; padding: 0 8px; }
/* Erinnerung „Noch aktiv?“ bei laufendem Timer */
.timer-remind-dialog h2 { margin: 0 0 8px; }
.timer-remind-dialog p { margin: 0 0 14px; }
.timer-remind-dialog .timer-remind-end { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; margin-bottom: 4px; }
.timer-remind-end input { width: 110px; }
.timer-remind-dialog .ff-dialog-actions { flex-wrap: wrap; }
/* Schnellerfassung: Gruppen Kunden/Intern, Scrollbereich, Kundenlogo + Farbstreifen */
.qa-recent-scroll { display: grid; gap: 10px; } /* kein eigener Scrollbereich – die Seite scrollt, das Fenster wird voll genutzt */
.qa-group-title { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); padding: 2px 2px 4px; }
.qa-combo, .qa-entry { border-left: 4px solid var(--cust, var(--border)); }
.qa-running { border-left-color: var(--cust, var(--good-bar)); }
.qa-combo-pick { display: flex; align-items: center; gap: 10px; }
.qa-combo-text { display: grid; min-width: 0; }
.qa-logo-ico { width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--tint); color: var(--ink-strong); display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600; box-sizing: border-box; overflow: hidden; }
.qa-logo-ico.has-logo { background: #fff; border: 1px solid var(--border); padding: 3px; }
.qa-logo-ico.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qa-entry { padding-left: 8px; }
/* Logo-Plakette auf der oberen Kartenkante (rechts), ragt halb heraus */
.qa-combo, .qa-entry, .qa-running { position: relative; }
.qa-recent, .qa-today { gap: 14px; }
.qa-recent-scroll { gap: 14px; }
/* ohne Rahmen/Fläche: das Logo bekommt nur eine Kontur in Kartenfarbe, die der Form folgt (keine eckige Kante beim Hover) */
.qa-badge { position: absolute; top: 0; right: 30px; transform: translateY(-50%); z-index: 1; height: 22px; box-sizing: border-box; pointer-events: none; }
/* feste Logo-Fläche, Logo darin mittig – alle Logos stehen auf derselben Achse */
.qa-badge-img { width: 48px; }
/* einheitlich in Graustufen (wie die übrigen Kundenlogos), weiße Kontur entlang der Logoform */
.qa-badge-img::after { content: ""; position: absolute; inset: 2px 0; background: var(--logo) center / contain no-repeat;
  filter: grayscale(1) contrast(1.1) opacity(.85) drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 1px var(--surface)) drop-shadow(0 0 2px var(--surface)); }
.qa-badge-ff { width: 88px; padding: 4px 7px; background: #fff url("brand/logo-navy.png") center / contain no-repeat; background-origin: content-box; }
.qa-badge-text { display: inline-grid; place-items: center; width: 48px; padding: 0; font-size: 10.5px; font-weight: 700; color: var(--ink-muted);
  text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface), 0 0 3px var(--surface); }
.qa-combo-pick { padding-left: 12px; }

.qa-ff { display: inline-block; width: 64px; height: 10px; margin-right: 6px; vertical-align: -1px; background: url("brand/logo-navy.png") left center / contain no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa-ff { background-image: url("brand/logo-white.png"); } }
.qa-group-title { padding-bottom: 14px; }
.qa-combo:has(.qa-badge) .qa-combo-pick { padding-top: 12px; }
.qa-entry:has(.qa-badge) { padding-top: 13px; }
/* Logos mit deckendem Hintergrund: Originalfarben statt Einfärbung (siehe customer_logo_img) */
.logo-plain { display: inline-block; flex: none; }
.logo-plain img { display: block; height: 100%; width: auto; max-width: inherit; border-radius: 4px; }
/* Kundenfarbe als sanfte Fläche statt Streifen (intern: Schiefergrau); Kontur der Logos in derselben Kartenfarbe */
.qa-combo, .qa-entry, .qa-running { --card-bg: color-mix(in srgb, var(--cust, var(--border)) 8%, var(--surface));
  background: var(--card-bg); border-left: 1px solid var(--border); }
.qa-combo:hover { --card-bg: color-mix(in srgb, var(--cust, var(--border)) 14%, var(--surface)); }
.qa-combo-pick:hover { background: transparent; }
.qa-badge-img::after { filter: grayscale(1) contrast(1.1) opacity(.85) drop-shadow(0 0 1px var(--card-bg, var(--surface))) drop-shadow(0 0 1px var(--card-bg, var(--surface))) drop-shadow(0 0 2px var(--card-bg, var(--surface))); }
.qa-badge-text { text-shadow: 0 0 2px var(--card-bg, var(--surface)), 0 0 2px var(--card-bg, var(--surface)), 0 0 3px var(--card-bg, var(--surface)); }
/* Gruppenüberschrift „Intern“: FALCONFOX-Logo größer, mehr Abstand zur Kundengruppe */
.qa-group-title .qa-ff { width: 112px; height: 17px; margin-right: 8px; vertical-align: -2px; }
.qa-group + .qa-group { margin-top: 16px; }
/* Abschnitt „Heute“ deutlicher von „Zuletzt genutzt“ absetzen */
.qa-today { margin-top: 16px; }
/* Logo-Plakette auch auf den Projektkarten der Zeiterfassung (obere Kante, rechts) */
.time-project { position: relative; }
.time-project > .qa-badge { height: 30px; right: 28px; }
.time-project > .qa-badge-img { width: 72px; }
/* Logo unterbricht die Kartenlinie bzw. den farbigen Kundenrand vollständig: schmaler Streifen in Kartenfarbe
   genau auf Höhe der Kante (−1 px bis +5 px), seitlich 6 px über das Logo hinaus – nichts scheint mehr durch */
.qa-badge { padding: 0 6px; background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--card-bg, var(--surface)) calc(50% - 1px),
  var(--card-bg, var(--surface)) calc(50% + 5px), transparent calc(50% + 5px)); }
.qa-badge-img::after { inset: 2px 6px; }
.qa-badge-img { width: 60px; }
.qa-badge-text { width: auto; min-width: 48px; }
.time-project > .qa-badge-img { width: 84px; }
.qa-combo-proj { display: block; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }