/*
 * variablen.css
 * ─────────────────────────────────────────────────────────────────
 * Zentrale CSS-Variablen für New Chapter Coaching.
 * Alle Farben, Schriften und Abstände sind hier an einem Ort gespeichert.
 * Eine Änderung hier wirkt sich sofort auf die gesamte Website aus.
 * ─────────────────────────────────────────────────────────────────
 */

:root {

  /* ═══════════════════════════════════════
     FARBEN
  ═══════════════════════════════════════ */

  /* Hauptfarben */
  --schwarz:         #000000;   /* Text, Karten, Navigation        */
  --weiss:           #FFFFFF;   /* Hintergründe, Text auf Dunkel   */

  /* Hintergründe */
  --hellgrau:        #F2F2F0;   /* Abwechselnde helle Sektionen    */
  --dunkel:          #1A1A1A;   /* Overlays auf Fotos, dunkle CTA  */

  /* Text */
  --textgrau:        #444444;   /* Standard-Fließtext              */
  --textgrau-hell:   #777777;   /* Sekundärer Text, Metainfos      */

  /* Trennlinien */
  --trennlinie:      #D9D9D9;   /* Dünne Linien im Footer          */
  --trennlinie-hell: #EBEBEB;   /* Noch feinere Trennlinien        */

  /* Transparenzen (für Overlays auf Fotos) */
  --overlay-dunkel:  rgba(0, 0, 0, 0.55);
  --overlay-tief:    rgba(0, 0, 0, 0.70);

  /* Weißer Text mit Deckkraft (auf dunklem Hintergrund) */
  --weiss-60:        rgba(255, 255, 255, 0.60);
  --weiss-80:        rgba(255, 255, 255, 0.80);


  /* ═══════════════════════════════════════
     SCHRIFTARTEN
  ═══════════════════════════════════════ */

  --font-schreibschrift: 'Alex Brush',         cursive;   /* Dekorative Seitentitel    */
  --font-serif:          'Cormorant Garamond', serif;     /* Große Überschriften       */
  --font-sans:           'Montserrat',         sans-serif; /* Text, Navigation, Buttons */


  /* ═══════════════════════════════════════
     SCHRIFTGRÖSSEN
  ═══════════════════════════════════════ */

  /* Mobil (Basis) */
  --fs-label:    10px;   /* Kategorie-Labels (sehr klein, gesperrt)  */
  --fs-button:   11px;   /* Buttons, CTAs                            */
  --fs-klein:    13px;   /* Footer-Links, Metainfos                  */
  --fs-text:     15px;   /* Standard-Fließtext                       */
  --fs-text-l:   17px;   /* Größerer Fließtext                       */
  --fs-h3:       20px;   /* H3, Unterüberschriften                   */
  --fs-h2:       26px;   /* H2, Zwischentitel                        */
  --fs-h1:       32px;   /* H1, Seitenüberschriften                  */
  --fs-display:  44px;   /* Große Statement-Überschriften            */
  --fs-script:   52px;   /* Handschrift-Seitentitel                  */
  --fs-hero:     36px;   /* Hero-Überschriften auf Fotos             */


  /* ═══════════════════════════════════════
     BUCHSTABENABSTAND (Letter Spacing)
  ═══════════════════════════════════════ */

  --ls-navigation: 0.15em;   /* Navigationslinks                    */
  --ls-label:      0.20em;   /* Kategorie-Labels                    */
  --ls-button:     0.12em;   /* Button-Text                         */
  --ls-logo:       0.18em;   /* Text-Logo "NADINE GUMBALL"          */


  /* ═══════════════════════════════════════
     ABSTÄNDE
  ═══════════════════════════════════════ */

  /* Seitliche Außenabstände */
  --aussen-mobil:   20px;
  --aussen-tablet:  40px;
  --aussen-desktop: 60px;

  /* Vertikale Sektionsabstände (innen) */
  --sektion-y-s:  40px;   /* Mobil                                  */
  --sektion-y-m:  70px;   /* Tablet                                 */
  --sektion-y-l: 100px;   /* Desktop                                */

  /* Abstände zwischen Elementen */
  --gap-s:   16px;   /* Klein: zwischen Label und Titel             */
  --gap-m:   24px;   /* Mittel: zwischen Absätzen, zwischen Karten  */
  --gap-l:   48px;   /* Groß: zwischen Sektionselementen            */
  --gap-xl:  64px;   /* Sehr groß: zwischen großen Spalten          */


  /* ═══════════════════════════════════════
     LAYOUT
  ═══════════════════════════════════════ */

  --max-breite:   960px;    /* Maximale Inhaltsbreite (zentriert)   */
  --header-hoehe: 70px;     /* Höhe der Navigationsleiste           */


  /* ═══════════════════════════════════════
     ÜBERGÄNGE (Hover-Animationen)
  ═══════════════════════════════════════ */

  --transition-standard: 0.2s ease;
  --transition-langsam:  0.35s ease;


  /* ═══════════════════════════════════════
     SCHATTEN
  ═══════════════════════════════════════ */

  --schatten-karte:  0 2px 16px rgba(0, 0, 0, 0.08);
  --schatten-header: 0 1px 0 var(--trennlinie);
}