/* Merkbar · Bauteile (T018, Stand 27.09.2026)

   Kern-Bauteile ihrer Oberfläche nach .claude/skills/lernapp-design/references/components.md.
   Nur Semantik-Token aus public/css/tokens.css, keine Primitive, keine freien Farben, kein
   freier px-Wert hinter Radius, Schriftgröße und Schatten (tests/theme-guards.test.js).
   Vorschau aller Zustände in design/, Einstieg design/index.html.

   Zustände hängen an ARIA, nicht an eigenen Klassen: aria-checked, aria-current,
   aria-busy, aria-disabled. Das Ergebnis nach dem Prüfen steht in data-ergebnis mit
   richtig, fast oder noch-nicht (B7).

   data-vorschau="hover|druck|fokus" zeigt einen Zustand fest an, nur für die Seiten in
   design/. Die App setzt das Attribut nie.

   Bewegung. Knöpfe und Kacheln springen beim Drücken ohne Übergang auf die Druckfarbe und
   gehen in --mb-motion-druck-zurueck zurück (B11). Alles andere läuft nur unter
   prefers-reduced-motion: no-preference, mit animation-fill-mode backwards (patterns.md 10).
   Das fertige Bewegungsset baut T019. */

/* ===== Grund, bis ein eigenes Grund-CSS kommt ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Grauer Grund mit weißen Karten seit Runde 1 (RD 2). Auch html, sonst endet der Grund unter kurzem Inhalt */
html {
  font-family: var(--mb-font-sans);
  color: var(--mb-text-body);
  background: var(--mb-surface-grund);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mb-surface-grund);
}

/* hidden gewinnt immer. Ein Bauteil mit display: flex zeigte sonst sein verstecktes Element, etwa das X am Ende
   der Lernsitzung (Runde 2, 28.09.2026) */
[hidden] {
  display: none !important;
}

/* ===== Fokus-Formel (patterns.md 9, tokens.md 1.6) ===== */

:focus-visible,
[data-vorschau="fokus"] {
  outline: var(--mb-focus-outline);
  outline-offset: var(--mb-focus-offset);
  box-shadow: var(--mb-focus-ring);
}

/* ===== Schriftrollen der Kind-Skala (tokens.md 2.2) ===== */

.mb-rolle-wort {
  margin: 0;
  font-size: var(--mb-t-wort);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.1;
  letter-spacing: 0;                    /* B3 */
  color: var(--mb-text-heading);
}

.mb-rolle-display-02 {
  margin: 0;
  font-size: var(--mb-t-display-02);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--mb-text-heading);
}

.mb-rolle-heading-01 {
  margin: 0;
  font-size: var(--mb-t-heading-01);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mb-text-heading);
}

.mb-rolle-satz {
  margin: 0;
  font-size: var(--mb-t-satz);
  font-weight: var(--mb-weight-regular);
  line-height: 1.5;
  color: var(--mb-text-heading);
}

.mb-rolle-text {
  margin: 0;
  font-size: var(--mb-t-text);
  font-weight: var(--mb-weight-regular);
  line-height: 1.5;
  color: var(--mb-text-body);
}

.mb-rolle-klein {
  margin: 0;
  font-size: var(--mb-t-klein);
  font-weight: var(--mb-weight-regular);
  line-height: 1.45;
  color: var(--mb-text-body);
}

/* Nur für den Screenreader sichtbar */
.mb-nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Symbole ===== */
/* Eigenes Sprite, Strich 2,2 auf dem 24er-Raster, runde Enden, currentColor (components.md).
   Die Pfade setzen keine Strich-Attribute, damit alles von hier erbt. */

.mb-symbol {
  flex: none;
  width: var(--mb-size-symbol);
  height: var(--mb-size-symbol);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Figur aus public/icons/figuren.svg (T021), 32 px, gleicher Strich wie die Symbole */
.mb-figur {
  width: calc(var(--mb-size-symbol) * 1.6);
  height: calc(var(--mb-size-symbol) * 1.6);
}

/* Ihre Figur im Kreis auf Lavendel, neben dem Namen auf Ich (K9) */
.mb-figur-marke {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--mb-size-symbol) * 2.4);
  height: calc(var(--mb-size-symbol) * 2.4);
  border-radius: 50%;
  background: var(--mb-surface-stage);
  color: var(--mb-text-heading);
}

.mb-symbol--gross {
  width: var(--mb-size-haken);           /* 24, Symbol im Knopf und in der Kachel */
  height: var(--mb-size-haken);
}

/* ===== Knöpfe mit Ecken 12 wie RemNote (Runde 1, RD 1.3) ===== */

.mb-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2xs);
  min-height: var(--mb-size-knopf);
  min-width: var(--mb-size-ziel-min);
  margin: 0;
  padding: 0 var(--mb-space-m);
  border: 1px solid transparent;
  border-radius: var(--mb-radius-knopf);
  background: transparent;
  color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-knopf);
  font-weight: var(--mb-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve),
    border-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
}

/* Hauptknopf. Handy volle Breite, iPad 320 (--mb-size-knopf-breite) */
.mb-knopf--haupt {
  width: var(--mb-size-knopf-breite);
  background: var(--mb-action-primary);
  color: var(--mb-action-primary-label);
}

/* Zweitknopf, auch Hörknopf (design-brueche.md 5 Punkt 3). Weiße Karte mit Haarlinie seit Runde 1 */
.mb-knopf--zweit {
  border-color: var(--mb-border-hairline);
  background: var(--mb-surface-karte);
  box-shadow: var(--mb-sh-card);
}

.mb-knopf--breit {
  width: 100%;
}

/* Textknopf. Wort in Linkfarbe, Trefferfläche 44. Ohne Unterstrich seit Runde 1 (Regel TEXTLINK,
   Kritik „sieht aus wie html“) */
.mb-knopf--text {
  min-height: var(--mb-size-ziel-min);
  padding: 0 var(--mb-space-xs);
  color: var(--mb-text-link);
  font-weight: var(--mb-weight-semibold);
  text-decoration: none;
}

/* Allein stehender Textknopf auf Lavendel, so erkennt man ihn ohne Unterstrich als Ziel */
.mb-knopf--text.mb-knopf--kante {
  background: var(--mb-surface-stage);
}

/* Hover nur mit echter Maus, vor Druck, damit Druck gewinnt */
@media (hover: hover) {
  .mb-knopf--haupt:hover {
    background: var(--mb-action-primary-hover);
  }

  .mb-knopf--zweit:hover {
    border-color: var(--mb-border-sekundaer-hover);
    background: var(--mb-surface-hover);
  }

  .mb-knopf--text:hover {
    background: var(--mb-surface-hover);
  }
}

.mb-knopf--haupt[data-vorschau="hover"] {
  background: var(--mb-action-primary-hover);
}

.mb-knopf--zweit[data-vorschau="hover"] {
  border-color: var(--mb-border-sekundaer-hover);
  background: var(--mb-surface-hover);
}

/* Druck ohne Übergang, zurück in 200 ms über die Ruheregel (B11) */
.mb-knopf--haupt:active,
.mb-knopf--haupt[data-vorschau="druck"] {
  background: var(--mb-action-primary-active);
  transition-duration: 0s;
}

.mb-knopf--zweit:active,
.mb-knopf--zweit[data-vorschau="druck"],
.mb-knopf--text:active,
.mb-knopf--text[data-vorschau="druck"] {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

/* Lädt. Wort und Symbol bleiben unsichtbar im Fluss, die Breite friert ein (FS:386).
   Das Wort steht deshalb immer in einem eigenen Element. */
.mb-knopf[aria-busy="true"] {
  pointer-events: none;
}

.mb-knopf[aria-busy="true"] > * {
  visibility: hidden;
}

.mb-knopf[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--mb-space-m);             /* 24 wie das Symbol im Knopf */
  height: var(--mb-space-m);
  margin: auto;
  border: 2.2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

/* ===== Gesperrt (components.md, Für alle Bauteile) ===== */

:is(.mb-knopf, .mb-chip, .mb-kachel, .mb-buchstabe, .mb-symbolknopf)[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

/* ===== Symbolknopf, etwa der Lautsprecher neben dem Beispielsatz ===== */

.mb-symbolknopf {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--mb-size-ziel-min);
  height: var(--mb-size-ziel-min);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--mb-radius-pill);
  background: transparent;
  color: var(--mb-text-heading);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
  text-decoration: none;                /* auch als Link, etwa das Zahnrad bei Roger */
}

@media (hover: hover) {
  .mb-symbolknopf:hover {
    background: var(--mb-surface-hover);
  }
}

.mb-symbolknopf:active,
.mb-symbolknopf[data-vorschau="druck"] {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

/* ===== Chip, Wahl-Schema, 44 hoch ===== */
/* Der Haken liegt im linken Polster. Die Breite bleibt beim Wählen gleich (G15). */

.mb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-size-ziel-abstand);
}

.mb-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--mb-size-chip);
  min-width: var(--mb-size-ziel-min);
  margin: 0;
  padding: 0 var(--mb-space-xs);       /* 12 statt 32 seit Runde 2, 4 Filter passen am S21 in eine Reihe */
  border: 1px solid var(--mb-border-sekundaer);
  border-radius: var(--mb-radius-pill);
  background: var(--mb-surface-page);
  color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-klein);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve),
    border-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
}

.mb-chip__haken {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--mb-space-2xs);
  margin-block: auto;
  color: var(--mb-action-primary);
  visibility: hidden;
}

@media (hover: hover) {
  .mb-chip:not([aria-checked="true"]):not([aria-pressed="true"]):hover {
    border-color: var(--mb-border-sekundaer-hover);
    background: var(--mb-surface-hover);
  }
}

.mb-chip[data-vorschau="hover"] {
  border-color: var(--mb-border-sekundaer-hover);
  background: var(--mb-surface-hover);
}

.mb-chip:active,
.mb-chip[data-vorschau="druck"] {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

.mb-chip[aria-checked="true"],
.mb-chip[aria-pressed="true"] {
  border-color: var(--mb-border-gewaehlt);
  background: var(--mb-surface-stage);
  transition:
    background-color var(--mb-motion-farbe) var(--mb-motion-kurve),
    border-color var(--mb-motion-rand) var(--mb-motion-kurve);
}

.mb-chip[aria-checked="true"] .mb-chip__haken,
.mb-chip[aria-pressed="true"] .mb-chip__haken {
  visibility: visible;
}

/* Seit Runde 2 ist der Chip schmal, nur der gewählte macht links Platz für den Haken. Der Chip wächst dabei um
   20 px, das ist Antwort auf ihren Tipp, kein Sprung beim Laden (G15) */
.mb-chip[aria-checked="true"],
.mb-chip[aria-pressed="true"] {
  padding-inline-start: calc(var(--mb-space-2xs) + var(--mb-size-symbol) + var(--mb-space-3xs));
}

/* ===== Antwortkachel K4b, K4c (B7) ===== */

.mb-kacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-space-xs);
  margin: 0;
  padding: 0;
}

.mb-kachel {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  width: 100%;
  min-height: var(--mb-size-kachel-min);
  margin: 0;
  padding: var(--mb-space-s);
  border: 1px solid var(--mb-border-hairline);
  border-radius: var(--mb-radius-knopf);
  background: var(--mb-surface-page);
  color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-antwort);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve),
    border-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
}

.mb-kachel__wort {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Der Platz des Symbols ist immer reserviert, nichts springt beim Wählen */
.mb-kachel__symbol {
  visibility: hidden;
}

@media (hover: hover) {
  .mb-kachel:not([aria-checked="true"]):not([data-ergebnis]):hover {
    border-color: var(--mb-border-sekundaer-hover);
    background: var(--mb-surface-hover);
  }
}

.mb-kachel[data-vorschau="hover"] {
  border-color: var(--mb-border-sekundaer-hover);
  background: var(--mb-surface-hover);
}

.mb-kachel:active,
.mb-kachel[data-vorschau="druck"] {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

/* Gewählt, Lavendel-Fläche mit Haken in Violett, der Text bleibt Tinte */
.mb-kachel[aria-checked="true"],
.mb-kachel[aria-pressed="true"] {
  border-color: var(--mb-border-gewaehlt);
  background: var(--mb-surface-stage);
  transition:
    background-color var(--mb-motion-farbe) var(--mb-motion-kurve),
    border-color var(--mb-motion-rand) var(--mb-motion-kurve);
}

.mb-kachel[aria-checked="true"] .mb-kachel__symbol,
.mb-kachel[aria-pressed="true"] .mb-kachel__symbol {
  visibility: visible;
  color: var(--mb-action-primary);
}

/* Nach dem Prüfen. Getönte Fläche, 1 px Rand, Symbol in Tinte (B7). Steht nach gewählt,
   damit eine gewählte, falsche Kachel ihr Ergebnis zeigt. */
.mb-kachel[data-ergebnis] {
  transition:
    background-color var(--mb-motion-farbe) var(--mb-motion-kurve),
    border-color var(--mb-motion-farbe) var(--mb-motion-kurve);
}

.mb-kachel[data-ergebnis] .mb-kachel__symbol {
  visibility: visible;
  color: var(--mb-feedback-symbol);
}

.mb-kachel[data-ergebnis="richtig"] {
  border-color: var(--mb-feedback-richtig-rand);
  background: var(--mb-feedback-richtig-flaeche);
}

.mb-kachel[data-ergebnis="fast"] {
  border-color: var(--mb-feedback-fast-rand);
  background: var(--mb-feedback-fast-flaeche);
}

.mb-kachel[data-ergebnis="noch-nicht"] {
  border-color: var(--mb-feedback-falsch-rand);
  background: var(--mb-feedback-falsch-flaeche);
}

/* Nach dem Prüfen ist nichts mehr wählbar, grau wird dafür nichts */
.mb-kacheln[data-geprueft] .mb-kachel {
  cursor: default;
  pointer-events: none;
}

/* ===== Buchstabenkachel K4d ===== */

.mb-buchstaben,
.mb-plaetze {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-size-ziel-abstand);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-buchstabe,
.mb-platz {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--mb-size-buchstabe);
  height: var(--mb-size-buchstabe);
  margin: 0;
  padding: 0;
  border: 1px solid var(--mb-border-hairline);
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-page);
  color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-buchstabe);
  font-weight: var(--mb-weight-semibold);
  line-height: 1;
  text-align: center;
  text-transform: none;
}

.mb-buchstabe {
  box-shadow: var(--mb-sh-card);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
}

.mb-buchstabe:focus-visible,
.mb-buchstabe[data-vorschau="fokus"] {
  box-shadow: var(--mb-focus-ring), var(--mb-sh-card);
}

.mb-buchstabe:active,
.mb-buchstabe[data-vorschau="druck"] {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

/* Gesetzt. Der Platz im Vorrat bleibt als leerer Umriss stehen (G15) */
.mb-buchstabe[data-gesetzt] {
  background: transparent;
  box-shadow: none;
  color: transparent;
  pointer-events: none;
}

/* Platz über dem Vorrat, 1 px Rand in Bedienfarbe. Ein Ergebnis je Platz nach dem Prüfen
   gibt es bewusst nicht. Farbe allein wäre unter Farbsehschwäche nicht lesbar (UX-4.2),
   Symbol je Platz oder Ergebnis nur im Blatt entscheidet T031. */
.mb-platz {
  border-color: var(--mb-border-control);
}

/* ===== Lernfeld K4e, K4f, K4g ===== */

.mb-feldgruppe {
  display: grid;
  gap: var(--mb-space-xs);
  max-width: var(--mb-size-spalte);
}

.mb-lernfeld {
  display: block;
  width: 100%;
  height: var(--mb-size-feld);
  margin: 0;
  padding: 0 var(--mb-space-s);
  border: 1px solid transparent;
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-feld);
  color: var(--mb-text-heading);
  caret-color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-eingabe);        /* 18, über 16, iOS zoomt nicht */
  font-weight: var(--mb-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.02em;
  appearance: none;
  -webkit-appearance: none;
}

/* Grau ohne Rahmen wie der Feldstil im Shop (Runde 1, G30). Beim Tippen einen Hauch dunkler und eine Linie
   unten in Tinte, das ist hier die Fokus-Formel, weil ein Umriss ums Feld mit der Tastatur doppelt wirkt */
.mb-lernfeld:focus {
  outline: none;
  background: var(--mb-surface-feld-fokus);
  box-shadow: inset 0 calc(var(--mb-size-linie) * -1) 0 var(--mb-text-heading);
}

.mb-lernfeld::placeholder {
  color: var(--mb-text-muted);
  font-weight: var(--mb-weight-regular);
  letter-spacing: 0;
  opacity: 1;
}

/* Nach dem Prüfen. Ein Feld kann einzelne Buchstaben nicht markieren, deshalb zeigt eine
   Zeile ihre Eingabe, die falschen Buchstaben tragen 2 px Unterstrich in Night (R3 2.7) */
.mb-eingabe {
  display: flex;
  align-items: center;
  min-height: var(--mb-size-feld);
  margin: 0;
  padding: 0 var(--mb-space-s);
  border: 1px solid var(--mb-border-hairline);
  border-radius: var(--mb-radius-input);
  color: var(--mb-text-heading);
  font-size: var(--mb-t-eingabe);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.mb-stelle {
  text-decoration-line: underline;
  text-decoration-thickness: var(--mb-size-linie);
  text-decoration-color: var(--mb-feedback-symbol);
  text-underline-offset: 0.18em;
}

/* Wo ein Buchstabe fehlt, steht ein leerer Platz mit demselben Unterstrich (T132, wie .mb-platz--stelle) */
.mb-stelle--luecke {
  display: inline-block;
  width: 0.45em;
  height: 1em;
  margin-inline: 0.05em;
  border-bottom: var(--mb-size-linie) solid var(--mb-feedback-symbol);
  vertical-align: -0.18em;
}



/* ===== Aktionszeile. Handy volle Breite, iPad der 320er-Knopf rechts ===== */

.mb-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mb-size-ziel-abstand);
}

.mb-aktion--links {
  justify-content: flex-start;
}

/* Hauptknopf mit Textknopf. "Prüfen" steht im DOM zuerst, direkt unter dem Feld (UX-8.5).
   Am Handy folgt der Textknopf links darunter, am iPad steht er links neben dem Knopf. */
.mb-aktion--mit-text {
  justify-content: flex-start;
}

/* ===== Kopf der Lernsitzung und Fortschrittsbalken K4 (B5) ===== */

.mb-kopf {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  min-height: var(--mb-size-ziel-min);
}

/* Das X steht an der Kante, seine Trefferfläche ragt links über den Seitenrand (Runde 1) */
.mb-kopf__x {
  margin-inline-start: calc(var(--mb-space-xs) * -1);
}

/* 8 hoch, Pille, ohne Zahl. Den Wert setzt die Seite über --balken-wert in Prozent.
   Die Füllung verschiebt sich statt zu wachsen, es bewegt sich nur transform (patterns.md 10). */
.mb-balken {
  position: relative;
  flex: 1 1 auto;
  height: var(--mb-size-balken);
  overflow: hidden;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-surface-component);
}

.mb-balken__fuellung {
  position: absolute;
  inset: 0;
  border-radius: var(--mb-radius-pill);
  background: var(--mb-action-primary);
  transform: translateX(calc(var(--balken-wert, 0%) - 100%));
  transition: transform var(--mb-motion-rand) var(--mb-motion-kurve);
}

/* ===== Rückmeldeblatt K5 in 3 Zuständen ===== */

.mb-blatt {
  border-top: 1px solid transparent;
  border-radius: var(--mb-radius-card) var(--mb-radius-card) 0 0;
  padding: var(--mb-space-s) var(--mb-space-s) calc(var(--mb-space-s) + env(safe-area-inset-bottom, 0px));
  color: var(--mb-feedback-text);
}

.mb-blatt--richtig {
  border-top-color: var(--mb-feedback-richtig-rand);
  background: var(--mb-feedback-richtig-flaeche);
}

.mb-blatt--fast {
  border-top-color: var(--mb-feedback-fast-rand);
  background: var(--mb-feedback-fast-flaeche);
}

.mb-blatt--noch-nicht {
  border-top-color: var(--mb-feedback-falsch-rand);
  background: var(--mb-feedback-falsch-flaeche);
}

/* Kein Dialog, kein Scrim, die Aufgabe bleibt darüber sichtbar */
.mb-blatt--unten {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
}

.mb-blatt__innen {
  display: grid;
  gap: var(--mb-space-xs);
  max-width: var(--mb-size-spalte);
  margin: 0 auto;
}

.mb-blatt__kopf {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2xs);
  margin: 0;
  font-size: var(--mb-t-text);           /* Zustandswort, kompakt seit Runde 1 */
  font-weight: var(--mb-weight-semibold);
  line-height: 1.3;
  color: var(--mb-feedback-text);
}

.mb-blatt__kopf .mb-symbol {
  color: var(--mb-feedback-symbol);
}

.mb-blatt__loesung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-xs);
}

.mb-blatt__wort {
  margin: 0;
  font-size: var(--mb-t-loesung);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.25;
  color: var(--mb-feedback-text);
}

/* Ihre Eingabe beim Nachtippen in einer Zeile mit der Lösung, „skatebo_rding → skateboarding“ (T132, Werkstatt
   _audit/2026-09-29-eingabe/, gewählt c). Markiert mit .mb-stelle in Tinte, nie Farbe allein (G18). Der Lautsprecher
   rückt nach rechts in die Kopfzeile, so bleibt das Blatt so kurz wie vorher und Prüfen am S21 über der Tastatur.
   Der Buchstabenhinweis „Erst e, dann i.“ weicht, die Markierung sagt dasselbe (G6). */
.mb-blatt__eingabe {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2xs);
  margin: 0;
}

.mb-blatt__getippt {
  font-size: var(--mb-t-eingabe);
  font-weight: var(--mb-weight-regular);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--mb-feedback-text);
}

/* „Du:“ nur für den Screenreader, er liest „Du: skatebording“ */
.mb-blatt__du {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mb-blatt__pfeil {
  flex: none;
  width: var(--mb-size-symbol);
  height: var(--mb-size-symbol);
  color: var(--mb-feedback-symbol);
}

.mb-blatt[data-eingabe] .mb-blatt__loesung {
  gap: var(--mb-space-2xs);
}

.mb-blatt[data-eingabe] #blatt-hinweis {
  display: none;
}

.mb-blatt[data-eingabe] .mb-blatt__innen {
  position: relative;
}

.mb-blatt[data-eingabe] .mb-blatt__kopf {
  padding-right: var(--mb-size-ziel-min);
}

.mb-blatt[data-eingabe] #blatt-hoeren {
  position: absolute;
  top: calc(-1 * var(--mb-space-xs));
  right: calc(-1 * var(--mb-space-2xs));
}

.mb-blatt__beispiel {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2xs);
}

.mb-blatt__satz {
  margin: 0;
  font-size: var(--mb-t-klein);
  font-weight: var(--mb-weight-regular);
  line-height: 1.5;
  color: var(--mb-feedback-text);
}

/* ===== Offline-Band ===== */
/* Entschieden in T018. Das Band liegt im Fluss und schiebt den Inhalt. Über dem Kopf läge
   es auf "Beenden". Damit unter ihrem Finger nichts springt, zeigt die Seite es erst beim
   nächsten Kartenwechsel (Regel für T036). */

.mb-offline {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--mb-space-2xs);
  min-height: calc(var(--mb-size-offline-band) + env(safe-area-inset-top, 0px));
  margin: 0;
  padding: env(safe-area-inset-top, 0px) var(--mb-space-s) 0;
  border-bottom: 1px solid var(--mb-border-hairline);
  background: var(--mb-surface-page);
  color: var(--mb-text-body);
  font-size: var(--mb-t-klein);
  line-height: 1.45;
}

.mb-offline[hidden] {
  display: none;
}

/* Status-Punkt 8 in Night, Schmuck, das Wort trägt den Zustand (G10) */
.mb-punkt {
  flex: none;
  width: var(--mb-size-punkt);
  height: var(--mb-size-punkt);
  border-radius: var(--mb-radius-pill);
  background: var(--mb-text-heading);
}

/* ===== Tab-Leiste unten, ab 1100 px Seitenleiste (B12) ===== */
/* Entschieden in T018. Aktiv trägt zwei Merkmale (FS:380), Night statt Grau und eine
   Marke in --mb-surface-component hinter dem Symbol. Die ganze Feldfläche bleibt dem
   Druck vorbehalten, so sind Druck und aktiv unterscheidbar. */

.mb-tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  border-top: 1px solid var(--mb-border-hairline);
  background: var(--mb-surface-karte);
}

/* Safari am iPhone legt seine schwebende Adressleiste unter die Tab-Leiste und zeigt dort den grauen Seitengrund, durch
   den der Inhalt scrollt (Daniel 29.09.2026, Bildschirmfoto Überblick: „die untere leiste ... ist halt irgendwie
   komisch“). Die Leiste läuft deshalb in Weiß nach unten weiter. In der installierten App und am S21 liegt dieser Teil
   unter dem Bildschirmrand und ist unsichtbar. */
.mb-tabs::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: calc(var(--mb-space-2xl) * 2);
  background: var(--mb-surface-karte);
}

.mb-tabs__liste {
  display: grid;
  grid-auto-flow: column;              /* so viele gleich breite Felder wie Seiten, 5 × 78 bei 390 (K1 27.09.2026) */
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Safe Area ist Polster im Feld, die Trefferfläche reicht bis zur Unterkante (UX-2.4) */
.mb-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--mb-space-3xs) / 2);
  min-height: calc(var(--mb-size-tab-leiste) + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  color: var(--mb-text-muted);
  font-size: var(--mb-t-tab);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
}

.mb-tab__marke {
  display: inline-flex;
  padding: var(--mb-space-3xs) var(--mb-space-s);
  border-radius: var(--mb-radius-pill);
}

.mb-tab[aria-current="page"] {
  color: var(--mb-text-link);
}

/* Das aktive Ziel in der Akzentfarbe auf Lavendel (Runde 1, RD 3) */
.mb-tab[aria-current="page"] .mb-tab__marke {
  background: var(--mb-surface-stage);
}

.mb-tab:active,
.mb-tab[data-vorschau="druck"] {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

/* Fokus nach innen, sonst schneidet die Bildschirmkante ihn ab. 2px ist die Konturstärke. */
.mb-tab:focus-visible,
.mb-tab[data-vorschau="fokus"] {
  outline-offset: calc(var(--mb-focus-offset) * -1 - 2px);
  box-shadow: inset var(--mb-focus-ring);
}

/* Beim Tippen gibt es keine feste Leiste unten (UX-8.5, G3). Ab 1100 steht sie links und bleibt, sonst war beim Suchen
   am iPad quer links 240 px leer (QA 29.09.2026) */
@media (max-width: 1099px) {
  html:has(:is(input, textarea):focus) .mb-tabs {
    display: none;
  }
}

/* ===== Seitenrand und Umbrüche ===== */

@media (min-width: 768px) {
  .mb-kacheln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mb-kachel {
    padding: var(--mb-space-m);
  }

  .mb-aktion--mit-text {
    justify-content: space-between;
  }

  .mb-aktion--mit-text > .mb-knopf--text {
    order: -1;
  }

  .mb-offline {
    padding-inline: var(--mb-space-l);
  }
}

@media (min-width: 1100px) {
  .mb-offline {
    padding-inline: var(--mb-space-xl);
  }

  /* Die Seitenleiste trägt den grauen Grund wie die Statusleiste des iPad. In Weiß brach sie unter der Uhrzeit
     sichtbar ab (Daniel 29.09.2026, Bildschirmfoto iPad quer) */
  .mb-tabs::after {
    content: none;
  }

  .mb-tabs {
    inset: 0 auto 0 0;
    width: var(--mb-size-seitenleiste);
    padding: var(--mb-space-m) var(--mb-space-s);
    border-top: 0;
    border-right: 1px solid var(--mb-border-hairline);
    background: var(--mb-surface-grund);
  }

  /* Nur eine Seite mit Seitenleiste rückt daneben, und der Inhalt bleibt im Rest mittig. Bis 29.09.2026 stand die Regel
     je Seite, dadurch rückten Willkommen, Was Papa sieht und Punkte ohne Leiste 120 px nach rechts (Daniel „auf ipad
     ist die komplette app nicht mittig“) */
  body:has(> .mb-tabs) {
    padding-inline-start: var(--mb-size-seitenleiste);
  }

  .mb-tabs__liste {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mb-space-3xs);
  }

  /* Einträge wie das Kontomenü bei NextBuy, mindestens 44 hoch (KSK §6) */
  .mb-tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--mb-space-xs);
    min-height: var(--mb-size-ziel-min);
    padding: 0 var(--mb-space-xs);
    border-radius: var(--mb-radius-input);
    font-size: var(--mb-t-klein);
  }

  .mb-tab__marke {
    padding: 0;
  }

  .mb-tab[aria-current="page"],
  .mb-tab[aria-current="page"] .mb-tab__marke {
    background: var(--mb-surface-stage);
  }

  .mb-tab:focus-visible,
  .mb-tab[data-vorschau="fokus"] {
    outline-offset: var(--mb-focus-offset);
    box-shadow: var(--mb-focus-ring);
  }
}

/* ===== Bewegung, nur ohne Wunsch nach reduzierter Bewegung (patterns.md 10) ===== */

@media (prefers-reduced-motion: no-preference) {
  /* Ladekreis mit der einen Kurve (I2:341 verbietet linear). Endlos, solange geladen wird,
     die Ausnahme von "nichts läuft endlos" steht offen für components.md. */
  .mb-knopf[aria-busy="true"]::after {
    animation: mb-kreisen var(--mb-motion-skeleton-sweep) var(--mb-motion-kurve) infinite;
  }

  .mb-blatt--unten {
    animation: mb-blatt-ein var(--mb-motion-transform) var(--mb-motion-kurve) backwards;
  }

  /* Der Haken zeichnet sich in 300 ms. Die Länge des Pfads liegt unter 21. */
  .mb-blatt--richtig .mb-blatt__kopf .mb-symbol {
    stroke-dasharray: 21;
    animation: mb-haken-zeichnen var(--mb-motion-transform) var(--mb-motion-kurve) backwards;
  }
}

@keyframes mb-kreisen {
  to { transform: rotate(1turn); }
}

@keyframes mb-blatt-ein {
  from { transform: translateY(100%); }
}

@keyframes mb-haken-zeichnen {
  from { stroke-dashoffset: 21; }
}

/* Abwählen und Hover-Ende sind Farbwechsel, keine Druck-Rückwege. Bei reduzierter Bewegung
   gilt damit 0 ms (UX-5.10). Nur :active nutzt --mb-motion-druck-zurueck (B11). */
.mb-kachel[aria-checked="false"]:not(:active):not([data-vorschau="druck"]),
.mb-chip[aria-checked="false"]:not(:active):not([data-vorschau="druck"]) {
  transition-duration: var(--mb-motion-farbe);
}

/* ===== Wortmarke (Marke 27.09.2026) ===== */
/* Lesezeichen mit ausgespartem Haken in Violett, dazu "merkbar" klein in 600. Steht oben auf den
   Seiten ohne Tab-Leiste (S1, Anmelden, Koppeln). Kein Link, kein Bedienelement. */

.mb-marke {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2xs);
  margin: 0;
  color: var(--mb-text-heading);
  font-size: var(--mb-t-heading-01);
  font-weight: var(--mb-weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;             /* wie heading-01 */
}

.mb-marke__bild {
  flex: none;
  width: calc(var(--mb-size-marke) * 30 / 42);  /* Zeichenfläche 30 × 42, das Zeichen steht an der Textkante */
  height: var(--mb-size-marke);
}

.mb-marke__zeichen {
  fill: var(--mb-action-primary);
}

.mb-marke__haken {
  fill: none;
  stroke: var(--mb-surface-page);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Formular bei Roger und Daniel (components.md, Formularfeld) ===== */
/* Label über dem Feld in body-02 600, Feld 52 hoch, Radius 16, Schrift 16 gegen den iOS-Zoom.
   Fehler am Feld mit 2 px Rand und Meldung darunter, oben eine Zusammenfassung mit Sprunglinks.
   Kein Fehler vor der ersten Eingabe, der Text am Feld und oben ist wortgleich (FS:389-391). */

.mb-formular {
  display: grid;
  gap: var(--mb-space-m);
  margin: 0;
}

.mb-feld {
  display: grid;
  gap: var(--mb-space-2xs);
}

/* Ein Feld, das die Seite ausblendet (Test eintragen mit nur einem Fach), verschwindet trotz display: grid */
.mb-feld[hidden] {
  display: none;
}

.mb-feld[hidden] {
  display: none;
}

.mb-feld__label {
  font-size: var(--mb-t-body-02);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.45;
  color: var(--mb-text-heading);
}

.mb-feld__hilfe {
  margin: 0;
  font-size: var(--mb-t-body-02);
  line-height: 1.45;
  color: var(--mb-text-muted);
}

.mb-feld__eingabe {
  width: 100%;
  min-height: var(--mb-size-feld-eltern);
  margin: 0;
  padding: 0 var(--mb-space-s);
  border: 1px solid var(--mb-border-control);
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-page);
  color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-body-01);
  line-height: 1.5;
}

.mb-feld__eingabe[aria-invalid="true"] {
  border: 2px solid var(--mb-feedback-fehler-rand);
  padding-inline: calc(var(--mb-space-s) - 1px);
}

.mb-feld__fehler {
  display: flex;
  align-items: center;
  gap: var(--mb-space-3xs);
  margin: 0;
  font-size: var(--mb-t-legal-01);
  line-height: 1.5;
  color: var(--mb-feedback-fehler-text);
}

.mb-feld__fehler[hidden] {
  display: none;
}

.mb-feld__fehler .mb-symbol {
  width: var(--mb-space-s);
  height: var(--mb-space-s);
}

/* Zusammenfassung oben, der Fokus springt beim Absenden hierher */
.mb-fehlerbox {
  display: grid;
  gap: var(--mb-space-2xs);
  margin: 0;
  padding: var(--mb-space-s);
  border: 1px solid var(--mb-feedback-fehler-kante);
  border-radius: var(--mb-radius-input);
  background: var(--mb-feedback-fehler-flaeche);
  color: var(--mb-text-heading);
  font-size: var(--mb-t-body-01);
  line-height: 1.5;
}

.mb-fehlerbox[hidden] {
  display: none;
}

.mb-fehlerbox__titel {
  margin: 0;
  font-weight: var(--mb-weight-semibold);
}

.mb-fehlerbox__liste {
  display: grid;
  gap: var(--mb-space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-fehlerbox__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--mb-size-ziel-min);
  color: var(--mb-text-link);
}

/* Feldgruppe als fieldset ohne eigenen Rahmen, die Legende sieht aus wie ein Label */
.mb-feld--gruppe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mb-feld--gruppe > legend {
  padding: 0;
  margin-bottom: var(--mb-space-2xs);
}

/* Wahl bis 5 Optionen als Zeilen mit echtem Radio (components.md, Formularfeld). 52 hoch wie ein Feld. */
.mb-wahl {
  display: grid;
  gap: var(--mb-space-2xs);
}

.mb-wahl__eintrag {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  min-height: var(--mb-size-feld-eltern);
  padding: 0 var(--mb-space-s);
  border: 1px solid var(--mb-border-control);
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-page);
  color: var(--mb-text-heading);
  font-size: var(--mb-t-body-01);
  cursor: pointer;
}

.mb-wahl__eintrag:has(input:checked) {
  border-color: var(--mb-border-gewaehlt);
  background: var(--mb-surface-stage);
}

.mb-wahl__eintrag input {
  width: var(--mb-space-m);
  height: var(--mb-space-m);
  margin: 0;
  accent-color: var(--mb-action-primary);
}

/* Erfolg nach dem Speichern bei Roger und Daniel, Fläche richtig mit Haken und Satz */
.mb-erfolg {
  display: flex;
  align-items: flex-start;
  gap: var(--mb-space-2xs);
  margin: 0;
  padding: var(--mb-space-s);
  border: 1px solid var(--mb-feedback-richtig-rand);
  border-radius: var(--mb-radius-input);
  background: var(--mb-feedback-richtig-flaeche);
  color: var(--mb-feedback-text);
  font-size: var(--mb-t-body-01);
  line-height: 1.5;
}

.mb-erfolg[hidden] {
  display: none;
}

.mb-erfolg .mb-symbol {
  color: var(--mb-feedback-symbol);
}

/* ===== Dialog und Unterblatt (components.md Dialog, T032 für den Beenden-Dialog K4) =====
   Am Handy Unterblatt von unten mit Ecken oben 24, ab 768 px Dialog 520 breit mittig mit Radius 24 und
   --mb-sh-panel. Scrim 40 %. Nur Farbe und Ecken wechseln, nichts fährt (KSK §4), bei reduzierter Bewegung sofort. */

.mb-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--mb-alpha-scrim);
}

.mb-scrim[hidden] {
  display: none;
}

.mb-dialog {
  display: grid;
  gap: var(--mb-space-m);
  width: var(--mb-size-dialog);
  max-width: 100%;
  padding: var(--mb-space-s) var(--mb-space-s) calc(var(--mb-space-s) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--mb-radius-card) var(--mb-radius-card) 0 0;
  background: var(--mb-surface-page);
  color: var(--mb-text-body);
}

.mb-dialog__kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--mb-space-xs);
}

/* Titel in der Kind-Skala wie das Zustandswort im Blatt (--mb-t-antwort, Entscheid K5 in tokens.md), components.md nennt
   heading-02 aus der Eltern-Skala, die es auf ihrer Oberfläche nicht gibt (design-auditor 27.09.2026) */
.mb-dialog__titel {
  flex: 1;
  margin: 0;
  font-size: var(--mb-t-antwort);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.25;
  color: var(--mb-text-heading);
}

/* Hauptknopf volle Breite, darunter der Textknopf (KT:526) */
.mb-dialog__aktionen {
  display: grid;
  gap: var(--mb-space-xs);
  justify-items: stretch;
}

.mb-dialog__aktionen .mb-knopf {
  width: 100%;
}

/* Solange der Dialog offen ist, scrollt die Seite dahinter nicht (KSK §4) */
.mb-dialog-offen {
  overflow: hidden;
}

@media (min-width: 768px) {
  .mb-scrim {
    align-items: center;
    padding: var(--mb-space-l);
  }

  .mb-dialog {
    padding: var(--mb-space-l);
    border-radius: var(--mb-radius-card);
    box-shadow: var(--mb-sh-panel);
  }
}

/* ===== Schalter: Zeile 56 hoch mit Wort, Zustandswort und Spur. Die ganze Zeile ist das Ziel (UX-2.2). ===== */

.mb-schalter {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  width: 100%;
  min-height: var(--mb-size-knopf);
  margin: 0;
  padding: 0 var(--mb-space-s);
  border: 1px solid var(--mb-border-hairline);
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-page);
  color: var(--mb-text-heading);
  font: inherit;
  font-size: var(--mb-t-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--mb-motion-druck-zurueck) var(--mb-motion-kurve);
}

.mb-schalter:active {
  background: var(--mb-surface-component);
  transition-duration: 0s;
}

.mb-schalter__wort {
  flex: 1;
}

.mb-schalter__stand {
  color: var(--mb-text-body);
}

/* Spur 48 × 28 aus dem Statuspunkt gerechnet, Knopf 20 wie ein Symbol. Aus ist ink-100 mit Rand, An ist Violett. */
.mb-schalter__spur {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: calc(var(--mb-size-punkt) * 6);
  height: calc(var(--mb-size-punkt) * 3.5);
  border: 1px solid var(--mb-border-control);
  border-radius: var(--mb-radius-pill);
  background: var(--mb-surface-component);
  transition:
    background-color var(--mb-motion-farbe) var(--mb-motion-kurve),
    border-color var(--mb-motion-farbe) var(--mb-motion-kurve);
}

.mb-schalter__knopf {
  position: absolute;
  top: calc(var(--mb-size-punkt) * 0.5 - 1px);
  left: calc(var(--mb-size-punkt) * 0.5 - 1px);
  width: var(--mb-size-symbol);
  height: var(--mb-size-symbol);
  border-radius: 50%;
  background: var(--mb-surface-page);
  border: 1px solid var(--mb-border-control);
  box-sizing: border-box;
  transition: transform var(--mb-motion-transform) var(--mb-motion-kurve);
}

.mb-schalter[aria-checked="true"] .mb-schalter__spur {
  border-color: var(--mb-action-primary);
  background: var(--mb-action-primary);
}

.mb-schalter[aria-checked="true"] .mb-schalter__knopf {
  border-color: var(--mb-action-primary);
  transform: translateX(calc(var(--mb-size-punkt) * 2.5));
}