/* ============================================================
   envisia UI — zentrales Designsystem (Variante F „Lime & Ink")
   ------------------------------------------------------------
   ALLE Farben liegen als CSS-Variablen (Tokens) in den beiden
   Blöcken unten: :root = HELLES Design (Default),
   [data-theme="dark"] = DUNKLES Design.
   Farbänderungen bitte NUR dort vornehmen — Komponenten greifen
   ausschließlich auf var(--ev-…) zu.
   Das Theme wird über data-theme="light|dark" auf <html> gesetzt
   (Cookie "evtheme", Default hell; siehe Standard.master).
   Präfix aller Klassen: ev-
   ============================================================ */

:root {
  /* Flächen & Text */
  --ev-bg: #F4F6F1;            /* Seitenhintergrund */
  --ev-card: #FFFFFF;          /* Karten / Panels */
  --ev-border: #E3E8DD;        /* Rahmen */
  --ev-border-soft: #EEF1EA;   /* feine Trennlinien */
  --ev-text: #1A1D16;          /* Standardtext */
  --ev-muted: #6B7263;         /* gedämpfter Text / Labels */
  --ev-soft: #4A5245;          /* Sekundärtext (zwischen Text und gedämpft) */
  --ev-accent-text: #64810A;   /* Lime als TEXT-Farbe (lesbare Stufe je Theme) */
  /* Marke */
  --ev-ink: #171B10;           /* envisia-Tinte (Kopfleiste, Primärbuttons hell) */
  --ev-lime: #A9D600;          /* envisia-Lime (Akzent, aktive Zustände) */
  --ev-lime-strong: #C9E44D;   /* helleres Lime (Buttontext auf Tinte) */
  /* Bedienelemente */
  --ev-btn-primary-bg: #171B10;
  --ev-btn-primary-fg: #C9E44D;
  --ev-btn2-border: #D6DCCE;
  --ev-seg-bg: #ECEFE7;
  --ev-seg-active: #FFFFFF;
  --ev-input-bg: #FFFFFF;
  --ev-shadow: 0 1px 2px rgba(23, 27, 16, .05);
  /* Semantik */
  --ev-crit: #B3402F;          --ev-crit-bg: #FBEAE6;
  --ev-good: #2E7D4F;          --ev-good-bg: #E7F3EA;
  --ev-warn: #A8730F;          --ev-warn-bg: #FBF3E1;
  --ev-info: #2F6FB3;          --ev-info-bg: #E7F0FB;
  --ev-neutral: #6B7263;       --ev-neutral-bg: #EEF1EA;
  /* Bereichsfarben (fix in beiden Themes):
     1 Lizenzen · 2 Dienstleistung · 3 Module · 4 Verbräuche · 5 Hardware · 6 Sonstiges */
  --ev-cat1: #E9C46A; --ev-cat1-text: #8A6A1B; --ev-cat1-bg: rgba(233, 196, 106, .18);
  --ev-cat2: #3E9BFF; --ev-cat2-text: #2264AC; --ev-cat2-bg: rgba(62, 155, 255, .14);
  --ev-cat3: #6FC894; --ev-cat3-text: #2E7D4F; --ev-cat3-bg: rgba(111, 200, 148, .18);
  --ev-cat4: #B48EF0; --ev-cat4-text: #6E4BAE; --ev-cat4-bg: rgba(180, 142, 240, .16);
  --ev-cat5: #ED8B4E; --ev-cat5-text: #A85721; --ev-cat5-bg: rgba(237, 139, 78, .16);
  --ev-cat6: #9AA3AB; --ev-cat6-text: #5D666E; --ev-cat6-bg: rgba(154, 163, 171, .18);
}

[data-theme="dark"] {
  --ev-bg: #121517;
  --ev-card: #1A1E21;
  --ev-border: #2A3034;
  --ev-border-soft: #22272B;
  --ev-text: #E8EBE6;
  --ev-muted: #78827B;
  --ev-soft: #AEB6AC;
  --ev-accent-text: #C9E44D;
  --ev-btn-primary-bg: #C9E44D;
  --ev-btn-primary-fg: #171B10;
  --ev-btn2-border: #343B40;
  --ev-seg-bg: #15181B;
  --ev-seg-active: #262B2F;
  --ev-input-bg: #121517;
  --ev-shadow: none;
  --ev-crit: #E8907F;          --ev-crit-bg: rgba(232, 121, 106, .16);
  --ev-good: #8FD6A9;          --ev-good-bg: rgba(111, 200, 148, .18);
  --ev-warn: #E0B354;          --ev-warn-bg: rgba(224, 179, 84, .18);
  --ev-info: #7FB5F0;          --ev-info-bg: rgba(106, 169, 240, .16);
  --ev-neutral: #9AA48F;       --ev-neutral-bg: #22272B;
  --ev-cat1-text: #E9C46A; --ev-cat2-text: #6AB2FF; --ev-cat3-text: #8AD8AC;
  --ev-cat4-text: #C6A6F4; --ev-cat5-text: #F4A272; --ev-cat6-text: #A9B2BA;
}

/* Basis (ehemals StandardSite.css) */
body {
  margin: 0;
  background-image: none;
  background-color: var(--ev-bg);
  color: var(--ev-text);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13.5px;
}
a { color: var(--ev-info); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2 { margin: 0; padding: 0; font-weight: normal; }

/* box-sizing nur im ev-Namensraum — Alt-Layouts bleiben unberührt */
[class^="ev-"], [class*=" ev-"],
[class^="ev-"] *, [class*=" ev-"] * { box-sizing: border-box; }

/* ---------- Typo-Utilities ---------- */
.ev-h1 { margin: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--ev-text); }
.ev-h2 { margin: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-size: 17px; font-weight: 700; color: var(--ev-text); }
.ev-mono { font-family: "JetBrains Mono", Consolas, monospace; }
.ev-num { font-variant-numeric: tabular-nums; }
.ev-micro { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); }
.ev-muted { color: var(--ev-muted); }
.ev-right { text-align: right; }

/* ---------- Kopfleiste (konstant dunkel in beiden Themes) ---------- */
.ev-header {
  background: #171B10; height: 56px; padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 50;
}
.ev-header-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.ev-header-logo { height: 28px; width: 28px; border: 0; display: block; }
.ev-wordmark { display: flex; align-items: baseline; gap: 6px; font-family: "Archivo", "Segoe UI", sans-serif; white-space: nowrap; }
.ev-wordmark .ev-wm-name { color: #FFFFFF; font-weight: 800; font-size: 17px; }
.ev-wordmark .ev-wm-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ev-lime); display: inline-block; }
.ev-wordmark .ev-wm-sub { color: #9AA48F; font-weight: 500; font-size: 13px; }
.ev-nav { display: flex; align-items: stretch; gap: 2px; height: 100%; flex: 1; min-width: 0; }
.ev-nav-item {
  display: flex; align-items: center; padding: 0 12px; cursor: pointer;
  color: #C7CDBE; font-size: 14px; font-weight: 500; text-decoration: none;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  user-select: none; white-space: nowrap;
}
.ev-nav-item:hover { color: #FFFFFF; text-decoration: none; }
.ev-nav-item.active { color: #DDE8B8; border-bottom-color: var(--ev-lime); font-weight: 600; }
.ev-nav-group { position: relative; display: flex; height: 100%; }
.ev-nav-top { gap: 5px; }
.ev-nav-top svg { opacity: .65; }
.ev-nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: #171B10; border: 1px solid #2E3524; border-top: 0;
  border-radius: 0 0 10px 10px; padding: 6px;
  display: none; flex-direction: column; gap: 2px; z-index: 60;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
}
.ev-nav-group.open .ev-nav-menu { display: flex; }
.ev-nav-group.open > .ev-nav-top { color: #FFFFFF; }
.ev-nav-menu .ev-nav-item { border-radius: 6px; padding: 9px 12px; height: auto; border-bottom-color: transparent; border-top-color: transparent; }
.ev-nav-menu .ev-nav-item:hover { background: #262B1E; }
.ev-nav-menu .ev-nav-item.active { color: var(--ev-lime-strong); border-bottom-color: transparent; }
.ev-nav-group.active > .ev-nav-top { color: #DDE8B8; border-bottom-color: var(--ev-lime); font-weight: 600; }
.ev-header-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.ev-theme-toggle { display: flex; align-items: center; background: #262B1E; border-radius: 999px; padding: 3px; gap: 2px; }
.ev-theme-btn {
  width: 28px; height: 24px; border-radius: 999px; border: 0; background: transparent;
  color: #9AA48F; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.ev-theme-btn.active { background: #171B10; color: var(--ev-lime-strong); }
.ev-userchip {
  width: 32px; height: 32px; border-radius: 999px; background: #262B1E; color: #DDE8B8;
  display: flex; align-items: center; justify-content: center;
  font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 12px;
}
.ev-iconbtn-dark {
  width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: #9AA48F;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ev-iconbtn-dark:hover { color: #FFFFFF; background: #262B1E; }
@media (max-width: 1320px) { .ev-wordmark .ev-wm-sub { display: none; } }
@media (max-width: 960px) { .ev-nav-item { padding: 0 7px; font-size: 12px; } }

/* ---------- Seiten-Layout ---------- */
.ev-page { max-width: 1600px; margin: 0 auto; padding: 24px 32px 48px; color: var(--ev-text); font-family: "Segoe UI", system-ui, sans-serif; font-size: 13.5px; line-height: 1.45; }
.ev-page.full { max-width: none; }
.ev-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ev-stack { display: flex; flex-direction: column; gap: 18px; }
.ev-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-spacer { flex: 1; }
.ev-duo { display: grid; grid-template-columns: 54fr 46fr; gap: 18px; align-items: start; }
.ev-duo > :only-child { grid-column: 1 / -1; }
.ev-postype { color: var(--ev-info); font-weight: 600; font-size: 12px; }
/* Icon-Links (z. B. FontAwesome-Aktionen in Tabellenzeilen) */
.ev-iconlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; font-size: 14px;
  color: var(--ev-muted); text-decoration: none; cursor: pointer;
}
.ev-iconlink:hover { background: var(--ev-border-soft); color: var(--ev-text); text-decoration: none; }
.ev-iconlink.good { color: var(--ev-good); }
.ev-iconlink.good:hover { color: var(--ev-good); }
.ev-iconlink.crit:hover { color: var(--ev-crit); background: var(--ev-crit-bg); }

/* ---------- Karten ---------- */
.ev-card {
  background: var(--ev-card); border: 1px solid var(--ev-border);
  border-radius: 12px; box-shadow: var(--ev-shadow); padding: 18px 20px;
  overflow-x: auto;
}
.ev-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* ---------- Buttons ---------- */
.ev-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--ev-btn2-border); background: var(--ev-card);
  color: var(--ev-text); font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; font-size: 13px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ev-btn:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); }
.ev-btn.primary { background: var(--ev-btn-primary-bg); color: var(--ev-btn-primary-fg); border-color: transparent; }
.ev-btn.primary:hover { opacity: .92; color: var(--ev-btn-primary-fg); }
.ev-btn.crit { color: var(--ev-crit); border-color: var(--ev-crit-bg); }
.ev-btn.crit:hover { color: var(--ev-crit); }
.ev-btn.small { height: 30px; padding: 0 12px; font-size: 12px; }
.ev-btn.iconbtn { width: 36px; padding: 0; justify-content: center; }
.ev-btn.small.iconbtn { width: 30px; }
.ev-btn .ev-badge {
  min-width: 17px; height: 17px; border-radius: 999px; background: var(--ev-crit); color: #FFFFFF;
  font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- Segmented Control ---------- */
.ev-seg {
  display: inline-flex; background: var(--ev-seg-bg); border: 1px solid var(--ev-border);
  border-radius: 10px; padding: 3px; gap: 2px;
}
.ev-seg-item {
  border: 0; background: transparent; color: var(--ev-muted); cursor: pointer;
  height: 32px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center;
  font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none;
}
.ev-seg-item:hover { color: var(--ev-text); text-decoration: none; }
.ev-seg-item.active { background: var(--ev-seg-active); color: var(--ev-text); box-shadow: var(--ev-shadow); }

/* ---------- Chips ---------- */
.ev-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px;
  border-radius: 999px; border: 1px solid var(--ev-btn2-border); background: var(--ev-card);
  color: var(--ev-text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.ev-chip:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); }
.ev-chip .ev-chip-count { color: var(--ev-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ev-chip.active { background: var(--ev-ink); border-color: var(--ev-ink); color: var(--ev-lime-strong); }
.ev-chip.active .ev-chip-count { color: #9AA48F; }

/* ---------- KPI-Kacheln ---------- */
.ev-kpis { display: grid; gap: 12px; }
.ev-kpis.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ev-kpis.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ev-kpis.cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ev-kpi {
  background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px;
  box-shadow: var(--ev-shadow); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ev-text);
}
.ev-kpi-value { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 24px; color: var(--ev-text); font-variant-numeric: tabular-nums; }
.ev-kpi-sub { font-size: 12px; color: var(--ev-muted); }
.ev-kpi.crit .ev-kpi-value { color: var(--ev-crit); }
.ev-kpi.good .ev-kpi-value { color: var(--ev-good); }
.ev-kpi.total { background: #171B10; border-color: #171B10; }
.ev-kpi.total .ev-micro { color: #9AA48F; }
.ev-kpi.total .ev-kpi-value { color: var(--ev-lime-strong); }
.ev-kpi.total .ev-kpi-sub { color: #C7CDBE; }
.ev-kpi.cat { border-top: 4px solid var(--cat, var(--ev-border)); }

/* ---------- Pillen & Punkte ---------- */
.ev-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ev-pill.crit { background: var(--ev-crit-bg); color: var(--ev-crit); }
.ev-pill.good { background: var(--ev-good-bg); color: var(--ev-good); }
.ev-pill.warn { background: var(--ev-warn-bg); color: var(--ev-warn); }
.ev-pill.info { background: var(--ev-info-bg); color: var(--ev-info); }
.ev-pill.neutral { background: var(--ev-neutral-bg); color: var(--ev-neutral); }
.ev-pill.cat1 { background: var(--ev-cat1-bg); color: var(--ev-cat1-text); }
.ev-pill.cat2 { background: var(--ev-cat2-bg); color: var(--ev-cat2-text); }
.ev-pill.cat3 { background: var(--ev-cat3-bg); color: var(--ev-cat3-text); }
.ev-pill.cat4 { background: var(--ev-cat4-bg); color: var(--ev-cat4-text); }
.ev-pill.cat5 { background: var(--ev-cat5-bg); color: var(--ev-cat5-text); }
.ev-pill.cat6 { background: var(--ev-cat6-bg); color: var(--ev-cat6-text); }
.ev-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; }

/* ---------- Tabellen ---------- */
.ev-table { width: 100%; border-collapse: collapse; }
.ev-table th {
  text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--ev-border);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted);
  white-space: nowrap;
}
.ev-table td {
  padding: 0 12px; height: 42px; border-bottom: 1px solid var(--ev-border-soft);
  font-size: 13px; color: var(--ev-text); font-variant-numeric: tabular-nums;
}
.ev-table th.ev-right, .ev-table td.ev-right { text-align: right; }
.ev-table tr.ev-clickable { cursor: pointer; }
.ev-table tr.ev-clickable:hover td { background: var(--ev-border-soft); }
.ev-table tr:last-child td { border-bottom: 0; }
.ev-table tfoot td, .ev-table tr.ev-sumrow td {
  border-top: 2px solid var(--ev-ink); border-bottom: 0;
  font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; height: 46px;
}
[data-theme="dark"] .ev-table tfoot td, [data-theme="dark"] .ev-table tr.ev-sumrow td { border-top-color: var(--ev-lime-strong); }
.ev-table th a { color: inherit; text-decoration: none; }
.ev-table th a:hover { color: var(--ev-text); }
.ev-table td a { color: var(--ev-info); text-decoration: none; font-weight: 600; }
.ev-table td a:hover { text-decoration: underline; }
.ev-table.rows-hover tr:hover td { background: var(--ev-border-soft); }
.ev-table span.ev-cell-good, .ev-table span.ev-cell-warn, .ev-table span.ev-cell-crit { padding: 3px 8px; white-space: nowrap; }
.ev-table td .ev-pill { vertical-align: middle; }
.ev-table.compact th { font-size: 10.5px; padding: 0 10px 6px; }
.ev-table.compact td { height: 32px; font-size: 12.5px; padding: 0 10px; }
.ev-table.vtop td { vertical-align: top; height: auto; padding-top: 9px; padding-bottom: 9px; }
.ev-table .ev-input, .ev-table .ev-select { height: 30px; font-size: 12.5px; }
.ev-table tr.ev-rownew td { background: var(--ev-good-bg); }
.ev-note { color: var(--ev-muted); font-size: 12px; margin: 4px 0 12px; line-height: 1.5; }
.ev-good-text { color: var(--ev-good) !important; }
.ev-crit-text { color: var(--ev-crit) !important; }
.ev-warn-text { color: var(--ev-warn) !important; }
.ev-table a.active { color: var(--ev-accent-text); font-weight: 700; }
/* Zeile mit aktivem Filter-Link: farbig hinterlegt wie Auswahl-Zustände */
.ev-table tr:has(a.active) td { background: var(--ev-good-bg); }
.ev-table tr:has(a.active) td:first-child { box-shadow: inset 3px 0 0 var(--ev-lime); }
.ev-table.mini th { font-size: 10px; padding: 0 7px 4px; letter-spacing: .04em; }
.ev-table.mini td { height: 26px; font-size: 11.5px; padding: 0 7px; }
.ev-table.mini span.ev-cell-good, .ev-table.mini span.ev-cell-warn, .ev-table.mini span.ev-cell-crit { padding: 2px 5px; }
.ev-cell-good { background: var(--ev-good-bg); color: var(--ev-good); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-good) 40%, transparent); border-radius: 6px; }
.ev-cell-warn { background: var(--ev-warn-bg); color: var(--ev-warn); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-warn) 40%, transparent); border-radius: 6px; }
.ev-cell-crit { background: var(--ev-crit-bg); color: var(--ev-crit); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-crit) 40%, transparent); border-radius: 6px; }
.ev-table tr.ev-lic-out td { opacity: .45; }

/* ---------- Formulare ---------- */
.ev-field { display: flex; flex-direction: column; gap: 5px; }
.ev-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); }
.ev-label .req { color: var(--ev-crit); }
.ev-input, .ev-select, .ev-textarea {
  height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ev-btn2-border);
  background: var(--ev-input-bg); color: var(--ev-text); font-family: inherit; font-size: 13px; width: 100%;
}
.ev-textarea { height: auto; padding: 10px 12px; resize: vertical; }
.ev-input:focus, .ev-select:focus, .ev-textarea:focus { outline: 2px solid var(--ev-lime); outline-offset: 1px; border-color: transparent; }
.ev-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ev-form-grid .span2 { grid-column: span 2; }
.ev-search { position: relative; }
.ev-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ev-muted); pointer-events: none; }
.ev-search .ev-input { padding-left: 34px; }
.ev-hr { border: 0; border-top: 1px solid var(--ev-border); margin: 4px 0; }
.ev-toggle {
  width: 34px; height: 20px; border-radius: 999px; background: var(--ev-btn2-border); position: relative;
  cursor: pointer; border: 0; padding: 0; flex: none;
}
.ev-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;
  background: var(--ev-card); transition: left .12s ease;
}
.ev-toggle.on { background: var(--ev-good); }
.ev-toggle.on::after { left: 16px; }

/* ---------- Key-Value-Raster ---------- */
.ev-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ev-kv > div { display: flex; flex-direction: column; gap: 2px; }
.ev-kv .v { font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Master/Detail & Sidebar ---------- */
.ev-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.ev-list { display: flex; flex-direction: column; }
.ev-list-item {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid var(--ev-border-soft); border-left: 3px solid transparent;
  color: var(--ev-text); text-decoration: none;
}
.ev-list-item:last-child { border-bottom: 0; }
.ev-list-item:hover { background: var(--ev-border-soft); text-decoration: none; color: var(--ev-text); }
.ev-list-item.active { background: var(--ev-good-bg); border-left-color: var(--ev-lime); }
[data-theme="dark"] .ev-list-item.active { background: rgba(201, 228, 77, .10); }
.ev-list-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 13px; }
.ev-list-sub { font-size: 12px; color: var(--ev-muted); }
.ev-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.ev-sidenav-item {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 8px;
  border-left: 3px solid transparent; cursor: pointer; color: var(--ev-text); text-decoration: none;
}
.ev-sidenav-item:hover { background: var(--ev-border-soft); text-decoration: none; color: var(--ev-text); }
.ev-sidenav-item.active { background: var(--ev-good-bg); border-left-color: var(--ev-lime); }
[data-theme="dark"] .ev-sidenav-item.active { background: rgba(201, 228, 77, .10); }
.ev-sidenav-item .t { font-weight: 600; font-size: 13.5px; }
.ev-sidenav-item .s { font-size: 12px; color: var(--ev-muted); }

/* ---------- Hinweise / Banner ---------- */
.ev-banner {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  font-size: 13px; border: 1px solid transparent;
}
.ev-banner.warn { background: var(--ev-warn-bg); color: var(--ev-warn); }
.ev-banner.info { background: var(--ev-info-bg); color: var(--ev-text); }
.ev-banner.good { background: var(--ev-good-bg); color: var(--ev-good); }
.ev-banner.crit { background: var(--ev-crit-bg); color: var(--ev-crit); }

/* ---------- Overlay / Dialog ---------- */
.ev-overlay {
  position: fixed; inset: 0; background: rgba(23, 27, 16, .45);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 100; padding: 48px 16px; overflow-y: auto;
  /* visibility statt display:none — AjaxToolkit-Controls (ComboBox/Calendar) im Dialog
     müssen beim Initialisieren messbar sein, sonst bleibt z. B. die Vorschlagsliste leer */
  visibility: hidden; pointer-events: none;
}
.ev-overlay.open { visibility: visible; pointer-events: auto; }
/* Geschlossen: auch Toolkit-Popups (ComboBox-Listen, Kalender) zwangsweise verstecken,
   die eigene inline-visibility setzen und sonst durchscheinen würden */
.ev-overlay:not(.open) * { visibility: hidden !important; }
[data-theme="dark"] .ev-overlay { background: rgba(0, 0, 0, .55); }
.ev-dialog {
  background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .25); width: 100%; max-width: 700px; padding: 20px 22px;
}
/* Formular-Hülle im Inline-Modus (z. B. Neues Ticket): gleicher Inhalt, aber als Karte statt Dialog */
.ev-inline-form { display: block; }
.ev-inline-form .ev-dialog { box-shadow: var(--ev-shadow); max-width: 700px; }
.ev-inline-form [data-close-modal] { display: none; }

/* ---------- Chart-Hilfen (CSS-Säulen) ---------- */
.ev-chart { display: flex; align-items: flex-end; gap: 0; border-bottom: 1px solid var(--ev-border); }
.ev-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ev-chart-sum { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 600; font-size: 12px; color: var(--ev-text); font-variant-numeric: tabular-nums; }
.ev-chart-stack { width: 44px; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.ev-chart-x { font-size: 12px; color: var(--ev-muted); padding-top: 6px; }
.ev-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ev-muted); }
.ev-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Timeline (Verlauf) ---------- */
.ev-timeline { display: flex; flex-direction: column; }
.ev-tl-item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ev-border-soft); font-size: 13px; }
.ev-tl-item:last-child { border-bottom: 0; }
.ev-tl-date { color: var(--ev-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-tl-user {
  font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 11px; color: var(--ev-muted);
  background: var(--ev-neutral-bg); border-radius: 6px; padding: 2px 6px; height: fit-content; white-space: nowrap;
}

/* ---------- Alt-Bausteine im ev-Design ----------
   AjaxToolkit-ComboBox/Autocomplete/ValidatorCallout und der jQueryAlert-Dialog
   nutzen noch ihre historischen Klassen/IDs — hier token-basiert neu definiert
   (ersetzt Elements.css, StandardElements.css und jQuery_Alert.css). */
.sitecontent { margin: 5px 20px; }

.standardinputelements {
  background: var(--ev-input-bg); color: var(--ev-text);
  border: 1px solid var(--ev-btn2-border); border-radius: 8px;
  display: inline-block; padding: 6px 10px; vertical-align: middle;
  font-family: inherit; font-size: 13px; text-align: left;
}
.standardinputelements:focus { outline: 2px solid var(--ev-lime); outline-offset: 1px; border-color: transparent; }

.standardinputelementscombo table { position: absolute; top: -4px; }
.standardinputelementscombo .ajax__combobox_inputcontainer { position: static; }
.standardinputelementscombo .ajax__combobox_textboxcontainer input {
  background: var(--ev-input-bg); color: var(--ev-text);
  border: 1px solid var(--ev-btn2-border); border-right: 0;
  border-radius: 8px 0 0 8px; display: inline-block; padding: 7px 10px;
  vertical-align: middle; font-family: inherit; font-size: 13px;
}
.standardinputelementscombo .ajax__combobox_buttoncontainer button {
  background: var(--ev-seg-bg); border: 1px solid var(--ev-btn2-border);
  color: var(--ev-muted); cursor: pointer; display: inline-block;
  font-family: inherit; font-size: 13px; padding: 6px 8px; text-align: center;
  border-radius: 0 8px 8px 0;
  position: relative; min-width: 28px;
}
/* Chevron nach unten als reines CSS (theme-fähig) — das Sprite-Icon des Toolkits ist ersetzt */
.standardinputelementscombo .ajax__combobox_buttoncontainer button::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -6px 0 0 -4px;
  border-right: 2px solid var(--ev-muted);
  border-bottom: 2px solid var(--ev-muted);
  transform: rotate(45deg);
}
.standardinputelementscombo .ajax__combobox_buttoncontainer button:hover::after {
  border-color: var(--ev-text);
}
.ajax__combobox_itemlist {
  background: var(--ev-card); color: var(--ev-text);
  border: 1px solid var(--ev-border) !important; border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
  z-index: 300 !important;
}
.ajax__combobox_itemlist li { padding: 4px 10px; }
.ajax__combobox_itemlist li.ajax__combobox_highlighteditem { background: var(--ev-good-bg); }

.standardinputelementsrepeater { padding: 5px 0; margin: 0; }
.standardinputelementsrepeater td { padding-right: 14px; }

.autocomplete_completionListElement {
  margin: 0; padding: 0; background: var(--ev-card); color: var(--ev-text);
  border: 1px solid var(--ev-border); border-radius: 8px;
  overflow: auto; height: 300px; box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}
.autocomplete_listItem { background: transparent; padding: 4px 10px; margin: 0; }
.autocomplete_highlightedListItem { background: var(--ev-good-bg); color: var(--ev-text); padding: 4px 10px; margin: 0; }

.ValidatorCalloutExtender div, .ValidatorCalloutExtender td {
  border: 0; background: var(--ev-card); color: var(--ev-crit);
  font-family: inherit; font-size: 13px;
}
.ValidatorCalloutExtender .ajax__validatorcallout_popup_table { border: 1px solid var(--ev-crit); border-radius: 8px; }
.ValidatorCalloutExtender .ajax__validatorcallout_error_message_cell { padding: 10px 12px; color: var(--ev-crit); }

/* jQueryAlert-Hinweisdialog (IDs kommen aus jQuery_Alert_1_1.js) */
#popup_container {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 13.5px;
  min-width: 320px; max-width: 620px;
  background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px;
  color: var(--ev-text); position: absolute !important; top: 40%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .25); overflow: hidden;
}
#popup_title {
  background: var(--ev-ink); border-bottom: 2px solid var(--ev-lime);
  color: #FFFFFF; cursor: default; font-family: "Archivo", "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 600; margin: 0; padding: 9px 0; text-align: center;
}
#popup_content { padding: 1em 1.5em; margin: 0; }
#popup_message { padding-left: 0; }
#popup_panel { text-align: center; margin: 18px 0 0; }
#popup_panel input {
  background: var(--ev-btn-primary-bg); color: var(--ev-btn-primary-fg);
  border: 0; border-radius: 8px; cursor: pointer; display: inline-block;
  font-family: "Archivo", "Segoe UI", sans-serif; font-size: 13px; font-weight: 600;
  padding: 7px 4px; text-align: center; width: 110px; margin: 0 4px;
}
#popup_panel input:hover { opacity: .92; }
#popup_prompt { margin: .5em 0; }

/* ---------- Monats-Matrix (Lizenz-Entwicklung) mit Kreuz-Hervorhebung ---------- */
.ev-mtx { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ev-mtx th {
  text-align: right; padding: 0 9px 6px; border-bottom: 1px solid var(--ev-border);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ev-muted); white-space: nowrap;
}
.ev-mtx td {
  position: relative; padding: 0 9px; height: 30px; text-align: right;
  font-size: 12.5px; border-bottom: 1px solid var(--ev-border-soft); white-space: nowrap;
}
.ev-mtx th.left, .ev-mtx td.left { text-align: left; }
.ev-mtx td.dim { color: var(--ev-muted); opacity: .55; }
.ev-mtx th.sum, .ev-mtx td.sum { font-weight: 700; border-left: 1px solid var(--ev-border); }
.ev-mtx tr.total td { border-top: 2px solid var(--ev-ink); border-bottom: 0; font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; }
[data-theme="dark"] .ev-mtx tr.total td { border-top-color: var(--ev-lime-strong); }
/* Kreuz: Zeile über tr:hover, Spalte über einen hohen ::after-Schleier der Zelle
   (der umgebende Container braucht overflow-y: hidden, damit der Schleier geclippt wird) */
.ev-mtx tbody tr:hover td { background: var(--ev-border-soft); }
.ev-mtx tbody td:hover::after {
  content: ""; position: absolute; left: 0; right: 0; top: -6000px; bottom: -6000px;
  background: rgba(169, 214, 0, .09); pointer-events: none;
}
.ev-mtx tbody td:hover { box-shadow: inset 0 0 0 2px var(--ev-lime); border-radius: 4px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1240px) {
  .ev-kpis.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ev-kpis.cols-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ev-split { grid-template-columns: 300px minmax(0, 1fr); }
  .ev-duo { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
  .ev-split { grid-template-columns: 1fr; }
  .ev-kpis.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-page { padding: 20px 16px 40px; }
}

/* ==================== CRM (Phase 1) — aus dem Klickdummy übernommene Bausteine: Kacheln, Arbeitsvorrat, Stepper, Flow, Welten ==================== */
.crm-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: stretch; }
.crm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.crm-tile { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px; padding: 10px 13px 9px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; box-shadow: var(--ev-shadow); text-decoration: none; color: var(--ev-text); position: relative; }
.crm-tile:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); }
.crm-tile.crit { border-top: 3px solid var(--ev-crit); } .crm-tile.warn { border-top: 3px solid var(--ev-warn); } .crm-tile.good { border-top: 3px solid var(--ev-good); }
.crm-tile-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.crm-tile-n { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crm-tile.crit .crm-tile-n { color: var(--ev-crit); } .crm-tile.good .crm-tile-n { color: var(--ev-good); }
.crm-tile-n small { font-size: 11px; font-weight: 600; color: var(--ev-crit); margin-left: 4px; }
.crm-info { width: 17px; height: 17px; border-radius: 999px; border: 1.5px solid var(--ev-muted); color: var(--ev-muted); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-style: italic; flex: none; cursor: help; background: transparent; padding: 0; }
.crm-info.on { background: var(--ev-ink); border-color: var(--ev-ink); color: var(--ev-lime-strong); }
.crm-tip { position: absolute; top: 36px; right: 0; z-index: 20; width: 290px; background: var(--ev-ink); color: #E8EBE6; border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; box-shadow: 0 12px 24px rgba(0,0,0,.25); cursor: default; }
.crm-tip b { display: block; color: var(--ev-lime-strong); margin-bottom: 3px; }
.crm-bar { height: 6px; background: var(--ev-border-soft); border-radius: 999px; overflow: hidden; }
.crm-bar.thin { height: 3px; }
.crm-leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.crm-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--ev-border-soft); gap: 1px; }
.crm-stack > i { display: block; height: 100%; min-width: 4px; }
.crm-mx td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.crm-mx tr.ev-clickable { cursor: pointer; }
.crm-bar > i { display: block; height: 100%; background: var(--ev-lime); }
.crm-mb { display: grid; grid-template-columns: 78px minmax(0,1fr) 52px; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ev-muted); padding: 2px 0; }
.crm-mb b { color: var(--ev-text); text-align: right; font-variant-numeric: tabular-nums; }
.crm-todo td { height: auto; padding: 9px 12px; vertical-align: top; }
.crm-todo tr.hot td { background: var(--ev-crit-bg); }
.crm-todo tr.row:hover td { background: var(--ev-border-soft); cursor: pointer; }
.crm-grid4 { display: grid; grid-template-columns: 270px 330px minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.crm-grid3f { display: grid; grid-template-columns: 270px 380px minmax(0, 1fr); gap: 12px; align-items: start; }
.crm-gespraech { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; align-items: start; }
.crm-th { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 0 5px; border-radius: 4px; background: var(--ev-neutral-bg); color: var(--ev-muted); margin-right: 5px; vertical-align: middle; }
.crm-th.crit { background: var(--ev-crit-bg); color: var(--ev-crit); } .crm-th.warn { background: var(--ev-warn-bg); color: var(--ev-warn); } .crm-th.good { background: var(--ev-good-bg); color: var(--ev-good); }
.crm-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.crm-sort:hover { color: var(--ev-text); }
@media (max-width: 1250px) { .crm-grid3f { grid-template-columns: 1fr 1fr; } .crm-gespraech { grid-template-columns: 1fr; } }
@media (max-width: 1500px) { .crm-grid4 { grid-template-columns: 220px 300px minmax(0, 1fr) 340px; } }
@media (max-width: 1200px) { .crm-grid4 { grid-template-columns: 1fr 1fr; } .crm-top { grid-template-columns: 1fr; } .crm-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.crm-qg { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; margin: 10px 4px 4px; }
.crm-qg i { flex: 1; border-top: 1px solid var(--ev-border); }
.crm-q { display: grid; grid-template-columns: 3px minmax(0,1fr) auto; gap: 0 10px; align-items: center; padding: 7px 8px 7px 0; border-radius: 8px; cursor: pointer; }
.crm-q + .crm-q { margin-top: 2px; }
.crm-q:hover { background: var(--ev-border-soft); }
.crm-q .strip { align-self: stretch; border-radius: 2px; background: transparent; }
.crm-q.warn .strip { background: var(--ev-warn); } .crm-q.crit .strip { background: var(--ev-crit); }
.crm-q .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-q .tx b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-q .tx small { font-size: 11.5px; color: var(--ev-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-q .right { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.crm-q .right b { font-size: 12.5px; }
.crm-q .right small { font-size: 10.5px; color: var(--ev-muted); }
.crm-q .right.crit b, .crm-q .right.crit small { color: var(--ev-crit); }
.crm-q.cur { background: var(--ev-good-bg); box-shadow: inset 0 0 0 1px var(--ev-lime); }
.crm-q.nachr { background: var(--ev-crit-bg); margin-bottom: 4px; grid-template-columns: 22px minmax(0,1fr) auto; }
.crm-q.nachr .n { width: 20px; height: 20px; border-radius: 999px; background: var(--ev-crit); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.crm-thema { display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.crm-thema + .crm-thema { margin-top: 2px; }
.crm-thema:hover { background: var(--ev-border-soft); }
.crm-thema .grip { color: var(--ev-muted); cursor: grab; padding-top: 2px; }
.crm-thema .prio { width: 22px; height: 22px; border-radius: 999px; background: var(--ev-neutral-bg); color: var(--ev-muted); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.crm-thema .prio.haupt { background: var(--ev-good); color: #fff; }
.crm-thema b { font-size: 13px; }
.crm-thema.drag { opacity: .5; }
.crm-thema.over { border-color: var(--ev-lime); background: var(--ev-good-bg); }
.crm-res { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-res .ev-btn { justify-content: center; height: 30px; padding: 0 12px; }
.crm-res .ev-btn.on { background: var(--ev-good-bg); border-color: var(--ev-good); color: var(--ev-good); }
.crm-chk { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; cursor: pointer; }
.crm-chk i { width: 15px; height: 15px; border: 1.5px solid var(--ev-muted); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 9.5px; flex: none; }
.crm-chk i.on { background: var(--ev-good); border-color: var(--ev-good); color: #fff; }
.crm-chk i.rq { border-color: var(--ev-crit); }
.crm-chk.mut { color: var(--ev-muted); }
.crm-stepper { display: flex; gap: 4px; }
.crm-step { flex: 1; border-radius: 8px; padding: 8px 10px; border: 1px solid var(--ev-border); background: var(--ev-card); font-size: 11.5px; min-width: 0; }
.crm-step .n { font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-step.done { color: var(--ev-good); background: var(--ev-good-bg); border-color: transparent; }
.crm-step.cur { border-color: var(--ev-lime); box-shadow: 0 0 0 2px var(--ev-lime); font-weight: 600; }
.crm-step.ahead { color: var(--ev-muted); }
.crm-menu { position: absolute; right: 0; top: 40px; z-index: 30; border: 1px solid var(--ev-border); background: var(--ev-card); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; min-width: 300px; box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.crm-menu button { text-align: left; border: 0; background: transparent; color: var(--ev-text); padding: 8px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.crm-menu button:hover { background: var(--ev-border-soft); }
.crm-menu .h { color: var(--ev-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 6px 10px 2px; }
.crm-phase { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 26px; border-radius: 999px; background: var(--ev-neutral-bg); color: var(--ev-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; border: 0; font-family: inherit; }
.crm-phase.on { background: var(--ev-ink); color: var(--ev-lime-strong); }
.crm-link { color: var(--ev-info); text-decoration: none; font-weight: 600; }
.crm-link:hover { text-decoration: underline; }
.crm-svg { width: 100%; height: auto; display: block; font-family: "Segoe UI", system-ui, sans-serif; }
.crm-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; row-gap: 8px; }
.crm-flow-box { border: 1px solid var(--ev-border); background: var(--ev-card); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; min-width: 120px; flex: 1; cursor: pointer; }
.crm-flow-box b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-flow-box small { color: var(--ev-muted); display: block; }
.crm-flow-box.start { border-color: var(--ev-lime); box-shadow: 0 0 0 2px var(--ev-lime); }
.crm-flow-box.sel { background: var(--ev-good-bg); border-color: var(--ev-good); }
.crm-flow-box.off { opacity: .45; border-style: dashed; }
.crm-flow-arrow { align-self: center; color: var(--ev-muted); padding: 0 4px; font-size: 13px; }
.crm-esc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.crm-esc.warn { background: var(--ev-warn-bg); color: var(--ev-warn); } .crm-esc.crit { background: var(--ev-crit-bg); color: var(--ev-crit); }
.crm-wirkung { font-size: 11px; color: var(--ev-muted); }
.crm-wirkung b { color: var(--ev-text); }
/* Welten: Neuvertrieb · Bestandsvertrieb · Regelbetreuung (Heute-Bereiche, Fokus-Schalter) */
.crm-welt { border-left: 4px solid var(--ev-border); }
.crm-welt.neu { border-left-color: var(--ev-lime-strong); } .crm-welt.upsell { border-left-color: var(--ev-info); } .crm-welt.betreuung { border-left-color: var(--ev-good); }
.crm-welt-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-welt-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--ev-neutral-bg); color: var(--ev-text); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.crm-wk { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--ev-border); background: var(--ev-card); text-decoration: none; color: var(--ev-text); line-height: 1.15; }
.crm-wk b { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 17px; font-variant-numeric: tabular-nums; }
.crm-wk span { font-size: 10px; color: var(--ev-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.crm-wk:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); }
.crm-wk.crit { border-color: var(--ev-crit); background: var(--ev-crit-bg); } .crm-wk.crit b, .crm-wk.crit span { color: var(--ev-crit); }
.crm-wk.warn { border-color: var(--ev-warn); background: var(--ev-warn-bg); } .crm-wk.warn b, .crm-wk.warn span { color: var(--ev-warn); }
.crm-weltseg .ev-seg-item { padding: 7px 14px; font-size: 13px; }
.crm-sig { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; margin: 1px 4px 1px 0; }
.crm-sig.crit { background: var(--ev-crit-bg); color: var(--ev-crit); } .crm-sig.warn { background: var(--ev-warn-bg); color: var(--ev-warn); } .crm-sig.info { background: var(--ev-info-bg); color: var(--ev-info); } .crm-sig.done { background: var(--ev-good-bg); color: var(--ev-good); }
.crm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ev-good); vertical-align: middle; cursor: pointer; border: 0; padding: 0; }
.crm-dot.off { background: var(--ev-border); }
.crm-matrix td, .crm-matrix th { text-align: center; } .crm-matrix td:first-child, .crm-matrix th:first-child, .crm-matrix td:last-child, .crm-matrix th:last-child { text-align: left; }

/* ===== Einstellungen: Hauptpunkte links, Unterpunkte oben, Inhalt linksbündig in natürlicher Breite ===== */
.ev-settings { display: grid; grid-template-columns: 190px minmax(0, max-content); gap: 18px; align-items: start; justify-content: start; }
.ev-settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.ev-settings-nav a, .ev-settings-nav span { display: block; padding: 7px 10px; border-radius: 6px; color: var(--ev-soft); text-decoration: none; font-size: 13px; }
.ev-settings-nav a:hover { background: var(--ev-hover, rgba(0,0,0,.04)); color: inherit; }
.ev-settings-nav .active { background: var(--ev-lime-bg, rgba(132,204,22,.15)); color: inherit; font-weight: 600; }
.ev-settings-nav .ev-micro { padding: 10px 10px 4px; }
.ev-settings-main { min-width: 0; max-width: 100%; }
.ev-settings-main > .ev-card { width: fit-content; max-width: 100%; }
@media (max-width: 900px) { .ev-settings { grid-template-columns: 1fr; } .ev-settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* ===== CRM Phase 7: Auswertungen (Diagramme, Trichter, Kennzahlen) ===== */
.crm-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.crm-lg { border: 1px solid var(--ev-border); background: transparent; color: var(--ev-text); font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.crm-lg .sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.crm-lg .sw.dash { background: repeating-linear-gradient(90deg, var(--ev-muted) 0 3px, transparent 3px 5px); height: 2px; }
.crm-lg .sw.dot { background: repeating-linear-gradient(90deg, var(--ev-muted) 0 2px, transparent 2px 4px); height: 2px; }
.crm-lg.active { background: var(--ev-seg-bg); border-color: var(--ev-muted); }
.crm-chart text { fill: var(--ev-muted); font-family: "Segoe UI", system-ui, sans-serif; font-size: 10.5px; }
.crm-chart .gl { stroke: var(--ev-border); stroke-width: 1; }
.crm-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.crm-chart .ref { fill: none; stroke-width: 1.5; stroke-dasharray: 4 4; }
.crm-chart .ref.w8 { stroke-dasharray: 2 3; }
.crm-chart .pt { stroke: var(--ev-card); stroke-width: 1.5; }
.crm-chart .lbl { font-weight: 600; fill: var(--ev-text); }
.crm-funnel { display: grid; grid-template-columns: max-content minmax(120px, 1fr) max-content max-content; gap: 6px 12px; align-items: center; font-size: 12.5px; }
.crm-funnel .hd { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ev-muted); }
.crm-funnel .hd.q, .crm-funnel .q { text-align: right; white-space: nowrap; }
.crm-funnel .stage { font-weight: 600; white-space: nowrap; }
.crm-funnel .stage .k { display: block; font-weight: 400; font-size: 11px; color: var(--ev-muted); }
.crm-funnel .fb { position: relative; height: 22px; }
.crm-funnel .fb .own { position: absolute; left: 0; top: 0; height: 100%; background: var(--ev-ink); border-radius: 3px; opacity: .88; }
.crm-funnel .fb .team { position: absolute; left: 0; top: 4px; height: 14px; border: 1.5px dashed var(--ev-muted); border-radius: 3px; box-sizing: border-box; }
.crm-funnel .fb .n { position: absolute; left: 6px; top: 0; line-height: 22px; color: var(--ev-btn-primary-fg); font-weight: 700; font-size: 12px; }
.crm-funnel .fb .n.out { color: var(--ev-text); }
.crm-funnel .q { font-weight: 600; }
.crm-funnel .q small { display: block; font-weight: 400; color: var(--ev-muted); font-size: 11px; }
.crm-kpis { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.crm-kpi .l { font-size: 11px; color: var(--ev-muted); }
.crm-kpi .v { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--ev-text); }
.crm-kpi .v.m { font-size: 17px; }
.crm-kpi .d { font-size: 11.5px; color: var(--ev-muted); }
.crm-kpi .v.good, .crm-good { color: var(--ev-good); } .crm-kpi .v.warn, .crm-warn { color: var(--ev-warn); } .crm-kpi .v.crit, .crm-crit { color: var(--ev-crit); }
.crm-bar { position: relative; height: 10px; background: var(--ev-border-soft); border-radius: 5px; }
.crm-bar .fill { height: 100%; border-radius: 5px; background: var(--ev-good); }
.crm-bar .fill.warn { background: var(--ev-warn); } .crm-bar .fill.crit { background: var(--ev-crit); }
.crm-bar .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ev-text); opacity: .55; }
.crm-bar .mark.tier { background: transparent; border-left: 2px dashed var(--ev-muted); width: 0; opacity: .9; }
.crm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.crm-step { border: 1px solid var(--ev-border); border-radius: 8px; padding: 10px 12px; position: relative; }
.crm-step.hl { border-color: var(--ev-lime); box-shadow: inset 0 0 0 1px var(--ev-lime); }
.crm-step .nm { font-size: 11px; color: var(--ev-muted); }
.crm-step .big { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 20px; font-weight: 700; line-height: 1.15; }
.crm-step .pw { font-size: 12px; margin-top: 2px; }
.crm-step .cmp { font-size: 11px; color: var(--ev-muted); margin-top: 6px; border-top: 1px dashed var(--ev-border); padding-top: 6px; }
.crm-step .q { position: absolute; right: 10px; top: 8px; font-size: 10.5px; color: var(--ev-muted); }
.crm-mini { display: inline-block; height: 6px; background: var(--ev-border-soft); border-radius: 3px; width: 90px; vertical-align: middle; position: relative; }
.crm-mini i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--ev-good); }
.crm-mini i.warn { background: var(--ev-warn); } .crm-mini i.crit { background: var(--ev-crit); }
.crm-mini b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ev-text); opacity: .5; }
.crm-grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 12px; }
@media (max-width: 900px) { .crm-grid-main { grid-template-columns: 1fr; } }

/* ===== Startseite (Kacheln nach Rolle, nur Summen) ===== */
.start-grid { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.start-grid .c12 { grid-column: span 12; } .start-grid .c8 { grid-column: span 8; } .start-grid .c4 { grid-column: span 4; }
@media (max-width: 1100px) { .start-grid .c8, .start-grid .c4 { grid-column: span 12; } .start-grid .c4.half { grid-column: span 6; } }
@media (max-width: 640px) { .start-grid .c4.half { grid-column: span 12; } }
.start-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .start-worlds { grid-template-columns: 1fr; } }
.start-world { display: block; border: 1px solid var(--ev-border); border-radius: 8px; padding: 10px 12px; color: var(--ev-text); text-decoration: none; }
.start-world:hover { border-color: var(--ev-muted); text-decoration: none; color: var(--ev-text); }
.start-world .nm { font-weight: 600; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.start-world .nums { display: flex; gap: 14px; margin-top: 6px; }
.start-world .nums b { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 20px; font-weight: 700; display: block; line-height: 1.1; }
.start-world .nums span { font-size: 11px; color: var(--ev-muted); }
.start-verdict { border-left: 3px solid var(--ev-good); background: var(--ev-good-bg); border-radius: 6px; padding: 8px 12px; font-size: 12.5px; }
.start-verdict.warn { border-color: var(--ev-warn); background: var(--ev-warn-bg); }
.start-planned { border-style: dashed !important; background: transparent !important; box-shadow: none !important; }

/* ===== Offene Posten Vertrieb (/opos) ===== */
.opos-bank { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; border-left: 3px solid var(--ev-info); background: var(--ev-info-bg); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; }
.opos-bank.stale { border-color: var(--ev-warn); background: var(--ev-warn-bg); }
.opos-bank .l { font-size: 11px; color: var(--ev-muted); }
.opos-bank .big { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.1; }
.ev-table.opos tr.opos-cust { cursor: pointer; }
.ev-table.opos tr.opos-cust:hover td { background: var(--ev-border-soft); }
.ev-table.opos tr.opos-cust td:first-child::before { content: "\25B8"; display: inline-block; width: 14px; color: var(--ev-muted); }
.ev-table.opos tr.opos-cust.open td:first-child::before { content: "\25BE"; }
.ev-table.opos tr.dim td, .ev-table tr.dim td { color: var(--ev-muted); }
.ev-table.opos tr.opos-detail td { padding: 0 8px 12px 30px; background: var(--ev-bg); }
.opos-inner { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 8px; padding: 10px 12px; }

/* ===== Startseite Admin: Vertrieb im Überblick ===== */
.start-filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 12px; border: 1px solid var(--ev-border); border-radius: 8px; background: var(--ev-bg); margin: 10px 0 12px; }
.start-filter label { font-size: 11px; color: var(--ev-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.start-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.start-tile { border: 1px solid var(--ev-border); border-radius: 8px; padding: 10px 12px; }
.start-tile .l { font-size: 11px; color: var(--ev-muted); }
.start-tile .v { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ev-text); }
.start-tile .v small { font-size: 13px; font-weight: 500; color: var(--ev-muted); font-family: "Segoe UI", system-ui, sans-serif; }
.start-tile .vj { font-size: 11.5px; color: var(--ev-muted); margin-top: 4px; display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.start-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 900px) { .start-charts { grid-template-columns: 1fr; } }
.start-chart { border: 1px solid var(--ev-border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.start-chart .ct { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.start-chart .h3 { font-family: "Archivo", "Segoe UI", sans-serif; font-size: 13px; font-weight: 600; }
.start-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--ev-muted); }
.start-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }

/* ===== Diagramme: Höhe begrenzen statt mit dem Fenster mitzuwachsen (Feedback 16.09.2026) ===== */
.crm-chart { max-height: 280px; height: auto; display: block; margin: 0 auto; }
.start-chart .crm-chart { max-height: 240px; }
.start-charts { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
@media (min-width: 1700px) { .start-charts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== Schnellsuche (/suche, Lupe in der Kopfleiste, Strg+K) ===== */
.ev-iconbtn-dark { text-decoration: none; }
.ev-iconbtn-dark.on { color: var(--ev-lime-strong); background: #262B1E; }
.ev-kbd {
  display: inline-block; font-family: "JetBrains Mono", Consolas, monospace; font-size: 10.5px; font-weight: 500; line-height: 16px;
  padding: 0 5px; border: 1px solid var(--ev-btn2-border); border-bottom-width: 2px; border-radius: 5px;
  background: var(--ev-card); color: var(--ev-muted);
}
.ev-banner-link { color: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ev-banner-link:hover { color: inherit; text-decoration: underline; }
.ev-qs { max-width: 880px; margin: 0 auto; padding: 44px 32px 64px; color: var(--ev-text); line-height: 1.45; }
.ev-qs-box { position: relative; }
.ev-qs-icon { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--ev-muted); pointer-events: none; }
.ev-qs-input {
  width: 100%; height: 56px; border-radius: 14px; border: 1px solid var(--ev-btn2-border); background: var(--ev-input-bg);
  color: var(--ev-text); font-family: inherit; font-size: 18px; padding: 0 52px 0 50px; box-shadow: var(--ev-shadow);
}
.ev-qs-input::placeholder { color: var(--ev-muted); }
.ev-qs-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ev-qs-input:focus { outline: 2px solid var(--ev-lime); outline-offset: 1px; border-color: transparent; }
.ev-qs-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; }
.ev-qs-hint { margin: 12px 4px 0; font-size: 12px; color: var(--ev-muted); display: flex; gap: 6px 14px; flex-wrap: wrap; }
.ev-qs-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 16px 4px 8px; font-size: 12px; color: var(--ev-muted); }
.ev-qs-list { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px; box-shadow: var(--ev-shadow); overflow: hidden; }
.ev-qs-group { border-bottom: 1px solid var(--ev-border); }
.ev-qs-group:last-child { border-bottom: 0; }
.ev-qs-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; box-shadow: inset 3px 0 0 transparent; }
.ev-qs-row + .ev-qs-row { border-top: 1px solid var(--ev-border-soft); }
.ev-qs-row.sub { padding-top: 8px; padding-bottom: 8px; padding-left: 44px; }
.ev-qs-row:hover { background: var(--ev-border-soft); }
.ev-qs-row.sel { background: var(--ev-good-bg); box-shadow: inset 3px 0 0 var(--ev-lime); }
[data-theme="dark"] .ev-qs-row.sel { background: rgba(201, 228, 77, .10); }
.ev-qs-ic { color: var(--ev-muted); text-align: center; font-size: 13px; }
.ev-qs-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-qs-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ev-qs-name { font-weight: 600; font-size: 14.5px; }
.ev-qs-name2 { color: var(--ev-muted); font-size: 12.5px; }
.ev-qs-cname { font-weight: 600; font-size: 13px; }
.ev-qs-sub { font-size: 12px; color: var(--ev-muted); }
.ev-qs-star { color: var(--ev-warn); font-size: 10.5px; }
.ev-qs-right { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ev-muted); white-space: nowrap; }
.ev-qs-right b { color: var(--ev-text); font-weight: 600; }
.ev-qs-enter { visibility: hidden; display: inline-flex; align-items: center; gap: 6px; }
.ev-qs-row.sel .ev-qs-enter { visibility: visible; }
.ev-qs-group.dim .ev-qs-name, .ev-qs-group.dim .ev-qs-cname { color: var(--ev-muted); }
.ev-qs-row.locked { cursor: not-allowed; }
.ev-qs-row.locked:hover { background: transparent; }
.ev-qs-row.locked .ev-qs-name { color: var(--ev-muted); }
.ev-qs mark { background: color-mix(in srgb, var(--ev-lime) 32%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
[data-theme="dark"] .ev-qs mark { background: color-mix(in srgb, var(--ev-lime-strong) 24%, transparent); }
.ev-qs-empty { background: var(--ev-card); border: 1px solid var(--ev-border); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 760px) {
  .ev-qs { padding: 24px 16px 48px; }
  .ev-qs-row { grid-template-columns: 22px minmax(0, 1fr); }
  .ev-qs-row .ev-qs-right { grid-column: 2; white-space: normal; }
  .ev-qs-enter { display: none; }
  .ev-qs-row.sub { padding-left: 28px; }
}

/* ===== Lange Listen: eigener Scrollbereich mit festem Tabellenkopf (Kundenliste, <Virtualize>) ===== */
.ev-table-scroll { max-height: max(320px, calc(100vh - 250px)); overflow: auto; }
.ev-table.sticky-head thead th { position: sticky; top: 0; z-index: 1; background: var(--ev-card); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--ev-border); }

/* ===== Dialog „Kontakt dokumentieren“ (KontaktDialog): breit, rechts Firma + Ansprechpartner, links optional Ergebnis ===== */
.ev-dialog.kd-wide { max-width: 1280px; }
.kd-grid { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.kd-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kd-zus { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ev-info); }
.kd-side { background: var(--ev-bg); border: 1px solid var(--ev-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kd-kunde { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.kd-firma { font-family: "Archivo", "Segoe UI", sans-serif; font-weight: 700; font-size: 15px; }
.kd-adr { font-size: 12.5px; color: var(--ev-soft); font-variant-numeric: tabular-nums; }
.kd-side a { color: var(--ev-info); text-decoration: none; }
.kd-side a:hover { text-decoration: underline; }
.kd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.kd-cols { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(108px, .75fr) minmax(108px, .75fr) minmax(140px, 1.35fr) 22px; gap: 10px; align-items: center; }
.kd-colhead { padding: 0 10px 4px 13px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); }
.kd-list { display: flex; flex-direction: column; gap: 4px; max-height: min(430px, 52vh); overflow-y: auto; padding-right: 2px; }
.kd-kp { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ev-border); background: var(--ev-card); color: var(--ev-text); cursor: pointer; box-shadow: inset 3px 0 0 transparent; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kd-kp:hover { border-color: var(--ev-muted); }
.kd-kp:focus-visible { outline: 2px solid var(--ev-lime); outline-offset: 1px; }
.kd-kp.sel { background: var(--ev-good-bg); border-color: var(--ev-lime); box-shadow: inset 3px 0 0 var(--ev-lime); }
[data-theme="dark"] .kd-kp.sel { background: rgba(201, 228, 77, .10); }
.kd-kp-name { min-width: 0; line-height: 1.25; }
.kd-kp-name b { font-size: 13px; }
.kd-kp-name .pos { display: block; font-size: 11.5px; color: var(--ev-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-star { color: var(--ev-warn); font-size: 10.5px; margin-left: 5px; }
.kd-cell { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-cell .leer { color: var(--ev-muted); }
.kd-cell .lbl { display: none; }
.kd-kp-check { color: var(--ev-good); visibility: hidden; text-align: center; }
.kd-kp.sel .kd-kp-check { visibility: visible; }
.kd-leer { font-size: 12.5px; color: var(--ev-muted); border: 1px dashed var(--ev-btn2-border); border-radius: 9px; padding: 12px; }
.kd-erg { border: 1px solid var(--ev-border); border-left: 3px solid var(--ev-lime); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.kd-erg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kd-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ev-muted); }
.kd-link { border: 0; background: none; padding: 0; color: var(--ev-info); cursor: pointer; font-size: 12px; }
.kd-link:hover { text-decoration: underline; }
.kd-verlauf-erg { margin-top: 4px; font-size: 12px; color: var(--ev-info); display: flex; gap: 6px; align-items: baseline; }
.kd-verlauf-erg b { color: var(--ev-text); font-weight: 600; }
@media (max-width: 1100px) { .kd-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .kd-colhead { display: none; }
  .kd-cols { grid-template-columns: minmax(0, 1fr) 22px; gap: 2px 10px; }
  .kd-kp-name, .kd-cell { grid-column: 1; }
  .kd-kp-check { grid-column: 2; grid-row: 1; }
  .kd-cell .lbl { display: inline; color: var(--ev-muted); margin-right: 6px; }
}

/* Ergebnis-Box: Dokumentation des Kontakts (wie, wann, mit) */
.crm-doku { border-top: 1px dashed var(--ev-btn2-border); padding-top: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.crm-doku .ev-seg { display: flex; width: 100%; }
.crm-doku .ev-seg-item { flex: 1; justify-content: center; padding: 0 6px; font-size: 12px; height: 30px; cursor: pointer; }

/* Verlauf: Anrufe/Termine/Mails/Notizen per Klick im Modal bearbeiten (Zeitpunkt, Text) */
.vl-eintrag { cursor: default; }
.vl-eintrag.bearbeitbar { cursor: pointer; }
.vl-stift { visibility: hidden; margin-left: 7px; color: var(--ev-muted); font-size: 11px; }
.vl-eintrag.bearbeitbar:hover .vl-stift { visibility: visible; }

/* Lead-Info-Box: Fälligkeit (Datum + Uhrzeit wie in der Fokus-Liste) — vorziehen oder verschieben */
.crm-faellig { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.crm-faellig-wert { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.crm-faellig-wert.crit { color: var(--ev-crit); }
.crm-faellig-wert.warn { color: var(--ev-warn); }
.crm-faellig-edit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; padding: 10px; border: 1px solid var(--ev-border); border-radius: 10px; background: var(--ev-bg); }