/* ==========================================================
   Farbwelten zum Vergleichen (Vorschau). Auswahl unten links.
   Jede Farbwelt hat eigene Werte für Dunkel und Hell.
   ========================================================== */

/* --- Ruhigeres Glas: keine Übersättigung, kein heller Schleier --- */
.card, .lg, .process li, .tabs, .kpi, .cfg, .faq details, .eyebrow, .btn--ghost, .icon-btn, .nav, .app__side, .nav__links {
  background: var(--lg-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}
.card::before, .lg::before { background: radial-gradient(260px 160px at var(--lx, 22%) var(--ly, 0%), var(--lg-spec), transparent 70%); mix-blend-mode: normal; opacity: .5; }
.card, .lg, .tabs, .process li, .kpi, .faq details { box-shadow: inset 0 1px 0 var(--lg-rim-top), 0 1px 2px var(--lg-shade), 0 16px 40px -22px var(--lg-shade); }

/* Aktiver Reiter überall in der Akzentfarbe (auch im Dark Mode) */
:root[data-theme] .tab[aria-selected="true"],
:root[data-theme] .player__tabs button[aria-selected="true"] { background: var(--cw-accent); color: var(--cw-accent-ink); box-shadow: none; }
.tabs, .player__tabs { background: var(--lg-fill); }

/* Hauptbutton folgt der Farbwelt */
.btn--primary, .btn--primary:hover { background: var(--cw-cta); color: var(--cw-cta-ink); box-shadow: 0 8px 22px -10px var(--cw-cta-glow); filter: none; }
.btn--primary:hover { filter: brightness(1.06); }
.cta-final .btn--primary { background: #fff; color: #111; }
.player__live { color: var(--cw-cta); } .player__live i { background: var(--cw-cta); }
.calc__fte-bar i, .pstep__bar i, .cfg__progress i { background: linear-gradient(90deg, var(--cw-accent), var(--cw-cta)); }
#heroPlayer::before { background: radial-gradient(closest-side, var(--cw-cta-glow), transparent 75%); opacity: .45; }
.cta-final { background: radial-gradient(ellipse 60% 90% at 100% 0%, var(--cw-cta-glow), transparent 60%), radial-gradient(ellipse 70% 100% at 0% 100%, var(--ell-a), transparent 60%), linear-gradient(135deg, var(--cw-cta-deep-1), var(--cw-cta-deep-2)); }
.grad, :root[data-theme="dark"] .grad { background: linear-gradient(95deg, var(--cw-accent) 0%, var(--cw-grad-end) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 1. Graphit (neutral, fast schwarz) – Standard ---------- */
:root[data-palette="graphit"][data-theme="dark"] {
  --cw-bg: #0C0D0F; --cw-surface: #141518; --cw-surface-2: #1A1C20; --cw-surface-3: #24272C;
  --cw-text: #F3F3F1; --cw-text-muted: #A8AAAE; --cw-text-faint: #8B8E93; --cw-brand: #F3F3F1;
  --cw-accent: #7CCFE0; --cw-accent-ink: #071216; --cw-accent-soft: rgba(124,207,224,.12);
  --cw-warm: #F0A15E; --cw-cta: #F0A15E; --cw-cta-ink: #1B0F04; --cw-cta-glow: rgba(240,161,94,.45); --cw-grad-end: #F0C29A;
  --cw-cta-deep-1: #16181C; --cw-cta-deep-2: #22262B;
  --lg-fill: rgba(255,255,255,.035); --lg-fill-strong: rgba(255,255,255,.06); --lg-edge: rgba(255,255,255,.09); --lg-rim-top: rgba(255,255,255,.1); --lg-spec: rgba(255,255,255,.06); --lg-shade: rgba(0,0,0,.5);
  --ell-a: rgba(124,207,224,.08); --ell-b: rgba(255,255,255,.025); --ell-c: rgba(240,161,94,.07); --ell-ring: rgba(255,255,255,.05);
}
:root[data-palette="graphit"][data-theme="light"] {
  --cw-bg: #F4F4F2; --cw-surface: #FFFFFF; --cw-surface-2: #ECECE9; --cw-surface-3: #E1E1DD; --cw-line: #DEDED9; --cw-line-strong: #CACAC4;
  --cw-text: #141518; --cw-text-muted: #50535A; --cw-text-faint: #676A70; --cw-brand: #141518;
  --cw-accent: #16758C; --cw-accent-ink: #fff; --cw-accent-soft: rgba(22,117,140,.09);
  --cw-warm: #C4631C; --cw-cta: #E58B3F; --cw-cta-ink: #1B0F04; --cw-cta-glow: rgba(229,139,63,.4); --cw-grad-end: #C4631C;
  --cw-cta-deep-1: #16181C; --cw-cta-deep-2: #2A2E34;
  --ell-a: rgba(124,207,224,.22); --ell-b: rgba(20,21,24,.05); --ell-c: rgba(240,161,94,.16); --ell-ring: rgba(20,21,24,.06);
}

/* ---------- 2. Petrol (tiefes Grün-Blau mit Mint) ---------- */
:root[data-palette="petrol"][data-theme="dark"] {
  --cw-bg: #07161A; --cw-surface: #0D2025; --cw-surface-2: #12292F; --cw-surface-3: #1A363D;
  --cw-text: #EEF6F5; --cw-text-muted: #9FB8B6; --cw-text-faint: #85A09E; --cw-brand: #EEF6F5;
  --cw-accent: #62D6C4; --cw-accent-ink: #04140F; --cw-accent-soft: rgba(98,214,196,.12);
  --cw-warm: #F2B05C; --cw-cta: #F2B05C; --cw-cta-ink: #1E1203; --cw-cta-glow: rgba(242,176,92,.4); --cw-grad-end: #B8EBDD;
  --cw-cta-deep-1: #0B2A2E; --cw-cta-deep-2: #12403F;
  --lg-fill: rgba(255,255,255,.035); --lg-fill-strong: rgba(255,255,255,.06); --lg-edge: rgba(255,255,255,.09); --lg-rim-top: rgba(255,255,255,.1); --lg-spec: rgba(255,255,255,.06); --lg-shade: rgba(0,0,0,.5);
  --ell-a: rgba(98,214,196,.10); --ell-b: rgba(18,64,63,.45); --ell-c: rgba(242,176,92,.07); --ell-ring: rgba(255,255,255,.05);
}
:root[data-palette="petrol"][data-theme="light"] {
  --cw-bg: #EEF5F3; --cw-surface: #FFFFFF; --cw-surface-2: #E3EEEB; --cw-surface-3: #D5E5E1; --cw-line: #D3E2DE; --cw-line-strong: #BCD0CB;
  --cw-text: #0B1E21; --cw-text-muted: #455A5C; --cw-text-faint: #5B6F71; --cw-brand: #0B1E21;
  --cw-accent: #0F7A6C; --cw-accent-ink: #fff; --cw-accent-soft: rgba(15,122,108,.09);
  --cw-warm: #B9721C; --cw-cta: #E9A24A; --cw-cta-ink: #1E1203; --cw-cta-glow: rgba(233,162,74,.4); --cw-grad-end: #2B9E8C;
  --cw-cta-deep-1: #0B2A2E; --cw-cta-deep-2: #12403F;
  --ell-a: rgba(98,214,196,.22); --ell-b: rgba(18,64,63,.08); --ell-c: rgba(242,176,92,.14); --ell-ring: rgba(11,30,33,.06);
}

/* ---------- 3. Espresso (warmes Dunkelbraun mit Bernstein) ---------- */
:root[data-palette="espresso"][data-theme="dark"] {
  --cw-bg: #110E0C; --cw-surface: #1A1613; --cw-surface-2: #211C18; --cw-surface-3: #2C2520;
  --cw-text: #F6F0E9; --cw-text-muted: #B6A99B; --cw-text-faint: #998D80; --cw-brand: #F6F0E9;
  --cw-accent: #E9A866; --cw-accent-ink: #1A0E04; --cw-accent-soft: rgba(233,168,102,.12);
  --cw-warm: #E9A866; --cw-cta: #E9A866; --cw-cta-ink: #1A0E04; --cw-cta-glow: rgba(233,168,102,.4); --cw-grad-end: #F3D3AE;
  --cw-cta-deep-1: #1E1814; --cw-cta-deep-2: #3A2A1E;
  --lg-fill: rgba(255,240,225,.035); --lg-fill-strong: rgba(255,240,225,.06); --lg-edge: rgba(255,240,225,.09); --lg-rim-top: rgba(255,240,225,.1); --lg-spec: rgba(255,240,225,.06); --lg-shade: rgba(0,0,0,.5);
  --ell-a: rgba(233,168,102,.09); --ell-b: rgba(120,80,50,.12); --ell-c: rgba(233,168,102,.06); --ell-ring: rgba(255,240,225,.05);
}
:root[data-palette="espresso"][data-theme="light"] {
  --cw-bg: #F7F2EC; --cw-surface: #FFFDFA; --cw-surface-2: #EFE7DE; --cw-surface-3: #E5DACD; --cw-line: #E3D8CB; --cw-line-strong: #D1C3B3;
  --cw-text: #1E1712; --cw-text-muted: #5E5248; --cw-text-faint: #75685D; --cw-brand: #1E1712;
  --cw-accent: #A85A1C; --cw-accent-ink: #fff; --cw-accent-soft: rgba(168,90,28,.09);
  --cw-warm: #A85A1C; --cw-cta: #D98A45; --cw-cta-ink: #1A0E04; --cw-cta-glow: rgba(217,138,69,.4); --cw-grad-end: #D98A45;
  --cw-cta-deep-1: #2A1F18; --cw-cta-deep-2: #4A3424;
  --ell-a: rgba(233,168,102,.2); --ell-b: rgba(120,80,50,.07); --ell-c: rgba(233,168,102,.12); --ell-ring: rgba(30,23,18,.06);
}

/* ---------- 4. Waldnacht (sehr dunkles Grün mit Salbei) ---------- */
:root[data-palette="wald"][data-theme="dark"] {
  --cw-bg: #0A110D; --cw-surface: #111B15; --cw-surface-2: #16231C; --cw-surface-3: #1F3026;
  --cw-text: #EFF5F0; --cw-text-muted: #A2B4A7; --cw-text-faint: #879A8C; --cw-brand: #EFF5F0;
  --cw-accent: #8FD3A6; --cw-accent-ink: #06130B; --cw-accent-soft: rgba(143,211,166,.12);
  --cw-warm: #E8B86A; --cw-cta: #E8B86A; --cw-cta-ink: #1C1305; --cw-cta-glow: rgba(232,184,106,.4); --cw-grad-end: #D8EFC0;
  --cw-cta-deep-1: #0F1C15; --cw-cta-deep-2: #1C3427;
  --lg-fill: rgba(255,255,255,.035); --lg-fill-strong: rgba(255,255,255,.06); --lg-edge: rgba(255,255,255,.09); --lg-rim-top: rgba(255,255,255,.1); --lg-spec: rgba(255,255,255,.06); --lg-shade: rgba(0,0,0,.5);
  --ell-a: rgba(143,211,166,.09); --ell-b: rgba(30,70,45,.3); --ell-c: rgba(232,184,106,.06); --ell-ring: rgba(255,255,255,.05);
}
:root[data-palette="wald"][data-theme="light"] {
  --cw-bg: #F1F5F1; --cw-surface: #FFFFFF; --cw-surface-2: #E6EEE7; --cw-surface-3: #D9E4DA; --cw-line: #D6E1D7; --cw-line-strong: #BFCEC1;
  --cw-text: #0F1A13; --cw-text-muted: #4A5A4E; --cw-text-faint: #5F6F63; --cw-brand: #0F1A13;
  --cw-accent: #2F7D52; --cw-accent-ink: #fff; --cw-accent-soft: rgba(47,125,82,.09);
  --cw-warm: #A8741F; --cw-cta: #DDA748; --cw-cta-ink: #1C1305; --cw-cta-glow: rgba(221,167,72,.4); --cw-grad-end: #6FAE52;
  --cw-cta-deep-1: #0F1C15; --cw-cta-deep-2: #1C3427;
  --ell-a: rgba(143,211,166,.22); --ell-b: rgba(30,70,45,.06); --ell-c: rgba(232,184,106,.14); --ell-ring: rgba(15,26,19,.06);
}

/* ---------- 5. Mitternacht (bisherige Variante, zum Vergleich) ---------- */
:root[data-palette="mitternacht"] { --cw-cta: #EE8D45; --cw-cta-ink: #1A0F05; --cw-cta-glow: rgba(238,141,69,.45); --cw-grad-end: #EEB07A; --cw-cta-deep-1: #10203A; --cw-cta-deep-2: #1D4350; }

/* Farbwahl-Leiste (nur in der Vorschau) */
.palette-picker { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--cw-surface) 80%, transparent); border: 1px solid var(--cw-line-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.4); font-size: 13px; font-weight: 600; color: var(--cw-text-muted); }
.palette-picker button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; position: relative; }
.palette-picker button[aria-pressed="true"] { border-color: var(--cw-text); }
.palette-picker button span { position: absolute; inset: 3px; border-radius: 50%; }
body.is-app .palette-picker { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) { .palette-picker > b { display: none; } .palette-picker { left: 50%; transform: translateX(-50%); } }