/* =======================
   Audio Player (SCSS)
   ======================= */
.audio-player {
  /* ========= Eingangsfarben ========= */
  --ap-bg: var(--bg, var(--sand));
  --ap-ui: var(--ui, var(--white));
  --ap-bg-text: var(--bg-text, var(--sand-contrast));
  --ap-ui-text: var(--ui-text, var(--white-contrast));
  /* ========= Abgeleitete Farben ========= */
  --ap-highlight: color-mix(in oklab, var(--ap-bg) 80%, var(--ap-ui) 20%);
  --ap-bg-soft: color-mix(in oklab, var(--ap-bg) 88%, var(--ap-ui) 12%);
  --ap-panel: color-mix(in oklab, var(--ap-bg) 92%, var(--ap-ui) 8%);
  --ap-border: color-mix(in oklab, var(--ap-bg) 70%, var(--ap-ui) 30%);
  --ap-accent: var(--ap-ui);
  --ap-accent-2: color-mix(in oklab, white 35%, var(--ap-ui) 65%);
  --ap-text: var(--ap-bg-text);
  --ap-text-muted: color-mix(in oklab, var(--ap-bg-text) 70%, var(--ap-bg) 30%);
  --ap-good: color-mix(in oklab, #22c55e 70%, var(--ap-ui) 30%);
  --ap-bad: color-mix(in oklab, #ef4444 70%, var(--ap-ui) 30%);
  /* ========= Größen/Abstände ========= */
  --ap-radius: 1rem;
  --ap-radius-sm: 0.75rem;
  --ap-gap: 0.75rem;
  --ap-pad: 1rem;
  --ap-shadow: 0 0.5rem 1.75rem rgba(0,0,0,.15);
  --ap-control-size: 2.75rem;
  --ap-icon-size: 1.25rem;
  --ap-icon-touch: 2.25rem; /* Zielgröße für icon-only Buttons */
  --ap-progress-h: 0.6rem;
  --ap-cover: 6.5rem;
  --ap-ring: 0 0 0 0.2rem color-mix(in oklab, var(--ap-ui) 35%, transparent 65%);
  --ap-glass: linear-gradient(
                  180deg,
                  color-mix(in oklab, var(--ap-bg) 85%, white 15%),
                  color-mix(in oklab, var(--ap-bg) 95%, white 5%)
  );
  --ap-progress-bg: linear-gradient(90deg, var(--ap-accent), var(--ap-accent-2));
  /* ========= Grundgerüst ========= */
  font-family: inherit;
  color: var(--ap-text);
  background: var(--ap-bg);
  border: 0.06rem solid var(--ap-border);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  padding: clamp(0.75rem, 2vw, var(--ap-pad));
  display: grid;
  gap: var(--ap-gap);
  position: relative;
  overflow: hidden;
  /* ========= Header ========= */
  /* Ohne Cover → 2 Spalten */
  /* Ohne Quality-Panel → 2 Spalten (cover | meta) */
  /* Weder Cover noch Quality → 1 Spalte */
  /* ========= Slider/Range ========= */
  /* ========= Progress ========= */
  /* ========= Optional: Playlist ========= */
  /* ========= Tags ========= */
  /* ========= Responsive ========= */
}
.audio-player .ap-header {
  display: grid;
  grid-template-columns: auto 1fr auto; /* cover | meta | quick(quality/icons) */
  gap: var(--ap-gap);
  align-items: center;
  background: var(--ap-glass);
  border-radius: var(--ap-radius);
  padding: var(--ap-pad);
}
.audio-player:not(:has(.ap-cover)) .ap-header {
  grid-template-columns: 1fr auto;
  padding: calc(var(--ap-pad) * 0.75);
}
.audio-player:not(:has(.ap-quality)) .ap-header {
  grid-template-columns: auto 1fr;
}
.audio-player:not(:has(.ap-cover)):not(:has(.ap-quality)) .ap-header {
  grid-template-columns: 1fr;
}
.audio-player .ap-quick:empty,
.audio-player .ap-quality[hidden] {
  display: none !important;
}
.audio-player .ap-cover {
  width: var(--ap-cover);
  height: var(--ap-cover);
  border-radius: calc(var(--ap-radius) - 0.25rem);
  overflow: hidden;
  box-shadow: var(--ap-shadow);
  border: 0.06rem solid var(--ap-border);
}
.audio-player .ap-cover .image-item {
  height: 100%;
}
.audio-player .ap-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.audio-player .ap-meta {
  min-width: 0;
}
.audio-player .ap-meta .ap-title {
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.15;
  color: var(--ap-text);
}
.audio-player .ap-meta .ap-artist {
  color: var(--ap-text-muted);
  margin-top: 0.2rem;
}
.audio-player .ap-quality {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.audio-player .ap-quality span {
  font-size: 0.8rem;
  color: var(--ap-text-muted);
}
.audio-player .ap-select {
  appearance: none;
  background: var(--ap-bg-soft);
  color: var(--ap-text);
  border: 0.06rem solid var(--ap-border);
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  cursor: pointer;
}
.audio-player .ap-select:focus-visible {
  outline: none;
  box-shadow: var(--ap-ring);
}
.audio-player .ap-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ap-gap);
  align-items: center;
  background: var(--ap-panel);
  border: 0.06rem solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 0.75rem;
}
.audio-player .ap-controls .ap-btn {
  width: var(--ap-control-size);
  height: var(--ap-control-size);
  border-radius: 0.75rem;
  border: 0.06rem solid var(--ap-border);
  background: var(--ap-bg-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ap-text);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.audio-player .ap-controls .ap-btn:hover {
  background: color-mix(in oklab, var(--ap-bg-soft) 90%, var(--ap-ui) 10%);
}
.audio-player .ap-controls .ap-btn:active {
  transform: translateY(0.05rem) scale(0.98);
}
.audio-player .ap-controls .ap-btn:focus-visible {
  outline: none;
  box-shadow: var(--ap-ring);
}
.audio-player .ap-controls .ap-btn .icon-pause {
  display: none;
}
.audio-player .ap-controls .ap-btn.is-playing .icon-play {
  display: none;
}
.audio-player .ap-controls .ap-btn.is-playing .icon-pause {
  display: inline;
}
.audio-player .ap-controls .ap-btn[data-action=play] {
  background: var(--ap-accent);
  color: var(--ap-ui-text);
  border: none;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
.audio-player .ap-controls .ap-btn[data-action=play]:hover {
  background: color-mix(in oklab, var(--ap-accent) 90%, white 10%);
}
.audio-player .ap-controls .ap-btn[data-action=play]:active {
  transform: translateY(0.05rem) scale(0.98);
}
.audio-player .ap-controls .ap-btn[data-action=play]:focus-visible {
  box-shadow: var(--ap-ring);
}
.audio-player .ap-controls .ap-right {
  justify-self: end;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.audio-player .ap-controls .ap-volume {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Rückwärtskompatibel: falls per JS die Klasse auf dem Wrapper gesetzt wird */
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute] {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  inline-size: var(--ap-icon-touch);
  block-size: var(--ap-icon-touch);
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  color: var(--ap-text);
  cursor: pointer;
  /* Toggle nur über aria-pressed – unabhängig vom Wrapper-State */
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute]:hover {
  color: color-mix(in oklab, var(--ap-text) 85%, var(--ap-ui) 15%);
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute]:focus-visible {
  outline: none;
  box-shadow: var(--ap-ring);
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute] svg {
  width: var(--ap-icon-size);
  height: var(--ap-icon-size);
  display: block;
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute] .vol-off {
  display: none;
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute][aria-pressed=true] .vol-on {
  display: none;
}
.audio-player .ap-controls .ap-volume .ap-icon[data-action=mute][aria-pressed=true] .vol-off {
  display: inline;
}
.audio-player .ap-controls .ap-volume.is-muted .ap-icon[data-action=mute] {
  color: var(--ap-text-muted);
}
.audio-player .ap-controls .ap-volume.is-muted .ap-icon[data-action=mute] .vol-on {
  display: none;
}
.audio-player .ap-controls .ap-volume.is-muted .ap-icon[data-action=mute] .vol-off {
  display: inline;
}
.audio-player .ap-range {
  -webkit-appearance: none;
  appearance: none;
  height: var(--ap-progress-h);
  background: var(--ap-highlight);
  border-radius: 999rem;
  width: 100%;
  cursor: pointer;
  border: 0.06rem solid var(--ap-border);
  position: relative;
}
.audio-player .ap-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--ap-accent);
  border-radius: 50%;
  border: 0.12rem solid color-mix(in oklab, var(--ap-accent), #000 35%);
  box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--ap-accent), transparent 75%);
}
.audio-player .ap-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ap-accent);
  border: 0.12rem solid color-mix(in oklab, var(--ap-accent), #000 35%);
}
.audio-player .ap-range--seek {
  background-image: var(--ap-progress-bg);
  background-repeat: no-repeat;
  background-size: 0% 100%; /* via JS gefüllt */
}
.audio-player .ap-range--vol {
  width: 9rem;
}
.audio-player .ap-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  background: var(--ap-panel);
  border: 0.06rem solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 0.6rem 0.75rem;
}
.audio-player .ap-progress .ap-time {
  font-variant-numeric: tabular-nums;
  color: var(--ap-text-muted);
  font-size: 0.85rem;
}
.audio-player .ap-playlist {
  display: grid;
  gap: 0.5rem;
  background: var(--ap-panel);
  border: 0.06rem solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 0.5rem;
}
.audio-player .ap-playlist .ap-track {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
  background: var(--ap-bg-soft);
  border: 0.06rem solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  padding: 0.625rem 0.75rem;
  cursor: pointer;
  text-align: left;
}
.audio-player .ap-playlist .ap-track .ap-track-title {
  font-weight: 600;
  color: var(--ap-text);
}
.audio-player .ap-playlist .ap-track .ap-track-artist, .audio-player .ap-playlist .ap-track .ap-track-time {
  color: var(--ap-text-muted);
  font-size: 0.85rem;
}
.audio-player .ap-playlist .ap-track:hover {
  background: color-mix(in oklab, var(--ap-bg-soft) 90%, var(--ap-ui) 10%);
}
.audio-player .ap-playlist .ap-track.is-active {
  background: var(--ap-highlight);
  border-color: color-mix(in oklab, var(--ap-border) 70%, var(--ap-ui) 30%);
}
.audio-player .ap-playlist .ap-track.is-active .ap-track-title {
  color: color-mix(in oklab, var(--ap-bg-text) 85%, var(--ap-ui) 15%);
}
.audio-player .ap-tags {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.audio-player .ap-tags .ap-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ap-radius-sm);
  border: 0.06rem dashed var(--ap-border);
  background: var(--ap-highlight);
  color: color-mix(in oklab, var(--ap-bg-text) 85%, var(--ap-ui) 15%);
}
@media (max-width: 45rem) {
  .audio-player {
    --ap-cover: 5.25rem;
  }
  .audio-player .ap-range--vol {
    width: 6.5rem;
  }
}
@media (max-width: 32rem) {
  .audio-player .ap-header {
    grid-template-columns: auto 1fr;
  }
  .audio-player:not(:has(.ap-cover)) .ap-header {
    grid-template-columns: 1fr;
  }
}

.audio-player {
  /* Captions-Container (wird nur erstellt, wenn aktiv) */
  /* Sprach-Dropdown (Popover) am Button) */
  /* Button-Stil (icon-only, wie Mute) */
  /* Caption-Linien (Triplet) */
  /* Single-Line-Modus */
}
.audio-player .ap-captions {
  background: var(--ap-panel);
  border: 0.06rem solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 0.6rem;
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.audio-player .ap-cap-menu {
  position: absolute;
  z-index: 20;
  min-width: 10rem;
  background: var(--ap-panel);
  border: 0.06rem solid var(--ap-border);
  border-radius: 0.6rem;
  box-shadow: var(--ap-shadow);
  padding: 0.35rem;
  display: none;
}
.audio-player .ap-cap-menu.is-open {
  display: block;
}
.audio-player .ap-cap-menu .ap-cap-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  cursor: pointer;
  color: var(--ap-text);
}
.audio-player .ap-cap-menu .ap-cap-item:hover {
  background: color-mix(in oklab, var(--ap-bg-soft) 90%, var(--ap-ui) 10%);
}
.audio-player .ap-cap-menu .ap-cap-item.is-active {
  background: var(--ap-highlight);
}
.audio-player .ap-cap-menu .ap-cap-item .ap-cap-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ap-text-muted);
}
.audio-player .ap-icon[data-action=captions] {
  inline-size: var(--ap-icon-touch);
  block-size: var(--ap-icon-touch);
  border: none;
  background: none;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ap-text);
  cursor: pointer;
  border-radius: 0.5rem;
}
.audio-player .ap-icon[data-action=captions]:hover {
  color: color-mix(in oklab, var(--ap-text) 85%, var(--ap-ui) 15%);
}
.audio-player .ap-icon[data-action=captions]:focus-visible {
  outline: none;
  box-shadow: var(--ap-ring);
}
.audio-player .ap-icon[data-action=captions][aria-pressed=true] {
  color: var(--ap-accent);
}
.audio-player .ap-icon[data-action=captions] i {
  font-size: var(--ap-icon-size);
  line-height: 1;
}
.audio-player .ap-captions-lines {
  display: grid;
  gap: 0.25rem;
  transition: transform 0.35s ease;
  /* &.is-advance .line { transform: translateY(-0.25rem); }*/
}
.audio-player .ap-captions .line {
  color: var(--ap-text);
  line-height: 1.3;
  transition: transform 0.35s ease, opacity 0.35s ease, color 0.35s ease;
  will-change: transform, opacity;
  word-wrap: anywhere;
}
.audio-player .ap-captions .line.prev,
.audio-player .ap-captions .line.next {
  opacity: 0.6;
  color: color-mix(in oklab, var(--ap-text) 60%, var(--ap-bg) 40%);
}
.audio-player .ap-captions .line.curr {
  opacity: 1;
  font-weight: 600;
  display: block;
  word-wrap: anywhere;
}
.audio-player .ap-captions .line.is-worded .word.is-active ~ .word {
  opacity: 0.7;
}
.audio-player .ap-captions .line .vtt-v::before {
  content: attr(data-voice) ": ";
  opacity: 0.75;
  font-weight: 600;
  margin-right: 0.25rem;
}
.audio-player[data-captions-mode=single] .ap-captions .line.prev, .audio-player[data-captions-mode=single] .ap-captions .line.next {
  display: none;
}

/*# sourceMappingURL=player.css.map */