/* =========================================================================
   DIE NEWSLETTER-SEITE

   Ruhiger als die Startseite: Wer hier landet, hat sich schon
   entschieden, etwas zu lesen. Die Seite muss nicht überzeugen, sie muss
   erklären, was kommt und wie oft, und dann aus dem Weg gehen.

   Das Formular steht deshalb oben und nicht am Ende. Wer den Newsletter
   aus einer Empfehlung heraus sucht, soll nicht erst scrollen.
   ========================================================================= */

.nl-kopf {
  padding: 190px 0 70px;
  background: var(--cream);
}
.nl-kopf-schmal { padding-bottom: 90px; }

.nl-kopf-innen { max-width: 680px; }
.nl-kopf h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.15;
  margin: 10px 0 18px;
}
.nl-lead {
  font-family: var(--serif-lesbar);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--anthracite);
  margin-bottom: 30px;
}

.nl-form { margin-bottom: 4px; }
.nl-felder {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  margin-bottom: 16px;
}
.nl-feld { display: block; }
.nl-beschriftung {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-grey);
  margin-bottom: 7px;
}
.nl-beschriftung em { font-style: normal; text-transform: none; letter-spacing: 0; }
.nl-feld input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--charcoal);
}
.nl-feld input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-color: var(--orange);
}

/* Der Hinweis benutzt dieselbe Klasse wie im Footer, braucht auf hellem
   Grund aber andere Farben. */
.nl-hinweis {
  color: var(--anthracite);
  margin-top: 16px;
  font-size: 0.95rem;
}
.nl-hinweis.ist-gut { color: var(--sage-deep); }
.nl-hinweis.ist-fehler { color: var(--orange-dark); }

.nl-recht {
  margin-top: 18px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--warm-grey);
  max-width: 60ch;
}
.nl-recht a { color: var(--anthracite); text-decoration: underline; }

/* ---------- Was drinsteht ---------- */

.nl-inhalt { padding: 80px 0 96px; }
.nl-h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  margin-bottom: 30px;
}
.nl-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 56px;
}
.nl-karte {
  padding: 30px 26px 28px;
  background: var(--offwhite);
  border: 1px solid var(--sand);
  border-radius: 14px;
}
.nl-nummer {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--orange);
  margin-bottom: 12px;
}
.nl-karte h3 { font-size: 1.1rem; margin-bottom: 10px; }
.nl-karte p { font-size: 0.94rem; line-height: 1.7; color: var(--anthracite); }

.nl-fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 28px 0;
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  margin-bottom: 64px;
}
.nl-fakt { text-align: center; }
.nl-fakt strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.nl-fakt span { font-size: 0.86rem; color: var(--warm-grey); }

.nl-abschluss { text-align: center; max-width: 560px; margin: 0 auto; }
.nl-abschluss p { margin-bottom: 22px; color: var(--anthracite); }
.nl-abschluss-klein {
  margin-top: 16px;
  font-size: 0.84rem;
  color: var(--warm-grey);
}

.nl-stand-weiter { margin-top: 10px; }

@media (max-width: 900px) {
  .nl-raster { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nl-kopf { padding: 150px 0 56px; }
  .nl-felder { grid-template-columns: 1fr; }
  .nl-inhalt { padding: 60px 0 72px; }
  .nl-fakten { grid-template-columns: 1fr; gap: 22px; }
}