/* ==========================================================================
   Newsletter-Seite (/about/newsletter), Template newsletter.php
   Konsumiert: --pw-* aus global.css, .pw-hero--dark (global.css) und die
   Formular-Klassen .pw-newsletter__* aus closing.css.
   ========================================================================== */

/* #content bringt 40px Innenabstand unten mit; hier enden die Sektionen bündig
   am Footer. */
#content.nl-page { padding-bottom: 0; }

/* --- Hero: Typo wie .ab-hero (Über uns), plus Formular --- */
.nl-hero { padding: var(--pw-section-hero); }
/* Über dem Punktraster-Overlay des Primitivs. */
.nl-hero__inner { position: relative; z-index: 1; text-align: center; }
/* Doppelte Klasse: .pw-hero--dark p (0,1,1) färbte den Eyebrow sonst grau. */
.nl-hero .nl-hero__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pw-brand);
	margin: 0 0 var(--pw-space-md);
}
.nl-hero__title {
	font-size: clamp(34px, 6vw, 56px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 var(--pw-space-lg);
	color: #fff;
}
.nl-hero__lead { max-width: 680px; margin: 0 auto; }
.nl-hero__lead p {
	font-size: clamp(17px, 2.2vw, 20px);
	line-height: 1.6;
	color: var(--pw-fg-muted);
	margin: 0;
}
.nl-hero__form {
	max-width: 520px;
	margin: var(--pw-space-2xl) auto 0;
	text-align: left;
}
.nl-hero__form .pw-newsletter__legal,
.nl-hero__form .pw-newsletter__status { text-align: center; }

/* --- Textsektionen: weiß und Alt-Hintergrund im Wechsel --- */
.nl-section { padding: var(--pw-space-3xl) 0; background: var(--pw-bg); }
.nl-section--alt { background: var(--pw-bg-alt); }

@media (max-width: 600px) {
	.nl-hero { padding: 56px 0 48px; }
	.nl-section { padding: var(--pw-space-2xl) 0; }
	.nl-hero__form .pw-newsletter__row { flex-direction: column; }
}