/**
*  Newsletter-Formular auf dunklem Grund (Band und Seitenleiste)
*
*  Greift über die Klasse c-form--newsletter am <form> und überschreibt die
*  globalen Formularstile (form, input, button) nur dort.
*
*  Kontraste (WCAG AA, geprüft):
*  - Label  --paper-white auf --brand-structure (--cool): 11 : 1
*  - Button --paper-white auf --warm-2: 4,6 : 1
**/

.c-form--newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xs) var(--space-s);
	align-items: end;
	inline-size: 100%;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;

	& .form-field {
		grid-column: 1;
		min-inline-size: 0;
	}

	& label {
		display: block;
		margin: 0 0 var(--space-3xs);
		color: var(--paper-white);
		font-family: var(--font-interface);
		font-weight: 700;
	}

	& .required {
		color: var(--paper-white);
	}

	& input[type="email"] {
		margin: 0;
		padding: 0.7em 0.9em;
		border: 2px solid var(--paper-white);
		background: var(--paper-white);
		color: var(--cool-2);
		font-size: var(--fs-0);

		&:focus-visible {
			outline: 3px solid var(--warm1);
			outline-offset: 2px;
		}
	}

	& .altcha-field {
		grid-column: 1 / -1;
	}

	& .buttons {
		grid-column: 1;
		display: block;
	}

	& .c-form__button {
		inline-size: auto;
		margin: 0;
		padding: 0.75em 1.25em;
		border: 0;
		border-radius: var(--border-radius);
		background: var(--warm-2);
		color: var(--paper-white);
		font-family: var(--font-interface);
		font-size: var(--fs-0);
		font-weight: 700;
		line-height: 1.2;
		cursor: pointer;

		&:hover {
			background: var(--warm-3);
			color: var(--paper-white);
		}

		&:focus-visible {
			outline: 3px solid var(--paper-white);
			outline-offset: 2px;
			box-shadow: 0 0 0 6px var(--cool-1);
		}
	}
}

/* Rückmeldung nach dem Absenden */
.c-newsletter .notices,
.c-signup .notices {
	margin: 0 0 var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border-inline-start: 4px solid var(--fresh);
	background: color-mix(in srgb, var(--paper-white) 8%, transparent);

	& p {
		margin: 0;
		color: var(--paper-white);
	}

	&.error {
		border-inline-start-color: var(--warm1);
	}
}