@charset "UTF-8";
/*
 * Estrel Tower — Zimmer Overview Hero
 * Mirrors the homepage hero pattern (hero.css), adapted for image-based hero
 * with editor-controlled title (title-main + title-accent).
 *
 * Figma: 1815 × 889 image frame, title overlapping bottom-left, peach text.
 * Same --u/cqi scaling so image stays cinematic at all viewport widths.
 */

.estrel-zimmer-hero {
    container-type: inline-size;
    --u: calc(100cqi / 1920);
    position: relative;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent;
    overflow: visible;
}

.estrel-zimmer-hero__inner {
    position: relative;
    width: 100%;
    /* Hero 951 + Gap 77 (bis y=1028) + Tabs 72 + Gap 99 zu Intro = 1199 (Figma 208:42 + 208:400). */
    height: calc(1199 * var(--u));
}

/* Image frame — capped at 1820u wide and horizontally centered, so on a
   1920u viewport there is a 50u gutter on each side. Height stays at the
   original 951u so the title overlap (Figma 208:50) remains anchored. */
.estrel-zimmer-hero__frame {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(1670 * var(--u));
    height: calc(951 * var(--u));
    overflow: hidden;
    background: var(--color-deep-sea, #14172D);
    z-index: 1;
}

.estrel-zimmer-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Subtle peach wash at the bottom — helps title legibility in image */
.estrel-zimmer-hero__gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(254, 211, 205, 0.15) 75%,
        rgba(254, 211, 205, 0.35) 100%
    );
}

/* Title — per Figma 208:50 "Estrel Tower / Zimmer".
   Figma title is 2145px wide overflowing 1920px frame:
   - x=7687 (frame at x=7772, so -85px left)
   - width=2145 (extends 140px past right)
   Lines wrap with intentional bleed on both sides.
   Line 1: Söhne Buch 300px (regular sans).
   Line 2: GT Alpina italic 250 ~280px.
   Color: Watermelon #FED3CD. */
.estrel-zimmer-hero__title {
    position: absolute;
    /* Figma 208:49 Headline group: y=227, width 2145u with -85u left bleed.
       Frame is now capped at 1820u and centered, so the title returns to its
       original Figma extents instead of the wider full-bleed override. */
    top: calc(227 * var(--u));
    left: calc(-85 * var(--u));
    width: calc(2145 * var(--u));
    margin: 0;
    color: #FED3CD;
    z-index: 3;
    pointer-events: none;
    line-height: 0.92;
    overflow: visible;
}

.estrel-zimmer-hero__title-line1 {
    display: block;
    /* Figma styleOverride 607: "Estrel Tower" = Söhne Buch 400, 300px, lh 260px.
       Figma places the 13 leading whitespace chars (Söhne 240u) that indent the
       line until "w" lands at the frame's right edge — emulated via padding-left
       so "Tow" ends flush with the 1920-viewport right margin. */
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(300 * var(--u));
    line-height: calc(260 * var(--u));
    letter-spacing: 0;
    color: #FED3CD;
    white-space: nowrap;
    padding-left: calc(730 * var(--u));
}

.estrel-zimmer-hero__title-line2 {
    display: flex;
    align-items: baseline;
    gap: calc(120 * var(--u));
    line-height: calc(260 * var(--u));
    color: #FED3CD;
    /* Figma-Bleed: das "e" am Anfang von "er" wird links vom Viewport-Rand
       angeschnitten (ca. 40-50%). Titel-Container beginnt bei left=-85u —
       padding-left=55u zieht die Line-2 soweit nach links, dass vom "e" nur
       noch die rechte Hälfte sichtbar ist. */
    padding-left: var(--u);
}

/* Line 2 prefix = "er" (Rest von "Tower"). cso[13..26] → Söhne 400 300u.
   Uniform size; the 230/270 values in the override table belong to the
   whitespace chars at positions 27 and 35, not to letters. */
.estrel-zimmer-hero__title-line2-prefix {
    font-family: var(--font-soehne);
    font-style: normal;
    font-weight: 400;
    font-size: calc(300 * var(--u));
    letter-spacing: 0;
}

/* Line 2 accent = "Zimmer" — base font GT Alpina Thin Italic 250, cso[29..34]
   bumps fontSize to 300u (inherits the italic family from the TEXT-node base). */
.estrel-zimmer-hero__title-line2-accent {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(300 * var(--u));
    letter-spacing: 0;
    white-space: nowrap;
    padding-left: 0;
    margin-left: 0;
}

/* 3-Line mode (e.g. "Estrel Tower" + "Flächen & Räume"):
   Figma 467:6762 packs "er Flächen &" onto line 2 (accent at 280u — slightly
   smaller than single-word case so it fits), "Räume" wraps to line 3 (300u).
   The last word indents from the left so it stays visually anchored under the
   right portion of line 2 yet still inside the viewport. */
.estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line2-accent {
    font-size: calc(280 * var(--u));
}

.estrel-zimmer-hero__title-line3 {
    display: block;
    line-height: calc(260 * var(--u));
    color: #FED3CD;
    /* Figma 467:6762: "Räume" sits at x=38638 inside hero frame at x=37772 →
       866u from the hero's left edge. Subtract the title's -85u left offset
       so the indent is measured from the actual title container origin. */
    padding-left: calc(951 * var(--u));
}

.estrel-zimmer-hero__title-line3-accent {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(300 * var(--u));
    letter-spacing: 0;
    white-space: nowrap;
    color: #FED3CD;
}

/* ============================
   EMBEDDED CATEGORY-NAV
   Sits at the very bottom of the hero, overlaying the image
   ============================ */

.estrel-zimmer-hero__nav {
    position: absolute;
    left: 0;
    right: 0;
    /* Per Figma: 78px below hero bottom (hero ends at 951*--u; tabs start at 1029*--u) */
    top: calc(951 * var(--u) + 78 * var(--u));
    z-index: 4;
    pointer-events: auto;
    padding-bottom: calc(98 * var(--u));   /* Figma 98px gap to intro */
}

.estrel-zimmer-hero__nav-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;     /* Figma 208:400: tabs top-align, heights vary by icon+label */
    gap: calc(130 * var(--u));   /* Figma 208:400: 390px total gap / 3 = 130u (5-tab default) */
}
/* Meetings cat-nav (Figma 467:7286): 6 tabs in 942u frame → ~76u gap. */
.estrel-zimmer-hero__nav[data-tab-count="6"] .estrel-zimmer-hero__nav-list {
    gap: calc(76 * var(--u));
}

.estrel-zimmer-hero__nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.estrel-zimmer-hero__nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma 467:7300 (Flächen & Räume tab): 112h − 50h icon − 48h label = 14u
       gap. Other Meetings tabs: ~10-18u. Zimmer tabs use the same vertical
       rhythm. Apply uniformly. */
    gap: calc(14 * var(--u));
    /* Figma 467:2853 sets opacity=0.5 on each tab group — represent inactive
       state with 50% alpha (not 0.55). Active tab gets full deep-sea. */
    color: rgba(20, 23, 45, 0.5);
    text-decoration: none;
    transition: color 0.18s ease;
}

.estrel-zimmer-hero__nav-link:hover,
.estrel-zimmer-hero__nav-item.is-active .estrel-zimmer-hero__nav-link {
    color: var(--text-primary, #14172D);
}

/* Icon container — Figma 467:2853 children: icon at rel_y=0, label at per-tab
   rel_y (44.5/47/58/47/47.7). Container height = label's rel_y so label starts
   exactly at its Figma position. Signature's icon (64h) overflows its 58u
   container by 6u downward — overflow:visible preserves the diamond fully. */
.estrel-zimmer-hero__nav-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
}

.estrel-zimmer-hero__nav-icon svg {
    display: block;
    color: currentColor;
    width: auto;
    height: auto;
}

/* All icon containers share the label baseline at Figma y≈58 (labels align
   across tabs), so the container height equals label-top y = 58u uniformly.
   Icon SVG dimensions are per-tab from Figma 467:2853 SPEC; alignment within
   container is flex-end so icons bottom-anchor on the same baseline. */
.estrel-zimmer-hero__nav-icon {
    height: calc(58 * var(--u));
    align-items: flex-end;
}
.estrel-zimmer-hero__nav-icon[data-icon="cat_zimmer"] svg {
    width: calc(56 * var(--u));
    height: calc(34 * var(--u));
}
.estrel-zimmer-hero__nav-icon[data-icon="cat_suiten"] svg {
    width: calc(47 * var(--u));
    height: calc(35 * var(--u));
}
/* Signature icon: 64×64 Figma frame has ~17u padding around the visible
   diamond. Render SVG at 54×54 bottom-aligned so the visible glyph is
   ~25u tall (≈75% of the bed icon) and its top lands at y≈18 — slightly
   above the bed baseline but not poking out of the icon row. */
.estrel-zimmer-hero__nav-icon[data-icon="cat_signature_suiten"] svg {
    width: calc(54 * var(--u));
    height: calc(54 * var(--u));
}
.estrel-zimmer-hero__nav-icon[data-icon="cat_longstay"] svg {
    width: calc(30 * var(--u));
    height: calc(41 * var(--u));
}
.estrel-zimmer-hero__nav-icon[data-icon="cat_arrangements"] svg {
    width: calc(40.8 * var(--u));
    height: calc(40.8 * var(--u));
}

.estrel-zimmer-hero__nav-label {
    /* Figma 467:7286 (meetings) + 467:2853 (zimmer) labels:
       - inactive: Söhne 400 (Buch / Regular)
       - active:   Söhne 500 (Medium) */
    font-family: var(--font-soehne);
    font-size: calc(20 * var(--u));
    font-weight: 400;
    line-height: calc(24 * var(--u));
    letter-spacing: 0;
    white-space: pre-line;   /* preserve \n in "Signature\nSuiten" */
    text-align: center;
}

.estrel-zimmer-hero__nav-item.is-active .estrel-zimmer-hero__nav-label {
    font-weight: 500;
}

/* Separates estrel_category_nav Modul liegt im Layout über dem Hero-Element —
   auf Overview-Pages wird es hidden, weil das Hero seine eigene Nav inline
   rendert (unter dem Hero-Frame positioniert, Figma 208:400 Position). */
/* Overview-Pages: inline-Nav (mit Icons) kommt aus dem Hero-Block selbst
   (Figma 208:400). Das globale Kategorie-Nav-Modul rendert hier nur den
   Sticky-Bar-Teil — der Initial-Block mit Icons würde sonst doppelt erscheinen. */
.estrel-page.is-overview .module-estrel-category-nav .estrel-cat-nav__initial,
.estrel-page.is-eventtyp-detail .module-estrel-category-nav .estrel-cat-nav__initial,
.estrel-page.is-eventtyp-detail .estrel-cat-nav__initial {
    display: none;
}

/* Overview-Sticky: linkes Breadcrumb "Zimmer" ausblenden — Tabs sind zentriert
   (Detail-Page behält den Breadcrumb, z.B. "Urban Standard Zimmer"). */
.estrel-page.is-overview .estrel-cat-nav__breadcrumb {
    visibility: hidden;
}

/* Sticky-Sentinel direkt unter der Hero-inline-Nav. 1px, unsichtbar.
   Die IntersectionObserver nutzt ihn als Trigger — die Sticky-Bar erscheint
   dadurch erst, wenn die Icons oben aus dem Viewport gescrollt sind. */
.estrel-zimmer-hero__cat-sentinel {
    position: absolute;
    left: 0;
    /* Bottom-der-Nav im Hero liegt bei y ≈ 1099u (siehe __inner height-Kommentar) */
    top: calc(1099 * var(--u));
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ============================
   TABLET (768-1024)
   Larger nav icons + labels visible, slightly compressed hero
   ============================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .estrel-zimmer-hero {
        --u: calc(100cqi / 1024);
    }
    .estrel-zimmer-hero__title-line1 {
        font-size: clamp(80px, 13vw, 130px);
    }
    .estrel-zimmer-hero__title-line2 {
        font-size: clamp(70px, 11vw, 110px);
    }
    .estrel-zimmer-hero__nav {
        bottom: calc(30 * var(--u));
    }
    .estrel-zimmer-hero__nav-list {
        gap: 36px;
    }
    .estrel-zimmer-hero__nav-icon {
        width: 32px;
        height: 32px; /* visual; tap-target enforced on link below */
    }
    /* 32px icon < 44px WCAG tap-target minimum - expand via token */
    .estrel-zimmer-hero__nav-link {
        min-height: var(--touch-target-min);
        justify-content: center;
    }
    .estrel-zimmer-hero__nav-label {
        font-size: 13px;
    }
}

/* ============================
   MOBILE (<768)
   Mirrors Home-Hero pattern (hero.css @media max-width:767px):
   - __frame: aspect-ratio 1815/889 (no fixed height)
   - __title: relative, margin-top -3rem (slides under image bottom)
   - cat-nav: position:relative, normal flow below __frame and __title
   ============================ */
/* The vertical "tower ruler" decoration is already rendered globally by
   the .estrel-elevator component (see animations.css). No per-section
   pseudo-element needed here — would duplicate the visual on category
   pages. */

/* Header transparent über Hero auf Tablet + Mobile (<=1024px).
   Webcam-Pattern auf alle Zimmer-Seiten (overview + detail) angewendet,
   damit der Hero ungestört durchscheint. Outside @media damit der Match-Bereich
   großzügig genug ist (Sergej-Feedback: 768-1024 wurde sonst weiterhin opaque). */
@media (max-width: 1024px) {
    body:has(.estrel-zimmer-hero) .estrel-navbar,
    body:has(.estrel-zimmer-hero) .estrel-navbar::before,
    body:has(.estrel-zimmer-hero) .estrel-navbar.is-scrolled,
    body:has(.estrel-zimmer-hero) .estrel-navbar.is-scrolled::before,
    body.sunrise:has(.estrel-zimmer-hero) .estrel-navbar.is-scrolled::before {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

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

    .estrel-zimmer-hero__inner {
        height: auto;
        padding: 40px 0 60px;
        position: relative;
    }

    /* Make __frame the positioning context for the absolute title */
    .estrel-zimmer-hero__frame {
        position: relative;
    }

    /* aspect-ratio matches Home-Hero (Figma 1815x889 frame).
       transform: translateX(0) resets desktop translateX(-50%) centering trick. */
    .estrel-zimmer-hero__frame {
        position: relative;
        top: auto;
        left: auto;
        transform: translateX(0);
        width: 100%;
        aspect-ratio: 1815 / 889;
        height: auto;
        border-radius: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Title flows BELOW the image with -3rem overlap (same as Home-Hero).
       position: relative so it stacks naturally after __frame in DOM order.
       Desktop padding-left calc(660*--u) reset to 0 so line1 starts at edge. */
    /* Title overlays the image (Figma "bleed" pattern). Anchored to the
       __frame, ~middle vertical position. Nav stays in normal flow below. */
    .estrel-zimmer-hero__title {
        position: absolute;
        top: 38%;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 0 16px;
        text-align: left;
        line-height: 0.92;
        pointer-events: none;
    }

    .estrel-zimmer-hero__title-line1,
    .estrel-zimmer-hero__title-line2 {
        font-size: clamp(1.75rem, 9vw, 3.25rem);
        line-height: 0.94;
        white-space: normal;
    }

    /* Reset desktop-only padding/margin that would break mobile flow.
       text-align:right zieht "Tow" an den rechten Bildschirmrand — mirror
       des Desktop-Patterns (padding-left:730u bei 1920px). */
    .estrel-zimmer-hero__title-line1 {
        padding-left: 0;
        text-align: right;
    }
    .estrel-zimmer-hero__title-line2 {
        margin-left: 0;
        gap: 0.4rem; /* tighter gap at small sizes (desktop: calc(120 * var(--u))) */
        /* Desktop uses calc(55*--u) padding-left for bleed effect - not needed mobile */
        padding-left: 0;
    }

    /* Inline children have their own desktop font-size declarations -
       must be reset explicitly (not inherited from line1/line2 override). */
    .estrel-zimmer-hero__title-line2-prefix,
    .estrel-zimmer-hero__title-line2-accent {
        font-size: clamp(1.75rem, 9vw, 3.25rem);
        line-height: 0.94;
        white-space: normal;
    }

    /* 3-line variant: same clamp + line-height, modest indent */
    .estrel-zimmer-hero__title-line3 {
        padding-left: clamp(1.5rem, 10vw, 4rem);
        /* Desktop uses calc(951*--u) - reset fully */
        line-height: 0.94;
    }
    .estrel-zimmer-hero__title-line3-accent {
        font-size: clamp(1.75rem, 9vw, 3.25rem);
        line-height: 0.94;
        white-space: normal;
    }

    /* 3-line variant Override: die desktop-spec
       .estrel-zimmer-hero__title.is-three-line .title-line2-accent rule
       hat höhere Specificity als unsere mobile clamp ohne .is-three-line
       Prefix → der Accent rendet sonst mit Desktop-Größe (z.B. 257px für
       "Signature" / "Flächen & Räume"). Mit gleicher Specificity erzwingen. */
    .estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line2-prefix,
    .estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line2-accent,
    .estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line3-accent {
        font-size: clamp(1.75rem, 9vw, 3.25rem);
        line-height: 0.94;
        white-space: normal;
    }

    /* Cat-nav: DOM sibling of __frame (not inside it), so absolute positioning
       is relative to __inner (position:relative). On mobile __inner is height:auto,
       so we flow the nav naturally (position: relative) between image and title.
       Override desktop top: calc(951*--u + 78*--u) and padding-bottom. */
    .estrel-zimmer-hero__nav {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        /* Shorthand sets padding-bottom 8px, overriding desktop calc(98*--u). */
        padding: 20px 8px 8px;
    }

    .estrel-zimmer-hero__nav-list {
        gap: 14px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: center;
        padding: 0 12px;
        align-items: stretch;
    }

    .estrel-zimmer-hero__nav-list::-webkit-scrollbar { display: none; }

    .estrel-zimmer-hero__nav-item {
        flex: 0 0 auto;
    }

    /* Icon container on mobile: 36px square box, center-aligned (not flex-end
       like desktop). Override the per-tab calc(*--u) heights and svg sizes
       which were sized for the 1920-grid and clip on small viewports. */
    .estrel-zimmer-hero__nav-icon {
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
    }

    .estrel-zimmer-hero__nav-icon svg,
    .estrel-zimmer-hero__nav-icon[data-icon] svg {
        width: auto;
        height: 26px;
        max-width: 32px;
    }
    .estrel-zimmer-hero__nav-icon[data-icon="cat_signature_suiten"] svg {
        width: 30px;
        height: 30px;
        max-width: 30px;
    }
    .estrel-zimmer-hero__nav-icon[data-icon="cat_longstay"] svg {
        width: 22px;
        height: 30px;
    }
    .estrel-zimmer-hero__nav-icon[data-icon="cat_arrangements"] svg {
        width: 30px;
        height: 30px;
    }

    /* Tap-target >=44px via token - expands click area without growing the icon */
    .estrel-zimmer-hero__nav-link {
        min-height: var(--touch-target-min);
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .estrel-zimmer-hero__nav-label {
        font-size: 12px;
        line-height: 1.15;
        color: var(--text-primary);
        min-height: 2.3em; /* room for "Signature Suiten" 2-line wrap; uniform across tabs */
        white-space: pre-line;
        text-align: center;
    }
}