/* =========================================================
   cloudnetz – Base
   Variablen, Theme, Reset, Body und Grundlayout
   Aus style-v38.css modularisiert.
   ========================================================= */

:root {
      --bg: #f5f8fb;
      --surface: #ffffff;
      --surface-2: #eef4f8;
      --text: #102033;
      --muted: #607086;
      --border: #dbe5ec;
      --accent: #05b9f2;
      --accent-2: #00d9ff;
      --accent-soft: rgba(5, 185, 242, .12);
      --shadow: 0 18px 50px rgba(30, 60, 85, .10);
      --header-bg: rgba(245, 248, 251, .84);
      --hero-glow: rgba(5, 185, 242, .16);
    }

    [data-theme="dark"] {
      --bg: #020b18;
      --surface: #071426;
      --surface-2: #0a1b31;
      --text: #f5f9fc;
      --muted: #93a8bc;
      --border: #153653;
      --accent: #00bff3;
      --accent-2: #00dfff;
      --accent-soft: rgba(0, 191, 243, .11);
      --shadow: 0 20px 60px rgba(0, 0, 0, .36);
      --header-bg: rgba(2, 11, 24, .84);
      --hero-glow: rgba(0, 191, 243, .20);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(ellipse at 12% 12%, rgba(0, 191, 243, .13), transparent 32rem),
        radial-gradient(ellipse at 88% 30%, rgba(0, 108, 255, .10), transparent 36rem),
        radial-gradient(ellipse at 45% 72%, rgba(0, 223, 255, .07), transparent 42rem),
        radial-gradient(circle at 50% 0%, var(--hero-glow), transparent 34rem),
        var(--bg);
      line-height: 1.6;
      transition: background-color .25s ease, color .25s ease;
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(34px);
      opacity: .72;
    }

    body::before {
      width: 46rem;
      height: 46rem;
      left: -18rem;
      top: 18%;
      background: radial-gradient(circle, rgba(0,191,243,.12), rgba(0,191,243,0) 68%);
      animation: cloudnetzGlowA 15s ease-in-out infinite alternate;
    }

    body::after {
      width: 52rem;
      height: 52rem;
      right: -23rem;
      top: 48%;
      background: radial-gradient(circle, rgba(0,102,255,.10), rgba(0,102,255,0) 70%);
      animation: cloudnetzGlowB 19s ease-in-out infinite alternate;
    }

    @keyframes cloudnetzGlowA {
      from { transform: translate3d(0,-4%,0) scale(.95); opacity: .48; }
      to   { transform: translate3d(12%,10%,0) scale(1.08); opacity: .78; }
    }

    @keyframes cloudnetzGlowB {
      from { transform: translate3d(0,8%,0) scale(.92); opacity: .42; }
      to   { transform: translate3d(-12%,-8%,0) scale(1.10); opacity: .70; }
    }

    @media (prefers-reduced-motion: reduce) {
      body::before, body::after, .hero-orbit-a, .hero-orbit-b { animation: none; }
    }

    a { color: inherit; text-decoration: none; }
    .container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }