/* ==========================================================================
   MC FAHRSCHULE – DESIGN SYSTEM / TOKENS
   --------------------------------------------------------------------------
   Das ist die EINZIGE Datei, in der Farben, Abstände und Schriftgrößen
   definiert werden. Wenn du das Aussehen der Seite ändern willst
   (z.B. anderes Orange), änderst du es HIER – und es gilt überall.

   Bitte in den anderen CSS-Dateien NIE feste Werte wie "#ff6b00" oder
   "24px" schreiben, sondern immer die Variablen: var(--c-accent), var(--sp-6)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. FARBEN – Basis Dunkelgrau, Akzent Orange
     ------------------------------------------------------------------ */

  /* Hintergründe (von dunkel nach heller gestuft) */
  --c-bg:            #0E1012;  /* Seitenhintergrund, fast schwarz         */
  --c-surface:       #16191D;  /* Karten, Boxen                           */
  --c-surface-2:     #1F242A;  /* Hervorgehobene Karten, Hover-Zustand    */
  --c-surface-3:     #2A3037;  /* Inputs, Badges                          */

  /* Helle Sektionen (für Abwechslung, z.B. Preisseite) */
  --c-bg-light:      #F4F5F7;
  --c-surface-light: #FFFFFF;

  /* Text */
  --c-text:          #F7F8F9;  /* Überschriften, wichtiger Text           */
  --c-text-muted:    #A3ACB6;  /* Fließtext, sekundäre Infos              */
  --c-text-subtle:   #949EAA;  /* Labels, Bildunterschriften, Footer      */
                             /* Heller als ursprünglich geplant, damit  */
                             /* der Kontrast überall über 4,5:1 liegt   */
  --c-text-invert:   #14171A;  /* Text auf hellem Hintergrund             */

  /* Akzentfarbe Orange – übernommen von eurer bisherigen Website (#EE761D) */
  --c-accent:        #EE761D;
  --c-accent-hover:  #F58F42;  /* Buttons beim Drüberfahren               */
  --c-accent-press:  #D2620E;  /* Buttons beim Klicken                    */
  --c-accent-soft:   rgba(238, 118, 29, 0.13); /* Zarte Flächen/Badges    */
  --c-accent-glow:   rgba(238, 118, 29, 0.38); /* Schein unter Buttons    */

  /* Linien & Rahmen */
  --c-border:        rgba(255, 255, 255, 0.09);
  --c-border-strong: rgba(255, 255, 255, 0.18);

  /* Statusfarben (Formular-Validierung, Häkchen in Preistabellen) */
  --c-success:       #2FBF71;
  --c-error:         #FF4D4D;

  /* Verläufe */
  --grad-accent:     linear-gradient(135deg, #F58F42 0%, #EE761D 55%, #D2620E 100%);
  --grad-fade-top:   linear-gradient(180deg, rgba(14,16,18,0) 0%, var(--c-bg) 100%);


  /* ------------------------------------------------------------------
     2. TYPOGRAFIE
     ------------------------------------------------------------------
     System-Schriften: laden blitzschnell, sehen auf iPhone/Mac aus wie
     bei Apple. Willst du später eine eigene Schrift (z.B. "Inter"),
     tauschst du nur --font-sans aus.
     ------------------------------------------------------------------ */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrößen – "fluid": passen sich stufenlos an die Bildschirmbreite an.
     clamp(MIN, WUNSCH, MAX) → nie kleiner als MIN, nie größer als MAX. */
  --fs-hero:  clamp(2.75rem, 1.2rem + 7vw,   5.75rem); /* Hero-Headline    */
  --fs-h1:    clamp(2.25rem, 1.3rem + 4vw,   3.75rem); /* Seitentitel      */
  --fs-h2:    clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); /* Abschnittstitel  */
  --fs-h3:    clamp(1.25rem, 1.0rem + 1.0vw, 1.625rem);/* Kartentitel      */
  --fs-lead:  clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);/* Einleitungstext */
  --fs-body:  1rem;                                    /* Fließtext 16px   */
  --fs-sm:    0.9375rem;                               /* 15px             */
  --fs-xs:    0.8125rem;                               /* 13px, Labels     */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:   1.08;  /* große Headlines            */
  --lh-snug:    1.25;  /* mittlere Überschriften     */
  --lh-normal:  1.65;  /* Fließtext, gut lesbar      */

  /* Buchstabenabstand: große Schrift enger, Kleintext weiter (Apple-Trick) */
  --ls-tight:  -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.08em;  /* für Kleinbuchstaben-Labels in GROSSBUCHSTABEN */


  /* ------------------------------------------------------------------
     3. ABSTÄNDE – eine 4px-Skala, damit alles im Raster sitzt
     ------------------------------------------------------------------ */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-9:  6rem;      /* 96px */
  --sp-10: 8rem;      /* 128px */

  /* Vertikaler Abstand zwischen zwei Seiten-Abschnitten (mobil kleiner) */
  --section-y: clamp(var(--sp-8), 6vw, var(--sp-10));


  /* ------------------------------------------------------------------
     4. LAYOUT
     ------------------------------------------------------------------ */
  --container:      1200px;  /* max. Breite des Inhalts                  */
  --container-nar:  820px;   /* schmaler Textblock (FAQ, Impressum)      */
  --gutter:         clamp(var(--sp-4), 4vw, var(--sp-6)); /* Seitenrand   */
  --header-h:       72px;    /* Höhe der Navigationsleiste               */


  /* ------------------------------------------------------------------
     5. ECKEN, SCHATTEN, EFFEKTE
     ------------------------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;   /* runde Buttons / Badges */

  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --sh-md: 0 12px 32px rgba(0, 0, 0, 0.38);
  --sh-lg: 0 28px 64px rgba(0, 0, 0, 0.5);
  --sh-accent: 0 10px 30px -8px var(--c-accent-glow);

  --blur-nav: saturate(180%) blur(20px);  /* Milchglas-Effekt der Navi */


  /* ------------------------------------------------------------------
     6. ANIMATION – dezent, aber wertig
     ------------------------------------------------------------------ */
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   600ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);   /* weiches Ausrollen  */
  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);      /* "Apple"-Kurve      */


  /* ------------------------------------------------------------------
     7. EBENEN (z-index) – damit sich nichts gegenseitig überdeckt
     ------------------------------------------------------------------ */
  --z-base:    1;
  --z-sticky:  100;   /* Header            */
  --z-overlay: 200;   /* Mobile-Menü       */
  --z-modal:   300;
}

/* --------------------------------------------------------------------------
   BARRIEREFREIHEIT: Wer im Betriebssystem "Bewegung reduzieren" aktiviert
   hat, bekommt keine Animationen. Bitte nicht entfernen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}