/* ---------- Leiste ---------- */
.side {
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; min-height: 0; min-width: 0;
}
.headbtns { display: flex; gap: 5px; flex: none; }
.headbtns > .btn, .savewrap > .btn { flex-direction: column; gap: .1rem; min-height: 50px; padding: .25rem .32rem; font: 800 .66rem var(--font-ui); }
.headbtns > .btn .ico, .savewrap > .btn .ico { width: 1.35rem; height: 1.35rem; }
.title { font: 800 2.1rem var(--font-ui); letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; margin: 0; } /* wie die Unterüberschriften der Leiste */

/* Umschalter zwischen den Bereichen (--n: Anzahl, setzt die Shell) */
.tabs {
  display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px;
  padding: 4px; background: var(--bg); border-radius: 14px;
}
.tab {
  font: 800 1.08rem var(--font-ui); letter-spacing: .04em; color: var(--muted); background: none; /* Schrift wie der Titel, normale Schreibweise */
  border: 0; border-radius: 10px; min-height: 48px;
  cursor: pointer; touch-action: manipulation;
}
.tab[aria-selected="true"] { background: var(--btn); color: var(--fg); box-shadow: 0 1px 4px var(--shadow); }
.panel { display: flex; flex-direction: column; gap: 10px; }
.tools { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tools.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Werkzeugreihe oben: alle sichtbaren Knöpfe in einer Zeile (bei Melodie und Rhythmus mit + Zeile / − Zeile), etwas kleiner */
/* Jeder Knopf mindestens so breit wie seine Beschriftung, der Rest verteilt sich gleich (mit „zurück“ sind es bis zu
   sieben); passt es auf einer sehr schmalen Leiste nicht, bricht die Reihe um statt Knöpfe abzuschneiden */
.tools.toprow { display: flex; flex-wrap: wrap; gap: 3px; }
.tools.toprow > .btn { flex: 1 1 0; min-width: min-content; }
.tools.toprow .btn { min-height: 50px; padding: .25rem 3px; }
.tools.toprow .small { font-size: .57rem; white-space: nowrap; }
.tools.toprow .big .ico { width: 1.15rem; height: 1.15rem; }
/* + Zeile und − Zeile (nur Farbnoten und Rhythmus) als flache zweite Reihe, Symbol neben der Schrift */
.tools.toprow > #btnAddRow, .tools.toprow > #btnDelRow { flex: 1 1 40%; flex-direction: row; gap: .4rem; min-height: 36px; }
.tools.toprow > #btnAddRow .small, .tools.toprow > #btnDelRow .small { font-size: .72rem; }
.tools.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tools.t2 .btn { flex-direction: row; gap: .5rem; min-height: 48px; }
/* Zählzeiten von Hand: 1–6, + und Löschen */
.zbtns { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.zbtns .btn { padding: 0; font: 700 1.35rem/1 var(--font-display); }
.autos { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 6px; }
.autos.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.autos.three .btn { min-height: 48px; padding: .2rem .25rem; font-size: .82rem; line-height: 1.1; hyphens: manual; }
.tools .btn { flex-direction: column; gap: .15rem; min-height: 58px; padding: .3rem .15rem; }
.tools .btn .small { font-size: .72rem; }

/* Töne in zwei Reihen à 7: Stammtöne, darunter die hohen Töne mit Fis und B */
.palette { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pal { display: contents; }
.note {
  aspect-ratio: 1; border: 0; border-radius: 50%;
  background: var(--c); color: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 1.7rem/1 var(--font-display);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16);
  cursor: pointer; touch-action: manipulation; padding: 0;
}
.note:active { transform: scale(.93); }
/* Gruppen der Leiste: Notennamen, Notenwerte, Pausenwerte */
.group { display: flex; flex-direction: column; gap: 6px; }
.glabel { margin: 0; font: 800 .75rem var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.glabel span { text-transform: none; letter-spacing: 0; font-weight: 700; }
.values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.values .btn { flex-direction: column; gap: .1rem; min-height: 50px; padding: .3rem .1rem; }
.values .sym { height: 1.6rem; }
.values.v6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.values .vgap { display: block; }
.values .btn .small { font-size: .8rem; }
.actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; position: relative; }
.actions > .btn { padding: 0 .3rem; gap: .3rem; font-size: .88rem; line-height: 1.1; text-align: center; }
/* Namensfeld zum Speichern, klappt unter dem Knopf in der Leiste oben auf */
.savewrap { position: relative; display: flex; }
.savepop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(340px, calc(100vw - 32px));
  padding: 10px; background: var(--panel);
  border: 2px solid var(--btn-line); border-radius: 14px;
  box-shadow: 0 10px 24px var(--shadow);
}
.savepop .hint { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--muted); }
.savepop .hint:empty { display: none; }
.savepop .hint.warn { color: var(--danger); }

@media (max-width: 600px) { /* nur Handys; ein iPad (ab 768 px) behält die Leiste an der Seite */
  .side { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .note:active { transform: none; }
}
/* Schmale Leiste (iPad im Hochformat, Leiste 300 px): Titel, Reiter und Kopfknöpfe kompakter, damit nichts abgeschnitten wird */
@media (max-width: 900px) {
  .title { font-size: 1.6rem; letter-spacing: .03em; }
  .headbtns > .btn, .savewrap > .btn { padding: .25rem .25rem; font-size: .6rem; }
  .tab { font-size: .95rem; letter-spacing: 0; }
}
/* Block „Weitere Symbole“: die Wiederholungen beginnen eine eigene Reihe unter den Strichen */
.tools.three > .row2 { grid-column-start: 1; }

/* ---------- Üben und Spielen ---------- */
/* Umschalter unter den Reitern: „… schreiben“ oder „Üben und Spielen“; die gewählte Hälfte ist dunkel */
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; background: var(--panel); border-radius: 12px; }
.parts[hidden] { display: none; }
.part {
  font: 800 .92rem var(--font-ui); color: var(--muted); background: none;
  border: 0; border-radius: 9px; min-height: 40px; padding: 0 .4rem;
  cursor: pointer; touch-action: manipulation;
}
.part[aria-pressed="true"] { background: var(--fg); color: var(--board); }
/* Beim Üben zeigt die Leiste nur die Spiele: ohne Werkzeuge oben, ohne Blöcke zum Schreiben und ohne Knöpfe unten */
.side[data-part="play"] .tools.toprow, .side[data-part="play"] .actions, .side[data-part="play"] .panel > .block { display: none; }
.side:not([data-part="play"]) .panel > .play { display: none; }
.panel .play { gap: 7px; padding: 10px 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 4%, transparent); }
.play .game { gap: 7px; margin-bottom: 4px; }
/* Spielauswahl: große Kacheln, das gewählte Spiel ist dunkel. Die Schrift wird in schmaler Leiste kleiner, damit jedes
   Wort in eine Zeile passt (umbrochen wird nur zwischen Wörtern, nie mit Bindestrich) */
.gamepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; container-type: inline-size; }
.gtile {
  min-height: 62px; padding: .3rem .2rem; border: 2px solid var(--btn-line); border-radius: 14px;
  background: var(--btn); color: var(--fg); font: 800 min(.9rem, 4.3cqi)/1.15 var(--font-ui); text-align: center;
  cursor: pointer; touch-action: manipulation;
}
.gtile[aria-pressed="true"] { background: var(--fg); color: var(--board); border-color: var(--fg); }
.gtile:active { transform: scale(.97); }
/* Beim Tonnamen-Quiz „Melodie/Lied durchgehen“ braucht es Töne, Tonraum und Vorzeichen nicht */
.play[data-game="quiz"] .songmode { display: none; }
/* Leere Übungstafel: noch keine Zeilennummern */
.grid.blankboard .rnum { visibility: hidden; }
/* Auf der Übungstafel gibt es kein Schritt für Schritt (abgespielt wird nur das Spiel) */
.app.practice .playfab [data-play="step"], .app.practice .playfab [data-play="stepSound"] { display: none; }
.ghint { margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--muted); }
/* Auswahl aus drei (two, four: zwei, vier) Möglichkeiten; die gewählte ist dunkel */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg .btn { flex-direction: column; gap: .1rem; min-height: 48px; padding: .3rem .25rem; font-size: .86rem; line-height: 1.1; text-align: center; hyphens: manual; }
.seg .btn .small { font-size: .66rem; line-height: 1.15; opacity: .85; }
.seg .btn .acc { font: 700 1.2rem/1 var(--font-display); }
.seg.two .btn { flex-direction: row; gap: .35rem; }
.btn.wide { width: 100%; min-height: 44px; font-size: .85rem; }
.btn.gamego { min-height: 56px; margin-top: 4px; background: var(--fg); color: var(--board); border-color: var(--fg); font-size: 1.05rem; }
/* Tonraum: zwei Felder mit ◀ Ton ▶ */
.rangerow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rgroup { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 4px; }
.rgroup .btn { padding: 0; min-height: 44px; font-size: .8rem; }
.rval { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rval .small { font: 700 .66rem var(--font-ui); color: var(--muted); }
.rval output { font: 700 1.35rem/1.2 var(--font-display); }