/* Farben, Schriften und Grundlayout: links die Tafel, rechts die Leiste mit allen Tönen */
:root {
  --play-bg: rgba(255, 196, 0, .42); /* Balken hinter der Stelle, die beim Abspielen klingt */
  --bg: #dfe5e1;
  --board: #fbfcfa;
  --frame: #aab5af;
  --frame-edge: #8d9993;
  --panel: #eef2ef;
  --fg: #18211d;
  --muted: #586861;
  --line: #bcc7c1;
  --btn: #ffffff;
  --btn-line: #c3cdc7;
  --ring: #18211d;
  --danger: #b3261e;
  --ok: #1e8449; --bad: #c62828; /* Spiele: richtig, falsch */
  --shadow: rgba(24, 33, 29, .18);
  /* Playwrite DE Grund ist die Deutschland-Grundschrift für die Grundschule; die Schrift hat nur Stärken bis 400, fett wird vom Browser verstärkt */
  --font-display: "Playwrite DE Grund", "Andika", "Trebuchet MS", system-ui, sans-serif;
  --font-ui: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --play-bg: rgba(255, 196, 0, .3);
    --bg: #101614; --board: #1c2925; --frame: #46524d; --frame-edge: #33403a;
    --panel: #17201d; --fg: #eaf1ed; --muted: #9aaba3; --line: #41504a;
    --btn: #22302b; --btn-line: #3a4943; --ring: #eaf1ed; --danger: #ff8f86; --ok: #2e9d5b; --bad: #e0483e;
    --shadow: rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px var(--font-ui);
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.app {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 370px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}
/* Leiste oben über die ganze Breite: links der Titel, in der Mitte die drei Tafeln, rechts Liedersammlung,
   Einstellungen und der Knopf zum Einklappen */
.topbar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(0, 520px) 1fr; align-items: center; gap: 12px; }
.topbar .title { justify-self: start; padding-left: 6px; }
.topbar .tabs { background: var(--panel); }
.areanav { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topright { justify-self: end; display: flex; align-items: center; gap: 6px; }
.fab.topfold { width: 40px; height: 40px; box-shadow: none; }
.fab.topfold .ico { width: 1.2rem; height: 1.2rem; }
.app.notop { grid-template-rows: minmax(0, 1fr); }
.app.notop > .topbar { display: none; }
/* eingeklappt: ein kleiner Griff oben in der Mitte holt sie zurück */
.topshow {
  position: fixed; top: 0; left: 50%; z-index: 25; transform: translateX(-50%);
  display: flex; align-items: center; gap: .35rem; padding: 2px 14px 4px;
  border: 2px solid var(--btn-line); border-top: 0; border-radius: 0 0 12px 12px;
  background: var(--btn); color: var(--muted); font: 800 .72rem var(--font-ui); cursor: pointer;
}
.topshow[hidden] { display: none; }
.topshow .ico { width: 1rem; height: 1rem; }
/* Leiste eingeklappt: die Tafel nimmt die ganze Breite */
.app.collapsed { grid-template-columns: minmax(0, 1fr); }
.app.collapsed > .side { display: none; }
/* Vorführen: nur die Tafel mit den runden Knöpfen, ohne Leisten und mit schmalem Rand */
body.present { padding: 4px max(4px, env(safe-area-inset-right, 0px)) 4px max(4px, env(safe-area-inset-left, 0px)); }
.present .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.present .app > .topbar, .present .app > .side, .present .topshow, .present .fab.sidetoggle { display: none; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- Knöpfe ---------- */
.btn {
  font: 800 .95rem var(--font-ui);
  color: var(--fg); background: var(--btn);
  border: 2px solid var(--btn-line); border-radius: 12px;
  min-height: 48px; padding: 0 .6rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  cursor: pointer; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.on { background: var(--fg); color: var(--board); border-color: var(--fg); }
.btn .big { font: 700 1.5rem/1 var(--font-display); }
.btn .small { font-size: .78rem; font-weight: 700; }
.btn.danger { color: var(--danger); }
.btn.confirm { background: var(--danger); border-color: var(--danger); color: var(--board); }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.btn .big .ico { width: 1.5rem; height: 1.5rem; display: block; }
.sym { display: block; height: 100%; width: auto; overflow: visible; }
/* Taktart als zwei Zahlen übereinander (auf der Tafel und auf den Knöpfen) */
.mtr {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--font-display); font-weight: 700; line-height: .9;
}

/* Namensfeld zum Speichern (im Menü und in der Leiste) */
.saverow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.saverow input {
  font: 700 16px var(--font-ui); color: var(--fg); background: var(--btn);
  border: 2px solid var(--btn-line); border-radius: 12px;
  min-height: 48px; padding: 0 .75rem; min-width: 0;
  -webkit-user-select: text; user-select: text;
}

/* ---------- Rahmen der Tafel, gemeinsam für alle Bereiche ---------- */
.boardwrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.toast {
  position: absolute; left: 50%; bottom: 36px; z-index: 20;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px);
  background: var(--fg); color: var(--board);
  padding: 10px 16px; border-radius: 12px;
  font-weight: 800; font-size: .95rem; line-height: 1.3; text-align: center;
  box-shadow: 0 8px 20px var(--shadow); pointer-events: none;
}
.toast.warn { background: var(--danger); }
.board {
  flex: 1; min-height: 0; display: flex;
  background: var(--board);
  border: 10px solid var(--frame);
  border-radius: 18px 18px 6px 6px;
  box-shadow: 0 2px 0 var(--frame-edge), inset 0 2px 10px var(--shadow);
  overflow-x: auto; overflow-y: hidden;
}
/* Abspielen, Einzählen, Metronom: runde Knöpfe unten rechts auf der Tafel, über den Zeichen */
.playfab {
  position: absolute; right: 24px; bottom: 30px; z-index: 15;
  display: flex; align-items: center; gap: 10px;
}
.fab {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 2px solid var(--btn-line); border-radius: 50%; background: var(--btn); color: var(--fg);
  box-shadow: 0 3px 10px var(--shadow); cursor: pointer; touch-action: manipulation;
}
.fab .ico { width: 1.5rem; height: 1.5rem; }
.fab.on { background: var(--fg); color: var(--board); border-color: var(--fg); }
.fab.play { width: 80px; height: 80px; background: var(--fg); color: var(--board); border-color: var(--fg); }
.fab.play .ico { width: 2.3rem; height: 2.3rem; }
.fab.play.on { background: var(--danger); border-color: var(--danger); }
/* Ein-/Ausklappen: großer Griff am rechten Rand der Tafel, senkrecht in der Mitte; eingeklappt zeigt der Pfeil nach links */
.fab.sidetoggle { position: absolute; top: 50%; right: 10px; z-index: 15; width: 52px; height: 84px; border-radius: 26px; transform: translateY(-50%); }
.fab.sidetoggle .ico { width: 1.7rem; height: 1.7rem; }
.app.collapsed .fab.sidetoggle .ico { transform: scaleX(-1); }
/* Tempo: die Zahl groß, darunter klein „Tempo“; offen wie die anderen Schalter dunkel */
.fab.tempo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.fab.tempo .tnum { font: 800 1.05rem/1 var(--font-ui); }
.fab.tempo .tlbl { font: 800 .5rem/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.fab.tempo[aria-expanded="true"] { background: var(--fg); color: var(--board); border-color: var(--fg); }
.tempopop {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 48px));
  padding: 12px 14px 10px; border: 2px solid var(--btn-line); border-radius: 18px;
  background: var(--btn); box-shadow: 0 8px 24px var(--shadow);
}
.tempopop .tphead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font: 800 .74rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tempopop .tphead output { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--fg); }
.tempopop .tprow { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 10px; align-items: center; }
.tempopop .tprow .btn { padding: 0; }
.tempopop input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--fg); }
.tempopop .tpscale { display: flex; justify-content: space-between; padding: 0 58px; font: 700 .7rem var(--font-ui); color: var(--muted); }
.fab .cnt4 { display: flex; gap: 2px; align-items: flex-end; }
.fab .cnt4 i { font: 800 .62rem/1 var(--font-ui); font-style: normal; }
.fab .cnt4 i:first-child { font-size: .95rem; }
.tray {
  height: 12px; margin-inline: 10%;
  background: var(--frame);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 0 var(--frame-edge);
}

@media (max-width: 600px) { /* nur Handys; ein iPad (ab 768 px) behält die Leiste an der Seite */
  html, body { height: auto; }
  .app { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled) { transform: none; }
}

/* ---------- Verdecken (alle Bereiche) ---------- */
/* Tuch: deckt ab einer Zeile alles ab, mit einem Hinweis oben; ein Tipp darauf deckt die nächste Zeile auf */
.cloth {
  position: relative; z-index: 4;
  display: flex; justify-content: center; align-items: flex-start;
  border: 2px dashed var(--btn-line); border-radius: 14px;
  background: repeating-linear-gradient(135deg, var(--panel) 0 16px, var(--board) 16px 32px);
  cursor: pointer; touch-action: manipulation;
}
.clothtip {
  margin-top: 10px; padding: 6px 14px; border-radius: 999px;
  background: var(--btn); border: 2px solid var(--btn-line); color: var(--muted);
  font: 800 .85rem var(--font-ui); white-space: nowrap; pointer-events: none;
}
/* ?-Karte über einem Zeichen. Das „?“ in der Grundschrift (Playwrite DE Grund) in ihrer kräftigsten echten Stärke 400:
   Fetter gibt es die Schrift nicht, ein nachgebautes Fett sähe nicht mehr nach Grundschrift aus. */
.qcard {
  display: grid; place-items: center;
  border-radius: 12px; background: var(--card, var(--fg)); color: var(--card-fg, var(--board));
  font: 400 1.6rem/1 var(--font-display); box-shadow: 0 3px 8px var(--shadow);
  cursor: pointer;
}
/* Rhythmus und Notenblatt sind schwarz gezeichnet; dort ist die Karte türkis, damit sie nicht wie ein Notenzeichen
   wirkt (Türkis gehört zu keinem Ton). Die Farbnoten behalten die dunkle Karte, die sich von den bunten Punkten abhebt. */
.grid.rhy, .sheet { --card: #0f766e; --card-fg: #fff; }
/* Leiste: Schalter fürs Mitspielen unter den Knöpfen */
.btn.stephide { width: 100%; margin-top: 6px; min-height: 44px; font-size: .85rem; }

/* ---------- Üben und Spielen (alle Bereiche) ---------- */
/* Leiste des Spiels unten auf der Tafel: beim Echo in der Mitte, beim Quiz über die ganze Breite (die runden Knöpfe
   machen dann Platz) */
.gamebar {
  position: absolute; left: 24px; bottom: 30px; z-index: 16;
  display: flex; align-items: flex-end; gap: 10px;
}
.gamebar.echo { left: 50%; transform: translateX(-50%); align-items: center; }
.gamebar.quiz { right: 24px; }
.boardwrap.game-quiz .playfab { display: none; }
/* Unten auf der Tafel bleibt so viel frei, dass die Leiste nichts verdeckt */
.boardwrap.game-echo .grid { padding-bottom: 116px; }
.boardwrap.game-quiz .grid { padding-bottom: 170px; } /* dazu der Hinweis über der Leiste */
.boardwrap.game-quiz .sheet { padding-bottom: 230px; }
.gbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 70px; height: 70px; padding: 0 10px; border-radius: 20px;
  border: 2px solid var(--btn-line); background: var(--btn); color: var(--fg); box-shadow: 0 3px 10px var(--shadow);
  font: 800 .7rem/1.1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.gbtn .ico { width: 1.6rem; height: 1.6rem; }
.gbtn.main { background: var(--fg); color: var(--board); border-color: var(--fg); min-width: 96px; }
/* Großer Knopf in der Mitte (Rhythmus-Echo: Auflösen, danach Neuer Rhythmus): Zeichen neben der Schrift */
.gbtn.big { flex-direction: row; gap: 10px; min-width: 240px; height: 76px; padding: 0 26px; font-size: 1.15rem; }
.gbtn.big .ico { width: 2rem; height: 2rem; }
.gbtn:disabled { opacity: .4; cursor: default; }
.gbtn:active:not(:disabled) { transform: scale(.96); }
.gctl { display: flex; gap: 8px; flex: none; }
.gctl .gbtn { min-width: 62px; height: 62px; }
/* Antworten: wie eine Klaviatur (Stammtöne unten, Halbtöne darüber dazwischen) oder runde Farbpunkte in einer Reihe */
.qkeys { flex: 1; min-width: 0; padding: 8px; border-radius: 18px; background: var(--btn); border: 2px solid var(--btn-line); box-shadow: 0 3px 10px var(--shadow); }
.qkeys.piano { display: grid; gap: 5px 3px; }
.qkeys.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.qkey {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 58px; padding: 0 1px; border: 0; border-radius: 12px;
  background: var(--c); color: #000; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16);
  font: 700 1.25rem/1 var(--font-display); cursor: pointer; touch-action: manipulation; overflow: hidden;
}
.qkey.black { min-height: 44px; font-size: .92rem; border-radius: 10px; }
.qkey.black span + span { font-size: .85em; }
/* Namen tippen: die Knöpfe ohne Farbe (sie würde die Antwort verraten); der richtige färbt sich mit der Lösung */
.qkey.plain:not(.right):not(.shown):not(.wrong) { background: var(--board); color: var(--fg); box-shadow: inset 0 0 0 2px var(--btn-line), inset 0 -4px 0 rgba(0, 0, 0, .16); }
.qkeys.row .qkey { flex: 0 1 64px; min-width: 40px; aspect-ratio: 1; min-height: 0; border-radius: 50%; font-size: 1.6rem; }
/* Wörter (höher, tiefer, gleich; Schritt, Sprung; Nummern der Rhythmen): breite Knöpfe ohne Farbe */
.qkeys.words { display: flex; justify-content: center; gap: 10px; }
.qkeys.words .qkey {
  flex: 0 1 190px; min-height: 66px; flex-direction: row; gap: .4rem;
  background: var(--board); color: var(--fg); box-shadow: inset 0 0 0 2px var(--btn-line), inset 0 -4px 0 rgba(0, 0, 0, .16);
  font: 800 1.35rem/1 var(--font-ui);
}
.qkeys.words .qkey .ico { width: 1.6rem; height: 1.6rem; }
/* Viele Antworten (Rhythmus legen, Notenwerte) brechen um; Liednamen in kleinerer Schrift */
.qkeys.words { flex-wrap: wrap; }
.qkeys.words .qkey.name { font-size: 1rem; line-height: 1.15; padding: 0 .6rem; text-align: center; }
/* Bausteine von „Rhythmus legen“: ihre Notenzeichen nebeneinander */
.qkey .blk { display: flex; align-items: flex-end; }
.qkey .blk .sym { height: 3.8rem; width: auto; margin: -.4rem -.2rem; }
/* Ohne Antwortknöpfe (Note setzen: getippt wird auf die Notenlinien) stehen die Knöpfe der Leiste rechts */
.gamebar.quiz .gfeed + .gctl { margin-left: auto; }
/* Rückmeldung: richtig grün, falsch rot. Farbige Knöpfe bekommen einen Ring (ihre Farbe bleibt zu sehen, ein falscher
   ohne Farbe verrät sie auch jetzt nicht), Wörter werden ganz grün oder rot. Nur mit „Lösung“ gezeigt: grün umrandet */
.qkey.right, .qkey.shown { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), 0 0 0 4px var(--board), 0 0 0 8px var(--ok); }
.qkey.right { animation: qright .5s ease; }
.qkeys .qkey.wrong { opacity: .5; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16), 0 0 0 4px var(--board), 0 0 0 8px var(--bad); animation: qwrong .4s ease; }
.qkeys .qkey.plain.wrong { background: var(--board); color: var(--fg); }
.qkeys.words .qkey.right { background: var(--ok); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.qkeys.words .qkey.shown { color: var(--ok); box-shadow: inset 0 0 0 4px var(--ok), inset 0 -4px 0 rgba(0, 0, 0, .16); }
.qkeys.words .qkey.wrong { background: var(--bad); color: #fff; opacity: .85; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
@keyframes qright { 40% { transform: scale(1.15); } }
@keyframes qwrong { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
/* Hinweis mittig über der Leiste: grün „Richtig!“, rot „Leider falsch“, grün umrandet „Das ist die Lösung“ */
.gfeed {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 24px 10px 16px; border-radius: 999px;
  background: var(--btn); color: #fff; box-shadow: 0 3px 10px var(--shadow);
  font: 800 1.35rem/1.1 var(--font-ui); white-space: nowrap; pointer-events: none;
}
.gfeed .ico { width: 1.9rem; height: 1.9rem; flex: none; }
.gfeed.right { background: var(--ok); animation: qpop .35s ease; }
.gfeed.wrong { background: var(--bad); animation: qshake .4s ease; }
.gfeed.shown { color: var(--ok); box-shadow: inset 0 0 0 3px var(--ok), 0 3px 10px var(--shadow); animation: qpop .35s ease; }
@keyframes qpop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
@keyframes qshake { 20%, 60% { transform: translateX(calc(-50% - 6px)); } 40%, 80% { transform: translateX(calc(-50% + 6px)); } }
/* Die Frage groß über der Tafel; unten bleibt Platz für die Leiste */
.quizview {
  position: absolute; top: 10px; left: 10px; right: 10px; bottom: 22px; z-index: 12;
  display: grid; place-items: center; padding: 16px 16px 200px; border-radius: 8px;
  background: var(--board); color: var(--fg);
}
/* Startseite eines Spiels: Name, Erklärung für die Kinder und „Los geht's!“ mittig auf der Tafel */
.gameintro {
  position: absolute; top: 10px; left: 10px; right: 10px; bottom: 22px; z-index: 14;
  display: grid; place-items: center; padding: 24px 80px; border-radius: 8px;
  background: var(--board); color: var(--fg);
}
.gintro { max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.gintro h2 { margin: 0; font: 800 2.6rem/1.1 var(--font-ui); }
.gintro p { margin: 0; font: 700 1.5rem/1.45 var(--font-ui); text-wrap: pretty; }
.gintro .gbtn.big { margin-top: 8px; min-width: 280px; height: 84px; font-size: 1.4rem; }
/* Vor „Abspielen“ ist die Leiste blass, nur dieser Knopf und „Ende“ nicht */
.gamebar.gated .qkey, .gamebar.gated .gbtn:not([data-act="end"]):not([data-act="start"]) { opacity: .4; }
/* Schmale Tafel (z. B. iPad im Hochformat): Die Leiste des Echos rückt über die runden Knöpfe; beim Quiz stehen die
   Knöpfe anhören, Lösung, Ende über den Antworten, die so die ganze Breite bekommen */
.boardwrap { container-type: inline-size; }
@container (max-width: 880px) {
  .gamebar.echo { bottom: 124px; }
  .boardwrap.game-echo .grid { padding-bottom: 210px; }
  .gamebar.quiz { flex-direction: column; align-items: stretch; gap: 8px; }
  .gamebar.quiz .gctl { order: -1; justify-content: flex-end; }
  .qkey { font-size: 1.05rem; }
  .qkey.black { font-size: .78rem; }
  .quizview { padding-bottom: 290px; }
  .boardwrap.game-quiz .grid { padding-bottom: 250px; }
  .boardwrap.game-quiz .sheet { padding-bottom: 310px; }
}
@media (prefers-reduced-motion: reduce) {
  .qkey.right, .qkeys .qkey.wrong, .gfeed { animation: none; }
}