/*
 * Filet & Freunde – Bausteine für alle Seiten mit „Neues Designsystem“
 *
 * Karte (.ff-map), Formulare (WPForms) und Complianz-Rechtstexte. Verhalten der Karte:
 * assets/js/komponenten.js.
 */

/* =================================================================
 * Karte (.ff-map): OpenStreetMap, Bedienung erst nach Klick
 * Markup: siehe README („Karte“).
 * ============================================================== */
.ff-map {
	position: relative;
	aspect-ratio: 1728 / 430;
	background-color: #111111;
}

.ff-map__inner {
	position: absolute;
	inset: 0;
	filter: grayscale(1) invert(0.92) contrast(0.85) brightness(0.9);
}

.ff-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ff-map .ff-map__shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.ff-map__hint {
	padding: 14px 26px;
	border-radius: 15px 0 15px 0;
	background-color: rgba(10, 10, 10, 0.82);
	color: var(--ff-creme);
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
}

.ff-map__shield:hover .ff-map__hint,
.ff-map__shield:focus-visible .ff-map__hint {
	opacity: 1;
}

.ff-map.is-live .ff-map__shield {
	display: none;
}

@media (max-width: 1024px) {
	.ff-map {
		aspect-ratio: 3 / 2;
	}
}

/* =================================================================
 * Formulare (WPForms, Stil „Modern“)
 * Farben über die WPForms-Variablen, Schrift und Maße über die
 * FF-Schriften. Größen-Variablen setzt WPForms pro Formular mit der ID
 * (#wpforms-110), deshalb Maße direkt mit stärkerem Selektor.
 * ============================================================== */
.ff-designsystem div.wpforms-container-full {
	--wpforms-field-background-color: rgba(252, 250, 243, 0.04);
	--wpforms-field-border-color: rgba(252, 250, 243, 0.24);
	--wpforms-field-border-color-spare: rgba(252, 250, 243, 0.24);
	--wpforms-field-text-color: var(--ff-creme);
	--wpforms-field-menu-color: var(--ff-schwarz);
	--wpforms-label-color: var(--ff-creme);
	--wpforms-label-sublabel-color: rgba(252, 250, 243, 0.6);
	--wpforms-label-error-color: #e3a28f;
	--wpforms-button-background-color: #ffffff;
	--wpforms-button-border-color: #ffffff;
	--wpforms-button-text-color: var(--ff-schwarz);
	margin: 0;
}

/* Feldbeschriftung wie Label/Kleintext */
.ff-designsystem div.wpforms-container-full .wpforms-field-label {
	margin-bottom: 8px;
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: var(--e-global-typography-fflab-font-size);
	font-weight: var(--e-global-typography-fflab-font-weight);
	line-height: var(--e-global-typography-fflab-line-height);
	letter-spacing: var(--e-global-typography-fflab-letter-spacing);
	text-transform: var(--e-global-typography-fflab-text-transform);
}

.ff-designsystem div.wpforms-container-full .wpforms-field-sublabel {
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: 13px;
}

/* Eingabefelder: Fließtext, 48 px hoch, eckig */
.ff-designsystem div.wpforms-container-full :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
	height: auto;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 0;
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: var(--e-global-typography-fftxt-font-size);
	line-height: var(--e-global-typography-fftxt-line-height);
}

.ff-designsystem div.wpforms-container-full .wpforms-form textarea {
	height: 160px;
	min-height: 160px;
	padding: 12px 16px;
	border-radius: 0;
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: var(--e-global-typography-fftxt-font-size);
	line-height: var(--e-global-typography-fftxt-line-height);
}

/* Felder über die ganze Spaltenbreite (WPForms „Mittel“ = 60 %) */
.ff-designsystem div.wpforms-container-full .wpforms-form .wpforms-field-medium {
	max-width: 100%;
}

.ff-designsystem div.wpforms-container-full :is(input, select, textarea):focus {
	border-color: var(--ff-braun);
	box-shadow: 0 0 0 1px var(--ff-braun);
}

/* Absenden-Button wie .ff-btn */
.ff-designsystem div.wpforms-container-full .wpforms-submit-container {
	margin-top: var(--ff-abstand-button);
}

.ff-designsystem div.wpforms-container-full button[type="submit"] {
	height: auto;
	min-width: 240px;
	padding: 18px 28px;
	border-radius: 15px 0 15px 0;
	font-family: var(--e-global-typography-ffbtn-font-family), sans-serif;
	font-size: var(--e-global-typography-ffbtn-font-size);
	font-weight: var(--e-global-typography-ffbtn-font-weight);
	line-height: var(--e-global-typography-ffbtn-line-height);
	letter-spacing: var(--e-global-typography-ffbtn-letter-spacing);
	text-transform: var(--e-global-typography-ffbtn-text-transform);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.ff-designsystem div.wpforms-container-full button[type="submit"]:hover,
.ff-designsystem div.wpforms-container-full button[type="submit"]:focus-visible {
	border-color: var(--ff-braun);
	background-color: var(--ff-braun);
	color: var(--ff-creme);
}

/* Zusatz an einer Feldbeschriftung (komponenten.js: Buchungsformular) */
.ff-designsystem .ff-formhinweis {
	margin-left: 8px;
	color: var(--ff-braun);
}

/* =================================================================
 * Rechtstexte von Complianz (Shortcode [cmplz-document], z. B.
 * Cookie-Richtlinie). Complianz setzt eigene Größen mit der ID
 * #cmplz-document (Text 14 px, H2 22 px, 800 px breit). Hier die
 * FF-Werte wie bei Impressum/Datenschutz; das Raster der Cookie-Liste
 * bleibt von Complianz.
 * ============================================================== */
.ff-designsystem #cmplz-document {
	max-width: 760px;
	margin: 0;
	color: inherit;
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: var(--e-global-typography-fftxt-font-size);
	line-height: var(--e-global-typography-fftxt-line-height);
}

.ff-designsystem #cmplz-document :is(div, p, li, summary, a) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ff-designsystem #cmplz-document h2 {
	margin: 64px 0 var(--ff-abstand-titel);
	font-family: var(--e-global-typography-ffh2-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh2-font-size);
	font-weight: var(--e-global-typography-ffh2-font-weight);
	line-height: var(--e-global-typography-ffh2-line-height);
	letter-spacing: var(--e-global-typography-ffh2-letter-spacing);
	text-transform: var(--e-global-typography-ffh2-text-transform);
}

.ff-designsystem #cmplz-document > h2:first-child {
	margin-top: 0;
}

.ff-designsystem #cmplz-document h3,
.ff-designsystem #cmplz-document .cmplz-dropdown summary div h3 {
	margin: 0;
	font-family: var(--e-global-typography-ffh3-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh3-font-size);
	font-weight: var(--e-global-typography-ffh3-font-weight);
	line-height: var(--e-global-typography-ffh3-line-height);
}

.ff-designsystem #cmplz-document h4 {
	margin: 24px 0 8px;
	font-family: var(--e-global-typography-ffh4-font-family), sans-serif;
	font-size: var(--e-global-typography-ffh4-font-size);
	font-weight: var(--e-global-typography-ffh4-font-weight);
	line-height: var(--e-global-typography-ffh4-line-height);
}

.ff-designsystem #cmplz-document h5 {
	margin: 16px 0 4px;
	font-family: var(--e-global-typography-fflab-font-family), sans-serif;
	font-size: var(--e-global-typography-fflab-font-size);
	font-weight: var(--e-global-typography-fflab-font-weight);
	letter-spacing: var(--e-global-typography-fflab-letter-spacing);
	text-transform: var(--e-global-typography-fflab-text-transform);
	color: var(--ff-braun);
}

.ff-designsystem #cmplz-document p + p {
	margin-top: 1em;
}

.ff-designsystem #cmplz-document a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 0.2em;
}

.ff-designsystem #cmplz-document a:hover,
.ff-designsystem #cmplz-document a:focus-visible {
	color: var(--ff-braun);
}

/* Aufklappbare Dienste: wie der Hinweiskasten (.ff-hinweis) */
.ff-designsystem #cmplz-document .cmplz-dropdown {
	margin-top: 16px;
	border: 1px solid rgba(165, 120, 101, 0.4);
	background-color: rgba(252, 250, 243, 0.04);
}

.ff-designsystem #cmplz-document .cmplz-dropdown summary {
	margin: 0;
	padding: 16px 24px;
	background-color: transparent;
	color: inherit;
}

.ff-designsystem #cmplz-document .cmplz-dropdown > div {
	padding: 0 24px 24px;
}

/* Cookie-Liste: Complianz zeichnet die Linien mit hellem Raster-Grund
   und weißen Zellen, auf Schwarz wäre der Text nicht lesbar. */
.ff-designsystem #cmplz-document .cmplz-dropdown .cookies-per-purpose {
	margin: 0 24px 24px;
	padding: 0;
	border-color: rgba(165, 120, 101, 0.4);
	background-color: rgba(165, 120, 101, 0.4);
}

.ff-designsystem #cmplz-document .cookies-per-purpose > div {
	background-color: var(--ff-schwarz);
}

.ff-designsystem #cmplz-document .cookies-per-purpose > :is(.name-header, .retention-header, .function-header) {
	background-color: #141414;
}

.ff-designsystem #cmplz-document .cookies-per-purpose h5 {
	margin: 0;
}

.ff-designsystem #cmplz-document .cmplz-category-header {
	background-color: transparent;
}

.ff-designsystem #cmplz-document .cookies-per-purpose > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.ff-designsystem #cmplz-document .cmplz-dropdown summary {
		padding: 16px;
	}

	.ff-designsystem #cmplz-document .cmplz-dropdown > div {
		padding: 0 16px 16px;
	}

	.ff-designsystem #cmplz-document .cmplz-dropdown .cookies-per-purpose {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		margin: 0 16px 16px;
	}

	.ff-designsystem #cmplz-document .cookies-per-purpose > div {
		padding: 12px;
	}
}