/* Lernanimationen (Export aus dem Tinkify-Studio) im MINTucation-Design.
   sync.py lädt diese Datei nach dem Stylesheet des Exports; sie überschreibt dessen Farben, Schriften und Formen
   mit den Werten aus rahmen.css. Der Export selbst bleibt unverändert.
   Nicht erfasst: Farben im Bild (Canvas) – die kommen aus dem Studio (studio/src/core/style.js, PAPER). */

:root {
  --color-bg: var(--bg);
  --color-surface: var(--bg);
  --color-surface-muted: var(--tint);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--hair);
  --color-primary: var(--mint-ink);
  --color-primary-hover: var(--ink);
  --color-primary-contrast: var(--tile-ink);
  --color-primary-soft: var(--mint-soft);
  --color-success: var(--ok);
  --color-danger: var(--err);
  --color-focus: var(--focus);
  --color-backdrop: var(--backdrop);
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-dialog: none;
  --radius-md: 0;
  --radius-lg: 0;
  --font-family: var(--font-text);
  --font-family-hand: var(--font-head);
}

/* Kopf- und Fußzeile stehen im Fluss der Seite; die Animation füllt den Platz dazwischen. */
body { padding: 0; font-weight: 350; }
body > .stage, body > .bar, body > .progress { margin-inline: var(--space-3); }
body > .progress { margin-bottom: var(--space-3); }

/* Vollbild (Taste F): nur die Animation */
:fullscreen header.mt-kopf, :fullscreen footer.mt-fuss { display: none; }
:fullscreen body { padding-top: var(--space-3); }

.stage__video { border-color: var(--rule); }
.dialog { border: 2px solid var(--rule); }
.title { font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.05; }
.marker { padding: 0; }
.marker::before { display: none; }
.counter { font: 500 0.72rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
kbd { border-radius: 0; font-family: var(--font-mono); }

/* Schrittnummer als Kachel in der Fächerfarbe Physik */
.step-no {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; width: clamp(2.6rem, 4vw, 3.4rem); height: clamp(2.6rem, 4vw, 3.4rem);
  background: var(--physik); color: var(--tile-ink); border: 2px solid var(--tile-line);
  font: 700 clamp(1.1rem, 1.8vw, 1.5rem)/1 var(--font-mono); transform: none;
}
.score { font-weight: 800; color: var(--mint-ink); }

.btn { border-color: var(--hair); }
.btn:hover:not(:disabled) { border-color: var(--mint); color: var(--ink); }
.btn--primary, .btn--primary:hover:not(:disabled) { border: 2px solid var(--tile-line); }
.btn--primary { background: var(--mint); color: var(--tile-ink); }
.btn--primary:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.answer:hover:not(:disabled) { border-color: var(--mint); }
.progress { border-radius: 0; }
.progress__fill { background: var(--mint); }