/* onfyr.de — Design-Tokens (23.09.2026)
   Quelle: Marke ONFYR (Wortmarke mit Gold-Flamme, Entwurf onfyr.de/web vom Sommer 2026).
   Eigenständiges System — kein Abbild von pxmedia.de. Ein Akzent (Gold), zwei Schriften
   (Cormorant Garamond für Überschriften, passend zur Serifen-Wortmarke; Outfit für Text). */

:root {
  /* ---- Farben ---- */
  --c-carbon:    #111A1C;   /* Grundfläche */
  --c-nacht:     #0C1416;   /* tiefste Fläche (Fuß, Bühnenrand) */
  --c-teal:      #1B3A3F;   /* Flächen, Karten, Bühne */
  --c-teal-2:    #2E5A61;   /* Hover, Linien, zweiter Verlaufston */
  --c-teal-hell: #E4EEF0;   /* helle Sektion (Förderung) */
  --c-gold:      #CA9E67;   /* EINZIGER Akzent: Flamme, Knöpfe, Hervorhebung. Auf Carbon 7,3:1 */
  --c-gold-dunkel:#8A6A3A;  /* Gold auf hellem Grund (Text auf Teal-hell 4,6:1), Ränder */
  --c-gold-hell: #E3C9A3;   /* Glut-Kern, Hover auf Gold */
  --c-stein:     #C8C2B8;   /* Sekundärtext auf Dunkel (10:1) */
  --c-warm:      #F5F1EB;   /* Text auf Dunkel, helle Flächen */
  --c-text:      var(--c-warm);
  --c-text-2:    var(--c-stein);
  --c-linie:     rgba(245,241,235,.14);
  --c-dunkel-text: #111A1C; /* Text auf Gold und auf Teal-hell */
  --c-dunkel-text-2: #2E5A61;

  /* ---- Typografie ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino", Georgia, serif;
  --font: "Outfit", -apple-system, "Segoe UI", Arial, sans-serif;
  --fw-headline: 600;
  --fw-text: 400;

  /* Modulare Skala (φ = 1,618), Anker 1.0625rem */
  --fs-riesig: clamp(3.4rem, 9vw, 7.6rem);
  --fs-hero:   clamp(2.6rem, 5.6vw, 4.8rem);
  --fs-h2:     clamp(2rem, 3.6vw, 3rem);
  --fs-h3:     clamp(1.4rem, 2.2vw, 1.85rem);
  --fs-lead:   clamp(1.12rem, 1.6vw, 1.32rem);
  --fs-text:   1.0625rem;
  --fs-klein:  0.84rem;

  /* ---- Raum & Form ---- */
  --raum-sektion: clamp(4.5rem, 9vw, 8.5rem);
  --breite-max: 1200px;
  --radius: 12px;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --fading-line: linear-gradient(90deg, transparent, var(--c-linie) 20%, var(--c-linie) 80%, transparent);
}
@media (min-width: 2560px) { :root { --breite-max: 1480px; } }

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/CormorantGaramond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/CormorantGaramond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/CormorantGaramond-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/Outfit-300.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/Outfit-400.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/Outfit-600.ttf") format("truetype"); }