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

/* Zoom-Übergang Menü <-> Screen: Die angetippte Karte und der neue Screen tragen
   für die Dauer des Wechsels denselben view-transition-name, der Browser lässt
   die Karte dann auf den Bildschirm wachsen. Hier ist nur die Dauer festzulegen –
   die Bewegung macht der Browser. Fehlt die Unterstützung (Safari < 18), wechselt
   der Screen ohne Animation; die App verhält sich sonst identisch. */
::view-transition-group(screen-zoom),
::view-transition-old(screen-zoom),
::view-transition-new(screen-zoom),
::view-transition-group(root) { animation-duration: 300ms; }

/* ---- 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 { position: relative; 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.
   Gemalt wird ein Overlay (::after) ÜBER dem leeren Plättchen, nicht das Plättchen
   selbst: Die Klasse bleibt nach der Animation am Element hängen (structReveal
   räumt sie nicht ab), und ein `opacity: 0` auf dem .dot hat das leere weiße
   Kästchen dauerhaft verschluckt – man sah dort nur noch die hellblaue
   Streifenfläche (Nutzer-Befund 2026-07-27, t1b). So ist der Ruhezustand von
   selbst wieder korrekt, auch bei abgeschalteter Animation. */
.dot.ghost-flash::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  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; }
/* ü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; }
/* Die Decke „nickt", wenn nach der verdeckten Menge gefragt ist und die Antwort
   nicht stimmte (t5b Stufe 2) – der Blick soll aufs Verdeckte gehen. */
.strip-cover.pulse { animation: pulse 460ms ease-in-out; }
/* 3d: Abdeckplatte gleitet nach rechts weg */
.strip-cover.reveal-right { transform: translateX(115%); opacity: 0; }

/* t5b „Umdrehen und tauschen": Gedreht wird die GELEGTE MENGE, nicht der Streifen
   – das Feld (Rahmen, leere Zellen, Fünferlinie) bleibt stehen, wie beim echten
   Umdrehen einer gelegten Reihe. `.turn-layer` ist eine temporäre Kopie der
   belegten Zellen samt Trennstrich; sie dreht um ihren eigenen Mittelpunkt, der
   Strich landet dadurch von selbst bei n−split. Zur Größe siehe die Notiz an den
   Keyframes: gedreht wird in Originalgröße. */
.turn-layer { position: absolute; left: 0; top: 0; height: var(--cell); display: flex;
  z-index: 7; transform-origin: 50% 50%; }
.turn-layer.spin { animation: dot-turn 900ms cubic-bezier(.45,.05,.4,1) forwards;
  filter: drop-shadow(0 6px 10px rgba(28,43,69,0.28)); }
/* Die Menge dreht in ihrer echten Größe – die Plättchen bleiben so groß, wie das
   Kind sie kennt (Nutzer-Vorgabe 2026-07-25). Hochkant ragt die Kette dabei über
   die Zahlzeilen; sie liegt über allem und ist nur während der Bewegung dort. */
@keyframes dot-turn {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
/* Solange die Menge „in der Hand" ist, zeigt das Feld leere Plätze (nicht: gar
   nichts) – die Plättchen sind ja nicht weg, sie werden gerade gedreht. Der echte
   Trennstrich ist so lange unsichtbar, er dreht in der Kopie mit.
   Der Kind-Kombinator schützt die Zellen der Kopie (.strip-inner > .turn-layer > .cell). */
.strip.turning .strip-inner > .cell .dot.filled {
  background: #fff; box-shadow: inset 0 0 0 2px rgba(28,43,69,0.22); }
.strip.turning .strip-inner > .cell .dot.filled::after { display: none; }
.strip.turning .strip-inner > .strip-split { visibility: hidden; }
/* Wende-Griff unter dem Streifen (Platz immer reserviert: visibility statt display) */
.swap-turn-btn { margin-top: calc(var(--cell, 48px) * 0.5); }
.swap-turn-btn.ready { animation: swap-ready 1500ms ease-in-out infinite; }
@keyframes swap-ready {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}
/* zweite Zeile steht schon im Layout, auch wenn sie erst nach der Wende erscheint */
.eq-stack--swap { gap: clamp(30px, 4.8vh, 46px); margin-bottom: calc(var(--cell, 48px) * 0.34); }

/* 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; }
/* Die Vorlage ist das, was gelesen werden soll – Plättchen annähernd so groß wie
   im Streifen darunter (vorher gut halb so groß, auf dem iPad blieb viel Platz). */
.t1e-src .tf10, .t1e-src .blk { --fc: clamp(24px, 6vh, 56px); --bc: clamp(24px, 6vh, 56px); border-radius: 16px; }
.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 { padding: clamp(8px, 1.6vh, 16px) clamp(10px, 1.8vh, 18px); }
.t1e-opt .tf10, .t1e-opt .blk { --fc: clamp(14px, 5vh, 46px); --bc: clamp(14px, 5vh, 46px); }
.t1e-opt .strip { --cell: clamp(13px, min(4.4vh, 2.6vw), 36px); }
.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); }
/* Der Streifen rückt in t3e von Zahl und Kästchen ab: darüber und darunter steht
   je ein Richtungspfeil, der sonst genau dort läge, wo der Strich mittig steht. */
.strip.strip-shift { margin-top: clamp(34px, 5.4vh, 54px);
  margin-bottom: clamp(34px, 5.4vh, 54px); }
/* t3e: Der Richtungspfeil steht doppelt am Zerlegestrich – über UND unter ihm.
   `--dx` versetzt ihn leicht in Bewegungsrichtung (Vielfaches der Zellbreite);
   welcher Pfeil einen Nachbarn überdecken würde, bekommt `.verdeckt`
   (siehe platziereShiftPfeile in zerlegen-ui.js). */
.strip-shift-arrow { position: absolute; left: 50%; color: var(--divider);
  transform: translateX(calc(-50% + var(--dx, 0) * var(--cell)));
  display: flex; pointer-events: none; transition: opacity 220ms ease; }
.strip-shift-arrow svg { stroke-width: 2.4; }
.strip-shift-arrow--top { bottom: calc(100% + var(--cell) * 0.04); }
.strip-shift-arrow--bottom { top: calc(100% + var(--cell) * 0.04); }
.strip-shift-arrow.gone, .strip-shift-arrow.verdeckt { 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); }
/* t5b: beide getauschten Zahlen sind TEILE – zwei Rottöne statt Rot/Blau, damit
   sich die Linien an der Kreuzung trotzdem verfolgen lassen. */
.eq-arrows .arrow-b { stroke: #C86A4B; }
.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: min(1080px, 94vw); }

/* Spielfeld 4 × 3 */
.love-field { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.6vh, 16px);
  width: 100%; max-width: min(1080px, 94vw); }
.love-slot { min-height: clamp(66px, 16.5vh, 172px); 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, 7.6vh, 78px);
  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: min(84%, 230px); }
.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, 19vw, 236px); }
.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, 11vh, 118px); 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, 7.2vh, 78px); height: clamp(46px, 7.2vh, 78px); background: #fff;
  color: var(--whole-blue); font-weight: bold; font-size: clamp(23px, 3.8vh, 42px); 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, 8.2vh, 90px); }
.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, 7.4vh, 80px); height: clamp(48px, 7.4vh, 80px); background: #fff;
  color: var(--part-red); font-weight: bold; font-size: clamp(24px, 4vh, 44px); 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, 7.4vh, 80px); height: clamp(48px, 7.4vh, 80px); 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, 3.6vh, 38px); 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: 900px; margin-top: 0.6vh;
  padding: 14px 18px; background: #E9D9C1; border-radius: 18px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.12); }
/* Breiter als hoch: das Streifenbild (10 Zellen) braucht die Breite */
.build-tile { width: clamp(84px, 17vh, 176px); height: clamp(64px, 11.5vh, 118px);
  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, 6.8vh, 68px);
  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: 168px; }

.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: 1080px; 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, 16.5vh, 156px); height: clamp(88px, 16.5vh, 156px);
  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.6vh, 34px); 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: 78%; }

@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" -------------------------------------------------- */
/* Platznutzung: Die Zeilenhöhe --rh ergibt sich aus der verfügbaren Höhe geteilt
   durch die Zeilenzahl des höchsten Hauses (--rows setzt das JS), gedeckelt über
   die Breite (zwei Häuser + Ablage müssen nebeneinander passen). Alles Weitere
   (Dach, Karten, Streifenbild, Zahlenpaar) hängt an --rh. */
.st-stage { --rows: 6;
  --rh: clamp(38px, min(calc((100vh - 176px) / (var(--rows) + 1.35)), 7.2vw), 88px);
  display: flex; align-items: flex-start; justify-content: center; gap: calc(var(--rh) * 0.6); margin-top: 4px; }
.st-house { display: flex; flex-direction: column; width: fit-content; }
.st-roof { position: relative; height: calc(var(--rh) * 1.1); }
.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: 2px; transform: translateX(-50%); color: #fff; font-weight: bold; font-size: calc(var(--rh) * 0.58); line-height: 1; }
.st-stack { display: flex; flex-direction: column; gap: 6px; background: #EBDCC6; border-radius: 0 0 12px 12px; padding: 8px 12px 10px; }
.st-slot { box-sizing: border-box; min-height: calc(var(--rh) - 6px); min-width: calc(var(--rh) * 3.3); border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.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: calc(var(--rh) * 0.09) calc(var(--rh) * 0.2); 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; height: calc(var(--rh) * 0.6); width: auto; }
.st-card.sym { font-weight: bold; font-size: calc(var(--rh) * 0.6); line-height: 1; color: #9A3B3B; padding: calc(var(--rh) * 0.06) calc(var(--rh) * 0.34); }
.st-sym-line { width: 3px; height: calc(var(--rh) * 0.6); background: #B03A3A; border-radius: 2px; margin: 0 calc(var(--rh) * 0.22); }
.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: 980px;
  height: clamp(220px, 46vh, 440px); }
.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, 780px);
  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: 6px; min-width: clamp(96px, 20vw, 240px); min-height: clamp(56px, 10.6vh, 100px);
  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, 8vh, 76px); min-height: clamp(38px, 8vh, 76px);
  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, 4.8vh, 46px);
  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: clamp(74px, 12.5vh, 118px); }
/* Reservierte leere Plätze der rechten Schale (kein Layout-Sprung) */
.sc-slot { min-width: clamp(38px, 8vh, 76px); min-height: clamp(38px, 8vh, 76px);
  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: 820px; }
.sc-tile { width: clamp(80px, 16vh, 164px); height: clamp(56px, 10.5vh, 108px); }
/* 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" --------------------------------------------------- */
/* Platznutzung wie im Treppenhaus: --rh aus Höhe / Etagenzahl (--rows vom JS);
   das Ersatzkarten-Fach unter dem Haus zählt als gut anderthalb Zeilen mit. */
.rp-stage { --rows: 6;
  --rh: clamp(38px, calc((100vh - 196px) / (var(--rows) + 2.9)), 84px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vh, 20px); margin-top: 4px; }
/* 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: calc(var(--rh) * 1.1); }
.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: 2px; transform: translateX(-50%); color: #fff; font-weight: bold; font-size: calc(var(--rh) * 0.58); line-height: 1; }
.rp-stack { display: flex; flex-direction: column; gap: 6px; background: #EBDCC6; border-radius: 0 0 12px 12px; padding: 8px 12px 10px; }
.rp-slot { box-sizing: border-box; min-height: calc(var(--rh) - 6px); min-width: calc(var(--rh) * 3.5); border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* 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: calc(var(--rh) * 0.09) calc(var(--rh) * 0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.18); font-family: inherit; }
.rp-card .rp-strip svg { display: block; height: calc(var(--rh) * 0.6); width: auto; }
.rp-card.sym { font-weight: bold; font-size: calc(var(--rh) * 0.6); line-height: 1; color: #9A3B3B; padding: calc(var(--rh) * 0.06) calc(var(--rh) * 0.34); }
.rp-sym-line { width: 3px; height: calc(var(--rh) * 0.6); background: #B03A3A; border-radius: 2px; margin: 0 calc(var(--rh) * 0.22); }
@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(12px, 2.6vw, 30px); width: 100%; min-height: calc(var(--rh) * 1.35); }
.rp-card.rp-repl { box-sizing: border-box; min-height: calc(var(--rh) - 2px); padding: calc(var(--rh) * 0.12) calc(var(--rh) * 0.26); 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: min(1040px, 92vw); }
.pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.8vh, 16px);
  width: 100%; max-width: min(1040px, 92vw); margin: clamp(8px, 2vh, 20px) auto 0; }
.pf-card { position: relative; height: clamp(72px, 19vh, 196px); cursor: pointer;
  perspective: 900px; -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, 6.4vh, 64px); color: var(--part-red); }
.pf-back.sym > span { position: relative; top: 0.06em; }
.pf-sym-line { width: 4px; height: clamp(24px, 6.8vh, 68px); 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: min(84%, 220px); }
/* 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: min(1040px, 92vw); }
.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(130px, 15vw, 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; }
/* Der Spiegel-Platzhalter darf nachgeben: Auf schmalen iPads (1024 px) ragte die
   Gleichung sonst rechts aus dem Bild. Er schrumpft nur so weit wie nötig – die
   Breiten sind statisch, der Bus verrutscht also weiterhin nie. */
.bus-row > .bus-eq-spacer { flex: 0 1 clamp(130px, 15vw, 196px); min-width: 0; width: auto; }
.bus-row > .bus-scene { flex: none; }
.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, min(6.4vh, 4.3vw), 60px); 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; }

/* ---- t3g „Muster zerlegen": Punktmuster einkreisen ----------------------- */
/* Die Bühne ist quadratisch, damit die Musterkoordinaten (Einheitsquadrat) ohne
   Verzerrung skalieren – sonst würden runde Blasen zu Ellipsen. */
/* Zeichenfläche: nimmt Breite UND Höhe voll aus. Beim Einkreisen fährt die Hand
   weit um die Plättchen herum – eine knapp sitzende Fläche schneidet die Linie ab
   und nimmt Züge nicht an, die knapp außerhalb beginnen. Die viewBox wird zur
   Laufzeit an das Seitenverhältnis angepasst (fitStage), sodass rings um das
   Muster echter Auslauf entsteht; `overflow: visible` sorgt zusätzlich dafür,
   dass nichts hart abgeschnitten wird. */
.pz-wrap { width: min(99vw, 1280px); height: min(64vh, 640px); flex: none;
  margin: 0 auto; touch-action: none; overflow: visible; }
.pz-stage { display: block; width: 100%; height: 100%; touch-action: none;
  overflow: visible; -webkit-user-select: none; user-select: none; cursor: crosshair; }
.pz-dot { fill: var(--bead); transition: fill 160ms ease; }
.pz-dot.pz-pop { animation: pz-pop 420ms ease-in-out; transform-box: fill-box;
  transform-origin: center; }
@keyframes pz-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }
/* Umriss: Farbe kommt je Teilmenge per style.color, Füllung leitet sie ab. */
.pz-blob { fill: currentColor; fill-opacity: 0.10; stroke: currentColor;
  stroke-width: 3.4; stroke-linejoin: round; color: var(--part-red); }
.pz-blob--live { stroke-dasharray: 9 7; fill-opacity: 0.14; }
/* Die vorgegebene Einteilung erscheint erst nach einem Moment – sanft, damit der
   Blick vom nackten Muster mitgeht. */
.pz-blob.pz-in { animation: pz-blob-in 420ms ease-out; }
@keyframes pz-blob-in { from { opacity: 0; } to { opacity: 1; } }
.pz-trail { fill: none; stroke: #7d8b95; stroke-opacity: 0.5; stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round; }
.pz-wrap.wobble { animation: wobble 420ms ease-in-out; }
/* Teilmengen-Zeile: die Zahlen tragen die Farbe ihrer Blase, damit die
   Zuordnung ohne Erklärung lesbar ist. */
.pz-sum { display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; min-height: clamp(44px, 7vh, 62px); margin-top: 0.6vh; }
.pz-num { font-weight: bold; font-size: clamp(26px, 4.6vh, 42px); line-height: 1;
  min-width: 1.2ch; text-align: center; color: var(--part-red); }
.pz-op { font-weight: bold; font-size: clamp(21px, 3.6vh, 33px); color: #5b6b76; line-height: 1; }
/* Hinweise im Übungsschirm sprechen das Kind an -> Grundschrift (system-ui ist
   nur im Menü und in den Lehrkraft-Panels zu Hause). */
.pz-hint { font-size: clamp(13px, 1.9vh, 16px); color: #8a9299; }
.pz-box { margin-left: 2px; }
/* Zerlegungs-Streifen: liegt ÜBER der Ziffernleiste (absolut), damit beim
   Einblenden nichts verrutscht; verschwindet nach gut zwei Sekunden von selbst. */
.pz-streifen { position: absolute; left: 50%; bottom: 96px; z-index: 4;
  pointer-events: none; padding: 9px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 4px 16px rgba(28, 43, 69, 0.18);
  transform: translateX(-50%); }
.pz-streifen .strip { --cell: clamp(26px, 4.6vh, 44px); }
.pz-streifen.zeigen { animation: pz-strip-in 260ms ease-out; }
.pz-streifen.weg { opacity: 0; transition: opacity 300ms ease; }
@keyframes pz-strip-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* Lesestufe: Kästchen für die Teilzahlen, Rand in der Farbe „seiner" Blase –
   so ist ohne Erklärung klar, welche Gruppe gemeint ist. */
.pz-part-box { border-width: 3px; }
.pz-stage--read { cursor: default; }
/* Die Ziffernleiste erscheint erst, wenn alle Plättchen eingekreist sind. */
/* Die Leiste liegt über dem Brücken-Streifen (z-index 4): Sobald alles
   eingekreist ist, darf die Eingabe durch nichts verstellt sein – auch nicht
   optisch, wenn der Streifen auf einem flachen Bildschirm tiefer rutscht. */
.pz-digits { visibility: hidden; position: relative; z-index: 6; }
.pz-digits.show { visibility: visible; }

/* ---- t1f „Mengen zusammensetzen": Kasten oder Streifen ------------------- */
.cm-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  min-height: 30px; margin-bottom: 0.4vh; }
.cm-chip { display: flex; align-items: center; gap: 2px; padding: 4px 10px;
  border-radius: 9px; background: #fff; box-shadow: var(--shadow);
  font-weight: bold; font-size: clamp(15px, 2.3vh, 20px); line-height: 1; }
.cm-chip.fresh { animation: pop 300ms ease-out; }
.cm-chip-op { color: #5b6b76; margin: 0 2px; }
.cm-chip-w { color: var(--whole-blue); }
.cm-stage { display: flex; align-items: center; justify-content: center; }
/* Zahlenschild an der Kante des Zielbereichs (wie das Kästchen auf dem Arbeitsblatt) */
.cm-plate { width: clamp(46px, 7.4vh, 68px); height: clamp(58px, 9.4vh, 86px);
  border-radius: 12px; background: var(--whole-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: clamp(28px, 5.2vh, 48px); box-shadow: var(--shadow);
  position: relative; z-index: 2; margin-right: -14px; }
.cm-target { display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; transition: border-color 180ms ease, background 180ms ease; }
.cm-box { min-width: min(62vw, 520px); min-height: clamp(120px, 22vh, 210px);
  border: 3px solid #7d8b95; border-radius: 16px; background: #FCFDFD;
  padding: 14px 18px 14px 26px; }
.cm-box.ok { border-color: var(--ok); background: #F4FAF6; }
.cm-strip-host { padding-left: 22px; }
.cm-in { background: #fff; border: 2px solid var(--part-red); border-radius: 12px;
  padding: 7px 9px; cursor: pointer; }
.cm-empty { font-size: clamp(13px, 1.9vh, 16px); color: #a7b0b7; }
.cm-target.wobble { animation: wobble 420ms ease-in-out; }
/* Vorrat auf der Sand-Ablage der Spielszenen */
.cm-shelf { display: flex; gap: clamp(8px, 1.6vw, 16px); justify-content: center;
  flex-wrap: wrap; padding: clamp(8px, 1.6vh, 16px); margin-top: 0.8vh;
  background: #EBDCC6; border-radius: 16px; max-width: 96vw; }
.cm-card { background: #fff; border: 1px solid #C7B79A; border-radius: 12px;
  padding: 8px 10px; cursor: pointer; transition: transform 120ms ease;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(74px, 12vh, 108px); }
/* In der Ablage werden die Darstellungen auf ein gemeinsames, kleineres Maß
   gebracht – sonst überragt ein Zehnerstreifen jedes Würfelbild um das Dreifache. */
.cm-card .strip { --cell: clamp(17px, 2.9vh, 27px); padding: calc(var(--cell) * 0.12);
  border-radius: 10px; }
.cm-card .tf10 { --fc: clamp(17px, 2.9vh, 27px); }
.cm-card .blk { --bc: clamp(18px, 3.1vh, 29px); }
/* Die eingelegten Bilder im Kasten dürfen etwas größer sein (kein Platzdruck). */
.cm-in .strip { --cell: clamp(19px, 3.2vh, 30px); }
.cm-in .tf10 { --fc: clamp(19px, 3.2vh, 30px); }
.cm-in .blk { --bc: clamp(20px, 3.4vh, 32px); }
.cm-card:hover { transform: translateY(-3px); }
.cm-card.used { visibility: hidden; }
.cm-card.wobble { animation: wobble 420ms ease-in-out; }
/* Würfelbild und gestreute Punkte (die beiden Darstellungen, die es sonst nicht gibt) */
.cm-dice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  width: clamp(64px, 11vh, 96px); aspect-ratio: 1; padding: 6px;
  border: 2.5px solid #c3ced6; border-radius: 12px; }
.cm-dice-cell { display: flex; align-items: center; justify-content: center; }
.cm-dice .dot { width: 82%; height: 82%; }
.cm-loose { position: relative; width: clamp(74px, 12vh, 106px); aspect-ratio: 1.05; }
/* Höhe aus der Breite ableiten, NICHT ebenfalls in Prozent: Die Karte ist breiter
   als hoch, und 22 % Breite neben 22 % Höhe ergäbe eine liegende Ellipse statt
   eines Plättchens. */
.cm-loose-dot { position: absolute; width: 19%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%); }
/* Kontrollgleichung: erscheint ERST, wenn die Menge aufgeht */
.cm-eq { display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: clamp(40px, 6.4vh, 58px); font-weight: bold;
  font-size: clamp(24px, 4.2vh, 38px); line-height: 1; }
.cm-eq.enter { animation: floor-in 300ms ease-out; }
.cm-op { color: #5b6b76; font-size: 0.86em; }
.cm-whole { color: var(--whole-blue); }
.cm-ask { font-weight: 400; color: #8a9299;
  font-size: clamp(14px, 2.1vh, 18px); }
.cm-actions { display: flex; gap: 12px; align-items: center; justify-content: center;
  flex-wrap: wrap; min-height: clamp(44px, 7vh, 62px); }
/* Die fertige Gleichung fliegt in die Chip-Zeile über dem Kasten. */
.cm-ghost { position: fixed; margin: 0; pointer-events: none; z-index: 61;
  transition: transform 540ms cubic-bezier(0.4, 0, 0.2, 1); }
/* Punkte, die aus dem Bild in die Streifenzellen wandern */
.cm-fly { position: fixed; width: clamp(20px, 3.4vh, 34px); height: clamp(20px, 3.4vh, 34px);
  border-radius: 50%; pointer-events: none; z-index: 60;
  transform: translate(-50%, -50%);
  transition: transform 420ms cubic-bezier(0.4, 0, 0.25, 1); }

/* Bewegungsreduktion: alles auf einfache Ein-/Ausblendungen zurücknehmen */
@media (prefers-reduced-motion: reduce) {
  .dot.pop, .dot.pulse, .dot.shimmer, .dot.ghost-flash::after, .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,
  .swap-turn-btn.ready, .strip-cover.pulse,
  .pz-blob.pz-in, .pz-dot.pz-pop, .pz-wrap.wobble, .pz-streifen.zeigen, .cm-chip.fresh, .cm-card.wobble, .cm-target.wobble, .cm-eq.enter,
  .cm-ghost,
  .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 */
  .cm-fly { transition-duration: 160ms; }   /* Punktflug nur noch angedeutet */
  .strip-cover { transition: opacity 200ms ease; }
  .strip-cover.reveal, .strip-cover.reveal-right { transform: none; }
  .strip-shift .strip-split { transition: none; }
  .turn-layer.spin { animation-duration: 200ms; filter: none; }
  * { transition-duration: 120ms !important; }
}

/* ==========================================================================
   Spiel „Geheime Durchfahrt" (race): Straße im Canvas, Mauer/Auto als DOM.
   --rcw = Zellbreite der Mauer auf Höhe des Autos (setzt raceLayout).
   ========================================================================== */
.race-stage { position: relative; align-self: stretch; flex: 1; min-height: 0; overflow: hidden;
  border-radius: 18px; touch-action: none; --rcw: 90px; box-shadow: var(--shadow); }
.race-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Mauer = Zehnerstreifen quer über der Straße (zwei Teile, die auseinanderrücken) */
.rc-wall { position: absolute; top: 0; left: 0; transform-origin: 50% 100%; will-change: transform;
  display: flex; filter: drop-shadow(0 8px 6px rgba(0,0,0,.22)); }
.rc-part { display: flex; position: relative; transition: transform .2s ease-out;
  border-top: 7px solid #7FA3BF; border-bottom: 7px solid #7FA3BF; background: var(--panel); }
.rc-part.left  { border-left: 7px solid #7FA3BF; border-radius: 12px 0 0 12px; }
.rc-part.right { border-right: 7px solid #7FA3BF; border-radius: 0 12px 12px 0; }
.rc-cell { width: var(--rcw); height: var(--rcw); background: #fff; border: 2px solid #8FB0C9;
  display: flex; align-items: center; justify-content: center; }
.rc-cell.five { border-left: 6px solid var(--ink); }           /* Kraft der Fünf */
.rc-cell.rock { background: #8E9A9C; border-color: #7C888A;
  background-image: radial-gradient(circle at 30% 30%, #A3AEB0 0 18%, transparent 19%),
                    radial-gradient(circle at 70% 65%, #7C888A 0 14%, transparent 15%); }
.rc-dot { width: 72%; height: 72%; border-radius: 50%; background: var(--bead); transition: background .2s; }
.rc-wall.open .rc-dot { background: var(--part-red); }
.rc-wall.open .rc-part.left  { transform: translateX(calc(var(--rcw) * -0.5)); }
.rc-wall.open .rc-part.right { transform: translateX(calc(var(--rcw) *  0.5)); }
.rc-lbl { position: absolute; bottom: 100%; margin-bottom: 10px; transform: translateX(-50%);
  font-size: calc(var(--rcw) * .9); font-weight: bold; color: var(--part-red); opacity: 0;
  transition: opacity .2s; text-shadow: 0 2px 0 #fff; line-height: 1; }
.rc-wall.open .rc-lbl { opacity: 1; }
.rc-glow { position: absolute; left: 0; top: -18%; bottom: -18%; width: 14px; margin-left: -7px;
  border-radius: 7px; background: #FFD76A; box-shadow: 0 0 22px 10px rgba(255,215,106,.9);
  opacity: 0; z-index: 3; }
.rc-wall.hint .rc-glow { animation: rc-glow .7s ease-in-out infinite alternate; }
@keyframes rc-glow { from { opacity: .45; } to { opacity: 1; } }

/* Tor-Mauer (Stufe 4, Umkehrung: Bild -> Zahlenpaar) */
.rc-gate { width: calc(var(--rcw) * 10 / 3); height: calc(var(--rcw) * 1.25); padding: 0 8px; }
.rc-gate > div { height: 100%; background: #F4ECDD; border: 7px solid #B59A6A; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: .18em;
  font-size: calc(var(--rcw) * .78); font-weight: bold; color: var(--part-red);
  transition: transform .22s ease-in, opacity .22s; }
.rc-gate i { width: 6px; height: 62%; background: var(--divider); border-radius: 3px; }
.rc-gate.open > div { transform: translateY(-115%); opacity: .2; }
.rc-gate.hint > div { animation: rc-gateglow .7s ease-in-out infinite alternate; }
@keyframes rc-gateglow { from { box-shadow: 0 0 0 0 rgba(255,215,106,0); }
  to { box-shadow: 0 0 26px 12px rgba(255,215,106,.95); border-color: #E5B93F; } }

/* Zielbogen */
.rc-wall.finish { height: calc(var(--rcw) * 2.4); width: calc(var(--rcw) * 10 + 32px); filter: none;
  border-left: 16px solid var(--ink); border-right: 16px solid var(--ink); }
.rc-wall.finish::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: repeating-conic-gradient(#1C2B45 0 25%, #fff 0 50%) 0 0 / 44px 44px;
  border: 5px solid var(--ink); }

/* Auto */
.rc-car { position: absolute; left: 0; top: 0; z-index: 5; will-change: transform;
  width: calc(var(--rcw) * .92); height: calc(var(--rcw) * .92 * .84); pointer-events: none; }
.rc-car svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rc-car.shake svg { animation: rc-shake .5s; }
@keyframes rc-shake { 0%,100% { transform: none; } 20% { transform: translate(-9px,6px) rotate(-5deg); }
  45% { transform: translate(8px,10px) rotate(4deg); } 70% { transform: translate(-5px,4px) rotate(-2deg); } }
.rc-flame { opacity: 0; transition: opacity .2s; transform-origin: 50% 0; transform-box: fill-box; }
.rc-car.turbo .rc-flame { opacity: 1; animation: rc-flick .12s infinite alternate; }
@keyframes rc-flick { from { transform: scaleY(.8); } to { transform: scaleY(1.25); } }

/* Schild: App-Darstellungen (Streifen / Zahlentrio), groß */
.rc-sign { position: absolute; top: 10px; left: 50%; transform: translate(-50%, -130%); z-index: 8;
  background: #fff; border: 6px solid var(--whole-blue); border-radius: 18px; padding: 10px 26px 12px;
  min-width: 250px; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 5px 12px rgba(0,0,0,.18); transition: transform .35s cubic-bezier(.2,1.2,.4,1);
  pointer-events: none; }
.rc-sign.show { transform: translate(-50%, 0); }
.rc-sign .strip { margin: 12px 0; --cell: clamp(30px, 5.4vh, 46px); }
.rc-sign .family-tri { font-size: clamp(40px, 7vh, 62px); line-height: 1.05; }
.rc-sign .box { width: clamp(50px, 8vh, 70px); height: clamp(50px, 8vh, 70px); box-shadow: none;
  background: #FBF3F3; cursor: default; }
.rc-sign .ft-parts { align-items: center; }

/* HUD */
.rc-hud { position: absolute; left: 12px; top: 10px; z-index: 8; display: flex; gap: 10px; pointer-events: none; }
.rc-pill { background: #fff; border-radius: 16px; padding: 5px 14px; font-size: 28px; font-weight: bold;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); min-width: 96px; }
.rc-pill-star { color: #B98A15; min-width: 74px; }
.rc-pill-star svg { color: var(--yellow); }
.rc-progress { position: absolute; right: 16px; top: 20px; z-index: 8; display: flex; gap: 5px; pointer-events: none; }
.rc-progress span { width: 16px; height: 16px; border-radius: 50%; background: var(--grey); }
.rc-progress span.done { background: var(--ok); }
.rc-progress span.miss { background: var(--yellow); }
.rc-toast { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%) scale(.6); z-index: 9;
  font-size: 60px; font-weight: bold; color: var(--yellow); text-shadow: 0 3px 0 var(--ink); opacity: 0;
  transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
.rc-toast.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Bildschirmtasten unten links/rechts */
.rc-btn { position: absolute; bottom: 14px; z-index: 9; width: 84px; height: 84px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 4px 0 rgba(28,43,69,.28);
  display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; }
.rc-btn.left { left: 16px; } .rc-btn.right { right: 16px; }
.rc-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(28,43,69,.28); }

.gp-race { display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .rc-car.shake svg, .rc-wall.hint .rc-glow, .rc-gate.hint > div { animation: none; }
  .rc-wall.hint .rc-glow { opacity: 1; }
}

/* ==========================================================================
   Spiel „Lianen-Schnitt" (jungle): feste SVG-Bühne 1180×820, per viewBox in
   den Übungsbereich eingepasst (Letterboxing in Dschungelgrün).
   ACHTUNG: CSS-Keyframes auf transform überschreiben das transform-ATTRIBUT
   von SVG-Gruppen – alles Animierte sitzt deshalb in INNEREN Gruppen.
   ========================================================================== */
.jungle-stage { position: relative; align-self: stretch; flex: 1; min-height: 0; overflow: hidden;
  border-radius: 18px; touch-action: none; background: #1B2A23; box-shadow: var(--shadow); }
.jg-svg { display: block; width: 100%; height: 100%; touch-action: none; }
.jg-txt { font-family: 'Grundschrift', system-ui, sans-serif; }

/* Tiefenebenen: Skalierung um den Fluchtpunkt (Inline-Style), hier nur die Dauer */
.jg-tiefe { transform-box: view-box; transform-origin: 0 0;
  transition: transform 1.4s cubic-bezier(.42,.02,.38,1), opacity 1.4s ease; }
.jg-welt { transform-box: view-box; transform-origin: 0 0;
  transition: transform .7s cubic-bezier(.4,0,.3,1); }
.jg-wippe { transform-box: view-box; transform-origin: 0 0; }
.jg-wippe.geht { animation: jg-wippen 1.4s ease-in-out; }
@keyframes jg-wippen { 0% { transform: translate(0,0); } 22% { transform: translate(-5px,-9px); }
  50% { transform: translate(4px,4px); } 78% { transform: translate(5px,-7px); }
  100% { transform: translate(0,0); } }

/* Gestrüppwand: die beiden Hälften weichen zur Seite */
.jg-gb { transform-box: view-box; transform-origin: 0 0;
  transition: transform .85s cubic-bezier(.34,.9,.4,1); }

/* Wischspur der Machete */
.jg-spur { fill: none; stroke: #FFF8E0; stroke-width: 10; stroke-linecap: round;
  stroke-linejoin: round; filter: drop-shadow(0 0 7px #ffffffaa); }
.jg-spur.weg { animation: jg-spurweg .5s ease forwards; }
@keyframes jg-spurweg { to { opacity: 0; stroke-width: 2; } }

/* Machete in der rechten Hand */
.jg-machete-folgt { transform-box: view-box; transform-origin: 0 0;
  transition: transform .32s cubic-bezier(.3,.8,.4,1); }
.jg-machete-hieb { transform-box: view-box; transform-origin: 0 0; }
.jg-machete-hieb.hieb { animation: jg-hieb .52s cubic-bezier(.3,.9,.4,1); }
@keyframes jg-hieb { 0% { transform: rotate(-34deg) translate(0,10px); }
  40% { transform: rotate(26deg) translate(0,-6px); } 100% { transform: rotate(0deg) translate(0,0); } }

/* Teilstücke, Zahlen, Blüten */
.jg-teilstueck { transform-box: view-box; transform-origin: 0 0;
  transition: transform .9s cubic-bezier(.34,.9,.4,1), opacity .5s ease; }
/* Fehlschnitt: die Liane reißt nur auf und klafft ein Stück – schnelle Bewegung */
.jg-teilstueck.fasrig { transition: transform .42s cubic-bezier(.4,0,.3,1), opacity .3s ease; }
.jg-faeden { transition: opacity .35s ease; }
.jg-zahl { opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center;
  transition: opacity .25s ease, transform .3s cubic-bezier(.3,1.5,.5,1); }
.jg-zahl.an { opacity: 1; transform: scale(1); }
.jg-blume { transform-box: fill-box; transform-origin: center; }
.jg-blume.puls { animation: jg-blumepuls .55s ease 3; }
@keyframes jg-blumepuls { 0%,100% { transform: scale(1); } 45% { transform: scale(1.3); } }

/* Hinweis-Puls auf der Schatzkarte */
.jg-merk { transform-box: fill-box; transform-origin: center; }
.jg-merk.puls { animation: jg-merkpuls .9s ease 3; }
@keyframes jg-merkpuls { 0%,100% { transform: scale(1); } 45% { transform: scale(1.045); } }

/* Wegpunkte oben rechts: neu dazugekommener Punkt poppt auf */
.jg-dot { transition: fill .3s ease, r .3s ease; transform-box: fill-box; transform-origin: center; }
.jg-dot.jg-new { animation: jg-pop .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes jg-pop { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1); } }

/* Schatztruhe */
.jg-deckel { transform-box: fill-box; transform-origin: 8% 100%;
  transition: transform .9s cubic-bezier(.3,1.3,.5,1); }
.jg-deckel.auf { transform: rotate(-46deg); }

/* Menü-Vorschau */
.gp-jungle { position: relative; display: flex; align-items: center; justify-content: center; }
.gp-j-a, .gp-j-b { position: absolute; bottom: -2px; font-size: 19px; font-weight: bold;
  color: var(--part-red); line-height: 1; }
.gp-j-a { left: 14px; } .gp-j-b { right: 18px; }

@media (prefers-reduced-motion: reduce) {
  .jg-wippe.geht, .jg-machete-hieb.hieb, .jg-blume.puls, .jg-merk.puls, .jg-dot.jg-new,
  .jg-spur.weg { animation: none; }
  .jg-spur.weg { opacity: 0; }
}

/* Studienzugang: Formular für die begleitende Lehrkraft. */
.study-entry { max-width: 640px; margin: 24px auto; padding: 28px; background: #fff; border-radius: 20px; font-family: system-ui, sans-serif; }
.study-entry h1 { font-size: 1.6rem; color: #2B5C8A; }
.study-entry p { line-height: 1.5; }
.study-entry label { display: block; margin: 18px 0; font-weight: 600; }
.study-entry input, .study-entry select { display: block; width: 100%; padding: 12px; margin-top: 6px; border: 1px solid #aab8c5; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
.study-entry button { margin: 12px 10px 0 0; min-height: 44px; }
.study-status { min-height: 3em; }
.diag-table input[type="text"] { width: 110px; }