/* ChoreoTrainer — angelehnt an A-29 „Good Beats Tool“:
   Schwarz/Weiß, breite Grotesk für Display, Mono für Labels, Farbstreifen als Codierung */

:root {
  --bg: #fff;
  --fg: #000;
  --muted: #5e5e5e;
  --line: rgba(0, 0, 0, .18);
  --panel: #ececec;
  --track: rgba(0, 0, 0, .13);
  --rule: #b9b9b9;        /* einzige Trennlinie */
  --surface: #f0f0f0;     /* leicht abgesetzte Fläche */
  --surface-2: #e2e2e2;   /* stärker abgesetzt (Hover, aktive Fläche) */
  --tile-gap: 5px;        /* Abstand zwischen Kacheln */
  --hover-fill: rgba(0, 0, 0, .08); /* leicht transparente Füllung beim Hovern */
  --c1: #F5769C; --c2: #1E6236; --c3: #AFA23A; --c4: #F9C041; --c5: #F3672D; --c6: #324BB4;
  --accent: var(--c4);
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --wide: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --hover-fill: rgba(255, 255, 255, .14); /* sonst bleiben Uhr-/Kalender-Icon und Auswahlpfeile schwarz */
  --bg: #000; --fg: #fff; --muted: #a2a2a2; --line: rgba(255, 255, 255, .2);
  --panel: #1a1a1a; --track: rgba(255, 255, 255, .18);
  --rule: #4c4c4c; --surface: #141414; --surface-2: #232323;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --hover-fill: rgba(255, 255, 255, .14);
    --bg: #000; --fg: #fff; --muted: #a2a2a2; --line: rgba(255, 255, 255, .2);
    --panel: #1a1a1a; --track: rgba(255, 255, 255, .18);
    --rule: #4c4c4c; --surface: #141414; --surface-2: #232323;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html.booting .topbar, html.booting main { visibility: hidden; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 var(--mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
/* Auswahl invertiert statt gelb, damit sie auch auf gelben Markern sichtbar ist */
::selection { background: var(--fg); color: var(--bg); }

.wide { font-family: var(--wide); font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; line-height: .95; }
.label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }

/* ── Kopfzeile ───────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  position: sticky; top: 0; z-index: 20; background: var(--bg);
}
.wordmark { font-family: var(--wide); font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.wordmark sup { font-size: .55em; font-weight: 600; margin-left: 2px; }
.topbar nav { display: flex; align-items: center; gap: 22px; font-size: 12px; letter-spacing: .08em; }
.topbar nav a { opacity: .55; }
.topbar nav a.active, .topbar nav a:hover { opacity: 1; }
.topbar nav .icon-link { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .wordmark { line-height: 1; display: block; }
.back-btn { width: 16px; height: 16px; display: grid; place-items: center; opacity: .6; }
.back-btn svg { display: block; }
.back-btn:hover { opacity: 1; }
.theme-toggle { display: grid; place-items: center; width: 28px; height: 28px; }

main { padding: 0 var(--gutter) 80px; }

/* ── Hub ─────────────────────────────────────── */

.dropzone {
  display: grid; place-items: center; text-align: center; gap: 6px;
  /* Rahmen aus vier gestrichelten Linien statt „border: dashed“: Safari am iPhone ließ bei 1,5 px die Seiten weg */
  --dz-line: 1.5px; --dz-dash: repeating-linear-gradient(90deg, var(--fg) 0 6px, transparent 6px 11px);
  background-image: var(--dz-dash), var(--dz-dash),
    repeating-linear-gradient(180deg, var(--fg) 0 6px, transparent 6px 11px), repeating-linear-gradient(180deg, var(--fg) 0 6px, transparent 6px 11px);
  background-size: 100% var(--dz-line), 100% var(--dz-line), var(--dz-line) 100%, var(--dz-line) 100%;
  background-position: top left, bottom left, top left, top right;
  background-repeat: no-repeat;
  padding: clamp(28px, 6vw, 64px) 16px;
  cursor: pointer; transition: background-color .15s;
}
.dropzone:hover, .dropzone.over { background-color: var(--panel); }
.dropzone.over { background-image: none; outline: var(--dz-line) solid var(--fg); outline-offset: calc(-1 * var(--dz-line)); }
.dropzone strong { font-family: var(--wide); font-stretch: 125%; font-weight: 800; font-size: clamp(18px, 2.6vw, 30px); }
.dropzone input { display: none; }

/* Kacheln füllen jede Zeile ganz aus (auch eine übrige letzte Kachel) */
.stats { display: flex; flex-wrap: wrap; gap: var(--tile-gap); margin-top: clamp(28px, 4vw, 48px); }
.stats > .stat { flex: 1 1 200px; min-width: 0; }
/* ausgeglichene Reihen (balanceTiles in util.js): gleich viele, gleich große Kacheln je Reihe */
.stats.balanced { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.stats.balanced > .zone-empty { grid-column: 1 / -1; }
.stat { padding: 14px 16px 16px; background: var(--surface); }
.stat .hint { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; }
.stat b { display: block; font-family: var(--wide); font-stretch: 125%; font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Handy: mindestens zwei Kacheln nebeneinander statt alle untereinander */
@media (max-width: 600px) {
  .stats > .stat { flex: 1 1 calc(50% - var(--tile-gap)); }
  .stat { padding: 12px 12px 14px; }
  .stat b { font-size: 18px; }
}

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: clamp(36px, 5vw, 64px) 0 14px; }
.section-head h2 { font-size: clamp(20px, 2.4vw, 28px); margin: 0; }

.columns { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(20px, 3vw, 48px); }
@media (max-width: 860px) { .columns { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.card { display: block; }
.card .thumb { aspect-ratio: 16/10; background: var(--panel) center/cover no-repeat; position: relative; }
/* Vorschauen immer neutral: keine Player-Filter, und HDR-Videos (iPhone) auf SDR begrenzen.
   Sonst springt Helligkeit/Kontrast zwischen Standbild (SDR-JPEG) und Video, und macOS schaltet EDR hin und her → Flackern */
.card .thumb video, .mini-thumb video, .card .thumb .still, .mini-thumb .still, .sq-thumb video, .sq-thumb .still { filter: none !important; dynamic-range-limit: standard; }
.card .thumb .frame, .mini-thumb .frame, .sq-thumb .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb { overflow: hidden; }
.cards > *, .columns > * { min-width: 0; }
.card .thumb video, .mini-thumb video, .sq-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb .still, .mini-thumb .still, .sq-thumb .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-thumb { position: relative; width: 88px; aspect-ratio: 16/10; background: var(--panel); }
a.mini { display: block; }
.card .thumb .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }
.card h3 { font-size: 13px; font-weight: 600; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .02em; }
.card:hover h3 { text-decoration: underline; }

.songlist { list-style: none; margin: 0; padding: 0; }
/* Innenabstand, damit Cover und Dauer beim Hover nicht am Rand der Fläche kleben; Liste dafür etwas nach außen gerückt */
.songlist { margin-left: -10px; margin-right: -10px; }
.songlist li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.songlist img, .songlist .nocover { width: 40px; height: 40px; object-fit: cover; background: var(--panel); display: block; }
.songlist .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.songlist li > div { min-width: 0; } /* sonst sprengen lange Titel die Spalte */
.songlist li > div .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .label.next-class { color: var(--fg); margin-top: 2px; }

.stripes { margin: 0 calc(-1 * var(--gutter)); }
.stripe {
  position: relative; display: flex; gap: 0 16px; align-items: baseline;
  padding: 13px var(--gutter); font-size: clamp(13px, 1.6vw, 20px); letter-spacing: .02em;
  white-space: nowrap;
}
.stripe .cc-gap { flex: 1; }
/* Listen: Titel, Wochentag, Uhrzeit, Coach stehen über alle Zeilen bündig (Subgrid) */
.stripes, .cm-list { display: grid; grid-template-columns: minmax(0, max-content) repeat(3, max-content) minmax(16px, 1fr) repeat(var(--rc, 1), max-content); }
.stripes > .stripe, .cm-list > .cm-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.cc-title { overflow: hidden; text-overflow: ellipsis; }
.cc-meta:not(:empty)::before { content: '·'; margin: 0 .55em; }
.stripes > .stripe, .cm-list > .cm-row { column-gap: 0; }
.cc-right + .cc-right:not(:empty)::before { content: '·'; margin: 0 .55em; }
.stripe .cc-gap + .cc-right:last-child { justify-self: end; padding-left: 12px; } /* einzelne Angabe rechts (z. B. Anzahl) */

a.stripe:hover { filter: brightness(1.08); }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none; }
.stripe.dragging { opacity: .35; }
.stripe .grip { position: absolute; left: calc(var(--gutter) / 2 - 7px); top: 50%; transform: translateY(-50%); display: flex; opacity: 0; transition: opacity .15s; }
.stripe .grip svg { width: 14px; height: 13px; }
.stripe:hover .grip, .stripe.dragging .grip { opacity: .7; }
.stripe.drop-before { box-shadow: inset 0 3px 0 var(--fg); }
.stripe.drop-after { box-shadow: inset 0 -3px 0 var(--fg); }
.chip.custom { position: relative; border: 1px dashed var(--fg); cursor: pointer; }
.chip.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }

.editable { cursor: text; border-bottom: 1px dotted transparent; }
.editable:hover { border-bottom-color: currentColor; }
.inline-edit input.inline-input, .markers .kind input {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; line-height: inherit;
  display: inline; width: auto; min-width: 0; max-width: 100%; field-sizing: content;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; outline: none;
  box-shadow: inset 0 -1px 0 currentColor; vertical-align: top; box-sizing: border-box;
}
.inline-edit > a, .inline-edit > .editable { display: inline-block; vertical-align: top; }
.empty { padding: 28px 0; color: var(--muted); }

.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 7px; height: 7px; border: 1px solid currentColor; display: block; }
.dots i.on { background: currentColor; }


/* ── Formulare / Upload ─────────────────────── */
.upload-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); padding-top: 24px; }
@media (max-width: 900px) { .upload-grid { grid-template-columns: 1fr; } }
.upload-grid video { width: 100%; max-height: 60vh; background: #000; display: block; }
.fieldset { border-top: 1px solid var(--rule); padding: 14px 0 22px; }
.fieldset > .label { display: block; margin-bottom: 12px; color: var(--fg); }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.field { display: grid; gap: 4px; }
.field > span:not(.pick) { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=date], input[type=time], input[type=number], input[type=search], select, textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: 7px 0; border-radius: 0; outline: none;
}
input:focus, select:focus, textarea:focus { border-bottom-color: var(--fg); }
select option { background: var(--bg); }
textarea { min-height: 84px; resize: vertical; border: 1px solid var(--line); padding: 8px; }
textarea:focus { border-color: var(--fg); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { padding: 5px 10px; font-size: 12px; letter-spacing: .04em; border: 1px solid transparent; }
.chip.sel { outline: 2px solid var(--fg); outline-offset: 2px; }
/* Farbfelder ohne Text, gleiche längliche Form wie die übrigen Chips */
button.chip[data-hex] { width: 64px; height: 28px; padding: 0; }
.chip.custom { height: 28px; display: inline-flex; align-items: center; }
.color-label { display: block; margin-bottom: 8px; }

.song-search { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: var(--bg); border: 1px solid var(--fg); max-height: 320px; overflow: auto; }
.suggest button { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; }
.suggest button:hover, .suggest button.hl { background: var(--panel); }
.suggest img { width: 36px; height: 36px; object-fit: cover; }
/* Andere Fassungen (Remix, Edit …): gleiche Zeilen wie die Suchvorschläge, aber im Fluss statt als Aufklapper */
.song-versions:empty { display: none; }
.song-versions { margin-top: 8px; display: grid; gap: 6px; }
.versions { border: 1px solid var(--fg); max-height: 320px; overflow: auto; }
.versions button { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 6px 8px; }
.versions button:hover { background: var(--panel); }
.versions img { width: 36px; height: 36px; object-fit: cover; }
.song-picked { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.song-picked img, .song-picked .nocover { width: 56px; height: 56px; object-fit: cover; background: var(--panel); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--fg); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.btn.primary { background: var(--fg); color: var(--bg); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.busy, .btn.busy:disabled { opacity: 1; cursor: progress; font-variant-numeric: tabular-nums; } /* arbeitet: Status lesbar */
.btn.small { padding: 5px 9px; font-size: 11px; }
.btn.danger:not(:disabled):hover { background: var(--c5); border-color: var(--c5); color: #000; }
.btn, .ctl, .linkbtn, .rating button, .seg button, .pop-close { transition: opacity .15s, background-color .15s, border-color .15s, color .15s; }
/* Hover: Knöpfe bekommen eine leicht transparente graue (hell) bzw. weiße (dunkel) Füllung;
   gefüllte Knöpfe (primär, aktiv) werden etwas heller */
.btn:not(:disabled):hover, .ctl:not(:disabled):hover, .rating button:hover, .pop-close:hover { background-color: var(--hover-fill); }
.btn.primary:not(:disabled):hover, .ctl.on:hover, .rating button.on:hover { background-color: color-mix(in srgb, var(--fg) 78%, var(--bg)); }
.linkbtn { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Class-Ansicht ──────────────────────────── */
.choreo-block { border-top: 1px solid var(--rule); padding: 18px 0; display: grid; grid-template-columns: 120px 1fr; gap: 18px; }
.choreo-block img, .choreo-block .nocover { width: 120px; aspect-ratio: 1; object-fit: cover; background: var(--panel); }
.reclist { list-style: none; padding: 0; margin: 10px 0 0; }
.reclist li { display: flex; gap: 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.reclist a { font-weight: 600; }
@media (max-width: 600px) { .choreo-block { grid-template-columns: 1fr; } }

/* ── Training ───────────────────────────────── */
/* Ein Bildschirm: Video, Zeitleisten, Leiste und Panel passen in die Höhe (Kopfzeile ≈ 64 px) */
.train { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(16px, 2.4vw, 28px); padding-top: 6px; height: calc(100vh - 72px); }
.train.panel-closed { grid-template-columns: minmax(0, 1fr) 0; gap: 0; }
.train.panel-closed .side { display: none; }
.train-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.train-main .stage { flex: none; align-self: center; max-width: 100%; }
.stage:fullscreen { width: 100vw !important; }
.panel-btn { margin-left: auto; }
.pi-below { display: none; }
@media (max-width: 1000px) {
  .pi-side { display: none; } .pi-below { display: inline; }
  .train, .train.panel-closed { grid-template-columns: 1fr; height: auto; }
  .train.panel-closed .side { display: none; }
}
main:has(.train) { padding-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; font-size: 12px; letter-spacing: .05em; }
.crumbs .tag { padding: 3px 8px; }
.crumbs h1 { font-size: clamp(18px, 2vw, 24px); margin: 0; flex-basis: 100%; text-transform: uppercase; }

.stage { position: relative; background: #000; display: grid; place-items: center; overflow: hidden; }
/* Video immer absolut mittig, Größe (--vw/--vh) aus fitStage. Breite füllen: volle Breite in eigener Höhe, was
   übersteht, schneidet die Fläche ab. Verschoben wird per transform (object-position zeichnete Brave bei pausiertem
   HDR-Video nicht neu). fit-anim: beim Wechsel Breite/Ganzes Bild gleiten Fläche und Video gemeinsam. */
.stage video { position: absolute; left: 50%; top: 50%; width: var(--vw, 100%); height: var(--vh, 100%); object-fit: contain; display: block; transform: translate(-50%, calc(-50% + var(--pan, 0px))); transition: transform .2s; }
.stage:fullscreen { height: 100vh !important; }
.stage video.mirror { transform: translate(-50%, calc(-50% + var(--pan, 0px))) scaleX(-1); }
.stage.fit-anim, .stage.fit-anim video { transition: width .3s cubic-bezier(.3, 0, .2, 1), height .3s cubic-bezier(.3, 0, .2, 1), transform .3s cubic-bezier(.3, 0, .2, 1); }
.stage.panning video { transition: none; }
.stage.can-pan video { cursor: ns-resize; touch-action: none; }
.stage.fill.panning, .stage.fill.panning video { cursor: grabbing; }
.stage:fullscreen video { position: static; width: 100%; height: 100%; transform: none; }
.stage:fullscreen video.mirror { transform: scaleX(-1); }
.count {
  will-change: transform; /* eigene Ebene: Zahlwechsel zeichnet das Video nicht neu */
  position: absolute; top: 14px; right: 16px; text-align: right; color: #fff; pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.count b { display: block; font-family: var(--wide); font-stretch: 125%; font-weight: 900; font-size: clamp(54px, 7vw, 104px); line-height: .9; }
.count .eight { display: flex; gap: 4px; justify-content: flex-end; margin-top: 6px; }
.count .eight i { width: 10px; height: 4px; background: rgba(255, 255, 255, .35); display: block; }
.count .eight i.on { background: var(--cc, var(--accent)); }
.count.one b { color: var(--cc, var(--accent)); }
.count b .plus { font-size: .5em; vertical-align: top; margin-left: .04em; }
.count b .plus.off { visibility: hidden; }
.count.size-s b { font-size: clamp(32px, 4vw, 56px); }
.count.size-l b { font-size: clamp(90px, 11vw, 170px); }
.count.size-xl b { font-size: clamp(130px, 18vw, 280px); }
.count.pos-tl { left: 16px; right: auto; text-align: left; }
.count.pos-tl .eight, .count.pos-bl .eight { justify-content: flex-start; }
.count.pos-bl { top: auto; bottom: 34px; left: 16px; right: auto; text-align: left; }
.count.pos-br { top: auto; bottom: 34px; }
.count.pos-c { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); text-align: center; }
.count.pos-c .eight { justify-content: center; }
.stage .status { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: 11px; letter-spacing: .06em; opacity: .85; }
.stage .bigplay { position: absolute; inset: 0; }

.timeline { margin-top: 12px; }
.tl-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; min-height: 26px; }
.tl-row .label { white-space: nowrap; }
.tl-row .time { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.track { position: relative; height: 18px; cursor: pointer; touch-action: none; }
.track::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--track); }
.track .fill { position: absolute; left: 0; top: 8px; height: 2px; background: var(--fg); }
.track .loop { position: absolute; top: 2px; bottom: 2px; background: var(--accent); opacity: .28; }
.track .loop.on { opacity: .55; }
.track .seg { position: absolute; top: 5px; height: 8px; background: var(--fg); opacity: .22; }
.track .ph { position: absolute; top: 1px; width: 2px; height: 16px; background: var(--fg); margin-left: -1px; }
.track .mk { position: absolute; top: 0; width: 3px; height: 18px; margin-left: -1px; }
.track .mk.start, .track .mk.end { background: var(--fg); }
.track .mk.memo { background: var(--c4); }
.track .mk.highlight { background: var(--c1); }
.track .grid1 { position: absolute; top: 12px; width: 1px; height: 6px; background: var(--muted); opacity: .6; }
.song-offset { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.song-offset input { width: 64px; padding: 2px 0; }

.timeline { background: var(--surface); padding: 8px 10px; margin-top: var(--tile-gap) !important; }
.controls { margin-top: var(--tile-gap); }
/* Gruppen als Raster: 1 px Abstand auf Linienfarbe = Trennlinien zwischen allen Zeilen und Spalten */
.controls { display: grid; grid-template-columns: minmax(278px, 3fr) 2.9fr 4.3fr 1.7fr 1.7fr; gap: 1px; background: var(--rule); } /* Spalten nach Knopfzahl und Beschriftungslänge */
.train-main { container-type: inline-size; } /* Leiste richtet sich nach der Breite der Videospalte */
.ctl-group { display: flex; gap: 2px; align-items: center; background: var(--surface); padding: 2px 4px; min-width: 0; }
.ctl-group > .ctl { flex: 1 1 0; min-width: 0; width: auto !important; text-align: center; justify-content: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.ctl-group > .ctl.icon-ctl { display: grid; place-items: center; }
/* Tempo: so breit wie Play, Lautsprecher, Note. Die Wiedergabe-Gruppe ist dafür mindestens 4 × (Stoppuhr + Faktor) breit
   (minmax in .controls), so bleiben die Ränder beim Umschalten auf ≠ 1× stehen */
.ctl-group > .ctl.rate { padding-left: 2px; padding-right: 2px; }
.ctl-group > .ctl.icon-ctl.has-val { grid-auto-flow: column; align-items: center; gap: 6px; }
/* Ziffern optisch auf die Mitte des Zifferblatts (liegt im Icon 1,5 px unter der Icon-Mitte) */
.ctl.rate .ctl-val { transform: translateY(1.5px); }
.ctl-group > .ctl.bpm { flex-grow: 1.6; } /* „95.5 BPM“ braucht mehr Platz als 8er / 1 / Tap */
.ctl-val { display: block; width: calc(5ch + .25em); line-height: 1; text-align: left; font-variant-numeric: tabular-nums; } /* Schrift wie BPM, feste Breite: kein Springen bei 0.90× / 0.95× */
.ctl-group > .ctl[hidden] { display: none; }
/* Zeitangabe: kleine eigene Zeile unter den Zeitleisten */
.tl-time { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding-top: 2px; }
.tl-time .timeview { grid-column: 2; text-align: right; font-size: 11px; color: var(--muted); margin: 0; }
.ctl.fixed { text-align: center; white-space: nowrap; overflow: hidden; }
.track.eights { height: 20px; cursor: pointer; user-select: none; }
.track.eights::before { display: none; }
.track.eights .cell {
  position: absolute; top: 1px; bottom: 1px; border: 1px solid var(--line); border-left-width: 0;
  font-size: 9px; line-height: 16px; text-align: center; color: var(--muted); overflow: hidden;
}
.track.eights .cell:first-child { border-left-width: 1px; }
.track.eights .cell:hover { background: var(--panel); color: var(--fg); }
.track.eights .cell.sel { background: var(--cc, var(--accent)); color: var(--cc-text, #000); border-color: var(--cc, var(--accent)); }
.track.eights .cell.pick { background: var(--fg); color: var(--bg); }
.ctl {
  padding: 6px 9px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent;
  font-variant-numeric: tabular-nums; position: relative;
}
.ctl.on { background: var(--fg); color: var(--bg); }
.ctl.icon-ctl { display: inline-grid; place-items: center; padding-left: 6px; padding-right: 6px; }
.ctl.icon-ctl svg { display: block; }
.panel-btn.on { background: none; color: var(--fg); }
.panel-btn.on:hover { background-color: var(--hover-fill); }
.ctl-sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.timeview { font-variant-numeric: tabular-nums; }

.pop {
  position: absolute; z-index: 30; min-width: 0; width: max-content; max-width: 360px; background: var(--bg); border: 1px solid var(--fg);
  padding: 12px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.pop .prow { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.pop input[type=range] { width: 100%; grid-column: 1 / -1; accent-color: var(--fg); }
.pop .btns { display: flex; flex-wrap: wrap; gap: 4px; }
.pop .note { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.bpm-input { width: 90px !important; text-align: left; }
.pop-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.pop-close { font-size: 18px; line-height: 1; padding: 0 2px; opacity: .7; }
.pop-close:hover { opacity: 1; }
.pop .note { max-width: 300px; }

.side { display: flex; flex-direction: column; gap: var(--tile-gap); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.panel-sec { background: var(--surface); padding: 0 20px 14px; flex: none; }
.panel-sec.collapsed { padding-bottom: 0; }
.panel-sec.collapsed .panel-body { display: none; }
.panel-sec.dragging { outline: 1px dashed var(--fg); opacity: .8; }
.panel-head { position: relative; display: flex; align-items: center; min-height: 36px; }
.panel-head { cursor: grab; touch-action: none; user-select: none; }
.drag-handle { position: absolute; left: -18px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); opacity: 0; transition: opacity .15s; pointer-events: none; }
.drag-handle svg { width: 14px; height: 13px; }
.panel-head:hover .drag-handle, .panel-sec.dragging .drag-handle { opacity: 1; }
.panel-sec.dragging, body.dragging-now, body.dragging-now * { cursor: grabbing !important; }
.panel-toggle { cursor: inherit; }
.panel-toggle { flex: 1; display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 10px 0; }
.panel-toggle .label { color: var(--fg); margin: 0; }
.panel-toggle .chev { font-size: 10px; transition: transform .15s; color: var(--muted); }
.panel-sec.collapsed .chev { transform: rotate(-90deg); }
.side .panel-body .label { display: block; }
.side .panel-body .actions .label { display: inline; }
.song-picked strong { display: block; }
/* Song und Interpret je einzeilig */
.song-picked-text { min-width: 0; }
.song-picked-text strong, .song-picked-text .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.train-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.train-title .inline-edit, .train-title .inline-edit > .editable { display: inline; } /* inline statt inline-block, sonst greift das „…“ nicht */
.train-title.marquee { text-overflow: clip; }
.train-title.marquee > .tt-inner { display: inline-block; animation: tt-run var(--dur, 6s) linear infinite alternate; }
@keyframes tt-run { 0% { transform: none; } 88%, 100% { transform: translateX(var(--shift, 0)); } } /* startet sofort, Pause nur am Ende */
@media (prefers-reduced-motion: reduce) { .train-title.marquee > .tt-inner { animation: none; } .train-title.marquee { text-overflow: ellipsis; } }
@container (max-width: 560px) { .train-title { white-space: normal; overflow: visible; } }
.rating { display: flex; gap: 4px; }
.rating button { flex: 1; padding: 8px 0; border: 1px solid var(--line); font-size: 12px; }
.rating button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.markers { list-style: none; margin: 0; padding: 0; }
.markers li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; min-height: 33px; box-sizing: border-box; /* gleich hoch mit und ohne Icons */ align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.markers .name { display: flex; gap: 6px; align-items: center; text-align: left; min-width: 0; }
.markers .name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markers .name:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.markers .menu { display: flex; gap: 2px; justify-self: end; } /* Icons rechtsbündig in der Zeile des Markers */
/* Icon-Knöpfe in Zeilen (Marker, Classes verwalten) */
.mk-act { display: grid; place-items: center; width: 28px; height: 22px; color: var(--muted); }
.mk-act:hover { color: var(--fg); background: var(--hover-fill); }
.mk-act svg { width: 16px; height: 15px; }
.cm-row .mk-act { color: inherit; opacity: .75; } /* auf der Class-Farbe: Schrift der Zeile */
.cm-row .mk-act:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
.cm-row .cm-actions { display: flex; gap: 2px; justify-content: flex-end; }
.markers .t { font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.markers .kind { font-size: 10px; letter-spacing: .08em; padding: 1px 5px; color: #000; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.markers .name:hover .kind { outline: 1px solid var(--fg); outline-offset: 1px; }
.recs { list-style: none; margin: 0; padding: 0; }
.recs li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.recs li a.cur { font-weight: 600; }
.recs li a.cur::before { content: '▸ '; }
/* zwei Spalten, so breit wie ihr längster Eintrag, nichts bricht um (spaltenweise gefüllt wie vorher) */
.keys { font-size: 11px; color: var(--muted); display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 9), auto); grid-template-columns: max-content max-content; gap: 1px 10px; justify-content: space-between; }
.keys > div { white-space: nowrap; }
.keys kbd { font: inherit; color: var(--fg); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; font-size: 12px; letter-spacing: .05em; z-index: 50; }

/* ── Base: Zeilen mit Scroll ─────────────────── */
.cards.hscroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; align-items: stretch; }
.cards.hscroll > .card { flex: 0 0 210px; scroll-snap-align: start; }
.cards.hscroll .more { flex: 0 0 48px; display: grid; place-items: center; background: var(--surface); font: 600 22px var(--mono); }
.cards.hscroll .more:hover { background: var(--surface-2); }
.songlist.vscroll { overflow-y: auto; }
.song-link { cursor: pointer; }
.songlist li:hover { background: var(--surface); }
.song-picked .song-link:hover, strong.song-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card { background: var(--surface); }
.card > :not(.thumb) { padding-left: 8px; padding-right: 8px; }
.card > :last-child { padding-bottom: 8px; }
.fieldset { background: var(--surface); border-top: 0 !important; padding: 12px 14px 18px; margin-bottom: var(--tile-gap); }
.choreo-block { background: var(--surface); border-top: 0 !important; padding: 14px; margin-bottom: var(--tile-gap); }

/* ── Auswahlfenster / Tooltip ─────────────────── */
.intro-open .modal { z-index: 85; } /* Fenster aus dem Intro (z. B. Installieren) über dem Intro, nicht dahinter */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; }
.modal-card { background: var(--bg); border: 1px solid var(--rule); padding: 22px; max-width: 520px; width: 100%; display: grid; gap: 14px; }
.modal-card h2 { margin: 0; font-size: 22px; }
/* Export/Import-Dialoge */
.share-card .field { display: grid; gap: 6px; }
.share-card .field > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.share-card .seg { justify-self: start; }
.share-card select { width: 100%; }
.share-list { display: grid; gap: 6px; max-height: 40vh; overflow: auto; padding: 8px 10px; background: var(--surface); }
.share-item { display: flex; gap: 10px; align-items: center; font-size: 13px; cursor: pointer; }
.share-item input { margin: 0; accent-color: var(--fg); }
.tooltip { position: fixed; z-index: 70; pointer-events: none; background: var(--fg); color: var(--bg); font-size: 11px; padding: 6px 8px; max-width: 280px; }

/* ── Intro ───────────────────────────────────── */
body.intro-open { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 80; background: var(--bg); color: var(--fg); overflow-y: auto; opacity: 0; transition: opacity .22s ease; display: flex; flex-direction: column; }
.intro-frame { margin: auto 0; width: 100%; padding: clamp(24px, 6vh, 72px) 0; }
.intro.in { opacity: 1; }
.intro.out { opacity: 0; transition-duration: .45s; }
.intro-step { padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 18px; max-width: 980px; margin: 0 auto; }
.intro-step.center { justify-content: center; align-items: center; text-align: center; }
.intro-step h1 { font-size: clamp(30px, 6vw, 72px); margin: 0; }
.intro-mark { font-size: clamp(40px, 12vw, 170px) !important; text-align: left; }
.intro-mark .line { display: block; white-space: nowrap; }
.intro-mark .line span { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px); animation: mark-in .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.intro-mark sup { font-size: .55em; vertical-align: super; line-height: 0; margin-left: .04em; font-weight: 600; opacity: 0; animation: mark-in .6s .8s forwards; }
.intro-step h1 sup { font-size: .55em; vertical-align: super; line-height: 0; font-weight: 600; }
@keyframes mark-in { to { opacity: 1; transform: none; filter: none; } }
.intro-lead { font-size: 16px; margin: 0; }
/* Intro › Präferenzen wie in den Einstellungen: Zeilen, darunter Statistiken mit eigener Überschrift */
.intro-prefs { display: grid; margin-top: 6px; }
.intro-prefs > .p-group { margin: 34px 0 14px; }
.intro-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.intro-field { display: flex; justify-content: center; width: min(560px, 80vw); border-bottom: 2px solid var(--fg); margin-top: 24px; cursor: text; }
.intro-input { font: 800 clamp(22px, 4vw, 44px) var(--wide) !important; font-stretch: 125% !important; text-transform: uppercase; text-align: left; field-sizing: content; width: auto !important; min-width: 1ch; max-width: 100%; border: 0 !important; padding: 7px 0 !important; caret-color: var(--fg); }
.intro-input::placeholder { color: var(--rule); }
/* Sprachwahl unter dem Namen: Weltkugel + Kürzel, Menü darunter mittig */
.intro-lang { position: relative; display: flex; justify-content: center; margin-top: 4px; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--fg); }
.intro-lang .lang-menu { left: 50%; right: auto; top: calc(100% + 6px); transform: translateX(-50%); text-align: left; }
.lang-menu b { display: inline-block; width: 2.4em; font-weight: 600; }
/* Sprache in den Einstellungen: Kacheln wie Musikprovider, Kürzel groß statt Logo */
.lang-tiles .lang-code { font: 800 22px var(--wide); font-stretch: 125%; letter-spacing: .02em; line-height: 26px; }
/* Navigation immer gleich: unten, feste Plätze, schlanke Pfeile ohne Rahmen */
.intro-nav { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; width: min(980px - 2 * var(--gutter), 100% - 2 * var(--gutter)); margin: clamp(20px, 4vh, 40px) auto 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.intro-nav .intro-arrow:first-child { margin-left: -17px; }
.intro-nav .intro-arrow:last-child { margin-right: -17px; }
.intro-nav[hidden] { display: none; }
.intro-arrow { width: 48px; height: 48px; display: grid; place-items: center; opacity: .75; transition: opacity .15s, transform .15s; }
.intro-arrow:hover { opacity: 1; }
.intro-nav .intro-arrow:last-child { justify-self: end; }
.intro-nav .intro-arrow:last-child:hover { transform: translateX(3px); }
.intro-nav .intro-arrow:first-child:hover { transform: translateX(-3px); }
.intro-arrow svg { width: 14px; height: 24px; }
.intro-later { justify-self: center; }
.intro-arrow[hidden], .intro-later[hidden] { display: grid !important; visibility: hidden; }
.intro-classes { margin: 0 !important; }
.intro-classes:empty { display: none; }
.classform { background: var(--surface); padding: 14px; }
.intro-bar { width: min(320px, 70vw); height: 2px; background: var(--rule); overflow: hidden; margin-top: 18px; }
.intro-bar i { display: block; height: 100%; width: 40%; background: var(--fg); animation: bar 1.2s ease-in-out infinite; }
@keyframes bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .intro-mark span, .intro-mark sup, .intro-bar i { animation: none; opacity: 1; transform: none; filter: none; } }

/* ── Profil ──────────────────────────────────── */
.p-head { padding: 24px 0 8px; }
.p-name { font-size: clamp(34px, 7vw, 96px); margin: 6px 0 10px; }
/* volle Breite, damit randlose Flächen (Class-Streifen) beim Scrollen nicht seitlich hervorschauen */
.p-nav { position: sticky; top: 64px; z-index: 10; background: var(--bg); display: flex; gap: 18px; flex-wrap: wrap; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); border-bottom: 1px solid var(--rule); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.p-nav a { opacity: .6; } .p-nav a:hover { opacity: 1; }
.p-sec { scroll-margin-top: 110px; }
.p-sec .section-head { margin-top: clamp(32px, 4vw, 52px); }
.p-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin: 18px 0 10px; }
.p-grid { display: flex; flex-wrap: wrap; gap: var(--tile-gap); margin-top: var(--tile-gap); }
.p-grid > div { flex: 1 1 300px; }
.p-grid > div { background: var(--surface); padding: 4px 14px 14px; min-width: 0; }
.p-big { display: grid; align-content: center; gap: 8px; padding: 18px 14px !important; }
.p-big b { font-size: clamp(48px, 7vw, 88px); line-height: .9; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.bars .hit { fill: transparent; }
.bars .bar { fill: var(--fg); opacity: .55; }
.bars .bar.now { opacity: 1; }
.bars .bar.seg { opacity: .8; }
.bars .bar.seg.now, .bars g:hover .bar.seg { opacity: 1; }
.bars g:hover .bar { opacity: 1; }
.bars .baseline { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xlabels { display: flex; margin-top: 4px; }
.xlabels span { flex: 1; text-align: center; font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.xlabels span.peak { color: var(--fg); }
.chart-note { margin-top: 8px; }
.heat { background: var(--surface); padding: 14px; overflow-x: auto; margin-top: var(--tile-gap); }
.heat-plot { min-height: 120px; }
.heat svg { width: auto; max-width: none; }
.heatmap .axis { font: 11px var(--mono); letter-spacing: .08em; fill: var(--muted); }
.hm, .hm-key { fill: var(--fg); background: var(--fg); }
.hm.l0, .hm-key.l0 { fill: var(--surface-2); background: var(--surface-2); }
.hm.l1, .hm-key.l1 { opacity: .25; } .hm.l2, .hm-key.l2 { opacity: .5; } .hm.l3, .hm-key.l3 { opacity: .75; }
.hm:hover { stroke: var(--fg); stroke-width: 1.5; opacity: 1; }
.heatmap .curweek { fill: none; stroke: var(--cc, var(--accent)); stroke-width: 1.5; }
.legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.hm-key { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr 64px; gap: 12px; align-items: center; font-size: 12px; }
.p-grid > .span-all { flex-basis: 100%; }
.hb-label { display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 8px; background: var(--surface-2); }
.hb-fill { display: block; height: 100%; background: var(--fg); opacity: .7; border-radius: 0 2px 2px 0; }
.hbar:hover .hb-fill { opacity: 1; }
.hb-val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.swatch { display: inline-block; width: 8px; height: 8px; flex: none; margin-right: 6px; }
.p-table { display: grid; gap: 3px; margin-top: var(--tile-gap); }
.p-row { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr; gap: 10px; align-items: center; background: var(--surface); padding: 9px 12px; font-size: 12px; }
.p-table.wide5 .p-row { grid-template-columns: 1.4fr 2fr .8fr .6fr .5fr; }
.p-table.wide6 .p-row { grid-template-columns: 2.4fr 1.2fr .9fr .6fr .8fr .8fr; }
/* Choreo-Liste: Cover und Video klein und quadratisch vor dem Titel */
.sq-cover, .sq-thumb { position: relative; flex: none; width: 34px; height: 34px; display: block; background: var(--surface-2); object-fit: cover; overflow: hidden; margin-right: 8px; }
.sq-thumb + .sq-title { margin-left: 4px; }
.sq-title { overflow: hidden; text-overflow: ellipsis; }
#p-choreos .p-row { padding-top: 6px; padding-bottom: 6px; }
.p-row.head { background: transparent; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
a.p-row:hover { background: var(--surface-2); }
.p-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.spark .spark-line { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.spark .spark-dot { fill: var(--fg); }
.seg { display: inline-flex; gap: 2px; }
.p-add { margin-top: 12px; }
.p-add summary { cursor: pointer; margin-bottom: 10px; list-style: none; }
@media (max-width: 700px) { .p-row, .p-table.wide5 .p-row, .p-table.wide6 .p-row { grid-template-columns: 1.5fr 1fr; } .p-row > :nth-child(n+3) { display: none; } }

/* ── Class-Verwaltung (Intro, Profil) ───────── */
.class-manager { display: grid; gap: 28px; }
.class-manager > .add-row { margin-top: -14px; } /* „Weitere Class“ direkt unter der Liste */
.classform > .actions { margin-top: 16px; }
.cm-list > .cm-row[hidden] { display: none; } /* wird gerade bearbeitet, die Vorschau steht an ihrer Stelle */
.cm-draft .ph { opacity: .5; } /* Platzhalter für noch leere Angaben */
.classform > .cm-draft { margin-bottom: 14px; }
.cm-list { display: grid; gap: 3px; }
.cm-row { display: flex; gap: 0 16px; align-items: center; padding: 10px 14px; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.cm-actions { display: flex; gap: 14px; flex: none; }
.cm-actions .linkbtn { color: inherit; }
.classform > .label:first-of-type { display: block; margin-bottom: 10px; color: var(--fg); }

/* ── Base: Kacheln als Link ins Profil ──────── */
a.stat-link { transition: background .15s; }
a.stat-link:hover { background: var(--surface-2); }

/* ── Profil: Legende, Galerie-Abstand, Konto ── */
.legend { gap: 8px; }
.hm-keys { display: inline-flex; gap: 3px; }
.legend-sep { margin-left: 16px; }
#p-choreos > .actions { margin-bottom: 14px; }
#p-choreos .p-table { margin-top: 0; }
.p-text { text-transform: none; letter-spacing: 0; font-size: 12px; margin: 0 0 12px; }

/* ── Auswahlliste mit „+ Neu …“ ── */
.pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pick select, .pick input { flex: 1; min-width: 0; width: 100%; }
.caps { text-transform: uppercase; }

.optgroup { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.opt { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font: inherit; font-size: 13px; color: var(--muted); }
.opt:hover { color: var(--fg); }
.opt .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.opt.on { color: var(--fg); font-weight: 600; }
.opt.on .dot { background: var(--fg); border-color: var(--fg); }
/* Logos der Musikprovider */
.brand { display: inline-flex; flex: none; }
.brand svg { display: block; }
.opt .brand { opacity: .55; }
.opt.on .brand, .opt:hover .brand { opacity: 1; }
.provider-btn { display: inline-flex; align-items: center; gap: 8px; }
/* Song in Schritten: Song → Startpunkt → Songdatei */
.song-steps { display: grid; gap: 0; }
.song-step + .song-step, .song-steps + .song-step { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.song-step .actions { margin-top: 8px; }
.song-step .step-label { display: block; margin-bottom: 2px; }
.song-status:empty { display: none; }
.song-status { margin-top: 6px; }
.song-step .offset-in { width: 90px; display: block; }
/* Song-Panel: in jedem Schritt der Knopf unter dem Inhalt, alle gleich breit */
.side .song-step .btn { width: 100%; justify-content: center; text-align: center; }
.side .song-step .btn + .label { margin-top: 6px; }

/* Profil: Filter, Sortierung, Erklärtexte */
.p-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.p-filter .swatch { width: 9px; height: 9px; margin: 0; border-radius: 50%; }
.p-row.head .sort { display: inline-flex; gap: 4px; align-items: center; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; }
.p-row.head .sort:hover, .p-row.head .sort.on { color: var(--fg); }
.sort-dir { font-style: normal; min-width: 1ch; }
.p-tools { margin-bottom: 12px; }
.inline-sort { display: inline-flex; align-items: center; gap: 8px; }
.inline-sort[hidden] { display: none; }
.inline-select { width: auto; padding: 4px 0; font-size: 12px; }
.intro-frame:has(.intro-step.center) .intro-nav { width: min(560px, 80vw); border-top: 0; }

/* ── Präferenzen: Titel über der Auswahl, Breite begrenzt ── */
.prefs { display: grid; margin-top: 8px; }
.pref-block .p-sub { margin: 0 0 12px; }
/* Einzelauswahl einzeilig: Titel links, gewählte Option rechts; schmal untereinander */
.prefs { gap: 22px; }
.pref-row { display: grid; grid-template-columns: minmax(170px, 280px) minmax(0, 380px); gap: 8px 28px; align-items: center; }
.pref-row .p-sub { margin: 0; }
.pref-row .pref-hint { margin: 4px 0 0; }
@media (max-width: 600px) { .pref-row { grid-template-columns: minmax(0, 1fr); } }
/* Auswahl-Zeile (choiceRow in ui.js): nur die gewählte Option, Klick klappt die Liste auf (wie das Ansicht-Menü) */
.choice { position: relative; min-width: 0; }
.choice-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px; background: var(--surface); font-size: 12px; letter-spacing: .04em; text-align: left; color: var(--fg); transition: background .15s; }
.choice-btn:hover, .choice.open .choice-btn { background: var(--surface-2); }
.choice-btn.empty .choice-label, .choice-btn.empty .choice-ico { color: var(--muted); }
.choice-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-ico { display: grid; place-items: center; flex: none; width: 22px; }
.choice-ico svg { display: block; }
.choice-code { font: 800 12px var(--wide); font-stretch: 125%; letter-spacing: .02em; }
/* Alle Symbole (Logos, Lautsprecher, Ansicht, Sprachkürzel, Klemmbrett) in einem gleich breiten Feld, darin mittig:
   Symbole stehen übereinander zentriert, die Texte im Feld, in der Liste und über alle Zeilen hinweg bündig */
.choice-ico, .acc-card .choice-btn .choice-ico { width: 24px; place-items: center; }
.choice-chev { display: grid; place-items: center; flex: none; color: var(--muted); transition: transform .15s; }
.choice.open .choice-chev { transform: rotate(180deg); }
.choice-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; display: grid; padding: 4px; max-height: min(320px, 60vh); overflow-y: auto; background: var(--bg); border: 1px solid var(--fg); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.choice-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 8px; font-size: 12px; letter-spacing: .04em; text-align: left; color: var(--muted); }
.choice-menu button:hover { color: var(--fg); background: var(--surface); }
.choice-menu button.on { color: var(--bg); background: var(--fg); }
.acc-card > .choice { grid-area: btn; }
/* in den Konto-Kacheln (grauer Grund) wie die Knöpfe daneben: Kontur, Großbuchstaben, gleiche Höhe */
.acc-card .choice-btn { min-height: 0; padding: 5px 9px; background: transparent; border: 1px solid var(--fg); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.acc-card .choice-btn:hover, .acc-card .choice.open .choice-btn { background: var(--hover-fill); }
.acc-card .choice-label { text-align: center; }
.acc-card .choice-ico + .choice-label { text-align: left; } /* mit Symbol linksbündig daneben */
.acc-card .choice-btn { gap: 10px; } /* gleicher Abstand Symbol–Text wie in der aufgeklappten Liste */
/* so hoch wie die Knöpfe daneben (Symbol 16 px statt 18, Sprachkürzel ist niedriger) */
.acc-card .choice-btn { min-height: 28px; }
.acc-card .choice-btn .choice-ico svg { width: 16px; height: 16px; }
.acc-card .choice-menu button { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; padding-left: 5px; } /* Text genau unter dem im Feld (Rand 1 + 4 + 5 = 1 + 9) */
/* Kacheln füllen jede Zeile (auch eine übrige letzte Kachel nimmt die volle Breite) */
.provider-tiles { display: flex; flex-wrap: wrap; gap: var(--tile-gap); }
.provider-tiles > button { flex: 1 1 118px; }
.provider-tiles button { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 92px; padding: 14px 8px; background: var(--surface); font-size: 12px; color: var(--muted); transition: background .15s, color .15s; }
.provider-tiles button:hover { color: var(--fg); background: var(--surface-2); }
.provider-tiles button.on { background: var(--fg); color: var(--bg); }
.provider-tiles .brand { opacity: 1; }

/* ── Daten/Konto: jeder Eintrag eine eigene Zeile. Spalten Überschrift · Satz · Knopf an festen Positionen ── */
.acc { display: grid; gap: var(--tile-gap); }
.acc-card { display: grid; grid-template-columns: var(--acc-title, 180px) minmax(0, 1fr) 180px; grid-template-areas: 'title text btn'; align-items: center; gap: 8px 24px; background: var(--surface); padding: 14px 16px; }
.acc-title { grid-area: title; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.acc-title.measure, .acc-card > .btn.measure, .acc-card .choice-btn.measure { white-space: nowrap; width: max-content; } /* kurz zum Messen der natürlichen Breite */
/* Ganz schmal: Knopfspalte so breit wie der längste Wort-Knopf (fitAccTitles), Auswahlfelder mit Symbol zeigen nur das Symbol */
@media (max-width: 440px) {
  .acc-card { grid-template-columns: minmax(0, 1fr) var(--acc-btn, 168px) !important; }
  .acc-card .choice-btn:has(.choice-ico) .choice-label { display: none; }
  /* nur Symbol: Feld so schmal wie Symbol + Pfeil, rechtsbündig mit den Knöpfen darunter; Liste nach links, breit genug für die Namen */
  .acc-card > .choice:has(.choice-ico) { justify-self: end; }
  .acc-card:has(> .choice .choice-ico) { grid-template-columns: minmax(0, 1fr) auto !important; } /* Satz bekommt den frei gewordenen Platz */
  .acc-card .choice-btn:has(.choice-ico) { width: auto; gap: 10px; padding-left: 12px; padding-right: 10px; }
  .acc-card .choice-btn:has(.choice-ico) .choice-ico { place-items: center; } /* nur Symbol: mittig im festen Feld, alle Felder gleich breit */
  .acc-card > .choice:has(.choice-ico) .choice-menu { left: auto; right: 0; min-width: 190px; }
}
.acc-card .acc-text { grid-area: text; }
/* alle Knöpfe gleich breit (ganze Knopfspalte), Schalter am Spaltenanfang */
.acc-card > .btn { grid-area: btn; width: 100%; justify-content: center; text-align: center; }
.acc-card > .toggle { grid-area: btn; justify-self: start; }
.acc-text input[type=text] { width: 100%; }
.acc-text input[type=text] { max-width: 360px; }
@media (max-width: 600px) {
  /* Handy: Überschrift und Satz links untereinander, Knopf rechts */
  .acc-card { grid-template-columns: minmax(0, 1fr) 168px; grid-template-areas: 'title btn' 'text btn'; gap: 4px 12px; }
  .acc-card > .toggle { justify-self: end; }
}
.acc-text p { margin: 0; }
/* Konto-Erklärungen: normale Groß-/Kleinschreibung, kurze Liste zum schnellen Erfassen */
.acc-lead, .acc-note, .acc-list { font-size: 12px; line-height: 1.55; }
.acc-lead { color: var(--fg); }
.acc-list { margin: 4px 0 8px; padding: 0; list-style: none; color: var(--fg); }
.acc-list li::before { content: '–'; color: var(--muted); margin-right: 8px; }
.acc-note { color: var(--muted); }
.acc-text .field input { max-width: none; }

/* Statistik-Auswahl: Kacheln wie in der Base, oben gezeigt, unten weitere */
.stat-picker { display: grid; gap: 8px; }
.stat-picker .zone-label { margin-top: 6px; }
.stat-zone { margin-top: 0; min-height: 76px; position: relative; }
.zone-in { outline: 1px dashed var(--rule); outline-offset: 4px; }
.zone-out .pick-tile { background: transparent; border: 1px solid var(--rule); color: var(--muted); }
.zone-out .pick-tile b { color: var(--muted); }
.pick-tile { cursor: grab; user-select: none; touch-action: none; transition: background .15s; }
.pick-tile:hover { background: var(--surface-2); }
.pick-tile.pick-hole { opacity: .25; }
.pick-ghost { position: fixed; z-index: 100; pointer-events: none; margin: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); background: var(--surface) !important; cursor: grabbing; }
.zone-empty { display: none; margin: 0; flex: 1 1 100%; align-self: center; padding: 22px 0; text-align: center; font-size: 12px; color: var(--muted); }
.stat-zone:not(:has(.pick-tile)) .zone-empty { display: block; }

/* Heatmap: Navigation, kommende Tage */
.heat-nav { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; }
.heat-nav .ctl:disabled { opacity: .35; cursor: default; }
.heat-range { margin-left: auto; }
.hm.future { fill: var(--surface-2); opacity: .45; }

/* Wortmarke im Ladebildschirm: gleicher Aufbau wie die Animation, kleiner, ohne Einblenden */
.intro-mark.static { font-size: clamp(30px, 6vw, 72px) !important; }
.intro-mark.static .line span, .intro-mark.static sup { animation: none; opacity: 1; transform: none; filter: none; }

/* Profil als Reiter */
.p-nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.p-nav a.on { opacity: 1; border-bottom-color: var(--fg); }
.p-tab { padding-top: clamp(20px, 3vw, 32px); }
.p-tab > .p-sec + .p-sec { margin-top: clamp(32px, 4vw, 52px); }
.p-group { font-family: var(--wide); font-stretch: 125%; font-weight: 800; font-size: clamp(16px, 1.6vw, 20px); text-transform: uppercase; margin: 0 0 14px; }
.p-tab .stats { margin-top: 0; }
.p-settings { padding-top: 8px; }

/* Cover spielt gerade die Hörprobe */
/* Hörprobe: Rahmen innen auf dem Cover als Negativ des Bildes (Differenz), sichtbar auf hellen und dunklen Covern */
.toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; margin: 0; color: var(--fg); font: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.toggle-track { position: relative; flex: none; width: 38px; height: 20px; border: 1px solid var(--fg); box-sizing: border-box; transition: background .15s; }
.toggle-track i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--fg); transition: transform .15s, background .15s; }
.toggle[aria-checked="true"] .toggle-track { background: var(--fg); }
.toggle[aria-checked="true"] .toggle-track i { transform: translateX(18px); background: var(--bg); }
.toggle:focus-visible { outline: 1px dotted var(--fg); outline-offset: 3px; }
/* „Neue Choreo/Class“ + kleines „importieren“ */
.add-row { align-items: baseline; margin-top: 18px; }
.small-link { font-size: 11px; }
.dropzone .dz-import { margin-top: 10px; position: relative; z-index: 1; }
.class-card { max-width: 760px; }
.pop .toggle, .share-card .toggle, .confirm-card .toggle { justify-self: start; }
.acc-text .toggle { display: flex; margin-top: 10px; }
/* Anleitung in Schritten (Installieren) */
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.guide li { display: grid; grid-template-columns: 18px 52px 1fr; align-items: center; gap: 12px; }
.guide-num { font-size: 11px; color: var(--muted); }
.guide-ico { display: grid; place-items: center; width: 52px; height: 52px; background: var(--surface); }
.guide-text { font-size: 13px; }
.guide-note { margin: 0; padding: 10px 12px; border-left: 2px solid var(--fg); font-size: 12px; color: var(--muted); }
.pref-onoff { display: flex; }
.pref-onoff .btn { min-width: 128px; justify-content: center; }
.confirm-card p, .provider-card p { margin: 0; font-size: 13px; line-height: 1.55; }
.provider-card .provider-tiles > button { flex-basis: 30%; min-height: 80px; } /* 3 je Zeile, am Handy 2 */
@media (max-width: 600px) { .provider-card .provider-tiles > button { flex-basis: 40%; } }
.app-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: var(--tile-gap); padding: 12px 16px; background: var(--surface); font-size: 12px; }
.app-hint-actions { display: flex; align-items: baseline; gap: 14px; }
.section-tools { display: flex; gap: 14px; align-items: baseline; } /* Überschrift rechts: Knopf + Hinweis */
.pack-info { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 6px; } /* Upload: Verkleinern */
.cover-wrap { position: relative; display: block; flex: none; width: fit-content; height: fit-content; align-self: start; justify-self: start; line-height: 0; }
.cover-wrap::after { content: ''; position: absolute; inset: 0; border: 3px solid #fff; mix-blend-mode: difference; opacity: 0; pointer-events: none; transition: opacity .15s; }
.cover-wrap.previewing::after { opacity: 1; animation: preview-pulse 1.2s ease-in-out infinite; }
.cover-wrap.preview-wait::after { opacity: .45; animation: preview-pulse 1.2s ease-in-out infinite; } /* Hörprobe lädt */
@keyframes preview-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cover-wrap.previewing::after, .cover-wrap.preview-wait::after { animation: none; } }

/* Choreo-Kachel: Cover klein auf dem Video, Textzeilen einzeilig (gleich hohe, ruhige Kacheln) */
.card .thumb .cover-wrap { position: absolute; left: 8px; bottom: 14px; z-index: 2; }
.card-cover { width: 42px; height: 42px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.card h3, .card > .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* feste Zeilen: jede Info hat ihre Höhe, auch wenn sie fehlt */
.card h3 { height: 1.3em; line-height: 1.3; }
/* Passt eine Angabe nicht in eine Zeile (z. B. längere Sprache), brechen alle Kacheln der Reihe auf zwei Zeilen um,
   gleich hoch, damit gleiche Angaben auf derselben Höhe stehen (fitCardLabels in hub.js) */
.cards.wrap2 .card > .label { white-space: normal; text-overflow: clip; line-height: 1.35; min-height: 2.7em; }
.card > .label { height: 1.6em; line-height: 1.6; margin-top: 0; }

/* Ansicht-Menü in der Kopfleiste */
.topbar nav { position: relative; }
.theme-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: grid; min-width: 170px; background: var(--bg); border: 1px solid var(--fg); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); padding: 4px; }
.theme-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12px; letter-spacing: .04em; text-align: left; color: var(--muted); }
.theme-menu button:hover { color: var(--fg); background: var(--surface); }
.theme-menu button.on { color: var(--bg); background: var(--fg); }
.theme-menu i { display: grid; place-items: center; }

/* Tester*in: Knopf unten rechts, Bug/Idee schieben sich darüber heraus */
.tester-fab { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 48px; height: 48px; }
body.intro-open .tester-fab { display: none; }
.fab-main, .fab-action { position: absolute; left: 0; bottom: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--fg); color: var(--bg); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .18s, background-color .15s; }
.fab-main { z-index: 2; }
.fab-main:hover, .fab-action:hover { background-color: color-mix(in srgb, var(--fg) 78%, var(--bg)); }
.fab-action { opacity: 0; pointer-events: none; transform: translateY(0) scale(.6); }
.tester-fab.open .fab-action { opacity: 1; pointer-events: auto; transform: translateY(calc(var(--i) * -58px)) scale(1); }
.tester-fab.open .fab-main { transform: rotate(-8deg); }
.fab-main svg, .fab-action svg { display: block; }
.acc-tester { margin-top: 14px; }
.pref-hint { margin: -6px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* Abstand rechts gehört an die Hülle, sonst reicht der Hörprobe-Rahmen über das Cover hinaus */
.cover-wrap:has(> .sq-cover) { margin-right: 8px; }
.cover-wrap > .sq-cover { margin-right: 0; }
/* Marker beim Umbenennen neutral (Hintergrund/Vordergrund), Textauswahl invertiert ist so auf jeder Farbe sichtbar */
.markers .kind.editing { background: var(--bg) !important; color: var(--fg) !important; outline: 1px solid var(--fg); }

/* ── Tutorial: Rest abgedunkelt, markierte Stelle frei, Textkarte daneben ── */
.tour { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.tour-spot { position: fixed; border-radius: 4px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .58); outline: 2px solid #fff; outline-offset: 0; transition: left .25s, top .25s, width .25s, height .25s; }
.tour-card { position: fixed; pointer-events: auto; width: min(340px, calc(100vw - 24px)); background: var(--bg); color: var(--fg); border: 1px solid var(--fg); padding: 14px 16px; display: grid; gap: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s, left .25s, top .25s; }
.tour-card.in { opacity: 1; transform: none; }
.tour-top { display: flex; justify-content: space-between; align-items: center; }
.tour-title { margin: 2px 0 0; }
.tour-text { margin: 0; font-size: 13px; line-height: 1.5; }
/* Stichwort links (Mono-Label), Erklärung rechts */
.tour-list { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; margin: 2px 0 0; }
.tour-list dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tour-list dd { margin: 0; }
.tour-list { align-items: baseline; } /* Wort-Stichwort auf Höhe der ersten Zeile */
.tour-list dt:has(.tour-ico, .tour-chip) { align-self: center; }
.tour-ico, .tour-chip { display: inline-grid; place-items: center; box-sizing: border-box; width: 48px; height: 26px; border: 1px solid var(--rule); color: var(--fg); background: var(--surface); } /* alle gleich breit */
.tour-chip { font-size: 10.5px; letter-spacing: .04em; white-space: nowrap; }
.tour-kbd { white-space: nowrap; }
.tour-ico svg { display: block; }
.tour-list .tour-note { grid-column: 1 / -1; color: var(--muted); }
.tour-list .tour-say { grid-column: 1 / -1; }
.tour-list:has(.tour-say + .tour-say) .tour-say { position: relative; padding-left: 14px; } /* mehrere Sätze: Aufzählung mit „>“ */
.tour-list:has(.tour-say + .tour-say) .tour-say::before { content: '>'; position: absolute; left: 0; color: var(--muted); }
.tour-hint { margin: 4px 0 0; }
body.touring .tester-fab { display: none; }
.tour-done { z-index: 95; }
.tour-done .modal-card p { margin: 0; font-size: 13px; line-height: 1.55; }
.tour-done .modal-card > .tour-ico { justify-self: start; } /* Symbol des Teils über dem Titel */

/* ── Handy (schmale Bildschirme) ── */
html, body { overflow-x: clip; } /* nichts darf seitlich herausragen und die Seite verschiebbar machen */
@media (max-width: 600px) {
  .topbar { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .wordmark { font-size: 12px; white-space: nowrap; }
  .brand { gap: 8px; min-width: 0; }
  .topbar nav { gap: 12px; font-size: 11px; }
  .topbar nav .icon-link { margin-right: -6px; }
  .tester-fab { right: 12px; bottom: 12px; }
  /* Class-Zeilen: oben Titel und Icons (Bearbeiten/Löschen), darunter Tag · Uhrzeit · Coach */
  .cm-list { grid-template-columns: minmax(0, 1fr); }
  .cm-list > .cm-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; padding-right: 8px; }
  .cm-list > .cm-row .cc-title { flex: 1 1 calc(100% - 70px); min-width: 0; line-height: 22px; } /* Zeilenhöhe wie die Icons */
  .cm-list > .cm-row.cm-draft .cc-title { flex-basis: 100%; } /* Vorschau ohne Icons: Angaben trotzdem darunter */
  .cm-list > .cm-row .cm-actions { order: 1; }
  .cm-list > .cm-row .cc-meta { order: 2; font-size: 12px; }
  .cm-list > .cm-row .cc-meta:nth-child(2)::before, .cm-list > .cm-row .cc-meta:empty + .cc-meta::before { content: none; }
  .cm-list > .cm-row .cc-gap { display: none; }
  .cm-list > .cm-row .cc-meta:not(:empty) ~ .cc-meta:not(:empty)::before { content: '·'; }
  .cm-row { flex-wrap: wrap; }
  /* Kacheln füllen die Breite: eine allein über die volle Breite, mehrere je 75 % (Rest lädt zum Wischen ein) */
  .cards.hscroll > .card { flex: 1 0 75%; }
  .cards:not(.hscroll) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  /* Class-Streifen mit mehreren Angaben rechts (Profil): Titel, darunter Tag · Uhrzeit · Coach, darunter die Werte */
  .p-tab .stripes { grid-template-columns: minmax(0, 1fr); }
  .p-tab .stripes > .stripe { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; white-space: normal; }
  .p-tab .stripes > .stripe .cc-title { flex: 1 1 100%; }
  .p-tab .stripes > .stripe .cc-meta, .p-tab .stripes > .stripe .cc-right { font-size: 12px; white-space: nowrap; }
  .p-tab .stripes > .stripe .cc-gap { flex-basis: 100%; height: 0; } /* Zeilenumbruch vor den Werten */
  .p-tab .stripes > .stripe .cc-meta:nth-child(2)::before { content: none; }
  .p-tab .stripes > .stripe .cc-meta:not(:empty) ~ .cc-meta:not(:empty)::before { content: '·'; }
  .p-tab .stripes > .stripe .cc-meta:empty { display: none; }
}

/* Touch: Ziehen erst nach Halten, bis dahin scrollt Wischen wie gewohnt */
.touch .pick-tile, .touch .panel-head { touch-action: pan-y; }
body.touch-drag, body.touch-drag * { user-select: none; -webkit-user-select: none; }
/* kein Kontextmenü/Lupe beim Halten von Cover und Video */
.cover-wrap img, a.card, a.mini, .card .thumb, .mini-thumb, .stripe { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.card .thumb img, .card .thumb canvas, .mini-thumb img, .mini-thumb canvas { -webkit-user-drag: none; } /* Halten hebt kein Bild zum Ziehen heraus */
/* Doppeltippen zoomt nicht (verschiebt sonst die Ansicht), Eingabefelder ab 16 px: Safari zoomt sonst beim Antippen */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
.touch input:not(.intro-input), .touch select, .touch textarea { font-size: 16px !important; }
/* Intro: seitlich nicht verschiebbar (die Pfeile ragen bewusst in den Rand) */
.intro { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
@media (max-width: 600px) { .intro-nav .intro-arrow:first-child { margin-left: -12px; } .intro-nav .intro-arrow:last-child { margin-right: -12px; } }

/* Knöpfe nur für Touch („1“, „Tap“ in der Leiste) */
.touch-only { display: none; }
.touch .touch-only { display: inline-block; }

/* Menüs (Tempo, BPM, Lautstärke …): feste Breite, Knöpfe einer Zeile gleich breit */
.pop { width: 300px; max-width: calc(100vw - 32px); }
.pop .btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.pop .btns.btns-col { grid-auto-flow: row; grid-template-columns: 1fr; } /* Marker: untereinander */
.pop .btns .btn { justify-content: center; text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; }

@media (max-width: 600px) {
  /* Bedienleiste: Knöpfe füllen jede Zeile, sauber untereinander; Zeitangabe eigene Zeile */
  .controls .pop { left: 0 !important; right: 0; margin: 0 auto; }
}
/* sehr schmale Handys: „BASE“ ausblenden, die Wortmarke führt ohnehin zur Base */
@media (max-width: 400px) { .topbar nav a[data-nav="hub"] { display: none; } }
@media (max-width: 340px) { .wordmark { font-size: 11px; } .topbar nav { gap: 10px; } }
/* Fallback für ältere iOS-Versionen ohne overflow: clip */
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }


/* Leiste nach verfügbarer Breite (Container-Abfrage): eine Zeile → 2 Spalten → Gruppen untereinander */
/* möglichst wenige Zeilen: ab 900 px eine Zeile, darunter zwei (Wiedergabe+Loop / Count+Bild), auf dem Handy drei */
/* schmaler als 860 px: 12er-Raster. Zwei Zeilen: Wiedergabe + Loop | Count + Bild + Ansicht. Drei Zeilen: Count allein in der Mitte */
@container (max-width: 860px) {
  .controls { grid-template-columns: repeat(12, 1fr); }
  .controls > .ctl-group:nth-child(1) { grid-column: span 8; } /* Wiedergabe braucht Platz für den Tempo-Faktor */
  .controls > .ctl-group:nth-child(2) { grid-column: span 4; }
  .controls > .ctl-group:nth-child(3) { grid-column: span 6; }
  .controls > .ctl-group:nth-child(n+4) { grid-column: span 3; }
}
@container (max-width: 460px) {
  .controls > .ctl-group:nth-child(1) { grid-column: 1 / -1; }
  .controls > .ctl-group:nth-child(2) { grid-column: span 5; }
  .controls > .ctl-group:nth-child(3) { grid-column: span 7; }
  .controls > .ctl-group:nth-child(n+4) { grid-column: span 6; }
}

.controls > .ctl-group { min-height: 34px; } /* niedrig halten: mehr Höhe fürs Video */
.ctl-group > .ctl { padding: 5px 2px; letter-spacing: .04em; }
@media (max-width: 600px) { .ctl-group > .ctl { font-size: 9.5px; letter-spacing: .04em; padding: 4px 1px; } .ctl-group { padding: 2px; } }