/* Mathe-Zoo – bewusst schlicht gehalten (Raspberry Pi 3) */
* { box-sizing: border-box; }
html { font-size: 20px; }
body {
  margin: 0; min-height: 100vh;
  font-family: "Nunito", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
  background: #e9f5db; color: #1f2d1f;
}
#app { max-width: 1100px; margin: 0 auto; padding: 0.6rem 1rem 2rem; }
h1, h2, h3 { margin: 0.4rem 0; }
.loading { text-align: center; margin-top: 30vh; }
.hidden { display: none !important; }
.small { font-size: 0.75rem; color: #556; margin-top: 0.4rem; }
.sub { text-align: center; font-size: 1.1rem; }
.hint { color: #556; }

.ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.ico-xl { width: 2.2rem; height: 2.2rem; vertical-align: middle; }
/* Dezente Linien-Icons im Elternbereich (linie() in util.js) */
.li-ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: none; opacity: 0.8; }
.ava { width: 4rem; height: 4rem; }
.ava-sm { width: 1.6rem; height: 1.6rem; vertical-align: middle; }
img.foto { border-radius: 50%; object-fit: cover; }

/* ---------- Mein Bild ---------- */
.who.btn { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; }
.wer-stift { width: 0.9em; height: 0.9em; opacity: 0.6; }
.ava-gross { width: 6rem; height: 6rem; }
.mein-bild .avatars { justify-content: center; }
.ava-wahl { background: none; border: 0; padding: 0; border-radius: 0.6rem; }
.ava-wahl.on .ava-pick { border-color: #2f9e44; background: #d3f9d8; }
.star { width: 1em; height: 1em; vertical-align: -0.15em; }
.star.off { filter: grayscale(1); opacity: 0.3; }

/* ---------- Buttons ---------- */
button { font: inherit; cursor: pointer; }
.btn {
  border: 0; border-radius: 0.7rem; padding: 0.55rem 1.1rem; font-size: 1rem; font-weight: 700;
  background: #fff; color: #234; box-shadow: 0 3px 0 #b7c9a8;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b7c9a8; }
.btn.primary { background: #2f9e44; color: #fff; box-shadow: 0 3px 0 #1e6e2e; }
.btn.danger { background: #e03131; color: #fff; box-shadow: 0 3px 0 #a51d1d; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:focus-visible, .choice:focus-visible, .tile:focus-visible, .profile:focus-visible { outline: 4px solid #f59f00; }
.actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Kopfzeile ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: #fff; border-radius: 1rem; padding: 0.3rem 0.6rem; margin-bottom: 0.6rem; box-shadow: 0 2px 0 #c5d8b5; }
.wallet { display: flex; gap: 0.9rem; align-items: center; font-weight: 800; font-size: 1.05rem; }
.snd { padding: 0.2rem 0.4rem; }
.wallet select.musik { margin-left: -0.6rem; max-width: 9.5rem; padding: 0.2rem 0.3rem; border: 2px solid #c5d8b5; border-radius: 0.6rem;
  background: #fff; font: inherit; font-size: 0.85rem; font-weight: 700; }
.wallet select.musik:disabled { opacity: 0.45; }

/* ---------- Start ---------- */
.home { text-align: center; padding-top: 1.5rem; }
.home h1 { font-size: 2.4rem; color: #2b8a3e; }
/* Sprachauswahl für Eltern (Anmeldung, Login) */
.sprache-wahl { display: flex; justify-content: flex-end; align-items: center; gap: 0.3rem; font-size: 1.1rem; }
.sprache-wahl select.sprache { padding: 0.25rem 0.4rem; border: 2px solid #c5d8b5; border-radius: 0.6rem; background: #fff;
  font: inherit; font-size: 0.9rem; font-weight: 700; }
.profiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.profile { background: #fff; border: 0; border-radius: 1.2rem; padding: 1rem 1.4rem; min-width: 9rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: 1.2rem; font-weight: 800;
  box-shadow: 0 4px 0 #b7c9a8; }
.profile:hover { background: #fff9db; }
.parent-btn { margin-top: 2rem; color: #556; }
.credits { margin-top: 3rem; font-size: 0.6rem; color: #889; }
.impressum { text-align: center; line-height: 1.5; }
.impressum p { margin: 0.1rem 0; }
.impressum a { color: inherit; }

/* ---------- Zookarte ---------- */
.maptitle { text-align: center; color: #2b8a3e; }
.map { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.9rem; }
.tile { background: #fff; border: 0; border-radius: 1.2rem; padding: 0.8rem; text-align: center;
  box-shadow: 0 4px 0 #b7c9a8; border-top: 0.5rem solid #69db7c; }
.tile:hover { background: #fff9db; }
.tile.special { border-top-color: #f59f00; }
/* «Mein Zoo» und «Tierladen»: kleine, ruhige Leiste oberhalb der Gehege */
.zoo-leiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 0 0.8rem; }
.zl-kachel { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 0; border-radius: 0.9rem; padding: 0.35rem 0.8rem;
  font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; box-shadow: 0 2px 0 #b7c9a8; border-left: 0.35rem solid #69db7c; }
.zl-kachel:hover { background: #fff9db; }
.zl-kachel:focus-visible { outline: 4px solid #f59f00; }
.zl-kachel.zoo { border-left-color: #20c997; }
.zl-kachel.shop { border-left-color: #fab005; }
.zl-kachel.freunde { border-left-color: #e64980; }
/* Duelle (Ticket #282): Bereich auf der Startseite, Liste und Ergebniskarte */
.wk-start { max-width: 40rem; margin: 0 auto 1rem; border-left: 5px solid #7950f2; }
.wk-start h3 { margin: 0 0 0.4rem; }
.wk-start .actions { justify-content: flex-start; }
.wk-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0; }
.wk-zeile .tile-ico { width: 2rem; height: 2rem; font-size: 1.6rem; }
.wk-zeile span { flex: 1 1 10rem; }
.rangliste { max-width: 36rem; margin-left: auto; margin-right: auto; }
.rl-zeile { flex-wrap: nowrap; padding: 0.3rem 0.5rem; border-radius: 0.6rem; }
.rl-zeile.ich { background: rgba(255, 200, 60, 0.25); }
.rl-rang { min-width: 2rem; text-align: right; }
.rl-punkte { white-space: nowrap; }
.wk-reaktionen { margin: 0.6rem 0; }
.wk-reaktion { font-size: 1.4rem; }
.wk-r { font-size: 1.3rem; margin: 0.15rem; }
.wk-r.gewaehlt { outline: 3px solid #7950f2; }
.tile.duell { cursor: default; }
.tile.duell p { margin: 0.3rem 0; font-size: 0.9rem; }
.tile.duell.vorbei { opacity: 0.6; }
.duell-neu { max-width: 32rem; margin: 0 auto 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.duell-hinweis { background: #f3f0ff; border-radius: 0.7rem; padding: 0.5rem 0.7rem; margin: 0.5rem 0; }
.duell-paar { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 0.8rem 0; }
.duell-seite { flex: 1 1 10rem; max-width: 14rem; background: #f8f9fa; border-radius: 0.9rem; padding: 0.6rem; }
.duell-seite p { margin: 0.2rem 0; }
.duell-gegen { font-weight: bold; color: #7950f2; }
.duell-punkte { font-size: 1.3rem; font-weight: bold; }
/* Duell live: Warteraum und Leiste mit dem Fortschritt des anderen Kindes */
.live-status { font-size: 1.2rem; font-weight: bold; color: #7950f2; }
.duell-seite.live-fehlt { opacity: 0.45; }
#live-gegner { position: fixed; left: 50%; bottom: 0.6rem; transform: translateX(-50%); z-index: 50; display: flex; align-items: center;
  gap: 0.5rem; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 1rem); background: #f3f0ff; border: 2px solid #7950f2;
  border-radius: 0.9rem; padding: 0.35rem 0.7rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
#live-gegner .tile-ico { width: 2rem; height: 2rem; }
#live-gegner progress { width: 6rem; }
.live-zeit { font-weight: bold; }
.zl-kachel span { display: flex; flex-direction: column; line-height: 1.2; }
.zl-kachel small { color: #556; font-size: 0.8rem; }
.zl-ico { width: 1.8rem; height: 1.8rem; }
.tile-ico { width: 3.6rem; height: 3.6rem; }
.gehege { font-weight: 800; font-size: 1.05rem; }
.tname { color: #445; }
.tmeta { font-size: 0.85rem; margin-top: 0.3rem; color: #556; }

/* ---------- Spiel ---------- */
.play { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.progress { grid-column: 1 / -1; height: 1.1rem; background: #fff; border-radius: 1rem; position: relative; overflow: hidden; }
.progress div { height: 100%; background: #51cf66; }
.progress span { position: absolute; inset: 0; text-align: center; font-size: 0.75rem; font-weight: 800; line-height: 1.1rem; }
.ptitle { grid-column: 1 / -1; text-align: center; font-weight: 800; color: #2b8a3e; }
/* Lernmodus «Schnelligkeit» (Ticket #281): Uhr als Balken, wird rot und pulsiert, wenn die Zeit knapp ist */
.uhr { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; }
.uhr .ico { width: 1.4rem; height: 1.4rem; }
.uhr-balken { flex: 1; height: 0.9rem; background: #fff; border-radius: 1rem; overflow: hidden; }
.uhr-balken div { height: 100%; width: 100%; background: #339af0; transition: width 0.25s linear; }
.uhr-zahl { min-width: 3.2rem; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.uhr.knapp .uhr-balken div { background: #fa5252; }
.uhr.knapp .uhr-zahl { color: #e03131; animation: uhrPuls 1s ease-in-out infinite; }
@keyframes uhrPuls { 50% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .uhr.knapp .uhr-zahl { animation: none; } }
.exam .uhr { position: sticky; top: 0; z-index: 5; background: #f1f8e9; padding: 0.4rem 0.6rem; border-radius: 0.8rem; margin-bottom: 0.6rem; }
.modus-wahl { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; font-size: 0.9rem; }
.modus-wahl .btn.on { background: #339af0; color: #fff; }
.modus-info { font-weight: 700; color: #1864ab; }
.modus-info .ico { width: 1.2rem; height: 1.2rem; vertical-align: middle; }
.card { background: #fff; border-radius: 1.2rem; padding: 1.2rem; box-shadow: 0 4px 0 #b7c9a8; }
.prompt { font-size: 1.25rem; text-align: center; line-height: 1.5; }
.big { font-size: 2.2rem; font-weight: 800; margin: 0.6rem 0; letter-spacing: 0.02em; white-space: nowrap; }
.wort { font-size: 1.3rem; font-weight: 700; margin: 0.6rem 0; word-break: break-all; color: #1864ab; }
.story { text-align: left; font-size: 1.2rem; }
.story-ico { width: 2.4rem; height: 2.4rem; float: left; margin: 0 0.6rem 0.2rem 0; }

.answer { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.lbl { font-size: 1.6rem; font-weight: 800; }
input.num { font: inherit; font-size: 1.8rem; font-weight: 800; width: 11rem; text-align: center;
  padding: 0.3rem; border: 3px solid #74c0fc; border-radius: 0.7rem; }
input.num.short { width: 6rem; }
input.num:focus { outline: none; border-color: #1c7ed6; background: #f1f8ff; }
input.pin { width: 9rem; letter-spacing: 0.3em; margin: 0.5rem auto; display: block; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1rem; }
.choice { font-size: 1.5rem; font-weight: 800; padding: 0.7rem; border-radius: 0.8rem; border: 3px solid #74c0fc; background: #f8fbff; }
.choice small { font-size: 0.7rem; color: #889; vertical-align: top; }
.choice:hover:not(:disabled) { background: #e7f5ff; }
.choice.right { border-color: #2f9e44; background: #d3f9d8; }
.choice.wrong { border-color: #e03131; background: #ffe3e3; opacity: 0.7; }

.feedback { min-height: 2rem; margin-top: 1rem; font-size: 1.15rem; text-align: center; border-radius: 0.7rem; padding: 0.3rem; }
.feedback.good { background: #d3f9d8; color: #1e6e2e; font-weight: 800; }
.feedback.warn { background: #fff3bf; }
.feedback.bad { background: #ffe3e3; }
.feedback.info { background: #e7f5ff; }
.feedback .expl { font-size: 1rem; margin-top: 0.4rem; color: #333; }
.plus { margin-left: 0.6rem; }
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.keypad { display: grid; grid-template-columns: repeat(3, 3.4rem); gap: 0.4rem; }
.keypad button { height: 3.2rem; font-size: 1.4rem; font-weight: 800; border: 0; border-radius: 0.7rem;
  background: #fff; box-shadow: 0 3px 0 #b7c9a8; }
.keypad button:active { transform: translateY(2px); }
.keypad .ok { background: #2f9e44; color: #fff; }
.small-kp { margin: 0.8rem auto; justify-content: center; }

/* Stellenwerttafel */
.tafel { margin: 0.6rem auto; border-collapse: collapse; font-size: 1.6rem; font-weight: 800; }
.tafel th, .tafel td { border: 2px solid #495057; width: 3.2rem; height: 2.6rem; text-align: center; }
.tafel th { font-size: 1rem; background: #e7f5ff; }
.tafel .tg { background: #fff4e6; }
.tafel th.tg { background: #ffe8cc; }
.tafel .mg { background: #ebfbee; }
.tafel .komma { border-left-width: 6px; } /* Dezimalkomma zwischen Einern und Zehnteln */
.tafel th.mg { background: #d3f9d8; }

/* Zahlenstrahl */
.strahl { width: 100%; max-width: 640px; display: block; margin: 0.6rem auto; }

/* Daten, Zufall & Zeit */
.diagramm { width: 100%; max-width: 600px; display: block; margin: 0.6rem auto; }
.uhr { width: 100%; max-width: 220px; display: block; margin: 0.6rem auto; }
.rad { width: 100%; max-width: 240px; display: block; margin: 0.6rem auto; }
/* Formen & Symmetrie, Umfang & Fläche */
.geo { width: 100%; max-width: 560px; max-height: 280px; display: block; margin: 0.6rem auto; }
.geo.klein { max-height: 170px; }

.datentab { margin: 0.6rem auto; border-collapse: collapse; font-size: 1.2rem; }
.datentab caption { font-weight: 700; margin-bottom: 0.3rem; }
.datentab th, .datentab td { border: 2px solid #495057; padding: 0.3rem 0.8rem; text-align: center; }
.datentab tr:first-child th { background: #e7f5ff; }
.datentab td { font-weight: 800; }

/* Schriftliches Rechnen */
.wgwrap { text-align: center; margin-top: 0.6rem; }
.wg { margin: 0 auto; border-collapse: collapse; font-size: 1.9rem; font-weight: 800; font-family: "DejaVu Sans Mono", monospace; }
.wg td { width: 2.6rem; height: 2.6rem; text-align: center; padding: 0; }
.wg td.d { background-image: linear-gradient(#d0ebff 1px, transparent 1px), linear-gradient(90deg, #d0ebff 1px, transparent 1px);
  background-size: 100% 100%; }
.wg .op { color: #1864ab; }
.wg .mulop { color: #1864ab; }
.wg .carryrow td { height: 1.7rem; }
.wg input { font: inherit; width: 2.3rem; height: 2.3rem; text-align: center; border: 2px solid #74c0fc; border-radius: 0.4rem; padding: 0; }
.wg input:focus { outline: none; border-color: #1c7ed6; background: #f1f8ff; }
.wg input.carry { width: 1.5rem; height: 1.5rem; font-size: 0.9rem; border-width: 1px; color: #c92a2a; }
.wg .res td { border-top: 4px solid #212529; padding-top: 0.25rem; }
.wg .op.small { font-size: 0.8rem; color: #c92a2a; }
.wg input.tp { width: 2rem; height: 2rem; font-size: 1.4rem; border-width: 1px; border-style: dashed; color: #495057; }
.wg tr:first-child + .teilrow td { border-top: 2px solid #212529; }

/* Brüche (Zähler über Nenner) */
.bruch { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.1; margin: 0 0.15em; }
.bruch > span:first-child { border-bottom: 0.08em solid currentColor; padding: 0 0.15em; }

/* Ergebnis */
.result { text-align: center; max-width: 34rem; margin: 1rem auto; }
.bigstars .star { width: 4rem; height: 4rem; margin: 0 0.3rem; }
.coins { font-size: 1.4rem; font-weight: 800; }
.coins.bonus { font-size: 1.05rem; color: #e8590c; } /* Bonus-Münzen in der Prüfungsvorbereitung (Ticket #231) */
.lvl { font-size: 1.2rem; font-weight: 800; margin-top: 0.6rem; }
.lvl.up { color: #e8590c; }

/* Mein Zoo */
.zoo-field { position: relative; height: 62vh; min-height: 22rem; border-radius: 1.5rem;
  background: radial-gradient(ellipse at 30% 70%, #8ce99a 0, #69db7c 40%, #51cf66 100%);
  border: 6px solid #a9784d; overflow: hidden; }
.deco { position: absolute; width: 3.5rem; opacity: 0.85; }
.animal { position: absolute; background: none; border: 0; padding: 0; z-index: 1; transform: translate(-50%, -50%); }
.animal-ico { width: 4rem; height: 4rem; }
.animal.jump { animation: jump 0.5s; }
@keyframes jump { 40% { transform: translate(-50%, calc(-50% - 1.5rem)) rotate(-8deg); } }
.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 1.3rem; font-weight: 700; color: #1e6e2e; padding: 2rem; }

/* Tierladen */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.7rem; }
.shop-item { background: #fff; border-radius: 1rem; padding: 0.6rem; text-align: center; position: relative; box-shadow: 0 3px 0 #b7c9a8; }
.shop-item.own { background: #d3f9d8; }
.shop-item.locked .shop-ico { filter: grayscale(1) brightness(0.6); opacity: 0.5; }
.shop-ico { width: 3.4rem; height: 3.4rem; }
.lock { position: absolute; width: 1.6rem; top: 0.5rem; right: 0.5rem; }
.aname { font-weight: 800; margin: 0.2rem 0; }
.tag { font-size: 0.85rem; color: #556; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); background: #2b8a3e; color: #fff;
  padding: 0.6rem 1.2rem; border-radius: 1rem; font-weight: 800; z-index: 10; }
.toast.bad { background: #c92a2a; }

/* Elternbereich */
.parent { display: flex; flex-direction: column; gap: 1rem; font-size: 0.9rem; }
.parent label { display: block; margin: 0.4rem 0; }
.parent-tabs { justify-content: flex-start; margin: 0; }
.parent-tabs .tab { font-size: 0.95rem; cursor: pointer; }
.etab { display: flex; flex-direction: column; gap: 1rem; }
.etab[hidden] { display: none; }
.parent input:not([type]), .parent input[type=password], .parent select { font: inherit; padding: 0.25rem 0.4rem; border: 2px solid #adb5bd; border-radius: 0.4rem; }
.zeitlimit input[type=number], .zeitlimit input[type=time] { font: inherit; padding: 0.2rem 0.3rem; border: 2px solid #adb5bd; border-radius: 0.4rem; }
.zeitlimit input[type=number] { width: 5.5rem; }
.kid-head { display: flex; gap: 0.8rem; align-items: center; }
.kid > .actions { margin: 0.6rem 0; justify-content: flex-start; }
.tabs.kid-subtabs { justify-content: flex-start; margin: 0.6rem 0; padding-top: 0.6rem; border-top: 1px solid #dee2e6; }
.kid-subtabs .tab { font-size: 0.85rem; cursor: pointer; }
.ksub[hidden] { display: none; }
.ksub > .actions { margin: 0.3rem 0; justify-content: flex-start; }
details.fach-block { border-bottom: 1px solid #dee2e6; padding: 0.2rem 0; margin: 0; }
details.fach-block > summary { padding: 0.35rem 0.2rem; }
.stats { border-collapse: collapse; width: 100%; margin: 0.6rem 0; }
.stats th, .stats td { border-bottom: 1px solid #dee2e6; padding: 0.25rem 0.4rem; text-align: left; }
.stats tr.fach th { padding-top: 0.7rem; background: #f1f3f5; }
.stats td.good { color: #2b8a3e; font-weight: 800; }
.stats td.mid { color: #e67700; font-weight: 800; }
.stats td.low { color: #c92a2a; font-weight: 800; }
.errs td { font-size: 0.8rem; }
details { margin: 0.5rem 0; }
summary { cursor: pointer; font-weight: 700; color: #1864ab; }
details.papierweg > summary { padding: 0.1rem 0; }
details.papierweg > summary .small { font-weight: 400; color: #868e96; }
details.papierweg[open] > summary { margin-bottom: 0.4rem; }
details.papierweg h4 { margin: 0.8rem 0 0.2rem; }
.avatars { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0; }
.avatars input { display: none; }
.ava-pick { width: 2.4rem; height: 2.4rem; padding: 0.2rem; border-radius: 0.5rem; border: 3px solid transparent; cursor: pointer; }
.avatars input:checked + .ava-pick { border-color: #2f9e44; background: #d3f9d8; }
.warnbox { background: #fff3bf; border-radius: 0.8rem; padding: 0.6rem 1rem; font-weight: 700; }

@media (max-width: 760px) {
  .play { grid-template-columns: 1fr; }
  .keypad { margin: 0 auto; }
  .big { font-size: 1.6rem; white-space: normal; }
}

/* Chat mit Bruno */
.btn.bruno { background: #fff4e6; color: #8a4b0f; box-shadow: 0 3px 0 #e0b98a; }
.chat { position: fixed; right: 1rem; bottom: 1rem; width: 24rem; max-width: calc(100vw - 2rem); height: 60vh;
  display: flex; flex-direction: column; background: #fff; border-radius: 1.2rem; z-index: 5;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25); border: 3px solid #e0b98a; }
.chat-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; background: #fff4e6; border-radius: 1rem 1rem 0 0; }
.chat-head .btn { margin-left: auto; }
.chat-log { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; }
.msg { padding: 0.45rem 0.7rem; border-radius: 0.9rem; max-width: 85%; line-height: 1.35; white-space: pre-wrap; }
.msg.bruno { background: #fff4e6; align-self: flex-start; }
.msg.kid { background: #d0ebff; align-self: flex-end; }
.msg.wait { color: #889; font-style: italic; }
.msg.err { background: #ffe3e3; }
.chat-form { display: flex; gap: 0.4rem; padding: 0.5rem; border-top: 1px solid #eee; }
.chat-input { flex: 1; font: inherit; font-size: 0.95rem; padding: 0.4rem 0.6rem; border: 2px solid #e0b98a; border-radius: 0.6rem; }
.btn.chat-mic { background: #fff0f6; color: #a61e4d; box-shadow: 0 3px 0 #fcc2d7; }
.btn.chat-mic.aktiv { background: #e64980; color: #fff; box-shadow: 0 3px 0 #a61e4d; }
.btn.chat-mic:disabled { opacity: 0.6; }
.chat-mic-info { padding: 0 0.6rem 0.5rem; font-size: 0.85rem; color: #555; }
.chatentry { border-bottom: 1px solid #eee; padding: 0.4rem 0; }
.chatentry.flag { background: #fff3bf; }

/* ---------- Fächer (Deutsch, Englisch, NMG) ---------- */
.tabs { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin: 0.2rem 0 0.8rem; }
.tab { border: 0; border-radius: 2rem; padding: 0.45rem 1.1rem; font-size: 1.05rem; font-weight: 800; background: #fff;
  color: #445; box-shadow: 0 3px 0 #b7c9a8; }
.tab.on { background: #2f9e44; color: #fff; box-shadow: 0 3px 0 #1e6e2e; }
input.txt { font: inherit; font-size: 1.6rem; font-weight: 700; width: 18rem; max-width: 80vw; text-align: center;
  padding: 0.3rem 0.5rem; border: 3px solid #74c0fc; border-radius: 0.7rem; }
input.txt:focus { outline: none; border-color: #1c7ed6; background: #f1f8ff; }
.umlaute { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.5rem; }
.umlaute button { font: inherit; font-size: 1.2rem; font-weight: 800; width: 2.6rem; height: 2.4rem; border: 0;
  border-radius: 0.5rem; background: #fff4e6; box-shadow: 0 2px 0 #e0b98a; }
.btn.listen { display: block; margin: 0.6rem auto 0; background: #e7f5ff; color: #1864ab; box-shadow: 0 3px 0 #a5d8ff; font-size: 1.15rem; }
.btn.mic { display: block; margin: 0.6rem auto 0; background: #fff0f6; color: #a61e4d; box-shadow: 0 3px 0 #fcc2d7; font-size: 1.15rem; }
.btn.mic.aktiv { background: #e64980; color: #fff; box-shadow: 0 3px 0 #a61e4d; }
.btn.mic:disabled { opacity: 0.6; }
.feedback.emic { margin-top: 0.4rem; font-size: 1rem; }
.feedback.emic:empty { min-height: 0; padding: 0; margin: 0; }
.satz { font-size: 1.5rem; font-weight: 700; margin: 0.6rem 0; color: #1864ab; }
.en, .fr { font-family: "Nunito", "Segoe UI", "DejaVu Sans", Arial, sans-serif; color: #c2255c; }
.big small, .satz small { font-size: 0.6em; color: #667; font-weight: 600; }
.card.wide .prompt { text-align: left; }
.lesetext { font-size: 1.1rem; line-height: 1.6; background: #fffbe6; border-radius: 0.8rem; padding: 0.8rem 1rem;
  max-height: 16rem; overflow-y: auto; }
.frage { font-weight: 800; margin-top: 0.8rem; text-align: center; }
.card.wide .choice { font-size: 1.05rem; text-align: left; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.mcol { display: flex; flex-direction: column; gap: 0.5rem; }
.mbtn { font: inherit; font-size: 1.1rem; font-weight: 700; padding: 0.55rem; border-radius: 0.7rem;
  border: 3px solid #74c0fc; background: #f8fbff; }
.mbtn.sel { border-color: #f59f00; background: #fff3bf; }
.mbtn.ok { border-color: #2f9e44; background: #d3f9d8; opacity: 0.75; }
.mbtn.bad { border-color: #e03131; background: #ffe3e3; }
/* Der Reihe nach antippen (Ticket #283): festes Raster, oben die schon richtig getippte Reihe */
.reihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.45rem; max-width: 34rem; margin: 0.8rem auto 0; }
.rbtn { font-size: 1.5rem; height: 3.2rem; min-height: 0; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.rbtn:disabled { cursor: default; }
body.leseanfaenger .rbtn { font-size: 1.8rem; height: 3.5rem; min-height: 0; }
.rbtn.ok:disabled { color: #2b8a3e; }
.rbtn.wackeln { animation: shake 0.35s; }
.reihe-ziel { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem; margin-top: 0.7rem; min-height: 1.9rem; }
.rslot { min-width: 1.3rem; height: 1.7rem; line-height: 1.7rem; border-bottom: 3px solid #ced4da; font-weight: 800; color: #2f9e44; text-align: center; }
.rslot.on { border-bottom-color: #2f9e44; }
@media (max-width: 480px) {
  .card:has(.reihe) { padding-left: 0.6rem; padding-right: 0.6rem; }
  .reihe { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; }
  .reihe-ziel { display: none; } /* auf dem Handy reicht die Markierung der Kärtchen */
  .card:has(.reihe) .prompt, body.leseanfaenger .card:has(.reihe) .prompt { font-size: 1.2rem; }
  .card:has(.reihe) .btn.listen, body.leseanfaenger .card:has(.reihe) .btn.listen { font-size: 1.1rem; padding: 0.4rem 1rem; margin-top: 0.3rem; }
  .rbtn, body.leseanfaenger .rbtn { height: 2.45rem; font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .rbtn.wackeln { animation: none; } }

/* ---------- Testprüfungen ---------- */
.tile.exam { border-top-color: #845ef7; background: #f8f0fc; }
.exam { display: flex; flex-direction: column; gap: 0.8rem; max-width: 860px; margin: 0 auto; }
.eslider { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; }
.eslider::-webkit-scrollbar { display: none; }
.eslider > .eq { flex: 0 0 100%; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .eslider { scroll-behavior: auto; } }
.enav { display: flex; justify-content: space-between; gap: 0.6rem; }
.enav .btn:disabled { opacity: 0.4; cursor: default; }
.ereg { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.ereg .btn { min-width: 2.4rem; }
.ereg .btn.fertig { background: #d3f9d8; border-color: #51cf66; }
.ereg .btn.aktiv { background: #845ef7; border-color: #5f3dc4; color: #fff; }
.eq .eqh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; color: #5f3dc4; }
.eqf { font-size: 1.15rem; line-height: 1.5; margin-bottom: 0.6rem; }
.eq textarea, .parent textarea { width: 100%; font: inherit; font-size: 1rem; padding: 0.5rem; border: 2px solid #adb5bd; border-radius: 0.6rem; }
.eq input.num, .eq input.txt { font-size: 1.3rem; width: 14rem; }
.eopts { display: flex; flex-direction: column; gap: 0.4rem; }
.eopt { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; border: 2px solid #d0ebff; border-radius: 0.6rem; cursor: pointer; }
.eopt:has(input:checked) { border-color: #1c7ed6; background: #e7f5ff; }
.eopt input { width: 1.2rem; height: 1.2rem; }
.ematch { display: flex; flex-direction: column; gap: 0.4rem; }
.emrow { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; }
.emrow select { font: inherit; padding: 0.3rem; max-width: 60%; }
.elbl { display: block; font-weight: 700; margin-top: 0.4rem; }
.big-btn { font-size: 1.2rem; padding: 0.8rem 1.6rem; }
.spinner { width: 3rem; height: 3rem; margin: 1rem auto; border: 6px solid #d3f9d8; border-top-color: #2f9e44; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { font-size: 4rem; font-weight: 900; margin: 0.4rem auto; width: 7rem; height: 7rem; line-height: 7rem; border-radius: 50%; }
.note.gut { background: #d3f9d8; color: #2b8a3e; }
.note.mittel { background: #fff3bf; color: #e67700; }
.note.tief { background: #ffe3e3; color: #c92a2a; }
.lzlist { text-align: left; display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; }
.lz { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.6rem; border-radius: 0.5rem; background: #f8f9fa; font-size: 0.95rem; }
.lz b { white-space: nowrap; }
.eq-ok { border-left: 6px solid #51cf66; }
.eq-part { border-left: 6px solid #fcc419; }
.eq-bad { border-left: 6px solid #ff6b6b; }
.pts { font-weight: 800; }
.eans-show { background: #f8f9fa; border-radius: 0.5rem; padding: 0.5rem 0.7rem; margin: 0.4rem 0; }
.loesung { background: #f1f3f5; border-radius: 0.5rem; padding: 0.5rem 0.7rem; margin: 0.4rem 0; }
/* Korrektur: Antwort nach Ergebnis (Ticket #266) */
.eans-show.erg-richtig { background: #ebfbee; border-left: 4px solid #2f9e44; }
.eans-show.erg-teil { background: #fff4e6; border-left: 4px solid #fd7e14; }
.eans-show.erg-falsch { background: #fff5f5; border-left: 4px solid #e03131; }
.eans-show.erg-pruefen { background: #fff9db; border-left: 4px solid #f59f00; }
.thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.thumbs img { height: 7rem; border-radius: 0.4rem; border: 1px solid #ccc; }
.xgrid { display: flex; gap: 1rem; flex-wrap: wrap; }
.xq, .xv { border-left: 6px solid #845ef7; }
.xv.flag { border-left-color: #fab005; background: #fff9db; }
.warn-txt { color: #e67700; }
label.inline { display: inline-flex; gap: 0.3rem; align-items: center; margin-right: 1rem; }
.sw { text-align: left; margin-top: 0.8rem; }
.sw h3 { font-size: 1.05rem; margin: 0.3rem 0; }
.lz.erreicht { background: #ebfbee; }
.lz.teilweise { background: #fff9db; }
.lz.noch-nicht { background: #fff5f5; }
.vergleich { text-align: left; background: #f3f0ff; border-radius: 0.6rem; padding: 0.6rem; margin-top: 0.6rem; }
.kidstand { border-top: 1px solid #eee; padding-top: 0.5rem; margin-top: 0.5rem; }
.kidstand h4 { margin: 0.3rem 0; }

/* ---------- Haushalte ---------- */
.hh-name { text-align: center; color: #556; margin: -0.3rem 0 0; font-weight: 700; }
.welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; text-align: left; margin-top: 1rem; }
.welcome label { display: block; margin: 0.4rem 0; }
.welcome input:not([type=radio]), .welcome select { font: inherit; padding: 0.35rem 0.5rem; border: 2px solid #adb5bd; border-radius: 0.5rem; width: 100%; }
.staff-link { display: inline-block; margin-top: 1.5rem; text-decoration: none; color: #556; }
.linkrow { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid #f1f3f5; }
.linkrow input:not([type=checkbox]) { font: inherit; padding: 0.3rem 0.5rem; border: 2px solid #adb5bd; border-radius: 0.5rem; }
.codebox { background: #fff3bf; border-radius: 0.5rem; padding: 0.4rem 0.7rem; margin: 0.4rem 0; font-size: 1.05rem; }
.codebox b { letter-spacing: 0.1em; font-size: 1.2rem; }
/* Gerätecode mit QR-Code zum Scannen, Wiederherstellungscode zum Aufschreiben (Ticket #140) */
.codebox.mit-qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.codebox.mit-qr .qr svg { width: 140px; height: 140px; display: block; background: #fff; border-radius: 0.4rem; }
.codebox.wh-code { text-align: center; padding: 0.8rem; }
.codebox.wh-code b { font-size: 1.5rem; letter-spacing: 0.12em; word-break: break-all; }
.home .wh-card { max-width: 34rem; margin: 0 auto 1rem; text-align: left; }
.home .wh-card h2 { margin-top: 0; }
@media print { .home > :not(.wh-card) { display: none !important; } }
.welcome .card.vorgabe { outline: 3px solid #2f9e44; }
.warnbox.neue-geraete { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
@media print { .wh-card .actions, .top, .tabs, .sprache-wahl, .toast { display: none !important; } }
.readonly .actions, .readonly [data-act=xqDel], .readonly [data-act=xvSave] { display: none !important; }
/* Druckansicht Testprüfung A4 (Ticket #273); «gross» = Zyklus 1 (1./2. Klasse): grössere Schrift, mehr Platz */
.druck-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.druck-tipp { max-width: 210mm; margin: 0.5rem auto; }
.druckblatt { background: #fff; color: #000; max-width: 210mm; margin: 0 auto 2rem; padding: 12mm; box-sizing: border-box;
  font: 11pt/1.4 system-ui, sans-serif; text-align: left; box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2); }
.druckblatt h1 { font-size: 16pt; margin: 0 0 0.3rem; }
.druckblatt .db-kopf { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: 0.5rem; margin-bottom: 0.6rem; }
.druckblatt .db-felder div { margin: 0.25rem 0; white-space: nowrap; }
.druckblatt .db-linie { display: inline-block; min-width: 9em; border-bottom: 1px solid #000; }
.druckblatt .db-lz { font-size: 9pt; }
.druckblatt .db-lz ul { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; }
.druckblatt .db-hinweis { font-style: italic; }
.druckblatt .dq { break-inside: avoid; page-break-inside: avoid; border: 1px solid #999; border-radius: 3mm; padding: 3mm 4mm; margin: 4mm 0; }
.druckblatt .dq-kopf { display: flex; justify-content: space-between; margin-bottom: 1.5mm; }
.druckblatt .dq-frage { margin-bottom: 3mm; }
.druckblatt .dq-wahl div { margin: 2mm 0; display: flex; align-items: center; gap: 3mm; }
.druckblatt .dq-kreuz, .druckblatt .dq-buchstabe { display: inline-block; flex: none; width: 6mm; height: 6mm; border: 1.5px solid #000; }
.druckblatt .dq-antwort { display: flex; align-items: flex-end; gap: 3mm; margin-top: 2mm; }
.druckblatt .dq-box { flex: 1; height: 11mm; border: 1.5px solid #000; border-radius: 1.5mm; }
.druckblatt { --zeile: 10mm; }
.druckblatt .dq-linien { min-height: calc(var(--zeilen, 4) * var(--zeile)); -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background: repeating-linear-gradient(transparent 0 calc(var(--zeile) - 1px), #555 calc(var(--zeile) - 1px) var(--zeile)); }
/* Prüfungsblatt mit festen A4-Seiten (Seitenzahl wählbar 2–6); Höhe = A4 minus Seitenränder beim Drucken */
.druckblatt.seitig { max-width: none; padding: 0; background: none; box-shadow: none; overflow-x: auto; }
.druckblatt .db-seite { box-sizing: content-box; width: 186mm; height: 262mm; padding: 12mm 12mm 22mm; margin: 0 auto 1.5rem; background: #fff;
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; overflow: hidden; }
.druckblatt .db-seite.messen { height: auto; }
.druckblatt .db-inhalt { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 4mm; margin-top: 2mm; }
.druckblatt .db-seite.messen .db-inhalt { flex: none; }
.druckblatt .db-inhalt .dq { margin: 0; flex: none; display: flex; flex-direction: column; }
.druckblatt .db-inhalt .dq.waechst { flex: 1 0 auto; }
.druckblatt .db-inhalt .dq-karo, .druckblatt .db-inhalt .dq-linien { flex: 1 0 auto; }
.druckblatt .db-kopf2 { font-weight: bold; border-bottom: 2px solid #000; padding-bottom: 1mm; }
.druckblatt .db-seite .db-fuss { margin-top: 3mm; flex: none; }
.druck-seitenwahl { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.5rem; }
.druck-seitenwahl select { width: auto; }
.druckblatt .dq-karo { height: 40mm; margin: 1mm 0 2mm; border: 1px solid #888;
  background-image: linear-gradient(#bbb 1px, transparent 1px), linear-gradient(90deg, #bbb 1px, transparent 1px); background-size: 5mm 5mm; }
.druckblatt .dq-match { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.druckblatt .dq-match > div > div { display: flex; align-items: center; gap: 3mm; margin: 2.5mm 0; }
/* Zeichnung einer Aufgabe (Ticket #392), online und im Druck */
.aufg-bild { background: #fff; color: #000; border-radius: 0.4rem; padding: 0.3rem; margin: 0.3rem 0 0.6rem; max-width: 32rem; }
.aufg-bild svg { display: block; width: 100%; height: auto; max-height: 18rem; }
.druckblatt .aufg-bild { max-width: 120mm; padding: 0; margin: 0 0 3mm; }
.druckblatt .aufg-bild svg { max-height: 70mm; }
.ex-modus { margin: 0.4rem 0; }
.druckblatt .dq-loesung { background: #f2f2f2; padding: 2mm 3mm; border-radius: 1.5mm; }
.druckblatt .dq-teil { margin: 1.5mm 0; }
.druckblatt .dq-ant { border-left: 1.5mm solid #999; padding: 1mm 3mm; margin: 1.5mm 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.druckblatt .dq-ant.erg-richtig { border-color: #2f9e44; }
.druckblatt .dq-ant.erg-teil { border-color: #f08c00; }
.druckblatt .dq-ant.erg-falsch { border-color: #e03131; }
.druckblatt .dq-ant.erg-pruefen { border-color: #fab005; }
.druckblatt .db-lzstand td { padding: 1mm 3mm 1mm 0; vertical-align: top; }
.druckblatt .db-fuss { display: flex; justify-content: space-between; align-items: center; font-size: 8pt; color: #333; border-top: 1px solid #999; margin-top: 4mm; padding-top: 1mm; }
.druckblatt .db-qr svg { width: 16mm; height: 16mm; display: block; }
.druckblatt.gross { font-size: 15pt; line-height: 1.5; }
.druckblatt.gross h1 { font-size: 20pt; }
.druckblatt.gross .dq-kreuz, .druckblatt.gross .dq-buchstabe { width: 9mm; height: 9mm; }
.druckblatt.gross .dq-box { height: 16mm; }
.druckblatt.gross { --zeile: 14mm; }
.druckblatt.gross .dq-karo { height: 60mm; background-size: 7mm 7mm; }
@media print {
  @page { size: A4; margin: 12mm 12mm 22mm; }
  body:has(.druckblatt) { background: #fff !important; }
  .druck-leiste { display: none !important; }
  .druckblatt { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .druckblatt .dq-karo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Kennung und QR-Code auf jeder Seite (fixierte Elemente wiederholen sich beim Drucken) */
  .druckblatt .db-fuss { position: fixed; bottom: -16mm; left: 0; right: 0; background: #fff; }
  /* Prüfungsblatt: jede Seite ein Blatt, Fusszeile mit Seiten-QR-Code steht in der Seite selbst */
  .druckblatt.seitig { overflow: visible; }
  .druckblatt .db-seite { padding: 0; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  .druckblatt .db-seite:last-child { break-after: auto; page-break-after: auto; }
  .druckblatt .db-seite .db-fuss { position: static; }
}

/* ---------- Inhalte der Lehrperson ---------- */
.tile { position: relative; }
.tile .badge { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.7rem; font-weight: 800; background: #ff922b; color: #fff; border-radius: 1rem; padding: 0.1rem 0.5rem; }
.tile .badge.lp { background: #845ef7; }
.tile.aktuell { border-top-color: #ff922b; box-shadow: 0 4px 0 #ffc078; }
.tile.lehrer { border-top-color: #845ef7; }
.schulmeldung { background: #fff4e6; border-radius: 0.8rem; padding: 0.5rem 0.9rem; margin: 0 auto 0.8rem; max-width: 800px; font-size: 0.95rem; }
.klassetest [data-act=xtSave], .klassetest [data-act=xtStatus], .klassetest [data-act=xtDelete], .klassetest [data-act=xqDel], .klassetest [data-act=xqAdd] { display: none !important; }
.inh-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid #f1f3f5; }
.inh-row.aus { opacity: 0.5; }

/* ---------- Fehler melden / Wunsch (Elternbereich und Verwaltung) ---------- */
dialog.meldung { border: 0; border-radius: 1.2rem; padding: 0; width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem);
  box-shadow: 0 6px 0 #b7c9a8, 0 20px 50px rgba(31, 45, 31, 0.25); color: #1f2d1f; background: #fff; }
dialog.meldung::backdrop { background: rgba(31, 45, 31, 0.45); }
.mform { padding: 1rem 1.2rem 1.2rem; font-size: 0.9rem; }
.mform label { display: block; margin: 0.6rem 0; font-weight: 700; }
dialog.meldung .mform input:not([type=radio]), dialog.meldung .mform textarea { display: block; max-width: none; font-size: 0.9rem; width: 100%; margin-top: 0.25rem; font: inherit; font-weight: 400;
  padding: 0.4rem 0.6rem; border: 2px solid #ced4da; border-radius: 0.5rem; }
dialog.meldung .mform input[type=file] { border-style: dashed; font-size: 0.85rem; }
.mform h3 { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid #e9ecef; font-size: 1rem; }
.mtitel { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mtitel h2 { font-size: 1.2rem; color: #2b8a3e; }
.mart-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.6rem 0; }
.mart-wahl label { margin: 0; cursor: pointer; }
.mart-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.mart-wahl span { display: block; border: 2px solid #ced4da; border-radius: 0.8rem; padding: 0.5rem 0.8rem; font-weight: 800; }
.mart-wahl small { display: block; font-weight: 400; font-size: 0.78rem; color: #556; }
.mart-wahl input:checked + span { border-color: #2f9e44; background: #ebfbee; box-shadow: 0 2px 0 #b2f2bb; }
.mart-wahl input:focus-visible + span { outline: 3px solid #f59f00; }
.mbild { display: flex; gap: 0.8rem; align-items: center; margin: -0.2rem 0 0.6rem; }
.mbild img { max-width: 10rem; max-height: 7rem; border-radius: 0.5rem; border: 1px solid #dee2e6; }
.mbild .manzeige-info { flex: 1; margin: 0; }
.mform .manzeige { margin: -0.2rem 0 0.6rem; }
.mhinweis { background: #e7f5ff; color: #1c3d5a; border-radius: 0.8rem; padding: 0.6rem 0.9rem; font-size: 0.8rem; line-height: 1.4; }
.mmsg { margin-top: 0.7rem; background: #d3f9d8; color: #1e6e2e; border-radius: 0.6rem; padding: 0.45rem 0.8rem; font-weight: 700; }
.mmsg.bad { background: #ffe3e3; color: #a51d1d; }
.mliste { list-style: none; padding: 0; margin: 0; }
.mliste li { padding: 0.45rem 0; border-bottom: 1px solid #f1f3f5; }
.mliste li:last-child { border-bottom: 0; }
.mfuss { margin-top: 0.15rem; }
.mfuss .small { margin-left: 0.3rem; }
.mst, .mart { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; background: #f1f3f5; color: #495057; }
.mart-fehler { background: #fff0f6; color: #a61e4d; }
.mart-wunsch { background: #f3f0ff; color: #5f3dc4; }
.mst-offen { background: #f1f3f5; color: #495057; }
.mst-neu { background: #e7f5ff; color: #1864ab; }
.mst-in_arbeit { background: #fff3bf; color: #8a5a00; }
.mst-im_test { background: #fff4e6; color: #a5520f; }
.mst-live { background: #d3f9d8; color: #2b8a3e; }
.mst-abgelehnt { background: #ffe3e3; color: #c92a2a; }
.mst-wartet_freigabe { background: #f3f0ff; color: #5f3dc4; }
.melden-btn { white-space: nowrap; }
.melden-btn .mkurz { display: none; }
@media (max-width: 600px) { .melden-btn .mlang { display: none; } .top .melden-btn { padding: 0.3rem 0.45rem; } .top .melden-btn .ico { width: 1.5em; height: 1.5em; } }

/* ---------- Neu im Lern-Zoo (Elternbereich und Verwaltung) ---------- */
dialog.neuigkeiten[open] { border: 0; border-radius: 1.2rem; padding: 1rem 1.2rem; width: min(30rem, calc(100vw - 1.5rem)); max-height: min(32rem, calc(100vh - 2rem));
  display: flex; flex-direction: column; box-shadow: 0 6px 0 #b7c9a8, 0 20px 50px rgba(31, 45, 31, 0.25); color: #1f2d1f; background: #fff; }
dialog.neuigkeiten::backdrop { background: rgba(31, 45, 31, 0.45); }
.neu-kopf { display: flex; align-items: center; gap: 0.5rem; }
.neu-kopf h2 { font-size: 1.2rem; color: #2b8a3e; margin: 0; }
.neu-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0.8rem 0; padding: 0 0.3rem 0 1.2rem; font-size: 0.95rem; line-height: 1.4; }
.neu-liste li { margin: 0.4rem 0; }
.neu-liste .small { color: #556; margin-right: 0.3rem; }
.neu-fuss { display: flex; justify-content: flex-end; }

/* ---------- Hinweis «Wo melde ich etwas?» (Ticket #419) ---------- */
dialog.meldehinweis { border: 0; border-radius: 1.2rem; padding: 1rem 1.2rem; width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem);
  overflow-y: auto; box-shadow: 0 6px 0 #b7c9a8, 0 20px 50px rgba(31, 45, 31, 0.25); color: #1f2d1f; background: #fff; }
dialog.meldehinweis::backdrop { background: rgba(31, 45, 31, 0.45); }
dialog.meldehinweis > p { margin: 0.8rem 0; line-height: 1.45; }
.mh-bild { margin: 0 0 0.9rem; }
.mh-rahmen { border: 1px solid #c9d6c0; border-radius: 0.6rem; overflow: hidden; pointer-events: none; user-select: none; zoom: 0.85; }
.mh-rahmen > header.top { margin: 0; position: static; box-shadow: none; }
.mh-bild figcaption { margin-top: 0.35rem; color: #556; }
.mh-hervor { position: relative; outline: 3px solid #f08c00; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(240, 140, 0, 0.3); border-radius: 0.5rem;
  animation: mh-puls 1.6s ease-in-out infinite; }
@keyframes mh-puls { 50% { box-shadow: 0 0 0 11px rgba(240, 140, 0, 0.12); } }
@media (prefers-reduced-motion: reduce) { .mh-hervor { animation: none; } }
.mh-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.mh-aus { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; cursor: pointer; }
.mh-aus input { width: 1.1rem; height: 1.1rem; margin: 0; }

/* ---------- Kinderansicht für Eltern (nur lesend) ---------- */
.vorschau-band { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  gap: 0.8rem; flex-wrap: wrap; padding: 0.35rem 0.8rem; background: #6741d9; color: #fff; font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); min-height: 2.4rem; }
.vorschau-band .btn { padding: 0.25rem 0.8rem; font-size: 0.8rem; background: #fff; color: #4b2aa8; box-shadow: none; }
body.vorschau { padding-top: 2.6rem; }
body.vorschau .zoo3d { top: 2.6rem; }
body.vorschau .btn.bruno, body.vorschau #chat { display: none !important; }
.vorschau-hinweis { background: #f3f0ff; border: 2px dashed #9775fa; border-radius: 0.7rem; padding: 0.4rem 0.7rem; font-size: 0.8rem; color: #4b2aa8; margin: 0.5rem 0; }

/* ---------- Wartungshinweis (Notfall-Einspielen) ---------- */
.wartung-balken { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 0.35rem 1rem; text-align: center; font-size: 0.8rem;
  background: #fff3bf; color: #5c3c00; border-top: 2px solid #ffd43b; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12); }
dialog.wartung-dialog { border: 0; border-radius: 1.2rem; padding: 1.2rem 1.4rem; width: min(26rem, calc(100vw - 1.5rem)); text-align: center;
  box-shadow: 0 6px 0 #b7c9a8, 0 20px 50px rgba(31, 45, 31, 0.25); color: #1f2d1f; background: #fff; }
dialog.wartung-dialog::backdrop { background: rgba(31, 45, 31, 0.55); }
dialog.wartung-dialog h2 { color: #2b8a3e; }

/* ---------- Testinstanz-Banner (Ticket #141) ---------- */
.testinstanz-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 400; height: 1.3rem; line-height: 1.3rem; padding: 0 0.8rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 0.72rem; font-weight: 600; pointer-events: none;
  color: #7a4a00; background: #fff3d6; border-bottom: 1px solid #f0d49a; }
body.testinstanz { padding-top: 1.3rem; }
body.testinstanz .zoo3d, body.testinstanz .vorschau-band { top: 1.3rem; }
body.testinstanz.vorschau { padding-top: 3.9rem; }
body.testinstanz.vorschau .zoo3d { top: 3.9rem; }

/* ---------- Zyklus 1: Bilder, Mengen, Geld, Uhr ---------- */
.bild { width: 6rem; height: 6rem; display: block; margin: 0.5rem auto; }
.bild-wahl { width: 4.5rem; height: 4.5rem; vertical-align: middle; }
.bild-klein { width: 2.2rem; height: 2.2rem; }
.farbfeld { border-radius: 50%; box-sizing: border-box; } /* Rand steckt im SVG (Ticket #244) */
.bild-wahl.farbfeld { display: inline-block; }
.menge { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; margin: 0.6rem 0; }
.menge .gruppe { display: inline-flex; gap: 0.15rem; padding: 0.2rem 0.3rem; border-radius: 0.5rem; background: #f8f9fa; }
.gruppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.gruppen .menge { margin: 0; border: 2px dashed #adb5bd; border-radius: 0.6rem; padding: 0.2rem; }
.doppel { display: flex; justify-content: center; align-items: center; gap: 0.6rem; }
.doppel .spiegel { font-size: 2.4rem; color: #1c7ed6; font-weight: 800; }
.zehner { display: block; margin: 0.5rem auto; max-width: 100%; height: auto; }
.form { display: block; margin: 0.5rem auto; }
.form-klein { width: 3rem; height: 3rem; }
.form-wahl { width: 4.5rem; height: 4.5rem; vertical-align: middle; }
.formen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; margin: 0.6rem 0; }
.uhr-wahl { width: 6.5rem; height: 6.5rem; vertical-align: middle; }
.geld { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }
.muenze { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; font-size: 0.95rem; font-weight: 800;
  background: radial-gradient(circle at 35% 30%, #f8f9fa, #adb5bd); border: 3px solid #868e96; color: #343a40; }
.muenze.rp { width: 3.3rem; height: 3.3rem; font-size: 0.8rem; background: radial-gradient(circle at 35% 30%, #fff9db, #e0b84a); border-color: #c49a2c; }
.geldnote { display: inline-flex; align-items: center; justify-content: center; width: 7rem; height: 3.8rem; border-radius: 0.4rem; font-weight: 800;
  border: 2px solid #495057; background: #ffe066; color: #343a40; }
.geldnote.n2000 { background: #ffa8a8; }
.geldnote.n5000 { background: #8ce99a; }
.buchstabe { font-size: 2.4rem; color: #1864ab; }

/* Leseanfänger (1./2. Klasse): grosse Schrift und grosse Knöpfe */
body.leseanfaenger .prompt { font-size: 1.6rem; }
body.leseanfaenger .wort { font-size: 2.2rem; letter-spacing: 0.04em; }
body.leseanfaenger .story { font-size: 1.45rem; }
body.leseanfaenger .choices { gap: 1rem; }
body.leseanfaenger .choice { font-size: 2rem; min-height: 5rem; padding: 0.9rem; }
body.leseanfaenger .card.wide .choice { font-size: 1.4rem; }
body.leseanfaenger .mbtn { font-size: 1.6rem; min-height: 3.6rem; }
body.leseanfaenger .keypad { grid-template-columns: repeat(3, 4.6rem); gap: 0.55rem; }
body.leseanfaenger .keypad button { height: 4.4rem; font-size: 2rem; }
body.leseanfaenger input.num { font-size: 2.3rem; }
body.leseanfaenger input.txt { font-size: 2rem; }
body.leseanfaenger .btn.listen { font-size: 1.5rem; padding: 0.7rem 1.6rem; }
body.leseanfaenger .actions .btn { font-size: 1.3rem; padding: 0.7rem 1.3rem; }

/* ---------- Rollen-Simulation des Admins (nur Testinstanz, Ticket #142) ---------- */
.sim-band { position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; display: flex; align-items: center; justify-content: center;
  gap: 0.8rem; flex-wrap: wrap; padding: 0.4rem 0.8rem; min-height: 2.6rem; box-sizing: border-box;
  background: #c92a2a; color: #fff; font-weight: 700; font-size: 0.9rem; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); }
.sim-band .sim-bis { font-weight: 400; opacity: 0.9; font-size: 0.8rem; }
.sim-band .btn { padding: 0.25rem 0.8rem; font-size: 0.85rem; background: #fff; color: #c92a2a; box-shadow: none; }
body.simulation { padding-bottom: 3.2rem; }
body.simulation .toast { bottom: 3.6rem; }
body.simulation .wartung-balken { bottom: 2.6rem; }

/* Templates (Ticket #167): «Standard Pilot Phase» ist das Aussehen oben (ohne data-template).
   Weitere Templates nur über Wunsch-Tickets, hier unter html[data-template="<id>"] – nur Aussehen, auf allen Geräten gut bedienbar. */
.tpl-wahl { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; font-size: 0.9rem; }
.tpl-wahl select { max-width: 100%; padding: 0.2rem 0.4rem; border: 2px solid #c5d8b5; border-radius: 0.6rem; font: inherit; }

/* Template «Modern» (Ticket #179): helle, ruhige Farben, weiche Schatten, stärkere Rundungen. Nur Aussehen, Zoo (zoo.css) unverändert.
   Kontrast WCAG AA: Text #1e293b/#475569 auf Weiss bzw. #f1f5f9, Weiss auf #4338ca, #15803d, #b91c1c und #6d28d9. */
html[data-template="modern"] body { background: #f1f5f9; color: #1e293b;
  font-family: system-ui, -apple-system, "Segoe UI", "Nunito", "DejaVu Sans", Arial, sans-serif; }
html[data-template="modern"] .small, html[data-template="modern"] .hint, html[data-template="modern"] .tmeta,
html[data-template="modern"] .zl-kachel small, html[data-template="modern"] .parent-btn { color: #475569; }
html[data-template="modern"] .tname { color: #334155; }
html[data-template="modern"] .home h1, html[data-template="modern"] .maptitle { color: #4338ca; }
/* Buttons: mindestens rund 44 px hoch, weiche Schatten statt «Kante» */
html[data-template="modern"] .btn { border-radius: 999px; min-height: 2.4rem; background: #fff; color: #1e293b; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.08); }
html[data-template="modern"] .btn.small { min-height: 2.2rem; }
html[data-template="modern"] .btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
html[data-template="modern"] .btn.primary { background: #4338ca; border-color: #4338ca; color: #fff; }
html[data-template="modern"] .btn.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
html[data-template="modern"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
html[data-template="modern"] .btn:focus-visible, html[data-template="modern"] .choice:focus-visible,
html[data-template="modern"] .tile:focus-visible, html[data-template="modern"] .profile:focus-visible,
html[data-template="modern"] .zl-kachel:focus-visible, html[data-template="modern"] .tab:focus-visible,
html[data-template="modern"] .mbtn:focus-visible { outline: 3px solid #d97706; outline-offset: 2px; }
/* Kopfzeile, Profile */
html[data-template="modern"] .top { border-radius: 1.2rem; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07); }
html[data-template="modern"] .profile { border-radius: 1.5rem; border: 1px solid #e2e8f0; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
html[data-template="modern"] .profile:hover, html[data-template="modern"] .tile:hover,
html[data-template="modern"] .zl-kachel:hover { background: #eef2ff; }
/* Zookarte: Kacheln */
html[data-template="modern"] .map { gap: 1rem; }
html[data-template="modern"] .tile { border-radius: 1.5rem; border: 1px solid #e2e8f0; border-top: 0.35rem solid #22c55e;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); transition: transform 0.15s, box-shadow 0.15s; }
html[data-template="modern"] .tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); }
html[data-template="modern"] .tile.special { border-top-color: #f59e0b; }
html[data-template="modern"] .tile.aktuell { border-top-color: #f97316; box-shadow: 0 0 0 3px #fed7aa, 0 4px 14px rgba(15, 23, 42, 0.08); }
html[data-template="modern"] .tile.lehrer { border-top-color: #7c3aed; }
html[data-template="modern"] .tile .badge { background: #c2410c; }
html[data-template="modern"] .tile .badge.lp { background: #6d28d9; }
html[data-template="modern"] .zl-kachel { border-radius: 1rem; min-height: 2.4rem; border: 1px solid #e2e8f0; border-left: 0.35rem solid #22c55e;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07); }
html[data-template="modern"] .zl-kachel.zoo { border-left-color: #14b8a6; }
html[data-template="modern"] .zl-kachel.shop { border-left-color: #f59e0b; }
/* Aufgaben */
html[data-template="modern"] .card { border-radius: 1.5rem; border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); }
html[data-template="modern"] .progress { background: #e2e8f0; }
html[data-template="modern"] .progress div { background: linear-gradient(90deg, #818cf8, #4ade80); }
html[data-template="modern"] .choice, html[data-template="modern"] .mbtn { border: 2px solid #c7d2fe; background: #fff; border-radius: 1rem; color: #1e293b;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); min-height: 2.4rem; }
html[data-template="modern"] .choice:hover:not(:disabled), html[data-template="modern"] .mbtn:hover { background: #eef2ff; border-color: #818cf8; }
html[data-template="modern"] .choice.right, html[data-template="modern"] .mbtn.ok { border-color: #16a34a; background: #dcfce7; }
html[data-template="modern"] .choice.wrong, html[data-template="modern"] .mbtn.bad { border-color: #dc2626; background: #fee2e2; }
html[data-template="modern"] .mbtn.sel { border-color: #d97706; background: #fef3c7; }
html[data-template="modern"] .choice small { color: #64748b; }
html[data-template="modern"] input.txt { border: 2px solid #c7d2fe; border-radius: 1rem; }
html[data-template="modern"] input.txt:focus { border-color: #4338ca; background: #f5f7ff; }
html[data-template="modern"] .keypad button { border-radius: 1rem; background: #fff; color: #1e293b; border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); }
html[data-template="modern"] .keypad .ok { background: #15803d; border-color: #15803d; color: #fff; }
html[data-template="modern"] .umlaute button { border-radius: 0.8rem; background: #fff7ed; color: #1e293b; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); }
html[data-template="modern"] .feedback { border-radius: 1rem; }
html[data-template="modern"] .feedback.good { background: #dcfce7; color: #166534; }
html[data-template="modern"] .feedback.warn { background: #fef3c7; }
html[data-template="modern"] .feedback.bad { background: #fee2e2; }
html[data-template="modern"] .feedback.info { background: #e0e7ff; }
html[data-template="modern"] .lesetext { background: #fffbeb; border-radius: 1rem; }
html[data-template="modern"] .tab { border: 1px solid #e2e8f0; color: #334155; min-height: 2.4rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
html[data-template="modern"] .tab.on { background: #4338ca; border-color: #4338ca; color: #fff; box-shadow: 0 2px 8px rgba(67, 56, 202, 0.3); }
html[data-template="modern"] .btn.listen { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
html[data-template="modern"] .satz { color: #3730a3; }
/* Ergebnis */
html[data-template="modern"] .lvl.up { color: #c2410c; }
html[data-template="modern"] .toast { background: #15803d; border-radius: 1rem; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); }
html[data-template="modern"] .toast.bad { background: #b91c1c; }
/* Prüfungen */
html[data-template="modern"] .tile.exam { border-top-color: #7c3aed; background: #faf5ff; }
html[data-template="modern"] .eq .eqh { color: #5b21b6; }
html[data-template="modern"] .ereg .btn.fertig { background: #dcfce7; border-color: #22c55e; }
html[data-template="modern"] .ereg .btn.aktiv { background: #6d28d9; border-color: #6d28d9; color: #fff; }
html[data-template="modern"] .eq textarea { border: 2px solid #cbd5e1; border-radius: 1rem; }
html[data-template="modern"] .lz { border-radius: 0.8rem; background: #f8fafc; }
html[data-template="modern"] .lz.erreicht { background: #f0fdf4; }
html[data-template="modern"] .lz.teilweise { background: #fefce8; }
html[data-template="modern"] .lz.noch-nicht { background: #fef2f2; }
html[data-template="modern"] .eq-ok { border-left-color: #22c55e; }
html[data-template="modern"] .eq-part { border-left-color: #eab308; }
html[data-template="modern"] .eq-bad { border-left-color: #ef4444; }
/* Handy (360 px): etwas engere Abstände, Bedienelemente bleiben gross genug */
@media (max-width: 480px) {
  html[data-template="modern"] .tile, html[data-template="modern"] .card { border-radius: 1.1rem; }
  html[data-template="modern"] .card { padding: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-template="modern"] .tile { transition: none; }
  html[data-template="modern"] .tile:hover { transform: none; }
}

/* Altersstufen (Ticket #207): Varianten von «Standard Pilot Phase», nur mit dem Standard-Template (html[data-stufe]).
   «klein» (1.–2. Klasse) = Aussehen oben ohne Attribut. Nur Aussehen, Zoo (zoo.css) unverändert.
   Die drei Stufen sollen sich deutlich unterscheiden (Nachbesserung #207): hell-verspielt, warm-abenteuerlich, dunkel-cool.
   Kontrast WCAG AA: «Abenteuer» Text #3b2a14/#6b4f2a auf Sand und Weiss, Weiss auf #1f4d3a bzw. #b2410c;
   «Cool» Text #e2e8f0/#94a3b8 auf #0b1120/#1e293b, auf den hellen Arbeitskarten #0f172a/#475569. */
/* «Abenteuer» (3.–4. Klasse): Expeditions-Look – Sand und Karten-Raster, dunkelgrüne Leiste, Kompass-Orange,
   Kacheln wie Fundkarten mit Bild im runden Stempel */
html[data-stufe="mittel"] body { color: #3b2a14; background-color: #f5ead3;
  background-image: linear-gradient(rgba(120, 90, 40, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 90, 40, 0.07) 1px, transparent 1px);
  background-size: 2rem 2rem; }
html[data-stufe="mittel"] .small, html[data-stufe="mittel"] .hint, html[data-stufe="mittel"] .tmeta,
html[data-stufe="mittel"] .zl-kachel small, html[data-stufe="mittel"] .tname { color: #6b4f2a; }
html[data-stufe="mittel"] .maptitle, html[data-stufe="mittel"] .ptitle { color: #1f4d3a; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
html[data-stufe="mittel"] .maptitle { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
html[data-stufe="mittel"] .maptitle::before, html[data-stufe="mittel"] .maptitle::after { content: ""; flex: 0 1 4rem; border-top: 3px dashed #c2410c; }
html[data-stufe="mittel"] .top { background: #1f4d3a; color: #fff; border-radius: 0.6rem; box-shadow: 0 3px 0 #12301f; }
html[data-stufe="mittel"] .btn { border-radius: 0.5rem; color: #3b2a14; border: 2px solid #3b2a14; box-shadow: 0 3px 0 #3b2a14; }
html[data-stufe="mittel"] .btn:active { box-shadow: 0 1px 0 #3b2a14; }
html[data-stufe="mittel"] .btn.primary { background: #b2410c; color: #fff; border-color: #7c2d0a; box-shadow: 0 3px 0 #7c2d0a; }
html[data-stufe="mittel"] .btn.danger { color: #fff; border-color: #a51d1d; }
html[data-stufe="mittel"] .btn.ghost { border-color: transparent; box-shadow: none; }
html[data-stufe="mittel"] .top .btn { border-color: transparent; box-shadow: none; }
html[data-stufe="mittel"] .top .btn.ghost { color: #fff; }
html[data-stufe="mittel"] .card { border-radius: 0.6rem; border: 2px solid #d9c49a; box-shadow: 0 4px 0 #d9c49a; }
html[data-stufe="mittel"] .tile { border-radius: 0.6rem; border: 2px solid #d9c49a; border-bottom: 0.4rem solid #2f7a52; box-shadow: none;
  transition: transform 0.12s; }
html[data-stufe="mittel"] .tile:hover { background: #fffaf0; transform: rotate(-1deg) translateY(-2px); }
html[data-stufe="mittel"] .tile.special, html[data-stufe="mittel"] .tile.aktuell { border-bottom-color: #c2410c; box-shadow: none; }
html[data-stufe="mittel"] .tile.lehrer, html[data-stufe="mittel"] .tile.exam { border-bottom-color: #6d28d9; }
html[data-stufe="mittel"] .tile-ico { width: 2.8rem; height: 2.8rem; padding: 0.45rem; border-radius: 50%; background: #fdf1dc; border: 2px dashed #c2410c; }
html[data-stufe="mittel"] .gehege { color: #1f4d3a; font-weight: 900; }
html[data-stufe="mittel"] .zl-kachel { border-radius: 0.6rem; border: 2px solid #d9c49a; border-left: 0.4rem solid #2f7a52; box-shadow: none; }
html[data-stufe="mittel"] .zl-kachel:hover { background: #fffaf0; }
html[data-stufe="mittel"] .tab { border-radius: 0.5rem; color: #3b2a14; border: 2px solid #d9c49a; box-shadow: none; }
html[data-stufe="mittel"] .tab.on { background: #1f4d3a; color: #fff; border-color: #1f4d3a; box-shadow: 0 3px 0 #12301f; }
html[data-stufe="mittel"] .choice, html[data-stufe="mittel"] input.num, html[data-stufe="mittel"] input.txt, html[data-stufe="mittel"] .mbtn {
  border-color: #d9a25f; border-radius: 0.5rem; background: #fffaf0; }
html[data-stufe="mittel"] .choice:hover:not(:disabled) { background: #fdf1dc; }
html[data-stufe="mittel"] .choice.right, html[data-stufe="mittel"] .mbtn.ok { border-color: #2f9e44; background: #d3f9d8; }
html[data-stufe="mittel"] .choice.wrong, html[data-stufe="mittel"] .mbtn.bad { border-color: #e03131; background: #ffe3e3; }
html[data-stufe="mittel"] input.num:focus, html[data-stufe="mittel"] input.txt:focus { border-color: #c2410c; background: #fff; }
html[data-stufe="mittel"] .keypad button { border-radius: 0.5rem; border: 2px solid #3b2a14; box-shadow: 0 3px 0 #3b2a14; color: #3b2a14; }
html[data-stufe="mittel"] .keypad .ok { background: #2f7a52; color: #fff; }
html[data-stufe="mittel"] .progress { background: #fffaf0; border: 2px solid #d9c49a; border-radius: 0.5rem; }
html[data-stufe="mittel"] .progress div { background: repeating-linear-gradient(135deg, #2f9e44 0 0.6rem, #37b24d 0.6rem 1.2rem); }
html[data-stufe="mittel"] .btn:focus-visible, html[data-stufe="mittel"] .choice:focus-visible, html[data-stufe="mittel"] .tile:focus-visible,
html[data-stufe="mittel"] .zl-kachel:focus-visible, html[data-stufe="mittel"] .tab:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html[data-stufe="mittel"] .tile { transition: none; }
  html[data-stufe="mittel"] .tile:hover { transform: none; }
}

/* «Cool» (5.–6. Klasse): Dark Mode wie in Games und Apps – Nachtblau, Neon-Cyan und Violett, schlichte Schrift,
   kaum Bildchen. Die Arbeitskarten (.card) bleiben hell, damit Aufgaben, Tabellen und Texte gut lesbar sind. */
html[data-stufe="gross"] body { color: #e2e8f0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "DejaVu Sans", Arial, sans-serif;
  background: radial-gradient(ellipse at 15% -10%, rgba(34, 211, 238, 0.18), transparent 55%),
    radial-gradient(ellipse at 100% 0, rgba(139, 92, 246, 0.2), transparent 50%), #0b1120;
  background-attachment: fixed; }
html[data-stufe="gross"] .small, html[data-stufe="gross"] .hint, html[data-stufe="gross"] .tmeta,
html[data-stufe="gross"] .zl-kachel small, html[data-stufe="gross"] .tname { color: #94a3b8; }
html[data-stufe="gross"] .maptitle, html[data-stufe="gross"] .ptitle { color: #f8fafc; font-weight: 800; text-align: left;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.15rem; }
html[data-stufe="gross"] .maptitle::after { content: ""; display: block; width: 3.5rem; height: 0.2rem; margin-top: 0.35rem; border-radius: 1rem;
  background: linear-gradient(90deg, #22d3ee, #a78bfa); }
html[data-stufe="gross"] .maptitle .ico { display: none; }
html[data-stufe="gross"] .btn { border-radius: 0.5rem; font-weight: 600; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; box-shadow: none; }
html[data-stufe="gross"] .btn:hover:not(:disabled) { border-color: #22d3ee; }
html[data-stufe="gross"] .btn:active { transform: none; box-shadow: none; background: #334155; }
html[data-stufe="gross"] .btn.primary { background: linear-gradient(90deg, #0e7490, #6d28d9); border-color: transparent; color: #fff;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.35); }
html[data-stufe="gross"] .btn.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
html[data-stufe="gross"] .btn.ghost { background: transparent; border-color: transparent; }
html[data-stufe="gross"] .top { background: rgba(15, 23, 42, 0.85); border: 1px solid #1e293b; border-radius: 0.6rem; box-shadow: none; }
html[data-stufe="gross"] .card { color: #0f172a; background: #f8fafc; border-radius: 0.6rem; border: 0; border-top: 0.2rem solid #22d3ee;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
html[data-stufe="gross"] .card .small, html[data-stufe="gross"] .card .hint { color: #475569; }
html[data-stufe="gross"] .card .btn:not(.primary):not(.danger) { background: #fff; color: #0f172a; border-color: #cbd5e1; }
html[data-stufe="gross"] .card .btn:active:not(.primary):not(.danger) { background: #e2e8f0; }
html[data-stufe="gross"] .map { gap: 0.6rem; }
html[data-stufe="gross"] .tile { color: #e2e8f0; background: #111827; border-radius: 0.6rem; border: 1px solid #1e293b; border-left: 0.25rem solid #22d3ee;
  box-shadow: none; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s; }
html[data-stufe="gross"] .tile > :not(.tile-ico):not(.badge) { grid-column: 2; }
html[data-stufe="gross"] .tile-ico { grid-column: 1; grid-row: span 3; width: 2rem; height: 2rem; filter: saturate(0.7); }
html[data-stufe="gross"] .tile .badge { position: static; grid-column: 1 / -1; justify-self: start; margin-bottom: 0.3rem; border-radius: 0.3rem;
  text-transform: uppercase; letter-spacing: 0.05em; }
html[data-stufe="gross"] .tile:hover, html[data-stufe="gross"] .zl-kachel:hover { background: #172033; border-color: #22d3ee;
  box-shadow: 0 0 0 1px #22d3ee, 0 0 18px rgba(34, 211, 238, 0.25); }
html[data-stufe="gross"] .tile.special { border-left-color: #f97316; }
html[data-stufe="gross"] .tile.aktuell { border-left-color: #f97316; box-shadow: none; }
html[data-stufe="gross"] .tile.lehrer, html[data-stufe="gross"] .tile.exam { border-left-color: #a78bfa; background: #111827; }
html[data-stufe="gross"] .gehege { font-weight: 700; color: #f8fafc; }
html[data-stufe="gross"] .zl-kachel { color: #e2e8f0; background: #111827; border-radius: 0.6rem; border: 1px solid #1e293b; border-left: 0.25rem solid #a78bfa; box-shadow: none; }
html[data-stufe="gross"] .zl-ico { width: 1.4rem; height: 1.4rem; }
html[data-stufe="gross"] .tab { border-radius: 0.5rem; font-weight: 600; background: transparent; color: #94a3b8; border: 1px solid #334155; box-shadow: none; }
html[data-stufe="gross"] .tab .ico { display: none; }
html[data-stufe="gross"] .tab.on { background: #22d3ee; color: #0b1120; border-color: #22d3ee; box-shadow: 0 0 14px rgba(34, 211, 238, 0.4); }
html[data-stufe="gross"] .schulmeldung { background: #1e293b; color: #e2e8f0; border-left: 0.25rem solid #f97316; border-radius: 0.5rem; }
html[data-stufe="gross"] .chat { color: #0f172a; }
html[data-stufe="gross"] .choice, html[data-stufe="gross"] input.num { border: 2px solid #cbd5e1; border-radius: 0.5rem; background: #fff; color: #0f172a; font-weight: 700; }
html[data-stufe="gross"] .choice:hover:not(:disabled) { background: #ecfeff; border-color: #0e7490; }
html[data-stufe="gross"] .choice.right { border-color: #2f9e44; background: #d3f9d8; }
html[data-stufe="gross"] .choice.wrong { border-color: #e03131; background: #ffe3e3; }
html[data-stufe="gross"] input.num:focus { border-color: #0e7490; background: #fff; }
html[data-stufe="gross"] .progress { background: #1e293b; border-radius: 0.3rem; }
html[data-stufe="gross"] .progress div { background: linear-gradient(90deg, #0e7490, #6d28d9); }
html[data-stufe="gross"] .progress span { color: #f8fafc; }
html[data-stufe="gross"] .story-ico { display: none; }
html[data-stufe="gross"] .btn:focus-visible, html[data-stufe="gross"] .choice:focus-visible, html[data-stufe="gross"] .tile:focus-visible,
html[data-stufe="gross"] .zl-kachel:focus-visible, html[data-stufe="gross"] .tab:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html[data-stufe="gross"] .tile { transition: none; }
}
/* «Cool» in Spiel und Prüfung (Ticket #226): flach, kleine Rundungen, gedeckte Farben wie beim Template «Modern» */
html[data-stufe="gross"] .mbtn { border: 2px solid #a1a1aa; border-radius: 0.4rem; background: #fff; color: #18181b; }
html[data-stufe="gross"] .mbtn:hover { background: #f4f4f5; }
html[data-stufe="gross"] .mbtn.sel { border-color: #0b7285; background: #e3f6f8; }
html[data-stufe="gross"] .mbtn.ok { border-color: #2f9e44; background: #d3f9d8; }
html[data-stufe="gross"] .mbtn.bad { border-color: #e03131; background: #ffe3e3; }
html[data-stufe="gross"] .mbtn:focus-visible { outline: 3px solid #0b7285; outline-offset: 2px; }
html[data-stufe="gross"] input.txt { border: 2px solid #a1a1aa; border-radius: 0.4rem; }
html[data-stufe="gross"] input.txt:focus { border-color: #0b7285; background: #fff; }
html[data-stufe="gross"] .keypad button { border-radius: 0.5rem; background: #1e293b; color: #f8fafc; border: 1px solid #334155; box-shadow: none; font-weight: 700; }
html[data-stufe="gross"] .keypad button:hover { border-color: #22d3ee; }
html[data-stufe="gross"] .keypad button:active { transform: none; background: #334155; }
html[data-stufe="gross"] .keypad .ok { background: #15803d; border-color: #15803d; color: #fff; }
html[data-stufe="gross"] .umlaute button { border-radius: 0.4rem; background: #fff; color: #18181b; border: 1px solid #d4d4d8; box-shadow: none; font-weight: 700; }
html[data-stufe="gross"] .umlaute button:active { background: #e4e4e7; }
html[data-stufe="gross"] .feedback { border-radius: 0.4rem; border-left: 0.3rem solid transparent; text-align: left; padding: 0.4rem 0.7rem; }
html[data-stufe="gross"] .feedback:empty { border-left: 0; }
html[data-stufe="gross"] .feedback.good { background: #ebfbee; color: #166534; border-left-color: #2f9e44; font-weight: 700; }
html[data-stufe="gross"] .feedback.warn { background: #fff9db; border-left-color: #e67700; }
html[data-stufe="gross"] .feedback.bad { background: #fff5f5; border-left-color: #e03131; }
html[data-stufe="gross"] .feedback.info { background: #e3f6f8; border-left-color: #0b7285; }
html[data-stufe="gross"] .feedback .expl { color: #3f3f46; }
html[data-stufe="gross"] .toast { background: #15803d; border-radius: 0.5rem; font-weight: 700; box-shadow: 0 6px 18px rgba(24, 24, 27, 0.2); }
html[data-stufe="gross"] .toast.bad { background: #b91c1c; }
html[data-stufe="gross"] .eq .eqh { color: #5b21b6; }
html[data-stufe="gross"] .ereg .btn.fertig { background: #14532d; border-color: #22c55e; color: #f0fdf4; }
html[data-stufe="gross"] .ereg .btn.aktiv { background: #6d28d9; border-color: #6d28d9; color: #fff; }
html[data-stufe="gross"] .eq textarea { border: 2px solid #a1a1aa; border-radius: 0.4rem; }
html[data-stufe="gross"] .eq textarea:focus { outline: none; border-color: #0b7285; }
html[data-stufe="gross"] .lz { border-radius: 0.3rem; background: #fafafa; border: 1px solid #e4e4e7; }
html[data-stufe="gross"] .lz.erreicht { background: #f0fdf4; }
html[data-stufe="gross"] .lz.teilweise { background: #fefce8; }
html[data-stufe="gross"] .lz.noch-nicht { background: #fef2f2; }
html[data-stufe="gross"] .eq-ok { border-left: 0.3rem solid #2f9e44; }
html[data-stufe="gross"] .eq-part { border-left: 0.3rem solid #e67700; }
html[data-stufe="gross"] .eq-bad { border-left: 0.3rem solid #e03131; }
.stufe-wahl { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0; font-size: 0.9rem; }
.stufe-wahl select { max-width: 100%; padding: 0.2rem 0.4rem; border: 2px solid #c5d8b5; border-radius: 0.6rem; font: inherit; }

/* Testprüfungen pro Kind (Ticket #262) */
.exam-kind { margin: 0.6rem 0 1rem; }
.exam-kind h4 { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0; }
.exam-kind h4 .ava, .exam-kind h4 img { width: 1.8rem; height: 1.8rem; border-radius: 50%; }

/* Kinder-Wunsch: Hinweis statt Formular (Ticket #260) */
dialog.kind-wunsch-dlg .kw-inhalt { padding: 1.4rem 1.4rem 1.1rem; text-align: center; font-size: 1.1rem; }
dialog.kind-wunsch-dlg .kw-ico { width: 3rem; height: 3rem; }
dialog.kind-wunsch-dlg .btn { min-width: 8rem; font-size: 1.1rem; }

/* Aussehen und Stil als Dialog rechts neben dem Namen (Ticket #355) */
.wer-leiste { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.aussehen-knopf { padding: 0.3rem 0.5rem; font-size: 1.2rem; line-height: 1; }
dialog.aussehen-dlg .ad-inhalt { padding: 1.4rem 1.4rem 1.1rem; text-align: center; font-size: 1.1rem; }
dialog.aussehen-dlg .tpl-wahl, dialog.aussehen-dlg .stufe-wahl { justify-content: center; margin: 0.8rem 0; font-size: 1rem; }
dialog.aussehen-dlg .btn { min-width: 8rem; margin-top: 0.4rem; font-size: 1.1rem; }
dialog.aussehen-dlg .lade-wahl-titel { margin: 0.9rem 0 0.4rem; font-size: 1rem; }
dialog.aussehen-dlg .lade-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; max-width: 20rem; margin: 0 auto 0.6rem; }

/* Lade-Anzeige (Ticket #496): sperrt den ganzen Bildschirm mit leichter Verdunkelung; Kinder: hüpfende Tatze, Erwachsene: ruhiger Kreis (erwachsene.css) */
.lade-sperre { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0s 0.15s; cursor: progress; touch-action: none; }
.lade-sperre.an { opacity: 1; visibility: visible; transition: opacity 0.15s; }
.lade-box { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.lade-tatze { width: 3rem; height: 3rem; animation: ladeHuepf 0.7s ease-in-out infinite alternate; }
.lade-kreis { display: none; }
@keyframes ladeHuepf { from { transform: translateY(0.35rem) rotate(-10deg); } to { transform: translateY(-0.35rem) rotate(10deg); } }
html[data-template="modern"] .lade-box { border-radius: 1.2rem; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); }
html[data-stufe="gross"] .lade-box { border-radius: 0.6rem; box-shadow: 0 6px 18px rgba(24, 24, 27, 0.2); }
@media (prefers-reduced-motion: reduce) { .lade-tatze { animation: none; } }