/* ============================================================
   Audio-Playlist-Player  ·  Monochrom / Anthrazit auf Weiß
   Wiederverwendbar für alle Beiträge: Container mit class="ap"
   ============================================================ */

.ap {
  --ap-ink:       #2b2f33;   /* Anthrazit */
  --ap-ink-soft:  #5c6268;   /* gedämpftes Grau */
  --ap-ink-faint: #9aa0a5;   /* helles Grau */
  --ap-mist:      #f2f3f4;   /* fast weiß, für Hover */
  --ap-line:      #e6e8e9;   /* feinste Trennlinie */

  max-width: 46rem;
  margin: 0 auto;
  color: var(--ap-ink);
  font-variant-numeric: tabular-nums;
  background: transparent;            /* fügt sich rahmenlos in Weiß ein */
}

.ap, .ap * { box-sizing: border-box; }

/* ---------- Kopfbereich: Cover, aktueller Titel, Autoplay ---------- */

.ap-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .25rem 0 1rem;
}

.ap-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  filter: grayscale(1) contrast(1.05);   /* Monochrom-Effekt */
  background: var(--ap-mist);
  flex: 0 0 auto;
}

.ap-meta { flex: 1 1 auto; min-width: 0; }

.ap-now {
  margin: 0 0 .15rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-ink-faint);
}

.ap-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ap-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Autoplay-Schalter --- */

.ap-auto {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}

.ap-auto-input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

.ap-auto-switch {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--ap-line);
  position: relative;
  transition: background .25s ease;
  flex: 0 0 auto;
}

.ap-auto-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .25s ease;
}

.ap-auto-input:checked + .ap-auto-switch { background: var(--ap-ink); }
.ap-auto-input:checked + .ap-auto-switch::after { transform: translateX(16px); }
.ap-auto-input:focus-visible + .ap-auto-switch { outline: 2px solid var(--ap-ink); outline-offset: 2px; }

.ap-auto-text {
  font-size: .78rem;
  color: var(--ap-ink-soft);
}

/* ---------- Steuerleiste: Play, Zeit, Fortschritt ---------- */

.ap-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1.1rem;
}

.ap-playbtn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--ap-ink);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .15s ease, background .2s ease;
  padding: 0;
}

.ap-playbtn:hover  { background: #000; }
.ap-playbtn:active { transform: scale(.94); }
.ap-playbtn:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 3px; }
.ap-playbtn svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.ap-time {
  font-size: .8rem;
  color: var(--ap-ink-soft);
  min-width: 2.6rem;
  text-align: center;
  flex: 0 0 auto;
}

/* --- Fortschrittsbalken (range) --- */

.ap-seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
              var(--ap-ink) 0%,
              var(--ap-ink) var(--ap-progress, 0%),
              var(--ap-line) var(--ap-progress, 0%),
              var(--ap-line) 100%);
  cursor: pointer;
  outline-offset: 4px;
}

.ap-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ap-ink);
  border: 0;
  transition: transform .15s ease;
}
.ap-seek::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ap-ink);
  border: 0;
}
.ap-seek:hover::-webkit-slider-thumb { transform: scale(1.2); }

/* ---------- Titelliste ---------- */

.ap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ap-track;
}

.ap-item {
  counter-increment: ap-track;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .45rem .6rem;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}

.ap-item + .ap-item { margin-top: 2px; }

.ap-item:hover { background: var(--ap-mist); }

/* Tracknummer */
.ap-item::before {
  content: counter(ap-track, decimal-leading-zero);
  font-size: .75rem;
  color: var(--ap-ink-faint);
  width: 1.6rem;
  text-align: right;
  flex: 0 0 auto;
  transition: color .2s ease;
}

/* Bild in der Liste (zoombar) */
.ap-zoom {
  flex: 0 0 auto;
  line-height: 0;
  cursor: zoom-in;
}
.ap-zoom img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  filter: grayscale(1);
  transition: filter .25s ease;
}
.ap-item:hover .ap-zoom img,
.ap-item.is-active .ap-zoom img { filter: grayscale(0); }

/* Titel = Abspiel-Schaltfläche */
.ap-item-btn {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: .35rem 0;
  text-align: left;
  font: inherit;
  font-size: .95rem;
  color: var(--ap-ink);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-item-btn:focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 2px; border-radius: 4px; }

/* Download-Link */
.ap-dl {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ap-ink-faint);
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.ap-dl:hover { color: var(--ap-ink); background: rgba(0,0,0,.06); }
.ap-dl svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* --- Aktiver Titel: invertiert in Anthrazit --- */

.ap-item.is-active,
.ap-item.is-active:hover { background: var(--ap-ink); }

.ap-item.is-active::before      { color: rgba(255,255,255,.55); }
.ap-item.is-active .ap-item-btn { color: #fff; font-weight: 600; }
.ap-item.is-active .ap-dl       { color: rgba(255,255,255,.65); }
.ap-item.is-active .ap-dl:hover { color: #fff; background: rgba(255,255,255,.15); }

/* --- Equalizer-Animation am aktiven, spielenden Titel --- */

.ap-eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex: 0 0 auto;
}
.ap-item.is-active .ap-eq { display: inline-flex; }

.ap-eq i {
  width: 3px;
  background: #fff;
  border-radius: 1px;
  height: 30%;
}
.ap.is-playing .ap-item.is-active .ap-eq i { animation: ap-eq .9s ease-in-out infinite; }
.ap.is-playing .ap-item.is-active .ap-eq i:nth-child(2) { animation-delay: .25s; }
.ap.is-playing .ap-item.is-active .ap-eq i:nth-child(3) { animation-delay: .5s; }

@keyframes ap-eq {
  0%, 100% { height: 25%; }
  50%      { height: 100%; }
}

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

/* ---------- Bild-Zoom-Overlay ---------- */

.ap-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 22, 24, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 2rem;
}
.ap-overlay img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* ---------- Responsiv ---------- */

@media (max-width: 560px) {
  .ap-head { flex-wrap: wrap; }
  .ap-auto { width: 100%; justify-content: flex-end; }
  .ap-cover { width: 56px; height: 56px; }
  .ap-title { font-size: 1.05rem; white-space: normal; }
  .ap-item::before { display: none; }   /* Nummern ausblenden, Liste bleibt komplett sichtbar */
  .ap-item { padding: .4rem .35rem; }
}