/* Vorleseleiste — ergänzt components.css Abschnitt 8 des Child-Themes.
   Farben kommen aus 01_tokens.css; die Rückfallwerte halten das Widget auch
   dann stimmig, wenn die Tokens einmal nicht geladen sind. */

/* Zwei Zustände:
   Ruhe       — alle Flaggen nebeneinander.
   Wiedergabe — nur die laufende Flagge, daneben Balken und Beenden-Knopf.
   Dadurch bleibt die Leiste in beiden Fällen gleich schmal und ragt mobil
   nicht in die Überschrift. */
.gsb-vorlesen {
	flex-wrap: nowrap;
	max-width: 100%;
}

/* Während der Wiedergabe wandert die Leiste am oberen Rand mit, sobald ihre
   natürliche Position aus dem Bild gescrollt ist. Nur dann — im Ruhezustand
   bleibt sie, wo sie hingehört. */
.gsb-vorlesen--fixiert {
	position: fixed;
	top: 10px;
	/* right setzt das Skript beim Fixieren — die Leiste behält ihren Abstand
	   zum rechten Rand und bleibt bündig mit der Inhaltsbreite. */
	z-index: 99000; /* über Inhalt und Divi-Sektionen, unter dem Skip-Link (100000) */
	box-shadow: var(--shadow-md, 0 6px 20px rgba(32, 30, 27, .18));
}

/* Messpunkt: ein Pixel hoch, ändert sich nie, beeinflusst das Layout nicht. */
.gsb-vorlesen__wachposten {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
}

/* Der Platzhalter hält den Platz im Fluss, damit beim Fixieren nichts springt. */
.gsb-vorlesen__platzhalter {
	height: 0;
}

/* [hidden] muss gegen das display der Knöpfe gewinnen. */
.gsb-vorlesen [hidden] {
	display: none !important;
}

/* Knopf: exakt quadratisch, damit der Rahmen rund bleibt und nicht oval wird.
   Der Rahmen des Child-Themes entfällt hier — die Kontur steckt bereits im
   Flaggen-SVG (Kreis in currentColor, --neutral-500 = 3,57:1 gegen Weiß,
   erfüllt WCAG 1.4.11). */
.gsb-vorlesen .gsb-vorlesen__knopf {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-width: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--neutral-500, #8A8680);
	overflow: visible;
	transition: box-shadow var(--duration-fast, .12s) var(--ease-standard, ease);
}

.gsb-vorlesen__flag,
.gsb-vorlesen__flag svg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* Läuft gerade: runder Ring in Orange — dieselbe Sprache wie die Hervorhebung
   im Text. Bewusst weder Blau (Tastaturfokus) noch Gelb (Beitragsbilder). */
.gsb-vorlesen .gsb-vorlesen__knopf[aria-pressed="true"] {
	background: transparent;
	color: var(--gsb-vorlesen-akzent, #C4761A);
	box-shadow: 0 0 0 3px var(--gsb-vorlesen-akzent, #C4761A);
}

.gsb-vorlesen .gsb-vorlesen__knopf:focus-visible {
	outline: 3px solid var(--color-focus-ring, #2A6FDB);
	outline-offset: 3px;
}

.gsb-vorlesen__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(32, 30, 27, .45);
	color: #fff;
	opacity: 0;
}

.gsb-vorlesen .gsb-vorlesen__knopf { position: relative; }

.gsb-vorlesen .gsb-vorlesen__knopf:hover .gsb-vorlesen__icon,
.gsb-vorlesen .gsb-vorlesen__knopf:focus-visible .gsb-vorlesen__icon,
.gsb-vorlesen .gsb-vorlesen__knopf[aria-pressed="true"] .gsb-vorlesen__icon {
	opacity: 1;
}

/* Wiedergabe: Dreieck. */
.gsb-vorlesen__icon::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 2px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent currentColor;
}

/* Läuft gerade: zwei Balken. */
.gsb-vorlesen .gsb-vorlesen__knopf[aria-pressed="true"] .gsb-vorlesen__icon::before {
	width: 3px;
	height: 11px;
	margin: 0 6px 0 0;
	border: 0;
	background: currentColor;
	box-shadow: 6px 0 0 currentColor;
}

/* Während der Wiedergabe nimmt der Balken den Platz der übrigen Flaggen ein.
   Bewusst kurz gehalten: er zeigt eine Tendenz, keine Sekundenangabe. */
.gsb-vorlesen__progress {
	display: flex;
	align-items: center;
	/* Klickzone zum Spulen: deutlich höher als der sichtbare Strich. */
	padding-block: 10px;
	margin-block: -10px;
}

.gsb-vorlesen__progress progress {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 6px;
	border: 0;
	border-radius: var(--radius-pill, 999px);
	background: var(--neutral-200, #E5E2DD);
	overflow: hidden;
	accent-color: var(--brand-blue-dark, #3E71A8);
}

/* Fortschritt im GSB-Blau — Chrome und Firefox brauchen eigene Regeln. */
.gsb-vorlesen__progress progress::-webkit-progress-bar {
	background: var(--neutral-200, #E5E2DD);
	border-radius: var(--radius-pill, 999px);
}

.gsb-vorlesen__progress progress::-webkit-progress-value {
	background: var(--brand-blue-dark, #3E71A8);
	border-radius: var(--radius-pill, 999px);
}

.gsb-vorlesen__progress progress::-moz-progress-bar {
	background: var(--brand-blue-dark, #3E71A8);
	border-radius: var(--radius-pill, 999px);
}

/* Beenden: zurück zur Sprachauswahl. Gleiche Größe wie die Flaggen, damit die
   Leiste beim Umschalten nicht springt. */
.gsb-vorlesen .gsb-vorlesen__stopp {
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-width: 34px;
	padding: 0;
	border: 1.5px solid var(--neutral-500, #8A8680);
	border-radius: 50%;
	background: var(--white, #fff);
	color: var(--color-text, #201E1B);
	cursor: pointer;
}

.gsb-vorlesen .gsb-vorlesen__stopp:hover {
	border-color: var(--color-text, #201E1B);
}

.gsb-vorlesen .gsb-vorlesen__stopp:focus-visible {
	outline: 3px solid var(--color-focus-ring, #2A6FDB);
	outline-offset: 3px;
}

/* Das Kreuz aus zwei gedrehten Strichen — kein Zeichensatz nötig. */
.gsb-vorlesen .gsb-vorlesen__stopp span::before,
.gsb-vorlesen .gsb-vorlesen__stopp span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 2px;
	margin: -1px 0 0 -6.5px;
	background: currentColor;
	border-radius: 1px;
}

.gsb-vorlesen .gsb-vorlesen__stopp span::before { transform: rotate(45deg); }
.gsb-vorlesen .gsb-vorlesen__stopp span::after { transform: rotate(-45deg); }

/* Live-Region: für Bildschirmleser, optisch nicht sichtbar. */
.gsb-vorlesen__ansage {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Laufender Absatz.

   Orange statt Blau (Tastaturfokus) und statt Gelb (Rahmen der Beitragsbilder)
   — so bleibt jede der drei Auszeichnungen eindeutig lesbar.

   #C4761A liegt bei 3,53:1 gegen Weiß und erfüllt damit WCAG 1.4.11.
   --brand-orange-dark (#D6821E) käme nur auf 2,97:1 und reicht für einen
   3px-Indikator nicht; deshalb hier der etwas dunklere Ton.

   Nicht nur Farbe: zusätzlich der Balken links und aria-current am Element.

   NEU GEFASST 09.09.2026 — der Text sprang beim Markieren.

   Ursache, auf der Seite gemessen: Divi gibt Absätzen padding-bottom:1em
   (live 17px). Das alte `padding-block:.15rem` ist eine Kurzform und hat
   diesen Wert mit überschrieben — beim Markieren verschwanden 17px und
   der gesamte Text darunter rutschte hoch, beim Wechsel wieder zurück.

   Deshalb setzt die Markierung jetzt KEINE Abstände mehr in der
   Blockrichtung. Sie wird komplett gemalt:

   - background-origin:content-box — die Fläche bezieht sich auf den
     Textbereich, nicht auf Divis Absatzabstand. Sonst läge die
     Markierung 17px zu tief.
   - background-clip:padding-box — gemalt werden darf trotzdem bis an
     die Polsterkante, damit der Balken links Platz hat.
   - Der Verlauf ist Balken und Fläche in einem: die ersten 3px Akzent,
     der Rest Tint.

   Waagerecht bleibt es beim bewährten Paar Polster/negativer Rand: Der
   Kasten wächst um genau den Betrag nach links, um den der Text nach
   rechts rückt. Zeilenumbrüche ändern sich dadurch nicht. */
.gsb-vorlesen-aktiv:not([data-gsb-vorlesen-text]) {
	padding-inline-start: .75rem;
	margin-inline-start: -.75rem;
	background-image: linear-gradient(
		to right,
		var(--gsb-vorlesen-akzent, #C4761A) 0 3px,
		var(--tint-orange, #FCEDD9) 3px
	);
	background-origin: content-box;
	background-clip: padding-box;
	background-repeat: no-repeat;
	background-position: -.75rem 0;
	background-size: calc(100% + .75rem) 100%;
}

/* Ganze Kärtchen (data-gsb-vorlesen-text) werden als Block markiert.
   Eine Textfläche wäre dort falsch: Die Karte hat eigenen Hintergrund,
   Rand und Innenabstand. Der Ring liegt außerhalb des Kastens und ändert
   deshalb — wie oben — nichts am Layout. */
[data-gsb-vorlesen-text].gsb-vorlesen-aktiv {
	box-shadow: 0 0 0 3px var(--gsb-vorlesen-akzent, #C4761A);
	border-radius: var(--radius-md, 8px);
}

@media (prefers-reduced-motion: reduce) {
	.gsb-vorlesen .gsb-vorlesen__knopf {
		transition: none;
	}
}