@charset "UTF-8";
/*
 * Estrel Tower — CTA Banner (Meetings & Events)
 * Figma 467:7438 — 1923×390, dark-navy overlay, image bleed, centered text + pink button.
 * Headline: Söhne Buch 400 40/48 #FEF5EC, with <em> as GT Alpina 250 italic 43.
 */

.estrel-cta-banner {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    --cta-navy: #14172D;
    --cta-cream: #FEF5EC;
    --cta-pink: #FED3CD;
    position: relative;
    width: 100%;
    height: calc(390 * var(--u));
    overflow: hidden;
    background: var(--cta-navy);
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-cream);
}

/* Full-viewport bleed; the inner flex centers .__content automatically.
   Selector is `section.estrel-cta-banner` to outrank layout.css
   `section[class^="estrel-"]` which sets max-width: 1920 + margin: 0 auto. */
section.estrel-cta-banner {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

.estrel-cta-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.55;
}

.estrel-cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 23, 45, 0.55) 0%,
        rgba(20, 23, 45, 0.85) 100%
    );
    z-index: 1;
}

.estrel-cta-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: calc(800 * var(--u));
    padding: 0 calc(40 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--u));
}

.estrel-cta-banner__headline {
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(48 * var(--u));
    color: var(--cta-cream);
    letter-spacing: 0;
}
.estrel-cta-banner__headline em {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(43 * var(--u));
}

.estrel-cta-banner__body {
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    color: var(--cta-cream);
    max-width: calc(725 * var(--u));
}
/* Globale typography.css setzt p { color: var(--text-secondary) } —
   hier mit höherer Spezifität auf cream forcen damit der Body-Text auf
   dem dunklen CTA-Banner-Hintergrund lesbar bleibt. */
.estrel-cta-banner__body p,
.estrel-cta-banner__body { margin: 0; color: var(--cta-cream); }

.estrel-cta-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(48 * var(--u));
    padding: 0 calc(40 * var(--u));
    border-radius: calc(30 * var(--u));
    background: var(--cta-pink);
    color: var(--cta-navy);
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 400;
    font-size: calc(16 * var(--u));
    line-height: calc(24 * var(--u));
    text-decoration: none;
    margin-top: calc(8 * var(--u));
    transition: background 0.2s ease, color 0.2s ease;
    min-width: calc(316 * var(--u));
    white-space: nowrap;
}
.estrel-cta-banner__cta:hover {
    background: var(--cta-cream);
    color: var(--cta-navy);
}

@media (max-width: 1024px) {
    .estrel-cta-banner {
        --u: calc(100cqi / 1024);
        height: auto;
        min-height: calc(320 * var(--u));
        padding: calc(48 * var(--u)) calc(36 * var(--u));
    }
    .estrel-cta-banner__content { max-width: 100%; }
}

@media (max-width: 768px) {
    .estrel-cta-banner {
        --u: calc(100cqi / 375);
        min-height: calc(280 * var(--u));
        padding: calc(40 * var(--u)) calc(20 * var(--u));
    }
    .estrel-cta-banner__headline {
        font-size: calc(24 * var(--u));
        line-height: calc(30 * var(--u));
    }
    .estrel-cta-banner__headline em {
        font-size: calc(26 * var(--u));
    }
    .estrel-cta-banner__body {
        font-size: calc(14 * var(--u));
        line-height: calc(20 * var(--u));
    }
    .estrel-cta-banner__cta {
        width: 100%;
        height: calc(48 * var(--u));
        font-size: calc(14 * var(--u));
        min-width: 0;
    }
}