/* ═══════════════════════════════════════════════════════════
   Cumart CRM – Styles
   Version 1.35.1 (Modal-Kanban-Design harmonisiert — einheit-
   liche Sektions-Header, Input-Höhen, Icon- und Button-Größen)
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & BASIS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ═══════════════════════════════════════════════════════════════════════
     v2.0.0 — Design-Tokens (Komplett-Redesign laut Mockups)
     Warm-cremefarbenes Page-BG, weiße Cards mit dünnen Borders, weiche
     Pastell-Status-Pillen, kuratierte 8er-Themen-Palette.
     Bestehende Variablennamen behalten ihre Rolle — nur Werte gemappt.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Hauptpalette */
  --bg:       #F1EFE8;   /* warm-cremiger Page-Hintergrund (statt kalt-weiß) */
  --surface:  #FDFCFA;   /* v2.20.1: Card-Hintergrund minimal wärmer (statt reinem Weiß) — bringt Räumlichkeit gegen den Creme-Page-BG */
  --bg-soft:  #F8F7F2;   /* leicht warm-getöntes Surface (Hero-Cards, gefüllte Felder) */
  --border:   rgba(0,0,0,0.08);   /* 0.5–1 px Default-Border */
  --border-strong: rgba(0,0,0,0.15);  /* Hover/Aktiv */
  --border-accent: rgba(0,0,0,0.30);  /* Akzent-Border (Focus-Ring) */
  --text:     #1F1F1D;   /* warm-schwarz */
  --muted:    #5F5E5A;   /* warm-grau (Sub-Text) */
  --tertiary: #888780;   /* sehr leise Meta-Hints */
  --primary:  #1F1F1D;   /* Primary-Button-Hintergrund (warm-schwarz) */
  --link:     #1d4ed8;
  --danger:   #dc2626;
  --success:  #16a34a;
  --warning:  #d97706;

  /* Radius-Skala */
  --radius-sm: 3px;
  --radius:    8px;     /* alias --radius-md */
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow:    none;    /* v2.0: keine Schatten (Default für volltreuen Flat-Look) */
  --shadow-card: 0 1px 3px rgba(0,0,0,.04); /* v2.20.1: minimaler Tiefen-Schatten für Card-Surfaces */

  /* Status-Pillen — bleiben farbtreu zur v1.x-Praxis */
  --status-plan-bg:        #E6F1FB;
  --status-plan-fg:        #042C53;
  --status-plan-accent:    #1d4ed8;

  --status-done-bg:        #EAF3DE;
  --status-done-fg:        #173404;
  --status-done-accent:    #5a8c1f;

  --status-billed-bg:      #E1F5EE;
  --status-billed-fg:      #04342C;
  --status-billed-accent:  #047857;

  --status-overdue-bg:     #FCEBEB;
  --status-overdue-fg:     #501313;
  --status-overdue-accent: #dc2626;

  --status-holiday-bg:     #FAEEDA;
  --status-holiday-fg:     #412402;
  --status-holiday-accent: #b45309;

  --color-info:            #1d4ed8;

  /* v2.0 — Themen-Farb-Palette (8 kuratierte Pastell-Werte) */
  --theme-blue-bg:    #E6F1FB;  --theme-blue-fg:    #042C53;
  --theme-purple-bg:  #EEEDFE;  --theme-purple-fg:  #26215C;
  --theme-amber-bg:   #FAEEDA;  --theme-amber-fg:   #412402;
  --theme-green-bg:   #EAF3DE;  --theme-green-fg:   #173404;
  --theme-pink-bg:    #FBEAF0;  --theme-pink-fg:    #4B1528;
  --theme-teal-bg:    #E1F5EE;  --theme-teal-fg:    #04342C;
  --theme-red-bg:     #FCEBEB;  --theme-red-fg:     #501313;
  --theme-grey-bg:    #F1EFE8;  --theme-grey-fg:    #3A3A37;

  /* v2.0 — Typ-Pillen (Activity-Stream, Recent-Liste) */
  --type-projekt-bg:   #E6F1FB;  --type-projekt-fg:  #042C53;
  --type-firma-bg:     #E1F5EE;  --type-firma-fg:    #04342C;
  --type-einsatz-bg:   #FAEEDA;  --type-einsatz-fg:  #412402;
  --type-kontakt-bg:   #EEEDFE;  --type-kontakt-fg:  #26215C;
  --type-termin-bg:    #E6F1FB;  --type-termin-fg:   #042C53;
  --type-aufgabe-bg:   #FBEAF0;  --type-aufgabe-fg:  #4B1528;
  --type-notiz-bg:     #F1EFE8;  --type-notiz-fg:    #3A3A37;
  --type-status-bg:    #F1EFE8;  --type-status-fg:   #3A3A37;

  /* v2.0 — Top-Navigation */
  --topnav-height: 56px;

  --mobile-header-height: 56px;
  --mobile-nav-height: 62px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

/* ── LAYOUT ── */
.app { display: flex; min-height: 100vh; }

/* ── DESKTOP-SIDEBAR (v1.36.0; v2.0.0 ausgeblendet — Top-Nav übernimmt) ── */
.sidebar {
  display: none;   /* v2.0.0 Phase 5: ersetzt durch Top-Nav + Sub-Nav-Bars */
}
/* Klassenfolge bleibt für mögliche Mobile-Logik intakt */
.sidebar-fallback {
  width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  flex-direction: column;
  padding: 0;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
}
.sidebar-brand {
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.sidebar-brand-logo {
  width: 100%;
  max-width: 140px;
  height: auto;
  display: block;
}
.sidebar-brand-labels {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 2px;
}
.sidebar-brand-company {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sidebar-brand-app {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 0 14px;
}
.sidebar-user {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-role {
  font-size: 11px; color: var(--muted);
}
.nav { flex: 1; padding: 8px 0; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  border: none; background: none;
  width: 100%; text-align: left;
  border-radius: 0;
  transition: background .1s, color .1s;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active { background: var(--bg); color: var(--text); }
.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--primary, #2563eb);
  border-radius: 10px;
  text-align: center;
  flex-shrink: 0;
}
.nav-badge.nav-badge-overdue { background: #dc2626; }

.nav-bottom {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

/* ── NAV-GRUPPEN MIT SUBMENÜ ── */
.nav-group { display: block; }
.nav-item-group .nav-chevron {
  width: 16px; height: 16px;
  transition: transform .18s ease;
  opacity: .7;
}
.nav-group.open .nav-item-group .nav-chevron {
  transform: rotate(180deg);
}
.nav-submenu { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.nav-group.open .nav-submenu { max-height: 260px; }
/* Gruppe fett hervorheben, wenn Kind-Route aktiv — aber kein hover-bg auf Gruppe */
.nav-group.has-active > .nav-item-group { color: var(--text); }
.nav-item-sub {
  padding-left: 40px;
  font-size: 12.5px;
  gap: 10px;
}
.nav-item-sub svg { width: 15px; height: 15px; opacity: .85; }

/* ── MOBILE HEADER ── */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mobile-header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  z-index: 90;
}
.mobile-header-title { font-size: 16px; font-weight: 600; }
.mobile-header-user { display: flex; align-items: center; gap: 8px; }
.mobile-header-user-name {
  font-size: 12px;
  color: var(--muted);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── MOBILE BOTTOM-NAV ── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-nav-height);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-nav-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 10.5px; font-weight: 500;
  cursor: pointer;
  transition: color .1s;
  min-width: 0;
}
.mobile-nav-item svg { width: 20px; height: 20px; }
.mobile-nav-item.active { color: var(--text); }
.mobile-nav-item.active svg { stroke-width: 2; }
.mobile-nav-item:active { background: var(--bg); }
.mobile-nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── MEHR-OVERLAY ── */
.more-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 950;
  align-items: flex-end;
  justify-content: center;
}
.more-overlay.open { display: flex; }
.more-panel {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 640px;
  padding: 8px 0 env(safe-area-inset-bottom, 0);
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp .22s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.more-title { font-size: 16px; font-weight: 600; }
.more-close {
  background: none; border: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  border-radius: 50%;
}
.more-close:active { background: var(--bg); }
.more-close svg { width: 20px; height: 20px; }
.more-section { padding: 8px 0; border-bottom: 1px solid var(--border); }
.more-section:last-child { border-bottom: none; }
.more-section-title {
  padding: 8px 20px 4px;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.more-item {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border: none; background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.more-item:active { background: var(--bg); }
.more-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
.more-item-danger { color: var(--danger); }
.more-item-danger svg { color: var(--danger); }

/* ── v2.0.0 TOP-NAV (Drei-Bereiche-Architektur) ──────────────────────── */
.app-topnav {
  position: fixed;
  top: 0;
  left: 0;              /* v2.0.0 Phase 5: Sidebar entfernt, Top-Nav full-width */
  right: 0;
  height: var(--topnav-height);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 95;
  gap: 24px;
}
.app-topnav-left {
  display: flex; align-items: center; gap: 28px;
}
.app-topnav-brand {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.2px;
  text-decoration: none;
  cursor: pointer;
}
.app-topnav-tabs {
  display: flex; align-items: center; gap: 4px;
}
.app-topnav-tab {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.app-topnav-tab:hover { background: var(--bg-soft); color: var(--text); }
.app-topnav-tab.active {
  background: var(--surface);
  color: var(--text);
  border: 0.5px solid var(--border);
  font-weight: 500;
}
.app-topnav-right {
  display: flex; align-items: center; gap: 8px;
}
.app-topnav-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--muted);
  transition: border-color .12s, background .12s;
}
.app-topnav-search:hover { border-color: var(--border-strong); }
.app-topnav-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.app-topnav-search .kbd {
  font-size: 11px;
  padding: 1px 5px;
  background: var(--bg);
  border-radius: 3px;
  margin-left: 4px;
}
.app-topnav-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.app-topnav-icon:hover { background: var(--bg-soft); color: var(--text); }
.app-topnav-icon svg { width: 18px; height: 18px; }
.app-topnav-avatar {
  width: 32px; height: 32px;
  background: var(--text);
  color: var(--surface);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Backwards-Kompat: alte .app-header-Klassen verlinken auf neue Top-Nav */
.app-header { display: none; }

/* v2.0.0 — Listen-Sub-Navigation (Firmen/Kontakte/Projekte/Termine/Einsätze/Aufgaben) */
.listen-tab-bar {
  position: sticky;
  top: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0 16px;
  margin: -16px 0 16px;
  border-bottom: 0.5px solid var(--border);
  z-index: 10;
  flex-wrap: wrap;
}
.listen-tab {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 14px;
  border: 0.5px solid transparent;          /* v2.6.3: Border immer reservieren — kein Layout-Shift bei active */
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;                          /* v2.6.3: konstantes Gewicht — kein Wackeln zw. inactive/active */
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background .12s, color .12s;
  min-width: 110px;                          /* v2.6.3: feste Mindestbreite — Counter springt nicht mehr */
  justify-content: center;
}
.listen-tab:hover { background: var(--bg-soft); color: var(--text); }
.listen-tab.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.listen-tab-count {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.listen-tab.active .listen-tab-count { color: var(--text); }

/* v2.25.4 — Gruppierte Reiterleiste (Einstellungen): pro Kategorie eine Zeile mit kleinem Label */
.listen-tab-bar.tab-bar-grouped {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding-top: 8px;
  padding-bottom: 12px;
}
.tab-bar-grouped .tab-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.tab-bar-grouped .tab-group-label {
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 8px;
}
@media (max-width: 720px) {
  .tab-bar-grouped .tab-group-label { flex-basis: 100%; padding: 4px 4px 2px; }
}

/* v2.0.0 — Briefing-V2 (Section-Layout — Heute/Woche/Monat als scrollbare Sections) */
.bv2-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0 8px;
  margin-bottom: 12px;
}
.bv2-header-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
  color: var(--muted); margin-bottom: 4px;
}
.bv2-header-title {
  font-size: 22px; font-weight: 500; margin: 0;
  letter-spacing: -0.2px;
}
.bv2-header-date {
  font-size: 13px; color: var(--muted);
}

/* v2.27.6: Briefing-Sektions-Header prominenter — eigene Zeile, stärkere
   Schrift, farbiger Akzentbalken davor. Damit man auf einen Blick erkennt,
   wo eine neue Sektion beginnt. */
.bv2-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 36px 0 18px;
  padding: 16px 0 12px;
  border-top: 1.5px solid var(--border);
}
.bv2-divider:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.bv2-divider-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text);
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative;
  padding-left: 14px;
}
.bv2-divider-label::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 4px;
  background: var(--text);
  border-radius: 2px;
}
.bv2-divider-hint {
  font-size: 12px; color: var(--muted); flex-shrink: 0;
}
.bv2-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
/* v2.11.7: Kleinerer Sub-Divider (Wochenplan zwischen Tagesplan und Folgen). */
.bv2-divider-sub {
  margin: 18px 0 8px;
  padding: 8px 0 6px;
  border-top: 1px solid var(--border);
}
.bv2-divider-sub .bv2-divider-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  padding-left: 10px;
}
.bv2-divider-sub .bv2-divider-label::before {
  width: 3px;
  background: var(--border-strong);
}
/* v2.11.7: Admin-only Filter-Select rechts im Divider (DIESER MONAT). */
.bv2-divider-filter {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  font-size: 11px; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.bv2-divider-filter-label { font-weight: 500; }
.bv2-divider-filter select {
  font-size: 12px; padding: 4px 8px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
}

.bv2-greeting-line {
  font-size: 14px; color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.bv2-greeting-line strong { font-weight: 500; color: var(--text); }
.bv2-greeting-line .danger { color: var(--danger); font-weight: 500; }

/* HEUTE-Layout
   v2.28.8/10: Sidebar-Spalte streckt sich explizit auf die volle Grid-Row-Höhe,
   der letzte sichtbare Block füllt den verbleibenden Platz. Wenn die ersten
   zwei Slots leer sind (kein Overdue, kein „Heute fällig"), bekommt der
   Hot-Items-Slot die ganze Sidebar-Höhe. */
.bv2-today-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: stretch;
}
.bv2-today-main { display: flex; flex-direction: column; gap: 12px; }
.bv2-today-sidebar {
  display: flex; flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 100%;
}
.bv2-today-sidebar > #bv2-today-data { flex: 1 1 auto; min-height: 0; }
.bv2-today-sidebar > #bv2-today-data .bv2-side-block {
  height: 100%;
  display: flex; flex-direction: column;
}
@media (max-width: 1000px) {
  .bv2-today-layout { grid-template-columns: 1fr; align-items: start; }
  .bv2-today-sidebar { height: auto; min-height: 0; }
  .bv2-today-sidebar > #bv2-today-data { flex: 0; }
  .bv2-today-sidebar > #bv2-today-data .bv2-side-block { height: auto; }
}

.bv2-hero-einsatz {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  border-left: 3px solid var(--status-plan-accent);
  position: relative;
}
/* v2.25.7: Stornierter Hero-Einsatz — prominenter Banner-Strip oben, roter
   Akzent links, Titel/Tagessatz gedimmt + durchgestrichen. */
.bv2-hero-einsatz.is-cancelled {
  border-left-color: var(--status-overdue-accent);
  background:
    repeating-linear-gradient(
      135deg,
      var(--surface) 0 14px,
      var(--status-overdue-bg) 14px 16px
    );
}
.bv2-hero-cancel-banner {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--status-overdue-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.bv2-hero-einsatz.is-cancelled .bv2-hero-title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--status-overdue-accent);
  opacity: 0.75;
}
.bv2-hero-einsatz.is-cancelled .bv2-hero-meta-value {
  text-decoration: line-through;
  opacity: 0.6;
}
.bv2-hero-pills {
  display: inline-flex; gap: 8px; align-items: center;
  margin-bottom: 6px;
}
.bv2-hero-title {
  font-size: 18px; font-weight: 500; margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.2px;
}
.bv2-hero-sub {
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.bv2-hero-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 14px;
}
@media (max-width: 700px) { .bv2-hero-meta { grid-template-columns: 1fr; } }
.bv2-hero-meta-item {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.bv2-hero-meta-label {
  font-size: 10px; color: var(--muted); margin-bottom: 2px;
}
.bv2-hero-meta-value {
  font-size: 13px; font-weight: 500; color: var(--text);
}

.bv2-einsatz-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
@media (max-width: 700px) { .bv2-einsatz-grid { grid-template-columns: 1fr; } }
.bv2-einsatz-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s;
}
.bv2-einsatz-card:hover { border-color: var(--border-strong); }
.bv2-einsatz-card.is-done { opacity: 0.6; }
.bv2-einsatz-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.bv2-einsatz-card-title {
  font-size: 13px; font-weight: 500; margin: 4px 0 2px;
  color: var(--text);
}
.bv2-einsatz-card.is-done .bv2-einsatz-card-title { text-decoration: line-through; }
.bv2-einsatz-card-sub {
  font-size: 11px; color: var(--muted);
}

.bv2-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.4px;
}
.bv2-pill.is-lg { padding: 2px 8px; font-size: 10px; letter-spacing: 0.3px; }
.bv2-pill.is-blue   { background: var(--status-plan-bg);   color: var(--status-plan-fg); }
.bv2-pill.is-lgreen { background: var(--status-done-bg);   color: var(--status-done-fg); }
.bv2-pill.is-dgreen { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.bv2-pill.is-amber  { background: var(--status-holiday-bg); color: var(--status-holiday-fg); }
.bv2-pill.is-red    { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }
.bv2-pill.is-grey   { background: var(--bg);                color: var(--text); }
.bv2-pill.is-purple { background: var(--theme-purple-bg);  color: var(--theme-purple-fg); }

/* v2.25.7 — Storniert in Chrono-Liste und Karten */
.bv2-today-list-row.is-cancelled .bv2-today-list-title {
  text-decoration: line-through;
  text-decoration-color: var(--status-overdue-accent);
  opacity: 0.7;
}
.bv2-today-list-row.is-cancelled .bv2-today-list-sub { opacity: 0.5; }

.bv2-kpi-mini {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
}
@media (max-width: 700px) { .bv2-kpi-mini { grid-template-columns: repeat(2, 1fr); } }
.bv2-kpi-mini-item { padding: 0 4px; }
.bv2-kpi-mini-label { font-size: 10px; color: var(--muted); }
.bv2-kpi-mini-value { font-size: 18px; font-weight: 500; margin-top: 2px; color: var(--text); font-variant-numeric: tabular-nums; }
.bv2-kpi-mini-item.is-danger .bv2-kpi-mini-value { color: var(--danger); }

/* Chronologische Tagesliste (ersetzt KPI-Tiles in HEUTE / Tagesplan-Tafel). */
.bv2-today-list {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}
.bv2-today-list-summary {
  font-size: 11px; color: var(--muted);
  padding: 6px 4px 10px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.bv2-today-list-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 4px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.bv2-today-list-row:last-child { border-bottom: none; }
.bv2-today-list-row:hover { background: var(--bg); }
.bv2-today-list-time {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bv2-today-list-body { min-width: 0; }
.bv2-today-list-title {
  font-size: 13px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv2-today-list-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv2-today-list-empty {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  font-size: 12px; color: var(--muted);
  text-align: center;
}
@media (max-width: 700px) {
  .bv2-today-list-row { grid-template-columns: 64px 72px 1fr; gap: 8px; }
}

.bv2-side-block {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.bv2-side-block.is-info { background: var(--status-plan-bg); }
.bv2-side-block-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.bv2-side-block-label.is-danger { color: var(--danger); }
.bv2-side-block.is-info .bv2-side-block-label { color: var(--status-plan-fg); }
.bv2-side-block-count {
  font-size: 11px; padding: 1px 6px;
  background: var(--status-overdue-bg); color: var(--status-overdue-fg);
  border-radius: var(--radius-sm); font-weight: 500;
}
.bv2-task-row {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
}
.bv2-task-row:last-child { border-bottom: none; }
.bv2-task-row input[type=checkbox] {
  width: 12px; height: 12px; flex-shrink: 0; margin: 0; cursor: pointer;
}
.bv2-task-row-title {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.bv2-task-row-meta {
  font-size: 10px; color: var(--danger); flex-shrink: 0;
}

/* Wochen-Strip */
.bv2-week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
@media (max-width: 700px) { .bv2-week-strip { grid-template-columns: repeat(7, 1fr); font-size: 11px; } }
.bv2-week-day {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.bv2-week-day:hover { background: var(--bg); }
.bv2-week-day.is-today {
  border: 1.5px solid var(--status-plan-accent);
}
.bv2-week-day.is-active {
  border: 1.5px solid var(--text);
  background: var(--bg);
}
.bv2-week-day.is-off { opacity: 0.5; }
/* v2.11.5: Warn-Icon für Einsatz an Feiertag / Wochenende — analog zur
   Kalender-Bar. Sitzt rechts oben in der Strip-Kachel und zieht den Blick. */
.bv2-week-day { position: relative; }
.bv2-week-day-warn {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px;
  color: #b45309;
  background: #fef3c7;
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.4;
}

/* Tagesplan-Tafel unter dem Wochen-Strip (v2.0.1, Punkt 4) */
.bv2-day-plan {
  margin-top: 12px;
}
.bv2-day-plan-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; padding: 0 4px;
}
.bv2-day-plan-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.bv2-day-plan-date {
  font-size: 13px; color: var(--text); font-weight: 500;
}
.bv2-day-plan-reset {
  margin-left: auto;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px; color: var(--muted);
  cursor: pointer;
}
.bv2-day-plan-reset:hover { color: var(--text); border-color: var(--text); }
.bv2-week-day-name {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.bv2-week-day-num { font-size: 16px; font-weight: 500; margin-top: 2px; color: var(--text); }
.bv2-week-day-bar {
  height: 4px; border-radius: 2px;
  margin-top: 8px;
  background: var(--border);
}
.bv2-week-day-bar.is-einsatz  { background: var(--status-done-accent); }
.bv2-week-day-bar.is-termin   { background: var(--status-plan-accent); }
.bv2-week-day-bar.is-feiertag { background: var(--status-holiday-accent); }
.bv2-week-day-bar.is-cancelled { background: var(--status-overdue-accent); }
.bv2-week-day-count { font-size: 11px; margin-top: 6px; color: var(--text); font-variant-numeric: tabular-nums; }
.bv2-week-day-sum { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* Upcoming-Liste */
.bv2-upcoming {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 4px 16px;
}
.bv2-upcoming-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}
.bv2-upcoming-row:hover { background: var(--bg-soft); }
.bv2-upcoming-row:last-child { border-bottom: none; }
.bv2-upcoming-day {
  font-size: 11px; color: var(--muted);
  width: 70px; flex-shrink: 0; font-weight: 500;
}
.bv2-upcoming-title {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500; color: var(--text);
}
.bv2-upcoming-sub {
  font-size: 11px; color: var(--muted);
}

/* Monat — KPIs */
.bv2-month-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 1000px) { .bv2-month-kpis { grid-template-columns: repeat(2, 1fr); } }
.bv2-month-kpi {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border-left: 2px solid var(--border-strong);
}
.bv2-month-kpi.is-blue   { border-left-color: var(--status-plan-accent); }
.bv2-month-kpi.is-lgreen { border-left-color: var(--status-done-accent); }
.bv2-month-kpi.is-amber  { border-left-color: var(--status-holiday-accent); }
.bv2-month-kpi.is-purple { border-left-color: var(--theme-purple-fg); }
.bv2-month-kpi.is-red    { border-left-color: var(--status-overdue-accent); }
.bv2-month-kpi.is-red .bv2-month-kpi-value { color: var(--status-overdue-accent); }
/* v2.25.7: 5. Kachel „Storniert" einblenden → Grid auf 5 Spalten. */
.bv2-month-kpis.has-storno { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .bv2-month-kpis.has-storno { grid-template-columns: repeat(2, 1fr); } }

/* v2.25.7 — Liste der stornierten Einsätze im Monatsbereich */
.bv2-cancelled-block {
  margin-top: 16px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--status-overdue-accent);
  padding: 14px 16px;
}
.bv2-cancelled-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--status-overdue-accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.bv2-cancelled-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.bv2-cancelled-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 120px;
  gap: 12px;
  align-items: baseline;
  padding: 8px 4px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.bv2-cancelled-row:last-child { border-bottom: none; }
.bv2-cancelled-row:hover { background: var(--bg); }
.bv2-cancelled-date  { color: var(--muted); font-variant-numeric: tabular-nums; }
.bv2-cancelled-firma { font-weight: 500; color: var(--text); }
.bv2-cancelled-titel { color: var(--muted); }
.bv2-cancelled-value {
  text-align: right;
  text-decoration: line-through;
  color: var(--status-overdue-accent);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .bv2-cancelled-row { grid-template-columns: 1fr 1fr; row-gap: 2px; }
  .bv2-cancelled-titel, .bv2-cancelled-value { grid-column: span 2; text-align: left; }
}
.bv2-month-kpi-label { font-size: 10px; color: var(--muted); }
.bv2-month-kpi-value { font-size: 22px; font-weight: 500; margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
.bv2-month-kpi-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Auslastung — Stacked-Bar (Erbracht + Geplant) */
.auslastung-stack {
  display: flex;
  height: 6px;
  width: 100%;
  margin-top: 6px;
  background: var(--border, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.auslastung-stack-fill-done {
  background: var(--status-done-accent);
  height: 100%;
}
.auslastung-stack-fill-plan {
  background: var(--status-plan-accent);
  height: 100%;
  opacity: 0.45;
}

/* Monat — Chart-Card */
.bv2-chart-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bv2-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.bv2-chart-title { font-size: 13px; font-weight: 500; color: var(--text); }
.bv2-chart-legend { font-size: 10px; color: var(--muted); }
.bv2-legend-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 4px; vertical-align: middle;
}

/* Monat — Bottom (Top-Kunden + Pipeline) */
.bv2-month-bottom {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 1000px) { .bv2-month-bottom { grid-template-columns: 1fr; } }
.bv2-top-customers, .bv2-pipeline-stages {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.bv2-top-customers-title, .bv2-pipeline-stages-title {
  font-size: 13px; font-weight: 500; margin-bottom: 10px; color: var(--text);
}
.bv2-top-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.bv2-top-row-bar {
  width: 6px; border-radius: 2px;
  background: var(--status-plan-accent); flex-shrink: 0;
}
.bv2-top-row-name {
  flex: 1; font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv2-top-row-value { font-size: 12px; font-weight: 500; flex-shrink: 0; color: var(--text); font-variant-numeric: tabular-nums; }

.bv2-stage-row {
  display: flex; justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 5px;
}
.bv2-stage-row:last-child { margin-bottom: 0; }
.bv2-stage-row.is-lead     { background: var(--status-done-bg);    color: var(--status-done-fg); }
.bv2-stage-row.is-angebot  { background: var(--status-holiday-bg); color: var(--status-holiday-fg); }
.bv2-stage-row.is-arbeit   { background: var(--status-plan-bg);    color: var(--status-plan-fg); }
.bv2-stage-row.is-abschluss { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.bv2-stage-row-name { font-weight: 500; }

/* Veraltete Briefing-V2-Klassen aus Phase 3 — überflüssig dank Section-Layout */
.briefing-v2 {
  background: var(--bg-soft);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border);
}
.briefing-v2-tabs {
  display: flex; gap: 4px;
  margin-bottom: 16px;
}
.briefing-v2-tab {
  padding: 6px 14px;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit; font-size: 14px; font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.briefing-v2-tab:hover { background: var(--surface); color: var(--text); }
.briefing-v2-tab.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  font-weight: 500;
}
.briefing-v2-hero-text {
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 16px;
}
.briefing-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}
@media (max-width: 1024px) {
  .briefing-v2-grid { grid-template-columns: 1fr; }
}
.briefing-v2-main { display: flex; flex-direction: column; gap: 12px; }
.briefing-v2-aside { display: flex; flex-direction: column; gap: 12px; }

/* Hero-Card (aktueller Einsatz heute) */
.briefing-v2-hero-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--status-plan-accent);
  border-radius: var(--radius-md);
  padding: 16px;
}
.briefing-v2-hero-card-pills {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.briefing-v2-hero-card-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.4px;
  color: var(--status-plan-fg);
  background: var(--status-plan-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.briefing-v2-hero-card-title {
  font-size: 16px; font-weight: 500; color: var(--text);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.briefing-v2-hero-card-meta {
  font-size: 13px; color: var(--muted);
}

/* Folge-Karten (Termine/Einsätze nach dem Hauptevent) */
.briefing-v2-follow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 700px) {
  .briefing-v2-follow-grid { grid-template-columns: 1fr; }
}
.briefing-v2-follow-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.briefing-v2-follow-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 0.3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.briefing-v2-follow-title {
  font-size: 14px; font-weight: 500; color: var(--text);
  margin-bottom: 2px;
}
.briefing-v2-follow-meta {
  font-size: 12px; color: var(--muted);
}

/* KPI-Tiles */
.briefing-v2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .briefing-v2-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.briefing-v2-kpi {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.briefing-v2-kpi.is-overdue {
  background: var(--status-overdue-bg);
  border-color: var(--status-overdue-bg);
}
.briefing-v2-kpi-label {
  font-size: 11px; font-weight: 400;
  color: var(--muted);
}
.briefing-v2-kpi.is-overdue .briefing-v2-kpi-label { color: var(--status-overdue-fg); }
.briefing-v2-kpi-value {
  font-size: 22px; font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.briefing-v2-kpi.is-overdue .briefing-v2-kpi-value { color: var(--status-overdue-fg); }

/* Side-Cards (Inbox / Überfällig / Heute fällig) */
.briefing-v2-side-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.briefing-v2-side-title {
  font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.briefing-v2-side-title.is-danger { color: var(--status-overdue-fg); }
.briefing-v2-side-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
}
.briefing-v2-side-item input[type=checkbox] { margin: 0; cursor: pointer; }
.briefing-v2-side-item-label { color: var(--text); }
.briefing-v2-side-item-meta { font-size: 11px; color: var(--status-overdue-accent); font-variant-numeric: tabular-nums; }
.briefing-v2-side-empty { font-size: 13px; color: var(--muted); font-style: italic; }

/* Status-Pillen (allgemeine Komponente — wird auch andernorts genutzt) */
.status-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.status-pill-geplant       { background: var(--status-plan-bg);    color: var(--status-plan-fg); }
.status-pill-durchgefhrt   { background: var(--status-done-bg);    color: var(--status-done-fg); }
.status-pill-abgerechnet   { background: var(--status-billed-bg);  color: var(--status-billed-fg); }
.status-pill-storniert     { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }

/* v2.15.3: Status-Pille als prominenter, klickbarer Picker im Detail-Hero.
   Bg/Color kommen aus den status-pill-{key}-Modifiern (oben definiert) —
   wir verstärken nur Größe, Padding, Schatten und ergänzen die Caret. */
.status-pill-wrap { position: relative; display: inline-block; }
.status-pill-clickable {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.08);
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  letter-spacing: .2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.status-pill-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.status-pill-caret {
  font-size: 11px; opacity: .65;
  line-height: 1;
}

.status-pill-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px;
  overflow: hidden;
}
.status-pill-popup-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
}
.status-pill-popup-item:hover { background: var(--bg); }
.status-pill-popup-item.is-current { background: var(--bg); font-weight: 600; }
.status-pill-popup-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.status-pill-popup-label { flex: 1; }
.status-pill-popup-check { color: var(--success); font-weight: 700; }
.status-pill-popup-empty {
  padding: 12px;
  font-size: 12px; color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* v2.0.0 — Arbeitsplatz */
.arbeitsplatz {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 64px;          /* v2.9.3: Abstand unter der letzten Karte */
}
@media (max-width: 900px) {
  .arbeitsplatz { padding-bottom: calc(var(--mobile-nav-height) + 32px); }
}

/* v2.26.0: Arbeitsplatz neu — Activity-Bar-Layout.
   48-px-Rail links, on-demand-Flyout-Panel (300 px) und große Bühne.
   Statt zweier permanenter Akkordeon-Spalten gibt es eine einzige Rail
   und ein Panel, das nur erscheint wenn der User es explizit braucht. */
.arbeitsplatz-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  min-height: calc(100vh - 80px);
}
/* v2.26.2: Durchgängige Sidebar — kein Card-Look mehr, sondern saubere
   Navigations-Chrome. Inhalte sind kompakt genug, dass alle 15 Buttons
   in den Standard-Viewport passen ohne zu scrollen. */
.ab-rail {
  flex: 0 0 220px;
  width: 220px;
  position: sticky;
  top: 80px;
  align-self: stretch;
  height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 8px;
  gap: 0;
  z-index: 5;
}
.ab-rail-group {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 1px;
}
.ab-rail-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 6px 10px 4px;
}
.ab-rail-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}
.ab-rail-btn {
  display: flex; align-items: center;
  width: 100%;
  padding: 8px 12px;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  color: var(--text);
  transition: background .12s, border-color .12s, color .12s;
}
.ab-rail-btn:hover {
  background: var(--bg);
}
.ab-rail-btn.is-active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.ab-rail-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 24px;
  width: 24px; height: 24px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}
/* v2.27.2: Lucide-Style SVG-Icons im Rail-Icon-Slot */
.ab-rail-icon svg {
  width: 20px; height: 20px;
  display: block;
}
.ab-rail-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-rail-action {
  border-left: 3px solid var(--entity-color, transparent);
  padding-left: 7px;
}
.ab-rail-action .ab-rail-icon { color: var(--entity-color, var(--text)); }
.ab-rail-action:hover {
  background: var(--entity-tint, var(--bg));
}
.ab-rail-panel { color: var(--text); }
.ab-rail-panel .ab-rail-icon { color: var(--muted); font-size: 18px; }
.ab-rail-panel:hover .ab-rail-icon { color: var(--text); }
.ab-rail-panel.is-active .ab-rail-icon { color: var(--surface); }

/* Entity-Farbtokens für die Rail-Action-Buttons (gleiches Schema wie früher) */
.ab-rail-action[data-entity="firma"]   { --entity-color: #047857; --entity-tint: #E1F5EE; }
.ab-rail-action[data-entity="kontakt"] { --entity-color: #6d28d9; --entity-tint: #EEEDFE; }
.ab-rail-action[data-entity="projekt"] { --entity-color: #1d4ed8; --entity-tint: #E6F1FB; }
.ab-rail-action[data-entity="einsatz"] { --entity-color: #b45309; --entity-tint: #FAEEDA; }
.ab-rail-action[data-entity="termin"]  { --entity-color: #0e7490; --entity-tint: #E0F2F1; }
.ab-rail-action[data-entity="aufgabe"] { --entity-color: #be185d; --entity-tint: #FBEAF0; }
.ab-rail-action[data-entity="notiz"]   { --entity-color: #57534e; --entity-tint: #EFEDE8; }

/* On-Demand-Flyout — schiebt sich rechts neben die Rail rein wenn ein
   Panel aktiv ist. Klick außerhalb oder Esc schließt es wieder.
   v2.26.3: 420 px breit für saubere Lesbarkeit der Listen-Inhalte;
   gleiche Card-Optik wie die Rail, damit alles aus einem Guss wirkt. */
.ab-flyout {
  flex: 0 0 420px;
  width: 420px;
  position: sticky;
  top: 80px;
  align-self: stretch;
  height: calc(100vh - 80px);
  margin-left: 12px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 4;
  animation: ab-flyout-in .15s ease-out;
}
.ab-flyout[hidden] { display: none; }
@keyframes ab-flyout-in {
  from { transform: translateX(-8px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.ab-flyout-header {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.ab-flyout-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
}
.ab-flyout-close {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  color: var(--muted);
}
.ab-flyout-close:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.ab-flyout-body {
  padding: 12px 14px;
}
.ab-flyout-panel[hidden] { display: none; }

/* Bühne in der Mitte — volle restliche Breite. Top-Padding entfernt,
   damit die Welcome-Card oben auf gleicher Höhe wie die Rail-Spalte
   beginnt (Design-Konsistenz). */
.ab-stage {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 12px;
  padding: 0 0 64px;
}

/* v2.26.4 — Welcome-Card-Inhalt: Greeting, KPI-Tiles, Quick-Access-Karten.
   Macht den ehemals leeren Startbildschirm zu einem aktiven Dashboard. */
.ab-welcome-greet { margin-bottom: 16px; }
.ab-welcome-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ab-welcome-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.3px;
}

/* v2.28.3: KPIs sitzen jetzt rechts neben der Schnell-Eingabe als 2×2-Grid. */
.ab-welcome-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}
.ab-welcome-main-row .arbeitsplatz-capture {
  margin-top: 0;
  display: flex; flex-direction: column;
}
.ab-welcome-main-row .arbeitsplatz-capture input { flex: 1; }
.ab-welcome-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
@media (max-width: 1100px) {
  .ab-welcome-main-row { grid-template-columns: 1fr; }
  .ab-welcome-kpis { grid-template-rows: auto; }
}
@media (max-width: 600px) {
  .ab-welcome-kpis { grid-template-columns: 1fr; }
}
.ab-welcome-kpi {
  text-align: left;
  display: flex; flex-direction: column;
  gap: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, transform .12s;
}
.ab-welcome-kpi:hover {
  background: var(--surface);
  transform: translateY(-1px);
}
.ab-welcome-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--muted);
  text-transform: uppercase;
}
.ab-welcome-kpi-value {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ab-welcome-kpi-sub {
  font-size: 11px;
  color: var(--muted);
}
.ab-welcome-kpi.is-einsatz  { border-left-color: #b45309; }
.ab-welcome-kpi.is-einsatz .ab-welcome-kpi-value { color: #b45309; }
.ab-welcome-kpi.is-termin   { border-left-color: #0e7490; }
.ab-welcome-kpi.is-termin .ab-welcome-kpi-value  { color: #0e7490; }
.ab-welcome-kpi.is-aufgabe  { border-left-color: #be185d; }
.ab-welcome-kpi.is-aufgabe .ab-welcome-kpi-value { color: #be185d; }
.ab-welcome-kpi.is-overdue  { border-left-color: var(--border-strong); }
.ab-welcome-kpi.is-overdue.is-alert { border-left-color: var(--status-overdue-accent); background: var(--status-overdue-bg); }
.ab-welcome-kpi.is-overdue.is-alert .ab-welcome-kpi-value { color: var(--status-overdue-accent); }

.ab-welcome-kpi-skel {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: 84px;
}

/* v2.28.3: alte 4-Spalten-Variante entfernt — Layout wird oben (.ab-welcome-main-row)
   gesteuert. Dieser Block bleibt leer für künftige KPI-spezifische Mobile-Regeln. */

/* Section „Schnell weitermachen" / „Fortführen"
   v2.26.7 → v2.27.6: Sektions-Header läuft als breiter grauer Streifen
   über die Karte, Titel ist größer + dunkler, mit Akzentbalken vorn.
   So sieht man auf einen Blick, wo eine neue Sektion beginnt. */
.ab-welcome-section { margin-top: 28px; }
.ab-welcome-section-head {
  margin: 0 -22px 16px;
  padding: 14px 22px;
  background: var(--bg-soft);
  border-top: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
}
.ab-welcome-section-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text);
  text-transform: uppercase;
  position: relative;
  padding-left: 14px;
}
.ab-welcome-section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 4px;
  background: var(--text);
  border-radius: 2px;
}

/* v2.28.3: KPI + Capture leben jetzt in einer eigenen Row (.ab-welcome-main-row).
   Margin-top wird dort gesetzt, nicht mehr separat pro Element. */

/* Welcome-Card schneidet die Sektions-Streifen sauber an den Rundungen ab */
.stage-welcome-card { overflow: hidden; }
.ab-welcome-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.ab-welcome-card {
  text-align: left;
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.ab-welcome-card:hover {
  border-color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.ab-welcome-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.ab-welcome-card-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--entity-tint, var(--bg));
  color: var(--entity-color, var(--text));
  font-size: 11px; font-weight: 700;
  letter-spacing: .3px;
}
.ab-welcome-card-pin {
  font-size: 12px;
  color: #f59e0b;
}
.ab-welcome-card-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .7px;
  color: var(--entity-color, var(--muted));
  text-transform: uppercase;
}
.ab-welcome-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.ab-welcome-card-sub {
  font-size: 11px;
  color: var(--muted);
}

/* Entity-Farbtokens pro Quick-Access-Karte (gleiche Palette wie die Rail) */
.ab-welcome-card[data-entity="firma"]   { --entity-color: #047857; --entity-tint: #E1F5EE; }
.ab-welcome-card[data-entity="kontakt"] { --entity-color: #6d28d9; --entity-tint: #EEEDFE; }
.ab-welcome-card[data-entity="projekt"] { --entity-color: #1d4ed8; --entity-tint: #E6F1FB; }
.ab-welcome-card[data-entity="einsatz"] { --entity-color: #b45309; --entity-tint: #FAEEDA; }
.ab-welcome-card[data-entity="termin"]  { --entity-color: #0e7490; --entity-tint: #E0F2F1; }

/* v2.26.5 — Fortführen-Action-Karten unter „Schnell weitermachen".
   Drei Karten in einer Reihe, jeweils mit Icon links und 2 Zeilen Text. */
.ab-welcome-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .ab-welcome-actions { grid-template-columns: 1fr; }
}
.ab-welcome-action {
  display: flex; align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--entity-color, var(--border-strong));
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .12s, transform .12s, box-shadow .12s, background .12s;
}
.ab-welcome-action:hover {
  background: var(--entity-tint, var(--bg));
  border-color: var(--entity-color, var(--border-strong));
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.ab-welcome-action-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--entity-tint, var(--bg));
  color: var(--entity-color, var(--text));
  font-size: 18px;
  font-weight: 600;
}
.ab-welcome-action-body {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.ab-welcome-action-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.ab-welcome-action-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
/* v2.27.7: Kleiner Hinweis-Chip am Ende jeder Fortführen-Karte, der
   verdeutlicht, dass nach der Auswahl direkt in den Doku-Tab gesprungen
   wird (statt in die Aktivitäten oder eine generische Detail-Page). */
.ab-welcome-action-hint {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  background: var(--entity-tint, var(--bg-soft));
  color: var(--entity-color, var(--muted));
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  align-self: flex-start;
}
.ab-welcome-action-hint::before {
  content: '→';
  font-size: 11px;
  line-height: 1;
}

.ab-welcome-action[data-entity="firma"]   { --entity-color: #047857; --entity-tint: #E1F5EE; }
.ab-welcome-action[data-entity="kontakt"] { --entity-color: #6d28d9; --entity-tint: #EEEDFE; }
.ab-welcome-action[data-entity="projekt"] { --entity-color: #1d4ed8; --entity-tint: #E6F1FB; }
.ab-welcome-action[data-entity="einsatz"] { --entity-color: #b45309; --entity-tint: #FAEEDA; }
.ab-welcome-action[data-entity="termin"]  { --entity-color: #0e7490; --entity-tint: #E0F2F1; }
.arbeitsplatz-col-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.arbeitsplatz-actions-list {
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.arbeitsplatz-action-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px 11px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--entity-color, var(--border));
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.arbeitsplatz-action-row:hover {
  background: var(--entity-tint, var(--bg));
  border-color: var(--entity-color, var(--primary));
  border-left-color: var(--entity-color, var(--primary));
  transform: translateX(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.arbeitsplatz-action-row.is-active {
  background: var(--entity-color, var(--text));
  color: #fff;
  border-color: var(--entity-color, var(--text));
  font-weight: 600;
  transform: translateX(0);
}
.arbeitsplatz-action-row.is-active:hover {
  background: var(--entity-color, var(--text));
  transform: translateX(0);
}

/* v2.20.0: Entity-Farbcodierung — pro Aktion eigener Akzent.
   Tokens kommen aus dem bestehenden --type-*-fg/bg-System (v2.0). */
.arbeitsplatz-action-row[data-action="firma"],   .arbeitsplatz-live-preview[data-action="firma"]   { --entity-color: #047857; --entity-tint: #E1F5EE; }
.arbeitsplatz-action-row[data-action="kontakt"], .arbeitsplatz-live-preview[data-action="kontakt"] { --entity-color: #6d28d9; --entity-tint: #EEEDFE; }
.arbeitsplatz-action-row[data-action="projekt"], .arbeitsplatz-live-preview[data-action="projekt"] { --entity-color: #1d4ed8; --entity-tint: #E6F1FB; }
.arbeitsplatz-action-row[data-action="einsatz"], .arbeitsplatz-live-preview[data-action="einsatz"] { --entity-color: #b45309; --entity-tint: #FAEEDA; }
.arbeitsplatz-action-row[data-action="termin"],  .arbeitsplatz-live-preview[data-action="termin"]  { --entity-color: #0e7490; --entity-tint: #E0F2F1; }
.arbeitsplatz-action-row[data-action="aufgabe"], .arbeitsplatz-live-preview[data-action="aufgabe"] { --entity-color: #be185d; --entity-tint: #FBEAF0; }
.arbeitsplatz-action-row[data-action="notiz"],   .arbeitsplatz-live-preview[data-action="notiz"]   { --entity-color: #57534e; --entity-tint: #EFEDE8; }

.arbeitsplatz-live-preview {
  margin-top: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--entity-tint, var(--surface));
  border: 1px dashed var(--entity-color, var(--primary));
  border-left: 3px solid var(--entity-color, var(--primary));
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text);
}
.stage-preview-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: var(--entity-color, var(--primary)); margin-bottom: 6px;
}
.stage-preview-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.stage-preview-hint {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}

/* v2.19.0 (Phase 3): Karteikarten-Sicht in der Stage */
.stage-card { padding: 0; }
.stage-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.stage-card-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .9px;
  color: var(--muted); margin-bottom: 6px;
}
.stage-card-title {
  font-size: 26px; font-weight: 600;
  color: var(--text); margin: 0;
  letter-spacing: -0.4px;
}
.stage-card-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.stage-card-status {
  font-size: 12px; font-weight: 600;
  padding: 4px 12px;
  background: var(--bg);
  border-radius: 999px;
  color: var(--text);
}
.stage-card-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stage-card-metric {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.stage-card-metric-label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  color: var(--muted); margin-bottom: 4px;
  text-transform: uppercase;
}
.stage-card-metric-value {
  font-size: 15px; font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.stage-card-section { margin-top: 8px; }
.stage-card-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.stage-card-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
}
.stage-card-filter-pills {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.stage-card-note-input {
  display: flex; gap: 8px;
  margin-bottom: 16px;
}
.stage-card-note-input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 14px;
  background: var(--bg);
  color: var(--text);
}
.stage-card-note-input input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.stage-card-note-btn {
  padding: 0 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  letter-spacing: .3px;
}
.stage-card-note-btn:hover { background: #000; }
.stage-card-activity.is-clickable { cursor: pointer; }
.stage-card-activity.is-clickable:hover { background: var(--bg); }
.stage-card-activity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-bottom: 0.5px solid var(--border);
  align-items: baseline;
  border-radius: var(--radius-sm);
}
.stage-card-activity:last-child { border-bottom: none; }
.stage-card-activity-type {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  color: var(--primary);
  white-space: nowrap;
  text-transform: uppercase;
}
.stage-card-activity-text {
  font-size: 13px; color: var(--text);
  word-break: break-word;
}
.stage-card-activity-meta {
  font-size: 11px; color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .stage-card-metrics { grid-template-columns: 1fr; }
}

.arbeitsplatz-col-center { min-width: 0; }
.arbeitsplatz-stage {
  /* v2.24.3: kein eigener Container-Rahmen mehr — die Stage ist nur
     Layout-Slot, das eigentliche Card-Design liegt auf dem Welcome-Block
     bzw. der embedded Detail-Page/Drawer. So sieht es nicht überflüssig
     verschachtelt aus. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: auto;
  box-shadow: none;
}
/* v2.23.0: Wenn eine Detail-Page in der Stage aktiv ist,
   Welcome-Block ausblenden und Stage-Box transparent machen
   (die Detail-Page bringt ihre eigene Hero-/Card-Optik mit). */
#arbeitsplatz-stage:has(> .page.active) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
#arbeitsplatz-stage:has(> .page.active) > .stage-welcome { display: none; }
#arbeitsplatz-stage > .page { display: none; }
#arbeitsplatz-stage > .page.active { display: block; }
.stage-welcome-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 4px;
  letter-spacing: -0.3px;
}
.stage-welcome-hint {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.45;
  max-width: 520px;
}

/* v2.24.3: Welcome-Karte als kompakte, scharf umrandete Card mit eigener
   Identität — keine sehr großen Flächen mehr. */
.stage-welcome-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 22px 16px;
  box-shadow: var(--shadow-card);
  max-width: none;
}
.stage-welcome-card .arbeitsplatz-col-eyebrow {
  margin-bottom: 4px;
}
/* v2.28.6: Capture-Box ist jetzt eine Spalte mit „Bezogen auf" oben und
   einem mehrzeiligen Textarea darunter. Höhe spannt sich symmetrisch zur
   KPI-Spalte rechts auf (durch flex column + textarea flex:1). */
.stage-welcome-card .arbeitsplatz-capture {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  gap: 10px;
}
.stage-welcome-card .arbeitsplatz-capture textarea,
.stage-welcome-card .arbeitsplatz-capture input {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  width: 100%;
  flex: 1;
  resize: none;
  color: var(--text);
  line-height: 1.5;
  /* Textarea-Cursor startet oben links — Standardverhalten, hier nur
     explizit machen, damit nichts ausversehen zentriert wirkt. */
  vertical-align: top;
}
.stage-welcome-card .arbeitsplatz-capture textarea:focus,
.stage-welcome-card .arbeitsplatz-capture input:focus { outline: none; }
.stage-welcome-card .arbeitsplatz-context-row {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
  font-size: 11px;
  flex-wrap: wrap;
}
.stage-welcome-card .arbeitsplatz-context-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--muted);
  text-transform: uppercase;
}

.arbeitsplatz-widget {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.arbeitsplatz-widget summary {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted);
  list-style: none;
  user-select: none;
  display: flex; align-items: center; justify-content: space-between;
}
.arbeitsplatz-widget summary::-webkit-details-marker { display: none; }
.arbeitsplatz-widget summary::after {
  content: '＋';
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}
.arbeitsplatz-widget[open] summary::after { content: '−'; }
.arbeitsplatz-widget:hover summary { background: var(--bg); }
.arbeitsplatz-widget-body {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
}
.arbeitsplatz-widget .info-card-empty { padding: 4px 0; font-size: 12px; }

/* Mobile / schmale Viewports: Rail schrumpft auf reine Icon-Spalte (60 px),
   damit die Bühne weiterhin Platz hat. Labels sind ausgeblendet, aber per
   Tooltip (data-attribute) noch erreichbar. */
@media (max-width: 1000px) {
  .arbeitsplatz-shell {
    min-height: calc(100vh - var(--mobile-nav-height) - 80px);
    padding-bottom: var(--mobile-nav-height);
  }
  .ab-rail {
    flex: 0 0 60px;
    width: 60px;
    padding: 10px 4px;
  }
  .ab-rail-btn {
    justify-content: center;
    padding: 8px 0;
    gap: 0;
  }
  .ab-rail-action { padding-left: 0; border-left-width: 0; }
  .ab-rail-action .ab-rail-icon { border-left: 3px solid var(--entity-color, transparent); padding-left: 6px; }
  .ab-rail-label { display: none; }
  .ab-rail-section-label { display: none; }
  .ab-rail-icon { font-size: 20px; flex-basis: 24px; width: 24px; height: 24px; }
  .ab-flyout {
    position: fixed;
    top: 56px;
    left: 64px;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    margin-left: 0;
    z-index: 50;
  }
  .ab-stage { padding: 0 12px; margin-left: 8px; }
  .stage-welcome-title { font-size: 22px; }
}
.arbeitsplatz-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.arbeitsplatz-eyebrow {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
}
.arbeitsplatz-date {
  font-size: 13px; color: var(--muted);
}
.arbeitsplatz-title {
  font-size: 28px; font-weight: 500;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}
.arbeitsplatz-capture {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.arbeitsplatz-capture input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 4px 0;
  margin-bottom: 12px;
}
.arbeitsplatz-capture input:focus { outline: none; }
.arbeitsplatz-capture input::placeholder { color: var(--tertiary); }
.arbeitsplatz-context-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  flex-wrap: wrap;
}
.arbeitsplatz-context-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--muted);
  text-transform: uppercase;
}
.arbeitsplatz-context-pill-area {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.arbeitsplatz-context-set {
  background: transparent;
  border: 0.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  font-family: inherit; font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.arbeitsplatz-context-set:hover { border-color: var(--text); color: var(--text); }
.arbeitsplatz-context-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px;
  background: var(--bg-soft);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12px; font-weight: 500;
  color: var(--text);
}
.arbeitsplatz-context-clear {
  border: none; background: transparent;
  cursor: pointer; color: var(--muted);
  font-size: 14px; line-height: 1;
  padding: 0 4px;
  border-radius: 3px;
}
.arbeitsplatz-context-clear:hover { color: var(--text); background: var(--border); }
.arbeitsplatz-context-hint {
  font-size: 11px; color: var(--muted); font-style: italic;
}
.arbeitsplatz-capture-hint {
  margin-left: auto;
  font-size: 11px; color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}

.arbeitsplatz-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .arbeitsplatz-tiles { grid-template-columns: repeat(2, 1fr); } }
.arbeitsplatz-tile {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 400;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.arbeitsplatz-tile:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.arbeitsplatz-tile-template {
  background: var(--bg-soft);
}
/* v2.2.0: Vorbereiten/Fortführen-Tiles dezenter, Eyebrow oben drüber */
.arbeitsplatz-section-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin: 8px 0 8px;
}
.arbeitsplatz-tile-secondary {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
.arbeitsplatz-tile-secondary:hover { color: var(--text); }

/* v2.8.1: Klare Sektions-Karten auf dem Arbeitsplatz — jede Sektion
   bekommt einen eigenen weißen Block mit prominentem Header. */
.arbeitsplatz-shortcuts-block,
.arbeitsplatz-pins-block,
.arbeitsplatz-inbox-block,
.arbeitsplatz-care-block {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
}
/* Größerer Eyebrow-Header mit farbigem Akzent — analog Drawer-Sections (v2.1.4) */
.arbeitsplatz-shortcuts-block .arbeitsplatz-section-eyebrow,
.arbeitsplatz-pins-block .arbeitsplatz-section-eyebrow,
.arbeitsplatz-inbox-block .arbeitsplatz-section-eyebrow,
.arbeitsplatz-care-block .arbeitsplatz-section-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.arbeitsplatz-shortcuts-block .arbeitsplatz-section-eyebrow::before,
.arbeitsplatz-pins-block .arbeitsplatz-section-eyebrow::before,
.arbeitsplatz-inbox-block .arbeitsplatz-section-eyebrow::before,
.arbeitsplatz-care-block .arbeitsplatz-section-eyebrow::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary, #1e40af);
  flex-shrink: 0;
}

/* v2.8.0/1: Shortcuts — Karten zeigen Label vollständig (2 Zeilen) */
.arbeitsplatz-shortcuts {
  display: flex; flex-direction: column; gap: 12px;
}
.arbeitsplatz-shortcut-group-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.arbeitsplatz-shortcut-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.arbeitsplatz-shortcut-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft, #f8f5ec);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
  transition: background .12s, border-color .12s, transform .08s;
  cursor: pointer;
  min-height: 56px;
}
.arbeitsplatz-shortcut-card:hover {
  background: var(--surface);
  border-color: var(--border-strong, var(--text));
  transform: translateY(-1px);
}
.arbeitsplatz-shortcut-icon {
  font-size: 22px; line-height: 1;
  flex-shrink: 0;
}
.arbeitsplatz-shortcut-label {
  font-size: 13px; font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* v2.3.0: Angeheftet (Pins) */
.arbeitsplatz-pins-block { margin-bottom: 24px; }
.arbeitsplatz-pins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.arbeitsplatz-pin-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: background .12s, border-color .12s;
}
.arbeitsplatz-pin-card:hover { background: var(--bg-soft); }
.arbeitsplatz-pin-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase;
}
.arbeitsplatz-pin-title { font-size: 13px; font-weight: 500; color: var(--text); }

/* v2.3.0 → v2.26.3: Dranbleiben (Inbox) — gestapeltes Layout statt 3-Spalten-
   Grid, damit Titel komplett lesbar bleiben und Badges nicht den ganzen
   Platz wegnehmen. Reihenfolge je Zeile: Badge · Titel · Meta (Datum/Firma). */
.arbeitsplatz-inbox-block { margin-bottom: 24px; }
.arbeitsplatz-inbox-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--border);
  padding: 12px 4px;
  text-align: left;
  font-family: inherit; font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.arbeitsplatz-inbox-row:hover { background: var(--bg-soft); }
.arbeitsplatz-inbox-row:last-child { border-bottom: none; }
.arbeitsplatz-inbox-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.arbeitsplatz-inbox-badge.is-overdue { background: #fee2e2; color: #991b1b; }
.arbeitsplatz-inbox-badge.is-today   { background: #fef3c7; color: #92400e; }
.arbeitsplatz-inbox-badge.is-soon    { background: #e0e7ff; color: #3730a3; }
.arbeitsplatz-inbox-badge.is-warn    { background: #fef3c7; color: #92400e; }
.arbeitsplatz-inbox-badge.is-neutral { background: #f3f4f6; color: #6b7280; }
.arbeitsplatz-inbox-title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  width: 100%;
}
.arbeitsplatz-inbox-meta {
  font-size: 11px;
  color: var(--muted);
  width: 100%;
}

/* v2.3.0: Datenpflege */
.arbeitsplatz-care-block { margin-bottom: 24px; }
.arbeitsplatz-care {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.arbeitsplatz-care-item {
  background: transparent;
  border: 0.5px dashed var(--border-strong, #cbd5e1);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-family: inherit; font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.arbeitsplatz-care-item:hover { color: var(--text); border-color: var(--text); }

/* v2.3.0 / v2.9.13: Pin-Button auf Detail-Pages (sauberer SVG-Stern statt Emoji) */
.btn-pin {
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.12s, background 0.12s, transform 0.08s;
  padding: 0;
}
.btn-pin svg { width: 18px; height: 18px; fill: none; transition: fill 0.12s; }
.btn-pin:hover { background: var(--bg-soft); color: var(--text); transform: translateY(-1px); }
.btn-pin[data-pinned="true"] { color: #f59e0b; }
.btn-pin[data-pinned="true"] svg { fill: #f59e0b; }
.btn-pin[data-pinned="true"]:hover { background: rgba(245, 158, 11, 0.1); }

/* v2.9.13: Stern-Button in Suchergebnissen */
.search-item-star {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.12s, background 0.12s;
  padding: 0;
  margin-right: 4px;
  flex-shrink: 0;
}
.search-item-star svg { width: 16px; height: 16px; fill: none; transition: fill 0.12s; }
.search-item-star:hover { background: var(--bg-soft); color: var(--text); }
.search-item-star[data-pinned="true"] { color: #f59e0b; }
.search-item-star[data-pinned="true"] svg { fill: #f59e0b; }

.arbeitsplatz-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .arbeitsplatz-grid { grid-template-columns: 1fr; } }
.arbeitsplatz-side {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.arbeitsplatz-side-title {
  /* v2.8.1: angeglichen an die neuen Sektions-Header (kräftiger + farbiger Punkt) */
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.arbeitsplatz-side-title::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary, #1e40af);
  flex-shrink: 0;
}
.arbeitsplatz-side-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.arbeitsplatz-side-title-row .arbeitsplatz-side-title { margin-bottom: 0; }
.arbeitsplatz-side-counter {
  font-size: 11px; color: var(--success);
  background: var(--status-done-bg);
  padding: 1px 8px;
  border-radius: var(--radius-sm);
}
.arbeitsplatz-side-link {
  font-size: 11px; color: var(--muted); cursor: pointer;
  text-decoration: none;
}
.arbeitsplatz-side-link:hover { color: var(--text); text-decoration: underline; }

/* v2.10.4: max-Höhe entspricht ~10 Zeilen, Rest scrollt — bis zu 30 Einträge
   in beiden Listen erreichbar, ohne dass der Arbeitsplatz endlos wird. */
#arbeitsplatz-recent,
#arbeitsplatz-today {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}
#arbeitsplatz-recent::-webkit-scrollbar,
#arbeitsplatz-today::-webkit-scrollbar { width: 8px; }
#arbeitsplatz-recent::-webkit-scrollbar-thumb,
#arbeitsplatz-today::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.arbeitsplatz-recent-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px; align-items: center;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.arbeitsplatz-recent-row:last-child { border-bottom: none; }
.arbeitsplatz-recent-row:hover { background: var(--bg-soft); }
.arbeitsplatz-recent-title {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.arbeitsplatz-today-row {
  display: grid;
  grid-template-columns: 50px 70px 1fr;
  gap: 10px; align-items: center;
  padding: 6px 8px;
  font-size: 13px;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.arbeitsplatz-today-row:last-child { border-bottom: none; }
.arbeitsplatz-today-row:hover { background: var(--bg); }
.arbeitsplatz-today-time {
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.arbeitsplatz-today-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}

.arbeitsplatz-templates {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.arbeitsplatz-template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 900px) { .arbeitsplatz-template-grid { grid-template-columns: repeat(2, 1fr); } }
.arbeitsplatz-template-card {
  background: var(--bg-soft);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.arbeitsplatz-template-card:hover { background: var(--bg); }
.arbeitsplatz-template-name {
  font-size: 13px; font-weight: 500; color: var(--text);
  margin-bottom: 4px;
}
.arbeitsplatz-template-typ {
  font-size: 11px; color: var(--muted);
}

/* Type-Pillen (Activity-Stream + Recent-Liste) */
.type-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.type-pill-firma   { background: var(--type-firma-bg);   color: var(--type-firma-fg); }
.type-pill-projekt { background: var(--type-projekt-bg); color: var(--type-projekt-fg); }
.type-pill-kontakt { background: var(--type-kontakt-bg); color: var(--type-kontakt-fg); }
.type-pill-einsatz { background: var(--type-einsatz-bg); color: var(--type-einsatz-fg); }
.type-pill-termin  { background: var(--type-termin-bg);  color: var(--type-termin-fg); }
.type-pill-aufgabe { background: var(--type-aufgabe-bg); color: var(--type-aufgabe-fg); }
.type-pill-notiz   { background: var(--type-notiz-bg);   color: var(--type-notiz-fg); }
.type-pill-status  { background: var(--type-status-bg);  color: var(--type-status-fg); }
/* v2.9.1: Anhang-Pille im Activity-Stream */
.type-pill-anhang  { background: #eef2ff; color: #3730a3; }

/* v2.0.0 — Projekt-Detail V2 (Vier-Zonen-Muster) */
.proj-breadcrumb {
  font-size: 12px; color: var(--muted);
  margin-bottom: 16px;
}
.proj-breadcrumb a { color: var(--link); cursor: pointer; text-decoration: none; }
.proj-breadcrumb a:hover { text-decoration: underline; }
.proj-breadcrumb-sep { margin: 0 6px; color: var(--tertiary); }
.proj-breadcrumb-current { color: var(--text); }

.proj-hero {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.proj-hero-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.proj-hero-title {
  font-size: 24px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.proj-hero-subline {
  font-size: 13px; color: var(--muted);
}
.proj-hero-subline a { color: var(--link); cursor: pointer; text-decoration: none; }
.proj-hero-subline a:hover { text-decoration: underline; }
.proj-hero-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.proj-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .proj-hero-metrics { grid-template-columns: 1fr; } }
.proj-metric {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.proj-metric-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.proj-metric-value {
  font-size: 22px; font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 2px;
}
.proj-metric-sub {
  font-size: 12px; color: var(--muted);
}
.proj-health-dots {
  font-size: 14px;
  letter-spacing: 1px;
  margin-left: 4px;
}

.proj-tabs {
  display: flex; gap: 2px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 16px;
}
.proj-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  font-family: inherit; font-size: 14px; font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.proj-tab:hover { color: var(--text); }
.proj-tab.active {
  color: var(--text);
  font-weight: 500;
  border-bottom-color: var(--text);
}

.proj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
}
@media (max-width: 1024px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-main { min-width: 0; }
.proj-side { display: flex; flex-direction: column; gap: 12px; }

.proj-side-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.proj-side-card-title {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.proj-side-person {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  cursor: pointer;
}
.proj-side-person:hover { color: var(--text); }
.proj-side-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--text); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
  flex-shrink: 0;
}
.proj-side-name { font-size: 13px; font-weight: 500; color: var(--text); }
.proj-side-role { font-size: 11px; color: var(--muted); }
.proj-side-firma-name {
  font-size: 14px; font-weight: 500; color: var(--link);
  cursor: pointer; text-decoration: none;
  display: block; margin-bottom: 2px;
}
.proj-side-firma-name:hover { text-decoration: underline; }
.proj-side-firma-meta { font-size: 12px; color: var(--muted); }
.proj-side-meta {
  font-size: 11px; color: var(--muted);
  line-height: 1.5;
}
.proj-action {
  display: block; width: 100%;
  text-align: left;
  padding: 7px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border);
  background: var(--bg-soft);
  font-family: inherit; font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}
.proj-action:hover { background: var(--bg); }
.proj-action-primary {
  background: var(--text); color: var(--surface);
  border-color: transparent;
  font-weight: 500;
}
.proj-action-primary:hover { background: var(--muted); }
/* v2.15.2: Status erreicht (Terminal) — Read-only-Hinweis statt Button */
.proj-status-action-done {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  background: var(--bg);
  border: 0.5px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  margin-bottom: 4px;
}
.proj-status-action-done strong { color: var(--text); }

/* Activity-Stream */
.proj-filter-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.proj-filter-pill {
  padding: 4px 12px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border);
  background: var(--surface);
  font-family: inherit; font-size: 12px; font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.proj-filter-pill:hover { background: var(--bg-soft); color: var(--text); }
.proj-filter-pill.active {
  background: var(--text); color: var(--surface);
  border-color: var(--text); font-weight: 500;
}
/* v2.13.5: rechts ausgerichtete Time-Filter (Heute · Bevorstehend · Geschehen) */
.proj-filter-pills-spacer { flex: 1 1 auto; min-width: 4px; }
.proj-filter-pill-time {
  border-style: dashed;
  color: var(--muted);
  font-style: normal;
}
.proj-filter-pill-time.active {
  background: #b45309;          /* amber-700, gleich wie Heute-Section-Header */
  color: #fff;
  border-style: solid;
  border-color: #b45309;
}
.proj-filter-pill-time.active:hover { background: #92400e; border-color: #92400e; }

/* Schnelleingabe-Typ-Pillen über dem Notiz-Input (v2.0.1, Punkt 7a) */
.proj-note-types {
  display: flex; gap: 6px;
  margin-bottom: 6px;
}
.proj-note-type {
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.proj-note-type:hover { color: var(--text); border-color: var(--text); }
.proj-note-type.is-active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

/* v2.1.2: Kontext-Icons (Call / Mail / Meeting / Chat) über dem Notiz-Input */
.proj-note-icons {
  display: flex; gap: 6px;
  margin-bottom: 6px;
}
.proj-note-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  font-family: inherit;
}
.proj-note-icon:hover {
  background: var(--bg-subtle, #f0f0f0);
  border-color: var(--text);
  transform: scale(1.05);
}
.proj-note-icon:active { transform: scale(0.95); }
/* v2.13.4: aktiver Filter-Zustand — dunkel, klar als „Filter an" sichtbar */
.proj-note-icon.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
  transform: scale(1.05);
}
.proj-note-icon.is-active:hover {
  background: #000;
  border-color: #000;
  transform: scale(1.08);
}

.proj-note-input {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: center;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 12px;
}
.proj-note-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--text); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
}
.proj-note-input input {
  border: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--text);
}
.proj-note-input input:focus { outline: none; }
.proj-note-hint {
  font-size: 11px; color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}
.proj-note-hint-btn {
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.proj-note-hint-btn:hover {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.proj-activity-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}
.proj-activity-item:last-child { border-bottom: none; }
/* v2.1.0: Section-Header für Bevorstehend / Geschehen */
.activity-section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 0 6px;
  margin-top: 4px;
  border-bottom: 0.5px solid var(--border);
}
.activity-section-header:first-child { margin-top: 0; padding-top: 6px; }
/* v2.13.4: Heute-Section visuell hervorheben (orange Accent) */
.activity-section-header-today {
  color: #b45309;
  border-bottom-color: #fcd34d;
}
.proj-activity-date {
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.proj-activity-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.proj-activity-title {
  font-size: 14px; font-weight: 400; color: var(--text);
}
.proj-activity-meta {
  font-size: 12px; color: var(--muted);
}

/* v2.25.9 — Status-Pill + Row-Akzent in der Aktivitäten-Timeline.
   Statt den Status nur als Text im Meta zu führen, sieht der User die
   Phase eines Einsatzes / einer Aufgabe sofort: Geplant blau, Durch-
   geführt hellgrün, Abgerechnet dunkelgrün, Storniert rot. Storniert
   + erledigt durchgestrichen. */
.proj-activity-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.proj-activity-status-pill.is-blue   { background: var(--status-plan-bg);    color: var(--status-plan-fg); }
.proj-activity-status-pill.is-lgreen { background: var(--status-done-bg);    color: var(--status-done-fg); }
.proj-activity-status-pill.is-dgreen { background: var(--status-billed-bg);  color: var(--status-billed-fg); }
.proj-activity-status-pill.is-red    { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }
.proj-activity-status-pill.is-grey   { background: var(--bg-soft);            color: var(--muted); }

.proj-activity-title-struck {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.65;
}

.proj-activity-item-accent-is-blue   { box-shadow: inset 3px 0 0 var(--status-plan-accent); padding-left: 10px; }
.proj-activity-item-accent-is-lgreen { box-shadow: inset 3px 0 0 var(--status-done-accent); padding-left: 10px; }
.proj-activity-item-accent-is-dgreen { box-shadow: inset 3px 0 0 var(--status-billed-accent); padding-left: 10px; }
.proj-activity-item-accent-is-red    { box-shadow: inset 3px 0 0 var(--status-overdue-accent); padding-left: 10px; }
.proj-activity-item-accent-is-grey   { box-shadow: inset 3px 0 0 var(--border-strong); padding-left: 10px; }

/* Brief-Tab */
.proj-brief-section { margin-bottom: 24px; }
.proj-brief-section:last-child { margin-bottom: 0; }
.proj-brief-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.proj-brief-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 8px;
}
.proj-brief-label-row .proj-brief-label { margin-bottom: 0; }
.proj-brief-ziel,
.proj-brief-text {
  width: 100%;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: inherit; font-size: 14px; color: var(--text);
  resize: vertical;
  /* v2.13.3: groessere Default-Hoehe + Auto-Grow via field-sizing.
     Moderne Browser (Chrome 123+, Safari 18+) lassen die Textarea
     automatisch mit dem Inhalt wachsen; aelteren Browsern bleibt
     resize:vertical fuer manuelle Anpassung. max-height verhindert
     dass extrem lange Texte die Seite sprengen. */
  min-height: 140px;
  max-height: 640px;
  field-sizing: content;
  overflow-y: auto;
  line-height: 1.55;
}
.proj-brief-ziel { font-size: 16px; min-height: 72px; }
/* v2.13.3: kompakte Variante fuer einzeilige/zweizeilige Felder (z. B. Log-
   Eintrag). rows="2" wird respektiert, field-sizing waechst trotzdem. */
.proj-brief-text[rows="2"] { min-height: 64px; }
.proj-brief-ziel:focus, .proj-brief-text:focus {
  outline: none; border-color: var(--text);
}
.proj-brief-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 800px) { .proj-brief-2col { grid-template-columns: 1fr; } }

/* v2.15.0: Brief als Lese-Dokument — Card-Layout, click-to-edit auf
   Text-Karten, Listen-Karten verlinken in den Planung-Tab. */
.brief-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.brief-card:last-child { margin-bottom: 0; }
.brief-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.brief-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 8px;
}
.brief-card-head .brief-card-eyebrow { margin-bottom: 0; }
.brief-card-empty {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 8px 0;
}
.brief-card-action {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.brief-card-action:hover { background: var(--bg); border-color: var(--primary); }
.brief-edit-icon {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .15s ease;
}
.brief-card[data-field]:hover { cursor: pointer; border-color: var(--primary); }
.brief-card[data-field]:hover .brief-edit-icon { opacity: 1; }
.brief-card.is-empty .brief-card-ziel-text,
.brief-card.is-empty .brief-card-text-body { color: var(--muted); font-style: italic; }
.brief-card.is-editing { border-color: var(--primary); cursor: default; }
.brief-card.is-editing .brief-edit-icon { opacity: 0; }

/* Hero-Ziel */
.brief-card-ziel { padding: 28px 28px 24px; }
.brief-card-ziel-text {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
  white-space: pre-wrap;
}

/* Themen-Wolke */
.brief-themen-cloud {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.theme-pill-lg {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
}

/* 2-Spalten-Layout im Brief (Herausforderungen / Lösungsansatz) */
.brief-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.brief-2col .brief-card { margin-bottom: 0; }
@media (max-width: 800px) { .brief-2col { grid-template-columns: 1fr; } }

.brief-card-text-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* Erfolgskriterien — Fortschrittsbalken + Liste */
.brief-crits-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.brief-crits-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width .3s ease;
}
.brief-crits-list { list-style: none; padding: 0; margin: 0; }
.brief-crits-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text);
}
.brief-crits-mark {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  width: 16px; text-align: center;
}
.brief-crits-item.is-done .brief-crits-mark { color: #059669; }
.brief-crits-item.is-done .brief-crits-text {
  color: var(--muted);
  text-decoration: line-through;
}

/* Inline-Edit aus dem Brief heraus */
.brief-inline-edit { display: flex; flex-direction: column; gap: 8px; }
.brief-inline-edit-area {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.brief-inline-edit-area:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.brief-inline-edit-actions { display: flex; gap: 6px; }

/* Erfolgskriterien */
.proj-criterion {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 0.5px solid var(--border);
}
.proj-criterion:last-child { border-bottom: none; }
.proj-criterion input[type=checkbox] {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--success);
}
.proj-criterion-text {
  font-size: 14px; color: var(--text);
}
.proj-criterion.is-done .proj-criterion-text {
  color: var(--muted);
  text-decoration: line-through;
}

/* Entwicklungs-Log */
.proj-log-table { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); }
.proj-log-row {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  gap: 12px; align-items: center;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
}
.proj-log-row:last-child { border-bottom: none; }
.proj-log-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.proj-log-themes { display: flex; flex-wrap: wrap; gap: 4px; }
.proj-log-text { font-size: 13px; color: var(--text); line-height: 1.4; }
/* v2.14.3: Kategorie-Pille im Entwicklungs-Log (Log / Erkenntnis) */
.proj-log-cat {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  white-space: nowrap;
}

/* Theme-Pille (für Entwicklungs-Log) */
.theme-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-md);
  font-size: 11px; font-weight: 500;
  color: var(--text);
}

/* v2.0.0 — Stub-Layout für leere Bereiche während Phasen-Roll-out */
.redesign-stub {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}
.redesign-stub-eyebrow {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.redesign-stub-title {
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}
.redesign-stub-hint {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Mobile: Top-Nav ausblenden (Mobile-Bottom-Nav bleibt) */
@media (max-width: 900px) {
  .app-topnav { display: none; }
}

/* ── MAIN CONTENT ── */
.main {
  flex: 1;
  margin-left: 0;              /* v2.0.0 Phase 5: Sidebar entfernt */
  padding: 80px 32px 32px;     /* 80px top = 56px Top-Nav + 24px Abstand */
  min-height: 100vh;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
/* v2.19.1: Arbeitsplatz nutzt die volle Bildschirmbreite
   v2.27.4: Briefing-Seite ebenfalls full-width — die Tageskarte +
   KPI-Reihe atmen erst dann richtig. */
.main:has(#page-arbeitsplatz.active),
.main:has(#page-briefing.active) {
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}
.page { display: none; }
.page.active { display: block; }

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 600; }

/* ── BREADCRUMB ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb-back {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  transition: background .1s;
}
.breadcrumb-back:hover { background: var(--bg); }
.breadcrumb-back svg { width: 16px; height: 16px; }
.breadcrumb-link {
  cursor: pointer;
  color: var(--link);
}
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--muted); }
.breadcrumb-current {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── DETAIL-SEITE ── */
.detail-card { padding: 24px; }
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.detail-subline {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
.detail-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.detail-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.detail-value a {
  color: var(--link);
  text-decoration: none;
}
.detail-value a:hover { text-decoration: underline; }
.detail-value-muted { color: var(--muted); font-style: italic; }

/* ── CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  /* v2.25.5: flex erlaubt einen Action-Button rechts neben dem Titel
     (z. B. „+ Neue Vorlage" pro Sektion auf der Templates-Seite). */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title .btn {
  text-transform: none;
  letter-spacing: 0;
}

/* ── DATE-SHORTCUTS (v1.25.0) ── */
.date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.date-shortcut-btn {
  padding: 3px 8px;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.date-shortcut-btn:hover { background: var(--surface); color: var(--text); }

/* v2.25.1: Geteilter Chip-Streifen für mehrere Datums-Felder einer Sektion.
   Spannt die volle Breite unter dem form-row-2 und zeigt links als
   „→ Datum von / Datum bis"-Label, welches Feld die Chips treffen werden. */
.date-shortcuts--shared {
  align-items: center;
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 0.5px dashed var(--border);
  border-radius: var(--radius-sm);
}
.date-shortcuts-target-label {
  display: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-right: 6px;
}
.date-shortcuts--shared .date-shortcuts-target-label { display: inline; }

/* ── ABC-KLASSIFIZIERUNG BADGE (v1.24.0) ── */
.abc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.abc-badge-lg {
  width: 48px; height: 48px;
  font-size: 22px;
  letter-spacing: 0;
}
.abc-badge-A { background: #16a34a; }  /* grün — Top-Kunde */
.abc-badge-B { background: #f59e0b; }  /* gelb — wichtig  */
.abc-badge-C { background: #9ca3af; }  /* grau — niedrige Prio */
.abc-badge-unknown {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
}
.abc-badge-unknown.abc-badge-lg { font-size: 11px; }

/* ── DASHBOARD-ROW 2-COL für Aktivitäten (v1.25.0) ── */
.dashboard-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .dashboard-row-2col { grid-template-columns: 1fr; }
}

/* v1.47.0: 3-Spalten-Variante (Letzte | Bevorstehend | Team im Projekt) */
.dashboard-row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) {
  .dashboard-row-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .dashboard-row-3col { grid-template-columns: 1fr; }
}

/* v1.47.0: Stat-Row mit 4 Karten (Projekt-Detail) */
.dashboard-stats.is-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .dashboard-stats.is-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dashboard-stats.is-4 { grid-template-columns: 1fr; }
}

/* v1.47.0: Kompaktes Detail-Grid (für Team-Card mit nur 2 Feldern) */
.detail-grid-tight {
  gap: 8px 12px;
}
.detail-grid-tight .detail-field { gap: 2px; }

/* ── STAT-CARD CLICKABLE (v1.25.0) — z. B. ABC-Edit ── */
.stat-card-clickable {
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.stat-card-clickable:hover {
  background: var(--bg);
  border-color: var(--primary);
}

/* ── STAT-SUBLINE (v1.25.0) — kleinere Zusatzinfo unter Stat-Value ── */
.stat-subline {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  min-height: 13px;
}

/* ── ABC-EDIT-MODAL Buttons ── */
.abc-edit-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.abc-edit-btn:hover { background: var(--bg); border-color: var(--primary); }

/* ── QUICK-ACTION-TILE (Schnellaktionen-Modal) ── */
.quick-action-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .1s, background .1s;
}
.quick-action-tile:hover { border-color: var(--primary); background: var(--bg); }
.quick-action-tile-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.quick-action-tile-body { flex: 1; min-width: 0; }
.quick-action-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.quick-action-tile-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── QUICK-CREATE-BTN ACCENT (Schnellaktionen-Eintrag) ── */
.quick-create-btn-accent {
  margin-top: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
.plus-icon-accent { background: #f59e0b !important; color: #fff !important; }

/* ── OPPORTUNITIES-LIST ── */
.opportunity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.opportunity-row:last-child { border-bottom: none; }
.opportunity-name { font-size: 13px; color: var(--text); }
.opportunity-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.opportunity-value { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }

/* ── DETAIL-DASHBOARD (v1.24.0; v1.48.0 Aside auf 320 px verbreitert) ── */
.detail-dashboard {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .detail-dashboard { grid-template-columns: 1fr; }
}

/* v1.48.0 — Kontaktdaten-Zeile direkt unter Titel im Header */
.detail-header-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
}
.detail-header-meta:empty { display: none; }
.detail-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text);
  line-height: 1.3;
}
.detail-meta-item a { color: var(--primary); text-decoration: none; }
.detail-meta-item a:hover { text-decoration: underline; }
.detail-meta-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.detail-meta-icon svg { width: 14px; height: 14px; }

.dashboard-main { display: flex; flex-direction: column; gap: 14px; }

/* 3-Spalten Stats-Row: ABC · Umsatz · Offene Aufgaben */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .dashboard-stats { grid-template-columns: 1fr; }
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}
.stat-card-body { flex: 1; min-width: 0; }
/* v1.47.0: Card-Label hervorgehoben — bold, dunkler, farbiger Punkt davor */
.stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.stat-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.stat-value-muted { color: var(--muted); font-weight: 500; font-size: 14px; }
.stat-value-overdue { color: #dc2626; }

/* Info-Cards (Letzte Aktivität, Kontaktdaten, Notizen) */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
/* v1.47.0: Info-Card-Titel hervorgehoben — bold, dunkel, mit farbigem Punkt */
.info-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.info-card-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.info-card-empty { color: var(--muted); font-size: 13px; font-style: italic; }

/* v2.13.6: Smart Empty-State-Karten — kein nichts-sagender Hinweis, sondern
   aktive Onboarding-Karte mit Vorschlägen + Aktionen. */
.empty-state-card {
  background: linear-gradient(180deg, #fafafb 0%, var(--surface) 100%);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.empty-state-card-compact { padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.empty-state-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 4px;
}
.empty-state-hint {
  font-size: 12px; color: var(--muted);
  margin-bottom: 12px;
}
.empty-state-card-compact .empty-state-hint { margin-bottom: 0; flex: 1; }
.empty-state-suggestions {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.empty-state-suggestion {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.empty-state-suggestion:hover { background: var(--bg); }
.empty-state-suggestion input[type=checkbox] {
  width: 14px; height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.empty-state-suggestion-name { font-size: 13px; color: var(--text); font-weight: 500; }
.empty-state-suggestion-meta {
  font-size: 11px; color: #3730a3; background: #eef2ff;
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  margin-top: 2px;
}
.empty-state-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* v2.13.6: Mini-Empty-State — eine Zeile statt Block */
.empty-state-mini {
  font-size: 11px; color: var(--muted); font-style: italic;
  padding: 6px 0;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* v2.13.7: Phasen-Bar im Projekt-Brief (Hinweis + Show-All-Toggle) */
.proj-brief-phase-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 12px; color: #3730a3;
}
.proj-brief-phase-bar-toggle {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: #3730a3;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.proj-brief-phase-bar-toggle:hover { background: var(--bg); border-color: #3730a3; }

/* v2.14.1: Capture-Stream am Einsatz-Bericht — ein Eingabefeld + Kategorie-
   Chips, darunter eine chronologische Liste der Einträge. */
.capture-stream-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.capture-stream-input-row { margin-bottom: 10px; }
.capture-stream-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.capture-stream-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.capture-stream-categories {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.capture-stream-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.capture-stream-chip:hover { background: var(--surface); border-color: var(--primary); }
.capture-stream-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.capture-stream-post-btn {
  margin-left: auto;
  padding: 6px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.capture-stream-post-btn:hover { background: #2563eb; }
.capture-stream-list {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.capture-stream-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.capture-stream-item-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.capture-stream-item-body { flex: 1; min-width: 0; }
.capture-stream-item-text {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.capture-stream-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.capture-stream-item-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.capture-stream-item-delete:hover { background: #fee2e2; color: #b91c1c; }

/* v2.14.2: Status-Briefing am Einsatz — eine Karte am Anfang des Bericht-
   Tabs, die je nach Einsatz-Status (geplant/durchgeführt/abgerechnet)
   anders aussieht. */
.dep-briefing-card {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.dep-briefing-planned {
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
  border-color: #bfdbfe;
}
.dep-briefing-done {
  background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 100%);
  border-color: #bbf7d0;
}
.dep-briefing-billed {
  background: linear-gradient(180deg, #fafafb 0%, var(--surface) 100%);
  border-color: var(--border);
}
.dep-briefing-head { margin-bottom: 12px; }
.dep-briefing-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text);
  margin-bottom: 2px;
}
.dep-briefing-hint { font-size: 12px; color: var(--muted); }
.dep-briefing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dep-briefing-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s ease;
}
.dep-briefing-tile:hover {
  border-color: var(--primary);
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.dep-briefing-emoji { font-size: 20px; line-height: 1; }
.dep-briefing-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.dep-briefing-tile-sub {
  font-size: 11px;
  color: var(--muted);
}
.dep-briefing-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dep-briefing-action {
  padding: 6px 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dep-briefing-action:hover { background: #2563eb; }
.dep-briefing-action-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.dep-briefing-action-ghost:hover { background: var(--bg); border-color: var(--primary); }
@media (max-width: 720px) {
  .dep-briefing-grid { grid-template-columns: 1fr; }
}

.last-activity-item { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
.last-activity-date {
  font-size: 12px;
  color: var(--muted);
  width: 90px;
  flex-shrink: 0;
}
.last-activity-title { font-size: 13px; color: var(--text); flex: 1; }
.last-activity-type {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Inline-editierbares Notizen-Feld */
.notes-edit-area {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  box-sizing: border-box;
}
.notes-edit-area:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}

/* v1.47.0: Sidebar-Wrapper für Kontakte-Panel + Quick-Create-Panel */
.dashboard-aside {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 960px) {
  .dashboard-aside { position: static; }
}

/* v1.47.0: Kontakte als Sidebar-Liste statt eigener Tab */
.contacts-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contacts-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.contacts-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--text);
  text-transform: uppercase; letter-spacing: .5px;
}
.contacts-panel-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.contact-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .1s;
}
.contact-card:hover { background: var(--bg); }
.contact-card-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.contact-card-body { min-width: 0; }
.contact-card-name {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-card-sub {
  font-size: 11px; color: var(--muted);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contact-card-actions {
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity .1s;
}
.contact-card:hover .contact-card-actions { opacity: 1; }
.contact-card-actions .btn-icon {
  background: none; border: none; cursor: pointer;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted);
  border-radius: 4px;
}
.contact-card-actions .btn-icon:hover { background: var(--surface); color: var(--text); }

/* v1.47.0: Title-Row in Info-Card (Mitgliedschaften: Titel + Button) */
.info-card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.info-card-title-row .info-card-title { margin-bottom: 0; }

/* Quick-Create Panel (rechte Spalte) */
.quick-create-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quick-create-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.quick-create-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.quick-create-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.quick-create-btn:hover { background: var(--bg); }
.quick-create-btn svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.quick-create-btn .plus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .quick-create-panel { position: static; }
}

/* ── DETAIL-TABS (v1.23.0) ── */
.detail-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.detail-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .1s, border-color .1s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.detail-tab:hover { color: var(--text); }
.detail-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}
.tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg);
  border-radius: 10px;
  text-align: center;
}
.detail-tab.active .tab-count {
  color: #fff;
  background: var(--primary);
}
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }
@media (max-width: 767px) {
  .detail-tab { padding: 10px 12px; font-size: 12.5px; }
}

/* Mobile-Nav-Badge Container (v1.23.0) */
.mobile-nav-item { position: relative; }
.mobile-nav-badge {
  position: absolute;
  top: 4px;
  right: 18%;
  padding: 0 5px;
  font-size: 10px;
  line-height: 1.5;
  min-width: 16px;
}

/* ── BUTTONS ── */
.btn {
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  transition: background .1s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { opacity: .85; background: var(--primary); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-row { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── ICON-ONLY-COPY-BUTTON ── */
.btn-copy {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  transition: background .1s, color .1s, border-color .1s;
  flex-shrink: 0;
}
.btn-copy:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.btn-copy:active { background: var(--border); }
.btn-copy svg { width: 15px; height: 15px; }
.detail-header .btn-copy { width: 34px; height: 34px; }
.detail-header .btn-copy svg { width: 17px; height: 17px; }

/* ── KLICKBARE ZELLEN/LINKS IN TABELLEN ── */
.cell-link {
  color: var(--link);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.cell-link:hover { text-decoration: underline; }

/* ── FORM ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 500; color: var(--muted); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
/* v2.25.3: Auto-Grow für alle Textareas — startet bei min-height,
   wächst mit dem Inhalt (field-sizing:content in Chrome 123+/Safari 18+),
   stoppt bei max-height und wird dann scrollbar. */
.form-group textarea {
  resize: vertical;
  min-height: 64px;
  max-height: 280px;
  line-height: 1.45;
  field-sizing: content;
  overflow-y: auto;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--text); }
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.form-group input[type="color"] { padding: 2px; height: 38px; cursor: pointer; }
/* v2.10.1: Checkbox/Radio im .form-group nicht voll-stretchen — sonst übernimmt
   die generische `.form-group input { width:100%; padding:8px 12px }`-Regel
   auch sie, sodass das Häkchen-Kästchen 100 % breit wird und die nebenstehende
   Beschriftung visuell zerreißt. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
/* Utility-Klasse für „Label mit Checkbox + Text in einer Zeile". Ersetzt das
   bisher inline gestylte `style="display:flex;align-items:center;gap:8px"` in
   Modal-Form-Groups (Konvention v2.10.1). Schrift- und Farbwerte überschreiben
   die `.form-group label`-Defaults (12 px / muted), weil eine Checkbox-Aussage
   eine reguläre Aussage ist und nicht eine Feld-Caption. */
.form-group label.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}
.field-hint {
  display: block;
  font-size: 11px; color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}

.modal-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color .15s;
}
.modal-group-title:hover { color: var(--text); }
.modal-group-title::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 4px;
  margin-bottom: 4px;
  transition: transform .2s;
  opacity: .7;
}
.modal-group-title.collapsed::after {
  transform: rotate(-45deg);
  margin-bottom: 0;
  margin-top: 2px;
}
.modal-group-title:first-of-type { margin-top: 0; }

/* Hinweis-Zeile unter Ort-Feld im Termin-Modal */
#t-ort-hint {
  padding: 3px 0;
  line-height: 1.4;
}
#t-ort-hint:hover {
  color: var(--link) !important;
  text-decoration: underline;
}

/* ── TABELLE ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }

.col-tablet { display: none; }
.col-desktop { display: none; }
.col-action  { display: table-cell; }
@media (min-width: 768px) {
  .col-tablet { display: table-cell; }
}
@media (min-width: 1024px) {
  .col-desktop { display: table-cell; }
}
@media (max-width: 767px) {
  .col-action { display: none; }
}

/* ── ACTION-ICON-BUTTONS (v1.11.0) ── */
.action-icons {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.icon-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 16px; height: 16px; display: block; }
.icon-btn.icon-danger:hover {
  color: var(--danger);
  background: #fef2f2;
  border-color: #fecaca;
}
/* v1.44.6 — Schnell-Status-Icons in Einsatz-Listen */
.icon-btn.icon-btn-success { color: var(--success); }
.icon-btn.icon-btn-success:hover {
  color: var(--success);
  background: #dcfce7;
  border-color: #bbf7d0;
}
.icon-btn.icon-btn-billed { color: var(--link); }
.icon-btn.icon-btn-billed:hover {
  color: var(--link);
  background: #dbeafe;
  border-color: #bfdbfe;
}
.icon-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* Tooltip via title-Attribut (native Browser-Tooltip) */

/* ── BADGE ── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
}

/* ── DATUM/ZEIT-ZELLE IN TERMINLISTE ── */
.date-cell {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.date-cell-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}
.date-cell.past {
  color: var(--muted);
}

/* ── TECHNIKER-CHIPS IM EINSATZ-MODAL (v1.9.0) ── */
.techniker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background .1s, border-color .1s;
}
.techniker-chip:hover {
  background: var(--bg);
}
.techniker-chip.selected {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.techniker-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e5e7eb;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  flex-shrink: 0;
}
.techniker-chip.selected .techniker-chip-avatar {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ── MODAL: EINSATZ: HINT-BLOCK ── */
#d-preis-hint { line-height: 1.4; }
#d-ort-hint:hover {
  color: var(--link) !important;
  text-decoration: underline;
}
.next-appt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.next-appt-date {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.next-appt-date.past { color: var(--muted); }
.next-appt-date.upcoming { color: var(--link); }
.next-appt-title {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.next-appt-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}

/* ── COLOR-DOT ── */
.color-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-right: 6px;
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 60px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 24px;
  width: 480px;
  max-width: 94vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 20px; }

/* v1.51.0 → v1.51.1 redesign: Sub-Items als saubere Karten mit
 *  optionalem Einsatz-Detailblock unten. */
.tpl-subitems-block {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tpl-subitems-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.tpl-subitems-title {
  font-size: 12px; font-weight: 700;
  color: var(--text);
  text-transform: uppercase; letter-spacing: .4px;
}
.tpl-subitems-hint {
  font-size: 11px; color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.4;
}
#tpl-subitems-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.tpl-subitem-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color .12s, box-shadow .12s;
}
.tpl-subitem-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}
.tpl-si-main {
  display: flex; align-items: center;
  gap: 10px;
}
.tpl-si-main .tpl-si-typ {
  flex: 0 0 120px;
  height: 34px;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
}
.tpl-si-main .tpl-si-titel {
  flex: 1; min-width: 0;
  height: 34px;
  font-size: 13px;
  padding: 4px 10px;
}
.tpl-si-offset-wrap {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  gap: 4px;
  height: 34px;
  padding: 0 10px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.tpl-si-offset-wrap input.tpl-si-offset {
  width: 44px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  padding: 0;
}
.tpl-si-offset-wrap input.tpl-si-offset:focus { outline: none; }
.tpl-si-offset-suffix {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.tpl-si-del {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.tpl-si-del:hover {
  background: var(--status-overdue-bg);
  color: var(--status-overdue-accent);
  border-color: var(--status-overdue-accent);
}

/* Einsatz-Detail-Block: nur sichtbar wenn .is-einsatz auf der Zeile
 * v2.25.4: Stacked Label-über-Feld-Felder, links eingerückt damit die
 * Leistung-Spalte unter dem Titel-Input der oberen Zeile beginnt. */
.tpl-si-einsatz {
  display: none;
  grid-template-columns: minmax(0, 1fr) 90px 110px;
  gap: 10px 12px;
  align-items: end;
  margin-top: 10px;
  padding: 10px 0 0 130px;
  border-top: 1px dashed var(--border);
}
.tpl-subitem-row.is-einsatz .tpl-si-einsatz { display: grid; }
.tpl-si-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tpl-si-extra-label {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
}
.tpl-si-einsatz select,
.tpl-si-einsatz input {
  width: 100%;
  height: 34px;
  font-size: 13px;
  padding: 4px 10px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .tpl-si-einsatz {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
}

/* v1.51.0: Aktivitäten-Bereich im Projekt-Modal nach Save */
.p-activities-divider {
  border-top: 1px solid var(--border);
  margin: 24px 0 16px;
}
.p-activities-head { margin-bottom: 12px; }
.p-activities-hint {
  font-size: 12px; color: var(--muted);
  margin: 4px 0 0;
}
.p-quick-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .p-quick-add-grid { grid-template-columns: 1fr; }
}
.p-quick-add-card {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.p-quick-add-title {
  font-size: 12px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.p-quick-add-card input,
.p-quick-add-card select {
  height: 32px; font-size: 13px; padding: 4px 8px;
}
.p-quick-add-card .btn { align-self: stretch; }
.p-activities-list-title {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 8px;
}
.p-activity-row {
  display: grid;
  grid-template-columns: 70px 90px 1fr auto;
  gap: 12px; align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 0.5px solid var(--border);
}
.p-activity-row:last-child { border-bottom: none; }
.p-activity-kind {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
}
.p-activity-kind-termin  { background: var(--status-plan-bg);   color: var(--status-plan-fg); }
.p-activity-kind-aufgabe { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.p-activity-kind-einsatz { background: var(--status-done-bg);   color: var(--status-done-fg); }
.p-activity-date  { font-size: 12px; color: var(--muted); }
.p-activity-titel { font-weight: 500; color: var(--text); }
.p-activity-status { font-size: 11px; color: var(--muted); }

/* v1.53.0: Themen-Sektion (Projekt-Detail) + Theme-Picker (Einsatz-Modal) */
.themes-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--status-plan-bg);
  color: var(--status-plan-fg);
  border: 1px solid var(--status-plan-accent);
  border-radius: 6px;
  font-size: 12px;
}
.themes-banner-close {
  border: none; background: transparent;
  color: var(--status-plan-fg); cursor: pointer;
  font-size: 16px; line-height: 1;
  padding: 0 4px;
}
.themes-banner-close:hover { opacity: .7; }

/* v2.15.1: Themen-Quick-Add — Eingabefeld + Live-Bibliotheks-Vorschläge */
.theme-quickadd { margin-bottom: 10px; }
.theme-quickadd-row {
  display: flex; gap: 6px;
}
.theme-quickadd-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 14px;
  color: var(--text);
  background: var(--bg);
  box-sizing: border-box;
}
.theme-quickadd-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.theme-quickadd-btn {
  width: 38px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.theme-quickadd-btn:hover { background: #2563eb; }
.theme-quickadd-suggestions {
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.theme-suggestion-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.theme-suggestion-item:last-child { border-bottom: none; }
.theme-suggestion-item:hover { background: var(--bg); }
.theme-suggestion-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.theme-suggestion-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.theme-suggestion-cat {
  font-size: 10px;
  color: #3730a3; background: #eef2ff;
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  width: max-content;
}
.theme-suggestion-desc {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.theme-suggestion-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.themes-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.theme-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
/* v2.15.1: Promote-Button für projekt-spezifische Themen + Bibliotheks-Badge */
.theme-row-promote {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--primary);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.theme-row-promote:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.theme-row-lib-badge {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  font-style: italic;
}
/* v2.16.3: Stats-Zeile + Löschen-Button im Firmen-Themen-Tab */
.theme-row-stats {
  display: flex; gap: 10px; margin-top: 4px; align-items: center;
}
.theme-row-stats .theme-row-count { font-size: 11px; }
.theme-row-delete {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.theme-row-delete:hover { background: #fee2e2; color: #b91c1c; }
.theme-row:hover { background: var(--surface); border-color: var(--primary); }
.theme-color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.theme-row-body { min-width: 0; }
.theme-row-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.theme-row-desc {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.theme-row-status {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: .3px;
  white-space: nowrap;
}
.theme-row-status.status-offen         { background: var(--status-plan-bg); color: var(--status-plan-fg); }
.theme-row-status.status-in_arbeit     { background: var(--status-plan-bg); color: var(--status-plan-accent); }
.theme-row-status.status-abgeschlossen { background: var(--status-done-bg); color: var(--status-done-fg); }
.theme-row-meta {
  display: flex; align-items: center; gap: 8px;
}
.theme-row-owner {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
.theme-row-count {
  font-size: 11px; color: var(--muted);
  white-space: nowrap;
}

/* Theme-Picker im Einsatz-Modal */
.theme-picker-list {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
.theme-pick-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  transition: background .1s, border-color .1s;
}
.theme-pick-item:hover { background: var(--surface); }
.theme-pick-item:has(input:checked) {
  background: var(--status-plan-bg);
  border-color: var(--status-plan-accent);
  color: var(--status-plan-fg);
  font-weight: 600;
}
.theme-pick-item input[type=checkbox] {
  width: 14px; height: 14px;
  margin: 0;
  cursor: pointer;
}
.theme-pick-name {
  white-space: nowrap;
}
/* v2.16.0: Stern als Hinweis „ist im Projekt-Curriculum" */
.theme-pick-star {
  display: inline-block;
  margin-left: 4px;
  color: #b45309;
  font-size: 11px;
}
.theme-pick-item.is-curriculum { border-color: #fbbf24; }

/* v1.52.0: Strukturierte Dokumentation (Projekt-Detail + Termin/Einsatz-Modal) */
.doc-grid {
  display: flex; flex-direction: column;
  gap: 12px;
}
.doc-field { display: flex; flex-direction: column; gap: 4px; }
.doc-field-label {
  font-size: 11px; font-weight: 700;
  color: var(--text);
  text-transform: uppercase; letter-spacing: .4px;
}
.doc-field-textarea {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  min-height: 52px;
  max-height: 280px;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .12s, box-shadow .12s;
  field-sizing: content;
  overflow-y: auto;
}
.doc-field-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
}
.doc-field-status {
  font-size: 11px;
  min-height: 13px;
  color: var(--muted);
}

/* v1.50.0: "Aus Template"-Auswahl oben in den Anlage-Modalen */
.modal-template-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: -8px 0 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.modal-template-row label {
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap;
  margin: 0;
}
.modal-template-row select {
  flex: 1;
  height: 32px;
  font-size: 13px;
}
.modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── CREDENTIALS BOX ── */
.credentials-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.credentials-label {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.credentials-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.credentials-value:last-child { margin-bottom: 0; }
.credentials-value span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.credentials-hint { margin-top: 10px; font-size: 12px; color: var(--warning); }

/* ── AUTH ── */
.auth-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 380px;
  max-width: 94vw;
  box-shadow: var(--shadow);
}
.auth-logo { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.auth-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-field label { font-size: 12px; font-weight: 500; color: var(--muted); }
.auth-field input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
.auth-field input:focus { outline: none; border-color: var(--text); }
.auth-btn {
  width: 100%; padding: 10px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 500;
  cursor: pointer; border: none;
  background: var(--primary); color: #fff;
  font-family: inherit; margin-top: 4px;
}
.auth-btn:hover { opacity: .85; }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-btn-secondary {
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 8px;
  margin-top: 8px;
}
.auth-btn-secondary:hover { color: var(--text); }
.auth-error {
  font-size: 13px; color: var(--danger);
  background: #fef2f2;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  display: none;
}
.auth-error.show { display: block; }
.auth-link {
  font-size: 12px; color: var(--muted);
  text-align: center; margin-top: 12px;
  cursor: pointer;
}
.auth-link span { color: var(--text); text-decoration: underline; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text); color: #fff;
  padding: 10px 18px; border-radius: var(--radius);
  font-size: 13px; z-index: 9999;
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 48px);
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast.error { background: var(--danger); }
.toast-msg { flex: 1; }
.toast-action {
  background: none; border: none;
  color: #fff;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: underline;
  white-space: nowrap;
  font-family: inherit;
}
.toast-action:hover { background: rgba(255,255,255,0.12); }

/* ── EMPTY STATE ── */
.empty {
  padding: 40px 20px; text-align: center;
  color: var(--muted); font-size: 13px;
}

/* ── AVATAR ── */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e5e7eb; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LAYOUT — < 768px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .sidebar { display: none; }

  .main {
    margin-left: 0;
    padding: 20px 16px;
    padding-top: calc(var(--mobile-header-height) + 16px);
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0) + 16px);
  }

  .mobile-header { display: flex; }
  .mobile-bottom-nav { display: flex; }

  .toast {
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0) + 16px);
    right: 16px;
    left: 16px;
    text-align: center;
  }

  .modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 20px;
  }
  .modal-overlay { padding-top: 20px; padding-bottom: 20px; }

  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-group.full { grid-column: 1 / -1; }

  .page-header { margin-bottom: 16px; }
  .page-title { font-size: 18px; }

  .card { padding: 14px; margin-bottom: 12px; }
  .detail-card { padding: 18px; }
  .detail-grid { grid-template-columns: 1fr; }

  td { padding: 11px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  th { padding: 0 8px 8px; }

  /* Tabelle Mobile: kein horizontales Scrollen, feste Layouts */
  .table-wrap { overflow-x: hidden; }
  table { table-layout: fixed; width: 100%; }
  .cell-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .date-cell { font-size: 12.5px; }

  /* FILTER-CARDS: Dropdowns stapeln auf Mobile, nicht horizontal scrollen */
  .filter-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .filter-row > .form-group {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* TABLES: Content darf auf Mobile umbrechen/kompakter werden */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12.5px; }
  td { padding: 10px 8px; }
  th { padding: 0 8px 8px; font-size: 10px; }

  /* Detail-Header: Buttons voll-breit auf Mobile */
  .detail-header { flex-direction: column; align-items: stretch; }
  .detail-header .btn-row { width: 100%; justify-content: flex-end; }
}

@media (min-width: 768px) {
  .mobile-header,
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* ── BENEFIT-ROWS IN PROGRAMM-MODAL (v1.12.0) ── */
.benefit-row {
  display: grid;
  grid-template-columns: 1fr 90px 40px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}
.benefit-row input,
.benefit-row select {
  margin: 0;
  font-size: 13px;
  padding: 8px 10px;
}
.benefit-row .benefit-remove {
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-row .benefit-remove:hover {
  background: #fef2f2;
}
.benefit-row .benefit-remove svg {
  width: 16px;
  height: 16px;
}
.benefit-row-titel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
/* ── MITGLIEDSCHAFTS-DARSTELLUNG (v1.13.0) ── */
.membership-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
  transition: border-color 0.15s;
}
.membership-card:hover {
  border-color: #9ca3af;
}
.membership-card:last-child {
  margin-bottom: 0;
}
.membership-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.membership-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.membership-card-title:hover {
  color: var(--link);
}
.membership-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.membership-card-benefits {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.benefit-progress-row {
  display: grid;
  grid-template-columns: 1fr 140px 80px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.benefit-progress-row:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}
.progress-bar-wrap {
  background: var(--bg);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  background: var(--success);
  transition: width 0.3s;
}
.progress-bar-fill.warning {
  background: var(--warning);
}
.progress-bar-fill.danger {
  background: var(--danger);
}
.progress-bar-label {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 2px;
}
@media (max-width: 767px) {
  .benefit-progress-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   GLOBALE SUCHE (v1.19.0)
   ═══════════════════════════════════════════════════════════ */

.sidebar-search-btn {
  margin: 12px 16px 12px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.sidebar-search-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: #d1d5db;
}
.sidebar-search-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-search-btn span { flex: 1; text-align: left; }
.sidebar-search-btn .kbd { margin-left: auto; }

.mobile-header-right {
  display: flex; align-items: center; gap: 8px;
}
.mobile-search-btn {
  border: none; background: none; padding: 6px;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.mobile-search-btn:hover { background: var(--bg); color: var(--text); }
.mobile-search-btn svg { width: 20px; height: 20px; }

.kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

.search-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  padding-left: 16px;
  padding-right: 16px;
  overflow-y: auto;
}
.search-overlay.open { display: flex; }
.search-panel {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  width: 640px;
  max-width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  overflow: hidden;
}
.search-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.search-input-icon {
  width: 18px; height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
#search-input {
  flex: 1;
  border: none; outline: none; background: none;
  font-size: 15px;
  color: var(--text);
  padding: 4px 0;
  font-family: inherit;
}
.search-esc-hint { flex-shrink: 0; }

.search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
}
.search-hint {
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.search-hint .kbd { margin: 0 2px; }

.search-group-header {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .08s;
}
.search-item:hover,
.search-item.active {
  background: var(--bg);
}
.search-item-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.search-item.active .search-item-icon { background: #dbeafe; color: var(--link); }
.search-item-icon svg { width: 16px; height: 16px; }
.search-item-body { flex: 1; min-width: 0; }
.search-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-item-type-badge {
  font-size: 10px;
  color: var(--muted);
  padding: 2px 6px;
  background: var(--bg);
  border-radius: 4px;
  flex-shrink: 0;
}

.search-empty {
  padding: 24px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 767px) {
  .search-overlay { padding-top: 8vh; }
  .search-panel { width: 100%; }
  .search-esc-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   ZEILEN-AKTIONEN — Hover-Reveal + Kebab-Menu (v1.20.0)
   ═══════════════════════════════════════════════════════════ */

/* Default: Icons sind unsichtbar und nicht klickbar,
   erst bei Hover über die Zeile tauchen sie auf. */
tbody tr .action-icons {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
tbody tr:hover .action-icons,
tbody tr:focus-within .action-icons,
.action-icons.always-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Touch-Geräte: kein Hover → Aktionen dauerhaft sichtbar */
@media (hover: none) {
  tbody tr .action-icons {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Kebab-Menu (single shared instance) */
.kebab-menu {
  position: fixed;
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px;
  min-width: 160px;
  z-index: 1150;
}
.kebab-menu.open { display: block; }
.kebab-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.kebab-menu-item:hover,
.kebab-menu-item:focus { background: var(--bg); outline: none; }
.kebab-menu-item.kebab-menu-danger { color: var(--danger); }
.kebab-menu-item.kebab-menu-danger:hover { background: #fef2f2; }

/* Confirm-Modal (z-index über normalen Modals) */
.modal-overlay-confirm { z-index: 1200; }
.confirm-message {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.confirm-message strong { color: var(--text); font-weight: 600; }

/* Danger-Button (für Confirm + andere Destructive-Flows) */
.btn.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ═══════════════════════════════════════════════════════════
   FAB — Quick-Add Floating Action Button (v1.21.0)
   ═══════════════════════════════════════════════════════════ */

/* v2.9.3: alter runder FAB entfernt — Quick-Add jetzt oben in der Topnav als Pille. */
.fab,
.fab.visible { display: none !important; }
.fab:hover { box-shadow: 0 6px 20px rgba(0,0,0,.25); transform: translateY(-1px); }
.fab:active { transform: translateY(0); }
.fab svg { width: 22px; height: 22px; }

/* v2.9.4: Suche zentrisch und prägnant in der Mitte des Topnavs;
   Plus für Schnell-Anlegen ist ein schlichtes Icon rechts neben Zahnrad. */
.app-topnav-center {
  flex: 1; display: flex; justify-content: center; align-items: center;
  min-width: 0;
  padding: 0 24px;
}
.app-topnav-search-wide {
  width: 100%;
  max-width: 560px;
  height: 38px;
  padding: 0 14px;
  justify-content: flex-start;
}
.app-topnav-search-wide span {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Das Plus-Icon nutzt die bestehende .app-topnav-icon-Klasse —
   die zusätzliche Modifier-Klasse erlaubt nur dezente Tweaks. */
.app-topnav-icon-plus svg { width: 20px; height: 20px; stroke-width: 2; }

@media (max-width: 900px) {
  .app-topnav-center { padding: 0 8px; }
  .app-topnav-search-wide { max-width: none; }
  .app-topnav-search-wide span,
  .app-topnav-search-wide .kbd { display: none; }
}

.fab-menu {
  position: fixed;
  top: 60px;                         /* v2.9.3: unter dem Topnav-Button (Default) */
  left: 50%;                         /* JS-Positionierung überschreibt das */
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 220px;
  display: none;
  z-index: 920;
}
.fab-menu.open { display: block; }
.fab-menu-title {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.fab-menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.fab-menu-item:hover,
.fab-menu-item:focus { background: var(--bg); outline: none; }

@media (max-width: 900px) {
  .fab-menu {
    bottom: calc(var(--mobile-nav-height) + 76px);
    right: 16px;
    left: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   INLINE-EXPAND-ROW DASHBOARD (v1.27.0)
   ═══════════════════════════════════════════════════════════
   Klick auf eine Listen-Zeile klappt darunter ein Detail-Dashboard
   auf. Nur eine Zeile gleichzeitig. Auf Mobile wird stattdessen
   das Bearbeiten-Modal geöffnet.
   ─────────────────────────────────────────────────────────── */

tr.row-expanded > td {
  background: #eef2ff;
  border-bottom-color: transparent;
}

tr.expanded-row > td {
  padding: 0;
  background: #eef2ff;
  border-top: none;
}
.expanded-row-panel-inner {
  padding: 16px 20px 20px;
  background: #f1f5f9;                       /* leicht blau-grauer Panel-Hintergrund (v1.35.3) */
  border-left: 3px solid var(--link);
  margin: 0 0 6px 0;
  animation: expandRowIn 160ms ease-out;
}
@keyframes expandRowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dashboard-Inhalt innerhalb des Expand-Panels — Stats-Card abgesetzt (v1.35.3, verteilt v1.36.1) */
.erp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 14px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.erp-stat-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 130px;                /* Items strecken sich gleichmaessig ueber die Breite */
  min-width: 110px;
}
.erp-stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 2px;
}
.erp-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.erp-stat-value.erp-stat-muted { color: var(--muted); font-weight: 500; }

.erp-body {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
}
@media (max-width: 800px) {
  .erp-body { grid-template-columns: 1fr; }
}

/* Kontext-Card — 2-spaltig: links Primär-Infos, rechts Verwandtes (v1.36.2) */
.erp-context-block {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.erp-context-block.erp-context-block-single {
  grid-template-columns: 1fr;
}
.erp-context-main { min-width: 0; }
.erp-context-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 900px) {
  .erp-context-block {
    grid-template-columns: 1fr;
  }
}

.erp-kv {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.erp-kv-label { color: var(--muted); }
.erp-kv-value { color: var(--text); word-break: break-word; }
.erp-kv-value.erp-kv-muted { color: var(--muted); font-style: italic; }

.erp-section-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.erp-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  align-self: flex-start;
}
.erp-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .08s;
}
.erp-action-btn:hover {
  border-color: var(--link);
  background: #eff6ff;
}
.erp-action-btn.erp-action-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.erp-action-btn.erp-action-primary:hover {
  background: #000;
}
.erp-action-btn-icon {
  font-size: 14px;
  width: 16px;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
}

.erp-related {
  /* in Aside gestapelt — kein top-border mehr, stattdessen durch Gap getrennt (v1.36.2) */
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.erp-related-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.erp-related-row + .erp-related-row { border-top: 1px dashed var(--border); }
.erp-related-date { color: var(--muted); min-width: 100px; flex-shrink: 0; }
.erp-related-title { flex: 1; color: var(--text); cursor: pointer; min-width: 0; }
.erp-related-title:hover { color: var(--link); }
.erp-related-meta { color: var(--muted); font-size: 12px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   KALENDER-BAR (v1.32.0)
   ═══════════════════════════════════════════════════════════
   Fixed-Footer mit Monats-Zeitstrahl des ausgewählten Mitarbeiters.
   Farbcode pro Tag: frei (weiß), Termin (gelb), Einsatz (grün),
   Feiertag (rot). Warn-Icon ⚠ bei Einsatz an Feiertag.
   ─────────────────────────────────────────────────────────── */

.calendar-bar {
  position: fixed;
  bottom: 0;
  left: 0;                   /* v2.0.1: volle Breite — alte Sidebar gibt es nicht mehr */
  right: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 16px 10px;
  box-shadow: 0 -1px 3px rgba(0,0,0,.04);
}

.calendar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

.calendar-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calendar-nav-btn:hover { background: var(--bg); }

.calendar-today-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
}
.calendar-today-btn:hover { background: var(--bg); }

.calendar-month-label {
  font-weight: 600;
  font-size: 13px;
  min-width: 120px;
  text-align: center;
}

.calendar-user-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.calendar-user-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.calendar-user-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-family: inherit;
  max-width: 200px;
}

.calendar-legend {
  display: flex;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.calendar-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.06);
}
.calendar-legend-warn {
  font-size: 13px;
  color: var(--danger);
  font-weight: 700;
  width: 14px;
  text-align: center;
}

/* Farben zentral definiert */
.cal-dot-free     { background: #ffffff; border-color: var(--border); }
.cal-dot-termin   { background: #fef3c7; border-color: #fcd34d; }
.cal-dot-einsatz  { background: #bbf7d0; border-color: #4ade80; }
.cal-dot-feiertag { background: #fecaca; border-color: #f87171; }

.calendar-days {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 2px;
}
/* v2.11.7: KW-Marker vor jedem Montag im Kalenderstreifen — orientiert sich
   farblich am Border, beim horizontalen Scrollen sieht man so schnell, in
   welcher Kalenderwoche man steht. */
.calendar-kw {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 6px 0 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-left: 1px solid var(--border);
  margin-left: 4px;
  text-transform: uppercase;
  user-select: none;
}
.calendar-kw:first-child {
  border-left: 0;
  margin-left: 0;
}

/* v2.12.0: Einsatz-Bündel-Modal */
.bundle-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bundle-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 12px;
}
.bundle-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bundle-section-title-row .bundle-section-title { margin-bottom: 0; }
.bundle-days-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.bundle-days-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bundle-days-table thead th {
  background: var(--bg);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.bundle-days-table tbody td {
  padding: 4px 6px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}
.bundle-days-table tbody tr:last-child td { border-bottom: 0; }
.bundle-days-table input,
.bundle-days-table select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
}
.bundle-days-table .b-day-remove {
  background: none;
  border: 1px solid var(--border);
  color: var(--danger);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.bundle-days-table .b-day-remove:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* v2.12.2: Bündel-Banner im Einsatz-Modal-Drawer */
.drawer__bundle-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 16px;
  padding: 10px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #3730a3;
}
.drawer__bundle-banner-icon {
  font-size: 14px;
  line-height: 1.4;
  flex-shrink: 0;
}
.drawer__bundle-banner-body { flex: 1; min-width: 0; }
.drawer__bundle-banner-link {
  font-weight: 600;
  color: #3730a3;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}
.drawer__bundle-banner-link:hover { color: #1e1b4b; }
.drawer__bundle-banner-hint {
  font-size: 11px;
  color: #4f46e5;
  margin-top: 4px;
}

/* v2.12.0: Bündel-Header-Zeile im Projekt-Einsatz-Listing */
.bundle-header-row {
  background: linear-gradient(to right, #eef2ff, var(--surface));
  cursor: pointer;
}
.bundle-header-row:hover { background: #e0e7ff; }
.bundle-header-cell {
  padding: 10px 12px !important;
  border-top: 2px solid var(--border) !important;
}
.bundle-header-cell-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.bundle-header-chevron {
  font-size: 11px;
  color: var(--muted);
  display: inline-block;
  width: 12px;
  transition: transform 0.15s;
}
.bundle-header-row.is-collapsed .bundle-header-chevron { transform: rotate(-90deg); }
.bundle-header-label {
  font-size: 10px;
  font-weight: 700;
  color: #4338ca;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bundle-header-title { font-weight: 600; color: var(--text); }
.bundle-header-stats { color: var(--muted); margin-left: auto; font-size: 12px; }
.bundle-member-row td:first-child { padding-left: 28px !important; }

.calendar-day {
  position: relative;
  flex: 1 1 0;
  min-width: 30px;
  max-width: 60px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 2px;
  font-size: 11px;
  color: var(--text);
  transition: transform .08s, box-shadow .08s;
}
.calendar-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Tag-Farbe nach Priorität: feiertag > einsatz > termin > free */
.calendar-day.cal-day-termin    { background: #fef3c7; border-color: #fcd34d; }
.calendar-day.cal-day-einsatz   { background: #bbf7d0; border-color: #4ade80; }
.calendar-day.cal-day-feiertag  { background: #fecaca; border-color: #f87171; }
/* v2.27.3: Tag mit ausschließlich stornierten Einsätzen — kein „grünes Geld
   verdient", sondern rot-gestricheltes Muster wie auf der Hero-Card. Sobald
   ein aktiver Einsatz dazukommt, wird der Tag wieder grün (Priorität in
   renderCalendarBar). */
.calendar-day.cal-day-storniert {
  background:
    repeating-linear-gradient(
      135deg,
      var(--surface) 0 8px,
      #fee2e2 8px 10px
    );
  border-color: #fca5a5;
}
.calendar-day.cal-day-storniert .calendar-day-num,
.calendar-day.cal-day-storniert .calendar-day-dow {
  color: #991b1b;
  opacity: 0.85;
}

/* Wochenend-Tag ohne Events bekommt dezenten Grauschleier */
.calendar-day.cal-day-weekend:not(.cal-day-termin):not(.cal-day-einsatz):not(.cal-day-feiertag) {
  background: #f9fafb;
  color: var(--muted);
}

/* Heute-Ring — inset, damit er innerhalb der Box bleibt und nicht vom overflow-x:auto
   des Containers abgeschnitten wird (v1.35.3). */
.calendar-day.cal-day-today {
  box-shadow: inset 0 0 0 2px var(--link);
}

.calendar-day-num {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
}
.calendar-day-dow {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 1px;
}
.calendar-day.cal-day-feiertag .calendar-day-dow,
.calendar-day.cal-day-einsatz  .calendar-day-dow,
.calendar-day.cal-day-termin   .calendar-day-dow { color: rgba(0,0,0,.55); }

/* Warn-Icon (Feiertag + Einsatz) */
.calendar-day-warn {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 12px;
  line-height: 1;
  color: var(--danger);
  font-weight: 700;
  text-shadow: 0 0 2px #fff;
}

/* Popover beim Klick auf einen Tag */
.calendar-popover {
  position: fixed;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 12px;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 13px;
}
.calendar-popover-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendar-popover-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}
.calendar-popover-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.calendar-popover-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.calendar-popover-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.calendar-popover-item {
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.calendar-popover-item:hover { color: var(--link); }
.calendar-popover-item-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.calendar-popover-holiday {
  padding: 6px 8px;
  background: #fecaca;
  border-radius: 4px;
  font-size: 12px;
  color: #7f1d1d;
  font-weight: 600;
}
.calendar-popover-warn {
  padding: 6px 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  font-size: 11px;
  color: #9a3412;
  margin-top: 8px;
}

/* Main-Content bekommt padding-bottom, damit der letzte Inhalt nicht unter der Kalender-Bar verschwindet.
   v2.0.1, Punkt 1: nur wenn die Bar tatsächlich sichtbar ist (= nur unter Briefing).
   v2.9.7: Mindestabstand 64 px überall, damit der letzte Inhalt nie auf der Viewport-Kante klebt. */
.main { padding-bottom: 64px; }
body.has-calendar .main { padding-bottom: 160px; }

@media (max-width: 900px) {
  .calendar-bar,
  .calendar-popover { display: none !important; }
  .main { padding-bottom: calc(var(--mobile-nav-height) + 32px); }
  body.has-calendar .main { padding-bottom: calc(var(--mobile-nav-height) + 32px); }
}

/* ═══════════════════════════════════════════════════════════
   FORM-INPUT MIT RESET-ACTION (v1.33) — z. B. d-menge Reset
   ═══════════════════════════════════════════════════════════ */
.input-with-action {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.input-with-action input {
  flex: 1;
  min-width: 0;
}
.input-action-btn {
  flex: 0 0 auto;
  width: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.input-action-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--link);
}
/* v2.11.2: „Veralteter Wert"-Modifier — leuchtet auf, sobald der aktuelle
   Einzelpreis vom Service-Standardpreis abweicht, damit man auf einen Blick
   sieht, dass die Aktualisieren-Taste hier etwas zu sagen hat. */
.input-action-btn.is-outdated {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
  font-weight: 600;
}
.input-action-btn.is-outdated:hover {
  background: #fde68a;
  color: #78350f;
  border-color: #d97706;
}

/* ═══════════════════════════════════════════════════════════
   GANZTAGS-CHECKBOX (v1.33) — Termin/Einsatz-Modal
   ═══════════════════════════════════════════════════════════ */
.ganztag-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.ganztag-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* 2-Spalten-Mini-Grid innerhalb eines Form-Bereichs (z. B. Uhrzeit von/bis,
   Datum von/bis, Menge/Einzelpreis). Wird vom 3-col-Preview-Modal genutzt. */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   MODAL MIT LIVE-PREVIEW (v1.37.0)
   ═══════════════════════════════════════════════════════════
   Drei Spalten: Preview-Card links, Stammdaten mittig,
   Zugehörigkeiten rechts. Footer unten für Notizen/Kopplung.
   Mobile: kollabiert zu 1 Spalte (Preview zuerst oben).
   ─────────────────────────────────────────────────────────── */
.modal.modal-with-preview { padding: 24px 28px; }

.modal-3col {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: 28px;
  margin: 16px 0 4px;
  align-items: start;
}
@media (max-width: 1000px) {
  .modal-3col { grid-template-columns: 1fr; }
}

/* Preview-Card (links) */
.modal-preview-card {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  position: sticky;
  top: 0;
}
.preview-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  width: fit-content;
  max-width: 100%;
}
.preview-type-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
}
.preview-type-dot-muted { background: #e5e7eb; }
.preview-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.preview-title-placeholder { color: var(--muted); font-style: italic; font-weight: 400; }
.preview-time {
  font-size: 13px;
  color: var(--text);
}
.preview-time-muted { color: var(--muted); font-style: italic; }
.preview-kv {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px 10px;
  font-size: 12px;
}
.preview-kv-label { color: var(--muted); }
.preview-kv-value { color: var(--text); word-break: break-word; }
.preview-kv-value-muted { color: var(--muted); font-style: italic; }
.preview-status-wrap { margin-top: auto; padding-top: 8px; }

/* Sektions-Kopf (mit SVG statt Emoji) */
.modal-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.modal-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 0 0 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-section-title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Footer-Bereich unterhalb der 3-Spalten (Notizen, Kopplung) */
.modal-preview-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-preview-footer .modal-group-title {
  margin-top: 12px;
  padding: 0 0 8px;
  font-size: 11px;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}
.modal-preview-footer .modal-group-title:first-child { margin-top: 0; }

/* Einheitliche Form-Controls im 3-Spalten-Modal */
.modal-3col .form-group { margin-bottom: 0; }
.modal-3col .form-group > label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.modal-3col input[type="text"],
.modal-3col input[type="date"],
.modal-3col input[type="time"],
.modal-3col input[type="number"],
.modal-3col select {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}
.modal-3col textarea {
  width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit;
  min-height: 64px; max-height: 280px; field-sizing: content; overflow-y: auto;
}
.modal-3col .ganztag-wrap { font-size: 12px; color: var(--muted); }
.modal-3col .date-shortcut-btn,
.modal-3col .termin-typ-icon-btn { height: 26px; padding: 0 10px; font-size: 11px; }

/* Termin-Typ-Icon mit farbigem Punkt statt Emoji (v1.37.0) */
.termin-type-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
  vertical-align: -1px;
  margin-right: 4px;
}
.termin-type-dot-muted { background: #e5e7eb; }

/* ═══════════════════════════════════════════════════════════
   TERMIN-TYP-ICON-PICKER (v1.34)
   ═══════════════════════════════════════════════════════════ */
.termin-typ-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.termin-typ-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background .08s, border-color .08s;
}
.termin-typ-icon-btn:hover { background: var(--bg); border-color: var(--link); }
.termin-typ-icon-btn.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* Dropdown darunter als dezenter Fallback */
select.typ-select-secondary {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════
   KALENDER-POPOVER-HEADER PLUS-BUTTON (v1.33)
   ═══════════════════════════════════════════════════════════ */
.calendar-popover-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.calendar-popover-plus {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  font-weight: 600;
}
.calendar-popover-plus:hover { color: var(--text); }

.calendar-popover-quickmenu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  padding: 6px;
  min-width: 180px;
  z-index: 210;
}
.calendar-popover-quickmenu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 5px;
  font-family: inherit;
}
.calendar-popover-quickmenu button:hover { background: var(--bg); }

/* ═══════════════════════════════════════════════════════════
   ZEILEN-KALENDER-INDIKATOR (v1.40.0)
   ═══════════════════════════════════════════════════════════
   Kleines Kalender-Icon in Listen-Zeilen, das anzeigt: Eintrag
   ist im Kalender sichtbar (Aufgabe via Termin-Kopplung,
   Einsatz via gesetztem Datum_von).
   ─────────────────────────────────────────────────────────── */
.row-calendar-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--link);
  vertical-align: -2px;
  cursor: help;
}
.row-calendar-indicator svg {
  width: 13px;
  height: 13px;
}

/* ═══════════════════════════════════════════════════════════
   QUICK-CREATE — Plus-Button neben Firma-/Kontakt-Dropdowns (v1.43.0)
   ═══════════════════════════════════════════════════════════ */
.select-with-add {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.select-with-add select {
  flex: 1;
  min-width: 0;
}
.select-with-add-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.select-with-add-btn:hover {
  background: var(--bg);
  border-color: var(--link);
  color: var(--link);
}

/* ═══════════════════════════════════════════════════════════
   DEIN TAG — BRIEFING-DASHBOARD (v1.42.0)
   ═══════════════════════════════════════════════════════════
   Narratives Dashboard als Login-Landing. Drei Tabs Heute /
   Woche / Monat im selben Stil. Aufbau: Narrativ-Leiste,
   KPI-Mini-Leiste, Briefing-Cards (hot/opp/gap/good),
   Streak-Bar, Vorschau.
   ─────────────────────────────────────────────────────────── */

/* Narrativ-Leiste (oberster Eyecatcher) */
.briefing-narrative {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex; align-items: flex-start; gap: 16px;
}
.briefing-narrative-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.briefing-narrative-body { flex: 1; }
.briefing-narrative-greeting {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 4px;
}
.briefing-narrative-text {
  font-size: 15px; line-height: 1.5; color: var(--text);
}
.briefing-narrative-text strong { font-weight: 600; }
.briefing-narrative-text .accent-hot  { color: var(--danger); font-weight: 600; }
.briefing-narrative-text .accent-warn { color: var(--warning); font-weight: 600; }
.briefing-narrative-text .accent-good { color: var(--success); font-weight: 600; }

/* v1.45.0 — Heute-Tab Karten-Grid (kompakt, ~120 px hoch, 2 Spalten).
   Datendichte rauf, Scroll runter. */
.heute-deploy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .heute-deploy-grid { grid-template-columns: 1fr; }
}
.heute-card {
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 116px;
  max-height: 140px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.heute-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.heute-card.is-now {
  border-left: 2px solid var(--color-info);
  box-shadow: 0 0 0 1.5px var(--color-info), 0 4px 14px rgba(29, 78, 216, .12);
}
.heute-card-now-pill {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--color-info); color: #fff;
  padding: 2px 7px; border-radius: 999px;
}
.heute-card.is-billed {
  opacity: .7;
}
.heute-card.is-billed .heute-card-firma { text-decoration: line-through; }
.heute-card.is-cancelled {
  opacity: .55;
}
.heute-card.is-cancelled .heute-card-firma { text-decoration: line-through; }

/* Status-Akzent links pro Karte */
.heute-card.is-status-geplant       { border-left-color: var(--status-plan-accent); }
.heute-card.is-status-durchgeführt  { border-left-color: var(--status-done-accent); }
.heute-card.is-status-abgerechnet   { border-left-color: var(--status-billed-accent); }
.heute-card.is-status-storniert     { border-left-color: var(--status-overdue-accent); }
.heute-card.is-now                  { border-left-color: var(--color-info); }

.heute-card-row1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.heute-card-type {
  background: #f3f4f6; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
  font-weight: 500;
}
.heute-card-status {
  padding: 2px 8px; border-radius: 999px;
  font-weight: 500;
  background: var(--status-plan-bg); color: var(--status-plan-fg);
}
.heute-card.is-status-durchgeführt .heute-card-status { background: var(--status-done-bg); color: var(--status-done-fg); }
.heute-card.is-status-abgerechnet  .heute-card-status { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.heute-card.is-status-storniert    .heute-card-status { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }

.heute-card-row2 { flex: 1; min-width: 0; }
.heute-card-firma {
  font-size: 14px; font-weight: 500; color: var(--text);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.heute-card-sub {
  font-size: 12px; color: var(--muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.heute-card-row3 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 12px; color: var(--muted);
}
.heute-card-meta-muted { font-style: italic; }
.heute-card-price { font-weight: 500; color: var(--text); }

/* Quick-Add-Karte (gestrichelt) */
.heute-card-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-left-width: 1.5px;
  border-radius: 12px;
  min-height: 116px;
  max-height: 140px;
  color: var(--muted);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  font: inherit;
  padding: 12px;
  transition: border-color .15s, color .15s, background .15s;
}
.heute-card-add:hover {
  border-color: var(--color-info);
  color: var(--color-info);
  background: var(--status-plan-bg);
}
.heute-card-add-plus {
  font-size: 22px; font-weight: 400;
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center;
}

/* v1.45.4 — Nächste 3 Tage als 3 Cards nebeneinander unter den Einsätzen */
.heute-next3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 700px) {
  .heute-next3-grid { grid-template-columns: 1fr; }
}
.heute-next3-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  min-height: 140px;
}
.heute-next3-card.is-weekend { background: #fafafa; }
.heute-next3-head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--border);
}
.heute-next3-day-name {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
}
.heute-next3-day-date {
  font-size: 14px; font-weight: 500; color: var(--text);
  margin-top: 1px;
}
.heute-next3-items {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.heute-next3-empty {
  font-size: 11px; color: var(--muted); font-style: italic;
  padding-top: 4px;
}
.heute-next3-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.heute-next3-item:hover { background: var(--surface); }
.heute-next3-item-tag, .heute-next3-item-time {
  flex-shrink: 0;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f4f6; color: var(--muted);
  min-width: 48px; text-align: center;
}
.heute-next3-item-time { font-weight: 600; letter-spacing: 0; }
.heute-next3-item-text {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.heute-next3-item.is-termin { border-left-color: var(--status-plan-accent); }
.heute-next3-item.is-termin .heute-next3-item-tag,
.heute-next3-item.is-termin .heute-next3-item-time { background: var(--status-plan-bg); color: var(--status-plan-fg); }

.heute-next3-item.is-einsatz                            { border-left-color: var(--status-plan-accent); }
.heute-next3-item.is-einsatz.dep-status-geplant         { border-left-color: var(--status-plan-accent); }
.heute-next3-item.is-einsatz.dep-status-durchgeführt    { border-left-color: var(--status-done-accent); }
.heute-next3-item.is-einsatz.dep-status-abgerechnet     { border-left-color: var(--status-billed-accent); }
.heute-next3-item.is-einsatz.dep-status-storniert       { border-left-color: var(--status-overdue-accent); }
.heute-next3-item.is-einsatz .heute-next3-item-tag      { background: var(--status-plan-bg); color: var(--status-plan-fg); }
.heute-next3-item.is-einsatz.dep-status-durchgeführt .heute-next3-item-tag { background: var(--status-done-bg); color: var(--status-done-fg); }
.heute-next3-item.is-einsatz.dep-status-abgerechnet .heute-next3-item-tag  { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.heute-next3-item.is-einsatz.dep-status-storniert .heute-next3-item-tag    { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }

/* v1.45.0 — Vorschau-Akkordeon */
.heute-preview-accordion {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  margin-top: 16px;
}
.heute-preview-summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  user-select: none;
}
.heute-preview-summary::-webkit-details-marker { display: none; }
.heute-preview-chevron {
  display: inline-block;
  transition: transform .15s;
  color: var(--muted);
}
.heute-preview-accordion[open] .heute-preview-chevron { transform: rotate(90deg); }
.heute-preview-label { font-weight: 500; color: var(--text); }
.heute-preview-count {
  font-size: 12px; color: var(--muted);
  margin-left: auto;
}
.heute-preview-body {
  padding: 0 16px 16px;
  border-top: 0.5px solid var(--border);
  padding-top: 12px;
}
/* das innere .briefing-preview braucht im Akkordeon keine eigene Box mehr */
.heute-preview-body .briefing-preview {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.heute-preview-body .briefing-preview-title { display: none; }

/* v1.44.9 — Heute-Tab 2-Spalten-Layout (Hero links, Aufgaben-Aside rechts).
   v1.44.14: Aside breiter (380 → mehr Inhalt sichtbar). */
.heute-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}
.heute-main { min-width: 0; }
.heute-aside { min-width: 0; }

@media (max-width: 1200px) {
  .heute-grid { grid-template-columns: 1fr 340px; }
}
@media (max-width: 1000px) {
  .heute-grid { grid-template-columns: 1fr; }
}

.aside-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 16px;
}
.aside-card-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.aside-section { margin-bottom: 14px; }
.aside-section:last-of-type { margin-bottom: 0; }
.aside-section-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.aside-section-head.is-danger { color: var(--danger); }
.aside-section-count {
  font-size: 11px; color: var(--muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px; text-align: center;
}
.aside-section-head.is-danger .aside-section-count {
  background: #fef2f2; color: var(--danger);
}
.aside-section-title { font-size: 11px; }

.aside-task-row {
  display: block; width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background .15s, border-color .15s;
}
.aside-task-row:hover {
  background: var(--surface);
  border-color: var(--primary);
}
.aside-task-row:last-child { margin-bottom: 0; }
.aside-task-titel {
  font-size: 13px; color: var(--text);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 4px;
  /* v1.44.14: bis zu 2 Zeilen statt nowrap+ellipsis — mehr Inhalt sichtbar */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.aside-task-meta {
  font-size: 11px; color: var(--muted);
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}
.aside-task-date.is-bad { color: var(--danger); font-weight: 600; }
.aside-task-date.is-warn { color: var(--warning); font-weight: 600; }

.aside-section-more {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 6px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.aside-section-more:hover { background: var(--bg); color: var(--text); }

.aside-empty {
  font-size: 12px; color: var(--muted); font-style: italic;
  padding: 4px 0;
}
.aside-card-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.aside-link {
  background: transparent; border: none; padding: 0;
  font-size: 12px; color: var(--primary); cursor: pointer;
  font: inherit;
}
.aside-link:hover { text-decoration: underline; }

/* v1.45.0 — Datenpflege Insight-Pille in der Sidebar */
.aside-insight {
  background: var(--status-plan-bg);
  border: 0.5px solid #cfdef0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  color: var(--status-plan-fg);
}
.aside-insight-head {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 6px;
}
.aside-insight-body {
  font-size: 13px; line-height: 1.4;
  margin-bottom: 10px;
}
.aside-insight-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.aside-insight-btn {
  background: var(--status-plan-fg); color: #fff;
  border: none; padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  font: inherit;
}
.aside-insight-btn:hover { opacity: .85; }
.aside-insight-btn.is-ghost {
  background: transparent;
  color: var(--status-plan-fg);
  border: 0.5px solid var(--status-plan-fg);
}

/* v1.45.5: Indikator-Badge in der Firmen-Liste für unvollständige Datensätze */
.incomplete-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--status-holiday-bg);
  color: var(--status-holiday-fg);
  vertical-align: middle;
}
.filter-toggle {
  font-size: 13px; color: var(--text);
  user-select: none;
}
.filter-toggle input[type="checkbox"] {
  accent-color: var(--color-info);
}

/* v1.44.9 — Wochen-Tab kollabierte Aufgaben-Box */
.woche-tasks-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.woche-tasks-summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  user-select: none;
}
.woche-tasks-summary::-webkit-details-marker { display: none; }
.woche-tasks-chevron {
  display: inline-block;
  transition: transform .15s;
  color: var(--muted);
}
.woche-tasks-box[open] .woche-tasks-chevron { transform: rotate(90deg); }
.woche-tasks-label { font-weight: 600; color: var(--text); }
.woche-tasks-count {
  font-size: 12px; color: var(--muted);
  margin-left: auto;
}
.woche-tasks-count .kpi-inline-bad { color: var(--danger); font-weight: 500; }
.woche-tasks-list {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* v1.45.1 — Wochenstreifen oben über der Agenda; v1.47.0 reduziert auf Mo–Fr */
.week-strip-header {
  display: flex; align-items: baseline; gap: 12px;
  margin: 6px 4px 8px;
}
.week-strip-kw {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 999px;
}
.week-strip-range {
  font-size: 12px; color: var(--muted);
}
.week-strip-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 1024px) {
  .week-strip-row {
    grid-auto-flow: column;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .week-strip-card { scroll-snap-align: start; }
}
.week-strip-card {
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.week-strip-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.week-strip-card.is-today {
  border: 1.5px solid var(--color-info);
}
.week-strip-card.is-past { opacity: .65; }
.week-strip-card.is-free-weekend { opacity: .5; }
.week-strip-card-bar {
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--border);
}
.week-strip-card.is-ind-plan    .week-strip-card-bar { background: var(--status-plan-accent); }
.week-strip-card.is-ind-done    .week-strip-card-bar { background: var(--status-done-accent); }
.week-strip-card.is-ind-billed  .week-strip-card-bar { background: var(--status-billed-accent); }
.week-strip-card.is-ind-overdue .week-strip-card-bar { background: var(--status-overdue-accent); }
.week-strip-card.is-ind-holiday .week-strip-card-bar { background: var(--status-holiday-accent); }
.week-strip-card.is-ind-free    .week-strip-card-bar { background: var(--border); }

.week-strip-card-day {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
  padding-left: 6px;
}
.week-strip-card-date {
  font-size: 14px; font-weight: 500; color: var(--text);
  padding-left: 6px;
  margin-top: -2px;
}
.week-strip-card.is-today .week-strip-card-date { color: var(--color-info); }
.week-strip-card-counts {
  font-size: 11px; color: var(--muted);
  padding-left: 6px;
  margin-top: 4px;
}
.week-strip-card-sum {
  font-size: 12px; font-weight: 500; color: var(--text);
  padding-left: 6px;
}

/* Tagessumme rechts in der Agenda-Tageskarte */
.week-agenda-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.week-agenda-head-left {
  display: flex; flex-direction: column; gap: 2px;
}
.week-agenda-day-sum {
  font-size: 13px; font-weight: 500; color: var(--text);
  padding: 2px 8px;
  background: var(--bg);
  border-radius: 6px;
}
.week-agenda-day.is-holiday {
  background: linear-gradient(90deg, var(--status-holiday-bg) 0%, var(--surface) 30%);
  border-left-color: var(--status-holiday-accent);
}
.week-agenda-day.is-weekend:not(.is-today):not(.is-holiday) {
  opacity: .75;
}
.week-day-pulse {
  animation: weekDayPulse 1s ease-out;
}
@keyframes weekDayPulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 78, 216, .4); }
  100% { box-shadow: 0 0 0 12px rgba(29, 78, 216, 0); }
}

/* Status-Border am Listeneintrag (Item) — Farben werden in der bestehenden
   .week-agenda-item-Regel via dep-status-* class bereits gesetzt; hier
   explizit auf die Token gemappt für Konsistenz: */
.week-agenda-item.is-einsatz.dep-status-geplant      { border-left-color: var(--status-plan-accent); }
.week-agenda-item.is-einsatz.dep-status-durchgeführt { border-left-color: var(--status-done-accent); }
.week-agenda-item.is-einsatz.dep-status-abgerechnet  { border-left-color: var(--status-billed-accent); }
.week-agenda-item.is-einsatz.dep-status-storniert    { border-left-color: var(--status-overdue-accent); }

/* v1.44.13 — Wochen-Agenda „Diese Woche". Mo–Fr als vertikale Liste mit
   Tag-Headern. Pro Tag horizontale Item-Zeilen (Termine + Einsätze). */
.week-agenda {
  display: flex; flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.week-agenda-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.week-agenda-day.is-today {
  border-left-color: var(--success);
  background: linear-gradient(90deg, #f0fdf4 0%, var(--surface) 30%);
}
.week-agenda-day.is-past { opacity: .6; }
.week-agenda-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.week-agenda-day-name {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.week-agenda-day.is-today .week-agenda-day-name { color: var(--success); }
.week-agenda-day-date {
  font-size: 12px; color: var(--muted);
}
.week-agenda-items {
  display: flex; flex-direction: column; gap: 6px;
}
.week-agenda-empty {
  font-size: 12px; color: var(--muted); font-style: italic;
  padding: 4px 0;
}
.week-agenda-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.week-agenda-item:hover {
  background: var(--surface);
  transform: translateX(2px);
}
.week-agenda-item.is-active {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.week-agenda-tag {
  flex-shrink: 0;
  width: 64px; text-align: center;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 0;
  border-radius: 999px;
  background: #f3f4f6; color: var(--muted);
}
.week-agenda-time, .week-agenda-status {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  min-width: 56px;
  text-align: center;
  padding: 2px 8px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* v1.45.5: Einheitliche Pill (fixed width) für saubere Spaltenausrichtung */
.week-agenda-pill {
  flex-shrink: 0;
  width: 78px;
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: .3px;
  padding: 4px 0;
  border-radius: 6px;
  background: #f3f4f6;
  color: var(--muted);
}
.week-agenda-body { flex: 1; min-width: 0; }
.week-agenda-titel {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-agenda-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Termin = blau */
.week-agenda-item.is-termin {
  border-left-color: var(--link);
  background: #eff6ff;
}
.week-agenda-item.is-termin:hover { background: #dbeafe; }
.week-agenda-item.is-termin .week-agenda-tag { background: #dbeafe; color: var(--link); }
.week-agenda-item.is-termin .week-agenda-pill { background: var(--status-plan-bg); color: var(--status-plan-fg); }

/* Einsatz — Status-Farben */
.week-agenda-item.is-einsatz {
  border-left-color: var(--success);
  background: #f0fdf4;
}
.week-agenda-item.is-einsatz:hover { background: #dcfce7; }
.week-agenda-item.is-einsatz .week-agenda-tag { background: #dcfce7; color: var(--success); }
.week-agenda-item.is-einsatz .week-agenda-pill { background: var(--status-plan-bg); color: var(--status-plan-fg); }
.week-agenda-item.is-einsatz.dep-status-durchgeführt .week-agenda-pill { background: var(--status-done-bg); color: var(--status-done-fg); }
.week-agenda-item.is-einsatz.dep-status-abgerechnet .week-agenda-pill  { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.week-agenda-item.is-einsatz.dep-status-storniert .week-agenda-pill    { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }
.week-agenda-item.is-einsatz.dep-status-durchgeführt { border-left-color: var(--muted); background: #f9fafb; }
.week-agenda-item.is-einsatz.dep-status-durchgeführt:hover { background: #f3f4f6; }
.week-agenda-item.is-einsatz.dep-status-durchgeführt .week-agenda-tag { background: #f3f4f6; color: var(--muted); }
.week-agenda-item.is-einsatz.dep-status-abgerechnet { border-left-color: var(--link); background: #eff6ff; }
.week-agenda-item.is-einsatz.dep-status-abgerechnet:hover { background: #dbeafe; }
.week-agenda-item.is-einsatz.dep-status-abgerechnet .week-agenda-tag { background: #dbeafe; color: var(--link); }
.week-agenda-item.is-einsatz.dep-status-storniert { border-left-color: var(--danger); background: #fef2f2; opacity: .75; }
.week-agenda-item.is-einsatz.dep-status-storniert .week-agenda-tag { background: #fef2f2; color: var(--danger); }

@media (max-width: 600px) {
  .week-agenda-item { flex-wrap: wrap; }
  .week-agenda-tag, .week-agenda-time, .week-agenda-status { min-width: auto; }
}

/* v1.44.7 — Wochen-Strip „Diese Woche".
   v1.44.8: 5 Werktage Mo–Fr, Klick auf Pill öffnet Inline-Dashboard
   unterhalb der Strip statt Modal. */
.week-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.week-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  min-height: 180px;
  display: flex; flex-direction: column;
  transition: border-color .15s, background .15s;
}
.week-day.is-today {
  border-color: var(--success);
  background: linear-gradient(180deg, #f0fdf4 0%, var(--surface) 30%);
  box-shadow: 0 2px 8px rgba(34, 197, 94, .08);
}
.week-day.is-past { opacity: .55; }
.week-day-head {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.week-day.is-today .week-day-head { border-color: #bbf7d0; }
.week-day-name {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
}
.week-day.is-today .week-day-name { color: var(--success); }
.week-day-date {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-top: 1px;
}
.week-day-items {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.week-day-empty {
  font-size: 11px; color: var(--muted); font-style: italic;
  padding-top: 4px;
}

/* Pills — kompakt, klickbar */
.week-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 11px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  transition: background .15s, border-color .15s, transform .1s;
  overflow: hidden;
}
.week-pill:hover {
  background: var(--surface);
  transform: translateX(1px);
}
.week-pill.is-active {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  background: var(--surface);
}
.week-pill .week-pill-kind {
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted);
}
.week-pill .week-pill-time {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
}
.week-pill .week-pill-title {
  font-size: 12px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Termin = blau */
.week-pill.is-termin { border-left-color: var(--link); background: #eff6ff; }
.week-pill.is-termin:hover { background: #dbeafe; }

/* Einsatz — Status-Farben */
.week-pill.is-einsatz { border-left-color: var(--success); background: #f0fdf4; }
.week-pill.is-einsatz:hover { background: #dcfce7; }
.week-pill.is-einsatz.dep-status-durchgeführt { border-left-color: var(--muted); background: #f9fafb; }
.week-pill.is-einsatz.dep-status-durchgeführt:hover { background: #f3f4f6; }
.week-pill.is-einsatz.dep-status-abgerechnet { border-left-color: var(--link); background: #eff6ff; }
.week-pill.is-einsatz.dep-status-abgerechnet:hover { background: #dbeafe; }
.week-pill.is-einsatz.dep-status-storniert { border-left-color: var(--danger); background: #fef2f2; opacity: .7; }
.week-pill.is-einsatz .week-pill-kind { color: var(--success); }
.week-pill.is-einsatz.dep-status-durchgeführt .week-pill-kind { color: var(--muted); }
.week-pill.is-einsatz.dep-status-abgerechnet .week-pill-kind { color: var(--link); }
.week-pill.is-einsatz.dep-status-storniert .week-pill-kind { color: var(--danger); }

/* Inline-Dashboard unterhalb der Wochen-Strip */
.week-expand-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  animation: weekExpandIn .2s ease-out;
}
@keyframes weekExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .week-strip { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .week-day { min-height: 160px; }
}
@media (max-width: 600px) {
  .week-strip { display: flex; flex-direction: column; }
  .week-day { min-height: auto; }
  .week-day-head { display: flex; justify-content: space-between; align-items: center; }
}

/* v1.45.6 — Monat-Sicht-Toggle (Technik / Vertrieb / Beides) */
.month-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 16px;
  width: fit-content;
}
.month-view-btn {
  font-size: 12px; font-weight: 500;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  transition: background .15s, color .15s;
}
.month-view-btn:hover { color: var(--text); }
.month-view-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* v1.45.6 — Einsatzleistungs-Bars (Technik) */
.einsatz-stat-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.einsatz-stat-row {
  display: grid;
  grid-template-columns: 100px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.einsatz-stat-label {
  font-size: 12px; color: var(--text);
}
.einsatz-stat-bar-wrap {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.einsatz-stat-bar {
  display: block; height: 100%;
  border-radius: 4px;
  transition: width .3s;
}
.einsatz-stat-bar.is-plan    { background: var(--status-plan-accent); }
.einsatz-stat-bar.is-done    { background: var(--status-done-accent); }
.einsatz-stat-bar.is-billed  { background: var(--status-billed-accent); }
.einsatz-stat-bar.is-overdue { background: var(--status-overdue-accent); }
.einsatz-stat-count {
  font-size: 13px; font-weight: 500;
  text-align: right;
  color: var(--text);
}
.month-section-meta {
  font-size: 11px; color: var(--muted);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
}

/* Overdue-Variante für KPI-Tile */
.kpi-tile.is-overdue { border-left-color: var(--status-overdue-accent); }
.kpi-tile.is-overdue .kpi-tile-value { color: var(--status-overdue-accent); }

/* v1.45.2 — Monat-Tab Datendichte-Dashboard */
.month-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .month-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.kpi-tile {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left: 2px solid var(--muted);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px;
  transition: transform .12s, box-shadow .12s;
}
.kpi-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.kpi-tile.is-billed { border-left-color: var(--status-billed-accent); }
.kpi-tile.is-billed .kpi-tile-value { color: var(--status-billed-accent); }
.kpi-tile.is-billed .kpi-tile-spark { color: var(--status-billed-accent); }
.kpi-tile.is-plan { border-left-color: var(--status-plan-accent); }
.kpi-tile.is-plan .kpi-tile-value { color: var(--status-plan-accent); }
.kpi-tile.is-plan .kpi-tile-spark { color: var(--status-plan-accent); }
.kpi-tile.is-done { border-left-color: var(--status-done-accent); }
.kpi-tile.is-done .kpi-tile-value { color: var(--status-done-accent); }
.kpi-tile.is-info { border-left-color: var(--color-info); }
.kpi-tile.is-info .kpi-tile-value { color: var(--color-info); }
.kpi-tile-body { flex: 1; min-width: 0; }
.kpi-tile-kicker {
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 4px;
}
.kpi-tile-value {
  font-size: 22px; font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.kpi-tile-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 4px;
}
.kpi-tile-spark { flex-shrink: 0; opacity: .8; }

/* Umsatz-Verlauf-Chart */
.month-chart {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

/* Top-Kunden + Pipeline nebeneinander; v1.46.0: optional 3-spaltig (is-three) */
.month-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.month-bottom-grid.is-three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .month-bottom-grid.is-three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .month-bottom-grid,
  .month-bottom-grid.is-three { grid-template-columns: 1fr; }
}
.month-section {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.month-section .month-section-title {
  margin-top: 0; margin-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.month-section-empty {
  font-size: 12px; color: var(--muted); font-style: italic;
  padding: 6px 0;
}

/* Top-Kunden — Balken-Diagramm vertikal mit Liste */
.top-customers {
  display: flex; flex-direction: column; gap: 8px;
}
.top-customer-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-height: 40px;
  transition: background .15s;
}
.top-customer-row:hover { background: var(--surface); border-color: var(--status-billed-accent); }
.top-customer-bar {
  width: 4px;
  background: var(--status-billed-accent);
  border-radius: 2px;
  align-self: stretch;
  margin: 4px 0;
  min-height: 8px;
}
.top-customer-name {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-customer-sum {
  font-size: 13px; font-weight: 500; color: var(--text);
  text-align: right;
}

/* Pipeline-Stages */
.pipeline-stages {
  display: flex; flex-direction: column; gap: 8px;
}
.pipeline-stage-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  background: var(--bg);
  transition: background .15s;
}
.pipeline-stage-row.is-plan   { background: var(--status-plan-bg); color: var(--status-plan-fg); }
.pipeline-stage-row.is-done   { background: var(--status-done-bg); color: var(--status-done-fg); }
.pipeline-stage-row.is-billed { background: var(--status-billed-bg); color: var(--status-billed-fg); }
.pipeline-stage-row:hover { filter: brightness(.97); }
.pipeline-stage-name { font-size: 13px; font-weight: 500; }
.pipeline-stage-count {
  font-size: 12px; font-weight: 500;
  background: rgba(255,255,255,.6);
  padding: 2px 8px;
  border-radius: 999px;
}
.pipeline-stage-sum { font-size: 13px; font-weight: 500; }
.pipeline-stage-weight {
  font-size: 10px; font-weight: 500;
  opacity: .7;
  margin-left: 6px;
}

/* v1.46.0 — Restmonat-Liste (Technik-Sicht) */
.restmonat-list {
  display: flex; flex-direction: column; gap: 6px;
}
.restmonat-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .15s;
}
.restmonat-row:hover { background: var(--surface); border-color: var(--status-plan-accent); }
.restmonat-row.is-overdue { border-color: var(--status-overdue-accent); background: var(--status-overdue-bg); }
.restmonat-row.is-overdue:hover { filter: brightness(.97); }
.restmonat-date {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.restmonat-row.is-overdue .restmonat-date { color: var(--status-overdue-accent); }
.restmonat-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.restmonat-firma {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.restmonat-meta {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-section-overdue {
  margin-top: 16px;
  border-color: var(--status-overdue-accent);
}

/* v1.46.0 — Mitgliedschafts-Liste (Vertrieb-Sicht) */
.membership-list {
  display: flex; flex-direction: column; gap: 6px;
}
.membership-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .15s;
}
.membership-row:hover { background: var(--surface); border-color: var(--status-billed-accent); }
.membership-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.membership-firma {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.membership-meta {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.membership-pills {
  display: flex; flex-direction: column; gap: 3px;
  align-items: flex-end;
}
.membership-pill {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.membership-pill.is-warn {
  background: var(--status-plan-bg);
  color: var(--status-plan-fg);
}
.membership-pill.is-overdue {
  background: var(--status-overdue-bg);
  color: var(--status-overdue-accent);
}

/* v1.44.12 — Monat-Tab Dashboard mit klickbaren KPI-Kacheln */
.month-dashboard { margin-bottom: 20px; }
.month-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin: 20px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.month-section-title:first-child { margin-top: 0; }
.month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.month-grid-revenue {
  grid-template-columns: repeat(2, 1fr);
}
.month-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  display: flex; flex-direction: column;
}
.month-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.month-tile-kicker {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 6px;
}
.month-tile-value {
  font-size: 22px; font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.month-tile-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 4px;
}

/* Status-Farben pro Kachel */
.month-tile.is-neutral      { border-left-color: var(--muted); }
.month-tile.is-plan         { border-left-color: var(--success); }
.month-tile.is-plan         .month-tile-value { color: var(--success); }
.month-tile.is-done         { border-left-color: var(--text); }
.month-tile.is-billed       { border-left-color: var(--link); }
.month-tile.is-billed       .month-tile-value { color: var(--link); }
.month-tile.is-warn         { border-left-color: var(--warning); }
.month-tile.is-warn         .month-tile-value { color: var(--warning); }
.month-tile.is-danger       { border-left-color: var(--danger); }
.month-tile.is-danger       .month-tile-value { color: var(--danger); }

/* Umsatz-Kacheln — größer und prominenter */
.month-tile.is-plan-revenue,
.month-tile.is-billed-revenue {
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
}
.month-tile.is-plan-revenue {
  border-left-color: var(--success);
}
.month-tile.is-plan-revenue .month-tile-value { color: var(--success); font-size: 28px; }
.month-tile.is-billed-revenue {
  border-left-color: var(--link);
}
.month-tile.is-billed-revenue .month-tile-value { color: var(--link); font-size: 28px; }

@media (max-width: 600px) {
  .month-grid-revenue { grid-template-columns: 1fr; }
}

/* v1.44.4 — Tab-Zeile mit inline KPIs rechts.
   Tabs links, kompakte KPI-Bar rechts (Text-only, keine Icons) — der Page-
   Header bleibt frei für Titel + Datum. */
.heute-tabs-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.heute-tabs-row .detail-tabs {
  border-bottom: none;
  margin-bottom: 0;
}
.briefing-kpis-inline {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.briefing-kpis-inline .kpi-inline-num {
  font-weight: 600; color: var(--text);
}
.briefing-kpis-inline .kpi-inline-sep {
  color: var(--border); font-weight: 400;
}
.briefing-kpis-inline .kpi-inline-bad {
  color: var(--danger); font-weight: 500;
}
@media (max-width: 600px) {
  .heute-tabs-row { gap: 6px; }
  .briefing-kpis-inline { font-size: 12px; gap: 6px; padding-bottom: 8px; }
}

/* ─── HERO-BLOCK FÜR HEUTIGEN EINSATZ (v1.44) ───
   An Einsatz-Tagen ersetzt dieser Block die KPI-Leiste oben — der Einsatz
   ist die einzige direkt umsatzbringende Tätigkeit und soll maximalen
   visuellen Fokus bekommen. Grüner Akzent, große Typografie, Stat-Grid. */
.briefing-hero-deployment {
  position: relative;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  padding: 28px 32px 24px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(34, 197, 94, .08);
}
.briefing-hero-deployment.is-done {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: var(--border);
  box-shadow: none;
}
.briefing-hero-deployment.is-active {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border-color: #fde047;
  box-shadow: 0 4px 12px rgba(234, 179, 8, .08);
}
.briefing-hero-stripe {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--success);
}
.briefing-hero-deployment.is-done .briefing-hero-stripe { background: var(--muted); }
.briefing-hero-deployment.is-active .briefing-hero-stripe { background: var(--warning); }
.briefing-hero-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.briefing-hero-kicker {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--success);
  background: #dcfce7;
  padding: 4px 10px;
  border-radius: 999px;
}
.briefing-hero-deployment.is-done .briefing-hero-kicker { color: var(--muted); background: #f1f5f9; }
.briefing-hero-deployment.is-active .briefing-hero-kicker { color: var(--warning); background: #fef3c7; }
.briefing-hero-status {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,.7);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.briefing-hero-firma {
  font-size: 28px; font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 4px;
}
.briefing-hero-titel {
  font-size: 15px; color: var(--text-muted, var(--muted));
  margin-bottom: 24px;
}
.briefing-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(34, 197, 94, .15);
  border-bottom: 1px solid rgba(34, 197, 94, .15);
  margin-bottom: 18px;
}
.briefing-hero-deployment.is-done .briefing-hero-stats {
  border-color: var(--border);
}
.briefing-hero-deployment.is-active .briefing-hero-stats {
  border-color: rgba(234, 179, 8, .2);
}
.briefing-hero-stat {
  min-width: 0;
}
.briefing-hero-stat-label {
  font-size: 10px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px;
}
.briefing-hero-stat-value {
  font-size: 15px; font-weight: 600; color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.briefing-hero-stat-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
}
.briefing-hero-rest {
  font-size: 12px; color: var(--muted);
  margin-bottom: 12px;
  font-style: italic;
}
.briefing-hero-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.briefing-hero-actions .briefing-btn.is-primary {
  background: var(--success);
  border-color: var(--success);
}
.briefing-hero-deployment.is-done .briefing-hero-actions .briefing-btn.is-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.briefing-hero-deployment.is-active .briefing-hero-actions .briefing-btn.is-primary {
  background: var(--warning);
  border-color: var(--warning);
}

/* Kompakte KPI-Leiste, wenn der Hero schon den Fokus hat */
.briefing-kpis.is-compact { margin-bottom: 14px; }
.briefing-kpis.is-compact .briefing-kpi { padding: 8px 12px; }
.briefing-kpis.is-compact .briefing-kpi-icon { width: 26px; height: 26px; }
.briefing-kpis.is-compact .briefing-kpi-icon svg { width: 13px; height: 13px; }
.briefing-kpis.is-compact .briefing-kpi-value { font-size: 14px; }

@media (max-width: 768px) {
  .briefing-hero-deployment { padding: 20px 22px 18px; }
  .briefing-hero-firma { font-size: 22px; }
  .briefing-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* KPI-Mini-Leiste (oben, dezent) */
.briefing-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .briefing-kpis { grid-template-columns: repeat(2, 1fr); }
}
.briefing-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.briefing-kpi-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.briefing-kpi-icon svg { width: 16px; height: 16px; }
.briefing-kpi.is-warn .briefing-kpi-icon { background: #fef3c7; color: var(--warning); }
.briefing-kpi.is-danger .briefing-kpi-icon { background: #fef2f2; color: var(--danger); }
.briefing-kpi-body { flex: 1; min-width: 0; }
.briefing-kpi-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 2px;
}
.briefing-kpi-value {
  font-size: 16px; font-weight: 600; color: var(--text);
  line-height: 1.2;
}
.briefing-kpi.is-danger .briefing-kpi-value { color: var(--danger); }

/* Section-Head */
.briefing-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 28px 0 12px;
}
.briefing-section-title {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.briefing-section-meta { font-size: 11px; color: var(--muted); }

/* Briefing-Card (Herzstück) */
.briefing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  margin-bottom: 12px;
  position: relative;
  transition: border-color .12s, box-shadow .12s;
}
.briefing-card:hover {
  border-color: #d1d5db;
  box-shadow: var(--shadow);
}
.briefing-card-stripe {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.briefing-card.tone-hot   .briefing-card-stripe { background: var(--danger); }
.briefing-card.tone-opp   .briefing-card-stripe { background: var(--warning); }
.briefing-card.tone-gap   .briefing-card-stripe { background: var(--link); }
.briefing-card.tone-good  .briefing-card-stripe { background: var(--success); }

.briefing-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.briefing-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: 100px;
}
.tone-hot  .briefing-kicker { background: #fef2f2; color: var(--danger); }
.tone-opp  .briefing-kicker { background: #fef3c7; color: var(--warning); }
.tone-gap  .briefing-kicker { background: #dbeafe; color: var(--link); }
.tone-good .briefing-kicker { background: #dcfce7; color: var(--success); }
.briefing-card-since { font-size: 11px; color: var(--muted); }

.briefing-card-headline {
  font-size: 15px; font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.briefing-card-body {
  font-size: 13px; color: var(--text);
  line-height: 1.55;
  margin-bottom: 12px;
}
.briefing-card-body em { color: var(--muted); font-style: italic; }

.briefing-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 12px;
}
.briefing-meta-item {
  display: flex; flex-direction: column;
  min-width: 80px;
}
.briefing-meta-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: 2px;
}
.briefing-meta-value {
  font-size: 13px; font-weight: 500; color: var(--text);
}
.briefing-meta-value-bad  { color: var(--danger); }
.briefing-meta-value-warn { color: var(--warning); }

.briefing-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.briefing-btn {
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  transition: background .1s, border-color .1s;
  white-space: nowrap;
}
.briefing-btn:hover { background: var(--bg); }
.briefing-btn.is-primary {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.briefing-btn.is-primary:hover { opacity: .85; }
.briefing-btn.is-ghost {
  border-color: transparent; color: var(--muted);
}
.briefing-btn.is-ghost:hover { color: var(--text); background: var(--bg); }

.briefing-card.is-compact {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
}
.briefing-card.is-compact .briefing-card-body { margin-bottom: 0; flex: 1; }
.briefing-card.is-compact .briefing-meta { display: none; }

/* Streak-Bar */
.briefing-streak {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  margin: 16px 0;
  font-size: 13px;
  color: var(--text);
}
.briefing-streak-dot {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px #dcfce7;
  flex-shrink: 0;
}
.briefing-streak strong { font-weight: 600; }

/* Vorschau */
.briefing-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 20px;
}
.briefing-preview-title {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.briefing-preview-row {
  display: flex; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  gap: 20px;
}
.briefing-preview-row:last-child { border-bottom: none; }
.briefing-preview-day-col {
  flex-shrink: 0;
  min-width: 90px;
}
.briefing-preview-day {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.briefing-preview-day-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 1px;
}
.briefing-preview-items {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.briefing-preview-empty {
  font-size: 12px; color: var(--muted); font-style: italic;
  padding-top: 1px;
}
.briefing-preview-item {
  display: flex; align-items: flex-start; gap: 12px;
}
.briefing-preview-kind {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 0;
  border-radius: 999px;
  margin-top: 1px;
}
.briefing-preview-kind.is-termin { background: #dbeafe; color: var(--link); }
.briefing-preview-kind.is-einsatz { background: #dcfce7; color: var(--success); }
.briefing-preview-item-body { flex: 1; min-width: 0; }
.briefing-preview-item-titel {
  font-size: 13px; color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.briefing-preview-time {
  display: inline-block;
  font-size: 11px; font-weight: 600; color: var(--muted);
  margin-right: 4px;
}
.briefing-preview-item-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
  word-break: break-word;
}

@media (max-width: 600px) {
  .briefing-narrative { padding: 16px; flex-direction: column; }
  .briefing-narrative-avatar { width: 36px; height: 36px; }
  .briefing-card { padding: 16px 16px 14px; }
  .briefing-meta { gap: 8px 16px; }
  .briefing-meta-item { min-width: 60px; }
}

@keyframes briefingFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.briefing-narrative,
.briefing-kpis,
.briefing-card,
.briefing-streak,
.briefing-preview {
  animation: briefingFadeIn .35s ease-out backwards;
}
.briefing-kpis                  { animation-delay: .05s; }
.briefing-card:nth-of-type(1)   { animation-delay: .12s; }
.briefing-card:nth-of-type(2)   { animation-delay: .18s; }
.briefing-card:nth-of-type(3)   { animation-delay: .24s; }
.briefing-card:nth-of-type(4)   { animation-delay: .30s; }
.briefing-streak                { animation-delay: .36s; }
.briefing-preview               { animation-delay: .42s; }

/* ═══════════════════════════════════════════════════════════
   v2.0.2: DRAWER-SYSTEM — slide-in von rechts für Anlage/Bearbeiten
   Parallel zum bestehenden modal-overlay-System; bestehende Modale
   werden Stück für Stück umgestellt (Punkt 8). Open/Close-Pattern wie
   bei modal-overlay: .classList.toggle('open') auf der gleichen ID.
   ═══════════════════════════════════════════════════════════ */

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1000;
  display: none;
}
.drawer-overlay.open { display: block; }

.drawer {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 720px;
  max-width: 95vw;
  background: var(--surface);
  display: flex; flex-direction: column;
  border-left: 0.5px solid var(--border-strong);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
}
.drawer-overlay.open .drawer { transform: translateX(0); }
.drawer--wide { width: 800px; }

/* v2.24.0: Drawer im Arbeitsplatz-Stage = Inline-Form statt Slide-Out.
   Anlage-/Edit-Drawer (Firma, Kontakt, Termin, Projekt, Einsatz, Aufgabe)
   sind beim App-Boot in den Stage gemoved und rendern dort als Workbench-
   Form. Wenn .open, übernehmen sie die ganze Stage-Fläche; Welcome-Block
   wird ausgeblendet. */
#arbeitsplatz-stage > .drawer-overlay {
  position: static; inset: auto;
  background: transparent;
  z-index: auto;
  display: none;
}
#arbeitsplatz-stage > .drawer-overlay.open { display: block; }
#arbeitsplatz-stage > .drawer-overlay > .drawer {
  position: static;
  width: 100%; max-width: none;
  border-left: none;
  box-shadow: none;
  transform: none;
  transition: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
#arbeitsplatz-stage:has(> .drawer-overlay.open) > .stage-welcome { display: none; }
/* Wenn ein Drawer offen ist, auch eine ggf. aktive Detail-Page verbergen —
   die Workbench-Mitte zeigt nur eine Sache zur Zeit. */
#arbeitsplatz-stage:has(> .drawer-overlay.open) > .page.active { display: none; }
#arbeitsplatz-stage:has(> .drawer-overlay.open) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Sticky Header */
.drawer__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.drawer__title { font-size: 16px; font-weight: 500; color: var(--text); }
.drawer__close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1;
  border-radius: var(--radius-md);
}
.drawer__close:hover { background: var(--bg); color: var(--text); }

/* Optional Template-Bar zwischen Header und Body */
.drawer__template {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.drawer__template-label {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.drawer__template-select {
  flex: 1;
  padding: 5px 10px;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--text);
  cursor: pointer; font-family: inherit;
}

/* Scrollbarer Body */
.drawer__body { flex: 1; overflow-y: auto; }

/* v2.25.0: Live-Preview-Karte oben im Drawer ausgeblendet — wird seit
   v2.24.2 in die linke Spalte des Arbeitsplatzes gespiegelt. */
.drawer__preview { display: none; }
.drawer__preview-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.drawer__preview-title { font-size: 13px; font-weight: 500; margin-bottom: 3px; color: var(--text); }
.drawer__preview-sub { font-size: 11px; color: var(--muted); }

/* v2.25.0: Sektionen kompakter — kein Background-Wechsel, kein Bullet-Dot,
   schmalerer Label. Spart pro Sektion ~24 px Höhe und nimmt die unruhige
   Streifenoptik weg. */
.drawer__section {
  padding: 16px 24px 18px;
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
}
.drawer__section:last-of-type { border-bottom: none; }

.drawer__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}
.drawer__section-label::after {
  /* dünner Trennstrich nach dem Label — markiert die Sektion ohne BG-Block */
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.drawer__section-label-OLD-BULLET-disabled::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary, #1e40af);
  flex-shrink: 0;
}
.drawer__section-label-aux {
  font-size: 11px; font-weight: 400; letter-spacing: 0.3px;
  color: var(--tertiary);
  text-transform: none;
  margin-left: auto;
}

/* Form-Felder im Drawer — eigene, leichte Variante. Bestehende
   .form-group/.form-row-2/.form-row-3-Klassen werden im Drawer-Kontext
   neu gestylt, damit sie nicht das alte Modal-Spacing erben. */
.drawer .form-group { margin-bottom: 14px; }
.drawer .form-group:last-child { margin-bottom: 0; }
.drawer .form-group > label {
  font-size: 11px; color: var(--muted);
  margin-bottom: 0;            /* .form-group gap: 6px sorgt für Abstand */
  font-weight: normal;
}
.drawer .form-group input[type="text"],
.drawer .form-group input[type="date"],
.drawer .form-group input[type="time"],
.drawer .form-group input[type="email"],
.drawer .form-group input[type="tel"],
.drawer .form-group input[type="number"],
.drawer .form-group select,
.drawer .form-group textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 14px; color: var(--text);
  font-family: inherit;
  height: 36px;
  line-height: 1.4;
}
.drawer .form-group textarea {
  height: auto;
  min-height: 64px;
  max-height: 280px;
  resize: vertical;
  padding-top: 9px;
  field-sizing: content;
  overflow-y: auto;
}
.drawer .form-group input:focus,
.drawer .form-group select:focus,
.drawer .form-group textarea:focus {
  outline: none;
  border-color: var(--text);
}
.drawer .form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.drawer .form-row-3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.drawer .field-hint {
  font-size: 11px; color: var(--tertiary);
  margin-top: 5px; display: block;
}

/* Sticky Footer */
.drawer__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: var(--surface);
  border-top: 0.5px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.drawer__footer-status {
  font-size: 11px; color: var(--tertiary);
}
.drawer__footer-status--warn {
  color: var(--warning, #ba7517);
}
.drawer__footer-actions {
  display: flex; gap: 8px;
  margin-left: auto;
}

/* Mobile: Vollbreiten-Drawer */
@media (max-width: 700px) {
  .drawer, .drawer--wide { width: 100%; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   v2.0.3: WORKFLOW-CHECKLISTEN — Punkt 9
   Vorbereitung / Dokumentation als Schritt-Liste pro Detail-Page.
   ═══════════════════════════════════════════════════════════ */
.workflow-checklist {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.workflow-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.workflow-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.workflow-progress {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.workflow-progress strong {
  color: var(--success);
  font-weight: 600;
}
.workflow-intro {
  font-size: 12px; color: var(--muted);
  margin-bottom: 14px;
}
.workflow-steps {
  display: flex; flex-direction: column; gap: 6px;
}
.workflow-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.workflow-step:hover { background: var(--bg-soft); }
.workflow-step input[type="checkbox"] {
  margin-top: 2px;
  width: 14px; height: 14px;
  cursor: pointer;
  accent-color: var(--text);
  flex-shrink: 0;
}
.workflow-step-label {
  font-size: 13px; color: var(--text);
  line-height: 1.4;
}
.workflow-step.is-done .workflow-step-label {
  color: var(--muted);
  text-decoration: line-through;
}

/* v2.13.0: Inline-Editor für Workflow-Schritte */
.workflow-head-meta {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.workflow-edit-btn {
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.workflow-edit-btn:hover { background: var(--bg); border-color: var(--link); color: var(--link); }
.workflow-edit-btn-primary {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.workflow-edit-btn-primary:hover { background: #000; color: var(--surface); }
.workflow-edit-btn-secondary { color: var(--muted); }
.workflow-checklist-edit { border-color: var(--text); }
.workflow-edit-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.workflow-edit-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border);
}
.workflow-edit-move {
  width: 24px; height: 24px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 0;
  flex-shrink: 0;
}
.workflow-edit-move:hover:not(:disabled) { color: var(--text); }
.workflow-edit-move:disabled { opacity: 0.3; cursor: not-allowed; }
.workflow-edit-label {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.workflow-edit-label:focus { outline: none; border-color: var(--text); }
.workflow-edit-required {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.workflow-edit-required input[type="checkbox"] {
  width: 14px; height: 14px;
  cursor: pointer;
  margin: 0;
}
.workflow-edit-remove {
  width: 28px; height: 28px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 4px;
  color: var(--danger);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  flex-shrink: 0;
}
.workflow-edit-remove:hover { background: #fee2e2; border-color: #fca5a5; }
.workflow-edit-add {
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.workflow-edit-add:hover { color: var(--text); border-color: var(--text); }

/* Hero-Pille „✓ Vorbereitet" / „✓ Dokumentiert" */
.workflow-status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: var(--status-done-bg);
  color: var(--status-done-fg);
  border-radius: var(--radius-md);
  font-size: 11px; font-weight: 500;
  margin-left: 8px;
}

/* v2.4.0: Import-Page */
.import-step { margin-bottom: 16px; }
.import-row {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.import-row-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted);
}
.import-row-label select {
  padding: 6px 10px; font-size: 13px;
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-family: inherit;
}
.import-row input[type="file"] {
  font-size: 13px; padding: 6px 0;
}
.import-mapping-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.import-mapping-table th, .import-mapping-table td {
  padding: 8px 12px; border-bottom: 0.5px solid var(--border); text-align: left;
}
.import-mapping-table th {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
}
.import-mapping-table td.muted { color: var(--muted); font-size: 12px; font-family: monospace; }
.import-mapping-table select {
  width: 100%; padding: 5px 8px; font-size: 12px;
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-family: inherit;
}
/* v2.6.5: Multi-Mapping pro Spalte */
.import-mapping-slots { display: flex; flex-direction: column; gap: 4px; }
.import-mapping-slot { display: flex; gap: 4px; align-items: center; }
.import-mapping-slot select { flex: 1; }
.import-mapping-x {
  background: transparent; border: 0;
  width: 22px; height: 22px;
  font-size: 14px; line-height: 1;
  color: var(--muted); cursor: pointer;
  border-radius: 50%;
}
.import-mapping-x:hover { background: var(--bg-soft); color: var(--danger, #ef4444); }
.import-mapping-add {
  background: transparent;
  border: 0.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 11px; color: var(--muted);
  cursor: pointer; font-family: inherit;
  align-self: flex-start;
}
.import-mapping-add:hover { color: var(--text); border-color: var(--text); }
#import-preview-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
#import-preview-table th, #import-preview-table td {
  padding: 6px 10px; border-bottom: 0.5px solid var(--border); text-align: left;
}
#import-preview-table th {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600; background: var(--bg-soft);
}

/* v2.5.0: Tags */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.tag-pill-removable { padding-right: 4px; }
.tag-pill-x {
  background: transparent; border: 0;
  color: inherit; opacity: 0.5;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tag-pill-x:hover { opacity: 1; background: rgba(0,0,0,0.1); }

.tag-zone .tag-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 8px;
}
.tag-zone .tag-adder {
  display: flex; gap: 4px;
}
.tag-zone .tag-adder select {
  flex: 1; padding: 4px 6px;
  font-size: 11px;
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-family: inherit;
}
.tag-create-btn {
  background: transparent;
  border: 0.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 11px; color: var(--muted);
  cursor: pointer; font-family: inherit;
}
.tag-create-btn:hover { color: var(--text); border-color: var(--text); }

.tag-farbe-swatch {
  width: 24px; height: 24px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform .08s, border-color .12s;
}
.tag-farbe-swatch:hover { transform: scale(1.1); }
.tag-farbe-swatch.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

/* v2.5.1: Tag-Filter in Listen */
.tag-filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 0.5px dashed var(--border);
}
.tag-filter-row:empty { display: none; }
.tag-filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
  margin-right: 4px;
}
.tag-filter-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-filter-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: opacity .12s, transform .08s;
}
.tag-filter-pill:hover { opacity: 0.85; }
.tag-filter-pill.is-active { font-weight: 600; }
.tag-filter-mode, .tag-filter-clear {
  background: transparent;
  border: 0.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 11px; color: var(--muted);
  cursor: pointer; font-family: inherit;
  margin-left: 4px;
}
.tag-filter-mode:hover, .tag-filter-clear:hover { color: var(--text); border-color: var(--text); }

/* v2.6.1: Dubletten */
.dublette-group {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.dublette-group-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
}
.dublette-group-name { font-size: 15px; font-weight: 600; color: var(--text); }
.dublette-group-meta { font-size: 12px; color: var(--muted); }
.dublette-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.dublette-table th, .dublette-table td {
  padding: 6px 10px; border-bottom: 0.5px solid var(--border); text-align: left;
}
.dublette-table th {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
}
.dublette-group-actions {
  margin-top: 10px; display: flex; justify-content: flex-end;
}

/* v2.9.10: Bulk-Edit-Toolbar — cleaner Layout mit Mini-Captions pro Gruppe,
   einheitliche 32 px Control-Höhe, klare vertikale Trennlinien. */
.col-bulk { width: 36px; padding-left: 12px !important; }
.col-bulk input[type="checkbox"] { cursor: pointer; }

.bulk-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--primary, #1e40af);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 14px;
  position: sticky; top: 0; z-index: 5;
}

.bulk-toolbar-label {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--text);
  padding-right: 14px; border-right: 0.5px solid var(--border);
  align-self: center;
}

.bulk-toolbar select,
.bulk-toolbar input[type="text"],
.bulk-toolbar input[type="number"] {
  height: 32px; padding: 0 10px; font-size: 12px;
  border: 0.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-family: inherit;
  min-width: 140px; box-sizing: border-box;
}
.bulk-toolbar .btn-sm { height: 32px; padding: 0 12px; line-height: 32px; }
.bulk-input-narrow { min-width: 90px !important; max-width: 100px; }

/* Mini-Sektion: Caption oben (via ::before), Controls in einer Row darunter.
   `flex-basis:100%` auf der Caption erzwingt Zeilenumbruch ohne Wrapper-Div. */
.bulk-group {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-right: 14px;
  border-right: 0.5px solid var(--border);
}
.bulk-group::before {
  content: attr(data-label);
  flex-basis: 100%;
  font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.bulk-group:last-of-type { border-right: 0; padding-right: 0; }

.bulk-clear-btn { margin-left: auto; align-self: center; }

.bulk-only-empty {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted); cursor: pointer;
}

/* ═════════════════════════════════════════════════════════
   v2.9.0 — ATTACHMENT-ZONE (Datei-Anhänge)
   ═════════════════════════════════════════════════════════ */
.attachment-zone { display: flex; flex-direction: column; gap: 8px; }
.attachment-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--surface);
}
.attachment-row {
  display: grid;
  grid-template-columns: 24px 1fr auto 28px;
  align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.attachment-row:last-child { border-bottom: 0; }
.attachment-row:hover { background: var(--surface-hover); }
.attachment-icon { font-size: 18px; line-height: 1; text-align: center; }
.attachment-name {
  color: var(--accent); cursor: pointer; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-name:hover { text-decoration: underline; }
.attachment-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.attachment-delete {
  background: transparent; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
  width: 24px; height: 24px; border-radius: 4px;
  padding: 0;
}
.attachment-delete:hover { background: var(--danger-bg); color: var(--danger); }
.attachment-upload {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
.attachment-hint { font-size: 11px; color: var(--muted); }
@media (max-width: 768px) {
  .attachment-row { grid-template-columns: 22px 1fr 24px; gap: 6px; }
  .attachment-meta { display: none; }
}

/* v2.9.5: Notizen-Liste — Snippet-Spalte + Bezug-Link */
.notes-snippet {
  font-size: 13px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  white-space: pre-wrap; word-break: break-word;
}
.row-link {
  color: var(--accent); cursor: pointer; font-weight: 500;
}
.row-link:hover { text-decoration: underline; }
.row-muted { color: var(--muted); font-size: 12px; font-style: italic; }
/* v2.9.6: Bezug-Cell als einzeilige Flex-Row mit Ellipsis */
.bezug-cell {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.bezug-cell .type-pill { flex-shrink: 0; }
.bezug-cell .row-link {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   v2.27.0 — Doku-Bereiche pro Entität (Doku-Tab)
   ═══════════════════════════════════════════════════════════ */
.doc-sections-wrap { display: flex; flex-direction: column; gap: 14px; }
.doc-sections-list { display: flex; flex-direction: column; gap: 14px; }
.doc-empty { padding: 8px 0; }

.doc-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  transition: border-color .12s, box-shadow .12s;
}
.doc-section:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.doc-section.is-new { border-style: dashed; }
.doc-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.doc-section-titel {
  flex: 1; min-width: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  transition: border-color .12s, background .12s;
}
.doc-section-titel:hover { background: var(--bg-soft); border-color: var(--border); }
.doc-section-titel:focus { outline: none; background: var(--bg); border-color: var(--primary); }
.doc-section-del {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px; line-height: 1;
  padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.doc-section-del:hover {
  background: var(--status-overdue-bg, #fee2e2);
  color: var(--status-overdue-accent, #991b1b);
  border-color: var(--status-overdue-accent, #991b1b);
}
.doc-section-inhalt {
  width: 100%;
  /* v2.31.2: Auto-Grow mit dem Inhalt (Chrome 123+/Safari 18+), Fallback
     resize:vertical für ältere Browser. min-height höher gezogen, damit
     ein leeres Feld nicht winzig wirkt; max-height begrenzt das Wachstum
     bei sehr langen Texten. */
  field-sizing: content;
  min-height: 120px;
  max-height: 720px;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid transparent;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  transition: border-color .12s, background .12s;
  box-sizing: border-box;
}
.doc-section-inhalt:hover { border-color: var(--border); }
.doc-section-inhalt:focus { outline: none; border-color: var(--primary); background: var(--surface); }

/* v2.31.2: Bereich-Selector pro Doku-Block (nur am Projekt sichtbar) —
   entscheidet, in welcher Sektion des Kundenberichts der Block landet. */
.doc-section-bereich {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.doc-section-bereich-label {
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-section-bereich-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.doc-bereich-chip {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.doc-bereich-chip:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.doc-bereich-chip.is-active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.doc-section-meta {
  font-size: 11px; color: var(--muted);
  margin-top: 8px;
}

.doc-template-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 10px;
  align-items: center;
}
.doc-template-hint {
  font-size: 11px; color: var(--muted);
  margin-right: 4px;
}
.doc-template-chip {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.doc-template-chip:hover { background: var(--surface); border-color: var(--border-strong); }

.doc-section-bottom {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 10px;
}

.doc-add-area { margin-top: 4px; }
.doc-add-btn {
  width: 100%;
  padding: 10px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.doc-add-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--text);
}


/* ═══════════════════════════════════════════════════════════
   v2.27.1 — Doku-Vorlagen (Templates · Editor + Picker)
   ═══════════════════════════════════════════════════════════ */

/* Editor im Template-Modal — eigene Section-Liste */
.tpl-doc-section-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.tpl-doc-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.tpl-doc-section-num {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted); padding: 4px 6px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.tpl-doc-titel {
  flex: 1; min-width: 0;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.tpl-doc-titel:focus { outline: none; border-color: var(--primary); }
.tpl-doc-inhalt {
  width: 100%; min-height: 70px;
  font: inherit; font-size: 13px; line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  resize: vertical;
  box-sizing: border-box;
}
.tpl-doc-inhalt:focus { outline: none; border-color: var(--primary); }

/* Vorlage-anwenden-Picker im Doku-Tab */
.doc-sections-header {
  display: flex; justify-content: flex-end;
  margin-bottom: 12px;
}
.doc-template-picker-anchor { position: relative; }
.doc-tpl-picker {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  z-index: 20;
  overflow: hidden;
  animation: doc-tpl-picker-in .12s ease-out;
}
@keyframes doc-tpl-picker-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.doc-tpl-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.doc-tpl-picker-title {
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: var(--muted); text-transform: uppercase;
}
.doc-tpl-picker-close {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px; line-height: 1;
  color: var(--muted);
}
.doc-tpl-picker-close:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.doc-tpl-picker-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.doc-tpl-picker-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text);
  transition: background .12s, border-color .12s;
}
.doc-tpl-picker-item:hover {
  background: var(--bg-soft);
  border-color: var(--border);
}
.doc-tpl-picker-name {
  font-size: 13px; font-weight: 500;
}
.doc-tpl-picker-meta {
  font-size: 11px; color: var(--muted);
}
.doc-tpl-picker-empty {
  padding: 12px;
}

/* v2.27.5 — Multi-Select-Chips für Doku-Vorlagen-Ziele */
.tpl-doc-target-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.tpl-doc-target-chip {
  font: inherit; font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tpl-doc-target-chip:hover {
  background: var(--bg-soft);
  border-color: var(--border-strong);
}
.tpl-doc-target-chip.is-active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.tpl-doc-target-chip.is-active:hover {
  background: var(--text);
  color: var(--surface);
}

/* ═══════════════════════════════════════════════════════════
   v2.28.7 — „Heute besonders heiß"-Block im Briefing-Sidebar
   ═══════════════════════════════════════════════════════════ */
.bv2-hot-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bv2-hot-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background .12s, border-color .12s, transform .12s;
}
.bv2-hot-row:hover {
  background: var(--bg);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.bv2-hot-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 1px;
}
.bv2-hot-badge-danger { background: var(--status-overdue-bg); color: var(--status-overdue-accent); }
.bv2-hot-badge-warn   { background: #fef3c7; color: #92400e; }
.bv2-hot-badge-muted  { background: var(--bg); color: var(--muted); }
.bv2-hot-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bv2-hot-title {
  font-size: 12px; font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv2-hot-kontext {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv2-hot-sub {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════
   v2.32.0 — Inline-Composer auf dem Arbeitsplatz
   Ersetzt das Drawer-Modal für die sieben Anlage-Aktionen durch eine
   interaktive Eingabefläche direkt in der Welcome-Card: Titel-Feld bleibt
   sichtbar, „+"-Chip-Reihe blendet Picker unterhalb ein, gewählte Werte
   sammeln sich als Zeilen darunter. Speichern ruft die existierenden
   saveXxx()-Funktionen auf, damit Domain-Logik (Termin↔Einsatz, Auto-
   Status, Entitlements) unverändert greift.
   ═══════════════════════════════════════════════════════════════════════ */

/* Welcome-Card im Composer-Modus — Greeting bleibt, alles andere weg */
.stage-welcome-card.composer-active .ab-welcome-kpis,
.stage-welcome-card.composer-active #ab-welcome-quick-section,
.stage-welcome-card.composer-active .ab-welcome-section,
.stage-welcome-card.composer-active .ab-welcome-actions,
.stage-welcome-card.composer-active .arbeitsplatz-live-preview,
.stage-welcome-card.composer-active > .arbeitsplatz-capture,
.stage-welcome-card.composer-active .ab-welcome-main-row .arbeitsplatz-capture,
.stage-welcome-card.composer-active .ab-welcome-main-row { display: none !important; }

/* Drawer wird unsichtbar, wenn der Composer ihn nur als Daten-Hülle nutzt */
.drawer-overlay.composer-suppressed { display: none !important; }

/* Composer-Shell */
.composer {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--entity-color, var(--text));
}
.composer[data-entity="firma"]   { --entity-color: var(--type-firma-fg, #04342C); }
.composer[data-entity="kontakt"] { --entity-color: var(--type-kontakt-fg, #26215C); }
.composer[data-entity="projekt"] { --entity-color: var(--type-projekt-fg, #042C53); }
.composer[data-entity="einsatz"] { --entity-color: var(--type-einsatz-fg, #412402); }
.composer[data-entity="termin"]  { --entity-color: var(--type-termin-fg, #042C53); }
.composer[data-entity="aufgabe"] { --entity-color: var(--type-aufgabe-fg, #4B1528); }
.composer[data-entity="notiz"]   { --entity-color: var(--theme-grey-fg, #3A3A37); }

.composer-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--entity-color, var(--muted));
}

.composer-title-row {
  display: flex; align-items: flex-start; gap: 14px;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 12px;
}
.composer-title-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  resize: none;
  padding: 4px 0;
  min-height: 28px;
}
.composer-title-input:focus { outline: none; }
.composer-title-input::placeholder { color: var(--tertiary); font-weight: 400; }

.composer-actions { display: inline-flex; gap: 8px; align-items: center; }
.composer-btn {
  font-family: inherit; font-size: 13px;
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.composer-btn:hover { border-color: var(--text); }
.composer-btn--primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.composer-btn--primary:hover { background: #000; }
.composer-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Chip-Reihe — die anklickbaren „+"-Buttons */
.composer-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.composer-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 12px;
  border: 0.5px dashed var(--border-strong);
  background: transparent;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.composer-chip:hover { border-color: var(--text); color: var(--text); }
.composer-chip.is-set {
  border-style: solid;
  border-color: var(--entity-color, var(--text));
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 500;
}
.composer-chip.is-open {
  border-style: solid;
  border-color: var(--text);
  background: var(--bg-soft);
  color: var(--text);
}

/* Inline-Picker — erscheint unter dem Textfeld, sobald ein Chip geklickt wurde */
.composer-pickers { display: flex; flex-direction: column; gap: 12px; }
.composer-picker {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}
.composer-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}
.composer-picker-close {
  border: none; background: transparent;
  cursor: pointer; color: var(--muted);
  font-size: 16px; line-height: 1;
  padding: 0 4px;
}
.composer-picker-close:hover { color: var(--text); }
.composer-picker input[type="text"],
.composer-picker input[type="date"],
.composer-picker input[type="time"],
.composer-picker input[type="number"],
.composer-picker input[type="tel"],
.composer-picker input[type="email"],
.composer-picker select,
.composer-picker textarea {
  width: 100%;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit; font-size: 13px;
  color: var(--text);
}
.composer-picker textarea { resize: vertical; min-height: 60px; }
.composer-picker-row { display: flex; gap: 10px; }
.composer-picker-row > * { flex: 1; }
.composer-picker-hint { font-size: 11px; color: var(--muted); }
.composer-picker-options {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.composer-picker-option {
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.composer-picker-option:hover { border-color: var(--text); }
.composer-picker-option.is-selected {
  background: var(--entity-color, var(--text));
  color: #fff;
  border-color: var(--entity-color, var(--text));
}

/* 2-Monats-Kalender */
.composer-cal {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 700px) {
  .composer-cal { grid-template-columns: 1fr; }
}
.composer-cal-month {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.composer-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text);
}
.composer-cal-nav {
  border: none; background: transparent;
  cursor: pointer; color: var(--muted);
  font-size: 16px; line-height: 1;
  padding: 0 6px;
}
.composer-cal-nav:hover { color: var(--text); }
.composer-cal-weekdays,
.composer-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.composer-cal-weekday {
  text-align: center;
  font-size: 10px; font-weight: 600;
  letter-spacing: .4px;
  color: var(--muted);
  text-transform: uppercase;
  padding: 4px 0;
}
.composer-cal-day {
  border: none; background: transparent;
  font-family: inherit; font-size: 12px;
  color: var(--text);
  padding: 6px 0;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.composer-cal-day:hover:not(.is-disabled) {
  background: var(--bg-soft);
}
.composer-cal-day.is-other-month { color: var(--tertiary); }
.composer-cal-day.is-today {
  font-weight: 700;
  outline: 1px solid var(--border-strong);
  outline-offset: -1px;
}
.composer-cal-day.is-selected,
.composer-cal-day.is-range-start,
.composer-cal-day.is-range-end {
  background: var(--entity-color, var(--text));
  color: #fff;
  font-weight: 600;
}
.composer-cal-day.is-in-range {
  background: var(--bg-soft);
  color: var(--text);
}
.composer-cal-day.is-disabled { opacity: .35; cursor: not-allowed; }

.composer-cal-modes { display: flex; gap: 4px; margin-bottom: 8px; }
.composer-cal-mode {
  font-family: inherit; font-size: 12px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.composer-cal-mode.is-active {
  background: var(--text); color: #fff;
  border-color: var(--text);
}
.composer-cal-summary {
  margin-top: 8px;
  font-size: 12px; color: var(--text);
  font-weight: 500;
}

/* Gewählte Werte als Zeilen unter dem Composer */
.composer-values {
  display: flex; flex-direction: column;
  gap: 2px;
}
.composer-value {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.composer-value:hover { background: var(--bg-soft); }
.composer-value-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}
.composer-value-text { color: var(--text); }
.composer-value-actions { display: inline-flex; gap: 2px; }
.composer-value-btn {
  border: none; background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
}
.composer-value-btn:hover { color: var(--text); background: var(--border); }

.composer-error {
  font-size: 12px;
  color: var(--danger);
  padding: 6px 10px;
  background: var(--status-overdue-bg);
  border-radius: var(--radius-sm);
}

/* Composer auf schmalen Viewports — Werte stapeln */
@media (max-width: 700px) {
  .composer { padding: 14px 14px 12px; }
  .composer-value { grid-template-columns: 1fr; gap: 4px; }
  .composer-value-label { font-size: 9px; }
  .composer-title-input { font-size: 16px; }
  .composer-picker-row { flex-direction: column; }
}

/* v2.32.8 — Desktop-Zurück-Button in der Rail (über „Neu anlegen") */
.ab-rail-desktop {
  margin-bottom: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--muted);
}
.ab-rail-desktop:hover {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text);
}
.ab-rail-desktop .ab-rail-icon { color: var(--muted); }
.ab-rail-desktop:hover .ab-rail-icon { color: var(--text); }