/* ==========================================================================
   LOKALE SCHRIFTEN — ÖFFENTLICHE SEITEN (HETZNER/COOLIFY STANDARD)
   ==========================================================================
   PSYCHOLOGIE: Zero-Cookie & 100% DSGVO-Purity.

   WICHTIG FÜR LCP: Alle @font-face stehen in DIESER Datei. Kein @import-
   Wasserfall. Inter gehört nur ins Portal (fonts-portal.css). latin-ext
   ist für deutsches Standard-Alphabet nicht nötig (ÄÖÜß liegen im latin-
   Subset).

   Nur Gewichte, die den LCP/FCP-Pfad brauchen: Outfit 400/700/900 und
   Playfair 700. font-medium/semibold/extrabold fallen auf das nächste
   deklarierte Gewicht. Goldene Headline-Spans nutzen font-bold italic
   (Playfair 700, Browser synthetisiert den Kursiv-Schnitt).
   ========================================================================== */

:root {
  --font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif-fallback: Georgia, "Times New Roman", Times, serif;
}

html {
  font-family: "Outfit", var(--font-sans-fallback);
}

/* Outfit — Fließtext / UI */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/outfit/files/outfit-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("fonts/outfit/files/outfit-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url("fonts/outfit/files/outfit-latin-900-normal.woff2") format("woff2");
}

/* Playfair Display — Headlines / LCP auf Mobil */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("fonts/playfair-display/files/playfair-display-latin-700-normal.woff2") format("woff2");
}

/* Hamburger ohne Font Awesome — Menü-Icon darf nicht auf 200KB Icon-Font warten */
.icon-menu {
  display: block;
  width: 1.5rem;
  height: 1.15rem;
  position: relative;
}
.icon-menu span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
}
.icon-menu span:nth-child(1) { top: 0; }
.icon-menu span:nth-child(2) { top: 50%; margin-top: -1px; }
.icon-menu span:nth-child(3) { bottom: 0; }
.icon-menu.is-open span:nth-child(1) {
  top: 50%;
  margin-top: -1px;
  transform: rotate(45deg);
}
.icon-menu.is-open span:nth-child(2) { opacity: 0; }
.icon-menu.is-open span:nth-child(3) {
  bottom: auto;
  top: 50%;
  margin-top: -1px;
  transform: rotate(-45deg);
}