@charset "UTF-8";
/*
 * Estrel Tower — Wellness & Fitness / Kulinarik
 * Figma 1147:1683 "1920 - Screendesign - Wellness & Fitness" (1920x6819)
 * Figma 1147:1907 "1920 - Screendesign - Kulinarik -Coming soon" (1920x7709)
 *
 * Beide Seiten bestehen aus vorhandenen Contentelementen (room_hero,
 * text_intro, room_fokus inkl. "Mehr Details"-Feld, seo_section, faq) — diese
 * Datei haelt nur die Masse, die vom Theme-Standard abweichen. Aufbau wie
 * nachhaltigkeit-page.css.
 *
 * Scoping (zwei Wege, beide unterstuetzt):
 *   - Eigene Seite (Fabstack *-neu): tl_page.cssClass "is-venue venue--wellness"
 *     bzw. "is-venue venue--kulinarik" landet am <body>.
 *   - Zusaetzlicher Artikel auf der bestehenden Seite (Prod, Tausch mit dem
 *     Coming-Soon-Artikel per Sichtbarkeit): Artikel-cssID "venue venue--…";
 *     fe_page setzt is-venue + sunrise, sobald .venue-hero im DOM steht.
 *   - Element: cssID-Klassen venue-hero / venue-intro / venue-split /
 *     venue-seo / venue-faq am Contentelement.
 *
 * Die Abstaende unterscheiden sich zwischen den beiden Entwuerfen und liegen
 * deshalb als einheitenlose Figma-Werte in Variablen am <body>; die Regeln
 * rechnen sie mit dem jeweiligen --u des Elements um.
 */

body.is-venue,
.mod_article.venue {
    --venue-hero-top: 144;      /* Headline-Oberkante */
    --venue-intro-top: 98;      /* Hero-Unterkante → Intro-Text */
    --venue-intro-width: 1112;
    --venue-first-gap: 184;     /* Intro-Unterkante → erstes Bild */
    --venue-card-gap: 278;      /* Bild-Unterkante → naechstes Bild */
    --venue-text-top: 33;       /* Bild-Oberkante → Titel-Oberkante */
    --venue-img-gap: 107;       /* Textspalte → Bild rechts */
    --venue-img-left-gap: 80;   /* Bild links → Textspalte */
    --venue-pill-gap: 44;       /* Abstand der beiden Buttons */
    --venue-seo-gap: 258;       /* letztes Bild → SEO-Ueberschrift */
    --venue-faq-gap: 89;        /* SEO-Text → FAQ-Flaeche */
}

/* Figma 1147:1907 */
body.venue--kulinarik,
.mod_article.venue--kulinarik {
    --venue-hero-top: 244;
    --venue-intro-top: 92;
    --venue-intro-width: 1190;
    /* Figma-Intro-Box ist 148u hoch, der Text nur 4 Zeilen (136u) — die 11u
       Differenz stecken hier mit drin, damit das erste Bild auf y=1405 steht. */
    --venue-first-gap: 225;
    --venue-card-gap: 174;
    --venue-text-top: 50;
    --venue-img-gap: 123;
    --venue-img-left-gap: 82;
    --venue-pill-gap: 23;
    --venue-seo-gap: 242;
    --venue-faq-gap: 162;
}

/* Seite ist theme-fixiert hell — der Sunrise/Sunset-Schalter haette keine
   Funktion (Muster wie body.is-eco). */
body.is-venue .estrel-theme-toggle { display: none !important; }

/* Bestehende Seiten tragen noch tl_page.cssClass "page-content" (Coming-Soon-Aera):
   page-content.css klemmt jeden Artikel auf 1100px. Fuer den Venue-Artikel
   aufheben — gleiches Muster wie coming-soon.css. */
body.page-content .mod_article:has(.venue-hero) {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ----------------------------------------------- Full-Bleed-Reset (wichtig) */
/* Mit cssID-Klasse beginnt das class-Attribut nicht mehr mit "content-estrel",
   layout.css stellt den Wrapper dann nicht frei (Details: nachhaltigkeit-page.css). */
.venue-hero,
.venue-intro,
.venue-split,
.venue-seo,
.venue-faq {
    max-width: none !important;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* ---------------------------------------------------------------- Hero */
/* Rectangle 327: #14172D, opacity .2, blend DARKEN — wie Nachhaltigkeit. */
.venue-hero .estrel-zimmer-hero__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #14172D;
    opacity: 0.2;
    mix-blend-mode: darken;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .venue-hero .estrel-zimmer-hero__inner {
        height: calc(951 * var(--u));
    }

    /* Headline (beide Entwuerfe):
         "Estrel Tow"  Soehne 400 270/284u, RECHTSBUENDIG in Box x460..1928
                       (Glyphen x725..1920 — anders als auf der Nachhaltigkeitsseite)
         "er"          Soehne 400 270/284u  @x-15, Box 221u unter Zeile 1
         Akzent        GT Alpina 250 italic 280/274u  @x288 (57u nach "er")
       Wellness zusaetzlich Zeile 3 "Fitness" GT Alpina 300/274u @x750, 237u
       unter "Wellness &". */
    .venue-hero .estrel-zimmer-hero__title {
        top: calc(var(--venue-hero-top) * var(--u));
        left: calc(-15 * var(--u));
        width: calc(1966 * var(--u));
        line-height: normal;
    }

    /* Zeilenhoehe 284u wie im Entwurf (sonst sitzt die Zeile 31u zu hoch),
       -63u holen Zeile 2 auf den Figma-Abstand von 221u zurueck. Rechte Kante
       1928u = Titelbox (-15u + 1966u) minus 23u. */
    .venue-hero .estrel-zimmer-hero__title-line1 {
        font-size: calc(270 * var(--u));
        line-height: calc(284 * var(--u));
        margin-bottom: calc(-63 * var(--u));
        padding-left: 0;
        padding-right: calc(23 * var(--u));
        text-align: right;
    }

    .venue-hero .estrel-zimmer-hero__title-line2 {
        gap: calc(57 * var(--u));
        line-height: calc(284 * var(--u));
        padding-left: 0;
    }

    .venue-hero .estrel-zimmer-hero__title-line2-prefix {
        font-size: calc(270 * var(--u));
    }

    .venue-hero .estrel-zimmer-hero__title-line2-accent,
    .venue-hero .estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line2-accent {
        font-size: calc(280 * var(--u));
        letter-spacing: 0;
    }

    /* Zeile 3: Box-Oberkante 256u unter der von Zeile 2 ("er" 365 → "Fitness"
       621); Zeile 2 ist 284u hoch → -28u, plus -10u Ausgleich der kleineren
       Zeilenhoehe (274u) gegenueber dem Schriftgrad 300u (gemessen).
       Einzug 750u + 15u Titel-Versatz. */
    .venue-hero .estrel-zimmer-hero__title-line3 {
        margin-top: calc(-38 * var(--u));
        line-height: calc(274 * var(--u));
        padding-left: calc(765 * var(--u));
    }

    .venue-hero .estrel-zimmer-hero__title-line3-accent {
        font-size: calc(300 * var(--u));
    }
}

/* ---------------------------------------------------------------- Intro */
/* Soehne 400 28/34 zentriert, Akzent GT Alpina 250 italic 31 — entspricht der
   Paragraph-Variante von estrel_text_intro; hier nur Abstand und Breite. */
.venue-intro .estrel-intro {
    padding-top: calc(var(--venue-intro-top) * var(--u)) !important;
    padding-bottom: 0 !important;
}
.venue-intro .estrel-intro__inner {
    max-width: calc(var(--venue-intro-width) * var(--u));
}
.venue-intro .estrel-intro__inner em {
    font-size: calc(31 * var(--u));
}
/* Absatz-Aussenabstand des letzten <p> wuerde den Abstand zum ersten Bild um
   27u vergroessern (gemessen). */
.venue-intro .estrel-intro__inner p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------ Split (room_fokus) */
/* Text 600u breit ab x=161u (Titel 159, Fliesstext 163 im Entwurf), Bild
   512u hoch. Bild rechts laeuft bis zur Viewport-Kante (Kulinarik: im Entwurf
   1125u breit und rechts ueber die Kante hinaus — object-position left
   schneidet genau diesen Teil ab). Bild links beginnt bei x=0, 1053u breit. */
.venue-split .estrel-room-fokus {
    margin-top: calc(var(--venue-card-gap) * var(--u)) !important;
}
.venue-split--first .estrel-room-fokus {
    margin-top: calc(var(--venue-first-gap) * var(--u)) !important;
}
/* Kulinarik "Sky Bar" (Figma 1147:2097) sitzt 158u statt 174u unter "Die Bar". */
.venue-split--tight .estrel-room-fokus {
    margin-top: calc(158 * var(--u)) !important;
}
/* Aufgeklapptes Details-Feld: naechstes Bild 160u unter dem Feld (Figma 3191 → 3351). */
.venue-split.is-details-open + .venue-split .estrel-room-fokus {
    margin-top: calc(160 * var(--u)) !important;
}

.venue-split .estrel-split.estrel-split--image-right {
    grid-template-columns: calc(600 * var(--u)) 1fr;
    gap: calc(var(--venue-img-gap) * var(--u));
    padding: 0 0 0 calc(161 * var(--u)) !important;
    justify-content: start;
    align-items: start;
}
.venue-split .estrel-split.estrel-split--image-left {
    grid-template-columns: calc(1053 * var(--u)) calc(600 * var(--u));
    gap: calc(var(--venue-img-left-gap) * var(--u));
    padding: 0 !important;
    justify-content: start;
    align-items: start;
}

.venue-split .estrel-split__media {
    height: calc(512 * var(--u));
    border-radius: calc(3 * var(--u));
    background: transparent;
}
.venue-split .estrel-split--image-right .estrel-split__media img {
    object-position: left center;
}

.venue-split .estrel-split__text {
    align-self: start;
    padding-top: calc(var(--venue-text-top) * var(--u));
}
/* Abweichende Textlagen im Entwurf: THE Spa (langer Text) 2u, Kulinarik
   "Die Bar" 33u statt 50u. */
.venue-split--flush .estrel-split__text { padding-top: calc(2 * var(--u)); }
.venue-split--high .estrel-split__text  { padding-top: calc(33 * var(--u)); }

/* Titel: Soehne 400 40/80; fuehrender Akzent per ##…## (EstrelEmHighlightListener
   → <em>) in GT Alpina 250 italic 44 — Figma setzt den kursiven Teil mal vor,
   mal hinter den geraden ("Sauna & Wellness", "THE Spa"). Die 80u Zeilenhoehe
   kommt aus dem Entwurf; der Fliesstext beginnt aber schon 72u unter der
   Titel-Oberkante, daher -8u. */
.venue-split .estrel-split__heading {
    margin: 0 0 calc(-8 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(80 * var(--u));
}
.venue-split .estrel-split__heading-main {
    display: inline;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: calc(80 * var(--u));
}
.venue-split .estrel-split__heading-main em {
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: 1.1em;
    line-height: inherit;
}
.venue-split .estrel-split__heading-accent {
    display: inline;
    font-size: 1.1em;
    line-height: inherit;
    /* kein margin-left: der Zeilenumbruch im Template ergibt schon den Wortabstand */
}
.venue-split .estrel-split__heading-accent:empty { display: none; }

/* Fliesstext 18/27. Figma nennt Roboto #000 — das ist ein Platzhalter des
   Entwurfs (Roboto laedt das Theme nicht; "Restaurant 43" steht im selben
   Entwurf in Soehne). Wie auf der Nachhaltigkeitsseite Soehne in #14172D. */
.venue-split .estrel-split__body {
    font-size: calc(18 * var(--u));
    line-height: calc(27 * var(--u));
    max-width: calc(600 * var(--u));
    margin-bottom: calc(42 * var(--u));
}
.venue-split .estrel-split__body p {
    margin: 0 0 calc(27 * var(--u));
    color: #14172D;
}
.venue-split .estrel-split__body p:last-child { margin-bottom: 0; }

/* Buttons — Figma "Tisch reservieren" / "Mehr erfahren":
   Primaer #FED3CD, 30u hoch, r=41.5u, Text GT Alpina 250 italic 19/22,
   ls 2.09u, 26.5u Innenabstand. Sekundaer 1u-Kontur #FED3CD, ls .95u,
   29u links, Chevron 8u mit 14u Abstand, 17u rechts. */
.venue-split .estrel-split__ctas {
    gap: calc(var(--venue-pill-gap) * var(--u));
}
.venue-split .estrel-split__cta-primary,
.venue-split .estrel-split__cta-secondary {
    min-width: 0;
    height: calc(30 * var(--u));
    border-radius: calc(41.5 * 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));
    color: #14172D;
}
.venue-split .estrel-split__cta-primary {
    padding: 0 calc(26.5 * var(--u));
    letter-spacing: calc(2.09 * var(--u));
}
.venue-split .estrel-split__cta-secondary {
    padding: 0 calc(29 * var(--u));
    letter-spacing: calc(0.95 * var(--u));
}
.venue-split .estrel-split__cta-details {
    padding: 0 calc(17 * var(--u)) 0 calc(29 * var(--u));
}
.venue-split .estrel-split__cta-details[aria-expanded="true"] {
    background: transparent;
}

/* ---------------------------------------------------------------- SEO */
/* Figma "SEO": Ueberschrift zentriert, Akzent GT Alpina 250 italic 32 vor
   Soehne 29 (per ##…## im Haupt-Feld). Spalten 768u ab x=161u, 60u Abstand,
   Soehne 20/24 Blocksatz, 95u unter der Ueberschrift. */
.venue-seo .estrel-seo {
    margin-top: calc(var(--venue-seo-gap) * var(--u)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: calc(161 * var(--u)) !important;
    padding-right: calc(163 * var(--u)) !important;
}
/* Nur Desktop: darunter greifen die Lesbarkeits-Untergrenzen aus zimmer.css
   (max(16px, …)) — die u-Werte wuerden mobil auf ~9px schrumpfen. */
@media (min-width: 1025px) {
    .venue-seo .estrel-seo__heading {
        margin-bottom: calc(63 * var(--u));
        line-height: calc(32 * var(--u));
    }
    .venue-seo .estrel-seo__heading-main {
        font-size: calc(29 * var(--u));
    }
    .venue-seo .estrel-seo__heading-main em {
        font-family: var(--font-alpina);
        font-style: italic;
        font-weight: 250;
        font-size: calc(32 * var(--u));
    }
    .venue-seo .estrel-seo__cols {
        font-size: calc(20 * var(--u));
        line-height: calc(24 * var(--u));
        text-align: justify;
    }
    .venue-seo .estrel-seo__col p { margin: 0 0 calc(24 * var(--u)); }
    .venue-seo .estrel-seo__col p:last-child { margin-bottom: 0; }
}

/* ---------------------------------------------------------------- FAQ */
/* Flaeche #FEF5EC ab SEO-Unterkante + 89u (Wellness) bzw. 162u (Kulinarik).
   Liste im Entwurf breiter als der Theme-Standard (1100u ab x=410u):
   Trennlinien x=329..1574u. */
.venue-faq {
    display: block;
    /* Der Wrapper hat kein eigenes --u (das liegt an section.estrel-faq). */
    margin-top: calc(var(--venue-faq-gap) * min(100vw, 1920px) / 1920);
}
@media (min-width: 1025px) {
    .venue-faq .estrel-faq {
        padding-left: calc(330 * var(--u)) !important;
        padding-right: calc(346 * var(--u)) !important;
    }
    .venue-faq .estrel-faq__heading,
    .venue-faq .estrel-faq__list {
        max-width: none;
    }
}

/* ---------------------------------------------------------------- Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .venue-hero .estrel-zimmer-hero__title {
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 calc(24 * var(--u));
    }
    .venue-hero .estrel-zimmer-hero__title-line1 {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
        text-align: right;
        line-height: 0.94;
    }
    .venue-hero .estrel-zimmer-hero__title-line2 {
        gap: clamp(14px, 3.5vw, 34px);
        padding-left: 0;
        line-height: 0.94;
    }
    .venue-hero .estrel-zimmer-hero__title-line3 {
        padding-left: 0;
        text-align: right;
        line-height: 0.94;
        margin-top: 0;
    }
    .venue-hero .estrel-zimmer-hero__title-line2-prefix,
    .venue-hero .estrel-zimmer-hero__title-line2-accent,
    .venue-hero .estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line2-accent,
    .venue-hero .estrel-zimmer-hero__title-line3-accent {
        font-size: clamp(70px, 11vw, 110px);
        letter-spacing: 0;
    }
    .venue-intro .estrel-intro {
        padding-top: calc(56 * var(--u)) !important;
    }
    /* __inner ist hier 1199u hoch (Frame + Platz fuer die Kategorie-Navigation,
       die es auf diesen Seiten nicht gibt) — Frame-only wie auf der Karriere-Seite. */
    .venue-hero .estrel-zimmer-hero__inner {
        height: calc(951 * var(--u)) !important;
        padding-bottom: 0 !important;
    }
    /* zimmer.css rechnet die SEO-Schrift hier noch mit --u = 1920er-Basis
       (20u ≈ 11px) — lesbare Groessen fuer diese Seiten. */
    .venue-seo .estrel-seo__heading-main { font-size: 24px; }
    .venue-seo .estrel-seo__heading-main em { font-size: 26px; }
    .venue-seo .estrel-seo__cols {
        font-size: 17px;
        line-height: 1.45;
    }
}

/* Zwischen 901 und 1024u verankert zimmer.css --u fuer .estrel-split nicht
   neu (bleibt auf 1920 bezogen) — wie auf der Nachhaltigkeitsseite nachziehen. */
@media (min-width: 901px) and (max-width: 1024px) {
    .venue-split .estrel-split {
        --u: calc(100cqi / 1024);
    }
    .venue-split .estrel-split__heading,
    .venue-split .estrel-split__heading-main {
        font-size: calc(34 * var(--u));
        line-height: calc(44 * var(--u));
    }
    .venue-split .estrel-split__body {
        font-size: calc(17 * var(--u));
        line-height: calc(26 * var(--u));
    }
}

@media (max-width: 1024px) {
    .venue-split .estrel-split.estrel-split--image-right,
    .venue-split .estrel-split.estrel-split--image-left {
        grid-template-columns: 1fr;
        gap: calc(32 * var(--u));
        padding: 0 calc(40 * var(--u)) !important;
    }
    .venue-split .estrel-split--image-right .estrel-split__media,
    .venue-split .estrel-split--image-right .estrel-split__text,
    .venue-split .estrel-split--image-left .estrel-split__media,
    .venue-split .estrel-split--image-left .estrel-split__text {
        grid-column: 1;
    }
    .venue-split .estrel-split--image-left .estrel-split__media,
    .venue-split .estrel-split--image-right .estrel-split__media { order: 0; }
    .venue-split .estrel-split--image-left .estrel-split__text,
    .venue-split .estrel-split--image-right .estrel-split__text { order: 1; }
    .venue-split .estrel-split__media { height: calc(380 * var(--u)); }
    .venue-split .estrel-split--image-right .estrel-split__media img { object-position: center; }
    .venue-split .estrel-split__text,
    .venue-split--flush .estrel-split__text,
    .venue-split--high .estrel-split__text { padding-top: 0; }
    .venue-split .estrel-split__heading { margin-bottom: calc(12 * var(--u)); }
    .venue-split .estrel-split__heading,
    .venue-split .estrel-split__heading-main { line-height: 1.2; }
    .venue-split .estrel-split__body { max-width: none; }

    .venue-split .estrel-room-fokus,
    .venue-split--first .estrel-room-fokus,
    .venue-split--tight .estrel-room-fokus,
    .venue-split.is-details-open + .venue-split .estrel-room-fokus {
        margin-top: calc(96 * var(--u)) !important;
    }
    .venue-split.is-details-open .estrel-split-details {
        margin-top: calc(32 * var(--u));
    }

    .venue-seo .estrel-seo {
        margin-top: calc(96 * var(--u)) !important;
        padding-left: calc(40 * var(--u)) !important;
        padding-right: calc(40 * var(--u)) !important;
    }
    .venue-seo .estrel-seo__heading { line-height: 1.2; }
    .venue-seo .estrel-seo__cols { line-height: 1.45; }
    .venue-faq { margin-top: 80px; }
}

@media (max-width: 900px) {
    /* zimmer.css setzt hier --u auf 375 und die Split-Paddings mit !important —
       eigene Werte daher auf dieselbe Basis. */
    .venue-split .estrel-split.estrel-split--image-right,
    .venue-split .estrel-split.estrel-split--image-left {
        padding: 0 calc(24 * var(--u)) !important;
        gap: calc(24 * var(--u)) !important;
    }
    .venue-split .estrel-room-fokus,
    .venue-split--first .estrel-room-fokus,
    .venue-split--tight .estrel-room-fokus,
    .venue-split.is-details-open + .venue-split .estrel-room-fokus {
        margin-top: calc(56 * var(--u)) !important;
    }
    .venue-split .estrel-split__media { height: calc(240 * var(--u)) !important; }
    .venue-split .estrel-split__heading-main em { font-size: 1.08em; }
    .venue-split .estrel-split__body p { margin-bottom: 1em; }
    .venue-split .estrel-split__body { margin-bottom: calc(24 * var(--u)); }
}

@media (max-width: 767px) {
    /* Kein Platz fuer die (hier nicht vorhandene) Kategorie-Navigation. */
    .venue-hero .estrel-zimmer-hero__inner { padding-bottom: 0 !important; }
    .venue-intro .estrel-intro { padding-top: 40px !important; }
    .venue-seo .estrel-seo {
        margin-top: 56px !important;
    }
    .venue-seo .estrel-seo__cols { text-align: left; }
    .venue-faq { margin-top: 56px; }
}