/* ─── B2B INDUSTRY CRAWLER STYLES ────────────────────────────────────────────
   CMA – Campera Media Atlas
   24/7 automatischer B2B Lead Crawler UI

   Farben ausschliesslich ueber die Tokens aus style.css. Bis zum 02.09.2026
   trug dieses Stylesheet eine eigene Palette aus einem fremden Framework:
   Indigo-Verlaeufe fuer Knoepfe und Titel, Slate-Grau fuer Nebentext,
   Hellblau fuer Links, und Fallbacks auf Variablen (--surface, --text), die
   es im CRM nie gab. Der alte Kopf, die Branchen-Reiter, das Zwei-Spalten-
   Raster und die Abschnittsrahmen sind seit dem Neuaufbau am 21.08.2026
   ohne Markup und deshalb entfernt.

   Rot ist die Aufnahmelampe: nur die Hauptaktion und die eine Zahl, auf die
   es ankommt, tragen den Akzent. Zustaende laufen ueber --success, --warning
   und --danger; alles andere ist Grau in den Stufen der Textrampe. */

/* ── Knoepfe der ersten Generation ────────────────────────────────────────────
   .cr-btn-run und .cr-btn-secondary leben nur noch im Domain-hinzufuegen-Modal,
   .cr-btn-import und .cr-btn-email in der Leadzeile. Sie sehen aus wie
   .cr-btn / .cr-btn--primary weiter unten, damit die Seite eine Sprache spricht. */

.cr-btn-run {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.cr-btn-run:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.cr-btn-run:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cr-btn-run svg { width: 14px; height: 14px; }

.cr-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.cr-btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
}

.cr-btn-secondary svg { width: 14px; height: 14px; }

.cr-btn-import {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}

.cr-btn-import:hover { background: var(--bg-card-hover); border-color: var(--border-active); }
.cr-btn-import svg { width: 11px; height: 11px; }

.cr-btn-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

.cr-btn-email:hover { background: var(--bg-card-hover); border-color: var(--border-active); color: var(--text-primary); }
.cr-btn-email svg { width: 12px; height: 12px; }

.cr-btn-mini {
  padding: 3px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.cr-btn-mini:hover { background: var(--bg-card-hover); border-color: var(--border-active); }
.cr-btn-mini-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.cr-btn-mini-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ── Stats Row ────────────────────────────────────────────────────────────── */

.cr-stats-row {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  flex-wrap: wrap;
}

.cr-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: 1;
  min-width: 120px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.cr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.cr-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.cr-stat-icon svg { width: 18px; height: 18px; }
/* Die Klassennamen stammen aus der alten Palette und bleiben im Markup;
   ihre Bedeutung: Bestand (neutral), wartend (warning), erledigt (success),
   Leads (der Akzent – die Zahl, um die es geht), importiert (neutral, hell). */
.cr-stat-blue   { background: var(--bg-elevated); color: var(--text-secondary); }
.cr-stat-yellow { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.cr-stat-green  { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.cr-stat-purple { background: var(--accent-dim); color: var(--accent); }
.cr-stat-orange { background: var(--bg-elevated); color: var(--text-primary); }

.cr-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.cr-stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Score-Filter ─────────────────────────────────────────────────────────── */

.cr-score-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.cr-score-filter #cr-score-val {
  color: var(--text-primary);
  font-weight: 600;
}

.cr-score-filter input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
}

/* ── Queue Table ──────────────────────────────────────────────────────────── */

.cr-queue-table { display: flex; flex-direction: column; gap: 2px; }

.cr-queue-thead {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr .6fr .7fr;
  gap: 8px;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.cr-queue-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr .6fr .7fr;
  gap: 8px;
  padding: 8px;
  border-radius: 7px;
  align-items: center;
  transition: background .15s;
  font-size: 0.95rem;
}

.cr-queue-row:hover { background: var(--bg-card-hover); }
.cr-queue-done    { opacity: .65; }
.cr-queue-failed  { border-left: 2px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.cr-queue-crawling { border-left: 2px solid color-mix(in srgb, var(--warning) 45%, transparent); }

.cr-queue-firm { display: flex; flex-direction: column; gap: 1px; }
.cr-queue-company { font-weight: 600; color: var(--text-primary); }
.cr-queue-domain { font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; }
.cr-queue-domain:hover { color: var(--text-primary); text-decoration: underline; }
.cr-queue-note { font-size: 0.8rem; color: var(--text-muted); }
.cr-queue-ind { font-size: 0.85rem; color: var(--text-secondary); }
.cr-queue-status { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.cr-queue-emails { font-size: 0.95rem; color: var(--text-primary); }
.cr-queue-actions { display: flex; gap: 4px; }

.cr-done-badge {
  padding: 1px 5px;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── Enrichments ──────────────────────────────────────────────────────────── */

.cr-enrichment-table { display: flex; flex-direction: column; gap: 4px; }

.cr-enrichment-row {
  display: grid;
  grid-template-columns: 18px 32px 1fr auto auto;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  align-items: center;
  transition: background .15s;
  font-size: 0.95rem;
}

.cr-enrichment-row:hover { background: var(--bg-card-hover); }
.cr-enrichment-row.is-verworfen { opacity: .55; }
.cr-btn:disabled { opacity: .4; cursor: not-allowed; }
.cr-im-crm {
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
  padding: 4px 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
}
.cr-enrichment-row.is-verworfen:hover { opacity: 1; }
.cr-badge-verworfen {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-secondary); border: 1px solid var(--border);
}

.cr-enr-avatar {
  width: 32px;
  height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.cr-enr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cr-enr-email {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.95rem;
}

.cr-enr-email a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-enr-email a:hover { text-decoration: underline; }

.cr-verified {
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 700;
}

.cr-enr-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.cr-enr-ind {
  padding: 1px 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.cr-enr-ai {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Kennzeichen liegen nebeneinander, nicht übereinander. Als schmale Säule
   gestapelt drängten sie sich am rechten Rand zusammen, während in der Mitte
   der Zeile Platz frei blieb. */
.cr-enr-badges {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; gap: 4px; max-width: 340px; flex-shrink: 0;
}

.cr-enr-actions { display: flex; gap: 5px; flex-shrink: 0; }

/* ── Score Badge ──────────────────────────────────────────────────────────── */

.cr-score {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
}

.cr-score-na { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Source Badge ─────────────────────────────────────────────────────────── */
/* Herkunft einer Adresse. Belegt (Hunter, Website, Google) ist gruen,
   abgeleitet (Entscheider) neutral, erzeugt (Muster) gelb – dieselbe Skala
   wie .cr-beleg in style.css. */

.cr-source-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.cr-src-hunter,
.cr-src-crawler,
.cr-src-crawl,
.cr-src-serper { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.cr-src-pattern { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); }

/* ── Runs Section ─────────────────────────────────────────────────────────── */

.cr-runs-list { display: flex; flex-direction: column; gap: 4px; }

.cr-run-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 0.78rem;
  transition: background .15s;
  flex-wrap: wrap;
}

.cr-run-row:hover { background: var(--bg-card-hover); }
.cr-run-done  { border-left: 2px solid color-mix(in srgb, var(--success) 45%, transparent); }
.cr-run-error { border-left: 2px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.cr-run-running { border-left: 2px solid color-mix(in srgb, var(--warning) 45%, transparent); }

.cr-run-id    { font-weight: 600; flex-shrink: 0; }
.cr-run-time  { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }
.cr-run-stat  { color: var(--text-secondary); font-size: 0.9rem; }
.cr-run-mode  { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); padding: 1px 6px; background: var(--bg-elevated); border-radius: 4px; }

.cr-run-clickable { cursor: pointer; }
.cr-run-clickable:hover { background: var(--bg-card-hover) !important; }
.cr-run-chevron { font-size: 1.1rem; opacity: .35; flex-shrink: 0; transition: opacity .15s, transform .15s; }
.cr-run-clickable:hover .cr-run-chevron { opacity: .7; transform: translateX(2px); }

.cr-empty-runs {
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 8px 0;
  font-style: italic;
}

/* ── Empty & Error ────────────────────────────────────────────────────────── */

.cr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}

.cr-empty p { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin: 0; }
.cr-empty span { font-size: 0.9rem; color: var(--text-muted); }

.cr-error {
  padding: 12px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 0.95rem;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */

.cr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .2s ease;
}

.cr-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 560px;
  max-width: 95vw;
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
  overflow: hidden;
}

.cr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.cr-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary); }

.cr-modal-close {
  width: 28px;
  height: 28px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all .15s;
}

.cr-modal-close:hover { background: var(--accent-dim); border-color: var(--accent-border); color: var(--text-primary); }

.cr-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cr-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cr-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
}

.cr-field-sm { flex: 0 0 100px; min-width: 80px; }

.cr-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cr-field input,
.cr-field select {
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}

.cr-field select option { background: var(--bg-card); color: var(--text-primary); }

.cr-field input:focus,
.cr-field select:focus {
  outline: none;
  border-color: var(--border-active);
}

/* ── Enrichment count badge ─────────────────────────────────────────────── */
.cr-enrichment-count {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-d);
  margin-bottom: 6px;
}

/* ── Priority & Source Badges ─────────────────────────────────────────────── */
.cr-queue-domain-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.cr-prio-badge {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.cr-prio-high { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }
.cr-prio-mid  { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent); }
.cr-prio-low  { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }

.cr-src-badge {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.cr-src-manual { color: var(--text-primary); }

/* ── Full Name in Lead Cards ──────────────────────────────────────────────── */
.cr-enr-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-enr-position { color: var(--text-secondary); }

.cr-enr-dept {
  padding: 1px 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ── LinkedIn Button ──────────────────────────────────────────────────────── */
.cr-linkedin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.cr-linkedin-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* ══ Crawler, Neuaufbau 21.08.2026 ═══════════════════════════════════════════
   Vorher stand alles in einem Raster aus zwei gleich breiten Spalten:
   Warteschlange links, Leads rechts. Die Leadliste bekam damit rund 380 Pixel
   und war mit Filterleiste und Übersichtskacheln nicht mehr zu bedienen – der
   Inhalt lief links und rechts aus dem Kasten heraus.

   Jetzt drei Bereiche mit je voller Breite, umschaltbar über Reiter. Farben
   ausschließlich über die Tokens aus style.css, keine festen Hexwerte, keine
   Emojis. */

.cr-page { padding: 0 24px 32px; }

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.cr-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 24px 0 20px;
}
.cr-h1 {
  font-family: var(--font-serif); font-size: 30px; font-weight: 400;
  letter-spacing: -.01em; color: var(--text-primary); line-height: 1.1;
}
.cr-sub { font-size: 15px; color: var(--text-secondary); margin-top: 4px; }
.cr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.cr-btn {
  font: 500 13px/1 var(--font-body);
  padding: 9px 14px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease);
  white-space: nowrap;
}
.cr-btn:hover { background: var(--bg-card-hover); border-color: var(--border-active); }
/* Symbolgroesse. Ohne sie faellt ein SVG mit viewBox, aber ohne Breite und
   Hoehe auf die CSS-Standardgroesse fuer ersetzte Elemente zurueck: 300x150.
   Genau das passierte am 24.08.2026 mit "Crawler starten" – das Markup traegt
   kein Symbol, erst manualRun() schreibt eines hinein, und der Button wuchs
   beim Klick zum Klotz. Die aelteren Geschwisterklassen .cr-btn-run,
   .cr-btn-secondary und .cr-btn-import-all haben diese Regel laengst; beim
   Umbau auf .cr-btn ist sie liegengeblieben.
   inline-flex und gap ersetzen zugleich die Leerzeichen, mit denen die
   JS-Zeichenketten den Abstand zum Text behelfsmaessig herstellten. */
/* Herkunft eines Entscheiders, wenn sie ausserhalb des deutschsprachigen
   Raums liegt. Kein Warnzeichen - der Kontakt ist erwuenscht, er wird nur auf
   Englisch angeschrieben. Deshalb dieselbe ruhige Optik wie beim Score. */
.cr-dec-land {
  font: 600 10px/1 var(--font-body); letter-spacing: .04em;
  padding: 2px 5px; border-radius: 3px; vertical-align: middle;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.cr-btn { display: inline-flex; align-items: center; gap: 6px; }
.cr-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cr-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cr-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cr-btn--sm { padding: 7px 11px; font-size: 14px; }

/* ── Kennzahlen ───────────────────────────────────────────────────────────── */
.cr-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 22px;
}

/* ── Reiter ───────────────────────────────────────────────────────────────── */
.cr-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.cr-tab {
  font: 500 13px/1 var(--font-body);
  padding: 11px 16px; background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .12s var(--ease);
}
.cr-tab:hover { color: var(--text-primary); }
.cr-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }

.cr-panel[hidden] { display: none; }

/* ── Werkzeugleiste ───────────────────────────────────────────────────────── */
.cr-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 0 16px;
}
.cr-toolbar-spacer { flex: 1 1 auto; }
.cr-input {
  font: 400 12px/1 var(--font-body);
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); cursor: pointer; min-width: 0;
}
.cr-input:focus { outline: none; border-color: var(--border-active); }
.cr-input--grow { flex: 1 1 220px; cursor: text; }
.cr-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}

/* ── Übersichtskacheln ────────────────────────────────────────────────────────
   Sechs Zahlen, die den Bestand nach den zwei Achsen aufteilen, die tatsächlich
   trennen: wurde die Adresse je gesehen, und ist sie an eine Person gerichtet.
   Jede Kachel ist ein Filter. */
.cr-kachel-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.cr-kachel {
  background: color-mix(in srgb, var(--k) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--k) 26%, transparent);
  border-radius: var(--radius-sm); padding: 12px 14px; text-align: left;
  cursor: pointer; font: inherit;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.cr-kachel:hover { background: color-mix(in srgb, var(--k) 16%, transparent); }
.cr-kachel-aktiv { border-color: var(--k); box-shadow: inset 0 0 0 1px var(--k); }
.cr-kachel-zahl { font-family: var(--font-serif); font-size: 26px; color: var(--k); line-height: 1; }
.cr-kachel-text { font-size: 13px; color: var(--text-secondary); margin-top: 5px; }
.cr-kachel-fuss { font-size: 13px; color: var(--text-muted); padding-bottom: 4px; }

.cr-beleg-badge {
  font-size: 12px; font-weight: 600; padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}

/* ── Empfängerland ────────────────────────────────────────────────────────── */
/* Grundzustand ist ruhig: die meisten Zeilen sind unauffällig, damit die
   fünf strengen Länder überhaupt auffallen können. */
.cr-land-badge {
  font-size: 12px; font-weight: 600; padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.cr-land-badge--opt_out {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.cr-land-badge--gemischt,
.cr-land-badge--opt_in {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

/* AT, IT, PL, DK, SA – eigenes Register oder spürbare Durchsetzung. */
.cr-land-badge--streng {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Listen ───────────────────────────────────────────────────────────────── */
.cr-list { min-height: 200px; }
.cr-loading { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 15px; }

@media (max-width: 720px) {
  .cr-page { padding: 0 14px 24px; }
  .cr-head { padding: 18px 0 14px; }
  .cr-h1 { font-size: 26px; }

  /* Am Telefon (gesehen 22.09.2026, iPhone) scrollte die ganze Seite seitwaerts: sechs
     Reiter nebeneinander sind breiter als das Geraet, und in den Rastertabellen schob
     eine lange Adresse die Spalten auseinander. Jetzt scrollt jeweils das Element fuer
     sich, die Seite steht still - und keine Spalte wird versteckt. */
  .cr-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cr-tabs::-webkit-scrollbar { display: none; }
  .cr-tab { flex: 0 0 auto; }

  .cr-queue-table, .cr-enrichment-table { overflow-x: auto; }
  .cr-queue-thead, .cr-queue-row { min-width: 560px; }
  .cr-enrichment-row { min-width: 480px; }
  .cr-queue-row > *, .cr-queue-thead > *, .cr-enrichment-row > * { min-width: 0; }
}

.cr-status-wort { font-size: 14px; color: var(--text-secondary); }