/* ======== BASE — tokens, fonts, reset and the shared components of Hotel Lichtung ======== */
/* Goes to the very top of styles.css. Everything a section may rely on is here and
   described with its markup in (archived build notes) TOKENS.md. Sections never redefine these classes;
   they add their own, prefixed with their data-sid. */

/* ======== TOKENS — the frozen design spec (BRIEF-lichtung.md), in two modes ======== */
/* DARK is the spec. It is also what everything that lies ON a photograph keeps in both modes:
   the hero, the entered picture, the badges on photos (a photograph does not turn light with
   the page). Hence the selector list. LIGHT (below) re-declares the same names on the root only.
   The mode is html[data-theme], set before the first paint by the script in the head of
   index.html and changed by the one button in the top bar (app.js, KOPF). */
:root,
.haus,
.tiefe,
.karte__marke,
.anfrage__marke {
  --farbe-grund: #0c1012;          /* night ground: the page */
  --farbe-flaeche: #141a1c;        /* raised surface */
  --farbe-flaeche-2: #1b2325;      /* second surface; also the flat fill of a missing photo */
  --farbe-tinte: #f3efe8;          /* text */
  --farbe-tinte-leise: #b8b2a7;    /* secondary text (8.9:1 on the ground) */
  --farbe-akzent: #e3c48f;         /* window light: pills, lit windows, key numbers */
  --farbe-akzent-tinte: #2a2118;   /* text on the accent */
  --farbe-linie: rgba(243, 239, 232, .14);
  --farbe-rand: rgba(243, 239, 232, .42);  /* the edge of a control: 3:1 on the ground (buttons, fields) */
  --farbe-see: #7fb0ad;            /* cool secondary, sparing: water, daylight states */
  --farbe-glas: rgba(255, 255, 255, .04);  /* the glass card */
  --farbe-fehler: #e8a08a;         /* the ring of a field that is wrong */
}
:root {

  --schrift-titel: "Bodoni Moda", "Lichtung Titel Ersatz", "Didot", "Bodoni MT", serif;
  --schrift-text: "Manrope", "Lichtung Text Ersatz", system-ui, sans-serif;
  --schrift-zahl: ui-monospace, "Cascadia Mono", "SF Mono", monospace;

  --mass-1: 4px;  --mass-2: 8px;  --mass-3: 12px; --mass-4: 16px;
  --mass-5: 24px; --mass-6: 40px; --mass-7: 64px; --mass-8: 104px;

  --radius: 18px;
  --breit: 1360px;                     /* the wide sections: rooms, request, good to know */
  --dauer: .6s;
  --kurve: cubic-bezier(.2, .7, .1, 1);

  /* Derived from the spec's layout line, so no section types these numbers again. */
  --breite: 1152px;
  --rand: 16px;
  --abschnitt: clamp(72px, 10vw, 136px);
  --kopf-hoehe: 64px;

  /* the browser's own controls (scrollbar, autofill) follow the mode */
  color-scheme: dark;
}
/* LIGHT: daylight on the same family. Warm paper, forest ink, and the window light darkened
   to a bronze that holds 4.5:1 as text on the paper (the pill and the filled button then
   carry paper-coloured words). Measured pairs: EDITING.md, "Light and dark". */
:root[data-theme="light"],
/* the date panel and the sentence of the hero stay on the photograph but are light glass with dark ink, like the rest of the light page */
:root[data-theme="light"] .haus__ruf,
:root[data-theme="light"] .haus__zeilen {
  --farbe-grund: #f4efe6;
  --farbe-flaeche: #fbf8f2;
  --farbe-flaeche-2: #e7dfd0;
  --farbe-tinte: #17221f;
  --farbe-tinte-leise: #46524d;
  --farbe-akzent: #77561a;
  --farbe-akzent-tinte: #fbf8f2;
  --farbe-linie: rgba(23, 34, 31, .16);
  --farbe-rand: rgba(23, 34, 31, .66);
  --farbe-see: #2c6a66;
  --farbe-glas: rgba(23, 34, 31, .035);
  --farbe-fehler: #a2341c;
  color-scheme: light;
}
@media (min-width: 720px) {
  :root { --rand: 24px; --kopf-hoehe: 76px; }
}

/* ======== FONTS — two variable files, 70 KB together, latin subset, OFL ======== */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../lichtung/fonts/bodoni-moda.woff2?v=0492c861") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../lichtung/fonts/manrope.woff2?v=938c6e80") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The stand-ins shown until the files arrive. Their width and line box are bent to
   the real faces (measured with fontTools on the shipped files: average advance and
   hhea ascent/descent), so the swap re-wraps no line and moves nothing: CLS stays 0. */
@font-face {
  font-family: "Lichtung Titel Ersatz";
  src: local("Georgia");
  size-adjust: 105.2%;
  ascent-override: 106.9%;
  descent-override: 38%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lichtung Text Ersatz";
  src: local("Arial");
  size-adjust: 104.3%;
  ascent-override: 102.2%;
  descent-override: 28.8%;
  line-gap-override: 0%;
}

/* ======== RESET — only what this page needs ======== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* The scrollbar's lane is kept even while the menu or the calendar locks scrolling,
     so opening them cannot shift the page sideways. */
  scrollbar-gutter: stable;
  /* An in-page jump must stop below the fixed top bar, not under it. */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--mass-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--farbe-grund);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Set by kopf.js while the full-screen menu is open. */
html.hat-menue { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* One long German compound must never widen a 320 px screen. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
/* A photo that did not arrive (core.js marks it): the flat surface behind it shows,
   not a broken-image icon. Opacity, not display, so its alt text is still read aloud. */
img.is-fehlt { opacity: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }

[hidden] { display: none !important; } /* the one !important: an author's display must not undo hidden */

/* ======== TYPE — Bodoni Moda for what is said once, Manrope for what is read ======== */
h1, h2, h3 {
  font-family: var(--schrift-titel);
  /* The file has an optical-size axis: large sizes get the hairline cut, small ones the sturdy one. */
  font-optical-sizing: auto;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.012em;
}
h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
small { font-size: .875rem; }
p { text-wrap: pretty; }

::selection { background: var(--farbe-akzent); color: var(--farbe-akzent-tinte); }

/* ======== FOCUS — one ring for every control, in the window light ======== */
:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* A heading that received focus after an in-page jump (core.js) is a place, not a
   control: the ring there would read as an error. */
[tabindex="-1"]:focus { outline: none; }

/* ======== SPRUNG — the skip link (first element in body, see head.html) ======== */
.sprung {
  position: fixed;
  top: var(--mass-2);
  left: var(--mass-2);
  z-index: 100;
  padding: var(--mass-3) var(--mass-4);
  border-radius: 12px;
  background: var(--farbe-tinte);
  color: var(--farbe-grund);
  font-weight: 600;
  /* Moved out of sight, not hidden: it has to stay focusable. */
  transform: translateY(-200%);
}
.sprung:focus { transform: none; }

/* ======== SR — visually hidden, still read aloud ======== */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ======== HUELLE — the centred content column ======== */
.huelle {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

/* ======== PILLE, TITEL, VORSPANN — the head of every section ======== */
.pille {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--mass-4);
  padding: var(--mass-2) var(--mass-4);
  border-radius: 10px;
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-tinte);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.titel {
  max-width: 18ch;
  margin-inline: auto;
  text-align: center;
}
/* One word of a headline may be lit like a window. Upright on purpose: the italic
   cut would cost another 54 KB for a single word. */
.titel em {
  font-style: normal;
  color: var(--farbe-akzent);
}
.vorspann {
  max-width: 52ch;
  margin: var(--mass-5) auto var(--mass-6);
  color: var(--farbe-tinte-leise);
  text-align: center;
}

/* ======== KNOPF — cream by default, outline when quiet, window light when it matters ======== */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mass-2);
  min-height: 48px;
  padding: 0 var(--mass-5);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--farbe-tinte);
  color: var(--farbe-grund);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, translate .2s var(--kurve);
}
.knopf svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.knopf--leise {
  border-color: var(--farbe-rand);
  background: transparent;
  color: var(--farbe-tinte);
}
/* "Mehr zeigen" under a folded section (Im Haus, Draußen): app.js, KERN 9. */
.knopf--licht {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-tinte);
}
.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}
/* Hover only where there is a real pointer: on a phone it would stick after the tap. */
@media (hover: hover) {
  .knopf:hover { background: var(--farbe-akzent); color: var(--farbe-akzent-tinte); }
  .knopf--leise:hover { border-color: var(--farbe-akzent); background: transparent; color: var(--farbe-akzent); }
  .knopf--licht:hover { background: var(--farbe-tinte); color: var(--farbe-grund); }
}
@media (prefers-reduced-motion: no-preference) {
  .knopf:active { translate: 0 1px; }
}

/* ======== GLAS — the glass card ======== */
.glas {
  padding: var(--mass-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-glas);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@media (min-width: 720px) {
  .glas { padding: var(--mass-6); }
}

/* ======== KARTE — the rounded photo card with its glass badge ======== */
.karte {
  position: relative;
  min-width: 0;
}
.karte__bild {
  position: relative;
  aspect-ratio: 1024 / 572; /* the photos' real shape, reserved before they load: no shift */
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
}
.karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karte__marke {
  position: absolute;
  top: var(--mass-3);
  left: var(--mass-3);
  padding: 6px var(--mass-3);
  border: 1px solid rgba(243, 239, 232, .22);
  border-radius: 10px;
  /* Darker than .glas: the badge lies on a photo and its text must hold 4.5:1 on a bright sky too. */
  background: rgba(12, 16, 18, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--farbe-tinte);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
}
.karte__marke--rechts { left: auto; right: var(--mass-3); }
.karte__inhalt {
  /* A grid only for its gap: name, sentence and facts keep one even distance. */
  display: grid;
  gap: var(--mass-2);
  padding-top: var(--mass-4);
}

/* ======== RASTER — one column on a phone, two or three beside each other later ======== */
.raster-2,
.raster-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mass-5);
}
@media (min-width: 720px) {
  .raster-2,
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ======== FAKTEN — small facts, each with a hand-drawn line icon ======== */
.fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mass-2) var(--mass-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--farbe-tinte-leise);
  font-size: .875rem;
  line-height: 1.4;
}
.fakten li {
  display: inline-flex;
  align-items: center;
  gap: var(--mass-2);
}
.fakten svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ======== ZEIG — the one reveal: rise 24px and fade in, once (core.js adds .is-da) ======== */
/* Hidden only when a script can show it again AND motion is welcome. Everyone else
   (no JavaScript, reduced motion, an old browser without the scripting query) gets
   the finished page at once. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* Before core.js has run: invisible from the first paint, so nothing flashes and
     then hides. Should core.js never arrive, this lets go by itself after 4 s. */
  html:not(.kern) [data-zeig] { animation: zeig-notfall 1ms 4s both; }

  html.kern [data-zeig] {
    transition:
      opacity var(--dauer) var(--kurve) calc(var(--i, 0) * 80ms),
      translate var(--dauer) var(--kurve) calc(var(--i, 0) * 80ms);
  }
  html.kern [data-zeig]:not(.is-da) {
    opacity: 0;
    translate: 0 24px;
  }
}
@keyframes zeig-notfall {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ======== LEBT — looping details run only while they are on screen (.is-wach) ======== */
[data-lebt]:not(.is-wach),
[data-lebt]:not(.is-wach) * { animation-play-state: paused; }

/* ======== REDUCED MOTION — everything there at once, nothing loops ======== */
@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 0s; }
  [data-lebt],
  [data-lebt] * { animation-play-state: paused; }
  .knopf { transition: none; }
}

/* ======== PRINT — ink on paper: dark text, no glass ======== */
@media print {
  :root {
    --farbe-grund: #fff;
    --farbe-flaeche: #fff;
    --farbe-flaeche-2: #eee;
    --farbe-tinte: #111;
    --farbe-tinte-leise: #444;
    --farbe-linie: #bbb;
  }
}


/* ======================================================================
   TIEFE (the step-inside viewer)
   ====================================================================== */
/* ======== TIEFE — a photograph that can be entered: the door on the picture, the opened picture ======== */
/* Goes into styles.css as it is. Every colour, face, gap, corner and timing
   is one of the foundation's tokens (CONVENTIONS.md, section 8), so whatever
   visual direction is chosen dresses the viewer with it, and the four times
   of day reach it without a rule of their own. Sizes that are about a thumb
   (44px and more) or about the screen's safe area are written out: a token
   must not be able to make a button too small to hit.
   Kit classes are the one exception to "a class starts with your sid": any
   section puts .tiefe-bild and .tiefe-tuer on its own picture (KIT.md). */

/* THE DOOR. .tiefe-bild is the box around an enterable <img>, .tiefe-tuer the
   button in its corner. The button is `hidden` in index.html and shown by
   app.js (TIEFE), so a guest without JavaScript is not offered a door that
   does not open; the zoom pointer only appears together with it. */
.tiefe-bild { position: relative; }
.tiefe-bild:has(.tiefe-tuer:not([hidden])) img { cursor: zoom-in; }
.tiefe-tuer {
  position: absolute;
  left: var(--mass-3);
  bottom: var(--mass-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--mass-2);
  min-width: 2.75rem;    /* 44px: it is a button for a thumb */
  min-height: 2.75rem;
  padding: 0 var(--mass-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
/* display above would otherwise undo `hidden` (the state without JavaScript) */
.tiefe-tuer[hidden] { display: none; }
.tiefe-tuer svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Ink and surface change places: the one pair whose contrast the foundation
   guarantees in every time of day. */
.tiefe-tuer:hover, .tiefe-tuer:focus-visible { background: var(--farbe-tinte); color: var(--farbe-flaeche); }
/* While a picture is entered its place on the page stays empty: the photograph
   has left it. visibility keeps the box, so nothing on the page moves. */
.tiefe-bild.is-betreten img { visibility: hidden; }

/* THE OPENED PICTURE (built by tiefe.js on the first opening). The window is
   the cut-out that grows from the picture's place to the screen, the stage
   inside it holds the photograph twice: as <img> (what flies, and the
   fallback) and as the canvas that draws it with depth. */
/* above whatever the page keeps sticky; the page behind is inert meanwhile */
/* The highest layer there is: also above the studio's price tag, which would cover the close button */
.tiefe { position: fixed; inset: 0; z-index: 2147483647; color: var(--farbe-tinte); }
/* NOT the whole screen: the picture is a panel (--tiefe-o / -s / -u are its distances from
   the top, the sides and the bottom) and the page stays visible around it, dimmed. A press
   on the dimmed part closes (tiefe.js). Phone: a sheet with a clear margin at the top. */
.tiefe { --tiefe-o: 4.5rem; --tiefe-s: .5rem; --tiefe-u: .5rem; }
@media (min-width: 720px) {
  .tiefe { --tiefe-o: 7vh; --tiefe-s: 7vw; --tiefe-u: 7vh; }
}
.tiefe::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--farbe-grund) 78%, transparent); opacity: 0; }
.tiefe.is-offen::before { opacity: 1; }
/* touch-action: a finger on the picture moves the view, never the page */
.tiefe__fenster {
  position: absolute;
  inset: var(--tiefe-o) var(--tiefe-s) var(--tiefe-u);
  overflow: hidden;
  border-radius: var(--radius);
  transform-origin: 0 0;
  touch-action: none;
  cursor: move;
}
.tiefe__buehne { position: absolute; inset: 0; }
.tiefe.is-wechselt .tiefe__buehne { opacity: 0; }
.tiefe__foto, .tiefe__glas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* 1.05 is the canvas's own zoom (tiefe.js, ZOOM): the two must not jump when one replaces the other */
.tiefe__foto { object-fit: cover; scale: 1.05; }
.tiefe__glas { opacity: 0; }
.tiefe.hat-tiefe .tiefe__glas { opacity: 1; }

/* The words of the picture, on the same surface as the page's raised parts. */
.tiefe__schild {
  position: absolute;
  left: calc(var(--tiefe-s) + 1rem);
  bottom: calc(var(--tiefe-u) + 1rem);
  max-width: min(31rem, calc(100% - 2 * var(--tiefe-s) - 2rem));
  padding: var(--mass-3) var(--mass-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  pointer-events: none;   /* a finger that starts on the card still moves the picture */
}
.tiefe__schild[hidden] { display: none; }
.tiefe__schild h2 { margin: 0; font-family: var(--schrift-titel); font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; }
.tiefe__schild p { margin: var(--mass-1) 0 0; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.4; color: var(--farbe-tinte-leise); text-wrap: pretty; }

.tiefe__knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;    /* 48px */
  height: 3rem;
  padding: 0;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  cursor: pointer;
}
.tiefe__knopf[hidden] { display: none; }
.tiefe__knopf:hover { background: var(--farbe-tinte); color: var(--farbe-flaeche); }
/* Two rings, surface inside and ink outside: on a photograph one colour alone
   can meet its own tone and vanish. */
.tiefe__knopf:focus-visible { outline: 2px solid var(--farbe-flaeche); outline-offset: 2px; box-shadow: 0 0 0 6px var(--farbe-tinte); }
/* The way out: inside the panel, top right, with its word on it, in the page's strongest
   pair of colours. It is there from the first frame and never fades (see the two rules below). */
.tiefe__zu {
  top: calc(var(--tiefe-o) + .75rem);
  right: calc(var(--tiefe-s) + .75rem);
  display: inline-flex;
  align-items: center;
  gap: var(--mass-2);
  width: auto;
  padding: 0 var(--mass-4) 0 var(--mass-3);
  border-color: var(--farbe-tinte);
  background: var(--farbe-tinte);
  color: var(--farbe-grund);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
}
.tiefe__zu:hover { background: var(--farbe-akzent); color: var(--farbe-akzent-tinte); }
.tiefe__zurueck, .tiefe__vor { top: 50%; translate: 0 -50%; }
.tiefe__zurueck { left: calc(var(--tiefe-s) + .75rem); }
.tiefe__vor { right: calc(var(--tiefe-s) + .75rem); }
/* one arrow drawing for both directions */
.tiefe__vor svg { rotate: 180deg; }
.tiefe__schild, .tiefe__knopf { opacity: 0; }
.tiefe.is-offen .tiefe__schild, .tiefe.is-offen .tiefe__knopf { opacity: 1; }
.tiefe .tiefe__zu { opacity: 1; }

/* Without this block nothing fades and nothing drifts: the picture is simply
   there, and tiefe.js skips the flight and the wandering view as well. */
@media (prefers-reduced-motion: no-preference) {
  .tiefe-tuer { transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .tiefe::before { transition: opacity var(--dauer) var(--kurve); }
  .tiefe__buehne { transition: opacity .2s var(--kurve); }   /* tiefe.js changes the picture after 220ms */
  .tiefe__glas { transition: opacity var(--dauer) var(--kurve); }
  /* words and buttons arrive after the picture has (the flight takes 540ms) */
  .tiefe__schild, .tiefe__knopf { transition: opacity var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve); }
  .tiefe.is-offen .tiefe__schild, .tiefe.is-offen .tiefe__knopf { transition-delay: .4s, 0s; }
  .tiefe.is-offen .tiefe__zu { transition-delay: 0s; }
  /* NO DEPTH (no WebGL, a lost context, no depth map; tiefe.js sets
     .ist-flach): the photograph alone, coming slowly closer. */
  .tiefe.ist-flach .tiefe__foto { animation: tiefe-naeher 18s ease-in-out infinite alternate; }
  @keyframes tiefe-naeher { to { scale: 1.16; } }
}


/* ======================================================================
   KOPF (data-sid="kopf")
   ====================================================================== */
/* ======== HINWEIS — the demo note above the top bar ======== */
/* Small and padded: it has to be read once, but it must not take an eighth of a phone
   screen before the hotel is seen, and its first word must not touch the screen edge. */
.hinweis {
  margin: 0;
  padding: var(--mass-2) var(--mass-4);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--farbe-tinte-leise);
}

/* ======== KOPF — the top bar: wordmark, language, "Anfragen", menu ======== */
/* Sticky with a negative margin instead of fixed: the demo note above it stays
   readable at the top of the page, the bar takes no room of its own (the hero runs
   under it) and from the first scrolled pixel it behaves like a fixed bar. */
.kopf {
  position: sticky;
  top: 0;
  /* Above the studio's price tag (z 2147483100, js/fertig.js): its string hangs from the top of
     the window and used to be drawn across the language button. The string now comes out from
     under the bar. The room viewer (2147483647) stays above both. */
  z-index: 2147483200;
  height: var(--kopf-hoehe);
  margin-bottom: calc(-1 * var(--kopf-hoehe));
  color: var(--farbe-tinte);
}
/* The bar's ground is a layer of its own, so that becoming solid is an opacity
   change (cheap, no repaint of the text) and never moves anything. */
.kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--farbe-linie);
  background: var(--farbe-grund);
  background: color-mix(in srgb, var(--farbe-grund) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s;
}
/* Over the hero the bar shows wordmark, language, mode and menu only: the hero has the one
   filled action of the first screen. "Anfragen" joins once the hero has scrolled away (the
   class kopf--fest, app.js). visibility keeps its place, so nothing moves; only under
   html.kern, so a page without JavaScript always has the link. */
.kern .kopf:not(.kopf--fest) .kopf__anfragen { visibility: hidden; }
/* first in the row, so that its kept place is not a gap between the other buttons */
.kopf__anfragen { order: -1; }
/* On the narrowest phones four controls do not fit beside the wordmark: the menu has the same link. */
@media (max-width: 389px) {
  .kopf .kopf__anfragen { display: none; }
}
/* The mode button: sun in the dark page, moon in the light one (the icon is where it leads). */
.kopf__thema svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kopf__thema .kopf__mond,
:root[data-theme="light"] .kopf__thema .kopf__sonne { display: none; }
:root[data-theme="light"] .kopf__thema .kopf__mond { display: block; }
/* After the hero (kopf.js): solid, so it never lies unreadable on a photo or on text. */
.kopf--fest::before { opacity: 1; }
/* Light page: the bar is one plain paper band. A translucent paper over the dark photograph
   behind it turned grey, so the header looked half dark; the dark page hides this because
   its ground is the photograph's own colour. */
:root[data-theme="light"] .kopf::before { background: var(--farbe-grund); }
/* Over the hero in its two daylight states the drawing is bright: cream letters
   need the night ground there as well. Fully, not half: a half-clear dark layer on
   a cream sky turns into a grey slab. */
[data-zeit="morgen"] .kopf::before,
[data-zeit="tag"] .kopf::before { opacity: 1; }
/* Evening and night too: while the hero scrolls, the drawing's lines and the giant
   wordmark pass under the bar, and the small wordmark must stay readable on them. */
[data-zeit="abend"] .kopf::before,
[data-zeit="nacht"] .kopf::before { opacity: 1; }

.kopf__leiste {
  display: flex;
  align-items: center;
  gap: var(--mass-2);
  width: min(100% - 2 * var(--rand), var(--breite));
  height: var(--kopf-hoehe);
  margin-inline: auto;
}
.kopf__marke {
  /* The 44 px tap height comes from the line box, the letters stay 1.5rem. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--schrift-titel);
  /* The smallest phone (320 px) has 288 px for the wordmark and three controls:
     the base sizes are the tight ones, 360 px and up get the comfortable ones. */
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
}
.kopf__zeit {
  display: none; /* no room for it beside the wordmark on a phone */
  padding-left: var(--mass-3);
  border-left: 1px solid var(--farbe-linie);
  color: var(--farbe-tinte-leise);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kopf__rechts {
  display: flex;
  align-items: center;
  gap: var(--mass-1);
  margin-left: auto;
}

/* ======== KOPF — the controls on the right ======== */
.kopf__anfragen {
  /* 44 instead of the button's usual 48: three controls and the wordmark share 288 px on the smallest phone. */
  min-height: 44px;
  padding: 0 var(--mass-3);
  font-size: .875rem;
  white-space: nowrap;
}
/* Not the mono face here: its wide letters would cost the 320 px bar its last pixels. */
.kopf__naechte { font-variant-numeric: tabular-nums; }
.kopf__knopf {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  background: transparent;
  color: var(--farbe-tinte);
  transition: border-color .2s, color .2s;
}
/* The menu button is authored `hidden` and shown by app.js. With display:none it pushed
   the language button and "Anfragen" 56 px to the left when it appeared (the page's layout
   shift on desktop). So it keeps its place and is only invisible until the script shows it.
   Without JavaScript a <noscript> rule in index.html takes it out again. */
.kopf__knopf[hidden] { display: inline-grid !important; visibility: hidden; }
.kopf__knopf svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
@media (hover: hover) {
  .kopf__knopf:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
}

/* The language menu is built by /js/i18n.js with its own small stylesheet; here it
   is only fitted to the bar. The box is reserved, so its late arrival moves nothing. */
.kopf__sprache {
  display: flex;
  align-items: center;
  flex: none;
  /* A fixed width, not a minimum: the button measures 44 to 48 px (IT to EN) and a
     minimum of 46 let "DE" push its neighbours by 2 px when it arrived (CLS 0.002). */
  justify-content: flex-end;
  width: 50px;
  min-height: 44px;
  --wdm-lang-font: var(--schrift-text);
  --wdm-lang-fg: var(--farbe-tinte);
  --wdm-lang-border: var(--farbe-rand);
  --wdm-lang-bg: transparent;
}
/* the shared switch sets 13 px; nothing a visitor reads is smaller than 14 */
.kopf .wdm-lang { font-size: .875rem; }
.kopf .wdm-lang__btn {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.kopf .wdm-lang__list {
  /* The list hangs over the page, so unlike its button it needs a ground. */
  background: var(--farbe-flaeche-2);
  font-size: .9375rem;
}
.kopf .wdm-lang__list li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--mass-4);
}

/* ======== KOPF — the menu: one glass sheet over the whole page ======== */
.kopf__menue {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  background: var(--farbe-grund);
  /* 93%, not less: over the bright daytime hero a clearer sheet went grey and the
     cream words lost their depth. The page still glows through, blurred. */
  background: color-mix(in srgb, var(--farbe-grund) 93%, transparent);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  color: var(--farbe-tinte);
}
.kopf__menue::backdrop { background: transparent; } /* the sheet itself is the veil */

.kopf__blatt {
  display: grid;
  gap: var(--mass-6);
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  padding-block: var(--mass-5) var(--mass-7);
}
.kopf__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kopf;
  border-top: 1px solid var(--farbe-linie);
}
.kopf__liste li {
  counter-increment: kopf;
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf__liste a {
  display: flex;
  align-items: baseline;
  gap: var(--mass-4);
  padding-block: var(--mass-3);
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 8.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
}
/* Numbered like the sheets of a set of plans; written by CSS so the dictionary
   holds only the six words. */
.kopf__liste a::before {
  content: counter(kopf, decimal-leading-zero);
  min-width: 2.2em;
  color: var(--farbe-akzent);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
@media (hover: hover) {
  .kopf__liste a { transition: color .2s, translate .3s var(--kurve); }
  .kopf__liste a:hover { color: var(--farbe-akzent); translate: 8px 0; }
}
.kopf__aufenthalt {
  display: grid;
  gap: var(--mass-4);
  justify-items: start;
}
.kopf__ihr {
  max-width: 32ch;
  color: var(--farbe-tinte-leise);
}
.kopf__ihr.hat-naechte {
  color: var(--farbe-tinte);
  font-family: var(--schrift-titel);
  font-size: 1.75rem;
  line-height: 1.2;
}
.kopf__daten {
  margin-top: calc(-1 * var(--mass-2));
  color: var(--farbe-akzent);
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  letter-spacing: .04em;
}

/* ======== KOPF — motion: the sheet fades in, the six lines follow one by one ======== */
@media (prefers-reduced-motion: no-preference) {
  .kopf__menue[open] { animation: kopf-auf .35s var(--kurve); }
  .kopf__menue[open] .kopf__liste li,
  .kopf__menue[open] .kopf__aufenthalt {
    animation: kopf-zeile var(--dauer) var(--kurve) calc(var(--i, 6) * 50ms + 80ms) backwards;
  }
}
@keyframes kopf-auf {
  from { opacity: 0; }
}
@keyframes kopf-zeile {
  from { opacity: 0; translate: 0 16px; }
}

/* ======== KOPF — wider screens ======== */
@media (min-width: 360px) {
  .kopf__leiste { gap: var(--mass-3); }
  .kopf__marke { font-size: 1.5rem; }
  .kopf__rechts { gap: var(--mass-2); }
  .kopf__anfragen { padding: 0 var(--mass-4); font-size: .9375rem; }
}
@media (min-width: 720px) {
  .kopf__marke { font-size: 1.75rem; }
  .kopf__zeit:not([hidden]) { display: block; }
  .kopf__rechts { gap: var(--mass-3); }
  .kopf__anfragen { padding: 0 var(--mass-5); }
}
@media (min-width: 1100px) {
  /* The words on the left, the guest's own nights on the right, like a title block. */
  .kopf__blatt {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: var(--mass-8);
    padding-top: var(--mass-6);
  }
}


/* ======================================================================
   HAUS (data-sid="haus")
   ====================================================================== */
/* ======== HAUS — the hero: a photograph of the house, two date fields, one button ======== */
/* The photograph itself, its lit windows and the 14 window buttons are hausfoto.css.
   Here: the stage, the hosts' sentence, the wordmark, the date fields with their status
   line, and the room card of a pressed window. The text is always the light ink: under
   it lies a photograph with a dark scrim, at every hour. */
.haus {
  --haus-tinte: var(--farbe-tinte);
  --haus-grund: var(--farbe-grund);
  position: relative;
  background: var(--farbe-grund);
  color: var(--haus-tinte);
}

/* ======== HAUS — the stage: one screen, nothing pinned ======== */
/* 100svh, not vh: on a phone the address bar must not cut the wordmark off. */
.haus__buehne {
  position: relative;
  height: 100vh;
  /* minus the demo note above it (measured in index.html): note + stage = one screen,
     so the date fields at the bottom edge are on the first screen. */
  height: calc(100svh - var(--hinweis-hoehe, 0px));
  overflow: hidden;
  background: var(--haus-grund);
}
/* Without JavaScript: the one picture the <noscript> block brings, covering the stage. */
.haus__ohne img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* In the dark page the lake fades into the page ground, so the hero has no lower edge. */
.haus__saum {
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, var(--farbe-grund));
  pointer-events: none;
}
/* In the light page there is no night ground to fade into: the photograph ends with its own edge. */
:root[data-theme="light"] .haus__saum { display: none; }

/* ======== HAUS — the hosts' sentence for the hour ======== */
/* Fades with the hour (day: there, night: gone). Starts below the fixed top bar. */
.haus__zeilen {
  position: absolute;
  top: calc(var(--mass-8) - var(--mass-4));
  left: var(--mass-4);
  right: var(--mass-4);
  display: grid;
  max-width: 34ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  text-shadow: 0 1px 22px color-mix(in srgb, var(--farbe-grund) 70%, transparent);
  pointer-events: none;
}
/* Light page: white words on pale rock and sky cannot be made readable with a shadow or a cloud
   (a dark cloud strong enough for the snow is a smudge). The sentence becomes a small paper label
   with dark ink, the same glass as the date panel. */
:root[data-theme="light"] .haus__zeile {
  justify-self: start;
  padding: var(--mass-2) var(--mass-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--mass-3);
  background: color-mix(in srgb, var(--farbe-grund) 92%, transparent);
  color: var(--farbe-tinte);
  text-shadow: none;
}
.haus__zeile {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity calc(var(--dauer) * 3) var(--kurve), visibility calc(var(--dauer) * 3);
}
.haus[data-zeit="tag"] [data-z="tag"] { opacity: 1; visibility: visible; }

/* ======== HAUS — the wordmark: the page's H1 ======== */
/* On a phone the word stands directly above the date fields (their box is 9.25rem tall). */
.haus__marke {
  position: absolute;
  left: var(--mass-4);
  bottom: calc(var(--mass-4) + 9.25rem + var(--mass-5));
  pointer-events: none;                /* the word lies over the photograph: taps go through to the windows */
  text-shadow: 0 1px 22px color-mix(in srgb, var(--farbe-grund) 70%, transparent);
}
.haus__name {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(3.2rem, 14.4vw, 4.25rem);
  font-weight: 500;
  line-height: .78;
  letter-spacing: -.01em;
}
.haus__unter {
  height: 1.25rem;
  margin: 1.5rem 0 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ======== HAUS — arrival, departure, one button; then one status line ======== */
.haus__ruf {
  position: absolute;
  left: var(--mass-4);
  right: var(--mass-4);
  bottom: var(--mass-4);
  z-index: 2;                          /* over the window buttons, under the room card (3) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mass-2);
  padding: var(--mass-3);
  border: 1px solid color-mix(in srgb, var(--haus-tinte) 32%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--haus-grund) 74%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
:root[data-theme="light"] .haus__ruf {
  --haus-tinte: var(--farbe-tinte);
  --haus-grund: var(--farbe-grund);
  color: var(--farbe-tinte);
  background: color-mix(in srgb, var(--farbe-grund) 92%, transparent);   /* paper glass: the photograph only shows through as a hint */
}
.haus:not(.hat-js) .haus__ruf { display: none; }   /* the fields need the script; the page below has the rooms and the form */
/* A date field: a button that looks like a field. Empty, it shows its word alone; with a
   date the word becomes the small label above it. Used again as the first step of the form. */
.haus__feld {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: var(--mass-1) var(--mass-3);
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  background: color-mix(in srgb, var(--farbe-grund) 40%, transparent);
  color: var(--farbe-tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dauer) var(--kurve);
}
.haus__feld:hover { border-color: var(--farbe-tinte); }
.haus__feld-wort { font-size: 1rem; font-weight: 600; }
.haus__feld-wert { display: none; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.haus__feld.ist-voll .haus__feld-wort { color: var(--farbe-tinte-leise); font-size: .875rem; font-weight: 500; }
.haus__feld.ist-voll .haus__feld-wert { display: block; }
.haus__ruf-knopf { grid-column: 1 / -1; padding-inline: var(--mass-4); white-space: nowrap; }
/* The one status line. Its row is reserved from the start, so the answer moves nothing. */
.haus__bilanz {
  grid-column: 1 / -1;
  min-height: 1.35em;
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .haus__bilanz:empty { display: none; }   /* the box hangs from the bottom edge: it grows upward, nothing moves */
}
/* house full for these nights: the nearest free dates with the same number of nights */
.haus__vorschlag { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--mass-2); }
.haus__vorschlag[hidden] { display: none; }
.haus__vorschlag-titel { width: 100%; margin: 0; font-size: .875rem; }
.haus__vorschlag button {
  min-height: 44px;
  padding: 0 var(--mass-3);
  border: 1px solid var(--haus-tinte);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
/* the dead end (two suggestions under the line) makes the box taller: the wordmark stands above it */
@media (max-width: 719px) {
  .haus:has(.haus__vorschlag:not([hidden])) .haus__marke { bottom: calc(var(--mass-4) + 16.5rem + var(--mass-5)); }
}

/* ======== HAUS — the room card of a tapped window ======== */
/* Always the dark surface of the page: a card is page furniture, not part of the
   photograph. Phone: a card at the bottom edge. */
.haus__karte {
  position: absolute;
  left: var(--mass-4);
  right: var(--mass-4);
  bottom: var(--mass-4);
  z-index: 3;
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--farbe-flaeche) 94%, transparent);
  color: var(--farbe-tinte);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.haus__karte[hidden] { display: none; }
/* The box keeps its shape while the photo loads, and stays a flat surface if it never arrives. */
.haus__karte-bild { margin: 0; aspect-ratio: 16 / 7; overflow: hidden; background: var(--farbe-flaeche-2); }
.haus__karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.haus__karte-bild img.is-weg { visibility: hidden; }
.haus__karte-text { display: grid; gap: var(--mass-1); padding: var(--mass-4); }
.haus__karte-text p { margin: 0; }
.haus__karte-name { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.haus__karte-fakt,
.haus__karte-frei { color: var(--farbe-tinte-leise); font-size: .875rem; }
.haus__karte-preis { color: var(--farbe-akzent); font-family: var(--schrift-zahl); font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.haus__karte-anfrage { width: 100%; margin-top: var(--mass-3); }
.haus__karte-zu {
  position: absolute;
  top: var(--mass-2);
  right: var(--mass-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--farbe-linie);
  border-radius: 50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  cursor: pointer;
}
.haus__karte-zu svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* ======== HAUS — from 720 px: wider gutter, the fields in one row at the right ======== */
@media (min-width: 720px) {
  .haus__zeilen { left: var(--mass-5); right: var(--mass-5); font-size: 1.125rem; }
  .haus__marke { left: var(--mass-5); bottom: var(--mass-6); }
  .haus__ruf {
    left: auto;
    right: var(--mass-5);
    bottom: var(--mass-5);
    width: 500px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .haus__ruf-knopf { grid-column: auto; }
  .haus__karte { left: auto; right: var(--mass-5); bottom: var(--mass-5); width: 380px; }
}
/* Between 720 and 899 px the word and the fields would share the bottom edge: the word steps up. */
@media (min-width: 720px) and (max-width: 899.98px) {
  .haus__marke { bottom: calc(var(--mass-5) + 7rem + var(--mass-5)); }
}

/* ======== HAUS — the wide sheet: the large wordmark, the card beside its window ======== */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .haus__name { font-size: clamp(5rem, 10.5vw, 9.5rem); }
  .haus__unter { margin-top: 1.75rem; font-size: .9375rem; }
  /* anchored to its window by app.js through two custom properties */
  .haus__karte { left: var(--haus-kx, auto); top: var(--haus-ky, auto); right: auto; bottom: auto; width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .haus__zeile, .haus__feld { transition: none; }
}

/* ======================================================================
   ZIMMER (data-sid="zimmer")
   ====================================================================== */
/* ======== ZIMMER — the four room types, each with its live price and its free rooms ======== */
/* Head, cards, facts and buttons are the foundation's (.pille .titel .vorspann .karte
   .fakten .knopf, see TOKENS.md). Here is only what this section adds: the uneven
   grid, the badge that changes with the chosen nights, and the states of a card. */
.zimmer { padding-block: var(--abschnitt); }

/* The headline is rewritten when nights are chosen ("Ihre drei Nächte: …"). Two lines are
   kept for it from the start, so the cards below do not move when the words change. */
.zimmer__titel { min-height: 2lh; }

/* ======== ZIMMER — the grid: the photographs lead ======== */
/* The section is wider than the text column of the page (--breit, shared with the form and
   "Gut zu wissen"): two equal cards per row, each photograph 16:10 and as wide as its card. */
.zimmer .huelle,
.anfrage .huelle,
.fragen .huelle { --breite: var(--breit); }
.zimmer__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mass-6) var(--mass-5);
}
.zimmer .zimmer__bild { aspect-ratio: 16 / 10; }
/* On a phone the cards run from edge to edge: the photograph is the full width of the screen. */
@media (max-width: 719px) {
  .zimmer__karte {
    margin-inline: calc(var(--mass-4) * -1);
    border-inline: 0;
    border-radius: 0;
  }
  .zimmer .zimmer__bild { aspect-ratio: 4 / 3; border-radius: 0; }
}
@media (min-width: 720px) {
  .zimmer__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--mass-7);
  }
}

/* ======== ZIMMER — the live badge on the photo ======== */
.zimmer .zimmer__marke {
  z-index: 1;
  max-width: calc(100% - 2 * var(--mass-3));
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* The whole photo is the door into the room; the badge must not swallow that click. */
  pointer-events: none;
}
/* A free room is a lit window, as in the drawing of the house at the top of the page.
   The words say it as well ("noch 2 frei"), the colour is not the only sign. */
.zimmer__karte.is-frei .zimmer__marke {
  border-color: transparent;
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-tinte);
}

/* The plate of the chosen room, opposite the door (bottom left is tiefe-tuer's corner). */
.zimmer__wahl {
  position: absolute;
  right: var(--mass-3);
  bottom: var(--mass-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--mass-1);
  margin: 0;
  padding: var(--mass-1) var(--mass-3) var(--mass-1) var(--mass-2);
  border-radius: 10px;
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-tinte);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}
.zimmer__wahl svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ======== ZIMMER — the states of a card (set by zimmer.js) ======== */
/* Chosen: a ring in window light around the photo. An outline, because it takes no
   room: choosing a card must not move its neighbours. */
.zimmer__karte.is-gewaehlt .zimmer__bild {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}
/* Not to be had on these nights (taken, too small, too short a stay): the photo goes
   dark like a window with the light off. Only the photo: the words keep their contrast,
   and the room can still be entered and looked at. */
.zimmer__karte.is-zu .zimmer__bild img:not(.is-fehlt) {
  opacity: .34;
  filter: saturate(.35);
}

/* ======== ZIMMER — the words under the photo ======== */
.zimmer__name { margin: 0; }
.zimmer__zeile {
  margin: var(--mass-1) 0 var(--mass-4);
  color: var(--farbe-tinte-leise);
}
/* The fourth fact is the long one ("Holzofen, das Holz liegt bereit"): it may wrap
   inside its own item instead of pushing the row wider than a 320 px phone. */
.zimmer__fakten li { min-width: 0; }
/* The button sits at the foot of its card: in a row of two the facts may wrap on one
   side only, and the two buttons should still stand on one line. */
.zimmer__karte { display: flex; flex-direction: column; }
.zimmer__inhalt { flex: 1; display: flex; flex-direction: column; }
/* ONE primary action per card (request this room) and one quiet text link (step inside). */
.zimmer__tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mass-2) var(--mass-5);
  margin: auto 0 0;
  padding-top: var(--mass-5);
}
/* Full width under a thumb, as wide as its words beside a mouse. */
.zimmer__knopf { width: 100%; }
@media (min-width: 720px) {
  .zimmer__knopf { width: auto; }
}
/* A room that is taken or too small: one quiet statement (a span, a p cannot sit inside .zimmer__tat) where the request button was. Same height
   as the button (48px), so the card keeps its size between states. */
.zimmer__stand {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  color: var(--farbe-tinte-leise);
  font-size: 1rem;
}
@media (min-width: 720px) {
  .zimmer__stand { width: auto; }
}
/* The door, here as a text link beside the button and not as a plate on the photograph. */
.zimmer__tat .tiefe-tuer {
  position: static;
  min-height: 44px;
  padding: 0 var(--mass-1);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--farbe-tinte-leise);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.zimmer__tat .tiefe-tuer:hover,
.zimmer__tat .tiefe-tuer:focus-visible { background: none; color: var(--farbe-tinte); }

/* ======== ZIMMER — the line under the cards: how much of the house is still free ======== */
.zimmer__fuss {
  margin-top: var(--mass-7);
  padding-top: var(--mass-5);
  border-top: 1px solid var(--farbe-linie);
  text-align: center;
}
.zimmer__bilanz {
  /* two lines kept on a phone: the sentence with dates is longer than the one without */
  min-height: 2lh;
  margin: 0 auto;
  max-width: 44ch;
  font-family: var(--schrift-zahl);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-akzent);
}
.zimmer__klein {
  margin: var(--mass-2) 0 0;
  font-size: .875rem;
  color: var(--farbe-tinte-leise);
}
@media (min-width: 720px) {
  .zimmer__bilanz { min-height: 1lh; max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The light goes on and off, it does not jump: the same timing as the windows above. */
  .zimmer .zimmer__marke { transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
  .zimmer__bild img { transition: opacity var(--dauer) var(--kurve); }
}


/* ======================================================================
   ANFRAGE (data-sid="anfrage")
   ====================================================================== */
/* ======== ANFRAGE — the stay with its price, the short form, the reception photo ======== */
/* Markup: (archived build notes) anfrage.html. Script: (archived build notes) anfrage.js (the ANFRAGE block of app.js).
   Shared look (.huelle, .glas, .pille, .titel, .knopf) comes from the foundation; this
   file only places things and styles what exists nowhere else: the price list and the fields. */

.anfrage {
  padding-block: var(--abschnitt);
}

/* Phone: one column, the photo first as a short band so the card starts on screen one. */
.anfrage__huelle {
  display: grid;
  gap: var(--mass-5);
}

.anfrage__karte {
  padding: var(--mass-6) var(--mass-4) var(--mass-5);
  /* A grid child may not grow past its column because of one long e-mail address. */
  min-width: 0;
}

.anfrage__kopf {
  text-align: center;
}

/* The card is half the page wide on a desktop: the page's h2 size would break the
   personal sentence into five lines there, so this one headline runs a step smaller. */
.anfrage__titel {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  text-wrap: balance;
}

/* The question after the stay ("Sollen wir sie für Sie festhalten?") is the quiet
   second voice of the headline, not a second headline. */
.anfrage__frage {
  display: block;
  margin-top: var(--mass-3);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--farbe-tinte-leise);
}

/* ======== ANFRAGE — the stay: room, dates, the nights by season, the total ======== */
/* Two hairlines instead of a box: a box here would be a card inside the glass card. */
.anfrage__aufenthalt {
  margin-block: var(--mass-5);
  padding-block: var(--mass-5);
  border-block: 1px solid var(--farbe-linie);
}

/* The first step: arrival and departure, the hero's own fields (.haus__feld). */
.anfrage__wann { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mass-3); }
/* "Lieber direkt?": plain ways to reach the house, under the form. No widget, no second idea. */
.anfrage__direkt {
  margin-top: var(--mass-5);
  padding-top: var(--mass-5);
  border-top: 1px solid var(--farbe-linie);
}
.anfrage__direkt-titel { margin: 0 0 var(--mass-2); font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 600; }
.anfrage__direkt-liste { display: grid; gap: var(--mass-1); margin: 0; padding: 0; list-style: none; color: var(--farbe-tinte-leise); }
.anfrage__direkt-liste li { display: flex; flex-wrap: wrap; gap: 0 var(--mass-2); min-height: 2rem; align-items: center; }
.anfrage__direkt-liste strong { color: var(--farbe-tinte); font-weight: 600; }
.anfrage__direkt-liste a { display: inline-flex; align-items: center; min-height: 44px; color: var(--farbe-tinte); text-underline-offset: 4px; }
@media (min-width: 720px) {
  .anfrage__karte { padding-inline: var(--mass-6); }
}

.anfrage__hinweis {
  margin: 0;
  text-align: center;
  color: var(--farbe-tinte-leise);
}

/* The house's objection to the chosen stay (minimum nights, room taken): it must not
   read like the quiet invitation, so it takes the ink colour and a line of its own. */
.anfrage__hinweis {
  margin-top: var(--mass-4);
  color: var(--farbe-tinte);
}

.anfrage__zimmer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mass-1) var(--mass-4);
  margin: 0 0 var(--mass-4);
}

.anfrage__zimmername {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.anfrage__gaeste {
  font-size: .875rem;
  color: var(--farbe-tinte-leise);
}

/* The label column is as wide as its longest label ("3 Nächte · Winter" must stay on
   one line on a phone); the value takes the rest and may wrap. */
.anfrage__liste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mass-2) var(--mass-4);
  margin: 0;
}

.anfrage__liste dt {
  color: var(--farbe-tinte-leise);
}

.anfrage__liste dd {
  margin: 0;
  text-align: right;
}

/* Figures line up in their column only with tabular digits. */
.anfrage__zahl {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: .9375rem;
}

/* The total is the one number the guest came for: the only accent in the list. */
.anfrage__gesamt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mass-4);
  margin: var(--mass-4) 0 0;
  padding-top: var(--mass-4);
  border-top: 1px solid var(--farbe-linie);
  font-weight: 600;
}

.anfrage__summe {
  font-family: var(--schrift-titel);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--farbe-akzent);
}

.anfrage__klein {
  margin: var(--mass-2) 0 0;
  font-size: .875rem;
  text-align: right;
  color: var(--farbe-tinte-leise);
}

.anfrage__wuensche {
  margin: var(--mass-4) 0 0;
  font-size: .875rem;
  color: var(--farbe-tinte-leise);
}

.anfrage__wuensche strong {
  font-weight: 600;
  color: var(--farbe-tinte);
}

/* "Nächte ändern" / "Zimmer ändern": text controls, but with a full 44px to tap. */
.anfrage__aendern {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--mass-5);
  margin-top: var(--mass-3);
}

.anfrage__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .875rem;
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
}

/* ======== ANFRAGE — the form: four fields, the consent line, one button ======== */
.anfrage__form {
  display: grid;
  gap: var(--mass-4);
}

.anfrage__feld {
  display: grid;
  gap: var(--mass-2);
  min-width: 0;
}

.anfrage__label {
  margin: 0;
  font-size: .875rem;
  color: var(--farbe-tinte-leise);
}
/* the two helper sentences are copy, not labels: 16 px */
.anfrage__hilfe,
.anfrage__danach {
  margin: 0;
  font-size: 1rem;
  color: var(--farbe-tinte-leise);
}

.anfrage__danach {
  text-align: center;
}

/* The field is a dark well in the glass card. Its border is mixed from the ink token
   because --farbe-linie is a hairline for decoration, too faint for a control (3:1). */
.anfrage__eingabe {
  width: 100%;
  min-height: 48px;
  padding: var(--mass-3) var(--mass-4);
  border: 1px solid var(--farbe-rand);
  border-radius: calc(var(--radius) - 6px);
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  /* 17px: below 16px iOS zooms the page when the field is tapped. */
  font-size: 1.0625rem;
  line-height: 1.4;
}

.anfrage__eingabe--lang {
  min-height: 104px;
  resize: vertical;
}

/* Wrong is said in words below the field; the heavier accent border only points at it. */
.anfrage__eingabe[aria-invalid="true"] {
  border-color: var(--farbe-akzent);
  box-shadow: inset 0 0 0 1px var(--farbe-akzent);
}

.anfrage__fehler,
.anfrage__meldung {
  margin: 0;
  font-size: .875rem;
  color: var(--farbe-akzent);
}

/* Empty until something is wrong: no reserved line, so the form stays compact. The
   line appears only after the guest's own tap or key press, which is not a layout shift. */
.anfrage__fehler:empty,
.anfrage__meldung:empty {
  display: none;
}

.anfrage__meldung {
  padding: var(--mass-3) var(--mass-4);
  border: 1px solid var(--farbe-akzent);
  border-radius: calc(var(--radius) - 6px);
  font-size: 1rem;
  color: var(--farbe-tinte);
}

/* Off screen instead of display:none: the simple bots this catches skip hidden fields. */
.anfrage__falle {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.anfrage__ja {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--mass-3);
  min-height: 44px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--farbe-tinte-leise);
  cursor: pointer;
}

/* A 24 px box inside a 44 x 44 px target: the transparent 10 px ring is part of the control, the
   inset shadow draws the visible box inside the padding edge. */
.anfrage__haken {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: -10px 0 -10px -10px;
  border: 10px solid transparent;
  border-radius: 16px;
  background-clip: padding-box;
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--farbe-rand);
  cursor: pointer;
}
.anfrage__haken:checked {
  background-color: var(--farbe-akzent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2118' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1.5px var(--farbe-akzent);
}
.anfrage__haken[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--farbe-fehler); }

.anfrage__schluss {
  display: grid;
  gap: var(--mass-3);
  margin-top: var(--mass-2);
}

.anfrage__weiter,
.anfrage__senden,
.anfrage__neu {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* While the request travels the button says so in words; the dimming is the second cue. */
.anfrage__senden[aria-busy="true"] {
  opacity: .6;
  cursor: progress;
}

/* ======== ANFRAGE — the thank-you that replaces the form ======== */
.anfrage__danke {
  display: grid;
  gap: var(--mass-4);
  margin-top: var(--mass-5);
}

/* Only the direct lines: the price list inside keeps the spacing it has in the form. */
.anfrage__danke > p {
  margin: 0;
}

.anfrage__danktitel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.anfrage__danke .anfrage__aufenthalt {
  margin-block: 0;
}

.anfrage__demo {
  font-size: .875rem;
  color: var(--farbe-tinte-leise);
}

/* ======== ANFRAGE — the reception photo ======== */
/* The flat surface colour shows while the file loads and stays if it never arrives
   (core.js fades a failed img out): a quiet panel instead of a broken-image icon. */
.anfrage__bild {
  position: relative;
  order: -1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
}

.anfrage__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The portrait is cut to a band on phones: keep the desk, lose floor and ceiling. */
  object-position: 50% 48%;
}

.anfrage__marke {
  position: absolute;
  top: var(--mass-3);
  left: var(--mass-3);
  max-width: calc(100% - 2 * var(--mass-3));
  padding: var(--mass-2) var(--mass-3);
  border-radius: calc(var(--radius) - 8px);
  /* The glass alone is too thin over a bright photo for AA: a night-dark veil under it. */
  background: color-mix(in srgb, var(--farbe-grund) 72%, transparent);
  font-size: .875rem;
  color: var(--farbe-tinte);
}

@media (prefers-reduced-motion: no-preference) {
  .anfrage__eingabe {
    transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
  }
}

/* ======== ANFRAGE — from 720px: more air, a flatter band ======== */
@media (min-width: 720px) {
  .anfrage__karte {
    padding: var(--mass-7) var(--mass-6) var(--mass-6);
  }

  .anfrage__bild {
    aspect-ratio: 21 / 9;
  }
}

/* ======== ANFRAGE — from 1100px: card left, the tall photo right ======== */
@media (min-width: 1100px) {
  .anfrage__huelle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mass-5);
  }

  /* The card grows with the stay (price lines, wishes) and can be taller than the
     screen. Stretched to that height the portrait would be cropped to a strip, so it
     keeps a portrait's height and stays in view beside the card while the card scrolls. */
  .anfrage__bild {
    order: 0;
    position: sticky;
    top: calc(var(--kopf-hoehe) + var(--mass-5));
    align-self: start;
    aspect-ratio: auto;
    height: min(100vh - var(--kopf-hoehe) - 2 * var(--mass-5), 1010px);
    min-height: 520px;
  }

  /* Taken out of the flow so the picture's own 572 x 1024 cannot stretch the row. */
  .anfrage__bild img {
    position: absolute;
    inset: 0;
    object-position: 50% 50%;
  }

  .anfrage__marke {
    top: var(--mass-4);
    left: var(--mass-4);
  }
}


/* ======================================================================
   TOUR (data-sid="tour")
   ====================================================================== */
/* ======== TOUR — a day at the house: one photograph, one slider, the cards of the hour ======== */
/* What used to be three sections. The head says what the house is (and, with nights chosen,
   speaks about that stay), the slider under the photograph moves the house through the day,
   and of the eleven cards below only those of the hour on the slider and of the season are
   shown. hausfoto.js writes data-zeit on the section, app.js (TOUR) data-saison. */
.tour {
  padding-block: var(--abschnitt);
}
/* the line break in the headline is a real newline in the text */
.ueber__titel { white-space: pre-line; }
.tour .ueber__ihr { color: var(--farbe-tinte); }
.tour .ueber__ihr[hidden],
.tour .ueber__absatz[hidden] { display: none; }
.tour .ueber__zahlen { max-width: 36rem; margin-inline: auto; }

/* ======== TOUR — the day: the photograph and its slider ======== */
.tour__tag { margin-top: var(--mass-7); }
/* Upright on a phone, wide where the screen is wide: the same rule as the hero's two photographs. */
.tour__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .tour__bild { aspect-ratio: 16 / 9; }
}
/* The hours lie on top of each other; the one on the slider is opaque. */
.tour__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--kurve);
}
.tour__foto.is-da { opacity: 1; }
/* The slider: a native range in the page's colours, and the word for the hour beside it. */
.tour__regler {
  display: flex;
  align-items: center;
  gap: var(--mass-4);
  max-width: 36rem;
  margin: var(--mass-4) auto 0;
}
.tour__regler[hidden] { display: none; }
.tour__lauf {
  flex: 1;
  min-width: 0;
  height: 44px;                        /* a thumb's reach, whatever the track looks like */
  margin: 0;
  background: transparent;
  accent-color: var(--farbe-akzent);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tour__lauf::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--farbe-rand); }
.tour__lauf::-moz-range-track { height: 4px; border-radius: 2px; background: var(--farbe-rand); }
.tour__lauf::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border: 2px solid var(--farbe-grund);
  border-radius: 50%;
  background: var(--farbe-akzent);
}
.tour__lauf::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid var(--farbe-grund); border-radius: 50%; background: var(--farbe-akzent); }
.tour__stunde {
  flex: none;
  min-width: 5.5rem;                   /* the longest of the four words in the four languages: nothing moves */
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.tour__satz { margin-top: var(--mass-7); }

/* ======== TOUR — the cards: only the hour on the slider, only the season of the stay ======== */
/* A row that centres itself: an hour has one, two or three cards. Without JavaScript the
   section carries neither attribute and all eleven are listed, in the order of the day. */
.tour__orte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mass-5);
  margin-top: var(--mass-6);
}
.tour__orte .imhaus__karte { flex: 1 1 100%; max-width: 32rem; }
@media (min-width: 720px) {
  .tour__orte .imhaus__karte { flex: 0 1 calc((100% - 2 * var(--mass-5)) / 3); min-width: 300px; }
}
.tour[data-saison="sommer"][data-zeit="morgen"] .imhaus__karte:not([data-sommer~="morgen"]),
.tour[data-saison="sommer"][data-zeit="tag"] .imhaus__karte:not([data-sommer~="tag"]),
.tour[data-saison="sommer"][data-zeit="abend"] .imhaus__karte:not([data-sommer~="abend"]),
.tour[data-saison="sommer"][data-zeit="nacht"] .imhaus__karte:not([data-sommer~="nacht"]),
.tour[data-saison="winter"][data-zeit="morgen"] .imhaus__karte:not([data-winter~="morgen"]),
.tour[data-saison="winter"][data-zeit="tag"] .imhaus__karte:not([data-winter~="tag"]),
.tour[data-saison="winter"][data-zeit="abend"] .imhaus__karte:not([data-winter~="abend"]),
.tour[data-saison="winter"][data-zeit="nacht"] .imhaus__karte:not([data-winter~="nacht"]) { display: none; }
/* Phone and tablet: the page below must not move when the slider changes the hour. Every hour shows
   the same number of cards (3 in summer, 2 in winter) and every card has a fixed row for the season
   (--rs / --rw in index.html), so each row is filled in every hour. A card of another hour is hidden
   with visibility, not removed: it keeps its row, the rows keep the height of the tallest card in
   them, and nothing under the section shifts. The picture goes beside the text
   so three rows stay a reasonable height. */
@media (max-width: 1099px) {
  .tour__orte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mass-4); }
  .tour__orte .imhaus__karte {
    grid-column: 1;
    grid-row: var(--rs, 1);
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--mass-3);
    align-items: start;
    max-width: none;
    min-width: 0;
  }
  .tour__orte .imhaus__bild { aspect-ratio: 1; }
  .tour[data-saison="winter"] .imhaus__karte { grid-row: var(--rw, 1); }
  .tour[data-saison="sommer"][data-zeit="morgen"] .imhaus__karte:not([data-sommer~="morgen"]),
  .tour[data-saison="sommer"][data-zeit="tag"] .imhaus__karte:not([data-sommer~="tag"]),
  .tour[data-saison="sommer"][data-zeit="abend"] .imhaus__karte:not([data-sommer~="abend"]),
  .tour[data-saison="sommer"][data-zeit="nacht"] .imhaus__karte:not([data-sommer~="nacht"]),
  .tour[data-saison="winter"][data-zeit="morgen"] .imhaus__karte:not([data-winter~="morgen"]),
  .tour[data-saison="winter"][data-zeit="tag"] .imhaus__karte:not([data-winter~="tag"]),
  .tour[data-saison="winter"][data-zeit="abend"] .imhaus__karte:not([data-winter~="abend"]),
  .tour[data-saison="winter"][data-zeit="nacht"] .imhaus__karte:not([data-winter~="nacht"]) { display: grid; visibility: hidden; }
}
/* Desktop: the three cards sit in one row, so only the tallest card of the hour differs (measured:
   383 to 441 px in German, English and French at 1100 to 1920). The row keeps room for the tallest. */
@media (min-width: 1100px) {
  .tour__orte { min-height: 28rem; align-content: start; }
}
/* The hour badge: a card that is true for two hours carries one badge per hour, only the slider's hour
   shows. The badges lie on top of each other in one grid cell, so the line is as wide as the widest
   of them in every hour and the card never changes height. Without JavaScript only the first badge
   shows (the card is listed once). */
.imhaus__tags { display: inline-grid; }
.imhaus__tag { grid-area: 1 / 1; }
html:not(.kern) .imhaus__tag--mehr { display: none; }
.kern .imhaus__tag { visibility: hidden; }
.kern .tour[data-zeit="morgen"] .imhaus__tag[data-tag="morgen"],
.kern .tour[data-zeit="tag"] .imhaus__tag[data-tag="tag"],
.kern .tour[data-zeit="abend"] .imhaus__tag[data-tag="abend"],
.kern .tour[data-zeit="nacht"] .imhaus__tag[data-tag="nacht"] { visibility: visible; }
.imhaus__kosten { margin-top: var(--mass-2); }
@media (prefers-reduced-motion: reduce) {
  .tour__foto { transition: none; }
}

/* ======== UEBER — the three figures, set like the schedule beside a drawing ======== */
/* Rows, not three cards: a value in the drawing's own face on the left, what
   it counts on the right. On a phone three columns would be 108px each and
   "ab € 188" does not fit in that. */
.ueber__zahlen {
  margin: var(--mass-6) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--farbe-linie);
}
.ueber__zahl {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--mass-4);
  align-items: baseline;
  padding-block: var(--mass-3);
  border-top: 1px solid var(--farbe-linie);
}
.ueber__wert {
  font-family: var(--schrift-zahl);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--farbe-akzent);
}
.ueber__was {
  /* two lines on a phone, whatever the month or the season is called */
  min-height: 2.9em;
  font-family: var(--schrift-text);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--farbe-tinte-leise);
}

/* ======== IMHAUS — a card: the hour in the figure face, the name, two sentences ======== */
.imhaus__zeit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mass-1) var(--mass-3);
  margin: 0 0 var(--mass-2);
  color: var(--farbe-tinte-leise);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.imhaus__tag { text-transform: uppercase; letter-spacing: .08em; }
/* the small window of the drawing at the top of the page: dark, or lit */
.imhaus__licht {
  flex: none;
  width: var(--mass-3);
  height: var(--mass-4);
  border: 1px solid currentColor;
  border-radius: 2px;
}
.imhaus__name { margin: 0; }
.imhaus__text {
  margin: var(--mass-2) 0 0;
  color: var(--farbe-tinte-leise);
  text-wrap: pretty;
}
/* the photo box is clipped, so the badge needs no radius of its own to stay inside */
.imhaus__winter { pointer-events: none; }

/* ======== IMHAUS — living pictures: steam, water light, firelight ======== */
/* Drawn above the photograph, below the veil's buttons. At rest (reduced
   motion, no script) the steam is absent and the two lights stand still. */
.imhaus__leben {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.imhaus__leben i { position: absolute; display: block; }
/* while a picture is entered its place on the page is empty (tiefe.css): so is what moved on it */
.imhaus__bild.is-betreten .imhaus__leben,
.imhaus__bild:has(img.is-fehlt) .imhaus__leben { visibility: hidden; }

/* steam: three soft clouds that rise from the stove's side and thin out */
.imhaus__leben--dampf i {
  left: 8%;
  bottom: -30%;
  width: 62%;
  aspect-ratio: 1 / 1.2;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--farbe-tinte), transparent);
  filter: blur(22px);
  opacity: 0;
}
.imhaus__leben--dampf i:nth-child(2) { left: 34%; width: 54%; }
.imhaus__leben--dampf i:nth-child(3) { left: -6%; width: 70%; }

/* water light: two sets of pale bands that slide against each other, only in the lower half
   (a mask only reads how opaque its colour is, so the ground token does the job of black) */
.imhaus__leben--wasser {
  -webkit-mask-image: linear-gradient(to top, var(--farbe-grund) 30%, transparent 62%);
  mask-image: linear-gradient(to top, var(--farbe-grund) 30%, transparent 62%);
  mix-blend-mode: soft-light;
}
.imhaus__leben--wasser i {
  inset: -10% -40%;
  background: repeating-linear-gradient(98deg, transparent 0 26px, var(--farbe-tinte) 34px, transparent 44px 78px);
  filter: blur(7px);
  opacity: .5;
}
.imhaus__leben--wasser i:nth-child(2) {
  background: repeating-linear-gradient(82deg, transparent 0 40px, var(--farbe-see) 50px, transparent 62px 104px);
  opacity: .42;
}

/* firelight: a warm glow from below; soft-light, so dark wood stays dark and only what is lit warms */
.imhaus__leben--feuer { mix-blend-mode: soft-light; }
.imhaus__leben--feuer i {
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 100%, var(--farbe-akzent), transparent 72%);
  opacity: .3;
}
.imhaus__leben--feuer i:nth-child(2) {
  background: radial-gradient(ellipse 55% 60% at 35% 90%, var(--farbe-akzent), transparent 70%);
  opacity: .2;
}

/* ======== IMHAUS — motion: only transform and opacity, only while on screen ======== */
/* base.css pauses every animation inside a [data-lebt] that is not on screen,
   and all of them under reduced motion; nothing here has to ask again. */
@media (prefers-reduced-motion: no-preference) {
  .imhaus__bild::after { transition: opacity var(--dauer) var(--kurve); }
  .imhaus__licht { transition: background-color var(--dauer) var(--kurve); }

  .imhaus__leben--dampf i { animation: imhaus-dampf 15s linear infinite; }
  /* negative delays: the room is already full of steam when the card arrives */
  .imhaus__leben--dampf i:nth-child(2) { animation-duration: 19s; animation-delay: -7s; }
  .imhaus__leben--dampf i:nth-child(3) { animation-duration: 23s; animation-delay: -13s; }

  .imhaus__leben--wasser i { animation: imhaus-wasser 17s ease-in-out infinite alternate; }
  .imhaus__leben--wasser i:nth-child(2) { animation-duration: 23s; animation-direction: alternate-reverse; }

  /* 5.3s against 3.7s: the two only line up again after more than three minutes */
  .imhaus__leben--feuer i { animation: imhaus-feuer 5.3s ease-in-out infinite; }
  .imhaus__leben--feuer i:nth-child(2) { animation-duration: 3.7s; animation-delay: -1.1s; }

  @keyframes imhaus-dampf {
    0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
    25% { opacity: .2; }
    70% { opacity: .12; }
    100% { transform: translate3d(14%, -95%, 0) scale(1.5); opacity: 0; }
  }
  @keyframes imhaus-wasser {
    from { transform: translate3d(-9%, 0, 0) scaleY(1); }
    to { transform: translate3d(9%, -3%, 0) scaleY(1.08); }
  }
  /* uneven steps on purpose: a fire does not breathe evenly */
  @keyframes imhaus-feuer {
    0%, 100% { opacity: .22; }
    18% { opacity: .4; }
    31% { opacity: .26; }
    47% { opacity: .46; }
    62% { opacity: .3; }
    81% { opacity: .42; }
  }
}

/* ======================================================================
   FRAGEN (data-sid="fragen")
   ====================================================================== */
/* ======== FRAGEN — getting here in three points, and six answers before the request ======== */
/* Phone first: everything below is the 390 px layout. Left column (.fragen__anreise) is the
   plan and the numbered list, right column (.fragen__antworten) the six glass cards.
   fragen.js sets .hat-aufenthalt on the section once nights are chosen. */
.fragen { padding-block: var(--abschnitt); }

.fragen__spalten {
  display: grid;
  gap: var(--mass-7);
}
/* min-width 0: a grid child would otherwise grow with its longest word and push the page wide */
.fragen__anreise,
.fragen__antworten { min-width: 0; }

.fragen__h { margin-bottom: var(--mass-5); }

.fragen__weg {
  display: grid;
  gap: var(--mass-5);
}

/* ======== FRAGEN — the plan: one sheet of paper with a title strip ======== */
.fragen__plan {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}
/* The box is reserved by the ratio of the viewBox, so the drawing cannot shift anything. */
.fragen__bild {
  position: relative;
  aspect-ratio: 560 / 340;
}
.fragen__zeichnung {
  width: 100%;
  height: 100%;
}

/* Three line weights and no more, like a pen set: heavy for what is built, medium for
   edges, fine for hatching and notes. Every stroke in the drawing is one of these. */
.fragen__strich,
.fragen__fein,
.fragen__haus,
.fragen__see,
.fragen__pfad {
  fill: none;
  stroke: var(--farbe-tinte);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fragen__fein {
  stroke: var(--farbe-tinte-leise);
  stroke-width: .8;
}
/* "Cut out" shapes are painted in the paper colour over the hatching: simpler than a
   mask and it follows the token if the surface colour ever changes. */
.fragen__blatt { fill: var(--farbe-flaeche); }
.fragen__wald { opacity: .5; }
.fragen__rand { stroke-dasharray: 2 5; }
.fragen__see { stroke: var(--farbe-see); }

.fragen__strasse {
  fill: none;
  stroke: var(--farbe-tinte);
  stroke-width: 11;
}
.fragen__strasse-innen {
  fill: none;
  stroke: var(--farbe-flaeche);
  stroke-width: 8.4;
}
.fragen__pfad { stroke-dasharray: .1 5; }

/* The house is the one lit thing on the sheet, in the window light of the hero. */
.fragen__haus {
  fill: var(--farbe-akzent);
  fill-opacity: .2;
  stroke: var(--farbe-akzent);
  stroke-width: 2;
}
.fragen__punkt { fill: var(--farbe-tinte-leise); }

/* ======== FRAGEN — lettering on the plan: key numbers, north, the one note ======== */
.fragen__marke circle {
  fill: var(--farbe-flaeche);
  stroke: var(--farbe-akzent);
  stroke-width: 1.3;
}
.fragen__marke text,
.fragen__nord text {
  fill: var(--farbe-akzent);
  font-family: var(--schrift-zahl);
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}
.fragen__nord text { fill: var(--farbe-tinte-leise); }

/* HTML, not SVG text: /js/i18n.js never rewrites inside an <svg>, and this line has to
   exist in four languages. Placed in percent of the drawing, at the end of its leader. */
.fragen__notiz {
  position: absolute;
  left: 45.5%;
  top: 11.8%;
  max-width: 52%;
  padding: var(--mass-1) var(--mass-2);
  translate: 0 -50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fragen__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-4);
  /* Fixed row: the arrival day is written in later and must not move the list below. */
  min-height: calc(var(--mass-6) + var(--mass-2));
  padding: var(--mass-2) var(--mass-4);
  border-top: 1px solid var(--farbe-linie);
  color: var(--farbe-tinte-leise);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  letter-spacing: .02em;
}
.fragen__leiste-wann { text-align: right; }
.hat-aufenthalt .fragen__leiste-wann { color: var(--farbe-akzent); }

/* ======== FRAGEN — the three numbered points ======== */
.fragen__schritte {
  display: grid;
  align-content: start;
  gap: var(--mass-5);
}
.fragen__schritt {
  display: grid;
  grid-template-columns: var(--mass-6) minmax(0, 1fr);
  gap: var(--mass-4);
  align-items: start;
}
/* Same ring and same face as the key numbers in the plan, so 1, 2, 3 read as one system. */
.fragen__nr {
  display: grid;
  place-items: center;
  width: var(--mass-6);
  height: var(--mass-6);
  border: 1px solid var(--farbe-akzent);
  border-radius: 50%;
  color: var(--farbe-akzent);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  font-weight: 600;
}
.fragen__schritt-titel {
  margin-bottom: var(--mass-1);
  /* optically centred on the 40 px ring beside it */
  padding-top: var(--mass-2);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}
.fragen__schritt-text { color: var(--farbe-tinte-leise); }

/* ======== FRAGEN — the six answers: native details in a glass card ======== */
.fragen__liste {
  display: grid;
  gap: var(--mass-3);
}
/* The card's own padding moves into the summary: the whole row is the tap target,
   not only the words. Two classes so this wins over .glas at every width. */
.fragen .fragen__frage { padding: 0; }

.fragen__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-4);
  min-height: var(--mass-7);
  padding: var(--mass-4) var(--mass-5);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-titel);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.25;
}
/* Safari draws its own triangle unless told otherwise; ours is the chevron on the right. */
.fragen__kopf::-webkit-details-marker { display: none; }
/* The ring sits inside the card edge: outside it would be cut by the neighbouring card. */
.fragen__kopf:focus-visible {
  border-radius: var(--radius);
  outline-offset: calc(-1 * var(--mass-1));
}
.fragen__pfeil {
  flex: none;
  fill: none;
  stroke: var(--farbe-akzent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fragen__frage[open] .fragen__pfeil { rotate: 180deg; }

.fragen__antwort { padding: 0 var(--mass-5) var(--mass-5); }
.fragen__text {
  max-width: 62ch;
  color: var(--farbe-tinte-leise);
}

/* ======== FRAGEN — the personal line in the first answer ======== */
.fragen__ihr {
  display: grid;
  justify-items: start;
  gap: var(--mass-4);
  margin-top: var(--mass-4);
  padding-top: var(--mass-4);
  border-top: 1px solid var(--farbe-linie);
}
/* Room for the longest of the two states (three lines on a phone), so choosing nights
   in the calendar does not make the cards below jump. */
.fragen__ihr-text { min-height: calc(3 * 1.55em); }
/* Brighter AND differently worded: the state is never carried by colour alone. */
.hat-aufenthalt .fragen__ihr-text { color: var(--farbe-akzent); }

@media (hover: hover) {
  .fragen__kopf:hover { color: var(--farbe-akzent); }
}
@media (prefers-reduced-motion: no-preference) {
  .fragen__pfeil { transition: rotate var(--dauer) var(--kurve); }
  .fragen__kopf { transition: color var(--dauer) var(--kurve); }
}

/* ======== FRAGEN — from 720 px: plan and list side by side ======== */
@media (min-width: 720px) {
  .fragen__weg {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mass-6);
    align-items: start;
  }
  .fragen__kopf { padding-inline: var(--mass-6); }
  .fragen__antwort { padding: 0 var(--mass-6) var(--mass-5); }
  .fragen__ihr-text { min-height: calc(2 * 1.55em); }
}

/* ======== FRAGEN — from 1100 px: two columns, the plan above its list again ======== */
@media (min-width: 1100px) {
  .fragen__spalten {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
  .fragen__weg {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mass-5);
  }
}
/* The way stays in view while the answers are opened and read. Only on a screen tall
   enough to show the whole left column: a sticky box taller than the window would hide
   its own lower end. */
@media (min-width: 1100px) and (min-height: 860px) {
  .fragen__anreise {
    position: sticky;
    top: calc(var(--kopf-hoehe) + var(--mass-5));
  }
}


/* ======================================================================
   FUSS (data-sid="fuss")
   ====================================================================== */
/* ======== FUSS — the end of the page: free rooms, address, links, demo note ======== */
.fuss {
  padding-block: var(--mass-7) var(--mass-5);
  border-top: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  /* The outlined name at the bottom is wider than a narrow phone for some words;
     it may be cut by the footer, never widen the page. */
  overflow: clip;
}
/* The studio seal's strip takes the footer's ground, or a band of page colour
   would show under it (KIT.md, section 4). */
.fuss .wdm-seal { background: var(--farbe-flaeche); }

/* ======== FUSS — the studio's offer to the hotelier ======== */
.fuss__angebot {
  display: grid;
  gap: var(--mass-5);
  justify-items: start;
  margin-bottom: var(--mass-7);
}
.fuss__frage {
  max-width: 34ch;
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

/* ======== FUSS — the house and the three groups of links ======== */
.fuss__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mass-6) var(--mass-5);
}
.fuss__haus { grid-column: 1 / -1; }
.fuss__name {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.fuss__zeile,
.fuss__adresse {
  margin-top: var(--mass-2);
  color: var(--farbe-tinte-leise);
  font-style: normal; /* <address> is italic by default and no italic face ships */
}
.fuss__adresse { margin-top: 0; }
.fuss__frei {
  /* An annotation, like a figure in the margin of a drawing: mono, in the window light. */
  margin-top: var(--mass-4);
  padding-left: var(--mass-3);
  border-left: 2px solid var(--farbe-akzent);
  color: var(--farbe-akzent);
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  line-height: 1.5;
}
.fuss__kopf {
  /* A label of its nav (aria-labelledby), not a heading: three navigation titles do not
     belong in the outline of the page, and "Gut zu wissen" stood in it twice. */
  margin: 0 0 var(--mass-2);
  color: var(--farbe-tinte-leise);
  font-family: var(--schrift-text);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fuss__liste a,
.fuss__wann {
  /* 44 px tall rows: a thumb must hit one link, not its neighbour. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.fuss__wann {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}
@media (hover: hover) {
  .fuss__liste a:hover,
  .fuss__wann:hover { color: var(--farbe-akzent); }
}

/* ======== FUSS — the outlined name and the small print ======== */
.fuss__marke {
  margin-top: var(--mass-7);
  font-family: var(--schrift-titel);
  font-size: clamp(4.5rem, 21vw, 16.5rem);
  font-weight: 500;
  /* Tall enough for the g: its tail must not run into the line of the small print. */
  line-height: 1.12;
  letter-spacing: -.01em;
  /* Drawn, not filled: one ink line, like the title on a plan. Browsers without
     text-stroke get a very quiet filled name instead of an invisible one. */
  color: var(--farbe-linie);
  user-select: none;
}
@supports (-webkit-text-stroke: 1px black) {
  .fuss__marke {
    color: transparent;
    -webkit-text-stroke: 1px var(--farbe-rand);
  }
}
.fuss__klein {
  display: grid;
  gap: var(--mass-2);
  margin-top: var(--mass-5);
  padding-top: var(--mass-5);
  border-top: 1px solid var(--farbe-linie);
  color: var(--farbe-tinte-leise);
  font-size: .875rem;
}
.fuss__demo { color: var(--farbe-tinte); font-size: 1rem; }
/* The studio seal (its own markup and style block stay as the skill ships them) is a
   block-level link, so the whole strip under the footer was one unmarked link. Here the
   link is narrowed to the 28 px mark; its former padding becomes margin. Screen only:
   on paper the seal spells the studio out and needs its width. */
@media screen {
  .fuss .wdm-seal { width: 28px; padding: 0; margin: 0 clamp(1rem, 4vw, 3rem) 1.25rem; }
}
.fuss__studio a {
  /* Three links in one line of small print: padding gives each a 44 px tall target
     without pushing the line apart. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--mass-2);
}
/* The dot between the three links is drawn here and belongs to the link BEFORE it: when
   the line wraps on a phone, no line can begin with a lonely "·" (it did, typed as text). */
.fuss__studio a:not(:last-child)::after {
  content: "·";
  display: inline-block;        /* an inline-block is not underlined together with its link */
  padding-left: .45em;
}

/* ======== FUSS — wider screens ======== */
@media (min-width: 720px) {
  .fuss__angebot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mass-6);
  }
  .fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .fuss__raster { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); }
  .fuss__haus { grid-column: auto; }
  .fuss__klein {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--mass-5);
  }
}


/* ======================================================================
   WANN (data-sid="wann")
   ====================================================================== */
/* ======== WANN — the booking chip and the calendar sheet ======== */
/* The root has no box of its own: the chip is fixed to the viewport and the sheet is a
   modal <dialog> in the top layer, so nothing in here can move the page (CLS 0). */

/* Hand-drawn line icons: one weight for every icon of this part, like the ink drawing. */
.wann svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ======== WANN — chip: the lit window that follows the guest down the page ======== */
.wann__chip {
  position: fixed;
  z-index: 40;                    /* above the sections, below the top bar and any dialog */
  left: var(--mass-4);
  right: var(--mass-4);
  /* A phone's home indicator lies over the bottom edge; the chip stays clear of it. */
  bottom: calc(var(--mass-4) + env(safe-area-inset-bottom, 0px));
  /* left + right + fit-content + auto margins: centred, and never wider than the screen. */
  width: fit-content;
  max-width: calc(100% - 2 * var(--mass-4));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  min-height: 56px;
  padding: var(--mass-2) var(--mass-5) var(--mass-2) var(--mass-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-tinte);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 var(--mass-3) var(--mass-6) color-mix(in srgb, var(--farbe-grund) 80%, transparent);
}

/* display:flex above would win over the hidden attribute the markup starts with. */
.wann__chip[hidden] { display: none; }

/* Below 1100 px the chip floats in the middle of the bottom edge, over whatever the page
   has there. Two things keep that readable: the page ends with enough room to scroll the
   last lines clear of it (chip 56 px + its distance to the edge, twice), and a short fade
   to the page ground stands behind it. The fade leaves with the chip (:has), so the hero
   and the request form, where the chip steps aside, are not darkened. */
@media (max-width: 1099px) {
  .fuss { padding-bottom: calc(56px + 3 * var(--mass-4) + env(safe-area-inset-bottom, 0px)); }
  .wann::before {
    content: "";
    position: fixed;
    z-index: 39;                  /* directly under the chip */
    inset: auto 0 0;
    height: calc(56px + 3 * var(--mass-4) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--farbe-grund) 22%, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dauer) var(--kurve);
  }
  .wann:has(> .wann__chip:not([hidden]):not(.is-weg):not(.is-unten))::before { opacity: .86; }
  /* a primary button stands in the chip's strip (WANN block of app.js): same exit as is-weg */
  .wann__chip.is-unten { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Once nights are chosen the chip stops calling and starts reporting: dark glass, the
   total in the window-light colour. */
.wann__chip.hat-wahl {
  background: color-mix(in srgb, var(--farbe-flaeche-2) 88%, transparent);
  border-color: var(--farbe-linie);
  color: var(--farbe-tinte);
  -webkit-backdrop-filter: blur(var(--mass-4));
  backdrop-filter: blur(var(--mass-4));
}

/* Not display:none: the chip has to fade, and visibility also takes it out of the tab
   order while the request form is on screen. */
.wann__chip.is-weg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wann__chip-zeichen { flex: none; }
.wann__chip-text { display: grid; min-width: 0; }
.wann__chip-haupt { white-space: nowrap; }
.wann__chip-neben {
  font-size: .875rem;
  font-weight: 500;
  color: var(--farbe-tinte-leise);
  white-space: nowrap;
}
.wann__chip-neben:empty,
.wann__chip-summe:empty { display: none; }
.wann__chip-summe {
  margin-left: var(--mass-2);
  padding-left: var(--mass-4);
  border-left: 1px solid var(--farbe-linie);
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  color: var(--farbe-akzent);
  white-space: nowrap;
}

/* ======== WANN — sheet: bottom sheet on phones, side panel from 1100px ======== */
.wann__blatt {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;               /* older browsers */
  max-height: 86dvh;              /* the part of the screen that is really visible on a phone */
  padding: 0;                     /* a click on the dialog itself is then a click on the backdrop */
  border: 1px solid var(--farbe-linie);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  /* Denser than the shared .glas: prices at 11px must stay readable over any photo. */
  background: color-mix(in srgb, var(--farbe-flaeche) 92%, transparent);
  -webkit-backdrop-filter: blur(var(--mass-4));
  backdrop-filter: blur(var(--mass-4));
  color: var(--farbe-tinte);
  overflow: hidden;
}

/* Only when open: a display value on the closed dialog would show it. */
.wann__blatt[open] { display: flex; flex-direction: column; }

.wann__blatt::backdrop { background: color-mix(in srgb, var(--farbe-grund) 72%, transparent); }

/* The sheet scrolls inside itself; contain keeps the page behind it from scrolling on. */
.wann__innen {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--mass-5) var(--mass-4) calc(var(--mass-5) + env(safe-area-inset-bottom, 0px));
}

.wann__kopf { display: flex; align-items: flex-start; gap: var(--mass-4); }
.wann__kopf-text { flex: 1; min-width: 0; }
.wann__titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
}
.wann__vorspann {
  margin: var(--mass-2) 0 0;
  font-size: .9375rem;
  color: var(--farbe-tinte-leise);
}

/* The four round controls (close, months, guests) share one shape and one tap size. */
.wann__zu,
.wann__blaettern,
.wann__stufe {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--farbe-linie);
  border-radius: 50%;
  background: transparent;
  color: var(--farbe-tinte);
  cursor: pointer;
}
.wann__blaettern[aria-disabled="true"],
.wann__stufe[aria-disabled="true"] { opacity: .35; cursor: default; }

/* Two lines are reserved: "Anreise …, mindestens 2 Nächte" wraps at 390px and the
   calendar below must not jump when it does. */
.wann__lage {
  margin: var(--mass-4) 0 0;
  min-height: 3.1em;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--farbe-akzent);
}

/* ======== WANN — calendar: one table per month, the arrows over the month names ======== */
.wann__kalender { position: relative; }
.wann__blaettern { position: absolute; top: 0; z-index: 1; }
.wann__blaettern--zurueck { left: 0; }
.wann__blaettern--weiter { right: 0; }

/* Six rows of 48px plus names: reserved before the script has drawn the first month. */
.wann__monate { display: grid; gap: var(--mass-5); min-height: 372px; align-content: start; align-items: start; }

.wann__gitter {
  width: 100%;
  table-layout: fixed;            /* seven equal columns, whatever the longest price is */
  border-collapse: separate;
  border-spacing: 0 2px;          /* rows apart, columns touching: the stay reads as one band */
}
.wann__monat {
  height: 44px;
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 44px;
  text-align: center;
}
.wann__gitter th {
  padding: var(--mass-2) 0 var(--mass-1);
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
}
/* The height keeps the empty rows at the end of a short month open, so every month is
   six rows tall and two months side by side share their lines. */
.wann__gitter td { height: 48px; padding: 0; }

.wann__tag {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--mass-1) 0;
  border: 0;
  border-radius: var(--mass-3);
  background: transparent;
  color: var(--farbe-tinte);
  font: inherit;
  cursor: pointer;
}
.wann__tag-zahl {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
/* 14px, the floor for the nightly price. The height is kept on days without a
   price so every day number sits on the same line. */
.wann__tag-preis {
  min-height: 1.3em;
  font-family: var(--schrift-zahl);
  /* 14 px, but never wider than a day: at a 200 % text size the vw term holds it at 14 px */
  font-size: min(.875rem, 3.6vw);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-tinte-leise);
  white-space: nowrap;
}
.wann__tag[aria-disabled="true"] { cursor: default; }

/* Own ring in the text colour: the foundation's accent ring would vanish on the two
   accent-coloured days of a stay. */
.wann__tag:focus-visible { outline: 2px solid var(--farbe-tinte); outline-offset: 2px; }

/* ======== WANN — states of a day: past, full, today, in the stay ======== */
.wann__zelle.is-vorbei .wann__tag { color: color-mix(in srgb, var(--farbe-tinte-leise) 50%, transparent); }

/* Struck through, not only dimmed: state must not hang on colour alone. */
.wann__zelle.is-voll .wann__tag-zahl {
  color: var(--farbe-tinte-leise);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.wann__zelle.is-heute .wann__tag-zahl { box-shadow: 0 2px 0 var(--farbe-see); }

.wann__zelle.is-drin { background: color-mix(in srgb, var(--farbe-akzent) 16%, transparent); }
/* Half a band behind arrival and departure joins them to the nights between. */
.wann__zelle.is-an { background: linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--farbe-akzent) 16%, transparent) 50%); }
.wann__zelle.is-ab { background: linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--farbe-akzent) 16%, transparent) 50%); }
.wann__zelle.is-allein { background: none; }
.wann__zelle.is-an .wann__tag,
.wann__zelle.is-ab .wann__tag { background: var(--farbe-akzent); color: var(--farbe-akzent-tinte); }
.wann__zelle.is-an .wann__tag-zahl,
.wann__zelle.is-ab .wann__tag-zahl,
.wann__zelle.is-an .wann__tag-preis,
.wann__zelle.is-ab .wann__tag-preis { color: var(--farbe-akzent-tinte); }

@media (hover: hover) {
  .wann__tag:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--farbe-tinte) 10%, transparent); }
  .wann__zelle.is-an .wann__tag:hover,
  .wann__zelle.is-ab .wann__tag:hover { background: var(--farbe-akzent); }
}

/* ======== WANN — below the calendar: refusal, legend, guests ======== */
.wann__nein {
  margin: var(--mass-3) 0 0;
  padding: var(--mass-3) var(--mass-4);
  border-left: 2px solid var(--farbe-akzent);
  border-radius: 0 var(--mass-2) var(--mass-2) 0;
  background: color-mix(in srgb, var(--farbe-akzent) 10%, transparent);
  font-size: .9375rem;
}
.wann__legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mass-2) var(--mass-5);
  margin: var(--mass-3) 0 0;
  font-size: .875rem;
  color: var(--farbe-tinte-leise);
}

.wann__gaeste {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  margin-top: var(--mass-5);
  padding-top: var(--mass-4);
  border-top: 1px solid var(--farbe-linie);
}
.wann__gaeste-wort { margin-right: auto; font-weight: 600; }
.wann__gaeste-zahl {
  min-width: 6.5em;               /* "1 personne" to "4 personnes" without the buttons moving */
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ======== WANN — the four room types for exactly these nights ======== */
.wann__frei { margin-top: var(--mass-5); }
.wann__frei-titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}
.wann__frei-lage {
  margin: var(--mass-1) 0 0;
  font-size: .9375rem;
  color: var(--farbe-tinte-leise);
}
.wann__zeilen { margin: var(--mass-3) 0 0; padding: 0; list-style: none; }

/* Name and total on one line, the state below both, the button beside the two lines:
   fits 320px without the total ever wrapping. */
.wann__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name summe knopf" "lage lage knopf";
  align-items: center;
  column-gap: var(--mass-3);
  row-gap: var(--mass-1);
  padding: var(--mass-3) 0;
  border-top: 1px solid var(--farbe-linie);
}
.wann__zeile-name { grid-area: name; font-weight: 700; }
.wann__zeile-summe {
  grid-area: summe;
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
  color: var(--farbe-akzent);
  white-space: nowrap;
}
.wann__zeile-lage { grid-area: lage; font-size: .875rem; color: var(--farbe-tinte-leise); }
.wann__zeile-knopf { grid-area: knopf; padding-inline: var(--mass-4); }

/* Dimmed, but the reason keeps its full contrast: it is the thing to read here. */
.wann__zeile.is-zu .wann__zeile-name { color: var(--farbe-tinte-leise); font-weight: 500; }
.wann__zeile.is-gewaehlt .wann__zeile-name { color: var(--farbe-akzent); }

.wann__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-4);
  padding-top: var(--mass-2);
  border-top: 1px solid var(--farbe-linie);
}
.wann__klein { margin: 0; font-size: .875rem; color: var(--farbe-tinte-leise); }
.wann__leeren {
  flex: none;
  min-height: 44px;
  padding: 0 var(--mass-2);
  border: 0;
  background: none;
  color: var(--farbe-tinte-leise);
  font: inherit;
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ======== WANN — motion: the sheet rises, the chip fades; nothing loops ======== */
@keyframes wann-auf { from { opacity: 0; translate: 0 var(--mass-6); } }
@keyframes wann-seite { from { opacity: 0; translate: var(--mass-6) 0; } }
@keyframes wann-dunkel { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .wann__chip { transition: opacity var(--dauer) var(--kurve), visibility var(--dauer); }
  .wann__blatt[open] { animation: wann-auf var(--dauer) var(--kurve); }
  .wann__blatt[open]::backdrop { animation: wann-dunkel var(--dauer) var(--kurve); }
}

/* ======== WANN — from 720px: the same bottom sheet with more air ======== */
@media (min-width: 720px) {
  .wann__chip { left: var(--mass-5); right: var(--mass-5); max-width: calc(100% - 2 * var(--mass-5)); }
  .wann__innen { padding-inline: var(--mass-5); }
}

/* ======== WANN — from 1100px: chip bottom right, sheet as a right-hand glass panel ======== */
@media (min-width: 1100px) {
  .wann__chip {
    left: auto;
    bottom: calc(var(--mass-5) + env(safe-area-inset-bottom, 0px));
  }

  /* Two priced months need 14 columns of at least 44px, so the panel is wider than a
     single-month one would be. */
  .wann__blatt {
    inset: 0 0 0 auto;
    margin: 0;
    width: 860px;
    max-width: 92vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-left: 1px solid var(--farbe-linie);
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .wann__innen { flex: 1; padding: var(--mass-6) var(--mass-6) var(--mass-5); }
  .wann__titel { font-size: 2.25rem; }
  .wann__lage { min-height: 1.55em; }
  /* The arrows then frame both months: left of the first name, right of the second. */
  .wann__monate { grid-template-columns: 1fr 1fr; gap: var(--mass-6); }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .wann__blatt[open] { animation-name: wann-seite; }
}


/* ======== WANN — month jump, departure-only days, the legend, the nearest free dates ======== */
/* The month name is a control: a native <select> dressed as the title. It sits between the two
   arrows, so it never grows wider than the space they leave. */
.wann__sprung {
  appearance: none;
  -webkit-appearance: none;
  max-width: calc(100% - 112px);
  min-height: 44px;
  padding: 0 34px 0 var(--mass-4);
  border: 1px solid var(--farbe-linie);
  border-radius: 12px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px;
  color: inherit;
  font: inherit;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.wann__sprung option { background: var(--farbe-flaeche-2); color: var(--farbe-tinte); }

/* A night that is full, but a perfectly good day to leave on: half free, half taken (a diagonal
   from corner to corner), the number NOT struck through. Its name says "departure day only". */
.wann__zelle.is-nurab .wann__tag {
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--farbe-tinte) 22%, transparent) 50%);
}
.wann__zelle.is-nurab.is-ab .wann__tag { background: var(--farbe-akzent); }
/* With an arrival set: a departure that would be shorter than the minimum stay looks unavailable
   (the tap still answers with the number) */
.wann__zelle.is-kurz .wann__tag { opacity: .4; }

/* The legend: three small samples, each with its sentence */
.wann__legende-eintrag { display: flex; align-items: center; gap: var(--mass-3); }
.wann__muster {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-family: var(--schrift-zahl);
  font-size: .875rem;
  color: var(--farbe-tinte);
}
.wann__muster--preis { border: 1px solid var(--farbe-linie); }
.wann__muster--voll { border: 1px solid var(--farbe-linie); color: var(--farbe-tinte-leise); text-decoration: line-through; }
.wann__muster--abreise { border: 1px solid var(--farbe-linie); background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--farbe-tinte) 22%, transparent) 50%); }

/* House full for the chosen nights: the nearest free dates with as many nights, as two buttons */
.wann__vorschlag { margin: var(--mass-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--mass-2); }
.wann__vorschlag[hidden] { display: none; }
.wann__vorschlag-titel { width: 100%; margin: 0; font-size: .9375rem; color: var(--farbe-tinte-leise); }
.wann__vorschlag button {
  min-height: 44px;
  padding: 0 var(--mass-4);
  border: 1px solid var(--farbe-akzent);
  border-radius: 12px;
  background: transparent;
  color: var(--farbe-akzent);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

/* Large text (200 %): nothing may leave the screen. In em, so the query fires by the TEXT size:
   390 px is 24.4 em at the normal size and 12 em at 200 % (a 320 px phone at the normal size is 20 em: not caught). */
@media (max-width: 19.9em) {
  .wann__blatt { max-width: 100vw; }
  .wann__innen { min-width: 0; padding-inline: var(--mass-3); }
  .wann__titel { font-size: min(1.75rem, 8vw); overflow-wrap: anywhere; }
  .wann__gaeste { flex-wrap: wrap; }
  .wann__gaeste-zahl { min-width: 0; }
  .wann__zeile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "summe" "lage" "knopf"; }
  .wann__zeile-knopf { justify-self: start; }
  .wann__lage { min-height: 0; }
}

/* The same promise when the text is enlarged INSIDE the page (html { font-size: 200% }, or an app's
   text zoom), which an em query cannot see: the rem sizes below grow with the text, so each one is
   capped by the screen width. At normal size every cap is larger than the value it caps (320 px:
   marke 20.5 vs 20, links 14.4 vs 14), so nothing changes there. */
.kopf__marke { font-size: min(1.25rem, 6.4vw); }
.kopf__anfragen { font-size: min(.875rem, 4.5vw); }
.haus__name { font-size: min(clamp(3.2rem, 14.4vw, 4.25rem), 15vw); }
.haus__unter { font-size: min(.875rem, 4.5vw); }
.wann__zeile-knopf { font-size: min(1rem, 4.5vw); }
.wann__innen { min-width: 0; }
.wann__gaeste { flex-wrap: wrap; }
.wann__monat { font-size: min(1.25rem, 6vw); }