/* Newsletter-Anmeldung im Footer (.footer__brand). Nutzt die Seiten-Tokens
   (--accent, --surface, --border, --radius-*), funktioniert hell und dunkel. */
.footer-nl { margin-top: 22px; max-width: 360px; display: block; }
.footer-nl__titel { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 8px; }
.footer-nl__zeile { display: flex; gap: 8px; }
.footer-nl__zeile input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: .9rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill, 980px);
}
.footer-nl__zeile input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
/* Button bewusst nicht auf --accent: Weiß auf #FF3B3E (dunkel) bzw. #FF1C20
   (hell) liegt unter WCAG-AA 4,5:1. #E0191D = 4,85:1, Hover #CC1418 = 5,7:1. */
.footer-nl__zeile button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill, 980px);
  font: inherit; font-size: .9rem; font-weight: 600; color: #fff; background: #E0191D; cursor: pointer;
}
.footer-nl__zeile button:hover { background: #CC1418; }
.footer-nl__zeile button:disabled { opacity: .6; cursor: default; }
.footer-nl__hinweis { margin: 8px 0 0; font-size: .75rem; line-height: 1.45; color: var(--text-2); }
.footer-nl__hinweis a { color: inherit; text-decoration: underline; }
.footer-nl__status { margin: 8px 0 0; font-size: .8rem; line-height: 1.45; color: var(--text); }
.footer-nl__status:empty { display: none; }
.footer-nl__status.is-fehler { color: var(--accent); }
.footer-nl.is-gesendet .footer-nl__zeile, .footer-nl.is-gesendet .footer-nl__hinweis { display: none; }
.footer-nl .hp-feld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.footer-nl .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }