/* Lokale Webfonts (DSGVO-freundlich): ersetzt Google Fonts Einbindungen.
   Font-Dateien liegen unter /fonts/**

   Best Practice:
   - WOFF2 als primär (Performance)
   - font-display: swap (Lighthouse Empfehlung; verhindert "invisible text")
   - gute System-Fallbacks, um Layout-Shifts zu reduzieren
*/

:root {
  /* Sans-Stack: gute System-Fallbacks (ähnliche Metriken, gute Verfügbarkeit) */
  --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Liberation Sans', sans-serif;

  /* Script/Display-Fallback */
  --font-script: 'Mr Dafoe', 'Brush Script MT', 'Segoe Script', cursive;
}

/* ============ LATO (latin) ============ */

/* Lato - Thin (100) -> wird in style.css für h1 verwendet */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-100.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-100italic.woff2') format('woff2');
}

/* Lato - Light (300) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-300italic.woff2') format('woff2');
}

/* Lato - Regular (400) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-italic.woff2') format('woff2');
}

/* Lato - Bold (700) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato/lato-v25-latin-700italic.woff2') format('woff2');
}

/* ============ MR DAFOE ============ */
@font-face {
  font-family: 'Mr Dafoe';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('../fonts/mr-dafoe/mr-dafoe-v15-latin-regular.woff2') format('woff2'),
    url('../fonts/mr-dafoe/mr-dafoe-v15-latin-regular.ttf') format('truetype');
}

/* Globale Anwendung via Variablen (ohne in style.css alles umzuschreiben) */
html, body {
  font-family: var(--font-sans);
}

.banner .headline .banner-headline {
  font-family: var(--font-script);
}

/* Optional (falls später wieder genutzt): Yellowtail lokal ergänzen.
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/yellowtail/yellowtail-v18-latin-regular.woff2') format('woff2');
}
*/