:root {
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Fluid type scale */
  --fs-1: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem);
  --fs-2: clamp(1.00rem, 0.95rem + 0.25vw, 1.12rem);
  --fs-3: clamp(1.14rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-4: clamp(1.32rem, 1.15rem + 0.75vw, 1.85rem);
  --fs-5: clamp(1.60rem, 1.30rem + 1.2vw, 2.45rem);
  --fs-6: clamp(2.00rem, 1.55rem + 1.9vw, 3.10rem);

  --lh-tight: 1.10;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.50rem;
  --s-3: 0.75rem;
  --s-4: 1.00rem;
  --s-5: 1.25rem;
  --s-6: 1.50rem;
  --s-7: 2.00rem;
  --s-8: 2.75rem;
  --s-9: 3.75rem;
  --s-10: 5.00rem;

  /* Layout */
  --container: 1160px;
  --gutter: clamp(1rem, 4vw, 2.25rem);

  /* Cinematic heroes: identisch auf allen Seiten → gleiche Startlinie & Scroll-Position (unabhängig vom Text) */
  --hero-pad-top: clamp(28px, 4.25vw, 48px);
  --hero-pad-bottom: clamp(92px, 10.5vmin, 112px);
  /* Scroll-Hinweis: Abstand von der unteren Hero-Kante (= Viewport unten bei min-height:100vh) */
  --hero-scroll-bottom: clamp(50px, 9vmin, 90px);

  /* Radius */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;
  --r-4: 26px;

  /* Shadow (subtle, premium) */
  --sh-1: 0 1px 0 rgba(0,0,0,.06);
  --sh-2: 0 10px 40px rgba(0,0,0,.08);
  --sh-3: 0 18px 70px rgba(0,0,0,.10);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 380ms;

  /* Borders */
  --b-1: 1px solid rgba(0,0,0,.10);
  --b-2: 1px solid rgba(0,0,0,.16);

  /* Light theme colors */
  --bg: #0b0c10;
  --surface: rgba(255,255,255,.07);
  --surface-2: rgba(255,255,255,.10);
  --surface-3: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(255,255,255,.52);
  --stroke: rgba(255,255,255,.14);
  --stroke-2: rgba(255,255,255,.22);

  --accent: #7c5cff;
  --accent-2: #34d3ff;
  --good: #3ddc97;
  --warn: #ffcc66;

  /* Gradients */
  --grad: linear-gradient(135deg, rgba(124,92,255,.95), rgba(52,211,255,.85));
  --grad-soft: radial-gradient(1200px 800px at 10% 0%, rgba(124,92,255,.25), transparent 55%),
               radial-gradient(900px 700px at 85% 10%, rgba(52,211,255,.18), transparent 60%);

  /* Backdrop */
  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.12);
  --blur: blur(12px);

  /* Focus */
  --focus: 0 0 0 3px rgba(52,211,255,.35), 0 0 0 1px rgba(52,211,255,.55);

  /* Form */
  --input: rgba(255,255,255,.06);
  --input-hover: rgba(255,255,255,.10);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7fb;
    --surface: rgba(0,0,0,.04);
    --surface-2: rgba(0,0,0,.06);
    --surface-3: rgba(0,0,0,.09);
    --text: rgba(0,0,0,.88);
    --muted: rgba(0,0,0,.62);
    --muted-2: rgba(0,0,0,.50);
    --stroke: rgba(0,0,0,.10);
    --stroke-2: rgba(0,0,0,.16);

    --input: rgba(0,0,0,.04);
    --input-hover: rgba(0,0,0,.06);

    --glass: rgba(255,255,255,.70);
    --glass-2: rgba(255,255,255,.82);
    --blur: blur(14px);

    --sh-2: 0 12px 40px rgba(0,0,0,.10);
    --sh-3: 0 22px 70px rgba(0,0,0,.14);
  }
}

@media (max-width: 768px) {
  :root {
    --hero-pad-top: clamp(20px, 3.85vw, 34px);
    --hero-pad-bottom: clamp(58px, 11.5vw, 74px);
    --hero-scroll-bottom: clamp(40px, 9.5vmin, 68px);
    /* Etwas mehr Luft am Rand, wirkt auf Phones ruhiger (Desktop: unverändert) */
    --gutter: clamp(0.95rem, 4.2vw, 1.35rem);
    --section-y-mobile: clamp(2.35rem, 7vw, 3.15rem);
  }
}