/* ===================================================================
   HKE Lausitz — Brand Overrides (Real Logo Colors)
   ===================================================================
   Lädt NACH colors_and_type.css und überschreibt die Petrol/Copper-
   Token-Werte mit den realen Logo-Farben:

   - Dark Teal  #2D9598  (linke Logo-Hälfte)
   - Light Teal #5BCDD0  (rechte Logo-Hälfte)
   - Anthrazit  #1A1A1A  (Wortmarke "HKE LAUSITZ")

   Copper bleibt als Token erhalten, wird aber visuell durch den
   Light-Teal-Akzent ersetzt — die Logo-Palette ist konsequent
   monochromatisch-teal + schwarz, ohne Kupfer.

   Die Petrol-Variablen werden zur HKE-Teal-Skala umgewidmet, damit
   bestehende Komponenten ohne Code-Änderung mitskalieren.
=================================================================== */

:root {
  /* === HKE Teal Skala (ersetzt Petrol) === */
  --hke-petrol-050: #EAF6F6;
  --hke-petrol-100: #D2EEEE;
  --hke-petrol-200: #A8DCDD;
  --hke-petrol-300: #7FCBCD;
  --hke-petrol-500: #5BCDD0;   /* Light Teal aus Logo */
  --hke-petrol-600: #3FB1B4;
  --hke-petrol-700: #2D9598;   /* Dark Teal aus Logo · Primärfarbe */
  --hke-petrol-800: #1F7A7C;
  --hke-petrol-900: #155E60;

  /* === Eyebrow / Akzent — Light Teal statt Kupfer === */
  --hke-copper-050: #EAF6F6;
  --hke-copper-100: #D2EEEE;
  --hke-copper-300: #7FCBCD;
  --hke-copper-500: #5BCDD0;
  --hke-copper-600: #3FB1B4;
  --hke-copper-700: #2D9598;

  /* === Sand Skala bleibt aus Design-System (warmes Sand). === */

  /* === Semantische Aliase aktualisieren === */
  --accent:        var(--hke-petrol-700);
  --accent-warm:   var(--hke-petrol-500);
  --bg:            var(--hke-sand-100);
  --bg-elevated:   var(--hke-paper);
  --bg-inverse:    var(--hke-petrol-900);

  /* === Display-Schrift Richtung Logo verschieben === */
  --font-display: "Outfit", "Inter Tight", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* Eyebrow-Farbe für alle bestehenden Selektoren explizit auf Dark Teal */
.eyebrow,
.hero__eyebrow,
.sect-head .eyebrow {
  color: var(--hke-petrol-700);
}

/* Display-Schrift-Tracking leicht enger (Outfit ist leicht weiter als Inter Tight) */
.hero__title,
.k-hero h1,
.sect-head h2,
.feat__copy h3,
.compare__col h3,
.reg-card h3,
.usp h3,
.quiz__q,
.quiz__title,
.svc-card h3,
.steps__panel h3,
.kb h2,
.lead-widget h3,
.reg-card--lead h3,
.countdown__date,
.mini-dash__head,
.code-card,
.login-card h3,
.quiz__done h3 {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "cv01";
}

/* "em" innerhalb von Headlines: Logo-Light-Teal als Highlight statt Copper */
.hero__title em,
.k-hero h1 em,
.sect-head h2 em {
  color: var(--hke-petrol-600);
  font-style: normal;
}