/* Inhalt Vorlesen – Front-End-Styles */

/* Das Widget umschließt Button + Inhalt. */
.vorlesen-widget {
	position: relative;
	z-index: 2;
}

/*
 * Button-Leiste: eigener Block über dem Text, volle Breite.
 * float/clear sorgen dafür, dass sie nicht neben einem Bild oder
 * in einer Ecke landet, sondern sauber oberhalb des Textes sitzt.
 */
.vorlesen-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	width: 100%;
	margin: 0 0 1.25em;
	clear: both;
	float: none;
	position: relative;
	z-index: 10;
}

.vorlesen-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.55em 1.1em;
	font-size: 1rem;
	line-height: 1.2;
	color: #fff;
	background-color: #c0392b; /* Rotton */
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	z-index: 10;
	transition: background-color 0.15s ease-in-out;
}

.vorlesen-btn:hover,
.vorlesen-btn:focus {
	background-color: #a93226; /* dunkleres Rot */
	color: #fff;
}

.vorlesen-btn:focus-visible {
	outline: 2px solid #7b241c;
	outline-offset: 2px;
}

/* Pause etwas neutraler, damit man Abspielen/Pause unterscheidet. */
.vorlesen-pause {
	background-color: #7f8c8d;
}

.vorlesen-pause:hover,
.vorlesen-pause:focus {
	background-color: #616a6b;
}

/* Stopp im kräftigsten Rot. */
.vorlesen-stop {
	background-color: #922b21;
}

.vorlesen-stop:hover,
.vorlesen-stop:focus {
	background-color: #7b241c;
}

.vorlesen-icon {
	font-size: 0.85em;
}

.vorlesen-btn[hidden] {
	display: none;
}

/*
 * Schwebender Button: fest am rechten Bildschirmrand, mittig.
 * Bleibt beim Scrollen immer an derselben Stelle, über allem.
 * Sanfter Fade-in beim Laden; in Ruhe leicht transparent, beim
 * Drüberfahren voll sichtbar.
 */
.vorlesen-float {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10000;
	margin: 0;
	opacity: 0.85;
	transition: opacity 0.3s ease;
	animation: vorlesen-fade-in 0.6s ease;
}

.vorlesen-float:hover,
.vorlesen-float:focus-within {
	opacity: 1;
}

.vorlesen-float .vorlesen-controls {
	width: auto;
	margin: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	border-radius: 8px 0 0 8px;
}

@keyframes vorlesen-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.85;
	}
}

@media (max-width: 600px) {
	.vorlesen-float {
		top: auto;
		bottom: 12px;
		transform: none;
	}
}