/* pxmedia.ai — Design-Tokens
   Quelle: die Live-Marke pxmedia.ai (Logo und Seite, am 23.09.2026 ausgelesen),
   Ansage Michael am selben Tag: „Einen Orangeton gibt es hier nicht.“

   DIE FARBACHSE DER MARKE — wörtlich aus dem Hintergrund-SVG der Live-Seite
   (BG-Contenthub3.svg) und damit verbindlich:
     #06B6D4 → #09AECF → #139AC4 → #247AB2 → #3B4D99 → #4B3089
   Von Cyan über Blau nach Lila. Genau diese Achse trägt die ganze Seite.

   Das Logo setzt sie fort: der perspektivische Rahmen um das „ai“ verläuft
   #59E4C6 → #1E7D68 → #43B7C1 → #CAFFFF. Dieser Rahmen ist der SPIEGEL:
   pxMEDIA endet auf „…IA“, umgedreht ergibt das „AI“. Die Marke sagt damit,
   dass AI immer schon in ihrem Namen stand. Das Motiv wird auf der Seite
   aufgegriffen, nicht nur im Logo abgelegt.

   BEDEUTUNGSREGEL (streng, ersetzt die frühere Orange-Regel):
     Cyan  = was die KI tut.
     Lila  = wo ein Mensch entscheidet.
   Die beiden sind die Enden derselben Achse — das Bild trägt die Aussage:
   vom System zum Menschen. Sie werden nie füreinander eingesetzt.
   Das Stamm-Lila #4B3089 ist auf dunklem Grund nicht lesbar (1,8:1); für
   Text, Linien und Symbole gilt deshalb die aufgehellte Fassung. */

:root {
  /* ---- Flächen ---- */
  --c-grund:     #151515;
  --c-flaeche-1: #1a1a1a;
  --c-flaeche-2: #212121;
  --c-flaeche-3: #2a2a2a;
  --c-linie:     #303030;
  --c-linie-2:   #3d3d3d;

  /* ---- Text ---- */
  --c-text:   #f4f4f4;      /* 15,9:1 */
  --c-text-2: #b4b4b4;      /*  7,4:1 */
  --c-text-3: #8c8c8c;      /*  4,6:1 — nur ab 16 px */

  /* ---- Die zwei Bedeutungsfarben ---- */
  --c-ki:          #06B6D4; /* Cyan der Marke. Auf Grund 7,5:1 (AAA) */
  --c-ki-weich:    rgba(6,182,212,.12);
  --c-ki-linie:    rgba(6,182,212,.38);

  --c-mensch:      #A594F9; /* Lila #4B3089 aufgehellt. Auf Grund 7,1:1 (AAA) */
  --c-mensch-tief: #4B3089; /* Stammfarbe — nur für Flächen und Verläufe */
  --c-mensch-weich: rgba(165,148,249,.14);
  --c-mensch-linie: rgba(165,148,249,.42);

  /* ---- Die Achse als Verlauf (für Linien, Ränder, Trenner) ---- */
  --achse: linear-gradient(90deg, #06B6D4 0%, #139AC4 28%, #247AB2 52%, #3B4D99 76%, #4B3089 100%);
  --achse-quer: linear-gradient(160deg, #06B6D4 0%, #247AB2 55%, #4B3089 100%);

  /* ---- Der Spiegel (Logo-Verlauf) ---- */
  --spiegel-1: #59E4C6;
  --spiegel-2: #43B7C1;
  --spiegel-3: #CAFFFF;
  --spiegel: linear-gradient(180deg, #CAFFFF 0%, #59E4C6 38%, #43B7C1 72%, #1E7D68 100%);

  /* ---- Typografie: Lato, modulare Skala φ = 1,618, Anker 1.0625rem ---- */
  --font: "Lato", -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-black: 900;
  --fw-bold: 700;
  --fw-text: 400;
  --fw-light: 300;

  --fs-display: clamp(2.7rem, 7vw, 5.6rem);
  --fs-h1:      clamp(2.2rem, 4.8vw, 3.9rem);
  --fs-h2:      clamp(1.7rem, 3.1vw, 2.6rem);
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-text:    1.0625rem;
  --fs-klein:   0.875rem;

  --zh-eng: 1.08;
  --zh-mittel: 1.35;
  --zh-text: 1.62;

  /* ---- Raum und Form ---- */
  --raum-sektion: clamp(4rem, 8vw, 7.5rem);
  --raum-block: clamp(2rem, 4vw, 3.5rem);
  --breite: 1220px;
  --breite-eng: 780px;
  --rand: clamp(1.15rem, 4vw, 2.5rem);

  --radius: 12px;
  --radius-gross: 20px;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --dauer: 260ms;

  --schatten: 0 18px 50px -24px rgba(0,0,0,.9);
  --glas: rgba(26,26,26,.82);
}

@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;
  }
}