/* --------------------------------------------------------------
   Block: Website: Audio Player (website-audio-player)

   Die nativen Audio-Controls lassen sich nur in Chrome/Safari über
   ::-webkit-media-controls-* stylen; Firefox bietet dafür keinerlei
   CSS-Zugriff. Deshalb eigene Bedienelemente aus <button> und
   <input type="range"> – die sind in allen Browsern stylebar.

   Alle Klassen sind mit "wap-" präfixiert, damit Theme-Regeln auf
   generische Namen (.btn, .title, …) nicht hineinwirken.
   -------------------------------------------------------------- */

.website-audio-player {
	--wap-bg: #7acbea;
	--wap-track: #5cb6d9;
	--wap-accent: #fff;

	box-sizing: border-box;
}

.website-audio-player *,
.website-audio-player *::before,
.website-audio-player *::after {
	box-sizing: inherit;
}

.website-audio-player .wap-title {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.website-audio-player .wap-audio {
	width: 100%;
	background: var(--wap-bg);
}

/* Sobald JS übernommen hat: native Controls raus, eigene rein */
.website-audio-player .wap-player.wap-is-enhanced .wap-audio {
	display: none;
}

.website-audio-player .wap-player.wap-is-enhanced .wap-controls {
	display: flex;
}

.website-audio-player .wap-controls {
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--wap-bg);
	color: var(--wap-accent);
	font: 400 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Buttons -------------------------------------------------- */
/* Themes stylen .btn/a oft mit Rahmen, Schatten, Mindesthöhe und
   einem Pfeil via ::after – hier alles bewusst zurücksetzen. */
.website-audio-player .wap-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	min-width: 0;
	max-width: none;
	height: 2rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wap-accent);
	box-shadow: none;
	color: var(--wap-bg);
	font: inherit;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 0;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

.website-audio-player .wap-btn::before,
.website-audio-player .wap-btn::after {
	content: none;
	display: none;
}

.website-audio-player .wap-btn:hover,
.website-audio-player .wap-btn:focus,
.website-audio-player .wap-btn:active,
.website-audio-player .wap-btn:visited {
	background: var(--wap-accent);
	border: 0;
	box-shadow: none;
	color: var(--wap-bg);
	text-decoration: none;
	transform: none;
}

.website-audio-player .wap-btn:hover {
	opacity: 0.8;
}

.website-audio-player .wap-btn:focus-visible {
	outline: 2px solid var(--wap-accent);
	outline-offset: 2px;
}

.website-audio-player .wap-btn svg {
	width: 1rem;
	height: 1rem;
	max-width: none;
	fill: currentColor;
	display: block;
	flex: 0 0 auto;
	pointer-events: none; /* Klick landet immer auf dem Button selbst */
}

/* Icon-Umschaltung über Zustands-Attribute statt JS-Markup-Ersatz */
.website-audio-player .wap-btn .wap-icon-pause,
.website-audio-player .wap-player[data-playing="true"] .wap-btn .wap-icon-play {
	display: none;
}

.website-audio-player .wap-player[data-playing="true"] .wap-btn .wap-icon-pause {
	display: block;
}

.website-audio-player .wap-mute .wap-icon-muted,
.website-audio-player .wap-player[data-muted="true"] .wap-mute .wap-icon-loud {
	display: none;
}

.website-audio-player .wap-player[data-muted="true"] .wap-mute .wap-icon-muted {
	display: block;
}

/* --- Zeitanzeigen --------------------------------------------- */
.website-audio-player .wap-time {
	flex: 0 0 auto;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wap-accent);
}

/* --- Slider (Timeline + Lautstärke) --------------------------- */
/* range-Elemente brauchen je Engine eigene Pseudoelemente */
.website-audio-player .wap-range {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	height: 1rem;
	min-height: 0;
}

.website-audio-player .wap-timeline {
	flex: 1 1 auto;
	min-width: 4rem;
}

.website-audio-player .wap-volume {
	flex: 0 0 6rem;
	width: 6rem;
}

.website-audio-player .wap-range:focus {
	outline: none;
}

.website-audio-player .wap-range:focus-visible {
	outline: 2px solid var(--wap-accent);
	outline-offset: 2px;
}

/* Track – WebKit/Blink. Der gefüllte Bereich kommt hier über einen
   Gradient, dessen Breite JS via --wap-fill setzt (kein Pendant zu
   ::-moz-range-progress vorhanden). */
.website-audio-player .wap-range::-webkit-slider-runnable-track {
	height: 0.375rem;
	border: 0;
	border-radius: 0;
	background-color: var(--wap-track);
	background-image: linear-gradient(var(--wap-accent), var(--wap-accent));
	background-repeat: no-repeat;
	background-size: var(--wap-fill, 0%) 100%;
}

/* Track – Firefox */
.website-audio-player .wap-range::-moz-range-track {
	height: 0.375rem;
	border: 0;
	border-radius: 0;
	background: var(--wap-track);
}

/* Gefüllter Bereich – Firefox kann das nativ */
.website-audio-player .wap-range::-moz-range-progress {
	height: 0.375rem;
	border-radius: 0;
	background: var(--wap-accent);
}

/* Thumb – WebKit/Blink */
.website-audio-player .wap-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.75rem;
	height: 0.75rem;
	margin-top: -0.1875rem; /* zentriert auf 0.375rem Track */
	border: 0;
	border-radius: 0;
	background: var(--wap-accent);
	box-shadow: none;
}

/* Thumb – Firefox */
.website-audio-player .wap-range::-moz-range-thumb {
	width: 0.75rem;
	height: 0.75rem;
	border: 0;
	border-radius: 0;
	background: var(--wap-accent);
	box-shadow: none;
}

/* Schmale Viewports: Lautstärkeregler weg, Mute-Button bleibt */
@media (max-width: 480px) {
	.website-audio-player .wap-volume {
		display: none;
	}
}