/**
 * Leadlotse - schlankes Frontend-Styling.
 *
 * Neutral und theme-freundlich: erbt Schriften und Farben des Themes,
 * definiert nur Abstaende, Zustaende und die Pflicht-Verstecke (Honeypot).
 * Abschaltbar ueber die Einstellung frontend.load_css.
 */

.leadlotse-form {
	display: block;
	max-width: 100%;
}

.leadlotse-field {
	margin: 0 0 1.25em;
}

.leadlotse-field[hidden] {
	display: none;
}

.leadlotse-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.leadlotse-required {
	color: #a12b2b;
}

.leadlotse-input {
	display: block;
	width: 100%;
	max-width: 32em;
	box-sizing: border-box;
	padding: 0.55em 0.75em;
	font: inherit;
	color: inherit;
	background-color: inherit;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 4px;
}

.leadlotse-input:focus {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

textarea.leadlotse-input {
	max-width: 40em;
	resize: vertical;
}

.leadlotse-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
}

.leadlotse-choice input {
	margin-top: 0.3em;
	flex: 0 0 auto;
}

.leadlotse-radio-group .leadlotse-choice {
	margin-bottom: 0.35em;
}

.leadlotse-help {
	display: block;
	font-size: 0.875em;
	opacity: 0.8;
	margin-top: 0.35em;
}

.leadlotse-error {
	display: block;
	font-size: 0.875em;
	color: #a12b2b;
	margin-top: 0.35em;
}

.leadlotse-error:empty {
	display: none;
}

.leadlotse-field--has-error .leadlotse-input,
.leadlotse-field--has-error .leadlotse-choice input {
	border-color: #a12b2b;
}

.leadlotse-status {
	padding: 0.75em 1em;
	margin: 0 0 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-left-width: 4px;
	border-radius: 4px;
}

.leadlotse-status--success {
	border-left-color: #2e7d5b;
}

.leadlotse-status--error {
	border-left-color: #a12b2b;
}

.leadlotse-status[hidden] {
	display: none;
}

.leadlotse-submit {
	font: inherit;
	cursor: pointer;
	padding: 0.6em 1.4em;
}

.leadlotse-submit[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.leadlotse-notice {
	padding: 0.75em 1em;
	border: 1px dashed rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

/*
 * WhatsApp Click-to-Chat: schlichte Alternative unter dem Absenden-Knopf.
 * Der Link bekommt eine sekundaere Button-Optik (Outline), der Hinweis bleibt
 * klein und dezent und steht immer sichtbar vor dem Klick.
 */
.leadlotse-whatsapp {
	margin-top: 1.25em;
}

.leadlotse-whatsapp-or {
	display: block;
	margin-bottom: 0.6em;
	font-size: 0.875em;
	opacity: 0.7;
}

.leadlotse-whatsapp-link {
	display: inline-block;
	font: inherit;
	padding: 0.55em 1.3em;
	border: 1px solid currentColor;
	border-radius: 4px;
	text-decoration: none;
	background-color: transparent;
	color: inherit;
}

.leadlotse-whatsapp-link:hover,
.leadlotse-whatsapp-link:focus {
	text-decoration: underline;
}

.leadlotse-whatsapp-hint {
	margin: 0.6em 0 0;
	font-size: 0.8125em;
	opacity: 0.7;
	max-width: 40em;
}

.leadlotse-choice--wa-optin {
	margin-top: 0.6em;
	font-size: 0.9375em;
}

/*
 * Ausfuellhilfe "Weiter mit Google/Apple": neutrale, umrandete Knoepfe ueber den
 * Feldern. Keine Marken-Logos, keine externen Ressourcen - nur Text. Der Hinweis
 * bleibt klein und dezent, der Trenner leitet zum klassischen Ausfuellen ueber.
 */
.leadlotse-identity {
	margin: 0 0 1.5em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	max-width: 32em;
}

.leadlotse-identity-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font: inherit;
	color: inherit;
	padding: 0.6em 1.3em;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 4px;
	background-color: transparent;
	text-decoration: none;
}

.leadlotse-identity-btn:hover,
.leadlotse-identity-btn:focus {
	text-decoration: underline;
}

.leadlotse-identity-hint {
	margin: 0.25em 0 0;
	font-size: 0.8125em;
	opacity: 0.7;
}

.leadlotse-identity-or {
	display: block;
	margin-top: 0.35em;
	font-size: 0.875em;
	opacity: 0.7;
}

/*
 * Honeypot: fuer Menschen unsichtbar, aber NICHT display:none allein
 * (manche Bots ueberspringen display:none-Felder gezielt).
 * Visuell aus dem Viewport bewegt, ohne Screenreader-Falle (aria-hidden
 * sitzt am Container, tabindex=-1 am Feld).
 */
.leadlotse-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}