/* =====================================================================
   studio-rekordbox.css — Browser-Studio im Rekordbox-Look (05.10.2026, nach Erics Screenshot)
   Gilt nur mit .rs-pult.rb (gesetzt von js/studio-layout.js). Neutral dunkelgrau, Deck 1 blau, Deck 2 orange,
   CUE orange, PLAY grün, kleine Sans-Schrift, kompakte Flächen. Lädt NACH studio.css.
   ===================================================================== */
.rs.rs-pult.rb {
  --pult-bg: #111111; --pult-flaeche: #1b1b1b; --pult-lcd: #090909; --pult-kante: #2b2b2b;
  --deck-a: #3d8bff; --deck-b: #ff8c1a; --rb-text: #cfcfcf; --rb-leise: #8a8a8a; --rb-knopf: #262626; --rb-blau: #2f7df6; --rb-gruen: #39c66b; --rb-orange: #f5a623;
  gap: 6px; color: var(--rb-text); font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.rs.rs-pult.rb #rs-deck-1, .rs.rs-pult.rb #strip-ch1 { --deck-accent: var(--deck-a); }
.rs.rs-pult.rb #rs-deck-2, .rs.rs-pult.rb #strip-ch2 { --deck-accent: var(--deck-b); }
.rs.rs-pult.rb .st-lab { font: 600 9.5px/1.2 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; color: var(--rb-leise); }

/* ---------- Kopfleiste (Live / Uhr / Status) + Werkzeuge ---------- */
.rs.rs-pult.rb .rs-topbar { padding: 6px 8px; gap: 8px; background: #161616; border: 1px solid var(--pult-kante); border-radius: 3px; }
.rs.rs-pult.rb .rs-live-btn { min-height: 34px; padding: 0 14px 0 12px; font: 800 12px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; border-radius: 3px; }
.rs.rs-pult.rb .rs-timer { padding: 6px 10px; font-size: 17px; border-radius: 3px; }
.rs.rs-pult.rb .rs-banner-inline { min-height: 34px; padding: 6px 10px; border-radius: 3px; font-size: 10px; }
.rs.rs-pult.rb .rs-quant { width: 34px; height: 34px; border-radius: 3px; font-size: 13px; }
.rs.rs-pult.rb .rs-quant[aria-pressed="true"] { background: var(--rb-blau); border-color: var(--rb-blau); box-shadow: none; }
.rs.rs-pult.rb .rs-werkzeuge { gap: 4px; }
.rs.rs-pult.rb .rs-wz { height: 26px; padding: 0 10px; border-radius: 3px; background: var(--rb-knopf); border-color: #333; font: 600 10px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; }
.rs.rs-pult.rb .rs-status { font-size: 11px; }

/* ---------- FX-Leiste oben: FX1 | FX2 ---------- */
.rs.rs-pult.rb .rb-fxleiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rs.rs-pult.rb .rb-fxleiste:empty { display: none; }
.rs.rs-pult.rb .rb-fxleiste .rs-fx { margin: 0; padding: 5px 8px; grid-template-columns: 30px auto auto minmax(0, 1fr) auto auto; grid-template-areas: "lab arten beats . wet an";
  gap: 8px; background: #161616; border: 1px solid var(--pult-kante); border-radius: 3px; }
.rs.rs-pult.rb .rb-fxleiste .rs-fx .st-lab { align-self: center; font-size: 11px; font-weight: 800; color: var(--rb-text); }
.rs.rs-pult.rb .rb-fxleiste .rs-fx[data-deck="1"] .st-lab { color: var(--deck-a); }
.rs.rs-pult.rb .rb-fxleiste .rs-fx[data-deck="2"] .st-lab { color: var(--deck-b); }
.rs.rs-pult.rb .rs-fx__arten button, .rs.rs-pult.rb .rs-fx__beats button { height: 22px; min-width: 30px; padding: 0 7px; border-radius: 2px; background: var(--rb-knopf); border-color: #333;
  font: 600 10px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; color: var(--rb-text); }
.rs.rs-pult.rb .rs-fx__arten button[aria-pressed="true"], .rs.rs-pult.rb .rs-fx__beats button[aria-pressed="true"] { background: var(--rb-blau); border-color: var(--rb-blau); color: #fff; }
.rs.rs-pult.rb .rs-fx__wet .rs-dreh { grid-template-columns: auto auto; align-items: center; gap: 5px; }
.rs.rs-pult.rb .rs-fx__wet .rs-dreh svg { width: 24px; height: 24px; }
.rs.rs-pult.rb .rs-fx__an { width: auto; height: 24px; padding: 0 10px; border-radius: 2px; border: 1px solid #333; background: var(--rb-knopf); color: var(--rb-text); font: 700 10px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; box-shadow: none; }
.rs.rs-pult.rb .rs-fx.an .rs-fx__an { background: var(--rb-blau); border-color: var(--rb-blau); color: #fff; box-shadow: 0 0 10px rgba(47,125,246,.5); }
@media (max-width: 1100px) { .rs.rs-pult.rb .rb-fxleiste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .rs.rs-pult.rb .rb-fxleiste .rs-fx { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "lab arten an" "lab beats wet"; } }

/* ---------- Zoom-Wellen über die volle Breite ---------- */
.rs.rs-pult.rb .rs-zoom { padding: 0; gap: 1px; background: #000; border-color: var(--pult-kante); border-radius: 3px; }
.rs.rs-pult.rb .rs-zoom__zeile { grid-template-columns: 16px minmax(0, 1fr) 84px; gap: 0; }
.rs.rs-pult.rb .rs-zoom__zeile canvas { height: 72px; border-radius: 0; }
.rs.rs-pult.rb .rs-zoom__lab { height: 72px; border-radius: 0; font-size: 10px; }
.rs.rs-pult.rb .rs-zoom__info { padding-right: 8px; font: 700 12px/1.3 -apple-system, "Helvetica Neue", Arial, sans-serif; }

/* ---------- Pult: Decks + schmaler Mixer ---------- */
.rs.rs-pult.rb .rs-console { grid-template-columns: minmax(0, 1fr) 196px minmax(0, 1fr); gap: 4px; }
@media (max-width: 1240px) { .rs.rs-pult.rb .rs-console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .rs.rs-pult.rb .rs-console { grid-template-columns: minmax(0, 1fr); } }

/* Deck im Rekordbox-Aufbau */
.rs.rs-pult.rb .rs-deck { display: grid; grid-template-columns: minmax(0, 1fr) 176px; grid-template-areas:
    "kopf kopf" "hd hd" "welle welle" "seek seek" "beats beats" "pads steuer" "pitch pitch";
  gap: 0 8px; padding: 6px 8px 8px; background: var(--pult-flaeche); border: 1px solid var(--pult-kante); border-top: 2px solid var(--deck-accent); border-radius: 3px; box-shadow: none; }
.rs.rs-pult.rb .rs-deck.playing { box-shadow: none; border-color: var(--pult-kante); border-top-color: var(--deck-accent); }
.rs.rs-pult.rb .rb-deckkopf { grid-area: kopf; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 4px; }
.rs.rs-pult.rb .rb-nr { display: grid; place-items: center; width: 18px; height: 40px; border-radius: 2px; background: var(--deck-accent); color: #000; font: 800 12px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rb-cover { width: 40px; height: 40px; border-radius: 2px; object-fit: cover; background: #000; }
.rs.rs-pult.rb .rb-titel { min-width: 0; }
.rs.rs-pult.rb .rb-titel .title { margin: 0; font: 700 14px/1.2 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs.rs-pult.rb .rb-titel .artist { margin: 2px 0 0; font: 500 11.5px/1.2 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-leise); letter-spacing: 0; }
.rs.rs-pult.rb .rb-ton { padding: 3px 6px; border-radius: 2px; background: #0b2a1b; color: #39c66b; font: 700 11px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rs-deck .hd { grid-area: hd; justify-content: flex-end; margin: 0 0 4px; }
.rs.rs-pult.rb .rs-deck .hd .label { display: none; }
.rs.rs-pult.rb .rs-deck .hd .time { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font: 700 15px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #fff; }
.rs.rs-pult.rb .rs-wave-huelle { grid-area: welle; }
.rs.rs-pult.rb .rs-wave { height: 56px; margin: 0; border-radius: 0; border: 0; background: #000; box-shadow: none; }
.rs.rs-pult.rb .rs-wave-farbe, .rs.rs-pult.rb .rs-wave-marken { inset: 0; height: 100%; border-radius: 0; }
.rs.rs-pult.rb .rs-deck > input[type=range] { grid-area: seek; margin: 2px 0 2px; height: 10px; }
.rs.rs-pult.rb .rs-beats { grid-area: beats; margin: 0 0 6px; }
.rs.rs-pult.rb .rs-beats i { height: 4px; }

/* Pads links (Hot Cue / Loop / Beat Jump) */
.rs.rs-pult.rb .rs-pads { grid-area: pads; margin: 0; padding: 6px; background: #141414; border-color: var(--pult-kante); border-radius: 3px; align-self: start; }
.rs.rs-pult.rb .rs-pads__kopf { margin-bottom: 6px; gap: 4px; }
.rs.rs-pult.rb .rs-pads__modi button { padding: 5px 7px; font: 600 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; }
.rs.rs-pult.rb .rs-pads__modi button[aria-selected="true"] { background: var(--rb-blau); color: #fff; }
.rs.rs-pult.rb .rs-pads__loopknoepfe button { height: 22px; min-width: 28px; border-radius: 2px; background: var(--rb-knopf); font-size: 9.5px; }
.rs.rs-pult.rb .rs-pads__loopanz { min-width: 50px; font: 600 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rs-pads__raster { gap: 3px; }
.rs.rs-pult.rb .rs-pad { aspect-ratio: auto; min-height: 30px; padding: 3px 6px; display: flex; justify-content: flex-start; gap: 6px; border-radius: 2px; background: #202020; border: 1px solid #2d2d2d; box-shadow: none; color: var(--rb-text); }
.rs.rs-pult.rb .rs-pad b { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 2px; background: color-mix(in srgb, var(--pad) 70%, #000); color: #000; font: 800 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rs-pad small { font: 500 10.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-leise); }
.rs.rs-pult.rb .rs-pad.belegt { background: #232323; border-color: color-mix(in srgb, var(--pad) 60%, #2d2d2d); box-shadow: none; color: #fff; }
.rs.rs-pult.rb .rs-pad.belegt b { background: var(--pad); }
.rs.rs-pult.rb .rs-pad.belegt small { color: #fff; }

/* Steuerblock rechts: Jog mit BPM, darunter CUE / PLAY (Stopp/Weiter klein) */
.rs.rs-pult.rb .rs-deck .row.rb-steuer { grid-area: steuer; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "jog jog jog jog" "cue play stop next"; gap: 6px 4px; justify-items: center; align-items: center; margin: 0; }
.rs.rs-pult.rb .rb-steuer .rs-jog { grid-area: jog; width: 150px; max-width: 150px; justify-self: center; display: grid !important; place-items: center;
  background: radial-gradient(circle, #1a1a1a 0 54%, #0c0c0c 55% 100%); border: 3px solid #2c2c2c; box-shadow: inset 0 0 0 2px #000, 0 0 0 1px #000; animation: none; }
.rs.rs-pult.rb .rb-steuer .rs-jog > span { top: 3%; height: 12%; width: 4px; margin-left: -2px; background: #fff; box-shadow: none; transform-origin: 50% 392%; animation: pult-jog 1.8s linear infinite; animation-play-state: paused; }
.rs.rs-pult.rb .rs-deck.playing .rs-jog > span { animation-play-state: running; }
.rs.rs-pult.rb .rs-deck.playing .rs-jog { border-color: var(--deck-accent); }
.rs.rs-pult.rb .rb-jogmitte { display: grid; justify-items: center; gap: 2px; z-index: 1; }
.rs.rs-pult.rb .rb-jogmitte .bpm { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font: 700 22px/1 -apple-system, "Helvetica Neue", Arial, sans-serif !important; color: #fff !important; text-shadow: none !important; }
.rs.rs-pult.rb .rb-jogmitte .pval { font: 600 10px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--deck-accent); }
.rs.rs-pult.rb .rb-steuer .rs-cue { grid-area: cue; width: 42px; height: 42px; border: 2px solid var(--rb-orange); background: #161616; color: var(--rb-orange); font: 800 11px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; box-shadow: none; }
.rs.rs-pult.rb .rb-steuer button.primary { grid-area: play; width: 42px !important; height: 42px !important; border: 2px solid var(--rb-gruen) !important; background: #161616 !important; color: var(--rb-gruen) !important; box-shadow: none !important; }
.rs.rs-pult.rb .rb-steuer button.primary .ic-lg { width: 18px; height: 18px; }
.rs.rs-pult.rb .rs-deck.playing .rb-steuer button.primary { background: var(--rb-gruen) !important; color: #000 !important; box-shadow: 0 0 12px rgba(57,198,107,.55) !important; }
.rs.rs-pult.rb .rb-steuer button[id$="-stop"] { grid-area: stop; } .rs.rs-pult.rb .rb-steuer button[id$="-next"] { grid-area: next; }
.rs.rs-pult.rb .rb-steuer button[id$="-stop"], .rs.rs-pult.rb .rb-steuer button[id$="-next"] { width: 30px !important; height: 30px !important; border: 1px solid #333 !important; background: var(--rb-knopf) !important; box-shadow: none !important; }
.rs.rs-pult.rb .rb-steuer button[id$="-stop"] .ic-lg, .rs.rs-pult.rb .rb-steuer button[id$="-next"] .ic-lg { width: 14px; height: 14px; }
@container (max-width: 400px) { .rs.rs-pult.rb .rs-deck { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "hd" "welle" "seek" "beats" "steuer" "pads" "pitch"; } .rs.rs-pult.rb .rb-steuer .rs-jog { display: grid !important; } }

.rs.rs-pult.rb .pitch-row { grid-area: pitch; margin-top: 6px; padding: 5px 8px; background: #141414; border-color: var(--pult-kante); border-radius: 3px; }
.rs.rs-pult.rb .pitch-row .plabel { font: 600 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .pitch-row .pval { font-size: 11px; }
.rs.rs-pult.rb .pitch-row .preset, .rs.rs-pult.rb .pitch-row .psync { min-height: 24px; border-radius: 2px; background: var(--rb-knopf); border-color: #333; font: 700 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .pitch-row .preset { width: 26px; }
.rs.rs-pult.rb .pitch-row .psync { color: var(--rb-text); }
.rs.rs-pult.rb .pitch-row .psync.active { background: var(--rb-blau); border-color: var(--rb-blau); color: #fff; box-shadow: none; }

/* Mixer schmal wie Rekordbox */
.rs.rs-pult.rb .rs-mixer { padding: 6px; gap: 6px; background: #151515; border: 1px solid var(--pult-kante); border-radius: 3px; box-shadow: none; }
.rs.rs-pult.rb .rs-master-top { padding: 6px; border-radius: 3px; }
.rs.rs-pult.rb .master-head { gap: 4px; margin-bottom: 4px; }
.rs.rs-pult.rb .master-label, .rs.rs-pult.rb .master-bpm { font-size: 10px; }
.rs.rs-pult.rb .strip-toggle { min-height: 22px; padding: 0 5px; font-size: 9px; }
.rs.rs-pult.rb .rs-mixer-strips { gap: 3px; }
.rs.rs-pult.rb .rs-strip { padding: 6px 2px; border-radius: 2px; background: #111; border-top-width: 2px; }
.rs.rs-pult.rb .strip-label { font: 700 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rs-dreh .lab { font: 600 7.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rs-dreh svg { width: 28px; height: 28px; }
.rs.rs-pult.rb .rs-dreh .kappe { fill: #2a2a2a; stroke: #444; }
.rs.rs-pult.rb .rs-eq__zeile { grid-template-columns: 32px auto; gap: 2px; }
.rs.rs-pult.rb .rs-kill { width: 22px; height: 16px; font-size: 6.5px; border-radius: 2px; }
.rs.rs-pult.rb .rs-strip.mit-eq { grid-template-rows: auto auto 150px auto auto auto; }
.rs.rs-pult.rb .vfader { height: 140px; width: 34px; }
.rs.rs-pult.rb .strip-vu { height: 140px; }
.rs.rs-pult.rb .strip-vu .meter-mini { width: 140px; }
.rs.rs-pult.rb .vfader::-webkit-slider-thumb { width: 26px; height: 14px; margin-left: -10px; background: linear-gradient(180deg, #555 0%, #333 45%, #111 50%, #333 55%, #444 100%); border-color: #666; box-shadow: inset 0 7px 0 -6px var(--deck-accent), 0 2px 5px rgba(0,0,0,.8); }
.rs.rs-pult.rb .strip-val { font-size: 10px; padding: 2px 5px; }
.rs.rs-pult.rb .strip-mute { min-height: 26px; border-radius: 2px; }
.rs.rs-pult.rb .strip-mute.on { background: var(--deck-accent); box-shadow: none; }
#strip-mic.rs-strip { --deck-accent: #9a9a9a; }
.rs.rs-pult.rb .rs-khknopf { min-height: 22px; font: 700 9px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; border-radius: 2px; }
.rs.rs-pult.rb .rs-khknopf[aria-pressed="true"] { background: var(--rb-orange); border-color: var(--rb-orange); }
.rs.rs-pult.rb .rs-phase, .rs.rs-pult.rb .rs-xfade { padding: 6px; border-radius: 3px; background: #111; }
.rs.rs-pult.rb .rs-phase .a, .rs.rs-pult.rb .rs-xfade .a { color: var(--deck-a); } .rs.rs-pult.rb .rs-phase .b, .rs.rs-pult.rb .rs-xfade .b { color: var(--deck-b); }
.rs.rs-pult.rb #rs-xfade::-webkit-slider-runnable-track { background: #050505; }
.rs.rs-pult.rb #rs-xfade::-webkit-slider-thumb { background: linear-gradient(90deg, #444, #666 45%, #111 50%, #666 55%, #444); border-color: #777; }
.rs.rs-pult.rb #rs-xfade-mitte { min-height: 20px; font-size: 9px; border-radius: 2px; }
@media (max-width: 1240px) { .rs.rs-pult.rb .rs-mixer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Sampler unter den Decks */
.rs.rs-pult.rb .rs-sampler { padding: 6px 8px; background: #151515; border-color: var(--pult-kante); border-radius: 3px; }
.rs.rs-pult.rb .rs-sampler__kopf { margin-bottom: 5px; }
.rs.rs-pult.rb .rs-sampler__baenke button { padding: 4px 8px; font: 600 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rs-sampler__baenke button[aria-selected="true"] { background: var(--rb-blau); color: #fff; }
.rs.rs-pult.rb .rs-spad { min-height: 38px; padding: 4px 6px; border-radius: 2px; background: #1f1f1f; border-color: #2e2e2e; color: var(--rb-leise); box-shadow: none; }
.rs.rs-pult.rb .rs-spad span { font: 500 10px/1.2 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-text); }
.rs.rs-pult.rb .rs-spad.spielt { background: var(--rb-orange); color: #000; box-shadow: none; }

/* Browser unten: dichte Tabelle wie Rekordbox */
.rs.rs-pult.rb .rs-browser { background: #121212; border-color: var(--pult-kante); border-radius: 3px; min-height: 360px; grid-template-columns: 170px minmax(0, 1fr); }
.rs.rs-pult.rb .rs-browser__seite { background: #161616; padding: 6px 4px; }
.rs.rs-pult.rb .rs-browser__seite button { padding: 4px 8px; border-radius: 2px; font: 500 11.5px/1.25 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-text); }
.rs.rs-pult.rb .rs-browser__seite button[aria-selected="true"] { background: #1e3a66; color: #fff; }
.rs.rs-pult.rb .rs-browser__kopf { padding: 5px 8px; }
.rs.rs-pult.rb .rs-browser__suche input { height: 26px; border-radius: 2px; background: #0c0c0c; font-size: 12px; }
.rs.rs-pult.rb .rs-browser__th { height: 22px; background: #1b1b1b; }
.rs.rs-pult.rb .rs-browser__th button { font: 600 10px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; text-transform: none; color: var(--rb-leise); }
.rs.rs-pult.rb .rs-browser__th button[data-sort="tonart"] { color: var(--rb-blau); }
.rs.rs-pult.rb .rs-browser__tr { min-height: 21px; font: 500 11.5px/1.2 -apple-system, "Helvetica Neue", Arial, sans-serif; border-bottom: 0; }
.rs.rs-pult.rb .rs-browser__tr:nth-child(even) { background: #161616; }
.rs.rs-pult.rb .rs-browser__tr:hover { background: #1e3a66; }
.rs.rs-pult.rb .rs-browser__tr .t { font-weight: 500; color: #e6e6e6; }
.rs.rs-pult.rb .rs-browser__tr .b, .rs.rs-pult.rb .rs-browser__tr .k, .rs.rs-pult.rb .rs-browser__tr .z { font: 500 11px -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-text); }
.rs.rs-pult.rb .rs-browser__tr .l button { width: 20px; height: 17px; border-radius: 2px; font-size: 9.5px; background: #222; }
.rs.rs-pult.rb .rs-browser__liste { max-height: 420px; }
.rs.rs-pult.rb .rs-queue { background: #151515; border-color: var(--pult-kante); border-radius: 3px; }

/* Nachbesserung: Zeilen oben bündig, Zeit neben den Titel, BPM mittig im Jog */
.rs.rs-pult.rb .rs-deck { align-content: start; grid-template-areas: "kopf hd" "welle welle" "seek seek" "beats beats" "pads steuer" "pitch pitch"; }
.rs.rs-pult.rb .rs-deck .hd { align-self: center; margin: 0; }
.rs.rs-pult.rb .rb-jogmitte .bpm { grid-column: auto !important; grid-row: auto !important; justify-self: center !important; order: 0 !important; font-size: 17px !important; letter-spacing: -.02em; white-space: nowrap; }
.rs.rs-pult.rb .rb-steuer .rs-jog > .rb-jogmitte { grid-area: 1 / 1; }
@container (max-width: 400px) { .rs.rs-pult.rb .rs-deck { grid-template-areas: "kopf" "hd" "welle" "seek" "beats" "steuer" "pads" "pitch"; } }
.rs.rs-pult.rb .rs-jog .rb-jogmitte span { position: static; left: auto; top: auto; width: auto; height: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; animation: none; transform: none; }

/* =====================================================================
   05.10.2026 · Runde 2 nach Eric („sieht nicht aus wie Rekordbox“): Vollbild, Rekordbox-Raster
   ===================================================================== */
/* Vollbild: das Studio legt sich über das ganze Fenster wie die App */
body.rb-voll-body { overflow: hidden; }
.rs.rs-pult.rb.rb-voll { position: fixed; inset: 0; z-index: 2147483000; overflow: auto; margin: 0; padding: 5px 6px 8px; background: #0d0d0d; gap: 4px; }
.rs.rs-pult.rb .rs-topbar { grid-template-columns: auto auto minmax(160px, 1fr) auto auto; }
.rs.rs-pult.rb .rs-topbar .rs-werkzeuge { flex-wrap: nowrap; }
.rs.rs-pult.rb .rb-vollknopf[aria-pressed="true"] { background: #2a2a2a; }
.rs.rs-pult.rb .rs-status { min-height: 0; padding: 0 2px; font-size: 10.5px; color: var(--rb-leise); }
@media (max-width: 1100px) { .rs.rs-pult.rb .rs-topbar { grid-template-columns: auto auto minmax(0, 1fr) auto; } .rs.rs-pult.rb .rs-topbar .rs-werkzeuge { grid-column: 1 / -1; flex-wrap: wrap; } }

/* Deck: Kopf | Übersicht | Cue-Liste + Steuerung */
.rs.rs-pult.rb .rs-deck { grid-template-columns: minmax(0, 1fr) 214px; grid-template-areas: "kopf kopf" "welle welle" "seek seek" "beats beats" "pads steuer" "pitch pitch"; padding: 5px 6px 6px; }
.rs.rs-pult.rb .rs-deck .hd { display: none; }
.rs.rs-pult.rb .rb-deckkopf { grid-template-columns: auto auto minmax(0, 1fr) auto auto; margin-bottom: 4px; }
.rs.rs-pult.rb .rb-nr { height: 34px; width: 16px; }
.rs.rs-pult.rb .rb-cover { width: 34px; height: 34px; }
.rs.rs-pult.rb .rb-zeit { display: grid; justify-items: end; line-height: 1; }
.rs.rs-pult.rb .rb-zeit b { font: 600 21px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rs.rs-pult.rb .rb-zeit small { margin-top: 3px; font: 500 11px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-leise); font-variant-numeric: tabular-nums; }
.rs.rs-pult.rb .rb-zeit.warn b { color: #ff3b3b; animation: pult-onair 1s ease-in-out infinite; }
.rs.rs-pult.rb .rs-wave { height: 42px; }
.rs.rs-pult.rb .rs-deck > input[type=range] { height: 8px; margin: 1px 0; }
.rs.rs-pult.rb .rs-beats { margin: 0 0 5px; }

/* Hot Cues als Liste in zwei Spalten (A–D | E–H) wie Rekordbox */
.rs.rs-pult.rb .rs-pads { padding: 4px; background: #121212; }
.rs.rs-pult.rb .rs-pads__kopf { margin-bottom: 4px; }
.rs.rs-pult.rb .rs-pads__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 22px); grid-auto-flow: column; gap: 2px 6px; }
.rs.rs-pult.rb .rs-pad { min-height: 0; height: 22px; padding: 0 5px; border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid #222; }
.rs.rs-pult.rb .rs-pad:hover { background: #1c1c1c; }
.rs.rs-pult.rb .rs-pad.belegt { background: transparent; border-bottom-color: #2a2a2a; }
.rs.rs-pult.rb .rs-pad b { width: 14px; height: 14px; font-size: 9px; border-radius: 1px; }
.rs.rs-pult.rb .rs-pad small { font-size: 11px; }
.rs.rs-pult.rb .rs-pad:not(.belegt) small { color: #4a4a4a; }

/* Steuerung: CUE / PLAY übereinander links vom Jog, Stopp / Weiter rechts */
.rs.rs-pult.rb .rs-deck .row.rb-steuer { grid-template-columns: 44px 124px 30px; grid-template-rows: 1fr 1fr; grid-template-areas: "cue jog stop" "play jog next"; gap: 6px; align-items: center; justify-items: center; align-self: start; }
.rs.rs-pult.rb .rb-steuer .rs-jog { width: 124px; max-width: 124px; }
.rs.rs-pult.rb .rb-jogmitte .bpm { font-size: 16px !important; }
.rs.rs-pult.rb .rb-steuer .rs-cue, .rs.rs-pult.rb .rb-steuer button.primary { width: 42px !important; height: 42px !important; }
@container (max-width: 430px) { .rs.rs-pult.rb .rs-deck { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "welle" "seek" "beats" "steuer" "pads" "pitch"; } .rs.rs-pult.rb .rs-deck .row.rb-steuer { justify-self: center; margin-bottom: 6px; } }
.rs.rs-pult.rb .pitch-row { margin-top: 5px; padding: 3px 6px; }

/* Schmales Mischpult mit kurzen Fadern */
.rs.rs-pult.rb .rs-console { grid-template-columns: minmax(0, 1fr) 172px minmax(0, 1fr); }
@media (max-width: 1240px) { .rs.rs-pult.rb .rs-console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .rs.rs-pult.rb .rs-console { grid-template-columns: minmax(0, 1fr); } }
.rs.rs-pult.rb .rs-mixer { padding: 4px; gap: 4px; }
.rs.rs-pult.rb .rs-master-top { padding: 4px; }
.rs.rs-pult.rb .master-head { flex-wrap: nowrap; }
.rs.rs-pult.rb .master-label { display: none; }
.rs.rs-pult.rb .rs-strip.mit-eq { grid-template-rows: auto auto 104px auto auto auto; }
.rs.rs-pult.rb .vfader, .rs.rs-pult.rb .strip-vu { height: 100px; }
.rs.rs-pult.rb .strip-vu .meter-mini { width: 100px; }
.rs.rs-pult.rb .rs-eq { gap: 1px; padding-bottom: 4px; }
.rs.rs-pult.rb .rs-dreh svg { width: 24px; height: 24px; }
.rs.rs-pult.rb .rs-eq__zeile { grid-template-columns: 28px auto; }
.rs.rs-pult.rb .rs-eq__zeile:first-child, .rs.rs-pult.rb .rs-eq__filter { grid-template-columns: 28px; }
.rs.rs-pult.rb .rs-phase .rs-phase__text { font-size: 9.5px; }

/* Browser-Spalten wie Rekordbox */
.rs.rs-pult.rb .rs-browser__th, .rs.rs-pult.rb .rs-browser__tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 46px minmax(0, 1.2fr) 56px 46px 78px 70px; gap: 10px; }
.rs.rs-pult.rb .rs-browser__th .c-album { font: 600 10px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--rb-leise); }
.rs.rs-pult.rb .rs-browser__th button[data-sort] { text-align: left; }
.rs.rs-pult.rb .rs-browser__th button[data-richtung="ab"], .rs.rs-pult.rb .rs-browser__th button[data-richtung="auf"] { color: var(--rb-blau); }
.rs.rs-pult.rb .rs-browser__tr .k { color: #39c66b; }
.rs.rs-pult.rb .rs-browser__tr .al, .rs.rs-pult.rb .rs-browser__tr .dt { color: var(--rb-leise); font: 500 11px -apple-system, "Helvetica Neue", Arial, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs.rs-pult.rb.rb-voll .rs-browser { min-height: 300px; }
.rs.rs-pult.rb.rb-voll .rs-browser__liste { max-height: 46vh; }
@media (max-width: 1100px) { .rs.rs-pult.rb .rs-browser__th, .rs.rs-pult.rb .rs-browser__tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 46px 56px 46px 70px; } .rs.rs-pult.rb .c-album, .rs.rs-pult.rb .c-datum { display: none; } }
@media (max-width: 760px) { .rs.rs-pult.rb .rs-browser__th, .rs.rs-pult.rb .rs-browser__tr { grid-template-columns: minmax(0, 1fr) 40px 50px 70px; } .rs.rs-pult.rb .rs-browser__tr .z, .rs.rs-pult.rb .rs-browser__th [data-sort="dauer"] { display: none; } }

/* Runde 2b: Mittelzeile (Beat-Abgleich | Crossfader), Status in der Kopfleiste, kompakter Mixer */
.rs.rs-pult.rb .rb-mitte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.rs.rs-pult.rb .rb-mitte .rs-phase { grid-column: 1; padding: 4px 10px; background: #151515; border: 1px solid var(--pult-kante); border-radius: 3px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.rs.rs-pult.rb .rb-mitte .rs-phase .st-lab { grid-column: 1 / -1; }
.rs.rs-pult.rb .rb-mitte .rs-phase__bahn { grid-column: 1 / -1; }
.rs.rs-pult.rb .rb-mitte .rs-xfade { grid-column: 2; padding: 4px 10px; background: #151515; border: 1px solid var(--pult-kante); border-radius: 3px; grid-template-columns: auto minmax(0, 1fr) auto; }
.rs.rs-pult.rb .rb-mitte .rs-xfade .st-lab { grid-column: 1 / -1; }
.rs.rs-pult.rb .rb-mitte #rs-xfade-mitte { grid-column: 1 / -1; }
@media (max-width: 900px) { .rs.rs-pult.rb .rb-mitte { grid-template-columns: minmax(0, 1fr); } .rs.rs-pult.rb .rb-mitte .rs-phase, .rs.rs-pult.rb .rb-mitte .rs-xfade { grid-column: 1; } }
.rs.rs-pult.rb .rs-topbar { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; }
.rs.rs-pult.rb .rs-topbar .rs-status { align-self: center; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .rs.rs-pult.rb .rs-topbar .rs-status { display: none; } }
/* Mixer so hoch wie die Decks: kleine Knöpfe, kurze Fader, Stumm + Kopfhörer nebeneinander */
.rs.rs-pult.rb .rs-master-top .stream-meter { height: 8px; }
.rs.rs-pult.rb .rs-dreh svg { width: 21px; height: 21px; }
.rs.rs-pult.rb .rs-dreh { grid-template-columns: 21px; gap: 0; }
.rs.rs-pult.rb .rs-dreh .lab { font-size: 7px; }
.rs.rs-pult.rb .rs-eq__zeile { grid-template-columns: 26px auto; }
.rs.rs-pult.rb .rs-eq__zeile:first-child, .rs.rs-pult.rb .rs-eq__filter { grid-template-columns: 26px; }
.rs.rs-pult.rb .rs-eq__filter { margin-top: 2px; padding-top: 3px; }
.rs.rs-pult.rb .rs-kill { width: 20px; height: 14px; font-size: 6px; }
.rs.rs-pult.rb .rs-strip { gap: 4px 3px; padding: 4px 2px; }
.rs.rs-pult.rb .rs-strip.mit-eq { grid-template-columns: 12px 1fr 1fr; grid-template-rows: auto auto 92px auto auto; }
.rs.rs-pult.rb .rs-strip.mit-eq .strip-label, .rs.rs-pult.rb .rs-strip.mit-eq .rs-eq, .rs.rs-pult.rb .rs-strip.mit-eq .strip-val { grid-column: 1 / -1; }
.rs.rs-pult.rb .rs-strip.mit-eq .strip-vu { grid-column: 1; } .rs.rs-pult.rb .rs-strip.mit-eq .vfader { grid-column: 2 / -1; }
.rs.rs-pult.rb .rs-strip.mit-eq .strip-mute { grid-column: 2; grid-row: 5; min-height: 22px; padding: 0; }
.rs.rs-pult.rb .rs-strip.mit-eq .rs-khknopf { grid-column: 3; grid-row: 5; min-height: 22px; padding: 0; font-size: 0; }
.rs.rs-pult.rb .rs-strip.mit-eq .rs-khknopf::before { content: '🎧'; font-size: 11px; }
.rs.rs-pult.rb .rs-strip.mit-eq .strip-val { grid-row: 4; padding: 1px 4px; font-size: 9.5px; }
.rs.rs-pult.rb .vfader, .rs.rs-pult.rb .strip-vu { height: 88px; }
.rs.rs-pult.rb .strip-vu .meter-mini { width: 88px; }
#strip-mic.rs-strip { grid-template-rows: auto 92px auto auto; }
#strip-mic .strip-vu, #strip-mic .vfader { grid-row: 2 !important; }
.rs.rs-pult.rb .rb-mitte { grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); }
.rs.rs-pult.rb .rb-mitte .rs-phase { gap: 3px; }
.rs.rs-pult.rb .rb-mitte .rs-phase__bahn { height: 8px; }
.rs.rs-pult.rb .rb-mitte .rs-phase__text { font: 500 9.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.rs.rs-pult.rb .rb-mitte .rs-xfade { gap: 2px 8px; }
.rs.rs-pult.rb .rb-mitte #rs-xfade { height: 26px; }
.rs.rs-pult.rb .rb-mitte #rs-xfade-mitte { min-height: 16px; padding: 0 8px; }
.rs.rs-pult.rb .rs-wave { height: 64px; }
.rs.rs-pult.rb .rs-pads__raster { grid-template-rows: repeat(4, 27px); }
.rs.rs-pult.rb .rs-pad { height: 27px; }
.rs.rs-pult.rb .rs-deck .row.rb-steuer { grid-template-columns: 46px 146px 30px; }
.rs.rs-pult.rb .rb-steuer .rs-jog { width: 146px; max-width: 146px; }
.rs.rs-pult.rb .rb-jogmitte .bpm { font-size: 18px !important; }
.rs.rs-pult.rb .rs-deck { grid-template-columns: minmax(0, 1fr) 238px; }

/* Kopfleiste bricht um statt zu quetschen (Fenster-Ansicht, schmale Fenster; Eric 05.10. „sieht komisch aus“) */
.rs.rs-pult.rb .rs-topbar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs.rs-pult.rb .rs-topbar > * { flex: none; }
.rs.rs-pult.rb .rs-topbar .rs-banner-inline { flex: 1 1 240px; min-width: 200px; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs.rs-pult.rb .rs-topbar .rs-banner-inline #rs-banner-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs.rs-pult.rb .rs-topbar .rs-status { flex: 0 1 220px; min-width: 0; display: block; }
.rs.rs-pult.rb .rs-topbar .rs-werkzeuge { flex: 0 1 auto; flex-wrap: wrap; }
.rs.rs-pult.rb .rs-wz { white-space: nowrap; }
@media (max-width: 1100px) { .rs.rs-pult.rb .rs-topbar .rs-status { display: none; } }
.rs.rs-pult.rb .rs-topbar .rs-status { flex: 1 1 260px; max-width: none; white-space: normal; }