/*
=========================================================
2-Spalten Grid-Layout für den Audioplayer
=========================================================
*/

.audioplayer {
    display					: grid;
	
    /* linke Spalte (Buttons): 5.2em breit | rechte Spalte (Bar/Zeit/Volume): restlicher Platz */
    grid-template-columns	: 5.2em 1fr;
	
    /* 3 Zeilen: 1. Zeit (auto) | 2. Progressbar (auto) | 3. Skip-Buttons & Volume (auto) */
    grid-template-rows		: auto auto auto;
    column-gap				: 1em;
    row-gap					: 0.45em;
    align-items				: center;
    height					: auto !important; /* überschreibt feste Höhe aus dem Original-CSS */
    padding					: 0.75em 1em;
    position				: relative;
    box-sizing				: border-box;
}


/* Verstecktes Audio-Tag aus dem Grid-Fluss nehmen */
.audioplayer audio {
	display: none;
}


/* --- linke Spalte: Play-Button & Skip-Buttons --- */

.audioplayer-playpause {
	grid-column		: 1;
	grid-row		: 1 / 3; /* streckt sich über Zeile 1 und 2 (auf Höhe von Zeit + Progressbar) */
	position		: relative !important;
	left			: auto !important;
	top				: auto !important;
	width			: 100% !important;
	height			: 100% !important;
	min-height		: 2.6em;
	display			: flex;
	align-items		: center;
	justify-content	: center;
	border			: 1px solid var(--color-text);
	border-radius	: 10px;
	background		: var(--color-button);
	cursor			: pointer;
}



.audioplayer-playpause a {
	display		: block;
	width		: 100%;
	height		: 100%;
	position	: relative;
	text-indent	: -9999px; /* versteckt eventuellen Text-Fallback */
	overflow	: hidden;
}


/* Standardzustand (Pause): Play-Dreieck über ::before */
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a::before {
	content		: '';
	position	: absolute;
	top			: 50%;
	left		: 50%;	/* optisch nach rechts versetzt (46% statt 50%), da ein Dreieck sonst linkslastig wirkt */
	transform	: translate(-42%, -50%);
	width		: 0;
	height		: 0;
	border-style: solid;
	border-width: 0.55em 0 0.55em 0.95em;
	border-color: transparent transparent transparent var(--color-text);
}

/* ::after im Play-Zustand ausblenden */
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a::after {
    content: none;
}

/* Abspielzustand (.audioplayer-playing aktiv): zwei Pause-Balken */
.audioplayer-playing .audioplayer-playpause a::before,
.audioplayer-playing .audioplayer-playpause a::after {
    content			: '';
    position		: absolute;
    top				: 50%;
    transform		: translateY(-50%);
    width			: 0.28em;
    height			: 1.05em;
    background-color: var(--color-text);
    border			: none;
    border-radius	: 1px;
}

/* linker Pause-Balken */
.audioplayer-playing .audioplayer-playpause a::before {
	left: calc(50% - 0.42em);
}

/* rechter Pause-Balken */
.audioplayer-playing .audioplayer-playpause a::after {
	left: calc(50% + 0.14em);
}


/* Skip-Buttons nebeneinander in Zeile 3 unter dem Play-Button */
.audioplayer-rewind,
.audioplayer-forward {
	grid-column		: 1;
	grid-row		: 3;
	position		: relative !important;
	left			: auto !important;
	top				: auto !important;
	width			: calc(50% - 2px) !important;
	height			: 1.8em !important;
	border			: 1px solid var(--color-text);
	border-radius	: 10px;
	background		: var(--color-button);
	cursor			: pointer;
}

.audioplayer-rewind {
	justify-self	: start; /* links unter dem Play-Button */
}

.audioplayer-forward {
	justify-self	: end;   /* rechts unter dem Play-Button */
}

.audioplayer-rewind:hover,
.audioplayer-forward:hover,
.audioplayer-playpause:hover {
	background		: var(--color-button-hover);
}

.audioplayer-rewind a,
.audioplayer-forward a {
	display			: flex;
	align-items		: center;
	justify-content	: center;
	width			: 100%;
	height			: 100%;
	font-size		: 0.7em;
	text-decoration	: none;
	color			: var(--color-text);
	text-indent		: 0 !important;
	user-select		: none;
}


/*
=========================================================
 Doppelpfeil-Symbole für Zurückspulen (◀◀) und Vorspulen (▶▶)
 =========================================================
*/

.audioplayer-rewind a,
.audioplayer-forward a {
	display		: block !important;
	width		: 100%;
	height		: 100%;
	position	: relative;
	text-indent	: -9999px !important; /* versteckt Text optisch */
	overflow	: hidden;
}

/* Grundform der beiden Pfeile (über ::before und ::after) */
.audioplayer-rewind a::before,
.audioplayer-rewind a::after,
.audioplayer-forward a::before,
.audioplayer-forward a::after {
	content		: '';
	position	: absolute;
	top			: 50%;
	transform	: translateY(-50%);
	width		: 0;
	height		: 0;
	border-style: solid;
}

/* --- Zurück: zwei Pfeile nach links (◀◀) --- */
.audioplayer-rewind a::before,
.audioplayer-rewind a::after {
	border-width: 0.32em 0.48em 0.32em 0;
	border-color: transparent var(--color-text) transparent transparent;
}

.audioplayer-rewind a::before {
	left	: calc(50% - 0.52em); /* linker Pfeil */
}

.audioplayer-rewind a::after {
	left: calc(50% + 0.04em); /* rechter Pfeil */
}

/* --- Vor: zwei Pfeile nach rechts (▶▶) --- */
.audioplayer-forward a::before,
.audioplayer-forward a::after {
	border-width: 0.32em 0 0.32em 0.48em;
	border-color: transparent transparent transparent var(--color-text);
}

.audioplayer-forward a::before {
	left: calc(50% - 0.52em); /* linker Pfeil */
}

.audioplayer-forward a::after {
	left: calc(50% + 0.04em); /* rechter Pfeil */
}

/* --- rechte Spalte: Zeiten, Progressbar & Lautstärke --- */

/* beide Zeitanzeigen teilen sich Zeile 1 über der Progressbar */
.audioplayer-time {
	grid-column	: 2;
	grid-row	: 1;
	position	: relative !important;
	left		: auto !important;
	right		: auto !important;
	top			: auto !important;
	width		: auto !important;
	height		: auto !important;
	color		: var(--color-text);
	line-height	: 1 !important;
	font-size	: 0.8em;
	border		: none !important;
}

.audioplayer-time-current {
	justify-self: start; /* links über der Progressbar */
}

.audioplayer-time-duration {
	justify-self: end;   /* rechts über der Progressbar */
}

/* Progressbar in Zeile 2 über volle Spaltenbreite */
.audioplayer-bar {
	grid-column		: 2;
	grid-row		: 2;
	position		: relative !important;
	left			: auto !important;
	right			: auto !important;
	top				: auto !important;
	width			: 100% !important;
	height			: 0.65em !important;
	margin			: 0 !important;
	background-color: var(--color-background-inactive);
	border-radius	: 3px;
	cursor			: pointer;
}

/* gepufferter und geladener Bereich */
.audioplayer-bar-loaded {
	position		: absolute;
	top				: 0;
	left			: 0;
	height			: 100%;
	width			: 0; /* wird dynamisch per JS gesetzt */
	border-radius	: 3px;
	background-color: rgba(255, 255, 255, 0.25);
	z-index			: 1;
	transition		: width 0.1s linear;
}

/* bereits abgespielter Bereich */
.audioplayer-bar-played {
	position		: absolute;
	top				: 0;
	left			: 0;
	height			: 100%;
	width			: 0; /* wird dynamisch per JS gesetzt */
	border-radius	: 3px;
	background		: -webkit-linear-gradient(left,var(--color-text),var(--color-background-accent));
	z-index			: 2;
}


/* Lautstärkeregelung in Zeile 3 unter der Progressbar */
.audioplayer-volume {
	grid-column		: 2;
	grid-row		: 3;
	position		: relative !important;
	left			: auto !important;
	right			: auto !important;
	top				: auto !important;
	width			: 100% !important;
	height			: 1.8em !important;
	display			: flex;
	align-items		: center;
	justify-content	: flex-end;
	gap				: 0.6em;
	border-left		: none !important;
}

.audioplayer-volume-button {
	position		: relative !important;
	left			: auto !important;
	top				: auto !important;
	width			: 1.6em !important;
	height			: 1.6em !important;
	flex-shrink		: 0;
	cursor			: pointer;
}


.audioplayer-volume-button a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
}


/* Lautsprecher-Körper (Trapez/Trichter), immer sichtbar */
.audioplayer-volume-button a::before {
	content			: '';
	position		: absolute;
	top				: 50%;
	left			: 0.2em;
	transform		: translateY(-50%);
	width			: 0;
	height			: 0.45em;
	border-style	: solid;
	border-width	: 0.35em 0.45em 0.35em 0;
	border-color	: transparent var(--color-text) transparent transparent;
	background-color: var(--color-text);
	background-clip	: content-box;
	padding-left	: 0.25em;
}

/* Aktiver Zustand: Schallwelle rechts neben dem Lautsprecher */
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a::after {
	content						: '';
	position					: absolute;
	top							: 50%;
	left						: 0.85em;
	transform					: translateY(-50%);
	width						: 0.45em;
	height						: 0.75em;
	border						: 2px solid var(--color-text);
	border-left					: none;
	border-top-left-radius		: 0;
	border-bottom-left-radius	: 0;
	border-top-right-radius		: 0.5em;
	border-bottom-right-radius	: 0.5em;
	box-sizing					: border-box;
}

/* Stummgeschaltet (.audioplayer-mute): schräger Strich statt Schallwelle */
.audioplayer-mute .audioplayer-volume-button a::after {
	content				: '';
	position			: absolute;
	top					: 50%;
	left				: 0.9em;
	width				: 0.5em;
	height				: 2px;
	background-color	: var(--color-text);
	transform			: translateY(-50%) rotate(45deg);
	box-shadow			: 0 0 0 0 transparent;
}

/* Zweiter Balken für ein sauberes "x" neben dem stummgeschalteten Lautsprecher */
.audioplayer-mute .audioplayer-volume-button::after {
	content				: '';
	position			: absolute;
	top					: 50%;
	left				: 0.9em;
	width				: 0.5em;
	height				: 2px;
	background-color	: var(--color-text);
	transform			: translateY(-50%) rotate(-45deg);
	pointer-events		: none;
}


/* Lautstärke-Schieberegler (Spur) */
.audioplayer-volume-adjust {
	position		: relative !important;
	left			: auto !important;
	right			: auto !important;
	top				: auto !important;
	bottom			: auto !important;
	display			: block !important;
	width			: 7em !important;
	height			: 0.45em !important;
	padding			: 0 !important;
	background		: var(--color-background-inactive) !important;
	border-radius	: 2px;
	overflow		: hidden;
	cursor			: pointer;
}

/* äußerer Wrapper im Regler (dient dem JS als Referenz für die 100%-Breite) */
.audioplayer-volume-adjust > div {
	position		: relative !important;
	top				: auto !important;
	left			: auto !important;
	width			: 100% !important;
	height			: 100% !important;
	background		: var(--color-background-inactive) !important;
	
}

/* innerer Balken für die aktuelle Lautstärke */
.audioplayer-volume-adjust div div {
	position		: absolute !important;
	top				: 0 !important;
	left			: 0 !important;
	bottom			: auto !important;
	height			: 100% !important;	/* die Weite wird per JS in % gesetzt (Standard beim Start: 100%) */
	background		: -webkit-linear-gradient(left,var(--color-text),var(--color-background-accent)) !important;
	border-radius	: 2px;
}



/*
=========================================================
Animationen während der Wiedergabe (.audioplayer-playing)
=========================================================
 */

/* Übergänge für Hover & Fortschritt */
.audioplayer-playpause,
.audioplayer-rewind,
.audioplayer-forward {
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.3s ease;
}

.audioplayer-playpause:active,
.audioplayer-rewind:active,
.audioplayer-forward:active {
	transform: scale(0.95); /* Eindrücken beim Klicken */
}

.audioplayer-bar-played {
	transition	: width 0.12s linear;
	overflow	: visible !important;
}




/* pulsierende Schallwelle am Lautsprecher während der Wiedergabe */
@keyframes soundWave {
	0%, 100% {
		opacity: 1;
		transform: translateY(-50%) scale(1);
		box-shadow: 0 0 0 0 var(--color-text-accent);
    }
	50% {
		opacity: 0.45;
		transform: translateY(-50%) scale(1.18);
		box-shadow: 0 0 0 1px var(--color-text);
	}
}

.audioplayer-playing:not(.audioplayer-mute) .audioplayer-volume-button a::after {
	animation: soundWave 1.4s infinite ease-in-out;
}





/* =========================================================
   Animierter 4-Balken Mini-Equalizer neben der Zeitanzeige
   ========================================================= */

.audioplayer-equalizer {
grid-column: 2;
    grid-row: 3;          /* Zeile 3: unter der Progressbar */
    justify-self: start;  /* Links ausgerichtet (gegenüber der Lautstärkeregelung) */
    margin-left: 0;       /* Kein Abstand zur Zeitanzeige mehr nötig */
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 1.1em;        /* Kann unter der Bar etwas höher sein */
    opacity: 0;           /* Im pausierten Zustand unsichtbar */
    transform: translateY(2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Sobald abgespielt wird, blendet der Equalizer sanft ein */
.audioplayer-playing .audioplayer-equalizer {
    opacity: 1;
    transform: translateY(0);
}

/* Die 4 einzelnen Balken */
.audioplayer-equalizer span {
    display: block;
    width: 4px;
    height: 25%;
    background: -webkit-linear-gradient(top,var(--color-text-accent),var(--color-text)); /* Balkenfarbe (bei hellem Design z. B. #8b0000) */
    border-radius: 1px;
    transform-origin: bottom;
}

/* Animation für die Balken (nur aktiv, wenn .audioplayer-playing gesetzt ist) */
@keyframes eqDance {
    0%, 100% {
        height: 20%;
    }
    50% {
        height: 100%;
    }
}

.audioplayer-playing .audioplayer-equalizer span:nth-child(1) {
    animation: eqDance 0.75s infinite ease-in-out;
}

.audioplayer-playing .audioplayer-equalizer span:nth-child(2) {
    animation: eqDance 0.55s infinite ease-in-out 0.15s;
}

.audioplayer-playing .audioplayer-equalizer span:nth-child(3) {
    animation: eqDance 0.85s infinite ease-in-out 0.3s;
}

.audioplayer-playing .audioplayer-equalizer span:nth-child(4) {
    animation: eqDance 0.65s infinite ease-in-out 0.1s;
}

/* Wenn Web Audio API aktiv ist (.is-live), übernimmt JS die Balkenhöhe in Echtzeit */
.audioplayer-equalizer.is-live span {
    animation: none !important;
    transition: height 0.06s ease-out;
}











/* falls der Browser keine Lautstärkeregelung unterstützt (z. B. iOS) */
.audioplayer-novolume .audioplayer-volume {
	display: none;
}