/* ===========================================================
   Gasthof im Tal (erfunden) — Wirtshaus im Pitztal
   Immersive alpine depth demo · Wild Digital Moments
   =========================================================== */

/* ---- Tokens ---- */
:root{
  /* committed deep-nature palette (oklch) */
  --loden:        oklch(0.30 0.04 150);   /* forest/loden green base */
  --loden-deep:   oklch(0.22 0.035 150);  /* deeper shade */
  --loden-night:  oklch(0.16 0.03 160);   /* evening valley */
  --walnut:       oklch(0.33 0.05 60);    /* warm walnut wood */
  --walnut-deep:  oklch(0.24 0.045 55);
  --parchment:    oklch(0.93 0.025 85);   /* brand bone/parchment (warm, not default cream) */
  --parchment-dim:oklch(0.84 0.03 85);
  --brass:        oklch(0.74 0.11 80);    /* brass/copper accent */
  --brass-bright: oklch(0.82 0.12 82);
  --glow:         oklch(0.80 0.13 70);    /* warm window-glow amber */

  --ink:          oklch(0.20 0.02 150);
  --maxw: 1180px;

  --serif: "Spectral", "Iowan Old Style", Georgia, serif;   /* heritage serif headlines */
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  background:var(--loden-deep);
  color:var(--parchment);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is load-bearing: the content <img>s carry width/height HTML
   attributes (for CLS). Rules like .plate/.room-fig/.zi-teaser/.arrival-foto
   set width:100%+aspect-ratio but no height, so without this the presentational
   height attribute (e.g. 1067px) wins and aspect-ratio is ignored — every such
   image rendered at full natural pixel height (tall crops). Full-bleed images
   (.haus-img, .page-bg, .zi-open, .stube figure) set height:100% themselves and
   keep it via higher specificity. */
img{ display:block; max-width:100%; height:auto; }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:.005em; }
.serif{ font-family:var(--serif); }

a{ color:inherit; }
:focus-visible{ outline:3px solid var(--brass-bright); outline-offset:3px; border-radius:3px; }

.wrap{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }

/* ---- Demo notice (styled to belong to THIS design) ---- */
.demo-notice{
  position:relative; z-index:60;
  background:
    linear-gradient(90deg, var(--walnut-deep), var(--loden-deep));
  border-bottom:1px solid color-mix(in oklch, var(--brass) 45%, transparent);
  color:var(--parchment);
  font-size:.82rem; line-height:1.45;
}
/* One line now (2026-10-15): the old two-sentence DE+EN bar took ~185 px of the
   844 px phone screen and pushed the stay card to the fold. One translatable
   sentence instead; js/i18n.js swaps it per language. */
.demo-notice .wrap{ display:flex; gap:.6rem; align-items:center; padding:.5rem 0; }
.demo-notice .seal{
  flex:0 0 auto; width:24px; height:24px;
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass) 70%);
  color:var(--walnut-deep); font-family:var(--serif); font-weight:600; font-size:.8rem;
  box-shadow:0 0 0 1px color-mix(in oklch, var(--brass) 60%, transparent);
}
.demo-notice b{ color:var(--brass-bright); font-weight:600; }
.demo-notice .demo-text{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:620px){ .demo-notice .demo-text{ white-space:normal; } }

/* ===========================================================
   STAGE — fixed cinematic backdrop
   One full-bleed photo: the house at dusk (haus-abend). The old
   five-photo dissolve stage and its noise masks were retired on
   2026-10-15 (two ideas in one hero was the anti-goal). The scrims
   and the scroll-driven --dusk/--bloom below still sit over it.
   =========================================================== */
.stage{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:var(--loden-night);
}
/* One photo now: the house at dusk. Its windows warm up on scroll via
   --bloom (js/main.js). The five-photo dissolve stage and its noise masks
   were retired on 2026-10-15 (two ideas in one hero was the anti-goal). */
.haus-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
@media (max-width:860px){ .haus-img{ object-position:center 46%; } }

/* a steady readability scrim behind ALL content — guarantees AA text
   contrast over the lit parts of the house photo */
.contrast-scrim{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  background:linear-gradient(180deg,
     color-mix(in oklch, var(--ink) 42%, transparent) 0%,
     color-mix(in oklch, var(--ink) 16%, transparent) 20%,
     color-mix(in oklch, var(--ink) 20%, transparent) 78%,
     color-mix(in oklch, var(--ink) 48%, transparent) 100%);
}

/* evening tint overlay that strengthens on scroll (JS-driven via --dusk) */
.sky-tint{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  background:linear-gradient(180deg,
     oklch(0.20 0.05 280) 0%,
     oklch(0.28 0.06 30) 60%,
     oklch(0.18 0.04 40) 100%);
  opacity:calc(var(--dusk, 0) * 0.5);
  transition:opacity .15s linear;
  mix-blend-mode:multiply;
}
/* The ONE hero idea: the warm glow that grows over the lit first-floor windows
   of haus-abend as the visitor scrolls (--bloom, js/main.js). screen blend adds
   light, so the windows warm rather than the whole frame dimming. */
.warm-bloom{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  background:radial-gradient(42% 26% at 50% 40%,
     color-mix(in oklch, var(--glow) 72%, transparent) 0%, transparent 72%);
  opacity:calc(var(--bloom, 0) * 0.85);
  transition:opacity .2s linear;
  mix-blend-mode:screen;
}

/* ===========================================================
   CONTENT — sits above the stage
   =========================================================== */
main{ position:relative; z-index:10; }
section{ position:relative; }

.panel{
  width:min(100% - 2.4rem, 760px); margin-inline:auto;
  background:color-mix(in oklch, var(--loden-deep) 86%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 30%, transparent);
  border-radius:14px;
  padding:clamp(1.6rem, 4vw, 3rem);
  box-shadow:0 30px 80px -30px oklch(0.10 0.03 150 / .8);
  backdrop-filter:blur(3px);
}

/* ---- HERO — the house, the headline and the stay card in one screen ---- */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  gap:1.4rem;
  padding:2.4rem 1.2rem 3rem;
}
.hero-copy{ display:flex; flex-direction:column; align-items:center; }
.crest{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.04em;
  color:var(--brass-bright);
  display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.4rem;
}
.crest::before,.crest::after{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--brass));
}
.crest::after{ background:linear-gradient(90deg,var(--brass),transparent); }
.hero h1{
  font-size:clamp(2.6rem, 7.5vw, 5.6rem);
  color:var(--parchment);
  text-shadow:0 2px 24px oklch(0.12 0.03 150 / .7);
  max-width:14ch;
}
.hero h1 em{ font-style:italic; color:var(--brass-bright); }
.hero .lede{
  margin-top:1.3rem; font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--parchment); max-width:40ch;
  text-shadow:0 1px 12px oklch(0.12 0.03 150 / .6);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:1rem;
  padding:.9rem 1.5rem; border-radius:999px; cursor:pointer;
  text-decoration:none; border:1px solid transparent; transition:transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn-primary{
  background:linear-gradient(180deg,var(--brass-bright),var(--brass));
  color:var(--walnut-deep);
  box-shadow:0 10px 30px -10px oklch(0.60 0.12 75 / .7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px oklch(0.62 0.13 75 / .8); }
.btn-ghost{
  background:transparent; color:var(--parchment);
  border-color:color-mix(in oklch, var(--brass) 55%, transparent);
}
.btn-ghost:hover{ background:color-mix(in oklch, var(--brass) 14%, transparent); transform:translateY(-2px); }

/* generic section spacing */
.band{ padding:clamp(4rem,12vh,9rem) 0; }

/* ---- Section: heritage intro ---- */
.heritage{ text-align:center; }
.heritage h2{ font-size:clamp(1.9rem,4.5vw,3rem); color:var(--parchment); }
.heritage .kicker{ color:var(--brass-bright); font-family:var(--serif); font-style:italic; font-size:1.1rem; margin-bottom:.8rem; }
.heritage p{ margin-top:1.1rem; color:var(--parchment-dim); font-size:1.08rem; }

/* ---- Stube reveal (image + text, NOT a card grid) ---- */
.stube{ overflow:hidden; }
.stube .duo{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto;
}
.stube figure{ position:relative; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px -40px oklch(0.08 0.02 150 / .9);
  border:1px solid color-mix(in oklch,var(--brass) 25%, transparent); }
.stube figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.stube figure figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.2rem; font-family:var(--serif); font-style:italic;
  color:var(--parchment);
  background:linear-gradient(0deg, oklch(0.12 0.03 150 / .85), transparent);
}
.stube .copy h2{ font-size:clamp(1.8rem,4vw,2.7rem); color:var(--parchment); }
.stube .copy p{ margin-top:1rem; color:var(--parchment-dim); }

/* ---- Tafel: the table (Tiroler dishes) — a warm "served plates" layout, not a price list ---- */
.tafel{ text-align:center; }
.tafel h2{ font-size:clamp(1.9rem,4.5vw,3rem); color:var(--parchment); }
.tafel .intro{ color:var(--parchment-dim); max-width:48ch; margin:1rem auto 2.6rem; }
.plates{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.4rem; width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto;
}
.plate{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid color-mix(in oklch,var(--brass) 22%, transparent);
  box-shadow:0 30px 70px -36px oklch(0.08 0.02 150 / .9);
  transition:transform .35s var(--ease);
}
.plate:hover{ transform:translateY(-6px); }
.plate img{ width:100%; aspect-ratio:1; object-fit:cover; }
.plate .label{
  position:absolute; inset:auto 0 0 0; padding:1.1rem 1rem .9rem; text-align:left;
  background:linear-gradient(0deg, oklch(0.10 0.03 150 / .92), transparent);
}
.plate .label b{ font-family:var(--serif); font-size:1.18rem; color:var(--parchment); display:block; }
.plate .label span{ font-size:.88rem; color:var(--parchment-dim); }

/* real menu — grouped, on a warm panel; uses existing tokens (no new concept) */
.speisekarte{
  width:min(100% - 2.4rem, 880px); margin:3.2rem auto 0;
  background:color-mix(in oklch, var(--walnut-deep) 80%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 30%, transparent);
  border-radius:16px;
  padding:clamp(1.6rem, 4vw, 2.8rem);
  box-shadow:0 30px 80px -34px oklch(0.08 0.02 150 / .9);
  text-align:left;
}
.menu-group{ margin-top:2rem; }
.menu-group:first-child{ margin-top:0; }
.menu-group > h3{
  font-family:var(--serif); font-style:italic; font-size:1.35rem;
  color:var(--brass-bright);
  display:flex; align-items:center; gap:.9rem;
}
.menu-group > h3::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, color-mix(in oklch,var(--brass) 55%, transparent), transparent);
}
.menu-group .note{ font-size:.85rem; color:var(--parchment-dim); font-style:italic; margin-top:.2rem; }
.dish{
  display:flex; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid color-mix(in oklch, var(--brass) 14%, transparent);
}
.dish:last-child{ border-bottom:0; }
.dish .d-name{ flex:1; }
.dish .d-name b{ color:var(--parchment); font-weight:600; }
.dish .d-name span{ display:block; font-size:.86rem; color:var(--parchment-dim); margin-top:.1rem; }
.dish .d-price{
  flex:0 0 auto; font-family:var(--serif); font-size:1.05rem;
  color:var(--brass-bright); white-space:nowrap;
}

/* ---- Arrival / CTA at the warm Wirtshaus ---- */
.arrival{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.2rem;
}
.arrival .panel{ background:color-mix(in oklch, var(--walnut-deep) 80%, transparent); }
.arrival h2{ font-size:clamp(2rem,5.5vw,3.6rem); color:var(--parchment); }
.arrival h2 em{ font-style:italic; color:var(--brass-bright); }
.arrival p{ margin-top:1.1rem; color:var(--parchment); }
.arrival .hours{
  margin-top:1.6rem; display:flex; gap:1.4rem 2.2rem; flex-wrap:wrap; justify-content:center;
  font-size:.95rem; color:var(--parchment-dim);
}
.arrival .hours b{ color:var(--brass-bright); font-family:var(--serif); }
.arrival .hours span{ line-height:1.5; }
.arrival .hours small{ display:inline-block; margin-top:.25rem; font-size:.8rem; opacity:.85; }
.arrival .cta{ margin-top:2rem; display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }

/* ---- Studio strip ---- */
.studio{
  position:relative; z-index:10;
  background:linear-gradient(180deg, var(--loden-night), oklch(0.10 0.02 150));
  border-top:1px solid color-mix(in oklch,var(--brass) 28%, transparent);
  padding:3.5rem 0 4rem; text-align:center;
}
.studio .mark{ font-family:var(--serif); font-size:1.3rem; color:var(--brass-bright); }
.studio p{ color:var(--parchment-dim); margin:.8rem auto 1.6rem; max-width:46ch; }
.studio a.link{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px; }
.studio .cta{ display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }

/* reveal animation base — content visible by default; JS only enhances */
.reveal{ opacity:1; transform:none; }
.js-on .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js-on .reveal.in{ opacity:1; transform:none; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:860px){
  .stube .duo{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .demo-notice{ font-size:.78rem; }
  .hero{ padding-top:3.5rem; }
}

/* graceful, fully-readable static fallback — zero motion, the house photo
   stands still and the tint/bloom settle at a quiet default. */
@media (prefers-reduced-motion: reduce){
  .js-on .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .sky-tint{ opacity:.35; }
  .warm-bloom{ opacity:.3; }
}


/* ###########################################################
   ###  MULTI-PAGE LAYER  (added 2026-08-18)
   ###  Everything above styles the single-page index. Everything
   ###  below adds the site shell (header/footer) plus the four
   ###  new pages. It EXTENDS the tokens above — no new palette,
   ###  no second font stack, no second animation library.
   ########################################################### */


/* ===========================================================
   UTILITIES — skip link, screen-reader text, honeypot
   The skip link is the first focusable thing on every page, so
   a keyboard user reaches the content without walking the nav.
   =========================================================== */
.skip{
  position:absolute; left:.6rem; top:-4rem; z-index:100;
  background:var(--brass-bright); color:var(--walnut-deep);
  font-weight:600; padding:.65rem 1.1rem; border-radius:0 0 10px 10px;
  text-decoration:none; transition:top .18s var(--ease);
}
.skip:focus{ top:0; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Spam trap. A real field with a real label so a bot fills it in,
   parked off-screen and out of the tab order so a person never
   meets it. Never display:none — many bots skip hidden inputs. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}


/* ===========================================================
   SITE HEADER — the bar that makes five pages feel like one house
   Always dark walnut, on the parchment pages too: a solid bar
   reads as the same header everywhere and never has to re-solve
   its own contrast against whatever is behind it.
   =========================================================== */
.head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklch, var(--walnut-deep) 92%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--brass) 32%, transparent);
  backdrop-filter:blur(8px);
}
.head-in{
  display:flex; align-items:center; gap:1.2rem;
  padding:.62rem 0;
}
.mark{
  display:flex; flex-direction:column; line-height:1.1;
  text-decoration:none; margin-right:auto;
}
.mark-name{
  font-family:var(--serif); font-size:1.22rem; font-weight:600;
  color:var(--parchment);
}
.mark-sub{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-bright); margin-top:.15rem;
}

/* ===========================================================
   SITE HEADER — navigation + the header call-to-action
   =========================================================== */
.nav{ display:flex; align-items:center; gap:1.35rem; }
.nav a{
  text-decoration:none; font-size:.95rem; color:var(--parchment-dim);
  padding:.25rem 0; border-bottom:1px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav a:hover{ color:var(--parchment); border-bottom-color:var(--brass); }
.nav a[aria-current="page"]{
  color:var(--brass-bright); border-bottom-color:var(--brass-bright);
}
.btn.head-cta{
  padding:.6rem 1.15rem; font-size:.92rem; flex:0 0 auto;
}
.btn.head-cta[aria-current="page"]{
  background:transparent; color:var(--brass-bright);
  border-color:var(--brass); box-shadow:none;
}

/* Language — the host for the dropdown js/i18n.js injects (button + listbox).
   The box is reserved here, matching the injected control, so filling it after
   load shifts nothing (CLS). The four --wdm-lang-* variables are all the
   control reads from us: night-valley green, parchment type, brass edge. */
.lang-host{
  display:flex; align-items:center; flex:0 0 auto;
  min-width:47px; min-height:30px; margin-left:.9rem;
  --wdm-lang-font: var(--sans);
  --wdm-lang-bg: var(--loden-night);
  --wdm-lang-fg: var(--parchment);
  --wdm-lang-border: var(--brass);
}


/* ===========================================================
   DEMO NOTE — the dismiss button on the existing banner
   The banner itself is styled far above; this only adds the X.
   It comes back on reload on purpose: every visitor must be told
   once that the Gasthof is invented.
   =========================================================== */
.demo-x{
  width:26px; height:26px; flex:0 0 auto;
  display:grid; place-items:center;
  background:transparent; border:1px solid color-mix(in oklch, var(--brass) 40%, transparent);
  border-radius:50%; color:var(--parchment-dim); cursor:pointer;
  font-size:1rem; line-height:1; transition:color .18s, border-color .18s;
}
.demo-x:hover{ color:var(--brass-bright); border-color:var(--brass); }


/* ===========================================================
   SITE FOOTER — the same closing on all five pages
   No top border: on index it follows the .studio strip, which
   already draws one, and two hairlines read as a mistake.
   =========================================================== */
.foot{
  position:relative; z-index:10;
  background:oklch(0.09 0.018 150);
  padding:2.4rem 0 2.8rem;
}
.foot-in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.9rem 2rem;
}
.foot-mark{
  font-family:var(--serif); font-size:1.15rem; color:var(--brass-bright);
  margin-right:auto;
}
.foot-nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.92rem; }
.foot-nav a{ color:var(--parchment-dim); text-decoration:none; }
.foot-nav a:hover{ color:var(--parchment); text-decoration:underline; text-underline-offset:3px; }
.foot-cred{
  flex-basis:100%; font-size:.8rem; color:var(--parchment-dim); opacity:.85;
  border-top:1px solid color-mix(in oklch, var(--brass) 16%, transparent);
  padding-top:.9rem;
}
.foot-cred a{ color:inherit; }


/* ===========================================================
   INNER PAGE SHELL — one fixed photo instead of the index sequence
   The five-photo dissolve is the homepage's signature and stays
   there. Sub-pages get a single fixed photo behind the same
   contrast scrim: same world, no second scroll engine to run.
   =========================================================== */
.page-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:var(--loden-night);
}
.page-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
}

/* Paper grain. The same feTurbulence trick the backdrop masks use,
   held at a whisper — it keeps the flat colour fields from reading
   as a screen-printed template. */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
}

/* ===========================================================
   INNER PAGE SHELL — the page opening (overline, h1, standfirst)
   =========================================================== */
.page-head{ padding:clamp(3rem,9vh,5.5rem) 0 clamp(1.6rem,4vh,2.6rem); }
.page-head .overline{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--brass-bright); margin-bottom:.7rem;
}
.page-head h1{
  font-size:clamp(2.2rem,6vw,4rem); color:var(--parchment); max-width:16ch;
}
.page-head h1 em{ font-style:italic; color:var(--brass-bright); }
.page-head .standfirst{
  margin-top:1.1rem; font-size:clamp(1.02rem,2vw,1.2rem);
  color:var(--parchment-dim); max-width:52ch;
}
.back-link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.88rem; color:var(--parchment-dim); text-decoration:none;
  margin-bottom:1.2rem;
}
.back-link:hover{ color:var(--brass-bright); }
.back-link::before{ content:"\2190"; font-size:1rem; }


/* ===========================================================
   SECTION INTRO — kicker, heading, standfirst
   The three lines that open most sections. Named once here so no
   page has to reach for a style attribute to set a heading size.
   =========================================================== */
.sec-kicker{
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
  color:var(--brass-bright); margin-bottom:.5rem;
}
.sec-h{ font-size:clamp(1.9rem,4.5vw,3rem); color:var(--parchment); max-width:20ch; }
.sec-h em{ font-style:italic; color:var(--brass-bright); }
.sec-lede{ margin-top:1rem; color:var(--parchment-dim); max-width:54ch; }
.panel-h{ font-size:clamp(1.7rem,4vw,2.5rem); color:var(--parchment); }
.panel-lede{ margin-top:.8rem; color:var(--parchment-dim); max-width:52ch; }


/* ===========================================================
   LIGHT PAGES — Speisekarte and Impressum turn the palette over
   A printed menu card and a legal notice are both paper objects,
   so they get the parchment as ground instead of the evening
   valley. Same six colours, read the other way round. The accent
   is darkened because --brass-bright on parchment is only ~1.4:1.
   =========================================================== */
body.light{
  --pg-ink:    oklch(0.24 0.03 60);      /* warm brown text, 9.5:1 on parchment */
  --pg-dim:    oklch(0.42 0.03 60);      /* secondary text, 4.9:1 */
  --pg-accent: oklch(0.40 0.10 55);      /* headings + prices, 5.1:1 */
  --pg-rule:   color-mix(in oklch, var(--walnut) 32%, transparent);
  background:var(--parchment);
  color:var(--pg-ink);
}
body.light .page-head h1,
body.light h1,
body.light h2,
body.light h3{ color:var(--pg-ink); }
body.light .page-head .overline,
body.light .page-head h1 em{ color:var(--pg-accent); }
body.light .page-head .standfirst,
body.light .back-link{ color:var(--pg-dim); }
body.light .back-link:hover{ color:var(--pg-accent); }
body.light .grain{ opacity:.07; mix-blend-mode:multiply; }
body.light :focus-visible{ outline-color:var(--pg-accent); }
body.light main{ background:transparent; }


/* ===========================================================
   ZIMMER — the opening image
   A full-bleed morning photo, cropped tall on phones, with a warm
   dawn wash pulled over the bottom so the headline sits on light
   rather than in a black box.
   =========================================================== */
.zi-open{
  position:relative; z-index:10;
  min-height:min(78svh, 620px);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.zi-open img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
}
.zi-open::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
     oklch(0.14 0.03 150 / .55) 0%,
     oklch(0.14 0.03 150 / .12) 38%,
     oklch(0.13 0.03 150 / .88) 100%);
}
.zi-open .wrap{ position:relative; z-index:2; padding-bottom:clamp(2rem,6vh,3.6rem); }
.zi-open h1{ font-size:clamp(2.3rem,6.5vw,4.4rem); color:var(--parchment); max-width:15ch; }
.zi-open h1 em{ font-style:italic; color:var(--brass-bright); }
.zi-open .overline{
  font-family:var(--serif); font-style:italic; color:var(--brass-bright);
  font-size:1.05rem; margin-bottom:.6rem;
}
.zi-open .standfirst{ margin-top:1rem; max-width:46ch; color:var(--parchment); }


/* ===========================================================
   ZIMMER — the three rooms as alternating bands
   Deliberately NOT a three-card grid: each room gets the full
   width and its own turn, which is how a small house with three
   rooms actually presents itself.
   =========================================================== */
.room{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(1.4rem,4vw,3.4rem); align-items:center;
  padding:clamp(3rem,8vh,5.5rem) 0;
  border-bottom:1px solid color-mix(in oklch, var(--brass) 16%, transparent);
}
.room:last-of-type{ border-bottom:0; }
.room:nth-child(even) .room-fig{ order:2; }
.room-fig{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid color-mix(in oklch, var(--brass) 25%, transparent);
  box-shadow:0 40px 90px -44px oklch(0.08 0.02 150 / .9);
}
.room-fig img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.room-nr{
  position:absolute; top:.9rem; left:.9rem;
  font-family:var(--serif); font-size:.86rem; letter-spacing:.1em;
  background:color-mix(in oklch, var(--walnut-deep) 88%, transparent);
  color:var(--brass-bright); padding:.3rem .7rem; border-radius:999px;
}
.room-copy h2{ font-size:clamp(1.7rem,3.8vw,2.5rem); color:var(--parchment); }
.room-copy h2 em{ font-style:italic; color:var(--brass-bright); }
.room-copy > p{ margin-top:.9rem; color:var(--parchment-dim); }

/* ===========================================================
   ZIMMER — the price line and the room's hard facts
   =========================================================== */
.room-price{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  margin-top:1.2rem; padding-top:1.1rem;
  border-top:1px solid color-mix(in oklch, var(--brass) 26%, transparent);
}
.room-price b{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.1rem); color:var(--brass-bright);
}
.room-price span{ font-size:.92rem; color:var(--parchment-dim); }
.facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; list-style:none; }
.facts li{
  font-size:.86rem; color:var(--parchment);
  border:1px solid color-mix(in oklch, var(--brass) 30%, transparent);
  border-radius:999px; padding:.32rem .8rem;
}
.room-act{ margin-top:1.4rem; display:flex; gap:.8rem; flex-wrap:wrap; }


/* ===========================================================
   ZIMMER — the Tageslicht rail (the page's designed moment)
   One night in the house drawn as an actual strip of light:
   dusk at check-in, deep night, then dawn at breakfast. The
   gradient IS the information — the times underneath just name
   the stops. On phones it turns and runs down the page.
   =========================================================== */
.tageslicht{ padding:clamp(3rem,9vh,6rem) 0; }
.tageslicht h2{ font-size:clamp(1.7rem,4vw,2.6rem); color:var(--parchment); }
.tageslicht > .wrap > p{ margin-top:.9rem; color:var(--parchment-dim); max-width:52ch; }
.tl-rail{
  margin-top:2.4rem; position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
  padding-top:2.6rem;
}
.tl-rail::before{
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,
     oklch(0.62 0.11 70) 0%,       /* 14:00 — Nachmittagslicht */
     oklch(0.40 0.07 45) 26%,      /* Abend */
     oklch(0.18 0.04 265) 52%,     /* Nacht */
     oklch(0.44 0.06 60) 76%,      /* Morgendämmerung */
     oklch(0.80 0.10 85) 100%);    /* 10:00 — heller Vormittag */
  box-shadow:0 6px 26px -8px oklch(0.60 0.10 75 / .55);
}
.tl-step{ position:relative; padding-top:1rem; }
.tl-step::before{
  content:""; position:absolute; top:-2.6rem; left:0;
  width:1px; height:2.2rem;
  background:linear-gradient(180deg, var(--brass), transparent);
}
.tl-time{
  font-family:var(--serif); font-size:1.25rem; color:var(--brass-bright);
  display:block;
}
.tl-what{ display:block; font-weight:600; color:var(--parchment); margin-top:.2rem; font-size:.95rem; }
.tl-note{ display:block; font-size:.86rem; color:var(--parchment-dim); margin-top:.25rem; }


/* ===========================================================
   SPEISEKARTE — the printed card
   Set as a real menu card: one measure on phones, two columns on
   a desk, leader dots carrying the eye from dish to price. The
   dotted rule is a printed-menu convention, not decoration — it
   is what makes a long price column readable without a table.
   =========================================================== */
.karte{ padding:clamp(2rem,5vh,3rem) 0 clamp(3rem,8vh,5rem); }
.karte-cols{ columns:2; column-gap:clamp(2rem,5vw,4.5rem); }
.karte-group{ break-inside:avoid; margin-bottom:2.4rem; }
.karte-group h2{
  font-family:var(--serif); font-style:italic; font-size:1.5rem;
  color:var(--pg-accent, var(--brass-bright));
  display:flex; align-items:center; gap:.9rem; margin-bottom:.4rem;
}
.karte-group h2::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--pg-rule), transparent);
}
.karte-group > .note{
  font-size:.86rem; font-style:italic; color:var(--pg-dim); margin-bottom:.6rem;
}
.karte-dish{ padding:.62rem 0; break-inside:avoid; }
.kd-top{ display:flex; align-items:baseline; gap:.35rem; }
.kd-name{ font-weight:600; color:var(--pg-ink); }
.kd-lead{
  flex:1 1 1.5rem; min-width:1.5rem;
  border-bottom:1px dotted var(--pg-rule);
  transform:translateY(-.22em);
}
.kd-price{
  font-family:var(--serif); font-size:1.05rem; white-space:nowrap;
  color:var(--pg-accent);
}
.kd-desc{ font-size:.9rem; color:var(--pg-dim); margin-top:.1rem; max-width:44ch; }

/* ===========================================================
   SPEISEKARTE — the photo insert and the closing notes
   A dark full-bleed band cutting through the parchment, the way
   a printed card has one glossy picture page in the middle.
   =========================================================== */
.karte-plates{
  background:var(--loden-night);
  padding:clamp(2.6rem,7vh,4.4rem) 0;
  margin:clamp(2rem,5vh,3.4rem) 0;
}
.karte-plates h2{ color:var(--parchment); font-size:clamp(1.6rem,3.6vw,2.3rem); text-align:center; }
.karte-plates > .wrap > p{
  color:var(--parchment-dim); text-align:center; max-width:46ch;
  margin:.8rem auto 2rem;
}
.karte-plates .plates{ margin-top:0; }
.band-cta{ margin-top:1.8rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.karte-fine{
  border:1px solid var(--pg-rule); border-radius:14px;
  padding:clamp(1.2rem,3vw,1.8rem);
  margin-top:2.4rem;
}
.karte-fine h2{ font-family:var(--serif); font-size:1.2rem; color:var(--pg-ink); }
.karte-fine p{ font-size:.92rem; color:var(--pg-dim); margin-top:.5rem; }


/* ===========================================================
   RESERVIEREN — the day rail
   Twenty-one days as a horizontal strip. Ruhetage stay in the
   strip greyed out instead of vanishing: a guest who wonders why
   Monday is missing gets an answer without asking.
   =========================================================== */
.buch{ padding:clamp(1rem,3vh,2rem) 0 clamp(3rem,8vh,5rem); }
.buch-panel{
  background:color-mix(in oklch, var(--walnut-deep) 82%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 30%, transparent);
  border-radius:16px;
  padding:clamp(1.3rem,3.5vw,2.4rem);
  box-shadow:0 34px 84px -36px oklch(0.08 0.02 150 / .9);
}
/* A <fieldset> is min-width:min-content by default, so it refuses to
   shrink below the widest thing inside it — with a 21-day rail in
   there it grew to ~1500px and pushed the whole page sideways on a
   phone. min-width:0 is what lets the rail scroll inside instead.
   The UA border/padding go with it; this design draws its own. */
.step{ min-width:0; border:0; padding:0; margin:0; }
.step-h{
  font-family:var(--serif); font-size:1.2rem; color:var(--brass-bright);
  display:flex; align-items:baseline; gap:.6rem;
  padding:0;
}
.days, .slots, .party, .fields{ min-width:0; max-width:100%; }
.step-n{ font-size:.78rem; letter-spacing:.16em; color:var(--parchment-dim); }
.step + .step{ margin-top:2.2rem; }
.step-note{ font-size:.9rem; color:var(--parchment-dim); margin-top:.35rem; }

.days{
  display:flex; gap:.55rem; margin-top:1rem;
  overflow-x:auto; padding-bottom:.6rem;
  scrollbar-width:thin;
}
/* position:relative contains the absolutely-hidden input below — without it
   the input's containing block is the document, it escapes the scrolling rail,
   and the whole page grows a horizontal scrollbar on phones. */
.day{ flex:0 0 auto; cursor:pointer; position:relative; }
.day input{ position:absolute; opacity:0; width:1px; height:1px; }
.day-b{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  min-width:62px; padding:.6rem .5rem;
  border:1px solid color-mix(in oklch, var(--brass) 26%, transparent);
  border-radius:12px; color:var(--parchment-dim);
  transition:border-color .18s, background .18s, color .18s;
}
.day-w{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.day-d{ font-family:var(--serif); font-size:1.3rem; color:var(--parchment); line-height:1.1; }
.day-m{ font-size:.72rem; }
.day input:checked + .day-b{
  background:color-mix(in oklch, var(--brass) 20%, transparent);
  border-color:var(--brass-bright); color:var(--parchment);
}
.day input:focus-visible + .day-b{ outline:3px solid var(--brass-bright); outline-offset:3px; }
.day input:disabled + .day-b{ opacity:.4; cursor:not-allowed; }
.day input:disabled + .day-b .day-d{ color:var(--parchment-dim); }
.day-x{ font-size:.68rem; color:var(--brass); }

/* ===========================================================
   RESERVIEREN — the slot grid
   A greyed, struck-through time is genuinely unavailable in the
   simulation, and stays visible for exactly that reason.
   =========================================================== */
.slots{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:.55rem; margin-top:1rem;
}
/* Same containment as .day: the hidden radio must not escape its label. */
.slot{ cursor:pointer; position:relative; }
.slot input{ position:absolute; opacity:0; width:1px; height:1px; }
.slot-b{
  display:block; text-align:center; padding:.65rem .4rem;
  border:1px solid color-mix(in oklch, var(--brass) 26%, transparent);
  border-radius:10px; color:var(--parchment);
  font-variant-numeric:tabular-nums;
  transition:border-color .18s, background .18s;
}
.slot input:checked + .slot-b{
  background:linear-gradient(180deg,var(--brass-bright),var(--brass));
  color:var(--walnut-deep); font-weight:600; border-color:transparent;
}
.slot input:focus-visible + .slot-b{ outline:3px solid var(--brass-bright); outline-offset:3px; }
.slot input:disabled + .slot-b{
  opacity:.38; text-decoration:line-through; cursor:not-allowed;
}
.slot-status{ margin-top:.9rem; font-size:.92rem; color:var(--parchment-dim); }
.legend{ display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.9rem; font-size:.82rem; color:var(--parchment-dim); list-style:none; }
.legend li{ display:flex; align-items:center; gap:.4rem; }
.lg{ width:14px; height:14px; border-radius:4px; border:1px solid color-mix(in oklch, var(--brass) 40%, transparent); }
.lg-taken{ opacity:.38; background:repeating-linear-gradient(45deg, var(--parchment-dim) 0 2px, transparent 2px 4px); }
.lg-free{ background:color-mix(in oklch, var(--brass) 22%, transparent); }

/* ===========================================================
   RESERVIEREN — party size, and the "next free table" nudge
   =========================================================== */
.party{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.party label{ cursor:pointer; }
.party input{ position:absolute; opacity:0; width:1px; height:1px; }
.party span{
  display:grid; place-items:center; min-width:46px; padding:.55rem .6rem;
  border:1px solid color-mix(in oklch, var(--brass) 26%, transparent);
  border-radius:10px; color:var(--parchment); font-variant-numeric:tabular-nums;
}
.party input:checked + span{
  background:color-mix(in oklch, var(--brass) 22%, transparent);
  border-color:var(--brass-bright); font-weight:600;
}
.party input:focus-visible + span{ outline:3px solid var(--brass-bright); outline-offset:3px; }

.nudge{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:1.4rem; padding:.9rem 1.1rem;
  background:color-mix(in oklch, var(--brass) 12%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 30%, transparent);
  border-radius:12px; font-size:.94rem; color:var(--parchment);
}
.nudge b{ font-family:var(--serif); color:var(--brass-bright); font-weight:600; }
.nudge button{
  background:transparent; border:0; padding:0; cursor:pointer;
  color:var(--brass-bright); font:inherit; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}


/* ===========================================================
   FORMS — fields, labels, hints, errors
   Shared by the table request and the room request. Every label
   sits above its field and stays there while the field is filled.
   =========================================================== */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field-wide{ grid-column:1 / -1; }
.field label{ font-size:.9rem; font-weight:600; color:var(--parchment); }
.field .opt-lab{ font-weight:400; color:var(--parchment-dim); }
.field input,
.field select,
.field textarea{
  font:inherit; font-size:1rem;
  background:color-mix(in oklch, var(--loden-night) 60%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 28%, transparent);
  border-radius:10px; padding:.7rem .85rem;
  color:var(--parchment); width:100%;
  transition:border-color .18s;
}
.field textarea{ resize:vertical; min-height:5.2rem; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:color-mix(in oklch, var(--brass) 50%, transparent); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:oklch(0.66 0.16 30); }
.field .hint{ font-size:.82rem; color:var(--parchment-dim); }
.field .err,
.err{ font-size:.85rem; color:oklch(0.78 0.14 32); }
.err:empty{ display:none; }

/* ===========================================================
   FORMS — submit, sending state, success and failure panels
   =========================================================== */
.form-act{ margin-top:1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }
.form-fine{
  margin-top:1.1rem; font-size:.82rem; color:var(--parchment-dim);
  max-width:60ch; line-height:1.55;
}
.form-fine a{ color:var(--brass-bright); text-underline-offset:3px; }
.form-error{
  margin-top:1.1rem; padding:.9rem 1.1rem; border-radius:12px;
  background:color-mix(in oklch, oklch(0.45 0.14 30) 26%, transparent);
  border:1px solid oklch(0.60 0.15 30); color:var(--parchment);
  font-size:.94rem;
}
.done{
  text-align:center; padding:clamp(1.6rem,5vw,3rem);
}
.done-seal{
  width:56px; height:56px; margin:0 auto 1.2rem;
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass) 70%);
  color:var(--walnut-deep); font-family:var(--serif); font-size:1.6rem;
}
.done h2{ font-size:clamp(1.6rem,4vw,2.4rem); color:var(--parchment); }
.done h2 em{ font-style:italic; color:var(--brass-bright); }
.done > p{ margin-top:1rem; color:var(--parchment); max-width:48ch; margin-inline:auto; }
.done-rows{
  margin:1.6rem auto 0; max-width:24rem; text-align:left;
  border-top:1px solid color-mix(in oklch, var(--brass) 22%, transparent);
}
.done-rows div{
  display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid color-mix(in oklch, var(--brass) 14%, transparent);
}
.done-rows dt{ color:var(--parchment-dim); font-size:.9rem; }
.done-rows dd{ color:var(--parchment); font-weight:600; text-align:right; }
.done-fine{ margin-top:1.4rem; font-size:.84rem; color:var(--parchment-dim); }
.done-act{ margin-top:1.6rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }


/* ===========================================================
   ÖFFNUNGSZEITEN — the week as a plain list
   Ruhetage stay in the list, greyed, for the same reason the
   booking rail keeps them: a missing Monday is a question.
   =========================================================== */
.oeff{ margin-top:1.8rem; max-width:44rem; }
.oeff-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.2rem; padding:.72rem 0;
  border-bottom:1px solid color-mix(in oklch, var(--brass) 16%, transparent);
}
.oeff-row dt{ font-family:var(--serif); font-size:1.05rem; color:var(--parchment); }
.oeff-row dd{ text-align:right; color:var(--parchment); font-variant-numeric:tabular-nums; }
.oeff-row dd span{ display:block; font-size:.84rem; color:var(--parchment-dim); margin-top:.15rem; }
.oeff-row.is-zu dt,
.oeff-row.is-zu dd{ color:var(--parchment-dim); opacity:.7; }
.oeff-row.is-zu dd{ font-style:italic; }


/* ===========================================================
   PROSE — the Impressum, set for reading and nothing else
   =========================================================== */
.prose{ max-width:66ch; padding:0 0 clamp(3rem,8vh,5rem); }
.prose h1{ font-size:clamp(2rem,5vw,3rem); }
.prose h2{
  font-size:1.3rem; margin-top:2.2rem; color:var(--pg-accent);
  font-family:var(--serif); font-style:italic;
}
.prose p, .prose address{ margin-top:.8rem; color:var(--pg-ink); font-style:normal; }
.prose .lead{ font-size:1.1rem; color:var(--pg-ink); border-left:3px solid var(--pg-accent); padding-left:1rem; }
.prose a{ color:var(--pg-accent); text-underline-offset:3px; }
.prose ul{ margin-top:.8rem; padding-left:1.2rem; }
.prose li{ margin-top:.35rem; }


/* ===========================================================
   INDEX — the Zimmer teaser (the only new section on the homepage)
   =========================================================== */
.zi-teaser{ padding:clamp(3rem,10vh,7rem) 0; }
.zi-teaser .duo{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto;
}
.zi-teaser figure{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid color-mix(in oklch, var(--brass) 25%, transparent);
  box-shadow:0 40px 90px -40px oklch(0.08 0.02 150 / .9);
}
.zi-teaser figure img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.zi-teaser h2{ font-size:clamp(1.8rem,4vw,2.7rem); color:var(--parchment); }
.zi-teaser h2 em{ font-style:italic; color:var(--brass-bright); }
.zi-teaser p{ margin-top:1rem; color:var(--parchment-dim); }
.zi-teaser .cta{ margin-top:1.6rem; display:flex; gap:.8rem; flex-wrap:wrap; }


/* ===========================================================
   RESPONSIVE — the multi-page layer
   The header is the only thing that really changes shape: below
   820px the nav drops to its own scrollable row so the wordmark
   and the booking button always fit on one line at 375px.
   =========================================================== */
@media (max-width:820px){
  .head-in{ flex-wrap:wrap; gap:.7rem 1rem; }
  .nav{
    order:3; flex-basis:100%; gap:1.1rem;
    overflow-x:auto; padding-bottom:.15rem; scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ white-space:nowrap; }
  /* The dropdown shares the nav's row instead of claiming a third one: the
     wordmark and the booking button keep the first line, as designed above.
     The basis is the row minus the dropdown, its margin and the flex gap —
     give the nav any more and it claims the whole row again. */
  .nav{ flex-basis:calc(100% - 6rem); }
  .lang-host{ order:3; margin-left:.7rem; }
  .room{ grid-template-columns:1fr; }
  .room:nth-child(even) .room-fig{ order:0; }
  .zi-teaser .duo{ grid-template-columns:1fr; }
  .karte-cols{ columns:1; }
  .fields{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  /* Food plates stay a 2-up served-plates mosaic on phones. The default
     auto-fit,minmax(220px,1fr) collapses to ONE full-width column below
     ~440px, which made each plate a screen-wide square; two fixed columns
     keep them a controlled ~third-screen square side by side. */
  .plates{ grid-template-columns:1fr 1fr; gap:1rem; }
  /* The rail turns: five stops down the page, the light strip
     running beside them instead of above. */
  .tl-rail{ grid-template-columns:1fr; padding-top:0; padding-left:2rem; gap:1.4rem; }
  .tl-rail::before{
    left:0; right:auto; top:0; bottom:0; width:10px; height:auto;
    background:linear-gradient(180deg,
       oklch(0.62 0.11 70) 0%, oklch(0.40 0.07 45) 26%,
       oklch(0.18 0.04 265) 52%, oklch(0.44 0.06 60) 76%,
       oklch(0.80 0.10 85) 100%);
  }
  .tl-step{ padding-top:0; }
  .tl-step::before{ top:.7rem; left:-2rem; width:1.4rem; height:1px;
    background:linear-gradient(90deg, var(--brass), transparent); }
}
@media (max-width:480px){
  .mark-name{ font-size:1.05rem; }
  .btn.head-cta{ padding:.52rem .9rem; font-size:.86rem; }
  .slots{ grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); }
}

/* Reduced motion: the multi-page layer adds no scroll effects, so
   only the reveal transition needs switching off — already handled
   in the block far above, plus the fixed backdrop stays static. */


/* ===========================================================
   PRINT — the Speisekarte is meant to come off a printer
   Guests print menus and staff pin them up. Drop the furniture,
   put black ink on white paper, keep the columns.
   =========================================================== */
@media print{
  .demo-notice, .head, .foot, .skip, .grain, .page-bg,
  .karte-plates, .studio, .back-link{ display:none !important; }
  body, body.light{ background:#fff; color:#000; }
  /* A reveal that never scrolled into view must not print blank. */
  .js-on .reveal, .reveal{ opacity:1 !important; transform:none !important; }
  body.light .page-head h1, body.light h1, body.light h2, body.light h3{ color:#000; }
  .karte-group h2{ color:#000; }
  .karte-group h2::after{ background:#000; }
  .kd-price, .karte-dish .kd-price{ color:#000; }
  .kd-desc, .page-head .standfirst, .karte-fine p{ color:#333; }
  .kd-lead{ border-bottom-color:#999; }
  .karte-cols{ columns:2; }
  .page-head{ padding:0 0 1rem; }
  .wrap{ width:100%; }
  a[href]::after{ content:""; }
}

/* ===========================================================
   HEADER MENU — one "Menue" button under 820 px (native popover),
   the open row at 820 px and up (as before). data-group="seiten"
   ties wordmark + Menue + nav into one wayfinding control.
   =========================================================== */
.menu-btn{
  display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  background:transparent; color:var(--parchment);
  border:1px solid color-mix(in oklch, var(--brass) 48%, transparent);
}
.menu-btn:hover{ border-color:var(--brass); color:var(--brass-bright); }
/* The popover panel on a phone: a sheet of the warm walnut, centred. */
.nav[popover]{
  position:fixed; inset:auto; margin:auto;
  top:4.2rem; left:50%; transform:translateX(-50%);
  width:min(92vw, 340px);
  flex-direction:column; align-items:stretch; gap:.4rem;
  padding:1rem; border-radius:16px;
  background:color-mix(in oklch, var(--walnut-deep) 96%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 36%, transparent);
  box-shadow:0 30px 80px -24px oklch(0.08 0.02 150 / .9);
}
.nav[popover]::backdrop{ background:oklch(0.10 0.02 150 / .5); backdrop-filter:blur(2px); }
.nav[popover] a:not(.nav-cta){ padding:.7rem .4rem; border-bottom:1px solid color-mix(in oklch,var(--brass) 14%, transparent); }
.nav-cta{ margin-top:.5rem; justify-content:center; }
.menu-close{
  margin-top:.3rem; padding:.55rem; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid color-mix(in oklch,var(--brass) 28%, transparent);
  color:var(--parchment-dim); font:inherit;
}
/* A closed popover must be hidden. The site's own `.nav{display:flex}` is an
   author rule and would otherwise beat the UA's closed-popover display:none,
   leaving the whole menu open on load — so hide the closed state explicitly. */
.nav[popover]:not(:popover-open){ display:none; }
@media (min-width:820px){
  .menu-btn, .nav .menu-close{ display:none; }
  /* The open row again: the links sit inline as today, whatever the popover state. */
  .nav[popover], .nav[popover]:not(:popover-open){
    position:static; inset:auto; margin:0; transform:none; width:auto;
    display:flex; flex-direction:row; align-items:center; gap:1.35rem;
    padding:0; background:none; border:0; box-shadow:none;
  }
  .nav[popover] a:not(.nav-cta){ padding:.25rem 0; border-bottom:1px solid transparent; }
  .nav-cta{ margin-top:0; }
}


/* ===========================================================
   STAY CARD — the one idea of the hero and the heart of zimmer.html:
   dates in, a real engine total out. A warm glass panel over the photo,
   built from the existing tokens (no new palette, no second font).
   =========================================================== */
.stay{
  width:min(100% - 1.6rem, 460px); margin-inline:auto; text-align:left;
  background:color-mix(in oklch, var(--loden-deep) 90%, transparent);
  border:1px solid color-mix(in oklch, var(--brass) 34%, transparent);
  border-radius:16px;
  padding:clamp(1rem, 3.4vw, 1.5rem);
  box-shadow:0 30px 80px -30px oklch(0.08 0.02 150 / .85);
  backdrop-filter:blur(6px);
}
.stay-voll{ width:min(100%, 560px); }
.stay-felder{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.stay-zi, .stay-hund, .stay-pers{ grid-column:1 / -1; }
.stay-feld{ display:flex; flex-direction:column; gap:.25rem; border:0; padding:0; margin:0; min-width:0; }
.stay-klein{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass-bright);
}
.stay input[type=date], .stay select{
  width:100%; font:inherit; font-size:1rem;
  padding:.6rem .7rem; border-radius:10px;
  background:var(--loden-night); color:var(--parchment);
  border:1px solid color-mix(in oklch, var(--brass) 30%, transparent);
}
.stay input[type=date]:focus-visible, .stay select:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:1px; }
.stay-seg{ display:flex; gap:.3rem; }
.stay-seg label{ flex:1; position:relative; }
.stay-seg input{ position:absolute; opacity:0; pointer-events:none; }
.stay-seg span{
  display:block; text-align:center; padding:.55rem 0; border-radius:10px; cursor:pointer;
  background:var(--loden-night); color:var(--parchment-dim);
  border:1px solid color-mix(in oklch, var(--brass) 22%, transparent);
}
.stay-seg input:checked + span{ background:color-mix(in oklch,var(--brass) 22%, var(--loden-night)); color:var(--parchment); border-color:var(--brass); }
.stay-seg input:focus-visible + span{ outline:2px solid var(--brass-bright); outline-offset:2px; }
.stay-hund{ display:flex; align-items:center; gap:.6rem; cursor:pointer; margin-top:.2rem; color:var(--parchment-dim); font-size:.95rem; }
.stay-hund input{ width:1.1rem; height:1.1rem; accent-color:var(--brass); }

.stay-summe{
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid color-mix(in oklch, var(--brass) 20%, transparent);
}
.stay-total{ font-family:var(--serif); font-size:clamp(1.9rem, 6vw, 2.5rem); color:var(--parchment); line-height:1.05; }
.stay-eur{ color:var(--brass-bright); font-size:.7em; }
.stay-frei{ font-family:var(--sans); font-size:.8rem; color:var(--brass-bright); margin-left:.4rem; min-height:1lh; /* reserve the line js/stay.js fills in later, so the card does not grow (CLS) */ }
.stay-was{ margin-top:.3rem; color:var(--parchment-dim); font-size:.95rem; }
.stay-posten{ list-style:none; margin:.8rem 0 0; padding:0; font-size:.9rem; color:var(--parchment-dim); }
.stay-posten li{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; }
.stay-posten .betrag{ font-variant-numeric:tabular-nums; color:var(--parchment); }
.stay-inkl{ margin-top:.5rem; font-size:.82rem; color:var(--brass-bright); font-style:italic; }
.stay-hinweis{ margin-top:.6rem; font-size:.88rem; color:var(--glow); }
.stay-gesamt{ margin-top:.8rem; font-family:var(--serif); font-size:1.2rem; color:var(--parchment); }
.stay-betrag{ font-variant-numeric:tabular-nums; }

.stay-ausfall{ display:none; margin-top:1rem; color:var(--parchment-dim); font-size:.92rem; }
body.ausfall .stay-ausfall{ display:block; }
body.ausfall .stay-summe{ display:none; }

.stay-act{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.stay-act .btn{ flex:1 1 auto; justify-content:center; }
.hero-second{ margin-top:.2rem; }

/* zimmer room band: the free/taken chip the engine fills */
.room-state{
  margin:.6rem 0 0; font-size:.86rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
}
.room-state:empty{ display:none; }
.room-state::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--parchment-dim); }
.room-state[data-frei="ja"]{ color:var(--brass-bright); }
.room-state[data-frei="ja"]::before{ background:var(--glow); }
.room-state[data-frei="nein"], .room-state[data-frei="klein"]{ color:var(--parchment-dim); }

/* the booking form under the card (zimmer.html) */
.anfrage-form .fields{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1rem; }
.anfrage-form .field{ display:flex; flex-direction:column; gap:.3rem; }
.anfrage-form .field-wide{ grid-column:1 / -1; }
.anfrage-form label{ font-size:.82rem; color:var(--brass-bright); letter-spacing:.02em; }
.anfrage-form .opt-lab{ color:var(--parchment-dim); text-transform:none; letter-spacing:0; }
.anfrage-form input, .anfrage-form textarea{
  width:100%; font:inherit; padding:.6rem .7rem; border-radius:10px;
  background:var(--loden-night); color:var(--parchment);
  border:1px solid color-mix(in oklch, var(--brass) 28%, transparent);
}
.anfrage-form input:focus-visible, .anfrage-form textarea:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:1px; }
.b-demo{ margin-top:.9rem; font-size:.85rem; color:var(--glow); font-style:italic; }
.storno{ margin-top:1.1rem; padding:.9rem 1rem; border-radius:12px; background:color-mix(in oklch,var(--walnut-deep) 70%, transparent); border:1px solid color-mix(in oklch,var(--brass) 20%, transparent); }
.storno h3{ font-family:var(--serif); font-size:1.05rem; color:var(--brass-bright); }
.storno p{ margin-top:.4rem; font-size:.88rem; color:var(--parchment-dim); }
.storno-fassung{ font-size:.78rem; opacity:.8; }
.ja{ display:flex; gap:.6rem; align-items:flex-start; margin-top:1rem; font-size:.92rem; color:var(--parchment); }
.ja input{ margin-top:.2rem; width:1.1rem; height:1.1rem; accent-color:var(--brass); flex:0 0 auto; }
.form-fine{ margin-top:1rem; font-size:.8rem; color:var(--parchment-dim); }
.b-klein{ margin-top:.6rem; font-size:.84rem; color:var(--parchment-dim); }
.b-fehler{ margin-top:.8rem; color:var(--glow); font-weight:600; }
.b-summe{ margin-top:.9rem; white-space:pre-line; font-family:var(--serif); color:var(--parchment); }
.anfrage-form #b-senden{ margin-top:1rem; }

/* danke.html */
.danke-main{ position:relative; z-index:10; min-height:70svh; display:flex; align-items:center; padding:2.5rem 1.2rem 4rem; }
.danke-main .buch-panel{ width:min(100% - 1.6rem, 560px); margin-inline:auto; }
.danke-main .done-rows{ margin-top:1.2rem; display:grid; gap:.5rem; }
.danke-main .done-rows > div{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid color-mix(in oklch,var(--brass) 14%, transparent); padding-bottom:.4rem; }
.danke-main dt{ color:var(--parchment-dim); font-size:.9rem; }
.danke-main dd{ color:var(--parchment); text-align:right; }

@media (max-width:520px){
  .anfrage-form .fields{ grid-template-columns:1fr; }
}

/* Arrival section photo (haus-sommer) and the key detail on the day timeline (schluessel) */
.arrival-foto{
  width:min(100% - 2.4rem, 860px); margin:0 auto clamp(1.6rem,4vw,2.6rem);
  border-radius:16px; overflow:hidden;
  border:1px solid color-mix(in oklch, var(--brass) 25%, transparent);
  box-shadow:0 40px 90px -40px oklch(0.08 0.02 150 / .9);
}
.arrival-foto img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.tl-foto{
  width:100%; max-width:220px; height:132px; object-fit:cover;
  border-radius:12px; margin-bottom:.7rem;
  border:1px solid color-mix(in oklch, var(--brass) 22%, transparent);
}