/**
 * Anmeldeformular Newsletter - laeuft auf allen drei Domains.
 *
 * Die Farben kommen als CSS-Variablen vom Formular selbst (siehe wtnl_farben_style() in
 * wt-newsletter.php), weil die drei Themes ihre eigenen Variablen unterschiedlich benennen.
 * Die Werte hier sind nur Rueckfallebene, falls das Inline-Attribut einmal fehlt.
 *
 * Schriften werden bewusst NICHT geladen: Alle drei Themes bringen Poppins und Inter schon
 * mit, ein zweites @font-face waere doppelte Ladezeit. Das Formular erbt die Schrift der Seite.
 */

.wtnl {
	--wtnl-tief: #3A1A5C;
	--wtnl-akzent: #A82DA8;
	--wtnl-akzent-dunkel: #861F86;
	--wtnl-flaeche: #F6ECF8;
	--wtnl-linie: #E3D6EA;
	box-sizing: border-box;
	text-align: left;
}

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

/* --- Varianten ---------------------------------------------------------- */

.wtnl--inline,
.wtnl--gross {
	background: var(--wtnl-flaeche);
	border-radius: 12px;
	border-left: 4px solid var(--wtnl-akzent);
	padding: 28px;
	margin: 32px 0;
}

.wtnl--kompakt {
	margin: 0;
}

.wtnl-titel {
	margin: 0 0 8px;
	color: var(--wtnl-tief);
	font-size: 1.35rem;
	line-height: 1.25;
}

.wtnl-text {
	margin: 0 0 18px;
	max-width: 56ch;
}

/* --- Felder ------------------------------------------------------------- */

.wtnl-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 14px;
}

.wtnl-feld {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 220px;
	min-width: 0;
}

.wtnl-feld--anrede {
	flex: 0 1 140px;
}

.wtnl-feld > span {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wtnl-tief);
	letter-spacing: 0.01em;
}

.wtnl-feld input,
.wtnl-feld select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--wtnl-linie);
	border-radius: 6px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.3;
}

.wtnl-feld input:focus-visible,
.wtnl-feld select:focus-visible,
.wtnl-button:focus-visible,
.wtnl-zustimmung input:focus-visible {
	outline: 2px solid var(--wtnl-akzent);
	outline-offset: 2px;
}

/* --- Zustimmung --------------------------------------------------------- */

/* Die Checkbox ist Pflicht und darf nie vorausgewaehlt sein - eine vorangekreuzte
   Einwilligung ist keine Einwilligung (Art. 4 Nr. 11 DSGVO verlangt eine eindeutige
   bestaetigende Handlung). Deshalb steht hier auch kein "checked" im Markup. */
.wtnl-zustimmung {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 4px 0 16px;
	font-size: 0.86rem;
	line-height: 1.5;
	max-width: 64ch;
}

.wtnl-zustimmung input {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--wtnl-akzent);
}

.wtnl-zustimmung a {
	color: var(--wtnl-akzent-dunkel);
}

/* --- Knopf und Hinweise ------------------------------------------------- */

.wtnl-aktion {
	margin: 0 0 10px;
}

.wtnl-button {
	display: inline-block;
	background: var(--wtnl-akzent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 12px 24px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wtnl-button:hover {
	background: var(--wtnl-akzent-dunkel);
}

.wtnl-hinweis {
	margin: 0;
	font-size: 0.78rem;
	opacity: 0.75;
}

.wtnl-meldung {
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 0.92rem;
	line-height: 1.5;
	background: #fff;
	border-left: 4px solid var(--wtnl-akzent);
}

.wtnl-meldung--ok {
	border-left-color: #3F8F5F;
}

.wtnl-meldung--fehler {
	border-left-color: #C0392B;
}

/* Honigtopf: muss fuer Bots im Quelltext vorhanden und befuellbar sein, darf aber niemanden
   erreichen, der mit Tastatur oder Screenreader arbeitet. Deshalb aus dem Blickfeld geschoben
   statt display:none - manche Bots ueberspringen versteckte Felder gezielt. */
.wtnl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Schmale Anzeigen --------------------------------------------------- */

@media (max-width: 560px) {
	.wtnl--inline,
	.wtnl--gross {
		padding: 22px 18px;
	}

	.wtnl-zeile {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.wtnl-feld,
	.wtnl-feld--anrede {
		flex: 1 1 auto;
	}

	.wtnl-button {
		width: 100%;
	}
}

/* Dunkler Systemmodus: nur check-in one hat eine eigene dunkle Fassung, die anderen beiden
   Websites sind durchgehend hell. Deshalb wird hier nur die Flaeche abgedunkelt, wenn das
   Theme selbst dunkel geworden ist - erkennbar daran, dass es seine Farbwelt umschaltet. */
@media (prefers-color-scheme: dark) {
	.wtnl--inline,
	.wtnl--gross {
		background: color-mix(in srgb, var(--wtnl-flaeche) 18%, transparent);
	}

	.wtnl-feld input,
	.wtnl-feld select,
	.wtnl-meldung {
		background: rgba(255, 255, 255, 0.04);
		border-color: rgba(255, 255, 255, 0.18);
		color: inherit;
	}

	.wtnl-titel,
	.wtnl-feld > span {
		color: inherit;
	}
}

/* --- Dunkler Grund ------------------------------------------------------ */

/* Fuer den Footer der drei Websites: Dort steht das Formular auf violettem bzw. navyfarbenem
   Grund, die Beschriftungen in --wtnl-tief waeren darauf nicht zu lesen. Wird ueber
   [wt_newsletter grund="dunkel"] gesetzt, nicht automatisch erkannt - ob eine Flaeche dunkel
   ist, weiss nur das Template, das das Formular einsetzt. */
.wtnl--dunkel,
.wtnl--dunkel .wtnl-titel,
.wtnl--dunkel .wtnl-feld > span {
	color: #fff;
}

.wtnl--dunkel.wtnl--inline,
.wtnl--dunkel.wtnl--gross {
	background: rgba(255, 255, 255, 0.07);
	border-left-color: var(--wtnl-akzent);
}

.wtnl--dunkel .wtnl-feld input,
.wtnl--dunkel .wtnl-feld select {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.35);
	color: #241a30;
}

.wtnl--dunkel .wtnl-zustimmung,
.wtnl--dunkel .wtnl-hinweis {
	color: rgba(255, 255, 255, 0.82);
}

.wtnl--dunkel .wtnl-zustimmung a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wtnl--dunkel .wtnl-meldung {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* --- Checklisten-Landingpage (Lead-Magnet) ------------------------------- */

/* Baut auf der grossen Formularfassung auf und ergaenzt nur, was die Checkliste braucht:
   die Aufzaehlung dessen, was drinsteht, und die Angabe zu Umfang und Preis. */
.wtlm-inhalt {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.wtlm-inhalt li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
	font-size: 0.93rem;
	line-height: 1.5;
}

.wtlm-inhalt li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wtnl-akzent);
}

.wtlm-umfang {
	margin: 0 0 18px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wtnl-akzent-dunkel);
}

/* Der Hinweis zur Zusendung steht ueber der Newsletter-Zeile und soll optisch nicht mit ihr
   verschmelzen - sonst sieht es aus wie zwei Teile derselben Einwilligung. */
.wtlm-hinweis {
	margin: 2px 0 14px;
	font-size: 0.8rem;
	line-height: 1.5;
	opacity: 0.8;
	max-width: 64ch;
}

.wtnl--dunkel .wtlm-umfang {
	color: #fff;
}

/* --- Inhalt der Checklisten-Landingpage ---------------------------------- */

/* Die Seite tragt neben dem Formular jetzt Text: den Anlass, die geprueften Themen, eine
   Kostprobe und ein paar Fragen. Ohne diesen Inhalt waere sie fuer Suchmaschinen leer.
   Bewusst schmal gesetzt und ohne eigene Farbflaechen - der Blickfang bleibt das Formular. */
.wtlm-seite {
	max-width: 46rem;
}

.wtlm-problem {
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0 0 1em;
}

.wtlm-h2 {
	margin: 2.4rem 0 0.8rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--wtnl-tief);
}

.wtlm-punkte {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.wtlm-punkte li {
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

.wtlm-punkte li::marker {
	color: var(--wtnl-akzent);
	font-weight: 600;
}

.wtlm-nachsatz {
	margin: 0 0 1rem;
	font-size: 0.93rem;
	line-height: 1.6;
	opacity: 0.85;
}

/* Die Kostprobe zeigt einen Punkt vollstaendig. Sie bekommt als einzige Stelle einen
   Akzentbalken, damit erkennbar ist: So sieht das Dokument aus. */
.wtlm-kostprobe {
	border-left: 3px solid var(--wtnl-akzent);
	background: var(--wtnl-flaeche);
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.2rem;
	margin: 0 0 0.8rem;
}

.wtlm-kp-frage {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--wtnl-tief);
}

.wtlm-kp-zeile {
	margin: 0 0 0.4rem;
	font-size: 0.93rem;
	line-height: 1.55;
}

.wtlm-kp-zeile:last-child {
	margin-bottom: 0;
}

.wtlm-faq h3 {
	margin: 1.2rem 0 0.3rem;
	font-size: 1rem;
	color: var(--wtnl-tief);
}

.wtlm-faq p {
	margin: 0;
	line-height: 1.6;
}

.wtlm-abschluss {
	margin: 2rem 0 0;
	font-size: 0.93rem;
}

@media (max-width: 560px) {
	.wtlm-h2 {
		font-size: 1.15rem;
	}
}

/* --- Abstand zum Displayrand -------------------------------------------- */

/* Greift nur, wenn die Website ihn braucht: --wtnl-rand kommt aus der Einstellung
   "Abstand zum Displayrand" und steht am Element selbst (wtnl_farben_style()). Standard ist
   0, dann aendert diese Regel nichts. Gesetzt ist der Wert nur auf wort-textur.de, wo weder
   der Footer noch eine Seite mit reinem Shortcode-Inhalt einen eigenen seitlichen Abstand
   mitbringt - dort klebten Eingabefeld und Knopf auf dem Telefon an beiden Kanten.

   782 px ist die Grenze, ab der WordPress seine Bloecke untereinander stellt: Darueber steht
   das Formular in einer Spalte und hat seinen Abstand ohnehin.

   Das !important ist hier kein Faulheitszeichen: WordPress setzt fuer die Kinder eines
   Blocks mit "is-layout-constrained" selbst "margin-left:auto!important;
   margin-right:auto!important". Dagegen kommt eine gewoehnliche Regel nicht an - gemessen am
   05.10.2026 auf wort-textur.de/checkliste-google-ki/, wo der Abstand ohne das Schluesselwort
   wirkungslos blieb. Wo --wtnl-rand 0 ist (der Standard), setzt die Regel 0 statt auto, und
   das ist bei einem Element ueber die volle Breite dasselbe. */
@media (max-width: 782px) {
	.wtnl,
	.wtlm-seite {
		margin-inline: var(--wtnl-rand, 0px) !important;
	}

	/* Auf der Checklisten-Landingpage steckt das Formular in .wtlm-seite. Haetten beide den
	   Abstand, stuende es doppelt so weit innen wie der Text darueber. */
	.wtlm-seite .wtnl {
		margin-inline: 0 !important;
	}
}