/*
 * Cybele Katalog — Frontend
 *
 * Bewusst knapp gehalten: Farben, Schriften und Abstände kommen aus den
 * Design-Tokens des Themes (theme.json). Hier steht nur, was Rasteraufbau und
 * Tabellenformen betrifft — alles Übrige erbt der Katalog vom Theme.
 */

/* ------------------------------------------------------------------
 * Kopfbereich: Suchzeile
 *
 * Zuvor stand hier nur eine Schreiblinie — zwei Testpersonen haben das Feld
 * nicht als Eingabefeld erkannt. Jetzt trägt es alles, woran man eines
 * erkennt: umlaufender Rahmen, heller Grund gegen den Papierton, Lupe davor,
 * kräftigere Platzhalterschrift und ein sichtbarer Fokusring.
 *
 * Die Form ist die der Filterpillen darunter (gleicher Rahmen, gleiche
 * Rundung), nur eine Nummer größer — Katalog, Künstlerregister und
 * Konzertkalender teilen sich diesen Block.
 * ---------------------------------------------------------------- */
.cybele-katalog__suche {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	border: 1px solid var(--wp--custom--hairline-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.cybele-katalog__suche:hover {
	border-color: var(--wp--preset--color--contrast);
}

/*
 * Fokus am Rahmen, nicht am Feld: Der Ring soll das ganze Eingabefeld
 * umfassen. Die Farbe ist der vorhandene Haarlinien-Ton, nur als 3 px Ring.
 */
.cybele-katalog__suche:focus-within {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 3px var(--wp--custom--hairline);
}

.cybele-katalog__lupe {
	flex: none;
	width: 18px;
	height: 18px;
	fill: var(--wp--preset--color--muted);
}

.cybele-katalog__suche:focus-within .cybele-katalog__lupe {
	fill: var(--wp--preset--color--contrast);
}

.cybele-katalog__suche input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--serif);
	/* Vorhandene Stufe, nichts Neues: 22 px auf dem Telefon, 26 px am Schreibtisch. */
	font-size: var(--wp--preset--font-size--x-large);
}

/* Kursiv und der hellste Grauton lasen sich wie Fließtext — jetzt aufrecht
 * und eine Stufe dunkler. */
.cybele-katalog__suche input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Der Ring am Rahmen zeigt den Fokus bereits an. */
.cybele-katalog__suche input:focus,
.cybele-katalog__suche input:focus-visible {
	outline: none;
}

.cybele-katalog__anzahl {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Kopfbereich: Filter- und Ansichtsleiste
 * ---------------------------------------------------------------- */
/*
 * Der Reihenabstand ist groesser als der Spaltenabstand: Die Auswahlfelder
 * fuellen die erste Reihe, „Gitter / Liste“ rutscht darunter. Mit denselben
 * 10 px wie zwischen den Pillen sah das aus, als sei die Umschaltung dort
 * hineingerutscht — der groessere Wert macht die zweite Reihe zur Absicht.
 */
.cybele-katalog__leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm) 10px;
	margin-top: var(--wp--preset--spacing--md);
}

.cybele-katalog__marke {
	color: var(--wp--preset--color--muted);
}

/*
 * Auswahlfeld als Pille. Das Feld selbst bleibt ein <select> — Tastatur,
 * Screenreader und die Auswahl auf dem Telefon funktionieren damit ohne
 * Nachbau. Sichtbar ist nur der Rahmen darum.
 */
.cybele-katalog__pille {
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--custom--hairline-strong);
	border-radius: 999px;
	transition: border-color 0.16s ease;
}

.cybele-katalog__pille:hover,
.cybele-katalog__pille:focus-within {
	border-color: var(--wp--preset--color--contrast);
}

.cybele-katalog__pille::after {
	content: "";
	position: absolute;
	right: 14px;
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.cybele-katalog__pille select {
	appearance: none;
	border: 0;
	background: none;
	margin: 0;
	padding: 8px 34px 8px 16px;
	/*
	 * Die Breite richtet sich nach dem längsten Eintrag. Ohne Grenze zöge ein
	 * einzelner langer Begriff die Pille so weit auf, dass die Leiste umbricht;
	 * ausgeschrieben steht er weiter in der Auswahlliste.
	 *
	 * Die Grenze muss aber mindestens die Beschriftung im Ruhezustand fassen,
	 * sonst steht dort „ALLE BESETZUNG…“. Gemessen brauchen die längsten:
	 * „Vergangene Termine“ 193 px, „Kommende Termine“ 176 px, „Alle
	 * Besetzungen“ 169 px — macht mit den 50 px Innenabstand 243 px.
	 *
	 * 270 px, damit auch „3D-Binaural-Stereo“ ausgeschrieben stehenbleibt: Das
	 * Format ist die Eigenart des Hauses, gekürzt wäre es die falsche Stelle zum
	 * Sparen. An der Zeilenaufteilung der Leiste ändert der Wert nichts.
	 */
	max-width: 270px;
	text-overflow: ellipsis;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.cybele-katalog__pille select:focus,
.cybele-katalog__pille select:focus-visible {
	outline: none;
}

/* Zurücksetzen erscheint erst, wenn etwas ausgewählt ist. */
.cybele-katalog__reset {
	border: 0;
	background: none;
	padding: 8px 6px;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	transition: color 0.16s ease;
}

.cybele-katalog__reset:hover,
.cybele-katalog__reset:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.cybele-katalog__ansicht {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.cybele-katalog__schalter {
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	padding: 7px 16px;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	transition: color 0.16s ease, background 0.16s ease;
}

.cybele-katalog__schalter:hover {
	color: var(--wp--preset--color--contrast);
}

.cybele-katalog__schalter[aria-pressed="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------
 * Albenraster
 * ---------------------------------------------------------------- */
.cybele-katalog__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--wp--preset--spacing--lg) 24px;
	margin-top: var(--wp--preset--spacing--lg);
}

/*
 * Karte als Spalte über die volle Zeilenhöhe: Die Angabenzeile wird nach unten
 * geschoben und steht damit in allen Karten einer Zeile auf gleicher Höhe —
 * auch wenn die Titel unterschiedlich lang umbrechen.
 */
.cybele-katalog__karte {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/*
 * Coverfeld — dieselben Regeln für das Albenraster des Katalogs und das
 * Albenraster der Künstlerseite. Beide Ansichten zeigen dieselbe Sache,
 * deshalb steht sie hier auch nur einmal.
 *
 * Das Bild wird absolut in das quadratische Feld gelegt. Mit height:100% im
 * Textfluss würde ein hochformatiges Cover das Seitenverhältnis aufdrücken —
 * dann wären die Karten unterschiedlich hoch.
 *
 * `contain` statt `cover`: Die Cover haben Quadrat-, Hoch- und Querformat. Ein
 * Beschnitt würde Teile der Gestaltung abschneiden; hier ist immer das ganze
 * Motiv zu sehen.
 */
.cybele-katalog__cover,
.cybele-albenliste .cybele-cover {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--custom--hairline);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color 0.4s ease;
}

.cybele-katalog__cover img,
.cybele-albenliste .cybele-cover a,
.cybele-albenliste .cybele-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.cybele-katalog__cover img,
.cybele-albenliste .cybele-cover img {
	object-fit: contain;
	border-radius: 0;
	transition: transform 0.4s ease;
}

/*
 * Beim Überfahren rückt das Cover eine Spur zusammen und der Rahmen wird
 * kräftiger. Das ist dieselbe Bewegung, die das Theme für Albumkarten schon
 * kennt (.album-cover) — bewusst nach innen statt heran, damit vom Motiv
 * nichts angeschnitten wird.
 *
 * Im Katalog hängt der Zustand an der ganzen Karte, im Künstlerraster am Feld
 * selbst — dort ist der Verweis im Cover, nicht darum herum.
 */
.cybele-katalog__karte:hover .cybele-katalog__cover,
.cybele-katalog__karte:focus-visible .cybele-katalog__cover,
.cybele-albenliste .cybele-cover:hover,
.cybele-albenliste .cybele-cover:focus-within {
	border-color: var(--wp--custom--hairline-strong);
}

.cybele-katalog__karte:hover .cybele-katalog__cover img,
.cybele-katalog__karte:focus-visible .cybele-katalog__cover img,
.cybele-albenliste .cybele-cover:hover img,
.cybele-albenliste .cybele-cover:focus-within img {
	transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
	.cybele-katalog__cover img,
	.cybele-albenliste .cybele-cover img {
		transition: none;
	}
}

.cybele-katalog__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-top: 14px;
}

/*
 * Serifentitel in Listen — Katalogkarte, Kuenstlerregister, Trackliste.
 *
 * Eine Regel statt dreier: Der globale Wert 1.65 aus theme.json ist fuer
 * mehrzeilige Titel zu locker (gemessen: 106 von 197 Karten und 48 von 48
 * Tracktiteln laufen ueber mehr als eine Zeile).
 *
 * Der Wert selbst steht in theme.json unter settings.custom.lineHeightTight
 * und gilt fuer alle engeren Zeilenfuehrungen der Website — hier wie im Theme.
 */
.cybele-katalog__titel,
.cybele-kuenstler__name,
.cybele-tracks__titel {
	line-height: var(--wp--custom--line-height-tight);
}

.cybele-katalog__titel {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--contrast);
}

/*
 * Im Listing ohne Pfeil — der Verweis ist die ganze Karte samt Cover, ein
 * zusätzliches Zeichen vor 197 Titeln wäre zu viel. Auf der Detailseite steht
 * er bei den Mitwirkenden weiterhin (siehe .cybele-subpages im Theme).
 */
.cybele-katalog__karte:hover .cybele-katalog__titel,
.cybele-katalog__karte:focus-visible .cybele-katalog__titel {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--accent);
}

/*
 * Die Nebenzeilen bleiben kurz. Bei Sammelaufnahmen stehen hier bis zu fünf
 * Namen — frei umgebrochen würde die Karte den Titel erschlagen.
 */
.cybele-katalog__komponist,
.cybele-katalog__artist {
	display: block;
	margin-top: 3px;
	font-size: var(--wp--preset--font-size--xs);
	/*
	 * Ein Ton für beide. Der Komponist stand zuvor in contrast-2 und damit fast
	 * so dunkel wie der Titel darüber — mit dem helleren Interpreten daneben
	 * ergab das drei Stufen unter einem Cover. Jetzt sind es zwei: Titel
	 * schwarz, beide Namenszeilen gedeckt, Nummer und Jahr wie gehabt heller.
	 */
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Beide Namenszeilen dürfen zwei Zeilen hoch werden.
 *
 * Sie tragen jetzt mehr als die blossen Namen — die Mitwirkenden hinter jedem
 * Namen ihre Aufgabe, die Komponisten vorweg ihre Bezeichnung —, und damit
 * werden sie laenger als ihr Feld. Einzeilig fiele bei „Neue Philharmonie
 * Westfalen (Orchester) · Bernhard Forck (Dirigent / Violinist)“ der zweite
 * Name weg, und auf dem Telefon bliebe von „Komponist:in: Franz Schubert“ kaum
 * mehr als die Bezeichnung stehen. Zwei Zeilen fangen das ab, danach kürzt der
 * Browser wie zuvor — die Karte wächst also höchstens um zwei Zeilen.
 *
 * Gemessen, gekürzte Karten von 197 (Mitwirkende / Komponisten):
 *   1440 px  einzeilig 79 / 52, zweizeilig 37 / 29
 *    390 px  einzeilig 153 / 167, zweizeilig 81 / 53
 * Vor den Bezeichnungen waren es einzeilig 48 / 43 (1440 px). Zweizeilig
 * steht also selbst mit dem Zusatz weniger gekürzt da als vorher.
 */
.cybele-katalog__komponist,
.cybele-katalog__artist {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	white-space: normal;
}

/*
 * Beide Zeilen stehen immer im Markup, auch ohne Wert — in der Listenansicht
 * hält das die Spalten in der Flucht. Im Raster sind leere Zeilen unerwünscht.
 */
.cybele-katalog__komponist:empty,
.cybele-katalog__artist:empty {
	display: none;
}

.cybele-katalog__fuss {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 10px;
	color: var(--wp--preset--color--muted-2);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Albumseite: Kopfleiste mit Katalognummer und Blätterwegen
 * ---------------------------------------------------------------- */
.cybele-albumnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	color: var(--wp--preset--color--muted);
}

.cybele-albumnav__blaettern {
	display: inline-flex;
	gap: 24px;
}

.cybele-albumnav__weg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	transition: color 0.16s ease;
}

.cybele-albumnav__weg:hover,
.cybele-albumnav__weg:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.cybele-albumhinweis {
	margin: var(--wp--preset--spacing--md) 0 0;
}

/* ------------------------------------------------------------------
 * Albumseite: Eckdaten unter dem Cover
 * ---------------------------------------------------------------- */
.cybele-albumfacts__zeile {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--wp--custom--hairline);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

.cybele-albumfacts__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------
 * Albumseite: Interpret und Komponist
 *
 * Beide stehen als Paar aus Beschriftung und Namen. Der Abstand sitzt an der
 * Beschriftung, nicht am Namen — so bleibt jedes Paar zusammen und zwischen
 * den Paaren entsteht Luft. Den Abstand nach unten bringt die Kicker-Regel
 * des Themes bereits mit.
 * ---------------------------------------------------------------- */
.single-cybele_album .cybele-albumrolle {
	margin-top: var(--wp--preset--spacing--md);
}

/*
 * Beide Namensbloecke stehen enger als der Fliesstext: 1.25 aus theme.json
 * statt der globalen 1.65. Bei zwei Zeilen je Person lesen sich Name und
 * Aufgabe sonst nicht als Paar — und die Komponistenzeile daneben wirkte
 * lockerer als die Mitwirkenden darueber.
 *
 * Die eigene Klasse statt `.single-cybele_album .cybele-lead`: `.cybele-lead`
 * tragen auch die beiden Absaetze im Fusszeilenbereich, die auf jeder Seite
 * stehen — die sollen von hier nichts abbekommen.
 */
.cybele-mitwirkende,
.cybele-albumkomponist {
	margin-top: 0;
	line-height: var(--wp--custom--line-height-tight);
}

/*
 * Mitwirkende der Kopfzeile: nebeneinander statt untereinander.
 *
 * Jede Person ist ein Kaestchen aus Name und Aufgabe darunter; gesetzt werden
 * sie in eine Reihe und brechen erst um, wenn die Spalte nicht mehr reicht.
 * Untereinander verbrauchte allein die Kopfzeile eines Albums mit elf
 * Mitwirkenden gut 700 px.
 *
 * Die Abstaende kommen aus der Skala: zwischen den Personen der mittlere Wert,
 * zwischen umgebrochenen Reihen der kleine. Den Abstand zwischen Name und
 * Aufgabe (2 px) bringt die Rollenklasse selbst mit.
 */
.cybele-mitwirkende {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--sm);
}

/* ------------------------------------------------------------------
 * Albumseite: Reiter
 *
 * Ohne JavaScript ist die Leiste ausgeblendet und alle Abschnitte stehen
 * untereinander — deshalb hier die ausdrückliche hidden-Regel: display:flex
 * aus der Autorenschicht würde das hidden-Attribut sonst aushebeln.
 * ---------------------------------------------------------------- */
.cybele-reiter__leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	border-bottom: 1px solid var(--wp--custom--hairline);
}

.cybele-reiter__leiste[hidden],
.cybele-reiter__titel[hidden],
.cybele-reiter__feld[hidden] {
	display: none;
}

.cybele-reiter__knopf {
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	padding: 0 0 12px;
	margin-bottom: -1px;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	transition: color 0.16s ease, border-color 0.16s ease;
}

.cybele-reiter__knopf:hover,
.cybele-reiter__knopf:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.cybele-reiter__knopf[aria-selected="true"] {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--accent);
}

.cybele-reiter__feld {
	padding-top: var(--wp--preset--spacing--md);
}

/* Ohne Skript trennt eine Linie die Abschnitte voneinander. */
.cybele-reiter__titel {
	margin: 0 0 12px;
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--custom--hairline);
	color: var(--wp--preset--color--muted);
}

.cybele-reiter__inhalt > *:first-child {
	margin-top: 0;
}

.cybele-reiter__inhalt > *:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * Listenansicht — dieselben Karten, nur zeilenweise
 * ---------------------------------------------------------------- */
.cybele-katalog__liste[data-ansicht="liste"] {
	display: block;
	border-top: 1px solid var(--wp--custom--hairline);
}

/*
 * Sechs Spalten: Cover, Titel, Komponist, Mitwirkende, Katalognummer, Jahr.
 * Textblock und Angabenzeile werden mit `display: contents` aufgelöst, damit
 * ihre Kinder selbst zu Rasterzellen werden.
 *
 * Jede Zeile ist ein eigenes Raster — die Spalten fluchten deshalb nur, wenn
 * keine Breite vom Inhalt abhängt. Mit `auto` für die Angaben verschob sich das
 * Raster je nach Länge der Katalognummer von Zeile zu Zeile. Die drei
 * Textspalten teilen sich den Rest zu gleichen Teilen.
 */
.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__karte {
	display: grid;
	grid-template-columns: 56px repeat(3, minmax(0, 1fr)) 200px 56px;
	gap: 20px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--custom--hairline);
}

.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__cover {
	border-radius: 2px;
}

.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__text {
	display: contents;
}

/* In der Spalte wieder einzeilig — sonst verlieren die Zeilen ihre Flucht. */
.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__komponist,
.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__artist,
.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__komponist:empty,
.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__artist:empty {
	display: block;
	margin-top: 0;
	white-space: nowrap;
}

.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__fuss {
	display: contents;
}

.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__fuss > span {
	text-align: right;
}

.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__karte:hover .cybele-katalog__cover {
	border-color: var(--wp--custom--hairline-strong);
}

/*
 * Gefilterte Karten trägt das Skript mit dem hidden-Attribut aus. Dessen
 * display:none stammt aus dem Browser-Stylesheet und unterliegt jeder
 * Autorenregel — die display-Angaben oben und in der Listenansicht würden es
 * aushebeln. Deshalb hier ausdrücklich, mit passender Spezifität.
 */
.cybele-katalog__karte[hidden],
.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__karte[hidden] {
	display: none;
}

.cybele-katalog__leer {
	margin-top: 32px;
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------
 * Coverbild auf den Detailseiten
 *
 * Dasselbe quadratische Feld wie in der Übersicht: Die Cover liegen in
 * Quadrat-, Hoch- und Querformat vor, `contain` zeigt immer das ganze Motiv
 * und die Karten bleiben gleich hoch.
 * ---------------------------------------------------------------- */
.cybele-cover {
	margin: 0;

	/*
	 * Zarter Rahmen wie bei den Katalogkarten. Viele Cover haben einen weissen
	 * Rand, der auf dem cremefarbenen Grund praktisch verschwindet — ohne
	 * Rahmen ist nicht zu erkennen, wo das Cover aufhoert.
	 *
	 * Der Rahmen sitzt am <figure>, nicht am Bild: Das Bild rechnet mit
	 * content-box, dort wuerde ein Rahmen die Spalte um 2 px sprengen. Das
	 * <figure> ist ein Block mit automatischer Breite und legt den Rahmen
	 * nach innen.
	 */
	border: 1px solid var(--wp--custom--hairline);
	border-radius: 2px;
	overflow: hidden;
}

.cybele-cover img {
	display: block;
	width: 100%;
	height: auto;
	/* Die Rundung uebernimmt der Rahmen samt overflow. */
	border-radius: 0;
}

/*
 * Künstlerseite ohne Porträt: Die Bildspalte bleibt sonst als 32 % breite
 * Lücke stehen. Derzeit hat kein Profil ein Porträt — sobald eines gepflegt
 * wird, erscheint die Spalte von selbst wieder.
 */
.single-cybele_artist .wp-block-column:not(:has(*)) {
	display: none;
}

/* ------------------------------------------------------------------
 * Künstlerregister
 *
 * Kopfbereich und Bedienelemente kommen aus dem Katalog — hier steht nur, was
 * das Register selbst betrifft.
 * ---------------------------------------------------------------- */
.cybele-kuenstler__register {
	margin-top: var(--wp--preset--spacing--lg);
}

.cybele-kuenstler__gruppe + .cybele-kuenstler__gruppe {
	margin-top: var(--wp--preset--spacing--lg);
}

.cybele-kuenstler__buchstabe {
	font-size: 24px;
	margin-bottom: 8px;
	color: var(--wp--preset--color--brown) !important;
}

/* Zwei Spalten Einträge — 155 Profile untereinander wären eine sehr lange Seite. */
.cybele-kuenstler__eintraege {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	column-gap: var(--wp--preset--spacing--xl);
}

/*
 * Name und Rolle links, Anzahl der Aufnahmen rechts. Die Zeile ist ein Raster,
 * deshalb braucht das hidden-Attribut beim Filtern eine eigene Regel.
 */
.cybele-kuenstler__eintrag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 16px;
	align-items: baseline;
	padding: 11px 0;
	border-top: 1px solid var(--wp--custom--hairline);
	text-decoration: none;
	color: inherit;
}

.cybele-kuenstler__eintrag[hidden],
.cybele-kuenstler__gruppe[hidden] {
	display: none;
}

.cybele-kuenstler__name {
	grid-column: 1;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--contrast);
}

.cybele-kuenstler__eintrag:hover .cybele-kuenstler__name,
.cybele-kuenstler__eintrag:focus-visible .cybele-kuenstler__name {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--accent);
}

.cybele-kuenstler__eintrag .cybele-kuenstler__rolle {
	grid-column: 1;
	margin-top: 0;
}

.cybele-kuenstler__alben {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	white-space: nowrap;
	color: var(--wp--preset--color--muted-2);
	font-variant-numeric: tabular-nums;
}

/* Diese Zeile steht auch auf der Albumseite unter den Mitwirkenden. */
.cybele-kuenstler__rolle {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-top: 2px;
}

.cybele-kuenstler__rolle:empty,
.cybele-kuenstler__alben:empty {
	display: none;
}

/* ------------------------------------------------------------------
 * Trackliste
 * ---------------------------------------------------------------- */
.cybele-tracks__disc {
	font-size: 20px;
	margin: var(--wp--preset--spacing--md) 0 8px;
}

.cybele-tracks__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

/* Kopfzeile und Titelzeilen teilen sich dasselbe Raster. */
.cybele-tracks__kopf,
.cybele-tracks__zeile {
	display: grid;
	grid-template-columns: 2.6em 1fr auto;
	gap: 12px;
	align-items: baseline;
	padding: 9px 0;
	border-top: 1px solid var(--wp--custom--hairline);
}

.cybele-tracks__kopf {
	margin: 0;
	border-top: 0;
	border-bottom: 1px solid var(--wp--custom--hairline-strong);
	color: var(--wp--preset--color--muted);
}

.cybele-tracks__kopf > *:last-child,
.cybele-tracks__zeile > *:last-child {
	text-align: right;
}

/* Anzahl und Gesamtspielzeit — steht neben der Überschrift. */
.cybele-tracks__summe {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.cybele-tracks__zeile::before {
	content: none;
}

.cybele-tracks__nr {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted-2);
	font-variant-numeric: tabular-nums;
}

.cybele-tracks__titel {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--contrast);
}

/* Die Kopfzeile zieht die Linie schon — die erste Titelzeile lässt ihre weg. */
.cybele-tracks__kopf + .cybele-tracks__liste .cybele-tracks__zeile:first-child {
	border-top: 0;
}

/*
 * Unter dem Titel steht, wer das Stueck geschrieben und wer es gespielt hat.
 * Welche Zeile welche ist, sagt ihre Beschriftung — eine Regel genuegt fuer
 * beide.
 */
.cybele-tracks__komponist,
.cybele-tracks__interpret {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-top: 2px;
}

.cybele-tracks__dauer {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
 * Katalogangaben
 * ---------------------------------------------------------------- */
/*
 * Beschriftung über dem Wert, zwei Paare nebeneinander. Jedes Paar steht in
 * einem div — im dl-Element ist das zulässig und hält dt und dd zusammen,
 * wenn beide zu Rasterzellen werden.
 */
.cybele-albumdaten {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md) 48px;
}

.cybele-albumdaten dt {
	margin-bottom: 6px;
	color: var(--wp--preset--color--muted);
}

.cybele-albumdaten dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * Anbieterschaltflächen — Abstand, alles Weitere kommt aus dem Theme
 * ---------------------------------------------------------------- */
/*
 * Anbieterschaltflächen als Kreise: Das Markenzeichen trägt die Erkennung, der
 * Name steht als verborgener Text daneben und erscheint beim Überfahren als
 * Kurzhinweis. Rahmen und Farben stammen aus denselben Token wie die
 * Umriss-Schaltflächen des Themes.
 */
/*
 * display:flex ausdruecklich: Die Reihe traegt zwar die Klasse
 * `wp-block-buttons`, aber nicht die Layoutklassen, die WordPress beim Rendern
 * eines echten Blocks dazusetzt — ohne sie bliebe der Behaelter ein Block und
 * `gap` ohne Wirkung. Die Kreise standen dann mit den 4 px des Zeilenumbruchs
 * beieinander statt mit den hier gemeinten 10.
 */
.cybele-dsp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/*
 * Teilen-Schaltflaechen: dieselben Kreise wie bei den Anbietern — die
 * Selektoren daneben fuehren beide Klassen, damit es dafuer keine zweite
 * Beschreibung braucht. Eigen ist nur der Abstand nach oben.
 */
.cybele-teilen {
	/*
	 * display:flex ausdruecklich: Die Reihe traegt zwar die Klasse
	 * `wp-block-buttons`, aber nicht die Layoutklassen, die WordPress sonst
	 * beim Rendern eines echten Blocks dazusetzt — ohne sie bliebe der Behaelter
	 * ein Block und `gap` ohne Wirkung.
	 *
	 * Weiter auseinander als die Anbieterreihe: Dort stehen bis zu acht Kreise
	 * als geschlossene Gruppe, hier sind es fuenf einzelne Entscheidungen.
	 * Der Wert ist der kleine aus der Abstandsskala.
	 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--md);
}

/*
 * Mit `.is-style-outline` im Selektor: Das Theme setzt für diese Variante
 * Innenabstand und Rahmen mit derselben Spezifität — ohne die Klasse bliebe
 * hier das 14/22-Padding stehen und aus dem Kreis würde ein Ei.
 *
 * 44 px ist die kleinste bequem treffbare Fläche auf dem Telefon.
 */
.cybele-dsp .wp-block-button.is-style-outline > .wp-block-button__link,
.cybele-teilen .wp-block-button.is-style-outline > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	/* Weiß statt durchsichtig: Die Kreise heben sich so vom Papierton ab. */
	background: var(--wp--preset--color--white);
	border-color: var(--wp--custom--hairline-strong);
	color: var(--wp--preset--color--contrast);
}

.cybele-dsp .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.cybele-dsp .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.cybele-teilen .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.cybele-teilen .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	transform: none;
}

/*
 * Über die Höhe bemessen, Breite aus dem Seitenverhältnis: Die Zeichen haben
 * unterschiedliche viewBox-Formate — Apple ist hochformatig, Deezer breit. Bei
 * fester Breite und Höhe stünden sie unterschiedlich groß im Kreis.
 *
 * Rund ein Viertel größer als zuvor (17/20 px), damit die Marken im Kreis
 * stärker auftreten. Der Kreis bleibt bei 44 px — die Zeichen füllen ihn
 * damit besser aus, und die Trefffläche fürs Telefon bleibt, wie sie war.
 */
.cybele-dsp__icon,
.cybele-teilen__icon {
	flex: none;
	width: auto;
	height: 21px;
	max-width: 25px;
	fill: currentColor;
	opacity: 0.8;
	transition: opacity 0.16s ease;
}

.cybele-dsp .wp-block-button__link:hover .cybele-dsp__icon,
.cybele-dsp .wp-block-button__link:focus-visible .cybele-dsp__icon,
.cybele-teilen .wp-block-button__link:hover .cybele-teilen__icon,
.cybele-teilen .wp-block-button__link:focus-visible .cybele-teilen__icon {
	opacity: 1;
}

/* Die Reihe soll nicht auf die volle Spaltenbreite ziehen. */
.cybele-dsp .wp-block-button,
.cybele-teilen .wp-block-button {
	flex: none;
}

/* Nur für Screenreader — Standardmuster, ohne display:none. */
.cybele-dsp__name,
.cybele-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cybele-dsp .wp-block-button__link:hover,
.cybele-dsp .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--contrast);
}

@media (max-width: 780px) {
	/* Auf schmalen Bildschirmen ist die Zeilenansicht nicht sinnvoll. */
	.cybele-katalog__ansicht {
		display: none;
	}

	.cybele-katalog__liste[data-ansicht="liste"] {
		display: grid;
		border-top: 0;
	}

	.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__karte {
		display: block;
		padding: 0;
		border-bottom: 0;
	}

	.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__text {
		display: block;
	}

	.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__komponist:empty,
	.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__artist:empty {
		display: none;
	}

	.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__fuss {
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
	}

	.cybele-katalog__liste[data-ansicht="liste"] .cybele-katalog__fuss > span {
		text-align: left;
	}
}

@media (max-width: 600px) {
	.cybele-katalog__liste,
	.cybele-katalog__liste[data-ansicht="liste"] {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
		gap: var(--wp--preset--spacing--md) 14px;
	}

	/*
	 * Auf dem Telefon nimmt jedes Auswahlfeld eine ganze Zeile ein. Nebeneinander
	 * blieben von „Alle Komponisten“ nur ein paar Buchstaben übrig.
	 */
	.cybele-katalog__pille {
		flex: 1 1 100%;
	}

	/*
	 * Damit stehen alle Felder untereinander — der größere Reihenabstand vom
	 * Desktop, der dort die zweite Reihe abhebt, würde hier nur jeden Abstand
	 * aufziehen. Zurück auf den engen Wert.
	 */
	.cybele-katalog__leiste {
		gap: 10px;
	}

	/*
	 * Auf dem Telefon rückt alles enger zusammen; der Platzhalter wird dabei
	 * abgeschnitten, wie es Eingabefelder tun. Vorher wich er in eine zweite
	 * Zeile aus — im Rahmen sähe das aus wie ein Kasten mit zwei Etagen.
	 */
	.cybele-katalog__suche {
		gap: 10px;
		padding: 10px 16px;
	}

	.cybele-katalog__pille select {
		width: 100%;
		max-width: none;
	}

	/*
	 * In der schmalen Spalte stehen Katalognummer und Jahr untereinander —
	 * nebeneinander bliebe für die Nummer zu wenig Platz und sie bräche
	 * mitten im Kürzel um.
	 */
	.cybele-katalog__fuss {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.cybele-albumdaten {
		grid-template-columns: 1fr;
	}
}

/* Kopfleiste der Albumseite — eine feine Linie unter dem Band. */
.cybele-albumnav-band {
	border-bottom: 1px solid var(--wp--custom--hairline);
}

.cybele-measure + .cybele-albumnav-band,
.cybele-albumnav-band + .wp-block-group .wp-block-buttons {
	border-top: 0;
}

/*
 * Überschriften ohne Inhalt vermeiden: Sechs Alben haben keine Titelliste,
 * fünfzig keine verknüpften Mitwirkenden. Fehlt beides, entfällt das ganze
 * Band — sonst bliebe ein leerer farbiger Streifen stehen.
 *
 * Dasselbe für den Fließtext: 19 Alben haben keinen. Der Beitragsinhalt gibt
 * dann nichts aus, die Gruppe darum stünde aber mit ihren 96 px oben und 48 px
 * unten weiter im Fluss. `:not(:has(*))` statt `:empty`, weil im Markup noch
 * Leerraum steht — der zählt für `:empty` als Inhalt.
 */
.cybele-trackspalte:not(:has(.cybele-tracks)),
.cybele-mitwirkendespalte:not(:has(.cybele-subpages)),
.cybele-albumband:not(:has(.cybele-tracks)):not(:has(.cybele-subpages)),
.single-cybele_album .cybele-measure:not(:has(*)),
.cybele-dspband:not(:has(.cybele-dsp)) {
	display: none;
}

/*
 * Fällt eine der beiden Spalten weg, nutzt die andere die ganze Breite. Über
 * flex-grow statt flex-basis: Die Breite steht als Inline-Angabe am Element und
 * wäre aus dem Stylesheet nur mit !important zu überschreiben.
 */
.cybele-albumband .wp-block-columns:not(:has(.cybele-subpages)) .cybele-trackspalte,
.cybele-albumband .wp-block-columns:not(:has(.cybele-tracks)) .cybele-mitwirkendespalte {
	flex-grow: 1;
}

/* ------------------------------------------------------------------
 * Knopf unter den Eckdaten
 *
 * Zwei Verweise teilen sich diese Form: der Sprung zur Beschreibung und —
 * derzeit abgeschaltet — der Booklet-Download.
 * ---------------------------------------------------------------- */
.cybele-booklet {
	margin: var(--wp--preset--spacing--md) 0 0;
}

/*
 * `wp-element-button` holt Schrift, Farbe und Innenabstand aus theme.json —
 * derselbe Knopf wie im Editor, nur serverseitig gebaut.
 */
.cybele-albumknopf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: transform 0.16s ease;
}

.cybele-albumknopf:hover,
.cybele-albumknopf:focus-visible {
	transform: translateY(-1px);
}

.cybele-booklet__icon {
	flex: none;
	width: auto;
	height: 1.1em;
	fill: currentColor;
	opacity: 0.7;
}

.cybele-booklet__groesse {
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}


/*
 * Ohne Beschreibung gibt der Inhaltsblock nichts aus (so haelt es der Kern) —
 * dann entfaellt der ganze Abschnitt, statt eine Ueberschrift ueber einer
 * leeren Flaeche stehen zu lassen. Derzeit hat jedes der 197 Alben einen Text.
 */
.cybele-beschreibung:not(:has(.wp-block-post-content)) {
	display: none;
}

/*
 * Termine unter einer Album- oder Profilseite.
 *
 * Ein eigener Abschnitt statt einer Gruppe in der Vorlage: Liegt nichts an,
 * gibt der Block gar nichts aus — eine Gruppe haette ihre Abstaende auch um
 * eine leere Flaeche gelegt, und das betrifft die Mehrzahl der Seiten.
 */
.cybele-konzerte-dazu {
	display: block;
	margin-top: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.cybele-konzerte-dazu > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--sm);
}

/* ------------------------------------------------------------------
 * Konzertkalender
 *
 * Zeilenraster nach der bisherigen Vorlage der Seite: Datum, Uhrzeit,
 * Titel, Mitwirkende mit Ort, Auszeichnung. Alles Übrige — Schriften,
 * Farben, Kicker, Badge — kommt unverändert aus dem Theme, und die
 * Filterleiste teilt sich das Markup mit dem Gesamtkatalog.
 * ---------------------------------------------------------------- */
.cybele-termine__monat {
	margin-top: var(--wp--preset--spacing--lg);
}

.cybele-termine__monat[hidden] {
	display: none;
}

.cybele-termine__monatstitel {
	margin: 0 0 2px;
	color: var(--wp--preset--color--muted);
}

.cybele-termine__zeile {
	display: grid;
	grid-template-columns: 150px 76px minmax(0, 1.3fr) minmax(0, 1fr) 180px;
	gap: 0 24px;
	align-items: center;
	padding-block: 16px;
	border-top: 1px solid var(--wp--custom--hairline);
}

/* Das Filterskript blendet über [hidden] aus — gegen display:grid des
   Rasters kommt die Browservorgabe allein nicht an. */
.cybele-termine__zeile[hidden] {
	display: none;
}

/* Das Theme gibt Kickern einen Abstand nach unten (`p.is-style-kicker`).
   Weil main.css nach diesem Stylesheet lädt, gewinnt die Regel dort bei
   gleicher Spezifität — Datum und Uhrzeit saßen dadurch 5 px zu hoch in der
   Zeile. Deshalb hier eine Stufe höher zurücksetzen. */
.cybele-termine__zeile > p,
.cybele-termine__zeile > p.is-style-kicker {
	margin: 0;
}

/*
 * 26px Serife ueber bis zu drei Zeilen (113 von 434 Terminen) waere mit dem
 * globalen 1.65 viel zu locker — daher dieselbe engere Fuehrung wie ueberall.
 */
.cybele-termine__titel {
	line-height: var(--wp--custom--line-height-tight);
}

/* Lange Komposita — „Orgelpräsentationskonzert“, „BACHCHOR/BACHORCHESTER“ —
   sprengten in schmalen Fenstern ihre Spalte. Getrennt wird nur, wenn es
   ohne Trennung nicht aufgeht. */
.cybele-termine__titel,
.cybele-termine__meta {
	hyphens: auto;
}

/* Nur in der Ortsspalte hart trennen: „BACHCHOR/BACHORCHESTER“ kennt keine
   Trennstelle. Der Titel bleibt davon verschont — dort würde ein harter
   Umbruch das Zeichen für den externen Verweis vom letzten Wort lösen. */
.cybele-termine__meta {
	overflow-wrap: break-word;
}

/* Zeichen am Titelverweis: macht sichtbar, dass es nach außen geht.

   Bewusst ein Textzeichen und kein SVG. Ein SVG ist ein eigenes Inline-
   Element; zwischen ihm und dem Text darf umbrochen werden, auch hinter
   einem geschützten Leerzeichen — bei 431 Terminen landete das Zeichen
   neunmal allein in der nächsten Zeile. Als Zeichen im ::after hält das
   geschützte Leerzeichen zuverlässig. Der Pfeil ist dieselbe Formensprache
   wie „Katalog →“ an den Schaltflächen des Themes. */
.cybele-termine__titel a::after {
	content: "\00a0\2197";
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.58em;
	vertical-align: 0.3em;
	opacity: 0.45;
	transition: opacity 0.16s ease;
}

.cybele-termine__titel a:hover::after,
.cybele-termine__titel a:focus-visible::after {
	opacity: 1;
}

.cybele-termine__titel a,
.cybele-termine__meta a {
	color: inherit;
	text-decoration: none;
}

.cybele-termine__titel a:hover,
.cybele-termine__titel a:focus-visible,
.cybele-termine__meta a:hover,
.cybele-termine__meta a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--accent);
}

/*
 * Ortsmarke vor dem Veranstaltungsort — macht sichtbar, dass der Ort zur
 * Karte fuehrt. Bewusst VOR dem Namen: Der Verweis beginnt nach einem
 * Zeilenumbruch am linken Rand, dort lassen sich Zeichen und erstes Wort
 * praktisch nicht trennen. Hinter dem Text waere das Zeichen bei schmalen
 * Spalten allein in die naechste Zeile gerutscht.
 */
.cybele-termine__ortmarke {
	height: 0.92em;
	width: auto;
	margin-right: 0.34em;
	vertical-align: -0.1em;
	fill: currentColor;
	opacity: 0.5;
	transition: opacity 0.16s ease;
}

.cybele-termine__ort:hover .cybele-termine__ortmarke,
.cybele-termine__ort:focus-visible .cybele-termine__ortmarke {
	opacity: 1;
}

.cybele-termine__marken {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}

/* „Erstaufführung“ ist als Auszeichnung 179 px breit und sprengte die Spalte
   nach links in die Ortsangabe hinein. Die Spalte ist deshalb breiter, und die
   Auszeichnung darf notfalls umbrechen statt zu überlagern — ein längeres Wort
   wie „CD-Veröffentlichung“ bleibt damit ebenfalls in seiner Spur. */
.cybele-termine__marken .is-style-badge-outline {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: center;
}

/* Ticketknopf: Gestaltung kommt vollständig vom Theme (wp-element-button
   samt Twentig-Symbol). Hier nur die Maße für die Zeile — in Terminhöhe
   wäre die volle Schaltflächengröße zu wuchtig. */
.cybele-termine__ticket .wp-block-button__link {
	padding: 9px 16px;
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

.cybele-termine__ticket svg {
	width: 1em;
	height: 1em;
}

/* ------------------------------------------------------------------
 * Kurzfassung auf der Startseite
 *
 * Gleiche Zeilen, nur ohne Filterleiste und Monatsgruppen — und auf dem
 * dunkelblauen Grund mit heller Schrift. Die Werte stammen aus der bisher
 * dort von Hand gesetzten Sektion, es kommt keine neue Farbe hinzu.
 * ---------------------------------------------------------------- */
.cybele-termine--invers .cybele-termine__zeile {
	border-top-color: var(--wp--custom--hairline-paper);
}

.cybele-termine--invers .cybele-termine__zeit,
.cybele-termine--invers .cybele-termine__meta {
	color: rgba(244, 241, 234, 0.72);
}

.cybele-termine--invers .cybele-termine__titel a:hover,
.cybele-termine--invers .cybele-termine__titel a:focus-visible,
.cybele-termine--invers .cybele-termine__meta a:hover,
.cybele-termine--invers .cybele-termine__meta a:focus-visible {
	text-decoration-color: var(--wp--preset--color--accent);
}

/* Schmale Fenster: Datum und Uhrzeit in eine Zeile, alles Weitere darunter. */
@media (max-width: 899px) {
	.cybele-termine__zeile {
		grid-template-columns: 1fr auto;
		gap: 2px 16px;
		align-items: start;
	}

	.cybele-termine__zeit {
		text-align: right;
	}

	.cybele-termine__titel,
	.cybele-termine__meta,
	.cybele-termine__marken {
		grid-column: 1 / -1;
	}

	/* Als Element ist die Spalte selbst ein <p> — gegen das Zurücksetzen
	   weiter oben kommt eine Klasse allein nicht an, daher hier mit dem
	   Element im Selektor. */
	.cybele-termine__zeile > p.cybele-termine__marken {
		justify-content: flex-start;
		margin-top: 10px;
	}
}