@charset "UTF-8";
/*
 * Estrel Tower — Farbkonzept „Salbei" (Oktober 2026)
 *
 * Figma ViMc63sJOJ8tLO60EKrj8n, Seite „Farbkonzept, Screendesign" (1167:152) +
 * Janas DevTools-Notizen „Farbkonzept, Vorarbeit" (1158:152).
 * Analyse: docs/figma-cache/farben-2026-10/ANALYSE.md
 *
 * Watermelon #FED3CD entfällt. Neue Akzentfarbe Salbei #929682.
 *   - Watermelon-Fläche (Button, Pfeil, Dot, Footer …)   → Salbei, Text darauf Butter Yellow
 *   - Watermelon-Kontur + Text auf hell (Ghost-Button)    → Salbei
 *   - Watermelon-Kontur + Text auf dunkel                 → Butter Yellow
 *   - Watermelon-Akzenttext auf dunkel / Bild             → Butter Yellow
 *   - Watermelon-Kontur auf hell (FAQ-/Legal-Tabs)        → Deep Sea
 *
 * ROLLBACK: Jede Regel hängt an html.palette-salbei. Ohne die Klasse greift
 * dieses Stylesheet nicht, das alte Watermelon-CSS darunter ist unverändert.
 * Schalter: Backend → System → Einstellungen → „Altes Farbschema (Watermelon)
 * verwenden" bzw. ?farbschema=alt im Browser (fe_page_estrel.html.twig).
 *
 * Unterseiten-Header (Janas Ansage): Layout bleibt, nur Watermelon → Butter Yellow.
 * Wo Butter Yellow auf Creme unsichtbar wäre (heller Header, gescrollte helle
 * Navbar), gilt Deep Sea wie im neuen Figma-Screendesign.
 *
 * Lädt als LETZTES Stylesheet. Spezifität = Originalselektor + .palette-salbei,
 * !important nur dort, wo das Original selbst !important setzt.
 */


/* =====================================================================
   1. TOKENS
   ===================================================================== */

html.palette-salbei {
    --color-salbei: #929682;
    /* Alle var(--color-watermelon)-Flächen (Room-Grid, Booking-Bar, Split,
       Related, Cookiebar, News mobil …) werden damit Salbei. Texte auf diesen
       Flächen werden unten explizit auf Butter Yellow gesetzt. */
    --color-watermelon: #929682;
}

.palette-salbei body,
.palette-salbei body.night {
    --text-accent: var(--color-butter-yellow);
    --btn-primary-text: var(--color-butter-yellow);
}

.palette-salbei body.sunrise {
    --text-accent: var(--color-deep-sea);
    --btn-primary-text: var(--color-butter-yellow);
}


/* =====================================================================
   2. NAVBAR — Menü-Pill, Logo, Sprache, Sunrise/Sunset, Header-Pill
   Farben über Variablen an .estrel-navbar:
     Standard (dunkler Grund / Bild)  → Butter Yellow (Janas Header-Regel,
                                         Startseite Night, Figma Webcam/Kontakt)
     heller Grund                      → Deep Sea (Figma Startseite Day, FAQ, Zimmer)
   ===================================================================== */

.palette-salbei .estrel-navbar {
    --pn-bg: #FEF5EC;
    --pn-fg: #14172D;
    --pn-logo: #FEF5EC;
}

/* Heller Grund hinter der Navbar. Mit dem neuen Unterseiten-Header (Bild beginnt
   unter der Navbar) gilt das auf allen hellen Seiten auch ganz oben; dunkel bleiben
   Startseite Night, Kontakt, Karriere, Webcam, Eventtyp-Detail (Navy-Band) und
   Seiten im Night-Modus. Coming Soon / 404 haben einen hellen Schleier → Deep Sea. */
.palette-salbei body.sunrise:not(.is-kontakt):not(.is-karriere) .estrel-page:not(.is-eventtyp-detail):not(.is-kontakt):not(.is-karriere):not(:has(.estrel-webcam)) .estrel-navbar,
.palette-salbei .estrel-page:has(.estrel-coming-soon) .estrel-navbar,
.palette-salbei .estrel-page:has(.estrel-info-hero):not(:has(.estrel-info-hero-dark)):not(:has(.estrel-webcam)) .estrel-navbar,
.palette-salbei .estrel-page.is-media-kit .estrel-navbar,
.palette-salbei .estrel-page.has-category-pill:not(.is-eventtyp-detail) .estrel-navbar.is-scrolled {
    --pn-bg: #14172D;
    --pn-fg: #FEF5EC;
    --pn-logo: #14172D;
}

.palette-salbei .estrel-pill {
    border-color: var(--pn-bg);
    background: var(--pn-bg);
    color: var(--pn-fg);
    transition: opacity var(--hover-transition), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.palette-salbei .estrel-hamburger span {
    background: var(--pn-fg);
    transition: background-color 0.3s ease;
}

/* Logo-SVG im Template mit fill="#FED3CD" — CSS-fill schlägt das Attribut. */
.palette-salbei .estrel-navbar__logo svg path {
    fill: var(--pn-logo);
    transition: fill 0.3s ease;
}

.palette-salbei .estrel-navbar__logo-svg {
    color: var(--pn-logo);
}

.palette-salbei .estrel-theme-toggle {
    border-color: var(--pn-bg);
    background: var(--pn-bg);
    color: var(--pn-fg);
    transition: opacity var(--hover-transition), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.palette-salbei .estrel-navbar .estrel-lang-switch__link,
.palette-salbei .estrel-navbar .estrel-lang-switch__divider {
    color: var(--pn-logo);
}

.palette-salbei .estrel-header-pill {
    background: var(--pn-bg);
    color: var(--pn-fg);
    transition: filter 0.18s ease, transform 0.15s ease, background-color 0.3s ease, color 0.3s ease;
}

.palette-salbei .estrel-header-pill__icon {
    color: var(--pn-fg);
}

/* Eventtyp-Detail (Kongresse …): Navbar wird beim Scrollen navy, Logo und
   Icons liefen dort über einen Creme-Filter. Mit Butter-Yellow-Pill wäre das
   gefilterte Pill-Icon unsichtbar → Filter aus, Farben über die Variablen.
   Watermelon-Trennlinie am Header → Butter Yellow. */
.palette-salbei .estrel-page.is-eventtyp-detail.has-category-pill .estrel-pill {
    background: var(--pn-bg) !important;
    color: var(--pn-fg) !important;
}

.palette-salbei .estrel-page.is-eventtyp-detail.has-category-pill .estrel-navbar a > img,
.palette-salbei .estrel-page.is-eventtyp-detail.has-category-pill .estrel-navbar svg {
    filter: none;
}

.palette-salbei .estrel-page.is-eventtyp-detail.has-category-pill .estrel-navbar {
    border-bottom-color: #FEF5EC;
}


/* =====================================================================
   3. „ZIMMER BUCHEN" — Sticky-Button + Hero-Button der Startseite
   Figma „Book now Nav" (1167:1142 / 1167:1545): Salbei, Text + Icon Butter Yellow.
   ===================================================================== */

.palette-salbei .estrel-sticky-booking {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-hero__booking {
    border-color: #929682;
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-booking-btn {
    color: #FEF5EC;
}


/* =====================================================================
   4. MEGA-MENÜ — Figma 1167:1585 + Vorarbeit:
   Fläche Salbei, Schrift, Icons und Trennlinien Butter Yellow.
   ===================================================================== */

.palette-salbei .estrel-mega-menu {
    --text-primary: #FEF5EC;
    --text-secondary: rgba(254, 245, 236, 0.7);
    --text-accent: #FEF5EC;
    --border-color: rgba(254, 245, 236, 0.15);
    color: #FEF5EC !important;
}

.palette-salbei .estrel-mega-menu a,
.palette-salbei .estrel-mega-menu button,
.palette-salbei .estrel-mega-menu span,
.palette-salbei .estrel-mega-menu svg {
    color: #FEF5EC !important;
}

.palette-salbei .estrel-mega-menu__overlay {
    background: #929682;
}

.palette-salbei .estrel-mega-menu__sidebar {
    border-right-color: #FEF5EC;
}

.palette-salbei .estrel-mega-menu__submenu {
    border-left-color: #FEF5EC;
}

/* Logo + Social-Icons im Menü: Pfade mit fill="#14172D" → Butter Yellow */
.palette-salbei .estrel-mega-menu svg path[fill="#14172D"] {
    fill: #FEF5EC;
}

.palette-salbei .estrel-mega-menu__close,
.palette-salbei .estrel-mega-menu__sidebar-link,
.palette-salbei .estrel-mega-menu__lang-link,
.palette-salbei .estrel-mega-menu__lang-divider,
.palette-salbei .estrel-mega-menu__logo,
.palette-salbei .estrel-mega-menu__socials a,
.palette-salbei .estrel-mega-menu__link,
.palette-salbei .estrel-mega-menu__category,
.palette-salbei .estrel-mega-menu__sublink {
    color: #FEF5EC;
}

@media (max-width: 1024px) {
    .palette-salbei .estrel-mega-menu__header {
        border-bottom-color: rgba(254, 245, 236, 0.4);
    }
}

@media (max-width: 767px) {
    .palette-salbei .estrel-mega-menu__header {
        border-bottom-color: rgba(254, 245, 236, 0.4);
    }

    .palette-salbei .estrel-mega-menu__sidebar {
        border-top-color: rgba(254, 245, 236, 0.4);
    }

    .palette-salbei .estrel-mega-menu__panel.is-mobile-inline.is-visible {
        border-left-color: rgba(254, 245, 236, 0.4);
    }
}


/* =====================================================================
   5. BUTTONS (global)
   Primär = Salbei + Butter Yellow (Token oben). Startseite: Figma setzt die
   gefüllten Buttons in Day UND Night auf Salbei; Hover laut Vorarbeit
   Deep Sea + Butter Yellow.
   ===================================================================== */

.palette-salbei body.is-startpage.night .estrel-btn--primary,
.palette-salbei body.is-startpage.sunrise .estrel-btn--primary {
    background: #929682;
    color: #FEF5EC;
    border-color: #929682;
}

.palette-salbei body.is-startpage.night .estrel-btn--primary:hover,
.palette-salbei body.is-startpage.night .estrel-btn--primary:focus-visible,
.palette-salbei body.is-startpage.sunrise .estrel-btn--primary:hover,
.palette-salbei body.is-startpage.sunrise .estrel-btn--primary:focus-visible {
    background: #14172D;
    color: #FEF5EC;
    border-color: #14172D;
}


/* =====================================================================
   6. STARTSEITE — Seitenverlauf
   Figma Rectangle 204 (Day 1167:753 / Night 1167:1186) läuft über die ganze
   Seite. Kein Pink/Sunset mehr oben; der warme Bereich liegt hinter dem Tower.
   Umsetzung ohne JS-Umbau:
     - .estrel-sunset-bg (oben bis Architektur-Oberkante): Grundfarbe + Rampe
       auf den letzten 673 px (Day) / 566 px (Night) wie in Figma
     - Architektur-Sektion: eigener Verlaufsabschnitt (Turmbild ist freigestellt)
     - unterhalb Daten & Fakten: Body-Verlauf, vom Seitenende gemessen
   Stopps exakt aus den Figma-Gradient-Stops interpoliert (siehe ANALYSE.md).
   ===================================================================== */

.palette-salbei body.sunrise .estrel-sunset-bg {
    background: linear-gradient(to bottom, #FEF5EC 0, #FEF5EC calc(100% - 673px), #FFF7EE 100%);
}

.palette-salbei body.night .estrel-sunset-bg {
    background: linear-gradient(to bottom, #14172D 0, #14172D calc(100% - 566px), #232334 100%);
}

/* Night: rosa Scroll-Waschung über dem Hero-Bild gehört zum alten Sunset */
.palette-salbei .estrel-hero__gradient-overlay {
    display: none;
}

.palette-salbei body.is-startpage.sunrise {
    background: linear-gradient(to top, #E8DDD1 0, #E8DDD1 1675px, #EEE5DC 2865px);
    background-color: #EEE5DC;
}

.palette-salbei body.is-startpage.night {
    background-image: linear-gradient(to top, #060711 0, #060711 1590px, #14172D 2983px);
}

.palette-salbei body.sunrise .estrel-architecture {
    background: linear-gradient(to bottom, #FFF7EE 0%, #FFF8EF 18.50%, #FFF3E0 68.65%, #FDECCE 81.66%, #FFE9CF 86.38%, #EECEB7 93.17%, #EED5C2 100%);
}

.palette-salbei body.night .estrel-architecture {
    background: linear-gradient(to bottom, #232334 0%, #3B3540 29.44%, #625353 50.34%, #FEEAB2 98.90%, #EBD9A7 100%);
}

.palette-salbei .estrel-architecture__tower::before {
    background: linear-gradient(to bottom, #232334 0%, transparent 100%);
}

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

@media (max-width: 768px) {
    .palette-salbei .estrel-sunset-bg,
    .palette-salbei body.night .estrel-sunset-bg {
        background: #14172D;
    }

    .palette-salbei body.sunrise .estrel-sunset-bg {
        background: #FEF5EC;
    }
}


/* =====================================================================
   7. STARTSEITE — Sektionen
   ===================================================================== */

/* Hero-Titel: Day Deep Sea (1167:1141), Night Butter Yellow (1167:1502) */
.palette-salbei .estrel-hero__title,
.palette-salbei .estrel-hero__title-line1,
.palette-salbei .estrel-hero__title-line2 {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-hero__title,
.palette-salbei body.sunrise .estrel-hero__title-line1,
.palette-salbei body.sunrise .estrel-hero__title-line2 {
    color: #14172D;
}

/* Hero-Titel Startseite (Figma 1210:152, Variante 2, Stand 06.10.; gilt für Day UND Night,
   Jana 06.10.: die Frames Day/Night waren nur zwei Varianten nebeneinander):
   Der Titel steht unter dem Bild und ersetzt die Intro-Überschrift „From Sunset to Sunrise“
   in der rechten Spalte (x 888 / y 1148, Söhne 134 + Einzug / Alpina 134, Zeile 125),
   linksbündig mit dem Fließtext (Figma: Text x 888 statt 898). Die alte Überschrift
   bleibt unsichtbar stehen, damit der Fließtext seine Höhe behält.
   Der Hero rechnet in --u (Bühne 1815 breit, Faktor 0,945), das Intro in 1:1. Der
   Titel gehört optisch zum Intro und rechnet deshalb in --iu (= Intro-Einheit).
   Lagen gegen Figma-Glyphenkanten kalibriert (≤ 1 px bei 1920). */
@media (min-width: 1025px) {
    .palette-salbei body.is-startpage .estrel-hero__title {
        --iu: calc(var(--u) * 1920 / 1815);
        top: calc(968.9 * var(--iu));
        left: calc(783.5 * var(--iu));
        width: calc(890 * var(--iu));
    }

    .palette-salbei body.is-startpage .estrel-hero__title-line1,
    .palette-salbei body.is-startpage .estrel-hero__title-line2 {
        font-size: calc(134 * var(--iu));
        line-height: calc(125 * var(--iu));
    }

    /* Figma-Einzug „     Estrel Tower." (5 Leerzeichen) als Abstand */
    .palette-salbei body.is-startpage .estrel-hero__title-line1 {
        padding-left: calc(141.6 * var(--iu));
        white-space: nowrap;
    }

    /* Figma setzt die Alpina-Zeilen 7 px tiefer unter die Söhne-Zeile als der Browser
       (gemessen an 1210:506 und 1210:902) */
    .palette-salbei body.is-startpage .estrel-hero__title-line2 {
        position: relative;
        top: calc(6.5 * var(--iu));
    }

    .palette-salbei body.is-startpage .estrel-intro__title {
        visibility: hidden;
    }

    .palette-salbei body.is-startpage .estrel-intro__text {
        position: relative;
        left: calc(-10 * var(--u));
    }
}

/* Tablet und Mobil (kein eigenes Figma-Layout): Titel wie im Desktop unter dem Bild,
   ohne Intro-Überschrift, bündig mit dem Fließtext und mit Einzug. */
@media (max-width: 1024px) {
    .palette-salbei body.is-startpage .estrel-intro__title {
        display: none;
    }

    .palette-salbei body.is-startpage .estrel-hero__title-line1 {
        padding-left: 1.0567em;   /* Figma-Einzug 141,6 bei 134 */
        white-space: nowrap;
    }

    .palette-salbei body.is-startpage .estrel-hero__title-line2 {
        position: relative;
        top: 0.053em;             /* Alpina-Versatz wie Desktop (7,2 bei 134/144) */
        max-width: 6.642em;       /* Umbruch nach „Höhepunkt" wie in Figma (Breite 890 bei 134) */
    }

    /* ohne Überschrift beginnt das Intro direkt mit dem Fließtext */
    .palette-salbei body.is-startpage .estrel-intro__text {
        margin-top: 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* an der Intro-Spalte ausrichten (80 % zentriert = 10 vw minus Hero-Rand) */
    .palette-salbei body.is-startpage .estrel-hero__title {
        top: calc(936 * var(--u));
        left: calc(10vw - 52.5 * 100vw / 1920);
        width: 80vw;
    }

    /* Titel bleibt im Hero; das Intro folgt erst darunter */
    .palette-salbei body.is-startpage .estrel-hero__inner {
        height: calc(1330 * var(--u));
    }
}

@media (max-width: 767px) {
    /* bündig mit dem Fließtext (Intro 20 + 24 px), Abstand wie eine Absatzlücke */
    .palette-salbei body.is-startpage .estrel-hero__title {
        margin-top: 16px;
        padding-left: calc(44px - 52.5 * 100vw / 1920);
    }

    .palette-salbei body.is-startpage .estrel-hero__inner {
        padding-bottom: 0;
    }

    .palette-salbei body.is-startpage .estrel-intro__content {
        padding-top: 0;
    }
}

/* Intro „From Sunset to Sunrise": Fließtext Night BY / Day Deep Sea (1167:1504/1108) */
.palette-salbei .estrel-intro__text,
.palette-salbei .estrel-intro__link {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-intro__text,
.palette-salbei body.sunrise .estrel-intro__link {
    color: #14172D;
}

/* Akkordeon Stay/Meet/Work/Taste/Relax (1167:1068 / 1167:1437):
   Label BY @60 %, gefüllter Button Salbei + BY, Ghost BY. */
.palette-salbei .estrel-accordion__label {
    color: #FEF5EC;
}

.palette-salbei .estrel-accordion .estrel-btn--primary,
.palette-salbei .estrel-accordion__btn--primary {
    background: #929682;
    border-color: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-accordion .estrel-btn--secondary,
.palette-salbei .estrel-accordion__btn--ghost {
    border-color: #FEF5EC;
    color: #FEF5EC;
}

/* News (1167:1034 / 1167:1512)
   Day: Karte zu = Deep Sea @40 % (statt Butter Yellow), Karte offen = Salbei + BY.
   Night: Karte offen bleibt Butter Yellow + Deep Sea. */
.palette-salbei .estrel-news__all-link {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-news__all-link {
    color: #14172D;
}

.palette-salbei body.sunrise .estrel-news__card-overlay {
    background: #14172D;
    mix-blend-mode: darken;
}

.palette-salbei body.sunrise .estrel-news__card-content {
    background: #929682;
}

.palette-salbei body.sunrise .estrel-news__title,
.palette-salbei body.sunrise .estrel-news__date,
.palette-salbei body.sunrise .estrel-news__text,
.palette-salbei body.sunrise .estrel-news__more,
.palette-salbei body.sunrise .estrel-news__logo-sub {
    color: #FEF5EC;
}

/* Figma färbt den Link „Kontakt" Salbei auf Salbei (1167:1064) — unsichtbar,
   daher Butter Yellow wie der übrige Karteninhalt. */
.palette-salbei body.sunrise .estrel-news__logo-mark,
.palette-salbei body.sunrise .estrel-news__logo-art {
    background-color: #FEF5EC;
}

@media (max-width: 1024px) {
    .palette-salbei .estrel-news__more {
        color: #FEF5EC !important;
    }

    .palette-salbei .estrel-news__flip-hint {
        color: #FEF5EC;
    }

    .palette-salbei body.sunrise .estrel-news__card.is-flipped .estrel-news__card-content {
        background: #929682 !important;
    }

    .palette-salbei body.sunrise .estrel-news__card.is-flipped .estrel-news__title-line1,
    .palette-salbei body.sunrise .estrel-news__card.is-flipped .estrel-news__title-line2,
    .palette-salbei body.sunrise .estrel-news__card.is-flipped .estrel-news__date,
    .palette-salbei body.sunrise .estrel-news__card.is-flipped .estrel-news__text,
    .palette-salbei body.sunrise .estrel-news__card.is-flipped .estrel-news__more {
        color: #FEF5EC !important;
    }
}

/* Meetings & Events (1167:1014 / 1167:1417):
   gefüllt Salbei + BY; Ghost Day Salbei, Night Butter Yellow. */
.palette-salbei .estrel-meetings__tab-ctas .estrel-btn--primary,
.palette-salbei .estrel-meetings__btn--primary {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-meetings__tab-ctas .estrel-btn--secondary,
.palette-salbei .estrel-meetings__btn--secondary {
    border-color: #FEF5EC;
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-meetings__tab-ctas .estrel-btn--secondary,
.palette-salbei body.sunrise .estrel-meetings__btn--secondary {
    border-color: #929682;
    color: #929682;
}

/* Architektur (1167:903 / 1167:1280):
   Day-Hotspots Salbei (Ring @20 %, Kreuz BY), Karte Salbei + BY.
   Night unverändert (Butter Yellow), nur der Link wird BY. */
.palette-salbei .estrel-architecture__link {
    color: #FEF5EC;
}

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

.palette-salbei body.sunrise .estrel-hotspot {
    --hotspot-color: #929682;
    background: rgba(146, 150, 130, 0.20);
}

.palette-salbei body.sunrise .estrel-hotspot__marker::before,
.palette-salbei body.sunrise .estrel-hotspot__marker::after {
    background: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-hotspot__card {
    background: #929682;
}

.palette-salbei body.sunrise .estrel-hotspot__label,
.palette-salbei body.sunrise .estrel-hotspot__floors {
    color: #FEF5EC;
}

/* Daten & Fakten (1167:876 / 1167:1390): Day Salbei + BY, Night BY + Deep Sea */
.palette-salbei body.sunrise .estrel-stats {
    background: #929682;
}

.palette-salbei body.sunrise .estrel-stats__heading,
.palette-salbei body.sunrise .estrel-stats__value,
.palette-salbei body.sunrise .estrel-stats__label {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-stats__row + .estrel-stats__row {
    border-top-color: rgba(254, 245, 236, 0.9);
}

@media (max-width: 767px) {
    .palette-salbei body.sunrise .estrel-stats__col + .estrel-stats__col .estrel-stats__row:first-child {
        border-top-color: rgba(254, 245, 236, 0.9);
    }
}

/* Sustainability (1167:1267): Night Titel + Text #FFFBF7, Link BY */
.palette-salbei .estrel-sustainability__heading,
.palette-salbei .estrel-sustainability__title .estrel-section-title__main,
.palette-salbei .estrel-sustainability__title .estrel-section-title__sub,
.palette-salbei .estrel-sustainability__text {
    color: #FFFBF7;
}

.palette-salbei .estrel-sustainability__link {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-sustainability__heading,
.palette-salbei body.sunrise .estrel-sustainability__title .estrel-section-title__main,
.palette-salbei body.sunrise .estrel-sustainability__title .estrel-section-title__sub,
.palette-salbei body.sunrise .estrel-sustainability__text,
.palette-salbei body.sunrise .estrel-sustainability__link {
    color: #14172D;
}

/* Sustainability (Jana WhatsApp 09.10., Go 13.10.): Foto und Text NEBENEINANDER statt
   Titel auf dem Foto. Gerahmtes Foto 640 × 428 (Radius 5) links in der Figma-Gruppe
   (x 232), rechts daneben Titel + Text in einer Spalte (Lücke 48), am Foto vertikal
   zentriert; die Gruppe endet rechts symmetrisch bei 232. Der Lichtkreis entfällt, die
   Parallax-Bewegung bleibt (sie läuft jetzt nicht mehr in den Text). Titel wie in allen
   Sektionen 124/105 (Jana 13.10.: gleiche Größe wie „Architektur & Design"); die Spalte
   ist 880 breit (Gruppe endet bei 1800), damit „als Teil des Estrel" (870 px) in eine
   Zeile passt, Zeilen umbrechen nicht. Vorher (Figma 1167:863, 05.10.): Titel (468|194)
   und Text (464|447) über dem Foto mit weichem Kreis. Der Moosfels bleibt dem alten
   Schema vorbehalten. */
.palette-salbei .estrel-sustainability__image {
    display: none !important;
}

.palette-salbei .estrel-sustainability__media {
    display: block;
    position: relative;
    width: calc(640 * var(--u));
    height: calc(428 * var(--u));
    border-radius: calc(5 * var(--u));
    overflow: hidden;
    z-index: 0;
}

.palette-salbei .estrel-sustainability__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.palette-salbei .estrel-sustainability__glow {
    display: none;
}

/* Beide Titelzeilen bündig (kein 155er-Einzug der ersten Zeile mehr) */
.palette-salbei .estrel-sustainability__title .estrel-section-title__main {
    margin-left: 0;
}

@media (min-width: 1025px) {
    /* Abstand Daten & Fakten → Foto: Figma 8350 → 8650 */
    .palette-salbei .estrel-sustainability {
        margin-top: calc(300 * 100vw / 1920) !important;
    }

    /* Zweispalter: Foto | Titel + Text. Die 1fr-Zeilen oben/unten zentrieren den
       Textblock am Foto; ist der Text höher als das Foto (EN), zentriert sich das Foto. */
    .palette-salbei .estrel-sustainability__inner {
        display: grid;
        grid-template-columns: calc(640 * var(--u)) minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        column-gap: calc(48 * var(--u));
        width: calc(1568 * var(--u));
        height: auto;
        margin: 0 0 0 calc(232 * var(--u));
    }

    .palette-salbei .estrel-sustainability__media {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: center;
    }

    .palette-salbei .estrel-sustainability__title {
        position: static;
        grid-column: 2;
        grid-row: 2;
        width: auto;
        margin: 0 0 calc(32 * var(--u));
    }

    /* Größe 124/105 kommt aus sustainability.css; Zeilen nie umbrechen */
    .palette-salbei .estrel-sustainability__title .estrel-section-title__main,
    .palette-salbei .estrel-sustainability__title .estrel-section-title__sub {
        white-space: nowrap;
    }

    .palette-salbei .estrel-sustainability__body {
        position: static;
        grid-column: 2;
        grid-row: 3;
        width: auto;
        max-width: calc(801 * var(--u));
        margin: 0;
        padding: 0;
    }

    .palette-salbei .estrel-sustainability__text {
        font-size: calc(20 * var(--u));
        line-height: calc(24 * var(--u));
    }

    .palette-salbei .estrel-sustainability__text p + p {
        margin-top: calc(24 * var(--u));
    }
}

@media (max-width: 1024px) {
    .palette-salbei .estrel-sustainability__media {
        width: 80%;
        height: auto;
        aspect-ratio: 640 / 428;
        border-radius: 5px;
    }

    /* Gestapelt: Titel unter dem Foto statt hineinragend (es gibt keinen Lichtkreis mehr) */
    .palette-salbei .estrel-sustainability__title {
        margin-top: 1.5rem;
    }
}

@media (max-width: 767px) {
    .palette-salbei .estrel-sustainability__media {
        width: 100%;
    }

    .palette-salbei .estrel-sustainability__title {
        margin-top: 1.25rem;
    }
}

/* Galerie „Momente & Impressionen" (1167:838): Pfeile Salbei, Chevron BY */
.palette-salbei .estrel-gallery__prev,
.palette-salbei .estrel-gallery__next {
    background: #929682;
}

.palette-salbei .estrel-gallery__prev svg,
.palette-salbei .estrel-gallery__next svg {
    color: #FEF5EC;
}


/* =====================================================================
   8. KONTAKT-FOOTER + COPYRIGHT (alle Seiten)
   Figma: überall Salbei + BY, Download-Kreis BY mit Salbei-Icon, Logo BY,
   Copyright-Leiste BY + Deep Sea.
   Ausnahme Startseite Night (1167:1193): Footer BY + Deep Sea, Kreis Deep Sea
   mit BY-Icon, Copyright-Leiste Deep Sea + BY.
   Figma Day-Startseite färbt das Footer-Logo Salbei auf Salbei (1167:821) —
   unsichtbar; wie auf allen Unterseiten Butter Yellow.
   ===================================================================== */

.palette-salbei .estrel-contact-footer {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-contact-footer__download,
.palette-salbei .estrel-contact-footer__phone,
.palette-salbei .estrel-contact-footer__logo,
.palette-salbei .estrel-contact-footer__logo-svg,
.palette-salbei .estrel-contact-footer__nav-heading,
.palette-salbei .estrel-contact-footer__nav-list a,
.palette-salbei .estrel-contact-footer__address {
    color: #FEF5EC;
}

.palette-salbei .estrel-contact-footer__rule {
    border-top-color: #FEF5EC;
}

.palette-salbei .estrel-contact-footer__download-circle {
    background: #FEF5EC;
}

.palette-salbei .estrel-contact-footer__download-circle svg path[fill="#FED3CD"] {
    fill: #929682;
}

.palette-salbei .estrel-contact-footer__download-circle svg path[stroke="#FED3CD"] {
    stroke: #929682;
}

.palette-salbei body.is-startpage.night .estrel-contact-footer {
    background: #FEF5EC;
    color: #14172D;
}

.palette-salbei body.is-startpage.night .estrel-contact-footer__download,
.palette-salbei body.is-startpage.night .estrel-contact-footer__phone,
.palette-salbei body.is-startpage.night .estrel-contact-footer__logo,
.palette-salbei body.is-startpage.night .estrel-contact-footer__logo-svg,
.palette-salbei body.is-startpage.night .estrel-contact-footer__nav-heading,
.palette-salbei body.is-startpage.night .estrel-contact-footer__nav-list a,
.palette-salbei body.is-startpage.night .estrel-contact-footer__address {
    color: #14172D;
}

.palette-salbei body.is-startpage.night .estrel-contact-footer__rule {
    border-top-color: #14172D;
}

.palette-salbei body.is-startpage.night .estrel-contact-footer__download-circle {
    background: #14172D;
}

.palette-salbei body.is-startpage.night .estrel-contact-footer__download-circle svg path[fill="#FED3CD"] {
    fill: #FEF5EC;
}

.palette-salbei body.is-startpage.night .estrel-contact-footer__download-circle svg path[stroke="#FED3CD"] {
    stroke: #FEF5EC;
}

.palette-salbei body.is-startpage.night .estrel-footer__bottom {
    background: #14172D;
}

.palette-salbei body.is-startpage.night .estrel-footer__copyright,
.palette-salbei body.is-startpage.night .estrel-footer__social a {
    color: #FEF5EC;
}

/* Älterer Kontakt-Baustein (.estrel-contact) nach derselben Regel */
.palette-salbei .estrel-contact,
.palette-salbei body.sunrise .estrel-contact {
    background: #929682 !important;
}

.palette-salbei .estrel-contact__download-text,
.palette-salbei .estrel-contact__label,
.palette-salbei .estrel-contact__phone,
.palette-salbei .estrel-contact__logo-sub,
.palette-salbei .estrel-contact__heading,
.palette-salbei .estrel-contact__links a,
.palette-salbei .estrel-contact__display {
    color: #FEF5EC;
}

.palette-salbei .estrel-contact__divider,
.palette-salbei .estrel-contact__logo-mark {
    background-color: #FEF5EC;
}

.palette-salbei .estrel-contact__download-btn {
    background: #FEF5EC;
    color: #929682;
}


/* =====================================================================
   9. UNTERSEITEN-HEADER (Figma-Stand 05.10.2026; Kundenwunsch: Header mit umstellen)
   Bild-Header (estrel_room_hero: Zimmer-Übersichten, Meetings & Events, Kontakt,
   Karriere, Nachhaltigkeit) — Figma 1167:8919, 1167:231, 1167:8991 u. a.:
     Bild 1815 × 779, 120 unter Seitenoberkante, mittig, Radius 3,
     Deep Sea @ 20 % darüber (Rectangle 309), Titel zentriert im Bild:
     „Estrel Tower" Söhne Buch 210 / Bereichsname GT Alpina Thin Italic 220,
     Butter Yellow.
   Text-Header ohne Bild (Info-Hero: FAQ, Rechtliches, Webcam; Media Kit ohne
   Bild): gleicher zentrierter Titel (Figma 1198:83 / 1198:85 / 1198:87 / 1198:91).
   Das Template trennt „Estrel Tow" | „er" | Akzent (| letztes Akzentwort);
   hier per display:contents wieder zu „Estrel Tower" / Akzent zusammengesetzt.
   --zt-w = Breite der Titelbox (Desktop 1815 von 1920), alle Größen relativ dazu.
   Vertikale Lage auf die Figma-Glyphenkanten kalibriert (absoluteRenderBounds:
   Oberkante „Estrel Tower" = Box + 65.2, Grundlinie Zeile 2 = Box + 429.1).
   ===================================================================== */

/* --zt-dy / --zt-lh2: gemessen gegen Figma-Glyphenkanten (Pauschalen 1920 px):
   Zeile 1 Oberkante 322 (Figma 322.2), Zeile 2 Grundlinie 685 (Figma 686.1). */
.palette-salbei .estrel-zimmer-hero,
.palette-salbei .estrel-info-hero {
    --zt-dy: 38.2;
    --zt-lh1: 200;
    --zt-lh2: 233.8;
}

.palette-salbei .estrel-zimmer-hero {
    --zt-w: calc(100cqi * 1815 / 1920);
}

.palette-salbei .estrel-info-hero {
    --zt-w: min(calc(100cqi * 1815 / 1920), 1815px);
}

/* --- Titel-Typografie (alle Breiten) --- */
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title,
.palette-salbei .estrel-info-hero .estrel-info-hero__title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    gap: 0 !important;
}

.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line1,
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line2-prefix,
.palette-salbei .estrel-info-hero .estrel-info-hero__line1,
.palette-salbei .estrel-info-hero .estrel-info-hero__main-b {
    position: static !important;
    display: inline !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    font-family: var(--font-soehne) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: calc(var(--zt-w) * 210 / 1815) !important;
    line-height: calc(var(--zt-w) * var(--zt-lh1, 200) / 1815) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line2,
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line3,
.palette-salbei .estrel-info-hero .estrel-info-hero__line2,
.palette-salbei .estrel-info-hero .estrel-info-hero__line3 {
    display: contents !important;
    /* Template-Leerzeichen in diesen Containern dürfen keine Zeilenhöhe/Breite erzeugen */
    font-size: 0 !important;
    line-height: 0 !important;
}

.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line2-accent,
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title.is-three-line .estrel-zimmer-hero__title-line2-accent,
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line3-accent,
.palette-salbei .estrel-info-hero .estrel-info-hero__accent-a,
.palette-salbei .estrel-info-hero .estrel-info-hero__accent-b {
    position: static !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    font-family: var(--font-alpina) !important;
    font-style: italic !important;
    font-weight: 250 !important;
    font-size: calc(var(--zt-w) * 220 / 1815) !important;
    line-height: calc(var(--zt-w) * var(--zt-lh2, 210) / 1815) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* Zeilenumbruch nach „Estrel Tower", Leerzeichen vor dem letzten Akzentwort */
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line2-prefix::after,
.palette-salbei .estrel-info-hero .estrel-info-hero__main-b::after {
    content: "\A";
    white-space: pre;
}

/* pre-wrap: sonst kollabiert das Leerzeichen mit den (0-px-)Template-Leerzeichen */
.palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line3-accent::before,
.palette-salbei .estrel-info-hero .estrel-info-hero__accent-b::before {
    content: " ";
    white-space: pre-wrap;
}

/* Farben: Bild-Header Butter Yellow; Media Kit setzt selbst Deep Sea (!important);
   Info-Hero über --info-hero-fg (hell Deep Sea, dunkel/Webcam Butter Yellow). */
.palette-salbei .estrel-zimmer-hero__title,
.palette-salbei .estrel-zimmer-hero__title-line1,
.palette-salbei .estrel-zimmer-hero__title-line2,
.palette-salbei .estrel-zimmer-hero__title-line3,
.palette-salbei .estrel-zimmer-hero__title-line3-accent {
    color: #FEF5EC;
}

.palette-salbei .estrel-info-hero-dark .estrel-info-hero {
    --info-hero-fg: #FEF5EC;
}

.palette-salbei body:has(.estrel-webcam) .estrel-info-hero {
    color: #FEF5EC !important;
}

.palette-salbei body:has(.estrel-webcam) .estrel-info-hero__title,
.palette-salbei body:has(.estrel-webcam) .estrel-info-hero__line1,
.palette-salbei body:has(.estrel-webcam) .estrel-info-hero__line2,
.palette-salbei body:has(.estrel-webcam) .estrel-info-hero__line2 .estrel-info-hero__main-b,
.palette-salbei body:has(.estrel-webcam) .estrel-info-hero__line2 .estrel-info-hero__accent-a {
    color: #FEF5EC;
}

/* Bild: Deep Sea @ 20 % (Rectangle 309) statt der alten Waschung */
.palette-salbei .estrel-zimmer-hero__gradient-overlay {
    background: rgba(20, 23, 45, 0.2);
}

/* --- Desktop: Figma 1:1 --- */
@media (min-width: 1025px) {
    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__frame {
        top: calc(120 * var(--u)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(1815 * var(--u)) !important;
        max-width: none !important;
        height: calc(779 * var(--u)) !important;
        border-radius: calc(3 * var(--u)) !important;
    }

    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title {
        position: absolute !important;
        top: calc((257 + var(--zt-dy, 0)) * var(--u)) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: calc(1815 * var(--u)) !important;
        transform: translateX(-50%) !important;
    }

    /* Media Kit (ohne Bild, Creme): Titelbox Figma y = 244 / 247 */
    .palette-salbei body.is-media-kit .estrel-zimmer-hero .estrel-zimmer-hero__title {
        top: calc((245.5 + var(--zt-dy, 0)) * var(--u)) !important;
    }

    /* Zimmer-Übersichten (Figma 1167:205): Tabs 30 höher, Intro 40 höher als zuvor */
    .palette-salbei .estrel-page.has-category-pill.is-overview .estrel-zimmer-hero__inner {
        height: calc(1159 * var(--u));
    }

    .palette-salbei .estrel-page.has-category-pill.is-overview .estrel-zimmer-hero__nav {
        top: calc((951 + 78 - 30) * var(--u));
    }

    .palette-salbei .estrel-page.has-category-pill.is-overview .estrel-zimmer-hero__cat-sentinel {
        top: calc(1069 * var(--u));
    }

    .palette-salbei .estrel-info-hero .estrel-info-hero__title {
        position: absolute !important;
        inset: auto !important;
        top: calc((247 + var(--zt-dy, 0)) * var(--u)) !important;
        left: 50% !important;
        width: calc(1815 * var(--u)) !important;
        transform: translateX(-50%) !important;
    }

    .palette-salbei body:has(.estrel-webcam) .estrel-info-hero .estrel-info-hero__title {
        top: calc((227 + var(--zt-dy, 0)) * var(--u)) !important;
    }

    /* Text-Header kompakter (Jana 06.10.: FAQ, AGB, Impressum, Datenschutz, Pressetexte,
       Media Pool „noch recht hoch"): Creme-Fläche wie Figma Rectangle 304 = 895 hoch
       (vorher 1022 bzw. 1199). Webcam behält 768 (eigene, spezifischere Regel). */
    .palette-salbei body:not(:has(.estrel-webcam)) .estrel-info-hero .estrel-info-hero__inner {
        height: calc(895 * var(--u));
    }

    /* Media Kit: Tabs-Icons bei y 949 wie Figma 1198:91 (Tabs-Innenabstand 44) */
    .palette-salbei body.is-media-kit .estrel-zimmer-hero .estrel-zimmer-hero__inner {
        height: calc(905 * var(--u));
    }
}

/* --- Tablet + Mobile: Bild unter der Navbar im Fluss, Titel mittig im Bild --- */
@media (max-width: 1024px) {
    .palette-salbei .estrel-zimmer-hero {
        --zt-w: calc(100cqi - 56px);
        --zt-top: 96px;
    }

    .palette-salbei .estrel-info-hero {
        --zt-w: calc(100cqi - 56px);
    }

    /* Abstand oben als Padding (nicht Margin am Bild): sonst kollabiert der
       Margin durch __inner und verschiebt den absolut positionierten Titel doppelt */
    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__inner {
        height: auto !important;
        padding-top: var(--zt-top) !important;
        padding-bottom: 40px !important;
    }

    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__frame {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: var(--zt-w) !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 1815 / 779;
        margin: 0 auto !important;
        border-radius: 3px !important;
    }

    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title {
        position: absolute !important;
        top: calc(var(--zt-top) + var(--zt-w) * (137 + var(--zt-dy, 0)) / 1815) !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: var(--zt-w) !important;
        transform: translateX(-50%) !important;
    }

    .palette-salbei body.is-media-kit .estrel-zimmer-hero .estrel-zimmer-hero__title {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
    }

    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__nav {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        margin-top: 24px;
    }

    .palette-salbei .estrel-info-hero .estrel-info-hero__title {
        position: relative !important;
        inset: auto !important;
        width: var(--zt-w) !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {
    .palette-salbei .estrel-zimmer-hero,
    .palette-salbei .estrel-info-hero {
        --zt-w: calc(100cqi - 32px);
        --zt-top: 72px;
    }

    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__inner {
        padding-bottom: 32px !important;
    }

    /* schmale Breiten: Akzent darf umbrechen („Wellness & Fitness") */
    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line2-accent,
    .palette-salbei .estrel-zimmer-hero .estrel-zimmer-hero__title-line3-accent,
    .palette-salbei .estrel-info-hero .estrel-info-hero__accent-a,
    .palette-salbei .estrel-info-hero .estrel-info-hero__accent-b {
        white-space: normal !important;
    }
}

/* Webcam-Baustein (dunkel): Grundtextfarbe Watermelon → Butter Yellow */
.palette-salbei .estrel-webcam {
    --wc-pink: #FEF5EC;
}


/* =====================================================================
   9b. COMING SOON + 404 (Figma 1167:5445 / 1167:7768)
   Bild vollflächig, Butter-Yellow-Schleier @ 80 % (404: 70 %), Titel und
   „404" Salbei, Text Deep Sea, Feld-Kontur Deep Sea, Buttons Salbei + BY.
   Navbar Deep Sea (Figma 05.10.: Coming Soon Menü Deep Sea).
   ===================================================================== */

.palette-salbei .estrel-coming-soon {
    --cs-color-accent: #929682;
    --cs-color-text: #14172D;
}

.palette-salbei .estrel-coming-soon__overlay {
    background: #FEF5EC;
    opacity: 0.8;
}

.palette-salbei .estrel-coming-soon[data-cta="buttons"] .estrel-coming-soon__overlay {
    opacity: 0.7;
}

.palette-salbei .estrel-coming-soon__btn--filled,
.palette-salbei .estrel-coming-soon__submit {
    background: #929682;
    border-color: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-coming-soon__btn--outline {
    border-color: #929682;
    color: #14172D;
}

.palette-salbei .estrel-coming-soon__btn--outline:hover {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-coming-soon__input::placeholder {
    opacity: 0.7;
}

.palette-salbei .estrel-coming-soon__consent {
    color: rgba(20, 23, 45, 0.7);
}

.palette-salbei .estrel-coming-soon__consent a:hover {
    color: #14172D;
}

.palette-salbei .estrel-coming-soon__feedback[data-state="loading"] {
    color: rgba(20, 23, 45, 0.7) !important;
}

/* Fehlerrot #FF9A8C ist auf hellem Schleier kaum lesbar */
.palette-salbei .estrel-coming-soon__feedback[data-state="error"],
.palette-salbei .estrel-coming-soon__message--error {
    color: #A52A1E !important;
}


/* =====================================================================
   10. BAUSTEINE DER UNTERSEITEN
   ===================================================================== */

/* --- Zimmer-Raster, Galerie, Booking-Bar, Split, Related (zimmer.css) ---
   Flächen laufen über --color-watermelon (= Salbei). Texte auf Salbei BY,
   Ghost-Buttons auf hell Salbei (Figma 1167:205, Vorarbeit room-grid). */
.palette-salbei .estrel-room-grid__arrow,
.palette-salbei .estrel-room-gallery__arrow {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-room-grid__cta-primary,
.palette-salbei .estrel-split__cta-primary,
.palette-salbei .estrel-related__cta-primary {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-room-grid__cta-secondary,
.palette-salbei .estrel-split__cta-secondary,
.palette-salbei .estrel-related__cta-secondary {
    border-color: #929682;
    color: #929682;
}

.palette-salbei .estrel-room-grid__cta-secondary:hover,
.palette-salbei .estrel-split__cta-secondary:hover,
.palette-salbei .estrel-related__cta-secondary:hover {
    background: #929682;
    color: #FEF5EC;
}

/* Venue-Seiten (Wellness/Kulinarik) setzen die Split-Buttons Deep Sea */
.palette-salbei .venue-split .estrel-split__cta-primary {
    color: #FEF5EC;
}

.palette-salbei .venue-split .estrel-split__cta-secondary {
    color: #929682;
}

.palette-salbei .venue-split .estrel-split__cta-secondary:hover {
    color: #FEF5EC;
}

.palette-salbei .estrel-booking-bar__cta {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-booking-bar__input option:checked,
.palette-salbei .estrel-booking-bar__input option:hover {
    background: #929682;
    color: #FEF5EC;
}

/* --- Flächen & Räume (space-grid.css, Figma 1167:5479) ---
   hell: gefüllt Salbei + BY, Ghost Salbei; Pfeile Salbei + BY; Dots Salbei.
   Navy-Expanded: Grundriss/Panorama Salbei + BY. */
.palette-salbei .estrel-space-grid {
    --space-pink: #929682;
}

.palette-salbei .estrel-space-grid__arrow,
.palette-salbei .estrel-space-grid__cta-primary,
.palette-salbei .estrel-space-grid__cta-grundriss,
.palette-salbei .estrel-space-grid__panorama {
    color: #FEF5EC;
}

.palette-salbei .estrel-space-grid__cta-secondary {
    color: #929682;
}

.palette-salbei .estrel-space-grid__cta-secondary:hover {
    color: #FEF5EC;
}

.palette-salbei .estrel-space-grid__panorama:hover {
    color: var(--space-navy);
}

/* --- Event-Karten (navy) --- */
.palette-salbei .estrel-event-card-grid {
    --evt-pink: #929682;
}

.palette-salbei .estrel-event-card-grid__cta-primary {
    color: #FEF5EC;
}

.palette-salbei .estrel-event-card-grid__cta-primary:hover {
    color: var(--evt-navy);
}

.palette-salbei .estrel-event-card-grid__cta-secondary {
    color: #FEF5EC;
    border-color: #FEF5EC;
}

.palette-salbei .estrel-event-card-grid__cta-secondary:hover {
    background: #FEF5EC;
    color: var(--evt-navy);
}

/* --- CTA-Banner (navy, Figma „CTA Banner/Button" → Salbei) --- */
.palette-salbei .estrel-cta-banner {
    --cta-pink: #929682;
}

.palette-salbei .estrel-cta-banner__cta {
    color: #FEF5EC;
}

.palette-salbei .estrel-cta-banner__cta:hover {
    color: var(--cta-navy);
}

/* --- Feature-Liste (Details auf Navy) --- */
.palette-salbei .estrel-feature-list {
    --fl-rose: #929682;
}

.palette-salbei .estrel-feature-list__cta--primary {
    color: #FEF5EC;
}

.palette-salbei .estrel-feature-list__cta--outline {
    color: #FEF5EC;
    border-color: #FEF5EC;
}

/* --- Pauschalen-Preiskarten (Figma 1167:3217: hervorgehoben Navy, Button Salbei + BY) --- */
.palette-salbei .estrel-pricing-grid {
    --pg-pink: #929682;
}

.palette-salbei .estrel-pricing-grid__item:hover .estrel-pricing-grid__cta,
.palette-salbei .estrel-pricing-grid__item.is-highlight .estrel-pricing-grid__cta {
    color: #FEF5EC;
}

.palette-salbei .estrel-pricing-grid__list:has(.estrel-pricing-grid__item:hover) .estrel-pricing-grid__item.is-highlight:not(:hover) .estrel-pricing-grid__cta {
    color: #FFFFFF;
}

/* --- Ablauf-Schritte (hell) --- */
.palette-salbei .estrel-process {
    --pr-rose: #929682;
}

.palette-salbei .estrel-process__cta--primary {
    color: #FEF5EC;
}

.palette-salbei .estrel-process__cta--outline {
    color: #929682;
}

/* --- Kontakt-Intro (Kontaktseite, dunkel; Figma 1167:4801 / 4804) --- */
.palette-salbei .estrel-contact-intro__btn.is-filled {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-contact-intro__btn.is-outline {
    border-color: #FEF5EC;
}

/* --- Karte (dunkel) --- */
.palette-salbei .estrel-map__consent-btn {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-map__address {
    color: #FEF5EC;
}

/* --- Formulare (Figma Kontakt/Media Kit „Anfrage absenden": Salbei + BY) --- */
.palette-salbei .estrel-form-block__form-col button[type="submit"],
.palette-salbei .estrel-form-block__form-col input[type="submit"] {
    background: #929682;
    color: #FEF5EC;
}

/* --- FAQ- und Rechtliches-Tabs (Figma 1167:7896): inaktiv Kontur Deep Sea,
       aktiv Salbei + BY --- */
.palette-salbei .estrel-faq-tabs__pill,
.palette-salbei .estrel-legal-tabs__pill {
    border-color: #14172D;
}

.palette-salbei .estrel-faq-tabs__pill:hover,
.palette-salbei .estrel-legal-tabs__pill:hover {
    background: rgba(146, 150, 130, 0.4);
}

.palette-salbei .estrel-faq-tabs__pill.is-active,
.palette-salbei .estrel-legal-tabs__pill.is-active {
    background: #929682;
    border-color: #929682;
    color: #FEF5EC;
}

/* --- Rechtliches: Inhaltsverzeichnis --- */
.palette-salbei .estrel-legal-doc {
    --legal-pink: #929682;
}

.palette-salbei .estrel-legal-doc__toc-link:hover {
    background: rgba(146, 150, 130, 0.15);
}

.palette-salbei .estrel-legal-doc__toc-link.is-active {
    background: rgba(146, 150, 130, 0.2);
}

@media (max-width: 768px) {
    .palette-salbei .estrel-legal-doc__toc {
        border-color: rgba(146, 150, 130, 0.6);
    }
}

/* --- Media-Kit-Karussell --- */
.palette-salbei .estrel-mc__btn {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-mc__pagination .swiper-pagination-bullet {
    background: #929682;
}

.palette-salbei .estrel-mc__pagination .swiper-pagination-bullet-active {
    background: transparent;
    border-color: #929682;
}

/* --- Zimmer-Overlay (Figma 1167:156: Pfeile, Dots, CTA Salbei) --- */
.palette-salbei .estrel-room-overlay__cta,
.palette-salbei .estrel-room-overlay__arrow {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-room-overlay__dot {
    background: #929682;
    border-color: #929682;
}

/* --- Room-Grid-Dots (zimmer.css, über Token) --- */
.palette-salbei .estrel-room-grid__dot {
    border-color: #929682;
}

/* --- Split-Details: Fokusrahmen --- */
.palette-salbei .estrel-split-details__close:focus-visible {
    outline-color: #929682;
}

/* --- Testimonials --- */
.palette-salbei .estrel-testimonials__intro {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-testimonials__intro {
    color: #14172D;
}

.palette-salbei .estrel-testimonials__prev,
.palette-salbei .estrel-testimonials__next {
    border-color: #929682;
}

.palette-salbei .estrel-testimonials__prev {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-testimonials__card {
    background: #929682;
    color: #FEF5EC;
}

/* --- Newsletter --- */
.palette-salbei .estrel-newsletter__submit {
    background: #929682;
    color: #FEF5EC;
}

.palette-salbei .estrel-newsletter__consent a:hover {
    color: #FEF5EC;
}

.palette-salbei body.sunrise .estrel-newsletter__consent a:hover {
    color: #14172D;
}

.palette-salbei .estrel-newsletter__feedback[data-state="success"] {
    color: #FEF5EC;
    background: #929682;
}

.palette-salbei .estrel-newsletter__feedback[data-state="error"] {
    color: #FEF5EC;
    background: rgba(254, 245, 236, 0.1);
    border-color: rgba(254, 245, 236, 0.4);
}

/* --- Popup (Figma „Pop-Up, Anfragen" 1167:5378) --- */
.palette-salbei .estrel-popup {
    --pp-watermelon: #929682;
}

.palette-salbei .estrel-popup__close:hover,
.palette-salbei .estrel-popup__close:focus-visible {
    color: #FEF5EC;
}

.palette-salbei .estrel-popup__cta:hover,
.palette-salbei .estrel-popup__cta:focus-visible {
    color: #FEF5EC;
}

/* --- Buchungs-Modal (Figma Pop-up: „Anfrage absenden" Salbei + BY) --- */
.palette-salbei .estrel-booking-modal {
    --bm-pink: #929682;
}

.palette-salbei .estrel-booking-modal__form .widget-submit button,
.palette-salbei .estrel-booking-modal__form button[type="submit"] {
    color: #FEF5EC;
}

/* --- Cookiebar: aktiver Schalter --- */
.palette-salbei .contao-cookiebar {
    --ccb-checked-bg: #929682;
    --ccb-checked-clr: #FEF5EC;
}