/*
 * UB Kompetenzbereiche: Audio-Kasten
 *
 * Eigene Datei, geladen nur zusammen mit dem Kasten. Farben, Radius und
 * Kartentitel kommen aus ubkb.css (Abhängigkeit beim Laden): Der Kasten soll
 * aussehen wie eine Karte der Artikelzeile, nur über die volle Breite.
 */

.ubkb-audio {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Gleiche Luft wie zwischen Kästen und Artikelzeile (.ubkb-kaesten). */
	margin: 0 0 6px;
	padding: 8px 12px;
	background-color: var(--ubkb-karte-hintergrund, #f5f6f7);
	border-radius: var(--ubkb-radius, 4px);
	text-align: left;
}

.ubkb-audio__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ubkb-abstand-klein, 8px);
}

.ubkb-audio__anzahl,
.ubkb-audio__beschreibung,
.ubkb-audio__einzeln,
.ubkb-audio__veraltet,
.ubkb-audio__hinweis,
#et-boc .ubkb p.ubkb-audio__einzeln,
#et-boc .ubkb p.ubkb-audio__beschreibung,
#et-boc .ubkb p.ubkb-audio__veraltet,
#et-boc .ubkb p.ubkb-audio__hinweis {
	margin: 0;
	/* Divi setzt auf jeden Absatz padding-bottom: 1em. */
	padding: 0;
	font-size: 0.8rem;
	line-height: 1.3;
}

.ubkb-audio__titel,
#et-boc .ubkb p.ubkb-audio__titel {
	padding: 0;
}

.ubkb-audio__anzahl {
	flex: 0 0 auto;
	color: var(--ubkb-karte-titel, #3c4348);
	opacity: 0.8;
}

.ubkb-audio__einzeln .ubkb-audio__label {
	font-weight: 700;
}

/*
 * Sprechblase vor dem Label: eine für einen Sprecher, zwei für ein Gespräch.
 * Farbe über currentColor, also weiß im aktiven Knopf.
 */
.ubkb-audio__symbol {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.ubkb-audio__einzeln .ubkb-audio__symbol {
	margin-right: 4px;
	vertical-align: -0.125em;
}

/* Nur für Screenreader: "Gespräch:" bzw. "Kurzfassung:" vor dem Label. */
.ubkb-audio__vorsatz {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ubkb-audio__hinweis[hidden] {
	display: none;
}

/* Knopfzeile: umbrechen statt quer scrollen. */
.ubkb-audio__formate {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Format-Knöpfe: vier Zustände, eigene Regeln.
 *
 * Die Selektoren sind absichtlich schwer. ubkb.css gestaltet für Abo und
 * Frag Uli jeden Knopf im Plugin (`#et-boc .ubkb button:hover` setzt einen
 * dunklen Hintergrund); durch `:hover` wog diese Regel mehr als die des
 * Audio-Kastens, und ein inaktiver Knopf wurde beim Überfahren dunkel mit
 * dunkler Schrift. Mit `.ubkb-audio` und dem Element im Selektor gewinnen
 * die Regeln hier in jedem Zustand, auch gegen Divi.
 *
 * Kontraste Schrift zu Grund (WCAG, gemessen, siehe Befund 60):
 *   inaktiv        #3c4348 auf #ffffff   10,05:1
 *   inaktiv hover  #3c4348 auf #e6e8ea    8,19:1
 *   aktiv (hover)  #ffffff auf #4a5c63    6,99:1
 * Die Dauer mit 85 % Deckkraft liegt jeweils über 5,5:1.
 */
.ubkb.ubkb-audio button.ubkb-audio__format,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid #c9ced2;
	border-radius: var(--ubkb-radius, 4px);
	background-color: #ffffff;
	background-image: none;
	box-shadow: none;
	color: var(--ubkb-karte-titel, #3c4348);
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

/* inaktiv, hover: eine Stufe dunkler als der Kasten, Schrift bleibt dunkel. */
.ubkb.ubkb-audio button.ubkb-audio__format:hover,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format:hover {
	border-color: #aeb4b9;
	background-color: #e6e8ea;
	color: var(--ubkb-karte-titel, #3c4348);
}

/* aktiv, mit und ohne hover: dunkler Grund, weiße Schrift. */
.ubkb.ubkb-audio button.ubkb-audio__format[aria-pressed="true"],
.ubkb.ubkb-audio button.ubkb-audio__format[aria-pressed="true"]:hover,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format[aria-pressed="true"],
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format[aria-pressed="true"]:hover {
	border-color: var(--ubkb-kasten-farbe, #4a5c63);
	background-color: var(--ubkb-kasten-farbe, #4a5c63);
	color: var(--ubkb-kasten-text, #ffffff);
	cursor: default;
}

/*
 * Fokusring nur bei Tastaturbedienung (focus-visible), in jedem Zustand.
 * Die Formular-Regel aus ubkb.css färbt bei focus-visible auch den
 * Hintergrund; das wird hier nicht übernommen, der Zustand bleibt, wie er ist.
 */
.ubkb.ubkb-audio button.ubkb-audio__format:focus,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format:focus {
	outline: none;
}

.ubkb.ubkb-audio button.ubkb-audio__format:focus-visible,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format:focus-visible {
	outline: 2px solid var(--ubkb-kasten-farbe, #4a5c63);
	outline-offset: 2px;
}

.ubkb.ubkb-audio button.ubkb-audio__format:not([aria-pressed="true"]):focus-visible,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format:not([aria-pressed="true"]):focus-visible {
	background-color: #ffffff;
	color: var(--ubkb-karte-titel, #3c4348);
}

.ubkb.ubkb-audio button.ubkb-audio__format:not([aria-pressed="true"]):focus-visible:hover,
#et-boc .ubkb.ubkb-audio button.ubkb-audio__format:not([aria-pressed="true"]):focus-visible:hover {
	background-color: #e6e8ea;
}

/* Symbol und Texte folgen der Schriftfarbe des Knopfs. */
.ubkb-audio__format .ubkb-audio__symbol,
.ubkb-audio__format .ubkb-audio__label,
.ubkb-audio__format .ubkb-audio__dauer {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.ubkb.ubkb-audio button.ubkb-audio__format,
	#et-boc .ubkb.ubkb-audio button.ubkb-audio__format {
		transition: none;
	}
}

.ubkb-audio__format .ubkb-audio__label {
	font-weight: 700;
}

.ubkb-audio__dauer {
	white-space: nowrap;
	opacity: 0.85;
}

.ubkb-audio__beschreibung[hidden] {
	display: none;
}

.ubkb-audio__veraltet {
	font-style: italic;
}

.ubkb-audio__player {
	display: block;
	/* Divi gibt audio einen Außenabstand; im Kasten regelt gap die Luft. */
	margin: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 40px;
}

.ubkb-audio__hinweis {
	font-size: 0.75rem;
	opacity: 0.85;
}

.ubkb a.ubkb-audio__mehr,
#et-boc .ubkb a.ubkb-audio__mehr {
	color: inherit;
	text-decoration: underline;
	white-space: nowrap;
}

/*
 * Handy: so knapp wie die Karten der Artikelzeile darunter (ubkb.css,
 * gleiche Umbruchbreite). Deren Regel hängt jedem Kartentitel einen
 * Doppelpunkt an, weil dort Titel und Text eine Zeile bilden. Hier steht der
 * Titel allein, der Doppelpunkt entfällt.
 */
@media (max-width: 767px) {
	.ubkb-audio {
		margin-bottom: 3px;
		padding: 4px 9px 6px;
	}

	.ubkb-audio .ubkb-audio__titel::after {
		content: "";
	}
}

/* Schmal: Knöpfe teilen sich die Breite und bleiben gut zu treffen. */
@media (max-width: 480px) {
	.ubkb.ubkb-audio button.ubkb-audio__format,
	#et-boc .ubkb.ubkb-audio button.ubkb-audio__format {
		flex: 1 1 calc(50% - 3px);
		/*
		 * Symbol und Label in der ersten Zeile, die Dauer darunter.
		 * Nebeneinander passt "Kurzfassung 3 min" bei 360 px nicht in die
		 * halbe Breite und liefe über den Rand.
		 */
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 6px;
		row-gap: 0;
		align-items: start;
		/* Zeilen nicht auf die Knopfhöhe strecken, die Dauer gehört direkt unters Label. */
		align-content: start;
		min-width: 0;
		min-height: 44px;
	}

	.ubkb-audio__format .ubkb-audio__symbol {
		margin-top: 0.15em;
	}

	.ubkb-audio__format .ubkb-audio__dauer {
		grid-column: 2;
	}

	.ubkb-audio__format .ubkb-audio__label {
		overflow-wrap: anywhere;
	}
}

/* Auf Papier spielt nichts. */
@media print {
	.ubkb-audio {
		display: none;
	}
}