/* 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 ---------- */
/* EINE Breite fuer alle angemeldeten Seiten.

   Vorher gab es zwei: 1440px als Vorgabe und 1760px fuer Lead-Liste und
   Hashtags. Beim Wechseln zwischen den Menuepunkten sprang der Rahmen dadurch
   um 320 Pixel - sichtbar und unruhig.

   Vereinheitlicht wurde nach OBEN, nicht nach unten: bei 1440px wurde die
   Aktionsspalte der Lead-Liste an der Kartenkante abgeschnitten, und seit dem
   Kopier- und dem Nachrichten-Knopf ist sie noch breiter. Die uebrigen Seiten
   vertragen die Breite muehelos, weil ihre Inhalte sich selbst begrenzen:
   Formulare ueber .card--formular (720px) und .card--formular-schmal (640px),
   Detailkarten ueber .card--schmal (400px). */
.inhalt {
  max-width: min(1760px, 100%);
  margin: 0 auto;
  padding: 22px 20px 60px;
}

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

.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; }

/* Erklaertexte bekommen eine Lesebreite statt der vollen Seitenbreite.

   Zwei Gruende. Erstens Typografie: eine Zeile ueber die ganzen 1760px ist
   kaum lesbar, das Auge verliert beim Zeilenwechsel die Spur - als Faustregel
   gelten 65 bis 80 Zeichen.

   Zweitens der sichtbare Versatz: auf Formularseiten stand der Einleitungstext
   ueber die volle Breite, die Karte darunter aber nur 720px breit. Dieser
   Sprung liess die Seite unfertig wirken. Mit einer Lesebreite fluchten Text
   und Karte, ohne dass dafuer zwei verschiedene Seitenbreiten noetig waeren. */
.page-sub,
.liste-leer { max-width: 78ch; }

.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); }

/* "Jetzt bist du dran" am Nachrichten-Knopf, direkt nach dem Kopieren.
   Instagram kann den Text nicht vorbelegen - der Ablauf ist zwangslaeufig
   dreistufig (kopieren, oeffnen, einfuegen). Zwei Knoepfe nebeneinander
   verraten diese Reihenfolge nicht; dieser Hinweis tut es. */
.ikon-knopf--dran {
  border-color: var(--pink, #e6007e);
  color: #fff;
  background: var(--pink, #e6007e);
  animation: dran-pulsieren 1.2s ease-in-out 3;
}
@keyframes dran-pulsieren {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* Wer Bewegung im Bild nicht vertraegt, bekommt nur die Farbe. */
@media (prefers-reduced-motion: reduce) {
  .ikon-knopf--dran { animation: none; }
}