/* onfyr.de — Design-Tokens nach CD-Manual v2.1 (Paul, Oktober 2026; Umstellung 21.10.2026, Zettel UPDATE_2026-10-21_ONFYR-CD-v2.1-Website.md).
   Quelle: cd/2026-10-09_ONFYR-CD_v2.1_Micha/ (Manual S. 05–10, ONFYR_tokens_v2.1.json). Prinzip „kontrollierte Zündung“:
   Dunkel heißt Markengrün (Teal 900, Tiefgrün) — kein Carbon, Grau oder Schwarz als Fläche; Champagner-Gold ist der einzige Akzent.
   Zwei Schriften: Minion (Wortmarke, H1, H2 — Adobe Fonts) und Outfit (alles andere). Die alten Namen (--c-carbon, --c-nacht,
   --c-teal-hell, --c-gold-dunkel, --c-gold-hell) bleiben als Aliasse, zeigen aber auf die CD-Werte. Fassung 23.09.2026: tokens.css.bak-20261021-cd. */

:root {
  /* ---- Markengrün ---- */
  --c-teal:      #1B3A3F;   /* Dark Teal 900: Kacheln, Fuß, Headlines auf Hell, Text auf Gold */
  --c-teal-800:  #23484D;   /* Sprechblase, zweite Kachelebene */
  --c-teal-2:    #2E5A61;   /* Teal 700: Hover, Linien */
  --c-tief:      #0D1F22;   /* Tiefgrün: Seitengrund der Website, Tiefe im Verlauf */
  --c-licht:     #3B504C;   /* Teal hell: Licht im Verlauf (Print/Video) */
  --c-grund-oben:#16302F;   /* oberer Ton des Seitengrund-Verlaufs (Manual S. 10) */

  /* ---- Champagner-Gold ---- */
  --c-gold:      #CA9E67;   /* Gold 500: Flamme, Akzentwort, Linien, CTA — nie als Schrift auf Hell. Auf Tiefgrün 7,0:1, auf Teal 900 5,0:1 */
  --c-gold-800:  #735226;   /* Gold 800: Schrift auf Hell (Claim, Kicker), 6,3:1 auf Warm White */
  --c-gold-700:  #896639;
  --c-gold-300:  #E2C5A2;   /* Hover auf Gold, Glut-Kern */

  /* ---- Neutral ---- */
  --c-warm:      #F5F1EB;   /* Warm White: Text auf Dunkel, Grund im Hell-Modus */
  --c-stein:     #C8C2B8;   /* Stone: Sekundärtext auf Dunkel (6,9:1 auf Teal 900), Rahmen/Trenner im Hell-Modus */
  --c-hell:      #F5F1EB;   /* Grund der hellen Sektion (Förderung) */
  --c-hell-text: #1A1714;   /* Fließtext auf Hell — nie #000000 */
  --c-hell-text-2:#5A5450;  /* Sekundärtext auf Hell (6,6:1) */

  /* ---- Rollen ---- */
  --c-text:      var(--c-warm);
  --c-text-2:    var(--c-stein);
  --c-linie:     rgba(245,241,235,.14);     /* Struktur-Trenner auf Dunkel (Kopf, Listen) */
  --c-kante:     rgba(202,158,103,.22);     /* feine Gold-Kante der Kacheln (Manual S. 07) */
  --c-kachel:    var(--c-teal);             /* Kacheln/Karten: Teal 900 deckend auf dem Tiefgrün-Verlauf */
  --c-dunkel-text:  var(--c-tief);          /* Text AUF Gold (Knöpfe, Etiketten): Tiefgrün, 6,96:1 (Teal 900 wären nur 5,0:1) */
  --c-dunkel-text-2:var(--c-hell-text-2);
  /* Aliasse der Fassung 23.09. — zeigen auf die CD-Werte, damit Kern-Anbindung und Unterseiten ohne Umbau mitziehen */
  --c-carbon:    var(--c-tief);
  --c-nacht:     var(--c-tief);
  --c-teal-hell: var(--c-hell);
  --c-gold-dunkel:var(--c-gold-800);
  --c-gold-hell: var(--c-gold-300);

  /* ---- Semantik (Formulare, Manual S. 05) ---- */
  --c-erfolg:    #2F8F5B;
  --c-warnung:   #D98C2B;
  --c-fehler:    #B5503A;
  --c-info:      #4A7FA0;

  /* ---- Seitengrund: Gold-Glut oben links läuft in Tiefgrün (Manual S. 08/10) — nur als Hintergrund, nie hinter Logo, Flamme oder CTA ---- */
  /* Manual S. 10 nennt 95 % × 60 % mit .42/.17 — an der hellsten Stelle trägt das keinen Text (Warm White 5,8:1, Stone 3,5:1). Nach der
     Kontrastregel desselben Manuals (S. 08: Fließtext ≥ 7:1 an der hellsten Stelle) ist die Glut hier auf die obere Ecke begrenzt (22 % Höhe, .30/.10):
     unter dem Kopf, wo Overline und H1 beginnen (y ≥ 150 px), liegt sie unter 5 % Gold → Warm White ≥ 10:1, Gold 500 ≥ 4,6:1. */
  --grund: radial-gradient(70% 22% at 12% 0%, rgba(202,158,103,.30), rgba(202,158,103,.10) 38%, transparent 75%),
           linear-gradient(180deg, var(--c-grund-oben), var(--c-tief) 38%);

  /* ---- Typografie (Manual S. 06) ---- */
  /* H1/H2: Minion Pro Display Regular über Adobe Fonts (Kit sjw7jsx); Fallback Cormorant Garamond lokal mit size-adjust, dann Georgia */
  --font-display: "minion-pro-display", "Minion Ersatz", "Cormorant Garamond", Georgia, serif;
  --font: "Outfit", -apple-system, "Segoe UI", Arial, sans-serif;   /* 300 · 400 · 500 · 600, eine variable Datei */
  --fw-headline: 400;     /* Minion nur Regular — nie kursiv, nie fett */
  --fw-text: 400;

  /* Größen: H1 40–56 px · H2 28–34 px · H3 20–24 px · Body L 18 px · Body 16 px · Overline/Label 11–12 px */
  --fs-riesig: clamp(2.5rem, 4vw, 3.5rem);
  --fs-hero:   clamp(2.5rem, 4vw, 3.5rem);
  --fs-h2:     clamp(1.75rem, 2.6vw, 2.125rem);
  --fs-h3:     clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead:   1.125rem;
  --fs-text:   1rem;
  --fs-klein:  0.84rem;     /* Kleintext, Hinweise, Kern-Dialog (unverändert 13,4 px) */
  --fs-overline: 0.75rem;   /* Overline, Label, Chips (Manual: 11–12 px) */

  /* ---- Raum & Form ---- */
  --raum-sektion: clamp(4.5rem, 9vw, 8.5rem);
  --breite-max: 1200px;
  --radius: 10px;                                   /* Kacheln 8–10 px */
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);          /* Standard-Easing des CD (Manual S. 09) */
  --fading-line: linear-gradient(90deg, transparent, var(--c-linie) 20%, var(--c-linie) 80%, transparent);
}
/* Große Bildschirme (Ansage Michael 25.09.2026: Platz ideal nutzen): Das Layout ist rem-/ch-basiert, deshalb wächst es
   proportional über die Wurzelschrift; dazu breitere Inhaltsspalten. Stufen: FHD-Monitore ab 1900 px, 4K/Ultrawide ab 2300 px. */
@media (min-width: 1900px) { html { font-size: 18px; } :root { --breite-max: 1400px; } }
@media (min-width: 2300px) { html { font-size: 20px; } :root { --breite-max: 1640px; } }
@media (min-width: 3000px) { html { font-size: 24px; } :root { --breite-max: 1960px; } }

/* Minion kommt aus dem Adobe-Fonts-Kit (Link in der Vorlage). Fallback: Cormorant Garamond lokal, per size-adjust auf Minions
   Laufweite gebracht, damit die Zeilen beim Nachladen nicht springen (Manual S. 10). */
@font-face { font-family: "Minion Ersatz"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 110%; src: url("../assets/fonts/CormorantGaramond-500.woff2") format("woff2"); }
@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: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/CormorantGaramond-600.woff2") format("woff2"); }
/* Outfit als EINE variable Datei (OFL, aus dem CD-Paket 04_Schriften): 300 Light · 400 Regular · 500 Medium · 600 SemiBold */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../assets/fonts/Outfit-Variable.ttf") format("truetype"); }