/**
 * Ausstellerverzeichnis – Frontend
 *
 * Bewusst nur Layout: Raster, Größen, Positionen, Modal-Mechanik.
 * Schrift, Farben, Rahmen, Radien und Schatten kommen vom Theme oder aus
 * "Aussteller → Darstellung". Alle var()-Aufrufe haben neutrale Rückfallwerte,
 * damit ohne Einstellungen nichts aufgezwungen wird.
 */

.av-directory,
.av-modal,
.av-single {
	box-sizing: border-box;
	color: var(--av-text, inherit);
}

.av-directory {
	container-type: inline-size;
}

.av-directory *,
.av-directory *::before,
.av-directory *::after,
.av-modal *,
.av-modal *::before,
.av-modal *::after,
.av-single *,
.av-single *::before,
.av-single *::after {
	box-sizing: inherit;
}

.av-sr,
.av-directory .screen-reader-text,
.av-modal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.av-directory .av-icon,
.av-modal .av-icon,
.av-single .av-icon {
	width: var(--av-icon-glyph, 1.25em);
	height: var(--av-icon-glyph, 1.25em);
	flex: none;
	display: block;
}

/*
 * Funktionale Zurücksetzung: diese Schaltflächen sind Klickflächen, keine
 * Buttons im Sinne des Themes. Ohne das legt sich das Theme-Button-Design
 * über Karte, Video-Vorschau und Modal.
 */
.av-card__open,
.av-video__btn,
.av-modal__close {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* ---------------------------------------------------------------- Toolbar */

.av-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--av-toolbar-gap, 12px);
	margin-bottom: var(--av-toolbar-space, 22px);
}

.av-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--av-toolbar-gap, 12px);
}

.av-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 170px;
}

.av-field--search {
	flex: 1 1 260px;
	max-width: 100%;
}

/* Breite ist Layout – das Aussehen des Feldes bleibt beim Theme. */
.av-field__input {
	width: 100%;
	max-width: 100%;
}

.av-groups,
.av-panel,
.av-viewswitch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--av-pill-gap, 8px);
}

/* Wie beim Programmverzeichnis: Die Filter dürfen links stehen, mittig oder
   rechts. Der Umschalter Kacheln/Liste bleibt davon unberührt. */
.av-groups,
.av-panel {
	justify-content: var(--av-filter-justify, flex-start);
}

.av-viewswitch {
	margin-left: auto;
}

.av-panel[hidden] {
	display: none;
}

/* Überschrift über den Auswahlpillen – trennt mehrere offene Gruppen. */
.av-panel__label {
	flex: 0 0 100%;
	color: var(--av-muted, inherit);
	font-size: var(--av-panel-label-size, var(--av-small-size, .9em));
	line-height: 1.3;
}

/* ------------------------------------------------------------------ Pills */

.av-pill {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: var(--av-pill-pad, .45em .95em);
	font: inherit;
	font-size: var(--av-pill-size, inherit);
	line-height: 1.25;
	color: var(--av-pill-color, inherit);
	background: var(--av-pill-bg, transparent);
	border: var(--av-pill-border-width, 1px) solid var(--av-pill-border-color, rgba(128, 128, 128, .35));
	border-radius: var(--av-pill-radius, 100px);
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* display aus der Pill-Regel würde das hidden-Attribut sonst aushebeln. */
.av-pill[hidden],
.av-pill__badge[hidden] {
	display: none;
}

.av-pill:hover {
	border-color: var(--av-pill-hover-border-color, var(--av-accent, currentColor));
}

.av-pill .av-icon {
	width: 1em;
	height: 1em;
}

/* Ausgewählt: aus Outline wird Fläche. */
.av-pill--option[aria-pressed="true"],
.av-pill--view[aria-pressed="true"],
.av-pill--group.has-selection {
	color: var(--av-pill-active-color, var(--av-accent-contrast, inherit));
	background: var(--av-pill-active-bg, var(--av-accent, rgba(128, 128, 128, .18)));
	border-color: var(--av-pill-active-border-color, var(--av-pill-active-bg, var(--av-accent, transparent)));
}

/* Aufgeklappte Gruppe ohne Auswahl: nur betont, nicht gefüllt. */
.av-pill--group[aria-expanded="true"]:not(.has-selection) {
	border-color: var(--av-pill-hover-border-color, var(--av-accent, currentColor));
}

.av-pill--group[aria-expanded="true"] .av-icon--chevron {
	transform: rotate(180deg);
}

.av-pill--group .av-icon--chevron {
	transition: transform .18s ease;
}

.av-pill__badge {
	min-width: 1.6em;
	padding: 0 .3em;
	font-size: .85em;
	text-align: center;
	background: rgba(128, 128, 128, .3);
	background: color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 100px;
}

.av-pill__count {
	font-size: .85em;
	opacity: .65;
}

/* Führt zu keinem Treffer – sichtbar, aber zurückgenommen. */
.av-pill.is-empty {
	opacity: .4;
	cursor: default;
}

.av-pill--reset .av-icon {
	width: .85em;
	height: .85em;
}

.av-count,
.av-empty,
.av-field__label {
	color: var(--av-muted, inherit);
	font-size: var(--av-small-size, inherit);
}

.av-count {
	margin: 0 0 12px;
}

.av-empty {
	margin: 24px 0;
	padding: var(--av-card-padding, 16px);
	text-align: center;
	background: var(--av-surface-alt, transparent);
	border-radius: var(--av-radius, 0);
}

/* ------------------------------------------------------------------ Items */

/*
 * Listenpunkte abschalten. Themes setzen sie oft über `.entry-content ul li`,
 * deshalb hier mit passender Spezifität – und ohne Innenabstand anzufassen,
 * damit die Chips ihren eigenen behalten.
 */
.av-directory .av-items,
.av-directory .av-tags,
.av-modal .av-tags,
.av-single .av-tags {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.av-directory .av-items > li,
.av-directory .av-tags > li,
.av-modal .av-tags > li,
.av-single .av-tags > li {
	list-style: none;
	list-style-type: none;
	margin: 0;
	text-indent: 0;
	background-image: none;
}

.av-directory .av-items > li::before,
.av-directory .av-items > li::marker,
.av-directory .av-tags > li::before,
.av-directory .av-tags > li::marker,
.av-modal .av-tags > li::before,
.av-modal .av-tags > li::marker,
.av-single .av-tags > li::before,
.av-single .av-tags > li::marker {
	content: none;
	display: none;
}

.av-items {
	display: grid;
	gap: var(--av-gap, 20px);
}

.av-directory--grid .av-items {
	grid-template-columns: repeat(var(--av-columns, 4), minmax(0, var(--av-card-max, 1fr)));
}

.av-directory--align-center .av-items {
	justify-content: center;
}

.av-directory--list .av-items {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--av-list-gap, 10px);
}

.av-item {
	min-width: 0;
}

.av-item[hidden] {
	display: none;
}

.av-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--av-card-gap, 12px);
	height: 100%;
	padding: var(--av-card-padding, 0);
	background: var(--av-card-bg, transparent);
	border: var(--av-border-width, 0) solid var(--av-border-color, transparent);
	border-radius: var(--av-radius, 0);
	box-shadow: var(--av-shadow, none);
	transition: box-shadow .18s ease, border-color .18s ease;
}

.av-card:hover,
.av-card:focus-within {
	box-shadow: var(--av-shadow-hover, var(--av-shadow, none));
}

/*
 * Logo: quadratischer Rahmen mit Innenabstand. Das Bild wird eingepasst,
 * nie beschnitten – Quer- und Hochformate bleiben vollständig sichtbar.
 */
.av-card__logo,
.av-detail__logo,
.av-single__logo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	padding: var(--av-logo-pad, 12%);
	background: var(--av-logo-bg, transparent);
	border: var(--av-logo-border-width, 0) solid var(--av-logo-border-color, transparent);
	border-radius: var(--av-logo-radius, var(--av-radius, 0));
	overflow: hidden;
}

/*
 * Diese drei Angaben sind die Zusage, dass jedes Logo vollständig zu sehen ist –
 * vom 2000×200-Banner bis zum 300×1600-Hochformat. Sie stehen bewusst mit
 * !important, weil manche Themes img-Regeln ebenso erzwingen und ein Logo sonst
 * über den quadratischen Rahmen hinausliefe und dort abgeschnitten würde.
 */
.av-logo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center;
	/* Themes geben Bildern gern einen Außenabstand. Der zählt beim Zentrieren
	   mit und schöbe das Logo aus der Mitte des Rahmens. */
	margin: 0 !important;
	/* Auch das Mindestmaß muss weichen: ein erzwungenes min-height würde das
	   Bild über den Rahmen schieben, wo es beschnitten würde. */
	min-width: 0 !important;
	min-height: 0 !important;
}

.av-logo--placeholder {
	/* Der Platzhalter füllt das Logo-Feld, ohne dessen Rahmen zu doppeln. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: clamp(1.2rem, 5cqi, 2.2rem);
	color: var(--av-muted, inherit);
	background: var(--av-surface-alt, transparent);
	border-radius: var(--av-radius, 0);
	margin: 0 !important;
}

.av-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--av-body-gap, 6px);
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Name und Standort tragen die senkrechte Zentrierung. Themes hängen an
 * Überschriften und Absätzen oft eigene Abstände, die hier als Leerraum
 * mitzählen würden – deshalb durchgesetzt.
 */
.av-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--av-title-size, inherit);
	color: var(--av-title-color, inherit);
	overflow-wrap: anywhere;
}

.av-directory--list .av-card__title {
	/* Eigene Größe für die Liste; ohne Angabe gilt die der Kacheln. */
	font-size: var(--av-list-title-size, var(--av-title-size, inherit));
}

.av-card__location,
.av-detail__location {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--av-location-color, var(--av-muted, inherit));
	font-size: var(--av-small-size, .9em);
}

/*
 * Kategorien auf der Karte – zwischen Standort und Icons. Sie sind bewusst
 * kleiner als im Detailfenster; --av-card-tag-scale steuert das Verhältnis.
 */
/* Spezifisch genug, um die Listen-Zurücksetzung weiter oben zu überstimmen. */
.av-directory .av-card__tags {
	gap: calc(var(--av-tag-gap, 5px) * var(--av-card-tag-scale, .85));
	margin-bottom: var(--av-card-tag-space, 10px);
}

.av-directory .av-card__tags .av-tag {
	font-size: calc(var(--av-tag-size, .8em) * var(--av-card-tag-scale, .85));
	padding:
		calc(var(--av-tag-pad-y, 3px) * var(--av-card-tag-scale, .85))
		calc(var(--av-tag-pad-x, 10px) * var(--av-card-tag-scale, .85));
	line-height: 1.35;
}

/* Die Links liegen über der Klickfläche der Karte. */
.av-links {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--av-links-gap, 8px);
	margin-top: auto;
}

/*
 * In der Kachelansicht sitzen die Icons immer am unteren Rand, abgesetzt
 * durch eine Trennlinie. Der Standardwert ist ein neutrales Grau, das auf
 * hellen wie dunklen Themes funktioniert.
 */
.av-directory--grid .av-links {
	padding-top: var(--av-links-space, 12px);
	border-top: var(--av-divider-width, 1px) solid var(--av-divider-color, rgba(128, 128, 128, .25));
}

/* Karte ohne Beschreibungstext: die Linie soll trotzdem unten stehen. */
.av-directory--grid .av-card__body {
	min-height: 0;
}

.av-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--av-icon-size, auto);
	height: var(--av-icon-size, auto);
	color: inherit;
	text-decoration: none;
	background: var(--av-icon-bg, transparent);
	border-radius: var(--av-icon-radius, 0);
	transition: color .15s ease, background-color .15s ease;
}

.av-link:hover,
.av-link:focus {
	color: var(--av-accent-contrast, var(--av-accent, inherit));
	background: var(--av-accent, var(--av-icon-bg, transparent));
}

/* Klickfläche über der gesamten Karte – öffnet das Modal. */
.av-card__open {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	padding: 0;
	border-radius: var(--av-radius, 0);
}

/*
 * Themes zeichnen um diese Fläche gern einen stark gerundeten Rahmen – bei
 * einer hohen Karte wird daraus ein Ei. Nach einem Mausklick soll nichts zu
 * sehen sein; wer mit der Tastatur unterwegs ist, bekommt einen sauberen
 * Rahmen in Kartenform.
 */
.av-directory .av-card__open,
.av-directory .av-card__open:focus,
.av-directory .av-card__open:active,
.av-directory .av-card__open:hover {
	outline: none !important;
	border: 0 !important;
	border-radius: var(--av-radius, 0) !important;
	box-shadow: none !important;
	background: none !important;
}

.av-directory .av-card__open:focus-visible {
	outline: 2px solid var(--av-accent, currentColor) !important;
	outline-offset: 3px !important;
}

/* ------------------------------------------------------------ Listenansicht */

.av-directory--list .av-card {
	flex-direction: row;
	align-items: center;
	gap: var(--av-list-card-gap, 18px);
	padding: var(--av-list-card-padding, var(--av-card-padding, 0));
}

.av-directory--list .av-card__logo {
	width: var(--av-list-logo-size, 76px);
	flex: none;
	padding: var(--av-list-logo-pad, 6px);
}

.av-directory--list .av-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title links"
		"location links"
		"tags links";
	align-items: center;
	column-gap: 20px;
	row-gap: 2px;
}

/*
 * Zwei Kleinigkeiten schieben den Textblock sonst sichtbar aus der Mitte:
 * Themes hängen an <ul> einen unteren Abstand (bei Salient 10 px), und sehr
 * enge Zeilenhöhen lassen die Oberlängen der Überschrift aus ihrer Zeile
 * ragen. Beides wird hier ausgeglichen – gemessen sitzt der Block danach
 * gleich weit von oben wie von unten.
 */
.av-directory--list .av-card__tags.av-card__tags {
	grid-area: tags;
	margin-top: var(--av-list-tag-space, 4px);
	margin-bottom: 0 !important;
	line-height: 1 !important;
}

.av-directory--list .av-card__title.av-card__title {
	grid-area: title;
	min-width: 0;
	line-height: var(--av-list-title-line, 1.25) !important;
}

.av-directory--list .av-card__location {
	grid-area: location;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.av-directory--list .av-links {
	grid-area: links;
	margin-top: 0;
	flex-wrap: nowrap;
}

/* ------------------------------------------------------------------ Modal */

.av-modal[hidden] {
	display: none;
}

.av-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 40px);
}

.av-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--av-backdrop, rgba(0, 0, 0, .55));
}

/*
 * Gerollt wird der Inhalt, nicht das Fenster. Nur so bleibt der
 * Schließen-Knopf an seinem Platz – er hängt am Fenster. Der Innenabstand
 * sitzt deshalb am Inhalt, damit er beim Rollen mitgeht wie vorher.
 */
.av-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(var(--av-modal-width, 860px), 100%);
	max-height: min(88vh, 900px);
	overflow: hidden;
	overscroll-behavior: contain;
	/* Canvas/CanvasText folgen der Systemeinstellung, solange nichts gesetzt ist. */
	background: var(--av-modal-bg, Canvas);
	color: var(--av-text, CanvasText);
	border-radius: var(--av-modal-radius, var(--av-radius, 0));
	box-shadow: var(--av-modal-shadow, 0 24px 70px rgba(0, 0, 0, .35));
}

.av-modal__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--av-modal-padding, clamp(20px, 4vw, 36px));
}

.av-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--av-muted, inherit);
	background: var(--av-surface-alt, transparent);
	border-radius: var(--av-icon-radius, 50%);
}

.av-detail__head {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	padding-right: 44px;
}

.av-detail__logo {
	width: var(--av-detail-logo-size, 140px);
	flex: none;
	padding: var(--av-detail-logo-pad, 8px);
}

/*
 * Der Textblock setzt um den Eckenradius des Logo-Feldes tiefer an. So
 * beginnt der Name dort, wo die Rundung des Logos endet – nebeneinander
 * wirkt das ruhiger als eine Kante an der Ecke.
 */
.av-detail__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding-top: var(--av-detail-intro-offset, var(--av-logo-radius, 0px));
}

/* Ohne eigene Angabe so groß wie im Programmverzeichnis – das Theme setzt
   Überschriften im Modal sonst sehr klein. */
.av-detail__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--av-detail-title-size, 1.8em);
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.av-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--av-tag-gap, 6px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Kategorie-Chips im Detailfenster – eigene Variablen, damit sie sich
   unabhängig von den Filter-Pillen gestalten lassen. */
.av-tag {
	padding: var(--av-tag-pad-y, 3px) var(--av-tag-pad-x, 10px);
	/* Bewusst kleiner als der Fließtext – Chips sind Beiwerk, keine Aussage. */
	font-size: var(--av-tag-size, .8em);
	line-height: 1.35;
	color: var(--av-tag-color, var(--av-muted, inherit));
	background: var(--av-tag-bg, var(--av-surface-alt, transparent));
	border: var(--av-tag-border-width, 0) solid var(--av-tag-border-color, transparent);
	border-radius: var(--av-tag-radius, 100px);
	margin: 0 !important;
}

.av-detail__links,
.av-single__links {
	/* Ganz unten, abgesetzt durch die Trennlinie. */
	margin-top: var(--av-detail-space, 26px);
	padding-top: var(--av-links-space, 12px);
	border-top: var(--av-divider-width, 1px) solid var(--av-divider-color, rgba(128, 128, 128, .25));
}

.av-detail__text {
	margin-top: var(--av-detail-space, 26px);
	font-size: var(--av-detail-text-size, inherit);
	line-height: var(--av-detail-text-leading, inherit);
}

.av-detail__text > *:first-child { margin-top: 0; }
.av-detail__text > *:last-child  { margin-bottom: 0; }

.av-detail__subtitle {
	margin: var(--av-detail-space, 26px) 0 12px;
	font-size: var(--av-detail-subtitle-size, inherit);
}

/* ----------------------------------------------------------------- Videos */

.av-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--av-video-min, 240px), 1fr));
	gap: 14px;
}

.av-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--av-video-bg, #0d1017);
	border-radius: var(--av-radius, 0);
}

.av-video__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
}

.av-video__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .9;
	transition: opacity .18s ease, transform .3s ease;
}

.av-video__thumb--empty {
	background: var(--av-video-bg, #0d1017);
}

.av-video__btn:hover .av-video__thumb {
	opacity: 1;
	transform: scale(1.03);
}

.av-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	height: 58px;
	transform: translate(-50%, -50%);
	background: var(--av-play-bg, rgba(255, 255, 255, .92));
	border-radius: 50%;
}

.av-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-left: 17px solid var(--av-play-arrow, #16181d);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.av-video__provider {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 2px 8px;
	font-size: var(--av-small-size, .8em);
	color: #fff;
	background: rgba(0, 0, 0, .55);
	border-radius: 4px;
}

.av-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------- Einzelansicht */

.av-single__head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin-bottom: 26px;
}

.av-single__logo {
	width: var(--av-single-logo-size, 160px);
	flex: none;
}

.av-single__meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* ------------------------------------------------------------ Responsives */

@container (max-width: 900px) {
	.av-directory--grid .av-items {
		grid-template-columns: repeat(min(var(--av-columns, 4), 3), minmax(0, var(--av-card-max, 1fr)));
	}
}

@container (max-width: 680px) {
	.av-directory--grid .av-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.av-directory--align-center .av-items {
		justify-content: stretch;
	}
	.av-directory--list .av-card__body {
		column-gap: 12px;
	}
	.av-directory--list .av-card__tags {
		display: none;
	}
}

@container (max-width: 300px) {
	.av-directory--grid .av-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.av-detail__head {
		flex-direction: column;
		gap: 16px;
	}
	.av-detail__logo {
		width: 108px;
	}
	.av-modal__dialog {
		max-height: 92vh;
	}
}

/* Rückfallebene ohne Container-Queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.av-directory--grid .av-items { grid-template-columns: repeat(3, minmax(0, var(--av-card-max, 1fr))); }
	}
	@media (max-width: 680px) {
		.av-directory--grid .av-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (max-width: 340px) {
		.av-directory--grid .av-items { grid-template-columns: minmax(0, 1fr); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-card,
	.av-link,
	.av-video__thumb {
		transition: none;
	}
}

/* --------------------------------------------------------- Nachladen */

.av-more {
	display: flex;
	justify-content: var(--av-more-align, center);
	margin-top: var(--av-more-space, 24px);
}

.av-more .av-pill--more[hidden] {
	display: none;
}

body.av-modal-open {
	overflow: hidden;
}

/*
 * Themes hängen an jeden angeklickten Knopf einen eigenen Fokusring – meist
 * blau und meist rund. Nach einem Mausklick soll nichts davon zu sehen sein;
 * wer mit der Tastatur bedient, bekommt einen sauberen Ring in der
 * Akzentfarbe. Gilt für Pillen, Umschalter und den Schließen-Knopf.
 */
.av-directory button:focus,
.av-directory button:active,
.av-modal button:focus,
.av-modal button:active {
	outline: none !important;
	box-shadow: none !important;
}

.av-directory button:focus-visible,
.av-modal button:focus-visible {
	outline: 2px solid var(--av-accent, currentColor) !important;
	outline-offset: 2px !important;
}

/* Die Größe muss sich gegen die Überschriftenregeln des Themes durchsetzen. */
.av-modal .av-detail__title.av-detail__title,
.av-single .av-detail__title.av-detail__title {
	font-size: var(--av-detail-title-size, 1.8em) !important;
	line-height: 1.15 !important;
}