/* ============================================================
   Newsletter — Formular im CTA-Band (.band) des Manuals.
   Form, Farbe und Rundung kommen vom Band; hier stehen nur die Felder.
   Kein Hex, keine eigene Schrift — alles aus var(--…).
   ============================================================ */

.nl__form{position:relative;max-width:34rem;margin:0 auto;text-align:left}

/* Vorname schmal, E-Mail breit — die Pflichtangabe bekommt den Platz. */
.nl__reihe{display:grid;grid-template-columns:1fr 1.4fr;gap:.9rem}
@media(max-width:640px){.nl__reihe{grid-template-columns:1fr}}

.nl__feld{display:block}
.nl__feld span{display:block;font-family:var(--font-b);font-weight:500;font-size:var(--fs-2xs);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 .5rem}
.nl__feld b{color:var(--gold-soft);font-weight:500}
.nl__feld input{width:100%;font-family:var(--font-b);font-weight:300;font-size:var(--fs-md);color:var(--white);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-btn);
  padding:.85rem 1rem;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nl__feld input:hover{border-color:rgba(255,255,255,.5)}
.nl__feld input:focus{border-color:var(--gold-soft);background:rgba(255,255,255,.14)}
/* Fokusring bleibt sichtbar — Tastaturbedienung ist kein Sonderfall. */
.nl__feld input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

/* Die Frage-Schranke. Sieht aus wie die anderen Felder — sie ist keins zweiter Klasse,
   sondern der letzte Handgriff vor dem Absenden. Label ist hier ein <label> statt eines
   <span>, damit Screenreader es sauber mit dem Feld verbinden. */
/* Ein Satz, kein Feldname — also normal gesetzt statt gesperrte Versalien.
   Beide Zeilen laufen auf --fs-xs, derselben Stufe wie `.nl__klein` am Fuß des Bandes.
   Getrennt werden Hinweis und Frage über die Helligkeit, nicht über die Größe.
   text-transform und letter-spacing müssen ausdrücklich zurück — ohne das erbt der
   Hinweis die gesperrten Versalien von `.nl__feld span` und schreit den Gast an. */
.nl__feld--frage{margin-top:.9rem;text-align:left}
.nl__feld--frage .sdo-frage__hinweis{display:block;font-family:var(--font-b);font-weight:300;
  font-size:var(--fs-xs);line-height:1.5;color:rgba(255,255,255,.55);margin:0 0 .3rem;
  text-transform:none;letter-spacing:0}
.nl__feld--frage label{display:block;font-family:var(--font-b);font-weight:300;font-size:var(--fs-xs);
  color:rgba(255,255,255,.88);margin:0 0 .45rem}

.nl__check{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 0 1.4rem;
  font-size:var(--fs-md);line-height:1.6;color:rgba(255,255,255,.82);text-align:left;cursor:pointer}
.nl__check input{flex:none;width:1.15rem;height:1.15rem;margin-top:.18rem;accent-color:var(--gold);cursor:pointer}
.nl__check input:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.nl__check a{color:var(--white);text-decoration:underline;text-underline-offset:2px}
.nl__check a:hover{color:var(--gold-soft)}

.nl__form .btn{width:100%;justify-content:center}

/* .band p zentriert und begrenzt auf 48ch — der Kleingedruckte-Satz gehört unters Feld. */
.nl .nl__klein{font-size:var(--fs-xs);line-height:1.6;color:rgba(255,255,255,.62);margin:1.1rem 0 0;max-width:none;text-align:left}

.nl__hinweis{position:relative;max-width:44ch;margin:0 auto 1.4rem;padding:.85rem 1.1rem;
  border-radius:var(--r-md);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:var(--white);font-size:var(--fs-md);line-height:1.6}
.nl__hinweis--gut{border-color:var(--gold-soft)}

/* Honigtopf: aus dem Blick, aber nicht display:none — das übersehen manche Bots absichtlich. */
.nl__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}