/* ==========================================================================
   Kontaktformular (Contact Form 7)
   Wrapper-Klassen "formular_feld" / "formular_zeile" kommen aus dem Formular-Markup
   selbst, CF7 ergänzt zusätzlich seine eigenen "wpcf7-*"-Klassen an den Feldern.
   ========================================================================== */

.formular_headline {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 18px;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-surface);
	margin: 0 0 12px;
}

.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.formular_zeile {
	display: flex;
	gap: 12px;
}

.formular_zeile .formular_feld {
	flex: 1 1 0;
}

.formular_zeile .formular_feld--schmal {
	flex: 0 0 140px;
}

.formular_feld {
	background-color: var(--color-surface);
	border-radius: 0px;
	padding: 12px 16px;
	/* Neutralisiert eine "Phantom-Zeile" durch Whitespace/Text-Knoten direkt im div (z. B.
	   Zeilenumbruch zwischen <div> und <label> im Markup), die sonst mit Divis geerbter
	   16px/1.7em-Body-Schrift eine unsichtbare ~27px hohe Extra-Zeile erzeugt. */
	font-size: 0;
	line-height: 0;
}

.formular_feld label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 18px;
	color: var(--color-primary);
	line-height: 1.3;
}

/* CF7 wickelt jedes Feld in einen eigenen Wrapper-Span — der ist standardmäßig
   "display:inline-block" mit eigener Zeilenhöhe und addiert unbemerkt Extra-Höhe,
   wenn man ihn nicht zurücksetzt. */
.formular_feld .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

/* CF7 reserviert für die Validierungs-Fehlermeldung (.wpcf7-not-valid-tip) auch dann Platz,
   wenn gerade kein Fehler aktiv ist — das erzeugt die überschüssige Leerfläche unten in der Box.
   CF7s eigenes JS blendet den Tip bei einem echten Validierungsfehler selbst wieder ein. */
.formular_feld .wpcf7-not-valid-tip {
	display: none;
	margin-top: 4px;
	font-size: 12px;
}

.formular_feld .wpcf7-form-control {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.2;
	color: #000000;
	background: transparent;
	border: none;
	border-radius: 2px;
	padding: 0;
	margin: 0;
	outline: none;
	box-shadow: none;
	width: 100%;
}

/* Nur bei Text-/E-Mail-/Tel-Feldern die Browser-Chrome entfernen — beim <select>
   appearance NICHT entfernen, sonst verschwindet der Dropdown-Pfeil komplett. */
.formular_feld input.wpcf7-form-control,
.formular_feld textarea.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
}

.formular_feld .wpcf7-textarea {
	min-height: 48px;
	resize: vertical;
}

.wpcf7-acceptance,
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

/* Der Abstand zwischen dem letzten Feld und der Datenschutz-Zeile kam im Kontaktformular (Footer)
   bisher zufällig aus Divis eigenem Standard-Absatzabstand auf dem umschließenden, automatisch
   generierten "<p>" (abhängig vom jeweiligen Divi-Modultyp, der das Formular umgibt — Footer nutzt
   ein "Code"-Modul, andere Platzierungen ggf. ein anderes) und war dadurch nicht überall gleich
   groß (live nachgemessen: Footer 24px, Widerrufsformular auf einer eigenen Seite dagegen nur
   12px, obwohl derselbe "gap" der Formular-Flexbox — vom Nutzer gemeldet). Hier deshalb explizit
   und unabhängig vom umgebenden Divi-Modul gesetzt, damit der Abstand überall wie im
   Kontaktformular aussieht. */
.wpcf7-form p:has(> .wpcf7-form-control-wrap > .wpcf7-acceptance) {
	margin-top: var(--space-3);
}

/* Keine eigene Schrift-/Farbregel mehr hier — der Datenschutz-Text soll überall wie normaler
   Fließtext aussehen (globale "p, span"-Regel in style.css: var(--font-body), var(--weight-light),
   var(--color-text)). Nur im Footer (dunkler Hintergrund) wird das explizit auf Weiß
   zurückgesetzt, siehe "footer.et-l--footer .wpcf7-acceptance .wpcf7-list-item-label" in
   footer.css. */

.wpcf7-submit {
	align-self: flex-start;
	background-color: var(--color-accent);
	color: var(--color-surface);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	padding: 12px 28px;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.wpcf7-submit:hover {
	background-color: var(--color-accent-hover);
}

/* Für Verlinkungen innerhalb von Formulartext (z. B. Datenschutzerklärung) — übernimmt per
   "inherit" automatisch Farbe/Schrift des umgebenden Texts, damit sie nicht separat gepflegt
   werden müssen und immer synchron bleiben, egal in welchem Textkontext der Link steht. */
.formular_link {
	color: inherit;
	font: inherit;
	text-decoration: underline;
}