/**
 * Newsletter-Anmeldung (design.md 3.16): Fußzeile, Startseite, /newsletter/, Bestellbestätigung.
 * Eigene Datei (inc/newsletter.php), damit components.css schlank bleibt.
 */

.newsletter {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
	container-type: inline-size; /* „Feld + Knopf in einer Zeile“ nach eigener Breite, nicht nach dem Bildschirm (Audit B17) */
	scroll-margin-top: calc(var(--header-h-compact) + var(--space-4));
}

.newsletter:focus {
	outline: 0;
}

.newsletter-form {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}

.newsletter-form[hidden],
.newsletter__success[hidden],
.newsletter-form__alert[hidden] {
	display: none;
}

.newsletter-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--space-2);
}

.newsletter-form__label {
	font-size: var(--fs-body); /* wie alle Feld-Labels (design.md 3.9) */
	font-weight: var(--fw-semibold);
}

.newsletter-form__email {
	width: 100%;
	min-height: 52px;
}

.newsletter-form__email[aria-invalid="true"] {
	border-color: var(--c-error);
}

.newsletter-form__submit {
	min-height: 52px;
}

.newsletter-form__submit[aria-busy="true"] {
	cursor: progress;
	opacity: 0.8;
}

.newsletter-form__check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--space-3);
	font-size: var(--fs-small);
	cursor: pointer;
}

.newsletter-form__check input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--c-brand);
}

.newsletter-form__check input[aria-invalid="true"] {
	outline: 2px solid var(--c-error);
	outline-offset: 2px;
}

.newsletter-form__check a {
	color: inherit;
}

.newsletter__success {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-tile);
	background: var(--c-success-bg);
	color: var(--c-success);
	font-weight: var(--fw-medium);
}

.newsletter__success-icon {
	flex: none;
}

.newsletter-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Auf der Markenfarbe (Fußzeile): Knopf hell, Fehler als helle Fläche (Rot auf Pflaume wäre unlesbar). */
.newsletter--on-brand .newsletter-form__submit {
	background: var(--c-on-brand);
	color: var(--c-brand);
}

.newsletter--on-brand .newsletter-form__check input {
	accent-color: var(--c-on-brand);
}

.newsletter--on-brand .field-error {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-field);
	background: var(--c-error-bg);
}

@media (hover: hover) {
	.newsletter--on-brand .newsletter-form__submit:hover {
		background: var(--c-surface);
	}
}

.site-footer__newsletter {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-8);
	border-bottom: var(--border) solid currentcolor;
}

.site-footer__newsletter-text {
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

.site-footer__newsletter-title {
	margin: 0;
	font-size: var(--fs-h3);
}

.site-footer__newsletter-text p {
	margin: 0;
	max-width: var(--measure);
}

.site-footer__newsletter-text a {
	color: inherit;
}

.home-newsletter__panel {
	display: grid;
	gap: var(--space-6);
	padding: var(--space-6) var(--space-5);
	border-radius: var(--radius-card);
	background: var(--c-surface);
}

.home-newsletter__text {
	display: grid;
	gap: var(--space-3);
	align-content: start;
}

.home-newsletter__text h2,
.home-newsletter__text p {
	margin: 0;
}

.home-newsletter__text p {
	max-width: var(--measure);
}

.home-newsletter__terms {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.home-newsletter__terms a {
	color: var(--c-text);
}

.newsletter-page__form {
	margin-bottom: var(--space-7);
	padding: var(--space-5);
	border-radius: var(--radius-card);
	background: var(--c-surface);
}

@container (min-width: 22rem) {
	.newsletter-form__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.newsletter-form__label {
		grid-column: 1 / -1;
	}
}

@media (min-width: 40em) {
	.home-newsletter__panel {
		padding: var(--space-8);
	}
}

@media (min-width: 56.25em) {
	.site-footer__newsletter {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--space-9);
	}

	.home-newsletter__panel {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: var(--space-9);
		padding: var(--space-9);
	}
}