/* ============================================================================
   MeinMarkt365 – Design-Tokens  v2.0
   Einzige Quelle der Wahrheit für Farbe, Schrift, Maß, Bewegung.

   Fassung 2.0 vom 01.08.2026. Sie ersetzt die Marktblau-Welt der Fassung 1.0
   vollständig; die alten Dateien liegen unter assets/css/alt/.

   DREI FARBEN, MEHR NICHT:
     Weiß      #FFFFFF   heller Grund
     Schwarz   #000000   dunkler Grund
     Limette   #B7F34A   der einzige Akzent, in beiden Modi derselbe

   Alles andere sind Graustufen, die aus dem Grund abgeleitet sind.

   ⚠️ Limette auf Weiß hat nur 1,32:1. Sie ist dort FLÄCHE mit dunklem Text
   darauf, oder sie bekommt eine haarfeine schwarze Kontur. Niemals Limette als
   Schrift oder dünne Linie auf hellem Grund.
   ========================================================================= */

/* ---------------------------------------------------------------- SCHRIFT */
/* Inter, selbst gehostet. Kein Google-Fonts-Aufruf: das wäre ein Datenabfluss
   bei jedem Seitenaufruf und kostet Ladezeit. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- 1. DIE DREI FARBEN ------------------------------------------------ */
  --mm-weiss:   #FFFFFF;
  --mm-schwarz: #000000;
  --mm-gruen:   #B7F34A;

  /* Abstufungen der Limette, nur für Zustände */
  --mm-gruen-hell:    #C9F676;
  --mm-gruen-tief:    #9FE027;
  --mm-gruen-schrift: #4A8300;   /* falls Grün ausnahmsweise Text auf Weiß ist: 4,6:1 */

  /* Grün für STRICHE UND SYMBOLE.
     Auf Weiß hat die Limette 1,32:1, ein Liniensymbol darin wäre unsichtbar.
     Deshalb tritt hier ein dunkleres Grün an ihre Stelle; im dunklen Modus ist
     es wieder die Limette selbst. Eine Rolle, damit Kante und Symbol immer
     dieselbe Farbe tragen. */
  --mm-gruen-strich: #4A8300;   /* 4,6:1 auf Weiß, erfüllt damit auch Textkontrast */

  /* --- 2. ROLLEN, HELLER MODUS ------------------------------------------ */
  /* In Bauteilen NUR diese Rollen benutzen, nie die Farben von oben. */
  --mm-grund:        #FFFFFF;
  --mm-flaeche:      #F4F4F5;   /* Karten, Kacheln, Felder */
  --mm-flaeche-2:    #EAEAEC;   /* zweite Ebene, Überfahren */
  --mm-text:         #000000;   /* 21:1 */
  --mm-text-2:       #5A5A60;   /* 6,4:1, Nebentext */
  --mm-text-3:       #8A8A90;   /* 3,3:1, nur Großes und Deko */
  --mm-linie:        #E1E1E4;   /* reine Trennlinie */
  --mm-rand:         #8E8E94;   /* Rand von Bedienelementen, 3,3:1 (WCAG 1.4.11: 3:1) */
  --mm-rand-stark:   #6E6E75;   /* Rand bei Auswahl, 5,3:1 */
  --mm-auf-gruen:    #000000;   /* Schrift auf limettener Fläche, 15,9:1 */
  --mm-schleier:     rgba(0, 0, 0, .55);
  --mm-kontur:       #000000;   /* haarfeine Linie um Grün auf Hell */
  --mm-kontur-breite: .6px;

  /* --- 3. SCHRIFT ------------------------------------------------------- */
  --mm-schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mm-fs-riesig:  clamp(2.1rem, 5vw, 3.6rem);
  --mm-fs-gross:   clamp(1.55rem, 3.2vw, 2.3rem);
  --mm-fs-h2:      1.45rem;
  --mm-fs-h3:      1.12rem;
  --mm-fs-text-gr: 1.125rem;
  --mm-fs-text:    1rem;
  --mm-fs-klein:   .875rem;
  --mm-fs-mini:    .8125rem;
  --mm-fs-marke:   .6875rem;

  --mm-zeile-eng:  1.12;
  --mm-zeile:      1.55;
  --mm-sperr-eng:  -.025em;
  --mm-sperr-marke: .1em;

  --mm-fett-normal: 400;
  --mm-fett-halb:   600;
  --mm-fett-voll:   700;

  /* --- 4. MASSE --------------------------------------------------------- */
  --mm-a1: .25rem;  --mm-a2: .5rem;   --mm-a3: .75rem;  --mm-a4: 1rem;
  --mm-a5: 1.25rem; --mm-a6: 1.5rem;  --mm-a8: 2rem;    --mm-a10: 2.5rem;
  --mm-a12: 3rem;   --mm-a16: 4rem;   --mm-a20: 5rem;

  --mm-radius-klein: 8px;
  --mm-radius:       11px;
  --mm-radius-gross: 16px;
  --mm-radius-rund:  999px;

  --mm-hoehe:       48px;    /* Knopf, Feld, Auswahlliste, überall gleich */
  --mm-hoehe-klein: 40px;
  --mm-hoehe-gross: 56px;
  --mm-tippziel:    48px;

  --mm-breite:      1240px;
  --mm-breite-text: 68ch;
  --mm-rinne: var(--mm-a4);

  /* --- 5. TIEFE --------------------------------------------------------- */
  --mm-schatten-1: 0 1px 2px rgba(0,0,0,.07), 0 1px 1px rgba(0,0,0,.04);
  --mm-schatten-2: 0 2px 6px rgba(0,0,0,.08), 0 6px 16px rgba(0,0,0,.06);
  --mm-schatten-3: 0 6px 14px rgba(0,0,0,.10), 0 16px 36px rgba(0,0,0,.10);
  --mm-schatten-4: 0 12px 24px rgba(0,0,0,.12), 0 30px 60px rgba(0,0,0,.16);

  /* --- 6. FOKUS --------------------------------------------------------- */
  --mm-fokus-breite: 3px;
  --mm-fokus-abstand: 2px;
  --mm-fokus-farbe: color-mix(in srgb, var(--mm-gruen) 65%, var(--mm-text));

  /* --- 7. BEWEGUNG ------------------------------------------------------ */
  --mm-dauer-mikro: 120ms;
  --mm-dauer:       190ms;
  --mm-dauer-auf:   170ms;   /* war 260ms. Kuerzer, damit kein Oeffnen
                               wie Warten wirkt (Manni, 02.08.2026) */
  --mm-dauer-lang:  620ms;
  --mm-kurve:       cubic-bezier(.2, .7, .3, 1);
  --mm-kurve-raus:  cubic-bezier(0, 0, .2, 1);
  --mm-versatz:     70ms;
}

@media (min-width: 768px)  { :root { --mm-rinne: var(--mm-a6); } }
@media (min-width: 1280px) { :root { --mm-rinne: var(--mm-a8); } }

/* ============================================================================
   DUNKLER MODUS
   Es werden ausschließlich Rollen umgehängt. Kein Bauteil kennt einen Modus.
   Drei Zustände: ohne Attribut = Systemvorgabe, data-mm-modus="hell",
   data-mm-modus="dunkel".
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-mm-modus="hell"]) {
    color-scheme: dark;
    --mm-grund:      #000000;
    --mm-flaeche:    #141416;
    --mm-flaeche-2:  #1E1E21;
    --mm-text:       #FFFFFF;
    --mm-text-2:     #A8A8AE;
    --mm-text-3:     #74747A;
    --mm-linie:      #2A2A2E;
    --mm-rand:       #5E5E66;   /* 3,3:1 auf Schwarz */
    --mm-rand-stark: #8A8A92;
    --mm-schleier:   rgba(0, 0, 0, .72);
    --mm-kontur-breite: 0px;
    --mm-gruen-strich: #B7F34A;
    --mm-schatten-1: 0 1px 0 rgba(255,255,255,.06);
    --mm-schatten-2: 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.6);
    --mm-schatten-3: 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.7);
    --mm-schatten-4: 0 1px 0 rgba(255,255,255,.09), 0 26px 56px rgba(0,0,0,.8);
  }
}
:root[data-mm-modus="dunkel"] {
  color-scheme: dark;
  --mm-grund:      #000000;
  --mm-flaeche:    #141416;
  --mm-flaeche-2:  #1E1E21;
  --mm-text:       #FFFFFF;
  --mm-text-2:     #A8A8AE;
  --mm-text-3:     #74747A;
  --mm-linie:      #2A2A2E;
  --mm-rand:       #5E5E66;   /* 3,3:1 auf Schwarz */
  --mm-rand-stark: #8A8A92;
  --mm-schleier:   rgba(0, 0, 0, .72);
  --mm-kontur-breite: 0px;
  --mm-gruen-strich: #B7F34A;
  --mm-schatten-1: 0 1px 0 rgba(255,255,255,.06);
  --mm-schatten-2: 0 1px 0 rgba(255,255,255,.07), 0 4px 14px rgba(0,0,0,.6);
  --mm-schatten-3: 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.7);
  --mm-schatten-4: 0 1px 0 rgba(255,255,255,.09), 0 26px 56px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mm-dauer-mikro: 1ms; --mm-dauer: 1ms; --mm-dauer-auf: 1ms;
    --mm-dauer-lang: 1ms; --mm-versatz: 0ms;
  }
}