/**
 * Leadlotse - Frontend-Styling.
 *
 * Ein Satz Variablen steuert alles: Wer das Aussehen aendern will, setzt eine
 * Variable, keine Regel. Die Voreinstellungen erben aus den Theme-Variablen
 * (--wp--preset--color--*), damit ein Formular ohne eine Zeile CSS zur Seite
 * passt - und ohne feste Farben, die im dunklen Theme falsch aussehen:
 *
 *   .leadlotse-form { --ll-akzent: #0a6; --ll-radius: 0; }
 *
 * Drei Erscheinungsbilder, als Klasse am Formular (Auswahl im Builder):
 *   .leadlotse-form--plain    schlicht: Linie unten statt Kasten
 *   .leadlotse-form--card     Karte: Kasten mit Rahmen und Schatten
 *   .leadlotse-form--compact  kompakt: einzeilig, fuer Newsletter-Optins
 *
 * Das Markup ist bei allen dreien dasselbe. Abschaltbar bleibt die Datei ueber
 * die Einstellung frontend.load_css - dann uebernimmt das Theme komplett.
 *
 * Zu den doppelten Deklarationen: die erste Zeile ist der Rueckfall fuer
 * Browser ohne color-mix(), die zweite gewinnt ueberall sonst. currentColor
 * bedeutet: Rahmen und Flaechen nehmen den Ton der Seite an, hell wie dunkel.
 */

.leadlotse-form {
	/* Farben */
	--ll-akzent: var( --wp--preset--color--primary, #1f5f8b );
	--ll-akzent-text: var( --wp--preset--color--base, #fff );
	/* Fehlerrot, das sich der Seite anpasst statt dem Betriebssystem: der Ton
	   wird mit der Textfarbe gemischt, also auf heller Seite dunkler und auf
	   dunkler Seite heller. Ueber prefers-color-scheme ginge das schief, sobald
	   jemand mit dunklem System eine helle Seite besucht (der Normalfall). */
	--ll-fehler: #d63638;
	--ll-fehler: color-mix( in srgb, #e5484d 70%, currentColor );
	/* 50 % vom Textton: hell wie dunkel ueber 3:1 Kontrast zum Hintergrund -
	   bei "schlicht" ist diese Linie das Einzige, was das Feld begrenzt
	   (WCAG 1.4.11). Wer es zarter mag, setzt --ll-rahmen selbst. */
	--ll-rahmen: rgba( 118, 118, 118, 0.9 );
	--ll-rahmen: color-mix( in srgb, currentColor 50%, transparent );
	--ll-feld-bg: transparent;
	--ll-flaeche: rgba( 125, 125, 125, 0.08 );
	--ll-flaeche: color-mix( in srgb, currentColor 6%, transparent );

	/* Form und Mass */
	--ll-radius: 6px;
	--ll-abstand: 1.25em;
	--ll-feld-breite: 32em;
	--ll-schrift: inherit;

	display: block;
	max-width: 100%;
	font: var( --ll-schrift );
	/* Nicht jedes Theme setzt border-box global - unsere eigenen Kaesten und
	   Knoepfe sollen aber nicht ueber ihre Breite hinauslaufen. */
	box-sizing: border-box;
}

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

.leadlotse-field {
	margin: 0 0 var( --ll-abstand );
}

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

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

.leadlotse-required {
	color: var( --ll-fehler );
}

.leadlotse-input {
	display: block;
	width: 100%;
	max-width: var( --ll-feld-breite );
	box-sizing: border-box;
	padding: 0.6em 0.8em;
	font: inherit;
	color: inherit;
	background-color: var( --ll-feld-bg );
	border: 1px solid var( --ll-rahmen );
	border-radius: var( --ll-radius );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.leadlotse-input::placeholder {
	opacity: 0.6;
	color: inherit;
}

.leadlotse-input:hover {
	border-color: var( --ll-akzent );
}

/*
 * Fokus: sichtbar, in der Akzentfarbe, mit Abstand zum Feld. Textfelder
 * bekommen den Ring auch bei Mausfokus (:focus), Knoepfe nur bei
 * Tastaturbedienung (:focus-visible) - so sieht niemand einen Ring, der ihn
 * nicht braucht, und niemand verliert ihn, der ihn braucht.
 */
.leadlotse-input:focus,
.leadlotse-choice input:focus-visible,
.leadlotse-radio-group:focus-within {
	outline: 2px solid var( --ll-akzent );
	outline-offset: 2px;
	border-color: var( --ll-akzent );
}

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

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

.leadlotse-choice input {
	margin-top: 0.25em;
	flex: 0 0 auto;
	accent-color: var( --ll-akzent );
	width: 1.1em;
	height: 1.1em;
}

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

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

/*
 * Fehler stehen AM Feld, nicht nur gesammelt oben: bei acht Feldern sucht man
 * sonst. Der Platz ist immer im Markup (leer und damit unsichtbar), das Skript
 * fuellt ihn und setzt role="alert" - so wird der Text auch vorgelesen.
 */
.leadlotse-error {
	display: block;
	font-size: 0.875em;
	font-weight: 500;
	color: var( --ll-fehler );
	margin-top: 0.4em;
}

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

.leadlotse-field--has-error .leadlotse-input,
.leadlotse-field--has-error .leadlotse-choice input {
	border-color: var( --ll-fehler );
	outline-color: var( --ll-fehler );
}

.leadlotse-field--has-error .leadlotse-input {
	box-shadow: 0 0 0 3px rgba( 179, 38, 30, 0.12 );
}

/*
 * Das Einwilligungsfeld ist der wichtigste Text im Formular. Es bekommt eine
 * eigene, ruhige Zeile mit etwas Flaeche und einer Kante in der Akzentfarbe -
 * kein Kleingedrucktes zwischen zwei Feldern.
 */
.leadlotse-field--consent {
	background-color: var( --ll-flaeche );
	border-left: 3px solid var( --ll-akzent );
	border-radius: var( --ll-radius );
	padding: 0.9em 1em;
	max-width: 40em;
	font-size: 0.9375em;
	line-height: 1.5;
}

.leadlotse-field--consent .leadlotse-error {
	margin-left: 1.7em;
}

.leadlotse-field--consent a {
	color: inherit;
	text-decoration: underline;
}

.leadlotse-status {
	padding: 0.8em 1em;
	margin: 0 0 var( --ll-abstand );
	border: 1px solid var( --ll-rahmen );
	border-left-width: 4px;
	border-radius: var( --ll-radius );
	background-color: var( --ll-flaeche );
}

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

.leadlotse-status--error {
	border-left-color: var( --ll-fehler );
}

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

/*
 * Absende-Knopf in der Akzentfarbe der Seite. Beim Senden zeigt er es auch:
 * Ring statt Stillstand, Beschriftung wechselt auf "Wird gesendet" und der
 * Knopf ist gesperrt - sonst klickt man bei langsamer Verbindung zweimal.
 */
.leadlotse-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	padding: 0.7em 1.6em;
	color: var( --ll-akzent-text );
	background-color: var( --ll-akzent );
	border: 1px solid transparent;
	border-radius: var( --ll-radius );
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.leadlotse-submit:hover {
	filter: brightness( 1.1 );
}

.leadlotse-submit:focus-visible {
	outline: 2px solid var( --ll-akzent );
	outline-offset: 3px;
}

.leadlotse-submit[disabled] {
	opacity: 0.75;
	cursor: progress;
	filter: none;
}

.leadlotse-submit.is-sending::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ll-dreht 0.7s linear infinite;
}

@keyframes ll-dreht {
	to {
		transform: rotate( 360deg );
	}
}

/* Wer keine Bewegung will, bekommt den Ring trotzdem - nur langsam. */
@media ( prefers-reduced-motion: reduce ) {
	.leadlotse-submit.is-sending::before {
		animation-duration: 3s;
	}

	.leadlotse-input,
	.leadlotse-submit {
		transition: none;
	}
}

.leadlotse-notice {
	padding: 0.75em 1em;
	border: 1px dashed var( --ll-rahmen );
	border-radius: var( --ll-radius );
}

/* --- Erscheinungsbild "schlicht" -------------------------------------------
 * Linie unten statt Kasten. Das Formular fuegt sich in den Textfluss der
 * Seite ein, ohne einen eigenen Rahmen mitzubringen.
 */
.leadlotse-form--plain .leadlotse-input {
	border-width: 0 0 1px;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: transparent;
}

.leadlotse-form--plain .leadlotse-input:focus {
	outline-offset: 4px;
}

.leadlotse-form--plain select.leadlotse-input {
	padding-left: 0;
}

/* --- Erscheinungsbild "Karte" ----------------------------------------------
 * Kasten mit Rahmen und Schatten, wie ihn viele Landeseiten haben. Der
 * Schatten ist auf dunklem Grund unsichtbar - dort traegt der Rahmen.
 */
.leadlotse-form--card {
	background-color: var( --ll-flaeche );
	border: 1px solid var( --ll-rahmen );
	border-radius: calc( var( --ll-radius ) * 2 );
	padding: clamp( 1.25em, 4vw, 2em );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 ), 0 10px 30px rgba( 0, 0, 0, 0.07 );
	max-width: 40em;
}

.leadlotse-form--card .leadlotse-input {
	max-width: 100%;
	background-color: var( --ll-feld-bg );
}

.leadlotse-form--card .leadlotse-field:last-of-type {
	margin-bottom: 0;
}

.leadlotse-form--card .leadlotse-field--submit {
	margin-bottom: 0;
}

.leadlotse-form--card .leadlotse-submit {
	width: 100%;
	justify-content: center;
}

/* --- Erscheinungsbild "kompakt" --------------------------------------------
 * Einzeilig fuer Newsletter-Optins: Felder und Knopf stehen nebeneinander,
 * Einwilligung, Meldung und lange Felder bekommen eine eigene Zeile. Unter
 * 480 px bricht alles von selbst untereinander (flex-wrap, keine Media Query
 * noetig) - die Beschriftungen bleiben sichtbar, auch hier.
 */
.leadlotse-form--compact {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em;
}

.leadlotse-form--compact .leadlotse-field {
	flex: 1 1 12em;
	margin-bottom: 0;
	min-width: 0;
}

.leadlotse-form--compact .leadlotse-input {
	max-width: none;
}

.leadlotse-form--compact .leadlotse-label {
	font-size: 0.875em;
	margin-bottom: 0.25em;
}

.leadlotse-form--compact .leadlotse-field--submit,
.leadlotse-form--compact .leadlotse-field--checkbox {
	flex: 0 0 auto;
}

.leadlotse-form--compact .leadlotse-field--textarea,
.leadlotse-form--compact .leadlotse-field--consent,
.leadlotse-form--compact .leadlotse-status,
.leadlotse-form--compact .leadlotse-identity,
.leadlotse-form--compact .leadlotse-whatsapp,
.leadlotse-form--compact .leadlotse-progress,
.leadlotse-form--compact .leadlotse-step {
	flex: 1 1 100%;
}

/*
 * Reihenfolge nur fuer das Auge: Meldung oben, dann die Zeile aus Feld und
 * Knopf, darunter Einwilligung und Zusaetze. Die Reihenfolge im Markup bleibt
 * unangetastet - wer mit der Tastatur geht, kommt weiterhin ZUERST an die
 * Einwilligung und erst danach an den Absende-Knopf.
 */
.leadlotse-form--compact .leadlotse-status,
.leadlotse-form--compact .leadlotse-identity {
	order: -1;
}

.leadlotse-form--compact .leadlotse-field--submit {
	order: 1;
}

.leadlotse-form--compact .leadlotse-field--consent,
.leadlotse-form--compact .leadlotse-field--checkbox,
.leadlotse-form--compact .leadlotse-whatsapp {
	order: 2;
}

/*
 * 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: var( --ll-abstand );
}

.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.6em 1.4em;
	border: 1px solid var( --ll-rahmen );
	border-radius: var( --ll-radius );
	text-decoration: none;
	background-color: transparent;
	color: inherit;
}

.leadlotse-whatsapp-link:hover,
.leadlotse-whatsapp-link:focus-visible {
	border-color: var( --ll-akzent );
	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: var( --ll-feld-breite );
}

.leadlotse-identity-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font: inherit;
	color: inherit;
	padding: 0.65em 1.3em;
	border: 1px solid var( --ll-rahmen );
	border-radius: var( --ll-radius );
	background-color: transparent;
	text-decoration: none;
}

.leadlotse-identity-btn:hover,
.leadlotse-identity-btn:focus-visible {
	border-color: var( --ll-akzent );
	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;
}

/*
 * Multi-Step (LP-1.1a): die Schritte sind schlichte fieldset. Ohne JavaScript
 * stehen sie alle untereinander und das Formular ist einseitig - deshalb steht
 * hier KEIN display:none fuer Schritte. Sichtbarkeit macht das Skript ueber das
 * hidden-Attribut, damit es auch bei abgeschaltetem Plugin-CSS funktioniert.
 */
.leadlotse-step {
	border: 1px solid var( --ll-rahmen );
	border-radius: var( --ll-radius );
	padding: 1em 1.25em;
	margin: 0 0 var( --ll-abstand );
	min-width: 0;
}

.leadlotse-step-legend {
	font-weight: 600;
	padding: 0 0.4em;
}

.leadlotse-step-legend:focus {
	outline: 2px solid var( --ll-akzent );
	outline-offset: 2px;
}

.leadlotse-step-nav {
	display: flex;
	gap: 0.75em;
	flex-wrap: wrap;
	margin-top: var( --ll-abstand );
}

.leadlotse-step-btn {
	font: inherit;
	cursor: pointer;
	padding: 0.6em 1.4em;
	border: 1px solid var( --ll-rahmen );
	border-radius: var( --ll-radius );
	background-color: transparent;
	color: inherit;
}

.leadlotse-step-btn:hover,
.leadlotse-step-btn:focus-visible {
	border-color: var( --ll-akzent );
}

.leadlotse-progress {
	margin: 0 0 var( --ll-abstand );
}

.leadlotse-progress-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.leadlotse-progress-step {
	flex: 1 1 auto;
	font-size: 0.875em;
	opacity: 0.65;
}

/* Der aktuelle Schritt ist nicht nur farbig, sondern auch fett - und der Text
 * "Schritt 2 von 3" steht ohnehin daneben (UX-KONZEPT 7). */
.leadlotse-progress-step.is-current {
	opacity: 1;
	font-weight: 600;
}

.leadlotse-progress-step.is-done {
	opacity: 0.85;
}

.leadlotse-progress--bar .leadlotse-progress-step {
	border-top: 4px solid var( --ll-rahmen );
	padding-top: 0.4em;
}

.leadlotse-progress--bar .leadlotse-progress-step.is-current,
.leadlotse-progress--bar .leadlotse-progress-step.is-done {
	border-top-color: var( --ll-akzent );
}

.leadlotse-progress--dots .leadlotse-progress-step {
	flex: 0 0 auto;
}

.leadlotse-progress--dots .leadlotse-progress-num {
	display: inline-block;
	min-width: 1.9em;
	text-align: center;
	line-height: 1.9em;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.leadlotse-progress--dots .leadlotse-progress-label {
	margin-left: 0.3em;
}

.leadlotse-progress-text {
	margin: 0.5em 0 0;
	font-size: 0.875em;
	opacity: 0.8;
}

.leadlotse-progress[hidden],
.leadlotse-step-nav[hidden],
.leadlotse-step[hidden],
.leadlotse-field--submit[hidden] {
	display: none;
}

/*
 * 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;
}