/* ---------- Menü (Slide-in) ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .35);
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(380px, 100vw);
  background: var(--panel); color: var(--fg);
  box-shadow: -10px 0 30px var(--shadow);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) 16px;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(105%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.drawer.open { transform: none; visibility: visible; transition: transform .22s ease; }
/* Die Seitenleiste zeigt entweder die Liedersammlung oder die Einstellungen */
.drawer[data-mode="songs"] [data-part="settings"], .drawer[data-mode="settings"] [data-part="songs"] { display: none !important; }
.sizes.uiscale { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
/* Bekannte Lieder: Suchfeld, darunter nach Thema oder alphabetisch */
.songsearch {
  width: 100%; min-height: 48px; margin-bottom: 8px; padding: 0 .75rem;
  font: 700 16px var(--font-ui); color: var(--fg); background: var(--btn);
  border: 2px solid var(--btn-line); border-radius: 12px;
  -webkit-user-select: text; user-select: text;
}
.sizes.sortrow { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }
/* Größe: − Regler + und Feld für die Prozentzahl */
.uirow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; gap: 8px; align-items: center; }
.uirow > .btn { min-height: 44px; padding: 0; font-size: 1.3rem; }
.uirow input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--fg); }
.uinum { display: flex; align-items: center; gap: 3px; font-weight: 800; }
.uinum input { width: 4.2em; min-height: 44px; padding: 0 6px; border: 2px solid var(--btn-line); border-radius: 10px; background: var(--btn); color: var(--fg); font: 800 1rem var(--font-ui); text-align: right; }
.drawer h2 { font: 800 1.3rem var(--font-ui); letter-spacing: .04em; text-transform: uppercase; margin: 0; } /* wie der Titel Musiktafel */
.drawer h3 { font: 800 .8rem var(--font-ui); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* Zwei Gruppen: der offene Modus und darunter, abgesetzt, die Einstellungen für alle Modi */
.mgroup { display: flex; flex-direction: column; gap: 18px; }
.mgroup.global { margin-top: 8px; padding: 14px 12px; border-radius: 14px; background: var(--bg); }
.mtitle {
  font: 800 1.1rem var(--font-ui); letter-spacing: .04em; text-transform: uppercase; margin: 0;
  padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.mtitle .kicker { display: block; font: 800 .7rem var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mgroup.global .mtitle { border-bottom: 0; padding-bottom: 0; }
/* Die Einstellungen des Modus als eigene Karte */
.mcard {
  display: flex; flex-direction: column; gap: 16px;
  padding: 12px; border-radius: 14px; border: 2px solid var(--line);
}
.mcard .ctitle { color: var(--fg); }
.drawer .hint { margin: 6px 0 0; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.drawer .hint.warn { color: var(--danger); }
.songs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.song {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  background: var(--btn); border: 2px solid var(--btn-line); border-radius: 12px; padding: 6px 6px 6px 12px;
}
.song.current { border-color: var(--fg); }
.song.one { grid-template-columns: minmax(0, 1fr) auto; }
.song .name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song .date { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); }
.song .btn { min-height: 44px; font-size: .85rem; }
.empty { margin: 0; font-size: .88rem; color: var(--muted); }
.themes { display: flex; flex-direction: column; gap: 8px; }
.theme {
  text-align: left; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px 12px; font-weight: 700;
}
.theme .desc { font-size: .78rem; font-weight: 700; opacity: .8; }
/* An/Aus-Schalter: links, was geschaltet wird, rechts der Zustand */
.switches { display: flex; flex-direction: column; gap: 8px; }
.switch {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  text-align: left; padding: 10px 12px; font-weight: 800;
}
.switch.on { background: var(--btn); color: var(--fg); border-color: var(--btn-line); }
.switch .state {
  min-width: 3.2em; padding: 4px 10px; border-radius: 999px; text-align: center;
  font-size: .8rem; border: 2px solid var(--btn-line); color: var(--muted);
}
.switch.on .state { background: var(--fg); border-color: var(--fg); color: var(--board); }
.switch .desc { grid-column: 1 / -1; font-size: .78rem; font-weight: 700; opacity: .8; }
.temporow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.temporow input { width: 100%; min-height: 44px; accent-color: var(--fg); }
.temporow output { font-weight: 800; min-width: 6.5em; text-align: right; }
/* Ganz unten im Menü, auch wenn es kurz ist */
.drawer .version { margin: auto 0 0; font-size: .75rem; font-weight: 700; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open { transition: none; }
}

/* Zwischenüberschriften der bekannten Lieder (Kinderlieder, Weihnachten …) */
.sgroup { margin: 8px 0 -2px; font: 800 .74rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sgroup:first-child { margin-top: 0; }