/* ═══════════════════════════════════════════════════════════════════
   K-TECH-LINIE (Design-Update 11/2026) — Überlagerung über app.css + redesign.css
   Farbwelt aus dem K-Tech-Logo: Graphit · Petrol #0E6464 → Türkis #3CC8C8 → Blau #1E6FC0.
   Prinzip wie redesign.css: Tokens überschreiben + gezielte Komponentenregeln.
   app.css und redesign.css bleiben unverändert (Vergleichbarkeit, dateiweise Übernahme).
   Kontraste geprüft (WCAG): jede Textfarbe ≥ 4,5:1 auf ihrem Untergrund, hell und dunkel.
   ⚠ Fest eingetragene Farben in js/components/*.js (≈ 5.000 Hex-Werte) erreicht diese Datei
     nicht — die werden Komponente für Komponente auf Tokens umgestellt.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── K-Tech-Grundfarben ── */
  --kt-graphit-950: #121416;
  --kt-graphit-900: #16191C;
  --kt-graphit-850: #1C1F22;
  --kt-graphit-700: #2C3135;
  --kt-graphit-500: #5F6870;
  --kt-graphit-300: #B4BABF;
  --kt-petrol: #0E6464;
  --kt-petrol-mittel: #1F9A94;
  --kt-tuerkis: #3CC8C8;
  --kt-blau: #1E6FC0;
  --kt-blau-dunkel: #175A9E;
  --kt-verlauf: linear-gradient(100deg, #0E6464 0%, #1F9A94 45%, #1E6FC0 100%);
  --kt-verlauf-leuchtend: linear-gradient(100deg, #0E6464 0%, #3CC8C8 50%, #1E6FC0 100%);
  --kt-verlauf-senkrecht: linear-gradient(180deg, #3CC8C8 0%, #1E86C4 100%);

  /* ── Semantik: Text (-text) ist auf Weiß und auf seiner Fläche (-bg) ≥ 4,5:1 ── */
  --ok: #1F9D63;          --ok-text: #18794E;      --ok-bg: #E5F4EC;
  --warn: #F0A020;        --warn-text: #9A5B00;    --warn-bg: #FDF1DC;
  --fehler: #D93A40;      --fehler-text: #B42328;  --fehler-bg: #FCEAEA;
  --info: #1E6FC0;        --info-text: #175A9E;    --info-bg: #E6F0FA;
  --marke-text: #0E6464;  --marke-bg: #E2F0EF;
  --neutral-text: #4A525A; --neutral-bg: #EEF1F3;
  /* Ränder für Hinweisflächen (Chips, Kästen) */
  --ok-rand: #A9D8BF; --warn-rand: #F2C77E; --fehler-rand: #F0B3B5; --info-rand: #A9C8EA;

  /* ── Kategoriefarben (Qualifikationen, VA-Typen, Kunden …): je ≥ 4,5:1 auf Weiß ── */
  --kat-1: #0E7C7B;   /* Petrol  */
  --kat-2: #1E6FC0;   /* Blau    */
  --kat-3: #4F5BD5;   /* Indigo  */
  --kat-4: #7E4CC9;   /* Violett */
  --kat-5: #B5367F;   /* Magenta */
  --kat-6: #C9472F;   /* Koralle */
  --kat-7: #A66300;   /* Amber   */
  --kat-8: #5E7A14;   /* Oliv    */
  --kat-9: #8A5A3C;   /* Umbra   */
  --kat-10: #5C6670;  /* Graphit */

  /* ── Bewegung (Apple-Linie: kritisch gedämpft, kein Nachfedern ohne Schwung) ── */
  --feder: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dauer-druck: 100ms;
  --dauer: 250ms;

  /* ── Schrift: Systemschrift für UI, Brandon Light für große Titel ── */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', Roboto, system-ui, sans-serif;
  --font-display: 'Brandon', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── App-Variablen (app.css/redesign.css) auf K-Tech umbiegen ── */
  --primary: var(--kt-blau);
  --primary-dark: var(--kt-blau-dunkel);
  --primary-light: #3C8BDB;
  --primary-subtle: var(--info-bg);
  --accent: var(--kt-petrol);
  --success: var(--ok-text);
  --warning: var(--warn);
  --danger: var(--fehler-text);
  --purple: var(--kat-4);
  --logistik: #0F8F86;
  --logistik-dunkel: #0B6E67;

  --bg: #F2F4F5;
  --bg-deep: #E8ECEE;
  --bg-card: #FFFFFF;
  --bg-surface: #F7F8F9;
  --bg-input: #FFFFFF;
  --bg-hover: #F0F3F4;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-table-header: #F7F8F9;
  --bg-table-row-alt: #FAFBFB;

  --border: #E3E7EA;
  --border-light: #EEF1F3;
  --border-muted: #D5DADE;

  --text: #16191C;
  --text-heading: #16191C;
  --text-muted: #4A525A;
  --text-light: #5F6870;     /* vorher #94A3B8 = 2,6:1 — jetzt 5,7:1 */

  --sidebar-bg: var(--kt-graphit-850);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(60, 200, 200, 0.12);
  --sidebar-active-border: var(--kt-tuerkis);
  --sidebar-text: var(--kt-graphit-300);
  --sidebar-text-active: #FFFFFF;
  --sidebar-border: var(--kt-graphit-850);

  --topbar-bg: rgba(255, 255, 255, 0.72);

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(22, 25, 28, 0.05), 0 1px 1px rgba(22, 25, 28, 0.03);
  --shadow-md: 0 6px 16px -6px rgba(22, 25, 28, 0.12), 0 2px 4px rgba(22, 25, 28, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(22, 25, 28, 0.22), 0 4px 12px rgba(22, 25, 28, 0.06);
  --shadow-glow: 0 0 0 1px rgba(30, 111, 192, 0.10), 0 4px 16px rgba(30, 111, 192, 0.12);
  --modal-overlay: rgba(18, 20, 22, 0.40);

  --stat-blue-bg: var(--info-bg);
  --stat-green-bg: var(--marke-bg);
  --stat-yellow-bg: var(--warn-bg);
  --stat-purple-bg: #F0EBFB;
  --stat-red-bg: var(--fehler-bg);
  --chip-bg: var(--info-bg);
  --chip-text: var(--info-text);
  --toast-bg: rgba(28, 31, 34, 0.92);
  --scrollbar-thumb: #C9CFD3;
  --scrollbar-hover: #8A9298;
}

/* ═══ Dunkel: Graphit statt Navy, aufgehellte Markenfarben ═══ */
body.dark-mode {
  --ok-text: #4ADE9A;      --ok-bg: rgba(31, 157, 99, 0.16);
  --warn-text: #F5B54A;    --warn-bg: rgba(240, 160, 32, 0.15);
  --fehler-text: #FF8A8A;  --fehler-bg: rgba(217, 58, 64, 0.18);
  --info-text: #6AAEF0;    --info-bg: rgba(30, 111, 192, 0.20);
  --marke-text: #4FD1C5;   --marke-bg: rgba(60, 200, 200, 0.14);
  --neutral-text: #C3C9CE; --neutral-bg: rgba(255, 255, 255, 0.07);
  --ok-rand: rgba(74, 222, 154, 0.35); --warn-rand: rgba(245, 181, 74, 0.35); --fehler-rand: rgba(255, 138, 138, 0.35); --info-rand: rgba(106, 174, 240, 0.35);
  --kat-1: #3FC1BF; --kat-2: #6AAEF0; --kat-3: #9AA3F5; --kat-4: #B9A2F7; --kat-5: #F08CC6;
  --kat-6: #FF9A85; --kat-7: #F5B54A; --kat-8: #B5D36A; --kat-9: #D9AE8E; --kat-10: #AAB3BB;

  /* Im Dunkeln getrennt: --primary = Text/Link (≥ 4,5:1 auf Karte), Flächen mit weißer Schrift
     behalten --kt-blau (5,1:1) — ein Blau, das beides schafft, gibt es nicht. */
  --primary: #5AA0EA;
  --primary-dark: #3D8BDA;
  /* Text-Rollen aus app.css im Dunkeln direkt setzen (sonst blieben die hellen Werte: 2,4–2,6:1).
     Als Fläche nutzt app.css --danger nur für Nav-Zähler, die ktech.css auf Blau legt. */
  --success: #4ADE9A;
  --danger: #FF8A8A;
  --accent: #4FD1C5;
  --primary-light: #6AAEF0;
  --primary-subtle: var(--info-bg);

  --bg: var(--kt-graphit-950);
  --bg-deep: #0D0F10;
  --bg-card: #1B1E21;
  --bg-surface: #24282C;
  --bg-input: #1B1E21;
  --bg-hover: #24282C;
  --bg-glass: rgba(27, 30, 33, 0.72);
  --bg-table-header: #1F2225;
  --bg-table-row-alt: #1E2124;

  --border: #33393E;
  --border-light: #2A2F33;
  --border-muted: #454C52;

  --text: #ECEFF1;
  --text-heading: #F5F7F8;
  --text-muted: #C3C9CE;
  --text-light: #9AA2A9;

  --sidebar-bg: #0F1112;
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active: rgba(60, 200, 200, 0.12);
  --sidebar-text: var(--kt-graphit-300);
  --sidebar-text-active: #FFFFFF;
  --sidebar-border: #0F1112;

  --topbar-bg: rgba(18, 20, 22, 0.72);
  --modal-overlay: rgba(0, 0, 0, 0.60);
  --stat-purple-bg: rgba(126, 76, 201, 0.20);
  --chip-text: var(--info-text);
  --toast-bg: rgba(44, 49, 53, 0.95);
  --scrollbar-thumb: #454C52;
  --scrollbar-hover: #6B747B;
}

body { font-family: var(--font); color: var(--text); }

/* ── Typografie: Titel in Brandon Light (wie K-Tech/K-Collect), Kennzahlen in Systemschrift ── */
h1, h2, .topbar-title, .page-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.012em;
}
.topbar-title { font-size: 22px; color: var(--text-heading); }
.stat-value {
  font-family: var(--font);
  font-weight: 650;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.card-title { color: var(--text-light); letter-spacing: 0.06em; }
tr.day-header td, .day-hdr .dl { font-family: var(--font); font-weight: 650; letter-spacing: -0.005em; }

/* ── Seitenleiste: Graphit, aktiver Punkt mit K-Tech-Verlaufskante ── */
.sidebar {
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(60, 200, 200, 0.10), transparent 70%),
    var(--sidebar-bg);
}
.sidebar-section-label { color: #868D93; }
.sidebar-logo-sub, .nav-chevron, #sync-status-chip { color: #868D93 !important; }
.sidebar > div:last-child .nav-item > div > div:last-child { color: #868D93 !important; }
.nav-item, .nav-sub-item { transition: background-color var(--dauer) var(--feder), color var(--dauer) var(--feder); }
.nav-item.active, .nav-sub-item.active { box-shadow: none; color: var(--sidebar-text-active); }
.nav-item.active::before, .nav-sub-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--kt-verlauf-senkrecht);
}
.nav-sub-item { position: relative; color: var(--sidebar-text); }
.nav-item.active .icon i, .nav-sub-item.active .icon i { color: var(--kt-tuerkis); }
.nav-item .badge, .nav-notif-badge { background: var(--kt-blau); color: #FFFFFF; }

/* ── Kopfleiste: Material + K-Tech-Haarlinie ── */
.topbar {
  position: relative;
  background: var(--topbar-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: transparent;
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--kt-verlauf-leuchtend);
  opacity: 0.85;
  pointer-events: none;
}

/* ── Knöpfe: Rückmeldung beim Drücken, nicht erst beim Loslassen ── */
.btn { transition: background-color var(--dauer) var(--feder), box-shadow var(--dauer) var(--feder), transform var(--dauer-druck) ease-out; }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 6px 16px -8px rgba(30, 111, 192, 0.65);
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 8px 20px -8px rgba(30, 111, 192, 0.70);
  transform: none;
}
.btn-primary:active { transform: scale(0.97); }
.btn-success { background: var(--ok-text); color: #FFFFFF; box-shadow: none; }
.btn-danger { background: var(--fehler-text); color: #FFFFFF; box-shadow: none; }
body.dark-mode .btn-primary, body.dark-mode .rail-filter.active { background: var(--kt-blau); border-color: var(--kt-blau); color: #FFFFFF; }
body.dark-mode .btn-primary:hover { background: var(--kt-blau-dunkel); }
body.dark-mode .btn-success { background: #18794E; }   /* Weiß darauf 5,4:1 */
body.dark-mode .btn-danger { background: #C0262D; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ── Karten & Kennzahlen ── */
.card, .stat-card { border-color: var(--border); box-shadow: var(--shadow); }
.card:hover { box-shadow: var(--shadow); }
.stat-card:hover { transform: none; box-shadow: var(--shadow-md); }
.stat-icon.blue { background: var(--info-bg); color: var(--info-text); }
.stat-icon.green { background: var(--marke-bg); color: var(--marke-text); }
.stat-icon.yellow { background: var(--warn-bg); color: var(--warn-text); }
.stat-icon.purple { background: var(--stat-purple-bg); color: var(--kat-4); }

/* ── Tabellen ── */
thead th { background: var(--bg-table-header); color: var(--text-light); }

/* ── Status-Badges auf Semantik-Tokens (hell + dunkel aus einer Regel) ── */
.badge-aktiv, .badge-offen, .badge-bestätigt { background: var(--ok-bg); color: var(--ok-text); }
.badge-inaktiv, .badge-forecast { background: var(--warn-bg); color: var(--warn-text); }
.badge-exit, .badge-ausgeschieden, .badge-abgeschlossen { background: var(--neutral-bg); color: var(--neutral-text); }
.badge-joker { background: color-mix(in srgb, var(--kat-6) 11%, var(--bg-card)); color: color-mix(in srgb, var(--kat-6) 80%, #000); }
.badge-bewerber { background: color-mix(in srgb, var(--kat-4) 11%, var(--bg-card)); color: color-mix(in srgb, var(--kat-4) 80%, #000); }
.badge-geplant { background: var(--info-bg); color: var(--info-text); }
.badge-bestellung { background: color-mix(in srgb, var(--kat-6) 11%, var(--bg-card)); color: color-mix(in srgb, var(--kat-6) 80%, #000); border-color: color-mix(in srgb, var(--kat-6) 30%, transparent); }
.badge-storniert { background: var(--fehler-bg); color: var(--fehler-text); }
body.dark-mode .badge-aktiv, body.dark-mode .badge-offen, body.dark-mode .badge-bestätigt { background: var(--ok-bg); color: var(--ok-text); }
body.dark-mode .badge-inaktiv, body.dark-mode .badge-forecast { background: var(--warn-bg); color: var(--warn-text); }
body.dark-mode .badge-exit, body.dark-mode .badge-ausgeschieden, body.dark-mode .badge-abgeschlossen { background: var(--neutral-bg); color: var(--neutral-text); }
body.dark-mode .badge-joker { background: color-mix(in srgb, var(--kat-6) 16%, var(--bg-card)); color: var(--kat-6); }
body.dark-mode .badge-bewerber { background: color-mix(in srgb, var(--kat-4) 16%, var(--bg-card)); color: var(--kat-4); }
body.dark-mode .badge-geplant { background: var(--info-bg); color: var(--info-text); }
body.dark-mode .badge-bestellung { background: color-mix(in srgb, var(--kat-6) 16%, var(--bg-card)); color: var(--kat-6); }
body.dark-mode .badge-storniert { background: var(--fehler-bg); color: var(--fehler-text); }

/* ── Bausteine fürs Redesign: Kategorie-Punkt und -Chip (Farbe über --kat) ── */
.kt-kat { --kat: var(--kat-10); }
.kt-kat-1 { --kat: var(--kat-1); } .kt-kat-2 { --kat: var(--kat-2); } .kt-kat-3 { --kat: var(--kat-3); }
.kt-kat-4 { --kat: var(--kat-4); } .kt-kat-5 { --kat: var(--kat-5); } .kt-kat-6 { --kat: var(--kat-6); }
.kt-kat-7 { --kat: var(--kat-7); } .kt-kat-8 { --kat: var(--kat-8); } .kt-kat-9 { --kat: var(--kat-9); }
.kt-kat-10 { --kat: var(--kat-10); }
.kt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--kat, var(--kat-10)) 80%, #000);   /* ≥ 6:1 auf der Tönung */
  background: color-mix(in srgb, var(--kat, var(--kat-10)) 11%, var(--bg-card));
}
body.dark-mode .kt-chip {
  color: var(--kat, var(--kat-10));                                   /* ≥ 5,3:1 auf 16 % Tönung */
  background: color-mix(in srgb, var(--kat, var(--kat-10)) 16%, var(--bg-card));
}
.kt-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Barrierefreiheit ── */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active, .btn-primary:active, .stat-card:hover { transform: none !important; }
  .nav-item, .nav-sub-item, .btn { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --border: #9AA2A9; --text-light: #4A525A; }
}

/* ═══ Mobil (/m): gleiche Tokens für m.css ═══ */
:root {
  --m-bg: var(--bg);
  --m-bg-card: #FFFFFF;
  --m-bg-soft: var(--bg-surface);
  --m-border: var(--border);
  --m-border-soft: var(--border-light);
  --m-text: var(--text);
  --m-text-muted: var(--text-muted);
  --m-text-soft: var(--text-light);
  --m-navy: var(--kt-graphit-850);
  --m-primary: var(--kt-blau);
  --m-primary-dark: var(--kt-blau-dunkel);
  --m-primary-light: #3C8BDB;
  --m-primary-soft: var(--info-bg);
  --m-primary-line: #B9D3EE;
  --m-success: var(--ok);
  --m-success-bg: var(--ok-bg);
  --m-success-text: var(--ok-text);
  --m-warning: var(--warn);
  --m-warning-bg: var(--warn-bg);
  --m-warning-text: var(--warn-text);
  --m-danger: var(--fehler);
  --m-danger-bg: var(--fehler-bg);
  --m-danger-text: var(--fehler-text);
}

/* Mobil: großer Seitentitel in Brandon Light, kleine Titel/Kennzahlen in der Systemschrift (statt Brandon Black) */
.m-topbar-title { font-weight: 300; font-size: 26px; letter-spacing: -0.015em; }
.m-topbar-avatar, .m-day-header, .m-ratio, .m-sheet-title, .m-empty-title, .m-akte-name {
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.m-ratio { font-variant-numeric: tabular-nums; }
/* Mobil: Kopf- und Tableiste als Material, Haarlinie im K-Tech-Verlauf */
.m-topbar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: transparent;
}
.m-topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--kt-verlauf-leuchtend);
  opacity: 0.85;
  pointer-events: none;
}
.m-tabbar {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: none;
}
@media (prefers-reduced-transparency: reduce) {
  .m-topbar, .m-tabbar { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ═══ Startseite: „Braucht deine Aufmerksamkeit“ (dashboard.js renderAufgabenBereich) ═══
   Kacheln je Thema, Farbe = Dringlichkeit: hoch Koralle · mittel Amber · Info Petrol. */
.kt-aufgaben { margin-bottom: 24px; }
.kt-aufgaben-kopf { display: flex; align-items: baseline; gap: 12px; margin: 0 2px 12px; }
.kt-aufgaben-kopf h2 { font-size: 26px; margin: 0; color: var(--text-heading); }
.kt-aufgaben-summe { font-size: 13px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.kt-aufgaben-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kt-kachel {
  --ton: var(--kat-1);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dauer) var(--feder), border-color var(--dauer) var(--feder),
              box-shadow var(--dauer) var(--feder), transform var(--dauer-druck) ease-out;
}
.kt-kachel.kt-prio-hoch { --ton: var(--kat-6); }
.kt-kachel.kt-prio-mittel { --ton: var(--kat-7); }
.kt-kachel.kt-prio-info { --ton: var(--kat-1); }
.kt-kachel:hover { border-color: color-mix(in srgb, var(--ton) 45%, var(--border)); }
.kt-kachel:active { transform: scale(0.97); }
.kt-kachel[aria-selected="true"] {
  background: color-mix(in srgb, var(--ton) 9%, var(--bg-card));
  border-color: var(--ton);
  box-shadow: 0 0 0 1px var(--ton), var(--shadow-md);
}
.kt-kachel-icon {
  grid-row: 1 / 3;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--ton);
  background: color-mix(in srgb, var(--ton) 13%, var(--bg-card));
}
.kt-kachel-zahl {
  font-size: 22px; font-weight: 700; line-height: 1.05;   /* 700 = „groß fett“ nach WCAG (≥ 3:1 genügt; gewählt ≥ 4,2:1) */
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--ton);
}
.kt-kachel-titel { font-size: 12.5px; font-weight: 600; color: var(--text-muted); line-height: 1.25; }
.kt-aufgaben-leer[hidden] { display: none; }
.kt-aufgaben-leer {
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--ok-bg); color: var(--ok-text);
  font-weight: 600; font-size: 13.5px;
}
.kt-aufgabe > .card, .kt-aufgabe > div > .card { margin-bottom: 0 !important; }
.kt-aufgabe .card { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .kt-kachel { transition: none; }
  .kt-kachel:active { transform: none; }
}

/* ═══ Farbakzente (Philipp 04.11.: „mehr farbige Akzente“) ═══════════════════
   Jede Modulgruppe hat ihre Farbe (Seitenleiste), Kunden bekommen eine feste Farbe
   (--kunde, gesetzt im JS aus der Kunden-ID → Kategoriepalette), Titel tragen den Verlauf. */

/* Seitenleiste: Symbolfarbe je Modulgruppe (auf Graphit → helle Kategorietöne, ≥ 3:1) */
.sidebar { --nav-ton: #AAB3BB; }
.sidebar [data-page="dashboard"], .sidebar [data-page="kalender"] { --nav-ton: #4FD1C5; }
.sidebar [data-group="events"], .sidebar [data-group-children="events"] { --nav-ton: #6AAEF0; }
.sidebar [data-group="mitarbeiter-menu"], .sidebar [data-group-children="mitarbeiter-menu"] { --nav-ton: #3FC1BF; }
.sidebar [data-group="kunden-menu"], .sidebar [data-group-children="kunden-menu"] { --nav-ton: #B9A2F7; }
.sidebar [data-group="kommunikation-menu"], .sidebar [data-group-children="kommunikation-menu"] { --nav-ton: #F08CC6; }
.sidebar [data-group="abrechnung"], .sidebar [data-group-children="abrechnung"] { --nav-ton: #F5B54A; }
.sidebar [data-group="k-logistik-menu"], .sidebar [data-group-children="k-logistik-menu"] { --nav-ton: #5FD6CD; }
.sidebar [data-group="controlling-menu"], .sidebar [data-group-children="controlling-menu"] { --nav-ton: #9AA3F5; }
.sidebar [data-group="tarif"], .sidebar [data-group-children="tarif"] { --nav-ton: #D9AE8E; }
.sidebar [data-group="office-menu"], .sidebar [data-group-children="office-menu"] { --nav-ton: #FF9A85; }
.sidebar [data-page="firma"], .sidebar [data-page="handbuch"] { --nav-ton: #B5D36A; }
.sidebar .nav-item .icon i { color: var(--nav-ton); transition: color var(--dauer) var(--feder); }
.sidebar .nav-item.active .icon i, .sidebar .nav-sub-item.active .icon i { color: var(--nav-ton); }
.sidebar .nav-item.active { background: color-mix(in srgb, var(--nav-ton) 14%, transparent); }
.nav-item.active::before, .nav-sub-item.active::before { background: var(--nav-ton, var(--kt-tuerkis)); }
/* K-Logistik behält sein Türkis (redesign.css) – hier über --nav-ton */
button[data-group="k-logistik-menu"] .icon i, div[data-group-children="k-logistik-menu"] .icon i { color: var(--nav-ton); }

/* Seitentitel: Symbol im Markenverlauf */
.topbar-title > i:first-child, .topbar-title .bi:first-child {
  background: var(--kt-verlauf-leuchtend);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Kartentitel: Symbol in Markenblau, Kopfzeile mit feiner Verlaufskante */
.card-title > i:first-child, .card-title .bi:first-child { color: var(--kt-blau); }
body.dark-mode .card-title > i:first-child, body.dark-mode .card-title .bi:first-child { color: var(--kt-tuerkis); }

/* Kennzahl-Karten: farbige Kopfkante je Symbolfarbe */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--kt-verlauf-leuchtend); opacity: .9;
}
.stat-card:has(.stat-icon.green)::before { background: linear-gradient(90deg, var(--kt-petrol), var(--kt-tuerkis)); }
.stat-card:has(.stat-icon.yellow)::before { background: linear-gradient(90deg, var(--kat-7), #F0A020); }
.stat-card:has(.stat-icon.purple)::before { background: linear-gradient(90deg, var(--kat-4), var(--kat-5)); }
.stat-card:has(.stat-icon.blue)::before { background: linear-gradient(90deg, var(--kt-blau), var(--kt-tuerkis)); }

/* Planung (Liste): Kundenfarbe als Streifen, Tageskopf mit Akzent */
tr[data-va-id][style*="--kunde"] > td:first-child { box-shadow: inset 4px 0 0 var(--kunde); }

/* ═══ Planung: Liste + Detailbereich (planung.js renderDetailView) ═══════════ */
.kt-split { display: flex; height: 100%; min-height: 0; }
.kt-split-detail { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kt-leiste {
  width: 252px; flex: none;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
}
.kt-leiste[hidden] { display: none; }
.kt-leiste-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid var(--border-light);
}
.kt-leiste-kopf b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); flex: 1; }
.kt-leiste-kopf .kt-leiste-zahl { font-size: 12px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.kt-leiste-liste { flex: 1; overflow-y: auto; padding: 6px 8px 16px; }
.kt-leiste-tag {
  position: sticky; top: -6px; z-index: 1;
  margin: 8px -8px 4px; padding: 6px 14px;
  font-size: 11.5px; font-weight: 650; color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.kt-leiste-tag.heute { color: var(--marke-text); }
.kt-leiste-tag.heute::before { content: 'Heute · '; }
.kt-leiste-va {
  --kunde: var(--kat-10);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  width: 100%; text-align: left;
  padding: 8px 10px 8px 13px; margin: 2px 0;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text);
  font-family: var(--font); cursor: pointer; position: relative;
  transition: background-color var(--dauer) var(--feder), border-color var(--dauer) var(--feder);
}
.kt-leiste-va::before {
  content: ''; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: var(--kunde);
}
.kt-leiste-va:hover { background: var(--bg-card); border-color: var(--border); }
.kt-leiste-va:active { transform: scale(0.985); }
.kt-leiste-va[aria-current="true"] {
  background: var(--bg-card);
  border-color: color-mix(in srgb, var(--kunde) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kunde) 55%, transparent), var(--shadow-md);
}
.kt-leiste-titel { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-leiste-meta { grid-column: 1; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-leiste-bes {
  grid-row: 1 / 3; grid-column: 2; align-self: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
}
.kt-bes-voll { color: var(--ok-text); background: var(--ok-bg); }
.kt-bes-teil { color: var(--warn-text); background: var(--warn-bg); }
.kt-bes-leer { color: var(--fehler-text); background: var(--fehler-bg); }
.kt-bes-ohne { color: var(--neutral-text); background: var(--neutral-bg); }
.kt-leiste-schalter {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
  font: 600 12px var(--font); cursor: pointer;
}
.kt-leiste-schalter:hover { color: var(--text); border-color: var(--border-muted); }
@media (max-width: 1279px) { .kt-leiste { display: none; } .kt-leiste-schalter { display: none; } }
@media (prefers-reduced-motion: reduce) { .kt-leiste-va { transition: none; } .kt-leiste-va:active { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .kt-leiste-tag { background: var(--bg-surface); backdrop-filter: none; } }

/* ═══ Schicht besetzen: Vorschläge mit Prüf-Chips (planung.js renderVorschlaege) ═══ */
.kt-pruef { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kt-pruef span {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 3px 6px; border-radius: 6px;
}
.kt-pruef .ok { color: var(--ok-text); background: var(--ok-bg); }
.kt-pruef .warn { color: var(--warn-text); background: var(--warn-bg); }
.kt-pruef .fehler { color: var(--fehler-text); background: var(--fehler-bg); }
.kt-pruef .info { color: var(--info-text); background: var(--info-bg); }
.kt-pruef .marke { color: var(--marke-text); background: var(--marke-bg); }
.kt-avatar {
  --ton: var(--kat-2);
  width: 30px; height: 30px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: color-mix(in srgb, var(--ton) 80%, #000);
  background: color-mix(in srgb, var(--ton) 15%, var(--bg-card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ton) 35%, transparent);
}
body.dark-mode .kt-avatar { color: var(--ton); background: color-mix(in srgb, var(--ton) 18%, var(--bg-card)); }

/* ═══ Mobil (/m): Farbakzente + Planung ═════════════════════════════════════ */
/* Tab-Leiste: aktiver Reiter mit Symbol im Markenverlauf */
.m-tab.active { color: var(--kt-blau-dunkel); background: color-mix(in srgb, var(--kt-tuerkis) 14%, #FFFFFF); }
.m-tab.active i {
  background: var(--kt-verlauf-leuchtend);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m-topbar-avatar { background: var(--kt-verlauf) !important; color: #FFFFFF !important; }

/* Tageskopf: Systemschrift, „Heute“ mit Türkis-Punkt */
.m-day-header { color: var(--m-text); padding: 14px 16px 6px; }
.m-day-header.today { color: var(--marke-text); }
.m-day-header.today::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--kt-tuerkis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kt-tuerkis) 25%, transparent);
}
.m-day-header.today i { display: none; }

/* Karten: weicher Schatten, Rückmeldung beim Drücken */
.m-card { box-shadow: 0 1px 2px rgba(22, 25, 28, 0.05), 0 4px 14px -8px rgba(22, 25, 28, 0.12); transition: transform var(--dauer-druck) ease-out; }
.m-card[data-va-oeffnen]:active, .m-card[data-ma-info]:active { transform: scale(0.985); }

/* Veranstaltungs-Karte: Kundenfarbe als Streifen + Kunden-Punkt */
.kt-m-va { position: relative; }
.kt-m-va::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--kunde);
}
.kt-m-titel {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16.5px; font-weight: 650; letter-spacing: -0.012em; color: var(--m-text);
}
.kt-m-kunde { display: inline-flex; align-items: center; gap: 5px; }
.kt-m-kunde::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kunde); }

/* Initialen in Personenfarbe (Mobil-Avatare mit --ton) */
.m-avatar[style*="--ton"] {
  color: color-mix(in srgb, var(--ton) 80%, #000);
  background: color-mix(in srgb, var(--ton) 15%, #FFFFFF);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ton) 35%, transparent);
}

/* Filter-Chips: aktiv in Markenblau, Zähler-Pille bleibt Semantik */
.m-chip.active { background: var(--kt-blau); border-color: var(--kt-blau); }

/* Plus-Knopf: Markenverlauf (Weiß darauf ≥ 3:1 für das Symbol über den ganzen Verlauf) */
#m-va-neu-fab { background: var(--kt-verlauf) !important; box-shadow: 0 10px 24px -8px rgba(14, 100, 100, .55) !important; }
#m-va-neu-fab:active { transform: scale(0.94); }

/* Start: Karten in K-Tech-Tönen; Zähler mit lesbarer Schrift (Weiß auf Gelb war 2:1) */
.m-start-zahl { background: var(--kt-blau); }
.m-start-karte.warn .m-start-zahl { background: var(--warn-text); }
.m-start-karte.blau .m-start-kopf { background: var(--info-bg); color: var(--info-text); }
.m-start-karte.lila .m-start-kopf { background: color-mix(in srgb, var(--kat-4) 11%, #FFFFFF); color: color-mix(in srgb, var(--kat-4) 80%, #000); }
.m-start-karte.lila .m-start-zahl { background: var(--kat-4); }
.m-start-ic.blau { background: var(--info-bg); color: var(--kt-blau); }
.m-start-ic.lila { background: color-mix(in srgb, var(--kat-4) 12%, #FFFFFF); color: var(--kat-4); }
.m-start-chip b { color: var(--kt-blau); }
.m-start-karte { box-shadow: 0 1px 2px rgba(22, 25, 28, 0.05), 0 4px 14px -8px rgba(22, 25, 28, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .m-card, .m-card:active, #m-va-neu-fab:active { transition: none; transform: none !important; }
}

/* ═══ Einplan-Vorprüfung (planung.js _vorpruefungAnzeigen) ═══ */
.kt-pruef .kt-pruef-laedt {
  width: 52px; height: 17px; padding: 0;
  background: linear-gradient(90deg, var(--bg-surface) 0%, var(--border) 50%, var(--bg-surface) 100%);
  background-size: 200% 100%;
  animation: kt-pruef-laedt 1.2s linear infinite;
}
@keyframes kt-pruef-laedt { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.kt-gesperrt { opacity: .62; }
.kt-gesperrt .kt-avatar { filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) { .kt-pruef .kt-pruef-laedt { animation: none; } }

/* ═══ Planung: Agenda-Liste (planung.js renderList/renderVaRow, Planer/Büro) ═══════
   Philipp 05.11.: ruhiger, Kalenderform. Tage neutral (keine Farbrotation), „Heute“ in
   Markenfarbe, Status nur als Akzent. Feste Spuren (colgroup + table-layout: fixed): die
   Tageszusammenfassung steht in denselben Spalten wie die Zeilen und fluchtet exakt. */
.kt-agenda-wrap { overflow-x: auto; }
table.kt-agenda { table-layout: fixed; width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; }
.kt-agenda .kt-sp-nr { width: 76px; }
.kt-agenda .kt-sp-zeit { width: 118px; }
.kt-agenda .kt-sp-status { width: 176px; }
.kt-agenda .kt-sp-bes { width: 112px; }
.kt-agenda .kt-sp-offen { width: 100px; }
.kt-agenda .kt-sp-akt { width: 152px; }
.kt-agenda th {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-light); background: var(--bg-card);
  padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left;
}
.kt-agenda td { padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--border-light); }
.kt-agenda .kt-r { text-align: right; }

/* Kalenderwoche als ruhiger Trenner */
.kt-agenda tr.kt-kw-trenner td {
  padding: 16px 12px 6px; border-bottom: none; background: var(--bg-card);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-light);
}

/* Tageskopf: neutral, Kalenderblatt links */
.kt-agenda tr.kt-tag { cursor: pointer; user-select: none; }
.kt-agenda tr.kt-tag td {
  background: var(--bg-surface); padding-top: 7px; padding-bottom: 7px;
  border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  font-size: 12.5px; color: var(--text);
}
.kt-agenda tr.kt-tag:hover td { background: var(--bg-hover); }
.kt-agenda tr.kt-tag > td:first-child { box-shadow: inset 3px 0 0 transparent; }
.kt-tag-inhalt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kt-tag-pfeil {
  font-size: 11px; color: var(--text-light); flex: none;
  transition: transform var(--dauer) var(--feder);
}
.kt-agenda tr.kt-tag.offen .kt-tag-pfeil { transform: rotate(90deg); }
.kt-blatt {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border); line-height: 1;
}
.kt-blatt small { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.kt-blatt b { font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.kt-tag-titel { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-tag-anzahl { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Heute: Markenakzent statt Flächenfarbe */
.kt-agenda tr.kt-tag.heute td { background: var(--marke-bg); }
.kt-agenda tr.kt-tag.heute > td:first-child { box-shadow: inset 3px 0 0 var(--marke-text); }
.kt-agenda tr.kt-tag.heute .kt-blatt { background: var(--marke-text); border-color: var(--marke-text); }
.kt-agenda tr.kt-tag.heute .kt-blatt small, .kt-agenda tr.kt-tag.heute .kt-blatt b { color: var(--bg-card); }
.kt-agenda tr.kt-tag.heute .kt-tag-titel { color: var(--marke-text); }
.kt-heute-marke {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--marke-text); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px;
}
/* Vergangene Tage treten zurück */
.kt-agenda tr.kt-tag.vergangen .kt-tag-titel { color: var(--text-muted); font-weight: 600; }
.kt-agenda tr.kt-tag.vergangen .kt-blatt { opacity: .7; }

/* Veranstaltungszeile */
.kt-agenda tr.kt-va-zeile { cursor: pointer; }
.kt-agenda tr.kt-va-zeile td { background: var(--bg-card); transition: background-color var(--dauer) var(--feder); }
.kt-agenda tr.kt-va-zeile:hover td { background: var(--bg-hover); }
.kt-agenda tr.kt-va-zeile.kt-abgerechnet td { background: color-mix(in srgb, var(--ok) 5%, var(--bg-card)); }
.kt-agenda .kt-nr { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-left: 16px; }
.kt-agenda .kt-zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-agenda .kt-zeit b { font-weight: 600; font-size: 13px; color: var(--text); }
.kt-agenda .kt-zeit small { display: block; font-size: 11.5px; color: var(--text-muted); }
.kt-agenda .kt-leise { color: var(--text-light); }
.kt-agenda .kt-text { overflow: hidden; }
.kt-agenda .kt-titel { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-agenda .kt-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-agenda .kt-projekt { font-size: 11px; font-weight: 600; color: var(--kat-4); }
.kt-agenda .kt-ort {
  display: block; font-size: 12px; color: var(--text-muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kt-agenda .kt-ort:hover { color: var(--primary); }
.kt-agenda .va-nachr-badge {
  background: var(--warn-bg) !important; color: var(--warn-text) !important;
  border-color: color-mix(in srgb, var(--warn) 45%, transparent) !important;
}

/* Status: Chip mit Ton als Akzent */
.kt-status-zelle { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.kt-agenda .va-status-wrapper { position: relative; display: inline-block; }
.kt-status {
  --ton: var(--text-light);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
  font: 600 11.5px var(--font); padding: 3px 9px; border-radius: 999px;
  color: var(--ton); background: color-mix(in srgb, var(--ton) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton) 28%, transparent);
  transition: background-color var(--dauer) var(--feder);
}
.kt-status:hover { opacity: 1; background: color-mix(in srgb, var(--ton) 18%, transparent); }
.kt-status[data-ton="bestellung"] { --ton: var(--kat-6); }
.kt-status[data-ton="forecast"] { --ton: var(--warn-text); }
.kt-status[data-ton="bestaetigt"] { --ton: var(--ok-text); }
.kt-status[data-ton="storniert"] { --ton: var(--fehler-text); }
.kt-status-pfeil { font-size: 9px; opacity: .7; }
.kt-status-menue {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 900; min-width: 150px; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg);
}
.kt-status-menue button {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 8px 14px; border: none; cursor: pointer; font: 600 12px var(--font);
  background: var(--bg-card); color: var(--text-heading);
}
.kt-abr {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-size: 10.5px; font-weight: 650; color: var(--ok-text);
}

/* Besetzung: Zahl mit fluchtendem Schrägstrich + Balken; voll/teil/leer */
.kt-bes { --ton: var(--text-light); display: inline-flex; flex-direction: column; gap: 4px; width: 78px; }
.kt-bes[data-zustand="voll"] { --ton: var(--ok-text); }
.kt-bes[data-zustand="teil"] { --ton: var(--warn-text); }
.kt-bes[data-zustand="leer"] { --ton: var(--fehler-text); }
.kt-bes-zahl {
  display: grid; grid-template-columns: 3ch 1.2ch 3ch; align-items: baseline;
  font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1;
  /* fester Schnitt: ch hängt an der Schriftstärke, sonst rutscht der Schrägstrich im Tageskopf */
  font-weight: 500; letter-spacing: 0;
}
.kt-bes-zahl b { text-align: right; font-weight: 700; color: var(--ton); }
.kt-bes-zahl i { font-style: normal; text-align: center; color: var(--text-light); }
.kt-bes-zahl span { color: var(--text-muted); font-weight: 600; }
.kt-bes-balken { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--ton) 16%, var(--border-light)); }
.kt-bes-balken > span { display: block; height: 100%; border-radius: 4px; background: var(--ton); }
.kt-bes[data-zustand="voll"] .kt-bes-balken > span { background: var(--ok); }
.kt-bes[data-zustand="teil"] .kt-bes-balken > span { background: var(--warn); }

.kt-offen { font-size: 12px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-light); }
.kt-offen[data-zustand="voll"] { color: var(--ok-text); }
.kt-offen[data-zustand="teil"] { color: var(--warn-text); }
.kt-offen[data-zustand="leer"] { color: var(--fehler-text); }

/* Aktionen: Symbolknöpfe in fester Spalte, leise bis zum Überfahren */
.kt-aktionen { display: inline-flex; gap: 2px; justify-content: flex-end; }
.kt-aktionen .btn-icon { color: var(--text-light); width: 30px; height: 30px; padding: 0; justify-content: center; }
.kt-aktionen .btn-icon:hover { color: var(--primary); background: var(--info-bg); }
.kt-aktionen .kt-gefahr:hover { color: var(--fehler-text); background: var(--fehler-bg); }
.kt-agenda tr.kt-va-zeile:hover .kt-aktionen [data-open] { color: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .kt-tag-pfeil, .kt-agenda tr.kt-va-zeile td, .kt-status { transition: none; }
}

/* ═══ Mitarbeiter-Übersicht: Filterleiste wieder einzeilig (Philipp 05.11.) ═══
   Reiter + Suche + Vertragstyp + Sortierung brauchten 1288 px bei 974 px Kartenbreite. */
.kt-ma-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border-light);
}
.kt-ma-filter #ma-status-tabs { flex: none; }
.kt-ma-filter .kt-ma-suche { flex: 1 1 160px; min-width: 140px; max-width: 300px; }
.kt-ma-filter .kt-ma-auswahl { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: none; }
.kt-ma-filter .ma-list-select { width: auto; max-width: 170px; }
.kt-ma-filter [data-status-tab] { padding: 5px 8px !important; gap: 5px !important; }
.kt-ma-filter [data-status-tab] > span { padding: 0 6px !important; font-variant-numeric: tabular-nums; }
.kt-ma-filter .kt-ma-auswahl .ma-list-select { max-width: 138px; padding-right: 26px; text-overflow: ellipsis; }

/* ═══ Planung: schmaler Kopf (Philipp 05.11.) ═══════════════════════════════════
   Vorher drei Bänder (Titel · Monatsleiste · Filter) – jetzt Titel + Monatskacheln + Anlegen in einer Zeile. */
.card-header.kt-plan-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.kt-mstats { display: flex; gap: 6px; margin-left: auto; }
.kt-mstat {
  min-width: 112px; padding: 5px 10px 6px; border-radius: 10px;
  border: 1px solid var(--border-light); background: var(--bg-surface);
}
.kt-mstat.aktuell { border-color: color-mix(in srgb, var(--kt-blau) 35%, var(--border)); background: var(--info-bg); }
.kt-mstat-titel { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; }
.kt-mstat.aktuell .kt-mstat-titel { color: var(--info-text); }
.kt-mstat-werte { display: flex; align-items: baseline; gap: 3px; margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-mstat-werte b { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.kt-mstat-werte i { font-style: normal; color: var(--text-light); }
.kt-mstat-werte span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.kt-mstat-werte small { font-size: 11px; color: var(--text-light); margin-left: 4px; }
.kt-mstat-balken { display: block; height: 3px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: var(--border-light); }
.kt-mstat-balken > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--kt-blau); transition: width var(--dauer) var(--feder); }
.kt-mstat[data-zustand="voll"] .kt-mstat-balken > span { background: var(--ok); }
.kt-plan-aktionen { display: flex; gap: 8px; align-items: center; }

/* ═══ Akten (Personal + Kunde, beide .ma-akte): Felder lesbar (Philipp 05.11.) ═══
   Vorher Rand #E3E7EA auf Weiß (1,2:1) bzw. im Dunkeln Feld = Kartenfarbe → Felder „gingen unter“.
   Jetzt gefüllte Felder mit kräftigerem Rand, Fokus weiß + Markenring; etwas mehr Luft. */
:root { --feld-bg: #F5F7F8; --feld-rand: #C6CDD3; --feld-rand-hover: #98A1A9; }
body.dark-mode { --feld-bg: #131618; --feld-rand: #464D53; --feld-rand-hover: #6B747B; }
.ma-akte .form-grid, .ma-akte .form-grid-3 { gap: 16px 20px; }
.ma-akte .form-group { gap: 6px; }
.ma-akte .form-group label { font-size: 12px; color: var(--text-muted); }
.ma-akte input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.ma-akte select,
.ma-akte textarea {
  background-color: var(--feld-bg);
  border: 1px solid var(--feld-rand);
  color: var(--text);
  font-size: 14px;
}
.ma-akte input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.ma-akte select { height: 38px; }
.ma-akte input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
.ma-akte select:hover, .ma-akte textarea:hover { border-color: var(--feld-rand-hover); }
.ma-akte input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.ma-akte select:focus, .ma-akte textarea:focus {
  background-color: var(--bg-card);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--info-bg);
}
.ma-akte input::placeholder, .ma-akte textarea::placeholder { color: var(--text-light); opacity: 1; }
.ma-akte input:disabled, .ma-akte select:disabled, .ma-akte textarea:disabled,
.ma-akte input[readonly] { background-color: transparent; border-style: dashed; color: var(--text-muted); }

/* ═══ MA-Akte Jahresansicht (mitarbeiter.js loadJahresansicht) – Philipp 05.11. ═══
   Passt sich an: feste Spuren über die volle Breite, Zeilenhöhe aus der Fensterhöhe (31 Zeilen
   passen ins Bild), Monatsnamen kurz bei schmaler Akte. Wochenende ruhig getönt statt schwarz. */
.kt-ja-rahmen {
  container-type: inline-size;
  border: 1px solid var(--border-light); border-radius: 10px; overflow: auto;
  /* Akte = min(92vh, 960px) hoch; abzüglich Akte-Kopf, Jahreszeile, Legende → 32 Zeilen (Kopf + 31 Tage) */
  --ja-zeile: clamp(15px, calc((min(92vh, 960px) - 276px) / 32), 26px);
}
table.kt-ja { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.kt-ja .kt-ja-sp-tag { width: 34px; }
.kt-ja th {
  position: sticky; top: 0; z-index: 2;
  padding: 6px 2px; background: var(--bg-surface); border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kt-ja th .kurz { display: none; }
@container (max-width: 1000px) {
  .kt-ja th .lang { display: none; }
  .kt-ja th .kurz { display: inline; }
}
.kt-ja td {
  position: relative; height: var(--ja-zeile); padding: 0 5px; line-height: 1;
  border-left: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  background: var(--bg-card); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.kt-ja td.kt-ja-tag, .kt-ja th.kt-ja-tag {
  position: sticky; left: 0; z-index: 1; border-left: none; text-align: center;
  background: var(--bg-surface); color: var(--text-light); font-weight: 650; font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.kt-ja th.kt-ja-tag { z-index: 3; }
.kt-ja td .wt { display: inline-block; width: 1.85em; font-size: 9.5px; color: var(--text-light); }
.kt-ja td b { font-weight: 600; font-variant-numeric: tabular-nums; }
.kt-ja td .kw { position: absolute; top: 2px; right: 3px; font-size: 8.5px; font-weight: 600; color: var(--text-light); }
.kt-ja td .ku { margin-left: 4px; font-size: 9.5px; font-weight: 600; }
/* Montag = neue Woche: feine Linie oben */
.kt-ja td.mo { box-shadow: inset 0 1px 0 var(--border-muted); }
/* Wochenende: leicht getönt, Schrift bleibt lesbar */
.kt-ja td.we { background: color-mix(in srgb, var(--text) 5%, var(--bg-card)); }
.kt-ja td.we b { color: var(--text-muted); }
/* Ungültiger Tag (31.02. …) */
.kt-ja td.kt-ja-leer { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--border-light) 5px 6px); }
/* Eingeplant */
.kt-ja td.einsatz { background: var(--kt-blau); color: #FFFFFF; cursor: pointer; }
.kt-ja td.einsatz .wt, .kt-ja td.einsatz .kw { color: rgba(255, 255, 255, .78); }
.kt-ja td.einsatz:hover { background: var(--kt-blau-dunkel); }
/* Heute */
.kt-ja td.heute { background: var(--marke-bg); box-shadow: inset 0 0 0 2px var(--marke-text); }
.kt-ja td.heute b { color: var(--marke-text); font-weight: 700; }
.kt-ja td.einsatz.heute { background: var(--kt-blau); box-shadow: inset 0 0 0 2px var(--kt-tuerkis); }
.kt-ja td.einsatz.heute b { color: #FFFFFF; }
/* Legende */
.kt-ja-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--text-muted); }
.kt-ja-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.kt-ja-muster { display: inline-block; width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--border); }
.kt-ja-muster.einsatz { background: var(--kt-blau); border-color: var(--kt-blau); }
.kt-ja-muster.heute { background: var(--marke-bg); border: 2px solid var(--marke-text); }
.kt-ja-muster.we { background: color-mix(in srgb, var(--text) 5%, var(--bg-card)); }
.kt-ja-muster.frei { background: var(--bg-card); }
.kt-ja-kw-muster { font-size: 8.5px; font-weight: 600; color: var(--text-light); }

/* ═══ CRM-Kundenübersicht (crm.js _renderListe) – Redesign 05.11. ═══════════════
   Gleich gebaute Kennzahl-Karten, eine ruhige Leiste, Tabelle mit festen Spuren.
   Die injizierten Altstile (#crm-styles-v3) bleiben für Detail-/Aufgabenansicht. */
.crm-wrap { container-type: inline-size; }
.kt-crm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@container (min-width: 1180px) { .kt-crm-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kt-kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.kt-kpi-klick { cursor: pointer; transition: border-color var(--dauer) var(--feder); }
.kt-kpi-klick:hover { border-color: color-mix(in srgb, var(--kt-blau) 45%, var(--border)); }
.kt-kpi-kopf {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kt-kpi-kopf i { color: var(--kt-blau); font-size: 13px; }
body.dark-mode .kt-kpi-kopf i { color: var(--kt-tuerkis); }
.kt-kpi-wert {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-heading);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kt-kpi-sub { font-size: 11.5px; color: var(--text-muted); min-height: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.kt-kpi-balken { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: var(--border-light); }
.kt-kpi-balken > span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--kt-blau); transition: width var(--dauer) var(--feder); }

/* Kleine Hinweis-Chips (Plan, Versand, Preise) */
.kt-crm-hinweis {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; text-decoration: none;
  color: var(--neutral-text); background: var(--neutral-bg);
}
.kt-crm-hinweis.ok { color: var(--ok-text); background: var(--ok-bg); }
.kt-crm-hinweis.warn { color: var(--warn-text); background: var(--warn-bg); }
.kt-crm-hinweis.fehler { color: var(--fehler-text); background: var(--fehler-bg); }
a.kt-crm-hinweis:hover { filter: brightness(.96); }

/* Leiste */
.kt-crm-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 8px 10px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.kt-crm-leiste .crm-suche-wrap { flex: 1 1 220px; max-width: 380px; margin: 0; }
.kt-crm-sort { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--text-muted); }
.kt-crm-sort select { height: 32px; padding: 0 8px; font-size: 13px; border-radius: 8px; }
/* Umschalter Kunden | Aufgaben als Segment (Liste + Aufgabenansicht) */
.crm-wrap .kt-crm-umschalter {
  display: inline-flex; gap: 2px; padding: 3px; flex-wrap: nowrap;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface);
}
.crm-wrap .kt-crm-umschalter .crm-sort-pill {
  border: none; background: transparent; color: var(--text-muted);
  padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.crm-wrap .kt-crm-umschalter .crm-sort-pill.active {
  background: var(--bg-card); color: var(--text-heading); box-shadow: var(--shadow);
}
.crm-wrap .crm-sort-pill.active { background: var(--kt-blau); border-color: var(--kt-blau); }

/* Tabelle */
.kt-crm-tabelle-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); }
table.kt-crm-tabelle { table-layout: fixed; width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.kt-crm-tabelle .sp-kunde { width: auto; }
.kt-crm-tabelle .sp-geld { width: 102px; }
.kt-crm-tabelle .sp-vjm { width: 112px; }
.kt-crm-tabelle .sp-gesamt { width: 116px; }
.kt-crm-tabelle .sp-kontakt { width: 104px; }
.kt-crm-tabelle .sp-preise { width: 120px; }
.kt-crm-tabelle .sp-verlauf { width: 92px; }
.kt-crm-tabelle th:first-child, .kt-crm-tabelle td:first-child { padding-left: 16px; }
.kt-crm-tabelle th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 10px; text-align: left; vertical-align: bottom;
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light);
  background: var(--bg-card); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.kt-crm-tabelle th small {
  display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-light);
}
.kt-crm-tabelle td {
  padding: 10px 10px; vertical-align: middle; border-bottom: 1px solid var(--border-light);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.kt-crm-tabelle tr:last-child td { border-bottom: none; }
.kt-crm-tabelle .r { text-align: right; white-space: nowrap; }
.kt-crm-tabelle tr.crm-row { cursor: pointer; }
.kt-crm-tabelle tr.crm-row td { transition: background-color var(--dauer) var(--feder); }
.kt-crm-tabelle tr.crm-row:hover td { background: var(--bg-hover); }
.kt-crm-kunde { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kt-crm-firma { font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kt-crm-kunde .crm-akte-btn { flex: none; width: 26px; height: 26px; padding: 0; justify-content: center; color: var(--text-light); }
.kt-crm-kunde .crm-akte-btn:hover { color: var(--primary); background: var(--info-bg); }
.kt-crm-nr { margin: 2px 0 0 17px; font-size: 11.5px; color: var(--text-light); }
.kt-crm-gesamt { font-weight: 700; color: var(--text-heading); }
.kt-leer { color: var(--text-light); }
.kt-crm-delta { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 650; padding: 0 6px; border-radius: 999px; }
.kt-crm-delta.plus { color: var(--ok-text); background: var(--ok-bg); }
.kt-crm-delta.minus { color: var(--fehler-text); background: var(--fehler-bg); }
.kt-crm-datum { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.kt-crm-vor { font-size: 11.5px; color: var(--text-light); white-space: nowrap; margin-top: 2px; }
.kt-crm-vor.warn { color: var(--warn-text); font-weight: 600; }
.kt-crm-vor.fehler { color: var(--fehler-text); font-weight: 600; }
.kt-crm-preis { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.kt-crm-preis.warn { color: var(--warn-text); background: var(--warn-bg); }
.kt-crm-preis.fehler { color: var(--fehler-text); background: var(--fehler-bg); }
.kt-crm-verlauf { text-align: left; }
.kt-crm-verlauf svg { display: block; }
.kt-crm-fuss { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.kt-crm-legende { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.kt-crm-legende > span { display: inline-flex; align-items: center; gap: 5px; }
.kt-crm-legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Akte-Knopf erst beim Überfahren, ohne Platz zu belegen → Firmenname bekommt die volle Breite */
.kt-crm-tabelle td:first-child { position: relative; }
.kt-crm-kunde .crm-akte-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  opacity: 0; background: var(--bg-card); box-shadow: var(--shadow);
  transition: opacity var(--dauer) var(--feder);
}
.kt-crm-tabelle tr.crm-row:hover .crm-akte-btn, .kt-crm-kunde .crm-akte-btn:focus-visible { opacity: 1; }
/* Lange Firmennamen: höchstens zwei Zeilen statt hartem Abschneiden (bei 1280 px wären sonst 31 von 45 gekürzt) */
.kt-crm-firma { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.kt-crm-tabelle tbody td { height: 64px; }

/* ═══ Bausteine für Modulseiten (05.11.) – Kunden-Anrufe, CRM-Aufgaben, künftige Umstellungen ═══
   Seite · Seitenkopf · Hinweisband · Kennzahlen · Tabelle · Chip. Ton über data-ton (ok/warn/fehler/info/neutral). */
.kt-seite { padding: 16px 20px 60px; }
.kt-seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.kt-seitentitel { margin: 0; font-size: 22px; color: var(--text-heading); display: flex; align-items: center; gap: 8px; }
.kt-seitentitel > i { font-size: 20px; }
.kt-seitentext { margin: 4px 0 0; max-width: 680px; font-size: 13px; color: var(--text-muted); }

.kt-banner {
  /* Ton kommt aus [data-ton]; ohne Angabe neutral (Fallback in var()) */
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px;
  border-radius: 10px; font-size: 13px; font-weight: 650;
  color: var(--ton, var(--neutral-text)); background: var(--ton-bg, var(--neutral-bg));
  border: 1px solid color-mix(in srgb, var(--ton, var(--neutral-text)) 22%, transparent);
}
[data-ton="ok"] { --ton: var(--ok-text); --ton-bg: var(--ok-bg); }
[data-ton="warn"] { --ton: var(--warn-text); --ton-bg: var(--warn-bg); }
[data-ton="fehler"] { --ton: var(--fehler-text); --ton-bg: var(--fehler-bg); }
[data-ton="info"] { --ton: var(--info-text); --ton-bg: var(--info-bg); }
[data-ton="neutral"] { --ton: var(--neutral-text); --ton-bg: var(--neutral-bg); }

.kt-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kt-kpi-wert[data-ton] { color: var(--ton); }
body.dark-mode .kt-chip[data-ton] { color: var(--ton); background: var(--ton-bg); }   /* sonst gewinnt die Kategorie-Regel (grau) */
.kt-kpi-wert[data-ton="neutral"] { color: var(--text-light); }

.kt-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px;
  color: var(--ton, var(--neutral-text)); background: var(--ton-bg, var(--neutral-bg));
}

/* Segment-Umschalter (Filter in einer Leiste, z. B. Werbungstool › Prämien) – aktiver Knopf über aria-pressed */
.kt-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bg-surface); }
.kt-segment > button {
  border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
}
.kt-segment > button:hover { color: var(--text); }
.kt-segment > button[aria-pressed="true"] { background: var(--bg-card); color: var(--text-heading); box-shadow: var(--shadow); }
.kt-segment-zahl { margin-left: 3px; font-size: 10.5px; opacity: .75; font-variant-numeric: tabular-nums; }

.kt-tabelle-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); }
table.kt-tabelle { table-layout: fixed; width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.kt-tabelle th {
  position: sticky; top: 0; z-index: 1; padding: 10px 12px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light);
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.kt-tabelle td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--border-light); color: var(--text); font-variant-numeric: tabular-nums; }
.kt-tabelle th:first-child, .kt-tabelle td:first-child { padding-left: 16px; }
.kt-tabelle tr:last-child td { border-bottom: none; }
.kt-tabelle tbody tr:hover td { background: var(--bg-hover); }
.kt-tabelle .r, .kt-crm-tabelle .r { text-align: right; }
.kt-leer-zeile { padding: 24px !important; text-align: center; color: var(--text-muted); }
.kt-gedimmt td { opacity: .6; }
.kt-zelle-titel { font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-zelle-text { margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-zelle-link { display: block; font-weight: 600; color: var(--text-heading); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-zelle-link:hover { color: var(--primary); text-decoration: underline; }
.kt-tel { color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-tel:hover { color: var(--primary); text-decoration: underline; }
.kt-typ-symbol {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-surface); color: var(--text-muted); font-size: 13px;
}
.kt-tabelle .kt-aktionen, .kt-crm-tabelle .kt-aktionen { gap: 6px; align-items: center; }
.kt-crm-aufgaben .kt-chip { margin-top: 3px; }

/* ═══ MA-App + Kundenportal: Rahmen (ma-app.js / kunden-app.js) – Redesign 05.11. ═══
   Farben der Module kommen seit 05.11. aus den Tokens (werkzeuge/farben_zu_tokens.py).
   Hier nur die Shell: Graphit-Kopf mit K-Tech-Haarlinie (MA), heller Kopf (Kunde), aktive Reiter. */
body #ma-topbar { background: var(--kt-graphit-850); box-shadow: none; position: sticky; }
body #ma-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kt-verlauf-leuchtend);
}
body #ma-logo { font-family: var(--font); }
body .ma-nav-btn:not(.ma-tab-btn) { color: var(--kt-graphit-300); font-weight: 600; }
body .ma-nav-btn:not(.ma-tab-btn):hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
body .ma-nav-btn:not(.ma-tab-btn).ma-nav-active { background: rgba(60, 200, 200, .14); color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--kt-tuerkis); }
body .ma-nav-btn:not(.ma-tab-btn).ma-nav-active .ma-nav-icon { color: var(--kt-tuerkis); }
body #ma-bottom-nav, body #kd-bottom-nav {
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border); box-shadow: none;
}
body .ma-tab-btn.ma-nav-active { color: var(--primary); }
body .ma-tab-btn.ma-nav-active::before { background: var(--kt-verlauf-leuchtend); height: 3px; }
body #ma-content { background: var(--bg); }

body #kd-topbar { background: color-mix(in srgb, var(--bg-card) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); box-shadow: none; }
body #kd-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kt-verlauf-leuchtend); opacity: .9;
}
body .kd-nav-btn { font-weight: 600; }
body .kd-nav-btn.kd-nav-active { background: var(--info-bg); color: var(--info-text); box-shadow: inset 0 -2px 0 var(--kt-blau); }
body #kd-content { background: var(--bg); }
body .kd-card, body .ma-card { border-radius: 12px; border-color: var(--border); box-shadow: var(--shadow); }

/* ═══ Eingabefelder app-weit nach dem Akten-Standard (Philipp 05.11.: „altes Textfelddesign geht unter“) ═══
   Gefüllt (--feld-bg) mit kräftigerem Rand (--feld-rand), Fokus weiß + Markenring. Element-Ebene mit :where(),
   damit Komponenten mit eigener Klasse (z. B. .ma-list-select, Suchpillen) ihr Aussehen behalten. */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])),
select, textarea,
body .kd-input, body .kd-select, body .kd-textarea, body .input {
  background-color: var(--feld-bg);
  border-color: var(--feld-rand);
}
body.dark-mode input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])),
body.dark-mode select, body.dark-mode textarea {
  background-color: var(--feld-bg);
  border-color: var(--feld-rand);
}
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])):hover,
select:hover, textarea:hover,
body .kd-input:hover, body .kd-select:hover, body .kd-textarea:hover { border-color: var(--feld-rand-hover); }
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])):focus,
select:focus, textarea:focus,
body .kd-input:focus, body .kd-select:focus, body .kd-textarea:focus {
  background-color: var(--bg-card);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--info-bg);
}
input::placeholder, textarea::placeholder { color: var(--text-light); opacity: 1; }
/* Suchfeld im Kopf und in .search-box: Füllung ja, Rand über die Box */
.search-box input { background-color: var(--feld-bg); }

/* ═══ Kundenportal: Formulare (Bestellung u. a.) – Abstände und Lesbarkeit ═══ */
body .kd-page-header { margin-bottom: 20px; }
body .kd-page-title { font-family: var(--font-display); font-weight: 300; font-size: 26px; letter-spacing: -0.012em; margin: 0 0 4px; }
body .kd-page-subtitle { font-size: 14px; color: var(--text-muted); }
body .kd-card > form { padding: 4px 24px 22px; }
body .kd-form-section { margin: 0; padding: 20px 0 6px; border-bottom: 1px solid var(--border-light); }
body .kd-form-section:last-of-type { border-bottom: none; }
body .kd-form-section-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; border: none;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
body .kd-form-section-title > i { color: var(--kt-blau); font-size: 14px; }
body .kd-form-row { gap: 16px; }
body .kd-form-group { margin-bottom: 14px; gap: 0; }
body .kd-label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-bottom: 6px;
}
body .kd-input, body .kd-select { height: 40px; padding: 0 12px; border-width: 1px; border-radius: 9px; font-size: 14px; color: var(--text); }
body .kd-textarea { padding: 10px 12px; border-width: 1px; border-radius: 9px; font-size: 14px; }
body .kd-hint { font-size: 12px; color: var(--text-light); margin-top: 6px; line-height: 1.4; }
body .kd-pos-row { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
body .kd-pos-row-top { gap: 10px; margin-bottom: 10px; }
body .kd-pos-row-bottom { gap: 14px; }
body .kd-pos-row .kd-input, body .kd-pos-row .kd-select { background-color: var(--bg-card); }
body .kd-pos-row-bottom .kd-pos-field { gap: 8px; font-size: 12.5px; }
body .kd-pos-row-bottom .kd-pos-field label { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-muted); }
body .kd-input-anzahl { width: 76px; text-align: center; padding: 0 6px; }
body .kd-input-zeit { width: 108px; }
body .kd-form-actions { padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--border-light); gap: 10px; }

/* ═══ MA-Planung: Agenda wie im Büro (planung.js renderList, _state.restricted) – Redesign 05.11. ═══
   Neutral statt Rosa/Gelb/Grün, Kalenderblatt + „Heute“ in Markenfarbe, Karten mit Kundenstreifen. */
body .ma-va-cards { padding-bottom: 12px; }
body .ma-va-cards .kt-ma-kw {
  padding: 16px 14px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-light);
}
body .ma-va-cards .day-hdr.kt-ma-tag {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; user-select: none;
  background: var(--bg-surface); color: var(--text); box-shadow: none;
  border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  font-size: 13px; font-weight: 650;
}
body .ma-va-cards .day-hdr.kt-ma-tag .dl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .ma-va-cards .day-hdr.kt-ma-tag .chv { width: auto; font-size: 11px; opacity: 1; color: var(--text-light); transition: transform var(--dauer) var(--feder); }
body .ma-va-cards .day-hdr.kt-ma-tag.offen .chv { transform: rotate(90deg); }
body .ma-va-cards .day-hdr.kt-ma-tag.heute { background: var(--marke-bg); box-shadow: inset 3px 0 0 var(--marke-text); }
body .ma-va-cards .day-hdr.kt-ma-tag.heute .kt-blatt { background: var(--marke-text); border-color: var(--marke-text); }
body .ma-va-cards .day-hdr.kt-ma-tag.heute .kt-blatt small, body .ma-va-cards .day-hdr.kt-ma-tag.heute .kt-blatt b { color: var(--bg-card); }
body .ma-va-cards .day-hdr.kt-ma-tag.heute .dl { color: var(--marke-text); }
body .ma-va-cards .day-hdr.kt-ma-tag.vergangen .dl { color: var(--text-muted); }
body .ma-va-cards .day-hdr.kt-ma-tag.vergangen .kt-blatt { opacity: .7; }
body .ma-va-cards .kt-ma-tag-anz { flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
body .ma-va-cards .kt-ma-tag-inhalt { padding: 4px 0 8px; background: var(--bg); }

body .ma-va-cards .va-kachel.kt-ma-kachel {
  position: relative; margin: 8px 12px; padding: 11px 13px 11px 17px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  transition: border-color var(--dauer) var(--feder), transform var(--dauer-druck) var(--feder);
}
body .ma-va-cards .va-kachel.kt-ma-kachel::before {
  content: ''; position: absolute; left: 6px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--kunde, var(--kat-10));
}
body .ma-va-cards .va-kachel.kt-ma-kachel:hover { border-color: color-mix(in srgb, var(--kunde, var(--kt-blau)) 45%, var(--border)); }
body .ma-va-cards .va-kachel.kt-ma-kachel:active { transform: scale(.99); box-shadow: var(--shadow); }
body .ma-va-cards .kt-ma-kachel .va-k-kunde { font-size: 14px; font-weight: 650; color: var(--text-heading); }
body .ma-va-cards .kt-ma-kachel .va-k-bottom { margin-top: 6px; gap: 12px; justify-content: flex-start; }
body .ma-va-cards .kt-ma-kachel .va-k-zeit { font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
body .ma-va-cards .kt-ma-kachel .va-k-ort { font-size: 12.5px; color: var(--text-muted); }
body .ma-va-cards .kt-ma-kachel .va-k-hints { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-muted); gap: 6px 14px; }
body .ma-va-cards .kt-ma-kachel .va-k-hints b { font-weight: 650; color: var(--text); }
.kt-bes-chip {
  --ton: var(--text-light);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  color: var(--ton); background: color-mix(in srgb, var(--ton) 12%, transparent);
}
.kt-bes-chip[data-zustand="voll"] { --ton: var(--ok-text); }
.kt-bes-chip[data-zustand="teil"] { --ton: var(--warn-text); }
.kt-bes-chip[data-zustand="leer"] { --ton: var(--fehler-text); }

/* ═══ Grundbausteine app-weit (05.11., Abschluss Systemumbau) ═══════════════════════════
   Tabellen, Badges/Chips, Reiter, Dialoge, Leerzustände im selben Stil wie Agenda/CRM – gilt für alle Module,
   die noch die alten Bausteine aus app.css nutzen. Nur Tokens. */
thead th {
  background: var(--bg-card); color: var(--text-light);
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
body.dark-mode thead th { background: var(--bg-card); color: var(--text-light); }
tbody td { padding: 10px 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
tbody tr { border-bottom-color: var(--border-light); }
.table-wrap { border-radius: 12px; }
.card > .table-wrap { border-radius: 0 0 12px 12px; }

.badge, .chip { font-size: 11.5px; font-weight: 650; padding: 2px 9px; line-height: 1.5; }

.tab-bar { gap: 2px; border-bottom: 1px solid var(--border); }
.tab-btn { color: var(--text-muted); font-weight: 600; padding: 9px 14px; border-radius: 8px 8px 0 0; margin-bottom: -1px; }
.tab-btn:hover { color: var(--text); background: var(--bg-hover); }
.tab-btn.active { color: var(--primary); border-bottom: 2px solid var(--kt-blau); background: transparent; }

.modal { border-radius: 16px; border: 1px solid var(--border); }
.modal-header { padding: 16px 22px; border-bottom-color: var(--border-light); }
.modal-title { font-size: 16px; font-weight: 650; color: var(--text-heading); }
.modal-body { padding: 20px 22px; }
.modal-footer { padding: 14px 22px; border-top-color: var(--border-light); background: var(--bg-surface); border-radius: 0 0 16px 16px; }

.empty-state { padding: 48px 24px; }
.empty-state .icon { font-size: 36px; color: var(--text-light); margin-bottom: 10px; }
.empty-state h3 { font-size: 15px; font-weight: 650; color: var(--text-heading); }
.empty-state p { font-size: 13px; }

.pagination { border-top: 1px solid var(--border-light); }

/* ═══ Schrift app-weit (Abnahme 05.11.: „Bestelleingang hat noch die alte Schrift“) ═══
   1) Knöpfe/Felder erben die Schrift nicht von selbst → fielen auf Arial zurück (u. a. ganze Seitenleiste).
   2) Alte CD-Überschriften „Brandon Black“ stehen als Inline-Stil in ~20 Modulen → hier zentral auf die neue Linie:
      Seitentitel Brandon Light, kleinere Überschriften in der Systemschrift (halbfett). */
button, input, select, textarea, optgroup { font-family: inherit; }
h1[style*="font-weight"], h2[style*="font-weight"] { font-family: var(--font-display) !important; font-weight: 300 !important; letter-spacing: -0.012em; }
[style*="font-display"][style*="font-weight:900"], [style*="font-display"][style*="font-weight: 900"],
[style*="font-display"][style*="font-weight:800"], [style*="font-display"][style*="font-weight: 800"] {
  font-family: var(--font) !important; font-weight: 650 !important; letter-spacing: -0.005em;
}

/* ═══ Formular-Blöcke (Kundenakte Rechnung, Firmendaten-Setup …) – Abnahme 05.11. ═══ */
.kt-formblock { padding: 14px 0 6px; border-bottom: 1px solid var(--border-light); }
.kt-formblock:last-of-type { border-bottom: none; }
.kt-formblock-titel {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.kt-formblock-titel > i { color: var(--kt-blau); font-size: 14px; align-self: center; }
.kt-formblock-titel > span { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-light); }
.kt-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.kt-felder .form-group { margin: 0; min-width: 0; }
.kt-felder .form-group > input, .kt-felder .form-group > select, .kt-felder .form-group > textarea { width: 100%; box-sizing: border-box; }
.kt-span-2 { grid-column: span 2; }
.kt-span-3 { grid-column: 1 / -1; }
.kt-feld-hinweis { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--text-light); }
.kt-formblock-info { margin: 12px 0 4px; font-size: 12px; color: var(--text-muted); }
.kt-formblock-info i { color: var(--info-text); }
@media (max-width: 900px) { .kt-felder { grid-template-columns: 1fr 1fr; } .kt-span-2 { grid-column: 1 / -1; } }
@media (max-width: 560px) { .kt-felder { grid-template-columns: 1fr; } }

/* ═══ Verrechnungssätze (Kundenakte) – nur hinterlegte Sätze, ein Weg zum Anlegen, Lücken-Hinweis ═══ */
.kt-vs-kopf { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.kt-vs-standard { flex: 1; font-size: 13px; color: var(--text); }
.kt-vs-standard strong { font-variant-numeric: tabular-nums; }
.kt-vs-standard span { display: block; font-size: 12px; color: var(--text-light); }
.kt-vs-neu {
  margin: 0 0 14px; padding: 12px 14px 14px; border-radius: 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
}
.kt-vs-neu[hidden], .kt-vs-luecken[hidden], .kt-vs-neu-form[hidden], #vs-neu-suche[hidden], .kt-vs-treffer[hidden] { display: none; }
.kt-vs-neu-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--text-heading); }
.kt-vs-neu #vs-neu-suche { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border-radius: 9px; }
.kt-vs-treffer { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.kt-vs-treffer-zeile, .kt-vs-luecke {
  display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; min-width: 0;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  font: inherit; font-size: 13px; transition: border-color var(--dauer) var(--feder), background-color var(--dauer) var(--feder);
}
.kt-vs-treffer-zeile:hover, .kt-vs-luecke:hover { border-color: var(--kt-blau); background: var(--info-bg); }
.kt-vs-treffer-zeile > i, .kt-vs-luecke > i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.kt-vs-treffer-zeile b, .kt-vs-luecke b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-vs-treffer-zeile span, .kt-vs-luecke span { margin-left: auto; flex: none; font-size: 11.5px; color: var(--text-light); }
.kt-vs-treffer-zeile.neu { grid-column: 1 / -1; color: var(--primary); border-style: dashed; }
.kt-vs-neu-form { margin-top: 4px; }
.kt-vs-neu-gewaehlt { margin-bottom: 10px; }
.kt-vs-neu-aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.kt-vs-tabelle .kt-vs-satz { font-size: 14px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.kt-vs-tabelle tr.kt-vs-verlauf td { background: var(--bg-surface); font-size: 12.5px; }
.kt-vs-tabelle tr.kt-vs-verlauf[hidden] { display: none; }
.kt-vs-verlauf-marke { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.kt-vs-verlauf-btn.aktiv { color: var(--primary); background: var(--info-bg); }
.kt-vs-luecken { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); border: 1px solid var(--warn-rand); }
.kt-vs-luecken-titel { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; font-weight: 650; color: var(--warn-text); }
.kt-vs-luecken-titel span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.kt-vs-luecken-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-vs-luecke em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--primary); margin-left: 6px; }

/* ═══ Firmendaten: Firmenprofil (Übersicht) + Setup (Formulare) – Abnahme 05.11. ═══ */
.kt-firma .tab-bar { padding: 0 16px; align-items: center; }
.kt-firma-trenner { margin: 0 4px 0 14px; padding-left: 14px; border-left: 1px solid var(--border); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); }
.kt-firma-stand { margin-left: 6px; font-size: 10.5px; font-weight: 650; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); font-variant-numeric: tabular-nums; }
.kt-firma-stand[data-voll="1"] { background: var(--ok-bg); color: var(--ok-text); }
.kt-firma .tab-panel { padding: 18px 20px 22px; }
/* Setup kompakt: drei Spalten, Beschriftung normal statt VERSALIEN, wenig Leerraum */
.kt-firma .tab-panel:not(#tab-profil) .form-grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.kt-firma .tab-panel:not(#tab-profil) .form-grid-2 .span-2 { grid-column: 1 / -1; }
.kt-firma .form-group { margin-bottom: 0; }
.kt-firma .form-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.kt-firma .form-control { height: 38px; }
.kt-firma textarea.form-control { height: auto; }
@media (max-width: 900px) { .kt-firma .tab-panel:not(#tab-profil) .form-grid-2 { grid-template-columns: 1fr 1fr; } }

/* Profil */
.kt-fp-kopf { display: flex; align-items: center; gap: 18px; padding: 4px 0 18px; border-bottom: 1px solid var(--border-light); margin-bottom: 16px; flex-wrap: wrap; }
.kt-fp-logo { flex: none; width: 92px; height: 64px; border-radius: 12px; border: 1px solid var(--border); background: var(--kt-graphit-850); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--kt-graphit-300); font-size: 26px; }
.kt-fp-logo img { max-width: 86%; max-height: 80%; object-fit: contain; }
.kt-fp-identitaet { flex: 1; min-width: 240px; }
.kt-fp-identitaet h2 { margin: 0; font-size: 26px; color: var(--text-heading); }
.kt-fp-unterzeile { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.kt-fp-kontakt { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; }
.kt-fp-kontakt a, .kt-fp-kontakt span { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.kt-fp-kontakt a:hover { color: var(--primary); }
.kt-fp-kontakt i { color: var(--text-light); }
.kt-fp-aue {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 10px 14px; border-radius: 12px;
  background: var(--ton-bg, var(--neutral-bg)); color: var(--ton, var(--neutral-text)); border: 1px solid color-mix(in srgb, var(--ton, var(--neutral-text)) 25%, transparent);
}
.kt-fp-aue span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.kt-fp-aue b { font-size: 16px; font-variant-numeric: tabular-nums; }
.kt-fp-aue small { font-size: 11.5px; }
.kt-fp-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.kt-fp-karte { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 4px 14px 10px; }
.kt-fp-karte header { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 4px; }
.kt-fp-karte header > i { color: var(--kt-blau); }
body.dark-mode .kt-fp-karte header > i { color: var(--kt-tuerkis); }
.kt-fp-karte header b { flex: 1; font-size: 13px; font-weight: 650; color: var(--text-heading); }
.kt-fp-bearbeiten { font-size: 11.5px; color: var(--text-light); }
.kt-fp-bearbeiten:hover { color: var(--primary); }
.kt-fp-zeile { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; min-height: 26px; }
.kt-fp-label { flex: none; width: 140px; color: var(--text-muted); font-size: 12.5px; }
.kt-fp-inhalt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kt-fp-wert { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kt-fp-neben { font-size: 12px; color: var(--text-muted); }
.kt-fp-kopie { border: none; background: none; padding: 2px 4px; border-radius: 6px; color: var(--text-light); cursor: pointer; opacity: 0; transition: opacity var(--dauer) var(--feder); }
.kt-fp-zeile:hover .kt-fp-kopie, .kt-fp-kopie:focus-visible { opacity: 1; }
.kt-fp-kopie:hover { color: var(--primary); background: var(--info-bg); }
.kt-fp-inhalt a { color: var(--primary); text-decoration: none; }

/* ═══ Kontrast-Check 05.11. (alle Seiten, hell + dunkel) ═══
   Kräftige Flächen für weiße Schrift: in beiden Modi gleich (≥ 4,5:1 mit Weiß). */
:root { --ok-fill: #18794E; --warn-fill: #9A5B00; --fehler-fill: #B42328; --info-fill: #1E6FC0; --marke-fill: #0E6464; --neutral-fill: #4A525A; }
/* Knöpfe ohne eigene Farbe erbten Schwarz (im Dunkeln unsichtbar) */
button { color: inherit; }
.btn-link { background: none; border: none; color: var(--primary); }
.btn-link:hover { text-decoration: underline; }
/* Indirekt gesetzte Füllflächen (background:${farbe}) mit weißer Schrift: im Dunkeln sind --primary/--kat-* helle
   Schriftfarben → Fläche auf Markenblau bzw. Schrift dunkel. Greift über den Inline-Stil, ohne jede Stelle einzeln anzufassen. */
body.dark-mode [style*="background:var(--primary)"], body.dark-mode [style*="background: var(--primary)"] { background-color: var(--kt-blau) !important; }
body.dark-mode :is([style*="background:var(--kat-"], [style*="background: var(--kat-"], [style*="background:var(--ok)"], [style*="background:var(--warn)"]):is([style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color:white"], [style*="color: white"]) { color: var(--kt-graphit-950) !important; }
:is([style*="background:var(--warn)"], [style*="background: var(--warn)"]):is([style*="color:#fff"], [style*="color: #fff"], [style*="color:white"]) { background-color: var(--warn-fill) !important; }
[style*="background:var(--kt-blau-dunkel)"], [style*="background: var(--kt-blau-dunkel)"] { color: #FFFFFF; }
/* Sortier-/Filterpillen außerhalb des CRM (z. B. Archiv) hatten keinen Grundstil → Browser-Grau */
.crm-sort-pill { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.crm-sort-pill.active { background: var(--kt-blau); border-color: var(--kt-blau); color: #FFFFFF; }
/* Beschriftungen in Formular-Blöcken: normal statt VERSALIEN (app.css setzt label allgemein in Versalien) */
.kt-felder label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; display: block; }

/* Startseite › Offene Stundenabgleiche (06.11.): Metall-Verlauf. Hell wie bisher (Türkis → fast weiß);
   im Dunkelmodus endet er in einem dunklen Stahlgrau statt in Hellweiß, damit die hellen Schriften lesbar bleiben. */
.kt-abgleich-banner {
  background: linear-gradient(135deg, var(--marke-bg) 0%, color-mix(in srgb, var(--kt-tuerkis) 6%, var(--bg-card)) 100%);
}
body.dark-mode .kt-abgleich-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kt-tuerkis) 16%, var(--bg-card)) 0%,
    color-mix(in srgb, #8FA3AA 14%, var(--bg-card)) 60%,   /* farbe-fest: Stahlton des Metall-Verlaufs */
    color-mix(in srgb, #B7C6CB 20%, var(--bg-card)) 100%); /* farbe-fest */
}

/* Metall-Verlauf für Hinweis-Kacheln (06.11.), Farbton über --metall-ton am Element.
   Hell: zarte Tönung; dunkel: getönter Anfang → dunkles Stahlgrau, beide Enden bleiben dunkel (helle Schrift lesbar). */
.kt-metall-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--metall-ton, var(--kt-tuerkis)) 4%, var(--bg-card)) 0%,
    color-mix(in srgb, var(--metall-ton, var(--kt-tuerkis)) 10%, var(--bg-card)) 100%);
}
body.dark-mode .kt-metall-banner {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--metall-ton, var(--kt-tuerkis)) 16%, var(--bg-card)) 0%,
    color-mix(in srgb, #8FA3AA 14%, var(--bg-card)) 60%,   /* farbe-fest: Stahlton */
    color-mix(in srgb, #B7C6CB 20%, var(--bg-card)) 100%); /* farbe-fest */
}