/* Newsletter-Abmeldung (Block traydon/newsletter-abmeldung aus mu-plugins/traydon-newsletter) */
.tr-newsletter {
	--nl-linie: var(--wp--preset--color--linie, #d9d5d0);
	--nl-leise: var(--wp--preset--color--text-leise, #5e5853);
	--nl-text: var(--wp--preset--color--text, #231f20);
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	max-width: 40rem;
	scroll-margin-block-start: var(--wp--preset--spacing--60, 3rem);
}

.tr-newsletter__formular {
	display: grid;
	gap: var(--wp--preset--spacing--30, 1rem);
	padding: var(--wp--preset--spacing--40, 1.5rem);
	background: var(--wp--preset--color--flaeche, #fff);
	border: var(--wp--custom--linie--fein, 1px) solid var(--wp--preset--color--linie-stark, #8c8580);
	border-block-start: 4px solid var(--nl-text);
	border-radius: var(--wp--custom--radius--klein, 2px);
}

.tr-newsletter__feld {
	display: grid;
	gap: 0.375rem;
}

.tr-newsletter__feld label {
	font-weight: 600;
}

.tr-newsletter__feld input {
	width: 100%;
	box-sizing: border-box;
}

.tr-newsletter__hilfe,
.tr-newsletter__datenschutz {
	margin: 0;
	color: var(--nl-leise);
	font-size: var(--wp--preset--font-size--klein, 0.9rem);
}

.tr-newsletter__aktion {
	margin: 0;
}

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet, nicht per Tab erreichbar */
.tr-newsletter__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tr-newsletter__meldung:empty {
	display: none;
}

.tr-newsletter__meldung {
	padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.5rem);
	border: var(--wp--custom--linie--fein, 1px) solid var(--nl-linie);
	border-inline-start-width: 4px;
	border-radius: var(--wp--custom--radius--klein, 2px);
	background: var(--wp--preset--color--flaeche, #fff);
}

.tr-newsletter__meldung p {
	margin: 0;
}

.tr-newsletter__meldung--erfolg {
	border-inline-start-color: var(--wp--preset--color--erfolg, #1e6b3a);
}

.tr-newsletter__meldung--fehler {
	border-inline-start-color: var(--wp--preset--color--fehler, #a4161a);
	color: var(--wp--preset--color--fehler, #a4161a);
}

/* Die Meldung erhält den Fokus per autofocus bzw. Sprungmarke; Rahmen auch bei :focus sichtbar,
   damit er nicht vom Browser-Urteil über :focus-visible abhängt */
.tr-newsletter__meldung:focus,
.tr-newsletter__meldung:focus-visible {
	outline: 2px solid var(--nl-text);
	outline-offset: 2px;
}

.tr-newsletter__alternativ {
	padding-block-start: var(--wp--preset--spacing--30, 1rem);
	border-block-start: var(--wp--custom--linie--fein, 1px) solid var(--nl-linie);
}

.tr-newsletter__alternativ-titel {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--mittel, 1.25rem);
}

.tr-newsletter__alternativ p {
	margin: 0;
}