/* ==========================================================================
   FW Newsletter — Anmeldung
   Designsprache wie das Spendenformular: eckige Kanten, Gelb/Lila, Radius nur
   an Knopf und Auswahlfeldern. Fließtext 16px, Hinweise 14px. Die Farbwerte
   stehen als Rückfall in jeder Regel, weil dieses Formular auch auf Auftritten
   läuft, die spendenformular.css nicht laden.
   ========================================================================== */

.fw-nl {
    --fw-nl-lila: var(--fwo-primary, #783594);
    --fw-nl-lila-dunkel: var(--fwo-primary-dark, #5e2a75);
    --fw-nl-gelb: var(--fwo-secondary, #F6D06A);
    --fw-nl-sanft: var(--fwo-secondary-soft, #FBF3DA);
    --fw-nl-text: var(--fwo-text, #27292B);
    --fw-nl-leise: var(--fwo-muted, #6E6577);
    --fw-nl-rand: var(--fwo-border, #D9D4DE);

    max-width: 760px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--fw-nl-text);
    font-size: 16px;
    line-height: 1.55;
}

/* --- Adresszeile ---------------------------------------------------------- */

.fw-nl__feld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.fw-nl__feld label {
    font-weight: 600;
    line-height: 1.4 !important;
    color: var(--fw-nl-lila);
}

.fw-nl input[type="email"] {
    width: 100%;
    max-width: 440px;
    padding: 12px 14px !important;
    border: 2px solid var(--fw-nl-rand) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--fw-nl-text) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

.fw-nl input[type="email"]:focus {
    border-color: var(--fw-nl-lila) !important;
    outline: 2px solid var(--fw-nl-lila);
    outline-offset: 2px;
}

/* --- Auswahl der Listen --------------------------------------------------- */

.fw-nl__listen {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
}

.fw-nl__listen legend {
    margin-bottom: 14px;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--fw-nl-text);
}

.fw-nl__liste {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 2px solid var(--fw-nl-rand);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.fw-nl__liste:focus-within,
.fw-nl__liste:hover {
    border-color: var(--fw-nl-lila);
    background: var(--fw-nl-sanft);
}

/* Die Zielgruppe ist älter — 24px Kantenlänge statt der Vorgabe des Browsers */
.fw-nl__liste input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    margin: 2px 0 0 !important;
    accent-color: var(--fw-nl-lila);
    grid-row: 1 / span 2;
    cursor: pointer;
}

.fw-nl__liste label {
    display: contents;
    cursor: pointer;
}

/* Zeilenhöhe steht hier ausgeschrieben: das Theme setzt `span` auf 1.0, und
   geerbt wird sie über `display: contents` des Labels ohnehin nicht. Ohne diese
   beiden Zeilen stand der Beschreibungstext bei 15px auf 15px Zeilenhöhe,
   während der Fließtext daneben mit 1.5 läuft. */
.fw-nl__name {
    grid-column: 2;
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    color: var(--fw-nl-lila);
}

.fw-nl__text {
    grid-column: 2;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--fw-nl-text);
}

/* --- Knopf und Meldungen -------------------------------------------------- */

.fw-nl__knopf {
    padding: 13px 28px !important;
    border: 2px solid var(--fw-nl-lila) !important;
    border-radius: 8px !important;
    background: var(--fw-nl-lila) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.fw-nl__knopf:hover,
.fw-nl__knopf:focus {
    background: var(--fw-nl-gelb) !important;
    color: var(--fw-nl-lila) !important;
}

.fw-nl__knopf[disabled] {
    opacity: 0.6;
    cursor: default;
}

.fw-nl__meldung {
    margin: 16px 0 0 !important;
    font-size: 16px;
}

.fw-nl__meldung:empty {
    display: none;
}

.fw-nl__meldung--erfolg {
    padding: 12px 14px;
    border-left: 4px solid var(--fw-nl-lila);
    background: var(--fw-nl-sanft);
    font-weight: 600;
}

.fw-nl__meldung--fehler {
    padding: 12px 14px;
    border-left: 4px solid #B3261E;
    background: #FBEAE8;
    color: #7A1C16;
    font-weight: 600;
}

.fw-nl__meldung--warten {
    color: var(--fw-nl-leise);
}

.fw-nl__hinweis {
    margin: 14px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.5;
    color: var(--fw-nl-leise);
}

.fw-nl__hinweis a {
    color: var(--fw-nl-lila);
    text-decoration: underline;
}

/* Honigtopf: sichtbar nur für Maschinen, die CSS nicht lesen */
.fw-nl__falle {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.fw-nl--fertig .fw-nl__feld,
.fw-nl--fertig .fw-nl__listen,
.fw-nl--fertig .fw-nl__knopf,
.fw-nl--fertig .fw-nl__hinweis {
    display: none;
}

/* --- Schmale Fenster ------------------------------------------------------ */

@media (max-width: 767px) {
    .fw-nl__liste {
        padding: 12px 14px;
        gap: 4px 10px;
    }

    .fw-nl__knopf {
        width: 100%;
    }
}