/* =========================================================================
   Lead Harvester — UI tokens · fitznerIO brand theme
   Aesthetic: technical, modern, "intelligente Systeme" — dunkles Navy-Schwarz
   als Bühne, ein Violett→Magenta-Verlauf als Signature-Akzent, violetter Glow
   auf den wichtigen Elementen. Typografie-geführt, großzügiger Whitespace.
   Token-basiert: alle Domain-Views (gastro/realtor/hotels) erben die Marke
   automatisch über diese Custom Properties.
   ========================================================================= */

/* Schriften liegen lokal unter public/fonts/ (Issue #27).
   Zuvor holte ein `@import` sie von fonts.googleapis.com — das verstiess
   gegen `style-src 'self'`, wurde vom Browser blockiert, und die Oberflaeche
   lief still in der System-Schrift. Google zu erlauben waere die andere
   Loesung gewesen; sie haette bei JEDEM Seitenaufruf eine Anfrage an Google
   geschickt. Lokal ausgeliefert bleibt die CSP unangetastet.
   Nur `latin` + `cyrillic` (die Oberflaeche und die Notizen sind zweisprachig)
   und nur die benutzten Schnitte — 700 kommt im CSS nicht vor. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-tight-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-tight-latin-400.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: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-tight-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-tight-latin-500.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: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-tight-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-tight-latin-600.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: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-tight-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-tight-latin-800.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-400.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-500.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;
}

/* fitznerIO Dark ist der DEFAULT (die Marke ist Dark-First). Light bleibt als
   opt-in über [data-theme="light"] erhalten (dichte Daten-Tabellen). */
:root {
  --bg: #0a0a0d;
  --bg-elev: #131318;
  --fg: #f4f4f5;
  --fg-soft: #c7c7cf;
  --muted: #8b8b96;
  --muted-2: #66666f;
  --accent: #a855f7;
  --accent-2: #d946ef;
  --accent-deep: #9333ea;
  --accent-grad: linear-gradient(135deg, #d946ef 0%, #9333ea 100%);
  --accent-soft: rgba(168, 85, 247, 0.14);
  --card: #16161c;
  --card-hover: #1d1d25;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --hot: #f87171;
  --warm: #fbbf24;
  --cold: #4ade80;
  --hot-soft: rgba(248, 113, 113, 0.14);
  --warm-soft: rgba(251, 191, 36, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.55);
  /* Signature: violetter Glow für aktive/wichtige Elemente. */
  --glow: 0 6px 32px rgba(168, 85, 247, 0.28);
  --glow-strong: 0 8px 44px rgba(168, 85, 247, 0.42);

  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
}

/* Light-Theme (opt-in) — fitzner-Violett auf hellem Grund, für dichte Tabellen. */
:root[data-theme="light"] {
  --bg: #f6f6f8;
  --bg-elev: #ffffff;
  --fg: #18181b;
  --fg-soft: #3f3f46;
  --muted: #71717a;
  --muted-2: #a1a1aa;
  --accent: #9333ea;
  --accent-2: #c026d3;
  --accent-deep: #7c3aed;
  --accent-grad: linear-gradient(135deg, #c026d3 0%, #7c3aed 100%);
  --accent-soft: rgba(147, 51, 234, 0.08);
  --card: #ffffff;
  --card-hover: #faf9fc;
  --border: #e7e5ea;
  --border-strong: #d6d3da;
  --hot: #b91c1c;
  --warm: #a16207;
  --cold: #15803d;
  --hot-soft: rgba(185, 28, 28, 0.08);
  --warm-soft: rgba(161, 98, 7, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --glow: 0 4px 24px rgba(147, 51, 234, 0.18);
  --glow-strong: 0 6px 32px rgba(147, 51, 234, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01';
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Atmosphäre: zwei sehr subtile violette Halos oben — die fitzner.io-
     Signatur, ohne die Lesbarkeit der Inhalte zu stören. fixed = scrollt mit. */
  background-image:
    radial-gradient(60rem 30rem at 15% -8%, rgba(168, 85, 247, 0.10), transparent 60%),
    radial-gradient(50rem 28rem at 95% -12%, rgba(217, 70, 239, 0.08), transparent 60%);
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, rgba(147, 51, 234, 0.06), transparent 60%),
    radial-gradient(50rem 28rem at 95% -12%, rgba(192, 38, 211, 0.05), transparent 60%);
}

/* =========================================================================
   Header
   ========================================================================= */

.shell-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.9rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(10px);
}

.shell-header h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  margin: 0;
  /* Wortmarke im Verlauf — die fitzner.io-Signatur. */
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tabs { display: flex; gap: 0.1rem; }

.tab {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.tab:hover { color: var(--fg); background: var(--accent-soft); }
.tab.active { color: var(--fg); background: var(--accent-soft); }
.tab.active::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: -0.9rem;
  height: 2px;
  background: var(--accent-grad);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
}
/* Spezial-Tabs (Dashboard/Admin) optisch leicht abgesetzt. */
.tab-special { font-weight: 600; }
.tab-failed { color: var(--hot); }
.tab-disabled,
.tab-disabled:hover {
  color: var(--muted-2);
  background: var(--bg-elev);
  cursor: not-allowed;
  opacity: 0.6;
}

.tab-content { padding: 1.75rem 1.75rem 4rem; max-width: 1600px; margin: 0 auto; }

/* Realtor: Tabelle hat sehr viele Spalten — wir nutzen die volle Viewport-Breite
   und reduzieren das horizontale Padding auf 0.5rem, damit die Tabelle nicht
   in einen schmalen 1600px-zentrierten Slot gequetscht wird. */
.tab-content:has(.lh-realtor-content) {
  max-width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* =========================================================================
   Theme toggle
   ========================================================================= */

.theme-toggle,
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
}
.lang-toggle { margin-left: auto; }
.theme-toggle { margin-left: 0.5rem; }
.theme-toggle button,
.lang-toggle button {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
}
.lang-toggle button {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.theme-toggle button:hover,
.lang-toggle button:hover { color: var(--fg); }
.theme-toggle button[aria-pressed="true"],
.lang-toggle button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.theme-toggle button + button,
.lang-toggle button + button { border-left: 1px solid var(--border); }

/* Logout-Button (nur bei echter Session, LH_AUTH=on). Leerer Container, wenn
   keiner gerendert wird → kein margin/gap-Artefakt im Header. */
.auth-controls:empty { display: none; }
.auth-controls { margin-left: 0.5rem; }
.auth-logout {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.auth-logout:hover { color: var(--fg); background: var(--accent-soft); border-color: var(--accent); }
.auth-logout:disabled { opacity: 0.6; cursor: default; }

/* =========================================================================
   Gastro page header / filters
   ========================================================================= */

.gastro > header {
  margin: 0 0 1rem;
}

.gastro > header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
  color: var(--fg);
}

/* Sticky-Container für Filter + Suche. Bleibt unter dem App-Header
   sichtbar, sobald die Stats-Section weg gescrollt wurde. */
.gastro-sticky {
  position: sticky;
  /* Direkt unter dem .shell-header (sticky, top:0) andocken. Approx 56px
     für den Header — mit etwas Puffer.*/
  top: 56px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 -1.75rem 1.5rem;
  padding: 1rem 1.75rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.gastro .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.gastro .filters select {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gastro .filters select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.gastro .search-row {
  display: flex;
}
.gastro .search-row input[type="search"] {
  flex: 1 1 auto;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gastro .search-row input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gastro .filters .check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  user-select: none;
}
.gastro .filters .check:hover { color: var(--fg); }
.gastro .filters .check input { accent-color: var(--accent); }

.gastro .filter-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.gastro .filter-reset svg { display: block; }
.gastro .filter-reset:hover {
  color: var(--hot);
  border-color: var(--hot);
}

/* =========================================================================
   Review-Status (manuelle Bearbeitung) — siehe auch .rs-toggle in lead-top
   ========================================================================= */

/* Bearbeitete/uninteressante Karten ausgrauen, damit der Default-View
   (review_status=open) klar dominiert. Nur sichtbar wenn der Filter
   `Alle` aktiv ist — der Default-Filter blendet sie ohnehin aus. */
.lead.lead-rs-done,
.lead.lead-rs-skip { opacity: 0.6; }
.lead.lead-rs-done:hover,
.lead.lead-rs-skip:hover { opacity: 0.92; }

/* Kurzer roter Flash bei PATCH-Fehler. */
.lead.rs-error {
  border-color: var(--hot);
  box-shadow: 0 0 0 2px var(--hot-soft);
}

/* Popover-Menü zum Status-Wechsel. Wird ins <body> gemounted (fixed
   positioning), damit es nicht von der Card-overflow geclippt wird. */
.rs-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}
.rs-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fg-soft);
  text-align: left;
  transition: color 0.12s, background 0.12s;
}
.rs-menu-item:hover {
  background: var(--bg);
  color: var(--fg);
}
.rs-menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.rs-menu-item svg { display: block; flex-shrink: 0; }
/* Hover-Akzent passend zum jeweiligen Status. */
.rs-menu-item.rs-done:hover { color: var(--cold); }
.rs-menu-item.rs-skip:hover { color: var(--warm); }

/* =========================================================================
   Stats — kompakter Strip mit Summary + horizontaler Stadt-Liste
   ========================================================================= */

.stats {
  margin-bottom: 1.5rem;
}

.stat-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  overflow: hidden;
}
.stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.stat-chip:hover { border-color: var(--border-strong); }
.stat-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.stat-chip.active .city { color: var(--accent); }
.stat-chip .city {
  font-weight: 500;
  color: var(--fg);
  text-transform: capitalize;
}
.stat-chip .count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.stat-chip .breakdown {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted-2);
  letter-spacing: -0.01em;
}

.stat-warning {
  background: var(--warm-soft);
  border: 1px solid color-mix(in srgb, var(--warm) 50%, transparent);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
}
.stat-warning code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* =========================================================================
   Result meta
   ========================================================================= */

.gastro .result-meta {
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.gastro .result-meta strong {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--fg);
}

/* =========================================================================
   Lead Cards — Hauptelement, generös, klare Sections
   ========================================================================= */

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.85rem;
}

/* Lead card — uniform height across the grid. Sections:
   1. .lead-top  — schmale Icon-Leiste (Stadt, Russisch, Cuisine, Preis,
      Rating, Closed-Flag, Status-Toggle).
   2. .lead-body — Name (groß) + Adresse (zwei Zeilen).
   3. .lead-contact — Footer mit Telefon / Web / IG.
   Long names wrap to two lines with ellipsis; tooltip shows the full name. */
.lead {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  /* Fixe Höhe sorgt für gleichförmige Grid-Reihen, auch wenn manche Karten
     keine Adresse oder kürzere Namen haben. */
  height: 220px;
  position: relative;
  /* No overflow:hidden — would clip the custom tooltip. */
}
.lead:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
  box-shadow: var(--shadow-md);
}

/* Top-Bar — alle wichtigen Info-Icons in einer Zeile. */
.lead-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem 0.45rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius) var(--radius) 0 0;
}
.lead-top-items {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* "Top item" — generischer Slot. Padding = Hit-Area, damit Hover für
   Tooltip leicht zu treffen ist. */
.ti {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  cursor: default;
}
.ti:hover {
  color: var(--fg-soft);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.ti svg { display: block; }

/* Stadt — Pin + Stadtname als sichtbarer Text neben dem Icon. */
.ti-city .ti-city-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-soft);
  text-transform: capitalize;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-city:hover .ti-city-name { color: var(--fg); }

/* Russisch-Likelihood — Sprechblasen-Icon. Farbcodiert nach Stufe. */
/* high = Treffer (grün), medium = Hinweis (warm), unknown = neutral. */
.ti-lik-high { color: var(--cold); }
.ti-lik-high:hover { color: var(--cold); opacity: 0.85; }
.ti-lik-medium { color: var(--warm); }
.ti-lik-medium:hover { color: var(--warm); opacity: 0.85; }
.ti-lik-unknown { color: var(--muted-2); }

/* Cuisine pending — gestrichelter Outline um das Icon, signalisiert
   "noch zu klassifizieren". */
.ti-cuisine-pending {
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  padding: 0.15rem;
  color: var(--muted-2);
}

/* Rating — Stern + Zahl, kompakt, mono. */
.ti-rating {
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
}
.ti-rating .rating-num { font-variant-numeric: tabular-nums; }

/* Preis bleibt als kleine Pille (€-Symbole sind selbst schon Icon).
   Eigenes Padding/Border überschreibt die generische .ti-Hover-Kachel. */
.ti-price {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-soft);
  white-space: nowrap;
}
.ti-price:hover { background: var(--card); }
.price-badge.price-1 { color: var(--cold); border-color: color-mix(in srgb, var(--cold) 30%, var(--border)); }
.price-badge.price-2 { color: var(--fg-soft); }
.price-badge.price-3 { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 30%, var(--border)); }
.price-badge.price-4 { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 30%, var(--border)); }

/* Closed: rot (perm) / warm (temp). */
.ti-closed-perm { color: var(--hot); }
.ti-closed-temp { color: var(--warm); }

/* Status-Toggle: Icon-only, rund, rechts in der Top-Bar. Klick öffnet
   das Popover-Menü. */
.rs-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.rs-toggle:hover {
  border-color: var(--border-strong);
  color: var(--fg);
}
.rs-toggle:active { transform: scale(0.92); }
.rs-toggle:disabled { opacity: 0.55; cursor: wait; }
.rs-toggle svg { display: block; }

.rs-toggle.rs-open { color: var(--muted); }
.rs-toggle.rs-done {
  color: var(--cold);
  background: color-mix(in srgb, var(--cold) 14%, transparent);
  border-color: color-mix(in srgb, var(--cold) 40%, transparent);
}
.rs-toggle.rs-done:hover {
  background: color-mix(in srgb, var(--cold) 22%, transparent);
  border-color: color-mix(in srgb, var(--cold) 55%, transparent);
}
.rs-toggle.rs-skip {
  color: var(--warm);
  background: var(--warm-soft);
  border-color: color-mix(in srgb, var(--warm) 35%, transparent);
}
.rs-toggle.rs-skip:hover {
  background: color-mix(in srgb, var(--warm) 18%, transparent);
  border-color: color-mix(in srgb, var(--warm) 55%, transparent);
}

.lead-body {
  padding: 0.95rem 1.1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.lead-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.lead-addr {
  margin: 0;
  color: var(--fg-soft);
  font-size: 0.82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  /* Reserve zwei Zeilen, damit Karten mit kurzer Adresse höhentreu mit
     denen mit zweizeiliger Adresse abschließen. */
  min-height: calc(2 * 1.4em);
}

/* Price badge — wird auch im Detail-Dialog wiederverwendet. */
.price-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-soft);
  white-space: nowrap;
}
.price-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 0.1rem;
}

/* city-pill bleibt für den Detail-Dialog (dialog-meta) — Card nutzt
   stattdessen .ti-city. */
.city-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-soft);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
}

/* Contact footer — fixed-height single-row strip. Email is the primary
   action and may shrink/ellipsize; phone next to it; icon-only links last.
   Single-line guarantees uniform card heights. */
.lead-contact {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0.7rem 1.1rem;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.78rem;
  min-height: 48px;
}
.lead-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.lead-contact a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.lead-contact a.icon-only {
  padding: 0.45rem 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.lead-contact a.icon-only svg { display: block; }
.lead-contact a.contact-primary {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  flex: 1 1 auto;
  min-width: 0;
}
.lead-contact a.contact-primary:hover {
  background: var(--accent);
  color: var(--card);
  border-color: var(--accent);
}
.lead-contact .no-contact {
  color: var(--muted-2);
  padding: 0.3rem 0;
  font-size: 0.78rem;
  font-style: italic;
}

/* =========================================================================
   Badges
   ========================================================================= */

.badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Lead-Score-Segmente (HOT/WARM/COLD) bleiben farb-codiert nach Dringlichkeit. */
.badge-HOT {
  background: var(--hot-soft);
  color: var(--hot);
  border: 1px solid color-mix(in srgb, var(--hot) 35%, transparent);
}
.badge-WARM {
  background: var(--warm-soft);
  color: var(--warm);
  border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
}
.badge-COLD {
  background: color-mix(in srgb, var(--cold) 12%, transparent);
  color: var(--cold);
  border: 1px solid color-mix(in srgb, var(--cold) 35%, transparent);
}
.badge-UNSCORED {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Russisch-Wahrscheinlichkeit — high ist *gut* (Treffer für Outreach),
   nicht *gefährlich*. Daher grün statt rot. */
.badge-lik-high {
  background: color-mix(in srgb, var(--cold) 14%, transparent);
  color: var(--cold);
  border: 1px solid color-mix(in srgb, var(--cold) 40%, transparent);
}
.badge-lik-medium {
  background: var(--warm-soft);
  color: var(--warm);
  border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
}
.badge-lik-unknown {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.failed-banner {
  background: var(--hot-soft);
  border: 1px solid color-mix(in srgb, var(--hot) 50%, transparent);
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  color: var(--hot);
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 3rem 1rem;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1rem;
}

/* =========================================================================
   Custom Tooltip — only renders when JS has marked the element as truncated
   via .is-truncated. Triggers on hover. pointer-events:none so the card
   click still works.
   ========================================================================= */

[data-tooltip] {
  position: relative;
}
/* Real DOM tooltip rendered into <body> by JS — fixed positioning means
   it's never clipped by any ancestor and stacking is trivial. */
/* =========================================================================
   Toast — Bestätigungs-Snackbars unten rechts
   ========================================================================= */

.lh-toast-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
}
.lh-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: #18181b;
  color: #fafafa;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-left: 3px solid var(--muted);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.2s;
  max-width: 360px;
}
.lh-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.lh-toast svg { display: block; flex-shrink: 0; }
.lh-toast-rs-open { border-left-color: var(--muted-2); }
.lh-toast-rs-done { border-left-color: var(--cold); color: #fafafa; }
.lh-toast-rs-done svg { color: var(--cold); }
.lh-toast-rs-skip { border-left-color: var(--warm); }
.lh-toast-rs-skip svg { color: var(--warm); }

/* Tooltip-Farben bewusst unabhängig vom Theme: dunkler Hintergrund, weißer
   Text — sorgt für maximalen Kontrast in Light- und Dark-Mode. */
.lh-tooltip {
  position: fixed;
  z-index: 9999;
  background: #18181b;
  color: #fafafa;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  max-width: min(520px, 95vw);
  /* pre-line: \n im data-tooltip wird zum Zeilenumbruch (z.B. mehrzeiliger
     Status-Tooltip "Anreicherung …\nSkip-Grund …"); Single-Line-Tooltips
     (Name/Firma/Adresse) verhalten sich wie zuvor (Spaces kollabieren, Wrap). */
  white-space: pre-line;
  word-break: break-word;
}
.lh-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #18181b;
}

/* =========================================================================
   Detail Dialog
   ========================================================================= */

dialog {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(620px, calc(100vw - 2rem));
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-md);
  height: 85vh;
  overflow-y: auto;
}
dialog::backdrop {
  background: rgba(20, 17, 13, 0.55);
  backdrop-filter: blur(2px);
}
dialog header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
dialog header h3 { flex: 1 1 auto; }
.dialog-inner:focus { outline: none; }
.dialog-close {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.dialog-close:hover { color: var(--accent); border-color: var(--accent); }
dialog h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
dialog h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 1.1rem 0 0.4rem;
}
dialog .muted { color: var(--muted); font-size: 0.85rem; }
dialog pre {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  white-space: pre-wrap;
  margin: 0.25rem 0 0;
}
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.contact-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.1rem 0;
  font-size: 0.88rem;
}
.contact-list .ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.4rem;
  color: var(--muted);
}
.contact-list .ci svg { display: block; }
.contact-list a { color: var(--accent); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
/* Dialog body — header, banners, address/meta, lists */
.dialog-banner {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
}
.dialog-banner.banner-error {
  background: var(--hot-soft);
  color: var(--hot);
  border: 1px solid color-mix(in srgb, var(--hot) 35%, transparent);
}
.dialog-banner.banner-warn {
  background: var(--warm-soft);
  color: var(--warm);
  border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
}

.dialog-addr {
  margin: 0.4rem 0 0.4rem;
  color: var(--fg-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}
.dialog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.dialog-meta .rating { font-family: var(--font-mono); font-weight: 500; color: var(--fg-soft); }
.dialog-meta .cuisine { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-2); letter-spacing: 0.06em; }
.dialog-meta .sep {
  width: 3px; height: 3px; background: var(--muted-2); border-radius: 50%; display: inline-block;
}

/* Category tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.25rem 0 0.4rem;
}
.tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg-soft);
  border: 1px solid var(--border);
}

/* Opening hours */
.hours {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25rem 0 0.4rem;
  font-size: 0.85rem;
}
.hours td {
  padding: 0.3rem 0;
  border-top: 1px solid var(--border);
}
.hours tr:first-child td { border-top: 0; }
.hours td:first-child {
  width: 30%;
  color: var(--muted);
  font-weight: 500;
}
.hours td:last-child {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
}

/* Reviews distribution bars */
.dist {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.25rem 0 0.4rem;
}
.dist-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.dist-label {
  font-family: var(--font-mono);
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}
.dist-bar {
  display: block;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.dist-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.dist-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* Tabs im Detail-Dialog */
.dialog-tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin: 0.75rem 0 1rem;
}
.dialog-tab {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.dialog-tab:hover { color: var(--fg); background: var(--accent-soft); }
.dialog-tab.active { color: var(--fg); }
.dialog-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

/* Inline-Edit-Sektion im Detail-Dialog */
.edit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  margin: 0.25rem 0 0.4rem;
}
.edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.edit-grid select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--fg);
  text-transform: none;
  letter-spacing: normal;
  min-width: 120px;
}
.edit-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.edit-grid select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg);
}
.edit-grid button[data-edit-save] {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}
.edit-grid button[data-edit-save]:hover { opacity: 0.9; }
.edit-status {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  align-self: center;
}
.edit-status.edit-ok { color: var(--cold); }
.edit-status.edit-err { color: var(--hot); }

/* Reviews excerpt list */
ul.reviews {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
ul.reviews li {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-soft);
}
ul.reviews li strong {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.4rem;
}

/* =========================================================================
   @lh/ui-kit Primitives — Card / FilterBar / ViewToggle / DetailDialog.
   Stiltokens lehnen sich an .lead/.stat-chip/.badge in Gastro an, damit
   Realtor visuell zur Shell passt. Klassen-Präfix `lh-` (= ui-kit-Namespace).
   ========================================================================= */

/* ----- Card ----- */

.lh-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  min-height: 220px;
}
.lh-card--clickable {
  cursor: pointer;
}
.lh-card--clickable:hover,
.lh-card--clickable:focus-visible {
  border-color: var(--border-strong);
  background: var(--card-hover);
  box-shadow: var(--shadow-md);
  outline: none;
}

.lh-card__head {
  padding: 0.9rem 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.lh-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lh-card__subtitle {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
  font-family: var(--font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lh-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 1rem 0.1rem;
}

.lh-card__body {
  flex: 1;
  padding: 0.4rem 1rem 0.9rem;
  font-size: 0.85rem;
  color: var(--fg-soft);
  line-height: 1.5;
  overflow: hidden;
}
.lh-card__body p {
  margin: 0 0 0.4rem;
}
.lh-card__body p:last-child {
  margin-bottom: 0;
}
.lh-card__body em {
  color: var(--muted);
}
.lh-card__body strong {
  color: var(--fg);
  font-weight: 600;
}
.lh-card__body a {
  color: var(--accent);
  text-decoration: none;
}
.lh-card__body a:hover {
  text-decoration: underline;
}
.lh-card__body code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--bg);
  padding: 0.05rem 0.3rem;
  border-radius: var(--radius-sm);
}

.lh-card__footer {
  display: flex;
  gap: 0.15rem;
  padding: 0.45rem 0.8rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.lh-card__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}
.lh-card__icon-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.lh-card__icon-link svg {
  display: block;
}

/* ----- Badges ----- */

.lh-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid var(--border);
}
.lh-badge--success {
  background: color-mix(in srgb, var(--cold) 12%, transparent);
  color: var(--cold);
  border-color: color-mix(in srgb, var(--cold) 35%, transparent);
}
.lh-badge--warn {
  background: var(--warm-soft);
  color: var(--warm);
  border-color: color-mix(in srgb, var(--warm) 35%, transparent);
}
.lh-badge--info {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.lh-badge--neutral {
  background: transparent;
  color: var(--muted);
}

/* ----- FilterBar ----- */

.lh-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: flex-end;
}
.lh-filter {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
}
.lh-filter__label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lh-filter__select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s;
  min-height: 36px;
}
.lh-filter__select:focus,
.lh-filter__select:hover {
  border-color: var(--border-strong);
}
.lh-filter__search {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  flex: 1;
  min-width: 220px;
  min-height: 36px;
  transition: border-color 0.15s;
}
.lh-filter__search:focus {
  border-color: var(--accent);
}

/* ----- ViewToggle ----- */

.lh-view-toggle {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: flex-end;
}
.lh-view-toggle__btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  min-height: 36px;
}
.lh-view-toggle__btn:hover {
  color: var(--fg-soft);
}
.lh-view-toggle__btn.is-active {
  background: var(--card);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ----- Detail Dialog ----- */

.lh-dialog {
  width: min(720px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  margin: auto;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body);
  overflow: hidden;
}
/* Flex-Layout NUR im open-State — sonst überschreibt es das default
   `display: none` für geschlossene <dialog>-Elemente, und das Modal bleibt
   visuell sichtbar nach close() (close-Btn, ESC, Backdrop alle wirkungslos). */
.lh-dialog[open] {
  display: flex;
  flex-direction: column;
}
.lh-dialog::backdrop {
  background: rgba(15, 15, 18, 0.55);
  backdrop-filter: blur(2px);
}
.lh-dialog__close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  line-height: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lh-dialog__close:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.lh-dialog__title {
  padding: 1.1rem 3rem 0.7rem 1.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.lh-dialog__body {
  padding: 1rem 1.5rem 1.5rem;
  overflow-y: auto;
  /* Flex-Item das den restlichen Platz im Dialog ausfüllt. min-height: 0
     ist Pflicht damit overflow scrollen kann — sonst hebt der Body sein
     intrinsisches Min-Height ungezogen über die Dialog-max-height. */
  flex: 1 1 auto;
  min-height: 0;
}
.lh-dialog__section {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}
.lh-dialog__section:last-child {
  border-bottom: none;
}
.lh-dialog__section-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.lh-dialog__section-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg-soft);
  word-break: break-word;
}
.lh-dialog__section-body p {
  margin: 0 0 0.6rem;
}
.lh-dialog__section-body p:last-child {
  margin-bottom: 0;
}
.lh-dialog__section-body em {
  color: var(--muted);
}
.lh-dialog__section-body strong {
  color: var(--fg);
}
.lh-dialog__section-body a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
.lh-dialog__section-body a:hover {
  text-decoration: underline;
}
.lh-dialog__section-body blockquote {
  margin: 0.4rem 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--accent);
  color: var(--fg-soft);
}
.lh-dialog__section-body ul {
  padding-left: 1.2rem;
  margin: 0.3rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* =========================================================================
   Realtor-Domain — domain-spezifischer Wrap um die UI-Kit-Primitives.
   Layout: Header (Filter + Toggle), Content (Cards-Grid / Table).
   ========================================================================= */

.lh-realtor-dbselector {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.lh-realtor-dbselector__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lh-realtor-dbselector__select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.lh-realtor-dbselector__select:hover {
  border-color: var(--accent);
}
.lh-realtor-dbselector__count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.lh-realtor-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.lh-realtor-header .lh-filter-bar {
  flex: 1;
  min-width: 0;
}

.lh-realtor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.85rem;
}

.lh-realtor-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin: -0.5rem 0 1rem;
}

.lh-realtor-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
  padding: 3rem 1rem;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1rem;
}

.lh-realtor-banner {
  background: var(--warm-soft);
  border: 1px solid color-mix(in srgb, var(--warm) 50%, transparent);
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
}

.lh-realtor-table__date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: help;
}

.lh-realtor-table__row--has-persons > td:first-child { font-weight: 600; }
.lh-realtor-table__row--expanded { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.lh-realtor-table__expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
  padding: 0.15rem 0.45rem 0.15rem 0.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.lh-realtor-table__expand-toggle:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.lh-realtor-table__chev {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  width: 0.7rem;
  display: inline-block;
  text-align: center;
}
.lh-realtor-table__row--expanded .lh-realtor-table__chev { color: var(--accent); }
.lh-realtor-table__person-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.lh-realtor-table__expand-toggle:hover .lh-realtor-table__chev,
.lh-realtor-table__expand-toggle:hover .lh-realtor-table__person-count { color: var(--accent); }

.lh-realtor-table__subrow > td {
  padding: 0 !important;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.lh-realtor-subtable-wrap {
  padding: 0.6rem 1.2rem 1rem;
}
.lh-realtor-subtable__compliance {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--warm);
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--warm-soft);
  border: 1px solid color-mix(in srgb, var(--warm) 35%, transparent);
  border-radius: var(--radius);
}
.lh-realtor-subtable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.lh-realtor-subtable th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.lh-realtor-subtable td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  vertical-align: top;
}
.lh-realtor-subtable tr:last-child td { border-bottom: 0; }
.lh-realtor-subtable__name {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.lh-realtor-subtable__name:hover { text-decoration: underline; }
.lh-realtor-subtable__link {
  color: var(--accent);
  text-decoration: none;
}
.lh-realtor-subtable__link:hover { text-decoration: underline; }

.lh-realtor-linked {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lh-realtor-linked__back {
  margin-bottom: 0.3rem;
}
.lh-realtor-linked__company-link {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  cursor: pointer;
}
.lh-realtor-linked__company-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.lh-realtor-linked__header {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lh-realtor-linked__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lh-realtor-linked__item {
  font-size: 0.9rem;
  line-height: 1.4;
}
.lh-realtor-linked__name {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.lh-realtor-linked__name:hover {
  text-decoration: underline;
}
.lh-realtor-linked__meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.lh-realtor-signals {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Sprache-Cell: native browser-Tooltip via title-Attr — cursor: help signalisiert
   dem User, dass Hover-Info verfügbar ist. */
.lh-realtor-table td[data-column="languages"] .lh-badge {
  cursor: help;
}

/* Modal § Sprachen: Badge inline mit der vollen Sprach-Liste rechts daneben. */
.lh-realtor-facts__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.lh-realtor-facts__lang-list {
  color: var(--muted);
  font-size: 0.88rem;
}

.lh-realtor-signals__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  border: 1px solid transparent;
  line-height: 1;
}

.lh-realtor-signals__badge svg {
  display: block;
}

.lh-realtor-signals__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  line-height: 1;
}

.lh-realtor-signals__badge--on {
  background: color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
  border-color: color-mix(in srgb, var(--success, #22c55e) 35%, transparent);
  color: var(--fg);
}

.lh-realtor-signals__badge--off {
  background: transparent;
  border-color: var(--border, rgba(255,255,255,0.1));
  color: var(--muted);
  opacity: 0.55;
}

.lh-realtor-engagement-map {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.lh-realtor-engagement-map__info-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -0.4rem;
}

.lh-realtor-engagement-map__hint {
  background: color-mix(in srgb, var(--accent, #4f46e5) 10%, transparent);
  border-left: 3px solid var(--accent, #4f46e5);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.35;
}

.lh-realtor-engagement-map__sub-header {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lh-realtor-engagement-map__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lh-realtor-engagement-map__list li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.15rem 0;
}

.lh-realtor-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lh-realtor-table thead {
  background: var(--bg-elev);
}
.lh-realtor-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.lh-realtor-table th:hover {
  color: var(--fg);
  background: var(--accent-soft);
}
.lh-realtor-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-soft);
  vertical-align: middle;
}
.lh-realtor-table tbody tr {
  transition: background 0.15s;
}
.lh-realtor-table tbody tr:hover {
  background: var(--bg-elev);
}
.lh-realtor-table tbody tr:last-child td {
  border-bottom: none;
}

/* Name-/Firma-Zellen: auf eine Zeile gekürzt mit Ellipsis; der volle Wert
   kommt per Sofort-Hover-Tooltip (markTruncated() setzt .is-truncated nur,
   wenn wirklich abgeschnitten). max-width begrenzt die Spaltenbreite. */
.lh-realtor-table__trunc {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.lh-realtor-table__trunc.is-truncated {
  cursor: help;
}

.lh-realtor-sources {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
}
.lh-realtor-sources li {
  word-break: break-all;
}

/* Tabellen-Erweiterung: Inline-Badges, Link-Icons, semantische Zellen. */
.lh-realtor-table__links {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}
.lh-realtor-table__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}
.lh-realtor-table__link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.lh-realtor-table__link svg {
  display: block;
}
.lh-realtor-table__muted {
  color: var(--muted-2);
  font-size: 0.78rem;
}
.lh-realtor-table__brand {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
}
.lh-realtor-table__langs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}
.lh-realtor-table__langs .lh-badge {
  font-size: 0.7rem;
  padding: 1px 6px;
  letter-spacing: 0.02em;
}
.lh-realtor-table__num-good {
  color: var(--cold);
  font-family: var(--font-mono);
  font-weight: 600;
}
.lh-realtor-table__num-mid {
  color: var(--warm);
  font-family: var(--font-mono);
  font-weight: 500;
}
.lh-realtor-table td {
  font-variant-numeric: tabular-nums;
}
/* Inline-Badge in der Tabelle: kleiner als die Card-Variante. */
.lh-realtor-table .lh-badge {
  font-size: 0.62rem;
  padding: 0.15rem 0.45rem;
}

/* Steckbrief im Detail-Dialog — Definition-List zwei-spaltig. */
.lh-realtor-facts {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
  font-size: 0.88rem;
}
.lh-realtor-facts dt {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  align-self: center;
}
.lh-realtor-facts dd {
  margin: 0;
  color: var(--fg-soft);
}

/* Engager-Liste */
.lh-realtor-engagers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lh-realtor-engagers li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.lh-realtor-engagers__count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  min-width: 28px;
}
.lh-realtor-engagers__name {
  color: var(--fg-soft);
}

/* Info-Popover am Tier-Filter — erklärt die 4 Tier-Stufen. */
.lh-filter--with-info {
  position: relative;
}
.lh-filter--with-info .lh-filter__label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.lh-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lh-info-btn:hover,
.lh-info-btn[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}
.lh-info-btn svg {
  display: block;
}
.lh-info-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(360px, calc(100vw - 2rem));
  padding: 0.85rem 0.95rem;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
}
.lh-info-pop[hidden] {
  display: none;
}
.lh-info-pop__title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.lh-info-pop__row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: start;
  gap: 0.6rem;
  padding: 0.35rem 0;
}
.lh-info-pop__row + .lh-info-pop__row {
  border-top: 1px solid var(--border);
}
.lh-info-pop__row .lh-badge {
  justify-self: start;
  align-self: center;
}
.lh-info-pop__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  align-self: center;
}
.lh-info-pop__text {
  color: var(--fg-soft);
  font-size: 0.85rem;
}

/* --- Runs-Pill (PRD §4 F8) ----------------------------------------------- */
lh-runs-pill {
  display: inline-flex;
  align-items: center;
}
.runs-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* `--bg-soft` ist nirgends definiert (vorbestehend) — Rueckfall ergaenzt. */
  background: var(--bg-soft, var(--bg-elev));
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 0.78rem;
  cursor: pointer;
}
.runs-pill-btn:hover {
  background: var(--bg-hover, var(--bg-elev));
  border-color: var(--accent);
}
.runs-pill-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent, #1abc9c);
  animation: runs-pill-pulse 1.4s ease-in-out infinite;
}
@keyframes runs-pill-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.runs-pill-dialog {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  min-width: 32rem;
}
.runs-pill-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.runs-pill-dialog-inner {
  padding: 1rem 1.25rem;
}
.runs-pill-dialog table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.runs-pill-dialog th,
.runs-pill-dialog td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.runs-pill-dialog th {
  font-weight: 600;
  color: var(--fg-soft);
}

/* ============================================================================
   Burning-Leads-Tab (lh-bl-*) — Layout-Klassen analog zum Realtor-Tab.
   Geteilte Primitives (lh-card, lh-badge, lh-filter-bar, lh-view-toggle,
   lh-dialog) kommen aus dem ui-kit + sind weiter oben global gestylt.
   ============================================================================ */
.lh-bl-intro {
  margin-bottom: 1rem;
}
.lh-bl-intro h2 {
  margin: 0 0 0.35rem;
}
.lh-bl-intro p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.lh-bl-intro code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-elev);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
}

.lh-bl-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.lh-bl-header .lh-filter-bar {
  flex: 1;
  min-width: 0;
}

.lh-bl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.85rem;
}

.lh-bl-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin: -0.5rem 0 1rem;
}

.lh-bl-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
  padding: 3rem 1rem;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1rem;
}

.lh-bl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lh-bl-table thead {
  background: var(--bg-elev);
}
.lh-bl-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.lh-bl-table th:hover {
  color: var(--fg);
  background: var(--accent-soft);
}
.lh-bl-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-soft);
  vertical-align: middle;
}
.lh-bl-table tbody tr {
  transition: background 0.15s;
}
.lh-bl-table tbody tr:hover {
  background: var(--bg-elev);
}
.lh-bl-table tbody tr:last-child td {
  border-bottom: none;
}
.lh-bl-table__trunc {
  display: inline-block;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.lh-bl-table__links {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.lh-bl-table__link {
  display: inline-flex;
  color: var(--muted);
}
.lh-bl-table__link:hover {
  color: var(--accent);
}

.lh-bl-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
.lh-bl-facts dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.lh-bl-facts dd {
  margin: 0;
  color: var(--fg);
}

/* =========================================================================
   Auth & Team-Worklist (Task 010) — fitznerIO brand
   Gemeinsame Form-Primitives + Login / Admin / Dashboard / Member-Worklist.
   Boldness konzentriert auf den Verlauf-Glow (Signature); alles andere ruhig.
   ========================================================================= */

/* ----- Gemeinsame Inputs / Selects / Buttons (Scope: neue Views) --------- */
.lh-login input,
.lh-admin input,
.lh-admin select,
.lh-admin textarea,
.lh-worklist input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.lh-login input:focus,
.lh-admin input:focus,
.lh-admin select:focus,
.lh-admin textarea:focus,
.lh-worklist input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lh-admin select { cursor: pointer; }
.lh-admin textarea { resize: vertical; line-height: 1.5; }

/* Primary-Button: Verlauf + Glow — die fitzner-Signatur auf Aktionen. */
.lh-btn-primary,
.lh-login button[type="submit"],
.lh-admin__invite button,
.lh-admin__section form button[type="submit"] {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  background: var(--accent-grad);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.62rem 1.2rem;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: transform 0.12s, box-shadow 0.2s, opacity 0.15s;
}
.lh-btn-primary:hover,
.lh-login button[type="submit"]:hover,
.lh-admin__invite button:hover,
.lh-admin__section form button[type="submit"]:hover {
  box-shadow: var(--glow-strong);
  transform: translateY(-1px);
}
.lh-btn-primary:active,
.lh-login button[type="submit"]:active,
.lh-admin__section form button[type="submit"]:active { transform: translateY(0); }
.lh-login button[type="submit"]:disabled { opacity: 0.6; cursor: wait; box-shadow: none; }

/* Sekundär-Button (Zeilen-Aktionen in der Nutzer-Tabelle). */
.lh-admin__table button {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-soft);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.lh-admin__table button:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lh-admin__status,
.lh-login__status {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0.3rem 0 0;
  min-height: 1.1em;
}

/* ----- Login: zentrierte Glow-Card ---------------------------------------- */
.lh-login {
  max-width: 420px;
  margin: 8vh auto 0;
  padding: 2.4rem 2.2rem 2.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Karte selbst trägt einen sanften violetten Schein. */
  box-shadow: var(--glow), var(--shadow-md);
  position: relative;
  overflow: hidden;
}
/* Verlauf-Hairline am oberen Rand — Markenakzent. */
.lh-login::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-grad);
}
.lh-login h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  color: var(--fg);
}
.lh-login__hint {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.lh-login__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.lh-login input { width: 100%; padding: 0.75rem 0.9rem; font-size: 1rem; }
.lh-login button[type="submit"] { width: 100%; padding: 0.8rem; font-size: 0.95rem; }

/* ----- Admin: Sektions-Karten -------------------------------------------- */
.lh-admin { max-width: 1100px; }
.lh-admin > h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.035em;
  margin: 0 0 0.4rem;
  color: var(--fg);
}
.lh-admin__section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem 1.5rem;
  margin-top: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.lh-admin__section h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 1rem;
}
.lh-admin__invite,
.lh-admin__tabs,
.lh-admin__assign,
.lh-admin__import {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  /* Labels oben ausrichten: verschieden hohe Felder (Textarea vs. Select)
     starten an einer Oberkante statt unten zu hängen. */
  align-items: flex-start;
}
.lh-admin__invite { align-items: flex-end; }
.lh-admin__invite input { flex: 1 1 240px; }
.lh-admin__invite select,
.lh-admin__invite button { align-self: stretch; }
.lh-admin__tabs label,
.lh-admin__assign label,
.lh-admin__import label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
/* Submit-Button auf Feld-Höhe ausrichten — die Labels haben eine Caption-Zeile
   darüber, der buttonlose Submit braucht denselben Top-Offset. */
.lh-admin__assign button[type="submit"],
.lh-admin__import button[type="submit"] { margin-top: 1.05rem; }
.lh-admin__assign textarea { min-width: 260px; }
.lh-admin__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  padding: 0.2rem 0;
  width: 100%;
}
.lh-admin__checkboxes label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--fg-soft);
  cursor: pointer;
}
.lh-admin__checkboxes input { accent-color: var(--accent); width: auto; padding: 0; }
.lh-admin__import input[type="file"] {
  font-size: 0.82rem;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  background: var(--bg-elev);
  padding: 0.5rem 0.7rem;
}

/* Nutzer-Tabelle */
.lh-admin__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1rem;
  font-size: 0.88rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lh-admin__table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.lh-admin__table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-soft);
  vertical-align: middle;
}
.lh-admin__table tbody tr:last-child td { border-bottom: 0; }
.lh-admin__table tbody tr:hover { background: var(--card-hover); }
.lh-admin__table td:last-child { white-space: nowrap; display: flex; gap: 0.35rem; }
.lh-admin__empty {
  margin: 1rem 0 0;
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ----- Dashboard: Leaderboard mit Tagessieger ---------------------------- */
.lh-dashboard { max-width: 720px; }
.lh-dashboard h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.035em;
  margin: 0 0 0.2rem;
  color: var(--fg);
}
.lh-dashboard__sub {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.lh-dashboard__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}
.lh-dashboard__table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0 1rem 0.2rem;
}
.lh-dashboard__table thead th:last-child { text-align: right; }
.lh-dashboard__table tbody td {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--fg-soft);
}
.lh-dashboard__table tbody td:first-child {
  border-left: 1px solid var(--border);
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-mono);
  color: var(--muted);
  width: 3rem;
}
.lh-dashboard__table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.lh-dashboard__count {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
}
/* Tagessieger: Verlauf-Rand + Glow — die Bühne des Dashboards. */
.lh-dashboard__winner td {
  background: linear-gradient(var(--card), var(--card)) padding-box,
              var(--accent-grad) border-box;
  border: 1px solid transparent \!important;
  box-shadow: var(--glow);
  color: var(--fg);
  font-weight: 600;
}
.lh-dashboard__winner td:first-child { color: var(--accent); }
.lh-dashboard__winner .lh-dashboard__count { color: var(--accent); }

/* ----- Member-Worklist: gefilterte Lead-Liste ---------------------------- */
.lh-worklist { max-width: 980px; }
.lh-worklist h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  margin: 0 0 0.2rem;
  color: var(--fg);
  text-transform: capitalize;
}
.lh-worklist__count {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.lh-worklist__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lh-worklist__table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.7rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.lh-worklist__table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-soft);
  font-size: 0.92rem;
  vertical-align: middle;
}
.lh-worklist__table tbody tr:last-child td { border-bottom: 0; }
.lh-worklist__table tbody tr:hover td { background: var(--card-hover); }
.lh-worklist__table td:first-child { font-weight: 600; color: var(--fg); }
.lh-worklist__table a { color: var(--accent); text-decoration: none; }
.lh-worklist__table a:hover { text-decoration: underline; }
.lh-worklist__actions { white-space: nowrap; text-align: right; }
.lh-worklist__actions button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s, transform 0.1s;
}
.lh-worklist__actions button + button { margin-left: 0.4rem; }
.lh-worklist__actions button[data-act="done"]:hover {
  color: var(--cold);
  border-color: color-mix(in srgb, var(--cold) 50%, transparent);
  background: color-mix(in srgb, var(--cold) 14%, transparent);
}
.lh-worklist__actions button[data-act="skip"]:hover {
  color: var(--warm);
  border-color: color-mix(in srgb, var(--warm) 50%, transparent);
  background: var(--warm-soft);
}
.lh-worklist__actions button:active { transform: scale(0.94); }
.lh-worklist__actions button:disabled { opacity: 0.5; cursor: wait; }

/* Reduced motion respektieren. */
@media (prefers-reduced-motion: reduce) {
  .lh-btn-primary, .lh-login button[type="submit"],
  .lh-admin__section form button[type="submit"],
  .lh-worklist__actions button { transition: none; }
  .lh-btn-primary:hover, .lh-login button[type="submit"]:hover { transform: none; }
}

/* Mobile: Form-Reihen umbrechen, Tabellen scrollen horizontal. */
@media (max-width: 640px) {
  .lh-admin__invite, .lh-admin__tabs, .lh-admin__assign, .lh-admin__import { flex-direction: column; align-items: stretch; }
  .lh-admin__section { padding: 1rem; }
  .lh-admin__table, .lh-worklist__table { display: block; overflow-x: auto; }
  .lh-login { margin-top: 4vh; padding: 1.8rem 1.4rem 2rem; }
}

/* ── Kontakt-Ansichten: Anruf (#9) und Outreach (#14) ─────────────────────────
   Beide teilen Aufbau und Mechanik, deshalb sind die Regeln gemeinsam
   geschrieben und nur dort getrennt, wo die Ansichten wirklich abweichen
   (Telefon-Spalte bei Nikita, mehrzeiliger Einstieg bei Artur).
   Farben ausschliesslich ueber die vorhandenen Theme-Variablen — die Ansichten
   muessen in beiden Themes lesbar sein. */

.lh-call,
.lh-out {
  margin-top: 0.6rem;
}

.lh-call__loading,
.lh-out__loading {
  color: var(--muted);
  padding: 1.4rem 0;
}

/* Filter-Leiste ------------------------------------------------------------ */
.lh-call__bar,
.lh-out__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

/* Suchfeld in der Filterleiste (Issue #39). `margin-left: auto` schiebt es
   von den Filtern weg an die rechte Seite — es gehoert nicht zu ihnen, es
   steht quer dazu. */
.lh-out__suche {
  margin-left: auto;
  min-width: 14rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lh-out__suche:focus {
  outline: none;
  border-color: var(--accent);
}
.lh-out__suche::placeholder {
  color: var(--muted);
}
/* Bei schmalem Fenster bricht die Leiste ohnehin um — dann soll das Feld die
   Zeile fuellen statt rechts zu kleben. */
@media (max-width: 720px) {
  .lh-out__suche {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

.lh-call__filter,
.lh-out__filter {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg-soft);
  cursor: pointer;
}
.lh-call__filter:hover,
.lh-out__filter:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}
/* Der aktive Filter MUSS sichtbar sein — sonst weiss niemand, welche Liste er
   gerade vor sich hat. */
.lh-call__filter.is-active,
.lh-out__filter.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg);
}

.lh-call__count,
.lh-out__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}

/* Tabelle ------------------------------------------------------------------ */
.lh-call__table,
.lh-out__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  table-layout: fixed;
}
.lh-call__table thead th,
.lh-out__table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  padding: 0.7rem 0.8rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.lh-call__table td,
.lh-out__table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.85rem;
  /* Fremde Texte (Firmennamen, Notizen) duerfen die Spalte nicht sprengen. */
  overflow-wrap: anywhere;
}

/* Spaltenbreiten: `table-layout: fixed` nimmt sie aus der ERSTEN Zeile, also
   den `<th>`. An `<td>` gesetzt waeren sie wirkungslos — dann stuenden sieben
   gleich breite Spalten da, die leere Knopfspalte so breit wie der Anlass. */
.lh-call__table thead th:nth-child(1) { width: 16%; }  /* Name */
.lh-call__table thead th:nth-child(2) { width: 13%; }  /* Telefon */
.lh-call__table thead th:nth-child(3) { width: 24%; }  /* Anlass */
.lh-call__table thead th:nth-child(4) { width: 15%; }  /* Info */
.lh-call__table thead th:nth-child(5) { width: 12%; }  /* Ergebnis */
.lh-call__table thead th:nth-child(6) { width: 12%; }  /* Notiz */
.lh-call__table thead th:nth-child(7) { width: 8%; }   /* Knoepfe */

/* Sechs Spalten seit #34 — die Einstiegs-Spalte ist entfallen. Ihre 30% gehen
   an PERSON (Headline und Schritt-Kette) und NOTIZ, das vorher auf 8% gequetscht
   war. */
.lh-out__table thead th:nth-child(1) { width: 30%; }   /* Person */
.lh-out__table thead th:nth-child(2) { width: 14%; }   /* Profil */
.lh-out__table thead th:nth-child(3) { width: 16%; }   /* Aktivitaet */
/* ERGEBNIS breit genug fuer den laengsten Wert „Kontaktanfrage raus" —
   knapper stand dort „Kontaktanfrage rav". */
.lh-out__table thead th:nth-child(4) { width: 16%; }   /* Ergebnis */
.lh-out__table thead th:nth-child(5) { width: 14%; }   /* Notiz */
.lh-out__table thead th:nth-child(6) { width: 10%; }   /* Knoepfe */

/* Kopfzeile mitscrollen lassen — ab Zeile 30 weiss sonst niemand mehr, welche
   Spalte was ist. */
.lh-call__table thead th,
.lh-out__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Bestaetigung, wenn die Zeile den Filter verlassen hat (B9). */
.lh-call__flash,
.lh-out__flash {
  font-size: 0.76rem;
  color: var(--accent);
  font-weight: 600;
  margin-left: 0.6rem;
}

/* Leere Liste hat eine Form — sonst ist „fertig" von „kaputt" nicht zu
   unterscheiden (M13). */
.lh-call__empty,
.lh-out__empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
  font-size: 0.85rem;
}

/* Abgeschlossene Zeilen abgesetzt statt entfernt — sichtbar wird das im Filter
   „Alle". Im Standardfilter „Offen" verlaesst die Zeile die Liste ohnehin, weil
   der abschliessende Status nicht in OPEN_STATUS steht; die Rueckmeldung
   uebernimmt dort die Filterleiste (B9). */
.lh-call__row--done td,
.lh-out__row--done td {
  opacity: 0.55;
}

.lh-call__name,
.lh-out__name {
  font-weight: 600;
  color: var(--fg);
}
.lh-call__firm,
.lh-out__firm,
.lh-out__headline {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Telefon gross und treffbar — auch am Handy. */
.lh-call__tel a {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  padding: 0.2rem 0;
}
.lh-call__tel a:hover {
  text-decoration: underline;
}

.lh-call__reason,
.lh-call__info,
.lh-out__activity {
  font-size: 0.8rem;
  color: var(--fg-soft);
}
.lh-call__notes {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 0.3rem;
  font-family: var(--font-mono);
}

/* Der Link, den Artur bei JEDEM Lead anklickt. Ohne Regel erbt er die
   Browser-Vorgabe und steht blau-unterstrichen im dunklen Layout — auf dem
   Bildschirm sieht das aus wie durchgestrichen.
   (Die Klasse hatte vorher nur eine `width`-Regel, die beim Verlegen der
   Spaltenbreiten auf die Kopfzellen zu Recht entfiel — und damit die einzige
   Erwaehnung mitnahm.) */
.lh-out__profile a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
}
.lh-out__profile a:hover {
  text-decoration: underline;
}

/* Er hat nach dem Abschluss geantwortet (Issue #51) — die Marke steht neben
   der Phase und muss auffallen, ohne die Zeile zu uebernehmen. */
.lh-out__tag--zurueck {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

.lh-out__tags {
  margin-top: 0.35rem;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.lh-out__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--muted);
}
/* Die Phasen-Marke hebt sich von `A`/`RU` ab: sie sagt, WO der Lead steht,
   und ist bei einer Suche die einzige Stelle, die das noch verraet. */
.lh-out__tag--phase {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Eingabefelder ------------------------------------------------------------ */
.lh-call__status,
.lh-out__status,
.lh-call__note,
.lh-out__note {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}
.lh-call__note,
.lh-out__note {
  resize: vertical;
  min-height: 2.4rem;
}
/* Link zum kommentierten Beitrag (Issue #25) — unter der Notiz, gleiche Breite. */
.lh-out__post-url {
  width: 100%;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}
/* Tier-Filter (Issue #30) — abgesetzt von den Zustands-Knoepfen, weil er
   ZUSAETZLICH wirkt und nicht statt ihrer. */
.lh-out__tierbar {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--border);
}
.lh-out__tier {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.lh-out__tier:hover {
  color: var(--fg);
}
.lh-out__tier.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
}
.lh-hist__post {
  font-size: 0.7rem;
  color: var(--accent, currentColor);
}
/* Revisions-Modus (Issue #35): ein Lead gross statt der ganzen Tabelle. */
.lh-out__rev {
  max-width: 44rem;
  margin: 1.2rem auto;
  padding: 1.4rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.lh-out__rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.lh-out__rev-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lh-out__rev-prev,
.lh-out__rev-next {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-soft);
  cursor: pointer;
}
.lh-out__rev-prev:hover:not(:disabled),
.lh-out__rev-next:hover:not(:disabled) {
  color: var(--fg);
  border-color: var(--accent);
}
.lh-out__rev-prev:disabled,
.lh-out__rev-next:disabled {
  opacity: 0.35;
  cursor: default;
}
.lh-out__rev-pos {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.lh-out__rev-skip {
  font-family: var(--font-body);
  font-size: 0.72rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.lh-out__rev-skip:hover {
  color: var(--fg);
}
.lh-out__rev-name {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  color: var(--fg);
}
.lh-out__rev-headline {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-soft);
}
.lh-out__rev-links {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.82rem;
}
/* Ohne eigene Farbregel erben die beiden Links die Browser-Vorgabe: dunkelblau
   bzw. violett-unterstrichen auf dunklem Grund, was wie durchgestrichen
   aussieht. Derselbe Fall wie bei `.lh-out__profile a` (Issue #49) — der
   Profil-Link ist der Knopf, den Artur bei jedem Lead drueckt. */
.lh-out__rev-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.lh-out__rev-links a:hover {
  text-decoration: underline;
}
.lh-out__rev-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.lh-out__rev-form .lh-out__note,
.lh-out__rev-form .lh-out__post-url {
  margin-top: 0.6rem;
}
.lh-out__rev-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.lh-out__rev-done {
  text-align: center;
  color: var(--muted);
  padding: 2rem 0;
}
.lh-out__rev-toggle {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  margin-left: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.lh-out__rev-toggle.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--fg);
}

/* Ergebnis als Kaestchen (Issue #35): bei einer Revision stellt sich oft
   mehreres auf einmal heraus, und eine Auswahlliste zwaenge zu zwei
   Speichervorgaengen. */
.lh-out__boxes {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  max-height: 13rem;
  overflow-y: auto;
}
.lh-out__box {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--fg-soft);
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  border-radius: var(--radius);
}
.lh-out__box:hover {
  background: var(--card);
  color: var(--fg);
}
.lh-out__box input {
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}
/* Bereits eingetragene Haken sehen aus wie alle anderen. Kein eigener Zustand:
   ob etwas passiert ist, sagt der Haken selbst — eine zweite Farbe daneben
   erfindet eine Unterscheidung, die niemand braucht. */

/* Wortlaut-Feld (Issue #37) — erscheint nur, wenn ein Haken gesetzt ist, zu
   dem ein Text gehoert. */
.lh-out__message {
  width: 100%;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
}

.lh-call__last,
.lh-out__last {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.35rem;
  font-family: var(--font-body);
}

.lh-call__save,
.lh-out__save,
.lh-call__hist-toggle,
.lh-out__hist-toggle {
  /* Ohne nowrap steht bei 1280 px „Speich / ern" und die Knopfspalte schiebt
     sich ueber den rechten Tabellenrand. */
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.38rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg-soft);
  cursor: pointer;
  margin: 0 0.25rem 0.25rem 0;
}
.lh-call__save,
.lh-out__save {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--fg);
}
.lh-call__hist-toggle:hover,
.lh-out__hist-toggle:hover {
  background: var(--card-hover);
}
/* Die Hauptaktion darf beim Darueberfahren nicht BLASSER werden — vorher
   ueberschrieb `--card-hover` den Akzent. */
.lh-call__save:hover,
.lh-out__save:hover {
  border-color: var(--accent);
  filter: brightness(1.15);
}
.lh-call__save:disabled,
.lh-out__save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lh-call__msg,
.lh-out__msg {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
}

/* Verlauf ------------------------------------------------------------------ */
.lh-call__hist-row td,
.lh-out__hist-row td {
  background: var(--bg-elev);
  padding: 0.6rem 0.9rem;
}
/* Begrenzt wie die Einstiegs-Box — und hier noetiger: in der Historie liegen
   bis zu 16.600 Zeichen. Aufgeklappt schoebe ein Eintrag alle folgenden Leads
   meterweit nach unten, und zum Zuklappen muesste man den Knopf erst
   wiederfinden.
   Die Grenze sitzt an der GANZEN Historie, nicht an der einzelnen Phase: sonst
   bekaeme ein Lead drei Scrollfenster untereinander statt eines Verlaufs. */
.lh-hist__wrap {
  max-height: 34rem;
  overflow-y: auto;
  /* Platz fuer den Balken, damit er nicht auf dem Text liegt. */
  padding-right: 0.4rem;
  /* Der letzte sichtbare Eintrag wird sonst hart vom Rand abgeschnitten und
     sieht aus wie das Ende — dieser Verlauf zeigt, dass noch etwas kommt.
     `local` sorgt dafuer, dass er am Ende der Liste verschwindet. */
  background-image: linear-gradient(to top, var(--bg-elev), transparent);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 2.5rem;
  background-attachment: local;
}
.lh-hist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* Phasen-Ueberschrift in der Historie (Issue #35) — gross genug, um beim
   Ueberfliegen den Abschnitt zu finden. */
.lh-hist__phase {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}
.lh-hist__phase:first-child {
  margin-top: 0;
}
/* Ein Abschnitt je Phase (Issue #37) — die Historie ist der Weg, nicht eine
   Liste gleicher Eintraege. */
.lh-hist__phase-block {
  margin-bottom: 1.4rem;
}
.lh-hist__phase-block:last-child {
  margin-bottom: 0;
}
/* Der Inhalt ruecht unter der Ueberschrift ein — so sieht man auf einen Blick,
   was zu welcher Phase gehoert, auch wenn eine Phase viele Eintraege hat. */
.lh-hist__phase-body {
  padding-left: 0.75rem;
  border-left: 2px solid var(--border);
}
/* Der Abschluss ist das Ende des Wegs, nicht seine Fortsetzung — er tritt
   farblich zurueck. */
.lh-hist__phase-block--ende .lh-hist__phase {
  color: var(--muted);
}
.lh-hist__phase-block--ende .lh-hist__phase-body {
  border-left-color: var(--border);
  opacity: 0.85;
}
/* Farbe wie bei den uebrigen Links — sonst Browser-Vorgabe auf dunklem
   Grund, siehe `.lh-out__rev-links a` (Issue #49). */
.lh-hist__post-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
}
.lh-hist__post-link:hover {
  text-decoration: underline;
}

/* Der Wortlaut in der Historie (Issue #37) — groesser als die Notiz daneben:
   was gesagt wurde, ist die Hauptsache, der Arbeitsvermerk die Nebensache. */
.lh-hist__message {
  margin: 0.3rem 0;
  padding: 0.5rem 0.65rem;
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-elev);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lh-hist__item {
  font-size: 0.78rem;
  color: var(--fg-soft);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
/* Eine EINGEHENDE Nachricht ist die wertvollste Information im Verlauf — sie
   darf nicht aussehen wie ein Kommentar von uns. */
.lh-hist__item--in {
  background: var(--accent-soft);
  color: var(--fg);
}
.lh-hist__chan,
.lh-hist__dir {
  font-family: var(--font-mono);
  color: var(--muted);
  margin-right: 0.3rem;
}
/* Kopfzeile: was geschah steht links, wann rechts — bleibt einzeilig. */
.lh-hist__head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.lh-hist__what {
  font-weight: 600;
  color: var(--fg);
}
/* Das Datum traegt sich zurueck: bei 122 der 429 Ereignisse stammt es aus der
   Migration und ist nur ungefaehr. */
.lh-hist__when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Geschaetztes Datum (Issue #61): die migrierten Kontakte tragen alle den
   Migrationstag. Das Fragezeichen und die gestrichelte Linie sagen, dass hier
   nicht der echte Tag steht — der steht als Text in der Notiz darunter. */
.lh-hist__when--geschaetzt {
  border-bottom: 1px dashed var(--line, #999);
  cursor: help;
}
/* Die Notiz behaelt ihre Absaetze: 419 der 514 Notizen tragen
   Zeilenumbrueche, die HTML sonst wegfaltet (Issue #26). */
.lh-hist__note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fg-soft);
}
/* Zuruecknehmen (Issue #40) — klein und zurueckhaltend: der Normalfall ist,
   dass ein Eintrag stimmt. */
.lh-hist__storno {
  padding: 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.lh-hist__storno:hover {
  color: var(--fg);
  border-color: var(--accent);
}
/* Ein zurueckgenommener Eintrag bleibt sichtbar, tritt aber zurueck — die
   Spur bleibt, das Gewicht nicht. */
.lh-hist__item--storniert {
  opacity: 0.55;
}
.lh-hist__item--storniert .lh-hist__what {
  text-decoration: line-through;
}
.lh-hist__storniert {
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
}

.lh-hist__more {
  margin-top: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-family: var(--font-body);
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.lh-hist__more:hover,
.lh-hist__steps-more:hover {
  color: var(--fg);
}
.lh-hist__steps-more {
  margin-top: 0.3rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-family: var(--font-body);
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.lh-hist__steps--rest {
  margin-top: 0.3rem;
}
/* `display: flex` auf .lh-hist__steps schlaegt das HTML-Attribut `hidden`,
   sonst belegt die eingeklappte Liste weiter ihre volle Hoehe. */
.lh-hist__steps[hidden] {
  display: none;
}
/* Der `── Verlauf ──`-Block als Liste statt als Fliesstext — bis zu neun
   datierte Schritte steckten bisher in einem Absatz. */
.lh-hist__steps {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lh-hist__steps li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
}
.lh-hist__step-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.lh-hist__step-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lh-hist__step-ru {
  grid-column: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.74rem;
}
.lh-hist__item--in .lh-hist__dir {
  color: var(--accent);
}
.lh-hist__empty {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 720px) {
  /* Wie bei den bestehenden Tabellen: seitlich scrollen statt zerbrechen. */
  .lh-call__table,
  .lh-out__table {
    display: block;
    overflow-x: auto;
    table-layout: auto;
    white-space: nowrap;
  }
  .lh-call__table td,
  .lh-out__table td {
    white-space: normal;
    min-width: 9rem;
  }
}


/* Kommentar-Geruest im Revisions-Modus (Issue #59). Zugeklappt und schmal
   gehalten: es ist Rohmaterial, kein fertiger Text. Die alte EINSTIEG-Spalte
   war die breiteste der Ansicht und sah dadurch aus wie erledigte Arbeit. */
.lh-out__geruest {
  margin: .6rem 0;
  padding: .5rem .7rem;
  border: 1px dashed var(--line, #999);
  border-radius: 6px;
  font-size: .9rem;
}
.lh-out__geruest > summary {
  cursor: pointer;
  color: var(--muted, #888);
}
.lh-out__geruest-hinweis {
  margin: .5rem 0 .3rem;
  color: var(--muted, #888);
  font-size: .85rem;
}
.lh-out__geruest-text {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.5;
}