/* LeadRadar - CM-Designsystem
   Uebernommen aus dem AdsRadar-Mockup (docs/mockup/adsradar-mockup.html des
   Schwesterprojekts ads-automation): Sora/DM Sans, Pink #e91e63, datendichtes
   Tabellen-Layout, Feather-SVG-Icons.

   Hausregel: keine externen CDNs. Sora und DM Sans liegen deshalb selbst
   gehostet unter assets/fonts/ (woff2, variabel) - der Mockup laedt sie nur
   zur Ansicht von Google Fonts. Der Fallback-Stack greift, falls eine
   Schriftdatei fehlt.

   Klassennamen: die bestehenden Hooks der PHP-Seiten (.card, .tabelle,
   .badge--*, .chip, .hinweis, .karten-meta, .fehler, .fortschritt__*) bleiben
   erhalten und sind hier neu eingekleidet - die Badge-Klassen kommen aus
   lib/Format.php und sind dort testgesichert, sie duerfen sich nicht aendern. */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Marken-Variablen ---------- */
:root {
  --pink: #e91e63;
  --pink-light: #fde7ef;
  --pink-dark: #c2185b;
  --surface: #ffffff;
  --bg: #f7f8fc;
  --border: #efefef;
  --border-strong: #e2e4ec;
  --text-1: #111318;
  --text-2: #555b69;
  --text-3: #9ca3af;
  --green: #1e7d34;      --green-bg: #e7f5ea;
  --orange: #b45309;     --orange-bg: #fef3e2;
  --blue: #1d4ed8;       --blue-bg: #e8eeff;
  --red: #b3261e;        --red-bg: #fdeceb;
  --gray-bg: #f1f2f6;
  --sora: 'Sora', ui-sans-serif, 'Segoe UI', system-ui, sans-serif;
  --body: 'DM Sans', ui-sans-serif, 'Segoe UI', system-ui, sans-serif;
  --radius: 10px;

  /* Altnamen aus der ersten Fassung - noch von einzelnen Regeln genutzt und
     hier auf die neuen Werte gelegt, damit es nur eine Farbquelle gibt. */
  --farbe-text: var(--text-1);
  --farbe-text-schwach: var(--text-2);
  --farbe-hintergrund: var(--bg);
  --farbe-flaeche: var(--surface);
  --farbe-rand: var(--border-strong);
  --farbe-akzent: var(--pink);
  --farbe-akzent-dunkel: var(--pink-dark);
  --farbe-fehler: var(--red);
  --farbe-fehler-hintergrund: var(--red-bg);
  --farbe-erfolg: var(--green);
  --farbe-erfolg-hintergrund: var(--green-bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Zahlen in Tabellen tabellarisch setzen, damit Spalten optisch fluchten. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

svg { display: block; }

a { color: var(--pink-dark); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1 {
  font-family: var(--sora);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.3px;
  margin: 0 0 14px;
}

h2 {
  font-family: var(--sora);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 12px;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sora);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.2px;
  color: var(--text-1);
}

.brand:hover, .brand:focus { text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--pink);
  color: #fff;
  flex: none;
}

.nav { display: flex; gap: 2px; margin-left: 8px; flex-wrap: wrap; }

.nav a {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}

.nav a:hover, .nav a:focus { background: var(--bg); color: var(--text-1); text-decoration: none; }
.nav a.on { background: var(--pink-light); color: var(--pink-dark); font-weight: 700; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Datenfrische - im AdsRadar die sichtbare Voraussetzung jeder Automatik,
   hier der Zustand des Cron-Workers (letzter Lauf). */
.freshness {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.freshness--warn { background: var(--orange-bg); color: var(--orange); }
.freshness--aus  { background: var(--gray-bg);   color: var(--text-2); }

.topbar-abmelden {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}

.topbar-abmelden:hover, .topbar-abmelden:focus { color: var(--text-1); border-color: var(--text-3); text-decoration: none; }

/* ---------- Seitenrahmen ---------- */
.inhalt {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 20px 60px;
}

/* Schmale Seiten (Login, 404) bleiben zentriert und schmal. */
.inhalt--schmal { max-width: 460px; }

/* Die Lead-Liste ist die einzige wirklich breite Tabelle (zehn Spalten, davon
   mehrere mit nicht umbrechendem Inhalt). Sie darf den Bildschirm nutzen -
   bei 1440px wurde die Aktionsspalte an der Kartenkante abgeschnitten. */
.inhalt--breit { max-width: min(1760px, 100%); }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.page-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--pink-light);
  color: var(--pink-dark);
  flex: none;
}

.page-title {
  font-family: var(--sora);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.3px;
  margin: 0;
}

.page-desc { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
.page-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.zurueck:hover, .zurueck:focus { color: var(--text-1); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: .12s;
  white-space: nowrap;
}

.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover, .btn-pink:focus { background: var(--pink-dark); color: #fff; text-decoration: none; }

.btn-outline { background: var(--surface); border-color: var(--border-strong); color: var(--text-1); }
.btn-outline:hover, .btn-outline:focus { border-color: var(--text-3); text-decoration: none; }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--bg); color: var(--text-1); text-decoration: none; }

.btn-danger { background: var(--surface); border-color: #f3c9c6; color: var(--red); }
.btn-danger:hover, .btn-danger:focus { background: var(--red-bg); text-decoration: none; }

.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Nackte <button> ohne Klasse sehen aus wie .btn .btn-pink - so bleiben
   Formulare ohne Klassenattribut brauchbar. Bewusst KEINE Breite von 100 %
   (das war in der ersten Fassung global gesetzt und sprengt jede Werkzeugleiste). */
button:not([class]) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--pink);
  cursor: pointer;
}

button:not([class]):hover, button:not([class]):focus { background: var(--pink-dark); }

/* Altname aus der ersten Fassung, weiterhin an vielen Stellen im Markup. */
.btn-klein {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
}

.btn-klein:hover, .btn-klein:focus { border-color: var(--text-3); text-decoration: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

.badge--green  { background: var(--green-bg);  color: var(--green); }
.badge--orange { background: var(--orange-bg); color: var(--orange); }
.badge--blue   { background: var(--blue-bg);   color: var(--blue); }
.badge--gray   { background: var(--gray-bg);   color: var(--text-2); }
.badge--pink   { background: var(--pink-light); color: var(--pink-dark); }
.badge--red    { background: var(--red-bg);    color: var(--red); }

/* Fachliche Badges - Klassennamen kommen aus lib/Format.php (testgesichert),
   nur die Farbzuordnung ist hier. */
.badge--manuell       { background: var(--green-bg);  color: var(--green); }
.badge--a             { background: var(--blue-bg);   color: var(--blue); }
.badge--unklar        { background: var(--orange-bg); color: var(--orange); }
.badge--auto          { background: var(--gray-bg);   color: var(--text-2); }
.badge--neutral       { background: var(--gray-bg);   color: var(--text-2); }
.badge--relevant      { background: var(--green-bg);  color: var(--green); }
.badge--nicht-relevant{ background: var(--red-bg);    color: var(--red); }

/* "nicht geprueft" ist bewusst abgesetzt (gestrichelt): kein Pruefergebnis,
   sondern eine offene Aufgabe - siehe Format::nischeKlasse(). */
.badge--ungeprueft {
  background: var(--surface);
  color: var(--text-2);
  border: 1px dashed var(--text-3);
}

/* "nicht geprueft (Budget)": ebenfalls offen, aber mit bekanntem Grund und
   einem Weg zur Nacharbeit (Filter). Deshalb gestrichelt wie oben, aber in
   Warnfarbe statt grau - es ist eine Auslassung, die Geld gekostet haette. */
.badge--budget {
  background: var(--orange-bg);
  color: var(--orange);
  border: 1px dashed var(--orange);
}

/* Pitch A: es gibt eine gemessene Antwortzeit als Aufhaenger. Bewusst in der
   Markenfarbe - das ist die Zeile, an der ein Erstkontakt am meisten hat. */
.badge--pitch-a {
  background: var(--pink-light);
  color: var(--pink-dark);
}

/* ---------- KPI-Reihe ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.kpi-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
}

.kpi-ic--pink   { background: var(--pink-light); color: var(--pink-dark); }
.kpi-ic--green  { background: var(--green-bg);   color: var(--green); }
.kpi-ic--blue   { background: var(--blue-bg);    color: var(--blue); }
.kpi-ic--orange { background: var(--orange-bg);  color: var(--orange); }

.kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.kpi-val {
  font-family: var(--sora);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.4px;
  line-height: 1.15;
}

.kpi-sub { margin-top: 1px; font-size: 11.5px; color: var(--text-2); }

/* ---------- Karten ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Karten mit Fliesstext/Formular brauchen Innenabstand, Karten mit einer
   randlosen Tabelle nicht - deshalb .card-body statt Polsterung auf .card. */
.card-body { padding: 15px; }

.card + .card { margin-top: 14px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
}

.card-title { font-family: var(--sora); font-weight: 700; font-size: 14px; margin: 0; }
.card-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.card--schmal { max-width: 400px; margin: 40px auto 0; }
.card--schmal .card-body { padding: 26px; }

/* ---------- Filterleiste mit Chips ---------- */
.filters {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  background: #fcfcfe;
}

.filters .sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.filters .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* .chip ist in LeadRadar das neutrale Etikett (Hashtag, Score, Jobstatus). */
.chip {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 4px 4px 0;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

/* ---------- Tabellen ---------- */
table.tabelle { width: 100%; border-collapse: collapse; margin: 0; font-size: 13.5px; }

.tabelle thead th {
  padding: 9px 15px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: #fcfcfe;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.tabelle tbody td, .tabelle tbody th {
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
}

.tabelle tbody tr:last-child td, .tabelle tbody tr:last-child th { border-bottom: 0; }
.tabelle tbody tr:hover { background: #fcfcfe; }

/* Beschriftungsspalte der Schluessel-Wert-Tabellen (Lead-Detail, Job-Detail). */
.tabelle tbody th {
  width: 34%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.tabelle .r { text-align: right; }
.tabelle .c { text-align: center; }

/* Dichte Variante fuer die Lead-Liste: zehn Spalten passen mit dem
   Standard-Innenabstand (15px je Seite) nicht mehr nebeneinander. */
.tabelle--dicht thead th { padding: 9px 10px; }
.tabelle--dicht tbody td, .tabelle--dicht tbody th { padding: 9px 10px; }

/* Waagerechtes Scrollen bleibt in der Karte, der Seitenkoerper scrollt nie. */
.tablescroll { overflow-x: auto; }

/* Hauptbezeichner einer Zeile (Account, Signal) mit Unterzeile. */
.subject { font-weight: 600; font-size: 13.5px; }
.subject small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--text-3); }

/* ---------- Belege / Messwerte in der Zeile ---------- */
.evidence { display: flex; align-items: center; gap: 10px; }
.spark { flex: none; }
.ev-nums { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ev-nums b { color: var(--text-1); font-weight: 700; }

.score { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.score-bar { width: 46px; height: 5px; border-radius: 3px; background: var(--gray-bg); overflow: hidden; flex: none; }
.score-bar i { display: block; height: 100%; background: var(--pink); }
.score-val { font-family: var(--sora); font-weight: 700; font-size: 13px; min-width: 30px; text-align: right; }

/* ---------- Formulare ---------- */
form label { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }

form input[type="text"],
form input[type="password"],
form input[type="number"],
form textarea,
form select {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

form textarea { resize: vertical; }

form input:focus, form textarea:focus, form select:focus {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
  border-color: var(--pink);
}

input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--pink); cursor: pointer; margin: 0 6px 0 0; vertical-align: -2px; }

.formular-spalten { display: flex; gap: 14px; }
.formular-spalten label { flex: 1; }

.hinweis { margin: 0 0 14px; font-size: 12.5px; color: var(--text-2); }
.karten-meta { margin: 12px 0 0; font-size: 12.5px; color: var(--text-2); }

/* Kostenschaetzung im Job-Formular - wie der Erklaerkasten im Mockup. */
.kosten-schaetzung {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--blue-bg);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #16307d;
}

.kosten-schaetzung p { margin: 0 0 6px; }
.kosten-schaetzung p:last-child { margin-bottom: 0; }
.kosten-schaetzung .hinweis { margin: 0; color: #16307d; opacity: .85; }

/* ---------- Fortschritt ueber die Pipeline-Stufen ---------- */
.fortschritt { display: flex; flex-wrap: wrap; gap: 1px; list-style: none; padding: 0; margin: 0 0 14px; background: var(--border); }

.fortschritt__schritt {
  flex: 1 1 0;
  min-width: 110px;
  padding: 10px 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
}

.fortschritt__schritt--erledigt { background: var(--green-bg); color: var(--green); }
.fortschritt__schritt--aktuell  { background: var(--pink); color: #fff; }
.fortschritt__schritt--unbekannt { opacity: .5; }

/* ---------- Meldungen ---------- */
.fehler {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  background: var(--red-bg);
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
}

.fehler svg { flex: none; margin-top: 2px; }

/* ---------- Lead-Liste / -Detail ---------- */
.lead-filter { align-items: flex-end; }
.lead-filter label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
.lead-filter select { margin-top: 0; padding: 6px 9px; font-size: 12.5px; min-width: 140px; }

.lead-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--gray-bg); display: block; }
/* Im Seitenkopf der Detailseite steht das Bild an der Stelle des
   Seitensymbols und uebernimmt dessen Form (abgerundetes Quadrat). */
.lead-avatar--gross { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.lead-status-form { display: inline; }
.lead-status-form select { display: inline-block; width: auto; min-width: 116px; margin-top: 0; padding: 5px 8px; font-size: 12.5px; }

.zeilen-aktionen { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.zeilen-aktionen form { display: inline-flex; }

/* Ikon-Knoepfe in Tabellenzeilen: derselbe Rahmen wie .btn-klein, aber ohne
   Text. Bei zehn Spalten war "Löschen + sperren" als Beschriftung der
   groesste einzelne Platzfresser und schob die Aktionsspalte aus der Karte.
   Die Bedeutung steht in title und aria-label, damit sie weder fuer die Maus
   noch fuer einen Screenreader verlorengeht. */
.ikon-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  flex: none;
}

.ikon-knopf:hover, .ikon-knopf:focus {
  border-color: var(--text-3);
  color: var(--text-1);
  text-decoration: none;
}

.ikon-knopf--gefahr { border-color: #f3c9c6; color: var(--red); }
.ikon-knopf--gefahr:hover, .ikon-knopf--gefahr:focus { background: var(--red-bg); color: var(--red); }

.liste-leer { padding: 40px 15px; text-align: center; color: var(--text-2); }

/* Aufzaehlungen in Detailkarten (Beispiel-Antworten, gefundene Posts). */
.liste-schlicht { margin: 0; padding: 0; list-style: none; }
.liste-schlicht li { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.liste-schlicht li:last-child { border-bottom: 0; }
.liste-schlicht li:first-child { padding-top: 0; }

/* ---------- Wiederkehrende Kleinigkeiten ----------
   Bewusst wenige, benannte Regeln statt style="..."-Attribute im Markup:
   eine Farb- oder Abstandsaenderung soll an EINER Stelle passieren, und die
   Seiten bleiben lesbar. */

.text-schwach { color: var(--text-2); }
.text-leise   { color: var(--text-3); }
.ohne-rand    { margin: 0; }

/* Kartenbreiten fuer Formulare - ein Eingabefeld ueber die volle
   Arbeitsbreite ist unangenehm zu lesen und zu treffen. */
.card--formular { max-width: 720px; }
.card--formular-schmal { max-width: 640px; }

/* Karte, deren Rumpf mit einer Chip-Reihe endet: die Chips bringen ihren
   eigenen Aussenabstand mit, sonst wird der Abstand nach unten doppelt. */
.card-body--chips { padding-bottom: 6px; }

/* Kennzahlenreihe mit nur zwei Werten (Sperrliste). */
.kpis--zwei { grid-template-columns: repeat(2, 1fr); max-width: 720px; }

/* Kennzahl, deren Wert Text statt Zahl ist (z. B. der Stufenname) - die
   Sora-Groesse fuer Zahlen waere dafuer zu gross. */
.kpi-val--text { font-size: 16px; }

/* Rechter Hinweis in der Filterleiste (Trefferzahl, Sortierung). */
.filters-meta { font-size: 12.5px; color: var(--text-3); }

/* Zaehler-Badge in der Navigation. */
.nav-zaehler { margin-left: 4px; }

/* Knopf ueber die volle Breite (Login). */
.btn--voll { width: 100%; justify-content: center; }

/* Marke ueber dem Login-Formular. */
.login-marke { margin-bottom: 18px; }

/* Spaltenbreiten der Tabellen - hier statt als width="" im Markup, damit
   Layout und Inhalt getrennt bleiben. */
.tabelle .sp-account { width: 20%; }
.tabelle .sp-pitch   { width: 16%; }
.tabelle .sp-haupt   { width: 30%; }
.tabelle .sp-name    { width: 45%; }

/* Zweite Zeile in einer Tabellenzelle (Messwert unter dem Pitch-Badge). */
.zellen-zusatz { margin-top: 3px; }

/* Reiner Ikon-Link in einer Tabellenzelle (E-Mail-Symbol). */
.ikon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.ikon-link:hover, .ikon-link:focus { color: var(--pink-dark); text-decoration: none; }

/* Beschriftung mit vorangestelltem Haken - anders als die uebrigen
   Formularbeschriftungen keine Grossbuchstaben-Kopfzeile, sondern ein Satz
   neben dem Kaestchen. */
.label-haken {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-1);
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 14px; position: static; }
  .topbar-right { margin-left: 0; width: 100%; }
  .nav { margin-left: 0; }
  .inhalt { padding: 16px 14px 40px; }
  .kpis { grid-template-columns: 1fr; }
  .page-head { flex-wrap: wrap; }
  .page-head-actions { margin-left: 0; width: 100%; }
  .formular-spalten { flex-direction: column; gap: 0; }
  .fortschritt { flex-direction: column; }
}

/* Herkunftshinweis einer Latenzmessung, die NICHT aus dem Lauf stammt, unter
   dem der Lead gerade gefuehrt wird (Migration 009). Bewusst in Warnfarbe:
   wer die Zahl im Erstkontakt zitiert, soll sehen, dass sie aelter ist. */
.messung-fremd {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--orange);
}

/* Kampagnen-Segment "Nutzt Automatisierung".
   Bewusst eine eigene, kraeftige Farbe statt des grauen "erledigt"-Tons:
   diese Accounts galten frueher als Nicht-Leads und wurden ausgeblendet.
   Seit der Entscheidung, sie als Wechsel-Kandidaten anzusprechen (sie haben
   das Problem erkannt und bereits Geld fuer ein Werkzeug ausgegeben), sind
   sie eine gewollte Zielgruppe - und sollen als solche ins Auge fallen. */
.badge--segment-auto {
  background: #ede9fe;
  color: #5b21b6;
}

/* Rueckmeldung des Kopier-Knopfs (Lead-Liste). Kurz gruen, dann zurueck -
   ein Kopiervorgang ohne sichtbare Bestaetigung fuehlt sich kaputt an. */
.ikon-knopf--kopiert {
  border-color: var(--gruen, #16a34a);
  color: var(--gruen, #16a34a);
}

/* Ein Lead, dessen Link bereits geklickt wurde. Bewusst zurueckhaltend:
   es ist eine Zusatzinformation, kein Alarm. */
.ikon-knopf--geklickt {
  border-color: var(--gruen, #16a34a);
  color: var(--gruen, #16a34a);
}

/* Zaehler am Kopier-Knopf: wie oft dieser Lead schon angesprochen wurde. */
.ikon-knopf { position: relative; }
.knopf-zaehler {
  position: absolute; top: -6px; right: -6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--pink, #e6007e); color: #fff;
  font-size: 10px; line-height: 15px; text-align: center; font-weight: 600;
}
/* Schon einmal angesprochen - zurueckhaltend, aber sichtbar. */
.ikon-knopf--warnung { border-color: var(--pink, #e6007e); color: var(--pink, #e6007e); }