/* Jukebox-Unterseite: Bühne mit 3D-Szene, Anzeige und Wähltastatur */
.page--jukebox { background: #0a0708; }
.j3d { position: relative; margin-top: 4.5rem; background: #0a0708; overflow: hidden; }
.j3d__canvas { display: block; width: 100%; height: min(76svh, 46rem); touch-action: pan-y; }
.j3d.no-3d .j3d__canvas { display: none; }
.j3d__hud { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1rem 2rem; padding: 1rem; background: #140b0d; }
.j3d__now { width: min(100%, 20rem); padding: .9rem 1rem 1rem; background: var(--accent); color: var(--accent-ink); border-radius: .5rem; }
.j3d__now strong { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem); line-height: .95; }
.j3d__now .small, .j3d__now p { margin: .35rem 0 0; color: var(--accent-ink); opacity: .85; }
.j3d__now .jukebox__meter { background: rgb(20 15 8 / .25); margin-top: .75rem; }
.j3d__now .jukebox__meter span { background: var(--accent-ink); }
.j3d__pad { padding: clamp(.8rem, 1.6vw, 1.2rem); background: linear-gradient(180deg, #e9ecee 0%, #aab1b6 48%, #d3d8db 52%, #8f979c 100%); border-radius: .9rem; }
.j3d__pad .keypad { margin: 0; }
@media (min-width: 70em) {
  .j3d { height: calc(100svh - 4.5rem); min-height: 36rem; }
  .j3d__canvas { position: absolute; inset: 0; height: 100%; }
  .j3d__hud { position: absolute; inset: auto 0 0 0; justify-content: space-between; background: none; padding: clamp(.75rem, 2vw, 1.75rem); pointer-events: none; }
  .j3d__hud > * { pointer-events: auto; }
  .j3d.no-3d .j3d__hud { position: static; justify-content: center; background: #140b0d; }
  .j3d.no-3d { height: auto; }
}

.j3d-list { background: #0a0708; padding-block: clamp(4rem, 8vw, 7rem); }
.j3d-list h2 { color: var(--accent); font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); line-height: .95; margin: 0; }
.j3d-list .lead { color: #d8c8ac; margin: 1rem 0 2rem; max-width: 40rem; }
.j3d-list .strips { counter-reset: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); column-gap: .6rem; row-gap: .5rem; }
.j3d-list .strip { background: #efe4c9; color: #241810; border-radius: .4rem; overflow: hidden; }
.j3d-list .strip__icon { background: #5a1722; color: #efe4c9; }
.j3d-list .strip__title { overflow-wrap: anywhere; }
.j3d-list .strip__title::before { content: attr(data-code); display: inline-block; min-width: 1.5em; margin-right: .5em; padding: .12em .25em .05em; text-align: center; background: #5a1722; color: var(--accent); font-size: .62em; border-radius: .2em; vertical-align: .12em; }
.j3d-list .strip__title:not([data-code])::before { display: none; }
.j3d-list .strip--new { grid-column: 1 / -1; }
.j3d-list .strip--new .strip__title { color: #7a1626; }
.j3d-list .strip:hover, .j3d-list .strip.is-playing { color: var(--accent-ink); }
.j3d-list .strip:hover .strip__icon, .j3d-list .strip.is-playing .strip__icon { background: var(--accent-ink); color: var(--accent); }
.j3d-list__foot { margin-top: 2.5rem; }
.j3d-list__foot .btn { background: #efe4c9; color: #241810; }
.j3d__pad .keypad__row--nums { max-width: 14.5rem; }
@media (min-width: 70em) { .j3d__pad .keypad { grid-template-columns: auto auto; } }
.j3d-list .strips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.j3d-list .strip__title { overflow-wrap: break-word; }

@media (max-width: 40em) {  }