/* ============================================================================
   MARA VITAL — Design-Tokens
   Ziel auf der Box: wp-content/themes/shoptimizer-child-theme/tokens.css
   Wird als ERSTE Stildatei geladen (siehe functions.php, Prioritaet 1).

   Grundlage: DESIGN-GUIDE.md, Fassung 3 vom 2026-09-08.
   Die vier Anker (#00202D, #00374D, #8B2C1F, #2C2D33) und die Flaechen
   (#F8F8F8, #E2E2E2, #5A6675) stammen aus der flaechengewichteten Messung
   der Live-Seite und duerfen sich NICHT verschieben — Kunden erkennen sie.
   Alle Zwischenstufen sind in CIE-Lab interpoliert.

   Regel: Ab hier steht im CSS kein Hex-Wert mehr. Jeder neue Hex-Wert ist
   ein sichtbarer Regelbruch.
   ========================================================================== */

:root {

  /* ---- Petrol — Struktur und Marke ------------------------------------- */
  --mv-petrol-900: #00202D;   /* Anker  Footer-Band                         */
  --mv-petrol-800: #002B3D;   /*        dunkle Baender, Hover auf 900       */
  --mv-petrol-700: #00374D;   /* Anker  Navigation, Titel, Preise, Badges   */
  --mv-petrol-600: #264B5F;   /*        Hover auf 700, sekundaere Rahmen    */
  --mv-petrol-500: #4B6779;   /*        Icons, Meta auf Petrol-Grund        */
  --mv-petrol-400: #788C9A;   /*        Flaechen und Icons — KEIN Text      */
  --mv-petrol-300: #A9B5BE;
  --mv-petrol-200: #D2D8DD;   /*        Rahmen hervorgehobener Karten       */
  --mv-petrol-100: #EBEEF0;   /*        Infoflaechen, aktive Filter         */
  --mv-petrol-50:  #F7F8F9;

  /* ---- Rost — ausschliesslich Handlung --------------------------------- */
  --mv-rost-800:   #680E06;   /*        aktiv / gedrueckt                   */
  --mv-rost-700:   #742217;   /* Anker  Hover                               */
  --mv-rost-600:   #8B2C1F;   /* Anker  DIE Handlungsfarbe                  */
  --mv-rost-500:   #A35040;   /*        Rost auf dunklem Grund              */
  --mv-rost-200:   #EDD5CF;   /*        Rahmen von Hinweisflaechen          */
  --mv-rost-100:   #F8EDEB;   /*        Flaeche von Hinweisen und Fehlern   */

  /* ---- Neutral — zum Petrol hin getoent -------------------------------- */
  --mv-n-900:      #2C2D33;   /* Anker  Fliesstext, Ueberschriften          */
  --mv-n-800:      #393E47;
  --mv-n-700:      #4D5561;
  --mv-n-600:      #5A6675;   /* Anker  Sekundaertext, Meta, deaktiviert    */
  --mv-n-500:      #818A96;   /*        Platzhalter — KEIN Lesetext         */
  --mv-n-400:      #A0A6AF;
  --mv-n-300:      #C6C9CE;   /*        Formularrahmen                      */
  --mv-n-200:      #E2E2E2;   /* Anker  Standardlinie, Tabellen             */
  --mv-n-100:      #F3F3F3;   /*        Zebrastreifen, Eingabefelder        */
  --mv-n-50:       #F8F8F8;   /* Anker  die ruhige zweite Flaeche           */
  --mv-weiss:      #FFFFFF;

  /* Ab Stufe 500 aufwaerts traegt keine Neutralstufe mehr Lesetext.        */

  /* ---- Signal ---------------------------------------------------------- */
  --mv-erfolg:        #0F834D;  /* Text und Flaeche, AA auf weiss (4,80)    */
  --mv-warnung:       #EE9E13;  /* NUR Flaeche und Icon — als Text 2,20     */
  --mv-warnung-text:  #8A5A00;  /* Warnungstext, AA auf weiss (5,93)        */
  /* Fehler hat KEINE eigene Farbe: ein uebliches Fehlerrot (#B3261E) hat
     gegen --mv-rost-600 nur Kontrast 1,30 und ist nicht unterscheidbar.
     Fehler = Flaeche --mv-rost-100, Rand links 3px --mv-rost-700,
     Text --mv-n-900, Icon immer vorhanden. Form statt Farbton.            */

  /* ---- Marke ----------------------------------------------------------- */
  --mv-logo-tinte: #12100B;   /* eigener Wert des Logo-SVG, warmes Schwarz.
                                 NUR fuer die Wortmarke. Auf dunklem Grund
                                 nutzt das SVG currentColor = weiss.        */

  /* ---- Geltech — Fremdmarke, nur in Geltech-Produktinhalten ------------ */
  --mv-geltech:      #5C8ABC;
  --mv-geltech-dark: #335579;

  /* ---- Rollen ---------------------------------------------------------- */
  --mv-grund:        var(--mv-weiss);
  --mv-flaeche:      var(--mv-n-50);
  --mv-text:         var(--mv-n-900);
  --mv-text-sek:     var(--mv-n-600);
  --mv-linie:        var(--mv-n-200);
  --mv-linie-stark:  var(--mv-petrol-200);
  --mv-struktur:     var(--mv-petrol-700);
  --mv-aktion:       var(--mv-rost-600);
  --mv-aktion-hover: var(--mv-rost-700);
  --mv-aktion-aktiv: var(--mv-rost-800);

  /* ---- Schrift --------------------------------------------------------- */
  --mv-aus:  "Jost", -apple-system, "Segoe UI", Arial, sans-serif;
  --mv-werk: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --mv-w-regular:  400;
  --mv-w-medium:   500;   /* nur Jost */
  --mv-w-semibold: 600;   /* nur Open Sans */
  --mv-w-bold:     700;   /* nur Open Sans */

  --mv-fs-hero:  44px;
  --mv-fs-h1:    32px;
  --mv-fs-h2:    24px;
  --mv-fs-h3:    20px;
  --mv-fs-cta:   18px;
  --mv-fs-basis: 15px;
  --mv-fs-klein: 14px;
  --mv-fs-label: 12px;

  --mv-lh-basis: 1.6;
  --mv-lh-titel: 1.2;

  --mv-sperrung-label: .18em;
  --mv-sperrung-titel: .01em;
  --mv-sperrung-nav:   .04em;

  /* ---- Abstand — Vielfache von 4 --------------------------------------- */
  --mv-s1:  4px;   --mv-s2:  8px;   --mv-s3: 12px;  --mv-s4: 16px;
  --mv-s5: 24px;   --mv-s6: 32px;   --mv-s7: 40px;  --mv-s8: 56px;
  --mv-s9: 64px;   --mv-s10: 80px;  --mv-s11: 96px;

  /* ---- Form ------------------------------------------------------------ */
  --mv-radius:      4px;
  --mv-radius-rund: 50%;      /* nur Zaehler, USP-Icons, Avatare           */
  --mv-rahmen:      1px solid var(--mv-linie);
  --mv-schatten:    0 1px 3px rgba(44, 45, 51, .08);  /* nur schwebend      */

  --mv-breite:      1200px;   /* mit elementor_container_width vereinheitl. */
  --mv-lesebreite:  70ch;
  --mv-bp-md:       768px;
  --mv-bp-lg:      1025px;
}

@media (max-width: 768px) {
  :root {
    --mv-fs-hero: 30px;
    --mv-fs-h1:   24px;
  }
}