@charset "UTF-8";
/*
 * Estrel Tower — Zimmer Pages CSS
 *
 * Shared file for all Phase-5 Zimmer-page content elements.
 * Section-scoped. Conventions:
 *   - container queries (cqi) where useful
 *   - var(--font-alpina) for serif-italic, var(--font-soehne) for sans
 *   - var(--text-primary) / var(--btn-primary-bg) / etc.
 *   - mobile breakpoints: <900px stack, <768px tighter
 *
 * Sections in this file:
 *   1. estrel_text_intro
 *   2. estrel_room_hero
 *   3. estrel_room_grid
 *   4. estrel_seo_section
 *   5. estrel_faq
 */

/* ============================
   1. estrel_text_intro
   ============================ */

.estrel-intro {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    /* Default intro padding moderate so chain paddings apply cleanly. */
    padding: calc(44 * var(--u)) calc(40 * var(--u));
}
.estrel-intro__inner,
.estrel-intro__inner p,
.estrel-intro__inner em {
    /* Figma 208:399: body fill #14172D (no opacity). Override the global
       p { color: var(--text-secondary) } in typography.css. */
    color: var(--color-deep-sea, #14172D);
}
.estrel-intro__inner {
    /* Figma overview intro paragraph (208:399): 1112×104, Söhne Buch 400 28/34 */
    max-width: calc(1112 * var(--u));
    margin: 0 auto;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(28 * var(--u));
    line-height: calc(34 * var(--u));
}
.estrel-intro--center .estrel-intro__inner { text-align: center; }
.estrel-intro--left   .estrel-intro__inner { text-align: left; }

.estrel-intro__inner em {
    /* Figma 208:399 charStyleOverride range 39-45 ("Zimmer"): GT Alpina 250 italic 32/34 */
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(32 * var(--u));
}

/* Overview-Page paragraph intro — Figma 208:399 at y=1199 directly after hero
   (hero-inner ends at y=1199) and 129u gap before cards at y=1432. */
.estrel-intro--paragraph {
    padding: 0 calc(40 * var(--u)) calc(129 * var(--u)) !important;
}

/* Pullquote Detail-Statement — Figma 208:1065 Statement group 1572×195
   Text "27 m² urbaner Komfort..." GT Alpina Thin Italic 250 54px / lh 64.8 (120%)
   centered, max-width ~1572px of 1920.
*/
.estrel-intro--pullquote {
    --u: calc(min(100vw, 1920px) / 1920);
    /* Figma Statement y=1582 (144 below booking bottom 1438), text h=195, next section y=1936.
       Top padding 144 gives gap from booking. Bottom 0 — next section provides its own gap. */
    padding: calc(144 * var(--u)) calc(174 * var(--u)) 0 !important;
    width: 100%;
    text-align: center;
}
.estrel-intro--pullquote .estrel-intro__inner {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(54 * var(--u));
    line-height: calc(64.8 * var(--u));
    color: var(--color-deep-sea, #14172D);
    max-width: calc(1572 * var(--u));
    margin: 0 auto;
    text-align: center;
    letter-spacing: 0;
}
.estrel-intro--pullquote .estrel-intro__inner p { margin: 0; }
@media (max-width: 900px) {
    .estrel-intro--pullquote {
        --u: calc(100cqi / 720);
        padding: calc(40 * var(--u)) calc(24 * var(--u)) !important;
    }
    .estrel-intro--pullquote .estrel-intro__inner {
        font-size: calc(24 * var(--u));
        line-height: 1.3;
    }
}

/* --- Responsive: default .estrel-intro paragraph + em (non-pullquote) ---
   WCAG floor: body-text >= 16px, em-italic >= 18px.
   The desktop rule uses calc(28 * var(--u)) where --u = viewport/1920,
   which at 375px gives ~5.5px -- unusable. These blocks fix that.
*/
@media (max-width: 1024px) and (min-width: 768px) {
    /* Tablet: anchor --u to 1024-wide canvas so values stay proportional */
    .estrel-intro:not(.estrel-intro--pullquote) {
        --u: calc(100cqi / 1024);
    }
    .estrel-intro:not(.estrel-intro--pullquote) .estrel-intro__inner {
        font-size: clamp(18px, calc(28 * var(--u)), 22px);
        line-height: 1.45;
    }
    .estrel-intro:not(.estrel-intro--pullquote) .estrel-intro__inner em {
        font-size: clamp(20px, calc(32 * var(--u)), 26px);
    }
}

@media (max-width: 767px) {
    /* Mobile: clamp() gives 16px floor, readable cap, and proportional mid-range.
       --u re-anchored to 375 so padding stays proportional to mobile design frame
       (without re-anchor, inherited desktop --u collapses padding to ~4px @ 375). */
    .estrel-intro:not(.estrel-intro--pullquote) {
        --u: calc(100cqi / 375);
        padding: calc(24 * var(--u)) calc(20 * var(--u));
    }
    .estrel-intro:not(.estrel-intro--pullquote) .estrel-intro__inner {
        font-size: clamp(16px, 4.5vw, 22px); /* floor 16px (WCAG min), cap 22px */
        line-height: 1.5;
    }
    .estrel-intro:not(.estrel-intro--pullquote) .estrel-intro__inner em {
        font-size: clamp(18px, 5vw, 24px); /* floor 18px, cap 24px */
    }

    /* Lateral Mobile-Padding für Content-Sections auf Kategorie-Seiten
       (Zimmer/Suiten/Signature-Suiten/Longstay/Angebote + Meetings-Subseiten).
       Verhindert dass Cards/Text/SEO/FAQ am Viewport-Rand kleben. Konkrete
       20px statt cqi-relative damit padding auch bei großem --u-anchor stabil. */
    .estrel-room-grid,
    .estrel-seo-section,
    .estrel-faq,
    .estrel-text-intro {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }
}


/* ============================
   2. estrel_room_hero
   ============================ */

.estrel-room-hero {
    position: relative;
    min-height: clamp(420px, 48cqi, 640px);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    container-type: inline-size;
}
.estrel-room-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
}
.estrel-room-hero__title {
    position: relative;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 300;
    color: #f9e0ce;
    line-height: 1.05;
    max-width: 90%;
}
.estrel-room-hero__title-main {
    display: block;
    font-size: clamp(3.5rem, 6cqi, 7rem);
}
.estrel-room-hero__title-accent {
    display: block;
    font-size: clamp(5rem, 9cqi, 11rem);
    margin-top: 0.1em;
}


/* ============================
   3. estrel_room_grid  — Pixel-perfect Figma 208:16
   ============================
   Card = 1815 × 557 (Figma).
     image area (Group 74)  = 1125 × 512
       right pic 531×512, left pic 586×512, gap 8
     text area  (Group 71)  =  604 × 308
     title:    Söhne 400 40px / line-height 80px (color #14172D)
     subtitle: Söhne 400 20px / line-height 30px
     primary CTA   "Verfügbarkeit prüfen"  255×30  bg watermelon, radius 41.5 — text Alpina 250 19px
     secondary CTA "Mehr Details"          149×30  outline watermelon 1px, radius 41.5 — text Alpina 250 19px
     slider arrow buttons:  70×30 each, watermelon fill, radius 41.5; arrow icon 25×8
     dots: 4 ellipses 9×9 watermelon stroke, gap 16px
   Cards 1+3 → image RIGHT / text LEFT (text x=7931 → 116 from container left)
   Cards 2+4 → image LEFT  / text RIGHT
   --u/cqi scaling so layout proportionally tracks the 1815-design-grid down to ~640px.
*/

.estrel-room-grid {
    container-type: inline-size;
    /* Anchor scaling so the 1851u-wide cards leave breathing room on both sides.
       Divisor 1920 + 2×side-margin → card shrinks proportionally, all internal
       Figma dims stay in lockstep (image 1125, text 604, CTA 255 etc.). */
    --zimmer-side-margin: 80;
    --u: calc(min(100vw, 1920px) / (1920 + 2 * var(--zimmer-side-margin)));
    display: flex;
    flex-direction: column;
    gap: calc(172 * var(--u));
    padding: calc(80 * var(--u)) 0;
    max-width: none;
    margin: 0 auto;
    width: 100%;
}

.estrel-room-grid__card {
    display: grid;
    /* Figma image-right cards (1,3): 1851 wide = text 604 + 122 gap + image 1125 */
    grid-template-columns: calc(604 * var(--u)) calc(1125 * var(--u));
    gap: calc(122 * var(--u));
    align-items: center;
    min-height: calc(557 * var(--u));
    width: 100%;
    max-width: calc(1851 * var(--u));
    margin: 0 auto;
    position: relative;
}
.estrel-room-grid__card.is-image-left {
    /* Figma image-left cards (2,4): 1812 wide = image 1125 + 83 gap + text 604 */
    max-width: calc(1812 * var(--u));
    gap: calc(83 * var(--u));
}

/* Force both items into row 1. DOM puts media FIRST; without explicit row,
   auto-flow places media at row 1 col 2 and spills text to row 2 col 1. */
.estrel-room-grid__card .estrel-room-grid__text,
.estrel-room-grid__card .estrel-room-grid__media { grid-row: 1; }

/* image RIGHT (cards 1, 3) → text col 1, media col 2 */
.estrel-room-grid__card.is-image-right .estrel-room-grid__text  { grid-column: 1; }
.estrel-room-grid__card.is-image-right .estrel-room-grid__media { grid-column: 2; }
/* image LEFT (cards 2, 4) → media col 1, text col 2 */
.estrel-room-grid__card.is-image-left  { grid-template-columns: calc(1125 * var(--u)) calc(604 * var(--u)); }
.estrel-room-grid__card.is-image-left  .estrel-room-grid__media { grid-column: 1; }
.estrel-room-grid__card.is-image-left  .estrel-room-grid__text  { grid-column: 2; }

/* Side-bleed: carousel extends to the viewport edge while text stays anchored
   at the centered card position.
   - margin uses 100% (parent, scrollbar-aware) so centering matches the
     original layout regardless of zoom/scrollbar
   - width uses 100vw so the card's bleeding edge reaches the actual viewport,
     escaping the .estrel-page 1920px cap on wider screens */
@media (min-width: 901px) {
    .estrel-room-grid__card.is-image-right {
        max-width: none;
        margin-left: max(0px, calc((100% - 1851 * var(--u)) / 2));
        margin-right: 0;
        width: calc((1851 * var(--u) + 100vw) / 2);
        grid-template-columns: calc(604 * var(--u)) 1fr;
    }
    .estrel-room-grid__card.is-image-left {
        max-width: none;
        margin-left: min(0px, calc((100% - 100vw) / 2));
        margin-right: max(0px, calc((100% - 1812 * var(--u)) / 2));
        width: calc((1812 * var(--u) + 100vw) / 2);
        grid-template-columns: 1fr calc(604 * var(--u));
    }
}

/* ---------------- MEDIA / IMAGE COLLAGE ---------------- */
.estrel-room-grid__media {
    position: relative;
    width: 100%;
}

.estrel-room-grid__slider {
    position: relative;
    width: 100%;
    height: calc(512 * var(--u));
    overflow: hidden;
}

.estrel-room-grid__pair-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.estrel-room-grid__pair {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(8 * var(--u));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.estrel-room-grid__pair.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Image-left cards mirror picture order via flex-order swap (DOM stays same). */
.estrel-room-grid__card.is-image-left .estrel-room-grid__image-wrap--right { order: 2; }
.estrel-room-grid__card.is-image-left .estrel-room-grid__image-wrap--left  { order: 1; }

.estrel-room-grid__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: #f2eee9;
}

.estrel-room-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Single-image fallback — fill the whole 1125 with one image */
.estrel-room-grid__card.is-single-image .estrel-room-grid__pair {
    grid-template-columns: 1fr;
}
.estrel-room-grid__card.is-single-image .estrel-room-grid__image-wrap {
    grid-column: 1;
}

/* ---------------- ARROW BUTTONS ----------------
   Figma 208:51 "Arrows" group spans x=755–1731 within the 1125-wide image area.
   → left arrow: 29u from image-left (755-726)
   → right arrow: 120u from image-right (1851-1731)
   Vertically centered on image (arrow-top y=240, image 512 tall → near mid-line). */
.estrel-room-grid__arrows {
    display:none !important; /* TEMPORARILY DISABLED */
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(120 * var(--u)) 0 calc(29 * var(--u));
    pointer-events: none;
    z-index: 4;
}
/* Image-left cards (Figma 208:107) mirror the arrow insets:
   left-arrow 120u from image-left, right-arrow 29u from image-right. */
.estrel-room-grid__card.is-image-left .estrel-room-grid__arrows {
    padding: 0 calc(29 * var(--u)) 0 calc(120 * var(--u));
}

.estrel-room-grid__arrow {
    pointer-events: auto;
    width: calc(70 * var(--u));
    height: calc(30 * var(--u));
    min-width: 44px;        /* a11y tap target */
    min-height: 28px;
    border: 0;
    border-radius: 41.5px;
    background: var(--color-watermelon, #FED3CD);
    color: var(--color-deep-sea, #14172D);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.estrel-room-grid__arrow:hover { filter: brightness(0.95); }
.estrel-room-grid__arrow:active { transform: scale(0.97); }
.estrel-room-grid__arrow svg {
    width: calc(25 * var(--u));
    height: calc(8 * var(--u));
    min-width: 20px;
    min-height: 6px;
    display: block;
}

/* ---------------- DOTS ----------------
   Figma 208:51: dot row at y=548 (image 512 + 36 gap), 16u center-to-center,
   dot Ø 9u. Active dot = outlined only (Ellipse 17 fill=none, stroke #FED3CD),
   inactive dots = filled #FED3CD. Current-slide indicator is the HOLLOW one. */
.estrel-room-grid__dots {
    display:none !important; /* TEMPORARILY DISABLED */
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    margin-top: calc(36 * var(--u));
    padding: 0;
    width: 100%;
}
/* Dots always sit at the image's INNER edge (adjacent to text column).
   Image-right card → dots at image-left (flex-start).
   Image-left  card → dots at image-right (flex-end). */
.estrel-room-grid__card.is-image-right .estrel-room-grid__dots {
    justify-content: flex-start;
}
.estrel-room-grid__card.is-image-left .estrel-room-grid__dots {
    justify-content: flex-end;
}

.estrel-room-grid__dot {
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    min-width: 8px;
    min-height: 8px;
    border: 1px solid var(--color-watermelon, #FED3CD);
    background: var(--color-watermelon, #FED3CD);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}
.estrel-room-grid__dot.is-active { background: transparent; }

/* ---------------- SALE BADGE ---------------- */
.estrel-room-grid__badge {
    display:none; /* TEMPORARILY DISABLED */
    position: absolute;
    top: calc(20 * var(--u));
    right: calc(20 * var(--u));
    background: #d64040;
    color: #fff;
    font-family: var(--font-alpina);
    font-style: italic;
    padding: 0.4em 1em;
    border-radius: 2px;
    transform: rotate(-8deg);
    font-size: clamp(0.95rem, 1.2cqi, 1.15rem);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 5;
}

/* ---------------- TEXT BLOCK ---------------- */
.estrel-room-grid__text {
    width: 100%;
    max-width: calc(604 * var(--u));
    display: flex;
    flex-direction: column;
}

/* Title mixed-font per Figma 208:86 charStyleOverrides:
   - Main (chars 0–14 "Urban Standard") → GT Alpina 250 italic 44px
   - Accent ("Zimmer") → Söhne 400 40px (TEXT-node default)
   Line-height tightened from Figma's 80 to 54 so ascenders of Alpina italic breathe. */
.estrel-room-grid__title {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(54 * var(--u));
    color: var(--color-deep-sea, #14172D);
    margin: 0 0 calc(24 * var(--u)) 0;
    letter-spacing: 0;
}
.estrel-room-grid__title-main {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(44 * var(--u));
}
.estrel-room-grid__title-accent {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
}

.estrel-room-grid__intro {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    color: var(--color-deep-sea, #14172D);
    margin: 0 0 calc(40 * var(--u)) 0;
    max-width: calc(600 * var(--u));
}

/* ---------------- FEATURES ROW (3 columns, icon above label) ---------------- */
.estrel-room-grid__features {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: calc(42 * var(--u));     /* feature groups in Figma: 7934, 8087, 8241 → ~150 spacing */
    padding: 0;
    margin: 0 0 calc(40 * var(--u)) 0;
    list-style: none;
}
.estrel-room-grid__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: calc(10 * var(--u));
    color: var(--color-deep-sea, #14172D);
    font-family: var(--font-soehne);
    font-weight: 400;
    text-align: center;
}
/* Icons top-align per Figma 208:16 (icon tops y=253-255 across row). Container height
   = tallest icon (ac = 42u) so labels below stay on a common baseline. Never stretch
   icons into a uniform square — per-icon Figma dims via data-icon. */
.estrel-room-grid__feature-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: calc(42 * var(--u));
    min-height: 30px;
    color: var(--color-deep-sea, #14172D);
}
.estrel-room-grid__feature-icon .estrel-icon {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
}
.estrel-room-grid__feature-icon .estrel-icon svg {
    display: block;
    color: var(--color-deep-sea, #14172D);
}
/* Per-icon exact Figma dimensions (card 208:51 SPEC) */
.estrel-room-grid__feature-icon .estrel-icon[data-icon="size"] svg {
    width: calc(37 * var(--u));
    height: calc(37 * var(--u));
}
.estrel-room-grid__feature-icon .estrel-icon[data-icon="ac"] svg {
    width: calc(53 * var(--u));
    height: calc(42 * var(--u));
}
.estrel-room-grid__feature-icon .estrel-icon[data-icon="bed_king"] svg {
    width: calc(47 * var(--u));
    height: calc(35 * var(--u));
}
.estrel-room-grid__feature-icon .estrel-icon[data-icon="bed_twin"] svg {
    width: calc(47 * var(--u));
    height: calc(35 * var(--u));
}
.estrel-room-grid__feature-icon .estrel-icon[data-icon="view"] svg {
    width: calc(37 * var(--u));
    height: calc(37 * var(--u));
}
.estrel-room-grid__feature-label {
    /* Figma feature label: Söhne 400 14px, lh 16.8 */
    font-size: calc(14 * var(--u));
    line-height: calc(16.8 * var(--u));
    white-space: nowrap;
}

/* ---------------- CTAs ---------------- */
.estrel-room-grid__ctas {
    display: flex;
    gap: calc(24 * var(--u));
    align-items: center;
    flex-wrap: wrap;
    margin-top: auto;
}

.estrel-room-grid__cta-primary,
.estrel-room-grid__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma CTAs 255×30 (primary) / 149×30 (secondary), GT Alpina Thin Italic 19/22 */
    height: calc(30 * var(--u));
    min-height: 30px;
    padding: 0 calc(20 * var(--u));
    border-radius: calc(41.5 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    color: var(--color-deep-sea, #14172D);
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, background 0.15s ease;
}

.estrel-room-grid__cta-primary {
    width: calc(255 * var(--u));
    min-width: 200px;
    background: var(--color-watermelon, #FED3CD);
    border: 0;
    /* Figma letterSpacing 2.09 (node 208:78) */
    letter-spacing: calc(2.09 * var(--u));
}
.estrel-room-grid__cta-primary:hover { filter: brightness(0.95); }

.estrel-room-grid__cta-secondary {
    width: calc(149 * var(--u));
    min-width: 130px;
    background: transparent;
    border: 1px solid var(--color-watermelon, #FED3CD);
    /* Figma letterSpacing 0.95 (node 208:82) */
    letter-spacing: calc(0.95 * var(--u));
}
.estrel-room-grid__cta-secondary:hover {
    background: var(--color-watermelon, #FED3CD);
}

/* ============================
   Responsive: tablet ≤900px → stack media on top, text below
   ============================ */
@media (max-width: 900px) {
    .estrel-room-grid {
        --u: calc(100cqi / 720);     /* re-anchor scaling for mobile */
        gap: calc(60 * var(--u));
        padding: calc(40 * var(--u)) calc(20 * var(--u));
    }
    .estrel-room-grid__card,
    .estrel-room-grid__card.is-image-left,
    .estrel-room-grid__card.is-image-right {
        grid-template-columns: 1fr;
        gap: calc(28 * var(--u));
        min-height: 0;
    }
    /* Match specificity of .is-image-right/left rules so single-col override wins */
    .estrel-room-grid__card.is-image-right .estrel-room-grid__media,
    .estrel-room-grid__card.is-image-left .estrel-room-grid__media,
    .estrel-room-grid__card.is-image-right .estrel-room-grid__text,
    .estrel-room-grid__card.is-image-left .estrel-room-grid__text {
        grid-column: 1;
    }
    .estrel-room-grid__card.is-image-right .estrel-room-grid__media,
    .estrel-room-grid__card.is-image-left .estrel-room-grid__media { grid-row: 1; }
    .estrel-room-grid__card.is-image-right .estrel-room-grid__text,
    .estrel-room-grid__card.is-image-left .estrel-room-grid__text  { grid-row: 2; }

    .estrel-room-grid__slider { height: calc(360 * var(--u)); }
    .estrel-room-grid__text   { max-width: 100%; }

    .estrel-room-grid__title  { font-size: calc(32 * var(--u)); line-height: 1.15; }
    .estrel-room-grid__intro  { font-size: calc(18 * var(--u)); line-height: 1.5; }

    .estrel-room-grid__feature-icon { height: calc(40 * var(--u)); }
    .estrel-room-grid__feature-icon .estrel-icon svg { height: calc(34 * var(--u)); }
    .estrel-room-grid__feature-label { font-size: calc(15 * var(--u)); }

    .estrel-room-grid__cta-primary,
    .estrel-room-grid__cta-secondary {
        font-size: calc(16 * var(--u));
        height: calc(40 * var(--u));
        min-height: var(--touch-target-min);
    }

    .estrel-room-grid__arrows  { padding: 0 calc(12 * var(--u)); }
    .estrel-room-grid__arrow   { width: calc(56 * var(--u)); height: calc(28 * var(--u)); min-height: var(--touch-target-min); min-width: var(--touch-target-min); }
}

@media (max-width: 540px) {
    .estrel-room-grid {
        --u: calc(100cqi / 375);
        gap: 32px;
        padding: 24px 16px;
    }
    .estrel-room-grid__card {
        gap: 14px;
    }
    .estrel-room-grid__slider { height: clamp(220px, 60vw, 320px); }
    .estrel-room-grid__pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    .estrel-room-grid__title { font-size: 24px; }
    .estrel-room-grid__intro { font-size: 14px; line-height: 1.5; }
    .estrel-room-grid__features {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 12px;
        row-gap: 4px;
    }
    .estrel-room-grid__feature-icon { height: 28px; }
    .estrel-room-grid__feature-icon .estrel-icon svg { height: 24px; }
    .estrel-room-grid__feature-label { font-size: 11px; white-space: normal; line-height: 1.2; }
    .estrel-room-grid__ctas {
        gap: 10px;
        flex-direction: column;
    }
    .estrel-room-grid__cta-primary,
    .estrel-room-grid__cta-secondary {
        width: 100%;
        min-width: 0;
        font-size: 14px;
        height: 38px;
        min-height: var(--touch-target-min);
    }
    .estrel-room-grid__arrows {
        padding: 0 8px;
        bottom: 50%;
        transform: translateY(50%);
    }
    .estrel-room-grid__arrow { width: 36px; height: 24px; min-height: var(--touch-target-min); min-width: var(--touch-target-min); }
    .estrel-room-grid__dots { gap: 6px; padding-top: 8px; }
    /* Sale badge size + position on mobile */
    .estrel-room-grid__badge {
        top: 10px;
        right: 10px;
        font-size: 12px;
        padding: 4px 10px;
    }
}


/* ============================
   4. estrel_seo_section  — Pixel-perfect Figma Overview SEO group
   ============================
   Figma 1596 content width inside 1920 frame. Heading Söhne 400 42px.
   Two text columns 768px each, Söhne 400 20px / lh 24px. Gap ~60px.
   --u/cqi scaling tracks 1815-design-grid.
*/

.estrel-seo {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    /* Figma Overview SEO 1596 wide inside 1920 → 162 horizontal inset */
    max-width: none;
    margin: 0 auto;
    padding: calc(80 * var(--u)) calc(162 * var(--u)) !important;
    color: var(--color-deep-sea, #14172D);
    width: 100%;
}
.estrel-seo__heading {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(42 * var(--u));
    line-height: 1.05;
    /* Headline zentriert (zuvor padding-left:602u Figma-offset, der visuell
       leicht aus der Mitte rutschte). */
    padding-left: 0;
    text-align: center;
    /* heading-bottom y=44, col2-top y=95 → 51u gap; col1-top y=98 → 54u. */
    margin: 0 0 calc(54 * var(--u));
    color: var(--color-deep-sea, #14172D);
    letter-spacing: 0;
}
/* SEO heading inverts the usual main/accent convention: Figma 208:455
   puts the ITALIC Alpina on the FIRST word ("Lorem") and the regular Söhne
   on the rest ("SEO Sektion"). DCA keeps headingMain/headingAccent semantics,
   so we swap the styling here — main becomes italic, accent becomes regular. */
.estrel-seo__heading-main {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(44 * var(--u));
}
.estrel-seo__heading-accent {
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(42 * var(--u));
    margin-left: 0.25em;
}
.estrel-seo__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(60 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(30 * var(--u));
    color: var(--color-deep-sea, #14172D);
}
/* Override typography.css "p { color: var(--text-secondary) }" which applies
   70% alpha. Figma 208:454 columns use fill #14172D (no opacity). */
.estrel-seo__col,
.estrel-seo__col p {
    color: var(--color-deep-sea, #14172D);
}
.estrel-seo__col p {
    margin: 0 0 1em;
}
.estrel-seo__col p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .estrel-seo {
        --u: calc(100cqi / 720);
        padding: calc(40 * var(--u)) calc(24 * var(--u)) !important;
    }
    .estrel-seo__heading {
        font-size: max(20px, calc(30 * var(--u)));
        padding-left: 0;
        text-align: center;
        margin-bottom: calc(28 * var(--u));
    }
    .estrel-seo__heading-main {
        font-size: max(22px, calc(32 * var(--u))); /* WCAG floor 22px */
    }
    .estrel-seo__heading-accent {
        font-size: max(20px, calc(30 * var(--u))); /* WCAG floor 20px */
    }
    .estrel-seo__cols {
        grid-template-columns: 1fr;
        gap: calc(28 * var(--u));
        font-size: max(16px, calc(18 * var(--u))); /* WCAG floor 16px */
        line-height: 1.55;
    }
}


/* ============================
   5. estrel_faq  — Pixel-perfect Figma FAQ group
   ============================
   Full-bleed 1920-wide block, background #FEF5EC (warm-cream adjacent).
   Heading "Gut informiert. Entspannt ankommen." Söhne 300 35px + accent
   "Sind Haustiere erlaubt?" GT Alpina 250 Italic 32px — but we render
   the section heading with main (Söhne) + accent (Alpina italic) to reuse
   DCA fields. Question lines Söhne 300 28px, separator line 1px.
   Accordion rows: question + right-aligned expand icon (32×32 plus-cross).
   --u/cqi scaling anchored to 1815.
*/

.estrel-faq {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    background: #FEF5EC;
    /* Figma 466:262: list narrower than feature-list (1466u) — hold at 1100u centered
       → side-pad 410u. top-pad 66u until heading-top, bottom 106u till next section. */
    padding: calc(66 * var(--u)) calc(410 * var(--u)) calc(106 * var(--u)) !important;
    margin: 0;
    max-width: none;
    color: var(--color-deep-sea, #14172D);
    width: 100%;
}
/* Full-viewport bleed; inner heading + list use max-width 1100u with margin
   auto so content stays centered. Selector is `section.estrel-faq` to outrank
   layout.css `section[class^="estrel-"]` margin: 0 auto. */
section.estrel-faq {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.estrel-faq__heading {
    font-size: calc(35 * var(--u));
    line-height: 1.1;
    /* Heading-bottom y=101 (66+35) → Q1 y=196 at item-padding-top 22u → list-top y=174.
       101 + 73 = 174 ⇒ heading margin-bottom = 73u. */
    margin: 0 auto calc(73 * var(--u));
    font-weight: 300;
    color: var(--color-deep-sea, #14172D);
    letter-spacing: 0;
    text-align: left;
    max-width: calc(1100 * var(--u));
}
.estrel-faq__heading-main {
    font-family: var(--font-soehne);
    font-weight: 300;
}
.estrel-faq__heading-accent {
    /* Figma 208:337 charStyleOverride 16-35: GT Alpina 250 italic at 35px (NOT 32). */
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    margin-left: 0.3em;
    font-size: calc(35 * var(--u));
}

.estrel-faq__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: calc(1100 * var(--u));
}
/* Figma 208:296 shows 5 separator frames BETWEEN 6 items — no top, no last. */
.estrel-faq__item {
    border-bottom: 1px solid #14172D;
}
.estrel-faq__item:last-child {
    border-bottom: 0;
}
.estrel-faq__details { width: 100%; }
.estrel-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(24 * var(--u));
    /* Figma item layout: Q1 y=196, separator y=247, Q2 y=269 → pad-top 22u, pad-bottom 16u */
    padding: calc(22 * var(--u)) 0 calc(16 * var(--u));
    cursor: pointer;
    list-style: none;
    font-family: var(--font-soehne);
    font-weight: 300;
    font-size: calc(28 * var(--u));
    line-height: 1.25;
    color: var(--color-deep-sea, #14172D);
}
.estrel-faq__summary::-webkit-details-marker { display: none; }
.estrel-faq__summary::marker { display: none; content: ''; }
.estrel-faq__question { flex: 1; }
.estrel-faq__icon {
    flex-shrink: 0;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    min-width: 22px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--color-deep-sea, #14172D);
}
/* Plus-cross icon drawn with pseudo-elements (matches Figma 32×32 Group 91/92 cross) */
.estrel-faq__icon svg { display: none; }
.estrel-faq__icon::before,
.estrel-faq__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.estrel-faq__icon::before {
    /* horizontal */
    left: 0; right: 0; top: 50%;
    height: 1px;
    transform: translateY(-50%);
}
.estrel-faq__icon::after {
    /* vertical */
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    transform: translateX(-50%);
}
.estrel-faq__details[open] .estrel-faq__icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}
/* Opened question: switch to italic GT Alpina 32px per Figma */
.estrel-faq__details[open] .estrel-faq__question {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(32 * var(--u));
    line-height: 1.1;
}
.estrel-faq__answer {
    /* Figma Q3 opened: Q-bottom y=376, Answer-top y=388 (12u gap),
       Answer-bottom y=423, separator y=457 (34u gap). */
    padding: calc(12 * var(--u)) 0 calc(34 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 300;
    font-size: calc(26 * var(--u));
    line-height: 1.35;
    color: var(--color-deep-sea, #14172D);
    max-width: calc(1100 * var(--u));
}

@media (max-width: 900px) {
    .estrel-faq {
        --u: calc(100cqi / 720);
        padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u)) !important;
    }
    .estrel-faq__heading {
        font-size: calc(24 * var(--u));
        margin-bottom: calc(28 * var(--u));
    }
    .estrel-faq__heading-accent { font-size: calc(22 * var(--u)); }
    .estrel-faq__summary {
        /* Tap-target floor + readable text floor */
        min-height: var(--touch-target-min);
        font-size: max(16px, calc(18 * var(--u)));
        padding: calc(18 * var(--u)) 0;
    }
    .estrel-faq__icon {
        width: calc(22 * var(--u));
        height: calc(22 * var(--u));
    }
    .estrel-faq__answer {
        font-size: max(16px, calc(15 * var(--u)));
    }
    .estrel-faq__details[open] .estrel-faq__question {
        font-size: max(18px, calc(20 * var(--u)));
    }
}


/* ============================================================
 * PHASE 7 — Zimmer Detail Pages
 * ============================================================ */

/* --- estrel_room_title — Pixel-perfect Figma Detail Title ---
   Figma 208:1065 "Urban Standard Zimmer" 946×238 centered inside 1920 frame.
   Line 1 "Urban Standard" → GT Alpina Thin Italic 144px / lh 122.4 (85%)
   Line 2 "Zimmer"         → Söhne Buch 400 124px / lh 116.56 (94%)
   Position: y ≈ 60px below main menu inside warm-cream background.
   --u/cqi scaling anchored to 1815.
*/
.estrel-room-title {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    /* Figma frame fill #FFFAF6 — unified with page bg.
       On Eventtyp-Detail (.estrel-page.is-eventtyp-detail) the bg is overridden
       to navy via header-pill.css. */
    background: var(--zimmer-bg, #FFFAF6);
    /* Figma vertical rhythm (208:1065):
       cat-nav (Tabs 208:1355) ends y=-13120, title text (208:1196) starts y=-12924
       → 196px total gap including cat-nav padding-bottom.
       Cat-nav already gives ~98px padding-bottom, so title needs ~98px padding-top.
       Title ends ~y=-12686. Gallery starts ~y=-12572 → 114px gap below. */
    padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(114 * var(--u)) !important;
    margin: 0 auto !important;
    text-align: center;
    width: 100%;
}
/* Inline cat-nav above the title (Detail-Page-Variante) — uses the same
   markup classes as the hero variant (.estrel-zimmer-hero__nav…) so both
   share styling. Override position so the nav stays in the title's normal
   flow instead of being absolutely placed under the hero frame. */
.estrel-room-title .estrel-room-title__nav.estrel-zimmer-hero__nav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding-bottom: 0 !important;
    margin: 0 0 calc(78 * var(--u));
    width: 100%;
}

.estrel-room-title__heading {
    margin: 0;
    text-align: center;
    line-height: 1;
    font-weight: 400;
    color: var(--color-deep-sea, #14172D);
    letter-spacing: 0;
}
.estrel-room-title__main {
    display: block;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(144 * var(--u));
    line-height: calc(122.4 * var(--u));
    letter-spacing: 0;
}
.estrel-room-title__accent {
    display: block;
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(124 * var(--u));
    line-height: calc(116.56 * var(--u));
    letter-spacing: 0;
}
@media (max-width: 900px) {
    .estrel-room-title {
        --u: calc(100cqi / 720);
        padding: calc(36 * var(--u)) calc(20 * var(--u)) calc(60 * var(--u)) !important;
        margin: calc(40 * var(--u)) auto 0 !important;
    }
    .estrel-room-title__main   { font-size: calc(80 * var(--u)); line-height: 0.88; }
    .estrel-room-title__accent { font-size: calc(70 * var(--u)); line-height: 0.94; }
}


/* --- estrel_room_gallery  — Pixel-perfect Figma Hero Karussell ---
   Full-bleed 3-picture grid: 568 / 856 / 568 × 641 (total ~2001 wide).
   Figma uses overflowing mask-groups but for web we show 3 images fitted.
   Gap ≈ 4px (tight). Booking bar Figma 1316×52 below/over the gallery.
*/
.estrel-room-gallery {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    position: relative;
    padding: 0 0 calc(26 * var(--u)) 0 !important;
    width: 100%;
}
.estrel-room-gallery__slider {
    display: grid;
    grid-template-columns: 568fr 856fr 568fr;
    gap: calc(4 * var(--u));
    width: 100%;
    max-width: none;
    margin: 0;
}
/* Figma: 3 visible slides; hide any extras beyond the first 3 in the grid */
.estrel-room-gallery__slider > .estrel-room-gallery__slide:nth-child(n+4) {
    display: none;
}
.estrel-room-gallery__slide {
    height: calc(641 * var(--u));
    min-height: 280px;
    overflow: hidden;
    background: #f2eee9;
}
.estrel-room-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.estrel-room-gallery__dots {
    display: none;  /* Figma has arrows not dots for the hero carousel */
}
.estrel-room-gallery__dot {
    width: 8px;
    height: 8px;
    border: 0;
    background: rgba(0,0,0,0.25);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
}
.estrel-room-gallery__dot.is-active { background: rgba(0,0,0,1); }

/* --- Booking-Bar  — Pixel-perfect Figma 208:17 (1316×52) ---
   Dark fill #14172D, inline-flex, 4 items: Arrival (Calendar+text), People (icon+text),
   Room (Bed icon+text), Submit button (244×42 r=25 Watermelon).
   Labels "An- & Abreise", "2 Erwachsene", "Urban Standard Zimmer" all Söhne 300 16px.
   CTA "Verfügbarkeit anfragen" GT Alpina Thin 250 20px lh=22.
*/
.estrel-booking-bar {
    /* Use viewport-based scaling since parent gallery is fullbleed (cqi==vw).
       Clamp to 1920px so sizes freeze above design viewport. */
    --u: calc(min(100vw, 1920px) / 1920);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center;
    gap: calc(40 * var(--u));
    background: var(--color-deep-sea, #14172D);
    color: #fff;
    padding: calc(5 * var(--u)) calc(20 * var(--u));
    border-radius: calc(50 * var(--u));  /* Figma Rectangle 269 cornerRadius=50 */
    width: calc(1316 * var(--u));
    max-width: calc(1316 * var(--u));
    height: calc(52 * var(--u));
    min-height: 52px;
    /* Figma: booking y=1386 overlaps gallery bottom (y=1412) by 26 */
    margin: calc(-26 * var(--u)) auto 0;
    position: relative;
    z-index: 2;
    box-shadow: none;
}
.estrel-booking-bar__field {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    position: relative;
    color: #fff;
    font-family: var(--font-soehne);
    font-weight: 300;
    font-size: clamp(13px, calc(16 * var(--u)), 16px);
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
}
.estrel-booking-bar__label {
    display: none;   /* Figma has icons + value text, no separate labels */
}
.estrel-booking-bar__input {
    background: transparent;
    border: 0;
    color: #fff;
    font-family: var(--font-soehne);
    font-weight: 300;
    font-size: clamp(13px, calc(16 * var(--u)), 16px);
    line-height: 1.2;
    padding: 0 22px 0 0;   /* room for the chevron */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    /* Dropdown chevron (white, 8×5) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 10px 6px;
}
input.estrel-booking-bar__input {
    background-image: none;   /* text inputs don't need a chevron */
    padding-right: 0;
}

/* Date inputs — make them blend with the white-on-navy bar */
.estrel-booking-bar__input--date {
    color-scheme: dark;
    color: #fff;
    min-width: 0;
    padding: 0;
    flex: 1 1 auto;
    cursor: pointer;
}
.estrel-booking-bar__input--date::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}
.estrel-booking-bar__field--dates {
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.estrel-booking-bar__date-sep {
    color: rgba(255, 255, 255, 0.55);
    padding: 0 4px;
    user-select: none;
}
.estrel-booking-bar__input::placeholder { color: rgba(255,255,255,0.7); }

/* Open dropdown panel — force light-scheme panel so options stay readable
   on both light + dark OS themes. */
.estrel-booking-bar__input {
    color-scheme: light;
}
.estrel-booking-bar__input option {
    background: #ffffff;
    color: #14172D;
    font-family: var(--font-soehne);
    font-weight: 400;
    padding: 6px 10px;
}
.estrel-booking-bar__input option:checked,
.estrel-booking-bar__input option:hover {
    background: #FED3CD;       /* Watermelon — matches CTA */
    color: #14172D;
    font-weight: 500;
}
.estrel-booking-bar__icon {
    position: static;
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    min-width: 16px;
    min-height: 16px;
    color: #fff;
    pointer-events: none;
    flex-shrink: 0;
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.estrel-booking-bar__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    display: block;
}
.estrel-booking-bar__cta {
    background: var(--color-watermelon, #FED3CD);
    color: var(--color-deep-sea, #14172D);
    border: 0;
    border-radius: 25px;
    padding: 0 clamp(14px, calc(28 * var(--u)), 28px);
    height: clamp(34px, calc(42 * var(--u)), 42px);
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: normal;
    font-size: clamp(14px, calc(20 * var(--u)), 20px);
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease;
    min-width: 0;
}
.estrel-booking-bar__cta:hover { filter: brightness(0.95); }

/* Tablet / mid-viewport (900-1280px): keep horizontal but reduce gaps + tighter padding */
@media (min-width: 901px) and (max-width: 1280px) {
    .estrel-booking-bar {
        gap: 14px;
        padding: 6px 16px;
        max-width: 92vw;
    }
    .estrel-booking-bar__field {
        gap: 8px;
    }
    .estrel-booking-bar__icon {
        width: 16px;
        height: 16px;
    }
}


@media (max-width: 900px) {
    .estrel-room-gallery {
        --u: calc(100cqi / 720);
        padding: 0 !important;
    }
    .estrel-room-gallery__slider {
        grid-template-columns: 1fr;
        gap: calc(4 * var(--u));
    }
    .estrel-room-gallery__slide { height: calc(360 * var(--u)); }
    /* Show all slides in mobile 1-col layout (desktop 3-col hides 4th) */
    .estrel-room-gallery__slider > .estrel-room-gallery__slide:nth-child(n+4) { display: block !important; }
    .estrel-booking-bar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
        margin: 0 auto !important;
    }
    .estrel-booking-bar__field {
        font-size: 16px;  /* WCAG floor + iOS no-auto-zoom */
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .estrel-booking-bar__field:last-of-type { border-bottom: 0; }
    .estrel-booking-bar__cta {
        width: 100%;
        font-size: 16px;
        min-height: var(--touch-target-min);
        height: auto;
        padding: 0 20px;
        margin-top: 6px;
    }
    .estrel-booking-bar__icon { width: 18px; height: 18px; }
}

/* Tablet portrait (768-900px): 2x2 booking-bar grid (overrides 1-col mobile) */
@media (min-width: 768px) and (max-width: 900px) {
    .estrel-booking-bar {
        grid-template-columns: 1fr 1fr;
        gap: 14px 22px;
        padding: 14px 20px;
        max-width: 92vw;
        height: auto;
        border-radius: 8px;
    }
    .estrel-booking-bar__field {
        font-size: 16px;  /* WCAG floor */
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        padding: 4px 0;
        border-bottom: 0;
    }
    .estrel-booking-bar__cta {
        grid-column: 1 / -1;
        width: 100%;
        min-height: var(--touch-target-min);
        margin-top: 6px;
    }
}

/* True mobile (< 540px) — gallery as compact carousel */
@media (max-width: 540px) {
    .estrel-room-gallery {
        padding: 0;
    }
    .estrel-room-gallery__slide { height: clamp(220px, 60vw, 320px); }
    .estrel-booking-bar {
        margin-top: -2rem;
        border-radius: 0;
    }
}

/* --- Grundriss Modal --- */
.estrel-grundriss-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
}
body.has-grundriss-modal .estrel-grundriss-modal {
    display: block;
}
body.has-grundriss-modal {
    overflow: hidden;
}
.estrel-grundriss-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}
.estrel-grundriss-modal__content {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 900px);
    max-height: 90vh;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.estrel-grundriss-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    color: #111;
}
.estrel-grundriss-modal__slider {
    position: relative;
    flex: 1;
    min-height: 0;
}
.estrel-grundriss-modal__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.estrel-grundriss-modal__slide.is-active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}
.estrel-grundriss-modal__slide img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}
.estrel-grundriss-modal__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f5f5f5;
}
.estrel-grundriss-modal__dot {
    width: 10px;
    height: 10px;
    border: 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
}
.estrel-grundriss-modal__dot.is-active {
    background: rgba(0, 0, 0, 0.85);
}


/* --- estrel-split (shared by estrel_room_fokus + estrel_room_details)
   Pixel-perfect Figma Detail Description group (1596×938) & Ausstattung & Details group (1589×1076).
   - Image left 788×938 (or right), Text col 626 wide.
   - Heading "Fokus & Lifestyle" Söhne 400 84px / lh 85 (letter-spacing 0).
   - Body copy Söhne 400 20px / lh 24.
   - CTA primary: 254×30 fill #FED3CD radius 41.5; CTA secondary: 141×30 outline 1px #FED3CD.
   - Container padding: (~1596 inside 1920) -> ~162px left-right margin.
*/
.estrel-split {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    display: grid;
    grid-template-columns: calc(788 * var(--u)) calc(626 * var(--u));
    /* Figma Description group 1596 wide: Image 788 + 182gap + Text 626 = 1596 */
    gap: calc(182 * var(--u));
    /* Each split owns its top-gap to previous. Horizontal 162 (1920-1596)/2.
       Fokus: gap 159 from pullquote. Details: gap 164 from highlights. */
    padding: 0 calc(162 * var(--u)) !important;
    max-width: none;
    margin: 0 auto !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* Per-variant top/bottom margin to match Figma inter-section gaps */
.estrel-room-fokus {
    /* Figma Description y=1936, Statement ends y=1777 → gap 159 */
    margin-top: calc(159 * var(--u)) !important;
}
.estrel-room-details {
    /* Figma Details y=3640, Benefits ends y=3476 → gap 164 */
    margin-top: calc(164 * var(--u)) !important;
}
.estrel-split--image-right { grid-template-columns: calc(626 * var(--u)) calc(788 * var(--u)); }
.estrel-split--image-right .estrel-split__media { order: 1; grid-column: 2; }
.estrel-split--image-right .estrel-split__text  { order: 0; grid-column: 1; }
.estrel-split--image-left  .estrel-split__media { order: 0; grid-column: 1; }
.estrel-split--image-left  .estrel-split__text  { order: 1; grid-column: 2; }

.estrel-split__media {
    height: calc(938 * var(--u));
    overflow: hidden;
    border-radius: 4px;
    background: #f2eee9;
}

/* Compact variant — Daily-Delegate-Rate and similar pages.
   Smaller heading, shorter image, tighter padding. */
.estrel-split.is-compact { padding: calc(60 * var(--u)) calc(91 * var(--u)) !important; }
.estrel-split.is-compact .estrel-split__media { height: calc(470 * var(--u)); }
.estrel-split.is-compact .estrel-split__heading { font-size: calc(50 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.estrel-split.is-compact .estrel-split__heading-main { font-size: calc(50 * var(--u)); line-height: calc(58 * var(--u)); }
.estrel-split.is-compact .estrel-split__heading-accent { font-size: calc(50 * var(--u)); line-height: calc(58 * var(--u)); display: inline; margin-left: calc(8 * var(--u)); }
.estrel-split.is-compact .estrel-split__body { font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); margin-bottom: calc(40 * var(--u)); max-width: calc(550 * var(--u)); }
.estrel-split.is-compact { margin-top: calc(60 * var(--u)) !important; }
.estrel-split__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.estrel-split__heading {
    margin: 0 0 calc(40 * var(--u));
    font-weight: 400;
    line-height: 1;
    color: var(--color-deep-sea, #14172D);
    letter-spacing: 0;
    font-size: calc(84 * var(--u));
}
.estrel-split__heading-main {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(84 * var(--u));
    line-height: calc(85 * var(--u));
}
.estrel-split__heading-accent {
    display: block;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(84 * var(--u));
    line-height: calc(85 * var(--u));
    margin-top: 0;
}
.estrel-split__body {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(26 * var(--u));   /* Figma body text 20/26 */
    color: var(--color-deep-sea, #14172D);
    margin: 0 0 calc(67 * var(--u));    /* Figma gap to "Auf einen Blick" block ~67px */
    max-width: calc(626 * var(--u));
}
.estrel-split__body p { margin: 0 0 calc(26 * var(--u)); }
.estrel-split__body p:last-child { margin-bottom: 0; }

.estrel-split__ctas {
    display: flex;
    gap: calc(24 * var(--u));
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
}
.estrel-split__cta-primary,
.estrel-split__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(30 * var(--u));
    min-height: 30px;
    padding: 0 calc(20 * var(--u));
    border-radius: calc(41.5 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: normal;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    color: var(--color-deep-sea, #14172D);
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, background 0.15s ease;
}
.estrel-split__cta-primary {
    width: auto;
    min-width: calc(200 * var(--u));
    padding: 0 calc(28 * var(--u));
    background: var(--color-watermelon, #FED3CD);
    border: 0;
}
.estrel-split__cta-primary:hover { filter: brightness(0.95); }

.estrel-split__cta-secondary {
    width: auto;
    min-width: calc(141 * var(--u));
    padding: 0 calc(28 * var(--u));
    background: transparent;
    border: 1px solid var(--color-watermelon, #FED3CD);
}
.estrel-split__cta-secondary:hover {
    background: var(--color-watermelon, #FED3CD);
}

@media (max-width: 900px) {
    .estrel-split,
    .estrel-split--image-left,
    .estrel-split--image-right {
        --u: calc(100cqi / 720);
        grid-template-columns: 1fr !important;
        gap: calc(28 * var(--u)) !important;
        padding: calc(40 * var(--u)) calc(24 * var(--u)) !important;
        margin-top: calc(40 * var(--u)) !important;
    }
    .estrel-split--image-right .estrel-split__media,
    .estrel-split--image-left  .estrel-split__media { order: 0; grid-column: 1; }
    .estrel-split--image-right .estrel-split__text,
    .estrel-split--image-left  .estrel-split__text  { order: 1; grid-column: 1; }
    .estrel-split__media { height: calc(420 * var(--u)); }
    .estrel-split__heading-main,
    .estrel-split__heading-accent {
        font-size: calc(48 * var(--u));
        line-height: 1.02;
    }
    .estrel-split__body { font-size: calc(16 * var(--u)); line-height: 1.55; max-width: 100%; }
    .estrel-split__cta-primary,
    .estrel-split__cta-secondary {
        font-size: calc(16 * var(--u));
        height: calc(44 * var(--u));
        padding: 0 calc(18 * var(--u));
        width: auto;
    }
    .estrel-split__cta-primary { flex: 1; }
}


/* --- estrel_room_highlights  — Pixel-perfect Figma Benefits group (1932×452)
   Full-bleed dark navy #14172D. 3 columns (Left, Middle, Right) each ~440 wide.
   Label "Highlights" Söhne 400 32px top-left (148×105, inside column Left).
   Each feature row: icon ~52×52 + label Söhne 400 19–20px / lh 24–38.
   Rows separated by a 1px top border (Vector 3 = 433.9 wide lines per row).
   --u/cqi scaling anchored to 1920.
*/
.estrel-highlights {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    background: var(--color-deep-sea, #14172D);
    color: #fff;
    /* Figma Benefits 1932×452: label "Highlights" at y=33 from top, h=105, columns at y=173
       Internal padding: top 33, bottom 452 - (173+224) = 55. Inset x ~167 */
    padding: calc(33 * var(--u)) calc(167 * var(--u)) calc(55 * var(--u)) !important;
    /* Figma Benefits y=3024, Description ends y=2874 → gap 150 */
    margin: calc(150 * var(--u)) auto 0 !important;
    width: 100%;
    max-width: none;
}
.estrel-highlights__inner {
    max-width: none;
    margin: 0 auto;
    display: block;
}
.estrel-highlights__label {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(32 * var(--u));
    line-height: 1.1;
    margin: 0 0 calc(35 * var(--u));
    color: var(--color-warm-cream, #FEF5EC);
    padding: 0;
}
.estrel-highlights__grid {
    display: grid;
    /* 3 equal columns — Figma Left/Middle/Right each ~440 wide with ~88 gap */
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(88 * var(--u));
    row-gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.estrel-highlights__item {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--u));
    color: #fff;
    padding: calc(12 * var(--u)) 0;
    border-top: 1px solid rgba(255,255,255,0.4);
    min-height: calc(68 * var(--u));
}
.estrel-highlights__item:first-child { border-top: 0; }
/* For each column, the first item should not have a top border */
.estrel-highlights__grid > .estrel-highlights__item:nth-child(-n+3) {
    border-top: 0;
}
.estrel-highlights__icon {
    flex-shrink: 0;
    color: #fff;
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.estrel-highlights__icon svg {
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    min-width: 24px;
    min-height: 24px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.3;
}
/* Pre-rendered PNG highlight icons (hl_* keys) — already styled for dark bg */
.estrel-highlights__icon .estrel-icon--highlight {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.estrel-highlights__icon .estrel-icon--highlight img {
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    min-width: 28px;
    min-height: 28px;
    object-fit: contain;
    display: block;
}
.estrel-highlights__text {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: 1.2;
    color: #fff;
}
@media (max-width: 900px) {
    .estrel-highlights {
        --u: calc(100cqi / 720);
        padding: calc(40 * var(--u)) calc(24 * var(--u)) !important;
        margin: calc(40 * var(--u)) auto 0 !important;
    }
    .estrel-highlights__inner {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .estrel-highlights__label {
        grid-column: 1;
        font-size: calc(24 * var(--u));
        margin-bottom: calc(20 * var(--u));
    }
    .estrel-highlights__grid {
        grid-column: 1;
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(24 * var(--u));
    }
    .estrel-highlights__grid > .estrel-highlights__item:nth-child(-n+2) {
        border-top: 0;
    }
    .estrel-highlights__grid > .estrel-highlights__item:nth-child(n+3) {
        border-top: 1px solid rgba(255,255,255,0.4);
    }
    .estrel-highlights__icon {
        width: calc(40 * var(--u));
        height: calc(40 * var(--u));
    }
    .estrel-highlights__icon svg {
        width: calc(32 * var(--u));
        height: calc(32 * var(--u));
    }
    .estrel-highlights__text {
        font-size: calc(16 * var(--u));
    }
}
@media (max-width: 520px) {
    .estrel-highlights__grid {
        grid-template-columns: 1fr;
    }
    .estrel-highlights__grid > .estrel-highlights__item:first-child {
        border-top: 0;
    }
    .estrel-highlights__grid > .estrel-highlights__item:not(:first-child) {
        border-top: 1px solid rgba(255,255,255,0.4);
    }
}


/* --- estrel_room_details bullets (reuses .estrel-split)
   Figma "Auf einen Blick" block — bold line + plain text list, NO bullets.
   News Text 4 = Söhne 400 20px / lh 24. "Auf einen Blick" heading
   on top then lines separated by newlines.
*/
.estrel-details__bullets {
    margin-top: 0;
}
.estrel-details__bullet-heading {
    font-family: var(--font-soehne);
    font-weight: 700;            /* Bold per Figma "Auf einen Blick" character override */
    font-size: clamp(15px, calc(20 * var(--u)), 20px);
    line-height: 1.4;            /* ~28px @ 20px — more breathing room for readability */
    margin: 0 0 4px;
    color: var(--color-deep-sea, #14172D);
}
.estrel-details__bullet-list {
    list-style: disc;
    padding: 0 0 0 1.2em;        /* Indent for bullet markers */
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: clamp(15px, calc(20 * var(--u)), 20px);
    line-height: 1.4;            /* 28px @ 20px = readable separation */
    color: var(--color-deep-sea, #14172D);
}
.estrel-details__bullet-list li {
    margin: 0 0 2px;             /* Tiny spacer between items */
    padding: 0;
    /* Modern bullet styling — small dot, dark navy */
    list-style-type: disc;
}
.estrel-details__bullet-list li::marker {
    color: var(--color-deep-sea, #14172D);
    font-size: 0.85em;
}
@media (max-width: 900px) {
    .estrel-details__bullet-heading,
    .estrel-details__bullet-list {
        font-size: calc(16 * var(--u));
        line-height: 1.55;
    }
}


/* --- estrel_room_related  — Pixel-perfect Figma Gästestimmen/Unsere weiteren Zimmer
   Heading "Unsere weiteren Zimmer" Söhne 400 32px lh=95 (block height 95).
   3 cards 527.55×405.44 radius=4 background #14172D (NAVY — image sits inside).
   Image area inside card ~519×273 at top with 4px inset.
   Below image: 3 tags (Grösse / Personen / Bad) Söhne 300 12px.
   Card title e.g. "Urban Longstay Zimmer" Söhne 400 19px lh=38, displayed on 2 lines
   (single-line for short names).
   CTAs below title: "Zimmer buchen" 168×24 Watermelon fill r=41.5, "Mehr erfahren" 161×24 outline r=41.5.
*/
.estrel-related {
    container-type: inline-size;
    --u: calc(min(100vw, 1920px) / 1920);
    /* Figma Gästestimmen y=4926, Details ends y=4716 → gap 210.
       Content 1595 wide centered → (1920-1595)/2 = 162 horizontal inset */
    padding: 0 calc(162 * var(--u)) calc(80 * var(--u)) !important;
    margin: calc(210 * var(--u)) auto 0 !important;
    max-width: none;
    width: 100%;
}
.estrel-related__heading {
    text-align: left;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(32 * var(--u));
    line-height: 1.1;
    margin: 0 0 calc(40 * var(--u));
    color: var(--color-deep-sea, #14172D);
}
.estrel-related__heading-main {
    font-family: var(--font-soehne);
    font-weight: 400;
}
.estrel-related__heading-accent {
    font-family: var(--font-alpina);
    font-style: italic;
    margin-left: 0.3em;
    font-weight: 250;
}
.estrel-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(12 * var(--u));
}
.estrel-related__card {
    position: relative;
    aspect-ratio: 527.55 / 405.44;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-deep-sea, #14172D);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: calc(4 * var(--u));
}
.estrel-related__image {
    position: static;
    width: 100%;
    aspect-ratio: 519 / 273;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
.estrel-related__overlay {
    position: static;
    padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    flex: 1;
}
.estrel-related__card-title {
    font-size: calc(19 * var(--u));
    font-weight: 400;
    margin: 0;
    /* Figma card title lh=38 (2x font-size) */
    line-height: calc(38 * var(--u));
    color: #fff;
    font-family: var(--font-soehne);
    order: 2;
}
.estrel-related__card-title em {
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    margin-right: 0.25em;
}
.estrel-related__card-title span {
    font-family: var(--font-soehne);
    font-weight: 400;
    margin-left: 0;
}
.estrel-related__features {
    display: flex;
    gap: calc(16 * var(--u));
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    order: 1;
}
.estrel-related__feature {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(14.4 * var(--u));
    color: rgba(255,255,255,0.9);
    font-family: var(--font-soehne);
    font-weight: 300;
}
.estrel-related__feature .estrel-icon {
    display: inline-flex;
    color: #fff;
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
    align-items: center;
    justify-content: center;
}
.estrel-related__feature svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
    min-width: 12px;
    min-height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}
.estrel-related__ctas {
    display: flex;
    gap: calc(8 * var(--u));
    align-items: center;
    flex-wrap: wrap;
    order: 3;
    margin-top: auto;
}
.estrel-related__cta-primary,
.estrel-related__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(24 * var(--u));
    min-height: 24px;
    padding: 0 calc(12 * var(--u));
    border-radius: calc(41.5 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: normal;
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, background 0.15s ease;
}
.estrel-related__cta-primary {
    width: calc(168 * var(--u));
    min-width: 130px;
    background: var(--color-watermelon, #FED3CD);
    color: var(--color-deep-sea, #14172D);
    border: 0;
}
.estrel-related__cta-primary:hover { filter: brightness(0.95); }
.estrel-related__cta-secondary {
    width: calc(161 * var(--u));
    min-width: 124px;
    background: transparent;
    color: var(--color-watermelon, #FED3CD);
    border: 1px solid var(--color-watermelon, #FED3CD);
    text-decoration: none;
    text-underline-offset: 0;
}
.estrel-related__cta-secondary:hover {
    background: var(--color-watermelon, #FED3CD);
    color: var(--color-deep-sea, #14172D);
}

@media (max-width: 900px) {
    .estrel-related {
        --u: calc(100cqi / 720);
        padding: calc(40 * var(--u)) calc(24 * var(--u)) !important;
        margin: calc(40 * var(--u)) auto 0 !important;
    }
    .estrel-related__heading {
        font-size: calc(24 * var(--u));
        margin-bottom: calc(24 * var(--u));
    }
    .estrel-related__grid {
        grid-template-columns: 1fr;
        gap: calc(20 * var(--u));
    }
    .estrel-related__card {
        aspect-ratio: auto;
    }
    .estrel-related__image {
        aspect-ratio: 4/3;
    }
}