/**
 * Pangea Leads – Formular-Styles.
 *
 * Struktur und Farben stammen aus dem Designentwurf der Landingpages, die
 * Typografie kommt vollständig vom Theme:
 *
 *   - keine fest verdrahtete Schrift; es gilt --pangea-font (Standard: inherit)
 *   - kein Versalsatz, keine Sperrung
 *   - Schriftgrößen nur relativ (em), damit sie mit dem Theme skalieren
 *
 * Alles ist unter .pangea-form-section gescoped, damit Klassennamen wie
 * .field oder .chip nicht mit dem Theme kollidieren.
 * Der Eckenradius kommt aus Pangea Leads → Einstellungen (--pangea-radius).
 */

.pangea-form-section {
	--forest: #0b1b03;
	--lime: #d9ff00;
	--bronze: #7b7763;
	--soft2: #e4e2df;
	--soft3: #eeedea;
	--white: #ffffff;
	--linie: rgba(11, 27, 3, .22);
	--cardpad: clamp(26px, 3vw, 40px);
	--pangea-radius: 8px;

	color: var(--forest);
}

.pangea-form-section *,
.pangea-form-section *::before,
.pangea-form-section *::after {
	box-sizing: border-box;
}

/*
 * Schriftart: --pangea-font wird vom Plugin gesetzt (Pangea Leads →
 * Darstellung). Ohne Auswahl gilt "inherit" — dann benutzt das ganze Formular
 * die Schrift des umgebenden Textes.
 *
 * Bewusst als Sternchen-Regel mit !important: Themes setzen Schriften auf
 * einzelnen Elementen (h3, label, input, button …). Nennt man diese Elemente
 * hier ebenfalls einzeln, entscheidet die Ladereihenfolge — dann passen
 * manche Felder und andere nicht. So gilt im Formular garantiert eine Schrift.
 * Elemente mit Icon-Klassen bleiben ausgenommen, damit Icon-Schriften des
 * Themes weiter funktionieren.
 */
.pangea-form-section,
.pangea-form-section *:not(i):not([class*="icon"]):not([class^="fa"]) {
	font-family: var(--pangea-font, inherit) !important;
}

/* ---------- Layout ---------- */
.pangea-form-section .form-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.pangea-form-section .form-grid > * {
	min-width: 0;
}

.pangea-form-section .form-single {
	max-width: 760px;
	margin: 0 auto;
}

/* ---------- Linke Spalte ---------- */
.pangea-form-section .eyebrow {
	margin: 0 0 18px;
	color: #4a5540;
	display: flex;
	align-items: center;
	gap: 12px;
}

.pangea-form-section .eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .35;
}

.pangea-form-section .form-side h2 {
	margin: 0 0 20px;
}

.pangea-form-section .lede {
	max-width: 60ch;
	margin: 0;
	color: #2c3a24;
}

.pangea-form-section .side-list {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.pangea-form-section .side-list li {
	display: flex;
	gap: 13px;
	color: #3f4b36;
}

.pangea-form-section .side-list i {
	width: 14px;
	height: 3px;
	background: var(--forest);
	flex: none;
	margin-top: .65em;
}

.pangea-form-section .callout {
	background: var(--forest);
	color: var(--soft3);
	padding: 24px 26px;
	margin-top: 32px;
	border-radius: var(--pangea-radius, 8px);
}

.pangea-form-section .callout p {
	margin: 0;
	color: #c2cdb4;
}

/* ---------- Formularkarte ---------- */
.pangea-form-section .form-card {
	background: var(--white);
	padding: var(--cardpad);
	border-radius: var(--pangea-radius, 8px);
	/* Sicherheitsnetz: nichts darf seitlich aus der Karte laufen. */
	overflow: hidden;
}

.pangea-form-section .fblock + .fblock {
	margin-top: 30px;
	padding-top: 28px;
	border-top: 1px solid rgba(11, 27, 3, .12);
}

/* Der Optional-Block läuft seitlich bis an die Kartenkante, nach unten nicht —
   sonst klebt der Absenden-Button an der grauen Fläche. */
.pangea-form-section .fblock.optional {
	background: var(--soft3);
	margin: 30px calc(-1 * var(--cardpad)) 0;
	padding: 28px var(--cardpad);
	border-top: 2px dashed rgba(11, 27, 3, .2);
}

.pangea-form-section .fblock.optional:last-child {
	margin-bottom: calc(-1 * var(--cardpad));
	padding-bottom: var(--cardpad);
}

.pangea-form-section .fhead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.pangea-form-section .fhead h3 {
	margin: 0;
}

.pangea-form-section .opt-tag {
	font-size: .7em;
	background: var(--bronze);
	color: var(--white);
	padding: 3px 8px;
	border-radius: var(--pangea-radius, 8px);
	white-space: nowrap;
}

.pangea-form-section .fnote {
	font-size: .85em;
	color: #5c6650;
	margin: 0 0 20px;
}

/* ---------- Felder ---------- */
.pangea-form-section .frow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.pangea-form-section .frow.full {
	grid-template-columns: 1fr;
}

.pangea-form-section .frow > * {
	min-width: 0;
}

.pangea-form-section .field label,
.pangea-form-section .field .field-label {
	display: block;
	font-size: .85em;
	font-weight: 600;
	color: #4a5540;
	margin-bottom: 6px;
}

.pangea-form-section .field label .req,
.pangea-form-section .field .field-label .req {
	color: #a33c2a;
}

.pangea-form-section .field input,
.pangea-form-section .field select,
.pangea-form-section .field textarea {
	width: 100%;
	max-width: 100%;
	font: inherit;
	padding: .7em .8em;
	border: 1.5px solid var(--linie);
	border-radius: var(--pangea-radius, 8px);
	background: var(--white);
	color: var(--forest);
}

.pangea-form-section .field textarea {
	min-height: 5.5em;
	resize: vertical;
}

.pangea-form-section .field input:focus,
.pangea-form-section .field select:focus,
.pangea-form-section .field textarea:focus {
	outline: 2px solid var(--forest);
	outline-offset: 1px;
	border-color: var(--forest);
}

.pangea-form-section .field input:user-invalid,
.pangea-form-section .field select:user-invalid {
	border-color: #a33c2a;
}

/* ---------- Chips (Radio-Buttons ohne JS) ---------- */
.pangea-form-section .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Der Radio-Button selbst ist unsichtbar, sichtbar ist nur sein Label.
 * Die Auswahl muss spezifischer sein als ".field input", sonst erbt sie
 * width:100% — der Button wird dann bildschirmbreit und schiebt die Seite
 * seitlich auf, weil er absolut positioniert ist.
 */
.pangea-form-section .chips input.chip-input {
	position: absolute;
	width: 1px;
	height: 1px;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}

.pangea-form-section .chips label.chip {
	display: inline-block;
	margin: 0;
	font-size: .95em;
	font-weight: 400;
	color: var(--forest);
	padding: .55em .9em;
	border: 1.5px solid var(--linie);
	border-radius: var(--pangea-radius, 8px);
	background: var(--white);
	cursor: pointer;
	transition: .15s;
}

.pangea-form-section .chips label.chip:hover {
	border-color: var(--forest);
}

.pangea-form-section .chips input.chip-input:checked + label.chip {
	background: var(--forest);
	color: var(--lime);
	border-color: var(--forest);
}

.pangea-form-section .chips input.chip-input:focus-visible + label.chip {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}

/* ---------- Checkbox ---------- */
.pangea-form-section .fcheck {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin: 16px 0 4px;
	cursor: pointer;
}

.pangea-form-section .fcheck input {
	margin-top: .3em;
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: #0b1b03;
}

/* ---------- Standort-Info ---------- */
/* ---------- Lieber telefonieren? ---------- */
/* Styles stehen inline in pangea_leads_anruf_kasten() (includes/shortcode.php),
   damit eine zwischengespeicherte alte form.css den Kasten nicht ungestaltet lässt. */

.pangea-form-section .standort-info {
	background: var(--forest);
	color: var(--soft3);
	padding: 18px 20px;
	border-radius: var(--pangea-radius, 8px);
	margin-top: 14px;
}

.pangea-form-section .standort-info[hidden] {
	display: none;
}

.pangea-form-section .si-label {
	display: block;
	font-size: .8em;
	color: var(--lime);
	margin-bottom: 8px;
}

.pangea-form-section .si-tel {
	display: inline-block;
	font-size: 1.35em;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	word-break: break-word;
}

.pangea-form-section .si-tel:hover {
	color: var(--lime);
}

.pangea-form-section .si-note {
	font-size: .8em;
	color: #8fa07c;
	margin: 8px 0 0;
}

/* ---------- Absenden ---------- */
.pangea-form-section .submit-zone {
	margin-top: 28px;
}

.pangea-form-section .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font: inherit;
	font-weight: 700;
	border-radius: var(--pangea-radius, 8px);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, color .18s ease;
}

.pangea-form-section .btn-dark {
	background: var(--forest);
	color: var(--lime);
	border-color: var(--forest);
}

.pangea-form-section .btn-dark:hover {
	transform: translateY(-2px);
}

.pangea-form-section .submit-zone .btn {
	width: 100%;
	padding: 1em 1.4em;
}

.pangea-form-section .subnote {
	font-size: .85em;
	color: #5c6650;
	text-align: center;
	margin: 14px 0 0;
}

/* ---------- Erfolgsmeldung der freien Formulare ---------- */
.pangea-form-section .pangea-form-ok {
	margin: 0;
	padding: 4px 0;
	color: var(--forest);
}

.pangea-form-section .pangea-form-ok::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	background: var(--forest);
	margin-bottom: 14px;
}

/* ---------- Fehlermeldung bei unbekanntem Typ ---------- */
.pangea-form-error {
	padding: .8rem 1rem;
	border: 1px solid #a33c2a;
	border-radius: var(--pangea-radius, 8px);
	color: #a33c2a;
}

/* ---------- Honeypot ---------- */
/* Off-screen statt display:none, damit Bots ihn ausfüllen. Rechts kann daraus
   kein Überlauf entstehen, weil das Feld nach links aus dem Bild läuft. */
.pangea-form-section .pangea-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.pangea-form-section .form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.pangea-form-section .frow {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pangea-form-section * {
		animation: none !important;
		transition: none !important;
	}
}