/* =========================================================
   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;
}

/* 1. Standardzustand (Pausiert): Play-Dreieck über ::before */
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a::before {
	content		: '';
	position	: absolute;
	top			: 50%;
	left		: 50%;	/* Optisch leicht 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); /* Farbe des Play-Symbols */
}

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

/* 2. 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); /* Farbe der Pause-Balken */
    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 "-10s" / "+10s" 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ÜCKSPULEN: 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; /* Pfeilfarbe */
}

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

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

/* --- VORSPULEN: 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); /* Pfeilfarbe */
}

.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/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;
}


/* 1. 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; /* Icon-Farbe */
	background-color: var(--color-text); /* Hinterer Teil des Lautsprechers (Icon-Farbe) */
	background-clip: content-box;
	padding-left: 0.25em;
}

/* 2. 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); /* Icon-Farbe */
    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;
}

/* 3. Stummgeschaltet (.audioplayer-mute): Schräger Strich / X 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); /* Icon-Farbe (oder z. B. #ff4d4d für Rot) */
    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); /* Icon-Farbe */
    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		: rgba(255, 255, 255, 0.2) !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-color: var(--color-text) !important; /* Akzentfarbe (bei hellem Design z. B. #8b0000) */
	border-radius	: 2px;
}



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

/* sanfte Ü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); /* Dezentes Eindrücken beim Klicken */
}

.audioplayer-bar-played {
    transition: width 0.12s linear;
    overflow: visible !important; /* Wichtig für den leuchtenden Punkt am Ende */
}

/* sanftes Pulsieren (Glow) am aktiven Play/Pause-Button */
@keyframes pulseButton {
    0% {
        box-shadow: 0 0 0 0 var(--color-text-accent);
    }
    70% {
        box-shadow: 0 0 0 1px var(--color-text);
    }
    100% {
        box-shadow: 0 0 0 0 var(--color-text);
    }
}

.audioplayer-playing .audioplayer-playpause {
    animation: pulseButton 2s infinite ease-out;
}


/* sanft 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;
}