@charset "UTF-8";
/*
 * Estrel Tower — Info-Hero (FAQ / AGB / DSGVO / Impressum)
 *
 * Pattern aus Figma 1920-Frame (FAQ 760:908, AGB 760:111, DSGVO 760:661):
 *   "Estrel Tow"  Söhne 400 270/284  x=475  y=254
 *   "er"          Söhne 400 270/284  x=0    y=475
 *   ACCENT_A      GT Alpina 250 italic 280/274  x=303 y=494
 *   ACCENT_B      GT Alpina 250 italic 280/274  x=1060 y=748 (optional, wenn vorhanden)
 *
 * Hero-Höhe in Figma = 1022 (FAQ) bzw. 895 (AGB/DSGVO) — wir nutzen 1022 als Default,
 * Layout-Container "Rectangle 304" h=895 = Cream-Backdrop.
 */

.estrel-info-hero {
    container-type: inline-size;
    /* Cap --u at 1px so on viewports > 1920 the title stays at the Figma-1920
       scale and the inner frame stays centered (cream bg still extends full-bleed
       via 100vw + neg margins). Matches zimmer-hero __frame centering pattern. */
    --u: min(calc(100cqi / 1920), 1px);
    --info-hero-cream: #FEF5EC;
    --info-hero-fg: #14172D;
    /* Full-bleed: 100vw not 100% — at viewports > 1920 the .estrel-page
       wrapper is capped at 1920, so width:100% would leave the right side
       of the viewport empty. Matches coming-soon / accordion / cta-banner. */
    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;
    background: var(--info-hero-cream);
    color: var(--info-hero-fg);
    overflow: hidden;
    isolation: isolate;
}

body.page-content .mod_article:has(.estrel-info-hero) {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:has(.estrel-info-hero) {
    padding-top: 0 !important;
}

.estrel-info-hero__inner {
    position: relative;
    width: 100%;
    /* Cap inner at the Figma 1920-frame and center it; cream stays full-bleed
       on the parent. Mirrors estrel-zimmer-hero__frame centering. */
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    /* Title ends at y=1022; cream stops where title ends, no dead cream below */
    height: calc(1022 * var(--u));
}

.estrel-info-hero__title {
    position: absolute;
    inset: 0;
    margin: 0;
    color: var(--info-hero-fg);
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
}

.estrel-info-hero__line1 {
    position: absolute;
    top: calc(254 * var(--u));
    left: calc(475 * var(--u));
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(270 * var(--u));
    line-height: calc(284 * var(--u));
    letter-spacing: 0;
    white-space: nowrap;
}

.estrel-info-hero__line2 {
    position: absolute;
    top: calc(475 * var(--u));
    left: 0;
    display: inline-flex;
    align-items: baseline;
    line-height: calc(284 * var(--u));
    white-space: nowrap;
}

.estrel-info-hero__main-b {
    font-family: 'Söhne', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(270 * var(--u));
    line-height: calc(284 * var(--u));
    /* Reserve gap from "er" to accent: Figma "er" w=246, accent x=303 → 57u gap */
    margin-right: calc(57 * var(--u));
}

.estrel-info-hero__accent-a {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(280 * var(--u));
    line-height: calc(274 * var(--u));
    /* accent y=494, line2 y=475 → 19u offset down */
    transform: translateY(calc(19 * var(--u)));
}

.estrel-info-hero__line3 {
    position: absolute;
    top: calc(748 * var(--u));
    left: calc(1060 * var(--u));
    line-height: calc(274 * var(--u));
    white-space: nowrap;
}

.estrel-info-hero__accent-b {
    font-family: 'GT Alpina', serif;
    font-style: italic;
    font-weight: 250;
    font-size: calc(280 * var(--u));
    line-height: calc(274 * var(--u));
}


/* ============================
   RESPONSIVE — Tablet ≤ 1024
   ============================ */

@media (max-width: 1024px) {
    .estrel-info-hero {
        --u: calc(100cqi / 1024);
    }

    .estrel-info-hero__inner {
        height: auto;
        padding: calc(120 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u));
    }

    .estrel-info-hero__title {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: calc(8 * var(--u));
    }

    .estrel-info-hero__line1,
    .estrel-info-hero__line2,
    .estrel-info-hero__line3 {
        position: relative;
        top: auto;
        left: auto;
        font-size: calc(120 * var(--u));
        line-height: calc(124 * var(--u));
        white-space: normal;
        display: block;
    }

    .estrel-info-hero__main-b {
        font-size: calc(120 * var(--u));
        line-height: calc(124 * var(--u));
        margin-right: calc(20 * var(--u));
    }

    .estrel-info-hero__accent-a,
    .estrel-info-hero__accent-b {
        font-size: calc(124 * var(--u));
        line-height: calc(124 * var(--u));
        transform: none;
    }
}


/* ============================
   RESPONSIVE — Mobile ≤ 640
   ============================ */

@media (max-width: 640px) {
    .estrel-info-hero {
        --u: calc(100cqi / 375);
    }

    .estrel-info-hero__inner {
        padding: calc(120 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
    }

    .estrel-info-hero__line1,
    .estrel-info-hero__line2,
    .estrel-info-hero__line3,
    .estrel-info-hero__main-b {
        font-size: calc(56 * var(--u));
        line-height: calc(64 * var(--u));
    }

    .estrel-info-hero__accent-a,
    .estrel-info-hero__accent-b {
        font-size: calc(58 * var(--u));
        line-height: calc(64 * var(--u));
    }
}


/* ============================
   DARK VARIANT — .estrel-info-hero-dark
   Wrapper class on the CE (e.g. .estrel-info-hero-dark.content-estrel-info-hero)
   flips the hero to deep-sea bg with watermelon-pink text. The faq-page.css
   cream body-bg rule excludes :has(.estrel-info-hero-dark), so the html bg
   (#14172D) shows through. Reusable on any page.
   ============================ */

/* Swap the hero's bg/fg vars — the existing
   `background: var(--info-hero-cream)` / `color: var(--info-hero-fg)`
   declarations pick up the new values automatically. */
.estrel-info-hero-dark .estrel-info-hero {
    --info-hero-cream: #14172D;
    --info-hero-fg: #FED3CD;
}