/* ==========================================================
   v3: Mischung aus v1 (technisch, kühl) und v2 (warm, ruhig)
   mit Glas-Flächen. Nur Optik, Struktur bleibt.
   ========================================================== */
:root[data-theme="light"] {
  --cw-bg: #F3F4F7; --cw-surface: #FFFFFF; --cw-surface-2: #EEF0F4; --cw-surface-3: #E3E6EC;
  --cw-line: #E1E4EA; --cw-line-strong: #CDD2DB;
  --cw-text: #121722; --cw-text-muted: #525A67; --cw-text-faint: #6A7280;
  --cw-brand: #16223A; --cw-accent: #2A62E0; --cw-accent-soft: #E6EDFC;
  --cw-warm: #C2582B;
  --glass: rgba(255,255,255,.62); --glass-strong: rgba(255,255,255,.8);
  --glass-line: rgba(255,255,255,.75); --glass-edge: rgba(18,23,34,.08);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -14px rgba(22,34,58,.18), 0 2px 6px -2px rgba(22,34,58,.06);
  --blob-a: rgba(42,98,224,.22); --blob-b: rgba(232,128,74,.18); --blob-c: rgba(120,90,230,.12);
  --grid: rgba(22,34,58,.05);
}
:root[data-theme="dark"] {
  --cw-bg: #0B0F17; --cw-surface: #131925; --cw-surface-2: #182030; --cw-surface-3: #212B3D;
  --cw-line: #222C3D; --cw-line-strong: #2F3B50;
  --cw-text: #EAEEF5; --cw-text-muted: #A0AABA; --cw-text-faint: #8590A2;
  --cw-brand: #E4E9F2; --cw-accent: #7AA7FF; --cw-accent-ink: #08101F; --cw-accent-soft: rgba(122,167,255,.13);
  --cw-warm: #EE9A6E;
  --glass: rgba(22,29,43,.55); --glass-strong: rgba(24,32,48,.78);
  --glass-line: rgba(255,255,255,.08); --glass-edge: rgba(255,255,255,.06);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -18px rgba(0,0,0,.7);
  --blob-a: rgba(64,120,255,.22); --blob-b: rgba(238,154,110,.12); --blob-c: rgba(140,100,255,.14);
  --grid: rgba(200,214,236,.045);
}

/* Umgebungslicht: weiche Farbflächen hinter dem Glas */
body::before { content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 32vw at 82% 8%, var(--blob-a), transparent 70%),
    radial-gradient(30vw 28vw at 8% 38%, var(--blob-b), transparent 70%),
    radial-gradient(34vw 30vw at 70% 78%, var(--blob-c), transparent 70%); }
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 25%, transparent 75%); }

/* Glas-Bausteine */
.card, .process li, .tabs, .kpi, .footer, .cfg, .faq details {
  background: var(--glass); border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--glass-shadow); }
.card { border-radius: 20px; }
.section--alt { background: transparent; border-color: transparent; }
.footer { border-left: 0; border-right: 0; border-bottom: 0; }
.nav { background: color-mix(in srgb, var(--cw-bg) 55%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
.nav.is-scrolled { border-bottom-color: var(--glass-edge); box-shadow: 0 8px 24px -18px rgba(0,0,0,.35); }
.preview-bar { background: color-mix(in srgb, var(--cw-surface-2) 70%, transparent); border-bottom-color: var(--glass-edge); }
.icon-btn { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.stage__side { background: color-mix(in srgb, var(--cw-surface-2) 55%, transparent); border-color: var(--glass-edge); }
.stage__bar, .stage__notice, .flow__viewbar, .flow__benefit, .chat__form, .flow__canvas, .mails__list, .cfg__steps { border-color: var(--glass-edge); }
.stage__notice, .cfg__steps { background: color-mix(in srgb, var(--cw-surface-2) 50%, transparent); }
.scene, .browser, .pushdemo { background: color-mix(in srgb, var(--cw-surface-2) 45%, transparent); }
.pick[aria-pressed="true"], .fstep, .pushbtn, .opt, .kv div, .sc-ai, .sc-check { background: var(--glass-strong); border-color: var(--glass-line); }
.app__side { background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: var(--glass-edge); }
.faq { border-top: 0; gap: 10px; }
.faq details { border: 1px solid var(--glass-line); border-radius: 16px; padding: 0 22px; }
.faq summary { padding: 18px 0; }

/* Typo und Akzente: kühler, präziser (v1) mit warmen Details (v2) */
h1, h2, h3 { letter-spacing: -.028em; }
.hero h1 { font-weight: 750; letter-spacing: -.04em; }
.grad { background: linear-gradient(100deg, var(--cw-accent) 0%, #7A5CFA 55%, var(--cw-warm) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--cw-text-muted); padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cw-warm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-warm) 20%, transparent); }
.section__head .eyebrow, .page-hero .eyebrow, .pricing .eyebrow { justify-self: start; }
.process li::before { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; background: var(--cw-accent-soft); color: var(--cw-accent); }

/* Buttons */
.btn { border-radius: 12px; }
.btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--cw-accent) 90%, #fff) 0%, var(--cw-accent) 100%); color: var(--cw-accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px color-mix(in srgb, var(--cw-accent) 70%, transparent); }
.btn--primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, color-mix(in srgb, var(--cw-accent) 90%, #fff) 0%, var(--cw-accent) 100%); color: var(--cw-accent-ink); }
.btn--ghost { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--glass-shadow); }
.tab[aria-selected="true"] { background: var(--cw-accent); color: var(--cw-accent-ink); }
button.chip[aria-pressed="true"] { background: var(--cw-accent); border-color: var(--cw-accent); color: var(--cw-accent-ink); }

/* Leistungen: Icon mit Verlauf, Lichtkante folgt der Maus */
.svc { position: relative; overflow: hidden; }
.svc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-med);
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--cw-accent) 14%, transparent), transparent 70%); }
.svc:hover::after { opacity: 1; }
.svc__ic { background: linear-gradient(135deg, var(--cw-accent-soft), color-mix(in srgb, var(--cw-warm) 16%, transparent)); }

/* Hero-Collage */
.win { border-color: var(--glass-line); box-shadow: 0 30px 70px -30px rgba(10,20,40,.45), 0 1px 0 rgba(255,255,255,.4) inset; }
.collage .widget .widget__body { background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Abschluss-CTA: Glas auf Farbverlauf */
.cta-final { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #1D3F9A 0%, #3B2A8C 55%, #8C3F2A 120%); box-shadow: 0 30px 70px -30px rgba(29,63,154,.55); }
.cta-final::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: rgba(255,255,255,.12); }
.cta-final > * { position: relative; }
.cta-final .btn--primary { background: rgba(255,255,255,.94); color: #121722; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.pricing li i { background: linear-gradient(135deg, var(--cw-accent-soft), color-mix(in srgb, var(--cw-warm) 15%, transparent)); }

.toast { background: color-mix(in srgb, var(--cw-brand) 85%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sheet { background: color-mix(in srgb, var(--cw-bg) 82%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* Ohne backdrop-filter: deckende Flächen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .process li, .tabs, .kpi, .footer, .cfg, .faq details, .app__side, .eyebrow, .btn--ghost, .icon-btn { background: var(--cw-surface); }
}