/* Newsletter-Karte (Gestaltung F), gemeinsam fuer Teaser (teaser.html, Schluss-Bahn) und Launch-Startseite
   (index.html, eigener Abschnitt vor dem Schluss). Nutzt die Werte aus site.css und f.css. Texte von Terminal B;
   Logik in newsletter-karte.js. */
.f-nl{max-width:600px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--f-radius);box-shadow:var(--f-schatten);
  padding:40px 44px;scroll-margin-top:96px;text-align:left}
.f-nl h2{margin:0 0 12px}
.f-nl .f-nl-lead{color:var(--muted)}
.f-nl-angebot{margin:18px 0 0;padding:14px 18px;border-radius:var(--f-radius-klein);background:var(--peach);color:var(--peach-ink);line-height:1.5}
.f-nl-form{margin-top:24px;display:grid;gap:16px}
.f-nl-form[hidden],.f-nl-fertig[hidden]{display:none}
.f-feld label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.f-feld label small{font-weight:400;color:var(--muted);font-size:.85rem}
.f-feld input{width:100%;box-sizing:border-box;min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:7px;background:var(--paper);
  color:var(--ink);font:inherit}
.f-feld input:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:1px;border-color:var(--accent)}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-einwilligung{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.9rem;line-height:1.5;color:var(--muted)}
.f-einwilligung input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.f-nl-form .button{width:100%;margin-top:4px}
.f-nl-form .button[disabled]{opacity:.6;cursor:progress}
.f-nl-meldung{margin:0;padding:12px 14px;border-radius:7px;font-size:.92rem}
.f-nl-meldung:empty{display:none}
.f-feldfehler{margin:-8px 0 0 32px;font-size:.88rem;color:#b3261e}
.f-feldfehler:empty{display:none}
:root[data-theme=dark] .f-feldfehler{color:#f2b8b5}
.f-nl-meldung[data-art=fehler]{background:color-mix(in srgb,#b3261e 10%,var(--surface));color:var(--ink);border:1px solid color-mix(in srgb,#b3261e 45%,transparent)}
.f-nl-fertig{margin-top:22px;padding:20px 22px;border-radius:var(--f-radius-klein);background:var(--soft)}
.f-nl-fertig h3{margin:0 0 6px;font-size:1.15rem}
.f-nl-fertig p{margin:0}
@media (max-width:700px){
  .f-nl{padding:28px 20px}
}