/* pxMEDIA.de — Design-Tokens
   Quelle: CD-Handbuch 2026-01 (V 1.2, 08.01.2026), Seiten 5–7.
   Verbindlich für den Website-Neubau. Nicht frei erweitern —
   Änderungen nur mit Beleg im CD oder Entscheidung von Michael. */

:root {
  /* ---- Farben (CD Seite 5) ---- */
  --c-schwarz: #151515;   /* Hauptflächen, Hintergrund — 60–65 % Anteil */
  --c-orange:  #F2950E;   /* EINZIGE Hauptakzentfarbe: Call-to-Action, Buttons,
                             Hervorhebungen — 20–25 %. NIE als Fließtextfarbe. */
  --c-weiss:   #FFFFFF;   /* Text, Überschriften, Kontrast — 10–15 % */
  --c-lila:    #5402A6;   /* Mikro-Akzent: Linien, Icons, Dekor — 2–8 %.
                             Nie großflächig, nie als Textfarbe. */
  --c-blau:    #3F3FAF;   /* Ergänzungsfarbe für Ausgewogenheit/Lesbarkeit,
                             sparsamer als Lila einsetzen */

  /* Abgeleitete Flächenstufen (CD zeigt Abstufungen, Basis Schwarz) */
  --c-flaeche-1: #151515; /* Grundfläche */
  --c-flaeche-2: #1c1c1c; /* Karten, leicht abgesetzt */
  --c-flaeche-3: #242424; /* Hover, Ränder-Untergrund */
  --c-linie:     #2e2e2e; /* Trennlinien (Fading Lines: zu transparent auslaufend) */
  --c-text:      #f4f4f4; /* Fließtext auf Schwarz — nicht reines Weiß, blendfrei */
  --c-text-2:    #b8b8b8; /* Sekundärtext; auf --c-flaeche-1 Kontrast 7,5:1 */

  /* ---- Typografie (CD Seite 7): Lato, fünf Schnitte ---- */
  --font: "Lato", -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-headline: 900;     /* Lato Black — Überschriften */
  --fw-text: 400;         /* Lato Regular — Fließtext */
  --fw-sub: 300;          /* Lato Thin/Light — Subheadlines (300 statt 100:
                             Thin ist auf dunklem Grund unter 24px unlesbar) */
  /* Zitate: Regular Italic · Ergänzungen: Light Italic */

  /* Typo-Skala: goldener Schnitt (φ = 1,618), Anker Fließtext 1.0625rem.
     Jede Stufe = vorige × φ; lead/klein = ± √φ. Verifiziert 19.08.2026:
     die Regel heißt modulare Skala, der Wert ist 1,618 (nicht 1,68). */
  --fs-riesig: clamp(3.2rem, 8.4vw, 7.28rem);   /* Bühnen-Display  φ⁴ */
  --fs-hero:   clamp(2.5rem, 5.4vw, 4.5rem);    /* H1              φ³ */
  --fs-h2:     clamp(1.95rem, 3.4vw, 2.78rem);  /* H2              φ² */
  --fs-h3:     clamp(1.35rem, 2.1vw, 1.72rem);  /* H3              φ¹ */
  --fs-lead:   clamp(1.15rem, 1.6vw, 1.35rem);  /* Vorspann        √φ */
  --fs-text:   1.0625rem;                        /* Anker (17px)       */
  --fs-klein:  0.84rem;                          /* Meta            /√φ */

  /* ---- Raum & Form ---- */
  --raum-sektion: clamp(4.5rem, 9vw, 8.5rem);
  --raum-inhalt: 2.5rem;
  --breite-max: 1240px;
  --radius: 14px;         /* abgerundete Ecken — Echo der Bildmarke */
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Grafische Elemente (CD Seite 8) ---- */
  /* Spotlight: radialer Lichtschein (Orange→Lila→transparent) auf Schwarz,
     wie im CD-Handbuch selbst unten links eingesetzt */
  --spotlight: radial-gradient(ellipse 60% 50% at var(--sp-x, 15%) var(--sp-y, 100%),
               rgba(242,149,14,.14), rgba(84,2,166,.10) 45%, transparent 70%);
  /* Fading Line: Trennlinie, die zu den Enden ausläuft */
  --fading-line: linear-gradient(90deg, transparent, var(--c-linie) 20%,
                 var(--c-linie) 80%, transparent);
}

@media (min-width: 2560px) {
  :root { --breite-max: 1520px; }
}