/**
 * KinderKit — der Grundschul-Look für heyprof-VisuApps (Klasse 1–4).
 * Schwester von visukit.css; ERSETZT sie vollständig (nicht beides laden).
 * Läuft mit derselben Runtime (visukit.js: Theme/Palette/Tutor-Drossel).
 *
 *   <link rel="stylesheet" href="../_shared/kinderkit.css" />
 *   <script src="../_shared/visukit.js"></script>
 *   <script src="../_shared/kinderkit.js"></script>   (KinderKit.boot())
 *
 * Anatomie (Drei-Zonen-Bühne, Hochformat 390×844 ist der Primärfall):
 *   .kk-wrap   > .kk-kopf    Aufgaben-Zeile oben (Chip, Fortschritt, Hören)
 *              > .kk-buehne  die Szene, füllt den Rest — nie verdeckt
 *              > .kk-fuss    Daumen-Zone unten mit ALLEN Kinder-Tasten
 *   Links unten wohnt die Monster-Spur (x < 92 px): Monster-Eck + HeyHand.
 *   Bühnen-Inhalt und Fuss-Tasten bleiben rechts davon.
 *   Erwachsenen-Einstellungen: kleines Zahnrad oben rechts → EIN Blatt
 *   (#panel-einstellungen, bedient die Tutor-Konvention #panel-<key>).
 *   KEINE Eck-Panels, KEIN Dock, KEINE Pillbar.
 */

/* ── Nunito (gebündelt, variabel 400–900) — rund, aber nicht verspielt ── */
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Die Ziffer 4 in der OFFENEN Schulform (kein geschlossenes Dreieck): eigene
   Ein-Glyphen-Schrift in Nunitos Metriken, variabel 400–900, per unicode-range
   über die Familie gelegt — greift in JEDER Grundschul-App, auch in Canvas-Text.
   Muss NACH der Latin-Regel stehen (letzte Regel gewinnt). Bauen:
   python3 scripts/_nunito-vier-font.py (Dirk, 2026-09-14). */
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('nunito-vier.woff2') format('woff2');
  unicode-range: U+0034;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { touch-action: none; overscroll-behavior: none; }
body {
  overflow: hidden;
  font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
}
canvas { display: block; touch-action: none; }
[hidden] { display: none !important; }

/* ── Die feste KinderKit-Farbwelt (Beschluss 2026-08-14) ─────────────────
   KEINE Kursfarben-Ableitung für die Bunttöne: Kinder-Apps sehen in jedem
   Kurs gleich freundlich aus. Die Kursfarbe bleibt als --kk-akzent (vom
   Host-`?accent=` über --pal-accent) für den Wiedererkennungs-Chip.
   Semantik ist fest: Erfolg = Grün, Hinweis = Gelb. Nie Rot als Tadel. */
:root {
  --kk-akzent: var(--pal-accent, rgb(79, 70, 229));
}
body.theme-light {
  background: #f6f1e7;                       /* Tag: warmes Creme */
  color: #363150;
  --kk-bg: #f6f1e7;
  --kk-flaeche: #ffffff;                     /* Bühne, Karten, Blatt */
  --kk-ink: #363150;
  --kk-taste-bg: rgba(54, 49, 80, 0.07);
  --kk-taste-bg-hover: rgba(54, 49, 80, 0.11);
  --kk-taste-an: rgba(54, 49, 80, 0.13);
  --kk-blau: #3d82e0;
  --kk-gelb: #f2a93b;
  --kk-gruen: #2fa878;
  --kk-koralle: #e8635a;
  --kk-lila: #8a63d6;
  --kk-tuerkis: #2aa8ad;
  --kk-erfolg: #2fa878;
  --kk-hinweis: #f2a93b;
}
body.theme-dark {
  background: #161d38;                       /* Abendhimmel: Navy, kein Schwarz */
  color: #eef0fc;
  --kk-bg: #161d38;
  --kk-flaeche: #1f2748;
  --kk-ink: #eef0fc;
  --kk-taste-bg: rgba(238, 240, 252, 0.09);
  --kk-taste-bg-hover: rgba(238, 240, 252, 0.14);
  --kk-taste-an: rgba(238, 240, 252, 0.17);
  --kk-blau: #6ea8ff;
  --kk-gelb: #ffc75c;
  --kk-gruen: #4cd399;
  --kk-koralle: #ff8f84;
  --kk-lila: #ab8bff;
  --kk-tuerkis: #4fd0d6;
  --kk-erfolg: #4cd399;
  --kk-hinweis: #ffc75c;
}

/* ── Anatomie: Drei-Zonen-Bühne ──────────────────────────────────────── */
.kk-wrap {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
}
.kk-kopf {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 680px; margin: 0 auto;
}
/* Schmale Fenster: das fixe Zahnrad (44px, rechts oben) ragt sonst in die
   Kopf-Zeile und legt sich über deren letzten Knopf (z. B. Vorlesen). */
@media (max-width: 820px) {
  .kk-kopf { padding-right: 60px; }
}
.kk-buehne {
  position: relative;
  flex: 1 1 auto; min-height: 120px;
  width: 100%; max-width: 980px; margin: 0 auto;
  border-radius: 24px; overflow: hidden;
  background: var(--kk-flaeche);
  -webkit-tap-highlight-color: transparent;
}
.kk-fuss {
  flex: 0 0 auto;
  display: flex; align-items: stretch; gap: 8px;
  width: 100%; max-width: 680px; margin: 0 auto;
}

/* ── Tasten-Vokabular: DREI Klassen, ein Look ────────────────────────────
   .kk-taste   Aktions-Taste  (≥56px, Radius 16)
   .kk-kachel  Auswahl-Kachel (≥64px, Radius 20 — Bild/Symbol im Zentrum)
   .kk-chip    Anzeige-Chip   (nicht klickbar, große Zahl/Symbol)          */
.kk-taste, .kk-kachel {
  border: none; cursor: pointer; min-width: 0;
  font-family: inherit; color: var(--kk-ink);
  background: var(--kk-taste-bg);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.12s, color 0.15s, opacity 0.15s;
}
.kk-taste { min-height: 56px; border-radius: 16px; font-size: 17px; font-weight: 800; padding: 0 14px; }
.kk-kachel { min-height: 64px; border-radius: 20px; font-size: 21px; font-weight: 800; }
.kk-taste svg, .kk-kachel svg { width: 26px; height: 26px; flex: 0 0 auto; }
.kk-taste:hover, .kk-kachel:hover { background: var(--kk-taste-bg-hover); }
.kk-taste:active, .kk-kachel:active { transform: scale(0.95); }
/* Zustände: .primaer = die eine Haupt-Aktion (Blau), .erfolg = Bestätigen,
   .an = gewählt. Gefüllte Tasten sind IMMER weiß beschriftet. */
.kk-taste.primaer, .kk-kachel.primaer { background: var(--kk-blau); color: #fff; }
.kk-taste.erfolg,  .kk-kachel.erfolg  { background: var(--kk-erfolg); color: #fff; }
.kk-taste.an,      .kk-kachel.an      { background: var(--kk-taste-an); color: var(--kk-blau); }
.kk-taste.primaer:hover, .kk-kachel.primaer:hover,
.kk-taste.erfolg:hover,  .kk-kachel.erfolg:hover { filter: brightness(1.08); background-color: initial; }
.kk-taste.primaer:hover { background: var(--kk-blau); }
.kk-taste.erfolg:hover  { background: var(--kk-erfolg); }
.kk-kachel.primaer:hover { background: var(--kk-blau); }
.kk-kachel.erfolg:hover  { background: var(--kk-erfolg); }
.kk-taste:disabled, .kk-kachel:disabled { opacity: 0.35; cursor: default; transform: none; }

.kk-chip {
  min-width: 64px; min-height: 64px; padding: 0 12px;
  border-radius: 20px; background: var(--kk-akzent); color: #fff;
  font-size: 38px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Fehlversuch: kurzes Wackeln — kein Tadel, kein Rot-Blinken. */
@keyframes kk-wackel {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.kk-wackel { animation: kk-wackel 0.32s ease; }
@media (prefers-reduced-motion: reduce) {
  .kk-wackel { animation: none; background: var(--kk-taste-an) !important; }
}
/* Erfolg: ruhiger Puls, KEIN Konfetti. */
@keyframes kk-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .kk-puls { animation: kk-puls 0.7s ease; }
}

/* ── Zahnrad (Erwachsene) + Blatt ────────────────────────────────────────
   Klein und unauffällig — Kinder sollen es ignorieren. Das Blatt heißt
   #panel-einstellungen und nutzt hidden/open wie die Panel-Konvention,
   damit Tutor-Show (setPanel/highlight) weiter funktioniert. */
#kk-zahnrad {
  position: fixed; top: 14px; right: 14px; z-index: 45;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  cursor: pointer; color: var(--kk-ink); opacity: 0.4;
  background: var(--kk-taste-bg);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
#kk-zahnrad:hover { opacity: 0.8; }
#kk-zahnrad svg { width: 22px; height: 22px; }

.kk-blatt { display: none; }
.kk-blatt:not(.hidden) {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.kk-blatt .kk-blatt-hinter {
  position: absolute; inset: 0;
  background: rgba(10, 13, 30, 0.45);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.kk-blatt .kk-blatt-karte {
  position: relative; z-index: 1;
  width: min(420px, 100%); max-height: min(86vh, 640px);
  overflow-x: hidden; overflow-y: auto;
  border-radius: 24px; padding: 20px;
  background: var(--kk-flaeche); color: var(--kk-ink);
}
.kk-blatt h3 { font-size: 17px; font-weight: 800; margin: 0 0 12px; }
.kk-blatt-zu {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border: none; border-radius: 16px;
  cursor: pointer; color: inherit; background: var(--kk-taste-bg);
  display: flex; align-items: center; justify-content: center;
}
.kk-blatt-zu svg { width: 18px; height: 18px; }
/* Blatt-Widgets: lesbar (Erwachsene), aber im selben runden Look. */
.kk-blatt .lab { font-size: 13px; font-weight: 800; opacity: 0.6; margin: 14px 0 6px; }
.kk-blatt .lab:first-of-type { margin-top: 0; }
.kk-blatt .kk-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--kk-taste-bg); }
.kk-blatt .kk-seg button {
  flex: 1; min-width: 0; min-height: 44px; border: none; border-radius: 12px;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800;
  background: transparent; color: inherit; opacity: 0.6;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}
.kk-blatt .kk-seg button:hover { opacity: 0.85; }
.kk-blatt .kk-seg button.active { opacity: 1; background: var(--kk-flaeche); color: var(--kk-blau); }
body.theme-dark .kk-blatt .kk-seg button.active { background: rgba(238, 240, 252, 0.14); }
.kk-blatt .kk-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  min-height: 44px; font-size: 14px; font-weight: 700;
}
/* Eigene Checkbox statt Browser-Optik: Taste-Fläche, Häkchen bei checked. */
.kk-blatt .kk-check input {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 8px; margin: 0; flex: none;
  background: var(--kk-taste-bg); cursor: pointer;
  display: grid; place-items: center;
}
.kk-blatt .kk-check input:checked { background: var(--kk-blau); }
.kk-blatt .kk-check input:checked::after {
  content: ''; width: 12px; height: 7px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  border-radius: 1px;
  transform: translateY(-2px) rotate(-45deg);
}
.kk-blatt .hint { font-size: 13px; line-height: 1.5; opacity: 0.7; font-weight: 600; }
.kk-blatt .hint + .hint { margin-top: 8px; }
.kk-blatt .kk-trenn { height: 1px; margin: 14px 0; background: currentColor; opacity: 0.08; }

/* Scrollbalken (Blatt) — heyprof-global, keine Pfeil-Buttons. */
.kk-blatt-karte { scrollbar-width: thin; }
body.theme-light .kk-blatt-karte { scrollbar-color: rgba(0, 0, 0, 0.15) transparent; }
body.theme-dark  .kk-blatt-karte { scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.kk-blatt-karte::-webkit-scrollbar { width: 8px; height: 8px; }
.kk-blatt-karte::-webkit-scrollbar-track { background: transparent; }
.kk-blatt-karte::-webkit-scrollbar-thumb { border-radius: 4px; }
body.theme-light .kk-blatt-karte::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); }
body.theme-dark  .kk-blatt-karte::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); }
.kk-blatt-karte::-webkit-scrollbar-button,
.kk-blatt-karte *::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* ── Slider (im Blatt): flache Spur, großer runder Daumen ─────────────── */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 34px; margin: 0; background: transparent; cursor: pointer;
  --p: 0; --track: rgba(54, 49, 80, 0.14);
}
body.theme-dark input[type="range"] { --track: rgba(238, 240, 252, 0.16); }
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border: none; border-radius: 99px;
  background: linear-gradient(to right, var(--kk-blau) calc(var(--p) * 1%), var(--track) calc(var(--p) * 1%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; border: none; box-shadow: none;
  width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: var(--kk-blau);
}
input[type="range"]::-moz-range-track { height: 8px; border: none; border-radius: 99px; background: var(--track); }
input[type="range"]::-moz-range-progress { height: 8px; border: none; border-radius: 99px; background: var(--kk-blau); }
input[type="range"]::-moz-range-thumb { border: none; box-shadow: none; width: 24px; height: 24px; border-radius: 50%; background: var(--kk-blau); }

/* ── Monster-Spur: Monster-Eck + HeyHand fest übereinander unten links ───
   Es gibt keine Pillbar mehr — die Mobile-Ausweichpositionen der Bausteine
   (bottom 86/160) sind hier falsch und werden zurückgeholt. */
body.kk #hey-sprachspeicher-knopf { left: 14px !important; bottom: 14px !important; }
/* Kompakte Mund-Taste (MonsterTutor-Apps): bleibt bündig im kk-wrap-Raster
   (mobil 10px) statt der fixen 14px-Spur. */
@media (max-width: 768px) {
  body.kk #hey-sprachspeicher-knopf.sp-mund { left: 10px !important; bottom: 10px !important; }
}
body.kk #hey-hand-knopf { left: 24px !important; bottom: 128px !important; }

/* ── Kompakt-Stufen ──────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Monster-Spur freihalten: Fuss-Tasten beginnen rechts vom Monster. */
  .kk-fuss { padding-left: 88px; }
}
@media (max-width: 768px) {
  .kk-wrap { padding: 10px; gap: 8px; }
}
@media (max-height: 620px) {
  .kk-wrap { gap: 6px; }
  .kk-chip { min-width: 54px; min-height: 54px; font-size: 32px; }
  .kk-taste { min-height: 50px; }
  .kk-kachel { min-height: 56px; }
}

/* ── Feier-Moment (Meilenstein): das Monster des Kindes poppt kurz mittig
   in der Bühne auf, während Konfetti fliegt. KinderKit.feier() steuert es. */
#kk-feier {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
#kk-feier.an { display: flex; }
#kk-feier img {
  width: min(180px, 40%);
  border-radius: 24%;
  filter: drop-shadow(0 10px 30px rgba(10, 13, 30, 0.35));
}
@media (prefers-reduced-motion: no-preference) {
  #kk-feier.an img { animation: kk-feier-pop 2.6s ease both; }
  @keyframes kk-feier-pop {
    0% { transform: scale(0.2) rotate(-8deg); opacity: 0; }
    14% { transform: scale(1.12) rotate(3deg); opacity: 1; }
    24% { transform: scale(1) rotate(0deg); }
    82% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0; }
  }
}