@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 {
  --bg: #E7EDEF;
  --box: #A7C4DA;
  --bead: #24344E;
  --bead-shine: rgba(255,255,255,0.35);
  --divider: #2A3A52;
  --cover: #E5E1D6;
  --ink: #1C2B45;
  --accent: #3E8E8E;
  --btn-bg: #FFFFFF;
  --roof: #A7C4DA;        /* Rechenhaus = durchgehend Box-Blau, Struktur über Striche */
  --cover-line: #D6D0C2;  /* etwas dunklerer Sand für die Rolladen-Rillen (opak!) */
  --whole-blue: #2B5C8A;  /* Gesamtmenge: gedämpftes Blau (Zahl-Farbe, optional) */
  --part-red:  #9A3B3B;   /* Teilmengen: dunkles Backstein-Rot (Zahl-Farbe, optional) */
  /* gemeinsame Dachhöhe: Rechenhaus und seitliches Zahlenhaus -> Dachkanten auf einer Linie */
  --roof-h: 14vh;
  --roof-min: 70px;
}

* { 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); font-family: 'Grundschrift', sans-serif; color: var(--ink); }

/* 100dvh = sichtbare Viewport-Höhe (iOS Safari: 100vh ist zu groß -> Box ragt unten raus);
   100vh als Fallback für ältere Browser ohne dvh-Unterstützung. */
#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* Toolbar – kein Unterrand, damit die Lücke zur Box = Stage-Rand (18px) ist (einheitlich) */
#toolbar { display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 12px 18px 0; flex-wrap: wrap; }
.round { width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--btn-bg);
  color: var(--ink); font-size: 28px; box-shadow: 0 3px 8px rgba(0,0,0,0.12); cursor: pointer; }
.pill { height: 56px; padding: 0 22px; border-radius: 28px; border: none; background: var(--btn-bg);
  color: var(--ink); font-size: 22px; box-shadow: 0 3px 8px rgba(0,0,0,0.12); cursor: pointer; }
.pill.accent { background: var(--accent); color: #fff; }
.pill.active, .round.active { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Info-, Einstellungs- & Teilen-Buttons oben links in der Ecke */
#corner-tools { position: fixed; top: 14px; left: 14px; z-index: 600; display: flex; align-items: center; gap: 4px; }
#corner-tools.corner-hidden { display: none; }   /* bei zu wenig Breite (Kollision mit Toolbar) ausblenden */
#corner-tools.collapsed #btn-info,
#corner-tools.collapsed #btn-settings,
#corner-tools.collapsed #btn-share { display: none; }   /* eingeklappt: nur der ⋯-Knopf sichtbar */

/* Plattform-steuerbar im iframe: obere Leiste / Interaktionen ein- oder ausblenden */
body.no-toolbar #toolbar { display: none; }
body.native-app #btn-fullscreen { display: none; }     /* native App ist bereits Vollbild */
body.no-interaction #stage { pointer-events: none; }   /* Material nicht manipulierbar */
body.no-interaction #btn-minus, body.no-interaction #btn-plus,
body.no-interaction .rh-step, body.no-interaction .rh-move,
body.no-interaction .zh-cam, body.no-interaction .cover-strip { display: none; }
.corner-btn { width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  color: var(--ink); display: flex; align-items: center; justify-content: center; }
/* Info & Einstellungen: nur Symbol, Hintergrund nur beim Drüberfahren */
.corner-bare { background: transparent; box-shadow: none; }
.corner-bare:hover { background: rgba(255,255,255,0.5); }
.corner-bare.active { background: rgba(255,255,255,0.72); }

/* Einstellungen-Panel */
.panel { position: fixed; top: 62px; left: 14px; z-index: 700;
  background: #fff; border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.20); max-width: 300px;
  max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto;   /* zu hoch -> scrollbar (dvh: iOS-Adressleiste) */
  touch-action: pan-y; overscroll-behavior: contain;  /* global touch-action:none -> hier Scroll erlauben */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Systemschrift */
.switch-row { display: flex; align-items: center; gap: 12px; font-size: 17px; cursor: pointer; margin-top: 4px; }
.switch-row input { width: 24px; height: 24px; flex: none; accent-color: var(--accent); }
.panel .hint { font-size: 13px; color: #5a6b80; margin: 8px 0 4px; line-height: 1.4; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 17px; margin-bottom: 8px; }
.set-row input[type="number"] { width: 68px; font-size: 17px; padding: 5px 7px; text-align: center;
  border: 1.5px solid #c8cdd2; border-radius: 8px; font-family: inherit; }
.set-row select { font-size: 16px; padding: 5px 8px; border: 1.5px solid #c8cdd2; border-radius: 8px;
  background: #fff; color: var(--ink); font-family: inherit; max-width: 62%; }
.set-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 17px; cursor: pointer; user-select: none; margin: 8px 0 2px; }
.set-chevron { color: #5a6b80; font-size: 14px; transition: transform 160ms ease; }
.set-subhead[aria-expanded="true"] .set-chevron { transform: rotate(90deg); }
.set-sub { padding: 2px 0 4px 6px; }
.arr-row { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; margin-top: 6px; }
.arr-row input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
#box.add-mode .chamber { cursor: copy; }
.tool-total { display: flex; align-items: center; gap: 10px; height: 56px; background: var(--btn-bg);
  border-radius: 28px; padding: 0 8px; box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
.tool-total .round { box-shadow: none; width: 48px; height: 48px; font-size: 30px; }
#total-value { position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 44px; cursor: pointer; }
#total-value .tv-num { font-size: 30px; font-weight: bold; }
#total-value .tv-cover { position: absolute; inset: 4px -2px; display: none; border-radius: 9px;
  background: repeating-linear-gradient(var(--cover), var(--cover) 5px, var(--cover-line) 5px, var(--cover-line) 7px); }
#total-value.covered .tv-num { visibility: hidden; }
#total-value.covered .tv-cover { display: block; }

/* Gesamtzahl-Stepper sitzt in der Werkzeugleiste (umbricht bei Platzmangel in eine eigene Zeile);
   ausgeblendet, wenn Rechenhaus an oder Gesamtzahl-Ändern aus. */
#total-bar.hidden { display: none; }

/* Stage + Box */
#stage { flex: 1; display: flex; flex-direction: row; padding: 18px; gap: 16px; min-height: 0; min-width: 0; }
#main-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#box { position: relative; flex: 1; min-height: 0; background: var(--box); border-radius: 28px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.10); overflow: hidden; }

/* Seitliches Zerlegungshaus */
#zerlegung { flex: 0 0 24%; min-width: 196px; max-width: 330px; min-height: 0;
  display: flex; flex-direction: column; }
#zerlegung.hidden { display: none; }
/* Animiertes Ein-/Ausblenden: Panel ändert seine Größe, die Box (flex:1) wächst/schrumpft mit */
.panel-anim { overflow: hidden; }                                   /* geschlossen + während der Animation: clippen */
.panel-anim.panel-open:not(.panel-animating) { overflow: visible; } /* offen & fertig: Schatten nicht abschneiden */
#family.panel-anim, #rechenhaus.panel-anim { transition: height 280ms ease, opacity 280ms ease; }
#zerlegung.panel-anim { transition: flex-basis 280ms ease, opacity 280ms ease; }
.zh-roof { position: relative; height: var(--roof-h); min-height: var(--roof-min); }
.zh-roof-shape { position: absolute; inset: 0; background: var(--roof);
  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: 31%; transform: translateX(-50%); z-index: 2;   /* Mitte auf Höhe der Rechenhaus-Dachzahl */
  display: flex; align-items: center; justify-content: center;
  width: 7vh; height: 7vh; min-width: 46px; min-height: 46px; background: #fff; color: var(--ink);
  font-weight: bold; font-size: 3.6vh; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.18); }
.zh-body { position: relative; flex: 1; min-height: 0; background: var(--roof);
  border-top: 2px solid rgba(28,43,69,0.16); border-radius: 0 0 16px 16px;
  display: flex; flex-direction: column; overflow-y: auto; }
/* Stockwerke + Trennstrich wachsen mit dem Inhalt (Strich über die volle Scrollhöhe);
   füllt bei wenig Inhalt aber die ganze sichtbare Höhe (flex: 1 0 auto). */
.zh-stack { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; padding: 8px 0; }
.zh-stack::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px;
  transform: translateX(-50%); background: var(--divider); }
.zh-floor { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-around;
  padding: 4px 0; min-height: 6vh; transition: transform 140ms ease; }
.zh-floor + .zh-floor { border-top: 1.5px solid rgba(28,43,69,0.12); }
.zh-floor.saved { cursor: grab; touch-action: none; }
/* aktuell in der Box liegende (= bereits gespeicherte) Zerlegung dezent hervorheben */
.zh-floor.is-current { background: rgba(255,255,255,0.28); }
.zh-floor.zh-dragging { transition: none; z-index: 6; cursor: grabbing; border-radius: 12px;
  background: rgba(255,255,255,0.18); box-shadow: 0 5px 14px rgba(0,0,0,0.25); }
.zh-cell { display: flex; align-items: center; justify-content: center; flex: 1; }
.zh-num { position: relative; display: flex; align-items: center; justify-content: center;
  width: 5.6vh; height: 5.6vh; min-width: 40px; min-height: 40px; background: #fff; color: var(--ink);
  font-weight: bold; font-size: 3vh; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.16); }
/* Abdecker (Rolladen-Optik) für die Zahlen im seitlichen Haus – spiegelt state.numCover */
.zh-cover { position: absolute; inset: 0; display: none; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  background: repeating-linear-gradient(var(--cover), var(--cover) 5px, var(--cover-line) 5px, var(--cover-line) 7px); }
.zh-num.covered > span:first-child { visibility: hidden; }
.zh-num.covered .zh-cover { display: block; }
.zh-total.covered > span:first-child { visibility: hidden; }
.zh-total.covered .zh-cover { display: block; }
.zh-floor.open .zh-num { opacity: 0.5; }   /* Vorschau der aktuellen Zerlegung */
/* Foto-Button sitzt zwischen den beiden Vorschauzahlen */
.zh-cam { position: relative; z-index: 3; flex: none; margin: 0;
  width: 5.8vh; height: 5.8vh; min-width: 42px; min-height: 42px;
  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: 62%; height: 62%; }
.zh-cam.disabled { background: #c4cace; color: #eef1f2; cursor: default; box-shadow: none; }

/* Rechenhaus (oben) – durchgehend blau wie die Box, Struktur über Striche */
#rechenhaus { flex: none; }
#rechenhaus.hidden { display: none; }
.rh-roof { position: relative; height: var(--roof-h); min-height: var(--roof-min); }
.rh-roof-shape { position: absolute; inset: 0; background: var(--roof);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.08)); }
.rh-parts { position: relative; display: flex; height: 12.5vh; min-height: 70px;
  background: var(--roof);
  border-top: 2px solid rgba(28,43,69,0.16);     /* Querstrich an der Dachkante (dezent) */
  border-bottom: 2px solid rgba(28,43,69,0.18); }
.rh-part { flex: 1; display: flex; align-items: center; justify-content: center; }
.rh-part-left { border-radius: 14px 0 0 0; }
.rh-part-right { border-radius: 0 14px 0 0; }
/* Mittel-Strich = Struktur links|rechts, wie der Trennstrich der Box */
.rh-parts::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px;
  transform: translateX(-50%); background: var(--divider); }
.rh-field { position: relative; display: flex; align-items: center; gap: 1vh; z-index: 1; }
.rh-total { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); z-index: 3; }
.rh-circle { position: relative; display: inline-flex; line-height: 0; cursor: pointer; flex: none; }
.rh-step { flex: none; width: 4.6vh; height: 4.6vh; min-width: 34px; min-height: 34px; border: none;
  border-radius: 50%; background: rgba(255,255,255,0.45); color: var(--ink); font-weight: bold; font-size: 3.2vh;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
/* Verschiebe-Buttons links/rechts neben dem Trennstrich: ein Plättchen wechselt die Seite */
.rh-move { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; padding: 0;
  width: 4.6vh; height: 4.6vh; min-width: 34px; min-height: 34px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.55); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.rh-move svg { width: 2.8vh; height: 2.8vh; min-width: 20px; min-height: 20px; }
.rh-move-lr { right: calc(50% + 7px); }   /* links vom Strich, Pfeil nach rechts */
.rh-move-rl { left: calc(50% + 7px); }    /* rechts vom Strich, Pfeil nach links */
.rh-move-rl svg { transform: scaleX(-1); }
.rh-move:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
/* Einstellung: alle Veränderungs-Buttons im Rechenhaus ausblenden */
#rechenhaus.no-controls .rh-step,
#rechenhaus.no-controls .rh-move { display: none; }
.rh-num { display: flex; align-items: center; justify-content: center;
  width: 11vh; height: 11vh; min-width: 68px; min-height: 68px;
  background: #fff; color: var(--ink); font-weight: bold; font-size: 5.8vh;
  border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.20); }
.rh-cover { position: absolute; inset: 0; display: none; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  background: repeating-linear-gradient(var(--cover), var(--cover) 6px, var(--cover-line) 6px, var(--cover-line) 9px); }
.rh-field.covered .rh-num { visibility: hidden; }
.rh-field.covered .rh-cover { display: block; }

/* Aufgabenfamilie (ganz oben): links Plus-, rechts Minusaufgaben */
#family { flex: none; display: flex; justify-content: center; align-items: flex-start;
  gap: 5vw; padding: 8px 0 4px; }
#family.hidden { display: none; }
.fam-col { display: flex; flex-direction: column; gap: 1vh; }
.fam-eq { display: flex; align-items: center; gap: 0.9vh; }
.fam-op { font-weight: bold; color: var(--ink); font-size: 3.8vh; min-width: 1.3ch; text-align: center; }
.fam-num { position: relative; display: flex; align-items: center; justify-content: center;
  width: 6.6vh; height: 6.6vh; min-width: 46px; min-height: 46px;
  background: #fff; color: var(--ink); font-weight: bold; font-size: 3.6vh;
  border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.18); cursor: pointer; }
.fam-cover { position: absolute; inset: 0; display: none; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  background: repeating-linear-gradient(var(--cover), var(--cover) 5px, var(--cover-line) 5px, var(--cover-line) 7px); }
.fam-num.covered > span:first-child { visibility: hidden; }
.fam-num.covered .fam-cover { display: block; }

/* ===== Farbgebung Gesamt-/Teilmengen (Schalter "Gesamt- und Teilmengen farbig", Standard an) =====
   Gesamtmenge = blau, Teilmengen = rot. Wirkt auf die Ziffern im Dach/in den Kästchen (Rechenhaus),
   in der Aufgabenfamilie, im seitlichen Zerlegungshaus, in der Sammlung und bei der Gesamtzahl oben.
   Ohne die Klasse (Schalter aus) bleiben alle Zahlen einfarbig (--ink) wie bisher. */
body.part-colors .rh-total .rh-num,
body.part-colors #total-value .tv-num,
body.part-colors .zh-total,
body.part-colors .zhm-total,
body.part-colors .fam-num[data-role="whole"] { color: var(--whole-blue); }
body.part-colors .rh-part-left .rh-num,
body.part-colors .rh-part-right .rh-num,
body.part-colors .zh-num,
body.part-colors .zhm-num,
body.part-colors .fam-num[data-role="left"],
body.part-colors .fam-num[data-role="right"] { color: var(--part-red); }

/* Haus-Icon im 123-/Rechenhaus-Button */
#btn-numbers, #btn-zerlegung, #btn-shake, #btn-arrange {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; }
.ic, .ic-house { display: block; }   /* Farbe wird vom Button geerbt (currentColor) */

.chamber { position: absolute; top: 0; bottom: 0; width: 50%; }
#chamber-left { left: 0; }
#chamber-right { right: 0; }

/* Trennstrich: Lücke NUR oben, unten bis zum Boden */
#divider { position: absolute; left: 50%; transform: translateX(-50%);
  top: 14%;            /* Lücke oben */
  bottom: 0;           /* unten geschlossen */
  width: 6px; background: var(--divider); border-radius: 6px 6px 0 0;
  transition: top 220ms ease; }
/* Schütteln: Strich fährt bis auf einen kurzen Stumpf herunter, danach wieder hoch */
#box.divider-down #divider { top: 84%; }
@media (prefers-reduced-motion: reduce) { #divider { transition: none; } }

/* Kugeln */
.bead { position: absolute; border-radius: 50%; background: var(--bead);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); cursor: grab; touch-action: none;
  transition: left 240ms ease, top 240ms ease; }
/* während die Box animiert wächst/schrumpft: Plättchen ohne eigene Transition -> kleben exakt an der Box */
#box.beads-instant .bead { transition: none; }
.bead::after { content: ''; position: absolute; left: 22%; top: 18%; width: 28%; height: 28%;
  border-radius: 50%; background: var(--bead-shine); }
#box.no-shine .bead::after { display: none; }   /* schlichte Kreise ohne Glanzpunkt */
/* Kugelfarbe umschaltbar (Einstellung "Plättchen rot statt blau");
   ohne Klasse = --bead (dunkelblau, Standard), mit Klasse = dunkelrot */
body.beads-red { --bead: #9A3B3B; }
/* angedeutete leere Felder (Fünfer-/Zehnerrahmen) – dezent */
.bead-slot { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: rgba(36,52,78,0.07); box-shadow: inset 0 0 0 2px rgba(36,52,78,0.07); }
.bead.grabbed { cursor: grabbing; transition-duration: 0ms; z-index: 999; }
.bead.crossing { z-index: 50; }   /* wandernde Kugel liegt über dem Trennstrich */
/* Schütteln: einmal hochgeworfen (Richtung Ziel, abbremsend), dann Fallen mit Schwerkraft-Kurve.
   Dauern passend zu NUDGE_MS/FALL_MS in schuettelbox-ui.js. */
.bead.nudge { transition: left 300ms ease-out, top 300ms cubic-bezier(0,.55,.45,1); }
.bead.settle { transition: left 360ms ease-out, top 360ms cubic-bezier(.55,0,1,.45); }
/* Schütteln: die Box ruckelt kurz wie die echte Box in der Hand (dezent, ~0,4 s) */
#box.box-shaking { animation: box-shake 400ms ease-in-out; }
@keyframes box-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-6px, 1px) rotate(-0.5deg); }
  35% { transform: translate(6px, -1px) rotate(0.5deg); }
  55% { transform: translate(-4px, 1px) rotate(-0.3deg); }
  75% { transform: translate(3px, 0) rotate(0.2deg); }
  90% { transform: translate(-1px, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { #box.box-shaking { animation: none; } }

/* Abdecker als Rolladen – rollt von oben herunter (kein "?") */
.cover { position: absolute; top: 0; height: 0; width: 50%; z-index: 500; cursor: pointer;
  overflow: hidden; pointer-events: none; transition: height 300ms ease;
  background: repeating-linear-gradient(var(--cover), var(--cover) 9px, var(--cover-line) 9px, var(--cover-line) 13px); }
#cover-left { left: 0; border-radius: 28px 0 0 0; }
#cover-right { right: 0; border-radius: 0 28px 0 0; }
.cover.down { height: 100%; pointer-events: auto; }

/* Rolladen-Streifen oben je Hälfte: antippen zum Herunterlassen/Hochziehen.
   Etwas höher + deutliches "?"-Badge, damit Nutzer das Abdeckgitter entdecken. */
.cover-strip { position: absolute; top: 0; height: 40px; width: 50%; z-index: 560; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--cover); border-bottom: 2px solid var(--cover-line); }
#strip-left { left: 0; border-radius: 28px 0 0 0; }
#strip-right { right: 0; border-radius: 0 28px 0 0; }
.cover-strip::after { content: '?'; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #fff;
  color: var(--ink); font-weight: bold; font-size: 20px; line-height: 1; padding-top: 0.14em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20); }
/* Schütteln-Knopf in der Box: oben mittig über dem Strich, ÜBER dem Rolladen (z-index > 560) */
.box-shake { position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  z-index: 570; display: none; align-items: center; justify-content: center; }
body.shake-in-box .box-shake { display: inline-flex; }   /* Standard: Knopf in der Box */
body.shake-in-box #btn-shake { display: none; }          /* dann Leisten-Knopf aus */

/* Grundschrift sitzt von Natur aus etwas hoch -> Zahlen/Texte ~0.12em nach unten (optisch mittig) */
.rh-num > span, .fam-num > span:first-child, .fam-op,
.zh-num > span, .zh-total > span,
#total-value .tv-num, .pill > span, .round > span { position: relative; top: 0.12em; }

.hidden { display: none; }

/* ===== Goldener Schornstein: vollständiges Zerlegungshaus ===== */
.zh-roof-shape { z-index: 1; }                 /* Dach über dem Schornstein */
.zh-chimney { position: absolute; z-index: 0; right: 30%; top: 8%;
  width: 1.5vh; min-width: 11px; height: 4.6vh; min-height: 30px;
  background: linear-gradient(#E9B647, #C68A18); border-radius: 3px 3px 0 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.zh-roof.complete .zh-total { box-shadow: 0 0 0 3px #E3AE3C, 0 2px 5px rgba(0,0,0,0.18); }

/* ===== Rechenhaus-Sammlung (Vollbild-Overlay) ===== */
#collection-overlay { position: fixed; inset: 0; z-index: 800; display: flex; }
#collection-overlay.hidden { display: none; }
.coll-backdrop { position: absolute; inset: 0; background: rgba(20,32,52,0.40); }
.coll-panel { position: relative; z-index: 1; margin: auto; width: min(92vw, 1120px); max-height: 88vh;
  background: #F4F2EC; border-radius: 22px; box-shadow: 0 16px 48px rgba(0,0,0,0.32);
  display: flex; flex-direction: column; padding: 18px 22px 22px; }
.coll-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.coll-title { font-family: system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); }
.coll-actions { display: flex; align-items: center; gap: 12px; }
.coll-clear { font-family: system-ui, sans-serif; border: none; cursor: pointer; font-size: 15px;
  padding: 9px 15px; border-radius: 14px; background: rgba(165,55,55,0.10); color: #9A3B3B; }
.coll-clear:hover { background: rgba(165,55,55,0.18); }
.coll-close { font-family: system-ui, sans-serif; flex: none; width: 42px; height: 42px; border: none;
  border-radius: 50%; background: rgba(28,43,69,0.08); color: var(--ink); font-size: 20px; cursor: pointer; }
.coll-close:hover { background: rgba(28,43,69,0.15); }
.coll-row { display: flex; gap: 24px; align-items: flex-end; overflow-x: auto; overflow-y: hidden;
  padding: 10px 4px 16px; }
.coll-empty { font-family: system-ui, sans-serif; color: #5a6b80; padding: 24px 8px; }

/* Mini-Häuschen in der Sammlung */
.zhm { position: relative; flex: 0 0 auto; width: 124px; cursor: pointer; display: flex; flex-direction: column;
  transition: transform 120ms ease; }
.zhm:hover { transform: translateY(-4px); }
.zhm-del { position: absolute; top: 0; right: 0; z-index: 4; width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 50%; background: #fff; color: #9A3B3B; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.28); }
.zhm-del:hover { background: #F3DADA; }
.zhm-roof { position: relative; height: 50px; }
.zhm-roof::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--roof);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08)); }
.zhm-chimney { display: none; }
.zhm-complete .zhm-chimney { display: block; position: absolute; z-index: 0; right: 28%; top: 5px;
  width: 9px; height: 22px; background: linear-gradient(#E9B647, #C68A18);
  border-radius: 2px 2px 0 0; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.zhm-total { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 2;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 50%; font-weight: bold; font-size: 17px; color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.zhm-complete .zhm-total { box-shadow: 0 0 0 2.5px #E3AE3C, 0 1px 3px rgba(0,0,0,0.18); }
.zhm-body { position: relative; background: var(--roof); border-top: 2px solid rgba(28,43,69,0.16);
  border-radius: 0 0 12px 12px; max-height: 56vh; overflow-y: auto; }
.zhm-stack { position: relative; padding: 6px 0; }   /* Strich über die volle Scrollhöhe */
.zhm-stack::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px;
  transform: translateX(-50%); background: var(--divider); }
.zhm-floor { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-around; padding: 3px 0; }
.zhm-floor + .zhm-floor { border-top: 1.5px solid rgba(28,43,69,0.12); }
.zhm-num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: #fff; border-radius: 50%; font-weight: bold; font-size: 16px; color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.16); }
.zhm-num > span, .zhm-total > span { position: relative; top: 0.12em; }

/* ===== Animiertes Auswechseln des Zerlegungshauses ===== */
.zh-ghost { display: flex; flex-direction: column; pointer-events: none; }

/* ===== Matheforscher-Plattform: Hervorhebung per KI-Hinweis (highlight-Event) ===== */
.mf-highlight { outline: 4px solid var(--accent); outline-offset: 3px; border-radius: 12px;
  animation: mf-pulse 1.2s ease-in-out infinite; position: relative; z-index: 900; }
@keyframes mf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,142,142,0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(62,142,142,0); }
}
/* eingebettet (im Plattform-iframe): Vollbild-Button ist dort überflüssig */
body.embedded #btn-fullscreen { display: none; }

/* ===== Info-Overlay ===== */
#info-overlay { position: fixed; inset: 0; z-index: 820; display: flex; }
#info-overlay.hidden { display: none; }
.info-backdrop { position: absolute; inset: 0; background: rgba(20,32,52,0.40); }
.info-card { position: relative; z-index: 1; margin: auto; width: min(90vw, 470px);
  background: #F4F2EC; border-radius: 22px; box-shadow: 0 16px 48px rgba(0,0,0,0.32);
  padding: 20px 24px 22px; color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* aufgeklappt kann die Karte höher als der Bildschirm werden -> selbst scrollen
     (touch-action: pan-y nötig wegen des globalen touch-action:none) */
  max-height: calc(100dvh - 32px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.info-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.info-title { font-weight: 700; font-size: 21px; }
.info-close { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(28,43,69,0.08); color: var(--ink); font-size: 19px; cursor: pointer; }
.info-close:hover { background: rgba(28,43,69,0.15); }
.info-lead { font-size: 15px; margin: 4px 0 10px; line-height: 1.45; }
.info-list { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #3a4a60; }
.info-list li { margin: 3px 0; }
.info-coop { font-size: 14px; line-height: 1.45; margin: 0 0 10px; color: #3a4a60; }
/* Aufklappbereich "Mehr zum Schüttelbox-Programm" */
.info-more { margin: 0 0 14px; border-radius: 14px; background: rgba(28,43,69,0.05); }
.info-more summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 600;
  color: var(--accent); display: flex; align-items: center; gap: 8px; }
.info-more summary::-webkit-details-marker { display: none; }
.info-more summary::before { content: '▸'; display: inline-block; transition: transform 160ms ease; }
.info-more[open] summary::before { transform: rotate(90deg); }
.info-more-body { padding: 0 14px 12px; font-size: 13.5px; line-height: 1.5; color: #3a4a60; }
.info-more-body p { margin: 0 0 8px; }
.info-more-body .info-sub { margin: 12px 0 4px; font-weight: 600; color: var(--ink); }
.info-links { margin: 0; padding-left: 18px; }
.info-links li { margin: 3px 0; }
.info-more a { color: var(--accent); text-decoration: none; }
.info-more a:hover { text-decoration: underline; }
.info-foot { font-size: 14px; margin: 0 0 6px; }
.info-foot a { color: var(--accent); text-decoration: none; }
.info-foot a:hover { text-decoration: underline; }
.info-sep { color: #9aa7b6; margin: 0 8px; }
.info-by { font-size: 13px; color: #5a6b80; margin: 10px 0 0; }

/* ===== Teilen-Overlay (QR-Code + Link) ===== */
#share-overlay { position: fixed; inset: 0; z-index: 820; display: flex; }
#share-overlay.hidden { display: none; }
.share-backdrop { position: absolute; inset: 0; background: rgba(20,32,52,0.40); }
.share-card { position: relative; z-index: 1; margin: auto; width: min(90vw, 380px);
  background: #F4F2EC; border-radius: 22px; box-shadow: 0 16px 48px rgba(0,0,0,0.32);
  padding: 18px 22px 22px; color: var(--ink); text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.share-title { font-weight: 700; font-size: 21px; }
.share-close { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(28,43,69,0.08); color: var(--ink); font-size: 19px; cursor: pointer; }
.share-close:hover { background: rgba(28,43,69,0.15); }
.share-qr { display: block; margin: 4px auto 12px; width: 260px; height: 260px;
  background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.share-hint { font-size: 13px; color: #5a6b80; line-height: 1.45; margin: 0 0 12px; }
.share-linkrow { display: flex; gap: 8px; align-items: stretch; }
.share-link { flex: 1; min-width: 0; display: flex; align-items: center; padding: 9px 12px;
  background: #fff; border-radius: 12px; font-size: 13px; color: var(--accent); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(28,43,69,0.10); }
.share-copy { flex: none; border: none; cursor: pointer; font-size: 14px; padding: 0 16px;
  border-radius: 12px; background: var(--accent); color: #fff; font-family: inherit; }
.share-copy:hover { filter: brightness(1.06); }
.share-copy.done { background: #4a8c5a; }

/* ===== Vermuten am Abdecker: Zahlenfeld als Sprechblase (bzw. direkt auf dem Rolladen) =====
   Fünfer-Struktur wie im Zehnerfeld: 0 einzeln, darunter 1–5 / 6–10 (Lücke nach jedem Zehner).
   Tasten in der Zahl-Farbe der Rolle (Gesamtmenge blau, Teilmengen rot, falls eingeschaltet). */
:root { --ok: #3F7D5A; }
#guess-pop { position: fixed; inset: 0; z-index: 760; }
#guess-pop.hidden { display: none; }
.gp-backdrop { position: absolute; inset: 0; background: rgba(20,32,52,0.10); }
.gp-card { position: absolute; z-index: 1; --gp-key: clamp(44px, 7.4vmin, 64px);
  background: #F4F2EC; border-radius: 20px; padding: 10px 14px 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.28); color: var(--ink); }
.gp-card.gp-wide { --gp-key: clamp(30px, 4.6vmin, 44px); }   /* Zahlenraum > 20: Reihen zu 10 */
.gp-arrow { position: absolute; width: 18px; height: 18px; margin-left: -9px; background: #F4F2EC;
  transform: rotate(45deg); display: none; }
.gp-card[data-arrow="up"] .gp-arrow { display: block; top: -8px; }
.gp-card[data-arrow="down"] .gp-arrow { display: block; bottom: -8px; }
.gp-head { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; }
.gp-title, .gp-show { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }  /* Texte: normale Schrift */
.gp-title { font-size: 18px; font-weight: 600; }
.gp-close { flex: none; width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(28,43,69,0.08); color: var(--ink); font-size: 17px; }
.gp-keys { display: flex; flex-direction: column; gap: 8px; }
.gp-row { display: flex; gap: 8px; }
.gp-row:first-child { margin-bottom: 6px; }            /* 0 steht für sich */
.gp-row.gp-block-end { margin-bottom: 8px; }           /* Lücke nach jedem Zehner */
.gp-key { flex: none; width: var(--gp-key); height: var(--gp-key); padding: 0; border: none;
  border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
  font-family: inherit; font-weight: bold; font-size: calc(var(--gp-key) * 0.5);
  box-shadow: 0 2px 5px rgba(0,0,0,0.16); display: flex; align-items: center; justify-content: center; }
.gp-key > span { position: relative; top: 0.12em; }
.gp-key.gp-five { margin-right: 10px; }                /* Fünfer-Lücke in Zehnerreihen */
.gp-key:active:not(:disabled) { transform: scale(0.94); }
.gp-key:disabled { opacity: 0.22; cursor: default; box-shadow: none; }
.gp-key.tried:disabled { opacity: 0.4; }
.gp-key.tried { position: relative; }
.gp-key.tried::after { content: ''; position: absolute; left: 20%; right: 20%; top: 50%; height: 3px;
  margin-top: -1.5px; border-radius: 2px; background: var(--part-red); transform: rotate(-35deg); }
body.part-colors .gp-card[data-role="whole"] .gp-key { color: var(--whole-blue); }
body.part-colors .gp-card[data-role="left"] .gp-key,
body.part-colors .gp-card[data-role="right"] .gp-key { color: var(--part-red); }
.gp-show { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0;
  padding: 8px 18px; border: none; border-radius: 20px; cursor: pointer;
  background: rgba(28,43,69,0.08); color: var(--ink); font-size: 16px; font-weight: 500; }
.gp-show.hidden { display: none; }
.gp-card.gp-wobble { animation: gp-wobble 380ms ease; }
@keyframes gp-wobble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}

/* Rückmeldung nach dem Aufdecken: Haken (richtig) oder durchgestrichene Vermutung (falsch) –
   an jeder sichtbaren Ziffer der Rolle und oben in der Box-Hälfte. Bleibt, bis sich etwas ändert. */
.guess-note, .guess-badge { display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-family: 'Grundschrift', sans-serif; font-weight: bold;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22); animation: gp-pop 260ms ease-out; }
.guess-note { position: absolute; z-index: 5; top: -8px; right: -12px; min-width: 26px; height: 26px;
  padding: 0.12em 6px 0; border-radius: 13px; font-size: 16px; line-height: 1; }
.guess-badge { position: absolute; z-index: 80; top: 50px; transform: translateX(-50%);
  min-width: 42px; height: 42px; padding: 0.12em 10px 0; border-radius: 21px; font-size: 26px; line-height: 1; }
#guess-badge-left { left: 25%; }
#guess-badge-right { left: 75%; }
.guess-badge.hidden { display: none; }
.guess-note.ok, .guess-badge.ok { background: var(--ok); color: #fff; }
.guess-note.wrong, .guess-badge.wrong { background: #fff; color: #6b7685; }
/* durchgestrichen: deutlicher roter Schrägstrich (text-decoration ist in der Grundschrift kaum sichtbar) */
.guess-note.wrong::after, .guess-badge.wrong::after { content: ''; position: absolute; left: 18%; right: 18%;
  top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--part-red); transform: rotate(-35deg); }
.guess-badge.wrong::after { height: 3px; margin-top: -1.5px; }
@keyframes gp-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }