/* Radio Remote Control – remote.css – v2026-05-07 */

/* ── Design-Tokens ─────────────────────────────────────── */
:root {
  --bg:        #16181c;
  --card:      #1f2227;
  --card2:     #252930;
  --border:    rgba(255,255,255,.07);
  --muted:     #7a8494;
  --text:      #e8edf4;
  --accent:    #4fc3f7;
  --accent2:   #81d4fa;
  --green:     #4caf50;
  --red:       #f44336;
  --amber:     #ffca28;
  --radius:    13px;
  --radius-sm: 8px;
  --shadow:    0 4px 14px rgba(0,0,0,.3);
  --progress:  0%;
  --progress-color: #55ff88;

  /* Buttons */
  --btn-next:         #1565c0;
  --btn-auto-auto:    #e53935;
  --btn-auto-assist:  #1a6b3c;
  --btn-auto-break:   #5d4037;
  --btn-auto-stop:    #6d1f1f;
  --btn-enc-start:    #1a5276;
  --btn-enc-stop:     #6d4c1f;
  --btn-preview-bg:   #173a44;
  --btn-preview-icon: #4fc3f7;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;  /* clip statt hidden: verhindert Scrolling aber erlaubt visuellen Überlauf */
}

/* ── Login Page ─────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at 60% 30%, #1a2a3a 0%, var(--bg) 70%);
}
.login-wrap { width: 100%; max-width: 420px; padding: 20px; }
.login-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 40px 36px 32px;
}
.login-logo { text-align: center; margin-bottom: 10px; }
.login-logo img { max-height: 72px; width: auto; }
.login-station-name { font-size: 1.6rem; font-weight: 800; text-align: center; color: var(--accent); }
.login-subtitle { text-align: center; color: var(--muted); font-size: .95rem; margin-bottom: 28px; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .87rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.form-group input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 14px;
  font-size: 1rem;
  outline: none;
  transition: border-color .15s;
}
.form-group input:focus { border-color: var(--accent); }
/* Browser-Autofill überschreiben */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--card2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}

.alert { border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: .9rem; }
.alert-error { background: rgba(244,67,54,.15); border: 1px solid rgba(244,67,54,.35); color: #ff8a80; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 18px;
  border: none; border-radius: var(--radius-sm);
  font-size: .93rem; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .08s, opacity .12s;
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--accent); color: #000; }
.btn-ghost    { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-full     { width: 100%; }
.btn-sm       { padding: 0 12px !important; font-size: .85rem; height: 36px; box-sizing: border-box; line-height: 1; }

/* ── Lang select ────────────────────────────────────────── */
.lang-select {
  height: 36px; box-sizing: border-box;
  padding: 0 10px; border-radius: 6px;
  font-size: .85rem; font-weight: 700;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  outline: none;
}
.lang-select:hover { border-color: var(--accent); }
/* Lang-Buttons (Login-Seite) */
.lang-switch { display: flex; justify-content: center; margin-top: 12px; }
.lang-select-login {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 12px;
  font-size: .85rem;
  cursor: pointer;
  outline: none;
  width: 100%;
  max-width: 200px;
}
.lang-select-login:focus { border-color: var(--accent); }

/* ── Top Nav ─────────────────────────────────────────────── */
.top-nav {
  background: var(--bg-topnav, #1a1d21);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin: 0 auto; padding: 10px 16px; gap: 12px;
}
.nav-left  { display: flex; align-items: center; gap: 10px; }
.nav-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nav-logo  { height: 36px; width: auto; }
.nav-station { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.nav-user  { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.nav-user strong { color: var(--text); }
.role-badge {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: .72rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
.role-technik   { background: rgba(244,67,54,.2);  color: #ff8a80; }
.role-moderator { background: rgba(79,195,247,.2); color: var(--accent2); }
.role-readonly  { background: rgba(122,132,148,.15); color: var(--muted); }

/* ── Dashboard Layout ────────────────────────────────────── */
.dashboard { max-width: 960px; margin: 0 auto; padding: 16px 12px 30px; }

/* ── Stunden-Countdown + Bereitschafts-Countdown: gemeinsame Row ────── */
.oap-countdown-row {
  display: flex;
  gap: 12px;
  margin: 8px 0 14px;
}
.oap-countdown-row > .oap-countdown-card,
.oap-countdown-row > .oap-arm-countdown {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}
/* Sendungshinweis-Toggle: eigene Kachel zwischen Bereitschafts- und
   Stundenende-Countdown, vertikal zentriert (statt frei schwebend über
   der rechten Kachel) */
.oap-cd-hint-wrap { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mon-hint-toggle {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: #79c0ff; opacity: .7; transition: opacity .15s;
  padding: 2px 4px; line-height: 1;
}
.mon-hint-toggle:hover { opacity: 1; }
@media (max-width: 680px) {
  .oap-countdown-row { flex-direction: column; gap: 8px; }
  .oap-countdown-row > .oap-countdown-card,
  .oap-countdown-row > .oap-arm-countdown {
    flex: 0 0 auto;
    width: 100%;
  }
  .oap-cd-hint-wrap { padding: 2px 0; }
}

.oap-countdown-card {
  border-radius: var(--radius);
  overflow: hidden;
  transition: background .3s, border-color .3s;
  position: relative;
}
.oap-cd-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 6px 16px; height: 64px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background .3s, border-color .3s, color .3s;
}
.oap-cd-line1 { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
/* Bell-Toggle Button */
.oap-cd-alarm-btn {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: .95rem; opacity: .5; transition: opacity .15s;
  z-index: 2; padding: 2px 4px; line-height: 1;
}
.oap-cd-alarm-btn:hover { opacity: 1; }
.oap-countdown-card.oap-alarm-off .oap-cd-alarm-btn { opacity: .25; }
/* Idle: dauerhaft sichtbar, > 5 min */
.oap-countdown-card.oap-cd-idle .oap-cd-inner {
  background: var(--bg-cd-idle, #111720); border-color: var(--border-cd-idle, #1f3050); color: var(--color-cd-idle, #4a7fa8);
}
/* Grau: 5–2 min */
.oap-countdown-card.oap-cd-grey .oap-cd-inner {
  background: var(--bg-cd-grey, #1e2126); border-color: var(--border-cd-grey, #30363d); color: var(--color-cd-grey, #8b949e);
}
/* Orange: 2 min – 30 s */
.oap-countdown-card.oap-cd-orange .oap-cd-inner {
  background: var(--bg-cd-orange, #2a1f0a); border-color: var(--border-cd-orange, #7a4f10); color: var(--color-cd-orange, #f0a030);
}
/* Rot: 30 s – 0 */
.oap-countdown-card.oap-cd-red .oap-cd-inner {
  background: var(--bg-cd-red, #2a0d0d); border-color: var(--border-cd-red, #7a1010); color: var(--color-cd-red, #ff4444);
}
/* LOS! */
.oap-countdown-card.oap-cd-done .oap-cd-inner {
  background: var(--bg-cd-done, #0d2a14); border-color: var(--border-cd-done, #1a7a30); color: var(--color-cd-done, #40e070);
}
/* Alarm deaktiviert: Farben gedimmt (Kachelgröße ist ohnehin immer konstant) */
.oap-countdown-card.oap-alarm-off.oap-cd-orange .oap-cd-inner,
.oap-countdown-card.oap-alarm-off.oap-cd-red    .oap-cd-inner {
  background: var(--bg-cd-grey, #1e2126); border-color: var(--border-cd-grey, #30363d); color: var(--color-cd-grey, #8b949e);
}
.oap-countdown-label {
  font-size: .75rem; opacity: .7;
  letter-spacing: .05em; white-space: nowrap;
}
.oap-countdown-value {
  font-family: ui-monospace, 'Roboto Mono', monospace;
  font-weight: 800; letter-spacing: .04em; font-size: 1.6rem; line-height: 1;
  transition: font-size .2s;
}
.oap-countdown-sub { font-size: .78rem; opacity: .7; white-space: nowrap; }
/* Warn-Phase: größere Schrift (Kachel selbst bleibt konstant groß) */
.oap-countdown-card.oap-cd-orange .oap-countdown-value { font-size: 2.4rem; font-weight: 900; }
.oap-countdown-card.oap-cd-red    .oap-countdown-value { font-size: 3.2rem; font-weight: 900; }
.oap-countdown-card.oap-cd-done   .oap-countdown-value { font-size: 2.8rem; font-weight: 900; }
/* Alarm deaktiviert: normale Schriftgröße */
.oap-countdown-card.oap-alarm-off.oap-cd-orange .oap-countdown-value,
.oap-countdown-card.oap-alarm-off.oap-cd-red    .oap-countdown-value { font-size: 1.6rem; font-weight: 800; }
@keyframes oap-cd-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.oap-countdown-card.oap-cd-orange .oap-countdown-value,
.oap-countdown-card.oap-cd-red    .oap-countdown-value { animation: oap-cd-pulse .65s ease-in-out infinite; }
.oap-countdown-card.oap-cd-done   .oap-countdown-value { animation: oap-cd-pulse .4s ease-in-out infinite; }
/* Alarm deaktiviert: kein Puls */
.oap-countdown-card.oap-alarm-off .oap-countdown-value { animation: none !important; }
/* Toggle-Button in Toolbar */
.oap-cd-toggle-btn { opacity: .45; transition: opacity .15s; }
.oap-cd-toggle-btn.oap-cd-toggle-active { opacity: 1; color: var(--accent, #4a9eff); }

/* ── Bereitschafts-Countdown (Titelende, für Monitor-Toggle-Berechtigte) ── */
.oap-arm-countdown {
  border-radius: var(--radius);
  overflow: hidden;
  transition: background .3s, border-color .3s;
  position: relative;
}
.oap-arm-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 6px 16px; height: 64px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background .3s, border-color .3s, color .3s;
}
.oap-arm-line1 { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
/* Bell-Toggle Button (Warnung stummschalten) */
.oap-arm-alarm-btn {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: .95rem; opacity: .5; transition: opacity .15s;
  z-index: 2; padding: 2px 4px; line-height: 1;
}
.oap-arm-alarm-btn:hover { opacity: 1; }
.oap-arm-countdown.oap-arm-alarm-off .oap-arm-alarm-btn { opacity: .25; }
.oap-arm-countdown.oap-arm-grey .oap-arm-inner {
  background: var(--bg-cd-grey, #1e2126); border-color: var(--border-cd-grey, #30363d); color: var(--color-cd-grey, #8b949e);
}
.oap-arm-countdown.oap-arm-orange .oap-arm-inner {
  background: var(--bg-cd-orange, #2a1f0a); border-color: var(--border-cd-orange, #7a4f10); color: var(--color-cd-orange, #f0a030);
}
.oap-arm-countdown.oap-arm-red .oap-arm-inner {
  background: var(--bg-cd-red, #2a0d0d); border-color: var(--border-cd-red, #7a1010); color: var(--color-cd-red, #ff4444);
}
/* Warnung stummgeschaltet: Farben gedimmt (Kachelgröße ist ohnehin immer konstant) */
.oap-arm-countdown.oap-arm-alarm-off.oap-arm-orange .oap-arm-inner,
.oap-arm-countdown.oap-arm-alarm-off.oap-arm-red    .oap-arm-inner {
  background: var(--bg-cd-grey, #1e2126); border-color: var(--border-cd-grey, #30363d); color: var(--color-cd-grey, #8b949e);
}
.oap-arm-label { font-size: .75rem; opacity: .7; letter-spacing: .05em; white-space: nowrap; }
.oap-arm-value {
  font-family: ui-monospace, 'Roboto Mono', monospace;
  font-weight: 800; letter-spacing: .04em; font-size: 1.6rem; line-height: 1;
  transition: font-size .2s;
}
.oap-arm-sub { font-size: .78rem; opacity: .7; white-space: normal; text-align: center; line-height: 1.15; }
.oap-arm-sub-title { font-weight: 800; opacity: 1; }
/* Warn-Phase: dieselbe Schriftgrößen-Skala wie die Stundenende-Kachel */
.oap-arm-countdown.oap-arm-orange .oap-arm-value { font-size: 2.4rem; font-weight: 900; }
.oap-arm-countdown.oap-arm-red    .oap-arm-value { font-size: 3.2rem; font-weight: 900; animation: oap-cd-pulse .65s ease-in-out infinite; }
.oap-arm-countdown.oap-arm-red    .oap-arm-sub    { font-weight: 700; }
/* Warnung stummgeschaltet: normale Schriftgröße, kein Puls */
.oap-arm-countdown.oap-arm-alarm-off.oap-arm-orange .oap-arm-value,
.oap-arm-countdown.oap-arm-alarm-off.oap-arm-red    .oap-arm-value { font-size: 1.6rem; font-weight: 800; animation: none !important; }
.oap-arm-countdown.oap-arm-alarm-off .oap-arm-sub { font-weight: 400; }

/* Auto/Assist-Status-Badge — dezente Zeile unter den Buttons */
.oap-auto-badge {
  display: block;
  width: 100%;
  text-align: center;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: none;
  margin-top: 10px;
  box-sizing: border-box;
}
.oap-auto-badge-live {
  background: var(--bg-auto-badge, #0d1f10);
  color: var(--color-auto-badge, #3a8a46);
}
.oap-auto-badge-assist {
  background: var(--bg-assist-badge, #1e1608);
  color: var(--color-assist-badge, #a07020);
}


/* ── Serverbar ───────────────────────────────────────────── */
.serverbar {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--radius); border: 2px solid var(--border);
  padding: 10px 18px; margin-bottom: 14px;
  transition: border-color .4s, background .4s;
  flex-wrap: wrap; gap: 8px;
}
.serverbar.enc-ok  { border-color: var(--green); background: rgba(76,175,80,.07); }
.serverbar.enc-bad { border-color: var(--red);   background: rgba(244,67,54,.07); }
.enc-label { font-size: .8rem; font-weight: 700; color: var(--muted);
             text-transform: uppercase; letter-spacing: .8px; }
.enc-connections { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enc-chip { display: flex; align-items: center; gap: 6px;
            background: var(--card2); border: 1px solid var(--border);
            border-radius: 20px; padding: 5px 12px; font-size: .8rem; }
.enc-chip.conn-on  { border-color: rgba(76,175,80,.5); background: rgba(76,175,80,.08); }
.enc-chip.conn-off { border-color: rgba(244,67,54,.3); background: rgba(244,67,54,.05); }
.enc-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.enc-chip.conn-on  .enc-chip-dot { background: var(--green); }
.enc-chip.conn-off .enc-chip-dot { background: var(--red); opacity: .5; }
.enc-chip-name { font-weight: 600; color: var(--text); }
.enc-chip-listeners { font-size: .75rem; color: var(--muted); }
.enc-chip-btn { background: none; border: 1px solid var(--border); border-radius: 10px;
                color: var(--muted); font-size: .72rem; font-weight: 700;
                padding: 2px 8px; cursor: pointer; transition: .15s; }
.enc-chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.enc-val          { font-size: 1rem; font-weight: 900; }
.enc-val.ok       { color: var(--green); }
.enc-val.bad      { color: var(--red); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

/* ── Control Buttons ─────────────────────────────────────── */
.controls { margin-bottom: 0; }
.controls-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.ctrl-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px 10px;
  border: none; border-radius: var(--radius);
  font-size: .88rem; font-weight: 800; color: #fff;
  cursor: pointer; transition: transform .1s, filter .1s;
  min-height: 80px; text-align: center;
  box-shadow: var(--shadow);
}
.ctrl-btn:active, .ctrl-btn.btn-busy { transform: scale(.96); filter: brightness(.85); }
.ctrl-btn:disabled {
  opacity: .4; cursor: default; filter: grayscale(.4);
  box-shadow: none;
}
.ctrl-btn:disabled:active { transform: none; filter: grayscale(.4); }
.ctrl-icon { font-size: 1.5rem; line-height: 1; }
.btn-next         { background: var(--btn-next); }
.btn-auto-start   { background: var(--btn-auto-auto); }
.btn-auto-assist  { background: var(--btn-auto-assist); }
.btn-auto-break   { background: var(--btn-auto-break); }
.btn-auto-stop    { background: var(--btn-auto-stop); }
.btn-enc-start    { background: var(--btn-enc-start); }
/* Zustandsabhaengige Darstellung ASSIST/AUTO (260906): passt sich dem
   tatsaechlichen mAirList-Automationsstatus an, wie im mAirList-Player
   selbst - der gerade NICHT aktive Modus-Button wird farblos/outline,
   der aktive AUTO-Button blinkt (Rahmen bleibt konstant sichtbar). */
.ctrl-btn-inactive-mode {
  background: transparent !important;
  border: 2px solid var(--border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
@keyframes ctrlAutoBlink {
  0%, 49.9%  { background: var(--btn-auto-auto); }
  50%, 100%  { background: var(--btn-auto-blink-bg, var(--card2)); }
}
.btn-auto-start.ctrl-btn-auto-live {
  border: 2px solid var(--btn-auto-auto);
  animation: ctrlAutoBlink 2s step-end infinite;
}
.btn-enc-stop     { background: var(--btn-enc-stop); }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #2d3138; border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 22px;
  font-weight: 700; font-size: .92rem;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 200;
}
.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-ok    { border-color: var(--green); color: #a5d6a7; }
.toast-error { border-color: var(--red);   color: #ef9a9a; }

/* ── Now Playing ─────────────────────────────────────────── */
.now-playing {
  position: relative; overflow: hidden;
  background: var(--bg-now-playing, var(--card)); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  margin-bottom: 12px; padding: 24px 22px 76px;
}
.now-playing::before {
  content: ''; position: absolute; inset: 0;
  width: var(--progress); height: 100%;
  background: var(--progress-color-theme, var(--progress-color));
  opacity: var(--progress-opacity, .18);
  transition: width .35s linear, background .3s ease;
  z-index: 1; pointer-events: none;
}
.now-playing > * { position: relative; z-index: 2; }
/* npIncoming liegt beim Swap absolut UEBER npCurrent statt im Textfluss
   darunter - vorher standen beim Titelwechsel fuer die Dauer der Animation
   alter und neuer Titel gleichzeitig im normalen Fluss, wodurch der Kasten
   auf die doppelte Texthoehe aufblaehte und danach abrupt zusammenklappte
   (per Screenrecording verifiziert, 260909). Die Wrapper-Hoehe richtet sich
   dadurch nur noch nach npCurrent (normaler Fluss); npIncoming ueberlagert
   ihn waehrend der Animation, ohne den Kasten zu strecken. */
.np-textwrap { position: relative; }
#npIncoming { position: absolute; top: 0; left: 0; width: 100%; }
.np-label { font-size: .8rem; font-weight: 700; color: var(--color-np-label, var(--muted)); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.artist { font-size: 1.15rem; color: var(--color-artist, #d0d8e4); font-weight: 600; margin-bottom: 4px; }
.title  { font-size: 2.2rem; line-height: 1.2; font-weight: 800; color: var(--color-np-title, var(--text)); }
.ramp-time { position: absolute; left: 16px; bottom: 14px; color: var(--amber); font-weight: 800; font-size: 1.05rem; }
.time-remaining { position: absolute; right: 18px; bottom: 14px; font-weight: 900; font-size: 1.6rem; color: var(--color-remaining, #aaffaa); transition: color .25s; }
@keyframes flyUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-48px); opacity: 0; } }
.history-fly { animation: flyUp .35s ease-in forwards; }

/* Swap animation */
.swap.outgoing #npCurrent { animation: slideOutLeft .45s ease forwards; }
.swap.incoming #npIncoming { animation: slideInUp .45s ease forwards; }
@keyframes slideOutLeft { to { transform: translateX(-10%); opacity: 0; } }
@keyframes slideInUp { from { transform: translateY(12%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Zeit-Strip ──────────────────────────────────────────── */
.time-strip {
  display: flex;
  flex-direction: column-reverse;  /* Digitaluhr oben, Radiosprech unten */
  align-items: center;
  gap: 4px;
  margin: 20px 0; color: var(--amber); cursor: pointer;
  text-align: center;
}
.time-spoken  {
  font-weight: 400; font-size: 1.55rem; line-height: 1.2;
}
.time-digital {
  font-weight: 700; font-size: 1.3rem; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
  white-space: nowrap;
}
.time-spoken b { font-weight: 900; font-size: 1.1em; color: var(--amber); text-transform: capitalize; }
.time-date {
  font-size: 1.0rem; font-weight: 600; opacity: .7;
  letter-spacing: .3px; color: var(--amber);
}

/* ── History List ────────────────────────────────────────── */
.history-list { margin-bottom: 8px; }
.history-list .label { font-size: .8rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
ul.history li {
  opacity: .45; font-style: italic;
  border-left: 2px solid var(--border);
  padding-left: 8px;
}
ul.history li:hover { opacity: .65; }

/* ── Upcoming List ───────────────────────────────────────── */
.next-list {
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 16px 18px;
  overflow: visible;
}
.next-list .label { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.upcoming { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.upcoming li {
  display: grid; grid-template-columns: 90px 1fr minmax(120px, max-content);
  gap: 6px; align-items: center;
  background: var(--card2); border: 1px solid var(--border);
  padding: 10px 14px; border-radius: 9px; color: var(--color-pl-text, #c8d0db);
}
.upcoming li .next-time { font-weight: 800; color: var(--accent2); }
.upcoming li .mid { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; min-width: 0; }
.upcoming li .mid .a { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming li .mid .t { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming li .right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.right .dur  { color: var(--color-pl-dur, #aab3c0); font-weight: 700; }
.dur-mobile  { display: none; } /* Desktop: versteckt, nur auf Mobile sichtbar */
.right .ramp { color: var(--amber); font-weight: 800; font-size: .85rem; }
.upcoming li.fix        { color: var(--color-pl-fix, #ff9800); }
.upcoming li.jingle     { color: var(--color-pl-jingle, #4da6ff); }
.upcoming li.hourborder { color: var(--color-pl-hour, #e57373); font-weight: 700; }
.upcoming li.inactive { opacity: .5; }
.upcoming li.inactive .next-time, .upcoming li.inactive .a, .upcoming li.inactive .t, .upcoming li.inactive .dur { color: #888 !important; }
.upcoming li.placeholder { grid-template-columns: 1fr; color: var(--muted); justify-items: center; }

/* ── Raw-Ansicht (Kommende Titel, unaufbereitet) ────────────── */
/* Rahmen bewusst nur am Toggle-Button, nicht an der ganzen Section (Absprache 260813).
   Attribut-Selektor deckt oben + unten (…-bottom) mit ab. */
[id^="oap-raw-toggle-btn"].oap-cd-toggle-active,
[id^="oap-comment-toggle-btn"].oap-cd-toggle-active { border-color: var(--accent, #4a9eff); }
/* Hover immer grau statt blau (wie die ausgegraute Item-Zeit) — sonst ist im
   aktivierten Zustand kein Unterschied zwischen "schwebt drüber" und "aktiv"
   mehr erkennbar, und ohne Hover-Effekt fehlt jede Klick-Rückmeldung */
[id^="oap-raw-toggle-btn"]:hover,
[id^="oap-raw-toggle-btn"].oap-cd-toggle-active:hover,
[id^="oap-comment-toggle-btn"]:hover,
[id^="oap-comment-toggle-btn"].oap-cd-toggle-active:hover { border-color: #888; color: #888; }
/* Raw-Meta-Zeile: letzte Zeile im normalen Playlist-Element (Typ/Status/Zeit/Flags) */
.upcoming li .raw-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; margin-top: 2px; margin-right: 14px;
  white-space: normal; word-break: break-word;
}
.raw-meta .raw-sep { opacity: .35; }
/* Gestufte Helligkeit in derselben Blaugrau-Familie wie der normale Zeilentext,
   damit die Kategorien auf einen Blick auseinanderzuhalten sind, ohne dass es
   wie eine bunte Ampel aussieht (Absprache 260814). */
.raw-meta .raw-seg-type    { opacity: .5; }
.raw-meta .raw-seg-timing  { opacity: .65; color: var(--color-pl-text, #c8d0db); }
.raw-meta .raw-seg-fixtime { opacity: .85; color: var(--color-pl-text, #c8d0db); }
.raw-meta .raw-seg-genre   { opacity: .58; }
.raw-meta .raw-seg-ramp    { opacity: .8; color: var(--color-pl-text, #c8d0db); }
.raw-meta .raw-seg-flag    { opacity: 1; color: var(--color-pl-fix, #ff9800); font-weight: 700; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { text-align: center; color: var(--muted); padding: 16px; font-size: .83rem; border-top: 1px solid var(--border); margin-top: 10px; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .nav-right  { gap: 8px; }
  .nav-user   { font-size: .72rem; white-space: normal; } /* kompakt statt ausgeblendet */


  .controls-inner { grid-template-columns: 1fr 1fr; }

  .title { font-size: 1.7rem; }
  .time-remaining { font-size: 1.3rem; }

  /* Buttons in eigener Zeile auf Mobile */
  .upcoming li {
    display: block;
    padding: 10px 12px;
  }
  .upcoming li .next-time { font-size: .95rem; display: inline-block; margin-bottom: 2px; }
  .upcoming li .mid { overflow: hidden; display: block; }
  .upcoming li .right {
    display: block !important;
    width: 100%;
    margin-top: 4px;
  }
  .upcoming li .right .dur  { display: inline; font-size: .85rem; color: var(--color-pl-dur, #aab3c0); font-weight: 700; margin-right: 8px; }
  .upcoming li .right .ramp { display: inline; color: var(--amber); font-weight: 800; font-size: .85rem; }
  .upcoming li .edit-btns { display: flex; width: 100%; justify-content: flex-start; margin-top: 4px; flex-wrap: wrap; gap: 4px; }
  .edit-btn { padding: 5px 12px; font-size: .9rem; }

  .serverbar { flex-direction: column; align-items: stretch; }
  .stream-status { justify-content: flex-start; }
}
@media (max-width: 320px) {
  .controls-inner { grid-template-columns: 1fr; }
  .upcoming li .right .dur { display: none; }
  .upcoming li .right .ramp { display: none; }
}

/* ── Playlist-Zeilengröße ───────────────────────────────── */
.pl-size-s  .upcoming li { font-size: .78rem; }
.pl-size-s  .upcoming li .next-time { font-size: .78rem; min-width: 42px; }
.pl-size-s  .upcoming li { padding: 4px 10px; }
.pl-size-s  .edit-btn { height: 22px; min-width: 22px; font-size: .72rem; }

.pl-size-m  .upcoming li { font-size: .88rem; }  /* default */

.pl-size-l  .upcoming li { font-size: 1.05rem; }
.pl-size-l  .upcoming li .next-time { font-size: 1rem; min-width: 56px; }
.pl-size-l  .upcoming li { padding: 9px 14px; }
.pl-size-l  .edit-btn { height: 30px; min-width: 30px; font-size: .9rem; }

.pl-size-xl .upcoming li { font-size: 1.2rem; }
.pl-size-xl .upcoming li .next-time { font-size: 1.1rem; min-width: 64px; }
.pl-size-xl .upcoming li { padding: 12px 16px; }
.pl-size-xl .edit-btn { height: 34px; min-width: 34px; font-size: 1rem; }
.monitor-dimmed {
  opacity: .35;
  transition: opacity .4s;
}
/* Nur für Nicht-Technik Rollen: auch Klicks sperren */
.monitor-dimmed-locked {
  opacity: .35;
  pointer-events: none;
  transition: opacity .4s;
  user-select: none;
}
.monitor-onair-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 10px;
  background: rgba(255, 152, 0, .12);
  border: 1px solid rgba(255, 152, 0, .4);
  border-radius: var(--radius-sm);
  color: var(--color-ramp, #ffb74d);
  font-size: .9rem;
  font-weight: 600;
  animation: bannerPulse 2.5s ease-in-out infinite;
}
@keyframes bannerPulse {
  0%, 100% { border-color: rgba(255,152,0,.4); }
  50%       { border-color: rgba(255,152,0,.85); }
}
:root { --btn-play: #1b5e20; }
.btn-play { background: var(--btn-play); font-size: 1rem; }

/* ── Encoder Status ──────────────────────────────────────── */
.encoder-status { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Stream-Monitor Section ──────────────────────────────── */
.monitor-section {
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 12px 14px; margin-bottom: 14px;
}
.monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.monitor-chip {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card2);
  width: 100%; box-sizing: border-box; min-width: 0;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.monitor-chip-clickable { cursor: pointer !important; user-select: none; }
.monitor-chip-clickable,
.monitor-chip-clickable * { cursor: pointer !important; }
.monitor-chip-clickable:hover {
  background: rgba(79,195,247,.09);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,195,247,.2), 0 3px 10px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.monitor-chip-clickable:active { transform: scale(.96) translateY(0); box-shadow: none; }
.monitor-chip-locked {
  opacity: .7;
  filter: grayscale(.3) brightness(.85);
  cursor: default;
}
.monitor-chip-locked .mon-name { color: var(--muted); }
.mon-toggling { opacity: .5; pointer-events: none; cursor: wait !important; }
.mon-name { display: block; width: 100%; font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: 6px; text-transform: none; font-variant: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-badge {
  display: block; width: 100%; box-sizing: border-box; padding: 3px 9px; border-radius: 6px;
  font-size: .78rem; font-weight: 700; margin-top: 3px;
  background: var(--card2); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mon-badge-sm { font-size: .72rem; }
/* mAirList states */
.mon-disarmed .mon-badge-sm { background: rgba(122,132,148,.15); color: var(--muted); }
.mon-armed    .mon-badge-sm { background: rgba(255,202,40,.15);  color: var(--amber); }
.mon-onair    .mon-badge-sm { background: rgba(76,175,80,.2);    color: var(--green); }
/* Icecast states – set via JS on the badge directly */
.ice-badge-on      { background: rgba(76,175,80,.2);   color: var(--green)  !important; }
.ice-badge-off     { background: rgba(244,67,54,.15);  color: var(--red)    !important; }
.ice-badge-stopped { background: rgba(255,152,0,.2);   color: #ff9800       !important;
                     animation: ice-stopped-pulse 2s ease-in-out infinite; }
@keyframes ice-stopped-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

/* ── Icecast Section ─────────────────────────────────────── */
.section-label { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.mon-workflow-hint {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(79,195,247,.06);
  border: 1px solid rgba(79,195,247,.2);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
}
.mon-workflow-hint strong { color: var(--text); font-size: .83rem; }
.mon-workflow-hint ol { margin: 6px 0 0 16px; padding: 0; }
.mon-workflow-hint ol li { margin-bottom: 3px; }
.mon-workflow-hint ol li:last-child { color: var(--accent); font-weight: 600; }
.mon-workflow-hint.hint-collapsed { display: none; }
@media (max-width: 680px) {
  .monitor-grid, .icecast-grid { gap: 8px; }
  .monitor-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .monitor-chip { padding: 8px 10px; }
  .icecast-chip { grid-template-columns: 1fr auto; min-width: 160px; }
  .ice-listeners { display: none; }
}

/* ── Playlist-Editor Buttons ─────────────────────────────── */
.edit-btns {
  display: flex; gap: 4px; margin-top: 4px; justify-content: flex-end; align-items: flex-start;
}
.edit-btn {
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); border-radius: 5px;
  padding: 0 6px; font-size: .8rem; cursor: pointer;
  transition: background .1s, color .1s;
  height: 26px; min-width: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.edit-btn:hover         { background: var(--card2); color: var(--text); }
.edit-btn-del           { border-color: rgba(244,67,54,.3); }
.edit-btn-del:hover     { background: rgba(244,67,54,.2); color: #ff8a80; border-color: rgba(244,67,54,.6); }
.preview-btn {
  background: var(--btn-preview-bg);
  border-color: var(--btn-preview-icon);
  color: var(--btn-preview-icon);
}
.preview-btn:hover      { filter: brightness(1.2); }
.preview-btn-active     { box-shadow: 0 0 0 1px var(--btn-preview-icon) inset; filter: brightness(1.15); }
.preview-btn-elsewhere  { border-style: dashed; opacity: .8; }
.upcoming li .edit-btns { opacity: 1; } /* immer sichtbar */
@media (max-width: 680px) {
  .upcoming li .edit-btns { opacity: 1; } /* immer sichtbar auf Mobile */
}

/* ── Drag & Drop (Desktop only) ─────────────────────────── */
/* Drag-Handle: standardmäßig versteckt, absolut positioniert links der Karte */
.drag-handle {
  display: none;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  padding: 4px 3px;
  text-align: center;
  width: 20px;
}
.drag-handle:hover { color: var(--text); }
.drag-handle:active { cursor: grabbing; }

/* Desktop: Handle anzeigen, Pfeile ↑↓ ausblenden, grab-Cursor auf li, Playlist einrücken */
@media (hover: hover) and (pointer: fine) {
  .edit-btn-arrows { display: none; }
  .drag-handle { display: block; }
  .upcoming li { position: relative; }
  .upcoming li[draggable="true"] { cursor: grab; }
  .upcoming li[draggable="true"]:active { cursor: grabbing; }
  .next-list { padding-left: 48px; overflow: visible; }
}

/* Drag-Indikator: horizontale Linie oberhalb oder unterhalb des Elements */
.upcoming li.drag-over-above,
.upcoming li.drag-over-below {
  position: relative;
}
.upcoming li.drag-over-above::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -48px;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent2);
  box-shadow: 0 0 6px var(--accent2);
}
.upcoming li.drag-over-below::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -48px;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--accent2);
  box-shadow: 0 0 6px var(--accent2);
}
.upcoming li.dragging {
  opacity: .4;
}
/* ── Audio-Player Chip ───────────────────────────────────── */
/* ── Player-Wrap (Container wie monitor-section) ─────────── */
.player-wrap {
  background: var(--card); border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.player-section {
  display: flex; align-items: center; gap: 12px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  transition: border-color .3s;
}
.player-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: #1b5e20; border: none; color: #fff;
  font-size: 13px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.player-btn:active { transform: scale(.92); }
.player-meta { flex: 1; overflow: hidden; min-width: 0; min-width: 120px; }
.player-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: .4px; }
.player-title { font-size: .85rem; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-chip { transition: border-color .3s; }
.player-vol {
  width: 70px; flex-shrink: 0;
  accent-color: var(--accent);
}
.player-select {
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px;
  padding: 6px 8px; font-size: .85rem;
  min-width: 160px; max-width: 260px;
  cursor: pointer; flex-shrink: 0;
}
@media (max-width: 680px) {
  .player-chip   { max-width: 100%; }
  .player-vol    { width: 50px; }
  .player-section { flex-wrap: wrap; }
  .player-select {
    max-width: 100%;
    width: 100%;
    order: 10; /* immer letzte Zeile */
    flex-basis: 100%;
  }
}

/* ── Wetter ──────────────────────────────────────────────── */
.weather-section {
  margin-bottom: 14px;
  /* Überlauf wird per JS als inline style gesetzt */
}
.weather-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.weather-chip {
  flex: 1 1 var(--wx-min, 140px);
  min-width: var(--wx-min, 140px);
  border-radius: 12px;
  padding: 18px 12px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--wx-font, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  color: #fff;
}
.weather-icon  { width: 44px; height: 44px; margin: 0 0 4px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
                 display: var(--wx-icon-display, block); }
.weather-city  { font-size: var(--wx-city-size, 1.3rem); font-weight: 800; letter-spacing: .2px; margin-bottom: 2px;
                 text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.weather-temp  { font-size: var(--wx-temp-size, 2rem); font-weight: 900; line-height: 1;
                 text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.weather-desc  { font-size: var(--wx-desc-size, 1.0rem); opacity: .95; margin-top: 6px; line-height: 1.2;
                 text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.weather-updated { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 8px; }

@media (max-width: 680px) {
  .weather-grid { gap: 8px; }
  .weather-chip { flex: 1 1 calc(33% - 8px); min-width: 0; }
  .weather-temp { font-size: 1.3rem; }
}
@media (max-width: 400px) {
  .weather-chip { flex: 1 1 calc(50% - 8px); }
}

/* ── Wettervorschau (eine Region/Stadt, Absprache 260915) ─── */
.weather-forecast-section {
  margin-bottom: 14px;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card2);
  border: 1px solid var(--border);
  font-family: var(--wxfc-font, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
.weather-fc-cols {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.weather-fc-cols .weather-fc-row { flex: 1 1 0; padding: 0; min-width: 0; }
.weather-fc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.weather-fc-row .weather-icon { margin: 0; flex: none; }
.weather-fc-text { flex: 1; min-width: 0; }
.weather-fc-label { font-size: .78rem; color: var(--muted); }
.weather-fc-desc  { font-size: var(--wxfc-desc-size, 1.0rem); }
@media (max-width: 680px) {
  .weather-fc-cols { flex-direction: column; }
}

/* ── Zonen-Trennung Admin / Redaktion ────────────────────── */
.zone-admin {
  background: var(--bg-admin, #0d0f12);
  border-radius: var(--radius);
  /* 15px an jeder Seite über den Dashboard-Padding hinaus */
  margin: 0 -15px 12px;
  padding: 18px 15px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),
              0 4px 18px rgba(0,0,0,.4);
}
.zone-editorial {
  /* kein eigener Hintergrund */
}
.zone-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  opacity: .45;
  margin-bottom: 12px;
  padding-left: 2px;
}
/* Divider entfernt – Abstand durch margin-bottom auf zone-admin */
.zone-divider { display: none; }

/* ── Playlist-Edit Animationen ───────────────────────────── */
@keyframes pl-flash-yellow {
  0%   { background: var(--card2); }
  25%  { background: rgba(255,202,40,.35); box-shadow: 0 0 12px rgba(255,202,40,.4); }
  100% { background: var(--card2); }
}
@keyframes pl-flash-green {
  0%   { background: var(--card2); }
  25%  { background: rgba(76,175,80,.35); box-shadow: 0 0 12px rgba(76,175,80,.4); }
  100% { background: var(--card2); }
}
@keyframes pl-delete {
  0%   { opacity: 1; transform: translateX(0);    max-height: 80px; }
  40%  { opacity: 0; transform: translateX(60px); background: rgba(244,67,54,.25); max-height: 80px; }
  100% { opacity: 0; transform: translateX(60px); max-height: 0; padding: 0; margin: 0; border: none; }
}
.pl-flash-yellow { animation: pl-flash-yellow 1.2s ease-out forwards; }
.pl-flash-green  { animation: pl-flash-green  1.2s ease-out forwards; }
.pl-deleting     { animation: pl-delete 500ms ease-in forwards; overflow: hidden; }


/* ── Design-Editor Highlight ─────────────────────────────── */
.__oap_hl {
  outline: 3px solid #f0a030 !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
  transition: outline .15s !important;
}

/* ── DB Server Titelsuche ────────────────────────────────── */
.edit-btn-dbsearch {
  background: transparent;
  border: 1px solid rgba(79,195,247,.4);
  color: #4fc3f7;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: .85rem;
  cursor: pointer;
  transition: .15s;
  line-height: 1;
  margin-left: 3px;
}
.edit-btn-dbsearch:hover  { background: rgba(79,195,247,.15); border-color: #4fc3f7; }
.edit-btn-dbsearch:disabled { opacity: .35; cursor: not-allowed; }

/* Modal */
.oap-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
}
.oap-modal.open { display: flex; }
.oap-modal-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(780px, 96vw);
  max-height: min(520px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  font-size: 1rem;
}
.oap-modal-box.oap-modal-table {
  width: min(780px, 96vw);
  min-width: 480px;
  min-height: 280px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  resize: both;
  overflow: auto;
  position: relative;
}
.oap-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent2);
  flex-shrink: 0;
}
.oap-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.oap-modal-close:hover { background: var(--card2); color: var(--text); }

/* Tabelle */
.oap-dbs-th {
  position: sticky;
  top: 0;
  background: var(--card2);
  border-bottom: 2px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  z-index: 1;
}
.oap-dbs-th:hover { color: var(--text); }
.oap-dbs-th::after        { content: ' ↑↓'; color: var(--muted); opacity: .45; font-size: .8em; letter-spacing: -.1em; }
.oap-dbs-th.sort-asc::after  { content: ' ↑'; color: var(--accent); opacity: 1; font-size: .85em; letter-spacing: 0; }
.oap-dbs-th.sort-desc::after { content: ' ↓'; color: var(--accent); opacity: 1; font-size: .85em; letter-spacing: 0; }
.oap-dbs-th.sort-asc,
.oap-dbs-th.sort-desc { color: var(--accent2, var(--accent)); }
.oap-dbs-th-actions {
  position: sticky;
  right: 0;
  background: var(--card2);
  z-index: 2;
  width: 76px;
  cursor: default;
}
.oap-dbs-tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.oap-dbs-tr:hover { background: var(--card2); }
.oap-dbs-td {
  padding: 6px 10px;
  font-size: .85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.oap-dbs-td:first-child { color: var(--muted); font-size: .8rem; max-width: 140px; }
.oap-dbs-td-actions {
  background: var(--card);
  white-space: nowrap;
  text-align: right;
  padding: 4px 8px;
  overflow: visible;
  max-width: none;
}
.oap-dbs-tr:hover .oap-dbs-td-actions { background: var(--card2); }

/* Aktions-Buttons */
.oap-dbsearch-btn {
  background: rgba(79,195,247,.1);
  border: 1px solid rgba(79,195,247,.3);
  color: #4fc3f7;
  border-radius: 5px;
  padding: 0 8px;
  font-size: .8rem;
  cursor: pointer;
  transition: .15s;
  margin-left: 3px;
  height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: top;
}
.oap-dbsearch-btn:hover { background: rgba(79,195,247,.25); }
.oap-dbsearch-btn-end {
  background: rgba(76,175,80,.1);
  border-color: rgba(76,175,80,.3);
  color: #a5d6a7;
}
.oap-dbsearch-btn-end:hover { background: rgba(76,175,80,.25); }
.oap-preview-btn { display: none; } /* Klasse nicht mehr verwendet - .edit-btn.preview-btn ersetzt sie, siehe unten */

/* ── Titel-Vorhören – Transport-Buttons in der Zeile selbst ──
   (kein schwebendes Element mehr, Absprache 260917 Runde 2). Buttons +
   Scrubber bilden EINEN zusammenhaengenden Block (.preview-group), damit
   der Regler exakt so breit wird wie die 5 Buttons darueber, nicht die
   ganze Zeile (Absprache 260917, 6. Runde). inline-flex statt flex: die
   Gruppe soll sich an ihrem Inhalt orientieren (shrink-to-fit), nicht die
   volle verfuegbare Breite einnehmen. */
/* inline-grid statt inline-flex/column: verhindert einen Zirkelbezug, bei
   dem der Scrubber (width:100%) die Breite seines Elters (.preview-group,
   shrink-to-fit) mitbestimmen soll, waehrend er gleichzeitig von genau
   dieser Breite abhaengt - Flexbox loest das nicht zuverlaessig auf und
   faellt fuer den Regler auf seine native Standardbreite zurueck, oft
   breiter als die 5 Buttons, wodurch die ganze Gruppe unnoetig breit wird
   (sichtbare Luecke vor den Einfuege-Buttons in der DB-Suche, Absprache
   260917, letzte Runde). Grid berechnet Spaltenbreiten aus dem Inhalt
   sauberer und ohne diesen Fallback. */
.preview-group {
  display: inline-grid;
  grid-template-columns: max-content;
  align-items: stretch;
  gap: 3px;
  vertical-align: top;
}
.preview-transport {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.preview-seek-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.preview-seek-track {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.preview-seek {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 20px;
  accent-color: var(--btn-preview-icon);
  cursor: pointer;
}
/* Cue-/Ramp-/Hook-/Outro-Marker auf dem Regler - liegen ueber der Spur,
   pointer-events:none damit sie das Ziehen nicht stoeren. Die Positionen
   nehmen keine Ruecksicht auf die Innenabstaende des nativen Thumbs (die
   variieren je Browser) - auf ein paar Pixel genau, nicht pixelgenau,
   reicht fuer eine Orientierungshilfe beim Vorhoeren voellig aus. */
.preview-marker {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 1px;
  opacity: .85;
}
.preview-marker.mk-cue   { background: #4caf50; }
.preview-marker.mk-ramp  { background: var(--amber, #f0a030); }
.preview-marker.mk-hook  { background: #4fc3f7; }
.preview-marker.mk-outro { background: #ef5350; }
.preview-time {
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Scrubber-Lupe (Desktop) ──────────────────────────────── */
.preview-magnifier {
  position: fixed;
  border: 2px solid var(--btn-preview-icon);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 9500;
  background: var(--card);
  box-shadow: var(--shadow);
  display: none;
}
.preview-magnifier-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
/* Im Klon nochmal denselben Hintergrund wie die Zeile selbst, sonst
   scheint der dunkle Lupenrahmen durch die transparente Spur durch. */
.preview-magnifier-inner .preview-seek-track { background: var(--card); }

/* ── DB Search Column Toggle Bar ─────────────────────────── */
.oap-dbsearch-scroll {
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* ── DB Search Folder Filter ─────────────────────────────── */
.oap-dbfolder-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .9rem;
  padding: 2px 7px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.oap-dbfolder-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}
.oap-dbfolder-toggle-on {
  border-color: var(--accent);
  color: var(--accent);
}
.oap-dbfolder-bar {
  display: none;
  width: min(780px, 96vw);
  min-width: 480px;
  box-sizing: border-box;
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  flex-wrap: wrap;
  gap: 6px;
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid var(--border);
  border-top: none;
  background: var(--card2);
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
  transition: max-height .2s ease, padding .2s ease;
}
.oap-dbfolder-bar-open {
  display: flex;
  max-height: 160px;
  padding: 6px 16px;
  overflow-y: auto;
}
.oap-dbcol-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.oap-dbcol-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.oap-dbcol-chip-on {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.oap-dbcol-reset {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  margin-left: 4px;
  transition: color .15s, border-color .15s;
}
.oap-dbcol-reset:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Playlist & NowPlaying Comment Display ───────────────── */
.pl-comment {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-comment {
  font-size: .82rem;
  line-height: 1.3;
  min-height: 1.3em;
  color: var(--color-np-label, var(--muted));
  font-style: italic;
  margin-top: 3px;
  text-align: left;
}
.oap-cd-toggle-btn { opacity: .45; transition: opacity .15s; }
.oap-cd-toggle-btn.oap-cd-toggle-active { opacity: 1; color: var(--accent, #4a9eff); }

/* Countdown-Kacheln auf schmalen Screens: Spalten-Layout statt Row, sonst
   quetscht sich "bis Ende von <Titel>" neben den (dort oft grossen) Wert.
   Muss NACH den Basis-Regeln fuer .oap-cd-inner/.oap-arm-inner stehen -
   bei gleicher Spezifitaet gewinnt sonst die spaeter stehende Basis-Regel,
   unabhaengig vom Media Query. */
@media (max-width: 680px) {
  .oap-cd-inner, .oap-arm-inner {
    flex-direction: column;
    height: auto;
    min-height: 64px;
    padding: 8px 16px;
    gap: 2px;
  }
  .oap-arm-sub-title { display: block; margin-top: 1px; }
}