/* ============================================================
   Luna Lernapp – Stylesheet
   Bunt, pastellig, touch-freundlich (Tablet) + Desktop-Layout
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --pink: #ff7bb5;
  --pink-dunkel: #e85a9c;
  --lila: #a78bfa;
  --lila-dunkel: #8b6ce0;
  --tuerkis: #4dd0c4;
  --tuerkis-dunkel: #2fb3a7;
  --gelb: #ffd166;
  --gruen: #7ed99a;
  --gruen-dunkel: #4cbf72;
  --rot-weich: #ff9aa2;
  --creme: #fff7fb;
  --text: #5a4a6a;
  --text-hell: #9385a5;
  --karte: #ffffff;
  --schatten: 0 6px 0 rgba(90, 74, 106, 0.12), 0 10px 24px rgba(167, 139, 250, 0.18);
  --radius: 24px;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #ffe3f1 0%, #f3e8ff 45%, #dcf6f2 100%);
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 clamp(8px, 2vw, 24px);
}

button {
  font-family: inherit;
  color: inherit;
  border: none;
  cursor: pointer;
  background: none;
}
button:active { transform: translateY(2px) scale(0.98); }

.versteckt { display: none !important; }

/* ---------- Kopfleiste ---------- */
#topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(6px, 1.2vh, 14px) 4px;
}
#tb-titel {
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  color: var(--pink-dunkel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-shadow: 0 2px 0 #fff;
}
#tb-rechts { display: flex; align-items: center; gap: 8px; }
.tb-chip {
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  box-shadow: 0 3px 0 rgba(90,74,106,0.1);
  white-space: nowrap;
}
#chip-diamanten { color: #2fa3d7; }
#chip-level { color: #e8a200; }
.tb-btn {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  background: #fff;
  border-radius: 16px;
  width: clamp(42px, 6vw, 52px);
  height: clamp(42px, 6vw, 52px);
  box-shadow: 0 3px 0 rgba(90,74,106,0.1);
  display: grid;
  place-items: center;
}
.tb-chip.pulse { animation: chipPulse 0.5s ease; }
@keyframes chipPulse { 50% { transform: scale(1.25); background: var(--gelb); } }

/* ---------- Screens ---------- */
.screen {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.screen.aktiv { display: flex; animation: screenRein 0.35s ease; }
/* Kopfzeilen, Tabs und Leisten behalten ihre Höhe – nur der Screen selbst scrollt */
.screen > * { flex-shrink: 0; }
@keyframes screenRein {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.screen-titel {
  text-align: center;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  font-weight: 800;
  color: var(--lila-dunkel);
  margin: clamp(4px, 1vh, 14px) 0;
  text-shadow: 0 2px 0 #fff;
}

/* ---------- Buttons ---------- */
.gross-btn {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  box-shadow: var(--schatten);
  transition: transform 0.12s ease;
}
.btn-pink { background: linear-gradient(180deg, var(--pink), var(--pink-dunkel)); }
.btn-lila { background: linear-gradient(180deg, var(--lila), var(--lila-dunkel)); }
.btn-tuerkis { background: linear-gradient(180deg, var(--tuerkis), var(--tuerkis-dunkel)); }
.btn-grau { background: linear-gradient(180deg, #c9c2d8, #a89fbd); }
.btn-gelb { background: linear-gradient(180deg, var(--gelb), #f0a734); }
.btn-blau { background: linear-gradient(180deg, #63c8ff, #3a86d9); }

.klein-btn {
  align-self: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 999px;
  background: #ffffffcc;
  font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--text-hell);
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
  margin-top: 10px;
}

/* ---------- Start ---------- */
.home-mitte {
  margin: auto;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 18px);
  padding: 8px 0;
}
.app-titel {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  background: linear-gradient(90deg, #ff5fa8, #a05ce8, #26b8ab);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app-titel span { display: block; font-size: 0.6em; -webkit-text-fill-color: var(--text-hell); color: var(--text-hell); }

#home-einhorn {
  width: clamp(180px, 32vh, 300px);
  aspect-ratio: 1;
  position: relative;
}
#home-einhorn img, #home-einhorn video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
  animation: schweben 3.2s ease-in-out infinite;
}
#home-video { display: none; }
#home-video.da { display: block; }
#home-video.da + #home-bild { display: none; }
@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
#home-gruss {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 700;
  color: var(--pink-dunkel);
}
.home-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Desktop/Tablet quer: Buttons nebeneinander */
@media (min-width: 820px) and (min-aspect-ratio: 1/1) {
  .home-buttons { flex-direction: row; }
  .home-buttons .gross-btn { flex: 1; }
}

/* ---------- Klassen-Wahl ---------- */
.stufen-wahl {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 2px 6px;
  margin-bottom: clamp(6px, 1.2vh, 12px);
}
/* Andys Ein-Zeilen-Vorgabe gilt NUR dem Lern-Kopf (#stufen-wahl):
   alle Klassen in EINER Zeile, schmale Schirme scrollen quer.
   In Karten-Bloecken (Einstellungen, Onboarding, Duell ...) brechen
   die Knoepfe stattdessen sauber um - kein Rollbalken im Block.
   "safe center": zentriert, aber bei Ueberlauf links buendig,
   damit die Vorschule nie unerreichbar abgeschnitten ist. */
#stufen-wahl {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: safe center;
}
.stufe-btn {
  min-width: clamp(52px, 8vw, 84px);
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #fff;
  font-weight: 800;
  font-size: clamp(0.82rem, 1.9vw, 1.05rem);
  color: var(--text-hell);
  box-shadow: 0 4px 0 rgba(90,74,106,0.1);
  padding: 4px 8px;
}
#btn-lern-klappe { display: block; margin: 0 auto 10px; }
.stufe-btn.aktiv {
  background: linear-gradient(180deg, var(--gelb), #ffb84d);
  color: #7a5200;
  transform: scale(1.06);
}

/* ---------- Kategorie-Karten ---------- */
.karten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2vw, 18px);
  width: min(760px, 100%);
  margin: 0 auto;
}
@media (min-width: 900px) { .karten-grid { grid-template-columns: repeat(4, 1fr); } }
#wissen-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { #wissen-grid { grid-template-columns: repeat(3, 1fr); } }

.kat-karte {
  border-radius: var(--radius);
  padding: clamp(14px, 2.4vh, 26px) 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  box-shadow: var(--schatten);
  transition: transform 0.15s ease;
}
.kat-karte:hover { transform: translateY(-4px) scale(1.02); }
.kat-emoji { font-size: clamp(2.2rem, 6vw, 3.4rem); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15)); }
.kat-name { font-size: clamp(1rem, 2.4vw, 1.3rem); text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.kat-mathe { background: linear-gradient(160deg, #63c8ff, #3a86d9); }
.kat-deutsch { background: linear-gradient(160deg, #ff9aa2, #e85a72); }
.kat-englisch { background: linear-gradient(160deg, #7ed99a, #34a866); }
.kat-wissen { background: linear-gradient(160deg, #ffd166, #f0952e); }
.kat-lesen { background: linear-gradient(160deg, #f79ad3, #c74fa8); }
.kat-logik { background: linear-gradient(160deg, #b39ddb, #6a4fa8); }
.kat-laender { background: linear-gradient(160deg, #ffb56b, #e2733a); }
.kat-wortschatz { background: linear-gradient(160deg, #8fd3f4, #4a90d9); }
.kat-musik { background: linear-gradient(160deg, #f7a8c4, #d95a8f); }
.kat-verkehr { background: linear-gradient(160deg, #ffd166, #d9822b); }
.kat-geo { background: linear-gradient(160deg, #63c8ff, #3a86d9); }
.kat-bio { background: linear-gradient(160deg, #7ed99a, #34a866); }
.kat-phy { background: linear-gradient(160deg, #a78bfa, #7a4fe0); }
.kat-erde { background: linear-gradient(160deg, #e8a87c, #c96f3b); }
.kat-all { background: linear-gradient(160deg, #6b7bd9, #3d4ba8); }
.kat-profi { background: linear-gradient(160deg, #4a3f8f, #241c54); }
.kat-elemente { background: linear-gradient(160deg, #2fb3a7, #146e66); }
.kat-sparen { background: linear-gradient(160deg, #ffd76b 0%, #58b368 45%, #1e7a4a 100%); }
.fach-gruppe-titel {
  width: min(760px, 100%);
  margin: 20px auto 2px;
  font-weight: 800;
  font-size: 1.08rem;
  color: #7a5aa0;
  text-align: left;
  padding-left: 6px;
}
.fach-gruppe-titel:first-of-type { margin-top: 8px; }
body.thema-bau .fach-gruppe-titel { color: #3a6ea8; }
body.thema-zoo .fach-gruppe-titel { color: #2e7d4f; }
.kat-badge {
  font-size: 0.72rem;
  background: var(--gelb);
  color: #7a5200;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 800;
}

/* ---------- Quiz ---------- */
#screen-quiz { gap: clamp(6px, 1.2vh, 14px); }
#quiz-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
#quiz-kopf .klein-btn { margin: 0; min-width: 44px; }
#quiz-fortschritt {
  flex: 1;
  height: 18px;
  background: #ffffffaa;
  border-radius: 999px;
  overflow: hidden;
}
#quiz-balken {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--lila), var(--tuerkis));
  border-radius: 999px;
  transition: width 0.4s ease;
}
#quiz-zaehler, #quiz-streak {
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
}
#quiz-streak { color: #f0952e; }
#quiz-timer {
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  background: linear-gradient(180deg, #eef4ff, #dbe9ff);
  color: #3a5fd9;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
}
#quiz-timer.knapp { background: linear-gradient(180deg, #ffe2e6, #ffc2c8); color: #c0394f; animation: chipPulse 0.5s ease infinite; }
.checkup-inhalt { width: min(680px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.checkup-inhalt .einstellung-block { width: 100%; }
#quiz-streak.heiss { background: linear-gradient(180deg, #ffd166, #ff9f43); color: #fff; animation: chipPulse 0.5s ease; }

#quiz-mitte {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vh, 22px);
  width: min(860px, 100%);
  margin: 0 auto;
  min-height: 0;
}

#frage-karte {
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(14px, 2.6vh, 28px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
#frage-emoji { font-size: clamp(2rem, 6vh, 3.6rem); line-height: 1.2; word-break: break-all; max-width: 100%; }
#frage-emoji:empty { display: none; }
#lese-text {
  background: linear-gradient(160deg, #fff8e8, #ffeef8);
  border: 3px dashed #f0b8d8;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  width: 100%;
}
#lese-text:empty { display: none; }
#frage-text {
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
}

#antwort-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.6vw, 14px);
}
@media (max-width: 560px) { #antwort-grid { grid-template-columns: 1fr; } }
.antwort-btn {
  min-height: clamp(58px, 9vh, 76px);
  border-radius: 20px;
  background: #fff;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 700;
  box-shadow: 0 5px 0 rgba(90,74,106,0.12);
  padding: 10px 16px;
  transition: transform 0.12s ease, background 0.2s ease;
  border: 3px solid transparent;
}
.antwort-btn:hover { border-color: var(--lila); }
.antwort-btn.richtig { background: linear-gradient(180deg, #9ff0b5, var(--gruen)); border-color: var(--gruen-dunkel); animation: popRichtig 0.45s ease; }
.antwort-btn.falsch { background: linear-gradient(180deg, #ffc2c8, var(--rot-weich)); animation: wackeln 0.45s ease; }
.antwort-btn.gesperrt { pointer-events: none; opacity: 0.75; }
@keyframes popRichtig { 40% { transform: scale(1.08); } }
@keyframes wackeln {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Zahlen-Eingabe */
#zahlen-bereich { display: none; flex-direction: column; align-items: center; gap: 10px; }
#zahlen-bereich.aktiv { display: flex; }
#zahl-anzeige {
  min-width: clamp(160px, 30vw, 260px);
  min-height: 58px;
  background: #fff;
  border-radius: 18px;
  box-shadow: inset 0 3px 8px rgba(90,74,106,0.12);
  font-size: clamp(1.6rem, 4vh, 2.2rem);
  font-weight: 800;
  text-align: center;
  padding: 6px 18px;
  color: var(--lila-dunkel);
  letter-spacing: 2px;
}
#keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 108px));
  gap: clamp(6px, 1.2vh, 12px);
}
.kp {
  min-height: clamp(52px, 8vh, 68px);
  border-radius: 18px;
  background: #fff;
  font-size: clamp(1.3rem, 3vh, 1.7rem);
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(90,74,106,0.12);
}
.kp-ok { background: linear-gradient(180deg, var(--gruen), var(--gruen-dunkel)); color: #fff; }
.kp-loesch { background: linear-gradient(180deg, #ffc2c8, var(--rot-weich)); color: #fff; }

/* Feedback-Leiste */
#feedback-leiste {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--karte);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -6px 24px rgba(90,74,106,0.15);
  padding: 14px clamp(12px, 2vw, 22px);
  animation: hochRutschen 0.3s ease;
}
@keyframes hochRutschen { from { transform: translateY(100%); } to { transform: none; } }
#feedback-inhalt { flex: 1; min-width: 0; }
#feedback-titel { font-size: clamp(1.1rem, 2.6vw, 1.4rem); font-weight: 800; }
#feedback-leiste.gut #feedback-titel { color: var(--gruen-dunkel); }
#feedback-leiste.schlecht #feedback-titel { color: #e8556d; }
#feedback-erklaerung { font-size: clamp(0.9rem, 2.1vw, 1.1rem); color: var(--text-hell); font-weight: 600; line-height: 1.3; }
#feedback-leiste .gross-btn { width: auto; min-width: clamp(130px, 20vw, 190px); flex: 0 0 auto; }

/* ---------- Ergebnis ---------- */
.ergebnis-mitte {
  margin: auto;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
#ergebnis-sterne { font-size: clamp(2.6rem, 8vw, 4.2rem); letter-spacing: 6px; }
#ergebnis-sterne .stern { display: inline-block; animation: sternRein 0.5s ease backwards; }
#ergebnis-sterne .stern:nth-child(2) { animation-delay: 0.25s; }
#ergebnis-sterne .stern:nth-child(3) { animation-delay: 0.5s; }
@keyframes sternRein {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.35) rotate(10deg); }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
#ergebnis-titel { font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--pink-dunkel); }
#ergebnis-text { font-weight: 700; color: var(--text-hell); font-size: clamp(1rem, 2.4vw, 1.2rem); }
#ergebnis-diamanten {
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  font-weight: 800;
  color: #2fa3d7;
  background: #fff;
  padding: 10px 28px;
  border-radius: 999px;
  box-shadow: var(--schatten);
}

/* ---------- Wochen-Challenge ---------- */
#challenge-karte {
  width: min(560px, 100%);
  margin: 0 auto;
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(16px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border: 4px solid var(--gelb);
}
#challenge-emoji { font-size: clamp(2.6rem, 8vw, 4rem); }
#challenge-name { font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 800; color: var(--lila-dunkel); }
#challenge-text { font-weight: 700; color: var(--text-hell); }
#challenge-restzeit {
  background: linear-gradient(180deg, #eef4ff, #e2ecff);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 800;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: #3a5fd9;
}
#challenge-regel {
  background: #fff3d6;
  border-radius: 14px;
  padding: 8px 16px;
  font-weight: 700;
  color: #7a5200;
}
#challenge-belohnung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(160deg, #fdf1ff, #eef7ff);
  border-radius: 18px;
  padding: 12px 22px;
}
.belohnung-titel { font-weight: 800; color: var(--pink-dunkel); }
#challenge-belohnung-bild { width: clamp(90px, 18vw, 140px); }
#challenge-belohnung-bild img { width: 100%; }
#challenge-belohnung-bild .ersatz-emoji { font-size: 3.4rem; }
#challenge-belohnung-name { font-weight: 800; }
#challenge-status { font-weight: 700; color: var(--text-hell); }
#challenge-status.geschafft { color: var(--gruen-dunkel); font-size: 1.1rem; }
#einstein-karte {
  width: min(560px, 100%);
  margin: 14px auto 0;
  background: linear-gradient(160deg, #eef4ff, #f3edff);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(16px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border: 4px solid var(--lila);
}
#einstein-emoji { font-size: clamp(2.2rem, 7vw, 3.4rem); }
#einstein-name { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; color: var(--lila-dunkel); }
#einstein-text { font-weight: 700; color: var(--text-hell); line-height: 1.4; }
#einstein-status { font-weight: 700; color: var(--text-hell); }
#einstein-status.geschafft { color: var(--gruen-dunkel); }
#einstein-karte .gross-btn:disabled { background: linear-gradient(180deg, #d8d2e6, #bdb4d1); pointer-events: none; }

#premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(10px, 1.8vw, 16px);
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 4px 2px 10px;
}
.premium-karte { border: 3px solid var(--gelb); }
.premium-karte.gekauft { border-color: var(--gruen); }
#premium-kopf { font-size: clamp(0.95rem, 2.3vw, 1.15rem); font-weight: 800; color: var(--lila-dunkel); }

#challenge-badge:not(:empty) {
  background: var(--gelb);
  color: #7a5200;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75em;
  margin-left: 6px;
}

/* ---------- Mathe-Tricks ---------- */
#tricks-liste {
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trick-karte {
  background: var(--karte);
  border-radius: 18px;
  box-shadow: var(--schatten);
  padding: 14px 18px;
}
.trick-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--lila-dunkel);
  cursor: pointer;
}
.trick-kopf .t-emoji { font-size: 1.6em; }
.trick-kopf .t-pfeil { margin-left: auto; transition: transform 0.25s ease; color: var(--text-hell); }
.trick-karte.offen .t-pfeil { transform: rotate(90deg); }
.trick-inhalt { display: none; padding-top: 10px; line-height: 1.5; font-weight: 600; }
.trick-karte.offen .trick-inhalt { display: block; animation: screenRein 0.25s ease; }
.trick-beispiel {
  margin-top: 8px;
  background: #eef7ff;
  border-left: 5px solid #63c8ff;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  white-space: pre-line;
}

/* ---------- Tipp im Quiz ---------- */
#btn-tipp { margin-top: 4px; background: #fff3d6; color: #7a5200; }
#tipp-box {
  background: #fff8e8;
  border: 3px dashed var(--gelb);
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 700;
  color: #7a5200;
  line-height: 1.4;
  animation: screenRein 0.3s ease;
}

/* ---------- Einhorn-Aktionen ---------- */
#aktions-leiste {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  padding: 10px 0 2px;
  flex-wrap: wrap;
}
.aktion-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: clamp(62px, 12vw, 86px);
  padding: 10px 8px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(90,74,106,0.12);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  transition: transform 0.15s ease;
}
.aktion-btn:hover { transform: translateY(-3px) scale(1.05); }
.aktion-btn span { font-size: clamp(0.7rem, 1.8vw, 0.85rem); font-weight: 800; color: var(--text-hell); }
.aktion-btn .bonus-punkt {
  position: absolute;
  font-size: 0.6rem;
}
.aktion-btn.belohnt { background: #e9fbef; }

#sprechblase {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  color: var(--pink-dunkel);
  box-shadow: 0 6px 18px rgba(90,74,106,0.3);
  max-width: 46%;
  z-index: 500;
  opacity: 1;
  animation: blaseRein 0.3s ease both;
}
#sprechblase::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 30px;
  border: 8px solid transparent;
  border-top: 14px solid #fff;
}
@keyframes blaseRein {
  from { transform: scale(0.4); }
  60% { transform: scale(1.08); }
  to { transform: scale(1); }
}

#aktion-partikel { position: absolute; inset: 0; pointer-events: none; z-index: 450; overflow: hidden; }
.partikel {
  position: absolute;
  font-size: clamp(16px, 3.5vw, 30px);
  animation: partikelAuf 1.6s ease-out forwards;
}
@keyframes partikelAuf {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-90px) scale(1.15) rotate(14deg); opacity: 0; }
}
.partikel.flieg { animation: partikelFlieg 0.9s ease-in forwards; }
@keyframes partikelFlieg {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  25% { opacity: 1; }
  100% { transform: translate(var(--zx), var(--zy)) scale(1); opacity: 0; }
}
.welt-einhorn.mampft { animation: mampfen 0.9s ease 2; }
@keyframes mampfen {
  0%, 100% { transform: translate(-50%, -100%) scale(1); }
  50% { transform: translate(-50%, -100%) scale(1.06) rotate(-2deg); }
}
.welt-einhorn.freut { animation: freuHuepfen 0.5s ease 3; }
@keyframes freuHuepfen {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, -118%) rotate(3deg); }
}
.welt-einhorn.glitzert { animation: glitzern 1.8s ease 1; }
@keyframes glitzern {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 14px #ffd9f2); }
}

/* ---------- Gefallen-Abfrage + Erfolge ---------- */
#gefallen-frage {
  background: #ffffffb0;
  border-radius: 18px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
#gefallen-titel { font-weight: 700; color: var(--text-hell); font-size: clamp(0.9rem, 2.1vw, 1.05rem); }
#gefallen-buttons { display: flex; gap: 14px; }
.gefallen-btn {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  width: clamp(56px, 9vw, 68px);
  height: clamp(56px, 9vw, 68px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 rgba(90,74,106,0.12);
  display: grid;
  place-items: center;
  filter: grayscale(0.3);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.gefallen-btn:hover { transform: scale(1.1); filter: none; }
.gefallen-btn.gewaehlt { filter: none; transform: scale(1.18); background: #fff3d6; }

#erfolge-inhalt {
  width: min(680px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#erfolge-inhalt .einstellung-block { width: 100%; }
.analyse-liste { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.analyse-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: 700;
}
.analyse-zeile .a-name { flex: 1; }
.analyse-zeile .a-wert { color: var(--text-hell); font-size: 0.92em; white-space: nowrap; }
.analyse-balken {
  flex: 0 0 clamp(70px, 18vw, 140px);
  height: 12px;
  background: #eee6f5;
  border-radius: 999px;
  overflow: hidden;
}
.analyse-balken > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tuerkis), var(--gruen)); }
.analyse-zeile.schwach .analyse-balken > div { background: linear-gradient(90deg, var(--gelb), var(--rot-weich)); }
.analyse-hinweis { color: var(--text-hell); font-weight: 600; text-align: center; padding: 4px; }
.meilenstein-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: 700;
}
.meilenstein-zeile.erledigt { background: #e9fbef; }
.meilenstein-zeile.offen { opacity: 0.75; }
.level-balken {
  width: 100%;
  height: 16px;
  background: #eee6f5;
  border-radius: 999px;
  overflow: hidden;
}
#level-balken-fuellung {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gelb), var(--pink));
  border-radius: 999px;
  transition: width 0.6s ease;
}
#erfolge-level-text { font-weight: 700; color: var(--text-hell); text-align: center; }

#onb-emoji { font-size: clamp(2.6rem, 8vw, 4rem); }
#onb-name, #einstellung-name {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  border-radius: 14px;
  border: 3px solid var(--pink);
  outline: none;
  width: min(320px, 90%);
  color: var(--text);
  background: #fff;
  -webkit-user-select: text;
  user-select: text;
}

#naechstes-ziel {
  background: #ffffffc9;
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 700;
  color: var(--lila-dunkel);
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  text-align: center;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
}
#naechstes-ziel:empty { display: none; }

/* ---------- Einhorn-Welt ---------- */
#welt-kopf { display: flex; align-items: center; justify-content: center; gap: 12px; }
#welt-kopf .screen-titel { margin: clamp(4px, 1vh, 10px) 0; }
#welt-kopf .klein-btn { margin: 0; }

/* Glücks-Leiste über der Welt: kompakt, damit die Szene groß bleibt */
#glueck-oben { justify-content: center; margin: 0 0 6px; }
#glueck-oben .glueck-karte { padding: 4px 10px; }

#welt-fuss { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
#welt-fuss .klein-btn { margin: 0; }

#welt-szene {
  position: relative;
  width: min(100%, calc((100vh - 320px) * 16 / 9));
  min-height: 200px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  background: linear-gradient(#bfe9ff, #d8f5d0);
}
#welt-hintergrund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#welt-objekte { position: absolute; inset: 0; }
.welt-objekt {
  position: absolute;
  transform: translate(-50%, -100%);
  transition: transform 0.2s ease;
  cursor: grab;
  touch-action: none;
}
.welt-objekt.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 10px 16px rgba(90,74,106,0.35)) brightness(1.05);
  z-index: 420 !important;
  animation: none;
}
.welt-objekt img { -webkit-user-drag: none; }
.welt-objekt img { width: 100%; height: auto; display: block; }
.welt-objekt.wackelt { animation: weltWackeln 0.5s ease; }
@keyframes weltWackeln {
  25% { transform: translate(-50%, -100%) rotate(-6deg) scale(1.06); }
  75% { transform: translate(-50%, -100%) rotate(6deg) scale(1.06); }
}
.welt-einhorn { animation: einhornWippen 3s ease-in-out infinite; }
@keyframes einhornWippen {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, -104%); }
}
.einhorn-accessoire { position: absolute; cursor: grab; touch-action: none; z-index: 5; }
.einhorn-accessoire.dragging { cursor: grabbing; filter: drop-shadow(0 6px 10px rgba(90,74,106,0.4)); }
.einhorn-accessoire img { width: 100%; pointer-events: none; -webkit-user-drag: none; }

#welt-funkeln { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 350; }
.funkel {
  position: absolute;
  font-size: 18px;
  animation: funkeln 2.6s ease-in-out infinite;
  opacity: 0;
}
@keyframes funkeln {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

#welt-leisten {
  width: min(900px, 100%);
  margin: 10px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#welt-hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 700;
  color: var(--text-hell);
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  text-align: center;
}
.welt-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffffb0;
  border-radius: 18px;
  padding: 8px 12px;
}
.leiste-titel { font-weight: 800; font-size: clamp(0.85rem, 2vw, 1rem); white-space: nowrap; }
.welt-leiste > div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px;
}
.mini-chip {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 rgba(90,74,106,0.1);
  display: grid;
  place-items: center;
  border: 3px solid transparent;
  overflow: hidden;
}
.mini-chip img { width: 85%; height: 85%; object-fit: contain; }
.mini-chip.aktiv { border-color: var(--pink); background: #fff0f7; }
.mini-chip { position: relative; }
.mini-chip.anderswo { opacity: 0.5; filter: grayscale(0.35); }
.chip-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 0.85rem;
  background: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(90,74,106,0.3);
  opacity: 1;
  filter: none;
}

/* ---------- Shop ---------- */
#shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 2px 10px;
  justify-content: center;
  scrollbar-width: none;
}
#shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 8px clamp(10px, 1.6vw, 16px);
  border-radius: 999px;
  background: #ffffffd9;
  font-weight: 800;
  font-size: clamp(0.85rem, 1.9vw, 1.05rem);
  color: var(--text);
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
  white-space: nowrap;
}
.shop-tab.aktiv {
  background: linear-gradient(180deg, var(--pink), var(--pink-dunkel));
  color: #fff;
}

#shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(10px, 1.8vw, 16px);
  padding: 4px 2px 10px;
}
@media (min-width: 900px) { #shop-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

.shop-karte {
  background: var(--karte);
  border-radius: 20px;
  box-shadow: var(--schatten);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.shop-karte .bild {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fff3fa, #f1ecff);
  border-radius: 14px;
  overflow: hidden;
}
.shop-karte .bild img { width: 92%; height: 92%; object-fit: contain; }
.shop-karte .bild .ersatz-emoji { font-size: 3rem; }
.shop-name { font-weight: 800; font-size: clamp(0.95rem, 2.1vw, 1.1rem); line-height: 1.15; }
.shop-info { font-weight: 600; font-size: 0.8rem; color: var(--text-hell); line-height: 1.3; }
.shop-preis { font-weight: 800; color: #2fa3d7; }
.shop-kauf-btn {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  font-weight: 800;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: #fff;
  background: linear-gradient(180deg, var(--gruen), var(--gruen-dunkel));
  box-shadow: 0 4px 0 rgba(90,74,106,0.12);
}
.shop-kauf-btn:disabled { background: linear-gradient(180deg, #d8d2e6, #bdb4d1); pointer-events: none; }
.shop-karte.gekauft .bild { background: linear-gradient(160deg, #e8fff0, #d5f7e2); }
.shop-besitz { font-weight: 800; color: var(--gruen-dunkel); min-height: 46px; display: grid; place-items: center; }
.shop-sperre { font-weight: 700; color: var(--text-hell); font-size: 0.9rem; }
.shop-karte.gesperrt { opacity: 0.72; }
.shop-karte.neu-gekauft { animation: kaufFeier 0.6s ease; }
@keyframes kaufFeier { 30% { transform: scale(1.08) rotate(-2deg); } 60% { transform: scale(1.04) rotate(2deg); } }

/* ---------- Einstellungen ---------- */
#screen-einstellungen { align-items: center; gap: 12px; }
.einstellung-block {
  width: min(560px, 100%);
  background: #ffffffb0;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.einstellung-titel { font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.2rem); color: var(--lila-dunkel); }
#statistik-text { font-weight: 700; color: var(--text-hell); text-align: center; line-height: 1.6; }
#btn-reset { color: #c76a7a; opacity: 0.8; }

/* ---------- Konfetti ---------- */
#konfetti-ebene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 975; /* Konfetti rieselt ÜBER der Feier - nicht dahinter */
}
.konfetti {
  position: absolute;
  top: -30px;
  font-size: 22px;
  animation: konfettiFall linear forwards;
}
@keyframes konfettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}

/* ---------- Feier-Overlay (Level-Up / großer Kauf) ---------- */
#feier-overlay, #modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(90, 60, 120, 0.45);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  /* Muss über den Welt-Figuren (bis ~500) UND den Fach-Overlays (950)
     liegen - sonst stehen Bagger & Co mitten im Feier-Fenster */
  z-index: 970;
  padding: 16px;
}
#feier-box, #modal-box {
  background: var(--creme);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: clamp(16px, 3vw, 28px);
  width: min(560px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: feierRein 0.4s ease;
}
@keyframes feierRein {
  from { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.05); }
  to { transform: scale(1); opacity: 1; }
}
#feier-video {
  width: 100%;
  max-height: min(52vh, 380px);
  border-radius: 18px;
  object-fit: cover;
  background: #ffe3f1;
}
#feier-video:not(.da) { display: none; }
#feier-text {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--pink-dunkel);
  text-align: center;
}
#feier-box .gross-btn { width: auto; min-width: 200px; }

#modal-text { font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 800; text-align: center; white-space: pre-line; }
#modal-input {
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
  padding: 10px 16px;
  border-radius: 14px;
  border: 3px solid var(--lila);
  outline: none;
  width: min(320px, 90%);
  color: var(--text);
  background: #fff;
  -webkit-user-select: text;
  user-select: text;
}
#modal-input.versteckt { display: none; }
#modal-buttons { display: flex; gap: 12px; width: 100%; }
#modal-buttons .gross-btn { flex: 1; }

/* ---------- Bedürfnisse, Glück, Events ---------- */
.denkblase {
  position: absolute;
  top: -18%;
  right: -12%;
  width: 42%;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50% 50% 50% 12%;
  display: grid;
  place-items: center;
  font-size: clamp(16px, 3.2vw, 30px);
  box-shadow: 0 4px 12px rgba(90,74,106,0.3);
  animation: denkPuls 1.6s ease-in-out infinite;
  cursor: pointer;
  z-index: 6;
}
@keyframes denkPuls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
.saison-flocke {
  position: absolute;
  top: -30px;
  animation: flockeFall linear infinite;
  opacity: 0.85;
}
@keyframes flockeFall {
  to { transform: translateY(125%) rotate(300deg); }
}
#welt-funkeln .saison-flocke { height: 0; }
#event-banner {
  background: linear-gradient(90deg, #ffe9a8, #ffd1ea);
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 800;
  color: #7a4a12;
  font-size: clamp(0.85rem, 2.1vw, 1.05rem);
  text-align: center;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
  animation: chipPulse 2.4s ease infinite;
}
#beduerfnis-hinweis {
  background: #ffffffd9;
  border: 2px dashed var(--pink);
  border-radius: 999px;
  padding: 7px 18px;
  font-weight: 700;
  color: var(--pink-dunkel);
  font-size: clamp(0.85rem, 2.1vw, 1rem);
  text-align: center;
}
.welt-leiste-glueck > div { flex-wrap: wrap; overflow-x: visible; }
.glueck-karte {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
  min-width: 150px;
}
.glueck-karte.traurig { background: #fff3f4; }
.glueck-karte img { width: 34px; height: 34px; object-fit: contain; }
.glueck-info { flex: 1; min-width: 70px; }
.glueck-name { font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.glueck-balken { height: 8px; background: #eee6f5; border-radius: 999px; overflow: hidden; margin-top: 2px; }
.glueck-balken > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--gelb)); }
.glueck-wert { font-size: 0.78rem; font-weight: 800; color: var(--text-hell); }

/* ---------- Streak-Belohnungs-Popup ---------- */
#streak-popup {
  position: fixed;
  right: clamp(8px, 3vw, 30px);
  bottom: clamp(8px, 3vh, 26px);
  width: clamp(150px, 26vw, 230px);
  background: var(--karte);
  border: 4px solid var(--gelb);
  border-radius: 20px;
  padding: 8px;
  z-index: 940; /* über den Welt-Figuren (200+y) */
  box-shadow: 0 14px 40px rgba(90,74,106,0.35);
  animation: feierRein 0.35s ease;
  cursor: pointer;
}
#streak-video { width: 100%; border-radius: 14px; display: block; background: #fff5fa; }
#streak-popup-text {
  text-align: center;
  font-weight: 800;
  color: #f0952e;
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding-top: 4px;
}

/* ---------- 3D-Galerie ---------- */
#dreid-overlay {
  position: fixed;
  inset: 0;
  background: rgba(90, 60, 120, 0.55);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 600;
  padding: 14px;
}
#dreid-box {
  background: var(--creme);
  border-radius: 26px;
  padding: clamp(14px, 3vw, 24px);
  width: min(600px, 96vw);
  max-height: 94vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: feierRein 0.4s ease;
}
#dreid-titel { font-family: "Baloo 2", sans-serif; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; color: var(--lila-dunkel); }
#dreid-canvas {
  width: min(520px, 88vw);
  aspect-ratio: 1;
  border-radius: 18px;
  background: linear-gradient(160deg, #fdeffa, #e8f4ff);
  touch-action: none;
}
#dreid-hinweis { font-weight: 700; color: var(--text-hell); font-size: 0.9rem; }
#dreid-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- Kleine Höhen (Tablet quer / Laptop klein) ---------- */
@media (max-height: 560px) {
  #home-einhorn { width: clamp(120px, 24vh, 200px); }
  .home-buttons { flex-direction: row; }
  .home-buttons .gross-btn { flex: 1; min-height: 52px; font-size: 1rem; }
  #keypad { grid-template-columns: repeat(6, minmax(64px, 92px)); }
  .screen-titel { margin: 4px 0; }
}


/* ============================================================
   Update 8: Schwierigkeit, Kind-Profil, Welten-Galerie
   ============================================================ */

/* ---------- Schwierigkeits-Wahl (Kind) ---------- */
/* Update 24.1: Hochformat ist jetzt erlaubt (Papas Bestellung) - der
   Dreh-Hinweis bleibt als schlafendes Element im HTML, wird aber nie
   mehr eingeblendet. Die Hochformat-Feinheiten regelt der Block ganz
   unten in dieser Datei ("Handy-Hochformat"). */
#dreh-hinweis { display: none !important; }
.dreh-karte {
  background: #fff;
  border-radius: 24px;
  padding: 28px 22px;
  max-width: 340px;
  font-weight: 800;
  color: #5a4a6a;
  font-size: 1.05rem;
  line-height: 1.5;
  box-shadow: 0 14px 40px rgba(123, 79, 201, 0.25);
}
.dreh-emoji { font-size: 52px; margin-bottom: 10px; }

#grad-wahl-zeile, #phase-wahl-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: clamp(8px, 1.6vh, 16px);
}
.grad-wahl-titel { font-weight: 800; color: var(--text-hell); font-size: clamp(0.85rem, 2vw, 1rem); }
.grad-wahl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.grad-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
  font-size: clamp(0.82rem, 1.9vw, 0.98rem);
  color: var(--text-hell);
  box-shadow: 0 4px 0 rgba(90,74,106,0.1);
}
.grad-btn .grad-emoji { font-size: 1.15em; }
.grad-btn.aktiv { color: #fff; transform: scale(1.05); }
.grad-btn.grad-auto.aktiv { background: linear-gradient(180deg, var(--lila), var(--lila-dunkel)); }
.grad-btn.grad-einfach.aktiv { background: linear-gradient(180deg, #8fe0a8, var(--gruen-dunkel)); }
.grad-btn.grad-mittel.aktiv { background: linear-gradient(180deg, var(--gelb), #e8a020); color: #6b4400; }
.grad-btn.grad-schwer.aktiv { background: linear-gradient(180deg, #ffa06b, #e2612a); }
.grad-btn.grad-einstein.aktiv { background: linear-gradient(180deg, #7d6bd9, #4a3a9e); }

/* ---------- Abzeichen an der Aufgabe ---------- */
.grad-abzeichen {
  align-self: center;
  border-radius: 999px;
  padding: 3px 14px;
  font-weight: 800;
  font-size: clamp(0.72rem, 1.7vw, 0.88rem);
  letter-spacing: 0.2px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.12);
  white-space: nowrap;
}
.grad-abzeichen.grad-einfach { background: #dff5e6; color: #2c7a4b; }
.grad-abzeichen.grad-mittel { background: #fff1cc; color: #8a5c00; }
.grad-abzeichen.grad-schwer { background: #ffe0d1; color: #a84211; }
.grad-abzeichen.grad-einstein { background: #e6e0ff; color: #4a3a9e; }

/* ---------- Eltern-Block: Kind-Profil ---------- */
.eltern-block { background: #fbf5ff; border: 2px dashed rgba(139,108,224,0.35); }
.eltern-feld { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); flex-wrap: wrap; }
.eltern-feld input[type="date"],
#onb-geburtstag, #profil-geburtstag, #einstellung-geburtstag {
  font-family: inherit;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 700;
  color: var(--text);
  background: #fff;
  border: 3px solid rgba(167,139,250,0.4);
  border-radius: 16px;
  padding: 8px 14px;
  min-height: 48px;
}

/* ---------- Profil nachtragen ---------- */
#profil-emoji { font-size: clamp(2.4rem, 8vw, 4rem); }
#profil-text { font-weight: 700; color: var(--text); text-align: center; max-width: 560px; }

/* ---------- Welten-Galerie auf der Startseite ---------- */
#welten-galerie-block { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.galerie-titel { font-weight: 800; color: var(--text-hell); font-size: clamp(0.85rem, 2vw, 1rem); }
#welten-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  width: min(760px, 100%);
}
.welt-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--karte);
  border-radius: 18px;
  padding: 8px 6px 10px;
  box-shadow: 0 4px 0 rgba(90,74,106,0.1), 0 8px 18px rgba(167,139,250,0.14);
  transition: transform 0.15s ease;
}
.welt-karte:hover { transform: translateY(-3px) scale(1.02); }
.welt-karte-bild {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #f6ecff, #e6f6ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.welt-karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.welt-karte-offen .welt-karte-bild img { object-fit: contain; padding: 4px; }
.welt-karte-schloss {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  background: rgba(90, 74, 106, 0.22);
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.welt-karte-name { font-weight: 800; font-size: clamp(0.76rem, 1.8vw, 0.92rem); color: var(--text); text-align: center; line-height: 1.15; }
.welt-karte-status { font-weight: 700; font-size: clamp(0.68rem, 1.6vw, 0.8rem); color: var(--text-hell); }
.welt-karte-gesperrt { filter: saturate(0.85); }
.welt-karte-gesperrt .welt-karte-status { color: var(--lila-dunkel); }

@media (max-height: 560px) {
  #welten-galerie-block { display: none; }
}

/* ---------- Challenge-Chronik (20 Wochen auf einen Blick) ---------- */
#challenge-historie { margin-top: 14px; }
#challenge-historie-balken {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 8px 0 6px;
}
.chron-kaestchen {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  box-shadow: 0 2px 0 rgba(90,74,106,0.15);
}
.chron-geschafft { background: linear-gradient(180deg, var(--gruen), var(--gruen-dunkel)); }
.chron-aktuell { background: linear-gradient(180deg, #63c8ff, #3a86d9); outline: 3px solid #ffd166; animation: chronPuls 1.6s ease-in-out infinite; }
.chron-verpasst { background: #e3dcef; color: var(--text-hell); }
.chron-zukunft { background: #f4f0fa; color: #c9c2d8; }
@keyframes chronPuls { 50% { transform: scale(1.1); } }
#challenge-historie-text { text-align: center; font-weight: 700; color: var(--text-hell); }

/* ---------- Lese-Geschichten ---------- */
#geschichten-liste {
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.geschichte-karte {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #fff;
  border-radius: 20px;
  padding: 12px 18px;
  box-shadow: 0 4px 0 rgba(90,74,106,0.08);
  transition: transform 0.12s ease;
}
.geschichte-karte:hover { transform: translateY(-2px); }
.geschichte-karte.gelesen { background: #f2fbf4; }
.geschichte-karte .g-emoji { font-size: 2rem; }
.geschichte-karte .g-mitte { flex: 1; display: flex; flex-direction: column; }
.geschichte-karte .g-titel { font-weight: 800; font-size: 1.1rem; color: var(--lila-dunkel); }
.geschichte-karte .g-info { color: var(--text-hell); font-size: 0.9rem; font-weight: 700; }
.geschichte-karte .g-status { font-weight: 800; color: #2fa3d7; white-space: nowrap; }
.geschichte-karte.gelesen .g-status { color: var(--gruen-dunkel); }

#geschichte-kopf { display: flex; align-items: center; justify-content: center; gap: 12px; }
#geschichte-kopf .klein-btn { margin: 0; }
#geschichte-text {
  width: min(680px, 100%);
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  padding: clamp(16px, 3vw, 30px);
  box-shadow: var(--schatten);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  line-height: 1.65;
}
#geschichte-text p { margin-bottom: 1em; }
#geschichte-text p:last-child { margin-bottom: 0; }
#geschichte-fuss {
  width: min(680px, 100%);
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#geschichte-belohnung-hinweis { text-align: center; font-weight: 700; color: var(--text-hell); }
.kat-geschichten { background: linear-gradient(180deg, #ffb17a, #f08a3c); }

/* ---------- Tages-Quest + Anmelde-Serie ---------- */
#quest-block {
  width: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 10px 16px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
}
#quest-zeile { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 800; }
#quest-text { color: var(--lila-dunkel); }
#login-serie { color: #e8720c; }
#quest-balken { height: 12px; background: #f0eaf8; border-radius: 999px; margin: 6px 0 4px; overflow: hidden; }
#quest-balken-fuellung { height: 100%; width: 0; background: linear-gradient(90deg, var(--gelb), #f0a734); border-radius: 999px; transition: width 0.4s ease; }
#quest-status { font-weight: 700; color: var(--text-hell); font-size: 0.92rem; }

/* ---------- Anmelde-Kalender ---------- */
#login-kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 340px; }
.kal-tag {
  aspect-ratio: 1;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  background: #f4f0fa;
  color: #c9c2d8;
}
.kal-tag.da { background: linear-gradient(180deg, var(--gruen), var(--gruen-dunkel)); color: #fff; }
.kal-tag.heute { outline: 3px solid var(--gelb); }

/* ---------- Duell ---------- */
#duell-banner {
  text-align: center;
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 18px;
  margin: 0 auto 8px;
  width: fit-content;
  max-width: 100%;
}
#duell-banner.duell-s0 { background: #f3e3ff; color: #8b3fd1; }
#duell-banner.duell-s1 { background: #dcedff; color: #2a6bd1; }
#duell-gegner {
  width: 100%;
  min-height: 50px;
  border: 3px solid #e7def5;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  padding: 6px 14px;
}

/* ---------- Schreiben üben ---------- */
#schreiben-ziel { text-align: center; font-weight: 800; font-size: 1.3rem; color: var(--lila-dunkel); }
#schreiben-canvas-box {
  position: relative;
  width: min(360px, 86vw);
  aspect-ratio: 1;
  margin: 10px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--schatten);
  overflow: hidden;
}
#schreiben-canvas-box canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#schreiben-canvas { touch-action: none; cursor: crosshair; }
#schreiben-knoepfe { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
#schreiben-knoepfe .gross-btn { width: auto; min-width: 170px; }
#schreiben-feedback { text-align: center; font-weight: 800; color: var(--pink-dunkel); min-height: 28px; margin-top: 8px; }

/* ---------- Themenwahl im Onboarding ---------- */
#onb-thema-wahl { display: flex; gap: 12px; }
.onb-thema-karte {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 20px;
  background: #f4f0fa;
  font-weight: 800;
  color: var(--text-hell);
  border: 4px solid transparent;
}
.onb-thema-karte .ot-emoji { font-size: 2.4rem; }
.onb-thema-karte.aktiv { background: #fff; border-color: var(--gelb); color: var(--text); transform: scale(1.03); box-shadow: var(--schatten); }

/* ---------- Bau-Akademie: blau/gelbes Design ---------- */
/* ---------- Zoo-Akademie: Wald- und Naturtöne für die Großen ---------- */
body.thema-zoo {
  --pink: #3fa860;
  --pink-dunkel: #2b7d46;
  --lila: #5a8f56;
  --lila-dunkel: #3c6b3a;
  --tuerkis: #d99a3c;
  --tuerkis-dunkel: #b0731a;
  --gruen: #7ed99a;
  --gruen-dunkel: #4cbf72;
  --creme: #f4f9f2;
  --text: #37483a;
  --text-hell: #7f9484;
  --schatten: 0 6px 0 rgba(55, 72, 58, 0.12), 0 10px 24px rgba(76, 145, 92, 0.18);
  background: linear-gradient(160deg, #d8efd8 0%, #ecf6e8 45%, #f4e7c8 100%);
}
body.thema-zoo .app-titel {
  background: linear-gradient(90deg, #2b7d46, #3fa860, #b0731a);
  -webkit-background-clip: text;
  background-clip: text;
}
body.thema-zoo #tb-titel { color: var(--pink-dunkel); }

/* Zoo-Check-Overlay */
/* ---------- Funkel-Schach ---------- */
.schach-menue { display: flex; flex-direction: column; gap: 8px; width: min(460px, 100%); margin: 0 auto; }
.schach-menue-titel { font-weight: 800; font-size: 1.15rem; text-align: center; margin-bottom: 4px; }
.schach-stufe-btn {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px;
  border: 3px solid #e6dff2; background: #fff; border-radius: 14px;
  padding: 10px 14px; font: inherit; cursor: pointer; text-align: left;
}
.schach-stufe-btn:hover { border-color: #c9b8e8; transform: scale(1.01); }
.schach-duo-btn { border-color: #b985e0; background: #faf3ff; }
.ss-emoji { font-size: 1.7rem; }
.ss-name { font-weight: 800; }
.ss-tipp { color: #8a7ba8; font-weight: 700; font-size: 0.82rem; }
#schach-status {
  font-weight: 800; text-align: center; margin: 6px auto 10px; min-height: 1.3em;
  background: rgba(255, 255, 255, 0.75); border-radius: 999px;
  padding: 8px 20px; width: fit-content; max-width: 94%;
  box-shadow: 0 3px 10px rgba(90, 60, 130, 0.14);
}
#schach-brett {
  display: grid; grid-template-columns: repeat(8, 1fr);
  width: min(92vw, 480px); aspect-ratio: 1; margin: 0 auto;
  border: 6px solid #8a6aa8; border-radius: 12px; overflow: hidden;
  touch-action: manipulation;
}
.schach-feld {
  border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  display: grid; place-items: center; position: relative;
}
.sf-hell { background: #f6ecff; }
.sf-dunkel { background: #c9aee6; }
.schach-figur { font-size: clamp(1.2rem, 4.6vw, 2rem); line-height: 1; pointer-events: none; }
.sfig-mein { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.sfig-gegner {
  filter: grayscale(0.55) brightness(0.62) drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
.sf-gewaehlt { outline: 4px solid #ff8ac2; outline-offset: -4px; z-index: 2; }
.sf-ziel::after {
  content: ""; position: absolute; width: 26%; height: 26%;
  border-radius: 50%; background: rgba(70, 190, 120, 0.75);
}
.sf-letzter { box-shadow: inset 0 0 0 4px rgba(255, 200, 60, 0.65); }
.sf-tipp { animation: schachTipp 0.7s ease-in-out 3; }
@keyframes schachTipp { 50% { box-shadow: inset 0 0 0 6px rgba(80, 170, 255, 0.9); } }
#schach-leiste { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.schach-statistik {
  border: 3px solid #e6dff2; background: #faf7ff; border-radius: 16px;
  padding: 12px 16px; margin-top: 4px;
}
.sstat-kopf { font-weight: 800; margin-bottom: 6px; }
.sstat-gross { font-weight: 700; color: #7a4fa8; margin-bottom: 8px; line-height: 1.45; }
.sstat-zeile { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 0.92rem; line-height: 1.6; color: #5a4a76; }
#schach-geschlagen {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 auto 8px; width: min(96vw, 720px);
}
.sg-zeile {
  background: #f4edfc; border: 2px solid #ddc9f0; border-radius: 999px;
  padding: 5px 14px; font-size: 0.92rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(90, 60, 130, 0.1);
}
.sg-zeile.sg-gegner { opacity: 0.82; }
.sg-figuren { letter-spacing: 2px; }
#schach-3d { width: min(96vw, 720px); margin: 0 auto; touch-action: none; }
#schach-3d canvas { display: block; border-radius: 18px; filter: drop-shadow(0 10px 22px rgba(90, 60, 130, 0.22)); }
/* Vollbild-Modus: Brett füllt den Schirm, Höhe ist der Chef.
   .schach-pseudovoll ist der CSS-Ersatz, wenn echtes Fullscreen
   von der Umgebung verboten wird. */
#screen-spiel:fullscreen,
#screen-spiel.schach-pseudovoll {
  background: linear-gradient(180deg, #ffeef8 0%, #eee3ff 55%, #e2f2ff 100%);
  overflow-y: auto;
  padding: 12px 0 20px;
}
#screen-spiel.schach-pseudovoll {
  position: fixed; inset: 0; z-index: 1200; margin: 0; display: block;
}
#screen-spiel:fullscreen #schach-3d,
#screen-spiel.schach-pseudovoll #schach-3d {
  width: min(94vw, calc((100vh - 150px) / 0.95), 1100px);
}
#screen-spiel:fullscreen #schach-brett,
#screen-spiel.schach-pseudovoll #schach-brett {
  width: min(92vw, calc(100vh - 170px), 900px);
}

/* ---------- Tipp-Trainer ---------- */
#tipp-trainer {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(60, 70, 120, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#tipp-trainer.versteckt { display: none; }
#tipp-trainer-box {
  background: #fff; border-radius: 22px; padding: 20px;
  width: min(560px, 100%); box-shadow: 0 14px 40px rgba(0,0,0,0.25); text-align: center;
}
#tt-titel { font-weight: 800; font-size: 1.15rem; }
#tt-stand { color: #8a7ba8; font-weight: 700; margin: 6px 0; min-height: 1.2em; }
#tt-vorlage {
  font-family: "Consolas", "Courier New", monospace; font-size: 1.25rem; font-weight: 700;
  background: #f4f0fb; border-radius: 12px; padding: 12px; margin-bottom: 10px;
  letter-spacing: 1px; overflow-wrap: anywhere;
}
#tt-eingabe {
  width: 100%; box-sizing: border-box; font-family: "Consolas", "Courier New", monospace;
  font-size: 1.15rem; padding: 10px 12px; border: 3px solid #c9b8e8; border-radius: 12px;
}
#tt-ergebnis { font-weight: 800; margin-top: 10px; min-height: 1.3em; }

/* ---------- Eltern-Ideen-Kiste ---------- */
#elternideen-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
#elternideen-inhalt { display: flex; flex-direction: column; gap: 8px; width: min(720px, 100%); margin: 0 auto; }
.ei-liste { margin: 4px 0; padding-left: 20px; line-height: 1.55; font-weight: 600; }
.ei-zeile { line-height: 1.55; font-weight: 600; margin: 3px 0; }
.ei-preis { color: #2c9db0; font-weight: 800; }
#lernfach-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
/* ---------- Schach-Schule: animierte Mini-Bretter ---------- */
.sdemo-brett {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 1;
  margin: 10px auto 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 5px solid #8a6aa8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(90, 60, 130, 0.2);
}
.sdemo-hell { background: #f6ecff; }
.sdemo-dunkel { background: #c9aee6; }
.sdemo-gruen { box-shadow: inset 0 0 0 3px rgba(70, 190, 120, 0.85); }
.sdemo-rot { box-shadow: inset 0 0 0 3px rgba(230, 80, 60, 0.85); animation: sdemoPuls 1.1s ease-in-out infinite; }
@keyframes sdemoPuls { 50% { box-shadow: inset 0 0 0 6px rgba(230, 80, 60, 0.5); } }
.sdemo-figur {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: grid;
  place-items: center;
  font-size: clamp(1.1rem, 6vw, 1.9rem);
  line-height: 1;
  transition: left 0.55s ease, top 0.55s ease;
  pointer-events: none;
  z-index: 2;
}
.sdemo-weiss { color: #fff; text-shadow: 0 0 3px #6a4a8a, 0 2px 3px rgba(0,0,0,0.4); }
.sdemo-schwarz { color: #34204a; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }
.sdemo-weg { transition: transform 0.4s ease, opacity 0.4s ease; transform: scale(0.1) rotate(60deg); opacity: 0; }
.sdemo-funkel { animation: sdemoFunkel 0.7s ease; }
@keyframes sdemoFunkel { 40% { transform: scale(1.5); filter: brightness(1.6); } }

/* ---------- Ferienkalender: Countdown-Held + Karten-Gitter ---------- */
.ferien-held {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #b985e0, #7a4fa8);
  border-radius: 22px; padding: 16px 22px; margin: 10px 0 14px;
  color: #fff; box-shadow: 0 10px 26px rgba(122, 79, 168, 0.35);
}
.ferien-held-jetzt { background: linear-gradient(135deg, #58b368, #2e8b57); box-shadow: 0 10px 26px rgba(46, 139, 87, 0.35); }
.fh-emoji { font-size: 3.4rem; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.fh-titel { font-weight: 800; opacity: 0.9; }
.fh-zahl { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.1; text-shadow: 0 2px 4px rgba(0,0,0,0.22); }
.fh-unter { font-weight: 700; opacity: 0.92; }
.ferien-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ferien-karte {
  border: 3px solid #e6dff2; background: #fff; border-radius: 18px;
  padding: 12px 10px 10px; font: inherit; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 4px; transition: transform 0.12s;
}
.ferien-karte:hover { transform: scale(1.03); }
.ferien-karte.ferien-lang { background: #faf5ff; border-color: #cdb2ec; }
.ferien-karte.ferien-bald { border-color: #f0c95a; background: #fffaea; }
.ferien-karte.ferien-jetzt { border-color: #57b26a; background: #eefaf0; }
.fk-emoji { font-size: 2.2rem; }
.fk-name { font-weight: 800; line-height: 1.25; }
.fk-datum { color: #8a7ba8; font-weight: 700; font-size: 0.86rem; line-height: 1.35; }
.fk-fuss { margin-top: auto; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.fk-dauer, .fk-chip {
  border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; font-weight: 800;
}
.fk-dauer { background: #efe7fa; color: #7a4fa8; }
.fk-chip { background: #e2f0fb; color: #2d5f9e; }
.ferien-jetzt .fk-chip { background: #57b26a; color: #fff; }
.ferien-bald .fk-chip { background: #f0c95a; color: #6a5200; }

/* Notruf-Tafel im Erste-Hilfe-Fach */
.notruf-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.notruf-karte {
  border-radius: 18px; padding: 14px 8px 12px; text-align: center; color: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}
.notruf-nummer { font-size: 2.4rem; font-weight: 900; line-height: 1.05; letter-spacing: 2px; text-shadow: 0 2px 3px rgba(0,0,0,0.25); }
.notruf-name { font-weight: 800; margin-top: 4px; font-size: 0.95rem; }
.notruf-rot { background: linear-gradient(160deg, #f26a55, #c93a28); }
.notruf-blau { background: linear-gradient(160deg, #5a92d9, #2d5f9e); }
.notruf-orange { background: linear-gradient(160deg, #f5a04a, #d0731f); }
.notruf-gruen { background: linear-gradient(160deg, #58b368, #2e7d4a); }
/* Ausklappbare Lied-Strophen */
.lied-strophen { margin-top: 6px; }
.lied-strophen.versteckt { display: none; }
.lied-strophe { line-height: 1.55; margin-top: 10px; }
.lied-strophe-nr { font-weight: 800; color: #8a5fb8; font-size: 0.88rem; }
#lernfach-inhalt { display: flex; flex-direction: column; gap: 8px; width: min(620px, 100%); margin: 0 auto; }

/* ---------- Sport-Studio & Kochen ---------- */
#sport-chips, #kochen-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0;
}
.sport-chip {
  border: 3px solid #e6dff2; background: #faf7ff; border-radius: 999px;
  padding: 8px 16px; font: inherit; font-weight: 800; cursor: pointer;
}
.sport-chip.aktiv { background: #b985e0; border-color: #9a5fd0; color: #fff; }
#sport-liste, #kochen-inhalt {
  display: flex; flex-direction: column; gap: 8px;
  width: min(620px, 100%); margin: 0 auto;
}
.sport-karte {
  display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px;
  border: 3px solid #e6dff2; background: #fff; border-radius: 16px;
  padding: 10px 14px; font: inherit; cursor: pointer; text-align: left;
}
.sport-karte:hover { border-color: #c9b8e8; transform: scale(1.01); }
.sport-karte.gemacht { background: #f0faf1; border-color: #b7e2bd; }
.sport-emoji { font-size: 1.8rem; }
.sport-name { font-weight: 800; }
.sport-menge { color: #8a7ba8; font-weight: 700; font-size: 0.9rem; }
.sport-juwelen { font-weight: 800; color: #2c9db0; font-size: 0.9rem; }
#kochen-grundregel {
  background: #fdeaea; border: 3px solid #f0b9b0; border-radius: 16px;
  padding: 12px 16px; font-weight: 800; text-align: center; color: #a34434;
  width: min(620px, 100%); margin: 0 auto 4px;
}
.kochen-regel {
  background: #fff; border: 3px solid #e6dff2; border-radius: 14px;
  padding: 10px 14px; font-weight: 700; line-height: 1.45;
}
#sport-detail, #kochen-detail {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(70, 110, 80, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#sport-detail.versteckt, #kochen-detail.versteckt { display: none; }
#sport-detail-box, #kochen-detail-box {
  background: #fff; border-radius: 22px; padding: 20px;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}
#sport-detail-titel, #kochen-detail-titel { font-weight: 800; font-size: 1.25rem; text-align: center; }
#sport-detail-schritte, #kochen-detail-schritte { line-height: 1.6; font-weight: 600; padding-left: 22px; }
#kochen-detail-zutaten { line-height: 1.55; font-weight: 600; padding-left: 22px; }
#kochen-detail-zutaten:empty, #kochen-detail-tipp:empty, #kochen-detail-meta:empty, #kochen-detail-achtung:empty { display: none; }
#sport-detail-menge, #kochen-detail-meta { font-weight: 800; text-align: center; margin: 6px 0; }
#sport-detail-tipp, #kochen-detail-tipp { background: #fff8e1; border-radius: 12px; padding: 8px 12px; font-weight: 700; margin-top: 6px; }
#kochen-detail-achtung {
  background: #fdeaea; border-radius: 12px; padding: 8px 12px;
  font-weight: 800; color: #a34434; margin: 8px 0; text-align: center;
}
.kochen-eltern-schritt { color: #a34434; font-weight: 800; }
#btn-sport-ok:disabled { opacity: 0.6; cursor: default; }

/* ---------- Rechenart-Wahl (Rechnen üben) ---------- */
#rechnen-wahl {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(60, 90, 130, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#rechnen-wahl.versteckt { display: none; }
#rechnen-wahl-box {
  background: #fff; border-radius: 22px; padding: 20px;
  width: min(420px, 100%); box-shadow: 0 14px 40px rgba(0,0,0,0.25); text-align: center;
}
#rechnen-wahl-titel { font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; }
#rechnen-wahl-knoepfe { display: flex; flex-direction: column; gap: 8px; }
#rechnen-wahl-knoepfe .gross-btn { max-width: none; }

/* ---------- Kapitel-Quiz zu den Abenteuern ---------- */
#story-quiz {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(90, 60, 120, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#story-quiz.versteckt { display: none; }
#story-quiz-box {
  background: #fff; border-radius: 22px; padding: 18px;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25); text-align: center;
}
#sq-titel { font-weight: 800; font-size: 1.2rem; }
#sq-stand { color: #8a7ba8; font-weight: 700; margin: 6px 0 10px; min-height: 1.2em; }
#sq-frage { font-weight: 800; font-size: 1.05rem; line-height: 1.45; margin-bottom: 12px; }
#sq-antworten { display: flex; flex-direction: column; gap: 8px; }
.sq-antwort {
  border: 3px solid #e6dff2; background: #faf7ff; border-radius: 14px;
  padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer;
  text-align: left; line-height: 1.35; transition: transform 0.1s;
}
.sq-antwort:hover:not(:disabled) { transform: scale(1.02); border-color: #c9b8e8; }
.sq-antwort:disabled { cursor: default; opacity: 0.85; }
.sq-antwort.sq-richtig { background: #e2f4e5; border-color: #57b26a; color: #2b7d46; opacity: 1; }
.sq-antwort.sq-falsch { background: #fdeaea; border-color: #d97565; color: #b04a3c; opacity: 1; }
.sq-geschenk-bild { max-height: 180px; margin: 6px auto; display: block; }
.sq-text { font-weight: 700; line-height: 1.5; margin-top: 6px; }
.kapitel-karte.quiz-karte { border: 3px dashed #c9a5e8; background: #faf3ff; }
.kapitel-karte.quiz-karte.gesperrt { border-style: dashed; }
.thema-bau .kapitel-karte.quiz-karte { border-color: #9ec1e8; background: #f2f8ff; }
.thema-zoo .kapitel-karte.quiz-karte { border-color: #9ed4a8; background: #f2fbf3; }

#zoo-check {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(45, 75, 50, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#zoo-check.versteckt { display: none; }
#zoo-check-box {
  background: #fff; border-radius: 22px; padding: 18px;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25); text-align: center;
}
#zoo-check-sterne { font-size: 2rem; letter-spacing: 4px; }
#zoo-check-titel { font-weight: 800; margin: 8px 0 12px; line-height: 1.45; }
#zoo-check-liste { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.zoo-check-zeile { border-radius: 12px; padding: 8px 12px; font-weight: 700; line-height: 1.4; }
.zoo-check-zeile.zoo-gut { background: #e2f4e5; color: #2b7d46; }
.zoo-check-zeile.zoo-schlecht { background: #fdeaea; color: #b04a3c; }
.zoo-check-zeile.zoo-kassa { background: #fff3d6; color: #8c6a1e; text-align: center; }
#zoo-check-fakt { margin-top: 12px; }

/* Artenschutz-Overlay */
#artenschutz {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(45, 75, 50, 0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#artenschutz.versteckt { display: none; }
#artenschutz-box {
  background: #fff; border-radius: 22px; padding: 18px;
  width: min(620px, 100%); max-height: 88vh; overflow-y: auto; text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}
#artenschutz-titel { font-weight: 900; font-size: 1.3rem; color: #2b7d46; margin-bottom: 8px; }
#artenschutz-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.arten-karte {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center;
  background: #f4f9f2; border-radius: 16px; padding: 12px; text-align: left;
}
.arten-karte img { width: 76px; height: 100px; object-fit: contain; }
.arten-karte.arten-voll { background: #e2f4e5; }
.arten-name { font-weight: 800; color: #2b7d46; }
.arten-text { font-size: 0.85rem; line-height: 1.4; color: var(--text); margin: 4px 0 6px; }
.arten-balken { height: 12px; background: #dce9dc; border-radius: 999px; overflow: hidden; }
.arten-balken div { height: 100%; background: linear-gradient(90deg, #7ed99a, #2b7d46); }
.arten-stand { font-size: 0.8rem; font-weight: 700; margin-top: 4px; color: var(--text-hell); }
.arten-spenden { white-space: nowrap; }
@media (max-width: 520px) { .arten-karte { grid-template-columns: 1fr; text-align: center; } .arten-karte img { margin: 0 auto; } }

body.thema-bau {
  --pink: #4d9fe8;
  --pink-dunkel: #2a6bd1;
  --lila: #5b8def;
  --lila-dunkel: #3a5fd0;
  --tuerkis: #ffc93c;
  --tuerkis-dunkel: #e8a200;
  --gruen: #7ed99a;
  --gruen-dunkel: #4cbf72;
  --creme: #f4f8ff;
  --text: #3d4a63;
  --text-hell: #8593ad;
  --schatten: 0 6px 0 rgba(61, 74, 99, 0.12), 0 10px 24px rgba(74, 128, 214, 0.18);
  background: linear-gradient(160deg, #d6e8ff 0%, #e9f2ff 45%, #ffedc2 100%);
}
body.thema-bau .app-titel {
  background: linear-gradient(90deg, #2a6bd1, #4d9fe8, #e8a200);
  -webkit-background-clip: text;
  background-clip: text;
}
body.thema-bau #tb-titel { color: var(--pink-dunkel); }
body.thema-bau .kat-mathe { background: linear-gradient(180deg, #63c8ff, #3a86d9); }
body.thema-bau .kat-deutsch { background: linear-gradient(180deg, #ffc93c, #e8a200); }
body.thema-bau .kat-geschichten { background: linear-gradient(180deg, #8fb7f0, #5b8def); }
body.thema-bau #home-einhorn img, body.thema-bau #home-einhorn video { animation-name: baustelleWackeln; }
@keyframes baustelleWackeln {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
body.thema-bau .funkel { filter: hue-rotate(160deg); }
body.thema-bau .glueck-karte, body.thema-bau .geschichte-karte { border-left: 5px solid var(--gelb); }
body.thema-bau #quest-balken-fuellung { background: linear-gradient(90deg, #4d9fe8, #2a6bd1); }
body.thema-bau .stufe-btn.aktiv { background: linear-gradient(180deg, #ffc93c, #f0a734); color: #6b4a00; }
body.thema-bau #welt-szene { outline: 6px dashed rgba(232, 162, 0, 0.35); outline-offset: -6px; }

/* ---------- Flaggen als echte Bilder (Windows 10 kennt keine Flaggen-Emojis) ---------- */
img.flagge {
  height: 1.2em;
  vertical-align: -0.2em;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(90, 74, 106, 0.25);
}
.antwort-btn.mit-flagge { display: grid; place-items: center; }
.antwort-btn.mit-flagge img.flagge { height: 52px; border-radius: 8px; }
#frage-emoji img.flagge { height: 72px; border-radius: 10px; box-shadow: 0 3px 0 rgba(90, 74, 106, 0.2); }
.kat-flagge { height: 1em; vertical-align: -0.12em; border-radius: 4px; }

/* ---------- Mal-Studio ---------- */
#malen-kopf { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
#malen-kopf .klein-btn { margin: 0; }
#malen-werkzeuge {
  width: min(1024px, 100%);
  margin: 0 auto 8px;
  background: #fff;
  border-radius: 20px;
  padding: 10px 14px;
  box-shadow: 0 4px 0 rgba(90,74,106,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#stift-leiste { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stift-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.5rem;
  background: #f4f0fa;
  display: grid;
  place-items: center;
}
.stift-btn.aktiv { background: linear-gradient(180deg, var(--gelb), #ffb84d); transform: scale(1.08); box-shadow: 0 3px 0 rgba(90,74,106,0.15); }
.stift-trenner { width: 2px; height: 34px; background: #eee5f8; border-radius: 2px; margin: 0 4px; }
#stift-groesse { flex: 1; min-width: 110px; max-width: 220px; accent-color: var(--pink-dunkel); height: 34px; }
#farb-leiste { display: flex; gap: 6px; flex-wrap: wrap; }
.farb-knopf {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 0 rgba(90,74,106,0.2);
}
.farb-knopf.aktiv { transform: scale(1.22); border-color: var(--gelb); }
.farb-regenbogen { background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red); }
#malen-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
#malen-aktionen .klein-btn { margin: 0; min-height: 38px; padding: 6px 12px; }
#malen-box {
  position: relative;
  width: min(1024px, 100%);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--schatten);
  background: repeating-conic-gradient(#f6f1fb 0 25%, #ffffff 0 50%) 0 0/28px 28px;
}
#malen-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#mal-canvas { touch-action: none; cursor: crosshair; }
#malen-leer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-hell);
  background: rgba(255,255,255,0.82);
  padding: 20px;
}
#mal-galerie { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(1024px,100%); margin: 6px auto; }
.kunst-rahmen {
  position: relative;
  width: 118px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 3px 0 rgba(90,74,106,0.15);
  background: #fff;
}
.kunst-rahmen img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.kunst-loeschen {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #d9534f;
  font-size: 0.75rem;
  font-weight: 800;
}
#mal-picker {
  position: fixed;
  inset: 0;
  background: rgba(90,60,120,0.5);
  backdrop-filter: blur(4px);
  z-index: 620;
  display: grid;
  place-items: center;
  padding: 14px;
}
#mal-picker-box {
  background: var(--creme);
  border-radius: 24px;
  padding: 16px;
  width: min(680px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}
#mal-picker-titel { text-align: center; font-weight: 800; color: var(--lila-dunkel); margin-bottom: 10px; }
#mal-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  overflow-y: auto;
}
.picker-kachel {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.1);
  display: grid;
  place-items: center;
}
.picker-kachel img { max-width: 100%; max-height: 100%; object-fit: contain; }
.picker-kachel:hover { transform: scale(1.05); }
.picker-weiss { font-weight: 800; color: var(--text-hell); font-size: 0.8rem; text-align: center; }
body.thema-bau #malen-box { background: repeating-conic-gradient(#eef4fd 0 25%, #ffffff 0 50%) 0 0/28px 28px; }

/* ---------- Rechen-Blitz ---------- */
#blitz-kopf { display: flex; align-items: center; gap: 12px; width: min(600px,100%); margin: 0 auto 10px; font-weight: 800; font-size: 1.3rem; }
#blitz-punkte { color: var(--pink-dunkel); min-width: 40px; text-align: center; font-size: 1.6rem; }
#blitz-zeit { color: var(--text-hell); min-width: 34px; }
#blitz-zeit-balken { flex: 1; height: 14px; background: #f0eaf8; border-radius: 999px; overflow: hidden; }
#blitz-zeit-fuellung { height: 100%; width: 100%; background: linear-gradient(90deg, #63c8ff, #3a86d9); transition: width 1s linear; }
#blitz-frage { text-align: center; font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 800; color: var(--lila-dunkel); margin: 12px 0 16px; }
#blitz-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(520px,100%); margin: 0 auto; }
.blitz-antwort { min-height: 74px; border-radius: 20px; background: #fff; font-size: 1.8rem; font-weight: 800; color: var(--text); box-shadow: var(--schatten); }
.blitz-antwort.falsch { background: #ffe3e3; }

/* ---------- Sticker-Album ---------- */
#album-kopf { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; }
#album-fortschritt { font-weight: 800; color: var(--lila-dunkel); text-align: center; }
#album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; width: min(900px,100%); margin: 0 auto; }
.album-feld { aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 2px 0 rgba(90,74,106,0.1); position: relative; display: grid; place-items: center; }
.album-feld img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) brightness(0.25) opacity(0.35); }
.album-feld.da img { filter: none; }
.album-anzahl { position: absolute; bottom: 2px; right: 4px; background: var(--gelb); border-radius: 999px; font-size: 0.7rem; font-weight: 800; padding: 1px 6px; }
#paeckchen-show { position: fixed; inset: 0; background: rgba(90,60,120,0.55); backdrop-filter: blur(4px); z-index: 640; display: grid; place-items: center; padding: 16px; }
#paeckchen-karten { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.paeckchen-karte { width: 150px; background: #fff; border-radius: 18px; padding: 12px; text-align: center; box-shadow: var(--schatten); animation: karteFlipp 0.6s ease backwards; }
.paeckchen-karte img { width: 100%; height: 100px; object-fit: contain; }
.pk-name { font-weight: 800; color: var(--lila-dunkel); margin-top: 6px; font-size: 0.95rem; }
.pk-status { font-weight: 700; color: #2fa3d7; font-size: 0.85rem; }
@keyframes karteFlipp { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Funkel-Klavier ---------- */
#klavier-tasten { position: relative; display: flex; gap: 8px; justify-content: center; width: min(760px,100%); margin: 14px auto; height: clamp(200px, 40vh, 320px); }
.klavier-taste { flex: 1; border-radius: 0 0 22px 22px; box-shadow: 0 6px 0 rgba(90,74,106,0.25); display: grid; place-items: end center; padding-bottom: 14px; font-size: 1.8rem; transition: transform 0.1s ease; touch-action: none; }
.klavier-taste.gedrueckt { transform: translateY(6px); filter: brightness(1.15); }
.klavier-note { position: absolute; bottom: 60%; font-size: 1.6rem; animation: noteFlug 1.3s ease-out forwards; pointer-events: none; }
@keyframes noteFlug { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-140px) rotate(20deg); opacity: 0; } }

/* ---------- Abenteuer-Story ---------- */
#story-kapitel-liste { display: flex; flex-direction: column; gap: 10px; width: min(720px,100%); margin: 0 auto; }
.kapitel-karte { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 10px; text-align: left; box-shadow: 0 4px 0 rgba(90,74,106,0.08); }
.kapitel-karte.gesperrt { opacity: 0.6; }
.kapitel-karte.gelesen { background: #f2fbf4; }
.kk-bild { position: relative; width: 132px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #efe6ff; flex: 0 0 auto; }
.kk-bild img { width: 100%; height: 100%; object-fit: cover; }
.kk-schloss { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.8rem; background: rgba(255,255,255,0.55); }
.kk-nr { font-weight: 800; color: #2fa3d7; font-size: 0.85rem; }
.kk-titel { font-weight: 800; color: var(--lila-dunkel); font-size: 1.05rem; }
#kapitel-kopf { display: flex; align-items: center; justify-content: center; gap: 12px; }
#kapitel-kopf .klein-btn { margin: 0; }
#kapitel-bild-box { width: min(760px,100%); margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: var(--schatten); }
#kapitel-bild { width: 100%; display: block; }
#kapitel-text { width: min(680px,100%); margin: 12px auto 0; background: #fff; border-radius: 20px; padding: clamp(14px,3vw,26px); font-size: clamp(1.05rem,2.4vw,1.25rem); line-height: 1.65; box-shadow: 0 4px 0 rgba(90,74,106,0.08); }

/* ---------- Kinder-Profile ---------- */
#profile-liste { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.profil-karte { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border-radius: 24px; padding: 20px 26px; font-weight: 800; font-size: 1.15rem; color: var(--text); box-shadow: var(--schatten); min-width: 140px; }
.profil-karte:hover { transform: translateY(-4px) scale(1.03); }
.profil-emoji { font-size: 3rem; }

/* ---------- Aufgeräumtes Hauptmenü + Welten-Popup ---------- */
.home-reihe2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-reihe2 .gross-btn { min-height: 52px; font-size: clamp(0.95rem, 2.2vw, 1.15rem); padding: 10px 12px; }
@media (min-width: 820px) and (min-aspect-ratio: 1/1) {
  .home-reihe2 { grid-template-columns: repeat(4, 1fr); }
}
#themen-popup {
  position: fixed;
  inset: 0;
  background: rgba(90, 60, 120, 0.5);
  backdrop-filter: blur(4px);
  z-index: 650;
  display: grid;
  place-items: center;
  padding: 14px;
}
#themen-box {
  background: var(--creme);
  border-radius: 26px;
  padding: 18px;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--schatten);
}
#themen-titel { text-align: center; font-weight: 800; font-size: 1.3rem; color: var(--lila-dunkel); }
#themen-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#themen-karten .welt-karte { width: auto; }
.welt-karte-aktiv { outline: 4px solid var(--gelb); }
#themen-teaser { display: flex; flex-direction: column; gap: 8px; }
.teaser-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 6px 12px;
  font-weight: 700;
  color: var(--text-hell);
  box-shadow: 0 2px 0 rgba(90,74,106,0.08);
  text-align: left;
}
.teaser-chip img { width: 52px; height: 32px; object-fit: cover; border-radius: 8px; filter: saturate(0.6); }
#themen-box .klein-btn { margin: 0 auto; }

/* ================= Update 11: Lern-Studios ================= */
.studio-start { width: min(480px, 100%); margin: 0 auto; text-align: center; }
.studio-erklaerung { font-weight: 800; font-size: 1.12rem; margin: 8px 0; }
.studio-fortschritt { text-align: center; font-weight: 800; color: var(--text-hell); margin-bottom: 6px; }
.studio-frage {
  text-align: center;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 800;
  margin: 4px auto 10px;
  width: min(680px, 100%);
}
.studio-antworten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(560px, 100%);
  margin: 10px auto;
}
.studio-antwort {
  font-family: inherit;
  font-size: clamp(1.05rem, 2.8vw, 1.4rem);
  font-weight: 800;
  padding: 16px 10px;
  border: 3px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12);
}
.studio-antwort:active { transform: translateY(2px); }
.studio-antwort.richtig { background: #d3f6d8; border-color: #4caf6f; }
.studio-antwort.falsch { background: #ffd9de; border-color: #e26a7c; }

/* Uhrzeit-Schule */
#uhr-anzeige { display: flex; justify-content: center; margin: 6px 0; }
#uhr-anzeige svg { width: min(260px, 62vw); height: auto; filter: drop-shadow(0 4px 8px rgba(90,74,106,0.18)); }
#uhr-stellen-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
#uhr-stellen-knoepfe .stell-btn {
  font-family: inherit; font-size: 1.05rem; font-weight: 800;
  padding: 12px 16px; border: 3px solid rgba(0,0,0,0.08); border-radius: 14px;
  background: #fff; color: var(--text); cursor: pointer; box-shadow: 0 3px 0 rgba(90,74,106,0.12);
}

/* Uhren-Spielplatz */
#uhr-spielplatz { text-align: center; width: min(560px, 100%); margin: 0 auto; }
#spielplatz-tageszeit { font-weight: 900; font-size: 1.1rem; color: var(--lila-dunkel, #7a4fb0); margin-bottom: 4px; }
#spielplatz-uhr svg { width: min(240px, 58vw); height: auto; filter: drop-shadow(0 4px 8px rgba(90,74,106,0.18)); }
.spd-gross { display: block; font-weight: 900; font-size: 2rem; color: var(--pink-dunkel, #c2478f); font-variant-numeric: tabular-nums; }
.spd-klein { display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-hell); margin-top: 2px; }
#spielplatz-worte { background: #fff; border-radius: 14px; padding: 10px 14px; margin: 10px auto; font-size: 1.05rem; box-shadow: 0 2px 0 rgba(90,74,106,0.12); }
.spd-zusatz { display: block; font-size: 0.85rem; color: var(--text-hell); font-weight: 700; margin-top: 3px; }
#spielplatz-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Einmaleins-Führerschein */
#schein-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(560px, 100%);
  margin: 10px auto;
}
.schein-karte {
  font-family: inherit; cursor: pointer; text-align: center;
  border: 3px dashed rgba(0,0,0,0.15); border-radius: 16px;
  padding: 14px 6px; background: rgba(255,255,255,0.7); color: var(--text);
}
.schein-karte .schein-zahl { font-size: 1.7rem; font-weight: 900; display: block; }
.schein-karte .schein-info { font-size: 0.8rem; font-weight: 700; color: var(--text-hell); }
.schein-karte.hat {
  border: 3px solid #f0b428; background: linear-gradient(135deg, #fff6d8, #ffe9a8);
  box-shadow: 0 3px 0 rgba(160,120,20,0.25);
}

/* Ansage-Trainer */
#ansage-eingabe {
  display: block; width: min(560px, 92%); margin: 14px auto;
  font-family: inherit; font-size: 1.3rem; font-weight: 700; text-align: center;
  padding: 14px 12px; border: 3px solid var(--lila, #b48ad6); border-radius: 16px; color: var(--text);
  background: #fff;
}
#ansage-auswertung { text-align: center; font-size: 1.25rem; font-weight: 800; margin: 10px auto; width: min(640px, 100%); }
#ansage-auswertung .ansage-gut { color: #2f9e56; }
#ansage-auswertung .ansage-soll { display: block; margin-top: 6px; color: var(--text); background: #fff; border-radius: 12px; padding: 8px; }
#ansage-auswertung .diff-fehl { color: #d94a60; text-decoration: underline; }

/* Einkaufs-Rechnen */
#geld-kasse {
  text-align: center; font-size: 1.35rem; font-weight: 900; margin: 6px auto;
  background: #fff; border-radius: 14px; padding: 10px; width: min(360px, 92%);
  box-shadow: 0 3px 0 rgba(90,74,106,0.12);
}
#geld-muenzen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: min(620px, 100%); margin: 8px auto; }
.geld-knopf {
  font-family: inherit; font-weight: 900; cursor: pointer; border: none; color: #4a3a1a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(90,74,106,0.25);
}
.geld-knopf:active { transform: translateY(2px); }
.geld-knopf.muenze { border-radius: 50%; width: 62px; height: 62px; font-size: 0.95rem; }
.geld-knopf.kupfer { background: radial-gradient(circle at 30% 30%, #e8a87c, #b96f3d); color: #fff; }
.geld-knopf.gold { background: radial-gradient(circle at 30% 30%, #ffe9a0, #d9a92f); }
.geld-knopf.zweifarbig { background: radial-gradient(circle at 50% 50%, #ffe9a0 0 46%, #cfd6dd 47% 100%); }
.geld-knopf.schein { border-radius: 8px; width: 88px; height: 48px; font-size: 1rem; color: #fff; }
.geld-knopf.s5 { background: linear-gradient(135deg, #9aa7b5, #6e7f92); }
.geld-knopf.s10 { background: linear-gradient(135deg, #e88f8f, #c65656); }
.geld-knopf.s20 { background: linear-gradient(135deg, #7fb6e0, #4a7fb5); }
.geld-knopf.s50 { background: linear-gradient(135deg, #f0b46e, #d18a2c); }
#geld-aktionen { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 8px 0; }
#geld-aktionen .gross-btn { max-width: 260px; }

/* Spiegel & Muster */
#geo-flaeche { display: flex; justify-content: center; margin: 8px 0; }
.geo-grid { display: grid; gap: 5px; }
.geo-zelle {
  width: clamp(34px, 8vw, 48px); height: clamp(34px, 8vw, 48px);
  border-radius: 8px; border: 2px solid rgba(0,0,0,0.12); background: #fff; cursor: pointer; padding: 0;
}
.geo-zelle.voll { background: var(--lila, #b48ad6); border-color: rgba(0,0,0,0.2); }
.geo-zelle.fix { cursor: default; }
.geo-zelle.achse { background: repeating-linear-gradient(45deg, #ffe9a8 0 6px, #fff6d8 6px 12px); border-style: dashed; cursor: default; }
.geo-form { display: inline-block; width: 34px; height: 34px; vertical-align: middle; }
.geo-form.kreis { border-radius: 50%; }
.geo-form.quadrat { border-radius: 6px; }
.geo-form.dreieck { width: 0; height: 0; background: none !important; border-left: 17px solid transparent; border-right: 17px solid transparent; border-bottom: 32px solid; border-radius: 0; }
.geo-reihe { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.geo-frageplatz { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 2px dashed rgba(0,0,0,0.25); border-radius: 8px; font-weight: 900; font-size: 1.2rem; }

/* Eltern-Aufträge */
#auftrag-liste { display: flex; flex-direction: column; gap: 12px; width: min(620px, 100%); margin: 10px auto; }
.auftrag-karte {
  background: #fff; border-radius: 18px; padding: 14px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12); border-left: 8px solid var(--tuerkis, #57c4b8);
}
.auftrag-karte.gemeldet { border-left-color: #f0b428; }
.auftrag-karte.fertig { border-left-color: #4caf6f; opacity: 0.75; }
.auftrag-text { font-weight: 800; font-size: 1.1rem; }
.auftrag-lohn { font-weight: 900; color: var(--text-hell); margin: 4px 0 8px; }
.auftrag-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
#auftrag-verwaltung { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.auftrag-zeile { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 8px 10px; }
.auftrag-zeile span { flex: 1; font-weight: 700; }

/* Eltern-PIN */
#pin-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(60, 40, 80, 0.55);
  display: flex; align-items: center; justify-content: center;
}
#pin-overlay.versteckt { display: none; }
#pin-box {
  background: #fff; border-radius: 22px; padding: 18px 22px; text-align: center;
  width: min(320px, 92vw); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
#pin-titel { font-weight: 900; font-size: 1.15rem; margin-bottom: 6px; }
#pin-anzeige { font-size: 2rem; letter-spacing: 10px; min-height: 44px; font-weight: 900; }
#pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
#pin-pad button {
  font-family: inherit; font-size: 1.35rem; font-weight: 900; padding: 12px 0;
  border: none; border-radius: 14px; background: #f2ecfa; color: var(--text); cursor: pointer;
  box-shadow: 0 2px 0 rgba(90,74,106,0.15);
}
#pin-pad button:active { transform: translateY(2px); }

/* Spielzeit-Sperre */
#zeit-sperre {
  position: fixed; inset: 0; z-index: 9990;
  background: linear-gradient(180deg, #2c2450, #4a3a78);
  display: flex; align-items: center; justify-content: center;
}
#zeit-sperre.versteckt { display: none; }
#zeit-sperre-box { text-align: center; color: #fff; padding: 20px; width: min(460px, 92vw); }
#zeit-sperre-box img { width: min(220px, 50vw); border-radius: 20px; margin-bottom: 12px; }
#zeit-sperre-text { font-size: 1.25rem; font-weight: 800; margin-bottom: 16px; }

/* Urkunden */
#urkunden-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.urkunde-karte {
  font-family: inherit; cursor: pointer; text-align: center;
  border: 3px solid #f0b428; border-radius: 14px; padding: 10px 6px;
  background: linear-gradient(135deg, #fff6d8, #ffe9a8); color: var(--text);
}
.urkunde-karte .u-emoji { font-size: 1.6rem; display: block; }
.urkunde-karte .u-name { font-weight: 800; font-size: 0.85rem; }
.urkunde-karte .u-datum { font-size: 0.72rem; color: var(--text-hell); }
.urkunde-karte.grau {
  border: 3px dashed rgba(0,0,0,0.15); background: rgba(255,255,255,0.6);
  filter: grayscale(1); opacity: 0.7; cursor: default;
}

/* Jahreszeiten-Zauber */
#saison-ebene { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.saison-flocke {
  position: absolute; top: -40px; color: #fff;
  text-shadow: 0 1px 3px rgba(120,140,180,0.5);
  animation: saisonFall linear infinite;
}
@keyframes saisonFall {
  from { transform: translateY(-40px) rotate(0deg); }
  to { transform: translateY(105vh) rotate(280deg); }
}
.saison-ecke { position: absolute; font-size: clamp(26px, 5vw, 44px); opacity: 0.9; }
.saison-schwebt { animation: saisonSchweben 4.5s ease-in-out infinite; }
@keyframes saisonSchweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
#saison-ei {
  position: absolute; pointer-events: auto; cursor: pointer; border: none; background: none;
  font-size: clamp(30px, 6vw, 46px); filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
  animation: saisonSchweben 3s ease-in-out infinite;
}
#saison-flagge { position: absolute; width: clamp(40px, 8vw, 64px); border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

/* ---------- Formel-Schatzkammer ---------- */
#formeln-bereiche { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 8px; }
#formeln-liste { display: flex; flex-direction: column; gap: 12px; width: min(720px, 100%); margin: 8px auto; }
.formel-karte {
  font-family: inherit; text-align: left; cursor: pointer;
  background: #fff; border: none; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12); color: var(--text);
}
.formel-karte:active { transform: translateY(1px); }
.formel-titel { font-weight: 900; font-size: 1.1rem; color: var(--lila-dunkel, #7a4fb0); }
.formel-formel {
  font-weight: 900; font-size: clamp(1.05rem, 2.6vw, 1.35rem); text-align: center;
  background: #f6f1fc; border-radius: 12px; padding: 8px 10px; margin: 8px 0;
  color: var(--pink-dunkel, #c2478f); overflow-x: auto;
}
body.thema-bau .formel-formel { background: #eef4fd; color: #2b6cb0; }
body.thema-bau .formel-profi { border-top-color: #d5e3f5; }
body.thema-bau #element-fakt { background: #eef4fd; }
body.thema-bau .el-zeile { border-bottom-color: #e0eaf7; }
body.thema-bau #pin-pad button { background: #e3effc; }
.formel-text { line-height: 1.5; font-size: 0.98rem; }
.formel-profi {
  margin-top: 8px; font-size: 0.85rem; line-height: 1.45; color: var(--text-hell);
  border-top: 1px dashed #e4d9f0; padding-top: 6px;
}

/* ---------- Rekorde der Erde + Noten-Schule + Weltkarte ---------- */
#erde-chips, #noten-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 8px; }
#erde-liste { display: flex; flex-direction: column; gap: 8px; width: min(720px, 100%); margin: 8px auto; }
.erde-zeile {
  font-family: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: minmax(150px, 1.2fr) auto; grid-template-rows: auto auto; column-gap: 12px;
  background: #fff; border: none; border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.1); color: var(--text);
}
.erde-name { font-weight: 900; font-size: 1rem; }
.erde-wert { font-weight: 900; color: var(--pink-dunkel, #c2478f); text-align: right; white-space: nowrap; }
.erde-extra { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-hell); margin-top: 2px; }
#noten-liste { display: flex; flex-direction: column; gap: 12px; width: min(680px, 100%); margin: 8px auto; }
.noten-karte {
  font-family: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: none; border-radius: 18px; padding: 12px 16px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12); color: var(--text);
}
.noten-karte:active { transform: translateY(1px); }
.noten-karte svg { flex: 0 0 auto; }
.noten-mitte { flex: 1; }
.noten-name { font-weight: 900; font-size: 1.3rem; color: var(--lila-dunkel, #7a4fb0); }
.noten-sprich { font-weight: 800; color: var(--text-hell); font-size: 0.95rem; }
.noten-tipp { font-size: 0.9rem; line-height: 1.45; margin-top: 3px; }
.noten-hoer { font-size: 0.82rem; font-weight: 800; color: var(--pink-dunkel, #c2478f); margin-top: 4px; }
#weltkarte-halter { position: relative; width: min(760px, 100%); margin: 6px auto; }
#weltkarte-canvas { width: 100%; border-radius: 16px; box-shadow: 0 4px 0 rgba(90,74,106,0.15); cursor: grab; touch-action: none; display: block; }
#weltkarte-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
#weltkarte-zoom .klein-btn { padding: 8px 12px; font-size: 1.05rem; }
#weltkarte-info { min-height: 28px; font-size: 1.02rem; }
#weltkarte-info img.flagge { width: 34px; height: 23px; vertical-align: -5px; border-radius: 4px; }
#weltkarte-legende { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px auto 4px; width: min(720px, 100%); }
.karten-legende-chip { font-size: 0.85rem; font-weight: 800; border-radius: 999px; padding: 4px 12px; color: #3a3050; box-shadow: 0 1.5px 0 rgba(90,74,106,0.15); }
#weltkarte-legende .analyse-hinweis { flex-basis: 100%; }

/* ---------- Österreich-Kunde ---------- */
#oesterreich-chips, #deutschland-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 8px; }
#oesterreich-liste, #deutschland-liste { display: flex; flex-direction: column; gap: 10px; width: min(700px, 100%); margin: 8px auto; }
.bl-karte {
  font-family: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border: none; border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12); color: var(--text);
}
.bl-karte:active { transform: translateY(1px); }
.bl-kurz {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.15rem;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.bl-name { font-weight: 900; font-size: 1.12rem; color: var(--lila-dunkel, #7a4fb0); }
.bl-daten { font-weight: 800; font-size: 0.88rem; color: var(--text-hell); margin: 2px 0 4px; }
.bl-fakt { font-size: 0.9rem; line-height: 1.45; }
.bl-stadt { font-size: 0.86rem; line-height: 1.45; margin-top: 6px; background: #f6f1fc; border-radius: 10px; padding: 6px 9px; }
body.thema-bau .bl-stadt { background: #eef4fd; }

/* ---------- Hero-Knopf: Lernen & Sammeln ---------- */
.hero-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: min(640px, 94%); min-height: 96px; margin: 10px auto 4px;
  font-size: 1.6rem; padding: 24px 20px;
  animation: heroFunkeln 2.8s ease-in-out infinite;
}
.hero-sub {
  font-size: 0.84rem; font-weight: 700; opacity: 0.92; letter-spacing: 0.2px;
}
@keyframes heroFunkeln {
  0%, 100% { box-shadow: 0 6px 0 rgba(90, 74, 106, 0.18), 0 0 0 rgba(242, 145, 194, 0); transform: scale(1); }
  50% { box-shadow: 0 6px 0 rgba(90, 74, 106, 0.18), 0 0 26px rgba(242, 145, 194, 0.55); transform: scale(1.015); }
}
body.thema-bau .hero-btn { animation-name: heroFunkelnBau; }
@keyframes heroFunkelnBau {
  0%, 100% { box-shadow: 0 6px 0 rgba(61, 74, 99, 0.18), 0 0 0 rgba(77, 159, 232, 0); transform: scale(1); }
  50% { box-shadow: 0 6px 0 rgba(61, 74, 99, 0.18), 0 0 26px rgba(77, 159, 232, 0.55); transform: scale(1.015); }
}

/* ---------- Ferien + Home-Ereignisse ---------- */
.erde-zeile.ferien-bald { border-left: 6px solid #4caf6f; }
#home-ereignisse {
  font-family: inherit; cursor: pointer; display: block;
  width: min(620px, 94%); margin: 6px auto 0;
  background: #fff; border: 2px dashed var(--tuerkis, #57c4b8); border-radius: 999px;
  padding: 8px 16px; font-weight: 800; font-size: 0.92rem; color: var(--text);
  box-shadow: 0 2px 0 rgba(90,74,106,0.1);
}
#home-ereignisse:active { transform: translateY(1px); }
#home-ereignisse.versteckt { display: none; }

/* ---------- Weihnachts-Liederbuch ---------- */
#lieder-liste { display: flex; flex-direction: column; gap: 14px; width: min(640px, 100%); margin: 8px auto; }
.lied-karte {
  background: #fff; border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12); border-top: 6px solid #4caf6f;
}
.lied-titel { font-weight: 900; font-size: 1.15rem; color: #2f7a45; }
.lied-herkunft { font-size: 0.8rem; font-weight: 800; color: var(--text-hell); margin-bottom: 6px; }
.lied-fakt { font-size: 0.88rem; line-height: 1.45; background: #fff6d8; border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; }
.lied-text { font-size: 0.98rem; line-height: 1.6; font-style: italic; color: var(--text); }
.lied-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Meine Schule: Stundenplan + Termine ---------- */
#schule-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
#stundenplan-tabelle { overflow-x: auto; padding-bottom: 6px; }
.sp-grid {
  display: grid; grid-template-columns: 74px repeat(5, minmax(96px, 1fr));
  gap: 5px; width: min(740px, 100%); margin: 0 auto; min-width: 580px;
}
.sp-zeitkopf {
  font-family: inherit; border: none; cursor: pointer; border-radius: 10px;
  background: rgba(255,255,255,0.65); padding: 3px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.sp-zeitkopf:active { transform: translateY(1px); }
.sp-zeit { font-size: 0.66rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.sp-zeit-leer { color: #c9bcd8; }
#termin-von, #termin-bis {
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  padding: 8px 10px; border: 2.5px solid #e4d9f0; border-radius: 12px; color: var(--text); background: #fff;
}
.sp-kopf {
  display: grid; place-items: center; font-weight: 900; color: var(--text-hell);
  font-size: 0.9rem; min-height: 30px;
}
.sp-kopf.sp-heute { color: var(--pink-dunkel, #c2478f); }
.sp-zelle {
  font-family: inherit; cursor: pointer; border: none; border-radius: 12px;
  background: #fff; min-height: 52px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.1); color: var(--text);
}
.sp-zelle:active { transform: translateY(1px); }
.sp-zelle.sp-leer { color: #c9bcd8; font-size: 1.3rem; font-weight: 900; background: rgba(255,255,255,0.6); }
.sp-zelle.sp-voll { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); box-shadow: 0 2.5px 0 rgba(60,45,80,0.22); }
.fach-chip-bunt { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.sp-zelle.sp-heute { outline: 2.5px solid var(--pink, #f291c2); }
.sp-emoji { font-size: 1.15rem; line-height: 1; }
.sp-fach { font-size: 0.68rem; font-weight: 800; text-align: center; line-height: 1.1; }
#fach-picker {
  position: fixed; inset: 0; z-index: 960; background: rgba(90,60,120,0.55);
  backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px;
}
#fach-picker.versteckt { display: none; }
#fach-picker-box { background: #fff; border-radius: 20px; padding: 16px; width: min(420px, 92vw); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
#fach-picker-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.fach-chip {
  font-family: inherit; font-weight: 800; font-size: 0.92rem; cursor: pointer;
  border: none; border-radius: 999px; padding: 9px 13px;
  background: #f2ecfa; color: var(--text); box-shadow: 0 2px 0 rgba(90,74,106,0.12);
}
.fach-chip:active { transform: translateY(2px); }
#stimmen-wahl {
  font-family: inherit; font-size: 0.95rem; font-weight: 700;
  padding: 9px 10px; border: 2.5px solid #e4d9f0; border-radius: 12px;
  color: var(--text); background: #fff;
}
#termin-titel, #termin-datum {
  display: block; width: 100%; font-family: inherit; font-size: 1rem; font-weight: 700;
  padding: 10px 12px; border: 2.5px solid #e4d9f0; border-radius: 12px; color: var(--text); background: #fff;
}
#termine-liste { display: flex; flex-direction: column; gap: 10px; width: min(620px, 100%); margin: 0 auto; }
.termin-karte {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.12); border-left: 7px solid #b8d8f0;
}
.termin-karte.naht { border-left-color: #f0b428; }
.termin-karte.bald { border-left-color: #e26a7c; }
.termin-emoji { font-size: 1.6rem; flex: 0 0 auto; }
.termin-mitte { flex: 1; }
.termin-titel { font-weight: 900; }
.termin-datum { font-size: 0.85rem; color: var(--text-hell); font-weight: 700; }
.termin-countdown {
  font-weight: 900; font-size: 0.85rem; background: #f2ecfa; border-radius: 999px;
  padding: 4px 10px; color: var(--lila-dunkel, #7a4fb0); white-space: nowrap;
}
.termin-karte.bald .termin-countdown { background: #ffd9de; color: #b03050; }
.termin-karte.naht .termin-countdown { background: #fff6d8; color: #a97812; }

/* ---------- Kunst-Stile im Mal-Studio ---------- */
.stil-karte {
  grid-column: 1 / -1; font-family: inherit; cursor: pointer; text-align: left;
  background: #fff; border: none; border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.12); color: var(--text);
}
.stil-karte:active { transform: translateY(1px); }
.stil-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.stil-emoji { font-size: 1.5rem; }
.stil-name { font-weight: 900; font-size: 1.08rem; color: var(--lila-dunkel, #7a4fb0); }
.stil-zeit { margin-left: auto; font-size: 0.78rem; font-weight: 800; color: var(--text-hell); }
.stil-text { font-size: 0.88rem; line-height: 1.45; }
.stil-tipp { font-size: 0.85rem; line-height: 1.4; margin-top: 6px; background: #fff6d8; border-radius: 10px; padding: 6px 9px; font-weight: 700; }

/* ---------- Spenden-Ecke ---------- */
#spenden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.spenden-karte {
  font-family: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: none; border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.12); color: var(--text);
}
.spenden-karte:active { transform: translateY(1px); }
.sp-emoji { font-size: 1.6rem; flex: 0 0 auto; }
.sp-text { flex: 1; font-size: 0.85rem; font-weight: 700; line-height: 1.35; }
.sp-betrag { font-weight: 900; color: var(--pink-dunkel, #c2478f); white-space: nowrap; }

/* ---------- Atom-Baukasten ---------- */
#atom-kopf { text-align: center; margin-bottom: 6px; }
#atom-name { font-weight: 900; font-size: 1.35rem; color: var(--lila-dunkel, #7a4fb0); }
#atom-daten { font-weight: 700; font-size: 0.95rem; color: var(--text-hell); }
#atom-halter { display: flex; justify-content: center; width: min(720px, 100%); margin: 0 auto; }
#atom-halter canvas { border-radius: 16px; background: radial-gradient(circle at 50% 40%, #2c2450, #14102a); box-shadow: 0 4px 0 rgba(90,74,106,0.2); max-width: 100%; touch-action: none; }
#atom-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0 4px; }
.atom-gruppe {
  display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px;
  padding: 6px 12px; font-weight: 800; box-shadow: 0 2px 0 rgba(90,74,106,0.12);
}
.atom-gruppe b { min-width: 34px; text-align: center; font-size: 1.15rem; color: var(--pink-dunkel, #c2478f); }
.atom-btn {
  font-family: inherit; width: 38px; height: 38px; border: none; border-radius: 50%;
  background: #f2ecfa; color: var(--lila-dunkel, #7a4fb0); font-size: 1.3rem; font-weight: 900; cursor: pointer;
  box-shadow: 0 2px 0 rgba(90,74,106,0.18);
}
.atom-btn:active { transform: translateY(2px); }
body.thema-bau .atom-btn { background: #e3effc; color: #2b6cb0; }

/* ---------- Funkel-Arcade (Mini-Spiele) ---------- */
#arcade-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px; width: min(760px, 100%); margin: 8px auto;
}
.arcade-karte {
  background: #fff; border-radius: 18px; padding: 14px; text-align: center;
  box-shadow: 0 3px 0 rgba(90,74,106,0.12);
}
.arcade-karte .a-emoji { font-size: 2.6rem; display: block; }
.arcade-karte .a-name { font-weight: 900; font-size: 1.1rem; color: var(--lila-dunkel, #7a4fb0); }
.arcade-karte .a-text { font-size: 0.88rem; line-height: 1.4; margin: 6px 0 10px; color: var(--text); }
.arcade-karte .a-rekord { font-size: 0.85rem; font-weight: 800; color: var(--text-hell); margin-bottom: 8px; }
.arcade-karte .gross-btn { width: 100%; }
#spiel-kopf {
  display: flex; align-items: center; gap: 12px; width: min(560px, 100%);
  margin: 0 auto 8px; font-weight: 900;
}
#spiel-titel { flex: 1; text-align: center; font-size: 1.15rem; color: var(--lila-dunkel, #7a4fb0); }
#spiel-punkte { font-size: 1.15rem; color: var(--pink-dunkel, #c2478f); min-width: 70px; text-align: right; }
#spiel-flaeche { display: flex; justify-content: center; }
#spiel-flaeche canvas {
  background: #fff; border-radius: 16px; box-shadow: 0 4px 0 rgba(90,74,106,0.15);
  touch-action: none; max-width: 100%; height: auto;
}
#memory-grid { display: grid; grid-template-columns: repeat(4, minmax(60px, 92px)); gap: 10px; }
.memory-karte {
  aspect-ratio: 1; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, var(--lila, #b48ad6), var(--pink, #f291c2));
  box-shadow: 0 3px 0 rgba(90,74,106,0.2); padding: 6px;
  display: grid; place-items: center; font-size: 1.6rem; color: #fff; font-weight: 900;
}
.memory-karte img { max-width: 100%; max-height: 100%; object-fit: contain; }
.memory-karte.offen, .memory-karte.fertig { background: #fff; cursor: default; }
.memory-karte.fertig { opacity: 0.55; }
#tama-box { width: min(440px, 100%); text-align: center; }
#tama-wesen { position: relative; height: 130px; display: grid; place-items: center; }
.tama-emoji { font-size: 96px; line-height: 1; animation: saisonSchweben 3.2s ease-in-out infinite; }
.tama-wunsch { position: absolute; top: 0; right: 12%; font-size: 1.9rem; }
#tama-status { font-weight: 900; color: var(--lila-dunkel, #7a4fb0); margin: 4px 0 10px; }
.tama-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-weight: 800; font-size: 0.95rem; }
.tama-zeile > span { width: 96px; text-align: left; flex: 0 0 auto; }
.tama-leiste { flex: 1; height: 16px; background: #eee3f5; border-radius: 999px; overflow: hidden; }
.tama-leiste div { height: 100%; border-radius: 999px; transition: width 0.4s; }
#tama-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* ---------- Periodensystem ---------- */
.pse-wrap { overflow-x: auto; width: 100%; padding-bottom: 6px; }
.pse-grid {
  display: grid;
  grid-template-columns: repeat(18, 38px);
  grid-auto-rows: 40px;
  gap: 3px;
  width: max-content;
  margin: 0 auto;
}
.pse-zelle {
  font-family: inherit; border: none; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1px; color: #3a3050; box-shadow: 0 1.5px 0 rgba(90,74,106,0.18);
}
.pse-zelle:active { transform: scale(0.94); }
.pse-oz { font-size: 0.55rem; font-weight: 700; line-height: 1; opacity: 0.75; }
.pse-sym { font-size: 0.85rem; font-weight: 900; line-height: 1.1; }
.pse-verweis { background: rgba(255,255,255,0.55); cursor: default; box-shadow: none; border: 1.5px dashed rgba(90,74,106,0.3); }
.el-m { background: #cfe0f4; }
.el-n { background: #d3f6d8; }
.el-h { background: #ffe9a8; }
.el-e { background: #f3d9f7; }
.pse-legende { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.pse-legende span { font-size: 0.85rem; font-weight: 800; border-radius: 999px; padding: 4px 12px; color: #3a3050; }
#element-gross {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(90,60,120,0.6); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#element-gross.versteckt { display: none; }
#element-gross-box {
  background: #fff; border-radius: 22px; padding: 18px; text-align: center;
  width: min(430px, 92vw); max-height: 92vh; overflow-y: auto;
  box-shadow: 0 12px 34px rgba(0,0,0,0.3);
}
#element-symbol {
  width: 110px; height: 110px; border-radius: 18px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(90,74,106,0.2);
}
#element-oz-oben { font-size: 0.95rem; font-weight: 800; opacity: 0.75; }
#element-sym { font-size: 2.6rem; font-weight: 900; line-height: 1; color: #3a3050; }
#element-name { font-weight: 900; font-size: 1.4rem; color: var(--lila-dunkel, #7a4fb0); margin-top: 8px; }
#element-daten { margin: 10px 0; }
.el-zeile {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 8px; border-bottom: 1px dashed #eee3f5; font-size: 0.95rem;
}
.el-zeile b { color: var(--pink-dunkel, #c2478f); }
#element-fakt { font-size: 0.95rem; line-height: 1.5; background: #f6f1fc; border-radius: 12px; padding: 10px; text-align: left; }

/* ---------- Buddy-Dialog am Startbildschirm ---------- */
#home-einhorn { cursor: pointer; }
#buddy-blase {
  position: relative; width: min(580px, 94%); margin: 12px auto 2px;
  background: #fff; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 4px 0 rgba(90,74,106,0.15); text-align: center;
}
#buddy-blase::before {
  content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  border: 12px solid transparent; border-bottom-color: #fff; border-top: 0;
}
#buddy-blase.versteckt { display: none; }
#buddy-text { font-weight: 700; line-height: 1.45; font-size: 1.02rem; color: var(--text); }
#buddy-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
#buddy-chips:empty { margin-top: 0; }
.buddy-chip {
  font-family: inherit; font-weight: 800; font-size: 0.95rem;
  border: none; border-radius: 999px; padding: 9px 14px;
  background: #f2ecfa; color: var(--lila-dunkel, #7a4fb0); cursor: pointer;
  box-shadow: 0 2px 0 rgba(90,74,106,0.15);
}
.buddy-chip:active { transform: translateY(2px); }
body.thema-bau .buddy-chip { background: #e3effc; color: #2b6cb0; }
.buddy-plopp { animation: buddyPlopp 0.35s ease; }
@keyframes buddyPlopp {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- Sticker: Filter, Sperre, Groß-Ansicht ---------- */
#mal-picker-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
#mal-picker-filter.versteckt { display: none; }
.picker-kachel { position: relative; }
.picker-kachel.gesperrt img { filter: grayscale(1) brightness(0.25) opacity(0.35); }
.picker-kachel.gesperrt:hover { transform: none; }
.kachel-schloss { position: absolute; bottom: 4px; right: 6px; font-size: 0.95rem; }
.premium-kachel {
  background: linear-gradient(150deg, #fff9e3, #ffeef9 55%, #f0e9ff);
  border: 2px solid #f2c744;
  box-shadow: 0 2px 0 rgba(190,150,30,0.25), 0 0 10px rgba(242,199,68,0.35);
}
.kachel-preis {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: #5a4a6a; color: #ffe89a; font-weight: 800; font-size: 0.72rem;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.kachel-premium-stern { position: absolute; top: 2px; right: 5px; font-size: 0.95rem; }

/* ---------- Foto-Safari ---------- */
.safari-flaeche {
  position: relative; overflow: hidden; border-radius: 18px;
  min-height: min(58vh, 460px);
  background: url("../assets/img/zoo_bg_wald_gross.png") center/cover no-repeat, #cfe6cf;
  touch-action: manipulation;
}
.safari-tier { position: absolute; cursor: pointer; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
.safari-blitz { position: absolute; inset: 0; background: #fff; opacity: 0.85; pointer-events: none; animation: safariBlitz 0.16s ease-out forwards; }
@keyframes safariBlitz { from { opacity: 0.85; } to { opacity: 0; } }
.safari-plus {
  position: absolute; font-weight: 900; font-size: 1.4rem; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6); pointer-events: none;
  animation: safariPlus 0.8s ease-out forwards;
}
@keyframes safariPlus { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -40px; } }
.picker-hinweis {
  grid-column: 1 / -1; background: #fff6d8; border-radius: 14px; padding: 14px;
  font-weight: 700; line-height: 1.5; text-align: center; color: var(--text);
}
.album-feld { font-family: inherit; border: none; cursor: pointer; }
.album-feld:active { transform: scale(0.96); }
#sticker-gross {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(90,60,120,0.6); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
}
#sticker-gross.versteckt { display: none; }
#sticker-gross-box {
  background: #fff; border-radius: 22px; padding: 18px; text-align: center;
  width: min(430px, 92vw); box-shadow: 0 12px 34px rgba(0,0,0,0.3);
}
#sticker-gross-bild { width: min(300px, 68vw); height: min(300px, 60vh); object-fit: contain; }
#sticker-gross-bild.silhouette { filter: grayscale(1) brightness(0.25) opacity(0.4); }
#sticker-gross-name { font-weight: 900; font-size: 1.35rem; color: var(--lila-dunkel, #7a4fb0); margin-top: 4px; }
#sticker-gross-info { margin-top: 4px; }

/* ---------- Lern-Atlas (Länder & Flaggen) ---------- */
#atlas-kontinente { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 10px; }
.atlas-chip {
  font-family: inherit; font-weight: 800; font-size: 0.95rem;
  padding: 9px 14px; border: none; border-radius: 999px;
  background: rgba(255,255,255,0.75); color: var(--text); cursor: pointer;
  box-shadow: 0 2px 0 rgba(90,74,106,0.12);
}
.atlas-chip.aktiv { background: var(--lila, #b48ad6); color: #fff; }
#atlas-liste { display: flex; flex-direction: column; gap: 8px; width: min(680px, 100%); margin: 8px auto; }
.atlas-zeile {
  font-family: inherit; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 52px 1fr auto 30px; align-items: center; gap: 10px;
  background: #fff; border: none; border-radius: 14px; padding: 8px 12px;
  box-shadow: 0 2px 0 rgba(90,74,106,0.1); color: var(--text);
}
.atlas-zeile:active { transform: translateY(1px); }
.atlas-zeile img.flagge { width: 44px; height: 30px; object-fit: cover; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.atlas-land { font-weight: 900; font-size: 1.02rem; }
.atlas-stadt { font-weight: 700; color: var(--text-hell); font-size: 0.92rem; text-align: right; }
.atlas-grad { font-size: 1.05rem; text-align: center; }

/* ---------- Ton-Detailschalter + Zurück oben ---------- */
.stufe-btn.stufe-gesperrt { opacity: 0.5; filter: grayscale(0.5); }
.ton-gesperrt {
  opacity: 0.4;
  filter: grayscale(0.7);
  cursor: default;
}
.zurueck-oben {
  align-self: flex-start;
  margin: 0 0 4px;
}

/* ===== Erweiterte Berechtigungen (Eltern sperren einzelne Bereiche) ===== */
.berechtigung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(560px, 100%);
  margin: 0 auto 10px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(90,74,106,0.08);
}
.berechtigung-zeile.gesperrt { background: #fdeef0; }
.berechtigung-name { font-weight: 800; font-size: 1rem; color: var(--text-hell); }
.berechtigung-knopf { min-width: 128px; background: #e3f6e8; color: #2c8a4b; }
.berechtigung-knopf.zu { background: #f6cdd4; color: #b03a4e; }

/* Saison-Hinweis im Shop: "nur bis 30. November hier!" */
.shop-saison-info { color: #c26a1b; font-weight: 800; }

/* ===== Update 17 ===== */
/* Wunschliste im Shop */
.wunsch-stern {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.15rem;
  filter: grayscale(1) opacity(0.55);
  cursor: pointer;
}
.wunsch-stern.aktiv { filter: none; box-shadow: 0 0 0 3px #ffd23d66; }
.wunsch-banner {
  grid-column: 1/-1;
  background: linear-gradient(90deg, #fff3cc, #ffe9a8);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  color: #8a6d1a;
  text-align: center;
}
/* Gelesen-Haken auf Merkkarten */
.karte-haken { font-size: 0.85em; }
/* Profil loeschen */
.profil-weg-btn { align-self: center; }
/* Abendmodus: warme, gedimmte Farben */
body.abendmodus { filter: brightness(0.82) saturate(0.85); background: #2c2438; }
body.abendmodus .screen, body.abendmodus #topbar { filter: brightness(0.96); }
/* Analyse-Zeile mit Ueben-Knopf */
.analyse-zeile .klein-btn { margin-left: 8px; flex-shrink: 0; }

/* Figuren-Lexikon (Pokedex) */
#dex-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
/* Update 20: Gruppen-Ueberschriften (Einhoerner vs. Tierfreunde) */
.dex-gruppe-titel {
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 1.1em;
  color: #7b4fc9;
  text-align: left;
  padding: 10px 4px 2px;
  border-bottom: 2px dashed rgba(123, 79, 201, .35);
  margin-bottom: 4px;
}
body.thema-bau .dex-gruppe-titel { color: #b8621b; border-bottom-color: rgba(184, 98, 27, .35); }
body.thema-zoo .dex-gruppe-titel { color: #2e7d4f; border-bottom-color: rgba(46, 125, 79, .35); }
.dex-karte {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(90,74,106,0.08);
}
.dex-karte img { height: 78px; object-fit: contain; }
.dex-karte .dex-nr { font-size: 0.72rem; font-weight: 800; color: #b9a8cc; align-self: flex-start; }
.dex-karte .dex-name { font-weight: 800; font-size: 0.85rem; color: var(--text-hell); text-align: center; }
.dex-unbekannt { background: #efe9f6; }
.dex-unbekannt img { filter: brightness(0) opacity(0.7); }
.dex-unbekannt .dex-name { color: #a795bd; letter-spacing: 2px; }
#dex-detail {
  position: fixed;
  inset: 0;
  background: rgba(60,40,80,0.45);
  display: grid;
  place-items: center;
  z-index: 960;
  padding: 14px;
}
#dex-detail.versteckt { display: none; }
#dex-detail-box {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
}
#dex-detail-titel { font-weight: 900; font-size: 1.25rem; color: var(--text-hell); text-align: center; margin-bottom: 6px; }
.dex-zeile { margin: 8px 0; line-height: 1.5; color: var(--text-hell); }
#btn-dex-detail-zu { width: 100%; margin-top: 10px; }

/* Quiz-Zentrale */
.qz-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.qz-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 11px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(90,74,106,0.08);
  text-align: left;
}
.qz-zeile:hover { transform: translateY(-1px); }
.qz-name { font-weight: 800; color: var(--text-hell); flex: 1; }
.qz-info { font-size: 0.8rem; color: #a795bd; white-space: nowrap; }
.qz-juwelen { font-weight: 800; font-size: 0.85rem; color: #2fa3d7; white-space: nowrap; }
.qz-fehler { background: #fdf3e3; }

/* Pflege-Liebling: das angetippte Einhorn bekommt die naechsten Leckerlis */
.pflege-ziel {
  filter: drop-shadow(0 0 10px #ff9ecb) drop-shadow(0 0 3px #ffd6ea);
}
.pflege-ziel::after {
  content: "💖";
  position: absolute;
  top: -14px;
  right: -4px;
  font-size: 1.05rem;
  animation: liebling-huepf 1.4s ease-in-out infinite;
}
@keyframes liebling-huepf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Wunschzettel: wie ein liebevoller Brief-Zettel */
#wz-zettel {
  width: min(560px, 100%);
  margin: 0 auto;
  background: #fffdf5;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 6px 0 rgba(90,74,106,0.1);
  border: 2px dashed #e8d9b8;
}
#wz-kopf { font-weight: 900; font-size: 1.1rem; color: #8a6d3a; text-align: center; margin-bottom: 12px; }
#wz-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.wz-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  border-bottom: 2px dotted #eadfc8;
}
.wz-zeile.wz-herz { background: #fdeef0; }
.wz-text { flex: 1; font-weight: 700; color: var(--text-hell); overflow-wrap: anywhere; }
.wz-herz-btn { min-width: 44px; }
#wz-neu { display: flex; gap: 8px; flex-wrap: wrap; }
#wz-eingabe {
  flex: 1;
  min-width: 200px;
  border: 2px solid #e8d9b8;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}

/* Wochenbericht: Blaettern durch die Wochen */
/* ================= Update 21: Schlichte Erwachsenen-Ansicht =================
   Ein Tipp auf 🌓 in der Kopfleiste - und die Funkel-Optik weicht einem
   nuechternen Smartphone-Dashboard-Look: heller System-Grund, weisse
   Karten mit Haarlinien, EIN blauer Akzent, keine Bonbon-Farben, keine
   Puls-Animationen. Reine Optik - Inhalte und Emojis bleiben. */
body.ansicht-schlicht {
  background: #f2f2f7;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
body.ansicht-schlicht .screen { background: #f2f2f7; color: #1c1c1e; }
body.ansicht-schlicht #topbar {
  background: rgba(249, 249, 249, .95);
  border-bottom: 1px solid rgba(60, 60, 67, .16);
  box-shadow: none;
}
body.ansicht-schlicht #tb-titel,
body.ansicht-schlicht .screen-titel,
body.ansicht-schlicht h1, body.ansicht-schlicht h2, body.ansicht-schlicht h3,
body.ansicht-schlicht .einstellung-titel,
body.ansicht-schlicht .fach-gruppe-titel,
body.ansicht-schlicht #home-gruss,
body.ansicht-schlicht #home-titel, body.ansicht-schlicht #home-untertitel {
  background: none;
  -webkit-text-fill-color: #1c1c1e;
  color: #1c1c1e;
  text-shadow: none;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
body.ansicht-schlicht .tb-btn {
  background: #e9e9ec;
  border: none;
  box-shadow: none;
  color: #1c1c1e;
}
/* Karten und Bloecke: weisse Widgets mit Haarlinie */
body.ansicht-schlicht .einstellung-block,
body.ansicht-schlicht .kat-karte,
body.ansicht-schlicht .arcade-karte,
body.ansicht-schlicht .dex-karte,
body.ansicht-schlicht .spenden-karte,
body.ansicht-schlicht .sport-karte,
body.ansicht-schlicht .memory-karte,
body.ansicht-schlicht .analyse-liste,
body.ansicht-schlicht .studio-start {
  background: #ffffff;
  border: 1px solid rgba(60, 60, 67, .14);
  border-radius: 12px;
  box-shadow: none;
  color: #1c1c1e;
  text-shadow: none;
}
body.ansicht-schlicht .kat-name,
body.ansicht-schlicht .sport-name,
body.ansicht-schlicht .dex-name { color: #1c1c1e; text-shadow: none; font-weight: 600; }
body.ansicht-schlicht .kat-badge { background: #e9e9ec; color: #6e6e73; }
/* Knoepfe: neutral, EIN blauer Akzent fuer den Hero */
body.ansicht-schlicht .gross-btn {
  background: #ffffff;
  color: #0a84ff;
  border: 1px solid rgba(60, 60, 67, .14);
  border-radius: 12px;
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
}
body.ansicht-schlicht .hero-btn {
  background: #0a84ff;
  color: #ffffff;
  border: none;
}
body.ansicht-schlicht .hero-btn .hero-sub { color: rgba(255, 255, 255, .85); }
body.ansicht-schlicht #btn-auftraege.hero-btn { background: #ff9f0a; color: #fff; }
body.ansicht-schlicht .klein-btn {
  background: #e9e9ec;
  color: #1c1c1e;
  border: none;
  box-shadow: none;
  text-shadow: none;
  font-weight: 500;
}
body.ansicht-schlicht .auftrag-praesent { animation: none; box-shadow: none; }
body.ansicht-schlicht .kachel-krone { filter: none; }
/* Quiz: klare Flaechen, iOS-Semantikfarben */
body.ansicht-schlicht .antwort-btn {
  background: #ffffff;
  color: #1c1c1e;
  border: 1px solid rgba(60, 60, 67, .18);
  border-radius: 12px;
  box-shadow: none;
  text-shadow: none;
}
body.ansicht-schlicht .antwort-btn.richtig { background: #e4f8ea; border-color: #34c759; color: #1c6b32; }
body.ansicht-schlicht .antwort-btn.falsch { background: #fdeaea; border-color: #ff3b30; color: #8f2a24; }
body.ansicht-schlicht #feedback-leiste.gut { background: #e4f8ea; color: #1c6b32; }
body.ansicht-schlicht #feedback-leiste.schlecht { background: #fdeaea; color: #8f2a24; }
body.ansicht-schlicht #quiz-balken { background: #0a84ff; }
body.ansicht-schlicht .analyse-hinweis { color: #6e6e73; text-shadow: none; }
body.ansicht-schlicht .a-name, body.ansicht-schlicht .a-wert { color: #1c1c1e; }
body.ansicht-schlicht .dex-gruppe-titel { color: #6e6e73; border-bottom-color: rgba(60, 60, 67, .18); }
body.ansicht-schlicht .olymp-balken { background: rgba(10, 132, 255, .15); }
body.ansicht-schlicht .olymp-balken-voll { background: #0a84ff; }
body.ansicht-schlicht .tagesplan-chip { background: #e9f2ff; color: #0a64c2; }
body.ansicht-schlicht .bericht-zeitraum { color: #1c1c1e; }
body.ansicht-schlicht .spenden-karte .sp-betrag { color: #0a84ff; }
body.ansicht-schlicht .merk-knopf { background: #ffffff; border: 1px solid rgba(60, 60, 67, .14); box-shadow: none; }
body.ansicht-schlicht .notruf-karte { border-radius: 12px; box-shadow: none; }

/* Update 20: Lern-Steuerung - Kronen an den Kacheln + Tagesplan-Chips */
.kat-karte { position: relative; }
.kachel-krone {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 1.05em;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  pointer-events: none;
}
.tagesplan-chip { font-weight: 800; }
/* Denk-Olympiade */
#merk-raster { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.merk-knopf {
  font-size: 1.9rem;
  padding: 10px 14px;
  border: none;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.merk-knopf:active { transform: scale(0.92); }
.olymp-balken-zeile { display: flex; align-items: center; gap: 8px; margin-top: 6px; text-align: left; }
.olymp-balken-name { width: 110px; font-weight: 800; flex-shrink: 0; }
.olymp-balken { flex: 1; height: 14px; border-radius: 7px; background: rgba(123, 79, 201, .15); overflow: hidden; display: block; }
.olymp-balken-voll { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #b18ae8, #7b4fc9); }
.olymp-balken-wert { width: 34px; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Eltern-Auftraege am Home: gross und mit sanftem Aufmerksamkeits-Puls */
#btn-auftraege.auftrag-praesent {
  animation: auftragPuls 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(255, 200, 60, .55);
}
@keyframes auftragPuls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.bericht-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(720px, 100%);
  margin: 0 auto 10px;
}
.bericht-zeitraum { font-weight: 900; color: var(--text-hell); text-align: center; flex: 1; }
.bericht-nav .klein-btn[disabled] { opacity: 0.35; }

/* Drucken: nur der aktive Screen (v.a. der Wochenbericht) kommt aufs Papier */
@media print {
  body { background: #fff !important; filter: none !important; }
  #topbar, .zurueck-btn, .klein-btn, .gross-btn, #saison-ebene, #konfetti-ebene, video { display: none !important; }
  .screen { display: none !important; }
  .screen.aktiv { display: block !important; }
}

/* ---------- Monats-Kalender (Update 23.1) ---------- */
#kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: min(560px, 100%); margin: 0 auto; }
.kal-wt { text-align: center; font-weight: 800; font-size: .8rem; color: #8a7ba0; padding: 2px 0; }
.kal-zelle { position: relative; border: 2px solid #e5d9f0; border-radius: 10px; background: #fff; min-height: 52px; padding: 3px 2px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kal-zelle.kal-leer { border: none; background: none; cursor: default; }
.kal-tag { font-weight: 800; font-size: .85rem; }
.kal-punkte { font-size: .72rem; line-height: 1.1; word-break: break-all; text-align: center; }
.kal-zelle.kal-ferien { background: #e8f7ee; border-color: #9ad8b4; }
.kal-zelle.kal-heute { border-color: #e0679a; box-shadow: 0 0 0 2px #e0679a inset; }
.kal-zelle.gewaehlt { border-color: #7b4fc9; background: #efe8fc; }
body.ansicht-schlicht .kal-zelle { border-color: rgba(60,60,67,.2); }
body.ansicht-schlicht .kal-zelle.kal-heute { border-color: #0a84ff; box-shadow: 0 0 0 2px #0a84ff inset; }

/* ============================================================
   Update 24.1: Handy-Hochformat (Papas Bestellung)
   Die App laeuft jetzt auch hochkant auf iPhone & Co. Die
   Grund-Layouts sind laengst fluessig - hier stehen nur die
   Feinheiten fuer schmale Schirme.
   ============================================================ */
@media (max-width: 480px) {
  /* Kopfzeile: alles sichtbar, nichts abgeschnitten */
  #topbar { gap: 5px; padding-left: 2px; padding-right: 2px; }
  #tb-titel { display: none; } /* stand eh nur abgeschnitten da - der Screen traegt seinen Titel selbst */
  #tb-rechts { gap: 4px; margin-left: auto; }
  .tb-chip { padding: 5px 9px; font-size: 0.85rem; }
  .tb-btn { width: 38px; height: 38px; font-size: 1.15rem; border-radius: 13px; }

  /* Welt-Kopf: Titel + Bearbeiten-Knoepfe duerfen umbrechen statt links rauszulaufen */
  #welt-kopf { flex-wrap: wrap; padding: 0 6px; }
  #welt-kopf .screen-titel { font-size: 1.15rem; text-align: center; }

  /* Geschichten-Kopf: Vorlesen/Anhoeren-Knoepfe brechen unter den Titel um */
  #geschichte-kopf { flex-wrap: wrap; gap: 8px; padding: 0 6px; }

  /* Breiten-Waechter: nichts ragt seitlich raus (Stimmen-Select, GW-Bloecke) */
  .einstellung-block select, .einstellung-block > div { max-width: 100%; }
}

/* ---------- Handy-QUERFORMAT: wenig Hoehe, alles muss aufs Bild ----------
   (Papas Live-Fund am iPhone: Frage-Karte verdeckte die Fortschrittszeile,
   das Tastenfeld lag unterm Falz.) */
@media (max-height: 480px) {
  /* Kopfzeile flacher */
  #topbar { padding-top: 3px; padding-bottom: 3px; gap: 6px; }
  .tb-chip { padding: 4px 10px; font-size: 0.85rem; }
  .tb-btn { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 12px; }
  #tb-titel { font-size: 0.9rem; }

  /* Quiz: Karte darf die Kopfzeile nie mehr verdecken - bei Platznot
     oben buendig bleiben und in der Mitte scrollen */
  #quiz-kopf { padding-top: 2px; }
  #quiz-mitte { justify-content: safe center; gap: 8px; overflow-y: auto; }
  #frage-karte { display: block; padding: 8px 14px; }
  #frage-grad { margin-bottom: 2px; }
  #frage-text { margin: 2px 0; }
  #frage-emoji { font-size: 32px; line-height: 1.1; }
  #frage-emoji img.flagge { height: 40px; }
  #quiz-mitte { gap: 6px; }
  /* Vorlesen + Tipp nebeneinander statt uebereinander */
  #btn-frage-lesen, #btn-tipp { display: inline-flex; margin: 6px 5px 0; min-height: 38px; }
  #zahl-anzeige { min-height: 40px; font-size: 1.35rem; }
  .kp { min-height: 42px; }
  .screen { padding-bottom: 6px; }
  .antwort-btn { min-height: 46px; padding: 6px 12px; }
  #antwort-grid { gap: 8px; }
  .screen-titel { margin: 4px 0; font-size: 1.15rem; }
}