/* ═══════════════════════════════════════════════
   HOCHRUNTER OS — Komponenten
   Alle Abstände: var(--sp-*), Schriften: var(--text-*) / var(--fw-*),
   Farben: var(--brand) / var(--surface-*) / Semantic Tokens.
   Keine hardcodierten Pixelwerte bei Hauptkomponenten.
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-sm { padding: 6px var(--sp-3); font-size: var(--text-xs); border-radius: var(--r); }
.btn-xs { padding: 3px var(--sp-2); font-size: 11px;           border-radius: var(--r-sm); }

/* Primary — Gradient mit Tiefe (kein flaches Blau) */
.btn-primary {
  background: linear-gradient(180deg, #2f7cff 0%, var(--brand) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 4px 14px var(--brand-shadow),
    0 1px 3px rgba(0,0,0,.10);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3d86ff 0%, var(--brand-hover) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 8px 22px var(--brand-shadow),
    0 2px 6px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Ghost — weiß, Tiefe erst beim Hover */
.btn-ghost {
  background: var(--surface-float);
  border: 1px solid rgba(15,23,42,.10);
  color: var(--z-700);
  box-shadow: var(--sh-xs);
}
.btn-ghost:hover {
  background: var(--surface-float);
  border-color: rgba(15,23,42,.18);
  color: var(--z-900);
  box-shadow: var(--sh-sm);
}

/* Secondary — neutral */
.btn-secondary {
  background: var(--z-100);
  border-color: var(--z-200);
  color: var(--z-700);
}
.btn-secondary:hover {
  background: var(--z-200);
  color: var(--z-900);
}

/* Danger */
.btn-danger {
  background: var(--err);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(220,38,38,.25);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(220,38,38,.35);
  transform: translateY(-1px);
}

/* Dark — nearly-black CTA für sekundäre Aktionen */
.btn-dark {
  background: var(--z-900); color: #fff;
  border-color: transparent;
}
.btn-dark:hover { background: var(--z-800); color: #fff; }

/* Soft Danger — subtiler Hinweis vor Bestätigung */
.btn-soft-danger {
  background: var(--err-bg); color: var(--err);
  border: 1px solid var(--err-bd) !important;
}
.btn-soft-danger:hover { background: var(--err); color: #fff; }

/* Icon Button */
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  color: var(--muted);
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { color: var(--ink); background: var(--z-100); }
.btn-icon i svg { width: 14px; height: 14px; }

.btn[disabled],
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ─────────────────────────────────────────────
   CARDS & PANELS
   ──────────────────────────────────────────── */

.cardx,
.hos-panel {
  background: var(--surface-card);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Lift only — kein Farb-Border */
.cardx:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }

/* Schnellfilter-Chip — global, verwendet in anrufe + leads */
.anr-qf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 7px;
  background: transparent; border: 1px solid rgba(15,23,42,.09);
  font-size: 12px; font-weight: 500; color: #64748b;
  text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit;
  transition: background .11s, border-color .11s;
}
.anr-qf:hover { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.14); text-decoration: none; }
.anr-qf.active { background: #0f172a; border-color: #0f172a; color: #fff; }
.anr-qf strong { font-size: 13px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; }
.anr-qf.active strong { color: #fff; }
.anr-qf-sep { display: inline-block; width: 1px; height: 16px; background: rgba(15,23,42,.1); align-self: center; margin: 0 2px; }

/* KPI Card */
.kpi-card {
  background: var(--surface-card);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  transition: background var(--dur) var(--ease-out);
}
.kpi-card:hover { background: var(--z-50); }
.kpi-card strong {
  font-size: var(--text-3xl);
  font-weight: var(--fw-ultra);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
}

/* Stat Grid */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.stat-card {
  background: var(--surface-card);
  border: 1px solid rgba(15,23,42,.07);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4);
  transition: box-shadow var(--dur) var(--ease-out);
}
.stat-card:hover { box-shadow: var(--sh-sm); }

.stat-lbl {
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-wider);
  color: var(--z-400);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.stat-val {
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tighter);
  font-family: 'Geist Mono', monospace;
  color: var(--ink);
  line-height: var(--leading-none);
}
.stat-sub { font-size: var(--text-xs); color: var(--muted); margin-top: var(--sp-1); }

/* Tinted stat cards — NUR für kritische Zustände */
.stat-card.green.tinted { background: var(--ok-bg);   border-color: var(--ok-bd); }
.stat-card.red.tinted   { background: var(--err-bg);  border-color: var(--err-bd); }
.stat-card.amber.tinted { background: var(--warn-bg); border-color: var(--warn-bd); }
.stat-card.blue.tinted  { background: var(--b-50);    border-color: var(--b-100); }
.stat-card.green.tinted .stat-val { color: var(--ok); }
.stat-card.red.tinted   .stat-val { color: var(--err); }
.stat-card.blue.tinted  .stat-val { color: var(--b-700); }

/* ─────────────────────────────────────────────
   STATUS PILLS
   ──────────────────────────────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  border: 1px solid;
  background: var(--info-bg);
  color: var(--info);
  border-color: var(--info-bd);
}
.status-pill::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
  flex-shrink: 0;
}
.status-pill.sm  { padding: 2px 6px; font-size: 10px; }
.status-pill.blue  { background: var(--z-100);    color: var(--z-700);  border-color: var(--z-200); }
.status-pill.green { background: var(--ok-bg);    color: var(--ok);     border-color: var(--ok-bd); }
.status-pill.red   { background: var(--err-bg);   color: var(--err);    border-color: var(--err-bd); }
.status-pill.amber { background: var(--warn-bg);  color: var(--warn);   border-color: var(--warn-bd); }
.status-pill.gray  { background: var(--z-100);    color: var(--z-500);  border-color: var(--z-200); }
.status-pill.info  { background: var(--z-100);    color: var(--z-700);  border-color: var(--z-200); }
.status-pill.teal  { background: #f0fdfa;         color: #0d9488;       border-color: #99f6e4; }
.status-pill.ink   { background: var(--z-900);    color: #fff;          border-color: var(--z-900); }

/* ─────────────────────────────────────────────
   TABELLEN
   ──────────────────────────────────────────── */

.table thead th {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--surface-panel);
  color: var(--z-400);
  border-bottom: 1px solid var(--z-200);
  white-space: nowrap;
}
.table tbody td {
  padding: 11px var(--sp-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--z-100);
  vertical-align: middle;
}
.table tbody tr { cursor: pointer; transition: background var(--dur-instant) var(--ease-out); }
.table tbody tr.no-click { cursor: default; }
.table tbody tr:hover td { background: #fafbfc; }

.table .row-actions { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.table tbody tr:hover .row-actions { opacity: 1; }

.col-num    { text-align: right; font-family: 'Geist Mono', monospace; }
.col-date   { white-space: nowrap; font-size: var(--text-xs); color: var(--muted); }
.col-status { white-space: nowrap; }

.table-empty-row td {
  text-align: center;
  padding: var(--sp-12) var(--sp-5) !important;
  color: var(--muted);
  cursor: default !important;
  background: transparent !important;
}

/* ─────────────────────────────────────────────
   MODALS
   ──────────────────────────────────────────── */

.hos-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.hos-modal {
  background: var(--surface-card);
  border-radius: var(--r-2xl);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hos-modal.wide   { max-width: 720px; }
.hos-modal.narrow { max-width: 420px; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-panel);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  flex-shrink: 0;
}
.modal-head h2 {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r);
  color: var(--muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--z-200); color: var(--ink); }

.modal-body {
  padding: var(--sp-5);
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--surface-panel);
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   FORMULARE
   ──────────────────────────────────────────── */

.form-label,
.set-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--z-700);
  margin-bottom: var(--sp-1);
  letter-spacing: var(--tracking-wide);
}

.form-inp {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--z-200);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--surface-card);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
  box-sizing: border-box;
}
.form-inp:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}
.form-inp::placeholder { color: var(--z-400); }
.form-inp.mono { font-family: 'Geist Mono', monospace; letter-spacing: .04em; }

/* Select mit Custom-Pfeil */
select.form-inp,
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: var(--sp-8);
  cursor: pointer;
}

/* Global Input Focus — immer Brand, niemals Indigo */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
  outline: none;
}

/* ─────────────────────────────────────────────
   TABS
   ──────────────────────────────────────────── */

.hos-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--z-200);
  margin-bottom: var(--sp-4);
}
.hos-tab {
  padding: var(--sp-2) var(--sp-4);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  font-family: inherit;
}
.hos-tab:hover { color: var(--z-700); }
.hos-tab.active {
  color: var(--z-900);
  border-bottom-color: var(--z-900);
  font-weight: var(--fw-bold);
}
.hos-tab-count {
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--z-100);
  color: var(--muted);
}
.hos-tab.active .hos-tab-count { background: var(--z-900); color: #fff; }

/* ─────────────────────────────────────────────
   LEER-ZUSTÄNDE
   ──────────────────────────────────────────── */

.hos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  gap: var(--sp-3);
}
.hos-empty-icon {
  width: 56px;
  height: 56px;
  background: var(--z-100);
  border: 1px solid var(--z-200);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--z-400);
  margin-bottom: var(--sp-1);
}
.hos-empty-icon svg,
.hos-empty-icon i svg { width: 22px; height: 22px; }
.hos-empty-title {
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
.hos-empty-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 280px;
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ─────────────────────────────────────────────
   VIEW TOGGLE
   ──────────────────────────────────────────── */

.view-toggle {
  display: flex;
  background: var(--z-100);
  border: 1px solid var(--z-200);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}
.vt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1) var(--sp-2);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r);
  color: var(--muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  font-size: var(--text-xs);
}
.vt-btn:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.vt-btn.active { background: var(--surface-card); color: var(--ink); box-shadow: var(--sh-xs); }

/* ─────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ──────────────────────────────────────────── */

#hos-toast-container {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 99999;
  pointer-events: none;
  max-width: 380px;
}
.hos-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  pointer-events: all;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  min-width: 220px;
  max-width: 380px;
  position: relative;
  overflow: hidden;
}
.hos-toast--show { opacity: 1; transform: translateY(0) scale(1); }
.hos-toast--out  { opacity: 0; transform: translateY(8px) scale(.97); }

.hos-toast--success { background: #14532d; color: #d1fae5; border-left: 3px solid #4ade80; }
.hos-toast--error   { background: #7f1d1d; color: #fee2e2; border-left: 3px solid #f87171; }
.hos-toast--warn    { background: #78350f; color: #fef3c7; border-left: 3px solid #fbbf24; }
.hos-toast--info    { background: var(--z-800); color: #e4e4e7; border-left: 3px solid var(--brand); }

.hos-toast-icon  { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.hos-toast-msg   { flex: 1; }
.hos-toast-close {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .5; padding: 0 0 0 var(--sp-1);
  font-size: 15px; line-height: 1; flex-shrink: 0;
  transition: opacity var(--dur-instant) var(--ease-out);
}
.hos-toast-close:hover { opacity: 1; }
.hos-toast-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: rgba(255,255,255,.25); border-radius: 0;
  animation: hosToastProgress linear forwards; width: 100%;
}
@keyframes hosToastProgress { from { width: 100%; } to { width: 0%; } }

/* ─────────────────────────────────────────────
   SECTION HEAD
   ──────────────────────────────────────────── */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section-head h1 {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--z-950);
}
.section-head h2 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

/* ─────────────────────────────────────────────
   ALERT BARS
   ──────────────────────────────────────────── */

.alert-success-bar {
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-bd);
  border-radius: var(--r); padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
}
.alert-error-bar {
  background: var(--err-bg); color: var(--err); border: 1px solid var(--err-bd);
  border-radius: var(--r); padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
}


/* ═══════════════════════════════════════════════
   ANRUFE — Seiten-spezifische Komponenten
   ═══════════════════════════════════════════════ */

/* ── KPI Filter-Cards (legacy — wird durch Command-Center ersetzt) */
.anr-kpi-filter {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.anr-kpi-filter:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.anr-kpi-filter.active {
  box-shadow: 0 0 0 2px var(--brand), var(--sh-xs);
}
.anr-kpi-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--z-50); color: var(--z-400);
  border: 1px solid var(--z-100);
  margin: 0 auto var(--sp-3);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.anr-kpi-filter.active .anr-kpi-icon { background: var(--brand-dim); color: var(--brand); border-color: var(--brand-border); }
.anr-kpi-filter:hover:not(.active) .anr-kpi-icon { background: var(--z-100); color: var(--z-600); }
.anr-kpi-num {
  font-family: 'Geist Mono', monospace;
  font-size: var(--text-3xl); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tighter); color: var(--ink);
  line-height: var(--leading-none); margin-bottom: var(--sp-1);
}
.anr-kpi-num--alert { color: var(--err); }
.anr-kpi-num--warn  { color: var(--warn); }
.anr-kpi-num--ok    { color: var(--ok); }
.anr-kpi-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--z-700); margin-bottom: 3px; }
.anr-kpi-hint  { font-size: 10px; color: var(--muted); line-height: var(--leading-snug); }

/* ── Tabellen-Kopf ──────────────────────────── */
#calls-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--z-100) !important;
  border-bottom: 2px solid var(--z-200) !important;
  padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important;
  font-size: 10px !important;
  letter-spacing: var(--tracking-widest) !important;
}

/* ── Tabellen-Zeilen ────────────────────────── */
#calls-table tbody tr { transition: background var(--dur-instant) var(--ease-out); }
#calls-table tbody tr:hover td { background: var(--brand-dim) !important; }
#calls-table tbody td {
  vertical-align: middle; padding: 11px var(--sp-3);
  border-bottom: 1px solid var(--z-100);
}
#calls-table tbody tr:last-child td { border-bottom: none; }
#calls-table tbody tr[data-cb="1"] td       { background: rgba(217,119,6,.05); }
#calls-table tbody tr[data-cb="1"]:hover td { background: rgba(217,119,6,.10) !important; }
#calls-table tbody tr[data-missed="1"] td   { background: var(--err-bg) !important; }
#calls-table tbody tr[data-missed="1"] .anr-time-hm { color: var(--err) !important; }
#calls-table tbody tr.anr-row--muted td,
#calls-table tbody tr.anr-row--noise td { opacity: .35; }
#calls-table tbody tr.anr-row--muted:hover td,
#calls-table tbody tr.anr-row--noise:hover td { opacity: .7 !important; }

/* ── Zeit-Zelle ─────────────────────────────── */
.anr-cell-time { padding-left: 22px !important; min-width: 108px; }
.anr-time-hm {
  font-size: var(--text-xl); font-weight: var(--fw-black); color: var(--z-900);
  font-family: 'Geist Mono', monospace;
  line-height: var(--leading-none); letter-spacing: var(--tracking-tight);
}
.anr-time-date { font-size: 10px; color: var(--z-400); margin-top: var(--sp-1); font-weight: var(--fw-medium); }
.anr-time-dur {
  display: inline-flex; align-items: center; gap: 3px; margin-top: var(--sp-1);
  font-size: var(--text-xs); font-family: 'Geist Mono', monospace; font-weight: var(--fw-bold);
  color: var(--ok); letter-spacing: var(--tracking-normal);
  background: var(--ok-bg); padding: 1px var(--sp-2); border-radius: var(--r-sm);
}

/* ── Anrufer-Zelle ──────────────────────────── */
.anr-caller-cell { display: flex; align-items: flex-start; gap: var(--sp-3); }
.anr-caller-info { min-width: 0; flex: 1; }
.anr-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-normal);
  background: var(--z-100); color: var(--z-500);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
#calls-table tbody tr:hover .anr-avatar { transform: scale(1.06); box-shadow: var(--sh-sm); }
.anr-caller-name {
  font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--z-900);
  text-decoration: none; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
}
.anr-caller-name:hover { color: var(--brand); }
.anr-caller-phone {
  display: block; font-size: var(--text-sm); color: var(--z-700); text-decoration: none;
  font-family: 'Geist Mono', monospace; letter-spacing: var(--tracking-normal);
  font-weight: var(--fw-semibold); margin-top: 3px;
}
.anr-caller-phone:hover { color: var(--brand); }
.anr-caller-badges { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: 3px; }
.anr-btn-assign {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: 1.5px dashed var(--z-200); border-radius: var(--r);
  padding: 3px var(--sp-3); cursor: pointer; font-size: var(--text-xs);
  font-weight: var(--fw-semibold); color: var(--z-400);
  transition: all var(--dur-fast) var(--ease-out); font-family: inherit;
}
.anr-btn-assign:hover { border-color: var(--brand); color: var(--brand); border-style: solid; background: var(--brand-dim); }

/* ── Richtungs-Indikator ────────────────────── */
.anr-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r); flex-shrink: 0;
}
.anr-dir--in  { background: var(--brand-dim); color: var(--brand); }
.anr-dir--out { background: var(--ok-bg); color: var(--ok); }

/* ── Badges ─────────────────────────────────── */
.anr-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: var(--fw-semibold);
  padding: 2px 7px; border-radius: var(--r-full);
  white-space: nowrap; flex-shrink: 0; border: 1px solid transparent;
  letter-spacing: var(--tracking-normal);
}
.anr-badge--missed { background: var(--err-bg); color: var(--err); border-color: var(--err-bd); }
.anr-badge--repeat {
  background: var(--z-100); color: var(--z-600); border-color: var(--z-200);
  cursor: pointer; user-select: none; font-weight: var(--fw-bold); min-height: 24px;
  transition: all var(--dur-fast) var(--ease-out); order: -1;
}
.anr-badge--repeat:hover { background: var(--brand-dim); color: var(--brand); border-color: var(--brand-border); }

/* ── Status — Pill ───────────────────────────── */
.anr-status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); white-space: nowrap;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r);
}
.anr-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.anr-status--done     { background: var(--ok-bg);       color: var(--ok);   }
.anr-status--callback { background: var(--warn-bg);     color: var(--warn); }
.anr-status--missed   { background: var(--err-bg);      color: var(--err);  }
.anr-status--open     { background: var(--brand-dim);   color: var(--brand); }
.anr-status--done     .anr-status-dot { background: var(--ok);   }
.anr-status--callback .anr-status-dot { background: var(--warn); }
.anr-status--missed   .anr-status-dot { background: var(--err);  }
.anr-status--open     .anr-status-dot { background: var(--brand); }

/* ── Phone History ──────────────────────────── */
.anr-history-container > td { border-top: none; padding: 0; }
.anr-hist-wrap { border: 1px solid var(--z-100); border-radius: var(--r-md); overflow: hidden; background: transparent; }
.anr-history-container .anr-hist-wrap { margin-left: 22px; }

.anr-hist-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--z-100); min-width: 0; transition: background 120ms; }
.anr-hist-item:last-child { border-bottom: none; }
.anr-hist-item[data-call-id] { cursor: pointer; }
.anr-hist-item[data-call-id]:hover { background: var(--z-50); }
.anr-hist-item[data-call-id]:hover .anr-hist-name { color: #2563eb; }
.anr-hist-item--missed { background: rgba(254,226,226,.18); }
.anr-hist-item--missed[data-call-id]:hover { background: rgba(254,226,226,.30); }
.anr-hist-status { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.anr-hist-status--done { color: #15803d; background: #dcfce7; }
.anr-hist-status--cb   { color: #92400e; background: #fef3c7; }

.anr-hist-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.anr-hist-dot--in     { background: #22c55e; }
.anr-hist-dot--out    { background: var(--z-300); }
.anr-hist-dot--missed { background: var(--err); }

.anr-hist-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.anr-hist-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.anr-hist-name { font-size: 13px; font-weight: var(--fw-semibold); color: var(--z-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.anr-hist-name em { color: var(--z-400); font-style: normal; }
.anr-hist-dur  { font-size: 11px; color: var(--z-400); font-family: 'Geist Mono', monospace; white-space: nowrap; flex-shrink: 0; }
.anr-hist-sub  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.anr-hist-date { font-size: 11px; color: var(--z-400); font-family: 'Geist Mono', monospace; white-space: nowrap; }
.anr-hist-cat  { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--z-500); background: var(--z-100); padding: 1px 7px; border-radius: var(--r-full); white-space: nowrap; }
.anr-hist-cat--missed { color: var(--err); background: var(--err-bg); }
.anr-hist-ai   { font-size: 11.5px; color: var(--z-400); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anr-hist-notes { color: var(--z-400); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Action-Buttons ─────────────────────────── */
.anr-actions { display: flex; align-items: center; gap: var(--sp-1); padding-right: var(--sp-4); white-space: nowrap; transition: opacity var(--dur) var(--ease-out); }
.anr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; border-radius: var(--r); cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--fw-semibold); font-family: inherit;
  border: 1px solid var(--z-200); background: rgba(255,255,255,.8); color: var(--z-500);
  transition: all var(--dur-fast) var(--ease-out); padding: 0 var(--sp-2); gap: var(--sp-1);
  box-shadow: var(--sh-xs);
}
.anr-btn:hover    { border-color: var(--z-300); color: var(--ink); background: var(--surface-card); box-shadow: var(--sh-sm); }
.anr-btn--icon    { width: 28px; padding: 0; }
.anr-btn--resolve   { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); box-shadow: none; }
.anr-btn--resolve:hover { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,.28); }
.anr-btn--cb        { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); font-weight: var(--fw-bold); box-shadow: none; }
.anr-btn--cb:hover  { background: var(--warn); border-color: var(--warn); color: #fff; }
/* "Zurückgerufen"-Button — deutlich sichtbarer CTA für offene Rückrufe */
.anr-btn--cb-done   { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); font-weight: var(--fw-bold); gap: var(--sp-1); white-space: nowrap; }
.anr-btn--cb-done:hover { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 4px 12px rgba(22,163,74,.28); }
.anr-done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r);
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-bd);
}

/* ── Kategorie-Pill ─────────────────────────── */
.anr-cat {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  background: var(--z-100); color: var(--z-500); border: 1px solid var(--z-200);
  white-space: nowrap;
}
.anr-cat--blue  { background: var(--b-50);  color: var(--b-700);  border-color: var(--b-200); }
.anr-cat--green { background: var(--ok-bg); color: var(--ok);     border-color: var(--ok-bd); }
.anr-cat--gray  { background: var(--z-100); color: var(--z-500);  border-color: var(--z-200); }

/* ── Lead-Status Pills ───────────────────────── */
.anr-lead-status {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: var(--fw-semibold);
  padding: 3px var(--sp-2); border-radius: var(--r-full); white-space: nowrap;
}
.anr-lead-status--new  { background: var(--warn-bg); color: var(--warn); }
.anr-lead-status--ok   { background: var(--ok-bg);   color: var(--ok); }
.anr-lead-status--lost { background: var(--z-100);   color: var(--z-500); }

/* ── Agent-Badge ─────────────────────────────── */
.anr-agent-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 10px; color: var(--z-500); margin-top: var(--sp-1);
  background: var(--z-100); border-radius: var(--r-sm); padding: 2px 7px; font-weight: var(--fw-medium);
}
.anr-agent-badge [data-lucide] { width: 9px; height: 9px; }

/* ── Pipeline-Zelle ──────────────────────────── */
.anr-pipeline-col    { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.anr-pipeline-budget {
  font-size: var(--text-lg); font-weight: var(--fw-black); color: var(--ok);
  font-family: 'Geist Mono', monospace; letter-spacing: var(--tracking-tight); line-height: var(--leading-none);
}
.anr-pipeline-order {
  font-size: var(--text-xs); color: var(--muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-medium);
  background: var(--z-100); border-radius: var(--r-sm); padding: 2px 7px;
}
.anr-pipeline-order:hover { color: var(--brand); background: var(--brand-dim); }
.anr-pipeline-empty { color: var(--z-300); font-size: var(--text-sm); }

/* ── Datumsgruppen-Trenner ──────────────────── */
.anr-sep-row td { padding: var(--sp-6) var(--sp-6) var(--sp-2); background: transparent; border: none; }
.anr-sep-inner  { display: flex; align-items: center; gap: var(--sp-2); }
.anr-sep-inner::after { content: ''; flex: 1; height: 1px; background: var(--z-200); }
.anr-sep-label  { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--z-500); }

/* ── Erledigen-Dropdown ─────────────────────── */
.anr-resolve-wrap > button {
  background: var(--ok-bg) !important; border-color: var(--ok-bd) !important;
  color: var(--ok) !important; font-weight: var(--fw-bold) !important;
}
.anr-resolve-wrap > button:hover {
  background: var(--ok) !important; border-color: var(--ok) !important;
  color: #fff !important; box-shadow: 0 4px 12px rgba(22,163,74,.25) !important;
}
.anr-resolve-wrap { position: relative; }
.anr-resolve-menu {
  position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 300;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); min-width: 160px; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  backdrop-filter: blur(14px);
}
.anr-resolve-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.anr-resolve-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: 11px var(--sp-4);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink);
  cursor: pointer; width: 100%; background: none; border: none; font-family: inherit;
  text-align: left; transition: background var(--dur-fast) var(--ease-out); letter-spacing: var(--tracking-normal);
}
.anr-resolve-item:hover { background: var(--brand-dim); }
.anr-resolve-item + .anr-resolve-item { border-top: 1px solid var(--line-lt); }

/* ── KI / AI Tokens ─────────────────────────── */
/* Bewusst Indigo als eigene AI-Farbe — getrennt von Brand Blue */
:root {
  --ai:        #6366f1;
  --ai-soft:   rgba(99,102,241,.07);
  --ai-bd:     rgba(99,102,241,.20);
  --ai-strong: rgba(99,102,241,.13);
  --ai-purple: #5b21b6;
  --ai-bg:     rgba(249,247,255,.7);
  --ai-line:   rgba(99,102,241,.10);
}
.anr-ai-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2) 2px var(--sp-1); border-radius: var(--r);
  font-size: 10px; font-weight: var(--fw-semibold); cursor: pointer;
  background: var(--z-50); color: var(--z-500);
  border: 1px solid var(--z-200); white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out); flex-shrink: 0;
  box-shadow: var(--sh-xs);
}
.anr-ai-badge:hover        { background: var(--ai-soft); color: var(--ai); border-color: var(--ai-bd); }
.anr-ai-badge--ready       { background: var(--ai-soft); color: var(--ai); border-color: var(--ai-bd); }
.anr-ai-badge--ready:hover { background: var(--ai-strong); }

.anr-ai-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: 3px var(--sp-2); border-radius: var(--r);
  background: var(--ai-soft); color: var(--ai-purple); border: 1px solid var(--ai-bd); white-space: nowrap;
}
.anr-ai-chip-save {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: var(--sp-1); padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  font-size: 10px; font-weight: var(--fw-bold); font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.anr-ai-chip-save:hover { background: var(--brand-hover); }

.anr-ai-panel {
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 60px;
  background: var(--ai-bg);
  border-bottom: 1px solid var(--ai-line);
}
.anr-ai-header  { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.anr-ai-content { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink); max-width: 800px; }
.anr-ai-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* ── Noise-Toggle Banner ────────────────────── */
.anr-noise-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); color: var(--muted);
  background: var(--surface-panel); border-bottom: 1px solid var(--line-lt);
}
.anr-noise-bar button {
  margin-left: auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--brand);
  background: none; border: none; cursor: pointer; padding: 2px var(--sp-1); font-family: inherit;
  transition: color var(--dur-fast) var(--ease-out);
}
.anr-noise-bar button:hover { color: var(--brand-hover); text-decoration: underline; }

/* ── Responsive KPI Grid ────────────────────── */
@media (max-width: 1300px) { .db-kpi-row { grid-template-columns: repeat(4,1fr) !important; } }
@media (max-width: 800px)  { .db-kpi-row { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 500px)  { .db-kpi-row { grid-template-columns: 1fr 1fr !important; } }


/* ═══════════════════════════════════════════════════════════════════
   ANRUFE — View-Komponenten
   Alle Werte aus 00-tokens.css. Sektionen:
   Keyframes → Loading → Greeting → Command → Sticky → KPI →
   Filter → Cards → Status → Badges → Leer → Drawer → Responsive
   ═══════════════════════════════════════════════════════════════════ */


/* ── Keyframes ────────────────────────────────────────────────────── */

@keyframes anrSkelPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Einlauf: Hero, Side-Cards, Metric-Pills */
@keyframes kpiIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* Einlauf: Call-Cards */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(var(--sp-2)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sync-Dot Puls */
@keyframes syncPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
  60%     { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* Pfeil-Nudge im Leerlauf */
@keyframes arrowNudge {
  0%,70%,100% { transform: translateX(0); }
  85%         { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .anr-card, .kpi-hero, .kpi-side-card, .metric-pill { animation: none !important; }
  .kpi-sync-dot, .kpi-priority-arrow                 { animation: none !important; }
}


/* ── AJAX Loading ─────────────────────────────────────────────────── */

.anr-skel {
  height: var(--sp-10);
  background: linear-gradient(90deg, var(--z-100) 25%, var(--z-50) 50%, var(--z-100) 75%);
  background-size: 200% 100%;
  animation: anrSkelPulse 1.4s ease infinite;
  border-radius: var(--r-xs);
}
#anr-content { transition: opacity var(--dur-fast) var(--ease-out); }
#anr-content.anr-loading { opacity: .35; pointer-events: none; }


/* ── Greeting Zone ────────────────────────────────────────────────── */

.anr-greeting { padding: var(--sp-6) 0 var(--sp-5); }

.anr-greeting-line {
  font-size: var(--text-4xl); font-weight: var(--fw-ultra);
  letter-spacing: var(--tracking-tighter); color: var(--z-950);
  line-height: var(--leading-none); margin: 0;
}
.anr-greeting-ctx {
  margin-top: var(--sp-2); font-size: var(--text-base);
  font-weight: var(--fw-medium); color: var(--z-500);
  line-height: var(--leading-normal);
}
.anr-greeting-ctx strong { font-weight: var(--fw-extrabold); color: var(--warn); }
.anr-greeting-ctx .c-err { font-weight: var(--fw-extrabold); color: var(--err); }


/* ── Command Panel ────────────────────────────────────────────────── */

.calls-command {
  margin: 0 0 var(--sp-4); padding: var(--sp-6);
  border-radius: var(--r-3xl);
  background:
    radial-gradient(circle at 0% 0%, rgba(11,92,255,.08), transparent 400px),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--sh-xl);
}

.command-head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6);
}

.cmd-search-wrap { position: relative; display: flex; align-items: center; }

.cmd-k-badge {
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--z-400);
  font-family: inherit; background: var(--z-100); border: 1px solid var(--z-200);
  border-radius: var(--r-xs); padding: 1px var(--sp-1); pointer-events: none;
  white-space: nowrap; line-height: 1.4; letter-spacing: var(--tracking-wide);
}

.command-search {
  height: 52px; width: 100%; max-width: 480px;
  padding: 0 var(--sp-5) 0 56px; border-radius: var(--r-xl);
  border: 1px solid rgba(15,23,42,.08); background: var(--surface-float);
  box-shadow: var(--sh-md); font-size: var(--text-base);
  font-weight: var(--fw-medium); font-family: inherit; color: var(--z-950);
  outline: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.command-search:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px var(--brand-dim), var(--sh-md);
}
.command-search::placeholder { color: var(--z-400); letter-spacing: var(--tracking-normal); }

.command-toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-shrink: 0; flex-wrap: wrap;
}

.command-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-lg);
  background: var(--surface-float); border: 1px solid rgba(15,23,42,.09);
  color: var(--z-500); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  font-family: inherit; cursor: pointer; white-space: nowrap;
  text-decoration: none; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.command-pill:hover { color: var(--z-900); box-shadow: var(--sh-sm); }
.command-pill:disabled { opacity: .4; cursor: not-allowed; }
.command-pill [data-lucide], .command-pill svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }

/* Split-Button für Aircall Sync */
.anr-sync-split { position: relative; display: inline-flex; flex-shrink: 0; }
.anr-sync-split .anr-sync-main { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: none; }
.anr-sync-split .anr-sync-arrow { border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 0 8px; min-width: 28px; }
.anr-sync-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border: 1px solid rgba(15,23,42,.1); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; z-index: 200; min-width: 180px;
}
.anr-sync-menu.open { display: block; }
.anr-sync-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: none; border-radius: 7px; font-size: 13px; font-weight: 600;
  color: var(--z-700); cursor: pointer; font-family: inherit;
}
.anr-sync-menu button:hover { background: var(--surface-panel); color: var(--z-900); }

.command-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  height: 44px; padding: 0 var(--sp-5);
  background: linear-gradient(180deg, #2f7cff 0%, var(--brand) 100%);
  color: #fff; border: none; border-radius: var(--r-lg);
  font-size: var(--text-sm); font-weight: var(--fw-extrabold); font-family: inherit;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 var(--sp-4) var(--sp-8) var(--brand-shadow);
  transition: opacity var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.command-primary:hover { opacity: .9; box-shadow: 0 var(--sp-5) var(--sp-10) var(--brand-glow); }
.command-primary [data-lucide] { width: 15px !important; height: 15px !important; }


/* ── Sticky Search Bar ────────────────────────────────────────────── */

.anr-sticky-bar {
  position: fixed; top: var(--th); left: var(--sw); right: 0; z-index: 40;
  padding: var(--sp-2) var(--sp-6);
  background: rgba(248,250,252,.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(15,23,42,.06), var(--sh-sm);
  display: flex; align-items: center; gap: var(--sp-3);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.anr-sticky-bar.is-visible { transform: none; opacity: 1; pointer-events: auto; }

.anr-sticky-input {
  height: 34px; flex: 1; max-width: 340px; padding: 0 var(--sp-4);
  border-radius: var(--r-full); border: 1px solid var(--z-200);
  background: var(--surface-card); font-size: var(--text-sm);
  font-family: inherit; color: var(--ink); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.anr-sticky-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

.anr-sticky-chip {
  height: 26px; padding: 0 var(--sp-3); border-radius: var(--r-full);
  background: var(--brand-dim); border: 1px solid var(--brand-border);
  font-size: 11px; font-weight: var(--fw-bold); color: var(--brand);
  display: flex; align-items: center; white-space: nowrap;
}


/* ── KPI Zone ─────────────────────────────────────────────────────── */

.kpi-zone {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) minmax(160px, 1fr);
  gap: var(--sp-4); margin-bottom: var(--sp-4);
}

/* Hero — dominantes dunkelblaues Widget */
.kpi-hero {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6); border-radius: var(--r-2xl);
  background: linear-gradient(140deg, #1d3461 0%, #162949 50%, #112040 100%);
  box-shadow: var(--sh-xl), inset 0 1px 0 rgba(255,255,255,.10);
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
  min-height: 180px;
  animation: kpiIn var(--dur-xslow) var(--ease-out) .04s both;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.kpi-hero::before {
  content: ''; position: absolute; bottom: -35%; right: -8%;
  width: 60%; padding-top: 60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(11,92,255,.22) 0%, transparent 70%);
  pointer-events: none;
}
.kpi-hero:hover { transform: translateY(-2px); box-shadow: 0 40px 90px rgba(11,22,44,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.kpi-hero.active { box-shadow: 0 0 0 2px var(--brand), var(--sh-xl); }

.kpi-status-badge {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: var(--fw-semibold); color: #4ade80;
  letter-spacing: var(--tracking-wide);
}
.kpi-sync-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e; animation: syncPulse 2.4s ease infinite;
}

/* Innen: Links Zahl | Divider | Rechts Metriken */
.kpi-hero-inner {
  display: grid; grid-template-columns: 1fr 1px minmax(130px, auto);
  align-items: center; gap: 0; flex: 1; padding-top: var(--sp-5);
}
.kpi-hero-left { display: flex; flex-direction: column; justify-content: center; padding-right: var(--sp-6); }

.kpi-hero-eyebrow {
  font-size: 9px; font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: rgba(255,255,255,.58); margin-bottom: var(--sp-2);
}
.kpi-hero-number {
  font-size: var(--text-6xl); font-weight: var(--fw-ultra);
  letter-spacing: var(--tracking-tighter); line-height: 1; color: #fff;
}
.kpi-hero-unit {
  display: block; margin-top: var(--sp-1);
  font-size: var(--text-base); font-weight: var(--fw-medium);
  color: rgba(255,255,255,.65);
}
.kpi-hero-vdiv {
  width: 1px; align-self: stretch;
  background: rgba(255,255,255,.14); margin: 0 var(--sp-5);
}
.kpi-hero-right { display: flex; flex-direction: column; gap: var(--sp-2); }

.kpi-hero-metric {
  display: grid; grid-template-columns: 30px 1fr;
  align-items: baseline; gap: var(--sp-2);
}
.kpi-hero-metric-n {
  font-size: var(--text-md); font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight); line-height: 1;
  color: rgba(255,255,255,.70); text-align: right;
}
.kpi-hero-metric-l { font-size: 11px; font-weight: var(--fw-medium); color: rgba(255,255,255,.52); white-space: nowrap; }

/* Heller auf dunklem BG: amber-400 statt warn-600 */
.kpi-hero-metric.warn .kpi-hero-metric-n { color: #fbbf24; }
.kpi-hero-metric.warn .kpi-hero-metric-l { color: rgba(251,191,36,.72); }
.kpi-hero-metric.err  .kpi-hero-metric-n { color: #f87171; }
.kpi-hero-metric.err  .kpi-hero-metric-l { color: rgba(248,113,113,.65); }
.kpi-hero-metric.ok   .kpi-hero-metric-n { color: #86efac; }
.kpi-hero-metric.ok   .kpi-hero-metric-l { color: rgba(134,239,172,.60); }

.kpi-hero-footer {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between;
}
.kpi-hero-priority-label {
  font-size: 9px; font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: rgba(255,255,255,.48);
}
.kpi-hero-priority-action {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: var(--fw-bold); color: rgba(255,255,255,.85);
}
.kpi-priority-arrow {
  color: #7eb4ff; font-size: var(--text-base);
  animation: arrowNudge 3.5s ease infinite 2s;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.kpi-hero:hover .kpi-priority-arrow { animation: none; transform: translateX(5px); }

/* Side — 3 Support-Karten */
.kpi-side { display: flex; flex-direction: column; gap: var(--sp-2); }

.kpi-side-card {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl);
  background: var(--surface-float); border: 1px solid rgba(15,23,42,.07);
  box-shadow: var(--sh-xs); text-decoration: none; color: var(--z-500); flex: 1;
  animation: kpiIn var(--dur-slow) var(--ease-out) both;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.kpi-side-card:nth-child(1) { animation-delay: .12s; }
.kpi-side-card:nth-child(2) { animation-delay: .20s; }
.kpi-side-card:nth-child(3) { animation-delay: .28s; }
.kpi-side-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.kpi-side-card.warning:hover { box-shadow: var(--sh-md), 0 0 0 1px var(--warn-bd), 0 8px 24px rgba(217,119,6,.14); }
.kpi-side-card.danger:hover  { box-shadow: var(--sh-md), 0 0 0 1px var(--err-bd),  0 8px 24px rgba(220,38,38,.12); }
.kpi-side-card.orange:hover  { box-shadow: var(--sh-md), 0 0 0 1px rgba(194,65,12,.25), 0 8px 24px rgba(194,65,12,.11); }
.kpi-side-card.active { box-shadow: 0 0 0 2px var(--brand), var(--sh-xs); color: var(--brand); }
.kpi-side-card.active strong { color: var(--brand); }
.kpi-side-card strong {
  display: block; font-size: var(--text-3xl); font-weight: var(--fw-ultra);
  letter-spacing: var(--tracking-tighter); line-height: 1; color: var(--z-950);
}
.kpi-side-card span {
  display: block; margin-top: 2px; font-size: var(--text-xs);
  font-weight: var(--fw-extrabold); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); color: var(--z-400);
}
.kpi-side-card.warning strong { color: var(--warn); }
.kpi-side-card.warning span   { color: var(--warn); opacity: .8; }
.kpi-side-card.danger  strong { color: var(--err); }
.kpi-side-card.danger  span   { color: var(--err); opacity: .8; }
.kpi-side-card.orange  strong { color: #c2410c; }
.kpi-side-card.orange  span   { color: #c2410c; opacity: .8; }

/* Metric Rail */
.metric-rail { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }

.metric-pill {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-3);
  border-radius: var(--r-full); background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.07); font-size: var(--text-sm);
  font-weight: var(--fw-bold); color: var(--z-600); text-decoration: none;
  cursor: pointer; white-space: nowrap;
  animation: kpiIn var(--dur-slow) var(--ease-out) both;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.metric-pill:nth-child(1) { animation-delay: .36s; }
.metric-pill:nth-child(2) { animation-delay: .42s; }
.metric-pill:nth-child(3) { animation-delay: .48s; }
.metric-pill b { font-size: var(--text-md); font-weight: var(--fw-black); color: var(--z-900); margin-right: var(--sp-1); letter-spacing: var(--tracking-tight); }
.metric-pill:hover { background: var(--surface-float); box-shadow: var(--sh-sm); }
.metric-pill.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand); }
.metric-pill.active b { color: var(--brand); }
.metric-pill.violet   { color: #4338ca; }
.metric-pill.violet b { color: #635bff; }
.metric-pill.green    { color: #065f46; }
.metric-pill.green  b { color: var(--ok); }


/* ── Filter Row ───────────────────────────────────────────────────── */

.filter-row {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding-top: var(--sp-3); border-top: 1px solid rgba(15,23,42,.06);
  background: transparent; margin: 0;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 34px; padding: 0 var(--sp-3) 0 var(--sp-2); border-radius: var(--r-full);
  background: rgba(255,255,255,.6); border: 1px solid rgba(15,23,42,.07);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--z-600);
  cursor: pointer; transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.filter-chip:hover { background: var(--surface-float); box-shadow: var(--sh-xs); }
.filter-chip.active { background: var(--brand-dim); border-color: var(--brand-border); color: var(--brand); }
.filter-chip [data-lucide], .filter-chip svg.lucide { width: 12px !important; height: 12px !important; color: var(--z-400); flex-shrink: 0; }
.filter-chip.active [data-lucide] { color: var(--brand); }

.filter-chip-sel {
  border: none; background: transparent;
  font-size: var(--text-sm); font-weight: var(--fw-semibold); font-family: inherit;
  color: inherit; cursor: pointer; outline: none; padding: 0;
  min-width: 80px; max-width: 160px; -webkit-appearance: none; appearance: none;
}
.filter-chip-sel option { font-weight: var(--fw-regular); color: var(--z-700); }

.filter-chip-reset {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 34px; padding: 0 var(--sp-3); border-radius: var(--r-full);
  background: rgba(255,255,255,.6); border: 1px solid rgba(15,23,42,.07);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--z-500);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.filter-chip-reset:hover { background: var(--surface-float); color: var(--z-900); }
.filter-chip-reset [data-lucide] { width: 11px !important; height: 11px !important; }


/* ── Call List ────────────────────────────────────────────────────── */

.calls-list {
  border-radius: var(--r-2xl); background: var(--surface-panel);
  border: 1px solid rgba(15,23,42,.07); box-shadow: var(--sh-md); padding: var(--sp-1);
}
.calls-list .anr-card { box-shadow: none; border-color: rgba(15,23,42,.05); }
.calls-list .anr-card:hover { box-shadow: var(--sh); }
.anr-table-card { padding: var(--sp-1); overflow: visible !important; background: transparent !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }
.anr-call-list { display: flex; flex-direction: column; gap: var(--sp-1); }

/* Call Card — Timeline (flat rows, card on hover) */
.anr-card {
  background: transparent; border: none;
  border-bottom: 1px solid rgba(15,23,42,.055);
  border-radius: 0; padding: 12px 20px;
  display: grid; grid-template-columns: 72px 1.2fr 1fr 210px;
  gap: 12px; align-items: center; min-height: 60px;
  cursor: pointer; position: relative; box-shadow: none;
  animation: none;
  transition: background .13s ease, box-shadow .16s ease, border-radius .16s ease, transform .16s ease;
}
.anr-card:hover {
  background: #ffffff; border-color: rgba(15,23,42,.07);
  border-radius: 12px;
  box-shadow: 0 4px 22px rgba(15,23,42,.09), 0 1px 4px rgba(15,23,42,.04);
  transform: translateY(-1px); z-index: 2; position: relative;
}

/* Noise: spam / verwählt / intern — kompakt, gedimmt, kein Lift */
.anr-card--noise {
  opacity: 1;
  min-height: 52px; padding: 9px var(--sp-5);
  background: var(--z-50);
  grid-template-columns: 88px 1fr 180px;
}
.anr-card--noise .anr-col-insight { display: none; }
.anr-card--noise .anr-col-time .anr-time-hm { font-size: var(--text-base) !important; font-weight: var(--fw-semibold) !important; color: var(--z-400) !important; }
.anr-card--noise .anr-col-time .anr-time-dur { display: none; }
.anr-card--noise .anr-caller-name,
.anr-card--noise .anr-caller-unknown { color: var(--z-400) !important; font-weight: var(--fw-medium) !important; font-size: var(--text-sm) !important; }
.anr-card--noise .anr-caller-phone { color: var(--z-300) !important; font-size: 11px !important; }
.anr-card--noise .anr-caller-meta { display: none; }
.anr-card--noise .anr-actions { display: none; }
.anr-card--noise:hover { background: var(--z-100); box-shadow: var(--sh-xs); transform: none; z-index: auto; opacity: 1; }
.anr-card--noise:hover .anr-col-time .anr-time-hm { color: var(--z-700) !important; }
.anr-card--noise:hover .anr-caller-name,
.anr-card--noise:hover .anr-caller-unknown { color: var(--z-700) !important; }
.anr-card--noise:hover .anr-caller-phone { color: var(--z-500) !important; }
.anr-card--noise:hover .anr-actions { display: flex; }

/* Missed call */
.anr-card[data-missed="1"] { background: rgba(254,226,226,.32); }
.anr-card[data-missed="1"]:hover { background: #fff6f6; box-shadow: 0 4px 22px rgba(15,23,42,.09); border-radius: 12px; transform: translateY(-1px); z-index: 2; position: relative; }

/* Callback offen */
.anr-card[data-cb="1"] { background: rgba(253,230,138,.16); }
.anr-card[data-cb="1"]:hover { background: #fffdf0; box-shadow: 0 4px 22px rgba(15,23,42,.09); border-radius: 12px; transform: translateY(-1px); z-index: 2; position: relative; }

.anr-sep {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-1) var(--sp-1); font-size: var(--text-xs);
  font-weight: var(--fw-extrabold); color: var(--z-400);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.anr-sep [data-lucide] { width: 12px !important; height: 12px !important; }

/* Spalte 1: Zeit + Richtungs-Dot */
.anr-col-time { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-shrink: 0; }
.anr-col-time .anr-dir-dot { width: var(--sp-8) !important; height: var(--sp-8) !important; border-radius: var(--r-md) !important; margin-bottom: var(--sp-1); }
.anr-col-time .anr-dir-dot [data-lucide] { width: 15px !important; height: 15px !important; }
.anr-time-hm { font-size: 13px; font-weight: 500; font-family: inherit; letter-spacing: 0; color: #64748b; line-height: 1; }
.anr-time-dur { font-size: 11px; font-weight: 400; color: #94a3b8; font-family: inherit; margin-top: 2px; }
.anr-time-date { font-size: 10px; color: var(--z-400); font-weight: var(--fw-medium); }

.anr-dir-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-md); flex-shrink: 0; }
.anr-dir-dot [data-lucide] { width: 15px !important; height: 15px !important; }
.anr-dir-dot--in     { background: var(--ok-bg);  color: var(--ok); }
.anr-dir-dot--out    { background: var(--b-50);   color: var(--b-600); }
.anr-dir-dot--missed { background: var(--err-bg); color: var(--err); }

/* Spalte 2: Anrufer */
.anr-col-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.anr-caller-name { display: flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-bold); font-size: var(--text-base); color: var(--z-900); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); text-decoration: none; white-space: nowrap; overflow: hidden; }
.anr-caller-name:hover { color: var(--brand); }
.anr-card .anr-caller-name { font-size: 14.5px !important; font-weight: 700 !important; color: #0f172a !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: var(--sp-1) !important; line-height: 1.3 !important; letter-spacing: -.02em !important; white-space: normal !important; overflow: visible !important; }
.anr-card .anr-caller-name:hover { color: var(--brand) !important; }

.anr-caller-unknown { font-size: var(--text-sm); color: var(--z-400); display: flex; align-items: center; gap: var(--sp-1); }
.anr-card .anr-caller-unknown { font-size: 14.5px !important; font-weight: 700 !important; color: #64748b !important; display: flex !important; align-items: center !important; gap: var(--sp-1) !important; font-style: normal !important; }

.anr-caller-phone { display: block; font-size: var(--text-sm); color: var(--z-600); font-weight: var(--fw-semibold); margin-top: 2px; text-decoration: none; }
.anr-caller-phone:hover { color: var(--brand); }
.anr-card .anr-caller-phone { font-size: 12px !important; font-weight: 400 !important; font-family: inherit !important; color: #64748b !important; text-decoration: none !important; display: block !important; letter-spacing: 0 !important; margin-top: 2px !important; }
.anr-card .anr-caller-phone:hover { color: var(--brand) !important; }

.anr-caller-meta { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-1); }
.anr-caller-company, .anr-caller-agent { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--z-500); font-weight: var(--fw-medium); }
.anr-caller-company [data-lucide], .anr-caller-agent [data-lucide] { width: 10px !important; height: 10px !important; }

.anr-repeat-inline { display: inline-flex; align-items: center; justify-content: center; background: var(--z-100); color: var(--z-600); border: 1px solid var(--z-200); border-radius: var(--r-xs); font-size: 10px; font-weight: var(--fw-extrabold); font-family: 'Geist Mono',monospace; padding: 1px var(--sp-1); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--tr-fast); line-height: 1.4; }
.anr-repeat-inline:hover { background: var(--brand-dim); color: var(--brand); border-color: var(--brand-border); }

.anr-assign-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--z-500); background: var(--z-50); border: 1px solid var(--z-200); border-radius: var(--r-xs); padding: 2px var(--sp-1); cursor: pointer; font-family: inherit; transition: all var(--tr-fast); }
.anr-assign-btn:hover { background: var(--brand-dim); color: var(--brand); border-color: var(--brand-border); }
.anr-assign-btn [data-lucide] { width: 10px !important; height: 10px !important; }

/* Spalte 3: KI / Notiz */
.anr-col-insight { min-width: 0; }
.anr-insight-ai { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: #f4f3ff; border: 1px solid #e9e8ff; font-size: var(--text-sm); color: var(--z-700); line-height: var(--leading-snug); }
.anr-insight-ai--pending { background: var(--z-50); border-color: var(--z-200); }
.anr-ai-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px var(--sp-1); border-radius: var(--r-xs); flex-shrink: 0; background: #635bff; color: #fff; font-size: 10px; font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-wide); line-height: 1.4; margin-top: 1px; }
.anr-ai-badge--pending { background: var(--z-300); }
.anr-insight-text  { flex: 1; min-width: 0; }
.anr-insight-notes { font-size: var(--text-sm); color: var(--z-500); line-height: var(--leading-snug); padding: 2px 0; }
.anr-cell-notes { max-width: 220px; }
.anr-notes-wrap { display: flex; align-items: flex-start; gap: var(--sp-1); }
.anr-notes-body { flex: 1; min-width: 0; }
.anr-notes-text { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--z-600); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.anr-notes-empty { color: var(--z-300); font-size: var(--text-sm); }
.anr-notes-cb { font-size: 10.5px; color: var(--warn); font-weight: var(--fw-bold); margin-top: var(--sp-1); display: inline-flex; align-items: center; gap: 3px; background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--r-xs); padding: 2px var(--sp-1); }
.anr-notes-cb [data-lucide] { width: 10px !important; height: 10px !important; }

/* Spalte 4: Status + Aktionen */
.anr-col-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.anr-card-badges { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; }
.anr-col-right .anr-actions { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; opacity: 1 !important; }


/* ── Status Pills ─────────────────────────────────────────────────── */

.anr-status { display: inline-flex !important; align-items: center !important; gap: var(--sp-1) !important; font-size: var(--text-xs) !important; font-weight: var(--fw-bold) !important; white-space: nowrap !important; padding: 4px var(--sp-2) !important; border-radius: var(--r-full) !important; letter-spacing: -.01em !important; }
.anr-status--done     { background: var(--ok-bg) !important;   color: var(--ok)    !important; }
.anr-status--callback { background: var(--warn-bg) !important; color: var(--warn)  !important; }
.anr-status--missed   { background: var(--err-bg) !important;  color: var(--err)   !important; }
.anr-status--open     { background: var(--z-100) !important;   color: var(--z-600) !important; }
.anr-status--noise    { background: var(--z-100) !important;   color: var(--z-400) !important; font-style: italic !important; }
.anr-status--done     .anr-status-dot { background: var(--ok) !important; }
.anr-status--callback .anr-status-dot { background: var(--warn) !important; }
.anr-status--missed   .anr-status-dot { background: var(--err) !important; }
.anr-status--open     .anr-status-dot { background: var(--z-400) !important; }
.anr-status--noise    .anr-status-dot { background: var(--z-300) !important; }


/* ── Badges & KI-Pills ────────────────────────────────────────────── */

.anr-badge--angry    { background: var(--err-bg);  color: var(--err);  border-color: var(--err-bd); }
.anr-badge--urgent   { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.anr-badge--positive { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-bd); }
.anr-brand-pill { display: inline-block; margin-left: var(--sp-1); vertical-align: middle; }
.anr-brand-pill .anr-cat { font-size: 10px !important; padding: 2px 7px !important; }
.anr-ki-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--ai, #6366f1); color: #fff; font-weight: var(--fw-extrabold); flex-shrink: 0; line-height: 1; }
.anr-ki-pill--xs { width: 12px; height: 12px; border-radius: 2px; font-size: 7px; }
.anr-ki-pill--sm { width: 15px; height: 15px; border-radius: 3px; font-size: 8px; }
.anr-ki-pill--md { width: 22px; height: 22px; border-radius: var(--r-xs); font-size: 10px; }


/* ── Leer-Zustand ─────────────────────────────────────────────────── */

.anr-empty       { text-align: center; padding: var(--sp-16) var(--sp-6); }
.anr-empty-icon  { margin-bottom: var(--sp-4); color: var(--z-200); }
.anr-empty-icon [data-lucide], .anr-empty-icon svg.lucide { width: 44px !important; height: 44px !important; }
.anr-empty-title { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--z-700); margin: 0 0 var(--sp-1); }
.anr-empty-sub   { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--sp-5); }


/* ── AI-Panel & Verlauf ───────────────────────────────────────────── */

.anr-ai-expand { display: none; }
.anr-ai-expand td { padding: 0 !important; }
.anr-ai-header-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ai, #6366f1); }
.anr-ai-header-time  { font-size: var(--text-xs); color: var(--muted); margin-left: var(--sp-1); }
.anr-ai-loading      { color: var(--muted); font-style: italic; }
.anr-ai-chips-row    { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.anr-history-container { display: none; }
.anr-hist-loading      { color: var(--muted); font-size: 11.5px; padding: var(--sp-2) var(--sp-5); }

.anr-resolve-item--gray  [data-lucide] { color: var(--z-400); }
.anr-resolve-item--red   [data-lucide] { color: var(--err); }
.anr-resolve-item--ai    [data-lucide] { color: var(--ai, #6366f1); }
.anr-resolve-item--green [data-lucide] { color: var(--ok, #16a34a); }
.anr-resolve-item--blue  [data-lucide] { color: #3b82f6; }
.anr-resolve-menu-sep { height: 1px; background: var(--line-lt); margin: 4px 0; }
.anr-resolve-wrap > button.anr-btn { background: var(--ok-bg) !important; border: 1.5px solid var(--ok-bd) !important; color: var(--ok) !important; font-weight: var(--fw-bold) !important; letter-spacing: -.01em !important; }
.anr-resolve-wrap > button.anr-btn:hover { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(22,163,74,.28) !important; }

.anr-result-bar { padding: var(--sp-2) var(--sp-5); font-size: var(--text-sm); color: var(--muted); border-top: 1px solid var(--line-lt); display: flex; align-items: center; gap: var(--sp-2); }
.anr-result-bar b { color: var(--ink); }
.anr-result-reset { color: var(--brand); margin-left: var(--sp-1); }

.anr-stats { margin-top: var(--sp-5); }
.anr-stats-card { padding: 0; overflow: hidden; }
.anr-stats-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-lt); }
.anr-stats-title  { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); letter-spacing: var(--tracking-tight); }
.anr-stats-period { margin-left: auto; font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-medium); }
.anr-stats-body   { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.anr-stat-row     { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.anr-stat-label   { width: 150px; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--z-600); flex-shrink: 0; }
.anr-stat-bar-wrap { flex: 1; height: 6px; background: var(--z-100); border-radius: var(--r-full); overflow: hidden; }
.anr-stat-bar     { height: 100%; border-radius: var(--r-full); transition: width .4s ease; }
.anr-stat-bar--accent { background: var(--brand); }
.anr-stat-bar--muted  { background: var(--z-300); }
.anr-stat-count   { font-size: var(--text-sm); font-weight: var(--fw-bold); font-family: 'Geist Mono', monospace; width: 24px; text-align: right; flex-shrink: 0; }
.anr-stat-count--accent { color: var(--ink); }
.anr-stat-count--muted  { color: var(--muted); }


/* ── Drawer ───────────────────────────────────────────────────────── */

.anr-drawer { position: fixed; top: var(--th, 54px); right: 0; bottom: 0; width: 440px; max-width: 95vw; background: var(--surface-card); border-left: 1px solid var(--z-200); box-shadow: -4px 0 28px rgba(0,0,0,.14); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-in-out); z-index: 900; overflow-y: auto; display: flex; flex-direction: column; }
.anr-drawer.open { transform: translateX(0); }
.anr-drawer-overlay { position: fixed; inset: 0; z-index: 899; background: rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity var(--dur); }
.anr-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.anr-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--z-100); position: sticky; top: 0; background: var(--surface-card); z-index: 1; flex-shrink: 0; }
.anr-drawer-caller { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--ink); }
.anr-drawer-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--z-200); border-radius: var(--r); background: transparent; cursor: pointer; color: var(--z-400); flex-shrink: 0; transition: background var(--dur-fast), color var(--dur-fast); }
.anr-drawer-close:hover { background: var(--z-100); color: var(--ink); }
.anr-drawer-close [data-lucide] { width: 14px !important; height: 14px !important; }
.anr-drawer-body    { padding: var(--sp-4); flex: 1; }
.anr-drawer-section { margin-bottom: var(--sp-5); }
.anr-drawer-section-title { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--z-400); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--sp-2); }
.anr-drawer-section-title [data-lucide] { width: 11px !important; height: 11px !important; }
.anr-drawer-loading    { font-size: var(--text-sm); color: var(--z-400); padding: var(--sp-5) 0; text-align: center; }
.anr-drawer-meta-row   { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.anr-drawer-meta-name  { font-size: var(--text-xl); font-weight: var(--fw-extrabold); color: var(--ink); letter-spacing: var(--tracking-tight); }
.anr-drawer-meta-phone { font-size: var(--text-base); font-family: 'Geist Mono',monospace; font-weight: var(--fw-semibold); color: var(--z-500); }
.anr-drawer-meta-row .anr-caller-meta { margin-top: var(--sp-1); }
.anr-drawer-time-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.anr-drawer-ai-text    { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--z-700); white-space: pre-wrap; }
.anr-drawer-ai-chips   { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); }
.anr-drawer-ai-actions { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); flex-wrap: wrap; }

.anr-drawer-transfer { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: var(--z-600); margin-bottom: var(--sp-2); }
.anr-drawer-transfer [data-lucide] { width: 13px !important; height: 13px !important; color: var(--z-400); }
.anr-drawer-transfer strong { color: var(--z-900); font-weight: var(--fw-semibold); }
.anr-drawer-voicemail { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--brand); text-decoration: none; }
.anr-drawer-voicemail:hover { text-decoration: underline; }
.anr-drawer-voicemail [data-lucide] { width: 13px !important; height: 13px !important; }


/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1200px) { .command-search { max-width: 340px; } }

@media (max-width: 991px) {
  .anr-card { display: block !important; min-height: auto; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl); }
  .anr-col-time { display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .anr-col-time .anr-dir-dot { margin-bottom: 0 !important; }
  .anr-col-time .anr-time-date { margin-left: auto; }
  .anr-col-person  { margin-bottom: var(--sp-2); }
  .anr-col-insight { margin-bottom: var(--sp-2); }
  .anr-col-right { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: var(--sp-1) !important; }
  .anr-col-right .anr-actions { justify-content: flex-start !important; }
  .anr-card .anr-caller-name { font-size: var(--text-base) !important; }
}

@media (max-width: 900px)  { .command-search { max-width: 100%; } }

@media (max-width: 860px) {
  .kpi-zone { grid-template-columns: 1fr; }
  .kpi-side { flex-direction: row; }
  .kpi-side-card strong { font-size: var(--text-2xl); }
  .anr-sticky-bar { left: 0; padding: var(--sp-2) var(--sp-4); }
}

@media (max-width: 850px) {
  .calls-command { padding: var(--sp-4); border-radius: var(--r-2xl); }
  .command-head  { grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
}

@media (max-width: 767px) {
  .filter-row { gap: var(--sp-1); }
  .filter-chip { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filter-chip-sel { min-width: 0; width: 100%; }
  .anr-drawer { width: 100%; max-width: 100%; top: 0; }
}



/* Legacy dsp3 dispatch center styles removed. Active dispatch UI lives in assets/css/dispatch.css. */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — Globale Anpassungen (Punkt 10)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Modals: Slide-Up auf Mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .hos-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .hos-modal {
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    max-height: 92vh;
    width: 100%;
    max-width: 100%;
    animation: hosModalSlideUp var(--dur-slow) var(--ease-out);
  }
  @keyframes hosModalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Drag-Handle oben */
  .hos-modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--z-300);
    border-radius: var(--r-full);
    margin: 10px auto -6px;
    flex-shrink: 0;
  }

  /* Tabs: horizontal scroll statt wrap */
  .hos-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hos-tabs::-webkit-scrollbar { display: none; }
  .hos-tab { flex-shrink: 0; }

  /* Buttons in page-head: volle Breite stacked */
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head-right { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .page-head-right .btn { flex: 1; justify-content: center; min-width: 120px; }

  /* Stat-Grid: 2 Spalten */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

  /* Tables: horizontal scroll */
  .cardx { overflow-x: auto; }
  .table { min-width: 600px; }

  /* KPI Grid: 2 Spalten */
  .db-kpi-grid { grid-template-columns: 1fr 1fr !important; }

  /* Alert-Bars stacken */
  .db-alerts { flex-direction: column; }
  .db-alert   { width: 100%; }
}

/* ── Touch-Targets: mindestens 44px ────────────────────────────────────── */
@media (max-width: 850px) {
  .btn      { min-height: 38px; }
  .btn-sm   { min-height: 34px; }
  .nav-item { min-height: 40px; }
  .hos-tab  { min-height: 38px; }

  /* Kein Hover-Lift auf Touch-Geräten */
  .cardx:hover  { transform: none; }
  .kpi-card:hover { transform: none; }
  .stat-card:hover { box-shadow: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HOS SEARCH — eine minimale Suche fuer Topbar + Listen
   Kein Border-in-Border, kein Kbd-Badge, kein Expand-Theater.
   Struktur: .hos-search > icon + input [+ clear]
   ══════════════════════════════════════════════════════════════════════════ */

.hos-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 280px);
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(11, 13, 12, 0.04);
  box-sizing: border-box;
}

.hos-search:focus-within {
  background: #fff;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--product-primary, #0f766e) 42%, transparent);
}

.hos-search__icon,
.hos-search > svg,
.hos-search > [data-lucide] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--product-muted, #747b76);
  stroke-width: 1.7;
  pointer-events: none;
}

.hos-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--product-ink, #0b0d0c);
}

.hos-search input::placeholder {
  color: var(--product-muted, #747b76);
  font-weight: 500;
}

.hos-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--product-muted, #747b76);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.hos-search__clear[hidden] { display: none !important; }
.hos-search__shortcut {
  display: inline-flex;
  height: 22px;
  align-items: center;
  padding: 0 6px;
  border: 1px solid rgba(17, 24, 20, .09);
  border-radius: 5px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 1px rgba(17,24,20,.03);
  color: #7a8580;
  font: 600 9px/1 'Geist', sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 850px) { .hos-search__shortcut { display: none; } }

.hos-search__clear:hover {
  background: rgba(11, 13, 12, 0.06);
  color: var(--product-ink, #0b0d0c);
}

.hos-search__clear svg {
  width: 11px;
  height: 11px;
  stroke-width: 2;
}

.hos-search--wide {
  width: 100%;
  max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH — Dropdown (Topbar)
   Nur der Wrapper lebt hier (massgebliche Positionierung/Rahmen/Schatten,
   siehe Kommentar in app.css). Die Ergebniszeilen selbst nutzt die aktive
   Suchimplementierung (layout.php, hosGlobalSearch) mit .hsr-*-Klassen,
   gestylt in app.css. Ein frueherer paralleler Renderer mit eigenem
   .hos-sr-*-Markup wurde nie tatsaechlich angezeigt (siehe app.js-Kommentar)
   und ist hier entfernt, nicht nur ueberdeckt.
   ══════════════════════════════════════════════════════════════════════════ */

.hos-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface-float);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 8px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
  z-index: 500;
  max-height: min(620px, calc(100vh - 96px));
  overflow-y: auto;
}


/* ═══════════════════════════════════════════════
   ANRUFE — Timeline v2
   Von Card-Stapel zur Timeline.
   Weniger Boxen · mehr Weißraum · Actions bei Hover.
   Append-Overrides — leicht rückgängig zu machen.
   ═══════════════════════════════════════════════ */

/* List-Container: transparent, kein Card-Look */
.calls-list {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Noise-Banner: jetzt eigenständig, nicht mehr im Container */
.anr-noise-bar {
  background: var(--surface-float);
  border: 1px solid var(--z-100);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}

/* Kein Gap — Trennung durch border-bottom */
.anr-call-list {
  gap: 0;
}

/* Datumsgruppen-Trenner: mehr Weißraum, bündig mit Card-Inhalt */
.anr-sep {
  padding: var(--sp-6) var(--sp-4) var(--sp-2);
}

/* ── Standard-Card → Timeline-Zeile ── */
.anr-card:not(.anr-card--noise) {
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(15,23,42,.06);
  border-radius: 0;
  box-shadow: none;
  padding: 14px var(--sp-4);
  min-height: 72px;
}

/* Hover: weißer Hintergrund, feiner Schatten, runde Ecken */
.anr-card:not(.anr-card--noise):hover {
  background: #fff;
  border-color: rgba(15,23,42,.07);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 18px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
  transform: translateY(-1px);
  z-index: 2;
  position: relative;
}

/* Verpasst: sehr dezentes Rot — keine knallige Box mehr */
.anr-card[data-missed="1"]:not(.anr-card--noise) {
  background: rgba(254,242,242,.55);
  border-bottom-color: rgba(254,202,202,.45);
}
.anr-card[data-missed="1"]:not(.anr-card--noise):hover {
  background: #fff8f8;
  border-color: rgba(254,202,202,.6);
}

/* Rückruf offen: dezentes Amber */
.anr-card[data-cb="1"]:not(.anr-card--noise) {
  background: rgba(255,251,235,.65);
  border-bottom-color: rgba(253,230,138,.45);
}
.anr-card[data-cb="1"]:not(.anr-card--noise):hover {
  background: #fffcf0;
  border-color: rgba(253,230,138,.6);
}

/* Noise-Cards: quasi unsichtbar, kein Eigengewicht */
.anr-card--noise {
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: rgba(15,23,42,.04);
  border-radius: 0;
  box-shadow: none;
}
.anr-card--noise:hover {
  background: var(--z-50);
  border-color: rgba(15,23,42,.05);
  border-radius: var(--r-lg);
  transform: none;
  box-shadow: none;
}

/* ── KI-Insight: kompakt — kein lila Block mehr ── */
/* data-full bleibt im DOM — Drawer liest es weiterhin */
.anr-insight-ai {
  background: transparent;
  border: none;
  padding: 0;
  align-items: center;
  gap: var(--sp-2);
}
.anr-insight-ai .anr-insight-text {
  font-size: var(--text-xs);
  color: var(--z-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: var(--leading-snug);
}
.anr-insight-ai--pending {
  background: transparent;
  border: none;
}
.anr-insight-notes {
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding: 2px 0;
}

/* ── Actions: unsichtbar bis Hover ── */
.anr-card .anr-col-right .anr-actions {
  opacity: 0 !important;
  transition: opacity var(--dur) var(--ease-out);
}
/* Hover — oder Karten die sofortige Aktion erfordern */
.anr-card:hover .anr-col-right .anr-actions,
.anr-card[data-cb="1"] .anr-col-right .anr-actions,
.anr-card[data-missed="1"] .anr-col-right .anr-actions {
  opacity: 1 !important;
}

/* Mobile: Touch hat kein Hover — Actions immer sichtbar */
@media (max-width: 991px) {
  .anr-card .anr-col-right .anr-actions {
    opacity: 1 !important;
  }
}

/* MD utility: reusable phone emphasis for call, lead and customer surfaces */
.md-phone-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.md-phone-link:hover {
  color: #0b5cff !important;
  transform: translateY(-1px);
}

.md-phone-pulse::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .22;
  transform-origin: left center;
  animation: mdPhonePulse 2.8s ease-in-out infinite;
}

@keyframes mdPhonePulse {
  0%, 100% { transform: scaleX(.28); opacity: .16; }
  45% { transform: scaleX(1); opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .md-phone-pulse::after {
    animation: none;
    transform: scaleX(1);
    opacity: .18;
  }
}