/* ManniMindset Designsystem, PROBEWEISE über die Sprachen-App gelegt.
   Aufruf mit ?mm=1 an der Adresse, sonst passiert hier gar nichts.

   Warum als Auflage und nicht als Umbau: so bleibt die laufende App für alle
   unverändert, und Manni kann beide Fassungen mit einem Handgriff vergleichen.
   Jede Regel hängt deshalb an [data-mm], das setzt ein Dreizeiler in index.html.

   ERLEDIGT AM 02.08.2026: Hier stand ein @import, der die Schriften von Google
   holte. Das war für eine App, die ohne Netz laufen muss, nicht zulässig und
   hätte außerdem die IP jedes Nutzers an Google übertragen. Manrope und IBM
   Plex Mono liegen jetzt unter /app/schriften/ und werden über
   /app/schriften.css eingebunden, das steht im Kopf der index.html vor dieser
   Datei. Erzeugt mit scripts/schriften_holen.py. */

[data-mm] {
  /* Grundflächen */
  --mm-ink-900: #0B0A07;
  --mm-ink-800: #12100B;
  --mm-ink-700: #1A1710;
  --mm-ink-600: #241D10;
  --mm-ink-500: #3A3122;

  /* Akzent */
  --mm-amber-500: #FFB61E;
  --mm-amber-600: #E09A0C;
  --mm-amber-300: #FFD277;
  --mm-orange-500: #FF6B1A;

  /* Text */
  --mm-cream-50: #FBF6EC;
  --mm-cream-200: #DED3BE;
  --mm-stone-300: #B3A68D;
  --mm-stone-400: #9B8E76;
  --mm-stone-600: #6A604F;

  /* Status */
  --mm-success: #3FC98A;
  --mm-danger: #FF5A4D;
  --mm-danger-text: #FF8B7F;

  --mm-font-sans: 'Manrope', Helvetica, Arial, sans-serif;
  --mm-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --mm-ease: cubic-bezier(.2, .7, .2, 1);
  --mm-dur-fast: 180ms;

  /* Die vorhandenen Namen der App auf die neuen Werte umbiegen. Damit trägt
     das Designsystem sofort durch die ganze App, ohne dass eine einzige
     bestehende Regel angefasst werden muss. */
  --grund:   var(--mm-ink-900);
  --karte:   var(--mm-ink-700);
  --text:    var(--mm-cream-50);
  --leise:   var(--mm-stone-300);
  --gedimmt: var(--mm-stone-400);
  --linie:   var(--mm-ink-600);
  --blau:    var(--mm-amber-500);

  --spr-blau:  var(--mm-amber-500);
  --spr-gruen: var(--mm-success);
  --spr-gelb:  var(--mm-amber-300);
  --spr-rot:   var(--mm-danger);
  --spr-tinte: var(--mm-ink-800);
  --spr-joker: var(--mm-amber-500);
  --spr-joker-t: var(--mm-ink-800);
  --spr-gratis: var(--mm-success);
  --spr-gratis-t: var(--mm-ink-900);
}

/* Der helle Modus des Systems wird hier bewusst NICHT angeboten: die Probe
   soll den Standard zeigen, und der ist dunkel. */
[data-mm] body,
[data-mm] .app {
  background: var(--mm-ink-900);
  color: var(--mm-cream-50);
  font-family: var(--mm-font-sans);
}

/* ---------- Schrift ---------- */

[data-mm] body,
[data-mm] button,
[data-mm] input,
[data-mm] h1, [data-mm] h2, [data-mm] h3 {
  font-family: var(--mm-font-sans);
}
[data-mm] h2, [data-mm] h3 { letter-spacing: -.02em; }

/* Zahlen, Stände und technische Angaben in der Monoschrift, so will es das
   System. Hier sind das der Fragenzähler und die Wörterzahlen. */
[data-mm] .sl-stand,
[data-mm] .spr-anzahl,
[data-mm] .spr-sprachzahl,
[data-mm] .spr-zahl-de {
  font-family: var(--mm-font-mono);
  letter-spacing: .01em;
}

/* ---------- Kopf und Leiste ---------- */

[data-mm] .kopf,
[data-mm] .spielleiste:not(.hidden) {
  background: var(--mm-ink-800);
  border-bottom: 1px solid var(--mm-ink-600);
  border-radius: 0;
}
[data-mm] .kopf-name b { color: var(--mm-amber-500); }
[data-mm] .kopf-was { color: var(--mm-stone-400); }
[data-mm] .kopf-knopf {
  background: transparent;
  border-color: var(--mm-ink-500);
  color: var(--mm-amber-500);
}
[data-mm] .app-wechsel {
  background: var(--mm-ink-700);
  border: 1px solid var(--mm-ink-600);
  color: var(--mm-stone-300);
}
[data-mm] .sl-zurueck,
[data-mm] .sl-neu { color: var(--mm-amber-500); }
[data-mm] .sl-name { color: var(--mm-cream-50); }

/* ---------- Karten und Kacheln ---------- */

[data-mm] .spr-sprache,
[data-mm] .spr-kat,
[data-mm] .spr-karte,
[data-mm] .spr-tref {
  background: var(--mm-ink-700);
  border: 1px solid var(--mm-ink-600);
  border-radius: 14px;
  color: var(--mm-cream-50);
  transition: transform 200ms var(--mm-ease), border-color 200ms var(--mm-ease);
}
/* Die Sprachkachel trägt links den Farbmarker des Systems statt der alten
   blauen Kante. */
[data-mm] .spr-sprache { border-left: 4px solid var(--mm-amber-500); }
[data-mm] .spr-sprache:hover,
[data-mm] .spr-kat:hover { border-color: var(--mm-ink-500); transform: translateY(-3px); }
[data-mm] .spr-sprachname,
[data-mm] .spr-kat-name { color: var(--mm-cream-50); font-weight: 700; }
[data-mm] .spr-sprachsterne,
[data-mm] .spr-kat-sterne { color: var(--mm-amber-300); }
[data-mm] .spr-sprachzahl,
[data-mm] .spr-zahl-de { color: var(--mm-stone-400); }

/* Die Gratis-Pille ist ein Marker, kein Akzent: dunkle Statustönung mit
   grüner Schrift, so steht es in den Bausteinen. */
[data-mm] .spr-gratis {
  background: #12240F;
  color: var(--mm-success);
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 6px;
}

/* ---------- Die Wörterbuch-Suche ---------- */

[data-mm] .spr-suche.gross {
  background: var(--mm-ink-800);
  border: 1px solid var(--mm-ink-600);
  border-radius: 16px;
}
[data-mm] .spr-such-titel { color: var(--mm-cream-50); }
[data-mm] .spr-suche.gross .spr-suchfeld {
  height: 46px;
  min-height: 46px;
  background: var(--mm-ink-700);
  border: 1px solid var(--mm-ink-500);
  border-radius: 10px;
  color: var(--mm-cream-50);
  font-weight: 600;
}
[data-mm] .spr-suche.gross .spr-suchfeld::placeholder { color: var(--mm-stone-400); }
[data-mm] .spr-suche.gross .spr-suchfeld:focus { border-color: var(--mm-amber-500); box-shadow: none; }
[data-mm] .spr-such-fuss .spr-fchip {
  background: var(--mm-ink-600);
  border: 0;
  color: var(--mm-stone-300);
  border-radius: 999px;
}
[data-mm] .spr-such-fuss .spr-fchip.an {
  background: var(--mm-amber-500);
  color: var(--mm-ink-800);
  font-weight: 700;
}
[data-mm] .spr-anzahl {
  background: var(--mm-ink-600);
  color: var(--mm-amber-300);
}
[data-mm] .spr-anzahl.de { background: transparent; color: var(--mm-stone-400); }
[data-mm] .spr-pille {
  background: var(--mm-ink-600);
  border: 1px solid var(--mm-ink-500);
  color: var(--mm-cream-50);
  border-radius: 999px;
}

/* ---------- Das Quiz ---------- */

[data-mm] .spr-frage-de,
[data-mm] .spr-frage-wort { color: var(--mm-cream-50); }
[data-mm] .spr-frage small { color: var(--mm-stone-300); font-weight: 600; }

[data-mm] .spr-a,
[data-mm] .spr-as {
  background: var(--mm-ink-700);
  border: 1px solid var(--mm-ink-500);
  border-radius: 12px;
  color: var(--mm-cream-50);
  min-height: 52px;
}
[data-mm] .spr-a.richtig,
[data-mm] .spr-as.richtig {
  background: #12240F;
  border-color: var(--mm-success);
  color: var(--mm-success);
}
[data-mm] .spr-a.falsch,
[data-mm] .spr-as.falsch {
  background: #2A100D;
  border-color: var(--mm-danger);
  color: var(--mm-danger-text);
}
[data-mm] .spr-a.leise,
[data-mm] .spr-as.leise { opacity: .45; }

/* Der Joker ist die eine Amber-Fläche im Bild, deshalb bekommt er sie ganz. */
[data-mm] .spr-joker {
  border: 1px dashed var(--mm-ink-500);
  border-radius: 12px;
}
[data-mm] .spr-joker-titel {
  font-family: var(--mm-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-stone-400);
}
[data-mm] .spr-jokerknopf {
  background: transparent;
  border: 1px solid var(--mm-ink-500);
  color: var(--mm-amber-500);
  border-radius: 999px;
  box-shadow: none;
}
[data-mm] .spr-jokerknopf.verbraucht {
  background: var(--mm-ink-700);
  border-color: var(--mm-ink-600);
  color: var(--mm-stone-600);
}

/* Die Auflösung als Meldung des Systems: dunkle Fläche, links die Statusfarbe. */
[data-mm] .spr-aufloesung-gross {
  background: var(--mm-ink-800);
  border: 1px solid var(--mm-ink-600);
  border-left: 3px solid var(--mm-success);
  border-radius: 12px;
}
[data-mm] .spr-aufloesung-gross.daneben { border-left-color: var(--mm-danger); }
[data-mm] .ag-fremd { color: var(--mm-cream-50); }
[data-mm] .ag-umschrift { color: var(--mm-stone-400); font-family: var(--mm-font-mono); }
[data-mm] .ag-deutsch { color: var(--mm-cream-200); }
[data-mm] .spr-mut { color: var(--mm-amber-300); }

/* Genau EIN Primärknopf je Bildschirm: das ist "Nächste Frage". */
[data-mm] .spr-navknopf {
  background: transparent;
  border: 1px solid var(--mm-ink-500);
  color: var(--mm-cream-50);
  border-radius: 10px;
  min-height: 44px;
  font-weight: 600;
}
[data-mm] .spr-navknopf.vor {
  background: var(--mm-amber-500);
  border-color: var(--mm-amber-500);
  color: var(--mm-ink-800);
  font-weight: 700;
}
[data-mm] .spr-navknopf.vor:hover { background: var(--mm-amber-600); }
[data-mm] .spr-navknopf:disabled {
  background: var(--mm-ink-700);
  border-color: var(--mm-ink-600);
  color: var(--mm-stone-600);
}

/* ---------- Wege, Knöpfe, Hinweise ---------- */

[data-mm] .spr-knopf,
[data-mm] .spr-weg {
  background: var(--mm-ink-700);
  border: 1px solid var(--mm-ink-500);
  border-radius: 12px;
  color: var(--mm-cream-50);
}
[data-mm] .spr-weg small { color: var(--mm-stone-400); }
[data-mm] .spr-hinweis { color: var(--mm-stone-400); }
[data-mm] .knopf-voll {
  background: var(--mm-amber-500);
  border-color: var(--mm-amber-500);
  color: var(--mm-ink-800);
  font-weight: 700;
}
[data-mm] .knopf {
  background: transparent;
  border: 1px solid var(--mm-ink-500);
  color: var(--mm-cream-50);
}

/* ---------- Begrüßung, Blatt, Toast ---------- */

[data-mm] .huelle { background: rgba(11, 10, 7, .82); }
[data-mm] .kasten,
[data-mm] .blatt {
  background: var(--mm-ink-800);
  border: 1px solid var(--mm-ink-600);
  color: var(--mm-cream-50);
}
[data-mm] .spruch { color: var(--mm-cream-200); }
[data-mm] .klein { color: var(--mm-stone-400); }
[data-mm] .mp-toast {
  background: var(--mm-ink-700);
  border: 1px solid var(--mm-ink-500);
  color: var(--mm-cream-50);
}

/* Fokus immer sichtbar, zwei Pixel Amber. */
[data-mm] :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--mm-amber-500); }

/* Die Probe-Marke, damit man im Bild sofort sieht, welche Fassung man ansieht. */
[data-mm] .mm-probe {
  position: fixed;
  left: 8px;
  top: calc(env(safe-area-inset-top) + 6px);
  z-index: 90;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--mm-ink-600);
  color: var(--mm-amber-300);
  font-family: var(--mm-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}