/*
 * Kontakt — Formular (Embed). Schlanke Content-Area-Variante von kontakt-formular.css für
 * den Einsatz auf beliebigen anderen Seiten (nicht nur der Kontakt-Seite selbst): kein
 * Vollbild-Hintergrund, kein Glow, kein Nav-Clearing-Padding — stattdessen eine begrenzte,
 * kartenartige Fläche, die sich in normalen Seiten-Content einfügt.
 *
 * .nn-kf-row/.nn-kf-form-col/.nn-kf-info-col/.nn-kf-input/... (Formular + Info-Karte selbst)
 * werden bewusst NICHT hier neu definiert, sondern 1:1 aus kontakt-formular.css
 * wiederverwendet (global enqueued, siehe functions.php) — .nn-kfe deklariert nur dieselben
 * Custom-Property-Namen (--bg, --card-bg, --field-bg, ...) neu, auf die diese Klassen sich
 * stützen. Das hält beide Varianten visuell identisch, ohne die Komponenten-Regeln zu
 * duplizieren. Markup kommt aus inc/kontakt-form-markup.php, geteilt mit
 * patterns/kontakt-formular.php.
 */
.nn-kfe,
.nn-kfe *,
.nn-kfe *::before,
.nn-kfe *::after {
	box-sizing: border-box;
}

.nn-kfe {
	--bg: #eef1ee;
	--ink-on-paper: #12211a;
	--ink-on-paper-muted: #5c6d64;
	--jade: #288760;
	--card-bg: #ffffff;
	--card-shadow: rgba(18, 33, 26, 0.1);
	--field-bg: #ffffff;
	--field-border: #dfe8e2;
	--field-ink: #12211a;
	--field-placeholder: #8a9690;
	--danger: #b3413a;
	--danger-bg: #f7e9e8;

	background: var(--bg);
	color: var(--ink-on-paper);
	border-radius: 1.75rem;
	/* war 1200px — auf großen Screens zu knapp, ließ die Info-Karten-Headline auf drei
	   statt zwei Zeilen umbrechen (siehe .nn-kf-info-col in kontakt-formular.css, das ist
	   die eigentliche Breitenbremse, aber die brauchte hier erst mehr Platz zum Wachsen) */
	max-width: 1500px;
	margin: clamp(2rem, 6vh, 4rem) auto;
	padding: clamp(2rem, 5vw, 3.5rem);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .nn-kfe {
		--bg: #171b19;
		--ink-on-paper: #e7e9ec;
		--ink-on-paper-muted: #b0b5bf;
		--jade: #288760;
		--card-bg: #0b0c0c;
		--card-shadow: rgba(0, 0, 0, 0.5);
		--field-bg: #141815;
		--field-border: #2a332d;
		--field-ink: #e7e9ec;
		--field-placeholder: #6c7670;
		--danger: #e28983;
		--danger-bg: #2b1a19;
	}
}
html[data-theme="dark"] .nn-kfe {
	--bg: #171b19;
	--ink-on-paper: #e7e9ec;
	--ink-on-paper-muted: #b0b5bf;
	--jade: #288760;
	--card-bg: #0b0c0c;
	--card-shadow: rgba(0, 0, 0, 0.5);
	--field-bg: #141815;
	--field-border: #2a332d;
	--field-ink: #e7e9ec;
	--field-placeholder: #6c7670;
	--danger: #e28983;
	--danger-bg: #2b1a19;
}

/* Reihe selbst darf hier ihre volle .nn-kf-row-Breite ausnutzen (kein page-weites
   Full-Bleed-Bedürfnis mehr, .nn-kfe deckelt das schon über seine eigene max-width) */
.nn-kfe .nn-kf-row {
	width: 100%;
}