@charset "UTF-8";
/*
 * Estrel Tower — Newsletter Section
 * Pixel-perfect Figma implementation (1920 design frame).
 *
 * Layout:
 *   Section      1920 × 300  bg #FEF5EC (same in both themes)
 *   Logo+Title   435 × 93    centered
 *     Logo       140 × 49    estrel wordmark, #14172D
 *     "Newsletter" GT Alpina 250  64/85  #14172D
 *   Input Field  997 × 48    centered, r=41.5, stroke #14172D/1
 *     Placeholder Söhne 400  20/22  #14172D  op=0.7
 *     Submit     188 × 42    #FED3CD  r=25
 *       Pen icon 27 × 27     stroke #14172D/0.7
 *       "Abonnieren" GT Alpina 250  20/22  #14172D
 *
 *   Vertical spacing: section height 300, title-group ~54px from top,
 *   input ~73px below title group bottom.
 */

.estrel-newsletter {
    container-type: inline-size;
    width: 100%;
    max-width: none !important;
    background: #FEF5EC !important;
    padding: 0 !important;
}

/* Full-viewport bleed; inner .__content stays centered via its own
   max-width: 1920px + margin: 0 auto. Selector matches `section.estrel-newsletter`
   to outrank layout.css `section[class^="estrel-"]` margin: 0 auto. */
section.estrel-newsletter {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Sunrise/Day: inverted — dark bg, light text */
body.sunrise .estrel-newsletter {
    background: #14172D !important;
}

body.sunrise .estrel-newsletter__title {
    color: #FEF5EC;
}

body.sunrise .estrel-newsletter__logo-mark {
    background-color: #FEF5EC;
}

body.sunrise .estrel-newsletter__input {
    border-color: #FEF5EC;
    color: #FEF5EC;
}

body.sunrise .estrel-newsletter__input::placeholder {
    color: #FEF5EC;
}

body.sunrise .estrel-newsletter__input:focus {
    border-color: #FEF5EC;
    box-shadow: 0 0 0 calc(1 * var(--u)) rgba(254, 245, 236, 0.15);
}

.estrel-newsletter__content {
    /* Cap cqw at 1920 so the inner --u-driven sizes stay at Figma scale even
       though the section now spans 100vw on wider viewports. */
    --u: calc(min(100cqw, 1920px) / 1920);
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(300 * var(--u));
    /* Figma 208:276: header-bottom y=147, form-top y=177 → 30u gap.
       Previous 54u put form too low / too tight to the block's bottom. */
    gap: calc(30 * var(--u));
}


/* ============================
   HEADER: Logo + "Newsletter" centered
   ============================ */

.estrel-newsletter__header {
    text-align: center;
}

.estrel-newsletter__logo-mark {
    display: inline-block;
    width: calc(140 * var(--u));
    height: calc(49 * var(--u));
    -webkit-mask: url('/theme/estrel/img/logo.svg') no-repeat center / contain;
    mask: url('/theme/estrel/img/logo.svg') no-repeat center / contain;
    background-color: #14172D;
    vertical-align: baseline;
    margin-right: calc(16 * var(--u));
}

.estrel-newsletter__title {
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(64 * var(--u));
    line-height: calc(85 * var(--u));
    letter-spacing: 0;
    color: #14172D;
}


/* ============================
   FORM: Pill input + button
   ============================ */

.estrel-newsletter__form {
    width: calc(997 * var(--u));
}

.estrel-newsletter__input-group {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(48 * var(--u));
}

.estrel-newsletter__input {
    width: 100%;
    height: 100%;
    border: calc(1 * var(--u)) solid #14172D;
    border-radius: calc(41.5 * var(--u));
    padding: 0 calc(210 * var(--u)) 0 calc(45 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    background: transparent;
    color: #14172D;
    outline: none;
    transition: border-color 0.3s;
}

.estrel-newsletter__input::placeholder {
    color: #14172D;
    opacity: 0.7;
}

.estrel-newsletter__input:focus {
    border-color: #14172D;
    box-shadow: 0 0 0 calc(1 * var(--u)) rgba(20, 23, 45, 0.15);
}

/* Abonnieren button: salmon pill inside the input */
.estrel-newsletter__submit {
    position: absolute;
    right: calc(3 * var(--u));
    top: calc(3 * var(--u));
    height: calc(42 * var(--u));
    width: calc(188 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    background: #FED3CD;
    border: none;
    border-radius: calc(25 * var(--u));
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s;
}

.estrel-newsletter__submit:hover {
    opacity: 0.85;
}

.estrel-newsletter__submit-icon {
    width: calc(27 * var(--u));
    height: calc(27 * var(--u));
    flex-shrink: 0;
}

.estrel-newsletter__submit-text {
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(20 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    color: #14172D;
}


/* ============================
   RESPONSIVE — Tablet (<1024)
   ============================ */

@media (max-width: 1024px) {
    .estrel-newsletter__content {
        height: auto;
        padding: 48px var(--container-padding);
        gap: 32px;
    }

    .estrel-newsletter__logo-mark {
        width: 100px;
        height: 35px;
        transform: translateY(-4px);
    }

    .estrel-newsletter__title {
        font-size: 2.8rem;
        line-height: 1.3;
    }

    .estrel-newsletter__header {
        gap: 10px;
    }

    .estrel-newsletter__form {
        width: 100%;
        max-width: 600px;
    }

    .estrel-newsletter__input-group {
        height: 48px;
    }

    .estrel-newsletter__input {
        font-size: 1rem;
        line-height: 1.2;
        padding: 0 200px 0 24px;
        border-width: 1px;
        border-radius: 41.5px;
    }

    .estrel-newsletter__submit {
        right: 3px;
        top: 3px;
        height: 42px;
        width: 170px;
        border-radius: 25px;
        gap: 6px;
    }

    .estrel-newsletter__submit-icon {
        width: 22px;
        height: 22px;
    }

    .estrel-newsletter__submit-text {
        font-size: 1rem;
        line-height: 1.2;
    }
}


/* ============================
   RESPONSIVE — Mobile (<768)
   ============================ */

@media (max-width: 767px) {
    .estrel-newsletter__content {
        padding: 40px 20px;
        gap: 24px;
    }

    .estrel-newsletter__header {
        gap: 8px;
    }

    .estrel-newsletter__logo-mark {
        width: 70px;
        height: 24px;
        transform: translateY(-3px);
    }

    .estrel-newsletter__title {
        font-size: 2rem;
        line-height: 1.3;
    }

    .estrel-newsletter__form {
        width: 100%;
    }

    .estrel-newsletter__input-group {
        flex-direction: column;
        height: auto;
        gap: 12px;
    }

    .estrel-newsletter__input {
        width: 100%;
        height: 48px;
        font-size: 0.95rem;
        padding: 0 20px;
        border-radius: 41.5px;
        border-width: 1px;
    }

    .estrel-newsletter__submit {
        position: static;
        width: 100%;
        height: 48px;
        border-radius: 41.5px;
        justify-content: center;
        gap: 8px;
    }

    .estrel-newsletter__submit-icon {
        width: 22px;
        height: 22px;
    }

    .estrel-newsletter__submit-text {
        font-size: 1rem;
        line-height: 1.2;
    }
}


/* ============================
   DSGVO-Hinweistext + Feedback (Subscribe-States)
   ============================ */

.estrel-newsletter__consent {
    margin: 14px auto 0;
    max-width: 720px;
    font-family: var(--font-soehne);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    /* Default = Sunset/Night mode → cream BG, also dunkler Text. */
    color: rgba(20, 23, 45, 0.7);
}

/* Sunrise mode: dunkler BG → heller Text. */
body.sunrise .estrel-newsletter__consent {
    color: rgba(254, 245, 236, 0.7);
}

.estrel-newsletter__consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.estrel-newsletter__consent a:hover {
    color: #FED3CD;
}

.estrel-newsletter__feedback {
    margin: 14px auto 0;
    max-width: 720px;
    font-family: var(--font-soehne);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    padding: 10px 18px;
    border-radius: 8px;
}

.estrel-newsletter__feedback[data-state="success"] {
    color: #14172D;
    background: #FED3CD;
}

.estrel-newsletter__feedback[data-state="error"] {
    color: #FED3CD;
    background: rgba(254, 211, 205, 0.1);
    border: 1px solid rgba(254, 211, 205, 0.4);
}

.estrel-newsletter__feedback[data-state="loading"] {
    color: rgba(254, 245, 236, 0.7);
    background: transparent;
}

.estrel-newsletter__submit:disabled {
    opacity: 0.5;
    cursor: wait;
}