/* ==========================================================================
   „Zerlegen“ – Teile und Ganzes am Zehnerstreifen
   Designsprache aus der Schüttelbox übernommen (Farbwelt, Pillen, Panels).
   Kindgerichtete Texte in Grundschrift; Lehrkraft-Panels dürfen system-ui.
   ========================================================================== */

@font-face {
  font-family: 'Grundschrift';
  src: url('fonts/Grundschrift-Regular.otf') format('opentype');
  font-weight: normal;
}
@font-face {
  font-family: 'Grundschrift';
  src: url('fonts/Grundschrift-Bold.otf') format('opentype');
  font-weight: bold;
}

:root {
  /* Zellgröße global, damit auch Geschwister-Elemente (z. B. .forsch-decomp) sie
     für Abstände nutzen können; .strip/.strip--sm überschreiben lokal. */
  --cell: clamp(34px, 7.6vh, 66px);
  --bg: #E7EDEF;          /* Seitenhintergrund */
  --panel: #A7C4DA;       /* Flächen (Streifen-Rahmen, Häuser, Karten) */
  --ink: #1C2B45;         /* Text */
  --accent: #3E8E8E;      /* Aktionen / Aktiv-Zustände */
  --bead: #24344E;        /* Plättchen dunkelblau */
  --whole-blue: #2B5C8A;  /* das GANZE immer blau */
  --part-red: #9A3B3B;    /* die TEILE immer rot */
  --divider: #B03A3A;     /* rote Trennlinie im Streifen */
  --ok: #3E8E5A;          /* Richtig-Feedback (grün, gedämpft) */
  --cover: #33445E;       /* Verdeckungs-Platte (dunkel) */
  --btn-bg: #FFFFFF;
  --grey: #C4CCD2;        /* Kompetenz „nicht geübt“ */
  --yellow: #E5B93F;      /* Kompetenz „geübt“ */
  --shadow: 0 3px 8px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; touch-action: none; }
body { background: var(--bg); color: var(--ink);
  font-family: 'Grundschrift', system-ui, sans-serif; }
/* Buttons/Inputs erben die Schrift NICHT automatisch (Browser-Default Arial) */
button, input, select, textarea { font-family: inherit; }

/* Grundschrift sitzt optisch etwas hoch -> Zahlen/Labels leicht nach unten. */
.digit > span, .box-num, .chip-num, .trio-num, .zh-num, .zh-total,
.strip-num, .task-prompt-num, .card-label, .dot-count { position: relative; }

#app { height: 100vh; height: 100dvh; overflow: hidden; }

/* Screens: nur einer sichtbar. */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
#screen-menu.active { display: block; overflow-y: auto; touch-action: pan-y;
  overscroll-behavior: contain; }

/* ---- Gemeinsame Buttons (Schüttelbox-Stil) ------------------------------- */
.round { width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--btn-bg); color: var(--ink); box-shadow: var(--shadow);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pill { height: 56px; padding: 0 22px; border-radius: 28px; border: none;
  background: var(--btn-bg); color: var(--ink); font-size: 22px; box-shadow: var(--shadow);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pill.accent, .round.accent { background: var(--accent); color: #fff; }
.pill.active, .round.active { outline: 3px solid var(--accent); outline-offset: 2px; }
.pill[disabled], .round[disabled] { opacity: 0.4; cursor: default; box-shadow: none; }
button svg { display: block; }
.bare { background: transparent; box-shadow: none; }
.bare:hover { background: rgba(255,255,255,0.5); }

/* ==========================================================================
   1) STARTMENÜ
   ========================================================================== */
#screen-menu { padding: 0 0 40px; }
.menu-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px 20px 4px; gap: 16px; }
.menu-title { font-weight: bold; font-size: clamp(30px, 4.4vh, 46px); color: var(--ink);
  letter-spacing: 0.5px; }
.menu-head-left, .menu-head-right { display: flex; align-items: center; gap: 12px; }
.menu-head-left { justify-self: start; }
.menu-head-right { justify-self: end; }
/* Logo + Titel mittig in der Kopfleiste (zwischen Zahnrad links und Benutzer rechts). */
.menu-head-center { justify-self: center; display: flex; align-items: center; gap: 12px; }

/* App-Icon im Menü-Kopf, neben dem Titel, mit abgerundeten Ecken. */
.menu-logo { width: 46px; height: 46px; border-radius: 11px; object-fit: cover;
  box-shadow: var(--shadow); flex: none; }

/* Zahnrad mit Erwachsenen-Sperre (Fortschrittsring beim Halten) */
.gear-wrap { position: relative; width: 48px; height: 48px; touch-action: none; }
/* Erwachsenen-Hinweis nach Kurz-Tipp aufs Zahnrad (blendet sich selbst aus) */
.gear-hint { position: absolute; top: 100%; left: 0; margin-top: 6px; padding: 5px 10px;
  background: #33445E; color: #fff; font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px; border-radius: 8px; white-space: nowrap; opacity: 0;
  pointer-events: none; z-index: 6; }
.gear-hint.show { animation: gear-hint 1.8s ease forwards; }
@keyframes gear-hint {
  0% { opacity: 0; transform: translateY(-2px); }
  12% { opacity: 1; transform: none; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}
.gear-btn { width: 48px; height: 48px; border-radius: 50%; }
.gear-ring { position: absolute; top: -3px; left: -3px; pointer-events: none; }
.gear-ring circle { fill: none; stroke: var(--accent); stroke-width: 3;
  stroke-linecap: round; opacity: 0; transition: opacity 120ms; }
.gear-wrap.holding .gear-ring circle { opacity: 1; }

/* Avatar oben rechts */
.avatar { width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: var(--shadow); overflow: hidden; }
.avatar svg { width: 68%; height: 68%; }
.avatar-name { font-size: 18px; color: var(--ink); font-weight: bold; max-width: 8ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Matheforscher-Protokoll v3.0: Ein integrierter Host (z. B. urff.app) hat ein
   Kind-Profil übergeben und übernommen (matheforscher.js / mfOnContext) -> die
   App-eigene Benutzerverwaltung (Auswahl, Anlegen, Wechseln, Löschen) wird
   ausgeblendet, da der Host sie bereits stellt. Name bleibt sichtbar (reine
   Anzeige, keine Interaktion). */
body.mf-profile-adopted #btn-avatar { display: none; }
body.mf-profile-adopted .tab[data-tab="children"] { display: none; }

.menu-section-label { font-size: 20px; font-weight: 700; color: #5a6b80; padding: 6px 24px 2px; }
.menu-section-hint { margin-left: 5px; font-size: 14px; font-weight: 400; opacity: 0.82; }

/* Menü-Texte in Standardschrift (system-ui) wie die Lehrkraft-Panels; ZIFFERN bleiben
   überall Grundschrift (Body-Default), da sie in eigenen Elementen sitzen. */
.menu-title, .menu-section-label, .avatar-name,
.forsch-banner-title, .forsch-banner-sub {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Zahlenwahl */
#number-chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  padding: 8px 20px 6px; }
.chip { position: relative; width: 74px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
.chip-btn { width: 64px; height: 64px; border-radius: 50%; border: 3px solid transparent;
  background: #fff; color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
  font-weight: bold; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.chip.active .chip-btn { border-color: var(--accent); }
.chip:not(.active) .chip-btn { opacity: 0.55; }
.chip-num { top: 0.1em; }
/* Kompetenz-Segmentbalken (K1..K6) unter jedem Chip; gleiche Optik als
   Fortschrittsbalken auf den Aufgaben-Karten (.card-arc, ein Segment je Zahl) */
.chip-arc, .card-arc { display: flex; gap: 2px; height: 7px;
  border-radius: 4px; overflow: hidden; }
.chip-arc { width: 64px; }
.card-arc { width: 70%; max-width: 120px; }
.chip-arc span, .card-arc span { flex: 1; background: var(--grey); }
.chip-arc span.practiced, .card-arc span.practiced { background: var(--yellow); }
.chip-arc span.mastered, .card-arc span.mastered { background: var(--ok); }

/* Aufgabenkarten */
#task-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  padding: 10px 24px 8px; max-width: 1120px; margin: 0 auto; }
/* Forschen-Banner sitzt in eigenem Slot ÜBER den Aufgaben, gleiche Breite wie das Grid. */
#forschen-slot { max-width: 1120px; margin: 0 auto; padding: 14px 24px 10px; }
#forschen-slot:empty { display: none; }
#forschen-slot .forsch-banner { width: 100%; }
@media (max-width: 900px) { #task-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { #task-cards { grid-template-columns: repeat(2, 1fr); } }
.card { position: relative; background: #fff; border-radius: 22px; box-shadow: var(--shadow);
  cursor: pointer; padding: 14px 12px 12px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; border: 3px solid transparent; transition: transform 120ms; }
.card:hover { transform: translateY(-3px); }
.card:active { transform: translateY(0); }
.card-preview { width: 100%; height: 66px; display: flex; align-items: center;
  justify-content: center; color: var(--ink); }
.card-preview svg { max-width: 100%; max-height: 100%; }
/* Menü-Symbole t4/t5: eigene Spalten statt unterschiedlich breiter Textfolgen.
   Die kleinen optischen Versätze gleichen die Grundschrift-Glyphen aus. */
.card-preview-decompose { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cpd-whole { color: var(--whole-blue); font-weight: bold; font-size: 26px;
  position: relative; top: 0.06em; }
.cpd-parts { display: grid; grid-template-columns: 1em 20px; align-items: center;
  column-gap: 12px; font-size: 24px; }
.cpd-part { color: var(--part-red); font-weight: bold; text-align: center;
  position: relative; top: 0.06em; }
.cpd-gap { width: 20px; height: 20px; border: 2.5px solid var(--part-red); border-radius: 5px;
  position: relative; top: 0.08em; }
.card-preview-family { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cpf-whole { color: var(--whole-blue); font-weight: bold; font-size: 20px;
  position: relative; top: 0.06em; }
.cpf-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 3px 12px;
  font-weight: bold; font-size: 13px; }
.cpf-eq { display: grid; grid-template-columns: 1.1em 0.9em 1.1em; align-items: center; }
.cpf-eq > span { text-align: center; line-height: 1; }
.cpf-part { color: var(--part-red); }
.cpf-whole-num { color: var(--whole-blue); }
.cpf-op { color: var(--ink); position: relative; top: -0.02em; }
.card-label { font-size: 19px; text-align: center; line-height: 1.15; top: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Fortschritts-Slot der Karten: feste Höhe (kein Layout-Sprung), Stern wenn voll */
.card-progress { height: 16px; width: 100%; display: flex; align-items: center;
  justify-content: center; }
.card-progress.full { color: var(--yellow); }
/* Gesamtstern am Ende der Zahlen-Chip-Zeile */
.chip-star { align-self: center; display: flex; color: var(--yellow); }
.card.card-forschen { background: var(--panel); border-color: transparent; }
.card.card-forschen .card-label { color: var(--bead); }
.card.card-mixed { background: #EDE7DA; }
/* Forschen als hervorgehobenes, breites Banner (spannt alle Spalten) */
.card.forsch-banner { grid-column: 1 / -1; flex-direction: row; justify-content: center;
  gap: 16px; padding: 16px 22px; border-width: 3px; }
.forsch-banner .forsch-banner-icon { display: flex; color: var(--bead); }
.forsch-banner .forsch-banner-icon svg { width: 34px; height: 34px; }
.forsch-banner .forsch-banner-text { display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.1; }
.forsch-banner .forsch-banner-title { font-size: 26px; font-weight: bold; color: var(--bead); }
.forsch-banner .forsch-banner-sub { font-size: 16px; color: var(--bead); opacity: 0.8; }
/* Mini-Vorschau des Forscherfelds (Streifen + Kamera) neben dem Text */
.forsch-banner-preview { display: flex; align-items: center; gap: 8px; margin-left: 6px; opacity: 0.85; }
.forsch-banner-cam { display: flex; color: var(--bead); }
@media (max-width: 640px) {
  .forsch-banner-preview { display: none; }   /* schmale Breiten: kein Textumbruch */
}

/* ==========================================================================
   2) ÜBUNGS-SCREEN
   ========================================================================== */
#screen-task { padding: 0; }
.task-top { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 4px; gap: 14px; flex: none; }
.series-dots { display: flex; gap: 10px; align-items: center; }
.series-dot { width: 15px; height: 15px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 2px rgba(28,43,69,0.2); }
.series-dot.done { background: var(--accent); box-shadow: none; }

.task-body { flex: 1; display: flex; flex-direction: row; min-height: 0; min-width: 0;
  padding: 6px 18px 18px; gap: 16px; }
.task-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.4vh; }

/* Auftrags-/Ziffernzeile über dem Material */
.task-prompt-num { font-weight: bold; font-size: clamp(44px, 9vh, 92px);
  line-height: 1; color: var(--whole-blue); top: 0.08em; }
.task-prompt-num.part { color: var(--part-red); }
/* „Lege die Menge dazu": Kopf zeigt Start (blau) + dazu (rot) */
.dazu-head { display: flex; align-items: center; justify-content: center; gap: 18px; }
.dazu-head .dazu-plus, .dazu-head .dazu-eq { font-weight: bold;
  /* Gesamtgröße der Zeile beibehalten; die niedrig gezeichneten Zeichen nur
     minimal höher skalieren, ohne sie insgesamt zu vergrößern. */
  display: inline-block; font-size: clamp(44px, 9vh, 92px); line-height: 1;
  transform: scaleY(1.04); transform-origin: center; color: var(--ink); }

/* ---- Zehnerstreifen ------------------------------------------------------ */
.strip { position: relative; --cell: clamp(34px, 7.6vh, 66px);
  padding: calc(var(--cell) * 0.14); background: var(--panel); border-radius: 18px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.10); }
.strip--sm { --cell: clamp(24px, 4.4vh, 40px); border-radius: 12px; }
.strip-inner { display: flex; position: relative; }
.cell { width: var(--cell); height: var(--cell); display: flex; align-items: center;
  justify-content: center; position: relative; }
/* dünne Linien zwischen den Zellen */
.cell + .cell::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: rgba(28,43,69,0.14); }
/* position:relative ist Pflicht: der Glanzpunkt (::after) ist absolut positioniert
   und würde sonst am nächsten positionierten Vorfahren hängen. In der Block-
   darstellung (.blk ohne eigene Positionierung) landete er bis 2026-07-24 am
   #screen-task und wurde als 16 % der GANZEN Fläche gemalt -> riesige weiße
   Ellipse (nur bei „Plättchen glänzend", also flatDots aus, sichtbar). */
.dot { position: relative; width: 74%; height: 74%; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 2px rgba(28,43,69,0.22); }
.dot.filled { background: var(--bead); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }
.dot.filled::after { content: ''; position: absolute; left: 30%; top: 26%; width: 16%;
  height: 16%; border-radius: 50%; background: rgba(255,255,255,0.30); }
/* Einstellung „Plättchen flach": Glanzpunkt (Kugel-Spiegelung) ausblenden */
.flat-dots .dot.filled::after { display: none; }
.dot.pop { animation: pop 180ms ease-out; }
.dot.pulse { animation: pulse 460ms ease-in-out; }
/* leere Zellen schimmern kurz (1a, zu wenig gelegt) – verrät KEINE Anzahl */
.dot.shimmer { animation: shimmer 620ms ease-in-out; }
/* t1d/t5: weggenommene Plättchen bleiben als blasse „Geister" sichtbar
   (das Ganze bleibt rekonstruierbar – nie einfach löschen) */
.dot.ghost { background: var(--bead); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10); opacity: 0.22; }
.dot.ghost::after { display: none; }

/* Struktur-Reveal: fehlende Plättchen bis zur Landmarke kurz als Geist aufblitzen */
.dot.ghost-flash { background: var(--bead); opacity: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
  animation: ghost-flash 760ms ease-in-out; }
.dot.ghost-flash::after { display: none; }
/* überzählige Plättchen (Falsch-zu-viel) treten blass zurück */
.dot.dimmed { opacity: 0.28; filter: saturate(0.6); transition: opacity 160ms ease; }

/* „Kraft der Fünf“: dickere Linie nach Zelle 5, ragt oben/unten leicht heraus */
.strip-fiveline { position: absolute; top: -4px; bottom: -4px; width: 3px;
  background: var(--ink); opacity: 0.55; border-radius: 3px; transform: translateX(-1.5px);
  pointer-events: none; }

/* rote Trennlinie (Zerlegung) – ragt oben/unten deutlich über den Streifen
   hinaus (~12 % der Streifenhöhe je Seite), mit abgerundeten Enden. */
.strip-split { position: absolute; top: calc(var(--cell) * -0.28); bottom: calc(var(--cell) * -0.28);
  width: 6px; background: var(--divider); border-radius: 3px; transform: translateX(-3px);
  pointer-events: none; z-index: 4; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.strip-split.flash { animation: split-flash 420ms ease-out; }
/* Griff (weißer Kreis mit ⟷) unten an der Linie – zeigt die Verschiebbarkeit. */
.strip-split-handle { position: absolute; left: 50%; bottom: calc(var(--cell) * -0.44);
  transform: translateX(-50%); width: clamp(34px, 4.4vh, 44px); height: clamp(34px, 4.4vh, 44px);
  border-radius: 50%; background: #fff; color: var(--divider); box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* unsichtbarer, großzügiger Fangbereich um den Griff (erleichtert das Greifen) */
.strip-split-handle::before { content: ''; position: absolute; left: 50%; top: 50%;
  width: 220%; height: 220%; transform: translate(-50%, -50%); border-radius: 50%; }
.strip--sm .strip-split-handle { display: none; }
/* großzügige Trefferzone (≥44 px) über die ganze Streifenhöhe inkl. Griff */
.strip-drag { position: absolute; left: 0; right: 0; top: calc(var(--cell) * -0.4);
  bottom: calc(var(--cell) * -0.9); z-index: 6; cursor: grab; touch-action: none;
  background: transparent; }
.strip-drag:active { cursor: grabbing; }

/* Verdeckungs-Platte */
.strip-cover { position: absolute; top: calc(var(--cell) * 0.14 - 4px);
  bottom: calc(var(--cell) * 0.14 - 4px); background: var(--cover); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 3;
  transition: transform 360ms ease, opacity 360ms ease; }
.strip-cover.reveal { transform: translateY(-14px); opacity: 0; }
/* 3d: Abdeckplatte gleitet nach rechts weg */
.strip-cover.reveal-right { transform: translateX(115%); opacity: 0; }

/* interaktive Tipp-Zonen an den Zellgrenzen */
.strip-gaps { position: absolute; inset: 0; z-index: 5; }
.gap { position: absolute; top: -10px; bottom: -10px; width: calc(var(--cell) * 0.6);
  transform: translateX(-50%); border: none; background: transparent; cursor: pointer; padding: 0; }
.gap::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px;
  transform: translateX(-2.5px); border-radius: 5px; background: var(--divider); opacity: 0;
  transition: opacity 120ms; }
.gap:hover::after { opacity: 0.28; }
.strip.flash-ok { animation: flash-ok 700ms ease-out; }
.strip.wobble, .box.wobble, .digit.wobble, .trio-cell.wobble, .eq-row.wobble { animation: wobble 400ms ease-in-out; }

/* Bestätigungs-Häkchen (1a) */
.confirm-btn { margin-top: 1vh; }

/* ---- v8: Übungen t1e / t3e / t3f ----------------------------------------- */
/* Zehnerfeld (2×5) und Blockdarstellung (Zweier-Türme) – Plättchen-Optik wie .dot,
   damit „Plättchen flach" (body.flat-dots) auch hier greift. */
.tf10 { --fc: clamp(22px, 3.8vh, 36px); position: relative; display: grid;
  grid-template-columns: repeat(5, var(--fc)); grid-template-rows: repeat(2, var(--fc));
  padding: calc(var(--fc) * 0.18); background: var(--panel); border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.10); }
.tf10-cell { width: var(--fc); height: var(--fc); display: flex; align-items: center;
  justify-content: center; }
/* Kraft der Fünf: kräftige Mittellinie zwischen oberer und unterer Fünferreihe */
.tf10::after { content: ''; position: absolute; left: calc(var(--fc) * 0.18); right: calc(var(--fc) * 0.18);
  top: 50%; height: 3px; transform: translateY(-1.5px); background: var(--ink); opacity: 0.55;
  border-radius: 3px; pointer-events: none; }
.blk { --bc: clamp(22px, 3.8vh, 36px); display: flex; align-items: flex-end;
  gap: calc(var(--bc) * 0.16); padding: calc(var(--bc) * 0.18); background: var(--panel);
  border-radius: 12px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.10); }
.blk-col { display: flex; flex-direction: column; gap: calc(var(--bc) * 0.16); }
.blk-cell { width: var(--bc); height: var(--bc); display: flex; align-items: center; justify-content: center; }

/* t1e: Quell-Darstellung oben, darunter Streifen (lay) bzw. drei Karten (match) */
.t1e-src { display: flex; justify-content: center; margin-bottom: 1.4vh; }
.t1e-opts { display: flex; gap: clamp(10px, 3vw, 26px); justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 1vh; }
.t1e-opt { padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; }
.t1e-opt .tf10, .t1e-opt .blk { --fc: clamp(14px, 2.4vh, 24px); --bc: clamp(14px, 2.4vh, 24px); }
.t1e-opt .strip { --cell: clamp(13px, 2.2vh, 22px); }
.t1e-opt.picked-ok { border-color: var(--ok); }

/* t3e: Richtungspfeil am festen Strich + animiertes Rutschen der Linie zur Kontrolle */
.strip-shift .strip-split { transition: left 480ms cubic-bezier(.34,1.1,.6,1); }
.strip-shift-arrow { position: absolute; left: 50%; bottom: calc(var(--cell) * -0.54);
  transform: translateX(-50%); color: var(--divider); display: flex; pointer-events: none;
  transition: opacity 220ms ease; }
.strip-shift-arrow.gone { opacity: 0; }

/* t3f: zwei ziehbare Striche (Griffe direkt greifbar) + Gefunden-Zeile */
.strip-split--tri { z-index: 5; }
.tri-handle { pointer-events: auto; touch-action: none; cursor: grab; z-index: 7; }
.tri-handle:active { cursor: grabbing; }
/* Gefunden-Zeile: Chip = größerer Mini-Streifen + Zahlzeile (gelegte Reihenfolge)
   darunter. --chip-w/-h/-sh setzt die Übung aus n -> leere Slots reservieren die
   volle Chipgröße (kein Reflow, auch bei n=10). */
.t3f-found { display: flex; gap: clamp(8px, 2vw, 20px); justify-content: center; flex-wrap: wrap;
  margin-top: calc(var(--cell) * 0.9); min-height: var(--chip-h, 74px); align-items: flex-start; }
.t3f-chip { box-sizing: border-box; width: var(--chip-w, 96px); height: var(--chip-h, 74px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 8px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.t3f-chip.empty { background: transparent; box-shadow: none;
  border: 2px dashed rgba(28,43,69,0.22); }
.t3f-mini { display: flex; }
.t3f-mini svg { display: block; height: var(--chip-sh, 44px); width: auto; }
/* Zahlzeile: Ziffern Grundschrift/Teile-rot, „+" neutral-dezent; feste Spalten
   -> die Pluszeichen stehen exakt untereinander (wie t5). */
.t3f-nums { display: flex; align-items: center; justify-content: center; line-height: 1; }
.t3f-n { display: inline-block; width: 15px; text-align: center; font-weight: bold;
  font-size: 21px; color: var(--part-red); }
.t3f-op { display: inline-block; width: 13px; text-align: center; font-size: 16px;
  color: var(--ink); opacity: 0.5; }
.t3f-chip.enter { animation: floor-in 300ms ease-out; }
.t3f-chip.pulse { animation: pulse 460ms ease-in-out; }   /* schon gefunden, andere Reihenfolge */

/* ---- Ziffernleiste / Zahlkarten ------------------------------------------ */
.digits { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: 96vw; margin-top: 1vh; }
.digit { width: clamp(46px, min(8vh, 7.2vw), 72px); height: clamp(46px, min(8vh, 7.2vw), 72px);
  border-radius: 14px; border: none; background: #fff; color: var(--ink); box-shadow: var(--shadow);
  cursor: pointer; font-weight: bold; font-size: clamp(26px, 4.6vh, 40px);
  display: inline-flex; align-items: center; justify-content: center; }
.digit > span { top: 0.1em; }
/* Neben dem Zahlenhaus-Panel (t3a/t3b) ist ~26% weniger Breite: Leiste kompakter,
   damit 0-10 auch dort einzeilig bleibt (Befund iPad: die 10 brach um). */
#screen-task.with-panel .digits { gap: 8px; }
#screen-task.with-panel .digit { width: clamp(40px, min(7vh, 5vw), 56px);
  height: clamp(40px, min(7vh, 5vw), 56px); font-size: clamp(22px, 3.8vh, 30px); }
.digit.active { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Diagnostik A1/A2: Ziffernleiste während Zeige-/Blitzphase gesperrt (kein Vorab-Tipp) */
.digits.disabled { pointer-events: none; opacity: .35; }
/* Diagnostik: neutrale Eingabe-Quittierung – getippte Ziffer gefüllt hervorgehoben,
   übrige Leiste zurückgenommen (kein Richtig/Falsch, nur „erkannt"). */
.digit.picked { background: var(--accent); box-shadow: var(--shadow); animation: pulse 200ms ease-out; }
.digit.picked > span { color: #fff; }
.digits.picked-bar { opacity: 1; }                      /* gewählte Ziffer bleibt klar statt blass */
.digits.picked-bar .digit:not(.picked) { opacity: .4; }

/* Große Zahlkarten (Blitzblick 3 Karten) */
.cards-row { display: flex; gap: 4vw; justify-content: center; }
.numcard { width: clamp(60px, 12vh, 108px); height: clamp(74px, 15vh, 132px);
  border-radius: 18px; border: none; background: #fff; color: var(--ink); box-shadow: var(--shadow);
  cursor: pointer; font-weight: bold; font-size: clamp(38px, 8vh, 72px);
  display: inline-flex; align-items: center; justify-content: center; }
.numcard.wobble { animation: wobble 400ms ease-in-out; }
.numcard > span { top: 0.08em; }

/* ---- Antwort-Kästchen (Teile/Ganzes) ------------------------------------- */
.parts-boxes { display: flex; gap: 6vw; justify-content: center; }
.box { position: relative; width: clamp(60px, 11vh, 100px); height: clamp(60px, 11vh, 100px);
  border-radius: 16px; background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; border: 4px solid var(--part-red);
  cursor: pointer; }
.box.whole { border-color: var(--whole-blue); }
.box.active { outline: 3px solid var(--accent); outline-offset: 3px; }
.box-num { font-weight: bold; font-size: clamp(34px, 6vh, 56px); top: 0.08em;
  color: var(--part-red); }
.box.whole .box-num { color: var(--whole-blue); }
.box-num.fly, .trio-num.fly { animation: pop 220ms ease-out; }

/* Trio als Zahlenhaus-Dach (3c, t4) */
.trio { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.trio-parts { display: flex; gap: 6vw; }
.trio-cell { position: relative; width: clamp(58px, 10.5vh, 96px); height: clamp(58px, 10.5vh, 96px);
  border-radius: 16px; background: #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; border: 4px solid var(--part-red);
  cursor: pointer; }
.trio-cell.whole { border-color: var(--whole-blue); }
.trio-cell.active { outline: 3px solid var(--accent); outline-offset: 3px; }
.trio-num { font-weight: bold; font-size: clamp(32px, 5.6vh, 52px); top: 0.08em; color: var(--part-red); }
.trio-cell.whole .trio-num { color: var(--whole-blue); }
.trio-plus { font-weight: bold; font-size: 4vh; color: var(--ink); align-self: center; }

/* Aufgabenzeilen (t1d „Dazu und wieder weg", t5 „Aufgabenfamilie") */
.eq-stack { display: flex; flex-direction: column; gap: clamp(24px, 4.6vh, 42px);
  align-items: center; position: relative; }
/* Überkreuzpfeile (t1d-Abschluss): dieselben Zahlen in beiden Aufgaben verbinden */
.eq-arrows { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.eq-arrows path { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.6;
  animation: arrow-in 600ms ease-out; }
.eq-arrows .arrow-a { stroke: var(--part-red); }
.eq-arrows .arrow-n { stroke: var(--whole-blue); }
.eq-row { display: flex; align-items: center; gap: 12px; }
/* Feste Spaltenbreiten: Zahlen/Zeichen stehen über die Zeilen hinweg exakt
   untereinander (Grundschrift-Ziffern sind unterschiedlich breit). */
.eq-num { position: relative; top: 0.08em; font-weight: bold;
  font-size: clamp(30px, 5.5vh, 52px); color: var(--part-red); width: 2.1ch; text-align: center; }
.eq-num.whole { color: var(--whole-blue); }
.eq-op { position: relative; top: 0.04em; font-weight: bold;
  font-size: clamp(24px, 4.4vh, 42px); color: var(--ink); width: 1.1ch; text-align: center; }
.eq-row .box { width: clamp(46px, 8vh, 74px); height: clamp(46px, 8vh, 74px); border-width: 3px; }
.eq-row .box .box-num { font-size: clamp(26px, 4.6vh, 44px); }
.eq-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 1.2vh 5vw; justify-content: center; }
.eq-grid--single { grid-template-columns: auto; }
/* Zahlentrio für t5: Ganzes oben, Linien zu den Teilen (wie Forschen-Dreieck) */
.family-tri { display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: bold; font-size: clamp(28px, 5vh, 48px); }
.family-tri .ft-whole { position: relative; top: 0.08em; color: var(--whole-blue); }
.family-tri .ft-lines { width: clamp(120px, 26vh, 190px); height: clamp(18px, 3.6vh, 32px); }
.family-tri .ft-lines line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
.family-tri .ft-parts { display: flex; justify-content: space-between; width: clamp(120px, 26vh, 190px); }
.family-tri .ft-part { position: relative; top: 0.08em; color: var(--part-red); }
.family-tri .ft-whole.pulse, .family-tri .ft-part.pulse { animation: pulse 460ms ease-in-out; display: inline-block; }

/* Abschluss-Karte einer Serie */
#series-done { position: absolute; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center; background: rgba(20,32,52,0.35); }
#series-done.show { display: flex; }
.done-card { background: #fff; border-radius: 24px; box-shadow: 0 16px 48px rgba(0,0,0,0.30);
  padding: 26px 34px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 16px; max-width: 90vw; }
.done-title { font-size: 30px; font-weight: bold; }
.done-sub { font-size: 22px; color: #5a6b80; }
.done-arc { display: flex; gap: 4px; height: 12px; width: 180px; border-radius: 6px; overflow: hidden; }
.done-arc span { flex: 1; background: var(--grey); }
.done-arc span.practiced { background: var(--yellow); }
.done-arc span.mastered { background: var(--ok); }
.done-actions { display: flex; gap: 14px; }
.done-card.celebrate { animation: pulse 700ms ease-in-out 2; }

/* ==========================================================================
   3) ZAHLENHAUS (Seiten-Panel)
   ========================================================================== */
.zh-panel { flex: 0 0 26%; min-width: 200px; max-width: 320px; display: flex;
  flex-direction: column; transition: flex-basis 260ms ease, opacity 260ms ease; }
.zh-panel.hidden { display: none; }
.zh-roof { position: relative; height: 12vh; min-height: 62px; }
.zh-roof-shape { position: absolute; inset: 0; background: var(--panel);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.08)); }
.zh-total { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 2;
  width: 7vh; height: 7vh; min-width: 48px; min-height: 48px; background: #fff;
  color: var(--whole-blue); font-weight: bold; font-size: 3.6vh; border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; }
.zh-total > span { top: 0.1em; }
.zh-body { position: relative; flex: 1; min-height: 0; background: var(--panel);
  border-top: 2px solid rgba(28,43,69,0.16); border-radius: 0 0 16px 16px;
  overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.zh-stack { position: relative; min-height: 100%; padding: 8px 0; display: flex; flex-direction: column; }
.zh-stack::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px;
  transform: translateX(-50%); background: var(--divider); }
.zh-stack.zh-noentries::after { display: none; }   /* leeres Haus: kein Trennstrich */
.zh-floor { position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-around; padding: 5px 0; min-height: 6vh; }
.zh-floor + .zh-floor { border-top: 1.5px solid rgba(28,43,69,0.12); }
.zh-floor.enter { animation: floor-in 300ms ease-out; }
/* 3a: Platzhalter-Stockwerke (noch nicht gefundene Zerlegungen) */
.zh-floor.placeholder { opacity: 0.9; }
.zh-num.zh-ph { background: transparent; box-shadow: none; border: 2.5px dashed rgba(28,43,69,0.35); }
.zh-floor.hint-pulse { animation: pulse 620ms ease-in-out 2; }
/* 3b: gesammelte Stockwerke mit Rolladen abgedeckt (Sand/Beige, Streifen-Optik) */
.zh-floor.covered { justify-content: center; }
.zh-blind { width: 82%; height: 5.4vh; min-height: 42px; border-radius: 12px;
  background: repeating-linear-gradient(180deg, #E4D9BE 0 6px, #D3C39E 6px 12px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.10); }
.zh-num { width: 5.4vh; height: 5.4vh; min-width: 42px; min-height: 42px; background: #fff;
  color: var(--part-red); font-weight: bold; font-size: 2.9vh; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.16); display: flex; align-items: center; justify-content: center; }
.zh-num > span { top: 0.1em; }
.zh-empty { color: #5a6b80; font-size: 15px; text-align: center; padding: 16px 8px;
  font-family: system-ui, sans-serif; }
.zh-roof.complete .zh-total { box-shadow: 0 0 0 3px #E3AE3C, 0 2px 5px rgba(0,0,0,0.18); }
.zh-panel.celebrate { animation: pulse 700ms ease-in-out 2; }
/* Foto-Button (Forschen) */
.zh-cam { position: relative; z-index: 3; flex: none; width: 5.6vh; height: 5.6vh;
  min-width: 44px; min-height: 44px; border: none; border-radius: 50%; background: var(--accent);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 7px rgba(0,0,0,0.18); }
.zh-cam svg { width: 60%; height: 60%; }
.zh-cam[disabled] { background: #c4cace; color: #eef1f2; box-shadow: none; cursor: default; }

/* Forschen: Stepper + Live-Zerlegung */
.forsch-controls { display: flex; align-items: center; gap: 14px; }
.forsch-random { transition: transform 120ms ease; }
.forsch-random:active { transform: scale(0.96); }
.forsch-total { min-width: 60px; text-align: center; font-weight: bold;
  font-size: clamp(40px, 8vh, 80px); color: var(--whole-blue); }
.forsch-decomp { display: flex; align-items: center; gap: 16px; font-weight: bold;
  font-size: clamp(30px, 6vh, 58px); margin: 6px 0 calc(var(--cell) * 0.45); }
.forsch-decomp .a, .forsch-decomp .b { color: var(--part-red); min-width: 1.2ch; text-align: center; }
.forsch-decomp .sep { color: #8494a6; }
/* Forschen: tappbare, abdeckbare Teil-Zahlen (Zahl + Menge verstecken) */
.forsch-part { cursor: pointer; border-radius: 10px; padding: 0 6px; transition: background 120ms; }
.forsch-part.covered { color: transparent; background: var(--cover);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
/* Forschen: Ansicht-Umschalter (und / + / Dreieck) – unter den Zahlen, mit Abstand */
.forsch-fmtrow { display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: calc(var(--cell) * 2.0); }
.forsch-fmt { font-size: 16px; padding: 7px 16px; gap: 8px; }
.forsch-fmt svg { width: 18px; height: 18px; }
/* Forschen: Teil-Ganzes-Darstellung (Dreieck mit zwei schrägen Strichen) */
.forsch-decomp.fmt-triple { flex-direction: column; gap: 2px; }
.forsch-decomp.fmt-triple .ft-whole { color: var(--whole-blue); }
.forsch-decomp.fmt-triple .ft-lines { width: clamp(140px, 34vh, 220px);
  height: clamp(22px, 4.5vh, 40px); }
.forsch-decomp.fmt-triple .ft-lines line { stroke: var(--ink); stroke-width: 3;
  stroke-linecap: round; opacity: 0.5; }
.forsch-decomp.fmt-triple .ft-parts { display: flex; justify-content: space-between;
  width: clamp(140px, 34vh, 220px); }
/* Haus: aktuell angesteuerte, bereits gefundene Zerlegung hervorheben (Forschen) */
.zh-floor.match { background: #D8E8E4; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
/* Forschen Z: abgedeckte Seite (links/rechts) auch im Zahlenhaus verdecken */
.zh-stack.cover-left .zh-floor > .zh-num:first-child,
.zh-stack.cover-right .zh-floor > .zh-num:last-child { background: var(--cover); box-shadow: none; }
.zh-stack.cover-left .zh-floor > .zh-num:first-child > span,
.zh-stack.cover-right .zh-floor > .zh-num:last-child > span { visibility: hidden; }

/* ==========================================================================
   OVERLAYS
   ========================================================================== */
.overlay { position: fixed; inset: 0; z-index: 820; display: none; }
.overlay.show { display: flex; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(20,32,52,0.42); }
.overlay-card { position: relative; z-index: 1; margin: auto; background: #F4F2EC;
  border-radius: 22px; box-shadow: 0 16px 48px rgba(0,0,0,0.32); padding: 18px 22px 22px;
  max-height: 90vh; overflow-y: auto; touch-action: pan-y; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 12px; }
.ov-title { font-weight: 700; font-size: 22px; }
.ov-close { flex: none; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(28,43,69,0.08); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.ov-close:hover { background: rgba(28,43,69,0.15); }

/* Systemschrift-Panels (Lehrkraft) */
.sys { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Benutzer-Overlay (kindgerecht -> Grundschrift) */
#user-overlay .overlay-card { width: min(92vw, 720px); }
.user-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 620px) { .user-grid { grid-template-columns: repeat(3, 1fr); } }
.user-tile { display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; background: none; border: none; padding: 8px; border-radius: 16px; }
.user-tile:hover { background: rgba(28,43,69,0.05); }
.user-tile.active { background: rgba(62,142,142,0.12); }
.user-av { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; box-shadow: var(--shadow); }
.user-av svg { width: 66%; height: 66%; }
.user-tile-name { font-size: 20px; font-weight: bold; color: var(--ink); }
/* „Wer bist du?"-Overlay: Texte in Standardschrift wie das Menü (Ziffern gibt es hier keine). */
#user-overlay .ov-title, #user-overlay .user-tile-name {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Lehrkraft-Overlay */
#teacher-overlay .overlay-card { width: min(94vw, 820px); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab { border: none; cursor: pointer; font-size: 16px; padding: 9px 16px; border-radius: 14px;
  background: rgba(28,43,69,0.06); color: var(--ink); font-family: inherit; }
.tab.active { background: var(--accent); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 16px; margin: 10px 0; }
.set-row input[type="number"], .set-row input[type="text"] { width: 84px; font-size: 16px;
  padding: 6px 8px; text-align: center; border: 1.5px solid #c8cdd2; border-radius: 8px;
  font-family: inherit; }
.set-row input[type="text"] { width: 150px; text-align: left; }
.set-row input[type="range"] { width: 160px; accent-color: var(--accent); }
.switch-row { display: flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer;
  margin: 8px 0; }
.switch-row input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.hint { font-size: 13px; color: #5a6b80; margin: 4px 0 12px; line-height: 1.4; }
.set-sub-title { font-weight: 700; font-size: 15px; margin: 16px 0 6px; color: #3a4a60; }
.tasktype-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }

/* Info-Tab: knappe fachdidaktische Einordnung und Unterrichtstransfer. */
.teacher-info { color: var(--ink); font-size: 15px; line-height: 1.48; }
.teacher-info-lead { margin: 2px 0 16px; font-size: 16px; }
.teacher-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.teacher-info section { min-width: 0; }
.teacher-info h3 { margin: 0 0 7px; font-size: 16px; color: #3a4a60; }
.teacher-info ul { margin: 0; padding-left: 20px; }
.teacher-info li + li { margin-top: 5px; }
.teacher-info-note { margin: 16px 0; padding: 11px 13px; border-radius: 12px;
  background: rgba(62,142,142,0.10); }
.teacher-info-sources { padding-top: 2px; }
.teacher-info-sources ul { font-size: 13px; line-height: 1.4; }
.teacher-info a { color: var(--whole-blue); text-decoration-thickness: 1px;
  text-underline-offset: 2px; }
.teacher-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(28,43,69,0.14); }
@media (max-width: 620px) {
  .teacher-info-grid { grid-template-columns: 1fr; }
}

/* Kinder-Tab */
.child-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.child-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: 14px; background: #fff; }
.child-row .user-av { width: 46px; height: 46px; }
.child-row .child-name { flex: 1; font-size: 17px; font-weight: 600; }
.child-row button { border: none; cursor: pointer; padding: 7px 12px; border-radius: 12px;
  font-size: 14px; font-family: inherit; background: rgba(28,43,69,0.08); color: var(--ink); }
.child-row .child-del { background: rgba(165,55,55,0.10); color: var(--part-red); }
.child-editor { background: #fff; border-radius: 16px; padding: 14px; margin-top: 8px; }
.picker-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.picker { width: 46px; height: 46px; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: #eee; color: #fff; }
.picker.color.sel { border-color: var(--ink); }
.picker.sym { background: #7a8aa0; }
.picker.sym.sel { border-color: var(--ink); }
.picker.sym svg { width: 66%; height: 66%; }
.btn-primary { border: none; cursor: pointer; padding: 10px 18px; border-radius: 14px;
  background: var(--accent); color: #fff; font-size: 16px; font-family: inherit; }
.btn-ghost { border: none; cursor: pointer; padding: 10px 18px; border-radius: 14px;
  background: rgba(28,43,69,0.08); color: var(--ink); font-size: 16px; font-family: inherit; }

/* Kompetenzraster */
.raster-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.raster-head select { font-size: 16px; padding: 7px 10px; border-radius: 10px;
  border: 1.5px solid #c8cdd2; font-family: inherit; }
.raster { border-collapse: collapse; width: 100%; font-size: 14px; }
.raster th, .raster td { border: 1px solid #d7d3c8; padding: 6px 4px; text-align: center; }
.raster th { background: #EAE6DB; font-weight: 600; }
.raster th.rnum, .raster td.rnum { font-weight: 700; background: #EAE6DB; width: 42px; }
.rcell { width: 30px; height: 30px; border-radius: 7px; margin: 0 auto; background: var(--grey); }
.rcell.practiced { background: var(--yellow); }
.rcell.mastered { background: var(--ok); }
.raster td { position: relative; }
.raster td .rtip { font-size: 10px; color: #6a7688; margin-top: 2px; }

/* Diagnostik-Tab */
.diag-code-info { display: block; font-size: 13px; color: var(--ink); opacity: 0.7; margin: -4px 0 8px; }
.diag-code-info.ok { color: #2e6d3a; opacity: 1; }
.diag-code-info.bad { color: var(--part-red); opacity: 1; }
.diag-code-warn { display: block; font-size: 13px; color: var(--part-red); font-weight: 600; margin: -4px 0 8px; }
.diag-phase-row { display: flex; gap: 10px; flex-wrap: wrap; }
.diag-phase { padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 15px;
  font-family: inherit; border: 2px solid rgba(43,92,138,0.3); background: #fff; color: var(--ink); }
.diag-phase.running { background: var(--whole-blue); color: #fff; border-color: var(--whole-blue); }
.diag-table-wrap { width: 100%; overflow-x: auto; margin-top: 6px; }
.diag-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.diag-table th, .diag-table td { border: 1px solid rgba(0,0,0,0.08); padding: 4px 6px; text-align: center; }
.diag-table th { background: #EAE6DB; font-weight: 600; }
.diag-table td:first-child { text-align: left; }
.diag-table select, .diag-table input { font-family: inherit; font-size: 13px; }
.diag-pseud { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #6a7688; }
.diag-status.fertig { color: #2e6d3a; font-weight: bold; }
.diag-status.läuft { color: #a76a1e; }
.diag-status.offen { color: #8494a6; }
.diag-upinfo { font-size: 13px; opacity: 0.8; margin: 4px 0 10px; }
.card-diag { outline: 3px solid rgba(43,92,138,0.4); outline-offset: -3px; }

/* Info-Overlay */
#info-overlay .overlay-card { width: min(90vw, 460px); }
.info-lead { font-size: 15px; line-height: 1.45; margin: 4px 0 10px; }
.info-list { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #3a4a60; }
.info-by { font-size: 13px; color: #5a6b80; margin-top: 12px; }

/* ==========================================================================
   ANIMATIONEN
   ========================================================================== */
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes wobble { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes flash-ok { 0% { box-shadow: inset 0 2px 5px rgba(0,0,0,0.10), 0 0 0 0 rgba(62,142,90,0.6); }
  30% { box-shadow: inset 0 2px 5px rgba(0,0,0,0.10), 0 0 0 8px rgba(62,142,90,0.35); }
  100% { box-shadow: inset 0 2px 5px rgba(0,0,0,0.10), 0 0 0 0 rgba(62,142,90,0); } }
@keyframes split-flash { 0% { opacity: 0; transform: translateX(-3px) scaleY(0.4); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(176,58,58,0.35); }
  100% { opacity: 1; transform: translateX(-3px) scaleY(1); box-shadow: 0 0 0 1px rgba(255,255,255,0.25); } }
@keyframes floor-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arrow-in { from { opacity: 0; } }
@keyframes shimmer { 0%,100% { box-shadow: inset 0 0 0 2px rgba(28,43,69,0.22); }
  50% { box-shadow: inset 0 0 0 2px rgba(62,142,142,0.55); } }
@keyframes ghost-flash { 0% { opacity: 0; } 35% { opacity: 0.5; } 100% { opacity: 0; } }

/* ---- Diagnostik-Test: ruhig, kindgerecht, KEINE Wertung ---- */
#screen-diag { display: none; flex-direction: column; height: 100%; }
#screen-diag.active { display: flex; }
.diag-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; gap: 12px; }
.diag-progress { display: flex; gap: 6px; flex-wrap: wrap; }
.diag-progress .dp { width: 12px; height: 12px; border-radius: 50%; background: rgba(43,92,138,0.18); }
.diag-progress .dp.done { background: var(--whole-blue); }         /* neutral: nur "bearbeitet", nie richtig/falsch */
.diag-progress .dp.current { box-shadow: 0 0 0 3px rgba(43,92,138,0.25); }
.diag-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; padding: 0 16px; }
.diag-item { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; min-height: 34vh; justify-content: center; }
.diag-answer { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.diag-note { min-height: 3vh; text-align: center; color: var(--ink); opacity: 0.7; padding-bottom: 12px; }
.digits.digits20 { max-width: min(92vw, 720px); }
/* Diagnostik: standardisierte, KOMPAKTE Ziffernleiste (Testlayout eingefroren –
   Übungs-Vergrößerung von 2026-07-21 gilt hier bewusst nicht). */
#screen-diag .digits { gap: 10px; max-width: 92vw; margin-top: 0; }
#screen-diag .digit { width: clamp(42px, 6.4vh, 60px); height: clamp(42px, 6.4vh, 60px);
  font-size: clamp(24px, 3.6vh, 32px); }
/* Zwanzigerfeld-Kappung gegen den ID-Override oben wiederherstellen (sonst gewinnt
   die höhere Spezifität von #screen-diag .digits und die 720px-Kappung entfällt). */
#screen-diag .digits.digits20 { max-width: min(92vw, 720px); }
/* Zwanzigerfeld = zwei Streifenreihen übereinander */
.twenty-field { display: flex; flex-direction: column; gap: 6px; }

/* Zahlentrio (Modul B): n (blau) oben, Verbindungslinien schräg zu zwei Teil-Kästchen
   (rot; eines gefüllt, eines aktive Lücke) – wie das Trio in t5/Forschen, kein Strich */
.diag-tri { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.diag-tri .dt-whole { position: relative; top: 0.08em; font-weight: bold;
  font-size: clamp(34px, 6vh, 60px); color: var(--whole-blue); }
.diag-tri .ft-lines { width: clamp(150px, 32vh, 230px); height: clamp(20px, 4vh, 34px); }
.diag-tri .ft-lines line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
.diag-tri .dt-parts { display: flex; width: clamp(150px, 32vh, 230px); }
.diag-tri .dt-cell { flex: 1; display: flex; justify-content: center; }
.diag-tri .dt-parts .box.active { outline: 3px solid var(--part-red); outline-offset: 2px; }

/* Terme (Modul C/D): zentrierte Zeile, ausgegraute gelöste Vorgabe (D2/D3) */
.diag-term { justify-content: center; }
.diag-given { justify-content: center; opacity: 0.42; filter: grayscale(1); }
.diag-term .box.active { outline: 3px solid var(--part-red); outline-offset: 2px; }
.diag-term .box.whole.active { outline-color: var(--whole-blue); }

/* ==========================================================================
   SPIELE  (Verliebte Zahlen; Häuser/Blasen folgen in Task 5/6)
   ========================================================================== */
/* Menü-Sektion: gleiche Rasteroptik wie die Aufgabenkarten */
#game-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  padding: 10px 24px 8px; max-width: 1120px; margin: 0 auto; }
@media (max-width: 900px) { #game-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { #game-cards { grid-template-columns: repeat(2, 1fr); } }
.card.card-game { background: #EBDCC6; }   /* Sand, wie bh-stack/st-stack/rp-stack */
.card-game .gp-heart { position: relative; display: inline-flex; }
.card-game .gp-heart > span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-weight: bold; font-size: 16px; top: 0.06em; }
.card-game .gp-card { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 30px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  color: var(--part-red); font-weight: bold; font-size: 18px; }
.card-game .game-record { display: inline-flex; align-items: center; gap: 4px;
  color: var(--whole-blue); font-weight: bold; font-size: 15px; }
.card-game .game-record svg { color: var(--whole-blue); }

/* Spiel-Kopfzeile (im #series-dots-Host) */
.game-head { display: flex; align-items: center; gap: 16px; }
.game-score { display: flex; align-items: center; gap: 6px; font-weight: bold; font-size: 24px; color: var(--whole-blue); }
.game-score-icon { display: inline-flex; color: var(--whole-blue); }
.game-score-num { top: 0.06em; position: relative; min-width: 1ch; text-align: center; }
.game-record-chip { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #5a6b80; }
.game-record-num { font-weight: bold; }

/* Herz-Silhouette (Fill über CSS-Token, damit iPad-Safari es zuverlässig färbt –
   var() greift NICHT als SVG-Präsentationsattribut, nur als CSS-Eigenschaft) */
.heart-fill { fill: var(--whole-blue); }

/* Ziel-Herz über dem Feld */
.game-target-heart { position: relative; width: clamp(78px, 15vh, 122px);
  height: clamp(78px, 15vh, 122px); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.14)); }
.game-target-heart.pulse { animation: pulse 460ms ease-in-out; }   /* Zielzahl-Wechsel */
.heart-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; top: 0.06em; }
.game-target-heart .heart-num { font-size: clamp(30px, 6vh, 52px); }

/* Zeitleiste „Verliebte Zahlen" (Optik von .bubble-bar/.bubble-timebar geerbt),
   auf die Feldbreite begrenzt und zentriert */
.love-bar { max-width: 900px; }

/* Spielfeld 4 × 3 */
.love-field { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.6vh, 16px);
  width: 100%; max-width: 900px; }
.love-slot { min-height: clamp(66px, 12.5vh, 108px); display: flex; align-items: center; justify-content: center; }
.love-card { width: 100%; height: 100%; min-height: inherit; border: none;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 8px;
  touch-action: none; -webkit-touch-callout: none; }
.love-num { color: var(--part-red); font-weight: bold; font-size: clamp(28px, 5.4vh, 46px);
  position: relative; top: 0.06em; }
.love-dots { display: flex; width: 100%; align-items: center; justify-content: center; }
.love-dots svg { width: 100%; height: auto; max-width: 132px; }
.love-card.sel { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.22);
  outline: 3px solid var(--accent); outline-offset: 2px; }
.love-card.dragging { pointer-events: none; z-index: 5; box-shadow: 0 12px 24px rgba(0,0,0,0.28); }
.love-card.matched { pointer-events: none; opacity: 0;
  transition: opacity .42s ease, transform .42s ease; }
.love-card.pop-in { animation: love-pop 260ms ease-out; }

/* Verschmelz-/Flug-Herz (fixed = Viewport-Koordinaten aus getBoundingClientRect) */
.love-heart { position: fixed; width: 58px; height: 58px; transform: translate(-50%, -50%);
  z-index: 60; pointer-events: none;
  transition: left .55s cubic-bezier(.35,.1,.3,1), top .55s cubic-bezier(.35,.1,.3,1),
              transform .55s ease, opacity .55s ease; }
.love-heart .heart-num { font-size: 22px; }
.love-heart.fly { transform: translate(-50%, -50%) scale(0.3); opacity: 0.15; }

/* Summen-Blase bei Fehlversuch */
.sum-bubble { position: fixed; transform: translate(-50%, -50%); z-index: 60; pointer-events: none;
  width: 52px; height: 52px; border-radius: 50%; background: var(--part-red); color: #fff;
  font-weight: bold; font-size: 26px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.22); animation: sum-pop 1100ms ease-out forwards; }

/* Abschlusskarte der Spiele */
.done-card.game-end .game-end-heart { position: relative; width: 96px; height: 96px; }
.done-card.game-end .game-end-heart .heart-num { font-size: 40px; }
.game-end-icon { color: var(--whole-blue); }
.game-end-icon svg { width: 60px; height: 60px; }
.game-end-score { font-size: 56px; font-weight: bold; color: var(--whole-blue); top: 0.06em; position: relative; }
.game-new-record { font-size: 22px; font-weight: bold; color: var(--ok); }

@keyframes love-pop { from { transform: scale(0.35); } 60% { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes sum-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  75% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); } }

/* ---- Spiel 2: „Häuser bauen" -------------------------------------------- */
/* Menü-Vorschau: kleines Haus (blaues Dach mit n, eine Etage a|b) + Kachel */
.card-game .gp-house { position: relative; display: inline-flex; }
.card-game .gp-house > span { position: absolute; font-weight: bold; }
.card-game .gp-h-n { left: 0; right: 0; top: 3px; text-align: center; color: #fff; font-size: 13px; }
.card-game .gp-h-a { left: 9px; bottom: 4px; color: var(--part-red); font-size: 12px; }
.card-game .gp-h-b { right: 9px; bottom: 4px; color: var(--part-red); font-size: 12px; }

/* Menü-Vorschau Familien-Blasen: Zahlentrio (7 über 3|4) + Aufgaben-Blase */
.card-game .gp-trio { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font-weight: bold; }
.card-game .gp-t-n { color: var(--whole-blue); font-size: 20px; position: relative; top: 0.06em; }
.card-game .gp-t-parts { display: flex; gap: 15px; }
.card-game .gp-t-a, .card-game .gp-t-b { color: var(--part-red); font-size: 15px; position: relative; top: 0.06em; }
.card-game .gp-bubble { width: 48px; height: 48px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16); display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 13px; color: var(--ink); }

/* Szene: Himmel (Sonnenbogen) über der Häuserreihe, Bau-Lager darunter */
/* Szene wächst in die verfügbare Höhe (task-main ist Flex-Spalte) und zentriert
   den Himmel-+-Häuser-Block darin – Sonne sitzt so direkt über den Häusern, die
   nach oben wachsen. min-height:0 verhindert Flex-Überlauf. */
.build-scene { --dusk: 0; position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 1040px; flex: 1 1 auto; min-height: 0; border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 1.4vh; }
/* Sehr leichte Abendtönung hinter den Häusern; Inhalte selbst bleiben klar. */
.build-scene::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #6E7793 0%, #C98F83 52%, #E6B68E 100%);
  opacity: var(--dusk); transition: opacity 900ms linear; }
.build-scene > * { position: relative; z-index: 1; }
.build-sky { position: relative; height: clamp(96px, 16vh, 176px); flex: none;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #CFE7F5 0%, #EAF5FB 100%); overflow: hidden; }
.build-sky::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #66728F 0%, #E6A184 62%, #F1C59D 100%);
  opacity: var(--dusk); transition: opacity 900ms linear; }
.build-sun { position: absolute; left: 6%; bottom: 10%; transform: translateX(-50%);
  z-index: 1;
  width: clamp(38px, 6vh, 56px); height: clamp(38px, 6vh, 56px); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFE7A6 0%, #FCCB63 55%, #F6B84C 100%);
  box-shadow: 0 0 18px 6px rgba(246, 184, 76, 0.45);
  transition: left 900ms linear, bottom 900ms linear; }

.build-row { display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(16px, 3.2vw, 48px); min-height: 34vh; padding: 0 6px;
  border-bottom: 3px solid #C7B79A; }   /* „Boden" der Baustelle */
.build-house { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: clamp(116px, 17vw, 184px); }
.build-house.entering { animation: house-in 380ms ease-out; }
.build-house.leaving { animation: house-out 600ms ease-in forwards; }
.build-house.wobble { animation: wobble 400ms ease-in-out; }

.bh-roof { position: relative; width: 100%; height: clamp(64px, 10vh, 108px); flex: none; }
.bh-roof::before { content: ''; position: absolute; inset: 0; background: var(--whole-blue);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.12)); }
.bh-total { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); z-index: 2;
  width: clamp(46px, 6.6vh, 70px); height: clamp(46px, 6.6vh, 70px); background: #fff;
  color: var(--whole-blue); font-weight: bold; font-size: clamp(23px, 3.4vh, 36px); border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; }
.bh-total > span { position: relative; top: 0.1em; }
.bh-roof.complete .bh-total { box-shadow: 0 0 0 3px #E3AE3C, 0 2px 5px rgba(0,0,0,0.18); }
/* Fähnchen am fertigen Haus */
.bh-flag { position: absolute; right: 12%; top: -6px; z-index: 3; color: var(--part-red);
  animation: flag-pop 420ms ease-out; }
.bh-flag svg { display: block; }

.bh-stack { position: relative; width: 100%; background: #EBDCC6;
  border-top: 2px solid rgba(28,43,69,0.16); border-radius: 0 0 12px 12px;
  display: flex; flex-direction: column; padding: 3px 0; }
.bh-stack::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px;
  transform: translateX(-50%); background: var(--divider); z-index: 0; }
.bh-floor { position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-around; padding: 4px 0; min-height: clamp(50px, 6.8vh, 80px); }
.bh-floor + .bh-floor { border-top: 1.5px solid rgba(28,43,69,0.12); }
.bh-floor.grow { animation: floor-in 320ms ease-out; }
.bh-num { width: clamp(48px, 6.2vh, 66px); height: clamp(48px, 6.2vh, 66px); background: #fff;
  color: var(--part-red); font-weight: bold; font-size: clamp(24px, 3.2vh, 36px); border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.16); display: flex; align-items: center; justify-content: center; }
.bh-num > span { position: relative; top: 0.1em; }
/* Offenes Stockwerk: gestrichelte Lücke als Drop-Zone */
.bh-gap { width: clamp(48px, 6.2vh, 66px); height: clamp(48px, 6.2vh, 66px); border-radius: 50%;
  border: 2.5px dashed rgba(154, 59, 59, 0.6); background: rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center; color: rgba(154, 59, 59, 0.55);
  font-weight: bold; font-size: clamp(22px, 3vh, 32px); cursor: pointer; touch-action: none; }
.bh-gap > span { position: relative; top: 0.08em; }

/* Bau-Lager: 4 Ziegel-Kacheln */
.build-shelf { flex: none; display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2.4vw, 30px); width: 100%; max-width: 780px; margin-top: 0.6vh;
  padding: 14px 18px; background: #E9D9C1; border-radius: 18px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.12); }
.build-tile { width: clamp(74px, 12vh, 112px); height: clamp(64px, 10.5vh, 96px);
  border: none; border-radius: 14px; background: #fff; box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  touch-action: none; -webkit-touch-callout: none; }
.build-tile.dragging { pointer-events: none; z-index: 5; box-shadow: 0 12px 24px rgba(0,0,0,0.28); }
.build-tile.sel { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.22);
  outline: 3px solid var(--accent); outline-offset: 2px; }
.build-tile.pop-in { animation: love-pop 260ms ease-out; }
.build-tile-num { color: var(--part-red); font-weight: bold; font-size: clamp(32px, 5.6vh, 50px);
  position: relative; top: 0.06em; }
.build-tile-dots { display: flex; width: 100%; align-items: center; justify-content: center; }
.build-tile-dots svg { width: 100%; height: auto; max-width: 120px; }

.game-end-detail { color: #5a6b80; }

@keyframes flag-pop { 0% { transform: translateY(6px) scale(0.4); opacity: 0; }
  60% { transform: translateY(0) scale(1.15); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes house-in { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } }
@keyframes house-out { from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(52px) scale(0.9); } }

/* ---- Spiel 3: „Familien-Blasen" ----------------------------------------- */
.bubble-game { flex: 1 1 auto; width: 100%; max-width: 940px; min-height: 0;
  display: flex; flex-direction: column; gap: 1.2vh; }
.bubble-head { display: flex; align-items: center; justify-content: center; flex: none; }
/* Dünner Zeit-Fortschrittsbalken (keine Alarmfarben) */
.bubble-bar { flex: none; width: 100%; height: 7px; border-radius: 5px;
  background: rgba(28,43,69,0.12); overflow: hidden; }
.bubble-timebar { width: 0; height: 100%; border-radius: 5px;
  background: var(--whole-blue); opacity: 0.55; transition: width 900ms linear; }
/* Himmel: relativer Container, Blasen steigen darin auf (overflow hidden) */
.bubble-sky { position: relative; flex: 1 1 auto; width: 100%; min-height: 38vh; overflow: hidden;
  border-radius: 16px; background: linear-gradient(180deg, #EAF5FB 0%, #F5FBFD 100%); }
.bubble { position: absolute; bottom: 0; width: clamp(88px, 15vh, 118px); height: clamp(88px, 15vh, 118px);
  border: none; background: transparent; padding: 0; cursor: pointer;
  touch-action: manipulation; -webkit-touch-callout: none; will-change: transform; }
.bubble-face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  font-weight: bold; font-size: clamp(19px, 3.4vh, 26px); white-space: nowrap; }
.bubble-face.bubble-in { animation: bubble-in 260ms ease-out; }
.bubble-face.pop { animation: bubble-pop 320ms ease-out forwards; }
.bubble-face.wobble { animation: wobble 400ms ease-in-out; }
.bubble-face .be-part { color: var(--part-red); }
.bubble-face .be-whole { color: var(--whole-blue); }
.bubble-face .be-op { color: var(--ink); margin: 0 0.12em; position: relative; top: -0.02em; }
.bubble-face > span { position: relative; top: 0.06em; }
/* Lücken-Kästchen (Platzhalter): Umriss in currentColor der versteckten Zahl,
   ziffernbreit, damit es auch neben zweistelligen Zahlen nicht überläuft */
.bubble-face .be-gap { display: inline-block; box-sizing: border-box;
  width: 0.72em; height: 0.86em; border: 2.5px solid currentColor; border-radius: 5px;
  background: transparent; align-self: center; top: -0.08em; }
/* Streifen-Blase: zerteiltes Mengenbild zentriert, ohne Überlauf bei 10 Zellen */
.bubble-face.bubble-strip { padding: 8px; }
.bubble-strip-wrap { display: flex; align-items: center; justify-content: center; width: 100%; }
.bubble-strip-wrap svg { width: 100%; height: auto; max-width: 86px; }

@keyframes bubble-in { from { transform: scale(0.5); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@keyframes bubble-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); }
  100% { transform: scale(1.55); opacity: 0; } }

/* ---- Spiel „Treppenhaus" -------------------------------------------------- */
.st-stage { display: flex; align-items: flex-start; justify-content: center; gap: 26px; margin-top: 10px; }
.st-house { display: flex; flex-direction: column; width: fit-content; }
.st-roof { position: relative; height: 46px; }
.st-roof-shape { position: absolute; inset: 0; background: #2B5C8A; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.st-total { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); color: #fff; font-weight: bold; font-size: 24px; line-height: 1; }
.st-stack { display: flex; flex-direction: column; gap: 6px; background: #EBDCC6; border-radius: 0 0 12px 12px; padding: 10px 12px 12px; }
.st-stack.tall { gap: 4px; padding: 8px 12px 10px; }
.st-slot { min-height: 42px; min-width: 148px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.st-stack.tall .st-slot { min-height: 34px; }
.st-slot:empty { border: 2.5px dashed #B8A38A; background: rgba(255,255,255,0.45); }
.st-tray .st-slot:empty { border-color: #9FB3BC; }
.st-card { border: none; background: #fff; border-radius: 9px; padding: 4px 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); cursor: grab; touch-action: none; display: flex; align-items: center; font-family: inherit; }
.st-card .st-strip svg { display: block; }
.st-card.sym { font-weight: bold; font-size: 26px; color: #9A3B3B; padding: 2px 14px; }
.st-sym-line { width: 3px; height: 26px; background: #B03A3A; border-radius: 2px; margin: 0 9px; }
.st-card.dragging { pointer-events: none; z-index: 5; box-shadow: 0 12px 24px rgba(0,0,0,0.28); }
.st-card.sel { outline: 3px solid #2B5C8A; outline-offset: 2px; }
.st-card.placed { animation: love-pop 220ms ease-out; }
.st-card.wobble { animation: wobble 420ms ease; }
.st-tray { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #E7EDEF; align-items: center; align-self: center; }
@keyframes st-step { 0% { transform: none; } 45% { transform: translateX(7px) scale(1.05); } 100% { transform: none; } }
.st-slot.st-step { animation: st-step 500ms ease; }
/* Sanfter Hinweis: betroffene Zeilen leuchten kurz bernsteinfarben auf (dezent, kein Fehler-Rot) */
@keyframes st-hint { 0% { background: rgba(230, 180, 60, 0); } 25% { background: rgba(230, 180, 60, 0.5); } 100% { background: rgba(230, 180, 60, 0); } }
.st-slot.hint { animation: st-hint 1100ms ease; }
.gp-sthouse { position: relative; display: inline-flex; }
.gp-st-n { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: bold; font-size: 13px; }
.card-game .gp-scale { display: inline-flex; align-items: center; }
/* Wackelhaus-Vorschau: ganzes Bild leicht gekippt, eine Etage rutscht heraus */
.card-game .gp-rp-wrap { display: inline-flex; transform: rotate(-2deg); }
.card-game .gp-rphouse { position: relative; display: inline-flex; }
.card-game .gp-rp-loose { position: absolute; left: 16px; top: 29px; transform: rotate(-11deg);
  background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.24); padding: 0 5px;
  color: var(--part-red); font-weight: bold; font-size: 13px; }
/* Paare-Finder-Vorschau: eine offene Streifen-Karte + eine verdeckte (Punktmuster) */
.card-game .gp-pf-open { display: inline-flex; align-items: center; background: #fff;
  border-radius: 8px; padding: 5px 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.card-game .gp-pf-open svg { display: block; height: 22px; width: auto; }
.card-game .gp-pf-back { display: inline-flex; width: 30px; height: 38px; border-radius: 7px;
  overflow: hidden; background: linear-gradient(150deg, #3A6EA0, #2B5C8A);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.card-game .gp-pf-back svg { width: 100%; height: 100%; }

/* ---- Spiel „Zahlen-Waage" ------------------------------------------------ */
.sc-stage { display: flex; flex-direction: column; align-items: center; width: 100%;
  gap: clamp(10px, 2vh, 22px); margin-top: 6px; }
/* Waage-Apparat: Balken pivotiert über dem Ständer, Schalen hängen an den Enden */
.sc-balance { position: relative; width: 100%; max-width: 720px;
  height: clamp(220px, 40vh, 320px); }
.sc-post { position: absolute; left: 50%; top: 40px; bottom: 26px; width: 9px;
  transform: translateX(-50%); border-radius: 5px;
  background: linear-gradient(90deg, #8FA0B4, #C4CED9 45%, #8FA0B4); }
.sc-base { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: clamp(120px, 22vw, 180px); height: 16px; border-radius: 8px;
  background: linear-gradient(180deg, #C4CED9, #8FA0B4);
  box-shadow: 0 3px 6px rgba(0,0,0,0.14); }
/* Balken: kippt per --tilt (rechts schwerer = im Uhrzeigersinn = rechts runter) */
.sc-beam { position: absolute; left: 50%; top: 34px; width: clamp(320px, 60vw, 560px);
  height: 12px; border-radius: 7px; background: var(--whole-blue);
  box-shadow: 0 2px 5px rgba(0,0,0,0.16);
  transform-origin: center center; transform: translateX(-50%) rotate(var(--tilt, 0deg));
  transition: transform .5s cubic-bezier(.34, 1.1, .5, 1); }
.sc-beam::after { content: ''; position: absolute; left: 50%; top: -5px; width: 16px; height: 16px;
  transform: translateX(-50%); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); }   /* Drehpunkt-Kappe */
/* Schalen hängen an den Balkenenden und rotieren gegen (Karten bleiben waagerecht) */
.sc-pan { position: absolute; top: 8px; display: flex; flex-direction: column; align-items: center;
  transform-origin: top center; }
.sc-pan.left  { left: 0;  transform: translateX(-50%) rotate(calc(var(--tilt, 0deg) * -1)); }
.sc-pan.right { right: 0; transform: translateX(50%)  rotate(calc(var(--tilt, 0deg) * -1)); }
.sc-string { width: 2px; height: clamp(20px, 4vh, 34px); background: #8FA0B4; }
.sc-tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 5px; min-width: clamp(96px, 20vw, 160px); min-height: clamp(56px, 9vh, 78px);
  padding: 8px; border-radius: 12px 12px 16px 16px;
  background: #EBDCC6; border: 2px solid #C7B79A;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.12); }
.sc-pan.right .sc-tray { cursor: pointer; }
/* Karten auf den Schalen (klein, weiß, rote Ziffer bzw. Mini-Streifen) */
.sc-card { min-width: clamp(38px, 6.4vh, 52px); min-height: clamp(38px, 6.4vh, 52px);
  border: none; border-radius: 10px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.16);
  display: flex; align-items: center; justify-content: center; padding: 4px;
  font-family: inherit; }
.sc-card.right { cursor: pointer; touch-action: manipulation; }
.sc-card-num { color: var(--part-red); font-weight: bold; font-size: clamp(22px, 3.6vh, 32px);
  position: relative; top: 0.06em; }
.sc-card-dots { display: flex; align-items: center; justify-content: center; }
.sc-card-dots svg { width: 100%; height: auto; max-width: 74px; }
/* Reservierte leere Plätze der rechten Schale (kein Layout-Sprung) */
.sc-slot { min-width: clamp(38px, 6.4vh, 52px); min-height: clamp(38px, 6.4vh, 52px);
  border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.sc-slot:empty { border: 2px dashed rgba(154, 59, 59, 0.45); background: rgba(255,255,255,0.35); }
/* Einschwingen bei Gleichgewicht: kurzes, ruhiges Nachwippen */
.sc-beam.sc-balanced { animation: sc-settle 900ms ease-out; }
@keyframes sc-settle { 0% { transform: translateX(-50%) rotate(3deg); }
  35% { transform: translateX(-50%) rotate(-2deg); }
  70% { transform: translateX(-50%) rotate(1deg); }
  100% { transform: translateX(-50%) rotate(0deg); } }
/* Vorrat: erbt die Holzoptik von .build-shelf, nur die Kacheln etwas kompakter */
.sc-shelf { max-width: 640px; }
.sc-tile { width: clamp(64px, 10vh, 96px); height: clamp(56px, 9vh, 84px); }
/* Symbolische Gleichung über der Waage: fester Slot (feste Höhe, von Rundenbeginn
   an leer) -> das Einblenden verschiebt NICHTS. Ziffern Grundschrift; Seite mit
   EINER Karte (das Ganze) blau, Seiten mit mehreren Karten (Teile) rot; + und =
   neutral-dunkel. */
.sc-eq { height: clamp(40px, 6.5vh, 56px); display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: clamp(24px, 4.2vh, 38px); line-height: 1;
  opacity: 0; transition: opacity 320ms ease; }
.sc-eq.show { opacity: 1; }
.sc-eq-n { padding: 0 0.05em; }
.sc-eq-whole { color: var(--whole-blue); }   /* das Ganze (eine Karte) */
.sc-eq-part { color: var(--part-red); }       /* Teile (mehrere Karten) */
.sc-eq-op { color: var(--ink); opacity: 0.55; padding: 0 0.16em; }
.sc-eq-eq { color: var(--ink); opacity: 0.7; padding: 0 0.24em; }

/* ---- Spiel „Wackelhaus" --------------------------------------------------- */
.rp-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 26px); margin-top: 8px; }
/* Das Haus wackelt dezent um die Standfläche (transform-origin unten mittig) */
.rp-house { display: flex; flex-direction: column; width: fit-content; transform-origin: bottom center; }
@keyframes rp-wobble { 0%, 100% { transform: rotate(-0.4deg); } 50% { transform: rotate(0.4deg); } }
.rp-house.rp-wobbling { animation: rp-wobble 2.2s ease-in-out infinite; }
@keyframes rp-settle { 0% { transform: translateY(-5px); } 55% { transform: translateY(2px); } 100% { transform: translateY(0); } }
.rp-house.rp-settle { animation: rp-settle 520ms ease-out; }
.rp-roof { position: relative; height: 46px; }
.rp-roof-shape { position: absolute; inset: 0; background: #2B5C8A; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rp-total { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); color: #fff; font-weight: bold; font-size: 24px; line-height: 1; }
.rp-stack { display: flex; flex-direction: column; gap: 6px; background: #EBDCC6; border-radius: 0 0 12px 12px; padding: 10px 12px 12px; }
.rp-stack.tall { gap: 4px; padding: 8px 12px 10px; }
.rp-slot { min-height: 44px; min-width: 156px; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rp-stack.tall .rp-slot { min-height: 34px; }
/* Offenes Loch: wartet auf die Ersatzkarte (dezent bernsteinfarben, kein Rot) */
.rp-slot.rp-hole { border: 2.5px dashed #D79A3C; background: rgba(230, 180, 60, 0.14); }
.rp-card { display: flex; align-items: center; border: none; background: #fff; border-radius: 9px;
  padding: 4px 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); font-family: inherit; }
.rp-card .rp-strip svg { display: block; }
.rp-card.sym { font-weight: bold; font-size: 26px; color: #9A3B3B; padding: 2px 14px; }
.rp-sym-line { width: 3px; height: 26px; background: #B03A3A; border-radius: 2px; margin: 0 9px; }
@keyframes rp-fly { to { transform: translateX(90px) rotate(9deg); opacity: 0; } }
.rp-card.rp-fly { animation: rp-fly 340ms ease-in forwards; pointer-events: none; }
@keyframes rp-nod { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(4px); } }
.rp-slot.rp-nod { animation: rp-nod 420ms ease-in-out; }
.rp-slot.flash-ok { animation: flash-ok 700ms ease-out; }
/* Ersatzkarten-Bereich unter dem Haus: feste Höhe, damit kein Layout-Sprung */
.rp-shelf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(10px, 2.4vw, 20px); width: 100%; min-height: clamp(60px, 11vh, 92px); }
.rp-card.rp-repl { min-height: clamp(46px, 8vh, 62px); padding: 6px 12px; cursor: grab; touch-action: none; }
.rp-card.dragging { pointer-events: none; z-index: 5; box-shadow: 0 12px 24px rgba(0,0,0,0.28); }
.rp-card.sel { outline: 3px solid #2B5C8A; outline-offset: 2px; }
.rp-card.wobble { animation: wobble 420ms ease; }

/* ---- Spiel „Paare-Finder" ------------------------------------------------- */
.pairs-bar { max-width: 720px; }
.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.8vh, 16px);
  width: 100%; max-width: 720px; margin: clamp(8px, 2vh, 20px) auto 0; }
.pf-card { position: relative; height: clamp(72px, 13vh, 116px); cursor: pointer;
  perspective: 640px; -webkit-touch-callout: none; }
.pf-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.4,.15,.3,1); }
.pf-card.open .pf-inner { transform: rotateY(180deg); }
.pf-front, .pf-back { position: absolute; inset: 0; box-sizing: border-box;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  border-radius: 14px; box-shadow: 0 3px 8px rgba(0,0,0,0.16); }
/* Verdeckte Vorderseite: ruhige blaue Fläche mit dezentem Punktmuster */
.pf-front { background: linear-gradient(150deg, #3A6EA0, #2B5C8A); overflow: hidden; padding: 0; }
.pf-cover-svg { width: 100%; height: 100%; display: block; }
/* Aufgedeckte Rückseite: weiße Karte mit Streifen bzw. Zahlenpaar */
.pf-back { transform: rotateY(180deg); background: #fff; }
.pf-back.sym { font-weight: bold; font-size: clamp(22px, 4vh, 32px); color: var(--part-red); }
.pf-back.sym > span { position: relative; top: 0.06em; }
.pf-sym-line { width: 3px; height: clamp(24px, 4.4vh, 34px); background: #B03A3A;
  border-radius: 2px; margin: 0 clamp(8px, 1.6vw, 13px); top: 0 !important; }
.pf-strip { display: flex; align-items: center; justify-content: center; width: 100%; }
.pf-strip svg { width: 100%; height: auto; max-width: 132px; }
/* Erfolgs-Puls (bleibt aufgedeckt, danach per JS unsichtbar – Platz bleibt) */
.pf-card.pf-won .pf-inner { animation: pf-won 560ms ease-out; }
@keyframes pf-won { 0% { transform: rotateY(180deg) scale(1); }
  40% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); } }

/* ---- Spiel „Bushaltestelle" ---------------------------------------------- */
.bus-bar { max-width: 720px; }
.bus-stage { display: flex; flex-direction: column; align-items: center;
  width: 100%; gap: clamp(10px, 2.4vh, 24px); margin-top: clamp(6px, 2vh, 22px); }
/* Kurz-Anzeige der Platzzahl beim Rundenstart: fest reservierte Zeile über dem
   Bus (bleibt im DOM -> kein Layout-Sprung beim sanften Ausblenden). */
.bus-num-reveal { min-height: clamp(56px, 10vh, 68px); display: flex; align-items: center;
  justify-content: center; font-weight: bold; line-height: 1;
  font-size: clamp(56px, 9vh, 64px); color: var(--whole-blue);
  transition: opacity 500ms ease; }
.bus-num-reveal.gone { opacity: 0; }
/* Bus-Zeile: Gleichungs-Impuls rechts NEBEN dem Bus, auf Fensterhöhe zentriert.
   .bus-eq ist von Szenenbeginn an reserviert (feste Breite/Höhe, leer, opacity 0
   – Muster .sc-eq der Zahlen-Waage); ein unsichtbarer Zwillings-Platzhalter
   gleicher Breite links (.bus-eq-spacer) spiegelt den Slot, damit der Bus exakt
   mittig bleibt, auch wenn sich die Gleichung füllt (kein horizontaler Sprung). */
.bus-row { display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2.6vw, 28px); width: 100%; }
.bus-eq { flex: none; width: clamp(140px, 19vw, 196px); height: clamp(40px, 6.5vh, 56px);
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: clamp(20px, 3.6vh, 30px); line-height: 1;
  opacity: 0; transition: opacity 320ms ease; }
.bus-eq.show { opacity: 1; }
.bus-eq-spacer { visibility: hidden; }
.bus-eq-n { padding: 0 0.05em; }
.bus-eq-whole { color: var(--whole-blue); }   /* das Ganze (Ergebnis bzw. Ausgangs-Ganzes) */
.bus-eq-part { color: var(--part-red); }       /* die Teile */
.bus-eq-op { color: var(--ink); opacity: 0.55; padding: 0 0.16em; }
.bus-eq-eq { color: var(--ink); opacity: 0.7; padding: 0 0.24em; }
.bus-scene { position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 1.6vw, 18px); max-width: 100%; }
/* Haltestellen-Schild: grünes „H" auf dünnem Mast */
.bus-sign { display: flex; flex-direction: column; align-items: center; align-self: stretch;
  justify-content: flex-end; }
.bus-sign-plate { display: grid; place-items: center; width: clamp(30px, 5vh, 40px);
  height: clamp(30px, 5vh, 40px); background: #2F8F57; color: #fff; border-radius: 7px;
  font-weight: bold; font-size: clamp(20px, 3.6vh, 28px); line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.bus-sign-pole { width: 5px; height: clamp(34px, 9vh, 74px); background: #9AA6AE; border-radius: 2px; }
/* Bus-Karosserie um die Fensterreihe (= Zehnerstreifen) */
.bus-body { position: relative; display: inline-flex; align-items: center;
  padding: clamp(10px, 1.8vh, 16px) clamp(38px, 5vw, 52px) clamp(16px, 2.6vh, 24px) clamp(30px, 4vw, 42px);
  background: #EBC46A; border: 3px solid #C79A3A; border-radius: 22px 26px 20px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
.bus-front { position: absolute; left: clamp(8px, 1.4vw, 14px); top: 50%; transform: translateY(-50%);
  width: clamp(14px, 2vw, 22px); height: 46%; background: #DFF0F7; border: 1.5px solid #8FB7CD;
  border-radius: 8px 4px 4px 8px; }
/* Dauerhaftes Liniennummer-Schild vorn/oben am Bus: Gesamtplatzzahl bleibt die
   ganze Runde sichtbar (Situationswissen), die Belegung selbst bleibt verdeckt. */
.bus-plate { position: absolute; left: clamp(6px, 1.2vw, 12px); top: clamp(-15px, -2.2vh, -11px);
  min-width: clamp(24px, 4vh, 30px); height: clamp(20px, 3.6vh, 26px); padding: 0 4px;
  display: grid; place-items: center; background: var(--whole-blue); color: #fff;
  font-weight: bold; font-size: clamp(15px, 2.6vh, 20px); line-height: 1;
  border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.22); z-index: 5; }
.bus-windows { position: relative; display: inline-flex; }
/* Der Streifen ist die Fensterreihe – kompaktere Zellen, damit auch 10 Plätze passen */
.bus-windows .strip { --cell: clamp(26px, 5.4vh, 48px); background: #BFD6E6; }
/* Rollo über der Fensterreihe (t2-Cover-Verwandt): von oben herunter (scaleY) */
.bus-blind { position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px;
  background: repeating-linear-gradient(#5B6E8A, #5B6E8A 6px, #6C7F9C 6px, #6C7F9C 12px);
  border-radius: 10px; transform: scaleY(0); transform-origin: top; opacity: 0.98;
  transition: transform 380ms cubic-bezier(.4,.1,.3,1); pointer-events: none; z-index: 4; }
.bus-blind.down { transform: scaleY(1); }
/* Tür rechts (Glastür mit Mittelfuge) */
.bus-door { position: absolute; right: clamp(8px, 1.2vw, 14px); top: 50%; transform: translateY(-50%);
  width: clamp(16px, 2.2vw, 24px); height: 66%; background: #DFF0F7; border: 1.5px solid #8FB7CD;
  border-radius: 5px; }
.bus-door::after { content: ''; position: absolute; left: 50%; top: 6%; bottom: 6%; width: 1.5px;
  transform: translateX(-50%); background: #8FB7CD; }
.bus-wheels { position: absolute; left: clamp(30px, 4vw, 42px); right: clamp(38px, 5vw, 52px);
  bottom: clamp(-14px, -1.6vh, -12px); display: flex; justify-content: space-between; }
.bus-wheel { position: relative; width: clamp(22px, 3.4vh, 30px); height: clamp(22px, 3.4vh, 30px);
  background: #33445E; border-radius: 50%; box-shadow: inset 0 0 0 4px #46586F; }
.bus-wheel::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%;
  transform: translate(-50%, -50%); background: #DDE4E9; border-radius: 50%; }
/* Figuren-Spur an der Tür: einfache Kopf/Schulter-Silhouetten laufen ein/aus */
.bus-figures { position: relative; width: clamp(56px, 8vw, 96px); height: clamp(52px, 12vh, 96px);
  overflow: hidden; align-self: flex-end; }
.bus-fig { position: absolute; bottom: 0; left: 0; color: #4B79C4; opacity: 0;
  transition: transform 520ms ease, opacity 520ms ease; }
.bus-fig.in { transform: translateX(72px); opacity: 1; }
.bus-fig.in.go { transform: translateX(4px); opacity: 0; }
.bus-fig.out { transform: translateX(2px); opacity: 0; }
.bus-fig.out.go { transform: translateX(70px); opacity: 1; }
/* Fahrt zwischen den Stopps: Bus wippt kurz, Räder drehen (Klasse liegt auf .bus-stage) */
.bus-stage.driving .bus-body { animation: bus-bob 480ms ease-in-out; }
.bus-stage.driving .bus-wheel { animation: bus-roll 480ms linear; }
@keyframes bus-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bus-roll { from { transform: rotate(0); } to { transform: rotate(200deg); } }
/* Fragezeile: fester Platz (kein Sprung). Material-Symbol zeigt NUR die
   gefragte Kategorie (besetzt = Zelle mit gefülltem Plättchen, frei = Zelle mit
   leerem Plättchen) – nie die Anzahl (keine Lösung verraten). */
.bus-question { min-height: clamp(30px, 5vh, 42px); display: flex; align-items: center; justify-content: center; }
.bus-q-cell { width: clamp(30px, 5.6vh, 42px); height: clamp(30px, 5.6vh, 42px);
  display: flex; align-items: center; justify-content: center;
  background: #BFD6E6; border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.12); }
.bus-q-cell .dot { width: 66%; height: 66%; }
.bus-q-cell.pulse { animation: pulse 460ms ease-in-out; }

/* Bewegungsreduktion: alles auf einfache Ein-/Ausblendungen zurücknehmen */
@media (prefers-reduced-motion: reduce) {
  .dot.pop, .dot.pulse, .dot.shimmer, .dot.ghost-flash, .strip.flash-ok, .strip.wobble, .box.wobble, .digit.wobble, .digit.picked,
  .trio-cell.wobble, .eq-row.wobble, .numcard.wobble, .strip-split.flash, .zh-floor.enter, .zh-floor.hint-pulse,
  .family-tri .ft-whole.pulse, .family-tri .ft-part.pulse, .game-target-heart.pulse,
  .love-card.pop-in, .sum-bubble,
  .build-tile.pop-in, .bh-floor.grow, .bh-flag, .build-house.entering, .build-house.leaving, .build-house.wobble,
  .bubble-face.bubble-in, .bubble-face.pop, .bubble-face.wobble,
  .st-card.placed, .st-slot.st-step, .st-slot.hint, .t3f-chip.enter, .t3f-chip.pulse,
  .sc-tile.pop-in, .sc-beam.sc-balanced,
  .rp-house.rp-wobbling, .rp-house.rp-settle, .rp-card.rp-fly, .rp-slot.rp-nod, .rp-slot.flash-ok, .rp-card.wobble,
  .pf-card.pf-won .pf-inner,
  .bus-stage.driving .bus-body, .bus-stage.driving .bus-wheel, .bus-q-cell.pulse,
  .done-card.celebrate, .zh-panel.celebrate, .box .box-num.fly {
    animation: none !important; }
  .bus-blind { transition: opacity 160ms ease; }
  .bus-fig { transition: opacity 160ms ease; }
  .bus-num-reveal { transition: opacity 160ms ease; }
  .build-house.leaving { opacity: 0; }
  .pf-inner { transition: none !important; }   /* Flip ohne Übergang */
  .sc-eq, .bus-eq { transition: none !important; }  /* Gleichung ohne Einblend-Übergang */
  .strip-cover { transition: opacity 200ms ease; }
  .strip-cover.reveal, .strip-cover.reveal-right { transform: none; }
  .strip-shift .strip-split { transition: none; }
  * { transition-duration: 120ms !important; }
}