@charset "UTF-8";
/*
 * Estrel Tower — Zimmer Overlay (Figma 467:1177 "Overlay Grundrisse")
 *
 * Panel: 1932u deep-sea (#14172D) centered over backdrop.
 * Inner 1920-grid via --u = 100cqi / 1920. Carousel slides peek past edges.
 * Exit (X): top-right 2009,117 / 32x33 cream stroke.
 * Description: left title "Urban Standard Zimmer" (GT Alpina 250 italic 43/50),
 *   right body text (Soehne 400 24/32), CTA "Zimmer anfragen" pill below body.
 * Gallery Hero Karussell: 4 slides 568x546 starting y=416, arrows y=675, dots y=994.
 */

/* ============================
   <dialog> base + backdrop
   ============================ */
.estrel-room-overlay {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    margin: 0;
    color: #FEF5EC;
    overflow: hidden;
}

.estrel-room-overlay:not([open]) {
    display: none;
}

.estrel-room-overlay::backdrop {
    background: transparent;
}

.estrel-room-overlay[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.estrel-overlay-open {
    overflow: hidden;
}

/* ============================
   Panel — full-viewport semi-transparent navy.
   backdrop-filter wird BEWUSST nur im [open]-State angewandt: iOS Safari
   prä-allokiert GPU-Layer für Elemente mit backdrop-filter selbst dann,
   wenn das Parent-Element display:none ist. 4 hidden Dialogs × 100vw×100vh
   blur(14px) Layer = 10s Initial-Hang auf iPhone. Conditional [open]
   Selector löst das, ohne den visuellen Look zu ändern.
   ============================ */
.estrel-room-overlay__panel {
    container-type: inline-size;
    position: relative;
    width: 100vw;
    height: 100vh;
    background: rgba(20, 23, 45, 0.88);
    overflow: hidden;
    --u: calc(100cqi / 1920);
}

.estrel-room-overlay[open] .estrel-room-overlay__panel {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Close button (Figma: overlay-group x=2009, y=117.3 inside panel of inner-x=171).
   Panel-local coords: x=2009-171=1838, y=117.3. Panel-width 1932 → right margin = 62u. */
.estrel-room-overlay__close {
    position: absolute;
    top: calc(117.3 * var(--u));
    right: calc(62 * var(--u));
    width: calc(32 * var(--u));
    height: calc(33 * var(--u));
    min-width: 28px;
    min-height: 28px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #FEF5EC;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    z-index: 3;
}
.estrel-room-overlay__close:hover { opacity: 0.7; }
.estrel-room-overlay__close svg { width: 100%; height: 100%; display: block; }

/* ============================
   Description block (top)
   Figma group at rel-x=336 inside panel (panel-inner-x = 336-171 = 165u).
   Width 1613u. Body-col ends at panel-x = 1136-171+813 = 1778 → right-pad = 154u (asymmetric).
   Title col: 283u, Gap to body: 517u, Body: 813u.
   ============================ */
.estrel-room-overlay__description {
    display: grid;
    grid-template-columns: calc(283 * var(--u)) calc(813 * var(--u));
    column-gap: calc(517 * var(--u));
    padding: calc(211 * var(--u)) calc(154 * var(--u)) 0 calc(165 * var(--u));
}

.estrel-room-overlay__title {
    color: #FEF5EC;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: calc(50 * var(--u));
}
.estrel-room-overlay__title-accent,
.estrel-room-overlay__title-main { display: block; letter-spacing: 0; }

/* Line 1 "Urban Standard" — GT Alpina 250 italic 43/50 (Figma default style) */
.estrel-room-overlay__title-accent {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(43 * var(--u));
}

/* Line 2 "Zimmer" — Söhne 400 40/50 per characterStyleOverrides range 15-21 */
.estrel-room-overlay__title-main {
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(40 * var(--u));
}

.estrel-room-overlay__body-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(19 * var(--u)); /* 326 - 211 - 96 = 19u between body and CTA */
    min-width: 0;
}

.estrel-room-overlay__body {
    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;
    max-width: calc(813 * var(--u));
}

.estrel-room-overlay__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FED3CD;
    color: #14172D;
    border-radius: calc(41.5 * var(--u));
    padding: 0 calc(24 * var(--u));
    width: calc(211 * var(--u));
    height: calc(30 * var(--u));
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: calc(2.09 * var(--u));
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    box-sizing: border-box;
    white-space: nowrap;
}
.estrel-room-overlay__cta:hover { opacity: 0.85; transform: translateY(-1px); }

/* ============================
   Gallery (Hero Karussell)
   Figma: carousel group 2284u spans panel-x -171 … +1761 (panel is 1932 wide).
   → Picture One peeks 171u past left, Picture Four peeks 181u past right.
   Slides 568u wide, gap 4u. Track has no padding — peek comes from negative margins.
   ============================ */
.estrel-room-overlay__gallery {
    position: relative;
    margin-top: calc(60 * var(--u)); /* desc ends y=356, gallery starts y=416 → 60u gap */
    margin-left: calc(-171 * var(--u));
    margin-right: calc(-181 * var(--u));
    /* Gallery === Figma Hero-Karussell group (2284×587 incl. pagination row below slides). */
    height: calc(587 * var(--u));
    /* Panel has overflow:hidden, so anything outside panel box is clipped. */
}

.estrel-room-overlay__track {
    display: flex;
    gap: calc(4 * var(--u));
    transform: translate3d(0, 0, 0);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.estrel-room-overlay__slide {
    flex: 0 0 calc(568 * var(--u));
    width: calc(568 * var(--u));
    height: calc(546 * var(--u));
    border-radius: calc(3 * var(--u));
    overflow: hidden;
    background: #D9D9D9;
}
.estrel-room-overlay__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Arrow pills — Figma group coords x=258/1957, panel-local x=87/1786.
   Y=675.8/677.5 (within 1111 panel) → center-y ≈ 688 ≈ slide vertical center (416+273=689).
   Pill 70×25.6 watermelon #FED3CD, radius 41.5. Arrows sit ABOVE the gallery track
   (z-index:2 against panel, not gallery, so they stay visible over peek clipping). */
/* Arrow pills (Figma Hero-Karussell children).
   Hero-Karussell local coords: left arrow at x=258 y=259.8, right arrow at x=1957 y=261.5
   (Figma-root y=675.8/677.5 minus Hero-Karussell y=416).
   Pill 70×25.6 watermelon. */
.estrel-room-overlay__arrow {
    position: absolute;
    top: calc(259.8 * var(--u));
    width: calc(70 * var(--u));
    height: calc(25.6 * var(--u));
    min-width: 48px;
    min-height: 20px;
    background: #FED3CD;
    color: #14172D;
    border: 0;
    border-radius: calc(41.5 * var(--u));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 4;
    padding: 0;
}
.estrel-room-overlay__arrow:hover { transform: scale(1.06); }
.estrel-room-overlay__arrow svg {
    width: calc(25 * var(--u));
    height: calc(6.8 * var(--u));
    min-width: 18px;
    min-height: 5px;
}
/* Gallery width 2284u. Arrow prev-left=258u; arrow next-right = 2284-1957-70 = 257u. */
.estrel-room-overlay__arrow--prev { left: calc(258 * var(--u)); }
.estrel-room-overlay__arrow--next { right: calc(257 * var(--u)); }

/* Pagination dots — Hero-Karussell local x=1114, y=578 (Figma-root y=994 - 416).
   Width 57u: 4 dots × 9 + 3 gaps × 7 + 1u rounding. */
.estrel-room-overlay__dots {
    position: absolute;
    top: calc(578 * var(--u));
    left: calc(1114 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    z-index: 4;
}
.estrel-room-overlay__dot {
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    min-width: 7px;
    min-height: 7px;
    border-radius: 50%;
    background: #FED3CD;
    border: 1px solid #FED3CD;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}
.estrel-room-overlay__dot.is-active {
    background: transparent;
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 1440px) {
    .estrel-room-overlay__arrow--prev { left: calc(140 * var(--u)); }
    .estrel-room-overlay__arrow--next { right: calc(140 * var(--u)); }
}

@media (max-width: 1024px) {
    .estrel-room-overlay__panel {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        padding: 0 0 24px;
    }
    .estrel-room-overlay__close {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    .estrel-room-overlay__description {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 72px 24px 32px;
    }
    .estrel-room-overlay__title {
        font-size: 32px;
        line-height: 38px;
    }
    .estrel-room-overlay__body {
        font-size: 16px;
        line-height: 24px;
        max-width: 100%;
    }
    .estrel-room-overlay__cta {
        padding: 0 20px;
        min-width: 180px;
        height: 42px;
        min-height: var(--touch-target-min);
        font-size: 16px;
        line-height: 20px;
        border-radius: 30px;
    }

    .estrel-room-overlay__gallery {
        margin: 24px 0 0;
        padding: 0;
        overflow: hidden;
    }
    .estrel-room-overlay__slide {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }
    .estrel-room-overlay__arrow {
        width: 48px;
        height: 32px;
        min-width: 48px;
        min-height: var(--touch-target-min);
        border-radius: 20px;
    }
    .estrel-room-overlay__arrow--prev { left: 12px; }
    .estrel-room-overlay__arrow--next { right: 12px; }
    .estrel-room-overlay__arrow svg { width: 18px; height: 8px; }
    .estrel-room-overlay__dots {
        bottom: 12px;
        gap: 8px;
    }
    .estrel-room-overlay__dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 640px) {
    .estrel-room-overlay__description {
        padding: 60px 16px 24px;
    }
    .estrel-room-overlay__title { font-size: 26px; line-height: 32px; }
    .estrel-room-overlay__body  { font-size: 16px; line-height: 24px; }  /* WCAG floor (was 14px) */
}