/* LP Studio foundation: shared by every landing page. AI modules build on these tokens and
   utilities and only add CSS scoped to their own module. */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-background);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  /* The design tokens set --space-section-scale on :root when the style
     profile fixes the white space. */
  --space-section: calc(
    clamp(3.5rem, 8vw, 7rem) * var(--space-section-scale, 1)
  );
  --container: 1280px;
  --container-default: 1280px;
  --gutter: 25px;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.08);
}
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
/* A logo keeps its proportions whatever width and height a module gives it. One drawn for
   light backgrounds turns white on a dark one: in the overlay header and in a full-screen
   hero that has no negative logo (logo(…, 'on_dark') marks it data-invert). */
img.lp-logo {
  object-fit: contain;
}
img.lp-logo[data-invert],
.m--header[data-header-overlay] img.lp-logo[data-ink="dark"] {
  filter: brightness(0) invert(1);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  font-weight: 600;
  color: inherit;
}
p {
  margin: 0 0 var(--space-4);
}
a {
  color: var(--c-primary);
}
button {
  font: inherit;
}
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

.h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
}
.h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: var(--space-3);
}
.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}
.text-muted {
  color: var(--c-muted);
}

/* The side gutter lives in width and max-width alike: a module that overrides one of them
   (width: 100% on its container element, say) keeps the gutter through the other. */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  max-width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow {
  --container: 835px;
}
.container--wide {
  --container: 1920px;
}
/* Movement on scroll (offset figures, parallax) never makes the page scroll sideways. clip,
   unlike hidden, keeps the section from becoming a scroll container, so sticky still works;
   the visual QA looks past this clip and still reports content that sticks out. */
.m {
  overflow-x: clip;
}
/* Inside container--wide: headline and text on the content edge of the default container,
   while the images beside or below them use the full width. */
.content-edge {
  padding-inline: max(0px, (100% - var(--container-default)) / 2);
}
.section-pad {
  padding-block: var(--space-section);
}
/* A header over a full-screen hero (pattern header.overlay): fixed to the top over the
   image, with a solid background once the page scrolls (foundation.js sets is-scrolled).
   The shade for light text over a bright sky reaches below the bar, so the bar itself stays
   slim with its content centred; a background the module gives its own wrapper would
   double it. */
.m--header[data-header-overlay] {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  color: var(--c-on-primary);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.m--header[data-header-overlay]::before {
  content: "";
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  background: linear-gradient(
    rgb(0 0 0 / 0.62),
    rgb(0 0 0 / 0.5) 60%,
    rgb(0 0 0 / 0)
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.m--header[data-header-overlay] > * {
  background: none !important;
}
.m--header[data-header-overlay].is-scrolled {
  background: var(--c-primary);
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.15);
}
.m--header[data-header-overlay].is-scrolled::before {
  opacity: 0;
}
/* A full-screen hero that shows the hotel logo large (foundation.js sets has-hero-logo while
   the hero's logo is visible): the header over it shows its own logo only once the page
   scrolls, so the first screen never shows the logo twice. The whole brand link goes, so a
   frame the module draws around the logo does not stay behind empty. */
.m--header[data-header-overlay] .lp-logo,
.m--header[data-header-overlay] a:has(.lp-logo) {
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}
.m--header[data-header-overlay].has-hero-logo:not(.is-scrolled)
  :is(a:has(.lp-logo), .lp-logo) {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .m--header[data-header-overlay],
  .m--header[data-header-overlay]::before {
    transition: none;
  }
}
/* Every other header stays at the top on desktop, so quicklinks and enquiry button remain
   at hand while scrolling; on phones the bottom bar carries them and the header scrolls
   away. The section classes outrank a position the module gives its root. A header whose
   own bar floats (data-header-floating, foundation.js) stays in the flow. */
@media (min-width: 1024px) {
  .m.m--header:not([data-header-overlay]):not(:has([data-header-floating])) {
    position: sticky;
    top: 0;
    z-index: 60;
  }
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.stack > * {
  margin: 0;
}
.grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.btn--secondary {
  background: var(--c-secondary);
  color: var(--c-on-secondary);
}
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: currentColor;
}
.btn--light {
  background: #fff;
  color: var(--c-text);
}
.lp-link-button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.card {
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--c-background);
  font-size: 0.8rem;
  font-weight: 600;
}
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Stands in for a missing image; picture() renders it with the ratio the module asked for. */
.lp-image-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 8rem;
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c-primary) 14%, var(--c-surface)),
    var(--c-surface)
  );
  color: var(--c-muted);
}
.lp-image-placeholder::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background: currentColor;
  opacity: 0.45;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.lp-image-placeholder__hint {
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}
.price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
}
/* The price takes the text colour of its card or section, so it stays legible on dark
   backgrounds without a rule of the module. */
.price__amount {
  font-size: 1.35rem;
  color: inherit;
}
.price__from,
.price__unit {
  font-size: 0.9rem;
  color: inherit;
}
.u-hidden {
  display: none;
}
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Slider: [data-slider] > [data-slider-track] > items, buttons [data-slider-prev|next] */
[data-slider-track] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 380px);
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
[data-slider-track] > * {
  scroll-snap-align: start;
}
[data-slider-track]::-webkit-scrollbar {
  display: none;
}
/* On phones a row that scrolls sideways runs to the screen edge: the item cut off on the right
   reaches the edge instead of ending at the gutter, while the first item lines up with the
   content. The section class outranks the two classes a module styles its track with. */
@media (max-width: 767px) {
  .m .container [data-slider-track],
  .m .container [data-list-layout="slider"] [data-list],
  .m .container [data-motion="horizontal"] {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}
.lp-list-controls {
  justify-content: flex-end;
  margin-top: var(--space-4);
}
/* A list marked data-list-mobile="slider" is a row to swipe on phones, with a progress bar
   below it (foundation.js); on larger screens it stays the module's list with "load more". */
@media (max-width: 767px) {
  .m [data-list-mobile="slider"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .m [data-list-mobile="slider"] > * {
    scroll-snap-align: start;
  }
  .m [data-list-mobile="slider"]::-webkit-scrollbar {
    display: none;
  }
  .m .container [data-list-mobile="slider"] {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}
.lp-list-progress {
  height: 3px;
  margin-top: var(--space-5);
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  overflow: hidden;
}
.lp-list-progress span {
  display: block;
  width: calc(var(--slider-progress, 0.2) * 100%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 0.2s ease;
}

/* A long list shows its first entries; the button below it loads the next ones. The
   class outranks the display a module gives its cards. */
.m [data-list] > .lp-is-collapsed {
  display: none !important;
}
.lp-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}
/* An outline in the text colour of the section, readable on light and dark bands alike. */
.lp-load-more .btn {
  color: inherit;
}

/* Slideshow from slideshow(): stacked slides that fade, with controls on the image (in the
   hero on the section). */
.lp-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Hidden slides take no clicks and no keyboard focus, so a slideshow inside [data-gallery]
   opens the lightbox at the slide that is shown. Visibility switches after the fade. */
.lp-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.2s ease,
    visibility 0s linear 1.2s;
}
.lp-slideshow__slide:first-child {
  position: relative;
  height: 100%;
}
.lp-slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.lp-slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-slideshow__controls {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lp-slideshow__controls[hidden] {
  display: none;
}
.lp-slideshow__controls button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.7);
  background: rgb(0 0 0 / 0.25);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
/* Outside the hero the controls stay on the image, on a dark pill that reads on any photo. */
.lp-slideshow > .lp-slideshow__controls {
  right: var(--space-3);
  bottom: var(--space-3);
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
  font-size: 0.9rem;
}
.lp-slideshow > .lp-slideshow__controls button {
  width: 44px;
  height: 44px;
  border-color: rgb(255 255 255 / 0.5);
  background: transparent;
  backdrop-filter: none;
}
/* In the hero foundation.js moves the controls to the section, aligned with the content. */
:where(.lp-has-slideshow-controls) {
  position: relative;
}
/* Bottom right at the edge of the screen, away from a centred headline and button. Smaller
   screens have no room beside the content and the header: the slideshow fades on its own. */
.lp-has-slideshow-controls > .lp-slideshow__controls {
  display: none;
  right: max(var(--gutter), calc((100% - 1920px) / 2 + var(--gutter)));
  bottom: var(--space-5);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}
@media (min-width: 1024px) {
  .lp-has-slideshow-controls > .lp-slideshow__controls:not([hidden]) {
    display: flex;
  }
}
.lp-zoomable {
  cursor: zoom-in;
}
.slider-controls {
  display: flex;
  gap: var(--space-2);
}
.slider-controls button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  font-size: 1.2rem;
}

/* Tabs: [data-tabs] with buttons [data-tab="key"] and panels [data-tab-panel="key"] */
[data-tabs] [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
[data-tab] {
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
[data-tab][aria-selected="true"] {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-color: var(--c-primary);
}

/* Dialog: <dialog class="lp-dialog" id="..."> opened by [data-dialog-open="id"] */
.lp-dialog {
  width: min(100% - 2rem, 860px);
  max-height: 90vh;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
}
.lp-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}
.lp-dialog__body {
  padding: var(--space-6);
}
.lp-dialog__close {
  position: sticky;
  top: 0;
  float: right;
  margin: var(--space-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--c-surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 1.4rem;
}

.lp-anchor-nav ul,
.lp-lang ul,
.lp-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.lp-anchor-nav a,
.lp-lang a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.lp-lang a[aria-current="page"] {
  text-decoration: underline;
}
/* On touch screens every language link is a tap target of full height; the padding
   takes over the spacing of the gap. */
@media (pointer: coarse) {
  .lp-lang ul {
    gap: 0;
  }
  .lp-lang a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.5rem;
  }
}
.lp-richtext ul {
  padding-left: 1.2rem;
}

.lp-skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}
.lp-skip-link:focus {
  top: 1rem;
}
/* On phones, once the hero is passed: the enquiry button, and like on the Brandnamic landing
   pages a bar with the quicklinks to swipe through beside it, so the header needs no menu. */
.lp-sticky-cta {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 40;
  display: none;
}
.lp-sticky-cta .btn {
  width: 100%;
  box-shadow: var(--shadow);
}
.lp-sticky-cta--with-links {
  inset: auto 10px 10px;
  align-items: center;
  gap: var(--space-1);
  height: 52px;
  padding: 5px;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.16);
}
.lp-sticky-cta--with-links .lp-sticky-cta__request {
  flex-shrink: 0;
  width: auto;
  min-height: 42px;
  padding-inline: var(--space-4);
  font-size: 0.875rem;
  box-shadow: none;
}
.lp-sticky-cta__links {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.lp-sticky-cta__links::-webkit-scrollbar {
  display: none;
}
.lp-sticky-cta__links ul {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 var(--space-5) 0 var(--space-3);
  list-style: none;
  white-space: nowrap;
}
.lp-sticky-cta__links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
}
@media (max-width: 767px) {
  .lp-sticky-cta.is-visible {
    display: block;
  }
  .lp-sticky-cta--with-links.is-visible {
    display: flex;
  }
}
.lp-toast {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--c-text);
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lp-consent {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 70;
  width: min(100% - 2rem, 420px);
  background: var(--c-surface);
  color: var(--c-text);
  padding: var(--space-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lp-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}
/* Thumbnail mode (?lp-thumbnail, publish-time screenshots): no overlays. */
[data-thumbnail] .lp-consent,
[data-thumbnail] .lp-sticky-cta,
[data-thumbnail] .lp-toast {
  display: none;
}
/* DynForms theme: defaults from the design tokens. A module may override any --form-clr-* on
   "%root% .lp-dynform", e.g. for a dark request section. */
.lp-dynform {
  min-height: 420px;
  --form-clr-form-bg: transparent;
  --form-clr-button-bg: var(--c-primary);
  --form-clr-button-border: var(--c-primary);
  --form-clr-button-text: var(--c-on-primary);
  --form-clr-schema-1-bg: var(--c-primary);
  --form-clr-schema-1-border: var(--c-primary);
  --form-clr-schema-1-text: var(--c-on-primary);
  --form-clr-schema-2-bg: color-mix(
    in srgb,
    var(--c-primary) 10%,
    var(--c-surface)
  );
  --form-clr-schema-2-border: var(--c-primary);
  --form-clr-schema-2-text: var(--c-text);
  --form-clr-schema-3-bg: var(--c-surface);
  --form-clr-schema-3-border: var(--c-border);
  --form-clr-schema-3-text: var(--c-text);
  --form-clr-schema-4-bg: var(--c-background);
  --form-clr-schema-4-border: var(--c-border);
  --form-clr-schema-4-text: var(--c-text);
  --form-clr-typo-headline: var(--c-text);
  --form-clr-typo-subheadline: var(--c-text);
  --form-clr-typo-text: var(--c-muted);
  --form-clr-info-invalid: #c62828;
  --form-clr-info-valid: #2e7d32;
}
.lp-dynform .BN-dynform__row[data-row="conclusion-final"] button {
  border-radius: var(--radius);
}
/* The compact form (foundation.js): no trip header, no appended block and no address
   accordion. */
.lp-dynform .BN-dynform .BN-dynform__row[data-row="trip-header"],
.lp-dynform .BN-dynform .BN-dynform__row[data-row="block-append"],
.lp-dynform .BN-dynform .BN-dynform__row[data-row="personal-accordion"] {
  display: none;
}
/* The form fills its column up to a comfortable width and is centred in a wider one. */
.lp-dynform .BN-dynform .BN-dynform__wrap {
  max-width: min(100%, 980px);
  margin-inline: auto;
}
.lp-subpage {
  padding-block: var(--space-section);
}
.lp-thanks__inner {
  text-align: center;
  align-items: center;
}
.lp-thanks__check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: 2rem;
}
.lp-preview-warning {
  background: #fff3cd;
  color: #5c4400;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}
.lp-preview-warning p {
  margin: 0;
}
.lp-module-error {
  margin: 1rem;
  padding: 1rem;
  border: 2px dashed #c0392b;
  color: #c0392b;
  background: #fdecea;
  border-radius: 8px;
  font-family: monospace;
}
/* Motion toolkit ([data-motion], run by motion.js). These rules are the static
   layout, which stays without JavaScript, with reduced motion, with the motion
   level "none", in thumbnail mode and on touch devices: a horizontal track is a
   swipeable list, a marquee a wrapping row. */
[data-motion="zoom"] {
  overflow: hidden;
}
[data-motion="counter"] {
  font-variant-numeric: tabular-nums;
}
[data-motion="horizontal"] {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}
[data-motion="horizontal"]::-webkit-scrollbar {
  display: none;
}
[data-motion="horizontal"] > * {
  flex: 0 0 min(85%, 24rem);
  scroll-snap-align: start;
}
[data-motion="horizontal"].is-motion-active {
  overflow: visible;
  scroll-snap-type: none;
}
[data-motion="horizontal"].is-motion-active + [data-list-controls] {
  display: none;
}
/* The section around an active horizontal track: the track reaches beyond the
   screen, which must not widen the page. */
.lp-motion-clip {
  overflow-x: clip;
}
[data-motion="marquee"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
[data-motion="marquee"].is-motion-active {
  position: relative;
  flex-wrap: nowrap;
  overflow: hidden;
}
[data-motion="marquee"].is-motion-active > * {
  flex-shrink: 0;
}
/* The pause button after a running marquee, right-aligned in block, flex and
   grid layouts alike. */
.lp-motion-toggle {
  display: grid;
  place-items: center;
  align-self: flex-end;
  justify-self: end;
  width: 36px;
  height: 36px;
  margin: var(--space-2) 0 0 auto;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 0.7rem;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .lp-slideshow__slide {
    transition: none;
  }
}

/* An open detail dialog holds the page still behind it. */
html:has(.lp-dialog[open]) {
  overflow: hidden;
}

/* The kickstarter template shows the bottom bar from the start and up to tablet width
   (foundation.js adds lp-sticky-cta--early), in the colours of a box, as its header bar. */
@media (max-width: 1024px) {
  .lp-sticky-cta--early.is-visible {
    display: block;
  }
  .lp-sticky-cta--early.lp-sticky-cta--with-links {
    border-radius: 4px;
    background: var(--c-secondary);
    color: var(--c-on-secondary);
    box-shadow: 0 3px 5px rgb(0 0 0 / 0.1);
  }
  .lp-sticky-cta--early.lp-sticky-cta--with-links.is-visible {
    display: flex;
  }
}

/* The space below a section, chosen in the editor as in the kickstarter ("Abstand unten":
   large 150px, small 50px or none, half of it up to tablet width). A module that reads
   --space-below (data-space-own, the kickstarter template) places it itself; otherwise it
   replaces the section's bottom padding. */
.m[data-space-bottom="large"] {
  --space-below: 150px;
}
.m[data-space-bottom="small"] {
  --space-below: 50px;
}
.m[data-space-bottom="none"] {
  --space-below: 0px;
}
@media (max-width: 1024px) {
  .m[data-space-bottom="large"] {
    --space-below: 75px;
  }
  .m[data-space-bottom="small"] {
    --space-below: 25px;
  }
}
.m[data-space-bottom]:not([data-space-own]) {
  padding-bottom: var(--space-below);
}

/* Theme navigation from site_nav(): links between the subdomain page and its theme pages. */
.lp-site-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-site-nav a {
  color: inherit;
  text-decoration: none;
}
.lp-site-nav a[aria-current="page"] {
  font-weight: 700;
}

/* Language menu from lang_switch(class, 'menu'): the current language opens the others. */
.lp-lang--menu {
  position: relative;
}
.lp-lang--menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.lp-lang--menu > summary::-webkit-details-marker {
  display: none;
}
.lp-lang--menu > summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.lp-lang--menu ul {
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 5;
  display: grid;
  gap: 0;
  min-width: 10rem;
  padding: var(--space-2) 0;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow);
}
.lp-lang--menu li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
}

/* "Seite & Design" → Verhalten (PageBehaviour): the confirmation when a room or offer joins the
   enquiry, and the exit-intent box; both bottom right, above the page. */
.lp-request-popup,
.lp-exit-intent {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 70;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
}
.lp-request-popup[hidden],
.lp-exit-intent[hidden] {
  display: none;
}
.lp-request-popup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  width: min(440px, calc(100vw - 100px));
  padding: var(--space-5);
}
.lp-request-popup__check {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #2e7d32;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-request-popup__title {
  margin: 0;
  font-weight: 600;
}
.lp-request-popup__name {
  margin: 2px 0 0;
  font-size: 0.9375rem;
}
.lp-request-popup__close,
.lp-exit-intent__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.lp-request-popup__close {
  margin: -12px -12px 0 0;
}
.lp-request-popup__close svg,
.lp-exit-intent__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.lp-request-popup__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.lp-request-popup__actions .btn {
  min-height: 44px;
  padding: 0.5rem 1rem;
}
.lp-exit-intent {
  width: min(600px, calc(100vw - 100px));
  padding: var(--space-6) var(--space-6) var(--space-6);
}
.lp-exit-intent__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}
.lp-exit-intent__title {
  margin: 0;
  padding-right: var(--space-6);
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  line-height: 1.3;
}
.lp-exit-intent__text {
  margin: var(--space-2) 0 var(--space-5);
}
@media (max-width: 1024px) {
  .lp-request-popup,
  .lp-exit-intent {
    right: 10px;
    bottom: 72px;
    width: calc(100vw - 20px);
  }
}