/* myrocketpage.de — Design-Tokens
   Quelle: CD_myrocketpage.md (Mission-Control-These, Stand 19.08.2026) — Farben und
   Schriften bleiben, der Aufbau der Seite ist neu (Konzept 23.09.2026).

   BEDEUTUNGSREGEL (neu, streng):
     Indigo = was die Website / die KI tut.
     Amber  = wo ein Mensch entscheidet (der Besucher oder Sie).
   Amber bleibt ein Tupfer, nie eine Fläche (CD §2). Blau trägt Verläufe und
   Höhepunkte, nie eine Bedeutung. */

:root {
  /* ---- Ebenen ---- */
  --e0: #0A0A0F;
  --e1: #111118;
  --e2: #16161F;
  --e3: #1E1E2A;
  --e4: #2A2A38;

  /* ---- Akzente ---- */
  --indigo: #7C8CF8;          /* auf --e0: 6,9:1 */
  --indigo-dk: #5C6CE0;
  --blue: #5BA3FB;            /* 7,6:1 */
  --amber: #F5B544;           /* 10,4:1 */
  --grad: linear-gradient(135deg, var(--indigo), var(--blue));

  --ki-weich: rgba(124,140,248,.13);
  --ki-linie: rgba(124,140,248,.42);
  --mensch-weich: rgba(245,181,68,.14);
  --mensch-linie: rgba(245,181,68,.45);

  /* ---- Text ---- */
  --tx-peak: #F1F4F9;
  --tx-head: rgba(241,244,249,.92);   /* 15,0:1 */
  --tx-body: rgba(180,188,204,.86);   /* 7,1:1 */
  --tx-mut: rgba(156,166,186,.80);    /* 4,9:1 — nur ab 15 px */

  /* ---- Linien, Flächen, Licht ---- */
  --hair: rgba(255,255,255,.08);
  --hair2: rgba(255,255,255,.13);
  --glow: 0 0 48px rgba(124,140,248,.24);
  --glas: rgba(17,17,24,.86);

  /* ---- Typografie: Geist (Kopf), Geist Mono (Technik), Inter (Fließtext) ---- */
  --font-kopf: "Geist", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --font-text: "Inter", -apple-system, "Segoe UI", sans-serif;

  --text-hero: clamp(2.6rem, 6.4vw, 5.6rem);
  --text-h2: clamp(1.75rem, 3.8vw, 3.1rem);
  --text-h3: clamp(1.2rem, 2vw, 1.55rem);
  --text-lead: clamp(1.05rem, 1.5vw, 1.2rem);
  --text-body: 1.0625rem;
  --text-klein: .875rem;

  /* ---- Raum und Form ---- */
  --maxw: 1200px;
  --maxw-eng: 780px;
  --rand: clamp(1.15rem, 4vw, 2.5rem);
  --raum-sektion: clamp(4.2rem, 9vw, 8rem);
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dauer: 260ms;
  --kopf-hoehe: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}