/* ==========================================================================
   MM · TOKENS
   Die einzige Stelle, an der Werte stehen. Alles andere referenziert nur.
   Farben und Schriften zeigen auf den Elementor-Kit — dort änderst du sie
   weiterhin per Klick, und diese Datei zieht automatisch mit.
   Der Fallback nach dem Komma greift nur, falls der Kit-Slot fehlt.
   ========================================================================== */

:root{

  /* ---- Farbe · zeigt auf den Kit -------------------------------------- */
  --mm-ink:        var(--e-global-color-9fcad6e, #393434);   /* Kit „6 Dunkel“ */
  --mm-blue:       var(--e-global-color-primary,  #4377BB);  /* Kit „1 Blau“   */
  --mm-cream:      var(--e-global-color-secondary,#F2F2EF);  /* Kit „2 Creme“  */
  --mm-brown:      var(--e-global-color-text,     #A98463);  /* Kit „3 Braun“  */

  /* Noch nicht im Kit — nach dem Anlegen hier auf var(--e-global-color-…) umstellen */
  --mm-blue-dk:    #35608F;
  --mm-surface:    #FFFFFF;
  --mm-dark:       #141210;
  --mm-ok:         #5E8C4A;
  --mm-danger:     #B24A3E;

  /* Abstufungen — nur Transparenz der Tinte, keine neuen Farbwerte */
  --mm-ink-70:     rgba(57,52,52,.70);
  --mm-ink-45:     rgba(57,52,52,.45);
  --mm-ink-25:     rgba(57,52,52,.25);
  --mm-line:       rgba(57,52,52,.16);
  --mm-line-soft:  rgba(57,52,52,.09);
  --mm-blue-soft:  rgba(67,119,187,.11);
  --mm-blue-line:  rgba(67,119,187,.38);

  /* ---- Form ----------------------------------------------------------- */
  --mm-r-control:  10px;    /* Buttons, Eingabefelder */
  --mm-r-surface:  20px;    /* Karten, Tiles, Bilder  */
  --mm-btn-h:      44px;
  --mm-btn-pad:    12px 28px;
  --mm-field-h:    56px;
  --mm-border:     1.5px;

  /* ---- Schrift · zeigt auf den Kit ------------------------------------ */
  --mm-font-sans:  var(--e-global-typography-primary-font-family, "MM ABC Diatype"), sans-serif;
  --mm-font-serif: var(--e-global-typography-accent-font-family,  "MM IvarFine Light Italic"), serif;
  --mm-btn-size:   var(--e-global-typography-37b6ba9-font-size, 14px);
  --mm-btn-track:  .105em;

  /* ---- Abstand · 8er-Raster, mobil mitskalierend ---------------------- */
  --mm-s-2xs: 8px;
  --mm-s-xs:  16px;
  --mm-s-s:   24px;
  --mm-s-m:   clamp(32px, 4.5vw, 48px);
  --mm-s-l:   clamp(56px, 7.5vw, 96px);
  --mm-s-xl:  clamp(80px, 11vw, 144px);

  /* ---- Bewegung ------------------------------------------------------- */
  --mm-t:      200ms;
  --mm-t-press:100ms;
  --mm-ease:   cubic-bezier(.2,.8,.25,1);
  --mm-lift:   -2px;        /* Hub beim Hover — auf 0px setzen = überall aus */

  /* ---- Schatten ------------------------------------------------------- */
  --mm-sh-1: 0 1px 2px rgba(57,52,52,.05), 0 2px 8px rgba(57,52,52,.04);
  --mm-sh-2: 0 2px 6px rgba(57,52,52,.06), 0 12px 32px rgba(57,52,52,.07);
  --mm-sh-3: 0 4px 12px rgba(57,52,52,.08), 0 24px 60px rgba(57,52,52,.11);
}

@media (prefers-reduced-motion: reduce){
  :root{ --mm-lift: 0px; }
}

/* Fokus einmal für die ganze Seite — ersetzt jeden Browser-Standard */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--mm-blue);
  outline-offset: 3px;
}