/* Farben. Farbwelt wie diepixelmacher (Lars Neu Design System): Weiß und Hellgrau
   als Flächen, Graphit für Text und Aktion. Türkis ist der Akzent (Linien, Punkte,
   aktive Zustände, Fokus) und der Textmarker. Magenta bleibt dem Schild „Fachabteilung“.
   Die Untermarke Pixelmotion hat eine eigene dunkle Farbwelt mit Ocker (unten).
   Graphit und Hellgrau sind Bildschirmfarben aus dem Design System; ihre
   CMYK-Werte für den Druck sind noch festzulegen. */
:root{
  /* Primär */
  --color-graphit:#1B1E27;
  --color-hellgrau:#F5F5F7;
  --cmyk-weiss:"C0 M0 Y0 K0"; /* @kind other */
  --color-weiss:#FFFFFF;

  /* Magenta — Prozess-Magenta für das Schild „Fachabteilung“; weiße Schrift
     darauf erreicht 4,5:1. Die hellere Stufe ist die Magenta-Variante des
     Textmarkers (Graphit darauf ebenfalls 4,5:1). */
  --cmyk-magenta:"C0 M100 Y0 K0"; /* @kind other */
  --color-magenta:#E5007D;
  --color-magenta-hell:#EC3D9A;

  /* Akzent Türkis wie bei diepixelmacher. Hell: auf Dunkel und als Fläche unter
     Graphit (7,9:1). Tief: Linien, Punkte und große Schrift auf Hell (3:1).
     Text: Links und kleine Schrift auf Hell (5:1). */
  --color-tuerkis:#5CC3C0;
  --color-tuerkis-tief:#2A9D99;
  --color-tuerkis-text:#127571;
  --color-akzent:var(--color-tuerkis-tief);
  --color-akzent-text:var(--color-tuerkis-text);

  /* Ocker für Pixelmotion (Untermarke für Videoproduktion), vom Inhaber vorgegeben (#F79321).
     Ocker: auf Dunkel (8,4:1) und als Fläche unter Graphit (7,3:1); weiße Schrift darauf nie.
     Hell: Hover auf ockerfarbenen Flächen (Graphit darauf 9:1). Tief: ockerfarbene Schrift auf
     Weiß oder Hellgrau (5,2:1). */
  --color-ocker:#F79321;
  --color-ocker-hell:#FFAD4D;
  --color-ocker-tief:#9C5400;

  /* Abstufungen Graphit */
  --color-graphit-80:#6B6F7B;
  --color-graphit-40:#D2D2D8;
  --color-graphit-10:#EBEBEF;

  /* Semantische Aliase */
  --text-heading:var(--color-graphit);
  --text-body:var(--color-graphit);
  --text-muted:var(--color-graphit-80);
  --text-on-dark:var(--color-weiss);
  --text-on-dark-muted:#A1A3AC;
  --text-accent:var(--color-graphit);
  --text-on-accent:var(--color-graphit);

  --surface-page:var(--color-weiss);
  --surface-muted:var(--color-hellgrau);
  --surface-inset:var(--color-graphit-10);
  --surface-card:var(--color-weiss);
  --surface-inverse:var(--color-graphit);
  --surface-secondary:var(--color-graphit-80);
  --surface-accent:var(--color-tuerkis);
  --marker:var(--color-tuerkis); /* Textmarker; Graphit darauf 7,9:1 */

  --border-default:#E3E3E8;
  --border-strong:var(--color-graphit-40);
  --border-inverse:#3A3B43;

  --state-hover-dark:#30343F;     /* Graphit aufgehellt, kein Farbwechsel */
  --state-hover-light:var(--color-graphit-10);
  --state-disabled-fill:var(--color-graphit-10);
  --state-disabled-text:#A1A3AC;
  --state-focus:var(--color-tuerkis-tief);

  /* Dunkle Abschnitte wie das Beamer-Thema bei diepixelmacher */
  --surface-dunkel:#0E0F13;
  --surface-dunkel-karte:#1B1C21;
  --text-on-dunkel-muted:#A1A3AC;
  --border-dunkel:#2C2D34;

  /* Fixierte Kopfzeile: leichtes Glas */
  --glas:rgba(255,255,255,0.82);
  --blur-glas:saturate(160%) blur(16px); /* @kind other */
}

/* Farbwelt Pixelmotion: dunkel wie ein Schneideraum, Akzent und Textmarker Ocker, Buttons
   ocker mit Graphit. Gilt auf Seiten mit <html data-marke="pixelmotion">. */
:root[data-marke="pixelmotion"]{
  --color-akzent:var(--color-ocker);
  --color-akzent-text:var(--color-ocker);
  --marker:var(--color-ocker);
  --state-focus:var(--color-ocker);

  --text-heading:var(--color-weiss);
  --text-body:#E4E5EA;
  --text-muted:#A1A3AC;
  --text-on-dark:var(--color-graphit); /* Schrift auf ockerfarbenen Buttons */

  --surface-page:var(--surface-dunkel);
  --surface-muted:#15161B;
  --surface-card:var(--surface-dunkel-karte);
  --surface-inset:#24252C;
  --surface-inverse:var(--color-ocker);
  --state-hover-dark:var(--color-ocker-hell);
  --state-hover-light:#24252C;
  --state-disabled-fill:#24252C;
  --state-disabled-text:#8C8E97;

  --border-default:var(--border-dunkel);
  --border-strong:#4A4C55;
  --glas:rgba(14,15,19,0.78);
}