/* Gemeinsame Styles fuer alle Dekaden-Seiten (80er, 90er, 2000er, ...).
   Farben kommen als CSS-Variablen von der jeweiligen Seite (siehe decades.js). */
:root {
  --bg: #0c0d11;
  --panel: #16171d;
  --accent: #7c5cff;
  --accent2: #2dd4bf;
  --text: #f3f3f6;
  --muted: #94959f;
  --border: rgba(255,255,255,0.08);
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  /* Der DJ-Player steht als feste Spalte rechts — Platz lassen, damit
     Inhalt/Footer nicht darunter verschwinden. Auf schmalen Screens
     wandert er zurueck an den unteren Rand (siehe Media-Queries).
     460px = 370px Player + 90px BPM-Sync-Panel (siehe .dj-player /
     .dj-tools-panel weiter unten). War 380px/290px -- auf breiten
     Desktop-Screens (>1100px, betrifft KEINE der anderen Breakpoint-Fixes
     hier) wirkte die schmale 290px-Spalte selbst gestapelt noch eng
     ("Player zusammengerafft" bezog sich offenbar die ganze Zeit auch auf
     den normalen Desktop-Fall, nicht nur auf schmale Fenster/iPad). */
  padding-right: 460px;
}
a { color: var(--accent); }

/* Utility-Block oben (Home / Mail / Datenschutz) */
.utility-block {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.utility-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text);
  width: 40px;
}
.utility-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.utility-icon svg { width: 18px; height: 18px; }
.utility-label { font-size: 9px; color: var(--muted); }
button.utility-tile { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }


/* Hero-Header */
header.decade-header {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 18px;
  text-align: center;
}
.app-icon-hero {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.app-icon-hero svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.decade-logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
}
.decade-years {
  display: inline-block;
  color: var(--accent2);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.decade-tagline {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 12px;
}
.badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}
.badge svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Themen-/Feature-Grid */
main.decade-main {
  max-width: 1400px;
  /* War "margin: 0 auto" (mittig zentriert) -- ab ca. 1860px Fensterbreite
     (max-width 1400px + Sidebar-Player+Tools-Panel 460px) hat "auto" links
     UND rechts Luft verteilt, wodurch zwischen Inhalt und Player eine immer
     groessere Luecke entstand (bei 2200px schon 170px), der Player wirkte
     dadurch "abgehaengt". Jetzt haengt der Inhalt fest am Player/Tools-
     Panel (0 Luecke bei jeder Breite), ueberschuessiger Platz auf breiten
     Screens sammelt sich links statt in der Mitte zu klaffen. */
  margin: 0 0 0 auto;
  padding: 0 24px 90px;
}
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 40px 0;
}
.feature {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}
.feature h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

.info-note {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 16px;
}
.info-note strong { color: var(--text); }

footer.decade-footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
}
footer.decade-footer a { color: var(--accent); text-decoration: none; }
footer.decade-footer .links { margin-top: 8px; }
footer.decade-footer .links a { margin: 0 8px; }

/* Impressum / Datenschutz */
main.legal-main { max-width: 680px; margin: 0 auto; padding: 56px 24px 64px; }
main.legal-main h1 { font-size: 28px; margin-bottom: 4px; }
main.legal-main .stand { color: var(--muted); font-size: 14px; margin-bottom: 32px; }
main.legal-main h2 { font-size: 18px; margin-top: 32px; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
main.legal-main p, main.legal-main ul { color: #e4dff0; }
.back-link { display: inline-block; margin-bottom: 24px; color: var(--muted); text-decoration: none; font-size: 14px; }
.contact-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; margin: 32px 0; }
.contact-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.contact-form label { font-size: 13px; color: var(--muted); font-weight: 600; display: flex; flex-direction: column; gap: 6px; }
.contact-form input, .contact-form textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font-family: inherit; font-size: 14px; }
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form button { align-self: flex-start; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 10px 22px; font-weight: 700; font-size: 14px; cursor: pointer; }
.contact-honey { position: absolute; left: -9999px; }

/* ---------- Playlist-Generator: Themen, Song-Kacheln, Popup ---------- */
.generator {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  margin-top: 24px;
}
.generator h2 { font-family: var(--font-display); margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.generator .sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

/* Suche bleibt in der Dekade; 💡-Hinweis verlinkt auf andere Dekaden bei Treffer dort */
.search-box { margin-bottom: 10px; position: relative; }
.search-box-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.search-box-icon svg { width: 100%; height: 100%; }
.search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px 10px 36px;
  font-size: 14px;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.hint-icon { display: inline-flex; width: 12px; height: 12px; vertical-align: -1px; }
.hint-icon svg { width: 100%; height: 100%; }
.search-hint a { color: var(--accent2); font-weight: 700; text-decoration: none; }
.search-hint a:hover { text-decoration: underline; }

.generator-search {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.generator-search .search-box { margin-bottom: 0; }
.generator-search .search-hint { margin: 6px 0 0; }

/* Schnellzugriff auf andere Dekaden/Stimmungen, fest zwischen Suchfeld und
   Genre-Buttons -- Dekaden und Stimmungen je eine eigene, bewusst NICHT
   umbrechende Zeile (Stimmungen direkt unter Dekaden): bei Platzmangel
   scrollt die einzelne Zeile horizontal statt sich in die Hoehe zu ziehen.
   Wechselt per AJAX (siehe navigateToPage), der Player laeuft dabei weiter. */
.gen-switch-rows { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

/* Eigenes Dropdown (Button + Liste) statt <select> -- native Popups lassen
   sich v.a. auf macOS/Safari gar nicht stylen (immer weiss, immer so lang
   wie die Liste). Der Trigger-Button sieht aus wie vorher die Pille, das
   Popup darunter ist bewusst dezent: dunkler Hintergrund, duenner Rand,
   leichter Schatten -- setzt sich vom Seitenhintergrund ab, aber nicht
   grell -- und hat eine feste Maximalhoehe, laengere Listen (z.B. Genres)
   scrollen darin statt die Seite in die Laenge zu ziehen. */
.gen-dd { position: relative; flex: 1 1 150px; min-width: 110px; }
.gen-dd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 22px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--item-color, var(--border));
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfd3dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
}
.gen-dd-trigger:hover,
.gen-dd.open .gen-dd-trigger { background-color: rgba(255,255,255,0.07); }
.gen-dd-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gen-dd-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.gen-dd-value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--item-color, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-dd-value.placeholder { color: var(--muted); font-weight: 500; }

.gen-dd-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* Ueber dem fixen DJ-Player/Song-Modal (z-index bis 250) -- sonst
     verschwindet das Popup teilweise dahinter, siehe .dj-player. */
  z-index: 260;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  background: #14151c;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.gen-dd-list[hidden] { display: none; }
.gen-dd-item {
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-size: 12px;
  font-weight: 500;
  color: #f2f3f7;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gen-dd-item:hover { background: rgba(255,255,255,0.08); }
.gen-dd-item.active {
  border-left-color: var(--item-color, var(--accent));
  color: var(--item-color, var(--accent));
  font-weight: 700;
  background: rgba(255,255,255,0.05);
}
.gen-genre-dd { flex: 0 0 auto; min-width: 230px; max-width: 100%; }
.decade-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.decade-link-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #9aa3c0);
}
.decade-link-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.decade-link-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.decade-link-chip:hover { background: rgba(255,255,255,0.06); }
/* "linked" = per Klick verbundene Nachbar-Dekade (dezenter Umriss).
   "now-playing" = die Dekade, die GERADE tatsaechlich zu hoeren ist
   (kraeftige Farbe, siehe currentPlayingDecadeKey() in decades.js) --
   ueberschreibt "linked" optisch, sobald sie aktiv ist. */
.decade-link-chip.linked {
  border-color: var(--accent2);
  color: var(--accent2);
}
.decade-link-chip.now-playing {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.decade-own-chip { font-weight: 700; }
/* Feste Dekaden-Navigationszeile (ersetzt das fruehere Dekaden-Dropdown
   oben im Playlist-Generator) -- gleiches Chip-Aussehen wie .decade-link-*
   oben, aber eigene Klasse: .decade-link-row hat eine eigene Klick-Logik
   (Dekade verbinden) auf Section-Ebene, die nicht mit reiner
   Seiten-Navigation vermischt werden darf. */
.decade-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.decade-nav-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.decade-nav-chip:hover { background: rgba(255,255,255,0.06); }
.decade-nav-chip.decade-nav-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
  font-weight: 700;
}
.theme-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gen-genre-row { margin-bottom: 18px; }
.theme-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.theme-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme-btn-icon { width: 15px; height: 15px; flex-shrink: 0; }
.theme-btn-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-btn-mix {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: transparent;
  font-weight: 800;
}
.theme-btn-mix.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 2px var(--text) inset; }

.generator-actions {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.generator-actions.visible { display: flex; }
.generator-actions button, .generator-actions a {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--accent2);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.generator-actions button svg, .generator-actions a svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Primaeraktion ("Playlist auf Deck laden") deutlich hervorheben, damit sie
   sich nicht in den beiden Nebenaktionen (Kopieren/CSV) verliert. */
#gen-play-all {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#gen-play-all:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
#gen-play-all:active {
  transform: translateY(0);
  filter: brightness(1);
}
.generator-count { color: var(--muted); font-size: 13px; }

/* Bevorzugter Dienst + Senden: Auswahl geht ohne Kopieren/CSV direkt zum Anbieter */
.send-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.send-panel-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.provider-picker { display: flex; gap: 6px; }
.provider-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  filter: grayscale(0.6);
  transition: opacity 0.12s ease, filter 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.provider-btn svg { width: 15px; height: 15px; }
.provider-btn:hover { opacity: 0.8; }
.provider-btn.active {
  opacity: 1;
  filter: none;
  border-color: var(--text);
  transform: scale(1.1);
}
.send-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.send-btn:disabled { background: var(--bg); color: var(--muted); border: 1px solid var(--border); cursor: not-allowed; }
.send-btn-queue {
  background: none;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.send-btn-queue:hover:not(:disabled) { background: rgba(34, 197, 94, .1); }
.send-btn-queue:disabled { background: var(--bg); color: var(--muted); border: 1px solid var(--border); cursor: not-allowed; }
.send-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Song-Liste: Zeile fuer Zeile statt Kachel-Grid, Titel zuerst */
.generator-body {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.song-grid {
  flex: 1;
  min-width: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
}
/* Platzhalter der gefensterten Songliste (siehe renderSongGrid) */
.song-grid-spacer { flex: none; width: 100%; pointer-events: none; }
.song-grid-section-heading {
  padding: 8px 10px;
  margin: 4px 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.song-grid-section-heading-mostwanted {
  color: var(--text);
  text-transform: none;
  font-size: 12px;
  border-bottom-color: var(--accent, var(--border));
}
.song-grid-section-heading-mostwanted strong { color: var(--accent, var(--text)); }
.gen-history {
  flex: 1;
  min-width: 260px;
  max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.gen-history h3 { margin: 0 0 10px; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.gen-history h3 svg { width: 14px; height: 14px; flex-shrink: 0; }
.gen-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.gen-history li strong { display: block; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-history li span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-history-empty { color: var(--muted); font-size: 12px; }
.song-tile {
  position: relative;
  width: 100%;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.song-tile:hover { border-color: var(--accent); background: rgba(255,255,255,0.03); }
.song-tile.selected { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35); }
.song-tile.song-tile-mixable { border-color: #f5a623; box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.45); }
.song-tile.song-tile-mixable.selected { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35), 0 0 0 4px rgba(245, 166, 35, 0.4); }
.song-tile-media { position: relative; flex-shrink: 0; width: 34px; height: 34px; }
.song-tile img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--panel);
  display: block;
}
.song-tile-text { flex: 0 1 auto; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.song-tile .song-tile-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-tile .song-tile-year { font-weight: 700; font-style: italic; color: var(--muted); }
.song-tile .song-tile-artist { font-size: 11px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.song-tile-decade {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 20px;
}

.song-tile-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.song-tile-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
  flex-shrink: 0;
}
.song-tile.selected .song-tile-check { opacity: 1; transform: scale(1); }

.song-tile-info {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease;
}
.song-tile-info:hover, .song-tile-info:focus-visible { background: rgba(255,255,255,0.18); }

.song-tile-play {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff0000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.song-tile-play svg { width: 11px; height: 11px; margin-left: 1px; }
.song-tile-play:hover { transform: scale(1.1); }
.song-tile-play.disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

.song-tile-youtube {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #ff0000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.song-tile-youtube svg { width: 12px; height: 12px; margin-left: 1px; }
.song-tile-youtube:hover { transform: scale(1.1); }
.song-tile-youtube.disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}

/* Streaming-Icons: nur im Popup, nur Symbole, Klick oeffnet die Suche beim jeweiligen Dienst */
.streaming-row { display: flex; flex-wrap: wrap; gap: 6px; }
.streaming-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.streaming-icon:hover { transform: translateY(-1px) scale(1.06); }
.streaming-icon svg { width: 14px; height: 14px; }
.song-modal .streaming-row .streaming-icon { width: 30px; height: 30px; }
.song-modal .streaming-row .streaming-icon svg { width: 18px; height: 18px; }

.song-hint { color: var(--muted); font-size: 12px; margin-top: 12px; }
.song-hint a { color: var(--accent2); }

/* Popup / Modal mit allen Song-Infos */
.song-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}
.song-modal-overlay.open { display: flex; }
.song-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.song-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ff8a8a 0%, #e5342f 45%, #b91c1c 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), inset 0 -2px 3px rgba(0,0,0,0.25);
  overflow: hidden;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.song-modal-close:hover { filter: brightness(1.08); transform: translateY(-1px); }
.song-modal-close::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 5px;
  right: 5px;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
  pointer-events: none;
}
.song-modal-close-x { position: relative; }
.song-modal img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg);
}
.song-modal-artist { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text); }
.song-modal-title { font-size: 15px; color: var(--muted); margin-top: -8px; }
.song-modal-play {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.song-modal-play svg { width: 15px; height: 15px; flex-shrink: 0; }
.song-modal-play:disabled { background: var(--bg); color: var(--muted); border: 1px solid var(--border); cursor: not-allowed; }
.song-modal-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.song-modal-meta dt { color: var(--muted); }
.song-modal-meta dd { margin: 0; color: var(--text); }
.song-modal-edit-genre-toggle {
  align-self: flex-start;
  background: none;
  color: var(--accent2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.song-modal-edit-genre-toggle:hover { border-color: var(--accent2); }
.song-modal-genre-edit { display: flex; flex-direction: column; gap: 6px; }
.song-modal-genre-edit[hidden] { display: none; }
.song-modal-genre-select {
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.song-modal-genre-select:hover { border-color: var(--accent2); }
.song-modal-genre-save {
  align-self: flex-start;
  background: var(--accent2);
  color: #0c1a10;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.song-modal-genre-save:disabled { opacity: 0.6; cursor: default; }
.song-modal-genre-status { margin: 0; font-size: 11px; color: var(--muted); min-height: 14px; }
.song-modal-link {
  align-self: flex-start;
  color: var(--accent2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* Nutzerwunsch (13.9.): "endgueltiges Entfernen" eines Songs mit falschem/
   fehlendem Video aus dem Katalog, direkt aus dem Song-Info-Modal. Deutlich
   abgesetzt (roter Ton) und mit Bestaetigungsschritt, da irreversibel. */
.song-modal-remove-box {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.song-modal-remove-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid #b3413a;
  color: #e2665d;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.song-modal-remove-btn:hover { background: rgba(226, 102, 93, 0.12); }
.song-modal-remove-confirm[hidden] { display: none; }
.song-modal-remove-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}
.song-modal-remove-confirm-yes,
.song-modal-remove-confirm-no {
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.song-modal-remove-confirm-yes {
  background: #b3413a;
  border: none;
  color: #fff;
}
.song-modal-remove-confirm-no {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
}
.song-modal-remove-status { margin: 0; font-size: 11px; color: var(--muted); min-height: 14px; }

/* ---------- Eigener DJ-Player: zwei Plattenspieler (Deck A/B) + Crossfader,
   unten fixiert. Songs per Klick auf ▶ oder per Drag&Drop auf ein Deck
   laden. Bleibt auch über dem Popup sichtbar. Alles Gespielte landet
   zusätzlich im "Mein Mix"-Verlauf (Button rechts, Panel klappt darüber
   auf).
   Die Chrome-Fader-Verlaufsfarben (siehe Slider-Thumbs weiter unten) sind
   von wheelsofsteel.net (Scott Schiller, BSD-Lizenz) übernommen. ---------- */
.dj-player {
  /* Nutzerwunsch (10.9.): "die Player bleiben an der Position wie sie
     sind... nur die Player optisch kleiner damit beide Player auf der
     rechten Seite gleichzeitig zu sehen sind" -- "zoom" statt "transform:
     scale()", weil zoom (anders als transform) auch die Layout-/
     Scroll-Berechnung (scrollHeight) mitverkleinert: nur damit passen
     wirklich beide Decks OHNE internen Scroll in die Sidebar, bei
     gleichbleibender Position (top/right/bottom bleiben unveraendert,
     da das reine Offsets ohne Laengeneinheit sind, die "zoom" nicht
     mitskaliert).
     Nutzerwunsch (21.9.): "nutze Platz gut ... sei kreativ" -- zoom
     verkleinert nicht nur den INHALT, sondern die ganze Box inkl. ihrer
     eigenen Breite (370px * 0.72 = 266px sichtbar), obwohl links davon
     immer noch die vollen 370px Platz reserviert sind (body
     padding-right + .dj-tools-panel bei right:370px, siehe unten) -- es
     blieb also eine ~104px breite, ungenutzte schwarze Luecke zwischen
     Seiteninhalt/Tools-Panel und dem sichtbar geschrumpften Player. Fix:
     die Box VOR dem Zoom genau so viel breiter machen, wie der Zoom sie
     wieder schrumpft (370px / 0.72) -- sichtbare Breite bleibt exakt
     370px (stoesst wieder luecklos an .dj-tools-panel), waehrend Hoehe
     und Zoom-Faktor fuer den Scroll-freien Fit unveraendert bleiben. */
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(370px / 0.72);
  zoom: 0.72;
  overflow-y: auto;
  z-index: 250;
  background: linear-gradient(200deg, var(--panel) 0%, var(--bg) 130%);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.04);
  padding: 12px 18px 14px;
}
/* Player ist "position: fixed", nach einem Reload also immer sichtbar --
   trotzdem faellt eine fortgesetzte Wiedergabe in der Ecke leicht nicht
   sofort auf. Kurzer Aufblitz-Effekt statt eines erzwungenen Scrolls (siehe
   highlightResumedPlayer in decades.js), sobald Song/Warteschlange nach
   einem Reload wiederhergestellt sind. */
.dj-player.dj-player-resumed { animation: dj-player-resume-pulse 2.6s ease-out; }
@keyframes dj-player-resume-pulse {
  0% { box-shadow: -8px 0 24px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 0 0 0 rgba(124,92,255,0); }
  12% { box-shadow: -8px 0 24px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 0 0 2px var(--accent), -8px 0 34px 6px rgba(124,92,255,0.5); }
  100% { box-shadow: -8px 0 24px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 0 0 0 rgba(124,92,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .dj-player.dj-player-resumed { animation: none; }
}
.dj-player::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), var(--accent2), transparent);
  opacity: 0.7;
}
.dj-decks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dj-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* War fest 334px (= alte 370px-Box minus Padding) -- die Box ist jetzt
     breiter (s.o.), das Deck soll die neue Breite auch wirklich fuellen
     statt als schmale Spalte mit Rand links/rechts darin zu stehen. */
  width: 100%;
}
.dj-deck-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 3px;
  text-align: left;
}
.dj-deck-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.dj-deck-top {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.dj-deck-mid {
  /* Nutzerwunsch (22.9., letztes Wort): "der Fortschrittsbalken soll
     MITTIG unter dem Player sein... der Pitch-Regler kann daneben sein,
     das ist mir latte" -- vorher stand die Waveform+Pitch-PAARUNG als
     Gruppe zentriert (justify-content:center auf beide), wodurch die
     Waveform selbst je nach Pitch-Breite leicht neben der Vinyl-Mitte
     lag. Jetzt: die Waveform wird UNABHAENGIG vom Pitch-Regler exakt
     unter dem Vinyl zentriert (margin:0 auto), der Pitch-Regler haengt
     absolut positioniert rechts daneben und beeinflusst die
     Waveform-Zentrierung nicht mehr. */
  position: relative;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dj-waveform {
  /* War 135-162px UNTER dem Vinyl gestapelt (eigene Zeile), dann neben
     dem Pitch-Regler -- steht jetzt unabhaengig und exakt zentriert
     (siehe .dj-deck-mid oben). */
  width: clamp(150px, 15vw, 210px);
  margin: 0 auto;
  height: 34px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  touch-action: none;
  overflow: hidden;
}
.dj-waveform canvas { display: block; width: 100%; height: 100%; }
.dj-waveform:hover { border-color: rgba(255,255,255,0.14); }
.dj-waveform:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dj-pitch {
  /* Haengt jetzt absolut rechts neben der zentrierten Waveform (siehe
     .dj-deck-mid) -- Position ist laut Nutzer nebensaechlich, Hauptsache
     die Waveform selbst ist exakt mittig. */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  flex: 0 0 auto;
}
.dj-pitch-display {
  position: absolute;
  left: calc(50% + 33px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  background: #04120e;
  color: #4ade80;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  padding: 5px 8px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.dj-slider-wrap { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 1; }
.dj-scale { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 1px; pointer-events: none; }
.dj-scale span { width: 1px; height: 4px; background: var(--border); }
.dj-scale span.mid { height: 7px; background: var(--accent); }

.dj-knob-wrap { display: flex; align-items: center; justify-content: center; }
.dj-knob {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3a3a42, #1a1a1f 60%, #2a2a30);
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.4);
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}
.dj-knob:active { cursor: grabbing; }
.dj-knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dj-knob-ticks span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--border);
}
.dj-knob-ticks span.mid { background: var(--accent2); }
.dj-knob-ticks span:nth-child(1) { transform: rotate(-135deg) translate(0, -29px); }
.dj-knob-ticks span:nth-child(2) { transform: rotate(-67.5deg) translate(0, -29px); }
.dj-knob-ticks span:nth-child(3) { transform: rotate(0deg) translate(0, -29px); }
.dj-knob-ticks span:nth-child(4) { transform: rotate(67.5deg) translate(0, -29px); }
.dj-knob-ticks span:nth-child(5) { transform: rotate(135deg) translate(0, -29px); }
.dj-knob-dial {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #565660, #202024 70%);
  transition: transform 0.08s ease;
}
.dj-knob-pointer {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent2);
  box-shadow: 0 0 4px var(--accent2);
}

/* "Player arbeitet gerade selbststaendig"-Signal: BPM-Sync bewegt einen
   Regler nur automatisch (nie bei direkter Nutzer-Interaktion) -- Knopf
   dreht dabei sichtbar sanfter statt zu springen, plus ein pulsierender
   Schein in der Sync-Farbe, solange die automatische Bewegung laeuft. */
.dj-knob.auto-glide .dj-knob-dial { transition: transform 0.45s cubic-bezier(.22, 1, .36, 1); }
.dj-knob.auto-glide {
  animation: dj-knob-auto-pulse 1.1s ease-in-out infinite;
}
@keyframes dj-knob-auto-pulse {
  0%, 100% {
    box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 0 0 rgba(74,222,128,0.45);
  }
  50% {
    box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 0 4px rgba(74,222,128,0.22);
  }
}
.dj-pitch-display.auto-glide {
  animation: dj-pitch-auto-pulse 1.1s ease-in-out infinite;
}
@keyframes dj-pitch-auto-pulse {
  0%, 100% { box-shadow: inset 0 0 6px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.1); }
  50% { box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 8px rgba(74,222,128,0.55); border-color: rgba(74,222,128,0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .dj-knob.auto-glide, .dj-pitch-display.auto-glide { animation: none; }
}

.dj-vinyl {
  position: relative;
  width: clamp(135px, 13vw, 200px);
  height: clamp(135px, 13vw, 200px);
  border-radius: 50%;
  flex-shrink: 0;
}
.dj-vinyl.drag-over { box-shadow: 0 0 0 3px var(--accent); }
.drag-vinyl-ghost {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 4px),
    conic-gradient(from 200deg at 35% 30%, rgba(255,255,255,0.14), transparent 35%, transparent 65%, rgba(255,255,255,0.06) 80%, transparent 100%),
    radial-gradient(circle at 35% 30%, #333, #0a0a0a 70%);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 6px rgba(0,0,0,0.35),
    inset 0 0 0 7px rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drag-vinyl-ghost-label {
  width: 46%;
  height: 46%;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 3px #0a0a0a, 0 0 0 4px rgba(255,255,255,0.15);
}
.drag-vinyl-ghost-label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dj-vinyl-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 4px),
    conic-gradient(from 200deg at 35% 30%, rgba(255,255,255,0.14), transparent 35%, transparent 65%, rgba(255,255,255,0.06) 80%, transparent 100%),
    radial-gradient(circle at 35% 30%, #333, #0a0a0a 70%);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 6px rgba(0,0,0,0.35),
    inset 0 0 0 7px rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dj-vinyl-video {
  width: 113px;
  height: 113px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 3px #0a0a0a, 0 0 0 4px rgba(255,255,255,0.15);
}
/* YouTube haelt beim eingebetteten Player IMMER das Seitenverhaeltnis des
   Quellvideos ein (letterboxed/pillarboxed) statt den Rahmen randfuellend
   auszufuellen -- egal wie die Iframe-CSS-Groesse (width/height) gesetzt
   ist: eine GROESSERE Box aendert nur die Groesse der schwarzen Balken mit,
   nicht deren Vorhandensein, da YouTube intern relativ zur (weiterhin
   quadratischen) Box neu letterboxt. Bei 16:9 (die meisten Videos) oder 4:3
   (aeltere) blieben in unserem QUADRATISCHEN 113x113px-Rahmen dadurch
   sichtbare schwarze Balken oben/unten -- das Bild wirkte "gequetscht"
   statt den Kreis auszufuellen. Fix wie bei CSS object-fit: cover, das
   YouTube dem Iframe-Inhalt selbst nicht erlaubt: NICHT die Iframe-Groesse
   aendern (s.o.), sondern das FERTIG gerenderte Iframe per CSS-Transform
   (skaliert das Ergebnis als Ganzes, keine Neu-Letterboxung) ueberskalieren
   + zentrieren -- ueberstehender Rand wird vom overflow: hidden oben
   abgeschnitten. scale(1.9) deckt den ungueenstigsten Fall (16:9 in einem
   quadratischen Rahmen braucht rechnerisch ~1.78) mit Reserve ab -- bei
   4:3-Videos wird dadurch etwas mehr Bildrand weggeschnitten, aber
   randfuellend statt mit schwarzen Balken ist hier die bessere Optik. Live
   an drei echten Songs (16:9 und 4:3) auf driftware.online getestet. */
.dj-vinyl-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform: scale(1.9);
  transform-origin: center center;
}
.dj-vinyl-video-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26%;
  box-sizing: border-box;
}
.dj-vinyl-video-logo svg { width: 100%; height: 100%; }
.dj-vinyl-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  /* Nutzerwunsch (10.9.): "der weisse Punkt rotiert auch nicht mehr auf dem
     aktiven Player" -- bekannter Safari/WebKit-Bug: CSS-Animationen unter
     einem gezoomten Vorfahren (siehe .dj-player { zoom: 0.72 }) laufen dort
     teils nicht. will-change zwingt einen eigenen Compositing-Layer, behebt
     das zuverlaessig. */
  will-change: transform;
}
.dj-vinyl-disc.playing .dj-vinyl-ring {
  animation: dj-spin 2.6s linear infinite;
}
@keyframes dj-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.dj-vinyl-dot {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.dj-vinyl-disc.playing .dj-vinyl-dot {
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.7);
}
.dj-vinyl-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.dj-deck-loaded .dj-vinyl-hint { opacity: 0; }
/* Faengt drop-Events fuer ein Deck ab, dessen YouTube-iframe sonst den
   dragover/drop schlucken kann (siehe dragstart-Kommentar in decades.js).
   Liegt normal inaktiv (pointer-events: none) ueber dem Deck und wird nur
   waehrend eines echten Song-Drags (body.dnd-dragging) klickbar/droppable. */
.dj-vinyl-dragshield {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}
body.dnd-dragging .dj-vinyl-dragshield { pointer-events: auto; }
/* Jog-Flaeche ueber dem Plattenteller (siehe ccWireJog) */
.cc-jog { position: absolute; inset: 8px; border-radius: 50%; z-index: 4; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.cc-jog.cc-jog-on { cursor: grabbing; box-shadow: 0 0 0 2px var(--dc), 0 0 22px color-mix(in srgb, var(--dc) 70%, transparent); }
body.dnd-dragging .cc-jog { pointer-events: none; }

/* Digitales Display (wie eine alte Autoradio-/Weckerklok-LCD-Anzeige) fuer
   Titel/Interpret/Restzeit/BPM -- per Klick durchschaltbar zwischen vier
   Farben (siehe wireDigitalDisplay in decades.js), Wahl bleibt pro Deck in
   localStorage erhalten. Anders als vorher (unterschiedliche Textfarben je
   Zeile) leuchtet im Digital-Look die GESAMTE Anzeige in nur einer Farbe --
   genau wie bei einem echten LCD-Display, das nur eine Hintergrundbeleuchtung
   hat. */
.dj-deck-info {
  position: relative;
  text-align: left;
  min-height: 26px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 18px 6px 8px;
  border-radius: 5px;
  background: #04120e;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.65);
  font-family: 'Courier New', monospace;
  cursor: pointer;
  --digital-fg: #4ade80;
}
.dj-deck-info:hover { border-color: var(--digital-fg); }
.dj-digital-swatches {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dj-digital-swatch {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 5px;
  height: 5px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
}
.dj-digital-swatch[data-color="green"] { background: #4ade80; }
.dj-digital-swatch[data-color="blue"] { background: #38bdf8; }
.dj-digital-swatch[data-color="yellow"] { background: #facc15; }
.dj-digital-swatch[data-color="orange"] { background: #fb923c; }
.dj-digital-swatch:hover { transform: scale(1.25); }
.dj-digital-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 4px rgba(255,255,255,0.7); }
.dj-deck-info[data-digital="blue"] { --digital-fg: #38bdf8; }
.dj-deck-info[data-digital="green"] { --digital-fg: #4ade80; }
.dj-deck-info[data-digital="yellow"] { --digital-fg: #facc15; }
.dj-deck-info[data-digital="orange"] { --digital-fg: #fb923c; }
.dj-deck-info strong {
  display: block;
  /* Nutzerwunsch (10.9.): "die Schrift ist jetzt auch kleiner, kann etwas
     groesser werden" -- Basisgroesse angehoben (Player insgesamt haengt an
     .dj-player { zoom: 0.72 }, siehe dort), damit Titel/Interpret nach dem
     Zoom wieder angenehm lesbar bleiben. */
  font-size: 16px;
  font-weight: 700;
  color: var(--digital-fg);
  text-shadow: 0 0 6px var(--digital-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.02em;
}
.dj-deck-info span {
  display: block;
  font-size: 13px;
  color: var(--digital-fg);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dj-deck-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.dj-deck-remaining {
  display: block;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--digital-fg);
  text-shadow: 0 0 6px var(--digital-fg);
  min-height: 14px;
}
.dj-deck-bpm {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--digital-fg);
  opacity: 0.9;
  min-height: 13px;
}
.dj-deck-bpm svg { width: 11px; height: 11px; flex-shrink: 0; }

.dj-deck-controls { display: flex; align-items: center; gap: 8px; }
.dj-deck-controls button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(0,0,0,0.18)), var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.35);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dj-deck-controls button svg { width: 15px; height: 15px; }
.dj-deck-controls button:hover { border-color: var(--accent); }
.dj-deck-controls button[id$="-toggle"] {
  background: #ff0000;
  color: #fff;
  border-color: #ff0000;
  width: 40px;
  height: 40px;
  font-size: 16px;
}
.dj-deck-controls button[id$="-toggle"] svg { width: 18px; height: 18px; }

.dj-master {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 13px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.25);
}
.dj-crossfader { display: flex; align-items: center; gap: 7px; }
.dj-crossfader-label { font-size: 12px; font-weight: 800; color: var(--muted); }
#dj-crossfader, #dj-master-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  cursor: pointer;
  margin: 0;
}
#dj-crossfader::-webkit-slider-thumb, #dj-master-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #bbb 0%, #888 30%, #d6d6d6 50%, #d1d1d1 51%, #f0f0f0 100%);
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  cursor: pointer;
}
#dj-crossfader::-moz-range-track, #dj-master-volume::-moz-range-track { height: 4px; background: var(--border); border-radius: 2px; }
#dj-crossfader::-moz-range-thumb, #dj-master-volume::-moz-range-thumb {
  width: 16px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #bbb 0%, #888 30%, #d6d6d6 50%, #d1d1d1 51%, #f0f0f0 100%);
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dj-volume { display: flex; align-items: center; gap: 8px; }
.dj-volume-label { display: flex; align-items: center; color: var(--muted); }
.dj-volume-label svg { width: 16px; height: 16px; }

.dj-autofade-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.dj-autofade-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }
.dj-autofade-toggle.active {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}
.dj-autofade-toggle:hover { border-color: var(--accent); }
.dj-fade-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dj-manual-fade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #ff0000;
  background: #ff0000;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.dj-manual-fade-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.dj-manual-fade-btn:hover { transform: scale(1.06); }
.dj-manual-fade-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.dj-manual-fade-btn.blocked { animation: dj-fade-blocked-shake 0.4s ease; }
@keyframes dj-fade-blocked-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* BPM-Sync-Flyout: steht links neben der Player-Spalte im selben
   90px-Streifen, den vorher das Ambient-Panel belegt hat (siehe
   body padding-right oben) — nur auf breiten Screens, siehe Media-Query. */
.dj-tools-panel {
  display: none;
}
.dj-tools-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
}
.dj-bpm-readout { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dj-bpm-readout-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'Courier New', monospace;
  background: #04120e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 5px 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.dj-bpm-readout-label { font-size: 9px; font-weight: 800; color: var(--muted); }
.dj-bpm-readout-value { font-size: 12px; font-weight: 800; color: #f5a623; font-variant-numeric: tabular-nums; }
.dj-bpm-match {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}
.dj-bpm-match.ok { color: #22c55e; }
.dj-bpm-sync-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.12);
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.dj-bpm-sync-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.dj-bpm-sync-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(124,92,255,0.2); }
.dj-bpm-sync-btn:disabled { opacity: 0.35; cursor: default; }

/* Song-Kacheln sind draggable, wenn sie ein Video haben (siehe decades.js) */
.song-tile[draggable="true"] { cursor: grab; }
.song-tile.dragging { opacity: 0.4; }

/* Breite Sidebar-Ansicht (>=1101px), aber wenig Hoehe -- z.B. iPad im
   Querformat (Safari-Chrome frisst zusaetzlich Hoehe von den ohnehin nur
   ~820-834px). Die rechte Spalte bleibt bestehen (siehe oben), wird aber
   kompakter, damit beide Decks + Mastersektion ohne internes Scrollen auf
   einen Bildschirm passen.
   "and (pointer: coarse)" ist WICHTIG: eine reine max-height-Abfrage kann
   nicht zwischen einem echten iPad im Querformat und einem stinknormalen,
   nicht maximierten Desktop-Browserfenster unterscheiden -- beides ist
   fuer CSS einfach "Fensterhoehe <= 860px". Genau DAS ist der Bug, der
   die Player-Verbreiterung dieser Session ausgehebelt hat: bei 1634x858px
   Fenstergroesse (ganz normales, leicht verkleinertes Browserfenster,
   keinerlei iPad) griff trotzdem diese "iPad-Kompakt"-Regel und
   quetschte Vinyl (92px statt bis zu 200px), Deck-Abstaende (2px statt
   14px+) etc. wieder auf iPad-Niveau zusammen -- unabhaengig von der
   tatsaechlichen Fensterbreite. pointer:coarse ist auf einem Touchscreen
   (iPad) wahr, auf einem Desktop mit Maus/Trackpad dagegen immer falsch
   -- damit greift die Kompakt-Optik nur noch fuer echte Touch-Geraete
   mit wenig Hoehe, nicht mehr fuer jedes schmale/kurze Desktop-Fenster. */
@media (min-width: 1101px) and (max-height: 860px) and (pointer: coarse) {
  .dj-player { padding: 6px 10px 8px; }
  .dj-decks { gap: 2px; }
  .dj-deck { gap: 2px; }
  .dj-deck-label { font-size: 9px; }
  .dj-deck-top { gap: 6px; }
  .dj-vinyl { width: 92px; height: 92px; }
  .dj-vinyl-hint { font-size: 9px; }
  .dj-waveform { width: 92px; height: 22px; }
  .dj-pitch { width: 132px; gap: 2px; }
  .dj-pitch-display { font-size: 8px; padding: 3px 6px; }
  .dj-knob-wrap { padding-top: 2px; }
  .dj-knob { width: 34px; height: 34px; }
  .dj-knob-ticks span:nth-child(1) { transform: rotate(-135deg) translate(0, -19px); }
  .dj-knob-ticks span:nth-child(2) { transform: rotate(-67.5deg) translate(0, -19px); }
  .dj-knob-ticks span:nth-child(3) { transform: rotate(0deg) translate(0, -19px); }
  .dj-knob-ticks span:nth-child(4) { transform: rotate(67.5deg) translate(0, -19px); }
  .dj-knob-ticks span:nth-child(5) { transform: rotate(135deg) translate(0, -19px); }
  .dj-knob-pointer { height: 8px; top: 3px; }
  .dj-deck-info { min-height: 0; }
  .dj-deck-info strong { font-size: 11px; }
  .dj-deck-info span { font-size: 10px; }
  .dj-deck-remaining { font-size: 9px; min-height: 0; margin-top: 0; }
  .dj-deck-bpm { font-size: 9px; min-height: 0; margin-top: 0; }
  .dj-deck-controls { gap: 5px; }
  .dj-deck-controls button { width: 26px; height: 26px; }
  .dj-deck-controls button svg { width: 12px; height: 12px; }
  .dj-deck-controls button[id$="-toggle"] { width: 32px; height: 32px; }
  .dj-deck-controls button[id$="-toggle"] svg { width: 15px; height: 15px; }
  .dj-master { padding: 5px 10px; gap: 4px; }
  .dj-autofade-toggle { padding: 3px 9px; font-size: 10px; }
  .dj-manual-fade-btn { width: 26px; height: 26px; }
  .dj-tools-panel { padding: 8px 8px; gap: 8px; }
  .dj-bpm-readout { gap: 5px; }
  .dj-bpm-readout-row { padding: 3px 3px; }
}

/* Unter 1100px ist rechts kein Platz fuer eine 360px-Spalte. FRUEHER klappte
   der Player hier in eine fixierte Leiste am unteren Bildschirmrand
   (position: fixed + max-height in vh) -- das Problem dabei: position:fixed
   richtet sich IMMER nach dem sichtbaren Viewport, nie nach dem
   Seiteninhalt oder dem Scrollstand. Egal wie hoch/niedrig max-height
   gesetzt wurde, es deckte IMMER einen festen Batzen vom unteren
   Bildschirmrand ab -- bei schmalem Browserfenster/iPad lagen Suchfeld,
   Dekaden-Reihe, Ambient/Mood-Dropdown, "Dekade verbinden", Genre-Dropdown
   und "Auswahl senden" direkt darunter und waren dauerhaft verdeckt, ganz
   unabhaengig vom gewaehlten Prozentwert. Das war der wiederkehrende
   "Player/Warteschlange"-Bug. Jetzt stattdessen ganz normaler Seitenfluss
   (position: static): der Player sitzt als eigener Block am Ende der
   Seite, deckt dadurch NIE etwas anderes ab -- man scrollt einfach zu ihm
   runter statt dass er permanent im Weg schwebt. */
@media (max-width: 1100px) {
  body { padding-right: 0; padding-bottom: 0; }
  .dj-player {
    /* relative statt static: bleibt im normalen Seitenfluss (kein
       Ueberdecken mehr), behaelt aber einen Positionierungskontext fuer
       den Akzentstrich (::before, position:absolute) am oberen Rand. */
    position: relative;
    width: auto;
    max-height: none;
    overflow-y: visible;
    border-left: none;
    border-top: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    padding: 8px 16px 10px;
    margin-top: 16px;
    /* Nutzerfeedback (21.9., Mobile/Safari): Vinyl/Waveform wirkten trotz
       zentriertem Code sichtbar verschoben -- der zoom:0.72 der
       Basisregel oben (fuer die Desktop-Sidebar gedacht, damit beide
       Decks ohne Scroll passen) wurde hier NIE zurueckgesetzt und lief
       im gestapelten Mobile-Layout einfach weiter mit. Im normalen
       Seitenfluss (beliebig hoch, kein Scroll-Zwang) bringt der Zoom
       hier nichts, macht nur alles kleiner -- und WebKit/Safari hat
       bekannte Darstellungs-Bugs bei zoom + verschachteltem Flexbox
       (gap/justify-content), was in Chrome/Chromium nicht auffaellt, in
       Safari aber zu genau so einer sichtbaren Verschiebung fuehren
       kann. Deshalb hier explizit zurueckgesetzt. */
    zoom: 1;
  }
  .dj-player::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
  }
  /* Frueher hier extra klein geschrumpft (Vinyl 96px, enge Abstaende),
     NUR damit beide Decks nebeneinander noch in die alte Hoehen-Bremse
     (60vh, dann 42vh) des fixierten Drawers passten -- siehe Kommentar bei
     .dj-player oben. Diese Hoehen-Bremse gibt es nicht mehr (normaler
     Seitenfluss, beliebig hoch), also gibt es auch keinen Grund mehr, die
     Decks klein zu quetschen. Jetzt gestapelt und in normaler/grosser
     Groesse -- genau das, was als "Playe zusammengerafft" bemaengelt
     wurde. */
  .dj-decks {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .dj-deck { width: 100%; max-width: 360px; }
  /* Nutzerwunsch (21.9.): "kannst du das nicht alle zentrieren" -- im
     gestapelten Mobile-/Tablet-Layout stand "DECK A"/"DECK B" plus die
     Titel/Interpret-Anzeige links buendig (Basisregel .dj-deck-head oben,
     fuer die Desktop-Sidebar so gedacht), waehrend Vinyl/Waveform/Pitch
     darunter zentriert waren -- wirkte schief. Nur hier (gestapeltes
     Layout) alles mittig. */
  .dj-deck-head { align-items: center; text-align: center; }
  .dj-master { width: 100%; max-width: 360px; margin: 4px auto 0; }
  .dj-tools-panel { display: none !important; }
}

@media (min-width: 1101px) {
  .dj-tools-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: fixed;
    top: 0;
    /* .dj-tools-panel haengt im DOM UNTER .dj-master, also innerhalb des
       gezoomten .dj-player (siehe .dj-player { zoom: 0.72 } oben) -- ein
       "position: fixed"-Nachfahre eines gezoomten Vorfahren wird von
       Chromium trotzdem mitskaliert (obwohl das eigene computed "zoom"
       hier 1 bleibt): "right: 370px" landete dadurch effektiv bei
       370px * 0.72 = 266px vom rechten Rand -- unabhaengig davon, wie
       breit .dj-player selbst gerade ist. Seit .dj-player wieder auf
       volle 370px sichtbare Breite gebracht wurde (s.o.), driftete
       dieses Panel dadurch MITTEN in den Player hinein statt links davon
       zu sitzen. Gleicher Trick wie bei .dj-player: Wert vorher durch
       0.72 teilen, damit nach der (geerbten) Stauchung wieder echte
       370px/90px herauskommen. */
    right: calc(370px / 0.72);
    bottom: 0;
    width: calc(90px / 0.72);
    overflow-y: auto;
    z-index: 249;
    background: linear-gradient(200deg, var(--panel) 0%, var(--bg) 130%);
    border-left: 1px solid var(--border);
    padding: 14px 8px;
    box-shadow: -8px 0 24px rgba(0,0,0,0.3);
  }
  /* Hero-Header war weiterhin "margin: 0 auto" (Basisregel oben) -- bei
     Sidebar-Layout stand er dadurch mittig in der Content-Flaeche links
     vom Player, WAEHREND main.decade-main (siehe dort) schon rechts an
     den Player/Tools-Panel andockt. Header und Inhalt liefen dadurch
     nicht mehr auf gleicher Kante, sah nach zwei verschiedenen Layouts
     uebereinander aus. Nur hier (>1100px, wo die Sidebar existiert)
     denselben Rechts-Andock-Trick wie main.decade-main -- unter 1100px
     (kein Sidebar, volle Breite) bleibt der Hero-Header normal mittig. */
  header.decade-header { margin: 0 0 0 auto; }
}

@media (max-width: 640px) {
  /* Kopfbereich: auf dem Handy soll nicht der halbe erste Screen aus
     Icon + Ueberschrift bestehen. */
  .decade-header { padding: 16px 14px 10px; }
  .app-icon-hero { width: 40px; height: 40px; border-radius: 11px; font-size: 18px; margin-bottom: 6px; }
  .app-icon-hero svg { width: 18px; height: 18px; }
  .decade-logo { font-size: 19px; margin-bottom: 3px; }
  .decade-years { font-size: 10px; margin-bottom: 4px; }
  .decade-tagline { font-size: 12px; margin-bottom: 8px; }
  .badge { font-size: 11px; padding: 5px 10px; }
  /* Auf dem Handy nicht mitscrollen lassen — sonst liegt der Block
     staendig ueber dem Seiteninhalt. */
  .utility-block { position: absolute; top: 10px; gap: 8px; }
  .utility-icon { width: 34px; height: 34px; }
  .utility-icon svg { width: 15px; height: 15px; }
  .utility-label { font-size: 8px; }
  .gen-switch-rows { flex-direction: column; }
  .gen-dd { flex: 0 0 auto; min-width: 0; }
  .gen-dd-trigger { padding: 6px 22px 6px 10px; }
  .gen-dd-value { font-size: 11px; }
  main.decade-main { padding: 0 12px 32px; }
  .generator { padding: 16px 12px; }
  .generator h2 { font-size: 17px; }
  .generator .sub { font-size: 12px; margin-bottom: 12px; }
  .theme-btn { font-size: 12px; padding: 7px 11px; gap: 6px; }
  .theme-btn-icon { width: 13px; height: 13px; }

  /* Songliste: volle Breite nutzen, Zeilen etwas luftiger antippbar */
  .song-tile { padding: 5px 6px; }
  .song-tile-text { max-width: none; flex: 1; }
  .song-grid { max-height: 60vh; }
  .gen-history ul { max-height: 160px; }

  /* Deck-Groesse/Vinyl bleiben ab hier wie im 1100px-Block (gestapelt,
     grosszuegig) -- fruehere Extra-Schrumpfstufe hier (48%-Spalten, 84px
     Vinyl) gab's nur wegen der alten Hoehen-Bremse des fixierten Players,
     die es nicht mehr gibt (siehe Kommentar im 1100px-Block). */
  .dj-crossfader { width: 100%; justify-content: center; }
  .dj-volume { width: 100%; justify-content: center; }
  #dj-crossfader, #dj-master-volume { width: 62%; }
  /* 16px verhindert, dass iOS beim Antippen ins Feld hineinzoomt */
  .generator-search .search-input { font-size: 16px; padding: 9px 12px 9px 34px; }
}

@media (max-width: 900px) {
  /* Gestapelt statt nebeneinander. align-items muss hier von flex-start
     auf stretch wechseln: sonst richtet sich die Spaltenbreite nach der
     laengsten Songzeile statt nach dem Bildschirm — die Seite wird dann
     breiter als das Handy-Display. */
  .generator-body { flex-direction: column; align-items: stretch; }
  .song-grid { max-width: none; width: 100%; box-sizing: border-box; }
  .gen-history { width: 100%; box-sizing: border-box; }
  .gen-history ul { max-height: 220px; }
}

/* Favoriten-Herz */
.song-tile-fav { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: var(--text); opacity: 0.55; cursor: pointer; flex-shrink: 0; transition: opacity .12s ease, color .12s ease, transform .12s ease; }
.song-tile-fav:hover, .song-tile-fav:focus-visible { opacity: 1; transform: scale(1.15); }
.song-tile-fav.on { color: #ff4d6d; opacity: 1; }
.generator-actions button.active { background: rgba(255,77,109,0.18); border-color: #ff4d6d; }

/* "Passt nicht"-Knopf */
.song-tile-nofit { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--text); opacity: 0.4; cursor: pointer; flex-shrink: 0; transition: opacity .12s ease, color .12s ease; }
.song-tile-nofit:hover, .song-tile-nofit:focus-visible { opacity: 1; color: #f59e0b; }
.song-tile.flagged-out { opacity: 0; transform: scale(0.96); transition: opacity .2s ease, transform .2s ease; }

/* Sleep-Timer */
.dj-sleep-btn { width: auto; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: transparent; border: 1px solid rgba(255,255,255,0.18); color: var(--text); }
.dj-sleep-btn:hover { border-color: var(--accent); }
.dj-sleep-btn.active { background: rgba(245,158,11,0.18); border-color: #f59e0b; color: #f59e0b; }

/* Kompaktes Handy-Deck (nur html[data-device="phone"]) */
.dj-phone-toggle { display: none; }
.dj-mini { display: none; }
html[data-device="phone"] .dj-phone-toggle {
  display: block; width: 100%; padding: 12px 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent; color: var(--text); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer;
}
/* eingeklappt: Decks bleiben im Layout (Player laufen weiter), nur aus dem Bild geschoben */
html[data-device="phone"] .dj-player.dj-phone:not(.dj-expanded) .dj-decks {
  position: absolute; left: -200vw; top: 0; width: 100vw; pointer-events: none;
}
html[data-device="phone"] .dj-player.dj-phone:not(.dj-expanded) { height: auto; overflow: visible; }
html[data-device="phone"] .dj-mini {
  display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--panel, #16171d);
  border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 -6px 18px rgba(0,0,0,0.35);
}
html[data-device="phone"] .dj-mini[hidden] { display: none; }
.dj-mini-cover { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.dj-mini-text { flex: 1; min-width: 0; }
.dj-mini-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-mini-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-mini-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; flex-shrink: 0; }
.dj-mini-play { background: #ff0000; border-color: #ff0000; color: #fff; font-size: 14px; }
html[data-device="phone"] body.has-dj-mini { padding-bottom: 72px; }

/* Player-Knoepfe: auf dem Web-Player (Maus) groesser */
@media (pointer: fine) {
  .dj-manual-fade-btn { width: 46px; height: 46px; }
  .dj-manual-fade-btn svg { width: 20px; height: 20px; }
  .dj-autofade-toggle { padding: 11px 20px; font-size: 16px; }
  .dj-autofade-toggle svg { width: 18px; height: 18px; }
  .dj-sleep-btn { width: auto; height: 46px; padding: 0 22px; font-size: 17px; }
  .dj-fade-row { gap: 14px; flex-wrap: wrap; }
  .dj-deck-controls button { width: 46px; height: 46px; }
  .dj-deck-controls button svg { width: 20px; height: 20px; }
  .dj-deck-controls button[id$="-toggle"] { width: 56px; height: 56px; }
  .dj-deck-controls button[id$="-toggle"] svg { width: 26px; height: 26px; }
}

/* Mixer (Mittelteil) am Web-Player groesser */
@media (pointer: fine) {
  .dj-master { gap: 16px; padding: 18px 22px; }
  .dj-crossfader { gap: 10px; }
  .dj-crossfader-label { font-size: 20px; }
  #dj-crossfader, #dj-master-volume { height: 8px; border-radius: 4px; }
  #dj-crossfader::-webkit-slider-thumb, #dj-master-volume::-webkit-slider-thumb { width: 28px; height: 40px; border-radius: 5px; }
  #dj-crossfader::-moz-range-track, #dj-master-volume::-moz-range-track { height: 6px; }
  #dj-crossfader::-moz-range-thumb, #dj-master-volume::-moz-range-thumb { width: 28px; height: 40px; border-radius: 5px; }
  .dj-volume { gap: 10px; }
  .dj-volume-label svg { width: 28px; height: 28px; }
  .dj-bpm-readout-label { font-size: 11px; }
  .dj-bpm-readout-value { font-size: 15px; }
  .dj-bpm-match { font-size: 12px; }
  .dj-bpm-sync-btn { padding: 8px 14px; font-size: 13px; }
}

/* Cover-Fallback */
.song-tile-media.cover-fallback { border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.cover-fallback-ini { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* ---- Stimmung + Genre: zwei klare Auswahlfelder nebeneinander ---------
   Vorher zwei schmale Pillen-Balken, getrennt durch die "Dekade verbinden"-
   Zeile -- sie gingen in der Uebersicht unter. Jetzt ein gemeinsamer Block:
   Beschriftung klein darueber, Auswahl gross darunter, farbiger Rand links. */
.gen-selectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 18px;
}
.gen-selectors .gen-switch-rows,
.gen-selectors .gen-genre-row { margin: 0; display: block; min-width: 0; }
.gen-selectors .gen-dd,
.gen-selectors .gen-genre-dd { flex: none; width: 100%; min-width: 0; max-width: none; }
.gen-selectors .gen-dd-trigger {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 10px 40px 10px 16px;
  border-radius: 14px;
  border-left-width: 4px;
  background-color: rgba(255,255,255,0.05);
  background-position: right 16px center;
  background-size: 16px;
}
.gen-selectors .gen-dd-trigger:hover,
.gen-selectors .gen-dd.open .gen-dd-trigger { background-color: rgba(255,255,255,0.09); }
.gen-selectors .gen-dd-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gen-selectors .gen-dd-value {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
}
.gen-selectors .gen-dd-list { max-height: 320px; }
.gen-selectors .gen-dd-item { padding: 9px 12px; font-size: 13px; }
@media (max-width: 640px) {
  .gen-selectors { grid-template-columns: 1fr; gap: 10px; }
  .gen-selectors .gen-dd-trigger { min-height: 56px; }
  .gen-selectors .gen-dd-value { font-size: 15px; }
}

/* ---- LED-Look (Cool Blue): Stimmung + Genre als blaue LED-Displays -------
   Display zeigt die Auswahl in leuchtender Schrift, Pfeile schalten durch,
   die aufgeklappte Liste ist ein Feld aus LED-Tasten. */
.gen-selectors .gen-dd-trigger {
  position: relative;
  padding: 12px 108px 12px 18px;
  border: 1px solid #1d4a78;
  border-left-width: 1px;
  border-radius: 12px;
  background-color: #040d1a;
  background-image: repeating-linear-gradient(0deg, rgba(80,170,255,0.045) 0 1px, transparent 1px 3px);
  background-position: 0 0;
  background-size: auto;
  box-shadow: inset 0 0 26px rgba(0,0,0,0.85), 0 0 0 1px rgba(40,140,255,0.08), 0 0 18px -6px rgba(40,150,255,0.55);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.gen-selectors .gen-dd-trigger:hover,
.gen-selectors .gen-dd.open .gen-dd-trigger { background-color: #061427; border-color: #2f7ad0; }
.gen-selectors .gen-dd-label { color: #3f86c7; letter-spacing: 0.22em; font-size: 10px; }
.gen-selectors .gen-dd-value {
  color: #7fdcff;
  font-size: 17px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(70,190,255,0.9), 0 0 18px rgba(30,140,255,0.6);
}
.gen-selectors .gen-dd-value.placeholder { color: #2f6694; text-shadow: none; font-weight: 600; }
.gen-dd-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid #1d4a78;
  background: #07182c;
  color: #6fd3ff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(70,190,255,0.9);
  z-index: 2;
}
.gen-dd-step:hover { background: #0d2b4d; border-color: #3a8fe8; box-shadow: 0 0 12px -2px rgba(60,170,255,0.8); }
.gen-dd-step:active { transform: translateY(-50%) scale(0.94); }
.gen-dd-step:focus-visible { outline: 2px solid #6fd3ff; outline-offset: 2px; }
.gen-dd-prev { right: 52px; }
.gen-dd-next { right: 10px; }

.gen-selectors .gen-dd-list {
  background: #040d1a;
  border: 1px solid #1d4a78;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.6), 0 0 22px -8px rgba(40,150,255,0.6);
}
.gen-selectors .gen-dd-list:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.gen-selectors .gen-dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #12335a;
  border-left: 1px solid #12335a;
  border-radius: 9px;
  background: #07142a;
  color: #9fc4e6;
  font-size: 12.5px;
  font-weight: 600;
}
.gen-selectors .gen-dd-item::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #123a66;
}
.gen-selectors .gen-dd-item:hover { background: #0b2243; color: #d6efff; }
.gen-selectors .gen-dd-item:hover::before { background: #2c78c4; }
.gen-selectors .gen-dd-item.active {
  border-color: #3a8fe8;
  background: #0b2748;
  color: #d6f3ff;
  font-weight: 700;
}
.gen-selectors .gen-dd-item.active::before {
  background: #5fd0ff;
  box-shadow: 0 0 10px 1px rgba(80,200,255,0.95);
}
@media (max-width: 640px) {
  .gen-selectors .gen-dd-trigger { padding: 10px 100px 10px 14px; }
  .gen-selectors .gen-dd-value { font-size: 15px; }
  .gen-selectors .gen-dd-list:not([hidden]) { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* =====================================================================
   CLUB CONSOLE (9.10.) -- Nutzerwunsch: Player soll wie DJ-Software/
   Club-Hardware aussehen (Entwurf "A - Club Console" freigegeben).
   Konsole steht oben ueber die volle Breite (Deck A | Mixer | Deck B)
   statt als feste Spalte rechts. Alle Regeln haengen an #dj-player
   (ID-Spezifitaet), damit sie die aelteren Sidebar-Regeln oben inkl.
   deren Media-Queries sicher uebersteuern, ohne sie loeschen zu muessen.
   Farben: --deck-a / --deck-b (aus CC_THEMES in decades.js).
   ===================================================================== */
:root { --deck-a: var(--accent); --deck-b: var(--accent2); --cc-glow: 0; }
body { padding-right: 0 !important; }
main.decade-main, header.decade-header { margin-left: auto !important; margin-right: auto !important; }
#dj-player {
  position: relative; top: auto; right: auto; bottom: auto; width: auto; zoom: 1; overflow: visible;
  z-index: 20; padding: 0; border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), color-mix(in srgb, var(--panel) 70%, #000);
  border-bottom: 1px solid rgba(0,0,0,0.6);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px rgba(0,0,0,0.35);
}
#dj-player::before { display: none; }
#dj-player .dj-decks {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr);
  gap: 0; align-items: stretch; max-width: 1680px; margin: 0 auto; padding-top: 58px;
}
#dj-player .dj-deck, #dj-player .dj-master {
  position: relative; max-width: none; width: auto; margin: 0;
  padding: 14px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 0; border: 0;
}
#dj-player .dj-master { border-left: 1px solid rgba(0,0,0,0.6); border-right: 1px solid rgba(0,0,0,0.6); box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), inset -1px 0 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.06); }
#deck-A { --dc: var(--deck-a); }
#deck-B { --dc: var(--deck-b); }
#dj-player .dj-deck { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cc-screw { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9aa0aa, #3a3e46); box-shadow: 0 1px 1px rgba(0,0,0,0.8); }
.cc-screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: rgba(0,0,0,0.6); transform: rotate(35deg); }
.cc-label { font: 700 8.5px 'Inter', sans-serif; letter-spacing: 0.14em; color: var(--muted); opacity: 0.8; }

/* --- LCD-Kopf --- */
#dj-player .dj-deck-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  flex-direction: row; text-align: left;
  background: linear-gradient(180deg, #05070a, #0a0d12); border-radius: 9px; padding: 9px 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
#dj-player .dj-deck-head::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }
#dj-player .dj-deck-label {
  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  font: 900 18px var(--font-display); letter-spacing: 0; color: #050608; background: var(--dc); text-transform: none;
  box-shadow: 0 0 16px color-mix(in srgb, var(--dc) 60%, transparent), inset 0 -2px 0 rgba(0,0,0,0.25);
}
#dj-player .dj-deck-info { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; display: block; cursor: default; }
#dj-player .dj-deck-info strong { display: block; font: 700 16px/1.25 var(--font-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 calc(4px + var(--cc-glow) * 10px) color-mix(in srgb, var(--dc) 60%, transparent); letter-spacing: -0.01em; }
#dj-player .dj-deck-info > span { display: block; font: 500 12px 'Inter', sans-serif; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dj-player .dj-deck-meta, #dj-player .dj-digital-swatches { display: none; }
.cc-time { text-align: right; font-variant-numeric: tabular-nums; }
.cc-time b { display: block; font: 700 26px/1 'Courier New', monospace; letter-spacing: -0.04em; color: var(--dc); text-shadow: 0 0 12px color-mix(in srgb, var(--dc) 70%, transparent); }
.cc-time small { font: 600 10px 'Courier New', monospace; color: var(--muted); }
.cc-bpm { text-align: right; min-width: 74px; }
.cc-bpm b { display: block; font: 800 28px/1 var(--font-display); color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(6px + var(--cc-glow) * 14px) color-mix(in srgb, var(--dc) 55%, transparent); }
.cc-bpm small { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font: 600 9px 'Inter', sans-serif; letter-spacing: 0.14em; color: var(--muted); margin-top: 3px; }
.cc-beat { display: inline-flex; gap: 2px; }
.cc-beat i { width: 5px; height: 5px; border-radius: 1px; background: rgba(255,255,255,0.12); }
.cc-beat i.on { background: var(--dc); box-shadow: 0 0 6px var(--dc); }

/* --- Wellenform --- */
#dj-player .dj-deck-mid { display: block; min-height: 0; width: auto; position: relative; }
#dj-player .dj-waveform {
  width: 100%; height: 84px; margin: 0; border-radius: 8px; cursor: pointer;
  background: radial-gradient(120% 100% at 50% 50%, #0b0e14, #040508);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.05);
}
#dj-player .dj-waveform canvas { width: 100%; height: 100%; display: block; }

/* --- Plattenteller + Pads --- */
#dj-player .dj-deck-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; justify-content: stretch; }
#deck-B .dj-deck-top { grid-template-columns: minmax(0, 1fr) auto; }
#deck-B .dj-vinyl { order: 2; }
#dj-player .dj-vinyl { width: 196px; height: 196px; position: relative; flex-shrink: 0; }
.cc-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; z-index: 3; }
.cc-ring circle { fill: none; stroke-width: 3.5; }
.cc-ring .bg { stroke: rgba(255,255,255,0.07); }
.cc-ring .fg { stroke: var(--dc); stroke-linecap: round; filter: drop-shadow(0 0 4px var(--dc)); transition: stroke-dashoffset 0.2s linear; }
.cc-platter {
  position: absolute; inset: 8px; border-radius: 50%;
  background: conic-gradient(from 0deg, #8b9099, #e6e8ec, #7c818a, #d5d8de, #868b94, #eceef1, #8b9099);
  box-shadow: 0 6px 18px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.cc-strobe { position: absolute; inset: 2px; border-radius: 50%; background: repeating-conic-gradient(rgba(20,22,26,0.85) 0 2.2deg, transparent 2.2deg 6deg); -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 6px), #000 calc(50% - 6px) calc(50% - 1px), transparent calc(50% - 1px)); mask: radial-gradient(circle, transparent 0 calc(50% - 6px), #000 calc(50% - 6px) calc(50% - 1px), transparent calc(50% - 1px)); }
.dj-vinyl-disc.playing ~ .cc-platter, .cc-platter { animation: none; }
#dj-player .dj-vinyl-disc {
  position: absolute; inset: 18px; width: auto; height: auto;
  background: repeating-radial-gradient(circle, #0c0d10 0 1.6px, #17181d 2px 2.6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.8), 0 0 0 2px rgba(0,0,0,0.5);
}
#dj-player .dj-vinyl-video { width: 58%; height: 58%; box-shadow: 0 0 0 3px #0a0a0a, 0 0 0 4px rgba(255,255,255,0.12); }
#dj-player .dj-vinyl-dot { background: var(--dc); width: 4px; height: 18px; border-radius: 2px; top: 6px; opacity: 0.35; }
#dj-player .dj-vinyl-disc.playing .dj-vinyl-dot { opacity: 1; background: var(--dc); box-shadow: 0 0 8px var(--dc); }
#dj-player .dj-vinyl-disc.playing .dj-vinyl-ring { animation-duration: 1.8s; }
#dj-player .dj-vinyl-hint { inset: 18px; font-size: 11px; z-index: 2; }
#dj-player .dj-vinyl.drag-over { box-shadow: 0 0 0 3px var(--dc), 0 0 30px var(--dc); }

.cc-pads { display: grid; gap: 10px; min-width: 0; }
#dj-player .dj-deck-controls { display: flex; gap: 9px; align-items: center; justify-content: flex-start; }
#dj-player .cc-pad {
  height: 40px; flex: 1; min-width: 0; border-radius: 8px; border: 0; position: relative; cursor: pointer; padding: 0 6px;
  background: linear-gradient(180deg, #2a2d34, #17191e); color: rgba(255,255,255,0.6);
  font: 700 11px 'Inter', sans-serif; letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.6);
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
#dj-player .cc-pad:hover:not(:disabled) { color: #fff; }
#dj-player .cc-pad:active:not(:disabled) { transform: translateY(1px); }
#dj-player .cc-pad:disabled { opacity: 0.45; cursor: default; }
#dj-player .cc-pad svg { width: 16px; height: 16px; }
#dj-player .cc-pad.lit { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 80%, #fff), var(--pc)); text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.25), 0 0 16px color-mix(in srgb, var(--pc) 65%, transparent), 0 2px 4px rgba(0,0,0,0.5); }
#dj-player .cc-play, #dj-player .cc-cuebtn { flex: none; width: 62px; height: 62px; border-radius: 50%; padding: 0; }
#dj-player .cc-cuebtn { color: var(--dc); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.6); }
#dj-player .cc-play svg { width: 26px; height: 26px; }
#dj-player .dj-deck-loaded .dj-vinyl-disc.playing ~ * .cc-play, #dj-player .cc-play.on { --pc: var(--dc); }
#dj-player .cc-small { flex: none; width: 42px; }
#deck-A:has(.dj-vinyl-disc.playing) .cc-play, #deck-B:has(.dj-vinyl-disc.playing) .cc-play {
  --pc: var(--dc); color: #050608; background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 75%, #fff), var(--dc));
  animation: cc-pulse 1.8s ease-in-out infinite;
}
@keyframes cc-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, var(--dc) 55%, transparent); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 30px color-mix(in srgb, var(--dc) 90%, transparent), 0 0 0 6px color-mix(in srgb, var(--dc) 14%, transparent); } }
.cc-cues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#dj-player .cc-cue { height: 34px; font-size: 10.5px; }
#dj-player .cc-cue small { position: absolute; left: 6px; top: 3px; font-size: 8.5px; opacity: 0.75; }
#dj-player .dj-pitch { position: static; display: flex; align-items: center; gap: 10px; transform: none; }
#dj-player .dj-knob-wrap { flex: none; }
#dj-player .dj-pitch-display { position: static; transform: none; margin: 0; font: 700 12px 'Courier New', monospace; color: var(--dc); background: #05070a; padding: 4px 8px; border-radius: 5px; box-shadow: inset 0 1px 3px #000; min-width: 54px; text-align: center; }

/* --- Mixer --- */
#dj-player .dj-master { display: flex; flex-direction: column; align-items: stretch; gap: 12px; justify-content: flex-start; }
.cc-mixhead { display: flex; align-items: center; justify-content: space-between; }
.cc-mixhead > b { font: 800 11px var(--font-display); letter-spacing: 0.24em; color: var(--muted); }
.cc-master { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; background: #05070a; padding: 4px 8px; border-radius: 5px; box-shadow: inset 0 1px 3px #000; }
.cc-master em { font-style: normal; font: 700 8.5px 'Inter', sans-serif; letter-spacing: 0.12em; color: var(--muted); }
.cc-master b { font: 700 13px 'Courier New', monospace; color: var(--text); }
.cc-channels { display: flex; justify-content: center; gap: 34px; }
.cc-ch { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr auto; column-gap: 8px; row-gap: 4px; justify-items: center; }
.cc-ch .cc-label { grid-column: 1 / -1; font: 900 12px var(--font-display); color: var(--dc); text-shadow: 0 0 8px var(--dc); opacity: 1; }
.cc-ch-a { --dc: var(--deck-a); } .cc-ch-b { --dc: var(--deck-b); }
.cc-ch .cc-vu, .cc-ch .cc-fader { grid-row: 1; }
.cc-ch-a .cc-vu { grid-column: 1; } .cc-ch-a .cc-fader { grid-column: 2; }
.cc-ch-b .cc-fader { grid-column: 1; } .cc-ch-b .cc-vu { grid-column: 2; }
.cc-ch .cc-label { grid-row: 2; }
.cc-vu { display: flex; flex-direction: column-reverse; gap: 2px; width: 8px; height: 112px; }
.cc-vu i { flex: 1; border-radius: 1px; background: rgba(255,255,255,0.06); }
.cc-vu i.on { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.cc-vu i.on.y { background: #facc15; box-shadow: 0 0 5px #facc15; }
.cc-vu i.on.r { background: #ef4444; box-shadow: 0 0 5px #ef4444; }
.cc-fader { width: 30px; height: 112px; position: relative; }
.cc-fader input[type=range] {
  -webkit-appearance: none; appearance: none; position: absolute; left: 50%; top: 50%; width: 112px; height: 30px; margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg); background: transparent; cursor: pointer;
}
.cc-fader input[type=range]::-webkit-slider-runnable-track { height: 5px; background: #000; border-radius: 3px; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,0.06); }
.cc-fader input[type=range]::-moz-range-track { height: 5px; background: #000; border-radius: 3px; }
.cc-fader input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 28px; margin-top: -11.5px; border-radius: 4px; border: 0; background: linear-gradient(90deg, #2f3238, #121418 45%, #2f3238); box-shadow: 0 3px 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.15), inset -11px 0 0 -10px #fff; }
.cc-fader input[type=range]::-moz-range-thumb { width: 24px; height: 28px; border-radius: 4px; border: 0; background: linear-gradient(90deg, #2f3238, #121418 45%, #2f3238); }
#dj-player .dj-crossfader { gap: 10px; }
#dj-player .dj-crossfader-label { font: 900 12px var(--font-display); }
#dj-player .dj-crossfader-label:first-child { color: var(--deck-a); text-shadow: 0 0 8px var(--deck-a); }
#dj-player .dj-crossfader-label:last-child { color: var(--deck-b); text-shadow: 0 0 8px var(--deck-b); }
#dj-player .dj-fade-row { display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 7px; }
#dj-player .dj-fade-row > * { white-space: nowrap; }
#dj-player .dj-autofade-toggle, #dj-player .dj-manual-fade-btn, #dj-player .dj-bpm-sync-btn {
  height: 32px; border-radius: 8px; border: 0; font: 700 10.5px 'Inter', sans-serif; letter-spacing: 0.06em; color: rgba(255,255,255,0.7);
  background: linear-gradient(180deg, #2a2d34, #17191e); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.6);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; width: auto;
}
#dj-player .dj-autofade-toggle svg, #dj-player .dj-manual-fade-btn svg, #dj-player .dj-bpm-sync-btn svg { width: 13px; height: 13px; }
#dj-player .dj-autofade-toggle.active { color: #fff; background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px rgba(34,197,94,0.5), 0 2px 4px rgba(0,0,0,0.5); }
#dj-player #dj-manual-fade { width: 40px; padding: 0; color: #fff; background: linear-gradient(180deg, #f87171, #dc2626); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 12px rgba(220,38,38,0.45), 0 2px 4px rgba(0,0,0,0.5); }
#dj-player .dj-sleep-btn.active { color: #fff; background: linear-gradient(180deg, #818cf8, #4f46e5); }
#dj-player .dj-volume { gap: 10px; }
#dj-player .dj-tools-panel {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "r btn" "m btn"; align-items: center; gap: 4px 10px;
  position: static; width: auto; padding: 8px 10px; border: 0; border-radius: 8px; overflow: visible; z-index: auto;
  background: #05070a; box-shadow: inset 0 1px 3px #000;
}
#dj-player .dj-tools-title { display: none; }
#dj-player .dj-bpm-readout { grid-area: r; flex-direction: row; gap: 12px; width: auto; }
#dj-player .dj-bpm-readout-row { background: none; border: 0; padding: 0; gap: 4px; }
#dj-player .dj-bpm-readout-label { color: var(--muted); }
#dj-player .dj-bpm-readout-row:first-child .dj-bpm-readout-value { color: var(--deck-a); }
#dj-player .dj-bpm-readout-row:last-child .dj-bpm-readout-value { color: var(--deck-b); }
#dj-player .dj-bpm-match { grid-area: m; font-size: 10.5px; color: var(--muted); text-align: left; background: none; border: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dj-player .dj-bpm-match.ok { color: #4ade80; }
#dj-player .dj-bpm-sync-btn { grid-area: btn; height: 30px; font-size: 10px; }
#dj-player .dj-bpm-readout-row { display: inline-flex; align-items: baseline; }
#dj-player .dj-bpm-readout-value { white-space: nowrap; font-size: 11.5px; }
#dj-player .dj-bpm-sync-btn:disabled { opacity: 0.45; }

/* --- Breakpoints --- */
@media (max-width: 1250px) {
  #dj-player .dj-vinyl { width: 170px; height: 170px; }
  #dj-player .cc-time b { font-size: 22px; }
  #dj-player .cc-bpm b { font-size: 24px; }
}
@media (max-width: 1100px) {
  #dj-player .dj-decks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 58px; }
  #dj-player .dj-master { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 24px; border: 0; border-top: 1px solid rgba(0,0,0,0.6); max-width: none; }
  #dj-player .cc-mixhead { grid-column: 1 / -1; }
  #dj-player .cc-channels { grid-row: 2 / span 4; }
  #dj-player #deck-B { grid-column: 2; grid-row: 1; }
  #dj-player .cc-time { display: none; }
  #dj-player .dj-deck-top, #deck-B .dj-deck-top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #deck-B .dj-vinyl { order: 0; }
  #dj-player .cc-pads { width: 100%; }
  #dj-player .dj-deck-controls, #dj-player .dj-pitch { justify-content: center; }
  #dj-player .dj-vinyl { width: 190px; height: 190px; }
}
@media (max-width: 760px) {
  #dj-player .dj-decks { grid-template-columns: minmax(0, 1fr); }
  #dj-player #deck-B { grid-column: 1; grid-row: auto; }
  #dj-player .dj-master { grid-row: auto; grid-template-columns: 1fr; }
  #dj-player .cc-channels { grid-row: auto; }
  #dj-player .cc-time { display: block; }
  #dj-player .dj-vinyl { width: 180px; height: 180px; }
  #dj-player .cc-play, #dj-player .cc-cuebtn { width: 54px; height: 54px; }
  #dj-player .dj-deck-top, #deck-B .dj-deck-top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #deck-B .dj-vinyl { order: 0; }
  #dj-player .cc-pads { width: 100%; }
  #dj-player .dj-deck-controls { justify-content: center; }
  #dj-player .dj-pitch { justify-content: center; }
  #dj-player .dj-deck-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  #dj-player .cc-time { display: none; }
  #dj-player .dj-deck, #dj-player .dj-master { padding: 12px; }
}
html[data-device="phone"] #dj-player .dj-decks { padding-top: 8px; }

/* =====================================================================
   THEMES pro Dekade / Stimmung (Farben kommen aus CC_THEMES in decades.js,
   hier nur Schrift + Hintergrund-Effekte + Glow-Staerke).
   ===================================================================== */
html[data-theme] body { background: var(--cc-deco, none), var(--bg); background-attachment: fixed; }
[data-theme="70er"] { --font-display: 'Source Serif 4', Georgia, serif;
  --cc-deco: radial-gradient(900px 380px at 50% -8%, rgba(228,87,46,0.22), transparent 70%); }
[data-theme="70er"] #dj-player { box-shadow: 0 3px 0 #e4572e, 0 6px 0 #f5b82e, 0 9px 0 #8a5a2b, 0 18px 40px rgba(0,0,0,0.35); margin-bottom: 9px; }
[data-theme="70er"] #dj-player .dj-deck-info strong { font-style: italic; }
[data-theme="80er"] { --font-display: 'Big Shoulders', 'Sora', sans-serif; --cc-glow: 1;
  --cc-deco: linear-gradient(180deg, transparent 55%, rgba(255,46,147,0.10)), repeating-linear-gradient(90deg, rgba(34,211,238,0.05) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, rgba(34,211,238,0.05) 0 1px, transparent 1px 60px); }
[data-theme="80er"] #dj-player .dj-deck-info strong { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 900; }
[data-theme="90er"] { --font-display: 'Space Grotesk', 'Sora', sans-serif;
  --cc-deco: repeating-conic-gradient(rgba(163,230,53,0.025) 0 25%, transparent 0 50%) 0 0 / 40px 40px; }
[data-theme="90er"] #dj-player .dj-deck-label { border-radius: 0; transform: rotate(-3deg); }
[data-theme="2000er"] { --cc-deco: radial-gradient(800px 380px at 20% -10%, rgba(56,189,248,0.2), transparent 70%), radial-gradient(700px 360px at 90% 0%, rgba(212,212,216,0.09), transparent 70%); }
[data-theme="2000er"] #dj-player .dj-deck-label { border-radius: 999px; background: linear-gradient(180deg, #fff, var(--dc)); }
[data-theme="2010er"] { --cc-deco: radial-gradient(1000px 500px at 50% 110%, rgba(251,113,133,0.14), transparent 70%); }
[data-theme="2020er"] { --cc-glow: 0.6; --cc-deco: radial-gradient(600px 300px at 15% 0%, rgba(240,171,252,0.15), transparent 70%), radial-gradient(600px 300px at 85% 100%, rgba(190,242,100,0.1), transparent 70%); }
[data-theme="christmas"] { --font-display: 'Cinzel', Georgia, serif; --cc-deco: radial-gradient(900px 420px at 50% -10%, rgba(220,38,38,0.2), transparent 70%); }
[data-theme="yoga"], [data-theme="morning"], [data-theme="cozy"], [data-theme="romantic"] { --font-display: 'Source Serif 4', Georgia, serif; }
[data-theme="yoga"] { --cc-deco: radial-gradient(800px 500px at 80% 10%, rgba(165,180,252,0.1), transparent 70%), radial-gradient(700px 500px at 10% 90%, rgba(127,200,169,0.12), transparent 70%); }
[data-theme="yoga"] #dj-player .cc-pad, [data-theme="yoga"] #dj-player .dj-autofade-toggle, [data-theme="yoga"] #dj-player .dj-manual-fade-btn { border-radius: 999px; }
[data-theme="partyhits"], [data-theme="karaoke"], [data-theme="workout"] { --font-display: 'Big Shoulders', 'Sora', sans-serif; --cc-glow: 0.8; }
[data-theme="partyhits"] { --cc-deco: conic-gradient(from 200deg at 50% -20%, rgba(255,46,147,0.16), rgba(255,138,0,0.12), rgba(124,58,237,0.16), rgba(255,46,147,0.16)); }
[data-theme="partyhits"] #dj-player .dj-deck-info strong, [data-theme="karaoke"] #dj-player .dj-deck-info strong, [data-theme="workout"] #dj-player .dj-deck-info strong { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 900; }
[data-theme="latenight"], [data-theme="gaming"] { --cc-glow: 0.6; }
[data-theme="latenight"] { --cc-deco: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 70%, #fff, transparent), radial-gradient(1px 1px at 85% 55%, #fff, transparent), radial-gradient(800px 400px at 80% -10%, rgba(99,102,241,0.22), transparent 70%); }
[data-theme="gaming"] { --cc-deco: repeating-linear-gradient(0deg, rgba(34,211,238,0.035) 0 1px, transparent 1px 4px); }
[data-theme="summer"] { --cc-deco: radial-gradient(900px 420px at 80% -10%, rgba(255,158,44,0.18), transparent 70%); }
[data-theme="chillhouse"] { --cc-deco: radial-gradient(900px 420px at 20% -10%, rgba(20,184,166,0.16), transparent 70%), radial-gradient(800px 400px at 90% 0%, rgba(249,115,22,0.1), transparent 70%); }
@media (prefers-reduced-motion: reduce) {
  #deck-A:has(.dj-vinyl-disc.playing) .cc-play, #deck-B:has(.dj-vinyl-disc.playing) .cc-play { animation: none; }
}

/* Konsole bleibt beim Scrollen fest oben (Nutzerwunsch 9.10.: "die Decks
   immer fest oben, sonst kann man aus der Liste keine Musik reinziehen").
   z-index unter dem Song-Modal (200) und den Dropdowns (260), die
   Navigations-Kacheln (.utility-block) liegen darueber. */
html:not([data-device="phone"]) #dj-player { position: sticky; top: 0; z-index: 150; }
html:not([data-device="phone"]) .utility-block { z-index: 160; }
/* Weniger Bildschirmhoehe (Laptop, iPad quer): Konsole kompakter, damit
   unter den Decks genug Liste zum Ziehen sichtbar bleibt. */
@media (max-height: 900px) {
  #dj-player .dj-decks { padding-top: 52px; }
  #dj-player .dj-deck, #dj-player .dj-master { padding: 10px 14px 12px; }
  #dj-player .dj-deck { gap: 8px; }
  #dj-player .dj-deck-head { padding: 7px 10px; }
  #dj-player .dj-waveform { height: 58px; }
  #dj-player .dj-vinyl { width: 156px; height: 156px; }
  #dj-player .cc-play, #dj-player .cc-cuebtn { width: 52px; height: 52px; }
  #dj-player .cc-pad { height: 34px; }
  #dj-player .cc-cue { height: 28px; }
  #dj-player .cc-pads { gap: 8px; }
  #dj-player .dj-master { gap: 8px; }
  .cc-vu, .cc-fader { height: 92px; }
  .cc-fader input[type=range] { width: 92px; }
  #dj-player .dj-knob { transform: scale(0.85); }
}
@media (max-height: 900px) and (max-width: 1100px) {
  #dj-player .dj-vinyl { width: 150px; height: 150px; }
}

/* Navigations-Kacheln nur bei Maus in der Naehe (siehe ccWireUtilityReveal) */
html:not([data-device="phone"]) .utility-block {
  opacity: 0; transform: translate(-50%, -18px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  padding: 8px 12px 6px; border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
}
html.cc-nav-open:not([data-device="phone"]) .utility-block { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cc-nav-handle { display: none; }
html:not([data-device="phone"]) .cc-nav-handle {
  display: block; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 159;
  width: 64px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
html:not([data-device="phone"]) .cc-nav-handle span { display: block; width: 40px; height: 4px; margin: 5px auto 0; border-radius: 2px; background: rgba(255,255,255,0.22); transition: opacity 0.2s; }
html.cc-nav-open .cc-nav-handle span { opacity: 0; }
html:not([data-device="phone"]) #dj-player .dj-decks { padding-top: 16px; }

/* Bibliothek (9.10.): Song-Liste und Warteschlange gleich gross nebeneinander,
   farblich nur in Nuancen getrennt (Liste leicht in Deck-A-Farbe, Warteschlange
   leicht in Deck-B-Farbe getoent). Hoehe so, dass beide unter der fest oben
   stehenden Konsole komplett sichtbar sind. */
.generator-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.generator-body .song-grid, .generator-body .gen-history {
  max-width: none; min-width: 0; margin: 0;
  height: max(380px, calc(100vh - var(--cc-console-h, 400px) - 28px)); max-height: none;
  border-radius: 14px; border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.25);
}
.generator-body .song-grid {
  min-height: min(480px, 60vh); /* Platz vorab reservieren: kein Springen, wenn die Songs geladen sind */
  padding: 8px; overflow-y: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--deck-a) 7%, transparent), transparent 140px), color-mix(in srgb, var(--panel) 94%, var(--deck-a));
  border-top: 2px solid color-mix(in srgb, var(--deck-a) 55%, transparent);
}
.generator-body .gen-history {
  display: flex; flex-direction: column; padding: 14px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--deck-b) 7%, transparent), transparent 140px), color-mix(in srgb, var(--panel) 94%, var(--deck-b));
  border-top: 2px solid color-mix(in srgb, var(--deck-b) 55%, transparent);
}
.generator-body .gen-history ul { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.generator-body .gen-history .gen-queue-current { background: color-mix(in srgb, var(--deck-b) 16%, transparent); border-color: color-mix(in srgb, var(--deck-b) 45%, transparent); }
/* Ablageflaeche sichtbar machen, sobald ein Song gezogen wird */
body.dnd-dragging:not(.dw-queue-drag) .generator-body .gen-history { outline: 2px dashed color-mix(in srgb, var(--deck-b) 80%, transparent); outline-offset: -6px; }
body.dnd-dragging:not(.dw-queue-drag) .generator-body .gen-history::after {
  content: 'Hier ablegen → Warteschlange'; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font: 700 11px 'Inter', sans-serif; letter-spacing: 0.08em; color: #050608; background: var(--deck-b);
  padding: 6px 12px; border-radius: 999px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.generator-body .gen-history { position: relative; }
.generator-body .gen-history.gen-queue-drag-over { box-shadow: 0 0 0 3px var(--deck-b), 0 0 30px color-mix(in srgb, var(--deck-b) 40%, transparent); }
@media (max-width: 760px) {
  .generator-body { grid-template-columns: minmax(0, 1fr); }
}

/* Liste/Warteschlange rasten beim Scrollen direkt unter der Konsole ein */
html:not([data-device="phone"]) .generator-body { scroll-margin-top: calc(var(--cc-console-h, 400px) + 14px); }

/* =====================================================================
   BIBLIOTHEKS-TOOLBAR im Console-Look (9.10.): statt neun Zeilen mit
   gemischten Stilen ein kompaktes Raster --
     Kopf:  Titel ........................ MIDI | Song nicht gefunden?
     1:     Suche | Dekaden-Umschalter | Verbinden
     2:     Stimmung (LED) | Genre (LED)
     3:     Aktionen ........................ Dienst + Senden
   Die Elemente bleiben dieselben (IDs/Logik unveraendert), nur ihre
   Platzierung (grid-area) und Optik aendern sich.
   ===================================================================== */
#decade-root .generator {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; align-items: center;
  padding: 16px 18px 18px; border-radius: 16px; margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 120px), color-mix(in srgb, var(--panel) 85%, #000);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 34px rgba(0,0,0,0.3);
}
#decade-root .generator > * { margin: 0; min-width: 0; }
#decade-root .generator > h2 { grid-row: 1; grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -0.01em; }
#decade-root .generator > h2 svg { width: 20px; height: 20px; color: var(--deck-a); }
#decade-root .generator > .sub { display: none; }
#decade-root .generator > .dj-midi-panel { grid-row: 1; grid-column: 9 / 11; justify-self: end; }
#decade-root .generator > .manualadd-panel { grid-row: 1; grid-column: 11 / 13; justify-self: end; }
#decade-root .generator > .dj-midi-panel:has(.dj-midi-body:not([hidden])) { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; }
#decade-root .generator > .generator-search { grid-row: 3; grid-column: 1 / 6; }
#decade-root .generator > .decade-nav-row { grid-row: 3; grid-column: 6 / 10; }
#decade-root .generator > .decade-link-row { grid-row: 3; grid-column: 10 / 13; justify-self: end; }
#decade-root .generator:not(:has(> .decade-link-row)) > .decade-nav-row { grid-column: 6 / 13; }
#decade-root .generator > .gen-selectors { grid-row: 4; grid-column: 1 / -1; margin: 0; }
#decade-root .generator > .generator-actions { grid-row: 5; grid-column: 1 / -1; }
#decade-root .generator > .send-panel { grid-row: 1; grid-column: 4 / 9; justify-self: end; }
#decade-root .generator > .generator-body { grid-row: 6; grid-column: 1 / -1; margin-top: 4px; }
#decade-root .generator > .song-hint { grid-row: 7; grid-column: 1 / -1; font-size: 11.5px; }

/* Gemeinsamer Pad-Look fuer alle Toolbar-Knoepfe */
#decade-root .generator .generator-actions button, #decade-root .generator .generator-actions a,
#decade-root .generator .send-btn, #decade-root .generator .dj-midi-toggle, #decade-root .generator .manualadd-toggle {
  height: 34px; padding: 0 12px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 600 12px 'Inter', sans-serif; letter-spacing: 0.01em; color: rgba(255,255,255,0.78); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #2a2d34, #17191e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.5);
  transition: color 0.15s, transform 0.08s, box-shadow 0.15s;
}
#decade-root .generator .generator-actions button:hover, #decade-root .generator .generator-actions a:hover,
#decade-root .generator .send-btn:hover:not(:disabled), #decade-root .generator .dj-midi-toggle:hover, #decade-root .generator .manualadd-toggle:hover { color: #fff; }
#decade-root .generator .generator-actions button:active, #decade-root .generator .send-btn:active:not(:disabled) { transform: translateY(1px); }
#decade-root .generator .generator-actions svg, #decade-root .generator .send-btn svg { width: 14px; height: 14px; }
#decade-root .generator #gen-play-all {
  color: #08090c; font-weight: 700; filter: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--deck-a) 78%, #fff), var(--deck-a));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 16px color-mix(in srgb, var(--deck-a) 45%, transparent), 0 2px 4px rgba(0,0,0,0.5);
}
#decade-root .generator #gen-favs.active { color: #fff; background: linear-gradient(180deg, #fb7185, #e11d48); }
#decade-root .generator #gen-favs svg { color: #fb7185; }
#decade-root .generator #gen-favs.active svg { color: #fff; }
#decade-root .generator .generator-actions.visible { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
#decade-root .generator .generator-count { font: 600 11px 'Courier New', monospace; color: var(--deck-a); background: #05070a; padding: 9px 10px; border-radius: 7px; box-shadow: inset 0 1px 3px #000; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* Senden-Bereich */
#decade-root .generator .send-panel { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
#decade-root .generator .send-panel-label, #decade-root .generator .decade-link-label, #decade-root .generator .decade-nav-row > span:first-child {
  font: 700 9.5px 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px;
}
#decade-root .generator .provider-btn { width: 28px; height: 28px; }
#decade-root .generator .send-btn:disabled { opacity: 0.45; cursor: default; background: linear-gradient(180deg, #2a2d34, #17191e); color: rgba(255,255,255,0.6); border: 0; }
#decade-root .generator .send-btn:not(:disabled) { color: #08090c; background: linear-gradient(180deg, color-mix(in srgb, var(--deck-b) 78%, #fff), var(--deck-b)); }

/* Suche als LCD-Feld */
#decade-root .generator .search-box { margin: 0; }
#decade-root .generator .search-input {
  height: 40px; border-radius: 9px; border: 0; color: var(--text);
  background: linear-gradient(180deg, #05070a, #0a0d12); box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.06);
}
#decade-root .generator .search-input:focus { outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), 0 0 0 2px color-mix(in srgb, var(--deck-a) 70%, transparent); }

/* Dekaden-Umschalter + Verbinden als Segment-Leisten */
#decade-root .generator .decade-nav-row, #decade-root .generator .decade-link-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; margin: 0; }
#decade-root .generator .decade-nav-chip, #decade-root .generator .decade-link-chip {
  height: 32px; padding: 0 11px; border-radius: 7px; border: 0; font: 600 12px 'Inter', sans-serif; color: var(--muted);
  background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
#decade-root .generator .decade-nav-chip:hover, #decade-root .generator .decade-link-chip:hover { color: var(--text); background: rgba(255,255,255,0.08); }
#decade-root .generator .decade-nav-chip.decade-nav-active { color: #08090c; background: var(--deck-a); box-shadow: 0 0 12px color-mix(in srgb, var(--deck-a) 45%, transparent); }
#decade-root .generator .decade-link-chip.linked, #decade-root .generator .decade-link-chip[aria-pressed="true"] { color: #08090c; background: var(--deck-b); }

/* MIDI / Song nicht gefunden: Icons statt Emojis */
#decade-root .generator .dj-midi-toggle::before, #decade-root .generator .manualadd-toggle::before {
  content: ''; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--cc-ico) center / contain no-repeat; mask: var(--cc-ico) center / contain no-repeat;
}
#decade-root .generator .dj-midi-toggle { --cc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8v8M12 8v8M17 8v8'/%3E%3C/svg%3E"); }
#decade-root .generator .manualadd-toggle { --cc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
#decade-root .generator .song-grid-section-heading-mostwanted svg { width: 14px; height: 14px; color: #f97316; vertical-align: -2px; }

/* Tablet / schmaler */
@media (max-width: 1250px) {
  #decade-root .generator > .generator-search { grid-column: 1 / 13; }
  #decade-root .generator > .decade-nav-row { grid-row: 4; grid-column: 1 / 8; }
  #decade-root .generator > .decade-link-row { grid-row: 4; grid-column: 8 / 13; }
  #decade-root .generator > .gen-selectors { grid-row: 5; }
  #decade-root .generator > .generator-actions { grid-row: 6; grid-column: 1 / -1; }
  #decade-root .generator > .send-panel { grid-row: 7; grid-column: 1 / -1; justify-self: start; }
  #decade-root .generator > .generator-body { grid-row: 8; }
  #decade-root .generator > .song-hint { grid-row: 9; }
}
@media (max-width: 760px) {
  #decade-root .generator > h2 { grid-column: 1 / -1; }
  #decade-root .generator > .dj-midi-panel { grid-row: 2; grid-column: 1 / 7; justify-self: start; }
  #decade-root .generator > .manualadd-panel { grid-row: 2; grid-column: 7 / 13; justify-self: end; }
  #decade-root .generator > .decade-nav-row, #decade-root .generator > .decade-link-row { grid-column: 1 / -1; justify-self: start; overflow-x: auto; }
  #decade-root .generator > .decade-link-row { grid-row: auto; }
}
#decade-root .generator .generator-search { background: none; border: 0; padding: 0; box-shadow: none; }
#decade-root .generator .generator-actions.visible { flex-wrap: nowrap; }
#decade-root .generator .generator-actions.visible > * { flex: none; }
#decade-root .generator > .manualadd-panel .manualadd-toggle { margin-left: 0; }
@media (max-width: 1250px) {
  #decade-root .generator > h2 { grid-column: 1 / 7; }
  #decade-root .generator > .dj-midi-panel { grid-column: 7 / 10; }
  #decade-root .generator > .manualadd-panel { grid-column: 10 / 13; }
  #decade-root .generator:not(:has(> .decade-link-row)) > .decade-nav-row { grid-column: 1 / 13; }
  #decade-root .generator .generator-actions.visible { flex-wrap: wrap; }
}

/* Platte flippt beim Ablegen eines Songs (siehe ccFlipDeck) */
#dj-player .dj-vinyl.cc-flip { animation: cc-flip 0.85s cubic-bezier(.3,.7,.25,1); }
@keyframes cc-flip {
  0% { transform: perspective(700px) rotateY(0deg) scale(1); }
  45% { transform: perspective(700px) rotateY(200deg) scale(1.1); filter: drop-shadow(0 0 22px var(--dc)); }
  100% { transform: perspective(700px) rotateY(360deg) scale(1); }
}

/* Restzeit blinkt in den letzten 30 Sekunden (wie am CDJ) */
.cc-time b.cc-ending { animation: cc-ending 0.6s steps(1, end) infinite; color: #ef4444; text-shadow: 0 0 14px rgba(239,68,68,0.8); }
@keyframes cc-ending { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .cc-time b.cc-ending { animation: none; } }

/* --- Karaoke-Leiste: gleiche Spalten wie die Decks, Text steht unter
   dem Deck, das gerade spielt; Knoepfe in der Mitte unter dem Mixer --- */
#dj-player .cc-lyrics {
  max-width: 1680px; margin: 0 auto; box-sizing: border-box; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr);
  grid-template-areas: "a mid b"; align-items: center;
  border-top: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  --dc: var(--deck-a);
}
#dj-player .cc-lyrics.cc-lyrics-on-b { --dc: var(--deck-b); }
.cc-lyrics-stage { grid-area: a; text-align: center; min-width: 0; padding: 4px 16px 10px; animation: cc-lyrics-in 0.35s ease-out; }
.cc-lyrics-on-b .cc-lyrics-stage { grid-area: b; animation-name: cc-lyrics-in-b; }
@keyframes cc-lyrics-in { from { opacity: 0; transform: translateX(-24px); } }
@keyframes cc-lyrics-in-b { from { opacity: 0; transform: translateX(24px); } }
.cc-lyrics-ctrl {
  grid-area: mid; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px; border-left: 1px solid rgba(0,0,0,0.6); border-right: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), inset -1px 0 0 rgba(255,255,255,0.05);
}
.cc-lyrics-prev, .cc-lyrics-next {
  font: 500 13px 'Inter', sans-serif; color: var(--muted); opacity: 0.55; min-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-lyrics-line { position: relative; display: inline-block; padding: 22px 4px 2px; max-width: 100%; }
.cc-lyrics-words { font: 800 26px/1.2 var(--font-display, 'Sora', sans-serif); color: var(--text); white-space: nowrap; }
.cc-lyrics-word { transition: color 0.15s, text-shadow 0.15s; color: color-mix(in srgb, var(--text) 50%, transparent); }
.cc-lyrics-word.sung { color: var(--text); }
.cc-lyrics-word.now { color: var(--dc); text-shadow: 0 0 calc(14px * var(--cc-glow, 0) + 2px) color-mix(in srgb, var(--dc) 70%, transparent); }
.cc-lyrics-note { color: var(--dc); opacity: 0.8; }
.cc-lyrics-ball {
  position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, var(--dc) 60%, color-mix(in srgb, var(--dc) 60%, #000));
  box-shadow: 0 0 8px color-mix(in srgb, var(--dc) 80%, transparent);
  transform-origin: 50% 100%; pointer-events: none; will-change: transform;
}
.cc-lyrics-tools { display: flex; align-items: center; gap: 6px; }
.cc-lyrics-tools .cc-pad { width: 30px; height: 24px; padding: 0; font-size: 15px; }
.cc-lyrics-tools .cc-pad.cc-lyrics-tap { width: auto; padding: 0 9px; margin-left: 4px; font: 700 9.5px 'Inter', sans-serif; letter-spacing: 0.1em; color: var(--dc); }
.cc-lyrics-offset { font: 600 11px 'JetBrains Mono', monospace; color: var(--muted); min-width: 52px; text-align: center; }
.cc-lyrics-ctrl .cc-lyrics-toggle { width: auto; height: 24px; padding: 0 12px; white-space: nowrap; font: 700 9.5px 'Inter', sans-serif; letter-spacing: 0.1em; color: var(--dc); }
.cc-lyrics-ctrl .cc-lyrics-toggle { color: var(--muted); }
#dj-player .cc-lyrics.cc-lyrics-has:not(.cc-lyrics-off) .cc-lyrics-ctrl .cc-pad.cc-lyrics-toggle {
  color: #04140a; background: linear-gradient(180deg, #4ade80, #16a34a); border-color: #15803d;
  box-shadow: 0 0 12px rgba(74,222,128,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Textfassung passt laenger nicht zum Video (10.10.) -> gelb statt gruen */
#dj-player .cc-lyrics.cc-lyrics-has.cc-lyrics-unsure:not(.cc-lyrics-off) .cc-lyrics-ctrl .cc-pad.cc-lyrics-toggle {
  color: #1a1203; background: linear-gradient(180deg, #fbbf24, #d97706); border-color: #b45309;
  box-shadow: 0 0 12px rgba(251,191,36,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
#dj-player .cc-lyrics:not(.cc-lyrics-has) .cc-lyrics-stage,
#dj-player .cc-lyrics:not(.cc-lyrics-has) .cc-lyrics-tools,
.cc-lyrics-off .cc-lyrics-stage, .cc-lyrics-off .cc-lyrics-tools { display: none; }
#dj-player .cc-lyrics:not(.cc-lyrics-has) .cc-lyrics-ctrl, .cc-lyrics-off .cc-lyrics-ctrl { padding: 4px 10px; }
@media (prefers-reduced-motion: reduce) { .cc-lyrics-stage { animation: none; } }
/* Karaoke als Pop-up unten rechts (nur bei Songs der Kachel Karaoke) */
#dj-player .cc-lyrics {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: none; margin: 0;
  width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--dc) 45%, transparent); border-radius: 14px;
  background: rgba(14, 14, 20, 0.95); box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
#dj-player .cc-lyrics.cc-lyrics-hidden { display: none; }
#dj-player .cc-lyrics .cc-lyrics-stage { order: 1; grid-area: auto; }
#dj-player .cc-lyrics .cc-lyrics-ctrl { order: 2; flex-direction: row; justify-content: space-between; border: 0; box-shadow: none; padding: 6px 12px 10px; }
#dj-player .cc-lyrics .cc-lyrics-words { font-size: 20px; }
/* im eigenen Fenster: Flaeche fuellen statt unten rechts schweben */
#dj-player .cc-lyrics.cc-lyrics-pip { position: static; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; justify-content: center; }

/* Club Console: Lautstaerke-Regler schlanker (Griff war am Desktop 28x40) */
@media (pointer: fine) {
  #dj-player #dj-master-volume { height: 6px; }
  #dj-player #dj-master-volume::-webkit-slider-thumb { width: 16px; height: 24px; border-radius: 4px; }
  #dj-player #dj-master-volume::-moz-range-thumb { width: 16px; height: 24px; border-radius: 4px; }
  #dj-player .dj-volume-label svg { width: 18px; height: 18px; }
  #dj-player #dj-master-volume:focus { outline: none; }
  #dj-player #dj-master-volume:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--deck-a), 0 1px 3px rgba(0,0,0,0.5); }
}

/* Mauszeiger-Licht (siehe cursorLight in decades.js) */
#cc-cursor-light {
  position: fixed; left: -90px; top: -90px; width: 180px; height: 180px;
  border-radius: 50%; pointer-events: none; z-index: 2147483000; opacity: 0;
  transition: opacity 0.25s ease; will-change: transform; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, color-mix(in srgb, var(--accent, #7c5cff) 16%, transparent) 30%, transparent 68%);
}

/* ---------- Safari-Leicht-Modus (Klasse "lite" auf <html>, gesetzt in decades.js) ----------
   Safari beschleunigt diese Dinge nicht per Grafikkarte; sie werden bei jedem Bild neu berechnet:
   - Mauszeiger-Licht: mix-blend-mode zwingt die ganze Seite darunter in eine Misch-Ebene
   - Fortschrittsring der Decks: drop-shadow-Filter auf SVG, 10-20 Mal pro Sekunde aktualisiert
   - Navigationsleiste: backdrop-filter, auch im unsichtbaren Zustand */
html.lite #cc-cursor-light { mix-blend-mode: normal; will-change: auto; }
html.lite .cc-ring .fg { filter: none; transition: none; stroke-width: 4.5; }
html.lite:not([data-device="phone"]) .utility-block { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, transparent); }

/* Schatten: in Safari die Ursache fuer das Ruckeln der Songliste (Nutzertest 14.10.: "Schatten aus -> ruckelt nicht mehr").
   Weichgezeichnete Schatten werden dort bei jedem Scroll-Bild neu gezeichnet (hunderte runde Knoepfe, Decks, Kacheln).
   Darum im Leicht-Modus keine box-/text-Schatten; die gruenen/orangen Ringe der Auswahl bleiben als Umriss sichtbar. */
html.lite *, html.lite *::before, html.lite *::after { box-shadow: none !important; text-shadow: none !important; }
html.lite .song-tile.selected { outline: 2px solid rgba(34, 197, 94, 0.65); outline-offset: -2px; }
html.lite .song-tile.song-tile-mixable { outline: 1px solid rgba(245, 166, 35, 0.6); outline-offset: -1px; }
html.lite .song-tile.song-tile-mixable.selected { outline: 2px solid rgba(34, 197, 94, 0.8); outline-offset: -2px; }
html.lite :focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }


.discogs-notice { margin-top: 8px; font-size: 11px; opacity: .7; }