/* ============================================================================
   agenturkunden.io — Design System (dark, B2B, Linear/Vercel anmutung, anti-slop)
   Foundation only: tokens, base, atmosphere, primitives, layout shell.
   Components in components.css. Markenname zentral: --brand-name (CSS) bzw.
   BRAND_NAME/brandParts() in util.js (JS) — kuenftiger Rebrand = dort EINE Stelle.
   Contrast: every muted/body pair verified >= 4.5:1 on its background (WCAG AA).
   ========================================================================== */

@import url("../../assets/fonts/fonts.css");

/* ---------------------------------------------------------------- TOKENS -- */
:root {
  /* Type families */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* --- Palette: dominant deep slate-ink base + sharp signal accent ---------
     Background ladder goes very dark -> panel -> raised; one chartreuse signal
     accent (precision-instrument feel), plus a cool cyan secondary for data. */
  --ink-000: #07090e;   /* page void (under gradients) */
  --ink-050: #0a0d14;   /* app background base */
  --ink-100: #0e121b;   /* panel / sidebar */
  --ink-150: #131825;   /* card surface */
  --ink-200: #1a2030;   /* raised surface / inputs */
  --ink-250: #222a3d;   /* hover surface */
  --ink-300: #2c3650;   /* strong border / divider-bright */

  --line: #1d2433;          /* hairline border on dark */
  --line-soft: #161c29;     /* faint divider */
  --line-bright: #313c58;   /* focused / active border */

  /* Text — contrast-checked against --ink-150 (#131825) unless noted */
  --text: #eef1f7;          /* primary  ~16:1 */
  --text-strong: #ffffff;   /* headings */
  --text-muted: #aab3c6;    /* secondary ~7.6:1 (AA for normal text) */
  --text-faint: #8b94a8;    /* tertiary/labels ~5.1:1 (AA normal) */
  --text-ondark-min: #7c879c; /* placeholders only (decorative, not body copy) */

  /* Accent — chartreuse signal (used sparingly: focus, primary CTA, active) */
  --accent: #c6f24e;
  --accent-bright: #d6ff63;
  --accent-dim: #9bc23a;
  --accent-ink: #11160a;        /* text ON accent — 14:1 on #c6f24e */
  --accent-glow: rgba(198, 242, 78, 0.16);
  --accent-line: rgba(198, 242, 78, 0.42);

  /* Secondary data accent — cool cyan (charts, scores, links) */
  --cyan: #5fd0e6;
  --cyan-dim: #3a9fb5;
  --cyan-glow: rgba(95, 208, 230, 0.14);

  /* Semantic */
  --ok: #57d99a;        /* success ~ on dark */
  --ok-bg: rgba(87, 217, 154, 0.12);
  --warn: #f2c14e;
  --warn-bg: rgba(242, 193, 78, 0.12);
  --danger: #ff6b6b;
  --danger-bg: rgba(255, 107, 107, 0.12);
  --info: #7aa2ff;
  --info-bg: rgba(122, 162, 255, 0.12);

  /* Pipeline stage hues (5 stages, distinct but harmonious) */
  --stage-1: #7aa2ff;   /* Suche */
  --stage-2: #5fd0e6;   /* Schnell-Scan */
  --stage-3: #67e0c2;   /* Detail */
  --stage-4: #c6f24e;   /* Tiefen-Analyse */
  --stage-5: #f0a868;   /* CRM */

  /* Radii / spacing / motion */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --pad: 16px;
  --gap: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 0.16s;
  --dur-2: 0.32s;
  --dur-3: 0.6s;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 0 1px var(--accent-line), 0 10px 40px -10px var(--accent-glow);

  /* Type scale (Spec §2) — mixed-case außer Eyebrow */
  --fs-display: 28px; --fs-h2: 22px; --fs-h3: 16px;
  --fs-body: 15px; --fs-label: 13px; --fs-caption: 12px; --fs-eyebrow: 11px;

  --brand-name: "agenturkunden.io";
}

/* ============================================================================
   THEMES — alle Farb-Tokens leben hier (Spec §1, WCAG-AA+ verifiziert). Die
   --ink, --text, --line, --accent, --cyan, semantik, --stage, --shadow sind
   Kompat-Aliasse auf die semantischen Rollen → components.css läuft unverändert.
   <html> trägt IMMER data-theme (FOUC-Guard + Default); die obigen :root-Farben
   sind nur Fallback ohne data-theme. Default = Tageslicht (hell).
   ========================================================================== */

/* ---- TAGESLICHT (hell, Default) ------------------------------------------- */
[data-theme="tageslicht"] {
  color-scheme: light;
  --bg: #F6F4EC; --surface: #FFFFFF; --surface-2: #EFEDE3; --line: #E2DFD4;
  --text: #1A1A17; --text-strong: #0E0E0C; --text-muted: #5B5950; --text-faint: #6B6960;
  --accent: #C6F24E; --accent-ink: #14180A;
  --primary-bg: #1A6B45; --primary-text: #FFFFFF; --link: #176039;

  /* Kompat-Aliasse (Hell) */
  --ink-000: #ECE9DD; --ink-050: var(--bg); --ink-100: var(--surface); --ink-150: var(--surface);
  --ink-200: var(--surface-2); --ink-250: #E6E3D7; --ink-300: var(--line);
  --line-soft: #ECEAE0; --line-bright: #CFCBBE; --text-ondark-min: #8A887E;
  --accent-bright: #B6E23A; --accent-dim: #9BC23A;
  --accent-glow: rgba(26,107,69,0.12); --accent-line: rgba(26,107,69,0.28);
  --cyan: #1F86A8; --cyan-dim: #2A7D92; --cyan-glow: rgba(31,134,168,0.12);
  --ok: #1F9D57; --ok-bg: rgba(31,157,87,0.12); --warn: #B9770E; --warn-bg: rgba(185,119,14,0.12);
  --danger: #C63434; --danger-bg: rgba(198,52,52,0.10); --info: #2F6BD6; --info-bg: rgba(47,107,214,0.10);
  --stage-1: #3F6FD6; --stage-2: #1F86A8; --stage-3: #1F9D77; --stage-4: #5A8F1F; --stage-5: #C06A1F;
  --shadow-sm: 0 1px 2px rgba(20,20,15,0.08);
  --shadow-md: 0 8px 24px -8px rgba(20,20,15,0.14), 0 2px 6px rgba(20,20,15,0.08);
  --shadow-lg: 0 24px 60px -16px rgba(20,20,15,0.18), 0 4px 12px rgba(20,20,15,0.10);
  --shadow-accent: 0 0 0 1px var(--accent-line), 0 10px 40px -10px var(--accent-glow);
  /* Atmosphaere (dezent dunkle Linien auf Creme) */
  --atmo-1: rgba(26,107,69,0.05); --atmo-2: rgba(31,134,168,0.04); --atmo-3: rgba(198,242,78,0.05);
  --atmo-grid: rgba(20,20,15,0.05); --atmo-grid-opacity: 0.6;
}

/* ---- MONDWALD (dunkel) ---------------------------------------------------- */
[data-theme="mondwald"] {
  color-scheme: dark;
  --bg: #0A0E0C; --surface: #121814; --surface-2: #18211B; --line: #232C26;
  --text: #EEF2EC; --text-strong: #FFFFFF; --text-muted: #AEB8AE; --text-faint: #8A948B;
  --accent: #C6F24E; --accent-ink: #11160A;
  --primary-bg: #C6F24E; --primary-text: #11160A; --link: #D6FF63;

  --ink-000: #060907; --ink-050: var(--bg); --ink-100: var(--surface); --ink-150: var(--surface);
  --ink-200: var(--surface-2); --ink-250: #1F2A22; --ink-300: #2C3830;
  --line-soft: #1A221D; --line-bright: var(--accent-line); --text-ondark-min: #6F7A70;
  --accent-bright: #D6FF63; --accent-dim: #9BC23A;
  --accent-glow: rgba(198,242,78,0.16); --accent-line: rgba(198,242,78,0.42);
  --cyan: #5FD0E6; --cyan-dim: #3A9FB5; --cyan-glow: rgba(95,208,230,0.14);
  --ok: #57D99A; --ok-bg: rgba(87,217,154,0.14); --warn: #F2C14E; --warn-bg: rgba(242,193,78,0.14);
  --danger: #FF6B6B; --danger-bg: rgba(255,107,107,0.14); --info: #7AA2FF; --info-bg: rgba(122,162,255,0.14);
  --stage-1: #7AA2FF; --stage-2: #5FD0E6; --stage-3: #67E0C2; --stage-4: #C6F24E; --stage-5: #F0A868;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 0 1px var(--accent-line), 0 10px 40px -10px var(--accent-glow);
  --atmo-1: rgba(198,242,78,0.07); --atmo-2: rgba(95,208,230,0.06); --atmo-3: rgba(122,162,255,0.05);
  --atmo-grid: var(--line-soft); --atmo-grid-opacity: 0.5;
}

/* ---- DÄMMERUNG (warm/abend) ----------------------------------------------- */
[data-theme="daemmerung"] {
  color-scheme: dark;
  --bg: #1A1410; --surface: #241C16; --surface-2: #2E241C; --line: #3A2E24;
  --text: #F2E7D8; --text-strong: #FFF7EC; --text-muted: #C7B49C; --text-faint: #9A8975;
  --accent: #C6F24E; --accent-ink: #14180A;
  --primary-bg: #C6F24E; --primary-text: #14180A; --link: #D6FF63;

  --ink-000: #120D0A; --ink-050: var(--bg); --ink-100: var(--surface); --ink-150: var(--surface);
  --ink-200: var(--surface-2); --ink-250: #382B21; --ink-300: #463528;
  --line-soft: #2A2019; --line-bright: var(--accent-line); --text-ondark-min: #7D6F5E;
  --accent-bright: #D6FF63; --accent-dim: #9BC23A;
  --accent-glow: rgba(198,242,78,0.16); --accent-line: rgba(198,242,78,0.40);
  --cyan: #6FC7D8; --cyan-dim: #3A9FB5; --cyan-glow: rgba(111,199,216,0.14);
  --ok: #5FCF95; --ok-bg: rgba(95,207,149,0.14); --warn: #F0B95A; --warn-bg: rgba(240,185,90,0.14);
  --danger: #FF7A6B; --danger-bg: rgba(255,122,107,0.14); --info: #8FB0FF; --info-bg: rgba(143,176,255,0.12);
  --stage-1: #8FB0FF; --stage-2: #6FC7D8; --stage-3: #67E0C2; --stage-4: #C6F24E; --stage-5: #F0A868;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.72), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 0 1px var(--accent-line), 0 10px 40px -10px var(--accent-glow);
  --atmo-1: rgba(240,168,104,0.07); --atmo-2: rgba(198,242,78,0.05); --atmo-3: rgba(143,176,255,0.04);
  --atmo-grid: var(--line-soft); --atmo-grid-opacity: 0.42;
}

/* ------------------------------------------------------------------ RESET - */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;            /* Hanken hat kein 450 → 500 für Lesbarkeit (Spec §2) */
  line-height: 1.55;
  color: var(--text);
  background: var(--ink-050);  /* aliased → var(--bg) je Theme */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: 0;           /* globales letter-spacing weg (Spec §2) */
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; color: var(--text-strong); letter-spacing: -0.015em; }
h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; padding: 0; }
code, kbd, .mono { font-family: var(--font-mono); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-glow); color: var(--text-strong); }

/* Scrollbar (dark, subtle) */
* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-250); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* -------------------------------------------------------------- ATMOSPHERE - */
/* Depth via layered gradients + faint grid, not flat solids (anti-slop). */
.bg-atmosphere {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 78% -8%, var(--atmo-1), transparent 60%),
    radial-gradient(1000px 800px at 8% 12%, var(--atmo-2), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, var(--atmo-3), transparent 60%),
    linear-gradient(180deg, var(--ink-000), var(--ink-050) 40%);
}
.bg-atmosphere::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--atmo-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--atmo-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
  opacity: var(--atmo-grid-opacity);
}

/* ----------------------------------------------------------- UTILITIES ---- */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: var(--gap); }
.row-wrap { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { align-items: center; justify-content: center; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.tiny { font-size: 12.5px; }
.small { font-size: 13.5px; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}

/* Theme-Switcher (3-Swatch, neben dem Sprachschalter) — Spec §2 / Phase 2 */
.themeswitch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ink-100); }
.themeswitch button {
  display: inline-grid; place-items: center; width: 28px; height: 26px; border-radius: 6px;
  color: var(--text-muted); transition: background var(--dur-1), color var(--dur-1);
}
.themeswitch button:hover { background: var(--ink-200); color: var(--text); }
.themeswitch button[aria-pressed="true"] { background: var(--ink-200); }
.theme-swatch { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-bright); }
.theme-dot { width: 6px; height: 6px; border-radius: 50%; }
.themeswitch button[aria-pressed="true"] .theme-swatch { box-shadow: 0 0 0 2px var(--accent); }
.accent-text { color: var(--accent-bright); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- PRIMITIVES ---- */

/* Buttons */
.btn {
  --bg: var(--ink-200); --bd: var(--line-bright); --fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--bd); color: var(--fg);
  font-weight: 500; font-size: 14px; letter-spacing: 0.01em;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1);
  white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.btn:hover { background: var(--ink-250); border-color: var(--ink-300); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
  /* CTA-Rolle je Theme: Tageslicht = Forest #1A6B45 + weiß (6,5:1); Mondwald/Dämmerung
     = Lime + dunkel. Löst „Lime auf Weiß ~1,3:1" (Spec §1). */
  --bg: var(--primary-bg); --fg: var(--primary-text); --bd: transparent;
  font-weight: 600; box-shadow: 0 6px 20px -8px var(--accent-glow);
}
.btn-primary:hover { background: var(--primary-bg); filter: brightness(1.06); box-shadow: 0 8px 26px -8px var(--accent-glow); }
.btn-ghost { --bg: transparent; --bd: transparent; --fg: var(--text-muted); }
.btn-ghost:hover { --bg: var(--ink-200); --fg: var(--text); }
.btn-outline { --bg: transparent; --bd: var(--line-bright); }
.btn-danger { --fg: var(--danger); --bd: rgba(255,107,107,0.3); --bg: var(--danger-bg); }
.btn-danger:hover { --bg: rgba(255,107,107,0.18); }
.btn-sm { padding: 6px 11px; font-size: 13px; border-radius: var(--r-xs); }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; aspect-ratio: 1; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label {
  font-size: 12.5px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.01em;
}
.input, .select, .textarea {
  width: 100%; padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--ink-200); border: 1px solid var(--line);
  color: var(--text); font-size: 14.5px;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.input::placeholder, .textarea::placeholder { color: var(--text-ondark-min); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-glow); background: var(--ink-150);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%23aab3c6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.input-hint { font-size: 12px; color: var(--text-faint); }
.input-error { font-size: 12.5px; color: var(--danger); }
.field-invalid .input, .field-invalid .select { border-color: rgba(255,107,107,0.5); }

/* Search box (hero input) */
.searchbar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 16px; border-radius: var(--r-md);
  background: var(--ink-200); border: 1px solid var(--line-bright);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.searchbar:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-glow); }
.searchbar input { flex: 1; background: none; border: none; outline: none; font-size: 16px; padding: 10px 0; min-width: 0; }
.searchbar input::placeholder { color: var(--text-ondark-min); }

/* Cards / panels */
.panel {
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card {
  background: var(--ink-150); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--pad);
  transition: border-color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
.card-hover:hover { border-color: var(--line-bright); transform: translateY(-1px); }
.card-pad-lg { padding: 22px; }

/* Badges / chips / pills */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--line-bright); background: var(--ink-200); color: var(--text-muted);
}
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { color: var(--ok); background: var(--ok-bg); border-color: rgba(87,217,154,0.3); }
.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: rgba(242,193,78,0.3); }
.badge.danger { color: var(--danger); background: var(--danger-bg); border-color: rgba(255,107,107,0.3); }
.badge.info { color: var(--info); background: var(--info-bg); border-color: rgba(122,162,255,0.3); }
.badge.accent { color: var(--accent-bright); background: var(--accent-glow); border-color: var(--accent-line); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-full); font-size: 13px; font-weight: 500;
  background: var(--ink-200); border: 1px solid var(--line); color: var(--text-muted);
  transition: all var(--dur-1); cursor: pointer;
}
.chip:hover { border-color: var(--line-bright); color: var(--text); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--accent-glow); border-color: var(--accent-line); color: var(--accent-bright);
}
.chip-remove { display: inline-flex; opacity: 0.6; }
.chip-remove:hover { opacity: 1; }

/* Tooltip-ish meta */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.kv dt { color: var(--text-faint); }
.kv dd { color: var(--text); }

/* Divider */
.hr { height: 1px; background: var(--line); border: none; margin: 4px 0; }
.hr-soft { height: 1px; background: var(--line-soft); border: none; }

/* Progress */
.bar { height: 6px; border-radius: 99px; background: var(--ink-200); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); transition: width var(--dur-2) var(--ease); }
.bar.accent > span { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.bar.warn > span { background: linear-gradient(90deg, var(--warn), #f5d27a); }
.bar.danger > span { background: linear-gradient(90deg, var(--danger), #ff9a9a); }

/* Spinner */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-bright); border-top-color: var(--accent);
  animation: spin 0.7s linear infinite; flex: none;
}
.spinner.lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton */
.skel {
  background: linear-gradient(100deg, var(--ink-200) 30%, var(--ink-250) 50%, var(--ink-200) 70%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r-xs);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Empty state */
.empty { text-align: center; padding: 48px 20px; color: var(--text-faint); }
.empty .empty-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--ink-200);
  border: 1px solid var(--line); color: var(--text-muted);
}
.empty h3 { color: var(--text-muted); font-size: 16px; margin-bottom: 6px; }

/* Toast */
.toasts {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 44px));
}
.toast {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px;
  background: var(--ink-200); border: 1px solid var(--line-bright);
  border-left: 3px solid var(--cyan); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); font-size: 14px;
  animation: toast-in var(--dur-2) var(--ease);
}
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.danger { border-left-color: var(--danger); }
.toast-close { margin-left: auto; color: var(--text-faint); font-size: 18px; line-height: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px) scale(0.97); } }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(4, 6, 10, 0.66); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 22px;
  animation: fade-in var(--dur-2) var(--ease);
}
.modal {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: linear-gradient(180deg, var(--ink-150), var(--ink-100));
  border: 1px solid var(--line-bright); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); animation: modal-in var(--dur-2) var(--ease);
}
.modal-lg { width: min(820px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); padding: 10px 14px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink-100); z-index: 1;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr { transition: background var(--dur-1); }
.tbl tbody tr:hover { background: var(--ink-150); }
.tbl tbody tr.is-clickable { cursor: pointer; }

/* ----------------------------------------------------------- LOAD ANIM ---- */
/* One orchestrated page-load with staggered reveals (anti-slop directive). */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise var(--dur-3) var(--ease) both; }
.reveal-1 { animation-delay: 0.02s; } .reveal-2 { animation-delay: 0.09s; }
.reveal-3 { animation-delay: 0.16s; } .reveal-4 { animation-delay: 0.23s; }
.reveal-5 { animation-delay: 0.30s; } .reveal-6 { animation-delay: 0.37s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .bg-atmosphere::after { opacity: 0.35; }
}

/* ---- Status-Spine (Redesign Phase 3) — ruhige Subnav + wachsende Lime-Ranke -- */
.pipeline-spine {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: flex-start; gap: 4px;
  padding: 10px 4px; margin-bottom: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.pipeline-spine::-webkit-scrollbar { display: none; }
/* Verbinder-Linie liegt auf ORDINAL-Hoehe (Kreis-Mitte), NICHT auf Texthoehe →
   laeuft nie durch die Labels (die darunter stehen). Kreise (opak) decken sie ab. */
.spine-track {
  position: absolute; left: 36px; right: 36px; top: 24px; height: 2px;
  background: var(--line); border-radius: 2px; pointer-events: none; z-index: 0;
}
.spine-progress {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width var(--dur-3) var(--ease);
}
.spine-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 10px; min-width: 64px; text-align: center;
  color: var(--text-muted); transition: color var(--dur-1);
}
.spine-stage:hover { color: var(--text); text-decoration: none; }
.spine-stage.is-active { color: var(--text-strong); }
.spine-ordinal {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-bright); background: var(--surface);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.spine-stage:hover .spine-ordinal { border-color: var(--text-muted); }
.spine-stage.is-active .spine-ordinal { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.spine-ordinal.is-check { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.spine-body { display: flex; align-items: center; gap: 6px; }
.spine-title { font-size: 12px; font-weight: 500; }
.spine-count {
  font-size: 10px; padding: 1px 5px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
}
.spine-state-dot { display: none; }
@media (max-width: 640px) {
  .spine-title { display: none; }
  .spine-stage.is-active .spine-title { display: inline; }
}
/* Leere Live-Count-Badges in der Nav ausblenden (ehrlich: keine Zahl → kein Pill) */
.nav-item .nav-badge:empty { display: none; }

/* ---- Phase 4: Topbar-Suche + Hover-Zeilen-Aktionen (Gmail-Ruhe) ----------- */
.topbar-title { flex: 0 1 auto; min-width: 0; }
.topbar-title h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search { min-width: 0; }
/* Zeilen-Aktionen erst bei Hover/Fokus der Zeile (ruhige Tabelle) */
.lead-row-actions { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.tbl tr:hover .lead-row-actions,
.tbl tr:focus-within .lead-row-actions { opacity: 1; }
@media (hover: none) { .lead-row-actions { opacity: 1; } }

/* ---- Phase 5 (Vorbereitung): Frida-Bild-Slot im Empty-State --------------- */
.empty-illus { max-width: 240px; width: 100%; height: auto; margin: 0 auto 10px; display: block; }
@media (max-width: 640px) { .topbar-title h1 { display: none; } }

/* ---- Cluster F: empfohlenen Tarif hervorheben ----------------------------- */
.plan-card.is-recommended { border-color: var(--accent-line); box-shadow: var(--shadow-accent); }
.badge.badge-recommend { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ---- Welle 3: Hilfe-Panels (natives <details>) + Hilfe-Center ------------- */
.help-panel { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.help-summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 600; list-style: none; }
.help-summary::-webkit-details-marker { display: none; }
.help-summary:hover { color: var(--text); }
.help-panel[open] .help-summary { color: var(--text-strong); border-bottom: 1px solid var(--line); }
.help-body { padding: 12px 14px; line-height: 1.6; }
.help-list { margin: 0; padding-left: 18px; list-style: disc; display: grid; gap: 6px; }
.help-list li { line-height: 1.55; }
.help-video-ph { border: 1px dashed var(--line-bright); border-radius: var(--r-md); padding: 28px; text-align: center; background: var(--surface-2); }
.help-video-badge { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin: 0 auto; background: var(--accent-glow); color: var(--accent); }
.sidebar-help { text-decoration: none; border-radius: var(--r-sm); transition: color var(--dur-1); }
.sidebar-help:hover { color: var(--text); text-decoration: none; }

/* ---- Dashboard-Hero (Frida) — ruhiger Streifen NUR auf #dashboard ---------- */
.dash-hero {
  display: flex; align-items: stretch; gap: 0;
  min-height: clamp(160px, 22vw, 220px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.dash-hero-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; }
/* Frida konsistent GERAHMT auf ALLEN Themes (gerundete Bildflaeche + dezenter Rahmen,
   wirkt wie ein gerahmtes Bild) — bis dunkle Bild-Varianten da sind. Kein Ausblenden. */
.dash-hero-media { flex: 0 0 40%; max-width: 420px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.dash-hero-img {
  width: 100%; height: 100%; max-height: 200px; object-fit: cover; object-position: right center;
  display: block; border-radius: var(--r-md); border: 1px solid var(--line-bright); box-shadow: var(--shadow-md);
}
@media (max-width: 640px) { .dash-hero-media { display: none; } .dash-hero { min-height: 0; } }