/**
 * smartEngin Forms – Frontend-Struktur.
 * Aussehen kommt aus den CSS-Variablen (--sef-*), die pro Formular gesetzt werden.
 */

.sef-form-wrap {
	box-sizing: border-box;
	width: 100%;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sef-form-wrap *,
.sef-form-wrap *::before,
.sef-form-wrap *::after {
	box-sizing: border-box;
}

/* Die eigentliche Formular-Box (ohne Hauptkarte: zentriert + max. Breite) */
.sef-formbox {
	width: 100%;
	max-width: var(--sef-c-maxw, 640px);
	margin: 0 auto;
	background: var(--sef-c-bg, #fff);
	border: var(--sef-c-border-width, 1px) solid var(--sef-c-border-color, #e6e9ec);
	border-radius: var(--sef-c-radius, 16px);
	box-shadow: var(--sef-c-shadow, 0 4px 16px rgba(16, 35, 50, 0.10));
	padding: var(--sef-c-pad, 32px);
}

.sef-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sef-f-gap, 18px);
}

.sef-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sef-field.sef-w-full {
	flex: 1 1 100%;
}

.sef-field.sef-w-half {
	flex: 1 1 calc(50% - var(--sef-f-gap, 18px));
	min-width: 180px;
}

.sef-form-wrap .sef-label {
	color: var(--sef-l-color, #102332);
	font-size: var(--sef-l-size, 14px);
	font-weight: 600;
	line-height: 1.3;
}

.sef-req {
	color: var(--sef-btn-bg, #37b971);
}

/* .sef-form-wrap-Präfix erhöht die Spezifität, damit die Feld-Optik auch in der
   Backend-Vorschau nicht vom WordPress-Admin-CSS (input[type=...]) überschrieben wird. */
.sef-form-wrap .sef-input {
	width: 100%;
	background: var(--sef-f-bg, #fff);
	color: var(--sef-f-text, #102332);
	border: 1px solid var(--sef-f-border, #cfd6db);
	border-radius: var(--sef-f-radius, 10px);
	box-shadow: var(--sef-f-inner, none);
	font-size: var(--sef-f-size, 15px);
	font-family: inherit;
	line-height: 1.4;
	padding: 11px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Platzhalter folgt der eingestellten Feld-Schriftfarbe (abgeschwächt),
   damit „Schriftfarbe in den Feldern“ auch bei leeren Feldern sichtbar wirkt. */
.sef-form-wrap .sef-input::placeholder {
	color: color-mix(in srgb, var(--sef-f-text, #102332) 45%, transparent);
}

.sef-form-wrap .sef-input:focus {
	outline: none;
	border-color: var(--sef-f-focus, #37b971);
	box-shadow: var(--sef-f-inner, none), 0 0 0 3px color-mix(in srgb, var(--sef-f-focus, #37b971) 22%, transparent);
}

.sef-form-wrap .sef-textarea {
	resize: vertical;
	min-height: 120px;
}

/* Label links statt oben */
.sef-labels-left .sef-field {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}

.sef-labels-left .sef-label {
	flex: 0 0 130px;
	padding-top: 12px;
}

.sef-labels-left .sef-input {
	flex: 1 1 auto;
}

/* Aktionen / Button */
.sef-actions {
	display: flex;
	margin-top: var(--sef-f-gap, 18px);
}

.sef-btn-align-left {
	justify-content: flex-start;
}

.sef-btn-align-center {
	justify-content: center;
}

.sef-btn-align-right {
	justify-content: flex-end;
}

.sef-btn-align-stretch .sef-submit {
	width: 100%;
}

.sef-form-wrap .sef-submit {
	background: var(--sef-btn-bg, #37b971);
	color: var(--sef-btn-text, #fff);
	border: 0;
	border-radius: var(--sef-btn-radius, 999px);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 13px 28px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.sef-form-wrap .sef-submit.sef-btn-full {
	width: 100%;
}

.sef-form-wrap .sef-submit:hover {
	background: var(--sef-btn-hover, #2fa663);
}

.sef-form-wrap .sef-submit:active {
	transform: translateY(1px);
}

.sef-form-error {
	padding: 16px;
	border: 1px solid #e6c200;
	background: #fff8db;
	border-radius: 8px;
	color: #6b5900;
	font-family: sans-serif;
}

@media (max-width: 600px) {
	.sef-labels-left .sef-field {
		flex-direction: column;
	}
	.sef-labels-left .sef-label {
		flex: none;
		padding-top: 0;
	}
	.sef-field.sef-w-half {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   Hauptkarte (zweiteiliges Layout, Design-1)
   ========================================================================= */
.sef-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: var(--sef-card-maxw, 1080px);
	margin: 0 auto;
	border-radius: var(--sef-card-radius, 20px);
	box-shadow: var(--sef-card-shadow, 0 16px 40px rgba(16, 35, 50, 0.22));
	background-color: var(--sef-card-bg, #102332);
	background-image: var(--sef-card-img, none);
	background-size: cover;
	background-position: center;
	color: var(--sef-card-text, #fff);
}

.sef-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--sef-card-ov-color, #0b1722);
	opacity: var(--sef-card-ov-op, 0.55);
	pointer-events: none;
}

.sef-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	gap: var(--sef-card-gap, 40px);
	padding: var(--sef-card-pad, 48px);
	align-items: flex-start;
}

.sef-card--form-left .sef-card__inner {
	flex-direction: row-reverse;
}

/* Spaltenbreiten über den Schieberegler „Aufteilung": Inhaltsseite = --sef-card-split,
   Formularseite = Rest. Der halbe Spaltenabstand wird je Seite abgezogen, damit sich
   beide Spalten plus Gap exakt zu 100 % addieren. */
.sef-card__content {
	flex: 0 0 calc(var(--sef-card-split, 50%) - var(--sef-card-gap, 40px) / 2);
	min-width: 0;
}

.sef-card__formcol {
	flex: 0 0 calc(100% - var(--sef-card-split, 50%) - var(--sef-card-gap, 40px) / 2);
	min-width: 0;
}

/* Formular sitzt direkt auf der Karte (transparent, ohne eigene Box) */
.sef-formbox--oncard {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
	margin: 0;
}

.sef-card .sef-label {
	color: var(--sef-card-text, #fff);
}

/* ---- Inhalts-Widgets ---- */
.sef-card__content > * {
	margin: 0 0 22px;
}

.sef-card__content > *:last-child {
	margin-bottom: 0;
}

.sef-w-heading {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sef-card-text, #fff);
}

.sef-w-text {
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.9;
}

.sef-w-quote {
	margin: 0 0 22px;
}

.sef-w-quote__text {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 16px;
	color: var(--sef-card-text, #fff);
}

.sef-w-quote__cap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sef-w-quote__img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.sef-w-quote__img--ph {
	background: linear-gradient(135deg, #37b971, #4ed66f);
}

.sef-w-quote__who {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	font-size: 14px;
}

.sef-w-quote__who span {
	opacity: 0.75;
	font-size: 13px;
}

.sef-w-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sef-w-steps__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 15px;
}

.sef-w-steps__item:last-child {
	margin-bottom: 0;
}

.sef-w-steps__num {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sef-btn-bg, #37b971);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sef-w-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	opacity: 0.8;
}

.sef-w-logos__txt {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
}

.sef-w-logos__img {
	max-height: 26px;
	width: auto;
}

.sef-w-button {
	display: inline-block;
	background: var(--sef-btn-bg, #37b971);
	color: var(--sef-btn-text, #fff);
	text-decoration: none;
	font-weight: 600;
	padding: 11px 22px;
	border-radius: var(--sef-btn-radius, 999px);
}

.sef-w-divider {
	border: 0;
	height: 1px;
	background: var(--sef-card-text, #fff);
	opacity: 0.3;
}

/* Bild-Widget */
.sef-w-imagebox {
	text-align: left;
}

.sef-w-imagebox--center {
	text-align: center;
}

.sef-w-imagebox--right {
	text-align: right;
}

.sef-w-image {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	vertical-align: middle;
}

.sef-w-image--ph {
	height: 140px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px dashed rgba(255, 255, 255, 0.35);
}

@media (max-width: 820px) {
	.sef-card__inner,
	.sef-card--form-left .sef-card__inner {
		flex-direction: column;
		align-items: stretch;
	}
	.sef-card__content,
	.sef-card__formcol {
		flex: 1 1 100%;
	}
}

/* =========================================================================
   Weitere Feldtypen (Builder)
   ========================================================================= */

/* Honeypot (Spam-Schutz): für Menschen unsichtbar */
.sef-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Ergebnis-Meldungen nach dem Absenden */
.sef-result--success {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
}

.sef-result--success .sef-result__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sef-btn-bg, #37b971);
	color: #fff;
	font-size: 22px;
	line-height: 40px;
	text-align: center;
	font-weight: 700;
}

.sef-result--success .sef-result__text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--sef-f-text, #102332);
}

.sef-result--success .sef-result__text p {
	margin: 0 0 8px;
}

.sef-result--error {
	background: #fdecec;
	border: 1px solid #f0b3b3;
	color: #8a2b2b;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 16px;
}

/* Feld-Fehler */
.sef-field-error {
	color: #b32d2e;
	font-size: 12.5px;
	line-height: 1.3;
	margin-top: 2px;
}

.sef-form-wrap .sef-field--error .sef-input {
	border-color: #d9534f;
}

.sef-card .sef-result--error {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 120, 120, 0.6);
	color: #ffd7d7;
}

.sef-card .sef-field-error {
	color: #ffbcbc;
}

/* Vor- & Nachname: zwei gleich große Felder nebeneinander */
.sef-namerow {
	display: flex;
	gap: var(--sef-f-gap, 18px);
	width: 100%;
}

.sef-namecol {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

@media (max-width: 600px) {
	.sef-namerow {
		flex-direction: column;
	}
}

/* Mehrfachauswahl (mehrzeiliges Select) */
.sef-form-wrap select.sef-multiselect {
	min-height: 120px;
	padding: 6px;
}

/* Datei-Upload */
.sef-form-wrap .sef-file {
	padding: 9px 12px;
	background: var(--sef-f-bg, #fff);
}

/* Datei-Hinweis (Typen/Größe) folgt der konfigurierten Schriftfarbe:
   ohne Hauptkarte der Label-Farbe, auf der Hauptkarte der Karten-Textfarbe. */
.sef-file-hint {
	font-size: 12px;
	margin-top: 2px;
	color: var(--sef-l-color, #5b6b78);
	opacity: 0.7;
}

.sef-card .sef-file-hint {
	color: var(--sef-card-text, #fff);
	opacity: 0.75;
}

/* Radio-/Checkbox-Listen */
.sef-choicelist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 2px;
}

.sef-choice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: var(--sef-f-size, 15px);
	line-height: 1.35;
	color: var(--sef-f-text, #102332);
	cursor: pointer;
}

.sef-choice input {
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--sef-f-focus, #37b971);
}

/* Einzelne Checkbox (DSGVO/Newsletter/Checkbox) */
.sef-choice--single {
	align-items: flex-start;
}

.sef-choice a {
	color: var(--sef-btn-bg, #37b971);
}

/* Auf der Hauptkarte (dunkler Grund) erben die Auswahltexte die Kartenfarbe */
.sef-card .sef-choice {
	color: var(--sef-card-text, #fff);
}

.sef-card .sef-choice a {
	color: var(--sef-card-text, #fff);
	text-decoration: underline;
}

/* Layout-/Technik-Felder */
.sef-fld-heading {
	margin: 6px 0 2px;
	font-size: calc(var(--sef-l-size, 14px) + 4px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--sef-l-color, #102332);
}

.sef-card .sef-fld-heading {
	color: var(--sef-card-text, #fff);
}

.sef-fld-html {
	font-size: var(--sef-f-size, 15px);
	line-height: 1.5;
	color: var(--sef-f-text, #102332);
}

.sef-card .sef-fld-html {
	color: var(--sef-card-text, #fff);
}

.sef-fld-divider {
	border: 0;
	height: 1px;
	background: var(--sef-f-border, #cfd6db);
	width: 100%;
	margin: 4px 0;
}

.sef-card .sef-fld-divider {
	background: var(--sef-card-text, #fff);
	opacity: 0.3;
}

/* Marker für verstecktes Feld (nur Backend-Vorschau) */
.sef-fld-hiddenmark {
	font-size: 12px;
	color: #9aa7b1;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px dashed #cfd6db;
	border-radius: 8px;
}

.sef-card .sef-fld-hiddenmark {
	color: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Captcha-Widget (Modul Sicherheit) */
.sef-captcha {
	min-height: 65px;
}

/* Unsichtbarer Modus („Nur wenn nötig“): keinen leeren Platz reservieren. */
.sef-captcha--hidden {
	min-height: 0;
	gap: 0;
}

/* Absenden-Button während der Übertragung (Doppel-Klick-Schutz) */
.sef-submit--loading {
	opacity: 0.6;
	cursor: progress;
}