/* Gasthaus Schweizerhof Waldau — "Loam" draft.
   Direction: residences.loamhouse.com.au, see 02_Plans/DESIGNENTWURF.md.
   Typefaces: Playfair Display and Work Sans, both SIL OFL, self-hosted.
   No CDN, no third party, so nothing here needs a consent banner.

   Class names are German because the content is. The project's own notes and
   tooling are English, the page itself is not. */

/* ---------------------------------------------------------------- Typefaces */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-italic-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- Tokens */
:root {
  --papier: #f0ede8;
  --papier-tief: #e4dfd6;
  --tinte: #161814;
  --tinte-weich: #4a4c45;
  --nacht: #0d0f0d;
  --gold: #cba65e;          /* on dark only */
  --gold-tinte: #7e5f28;    /* 5.1:1 on --papier */
  --linie-hell: rgba(255, 255, 255, 0.34);
  --linie-dunkel: rgba(22, 24, 20, 0.16);

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --spalte: min(100% - 2.5rem, 1360px);
  --text: 41rem;
  --leiste: 72px;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--leiste);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

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

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

.zum-inhalt {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; background: var(--nacht); color: #fff;
  padding: 0.7rem 1.3rem; font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; transition: transform 0.18s;
}
.zum-inhalt:focus { transform: translate(-50%, 0); }

/* ----------------------------------------------------------------- Top bar */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--leiste);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 rgba(22, 24, 20, 0.09);
  transition: background-color 0.35s var(--kurve), box-shadow 0.35s;
}
.kopf--fest {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(22, 24, 20, 0.12);
}

.kopf__innen {
  position: relative; width: var(--spalte); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}

/* The logo is option B, the one-line arrangement, in the dark master
   colours copied by 'tools/build_logo.py'. The top bar is frosted white at
   every scroll position, so there is no second colour state to carry. */
.wortmarke {
  display: flex; align-items: center; margin-right: auto;
  text-decoration: none; flex: 0 1 auto; min-width: 0;
}
.wortmarke img { display: block; height: 42px; width: auto; }

.nav { display: flex; gap: 1.55rem; }
.nav a {
  font-size: 0.675rem; font-weight: 500; letter-spacing: 0.17em;
  text-transform: uppercase; color: rgba(22, 24, 20, 0.78);
  text-decoration: none; padding: 0.4rem 0; position: relative;
  transition: color 0.2s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-tinte); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--kurve);
}
.nav a:hover, .nav a[aria-current='true'] { color: var(--tinte); }
.nav a:hover::after, .nav a[aria-current='true']::after { transform: scaleX(1); }

/* The phone pill in the nav belongs to the mobile drawer. Left visible on
   wide screens it was white on white, because '.nav a' beats the text colour
   of '.pille--voll' on specificity. Measured 2026-10-02. */
.nav .pille { display: none; }

.pille {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.64rem 1.4rem; border-radius: 999px;
  font-size: 0.675rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; background: transparent;
  transition: background-color 0.22s, color 0.22s, border-color 0.22s;
  cursor: pointer; font-family: inherit;
}
.pille:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.pille--voll { background: #fff; color: var(--nacht); border-color: #fff; }
.pille--voll:hover { background: var(--gold); border-color: var(--gold); color: var(--nacht); }
.pille--tinte { border-color: rgba(22, 24, 20, 0.4); color: var(--tinte); }
.pille--tinte:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
/* On the light photo bands the pills wear ink; inside the dark enquiry card
   the white set stays, because the card still is night. */
.abschnitt--bild .pille { border-color: rgba(22, 24, 20, 0.4); color: var(--tinte); }
.abschnitt--bild .pille:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.abschnitt--bild .pille--voll { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.abschnitt--bild .pille--voll:hover { background: var(--gold-tinte); border-color: var(--gold-tinte); color: #fff; }
.anfrage-karte .pille { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.anfrage-karte .pille:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }
.anfrage-karte .pille--voll { background: #fff; color: var(--nacht); border-color: #fff; }
.anfrage-karte .pille--voll:hover { background: var(--gold); border-color: var(--gold); color: var(--nacht); }

.nav-schalter {
  display: none; width: 42px; height: 42px; margin-left: auto;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.nav-schalter span {
  display: block; width: 22px; height: 1.5px; background: var(--tinte); margin: 5px auto;
  transition: transform 0.3s var(--kurve), opacity 0.2s;
}
.nav-schalter[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-schalter[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-schalter[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ----------------------------------------------------------------- Bands */
.abschnitt { position: relative; isolation: isolate; }

.abschnitt--bild {
  min-height: 92svh;
  display: flex; align-items: flex-end;
  padding: calc(var(--leiste) + 4rem) 0 4.5rem;
  color: var(--tinte);
  overflow: hidden;
}
.abschnitt--hoch { min-height: 100svh; }

.abschnitt__bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* The hero photograph carries the house around 86% of its width. A centred
   cover crop loses it on portrait screens, so the crop window sits flush
   right; the lost left edge is empty meadow. On wide screens the image is
   not cropped sideways at all and this changes nothing. */
#willkommen .abschnitt__bild { object-position: 100% center; }
/* Each text block sits on a paper panel in the page's own card language —
   the Öffnungszeiten card, the price cards: translucent papier, hairline
   border, soft shadow, sharp corners. Legibility is photo-independent: the
   text stands on near-solid papier (ink around 15:1, the gold accents at
   their designed 5.1:1). Ian picked this over the glow on 2026-10-03. */
.abschnitt--bild .abschnitt__text {
  background: rgba(240, 237, 232, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(22, 24, 20, 0.1);
  box-shadow: 0 24px 60px rgba(8, 10, 8, 0.18);
  padding: 2.6rem 2.8rem 2.4rem;
  max-width: 46rem;
}

.abschnitt__innen { width: var(--spalte); margin-inline: auto; position: relative; }
.abschnitt__text { max-width: var(--text); }

.augenbraue {
  display: flex; align-items: baseline; gap: 0.95rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; margin-bottom: 1.5rem;
}
.augenbraue__zahl {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
  letter-spacing: 0.02em; color: var(--gold-tinte); line-height: 1;
}
.augenbraue__wort { opacity: 0.9; }

.titel {
  font-size: clamp(2.25rem, 5.6vw, 4.3rem);
  margin-bottom: 1.5rem;
}
.titel em {
  display: block; font-style: italic; font-weight: 400;
  color: var(--gold-tinte);
}

.anriss {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.62; max-width: 36rem;
  color: var(--tinte);
}
.abschnitt--papier .anriss { color: var(--tinte-weich); }

.regel { border: 0; border-top: 1px solid var(--linie-dunkel); margin: 2.6rem 0 1.1rem; max-width: 38rem; }

.regel-marke {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold-tinte); opacity: 1;
}

/* Figure row */
.zahlen { display: flex; flex-wrap: wrap; gap: 2.6rem 3.4rem; margin-top: 1.7rem; padding: 0; list-style: none; }
.zahlen div { font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 400; line-height: 1; }
.zahlen dt, .zahlen dd { margin: 0; }
.zahlen dd {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; margin-top: 0.7rem; opacity: 0.72;
}

/* ----------------------------------------------------------- Paper bands */
.abschnitt--papier { background: var(--papier); color: var(--tinte); padding: 6.5rem 0; }
.abschnitt--papier-tief { background: var(--papier-tief); }

.block { width: var(--spalte); margin-inline: auto; }

.platte {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--linie-dunkel);
  padding: 2rem 2.1rem;
  margin-top: 2.8rem;
  max-width: 44rem;
}

.platte h3, .unter h3 {
  font-size: 1.32rem; margin-bottom: 0.85rem;
}
.unter { margin-top: 3.2rem; }
.unter h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-bottom: 1rem; }

/* Lists */
.liste { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: 38rem; }
.liste li {
  position: relative; padding: 0.82rem 0 0.82rem 1.6rem;
  border-top: 1px solid var(--linie-hell);
  font-size: 1rem; line-height: 1.55;
}
.liste li:last-child { border-bottom: 1px solid var(--linie-dunkel); }
.liste li::before {
  content: ''; position: absolute; left: 0; top: 1.42em;
  width: 7px; height: 1px; background: var(--gold-tinte);
}

.liste--schlicht li { border: 0 !important; padding-block: 0.3rem; }

/* Dish list */
.gerichte { list-style: none; padding: 0; margin: 1.8rem 0 0; max-width: 40rem; }
.gerichte li {
  padding: 0.78rem 0; border-bottom: 1px solid var(--linie-dunkel);
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.4;
}

/* Price cards */
.karten { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.karte {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.17);
  padding: 1.6rem 1.5rem;
}
.abschnitt--papier .karte { background: rgba(255, 255, 255, 0.66); border-color: var(--linie-dunkel); }
.karte h4 { font-size: 1.28rem; margin-bottom: 0.4rem; }
.karte .zusatz { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.74; }
.karte .preis { font-family: var(--serif); font-size: 1.5rem; margin-top: 0.9rem; line-height: 1.3; }
.karte .preis small { display: block; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0; opacity: 0.8; }

.angebot { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid var(--linie-dunkel); }
.angebot:first-of-type { border-top: 0; padding-top: 0; }
.angebot h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.35rem; }
.angebot .dauer { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-tinte); font-weight: 600; margin-bottom: 1rem; }

/* Contained images */
.figur { margin: 2.8rem 0 0; }
.figur img { width: 100%; height: auto; }
.figur figcaption {
  font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.72; margin-top: 0.7rem;
}

.paar { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; margin-top: 2.8rem; }

/* Rooms: deliberately contained, because the sources stop near 1310 px */
.zimmer-raster {
  display: grid; gap: 0.85rem; margin-top: 2.6rem;
  /* Three fixed columns, not auto-fill: there are nine images, and 3 x 3
     leaves no orphan in the last row. One column on a phone. */
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 560px) {
  .zimmer-raster { grid-template-columns: 1fr; }
}
.zimmer-raster button {
  padding: 0; border: 0; background: none; cursor: zoom-in; display: block;
  position: relative; overflow: hidden; line-height: 0;
}
/* height: auto is not cosmetic here. The width and height attributes in the
   markup act as an author rule of lowest priority; with only width set in CSS,
   height from the attribute stands and aspect-ratio is never applied at all.
   Measured 2026-10-02: tiles came out 261 x 872 instead of 261 x 196. */
.zimmer-raster img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.55s var(--kurve), filter 0.4s;
}
.zimmer-raster button:hover img { transform: scale(1.035); filter: brightness(1.04); }

.hinweis {
  font-size: 0.84rem; line-height: 1.6; color: var(--tinte-weich);
  border-left: 2px solid var(--gold-tinte); padding-left: 1rem; margin-top: 2.2rem;
  max-width: 34rem;
}

/* ---------------------------------------------------------------- Lightbox */
.lichtkasten {
  position: fixed; inset: 0; z-index: 300; border: 0; padding: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  background: rgba(8, 10, 8, 0.95); color: #fff;
}
.lichtkasten::backdrop { background: rgba(8, 10, 8, 0.95); }
.lichtkasten__rahmen {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; padding: 3.5rem 1rem 2.5rem;
}
.lichtkasten img { max-width: min(94vw, 1200px); max-height: 76vh; width: auto; object-fit: contain; }
.lichtkasten__text { font-size: 0.86rem; text-align: center; max-width: 42rem; opacity: 0.88; }
.lichtkasten__zu, .lichtkasten__vor, .lichtkasten__zurueck {
  position: absolute; background: none; border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff; width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
}
.lichtkasten__zu { top: 1.1rem; right: 1.1rem; }
.lichtkasten__zurueck { left: 1.1rem; top: 50%; transform: translateY(-50%); }
.lichtkasten__vor { right: 1.1rem; top: 50%; transform: translateY(-50%); }
.lichtkasten__zu:hover, .lichtkasten__vor:hover, .lichtkasten__zurueck:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------------------------------------------------------------- Enquiry */
.anfrage-karte {
  background: rgba(10, 12, 10, 0.88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 2.2rem 2.1rem 2rem;
  max-width: 40rem; margin-top: 2.8rem;
}
.feldpaar { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.feld { margin-top: 1.1rem; }
.feld label, .feldpaar label {
  display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; margin-bottom: 0.45rem; color: rgba(255, 255, 255, 0.84);
}
.feld input, .feld textarea, .feld select, .feldpaar input {
  width: 100%; font: inherit; font-size: 0.97rem; color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 0; padding: 0.72rem 0.85rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus, .feldpaar input:focus {
  border-color: var(--gold); background: rgba(255, 255, 255, 0.11); outline: none;
}
.feld select option { background: var(--nacht); color: #fff; }
.pflicht { color: var(--gold); }

.feld--falle {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.absenden { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.absenden .pille { padding-inline: 2rem; }

.formular-meldung {
  margin-top: 1.2rem; padding: 0.9rem 1.1rem; font-size: 0.92rem; line-height: 1.5;
  border-left: 2px solid var(--gold); background: rgba(255, 255, 255, 0.07);
}
.formular-meldung[hidden] { display: none; }
.formular-meldung--fehler { border-left-color: #e2a19b; }

.anfrage-fuss { font-size: 0.82rem; opacity: 1; margin-top: 1.4rem; max-width: 34rem; }

/* ----------------------------------------------------------------- Footer */
.fuss { background: var(--nacht); color: rgba(255, 255, 255, 0.82); padding: 5rem 0 2.4rem; font-size: 0.94rem; }
.fuss__raster { width: var(--spalte); margin-inline: auto; display: grid; gap: 2.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.fuss h2 { font-size: 0.68rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.fuss a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.fuss a:hover { text-decoration-color: var(--gold); }
.fuss p { margin-bottom: 0.4rem; }
.fuss__betriebsferien { color: var(--gold); font-weight: 600; letter-spacing: 0.05em; }
.fuss__zeile {
  width: var(--spalte); margin: 3.2rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center;
  font-size: 0.8rem; opacity: 0.8;
}
.fuss__zeile .entwurf { margin-left: auto; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.66rem; opacity: 0.68; }
.fuss__cookies {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.fuss__cookies:hover { text-decoration-color: var(--gold); }

/* -------------------------------------------------------------- Consent */
/* Same ink and blur as the top bar; sits above the Zimmer lightbox (300). */
.einwilligung {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 400;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 1.5rem 1.6rem 1.6rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(22, 24, 20, 0.14); border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  color: var(--tinte-weich);
}
.einwilligung__titel { font-family: var(--serif); font-size: 1.3rem; color: var(--tinte); margin-bottom: 0.5rem; }
.einwilligung__text { font-size: 0.84rem; line-height: 1.55; margin-bottom: 1.1rem; }
.einwilligung__text a { color: var(--tinte); text-decoration-color: rgba(22, 24, 20, 0.3); text-underline-offset: 3px; }
.einwilligung__text a:hover { text-decoration-color: var(--gold-tinte); }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.einwilligung .pille { border-color: rgba(22, 24, 20, 0.4); color: var(--tinte); }
.einwilligung .pille:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* ------------------------------------------------------------ Legal pages */
.rechtsseite { padding: calc(var(--leiste) + 5rem) 0 5rem; background: var(--papier); }
.rechtsseite .block { max-width: 48rem; }
main.rechtsseite h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 2rem; }
main.rechtsseite h2 { font-size: 1.35rem; margin: 2.6rem 0 0.8rem; }
/* Scoped to 'main', not to the class alone. The class also sits on <body> of
   the legal pages, so the bare '.rechtsseite h1/h2/p' selectors reached the
   shared footer and set it a size larger there than on the homepage; at 860 px
   that pushed the page 7 px sideways. Measured 2026-10-02.
   The archived legal text also carries bare URLs, one of them 487 px wide,
   which pushed the page sideways at 390 px. Only words that do not fit break. */
main.rechtsseite p { font-size: 1rem; color: var(--tinte-weich); overflow-wrap: break-word; }
.rechtsseite .kopf { position: fixed; background: rgba(13, 15, 13, 0.95); }
.rechtsseite-adresse { font-family: var(--serif); font-size: 1.1rem; line-height: 1.7; color: var(--tinte); }

/* ------------------------------------------------------- Reveal on scroll */
.zeigen { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--kurve), transform 0.85s var(--kurve); }
.zeigen.ist-da { opacity: 1; transform: none; }
.zeigen:nth-child(2) { transition-delay: 0.08s; }
.zeigen:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigen { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .zimmer-raster button:hover img { transform: none; }
}

/* ------------------------------------------------------------- Narrow */
@media (max-width: 1080px) {
  .nav { gap: 1.1rem; }
  .nav a { font-size: 0.63rem; letter-spacing: 0.13em; }
}

@media (max-width: 860px) {
  :root { --leiste: 62px; --spalte: min(100% - 2rem, 1360px); }

  .nav-schalter { display: block; order: 3; }
  .wortmarke img { height: 36px; }

  .nav {
    position: fixed; inset: var(--leiste) 0 auto; flex-direction: column; gap: 0;
    background: rgba(255, 255, 255, 0.97); padding: 1rem 1.25rem 1.8rem;
    transform: translateY(-120%); transition: transform 0.4s var(--kurve);
    max-height: calc(100svh - var(--leiste)); overflow-y: auto;
  }
  .nav[data-offen='true'] { transform: none; }
  .nav a { font-size: 0.82rem; letter-spacing: 0.16em; padding: 0.95rem 0; border-bottom: 1px solid rgba(22, 24, 20, 0.1); }
  .nav a::after { display: none; }
  /* In the drawer it is the only route to the phone, so it is visible — and
     carries its own colour, or '.nav a' wins and it goes ink on white. */
  .nav .pille {
    display: inline-flex; margin-top: 1.2rem; border-bottom: 0;
    color: var(--papier); background: var(--tinte); border-color: var(--tinte);
  }

  .abschnitt--bild { min-height: 88svh; padding: calc(var(--leiste) + 3rem) 0 3.2rem; }
  .abschnitt--papier { padding: 4.2rem 0; }
  .abschnitt--bild .abschnitt__text { padding: 1.7rem 1.4rem 1.5rem; max-width: none; }
  .feldpaar { grid-template-columns: 1fr; }
  .zahlen { gap: 1.8rem 2.2rem; }
  .anfrage-karte { padding: 1.5rem 1.25rem 1.4rem; }
  .fuss__zeile .entwurf { margin-left: 0; width: 100%; }
}

@media (max-width: 420px) {
  body { font-size: 1rem; }
  /* 30 px keeps the whole logo, burger and gutters inside 320 px. */
  .wortmarke img { height: 30px; }
}

@media print {
  .kopf, .nav, .lichtkasten, .anfrage-karte, .einwilligung, .fuss__cookies { display: none !important; }
  .abschnitt--bild { min-height: 0; color: #000; padding: 1.5rem 0; }
  .abschnitt__bild { display: none; }
  body { background: #fff; }
}

/* ------------------------------------------------- Multi-page variant */
/* Subpages open on a shorter photo band than the start page. */
.abschnitt--kopfseite { min-height: 58svh; }
.karte .absenden { margin-top: 1.1rem; }

/* The three teaser cards on the start page open with a photo that runs to the
   panel edge, so the negative margin has to match .karte's padding exactly.
   The sizes attribute in the markup follows the measured column breakpoints of
   .karten: one card up to 564px, two to 841px, three above, and a fixed 440px
   once --spalte caps at 1360px.
   height: auto is not cosmetic: the width and height attributes in the markup
   act as an author rule of lowest priority, and with only width set in CSS the
   attribute height stands and aspect-ratio is never applied. */
.karte__bild { display: block; margin: -1.6rem -1.5rem 1.3rem; line-height: 0; }
.karte__bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 17 / 10; object-fit: cover; object-position: center;
}

/* ----------------------------------------------------------- Galleries */
/* The live site closes /freizeit and /ferienwohnungen with a tile gallery.
   Square tiles, because the sources are a mix of upright and landscape and a
   common ratio is the only way the grid reads as one block.
   The column count is fixed per breakpoint rather than auto-fill, so the
   sizes attribute in the markup can name the real tile width instead of
   guessing: 2 columns to 720px, 3 to 1099px, 4 above. Measured against
   --galerie, not --spalte: the gallery keeps the narrower measure the live
   page uses, so the tiles stay thumbnails and do not out-shout the text. */
/* Its own measure, narrower than --spalte: the live galleries sit in a
   centred column about 830px wide, and heading and grid have to share one
   left edge or the block reads as two pieces. */
.galerie-block { width: min(100% - 2.5rem, 56rem); margin-inline: auto; }

.galerie {
  display: grid; gap: 0.85rem; grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
}
@media (max-width: 1099px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .galerie { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } }

/* button normally; site.js falls back to span where <dialog> is unsupported. */
.galerie > * {
  padding: 0; border: 0; background: none; display: block;
  position: relative; overflow: hidden; line-height: 0;
}
.galerie button { cursor: zoom-in; }
/* height: auto for the same reason as .zimmer-raster: the width and height
   attributes are an author rule of lowest priority, and without it they
   survive and aspect-ratio never applies. */
.galerie img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 0.55s var(--kurve), filter 0.4s;
}
.galerie button:hover img { transform: scale(1.04); filter: brightness(1.04); }

/* ------------------------------------------------------------- Approach */
/* The live pages embed Google Maps here. That iframe reaches Google before
   the visitor clicks anything, and the archived Datenschutz covers Analytics
   only, so this is a self-hosted aerial instead: nothing leaves the server
   on load, and Google is opened only by the route button.
   The image keeps its own 3:2 ratio — never object-fit: cover — because the
   pin is placed in per cent and a per cent only lands right while the
   displayed box keeps the rendered ratio. */
.anfahrt { position: relative; margin: 2.2rem 0 0; }
/* The pin is anchored to the picture box, never to .anfahrt: below 721px the
   panel joins the normal flow and .anfahrt grows taller than the image, so a
   50% measured against .anfahrt would drift off the house. */
.anfahrt__bildfeld { position: relative; line-height: 0; }
.anfahrt__bild {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linie-dunkel);
}
.anfahrt__marke {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border-radius: 999px;
  background: #b4402f; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 9px rgba(0, 0, 0, 0.45);
}
.anfahrt__tafel {
  background: var(--papier); border: 1px solid var(--linie-dunkel);
  padding: 1.15rem 1.3rem; margin-top: 0.85rem;
}
.anfahrt__tafel h3 { font-size: 1.22rem; margin-bottom: 0.3rem; }
.anfahrt__tafel p { font-size: 0.95rem; color: var(--tinte-weich); }
.anfahrt__tafel .absenden { margin-top: 1rem; }
.anfahrt__quelle {
  font-size: 0.74rem; line-height: 1.5; color: var(--tinte-weich);
  margin-top: 0.7rem; max-width: 40rem;
}
/* Above 720px the panel sits on the aerial the way the live pop-up does.
   It is opaque paper, not a wash, so the text keeps the page's own contrast
   over whatever the photograph happens to be doing underneath. */
@media (min-width: 721px) {
  .anfahrt__tafel {
    position: absolute; left: 1.6rem; top: 1.6rem;
    max-width: 19rem; margin-top: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .galerie button:hover img { transform: none; }
}
@media print {
  .galerie, .anfahrt__marke { display: none !important; }
}

/* Instagram links use the surrounding navigation and footer colours. */
.instagram { display: inline-flex; align-items: center; gap: 0.6rem; }
.instagram svg { flex: none; }
.nav .instagram { align-self: center; padding: 0.4rem; }
.nav .instagram__name { display: none; }
.instagram:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 860px) {
  .nav .instagram { align-self: stretch; padding: 0.95rem 0; }
  .nav .instagram__name { display: inline; }
}

/* ------------------------------------------------- Halbpension menu cards */
/* Each menu reads as a small printed card: Vorspeise, Hauptgang, Dessert as
   separate zones with air between, the alternative dish inside the Hauptgang
   zone. Course labels and the menu number come from CSS, not markup, so the
   live text lines stay verbatim for pruefen_texte.py (card 1 keeps the live
   dash between soup and main course in a visually hidden span). */
.menues {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem;
  margin-top: 2.2rem; counter-reset: menue;
}
.menue {
  flex: 1 1 min(21rem, 100%); max-width: 26rem; min-width: 0;
  counter-increment: menue;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--linie-dunkel);
  outline: 1px solid rgba(126, 95, 40, 0.38); outline-offset: -9px;
  padding: 2.4rem 1.9rem 2.2rem;
  text-align: center;
}
.menue::before {
  content: 'Menü ' counter(menue);
  display: block; margin-bottom: 1.5rem;
  font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2;
  color: var(--tinte);
}
.menue__gang { position: relative; }
.menue__gang + .menue__gang { margin-top: 1.5rem; padding-top: 1.6rem; }
/* A short gold rule with a small diamond between the courses. */
.menue__gang + .menue__gang::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 7px; height: 7px; margin: -3px 0 0 -3.5px;
  background: var(--gold-tinte); transform: rotate(45deg);
}
.menue__gang + .menue__gang::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 6.5rem; margin-left: -3.25rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 95, 40, 0.55) 30%, rgba(126, 95, 40, 0.55) 70%, transparent);
}
.menue__gang > p:first-child::before {
  display: block; margin-bottom: 0.45rem;
  font-family: var(--sans); font-style: normal; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-tinte);
}
.menue__gang--vor > p:first-child::before { content: 'Vorspeise'; }
.menue__gang--haupt > p:first-child::before { content: 'Hauptgang'; }
.menue__gang--dessert > p:first-child::before { content: 'Dessert'; }
.menue p {
  margin: 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.45;
  color: var(--tinte); text-wrap: balance;
}
.menue__oder > span {
  display: block; margin: 0.5rem 0 0.35rem;
  font-style: italic; font-size: 0.95rem; color: var(--tinte-weich);
}
.menue__alt {
  margin-top: 1.1rem !important; padding: 0.8rem 0.9rem;
  background: rgba(228, 223, 214, 0.55);
  font-size: 1rem !important; font-style: italic;
}
.menue__alt > span {
  display: block; margin-bottom: 0.2rem;
  font-family: var(--sans); font-style: normal; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-tinte);
}
.menue__still {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 560px) {
  .menue { padding: 2rem 1.3rem 1.8rem; }
}

/* Speisekarte: the sample dishes use the same printed-card language as the menus. */
.speisekarte__titel { font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.15; }
.speisekarte__intro { max-width: 42rem; margin-top: 0.8rem; color: var(--tinte-weich); }
.speisen { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.speise { min-width: 0; min-height: 9.5rem; padding: 1.7rem 1.6rem; background: rgba(255,255,255,.72); border: 1px solid var(--linie-dunkel); outline: 1px solid rgba(126,95,40,.38); outline-offset: -9px; display: flex; flex-direction: column; justify-content: center; gap: .7rem; text-align: center; }
.speise__nummer { color: var(--gold-tinte); font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .2em; }
.speise__name { color: var(--tinte); font-family: var(--serif); font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.4; text-wrap: balance; }
.speisekarte__hinweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.3rem; }
.speisekarte__hinweise .platte { max-width: none; margin: 0; }
@media (max-width: 680px) { .speisen, .speisekarte__hinweise { grid-template-columns: 1fr; } .speise { min-height: 7.5rem; } }