/**
 * Mercure Kontaktformular — Gravity-Forms-Styling-Override.
 *
 * Ersetzt das frühere FluentForm-Styling (FF wurde durch Gravity Forms abgelöst).
 * Bringt das GF-„Orbital"-Theme (GF 2.10) auf den Mercure-Look: Montserrat-Schrift,
 * paper-farbene Inputs, dezente Borders, Lila-Akzent (Fokus/Required/Submit),
 * 2px-Radius, Spectral-Success-Box.
 *
 * Scope: `.contact-form .gform_wrapper` — `.contact-form` ist der Wrapper aus den
 * Templates (front-page, page-en, page-kontakt, page-en-contact), in dem
 * [gravityform id="1"] gerendert wird. Tokens via theme.json-Presets (--wp--preset--*).
 *
 * Hinweis zu !important: Das Orbital-Theme definiert seine CSS-Variablen + Control-
 * Styles mit hoher Spezifität. Wir überschreiben daher (a) die GF-Theme-Variablen
 * (damit GF selbst Mercure-Werte rendert) und (b) die umkämpften Eigenschaften
 * gezielt mit !important. Das ist bei GF-Theming üblich und bewusst.
 */

/* Anker-Ziel „Zum Formular" (von /kontakt/ + /en/contact/): unter dem
 * Sticky-Header landen (gleiche 96px-Konvention wie andere Anker im Theme). */
#kontakt-formular {
	scroll-margin-top: 96px;
}

/* ── GF-Theme-Variablen auf Mercure ummappen ─────────────────────────────
 * WICHTIG: auf der `.gform-theme--framework`-Ebene setzen (GF definiert seine
 * Variablen dort/später mit dieser Spezifität — ein bloßes `.gform_wrapper`
 * verliert). Damit rendert GF Inputs (paper-BG), Fokus und Akzent selbst in
 * Mercure-Werten, ohne Per-Element-Spezifitätskämpfe. */
.contact-form .gform_wrapper.gform-theme--framework {
	--gf-color-primary: #8D74AE !important;
	--gf-color-primary-rgb: 141, 116, 174 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: #7a6299 !important;
	--gf-ctrl-bg-color: #FAF6EF !important;
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--white, #ffffff) !important;
	--gf-ctrl-border-color: rgba(20, 16, 12, 0.10) !important;
	--gf-ctrl-border-color-hover: #8D74AE !important;
	--gf-ctrl-border-color-focus: #8D74AE !important;
	--gf-ctrl-radius: 2px !important;
}
.contact-form .gform_wrapper {
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	color: var(--wp--preset--color--ink, #2B2826);
}

/* ── Labels ─────────────────────────────────────────────────────────── */
.contact-form .gform_wrapper .gfield_label,
.contact-form .gform_wrapper legend.gfield_label {
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(43, 40, 38, 0.78);
	margin-bottom: 8px;
}

/* "(Required)" dezent in Mercure-Lila statt GF-Rot, ohne Versalien-Spacing */
.contact-form .gform_wrapper .gfield_required,
.contact-form .gform_wrapper .gfield_required .gfield_required_text {
	color: var(--wp--preset--color--purple-hover, #8D74AE) !important;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* ── Inputs / Selects / Textarea ───────────────────────────────────── */
.contact-form .gform_wrapper input[type="text"],
.contact-form .gform_wrapper input[type="email"],
.contact-form .gform_wrapper input[type="tel"],
.contact-form .gform_wrapper input[type="url"],
.contact-form .gform_wrapper input[type="number"],
.contact-form .gform_wrapper input[type="date"],
.contact-form .gform_wrapper select,
.contact-form .gform_wrapper textarea {
	width: 100%;
	height: auto;
	min-height: 0;
	background: #FAF6EF !important;
	border: 1px solid rgba(20, 16, 12, 0.10) !important;
	border-radius: 2px !important;
	padding: 14px 16px !important;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink, #2B2826) !important;
	box-shadow: none;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}

.contact-form .gform_wrapper textarea {
	min-height: 140px;
	resize: vertical;
}

.contact-form .gform_wrapper input::placeholder,
.contact-form .gform_wrapper textarea::placeholder {
	color: rgba(20, 16, 12, 0.40);
}

.contact-form .gform_wrapper input:focus,
.contact-form .gform_wrapper select:focus,
.contact-form .gform_wrapper textarea:focus,
.contact-form .gform_wrapper input:focus-visible,
.contact-form .gform_wrapper select:focus-visible,
.contact-form .gform_wrapper textarea:focus-visible {
	border-color: var(--wp--preset--color--purple-hover, #8D74AE) !important;
	background: var(--wp--preset--color--white, #ffffff) !important;
	box-shadow: 0 0 0 3px rgba(141, 116, 174, 0.12) !important;
	outline: none;
}

/* Control-Hintergrund: GF leitet ihn über eine verschachtelte Variablen-Kette
 * (--gf-ctrl-bg-color → --gf-color-in-ctrl) ab, die sich auf Klassen-Ebene nicht
 * zuverlässig überschreiben lässt. Daher setzen wir BG (+ Fokus) direkt per
 * Form-ID — ID-Spezifität schlägt alle GF-Klassenregeln. Form-ID = 1 auf allen
 * Seiten (Kontaktformular). */
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="date"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
	background-color: #FAF6EF !important;
}
#gform_wrapper_1 input[type="text"]:focus,
#gform_wrapper_1 input[type="email"]:focus,
#gform_wrapper_1 input[type="tel"]:focus,
#gform_wrapper_1 input[type="url"]:focus,
#gform_wrapper_1 input[type="number"]:focus,
#gform_wrapper_1 input[type="date"]:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
	background-color: var(--wp--preset--color--white, #ffffff) !important;
	border-color: var(--wp--preset--color--purple-hover, #8D74AE) !important;
}

/* ── Field-Gruppen-Spacing ──────────────────────────────────────────── */
.contact-form .gform_wrapper .gfield {
	margin-bottom: 18px;
}

/* Beschreibungs-/Hilfetexte + Zeichenzähler dezent */
.contact-form .gform_wrapper .gfield_description,
.contact-form .gform_wrapper .ginput_counter {
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(20, 16, 12, 0.55);
	font-style: italic;
}

/* ── Submit-Button (Mercure-Lila) ───────────────────────────────────── */
.contact-form .gform_wrapper .gform_footer input[type="submit"],
.contact-form .gform_wrapper .gform_footer button,
.contact-form .gform_wrapper input.gform_button,
.contact-form .gform_wrapper button.gform_button {
	background: var(--wp--preset--color--purple, #A790C4) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
	border: none !important;
	padding: 16px 36px !important;
	width: auto !important;
	min-height: 0 !important;
	font-family: var(--wp--preset--font-family--montserrat, 'Montserrat', sans-serif) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	border-radius: 2px !important;
	transition: background 0.25s ease, transform 0.12s ease, box-shadow 0.25s ease;
	box-shadow: 0 8px 22px rgba(141, 116, 174, 0.22) !important;
	/* GF macht den Submit zum Flex-Child im Flex-Footer und streckt ihn sonst
	   vertikal (zu hoher Button). align-self + height verhindern das Strecken. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: flex-start !important;
	height: auto !important;
	line-height: 1.2 !important;
}
/* Footer nicht als streckender Flex-Container wirken lassen */
.contact-form .gform_wrapper .gform_footer,
.contact-form .gform_wrapper .gform-footer {
	display: block !important;
	margin-top: 4px;
}

.contact-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact-form .gform_wrapper .gform_footer button:hover,
.contact-form .gform_wrapper input.gform_button:hover,
.contact-form .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.contact-form .gform_wrapper input.gform_button:focus-visible {
	background: var(--wp--preset--color--purple-hover, #8D74AE) !important;
	box-shadow: 0 12px 28px rgba(141, 116, 174, 0.40) !important;
	outline: none;
}

.contact-form .gform_wrapper .gform_footer input[type="submit"]:active,
.contact-form .gform_wrapper input.gform_button:active {
	transform: translateY(1px);
}

/* ── Error-State (inline) ───────────────────────────────────────────── */
.contact-form .gform_wrapper .gfield_error input,
.contact-form .gform_wrapper .gfield_error select,
.contact-form .gform_wrapper .gfield_error textarea {
	border-color: #c2454a !important;
	background: #fff !important;
}
.contact-form .gform_wrapper .gfield_validation_message,
.contact-form .gform_wrapper .validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 500;
	color: #c2454a;
}
/* GF-Validierungs-Summary oben am Formular */
.contact-form .gform_wrapper .gform_validation_errors {
	border-radius: 2px;
	box-shadow: none;
}

/* ── Confirmation / Success ─────────────────────────────────────────── */
.contact-form .gform_confirmation_message,
.contact-form .gform_wrapper .gform_confirmation_message,
.contact-form .gform_confirmation_wrapper {
	padding: 28px 32px;
	border: 1px solid rgba(141, 116, 174, 0.30);
	background: rgba(141, 116, 174, 0.06);
	border-radius: 2px;
	color: var(--wp--preset--color--ink, #2B2826);
	font-family: var(--wp--preset--font-family--spectral, 'Spectral', Georgia, serif);
	font-size: 16px;
	line-height: 1.65;
	font-style: italic;
}

/* ── Responsive: Mobile ─────────────────────────────────────────────── */
@media (max-width: 720px) {
	.contact-form .gform_wrapper input[type="text"],
	.contact-form .gform_wrapper input[type="email"],
	.contact-form .gform_wrapper input[type="tel"],
	.contact-form .gform_wrapper input[type="number"],
	.contact-form .gform_wrapper input[type="date"],
	.contact-form .gform_wrapper select,
	.contact-form .gform_wrapper textarea {
		font-size: 16px !important; /* verhindert iOS-Zoom beim Fokus */
		padding: 14px 14px !important;
	}
	.contact-form .gform_wrapper .gform_footer input[type="submit"],
	.contact-form .gform_wrapper .gform_footer button,
	.contact-form .gform_wrapper input.gform_button {
		width: 100% !important;
		padding: 18px 24px !important;
		display: block;
	}
}