/* =====================================================================
   VENUETONE — Abspielgerät

   Gestaltet für ein Tablet, das an der Wand oder neben der Kasse hängt.
   Das heißt: groß genug, um aus zwei Metern zu erkennen, was läuft, und
   Bedienelemente, die man mit dem Daumen trifft, ohne hinzusehen.

   Dieselbe Farbsprache wie die Sendezentrale — Bernstein für aktiv,
   Blaugrün für Messwerte, Monospace für alles Zählbare.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Karla:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Gestaltung „Abendkarte", dunkle Fassung.

     Das Radio bleibt dunkel -- es läuft zehn Stunden am Tag auf einem
     Gerät im Raum. Ein heller Vollbildschirm blendet in einer Bar und
     brennt sich auf Dauer ein. Dieselbe Palette, anderer Grund. */

  --ink-900:   #140E1B;   /* Seitengrund                              */
  --ink-850:   #1A1222;   /* Aubergine: Leisten, Karten               */
  --ink-800:   #241830;
  --ink-700:   #2E2038;
  --ink-600:   #3A2A46;

  --line:      #382A46;
  --line-soft: #291D34;

  --text:      #E4DFEA;
  --text-mid:  #B4A9C0;
  --text-dim:  #A399AF;

  --signal:    #C99A4E;   /* Messing auf Aubergine     7,1:1          */
  --signal-d:  #A87B34;
  --meter:     #9A8CC4;   /* zweite Stimme: Pflaume, aufgehellt       */
  --ok:        #5FB894;   /* Patina                                    */
  --alert:     #E28080;

  --sans:    'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'IBM Plex Mono', Consolas, monospace;
  --display: 'Bricolage Grotesque', Georgia, serif;
}

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

/* --------------------------------------------------------------------
   Das hidden-Attribut muss gewinnen.

   Browser blenden [hidden] über eine Standardregel aus. Jede eigene
   Regel mit display schlägt sie -- .screen { display: flex } sorgte
   dafür, dass die drei Bildschirme trotz hidden untereinander standen
   statt sich abzuwechseln. Nach dem Verbinden änderte sich oben nichts,
   weil der Startbildschirm die ganze Zeit darunter lag.

   Deshalb hier einmal zentral und mit Vorrang.
   -------------------------------------------------------------------- */
[hidden] { display: none !important; }


html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Nichts soll sich im Laden versehentlich markieren lassen */
  user-select: none;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* --- Vollbildschirme (Verbinden, Start) ----------------------------- */

.screen {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.screen__inner { width: 100%; max-width: 420px; text-align: center; }

.brand {
  font-family: var(--display);
  font-weight: 600; font-size: 30px; letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.brand span { color: var(--signal); }

.lead { color: var(--text-mid); margin: 0 0 28px; }


.hint { margin-top: 26px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

/* --- Verbinden ------------------------------------------------------ */

.pair { text-align: left; }
.pair label {
  display: block; font-size: 13px; color: var(--text-mid); margin-bottom: 6px;
}
.pair input {
  width: 100%;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--mono); font-size: 15px;
  padding: 13px 14px;
  margin-bottom: 14px;
}
.pair input:focus { border-color: var(--meter); outline: none; }
.pair__error { color: var(--alert); font-size: 13.5px; margin: 12px 0 0; min-height: 1.2em; }

/* --- Schaltflächen -------------------------------------------------- */

.btn {
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 13px 22px;
  cursor: pointer;
}
.btn:active { background: var(--ink-800); }
.btn[disabled] { opacity: .5; }

.btn--primary { background: var(--signal); border-color: var(--signal); color: #16100A; width: 100%; }

/* Der Startknopf ist absichtlich groß: Er wird einmal am Morgen von
   jemandem gedrückt, der gleichzeitig den Laden aufschließt. */

/* --- Kopfzeile ------------------------------------------------------ */


.bar__net { color: var(--text-dim); display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-dim); }
.dot--on  { background: var(--ok); }
.dot--off { background: var(--alert); }

/* --- Aktueller Titel ------------------------------------------------ */


.cover {
  width: 210px; height: 210px; flex-shrink: 0;
  background: var(--ink-800) center/cover no-repeat;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cover.has-image { border-color: var(--line-soft); }



.progress {
  height: 3px; background: var(--ink-700); border-radius: 2px; overflow: hidden;
}
.progress__fill { display: block; height: 100%; width: 0; background: var(--meter); }

.progress__times {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-dim);
  margin-top: 7px;
}

.status { font-size: 14px; color: var(--signal); margin: 18px 0 0; min-height: 1.4em; }
.status.is-empty { margin: 0; min-height: 0; }

/* --- Bedienung ------------------------------------------------------ */

.controls .btn { min-width: 116px; }

.vol { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.vol span { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.vol input { width: 170px; accent-color: var(--signal); }

/* --- Puffer als sichtbare Reihe ------------------------------------- */




/* Hohl = noch nicht geladen, gefüllt = liegt offline bereit */
.up--ready .up__dot { background: var(--meter); border-color: var(--meter); }


/* --- Schmale Geräte -------------------------------------------------- */

@media (max-width: 720px) {
  .now { flex-direction: column; text-align: center; gap: 22px; padding: 24px 0; }
  .cover { width: 160px; height: 160px; }
  .progress__times { justify-content: space-between; }
  .controls { flex-wrap: wrap; }
  .vol { margin-left: 0; width: 100%; }
  .vol input { flex: 1; width: auto; }
  .upnext__list { flex-direction: column; gap: 7px; }
  .up__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Rückweg ins Kundenkonto, nur bei Aufruf von dort */
.bar__back {
  color: var(--text-dim); text-decoration: none; font-size: 12.5px;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 3px;
  flex-shrink: 0;
}
.bar__back:hover { color: var(--text); border-color: var(--text-dim); }

/* =====================================================================
   Reiter-Oberfläche

   Der Player ist nicht mehr nur Wiedergabe, sondern die Stelle, an der
   das Programm zusammengestellt wird. Deshalb volle Breite statt der
   schmalen Spalte -- Karten mit Cover brauchen Platz.
   ===================================================================== */

.app { max-width: none; padding: 0; }

.bar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; border-bottom: 1px solid var(--line);
  background: var(--ink-850); flex-wrap: wrap;
}
.bar__source { color: var(--text-dim); font-size: 13.5px; flex: 1; }
.bar__build { color: var(--text-dim); font-size: 10.5px; opacity: .6; }

/* --- Reiterleiste ----------------------------------------------------- */

.tabs {
  display: flex; gap: 2px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--ink-850);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-family: inherit; font-size: 14.5px;
  padding: 13px 16px; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--signal); border-bottom-color: var(--signal); }
.tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }

/* --- Bereiche --------------------------------------------------------- */

/* Volle Breite: Der Kalender im Planer und die Bibliothek gewinnen
   deutlich, wenn sie den Bildschirm nutzen dürfen. */
.panel { display: none; padding: 28px 26px 60px; }
.panel.is-active { display: block; }

.panel__lead {
  color: var(--text-dim); font-size: 14px; margin: 0 0 22px; max-width: 60ch;
}

.loading { color: var(--text-dim); font-size: 14.5px; }

/* --- Kartenraster ------------------------------------------------------ */

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.card {
  position: relative; display: block; text-align: left;
  background: var(--ink-850); border: 1px solid var(--line);
  border-radius: var(--r); padding: 0; overflow: hidden;
  cursor: pointer; font-family: inherit; color: inherit;
}
.card:hover { border-color: var(--text-dim); }
.card:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.card.is-current { border-color: var(--signal); }

.card__cover {
  display: block; aspect-ratio: 1; background: var(--ink-700);
  background-size: cover; background-position: center;
}
.card__body { display: block; padding: 12px 14px 14px; }
.card__title {
  display: block; font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__meta {
  display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nur der laufende Sender trägt die Marke */
.card__mark {
  position: absolute; top: 10px; right: 10px; display: none;
  background: var(--signal); color: #16100A;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
}
.card.is-current .card__mark { display: block; }

/* --- Filterleiste ------------------------------------------------------ */

.filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filters input, .filters select {
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: 14.5px; padding: 9px 12px;
}
.filters input { flex: 1; min-width: 220px; }
.filters input:focus, .filters select:focus { border-color: var(--meter); outline: none; }

/* --- Albumdetail ------------------------------------------------------- */

.sheet {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 11, 15, .82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sheet__inner {
  position: relative; width: 100%; max-width: 860px; max-height: 86vh;
  overflow-y: auto; background: var(--ink-850);
  border: 1px solid var(--line); border-radius: var(--r); padding: 28px;
}
.sheet__close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text-dim);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.sheet__close:hover { color: var(--text); }

.sheet__head { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.sheet__head h2 { font-family: var(--display); font-size: 22px; margin: 0 0 4px; }
.sheet__head p { color: var(--text-dim); margin: 0 0 16px; }

.cover--sheet {
  width: 148px; height: 148px; flex-shrink: 0; border-radius: var(--r);
  background: var(--ink-700); background-size: cover; background-position: center;
}

.tracklist { list-style: none; margin: 0; padding: 0; }
.tracklist li {
  display: grid; gap: 12px; align-items: center;
  /* Nr · Vorhören · Titel · Dauer · Liste */
  grid-template-columns: 30px 26px 1fr auto 26px;
  padding: 9px 4px;
  border-top: 1px solid var(--line-soft);
  border-radius: 3px;
  font-size: 14.5px;
  transition: background-color .1s;
}
.tracklist li span:first-child { color: var(--text-dim); font-size: 12px; }
.tracklist__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracklist__dur { color: var(--text-dim); font-size: 12.5px; }

/* --- Was noch kommt ---------------------------------------------------- */

.soon { max-width: 52ch; padding: 30px 0; }
.soon h2 { font-family: var(--display); font-size: 24px; margin: 0 0 14px; }
.soon p { color: var(--text-mid); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.soon__note {
  border-left: 2px solid var(--signal); padding-left: 14px;
  color: var(--text-dim) !important; font-size: 14.5px !important;
}

/* --- Aktuell in der Breite --------------------------------------------- */


@media (max-width: 780px) {
  .now { grid-template-columns: 1fr; gap: 22px; }
  .panel { padding: 20px 16px 50px; }
  .bar { padding: 10px 16px; gap: 10px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sheet__inner { padding: 22px 18px; }
}

/* =====================================================================
   Eigene Listen
   ===================================================================== */

.listbar { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.listbar input {
  flex: 1; min-width: 220px; max-width: 380px;
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: 14.5px; padding: 9px 12px;
}
.listbar input:focus { border-color: var(--meter); outline: none; }

.lists { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }

/* --- Liste der Listen -------------------------------------------------- */

.listnav { list-style: none; margin: 0; padding: 0; }

.listnav__item { border-bottom: 1px solid var(--line-soft); }
.listnav__item:last-child { border-bottom: none; }

.listnav__btn {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; background: none; border: none; border-left: 2px solid transparent;
  color: var(--text-mid); font-family: inherit; font-size: 14.5px;
  padding: 11px 12px; cursor: pointer; text-align: left;
}
.listnav__btn:hover { color: var(--text); background: var(--ink-850); }
.listnav__item.is-open .listnav__btn { color: var(--text); border-left-color: var(--meter); background: var(--ink-850); }

/* Die als Programm festgelegte Liste ist die wichtigste Information hier */
.listnav__item.is-program .listnav__btn { border-left-color: var(--signal); }
.listnav__item.is-program .listnav__name::after {
  content: 'Programm'; display: inline-block; margin-left: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--signal);
  border: 1px solid var(--signal); border-radius: 2px; padding: 1px 5px;
  vertical-align: 1px;
}

.listnav__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listnav__meta { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }

/* --- Inhalt einer Liste ------------------------------------------------ */

.listhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.listhead__name { font-family: var(--display); font-size: 21px; margin: 0; }
.listhead__actions { display: flex; gap: 7px; flex-wrap: wrap; }


.tracklist__del {
  background: none; border: none; color: var(--text-dim);
  font-size: 19px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.tracklist__del:hover { color: var(--alert); }

.listwarn {
  margin: 20px 0 0; padding: 12px 15px; font-size: 13.5px;
  color: var(--text-dim); border-left: 2px solid var(--signal);
  background: var(--ink-850); border-radius: 0 var(--r) var(--r) 0;
}

/* --- Titel aus dem Album übernehmen ------------------------------------ */

.sheet__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sheet__pick select {
  background: var(--ink-900); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: 14px; padding: 7px 10px; max-width: 240px;
}

@media (max-width: 780px) {
  .lists { grid-template-columns: 1fr; gap: 18px; }
  .listhead { flex-direction: column; }
}

/* Nachgereichte Regeln: kleinere und warnende Schaltflächen, Spalten
   der Listenansicht. */
.btn--small { padding: 6px 12px; font-size: 13px; }
.btn--danger { color: var(--alert); border-color: var(--line); }
.btn--danger:hover { border-color: var(--alert); }

.lists__side { min-width: 0; }
.lists__main { min-width: 0; }

/* Beschreibungstext in der Albumansicht. Dieselben Abstände wie im
   Editor, damit die Vorschau im Backend dem Ergebnis entspricht. */
.sheet__text {
  font-size: 14.5px; line-height: 1.7; color: var(--text-mid);
  margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.sheet__text p { margin: 0 0 .9em; }
.sheet__text p:last-child { margin-bottom: 0; }
.sheet__text h2 { font-family: var(--display); font-size: 17px; color: var(--text); margin: 1.1em 0 .5em; }
.sheet__text h3 { font-family: var(--display); font-size: 15px; color: var(--text); margin: 1em 0 .4em; }
.sheet__text ul, .sheet__text ol { margin: 0 0 .9em; padding-left: 1.3em; }
.sheet__text blockquote {
  margin: 0 0 .9em; padding-left: 13px;
  border-left: 2px solid var(--signal); color: var(--text-dim);
}
.sheet__text a { color: var(--meter); }

/* =====================================================================
   Zu einer Liste hinzufügen

   Ein Dialog für alle Wege: einzelner Titel, ganzes Album, laufender
   Titel. Ein Klick auf eine Liste übernimmt sofort -- Auswahl und
   Bestätigen getrennt wäre ein Schritt zu viel für etwas, das man
   nebenbei macht.
   ===================================================================== */

.addto {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 11, 15, .86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}

.addto__box {
  position: relative; width: 100%; max-width: 400px; max-height: 80vh;
  overflow-y: auto; background: var(--ink-850);
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
}

.addto__head { font-family: var(--display); font-size: 18px; margin: 0 0 6px; }

.addto__what {
  font-size: 14px; color: var(--text-dim); margin: 0 0 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}

.addto__lists { list-style: none; margin: 0 0 18px; padding: 0; }

.addto__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; background: none; border: 1px solid transparent; border-radius: var(--r);
  color: var(--text-mid); font-family: inherit; font-size: 14.5px;
  padding: 10px 12px; cursor: pointer; text-align: left;
}
.addto__row:hover { background: var(--ink-800); border-color: var(--line); color: var(--text); }
.addto__row:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.addto__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addto__count { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }

.addto__empty { color: var(--text-dim); font-size: 14px; padding: 8px 12px; }

.addto__new {
  display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.addto__new input {
  flex: 1; min-width: 0;
  background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); font-family: inherit; font-size: 14px; padding: 8px 11px;
}
.addto__new input:focus { border-color: var(--meter); outline: none; }

.addto__msg { font-size: 13px; color: var(--ok); margin: 14px 0 0; min-height: 1.2em; }

/* --- Plus-Knopf an einzelnen Titeln ------------------------------------ */

.tracklist__add {
  width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer;
}
.tracklist__add:hover { border-color: var(--signal); color: var(--signal); }

/* In der Listenansicht steht dort der Entfernen-Knopf */
.tracklist--edit li { grid-template-columns: 30px 1fr auto 28px; }

/* --- Knopf am laufenden Titel ------------------------------------------ */


/* =====================================================================
   Zentrales Radio

   Eine Oberfläche für alle Bereiche eines Kunden. Oben die Zonenwahl,
   unten ein Player, der in jedem Reiter stehen bleibt: Wer im Katalog
   stöbert, will trotzdem sehen und steuern, was gerade läuft.
   ===================================================================== */

.bar__pick { display: flex; align-items: center; gap: 8px; }
.bar__pick > span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
}
.bar__pick select {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: inherit; font-size: 14px; padding: 5px 9px;
  max-width: 260px;
}
.bar__pick select:disabled { opacity: .6; cursor: default; }
.bar__pick select:focus { border-color: var(--meter); outline: none; }

/* --- Zonenkacheln ------------------------------------------------------ */

.zonegrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.zonecard {
  display: block; width: 100%; text-align: left;
  background: var(--ink-850); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r); padding: 16px 18px;
  color: inherit; font: inherit;
}

/* Die ganze Kachel schaltet um -- das muss man ihr ansehen */
.zonecard.is-clickable { cursor: pointer; }
.zonecard.is-clickable:hover { border-color: var(--signal); background: var(--ink-800); }
.zonecard.is-clickable:hover .zonecard__name { color: var(--signal); }
.zonecard.is-clickable:hover .zonecard__hint { color: var(--signal); }
.zonecard.is-clickable:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Die gehörte Zone lässt sich nicht anklicken -- sie ist es schon */
.zonecard.is-current { cursor: default; }
.zonecard.is-current:hover { background: var(--ink-850); }
.zonecard.is-current:hover .zonecard__name { color: inherit; }
.zonecard.is-live { border-left-color: var(--ok); }
.zonecard.is-current { border-color: var(--signal); border-left-color: var(--signal); }

.zonecard__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.zonecard__name { font-size: 17px; font-weight: 500; }
.zonecard__state {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; flex-shrink: 0;
}
.zonecard__state.is-on  { color: var(--ok); }
.zonecard__state.is-off { color: var(--text-dim); }

.zonecard__where { font-size: 12.5px; color: var(--text-dim); margin-bottom: 12px; }

.zonecard__now { font-size: 14px; color: var(--text-mid); min-height: 2.6em; }
.zonecard__now strong { display: block; color: var(--text); font-weight: 500; }
.zonecard__now small { display: block; color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.zonecard__now.is-empty { color: var(--signal); }

.zonecard__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid var(--line-soft);
}

.zonecard__hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
}
.zonecard.is-current .zonecard__hint { color: var(--signal); }

/* "Programm wählen" ist eine Marke im Kachelklick, kein eigener Knopf --
   verschachtelte Schaltflächen sind im Browser nicht erlaubt. */
.zonecard [data-program] { flex-shrink: 0; }
.zonecard.is-clickable [data-program]:hover {
  border-color: var(--signal); color: var(--signal);
}

/* --- Fußzeilen-Player --------------------------------------------------- */

/* Der Bereichsinhalt braucht unten Luft, sonst liegt der Player darauf */
.panel { padding-bottom: 130px; }

.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 16px; align-items: center;
  padding: 12px 24px;
  background: rgba(18, 23, 31, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}

.foot__cover {
  grid-column: 1; grid-row: 1 / -1;
  width: 56px; height: 56px; border-radius: 3px;
  background: var(--ink-700) center/cover no-repeat;
}

.foot__text { grid-column: 2; grid-row: 1; min-width: 0; }
.foot__title {
  font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foot__sub {
  font-size: 12.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foot__album::before { content: ' · '; }
.foot__album:empty::before { content: ''; }

.foot .progress { margin-top: 7px; }
.foot .progress__times { font-size: 10.5px; }

.foot__controls {
  grid-column: 3; grid-row: 1 / -1;
  display: flex; align-items: center; gap: 8px;
}
.foot__controls .vol { display: flex; align-items: center; }
.foot__controls input[type=range] { width: 90px; }

/* Die Meldung gehört zum Titelblock, nicht an den unteren Rand: Dort
   lag sie halb außerhalb des sichtbaren Bereichs und lief quer über die
   ganze Breite. */
.foot .status {
  grid-column: 2; grid-row: 2;
  font-size: 11.5px; margin: 4px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foot .status.is-empty { display: none; }

@media (max-width: 780px) {
  .foot { grid-template-columns: 44px 1fr; gap: 12px; padding: 10px 16px; }
  .foot__cover { width: 44px; height: 44px; }
  .foot__controls { grid-column: 1 / -1; justify-content: space-between; }
  .foot__controls input[type=range] { width: 110px; }
  .panel { padding-bottom: 170px; }
  .bar__pick select { max-width: 150px; }
}

/* =====================================================================
   Position im Titel

   Der sichtbare Strich ist drei Pixel hoch, die Trefferfläche zwölf.
   Drei Pixel trifft mit der Maus niemand zuverlässig, und auf einem
   Tablet erst recht nicht.
   ===================================================================== */

.seek {
  padding: 6px 0; margin: 1px 0; cursor: pointer;
  touch-action: none;          /* sonst scrollt das Tablet beim Ziehen */
}
.seek:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.seek .progress { position: relative; overflow: visible; }

.progress__handle {
  position: absolute; top: 50%; left: 0;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: var(--text);
  transform: translateY(-50%) scale(0);
  transition: transform .12s;
  pointer-events: none;
}

/* Der Griff erscheint erst, wenn man hingeht -- sonst wirkt die
   Fußzeile unruhig. */
.seek:hover .progress__handle,
.seek:focus-visible .progress__handle,
.seek.is-dragging .progress__handle { transform: translateY(-50%) scale(1); }

.seek:hover .progress__fill,
.seek.is-dragging .progress__fill { background: var(--signal); }

.seek.is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .progress__handle { transition: none; }
}

/* =====================================================================
   Symbolschaltflächen im Fußzeilen-Player
   ===================================================================== */

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-mid); cursor: pointer;
}
.iconbtn:hover { border-color: var(--text-dim); color: var(--text); }
.iconbtn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.iconbtn svg { width: 18px; height: 18px; fill: currentColor; }
.iconbtn svg path[d^="M12 5v14"] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Der Hauptknopf ist der, den man im Vorbeigehen trifft */
.iconbtn--main {
  width: 42px; height: 42px;
  background: var(--ink-700); border-color: var(--ink-600); color: var(--text);
}
.iconbtn--main:hover { background: var(--signal); border-color: var(--signal); color: #16100A; }
.iconbtn--main svg { width: 20px; height: 20px; }

/* =====================================================================
   Dynamikverlauf

   Die Wellenform ist zugleich die Bedienfläche: Man klickt dorthin, wo
   man hinwill. Deshalb bekommt sie die Trefferfläche der Leiste.
   ===================================================================== */

.wave {
  display: block; width: 100%; height: 34px;
  cursor: inherit;
}

/* Beim Ziehen wandert der Griff über die Wellenform */
.seek .wave + .progress { display: none; }

/* =====================================================================
   Wochenplaner

   Sieben Tagesspalten, Zeitachse links. Eine Minute entspricht immer
   derselben Zahl an Bildpunkten -- das Raster bestimmt nur, worauf
   eingerastet wird und wie dicht die Beschriftung steht.
   ===================================================================== */

.plantools {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.plantools__zoom, .plantools__right { display: flex; align-items: center; gap: 6px; }
.plantools span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}
.plantools .btn.is-active { border-color: var(--signal); color: var(--signal); }
.plantools select {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 5px 8px;
}

/* --- Kalendergerüst ---------------------------------------------------- */

/* Der Kalender rollt für sich, nicht die ganze Seite. Sonst wäre ein
   Sprung zur jetzigen Zeit nur ein Sprung im Dokument -- und die
   Werkzeugleiste darüber verschwände mit. */
.cal {
  display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto 1fr;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-850);
  max-height: 62vh; overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Die Tagesleiste bleibt beim Rollen stehen */
.cal__corner {
  position: sticky; top: 0; z-index: 3;
  background: var(--ink-850);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

.cal__days {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--ink-850);
  border-bottom: 1px solid var(--line);
}
.cal__day {
  padding: 9px 0; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mid);
  border-right: 1px solid var(--line-soft);
}
.cal__day:last-child { border-right: none; }

.cal__times { position: relative; border-right: 1px solid var(--line); }
.cal__time {
  position: absolute; right: 7px; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
}

.cal__grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }

.cal__col {
  position: relative; border-right: 1px solid var(--line-soft);
  cursor: crosshair;
}
.cal__col:last-child { border-right: none; }

.cal__line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line-soft);
}
.cal__line.is-hour { background: var(--line); }

/* --- Zeiträume --------------------------------------------------------- */

.slot {
  position: absolute; left: 2px; right: 2px;
  background: var(--ink-700); border: 1px solid var(--meter);
  border-left: 3px solid var(--meter);
  border-radius: 3px; padding: 3px 6px;
  overflow: hidden; cursor: grab; font-size: 11.5px;
}
.slot:hover { background: var(--ink-600); }
.slot.is-dragging { cursor: grabbing; opacity: .8; z-index: 5; }
.slot.is-empty { border-color: var(--signal); border-left-color: var(--signal); }

.slot__time { display: block; color: var(--text-dim); font-size: 10px; }
.slot__what {
  display: block; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Anfasser für die Länge. Bewusst nur sechs Pixel hoch, damit sie das
   Verschieben nicht behindern -- aber über die ganze Breite. */
.slot__grip { position: absolute; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.slot__grip--top { top: 0; }
.slot__grip--bottom { bottom: 0; }

.slot--ghost {
  background: rgba(154, 140, 196, .22); border-style: dashed;
  pointer-events: none;
}

/* --- Ansagenspur -------------------------------------------------------- */

.spotlane { margin-top: 28px; }
.spotlane__head { font-family: var(--display); font-size: 17px; margin: 0 0 6px; }

.spotlane__list { list-style: none; margin: 0 0 14px; padding: 0; }

.spotplan {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.spotplan.is-off { opacity: .5; }
.spotplan__name { flex: 1; min-width: 120px; }
.spotplan__days { color: var(--text-dim); font-size: 11.5px; }
.spotplan label { color: var(--text-dim); font-size: 12px; }
.spotplan input[type=time], .spotplan input[type=number] {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: var(--mono); font-size: 12.5px; padding: 4px 6px;
  margin-left: 4px;
}
.spotplan input[type=number] { width: 62px; }

.spotlane__add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spotlane__add select {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); font-family: inherit; font-size: 14px; padding: 7px 10px;
}

/* --- Zeitraum bearbeiten ------------------------------------------------ */

.slotedit {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 11, 15, .86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.slotedit__box {
  position: relative; width: 100%; max-width: 440px; max-height: 84vh;
  overflow-y: auto; background: var(--ink-850);
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
}

.slotedit__times { display: flex; gap: 14px; margin-bottom: 14px; }
.slotedit__times label { font-size: 13px; color: var(--text-dim); }
.slotedit__times input {
  display: block; margin-top: 4px;
  background: var(--ink-900); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: var(--mono); font-size: 14px; padding: 7px 9px;
}

.slotedit__shuffle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.slotedit__shuffle input { accent-color: var(--signal); }

.slotedit__sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim); margin: 22px 0 10px;
}

.slotedit__sources { list-style: none; margin: 0 0 12px; padding: 0; }
.slotedit__sources li {
  display: grid; grid-template-columns: 56px 1fr 24px; gap: 10px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.slotsrc__kind { color: var(--text-dim); font-size: 10.5px; }
.slotsrc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.slotedit__add { display: flex; gap: 7px; flex-wrap: wrap; }
.slotedit__add select {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 6px 8px;
  max-width: 150px;
}

.slotedit__foot {
  display: flex; gap: 8px; margin-top: 22px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}

@media (max-width: 780px) {
  .cal { grid-template-columns: 42px 1fr; }
  .cal__day { font-size: 10px; }
  .slot { font-size: 10.5px; padding: 2px 4px; }
  .slot__time { display: none; }
}

/* Das Cover in der Fußzeile führt zum Album. Als Schaltfläche gebaut,
   deshalb die Standardgestaltung des Browsers zurücksetzen. */
.foot__cover {
  padding: 0; border: none; cursor: pointer;
  position: relative; flex-shrink: 0;
}
.foot__cover:disabled { cursor: default; }

.foot__cover::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid transparent; border-radius: 3px;
  transition: border-color .12s, background-color .12s;
}
.foot__cover:not(:disabled):hover::after {
  border-color: var(--signal);
  background: rgba(201, 154, 78, .16);
}
.foot__cover:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .foot__cover::after { transition: none; }
}

/* =====================================================================
   Anfassbarkeit

   Bisher war an mehreren Stellen nicht zu sehen, dass etwas anklickbar
   ist -- Karten, Listenzeilen und Titel sahen aus wie Text. Die Regeln
   hier fassen das zusammen: Was reagiert, zeigt es beim Überfahren.

   Durchgehend dasselbe Muster: Zeigerform, hellere Fläche, und dort wo
   es zählt ein bernsteinfarbener Rand.
   ===================================================================== */

/* .btn bringt seinen Zeiger schon mit -- hier nur die Elemente, die
   ihn noch nicht haben. */
.tab,
.card,
.listnav__btn,
.addto__row,
.tracklist__add,
.tracklist__play,
.tracklist__del,
.slot,
.iconbtn,
.seek,
.foot__cover:not(:disabled) { cursor: pointer; }

/* --- Titel in der Albumansicht ----------------------------------------- */

.tracklist li:hover { background: var(--ink-800); }

.tracklist__play {
  width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 50%;
  color: var(--text-dim); font-size: 9px; line-height: 1;
}
.tracklist__play:hover { border-color: var(--signal); color: var(--signal); }
.tracklist__play:disabled { opacity: .5; }

/* Die Nebenknöpfe erscheinen erst beim Überfahren -- sonst ist die
   Liste ein Feld aus Symbolen und der Titel geht darin unter. */
.tracklist__add, .tracklist__del { opacity: .35; transition: opacity .1s; }
.tracklist li:hover .tracklist__add,
.tracklist li:hover .tracklist__del { opacity: 1; }
.tracklist__add:focus-visible, .tracklist__del:focus-visible { opacity: 1; }

/* --- Karten ------------------------------------------------------------- */

.card { transition: border-color .12s, transform .12s; }
.card:hover { border-color: var(--signal); transform: translateY(-1px); }
.card:hover .card__title { color: var(--signal); }

/* --- Zonen- und Listenzeilen -------------------------------------------- */

.zonecard { transition: border-color .12s; }
.zonecard:hover { border-color: var(--text-dim); }

.listnav__btn { transition: background-color .1s; }

.addto__row { transition: background-color .1s, border-color .1s; }

/* --- Zeiträume im Planer ------------------------------------------------ */

.slot { transition: background-color .1s, border-color .1s; }
.slot:hover { border-color: var(--signal); }
.slot:hover .slot__what { color: var(--signal); }

/* Ein leerer Tag soll erkennen lassen, dass man dort etwas anlegen kann */
.cal__col:hover { background: rgba(255, 255, 255, .012); }

/* --- Reiter -------------------------------------------------------------- */

.tab { transition: color .1s, border-color .1s; }

/* --- Was nicht reagiert, soll es auch zeigen ----------------------------- */

.btn:disabled, .iconbtn:disabled, button:disabled { cursor: default; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .card, .tracklist li, .slot, .tab, .listnav__btn, .addto__row, .zonecard,
  .tracklist__add, .tracklist__del { transition: none; }
  .card:hover { transform: none; }
}

/* Der vorgehörte Titel bleibt in der Liste markiert. Ohne das wüsste
   man nach dem Klick nicht mehr, welchen man gerade angetippt hat --
   die Ansicht bleibt ja offen. */
.tracklist li.is-playing { background: var(--ink-800); }
.tracklist li.is-playing .tracklist__title { color: var(--signal); }
.tracklist li.is-playing .tracklist__play {
  border-color: var(--signal); color: var(--signal);
}

/* Kopfzeile des Zonenbereichs: Hinweis links, Aktualisieren rechts */
.zonehead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.zonehead .panel__lead { flex: 1; min-width: 260px; }
.zonehead a { color: var(--meter); }

/* =====================================================================
   Jetzige Zeit im Planer
   ===================================================================== */

/* Der heutige Tag hebt sich ab -- sonst sucht man ihn in sieben Spalten */
.cal__day.is-today {
  color: var(--signal);
  border-bottom: 2px solid var(--signal);
  margin-bottom: -1px;
}

.cal__col.is-today { background: rgba(201, 154, 78, .05); }

/* Die Linie zeigt, wo wir gerade stehen. Der Punkt links macht sie
   auffindbar, auch wenn dort gerade ein Zeitraum liegt. */
.cal__now {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid var(--signal);
  z-index: 4; pointer-events: none;
}
.cal__now::before {
  content: ''; position: absolute; left: -1px; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
}

@media (prefers-reduced-motion: reduce) {
  .cal { scroll-behavior: auto; }
}

/* =====================================================================
   Tagesablauf im Zonenreiter

   Ersetzt die frühere Titelliste. Welcher Titel in zwanzig Minuten
   läuft, beantwortet keine Frage, die man beim Blick auf die Zonen hat
   -- wann das Programm wechselt, schon.
   ===================================================================== */

.dayplan { margin-top: 28px; }

.dayplan__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}

.dayplan__list { list-style: none; margin: 0; padding: 0; }

.dayplan__empty {
  font-size: 14px; color: var(--text-dim);
  padding: 12px 0; line-height: 1.6;
}
.dayplan__empty strong { color: var(--text-mid); }

.dayslot {
  display: grid; grid-template-columns: 108px 1fr auto;
  gap: 14px; align-items: center;
  padding: 9px 10px; border-radius: 3px;
  border-left: 2px solid var(--line);
  font-size: 14px;
}

.dayslot__time { color: var(--text-dim); font-size: 12.5px; }
.dayslot__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dayslot__mark {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal);
}

/* Was gerade läuft, hebt sich ab -- das ist die eigentliche Auskunft */
.dayslot.is-now {
  background: var(--ink-800);
  border-left-color: var(--signal);
}
.dayslot.is-now .dayslot__what { color: var(--signal); }
.dayslot.is-now .dayslot__time { color: var(--text-mid); }

/* Vergangenes bleibt sichtbar, tritt aber zurück */
.dayslot.is-past { opacity: .45; }

@media (max-width: 620px) {
  .dayslot { grid-template-columns: 92px 1fr auto; gap: 10px; font-size: 13px; }
}

/* =====================================================================
   Bearbeitete Zone über dem Kalender

   Die Auswahl in der Kopfleiste sieht man beim Planen nicht an -- ein
   Wochenplan für die falsche Zone bliebe leicht unbemerkt. Deshalb hier
   noch einmal, groß und im Blickfeld.
   ===================================================================== */

.planzone {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: var(--r);
}

.planzone__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}

.planzone__name {
  font-family: var(--display); font-size: 18px; font-weight: 500;
  color: var(--signal);
}

.planzone__where { font-size: 13px; color: var(--text-dim); }
.planzone__where:empty { display: none; }

/* =====================================================================
   Album für einen Zeitraum wählen

   Eigenes Fenster über dem Zeitraum-Dialog. Ein Auswahlfeld schied aus:
   Der Katalog wächst, und in einer Liste mit hunderten Einträgen findet
   man ohne Suche nichts.
   ===================================================================== */

.albumpick {
  position: fixed; inset: 0; z-index: 70;   /* über dem Zeitraum-Dialog */
  background: rgba(8, 11, 15, .88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}

.albumpick__box {
  position: relative; width: 100%; max-width: 520px; max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--ink-850); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px;
}

.albumpick__box .field { margin-bottom: 14px; }
.albumpick__box input[type=search] {
  width: 100%; background: var(--ink-900);
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); font-family: inherit; font-size: 15px; padding: 10px 12px;
}
.albumpick__box input[type=search]:focus { border-color: var(--meter); outline: none; }

.albumpick__list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; flex: 1; min-height: 0;
}

.albumpick__row {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  color: inherit; font: inherit; padding: 7px 9px;
}
.albumpick__row:hover { background: var(--ink-800); border-color: var(--line); }
.albumpick__row:hover strong { color: var(--signal); }
.albumpick__row:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.albumpick__cover {
  width: 42px; height: 42px; border-radius: 3px;
  background: var(--ink-700) center/cover no-repeat;
}

.albumpick__text { min-width: 0; }
.albumpick__text strong {
  display: block; font-size: 14.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.albumpick__text small {
  display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Zonenkopf: Werkzeuge rechts */
.zonehead__tools { display: flex; gap: 7px; flex-shrink: 0; }

/* Die Marken in der Kachelfußzeile. Keine echten Schaltflächen, weil
   die Kachel selbst eine ist -- verschachtelte sind nicht erlaubt. */
.zonecard__buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zonecard.is-clickable .zonecard__buttons .btn:hover {
  border-color: var(--signal); color: var(--signal);
}
.zonecard__buttons [data-remove]:hover { border-color: var(--alert); color: var(--alert); }

/* Bei schmalen Kacheln bricht die Fußzeile um */
.zonecard__actions { flex-wrap: wrap; }

/* Zonenkontingent. Steht neben den Werkzeugen, damit man vor dem Klick
   sieht, wie viele noch möglich sind. */
.zonehead__quota {
  align-self: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
}
.zonehead__quota.is-full { color: var(--signal); }

.addto__msg.is-warn { color: var(--signal); }

/* Zufallsknopf. Der Zustand muss auf einen Blick lesbar sein -- ein
   Symbol, das immer gleich aussieht, sagt nichts darüber, ob es an ist. */
.iconbtn.is-on {
  border-color: var(--signal);
  color: var(--signal);
}
.iconbtn.is-on:hover { background: rgba(201, 154, 78, .14); }

/* Der Blenden-Knopf teilt sich die Zustandsregel mit dem Zufallsknopf
   (.iconbtn.is-on weiter oben) -- beide sind Schalter, beide sollen
   gleich aussehen, wenn sie an sind. */

/* Zeilenmaß bei voller Breite -- siehe admin.css. Im Radio betrifft
   das vor allem die Erklärtexte über den Reitern. */
.panel__lead, .field__hint { max-width: 72ch; }

/* =====================================================================
   Position beim Vorhören

   Gleiche Bauart wie in der Sendezentrale: Die Rinne zeigt die ganze
   Länge des Titels, ein Rahmen macht sie sichtbar. Eine hellere Füllung
   statt des Rahmens hätte den Abstand zur bernsteinfarbenen Marke unter
   die Lesbarkeitsgrenze gedrückt -- man sähe die Länge, aber nicht mehr
   den Fortschritt.
   ===================================================================== */

.tracklist__seek {
  grid-column: 3 / -1;
  display: flex; align-items: center; gap: 12px;
  margin-top: 2px;
}

.tracklist__bar {
  position: relative; flex: 1;
  height: 6px; border-radius: 3px;
  background: var(--ink-800);
  border: 1px solid #6E5A8C;        /* 3,0:1 gegen den Kartengrund */
  cursor: pointer;
  padding: 7px 0; background-clip: content-box; box-sizing: content-box;
}
.tracklist__bar:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.tracklist__bar.is-dragging { cursor: grabbing; }

.tracklist__fill {
  /* Innerhalb des Rahmens: 1 px Rahmen + 7 px Polsterung = 8 px */
  position: absolute; left: 1px; top: 8px; height: 6px;
  border-radius: 3px 0 0 3px; background: var(--signal);
  pointer-events: none;
}

.tracklist__knob {
  /* Mittig auf der 6 px hohen Rinne: 8 + 3 - 5 = 6 */
  position: absolute; top: 6px; left: 0;
  width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--text);
  transform: scale(0); transition: transform .12s;
  pointer-events: none;
}
.tracklist__bar:hover .tracklist__knob,
.tracklist__bar:focus-visible .tracklist__knob,
.tracklist__bar.is-dragging .tracklist__knob { transform: scale(1); }

.tracklist__time { font-size: 11.5px; color: var(--text-dim); flex-shrink: 0; }

/* Die vorgehörte Zeile hebt sich ab, solange sie läuft */
.tracklist li.is-preview { background: var(--ink-800); }
.tracklist li.is-preview .tracklist__title { color: var(--signal); }
.tracklist li.is-preview .tracklist__play { border-color: var(--signal); color: var(--signal); }

.sheet__note {
  font-size: 13px; color: var(--text-dim);
  margin: 0 0 16px; max-width: 68ch; line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .tracklist__knob { transition: none; }
}

/* Einordnung auf den Senderkacheln. Höchstens drei Marken -- mehr liest
   auf einer Kachel niemand, und sie verdrängen den Namen. */
.card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card__tags:empty { display: none; }

.card__tag {
  font-size: 10.5px; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap;
}
.card.is-current .card__tag { border-color: var(--signal); color: var(--signal); }

/* =====================================================================
   Zustandsmarke in der Fußzeile

   Sagt, dass hier das laufende Programm der Zone zu hören ist. Rot,
   weil das die Farbe ist, die in jedem Sendehaus für „auf Sendung"
   steht -- Messing und Patina sind hier schon anderweitig vergeben und
   würden nicht heraussstechen.
   ===================================================================== */

.foot__state {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 3px; min-height: 16px;
}

.live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em;
  padding: 2px 8px 2px 7px; border-radius: 3px;
  background: #C0322F; color: #FFF1EF;
  flex-shrink: 0;
}

.live__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFF1EF;
  animation: livePuls 2s ease-in-out infinite;
}
@keyframes livePuls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.live__what {
  font-size: 11.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Angehalten: kein „LIVE", weil nichts sendet. */
.foot__state[data-state="paused"] .live {
  background: none; color: var(--text-dim);
  border: 1px solid var(--line); padding: 1px 7px;
}
.foot__state[data-state="paused"] .live__dot {
  background: var(--text-dim); animation: none;
}

/* Vorhören: Das Programm läuft weiter, aber es ist nicht mehr allein
   zu hören -- deshalb Messing statt Rot. */
.foot__state[data-state="preview"] .live {
  background: var(--signal); color: #16100A;
}
.foot__state[data-state="preview"] .live__dot { background: #16100A; }

@media (prefers-reduced-motion: reduce) {
  .live__dot { animation: none; }
}

@media (max-width: 720px) {
  .live__what { display: none; }
}