@charset "UTF-8";
/*
 * Estrel Tower — Coming Soon Section
 * Figma frame 1920×1080, background #14172D, full-bleed hero
 *
 * Pixel-perfect from Figma nodes 725:113, 725:147, 731:1089, 731:1128, 731:1167, 731:1206
 *
 * Layout reference (1920-design):
 *   Hero image      full-bleed (image inside, overlay #14172D ~0.7)
 *   Title           y=250  GT Alpina Thin Italic 215-225 / 274
 *                   color #FED3CD, centered, line height 274px
 *   "Coming Soon"   y=407  Söhne Buch 190 / 284
 *                   color #FED3CD
 *   Intro           y=691  Söhne Buch 28 / 34
 *                   width 1165, color #FEF5EC, x=378
 *   CTA buttons     y=861  height 30, radius 41.5
 *     Btn1 filled   202 wide,  fill #FED3CD, text #14172D
 *     Btn2 outline  238 wide,  border #FED3CD, text #FEF5EC
 *   Email form      y=827  997×48 input + 210×42 submit
 */

/* Break out of any constrained article wrapper (body.page-content .mod_article
   has max-width:1100px). This makes the section span the full viewport even
   when the page layout is otherwise centered. */
body.page-content .mod_article:has(.estrel-coming-soon) {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Coming-Soon pages: hero starts at y=0, navbar floats fully transparent
   over the hero image (Figma 725:113 etc.). Removes the global 121px body
   padding-top that pushes content below the fixed navbar on regular pages. */
body:has(.estrel-coming-soon) {
    padding-top: 0 !important;
}

body:has(.estrel-coming-soon) .estrel-navbar,
body:has(.estrel-coming-soon) .estrel-navbar::before,
body:has(.estrel-coming-soon) .estrel-navbar.is-scrolled,
body:has(.estrel-coming-soon) .estrel-navbar.is-scrolled::before {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hide Sunset/Sunrise theme-toggle pill on Coming-Soon pages — Figma shows
   no theme switcher on these (the page is locked to sunrise). */
body:has(.estrel-coming-soon) .estrel-theme-toggle,
body:has(.estrel-coming-soon) .estrel-header-pill {
    display: none !important;
}

.estrel-coming-soon {
    container-type: inline-size;
    --u: calc(100cqi / 1920);
    --cs-color-accent: #FED3CD;
    --cs-color-text: #FEF5EC;
    --cs-color-bg: #14172D;
    /* Figma Rectangle 327 has node-opacity 0.5 (rgba 0.08,0.09,0.18 over hero image). */
    --cs-overlay-opacity: 0.5;
    /* Title size in 1920-design pixels. Default 215. Set per-CE via inline style:
       Kulinarik=225, all others=215 (Figma renders different sizes per page name length). */
    --cs-title-size: 215;
    position: relative;
    /* Full-bleed: span 100% of viewport regardless of parent constraints */
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    min-height: calc(1080 * var(--u));
    background: var(--cs-color-bg);
    overflow: hidden;
    isolation: isolate;
}

.estrel-coming-soon__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.estrel-coming-soon__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.estrel-coming-soon__overlay {
    position: absolute;
    inset: 0;
    background: var(--cs-color-bg);
    opacity: var(--cs-overlay-opacity);
}

.estrel-coming-soon__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Frame visual height — content stretches naturally beyond if needed */
    min-height: calc(1080 * var(--u));
    padding: 0;
}

/* === Title (GT Alpina Italic) === */
.estrel-coming-soon__title {
    position: absolute;
    top: calc(250 * var(--u));
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    /* Per-page font size from --cs-title-size (set inline via style attribute,
       fallback 215). Multiplied by --u so it scales with viewport. */
    font-size: calc(var(--cs-title-size) * var(--u));
    line-height: calc(274 * var(--u));
    letter-spacing: 0;
    color: var(--cs-color-accent);
    white-space: nowrap;
}

/* === Subheadline "Coming Soon" (Söhne Buch) === */
.estrel-coming-soon__subhead {
    position: absolute;
    top: calc(407 * var(--u));
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(190 * var(--u));
    line-height: calc(284 * var(--u));
    letter-spacing: 0;
    color: var(--cs-color-accent);
}

/* === Intro text === */
.estrel-coming-soon__intro {
    position: absolute;
    top: calc(691 * var(--u));
    left: calc(378 * var(--u));
    width: calc(1165 * var(--u));
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(28 * var(--u));
    line-height: calc(34 * var(--u));
    letter-spacing: 0;
    color: var(--cs-color-text);
    text-align: center;
}

.estrel-coming-soon__intro p {
    margin: 0 0 calc(8 * var(--u)) 0;
    color: var(--cs-color-text);
    font-size: inherit;
    line-height: inherit;
}

.estrel-coming-soon__intro p:last-child { margin-bottom: 0; }

/* === Two-buttons CTA === */
.estrel-coming-soon__buttons {
    position: absolute;
    top: calc(861 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: calc(46 * var(--u));
    align-items: center;
    z-index: 2;
}

.estrel-coming-soon__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(30 * var(--u));
    padding: 0 calc(36 * var(--u));
    border-radius: calc(41.5 * var(--u));
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.estrel-coming-soon__btn--filled {
    background: var(--cs-color-accent);
    color: var(--cs-color-bg);
    border: 1px solid var(--cs-color-accent);
    /* Figma "Infobroschüre" letter-spacing 2.09px @ 19px ≈ 0.11em */
    letter-spacing: 0.11em;
}

.estrel-coming-soon__btn--filled:hover {
    opacity: 0.85;
}

.estrel-coming-soon__btn--outline {
    background: transparent;
    color: var(--cs-color-text);
    border: 1px solid var(--cs-color-accent);
    /* Figma "Kontaktieren Sie uns" letter-spacing 0.95px @ 19px ≈ 0.05em */
    letter-spacing: 0.05em;
}

.estrel-coming-soon__btn--outline:hover {
    background: var(--cs-color-accent);
    color: var(--cs-color-bg);
}

/* === Email subscribe CTA === */
.estrel-coming-soon__form {
    position: absolute;
    top: calc(827 * var(--u));
    left: calc(461 * var(--u));
    width: calc(997 * var(--u));
    height: calc(48 * var(--u));
    margin: 0;
    z-index: 2;
}

/* Feedback (success/error/loading) direkt unter dem Form. Das Form ist
   position:absolute (height 48u) → top:100% rendert die Meldung knapp darunter
   statt überlagernd auf dem Input. */
/* Override .estrel-newsletter__feedback Pill-Optik (BG, padding, radius) —
   im Coming-Soon Hero-Kontext nur Text auf Bild, ohne Pill-Container. */
.estrel-coming-soon__feedback,
.estrel-coming-soon__feedback[data-state="success"],
.estrel-coming-soon__feedback[data-state="error"],
.estrel-coming-soon__feedback[data-state="loading"] {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
.estrel-coming-soon__feedback {
    position: absolute;
    top: calc(100% + (12 * var(--u)));
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(16 * var(--u));
    line-height: 1.4;
    color: var(--cs-color-text);
    pointer-events: none;
}
.estrel-coming-soon__feedback[data-state="success"] {
    color: var(--cs-color-text) !important;
}
.estrel-coming-soon__feedback[data-state="error"] {
    color: #FF9A8C !important;
}
.estrel-coming-soon__feedback[data-state="loading"] {
    color: rgba(254, 245, 236, 0.7) !important;
}

/* DSGVO-Consent unter dem Newsletter-Form. Selbe Optik wie der globale
   Newsletter-CE (.estrel-newsletter__consent), nur via absolutes Positioning
   weil der Coming-Soon-Form selbst absolut positioniert ist.
   Etwas weiter unten verschoben (940u statt 895u) damit Platz für das Feedback
   zwischen Form und Consent bleibt. */
.estrel-coming-soon__consent {
    position: absolute;
    top: calc(940 * var(--u));
    left: calc(461 * var(--u));
    width: calc(997 * var(--u));
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 300;
    font-size: calc(14 * var(--u));
    line-height: 1.5;
    text-align: center;
    color: rgba(254, 245, 236, 0.7);
    z-index: 2;
}

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

.estrel-coming-soon__consent a:hover {
    color: var(--cs-color-accent);
}

.estrel-coming-soon__field {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--cs-color-text);
    border-radius: calc(41.5 * var(--u));
    padding: 0 calc(45 * var(--u));
    box-sizing: border-box;
}

.estrel-coming-soon__field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.estrel-coming-soon__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--cs-color-text);
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    padding: 0;
    /* Reserve room for the absolute-positioned submit button on the right.
       Submit is 210u wide + 17u offset from input right edge. */
    padding-right: calc(220 * var(--u));
}

.estrel-coming-soon__input::placeholder {
    color: var(--cs-color-text);
    opacity: 0.85;
}

.estrel-coming-soon__submit {
    position: absolute;
    top: calc(3 * var(--u));
    right: calc(4 * var(--u));
    height: calc(42 * var(--u));
    padding: 0 calc(20 * var(--u)) 0 calc(50 * var(--u));
    background: var(--cs-color-accent);
    color: var(--cs-color-bg);
    border: 0;
    border-radius: calc(25 * var(--u));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(20 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.estrel-coming-soon__submit:hover:not([disabled]) {
    opacity: 0.85;
}

.estrel-coming-soon__submit[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.estrel-coming-soon__submit-icon {
    position: absolute;
    left: calc(19 * var(--u));
    top: 50%;
    transform: translateY(-50%);
    width: calc(27 * var(--u));
    height: calc(27 * var(--u));
}

.estrel-coming-soon__message {
    position: absolute;
    top: calc(885 * var(--u));
    left: calc(378 * var(--u));
    width: calc(1165 * var(--u));
    text-align: center;
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: 1.4;
    color: var(--cs-color-text);
    z-index: 3;
}

.estrel-coming-soon__message--confirm {
    color: var(--cs-color-accent);
}

.estrel-coming-soon__message--error {
    color: #FF9A8C;
}

/* === Tablet (641–1280): Frame-Scaling übernimmt — keine Overrides nötig.
   --u = 100cqi/1920 skaliert Title/Subhead/Intro/CTA proportional.
   At viewport 1024: Title=215×0.533=115px, Subhead=190×0.533=101px, gut lesbar. === */

/* === Mobile (≤640) — Stacked Layout === */
@media (max-width: 640px) {
    .estrel-coming-soon {
        --u: calc(100cqi / 375);
        min-height: 100svh;
        padding: calc(120 * var(--u)) 0 calc(60 * var(--u)) !important;
    }

    .estrel-coming-soon__inner {
        position: relative;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(24 * var(--u));
        padding: 0 calc(20 * var(--u));
    }

    .estrel-coming-soon__title,
    .estrel-coming-soon__subhead,
    .estrel-coming-soon__intro,
    .estrel-coming-soon__buttons,
    .estrel-coming-soon__form,
    .estrel-coming-soon__feedback,
    .estrel-coming-soon__consent,
    .estrel-coming-soon__message {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
    }

    .estrel-coming-soon__title {
        font-size: calc(56 * var(--u));
        line-height: calc(64 * var(--u));
        white-space: normal;
        padding: 0;
    }

    .estrel-coming-soon__subhead {
        font-size: calc(48 * var(--u));
        line-height: calc(56 * var(--u));
    }

    .estrel-coming-soon__intro {
        font-size: calc(16 * var(--u));
        line-height: calc(22 * var(--u));
    }

    .estrel-coming-soon__buttons {
        flex-direction: column;
        gap: calc(12 * var(--u));
    }

    .estrel-coming-soon__btn {
        width: 100%;
        height: calc(48 * var(--u));
        font-size: calc(16 * var(--u));
        padding: 0 calc(20 * var(--u));
        border-radius: calc(24 * var(--u));
    }

    .estrel-coming-soon__form {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: calc(12 * var(--u));
    }

    .estrel-coming-soon__field {
        position: relative;
        height: calc(48 * var(--u));
        padding: 0 calc(20 * var(--u));
        border-radius: calc(24 * var(--u));
    }

    .estrel-coming-soon__input {
        font-size: calc(16 * var(--u));
        padding-right: 0;
    }

    .estrel-coming-soon__submit {
        position: relative;
        top: 0;
        right: 0;
        height: calc(48 * var(--u));
        width: 100%;
        padding: 0 calc(20 * var(--u)) 0 calc(50 * var(--u));
        border-radius: calc(24 * var(--u));
        font-size: calc(16 * var(--u));
        justify-content: center;
    }

    .estrel-coming-soon__submit-icon {
        width: calc(20 * var(--u));
        height: calc(20 * var(--u));
        left: calc(20 * var(--u));
    }
}