@charset "UTF-8";
/*
 * Estrel Tower — Architecture & Design Section
 * Pixel-perfect Figma implementation (1920 design frame).
 *
 * Layout:
 *   Section      full-bleed, tower image as background (aspect ~2151:2969)
 *   Title        782 × 216  left 160, top 363
 *     "Architektur" Söhne 400 124/105 + "& Design" Alpina 250i #FEF5EC
 *   Description  646 × 96   left 159, top 612, Söhne 400 24/32 #FEF5EC
 *   Link         178 × 26   left 159, top 737, Alpina 250i 26/26 #FED3CD
 *
 *   7 Hotspot buttons: 71 × 71 circles, bg #FEF5EC
 *   Hotspot cards: 463 × 354, bg #FEF5EC, radius 4
 *     Image 453 × 286
 *     Title: Söhne 400 19/38 #14172D
 *     Floor: Alpina 250 16/22 #14172D
 *
 * Hotspot positions use % relative to tower for correct floor alignment.
 */

.estrel-architecture {
    container-type: inline-size;
    width: 100%;
    max-width: none !important;
    overflow: hidden;
    background: #14172D;
    padding: 0 !important;
    transition: background var(--theme-transition);
}

body.sunrise .estrel-architecture {
    background: #FFF9F3;
}

.estrel-architecture__inner {
    --u: calc(100cqw / 1920);
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

.estrel-architecture__inner {
    --u: calc(100cqw / 1920);
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}


/* ============================
   TOWER IMAGE
   ============================ */

.estrel-architecture__tower {
    position: relative;
    width: 100%;
}

.estrel-architecture__tower-img {
    width: 100%;
    height: auto;
    /* Tower-Bild hat ~14px transparenten Rand unten (von 2977px nativ).
       Clippen via negativem margin + overflow:hidden auf Section. */
    margin-bottom: -0.75cqi;
}

/* Theme-Switch: zwei verschiedene Tower-Renderings (day/night) — design-system
   .estrel-show-night/.estrel-show-sunrise kann nicht direkt greifen weil
   .estrel-architecture__tower-img sonst display setzt. Hier explizit. */
.estrel-architecture__tower-img.estrel-show-night    { display: block; }
.estrel-architecture__tower-img.estrel-show-sunrise  { display: none; }
body.sunrise .estrel-architecture__tower-img.estrel-show-night    { display: none; }
body.sunrise .estrel-architecture__tower-img.estrel-show-sunrise  { display: block; }

/* Gradient fade from section background into the sky above the tower spire.
   Covers top ~15% of the tower container — blends the sky seamlessly
   into the page background without touching the building itself. */
.estrel-architecture__tower::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15%;
    background: linear-gradient(to bottom, #14172D 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

body.sunrise .estrel-architecture__tower::before {
    background: linear-gradient(to bottom, #FFF9F3 0%, transparent 100%);
}

/* Sunrise text overrides */
body.sunrise .estrel-architecture__heading,
body.sunrise .estrel-architecture__overlay-content .estrel-section-title__main,
body.sunrise .estrel-architecture__overlay-content .estrel-section-title__sub {
    color: #14172D;
}

body.sunrise .estrel-architecture__text {
    color: #14172D;
}

body.sunrise .estrel-architecture__link {
    color: #14172D;
}


/* ============================
   OVERLAY CONTENT (top-left)
   ============================ */

.estrel-architecture__overlay-content {
    position: absolute;
    top: 12%;
    left: calc(160 * var(--u));
    z-index: 3;
    width: calc(782 * var(--u));
}

.estrel-architecture__heading {
    margin: 0 0 calc(33 * var(--u));
    color: #FEF5EC;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    letter-spacing: 0;
}

.estrel-architecture__heading-line1 {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-style: normal;
}

.estrel-architecture__heading-line2 {
    display: block;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
}

/* Legacy class support */
.estrel-architecture__overlay-content .estrel-section-title {
    margin-bottom: calc(33 * var(--u));
}

.estrel-architecture__overlay-content .estrel-section-title__main,
.estrel-architecture__overlay-content .estrel-section-title__sub {
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    color: #FEF5EC;
}

/* First line indent — aligns visually with line 2 (same pattern as News/Meetings/Testimonials) */
.estrel-architecture__overlay-content .estrel-section-title__main {
    display: block;
    margin: 0 0 0 calc(155 * var(--u));
}

.estrel-architecture__overlay-content .estrel-section-title__sub {
    display: block;
    margin: 0;
}

.estrel-architecture__text {
    width: calc(646 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(24 * var(--u));
    line-height: calc(32 * var(--u));
    letter-spacing: 0;
    color: #FEF5EC;
    margin: 0 0 calc(29 * var(--u));
}

.estrel-architecture__text p {
    margin: 0;
}

.estrel-architecture__link {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--u));
    color: #FED3CD;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(26 * var(--u));
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.3s;
}

.estrel-architecture__link:hover {
    opacity: 0.85;
    text-decoration: none;
}

.estrel-architecture__link-arrow {
    display: inline-flex;
    width: calc(25 * var(--u));
    height: calc(8 * var(--u));
}

.estrel-architecture__link-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ============================
   HOTSPOT MARKERS (% positioned)
   Figma: 71x71 outer ring (20% opacity) + 44x44 inner circle (solid)
   + 20x20 plus icon (stroke #001A38, 1.5px)
   Night: #FEF5EC   Day: #FED3CD
   ============================ */

.estrel-hotspot {
    --hotspot-color: #FEF5EC;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(71 * var(--u));
    height: calc(71 * var(--u));
    border-radius: 50%;
    border: none;
    background: rgba(254, 245, 236, 0.20);
    color: #001A38;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: transform 0.3s;
    animation: hotspotPulse 3s ease-in-out infinite;
}

/* Inner solid circle — 44x44 centered within 71x71 */
.estrel-hotspot::before {
    content: "";
    position: absolute;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    border-radius: 50%;
    background: var(--hotspot-color);
    z-index: 0;
    transition: transform 0.3s ease;
}

/* Plus icon — 20x20, stroke style */
.estrel-hotspot__marker {
    position: relative;
    z-index: 1;
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    pointer-events: none;
    font-size: 0;
}

/* Horizontal bar of the plus */
.estrel-hotspot__marker::before,
.estrel-hotspot__marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #001A38;
    border-radius: calc(1 * var(--u));
}

.estrel-hotspot__marker::before {
    width: calc(20 * var(--u));
    height: calc(1.5 * var(--u));
    transform: translate(-50%, -50%);
}

.estrel-hotspot__marker::after {
    width: calc(1.5 * var(--u));
    height: calc(20 * var(--u));
    transform: translate(-50%, -50%);
}

/* Hover: pulse keeps running on the parent, only the inner circle scales up
   to avoid transform/animation conflicts that caused a visible jump. */
.estrel-hotspot:hover::before {
    transform: scale(1.08);
}

.estrel-hotspot.is-open {
    animation: none;
}

.estrel-hotspot.is-open::before {
    transform: scale(1.08);
}

/* Sunrise theme — watermelon instead of butter yellow */
body.sunrise .estrel-hotspot {
    --hotspot-color: #FED3CD;
    background: rgba(254, 211, 205, 0.20);
}

/* Figma Day: hotspot cards use salmon pink bg instead of cream */
body.sunrise .estrel-hotspot__card {
    background: #FED3CD;
}

/* Hotspot card images: use display none (not opacity) because they're in flow */
.estrel-hotspot__card-image.estrel-show-sunrise {
    display: none !important;
}
body.sunrise .estrel-hotspot__card-image.estrel-show-night {
    display: none !important;
}
body.sunrise .estrel-hotspot__card-image.estrel-show-sunrise {
    display: block !important;
    opacity: 1 !important;
}

/* Even hotspots: card opens to the LEFT on desktop */
.estrel-hotspot:nth-of-type(even) .estrel-hotspot__card {
    left: auto;
    right: calc(100% + calc(16 * var(--u)));
    transform: translateX(calc(-20 * var(--u))) translateY(-50%);
}

.estrel-hotspot:nth-of-type(even) .estrel-hotspot__card.is-open,
.estrel-hotspot:nth-of-type(even).is-open .estrel-hotspot__card {
    transform: translateX(0) translateY(-50%);
}

/* Wellness (#6): force card to open RIGHT (too close to left edge) */
.estrel-hotspot:nth-of-type(6) .estrel-hotspot__card {
    left: calc(100% + calc(16 * var(--u)));
    right: auto;
    transform: translateX(calc(20 * var(--u))) translateY(-50%);
}
.estrel-hotspot:nth-of-type(6) .estrel-hotspot__card.is-open,
.estrel-hotspot:nth-of-type(6).is-open .estrel-hotspot__card {
    transform: translateX(0) translateY(-50%);
}

/* Foyer (#7): force card to open LEFT */
.estrel-hotspot:nth-of-type(7) .estrel-hotspot__card {
    left: auto;
    right: calc(100% + calc(16 * var(--u)));
    transform: translateX(calc(-20 * var(--u))) translateY(-50%);
}
.estrel-hotspot:nth-of-type(7) .estrel-hotspot__card.is-open,
.estrel-hotspot:nth-of-type(7).is-open .estrel-hotspot__card {
    transform: translateX(0) translateY(-50%);
}

/* Hotspot positions come from backend via inline style (top/left %) */


/* ============================
   PULSE ANIMATION
   Outer ring breathes in and out, inner circle stays solid.
   ============================ */

@keyframes hotspotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(254, 245, 236, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 calc(20 * var(--u)) calc(8 * var(--u)) rgba(254, 245, 236, 0.25);
    }
}


/* ============================
   HOTSPOT CARDS
   ============================ */

.estrel-hotspot__card {
    position: absolute;
    left: calc(100% + calc(16 * var(--u)));
    top: 50%;
    transform: translateX(calc(20 * var(--u))) translateY(-50%);
    width: calc(463 * var(--u));
    background: #FEF5EC;
    border-radius: calc(4 * var(--u));
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 6;
}

.estrel-hotspot__card.is-open,
.estrel-hotspot.is-open .estrel-hotspot__card {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
    pointer-events: auto;
}

.estrel-hotspot__card-image {
    width: calc(453 * var(--u));
    height: calc(286 * var(--u));
    object-fit: cover;
    display: block;
    margin: calc(5 * var(--u));
}

.estrel-hotspot__card-body {
    padding: 0 calc(8 * var(--u)) calc(12 * var(--u));
}

.estrel-hotspot__label {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: calc(38 * var(--u));
    margin: 0;
    color: #14172D;
}

.estrel-hotspot__floors {
    display: block;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
    color: #14172D;
}


/* ============================
   MOBILE (<768)
   ============================ */

@media (max-width: 1024px) {
    .estrel-architecture__overlay-content {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        padding: 40px var(--container-padding);
    }

    .estrel-architecture__heading,
    .estrel-architecture__overlay-content .estrel-section-title__main,
    .estrel-architecture__overlay-content .estrel-section-title__sub {
        font-size: clamp(3rem, 8vw, 5rem);
        line-height: 0.85;
    }

    .estrel-architecture__text {
        width: auto;
        font-size: 1.125rem;
        line-height: 1.6;
    }

    .estrel-architecture__link {
        font-size: 1.125rem;
    }

    .estrel-hotspot {
        width: 50px;
        height: 50px;
    }

    .estrel-hotspot::before {
        width: 32px;
        height: 32px;
    }

    .estrel-hotspot__marker::before {
        width: 14px;
        height: 1.5px;
    }

    .estrel-hotspot__marker::after {
        width: 1.5px;
        height: 14px;
    }

    .estrel-hotspot__card {
        width: 280px;
    }
}

@media (max-width: 767px) {
    .estrel-architecture__overlay-content {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        padding: 30px 20px;
    }

    .estrel-architecture__heading,
    .estrel-architecture__overlay-content .estrel-section-title__main,
    .estrel-architecture__overlay-content .estrel-section-title__sub {
        font-size: clamp(2.5rem, 11vw, 4rem);
        line-height: 0.85;
    }

    .estrel-architecture__text {
        width: auto;
        font-size: 1rem;
        line-height: 1.5;
    }

    .estrel-architecture__link {
        font-size: 1rem;
    }

    .estrel-hotspot {
        width: 36px;
        height: 36px;
    }

    .estrel-hotspot::before {
        width: 24px;
        height: 24px;
    }

    /* Keep text "+" hidden — CSS bars only */
    .estrel-hotspot__marker {
        width: 12px;
        height: 12px;
        font-size: 0;
    }

    .estrel-hotspot__marker::before {
        width: 12px;
        height: 1.5px;
    }

    .estrel-hotspot__marker::after {
        width: 1.5px;
        height: 12px;
    }

    /* Allow cards to overflow the section */
    .estrel-architecture {
        overflow: visible !important;
    }

    /* Card opens to the LEFT of hotspot — avoids covering other hotspots */
    .estrel-hotspot__card {
        position: absolute !important;
        left: auto !important;
        right: calc(100% + 8px) !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateX(10px) translateY(-50%) !important;
        width: 160px !important;
        max-width: 42vw !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        z-index: 100;
    }

    .estrel-hotspot__card.is-open,
    .estrel-hotspot.is-open .estrel-hotspot__card {
        transform: translateX(0) translateY(-50%) !important;
    }

    .estrel-hotspot__card-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10;
        margin: 0 !important;
        border-radius: 8px 8px 0 0;
    }

    .estrel-hotspot__card-body {
        padding: 10px 14px 14px !important;
    }

    .estrel-hotspot__label {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .estrel-hotspot__floors {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }
}