/*
 * WUTTRAUM Blocks
 * Loaded only on pages with the template "WUTTRAUM Blocks" and on rooms rendered from blocks.
 * Mobile first: base = phone (360px+), then 768px (tablet) and 1025px (desktop).
 * Fonts (Bangers, Teko) come from the theme's main.css.
 */

.wtr-page {
  --wtr-yellow: #F2B707;
  --wtr-yellow-hover: #D9A406;
  --wtr-yellow-active: #C69400;
  --wtr-bg: #0E1828;
  --wtr-card: #19263C;
  --wtr-line: #3D5479;
  --wtr-text: #BCCEEB;
  --wtr-white: #FFFFFF;
  --wtr-muted: #8494B2;      /* grey marks in the comparison */
  --wtr-grey: #2C3138;       /* note box inside card details */
  --wtr-grey-dark: #22272E;  /* highlighted comparison column */
  --wtr-font-heading: "Bangers", Helvetica, Arial, sans-serif;
  --wtr-font-text: "Teko", Helvetica, Arial, sans-serif;

  --wtr-header-offset: 60px; /* theme header is position: fixed */
  --wtr-gutter: 16px;
  --wtr-max: 1140px;
  --wtr-radius: 16px;        /* desktop: 12px */
  --wtr-radius-lg: 20px;
  --wtr-space: 1.875rem;     /* space between blocks */
  --wtr-cards-gap: 1rem;
  --wtr-stripe: 0.8rem;      /* width of one construction stripe */
  --wtr-stripe-height: 1.125rem;

  padding-top: var(--wtr-header-offset);
  overflow-x: clip;
  background-color: var(--wtr-bg);
  color: var(--wtr-white);
  font-family: var(--wtr-font-text);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0; /* the mockup has no letter spacing (the theme sets -0.03em on html) */
}

.wtr-page *,
.wtr-page *::before,
.wtr-page *::after {
  box-sizing: border-box;
}

.wtr-page img,
.wtr-page video {
  display: block;
  max-width: 100%;
  height: auto;
}

.wtr-page [hidden] {
  display: none;
}

/* Zero specificity (:where), so the block classes below always win */
:where(.wtr-page) :where(p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}

:where(.wtr-page) :where(ul, ol) {
  list-style: none;
}

.wtr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Layout */

.wtr-container {
  width: 100%;
  max-width: calc(var(--wtr-max) + 2 * var(--wtr-gutter));
  margin: 0 auto;
  padding: 0 var(--wtr-gutter);
}

.wtr-section {
  padding: var(--wtr-space) 0;
}

/* Anchor ID: a link #termin stops the block below the fixed theme header (wtr-blocks.js scrolls smoothly) */
.wtr-section[id] {
  scroll-margin-top: calc(var(--wtr-header-offset) + 1rem);
}

.wtr-section[id]:focus {
  outline: none;
}

.wtr-section + .wtr-section {
  padding-top: 0;
}

/* First block sits right under the theme header */
.wtr-page > .wtr-section:first-child {
  padding-top: 1.25rem;
}

/* Typography */

.wtr-heading {
  margin-bottom: 1.125rem;
}

.wtr-eyebrow {
  margin-bottom: 0.25rem;
  font-family: var(--wtr-font-text);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--wtr-text);
}

.wtr-title,
.wtr-card__title,
.wtr-step__title,
.wtr-band__title {
  overflow-wrap: break-word;
  hyphens: manual;
}

.wtr-title {
  margin: 0;
  font-family: var(--wtr-font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--wtr-white);
}

/* One line of the heading field (Enter). Small gap between them, e.g. yellow part / white part */
.wtr-title__line {
  display: block;
}

.wtr-title__line + .wtr-title__line {
  margin-top: 0.1em;
}

/* Hero: a bit more air, the first screen heading is the biggest */
.wtr-hero .wtr-title {
  line-height: 1.15;
}

.wtr-hero .wtr-title__line + .wtr-title__line {
  margin-top: 0.2em;
}

.wtr-hl {
  color: var(--wtr-yellow);
}

.wtr-text {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--wtr-white);
}

.wtr-text p + p,
.wtr-details__text p + p,
.wtr-faq__answer p + p,
.wtr-step__text p + p,
.wtr-band__text p + p {
  margin-top: 0.6em;
}

.wtr-subtitle {
  max-width: 33rem;
  margin-top: 0.5rem;
}

.wtr-icon {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.wtr-stars {
  display: inline-flex;
  flex: none;
  gap: 0.15em;
  color: var(--wtr-yellow);
}

.wtr-stars__star {
  width: 1em;
  height: 1em;
}

.wtr-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem 0.2rem;
  border-radius: 50px;
  background-color: var(--wtr-yellow);
  color: var(--wtr-bg);
  font-family: var(--wtr-font-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.wtr-badge--small {
  padding: 0.3rem 0.55rem 0.15rem;
  font-size: 0.875rem;
}

/* Buttons */

.wtr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 50px;
  padding: 0.6rem 1.25rem 0.4rem;
  border: 1px solid var(--wtr-yellow);
  border-radius: 50px;
  background-color: var(--wtr-yellow);
  color: var(--wtr-bg);
  font-family: var(--wtr-font-text);
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wtr-btn:hover,
.wtr-btn:focus {
  color: var(--wtr-bg);
}

.wtr-btn:active {
  background-color: var(--wtr-yellow-active);
}

.wtr-btn:focus-visible,
.wtr-tabs__tab:focus-visible,
.wtr-card__toggle:focus-visible,
.wtr-faq__question:focus-visible,
.wtr-reviews__track:focus-visible,
.wtr-quote__link:focus-visible,
.wtr-details__room-link:focus-visible {
  outline: 2px solid var(--wtr-white);
  outline-offset: 3px;
}

.wtr-btn--outline {
  background-color: transparent;
  color: var(--wtr-yellow);
}

.wtr-btn--outline:hover,
.wtr-btn--outline:focus {
  color: var(--wtr-yellow);
}

.wtr-btn--outline:active {
  background-color: rgba(242, 183, 7, 0.15);
}

.wtr-btn--dark {
  border-color: var(--wtr-bg);
  background-color: var(--wtr-bg);
  color: var(--wtr-yellow);
  text-transform: uppercase;
}

.wtr-btn--dark:hover,
.wtr-btn--dark:focus {
  color: var(--wtr-yellow);
}

.wtr-btn--dark:active {
  background-color: #1F2D45;
}

.wtr-btn--dark:focus-visible {
  outline-color: var(--wtr-bg);
}

.wtr-btn--arrow {
  text-transform: none;
}

.wtr-btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.2rem;
}

/* Icon + text box (tips, notes) */

.wtr-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.wtr-note__text {
  min-width: 0;
}

.wtr-note--box {
  align-items: center;
  padding: 0.8rem 0.9rem 0.7rem;
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-card);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
}

.wtr-note--box .wtr-note__icon {
  width: 2.125rem;
  height: 2.125rem;
  color: var(--wtr-yellow);
}

/* ---------------------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------------------ */

.wtr-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.wtr-hero__head {
  position: relative;
  z-index: 1;
  margin-bottom: 1.25rem;
}

.wtr-hero__deco {
  display: none; /* phone: no decoration */
  justify-self: end;
  width: 45%;
  max-width: 11rem;
  margin-right: 1.5rem;
}

.wtr-hero__deco-img {
  width: 100%;
}

.wtr-hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.9375rem;
  overflow: hidden;
  border: 1px solid transparent; /* tablet/desktop: yellow */
  border-radius: var(--wtr-radius-lg);
  background-color: var(--wtr-card);
}

.wtr-hero__media .wtr-hero__img,
.wtr-hero__media .wtr-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wtr-hero__body {
  min-width: 0;
}

.wtr-rating {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9375rem;
  padding: 0.45rem 0.5rem 0.3rem 0.45rem;
  border: 1px solid var(--wtr-yellow);
  border-radius: 50px;
  background-color: var(--wtr-card);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.wtr-rating__stars {
  margin-top: -0.15rem;
  font-size: 1rem;
}

/*
 * Phone only (0.8.0): slightly smaller text, stars and padding, so
 * "5,0 · 170 Google-Bewertungen · 4.700+ Gäste" fits in one line from 360px.
 * Narrower: the text breaks after a "·", lines balanced and centred.
 */
@media (max-width: 767.98px) {
  .wtr-rating {
    gap: 0.4rem;
    padding: 0.4rem 0.45rem 0.25rem 0.4rem;
    font-size: 0.9375rem;
  }

  .wtr-rating__stars {
    font-size: 0.875rem;
  }

  .wtr-rating__text {
    min-width: 0;
    text-align: center;
    text-wrap: balance;
  }

  /* One part between "·": a line break happens only after a "·", not inside a part */
  .wtr-rating__part {
    display: inline-block;
  }
}

.wtr-hero__text {
  margin-bottom: 1.25rem;
}

.wtr-features {
  display: grid;
  gap: 0.75rem;
}

.wtr-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-card);
}

.wtr-feature__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--wtr-yellow);
}

.wtr-feature__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.wtr-feature__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.08;
  color: var(--wtr-yellow);
}

.wtr-feature__text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
}

.wtr-hero__actions {
  display: grid;
  gap: 0.9375rem;
  margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
 * 2. Cards
 * ------------------------------------------------------------------------ */

.wtr-cards__head {
  display: grid;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.wtr-cards__head .wtr-heading {
  margin-bottom: 0;
}

.wtr-cards__aside {
  display: grid;
  gap: 0.75rem;
  max-width: 26rem;
}

.wtr-cards__note {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Phone: the switch above the note */
.wtr-tabs {
  order: -1;
  display: flex;
  gap: 0.25rem;
  padding: 5px;
  border: 1px solid var(--wtr-line);
  border-radius: 50px;
}

.wtr-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 0.5rem 0.75rem 0.25rem;
  border: 0;
  border-radius: 50px;
  background-color: transparent;
  color: var(--wtr-text);
  font-family: var(--wtr-font-text);
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wtr-tabs__tab[aria-selected="true"] {
  background-color: var(--wtr-yellow);
  color: var(--wtr-bg);
}

.wtr-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wtr-cards-gap);
}

.wtr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0.625rem;
  border: 1px solid var(--wtr-card);
  border-radius: var(--wtr-radius-lg);
  background-color: var(--wtr-card);
}

.wtr-card.is-beside {
  align-self: start;
}

.wtr-card__main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.wtr-card__media {
  position: relative;
  aspect-ratio: 325 / 180;
  overflow: hidden;
  border-radius: 12px;
}

.wtr-card__media::after {
  display: none; /* desktop: fade into the card */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 38, 60, 0) 55%, var(--wtr-card) 100%);
  pointer-events: none;
}

.wtr-card__media .wtr-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.wtr-card__badge {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  z-index: 1;
}

.wtr-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0.375rem 0 0;
}

.wtr-card__main > .wtr-card__badge:first-child + .wtr-card__body {
  padding-top: 2.75rem; /* card without photo: room for the badge */
}

/* Name + "Mehr Infos" button side by side */
.wtr-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.wtr-card__title {
  min-width: 0;
  margin: 0;
  font-family: var(--wtr-font-heading);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--wtr-yellow);
}

.wtr-card__text {
  margin-bottom: 0.625rem;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

/* Phone/tablet: three equal columns, as in the mockup */
.wtr-card__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

.wtr-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.wtr-card__age-label {
  margin-right: 0.15rem;
  font-family: var(--wtr-font-heading);
  font-size: 1.875rem;
  letter-spacing: 0.02em;
  color: var(--wtr-yellow);
}

.wtr-card__meta-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.2rem;
  color: var(--wtr-yellow);
}

.wtr-card__foot {
  display: grid;
  gap: 1rem;
  margin-top: auto;
}

/*
 * Price (left) + details button (right), always in one row. When space is short,
 * the caption moves above the price inside the price block; the button stays.
 */
.wtr-card__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Caption + price, then the optional second line (0.8.0). Shrinks before the button does */
.wtr-card__pricing {
  display: grid;
  flex: 0 1 auto;
  gap: 0.2rem;
  min-width: 0;
}

/* Second line, e.g. "ab 60 € pro Person": smaller than the price, light text */
.wtr-card__price-note {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--wtr-text);
  overflow-wrap: break-word;
  text-wrap: balance; /* long line: rows of similar length, no single word left alone */
}

.wtr-card__price {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 0.5rem;
  min-width: 0;
}

.wtr-card__price-label {
  font-size: 1.375rem;
  font-weight: 500;
}

.wtr-card__price-value {
  font-family: var(--wtr-font-heading);
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--wtr-yellow);
}

.wtr-btn--block {
  width: 100%;
  min-height: 40px;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Details button ("Mehr Infos" / "Was drin?"): next to the price, phone and desktop */
.wtr-card__toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  margin-left: auto;
  padding: 0.45rem 0.625rem 0.3rem 0.75rem;
  border: 2px solid var(--wtr-yellow);
  border-radius: 50px;
  background-color: transparent;
  color: var(--wtr-yellow);
  font-family: var(--wtr-font-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Bigger tap area than the visible pill */
.wtr-card__toggle::before {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

/* Open: filled, the "+" turns into "×" */
.wtr-card__toggle[aria-expanded="true"],
.wtr-card__toggle:active {
  background-color: var(--wtr-yellow);
  color: var(--wtr-bg);
}

@media (hover: hover) {
  .wtr-card__toggle:hover {
    background-color: var(--wtr-yellow);
    color: var(--wtr-bg);
  }
}

/* "+" drawn with two bars in the text colour */
.wtr-card__toggle-icon {
  position: relative;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.15rem;
  transition: transform 0.2s ease;
}

.wtr-card__toggle-icon::before,
.wtr-card__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background-color: currentColor;
}

.wtr-card__toggle-icon::after {
  transform: rotate(90deg);
}

.wtr-card__toggle[aria-expanded="true"] .wtr-card__toggle-icon {
  transform: rotate(45deg);
}

/*
 * Soft pulse of the frame, repeated every 4 s while the button is on screen
 * (wtr-blocks.js adds .is-shine). Not while the card is open (button filled, popup open)
 * or the mouse is on the button. The pulse takes the first ~1.3 s, then 2.7 s rest.
 */
.wtr-card__toggle.is-shine {
  animation: wtr-pulse 4s ease-out 0.25s infinite;
}

.wtr-card__toggle.is-shine[aria-expanded="true"],
.wtr-card__toggle.is-shine:hover,
.wtr-card.is-open .wtr-card__toggle.is-shine {
  animation: none;
}

@keyframes wtr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(242, 183, 7, 0.7); }
  32% { box-shadow: 0 0 0 12px rgba(242, 183, 7, 0); }
  100% { box-shadow: 0 0 0 12px rgba(242, 183, 7, 0); }
}

.wtr-card__close-icon {
  width: 1rem;
  height: 1rem;
  margin-top: -0.2rem;
  color: var(--wtr-yellow);
  transform: rotate(180deg);
}

/* Inline mode: details open inside the card, under the booking button */
.wtr-card__details {
  padding: 1.25rem 0 0.625rem;
}

/* "Weniger Infos" at the end of the details (Inline mode; hidden in the other modes, see below) */
.wtr-card__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 1rem 0.3rem;
  border: 1px solid var(--wtr-yellow);
  border-radius: 50px;
  background-color: transparent;
  color: var(--wtr-yellow);
  font-family: var(--wtr-font-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.wtr-card__close-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.wtr-cards:not([data-wtr-details="inline"]) .wtr-card__close {
  display: none;
}

/* Details content */

.wtr-details {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.wtr-details__section {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.wtr-details__heading {
  margin: 0;
  font-family: var(--wtr-font-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wtr-yellow);
}

.wtr-details__text,
.wtr-details__item-text,
.wtr-note--muted,
.wtr-note--check {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.18;
}

.wtr-details__intro {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.18;
}

.wtr-details__list {
  display: grid;
  gap: 0.5rem;
}

.wtr-details__item {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--wtr-line);
  border-radius: 10px;
  background-color: var(--wtr-bg);
}

.wtr-details__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.15rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
}

.wtr-details__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0 0.35rem;
  border-bottom: 1px solid var(--wtr-line);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.15;
}

.wtr-details__price-row:last-child {
  border-bottom: 0;
}

.wtr-details__price-row dd {
  font-weight: 600;
  white-space: nowrap;
  color: var(--wtr-yellow);
}

.wtr-note--muted {
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background-color: var(--wtr-grey);
  color: var(--wtr-yellow);
}

.wtr-note--muted .wtr-note__icon,
.wtr-note--check .wtr-note__icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--wtr-yellow);
}

.wtr-quote {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--wtr-yellow);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-bg);
}

.wtr-quote__stars {
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.wtr-quote__text {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.18;
}

.wtr-quote__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--wtr-text);
}

.wtr-quote__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  color: var(--wtr-text);
  text-decoration: none;
}

.wtr-quote__link:hover,
.wtr-quote__link:focus {
  color: var(--wtr-yellow);
}

.wtr-quote__link-icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.15rem;
}

/* End of the details: link to the room page and small print (new in 0.6.0) */
.wtr-details__room {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
}

.wtr-details__room-link {
  color: var(--wtr-yellow);
  text-decoration: none;
}

.wtr-details__room-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wtr-details__small {
  margin: -0.25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--wtr-text);
  opacity: 0.8;
}

.wtr-cards__tip {
  width: fit-content;
  max-width: 100%;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
 * 3. Steps
 * ------------------------------------------------------------------------ */

.wtr-steps__list {
  display: grid;
  gap: 1rem;
}

.wtr-step {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  overflow: hidden;
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-card);
}

.wtr-step__media {
  margin: -0.875rem -0.75rem 0.25rem;
}

.wtr-step__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wtr-step__head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.wtr-step__number {
  flex: none;
  font-family: var(--wtr-font-heading);
  font-size: 3.75rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--wtr-yellow);
}

.wtr-step__title {
  min-width: 0;
  margin: 0;
  font-family: var(--wtr-font-heading);
  font-size: 2.1875rem;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--wtr-yellow);
}

.wtr-step__text {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.18;
}

.wtr-steps__foot {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.wtr-btn--large {
  min-height: 50px;
}

/* ---------------------------------------------------------------------------
 * 4. Comparison
 * ------------------------------------------------------------------------ */

.wtr-compare__grid {
  display: grid;
  gap: 1rem;
}

.wtr-compare__table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.wtr-compare__table {
  width: 100%;
  table-layout: fixed;
  letter-spacing: 0.01em;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--wtr-white);
}

.wtr-compare__table th,
.wtr-compare__table td {
  padding: 0.85rem 0.25rem 0.65rem;
  vertical-align: middle;
}

.wtr-compare__table thead th {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.wtr-compare__table tbody th,
.wtr-compare__table tbody td {
  border-top: 1px solid var(--wtr-line);
}

.wtr-compare__table tbody tr:last-child > * {
  border-bottom: 1px solid var(--wtr-line);
}

.wtr-compare__table tbody th {
  padding-left: 0;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.015em;
  text-align: left;
}

/* Phone: first column wider, the highlighted one narrower (as in the mockup) */
.wtr-compare__table thead .wtr-compare__label {
  width: 51%;
  padding-left: 0;
  text-align: left;
}

.wtr-compare__table thead th.wtr-compare__hi {
  width: 23%;
}

.wtr-compare__hi {
  background-color: var(--wtr-grey-dark);
}

.wtr-compare__table thead .wtr-compare__hi {
  border-radius: var(--wtr-radius) var(--wtr-radius) 0 0;
}

.wtr-compare__table tbody tr:last-child .wtr-compare__hi {
  border-radius: 0 0 var(--wtr-radius) var(--wtr-radius);
}

.wtr-compare__mark {
  width: 1.625rem;
  height: 1.625rem;
  margin: 0 auto;
  color: var(--wtr-muted);
}

.wtr-compare__hi .wtr-compare__mark {
  color: var(--wtr-yellow);
}

.wtr-compare__tiles {
  display: grid;
  gap: 1rem;
  align-content: space-between;
}

.wtr-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 55px;
  padding: 0.6rem 0.75rem 0.5rem;
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-card);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.1;
}

.wtr-tile__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -0.15rem;
  color: var(--wtr-yellow);
}

.wtr-compare__actions {
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * 5. Booking widget
 * ------------------------------------------------------------------------ */

/*
 * The booking widget (escapenavigator) stretches itself to the full screen width with
 * negative margins – unless a parent clips overflow. Clipping here keeps it exactly as wide
 * as the other blocks. "hidden" first for old browsers without "clip".
 */
.wtr-widget__frame {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.wtr-widget__frame iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Reviews
 * ------------------------------------------------------------------------ */

/* Phone/tablet: the row runs to the right screen edge, the next review peeks in */
.wtr-reviews__track {
  display: flex;
  gap: 0.75rem;
  margin-right: calc(-1 * var(--wtr-gutter));
  padding-right: var(--wtr-gutter);
  padding-bottom: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wtr-line) transparent;
}

.wtr-review {
  display: flex;
  flex: 0 0 74%;
  min-width: 0;
  scroll-snap-align: start;
}

/* Phone/tablet: stars + Google icon at the bottom of the card */
.wtr-review__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-card);
}

.wtr-review__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-bottom: 0.5rem;
}

.wtr-review__rating {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.wtr-review__avatar {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  object-fit: cover;
}

.wtr-review__avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.2rem;
  background-color: #D9D9D9;
  color: var(--wtr-bg);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}

.wtr-review__name {
  min-width: 0;
  padding-top: 0.2rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--wtr-yellow);
}

.wtr-review__stars {
  gap: 0.15em;
  font-size: 1.125rem;
}

.wtr-review__google {
  width: 1.5625rem;
  height: 1.5625rem;
}

.wtr-review__text {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.wtr-reviews__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* More than 3 reviews: heading + arrows in one row (arrows: desktop only, see below) */
.wtr-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.125rem;
}

.wtr-reviews__head .wtr-heading {
  min-width: 0;
  margin-bottom: 0;
}

.wtr-reviews__nav {
  display: none; /* shown by wtr-blocks.js (.is-scrollable) on desktop */
  flex: none;
  gap: 0.75rem;
  margin-left: auto;
}

.wtr-reviews__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--wtr-yellow);
  border-radius: 50%;
  background-color: transparent;
  color: var(--wtr-yellow);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.wtr-reviews__arrow:hover {
  background-color: var(--wtr-yellow);
  color: var(--wtr-bg);
}

.wtr-reviews__arrow:focus-visible {
  outline: 2px solid var(--wtr-white);
  outline-offset: 3px;
}

/* Start / end of the row: dimmed */
.wtr-reviews__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.wtr-reviews__arrow[aria-disabled="true"]:hover {
  background-color: transparent;
  color: var(--wtr-yellow);
}

.wtr-reviews__arrow-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.wtr-reviews__arrow--prev .wtr-reviews__arrow-icon {
  transform: scaleX(-1);
}

/* Dots: one per scroll position, the current one is longer and yellow */
.wtr-reviews__dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.wtr-reviews.is-scrollable .wtr-reviews__dots {
  display: flex;
}

.wtr-reviews__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--wtr-line);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.wtr-reviews__dot.is-active {
  width: 24px;
  background-color: var(--wtr-yellow);
}

/* ---------------------------------------------------------------------------
 * 7. FAQ + yellow band
 * ------------------------------------------------------------------------ */

.wtr-faq__list,
.wtr-faq__col {
  display: grid;
  align-content: start;
  gap: 0.9375rem;
}

.wtr-faq__item {
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius);
  background-color: var(--wtr-card);
}

/* Phone/tablet: the open question gets a yellow frame */
.wtr-faq__item[open] {
  border-color: var(--wtr-yellow);
}

.wtr-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0.7rem 0.65rem;
  border-radius: var(--wtr-radius);
  list-style: none;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--wtr-yellow);
}

.wtr-faq__question::-webkit-details-marker {
  display: none;
}

.wtr-faq__question::marker {
  content: "";
}

.wtr-faq__icon {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.2rem;
}

.wtr-faq__icon::before,
.wtr-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.375rem;
  height: 2px;
  background-color: var(--wtr-yellow);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.wtr-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.wtr-faq__item[open] .wtr-faq__icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.wtr-faq__item[open] .wtr-faq__icon::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

.wtr-faq__answer {
  padding: 0 0.7rem 0.75rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.wtr-faq--band {
  padding-bottom: 0;
}

.wtr-band {
  margin-top: var(--wtr-space);
  background-color: var(--wtr-yellow);
  color: var(--wtr-bg);
}

.wtr-faq--band > .wtr-band:first-child {
  margin-top: 0;
}

.wtr-band__inner {
  display: grid;
  gap: 0.8rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.wtr-band__title {
  margin: 0 0 0.375rem;
  font-family: var(--wtr-font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--wtr-bg);
}

.wtr-band__text {
  max-width: 30rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Only when "Show construction stripe" is on (the footer has its own stripe) */
.wtr-band--stripes::after {
  content: "";
  display: block;
  height: var(--wtr-stripe-height);
  background: repeating-linear-gradient(45deg, var(--wtr-bg) 0 var(--wtr-stripe), var(--wtr-yellow) var(--wtr-stripe) calc(2 * var(--wtr-stripe)));
}

/* ---------------------------------------------------------------------------
 * Card details popup (phone/tablet, "Details on phone" = Popup)
 * A native <dialog>: keeps focus inside, Escape closes. Filled by wtr-blocks.js.
 * ------------------------------------------------------------------------ */

.wtr-modal {
  position: fixed;
  inset: 60px 16px auto;
  box-sizing: border-box;
  width: auto;
  max-width: 36rem;
  max-height: min(85vh, calc(100vh - 76px));
  max-height: min(85dvh, calc(100dvh - 76px));
  margin: 0 auto;
  padding: 0 1rem 1.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--wtr-line);
  border-radius: var(--wtr-radius-lg);
  background-color: var(--wtr-card);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.6);
  color: var(--wtr-white);
  font-family: var(--wtr-font-text);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

.wtr-modal[open] {
  animation: wtr-modal-in 0.2s ease-out;
}

.wtr-modal.is-closing {
  animation: wtr-modal-out 0.2s ease-in forwards;
}

/* Darkened, blurred page behind the window (::backdrop does not get the page colours) */
.wtr-modal::backdrop {
  background-color: rgba(14, 24, 40, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: wtr-fade-in 0.2s ease-out;
}

.wtr-modal.is-closing::backdrop {
  animation: wtr-fade-out 0.2s ease-in forwards;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wtr-modal::backdrop {
    background-color: rgba(14, 24, 40, 0.88);
  }
}

@keyframes wtr-modal-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

@keyframes wtr-modal-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(1rem); }
}

@keyframes wtr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wtr-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Close button stays in the top right corner while the content scrolls */
.wtr-modal__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
  margin-right: -0.375rem;
}

.wtr-modal__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 0.625rem;
  padding: 0;
  border: 1px solid var(--wtr-yellow);
  border-radius: 50%;
  background-color: var(--wtr-card);
  color: var(--wtr-yellow);
  cursor: pointer;
}

.wtr-modal__close:focus-visible {
  outline: 2px solid var(--wtr-white);
  outline-offset: 3px;
}

.wtr-modal__close-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.wtr-modal__content {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
}

.wtr-modal__head {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  min-height: 40px;
  padding-right: 3rem; /* room for the close button */
}

.wtr-modal__title {
  margin: 0;
  font-family: var(--wtr-font-heading);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  hyphens: manual;
  color: var(--wtr-yellow);
}

.wtr-modal__head .wtr-modal__title:first-child {
  padding-top: 0.25rem;
}

.wtr-modal .wtr-card__meta,
.wtr-modal .wtr-card__pricing,
.wtr-modal .wtr-card__price {
  margin: 0;
}

.wtr-modal__details {
  padding-top: 0.75rem;
  border-top: 1px solid var(--wtr-line);
}

.wtr-modal__button {
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * Empty optional fields (0.8.0): the element that is left last (or first)
 * does not keep its outer gap, so nothing leaves an empty strip.
 * ------------------------------------------------------------------------ */

.wtr-eyebrow:last-child,
.wtr-container > .wtr-heading:last-child,
.wtr-hero__grid > :last-child,
.wtr-hero__body > :last-child,
.wtr-card__body > :last-child,
.wtr-details__item-head:last-child,
.wtr-band__title:last-child {
  margin-bottom: 0;
}

.wtr-subtitle:first-child,
.wtr-hero__body > :first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) {
  .wtr-page {
    --wtr-gutter: 24px;
    --wtr-space: 3.5rem;
    --wtr-cards-gap: 1.5rem;
    --wtr-stripe-height: 1.75rem;
    --wtr-stripe: 1rem;
  }

  .wtr-title {
    font-size: 3.5rem;
  }

  .wtr-eyebrow {
    font-size: 1.5rem;
  }

  .wtr-heading {
    margin-bottom: 2rem;
  }

  .wtr-btn {
    width: auto;
    text-transform: none;
  }

  .wtr-btn--dark {
    text-transform: uppercase;
  }

  .wtr-btn--block {
    width: 100%;
  }

  /* Hero */

  .wtr-hero__deco {
    display: block;
    max-width: 15rem;
  }

  .wtr-hero__media {
    margin-bottom: 1.5rem;
    border-color: var(--wtr-yellow);
  }

  .wtr-rating {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem 0.6rem;
    font-size: 1.375rem;
  }

  .wtr-rating__stars {
    font-size: 1.5rem;
  }

  .wtr-feature__title {
    font-size: 1.375rem;
  }

  .wtr-features,
  .wtr-hero__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.875rem;
  }

  .wtr-hero__actions .wtr-btn {
    width: 100%;
  }

  /* Cards: note above the switch, as on desktop */

  .wtr-tabs {
    order: 0;
  }

  .wtr-tabs__tab {
    text-transform: none;
  }

  .wtr-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wtr-cards__tip {
    margin-top: 1.5rem;
  }

  /* Steps */

  .wtr-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .wtr-step__number {
    font-size: 4.375rem;
  }

  .wtr-step__title {
    font-size: 2.25rem;
  }

  .wtr-steps__foot {
    display: flex;
    margin-top: 1.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
  }

  .wtr-steps__note {
    flex: 0 1 auto;
  }

  .wtr-steps__foot > .wtr-btn {
    flex: none;
    min-width: 15rem;
    margin-left: auto;
  }

  /* Comparison */

  .wtr-compare__grid {
    gap: 1.5rem;
  }

  .wtr-compare__table th,
  .wtr-compare__table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .wtr-compare__table thead th {
    font-size: 1.375rem;
  }

  .wtr-compare__table tbody th {
    padding-left: 0.625rem;
    font-size: 1.5rem;
  }

  .wtr-compare__table thead .wtr-compare__label {
    width: 44%;
    padding-left: 0.625rem;
  }

  .wtr-compare__table thead th.wtr-compare__hi {
    width: auto;
  }

  .wtr-compare__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Reviews */

  .wtr-review {
    flex-basis: calc((100% - 0.75rem) / 2);
  }

  .wtr-reviews__head {
    margin-bottom: 2rem;
  }

  .wtr-review__text {
    font-size: 1.375rem;
  }

  /* FAQ */

  .wtr-band__inner {
    gap: 1.25rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .wtr-band__title {
    font-size: 3.5rem;
  }

  .wtr-band__text {
    font-size: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Desktop
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) {
  .wtr-page {
    --wtr-space: 4rem;
    --wtr-cards-gap: 1.875rem;
    --wtr-radius: 12px;
    --wtr-stripe-height: 2.5rem;
    --wtr-stripe: 1.25rem;
  }

  .wtr-page > .wtr-section:first-child {
    padding-top: 1.5rem;
  }

  .wtr-title {
    font-size: 4.375rem;
  }

  .wtr-eyebrow {
    font-size: 1.875rem;
  }

  /* Teko sizes and weights measured in the desktop mockup (no letter spacing) */
  .wtr-text {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .wtr-heading {
    margin-bottom: 2.25rem;
  }

  .wtr-btn {
    min-height: 50px;
    font-size: 1.5625rem;
  }

  .wtr-btn:hover {
    border-color: var(--wtr-yellow-hover);
    background-color: var(--wtr-yellow-hover);
  }

  .wtr-btn--outline:hover {
    border-color: var(--wtr-yellow);
    background-color: rgba(242, 183, 7, 0.12);
  }

  .wtr-btn--dark:hover {
    border-color: #1F2D45;
    background-color: #1F2D45;
  }

  .wtr-note--box {
    padding: 0.9rem 1rem;
    font-size: 1.375rem;
    line-height: 1.15;
  }

  .wtr-note--box .wtr-note__icon {
    width: 2rem;
    height: 2rem;
  }

  /* Hero: heading over both columns, decoration stands on the media frame */

  .wtr-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.875rem;
  }

  .wtr-hero__head {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: end;
    margin: 0;
    padding-bottom: 2.25rem;
  }

  .wtr-hero__deco {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 65%;
    max-width: 21.5rem;
    margin-right: 3.75rem;
  }

  .wtr-hero__media {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  .wtr-hero__body {
    grid-column: 1;
    grid-row: 2;
  }

  .wtr-rating {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 0.95rem 1.25rem 0.75rem;
    font-size: 1.5rem;
  }

  .wtr-feature__title {
    line-height: 1.15;
  }

  .wtr-feature__text {
    line-height: 1.15;
  }

  .wtr-hero__text {
    margin-bottom: 1.5rem;
  }

  /* Hero without photo/video: the text column takes the full width, 4 tiles in a row */
  .wtr-hero--no-media .wtr-hero__body {
    grid-column: 1 / -1;
  }

  .wtr-hero--no-media .wtr-rating {
    width: fit-content;
  }

  .wtr-hero--no-media .wtr-hero__text {
    max-width: 46rem;
  }

  .wtr-hero--no-media .wtr-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wtr-hero--no-media .wtr-hero__actions {
    max-width: calc(50% - 0.9375rem); /* buttons as wide as with media */
  }

  /* Cards: 4 columns, an open card takes 2 columns and shows the details on the right */

  .wtr-cards__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: 2.25rem;
  }

  .wtr-cards__aside {
    width: 25.75rem;
  }

  .wtr-tabs {
    padding: 4px;
  }

  .wtr-tabs__tab {
    min-height: 46px;
    padding: 0.55rem 0.75rem 0.3rem;
    font-size: 1.875rem;
  }

  .wtr-tabs__tab[aria-selected="false"]:hover {
    color: var(--wtr-white);
  }

  .wtr-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Desktop card: photo edge to edge with a fade, thin frame (phone style reset) */
  .wtr-card {
    padding: 0;
    border-color: var(--wtr-line);
    border-radius: var(--wtr-radius);
  }

  .wtr-card__media {
    aspect-ratio: 262 / 322;
    border-bottom: 1px solid var(--wtr-line);
    border-radius: 0;
  }

  .wtr-card__media::after {
    display: block;
  }

  .wtr-card__badge {
    top: 0.625rem;
    left: 0.625rem;
  }

  .wtr-card__body {
    padding: 0.5rem 0.9375rem 1.25rem; /* room for umlaut dots (Ö) under the photo line */
  }

  .wtr-card__head {
    margin-bottom: 0.375rem;
  }

  .wtr-card__title {
    font-size: 2rem;
    letter-spacing: 0.01em;
  }

  .wtr-card__text {
    margin-bottom: 0.75rem;
    line-height: 1.18;
    letter-spacing: 0.014em;
  }

  .wtr-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin-bottom: 0.75rem;
  }

  .wtr-card__age-label {
    font-size: 1.375rem;
  }

  .wtr-card__meta-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .wtr-card__price-value {
    font-size: 2.5rem;
  }

  /* The card is narrow: caption above the price, so the button fits next to it */
  .wtr-card__buy .wtr-card__price {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }

  .wtr-card__buy .wtr-card__price-label {
    font-size: 1.25rem;
    line-height: 1;
  }

  .wtr-card__price-note {
    font-size: 1.125rem;
  }

  .wtr-card__toggle {
    min-height: 34px;
    padding: 0.4rem 0.55rem 0.25rem 0.65rem;
    font-size: 1.0625rem;
  }

  .wtr-card__foot {
    gap: 1rem;
  }

  /* "Weniger Infos": only when the desktop mode is Inline */
  .wtr-cards[data-wtr-details-desktop="inline"] .wtr-card__close {
    display: flex;
  }

  .wtr-cards:not([data-wtr-details-desktop="inline"]) .wtr-card__close {
    display: none;
  }

  /* Details text (second desktop mockup) */
  .wtr-details__heading {
    font-size: 1rem;
  }

  .wtr-details__text,
  .wtr-details__item-text,
  .wtr-note--muted,
  .wtr-note--check,
  .wtr-quote__text {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .wtr-details__item-head {
    font-size: 1.25rem;
  }

  .wtr-details__price-row dd {
    font-size: 1.25rem;
  }

  .wtr-quote__foot {
    font-size: 1.125rem;
  }

  .wtr-details__room {
    font-size: 1.25rem;
  }

  .wtr-details__small {
    font-size: 1rem;
  }

  .wtr-btn--block {
    min-height: 40px;
  }

  /* Overlay: the whole card opens on hover/click; Popup and Inline: only the button */
  [data-wtr-details-desktop="overlay"] .wtr-card--has-details .wtr-card__main {
    cursor: pointer;
  }

  /*
   * Overlay: the open card lies OVER its neighbour: it keeps its own grid cell (the grid does
   * not change), is two cards wide and sits on a higher layer. Its height follows the content;
   * wtr-blocks.js sets a negative margin-bottom so a taller card does not stretch the row.
   * A card in the last column opens to the left (.is-left) – photo stays in place.
   */
  [data-wtr-details-desktop="overlay"] .wtr-card.is-open {
    z-index: 5;
    display: grid;
    align-self: start;
    width: calc(200% + var(--wtr-cards-gap));
    grid-template-columns: calc((100% - var(--wtr-cards-gap)) / 2) minmax(0, 1fr);
    border-color: var(--wtr-yellow);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.6);
  }

  [data-wtr-details-desktop="overlay"] .wtr-card.is-open.is-left {
    margin-left: calc(-100% - var(--wtr-cards-gap));
    grid-template-columns: minmax(0, 1fr) calc((100% - var(--wtr-cards-gap)) / 2);
  }

  [data-wtr-details-desktop="overlay"] .wtr-card.is-open.is-left .wtr-card__main {
    grid-column: 2;
    grid-row: 1;
  }

  [data-wtr-details-desktop="overlay"] .wtr-card.is-open.is-left .wtr-card__details {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 1px solid var(--wtr-line);
  }

  [data-wtr-details-desktop="overlay"] .wtr-card.is-open .wtr-card__foot {
    margin-top: 0.25rem;
  }

  [data-wtr-details-desktop="overlay"] .wtr-card.is-open .wtr-card__details {
    padding: 0.9375rem;
    border-top: 0;
    border-left: 1px solid var(--wtr-line);
  }

  /*
   * Inline: the details open downwards inside the card. Only the open card grows; the other
   * cards of the row keep their height (wtr-blocks.js), the rows below move down.
   */
  [data-wtr-details-desktop="inline"] .wtr-card.is-open {
    border-color: var(--wtr-yellow);
  }

  [data-wtr-details-desktop="inline"] .wtr-card__details {
    margin: 0 0.9375rem;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid var(--wtr-line);
  }

  /* Popup on desktop: centred, up to 640px wide */
  .wtr-modal {
    inset: 0;
    max-width: 40rem;
    max-height: min(85vh, calc(100vh - 7.5rem));
    max-height: min(85dvh, calc(100dvh - 7.5rem));
    margin: auto;
    padding: 0 1.5rem 1.5rem;
  }

  .wtr-modal__bar {
    margin-right: -0.75rem;
  }

  .wtr-modal__content {
    padding-top: 1.25rem;
  }

  @media (hover: hover) {
    .wtr-modal__close:hover {
      background-color: var(--wtr-yellow);
      color: var(--wtr-bg);
    }
  }

  .wtr-cards__tip {
    margin-top: 1.875rem;
  }

  /* Steps */

  .wtr-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
  }

  .wtr-step {
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 1rem;
  }

  .wtr-step__media {
    margin: -0.75rem -0.75rem 0.25rem;
  }

  .wtr-step__head {
    gap: 1rem;
  }

  .wtr-step__number {
    font-size: 5rem;
  }

  .wtr-step__title {
    font-size: 2.5rem;
    line-height: 1.14;
  }

  .wtr-step__text {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .wtr-steps__foot {
    margin-top: 1.875rem;
  }

  .wtr-steps__foot > .wtr-btn {
    min-width: 18.25rem;
  }

  .wtr-btn--large {
    min-height: 60px;
    font-size: 1.875rem;
  }

  /* Comparison: table + tiles side by side */

  .wtr-compare__grid--tiles {
    grid-template-columns: minmax(0, 1fr) 16.375rem;
    gap: 1.875rem;
  }

  .wtr-compare__grid--tiles .wtr-compare__tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  /* "Tiles position on desktop" = Below: table full width, tiles under it, 3 in a row */
  .wtr-compare__grid--tiles.wtr-compare__grid--below {
    grid-template-columns: minmax(0, 1fr);
  }

  .wtr-compare__grid--tiles.wtr-compare__grid--below .wtr-compare__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wtr-compare__table th,
  .wtr-compare__table td {
    padding-top: 0.95rem;
    padding-bottom: 0.75rem;
  }

  .wtr-compare__table thead th {
    font-size: 1.5rem;
  }

  .wtr-compare__table tbody th {
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .wtr-compare__table thead .wtr-compare__label {
    width: 50%;
    font-size: 0; /* the desktop mockup has no label here; screen readers still read it */
  }

  .wtr-compare__actions {
    margin-top: 1.875rem;
  }

  /* Reviews: 3 per row, more scroll sideways; stars + Google icon next to the name */

  .wtr-reviews__track {
    gap: 2.75rem;
    margin-right: 0;
    padding-right: 0;
  }

  .wtr-review {
    flex-basis: calc((100% - 2 * 2.75rem) / 3);
  }

  /* More than 3 reviews: a bit narrower, so the edge of the 4th one shows on the right */
  .wtr-reviews--many .wtr-review {
    flex-basis: calc((100% - 3 * 2.75rem) / 3.2);
  }

  .wtr-reviews__head {
    margin-bottom: 2.25rem;
  }

  .wtr-reviews.is-scrollable .wtr-reviews__nav {
    display: flex;
  }

  .wtr-review__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    padding: 0.875rem;
    border-radius: 14px;
  }

  .wtr-review__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.6rem;
  }

  .wtr-review__rating {
    grid-column: 2;
    grid-row: 1;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    padding: 0;
  }

  .wtr-review__text {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 1.5rem;
    line-height: 1.42;
  }

  .wtr-review__name {
    font-size: 1.5625rem;
  }

  .wtr-review__stars {
    font-size: 0.95rem;
  }

  .wtr-review__google {
    width: 1.75rem;
    height: 1.75rem;
  }

  .wtr-reviews__actions {
    margin-top: 1.25rem;
  }

  /* FAQ: two columns */

  .wtr-faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3.75rem;
    align-items: start;
  }

  .wtr-faq__col {
    gap: 1.25rem;
  }

  .wtr-faq__item[open] {
    border-color: var(--wtr-line);
  }

  .wtr-faq__question {
    gap: 1rem;
    padding: 0.8rem 0.75rem 0.6rem;
    line-height: 1.15;
  }

  .wtr-faq__answer {
    padding: 0 0.75rem 0.9rem;
    letter-spacing: 0.01em;
  }

  .wtr-faq__question:hover {
    color: var(--wtr-white);
  }

  .wtr-band {
    margin-top: 4.375rem;
  }

  .wtr-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 3.25rem calc(var(--wtr-gutter) + 1.25rem) 3.5rem;
  }

  .wtr-band__title {
    margin-bottom: 0.5rem;
    font-size: 4.375rem;
  }

  .wtr-band__text {
    font-size: 2rem;
    line-height: 1.19;
  }

  .wtr-btn--dark {
    min-height: 70px;
    padding: 0.75rem 1.75rem 0.5rem;
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wtr-btn,
  .wtr-tabs__tab,
  .wtr-card__toggle,
  .wtr-card__toggle-icon,
  .wtr-faq__icon::before,
  .wtr-faq__icon::after,
  .wtr-reviews__arrow,
  .wtr-reviews__dot {
    transition: none;
  }

  .wtr-card__toggle.is-shine {
    animation: none;
  }

  .wtr-modal[open],
  .wtr-modal::backdrop {
    animation: none;
  }
}