/* 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;
}

html {
  font-family: var(--mb-font-sans);
  color: var(--mb-text-body);
  background: var(--mb-surface-page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* ===== 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;
}

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

/* ===== Knöpfe als Pillen ===== */

.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-pill);
  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) */
.mb-knopf--zweit {
  border-color: var(--mb-border-sekundaer);
}

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

/* Textknopf. Wort in Linkfarbe, Trefferfläche 44 */
.mb-knopf--text {
  min-height: var(--mb-size-ziel-min);
  padding: 0 var(--mb-space-2xs);
  color: var(--mb-text-link);
  font-weight: var(--mb-weight-regular);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Die Schrift steht an der Kante, die Trefferfläche ragt links darüber hinaus */
.mb-knopf--text.mb-knopf--kante {
  margin-inline-start: calc(var(--mb-space-2xs) * -1);
}

/* 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);
}

@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-l);
  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;
}

/* ===== 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-card);
  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 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-eingabe);        /* 24, iPad 28, über 16, iOS zoomt nicht */
  font-weight: var(--mb-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.02em;
  appearance: none;
  -webkit-appearance: none;
}

.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: 2px;
  text-decoration-color: var(--mb-feedback-symbol);
  text-underline-offset: 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);
}

/* 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-antwort);        /* Zustandswort, entschieden 27.09.2026 */
  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);
}

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

.mb-blatt__satz {
  margin: 0;
  font-size: var(--mb-t-text);
  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-page);
}

.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: var(--mb-space-3xs);
  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-heading);
}

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

.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) */
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);
  }

  .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);
  }

  .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-component);
  }

  .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);
}

.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));
}