Hotel - defuss-shadcn

Hotel Ebbstein, Möwensund
Change the dates or the guests: every room card says whether it fits and what the nights cost - the rate times the nights plus the city tax of €2.80 per adult and night. A room's photo or Photos & details opens its dialog with a photo viewer; Request carries the dates into the booking request, which sends to a thank-you. The water under the search is a Shader; the key tag, the note from the cutter and the 3 for 2 stamp carry the check-in times, the catch and the offer. The Look select switches between Harbour, Linen and Night.
<style>
  @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Instrument+Sans:wght@400;500;600&display=swap');
  /* Hotel Ebbstein: fourteen rooms in the old net loft on the north quay of a Baltic harbour town. Bands of one 78rem
     grid: the header, the hero standing on the water with the search, the rooms, the restaurant, the packages, the way
     there, the reviews, the questions and the footer. Looks: Harbour (white, harbour blue, a signal red), Linen (sand
     and terracotta, paper tags) and Night (navy and lantern amber). */
  #in-hotel {
    --background: oklch(0.985 0.006 230);
    --foreground: oklch(0.24 0.045 250);
    --card: oklch(1 0 0);
    --card-foreground: var(--foreground);
    --popover: oklch(1 0 0);
    --popover-foreground: var(--foreground);
    --muted: oklch(0.955 0.012 230);
    --muted-foreground: oklch(0.47 0.035 245);
    --border: oklch(0.9 0.015 235);
    --input: oklch(0.85 0.02 235);
    --primary: oklch(0.42 0.1 245);
    --primary-foreground: oklch(0.985 0.006 230);
    --secondary: oklch(0.95 0.015 230);
    --secondary-foreground: var(--foreground);
    --accent: oklch(0.94 0.02 230);
    --accent-foreground: var(--foreground);
    --ring: var(--primary);
    --radius: 0.75rem;
    --radius-sm: max(0px, calc(var(--radius) - 4px));
    --radius-md: max(0px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --ht-band: oklch(0.955 0.014 230);
    --ht-signal: oklch(0.55 0.19 28);
    --ht-tag: oklch(0.99 0.004 230);
    --ht-tag-ink: oklch(0.24 0.045 250);
    --ht-tag-edge: oklch(0.42 0.1 245);
    --ht-ring: oklch(0.78 0.11 85);
    --ht-note: oklch(0.99 0.004 90);
    --ht-note-ink: oklch(0.24 0.045 250);
    --ht-pin: oklch(0.55 0.19 28);
    --ht-deep: oklch(0.4 0.09 240);
    --ht-shallow: oklch(0.6 0.08 220);
    --ht-light: oklch(0.94 0.03 210);
    --ht-display: 'Fraunces', Georgia, serif;
    --ht-gutter: max(clamp(1rem, 4vw, 2.5rem), calc((100% - 78rem) / 2));
    color-scheme: light;
    box-sizing: border-box;
    container: ht / inline-size;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: clip;
    background: var(--background);
    color: var(--foreground);
    font-family: 'Instrument Sans', var(--font-sans);
    line-height: 1.55;
  }
  #in-hotel[data-look='linen'] {
    --background: oklch(0.965 0.018 80);
    --foreground: oklch(0.27 0.03 50);
    --card: oklch(0.985 0.01 80);
    --popover: oklch(0.985 0.01 80);
    --muted: oklch(0.93 0.022 78);
    --muted-foreground: oklch(0.47 0.035 55);
    --border: oklch(0.87 0.025 75);
    --input: oklch(0.8 0.03 70);
    --primary: oklch(0.52 0.13 42);
    --primary-foreground: oklch(0.985 0.01 80);
    --secondary: oklch(0.92 0.025 78);
    --accent: oklch(0.92 0.03 70);
    --radius: 0.25rem;
    --ht-band: oklch(0.935 0.026 78);
    --ht-signal: oklch(0.52 0.13 42);
    --ht-tag: oklch(0.8 0.065 72);
    --ht-tag-ink: oklch(0.27 0.03 50);
    --ht-tag-edge: oklch(0.6 0.06 65);
    --ht-ring: oklch(0.55 0.03 60);
    --ht-note: oklch(0.985 0.01 80);
    --ht-note-ink: oklch(0.27 0.03 50);
    --ht-pin: oklch(0.86 0.04 85 / 0.85);
    --ht-deep: oklch(0.45 0.05 200);
    --ht-shallow: oklch(0.68 0.05 180);
    --ht-light: oklch(0.95 0.03 85);
  }
  #in-hotel[data-look='night'] {
    color-scheme: dark;
    --background: oklch(0.16 0.035 265);
    --foreground: oklch(0.93 0.02 85);
    --card: oklch(0.2 0.04 265);
    --popover: oklch(0.2 0.04 265);
    --muted: oklch(0.23 0.04 265);
    --muted-foreground: oklch(0.76 0.03 85);
    --border: oklch(0.31 0.045 265);
    --input: oklch(0.36 0.045 265);
    --primary: oklch(0.82 0.13 78);
    --primary-foreground: oklch(0.16 0.035 265);
    --secondary: oklch(0.25 0.045 265);
    --accent: oklch(0.26 0.045 265);
    --radius: 0.5rem;
    --ht-band: oklch(0.19 0.04 265);
    --ht-signal: oklch(0.82 0.13 78);
    --ht-tag: oklch(0.8 0.12 80);
    --ht-tag-ink: oklch(0.18 0.035 265);
    --ht-tag-edge: oklch(0.62 0.11 70);
    --ht-ring: oklch(0.86 0.1 85);
    --ht-note: oklch(0.24 0.045 265);
    --ht-note-ink: oklch(0.93 0.02 85);
    --ht-pin: oklch(0.82 0.13 78);
    --ht-deep: oklch(0.14 0.04 265);
    --ht-shallow: oklch(0.3 0.07 255);
    --ht-light: oklch(0.85 0.12 80);
  }
  #in-hotel [hidden] {
    display: none !important;
  }
  #in-hotel :is(h1, h2, h3, .dialog-title, .card-title, .mk-section-header-title, .mk-faq-title) {
    font-family: var(--ht-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  #in-hotel[data-look='linen'] :is(h1, h2, .mk-section-header-title, .mk-faq-title) {
    font-weight: 400;
    font-style: italic;
  }
  /* layers of one look */
  #in-hotel [data-for] {
    display: none;
  }
  #in-hotel[data-look='harbour'] [data-for~='harbour'],
  #in-hotel[data-look='linen'] [data-for~='linen'],
  #in-hotel[data-look='night'] [data-for~='night'] {
    display: block;
  }
  /* the bands: one 78rem grid, alternating grounds */
  #in-hotel > :is(section, footer) {
    box-sizing: border-box;
    width: 100%;
    padding: clamp(3.5rem, 7vw, 6rem) var(--ht-gutter);
    scroll-margin-top: 4.5rem;
  }
  #in-hotel > .ht-alt {
    background: var(--ht-band);
  }
  #in-hotel .mk-section-header {
    max-width: none;
    margin: 0 0 2.5rem;
    padding: 0;
  }
  #in-hotel .mk-section-header-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.05;
  }
  #in-hotel .mk-section-header-eyebrow {
    color: var(--primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8125rem;
  }
  /* the header bar */
  #in-hotel .mk-header {
    border-block-end: 1px solid var(--border);
  }
  #in-hotel .mk-header-inner {
    max-width: none;
    padding-inline: var(--ht-gutter);
  }
  #in-hotel .mk-header-brand,
  #in-hotel .mk-header-name {
    color: var(--foreground);
  }
  #in-hotel .mk-header-name {
    font:
      600 1.375rem/1 var(--ht-display),
      Georgia,
      serif;
  }
  #in-hotel .mk-header-brand small {
    display: block;
    color: var(--muted-foreground);
    font:
      500 0.6875rem/1.2 'Instrument Sans',
      sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  #in-hotel .mk-header-brand svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--primary);
  }
  #in-hotel .mk-header-nav .nav-menu-link {
    font-size: 0.9375rem;
  }
  #in-hotel .mk-header-actions .select {
    width: auto;
  }
  #in-hotel .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #in-hotel .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  /* the hero: the promise beside the harbour, then the quay edge and the water with the search on it */
  #in-hotel > .ht-hero {
    padding: 0;
  }
  #in-hotel .ht-hero .mk-hero {
    max-width: none;
    margin: 0;
    padding: clamp(3rem, 7vw, 5.5rem) var(--ht-gutter) clamp(3rem, 6vw, 4.5rem);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  #in-hotel .mk-hero-copy {
    max-width: 36rem;
  }
  #in-hotel .mk-hero-badge {
    border-color: var(--border);
    background: var(--card);
    color: var(--muted-foreground);
  }
  #in-hotel .mk-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.02;
    font-weight: 600;
  }
  #in-hotel .mk-hero-title em {
    color: var(--primary);
    font-weight: 400;
  }
  #in-hotel .mk-hero-desc {
    font-size: 1.125rem;
    color: var(--muted-foreground);
  }
  #in-hotel .ht-photo {
    position: relative;
    margin: 0;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  #in-hotel .ht-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 12rem 12rem var(--radius-xl) var(--radius-xl);
  }
  #in-hotel[data-look='linen'] .ht-photo img {
    border-radius: var(--radius);
    box-shadow:
      0 0 0 0.6rem var(--card),
      0 0 0 calc(0.6rem + 1px) var(--border);
  }
  #in-hotel .ht-photo figcaption {
    margin-block-start: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  /* the key tag hung over the photo: the check-in and check-out times */
  #in-hotel .ht-keytag {
    position: absolute;
    top: 8%;
    left: -1.75rem;
    display: grid;
    justify-items: center;
    width: 8.5rem;
    rotate: -9deg;
    transform-origin: 50% 0;
    filter: drop-shadow(0 0.6rem 0.8rem oklch(0.2 0.04 250 / 0.3));
  }
  #in-hotel .ht-keytag-ring {
    width: 2.4rem;
    height: 2.4rem;
    margin-block-end: -0.9rem;
    border: 0.3rem solid var(--ht-ring);
    border-radius: 50%;
  }
  #in-hotel .ht-keytag-body {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    width: 100%;
    padding: 1.4rem 0.75rem 1rem;
    border: 2px solid var(--ht-tag-edge);
    border-radius: 3.5rem 3.5rem 1.2rem 1.2rem;
    background: var(--ht-tag);
    color: var(--ht-tag-ink);
    text-align: center;
  }
  #in-hotel .ht-keytag-body::before {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    margin-block-end: 0.35rem;
    border: 2px solid var(--ht-tag-edge);
    border-radius: 50%;
  }
  #in-hotel .ht-keytag b {
    font: 600 2.25rem/1 var(--ht-display);
  }
  #in-hotel .ht-keytag small {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #in-hotel .ht-keytag span {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
  }
  #in-hotel[data-look='linen'] .ht-keytag-body {
    border-style: dashed;
    border-radius: 0.3rem;
    clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  }
  #in-hotel[data-look='linen'] .ht-keytag-ring {
    width: 0.3rem;
    height: 3rem;
    margin-block-end: -1.4rem;
    border: 0;
    border-radius: 0;
    background: var(--ht-ring);
  }
  #in-hotel[data-look='night'] .ht-keytag-body {
    box-shadow: 0 0 2.5rem -0.5rem oklch(0.82 0.13 78 / 0.6);
  }
  /* the quay edge and the water: a Shader, the search on top */
  #in-hotel .ht-water {
    position: relative;
    isolation: isolate;
    padding: clamp(1.75rem, 4vw, 3rem) var(--ht-gutter);
    border-block-start: 0.5rem solid var(--ht-tag-edge);
    background: var(--ht-deep);
  }
  #in-hotel .ht-water .shader {
    opacity: 0.9;
  }
  #in-hotel .ht-search {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: 0 1.5rem 3rem -1.5rem oklch(0.15 0.04 250 / 0.55);
  }
  #in-hotel .ht-field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
  }
  #in-hotel .ht-field .label {
    margin: 0;
  }
  #in-hotel .ht-field :is(.input, .select, .date-input) {
    width: 100%;
  }
  #in-hotel .ht-search output {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  #in-hotel .ht-search output b {
    color: var(--foreground);
  }
  /* the rooms */
  #in-hotel .ht-rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
  }
  #in-hotel .ht-room {
    display: flex;
    flex-direction: column;
    transition: opacity 0.25s;
  }
  #in-hotel .ht-room .card-body {
    flex: 1;
  }
  #in-hotel button.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--muted);
    cursor: zoom-in;
  }
  #in-hotel button.card-media img {
    transition: scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #in-hotel button.card-media:hover img {
    scale: 1.04;
  }
  #in-hotel button.card-media:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: -3px;
  }
  #in-hotel .ht-room-tag {
    position: absolute;
    inset: auto auto 0.75rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: oklch(0.15 0.03 250 / 0.7);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
  }
  #in-hotel .ht-room-tag svg {
    width: 0.9rem;
    height: 0.9rem;
  }
  #in-hotel .ht-fit {
    position: absolute;
    inset: 0.75rem 0.75rem auto auto;
  }
  #in-hotel .ht-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
    margin: 0;
  }
  #in-hotel .ht-facts dt {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #in-hotel .ht-facts dd {
    margin: 0;
    font-weight: 500;
  }
  #in-hotel .ht-rate {
    margin: 1rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  #in-hotel .ht-rate b {
    color: var(--foreground);
    font: 600 1.5rem/1 var(--ht-display);
  }
  #in-hotel .ht-room .card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  #in-hotel .ht-room .ht-rate {
    margin-block-start: auto;
    padding-block-start: 1rem;
  }
  #in-hotel .ht-total {
    display: grid;
    gap: 0.1rem;
    margin-block-start: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
  #in-hotel .ht-total b {
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 600;
  }
  #in-hotel .ht-room[data-fit='no'] :is(.card-media img, .card-header, .ht-facts, .ht-rate) {
    opacity: 0.55;
  }
  #in-hotel .ht-room[data-fit='no'] .ht-total {
    background: color-mix(in oklch, var(--ht-signal) 12%, var(--card));
  }
  #in-hotel .ht-room .card-footer {
    flex-wrap: wrap;
  }
  /* the room dialogs: a photo viewer beside the details */
  #in-hotel dialog.ht-room-dialog {
    max-width: 60rem;
  }
  /* the request is a two-column form: wider than the Dialog's lg */
  #in-hotel dialog.ht-book {
    max-width: 40rem;
  }
  #in-hotel .ht-room-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  #in-hotel .ht-viewer {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--muted);
  }
  #in-hotel .ht-viewer .mk-media-gallery-track {
    border-radius: var(--radius-lg);
  }
  #in-hotel .ht-viewer .mk-media-gallery-track img {
    aspect-ratio: 4 / 3;
    max-height: none;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }
  #in-hotel .ht-viewer .mk-media-gallery-track p {
    color: var(--muted-foreground);
    text-align: start;
  }
  #in-hotel .ht-viewer .mk-media-gallery-track:focus-visible {
    outline-color: var(--ring);
  }
  #in-hotel .ht-viewer-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
  }
  #in-hotel .ht-viewer-steps div {
    display: flex;
    gap: 0.5rem;
  }
  #in-hotel .ht-amenities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
  }
  #in-hotel .ht-amenities li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }
  #in-hotel .ht-amenities svg {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin-block-start: 0.15rem;
    color: var(--primary);
  }
  #in-hotel .ht-sub {
    margin: 1.25rem 0 0.6rem;
    font-family: 'Instrument Sans', var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #in-hotel .ht-x {
    position: absolute;
    inset: 0.75rem 0.75rem auto auto;
    z-index: 1;
    background: var(--popover);
  }
  #in-hotel .dialog .dialog-footer {
    flex-wrap: wrap;
  }
  #in-hotel .dialog-title {
    font-size: 1.5rem;
  }
  #in-hotel .mk-header-sheet-actions {
    display: grid;
  }
  /* the restaurant and the bar */
  #in-hotel .ht-dining {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  #in-hotel .ht-dining .mk-section-header {
    margin-block-end: 1.5rem;
  }
  #in-hotel .ht-hours {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 2rem;
  }
  #in-hotel .ht-hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px dashed var(--border);
  }
  #in-hotel .ht-hours dt {
    font-weight: 600;
  }
  #in-hotel .ht-hours dd {
    margin: 0;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  #in-hotel .ht-menu {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-hotel .ht-menu li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 1rem;
  }
  #in-hotel .ht-menu b {
    font: 600 1.125rem/1.3 var(--ht-display);
  }
  #in-hotel .ht-menu span {
    grid-column: 1;
    color: var(--muted-foreground);
    font-size: 0.9rem;
  }
  #in-hotel .ht-menu i {
    grid-row: 1;
    grid-column: 2;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  #in-hotel .ht-plates {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
  }
  #in-hotel .ht-plates img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }
  #in-hotel .ht-plates img:first-child {
    grid-row: span 2;
    min-height: 24rem;
  }
  /* the note pinned to the photos: today's catch */
  #in-hotel .ht-note {
    position: absolute;
    left: -1.5rem;
    bottom: -1.75rem;
    width: min(17rem, 80%);
    padding: 1.5rem 1.25rem 1.1rem;
    background: var(--ht-note);
    color: var(--ht-note-ink);
    rotate: -3deg;
    box-shadow: 0 1rem 2rem -1rem oklch(0.15 0.03 250 / 0.5);
  }
  #in-hotel .ht-note p {
    margin: 0;
    font: italic 400 1.0625rem/1.35 var(--ht-display);
  }
  #in-hotel .ht-note small {
    display: block;
    margin-block-end: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  #in-hotel .ht-pin {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / 0.6), transparent 45%), var(--ht-pin);
    box-shadow: 0 0.2rem 0.3rem oklch(0 0 0 / 0.35);
  }
  #in-hotel .ht-tape {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    width: 5rem;
    height: 1.4rem;
    translate: -50% 0;
    rotate: 4deg;
    background: var(--ht-pin);
  }
  /* the packages and the stamp */
  #in-hotel .ht-offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.25rem;
  }
  #in-hotel .ht-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  #in-hotel .ht-offer .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #in-hotel .ht-offer:has(.ht-stamp) .card-header {
    padding-inline-end: 6.5rem;
  }
  #in-hotel .ht-offer ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  #in-hotel .ht-offer li {
    display: flex;
    gap: 0.5rem;
  }
  #in-hotel .ht-offer li svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-block-start: 0.25rem;
    color: var(--primary);
  }
  #in-hotel .ht-price {
    margin: auto 0 0;
    padding-block-start: 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  #in-hotel .ht-price b {
    color: var(--foreground);
    font: 600 1.75rem/1 var(--ht-display);
  }
  #in-hotel .ht-stamp {
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    display: grid;
    place-content: center;
    width: 6rem;
    aspect-ratio: 1;
    border: 3px double var(--ht-signal);
    border-radius: 50%;
    background: var(--card);
    color: var(--ht-signal);
    rotate: 12deg;
    text-align: center;
    line-height: 1;
  }
  #in-hotel .ht-stamp b {
    font: 600 1.3rem/1 var(--ht-display);
  }
  #in-hotel .ht-stamp small {
    margin-block-start: 0.2rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  #in-hotel[data-look='night'] .ht-stamp {
    box-shadow: 0 0 1.5rem -0.25rem oklch(0.82 0.13 78 / 0.5);
  }
  /* getting here: the map keeps the drawing's proportions, so the pins sit on what they name */
  #in-hotel .mk-location-map-canvas {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }
  #in-hotel .ht-depth {
    fill: none;
    stroke: var(--background);
    stroke-width: 1.5;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    opacity: 0.7;
  }
  #in-hotel .ht-light {
    fill: var(--ht-ring);
    stroke: var(--background);
    stroke-width: 3;
  }
  #in-hotel .ht-park-sign {
    fill: var(--primary);
  }
  #in-hotel .ht-park-p {
    fill: var(--primary-foreground);
    font:
      700 15px/1 'Instrument Sans',
      sans-serif;
  }
  #in-hotel .ht-map-label {
    fill: var(--muted-foreground);
    font:
      600 13px/1 'Instrument Sans',
      sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  #in-hotel .ht-mole {
    fill: none;
    stroke: var(--ht-tag-edge);
    stroke-width: 9;
    stroke-linecap: round;
  }
  #in-hotel .mk-location-map-water {
    fill: color-mix(in oklab, var(--ht-shallow) 45%, var(--muted));
  }
  #in-hotel .ht-quay {
    fill: none;
    stroke: var(--ht-tag-edge);
    stroke-width: 6;
  }
  #in-hotel .ht-rail {
    fill: none;
    stroke: var(--muted-foreground);
    stroke-width: 3;
    stroke-dasharray: 10 6;
  }
  #in-hotel .ht-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem 2rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
  }
  #in-hotel .ht-ways li {
    align-content: start;
    grid-template-rows: auto 1fr;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.85rem;
  }
  #in-hotel .ht-ways svg {
    grid-row: span 2;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
  }
  #in-hotel .ht-ways b {
    font-size: 1.0625rem;
  }
  #in-hotel .ht-ways span {
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  /* reviews */
  #in-hotel .ht-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: -1rem 0 2rem;
  }
  #in-hotel .ht-score b {
    font: 600 2.5rem/1 var(--ht-display);
  }
  #in-hotel .rating {
    color: var(--ht-signal);
  }
  #in-hotel .mk-testimonial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
  }
  #in-hotel .mk-testimonial-card-text p {
    font: 400 1.125rem/1.45 var(--ht-display);
  }
  /* questions */
  #in-hotel .mk-faq {
    max-width: none;
    padding: 0;
  }
  #in-hotel .mk-faq-eyebrow {
    color: var(--primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #in-hotel .mk-faq-split > :first-child {
    top: 6rem;
  }
  #in-hotel .mk-faq-accordion {
    max-width: none;
  }
  /* the footer */
  #in-hotel > .mk-footer {
    padding-block: 0;
    background: var(--ht-band);
  }
  #in-hotel .mk-footer-inner {
    max-width: none;
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  }
  #in-hotel .mk-footer-nav {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 2rem;
  }
  #in-hotel .mk-footer-list {
    gap: 0.5rem;
    font-size: 0.9375rem;
  }
  #in-hotel .mk-footer-list address {
    font-style: normal;
  }
  #in-hotel .mk-footer-list button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: start;
  }
  #in-hotel .mk-footer-list button:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  #in-hotel .mk-footer-list button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  #in-hotel .mk-footer-brand {
    color: var(--foreground);
    font: 600 1.25rem/1 var(--ht-display);
  }
  /* booking request and the legal dialogs */
  #in-hotel .ht-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  #in-hotel .ht-form .ht-wide {
    grid-column: 1 / -1;
  }
  #in-hotel .ht-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #in-hotel .ht-check .label {
    margin: 0;
  }
  #in-hotel .ht-estimate {
    display: block;
    margin-block-start: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    font-size: 0.9rem;
  }
  #in-hotel .ht-book:not([data-sent]) .ht-done,
  #in-hotel .ht-book[data-sent] form {
    display: none;
  }
  #in-hotel .ht-done {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
  }
  #in-hotel .ht-done > svg {
    width: 3rem;
    height: 3rem;
    padding: 0.6rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
  }
  #in-hotel .ht-done p {
    margin: 0;
    color: var(--muted-foreground);
  }
  #in-hotel .ht-legal p {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
  }
  #in-hotel .ht-legal h3 {
    margin: 1rem 0 0.35rem;
    font-size: 1rem;
  }
  #in-hotel :is(.card-media img, .ht-room) {
    transition-duration: 0.25s;
  }
  /* the links fit one row only on a wide page; narrower, the menu button opens them in the Sheet */
  #in-hotel .mk-header-nav .nav-menu-link {
    white-space: nowrap;
  }
  #in-hotel .mk-hero-actions {
    flex-wrap: wrap;
  }
  @container ht (max-width: 64rem) {
    #in-hotel .mk-header-nav {
      display: none;
    }
    #in-hotel .mk-header-menu {
      display: inline-flex;
    }
  }
  @container ht (max-width: 60rem) {
    #in-hotel .ht-search {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #in-hotel .ht-search .btn {
      grid-column: 1 / -1;
    }
    #in-hotel .ht-dining {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-hotel .ht-room-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @container ht (max-width: 36rem) {
    #in-hotel .ht-keytag {
      left: auto;
      right: 0.5rem;
      top: -1rem;
      width: 7rem;
      rotate: 7deg;
    }
    #in-hotel .ht-keytag b {
      font-size: 1.75rem;
    }
    #in-hotel .ht-note {
      left: 0.5rem;
    }
    #in-hotel :is(.ht-form, .ht-amenities, .ht-plates) {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-hotel .ht-plates {
      grid-template-rows: none;
      margin-block-end: 3rem;
    }
    #in-hotel .ht-plates img:first-child {
      grid-row: auto;
      min-height: 14rem;
    }
    #in-hotel .ht-plates img:not(:first-child) {
      display: none;
    }
    #in-hotel .mk-header-actions .select {
      max-width: 7.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #in-hotel :is(.ht-room, button.card-media img) {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    #in-hotel :is(.ht-keytag-body, .ht-note, .ht-stamp) {
      border: 2px solid CanvasText;
    }
  }
  /* -- modes: each look in light and dark, derived from the palettes above (the other mode of each look) -- */
  .dark #in-hotel[data-look='harbour'] {
    color-scheme: dark;
    --background: oklch(0.18 0.03 250);
    --foreground: oklch(0.95 0.01 230);
    --card: oklch(0.22 0.035 250);
    --popover: oklch(0.22 0.035 250);
    --muted: oklch(0.25 0.035 250);
    --muted-foreground: oklch(0.76 0.03 240);
    --border: oklch(0.32 0.04 250);
    --input: oklch(0.38 0.04 250);
    --primary: oklch(0.76 0.1 235);
    --primary-foreground: oklch(0.18 0.03 250);
    --secondary: oklch(0.27 0.04 250);
    --accent: oklch(0.28 0.04 245);
    --ht-band: oklch(0.205 0.033 250);
    --ht-signal: oklch(0.7 0.16 28);
    --ht-tag: oklch(0.95 0.01 230);
    --ht-tag-ink: oklch(0.2 0.04 250);
    --ht-tag-edge: oklch(0.55 0.1 240);
    --ht-note: oklch(0.95 0.01 230);
    --ht-note-ink: oklch(0.2 0.04 250);
    --ht-pin: oklch(0.65 0.17 28);
    --ht-deep: oklch(0.2 0.05 245);
    --ht-shallow: oklch(0.38 0.08 230);
    --ht-light: oklch(0.8 0.06 215);
  }
  .dark #in-hotel[data-look='linen'] {
    color-scheme: dark;
    --background: oklch(0.2 0.015 60);
    --foreground: oklch(0.94 0.015 80);
    --card: oklch(0.24 0.018 60);
    --popover: oklch(0.24 0.018 60);
    --muted: oklch(0.27 0.02 60);
    --muted-foreground: oklch(0.77 0.025 70);
    --border: oklch(0.34 0.02 60);
    --input: oklch(0.4 0.025 60);
    --primary: oklch(0.72 0.12 45);
    --primary-foreground: oklch(0.2 0.015 60);
    --secondary: oklch(0.28 0.02 60);
    --accent: oklch(0.29 0.025 60);
    --ht-band: oklch(0.225 0.017 60);
    --ht-signal: oklch(0.72 0.12 45);
    --ht-tag: oklch(0.7 0.06 70);
    --ht-tag-ink: oklch(0.2 0.02 60);
    --ht-tag-edge: oklch(0.5 0.05 65);
    --ht-ring: oklch(0.6 0.03 60);
    --ht-note: oklch(0.9 0.02 80);
    --ht-note-ink: oklch(0.22 0.02 60);
    --ht-pin: oklch(0.75 0.04 85 / 0.8);
    --ht-deep: oklch(0.28 0.04 200);
    --ht-shallow: oklch(0.45 0.05 185);
    --ht-light: oklch(0.85 0.04 85);
  }
  :root:not(.dark) #in-hotel[data-look='night'] {
    color-scheme: light;
    --background: oklch(0.93 0.02 265);
    --foreground: oklch(0.22 0.04 265);
    --card: oklch(0.97 0.012 265);
    --popover: oklch(0.97 0.012 265);
    --muted: oklch(0.9 0.025 265);
    --muted-foreground: oklch(0.43 0.04 265);
    --border: oklch(0.84 0.03 265);
    --input: oklch(0.76 0.035 265);
    --primary: oklch(0.47 0.11 60);
    --primary-foreground: oklch(0.98 0.01 85);
    --secondary: oklch(0.89 0.03 265);
    --accent: oklch(0.88 0.03 265);
    --ht-band: oklch(0.9 0.025 265);
    --ht-signal: oklch(0.5 0.12 60);
    --ht-tag: oklch(0.8 0.12 80);
    --ht-tag-ink: oklch(0.2 0.04 265);
    --ht-tag-edge: oklch(0.55 0.1 70);
    --ht-ring: oklch(0.6 0.1 75);
    --ht-note: oklch(0.22 0.04 265);
    --ht-note-ink: oklch(0.95 0.02 85);
    --ht-pin: oklch(0.8 0.12 80);
    --ht-deep: oklch(0.24 0.06 265);
    --ht-shallow: oklch(0.42 0.08 260);
    --ht-light: oklch(0.85 0.12 80);
  }
  /* -- modes: end -- */
</style>
<div id="in-hotel" data-look="harbour">
  <header class="mk-header" data-variant="sticky">
    <div class="mk-header-inner">
      <a class="mk-header-brand" href="#ht-top">
        <svg
          viewBox="0 0 32 32"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          aria-hidden="true"
        >
          <path d="M3 21c3 0 3-2 6.5-2s3.5 2 6.5 2 3-2 6.5-2 3.5 2 6.5 2" />
          <path d="M3 26c3 0 3-2 6.5-2s3.5 2 6.5 2 3-2 6.5-2 3.5 2 6.5 2" />
          <path d="M8 16V8l8-5 8 5v8" />
          <path d="M13 16v-5h6v5" />
        </svg>
        <span><span class="mk-header-name">Ebbstein</span><small>Hotel · Möwensund</small></span>
      </a>
      <nav class="mk-header-nav" aria-label="Main">
        <ul class="nav-menu-list">
          <li class="nav-menu-item"><a class="nav-menu-link" href="#ht-rooms">Rooms</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#ht-dining">Restaurant</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#ht-offers">Packages</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#ht-way">Getting here</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#ht-faq">FAQ</a></li>
        </ul>
      </nav>
      <div class="mk-header-actions">
        <select class="select" data-size="sm" data-site-look aria-label="Look" style="width: auto">
          <option value="harbour">Harbour</option>
          <option value="linen">Linen</option>
          <option value="night">Night</option>
        </select>
        <label class="swap site-mode" data-variant="rotate" data-size="sm">
          <input type="checkbox" data-site-mode aria-label="Dark mode" />
          <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
          <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
        </label>
        <button
          class="btn mk-header-wide"
          data-size="sm"
          type="button"
          commandfor="ht-book"
          command="show-modal"
          data-ht-request
          >Book</button
        >
        <button
          class="btn mk-header-menu"
          data-variant="ghost"
          data-size="icon"
          type="button"
          commandfor="ht-menu"
          command="show-modal"
          aria-label="Open menu"
          ><i data-lucide="menu"></i
        ></button>
      </div>
    </div>
    <dialog id="ht-menu" class="sheet" data-side="right" aria-labelledby="ht-menu-title">
      <div class="sheet-content">
        <div class="sheet-header"><h2 class="sheet-title" id="ht-menu-title">Hotel Ebbstein</h2></div>
        <div class="sheet-body">
          <ul class="mk-header-sheet-nav">
            <li
              ><a href="#ht-rooms" data-sheet-close>Rooms <small>4 kinds, 14 rooms</small></a></li
            >
            <li><a href="#ht-dining" data-sheet-close>Restaurant &amp; bar</a></li>
            <li><a href="#ht-offers" data-sheet-close>Packages</a></li>
            <li><a href="#ht-way" data-sheet-close>Getting here</a></li>
            <li><a href="#ht-reviews" data-sheet-close>Reviews</a></li>
            <li><a href="#ht-faq" data-sheet-close>FAQ</a></li>
          </ul>
        </div>
        <div class="sheet-footer mk-header-sheet-actions">
          <button class="btn" type="button" commandfor="ht-book" command="show-modal" data-ht-request data-sheet-close
            >Request a stay</button
          >
        </div>
      </div>
      <button class="sheet-close-x" type="button" commandfor="ht-menu" command="close" aria-label="Close menu"
        ><i data-lucide="x"></i
      ></button>
    </dialog>
  </header>

  <section class="ht-hero" id="ht-top" aria-labelledby="ht-title">
    <div class="mk-hero" data-variant="split" data-align="start">
      <div class="mk-hero-copy">
        <span class="mk-hero-badge">14 rooms on the north quay</span>
        <h1 class="mk-hero-title" id="ht-title">Sleep above the harbour. <em>Breakfast</em> as the cutters come in.</h1>
        <p class="mk-hero-desc"
          >Hotel Ebbstein is the old net loft on Möwensund's Nordkai - brick below, larch above, the Baltic at the end
          of the quay. Fourteen rooms, a kitchen that buys from the boats and a bar that stays open as long as the
          lighthouse.</p
        >
        <div class="mk-hero-actions">
          <a class="btn" data-size="lg" href="#ht-rooms">See the rooms</a>
          <button
            class="btn"
            data-variant="outline"
            data-size="lg"
            type="button"
            commandfor="ht-book"
            command="show-modal"
            data-ht-request
            >Request a stay</button
          >
        </div>
      </div>
      <figure class="mk-hero-media ht-photo">
        <img
          src="https://picsum.photos/id/164/1000/800"
          alt="Old gabled houses along the water, rowing boats tied up below them"
        />
        <figcaption>The inner harbour, two minutes from the door.</figcaption>
        <div class="ht-keytag" role="note" aria-label="Check-in from 15:00, check-out until 11:00">
          <span class="ht-keytag-ring" aria-hidden="true"></span>
          <div class="ht-keytag-body" aria-hidden="true">
            <small>Room</small>
            <b>7</b>
            <span>Check-in from 15:00</span>
            <span>Check-out until 11:00</span>
          </div>
        </div>
      </figure>
    </div>
    <div class="ht-water">
      <div
        class="shader"
        data-variant="background"
        data-effect="water"
        data-colors="var(--ht-deep) var(--ht-shallow) var(--ht-light)"
        data-speed="0.3"
        data-fps="30"
        data-caustics="0.6"
        aria-hidden="true"
      ></div>
      <form class="ht-search" data-ht-search aria-label="Check the rooms for your dates">
        <div class="ht-field">
          <label class="label" for="ht-arrive">Arrival</label>
          <input class="date-input" type="date" id="ht-arrive" name="arrive" required />
        </div>
        <div class="ht-field">
          <label class="label" for="ht-depart">Departure</label>
          <input class="date-input" type="date" id="ht-depart" name="depart" required />
        </div>
        <div class="ht-field">
          <label class="label" for="ht-adults">Adults</label>
          <select class="select" id="ht-adults" name="adults">
            <option>1</option>
            <option selected>2</option>
            <option>3</option>
            <option>4</option>
          </select>
        </div>
        <div class="ht-field">
          <label class="label" for="ht-kids">Children under 16</label>
          <select class="select" id="ht-kids" name="kids">
            <option selected>0</option>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
        <button class="btn" data-size="lg" type="submit"><i data-lucide="bed-double"></i> Show rooms</button>
        <output data-ht-summary for="ht-arrive ht-depart ht-adults ht-kids" aria-live="polite"
          >Pick your dates to see which rooms fit and what they cost.</output
        >
      </form>
    </div>
  </section>

  <section id="ht-rooms" aria-labelledby="ht-rooms-title">
    <header class="mk-section-header" data-variant="split">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">Rooms</span>
        <h2 class="mk-section-header-title" id="ht-rooms-title">Four kinds of room, fourteen doors</h2>
        <p class="mk-section-header-desc"
          >Rates are per room and night with breakfast. The city tax of €2.80 per adult and night goes to the town;
          children under 16 stay free of it.</p
        >
      </div>
    </header>
    <div class="ht-rooms">
      <article class="card ht-room" data-room="cabin" data-rate="95" data-sleeps="1" aria-labelledby="ht-cabin-name">
        <button
          class="card-media"
          type="button"
          commandfor="ht-room-cabin"
          command="show-modal"
          aria-label="Photos of the Cabin"
        >
          <img
            src="https://picsum.photos/id/311/800/600"
            alt="A wooden chair by a window, the sea pale at dusk behind a white curtain"
          />
          <span class="ht-room-tag"><i data-lucide="images"></i> 3 photos</span>
          <span class="badge ht-fit" data-ht-fit></span>
        </button>
        <div class="card-body">
          <div class="card-header">
            <h3 class="card-title" id="ht-cabin-name">Cabin</h3>
            <p class="card-description">Under the eaves on the yard side, for one.</p>
          </div>
          <div class="card-content">
            <dl class="ht-facts">
              <div><dt>Size</dt><dd>16 m²</dd></div>
              <div><dt>Bed</dt><dd>1.20 m single</dd></div>
              <div><dt>View</dt><dd>Sea over the roofs</dd></div>
              <div><dt>Sleeps</dt><dd>1</dd></div>
            </dl>
            <p class="ht-rate"><b>€95</b> a night</p>
            <output class="ht-total" data-ht-total="cabin"></output>
          </div>
          <div class="card-footer">
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              commandfor="ht-room-cabin"
              command="show-modal"
              >Photos &amp; details</button
            >
            <button
              class="btn"
              data-size="sm"
              type="button"
              commandfor="ht-book"
              command="show-modal"
              data-ht-request="cabin"
              >Request</button
            >
          </div>
        </div>
      </article>
      <article
        class="card ht-room"
        data-room="harbour"
        data-rate="145"
        data-sleeps="2"
        aria-labelledby="ht-harbour-name"
      >
        <button
          class="card-media"
          type="button"
          commandfor="ht-room-harbour"
          command="show-modal"
          aria-label="Photos of the Harbour room"
        >
          <img
            src="https://picsum.photos/id/691/800/600"
            alt="A green mug on a bedside table beside rumpled white linen in morning light"
          />
          <span class="ht-room-tag"><i data-lucide="images"></i> 3 photos</span>
          <span class="badge ht-fit" data-ht-fit></span>
        </button>
        <div class="card-body">
          <div class="card-header">
            <h3 class="card-title" id="ht-harbour-name">Harbour room</h3>
            <p class="card-description">The quay below the window, the masts at eye level.</p>
          </div>
          <div class="card-content">
            <dl class="ht-facts">
              <div><dt>Size</dt><dd>24 m²</dd></div>
              <div><dt>Bed</dt><dd>1.80 m double</dd></div>
              <div><dt>View</dt><dd>Inner harbour</dd></div>
              <div><dt>Sleeps</dt><dd>2</dd></div>
            </dl>
            <p class="ht-rate"><b>€145</b> a night</p>
            <output class="ht-total" data-ht-total="harbour"></output>
          </div>
          <div class="card-footer">
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              commandfor="ht-room-harbour"
              command="show-modal"
              >Photos &amp; details</button
            >
            <button
              class="btn"
              data-size="sm"
              type="button"
              commandfor="ht-book"
              command="show-modal"
              data-ht-request="harbour"
              >Request</button
            >
          </div>
        </div>
      </article>
      <article class="card ht-room" data-room="loft" data-rate="195" data-sleeps="3" aria-labelledby="ht-loft-name">
        <button
          class="card-media"
          type="button"
          commandfor="ht-room-loft"
          command="show-modal"
          aria-label="Photos of the Loft"
        >
          <img
            src="https://picsum.photos/id/834/800/600"
            alt="Three framed prints above a dark green buttoned leather sofa"
          />
          <span class="ht-room-tag"><i data-lucide="images"></i> 3 photos</span>
          <span class="badge ht-fit" data-ht-fit></span>
        </button>
        <div class="card-body">
          <div class="card-header">
            <h3 class="card-title" id="ht-loft-name">Loft</h3>
            <p class="card-description">Under the old roof beams, with a sofa bed.</p>
          </div>
          <div class="card-content">
            <dl class="ht-facts">
              <div><dt>Size</dt><dd>36 m²</dd></div>
              <div><dt>Bed</dt><dd>1.80 m + sofa bed</dd></div>
              <div><dt>View</dt><dd>Harbour mouth</dd></div>
              <div><dt>Sleeps</dt><dd>3</dd></div>
            </dl>
            <p class="ht-rate"><b>€195</b> a night</p>
            <output class="ht-total" data-ht-total="loft"></output>
          </div>
          <div class="card-footer">
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              commandfor="ht-room-loft"
              command="show-modal"
              >Photos &amp; details</button
            >
            <button
              class="btn"
              data-size="sm"
              type="button"
              commandfor="ht-book"
              command="show-modal"
              data-ht-request="loft"
              >Request</button
            >
          </div>
        </div>
      </article>
      <article class="card ht-room" data-room="family" data-rate="235" data-sleeps="4" aria-labelledby="ht-family-name">
        <button
          class="card-media"
          type="button"
          commandfor="ht-room-family"
          command="show-modal"
          aria-label="Photos of the Family room"
        >
          <img
            src="https://picsum.photos/id/625/800/600"
            alt="A bright room with a wooden table, white chairs and tall windows"
          />
          <span class="ht-room-tag"><i data-lucide="images"></i> 3 photos</span>
          <span class="badge ht-fit" data-ht-fit></span>
        </button>
        <div class="card-body">
          <div class="card-header">
            <h3 class="card-title" id="ht-family-name">Family room</h3>
            <p class="card-description">Two rooms behind one door, a table for four.</p>
          </div>
          <div class="card-content">
            <dl class="ht-facts">
              <div><dt>Size</dt><dd>44 m²</dd></div>
              <div><dt>Beds</dt><dd>1.80 m + 2 singles</dd></div>
              <div><dt>View</dt><dd>Quay and old town</dd></div>
              <div><dt>Sleeps</dt><dd>4</dd></div>
            </dl>
            <p class="ht-rate"><b>€235</b> a night</p>
            <output class="ht-total" data-ht-total="family"></output>
          </div>
          <div class="card-footer">
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              commandfor="ht-room-family"
              command="show-modal"
              >Photos &amp; details</button
            >
            <button
              class="btn"
              data-size="sm"
              type="button"
              commandfor="ht-book"
              command="show-modal"
              data-ht-request="family"
              >Request</button
            >
          </div>
        </div>
      </article>
    </div>
  </section>

  <section id="ht-dining" class="ht-alt" aria-labelledby="ht-dining-title">
    <div class="ht-dining">
      <div>
        <header class="mk-section-header">
          <div class="mk-section-header-copy">
            <span class="mk-section-header-eyebrow">Restaurant &amp; bar</span>
            <h2 class="mk-section-header-title" id="ht-dining-title">The Kombüse cooks what the boats bring</h2>
            <p class="mk-section-header-desc"
              >Twenty-eight seats on the ground floor where the nets were mended, open to guests and to the town. The
              Netzbar is the old winch room behind it.</p
            >
          </div>
        </header>
        <dl class="ht-hours">
          <div><dt>Breakfast</dt><dd>daily 7:30 - 10:30 · Sat, Sun until 11:00</dd></div>
          <div><dt>Kitchen</dt><dd>Wed - Sun 18:00 - 21:30</dd></div>
          <div><dt>Netzbar</dt><dd>daily from 17:00</dd></div>
        </dl>
        <h3 class="ht-sub">From this week's menu</h3>
        <ul class="ht-menu">
          <li><b>Smoked eel</b><i>€14</i><span>beetroot, horseradish cream, rye crumbs</span></li>
          <li><b>Plaice from the morning cutter</b><i>€27</i><span>brown butter, shrimp, new potatoes</span></li>
          <li><b>Pear cake</b><i>€9</i><span>hazelnuts, buckthorn cream</span></li>
        </ul>
      </div>
      <figure class="ht-plates">
        <img
          src="https://picsum.photos/id/999/700/900"
          alt="A pear cake with nuts on a dark wooden table, small bowls of almonds and hazelnuts beside it"
        />
        <img
          src="https://picsum.photos/id/1060/600/450"
          alt="Water poured from a kettle into a glass coffee filter at a bar"
        />
        <img
          src="https://picsum.photos/id/431/600/450"
          alt="A cappuccino on a wooden bar beside a brass bell and a spike of receipts"
        />
        <figcaption class="ht-note">
          <span class="ht-pin" data-for="harbour night" aria-hidden="true"></span>
          <span class="ht-tape" data-for="linen" aria-hidden="true"></span>
          <small>Today from the cutter</small>
          <p>Plaice and cod from the Möwe&nbsp;3, landed at six. Until it's gone - ask at the bar.</p>
        </figcaption>
      </figure>
    </div>
  </section>

  <section id="ht-offers" aria-labelledby="ht-offers-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">Packages</span>
        <h2 class="mk-section-header-title" id="ht-offers-title">Three ways to stay longer</h2>
        <p class="mk-section-header-desc">Prices for two people with breakfast, before the city tax.</p>
      </div>
    </header>
    <div class="ht-offers">
      <article class="card ht-offer" aria-labelledby="ht-offer-winter">
        <div class="ht-stamp" role="img" aria-label="Three nights for the price of two"
          ><b>3 for 2</b><small>Nov - Feb</small></div
        >
        <div class="card-header">
          <h3 class="card-title" id="ht-offer-winter">Winter tides</h3>
          <p class="card-description">1 November to 28 February, arrivals Sunday to Thursday.</p>
        </div>
        <div class="card-content">
          <ul>
            <li><i data-lucide="moon-star"></i> Three nights, you pay two</li>
            <li><i data-lucide="flame"></i> A sauna slot in the boathouse each evening</li>
            <li><i data-lucide="soup"></i> Fish soup on the day you arrive</li>
          </ul>
          <p class="ht-price">from <b>€290</b> in the Harbour room</p>
        </div>
        <div class="card-footer"
          ><button
            class="btn"
            type="button"
            commandfor="ht-book"
            command="show-modal"
            data-ht-request="harbour"
            data-ht-offer="winter"
            >Request this package</button
          ></div
        >
      </article>
      <article class="card ht-offer" aria-labelledby="ht-offer-sail">
        <div class="card-header">
          <h3 class="card-title" id="ht-offer-sail">Sail &amp; sleep</h3>
          <p class="card-description">May to September, when the Greta sails.</p>
        </div>
        <div class="card-content">
          <ul>
            <li><i data-lucide="sailboat"></i> Half a day on the Greta, a 1912 ketch, with her skipper</li>
            <li><i data-lucide="sandwich"></i> A packed lunch from the Kombüse</li>
            <li><i data-lucide="bed-double"></i> Two nights in a Harbour room</li>
          </ul>
          <p class="ht-price"><b>€398</b> for two</p>
        </div>
        <div class="card-footer"
          ><button
            class="btn"
            type="button"
            commandfor="ht-book"
            command="show-modal"
            data-ht-request="harbour"
            data-ht-offer="sail"
            >Request this package</button
          ></div
        >
      </article>
      <article class="card ht-offer" aria-labelledby="ht-offer-weekend">
        <div class="card-header">
          <h3 class="card-title" id="ht-offer-weekend">Long weekend</h3>
          <p class="card-description">Friday to Monday, all year.</p>
        </div>
        <div class="card-content">
          <ul>
            <li><i data-lucide="calendar-days"></i> Three nights, check-out Monday at 13:00</li>
            <li><i data-lucide="utensils"></i> One three-course dinner in the Kombüse</li>
            <li><i data-lucide="bike"></i> Two bikes for the coast road</li>
          </ul>
          <p class="ht-price">from <b>€525</b> in the Harbour room</p>
        </div>
        <div class="card-footer"
          ><button
            class="btn"
            type="button"
            commandfor="ht-book"
            command="show-modal"
            data-ht-request="harbour"
            data-ht-offer="weekend"
            >Request this package</button
          ></div
        >
      </article>
    </div>
  </section>

  <section id="ht-way" class="ht-alt" aria-labelledby="ht-way-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">Getting here</span>
        <h2 class="mk-section-header-title" id="ht-way-title">Am Nordkai 7, at the end of the quay</h2>
        <p class="mk-section-header-desc"
          >Möwensund lies on the Baltic coast between Kiel and the Danish border. Tap a pin for the way from there.</p
        >
      </div>
    </header>
    <div class="mk-location-map">
      <div class="mk-location-map-layout">
        <div class="mk-location-map-canvas">
          <svg
            class="mk-location-map-art"
            viewBox="0 0 800 400"
            preserveAspectRatio="xMidYMid slice"
            aria-hidden="true"
          >
            <rect width="800" height="400" class="mk-location-map-land" />
            <rect class="mk-location-map-park" x="40" y="322" width="170" height="60" rx="16" />
            <g class="mk-location-map-streets">
              <path d="M150 160 H470" />
              <path d="M150 230 H470" />
              <path d="M200 112 V300" />
              <path d="M270 116 V300" />
              <path d="M410 122 V300" />
            </g>
            <g class="mk-location-map-roads">
              <path d="M130 88 C250 104 380 120 476 124" />
              <path d="M0 304 C200 296 450 288 800 304" />
              <path d="M330 120 C340 210 360 270 380 400" />
              <path d="M650 250 C640 280 600 290 560 300" />
            </g>
            <path class="mk-location-map-water" d="M400 0 C420 64 450 104 520 128 C600 156 680 164 800 168 V0 Z" />
            <path
              class="mk-location-map-water"
              d="M480 108 L480 232 Q480 244 492 244 L638 244 Q650 244 650 232 L650 140 Z"
            />
            <path class="ht-depth" d="M450 0 C470 56 510 90 580 108 C650 128 720 136 800 138" />
            <path class="ht-depth" d="M520 0 C540 40 580 64 640 78 C700 92 750 98 800 100" />
            <path class="ht-quay" d="M480 122 V232 Q480 244 492 244 H638 Q650 244 650 232 V158" />
            <path class="ht-mole" d="M700 166 C700 128 682 104 640 88" />
            <path class="ht-mole" d="M745 168 V140" />
            <circle class="ht-light" cx="640" cy="88" r="7" />
            <rect class="ht-park-sign" x="545" y="262" width="40" height="26" rx="5" />
            <text class="ht-park-p" x="565" y="281" text-anchor="middle">P2</text>
            <path class="ht-rail" d="M0 76 C50 80 95 85 130 88" />
            <text class="ht-map-label" x="600" y="44">Baltic Sea</text>
            <text class="ht-map-label" x="212" y="200">Old town</text>
            <text class="ht-map-label" x="565" y="196" text-anchor="middle">Harbour</text>
          </svg>
          <button
            class="mk-location-map-pin"
            type="button"
            popovertarget="ht-pin-hotel"
            style="--x: 58.5%; --y: 33%; anchor-name: --ht-pin-hotel"
            aria-label="Hotel Ebbstein"
            ><i data-lucide="map-pin"></i
          ></button>
          <div class="mk-location-map-popup" id="ht-pin-hotel" popover style="position-anchor: --ht-pin-hotel"
            ><strong>Hotel Ebbstein</strong><address>Am Nordkai 7, 24399 Möwensund</address>Reception daily 7:00 -
            22:00</div
          >
          <button
            class="mk-location-map-pin"
            type="button"
            popovertarget="ht-pin-station"
            style="--x: 16.25%; --y: 22%; anchor-name: --ht-pin-station"
            aria-label="Möwensund station"
            ><i data-lucide="map-pin"></i
          ></button>
          <div class="mk-location-map-popup" id="ht-pin-station" popover style="position-anchor: --ht-pin-station"
            ><strong>Möwensund station</strong><address>Bahnhofstraße</address>9 minutes on foot along the old town</div
          >
          <button
            class="mk-location-map-pin"
            type="button"
            popovertarget="ht-pin-park"
            style="--x: 70.6%; --y: 65%; anchor-name: --ht-pin-park"
            aria-label="Car park P2 Nordkai"
            ><i data-lucide="map-pin"></i
          ></button>
          <div class="mk-location-map-popup" id="ht-pin-park" popover style="position-anchor: --ht-pin-park"
            ><strong>Car park P2 Nordkai</strong><address>Kaistraße 2</address>250 m to the hotel · €9 a day with a
            ticket from reception</div
          >
          <button
            class="mk-location-map-pin"
            type="button"
            popovertarget="ht-pin-pier"
            style="--x: 93.1%; --y: 35%; anchor-name: --ht-pin-pier"
            aria-label="Ferry pier"
            ><i data-lucide="map-pin"></i
          ></button>
          <div class="mk-location-map-popup" id="ht-pin-pier" popover style="position-anchor: --ht-pin-pier"
            ><strong>Ferry pier</strong><address>Südmole</address>Boats to the island at 9:15 and 14:30</div
          >
        </div>
        <ol class="mk-location-map-list">
          <li><b>1</b><strong>Hotel Ebbstein</strong><span>Am Nordkai 7 · reception 7:00 - 22:00</span></li>
          <li><b>2</b><strong>Möwensund station</strong><span>9 minutes on foot · hourly trains from Kiel</span></li>
          <li><b>3</b><strong>Car park P2 Nordkai</strong><span>250 m · €9 a day for guests</span></li>
          <li><b>4</b><strong>Ferry pier</strong><span>12 minutes on foot along the quay</span></li>
        </ol>
      </div>
    </div>
    <ul class="ht-ways">
      <li
        ><i data-lucide="train-front"></i><b>By train</b
        ><span
          >Regional trains from Kiel every hour, 1 h 05. Tell us your train and we fetch your luggage from the station
          with the handcart.</span
        ></li
      >
      <li
        ><i data-lucide="car"></i><b>By car</b
        ><span
          >A7, exit Möwensund, then 14 km. The quay itself is car-free: unload at the door, park at P2 for €9 a day
          (normally €16), two chargers for electric cars.</span
        ></li
      >
      <li
        ><i data-lucide="bike"></i><b>By bike</b
        ><span
          >On the Baltic coast cycle route. A locked bike room in the yard, with a pump and sockets for batteries.</span
        ></li
      >
    </ul>
  </section>

  <section id="ht-reviews" aria-labelledby="ht-reviews-title">
    <header class="mk-section-header">
      <div class="mk-section-header-copy">
        <span class="mk-section-header-eyebrow">Reviews</span>
        <h2 class="mk-section-header-title" id="ht-reviews-title">What guests wrote on the way home</h2>
      </div>
    </header>
    <div class="ht-score">
      <b>4.8</b>
      <div class="rating" data-readonly style="--rating-value: 4.8" role="img" aria-label="Rated 4.8 out of 5"></div>
      <span class="rating-value">from 412 stays this year</span>
    </div>
    <div class="mk-testimonial-cards">
      <figure class="mk-testimonial-card" data-variant="quote">
        <div class="rating" data-readonly style="--rating-value: 5" role="img" aria-label="Rated 5 out of 5"></div>
        <blockquote class="mk-testimonial-card-text"
          ><p
            >We woke to the cutters' engines and had the plaice they landed for dinner. The Harbour room is small and
            exactly right.</p
          ></blockquote
        >
        <figcaption class="mk-testimonial-card-author">
          <span class="avatar"><img class="avatar-image" src="https://i.pravatar.cc/96?img=27" alt="" /></span>
          <span class="mk-testimonial-card-info"
            ><span class="mk-testimonial-card-name">Marit Lund</span
            ><span class="mk-testimonial-card-role">Harbour room · October</span></span
          >
        </figcaption>
      </figure>
      <figure class="mk-testimonial-card" data-variant="quote">
        <div class="rating" data-readonly style="--rating-value: 5" role="img" aria-label="Rated 5 out of 5"></div>
        <blockquote class="mk-testimonial-card-text"
          ><p
            >Arrived at midnight off the last train. The code for the key safe came by text, a lamp was on in the room.
            Thank you.</p
          ></blockquote
        >
        <figcaption class="mk-testimonial-card-author">
          <span class="avatar"><img class="avatar-image" src="https://i.pravatar.cc/96?img=60" alt="" /></span>
          <span class="mk-testimonial-card-info"
            ><span class="mk-testimonial-card-name">Tomasz Wilk</span
            ><span class="mk-testimonial-card-role">Cabin · September</span></span
          >
        </figcaption>
      </figure>
      <figure class="mk-testimonial-card" data-variant="quote">
        <div class="rating" data-readonly style="--rating-value: 4.5" role="img" aria-label="Rated 4.5 out of 5"></div>
        <blockquote class="mk-testimonial-card-text"
          ><p
            >The family room really is two rooms. The kids watched the ferry from the window, we read. The stairs are
            steep - ask for help with the cases.</p
          ></blockquote
        >
        <figcaption class="mk-testimonial-card-author">
          <span class="avatar"><img class="avatar-image" src="https://i.pravatar.cc/96?img=25" alt="" /></span>
          <span class="mk-testimonial-card-info"
            ><span class="mk-testimonial-card-name">Hannah Sato</span
            ><span class="mk-testimonial-card-role">Family room · August</span></span
          >
        </figcaption>
      </figure>
    </div>
  </section>

  <section id="ht-faq" class="ht-alt" aria-labelledby="ht-faq-title">
    <div class="mk-faq">
      <div class="mk-faq-split">
        <div class="mk-faq-head">
          <span class="mk-faq-eyebrow">FAQ</span>
          <h2 class="mk-faq-title" id="ht-faq-title">Before you pack</h2>
          <p class="mk-faq-desc">Anything else: reception answers the phone from 7:00 to 22:00.</p>
        </div>
        <div class="mk-faq-accordion">
          <div class="accordion">
            <details class="accordion-item" name="ht-faq" open>
              <summary class="accordion-trigger"
                ><span>When can I check in and out?</span
                ><svg
                  class="accordion-chevron"
                  aria-hidden="true"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="m6 9 6 6 6-6" /></svg
              ></summary>
              <div class="accordion-content"
                ><p
                  >Check-in from 15:00, check-out until 11:00. Arriving after 22:00? We text you the code for the key
                  safe by the door. A late check-out until 13:00 costs €25 when the room is free that night.</p
                ></div
              >
            </details>
            <details class="accordion-item" name="ht-faq">
              <summary class="accordion-trigger"
                ><span>Can I bring my dog?</span
                ><svg
                  class="accordion-chevron"
                  aria-hidden="true"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="m6 9 6 6 6-6" /></svg
              ></summary>
              <div class="accordion-content"
                ><p
                  >One dog per room in the Cabin and the Harbour rooms, €15 a night with a blanket and two bowls. Dogs
                  are welcome in the Netzbar, not in the Kombüse at dinner.</p
                ></div
              >
            </details>
            <details class="accordion-item" name="ht-faq">
              <summary class="accordion-trigger"
                ><span>When is breakfast?</span
                ><svg
                  class="accordion-chevron"
                  aria-hidden="true"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="m6 9 6 6 6-6" /></svg
              ></summary>
              <div class="accordion-content"
                ><p
                  >From 7:30 to 10:30, on Saturdays, Sundays and holidays until 11:00. Catching the 9:15 ferry? We pack
                  you a breakfast the evening before.</p
                ></div
              >
            </details>
            <details class="accordion-item" name="ht-faq">
              <summary class="accordion-trigger"
                ><span>What is the city tax?</span
                ><svg
                  class="accordion-chevron"
                  aria-hidden="true"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="m6 9 6 6 6-6" /></svg
              ></summary>
              <div class="accordion-content"
                ><p
                  >The town of Möwensund charges €2.80 per adult and night; children under 16 are free. We collect it
                  with the bill and give you the guest card that comes with it - free buses along the coast and the
                  beach without a ticket.</p
                ></div
              >
            </details>
            <details class="accordion-item" name="ht-faq">
              <summary class="accordion-trigger"
                ><span>Is there a lift?</span
                ><svg
                  class="accordion-chevron"
                  aria-hidden="true"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="m6 9 6 6 6-6" /></svg
              ></summary>
              <div class="accordion-content"
                ><p
                  >No - the net loft is listed and its stairs are steep. Two Harbour rooms are on the ground floor with
                  a step-free shower; ask for one when you book. We carry your luggage up for you.</p
                ></div
              >
            </details>
            <details class="accordion-item" name="ht-faq">
              <summary class="accordion-trigger"
                ><span>Can I cancel?</span
                ><svg
                  class="accordion-chevron"
                  aria-hidden="true"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path d="m6 9 6 6 6-6" /></svg
              ></summary>
              <div class="accordion-content"
                ><p
                  >Free of charge until three days before you arrive. Later we charge the first night, unless we let the
                  room again.</p
                ></div
              >
            </details>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="mk-footer">
    <div class="mk-footer-inner">
      <nav class="mk-footer-nav" aria-label="Footer">
        <div class="mk-footer-col">
          <p class="mk-footer-brand">Hotel Ebbstein</p>
          <ul class="mk-footer-list">
            <li
              ><address>Am Nordkai 7<br />24399 Möwensund<br />Germany</address></li
            >
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Reception</h3>
          <ul class="mk-footer-list">
            <li>Daily 7:00 - 22:00</li>
            <li>+49 4600 873 70</li>
            <li>stay@ebbstein.example</li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">On this page</h3>
          <ul class="mk-footer-list">
            <li><a href="#ht-rooms">Rooms</a></li>
            <li><a href="#ht-dining">Restaurant &amp; bar</a></li>
            <li><a href="#ht-way">Getting here</a></li>
            <li><a href="#ht-reviews">Reviews</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Legal</h3>
          <ul class="mk-footer-list">
            <li><button type="button" commandfor="ht-imprint" command="show-modal">Imprint</button></li>
            <li><button type="button" commandfor="ht-privacy" command="show-modal">Privacy</button></li>
          </ul>
        </div>
      </nav>
      <hr class="separator mk-footer-rule" />
      <div class="mk-footer-bottom">
        <p class="mk-footer-copy">© 2026 Ebbstein Hotel GmbH · a net loft since 1898, a hotel since 2019</p>
      </div>
    </div>
  </footer>

  <dialog class="dialog ht-room-dialog" id="ht-room-cabin" data-size="lg" aria-labelledby="ht-room-cabin-title">
    <div class="ht-room-grid">
      <div class="ht-viewer" data-ht-viewer>
        <ul class="mk-media-gallery-track" tabindex="0" aria-label="Photos of the Cabin - scroll sideways">
          <li
            ><img
              src="https://picsum.photos/id/311/1000/750"
              alt="A wooden chair by a window, the sea pale at dusk behind a white curtain"
            /><p>The window seat at dusk</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/445/1000/750"
              alt="A desk under a window with blinds, a laptop and a pot of pens on it"
            /><p>The desk under the dormer</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/225/1000/750"
              alt="A glass teapot of green tea and a small cup beside yellow roses"
            /><p>Tea on the tray, every day</p></li
          >
        </ul>
        <div class="ht-viewer-steps">
          <span data-ht-count>1 / 3</span>
          <div>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="-1"
              aria-label="Previous photo"
              ><i data-lucide="arrow-left"></i
            ></button>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="1"
              aria-label="Next photo"
              ><i data-lucide="arrow-right"></i
            ></button>
          </div>
        </div>
      </div>
      <div class="dialog-content">
        <div class="dialog-header">
          <h2 class="dialog-title" id="ht-room-cabin-title">Cabin</h2>
          <p class="dialog-description"
            >Four cabins under the eaves on the yard side. Small, quiet, with a window seat that looks over the roofs to
            the sea.</p
          >
        </div>
        <dl class="ht-facts">
          <div><dt>Size</dt><dd>16 m²</dd></div>
          <div><dt>Bed</dt><dd>1.20 m single</dd></div>
          <div><dt>Floor</dt><dd>3rd, under the roof</dd></div>
          <div><dt>Rate</dt><dd>€95 a night</dd></div>
        </dl>
        <h3 class="ht-sub">In the room</h3>
        <ul class="ht-amenities">
          <li><i data-lucide="shower-head"></i> Shower and WC</li>
          <li><i data-lucide="wifi"></i> Wi-Fi, 100 Mbit/s</li>
          <li><i data-lucide="coffee"></i> Kettle, tea and coffee</li>
          <li><i data-lucide="dog"></i> Dogs welcome, €15</li>
          <li><i data-lucide="lamp-desk"></i> A desk and a reading lamp</li>
          <li><i data-lucide="volume-x"></i> Yard side - the quietest rooms</li>
        </ul>
        <output class="ht-total" data-ht-total="cabin"></output>
        <div class="dialog-footer">
          <button class="btn" data-variant="outline" type="button" commandfor="ht-room-cabin" command="close"
            >Close</button
          >
          <button class="btn" type="button" commandfor="ht-book" command="show-modal" data-ht-request="cabin"
            >Request this room</button
          >
        </div>
      </div>
    </div>
    <button
      class="btn ht-x"
      data-variant="ghost"
      data-size="icon"
      type="button"
      commandfor="ht-room-cabin"
      command="close"
      aria-label="Close"
      ><i data-lucide="x"></i
    ></button>
  </dialog>
  <dialog class="dialog ht-room-dialog" id="ht-room-harbour" data-size="lg" aria-labelledby="ht-room-harbour-title">
    <div class="ht-room-grid">
      <div class="ht-viewer" data-ht-viewer>
        <ul class="mk-media-gallery-track" tabindex="0" aria-label="Photos of the Harbour room - scroll sideways">
          <li
            ><img
              src="https://picsum.photos/id/691/1000/750"
              alt="A green mug on a bedside table beside rumpled white linen in morning light"
            /><p>Morning in the 1.80 m bed</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/211/1000/750"
              alt="A wooden sailing boat moored at the quay, life rings hung along the rail of the boat behind"
            /><p>The view: the boats at the Nordkai</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/882/1000/750"
              alt="Seen from above: a hand lifting a cup of tea from a small wooden table on terracotta tiles"
            /><p>The tiled corner by the window</p></li
          >
        </ul>
        <div class="ht-viewer-steps">
          <span data-ht-count>1 / 3</span>
          <div>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="-1"
              aria-label="Previous photo"
              ><i data-lucide="arrow-left"></i
            ></button>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="1"
              aria-label="Next photo"
              ><i data-lucide="arrow-right"></i
            ></button>
          </div>
        </div>
      </div>
      <div class="dialog-content">
        <div class="dialog-header">
          <h2 class="dialog-title" id="ht-room-harbour-title">Harbour room</h2>
          <p class="dialog-description"
            >Seven rooms on the quay side, on the first and second floors. Two of them on the ground floor with a
            step-free shower.</p
          >
        </div>
        <dl class="ht-facts">
          <div><dt>Size</dt><dd>24 m²</dd></div>
          <div><dt>Bed</dt><dd>1.80 m double</dd></div>
          <div><dt>Floor</dt><dd>Ground, 1st or 2nd</dd></div>
          <div><dt>Rate</dt><dd>€145 a night</dd></div>
        </dl>
        <h3 class="ht-sub">In the room</h3>
        <ul class="ht-amenities">
          <li><i data-lucide="shower-head"></i> Rain shower and WC</li>
          <li><i data-lucide="wifi"></i> Wi-Fi, 100 Mbit/s</li>
          <li><i data-lucide="coffee"></i> Kettle, tea and coffee</li>
          <li><i data-lucide="dog"></i> Dogs welcome, €15</li>
          <li><i data-lucide="sofa"></i> A window bench over the quay</li>
          <li><i data-lucide="accessibility"></i> Step-free in two rooms</li>
        </ul>
        <output class="ht-total" data-ht-total="harbour"></output>
        <div class="dialog-footer">
          <button class="btn" data-variant="outline" type="button" commandfor="ht-room-harbour" command="close"
            >Close</button
          >
          <button class="btn" type="button" commandfor="ht-book" command="show-modal" data-ht-request="harbour"
            >Request this room</button
          >
        </div>
      </div>
    </div>
    <button
      class="btn ht-x"
      data-variant="ghost"
      data-size="icon"
      type="button"
      commandfor="ht-room-harbour"
      command="close"
      aria-label="Close"
      ><i data-lucide="x"></i
    ></button>
  </dialog>
  <dialog class="dialog ht-room-dialog" id="ht-room-loft" data-size="lg" aria-labelledby="ht-room-loft-title">
    <div class="ht-room-grid">
      <div class="ht-viewer" data-ht-viewer>
        <ul class="mk-media-gallery-track" tabindex="0" aria-label="Photos of the Loft - scroll sideways">
          <li
            ><img
              src="https://picsum.photos/id/834/1000/750"
              alt="Three framed prints above a dark green buttoned leather sofa"
            /><p>The sofa bed under the prints</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/1008/1000/750"
              alt="Someone asleep under a blanket on a dark sofa below a window in a brick wall"
            /><p>The reading corner by the gable window</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/870/1000/750"
              alt="A white lighthouse with its lamp lit against a starry evening sky"
            /><p>The view: the lighthouse at the harbour mouth</p></li
          >
        </ul>
        <div class="ht-viewer-steps">
          <span data-ht-count>1 / 3</span>
          <div>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="-1"
              aria-label="Previous photo"
              ><i data-lucide="arrow-left"></i
            ></button>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="1"
              aria-label="Next photo"
              ><i data-lucide="arrow-right"></i
            ></button>
          </div>
        </div>
      </div>
      <div class="dialog-content">
        <div class="dialog-header">
          <h2 class="dialog-title" id="ht-room-loft-title">Loft</h2>
          <p class="dialog-description"
            >Two lofts at the top of the house, open to the roof beams of 1898, with a gable window towards the
            lighthouse.</p
          >
        </div>
        <dl class="ht-facts">
          <div><dt>Size</dt><dd>36 m²</dd></div>
          <div><dt>Beds</dt><dd>1.80 m + sofa bed</dd></div>
          <div><dt>Floor</dt><dd>3rd, 52 steps</dd></div>
          <div><dt>Rate</dt><dd>€195 a night</dd></div>
        </dl>
        <h3 class="ht-sub">In the room</h3>
        <ul class="ht-amenities">
          <li><i data-lucide="bath"></i> Bath tub and separate shower</li>
          <li><i data-lucide="wifi"></i> Wi-Fi, 100 Mbit/s</li>
          <li><i data-lucide="coffee"></i> Espresso machine</li>
          <li><i data-lucide="sofa"></i> Sofa bed for a third guest</li>
          <li><i data-lucide="telescope"></i> A telescope at the gable window</li>
          <li><i data-lucide="wine"></i> Minibar with drinks from the Netzbar</li>
        </ul>
        <output class="ht-total" data-ht-total="loft"></output>
        <div class="dialog-footer">
          <button class="btn" data-variant="outline" type="button" commandfor="ht-room-loft" command="close"
            >Close</button
          >
          <button class="btn" type="button" commandfor="ht-book" command="show-modal" data-ht-request="loft"
            >Request this room</button
          >
        </div>
      </div>
    </div>
    <button
      class="btn ht-x"
      data-variant="ghost"
      data-size="icon"
      type="button"
      commandfor="ht-room-loft"
      command="close"
      aria-label="Close"
      ><i data-lucide="x"></i
    ></button>
  </dialog>
  <dialog class="dialog ht-room-dialog" id="ht-room-family" data-size="lg" aria-labelledby="ht-room-family-title">
    <div class="ht-room-grid">
      <div class="ht-viewer" data-ht-viewer>
        <ul class="mk-media-gallery-track" tabindex="0" aria-label="Photos of the Family room - scroll sideways">
          <li
            ><img
              src="https://picsum.photos/id/625/1000/750"
              alt="A bright room with a wooden table, white chairs and tall windows"
            /><p>The table for four in the front room</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/365/1000/750"
              alt="A cup of steaming tea and an open book on a white bed"
            /><p>The second room with two single beds</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/211/1000/750"
              alt="A wooden sailing boat moored at the quay, life rings hung along the rail of the boat behind"
            /><p>The view: the quay and the old town behind it</p></li
          >
        </ul>
        <div class="ht-viewer-steps">
          <span data-ht-count>1 / 3</span>
          <div>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="-1"
              aria-label="Previous photo"
              ><i data-lucide="arrow-left"></i
            ></button>
            <button
              class="btn"
              data-variant="outline"
              data-size="icon"
              type="button"
              data-viewer-step="1"
              aria-label="Next photo"
              ><i data-lucide="arrow-right"></i
            ></button>
          </div>
        </div>
      </div>
      <div class="dialog-content">
        <div class="dialog-header">
          <h2 class="dialog-title" id="ht-room-family-title">Family room</h2>
          <p class="dialog-description"
            >One family room on the first floor: a front room with the double bed and a table, a second room with two
            single beds and a door between them.</p
          >
        </div>
        <dl class="ht-facts">
          <div><dt>Size</dt><dd>44 m²</dd></div>
          <div><dt>Beds</dt><dd>1.80 m + 2 singles</dd></div>
          <div><dt>Floor</dt><dd>1st</dd></div>
          <div><dt>Rate</dt><dd>€235 a night</dd></div>
        </dl>
        <h3 class="ht-sub">In the room</h3>
        <ul class="ht-amenities">
          <li><i data-lucide="shower-head"></i> Shower, separate WC</li>
          <li><i data-lucide="wifi"></i> Wi-Fi, 100 Mbit/s</li>
          <li><i data-lucide="baby"></i> Cot and high chair on request</li>
          <li><i data-lucide="refrigerator"></i> A small fridge</li>
          <li><i data-lucide="puzzle"></i> Board games and a kite</li>
          <li><i data-lucide="door-closed"></i> Two rooms, one door</li>
        </ul>
        <output class="ht-total" data-ht-total="family"></output>
        <div class="dialog-footer">
          <button class="btn" data-variant="outline" type="button" commandfor="ht-room-family" command="close"
            >Close</button
          >
          <button class="btn" type="button" commandfor="ht-book" command="show-modal" data-ht-request="family"
            >Request this room</button
          >
        </div>
      </div>
    </div>
    <button
      class="btn ht-x"
      data-variant="ghost"
      data-size="icon"
      type="button"
      commandfor="ht-room-family"
      command="close"
      aria-label="Close"
      ><i data-lucide="x"></i
    ></button>
  </dialog>

  <dialog class="dialog ht-book" id="ht-book" data-size="lg" aria-labelledby="ht-book-title">
    <form class="dialog-content" data-ht-book>
      <div class="dialog-header">
        <h2 class="dialog-title" id="ht-book-title">Request a stay</h2>
        <p class="dialog-description">Reception confirms within a day. Nothing is charged until you confirm.</p>
      </div>
      <div class="ht-form">
        <div class="ht-field">
          <label class="label" for="ht-b-arrive">Arrival</label>
          <input class="date-input" type="date" id="ht-b-arrive" name="arrive" required />
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-depart">Departure</label>
          <input class="date-input" type="date" id="ht-b-depart" name="depart" required />
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-adults">Adults</label>
          <select class="select" id="ht-b-adults" name="adults">
            <option>1</option>
            <option selected>2</option>
            <option>3</option>
            <option>4</option>
          </select>
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-kids">Children under 16</label>
          <select class="select" id="ht-b-kids" name="kids">
            <option selected>0</option>
            <option>1</option>
            <option>2</option>
          </select>
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-room">Room</label>
          <select class="select" id="ht-b-room" name="room">
            <option value="cabin">Cabin · €95</option>
            <option value="harbour" selected>Harbour room · €145</option>
            <option value="loft">Loft · €195</option>
            <option value="family">Family room · €235</option>
          </select>
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-offer">Package</label>
          <select class="select" id="ht-b-offer" name="offer">
            <option value="">No package</option>
            <option value="winter">Winter tides</option>
            <option value="sail">Sail &amp; sleep</option>
            <option value="weekend">Long weekend</option>
          </select>
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-name">Name</label>
          <input class="input" id="ht-b-name" name="name" autocomplete="name" required />
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-mail">Email</label>
          <input class="input" id="ht-b-mail" name="email" type="email" autocomplete="email" required />
        </div>
        <div class="ht-field">
          <label class="label" for="ht-b-time">Arrival time</label>
          <select class="select" id="ht-b-time" name="time">
            <option>15:00 - 18:00</option>
            <option>18:00 - 22:00</option>
            <option>After 22:00 - key safe</option>
          </select>
        </div>
        <div class="ht-check ht-field" style="align-self: end">
          <input class="checkbox" type="checkbox" id="ht-b-dog" name="dog" />
          <label class="label" for="ht-b-dog">A dog comes too (€15 a night)</label>
        </div>
        <div class="ht-field ht-wide">
          <label class="label" for="ht-b-note">Anything we should know?</label>
          <textarea class="textarea" id="ht-b-note" name="note" rows="3" placeholder="A step-free room, a cot, the train you arrive on ..."></textarea>
        </div>
      </div>
      <output
        class="ht-estimate"
        data-ht-estimate
        for="ht-b-arrive ht-b-depart ht-b-adults ht-b-room"
        aria-live="polite"
      ></output>
      <div class="dialog-footer">
        <button class="btn" data-variant="outline" type="button" commandfor="ht-book" command="close">Cancel</button>
        <button class="btn" type="submit"><i data-lucide="send"></i> Send request</button>
      </div>
    </form>
    <div class="dialog-content ht-done" tabindex="-1">
      <i data-lucide="check"></i>
      <h2 class="dialog-title">Thank you<span data-ht-name></span>.</h2>
      <p data-ht-done>We have your request and answer within a day.</p>
      <button class="btn" type="button" commandfor="ht-book" command="close">Close</button>
    </div>
    <button
      class="btn ht-x"
      data-variant="ghost"
      data-size="icon"
      type="button"
      commandfor="ht-book"
      command="close"
      aria-label="Close"
      ><i data-lucide="x"></i
    ></button>
  </dialog>

  <dialog class="dialog" id="ht-imprint" data-size="lg" aria-labelledby="ht-imprint-title">
    <div class="dialog-content ht-legal">
      <div class="dialog-header"><h2 class="dialog-title" id="ht-imprint-title">Imprint</h2></div>
      <p>Ebbstein Hotel GmbH<br />Am Nordkai 7, 24399 Möwensund, Germany</p>
      <p
        >Managing director: Frauke Jessen<br />Commercial register: Amtsgericht Kiel, HRB 0000 KI<br />VAT ID: DE 000
        000 000</p
      >
      <p>Phone +49 4600 873 70 · stay@ebbstein.example</p>
      <div class="dialog-footer"
        ><button class="btn" type="button" commandfor="ht-imprint" command="close">Close</button></div
      >
    </div>
  </dialog>
  <dialog class="dialog" id="ht-privacy" data-size="lg" aria-labelledby="ht-privacy-title">
    <div class="dialog-content ht-legal">
      <div class="dialog-header"><h2 class="dialog-title" id="ht-privacy-title">Privacy</h2></div>
      <p>This site sets no cookies and loads no trackers. The dates you try in the search stay in your browser.</p>
      <h3>Booking requests</h3>
      <p
        >A request goes to reception by email. We keep it for six months if no stay follows; the registration form of a
        stay is kept for one year, as the law on registration requires.</p
      >
      <h3>Your rights</h3>
      <p>You may ask what we hold about you, have it corrected or deleted: write to privacy@ebbstein.example.</p>
      <div class="dialog-footer"
        ><button class="btn" type="button" commandfor="ht-privacy" command="close">Close</button></div
      >
    </div>
  </dialog>
</div>
<script type="module">
  // df$ comes with the component bundle - a full-screen page loads it after this module
  addEventListener('DOMContentLoaded', () => {
    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$('#in-hotel [data-site-mode]');
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // the look: one of the site's designs; the water shader reads its token colours again on defuss-theme-change
    const root = df$('#in-hotel').get(0);
    const look = df$('#in-hotel [data-site-look]');
    look.val(root.dataset.look).on('change', () => {
      root.dataset.look = look.val();
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });

    // the search: nights x rate + city tax per adult and night, for every room
    const TAX = 2.8;
    const money = new Intl.NumberFormat('en-IE', { style: 'currency', currency: 'EUR' });
    const whole = new Intl.NumberFormat('en-IE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
    const day = new Intl.DateTimeFormat('en-GB', { weekday: 'short', day: 'numeric', month: 'short' });
    const or = new Intl.ListFormat('en-GB', { type: 'disjunction' });
    const iso = (d) =>
      [d.getFullYear(), String(d.getMonth() + 1).padStart(2, '0'), String(d.getDate()).padStart(2, '0')].join('-');
    const parse = (v) => (v ? new Date(v + 'T12:00') : null);
    const plus = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n, 12);
    const nightsOf = (a, b) => (a && b ? Math.round((b - a) / 86400000) : 0);
    const people = (n, one, many) => n + ' ' + (n === 1 ? one : many);
    const rooms = {};
    df$('#in-hotel .ht-room').each((_i, el) => {
      rooms[el.dataset.room] = {
        el,
        rate: Number(el.dataset.rate),
        sleeps: Number(el.dataset.sleeps),
        name: df$(el).find('.card-title').text(),
      };
    });
    /** what a stay in one room costs */
    const price = (room, nights, adults) => {
      const stay = room.rate * nights;
      const tax = TAX * adults * nights;
      return { stay, tax, total: stay + tax };
    };

    const arrive = df$('#ht-arrive');
    const depart = df$('#ht-depart');
    const adults = df$('#ht-adults');
    const kids = df$('#ht-kids');
    const today = plus(new Date(), 0);
    // a first suggestion: the next weekend at least three days out, two nights
    let first = plus(today, 3);
    while (first.getDay() !== 5) first = plus(first, 1);
    arrive.attr('min', iso(today)).val(iso(first));
    depart.attr('min', iso(plus(first, 1))).val(iso(plus(first, 2)));

    const search = () => {
      const a = parse(arrive.val());
      // an arrival moved past the departure takes the departure along: one night
      if (a && parse(depart.val()) <= a) depart.val(iso(plus(a, 1)));
      const b = parse(depart.val());
      if (a) depart.attr('min', iso(plus(a, 1)));
      const nights = nightsOf(a, b);
      const grown = Number(adults.val());
      const young = Number(kids.val());
      const guests = grown + young;
      const who = people(grown, 'adult', 'adults') + (young ? ', ' + people(young, 'child', 'children') : '');
      if (nights < 1) {
        df$('#in-hotel [data-ht-summary]').text('The departure must be at least one night after the arrival.');
        df$('#in-hotel [data-ht-total]').text('Pick your dates to see the price.');
        df$('#in-hotel [data-ht-fit]').attr('hidden', '');
        Object.values(rooms).forEach((r) => df$(r.el).attr('data-fit', null));
        return;
      }
      let fits = 0;
      const bigger = Object.values(rooms)
        .filter((r) => guests <= r.sleeps)
        .map((r) => r.name);
      for (const [id, room] of Object.entries(rooms)) {
        const ok = guests <= room.sleeps;
        if (ok) fits++;
        df$(room.el).attr('data-fit', ok ? 'yes' : 'no');
        df$(room.el)
          .find('[data-ht-fit]')
          .attr('hidden', null)
          .attr('data-variant', ok ? 'default' : 'secondary')
          .text(ok ? 'Fits ' + people(guests, 'guest', 'guests') : 'Sleeps ' + room.sleeps);
        const p = price(room, nights, grown);
        const line = ok
          ? '<span>' +
            people(nights, 'night', 'nights') +
            ' × ' +
            whole.format(room.rate) +
            ' + ' +
            money.format(p.tax) +
            ' city tax</span><b>' +
            money.format(p.total) +
            ' in all</b>'
          : '<span>Too small for ' +
            who +
            '</span><b>' +
            (bigger.length ? 'Try the ' + or.format(bigger) : 'Book two rooms') +
            '</b>';
        df$('#in-hotel [data-ht-total="' + id + '"]').html(line);
      }
      df$('#in-hotel [data-ht-summary]').html(
        '<b>' +
          day.format(a) +
          ' - ' +
          day.format(b) +
          '</b><span>' +
          people(nights, 'night', 'nights') +
          ' · ' +
          who +
          ' · ' +
          (fits
            ? fits + ' of 4 rooms fit'
            : 'no room sleeps more than four - book two rooms and tell us in the request') +
          '</span>',
      );
    };
    df$('#in-hotel [data-ht-search]')
      .on('input', search)
      .on('change', search)
      .on('submit', (event) => {
        event.preventDefault();
        df$('#ht-rooms').get(0).scrollIntoView({ block: 'start' });
      });
    search();

    // the room viewers: arrows scroll the track, the counter follows the photo in view
    const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
    df$('#in-hotel [data-ht-viewer]').each((_i, viewer) => {
      const track = df$(viewer).find('.mk-media-gallery-track').get(0);
      const count = df$(viewer).find('[data-ht-count]');
      const total = track.children.length;
      df$(viewer)
        .find('[data-viewer-step]')
        .on('click', (event) => {
          const step = Number(event.currentTarget.dataset.viewerStep);
          const at = Math.round(track.scrollLeft / track.clientWidth);
          const next = (at + step + total) % total;
          track.scrollTo({ left: next * track.clientWidth, behavior: still() ? 'instant' : 'smooth' });
        });
      df$(track).on('scroll', () => count.text(Math.round(track.scrollLeft / track.clientWidth) + 1 + ' / ' + total));
    });
    // a room dialog opens at its first photo
    df$('#in-hotel .ht-room-dialog').on('close', (event) => {
      const track = df$(event.currentTarget).find('.mk-media-gallery-track').get(0);
      track.scrollLeft = 0;
    });

    // the booking request: a Request button carries the dates, the guests, its room and package; it closes the room
    // dialog it sits in (its command then opens the request)
    const book = df$('#ht-book');
    const form = df$('#in-hotel [data-ht-book]');
    const estimate = () => {
      const a = parse(df$('#ht-b-arrive').val());
      const b = parse(df$('#ht-b-depart').val());
      const nights = nightsOf(a, b);
      const room = rooms[df$('#ht-b-room').val()];
      const grown = Number(df$('#ht-b-adults').val());
      const guests = grown + Number(df$('#ht-b-kids').val());
      const departField = df$('#ht-b-depart').get(0);
      departField.setCustomValidity(a && b && nights < 1 ? 'The departure must be after the arrival.' : '');
      if (a) df$('#ht-b-depart').attr('min', iso(plus(a, 1)));
      if (nights < 1)
        return df$('#in-hotel [data-ht-estimate]').text('Pick the arrival and the departure to see an estimate.');
      if (guests > room.sleeps)
        return df$('#in-hotel [data-ht-estimate]').text(
          'The ' + room.name + ' sleeps ' + room.sleeps + ' - pick a bigger room.',
        );
      const p = price(room, nights, grown);
      df$('#in-hotel [data-ht-estimate]').html(
        room.name +
          ', ' +
          people(nights, 'night', 'nights') +
          ': ' +
          money.format(p.stay) +
          ' + ' +
          money.format(p.tax) +
          ' city tax = <b>' +
          money.format(p.total) +
          '</b> (a package is priced by reception)',
      );
    };
    df$('#in-hotel [data-ht-request]').on('click', (event) => {
      const button = event.currentTarget;
      df$('#ht-b-arrive').val(arrive.val());
      df$('#ht-b-depart').val(depart.val());
      df$('#ht-b-adults').val(adults.val());
      df$('#ht-b-kids').val(kids.val());
      if (button.dataset.htRequest) df$('#ht-b-room').val(button.dataset.htRequest);
      df$('#ht-b-offer').val(button.dataset.htOffer ?? '');
      df$(button).closest('dialog.ht-room-dialog').get(0)?.close();
      estimate();
    });
    form.on('input', estimate).on('change', estimate);
    form.on('submit', (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const name = String(data.get('name') ?? '')
        .trim()
        .split(/\s+/)[0];
      const room = rooms[data.get('room')];
      const a = parse(data.get('arrive'));
      const b = parse(data.get('depart'));
      df$('#in-hotel [data-ht-name]').text(name ? ', ' + name : '');
      df$('#in-hotel [data-ht-done]').text(
        'The ' +
          room.name +
          ' from ' +
          day.format(a) +
          ' to ' +
          day.format(b) +
          ' - reception confirms by email to ' +
          data.get('email') +
          ' within a day.',
      );
      book.attr('data-sent', '');
      book.find('.ht-done').get(0).focus();
    });
    book.on('close', () => {
      book.attr('data-sent', null);
      form.get(0).reset();
    });
  });
</script>
Built from Site Header (its Sheet menu on a phone), Hero (split), Section Header, Card with Badge, Date Picker, Select, Location Map, Testimonials with Rating and Avatar, FAQ (accordion), Site Footer and Dialogs with Input, Checkbox and Textarea; the rooms' photos scroll in the Media Gallery's track. The water is a Shader (water) whose colours are the look's tokens. The prices are computed in the page's script; the palettes are tokens on the site's root, so every component inside follows the look.
Comments, ideas or improvements? Edit this page's source on GitHub