/* ============================================================
   NEWSLETTER — Anmeldung, Bestätigung, Abmeldung
   Drei schmale Seiten mit einer einzigen Aufgabe. Sie tragen die
   Optik der Website (tokens.css), aber kein Kapitelraster: Hier
   wird nichts erzählt, hier wird etwas erledigt.

   Eigener Namensraum `nlx-`, nicht `nl-`: `nl-` gehört dem
   Backend (admin.css). Zwei Stylesheets mit denselben Klassen
   waren hier schon einmal ein Fehler, der sich als Browserproblem
   verkleidet hat.
   ============================================================ */

.nlx {
  padding: clamp(96px, 9vw, 130px) var(--inset) clamp(56px, 8vw, 96px);
  max-width: 52ch;
}

.nlx-kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gruen); margin: 0 0 18px;
}

.nlx h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: .95;
  font-size: clamp(30px, 5vw, 52px); color: var(--tinte); margin: 0 0 20px;
}

.nlx-lead { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--sekundaer); margin: 0 0 26px; }
.nlx-lead-gut { color: var(--tanne); font-weight: 400; }

.nlx-form { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; }
.nlx-feld { display: flex; flex-direction: column; gap: 6px; }
.nlx-feld label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nav);
}
.nlx-feld input {
  font-family: 'Hanken Grotesk', sans-serif; font-size: 16px; font-weight: 300;
  padding: 12px 14px; border: 1px solid var(--linie-karte); background: var(--weiss);
  color: var(--tinte); border-radius: 0;
}
.nlx-feld input:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen); }
.nlx-zwei { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .nlx-zwei { grid-template-columns: 1fr 1fr; } }

/* Der Einwilligungssatz ist kein Kleingedrucktes: Er steht in Lesegröße
   über dem Knopf, weil er der eigentliche Inhalt des Formulars ist. */
.nlx-einwilligung {
  display: flex; gap: 12px; align-items: flex-start;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 16px 0; margin: 4px 0 0;
}
.nlx-einwilligung input[type=checkbox] {
  width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--gruen);
}
.nlx-einwilligung span { font-size: 14.5px; line-height: 1.55; color: var(--text); }

.nlx-wege { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }
.nlx-fuss {
  margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.nlx-fuss a { color: var(--gruen); }

.nlx-fehler {
  border-left: 2px solid var(--live); background: rgba(255, 90, 77, .07);
  padding: 12px 16px; margin: 0 0 22px; font-size: 15px; color: var(--tinte);
}

/* Abmeldung: ein Knopf, sonst nichts. Die Fläche darum bleibt leer,
   damit niemand danebengreift. */
.nlx-abmelden { margin: 26px 0 0; }
.nlx-abmelden button {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 15px 30px; border: 0; border-radius: var(--r-pill);
  background: var(--gruen); color: var(--weiss); cursor: pointer;
}
.nlx-abmelden button:hover { background: var(--tanne); }
.nlx-abmelden button:focus-visible { outline: 3px solid var(--tanne); outline-offset: 3px; }