@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) */
}

* { 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-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: 11vh; min-height: 58px; }
.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: 18%; transform: translateX(-50%); z-index: 2;
  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: 14vh; min-height: 70px; }
.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; }

/* 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 */
.bead.tumble { transition: left 360ms cubic-bezier(.36,.07,.19,.97), top 360ms cubic-bezier(.36,.07,.19,.97); }

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