/* Newsletter-Anmeldung – Optik wie das fruehere Brevo-Formular,
   aber ohne externe Abhaengigkeit (sib-styles.css / sibforms main.js entfallen). */

.nl-form {
    text-align: left;
    font-family: Calibri, sans-serif;
}

.nl-form a {
    text-decoration: none;
    color: var(--main-red, #94121d);
}

.nl-block {
    padding: 8px 0;
}

.nl-title p {
    margin: 0;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--main-text-color, #303030);
}

/* --- E-Mail-Feld --- */
.nl-label {
    display: block;
    margin-bottom: 10px;
    font-size: .9rem;
    font-weight: 400;
    color: var(--main-text-color, #303030);
}

.nl-req {
    color: #ff4949;
}

.nl-field .form-control {
    border-radius: .375rem;
    border-color: #303030;
}

/* --- Checkbox: Standard-Bootstrap (.form-check), Styling kommt aus style.css --- */
.nl-form .form-check {
    align-items: flex-start;
}

.nl-form .form-check-input {
    flex-shrink: 0;
    margin-top: 0.15em;
}

.nl-form .form-check-label {
    margin-top: 0;
}

.nl-spec {
    margin: 10px 0 0;
    font-size: .8rem;
    color: #8390A4;
}

/* --- Brevo-Hinweis mit Kugel-Icon --- */
.nl-declaration {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nl-declaration-icon {
    flex-shrink: 0;
    display: flex;
}

.nl-declaration-icon svg {
    width: 63px;
    height: 63px;
}

.nl-declaration-text p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5em;
    color: #687484;
}

/* Meldungen: Bootstrap-Alert #newsletter-feedback, gesteuert von newsletter.js
   (gleiche Logik wie das Kontaktformular). Kein eigenes CSS nötig. */

/* --- Button mit Ladeanzeige --- */
.nl-submit .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.nl-btn-loader {
    display: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.nl-form.is-submitting .nl-btn-loader {
    display: inline-block;
    animation: nl-spin 1s linear infinite;
}

@keyframes nl-spin {
    to { transform: rotate(360deg); }
}