/* ==========================================================================
   Optische Anpassung des Brevo-Newsletter-Formulars an das Seitendesign.

   WICHTIG: Diese Datei ändert ausschließlich das Aussehen. Struktur, Feldnamen,
   IDs, Klassen, das Formularziel und die Brevo-Skripte bleiben unangetastet –
   sie muss deshalb NACH sib-styles.css eingebunden werden, um deren
   Vorgaben zu überschreiben.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rahmen: Brevo bringt einen eigenen weißen Kasten mit – der muss weg,
   das Modal ist bereits der Rahmen.
   -------------------------------------------------------------------------- */

.newsletter-modal .sib-form {
    padding: 0 !important;
    background-color: transparent !important;
}

.newsletter-modal #sib-form-container {
    max-width: none !important;
}

.newsletter-modal #sib-container {
    max-width: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    direction: ltr;
}

.newsletter-modal #sib-form {
    padding: 0 !important;
}

/* Schrift der Seite statt Helvetica/Roboto */
.newsletter-modal #sib-form-container,
.newsletter-modal #sib-form-container * {
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
    letter-spacing: 0.03em;
}

/* Ausnahme für alles, was eine E-Mail-Adresse zeigt: Cinzel ist eine reine
   Versalschrift, eine getippte Adresse erschiene darin durchgehend groß.
   Deshalb hier dieselbe Serifenschrift wie auf den Rechtsseiten. */
.newsletter-modal #sib-container input.input,
.newsletter-modal #sib-container input.input::placeholder,
.newsletter-modal #sib-form-container .entry__specification {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif !important;
    letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   Beschreibungstext
   -------------------------------------------------------------------------- */

.newsletter-modal .sib-text-form-block p {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    color: rgba(245, 245, 245, 0.8);
}

/* --------------------------------------------------------------------------
   Eingabefeld – übernimmt das Aussehen von input[type="email"] aus modal.css
   -------------------------------------------------------------------------- */

.newsletter-modal .entry__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: left;
    color: rgba(245, 245, 245, 0.85) !important;
}

/* Brevo setzt das Pflichtfeld-Sternchen rot – in Gold passt es ins Bild */
.newsletter-modal .entry__label::after {
    color: #d9a655 !important;
}

.newsletter-modal .entry__field {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.newsletter-modal #sib-container input.input {
    width: 100%;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
    color: #f5f5f5 !important;
    background-color: rgba(245, 245, 245, 0.1) !important;
    border: 1px solid rgba(245, 245, 245, 0.3) !important;
    border-radius: 4px !important;
    outline: none;
    transition: background-color 0.3s, border-color 0.3s;
}

.newsletter-modal #sib-container input.input:focus {
    background-color: rgba(245, 245, 245, 0.15) !important;
    border-color: #d9a655 !important;
}

.newsletter-modal #sib-container input.input::placeholder {
    color: rgba(245, 245, 245, 0.4);
    text-align: left;
}

/* Hinweiszeile unter dem Feld */
.newsletter-modal .entry__specification {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem !important;
    font-style: italic;
    text-align: left;
    color: rgba(245, 245, 245, 0.45) !important;
}

/* --------------------------------------------------------------------------
   Sichtbares reCAPTCHA-Widget

   Das Widget ist ein iframe von Google mit fester Größe (304 × 78 px) und
   lässt sich von außen nicht umgestalten – dunkel gestellt wird es über
   data-theme="dark" am Element selbst. Hier wird es nur mittig gesetzt.
   -------------------------------------------------------------------------- */

.newsletter-modal .sib-captcha .form__label-row {
    display: flex;
    justify-content: center;
}

/* Auf schmalen Displays passt die feste Breite nicht mehr in das Modal –
   herunterskalieren und links ausrichten, damit nichts herausragt. */
@media (max-width: 380px) {
    .newsletter-modal .sib-captcha .form__label-row {
        justify-content: flex-start;
        overflow: hidden;
    }

    .newsletter-modal #sib-captcha {
        transform: scale(0.88);
        transform-origin: left top;
    }
}

/* --------------------------------------------------------------------------
   Absendeschaltfläche – wie .event-details-button im übrigen Seitendesign
   -------------------------------------------------------------------------- */

.newsletter-modal .sib-form-block:has(.sib-form-block__button) {
    text-align: center !important;
}

.newsletter-modal .sib-form-block__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.8rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    color: #121212 !important;
    background-color: #d9a655 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.newsletter-modal .sib-form-block__button:hover {
    background-color: #c69144 !important;
    transform: translateY(-2px);
}

.newsletter-modal .sib-form-block__button:focus-visible {
    outline: 2px solid #d9a655;
    outline-offset: 3px;
}

/* Ladeanzeige im Knopf */
.newsletter-modal .sib-form-block__button .icon {
    width: 16px;
    height: 16px;
    fill: #121212;
}

/* --------------------------------------------------------------------------
   Rückmeldungen: Brevo blendet diese Felder per Skript ein – nur einfärben
   -------------------------------------------------------------------------- */

.newsletter-modal .sib-form-message-panel {
    max-width: none !important;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem !important;
    font-size: 0.9rem !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 4px !important;
}

.newsletter-modal #error-message {
    color: #f3b5b5 !important;
    background-color: rgba(160, 40, 40, 0.18) !important;
    border-color: rgba(220, 90, 90, 0.55) !important;
}

.newsletter-modal #success-message {
    color: #b6e6c8 !important;
    background-color: rgba(40, 130, 80, 0.18) !important;
    border-color: rgba(90, 200, 140, 0.55) !important;
}

.newsletter-modal .sib-form-message-panel .sib-icon {
    fill: currentColor;
}

/* Fehlermeldung direkt am Feld */
.newsletter-modal .entry__error {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.8rem !important;
    color: #f3b5b5 !important;
    background-color: rgba(160, 40, 40, 0.18) !important;
    border: 1px solid rgba(220, 90, 90, 0.55) !important;
    border-radius: 4px !important;
}

/* --------------------------------------------------------------------------
   Brevo-Datenschutzhinweis
   -------------------------------------------------------------------------- */

.newsletter-modal .sib-form__declaration {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: none !important;
    padding: 1rem 0 0 !important;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(245, 245, 245, 0.08);
}

.newsletter-modal .declaration-block-icon {
    flex-shrink: 0;
    color: rgba(217, 166, 85, 0.55);
}

.newsletter-modal .svgIcon-sphere {
    width: 42px !important;
    height: 42px !important;
}

.newsletter-modal .sib-form__declaration p {
    margin: 0;
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.6;
    text-align: left;
    color: rgba(245, 245, 245, 0.45);
}

.newsletter-modal #sib-container a,
.newsletter-modal .sib-form__declaration a {
    color: #d9a655 !important;
    text-decoration: underline;
}

.newsletter-modal #sib-container a:hover {
    color: #f0c584 !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .newsletter-modal .sib-form__declaration {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .newsletter-modal .sib-form-block__button {
        width: 100%;
    }
}