/* LP Studio foundation, frame version 2: shared by every landing page created since. It
   follows the code guidelines of Brandnamic's TYPO3 landing page kickstarter. The body is 62.5%
   of the browser's font size, 10px, and every length is em on that base (24px are 2.4em). The
   body's size steps at the kickstarter's fixed breakpoints (1920, 1600, 1366, 1024, 767, 480,
   350, 320), so a page scales as a whole: on a laptop up to 1366px wide everything is 80% of its
   size at 1920px. The rules are the same for every customer; the values (type sizes, weights,
   content widths, spacing) are the customer's: DesignTokens writes them as unitless px on
   :root, with the kickstarter's values as the defaults below. Font sizes sit on text elements,
   never on a box whose spacing is in em. AI modules build on these tokens and utilities and only
   add CSS scoped to their own module. */

/* The tokens are lengths computed on the body and inherited as such: a space or a font size
   means the same inside text of any size, and nested text never multiplies its size. */
@property --lp-em {
  syntax: "<length>";
  inherits: true;
  initial-value: 10px;
}
@property --fs-h1 {
  syntax: "<length>";
  inherits: true;
  initial-value: 36px;
}
@property --fs-h2 {
  syntax: "<length>";
  inherits: true;
  initial-value: 29px;
}
@property --fs-h3 {
  syntax: "<length>";
  inherits: true;
  initial-value: 23px;
}
@property --fs-text {
  syntax: "<length>";
  inherits: true;
  initial-value: 17px;
}
@property --fs-small {
  syntax: "<length>";
  inherits: true;
  initial-value: 15px;
}
@property --space-1 {
  syntax: "<length>";
  inherits: true;
  initial-value: 4px;
}
@property --space-2 {
  syntax: "<length>";
  inherits: true;
  initial-value: 8px;
}
@property --space-3 {
  syntax: "<length>";
  inherits: true;
  initial-value: 12px;
}
@property --space-4 {
  syntax: "<length>";
  inherits: true;
  initial-value: 16px;
}
@property --space-5 {
  syntax: "<length>";
  inherits: true;
  initial-value: 24px;
}
@property --space-6 {
  syntax: "<length>";
  inherits: true;
  initial-value: 32px;
}
@property --space-7 {
  syntax: "<length>";
  inherits: true;
  initial-value: 48px;
}
@property --space-8 {
  syntax: "<length>";
  inherits: true;
  initial-value: 72px;
}
@property --space-section {
  syntax: "<length>";
  inherits: true;
  initial-value: 88px;
}
@property --container {
  syntax: "<length>";
  inherits: true;
  initial-value: 1280px;
}
@property --container-default {
  syntax: "<length>";
  inherits: true;
  initial-value: 1280px;
}
@property --gutter {
  syntax: "<length>";
  inherits: true;
  initial-value: 25px;
}
@property --radius {
  syntax: "<length>";
  inherits: true;
  initial-value: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* The html element keeps the browser's font size, so the page scales with a larger default
   font a visitor has chosen. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  /* The height of the header that stays at the top while the page scrolls (foundation.js
     measures it); sticky elements of the modules keep clear of it. */
  --lp-header-height: 0px;
}
/* The desktop sizes of the type tokens apply above 1024px, the mobile ones up to 1024px, as
   the kickstarter's typo-font-size(desktop, mobile) sets them. */
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular, 400);
  font-size: 62.5%;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-background);
  --lp-em: 1em;
  --fs-h1: calc(var(--fs-h1-desktop, 36) * 0.1em);
  --fs-h2: calc(var(--fs-h2-desktop, 29) * 0.1em);
  --fs-h3: calc(var(--fs-h3-desktop, 23) * 0.1em);
  --fs-text: calc(var(--fs-text-desktop, 17) * 0.1em);
  --fs-small: calc(var(--fs-small-desktop, 15) * 0.1em);
  --space-1: calc(0.4em * var(--space-scale, 1));
  --space-2: calc(0.8em * var(--space-scale, 1));
  --space-3: calc(1.2em * var(--space-scale, 1));
  --space-4: calc(1.6em * var(--space-scale, 1));
  --space-5: calc(2.4em * var(--space-scale, 1));
  --space-6: calc(3.2em * var(--space-scale, 1));
  --space-7: calc(4.8em * var(--space-scale, 1));
  --space-8: calc(7.2em * var(--space-scale, 1));
  /* The design tokens set --space-section-scale when the style profile fixes the white space.
     Every section has it above and below, so two neighbours of the same background stand
     twice this apart. */
  --space-section: calc(8.8em * var(--space-section-scale, 1));
  --container: calc(var(--wrap, 1280) * 0.1em);
  --container-default: calc(var(--wrap, 1280) * 0.1em);
  --gutter: 2.5em;
  --radius: calc(var(--radius-size, 12) * 0.1em);
  --shadow: 0 var(--lp-em) calc(3 * var(--lp-em)) rgb(0 0 0 / 0.08);
}
@media (max-width: 1600px) {
  body {
    font-size: 56.3%;
  }
}
@media (max-width: 1366px) {
  body {
    font-size: 50%;
  }
}
@media (max-width: 1024px) {
  body {
    font-size: 62.5%;
    --fs-h1: calc(var(--fs-h1-mobile, 19) * 0.1em);
    --fs-h2: calc(var(--fs-h2-mobile, 17) * 0.1em);
    --fs-h3: calc(var(--fs-h3-mobile, 15) * 0.1em);
    --fs-text: calc(var(--fs-text-mobile, 14) * 0.1em);
    --fs-small: calc(var(--fs-small-mobile, 13) * 0.1em);
    --space-section: calc(6.4em * var(--space-section-scale, 1));
  }
}
@media (max-width: 767px) {
  body {
    --space-section: calc(4.8em * var(--space-section-scale, 1));
  }
}
@media (max-width: 350px) {
  body {
    font-size: 56.3%;
  }
}
@media (max-width: 320px) {
  body {
    font-size: 50%;
  }
}
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
/* A logo keeps its proportions whatever width and height a module gives it. One drawn in a
   dark colour 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). A
   colourful logo carries no data-ink, and the class lp-logo--original keeps any logo in its
   own colours. */
img.lp-logo {
  object-fit: contain;
}
img.lp-logo[data-invert]:not(.lp-logo--original),
.m--header[data-header-overlay]
  img.lp-logo[data-ink="dark"]:not(.lp-logo--original) {
  filter: brightness(0) invert(1);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-headings, 700);
  color: inherit;
}
/* Text elements carry their size themselves; the boxes around them stay on the 10px base.
   Without a class of their own, headings take the size of their level and running text the
   text size. :where() leaves every module rule the stronger one. Embedded markup sizes itself
   and stays out: DynForms (the kickstarter's own form, on its 10px base with em inside, its
   pop-ups at the end of the body) and the lightbox. */
:where(h1):not(
  :where(
    .lp-dynform *,
    #BN-dynform--BN-dynform-v3__request-lp *,
    .lg-container *
  )
) {
  font-size: var(--fs-h1);
}
:where(h2):not(
  :where(
    .lp-dynform *,
    #BN-dynform--BN-dynform-v3__request-lp *,
    .lg-container *
  )
) {
  font-size: var(--fs-h2);
}
:where(h3, h4, h5, h6):not(
  :where(
    .lp-dynform *,
    #BN-dynform--BN-dynform-v3__request-lp *,
    .lg-container *
  )
) {
  font-size: var(--fs-h3);
}
:where(
  p,
  li,
  dt,
  dd,
  blockquote,
  figcaption,
  address,
  label,
  legend,
  summary,
  caption,
  th,
  td,
  button,
  input,
  select,
  textarea
):not(
  :where(
    .lp-dynform *,
    #BN-dynform--BN-dynform-v3__request-lp *,
    .lg-container *
  )
) {
  font-size: var(--fs-text);
}
p {
  margin: 0 0 var(--space-4);
}
a {
  color: var(--c-primary);
}
b,
strong {
  font-weight: var(--fw-bold, 700);
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-weight: inherit;
}
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}
::selection {
  background: var(--c-primary-surface, var(--c-primary));
  color: var(--c-on-primary);
}

.h1 {
  font-size: var(--fs-h1);
}
.h2 {
  font-size: var(--fs-h2);
}
.h3 {
  font-size: var(--fs-h3);
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-bold, 700);
  color: var(--c-primary);
  margin-bottom: var(--space-3);
}
.lead {
  font-size: calc(var(--fs-text) * 1.18);
}
.text-small {
  font-size: var(--fs-small);
}
.text-muted {
  color: var(--c-muted);
}

/* The three wraps of the kickstarter (data-wrap-width large, medium, small) with its gutter.
   The 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: calc(var(--wrap-narrow, 835) * var(--lp-em) / 10);
}
.container--wide {
  --container: calc(var(--wrap-wide, 1920) * var(--lp-em) / 10);
}
/* 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. */
/* The inset comes from the wide container; with content-box a max-width on the same element
   limits the text, not text and inset together, which would squeeze it to a few words. */
.content-edge {
  box-sizing: content-box;
  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;
}
/* Over the shade the bar's text is light whatever the primary colour: a light primary (sand,
   gold) takes dark text on its solid bar, which would vanish in the shade. Modules colour the
   bar with var(--c-on-primary), so it follows the background of each state. The solid bar is
   the primary's surface shade, on which that text is readable (ReadableColor::surface()). */
.m--header[data-header-overlay]:not(.is-scrolled) {
  --c-on-primary: #fff;
}
.m--header[data-header-overlay]::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-4 * var(--lp-em));
  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-surface, var(--c-primary));
  box-shadow: 0 2px calc(1.6 * var(--lp-em)) 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;
  }
}
/* On phones logo, language switch and enquiry button share one narrow row: the group with the
   language switch keeps its width and the logo shrinks into the rest, so a wide logo never
   runs under the switch. A group that holds the logo too is the whole bar and stays as it is.
   The section classes outrank the module's own sizing of the bar's parts. */
@media (max-width: 767px) {
  .m.m--header :has(> .lp-lang):not(:has(img.lp-logo, .lp-logo-text)) {
    flex-shrink: 0;
    min-width: max-content;
  }
  .m.m--header :has(> img.lp-logo),
  .m.m--header img.lp-logo {
    min-width: 0;
  }
  .m.m--header img.lp-logo {
    max-width: 100%;
  }
}
/* A header whose bar floats over the top of the hero (pattern header.floating): out of the
   page flow, so the hero starts at the top edge of the page, and without a background of
   its own, so only the module's bar shows. On phones it scrolls away with the hero, as every
   header does there; from desktop width on it stays at the top. */
.m.m--header[data-header-float] {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  background: none;
}
@media (min-width: 1025px) {
  .m.m--header[data-header-float] {
    position: fixed;
  }
}
/* 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: 1025px) {
  .m.m--header:not([data-header-overlay]):not([data-header-float]):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: calc(4.8 * var(--lp-em));
  padding: calc(1.2 * var(--lp-em)) calc(2.4 * var(--lp-em));
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold, 700);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
/* The kickstarter's button lifts with a soft shadow. */
.btn:hover {
  transform: translateY(calc(-0.2 * var(--lp-em)));
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.1);
}
/* Calm buttons on phones, as on the Brandnamic landing pages, with a label of at least 14px. */
@media (max-width: 767px) {
  .btn {
    min-height: calc(4.4 * var(--lp-em));
    padding: calc(1 * var(--lp-em)) calc(1.8 * var(--lp-em));
    font-size: max(var(--fs-small), 1.4 * var(--lp-em));
  }
}
.btn--primary {
  background: var(--c-primary);
  color: var(--c-on-primary-button, 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: calc(0.32 * var(--lp-em)) calc(1.04 * var(--lp-em));
  border-radius: 999px;
  background: var(--c-background);
  font-size: calc(var(--fs-small) * 0.85);
  font-weight: var(--fw-bold, 700);
}
.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: calc(12.8 * var(--lp-em));
  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: calc(4 * var(--lp-em));
  height: calc(4 * var(--lp-em));
  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: calc(35.2 * var(--lp-em));
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: center;
}
.price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(0.48 * var(--lp-em));
}
/* 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: calc(var(--fs-text) * 1.3);
  color: inherit;
}
.price__from,
.price__unit {
  font-size: var(--fs-small);
  color: inherit;
}
.u-hidden {
  display: none;
}
/* Hidden on screen, read by screen readers (the kickstarter's .visuallyhidden from the
   HTML5 Boilerplate): a long text does not wrap word by word, and nothing of it shows. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  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%, 38 * var(--lp-em));
  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 desktop a slider shows whole slides: one cut at the edge of the content looks like a
   mistake, and the buttons and the counter show that there are more. */
@media (min-width: 1025px) {
  [data-slider-track] {
    grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3);
  }
}
/* On phones and tablets 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: 1024px) {
  .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) {
  /* The frame owns the card width and the gap of this row on phones, the same on every
     page: modules may not use !important, so a width or gap of their own never wins. */
  .m [data-list][data-list-mobile="slider"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88% !important;
    gap: var(--space-3) !important;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .m [data-list][data-list-mobile="slider"] > * {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    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: calc(0.3 * var(--lp-em));
  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;
}
/* The bar stays when the editor's device switch widens a preview that started as a phone. */
@media (min-width: 768px) {
  .lp-list-progress {
    display: none;
  }
}

/* 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;
}
/* slideshow() with one image renders it without the slideshow around it. It fills its box all
   the same: without a width of its own an image keeps its pixel width (an upload of 1600px),
   and a band meant to span the screen would end before the edge of a wider one. */
.lp-slideshow-image {
  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: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.7);
  background: rgb(0 0 0 / 0.25);
  color: #fff;
  font-size: calc(1.92 * var(--lp-em));
  cursor: pointer;
  backdrop-filter: blur(calc(0.4 * var(--lp-em)));
}
/* 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(calc(0.4 * var(--lp-em)));
  font-size: var(--fs-small);
}
.lp-slideshow > .lp-slideshow__controls button {
  width: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  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),
    (100% - var(--wrap-wide, 1920) * var(--lp-em) / 10) / 2 + var(--gutter)
  );
  bottom: var(--space-5);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}
@media (min-width: 1025px) {
  .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: calc(4.8 * var(--lp-em));
  height: calc(4.8 * var(--lp-em));
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  cursor: pointer;
  font-size: calc(1.92 * var(--lp-em));
}

/* 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: calc(0.88 * var(--lp-em)) calc(1.76 * var(--lp-em));
  border-radius: 999px;
  cursor: pointer;
}
[data-tab][aria-selected="true"] {
  background: var(--c-primary-surface, var(--c-primary));
  color: var(--c-on-primary);
  border-color: var(--c-primary-surface, var(--c-primary));
}

/* Dialog: <dialog class="lp-dialog" id="..."> opened by [data-dialog-open="id"] */
.lp-dialog {
  width: min(100% - 3.2 * var(--lp-em), 86 * var(--lp-em));
  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: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  border-radius: 50%;
  border: 0;
  background: var(--c-surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: calc(2.24 * var(--lp-em));
}

/* The details of a room or an offer (details(), DetailDialog): the images beside the text
   from 1025px, above it below; the close button and, at the end of the text, the price and the
   enquiry button stay in view while the dialog scrolls. On phones it fills the screen. It sits
   inside the card that opens it, so it sets back what it would inherit from there. */
.lp-details {
  width: min(100% - 3.2 * var(--lp-em), 120 * var(--lp-em));
  max-height: min(90dvh, 96 * var(--lp-em));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
}
.lp-details__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
}
.lp-details__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  margin: var(--space-3);
  border: 0;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.lp-details__close svg {
  width: calc(2 * var(--lp-em));
  height: calc(2 * var(--lp-em));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* Below the images the text fills the rest of a dialog as tall as the screen, so the price
   and the enquiry button sit at its bottom edge. */
.lp-details__content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100%;
}
.lp-details--text-only .lp-details__content {
  grid-template-rows: minmax(0, 1fr);
}
.lp-details__media .lp-slideshow,
.lp-details__media picture,
.lp-details__media img {
  display: block;
  width: 100%;
}
.lp-details__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5) var(--space-5) 0;
}
.lp-details--text-only .lp-details__body {
  padding-top: var(--space-7);
}
.lp-details__title {
  margin: 0;
  padding-right: calc(4.4 * var(--lp-em));
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: 1.2;
  hyphens: auto;
}
.lp-details__subtitle {
  margin: 0;
  color: var(--c-muted);
}
.lp-details__facts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-details__facts li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.lp-details__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-text);
}
.lp-details__included ul {
  margin: 0;
  padding-left: 1.2em;
}
.lp-details__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
@media (max-width: 1024px) {
  .lp-details__media img {
    max-height: 56dvh;
    object-fit: cover;
  }
}
@media (min-width: 1025px) {
  .lp-details__content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
  }
  .lp-details--text-only .lp-details__content {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(76 * var(--lp-em));
  }
  .lp-details__media {
    position: sticky;
    top: 0;
  }
  .lp-details__body {
    min-height: 100%;
    padding: var(--space-7) var(--space-7) 0;
  }
}
@media (max-width: 767px) {
  .lp-details {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}
/* On a portal page a room or an offer names its hotel. */
.lp-details__hotel {
  margin: 0;
  font-weight: 600;
}

/* The detail area of a portal's member hotels (hotel_details(), HotelDetail) below a module's
   list of hotels: a row of all hotels, then the chosen one with its info, offers, rooms and
   location in tabs. Like the detail dialogs it sets back what it would inherit from the
   module around it. Its column (minmax(0, 1fr)) keeps the row of hotels within the width
   instead of growing with it. */
.lp-hotel-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  color: var(--c-text);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
}
.lp-hotel-detail[hidden] {
  display: none;
}
.lp-hotel-detail__icon {
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The row of hotels keeps its scrollbar hidden: the arrows page through it, and "all hotels"
   unfolds it into a list (data-unfolded). Arrows and toggle show only while the row holds
   more hotels than fit (data-overflows); foundation.js sets both. On phones the toggle takes
   a line of its own below the row. */
.lp-hotel-detail__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.lp-hotel-detail__strip {
  display: flex;
  flex: 1 1 0;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.lp-hotel-detail__strip::-webkit-scrollbar {
  display: none;
}
.lp-hotel-detail__arrow {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}
.lp-hotel-detail__all {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(4.4 * var(--lp-em));
  margin-inline-start: auto;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--c-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.lp-hotel-detail__all .lp-hotel-detail__icon {
  transition: transform 0.2s ease;
}
.lp-hotel-detail__all[aria-expanded="true"] .lp-hotel-detail__icon {
  transform: rotate(180deg);
}
.lp-hotel-detail__switch[data-overflows] .lp-hotel-detail__arrow {
  display: grid;
}
.lp-hotel-detail__switch:is([data-overflows], [data-unfolded])
  .lp-hotel-detail__all {
  display: inline-flex;
}
.lp-hotel-detail__switch[data-unfolded] .lp-hotel-detail__arrow {
  display: none;
}
.lp-hotel-detail__switch[data-unfolded] .lp-hotel-detail__strip {
  display: grid;
  flex-basis: 100%;
  order: 2;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 24 * var(--lp-em)), 1fr)
  );
  overflow: visible;
}
.lp-hotel-detail__pick {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(27.2 * var(--lp-em));
  min-height: calc(4.4 * var(--lp-em));
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.25;
  text-align: start;
  scroll-snap-align: start;
  cursor: pointer;
}
.lp-hotel-detail__switch[data-unfolded] .lp-hotel-detail__pick {
  max-width: none;
}
.lp-hotel-detail__pick[aria-current="true"] {
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}
.lp-hotel-detail__pick img {
  flex-shrink: 0;
  width: calc(4 * var(--lp-em));
  height: calc(4 * var(--lp-em));
  border-radius: calc(var(--radius) / 2);
  object-fit: cover;
}
.lp-hotel-detail__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
  color: var(--c-text);
  font-size: calc(var(--fs-small) * 0.8);
  font-weight: 600;
  line-height: 1;
}
.lp-hotel-detail__panel {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--c-surface);
}
/* While a hotel loads, the panel keeps room for it. */
.lp-hotel-detail__panel[aria-busy="true"] {
  min-height: calc(24 * var(--lp-em));
}
.lp-hotel-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.lp-hotel-detail__title {
  margin: 0;
}
.lp-hotel-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  color: var(--c-muted);
}
.lp-hotel-detail__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-background);
  color: var(--c-text);
  cursor: pointer;
}
/* A segmented control instead of the pills of [data-tab], which it sets back: equal segments
   on a tinted track, two per row on phones. */
.lp-hotel-detail__tabs {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 13.6 * var(--lp-em)), 1fr)
  );
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  border-radius: calc(var(--radius) + var(--space-1));
  background: color-mix(in srgb, var(--c-text) 6%, var(--c-surface));
}
.lp-hotel-detail__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(4.6 * var(--lp-em));
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--c-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.lp-hotel-detail__tab:hover {
  color: var(--c-text);
}
.lp-hotel-detail__tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--c-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  color: var(--c-text);
  font-weight: 600;
}
.lp-hotel-detail__tab[aria-selected="true"] .lp-hotel-detail__icon {
  color: var(--c-primary);
}
.lp-hotel-detail__tab-panel {
  display: grid;
  gap: var(--space-5);
}
.lp-hotel-detail__tab-panel[hidden] {
  display: none;
}
/* The info: logo, texts, facts and actions beside the images from 1025px, above them below;
   the first image large, the next ones as tiles. */
.lp-hotel-detail__info {
  display: grid;
  gap: var(--space-6);
}
.lp-hotel-detail__about {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}
.lp-hotel-detail__logo {
  display: block;
  width: auto;
  max-width: calc(20 * var(--lp-em));
  max-height: calc(7.2 * var(--lp-em));
  object-fit: contain;
}
.lp-hotel-detail__lead {
  font-size: calc(var(--fs-text) * 1.1);
}
.lp-hotel-detail__text {
  max-width: 72ch;
}
.lp-hotel-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-3) 0;
  border-block: 1px solid var(--c-border);
  list-style: none;
}
.lp-hotel-detail__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lp-hotel-detail__facts .lp-hotel-detail__icon {
  color: var(--c-primary);
}
.lp-hotel-detail__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--space-2);
}
.lp-hotel-detail__images img:first-child {
  grid-column: 1 / -1;
}
/* Labels stay on one line; a row too narrow for two buttons puts the second below. */
.lp-hotel-detail .btn {
  white-space: nowrap;
}
.lp-hotel-detail__images img,
.lp-hotel-detail__card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.lp-hotel-detail__images img {
  border-radius: calc(var(--radius) / 2);
}
.lp-hotel-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.lp-hotel-detail__cards {
  display: grid;
  gap: var(--space-4);
}
.lp-hotel-detail__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-background);
}
.lp-hotel-detail__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.lp-hotel-detail__card-title {
  margin: 0;
  font-size: calc(var(--fs-text) * 1.05);
}
.lp-hotel-detail__card-facts {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-small);
}
.lp-hotel-detail__card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
}
.lp-hotel-detail__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* The address beside the map from 1025px, above it below. */
.lp-hotel-detail__location {
  display: grid;
  gap: var(--space-5);
}
.lp-hotel-detail__address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.lp-hotel-detail__address address {
  font-style: normal;
}
.lp-hotel-detail__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}
/* Until the guest loads Google Maps (data-map-load), the map's place says why it is empty. */
.lp-hotel-detail__map {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
}
.lp-hotel-detail__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.lp-hotel-detail__map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
}
.lp-hotel-detail__map-consent .lp-hotel-detail__icon {
  width: calc(4 * var(--lp-em));
  height: calc(4 * var(--lp-em));
  color: var(--c-primary);
}
.lp-hotel-detail__map-consent p {
  max-width: 32ch;
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-small);
}
/* Embeds (embed()): a calm box with a notice and a button until the guest loads the map,
   video or page, which then fills it (embeds.js). The module sizes the box on its own class;
   the box keeps the map's own layers (Leaflet's controls) below the page header. */
.lp-embed {
  position: relative;
  display: grid;
  isolation: isolate;
  width: 100%;
  aspect-ratio: var(--lp-embed-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
  color: var(--c-text);
}
.lp-embed[data-embed-fixed] {
  aspect-ratio: auto;
}
.lp-embed__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
}
.lp-embed__icon {
  width: calc(4 * var(--lp-em));
  height: calc(4 * var(--lp-em));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--c-primary);
}
.lp-embed__notice {
  max-width: 36ch;
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-small);
}
.lp-embed__frame {
  position: absolute;
  inset: 0;
}
.lp-embed__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.lp-embed.is-loaded .lp-embed__consent {
  visibility: hidden;
}
/* Only in the editor's preview: an embed that lacks its settings. */
.lp-embed--missing {
  place-items: center;
  padding: var(--space-5);
  border: 2px dashed var(--c-border);
  background: var(--c-surface);
  text-align: center;
}
/* The marker of a Leaflet map: a pin in the primary colour. Leaflet places the element with
   a transform of its own, so the pin is drawn by the pseudo-element. */
.lp-embed__marker::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--c-surface);
  border-radius: 50% 50% 50% 0;
  background: var(--c-primary);
  box-shadow: var(--shadow);
  transform: rotate(-45deg);
}
@media (max-width: 767px) {
  .lp-hotel-detail__all {
    flex-basis: 100%;
    order: 1;
  }
}
@media (min-width: 768px) {
  .lp-hotel-detail__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px) {
  .lp-hotel-detail__panel {
    padding: var(--space-6);
  }
  .lp-hotel-detail__info {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .lp-hotel-detail__location {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
  .lp-hotel-detail__map {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 1367px) {
  .lp-hotel-detail__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.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-legal {
  align-items: center;
}
/* The official logo at the size of the Brandnamic websites; the link's height makes it a
   full tap target. It closes the legal line apart from the links, as in the footer of the
   Brandnamic kickstarter: at the end of the row where the list of legal links takes the rest
   of it (the footer mechanics ask for that), on phones on a line of its own, aligned like the
   links. */
.lp-legal .lp-powered {
  margin-inline-start: auto;
  padding-inline-start: var(--space-5);
}
@media (max-width: 767px) {
  .lp-legal .lp-powered {
    display: flex;
    flex-basis: 100%;
    justify-content: inherit;
    margin-inline-start: 0;
    padding-inline-start: 0;
  }
}
.lp-powered a {
  display: inline-flex;
  align-items: center;
  min-height: calc(4.4 * var(--lp-em));
}
img.lp-powered__logo {
  width: calc(11 * var(--lp-em));
  height: auto;
}
@media (max-width: 767px) {
  img.lp-powered__logo {
    width: calc(9 * var(--lp-em));
  }
}
.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: calc(4.4 * var(--lp-em));
    padding-inline: calc(0.8 * var(--lp-em));
  }
}
/* Rich text (the kickstarter's rteText): the wrapper carries the text size, which its blocks
   take over, so a module sets a smaller or larger size on the wrapper alone; headings keep the
   size of their level. Its blocks stand one line of text apart. */
.lp-richtext {
  font-size: var(--fs-text);
}
.lp-richtext > :not(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
}
.lp-richtext > * {
  margin: 1em 0;
}
.lp-richtext > :first-child {
  margin-top: 0;
}
.lp-richtext > :last-child {
  margin-bottom: 0;
}
.lp-richtext :is(ul, ol) {
  padding-left: 1.2em;
}
.lp-richtext a {
  color: inherit;
  text-decoration: underline;
}
/* Text the building blocks print on its own, outside a paragraph or a list item. */
:where(
  .lp-website-link,
  .lp-logo-text,
  .lp-site-nav__label,
  .price,
  a[data-email],
  a[href^="tel:"]
) {
  font-size: var(--fs-text);
}

.lp-skip-link {
  position: absolute;
  left: calc(1.6 * var(--lp-em));
  top: calc(-6.4 * var(--lp-em));
  z-index: 100;
  background: var(--c-primary-surface, var(--c-primary));
  color: var(--c-on-primary);
  padding: calc(1.2 * var(--lp-em)) calc(1.6 * var(--lp-em));
  border-radius: var(--radius);
  font-size: var(--fs-text);
}
.lp-skip-link:focus {
  top: calc(1.6 * var(--lp-em));
}
/* 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 calc(1.6 * var(--lp-em)) calc(1.6 * var(--lp-em));
  z-index: 40;
  display: none;
}
.lp-sticky-cta .btn {
  width: 100%;
  box-shadow: var(--shadow);
}
.lp-sticky-cta--with-links {
  inset: auto calc(1 * var(--lp-em)) calc(1 * var(--lp-em));
  align-items: center;
  gap: var(--space-1);
  height: calc(5.2 * var(--lp-em));
  padding: calc(0.5 * var(--lp-em));
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 4px calc(1.6 * var(--lp-em)) rgb(0 0 0 / 0.16);
}
.lp-sticky-cta--with-links .lp-sticky-cta__request {
  flex-shrink: 0;
  width: auto;
  min-height: calc(4.2 * var(--lp-em));
  padding-inline: var(--space-4);
  font-size: max(var(--fs-small), 1.4 * var(--lp-em));
  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: calc(4.2 * var(--lp-em));
  color: inherit;
  font-size: max(var(--fs-small), 1.4 * var(--lp-em));
  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: calc(8.8 * var(--lp-em));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--c-text);
  color: #fff;
  padding: calc(1.28 * var(--lp-em)) calc(1.92 * var(--lp-em));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--fs-text);
}
/* The chosen room or offer above the enquiry form (foundation.js), for a request module without
   a [data-request-selection] of its own: the compact form leaves out its room and offer
   pickers, so the guest sees here what the enquiry is about. */
.lp-request-selection {
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--lp-em));
  margin-bottom: var(--space-4);
  padding: calc(1.2 * var(--lp-em)) calc(1.6 * var(--lp-em));
  border-left: 3px solid var(--c-primary);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
}
.lp-request-selection[hidden] {
  display: none;
}
.lp-request-selection__label {
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.lp-request-selection__name {
  font-size: var(--fs-text);
  font-weight: var(--fw-bold, 700);
}
/* Thumbnail mode (?lp-thumbnail, publish-time screenshots): no overlays. */
[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. DynForms mounts the room and offer
   pop-ups in its own container at the end of <body>, outside every section: they always take
   these defaults. form-bg paints the pop-ups and the select menus, so it stays opaque. */
.lp-dynform {
  min-height: calc(42 * var(--lp-em));
}
.lp-dynform,
#BN-dynform--BN-dynform-v3__request-lp {
  --form-clr-form-bg: var(--c-background);
  --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;
}
/* The inline form lies on the section's own background; the selector outranks the
   DynForms stylesheet, which loads later. */
.lp-dynform .BN-dynform[data-form] .BN-dynform__wrap {
  background-color: transparent;
}
.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%, 98 * var(--lp-em));
  margin-inline: auto;
}
/* The form's template hides blocks by the class "hidden" (the offer, the room picker of the
   trip), which the Brandnamic websites define globally and the form itself does not. */
.lp-dynform .BN-dynform .hidden {
  display: none;
}
/* A hotel chosen in a portal's form lies under a dark veil, on which DynForms writes its name
   in the colour of the button text: white whatever colour the page's buttons have. */
.lp-dynform
  .BN-dynform[data-form="request"]
  .BN-dynform__selection[data-selection="hotels"][data-act="1"]
  :is(.BN-dynform__selection__title, .BN-dynform__selection__subtitle) {
  color: #fff;
}
.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: calc(7.2 * var(--lp-em));
  height: calc(7.2 * var(--lp-em));
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: calc(3.2 * var(--lp-em));
}
.lp-preview-warning {
  background: #fff3cd;
  color: #5c4400;
  padding: calc(0.96 * var(--lp-em)) calc(1.6 * var(--lp-em));
  font-size: var(--fs-small);
}
.lp-preview-warning p {
  margin: 0;
}
.lp-module-error {
  margin: calc(1.6 * var(--lp-em));
  padding: calc(1.6 * var(--lp-em));
  border: 2px dashed #c0392b;
  color: #c0392b;
  background: #fdecea;
  border-radius: calc(0.8 * var(--lp-em));
  font-family: monospace;
  font-size: var(--fs-small);
}
/* 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%, 38.4 * var(--lp-em));
  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: calc(3.6 * var(--lp-em));
  height: calc(3.6 * var(--lp-em));
  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: calc(1.12 * var(--lp-em));
  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: calc(15 * var(--lp-em));
}
.m[data-space-bottom="small"] {
  --space-below: calc(5 * var(--lp-em));
}
.m[data-space-bottom="none"] {
  --space-below: 0px;
}
@media (max-width: 1024px) {
  .m[data-space-bottom="large"] {
    --space-below: calc(7.5 * var(--lp-em));
  }
  .m[data-space-bottom="small"] {
    --space-below: calc(2.5 * var(--lp-em));
  }
}
.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: calc(4.4 * var(--lp-em));
  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: calc(16 * var(--lp-em));
  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: calc(4.4 * var(--lp-em));
  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: calc(5 * var(--lp-em));
  bottom: calc(5 * var(--lp-em));
  z-index: 70;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 calc(1 * var(--lp-em)) calc(3 * var(--lp-em)) 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(44 * var(--lp-em), calc(100vw - 10 * var(--lp-em)));
  padding: var(--space-5);
}
.lp-request-popup__check {
  width: calc(3.2 * var(--lp-em));
  height: calc(3.2 * var(--lp-em));
  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: calc(0.2 * var(--lp-em)) 0 0;
  font-size: var(--fs-small);
}
.lp-request-popup__close,
.lp-exit-intent__close {
  display: grid;
  place-items: center;
  width: calc(4.4 * var(--lp-em));
  height: calc(4.4 * var(--lp-em));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.lp-request-popup__close {
  margin: calc(-1.2 * var(--lp-em)) calc(-1.2 * var(--lp-em)) 0 0;
}
.lp-request-popup__close svg,
.lp-exit-intent__close svg {
  width: calc(1.8 * var(--lp-em));
  height: calc(1.8 * var(--lp-em));
  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: calc(4.4 * var(--lp-em));
  padding: calc(0.8 * var(--lp-em)) calc(1.6 * var(--lp-em));
}
.lp-exit-intent {
  width: min(60 * var(--lp-em), calc(100vw - 10 * var(--lp-em)));
  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: var(--fs-h3);
  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: calc(1 * var(--lp-em));
    bottom: calc(7.2 * var(--lp-em));
    width: calc(100vw - 2 * var(--lp-em));
  }
}

/* Print, as the kickstarter's print styles: black text without backgrounds and shadows, no
   page frame around the content (bars, pop-ups, sticky header), images and table rows kept
   whole, headings kept with their text. */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  video,
  .lp-sticky-cta,
  .lp-request-popup,
  .lp-exit-intent,
  .lp-toast,
  .lp-skip-link,
  .lp-slideshow__controls,
  .lp-load-more,
  [data-slider-prev],
  [data-slider-next] {
    display: none !important;
  }
  .m--header {
    position: static !important;
  }
  @page {
    margin: 0.5cm;
  }
}