/*
 * Audio-Player mit Playlist
 *
 * Das Aussehen wird über die Variablen in .ap gesteuert.
 * Zum Anpassen diese Variablen in deinem eigenen Stylesheet überschreiben, z. B.:
 *
 *   .ap { --ap-accent: #005f73; --ap-radius: 0; }
 *
 * Schrift und Grundfarbe werden von der Website übernommen.
 */

.ap {
    --ap-accent: #a00000;          /* Akzentfarbe: Play-Button, aktiver Titel, Fortschritt */
    --ap-accent-text: #ffffff;     /* Text/Icon auf Akzentfarbe */
    --ap-bg: #f6f4f4;              /* Hintergrund des Players */
    --ap-text: inherit;            /* Textfarbe */
    --ap-muted: #6b6464;           /* Zeiten, Beschreibungen */
    --ap-track: #ddd6d6;           /* Leerer Teil der Regler */
    --ap-hover: rgba(160, 0, 0, 0.07); /* Hover in der Playlist */
    --ap-radius: 6px;              /* Eckenradius des Players */
    --ap-gap: 1rem;                /* Grundabstand */
    --ap-play-size: 3.25rem;       /* Grösse des Play-Buttons */

    --ap-progress: 0%;             /* wird per JavaScript gesetzt */
    --ap-volume: 100%;             /* wird per JavaScript gesetzt */

    background: var(--ap-bg);
    color: var(--ap-text);
    border-radius: var(--ap-radius);
    padding: var(--ap-gap);
    font: inherit;
}

.ap__heading {
    margin: 0 0 var(--ap-gap);
}

.ap__audio {
    display: block;
    width: 100%;
}

.ap--enhanced .ap__audio {
    display: none;
}

/* Steuerung */

.ap__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ap-gap);
}

.ap__controls[hidden] {
    display: none;
}

.ap__buttons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ap__btn {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ap__btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.ap__btn:hover:not(:disabled) {
    background: var(--ap-hover);
}

.ap__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ap__btn--play {
    width: var(--ap-play-size);
    height: var(--ap-play-size);
    background: var(--ap-accent);
    color: var(--ap-accent-text);
}

.ap__btn--play:hover:not(:disabled) {
    background: var(--ap-accent);
    filter: brightness(1.12);
}

.ap__btn--play svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ap__btn--small {
    width: 2rem;
    height: 2rem;
}

.ap__icon-pause,
.ap.is-playing .ap__icon-play,
.ap__icon-muted,
.ap.is-muted .ap__icon-vol {
    display: none;
}

.ap.is-playing .ap__icon-pause,
.ap.is-muted .ap__icon-muted {
    display: block;
}

.ap__now {
    min-width: 0;
}

.ap__now-title {
    margin: 0 0 0.35rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap__timeline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ap__time {
    font-size: 0.8em;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2.6em;
}

.ap__time:last-child {
    text-align: right;
}

.ap__volume {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Regler (Fortschritt und Lautstärke) */

.ap__range {
    --ap-fill: var(--ap-progress);
    flex: 1;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ap__range--volume {
    --ap-fill: var(--ap-volume);
    width: 5.5rem;
    flex: none;
}

.ap__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--ap-accent) var(--ap-fill), var(--ap-track) var(--ap-fill));
}

.ap__range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--ap-accent) var(--ap-fill), var(--ap-track) var(--ap-fill));
}

.ap__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--ap-accent);
}

.ap__range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--ap-accent);
}

/* Playlist */

.ap__list {
    list-style: none;
    margin: var(--ap-gap) 0 0;
    padding: 0;
    counter-reset: ap-track;
}

.ap__item {
    counter-increment: ap-track;
}

.ap__item + .ap__item {
    border-top: 1px solid var(--ap-track);
}

.ap__track {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ap__track::before {
    content: counter(ap-track);
    grid-row: span 2;
    color: var(--ap-muted);
    font-variant-numeric: tabular-nums;
}

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

.ap__track[aria-current="true"] {
    color: var(--ap-accent);
    font-weight: 600;
}

.ap__track[aria-current="true"]::before {
    content: "\25B6";
    color: var(--ap-accent);
}

.ap__track-desc {
    grid-column: 2;
    font-size: 0.85em;
    font-weight: normal;
    color: var(--ap-muted);
}

/* Fokus für Tastaturbedienung */

.ap__btn:focus-visible,
.ap__track:focus-visible,
.ap__range:focus-visible {
    outline: 2px solid var(--ap-accent);
    outline-offset: 2px;
}

/* Schmale Bildschirme: Lautstärke ausblenden (auf Smartphones regelt man am Gerät) */

@media (max-width: 36rem) {
    .ap__controls {
        grid-template-columns: auto 1fr;
    }

    .ap__volume {
        display: none;
    }
}

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