/* GSV-DJ — Oberflaeche.
   Dunkel, weil das Ding nachts auf einem Festplatz bedient wird und ein heller
   Bildschirm dort blendet. Alles, was sich bewegt, laeuft ueber transform und
   opacity — damit es auf dem iPad fluessig bleibt. */

:root {
  --hg:        #07080d;
  --hg2:       #0d101a;
  --karte:     rgba(255,255,255,.045);
  --rand:      rgba(255,255,255,.10);
  --text:      #e8ecf5;
  --grau:      #8a93a8;
  --a:         #22e6c8;   /* Deck A */
  --b:         #ff4d94;   /* Deck B */
  --warn:      #ffb547;
  --rund:      16px;
  --schnell:   .18s cubic-bezier(.4,0,.2,1);
  --weich:     .45s cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--hg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(34,230,200,.10), transparent 60%),
    radial-gradient(1000px 560px at 88% -10%, rgba(255,77,148,.10), transparent 60%),
    linear-gradient(180deg, var(--hg2), var(--hg));
}

/* ───────────────────────────── Startschleier ───────────────────────────── */
/* Browser lassen Ton erst nach einer echten Berührung zu. Ohne diesen Schleier
   startet der erste Titel stumm und niemand versteht, warum. */
.start {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(5,6,10,.92);
  backdrop-filter: blur(14px);
  transition: opacity var(--weich), visibility var(--weich);
}
.start--weg { opacity: 0; visibility: hidden; }
.start__karte {
  text-align: center; padding: 40px 44px;
  border: 1px solid var(--rand); border-radius: 24px;
  background: var(--karte);
  animation: auftauchen .5s var(--weich) both;
}
.start__logo { font-size: 46px; font-weight: 800; letter-spacing: -1px; }
.start__logo span { color: var(--a); }
.start__text { color: var(--grau); margin: 14px 0 24px; }
.start__link { display: block; margin-top: 18px; color: var(--a); text-decoration: none; font-size: 13px; }
.start__link:hover { text-decoration: underline; }

@keyframes auftauchen { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* ───────────────────────────── Kopf ───────────────────────────── */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; gap: 18px;
  border-bottom: 1px solid var(--rand);
  background: rgba(0,0,0,.25);
}
.kopf__logo { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.kopf__logo span { color: var(--a); }
.kopf__mitte { display: flex; align-items: center; gap: 14px; }
.uhr { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; color: var(--grau); }

.lage {
  font-size: 12px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--rand); color: var(--grau);
  transition: all var(--schnell);
}
.lage--laeuft { color: var(--a); border-color: rgba(34,230,200,.45); background: rgba(34,230,200,.10); }
.lage--laeuft::before { content: '● '; animation: pulsen 1.6s ease-in-out infinite; }
.lage--warn { color: var(--warn); border-color: rgba(255,181,71,.45); background: rgba(255,181,71,.10); }
@keyframes pulsen { 50% { opacity: .35; } }

.master { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--grau); }
.master input { width: 130px; }
.master span { width: 26px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* ───────────────────────────── Pult ───────────────────────────── */
.pult {
  display: grid;
  grid-template-columns: 1fr minmax(210px, 260px) 1fr;
  gap: 16px; padding: 16px; min-height: 0;
}

.deck {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border: 1px solid var(--rand); border-radius: var(--rund);
  background: var(--karte);
  position: relative; overflow: hidden;
  transition: border-color var(--weich), box-shadow var(--weich);
}
.deck::before {                      /* farbiger Schimmer je Deck */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 50% -20%, var(--farbe, transparent), transparent 70%);
  opacity: .16; transition: opacity var(--weich);
}
#deckA { --farbe: var(--a); }
#deckB { --farbe: var(--b); }
.deck--aktiv { border-color: var(--farbe); box-shadow: 0 0 0 1px var(--farbe), 0 12px 40px -18px var(--farbe); }
.deck--aktiv::before { opacity: .34; }

.deck__kopf { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.deck__name {
  font-size: 22px; font-weight: 800; color: var(--farbe);
  width: 26px; flex: none;
}
.deck__titel {
  font-size: 14px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck__player { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── Plattenteller ── */
.teller { position: relative; display: grid; place-items: center; padding: 6px 0; }
.teller__platte {
  width: 168px; height: 168px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #14161f 0 2px, #0d0f16 2px 4px),
    #101219;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px -22px #000;
  animation: drehen 1.8s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.teller__platte--dreht { animation-play-state: running; }
@keyframes drehen { to { transform: rotate(360deg); } }

.teller__rille {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.045);
}
.teller__rille:nth-child(1) { inset: 14px; }
.teller__rille:nth-child(2) { inset: 28px; }
.teller__rille:nth-child(3) { inset: 42px; }

.teller__label {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; gap: 0;
  background: linear-gradient(145deg, var(--farbe), color-mix(in srgb, var(--farbe) 45%, #000));
  color: #04060a; font-weight: 800; line-height: 1;
}
.teller__label span { font-size: 17px; font-variant-numeric: tabular-nums; }
.teller__label small { font-size: 8px; opacity: .7; letter-spacing: .5px; }

.teller__arm {
  position: absolute; right: 14%; top: 16%;
  width: 3px; height: 74px; border-radius: 3px;
  background: linear-gradient(180deg, #6b7488, #39404f);
  transform-origin: top center; transform: rotate(14deg);
  transition: transform var(--weich);
}
.deck--aktiv .teller__arm { transform: rotate(-8deg); }

/* ── Pegel ── */
.pegel { height: 5px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.pegel__balken {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--farbe), #fff);
  border-radius: 999px;
  transition: width .1s linear;
}

/* ── Zeit ── */
.zeit {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  font-size: 12px; color: var(--grau); font-variant-numeric: tabular-nums;
}
.zeit__leiste { height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; cursor: pointer; }
.zeit__leiste i { display: block; height: 100%; width: 0%; background: var(--farbe); border-radius: 999px; }

/* ── Regler ── */
.regler { display: grid; gap: 8px; }
.regler__zeile { display: grid; grid-template-columns: 52px 1fr 46px; align-items: center; gap: 10px; font-size: 12px; color: var(--grau); }
.regler__zeile b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 26px; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.10);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%;
  background: #fff; border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  transition: transform var(--schnell), box-shadow var(--schnell);
}
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type=range]::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(255,255,255,.10); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: #fff; }

#deckA input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(34,230,200,.20); }
#deckB input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255,77,148,.20); }

/* ── Knöpfe ── */
.knopf {
  border: 1px solid var(--rand); border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--text);
  padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: transform var(--schnell), background var(--schnell), border-color var(--schnell), box-shadow var(--schnell);
}
.knopf:hover { background: rgba(255,255,255,.10); }
.knopf:active { transform: scale(.955); }
.knopf--klein { padding: 5px 10px; font-size: 11px; }
.knopf--gross { padding: 14px 22px; font-size: 15px; border-radius: 14px; }
.knopf--leuchtet {
  background: linear-gradient(135deg, rgba(34,230,200,.20), rgba(255,77,148,.20));
  border-color: rgba(255,255,255,.22);
  display: grid; gap: 2px; width: 100%;
}
.knopf--leuchtet small { font-size: 11px; font-weight: 500; color: var(--grau); }
.knopf--leuchtet:disabled { opacity: .4; cursor: not-allowed; }
.knopf--schalter.an { background: rgba(34,230,200,.18); border-color: var(--a); color: var(--a); }
.knopf--leer { color: var(--grau); padding: 9px 12px; }

.deck__knoepfe { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin-top: auto; }
.knopf--spiel { display: grid; place-items: center; padding: 12px; background: var(--farbe); border-color: transparent; color: #04060a; }
.knopf--spiel:hover { filter: brightness(1.1); background: var(--farbe); }

.sym { display: block; width: 0; height: 0; }
.sym--play { border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.sym--pause { width: 13px; height: 15px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }

/* ───────────────────────────── Mitte ───────────────────────────── */
.mitte {
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  padding: 16px; border: 1px solid var(--rand); border-radius: var(--rund);
  background: var(--karte);
}
.mitte__block { display: grid; gap: 6px; }
.mitte__beschriftung {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 1.4px; color: var(--grau);
}
.mitte__beschriftung span:first-child { color: var(--a); font-weight: 700; }
.mitte__beschriftung span:last-child { color: var(--b); font-weight: 700; }

.fader::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(90deg, var(--a), rgba(255,255,255,.10) 45%, rgba(255,255,255,.10) 55%, var(--b));
}
.fader::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -9px; }
.fader__glanz { height: 2px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; }
.fader__glanz i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0; transform: translateX(-100%);
}
.fader__glanz i.laeuft { animation: wischen 1.1s ease-in-out; }
@keyframes wischen {
  0% { opacity: 0; transform: translateX(-100%); }
  40% { opacity: .8; }
  100% { opacity: 0; transform: translateX(300%); }
}

.fein { width: 100%; }
.mitte__automatik { margin-top: auto; display: grid; gap: 8px; }
.hinweis { font-size: 11px; color: var(--grau); margin: 0; line-height: 1.4; }

/* ───────────────────────────── Unten ───────────────────────────── */
.unten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0 16px 16px; min-height: 0; height: 32vh;
}
.spalte {
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
  padding: 14px; border: 1px solid var(--rand); border-radius: var(--rund);
  background: var(--karte);
}
.spalte__kopf { display: flex; align-items: center; justify-content: space-between; }
.spalte__kopf h2 { margin: 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--grau); font-weight: 700; }
.spalte__kopf h2 span { color: var(--text); }

.suchzeile { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.suchzeile input {
  border: 1px solid var(--rand); border-radius: 12px;
  background: rgba(0,0,0,.30); color: var(--text);
  padding: 11px 14px; font: inherit; outline: none;
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
.suchzeile input:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(34,230,200,.16); }

.liste { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.liste::-webkit-scrollbar { width: 8px; }
.liste::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 99px; }

.zeile {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 11px;
  border: 1px solid transparent; background: rgba(255,255,255,.035);
  animation: reinrutschen .3s var(--weich) both;
  transition: background var(--schnell), border-color var(--schnell), transform var(--schnell);
}
.zeile:hover { background: rgba(255,255,255,.08); }
.zeile--laeuft { border-color: var(--a); background: rgba(34,230,200,.10); }
@keyframes reinrutschen { from { opacity: 0; transform: translateY(8px); } }

.zeile__nr { width: 20px; text-align: right; color: var(--grau); font-size: 12px; font-variant-numeric: tabular-nums; }
.zeile__text { min-width: 0; }
.zeile__titel { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile__unter { font-size: 11px; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile__dauer { font-size: 12px; color: var(--grau); font-variant-numeric: tabular-nums; }
.zeile__knoepfe { display: flex; gap: 5px; }
.zeile__knoepfe button {
  border: 1px solid var(--rand); background: rgba(255,255,255,.05); color: var(--text);
  border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all var(--schnell);
}
.zeile__knoepfe button:hover { background: rgba(255,255,255,.13); }
.zeile__knoepfe .zuA:hover { border-color: var(--a); color: var(--a); }
.zeile__knoepfe .zuB:hover { border-color: var(--b); color: var(--b); }

.marke { font-size: 10px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--rand); color: var(--grau); }
.marke--gesperrt { color: var(--warn); border-color: rgba(255,181,71,.4); }

.leerhinweis { color: var(--grau); font-size: 13px; text-align: center; margin: 18px 0; }
.lader { display: grid; place-items: center; padding: 20px; }
.lader::after {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15); border-top-color: var(--a);
  animation: kreisen .7s linear infinite;
}
@keyframes kreisen { to { transform: rotate(360deg); } }

/* ───────────────────────────── Meldung ───────────────────────────── */
.meldung {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  padding: 11px 20px; border-radius: 12px;
  background: rgba(20,22,30,.96); border: 1px solid var(--rand);
  font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity var(--weich), transform var(--weich);
  z-index: 80; max-width: 80vw; text-align: center;
}
.meldung--da { opacity: 1; transform: translate(-50%, 0); }
.meldung--warn { border-color: rgba(255,181,71,.5); color: var(--warn); }

/* ───────────────────────────── Schmal ───────────────────────────── */
@media (max-width: 1000px) {
  .pult { grid-template-columns: 1fr; }
  .mitte { order: 3; }
  .unten { grid-template-columns: 1fr; height: auto; }
  body { overflow: auto; }
  .teller__platte { width: 130px; height: 130px; }
}