/* Player-Grundstil, Farben/Radien kommen als CSS-Variablen aus der jeweiligen Variante:
   --pl-bg --pl-fg --pl-muted --pl-accent --pl-accent-fg --pl-line --pl-r */
.player{--pl-bg:rgba(255,255,255,.06);--pl-fg:#fff;--pl-muted:rgba(255,255,255,.6);--pl-accent:#fff;--pl-accent-fg:#000;--pl-line:rgba(255,255,255,.16);--pl-r:0;
  display:grid;grid-template-columns:clamp(96px,28%,200px) 1fr;gap:0;background:var(--pl-bg);color:var(--pl-fg);border-radius:var(--pl-r);overflow:hidden;font-family:inherit;text-align:left}
.player .pl-cover{position:relative;min-height:100%;background:#000}
.player .pl-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.player .pl-body{padding:clamp(14px,2.2vw,24px);display:flex;flex-direction:column;gap:12px;min-width:0}
.player .pl-head{display:flex;align-items:center;gap:10px}
.player .pl-btn{appearance:none;border:0;background:none;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0;font:inherit;flex:none}
.player .pl-btn svg{width:22px;height:22px;fill:currentColor;display:block}
.player .pl-main{width:46px;height:46px;border-radius:50%;background:var(--pl-accent);color:var(--pl-accent-fg);transition:transform .15s ease,opacity .15s}
.player .pl-main:hover{transform:scale(1.06)}
.player .pl-main svg{width:24px;height:24px}
.player .pl-prev,.player .pl-next{width:34px;height:34px;opacity:.8}
.player .pl-prev:hover,.player .pl-next:hover{opacity:1}
.player .pl-btn:focus-visible,.player .pl-item:focus-visible,.player .pl-bar:focus-visible{outline:2px solid var(--pl-accent);outline-offset:3px}
.player .i-pause{display:none}
.player.is-playing .i-play{display:none}
.player.is-playing .i-pause{display:inline}
.player .pl-meta{display:flex;flex-direction:column;min-width:0;margin-left:4px;line-height:1.25}
.player .pl-album{font-size:.78em;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-muted)}
.player .pl-now{font-weight:500;font-size:1.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .pl-prog{display:flex;align-items:center;gap:10px;font-size:.82em;color:var(--pl-muted);font-variant-numeric:tabular-nums}
.player .pl-bar{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:20px;background:none;cursor:pointer;margin:0}
.player .pl-bar::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--pl-accent) var(--p,0%),var(--pl-line) var(--p,0%))}
.player .pl-bar::-moz-range-track{height:3px;border-radius:2px;background:var(--pl-line)}
.player .pl-bar::-moz-range-progress{height:3px;border-radius:2px;background:var(--pl-accent)}
.player .pl-bar::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--pl-accent);margin-top:-5px;border:0}
.player .pl-bar::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--pl-accent);border:0}
.player .pl-list{list-style:none;margin:0;padding:0;display:none;border-top:1px solid var(--pl-line)}
.player.is-multi .pl-list{display:block}
.player .pl-item{appearance:none;background:none;border:0;border-bottom:1px solid var(--pl-line);width:100%;display:grid;grid-template-columns:1.6em 1fr auto;gap:8px;align-items:baseline;padding:10px 2px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:color .15s}
.player .pl-item:hover{color:var(--pl-accent)}
.player .pl-item.is-active{color:var(--pl-accent)}
.player .pl-n,.player .pl-d{font-variant-numeric:tabular-nums;color:var(--pl-muted);font-size:.86em}
.player .pl-item.is-active .pl-n{color:var(--pl-accent)}
@media (max-width:560px){.player{grid-template-columns:1fr}.player .pl-cover{aspect-ratio:16/9;min-height:0}}
@media (prefers-reduced-motion:reduce){.player *{transition:none!important}}