/**
 * Sportbootschulen-Finder – modernes Frontend-Layout.
 *
 * Eigenständiges Stylesheet für die eingebettete Suche (Formidable-Filterformular +
 * Drupal-Views-Ergebnisse). Greift unabhängig davon, ob die ursprüngliche Formidable-
 * Basis-CSS geladen ist, und korrigiert die kaputten Layouts (Checkbox-Labels unter den
 * Boxen, vertikal gestapelte Pagination) und modernisiert das Erscheinungsbild.
 *
 * Farben/Schriften sind an das VDS-Branding angelehnt und über CSS-Variablen anpassbar.
 */

:root {
	--sbsf-primary: #0069b3;
	--sbsf-primary-dark: #004f87;
	--sbsf-accent: #ff3d4a;
	--sbsf-border: #dbe4ec;
	--sbsf-border-strong: #c2d2df;
	--sbsf-bg-soft: #f4f8fb;
	--sbsf-text: #1f2a37;
	--sbsf-muted: #5b6b7b;
	--sbsf-radius: 12px;
	--sbsf-radius-sm: 9px;
	--sbsf-shadow: 0 1px 2px rgba(16, 42, 67, .06), 0 8px 24px -12px rgba(16, 42, 67, .22);
	--sbsf-shadow-hover: 0 2px 4px rgba(16, 42, 67, .08), 0 16px 32px -14px rgba(16, 42, 67, .28);
}

/* ============================================================
   Filter-Formular
   ============================================================ */

.frm-show-form {
	font-family: inherit;
	color: var(--sbsf-text);
	line-height: 1.5;
}

/* Abstand der Filterspalte zur Ergebnisliste (nur auf breiteren Viewports) */
@media (min-width: 783px) {
	.frm-show-form {
		padding-right: 2.25rem;
	}
}

.frm-show-form .frm_form_fields,
.frm-show-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Überflüssige <br> im Formular entfernen (sorgen sonst für unruhige Abstände) */
.frm-show-form br {
	display: none;
}

.frm-show-form .frm_form_field {
	margin: 0 0 1.15rem;
}

.frm-show-form .frm_primary_label {
	display: block;
	margin: 0 0 .4em;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sbsf-muted);
}

/* Texteingaben & Selects */
.frm-show-form input[type="text"],
.frm-show-form input[type="search"],
.frm-show-form input[type="email"],
.frm-show-form input[type="number"],
.frm-show-form select {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: .52em .85em;
	line-height: 1.4;
	font-family: inherit;
	font-size: 1rem;
	color: var(--sbsf-text);
	background-color: #fff;
	border: 1px solid var(--sbsf-border);
	border-radius: var(--sbsf-radius-sm);
	box-shadow: inset 0 1px 2px rgba(16, 42, 67, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.frm-show-form select {
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .85em center !important;
	background-size: 1.15em 1.15em !important;
	cursor: pointer;
}

.frm-show-form input::placeholder {
	color: #9aa9b7;
}

.frm-show-form input:focus,
.frm-show-form select:focus {
	outline: none;
	border-color: var(--sbsf-primary);
	box-shadow: 0 0 0 3px rgba(0, 105, 179, .16);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbsf-primary) 16%, transparent);
}

/* Checkbox- / Radio-Gruppen: Optionen fließen horizontal, Label neben der Box */
.frm-show-form .frm_opt_container {
	display: flex;
	flex-wrap: wrap;
	gap: .35em .95em;
	margin: 0;
	padding: 0;
}

.frm-show-form .frm_checkbox,
.frm-show-form .frm_radio {
	display: flex;
	align-items: center;
	gap: .5em;
	width: auto;
	margin: 0;
	padding: 0;
}

.frm-show-form .frm_checkbox label,
.frm-show-form .frm_radio label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: .95rem;
	color: var(--sbsf-text);
	cursor: pointer;
	line-height: 1.3;
}

.frm-show-form .frm_checkbox input[type="checkbox"],
.frm-show-form .frm_radio input[type="radio"] {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--sbsf-primary);
	cursor: pointer;
}

/* Mehrspaltige Gruppen behalten ein ruhiges Raster */
.frm-show-form .frm_two_col .frm_opt_container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .4em .9em;
}

.frm-show-form .frm_five_col .frm_opt_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
	gap: .4em .7em;
}

/* Submit-/Reset-Buttons */
.frm-show-form .frm_submit {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin: .4rem 0 0;
	padding: 0;
}

.frm-show-form button[type="submit"],
.frm-show-form input[type="submit"],
.frm-show-form .frm_submit button,
.frm-show-form .frm_submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	padding: .8em 1.5em;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background-color: var(--sbsf-primary);
	border: 0;
	border-radius: var(--sbsf-radius-sm);
	box-shadow: var(--sbsf-shadow);
	cursor: pointer;
	transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}

.frm-show-form button[type="submit"]:hover,
.frm-show-form input[type="submit"]:hover,
.frm-show-form .frm_submit button:hover {
	background-color: var(--sbsf-primary-dark);
	box-shadow: var(--sbsf-shadow-hover);
}

.frm-show-form button[type="submit"]:active,
.frm-show-form input[type="submit"]:active,
.frm-show-form .frm_submit button:active {
	transform: translateY(1px);
}

/* "Zurücksetzen" als sekundärer Outline-Button */
.frm-show-form .frm_submit button.frm_button_reset,
.frm-show-form .frm_button_reset {
	color: var(--sbsf-primary) !important;
	-webkit-text-fill-color: var(--sbsf-primary) !important;
	background-color: #fff !important;
	border: 1px solid var(--sbsf-border) !important;
	box-shadow: none !important;
}

.frm-show-form .frm_submit button.frm_button_reset:hover,
.frm-show-form .frm_button_reset:hover {
	background-color: var(--sbsf-bg-soft) !important;
	border-color: var(--sbsf-primary) !important;
	color: var(--sbsf-primary-dark) !important;
	-webkit-text-fill-color: var(--sbsf-primary-dark) !important;
}

/* Honeypot sicher ausblenden */
.frm-show-form .frm_verify {
	position: absolute !important;
	left: -9999px !important;
}

/* ============================================================
   Ergebnisliste (Drupal-Views-Markup)
   ============================================================ */

.views-row .pagination,
.text-center .pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35em;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 2;
}

/* Jede Seitenzahl ist ein <a> in einem Wrapper-<div>. Da das Theme Links per
   !important (inkl. -webkit-text-fill-color) und festen Rahmen stylt, trägt der
   Wrapper-<div> die Box; der Link liefert Klickfläche + Text. */
.views-row .pagination > div,
.text-center .pagination > div {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.3em;
	height: 2.3em;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #fff !important;
	border: 1px solid var(--sbsf-border) !important;
	border-radius: 8px !important;
	overflow: hidden;
	transition: background-color .15s ease, border-color .15s ease;
}

.views-row .pagination > div > a,
.text-center .pagination > div > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 .6em;
	font-weight: 600;
	font-size: .95rem;
	color: var(--sbsf-primary) !important;
	-webkit-text-fill-color: var(--sbsf-primary) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
}

.views-row .pagination > div:hover,
.text-center .pagination > div:hover {
	background-color: var(--sbsf-bg-soft) !important;
	border-color: var(--sbsf-primary) !important;
}

/* Aktive Seite: gefüllt */
.views-row .pagination > div.active,
.text-center .pagination > div.active {
	background-color: var(--sbsf-primary) !important;
	border-color: var(--sbsf-primary) !important;
}

.views-row .pagination > div.active > a,
.text-center .pagination > div.active > a {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	cursor: default;
}

.pane-title {
	color: var(--sbsf-primary) !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	margin-block: 1rem !important;
	text-align: inherit !important;
}

/* Sortier-Dropdown der Views (z. B. "Name Segelschule"): floatet im Original nach
   rechts und überlappt dadurch die erste Karte – hier rechtsbündig mit Abstand. */
.pane-views-panes select[name="order"] {
	float: none !important;
	display: block;
	width: fit-content;
	max-width: 100%;
	min-width: 200px;
	margin: 0 0 1.25rem auto;
	box-sizing: border-box;
	padding: .5em 2.4em .5em .85em;
	font-family: inherit;
	font-size: .95rem;
	color: var(--sbsf-text) !important;
	-webkit-text-fill-color: var(--sbsf-text) !important;
	background-color: #fff !important;
	border: 1px solid var(--sbsf-border) !important;
	border-radius: var(--sbsf-radius-sm) !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .85em center !important;
	background-size: 1.15em 1.15em !important;
	cursor: pointer;
}

/* Schul-Karten – enhancements on top of vds2/style.css (float layout from remote markup). */
.brxe-shortcode iframe[src*="vds2/map"],
.map-canvas iframe,
iframe[src*="vds2/map"] {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: min(650px, 60vh);
	min-height: 240px;
	border: 0;
}

.map-canvas {
	border-radius: var(--sbsf-radius) !important;
	overflow: hidden !important;
	max-width: 100%;
}

.schule {
	border-radius: var(--sbsf-radius) !important;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.schule::after {
	content: "";
	display: table;
	clear: both;
}

.schule .views-field-title .field-content,
.schule .views-field-title {
	color: var(--sbsf-primary-dark);
}

.schule a {
	color: var(--sbsf-primary) !important;
	-webkit-text-fill-color: var(--sbsf-primary) !important;
	text-decoration: none;
	word-break: break-word;
}

.schule a:hover {
	color: var(--sbsf-accent) !important;
	-webkit-text-fill-color: var(--sbsf-accent) !important;
	text-decoration: underline;
}

/* ============================================================
   Responsiv
   ============================================================ */

.panel-pane,
.pane-content,
.view,
.view-content,
.frm-show-form,
.brxe-shortcode,
.sbsf-fragment {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/*
 * Bricks builder pages often fix filter/results columns (e.g. 33% / 67%) without a
 * mobile breakpoint – see sportbootschulen.de/schulsuche #brxe-gkenut.
 */
@media (max-width: 991px) {
	.brxe-section:has(.sbsf-fragment) {
		overflow-x: clip;
	}

	.brxe-container:has(.sbsf-fragment),
	body.sbsf-search-page #brxe-gkenut {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		row-gap: 2rem;
	}

	.brxe-block:has(.sbsf-fragment),
	body.sbsf-search-page #brxe-oyazmn,
	body.sbsf-search-page #brxe-zhjcme {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
	}

	.sbsf-fragment--form .frm_two_col .frm_opt_container {
		grid-template-columns: 1fr;
	}

	.sbsf-fragment--form .frm_five_col .frm_opt_container {
		grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
	}
}

/* Remote result cards ship inline width/min-width/float – stack on narrow screens. */
@media (max-width: 782px) {
	.schule > div {
		width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		display: block !important;
		box-sizing: border-box;
	}

	.schule > img {
		float: none !important;
		display: block;
		max-width: 45% !important;
		max-height: 90px !important;
		margin: 0 0 .65rem !important;
	}

	.pane-views-panes select[name="order"] {
		float: none !important;
		width: 100%;
		min-width: 0;
		margin: 0 0 1rem;
	}
}

@media (max-width: 600px) {
	.schule > img {
		max-width: 60% !important;
	}

	.frm-show-form .frm_five_col .frm_opt_container {
		grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
	}
}