:root {
  --bg: #141416; --panel: #1d1d21; --panel2: #26262b; --line: #34343b;
  --text: #ececef; --muted: #9a9aa3; --accent: #ff4d5e; --accent-soft: rgba(255, 214, 0, .30);
  --accent-edge: #ffb800; --next: rgba(80, 170, 255, .16); --ok: #3ecf8e; --warn: #ffb020;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "Segoe UI", sans-serif; }
/* Kein „Zum Aktualisieren nach unten ziehen“ am Handy – würde laufende Musik abbrechen */
html, body { overscroll-behavior: none; }
/* nur auf echte Scroll-Bereiche – auf allen Elementen (z. B. Kacheln mit overflow: hidden) schluckt es das Wischen */
#pdfPane, #compact, #fpList, #mLib, #mLists, #mQueue, #mPdf, #mDisplay, #mStartEd { overscroll-behavior: contain; }
button, select, input { font: inherit; color: inherit; }
button { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
button:hover { border-color: #55555f; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.on { background: #3a3320; border-color: var(--accent-edge); color: #ffd98a; }
button:disabled { opacity: .5; cursor: default; }
select, input[type=text], input[type=number] { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }

#app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100vh; }   /* nie breiter als der Bildschirm */
header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
header .grow { flex: 1; }
header { position: relative; }
#settings { position: absolute; right: 12px; top: calc(100% + 4px); width: min(380px, calc(100vw - 24px)); z-index: 10; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: grid; gap: 14px; }
#settings.hidden { display: none; }
#settings .hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
#settings .ver { color: var(--muted); font-size: 12px; text-align: right; border-top: 1px solid var(--line); padding-top: 8px; }
.seg .fine { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.seg .fine .r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.seg .fine button { padding: 2px 8px; font-size: 12px; }
.linkbtn { background: none; border: none; padding: 0; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
#status { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
#stTrack { font-weight: 700; font-size: 16px; }
#stTime { font-variant-numeric: tabular-nums; font-size: 16px; color: var(--accent-edge); font-weight: 700; }
#stRow { display: none; }   /* Choreo-Zeile nicht in der Kopfzeile – sie steht groß in der Choreo */
.chk { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }
label.file { position: relative; overflow: hidden; }
label.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

#main { display: grid; grid-template-columns: var(--split, 52%) 6px 1fr; min-height: 0; }
#left { display: flex; flex-direction: column; min-height: 0; background: #000; }
#videoWrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
video { max-width: 100%; max-height: 100%; width: 100%; background: #000; cursor: pointer; }
#blank { position: absolute; inset: 0; background: #000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #666; cursor: pointer; container-type: size; text-align: center; padding: 8px; box-sizing: border-box; }
#blank.on { display: flex; }
/* Bild aus: groß die Position im Track, darüber der Track, darunter die Wiederholung */
#blank .bLbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
#blank .bTitle { color: #bbb; font-weight: 700; font-size: clamp(14px, 7cqh, 28px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#blank .bTime { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; font-size: clamp(32px, min(26cqh, 17cqw), 150px); }
#blank .bReps { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 0 12px; font-size: clamp(14px, 7cqh, 30px); }
#blank .bReps:empty, #blank .bTitle:empty { display: none; }

#controls { background: var(--panel); border-top: 1px solid var(--line); padding: 6px 10px 8px; display: grid; gap: 6px; }
#seekRow { position: relative; height: 22px; }
#seek { position: absolute; inset: 0; width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* Track-Leiste über der Zeitleiste: ein Feld pro Track, Breite = Länge im Video */
#strip { position: relative; height: 22px; margin: 0 8px; }
#strip:empty { display: none; }
#strip .sg { position: absolute; top: 0; bottom: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; line-height: 20px; padding: 0 3px; overflow: hidden; white-space: nowrap; text-overflow: clip; cursor: pointer; }
#strip .sg:nth-child(even) { background: #2e2e35; }
#strip .sg:hover { color: var(--text); border-color: #55555f; }
#strip .sg b { color: var(--text); font-weight: 700; margin-right: 3px; }
#strip .sg.cur { z-index: 1; background: var(--accent-edge); border-color: var(--accent-edge); color: #2a2000; }
#strip .sg.cur b { color: #000; }
#strip .sg.chap { opacity: .7; }
#btnRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#btnRow button { padding: 4px 9px; }
/* Play größer und farbig, damit man ihn sofort trifft */
#btnRow #cPlay { font-size: 20px; line-height: 1; min-width: 64px; padding: 6px 14px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
#btnRow .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
#time { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 120px; }
#vol { width: 80px; accent-color: var(--accent); }
#btnRow select { max-width: 170px; }

#divider { cursor: col-resize; background: var(--line); touch-action: none; position: relative; }
#divider:hover, #divider.drag { background: #55555f; }
#divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 36px; transform: translate(-50%, -50%); background: #77777f; border-radius: 2px; }
/* Hochformat (Tablet/Handy hochkant): Video oben, Choreo unten, Trennlinie waagerecht */
@media (orientation: portrait) {
  #main { grid-template-columns: 1fr; grid-template-rows: var(--splitV, 42%) 12px 1fr; }
  #divider { cursor: row-resize; }
  #divider::after { width: 40px; height: 3px; }
}
/* Touch-Geräte: größere Bedienelemente */
@media (pointer: coarse) {
  button, select { min-height: 38px; }
  #btnRow button { padding: 6px 12px; }
  #seekRow { height: 30px; }
  #divider { min-width: 12px; }
}
/* Kopfzeile: bis 1100 px Breite nur Status + „☰ Menü“ (sonst bricht sie auf Tablets/Fold in 3 Zeilen um) */
#bMenu { display: none; }
@media (max-width: 1100px) {
  header { gap: 6px; padding: 6px 8px; }
  #status { flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 0; }
  header .grow { display: none; }
  #bMenu { display: inline-block; }
  /* Nebenfunktionen hinter dem Menü-Knopf */
  header .more { display: none; }
  header.open .more { display: inline-flex; }
  header.open { padding-bottom: 10px; }
  /* Menü offen: Track/Zeit ausblenden (lenkt ab), Menü-Knopf rechts oben */
  header.open #status { display: none; }
  /* „✕ Schließen“ allein in der ersten Zeile, rechtsbündig */
  header.open #bMenu { order: -1; flex: 0 0 100%; text-align: right; background: none; border: none; padding: 2px 4px 6px; color: var(--muted); min-height: 0; }
}
@media (max-width: 700px) {
  /* Reiter wie im Musikplayer: Symbol über dem Text; ☰ ohne Wort – damit Track und Zeit daneben Platz haben */
  .navTabs { flex: none; }
  .navTabs button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 6px; font-size: 12px; line-height: 1.2; }
  .navTabs .ic { font-size: 17px; }
  header:not(.open) #bMenu { padding: 6px 12px; font-size: 18px; }
  header:not(.open) #bMenu .lt { display: none; }
  /* Track-Anzeige höchstens zwei Zeilen: oben der Name (einzeilig, zu lang -> „…“), darunter Punkt und Zeit */
  #status { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "t t t" "d s r"; column-gap: 6px; row-gap: 1px; align-items: center; min-width: 0; overflow: hidden; }
  #stTrack { grid-area: t; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #liveDot { grid-area: d; }
  #stTime { grid-area: s; font-size: 14.5px; }
  /* Handy: offenes Menü als saubere Liste untereinander, volle Breite. Releases/Musik stehen schon in der
     geschlossenen Kopfzeile – im Menü würden sie nur doppelt auftauchen */
  header.open { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 12px 14px; }
  header.open #navTabs { display: none; }
  header.open #bMenu { align-self: flex-end; flex: none; }
  /* ohne width: 100% – die Spalte streckt die Knöpfe; sonst kommt der Innenabstand obendrauf und die Seite wird breiter */
  header.open button.more { display: block; box-sizing: border-box; min-width: 0; max-width: 100%; padding: 11px 12px; font-size: 15px; text-align: center; white-space: normal; }
  header.open label.more { display: flex; align-items: center; gap: 10px; padding: 4px 2px; font-size: 15px; color: var(--text); }
  /* width: 0 + flex: 1 – sonst bestimmt der längste Eintrag („alles abdecken – aktuelle Zeile spicken“) die Mindestbreite */
  header.open label.more select { flex: 1 1 0; width: 0; min-width: 0; padding: 9px 8px; font-size: 15px; }
  header.open label.more input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
}

/* Steuerleiste richtet sich nach ihrer eigenen Breite (Container Query), nicht nach dem Bildschirm */
#controls { container-type: inline-size; }
#btnRow .spacer { flex: 1; }
#cMore { display: none; }
#extra { display: contents; }
/* schmale Leiste: „⋯“ öffnet Ton, Tempo, Untertitel, Bild aus, Vollbild als schwebendes Fenster (setExtraPop in choreo.js) */
#extra.pop { position: fixed; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: min(340px, calc(100% - 20px)); box-sizing: border-box; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
#extra.pop select, #extra.pop button { min-width: 0; box-sizing: border-box; font-size: 15px; padding: 9px 8px; }
#extra.pop #selAudio, #extra.pop #selSub { flex: 1 1 100%; }
#extra.pop #selRate, #extra.pop #cBlank { flex: 1 1 30%; }
#extra.pop #cFull { flex: 0 0 auto; padding: 9px 14px; }
#extra.pop #volIcon { flex: none; }
#extra.pop #vol { flex: 1 1 60%; }
/* Handy/Tablet: Lautstärke über die Tasten am Gerät – am PC bleibt der Regler */
@media (pointer: coarse) { #extra.pop #volIcon, #extra.pop #vol { display: none; } }
@container (max-width: 640px) {
  #btnRow { gap: 5px; flex-wrap: nowrap; }
  #btnRow > button { flex: 1 1 auto; padding: 6px 4px; min-width: 0; }
  #btnRow > #cPlay { flex: 1.6 1 auto; padding: 6px 4px; min-width: 0; }
  #btnRow .sep, #btnRow .wide, #btnRow .spacer, #btnRow .lt { display: none; }
  #cMore { display: inline-block; flex: 0 0 auto !important; padding: 6px 10px !important; }
  #extra { display: none; }
  /* schmal: nur Track-Nummern – der volle Name steht oben in der Kopfzeile */
  #strip .sg { font-size: 11px; text-align: center; padding: 0 1px; }
  #strip .sg .nm { display: none; }
  #strip .sg b { margin-right: 0; }
}
/* Hochformat: Video nimmt die volle Breite im 16:9-Format, bis die Trennlinie verschoben wird */
@media (orientation: portrait) {
  #main:not(.splitSet) { grid-template-rows: auto 12px 1fr; }
  #main:not(.splitSet) #videoWrap { flex: none; aspect-ratio: 16 / 9; }
}

/* Kompaktansicht: nur die Choreo-Zeilen groß, ohne PDF-Seite */
#compact { position: absolute; inset: 0; overflow-y: auto; overflow-anchor: none; padding: 12px; display: none; flex-direction: column; gap: 10px; background: var(--bg); }
#cHidden { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.compact #compact { display: flex; }
body.compact #pdfPane { display: none; }
#compact .cHead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#compact .cHead b { font-size: 20px; }
#compact .cHead span { color: var(--accent-edge); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
/* Eigene Markierungen & Notizen */
#tools { position: absolute; top: 8px; right: 22px; z-index: 6; display: flex; gap: 4px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
#tools .tgroup { display: none; gap: 4px; align-items: center; }
#tools.open .tgroup { display: inline-flex; }
#tools.open #bEdit { display: none; }
#tools:not(.open) { opacity: .85; }
#tools:not(.open):hover { opacity: 1; }
#bEdit, #bEditClose { padding: 3px 9px; }
#tools .tool { padding: 3px 8px; font-size: 16px; }
#tools .tool.on { background: #3a3320; border-color: var(--accent-edge); }
#tools .dots { display: none; gap: 4px; padding: 0 2px; }
#tools.marker .dots { display: inline-flex; }
#tools .dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
#tools .dot.on { border-color: #fff; box-shadow: 0 0 0 1px #000; }
#tools .sepv { width: 1px; align-self: stretch; background: var(--line); }
#bExportPdf { padding: 3px 8px; }
body.compact #tools, body.nofiles #tools { display: none; }
/* Leiste oben links über der Choreo: Ansicht umschalten, in der PDF-Ansicht „kann ich“ und Track-Notiz */
#viewBar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line); box-sizing: border-box; }
/* PDF-Ansicht: rechts schwebt „✏️ Markieren“ – Platz lassen, die Leiste bricht dann um */
body:not(.compact) #viewBar { padding-right: 175px; }
body.nofiles #viewBar { display: none; }
/* Choreo und PDF beginnen unter der Leiste (Höhe setzt sync.js: --vbH) */
body:not(.nofiles) #compact, body:not(.nofiles) #pdfPane { top: var(--vbH, 46px); }
body:not(.compact):not(.nofiles) #tools { top: 6px; }
#viewBar .vSeg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
#viewBar .vSeg button { border: 0; background: none; border-radius: 999px; padding: 4px 10px; font-size: 13px; min-height: 0; color: var(--muted); }
#viewBar .vSeg button.sel { background: var(--accent); color: #fff; font-weight: 600; }
#viewBar #vbLrn { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#viewBar #vbLrn button { font-size: 13px; padding: 4px 10px; min-height: 0; border-radius: 999px; background: var(--panel); color: var(--muted); }
#viewBar #vbLrn .lrnOk.on { background: #1f3a26; border-color: #2f7a46; color: #8fe3a8; font-weight: 600; }
#vbNote { flex-basis: 100%; max-width: 520px; padding: 6px 10px; border-radius: 10px; background: #3a3320; border: 1px solid #6b5a22; color: #ffe9a8; font-size: 14px; line-height: 1.35; white-space: pre-line; cursor: pointer; box-sizing: border-box; }
#vbNote.hidden { display: none; }
/* Track-Notiz: zwei Zeilen, antippen klappt auf (höchstens ein knappes Drittel, darin scrollen) */
#vbNote:not(.open) .vnT { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
#vbNote.open { max-height: 30vh; overflow-y: auto; }
/* schmale Choreo-Spalte (Handy hoch und quer): alles in einer Zeile – PDF/Kompakt nur als Symbol, Lernauswahl ohne Text */
#viewBar { container-type: inline-size; }
@container (max-width: 520px) {
  #viewBar .vW, #viewBar .lpL, #viewBar .lpW { display: none; }
  #viewBar .vSeg button { padding: 4px 9px; }
}
/* Startseite (noch kein Release offen): keine Kopfzeile – „Release öffnen“ und „Musik & Playlisten“ stehen groß
   auf der Seite, das Menü wirkt erst mit Video + Choreo */
body.nofiles header { display: none !important; }
body.tool-marker .page, body.tool-note .page, body.tool-erase .page { cursor: crosshair; touch-action: none; }
body.tool-marker .row-hit, body.tool-note .row-hit, body.tool-erase .row-hit { pointer-events: none; }
.alayer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.amark { position: absolute; border-radius: 2px; mix-blend-mode: multiply; opacity: .55; }
.amark.tmp { opacity: .35; outline: 1px dashed #333; }
body.tool-erase .amark { pointer-events: auto; cursor: pointer; }
body.tool-erase .amark:hover { outline: 2px solid #e33; }
.anote { position: absolute; pointer-events: auto; cursor: pointer; max-width: 38%; background: #fff6a8; color: #3b3200; border: 1px solid #d8c64a; border-radius: 4px; padding: 1px 6px 1px 4px; font-size: 11px; line-height: 1.35; box-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(-50%); }
.anote:hover { white-space: normal; z-index: 9; }
body.tool-erase .anote:hover { outline: 2px solid #e33; }
#noteEd { position: fixed; z-index: 30; width: min(340px, calc(100vw - 20px)); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); display: grid; gap: 8px; }
#noteEd.hidden, #pdfMenu.hidden { display: none; }
#noteEd .nh { display: flex; gap: 8px; align-items: baseline; }
#noteEd .nh span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#noteEd textarea { width: 100%; resize: vertical; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px; font: inherit; }
#noteEd .nb { display: flex; gap: 6px; }
#pdfMenu { position: fixed; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.card .unote { cursor: pointer; margin-top: 8px; background: #fff6a8; color: #3b3200; border-radius: 6px; padding: 4px 8px; font-size: 15px; }
.card .addnote { flex: none; align-self: center; margin: -6px 0 2px; padding: 2px 8px; font-size: 13px; }   /* in der Kopfzeile der Karte – verdeckt so nicht die Wiederholungen rechts */
.card.cur .top .cnt { margin-right: 44px; }
/* 2. Durchgang (WDH. SEQUENZ … – R) */
/* Zeit im 2. Durchgang, klein unter der Original-Zeit; die gerade laufende kräftig */
.p2time { position: absolute; z-index: 4; pointer-events: none; display: none; color: #1747b8; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15; padding: 0 1.5px; border-radius: 2px; white-space: nowrap; background: #dbe8ff; letter-spacing: -.02em; }
.p2time.show { display: block; }
.p2time.on { background: #1f6feb; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* getauschte Seite (L↔R) über dem L/R im Übungstext – deckt den Original-Buchstaben ab */
.p2time.p2lr { text-align: center; background: #1f6feb; color: #fff; border-radius: 3px; padding: 0 1px; }
/* Seite im 2. Durchgang: Schild rechts neben der Seite, über dem Wiederholungszähler */
.sideTag { position: absolute; left: calc(100% + 6px); z-index: 4; pointer-events: none; transform: translateY(-100%);
  background: #1f6feb; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; transition: top .25s; }
.hl.pass2 { outline-color: #1f6feb; box-shadow: inset 5px 0 0 #1f6feb; }
.card .pass2 { display: inline-block; margin-bottom: 6px; background: #1f6feb; color: #fff; font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
#compact > * { flex-shrink: 0; }
#compact::after { content: ''; flex: 0 0 45%; }   /* Luft unten: auch die letzten Zeilen lassen sich nach oben holen */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; overflow: hidden; }
.card.cur { background: #2b2610; border: 2px solid var(--accent-edge); }
.card.prev { opacity: .5; padding: 6px 12px; }
/* vorige Zeile nur als schmaler Streifen – Platz für die aktuelle */
.card.prev .notes, .card.prev .unote, .card.prev .reps, .card.prev .pass2 { display: none; }
.card.prev .top { font-size: 12px; }
.card.prev .seq { font-size: 15px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.card .top .t { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.card .top .cnt { margin-left: auto; font-variant-numeric: tabular-nums; }
.card .seq { font-size: 17px; line-height: 1.3; margin-top: 4px; }
/* Wiederholungen laut Choreo-Notes („8x“) groß rechts neben der Übung */
.card .body { display: flex; gap: 12px; align-items: flex-start; }
.card .body .seq { flex: 1; min-width: 0; }
.card .wdh { flex: none; font-size: 26px; font-weight: 800; line-height: 1.1; margin-top: 2px; color: var(--accent-edge); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card.cur .wdh { font-size: 34px; color: #fff; }
.card.prev .wdh { font-size: 15px; margin-top: 0; }
.card.cur .seq { font-size: 21px; font-weight: 600; }
.card .seq strong { color: #fff; }
/* Übung aus der Zeile davor (Zeile hat nur ein Tempo wie „4/4“) – etwas heller */
.card .seq .carry, .card .seq .carry strong { color: #b9b9c4; }
.card .notes { color: #f0a0a8; font-size: 15px; margin-top: 6px; }
.card .notes .optReps { display: inline-block; margin: 0 2px; padding: 0 7px; border-radius: 999px; background: #f0a0a8; color: #2a0a10; font-weight: 800; font-variant-numeric: tabular-nums; }
.card .reps { position: absolute; right: 12px; bottom: 12px; font-weight: 800; font-size: 13px; color: var(--muted); }
.card.cur .reps { position: static; display: inline-block; margin-top: 6px; font-size: 13px; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 9px; }
.card.cur .reps.done { background: #2a9d6a; }
.card .prog { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); transition: width .25s linear; }
.card.hidden-card { background: repeating-linear-gradient(135deg, #2a2a30 0 10px, #25252a 10px 20px); color: var(--muted); text-align: center; font-weight: 600; user-select: none; }
.card.hidden-card.peek { background: var(--panel); }
#compact .empty { color: var(--muted); text-align: center; margin-top: 30px; }
#right { position: relative; min-height: 0; }
#pdfPane { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: #3a3a40; padding: 12px; }
.page { position: relative; margin: 0 auto 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.page canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl, .nx { position: absolute; left: 5%; right: 4%; border-radius: 4px; pointer-events: none; transition: top .25s, height .25s; }
.hl { z-index: 3; background: var(--accent-soft); outline: 2px solid var(--accent-edge); mix-blend-mode: multiply; }
.hl .prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 0 0 0 4px; transition: width .25s linear; }
/* Wiederholungs-Plakette rechts neben der Seite (eigener Rand), Pfeil zeigt auf die Zeile – verdeckt nie Text */
#pdfPane.reps { padding-right: 74px; }
.rep::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left: 0; border-right-color: var(--accent); }
.rep.done::before { border-right-color: #2a9d6a; }
.rep { position: absolute; left: calc(100% + 9px); z-index: 4; transform: translateY(-50%); pointer-events: none; white-space: pre-line !important; text-align: center; line-height: 1.25;
  background: var(--accent); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 999px;
  padding: 1px 9px; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: top .25s; white-space: nowrap; }
.rep.done { background: #2a9d6a; }
.nx { background: var(--next); outline: 1px dashed rgba(80,170,255,.8); }
.cover { position: absolute; left: 4%; right: 3%; border-radius: 4px; z-index: 2; cursor: help; user-select: none;
  background: repeating-linear-gradient(135deg, #d9d9de 0 10px, #cfcfd5 10px 20px); border-top: 2px dashed #9a9aa3;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; color: #6b6b75; font-weight: 600; font-size: 13px;
  transition: top .25s, opacity .15s; }
.cover.peek { opacity: .12; }
/* Lernmodus „alles abdecken“: Abdeckung über der aktuellen Zeile hervorgehoben (zeigt, wo man ist) */
.cover.cur { background: #ececf0; border: 2px solid var(--accent-edge); align-items: center; padding-top: 0; color: #55555f; z-index: 3; font-size: 12px; overflow: hidden; }
.cover.quiet { font-size: 0; }
.row-hit { position: absolute; left: 5%; right: 4%; cursor: pointer; border-radius: 4px; }
.row-hit:hover { background: rgba(80,170,255,.10); }

#drop { position: absolute; inset: 0; z-index: 3; background: var(--bg); display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: 24px; }
#drop.hidden { display: none; }
/* Noch kein Video gewählt: Player ausblenden, Startbildschirm nimmt die ganze Fläche ein */
body:not(.hasVideo) #left, body:not(.hasVideo) #divider { display: none; }
body:not(.hasVideo) #main { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
/* leere Videofläche: direkt dort das Video wählen */
#vEmpty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: #666; font-size: 13px; }
#vEmpty button { font-size: 17px; padding: 12px 22px; border-radius: 12px; }
body.hasVideo #vEmpty { display: none; }
#drop .dTitle { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
/* Startseite: Logo, Name, zwei große Karten, Favoriten zum direkten Öffnen – dezenter Farbverlauf dahinter */
#drop { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,77,94,.16), transparent 70%), radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255,184,0,.08), transparent 70%), var(--bg); overflow-y: auto; justify-content: safe center; }
#drop .dHero { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; }
#drop .dLogo { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 8px 28px rgba(255,77,94,.28); margin-bottom: 8px; }
#drop .dName { font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
#drop .dTag { font-size: 14px; color: var(--muted); letter-spacing: .04em; }
#drop .dCard { width: min(400px, 100%); box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-align: left; padding: 16px 18px; border-radius: 16px; white-space: normal; background: var(--panel); border: 1px solid var(--line); }
#drop .dCard:hover { border-color: #55555f; }
#drop .dCard .ic { font-size: 30px; line-height: 1; }
#drop .dCard .tx { display: grid; gap: 3px; min-width: 0; }
#drop .dCard b { font-size: 18px; color: var(--text); }
#drop .dCard small { font-size: 13px; color: var(--muted); line-height: 1.35; }
#drop .dCard .go { font-size: 26px; color: var(--muted); }
#drop .dCard.primary { background: linear-gradient(135deg, #ff4d5e, #e8364a); border-color: transparent; box-shadow: 0 6px 22px rgba(255,77,94,.3); }
#drop .dCard.primary b, #drop .dCard.primary .go { color: #fff; }
#drop .dCard.primary small { color: rgba(255,255,255,.85); }
#drop .dFavs { width: min(400px, 100%); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: -2px 0 4px; }
#drop .dFavs:empty { display: none; }
#drop .dFav { border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; background: var(--panel2); }
#drop .dFav:hover { border-color: #ffc93c; }
#drop .dFavHint { font-size: 12.5px; color: var(--muted); max-width: 340px; line-height: 1.4; }
#drop .dCard small + small:not(:empty) { margin-top: 2px; color: var(--text); opacity: .75; }
/* 🌐 Sprachauswahl (i18n.js) */
#drop .dLang { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 2; text-align: left; }
#drop .dLangBtn { background: none; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); line-height: 1; padding: 6px 10px; min-height: 0; }
#drop .dLangBtn:hover { color: var(--text); }
#drop .dLangMenu button b { display: inline-block; width: 2.2em; font-size: 12px; color: var(--muted); }
#drop .dLangMenu { position: absolute; right: 0; top: 100%; display: grid; gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); min-width: 140px; }
#drop .dLangMenu.hidden { display: none; }
#drop .dLangMenu button { background: none; border: 0; text-align: left; padding: 8px 10px; font-size: 14px; border-radius: 6px; color: var(--text); min-height: 0; white-space: nowrap; }
#drop .dLangMenu button:hover { background: var(--panel2); }
#drop .dLangMenu button.on { font-weight: 600; color: var(--accent-edge); }
#drop .dFoot { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.6; opacity: .85; max-width: min(520px, 100%); }   /* breite Tablets: nicht über die ganze Breite */
#drop .dLegal { display: block; margin: 4px auto 0; font-size: 11px; line-height: 1.45; opacity: .8; max-width: 400px; }
#drop .dBtn { width: min(360px, 100%); padding: 14px 16px; font-size: 17px; border-radius: 12px; white-space: normal; }
#drop .dBtn.done { background: var(--panel2); border-color: #2a9d6a; color: var(--text); font-weight: 500; font-size: 14px; }
#drop .dHint { font-size: 13px; max-width: 360px; }
@media (pointer: coarse) { #drop .nontouch, #fpList .nontouch { display: none; } }

#tracksPanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 12px; z-index: 7;   /* über der Ansicht-Leiste (#viewBar, z 6) */ box-shadow: -6px 0 20px rgba(0,0,0,.4); }
#tracksPanel.hidden { display: none; }
#tracksPanel h3 { margin: 4px 0 8px; font-size: 15px; }
#tracksPanel .hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 12px; }
.seg { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--panel2); }
.seg.cur { border-color: var(--accent-edge); }
.seg .n { font-weight: 600; }
.seg .m { color: var(--muted); font-size: 12px; }
.seg .b { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.seg .b button { padding: 2px 7px; font-size: 12px; }
.manual { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; margin-top: 12px; }
.manual .r { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

#busyBar { display: none; align-items: center; gap: 10px; padding: 6px 12px; background: #221d10; border-bottom: 1px solid #4a3a10; color: #ffd98a; }
#busyBar.on { display: flex; }
#busyBar .bar { flex: 1; height: 6px; background: #3a3220; border-radius: 3px; overflow: hidden; }
#busyBar .bar i { display: block; height: 100%; width: 0; background: var(--warn); }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #000c; color: #fff; padding: 8px 14px; border-radius: 8px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 40; max-width: 90vw; }
#toast.on { opacity: 1; }
/* Warteanzeige beim Öffnen großer Dateien (liegt auch über dem Startbildschirm) */
#wait { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 25; width: min(380px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: 0 10px 40px #000a;
  display: none; flex-direction: column; gap: 10px; text-align: center; }
#wait.on { display: flex; }
#wait .wTitle { font-size: 17px; font-weight: 700; color: var(--text); }
#wait .wHint { font-size: 13px; color: var(--muted); }
#wait .wTime { font-variant-numeric: tabular-nums; color: var(--accent-edge); font-weight: 700; }
#wait .wBar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; position: relative; }
#wait .wBar i { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent); border-radius: 3px; animation: wSlide 1.3s ease-in-out infinite; }
@keyframes wSlide { from { left: -35%; } to { left: 100%; } }
#wait.det .wBar i { animation: none; left: 0; width: 0; transition: width .3s; }
#wait button { align-self: center; }
/* Lokaler Ordner als Quelle: Release-Liste */
body.nofolder .folderUI { display: none !important; }
#folderPanel { position: fixed; inset: 0; z-index: 24; background: #000b; display: none; align-items: center; justify-content: center; padding: 12px; }
#folderPanel.on { display: flex; }
#folderPanel .fpBox { width: min(560px, 100%); max-height: min(88vh, 100%); display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px #000a; }
#folderPanel .fpHead { display: flex; align-items: center; gap: 8px; }
#folderPanel .fpHead b { flex: 1; font-size: 17px; }
#fpSearch { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 15px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
#fpList { overflow-y: auto; flex: 1; min-height: 80px; display: flex; flex-direction: column; gap: 4px; }
#fpList .grp { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin: 8px 2px 2px; }
#fpList .grp.pc { border-left: 4px solid var(--pc); padding-left: 8px; color: var(--text); margin-top: 12px; }
#fpList .rel { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
#fpList .rel .nm { flex: 1; font-weight: 600; }
#fpList .rel .ok { color: var(--ok); } #fpList .rel .miss { color: var(--muted); opacity: .45; text-decoration: line-through; }
#fpList .rel.cur { border-color: var(--accent-edge); }
#fpList .none { color: var(--muted); padding: 16px; text-align: center; }
#folderPanel .fpFoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#folderPanel .fpFoot span { flex: 1; color: var(--muted); font-size: 12px; min-width: 140px; }
body.norepo .repoUI { display: none !important; }
#fpList .rel .sz { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#fpList .rel .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); white-space: nowrap; }
#fpList .rel .tag.new { background: #16352a; color: var(--ok); }
#fpList .rel .tag.part { background: #3a3320; color: #ffd98a; }
#fpList .rel .del { padding: 4px 8px; min-height: 0; }
#fpList label.rel { cursor: pointer; background: var(--panel2); border: 1px solid var(--line); }
#fpList label.rel input { width: 18px; height: 18px; accent-color: var(--accent); }
#fpList .rel .mus { color: var(--muted); font-size: 13px; }
#fpList .loose { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#fpOpts:empty { display: none; }
#fpOpts { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
#fpOpts .hint { color: var(--muted); font-size: 12px; }
#fpBackTop { padding: 4px 10px; min-height: 0; }
#fpBackTop.off { display: none; }
#fpSub { color: var(--muted); font-size: 13px; margin-top: -4px; white-space: pre-line; }
#fpSub:empty { display: none; }
#fpList .choice { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 12px; width: 100%; white-space: normal; }
#fpList .choice .ic { font-size: 26px; line-height: 1.1; }
#fpList .choice b { display: block; font-size: 16px; margin-bottom: 4px; }
#fpList .choice small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; font-weight: 400; }
#fpList .choice { position: relative; padding-right: 40px; }
#fpList .choice.sel { border-color: var(--accent-edge); background: #2b2610; }
#fpList .choice.sel::after { content: '✓'; position: absolute; top: 12px; right: 14px; color: var(--accent-edge); font-weight: 800; font-size: 18px; }
/* Release-Zeile zweizeilig: oben Name, darunter Größe/Inhalt; rechts ggf. Löschen */
#fpList .rel { display: grid; grid-template-columns: 1fr auto auto; column-gap: 10px; row-gap: 3px; align-items: center; }
#fpList .rel .nm { grid-column: 1; }
#fpList .rel .meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 400; }
#fpList .rel .meta .brk { flex-basis: 100%; height: 0; } /* Lernfortschritt immer in eigener Zeile */
#fpList .rel .meta .brk + .lrnProg { margin-top: -4px; } /* Zeilenabstand der leeren Umbruch-Zeile ausgleichen */
#fpList .rel .del { grid-column: 3; grid-row: 1 / span 2; font-size: 18px; }
/* Favorit: ☆ antippen = oben unter „Favoriten“ */
#fpList .rel .fav { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; line-height: 1; padding: 6px 8px; color: var(--muted); cursor: pointer; user-select: none; }
#fpList .rel .fav.on { color: #ffc93c; }
#fpList .rel .fav:hover { color: #ffc93c; }
#fpList label.rel { grid-template-columns: auto 1fr; }
#fpList label.rel input { grid-row: 1 / span 2; }
#fpList label.rel .nm, #fpList label.rel .meta { grid-column: 2; }
#fpList .rel .miss { opacity: .3; text-decoration: none; }
/* viele Einträge: Liste scrollt, Zeilen dürfen nicht schrumpfen */
#fpList > * { flex-shrink: 0; }
#fpList .fpProgs { margin: 0 0 6px; padding: 2px 0 6px; }
#fpList .selAll { display: flex; gap: 10px; align-items: center; padding: 6px 12px; font-weight: 600; cursor: pointer; }
#fpList .selAll input { width: 18px; height: 18px; accent-color: var(--accent); }
#fpList .selAll span { color: var(--muted); font-weight: 400; }
#fpList .choice[disabled] { opacity: .45; cursor: default; }
#fpList .cloudAct { margin: -2px 4px 6px 52px; }
#fpList .cloudAct a, #fpList .crumbs a { color: var(--accent-edge); }
#fpList .crumbs { font-size: 13px; color: var(--muted); padding: 2px 2px 6px; }
#fpList .rel.dir { grid-template-columns: 1fr; padding: 12px; }
#fpList .empty2 { text-align: center; padding: 26px 14px; color: var(--muted); line-height: 1.45; }
#fpList .empty2 .big { font-size: 40px; }
#fpList .empty2 b { color: var(--text); font-size: 16px; display: block; margin: 6px 0; }
#fpList .hint { color: var(--muted); font-size: 12px; padding: 4px 2px; line-height: 1.4; }
#folderPanel .fpFoot .store { flex: 1 1 100%; color: var(--muted); font-size: 12px; }
#folderPanel .fpFoot .store a { color: var(--accent-edge); white-space: nowrap; }
#folderPanel .fpFoot .grow { flex: 1; }
#liveDot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
#liveDot.ok { background: var(--ok); }
#liveDot.warn { background: var(--warn); }
body:not(.hasVideo) #liveDot { display: none; }   /* Live-Abgleich gibt es nur mit Video */
video::cue { background: rgba(0,0,0,.7); font-size: 90%; }

/* Musikplayer: Bibliothek, Playlisten, Player mit großer Zeitanzeige, Choreo zur Playlist */
#music { position: fixed; inset: 0; z-index: 19; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto; }
#music.hidden { display: none; }
.mTop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
/* Reiter als eine zusammenhängende Umschaltleiste */
/* Eine Reiterleiste für alle Bereiche: Video-Ansicht (.navTabs) und Musikplayer (.mTabs) sehen gleich aus */
.mTabs, .navTabs { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.mTabs button, .navTabs button { background: none; border: 0; border-radius: 7px; padding: 6px 14px; color: var(--muted); }
.mTabs button:hover, .navTabs button:hover { color: var(--text); background: var(--panel2); }
.mTabs button.sel, .navTabs button.sel { background: var(--panel2); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-edge); }
.navTabs button.sel { cursor: default; }
.navTabs { flex: none; padding: 2px; }
.navTabs button { padding: 4px 10px; }
#selCover { max-width: 180px; }
/* Tempo nicht 1×: gelb hervorgehoben */
#selRate.on { background: #3a3320; border-color: var(--accent-edge); color: #ffd98a; font-weight: 600; }
/* 🔁 Üben (practice.js): gelb, solange eine Schleife bzw. ein anderes Tempo an ist */
#cLoop.on, #mPractBtn.on { background: #3a3320; border-color: var(--accent-edge); color: #ffd98a; font-weight: 600; }
#cLoop.on { white-space: nowrap; }
#mPractBtn { white-space: nowrap; }   /* 🎯 Üben: am Ende der Zeitleiste, keine eigene Zeile */
body.kiosk #mPractBtn { display: none; }
#mStartEd .loopRates button { min-width: 52px; }
/* PC: Track-Anzeige nimmt den freien Platz – statt die Kopfzeile umzubrechen */
@media (min-width: 1101px) {
  #status { flex: 1 1 0; min-width: 110px; overflow: hidden; }
  header .grow { display: none; }
}
#bMusic.playing { color: var(--ok); }
.mTabs .narrowOnly { display: none; }
.mTabs button[hidden] { display: none !important; }
/* 🏠 ganz links: nur das Symbol, mit Trennstrich abgesetzt */
.mTabs .homeTab, .navTabs .homeTab { position: relative; margin-right: 7px; padding: 6px 10px; font-size: 17px; }
.mTabs .homeTab::after, .navTabs .homeTab::after { content: ''; position: absolute; right: -5px; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
body.kiosk .mTabs .homeTab { display: none; }
/* Startseite bei offenem Release: wie ohne Release ohne Kopfzeile – zurück geht es über „Weiter lernen“ */
body.home header { display: none !important; }
body.home #drop { position: fixed; inset: 0; z-index: 18; }
#drop .dCard.resume { border-color: var(--accent-edge); }
#drop .dCard.hidden { display: none; }
/* ⚙ ganz rechts in der Reiterleiste: nur das Symbol, mit Trennstrich abgesetzt */
.mTabs .setTab { position: relative; margin-left: 7px; padding: 6px 10px; font-size: 17px; }
.mTabs .setTab::before { content: ''; position: absolute; left: -5px; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
#mStartEd.setPanel { width: min(360px, calc(100vw - 20px)); }
#mStartEd .setHead { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -12px; margin: -12px -12px 0; padding: 10px 12px 8px; background: var(--panel); z-index: 1; border-bottom: 1px solid var(--line); }
#mStartEd .setHead b { font-size: 16px; }
#mStartEd .setHead button { background: none; border: 0; font-size: 22px; line-height: 1; padding: 2px 8px; color: var(--muted); min-height: 0; }
#mStartEd .setSec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
#mStartEd .setHead + .setSec { margin-top: 0; padding-top: 2px; border-top: 0; }
#mStartEd .setGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
#mStartEd .setGrid label { padding: 4px; }
.set .bkRow { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
/* ⚙ Einstellungen: aufklappbare Gruppen mit Kurzfassung, Auswahl als Pillen */
#mStartEd .setGrp { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
#mStartEd .setGrp[open] { border-color: var(--accent-edge); }
#mStartEd .setGrp > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; }
#mStartEd .setGrp > summary::-webkit-details-marker { display: none; }
#mStartEd .setGrp > summary::after { content: '▸'; grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--muted); font-size: 14px; }
#mStartEd .setGrp[open] > summary::after { content: '▾'; }
#mStartEd .setGrp > summary b { font-size: 15px; }
#mStartEd .setGrp > summary small { grid-column: 1; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
#mStartEd .setBody { display: grid; gap: 8px; padding: 0 12px 12px; }
#mStartEd .setT { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
#mStartEd .setT span { font-weight: 400; }
#mStartEd .setAll { margin-left: auto; font-weight: 400; color: var(--accent-edge); }
#mStartEd .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#mStartEd .seg label { position: relative; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; background: var(--panel); }
#mStartEd .seg label small { opacity: .7; margin-left: 4px; font-size: 12px; }
#mStartEd .seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
#mStartEd .seg label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#mStartEd .seg label:has(input:focus-visible) { outline: 2px solid var(--accent-edge); }
#mStartEd label.tog { align-items: flex-start; padding: 4px 0; }
#mStartEd label.tog input { margin-top: 2px; }
#mStartEd label.tog span { display: grid; gap: 2px; font-size: 14.5px; }
#mStartEd label.tog small { color: var(--muted); font-size: 12px; line-height: 1.3; }
#mStartEd .setChecks label { padding: 3px 0; font-size: 14px; }
#mStartEd .setSel { width: 100%; font: inherit; font-size: 14.5px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
#mStartEd .setFoot { margin-top: 4px; }
#mStartEd .setLbl { font-weight: 700; font-size: 13px; margin-top: 2px; color: var(--muted); }
/* Wechsel in den anderen Bereich (Lernen) hinten, mit Trennstrich abgesetzt */
.mTabs .modeSw { position: relative; margin-left: 7px; }
.mTabs .modeSw::before { content: ''; position: absolute; left: -5px; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
/* Links Bibliothek/Playlisten/Choreo, rechts der Player – dazwischen eine verschiebbare Trennlinie */
.mBody { display: grid; grid-template-columns: var(--mSide, 40%) 8px 1fr; min-height: 0; }
#music.tab-choreo .mBody { grid-template-columns: var(--mSideCh, 64%) 8px 1fr; }
@media (pointer: coarse) {
  .mBody { grid-template-columns: var(--mSide, 40%) 10px 1fr; }
  #music.tab-choreo .mBody { grid-template-columns: var(--mSideCh, 64%) 10px 1fr; }
}
#mSide { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#mDivider { cursor: col-resize; background: var(--line); touch-action: none; position: relative; }
#mDivider:hover, #mDivider.drag { background: #55555f; }
#mDivider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 36px; transform: translate(-50%, -50%); background: #77777f; border-radius: 2px; }
#mSide > div { display: none; min-height: 0; flex: 1; overflow-y: auto; padding: 12px; }
#music.tab-lib #mLib, #music.tab-lists #mLists { display: block; }
#music.tab-choreo #mChoreo { display: flex; flex-direction: column; padding: 0; }
#mPlayer { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#mMini { display: none; }
.mHint { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.mEmpty { color: var(--muted); text-align: center; padding: 30px 14px; line-height: 1.5; }
.mEmpty b { display: block; color: var(--text); font-size: 16px; margin: 6px 0; }

/* Anzeige */
#mDisplay { padding: 14px 16px 12px; background: var(--panel); border-bottom: 1px solid var(--line); display: grid; gap: 6px; justify-items: center; text-align: center; }
.mNow { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.mNow b { font-size: 19px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mNow span { color: var(--muted); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mBigLbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.mBig { font-size: clamp(64px, 14vw, 128px); line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#mDisplay.wait .mBig { color: var(--accent-edge); }
#mDisplay.wait .mBigLbl { color: var(--accent-edge); font-weight: 700; }
#mDisplay.stop .mBigLbl { color: var(--ok); font-weight: 700; }
/* eine Zeile: vorne die gewählte Zeit, dahinter klein in Klammern die andere (bricht um, wenn es zu eng wird) */
.mBig { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .18em; }
.mBig .s { font-size: .34em; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.mBigLbl:empty { display: none; }
/* Zeitleiste mit Abstand unter den Knöpfen – damit man sie nicht aus Versehen beim Tippen auf ▶ trifft */
.mSeek { display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 10px; align-items: center; width: 100%; max-width: 640px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; margin-top: 18px; }
.mSeek input { width: 100%; accent-color: var(--accent); }
.mCtl { display: flex; gap: 32px; align-items: center; justify-content: center; margin-top: 2px; }
.mCtl button { width: 54px; height: 54px; border-radius: 50%; font-size: 20px; padding: 0; }
.mCtl .mPlayBtn { width: 104px; height: 104px; font-size: 44px; background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 18px rgba(255,77,94,.35); }
.mCtl .mPlayBtn.pause { background: var(--panel2); border-color: var(--accent); color: var(--text); box-shadow: none; }
#mSkipWait { margin-top: 2px; }
/* Lautstärke senkrecht rechts neben ⏭ (links ein gleich breiter Platzhalter, damit ▶ mittig bleibt) */
.mVol, .mCtlSp { width: 46px; flex: none; }
.mVol { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mVol input { writing-mode: vertical-lr; direction: rtl; width: 26px; height: 92px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.mCtl .mVol button { width: auto; height: auto; border-radius: 6px; background: none; border: 0; padding: 0 4px; font-size: 18px; min-height: 0; }
.mVol.hidden, .mCtl.noVol .mCtlSp { display: none; }
#mDisplay { position: relative; }
.mBig, .mBigLbl { cursor: pointer; user-select: none; }
#mSkipWait.hidden { display: none; }

/* Playlist im Player */
.mQHead { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mQHead .nm { font-weight: 700; font-size: 16px; flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mQHead .tot { color: var(--muted); font-variant-numeric: tabular-nums; }
.mQHead .tot b { color: var(--text); }
#mQueue { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 30px; display: flex; flex-direction: column; gap: 4px; }
.mItem { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.mItem.cur { border: 2px solid var(--accent-edge); background: #2b2610; }
.mItem.done { opacity: .5; }
.mItem .no { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; }
.mItem .tt { min-width: 0; }
.mItem .tt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mItem .tt span { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mItem .du { font-variant-numeric: tabular-nums; color: var(--muted); }
.mItem .acts { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mItem .acts button { padding: 2px 8px; min-height: 0; font-size: 12.5px; }
.mItem .acts .sp { flex: 1; }
/* Große Bildschirme: Trennlinie zwischen Anzeige und Ablauf – kleinere Anzeige, Zeit skaliert mit */
#mHDiv { flex: none; height: 8px; cursor: row-resize; background: var(--line); touch-action: none; position: relative; }
#mHDiv:hover, #mHDiv.drag { background: #55555f; }
#mHDiv::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 2px; transform: translate(-50%, -50%); background: #77777f; border-radius: 2px; }
/* auch am Handy (dort mit dem Finger): Anzeige kleiner ziehen, mehr Platz für die Trackliste */
@media all {
  #mPlayer.sized #mDisplay { flex: none; height: var(--mDispH); container-type: size; overflow-y: auto; scrollbar-width: none; align-content: safe center; }
  /* wenig Höhe: Nebensachen ausblenden – Titel, große Zeit und Knöpfe bleiben */
  @container (max-height: 400px) { #mNowSub { display: none; } }
  @container (max-height: 320px) { .mVol input { height: 60px; } }
  @container (max-height: 250px) { .mSeek, .mBigLbl { display: none; } }
  #mPlayer.sized .mBig { font-size: clamp(36px, min(14vw, 24cqh), 128px); }
  #mPlayer.sized .mCtl .mPlayBtn { width: clamp(76px, 16cqh, 104px); height: clamp(76px, 16cqh, 104px); font-size: clamp(32px, 7cqh, 44px); }
}
/* Im ⚙ abgewählte Teile ganz ausblenden */
#mPlayer.hide-sub #mNowSub,
#mPlayer.hide-end .mEnd,
#mPlayer.hide-vol .mVol, #mPlayer.hide-vol .mCtlSp, #mPlayer.hide-seek .mSeek,
#mPlayer.hide-qhead .mQHead, #mPlayer.hide-queue .mQHead, #mPlayer.hide-queue #mQueue, #mPlayer.hide-queue #mHDiv { display: none !important; }
/* ohne Trackliste: Anzeige füllt den ganzen Player, Zeit und ▶ wachsen mit */
#mPlayer.hide-queue #mDisplay { flex: 1; height: auto; min-height: 0; border-bottom: 0; container-type: size; align-content: safe center; overflow-y: auto; scrollbar-width: none; }
#mPlayer.hide-queue .mBig { font-size: clamp(56px, min(22vw, 32cqh), 320px); }
#mPlayer.hide-queue .mCtl .mPlayBtn { width: clamp(76px, 18cqh, 150px); height: clamp(76px, 18cqh, 150px); font-size: clamp(32px, 8cqh, 64px); }
/* Automatischer Stopp vor einem Track: nur noch Titel, „Bereit – ▶ drücken“ und ein riesiges ▶ –
   Zeit, Zeitleiste, ⏮ ⏭ und Lautstärke sind in dem Moment egal */
#mDisplay.stop .mBig, #mDisplay.stop .mSeek, #mDisplay.stop #mPrev, #mDisplay.stop #mNextBtn,
#mDisplay.stop .mVol, #mDisplay.stop .mCtlSp { display: none !important; }
#mDisplay.stop .mBigLbl { display: block !important; font-size: 16px; margin: 4px 0 6px; }
#mDisplay.stop .mCtl .mPlayBtn { width: min(58vw, 38svh, 240px); height: min(58vw, 38svh, 240px); font-size: min(24vw, 16svh, 100px); }
#mPlayer.sized #mDisplay.stop .mCtl .mPlayBtn, #mPlayer.hide-queue #mDisplay.stop .mCtl .mPlayBtn {
  width: min(58vw, 62cqh, 240px); height: min(58vw, 62cqh, 240px); font-size: min(24vw, 26cqh, 100px); }
@media (pointer: coarse) { #mHDiv { height: 16px; } #mHDiv::after { width: 56px; height: 4px; } }
/* Ablauf im Player: schlicht, ohne Bearbeiten-Knöpfe */
.mRow { padding: 10px 12px; }
.mRow .tt b { font-size: 15.5px; }
.gapTag { font-style: normal; font-weight: 700; font-size: 11.5px; padding: 0 6px; border-radius: 999px; margin-right: 6px; }
.gapTag.stop { background: #16352a; color: var(--ok); }
.gapTag.delay { background: #3a3320; color: #ffd98a; }
/* Trennzeile zwischen zwei Tracks: hier hält die Playlist an bzw. macht Pause */
.mGapRow { display: flex; align-items: center; gap: 10px; margin: 2px 4px; font-size: 12.5px; font-weight: 700; }
.mGapRow::before, .mGapRow::after { content: ''; flex: 1; border-top: 2px dashed currentColor; opacity: .45; }
.mGapRow.stop { color: var(--ok); }
.mGapRow.delay { color: #ffd98a; }
/* im Bearbeiten: Trennzeile als Knopf (Start-Art des folgenden Tracks ändern) */
button.mGapRow.edGap { width: 100%; background: none; border: 0; min-height: 0; padding: 3px 0; margin: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; }
button.mGapRow.edGap.go { color: var(--muted); font-weight: 600; }
button.mGapRow.edGap.own span { font-style: italic; }
button.mGapRow.edGap:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mQHead .linkbtn { font-size: 13px; }
/* Kursformate: Umschalter Voll / 45 / 30 (Player und Bearbeiten) */
.fmtSw { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; flex: 1 1 100%; }
.fmtSw button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; background: none; border: 0; border-radius: 7px; padding: 4px 6px; color: var(--muted); font-weight: 600; line-height: 1.2; min-height: 0; }
.fmtSw button small { font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.fmtSw button.sel { background: var(--panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent-edge); }
.mEdTitle + .fmtSw { margin: 4px 0 10px; }
.mItem.fmtRow { cursor: pointer; }
.mItem.fmtRow.out { opacity: .45; }
.fmtChip { padding: 2px 10px; min-height: 0; font-size: 12.5px; color: var(--muted); }
.fmtChip.on { border-color: var(--ok); color: var(--ok); }
.fmtOut { font-style: normal; color: #ffd98a; }
.fmtCfg { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 2px 8px; color: var(--muted); font-size: 13px; }
.mEdTitle + .fmtCfg + .fmtSw { margin: 0 0 10px; }
/* Playlist bearbeiten (Reiter „Playlisten“) */
.mEdHead, .mEdMeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mEdHead .grow, .mEdMeta .grow { flex: 1; }
.mEdTitle { display: flex; gap: 8px; align-items: center; margin: 12px 2px 4px; }
.mEdTitle b { font-size: 19px; }
.mEdTitle button { padding: 2px 8px; min-height: 0; }
.mEdMeta { color: var(--muted); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.mEdMeta b { color: var(--text); }
.mEdList { display: flex; flex-direction: column; gap: 4px; }
.startChip.go { color: var(--muted); }
.startChip.stop { border-color: var(--ok); color: var(--ok); }
.startChip.delay { border-color: var(--accent-edge); color: #ffd98a; }
.mGap { align-self: center; font-size: 12px; color: var(--muted); padding: 0 6px; }
.mGap.stop { color: var(--ok); } .mGap.delay { color: #ffd98a; }
#mStartEd { position: fixed; z-index: 31; width: min(320px, calc(100vw - 20px)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55); display: grid; gap: 8px; }
#mStartEd { overflow-y: auto; overscroll-behavior: contain; }
#mStartEd.hidden { display: none; }
/* Dialog „Neue Playlist“ */
#mDlg { position: fixed; inset: 0; z-index: 30; background: #000b; display: flex; align-items: center; justify-content: center; padding: 12px; }
#mDlg.hidden { display: none; }
.mDlgBox { width: min(480px, 100%); max-height: min(86vh, 100%); display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px #000a; }
.mDlgHead { display: flex; align-items: center; gap: 8px; }
.mDlgHead b { flex: 1; font-size: 17px; }
#mDlgBody { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.mDlgCard { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 12px; white-space: normal; }
.mDlgCard .ic { font-size: 26px; line-height: 1.1; }
.mDlgCard b { display: block; font-size: 16px; margin-bottom: 3px; }
.mDlgCard small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
#mdSearch { width: 100%; padding: 9px 10px; font-size: 15px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
/* Suche und Programm-Filter nie zusammenquetschen – kürzer wird nur die Liste darunter */
#mDlgBody .mProgs, #mdSearch { flex: none; }
#mDlgBody .mProgs { margin: 0 0 2px; padding: 0 0 4px; }
.mDlgList { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; min-height: 60px; max-height: 60vh; }
.mDlgRel { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px; white-space: normal; flex: none; }
.mDlgRel b { white-space: nowrap; }
.mDlgRel span { color: var(--muted); font-size: 13px; text-align: right; }
/* Formate wählen (Wahlmöglichkeiten aus den Choreo-Notes) */
.fmtAskList { gap: 10px; }
.mDlgBtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; padding-top: 4px; border-top: 1px solid var(--line); }
#mDlgBody .fmtAskList { max-height: none; flex: 1 1 auto; }
.fmtAsk { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.fmtAsk label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 4px 2px; }
.fmtAsk input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.fmtAsk .fmtUse b { font-size: 16px; }
.fmtOpt span { display: flex; flex-direction: column; min-width: 0; }
.fmtOpt small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fmtSlot { margin-top: 6px; font-size: 13px; font-weight: 600; color: #ffd98a; }
.fmtSlot small { font-weight: 400; color: var(--muted); }
.fmtSum { margin-top: 4px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fmtSum b { color: var(--text); }
#mStartEd input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
#mStartEd label { display: flex; gap: 8px; align-items: center; padding: 6px 4px; cursor: pointer; }
#mStartEd label.mStBeep { padding-left: 30px; flex-wrap: wrap; }
#mStartEd label.mStBeep small { color: var(--muted); font-size: 12px; }
#mStartEd .volSteps { flex-wrap: wrap; gap: 6px; }
#mStartEd input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); }
#mStartEd .row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Bibliothek und Playlisten */
.mTarget { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -12px -12px 10px; padding: 10px 12px; font-size: 13.5px; color: var(--muted);
  position: sticky; top: -12px; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); }
/* Auswahl beim ➕: in welche Playlist */
.mAddTo { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; white-space: normal; min-width: 0; }
.mAddTo .nm { font-weight: 700; font-size: 15px; }
.mAddTo .meta { color: var(--muted); font-size: 12.5px; }
.mAddTo.cur { border: 2px solid var(--accent-edge); }
.mTarget select { flex: 1; min-width: 140px; }
#mSearch { width: 100%; padding: 9px 10px; font-size: 15px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
/* Playlist-Übersicht: Filter und Programm-Gruppen (music.js renderLists) */
.plFilter { display: grid; gap: 8px; margin: 4px 0 6px; }
.plFilter input[type=search] { font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.plChips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.plChips::-webkit-scrollbar { display: none; }
.plChips button { flex: none; border-radius: 999px; padding: 5px 12px; font-size: 13px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); min-height: 0; white-space: nowrap; }
details.guide { margin: 6px 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13.5px; color: var(--muted); }
details.guide[open] { border-color: var(--accent-edge); }
details.guide summary { cursor: pointer; color: var(--text); font-weight: 600; }
details.guide ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
details.guide b, details.guide i { color: var(--text); }
details.guide pre { margin: 6px 0; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 12px; line-height: 1.45; overflow-x: auto; color: var(--text); white-space: pre; }
.plChips button.on { color: var(--text); border-color: var(--accent); font-weight: 600; }
/* Programmfarben (--pc aus plColor): überall gleich – Filter-Knöpfe, Gruppen-Überschriften, Schildchen */
button.pc { border-left: 4px solid var(--pc) !important; }
button.pc.on, button.pc.sel { background: color-mix(in srgb, var(--pc) 24%, var(--panel2)); border-color: var(--pc); color: var(--text); }
.mGrp.pc { border-left: 4px solid var(--pc); padding-left: 8px; color: var(--text); }
.mTag.pc { background: color-mix(in srgb, var(--pc) 20%, var(--panel2)); color: color-mix(in srgb, var(--pc) 55%, #fff); }
.pcName { border-left: 4px solid var(--pc); padding-left: 8px; }
.plChips small { opacity: .7; margin-left: 2px; }
.plGrp { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px 6px; margin-top: 6px; color: var(--text); text-align: left; min-height: 0; cursor: pointer; }
.plGrp .plBar { width: 4px; height: 18px; border-radius: 2px; background: var(--pc); flex: none; }
.plGrp b { font-size: 13px; letter-spacing: .05em; }
.plGrp small { color: var(--muted); font-size: 12px; background: var(--panel2); border-radius: 999px; padding: 0 7px; }
.plGrp .plChev { color: var(--muted); font-size: 12px; }
.plGrp + .mPl { margin-top: 8px; }
.mGrp { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin: 12px 2px 4px; }
/* Programm-Filter in der Bibliothek: eine Zeile Schalter, zur Seite wischbar */
.mProgs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 4px; padding: 0 12px 4px; }
.mProgs:empty { display: none; }
.mProgs button { flex: none; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); background: var(--panel); }
.mProgs button.sel { color: var(--text); background: var(--panel2); border-color: var(--accent-edge); }
.mRel { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 6px; overflow: hidden; }
.mRel > button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 0; background: none; padding: 10px 12px; font-size: 15px; }
.mRel > button .nm { flex: 1; font-weight: 600; }
.mRel > button .ct { color: var(--muted); font-size: 12.5px; }
.mRel > button .rAct { padding: 4px 8px; margin: -4px 0; border-radius: 8px; font-size: 16px; opacity: .85; }
.mRel > button .rAct:hover { background: var(--panel2); opacity: 1; }
.mRel .tracks { border-top: 1px solid var(--line); padding: 4px 6px 8px; }
.mRel .relActs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 6px 8px; }
.mRel .relActs button { font-size: 13px; padding: 4px 10px; min-height: 0; }
.mRel.hid { opacity: .6; border-style: dashed; }
.mHidBtn { display: block; width: 100%; margin: 4px 0 8px; background: none; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.mAddTo.rmDel { border-color: #5a2a30; }
.mAddTo.rmDel .nm { color: #ff8a95; }
.mTr { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 6px; border-radius: 8px; }
.mTr:hover { background: var(--panel2); }
.mTr .no { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.mTr .tt { min-width: 0; }
.mTr .tt b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mTr .tt span { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mTr .du { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.mTr button { padding: 3px 10px; min-height: 0; }
.mTr .add.did { border-color: var(--ok); color: var(--ok); }
.mPl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 6px; cursor: pointer; }
.mPl.cur { border: 2px solid var(--accent-edge); background: #2b2610; }
.mPl .nm { font-weight: 700; font-size: 15px; }
.mPl .meta { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.mPl .acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.mPl .acts button { padding: 3px 8px; min-height: 0; }
.mPl .acts .favBtn { color: var(--muted); font-size: 16px; }
.mPl .acts .favBtn.on, .mPl .acts .favBtn:hover { color: #ffc93c; }
.mTag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--panel2); color: var(--muted); margin-right: 4px; }
.mTag.mix { background: #16352a; color: var(--ok); }

/* Choreo zur Playlist */
/* immer einzeilig: der Titel kürzt sich, Selteneres steckt im Menü „•••“, schmal nur Symbole */
.mChBar { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel); position: relative; }
.mChBar > #mChTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mChBar > * { flex-shrink: 0; }
.mChMore { position: relative; }
#mChMoreBtn { padding: 4px 8px; min-height: 0; line-height: 1; }
.mChMenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); min-width: 170px; }
.mChMenu.hidden { display: none; }
.mChMenu button { text-align: left; white-space: nowrap; }
/* „↻ Wiederholungen mitverfolgen“ als Zeile im Menü (selten gebraucht) */
.mChMenu .mChRep { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 6px 10px; margin-bottom: 2px; font-size: 14px; color: var(--text); }
@media (max-width: 600px) { .mChView .lt { display: none; } .mChView button { padding: 4px 9px; font-size: 15px; } .mChBar > #mChTitle { font-size: 13px; } }
#mPdf { flex: 1; min-height: 0; overflow-y: auto; background: #3a3a40; padding: 10px; }
#mPdf .page { margin-bottom: 10px; }
#mPdf .hl { left: 4%; right: 3%; }
#mPdf .mSep { color: #ddd; font-weight: 700; font-size: 13px; margin: 14px auto 6px; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; }
#mPdf .mSep > span { flex: 1; min-width: 0; }
#mPdf .mSep .tNoteAdd { flex: none; font-size: 13px; padding: 3px 10px; min-height: 0; color: var(--muted); font-weight: 400; letter-spacing: 0; }
#mPdf .mSep .tNoteAdd.hidden { display: none; }
#mPdf .mSepNote.edit { cursor: pointer; }
#mPdf .anote.ro { cursor: default; }
#mPdf .mSep.cur { color: var(--accent-edge); }
#mPdf .mSepNote { margin: 0 auto 8px; padding: 8px 12px; box-sizing: border-box; border-radius: 10px; background: #3a3320; border: 1px solid #6b5a22; color: #ffe9a8; font-size: 15px; line-height: 1.35; white-space: pre-line; }
#mPdf .mSepNote.hidden { display: none; }
/* Choreo zur Playlist: Umschalter PDF | Kompakt und die Kompakt-Ansicht (Karten wie beim Video) */
.mChView { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.mChView button { border: 0; background: none; border-radius: 7px; padding: 4px 10px; min-height: 0; color: var(--muted); font-size: 13px; }
.mChView button.sel { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* Schalter „↻ Wdh.“ neben PDF | Kompakt – an: wie gewählt hervorgehoben */
.mChRep { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
.mChRep input { margin: 0; accent-color: var(--accent); }
.mChRep:has(input:checked) { color: var(--text); border-color: var(--accent-edge); }
#mChCompact { display: none; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; flex-direction: column; gap: 10px; }
#mChoreo.cmp #mPdf { display: none; }
#mChoreo.cmp #mChCompact { display: flex; }
/* solange noch keine Seiten da sind (wird zusammengestellt / keine Tracks): den Hinweis zeigen */
#mChoreo.cmp #mPdf:not(:has(.page)) { display: block; }
#mChoreo.cmp:has(#mPdf:not(:has(.page))) #mChCompact { display: none; }
#mChCompact > * { flex-shrink: 0; }
#mChCompact::after { content: ''; flex: 0 0 45%; }
#mChCompact .cHead b { font-size: 19px; }
/* Überschrift und Track-Notiz bleiben beim Scrollen oben stehen; deckt auch den Innenabstand oben ab */
#mChCompact .cStick { position: sticky; top: -12px; z-index: 3; margin: -12px -12px 0; padding: 12px 12px 4px; background: var(--bg); box-shadow: 0 8px 10px -8px rgba(0,0,0,.6); }
#mChCompact .cStick .tNote { margin-bottom: 4px; display: flow-root; }   /* flow-root: „▾ mehr“ (float) bleibt im Kasten */
/* zugeklappt zwei Zeilen; „▾ mehr“ nur, wenn mehr da ist; aufgeklappt höchstens ein knappes Drittel, darin scrollen */
#mChCompact .cStick .tnTxt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
#mChCompact .cStick .tNote.open .tnTxt { display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }
#mChCompact .cStick .tnMore { display: none; float: right; margin-top: 2px; font-size: 13px; color: #d9c27a; }
#mChCompact .cStick .tNote.more .tnMore { display: block; }
#mChCompact .cStick .tnMore::after { content: '▾ mehr'; }
#mChCompact .cStick .tNote.open .tnMore::after { content: '▴ weniger'; }
#mChCompact .cHead { display: flex; align-items: baseline; gap: 10px; }
#mChCompact .cHead b { flex: 1; min-width: 0; }
.mEnd { color: var(--muted); font-size: 13.5px; min-height: 1.4em; font-variant-numeric: tabular-nums; text-align: center; }
#mChCompact .tNoteAdd, #compact .tNoteAdd { flex: none; font-size: 13px; padding: 3px 10px; min-height: 0; color: var(--muted); }
.lrnMark { color: #8fe3a8; font-weight: 700; }
/* ⚙ beim Lernen: Gruppen wie im Player */
#settings .lsetHead { margin-bottom: 6px; font-size: 15px; }
#settings details.lset { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); margin-bottom: 8px; }
#settings details.lset[open] { border-color: var(--accent-edge); }
#settings details.lset > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; }
#settings details.lset > summary::-webkit-details-marker { display: none; }
#settings details.lset > summary::after { content: '▸'; grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--muted); }
#settings details.lset[open] > summary::after { content: '▾'; }
#settings details.lset > summary b { font-size: 15px; }
#settings details.lset > summary small { grid-column: 1; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
#settings .lsetBody { display: grid; gap: 8px; padding: 0 12px 12px; }
#settings .lsetBody .hint { margin: 0; }
#settings .lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 14.5px; }
#settings .lrow select { font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
#settings .ltog { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
#settings .ltog input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
#settings .ltog span { display: grid; gap: 2px; font-size: 14.5px; font-weight: 600; }
#settings .ltog small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.3; }
#tracksPanel .lrnSel { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0 2px; }
#tracksPanel .seg2 { display: inline-flex; flex-wrap: wrap; gap: 4px; }
#tracksPanel .seg2 button { border-radius: 999px; padding: 4px 12px; font-size: 13px; min-height: 0; }
#tracksPanel .seg2 button.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
#tracksPanel .seg.out { opacity: .5; }
/* Lernfortschritt: Pille füllt sich grün, golden bei 100 % */
.lrnProg { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 12px; font-size: 13px; color: #e6fff0; border: 1px solid #2f7a46; white-space: nowrap;
  background: linear-gradient(90deg, #2c7a45 0, #3fae66 var(--p), var(--panel) var(--p)); transition: background .4s; }
.lrnProg b { font-variant-numeric: tabular-nums; }
.lrnProg.done { background: linear-gradient(90deg, #c8961a, #ffd54a); color: #2a1d00; border-color: #ffd54a; box-shadow: 0 0 14px rgba(255, 213, 74, .45); }
.lrnProg.sm { padding: 2px 9px; font-size: 12px; }
#viewBar #vbLrn button.vbProg { padding: 0; border: 0; background: none; border-radius: 999px; }
.lrnMeter { display: block; height: 7px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin-top: 6px; }
.lrnMeter i { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, #2c7a45, #5fd38a); border-radius: 99px; transition: width .5s; }
.lrnMeter.done i { background: linear-gradient(90deg, #c8961a, #ffd54a); }
#tracksPanel .lrnHead { display: grid; gap: 2px; margin: 8px 0 2px; }
/* „Was lernst du?“ – wie „Playlist für ein Release“: Varianten mit ihren Tracks, Wahlmöglichkeiten */
#stBox .lsList { display: grid; gap: 6px; max-height: 62vh; overflow-y: auto; }
#stBox .lsCard .nm small { font-weight: 400; color: var(--muted); }
#stBox .lsCard .lsTracks { font-size: 12px; line-height: 1.4; }
#stBox .lsCard .lsTracks i { color: var(--text); font-style: normal; opacity: .8; }
#stBox .lsGrp { margin-top: 6px; font-weight: 700; font-size: 13px; color: var(--accent-edge); }
#stBox .lsGrp small { font-weight: 400; color: var(--muted); margin-left: 4px; }
#stBox .lsPick { display: grid; gap: 4px; margin: -2px 0 4px 18px; padding: 8px 10px; border-left: 2px solid var(--accent-edge); font-size: 13px; color: var(--muted); }
#stBox .lsPick label { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 14px; cursor: pointer; }
#stBox .lsPick input { accent-color: var(--accent); width: 18px; height: 18px; }
/* Handy: kurz („🎓 3/8“, „○ gelernt“) – in der Track-Übersicht ist Platz für den vollen Text */
@media (max-width: 600px) {
  .lpW { display: none; } #tracksPanel .lpW { display: inline; }
  /* „✏️ Markieren“ nur als Symbol – die Leiste daneben braucht dann weniger Abstand */
  body:not(.compact) #viewBar { padding-right: 64px; }
  #bEdit { max-width: 44px; overflow: hidden; white-space: nowrap; text-overflow: clip; padding-left: 10px; padding-right: 10px; }
}
#tracksPanel .lrnHead .lrnProg { justify-self: start; font-size: 14px; }
/* Effekte beim Abhaken */
.lrnPart { position: fixed; z-index: 60; pointer-events: none; font-size: 16px; font-weight: 800; color: #6fe39a; transform: translate(-50%, -50%); animation: lrnFly .9s ease-out forwards; }
.lrnPart.big { font-size: 22px; animation-duration: 1.7s; }
@keyframes lrnFly { 0% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.7); opacity: 0; } }
.lrnPop { animation: lrnPop .4s ease-out; }
@keyframes lrnPop { 0% { transform: scale(1); } 40% { transform: scale(1.22); box-shadow: 0 0 16px rgba(95, 211, 138, .7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lrnPart { display: none; } .lrnPop { animation: none; } }
.lrnTog.on { color: #8fe3a8; border-color: #2f7a46; }
.tag.lrn { background: #1f3a26; color: #8fe3a8; border-color: #2f7a46; }
#compact .lrnBar { display: flex; gap: 8px; align-items: center; margin: 2px 0 6px; }
#compact .lrnOk { font-size: 13px; padding: 3px 12px; min-height: 0; color: var(--muted); border-radius: 999px; }
#compact .lrnOk.on { background: #1f3a26; border-color: #2f7a46; color: #8fe3a8; font-weight: 600; }
#compact .tNote, #mChCompact .tNote { margin: 6px 0 8px; padding: 8px 12px; border-radius: 10px; background: #3a3320; border: 1px solid #6b5a22; color: #ffe9a8; font-size: 16px; line-height: 1.35; cursor: pointer; }
.shQr { display: grid; justify-items: center; gap: 6px; }
.shQr svg { width: min(300px, 80vw); height: auto; background: #fff; border-radius: 8px; }
.shQr.hidden { display: none; }
.shQr .shOpt { justify-self: start; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.shQr .shTnHead { justify-self: start; font-size: 15px; }
/* 💬 Feedback (feedback.js) */
.fbText { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); resize: vertical; }
.fbImgs { display: flex; gap: 8px; flex-wrap: wrap; }
.fbImgs:empty { display: none; }
.fbImg { position: relative; }
.fbImg img { height: 84px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.fbImg button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; line-height: 1; }
.fbTwo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fbTwo select { min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.fbTwo input { min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
@media (max-width: 520px) { .fbTwo { grid-template-columns: 1fr; } }
.fbQuote { color: var(--muted); font-size: 13.5px; border-left: 3px solid var(--line); padding: 2px 0 2px 10px; white-space: pre-wrap; }
.fbReply { white-space: pre-wrap; font-size: 15px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
/* 🎧 Vor & nach dem Kurs (vorlauf.js) */
.vlPart { display: grid; gap: 6px; }
.vlSongs { display: grid; gap: 2px; max-height: 32vh; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.vlSongs label { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 3px 0; cursor: pointer; }
.vlSongs .vlAll { font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 2px; }
#vlAfter { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 40; display: flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#vlAfter .primary { font-size: 17px; padding: 12px 18px; }
/* 📜 Neuigkeiten (changelog.js) */
#clBanner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 45; width: min(440px, calc(100vw - 24px)); box-sizing: border-box; background: var(--panel); border: 1px solid var(--accent-edge); border-radius: 14px; padding: 12px 40px 12px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.55); font-size: 14px; }
#clBanner b { display: block; font-size: 15px; margin-bottom: 4px; }
#clBanner ul { margin: 0 0 6px; padding-left: 18px; color: var(--text); } #clBanner li { margin: 2px 0; }
#clBanner .clX { position: absolute; top: 6px; right: 6px; background: none; border: 0; font-size: 20px; color: var(--muted); min-height: 0; padding: 4px 8px; }
#clBanner .clAll { color: var(--accent-edge); font-size: 13px; }
.clList { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.clEntry { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2); }
.clEntry:first-child { border-color: var(--accent-edge); }
.clHead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.clV { font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.clD { margin-left: auto; font-size: 12px; color: var(--muted); }
.clEntry ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; } .clEntry li { margin: 3px 0; }
#dVer.dLink { cursor: pointer; }
.fbHp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.shQrNo { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shHead { display: flex; align-items: baseline; gap: 10px; }
.shHead b { font-size: 18px; }
.shHead span { color: var(--muted); }
.shAvail { font-weight: 700; }
.shAvail.ok { color: var(--ok); }
.shAvail.part { color: #ffd98a; }
.shAvail.none { color: #ff8a95; }
.shCloud { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-weight: 600; }
.shCloud input { width: 18px; height: 18px; accent-color: var(--accent); }
.shFetch { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--panel2); font-size: 13.5px; }
.shPaste { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); resize: vertical; word-break: break-all; }
.mDlgCard .ic svg.ico { width: 1em; height: 1em; }
#mStartEd .mMenuIt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; font-size: 15px; white-space: normal; }
#mStartEd .mMenuIt .mHint { margin-left: auto; font-size: 12px; }
#vlBar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 21; max-width: 560px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--accent-edge); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
#vlBar .ic { font-size: 20px; }
#mStartEd .vlAppRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#mStartEd .vlAppRow select { flex: 1; min-width: 160px; }
#vlBar .nm { flex: 1; min-width: 0; display: grid; }
#vlBar .nm b { font-size: 13px; color: var(--accent-edge); white-space: nowrap; }
#vlBar .nm span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vlBar input[type=range] { width: 70px; accent-color: var(--accent); }
#vlBar button { min-height: 0; padding: 6px 10px; font-size: 16px; }
.mqNeed.on { background: var(--accent); color: #fff; border-radius: 8px; }
.shList { display: grid; gap: 2px; font-size: 14px; max-height: 40vh; overflow-y: auto; }
.shList span { color: var(--muted); font-size: 12.5px; }
.shList .miss { color: var(--muted); }
.mqNeed { text-decoration: none !important; font-size: 18px; padding: 0 4px; }
.wList { display: grid; gap: 8px; }
.wRow { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.wHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.wHead b { font-size: 16px; }
.wHead span { color: var(--muted); font-size: 12.5px; }
.wNeed { font-size: 14.5px; line-height: 1.4; }
.wNeed b { color: var(--accent-edge); font-weight: 700; }
.wNeed.none { color: var(--muted); }
.wNote { margin-top: 6px; color: #ffe9a8; font-size: 14px; }
.mRow .qNote { display: block; color: #ffd98a; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mStartEd textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); resize: vertical; }
#mChCompact .empty { color: var(--muted); text-align: center; margin-top: 30px; }

/* Schmal (Handy, Tablet hochkant): eine Ansicht auf einmal, unten ein Mini-Player */
@media (max-width: 820px) {
  .mBody, #music.tab-choreo .mBody { grid-template-columns: 1fr; }
  #mDivider { display: none; }
  /* Reiter in eigener Zeile, Symbol über dem Text */
  /* Zurück als schmales „‹“ in derselben Zeile wie die Reiter – spart eine ganze Zeile */
  .mTop { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; }
  .mTabs { flex: 1 1 0; min-width: 0; }
  .mTabs button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; font-size: 12.5px; line-height: 1.2; }
  .mTabs .narrowOnly { display: flex; }
  .mTabs .homeTab { flex: 0 0 auto; justify-content: center; padding: 4px 6px; }
  .mTabs .homeTab .ic, .navTabs .homeTab .ic { font-size: 20px; }
  .navTabs .homeTab { justify-content: center; padding: 4px 6px; }
  .mTabs .setTab { flex: 0 0 auto; justify-content: center; padding: 4px 6px; margin-left: 7px; }
  .mTabs .setTab .ic { font-size: 20px; }
  .mTabs .ic { font-size: 17px; }
  #music.tab-player #mSide { display: none; }
  #music:not(.tab-player) #mPlayer { display: none; }
  #music:not(.tab-player) #mMini { display: grid; }
  /* Anzeige kompakt: ohne Zusatzzeilen, kleinere Zeit und Knöpfe – mehr Platz für die Trackliste */
  #mDisplay { padding: 10px 14px 12px; gap: 4px; }
  #mNowSub { display: none; }
  .mNow b { font-size: 17px; }
  .mBigLbl { margin-top: 0; font-size: 11px; }
  .mBig { font-size: clamp(56px, 16vw, 84px); }
  /* ⏮ ⏭ deutlich kleiner als ▶ und mit Abstand – damit man nicht aus Versehen daneben tippt */
  .mCtl { gap: 24px; margin-top: 0; }
  .mCtl button { width: 46px; height: 46px; font-size: 17px; }
  .mCtl .mPlayBtn { width: 80px; height: 80px; font-size: 34px; }
  .mVol, .mCtlSp { width: 34px; }
  .mVol input { height: 62px; }
  .mQHead { padding: 8px 12px; }
}
/* Mini-Player unten (Choreo, Bibliothek, Playlisten): groß genug für die Bedienung im Kurs */
#mMini { grid-template-columns: auto auto 1fr auto auto; gap: 8px 12px; align-items: center; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); cursor: pointer; }
#mMini .mmPlay { width: 66px; height: 66px; border-radius: 50%; font-size: 28px; padding: 0; background: var(--accent); border-color: var(--accent); color: #fff; }
#mMini .mmPlay.pause { background: var(--panel2); color: var(--text); border-color: var(--accent); }
#mMini .tt { min-width: 0; }
#mMini .tt b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mMini .tt span { display: block; color: var(--muted); font-size: 13px; }
#mMini .big { font-size: 44px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
#mMini.wait .big, #mMini.wait .tt span { color: var(--accent-edge); }
#mMini .mmNext, #mMini .mmPrev { width: 52px; height: 52px; border-radius: 50%; padding: 0; font-size: 20px; }
#mMini .mmSeek { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
#mMini .mmSeek input { width: 100%; height: 28px; accent-color: var(--accent); margin: 0; }
#mMini .mSkip { padding: 6px 12px; font-size: 14px; }
/* Reihenfolge: ▶ ganz links (wichtigster Knopf), dann Titel, ⏮ Zeit ⏭ – ⏮ mit etwas Abstand zum Titel (Titel antippen öffnet den Player) */
#mMini .mmSeek { order: -1; } #mMini .mmPlay { order: 0; } #mMini .tt { order: 1; } #mMini .mmPrev { order: 2; margin-left: 8px; } #mMini .big { order: 3; } #mMini .mmNext { order: 4; }
#mMini { grid-template-columns: auto 1fr auto auto auto; }
/* automatischer Stopp vor einem Track: nur ein breiter, großer ▶ – ein Tipp und es geht weiter */
#mMini.stop { grid-template-columns: 1fr; }
#mMini.stop > :not(.mmPlay) { display: none; }
#mMini.stop .mmPlay { width: 100%; height: 88px; border-radius: 18px; font-size: 46px; }
/* sehr schmal (Handy hochkant): ohne ⏮ und Zeitangaben neben der Leiste */
@media (max-width: 440px) {
  /* schmal: ⏮ bleibt (Track neu starten / zurück, falls versehentlich weiter), dafür alles etwas kompakter */
  #mMini { grid-template-columns: auto 1fr auto auto auto; gap: 8px 8px; padding-left: 10px; padding-right: 10px; }
  #mMini .mmSeek span { display: none; }
  #mMini .mmSeek { grid-template-columns: auto 1fr auto; }
  #mMini .big { font-size: 30px; }
  #mMini .mmPlay { width: 56px; height: 56px; }
  #mMini .mmNext, #mMini .mmPrev { width: 42px; height: 42px; font-size: 17px; }
}
.mSkip { padding: 2px 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; border-radius: 999px; min-height: 0; }
.mSkip:hover { color: var(--text); }

/* ---------------------------------------------------------------------------
   Studio-Modus (studio.js): Tablet-Anmeldung, Playlist-Auswahl, Verwaltung
   --------------------------------------------------------------------------- */
#drop .dLink, .dLink { background: none; border: 0; color: var(--muted); font-size: 13px; padding: 6px 8px; text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.dLink:hover { color: var(--text); }
button.danger { color: #ff8a95; border-color: #5a2a30; }
.grow { flex: 1; }
/* Tablet: ganze Fläche, große Knöpfe */
#studio { position: fixed; inset: 0; z-index: 18; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 16px calc(20px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,77,94,.14), transparent 70%), var(--bg); }
#studio.hidden, #stDlg.hidden, #stAdminBar.hidden { display: none; }
.stHero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stHero img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 8px 28px rgba(255,77,94,.28); }
.stHero b { font-size: 28px; font-weight: 800; }
.stTitle { font-size: 20px; font-weight: 700; text-align: center; }
.stSub { color: var(--muted); text-align: center; margin-top: -10px; }
.av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ff4d5e, #e8364a); color: #fff; font-weight: 800; font-size: 16px; display: inline-grid; place-items: center; flex: none; }
.av.big { width: 72px; height: 72px; font-size: 28px; }
.stWho { display: grid; grid-template-columns: repeat(auto-fill, 160px); justify-content: center; gap: 12px; width: min(820px, 100%); }
.stWho button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; border-radius: 16px; background: var(--panel); font-size: 18px; font-weight: 700; white-space: normal; }
.stWho .av { width: 58px; height: 58px; font-size: 22px; }
.stFoot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; text-align: center; }
.stWarn { color: var(--warn); font-size: 13.5px; line-height: 1.4; max-width: 520px; }
/* PIN-Eingabe */
.stPin { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: auto 0; }
.stDots { display: flex; gap: 14px; height: 22px; align-items: center; }
.stDots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); }
.stDots i.on { background: var(--text); border-color: var(--text); }
.stDots.shake { animation: stShake .35s; }
@keyframes stShake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.stMsg { color: #ff8a95; min-height: 1.3em; font-size: 14px; text-align: center; }
.stPad { display: grid; grid-template-columns: repeat(3, 84px); gap: 14px; }
.stPad button { height: 84px; border-radius: 50%; font-size: 30px; font-weight: 600; background: var(--panel); padding: 0; }
.stPad button.primary { font-size: 22px; background: var(--accent); }
/* Playlist-Auswahl */
#studio.scr-lists { align-items: stretch; }
.stUser { display: flex; align-items: center; gap: 12px; width: min(820px, 100%); margin: 0 auto; font-size: 18px; }
.stUser button { padding: 10px 18px; font-size: 16px; border-radius: 10px; }
#studio .stTitle { width: min(820px, 100%); margin: 0 auto; }
.stLists { width: min(820px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.stLists .mGrp { grid-column: 1 / -1; margin: 6px 2px -4px; font-size: 13px; }
.stPl { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.stPl:hover { border-color: #55555f; }
.stPl.live { border-color: var(--ok); }
.stPl .nm { font-size: 19px; font-weight: 700; }
.stPl .meta { color: var(--muted); font-size: 13px; }
.stPl .fm { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.stPl .fm button { flex: 1 1 auto; padding: 12px 14px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.stPl .fm small { font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; margin-left: 4px; }
/* Musikplayer: nur Player und Choreo am Tablet */
.mTabs .kioskOnly { display: none; }
body.kiosk .mTabs .kioskOnly { display: block; }
body.kiosk .mTabs [data-tab=lib], body.kiosk .mTabs [data-tab=lists], body.kiosk .mTabs .modeSw, body.kiosk #mqEdit, body.kiosk #mChMake, body.kiosk #mChSave, body.kiosk #mChPrint { display: none; }
/* Choreo am Tablet nur ansehen: kein Markieren/Kopieren, kein Speichern-Menü per langem Drücken */
body.kiosk #mChoreo { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
@media (max-width: 820px) { body.kiosk .mTabs .kioskOnly { display: flex; } }
#mSrcBar { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13.5px; min-width: 0; }
#mSrcBar:empty { display: none; }
#mSrcBar .who { font-weight: 700; white-space: nowrap; }
#mSrcBar .st { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storeLine { margin: 14px 2px 4px; }
/* Links in Hinweisen: Akzentfarbe statt Browser-Blau (auf dunklem Grund kaum lesbar) */
.mHint a, .storeLine a { color: var(--accent-edge); white-space: nowrap; }
#stBox .storeLine { margin: 0; }
.mListHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.mListHead .grow { flex: 1; }
#mMineOpen.prog { background-image: linear-gradient(90deg, rgba(255, 184, 0, .3) var(--p), transparent var(--p)); font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { #mSrcBar .st, #mSrcBar .lt, #mSrcBar #mbMineSync { display: none; } #mSrcBar .who { max-width: 90px; overflow: hidden; text-overflow: ellipsis; } }
/* Admin-Modus: Hinweis oben, antippen öffnet die Verwaltung */
#stAdminBar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 21; border-radius: 0 0 10px 10px; padding: 2px 12px 4px; font-size: 12px; font-weight: 700;
  background: #3a3320; border-color: var(--accent-edge); border-top: 0; color: #ffd98a; }
/* Dialog: Einrichten, Admin-Passwort, Verwaltung */
#stDlg { position: fixed; inset: 0; z-index: 22; background: #000b; display: flex; align-items: center; justify-content: center; padding: 12px; }
.stBox { width: min(640px, 100%); max-height: min(90vh, 100%); display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px #000a; overflow-y: auto; }
.stBox .mDlgCard[disabled] { opacity: .45; }
/* Inhalt nie zusammenquetschen – bei wenig Höhe scrollt das Fenster (sonst laufen Texte über die Knöpfe hinaus) */
.stBox > * { flex-shrink: 0; }
.stBox .mAddTo.hidden, .stBox .linkbtn.hidden { display: none; }
.shQr .linkbtn { justify-self: start; }
.stStatus { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.stStatus .ok { color: var(--ok); } .stStatus .warn { color: var(--warn); }
.stTabs { align-self: flex-start; }
.stBody { display: flex; flex-direction: column; gap: 6px; min-height: 120px; overflow-y: auto; }
.stBar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.stBtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.stRow { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); cursor: pointer; }
.stRow.off { opacity: .55; }
.stRow .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stRow .tt > span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.stRow .tt .warn { color: var(--warn); }
.stRow .acts { display: flex; gap: 6px; }
.stRow .acts button.on { background: #3a3110; border-color: var(--accent-edge); }
.stRow .tt .stFrom { color: var(--accent-edge); }
.stPl .stEarly { align-self: flex-start; font-size: 12px; font-weight: 700; color: #2a2000; background: var(--accent-edge); border-radius: 999px; padding: 2px 10px; }
.stForm { display: flex; flex-direction: column; gap: 10px; }
.stForm + .stForm, .stInfo { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.stForm label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.stForm label small { font-weight: 400; color: var(--muted); }
.stForm input:not([type=checkbox]) { padding: 9px 10px; font-size: 15px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
.stInl { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.stInl input { width: 80px; }
.stTwo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .stTwo { grid-template-columns: 1fr; } }
.stLbl { font-weight: 700; font-size: 14px; }
.stChips { display: flex; flex-wrap: wrap; gap: 6px; }
.stForm label.stChip { flex-direction: row; font-weight: 600; font-size: 13px; cursor: pointer; position: relative; }
.stChip input { position: absolute; opacity: 0; pointer-events: none; }
.stChip span { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); }
.stChip input:checked + span { background: #3a3320; border-color: var(--accent-edge); color: #ffd98a; }
.stChip input:focus-visible + span { outline: 2px solid var(--accent-edge); }
.stAddProg { display: flex; gap: 8px; }
.stAddProg input { flex: 1; min-width: 0; }
.stForm label.stCheck { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.stCheck input { width: 18px; height: 18px; accent-color: var(--accent); }
.stInfo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.stInfo + .stInfo { margin-top: 12px; }
.stDirs { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.stDirs button { text-align: left; }
.stHelp summary { cursor: pointer; color: var(--accent-edge); font-weight: 600; }
.stHelp ol { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
/* zwei Felder nebeneinander: Eingabefelder unten bündig, auch wenn eine Beschriftung zwei Zeilen hat */
.stTwo label input { margin-top: auto; }
/* Schreibweisen eines Programms */
.stTag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border-radius: 999px; background: #3a3320; border: 1px solid var(--accent-edge); color: #ffd98a; font-size: 13px; font-weight: 600; }
.stTag button { background: none; border: 0; padding: 0 6px; color: inherit; font-size: 12px; min-height: 0; }
.stRow.un { border-color: var(--warn); cursor: default; }
.stRow select { max-width: 45%; padding: 6px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
/* Bibliothek: Suche und „➕ Musik“ in einer Zeile */
.mSearchRow { display: flex; gap: 8px; align-items: flex-start; }
.mSearchRow #mSearch { flex: 1; min-width: 0; }
.mSearchRow button { padding: 9px 12px; border-radius: 8px; }
/* Startseite: Studio-Modus als kleines Symbol in der Fußzeile; zu einem Studio gehörend als Text */
#drop .dIcon { background: none; border: 0; padding: 0 4px; font-size: 13px; opacity: .45; filter: grayscale(1); vertical-align: baseline; }
#drop .dIcon:hover { opacity: .9; filter: none; }
#drop .dIcon.on { display: block; margin: 6px auto 0; opacity: .85; filter: none; color: var(--text); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
/* Bibliothek: Releases, deren Musik noch als ZIP vorliegt */
.mRel.zip .relHead { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; font-size: 15px; }
.mRel.zip .relHead .nm { flex: 1; font-weight: 600; }
.mRel.zip .relHead .ct { color: var(--muted); font-size: 12.5px; }
.mRel.zip .relHead button { padding: 6px 10px; font-size: 13px; }
/* Studio-Tablet, breiter Bildschirm: Reiter „Player“ = links groß die Anzeige, rechts die Trackliste;
   Reiter „Choreo“ = links der Player (Anzeige + Trackliste), rechts die Choreo */
@media (min-width: 821px) {
  body.kiosk .mTabs .narrowOnly { display: block; }
  body.kiosk #music.tab-player .mBody { grid-template-columns: 1fr; }
  body.kiosk #music.tab-player #mSide, body.kiosk #music.tab-player #mDivider, body.kiosk #music.tab-player #mHDiv { display: none; }
  body.kiosk #music.tab-player #mPlayer { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); grid-template-rows: auto 1fr; }
  body.kiosk #music.tab-player #mDisplay { grid-column: 1; grid-row: 1 / 3; height: auto !important; min-height: 0; border-bottom: 0; border-right: 1px solid var(--line);
    container-type: size; align-content: safe center; overflow-y: auto; scrollbar-width: none; }
  body.kiosk #music.tab-player .mQHead { grid-column: 2; grid-row: 1; }
  body.kiosk #music.tab-player #mQueue { grid-column: 2; grid-row: 2; }
  body.kiosk #music.tab-player #mPlayer.hide-queue #mDisplay { grid-column: 1 / 3; border-right: 0; }
  body.kiosk #music.tab-player .mBig { font-size: clamp(64px, min(11vw, 24cqh), 220px); }
  body.kiosk #music.tab-player .mCtl .mPlayBtn { width: clamp(104px, 20cqh, 170px); height: clamp(104px, 20cqh, 170px); font-size: clamp(44px, 8cqh, 72px); }
  body.kiosk #music.tab-player .mNow b { font-size: 24px; white-space: normal; }
  body.kiosk #music.tab-choreo .mBody { grid-template-columns: var(--mKio, 36%) 8px 1fr; }
  body.kiosk #music.tab-choreo #mPlayer { order: 0; }
  body.kiosk #music.tab-choreo #mDivider { order: 1; }
  body.kiosk #music.tab-choreo #mSide { order: 2; }
}
/* Studio-Tablet, Reiter „Player“: Lautstärke senkrecht ganz rechts über die ganze Höhe (auch neben der Zeitleiste) */
@media (min-width: 821px) {
  body.kiosk #music.tab-player #mDisplay { padding-left: 28px; padding-right: 86px; }
  body.kiosk #music.tab-player .mCtlSp { display: none; }
  body.kiosk #music.tab-player .mVol { position: absolute; right: 18px; top: 52px; bottom: 28px; width: 48px; justify-content: center; font-size: 13px; }
  body.kiosk #music.tab-player .mVol input { flex: 1; height: auto; min-height: 120px; max-height: 520px; width: 34px; }
  body.kiosk #music.tab-player .mCtl .mVol button { font-size: 22px; }
}
/* Studio-Tablet, Reiter „Player“: Zeitleiste über die ganze Breite, größer zum Tippen */
@media (min-width: 821px) {
  body.kiosk #music.tab-player .mSeek { max-width: none; font-size: 16px; gap: 14px; margin-top: 28px; }
  body.kiosk #music.tab-player .mSeek input { height: 36px; }
  body.kiosk #music.tab-player .mSeek .mSkip { padding: 8px 16px; font-size: 16px; }
}
/* Lautstärke in jedem Modus senkrecht ganz rechts in der Anzeige, über die ganze Höhe (auch neben der Zeitleiste);
   ohne Regler (iPhone/iPad, im ⚙ ausgeblendet) wird kein Platz freigehalten */
.mCtlSp { display: none; }
.mVol { position: absolute; right: 24px; top: 44px; bottom: 16px; width: 48px; justify-content: center; }   /* etwas Abstand zum Rand */
.mVol input { flex: 1; height: auto; min-height: 70px; max-height: 520px; width: 30px; }
#mPlayer:not(.hide-vol) #mDisplay:has(.mVol:not(.hidden)) { padding-right: 86px; }
@media (max-width: 820px) {
  .mVol { right: 12px; top: 34px; bottom: 8px; width: 40px; }
  .mVol input { min-height: 50px; }
  #mPlayer:not(.hide-vol) #mDisplay:has(.mVol:not(.hidden)) { padding-right: 58px; }
}
@media (min-width: 821px) {
  body.kiosk #music.tab-player #mPlayer:not(.hide-vol) #mDisplay { padding-left: 28px; padding-right: 96px; }
  body.kiosk #music.tab-player .mVol { right: 28px; top: 52px; bottom: 28px; }
}
/* Schließen-Kreuz: „ד statt „✕“ (fehlt in manchen Schriften, z. B. im Tesla-Browser) – etwas größer, damit es gleich wirkt */
#mDlgClose, #fpClose, #stClose, #bEditClose { font-size: 20px; line-height: 1; }
/* gerade hinzugefügtes Release in „Playlist für ein Release“ */
.mDlgRel.fresh { border-color: var(--accent-edge); background: var(--accent-soft); }
/* „ℹ Infos zum Track“ in der Kompaktansicht: zugeklappt oben, aufgeklappt Abschnitte wie in den Choreo-Notes */
.cInfo { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0; flex-shrink: 0; }
.cInfo > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--accent-edge); list-style: none; user-select: none; }
.cInfo > summary::-webkit-details-marker { display: none; }
.cInfo > summary::after { content: ' ▸'; color: var(--muted); }
.cInfo[open] > summary::after { content: ' ▾'; }
.cInfo > summary small { color: var(--muted); font-weight: 400; margin-left: 6px; }
/* Grafik-Symbole in Knöpfen (statt Sonderzeichen, die nicht jede Schrift kennt) */
svg.ico { vertical-align: -0.15em; }
/* Abschnitte: Überschrift, Ebenen als kleine Marken, Aufzählungen; Fettes aus den Notes = Satz zum Ansagen → hervorgehoben */
.cInfo .iSec { padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.cInfo .iSec h4 { margin: 2px 0 6px; font-size: 14px; letter-spacing: .03em; color: var(--accent-edge); }
.cInfo.tech .iSec h4 { font-size: 16px; color: var(--text); }
.cInfo .iSub { display: inline-block; margin: 8px 0 4px; padding: 1px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cInfo .iSec p { margin: 4px 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.cInfo .iSec ul { margin: 2px 0 4px; padding-left: 20px; }
.cInfo .iSec li { margin: 3px 0; font-size: 15px; line-height: 1.4; color: #c9c9d1; }
.cInfo .iSec strong { color: var(--accent-edge); font-weight: 800; }
/* Countdown zum nächsten Track: groß und halbtransparent über allem im Musikbereich, blockiert keine Eingaben */
#mCount { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 25; pointer-events: none; text-align: center;
  background: rgba(16, 16, 20, .93); border: 2px solid var(--accent-edge); border-radius: 22px; padding: 10px 22px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.6); width: min(88vw, 560px); box-sizing: border-box; }
#mCount.hidden { display: none; }
#mCount .cdN { font-size: clamp(90px, 24vw, 220px); font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
#mCount .cdNx { margin-top: 4px; font-size: clamp(16px, 3.6vw, 24px); font-weight: 700; color: var(--accent-edge); }
#mCount .cdNeed { margin-top: 6px; font-size: clamp(14px, 3vw, 19px); color: var(--text); white-space: pre-line; }
#mCount .cdNeed.hidden { display: none; }
/* ✂ A/B: Track in seine Teile trennen (Extra) – die Teile eingerückt darunter */
.mTr .splitBtn { font-size: 12px; padding: 3px 8px; color: var(--muted); }
.mTr .splitBtn.on { color: var(--text); border-color: var(--accent-edge); }
.mTr.sub { margin-left: 22px; border-left: 3px solid var(--accent-edge); }
.mTr.hasSplit { grid-template-columns: auto 1fr auto auto auto auto; }
.rowR { display: flex; flex-wrap: wrap; gap: 4px 12px; }
@media (max-width: 600px) { .mTr .splitBtn .lt { display: none; } .mTr .splitBtn { padding: 3px 7px; } }
/* Übungsnamen in den Karten antippbar (Technik & Glossar) */
#compact .card .seq strong, #mChCompact .card .seq strong { cursor: help; text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 3px; }
body.noExTap #compact .card .seq strong, body.noExTap #mChCompact .card .seq strong { cursor: inherit; text-decoration: none; }
#exPop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 14px; }
#exPop.hidden { display: none; }
#exPop .exBox { width: min(560px, 100%); max-height: min(80vh, 100%); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#exPop .exHead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
#exPop .exHead b { flex: 1; font-size: 18px; }
#exPop .exClose { font-size: 20px; line-height: 1; padding: 2px 10px; }
#exPop .exBody { overflow-y: auto; padding-bottom: 8px; }
#exPop .exGrp { padding: 10px 14px 0; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
#exPop .iSec { padding: 6px 14px 10px; }
#exPop .iSec h4 { margin: 2px 0 6px; font-size: 16px; color: var(--text); }
#exPop .iSub { display: inline-block; margin: 8px 0 4px; padding: 1px 9px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
#exPop .iSec p, #exPop .iSec li { margin: 3px 0; font-size: 15px; line-height: 1.4; }
#exPop .iSec ul { margin: 2px 0 4px; padding-left: 20px; }
#exPop .iSec li { color: #c9c9d1; }
#exPop .iSec strong { color: var(--accent-edge); font-weight: 800; }
/* ✂️ / 🔗 im Playlist-Editor */
.mItem [data-a=split], .mItem [data-a=join] { font-size: 15px; padding: 3px 8px; }
/* ---- Vollbild beim Lernen (video.js): Video füllt alles, Steuerung liegt unten darüber und blendet sich beim Abspielen aus ---- */
#fsCue { display: none; }
#fsHint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; padding: 12px 22px; font-size: 17px; font-weight: 700; border-radius: 999px; background: var(--accent); color: #fff; border: 0; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#fsHint.hidden { display: none; }
#main #left:fullscreen { position: relative; }
#main #left:fullscreen #videoWrap { flex: 1; aspect-ratio: auto; height: 100%; }
#main #left:fullscreen #controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.8) 30%); transition: opacity .3s; }
#main #left.fsIdle #controls { opacity: 0; pointer-events: none; }
#main #left.fsIdle, #main #left.fsIdle video { cursor: none; }
#main #left:fullscreen #fsCue { display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--fsCtl, 120px) + 10px); z-index: 2; width: max-content; max-width: 96%; box-sizing: border-box; padding: 4px 14px 6px; border-radius: 10px; background: rgba(0,0,0,.62); color: #fff; text-align: center; font-size: clamp(14px, 4.2vh, 26px); line-height: 1.3; transition: bottom .3s, top .3s; pointer-events: none; }
#main #left.fsIdle:fullscreen #fsCue { bottom: 14px; }
/* Ecken: schmaler (knapp die halbe Breite), links- bzw. rechtsbündig; oben bleibt sie oben, auch wenn die Steuerung kommt */
#main #left:fullscreen[data-cue=bl] #fsCue, #main #left:fullscreen[data-cue=tl] #fsCue { left: 2%; transform: none; max-width: 46%; text-align: left; }
#main #left:fullscreen[data-cue=br] #fsCue, #main #left:fullscreen[data-cue=tr] #fsCue { left: auto; right: 2%; transform: none; max-width: 46%; text-align: right; }
#main #left:fullscreen[data-cue=tl] #fsCue, #main #left:fullscreen[data-cue=tr] #fsCue { top: 12px; bottom: auto; }
#main #left:fullscreen #fsCue.empty, #main #left:fullscreen[data-cue=off] #fsCue { display: none; }
#fsCue .fcSeq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
#fsCue .fcSeq strong { color: var(--accent-edge); }
#fsCue .fcReps { display: inline-block; padding: 0 10px; border-radius: 999px; background: var(--accent); font-weight: 800; font-size: .8em; line-height: 1.35; font-variant-numeric: tabular-nums; vertical-align: .08em; }
/* Auswahl der Position nur im Vollbild */
#selCue { display: none; }
:fullscreen #selCue { display: inline-block; }
#extra.pop #selCue { flex: 1 1 100%; }
/* ---- Studio-Tablet: eigene Playlist per QR-Code (studio.js ownScan) ---- */
.stPl { position: relative; }
.stPl .ownDel { position: absolute; top: 10px; right: 10px; padding: 4px 10px; font-size: 15px; min-height: 0; }
.stPl:has(.ownDel) .nm { padding-right: 52px; }
.stUser { flex-wrap: wrap; }
.stUser .av + .av { margin-left: -18px; box-shadow: 0 0 0 2px var(--bg); }
.ownCam { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; background: #000; border-radius: 12px; overflow: hidden; }
.ownCam video { width: 100%; height: 100%; object-fit: cover; }
.ownFrame { position: absolute; left: 50%; top: 50%; width: min(60%, 60vh); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.85); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }

/* „⤵ Aus Playlist“ im Playlist-Editor (mergeFromList, music.js) */
.mgList { display: grid; gap: 8px; max-height: 55vh; overflow-y: auto; }
.mgRow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.mgRow .tt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mgRow .tt span { color: var(--muted); font-size: 13px; }
.mgRow .tt .swTot { color: var(--text); font-variant-numeric: tabular-nums; }
.mgRow .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mgRow .acts button { padding: 6px 10px; font-size: 13px; }
/* Studio-Freischaltung: Geräte-Nummer / erzeugter Code (studio.js askStudioCode, unlockGenerator) */
.ukDev { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.ukDev span { color: var(--muted); font-size: 13px; flex-basis: 100%; }
.ukDev b { font-size: 24px; letter-spacing: .08em; font-variant-numeric: tabular-nums; flex: 1; white-space: nowrap; }
.ukLog { display: grid; gap: 4px; font-size: 13px; max-height: 30vh; overflow-y: auto; }
.ukLog div { display: flex; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.ukLog b { color: var(--text); letter-spacing: .05em; }
.ukLog span { margin-left: auto; }

/* Trennlinien mit dem Finger: unsichtbar breitere Greiffläche (je ~16 px über die Nachbarn) und ein deutlicher Griff */
@media (pointer: coarse) {
  #main { grid-template-columns: var(--split, 52%) 10px 1fr; }
  #mHDiv { height: 10px; }
  #divider, #mDivider, #mHDiv { z-index: 6; }
  #divider::before, #mDivider::before { content: ''; position: absolute; top: 0; bottom: 0; left: -16px; right: -16px; }
  #mHDiv::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; bottom: -16px; }
  #divider::after, #mDivider::after { width: 6px; height: 64px; border-radius: 3px; background: #9a9aa3; }
  #mHDiv::after { width: 64px; height: 6px; border-radius: 3px; background: #9a9aa3; }
}
@media (pointer: coarse) and (orientation: portrait) {
  #main { grid-template-columns: 1fr; grid-template-rows: var(--splitV, 42%) 14px 1fr; }
  #divider::before { left: 0; right: 0; top: -16px; bottom: -16px; }
  #divider::after { width: 64px; height: 6px; }
}