/* ==========================================================
   Farbwelt v4 (inspiriert von rahmaniyyah.com, eigene Werte):
   Mitternachtsblau, Tiefes Petrol, Aqua, warmes Bernstein.
   Große weiche Ellipsen statt Raster. Liquid-Glass bleibt.
   ========================================================== */
:root {
  --cw-midnight: #0E1729;
  --cw-petrol: #1D4350;
  --cw-aqua: #6BC3D8;
  --cw-amber: #EE8D45;
  --cw-dew: #EAF4F2;
}
:root[data-theme="dark"] {
  --cw-bg: #0E1729; --cw-surface: #142035; --cw-surface-2: #182740; --cw-surface-3: #22344F;
  --cw-line: rgba(255,255,255,.09); --cw-line-strong: rgba(255,255,255,.16);
  --cw-text: #F3F6F8; --cw-text-muted: #A9B6C6; --cw-text-faint: #8796AA;
  --cw-brand: #F3F6F8; --cw-accent: #6BC3D8; --cw-accent-ink: #0B1626; --cw-accent-soft: rgba(107,195,216,.13);
  --cw-warm: #EE8D45; --cw-warm-soft: rgba(238,141,69,.14);
  --lg-fill: rgba(255,255,255,.035); --lg-fill-strong: rgba(255,255,255,.07);
  --lg-rim-top: rgba(255,255,255,.22); --lg-rim-bottom: rgba(255,255,255,.04); --lg-edge: rgba(255,255,255,.1);
  --lg-shade: rgba(0,0,0,.45); --lg-spec: rgba(255,255,255,.12);
  --ell-a: rgba(107,195,216,.16); --ell-b: rgba(29,67,80,.55); --ell-c: rgba(238,141,69,.12); --ell-ring: rgba(255,255,255,.07);
}
:root[data-theme="light"] {
  --cw-bg: #F1F6F5; --cw-surface: #FFFFFF; --cw-surface-2: #E8F1EF; --cw-surface-3: #DCE8E6;
  --cw-line: #D7E3E1; --cw-line-strong: #C3D3D1;
  --cw-text: #0E1729; --cw-text-muted: #485569; --cw-text-faint: #5E6B7E;
  --cw-brand: #0E1729; --cw-accent: #1A7890; --cw-accent-ink: #FFFFFF; --cw-accent-soft: rgba(26,120,144,.1);
  --cw-warm: #C9661F; --cw-warm-soft: rgba(201,102,31,.1);
  --lg-fill: rgba(255,255,255,.4); --lg-fill-strong: rgba(255,255,255,.66);
  --lg-rim-top: rgba(255,255,255,.95); --lg-rim-bottom: rgba(255,255,255,.4); --lg-edge: rgba(255,255,255,.7);
  --lg-shade: rgba(14,23,41,.1); --lg-spec: rgba(255,255,255,.5);
  --ell-a: rgba(107,195,216,.28); --ell-b: rgba(29,67,80,.12); --ell-c: rgba(238,141,69,.18); --ell-ring: rgba(14,23,41,.07);
}

/* Kein Raster mehr, keine wandernden Farbflecken */
.hero::before { display: none; }
body::before {
  animation: none; inset: 0; filter: none;
  background:
    radial-gradient(ellipse 46vw 38vw at 78% -4%, var(--ell-a), transparent 70%),
    radial-gradient(ellipse 40vw 34vw at -6% 34%, var(--ell-b), transparent 70%),
    radial-gradient(ellipse 34vw 28vw at 92% 64%, var(--ell-c), transparent 70%),
    radial-gradient(ellipse 44vw 36vw at 22% 104%, var(--ell-a), transparent 70%);
}
/* Feine Ring-Ellipsen als ruhiges Gestaltungselement hinter dem Hero */
.hero { overflow: hidden; }
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 1100px; height: 640px; right: -320px; top: -140px; border-radius: 50%;
  border: 1px solid var(--ell-ring);
  box-shadow: none; outline: 1px solid var(--ell-ring); outline-offset: 110px;
}
.section__head, .page-hero .wrap { position: relative; }

/* Typo: zweifarbige Überschriften wie ein ruhiger Akzent */
.grad { background: linear-gradient(95deg, var(--cw-accent) 0%, color-mix(in srgb, var(--cw-accent) 55%, var(--cw-warm)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .grad { background: linear-gradient(95deg, #8FD6E6 0%, #6BC3D8 55%, #EEB07A 100%); -webkit-background-clip: text; background-clip: text; }
.eyebrow::before { background: var(--cw-warm); }

/* Hauptbutton in Bernstein mit warmem Schimmer */
.btn--primary {
  color: #1A0F05; background: linear-gradient(180deg, #F4A766 0%, #EE8D45 55%, #DD7A31 100%);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,.55), inset 0 -1px 0.5px rgba(0,0,0,.12), 0 0 0 1px rgba(238,141,69,.35), 0 10px 28px -10px rgba(238,141,69,.75);
}
.btn--primary:hover { filter: brightness(1.05); color: #1A0F05; background: linear-gradient(180deg, #F4A766 0%, #EE8D45 55%, #DD7A31 100%); }
.btn--accent { background: linear-gradient(180deg, color-mix(in srgb, var(--cw-accent) 80%, #fff), var(--cw-accent)); color: var(--cw-accent-ink); }

/* Navigation als schwebende Glas-Pille (Desktop) */
@media (min-width: 1061px) {
  .nav__links { padding: 5px; border-radius: 999px; background: var(--lg-fill-strong); border: 1px solid var(--lg-edge); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 1px 0.5px var(--lg-rim-top); margin-left: auto; }
  .nav__links a { border-radius: 999px; }
  .nav__links a[aria-current="page"] { background: var(--cw-accent-soft); color: var(--cw-text); }
  .nav__tools { margin-left: 16px; }
}
.nav { background: color-mix(in srgb, var(--cw-bg) 65%, transparent); }

/* Akzentflächen */
.tab[aria-selected="true"], .player__tabs button[aria-selected="true"] { background: var(--cw-accent); color: var(--cw-accent-ink); box-shadow: inset 0 1px 0.5px rgba(255,255,255,.4), 0 6px 16px -8px color-mix(in srgb, var(--cw-accent) 80%, transparent); }
button.chip[aria-pressed="true"] { background: var(--cw-accent); border-color: var(--cw-accent); color: var(--cw-accent-ink); }
.checks li::before { background: linear-gradient(180deg, color-mix(in srgb, var(--cw-accent) 75%, #fff), var(--cw-accent)); color: var(--cw-accent-ink); }
.svc__ic, .pricing li i { background: linear-gradient(135deg, var(--cw-accent-soft), var(--cw-warm-soft)); color: var(--cw-accent); }
.process li::before { background: var(--cw-warm-soft); color: var(--cw-warm); }
.calc__fte-bar i, .pstep__bar i, .cfg__progress i { background: linear-gradient(90deg, var(--cw-accent), var(--cw-amber)); }
.player__live { color: var(--cw-amber); } .player__live i { background: var(--cw-amber); }
.calc__out { background: linear-gradient(160deg, var(--cw-accent-soft), transparent 70%); }

/* Abschluss-CTA: Mitternachtsblau mit Petrol und Bernstein-Schein */
.cta-final { background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(238,141,69,.35), transparent 60%), radial-gradient(ellipse 70% 100% at 0% 100%, rgba(107,195,216,.28), transparent 60%), linear-gradient(135deg, #10203A 0%, #1D4350 100%); color: #F3F6F8; }
.cta-final::before { background: transparent; border: 1px solid rgba(255,255,255,.12); width: 520px; height: 520px; }

/* Leichtes Schweben der Hero-Vorschau mit Bernstein-Schein dahinter (wie bei Medien auf rahmaniyyah) */
#heroPlayer { position: relative; }
#heroPlayer::before { content: ""; position: absolute; inset: -30px; border-radius: 40px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(238,141,69,.22), rgba(238,141,69,.06) 55%, transparent 80%); filter: blur(24px); }

.preview-bar { background: color-mix(in srgb, var(--cw-bg) 85%, #000 0%); }