/* Handtuch Held Guest Web — Pool Deck Editorial. The calm editorial baseline
   stays readable underneath; the deck layer adds pale-aqua dotted bands,
   oversized display type, sun/coral/cyan/palm accents, selective ink outlines
   with offset shadows, a few meaningful stickers, and rhythmic section bands.
   All motion is bounded and nonessential; system fonts only. */

:root {
  --paper: #faf7f1;
  --card: #fffdf8;
  --ink: #16323a;
  --ink-strong: #0e2229;
  --ink-soft: #4c6a71;
  --line: rgba(22, 50, 58, 0.18);
  --line-strong: rgba(22, 50, 58, 0.42);
  --pool: #0b7280;
  --towel-red: #c8432f;
  --towel-white: #fffdf8;
  --state-anonymous: #7a8b8f;
  --state-customer: #b05a00;
  --state-staff: #2e5b44;
  --state-denied: #8a2926;
  /* Pool Deck accents */
  --pool-aqua: #ddf2ee;
  --pool-aqua-deep: #b7e2db;
  --paper-cool: #eef6f3;
  --sun: #f6c445;
  --sun-soft: #fbf0d4;
  --coral: #e8604c;
  --cyan-deep: #0f7280;
  --palm: #2f8f5b;
  /* Status words on light surfaces: at least 4.5:1 on card, cool band and sun-soft. */
  --palm-ink: #1f6f43;
  --outline: #132c33;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --focus: var(--pool);
  --stripe: repeating-linear-gradient(
    90deg,
    var(--towel-red) 0 1.1rem,
    var(--towel-white) 1.1rem 2.2rem
  );
  /* Transparent-gap twin of --stripe: identical 90deg angle, 1.1rem dash,
     2.2rem period and towel red, but the gaps let any surface (cream band,
     tint, dark footer) show through instead of painting towel-white. */
  --stripe-clear: repeating-linear-gradient(
    90deg,
    var(--towel-red) 0 1.1rem,
    transparent 1.1rem 2.2rem
  );
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* One coherent towel motif: the stripe marks the page itself and the
   session surface below — never decoration for its own sake. */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--stripe);
}

img { max-width: 100%; height: auto; display: block; }

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

/* Above the shared header (z-index 40) so the focused link is never covered. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--ink-strong);
  color: var(--paper);
  border-radius: 2px;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

/* A clicked login link stays visibly marked until the same-tab navigation
   completes — the departure is intentional, never abrupt. The shared block
   covers the header link; footer and session sign-in producers use this rule. */
.is-departing { opacity: 0.72; }

/* --- Header ---------------------------------------------------------------- */

/* biome-ignore-start lint/complexity/noImportantStyles: the byte-identical shared-header block cannot carry inline suppressions; its reduced-motion rule must beat the global reset to keep the language reveal */
/* === shared-header:start === */
/* One header contract for Guest Web and Hotel Web. Keep this block
   byte-identical in both apps (server tests compare it). Geometry never
   depends on label length: brand left, tools pinned right, tabs on their
   own row; below 60rem a 56 px bar with an overlay menu. */

html { scrollbar-gutter: stable; }

html[data-i18n-pending] body {
  visibility: hidden;
  animation: hh-i18n-reveal 0s linear 1.5s forwards;
}

@keyframes hh-i18n-reveal { to { visibility: visible; } }

.site-header {
  --header-pad: clamp(1.25rem, 4vw, 3rem);
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand tools" "nav nav";
  column-gap: 1rem;
  padding-inline: var(--header-pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
}

.site-header-bar,
.site-menu { display: contents; }

.site-header .brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  block-size: 3.25rem;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-header .brand-mark {
  flex: none;
  width: 2.1rem;
  height: 0.8rem;
  background: repeating-linear-gradient(90deg, var(--towel-red) 0 1.05rem, var(--towel-white) 1.05rem 2.1rem);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.site-header .brand-tag {
  margin: 0;
  padding: 0.14rem 0.42rem;
  border: 1px solid var(--line-strong);
  color: var(--header-tag-color, var(--ink-soft));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  grid-area: nav;
  display: flex;
  gap: 0.25rem;
  block-size: 2.75rem;
  margin-inline-start: -0.7rem;
  overflow-x: auto;
}

.site-nav a {
  display: flex;
  align-items: center;
  padding-inline: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--towel-red); }
.site-nav a:focus-visible { outline-offset: -3px; }

.site-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  block-size: 3.25rem;
}

.site-header .nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.5rem;
  padding: 0.35rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .nav-signin:hover { background: rgba(22, 50, 58, 0.07); }
.site-header .is-departing { opacity: 0.72; }

.site-header .lang-picker {
  display: inline-flex;
  align-items: stretch;
  gap: 0.15rem;
  block-size: 2.5rem;
  margin: 0;
  padding: 0.2rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
}

.site-header .lang-option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.site-header .lang-option:hover { color: var(--ink); background: rgba(22, 50, 58, 0.07); }
.site-header .lang-option[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.site-menu-toggle { display: none; }

@media (max-width: 59.99rem) {
  .site-header { display: block; padding-inline: 0; }

  .site-header-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    block-size: 3.5rem;
    padding-inline: var(--header-pad);
  }

  .site-header .brand {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 0.5rem;
    align-items: center;
    justify-content: start;
    block-size: auto;
    font-size: 1rem;
  }

  .site-header .brand-mark { grid-row: 1 / span 2; width: 1.8rem; height: 0.7rem; }

  .site-header .brand-tag {
    grid-column: 2;
    padding: 0;
    border: 0;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    line-height: 1.2;
  }

  html.js .site-menu-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    margin-inline-start: auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .site-menu-icon,
  .site-menu-icon::before,
  .site-menu-icon::after {
    display: block;
    inline-size: 1.1rem;
    block-size: 2px;
    background: currentColor;
    content: "";
  }

  .site-menu-icon { position: relative; }
  .site-menu-icon::before { position: absolute; top: -6px; left: 0; }
  .site-menu-icon::after { position: absolute; top: 6px; left: 0; }
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon { background: transparent; }
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon::before { top: 0; transform: rotate(45deg); }
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon::after { top: 0; transform: rotate(-45deg); }

  .site-menu {
    display: grid;
    gap: 1rem;
    padding: 0.5rem var(--header-pad) 1.25rem;
    background: var(--card);
    border-top: 1px solid var(--line);
  }

  html.js .site-menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(22, 50, 58, 0.16);
  }

  html.js .site-menu:not([data-open]) { display: none; }

  .site-nav { grid-area: auto; display: grid; gap: 0; block-size: auto; margin-inline-start: 0; overflow: visible; }
  .site-nav a { min-block-size: 3rem; padding-inline: 0.75rem; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--towel-red); }
  .site-tools { grid-area: auto; display: grid; justify-content: stretch; gap: 0.75rem; block-size: auto; }
  .site-header .nav-signin { min-block-size: 2.75rem; }
  .site-header .lang-picker { justify-self: start; block-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-i18n-pending] body { animation: hh-i18n-reveal 0s linear 1.5s forwards !important; }
}
/* === shared-header:end === */
/* biome-ignore-end lint/complexity/noImportantStyles: end of the shared-header block */

/* --- Deck bands: the rhythmic section backgrounds --------------------------- */

.deck-band { position: relative; }

.deck-aqua {
  background-color: var(--pool-aqua);
  background-image: radial-gradient(circle, var(--pool-aqua-deep) 1.3px, transparent 1.4px);
  background-size: 1.35rem 1.35rem;
}

/* Towel-stripe hem grounds each aqua deck. */
.deck-aqua::after {
  content: "";
  display: block;
  height: 6px;
  background: var(--stripe-clear);
  opacity: 0.6;
}

.deck-cool {
  background-color: var(--paper-cool);
  background-image: radial-gradient(circle, rgba(47, 143, 91, 0.12) 1.3px, transparent 1.4px);
  background-size: 1.35rem 1.35rem;
}

/* Palm-hued dots and a softer towel hem close the cool deck. */
.deck-cool::after {
  content: "";
  display: block;
  height: 6px;
  background: var(--stripe-clear);
  opacity: 0.45;
}

.deck-sun {
  background-color: var(--sun-soft);
  background-image: radial-gradient(circle, rgba(176, 90, 0, 0.1) 1.3px, transparent 1.4px);
  background-size: 1.35rem 1.35rem;
}

/* Motif edge replaces the old dotted rule on the sun deck. */
.deck-sun::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--stripe-clear);
  opacity: 0.6;
}

/* --- Hero (asymmetric editorial split) ------------------------------------ */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.2rem);
}

.hero-compact { padding-block: clamp(1.8rem, 4vw, 3rem); }

.kicker {
  margin: 0 0 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pool);
}

/* Oversized display hierarchy: the throw-the-towel headline leads the deck. */
.hero-copy h1 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 700;
  /* Below 376 px the headline steps down to 2.3rem, so "already flying." and
     "Dein Handtuch" still fit one 280 px line on a 320 px phone. */
  font-size: clamp(2.3rem, max(min(11.5vw, 2.7rem), 5.8vw), 4.8rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
}

.hero-compact h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }

.lede {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--ink-soft);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.8rem 0 0;
}

.hero-figure {
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--card);
}

.hero-figure img { width: 100%; }

.hero-figure figcaption {
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Landing/Guest immersive treatment: the hero image bleeds to the right edge,
   cropped and framed by an ink outline with an offset shadow, while the copy
   stays in the editorial grid. The localized caption bar closes the story. */

.hero-bleed { --hero-edge: clamp(1.25rem, 4vw, 3rem); }

.hero-bleed .hero-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: clamp(16rem, 34vw, 30rem);
  border: 3px solid var(--outline);
  box-shadow: 8px 8px 0 rgba(19, 44, 51, 0.18);
  background: var(--card);
  margin-right: calc(-1 * var(--hero-edge) - max(0px, (100vw - 76rem) / 2));
}

.hero-bleed .hero-figure img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.hero-bleed .hero-figure figcaption {
  border-top: 6px solid transparent;
  border-image: var(--stripe) 6;
  background: var(--ink-strong);
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.65rem 0.95rem;
}

/* --- Stickers: few, meaningful, on-theme ------------------------------------ */

.sticker {
  display: inline-block;
  z-index: 2;
  padding: 0.45rem 0.95rem;
  background: var(--sun);
  color: var(--ink-strong);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--outline);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transform: rotate(-5deg);
}

.sticker-hero {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
}

/* --- Badges ------------------------------------------------------------------ */

.badge {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--outline);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.badge-coral { border-color: var(--coral); background: #fdeae6; }

.badge-green { border-color: var(--palm); background: #e3f3ea; }

/* --- Content sections ------------------------------------------------------ */

.section-block {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3.2rem);
}

.deck-cool .section-block,
.deck-sun .section-block { padding-block: clamp(2.4rem, 5vw, 3.8rem); }

.section-block h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
  margin: 0 0 1.2rem;
}

/* Stripe accent underlines the two bare section titles. */
#split-title::after,
#features-title::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 6px;
  margin-top: 0.7rem;
  background: var(--stripe-clear);
}

.section-note {
  color: var(--ink-soft);
  max-width: 46rem;
  margin: -0.4rem 0 1.4rem;
}

/* Workflow: numbered deck chips separated by hairlines. */

.workflow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.workflow-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.workflow-no {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 0.15rem;
  background: var(--sun);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.18);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink-strong);
}

.workflow-row:nth-child(3n + 2) .workflow-no { background: var(--pool-aqua); }

.workflow-row:nth-child(3n) .workflow-no { background: #d9efdf; }

.workflow-row h3 { margin: 0 0 0.3rem; font-size: 1.18rem; }

.workflow-row p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 44rem;
}

/* Split block: guest and hotel sides as outlined, tinted, hemmed cards. */

.split-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.split-col {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 2px solid var(--outline);
  border-radius: 2px;
}

.split-col::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--stripe-clear);
}

/* Per-side tint and colored offset shadow echo the approved badge fills. */
.split-guest {
  background: #fdeae6;
  box-shadow: 8px 8px 0 rgba(232, 96, 76, 0.28);
}

.split-hotel {
  background: #e3f3ea;
  box-shadow: 8px 8px 0 rgba(47, 143, 91, 0.28);
}

.split-col h3 { margin: 0 0 0.4rem; font-size: 1.18rem; }

.split-col p { margin: 0 0 0.8rem; color: var(--ink-soft); }

.split-link {
  font-weight: 700;
  color: var(--ink);
  text-underline-offset: 4px;
}

.split-link:hover {
  color: var(--pool);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Darkened coral keeps the guest link above 4.5:1 on the tinted card. */
.split-guest .split-link { color: #bc3d2a; }

.split-hotel .split-link { color: var(--state-staff); }

/* --- Pool-day features and shared hotel directory --------------------------- */

.features .feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.4rem, 3vw, 2.4rem);
  row-gap: 0;
  counter-reset: poolfeat;
}

.features .feature-card {
  min-width: 0;
  counter-increment: poolfeat;
  padding: 1.6rem 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-top: 1px solid var(--line);
}

.features .feature-card h3 { margin: 0 0 0.3rem; font-size: 1.18rem; }

/* Workflow-style mono number anchor: pure CSS counters, no markup, no i18n. */
.features .feature-card h3::before {
  content: counter(poolfeat, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pool);
  margin-bottom: 0.35rem;
}

.features .feature-card p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

.hotel-directory {
  width: 100%;
  max-width: 56rem;
  min-height: 12rem;
}

.directory-search {
  display: block;
  width: 100%;
  margin: 1.2rem 0;
  font-weight: 700;
}

.directory-search input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: 0.4rem;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: normal;
}

.directory-search input::placeholder { color: var(--ink-soft); opacity: 1; }

.hotel-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.hotel-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 2.75rem;
  height: 100%;
  padding: 1rem;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--pool-aqua-deep);
  color: var(--pool);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.hotel-link-name { min-width: 0; text-decoration: underline; text-underline-offset: 4px; }
.hotel-link-cue { flex-shrink: 0; transition: transform 120ms ease; }
.hotel-link:hover {
  background: var(--pool-aqua);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pool-aqua-deep);
}
.hotel-link:hover .hotel-link-cue { transform: translateX(3px); }
.hotel-directory .directory-state { color: var(--ink-soft); }
.hotel-directory .directory-state:not(:empty) {
  padding: 1rem;
  min-height: 3.75rem;
  margin: 1rem 0 0;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
  font-style: normal;
}
.hotel-directory .directory-state:empty { margin: 0; }
.hotel-directory [hidden] { display: none; }

@media (min-width: 40em) {
  .hotel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .features .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  border-radius: 2px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--outline);
  box-shadow: 4px 4px 0 var(--pool-aqua-deep);
}

.btn-primary:hover {
  background: var(--ink-strong);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pool-aqua-deep);
}

.btn-outline {
  border: 2px solid var(--outline);
  color: var(--ink);
  background: var(--card);
  box-shadow: 4px 4px 0 rgba(19, 44, 51, 0.14);
}

.btn-outline:hover { background: var(--pool-aqua); }

/* Disabled actions read as unavailable by surface, shadow and cursor, not by
   color alone, and never lift on hover. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--paper-cool);
  color: var(--ink-soft);
  border-color: var(--line-strong);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* --- Session panel --------------------------------------------------------- */

.session-panel {
  position: relative;
  background: var(--card);
  border: 2px solid var(--outline);
  box-shadow: 8px 8px 0 var(--pool-aqua-deep);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.session-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--stripe);
}

.context-region { min-height: 4.5rem; }

.context-region > p:first-child { margin-top: 0; }
.context-region > p:last-child { margin-bottom: 0; }

.context-loading { color: var(--ink-soft); font-style: italic; }

/* Session states: one confident line with a square marker — finite, never
   pills. Anonymous, customer, staff, denied and error stay distinct. */

.session-state {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.55rem;
  font-size: 1.18rem;
  font-weight: 700;
}

.session-state::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--state-anonymous);
}

.st-customer::before { background: var(--state-customer); }
.st-staff::before { background: var(--state-staff); }
.st-denied::before,
.st-error::before { background: var(--state-denied); }

.st-denied,
.st-error { color: var(--state-denied); }

.state-copy { margin: 0; color: var(--ink-soft); max-width: 46rem; }

.state-error { margin: 0.2rem 0 0; color: var(--state-denied); }

/* Hold, release and checkout failures stay visible inside the active panel. */
.availability-panel > .state-error { margin: 1rem 0 0; font-weight: 700; }

/* Facts as a tabular spec sheet: small-caps labels and body-face values; only
   technical session identifiers keep the mono face. */

.session-details { margin-top: 0.8rem; }
.session-details summary {
  min-height: 2.75rem;
  padding: 0.6rem 0;
  color: var(--ink-soft);
  font-weight: 700;
  cursor: pointer;
}
.session-details summary:hover { color: var(--pool); }

.session-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.4rem;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.session-facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.22rem;
}

.session-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.session-details .session-facts dd {
  font-family: var(--mono);
  font-size: 0.85rem;
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
}

/* --- Bridge page ------------------------------------------------------------ */

.bridge-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--paper);
  padding: 1.25rem;
}

.bridge-card {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--card);
  border: 1px solid var(--line);
}

.bridge-card .brand-mark {
  display: block;
  width: 2.1rem;
  height: 0.8rem;
  margin-bottom: 1.2rem;
  background: var(--stripe);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.bridge-card h1 {
  font-family: var(--display);
  font-size: 1.5rem;
  margin: 0 0 0.7rem;
}

/* biome-ignore lint/style/noDescendingSpecificity: the dashboard bridge card and the landing feature cards are on different pages; .features .feature-card p never matches here */
.bridge-card p { color: var(--ink-soft); margin: 0 0 0.9rem; }

.bridge-note { font-size: 0.85rem; font-style: italic; }

.bridge-card .btn { margin-top: 0.4rem; }

/* --- Footer ------------------------------------------------------------------ */

/* Dark, towel-hemmed bookend: one full-bleed band on every guest page. The
   inline padding reproduces the 76rem content column, so the wrapped landing
   footer and the unwrapped page footers share one geometry. */
.site-footer {
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem) calc(max(0px, (100% - 76rem) / 2) + clamp(1.25rem, 4vw, 3rem)) 2.4rem;
  background: var(--ink-strong);
  color: var(--paper);
  border-top: 6px solid transparent;
  border-image: var(--stripe-clear) 6;
  font-size: 1rem;
}

.footer-note { margin: 0 0 0.5rem; max-width: 46rem; }

.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.site-footer a { color: var(--pool-aqua); }

.site-footer a:hover { color: var(--sun); }

/* The global pool ring stays under 3:1 on dark ink; sun keeps focus visible. */
.site-footer a:focus-visible { outline-color: var(--sun); }

/* Footer link targets stay at least 24px tall. */
.footer-links a { display: inline-block; padding-block: 0.25rem; font-weight: 600; }

/* Maker line: the product is built and run by Das Digitale Momentum. */
.footer-maker { margin: 1rem 0 0; font-size: 0.85rem; }
.footer-maker + .footer-maker { margin-top: 0.25rem; }

/* --- Responsive -------------------------------------------------------------- */

@media (max-width: 48em) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .hero-bleed .hero-figure {
    align-self: auto;
    height: clamp(15rem, 62vw, 24rem);
    min-height: 0;
    margin: 0 calc(-1 * var(--hero-edge));
  }
  .split-cols { grid-template-columns: 1fr; }
  .session-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 30em) {
  .hero-cta .btn { flex: 1 1 100%; }
  .sticker-hero { top: 0.6rem; left: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion reset must override every component transition and animation */
  * { transition: none !important; animation: none !important; }
}

/* --- Availability: plan/list, selection, and visible hold lifecycle ------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* biome-ignore lint/style/noDescendingSpecificity: availability headings render outside the landing feature cards; .features .feature-card h3 never matches here */
.availability-prompt h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.availability-prompt > .panel-note {
  color: var(--ink-soft);
  max-width: 46rem;
  margin: 0 0 1.2rem;
}

.availability-prompt .directory-search { margin-top: 0; }

.availability-state { color: var(--ink-soft); max-width: 46rem; }

/* Not-found and failed availability reads sit in one bordered state box; errors
   reuse the outline retry action of the checkout states. */
.availability-state-box {
  max-width: 46rem;
  padding: 1rem;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
}

.availability-state-box .availability-state { margin: 0; }
.availability-state-box .state-error { color: var(--state-denied); }

.availability-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.1rem 1.8rem;
  margin: 0.4rem 0 1.6rem;
}

.availability-field { display: grid; gap: 0.45rem; }

.availability-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.availability-field input[type="date"] {
  min-height: 2.75rem;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.availability-slotfield { margin: 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
.availability-slotfield legend { padding: 0; }

.slot-options { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.slot-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--outline);
  border-radius: 999px;
  background: var(--card);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.slot-option input { width: 1.15rem; height: 1.15rem; accent-color: var(--pool); }
.slot-option:hover { background: var(--pool-aqua); }
.slot-option:has(input:checked) {
  background: var(--pool-aqua);
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.18);
}

.availability-viewpicker { display: grid; gap: 0.45rem; }

.view-options {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.16);
}

.view-option {
  appearance: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.view-option:hover { color: var(--ink); background: var(--pool-aqua); }

.view-option[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--outline);
  color: var(--paper);
}

/* Plan: one responsive canvas per pool, units positioned by normalized
   Phase-1 coordinates; the status word always accompanies the accent color. */

/* One shrinkable track: a wide plan canvas scrolls inside .plan-scroll instead
   of widening the section past the screen. */
.availability-plan,
.availability-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }

.plan-pool {
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.4rem);
}

/* biome-ignore lint/style/noDescendingSpecificity: availability headings render outside the landing feature cards; .features .feature-card h3 never matches here */
.plan-pool h3 { margin: 0 0 0.9rem; font-size: 1.18rem; }

/* A pool that needs more room than the screen offers scrolls inside its own box;
   tiles never stack on top of each other. */
.plan-scroll { overflow-x: auto; }

.plan-canvas {
  position: relative;
  aspect-ratio: 21 / 9;
  min-width: calc(8rem + var(--plan-x-steps, 0) * var(--plan-pitch-x, 0px));
  min-height: max(15rem, calc(5.5rem + var(--plan-y-steps, 0) * var(--plan-pitch-y, 0px)));
  border: 2px solid var(--outline);
  background-color: var(--pool-aqua);
  background-image: radial-gradient(circle, var(--pool-aqua-deep) 1.3px, transparent 1.4px);
  background-size: 1.35rem 1.35rem;
}

.plan-sector-legend {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Units sit inside an inner margin (4rem across, 2.75rem down) so labels and
   touch targets never cross the canvas edge; --x/--y come from planUnitStyle. */
.plan-unit {
  position: absolute;
  width: max-content;
  left: calc(4rem + (100% - 8rem) * var(--x) / 100);
  top: calc(2.75rem + (100% - 5.5rem) * var(--y) / 100);
  transform: translate(-50%, -50%);
}

/* The chosen tile paints above its neighbours so its badge stays whole. */
.plan-unit:has(input:checked) { z-index: 1; }

.plan-unit input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.plan-unit label {
  position: relative;
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  min-width: 4.6rem;
  max-width: 7.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  border: 2px solid var(--outline);
  border-radius: 2px;
  background: var(--card);
  box-shadow: 3px 3px 0 rgba(19, 44, 51, 0.14);
  text-align: center;
  cursor: pointer;
}

/* Unavailable units keep full text contrast: a dashed border and the muted
   paper surface mark them instead of fading the words. */
.plan-unit.status-held label,
.plan-unit.status-booked label,
.plan-unit.status-blocked label {
  border-style: dashed;
  background: var(--paper);
  box-shadow: none;
  cursor: not-allowed;
}

.plan-unit input:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.plan-unit input:checked + label {
  border-width: 3px;
  background: var(--sun-soft);
  box-shadow: 4px 4px 0 var(--outline);
}

/* Selection shows by form as well as color: an ink badge with a CSS check (no
   text) on the top-right corner of the chosen unit. */
.plan-unit input:checked + label::before,
.plan-unit input:checked + label::after {
  content: "";
  position: absolute;
}

.plan-unit input:checked + label::before {
  top: -0.7rem;
  right: -0.7rem;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--ink);
}

.plan-unit input:checked + label::after {
  top: -0.42rem;
  right: -0.2rem;
  width: 0.32rem;
  height: 0.62rem;
  border: solid var(--card);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.plan-unit-name { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }

.plan-unit-status {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-unit-sector { font-size: 0.75rem; color: var(--ink-soft); }

/* List: the complete semantic alternative, grouped by pool and sector. */

/* biome-ignore lint/style/noDescendingSpecificity: availability headings render outside the landing feature cards; .features .feature-card h3 never matches here */
.list-pool h3 { margin: 0 0 0.5rem; font-size: 1.18rem; }

.list-pool h4 {
  margin: 1rem 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* biome-ignore lint/style/noDescendingSpecificity: availability headings render outside the landing feature cards; .features .feature-card h3 never matches here */
.availability-groups h3 { margin: 0 0 0.5rem; font-size: 1.18rem; }

.avail-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* biome-ignore lint/style/noDescendingSpecificity: list rows never contain plan tiles; the .plan-unit label rules never match these labels */
.avail-row label {
  display: grid;
  grid-template-columns: auto 1fr max-content;
  gap: 0.9rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.65rem 0.4rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.avail-row input { width: 1.3rem; height: 1.3rem; accent-color: var(--pool); }

.avail-row .row-body { display: grid; gap: 0.1rem; }
.avail-row .row-name { font-weight: 700; }
.avail-row .row-meta { font-size: 0.85rem; color: var(--ink-soft); }

.avail-row .row-status {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.avail-row label:has(input:checked) { background: var(--sun-soft); }

/* biome-ignore-start lint/style/noDescendingSpecificity: list rows never contain plan tiles; the .plan-unit label rules never match these labels */
.avail-row.status-held label,
.avail-row.status-booked label,
.avail-row.status-blocked label { cursor: not-allowed; background: var(--paper); }
/* biome-ignore-end lint/style/noDescendingSpecificity: end of the unavailable list row rule */

/* Status words: color supports the word, never replaces it. */

.status-free .plan-unit-status,
.status-free .row-status { color: var(--palm-ink); }
.status-held .plan-unit-status,
.status-held .row-status { color: var(--state-customer); }
.status-booked .plan-unit-status,
.status-booked .row-status { color: var(--pool); }
.status-blocked .plan-unit-status,
.status-blocked .row-status { color: var(--state-denied); }

/* Selection and hold panels mirror the session-panel card. */

.availability-panel {
  position: relative;
  margin-top: 1.7rem;
  scroll-margin-top: 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--card);
  border: 2px solid var(--outline);
  box-shadow: 8px 8px 0 var(--pool-aqua-deep);
}

.availability-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 5px;
  background: var(--stripe);
}

/* biome-ignore lint/style/noDescendingSpecificity: availability headings render outside the landing feature cards; .features .feature-card h3 never matches here */
.availability-panel h3 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.availability-panel .panel-note { margin: 0; color: var(--ink-soft); max-width: 46rem; }

.availability-addons {
  margin: 1.1rem 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.35rem;
}

.availability-addons legend { margin-bottom: 0.45rem; }

.addon-option {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding-right: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}

.addon-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--pool); }

.availability-actions { margin-top: 1.3rem; }
.availability-state-box .availability-actions { margin-top: 1rem; }

.hold-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 1.1rem 0 0;
}

.hold-countdown-time {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1;
}

@media (max-width: 48em) {
  .plan-canvas { aspect-ratio: auto; }
  .avail-row label { grid-template-columns: auto 1fr; }
  .avail-row .row-status { grid-column: 2; text-align: left; }
}

@media (max-width: 30em) {
  .availability-field input[type="date"] { width: 100%; }
  .availability-actions .btn { flex: 1 1 100%; }
  .plan-unit label { min-width: 4rem; padding: 0.35rem 0.5rem; }
  .plan-unit-name { font-size: 0.75rem; }
}

/* --- Commerce: method choice, visibly no-charge setup, complete Summary -------
   One "Buy and pay" action and authoritative pending/failure/confirmation
   states, styled on the existing session/hold panel vocabulary. */

.commerce-nocharge {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 2px dashed var(--palm);
  background: var(--paper-cool);
  font-weight: 700;
  color: var(--ink-strong);
}

.commerce-methods {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.6rem;
}

.commerce-methods legend {
  margin-bottom: 0.45rem;
  font-weight: 700;
}

.commerce-method {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  min-height: 2.75rem;
}

.commerce-method input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--pool); }

.commerce-method-body { display: grid; gap: 0.15rem; }

.commerce-method-name { font-weight: 700; }

.commerce-method-copy { color: var(--ink-soft); font-size: 0.85rem; }

.commerce-method-state { font-size: 0.85rem; font-weight: 700; }

.commerce-method-state.st-customer { color: var(--state-staff); }

.commerce-method-state.st-denied { color: var(--state-denied); }

.commerce-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0;
}

.commerce-summary-table caption { text-align: left; }

.commerce-summary-table th,
.commerce-summary-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
}

.commerce-summary-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.commerce-summary-number { text-align: right; font-family: var(--mono); white-space: nowrap; }

/* The line name heads its row (th scope="row") without turning the evidence bold. */
.commerce-summary-table tbody th { font-weight: inherit; }

/* The cell rule above aligns left; amounts align right in every row. */
.commerce-summary-table .commerce-summary-number { text-align: right; }

.commerce-summary-table thead .commerce-summary-number { white-space: normal; }

.commerce-line-name { display: block; font-weight: 700; }

.commerce-line-evidence { display: grid; gap: 0.1rem; margin-top: 0.25rem; }

.commerce-line-discount { display: block; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--state-staff); }

.commerce-evidence-label { font-size: 0.85rem; color: var(--ink-soft); }

.commerce-evidence-row { font-size: 0.85rem; color: var(--ink-soft); }

.commerce-totals { margin-top: 1rem; max-width: 26rem; margin-left: auto; }

/* biome-ignore lint/style/noDescendingSpecificity: commerce totals render in the checkout panel, never inside the .session-details disclosure; .session-details .session-facts dd never matches here */
.commerce-totals dd { font-family: var(--mono); text-align: right; }

.commerce-total-strong { font-family: var(--mono); font-weight: 700; }

.commerce-booking-lines {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.commerce-booking-lines li {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.commerce-manage,
.commerce-proof { margin-top: 1.3rem; }

/* biome-ignore-start lint/style/noDescendingSpecificity: checkout manage and proof headings render outside the landing feature cards; .features .feature-card h3 never matches here */
.commerce-manage h3,
.commerce-proof h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
/* biome-ignore-end lint/style/noDescendingSpecificity: end of the checkout heading rule */

/* One line with an ellipsis and a 24px target; the full URL stays readable to
   assistive technology. */
.proof-link {
  display: block;
  min-height: 1.5rem;
  margin-top: 0.5rem;
  overflow: hidden;
  color: var(--pool);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bridge-status { font-style: italic; color: var(--ink-soft); }

@media (max-width: 48em) {
  .commerce-summary-table { font-size: 0.85rem; }
  .commerce-summary-table th,
  .commerce-summary-table td { padding: 0.4rem 0.25rem; }
}

/* Below 30em Summary rows stack into labelled blocks; the visually hidden head
   keeps the column headers for assistive technology. */
@media (max-width: 30em) {
  .commerce-summary-table,
  .commerce-summary-table tbody { display: block; }

  .commerce-summary-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .commerce-summary-table tr {
    display: grid;
    gap: 0.35rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
  }

  .commerce-summary-table tbody :is(th, td) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }

  /* The visual column label carries empty alternative text, so assistive
     technology reads the column header once instead of twice. */
  .commerce-summary-table tbody :is(th, td)::before {
    content: attr(data-label) / "";
    flex: none;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  @supports not (content: "" / "") {
    .commerce-summary-table tbody :is(th, td)::before { content: attr(data-label); }
  }

  .commerce-summary-table tbody th { display: grid; gap: 0.1rem; }
}

/* --- Hotel view: a hotel's direct link (QR code) leads with availability -------- */

body[data-guest-view="hotel"] .hero-split {
  padding-block: clamp(1.8rem, 4vw, 3rem);
}

/* The artwork, sticker and caption stay, as a compact frame beside the copy,
   so the availability heading remains above the fold. */
body[data-guest-view="hotel"] .hero-bleed .hero-figure {
  align-self: center;
  min-height: 0;
}

body[data-guest-view="hotel"] .hero-bleed .hero-figure img {
  flex: none;
  height: clamp(8rem, 13vw, 12rem);
}

body[data-guest-view="hotel"] .hero-bleed .hero-figure figcaption {
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
}

body[data-guest-view="hotel"] .hero-figure .sticker-hero {
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
}

body[data-guest-view="hotel"] .hero-copy h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }

@media (max-width: 48em) {
  body[data-guest-view="hotel"] .hero-bleed .hero-figure { height: auto; }
  body[data-guest-view="hotel"] .hero-bleed .hero-figure img { height: 7.5rem; }
}

/* Reserve the availability space while it loads so the page below never jumps. */
#availability-root:has(> .context-loading) { min-height: min(70vh, 40rem); }

/* The hotel prompt keeps the same reserve: replacing the static loading line
   must not collapse the section after first paint. */
#availability-root:has(> .availability-prompt) { min-height: min(70vh, 40rem); }

/* --- Trust pages and long words ------------------------------------------------------ */

/* A word longer than its line breaks only as a last resort; headings carry a
   soft hyphen at the compound joint instead (see Typography below). */
main :is(h1, h2, h3, p, li) { overflow-wrap: break-word; }

/* URLs and e-mail addresses in running text may break anywhere, but never
   gain a hyphen. */
main a:not([class]) { color: var(--pool); overflow-wrap: anywhere; hyphens: manual; }

address { font-style: normal; }

/* biome-ignore lint/style/noDescendingSpecificity: the QR-view hero heading sits in .hero-copy inside .hero-split, never inside a .section-block; the two h1 rules never match the same element */
.section-block h1 {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  /* Below 354 px the title steps down to 1.9rem, so "Handtuch-Rennen" keeps
     one 280 px line on a 320 px phone. */
  font-size: clamp(1.9rem, max(min(9.5vw, 2.1rem), 4.2vw), 3.3rem);
  line-height: 1.1;
}

body:is([data-page="about"], [data-page="contact"], [data-page="privacy"]) .section-block :is(p, ul, address) {
  max-width: 68ch;
}

body[data-page="privacy"] .section-block h2 {
  margin: 2rem 0 0.6rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

/* --- Typography: line breaks ------------------------------------------------------- */

/* One rule set for every page, language and width (320 to 1920 px). :where()
   keeps it at zero specificity, so component rules keep winning, and the
   text-wrap-style longhand leaves text-wrap-mode alone, so a white-space:
   nowrap container still keeps its cells and items on one line. Running text
   avoids a lone word in its last line. */
:where(p, li, dd, td, th, address) {
  text-wrap-style: pretty;
  hyphens: manual;
}

/* German running text hyphenates long words (12+ characters, 5 on each side;
   Chromium counts trailing punctuation, so 10 4 4 still split "Zeit-druck,")
   below 768 px only, where the narrow column needs it; from 768 px nothing
   hyphenates on its own. Display text, titles and footers never do. Chromium
   treats words joined by a no-break space as one word, so product and company
   names in hyphenated paragraphs sit in a .nobreak span. */
@media (max-width: 767.98px) {
  :where(p, li):where(:lang(de)):where(:not(.lede, .kicker, .section-note, .panel-note, .badge, .session-state, [class*="title"], .bridge-card p, .site-footer *)) {
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

.nobreak { white-space: nowrap; }

/* Display text balances its lines and never hyphenates on its own: a compound
   too long for the 320 px column carries a soft hyphen (U+00AD) at its joint
   in the HTML and the message catalog. */
:where(h1, h2, h3, h4, legend, .kicker, .lede, .section-note, .panel-note, figcaption, .badge, .sticker, .session-state, .plan-unit-name, .row-name) {
  text-wrap-style: balance;
  hyphens: manual;
}

:where(h1, h2) { line-height: 1.2; }

:where(h3, h4) { line-height: 1.3; }

/* Controls never hyphenate; a long label that has to wrap on a narrow phone
   wraps into two balanced lines, never with one word alone. */
:where(button, .btn, .split-link, .addon-option, .hotel-link-name) {
  text-wrap-style: balance;
  hyphens: manual;
}

/* Full-width phone buttons center their label, so a slim inline padding costs
   nothing and keeps labels like "Retener la selección un momento" on one line
   from 375 px. */
@media (max-width: 30em) {
  .hero-cta .btn,
  .session-actions .btn,
  .availability-actions .btn { padding-inline: 0.5rem; }
}

/* Short links and names never wrap inside their label. */
.footer-links a,
.footer-maker a,
.slot-option,
.view-option { white-space: nowrap; }