/* Merkbar · Seitenrahmen und Seitenteile (Stand 27.09.2026)

   Rahmen für ganze Seiten in public/, dazu Teile, die es nur auf einer Seite gibt. Bauteile, die
   mehrere Seiten teilen, stehen in bauteile.css. Nur Semantik-Token aus tokens.css
   (tests/theme-guards.test.js). Seitenrand 16, am iPad 32, ab 1100 px 48 (SKILL lernapp-design).
   Die Textspalte ist höchstens 720 breit und steht mittig, der Text darin links bündig
   (_audit/2026-09-27-s1/04-bericht.md). */

.mb-seite {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-m);
  width: 100%;
  max-width: calc(var(--mb-size-spalte) + 2 * var(--mb-space-s));
  margin-inline: auto;
  padding:
    calc(var(--mb-space-s) + env(safe-area-inset-top, 0px))
    calc(var(--mb-space-s) + env(safe-area-inset-right, 0px))
    calc(var(--mb-space-s) + env(safe-area-inset-bottom, 0px))
    calc(var(--mb-space-s) + env(safe-area-inset-left, 0px));
}

/* Das Offline-Band trägt die Safe Area oben schon selbst */
.mb-offline:not([hidden]) + .mb-seite {
  padding-top: var(--mb-space-s);
}

.mb-seite__fuss {
  margin: 0;
}

@media (min-width: 768px) {
  .mb-seite {
    gap: var(--mb-space-l);
    max-width: calc(var(--mb-size-spalte) + 2 * var(--mb-space-l));
    padding:
      calc(var(--mb-space-xl) + env(safe-area-inset-top, 0px))
      calc(var(--mb-space-l) + env(safe-area-inset-right, 0px))
      calc(var(--mb-space-l) + env(safe-area-inset-bottom, 0px))
      calc(var(--mb-space-l) + env(safe-area-inset-left, 0px));
  }

  .mb-offline:not([hidden]) + .mb-seite {
    padding-top: var(--mb-space-xl);
  }

  .mb-anleitung {
    gap: var(--mb-space-l);
  }
}

@media (min-width: 1100px) {
  .mb-seite {
    max-width: calc(var(--mb-size-spalte) + 2 * var(--mb-space-xl));
    padding-inline: var(--mb-space-xl);
  }
}

/* ===== S1 Anleitung in 3 Schritten (UX-8.1) ===== */

/* Die Ziffer ist Text in 600, kein Kreis, keine Fläche (TY:120, Kandidat "flach statt Ebenen") */
.mb-anleitung {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.mb-schritt {
  display: grid;
  grid-template-columns: var(--mb-space-m) minmax(0, 1fr);
  row-gap: var(--mb-space-2xs);
  counter-increment: schritt;
}

.mb-schritt::before {
  content: counter(schritt);
  font-size: var(--mb-t-text);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.5;
  color: var(--mb-text-heading);
}

/* Gezeichnetes Bild. Ein Ausschnitt der Stelle in Safari, weiß mit Haarlinie (Deko), Wort und
   Symbol in Tinte. Kein Violett, weil hier nichts antippbar ist. So breit wie der Inhalt, damit
   es nicht wie ein Eingabefeld aussieht (_audit/2026-09-27-s1/07-urteil.md). */
.mb-schritt__bild {
  grid-column: 2;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--mb-space-l);
  min-height: var(--mb-size-knopf);
  min-width: var(--mb-size-knopf);
  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-size: var(--mb-t-klein);
  line-height: 1.2;
}

.mb-schritt__bild--symbol {
  justify-content: center;
  padding: 0;
}


/* ===== Seiten für Roger und Daniel (data-skala="eltern") ===== */

/* Schmale Spalte für Formulare, am Handy volle Breite, ab 768 px 520 (--mb-size-dialog) */
.mb-seite--schmal {
  max-width: calc(var(--mb-size-dialog) + 2 * var(--mb-space-s));
}

@media (min-width: 768px) {
  .mb-seite--schmal {
    max-width: calc(var(--mb-size-dialog) + 2 * var(--mb-space-l));
  }
}

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

/* Anmeldung in display-01 (tokens.md 2.3, "Begrüßung, Anmeldung") */
.mb-seite__titel {
  margin: 0;
  font-size: var(--mb-t-display-01);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--mb-text-heading);
}

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

/* Knöpfe der Eltern-Ansicht 48 hoch (tokens.md, --mb-size-knopf-eltern) */
[data-skala="eltern"] .mb-knopf {
  min-height: var(--mb-size-knopf-eltern);
}

/* Die Seite beginnt mit dem Zurück-Knopf, er steht an der Kante und trägt ein Symbol */
.mb-seite > .mb-knopf--text {
  align-self: flex-start;
}

/* ===== S2 Koppeln ===== */
/* Am Handy untereinander, am iPad Code links und QR rechts. Der Platzhalter hält die Endgröße (G15). */

.mb-kopplung {
  display: grid;
  gap: var(--mb-space-m);
  align-items: start;
}

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

.mb-kopplung__code-teil,
.mb-kopplung__meldung {
  display: grid;
  gap: var(--mb-space-s);
}

/* Der Code im Maß des Lernworts, zwei Gruppen zu 3 Ziffern, Tabellenziffern (TY:214) */
.mb-kopplung__code {
  display: flex;
  gap: var(--mb-space-s);
  min-height: calc(var(--mb-t-wort) * 1.1);
  margin: 0;
  font-size: var(--mb-t-wort);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--mb-text-heading);
}

.mb-kopplung__status {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2xs);
  margin: 0;
  font-size: var(--mb-t-text);
  line-height: 1.5;
  color: var(--mb-text-body);
}

.mb-kopplung__qr {
  display: grid;
  justify-items: start;
}

/* Weiße Ruhezone von 4 Modulen um den Code gehört zur Norm, hier als Innenabstand */
.mb-qr {
  display: block;
  width: var(--mb-size-qr);
  height: var(--mb-size-qr);
  padding: var(--mb-space-s);
  border: 1px solid var(--mb-border-hairline);
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-page);
  shape-rendering: crispEdges;
}

.mb-qr__module {
  fill: var(--mb-text-heading);
}

/* Platzhalter erscheinen erst nach 400 ms, vorher bleibt die Fläche weiß (lernapp-design, Zustand laden) */
.mb-platzhalter {
  display: block;
  border-radius: var(--mb-radius-input);
  background: var(--mb-surface-component);
  animation: mb-platzhalter-verzug 0s var(--mb-motion-kurve) var(--mb-motion-skeleton-verzug) backwards;
}

.mb-platzhalter--code {
  width: calc(var(--mb-t-wort) * 4);
  height: calc(var(--mb-t-wort) * 1.1);
}

.mb-platzhalter--qr {
  width: var(--mb-size-qr);
  height: var(--mb-size-qr);
}

@keyframes mb-platzhalter-verzug {
  from { visibility: hidden; }
}

@media (min-width: 768px) {
  .mb-kopplung {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--mb-space-xl);
  }

  .mb-kopplung__meldung {
    grid-column: 1 / -1;
  }
}

.mb-platzhalter--zeile {
  width: 100%;
  height: var(--mb-size-feld-eltern);
}

/* Die Statuszeile hält beim Laden schon ihren Platz, sonst springt der QR darunter (G15, gemessen 0,2) */
.mb-kopplung[data-zustand="laden"] .mb-kopplung__status {
  visibility: hidden;
}