/**
 * Karte & Filter.
 *
 * Alle Farben, Abstände, Radien, Schriftgrößen und Schatten stehen im Block
 * darunter. Zum Umgestalten reicht es, diese Werte zu überschreiben — im
 * Child-Theme genügt ein `.fbmap { --fbmap-...: ...; }`.
 *
 * Die Standardwerte: rote Akzente, Liste links, Karte rechts. Die
 * Schriftgrößen greifen auf die Automatic.css-Skala zu, falls vorhanden.
 */

.fbmap {
	/* Farben */
	--fbmap-color-text: #333d4d;
	--fbmap-color-heading: #1f2733;
	--fbmap-color-muted: #6b7280;
	--fbmap-color-surface: #ffffff;
	--fbmap-color-surface-alt: #f5f6f8;
	--fbmap-color-border: #e2e4e9;
	--fbmap-color-border-strong: #c9ccd4;
	--fbmap-color-accent: #e2001a;
	--fbmap-color-accent-hover: #b80016;
	--fbmap-color-accent-text: #ffffff;
	--fbmap-color-focus: #1a4fd6;
	--fbmap-color-hover-surface: #fbf3f4;

	/*
	 * Abstände. Bewusst in px, nicht in rem: viele Themes setzen
	 * `html { font-size: 62.5% }`, dann käme jeder rem-Wert bei 62,5 % seiner
	 * gedachten Größe an. px wird vom Browser-Zoom weiterhin mitskaliert.
	 */
	--fbmap-space-xs: 4px;
	--fbmap-space-sm: 8px;
	--fbmap-space-md: 14px;
	--fbmap-space-lg: 24px;

	/* Radien */
	--fbmap-radius-sm: 3px;
	--fbmap-radius-md: 4px;
	--fbmap-radius-pill: 999px;
	--fbmap-radius-toggle: var(--fbmap-radius-sm);

	/*
	 * Schrift: die Skala von Automatic.css, damit das Plugin dieselben Größen
	 * wie der restliche Auftritt nutzt. Der zweite Wert greift, wenn ACSS
	 * fehlt — ACSS kennt je nach Version `--text-s` oder `--text-sm`, deshalb
	 * beide. px als letzte Stufe, weil eine 62,5-%-Root rem verkleinern würde.
	 */
	--fbmap-font-size-xs: var(--text-xs, 14px);
	--fbmap-font-size-sm: var(--text-s, var(--text-sm, 15px));
	--fbmap-font-size-md: var(--text-m, 16px);
	/* Kacheltitel. Für einen größeren Titel: `var(--text-l)`. */
	--fbmap-font-size-lg: var(--text-m, 16px);

	/*
	 * Ergebniszähler. Steht auf derselben Stufe wie der Grundtext; seine
	 * Wirkung kommt von der Fettung. Kleiner wird er mit
	 * `--fbmap-font-size-count: var(--text-s);`, ruhiger mit
	 * `--fbmap-font-weight-count: 400;`.
	 */
	--fbmap-font-size-count: var(--fbmap-font-size-md);
	--fbmap-font-weight-count: var(--fbmap-font-weight-bold);
	--fbmap-font-weight-bold: 700;
	--fbmap-line-height: 1.5;

	/* Steuerelemente der Filterleiste */
	--fbmap-control-height: 42px;
	--fbmap-control-padding: 0 var(--fbmap-space-sm);
	--fbmap-control-bg: var(--fbmap-color-surface);
	--fbmap-control-border: var(--fbmap-color-border-strong);
	--fbmap-control-width-date: 150px;
	--fbmap-control-width-place: 170px;
	--fbmap-control-width-radius: 110px;
	--fbmap-control-width-facet: 180px;
	--fbmap-control-width-sort: 180px;

	/* Eigenes Auswahlfeld */
	--fbmap-select-max-height: 260px;
	--fbmap-select-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
	--fbmap-select-option-padding: 8px var(--fbmap-space-sm);
	--fbmap-color-option-active: var(--fbmap-color-hover-surface);
	--fbmap-color-option-selected: var(--fbmap-color-surface-alt);

	/* Eigenes Datumsfeld */
	--fbmap-date-panel-width: 280px;
	--fbmap-date-day-size: 34px;
	--fbmap-color-date-today: var(--fbmap-color-surface-alt);

	/* Filter-Sheet (nur mobil) */
	--fbmap-modal-width: 760px;
	--fbmap-modal-max-height: 80vh;
	--fbmap-modal-radius: 8px;
	--fbmap-sheet-max-height: 88vh;
	--fbmap-sheet-radius: 12px;
	--fbmap-sheet-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
	--fbmap-sheet-z: 10000;
	--fbmap-sheet-transition: 260ms;
	--fbmap-sheet-easing: cubic-bezier(0.32, 0.72, 0, 1);
	--fbmap-backdrop-color: rgba(0, 0, 0, 0.45);

	/* Hervorhebung bei Hover und Fokus */
	--fbmap-pin-ring: 0 0 0 3px #ffffff, 0 0 0 5px var(--fbmap-color-accent-hover);

	/* Rahmen, Schatten, Fokus */
	--fbmap-border-width: 1px;
	--fbmap-rule-width: 3px;
	--fbmap-shadow-card: none;
	--fbmap-shadow-card-active: inset 3px 0 0 0 var(--fbmap-color-accent);
	--fbmap-shadow-pin: 0 1px 3px rgba(0, 0, 0, 0.35);
	--fbmap-focus-width: 3px;

	/* Layout */
	--fbmap-list-width: minmax(320px, 460px);
	--fbmap-map-width: 1fr;
	--fbmap-list-height: 560px;
	--fbmap-map-height: 560px;
	--fbmap-pin-size: 30px;
	--fbmap-badge-size: 26px;
	/* Abstand zwischen Listenspalte und Karte. */
	--fbmap-gap: 20px;
	--fbmap-transition: 120ms;

	color: var(--fbmap-color-text);
	font-size: var(--fbmap-font-size-md);
	line-height: var(--fbmap-line-height);
}

/* Filterleiste */

.fbmap-filters {
	background: var(--fbmap-color-surface-alt);
	border: var(--fbmap-border-width) solid var(--fbmap-color-border);
	display: flex;
	flex-direction: column;
	gap: var(--fbmap-space-md);
	padding: var(--fbmap-space-md);
}

.fbmap-filters__row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fbmap-space-md);
	width: 100%;
}

.fbmap-filters__group {
	border: 0;
	flex: 0 0 auto;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.fbmap-filters__legend {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-xs);
	padding: 0 0 var(--fbmap-space-xs);
}

.fbmap-filters__buttons,
.fbmap-filters__checks {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fbmap-space-xs);
}

/* Datum und Ort bleiben nebeneinander, statt untereinander zu brechen. */
.fbmap-filters__dates,
.fbmap-filters__place {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--fbmap-space-xs);
}

.fbmap-filters__date {
	width: var(--fbmap-control-width-date);
}

.fbmap-filters__text {
	width: var(--fbmap-control-width-place);
}

/*
 * Feste Breite, sonst zieht die längste Option das Feld auf. Der Browser
 * kürzt die Anzeige, die Auswahlliste bleibt vollständig lesbar.
 */
.fbmap-filters__select {
	width: var(--fbmap-control-width-facet);
}

.fbmap-filters__radius {
	width: var(--fbmap-control-width-radius);
}

/* Der Wrapper übernimmt die Breite des Feldes, das er ersetzt. */
.fbmap-filters__place .fbmap-select {
	width: var(--fbmap-control-width-radius);
}

/* Fließt unter dem Ortsfeld mit; im Dialog ist dafür Platz. */
.fbmap-filters__hint {
	color: var(--fbmap-color-accent);
	display: block;
	font-size: var(--fbmap-font-size-xs);
	padding-top: var(--fbmap-space-xs);
}

.fbmap-filters__hint:empty {
	display: none;
}

.fbmap-filters__button {
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-pill);
	color: var(--fbmap-color-text);
	cursor: pointer;
	font-size: var(--fbmap-font-size-sm);
	line-height: 1;
	padding: var(--fbmap-space-xs) var(--fbmap-space-sm);
	transition: background-color var(--fbmap-transition) ease-out;
}

.fbmap-filters__button:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-filters__button[aria-pressed="true"] {
	background: var(--fbmap-color-accent);
	border-color: var(--fbmap-color-accent);
	color: var(--fbmap-color-accent-text);
}

.fbmap-filters__button:focus-visible,
.fbmap-filters__select:focus-visible,
.fbmap-filters__date:focus-visible,
.fbmap-filters__text:focus-visible,
.fbmap-filters__reset:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

.fbmap-filters__check {
	align-items: center;
	display: flex;
	font-size: var(--fbmap-font-size-sm);
	gap: var(--fbmap-space-xs);
}

.fbmap-filters__select,
.fbmap-filters__date,
.fbmap-filters__text {
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	font-size: var(--fbmap-font-size-sm);
	height: var(--fbmap-control-height);
	max-width: 100%;
	padding: var(--fbmap-control-padding);
}

.fbmap-filters__label {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-xs);
}

/*
 * Auf dem Desktop rechts außen und durch eine Linie von den Filtern
 * abgesetzt. Mobil hebt die Media Query das wieder auf.
 */
.fbmap-filters__actions {
	align-self: flex-end;
	border-left: var(--fbmap-border-width) solid var(--fbmap-color-border);
	margin-left: auto;
	padding-left: var(--fbmap-space-md);
}

.fbmap-filters__reset {
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	cursor: pointer;
	font-size: var(--fbmap-font-size-sm);
	height: var(--fbmap-control-height);
	padding: 0 var(--fbmap-space-md);
	transition: background-color var(--fbmap-transition) ease-out;
}

.fbmap-filters__reset:hover {
	background: var(--fbmap-color-hover-surface);
}

/* Trennlinie im mobilen Sheet, sonst unsichtbar */

.fbmap-filters__divider {
	display: none;
}

/* Nur für Screenreader */

/*
 * Vorrang für das hidden-Attribut. Ohne diese Regel kann eine eigene
 * display-Angabe ein verstecktes Element sichtbar machen — genau das hat den
 * Sheet-Hintergrund dauerhaft über die Seite gelegt.
 */
.fbmap-backdrop[hidden],
.fbmap-mobile-bar[hidden],
.fbmap-select__list[hidden] {
	display: none;
}

.fbmap-sr-only {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Kopf, Aktionen und Hintergrund des Filter-Sheets: nur mobil sichtbar */

.fbmap-filters__sheet-head,
.fbmap-filters__sheet-actions,
.fbmap-backdrop,
.fbmap-mobile-bar {
	display: none;
}

/*
 * Ohne JavaScript steht das Filterformular unter der Liste. Dann braucht es
 * den Abstand nach oben, den sonst die Ergebniszeile setzt.
 */
.fbmap:not(.is-enhanced) .fbmap-filters {
	margin-top: var(--fbmap-space-lg);
}

.fbmap-filters__reset {
	text-align: center;
}

/* Mobiler Umschalter zwischen Liste und Karte */

/*
 * Ein Segment-Schalter: ein gemeinsamer Rahmen, zwei gleich breite Hälften mit
 * zentriertem Text. Die Rundung sitzt am Container, nicht an den Segmenten.
 */
.fbmap-view-toggle {
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-toggle);
	display: none;
	margin: var(--fbmap-space-sm) 0;
	overflow: hidden;
}

.fbmap-view-toggle__button {
	align-items: center;
	background: var(--fbmap-control-bg);
	border: 0;
	border-radius: 0;
	color: var(--fbmap-color-text);
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	font-size: var(--fbmap-font-size-sm);
	justify-content: center;
	line-height: 1;
	min-height: var(--fbmap-control-height);
	padding: 0 var(--fbmap-space-sm);
	text-align: center;
	transition: background-color var(--fbmap-transition) ease-out;
}

.fbmap-view-toggle__button + .fbmap-view-toggle__button {
	border-left: var(--fbmap-border-width) solid var(--fbmap-control-border);
}

.fbmap-view-toggle__button:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-view-toggle__button[aria-pressed="true"] {
	background: var(--fbmap-color-accent);
	color: var(--fbmap-color-accent-text);
}

/* Der Ring läge außerhalb des Containers und würde von overflow beschnitten. */
.fbmap-view-toggle__button:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: calc(var(--fbmap-focus-width) * -1);
}

/* Eigenes Auswahlfeld statt des Browser-Dropdowns */

.fbmap-select {
	position: relative;
	width: var(--fbmap-control-width-facet);
}

/* Das native Feld bleibt als Wertspeicher im DOM, aber unsichtbar. */
.fbmap-select__native {
	height: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 0;
}

.fbmap-select__button {
	align-items: center;
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	cursor: pointer;
	display: flex;
	font-size: var(--fbmap-font-size-sm);
	gap: var(--fbmap-space-sm);
	justify-content: space-between;
	min-height: var(--fbmap-control-height);
	padding: var(--fbmap-control-padding);
	text-align: left;
	transition: background-color var(--fbmap-transition) ease-out;
	width: 100%;
}

.fbmap-select__button:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-select__button:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

.fbmap-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Pfeil aus Rahmenkanten, damit keine Bilddatei nötig ist. */
.fbmap-select__caret {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	flex: 0 0 auto;
	height: 0;
	width: 0;
}

.fbmap-select__list {
	background: var(--fbmap-color-surface);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	box-shadow: var(--fbmap-select-shadow);
	list-style: none;
	margin: 2px 0 0;
	max-height: var(--fbmap-select-max-height);
	overflow-y: auto;
	padding: 0;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 1000;
}

.fbmap-select__option {
	cursor: pointer;
	font-size: var(--fbmap-font-size-sm);
	margin: 0;
	padding: var(--fbmap-select-option-padding);
}

.fbmap-select__option.is-selected {
	background: var(--fbmap-color-option-selected);
	font-weight: var(--fbmap-font-weight-bold);
}

.fbmap-select__option.is-active {
	background: var(--fbmap-color-option-active);
}

/*
 * Ausgeklappte Flächen, die per JS aus dem Filterdialog herausgehängt wurden.
 * Sie liegen weiterhin im Wurzelelement, damit die Custom Properties gelten.
 * Position und Breite setzt das JS, weil sie vom Auslöser abhängen.
 */
.fbmap-select__list.is-floating,
.fbmap-date__panel.is-floating {
	position: fixed;
	z-index: calc(var(--fbmap-sheet-z) + 10);
}

/* Eigenes Datumsfeld statt des Browser-Kalenders */

.fbmap-date {
	position: relative;
	width: var(--fbmap-control-width-date);
}

/* Das native Feld bleibt Wertspeicher, ist aber unsichtbar. */
.fbmap-date__native {
	height: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 0;
}

.fbmap-date__button {
	align-items: center;
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	cursor: pointer;
	display: flex;
	font-size: var(--fbmap-font-size-sm);
	gap: var(--fbmap-space-sm);
	justify-content: space-between;
	min-height: var(--fbmap-control-height);
	padding: var(--fbmap-control-padding);
	text-align: left;
	transition: background-color var(--fbmap-transition) ease-out;
	width: 100%;
}

.fbmap-date__button:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-date__button:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

.fbmap-date__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fbmap-date__value.is-placeholder {
	color: var(--fbmap-color-muted);
}

.fbmap-date__icon {
	align-items: center;
	color: var(--fbmap-color-muted);
	display: flex;
	flex: 0 0 auto;
}

.fbmap-date__panel {
	background: var(--fbmap-color-surface);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	box-shadow: var(--fbmap-select-shadow);
	display: none;
	left: 0;
	padding: var(--fbmap-space-sm);
	position: absolute;
	top: 100%;
	width: var(--fbmap-date-panel-width);
	z-index: 1000;
}

.fbmap-date__panel.is-open {
	display: block;
}

.fbmap-date__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--fbmap-space-xs);
}

.fbmap-date__title {
	font-size: var(--fbmap-font-size-sm);
	font-weight: var(--fbmap-font-weight-bold);
}

.fbmap-date__nav {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	cursor: pointer;
	display: flex;
	height: var(--fbmap-date-day-size);
	justify-content: center;
	padding: 0;
	transition: background-color var(--fbmap-transition) ease-out;
	width: var(--fbmap-date-day-size);
}

.fbmap-date__nav:hover {
	background: var(--fbmap-color-surface-alt);
}

.fbmap-date__nav:focus-visible,
.fbmap-date__day:focus-visible,
.fbmap-date__action:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 1px;
}

.fbmap-date__grid {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.fbmap-date__weekday {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-xs);
	font-weight: 400;
	padding: 0 0 var(--fbmap-space-xs);
	text-align: center;
}

.fbmap-date__cell {
	border: 0;
	padding: 1px;
	text-align: center;
}

.fbmap-date__day {
	background: none;
	border: var(--fbmap-border-width) solid transparent;
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	cursor: pointer;
	font-size: var(--fbmap-font-size-xs);
	height: var(--fbmap-date-day-size);
	transition: background-color var(--fbmap-transition) ease-out;
	width: 100%;
}

.fbmap-date__day:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-date__day.is-today {
	background: var(--fbmap-color-date-today);
	font-weight: var(--fbmap-font-weight-bold);
}

.fbmap-date__day.is-selected {
	background: var(--fbmap-color-accent);
	color: var(--fbmap-color-accent-text);
	font-weight: var(--fbmap-font-weight-bold);
}

.fbmap-date__foot {
	border-top: var(--fbmap-border-width) solid var(--fbmap-color-border);
	display: flex;
	justify-content: space-between;
	margin-top: var(--fbmap-space-xs);
	padding-top: var(--fbmap-space-xs);
}

.fbmap-date__action {
	background: none;
	border: 0;
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-focus);
	cursor: pointer;
	font-size: var(--fbmap-font-size-xs);
	padding: var(--fbmap-space-xs) var(--fbmap-space-sm);
}

.fbmap-date__action:hover {
	background: var(--fbmap-color-hover-surface);
}

/* Layout */

.fbmap-layout {
	display: grid;
	gap: var(--fbmap-gap);
	grid-template-columns: 1fr;
}

/* Jede Spalte trägt ihren eigenen Rahmen, seit das Raster am Wurzelelement sitzt. */
.fbmap-list-col {
	border: var(--fbmap-border-width) solid var(--fbmap-color-border);
	max-height: var(--fbmap-list-height);
	overflow-y: auto;
}

.fbmap-empty {
	color: var(--fbmap-color-muted);
	margin: 0;
	padding: var(--fbmap-space-md);
}

/* Liste */

.fbmap-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fbmap-card {
	background: var(--fbmap-color-surface);
	border-bottom: var(--fbmap-border-width) solid var(--fbmap-color-border);
	box-shadow: var(--fbmap-shadow-card);
	transition: background-color var(--fbmap-transition) ease-out;
}

/*
 * Der Link füllt die Kachel vollständig aus und übernimmt deren Innenabstand.
 * So ist die gesamte Fläche klickbar, ohne Overlay-Trick.
 */
.fbmap-card__link {
	color: var(--fbmap-color-text);
	display: flex;
	gap: var(--fbmap-space-sm);
	padding: var(--fbmap-space-md);
	text-decoration: none;
}

/*
 * Themes färben `a:hover` ein. Da der Link die ganze Kachel umschließt, würde
 * sich sonst jeder Inhalt ohne eigene Farbe mitfärben — etwa das Datum.
 * Die Hervorhebung übernimmt allein der Titel.
 */
.fbmap-card__link:hover,
.fbmap-card__link:focus,
.fbmap-card__link:active {
	color: var(--fbmap-color-text);
}

.fbmap-card:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-card__link:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: calc(var(--fbmap-focus-width) * -1);
}

.fbmap-card.is-active {
	background: var(--fbmap-color-hover-surface);
	box-shadow: var(--fbmap-shadow-card-active);
}

.fbmap-card.is-hidden {
	display: none;
}

/*
 * Die Trennlinie der letzten Kachel würde sich mit dem Rahmen der Spalte und
 * dem des Kastens zu einem dicken Balken stapeln.
 */
.fbmap-card:last-child {
	border-bottom: 0;
}

.fbmap-card__number {
	align-items: center;
	background: var(--fbmap-color-accent);
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-accent-text);
	display: flex;
	flex: 0 0 auto;
	font-size: var(--fbmap-font-size-sm);
	font-weight: var(--fbmap-font-weight-bold);
	height: var(--fbmap-badge-size);
	justify-content: center;
	width: var(--fbmap-badge-size);
}

.fbmap-card__body {
	min-width: 0;
}

.fbmap-card__title {
	color: var(--fbmap-color-heading);
	font-size: var(--fbmap-font-size-lg);
	font-weight: var(--fbmap-font-weight-bold);
	margin: 0 0 var(--fbmap-space-xs);
	transition: color var(--fbmap-transition) ease-out;
}

/* Nur der Titel färbt sich, nicht der ganze Kachelinhalt. */
.fbmap-card:hover .fbmap-card__title,
.fbmap-card.is-active .fbmap-card__title {
	color: var(--fbmap-color-accent);
}

.fbmap-card__address {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-sm);
	margin: 0 0 var(--fbmap-space-sm);
}

.fbmap-card__date {
	border: var(--fbmap-border-width) solid var(--fbmap-color-border-strong);
	color: var(--fbmap-color-text);
	border-radius: var(--fbmap-radius-sm);
	display: inline-block;
	font-size: var(--fbmap-font-size-sm);
	margin: 0;
	padding: var(--fbmap-space-xs) var(--fbmap-space-sm);
}

.fbmap-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fbmap-space-xs);
	list-style: none;
	margin: var(--fbmap-space-sm) 0 0;
	padding: 0;
}

.fbmap-card__tag {
	background: var(--fbmap-color-surface-alt);
	border-radius: var(--fbmap-radius-pill);
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-xs);
	padding: 0 var(--fbmap-space-sm);
}

.fbmap-card__meta {
	display: grid;
	gap: 0 var(--fbmap-space-sm);
	grid-template-columns: auto 1fr;
	margin: var(--fbmap-space-sm) 0 0;
}

.fbmap-card__meta-label {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-xs);
}

.fbmap-card__meta-value {
	font-size: var(--fbmap-font-size-sm);
	margin: 0;
}

.fbmap-card__hint {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-xs);
	margin: var(--fbmap-space-sm) 0 0;
}

/* Karte */

.fbmap-map-col {
	border: var(--fbmap-border-width) solid var(--fbmap-color-border);
	min-width: 0;
}

.fbmap-map {
	height: var(--fbmap-map-height);
	width: 100%;
}

/*
 * Viele Themes setzen für Bilder `max-width: 100%`, was Leaflets Kachelraster
 * zerreißt. Über Leaflets eigene Klassen zurückgesetzt, ohne !important.
 */
.fbmap-map .leaflet-tile,
.fbmap-map .leaflet-marker-icon {
	max-width: none;
}

.fbmap-map__fallback,
.fbmap-map__hint {
	color: var(--fbmap-color-muted);
	font-size: var(--fbmap-font-size-sm);
	margin: 0;
	padding: var(--fbmap-space-md);
}

/* Nummerierte Pins. Weiß auf #e2001a ergibt 4,9:1 und erfüllt damit 4.5:1. */

.fbmap-pin {
	background: var(--fbmap-color-accent);
	border-radius: var(--fbmap-radius-sm);
	box-shadow: var(--fbmap-shadow-pin);
	height: var(--fbmap-pin-size);
	transition: background-color var(--fbmap-transition) ease-out;
	width: var(--fbmap-pin-size);
}

.fbmap-pin__number {
	align-items: center;
	color: var(--fbmap-color-accent-text);
	display: flex;
	font-size: var(--fbmap-font-size-xs);
	font-weight: var(--fbmap-font-weight-bold);
	height: 100%;
	justify-content: center;
	width: 100%;
}

/* Weißer Ring, damit der aktive Pin auch über dunklen Kacheln auffällt. */
.fbmap-pin.is-active {
	background: var(--fbmap-color-accent-hover);
	box-shadow: var(--fbmap-pin-ring), var(--fbmap-shadow-pin);
}

.fbmap-pin:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

/* Adminhinweis bei unvollständiger Konfiguration */

.fbmap-notice {
	background: var(--fbmap-color-surface-alt);
	border-left: var(--fbmap-rule-width) solid var(--fbmap-color-accent);
	padding: var(--fbmap-space-md);
}

.fbmap-notice__text {
	margin: 0 0 var(--fbmap-space-xs);
}

.fbmap-notice__link {
	color: var(--fbmap-color-focus);
}

@media (prefers-reduced-motion: reduce) {
	.fbmap {
		--fbmap-sheet-transition: 1ms;
	}
}

/* Einspaltig auf schmalen Bildschirmen. Der Umschalter folgt in Schritt 7. */

/* ------------------------------------------------------------------
 * Kopfzeile: Volltextsuche und Zugang zu den Filtern
 * ---------------------------------------------------------------- */

.fbmap-toolbar {
	align-items: center;
	display: flex;
	gap: var(--fbmap-space-sm);
}

.fbmap-search {
	align-items: center;
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	display: flex;
	flex: 1 1 auto;
	gap: var(--fbmap-space-sm);
	min-width: 0;
	padding-left: var(--fbmap-space-sm);
}

.fbmap-search:focus-within {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

.fbmap-search__icon {
	align-items: center;
	color: var(--fbmap-color-muted);
	display: flex;
	flex: 0 0 auto;
}

/* Der Rahmen sitzt am Wrapper, damit das Lupensymbol mit im Feld liegt. */
.fbmap-search__input {
	background: none;
	border: 0;
	color: var(--fbmap-color-text);
	flex: 1 1 auto;
	font-size: var(--fbmap-font-size-sm);
	min-height: var(--fbmap-control-height);
	min-width: 0;
	padding: 0 var(--fbmap-space-sm) 0 0;
}

.fbmap-search__input:focus {
	outline: none;
}

.fbmap-filter-button {
	align-items: center;
	background: var(--fbmap-control-bg);
	border: var(--fbmap-border-width) solid var(--fbmap-control-border);
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-text);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	gap: var(--fbmap-space-sm);
	justify-content: center;
	min-height: var(--fbmap-control-height);
	padding: 0 var(--fbmap-space-md);
	transition: background-color var(--fbmap-transition) ease-out;
}

.fbmap-filter-button:hover {
	background: var(--fbmap-color-hover-surface);
}

.fbmap-filter-button:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

.fbmap-filter-button__icon {
	align-items: center;
	display: flex;
}

.fbmap-filter-button__label {
	font-size: var(--fbmap-font-size-sm);
}

/*
 * Suche, Filter-Knopf und Sortierung arbeiten ausschließlich im Browser.
 * Ohne JavaScript wären es tote Bedienelemente — dann bleiben sie verborgen
 * und das Filterformular steht offen unter der Liste.
 */
.fbmap:not(.is-enhanced) .fbmap-toolbar,
.fbmap:not(.is-enhanced) .fbmap-sort {
	display: none;
}

/* ------------------------------------------------------------------
 * Ergebniszeile: Zähler links, Sortierung rechts
 * ---------------------------------------------------------------- */

.fbmap-resultbar {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--fbmap-space-sm);
	justify-content: space-between;
	margin: var(--fbmap-space-lg) 0 var(--fbmap-space-md);
}

.fbmap-resultbar__count {
	border-bottom: var(--fbmap-rule-width) solid var(--fbmap-color-accent);
	color: var(--fbmap-color-heading);
	font-size: var(--fbmap-font-size-count);
	font-weight: var(--fbmap-font-weight-count);
	margin: 0;
	padding-bottom: var(--fbmap-space-xs);
}

.fbmap-sort {
	flex: 0 0 auto;
}

.fbmap-sort__select {
	width: var(--fbmap-control-width-sort);
}

.fbmap-sort .fbmap-select {
	width: var(--fbmap-control-width-sort);
}

/* ------------------------------------------------------------------
 * Filterdialog. Gilt auf allen Breiten, sobald JavaScript läuft —
 * unten als Sheet, ab 783px als zentriertes Modal.
 * ---------------------------------------------------------------- */

.fbmap.is-enhanced .fbmap-filters {
	box-shadow: var(--fbmap-sheet-shadow);
	display: grid;
	gap: var(--fbmap-space-sm);
	grid-template-columns: 1fr 1fr;
	overflow-y: auto;
	padding-bottom: var(--fbmap-space-md);
	position: fixed;
	visibility: hidden;
	z-index: var(--fbmap-sheet-z);
}

.fbmap.is-enhanced.is-filters-open .fbmap-filters {
	visibility: visible;
}

/*
 * `display: contents` an der Filterzeile löst deren eigenen Kasten auf, damit
 * ihre Gruppen und der Abschluss-Knopf im selben Raster liegen — nur so kommen
 * „Zurücksetzen" und „Ergebnisse anzeigen" in eine Zeile.
 */
.fbmap.is-enhanced .fbmap-filters__row {
	display: contents;
}

.fbmap.is-enhanced .fbmap-filters__group--place,
.fbmap.is-enhanced .fbmap-filters__group--dates {
	grid-column: 1 / -1;
}

.fbmap.is-enhanced .fbmap-filters__actions {
	align-self: stretch;
	border-left: 0;
	grid-column: 1;
	margin-left: 0;
	padding-left: 0;
}

.fbmap.is-enhanced .fbmap-filters__sheet-actions {
	align-self: stretch;
	display: block;
	grid-column: 2;
}

.fbmap.is-enhanced .fbmap-filters__reset,
.fbmap.is-enhanced .fbmap-filters__done {
	height: 100%;
	min-height: var(--fbmap-control-height);
	width: 100%;
}

/* Innerhalb der Gruppen füllen die Felder die Zeile aus. */
.fbmap.is-enhanced .fbmap-filters__place,
.fbmap.is-enhanced .fbmap-filters__dates {
	width: 100%;
}

.fbmap.is-enhanced .fbmap-filters__text,
.fbmap.is-enhanced .fbmap-filters__date,
.fbmap.is-enhanced .fbmap-filters__dates .fbmap-date {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

.fbmap.is-enhanced .fbmap-filters__group--facet .fbmap-select {
	width: 100%;
}

/* Umkreis teilt sich die Zeile mit dem Ortsfeld. */
.fbmap.is-enhanced .fbmap-filters__place .fbmap-select {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

/*
 * Der Kalender ist breiter als ein halbes Feld. Er richtet sich deshalb an
 * der ganzen Zeitraum-Gruppe aus und kann so nicht aus dem Dialog laufen.
 */
.fbmap.is-enhanced .fbmap-filters__group--dates {
	position: relative;
}

.fbmap.is-enhanced .fbmap-filters__dates .fbmap-date {
	position: static;
}

.fbmap.is-enhanced .fbmap-filters__group--dates .fbmap-date__panel {
	left: 0;
	right: 0;
	width: auto;
}

.fbmap.is-enhanced .fbmap-filters__divider {
	border-top: var(--fbmap-border-width) solid var(--fbmap-color-border);
	display: block;
	grid-column: 1 / -1;
	margin-top: var(--fbmap-space-xs);
}

.fbmap.is-enhanced .fbmap-filters__sheet-head {
	align-items: center;
	display: flex;
	grid-column: 1 / -1;
	justify-content: space-between;
}

.fbmap-filters__sheet-title {
	font-size: var(--fbmap-font-size-md);
	font-weight: var(--fbmap-font-weight-bold);
	margin: 0;
}

.fbmap-filters__close {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--fbmap-radius-pill);
	color: var(--fbmap-color-muted);
	cursor: pointer;
	display: flex;
	height: var(--fbmap-control-height);
	justify-content: center;
	/* Zieht das Symbol in die Ecke, statt es vom Innenabstand
	   nach innen schieben zu lassen. */
	margin: calc(var(--fbmap-space-xs) * -1) calc(var(--fbmap-space-xs) * -1) 0 0;
	padding: 0;
	transition: background-color var(--fbmap-transition) ease-out;
	width: var(--fbmap-control-height);
}

.fbmap-filters__close:hover {
	background: var(--fbmap-color-surface-alt);
	color: var(--fbmap-color-text);
}

.fbmap-filters__close:focus-visible,
.fbmap-filters__done:focus-visible {
	outline: var(--fbmap-focus-width) solid var(--fbmap-color-focus);
	outline-offset: 2px;
}

.fbmap-filters__done {
	background: var(--fbmap-color-accent);
	border: 0;
	border-radius: var(--fbmap-radius-sm);
	color: var(--fbmap-color-accent-text);
	cursor: pointer;
	font-size: var(--fbmap-font-size-sm);
	min-height: var(--fbmap-control-height);
	text-align: center;
	width: 100%;
}

/*
 * Der Hintergrund liegt zwar immer im Layout, ist geschlossen aber
 * unsichtbar UND klickdurchlässig — sonst würde er die Seite blockieren.
 * Nur so lässt sich das Ein- und Ausblenden überhaupt animieren.
 */
.fbmap.is-enhanced .fbmap-backdrop {
	background: var(--fbmap-backdrop-color);
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	transition:
		opacity var(--fbmap-sheet-transition) var(--fbmap-sheet-easing),
		visibility var(--fbmap-sheet-transition);
	visibility: hidden;
	z-index: calc(var(--fbmap-sheet-z) - 1);
}

.fbmap.is-enhanced.is-filters-open .fbmap-backdrop {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

/* Ab Tablet: Kopfzeile über der Liste, Karte daneben über die volle Höhe. */

@media (min-width: 783px) {
	/*
	 * Das Wurzelelement wird selbst zum Raster, damit Suche und Ergebniszeile
	 * genau an der Kartenkante enden. `display: contents` löst den
	 * Layout-Kasten auf, sodass Liste und Karte im selben Raster liegen.
	 */
	.fbmap {
		column-gap: var(--fbmap-gap);
		display: grid;
		grid-template-columns: var(--fbmap-list-width) var(--fbmap-map-width);
		grid-template-rows: auto auto minmax(0, 1fr);
	}

	.fbmap-toolbar {
		grid-column: 1;
		grid-row: 1;
	}

	.fbmap-resultbar {
		grid-column: 1;
		grid-row: 2;
	}

	.fbmap-layout {
		display: contents;
	}

	.fbmap-list-col {
		grid-column: 1;
		grid-row: 3;
	}

	/* Die Karte läuft neben Suche, Ergebniszeile und Liste durch. */
	.fbmap-map-col {
		grid-column: 2;
		grid-row: 1 / -1;
	}

	.fbmap-map {
		height: 100%;
	}

	/* Ohne JavaScript steht das Formular unter allem, über die volle Breite. */
	.fbmap:not(.is-enhanced) .fbmap-filters {
		grid-column: 1 / -1;
	}

	/* Zentriertes Modal. */
	.fbmap.is-enhanced .fbmap-filters {
		border-radius: var(--fbmap-modal-radius);
		left: 50%;
		max-height: var(--fbmap-modal-max-height);
		opacity: 0;
		top: 50%;
		transform: translate(-50%, -50%) scale(0.98);
		transition:
			opacity var(--fbmap-sheet-transition) var(--fbmap-sheet-easing),
			transform var(--fbmap-sheet-transition) var(--fbmap-sheet-easing),
			visibility var(--fbmap-sheet-transition);
		width: min(var(--fbmap-modal-width), calc(100vw - 48px));
	}

	.fbmap.is-enhanced.is-filters-open .fbmap-filters {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Einspaltig auf schmalen Bildschirmen, Filter als Sheet von unten. */

@media (max-width: 782px) {
	.fbmap {
		--fbmap-list-height: none;
		--fbmap-map-height: 360px;
	}

	.fbmap-layout {
		grid-template-columns: 1fr;
	}

	.fbmap-list-col {
		max-height: none;
	}

	.fbmap.is-enhanced .fbmap-filters {
		border-radius: var(--fbmap-sheet-radius) var(--fbmap-sheet-radius) 0 0;
		bottom: 0;
		left: 0;
		max-height: var(--fbmap-sheet-max-height);
		right: 0;
		transform: translateY(100%);
		transition:
			transform var(--fbmap-sheet-transition) var(--fbmap-sheet-easing),
			visibility var(--fbmap-sheet-transition);
	}

	.fbmap.is-enhanced.is-filters-open .fbmap-filters {
		transform: translateY(0);
	}

	.fbmap-mobile-bar {
		align-items: stretch;
		display: flex;
		gap: var(--fbmap-space-sm);
		margin: 0 0 var(--fbmap-space-sm);
	}

	.fbmap-view-toggle {
		display: flex;
		flex: 1 1 auto;
		margin: 0;
	}

	/*
	 * Der Umschalter ist erst per JS sichtbar. Ohne JavaScript greifen diese
	 * Klassen nicht und beide Bereiche bleiben untereinander lesbar.
	 */
	.fbmap.is-view-list .fbmap-map-col,
	.fbmap.is-view-map .fbmap-list-col {
		display: none;
	}
}