/* PM-Shop: Playlist der Demo-CDs. Farben lassen sich in user.css über die Variablen anpassen. */
.pmpl { --pl-blue: #49afcd; --pl-dark: #34495e; --pl-muted: #8a979f; --pl-line: #e3e8ec; --pl-headbg: #eef2f4; --pl-headline: #dde4e8; --pl-cur: #eaf5f9;
  color: var(--pl-dark); margin: 6px 0 10px; font-size: 15px; }
.pmpl noscript ol { margin: 0; }
.pmpl .pmp-btn { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--pl-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; border-radius: 0; box-shadow: none; }
.pmpl .pmp-btn svg { width: 20px; height: 20px; }
.pmpl .pmp-bar { position: relative; height: 4px; background: #c9d4da; cursor: pointer; }
.pmpl .pmp-pos { flex: 1; min-width: 60px; }
.pmpl .pmp-vol { flex: none; width: 56px; }
.pmpl .pmp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--pl-blue); }
.pmpl .pmp-dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.pmpl .pmp-bar:focus-visible .pmp-dot { box-shadow: 0 0 0 3px rgba(73,175,205,.35), 0 1px 3px rgba(0,0,0,.35); }
.pmpl .pmp-time { flex: none; font-size: 13px; color: var(--pl-muted); font-variant-numeric: tabular-nums; }
.pmpl .pmp-time b { color: var(--pl-dark); font-weight: 600; }
.pmpl .pmpl-all[aria-pressed="true"] { color: var(--pl-blue); }

.pmpl-head { display: flex; align-items: center; gap: 16px; background: var(--pl-headbg); border: 1px solid var(--pl-headline); padding: 7px 14px 7px 16px; }
.pmpl-now { flex: 0 1 34%; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.pmpl-nr { flex: none; font-size: 12px; color: var(--pl-muted); font-variant-numeric: tabular-nums; }
.pmpl-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: var(--pl-dark); }
.pmpl-ctrl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.pmpl .pmpl-play { width: 30px; height: 30px; border-radius: 50%; background: var(--pl-blue); color: #fff; }
.pmpl .pmpl-play svg { width: 16px; height: 16px; }

.pmpl-list { list-style: none; margin: 0; padding: 8px 6px; columns: 2 280px; column-gap: 24px; border: 1px solid var(--pl-line); border-top: 0; }
.pmpl-list li { display: flex; align-items: center; margin: 0; padding: 0; break-inside: avoid; }
.pmpl-item { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 6px 8px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: none; border-radius: 0; }
.pmpl-list li:hover { background: #f3f7f9; }
.pmpl-n { flex: none; width: 22px; color: var(--pl-muted); font-size: 13px; font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; }
.pmpl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmpl-d { flex: none; color: var(--pl-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pmpl-link { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #b6c2c9; }
.pmpl-link svg { width: 14px; height: 14px; }
.pmpl-link:hover, .pmpl-link:focus { color: var(--pl-blue); }
.pmpl-list li.is-cur { background: var(--pl-cur); }
.pmpl-list li.is-cur .pmpl-item { color: #2f7f9a; font-weight: 600; }
.pmpl-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pmpl-eq i { width: 3px; height: 4px; background: var(--pl-blue); }
.pmpl.is-playing .pmpl-eq i { animation: pmpl-eq .9s ease-in-out infinite alternate; }
.pmpl.is-playing .pmpl-eq i:nth-child(2) { animation-delay: -.3s; }
.pmpl.is-playing .pmpl-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes pmpl-eq { from { height: 3px; } to { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .pmpl.is-playing .pmpl-eq i { animation: none; height: 10px; } }

@media (max-width: 600px) {
  .pmpl-head { flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px; }
  .pmpl-now { flex: 1 1 100%; }
  .pmpl .pmp-vol, .pmpl .pmpl-mute { display: none; }
  .pmpl-list { padding: 6px 2px; }
}