/* Player am linken Rand: Scheibe mit Ring als Griff, die Schublade gleitet nach rechts heraus.
 * Gegenstück zur Fortschrittsleiste rechts. Bewegung nur mit .st-motion; ruhige Fassung ohne Gleiten. */
.st-player {
  --pl-hub: 92px; --pl-width: 432px; --pl-height: 170px; --pl-tuck: 40px; --pl-round: 0 28px 28px 0;
  position: fixed; left: 0; top: 50%; z-index: 56;
  width: var(--pl-width); height: var(--pl-height);
  translate: 0 -50%;
  color: var(--text); font-family: var(--font-sans);
  pointer-events: none;
}
.st-player[hidden] { display: none !important; }
/* Eingeklappt steckt die Scheibe halb im Rand und bleibt im freien Seitenrand; geöffnet rollt sie ganz heraus. */
.st-player.is-open { --pl-tuck: 0px; }
.st-player.is-aside:not(.is-open) { --pl-tuck: 66px; }
.st-player button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.st-player svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* Schublade: Glasfläche mit Lichtkante, bündig am linken Rand; sie öffnet sich hinter der Scheibe nach rechts. */
.st-player__body {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: grid; grid-template-rows: 52px 44px 44px; align-content: center; row-gap: 2px;
  padding: 0 18px 0 calc(var(--pl-hub) + 14px); box-sizing: border-box;
  border: 1px solid var(--accent-line); border-left: 0; border-radius: var(--pl-round);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 9%, transparent), color-mix(in srgb, var(--bg-deep) 40%, transparent)),
    color-mix(in srgb, var(--bg-deep) 84%, transparent);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 18%, transparent), 0 22px 50px -18px rgb(0 0 0 / .85), 0 0 26px color-mix(in srgb, var(--accent) 14%, transparent);
  clip-path: inset(0 100% 0 0 round var(--pl-round));
  pointer-events: auto;
}
.st-player.is-open .st-player__body { clip-path: inset(0 0 0 0 round var(--pl-round)); }
.st-motion .st-player__body { transition: clip-path var(--duration-slow, .45s) var(--ease-standard, cubic-bezier(.22,.72,.12,1)); }
.st-player__body > * { opacity: 0; }
.st-player.is-open .st-player__body > * { opacity: 1; }
.st-motion .st-player__body > * { transition: opacity var(--duration-fast, .15s) ease; }
.st-motion .st-player.is-open .st-player__body > * { transition-delay: .12s; }

.st-player__info { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 52px; color: inherit; text-decoration: none; border-radius: 10px; }
.st-player__cover { grid-row: 1 / 4; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent), 0 6px 16px rgb(0 0 0 / .55); }
.st-player__count { font: 600 10px/1.2 var(--font-mono, var(--font-sans)); letter-spacing: .14em; color: var(--accent); }
.st-player__title { overflow: hidden; font: 700 19px/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.st-player__artist { overflow: hidden; color: var(--text-soft, rgb(240 240 245 / .7)); font-size: 12px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.st-player__info:hover .st-player__title { color: var(--accent); }

.st-player__time { display: flex; align-items: center; gap: 10px; color: var(--text-soft, rgb(240 240 245 / .75)); font: 500 11px/1 var(--font-mono, var(--font-sans)); font-variant-numeric: tabular-nums; }
.st-player__seek { flex: 1; min-width: 0; }
.st-player__controls { display: flex; align-items: center; gap: 4px; }
.st-player__skip { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--text); }
.st-player__skip:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.st-player__volume { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-soft, rgb(240 240 245 / .75)); }
.st-player__volume[hidden] { display: none; }
.st-player__volume svg { width: 18px; height: 18px; }
.st-player__volume input { width: 96px; }

.st-player input[type=range] { --fill: 0%; appearance: none; -webkit-appearance: none; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; accent-color: var(--accent); }
.st-player input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--fill), color-mix(in srgb, var(--text) 18%, transparent) var(--fill)); }
.st-player input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--fill), color-mix(in srgb, var(--text) 18%, transparent) var(--fill)); }
.st-player input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 10px var(--accent); }
.st-player input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 10px var(--accent); }
.st-player input:disabled { opacity: .4; cursor: default; }

/* Griff: Cover-Scheibe mit Ring, fest am linken Rand; sie bleibt beim Ausklappen unter dem Zeiger. */
.st-player__hub { position: absolute; left: 0; top: 50%; z-index: 2; width: var(--pl-hub); height: var(--pl-hub); translate: calc(-1 * var(--pl-tuck)) -50%; display: grid; place-items: center; }
.st-motion .st-player__hub { transition: translate var(--duration-slow, .45s) var(--ease-standard, cubic-bezier(.22,.72,.12,1)); }
.st-player__meter { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; translate: -50% -50%; pointer-events: none; }
.st-player__play {
  position: relative; width: 64px; height: 64px; padding: 0; overflow: hidden; border-radius: 50%; pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); background: var(--bg-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-deep) 88%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 28px rgb(0 0 0 / .65);
}
.st-player__play:hover, .st-player__play:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-deep) 88%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 55%, transparent), 0 12px 28px rgb(0 0 0 / .65); }
.st-player__disc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-motion .st-player.is-playing .st-player__disc { animation: st-player-spin 9s linear infinite; }
.st-player__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgb(5 5 8 / .1) 0 18%, rgb(5 5 8 / .55) 19% 36%, rgb(5 5 8 / .18) 62%); }
.st-player__glyph { position: absolute; inset: 0; z-index: 1; margin: auto; width: 26px !important; height: 26px !important; color: var(--text); filter: drop-shadow(0 1px 4px rgb(0 0 0 / .85)); }
.st-player__glyph--pause, .st-player.is-playing .st-player__glyph--play { display: none; }
.st-player.is-playing .st-player__glyph--pause { display: block; }
.st-player.is-playing .st-player__play, .st-player[data-state=loading] .st-player__play { border-color: var(--accent); }
@keyframes st-player-spin { to { rotate: 360deg; } }

/* Lasche für Touch: klappt auf und zu, ohne die Wiedergabe zu starten. Offen sitzt sie oben rechts in der Schublade. */
.st-player__tab {
  position: absolute; left: calc(var(--pl-hub) - 6px); top: 50%; z-index: 3; translate: 0 -50%; display: none; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--accent); pointer-events: auto;
}
.st-player__tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-player:not(.is-open) .st-player__tab { display: none !important; }
.st-player.is-open .st-player__tab { left: auto; right: 4px; top: 4px; translate: none; }
.st-player.is-open .st-player__tab svg { rotate: 180deg; }
.st-player__list { display: none; }
.st-player__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-player[data-state=error].is-open .st-player__time { visibility: hidden; }
.st-player[data-state=error].is-open .st-player__status { left: calc(var(--pl-hub) + 14px); right: 18px; bottom: 58px; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: var(--danger); font-size: 12px; }
.st-player :focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }

@media (pointer: coarse) {
  .st-player__tab { display: grid; }
  .st-player__body { padding-right: 50px; }
}
@media (max-width: 650px) {
  .st-player { --pl-hub: 80px; --pl-width: min(400px, calc(100vw - 12px)); --pl-height: 166px; --pl-tuck: 34px; top: 62%; }
  .st-player.is-aside:not(.is-open) { --pl-tuck: 58px; }
  .st-player__meter { width: 100px; height: 100px; }
  .st-player__play { width: 56px; height: 56px; }
  .st-player__title { font-size: 17px; }
  .st-player__volume input { width: 72px; }
}
@media print { .st-player { display: none !important; } }