/* ============================================================
   CMA – Campera Media Atlas
   Design System: Rayim Clay (Paper & Asphalt, Bodoni Moda & Archivo, Vascular Red), seit 15.10.2026
   ============================================================ */

/* Schriften der Rayim-Clay-Website (Website/style.css): Bodoni Moda fuer den
   Mythos, Archivo fuer die Akte. Lokal ausgeliefert, kein Google-Fonts-Aufruf. */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../assets/fonts/bodoni-moda-latin.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../assets/fonts/bodoni-moda-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../assets/fonts/archivo-latin.woff2') format('woff2'); }

/* ─── CSS VARIABLES ──────────────────────────────────────────── */
/* Theme-Strategie wie auf campera.media (CM 2026/DESIGN.md):
   <html data-theme="dark|light">, gesetzt vom Pre-Paint-Snippet in index.html.
   Reihenfolge: gespeicherte Wahl → prefers-color-scheme → Dark.
   :root traegt die Dark-Werte als Fallback ohne JS.

   Neutralwerte laufen ueber den Kanal --n (255,255,255 dark / 10,10,10 light);
   Flaechen und Linien schreiben rgba(var(--n), alpha) und behalten ihr Alpha in
   beiden Themes. Text laeuft ueber --text-* mit PRO THEME getunten Alphas.

   Die Alphas liegen bewusst ueber der Rampe der Hauptseite (dort .72/.64/.55):
   das CRM ist eine dichte Arbeitsoberflaeche mit 13-15px-Text, tagsueber am
   Laptop. Sekundaertext .80, Muted .62, Dim .42 — Dim ist nur noch fuer
   Platzhalter und Dekor gedacht, nie fuer Information. */

/* Theme-unabhaengig */
:root {
  /* Rayim Clay (Visuals/Color Palette/COLOR_SYSTEM.md): Vascular Red #8B0000
     ist der Puls, spaerlich gesetzt. Als Flaeche mit weisser Schrift 10:1. */
  --accent:         #8B0000;
  --accent-hover:   #A3171B;
  --accent-rgb:     139, 0, 0;
  --accent-dim:     rgba(139, 0, 0, 0.12);
  --accent-border:  rgba(139, 0, 0, 0.45);
  --on-accent:      #FDFBF7;   /* Text/Icons auf roter oder bunter Flaeche: Cremeweiss */

  /* Backward compat aliases */
  --gold:           var(--accent);
  --gold-light:     var(--accent-light);
  --gold-dim:       var(--accent-dim);
  --gold-border:    var(--accent-border);
  --signal-red:     var(--accent);

  /* Layout */
  --sidebar-width:  280px;
  --radius-sm:      3px;
  --radius:         6px;
  --radius-lg:      10px;
  --radius-xl:      14px;
  --radius-pill:    100px;

  /* Typography */
  --font-serif:     'Bodoni Moda', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --font-ui:        'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:      'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:      var(--font-body);
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Easing */
  --ease:           cubic-bezier(.22,1,.36,1);
  --ease2:          cubic-bezier(.16,1,.3,1);
}

/* ── DARK (nur auf ausdruecklichen Wunsch, Schluessel rc_theme) ── */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Dunkel ist die Ausnahme (nur auf Wunsch): warmes Dunkelbraun statt Schwarz,
     damit es nicht wie das CMA (Schwarz mit Signalrot) wirkt. Text ist Bone
     #E9E5DD, der Neutralkanal ebenfalls, Flaechen und Linien bleiben warm. */
  --n:              233, 229, 221;

  --bg:             #171310;
  --bg-l:           #1D1815;
  --bg-card:        #211B17;
  --bg-card-hover:  #2A231E;
  --bg-elevated:    #2E2722;
  --bg-input:       #141110;
  --bg-void:        #171310;
  --bg-deep:        #120E0C;

  --fg:             #E9E5DD;
  --text-primary:   #E9E5DD;
  --text-secondary: rgba(233,229,221,0.82);
  --text-muted:     rgba(233,229,221,0.64);
  --text-dim:       rgba(233,229,221,0.44);

  /* Rot als Fliesstext: #8B0000 erreicht auf Asphalt nur 2:1,
     #D0514A kommt auf 4.6:1. Im Light Mode ist es das Vascular Red selbst. */
  --accent-light:   #D0514A;

  --border:         rgba(233,229,221,0.14);
  --border-active:  rgba(208, 81, 74, 0.55);
  --line:           rgba(233,229,221,0.12);
  --line-d:         rgba(233,229,221,0.07);

  --success:        #22c55e;  --success-rgb: 34, 197, 94;
  --danger:         #ff4757;  --danger-rgb:  255, 71, 87;
  --warning:        #f59e0b;  --warning-rgb: 245, 158, 11;
  --info:           #818cf8;  --info-rgb:    129, 140, 248;
  --purple:         #c084fc;  --purple-rgb:  192, 132, 252;
  --teal:           #2dd4bf;  --teal-rgb:    45, 212, 191;
  --orange:         #fb923c;  --orange-rgb:  251, 146, 60;

  --shadow:         rgba(0,0,0,.5);
  --shadow-s:       rgba(0,0,0,.3);
  --scrim:          rgba(0,0,0,.6);
  /* Versenkte Flaechen (Code-Boxen, Vorschau-Kaesten): dunkler als die Karte */
  --sunken-1:       rgba(0,0,0,.15);
  --sunken-2:       rgba(0,0,0,.30);

  /* Legacy-Namen aus aelteren Modulen (waren nie definiert, Fallbacks griffen) */
  --surface:        var(--bg-card);
  --surface-1:      var(--bg-card);
  --surface-2:      var(--bg-elevated);
  --card-bg:        var(--bg-card);
  --bg-primary:     var(--bg);
  --text:           var(--text-primary);
  --seq-muted:      var(--text-muted);
}

/* ── LIGHT (Clay-Welt der Website: Paper #F2EFE9, Cremeweiss #FDFBF7, Ink #151413) ── */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --n:              21, 20, 19;

  --bg:             #F2EFE9;
  --bg-l:           #FDFBF7;
  --bg-card:        #FDFBF7;
  --bg-card-hover:  #F7F3EC;
  --bg-elevated:    #FFFEFB;
  --bg-input:       #FFFEFB;
  --bg-void:        #F2EFE9;
  --bg-deep:        #E9E5DD;

  --fg:             #151413;
  --text-primary:   #151413;
  --text-secondary: rgba(21,20,19,0.82);
  --text-muted:     rgba(21,20,19,0.64);
  --text-dim:       rgba(21,20,19,0.46);

  --accent-light:   #8B0000;

  --border:         rgba(21,20,19,0.16);
  --border-active:  rgba(139, 0, 0, 0.50);
  --line:           rgba(21,20,19,0.13);
  --line-d:         rgba(21,20,19,0.08);

  /* Statusfarben dunkler, damit sie auf Papier AA halten (>= 4.5:1) */
  --success:        #15803d;  --success-rgb: 21, 128, 61;
  --danger:         #dc2626;  --danger-rgb:  220, 38, 38;
  --warning:        #b45309;  --warning-rgb: 180, 83, 9;
  --info:           #4f46e5;  --info-rgb:    79, 70, 229;
  --purple:         #7c3aed;  --purple-rgb:  124, 58, 237;
  --teal:           #0f766e;  --teal-rgb:    15, 118, 110;
  --orange:         #c2410c;  --orange-rgb:  194, 65, 12;

  --shadow:         rgba(21,20,19,.16);
  --shadow-s:       rgba(21,20,19,.09);
  --scrim:          rgba(21,20,19,.45);
  --sunken-1:       rgba(21,20,19,.04);
  --sunken-2:       rgba(21,20,19,.06);
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow: hidden;
}
input, select, textarea, button { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),0.4); }

/* ─── APP LAYOUT ─────────────────────────────────────────────── */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-l);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Sidebar Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
}

.logo-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
}

.logo-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-main {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.logo-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}

/* Search in Sidebar */
.sidebar-search { padding: 14px 14px 6px; position: relative; }

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

.search-icon {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

#search-input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
#search-input::placeholder { color: var(--text-muted); }
#search-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

.nav-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  padding: 12px 10px 6px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-secondary);
  font-size: 15px;
  position: relative;
  user-select: none;
}
.nav-item:hover { background: rgba(var(--n),.07); color: var(--fg); }
.nav-item.active {
  background: var(--accent-dim);
  color: var(--fg);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-item.active .nav-icon { color: var(--accent); }

.nav-icon { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-label { flex: 1; }
/* Direct SVG inside nav-item (no .nav-icon wrapper) — same size as .nav-icon svg */
.nav-item > svg { width: 15px; height: 15px; flex-shrink: 0; }

.nav-count {
  font-size: 12px;
  font-weight: 600;
  background: rgba(var(--n),.13);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.nav-item.active .nav-count {
  background: var(--accent);
  color: var(--on-accent);
}

/* Signal / notification badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: var(--danger);
  color: var(--on-accent);
  margin-left: auto;
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb),0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(var(--danger-rgb),0); }
}

/* ─── Talents & Ressources nav-group (collapsible CRM submenu) ──────────── */
.nav-item-group {
  display: flex;
  flex-direction: column;
}
.nav-item-group .nav-item-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-secondary);
  font-size: 15px;
  position: relative;
  user-select: none;
}
.nav-item-group .nav-item-header:hover {
  background: rgba(var(--n),.07);
  color: var(--fg);
}
.nav-item-group .nav-item-header.open {
  color: var(--fg);
}
.nav-item-group .nav-item-header .nav-label { flex: 1; }
.nav-item-group .nav-item-header .nav-icon { flex-shrink: 0; width: 20px; display: flex; align-items: center; justify-content: center; }
.nav-item-group .nav-item-header .nav-icon svg { width: 15px; height: 15px; }
.nav-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}
.nav-item-group .nav-item-header.open .nav-chevron {
  transform: rotate(90deg);
  opacity: 1;
}
.nav-subitems {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.nav-subitems.open {
  max-height: 800px;
}
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-muted);
  font-size: 14px;
  position: relative;
  user-select: none;
}
.nav-subitem:hover { background: rgba(var(--n),.07); color: var(--fg); }
.nav-subitem.active {
  background: var(--accent-dim);
  color: var(--fg);
}
.nav-subitem.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-subitem .sub-icon { flex-shrink: 0; font-size: 14px; width: 16px; text-align: center; }
.nav-subitem .sub-label { flex: 1; }
.nav-subitem .sub-count {
  font-size: 12px;
  font-weight: 600;
  background: rgba(var(--n),.13);
  color: var(--text-secondary);
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}
.nav-subitem.active .sub-count {
  background: var(--accent);
  color: var(--on-accent);
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
}

.btn-sidebar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  background: rgba(var(--n),.07);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-sidebar svg { width: 14px; height: 14px; }
/* Theme-Knopf: Mond im Dunkeln, Sonne im Hellen */
#btn-theme .theme-icon-sun  { display: none; }
#btn-theme.is-light .theme-icon-sun  { display: block; }
#btn-theme.is-light .theme-icon-moon { display: none; }
.btn-sidebar:hover {
  background: rgba(var(--n),.13);
  border-color: rgba(var(--n),.22);
  color: var(--fg);
}

/* ─── MAIN CONTENT ───────────────────────────────────────────── */
.main-content {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#view-container {
  flex: 1;
  min-height: 0;
}

/* ─── LIST VIEW ──────────────────────────────────────────────── */
.list-view { height: 100%; display: flex; flex-direction: column; }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.list-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.list-title h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--fg);
  letter-spacing: -0.02em;
}

.result-count {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.list-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-select {
  padding: 8px 14px;
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  font-family: var(--font-body);
}
.control-select:focus { outline: none; border-color: var(--accent-border); }
.control-select:hover { border-color: rgba(var(--n),.22); color: var(--fg); }

/* ─── PRIMARY BUTTON ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.btn-primary svg { width: 14px; height: 14px; }
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.btn-secondary svg { width: 14px; height: 14px; }
.btn-secondary:hover {
  border-color: rgba(var(--n),.36);
  color: var(--fg);
  background: rgba(var(--n),.07);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid rgba(var(--danger-rgb),0.3);
  border-radius: var(--radius-pill);
  color: var(--danger);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.btn-danger svg { width: 14px; height: 14px; }
.btn-danger:hover { background: rgba(var(--danger-rgb),0.08); border-color: var(--danger); }

/* ─── CONTACT GRID ───────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* Linien als Kartenraender statt als durchscheinender Rasterhintergrund:
   leere Zellen in der letzten Reihe blieben sonst als Flaeche stehen. */
.contact-card {
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.contact-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s var(--ease);
}
.contact-card:hover { background: var(--bg-card); }
.contact-card:hover::after { transform: scaleY(1); }

.card-avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.avatar-initials {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: rgba(var(--n),.96);
  letter-spacing: 0.02em;
}

.status-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.card-body { flex: 1; min-width: 0; }

.card-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.card-fullname {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-stagename {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid rgba(var(--n),.16);
  color: rgba(var(--n),.83);
  background: rgba(var(--n),.07);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.cat-chip svg { width: 11px; height: 11px; flex-shrink: 0; }

.cat-chip-more {
  background: rgba(var(--accent-rgb),0.1);
  border-color: rgba(var(--accent-rgb),0.2);
  color: var(--accent);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.meta-item {
  font-size: 13px;
  color: var(--text-muted);
}

.gema-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--accent);
}

.card-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-contact svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ─── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  text-align: center;
  gap: 16px;
  height: 100%;
}

.empty-icon {
  font-size: 48px;
  color: var(--accent);
  opacity: 0.4;
}

.empty-state h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--fg);
}

.empty-state p {
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.7;
  font-size: 16px;
}

/* ─── DETAIL VIEW ────────────────────────────────────────────── */
.detail-view { padding: 32px; max-width: 900px; margin: 0 auto; }

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.detail-actions { display: flex; gap: 10px; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
/* Die Beschriftung nennt jetzt das Ziel ("Zurueck zum Versandprotokoll") und
   ist damit laenger als das frueher alleinstehende "Zurueck". Ohne nowrap
   bricht sie in der Kopfzeile auf zwei Zeilen um. */
.btn-back { white-space: nowrap; }
.btn-back svg { width: 14px; height: 14px; }
.btn-back:hover {
  border-color: rgba(var(--n),.36);
  color: var(--fg);
}

.detail-card {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 32px 28px;
  border-bottom: 1px solid var(--line);
}

.detail-avatar {
  width: 72px; height: 72px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 26px;
  color: rgba(var(--n),.96);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 72px; height: 72px;
}
.detail-avatar-wrap .detail-avatar { width: 100%; height: 100%; }

.detail-avatar-img,
.card-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.avatar-camera-btn {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.avatar-camera-btn svg { width: 22px; height: 22px; color: var(--fg); filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.detail-avatar-wrap:hover .avatar-camera-btn {
  opacity: 1;
  background: rgba(0,0,0,0.45);
}

.avatar-delete-btn {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--danger);
  border: none;
  color: var(--fg);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.detail-avatar-wrap:hover .avatar-delete-btn { opacity: 1; }

.card-avatar { overflow: hidden; }

.detail-title h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 6px;
}

.detail-stagename {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.detail-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.cat-chip-lg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(var(--n),.16);
  color: rgba(var(--n),.86);
  background: rgba(var(--n),.08);
}
.cat-chip-lg svg { width: 12px; height: 12px; flex-shrink: 0; }

.status-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px 32px;
}

.detail-section {
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--line);
}
.detail-section:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.detail-section:nth-last-child(-n+2) { border-bottom: none; }

.detail-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
}

.detail-row-label {
  color: rgba(var(--n),.72);
  flex-shrink: 0;
  min-width: 130px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.detail-row-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.8;
  color: var(--text-secondary);
}

.detail-row-value { color: rgba(var(--n),.92); font-weight: 500; }

.detail-link {
  color: var(--accent);
  transition: opacity 0.2s;
}
.detail-link:hover { opacity: 0.75; }

.detail-notes {
  padding: 24px 32px;
  border-top: 1px solid var(--line);
  background: rgba(var(--n),.04);
}
.detail-notes p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
}

.detail-timestamps {
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 100px;
  background: rgba(var(--n),.1);
  border: 1px solid rgba(var(--n),.18);
  color: rgba(var(--n),.76);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.source-badge svg {
  width: 11px;
  height: 11px;
  opacity: 0.6;
}

/* ─── FORM VIEW ──────────────────────────────────────────────── */
.form-view { padding: 32px; max-width: 740px; margin: 0 auto; }

.form-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.form-header h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.contact-form { display: flex; flex-direction: column; gap: 1px; }

.form-section {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 12px;
}

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-group:last-child { margin-bottom: 0; }

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Status Pill Buttons */
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--n),.16);
  background: rgba(var(--n),.07);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}
.radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Selected state via :has() */
.radio-label:has(input:checked) {
  border-color: var(--status-color, var(--accent));
  background: color-mix(in srgb, var(--status-color, var(--accent)) 15%, transparent);
  color: rgba(var(--n),.98);
}
.radio-label:hover:not(:has(input:checked)) {
  border-color: rgba(var(--n),.36);
  background: rgba(var(--n),.12);
  color: rgba(var(--n),.91);
}

/* Category Checkboxes */
.category-checkboxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.cat-checkbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.cat-checkbox input { display: none; }

.cat-icon-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--n),.18);
  background: rgba(var(--n),.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  color: rgba(var(--n),.58);
}
.cat-icon-ring svg { width: 26px; height: 26px; flex-shrink: 0; }

.cat-checkbox-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.35;
  max-width: 80px;
}

.cat-checkbox:hover .cat-icon-ring {
  border-color: rgba(var(--n),.52);
  background: rgba(var(--n),.1);
  color: rgba(var(--n),.88);
}
.cat-checkbox.checked .cat-icon-ring {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  color: var(--fg);
}
.cat-checkbox.checked .cat-checkbox-label {
  color: var(--fg);
}

/* Language Checkboxes */
.language-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.lang-checkbox input { display: none; }
.lang-checkbox:hover { border-color: rgba(var(--n),.22); color: var(--fg); }
.lang-checkbox.checked {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--fg);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.btn-save { padding: 10px 28px; font-size: 16px; }

/* ─── LOADING SCREEN ─────────────────────────────────────────── */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--bg);
  transition: opacity 0.6s var(--ease);
}
.loading-screen.hide { opacity: 0; pointer-events: none; }

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loader-logo {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}

.loader-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.loader-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--fg);
  letter-spacing: 0.08em;
}

.loader-bar {
  width: 120px;
  height: 1px;
  background: rgba(var(--n),.13);
  border-radius: 1px;
  margin-top: 8px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  animation: loadBar 1.5s var(--ease2) forwards;
}
@keyframes loadBar { from { width: 0; } to { width: 100%; } }

/* ─── LOGIN SCREEN ───────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s;
}
.login-overlay.fade-out { opacity: 0; pointer-events: none; }

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 48px 44px;
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 2;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.login-logo-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
}

.login-logo-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.login-logo-text { display: flex; flex-direction: column; gap: 3px; }

.login-logo-main {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--fg);
  letter-spacing: 0.03em;
}

.login-logo-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

.login-divider {
  height: 1px;
  background: var(--line);
  margin-bottom: 28px;
}

.login-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-field { display: flex; flex-direction: column; gap: 6px; }

.login-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-field-icon {
  position: absolute;
  left: 14px;
  width: 15px; height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.login-input-wrapper input {
  width: 100%;
  padding: 13px 44px 13px 42px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input-wrapper input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.login-input-wrapper input::placeholder { color: var(--text-muted); }

.toggle-pw {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.2s;
}
.toggle-pw svg { width: 16px; height: 16px; }
.toggle-pw:hover { color: var(--fg); }

.login-error {
  font-size: 14px;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.btn-login svg { width: 16px; height: 16px; }
.btn-login:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb),0.4);
}
.btn-login:active { transform: translateY(0); }

.login-forgot {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 14px;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.login-forgot:hover { color: var(--fg); }

.login-hint {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
}
.login-hint code {
  font-family: 'Courier New', monospace;
  background: rgba(var(--accent-rgb),0.1);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 14px;
}

.login-bg-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ─── TOAST NOTIFICATIONS ────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50000;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.35s var(--ease);
  max-width: 300px;
  backdrop-filter: blur(12px);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-color: rgba(var(--success-rgb),0.3); background: rgba(var(--success-rgb),0.1); }
.toast-error { border-color: rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.1); }

/* ─── ERROR SCREEN ───────────────────────────────────────────── */
.error-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 16px;
  text-align: center;
}
.error-icon { font-size: 48px; color: var(--danger); }
.error-screen h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg);
}
.error-screen p { color: var(--text-secondary); font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE – PWA MOBILE OPTIMIERUNG
   Breakpoints: 768px (tablet), 480px (mobile)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── MOBILE HEADER (nur auf ≤768px) ─────────────────────────────── */
.mobile-header {
  display: none;
}

/* ─── SIDEBAR CLOSE BUTTON (nur Mobile) ──────────────────────────── */
.sidebar-close {
  display: none;
}

/* ─── SIDEBAR BACKDROP ────────────────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  z-index: 199;
  opacity: 0;
  transition: opacity 0.3s;
}
.sidebar-backdrop.show {
  opacity: 1;
}

/* ─── TABLET: 768px ──────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Layout: Stack statt Side-by-Side */
  #app {
    flex-direction: column;
    overflow: auto;
  }

  body {
    overflow: auto;
  }

  /* Mobile Header einblenden */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    background: var(--bg-l);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
  }

  .mobile-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }

  /* Hamburger Button */
  .hamburger {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .hamburger:hover { background: rgba(var(--n),.1); color: var(--fg); }
  .hamburger svg { width: 20px; height: 20px; }

  /* Mobile Brand */
  .mobile-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--fg);
  }
  .mobile-header-brand img { width: 22px; height: 22px; object-fit: contain; }

  /* Mobile Add Button */
  .btn-mobile-add {
    background: var(--accent);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    color: var(--on-accent);
    flex-shrink: 0;
  }
  .btn-mobile-add:hover { background: var(--accent-hover); transform: scale(1.05); }
  .btn-mobile-add:active { transform: scale(0.95); }
  .btn-mobile-add svg { width: 18px; height: 18px; }

  /* Sidebar: Slide-in Drawer */
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,0.6);
  }

  /* Backdrop einblenden */
  .sidebar-backdrop {
    display: block;
    pointer-events: none;
  }
  .sidebar-backdrop.show {
    pointer-events: all;
  }

  /* Close-Button in Sidebar */
  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(var(--n),.1);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
  }
  .sidebar-close:hover { background: rgba(var(--n),.16); color: var(--fg); }
  .sidebar-close svg { width: 14px; height: 14px; }

  /* Sidebar Logo: etwas Abstand für Close-Button */
  .sidebar-logo { padding-right: 52px; }

  /* Main: volle Breite */
  .main-content {
    width: 100%;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #view-container {
    height: auto;
    overflow-y: visible;
  }

  /* List Header: kompakter */
  .list-header {
    padding: 20px 16px 14px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .list-title h1 { font-size: 1.4rem; }

  .list-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Desktop Add Button in List verstecken (haben den Mobile-Button) */
  .list-controls .btn-primary#btn-add {
    display: none;
  }

  /* Contact Grid: 1 Spalte */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Contact Card: Touch-optimiert */
  .contact-card {
    padding: 16px;
    min-height: 72px;
  }
  .contact-card:active { background: var(--bg-card-hover); }

  /* Detail View */
  .detail-view {
    padding: 16px;
    max-width: 100%;
  }

  .detail-hero {
    flex-direction: column;
    gap: 16px;
    padding: 20px 20px 16px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    padding: 16px 20px;
  }
  .detail-section { padding: 16px 0; }
  .detail-section:nth-child(even) {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .detail-section:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .detail-section:last-child { border-bottom: none; }

  .detail-notes { padding: 16px 20px; }
  .detail-timestamps { padding: 12px 20px; }

  .detail-actions { flex-wrap: wrap; gap: 8px; }

  /* Form View */
  .form-view {
    padding: 16px;
    max-width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Form inputs: größere Touch-Targets */
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 18px; /* verhindert iOS zoom */
  }

  /* Kategorie-Grid: 3 Spalten auf Tablet */
  .category-checkboxes {
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-icon-ring { width: 62px; height: 62px; }
  .cat-icon-ring svg { width: 22px; height: 22px; }

  /* Sprach-Checkboxes: wrapping */
  .language-checkboxes { gap: 6px; }
  .lang-checkbox { font-size: 13px; padding: 5px 10px; }

  /* Form Actions: full width buttons */
  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .form-actions .btn-danger {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 16px;
  }

  /* Detail Header: Stack */
  .detail-header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }

  /* Back + Actions: Touch-größen */
  .btn-back, .btn-secondary, .btn-danger {
    min-height: 44px;
  }

  /* Toasts: unten zentriert */
  #toast-container {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 16px;
    left: 16px;
    align-items: center;
  }
  .toast { max-width: 100%; text-align: center; }

  /* Control-Selects */
  .control-select {
    font-size: 15px;
    padding: 8px 12px;
  }

  /* Login Card: volle Breite */
  .login-card {
    max-width: 100%;
    border-radius: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 28px;
  }
}

/* ─── MOBILE: 480px ──────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Kategorie-Grid: 2 Spalten auf kleinen Phones */
  .category-checkboxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .cat-icon-ring { width: 56px; height: 56px; }
  .cat-icon-ring svg { width: 20px; height: 20px; }
  .cat-checkbox-label { font-size: 11px; max-width: 70px; }

  /* Contact Card: kompakter */
  .contact-card { padding: 14px 12px; gap: 12px; }
  .card-avatar { width: 42px; height: 42px; }
  .avatar-initials { font-size: 16px; }
  .card-fullname { font-size: 15px; }

  /* List Header */
  .list-header { padding: 14px 12px 10px; }
  .list-title h1 { font-size: 1.25rem; }

  /* Detail */
  .detail-view { padding: 12px; }
  .detail-hero { padding: 16px; }
  .detail-avatar { width: 56px; height: 56px; font-size: 22px; }
  .detail-title h2 { font-size: 1.4rem; }

  /* Form */
  .form-view { padding: 12px; }
  .form-section { padding: 16px; }

  /* Selects */
  .control-select { display: none; }
  .list-controls { justify-content: flex-end; }

  /* Toast */
  #toast-container { right: 8px; left: 8px; }
}

/* ─── SAFE AREA (iPhone Notch / Dynamic Island) ───────────────────── */
@supports (padding: max(0px)) {
  .mobile-header {
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  .sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #toast-container {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .main-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ─── TOUCH: Kein Hover-Flash auf Mobile ─────────────────────────── */
@media (hover: none) {
  .contact-card:hover { background: var(--bg); }
  .nav-item:hover { background: transparent; }
  .btn-primary:hover { transform: none; box-shadow: none; }
  .btn-login:hover { transform: none; box-shadow: none; }
}


/* ─── MOBILE SCROLL-CONTEXT KORREKTUR ─────────────────────────────── */
@media (max-width: 768px) {
  /* App füllt genau den Viewport – kein doppeltes Scrollen */
  html, body {
    height: 100%;
    overflow: hidden;
  }
  #app {
    height: 100%;
    overflow: hidden;
    flex-direction: column;
  }
  .mobile-header {
    flex-shrink: 0;
    position: relative; /* Kein sticky nötig – bleibt durch Flex-Layout oben */
  }
  .main-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  #view-container {
    height: auto;
    min-height: 100%;
    overflow-y: visible;
  }
}

/* ─── BRUTE-FORCE LOCKOUT UI ─────────────────────────────────────── */
.login-error {
  font-size: 14px;
  color: var(--danger);
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}

#login-password:disabled,
#btn-login:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN: USERNAME FELD + ICON
   ═══════════════════════════════════════════════════════════════════ */

.login-input-wrapper {
  position: relative;
}

.login-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Username input: Icon-Offset */
#login-username {
  padding-left: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR: USER BAR
   ═══════════════════════════════════════════════════════════════════ */

.sidebar-io {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.sidebar-io .btn-sidebar {
  flex: 1;
}

.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(var(--n),.07);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background 0.2s;
}

.user-bar-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--danger));
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.user-bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-bar-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-bar-role {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-bar-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-icon {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
}
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon:hover {
  background: rgba(var(--n),.13);
  border-color: var(--border);
  color: var(--fg);
}
.btn-icon-danger:hover {
  background: rgba(var(--accent-rgb),0.12);
  border-color: rgba(var(--accent-rgb),0.3);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   SETTINGS VIEW
   ═══════════════════════════════════════════════════════════════════ */

.settings-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px 40px;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.settings-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-header h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--fg);
  margin: 0;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  background: rgba(var(--n),.07);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

.settings-tab {
  background: none;
  border: none;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.settings-tab.active {
  background: var(--accent);
  color: var(--on-accent);
}
.settings-tab:hover:not(.active) {
  color: var(--fg);
  background: rgba(var(--n),.1);
}

.settings-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.settings-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.settings-body { display: flex; flex-direction: column; gap: 20px; }

.settings-panel { display: none; flex-direction: column; gap: 16px; }
.settings-panel.active { display: flex; }

.settings-card {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 600;
}
.settings-card-header > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}

.settings-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--danger));
  color: var(--on-accent);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-username {
  font-size: 19px;
  font-weight: 600;
  color: var(--fg);
}

.settings-user-role {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.settings-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 18px 24px 0;
  margin: 0;
}

.settings-form {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-feedback {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.4;
}
.settings-feedback.error {
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--danger);
}
.settings-feedback.success {
  background: rgba(var(--success-rgb),0.08);
  border: 1px solid rgba(var(--success-rgb),0.2);
  color: var(--success);
}

.label-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.totp-hint {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.totp-active-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--success);
}

.totp-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border-radius: var(--radius-sm);
  width: fit-content;
}
.totp-qr-wrap svg { display: block; }

.totp-backup-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding: 14px 16px;
  background: rgba(var(--n),.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 15px;
  color: var(--text-primary);
}

.btn-save {
  align-self: flex-start;
  padding: 10px 22px;
}

/* ─── USER LIST ──────────────────────────────────────────────────── */

.user-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}

.user-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--n),.07);
}
.user-list-item:last-child { border-bottom: none; }

.user-list-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--info), var(--teal));
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-list-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-list-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.user-self-tag {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-sm {
  padding: 6px 10px;
  font-size: 14px;
  gap: 5px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-sm svg { width: 13px; height: 13px; }

/* ─── WARNING COLOR ──────────────────────────────────────────────── */
:root { --warning: var(--warning); }

/* ─── RESPONSIVE: SETTINGS ──────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-view {
    padding: 16px;
  }
  .settings-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .settings-card-header { padding: 16px; }
  .settings-form { padding: 12px 16px 20px; }
  .settings-card-title { padding: 14px 16px 0; }
  .user-list { padding: 8px 16px; }
  .settings-tabs { width: 100%; }
  .settings-tab { flex: 1; text-align: center; }
  .btn-save { width: 100%; justify-content: center; }
}


/* ─── USER BAR FIX: overflow + flex-width ────────────────────────── */
.sidebar-footer {
  overflow: hidden;          /* kein overflow rechts */
  min-width: 0;
  flex-direction: column;    /* Name ueber den Knoepfen, nicht daneben (21.10.2026) */
  align-items: stretch;
}

.user-bar {
  width: 100%;
  box-sizing: border-box;    /* padding zählt zur Breite */
  min-width: 0;
  padding: 8px 10px;         /* etwas kompakter */
}

.user-bar-info {
  flex: 1;
  min-width: 0;              /* erlaubt text-overflow */
  overflow: hidden;
}

.user-bar-text {
  min-width: 0;
  overflow: hidden;
}

.user-bar-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.user-bar-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.user-bar-actions {
  flex-shrink: 0;            /* Icons schrumpfen nie */
  display: flex;
  gap: 2px;
}

.user-avatar-sm {
  flex-shrink: 0;            /* Avatar schrumpft nie */
}

/* Export/Import nebeneinander, exakt auf Sidebar-Breite */
.sidebar-io {
  display: flex;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── SIDEBAR FOOTER: NEUE STRUKTUR ─────────────────────────────── */

/* User-Info-Zeile (oben) */
.user-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

/* 4 gleich große Buttons in einer Reihe */
.sidebar-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  width: 100%;
}

/* Alle Sidebar-Buttons gleiche Größe */
.btn-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  font-size: 12px;
  min-height: 54px;
  box-sizing: border-box;
}

.btn-sidebar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-sidebar-label {
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Logout-Button: rötlich */
.btn-sidebar-logout {
  color: var(--danger);
}
.btn-sidebar-logout:hover {
  background: rgba(var(--accent-rgb),0.12);
  border-color: rgba(var(--accent-rgb),0.25);
  color: var(--danger);
}

/* Sidebar-IO-Klasse nicht mehr nötig */
.sidebar-io { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   DEMO / AUDIO PLAYER
   ═══════════════════════════════════════════════════════════════════ */

/* ─── DOC / PDF SECTION ─────────────────────────────────────────────────── */
.doc-section {
  border-top: 1px solid var(--line);
  padding: 20px 32px;
}
.doc-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.doc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  flex: 1;
}
.doc-section-title svg { width: 14px; height: 14px; }
.doc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 700;
}
.doc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius);
  background: rgba(var(--n),.1);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.doc-upload-btn:hover { background: rgba(var(--n),.16); color: var(--text-primary); }
.doc-upload-btn svg { width: 13px; height: 13px; }

.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(var(--n),.07);
  border: 1px solid var(--line);
  transition: background 0.2s;
}
.doc-item:hover { background: rgba(var(--n),.12); }
.doc-item-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); opacity: 0.8; }
.doc-item-meta { flex: 1; min-width: 0; }
.doc-item-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--n),.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-item-size { font-size: 13px; color: var(--text-muted); }
.doc-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  border: none;
  background: rgba(var(--n),.1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.doc-btn svg { width: 14px; height: 14px; }
.doc-btn:hover { background: rgba(var(--n),.18); color: var(--text-primary); }
.doc-btn-view:hover { color: var(--accent); }
.doc-btn-delete:hover { background: rgba(var(--danger-rgb),0.15); color: var(--danger); }

/* ─── DEMO SECTION ──────────────────────────────────────────────────────── */
.demo-section {
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 8px;
}

.demo-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.demo-section-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}
.demo-section-title svg { width: 15px; height: 15px; }

.demo-count {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: 0;
}

.demo-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  background: rgba(var(--n),.1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.demo-upload-btn svg { width: 14px; height: 14px; }
.demo-upload-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Drop Zone */
.demo-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
  min-height: 60px;
}
.demo-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),0.06);
}

.demo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px;
  color: var(--text-muted);
  font-size: 14px;
}
.demo-empty svg { width: 28px; height: 28px; opacity: 0.4; }

/* Demo List */
.demo-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.demo-item {
  background: rgba(var(--n),.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.demo-item:hover { border-color: rgba(var(--n),.22); }

.demo-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 10px;
}

.demo-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.demo-icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.demo-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.demo-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-size {
  font-size: 12px;
  color: var(--text-muted);
}

.demo-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.demo-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.demo-btn svg { width: 14px; height: 14px; }
.demo-btn:hover { background: rgba(var(--n),.13); color: var(--fg); border-color: var(--border); }
.demo-btn-delete:hover { background: rgba(var(--accent-rgb),0.12); color: var(--danger); border-color: rgba(var(--accent-rgb),0.2); }
.demo-btn-copy:hover  { background: rgba(var(--info-rgb),0.12); color: var(--info); border-color: rgba(var(--info-rgb),0.2); }
.demo-btn-download:hover { background: rgba(var(--success-rgb),0.1); color: var(--success); border-color: rgba(var(--success-rgb),0.2); }

/* HTML5 Audio Player – styled */
.demo-player {
  width: 100%;
  height: 36px;
  display: block;
  background: var(--sunken-2);
  border-top: 1px solid var(--line);
  accent-color: var(--accent);
}
.demo-player::-webkit-media-controls-panel {
  background: var(--sunken-2);
}

/* Upload Progress */
.demo-upload-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb),0.06);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-secondary);
}

.demo-progress-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(var(--n),.13);
  border-radius: 2px;
  overflow: hidden;
}

.demo-progress-bar {
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .demo-item-header { flex-wrap: wrap; }
  .demo-player { height: 40px; }
}

/* ─── DEMO MULTI-SELECT ─────────────────────────────────────────── */

/* Auswählen-Button im Header */
.demo-select-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.demo-select-toggle svg { width: 12px; height: 12px; }
.demo-select-toggle:hover { color: var(--fg); border-color: rgba(var(--n),.36); }
.demo-select-toggle.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); }

/* Checkbox – standardmäßig ausgeblendet */
.demo-checkbox-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
}
.demo-checkbox { display: none; }
.demo-checkbox-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.demo-checkbox:checked + .demo-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.demo-checkbox:checked + .demo-checkbox-box::after {
  content: '';
  width: 10px; height: 7px;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
  display: block;
}

/* Select-Mode: Checkboxen anzeigen, normale Actions ausblenden */
.demo-select-mode .demo-checkbox-wrap { display: flex; }
.demo-select-mode .demo-item-actions  { opacity: 0; pointer-events: none; }
.demo-select-mode .demo-item          { cursor: pointer; }
.demo-select-mode .demo-item:hover    { border-color: var(--accent); }
.demo-select-mode .demo-item.selected { background: rgba(var(--accent-rgb),0.06); border-color: rgba(var(--accent-rgb),0.3); }

/* Aktionsleiste (Select Bar) */
.demo-select-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(var(--accent-rgb),0.06);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius);
  animation: slideDown 0.15s ease;
}
.demo-select-mode + .demo-select-bar,
.demo-select-mode .demo-select-bar,
.demo-section.demo-select-mode > .demo-select-bar { display: flex; }

/* Fix: Bar ist Geschwister-Element der section */
#demo-section-*:has(.demo-select-mode) .demo-select-bar { display: flex; }

.demo-select-bar-left,
.demo-select-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-select-count {
  font-size: 14px;
  color: var(--text-secondary);
}

.demo-select-action {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(var(--n),.08);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s;
}
.demo-select-action:hover:not(:disabled) { background: rgba(var(--n),.16); border-color: rgba(var(--n),.36); }
.demo-select-action:disabled { opacity: 0.35; cursor: not-allowed; }

.demo-select-action-delete {
  background: rgba(var(--accent-rgb),0.08);
  border-color: rgba(var(--accent-rgb),0.25);
  color: var(--danger);
}
.demo-select-action-delete:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.4); }

.demo-select-action-cancel { color: var(--text-secondary); }
.demo-select-action-cancel:hover { color: var(--fg); }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Kunden-Freigabe Toggle ──────────────────────────────────────────────── */
.btn-client-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(var(--n),.18);
  background: rgba(var(--n),.08);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-client-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-client-toggle:hover {
  border-color: rgba(var(--warning-rgb),0.4);
  background: rgba(var(--warning-rgb),0.08);
  color: rgba(var(--n),.93);
}
.btn-client-toggle.active {
  border-color: var(--success);
  background: rgba(var(--success-rgb),0.12);
  color: var(--success);
}

/* ─── CALENDAR LAYOUT WITH SIDEBAR ─────────────────────────────────────────── */
.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .calendar-layout { grid-template-columns: 1fr; }
}

.calendar-sidebar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 200px;
}

.cal-sidebar-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 12px;
  color: rgba(var(--n),.52);
  text-align: center;
}
.cal-sidebar-hint svg { width: 32px; height: 32px; opacity: 0.4; }
.cal-sidebar-day { padding: 16px; }
.cal-sidebar-date {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.cal-sidebar-section {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--n),.62);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 12px 0 8px;
}

.cal-sidebar-event {
  background: rgba(var(--info-rgb),0.08);
  border-left: 3px solid var(--event-color, var(--info));
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.cal-sidebar-event-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.cal-sidebar-event-time  { font-size: 13px; color: rgba(var(--n),.72); margin-top: 2px; }
.cal-sidebar-event-loc   { font-size: 13px; color: rgba(var(--n),.62); display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.cal-sidebar-event-loc svg { width: 10px; height: 10px; flex-shrink: 0; }
.cal-sidebar-event-actions { display: flex; gap: 8px; margin-top: 6px; }
.cal-sidebar-event-actions button {
  font-size: 13px;
  background: none;
  border: 1px solid rgba(var(--n),.22);
  border-radius: 6px;
  color: rgba(var(--n),.8);
  padding: 2px 8px;
  cursor: pointer;
  transition: all .15s;
}
.cal-sidebar-event-actions button:hover { border-color: var(--accent); color: var(--accent); }

.cal-sidebar-task {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--n),.08);
}
.cal-task-check { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.cal-task-check input[type=checkbox] { cursor: pointer; accent-color: var(--accent); }

/* Calendar Event Chips */
.cal-event-chip {
  background: var(--event-color, var(--info));
  color: var(--on-accent);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
  transition: opacity .15s;
}
.cal-event-chip:hover { opacity: 1; }

.cal-week-event {
  background: var(--event-color, var(--info));
  color: var(--on-accent);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity .15s;
}
.cal-week-event:hover { opacity: 0.85; }
.cal-chip-icon { width: 10px; height: 10px; flex-shrink: 0; }

/* Calendar selected cell */
.cal-cell.cal-selected { background: rgba(var(--info-rgb),0.12); border-color: var(--accent) !important; }

/* ─── ACTIVITY EDIT BUTTON ──────────────────────────────────────────────────── */
.timeline-actions { display: flex; gap: 4px; flex-shrink: 0; }
.timeline-edit, .timeline-del {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid rgba(var(--n),.16);
  border-radius: 6px;
  color: rgba(var(--n),.66);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.timeline-edit:hover { color: var(--accent); border-color: var(--accent); }
.timeline-del:hover  { color: var(--danger);     border-color: var(--danger); }
.timeline-edit svg, .timeline-del svg { width: 14px; height: 14px; }

.ap-actions { display: flex; gap: 4px; }
.ap-edit, .ap-del {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: rgba(var(--n),.52); cursor: pointer;
  transition: color .15s;
}
.ap-edit:hover { color: var(--accent); }
.ap-del:hover  { color: var(--danger); }
.ap-edit svg, .ap-del svg { width: 12px; height: 12px; }

/* ─── EVENT FORM STYLES ─────────────────────────────────────────────────────── */
.event-type-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.event-type-option { display: none; }
.event-type-option + span {
  padding: 6px 14px;
  border: 1px solid rgba(var(--n),.18);
  border-radius: 20px;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s;
  color: rgba(var(--n),.8);
}
.event-type-option:checked + span {
  background: var(--ev-type-color, var(--info));
  border-color: transparent;
  color: var(--on-accent);
}
label.event-type-option { display: flex; align-items: center; cursor: pointer; }

/* Color picker */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch { display: none; }
.color-swatch + span {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  display: block;
  transition: transform .15s, border-color .15s;
}
.color-swatch:checked + span { border-color: var(--on-accent); transform: scale(1.2); }
label.color-swatch { display: flex; align-items: center; cursor: pointer; }

/* ─── FIRMEN CONTACTS SECTION ───────────────────────────────────────────────── */
.company-contacts-section { margin-top: 24px; }
.section-header-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.section-header-row h3 { font-size: 16px; font-weight: 600; color: rgba(var(--n),.86); }
.count-badge {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}
.company-contacts-list { display: flex; flex-direction: column; gap: 6px; }
.company-contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.12);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.company-contact-row:hover { background: rgba(var(--n),.1); border-color: var(--accent); }
.co-contact-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--on-accent);
  overflow: hidden; flex-shrink: 0;
}
.co-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-contact-info { flex: 1; min-width: 0; }
.co-contact-name { display: block; font-size: 15px; font-weight: 600; color: var(--fg); }
.co-contact-email { display: block; font-size: 13px; color: rgba(var(--n),.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.status-active   { background: var(--success); }
.status-dot.status-inactive { background: var(--warning); }
.status-dot.status-blacklist{ background: var(--danger); }
.company-industry-label { display: inline-block; font-size: 14px; color: rgba(var(--n),.66); margin-left: 8px; }

/* ─── REPORTS ───────────────────────────────────────────────────────────────── */
.reports-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
/* .report-kpi stand hier ein zweites Mal und wurde von der Fassung
   weiter unten überschrieben. Entfernt am 21.08.2026. */

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.report-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}
.report-card-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(var(--n),.86);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-chart-row { display: flex; align-items: center; gap: 10px; }
.bar-chart-label {
  font-size: 14px; color: rgba(var(--n),.8);
  width: 100px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-chart-bar-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.bar-chart-bar { height: 18px; border-radius: 4px; min-width: 2px; transition: width .4s ease; }
.bar-chart-val { font-size: 14px; color: rgba(var(--n),.72); flex-shrink: 0; }

/* Line / column chart */
.line-chart { overflow: hidden; }
.line-chart-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 120px;
}
.line-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.line-chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.line-chart-bar {
  width: 100%; background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height .4s ease;
  opacity: 0.85;
}
.line-chart-label { font-size: 12px; color: rgba(var(--n),.62); }

/* Donut chart */
.donut-chart-wrap { display: flex; align-items: center; gap: 24px; }
.donut-chart { width: 150px; height: 150px; flex-shrink: 0; }
.donut-center-num  { font-size: 24px; font-weight: 800; fill: var(--fg); }
.donut-center-label{ font-size: 12px; fill: rgba(var(--n),.62); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(var(--n),.86); }
.donut-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.donut-legend-count{ margin-left: auto; font-size: 15px; font-weight: 700; color: var(--fg); }


/* ─── SPRINT A: GLOBAL SEARCH OVERLAY ──────────────────────────── */
.search-wrapper { position: relative; }
.search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(var(--n),.12); border: 1px solid rgba(var(--n),.18);
  border-radius: 4px; padding: 1px 5px; font-size: 13px; color: var(--text-muted);
  pointer-events: none; font-family: var(--font-body);
}
#search-input:focus ~ .search-kbd { display: none; }
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 14px; right: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  z-index: 9999;
  overflow: hidden;
  max-height: 440px;
  overflow-y: auto;
}
.gsearch-loading, .gsearch-empty {
  padding: 16px 16px;
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
}
.gsearch-group-label {
  padding: 8px 16px 4px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.gsearch-group-label:first-child { border-top: none; }
.gsearch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s;
}
.gsearch-item:hover { background: rgba(var(--n),.08); }
.gsearch-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
.gsearch-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.gsearch-name { font-size: 15px; font-weight: 500; flex: 1; }
.gsearch-badge {
  font-size: 12px; padding: 2px 7px;
  background: rgba(var(--n),.12);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsearch-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ─── NOTIFICATIONS ────────────────────────────────────────────── */
.btn-notif { position: relative !important; }
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
  background: var(--danger);
  border-radius: 11px;
  font-size: 12px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent);
  border: 2px solid var(--bg-l);
  pointer-events: none;
}
.notif-panel {
  position: fixed;
  bottom: 80px; left: 16px;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 10000;
  overflow: hidden;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 600;
}
.notif-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 20px; line-height: 1;
  padding: 0 4px;
}
.notif-close:hover { color: var(--fg); }
.notif-panel-body { max-height: 300px; overflow-y: auto; }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 15px; color: var(--text-muted); }
.notif-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.notif-item:last-child { border-bottom: none; }
.notif-item--link { cursor: pointer; }
.notif-item--link:hover, .notif-item--link:focus-visible { background: var(--bg-card-hover); outline: none; }
.notif-label { font-size: 15px; }
.notif-date { font-size: 13px; color: var(--text-muted); }
.notif-overdue_task .notif-label { color: var(--danger); }
.notif-due_today .notif-label { color: var(--warning); }
.notif-birthday .notif-label { color: var(--purple); }
.notif-upcoming_event .notif-label { color: var(--success); }

/* ─── BATCH TOOLBAR ────────────────────────────────────────────── */
.batch-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.batch-toolbar span { font-size: 15px; font-weight: 600; color: var(--accent); flex: 1; }
.contact-card.batch-selected {
  border-color: var(--accent) !important;
  background: rgba(var(--accent-rgb),0.05) !important;
}
.batch-cb-wrap {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
}
.batch-cb-wrap input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
}
.contact-card { position: relative; }

/* ─── STAR PICKER ──────────────────────────────────────────────── */
.star-picker {
  display: flex; gap: 4px;
  margin-top: 4px;
}
.star-label {
  cursor: pointer;
  display: flex;
}
.star-label input { display: none; }
.star-svg {
  width: 22px; height: 22px;
  color: var(--warning);
  transition: fill .15s, transform .15s;
}
.star-label:hover .star-svg { transform: scale(1.2); }
.star-svg.filled { fill: var(--warning); }

/* ─── DETAIL RATING ────────────────────────────────────────────── */
.detail-rating { display: flex; gap: 2px; margin-top: 4px; }

/* ─── TAG CHIPS ────────────────────────────────────────────────── */
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-chip {
  padding: 3px 10px;
  background: rgba(var(--n),.1);
  border: 1px solid rgba(var(--n),.16);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ─── COMPANY LINK ─────────────────────────────────────────────── */
.detail-company-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .15s;
}
.detail-company-link:hover { color: var(--fg); }

/* ─── VCARD BUTTON STYLE ───────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
}
.btn-ghost:hover { background: rgba(var(--n),.08); color: var(--fg); }

/* ─── CARD RATING ──────────────────────────────────────────────── */
.card-rating { display: flex; gap: 1px; margin-bottom: 4px; }

/* ─── PRINT / PDF EXPORT ────────────────────────────────────────────────────── */
@media print {
  /* Hide all navigation and controls */
  .sidebar, .mobile-header, .sidebar-backdrop,
  .detail-actions, .btn-back, .btn-add, .btn-mobile-add,
  .global-search-dropdown, .notif-panel, .batch-toolbar,
  .list-controls, .nav-controls,
  .contact-tabs .tab-btn,
  .upload-zone, .btn-upload-photo, .card-actions,
  #btn-print-contact { display: none !important; }

  /* Full width detail view */
  .main-content { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .detail-view { width: 100% !important; max-width: 100% !important; padding: 20px !important; box-shadow: none !important; }
  .app { display: block !important; }

  /* Print-friendly colors */
  body { background: white !important; color: #111 !important; }
  .detail-view, .detail-header { background: white !important; border: none !important; }
  .detail-hero { background: #f5f5f5 !important; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
  .detail-photo { border: 2px solid #ddd !important; box-shadow: none !important; }

  /* Show ALL tab content when printing */
  .tab-panel { display: block !important; page-break-inside: avoid; margin-bottom: 16px; }
  .tab-panel-label { font-weight: 700; font-size: 11pt; border-bottom: 1px solid #ccc; padding-bottom: 4px; margin-bottom: 8px; color: #222; }

  /* Typography */
  .detail-name { font-size: 22pt !important; color: #111 !important; }
  .detail-stage { font-size: 14pt !important; }
  .chip, .tag-chip { background: #eee !important; color: #333 !important; border: 1px solid #ccc !important; }
  .star-filled { color: #f59e0b !important; }

  /* Page breaks */
  .detail-section { page-break-inside: avoid; }

  /* Footer with URL */
  @page { margin: 1.5cm; }
}

/* ─── DOCUMENT TYPE BADGE & SELECTOR ────────────────────────────────────────── */
.doc-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-type-select {
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(var(--n),.18);
  background: rgba(var(--n),.1);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  min-width: 110px;
}
.doc-type-select:hover { border-color: rgba(var(--n),.36); }
.doc-type-select option { background: var(--bg-elevated); color: var(--text-primary); }

/* ─── ACTIVITIES FILTER BAR ─────────────────────────────────────────────────── */
.activities-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.activities-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.activities-search-wrap svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.activities-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 10px;
  border: 1px solid rgba(var(--n),.16);
  background: rgba(var(--n),.08);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.activities-search-input:focus {
  border-color: rgba(var(--info-rgb),0.5);
  background: rgba(var(--n),.13);
}
.activities-search-input::placeholder { color: var(--text-muted); }

/* ─── ENTITY PICKER AUTOCOMPLETE ──────────────────────────────────────────── */
.picker-group {
  position: relative;
}
.picker-input {
  width: 100%;
}
.picker-hint {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  opacity: 0.7;
}
.entity-picker-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface-2, var(--bg-elevated));
  border: 1px solid rgba(var(--info-rgb),0.35);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  list-style: none;
  margin: 0;
  padding: 4px;
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
}
.ep-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.ep-item:hover, .ep-item.active {
  background: rgba(var(--info-rgb),0.15);
}
.ep-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}
.ep-sub {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─── KALENDER-ERINNERUNGS-ALERTS ─────────────────────────────────────────── */
.cal-reminder-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
}
.cal-reminder-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  animation: fadeInUp 0.3s ease;
}
.cal-reminder-chip--danger {
  background: rgba(var(--danger-rgb),0.15);
  border: 1px solid rgba(var(--danger-rgb),0.3);
  color: var(--danger);
}
.cal-reminder-chip--warn {
  background: rgba(var(--warning-rgb),0.15);
  border: 1px solid rgba(var(--warning-rgb),0.3);
  color: var(--warning);
}
.cal-reminder-chip--info {
  background: rgba(var(--info-rgb),0.15);
  border: 1px solid rgba(var(--info-rgb),0.3);
  color: var(--info);
}
.cal-reminder-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ─── CLIENT PORTAL / VIEWER-MODUS ────────────────────────────────────────── */
.viewer-portal {
  min-height: 100vh;
  background: var(--bg-primary, var(--bg));
  color: var(--text-primary, var(--text-primary));
  font-family: var(--font-sans, 'Archivo', sans-serif);
}
.viewer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background: var(--surface-1, var(--bg-card));
  border-bottom: 1px solid rgba(var(--n),.1);
  position: sticky;
  top: 0;
  z-index: 100;
}
.viewer-logo {
  font-weight: 800;
  font-size: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}
.viewer-subtitle {
  font-size: 15px;
  color: var(--text-muted, var(--text-muted));
  margin-left: auto;
}
.viewer-body {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.viewer-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 24px 0 12px;
}
.viewer-talent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.viewer-talent-card {
  background: var(--surface-1, var(--bg-card));
  border: 1px solid rgba(var(--n),.1);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.viewer-talent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.viewer-talent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--accent-rgb),0.15);
  border: 2px solid rgba(var(--accent-rgb),0.3);
}
.viewer-talent-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
}
.viewer-talent-cat {
  font-size: 14px;
  color: var(--text-muted);
}
.viewer-talent-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.viewer-tag {
  background: var(--accent-dim);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  color: var(--accent-light);
}
.viewer-contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.viewer-contact-row a {
  color: var(--accent-light);
  text-decoration: none;
}
.viewer-contact-row a:hover { text-decoration: underline; }

/* ─── VIEWER LOGIN ──────────────────────────────────────────────────────────── */
.viewer-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary, var(--bg));
}
.viewer-login-box {
  background: var(--surface-1, var(--bg-card));
  border: 1px solid rgba(var(--n),.12);
  border-radius: 20px;
  padding: 40px;
  width: 360px;
  text-align: center;
}
.viewer-login-title {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.viewer-login-sub {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUBSPOT FEATURES – CMA Extension Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── AI ASSISTANT ──────────────────────────────────────────────────────────── */

.ai-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.4), 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.ai-fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(var(--accent-rgb),0.5); }
.ai-fab.active { background: linear-gradient(135deg, var(--accent-hover), var(--accent)); }
.ai-fab-icon { font-size: 24px; color: var(--fg); }

.ai-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--bg-l);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Schatten nur offen: geschlossen ragte er als dunkler Verlauf in den rechten Rand. */
.ai-sidebar.open { transform: translateX(0); box-shadow: -12px 0 48px rgba(0,0,0,0.4); }

.ai-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}
.ai-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.ai-icon { color: var(--accent); font-size: 20px; }
.ai-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  padding: 2px 6px;
  border-radius: 4px;
}
.ai-sidebar-actions { display: flex; gap: 6px; }
.ai-clear-btn, .ai-close-btn {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(var(--n),.07);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ai-clear-btn:hover, .ai-close-btn:hover { background: rgba(var(--n),.16); color: var(--fg); }

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  gap: 10px;
}
.ai-welcome-icon { font-size: 36px; color: var(--accent); }
.ai-welcome h3 { font-size: 17px; font-weight: 600; color: var(--fg); }
.ai-welcome p  { font-size: 14px; color: var(--text-secondary); }
.ai-suggestions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.ai-suggestion {
  padding: 10px 14px;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.ai-suggestion:hover { background: rgba(var(--accent-rgb),0.15); color: var(--fg); }

.ai-message { display: flex; }
.ai-message--user { justify-content: flex-end; }
.ai-message--assistant { justify-content: flex-start; }

.ai-message-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ai-message--user .ai-message-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  border-bottom-right-radius: 4px;
}
.ai-message--assistant .ai-message-bubble {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ai-msg-icon { color: var(--accent); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ai-message-text strong { font-weight: 600; }
.ai-message-text code {
  background: rgba(var(--n),.16);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
}

.ai-typing-dots { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.ai-typing-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: aiTyping 1.2s infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
  0%, 60%, 100% { opacity: 0.2; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.3); }
}

.ai-input-area {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.ai-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  transition: border-color 0.2s;
}
.ai-input-wrap:focus-within { border-color: rgba(var(--accent-rgb),0.4); }
.ai-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  resize: none;
  outline: none;
  min-height: 20px;
  max-height: 120px;
  line-height: 1.5;
  font-family: var(--font-body);
}
.ai-input::placeholder { color: var(--text-muted); }
.ai-send-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: none;
  color: var(--on-accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.ai-send-btn:hover { opacity: 0.85; }
.ai-footer-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 6px; }

/* ── LEAD SCORING ──────────────────────────────────────────────────────────── */

.lead-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
}
.lead-score-badge svg { flex-shrink: 0; }
.score-hot  { background: rgba(var(--danger-rgb),0.15); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),0.3); }
.score-warm { background: rgba(var(--warning-rgb),0.15); color: var(--warning); border: 1px solid rgba(var(--warning-rgb),0.3); }
.score-cold { background: rgba(var(--info-rgb),0.12); color: var(--info); border: 1px solid rgba(var(--info-rgb),0.25); }

.scoring-filter-row { display: flex; gap: 8px; padding: 0 32px 20px; flex-wrap: wrap; }

.scoring-list {
  padding: 0 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.score-row:hover { background: var(--bg-card-hover); border-color: rgba(var(--n),.18); }
.score-avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.score-info { flex: 1; min-width: 0; }
.score-name { font-weight: 600; font-size: 15px; color: var(--fg); }
.score-breakdown { font-size: 13px; color: var(--text-muted); display: flex; gap: 10px; margin-top: 3px; }
.score-bar-wrap { width: 120px; height: 6px; background: var(--border); border-radius: 3px; flex-shrink: 0; }
.score-bar { height: 100%; border-radius: 3px; transition: width 0.6s var(--ease); }
.score-value { font-size: 20px; font-weight: 700; width: 36px; text-align: right; }
.score-tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 100px;
  width: 52px;
  text-align: center;
}
.score-tier--hot  { background: rgba(var(--danger-rgb),0.15); color: var(--danger); }
.score-tier--warm { background: rgba(var(--warning-rgb),0.15); color: var(--warning); }
.score-tier--cold { background: rgba(var(--info-rgb),0.12); color: var(--info); }

/* Am Telefon (gesehen 22.09.2026, iPhone): die Zeile war eine feste Reihe aus Avatar,
   Balken, Zahl und Stufe - zusammen rund 300px, die sich nicht ruehren. Vom Namen und
   der Adresse blieben 20px, die Zahl lag ueber der Adresse und die Punkteliste lief
   rechts aus dem Bild. Unter 640px bricht die Zeile deshalb um: oben Avatar, Name und
   Zahl, darunter die Punkte, ganz unten der Balken ueber die volle Breite. */
@media (max-width: 640px) {
  .scoring-list { padding: 0 16px 24px; }
  .score-row { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 14px; }
  .score-avatar { order: 1; }
  .score-info   { order: 2; flex: 1 1 auto; min-width: 0; }
  .score-value  { order: 3; width: auto; line-height: 1.2; }
  .score-tier   { order: 4; align-self: center; }
  .score-bar-wrap { order: 5; flex: 1 0 100%; width: auto; }
  /* Eine lange Adresse schiebt sonst die ganze Zeile auseinander. */
  .score-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .score-breakdown { flex-wrap: wrap; gap: 2px 10px; }
}

/* ── REPORTS & ANALYTICS ───────────────────────────────────────────────────── */

/* Feste vier Spalten ließen die fünfte Karte allein in eine zweite Zeile
   rutschen, neben einer halben Bildschirmbreite Leerraum. */
.report-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
  padding: 0 24px 20px;
}
/* 124 Pixel Höhe für eine einzelne Zahl, dazu ein farbiger Streifen je Karte
   in Blau, Grün und Orange – ein Regenbogen in einer Oberfläche, deren
   Signalfarbe Rot ist. Die Karten sind jetzt flach und einfarbig; Farbe
   bekommt nur, was eine Aussage trägt (siehe --kpi-color in features-ui.js). */
.report-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.report-kpi-icon { color: var(--kpi-color, var(--info)); }
.report-kpi-icon svg { width: 20px; height: 20px; }
.report-kpi-value {
  font-family: var(--font-serif); font-size: 27px; font-weight: 400;
  line-height: 1.05; color: var(--kpi-color, var(--fg));
}
.report-kpi-label { font-size: 13px; color: var(--text-secondary); }
.report-kpi-icon  { display: none; }   /* Ein Symbol neben einer beschrifteten Zahl sagt nichts dazu. */

.report-section {
  margin: 0 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.report-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.report-section-title svg { width: 16px; height: 16px; }

/* Forecast Chart */
.forecast-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 24px 20px 16px;
  min-height: 180px;
}
.forecast-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.forecast-bars { width: 100%; display: flex; gap: 4px; align-items: flex-end; height: 120px; }
.forecast-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.6s var(--ease);
}
.forecast-bar--pipe { background: var(--info); opacity: 0.6; }
.forecast-bar--won  { background: var(--success); }
.forecast-label { font-size: 13px; color: var(--text-muted); }
.forecast-count { font-size: 12px; color: var(--text-dim); }
.forecast-legend {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
  align-items: center;
}
.forecast-legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.forecast-winrate { margin-left: auto; color: var(--text-secondary); }
.forecast-winrate strong { color: var(--fg); }

/* Heatmap */
.heatmap-container { padding: 20px; overflow-x: auto; }
.heatmap-grid { display: flex; gap: 3px; }
.heatmap-week { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell {
  width: 11px; height: 11px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.heatmap-cell:hover { outline: 1px solid var(--fg); }
.heatmap-cell--0 { background: var(--bg-elevated); }
.heatmap-cell--1 { background: rgba(var(--info-rgb),.25); }
.heatmap-cell--2 { background: var(--info); }
.heatmap-cell--3 { background: var(--info); }
.heatmap-cell--4 { background: var(--info); }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Reports Grid */
.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 32px 32px;
}
.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.report-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
}
.report-card h3 svg { width: 16px; height: 16px; }
.report-list { display: flex; flex-direction: column; gap: 10px; }
.report-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.report-rank {
  width: 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}
.report-name { flex: 1; color: var(--fg); }
.report-count { color: var(--text-secondary); font-size: 14px; }

.report-stage-list { display: flex; flex-direction: column; gap: 8px; }
.report-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.report-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.report-stage-name { flex: 1; color: var(--text-secondary); text-transform: capitalize; }
.report-stage-count { color: var(--text-muted); font-size: 13px; }
.report-stage-value { color: var(--fg); font-weight: 600; }

/* ── EMAIL TEMPLATES ───────────────────────────────────────────────────────── */

.template-group { padding: 0 32px 24px; }
.template-group-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
/* Steht zwischen Gruppentitel und Karten und erklaert die Gruppe. Bisher nur
   bei Klick-Nachfass noetig: dass diese Vorlagen einen Sequenzschritt ersetzen
   und ohne Betreff im Thread antworten, sieht man den Karten sonst nicht an. */
.template-group-hint {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 640px;
  margin: -6px 0 12px;
}
.template-list { display: flex; flex-direction: column; gap: 10px; }
.template-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color 0.2s;
}
.template-card:hover { border-color: rgba(var(--n),.22); }
.template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.template-name { font-size: 16px; font-weight: 600; color: var(--fg); }
.template-actions { display: flex; gap: 8px; }
.template-subject { font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; }
/* Kein Betreff ist bei Klick-Nachfass Absicht, kein fehlendes Feld – deshalb
   gedaempft statt als Warnung. */
.template-subject-leer { color: var(--text-muted); font-style: italic; }
.template-preview {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.template-footer { }
.template-placeholders {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-elevated);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: monospace;
}
.template-picker { margin-bottom: 16px; }
.template-picker label { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; display: block; }
.template-picker select { width: 100%; }

/* ── WORKFLOWS ─────────────────────────────────────────────────────────────── */

.workflow-list { padding: 0 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.workflow-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}
.workflow-card:hover { border-color: rgba(var(--n),.22); }
.workflow-card--inactive { opacity: 0.55; }

.workflow-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.workflow-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.workflow-name { font-size: 16px; font-weight: 600; color: var(--fg); }
.workflow-trigger-badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(var(--info-rgb),0.12);
  color: var(--info);
  border: 1px solid rgba(var(--info-rgb),0.2);
}
.workflow-controls { display: flex; align-items: center; gap: 8px; }
.workflow-status { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
.status-active  { background: rgba(var(--success-rgb),0.12); color: var(--success); }
.status-inactive{ background: rgba(var(--n),.1); color: var(--text-muted); }

.workflow-card-body { padding: 14px 20px; }
.workflow-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}
.workflow-when, .workflow-then {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  white-space: nowrap;
}
.workflow-last-run {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 8px;
}

/* ── MODAL ─────────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-l);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s var(--ease);
  overflow: hidden;
}
.modal--large { max-width: 720px; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-header h2 svg { width: 18px; height: 18px; }
.modal-close {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(var(--n),.07);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.modal-close:hover { background: rgba(var(--n),.16); color: var(--fg); }
.modal-body { padding: 24px; overflow-y: auto; }

/* Fussleiste mit den Aktionen. Die Klasse wurde im Markup von sequences.js,
   lead-finder.js und signals.js verwendet, war aber nie gestylt. */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(var(--n),.12);
  flex-shrink: 0;
}
.modal-footer .btn-primary,
.modal-footer .btn-secondary { min-width: 110px; justify-content: center; }

/* Labels in Dialogen bekommen Luft – sonst kleben Feld und Beschriftung */
.modal-body > label,
/* Die :not()-Kette haelt Schalter heraus, die selbst ein <label> sind. Ohne
   sie gewinnt diese Regel (0,1,1) gegen .warmup-toggle (0,1,0), der Schalter
   wird display:block, sein Schieber damit ein inline-<span> - und ein inline
   Element ignoriert width/height. Uebrig blieb der blosse Text: im
   SMTP-Dialog standen "Sondenabsender" und "Nur Warmup" ohne Schalter da,
   und ob sie an waren, war nicht zu sehen. */
.modal-body label:not(.lf-toggle-label):not(.ab-toggle-label):not(.warmup-toggle) {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--n),.8);
  margin-bottom: 6px;
}

/* Eingabefelder in Dialogen: dieselbe Behandlung wie unter .form-group.
   Ohne das erben sie gar nichts und der Browser malt weisse Kästen. */
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="time"],
.modal-body input[type="search"],
.modal-body select,
.modal-body textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.modal-body input::placeholder,
.modal-body textarea::placeholder { color: var(--text-muted); }
.modal-body textarea { resize: vertical; line-height: 1.6; }
/* Checkboxen sollen nicht auf volle Breite gezogen werden */
.modal-body input[type="checkbox"],
.modal-body input[type="radio"] { width: auto; }

/* Hinweiskasten im Seed-Dialog (js/app.js). Stand vorher als Inline-Style im
   Markup – hier, damit der Dialog seine Formatierung aus dem CSS bezieht. */
.seed-hint {
  background: rgba(var(--warning-rgb),0.07);
  border: 1px solid rgba(var(--warning-rgb),0.2);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.seed-hint strong { color: var(--text-primary); }
.seed-hint > strong:first-child { color: var(--warning); }

/* Klammer-Zusatz in einem .form-group-Label: erbt sonst Versalien und
   Sperrung der Beschriftung und schreit lauter als das Label selbst. */
.form-group label .label-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── SPINNER ───────────────────────────────────────────────────────────────── */

.spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--text-muted);
  font-size: 15px;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── GENERAL HELPERS ───────────────────────────────────────────────────────── */

.reports-loading { padding: 32px; }
.empty-state-sm {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/* form-hint */
.form-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
  font-family: monospace;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .report-kpi-row { grid-template-columns: 1fr 1fr; }
  .reports-grid { grid-template-columns: 1fr; }
  .ai-sidebar { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   INACTIVITY TIMER – Warning Banner & Logout Screen
   ════════════════════════════════════════════════════════════════════════════ */

#inactivity-warning {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  min-width: 360px;
  max-width: 520px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(var(--warning-rgb),0.4);
  border-radius: 16px;
  box-shadow:
    0 -4px 40px rgba(var(--warning-rgb),0.15),
    0 8px 32px rgba(0, 0, 0, 0.6);
  transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  opacity: 0;
}

#inactivity-warning.inactivity-warning--visible {
  bottom: 24px;
  opacity: 1;
}

#inactivity-warning.inactivity-warning--urgent {
  border-color: rgba(var(--danger-rgb),0.6);
  box-shadow:
    0 -4px 40px rgba(var(--danger-rgb),0.25),
    0 8px 32px rgba(0, 0, 0, 0.6);
  animation: inactivity-pulse 1s ease-in-out infinite;
}

@keyframes inactivity-pulse {
  0%, 100% { box-shadow: 0 -4px 40px rgba(var(--danger-rgb),0.2), 0 8px 32px rgba(0,0,0,0.6); }
  50%       { box-shadow: 0 -4px 40px rgba(var(--danger-rgb),0.5), 0 8px 32px rgba(0,0,0,0.6); }
}

.inactivity-warning-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.inactivity-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(var(--warning-rgb),0.6));
}

#inactivity-warning.inactivity-warning--urgent .inactivity-icon {
  filter: drop-shadow(0 0 6px rgba(var(--danger-rgb),0.8));
}

.inactivity-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inactivity-text strong {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.inactivity-text span {
  color: rgba(var(--n),0.9);
  font-size: 0.9rem;
}

#inactivity-countdown {
  color: var(--warning);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
}

#inactivity-warning.inactivity-warning--urgent #inactivity-countdown {
  color: var(--danger);
}

.inactivity-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  color: var(--on-accent);
  border: none;
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(var(--warning-rgb),0.35);
}

.inactivity-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--warning-rgb),0.5);
}

.inactivity-btn:active {
  transform: translateY(0);
}

/* Logout-Screen */
#inactivity-logout-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#inactivity-logout-screen.inactivity-logout--visible {
  opacity: 1;
}

.inactivity-logout-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px;
  background: rgba(10,10,10,0.8);
  border: 1px solid rgba(var(--info-rgb),0.2);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: inactivity-logout-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes inactivity-logout-in {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.inactivity-logout-icon {
  line-height: 0;
  color: var(--accent);
}
.inactivity-logout-icon svg {
  width: 48px;
  height: 48px;
}

.inactivity-logout-inner h2 {
  color: var(--text-primary);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.inactivity-logout-inner p {
  color: rgba(var(--n),0.85);
  font-size: 1rem;
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

.inactivity-logout-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(var(--info-rgb),0.2);
  border-top-color: var(--info);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-top: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── EMAIL COMPOSE MODAL ─────────────────────────────────────────────────── */

.btn-email-compose {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 12px rgba(var(--accent-rgb),.35);
}
.btn-email-compose svg { width: 15px; height: 15px; }
.btn-email-compose:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb),.5);
  transform: translateY(-1px);
}

.email-compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease;
}

.email-compose-panel {
  background: var(--bg-elevated);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  animation: slideUp .2s ease;
  overflow: hidden;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.email-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(var(--n),.13);
  flex-shrink: 0;
}

.email-compose-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}
.email-compose-title svg { width: 18px; height: 18px; color: var(--accent); }

.email-compose-close {
  width: 32px; height: 32px;
  border: none;
  background: rgba(var(--n),.1);
  border-radius: 8px;
  color: rgba(var(--n),.8);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  line-height: 1;
}
.email-compose-close:hover { background: rgba(var(--accent-rgb),.2); color: var(--accent); }

.email-compose-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.email-compose-body::-webkit-scrollbar { width: 4px; }
.email-compose-body::-webkit-scrollbar-thumb { background: rgba(var(--n),.16); border-radius: 4px; }

.compose-field { display: flex; flex-direction: column; gap: 6px; }

.compose-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--n),.72);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compose-hint {
  font-size: 13px;
  font-weight: 400;
  color: rgba(var(--n),.52);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.compose-input,
.compose-select,
.compose-textarea {
  background: rgba(var(--n),.08);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 8px;
  color: rgba(var(--n),.96);
  font-size: 16px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.compose-input:focus,
.compose-select:focus,
.compose-textarea:focus { border-color: var(--accent); background: rgba(var(--n),.12); }

.compose-input[readonly] {
  color: rgba(var(--n),.72);
  cursor: default;
}

.compose-select option { background: var(--bg-elevated); }

.compose-textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}

.compose-preview-wrap {
  border: 1px solid rgba(var(--accent-rgb),.3);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--accent-rgb),.05);
}
.compose-preview {
  min-height: 120px;
}

.compose-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.1);
  border-radius: 8px;
}

.compose-meta-from,
.compose-meta-track {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(var(--n),.62);
}
.compose-meta-from svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ─── 3 Tracking-Toggles ─────────────────────────────────────────── */
.compose-tracking-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid rgba(var(--n),.16);
  border-radius: 20px;
  padding: 4px 9px 4px 7px;
  font-size: 13px;
  color: var(--success);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
}
.ct-btn:hover {
  background: rgba(var(--n),.08);
  border-color: rgba(var(--n),.36);
}
.ct-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

.ct-ind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.ct-on  { background: rgba(var(--success-rgb),.15); color: var(--success); }
.ct-off { background: rgba(var(--n),.1); color: rgba(var(--n),.58); }


.email-compose-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(var(--n),.13);
  flex-shrink: 0;
}

.btn-primary-red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 12px rgba(var(--accent-rgb),.35);
}
.btn-primary-red svg { width: 15px; height: 15px; }
.btn-primary-red:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb),.5);
  transform: translateY(-1px);
}
.btn-primary-red:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.spin { animation: spin .8s linear infinite; }

/* ─── NAV GROUP (collapsible) ─────────────────────────────────────────────── */

.nav-group { display: flex; flex-direction: column; }

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: rgba(var(--n),.8);
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s, color .15s;
  user-select: none;
}
.nav-group-header svg:first-child { width: 16px; height: 16px; flex-shrink: 0; }
.nav-group-header:hover { background: rgba(var(--n),.1); color: rgba(var(--n),.96); }
.nav-group.open .nav-group-header { color: var(--fg); }

.nav-group-arrow {
  width: 14px !important;
  height: 14px !important;
  margin-left: auto;
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-group.open .nav-group-arrow { transform: rotate(180deg); }

.nav-group-items {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  margin-bottom: 4px;
}
.nav-group-items.open { display: flex; }

.nav-sub-item {
  padding: 7px 12px !important;
  font-size: 14px !important;
  gap: 8px !important;
  border-radius: 6px !important;
  color: rgba(var(--n),.76) !important;
}
.nav-sub-item svg { width: 14px !important; height: 14px !important; }
.nav-sub-item:hover { color: rgba(var(--n),.96) !important; }
.nav-sub-item.active, [data-nav].active.nav-sub-item { color: var(--fg) !important; }

/* ─── EMAIL HUB – 3-PANEL LAYOUT ─────────────────────────────────────────── */

/* Bis zum 21.08.2026: 200px Ordnerleiste, 300px Liste, Rest Leser. Die
   Ordnerleiste war die dritte Seitenleiste auf einem Bildschirm – für drei
   Einträge, von denen einer schon in der App-Navigation steht. Die Liste
   bekam dafür 299 Pixel, in denen 26 Absendernamen abgeschnitten wurden,
   während 890 Pixel leerer Leser danebenstanden. Ordner sind jetzt eine
   Zeile über der Liste, die Liste hat die frei gewordene Breite. */
.emailhub-layout {
  display: grid;
  grid-template-columns: minmax(380px, 32%) 1fr;
  height: calc(100vh - 60px);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(var(--n),.12);
  background: var(--bg-card);
}

/* Sidebar (Ordner) */
.emailhub-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(var(--n),.12);
  background: var(--bg-input);
  padding: 16px 12px;
  gap: 4px;
}

.emailhub-sidebar-top { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.emailhub-folder-list { display: flex; flex-direction: column; gap: 2px; }

.eh-folder {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 15px;
  color: rgba(var(--n),.72);
  cursor: pointer;
  transition: all .15s;
}
.eh-folder svg { width: 15px; height: 15px; flex-shrink: 0; }
.eh-folder:hover { background: rgba(var(--n),.1); color: rgba(var(--n),.93); }
.eh-folder.active { background: rgba(var(--accent-rgb),.15); color: var(--accent-light); font-weight: 600; }

.emailhub-account {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(var(--n),.44);
  padding: 8px 6px;
  border-top: 1px solid rgba(var(--n),.1);
}
.emailhub-account svg { width: 13px; height: 13px; flex-shrink: 0; }

/* E-Mail Liste */
.emailhub-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(var(--n),.12);
  overflow: hidden;
}

.eh-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(var(--n),.96);
  border-bottom: 1px solid rgba(var(--n),.1);
  flex-shrink: 0;
}

.eh-refresh-btn {
  width: 28px; height: 28px;
  background: none;
  border: 1px solid rgba(var(--n),.16);
  border-radius: 6px;
  color: rgba(var(--n),.62);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.eh-refresh-btn svg { width: 13px; height: 13px; }
.eh-refresh-btn:hover { background: rgba(var(--n),.12); color: var(--fg); }

/* Ungelesen-Zähler im Listenkopf – schiebt den Refresh-Button nach rechts */
.eh-unread-badge {
  margin-right: auto;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--info);
  background: rgba(var(--info-rgb),.14);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Suchleiste über der Mail-Liste */
.eh-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(var(--n),.1);
  flex-shrink: 0;
}
.eh-search-bar svg { width: 13px; height: 13px; color: rgba(var(--n),.52); flex-shrink: 0; }
.eh-search-bar input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: rgba(var(--n),.93);
  font-size: 14px;
  font-family: inherit;
}
.eh-search-bar input::placeholder { color: rgba(var(--n),.52); }
.eh-search-bar input::-webkit-search-cancel-button { filter: invert(.6); cursor: pointer; }

/* Fuß der Liste: "Mehr laden" bzw. Filter-Hinweis */
.eh-list-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: 13px;
  color: rgba(var(--n),.58);
}
.eh-load-more {
  background: rgba(var(--n),.08);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 6px;
  color: rgba(var(--n),.88);
  font-size: 13px;
  font-family: inherit;
  padding: 5px 14px;
  cursor: pointer;
  transition: all .15s;
}
.eh-load-more:hover:not(:disabled) { background: rgba(var(--n),.16); color: var(--fg); }
.eh-load-more:disabled { opacity: .5; cursor: default; }

/* "Kontakt anlegen"-Chip bei unbekannten Absendern */
.eh-add-contact { transition: background .15s; }
.eh-add-contact:hover { background: rgba(var(--success-rgb),.22) !important; }

#eh-email-list { flex: 1; overflow-y: auto; }
#eh-email-list::-webkit-scrollbar { width: 3px; }
#eh-email-list::-webkit-scrollbar-thumb { background: rgba(var(--n),.13); border-radius: 3px; }

/* E-Mail Reihe */
.eh-email-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--n),.07);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.eh-email-row:hover { background: rgba(var(--n),.07); }
.eh-email-row.selected { background: var(--accent-dim); border-left: 2px solid var(--accent); padding-left: 14px; }
.eh-email-row.unread .eh-row-from { font-weight: 700; color: var(--fg); }
.eh-email-row.unread .eh-row-subject { color: rgba(var(--n),.91); }

.eh-row-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--danger));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}

.eh-row-content { flex: 1; min-width: 0; }

.eh-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

/* max-width: 140px kappte jeden Absender, unabhängig davon, wie breit die
   Liste tatsächlich war – auch nachdem sie von 299 auf 445 Pixel gewachsen
   ist, blieben 26 Namen abgeschnitten. Die Zeile teilt sich den Platz jetzt
   selbst auf: Der Absender nimmt, was das Datum übrig lässt. */
.eh-row-from {
  font-size: 15px;
  color: rgba(var(--n),.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.eh-row-date {
  font-size: 13px;
  color: rgba(var(--n),.52);
  flex-shrink: 0;
}

.eh-row-subject {
  font-size: 14px;
  color: rgba(var(--n),.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eh-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Reader */
.emailhub-reader {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-card);
}

.eh-reader-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(var(--n),.36);
}
.eh-reader-empty svg { width: 64px; height: 64px; }
.eh-reader-empty p { font-size: 16px; }

.eh-reader-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(var(--n),.12);
  flex-shrink: 0;
}

.eh-reader-subject {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 12px;
  line-height: 1.3;
}

.eh-reader-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.eh-reader-from {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eh-reader-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}

.eh-reader-name { font-size: 16px; font-weight: 600; color: rgba(var(--n),.96); }
.eh-reader-addr { font-size: 14px; color: rgba(var(--n),.58); }
.eh-reader-date { font-size: 14px; color: rgba(var(--n),.58); }

.eh-reader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eh-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(var(--n),.1);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 7px;
  color: rgba(var(--n),.86);
  font-size: 15px;
  cursor: pointer;
  transition: all .15s;
}
.eh-action-btn svg { width: 13px; height: 13px; }
.eh-action-btn:hover { background: rgba(var(--n),.16); color: var(--fg); }
.eh-action-btn.danger:hover { background: rgba(var(--danger-rgb),.15); color: var(--danger); border-color: rgba(var(--danger-rgb),.3); }

.eh-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.eh-reader-body::-webkit-scrollbar { width: 4px; }
.eh-reader-body::-webkit-scrollbar-thumb { background: rgba(var(--n),.13); border-radius: 4px; }

.eh-body-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  display: block;
}

.eh-body-text {
  padding: 20px 24px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(var(--n),.88);
  white-space: pre-wrap;
  font-family: inherit;
}

/* States */
.eh-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: rgba(var(--n),.52);
}
.eh-loading svg { color: var(--accent); }

.eh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: rgba(var(--n),.44);
  text-align: center;
}
.eh-empty svg { width: 40px; height: 40px; }
.eh-empty p { font-size: 15px; }

.eh-error {
  padding: 24px;
  color: rgba(var(--n),.8);
}
.eh-error h4 { color: var(--danger); margin: 0 0 8px; font-size: 17px; }
.eh-error p  { font-size: 15px; color: rgba(var(--n),.66); margin: 0 0 16px; }

.eh-imap-setup {
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}
.eh-imap-setup strong { font-size: 15px; color: rgba(var(--n),.86); }
.eh-imap-setup ol { margin: 8px 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eh-imap-setup li { font-size: 14px; color: rgba(var(--n),.66); }
.eh-imap-setup a { color: var(--accent); text-decoration: none; }
.eh-imap-setup a:hover { text-decoration: underline; }

/* Gesendet View */
.email-hub-view { display: flex; flex-direction: column; gap: 0; height: 100%; }
.email-sent-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.email-sent-list::-webkit-scrollbar { width: 4px; }
.email-sent-list::-webkit-scrollbar-thumb { background: rgba(var(--n),.13); border-radius: 4px; }

.email-sent-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(var(--n),.08);
  transition: background .12s;
}
.email-sent-item:hover { background: rgba(var(--n),.05); }

.email-sent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.email-sent-to {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: rgba(var(--n),.91);
}
.email-sent-to strong { color: var(--fg); }
.email-sent-addr { font-size: 14px; color: rgba(var(--n),.58); }

.email-sent-subject { font-size: 15px; color: rgba(var(--n),.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.email-sent-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.email-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: rgba(var(--n),.44);
}
.email-stat svg { width: 13px; height: 13px; }
.email-stat.active { color: var(--success); }

.email-sent-status { font-size: 13px; font-weight: 600; }
.email-sent-date { font-size: 14px; color: rgba(var(--n),.52); white-space: nowrap; }

/* Inbox IMAP Setup Notice */
.email-inbox-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 60px 40px;
  max-width: 480px;
  margin: 0 auto;
}
.inbox-icon svg {
  width: 64px; height: 64px;
  color: rgba(var(--accent-rgb),.4);
}
.email-inbox-notice h3 { font-size: 22px; font-weight: 700; color: var(--fg); margin: 0; }
.email-inbox-notice p { font-size: 16px; color: rgba(var(--n),.66); line-height: 1.6; margin: 0; }
.inbox-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.inbox-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.12);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  color: rgba(var(--n),.76);
}
.step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive: bei schmalen Screens Email Hub collapsed */
@media (max-width: 900px) {
  .emailhub-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* .emailhub-sidebar entfernt */
  .emailhub-reader { display: none; }
  .emailhub-layout.detail-open .emailhub-list { display: none; }
  .emailhub-layout.detail-open .emailhub-reader { display: flex; }
}


/* ─── LEAD FINDER ──────────────────────────────────────────────────────────── */

.lf-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

.lf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  flex-shrink: 0;
}

.lf-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lf-title svg { width: 22px; height: 22px; color: var(--accent); }
.lf-title h2  { font-size: 22px; font-weight: 800; color: var(--fg); margin: 0; }
.lf-subtitle  { font-size: 15px; color: rgba(var(--n),.62); }

.lf-history-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(var(--n),.1);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 8px;
  color: rgba(var(--n),.8);
  font-size: 15px;
  cursor: pointer;
  transition: all .15s;
}
.lf-history-btn svg { width: 14px; height: 14px; }
.lf-history-btn:hover { background: rgba(var(--n),.16); color: var(--fg); }

/* Tabs */
.lf-tabs {
  display: flex;
  gap: 4px;
  padding: 16px 24px 0;
  border-bottom: 1px solid rgba(var(--n),.12);
  flex-shrink: 0;
}

.lf-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(var(--n),.66);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  bottom: -1px;
}
.lf-tab svg { width: 14px; height: 14px; }
.lf-tab:hover { color: rgba(var(--n),.91); }
.lf-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

.lf-tab-pro {
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--warning), var(--warning));
  color: var(--on-accent);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: .5px;
}

/* Panels */
.lf-panels { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.lf-panels::-webkit-scrollbar { width: 4px; }
.lf-panels::-webkit-scrollbar-thumb { background: rgba(var(--n),.13); border-radius: 4px; }

.lf-panel { display: none; flex-direction: column; gap: 16px; }
.lf-panel.active { display: flex; }

/* Form Card */
.lf-form-card {
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lf-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lf-form-row-check { grid-template-columns: 1fr; }

.lf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-field label { font-size: 14px; font-weight: 600; color: rgba(var(--n),.72); letter-spacing: .3px; text-transform: uppercase; }
.lf-field input[type="text"],
.lf-field input[type="password"] {
  background: rgba(var(--n),.1);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fg);
  font-size: 16px;
  transition: border .15s;
  outline: none;
  font-family: inherit;
}
.lf-field input:focus { border-color: var(--accent); background: rgba(var(--accent-rgb),.05); }
.lf-field input::placeholder { color: rgba(var(--n),.44); }

.lf-field-sm { }

.lf-form-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(var(--n),.52);
}
.lf-form-info svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--warning); }

.lf-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(var(--n),.72);
  cursor: pointer;
}
.lf-toggle-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.lf-btn-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: none;
  border-radius: 9px;
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  align-self: flex-start;
  min-width: 200px;
}
.lf-btn-search svg { width: 15px; height: 15px; }
.lf-btn-search:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--accent-rgb),.35); }
.lf-btn-search:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Hunter specific */
.lf-hunter-api-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.lf-hunter-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(var(--warning-rgb),.1);
  border: 1px solid rgba(var(--warning-rgb),.2);
  border-radius: 8px;
  color: var(--warning);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.lf-hunter-link svg { width: 12px; height: 12px; }
.lf-hunter-link:hover { background: rgba(var(--warning-rgb),.2); }

/* Results */
.lf-results { display: flex; flex-direction: column; gap: 12px; }

.lf-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.1);
  border-radius: 8px;
  font-size: 14px;
  color: rgba(var(--n),.66);
}
.lf-meta-bar strong { color: rgba(var(--n),.91); }
.lf-meta-bar code { background: rgba(var(--n),.1); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

.lf-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lf-results-count { font-size: 16px; font-weight: 700; color: rgba(var(--n),.91); }

.lf-results-actions { display: flex; gap: 8px; }

.lf-btn-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(var(--accent-rgb),.15);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 7px;
  color: var(--accent-light);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.lf-btn-sm svg { width: 12px; height: 12px; }
.lf-btn-sm:hover { background: rgba(var(--accent-rgb),.25); }
.lf-btn-sm.secondary {
  background: rgba(var(--n),.08);
  border-color: rgba(var(--n),.16);
  color: rgba(var(--n),.8);
}
.lf-btn-sm.secondary:hover { background: rgba(var(--n),.14); color: var(--fg); }

/* Email List */
.lf-email-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--n),.12);
  border-radius: 10px;
  overflow: hidden;
}

.lf-email-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--n),.08);
  transition: background .12s;
}
.lf-email-row:last-child { border-bottom: none; }
.lf-email-row:hover { background: rgba(var(--n),.05); }
.lf-email-row.imported { opacity: .6; }

.lf-email-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}

.lf-email-info { flex: 1; min-width: 0; }
.lf-email-addr { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.lf-email-addr a { color: var(--info); text-decoration: none; font-weight: 600; }
.lf-email-addr a:hover { text-decoration: underline; }
.lf-email-name { font-size: 14px; color: rgba(var(--n),.62); margin-top: 2px; }

.lf-verified {
  font-size: 13px;
  font-weight: 800;
  color: var(--success);
  background: rgba(var(--success-rgb),.12);
  padding: 1px 6px;
  border-radius: 4px;
}

.lf-email-badges { display: flex; align-items: center; gap: 6px; }

.lf-confidence {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.lf-confidence.high { background: rgba(var(--success-rgb),.15); color: var(--success); }
.lf-confidence.mid  { background: rgba(var(--warning-rgb),.15); color: var(--warning); }
.lf-confidence.low  { background: rgba(var(--danger-rgb),.12);  color: var(--danger); }

.lf-source-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: .3px;
}
.lf-source-badge.crawler { background: rgba(var(--info-rgb),.15); color: var(--info); }
.lf-source-badge.guesser { background: rgba(var(--teal-rgb),.15); color: var(--teal); }
.lf-source-badge.hunter  { background: rgba(var(--warning-rgb),.15); color: var(--warning); }

.lf-email-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.lf-btn-import {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(var(--success-rgb),.12);
  border: 1px solid rgba(var(--success-rgb),.2);
  border-radius: 6px;
  color: var(--success);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.lf-btn-import svg { width: 12px; height: 12px; }
.lf-btn-import:hover { background: rgba(var(--success-rgb),.22); }
.lf-btn-import:disabled { opacity: .5; cursor: not-allowed; }

.lf-btn-email {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--n),.08);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 6px;
  color: rgba(var(--n),.62);
  cursor: pointer;
  transition: all .15s;
}
.lf-btn-email svg { width: 13px; height: 13px; }
.lf-btn-email:hover { background: rgba(var(--n),.16); color: var(--fg); }

.lf-imported-badge {
  font-size: 14px;
  color: var(--success);
  font-weight: 600;
}

/* States */
.lf-empty, .lf-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  text-align: center;
  border: 1px dashed rgba(var(--n),.13);
  border-radius: 10px;
  color: rgba(var(--n),.52);
}
.lf-empty svg { width: 40px; height: 40px; }
.lf-empty p, .lf-error p { font-size: 16px; color: rgba(var(--n),.72); margin: 0; }
.lf-empty span { font-size: 14px; color: rgba(var(--n),.44); }
.lf-error svg { color: var(--danger); width: 40px; height: 40px; }

/* History Sidebar */
.lf-history-panel {
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-input);
  border-left: 1px solid rgba(var(--n),.13);
  z-index: 200;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
}
.lf-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--n),.1);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.lf-history-header button {
  background: none; border: none; color: rgba(var(--n),.62);
  cursor: pointer; font-size: 18px; padding: 2px 6px;
}
.lf-history-list { flex: 1; overflow-y: auto; padding: 8px; }
.lf-history-item {
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.lf-history-item:hover { background: rgba(var(--n),.08); }
.lf-history-domain { font-size: 16px; font-weight: 600; color: rgba(var(--n),.91); }
.lf-history-meta   { font-size: 14px; color: rgba(var(--n),.58); margin-top: 2px; }
.lf-history-empty  { padding: 40px 20px; text-align: center; color: rgba(var(--n),.52); font-size: 15px; }


/* ─── CONTACT TIMELINE (HubSpot Style) ─────────────────────────────────────── */

.ctl-section {
  margin-top: 24px;
  padding: 0 4px;
}

.ctl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(var(--n),.86);
  letter-spacing: .3px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--n),.12);
}
.ctl-header svg { width: 16px; height: 16px; color: var(--accent); }

/* Loading / Empty / Error */
.ctl-loading, .ctl-empty, .ctl-error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  color: rgba(var(--n),.52);
  font-size: 15px;
  border: 1px dashed rgba(var(--n),.12);
  border-radius: 10px;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.ctl-loading svg { animation: spin 1s linear infinite; }
.ctl-error { color: var(--danger); }

/* Timeline List */
.ctl-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Vertical line */
.ctl-list::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(var(--n),.13) 0%, rgba(var(--n),.04) 100%);
}

/* Individual Event */
.ctl-event {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  position: relative;
}
.ctl-event:last-child { padding-bottom: 0; }

/* Event Dot */
.ctl-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  opacity: .9;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 0 4px rgba(var(--n),.08);
}
/* Das Zeichen im Punkt ist ein SVG, kein Schriftzeichen – die Farbe des
   Punktes traegt die Art, der weisse Strich das Symbol darauf. */
.ctl-dot svg {
  width: 18px;
  height: 18px;
  color: var(--fg);
}

/* Event Body */
.ctl-body {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.1);
  border-radius: 10px;
  transition: background .12s;
  margin-top: 4px;
}
.ctl-event:hover .ctl-body { background: rgba(var(--n),.08); }

.ctl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ctl-label { font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.ctl-date  { font-size: 13px; color: rgba(var(--n),.52); flex-shrink: 0; }

.ctl-text {
  font-size: 15px;
  color: rgba(var(--n),.8);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2px;
}

/* @mention highlight */
.ctl-mention {
  color: var(--info);
  font-weight: 700;
  background: rgba(var(--info-rgb),.1);
  padding: 0 4px;
  border-radius: 3px;
}

/* Badges */
.ctl-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ctl-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}
.ctl-badge.open   { background: rgba(var(--success-rgb),.12);  color: var(--success); }
.ctl-badge.click  { background: rgba(var(--info-rgb),.12); color: var(--info); }
.ctl-badge.stage  { background: rgba(var(--purple-rgb),.12); color: var(--purple); }
.ctl-badge.prob   { background: rgba(var(--warning-rgb),.12); color: var(--warning); }
.ctl-badge.due    { background: rgba(var(--danger-rgb),.1);   color: var(--danger); }
.ctl-badge.scan   { background: rgba(var(--n),.12); color: var(--info); }

/* Type-specific dot glow */
.ctl-event--created .ctl-dot  { box-shadow: 0 0 12px rgba(var(--accent-rgb),.4), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--deal .ctl-dot     { box-shadow: 0 0 10px rgba(var(--success-rgb),.3), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--email_sent .ctl-dot { box-shadow: 0 0 10px rgba(var(--info-rgb),.3), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--sequence_mail .ctl-dot { box-shadow: 0 0 10px rgba(var(--info-rgb),.3), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--reply .ctl-dot      { box-shadow: 0 0 12px rgba(var(--purple-rgb),.45), 0 0 0 3px rgba(0,0,0,.4); }
.ctl-event--auto_reply .ctl-dot { box-shadow: 0 0 10px rgba(var(--warning-rgb),.3), 0 0 0 3px rgba(0,0,0,.4); }

/* ─── ZEITLEISTE: KLICKBARE ZEILEN ───────────────────────────────────────── */
/* Zeilen, hinter denen mehr steckt (Mail, Antwort, Bounce, Deal), öffnen ein
   Fenster. Ohne sichtbaren Unterschied ratet man, welche das sind. */
.ctl-event--klickbar { cursor: pointer; }
.ctl-event--klickbar .ctl-body { border-color: rgba(var(--n),.16); }
.ctl-event--klickbar:hover .ctl-body,
.ctl-event--klickbar:focus-visible .ctl-body {
  background: rgba(var(--n),.1);
  border-color: rgba(var(--accent-rgb),.35);
}
.ctl-event--klickbar:focus-visible { outline: none; }
.ctl-open-hint { color: rgba(var(--n),.58); font-weight: 700; }

/* Wen die Zeile betrifft. An der Firmenkarte trägt fast jede Zeile eine
   Person; sie führt auf deren Karte, auch wenn die Zeile selbst etwas
   anderes öffnet. */
.ctl-person {
  font-size: 14px;
  color: rgba(var(--n),.88);
  padding: 1px 8px;
  border-radius: 99px;
  border: 1px solid rgba(var(--n),.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
  /* Direkt neben die Art des Ereignisses, nicht in die Mitte: "Sequenz-Mail
     gesendet · Philipp Käufer" liest sich als ein Satz. */
  margin-right: auto;
}
.ctl-person[role="button"] { cursor: pointer; }
/* Die Einzelfunde eines gebündelten Crawler-Laufs: eingerückt, kleiner, ohne
   eigenen Zeitstrahl – sie gehören sichtbar zur Zeile darüber. */
.ctl-kinder {
  margin: 10px 0 2px;
  padding-left: 12px;
  border-left: 2px solid rgba(var(--info-rgb),.35);
}
.ctl-kinder .ctl-event { padding: 4px 0; gap: 10px; }
.ctl-kinder .ctl-dot { width: 26px; height: 26px; box-shadow: none; }
.ctl-kinder .ctl-dot svg { width: 13px; height: 13px; }
.ctl-kinder .ctl-body { margin-top: 0; padding: 6px 10px; }

/* "Gespräch läuft": diese Person hat geantwortet, nur auf eine andere Mail.
   Bewusst leise – der Zustand der Zeile darunter bleibt der Zustand der Zeile. */
.tk-gespraech {
  display: block;
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

/* Die Mail im Ereignisfenster des Versandprotokolls – zugeklappt, damit die
   Ereignisse oben bleiben */
.tk-mail-block { margin: 0 0 14px; }
.tk-mail-block > summary {
  cursor: pointer;
  font-size: 14px;
  color: rgba(var(--n),.86);
  padding: 6px 0;
  user-select: none;
}
.tk-mail-block > summary:hover { color: var(--fg); }
.tk-mail-block .ctl-mail-frame { height: 38vh; margin-top: 8px; }
.tk-suchleiste { margin-bottom: 4px; }

/* Was heute gelaufen ist – eine Zeile über dem Dashboard-Strang */
.dash-heute {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(var(--n),.62);
  padding: 2px 0 10px;
}
.dash-heute-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--signal-red, var(--accent-light));
}
/* Im Dashboard ist weniger Platz als im Tab: engere Zeilen, kein Zeitstrahl */
.ctl-list--dash::before { display: none; }
.ctl-list--dash .ctl-event { padding: 5px 0; gap: 10px; }
.ctl-list--dash .ctl-dot { width: 28px; height: 28px; }
.ctl-list--dash .ctl-dot svg { width: 14px; height: 14px; }
.ctl-list--dash .ctl-body { margin-top: 0; padding: 6px 10px; }
.ctl-list--dash .ctl-badges { margin-top: 4px; }

/* Der Feed im Aktivitäten-Tab: dieselben Zeilen, nur ohne Datensatz drumherum */
.ctl-list--feed { margin-top: 8px; }
.feed-fuss { display: flex; justify-content: center; padding: 18px 0 40px; }
.feed-ende { font-size: 14px; color: rgba(var(--n),.58); }

.ctl-person[role="button"]:hover,
.ctl-person[role="button"]:focus-visible {
  border-color: rgba(var(--accent-rgb),.45);
  color: var(--fg);
  outline: none;
}
.ctl-meta { flex-wrap: wrap; }

/* Antwort- und Notiztext in der Zeile: der Anfang, das Ganze im Fenster */
.ctl-text--zitat {
  border-left: 2px solid rgba(var(--purple-rgb),.4);
  padding-left: 10px;
  margin-top: 6px;
  color: rgba(var(--n),.72);
}

/* ─── ZEITLEISTE: MAIL- UND ANTWORTFENSTER ───────────────────────────────── */
.ctl-mail-meta    { font-size: 14px; color: rgba(var(--n),.8); margin-bottom: 6px; }
.ctl-mail-betreff { font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.ctl-mail-titel   {
  font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--signal-red, var(--accent-light)); margin: 18px 0 8px;
}
/* Die Mail kommt weiss aus dem Postfach – im dunklen CRM braucht sie einen
   eigenen Rahmen, sonst sieht sie aus wie ein Fehler in der Oberfläche. */
.ctl-mail-frame {
  width: 100%;
  height: 46vh;
  border: 1px solid rgba(var(--n),.18);
  border-radius: 8px;
  background: #fff;
}
.ctl-antwort-text {
  white-space: pre-wrap;
  line-height: 1.55;
  padding: 12px 14px;
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 8px;
  max-height: 52vh;
  overflow: auto;
}
.ctl-hinweis { font-size: 14px; color: rgba(var(--n),.76); line-height: 1.5; }

.ctl-ereignisse { max-height: 32vh; overflow: auto; }
.ctl-ereignis {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  font-size: 15px;
  border-bottom: 1px solid rgba(var(--n),.12);
}
.ctl-ereignis-art  { font-size: 14px; color: rgba(var(--n),.76); }
.ctl-ereignis-zeit { font-variant-numeric: tabular-nums; }
.ctl-ereignis-ort  {
  font-size: 13px; color: rgba(var(--n),.8);
  padding: 1px 6px; border-radius: 99px; border: 1px solid rgba(var(--n),.2);
}
.ctl-ereignis a { color: rgba(var(--n),.86); font-size: 14px; }


/* ─── BUG FIXES – SVG Icon Sizing ────────────────────────────────────────── */
/* Verhindert riesige SVG-Icons in Headings und View-Titles */
.view-title svg,
.view-header h1 svg,
.view-header h2 svg,
.module-title svg,
h1 > svg, h2 > svg, h3 > svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  vertical-align: middle;
}

.eh-reader-empty svg {
  width: 48px !important;
  height: 48px !important;
  opacity: .15;
}
.eh-empty svg {
  width: 36px !important;
  height: 36px !important;
  opacity: .2;
}

/* ─── TEMPLATE USE MODAL ──────────────────────────────────────────────────── */

.template-card {
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.template-card:hover {
  border-color: rgba(var(--accent-rgb),.5) !important;
  background: rgba(var(--accent-rgb),.04) !important;
  transform: translateY(-1px);
}
.template-use-hint {
  font-size: 13px;
  color: var(--accent);
  opacity: .7;
  font-weight: 600;
}

/* Die Hauptaktion stand in einem eigenen Rotverlauf (var(--accent) → var(--accent-hover)),
   der weder die Hausfarbe war noch sich vom danebenstehenden Löschen-Knopf
   unterschied – Hauptaktion und zerstörerische Aktion sahen gleich aus. */
.btn-use {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.btn-use:hover { opacity: .85; }

/* Template-Use Modal sections */
.tpl-use-section { margin-bottom: 18px; }

.tpl-contact-results {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(var(--n),.13);
  border-radius: 8px;
  margin-top: 6px;
  background: var(--bg-elevated);
}

.tpl-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--n),.08);
  transition: background .1s;
}
.tpl-contact-item:last-child { border-bottom: none; }
.tpl-contact-item:hover { background: rgba(var(--n),.1); }

.tpl-contact-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}

.tpl-contact-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tpl-contact-info strong { font-size: 15px; font-weight: 700; }
.tpl-contact-info span  { font-size: 13px; color: rgba(var(--n),.62); }

.tpl-selected-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(var(--success-rgb),.06);
  border: 1px solid rgba(var(--success-rgb),.2);
  border-radius: 8px;
  margin-top: 6px;
}
.tpl-clear-btn {
  margin-left: auto; background: none; border: none;
  color: rgba(var(--n),.62); cursor: pointer; font-size: 16px;
  padding: 4px 8px; border-radius: 4px;
}
.tpl-clear-btn:hover { background: rgba(var(--n),.1); color: var(--fg); }

.tpl-no-results {
  padding: 12px; text-align: center;
  font-size: 14px; color: rgba(var(--n),.52);
}

.tpl-preview-box {
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.12);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.tpl-preview-label { font-size: 12px; font-weight: 700; color: rgba(var(--n),.52); text-transform: uppercase; margin-bottom: 4px; }
.tpl-preview-subject { font-size: 16px; font-weight: 600; color: rgba(var(--n),.93); }

.tpl-use-actions {
  display: flex; gap: 10px;
  padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEQUENCES MODULE – Hunter.io Style
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ Sequenzen ═══════════════════════════════════════════════════════════════
   Hier standen bis zum 21.08.2026 .seq-layout, .seq-sidebar und .seq-nav-item:
   eine zweite Seitenleiste von 220 Pixeln, direkt neben der Navigation der
   App. Zwei Leisten nebeneinander, die dasselbe Muster doppeln, und der
   Inhalt begann erst bei 456 Pixeln. Ersetzt durch eine Reiterzeile, wie im
   Crawler.

   Die Lilatöne (#a78bfa, #7c3aed) sind gegen var(--accent) getauscht – das
   Modul lief mit einer eigenen Akzentfarbe, die im CI nicht vorkommt. */

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

.seq-tabs {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 24px 0 0; flex-wrap: wrap;
}
.seq-tabs-spacer { flex: 1 1 auto; }

.seq-tab {
  font: 500 13px/1 var(--font-body);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 16px; background: none; border: 0; cursor: pointer;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s var(--ease);
}
.seq-tab:hover { color: var(--text-primary); }
.seq-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Ein Zähler ohne Zahl ist ein roter Balken ohne Aussage. */
.seq-tab .seq-badge:empty { display: none; }

/* Abstand zwischen Reitern und dem Titel der Ansicht. */
#seq-main-content { padding-top: 22px; }

/* Eine Quote von 0 % ist kein Alarm. Signalrot bekommt sie erst, wenn sie
   etwas aussagt – vorher steht sie gedämpft da wie jede andere leere Zahl. */
.seq-rate { font-weight: 600; color: var(--accent); }
.seq-rate--null { color: var(--text-muted); font-weight: 400; }

.seq-badge {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.seq-nav-divider {
  height: 1px;
  background: rgba(var(--n),.12);
  margin: 10px 8px;
}

/* ── Main Content ─────────────────────────────────────────────────────────── */
.seq-main {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
  min-width: 0;
}

.seq-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.seq-page-header h2 { font-size: 24px; font-weight: 700; color: var(--fg); margin: 0 0 4px; }
.seq-page-subtitle { font-size: 15px; color: rgba(var(--n),.66); margin: 0; }

.seq-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.seq-btn-primary svg { width: 14px; height: 14px; }
.seq-btn-primary:hover { background: var(--accent-hover); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.seq-table { border: 1px solid rgba(var(--n),.13); border-radius: 10px; overflow: hidden; }
.seq-table-head {
  display: grid;
  grid-template-columns: 2fr .8fr .6fr .8fr .8fr .7fr .7fr auto;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(var(--n),.07);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(var(--n),.58);
  border-bottom: 1px solid rgba(var(--n),.12);
}
.seq-table-row {
  display: grid;
  grid-template-columns: 2fr .8fr .6fr .8fr .8fr .7fr .7fr auto;
  gap: 8px;
  padding: 12px 16px;
  align-items: center;
  font-size: 15px;
  color: rgba(var(--n),.88);
  border-bottom: 1px solid rgba(var(--n),.08);
  cursor: pointer;
  transition: background .12s;
}
.seq-table-row:last-child { border-bottom: none; }
.seq-table-row:hover { background: rgba(var(--n),.07); }
.seq-name { font-weight: 600; color: var(--fg); }
.seq-rate { font-weight: 600; color: var(--accent); }
.seq-row-actions { display: flex; gap: 6px; }

.seq-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.seq-status-badge.active   { background: rgba(var(--success-rgb),.15); color: var(--success); }
.seq-status-badge.draft    { background: rgba(var(--n),.15); color: var(--text-muted); }
.seq-status-badge.paused   { background: rgba(var(--warning-rgb),.15); color: var(--warning); }
.seq-status-badge.archived { background: rgba(var(--n),.12); color: var(--text-muted); }

/* ── Empty State ──────────────────────────────────────────────────────────── */
.seq-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  gap: 12px;
}
.seq-empty-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: rgba(var(--n),.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.seq-empty-icon svg { width: 28px; height: 28px; color: rgba(var(--n),.58); }
.seq-empty-state h3 { font-size: 20px; font-weight: 700; color: var(--fg); margin: 0; }
.seq-empty-state p  { font-size: 16px; color: rgba(var(--n),.66); margin: 0; max-width: 380px; line-height: 1.6; }

/* ── Detail View ──────────────────────────────────────────────────────────── */
.seq-detail { display: flex; flex-direction: column; gap: 24px; }

.seq-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.seq-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(var(--n),.66); background: none; border: none;
  font-size: 15px; cursor: pointer; padding: 6px 10px; border-radius: 6px;
  transition: all .15s;
}
.seq-back-btn:hover { background: rgba(var(--n),.1); color: rgba(var(--n),.91); }
.seq-back-btn svg { width: 14px; height: 14px; }
.seq-detail-title { display: flex; align-items: center; gap: 10px; flex: 1; }
.seq-detail-title h2 { font-size: 22px; font-weight: 700; color: var(--fg); margin: 0; }
.seq-detail-actions { display: flex; gap: 8px; }

/* ── Stats Bar ────────────────────────────────────────────────────────────── */
.seq-stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(var(--n),.13);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 10px;
  overflow: hidden;
}
.seq-stat {
  padding: 16px;
  background: rgba(var(--n),.05);
  text-align: center;
}
.seq-stat-val { font-size: 24px; font-weight: 700; color: var(--fg); }
.seq-stat-label { font-size: 13px; color: rgba(var(--n),.62); margin-top: 2px; }
/* Hauptzahl seit 08.10.2026: Antworten je 100 Kontakte */
.seq-stat-haupt { background: rgba(var(--accent-rgb),.10); }
.seq-stat-haupt .seq-stat-val { color: var(--accent); }
.seq-kennzahl-details { margin-top: 10px; }
.seq-kennzahl-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.seq-kennzahl-tabelle th, .seq-kennzahl-tabelle td { padding: 6px 10px; text-align: right; border-bottom: 1px solid rgba(var(--n),.10); white-space: nowrap; }
.seq-kennzahl-tabelle th { font-weight: 600; color: var(--text-secondary); }
.seq-kennzahl-tabelle th:first-child, .seq-kennzahl-tabelle td:first-child { text-align: left; }
.seq-kennzahl-test { font-size: 13px; color: var(--text-secondary); margin: 10px 0 0; }
.seq-kennzahl-hinweis { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

/* Einstiege (Paket C, seit 2026-10) */
.einstieg-seite h3 { font-size: 15px; margin: 18px 0 8px; color: var(--fg); }
.einstieg-karte { padding: 12px 14px; margin-bottom: 10px; border: 1px solid rgba(var(--n),.13); border-radius: 10px; background: rgba(var(--n),.04); }
.einstieg-kopf { font-size: 14px; color: var(--fg); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.einstieg-meta { font-size: 12px; color: var(--text-muted); }
.einstieg-quelle { font-size: 13px; color: var(--text-secondary); margin: 6px 0; }
.einstieg-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px; border-radius: 8px; border: 1px solid rgba(var(--n),.2); background: transparent; color: var(--fg); resize: vertical; }
.einstieg-fehler { font-size: 12px; color: var(--accent); margin-top: 4px; }
.einstieg-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 720px) {
  .seq-stats-bar { grid-template-columns: repeat(3, 1fr); }
  .seq-kennzahl-details { overflow-x: auto; }
}

/* ── Steps Timeline ───────────────────────────────────────────────────────── */
.seq-steps-section, .seq-contacts-section {
  background: rgba(var(--n),.05);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 12px;
  overflow: hidden;
}
.seq-steps-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(var(--n),.1);
}
.seq-steps-header h3 { font-size: 16px; font-weight: 700; color: var(--fg); margin: 0; }

.seq-steps-timeline { padding: 20px; display: flex; flex-direction: column; gap: 0; }

.seq-step-card {
  display: flex;
  gap: 16px;
  position: relative;
}

.seq-step-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
}
.seq-step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.25);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.seq-step-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: rgba(var(--accent-rgb),.2);
  margin: 4px 0;
}

.seq-step-body {
  flex: 1;
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.12);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.seq-step-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.seq-step-delay {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.12);
  padding: 2px 8px;
  border-radius: 20px;
}
.seq-step-reply-badge {
  font-size: 13px;
  color: rgba(var(--n),.66);
  background: rgba(var(--n),.1);
  padding: 2px 8px;
  border-radius: 20px;
}
.seq-step-subject { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.seq-step-preview { font-size: 14px; color: rgba(var(--n),.66); line-height: 1.5; margin-bottom: 10px; white-space: pre-wrap; }
.seq-step-actions { display: flex; gap: 8px; }

.seq-no-steps {
  padding: 32px; text-align: center; color: rgba(var(--n),.58); font-size: 15px;
}

/* ── Contacts Table in detail ─────────────────────────────────────────────── */
.seq-contacts-table { }
.seq-contacts-head {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr .8fr .6fr 1fr auto;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(var(--n),.52);
  border-bottom: 1px solid rgba(var(--n),.1);
}
.seq-contact-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr .8fr .6fr 1fr auto;
  gap: 8px;
  padding: 11px 20px;
  font-size: 15px;
  color: rgba(var(--n),.86);
  border-bottom: 1px solid rgba(var(--n),.07);
  align-items: center;
}
.seq-contact-row:last-child { border-bottom: none; }

/* Siebte Spalte: Pause und Entfernen je Zeile. Bis zum 24.08.2026 gab es hier
   nur "CSV Export" – einschreiben konnte man, ausschreiben nicht.
   auto statt einer festen Breite, weil "Fortsetzen" laenger ist als "Pause"
   und die Spalte sonst je nach Status springt. */
.seq-contact-aktionen { display: flex; gap: 6px; justify-content: flex-end; }
.seq-contact-aktionen .lf-btn-sm { padding: 3px 9px; font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) {
  .seq-contacts-head { display: none; }
  .seq-contact-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .seq-contact-aktionen { grid-column: 2; grid-row: 1 / span 3; align-items: flex-start; }
}
.seq-contact-email { color: var(--accent); font-weight: 500; }
.seq-contact-status { font-size: 13px; font-weight: 600; }
.seq-no-contacts { padding: 32px; text-align: center; color: rgba(var(--n),.58); font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ── Settings ─────────────────────────────────────────────────────────────── */
.seq-settings { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.seq-settings-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .15s;
}
.seq-settings-card:hover { border-color: rgba(var(--accent-rgb),.3); }
.seq-settings-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb),.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.seq-settings-icon svg { width: 16px; height: 16px; color: var(--accent); }
.seq-settings-body { flex: 1; }
.seq-settings-body h4 { font-size: 16px; font-weight: 700; color: var(--fg); margin: 0 0 4px; }
.seq-settings-body p  { font-size: 14px; color: rgba(var(--n),.66); margin: 0 0 10px; }
.seq-settings-input {
  width: 100%;
  background: rgba(var(--n),.1);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.seq-day-picker { display: flex; gap: 6px; margin-bottom: 10px; }
.seq-day-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.seq-day-btn input { display: none; }
.seq-day-btn span {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(var(--n),.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: rgba(var(--n),.72);
  transition: all .15s;
}
.seq-day-btn input:checked + span { background: var(--accent); color: var(--on-accent); }
.seq-time-row { display: flex; gap: 12px; }
.seq-time-row > div { display: flex; flex-direction: column; gap: 4px; }
.seq-time-row label { font-size: 13px; color: rgba(var(--n),.62); }
.seq-time-row input, .seq-time-row select {
  background: rgba(var(--n),.1); border: 1px solid rgba(var(--n),.16);
  border-radius: 6px; padding: 6px 10px; color: var(--fg); font-size: 14px;
}

/* ── Templates Grid ───────────────────────────────────────────────────────── */
.seq-template-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.seq-cat-btn {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px; font-weight: 600;
  border: 1px solid rgba(var(--n),.16);
  background: transparent; color: rgba(var(--n),.72);
  cursor: pointer; transition: all .15s;
}
.seq-cat-btn.active, .seq-cat-btn:hover {
  background: rgba(var(--accent-rgb),.2);
  border-color: var(--accent);
  color: var(--accent);
}
.seq-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.seq-template-card {
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 10px;
  padding: 16px;
  transition: border-color .15s;
  display: flex; flex-direction: column; gap: 8px;
}
.seq-template-card:hover { border-color: rgba(var(--accent-rgb),.3); }
.seq-template-subject { font-size: 15px; font-weight: 700; color: var(--fg); }
.seq-template-preview { font-size: 14px; color: rgba(var(--n),.66); line-height: 1.5; flex: 1; }
.seq-template-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.seq-template-tags span {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  background: rgba(var(--accent-rgb),.12); color: var(--accent);
  padding: 2px 8px; border-radius: 20px;
}
.seq-template-actions { padding-top: 4px; }

/* ── Reporting Summary ────────────────────────────────────────────────────── */
.seq-reporting-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.seq-stat-card {
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}
.seq-stat-card-val { font-size: 26px; font-weight: 700; color: var(--fg); }
.seq-stat-card-label { font-size: 13px; color: rgba(var(--n),.62); margin-top: 4px; }

/* ── Queue Info ───────────────────────────────────────────────────────────── */
.seq-queue-info {
  display: flex; align-items: center; gap: 10px;
  background: rgba(var(--accent-rgb),.08);
  border: 1px solid rgba(var(--accent-rgb),.2);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px; color: rgba(var(--n),.86);
  margin-bottom: 20px;
}
.seq-queue-info svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ── Unsubscriptions tabs ─────────────────────────────────────────────────── */
.seq-tabs-mini { display: flex; gap: 4px; margin-bottom: 20px; }
.seq-tab-mini {
  padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(var(--n),.16); background: transparent;
  color: rgba(var(--n),.72); cursor: pointer; transition: all .15s;
}
.seq-tab-mini.active { background: rgba(var(--accent-rgb),.2); border-color: var(--accent); color: var(--accent); }

/* ── Settings Alerts (SPF/DKIM) ──────────────────────────────────────────── */
.seq-alert {
  padding: 12px 16px; border-radius: 10px; font-size: 15px; line-height: 1.6;
  margin-bottom: 16px;
}
.seq-alert-warn {
  background: rgba(var(--warning-rgb),.1); border: 1px solid rgba(var(--warning-rgb),.3); color: var(--warning);
}
.seq-alert-ok {
  background: rgba(var(--success-rgb),.08); border: 1px solid rgba(var(--success-rgb),.25); color: var(--success);
}
/* Absender-Karte: aktive Pool-Konten je Domain (seit 15.09.2026) */
.seq-pool { display: flex; flex-direction: column; gap: 14px; }
.seq-pool-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); }
.seq-pool-status {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.seq-pool-status.ist-ok    { color: var(--success); border-color: rgba(var(--success-rgb),.4); }
.seq-pool-status.ist-fehlt { color: var(--warning); border-color: rgba(var(--warning-rgb),.45); }
.seq-pool-konten { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.seq-pool-konten li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.seq-pool-tag { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: rgba(var(--n),.06); color: var(--text-muted); }
/* Extra blacklist type badges */
.seq-status-badge.unsubscribe    { background: rgba(var(--warning-rgb),.15); color: var(--warning); }
.seq-status-badge.hard           { background: rgba(var(--danger-rgb),.15);  color: var(--danger); }
.seq-status-badge.spam_complaint { background: rgba(var(--danger-rgb),.2);   color: var(--danger); }
.seq-status-badge.manual         { background: rgba(var(--n),.12); color: var(--text-muted); }
.seq-status-badge.replied        { background: rgba(var(--success-rgb),.15);  color: var(--success); }


/* ── Placeholder hint ─────────────────────────────────────────────────────── */
.seq-placeholder-hint {
  font-size: 13px; color: rgba(var(--n),.62); margin-bottom: 6px;
}
.seq-placeholder-hint code {
  background: rgba(var(--n),.1); padding: 1px 5px; border-radius: 4px;
  font-family: monospace; color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CSV BULK IMPORT / EXPORT
   ═══════════════════════════════════════════════════════════════════════════ */

.csv-drop-zone {
  border: 2px dashed rgba(var(--accent-rgb),.35);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  background: rgba(var(--accent-rgb),.04);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.csv-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.1);
}
.csv-drop-zone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.csv-drop-icon { font-size: 32px; margin-bottom: 8px; }
.csv-drop-text { font-size: 16px; color: rgba(var(--n),.86); font-weight: 600; }
.csv-drop-hint { font-size: 14px; color: rgba(var(--n),.58); margin-top: 4px; }

.csv-preview-table {
  overflow-x: auto;
  border: 1px solid rgba(var(--n),.13);
  border-radius: 10px;
  margin-top: 16px;
}
.csv-preview-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.csv-preview-table th {
  background: rgba(var(--n),.1);
  padding: 8px 12px;
  text-align: left;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  color: rgba(var(--n),.62);
  border-bottom: 1px solid rgba(var(--n),.13);
}
.csv-preview-table td {
  padding: 8px 12px;
  color: rgba(var(--n),.86);
  border-bottom: 1px solid rgba(var(--n),.07);
}
.csv-preview-table tr:last-child td { border-bottom: none; }

.csv-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.csv-export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--success-rgb),.12);
  color: var(--success);
  border: 1px solid rgba(var(--success-rgb),.25);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.csv-export-btn:hover { background: rgba(var(--success-rgb),.2); }
.csv-export-btn svg { width: 13px; height: 13px; }

.csv-import-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--info-rgb),.12);
  color: var(--info);
  border: 1px solid rgba(var(--info-rgb),.25);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.csv-import-btn:hover { background: rgba(var(--info-rgb),.2); }

.csv-progress {
  width: 100%; background: rgba(var(--n),.13);
  border-radius: 4px; height: 6px; overflow: hidden; margin-top: 10px;
}
.csv-progress-bar {
  height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent));
  border-radius: 4px; transition: width .3s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SIGNALS MODULE – Company Monitoring
   ═══════════════════════════════════════════════════════════════════════════ */

.signals-layout { padding:24px; max-width:1200px; margin:0 auto; }

.signals-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:16px; flex-wrap:wrap;
}
.signals-header-left { display:flex; align-items:center; gap:16px; }
/* Der Kasten mit dem Symbol trug als Letztes noch die alte Modulfarbe. Er ist
   ganz entfallen: Die anderen Module setzen ihre Überschrift ohne Symbol, und
   ein Piktogramm neben dem Wort "Signale" sagt nichts dazu. */
.signals-icon-wrap { display: none; }
.signals-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--text-primary);
}
.signals-subtitle { font-size: 15px; color: var(--text-secondary); margin-top: 4px; }
.signals-header-actions { display:flex; gap:10px; }

.sig-btn-primary, .sig-btn-secondary {
  display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:8px; border:none;
  font-size:15px; font-weight:500; cursor:pointer; transition:all .2s;
}
.sig-btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:var(--on-accent);
}
.sig-btn-primary:hover { transform:translateY(-1px); filter:brightness(1.1); }
.sig-btn-secondary {
  background:rgba(var(--n),.13); color:rgba(var(--n),.91);
  border:1px solid rgba(var(--n),.16);
}
.sig-btn-secondary:hover { background:rgba(var(--n),.18); }
.sig-btn-primary svg, .sig-btn-secondary svg { width:14px; height:14px; }

.signals-stats-strip {
  display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.sig-stat-chip {
  padding:6px 14px; border-radius:20px; font-size:14px; font-weight:500;
  background:rgba(var(--n),.1); border:1px solid rgba(var(--n),.13);
  display:flex; align-items:center; gap:6px;
}
.sig-stat-chip.active { background:rgba(var(--success-rgb),.12); border-color:rgba(var(--success-rgb),.3); color:var(--success); }
.sig-stat-chip.events { background:rgba(var(--accent-rgb),.1); border-color:rgba(var(--accent-rgb),.3); }
.sig-stat-chip.events.has-events { background:rgba(var(--accent-rgb),.2); border-color:var(--accent); color:var(--accent); animation:pulse-border 2s infinite; }
@keyframes pulse-border { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.4)} 50%{box-shadow:0 0 0 4px rgba(var(--accent-rgb),0)} }

.signals-type-filter { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.sig-type-btn {
  padding:7px 14px; border-radius:20px; border:1px solid rgba(var(--n),.16);
  background:rgba(var(--n),.08); color:rgba(var(--n),.8);
  font-size:14px; cursor:pointer; transition:all .2s;
}
.sig-type-btn:hover { background:rgba(var(--n),.16); color:var(--fg); }
.sig-type-btn.active { background:rgba(var(--accent-rgb),.15); border-color:var(--accent); color:var(--accent); }

.signals-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

.signal-card {
  background:rgba(var(--n),.08); border-radius:14px;
  border:1px solid rgba(var(--n),.13);
  overflow:hidden; transition:all .25s;
}
.signal-card:hover { transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.3); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.signal-card.paused { opacity:.6; }

.signal-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(var(--n),.08);
}
.signal-type-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:12px; font-size:13px; font-weight:600;
}
.signal-card-menu { display:flex; align-items:center; gap:8px; }
.signal-unseen-badge {
  background:var(--accent); color:var(--on-accent); border-radius:10px;
  padding:2px 8px; font-size:13px; font-weight:700;
  animation:bounce-in .3s ease;
}
@keyframes bounce-in { 0%{transform:scale(0)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }
.signal-status-dot {
  width:8px; height:8px; border-radius:50%;
}
.signal-status-dot.active { background:var(--success); box-shadow:0 0 6px var(--success); }
.signal-status-dot.paused { background:var(--text-muted); }

.signal-card-body { padding:14px 16px; cursor:pointer; }
.signal-company-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.signal-favicon { width:24px; height:24px; border-radius:4px; object-fit:contain; }
.signal-name { font-weight:600; font-size:16px; }
.signal-domain { font-size:13px; opacity:.5; }
.signal-keywords { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.signal-kw {
  background:rgba(var(--n),.13); border-radius:10px;
  padding:2px 8px; font-size:13px; opacity:.8;
}
.signal-card-stats { display:flex; gap:12px; font-size:13px; opacity:.5; }
.sig-cs { display:flex; align-items:center; gap:4px; }
.sig-cs svg { width:11px; height:11px; }

.signal-card-actions {
  display:flex; gap:6px; padding:10px 16px;
  border-top:1px solid rgba(var(--n),.08);
  background:var(--sunken-1);
}
.btn-danger-sm { color:var(--danger) !important; }
.btn-danger-sm:hover { background:rgba(var(--danger-rgb),.15) !important; }

.signals-empty {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  opacity:.6;
}
.signals-empty-icon {
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:rgba(var(--n),.08);
  display:flex; align-items:center; justify-content:center;
}
.signals-empty-icon svg { width:28px; height:28px; }
.signals-empty h3 { margin:0 0 8px; font-size:20px; }
.signals-empty p { margin:0 0 20px; font-size:16px; }

/* ── LinkedIn-Suchtreffer im Signals-Tab ─────────────────────────────────── */
.li-block { margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--border, rgba(var(--n),.13)); border-radius: 10px; background: var(--bg-card, rgba(var(--n),.04)); }
.li-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.li-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.li-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }
.li-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.li-tabelle th { text-align: left; font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); padding: 6px 8px; border-bottom: 1px solid rgba(var(--n),.13); }
.li-tabelle td { padding: 8px; border-bottom: 1px solid rgba(var(--n),.08); vertical-align: middle; }
.li-tabelle tr.li-neu td:first-child { border-left: 2px solid var(--accent, var(--accent)); }
.li-tabelle tr.li-aus { opacity: .5; }
.li-tabelle .li-zahl { font-variant-numeric: tabular-nums; text-align: center; }
.li-tabelle .li-name { color: inherit; text-decoration: none; font-weight: 600; }
.li-tabelle .li-name:hover { text-decoration: underline; }
.li-tabelle .li-grund, .li-tabelle .li-leer { opacity: .5; font-size: 14px; }
/* .lf-btn-sm ist display:flex und stapelt sich in einer Zelle untereinander;
   nebeneinander wird die Zeile ein Drittel so hoch. */
.li-tabelle .li-aktionen { white-space: nowrap; text-align: right; }
.li-tabelle .li-aktionen .lf-btn-sm { display: inline-flex; padding: 5px 10px; }
.li-tabelle .li-aktionen .lf-btn-sm + .lf-btn-sm { margin-left: 6px; }
.li-tabelle td { padding: 6px 8px; }
.li-mehr { text-align: center; padding-top: 10px; }
.li-mehr .lf-btn-sm { display: inline-flex; }
@media (max-width: 800px) { .li-tabelle th:nth-child(3), .li-tabelle td:nth-child(3) { display: none; } }
.li-input { width: 100%; max-width: 220px; padding: 5px 8px; font: inherit; font-size: 15px; color: inherit; background: rgba(var(--n),.08); border: 1px solid rgba(var(--n),.22); border-radius: 6px; outline: none; }
.li-input:focus { border-color: var(--accent, var(--accent)); }
.li-domain form, .li-domain .li-inline { display: flex; gap: 6px; align-items: center; }

/* Signal Detail Events */
.sig-events-list { display:flex; flex-direction:column; gap:10px; max-height:400px; overflow-y:auto; }
.sig-event-item {
  display:flex; align-items:flex-start; gap:10px; padding:12px;
  border-radius:10px; background:rgba(var(--n),.08);
  border-left:3px solid transparent; transition:all .2s;
}
.sig-event-item.unseen { border-left-color:var(--accent); background:rgba(var(--accent-rgb),.05); }
.sig-event-type-icon { font-size:22px; flex-shrink:0; }
.sig-event-body { flex:1; min-width:0; }
.sig-event-title { font-weight:600; font-size:15px; margin-bottom:3px; }
.sig-event-desc { font-size:14px; opacity:.6; margin-bottom:4px; }
.sig-event-link { font-size:13px; color:var(--accent); text-decoration:none; }
.sig-event-link:hover { text-decoration:underline; }
.sig-event-time { font-size:13px; opacity:.4; margin-top:4px; }
.sig-event-actions { flex-shrink:0; }
.sig-events-empty { text-align:center; padding:40px 20px; opacity:.5; font-size:16px; }

/* Signal Create Modal */
.sig-type-picker { display:flex; flex-direction:column; gap:8px; }
.sig-type-option {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px; cursor:pointer;
  border:1.5px solid rgba(var(--n),.16); transition:all .2s;
}
.sig-type-option:hover { background:rgba(var(--n),.08); }
.sig-type-option.selected { border-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.sig-type-icon { font-size:24px; }
.sig-type-name { font-weight:600; font-size:15px; }
.sig-type-desc { font-size:13px; opacity:.5; margin-top:1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL VERIFIER
   ═══════════════════════════════════════════════════════════════════════════ */

.lf-verifier-hero {
  display:flex; align-items:center; gap:16px; padding:20px;
  background:linear-gradient(135deg,rgba(var(--success-rgb),.05),rgba(var(--success-rgb),.12));
  border:1px solid rgba(var(--success-rgb),.2); border-radius:14px; margin-bottom:20px;
  flex-wrap:wrap;
}
.lf-verifier-icon-wrap {
  width:48px; height:48px; flex-shrink:0; border-radius:12px;
  background:rgba(var(--success-rgb),.15); display:flex; align-items:center; justify-content:center;
}
.lf-verifier-icon-wrap svg { width:22px; height:22px; color:var(--success); }
.lf-verifier-icon-wrap svg path, .lf-verifier-icon-wrap svg polyline { stroke:var(--success); }
.lf-verifier-hero h3 { margin:0 0 3px; font-size:18px; font-weight:700; }
.lf-verifier-hero p { margin:0; font-size:14px; opacity:.6; }
.lf-verifier-badges { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }

/* Verifier Badges */
.ver-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px; font-size:13px; font-weight:600;
}
.ver-badge.valid,    .ver-badge.valid.accept_all.valid    { background:rgba(var(--success-rgb),.15); color:var(--success); }
.ver-badge.accept-all, .ver-badge.accept_all              { background:rgba(var(--warning-rgb),.15); color:var(--warning); }
.ver-badge.invalid                                        { background:rgba(var(--danger-rgb),.15); color:var(--danger); }

/* Single Verifier Result Card */
.ver-result-card {
  margin-top:16px; padding:24px; border-radius:14px;
  background:rgba(var(--n),.08); border:1px solid rgba(var(--n),.16);
  animation:slide-up .3s ease;
}
@keyframes slide-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.ver-result-card.ver-valid   { border-color:rgba(var(--success-rgb),.3); background:rgba(var(--success-rgb),.04); }
.ver-result-card.ver-accept  { border-color:rgba(var(--warning-rgb),.3); background:rgba(var(--warning-rgb),.04); }
.ver-result-card.ver-invalid { border-color:rgba(var(--danger-rgb),.3); background:rgba(var(--danger-rgb),.04); }

.ver-result-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ver-status-big { font-size:24px; font-weight:700; }
.ver-confidence-ring { position:relative; }
.ver-conf-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700;
}
.ver-email-display {
  font-family:monospace; font-size:18px; font-weight:600;
  margin-bottom:8px; word-break:break-all;
}
.ver-reason { font-size:14px; opacity:.6; margin-bottom:16px; }
.ver-checks-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
.ver-check {
  padding:8px 12px; border-radius:8px; font-size:14px; font-weight:500;
  background:rgba(var(--n),.08);
}
.ver-check.ok   { background:rgba(var(--success-rgb),.1); color:var(--success); }
.ver-check.fail { background:rgba(var(--danger-rgb),.1); color:var(--danger); }
.ver-check.warn { background:rgba(var(--warning-rgb),.1); color:var(--warning); }
.ver-mx { font-size:13px; opacity:.5; margin-bottom:14px; font-family:monospace; }
.ver-result-actions { display:flex; gap:8px; }

/* Bulk Verifier Summary */
.ver-bulk-summary {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px;
}
.ver-sum-item {
  text-align:center; padding:16px; border-radius:12px;
  background:rgba(var(--n),.08); font-size:26px; font-weight:700;
}
.ver-sum-item span { display:block; font-size:13px; font-weight:400; opacity:.6; margin-top:4px; }
.ver-sum-item.valid   { background:rgba(var(--success-rgb),.1);  color:var(--success); }
.ver-sum-item.accept-all { background:rgba(var(--warning-rgb),.1); color:var(--warning); }
.ver-sum-item.invalid { background:rgba(var(--danger-rgb),.1);  color:var(--danger); }
.ver-sum-item.total   { background:rgba(var(--n),.1); color:var(--fg); }

.ver-bulk-actions { display:flex; gap:10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISCOVER – Company Browser
   ═══════════════════════════════════════════════════════════════════════════ */

.discover-results-header {
  padding:12px 0; font-size:15px; opacity:.6; margin-bottom:12px;
  border-bottom:1px solid rgba(var(--n),.12);
}
.discover-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.discover-card {
  background:rgba(var(--n),.08); border-radius:14px;
  border:1px solid rgba(var(--n),.13); overflow:hidden; transition:all .25s;
}
.discover-card:hover { transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.4); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.discover-card-header { display:flex; align-items:center; gap:12px; padding:14px 16px 10px; }
.discover-logo { width:36px; height:36px; border-radius:8px; object-fit:contain; background:rgba(var(--n),.08); }
.discover-name { font-weight:600; font-size:16px; margin-bottom:2px; }
.discover-domain { font-size:13px; color:var(--accent); opacity:.8; text-decoration:none; }
.discover-domain:hover { opacity:1; text-decoration:underline; }
.discover-meta { display:flex; flex-wrap:wrap; gap:5px; padding:0 16px 10px; }
.discover-badge {
  padding:3px 8px; border-radius:10px; font-size:13px;
  background:rgba(var(--n),.13); opacity:.8;
}
.discover-badge.emails-found { background:rgba(var(--success-rgb),.15); color:var(--success); opacity:1; }
.discover-actions { display:flex; gap:6px; padding:10px 16px 14px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   GOOGLE SHEETS / GENERAL EXPORT BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.csv-export-btn, .sheets-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px; border:1px solid rgba(var(--n),.18);
  background:rgba(var(--n),.1); color:rgba(var(--n),.91);
  font-size:14px; cursor:pointer; transition:all .2s; font-weight:500;
}
.csv-export-btn:hover { background:rgba(var(--n),.16); border-color:rgba(var(--n),.36); }
.csv-export-btn svg { width:13px; height:13px; }


/* Global: SVGs ohne explizite Größe in Info-/Form-Karten nie größer als 20px */
.lf-proxies-info svg,
.lf-form-info svg,
.lf-discovery-hero-icon > svg { flex-shrink: 0; }

.lf-proxies-info { display: flex; align-items: flex-start; gap: 12px; }
.lf-proxies-info svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ── LEAD SOURCE BADGES (in Firmen + Kontakten) ─────────────────────────────── */
.lead-source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px; white-space: nowrap; vertical-align: middle;
  cursor: pointer; transition: opacity .2s;
}
.lead-source-badge:hover { opacity: .8; }
.lead-source-badge.crawler  { background: rgba(var(--accent-rgb),.18); color: rgba(var(--accent-rgb),.6); border: 1px solid rgba(var(--accent-rgb),.3); }
.lead-source-badge.import   { background: rgba(var(--success-rgb),.15); color: var(--success); border: 1px solid rgba(var(--success-rgb),.25); }
.lead-source-badge.signal   { background: rgba(var(--warning-rgb),.15); color: var(--warning); border: 1px solid rgba(var(--warning-rgb),.25); }

/* ── PIPELINE LAYOUT ─────────────────────────────────────────────────────────── */
.pipeline-layout { display: flex; flex-direction: column; gap: 20px; padding: 0 0 40px; }

.pipeline-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 24px 28px 0;
}
.pipeline-header-left { display: flex; align-items: center; gap: 14px; }
.pipeline-header-left h2 { margin: 0; font-size: 24px; font-weight: 800; }
.pipeline-subtitle { font-size: 14px; opacity: .5; margin-top: 2px; }
.pipeline-icon-wrap {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.25), rgba(var(--accent-rgb),.2));
  border: 1px solid rgba(var(--accent-rgb),.3);
}
.pipeline-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.pip-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: var(--on-accent);
  border: none; border-radius: 10px; padding: 9px 18px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.pip-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(var(--accent-rgb),.4); }
.pip-btn-primary:disabled { opacity: .5; cursor: default; transform: none; }

.pip-btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(var(--n),.12); color: rgba(var(--n),.91);
  border: 1px solid rgba(var(--n),.18); border-radius: 10px; padding: 9px 16px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.pip-btn-secondary:hover { background: rgba(var(--n),.18); }

/* Stats Strip */
.pipeline-stats-strip {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 28px;
}
.pip-stat-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: rgba(var(--n),.1); border: 1px solid rgba(var(--n),.16);
  border-radius: 20px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.pip-stat-chip.pending  { background: rgba(var(--warning-rgb),.1); border-color: rgba(var(--warning-rgb),.25); color: var(--warning); }
.pip-stat-chip.done     { background: rgba(var(--success-rgb),.1); border-color: rgba(var(--success-rgb),.25); color: var(--success); }
.pip-stat-chip.leads    { background: rgba(var(--info-rgb),.1); border-color: rgba(var(--info-rgb),.25); color: var(--info); }
.pip-stat-chip.pushed   { background: rgba(var(--purple-rgb),.1); border-color: rgba(var(--purple-rgb),.25); color: var(--purple); }
.pip-stat-chip.contacts { background: rgba(var(--teal-rgb),.1); border-color: rgba(var(--teal-rgb),.25); color: var(--teal); }
.pip-stat-chip.companies{ background: rgba(var(--orange-rgb),.1); border-color: rgba(var(--orange-rgb),.25); color: var(--orange); }
.pip-stat-chip.failed   { background: rgba(var(--danger-rgb),.1); border-color: rgba(var(--danger-rgb),.25); color: var(--danger); }

/* Tabs */
.pip-tabs {
  display: flex; gap: 4px; padding: 0 28px; border-bottom: 1px solid rgba(var(--n),.13);
  overflow-x: auto;
}
.pip-tab {
  background: none; border: none; color: rgba(var(--n),.66); padding: 10px 16px;
  font-size: 15px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .2s; white-space: nowrap;
}
.pip-tab:hover { color: rgba(var(--n),.91); }
.pip-tab.active { color: var(--accent-light); border-bottom-color: var(--accent); }

/* Panel */
.pip-panel { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }

/* Flow diagram */
.pip-how-it-works {
  background: rgba(var(--n),.07); border: 1px solid rgba(var(--n),.13);
  border-radius: 14px; padding: 20px 24px;
}
.pip-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pip-flow-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(var(--n),.07); border: 1px solid rgba(var(--n),.13);
  border-radius: 12px; padding: 12px 16px; min-width: 90px; text-align: center;
}
.pip-flow-step.active-step { border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.12); }
.pip-flow-icon { font-size: 24px; }
.pip-flow-label { font-size: 13px; font-weight: 600; opacity: .8; line-height: 1.3; }
.pip-flow-label small { opacity: .55; font-weight: 400; }
.pip-flow-arrow { font-size: 22px; opacity: .3; }

/* Options */
.pip-options-card {
  background: rgba(var(--n),.07); border: 1px solid rgba(var(--n),.13);
  border-radius: 14px; padding: 18px 22px;
}
.pip-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
.pip-field { display: flex; flex-direction: column; gap: 6px; }
.pip-field label { font-size: 14px; font-weight: 600; opacity: .55; }
.pip-field input, .pip-field select, .pip-field textarea {
  background: rgba(var(--n),.1); border: 1px solid rgba(var(--n),.18);
  border-radius: 8px; padding: 8px 12px; color: var(--fg); font-size: 15px;
}
.pip-field input:focus, .pip-field select:focus { outline: none; border-color: var(--accent); }
.pip-field select option { background: var(--bg-elevated); }

/* Running indicator */
.pip-running {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--accent-dim); border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 12px;
}
.pip-spinner {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(var(--accent-rgb),.3); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Results table */
.pip-results-table { display: flex; flex-direction: column; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--n),.13); }
.pip-results-head {
  display: grid; grid-template-columns: 2fr 1.2fr 1.5fr 1.2fr .8fr 1fr;
  background: rgba(var(--n),.1); padding: 9px 14px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .5;
}
.pip-results-row {
  display: grid; grid-template-columns: 2fr 1.2fr 1.5fr 1.2fr .8fr 1fr;
  padding: 10px 14px; font-size: 14px; align-items: center;
  border-top: 1px solid rgba(var(--n),.08); transition: background .15s;
}
.pip-results-row:hover { background: rgba(var(--n),.07); }
.pip-email { font-family: monospace; font-size: 13px; color: var(--accent-light); }
.pip-industry-tag {
  background: rgba(var(--accent-rgb),.12); color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; display: inline-block;
}
.pip-badge-pushed { background: rgba(var(--purple-rgb),.18); color: var(--purple); border: 1px solid rgba(var(--purple-rgb),.3); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.pip-badge-pending { background: rgba(var(--n),.12); color: rgba(var(--n),.62); border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.pip-status-badge { border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }

/* CSV Import */
.pip-csv-format {
  background: var(--sunken-2); border-radius: 8px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.pip-csv-format strong { font-size: 14px; opacity: .6; margin-bottom: 4px; display: block; }
.pip-csv-format code { font-family: monospace; font-size: 14px; color: var(--info); }
.pip-csv-drop {
  background: rgba(var(--n),.07); border: 2px dashed rgba(var(--n),.22);
  border-radius: 12px; padding: 32px; text-align: center; cursor: pointer;
  transition: all .2s;
}
.pip-csv-drop:hover, .pip-csv-drop.drag-over {
  background: rgba(var(--info-rgb),.08); border-color: rgba(var(--info-rgb),.4);
}

/* ── LEAD FINDER: Hero-Icon Größen-Fix ──────────────────────────────────────── */
/* Discovery Engine, Discover, Verifier, Proxies Panel-Icons: IMMER klein */
.lf-discovery-hero,
.lf-verifier-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 12px;
  margin-bottom: 16px;
}

.lf-discovery-hero-icon,
.lf-verifier-icon-wrap {
  flex-shrink: 0;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--info-rgb),.15);
  border: 1px solid rgba(var(--info-rgb),.3);
  border-radius: 10px;
  overflow: hidden;
}

.lf-discovery-hero-icon svg,
.lf-verifier-icon-wrap svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex-shrink: 0;
}

/* Tab-Icons: explizit klein halten */
.lf-tab svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  min-height: 14px;
  max-width: 14px;
  max-height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Globale Sicherheitsnetz-Regel: SVGs in Panel-Karten nie größer als 24px */
.lf-panel svg:not(.lf-tab svg):not(.lf-btn-search svg):not(.spin) {
  max-width: 24px;
  max-height: 24px;
}
/* Ausnahmen für Spinner und Search-Buttons */
.lf-btn-search svg { width: 16px !important; height: 16px !important; }

/* Proxies Panel Info-Block */
.lf-proxies-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(var(--info-rgb),.08);
  border: 1px solid rgba(var(--info-rgb),.2);
  border-radius: 10px;
  margin-bottom: 16px;
}
.lf-proxies-info svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── SETTINGS: Startscreen Auswahl ──────────────────────────────────────────── */
.settings-startscreen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.startscreen-option,
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: rgba(var(--n),.08);
  border: 1px solid rgba(var(--n),.16);
  border-radius: 10px;
  color: rgba(var(--n),.83);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  position: relative;
  text-align: center;
  min-height: 72px;
}
.startscreen-option:hover,
.theme-option:hover {
  background: rgba(var(--info-rgb),.12);
  border-color: rgba(var(--info-rgb),.35);
  color: rgba(var(--n),.96);
}
.startscreen-option.active,
.theme-option.active {
  background: rgba(var(--info-rgb),.18);
  border-color: rgba(var(--info-rgb),.6);
  color: var(--info);
}
.startscreen-option svg, .theme-option svg { opacity: .7; flex-shrink: 0; }
.startscreen-option.active svg, .theme-option.active svg { opacity: 1; }
.theme-option small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.startscreen-check {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 12px;
  font-weight: 800;
  color: var(--info);
}

/* ─── TRACKING METHODS COLUMN ────────────────────────────────────────── */
.tracking-methods { display: flex; align-items: center; gap: 4px; }
.tm-pill { font-size: 15px; line-height: 1; display: inline-block; transition: opacity .15s; }
.tm-on   { opacity: 1; }
.tm-off  { opacity: 0.2; filter: grayscale(1); }

/* ═══════════════════════════════════════════════════════════════════════
   TRACKING LIST – strukturiertes Karten-Layout (kein Overflow)
   ═══════════════════════════════════════════════════════════════════════ */

.track-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--info-rgb),.15);
  color: var(--info);
  border-radius: 20px;
  padding: 1px 10px;
  font-size: 14px;
  font-weight: 600;
  margin-left: 8px;
}

.tk-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(var(--n),.12);
  border-radius: 10px;
  overflow: hidden;
}

/* Grid: Main(auto) | Datum(130px) | Geöffnet(130px) | Geklickt(130px) | Tracking(80px) | Status(110px) */
.tk-header,
.tk-row {
  display: grid;
  /* Feste Pixelbreiten summierten sich auf 860 in einem 1321 Pixel breiten
     Kasten: 461 Pixel blieben rechts leer, während Empfänger und Betreff
     abgeschnitten wurden. Die erste Spalte wächst jetzt mit. */
  grid-template-columns: minmax(300px, 2.6fr) 120px 150px 150px 104px 116px;
  align-items: center;
  gap: 0;
}

.tk-header {
  background: rgba(var(--n),.07);
  border-bottom: 1px solid rgba(var(--n),.12);
}

.tk-header > div,
.tk-row > div {
  padding: 10px 14px;
  border-right: 1px solid rgba(var(--n),.08);
}
.tk-header > div:last-child,
.tk-row > div:last-child { border-right: none; }

.tk-header > div {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--n),.58);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tk-row {
  border-bottom: 1px solid rgba(var(--n),.08);
  transition: background .12s;
}
.tk-row:last-child { border-bottom: none; }
.tk-row:hover { background: rgba(var(--n),.05); }

/* Zeilen mit hinterlegtem Kontakt fuehren auf die Kontaktkarte. Der Zeiger
   und das nachgestellte Zeichen sagen das an, bevor man klickt – Zeilen ohne
   Kontakt bleiben unveraendert und damit erkennbar stumm. */
.tk-row--linked { cursor: pointer; }
.tk-row--linked:hover .tk-email { color: var(--accent); }
.tk-row--linked:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tk-open-hint {
  color: rgba(var(--n),.44);
  font-weight: 400;
}
.tk-row--linked:hover .tk-open-hint { color: var(--accent); }

/* Schmale Kaesten (iPad hochkant, iPhone, 18.09.2026): Das Raster braucht
   940 Pixel, .tk-list schneidet per overflow ab – auf dem iPad fehlten
   Geklickt, Quelle und Status ganz. Unter 900 Pixel Kastenbreite wird jede
   Zeile zur Karte: Empfaenger oben ueber die volle Breite, darunter die
   Kennzahlen nebeneinander, jede mit ihrem Spaltennamen als Beschriftung.
   Gemessen am Kasten, nicht am Fenster, weil die Seitenleiste mitzaehlt. */
.tk-list { container-type: inline-size; }
@container (max-width: 900px) {
  .tk-header { display: none; }
  .tk-row {
    grid-template-columns: 72px 128px 128px 72px minmax(0, 1fr);
    align-items: start;
    gap: 10px 16px;
    padding: 12px 14px;
  }
  .tk-row > div { padding: 0; border-right: none; min-width: 0; }
  .tk-row > .tk-col-main { grid-column: 1 / -1; }
  .tk-row > div[data-label] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .tk-row > div[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .tk-badge--none { font-size: 14px; }
}
/* iPhone: fuenf Kennzahlen passen nicht nebeneinander, drei je Zeile. */
@container (max-width: 520px) {
  .tk-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; }
  .tk-badge { max-width: 100%; white-space: normal; }
}

/* Spalte: Empfänger + Betreff */
.tk-col-main { min-width: 0; }
.tk-email {
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--n),.93);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-subject {
  font-size: 13px;
  color: rgba(var(--n),.58);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Spalte: Datum */
.tk-date {
  font-size: 14px;
  color: rgba(var(--n),.66);
  white-space: nowrap;
}

/* Spalte: Stat-Badges */
.tk-col-stat { display: flex; align-items: flex-start; }

.tk-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.4;
  white-space: nowrap;
}
.tk-badge small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: .7;
  margin-top: 1px;
}
.tk-badge--open  { background: rgba(var(--success-rgb),.12);  color: var(--success); }
.tk-badge--click { background: rgba(var(--warning-rgb),.12); color: var(--warning); }
.tk-badge--none  { color: rgba(var(--n),.36); font-size: 16px; }

/* Spalte: Tracking-Icons */
.tk-col-track {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Spalte: Status-Chip */
.tk-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Tage im Versandprotokoll ─────────────────────────────────────────
   Bis 03.09.2026 war das Protokoll eine einzige Liste der 200 juengsten
   Zeilen – bei rund hundert Sendungen am Tag nach zwei Tagen leergeraeumt.
   Jetzt ein aufklappbarer Block je Sendetag mit den Zahlen des Tages im
   Kopf; die Zeilen kommen erst beim Aufklappen. */
.tk-days-hint {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}
.tk-days { display: flex; flex-direction: column; }
.tk-day { border-bottom: 1px solid var(--border); }
.tk-day:last-child { border-bottom: none; }
.tk-day > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  user-select: none;
}
.tk-day > summary::-webkit-details-marker { display: none; }
.tk-day > summary:hover { background: rgba(var(--n),.05); }
.tk-day > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tk-day-caret {
  flex: 0 0 auto;
  width: 0; height: 0;
  border: 5px solid transparent;
  border-left: 6px solid var(--text-muted);
  margin-right: -4px;
  transition: transform .15s;
}
.tk-day[open] > summary .tk-day-caret { transform: rotate(90deg); }
.tk-day-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.tk-day-date small {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 6px;
}
/* Festes Raster statt Flex-Wrap: jede Kennzahl steht bei jedem Tag in
   derselben Spalte, sonst verrutscht alles, sobald ein Wert fehlt oder ein
   Label laenger ist (07.09.2026: Bounces und Abmeldungen kamen dazu, die
   Tage waren nicht mehr vergleichbar). Acht feste Spalten, eine neunte
   fuer den seltenen Versandfehler, die ohne Inhalt keine Breite hat. */
.tk-day-stats {
  display: grid;
  grid-template-columns: repeat(8, 108px) minmax(0, max-content);
  gap: 4px 10px;
  margin-left: auto;
  font-size: 14px;
  color: var(--text-secondary);
  justify-items: end;
  align-items: baseline;
}
.tk-day-stat {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tk-day-stat b {
  font-weight: 600;
  color: var(--fg);
  display: inline-block;
  min-width: 2.4em;
  text-align: right;
  margin-right: 4px;
}
/* Schmale Fenster: zurueck zum Umbruch, ein Raster mit 900px passt nicht. */
@media (max-width: 1280px) {
  .tk-day-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
}
.tk-day-stat--sent b { color: var(--accent); }
.tk-day-stat--leer { opacity: .45; }
.tk-day-stat--fehler,
.tk-day-stat--fehler b { color: var(--danger); }
.tk-day-body { padding: 0 20px 16px; }
.tk-day-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 14px;
  color: var(--text-secondary);
}
/* Einordnung unter den Kacheln, Versandprotokoll und Klick-Nachfass
   (18.09.2026): vorher ein Absatz aus mehreren Saetzen, jetzt ein Kasten
   mit einem Feld je Aussage. Zahl oben, Bedeutung darunter, die Felder
   fliessen je nach Breite in eine bis vier Spalten. */
.report-section.tk-fakten { margin: -4px 24px 28px; }
/* Flex statt Raster: die letzte Zeile fuellt die Breite, statt neben einem
   einzelnen Feld leere Zellen stehen zu lassen. */
.tk-fakten-raster { display: flex; flex-wrap: wrap; }
.tk-fakt {
  flex: 1 1 220px;
  padding: 14px 20px 16px;
  border-right: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  margin-right: -1px;
  margin-bottom: -1px;
  min-width: 0;
}
.tk-fakt-titel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tk-fakt-wert {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.tk-fakt-text {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tk-fakt--fehler .tk-fakt-wert { color: var(--danger); }
.tk-fakten-fuss {
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 500;
  border-top: 1px solid var(--border);
}
.tk-fakten-fuss--gut     { color: var(--success); background: rgba(var(--success-rgb), .08); }
.tk-fakten-fuss--schwach { color: var(--warning); background: rgba(var(--warning-rgb), .10); }

/* Telefon und schmales iPad: 32 Pixel Rand je Seite plus 20 Pixel im
   Tagesblock liessen der Liste auf dem iPhone keine 250 Pixel. Die
   Tageszahlen stehen unter dem Datum statt daneben, sonst ragen sie rechts
   aus dem Kasten. */
@media (max-width: 768px) {
  .report-section, .report-section.tk-fakten { margin-left: 12px; margin-right: 12px; }
  .report-kpi-row { padding-left: 12px; padding-right: 12px; }
  .tk-day > summary { flex-wrap: wrap; row-gap: 6px; padding: 12px; }
  .tk-day-stats { flex-basis: 100%; margin-left: 0; justify-content: flex-start; padding-left: 16px; }
  .tk-day-body { padding: 0 12px 12px; }
}

/* ══════════════════════════════════════════════════════════
   INBOX SPLIT VIEW  (Apple Mail style)
══════════════════════════════════════════════════════════ */
.inbox-split-view {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
  gap: 0;
}

/* ── Sidebar ── */
.inbox-sidebar {
  width: 320px;
  min-width: 260px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(var(--n),.12);
  background: rgba(var(--n),.04);
  overflow: hidden;
  flex-shrink: 0;
}

.inbox-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 12px;
  border-bottom: 1px solid rgba(var(--n),.1);
}

.inbox-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.inbox-title svg { width: 18px; height: 18px; opacity: .7; }

.inbox-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: rgba(var(--n),.62);
  transition: color .2s, background .2s;
}
.inbox-refresh-btn:hover { color: var(--fg); background: rgba(var(--n),.13); }
.inbox-refresh-btn svg { width: 16px; height: 16px; display: block; }

/* Search */
.inbox-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px;
  padding: 8px 12px;
  background: rgba(var(--n),.1);
  border-radius: 10px;
  border: 1px solid rgba(var(--n),.13);
}
.inbox-search-wrap svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .4; }
.inbox-search-wrap input {
  background: none;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: 15px;
  width: 100%;
}
.inbox-search-wrap input::placeholder { color: rgba(var(--n),.52); }

/* Mail list */
.inbox-mail-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--n),.16) transparent;
}

.inbox-mail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--n),.07);
  transition: background .15s;
  position: relative;
}
.inbox-mail-item:hover { background: rgba(var(--n),.08); }
.inbox-mail-item.active { background: rgba(var(--accent-rgb),.08); border-left: 3px solid var(--accent); padding-left: 11px; }
.inbox-mail-item.unread .mail-item-from { font-weight: 700; color: var(--fg); }
.inbox-mail-item.unread .mail-item-subject { color: rgba(var(--n),.91); }

.mail-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}

.mail-item-body { flex: 1; min-width: 0; }
.mail-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.mail-item-from {
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--n),.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-item-date {
  font-size: 13px;
  color: rgba(var(--n),.52);
  white-space: nowrap;
  flex-shrink: 0;
}
.mail-item-subject {
  font-size: 14px;
  color: rgba(var(--n),.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Content Pane ── */
.inbox-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--sunken-1);
}

.inbox-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: rgba(var(--n),.36);
}
.inbox-empty-state svg { width: 48px; height: 48px; }
.inbox-empty-state p { font-size: 15px; margin: 0; }

/* Mail Reader */
.mail-reader {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mail-reader-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid rgba(var(--n),.12);
  background: rgba(var(--n),.04);
}

.mail-reader-subject {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 14px;
  line-height: 1.3;
}

.mail-reader-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mail-reader-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-accent);
  flex-shrink: 0;
}

.mail-reader-from-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.mail-reader-from {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.mail-reader-addr {
  font-size: 14px;
  color: rgba(var(--n),.62);
}
.mail-reader-date {
  font-size: 14px;
  color: rgba(var(--n),.58);
  white-space: nowrap;
}

.mail-reader-actions {
  display: flex;
  gap: 8px;
}

.mail-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(var(--n),.18);
  background: rgba(var(--n),.08);
  color: rgba(var(--n),.86);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
.mail-action-btn svg { width: 14px; height: 14px; }
.mail-action-btn:hover { background: rgba(var(--n),.16); color: var(--fg); }
.mail-action-btn.reply-btn:hover { background: rgba(var(--accent-rgb),.15); border-color: var(--accent); color: var(--accent-light); }
.mail-action-btn.delete-btn:hover { background: rgba(var(--danger-rgb),.1); border-color: rgba(var(--danger-rgb),.4); color: var(--danger); }

.mail-reader-body {
  flex: 1;
  padding: 20px 28px;
  overflow-y: auto;
}

.mail-text-body {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  color: rgba(var(--n),.86);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  background: rgba(var(--n),.05);
  padding: 16px;
  border-radius: 10px;
}

/* Loading / Error states */
.inbox-loading, .inbox-error, .inbox-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 10px;
  color: rgba(var(--n),.62);
  font-size: 15px;
  text-align: center;
}
.inbox-error svg { width: 32px; height: 32px; color: var(--accent-light); opacity: .7; }
.inbox-loading { flex-direction: row; gap: 10px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   SMTP SENDER POOL – Settings Tab
   ════════════════════════════════════════════════════════════════════════════ */

/* KPI Bar */
.smtp-pool-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
.smtp-kpi-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  border-right: 1px solid rgba(var(--n),.12);
  text-align: center;
}
.smtp-kpi-item:last-child { border-right: none; }
.smtp-kpi-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-primary, var(--fg));
  line-height: 1;
  margin-bottom: 4px;
}
.smtp-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--n),.62);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Sender Account List */
.smtp-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* Sender Card */
.smtp-pool-card {
  background: rgba(var(--n),.07);
  border: 1px solid rgba(var(--n),.13);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.smtp-pool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--purple-rgb),.3), rgba(var(--info-rgb),.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.smtp-pool-card:hover::before { opacity: 1; }
.smtp-pool-card:hover { background: rgba(var(--n),.1); }

.smtp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.smtp-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.smtp-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.smtp-card-label {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--n),.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smtp-card-email {
  font-size: 13px;
  color: rgba(var(--n),.62);
  margin-top: 2px;
  font-family: monospace;
}
.smtp-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Progress Bar */
.smtp-limit-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smtp-limit-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(var(--n),.13);
  border-radius: 10px;
  overflow: hidden;
}
.smtp-limit-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .6s cubic-bezier(.4,0,.2,1), background .4s;
  animation: smtp-bar-grow .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes smtp-bar-grow {
  from { width: 0 !important; }
}
.smtp-limit-label {
  font-size: 13px;
  color: rgba(var(--n),.58);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .smtp-pool-kpi-bar { grid-template-columns: repeat(2,1fr); }
  .smtp-card-header { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   E-MAIL WARMUP UI  (Sprint 6)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Warmup Sektion innerhalb der SMTP-Card */
.smtp-warmup-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--n),.1);
}
.smtp-warmup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.smtp-warmup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(var(--n),.88);
}
.smtp-warmup-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.warmup-hint {
  font-size: 13px;
  color: rgba(var(--n),.52);
  line-height: 1.5;
  font-style: italic;
}

/* Status Chips */
.warmup-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.warmup-chip-active {
  background: rgba(var(--warning-rgb),.15);
  color: var(--warning);
  border: 1px solid rgba(var(--warning-rgb),.3);
}
.warmup-chip-done {
  background: rgba(var(--success-rgb),.15);
  color: var(--success);
  border: 1px solid rgba(var(--success-rgb),.3);
}
.warmup-chip-off {
  background: rgba(var(--n),.1);
  color: rgba(var(--n),.58);
  border: 1px solid rgba(var(--n),.16);
}

/* Toggle Switch */
.warmup-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.warmup-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.warmup-toggle-slider {
  width: 36px;
  height: 20px;
  /* Als Flex-Element gaebe der Schieber neben einem langen Beschriftungstext
     nach und schrumpfte auf die Breite seines Knopfes zusammen - im
     SMTP-Dialog auf 15 statt 36 Pixel. */
  flex-shrink: 0;
  background: rgba(var(--n),.18);
  border-radius: 20px;
  transition: background .25s;
  position: relative;
}
.warmup-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: rgba(var(--n),.72);
  border-radius: 50%;
  transition: transform .25s, background .25s;
}
.warmup-toggle input:checked + .warmup-toggle-slider {
  background: rgba(var(--warning-rgb),.6);
}
.warmup-toggle input:checked + .warmup-toggle-slider::before {
  transform: translateX(16px);
  background: var(--on-accent);
}

/* Warmup Progress Bar */
.warmup-progress-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.warmup-progress-track {
  height: 8px;
  background: rgba(var(--n),.12);
  border-radius: 10px;
  overflow: hidden;
}
.warmup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--warning), var(--warning));
  border-radius: 10px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  animation: warmup-grow .8s cubic-bezier(.4,0,.2,1) forwards;
  position: relative;
  overflow: hidden;
}
.warmup-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--n),.44), transparent);
  animation: warmup-shimmer 2s ease-in-out infinite;
}
.warmup-progress-fill.done {
  background: linear-gradient(90deg, var(--success), var(--success));
}
.warmup-progress-fill.done::after { display: none; }
@keyframes warmup-grow {
  from { width: 0 !important; }
}
@keyframes warmup-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}
.warmup-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(var(--n),.52);
  font-variant-numeric: tabular-nums;
}

/* Seed Pool Sektion */
.warmup-seed-pool-section {
  margin-top: 20px;
  background: rgba(var(--n),.04);
  border: 1px solid rgba(var(--n),.12);
  border-radius: 12px;
  padding: 16px 20px;
}
.warmup-seed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.warmup-seed-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--n),.91);
  margin: 0 0 2px;
}
.warmup-seed-subtitle {
  font-size: 13px;
  color: rgba(var(--n),.52);
  margin: 0;
}
.warmup-seed-empty {
  font-size: 14px;
  color: rgba(var(--n),.44);
  text-align: center;
  padding: 12px 0;
  font-style: italic;
}
.warmup-seed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid rgba(var(--n),.08);
  background: rgba(var(--n),.05);
  margin-bottom: 6px;
  transition: background .15s;
}
.warmup-seed-item:hover { background: rgba(var(--n),.1); }
.seed-provider  { font-size: 14px; color: var(--text-muted); flex-shrink: 0; }
.seed-email     { flex: 1; color: rgba(var(--n),.86); font-family: monospace; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seed-name      { font-size: 13px; color: rgba(var(--n),.52); flex-shrink: 0; }
.seed-active-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 600px) {
  .smtp-warmup-header { flex-direction: column; align-items: flex-start; }
  .warmup-seed-item { flex-wrap: wrap; }
}

/* ── Mail: Ordnerzeile ─────────────────────────────────────────────────────── */
.eh-ordner {
  display: flex; align-items: center; gap: 2px;
  padding: 0 12px 8px; border-bottom: 1px solid var(--border);
}
.eh-ordner-tab {
  font: 500 12px/1 var(--font-body);
  padding: 7px 10px; background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  transition: color .12s var(--ease), background .12s var(--ease);
}
.eh-ordner-tab:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.eh-ordner-tab.active { color: var(--accent); background: var(--accent-dim); }
.eh-ordner-konto {
  margin-left: auto; font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}

/* Zustandspunkt im Health-Widget – die Farbe trägt die Aussage,
   der title macht sie für Screenreader und Mauszeiger lesbar. */
.dash-health-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 2px;
}
.dash-health-dot.ok   { background: var(--success, var(--success)); }
.dash-health-dot.warn { background: var(--warning, var(--warning)); }

/* ─── BUCHUNGEN ───────────────────────────────────────────────────────────── */
/* Termine aus booking.html. Aufbau wie die Reiter im Crawler: der Zähler steht
   im Reiter selbst, damit keine Kennzahlenleiste nötig ist, die bei drei
   Terminen nur Fläche kostet. */

.bk-reiter {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.bk-reiter-knopf {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.bk-reiter-knopf:hover { color: var(--text-primary); }
.bk-reiter-knopf.aktiv {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.bk-zaehler {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: rgba(var(--n),.13);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bk-reiter-knopf.aktiv .bk-zaehler { background: rgba(var(--accent-rgb),.18); color: var(--accent); }

.bk-liste { display: flex; flex-direction: column; gap: 1px; }

.bk-zeile {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.bk-zeile:hover { border-color: rgba(var(--n),.22); }
.bk-storniert { opacity: .5; }
.bk-storniert .bk-name { text-decoration: line-through; }

/* Datum als Block, damit das Auge beim Überfliegen an der Zeit hängenbleibt */
.bk-wann { text-align: center; line-height: 1.25; }
.bk-tag  { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bk-zeit { font-family: var(--font-serif); font-size: 24px; color: var(--text-primary); }
.bk-jahr { font-size: 13px; color: var(--text-muted); }

.bk-mitte { min-width: 0; }
.bk-name { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.bk-art  { font-size: 14px; color: var(--accent); margin-bottom: 6px; }
.bk-kontaktdaten { font-size: 14px; color: var(--text-muted); }
.bk-kontaktdaten a { color: var(--text-secondary); text-decoration: none; }
.bk-kontaktdaten a:hover { color: var(--accent); text-decoration: underline; }
.bk-notiz {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.bk-aktionen { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.bk-stornieren:hover { color: var(--danger); }
.bk-kein-kontakt { font-size: 13px; color: var(--text-muted); font-style: italic; }

@media (max-width: 720px) {
  .bk-zeile { grid-template-columns: 1fr; gap: 10px; }
  .bk-wann { display: flex; gap: 8px; align-items: baseline; text-align: left; }
  .bk-zeit { font-size: 20px; }
  .bk-aktionen { flex-wrap: wrap; }
}

/* Angefragt, aber noch nicht bestätigt: der 15-Minuten-Termin auf cal.eu
   verlangt eine Zusage. Bis dahin wartet jemand. */
.bk-wartet {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 9px;
  background: rgba(var(--warning-rgb),.14);
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
  vertical-align: middle;
}
.bk-wartend { border-color: rgba(var(--warning-rgb),.35); }

/* Lead-Bewertung: die Adresse unter dem Namen. Der Crawler traegt bei
   Rollenpostfaechern den Firmennamen als Personennamen ein – ohne die Adresse
   stehen 28 Zeilen "Ogilvy Germany" untereinander (23.08.2026). */
.score-mail {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 2px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* Rollenpostfach in der Lead-Bewertung. Gedaempft, nicht alarmierend – es ist
   eine Einordnung, keine Warnung: der sichere Kanal, nur eben kein Mensch. */
.score-rolle {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: middle;
}

/* ── Laufanzeige des Entscheider-Stapels ─────────────────────────────────────
   Dauerhaft statt fluechtig: der Lauf dauert bis zu 30 Minuten, und eine
   Toast-Meldung ist nach drei Sekunden weg. Rahim klickte am 23.08.2026 und
   konnte danach nicht erkennen, ob ueberhaupt etwas passiert. */
.cr-lauf {
  margin: 10px 0 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cr-lauf-kopf {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.95rem; margin-bottom: 9px;
}
.cr-lauf-zahlen { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-lauf-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--text-muted);
}
.cr-lauf-punkt.aktiv {
  background: var(--accent);
  animation: cr-puls 1.4s ease-in-out infinite;
}
.cr-lauf-punkt.pause { background: var(--warning, var(--warning)); }
@keyframes cr-puls { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.cr-lauf-balken {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}
.cr-lauf-balken > div {
  height: 100%; background: var(--accent);
  transition: width .4s ease;
}
.cr-lauf-fuss {
  margin-top: 7px; font-size: 0.85rem; color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .cr-lauf-punkt.aktiv { animation: none }
  .cr-lauf-balken > div { transition: none }
}

/* ── Entscheider-Uebersicht ──────────────────────────────────────────────────
   Gefundene Personen ueber alle Domains. Bis zum 23.08.2026 gab es sie nur je
   Domain hinter einem Knopf – 413 Personen ohne Ort, an dem man sie sieht. */
.cr-dec-liste { display: flex; flex-direction: column; }
.cr-dec-zeile {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(200px, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.cr-dec-zeile:hover { background: color-mix(in srgb, var(--border) 22%, transparent); }
.cr-dec-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cr-dec-score {
  font-size: 0.8rem; padding: 1px 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cr-dec-pos   { font-size: 0.95rem; color: var(--text-secondary, var(--text-muted)); margin-top: 2px; }
.cr-dec-firma { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
.cr-dec-mail  { font-size: .78rem; min-width: 0; }
.cr-dec-mail a { color: var(--accent); text-decoration: none; word-break: break-all; }
.cr-dec-mail a:hover { text-decoration: underline; }
.cr-dec-muster {
  display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cr-dec-keine { color: var(--text-muted); font-style: italic; }
.cr-dec-aktionen { display: flex; gap: 6px; }
@media (max-width: 820px) {
  .cr-dec-zeile { grid-template-columns: 1fr; gap: 6px; }
}

/* Herkunft einer Entscheider-Adresse. Dieselben drei Woerter wie in der
   Lead-Liste des Crawlers – belegt, abgeleitet, geraten –, damit eine Adresse
   ueberall dasselbe bedeutet (23.08.2026). */
.cr-dec-herkunft { display: flex; align-items: center; gap: 7px; margin-top: 3px; flex-wrap: wrap; }
.cr-beleg {
  font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 8px; border: 1px solid transparent; white-space: nowrap;
}
.cr-beleg--belegt     { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.cr-beleg--abgeleitet { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.cr-beleg--geraten    { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cr-dec-quelle {
  margin-left: 8px; font-size: 0.8rem; color: var(--text-muted); opacity: .75;
}
#cr-dec-zahl .cr-beleg { margin-left: 2px; }

/* Kacheln im Sonden-Reiter sind seit 04.09.2026 Filter, keine reine Anzeige
   mehr: Klick zeigt nur Sonden mit diesem Urteil, ein zweiter Klick auf
   dieselbe Kachel hebt den Filter wieder auf (siehe filterSonden()). */
.cr-beleg--filter {
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  transition: background-color .12s, border-color .12s;
}
.cr-beleg--filter:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.cr-beleg--filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cr-beleg--filter.cr-beleg--aktiv {
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-color: currentColor;
  font-weight: 600;
}

/* Auswahl und Uebernahme in der Entscheider-Liste. Bis zum 23.08.2026 war sie
   eine Vitrine: 266 brauchbare Adressen und keine Handlung ausser "Quelle"
   und "Verwerfen". */
.cr-dec-zeile { grid-template-columns: auto minmax(200px, 1.4fr) minmax(190px, 1fr) auto; }
.cr-dec-wahl { display: flex; align-items: center; }
.cr-dec-wahl input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.cr-dec-wahl input:disabled { cursor: not-allowed; opacity: .3; }
.cr-dec-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; font-size: 0.85rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cr-dec-auswahl {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 2px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 9px; font-size: 0.95rem;
}
.cr-dec-istkontakt {
  margin-left: 8px; font-size: 0.8rem; cursor: pointer;
  color: var(--success); border-bottom: 1px dotted currentColor;
}
@media (max-width: 820px) { .cr-dec-zeile { grid-template-columns: auto 1fr; } }

/* ── KI-Domain-Discovery ─────────────────────────────────────────────────────
   Das Modal lief bis zum 23.08.2026 mit einer eigenen Palette: Indigo-Verlauf
   auf #1a1a2e, Slate-Toene aus einem fremden Framework, jede Farbe als Hex im
   JavaScript. Direkt daneben tragen die Knoepfe der Crawler-Seite
   var(--accent) – Signalrot auf Schwarz. Das Modal stand als lilafarbenes
   Fremdstueck darin.

   Dasselbe Aufraeumen wie im Sequences-Modul am 21.08.2026: Farben kommen aus
   den Tokens, nicht aus dem Markup. Struktur und Klassen sind die der
   uebrigen Crawler-Modals (cr-modal-*), damit sich das Fenster wie ein
   Geschwister anfuehlt und nicht wie ein Gast. */

.cr-aid-modal {
  width: 620px;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.cr-aid-modal .cr-modal-body { overflow-y: auto; }
/* Die Breite steht hier und nicht ueber .cr-field-sm: dessen flex-basis von
   100px wirkt in der Spalte des Modal-Koerpers als Hoehe und riss eine
   Luecke unter das Feld. */
.cr-aid-modal .cr-field input[type="number"] { max-width: 110px; }

.cr-aid-intro { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* Zeigt, welches Modell antworten soll und ob es dabei echte Suchtreffer
   bekommt. Zwei Aussagen, die unabhaengig voneinander ausfallen koennen. */
.cr-aid-provider {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 11px; font-size: 14px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
}
.cr-aid-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.cr-aid-punkt--gemini { background: var(--warning); }
.cr-aid-provider strong { color: var(--text-primary); font-weight: 600; }
.cr-aid-warn { color: var(--warning); }

.cr-aid-info {
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  border-top: 1px solid var(--line-d); padding-top: 10px;
}
.cr-aid-info strong { color: var(--text-secondary); font-weight: 600; }

.cr-aid-liste {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}

.cr-aid-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .12s var(--ease);
}
.cr-aid-zeile:hover { background: color-mix(in srgb, var(--border) 40%, transparent); }
/* Nicht bestaetigte Zeilen bleiben lesbar, treten aber zurueck: sie sind
   nicht vorausgewaehlt und sollen es auch nicht scheinen. */
.cr-aid-zeile:not(.is-ok) { opacity: .62; }
.cr-aid-zeile input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.cr-aid-text { flex: 1; min-width: 0; }
.cr-aid-firma { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.cr-aid-meta  { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.cr-aid-notiz { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }

/* Der Seitentitel ist die eigentliche Kontrolle: passt er nicht zum
   Firmennamen, faellt das hier auf, bevor die Domain in die Queue geht. */
.cr-aid-titel {
  font-size: 13px; margin-top: 2px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-aid-zeile:not(.is-ok) .cr-aid-titel { color: var(--warning); }

/* Folgt .cr-beleg – dieselbe Form fuer dieselbe Art von Aussage. */
.cr-aid-status {
  font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 8px; border: 1px solid transparent;
  white-space: nowrap; flex-shrink: 0; align-self: flex-start;
}
.cr-aid-status--bestaetigt   { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.cr-aid-status--erreichbar   { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.cr-aid-status--unerreichbar { color: var(--text-muted); border-color: var(--border); }
.cr-aid-status--geparkt,
.cr-aid-status--unbekannt    { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.cr-aid-summe { text-align: center; padding: 9px 0 3px; font-size: 13px; color: var(--text-muted); }
.cr-aid-leer  { text-align: center; padding: 22px 14px; font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
.cr-aid-fehler {
  padding: 14px; font-size: 14px; line-height: 1.55; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius); word-break: break-word;
}

/* Die Vertikale ist bei Dienstleistern selten das prägende Merkmal – eine
   15-Mann-Produktion dreht für alles, was zahlt. Sichtbar bliebe sie ein
   Feld, das fast immer auf "Egal" steht, also Ballast im Blickfeld. */
.cr-aid-mehr { border-top: 1px solid var(--line-d); padding-top: 10px; }
.cr-aid-mehr > summary {
  cursor: pointer; font-size: 14px; color: var(--text-secondary);
  list-style: none; padding: 2px 0;
}
.cr-aid-mehr > summary::-webkit-details-marker { display: none; }
.cr-aid-mehr > summary::before { content: "▸ "; color: var(--text-muted); }
.cr-aid-mehr[open] > summary::before { content: "▾ "; }
.cr-aid-mehr > summary:hover { color: var(--text-primary); }
.cr-aid-mehr .cr-field { margin-top: 10px; }


/* ── VERBINDUNGSPUNKTE ──────────────────────────────────────────────────────
   Nachpruefbare Aufhaenger am Kontakt. Ruhige Liste; nur der gesperrte und
   der abgelaufene Zustand heben sich ab, weil sie eine Handlung verlangen. */
.vb-header-hint {
  display: inline-block; width: 15px; height: 15px; line-height: 15px;
  text-align: center; border-radius: 50%; font-size: 12px; font-weight: 700;
  color: var(--text-muted); border: 1px solid var(--border);
  cursor: help; margin-left: 6px;
}

.vb-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.vb-row--tot { opacity: 0.5; }
.vb-text { flex: 1; font-size: 15px; }
.vb-meta { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.vb-meta a { color: var(--accent); }

.vb-gesperrt, .vb-tot {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  font-size: 12px; font-weight: 700; border-radius: 4px; cursor: help;
}
.vb-gesperrt { color: var(--on-accent); background: var(--accent); }
.vb-tot      { color: var(--text-muted); border: 1px solid var(--border); }

.vb-del {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.vb-del:hover { color: var(--danger); }

.vb-leer { font-size: 14px; color: var(--text-muted); padding: 8px 0; }
.vb-leer code { font-size: 13px; }

.vb-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 12px;
}
.vb-form select, .vb-form input[type="text"], .vb-form input[type="url"] {
  background: var(--bg-input, rgba(var(--n),.08));
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 14px; padding: 6px 8px;
}
.vb-form input[type="text"] { flex: 1; min-width: 180px; }
.vb-form input[type="url"]  { flex: 1; min-width: 160px; }
.vb-erlaubnis {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-muted); cursor: help;
}

/* Anklickbare Platzhalter in den Sequenz-Dialogen. Sie standen zuvor als
   Hinweistext da und mussten abgetippt werden – ein Tippfehler faellt erst
   auf, wenn die Mail mit "Hallo {{firstname}}," beim Empfaenger liegt
   (25.08.2026). */
.seq-placeholder-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 8px; font-size: 0.85rem; color: var(--text-muted);
}
.seq-ph-label { margin-right: 2px; }
.seq-ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem; line-height: 1.5;
  padding: 2px 8px; border-radius: 6px; cursor: pointer;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  transition: background .12s ease, transform .06s ease;
}
.seq-ph:hover  { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.seq-ph:active { transform: translateY(1px); }
.seq-ph:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .seq-ph { transition: none } }

/* ─── Klick-Nachfass: Auswertung ────────────────────────────────────────
   Eigene Seite unter E-Mail (11.09.2026). Gleiche Bauform wie das
   Versandprotokoll: flache Kacheln, Abschnitte in .report-section, Tabellen
   als Grid. Alles ueber Tokens, damit Light Mode und Dark Mode beide tragen;
   Farbe nur an den Chips, die eine Aussage tragen (Anlass, Zustand). */
.kn-section .report-section-title { flex-wrap: wrap; }
.kn-hint {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-secondary);
}
.kn-section--heiss { border-color: var(--accent-border); }
.kn-section--heiss .report-section-title { color: var(--accent-light); }
.kn-fehler {
  margin: 0 32px 16px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--danger-rgb), .4);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 13px;
}
.kn-scroll { overflow-x: auto; }
.kn-table { min-width: 720px; }
.kn-row {
  display: grid;
  align-items: start;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line-d);
  font-size: 14px;
  color: var(--text-primary);
}
.kn-row:last-child { border-bottom: none; }
.kn-row.kn-head {
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(var(--n), .03);
}
.kn-row--linked { cursor: pointer; }
.kn-row--linked:hover { background: rgba(var(--n), .05); }
.kn-row--linked:hover .kn-wer { color: var(--accent-light); }
.kn-row--linked:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kn-open-hint { color: var(--text-dim); }
.kn-row--linked:hover .kn-open-hint { color: var(--accent-light); }

/* Spaltenraster je Tabelle. Die erste Spalte traegt Name und Adresse. */
.kn-table--aufgaben     .kn-row { grid-template-columns: minmax(200px, 1.2fr) 170px minmax(200px, 2fr) 120px; }
.kn-table--vergleich    .kn-row { grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(96px, 1fr)); }
/* "Seiten danach" (seit 11.09.2026): was nach dem Klick auf campera.media offen war. */
.kn-table--offen        .kn-row { grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) 110px minmax(170px, 1.3fr) 64px 110px 150px minmax(160px, 1.4fr); }
.kn-table--mails        .kn-row { grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) 100px minmax(170px, 1.3fr) 64px 110px minmax(160px, 1.4fr) 150px; }
.kn-c-seiten { min-width: 0; }
.kn-seite {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kn-seite b { font-weight: 500; }
.kn-seite .kn-dauer { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kn-table--aufwertungen .kn-row { grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) 100px 170px 110px minmax(160px, 1.4fr); }

.kn-c-main { min-width: 0; }
.kn-wer {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kn-sub {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kn-c-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-c-zeit, .kn-c-kurz { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kn-c-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kn-c-num b { font-family: var(--font-serif); font-size: 19px; font-weight: 400; }
.kn-quote { color: var(--text-secondary); margin-left: 2px; }
.kn-spanne { font-size: 12px; color: var(--text-dim); }
.kn-dim { color: var(--text-dim); }
.kn-einzug { padding-left: 18px; }
.kn-row--leer { color: var(--text-dim); }
.kn-row--leer .kn-chip { opacity: .55; }
.kn-row--summe { background: rgba(var(--n), .03); border-top: 1px solid var(--border); }
.kn-row--schritt { padding-top: 6px; padding-bottom: 6px; }
.kn-row--schritt .kn-c-num b { font-size: 15px; }
/* Die Erklaerung unter dem Anlass-Chip war ein Inline-Span mit nowrap: sie
   lief ueber die Zahlenspalten hinweg, statt umzubrechen (iPad, 18.09.2026). */
.kn-row--vergleich .kn-c-main .kn-sub {
  display: block;
  margin-top: 3px;
  white-space: normal;
  line-height: 1.4;
}
/* Schmaler Kasten: die Gruppe steht ueber der Zeile, die fuenf Zahlen
   darunter. So passt die Tabelle aufs iPad hochkant ohne seitliches Scrollen;
   auf dem iPhone bleibt ein kurzer Scrollweg statt 720 Pixel. */
.kn-scroll { container-type: inline-size; }
@container (max-width: 760px) {
  .kn-table--vergleich { min-width: 500px; }
  .kn-table--vergleich .kn-row { grid-template-columns: repeat(5, minmax(84px, 1fr)); row-gap: 6px; }
  /* Beim seitlichen Scrollen (iPhone) bleibt die Beschriftung stehen und
     bricht in der sichtbaren Breite um. */
  .kn-table--vergleich .kn-c-main {
    grid-column: 1 / -1;
    position: sticky;
    left: 20px;
    max-width: calc(100cqw - 40px);
  }
  .kn-table--vergleich .kn-head .kn-c-main { display: none; }
}

.kn-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  color: var(--text-secondary);
  background: rgba(var(--n), .08);
}
.kn-chip--termin     { color: var(--accent-light); background: var(--accent-dim); border-color: var(--accent-border); }
.kn-chip--portfolio  { color: var(--info);    background: rgba(var(--info-rgb), .14); }
.kn-chip--signatur   { color: var(--text-secondary); background: rgba(var(--n), .10); }
.kn-chip--unbekannt  { color: var(--text-muted); background: rgba(var(--n), .06); border-color: var(--line); }
.kn-chip--aufwertung          { color: var(--warning); background: rgba(var(--warning-rgb), .14); }
.kn-chip--zweiter_terminklick { color: var(--accent-light); background: var(--accent-dim); border-color: var(--accent-border); }
.kn-chip--nach_sequenzende    { color: var(--orange);  background: rgba(var(--orange-rgb), .14); }

.kn-status {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
  background: rgba(var(--n), .07);
}
.kn-status--antwort { color: var(--purple);  background: rgba(var(--purple-rgb), .14); }
.kn-status--klick   { color: var(--success); background: rgba(var(--success-rgb), .14); }
.kn-status--offen   { color: var(--info);    background: rgba(var(--info-rgb), .14); }
.kn-status--fehler  { color: var(--danger);  background: rgba(var(--danger-rgb), .12); }

.kn-urteil {
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
.kn-urteil b { color: var(--text-primary); }
.kn-leer {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .kn-fehler { margin-left: 12px; margin-right: 12px; }
}

/* Klick-Nachfass: Entwurf unter dem offenen Vermerk */
.kn-entwurf {
  padding: 10px 20px 14px 20px;
  border-bottom: 1px solid var(--line-d);
  background: rgba(var(--n), .02);
}
.kn-entwurf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.kn-entwurf-fehler { color: var(--warning); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.kn-entwurf-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 4px; }
.kn-entwurf-text {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  resize: vertical;
}
.kn-entwurf-text:focus { outline: none; border-color: var(--border-active); }
.kn-entwurf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.kn-entwurf-status { font-size: 13px; color: var(--text-muted); }
.kn-fakten { margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.kn-fakten summary { cursor: pointer; color: var(--text-muted); }
.kn-fakten dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 0; }
.kn-fakten dt { color: var(--text-muted); }
.kn-fakten dd { margin: 0; }
.kn-chip--quelle-llm      { color: var(--teal);   background: rgba(var(--teal-rgb), .14); }
.kn-chip--quelle-baustein { color: var(--text-muted); background: rgba(var(--n), .06); border-color: var(--line); }
.kn-chip--quelle-hand     { color: var(--purple); background: rgba(var(--purple-rgb), .14); }
/* Nachfass hing an einem Link-Scanner (seit 18.09.2026): gedaempft, zaehlt nicht im Vergleich. */
.kn-chip--scanner         { color: var(--danger); background: rgba(var(--danger-rgb), .12); }

/* Klick-Nachfass: Branche und Sendezeitpunkt im Entwurfsblock */
.kn-entwurf-steuer { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 4px 0 6px; }
.kn-entwurf-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.kn-entwurf-select, .kn-entwurf-input {
  font: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.kn-entwurf-select:focus, .kn-entwurf-input:focus { outline: none; border-color: var(--border-active); }
.kn-entwurf-input { color-scheme: dark; }
html[data-theme="light"] .kn-entwurf-input { color-scheme: light; }