/* =========================================================
   COLOR PALETTE
   Verwendung:
   zentrale Farbwerte.
   Nur diese Farben als direkte Hex-Werte verwenden.
   ========================================================= */

:root {
  /* Primärfarbe — identisch mit Säule 02 */
  --accent-color: #a60032; /* Links, Fokus, Hyperlinks, Scroll Progress, Auswahlzustände */
  --accent-color-dark: #8c002a; /* Hover/Active der Akzentfarbe (Buttons) */

  /* Farben */
  --text-color: #232326; /* Fließtexte, Headlines */
  --text-muted: #62626b; /* Leadtexte, Beschreibungen, sekundäre Inhalte */
  --text-grey: #a5a5a5; /* Quellen, Captions, Footerinformationen */
  --text-hero-lead: #dedee3; /* Aufgehelltes Sekundärgrau für Hero-Unterzeilen auf Bildhintergründen (hoher Kontrast) */
  --text-white: #f5f5f7; /* Fließtexte, Headlines */

  /* Säulenfarben */
  --saeule01-blau: #2292cc;
  --saeule02-rot: #a60032;
  --saeule03-orange: #fab439;
  --saeule04-gruen: #95c11f;
  --saeule05-rosa: #e3599b;
  --saeule06-lila: #5458a3;

  /* Hintergrundfarben Sektionen */
  --bg-white: #ffffff; /* Hero Sections, Editorialbereiche, Hauptcontent, große Textflächen */
  --bg-grey: #f5f5f7; /* alternierende Sections, ruhige Flächenwechsel, Galerieflächen, unterstützende Inhaltszonen */
  --bg-black: #1d1d20; /* alternierende Dark Sections, visuelle Rhythmuswechsel */

  /* Basis-Neutrale (Lightmode-Default).
     Werden im Dark-/High-Contrast-Theme über html[data-theme="…"] überschrieben.
     Ohne diese Basiswerte lösen var(--white)/var(--light-gray) im hellen
     Standardtheme ins Leere auf (ungültig) — z. B. cta-Hintergrund, Rahmen. */
  --white: #ffffff;
  --off-white: #f5f5f7;
  --light-gray: #e6e6ea;

  /* Semantische Aliase & Fallbacks */
  --color-text-black: var(--text-color);
  --color-page-background: var(--white);
  --color-bg: var(--bg-white);
  --color-surface: var(--bg-white);
  --color-kollegium: var(--accent-color);
  --color-kollegium-soft: var(--light-gray);
  --color-line: var(--light-gray);
  --color-ink: var(--text-color);
}

/* Textfarben */
.text-white { color: var(--text-white) !important; }
.text-grey { color: var(--text-grey); }
.text-muted { color: var(--text-muted); }
.text-black { color: var(--text-color); }
.text-accent-color { color: var(--accent-color); }

/* Hintergrundfarben Utilities & data-bg System */
.bg-transparent,
[data-bg="transparent"],
[data-bg="bg-transparent"] {
  background-color: transparent !important;
  background: transparent !important;
}
.bg-white,
[data-bg="bg-white"] {
  background-color: var(--bg-white) !important;
}
.bg-grey,
.bg-gray,
[data-bg="bg-grey"],
[data-bg="bg-gray"] {
  background-color: var(--bg-grey) !important;
}
.bg-black,
[data-bg="bg-black"] {
  background-color: var(--bg-black) !important;
}

/* Säulen-Farben Utilities */
.bg-saeule-01 {
  background-color: var(--saeule01-blau);
}

.bg-saeule-02 {
  background-color: var(--saeule02-rot);
}

.bg-saeule-03 {
  background-color: var(--saeule03-orange);
}

.bg-saeule-04 {
  background-color: var(--saeule04-gruen);
}

.bg-saeule-05 {
  background-color: var(--saeule05-rosa);
}

.bg-saeule-06 {
  background-color: var(--saeule06-lila);
}

.text-saeule-01 {
  color: var(--saeule01-blau);
}

.text-saeule-02 {
  color: var(--saeule02-rot);
}

.text-saeule-03 {
  color: var(--saeule03-orange);
}

.text-saeule-04 {
  color: var(--saeule04-gruen);
}

.text-saeule-05 {
  color: var(--saeule05-rosa);
}

.text-saeule-06 {
  color: var(--saeule06-lila);
}