/* ==========================================================================
   Lea Urban — Brand Tokens & Fonts  (single source of truth)
   Pro Kunde EINE brand/. Hier stecken Farben, Schriften, (Logos in logos/).
   Palette: Teal/Petrol, warm & ruhig. Keine Neon-/Pastell-Verläufe.
   Fonts: lokal gehostet (DSGVO-konform, kein Google-CDN-Call beim Besucher).
   ========================================================================== */

/* ---- Headings: Josefin Sans (Variable, deckt 300/400/600) ---------------- */
@font-face {
  font-family: 'Josefin Sans';
  src: url('fonts/JosefinSans-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('fonts/JosefinSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('fonts/JosefinSans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Body: Didact Gothic ------------------------------------------------- */
@font-face {
  font-family: 'Didact Gothic';
  src: url('fonts/DidactGothic-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Akzent/Zitate: Newsreader (kursiv) ---------------------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-400italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-500italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Brand palette (Teal/Petrol) — wie im Design verwendet ------- */
  --teal-dark:    #004D54;   /* Titelflächen, Footer-BG, H1/H2/H3 */
  --teal-primary: #009AA3;   /* Akzent: Buttons, Links, Tags, Linien */
  --teal-light:   #CAE7E9;   /* helle Akzentfläche */
  --teal-xlight:  #e8f5f6;   /* Sektions-Hintergrund (zebra), FAQ-Antwort */
  --white:        #FFFFFF;
  --text:         #2a2a2a;   /* Fließtext */
  --text-light:   #555;      /* Meta, Sekundärtext */

  /* Derived hover step (Buttons gehen im Design auf teal-dark) */
  --teal-primary-hover: #007a82;

  /* ---------- Kit-Standard-Aliase (Konvention; Design nutzt --teal-*) ----- */
  --color-primary-orange:   var(--teal-primary);  /* „Akzent" der Marke */
  --color-primary-darkblue: var(--teal-dark);     /* „Tief/Dunkel" der Marke */
  --color-text:             var(--text);
  --color-text-footer:      #374151;
  --color-text-muted:       var(--text-light);
  --color-bg:               var(--white);
  --color-bg-soft:          var(--teal-xlight);
  --color-bg-zebra:         var(--teal-xlight);
  --color-border:           rgba(0,155,163,0.18);

  /* ---------- Type families --------------------------------------------- */
  --font-heading: 'Josefin Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Didact Gothic', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-accent:  'Newsreader', Georgia, 'Times New Roman', serif;
}

/* ==========================================================================
   Semantische Basis (von page.css verfeinert). Headings = Josefin Sans,
   Body = Didact Gothic — wie im Design.
   ========================================================================== */
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.75;
  font-size: 17px;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--teal-dark);
  letter-spacing: 0.08em;
}