/* =============================================================================
   FuMinGo — Design-Tokens
   =============================================================================

   Einzige Quelle für Farben, Abstände, Radien, Schatten und Schriftgrößen.
   Wird vor style.css geladen.

   Regel: neue Werte HIER definieren. Rohwerte in style.css sind ein Rückschritt —
   genau daraus sind vorher 12 Grüntöne, 20 Border-Radien und 15 verschiedene
   Schatten entstanden.

   FÜNF FARBTÖNE, mehr nicht:

     Grün      die Marke — Flächen, Buttons, Links
     Gelb      genau ein Handlungsaufruf pro Ansicht
     Türkis    ausschließlich Wasser, Abkühlung, Sommeraktion
     Bernstein Warnhinweise und die Ampelstufen "feucht" / "eingeschränkt"
     Rot       Ampelstufe "geschlossen"

   Die mehreren Stufen je Farbton sind keine zusätzlichen Farben, sondern
   dieselbe Farbe heller oder dunkler. Ein Grün kann nicht gleichzeitig dunkler
   Footer, lesbarer Button und zartes Hintergrundband sein.

   ALLE Textfarben sind gegen WCAG 2.1 AA durchgerechnet (4,5:1 für Fließtext).
   Das gemessene Verhältnis steht als Kommentar dahinter. Wer einen Wert ändert,
   rechnet ihn bitte nach — vorher lagen neun Kombinationen unter dem Grenzwert,
   drei davon unter 2:1.

   Es gibt bewusst keinen Sass-Build. Diese Datei wird direkt ausgeliefert.
   ============================================================================= */

:root {

  /* --- Grün: die Marke ----------------------------------------------------- */
  --fg-green-900: #1B2A20;   /* Footer, dunkelste Fläche      weiß darauf 15,0:1 */
  --fg-green-800: #213827;   /* Seitenköpfe, dunkle Bänder    weiß darauf 12,7:1 */
  --fg-green-600: #40704A;   /* Buttons, Links, Icons         5,8:1 beidseitig   */
  --fg-green-200: #D3E0CC;   /* Ränder auf hellen Flächen                        */
  --fg-green-050: #F3F8EF;   /* helles Band                                      */

  /* --- Gelb: der Akzent ----------------------------------------------------
     Sparsam einsetzen — markiert genau eine Sache pro Ansicht: den primären
     Handlungsaufruf. Schrift darauf IMMER --fg-accent-ink, niemals weiß
     (weiß auf diesem Gelb ergibt 1,59:1). */
  --fg-accent:     #F2C94C;
  --fg-accent-ink: #4A3A0C;  /* Schrift auf Gelb                          6,96:1 */

  /* --- Türkis: Wasser, Abkühlung, Sommer -----------------------------------
     Nicht als zweite Marke verwenden. */
  --fg-teal-700: #0D6570;    /* 6,75:1 auf weiß, beidseitig                      */
  --fg-teal-050: #EDF6F7;

  /* --- Blau: aktueller Regen ------------------------------------------------
     Nur für die Stufe "Es regnet gerade". Bewusst nicht Türkis: das steht auf
     dieser Seite bereits für "feucht" und für Abkühlung. */
  --fg-blue-700: #1F5C8B;    /* 7,09:1 auf weiß, beidseitig                      */
  --fg-blue-050: #EAF2F9;

  /* --- Bernstein und Rot: Ampel und Warnungen ------------------------------
     Funktionsfarben, keine Dekoration. "gut bespielbar" nutzt das Marken-Grün. */
  --fg-warn:   #8A6410;      /* 5,37 auf weiß · 5,07 auf heller Warnfläche       */
  --fg-danger: #A83F3F;      /* 6,09 auf weiß                                    */
  --fg-warn-surface: #FFF8E8;

  /* --- Neutral ------------------------------------------------------------- */
  --fg-ink:         #242424; /* Überschriften und Fließtext          15,5:1 weiß */
  --fg-ink-muted:   #55605A; /* Sekundärtext, Hinweise    6,55 weiß · 6,08 Band  */
  --fg-line:        #DCE3D8;
  --fg-surface:     #FFFFFF;
  --fg-surface-alt: #F6F8F3;

  /* --- Radien — 3 statt 20 ------------------------------------------------- */
  --fg-r-sm:   6px;
  --fg-r-md:  12px;
  --fg-r-pill: 999px;

  /* --- Schatten — 3 Stufen, eine gemeinsame Farbbasis ---------------------- */
  --fg-shadow-1: 0 2px 8px rgba(27, 42, 32, .06);
  --fg-shadow-2: 0 10px 28px rgba(27, 42, 32, .10);
  --fg-shadow-3: 0 20px 50px rgba(27, 42, 32, .14);

  /* --- Abstände ------------------------------------------------------------ */
  --fg-s-1: .5rem;
  --fg-s-2: 1rem;
  --fg-s-3: 1.5rem;
  --fg-s-4: 2.5rem;
  --fg-s-5: 4rem;
  --fg-s-6: 6rem;

  /* --- Typografie ----------------------------------------------------------
     clamp() statt Media-Query-Kaskade: eine Deklaration statt drei Breakpoints. */
  --fg-font-heading: 'Poppins', system-ui, sans-serif;
  --fg-font-body:    'Hind', system-ui, sans-serif;

  --fg-h1:     clamp(2rem, 5vw, 3.25rem);
  --fg-h2:     clamp(1.6rem, 3.2vw, 2.25rem);
  --fg-h3:     clamp(1.25rem, 2vw, 1.5rem);
  --fg-h4:     1.15rem;
  --fg-body:   1.0625rem;
  --fg-small:  .9rem;
  --fg-kicker: .78rem;

  --fg-lh-tight: 1.2;
  --fg-lh-text:  1.7;

  /* --- Maße ----------------------------------------------------------------
     EINE Lesebreite statt der früheren sieben (650/700/760/790/840/850/960px). */
  --fg-measure: 68ch;

  /* Vertikaler Rhythmus aller Sections — ersetzt 9 konkurrierende Systeme. */
  --fg-section-y: clamp(3rem, 7vw, 6rem);

  /* Höhe der klebenden Navigation. Wird an drei Stellen gebraucht: für die
     Bildschirmhöhe des Heros, für scroll-padding-top und für scroll-margin-top
     der Sprungziele. Vorher stand die 92 zweimal als nackte Zahl im CSS. */
  --fg-nav-h: 92px;

  /* --- Bewegung ------------------------------------------------------------ */
  --fg-transition: 200ms ease;
}

/* Wer Bewegung reduziert haben möchte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  :root { --fg-transition: 1ms linear; }
}

/* =============================================================================
   Breakpoints

   CSS-Custom-Properties funktionieren in @media-Bedingungen nicht — deshalb hier
   nur als verbindliche Referenz. Es gilt ausschließlich der Bootstrap-Satz:

     sm   576px      md   768px      lg   992px      xl  1200px      xxl 1400px

   max-width-Queries IMMER auf …98px:  575.98 / 767.98 / 991.98 / 1199.98

   Grund: Bootstraps lg beginnt BEI 992px. Ein `max-width: 992px` überlappt das
   Grid um genau einen Pixel. Vorher lagen hier 16 verschiedene Bedingungen aus
   drei Systemen nebeneinander, mit Kollisionen bei 991/992, 767/768 und 1199/1200.
   ============================================================================= */