/**
 * Orphit native Kontaktpunkt-Formulare (Kontakt / Endorsement / Akustiker).
 *
 * Farben: ausschließlich Orphit26-Palette (primary/accent/cta/link/bg/surface/
 * surface2/text/textMuted) — keine freien Hex-Werte.
 * Typografie: Signika (Display) + Golos Text (Body), Skala 14 / 18 / 26 px.
 *
 * Layout-Härtung Kontaktseite (page-id-18): eine ruhige Inhalts-Spalte,
 * Formular als ruhige Fläche in --bg, Felder in Weiß.
 */

.orphit-lead-form {
	--orphit-lead-font-body: "Golos Text", system-ui, -apple-system, "Segoe UI",
		Roboto, sans-serif;
	--orphit-lead-font-display: "Signika", system-ui, sans-serif;
	--orphit-lead-step--1: 14px;
	--orphit-lead-step-0: 18px;
	--orphit-lead-step-1: 26px;
	--orphit-lead-hairline: color-mix(in srgb, var(--text, #25211f) 10%, transparent);
	--orphit-lead-field-border: color-mix(in srgb, var(--text, #25211f) 20%, transparent);

	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: var(--orphit-lead-font-body);
	font-size: var(--orphit-lead-step-0);
	line-height: 1.6;
	color: var(--text, #25211f);
}

.orphit-lead-form * {
	box-sizing: border-box;
}

.orphit-lead-form label,
.orphit-lead-form p {
	margin: 0;
}

/* Höhere Specificity als `.orphit-page__body p` (0,1,1) — sonst gewinnt
   die Fließtext-Skala und der Card-Titel bleibt bei 18px. */
.orphit-lead-form .orphit-lead-heading {
	font-family: var(--orphit-lead-font-display);
	font-weight: 600;
	font-size: var(--orphit-lead-step-1);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--text, #25211f);
	text-wrap: balance;
}

.orphit-lead-row--split {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.orphit-lead-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* Nur in der Zweispalten-Zeile gleichmäßig aufteilen — im Column-Flow führt
   ein flex-basis sonst zu 180px hohen Feldern (Riesenabstände). */
.orphit-lead-row--split > .orphit-lead-field {
	flex: 1 1 0;
	min-width: 0;
}

.orphit-lead-field > span {
	font-size: var(--orphit-lead-step--1);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--text, #25211f);
}

.orphit-lead-input {
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	border: 1px solid var(--orphit-lead-field-border);
	border-radius: 12px;
	background: #fff;
	font-family: var(--orphit-lead-font-body) !important;
	font-size: var(--orphit-lead-step-0) !important;
	line-height: 1.4;
	color: var(--text, #25211f);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.orphit-lead-input::placeholder {
	color: var(--textmuted, #5e676b);
	opacity: 0.8;
}

.orphit-lead-input:hover {
	border-color: color-mix(in srgb, var(--text, #25211f) 28%, transparent);
}

.orphit-lead-input:focus {
	outline: none;
	border-color: var(--cta, #36787b);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta, #36787b) 20%, transparent);
}

textarea.orphit-lead-input {
	min-height: 150px;
	padding-block: 14px;
	resize: vertical;
}

.orphit-lead-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: var(--orphit-lead-step--1);
	line-height: 1.5;
	margin-top: 2px;
	color: var(--text, #25211f);
	cursor: pointer;
}

.orphit-lead-consent input {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 3px;
	accent-color: var(--cta, #36787b);
}

.orphit-lead-submit {
	align-self: flex-start;
	margin-top: 6px;
	min-height: 54px;
	padding: 16px 36px;
	border: 0;
	border-radius: var(--radius-full, 999px);
	background: var(--cta, #36787b);
	color: var(--bg, #fff8f0);
	font-family: var(--orphit-lead-font-body) !important;
	font-weight: 600;
	font-size: var(--orphit-lead-step-0) !important;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.orphit-lead-submit:hover {
	background: color-mix(in srgb, var(--cta, #36787b) 86%, var(--text, #25211f));
	transform: translateY(-1px);
}

.orphit-lead-submit:active {
	transform: translateY(0);
}

.orphit-lead-submit:focus-visible {
	outline: 2px solid var(--cta, #36787b);
	outline-offset: 3px;
}

.orphit-lead-submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.orphit-lead-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.orphit-lead-status {
	margin: 0;
	font-size: var(--orphit-lead-step--1);
	min-height: 1.3em;
}

.orphit-lead-status.is-success {
	color: var(--cta, #36787b);
}

.orphit-lead-status.is-error {
	color: var(--text, #25211f);
	font-weight: 600;
}

/* Endorsement-Seite: Bricks-Container hat feste Höhe (200px) → Formular wird
   unten abgeschnitten. Auto-Höhe erzwingen. */
#brxe-qqhcxv {
	height: auto !important;
	min-height: 0 !important;
}

/* Auch hier Specificity gegen `.orphit-page__body p/a` absichern. */
.orphit-page__body .orphit-lead-whatsapp,
.orphit-lead-whatsapp {
	max-width: 640px;
	margin: 18px auto 0;
	font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--textmuted, #5e676b);
}

.orphit-page__body .orphit-lead-whatsapp a,
.orphit-lead-whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cta, #36787b);
	font-weight: 600;
	text-decoration: none;
}

.orphit-page__body .orphit-lead-whatsapp a:hover,
.orphit-lead-whatsapp a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.orphit-lead-whatsapp svg {
	width: 20px;
	height: 20px;
	flex: none;
}

/* ---------------------------------------------------------------------------
 * Kontaktseite (/kontakt/, page-id-18)
 *
 * Gutenberg-Seite ohne Bricks-Layout: eine zentrierte 680-px-Spalte,
 * Formular als Fläche in --bg mit Hairline + weichem Schatten,
 * WhatsApp-Zeile linksbündig darunter.
 * ------------------------------------------------------------------------- */

body.page-id-18 .orphit-page__body {
	max-width: 680px;
}

/* Mehr Luft zwischen H1 und Card — 24px wirkten gedrängt. */
body.page-id-18 .orphit-page__body > h1 {
	margin-block-end: 32px;
}

body.page-id-18 .orphit-page__body .orphit-lead-form {
	max-width: 100%;
	margin: 0;
	padding: clamp(22px, 3.2vw, 40px);
	background: var(--bg, #fff8f0);
	border: 1px solid var(--orphit-lead-hairline);
	border-radius: 20px;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--text, #25211f) 5%, transparent),
		0 18px 40px -20px color-mix(in srgb, var(--text, #25211f) 10%, transparent);
}

body.page-id-18 .orphit-page__body .orphit-lead-whatsapp {
	max-width: 100%;
	margin: 18px 0 0;
	text-align: left;
}

@media (max-width: 600px) {
	.orphit-lead-form {
		--orphit-lead-step-0: 16px;
		--orphit-lead-step-1: 22px;
		gap: 12px;
	}

	.orphit-lead-row--split {
		gap: 12px;
	}

	.orphit-lead-input {
		min-height: 50px;
		padding: 12px 15px;
	}

	.orphit-lead-submit {
		align-self: stretch;
		width: 100%;
		justify-content: center;
	}

	/* Statische Seiten laufen auf Mobile ohne horizontales Group-Padding —
	   ohne diesen Gutter klebt die Card am Viewport-Rand. */
	body.page-id-18 .orphit-page__body {
		padding-inline: 20px;
	}

	body.page-id-18 .orphit-page__body .orphit-lead-form {
		padding: 22px 18px;
		border-radius: 16px;
	}
}

@media (max-width: 480px) {
	/* Vorname/Nachname untereinander — 2 Spalten werden hier zu eng. */
	.orphit-lead-row--split {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}