/* ============================================================
 * Brandnamic full-bypass override (V2 — surgical)
 *
 * Strategy: only override the SPECIFIC rules Brandnamic uses to hide
 * content "until JS activates it." Avoid blanket `display: block`
 * overrides that fight Brandnamic's intentional flex/grid layouts.
 * ============================================================ */

/* === LAYER 1: branDNAmic > * hide-everything-except-Main ===
   Brandnamic: `.branDNAmic > *:not(.SECT-Main):not(.SECT-Print) { display:none }`
   We need Header, Hero, Footer visible too. */
.branDNAmic > .SECT-Header,
.branDNAmic > .SECT-Hero,
.branDNAmic > .SECT-Footer {
  display: block !important;
}

/* === LAYER 2: SECT-Main hides all non-text modules ===
   Brandnamic: `.SECT-Main__content > *:not(.MOD-Text):not(.MOD-TextPic) { display:none }`
   We restore default `display` (revert respects each module's own display rules). */
.SECT-Main .SECT-Main__content > [class*="MOD-"] {
  display: revert !important;
}

/* === LAYER 3: JS-effect entry animations ===
   Brandnamic: `.JS-effect-instant { opacity:0 }` and `.JS-effect-normal[direction] { transform; opacity:0 }`
   These rely on intersection-observer JS to flip them visible. */
.branDNAmic .JS-effect-instant,
.branDNAmic .JS-effect-normal {
  opacity: 1 !important;
  transform: none !important;
}

/* === LAYER 4: Slider chrome (arrows, pagination) default-hidden via data-active=0 ===
   Brandnamic: `.JS-slider-arrows[data-active="0"] { display:none !important }`
   Our BrandnamicJS flips data-active to 1, but belt+braces. */
.branDNAmic .JS-slider-arrows,
.branDNAmic .JS-slider-arrows__arrow,
.branDNAmic .JS-slider-elements,
.branDNAmic .JS-slider-pagination {
  display: flex !important;
}
.branDNAmic .swiper-pagination-bullet,
.branDNAmic .DNA-slider-pagination__dot {
  display: inline-block !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* === LAYER 5: DNA-slider-arrows styling (round buttons) === */
.branDNAmic .DNA-slider-arrows__arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* === LAYER 6: Header__nav (floating booking widget) positioning
   Original lives in .SECT-Header but with our static mirror it gets reflowed.
   Pin it to viewport top-right. */
.SECT-Header__nav {
  position: fixed !important;
  right: 12.5em !important;
  top: 7em !important;
  width: 17em !important;
  height: 8.5em !important;
  z-index: 100 !important;
  display: flex !important;
  pointer-events: auto !important;
}

/* === LAYER 7: Center NILS am See signet ===
   Brandnamic: `.SECT-Hero[data-hero-layout=half] .SECT-Hero__logo { display:none }`
   We force the full layout, signet stays — but NOT the mobile-only
   DNA-desktophidden signet (that one must stay hidden on desktop, else it
   adds a 54px bar above the hero). */
.SECT-Hero__logo,
.SECT-Header__nav .SECT-Header__signet {
  display: block !important;
  pointer-events: auto !important;
}
.SECT-Header__nav .SECT-Header__signet img,
.SECT-Hero__logo img,
.SECT-Header__logo img,
.SECT-Hero__signet img {
  display: block !important;
}
/* Keep mobile signet hidden on desktop */
@media (min-width: 1025px) {
  .SECT-Header__signet.DNA-desktophidden {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Center the anchor signet inside the floating navy nav box.
   Brandnamic: signet box bg #153149, img height 6em, white via filter. */
.SECT-Header__nav .SECT-Header__signet {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--nils-navy, #153149) !important;
}
.SECT-Header__nav .SECT-Header__signet img {
  width: auto !important;
  height: 6em !important;
  object-fit: contain !important;
  margin: auto !important;
  filter: brightness(0) invert(1) !important;
}

/* === LAYER 8: Wave decoration overlay ===
   Brandnamic: `.SECT-Hero[data-hero-layout=half] .SECT-Hero__wave-animation { display:none }`
   Force visible in full layout (which we always use). */
.SECT-Hero__wave-animation,
.SECT-Header__menu-animation {
  display: block !important;
}

/* === LAYER 9: Social/contact icon containers ===
   Brandnamic: `.SECT-Header[data-menu-open="0"] .SECT-Header__social-links { ... }`
   These are conditional on menu state — ensure visible. */
.SECT-Header__icon,
.SECT-Hero__icon,
.SECT-Header__social-links,
.SECT-Hero__social-links {
  display: flex !important;
  visibility: visible !important;
}

/* === LAYER 10: Booking bar ===
   The persistent booking bar is `.SECT-Overlay` (position:fixed bottom).
   It contains gift icon + cta-box (Check-in/out/Gäste/Anfragen/Buchen) +
   calendar icon. Ensure it's visible and interactive. The header cta-box
   stays inside the menu (shows when menu opens). */
.SECT-Overlay {
  pointer-events: none !important;
}
.SECT-Overlay .SECT-Overlay__link,
.SECT-Overlay .SECT-Overlay__cta-box,
.SECT-Overlay .JS-cta-box {
  pointer-events: auto !important;
  opacity: 1 !important;
}
.SECT-Header__cta-box__submit,
.SECT-Header__cta-box__book,
.SECT-Header__cta-box__request,
.SECT-Overlay__cta-box__submit,
.SECT-Overlay__cta-box__book,
.SECT-Overlay__cta-box__request,
.branDNAmic .DNA-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* CTA action buttons — Verfügbarkeit = sky fill / navy text, Buchen = navy fill / white text */
.DNA-button--cta-request {
  background-color: var(--nils-sky, #81a1bc) !important;
  color: var(--nils-navy, #153149) !important;
}
.DNA-button--cta-request:hover {
  background-color: rgba(129, 161, 188, 0.75) !important;
}
.DNA-button--cta-book {
  background-color: var(--nils-navy, #153149) !important;
  color: var(--nils-on-dark, #fff) !important;
}
.DNA-button--cta-book:hover {
  background-color: rgba(21, 49, 73, 0.75) !important;
}

/* === LAYER 11: Popup triggers always clickable === */
.JS-popup__trigger {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* === LAYER 11b: Popup backdrop-filter:blur causes Chrome to leave the
   hero compositing layer un-painted after popup display:none.
   Drop the blur — keep just the semi-transparent overlay. */
.SECT-Popup__popup__bg,
.SECT-Popup__nlpopup__bg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === LAYER 11c: Disable the 8s linear scale zoom on the hero vista active
   slide. The transform creates a compositing layer that sometimes fails
   to paint in Chromium with image content. */
.SECT-Hero__vista__slide.swiper-slide-active .SECT-Hero__vista__item--image img,
.SECT-Hero__vista__slide .SECT-Hero__vista__item--image img {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* === LAYER 11d: Belt-and-braces — also kill any inherited or computed
   transform on hero IMGs (Chrome sometimes leaves layer artifacts). */
.SECT-Hero__vista img,
.SECT-Hero__vista__item img,
.SECT-Hero__vista__item--image img {
  transform: none !important;
  filter: none !important;
}


/* === LAYER 12: Decorative separators (typically hidden by data-active=0) === */
.SECT-Header__separator,
.SECT-Hero__separator {
  display: block !important;
}

/* === LAYER 13: Form elements (Brandnamic's form CSS expects these visible) === */
input,
textarea,
select,
button {
  display: revert !important;
}

/* === LAYER 14: DNA-icon wrappers === */
.DNA-icon,
.DNA-icon > * {
  display: inline-flex !important;
  align-items: center !important;
}

/* ============================================================
 * MENU OPEN STATE
 * We do NOT override SECT-Header itself — Brandnamic's own CSS
 * already makes .SECT-Header__menu the fullscreen overlay with
 * navy bg and proper layout. We just need to ensure the menu
 * is visible (the JS already sets data-menu-open="1").
 * ============================================================ */

body[data-menu-open="1"] {
  overflow: hidden !important;
}

/* ============================================================
 * LAYER 15: Floating overlay (the bottom "footer" bar)
 * Dates/guests are now collected by the NILS Assistent chat, so
 * hide the check-in / check-out / Gäste fields in the floating
 * booking bar and keep just the two CTAs (Verfügbarkeit + Buchen).
 * ============================================================ */
.SECT-Overlay__cta-box__date,
.SECT-Overlay__cta-box__spacer,
.SECT-Overlay__cta-box__persons,
.SECT-Overlay__cta-box__popup {
  display: none !important;
}
/* The content row now only wraps the (hidden) fields — collapse its left
   padding so the CTAs sit flush in the box. */
.SECT-Overlay__cta-box__content {
  padding: 0.5em !important;
  flex: 0 0 auto !important;
}

/* Make Verfügbarkeit + Buchen pills bigger and easier to hit. Brandnamic
   default: min-width 13.5em, padding 0 2em. Pump to ~17em / 0 2.6em with a
   firm min-height so the floating bar reads as a clear primary call-to-action. */
.SECT-Overlay__cta-box__request__wrap,
.SECT-Overlay .SECT-Overlay__cta-box__request__wrap,
.SECT-Overlay__cta-box__book__wrap,
.SECT-Overlay .SECT-Overlay__cta-box__book__wrap {
  min-width: 17em !important;
  padding: 0 2.6em !important;
  min-height: 4.5em !important;
  font-size: 1.05em !important;
  letter-spacing: 0.05em !important;
  border-radius: 999px !important;
}
.SECT-Overlay__cta-box__cta {
  gap: 0.8em !important;
  padding: 0.55em 0.55em 0.55em 0 !important;
}
/* Make the whole bar a bit more substantial and explicitly centered. */
.SECT-Overlay__container {
  gap: 1.6em !important;
  justify-content: center !important;
}

/* ------------------------------------------------------------
 * Burger lives in the floating overlay, not the top header.
 * On desktop (>=1025px) hide the header burger and reveal a
 * burger injected into the overlay bar by BrandnamicJS.
 * On mobile the overlay already carries its own burger.
 * ------------------------------------------------------------ */
.nils-overlay-burger {
  display: none !important;
}
@media only screen and (min-width: 1025px) {
  .SECT-Header__burger {
    display: none !important;
  }
  /* Brandnamic only styles .SECT-Overlay__burger inside mobile media queries,
     so the desktop burger needs fully self-contained styling. */
  .nils-overlay-burger {
    display: block !important;
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--nils-navy, #153149) !important;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    transition: background-color 0.25s ease;
  }
  .nils-overlay-burger:hover {
    background-color: rgba(21, 49, 73, 0.85) !important;
  }
  .nils-overlay-burger::before,
  .nils-overlay-burger::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 3px;
    background-color: #fff;
    transition: transform 0.35s ease, width 0.35s ease;
  }
  .nils-overlay-burger::before {
    width: 40%;
    top: 50%;
    transform: translate(-50%, -6px);
  }
  .nils-overlay-burger::after {
    width: 28%;
    top: 50%;
    transform: translate(-65%, 6px);
  }
  [data-menu-open="1"] .nils-overlay-burger::before {
    width: 40%;
    transform: translate(-50%, 0) rotate(45deg);
  }
  [data-menu-open="1"] .nils-overlay-burger::after {
    width: 40%;
    transform: translate(-50%, 0) rotate(-45deg);
  }
}

/* ============================================================
 * LAYER 16: Chrome clean-up requested by NILS
 * ============================================================ */

/* Remove the wobbling anchor signet at the top-right of the header. */
.SECT-Header__nav .SECT-Header__signet {
  display: none !important;
}

/* Remove the events/calendar circle from the floating bar — leaving only
   Gutscheine on the left and the navigation burger on the right. */
.SECT-Overlay__link--events {
  display: none !important;
}

/* Custom multi-layer wave transition at the bottom of the hero — replaces
   Brandnamic's old <canvas> wave with parallax SVG waves that visually bind
   the hero image's bottom edge into the cream Main section below.
   The five layers move at different speeds; period = 360px, viewBox 2880 = 8
   identical periods, so translateX(-50%) loops seamlessly. */
.SECT-Hero__wave-animation.nils-hero-waves {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -40px !important;
  top: auto !important;
  width: 100% !important;
  height: clamp(150px, 16vw, 240px) !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  overflow: hidden;
  z-index: 5 !important;
  line-height: 0;
  /* NO container background — only the SVG paths carry the cream so the
     boundary is the wavy crest, not a hard horizontal line at the top edge */
  background: transparent !important;
}
/* Override `.branDNAmic .DNA-wave-animation > *` which would otherwise force
   width:100% + height:auto on our SVG, killing both the loop math (needs
   200% width so translateX(-50%) lands on a period) and the visible height. */
.branDNAmic .DNA-wave-animation.nils-hero-waves > .nils-hero-waves__svg,
.nils-hero-waves__svg {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 200% !important;
  height: 100% !important;
  display: block !important;
}
.nils-hero-waves__path {
  fill: var(--nils-cream, #f7f6f0);
  transform-origin: 0 0;
  will-change: transform;
}
.nils-hero-waves__path--1 { fill-opacity: .18; animation: nils-hero-wave 42s linear infinite; }
.nils-hero-waves__path--2 { fill-opacity: .32; animation: nils-hero-wave 33s linear infinite; }
.nils-hero-waves__path--3 { fill-opacity: .55; animation: nils-hero-wave 26s linear infinite; }
.nils-hero-waves__path--4 { fill-opacity: .8;  animation: nils-hero-wave 20s linear infinite; }
.nils-hero-waves__path--5 { fill-opacity: 1;   animation: nils-hero-wave 15s linear infinite; }
@keyframes nils-hero-wave {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nils-hero-waves__path { animation: none !important; }
}

/* Disable Brandnamic's old cream-fade gradient at the bottom of the hero
   (.SECT-Hero__overlay:after creates a 30%-tall linear-gradient to #F7F6F0).
   That fade hides our wave's wavy edge because they're the same cream.
   With the fade gone, the wave's crests cut cleanly into the hero image. */
.SECT-Hero__overlay::after {
  background: transparent !important;
  display: none !important;
}

/* Menu close: keep the floating bar exactly where it is (same layout, open or
   closed); lift it above the menu so it stays clickable, and turn the burger
   into a clearly visible white circle with a navy × against the navy menu. */
body[data-menu-open="1"] .SECT-Overlay {
  z-index: 100000 !important;
}
body[data-menu-open="1"] .SECT-Overlay__burger {
  background-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}
body[data-menu-open="1"] .SECT-Overlay__burger::before,
body[data-menu-open="1"] .SECT-Overlay__burger::after {
  background-color: var(--nils-navy, #153149) !important;
}

/* ============================================================
 * LAYER 17: Remove the Social Media Wall + menu social icons
 * ============================================================ */

/* Social Media Wall (Curator widget) on the homepage — removed entirely.
   Must out-specify the earlier `.SECT-Main__content > [class*="MOD-"]
   { display: revert !important }` rule, hence the longer selector. */
.SECT-Main .SECT-Main__content > .MOD-Smw.DNA-module,
.MOD-Smw {
  display: none !important;
}

/* Instagram / Facebook icons inside the navigation menu — removed. */
.SECT-Header__social-links {
  display: none !important;
}

/* ============================================================
 * LAYER 18: Tidy the open-menu bottom
 * ============================================================ */

/* The menu's own booking box also collects dates/guests — the chat handles
   that now, so keep only its CTAs (consistent with the floating bar). */
.SECT-Header__cta-box__date,
.SECT-Header__cta-box__spacer,
.SECT-Header__cta-box__persons,
.SECT-Header__cta-box__popup {
  display: none !important;
}

/* The persistent floating bar provides gift / Verfügbarkeit / Buchen / close,
   so the menu's OWN bottom bar is never needed. Hide it unconditionally —
   hiding it only while open made it flash back during the close animation. */
.SECT-Header__cta-box,
.SECT-Header__link--voucher,
.SECT-Header__link--events {
  display: none !important;
}

/* ============================================================
 * LAYER 19: Cinematic open-menu (Phase 2b)
 * Dark left-to-transparent gradient + right-side image visible,
 * staggered nav fade-in. Replaces the wave-animation look.
 * ============================================================ */

/* Kill the wave animations inside the open menu */
.SECT-Header__menu__wave-animation,
.SECT-Header__menu-animation,
.SECT-Header__menu .JS-waves,
.SECT-Header__menu .JS-wave {
  display: none !important;
}

/* Hide the EVENTS & SEMINARE highlight pill — kein „Brandnamic-Stempel" */
.SECT-Header__banner {
  display: none !important;
}

/* SOLID dunkler NILS-Navy als Menü-Hintergrund — kein Gradient, kein Foto. */
.SECT-Header__menu {
  background-color: #0e2335 !important;
}
.SECT-Header__menu::before {
  content: none !important;
}
.nils-menu-images,
.nils-menu-images__layer {
  display: none !important;
}

.SECT-Header__menu__wrap,
.SECT-Header__menu__inner,
.SECT-Header__menu__inner-wrap,
.SECT-Header__menu__container {
  background: transparent !important;
  position: relative;
  z-index: 2;
  /* Brandnamic zentriert standardmäßig vertikal — wir wollen alles
     OBEN, also Flex-Centering aufheben. */
  display: block !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: auto !important;
}

/* Constrain the nav to a narrow LEFT column (~480px) so the right side
   of the dark gradient + image dominates — exactly like the reference. */
@media (min-width: 1025px) {
  .SECT-Header__menu__container {
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding-left: clamp(24px, 3vw, 56px) !important;
    padding-right: clamp(24px, 3vw, 56px) !important;
    padding-top: 12px !important; /* Phone/Lang ganz oben */
  }
  /* Volle Breite für die horizontale Nav-Leiste */
  .SECT-Header__menu__inner,
  .SECT-Header__menu__inner-wrap {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }
  /* Abstand zwischen Phone-Bar und horizontaler Nav-Leiste — knapp */
  .SECT-Header__menu .SECT-Header__lower {
    margin-top: clamp(32px, 5vh, 64px) !important;
    padding: 0 !important;
  }
  .SECT-Header__menu .SECT-Header__upper,
  .SECT-Header__menu .SECT-Header__bar {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Floating-Overlay (Buchungsleiste/Verfügbarkeit/Buchen) DARF beim Öffnen
   des Menüs NICHT springen/verändern. Stelle sicher, dass die Position +
   Größe identisch bleibt, unabhängig vom Menü-Zustand. */
body[data-menu-open="1"] .SECT-Overlay {
  /* Z-Index ist schon hochgezogen — KEIN Layout-Shift dazu. */
  width: auto !important;
  transform: translateX(-50%) !important;
}

/* HORIZONTALE Nav-Leiste oben (Reihe statt Spalte) */
.SECT-Header__menu .SECT-Header__main-menu,
.SECT-Header__menu .SECT-Header__main-menu__lvl,
.SECT-Header__menu .SECT-Header__main-menu__lvl--1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: clamp(24px, 3vw, 56px) !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}
.SECT-Header__menu .SECT-Header__main-menu__item--lvl-0,
.SECT-Header__menu .SECT-Header__main-menu__item-wrap {
  display: block !important;
  width: auto !important;
  position: relative;
}

/* Top-level: ITALIANA (NILS-DNA), Versalien, weiß — horizontale Leiste */
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-0,
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-0 > span {
  font-family: var(--font-italiana), Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2vw, 2.1rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-0 {
  padding: 0.2em 0 !important;
  display: block !important;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

/* Sub-items: ABSOLUT rechts vom Item — Stack springt nie. Z-Index trick
   so dass die Sub-Items NICHT von der nächsten Kategorie unten überlagert
   werden, und der Hover bleibt stabil (man kann durch die Sub-Items
   wandern ohne dass das Menü zuklappt). */
@media (min-width: 1025px) {
  .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0 {
    position: relative !important;
  }
  /* Beim Hover/Focus: das ganze Item nach vorn holen, damit seine
     absoluten Sub-Items über den nachfolgenden Kategorien liegen
     und den Hover behalten — sonst klauen die Nachbarn ihn. */
  .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:hover,
  .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:focus-within {
    z-index: 50 !important;
  }
  /* Cursor-Pointer auf den Top-Level-Links (Klick öffnet Sub-Cards) */
  .SECT-Header__menu .SECT-Header__main-menu__link--lvl-0 {
    cursor: pointer;
  }
}

/* Originale Italic-Text Sub-Liste komplett ausblenden — die Cards
   ersetzen sie vollständig. */
.SECT-Header__menu .SECT-Header__main-menu__sub {
  display: none !important;
}
@keyframes nils-menu-sub-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sub-items: italic, smaller, slightly translucent — reference look */
.SECT-Header__menu .SECT-Header__main-menu__sub {
  padding: 6px 0 22px !important;
  margin: 0 !important;
}
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-1,
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-1 > span {
  font-family: var(--font-jost), system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-1 {
  padding: 0.35em 0 !important;
  display: block !important;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Hover effects */
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-0:hover,
.SECT-Header__menu .SECT-Header__main-menu__link--lvl-1:hover {
  color: #a9c1d6 !important;
  padding-left: 8px !important;
}

/* Staggered fade-in entrance for the top-level items */
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0 {
  opacity: 0;
  transform: translateY(20px);
  animation: nils-menu-in 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(1) { animation-delay: 0.85s; }
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(2) { animation-delay: 0.95s; }
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(3) { animation-delay: 1.05s; }
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(4) { animation-delay: 1.15s; }
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(5) { animation-delay: 1.25s; }
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(6) { animation-delay: 1.35s; }
[data-menu-open="1"] .SECT-Header__menu .SECT-Header__main-menu__item--lvl-0:nth-child(7) { animation-delay: 1.45s; }
@keyframes nils-menu-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * LAYER 20: Telefon-Icon ÜBERALL entfernen + Menü-Top aufräumen
 * ============================================================ */

/* Telefon-Icon site-wide weg (Icon, nicht der Text!) */
.SECT-Header__phone .SECT-Header__icon,
.SECT-Header__phone .DNA-icon,
.SECT-Footer__phone .DNA-icon,
.SECT-Footer__phone .SECT-Footer__icon,
[class*="__phone"] > .DNA-icon:first-child {
  display: none !important;
}

/* Im OFFENEN Menü: das doppelte NILS-Wordmark/Logo ausblenden
   (überlappt mit Phone/Lang und ist redundant — Marke ist schon klar) */
.SECT-Header__menu .SECT-Header__logo,
.SECT-Header__menu .SECT-Header__signet,
.SECT-Header__menu .SECT-Header__wordmark,
.SECT-Header__menu__signet {
  display: none !important;
}

/* Phone-Number-Link im Menü darf bleiben, aber sauber positioniert (kein
   Float-/Top-Overlap mit dem Logo, das jetzt eh weg ist) */
.SECT-Header__menu .SECT-Header__phone {
  font-family: var(--font-jost), system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
 * LAYER 21: Open-Animation aufräumen
 * - Kein Flash/Strich beim Öffnen (Wave-Reste etc. komplett killen)
 * - Kein Screen-Wobble (Scrollbar reservieren, kein Layout-Shift)
 * ============================================================ */

/* Scrollbar reservieren, damit bei body{overflow:hidden} im Menü-offen-
   Zustand das Layout NICHT um ~15px verspringt (Wobble-Fix). */
html {
  scrollbar-gutter: stable;
}

/* Wave-Pfade, Canvas und Animationsreste komplett unsichtbar machen — auch
   während des Brandnamic-Open-Transitions. */
.SECT-Header__menu canvas,
.SECT-Header__menu svg.JS-wave,
.SECT-Header__menu-animation,
.SECT-Header__menu__wave-animation,
.SECT-Header__menu .DNA-wave-animation {
  display: none !important;
  visibility: hidden !important;
}

/* Image-Layer bekommen erst sichtbar wenn das Menü offen ist — sonst
   kann der „default active" Layer kurz aufflashen bevor das Menü da ist. */
.nils-menu-images__layer { opacity: 0 !important; }
body[data-menu-open="1"] .nils-menu-images__layer.is-active { opacity: 1 !important; }

/* ============================================================
 * LAYER 22: Sub-Cards als Grid (theresort.at-Style)
 * — Container sitzt FEST im Viewport (oberhalb der Items, daher
 *   nicht von Item-`transform` beeinflusst).
 * — Klick auf eine Top-Kategorie aktiviert ihren Grid.
 * ============================================================ */

.nils-menu-cards {
  position: fixed;
  top: clamp(220px, 28vh, 280px);
  left: clamp(24px, 3vw, 56px);
  right: clamp(24px, 3vw, 56px);
  max-height: calc(100vh - 340px);
  z-index: 15;
  pointer-events: none;
}
.nils-menu-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  /* Alle Grids overlappen am gleichen Spot — nur der aktive ist sichtbar */
  position: absolute;
  inset: 0 0 auto 0;
}
.SECT-Header__menu[data-active-cat="0"] .nils-menu-cards__grid[data-cat-index="0"],
.SECT-Header__menu[data-active-cat="1"] .nils-menu-cards__grid[data-cat-index="1"],
.SECT-Header__menu[data-active-cat="2"] .nils-menu-cards__grid[data-cat-index="2"],
.SECT-Header__menu[data-active-cat="3"] .nils-menu-cards__grid[data-cat-index="3"],
.SECT-Header__menu[data-active-cat="4"] .nils-menu-cards__grid[data-cat-index="4"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 1280px) {
  .nils-menu-cards__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nils-menu-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
.nils-menu-cards__card {
  position: relative;
  display: block;
  height: clamp(180px, 24vh, 240px);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.nils-menu-cards__card:hover {
  transform: translateY(-3px);
}
.nils-menu-cards__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.nils-menu-cards__card:hover .nils-menu-cards__img {
  transform: scale(1.05);
}
.nils-menu-cards__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.78) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
}
.nils-menu-cards__cat {
  font-family: var(--font-jost), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
  font-weight: 600;
}
.nils-menu-cards__title {
  font-family: var(--font-italiana), Georgia, serif;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}

/* Wenn ein Karten-Grid aktiv ist (User hat geklickt), Image-Layer
   ausblenden damit die Karten klar wirken. */
.SECT-Header__menu[data-active-cat] .nils-menu-images__layer {
  opacity: 0 !important;
}

/* ============================================================
 * LAYER 23: HOME entrümpeln — weniger Info-Overload
 * Zimmer-Slider & Kategorie-Boxen werden visuell schlanker.
 * ============================================================ */

/* Zimmer-Slider (eigener React Slider, .nils-room*):
   Preis-Zeile raus — die Karte wirkt sofort ruhiger.
   Titel + Meta (Größe · Personen) + Verfügbarkeit/Buchen bleiben. */
.nils-room__price {
  display: none !important;
}

/* LinkBoxes / Kategorie-Karten (eigener React Slider, .nils-card*):
   Beschreibungstext + „Details/Entdecken"-CTA raus.
   Bild + Titel bleiben — die ganze Karte ist eh klickbar. */
.nils-card__text,
.nils-card__cta {
  display: none !important;
}

/* ============================================================
 * LAYER 24: ANTI-BRANDNAMIC DESIGN OVERHAUL — site-wide
 * Inhalt bleibt 1:1 wie original (Struktur unverändert).
 * Look wird komplett umgemalt → KEIN Brandnamic-Wiedererkennungs-
 * wert mehr in Headlines, Buttons, Cards, Slider-Pfeilen, Decorations.
 * Floater/Buchungsleiste (SECT-Overlay) bleibt explizit unberührt.
 * ============================================================ */

/* ---- 24.1 Anker-Icons WEG (überall) — der prominenteste „Brandnamic-Stempel" */
.DNA-content__anchor,
[class*="__anchor"] svg use[href*="#DNA-icon--anchor"],
[class*="content__anchor"] {
  display: none !important;
}

/* ---- 24.2 Wave-Animationen komplett tot (Hero/Section-Decorations) */
.DNA-wave-animation,
[class*="__wave-animation"],
.SECT-Hero__wave-animation,
canvas.JS-waves,
svg.JS-wave {
  display: none !important;
}

/* ---- 24.3 Section-Headlines: linkbündig statt zentriert, eigene
   Akzent-Linie statt Anker — sofort erkennbar „nicht Brandnamic". */
.DNA-content[data-centered="1"],
[class*="__content"][data-centered="1"] {
  text-align: left !important;
}
/* Akzent NUR auf den äußersten Headline-Container (genau die mit
   Endung __content__headlines), NICHT auf verschachtelte __wrap/__main */
[class$="__content__headlines"],
[class*="__content__headlines "] {
  position: relative !important;
  padding-left: clamp(20px, 2vw, 36px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 1100px !important;
}
[class$="__content__headlines"]::before,
[class*="__content__headlines "]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  background: var(--nils-sky, #81a1bc) !important;
}
/* Verschachtelte Wraps dürfen KEIN Padding und KEIN ::before — sonst
   gibt's 3 vertikale Linien. */
[class*="__headlines__wrap"],
[class*="__headlines__main"],
[class*="__headlines__sub"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
[class*="__headlines__wrap"]::before,
[class*="__headlines__main"]::before,
[class*="__headlines__sub"]::before {
  display: none !important;
}

/* Headline-Größen kappen — Brandnamic baut riesige clamp()-Headlines auf
   `__headlines__main span`. Wir überschreiben Element UND inner span. */
[class*="__headlines__main"],
[class*="__headlines__main"] > span,
[class*="__headlines__main"] > span > * {
  text-align: left !important;
  font-family: var(--font-italiana), Georgia, serif !important;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
}
[class*="__headlines__sub"],
[class*="__headlines__sub"] > span {
  text-align: left !important;
  font-family: var(--font-jost), system-ui, sans-serif !important;
  font-size: clamp(0.85rem, 1vw, 1rem) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--nils-sky, #81a1bc) !important;
  margin-bottom: 0.6em !important;
}

/* ---- 24.4 RTE / Lead-Texte: linkbündig, ruhig */
[class*="__rte"],
[class*="__text"] {
  text-align: left !important;
  max-width: 720px !important;
}

/* ---- 24.5 Content-Wrapper (zentrierte Sections aufheben) */
[class*="__content"][data-centered="1"] {
  align-items: flex-start !important;
}
[class*="__content"][data-centered="1"] [class*="__button"] {
  margin-left: 0 !important;
}

/* ---- 24.6 Buttons (DNA-button*): eckig statt rund — fundamentaler Look-Wechsel
   Floater-CTAs (DNA-button--cta-book/-request) sind ABSICHTLICH ausgenommen,
   damit der Floater unten so bleibt wie er ist. */
.DNA-button:not(.DNA-button--cta-book):not(.DNA-button--cta-request),
.DNA-button--small,
.DNA-button--inverted,
[class*="__button__wrap"]:not(.JS-cta-box__book):not(.JS-cta-box__request) {
  border-radius: 0 !important;
  padding: 14px 28px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}
.DNA-button:not(.DNA-button--cta-book):not(.DNA-button--cta-request):hover {
  background: var(--nils-navy, #153149) !important;
  color: #fff !important;
}

/* ---- 24.7 Slider-Pfeile: dünne minimale Linien statt Brandnamic-Kreis */
.DNA-slider-arrows__arrow,
[class*="__arrows__arrow"] {
  background: transparent !important;
  border: 1px solid var(--nils-navy, #153149) !important;
  border-radius: 0 !important;
  width: 56px !important;
  height: 56px !important;
  transition: background 0.25s ease !important;
}
.DNA-slider-arrows__arrow:hover {
  background: var(--nils-navy, #153149) !important;
}
.DNA-slider-arrows__arrow:hover svg {
  filter: invert(1);
}
[class*="__arrows__icon"] svg {
  width: 22px !important;
  height: 16px !important;
}

/* ---- 24.8 Card-Treatments (Rooms, Impressions, Offers): scharfe Kanten,
   eigene Hover-Sprache statt Brandnamic-Scale */
.MOD-RoomsTeaser__item__wrap,
.MOD-RoomsList__item__wrap,
.MOD-Impressions__item__wrap,
.MOD-OffersTeaser__item__wrap,
[class*="__item__wrap"]:not(.SECT-Header__main-menu__item-wrap):not(.SECT-Overlay__cta-box__container) {
  border-radius: 0 !important;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1) !important;
}
.MOD-RoomsTeaser__item__media,
.MOD-RoomsList__item__media,
.MOD-Impressions__item__media,
.MOD-OffersTeaser__item__media,
[class*="__item__image"] {
  border-radius: 0 !important;
  overflow: hidden;
}
.MOD-RoomsTeaser__item:hover .MOD-RoomsTeaser__item__media img,
[class*="__item"]:hover [class*="__media"] img,
[class*="__item"]:hover [class*="__image"] img {
  transform: scale(1.04) !important;
  transition: transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1) !important;
}

/* ---- 24.9 Section-Spacing: neuer Rhythmus (etwas knapper als Brandnamic) */
[data-space-bottom="small"] { padding-bottom: clamp(40px, 6vw, 80px) !important; }
[data-space-bottom="medium"] { padding-bottom: clamp(60px, 8vw, 110px) !important; }
[data-space-bottom="big"] { padding-bottom: clamp(80px, 10vw, 140px) !important; }
[data-space-bottom="large"] { padding-bottom: clamp(100px, 12vw, 180px) !important; }

/* ---- 24.10 Footer: eigene strukturierte Visual-Sprache */
.SECT-Footer {
  background: var(--nils-navy, #153149) !important;
  color: #fff !important;
  padding: clamp(60px, 8vw, 120px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 56px) !important;
}
.SECT-Footer__container {
  max-width: 1340px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: clamp(32px, 4vw, 64px) !important;
}
.SECT-Footer * { color: inherit !important; }
.SECT-Footer__address__title,
.SECT-Footer__contact__title,
.SECT-Footer__intpages__title {
  font-family: var(--font-jost), system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--nils-sky, #81a1bc) !important;
  margin: 0 0 16px !important;
  font-weight: 600 !important;
}
.SECT-Footer__address__company {
  font-family: var(--font-italiana), Georgia, serif !important;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.SECT-Footer__intpages__content a {
  text-decoration: none !important;
  display: block !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.SECT-Footer__intpages__content a:hover {
  color: var(--nils-sky, #81a1bc) !important;
  padding-left: 6px !important;
}
.SECT-Footer__legal-menu {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-top: clamp(40px, 6vw, 80px) !important;
  padding-top: clamp(20px, 3vw, 32px) !important;
  text-align: center !important;
}
.SECT-Footer__legal-menu__link,
.SECT-Footer__legal-menu__copyright {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  opacity: 0.7 !important;
}
.SECT-Footer__contact-links {
  display: flex !important;
  gap: 14px !important;
  margin-top: 16px !important;
}
.SECT-Footer__contact-links__link {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
}
.SECT-Footer__contact-links__link:hover {
  background: var(--nils-sky, #81a1bc) !important;
}

/* ---- 24.11 Brandnamic Marquee / LinkBanner Dekoreste neutralisieren */
.MOD-Marquee {
  padding: clamp(40px, 6vw, 80px) 0 !important;
  background: var(--nils-cream, #f7f6f0) !important;
  color: var(--nils-navy, #153149) !important;
}
.MOD-LinkBanner__wrap {
  border-radius: 0 !important;
  overflow: hidden;
}

/* ---- 24.12 Rooms-Detail-Page (Subpage): Hero-Block ohne Brandnamic-Pattern */
.MOD-RoomsDetail__headlines {
  text-align: left !important;
  padding-left: clamp(20px, 2vw, 36px) !important;
}

/* ---- 24.13 Section-Borders / Klare Trennungen statt Brandnamic-Anchor */
.MOD-Text + .MOD-LinkBoxes,
.MOD-LinkBoxes + .MOD-RoomsTeaser,
.MOD-RoomsTeaser + .MOD-Impressions,
.MOD-Impressions + .MOD-OffersTeaser {
  position: relative;
}