/* ==========================================================================
   Lokale Schriften - frueher via Google Fonts geladen, jetzt aus /fonts/
   Identische woff2-Dateien und Angaben wie von Google ausgeliefert
   (Subsets: latin + latin-ext).
   ========================================================================== */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/playfair-display-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/playfair-display-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../../../fonts/playfair-display-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../../../fonts/playfair-display-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../../../fonts/playfair-display-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../../../fonts/playfair-display-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/instrument-sans-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/instrument-sans-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../../../fonts/instrument-sans-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../../../fonts/instrument-sans-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/ibm-plex-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/ibm-plex-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../../../fonts/ibm-plex-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../../../fonts/ibm-plex-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Landhotel Kranzhof - Demo von Meiers Seiten
   Farbwelt: Bergnebel (kuehles Hellgrau mit Gruenstich), Tannengruen, Seeblau
   Schriften: Playfair Display (Headlines) + Instrument Sans (Fliesstext)
              + IBM Plex Mono (Preise, Zahlen, Labels)
   Haltung: helles Haus bei Tageslicht. Der Grundton ist bewusst kuehl und
            nicht creme - Creme tragen die uebrigen Demos schon. Die Farbe
            kommt aus zwei Baendern: Tannengruen haelt Kopf, Fuss und den
            Kuechenabschnitt, Seeblau traegt Akzente und das Anfrage-Band.
   Navigation: ab 1100px steht das Menue als feste Spalte links (Abschnitt 5).
            Darunter faehrt es als Schublade von links herein. Der gruene
            Streifen links und der gruene Seitenkopf der Unterseiten bilden
            zusammen einen Rahmen um das helle Blatt.
   Bewusst anders als die uebrigen Demos: dort helle Karten und Raster, hier
   breite Farbbaender und Zeilen, die wie ein Gaestebuch untereinander stehen.
   ========================================================================== */

/* --------------------------------------------------- 1. Tokens ----------- */
/* Drei Ebenen: primitiv -> semantisch -> Komponente                         */

:root {
  /* --- 1.1 Primitive ----------------------------------------------------- */
  /* Bergnebel: helle, kuehle Familie - Seitengrund, Flaechen, Linien */
  --fog-50: #f4f8f7;
  --fog-100: #e9f1ef;
  --fog-200: #d7e4e1;
  --fog-300: #b9cbc7;

  /* Tanne: Text, Kopf, Fuss, Waldband */
  --spruce-900: #0f2f27;
  --spruce-800: #16453a;
  --spruce-700: #1d5a4a;
  --spruce-500: #4d6a63; /* Sekundaertext auf hellem Grund */
  --spruce-300: #9cb8b0; /* Sekundaertext auf dunklem Gruen */

  /* See: Akzent, Anfrage-Band */
  --lake-800: #0f4260;
  --lake-700: #17607f; /* Hauptakzent auf hellem Grund */
  --lake-600: #1f7ba0;
  --lake-300: #93c8dd; /* Akzent auf dunklem Grund */
  --lake-100: #e0eff5; /* Fuellung fuer Hinweise und Hover */

  --rowan-600: #b0402c; /* nur fuer Hinweise und Fehler */
  --rowan-050: #fbeae5;

  --line: rgba(15, 47, 39, 0.16);
  --line-soft: rgba(15, 47, 39, 0.08);
  /* Linien auf den dunklen Baendern - Kopf, Fuss, Wald, Anfrage */
  --line-light: rgba(244, 248, 247, 0.22);
  --line-light-soft: rgba(244, 248, 247, 0.12);

  /* --- 1.2 Semantisch ---------------------------------------------------- */
  --bg: var(--fog-50);
  --bg-alt: var(--fog-100);
  --surface: #ffffff;
  --text: var(--spruce-900);
  --text-muted: var(--spruce-500);
  --accent: var(--lake-700);
  --accent-soft: var(--lake-100);
  --band: var(--spruce-800); /* Waldband */
  --band-deep: var(--lake-800); /* Anfrage-Band */
  --border: var(--line);
  --on-dark: var(--fog-50);
  --on-dark-muted: rgba(244, 248, 247, 0.78);

  /* --- 1.3 Komponente ---------------------------------------------------- */
  --btn-primary-bg: var(--spruce-700);
  --btn-primary-fg: #ffffff;
  --btn-ghost-border: var(--border);
  --radius: 3px;

  /* --- 1.4 Schriften ----------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  /* Zahlen, Preise und Kleinlabels. Die Schreibmaschine haelt Preisspalten
     sauber untereinander und gibt dem Haus etwas Handfestes.               */
  --font-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* --- 1.5 Raster und Abstaende ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;

  --container: 1140px;
  --measure: 660px;
  --nav-h: 80px;
  /* Breite der festen Menuespalte ab 1100px */
  --sidebar-w: 262px;

  /* --- 1.6 Bildmarke ------------------------------------------------------ */
  /* Dieselbe Zeichnung wie img/logo-mark.svg, hier als Data-URI. Als Maske
     eingesetzt nimmt sie die Textfarbe an und funktioniert damit im gruenen
     Kopf, im hellen Abschnitt und als Wasserzeichen im Fuss. Eine externe
     SVG-Datei waere als Maske beim oeffnen per Dateipfad blockiert - die
     Marke wuerde dann nur auf dem Server erscheinen, nicht beim Ansehen
     der Datei. Die Datei selbst bleibt fuer das Favicon.                   */
  --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='28'/%3E%3Ccircle cx='32' cy='32' r='24.5' stroke-width='1.4'/%3E%3Cpath d='M14 44h36'/%3E%3Cpath d='M15 36 23.5 28.5 32 36'/%3E%3Cpath d='M18 36v8M29 36v8'/%3E%3Cpath d='M21.5 44v-5.5h4V44'/%3E%3Cpath d='M37 32 41 27 45 32M35.5 37.5 41 31.5 46.5 37.5M34 43 41 35.5 48 43'/%3E%3C/svg%3E");

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------- 2. Basis ------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
}
h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
}
h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}
h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

::selection {
  background: var(--accent);
  color: #ffffff;
}

/* --------------------------------------------------- 3. Hilfsklassen ----- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--narrow {
  max-width: calc(var(--measure) + var(--space-5) * 2);
}

.measure {
  max-width: var(--measure);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #ffffff;
  padding: 14px 22px;
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.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;
}

.section {
  padding: clamp(68px, 10vw, 132px) 0;
  position: relative;
}
.section--tight {
  padding: clamp(44px, 6vw, 80px) 0;
}
.section--sand {
  background: var(--bg-alt);
}
.section--surface {
  background: var(--surface);
}

.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head p {
  color: var(--text-muted);
}

/* Kleinlabel ueber der Ueberschrift. Doppelstrich als Zitat der
   Doppellinien, die sich durch die ganze Seite ziehen. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  flex: 0 0 auto;
}
.section-head--center .eyebrow {
  justify-content: center;
}

.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  line-height: 1.65;
  color: var(--text-muted);
}

/* Doppellinie als Trenner - das traditionelle Pendant zum Schatten */
.rule-double {
  height: 4px;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--space-5);
}

/* --------------------------------------------------- 4. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease);
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
.btn--primary:hover {
  background: var(--spruce-900);
  border-color: var(--spruce-900);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--accent);
  transition: gap 0.22s var(--ease), border-color 0.22s var(--ease);
}
.link:hover {
  gap: 15px;
  border-color: var(--text);
}
.link svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* --------------------------------------------------- 5. Menuespalte ------ */
/* Ab 1100px steht das Menue als feste Spalte links neben dem Inhalt. Ein
   Landhaus hat wenige, dafuer bleibende Wege - eine stehende Liste zeigt
   alle fuenf Seiten dauerhaft, statt sie in einer Zeile zu verstecken.
   Darunter wird dieselbe Spalte zur Schublade, die von links hereinfaehrt. */

.site-header {
  position: sticky;
  top: 0;
  /* ueber der Schublade, damit der Schliessen-Knopf erreichbar bleibt */
  z-index: 130;
  /* Deckend statt durchscheinend mit Weichzeichner: ein backdrop-filter
     wuerde den Kopf zum Bezugsrahmen fuer die Schublade machen, und die
     bliebe dann auf die Hoehe der Kopfleiste eingesperrt.                 */
  background: var(--spruce-900);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-light-soft);
}
.site-header :focus-visible {
  outline-color: var(--fog-50);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--nav-h);
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
/* Die Bildmarke wird als Maske eingefaerbt - eine SVG-Datei fuer Kopf,
   Wasserzeichen und Favicon, und sie nimmt ueberall die Textfarbe an. */
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--logo-mask) no-repeat center / contain;
  mask: var(--logo-mask) no-repeat center / contain;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spruce-300);
  margin-top: 5px;
}

/* Schublade bis 1099px. Sie beginnt unter der Kopfleiste, damit Marke und
   Schliessen-Knopf sichtbar bleiben, solange sie offen steht.             */
.main-nav {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  z-index: 120;
  width: min(330px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--spruce-900);
  border-right: 1px solid var(--line-light-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.32s var(--ease), visibility 0.32s var(--ease);
}
.main-nav.is-open {
  visibility: visible;
  transform: none;
}

.main-nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 1.02rem;
  color: var(--on-dark-muted);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light-soft);
  transition: color 0.2s var(--ease);
}
.main-nav a:hover {
  color: var(--fog-50);
}
.main-nav a[aria-current="page"] {
  color: var(--fog-50);
  font-weight: 500;
}
/* Laufende Nummer wie in einem Inhaltsverzeichnis */
.nav-index {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--spruce-300);
}
.main-nav a[aria-current="page"] .nav-index {
  color: var(--lake-300);
}

/* Fuss der Spalte: Anfragen und die Nummer, die man ohnehin sucht */
.nav-foot {
  margin-top: auto;
  padding-top: var(--space-5);
}
.nav-foot .btn {
  width: 100%;
}
.nav-contact {
  margin: var(--space-4) 0 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--on-dark-muted);
}
.nav-contact a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-light);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-contact a:hover {
  color: var(--fog-50);
  border-bottom-color: var(--lake-300);
}

/* Abdunklung hinter der Schublade, per Skript eingehaengt */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(8, 26, 21, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease);
}
.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Seite steht still, solange die Schublade offen ist */
body.nav-open {
  overflow: hidden;
}

/* Der Anfragen-Knopf sitzt auf dem gruenen Band und muss deshalb hell sein */
.site-header .btn--primary {
  background: var(--fog-50);
  color: var(--spruce-900);
  border-color: var(--fog-50);
}
.site-header .btn--primary:hover {
  background: #ffffff;
  border-color: #ffffff;
}

.nav-toggle {
  display: flex;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-light);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--fog-50);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: background-color 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Ab hier steht die Spalte fest links, der Inhalt rueckt nach rechts */
@media (min-width: 1100px) {
  body {
    padding-left: var(--sidebar-w);
  }
  html {
    scroll-padding-top: var(--space-4);
  }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    border-bottom: 0;
    border-right: 1px solid var(--line-light-soft);
    overflow-y: auto;
  }
  .nav-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 100%;
    padding: var(--space-5) var(--space-4);
  }
  .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-right: 0;
  }
  .brand-mark {
    width: 52px;
    height: 52px;
  }
  .nav-toggle {
    display: none;
  }
  .main-nav {
    position: static;
    width: auto;
    padding: 0;
    /* nimmt die Resthoehe, damit der Anfragen-Knopf unten stehen bleibt */
    flex: 1 1 auto;
    margin-top: var(--space-6);
    background: transparent;
    border-right: 0;
    overflow: visible;
    visibility: visible;
    transform: none;
    /* sonst faehrt die Spalte beim Ueberschreiten der 1100px herein */
    transition: none;
  }
  .main-nav a:first-child {
    border-top: 1px solid var(--line-light-soft);
  }
  .nav-backdrop {
    display: none;
  }
  /* Ohne Kopfleiste darf der Hero die volle Fensterhoehe nehmen */
  .hero {
    min-height: clamp(430px, 100vh, 780px);
    min-height: clamp(430px, 100svh, 780px);
  }
}

/* --------------------------------------------------- 6. Hero ------------- */
/* Breites Bildband statt Textspalte plus Bild: ein Haus verkauft sich ueber
   die Ansicht, nicht ueber die Ueberschrift.                               */

/* Bild und Text liegen in derselben Rasterzelle uebereinander. Damit waechst
   der Hero mit, wenn der Text laenger ist als das Bild hoch - mit absoluter
   Positionierung lief die Schrift auf schmalen Handys unten heraus. */
.hero {
  display: grid;
  grid-template-areas: "stack";
  /* Haus und Text sollen zusammen im ersten Bildschirm stehen: der Hero ist
     nie hoeher als das Fenster abzueglich Kopfleiste. svh statt vh, sonst
     rechnet der mobile Browser die eingeblendete Adressleiste nicht mit. */
  min-height: clamp(430px, calc(100vh - var(--nav-h)), 720px);
  min-height: clamp(430px, calc(100svh - var(--nav-h)), 720px);
}
.hero-media,
.hero-inner {
  grid-area: stack;
}
.hero-media {
  position: relative;
  margin: 0;
}
/* Der Bildausschnitt ist auf das Haus gelegt: es steht im rechten Drittel
   und bleibt dort frei, waehrend der Text links liegt. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 58%;
}
/* Verlauf nur nach links, damit die rechte Seite mit dem Haus hell bleibt */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      rgba(11, 36, 30, 0.9) 0%,
      rgba(11, 36, 30, 0.72) 26%,
      rgba(11, 36, 30, 0.3) 50%,
      rgba(11, 36, 30, 0) 72%
    ),
    linear-gradient(to top, rgba(11, 36, 30, 0.4) 0%, rgba(11, 36, 30, 0) 40%);
}

.hero-inner {
  /* Ein Satz Farbtoken fuer den Hero: auf dem Bild hell, unter dem Bild
     (Handyansicht, Abschnitt 23) dunkel - ohne jede Regel zu doppeln. */
  --hero-fg: var(--fog-50);
  --hero-fg-muted: var(--fog-200);
  --hero-eyebrow: var(--lake-300);
  --hero-btn-bg: var(--fog-50);
  --hero-btn-fg: var(--spruce-900);
  --hero-btn-bg-hover: #ffffff;
  --hero-ghost-border: rgba(244, 248, 247, 0.5);
  --hero-ghost-border-hover: var(--fog-50);

  position: relative;
  align-self: center;
  padding: clamp(28px, 4.5vw, 56px) 0;
  color: var(--hero-fg);
}
.hero-inner h1 {
  color: var(--hero-fg);
  font-size: clamp(2.1rem, 3.7vw, 3.5rem);
  max-width: 10ch;
  margin-bottom: var(--space-4);
}
.hero-inner .eyebrow {
  color: var(--hero-eyebrow);
}
.hero-inner .lead {
  color: var(--hero-fg-muted);
  max-width: 34ch;
}
.hero-inner .btn--ghost {
  color: var(--hero-fg);
  border-color: var(--hero-ghost-border);
}
.hero-inner .btn--ghost:hover {
  background: transparent;
  border-color: var(--hero-ghost-border-hover);
}
.hero-inner .btn--primary {
  background: var(--hero-btn-bg);
  color: var(--hero-btn-fg);
  border-color: var(--hero-btn-bg);
}
.hero-inner .btn--primary:hover {
  background: var(--hero-btn-bg-hover);
  border-color: var(--hero-btn-bg-hover);
}
.hero-inner :focus-visible {
  outline-color: var(--hero-fg);
}

/* Zahlenleiste direkt unter dem Bild: Preis, Fruehstueck, Anreise.
   Nur oben Luft - den Abstand nach unten liefert der naechste Abschnitt. */
.hero-facts-wrap {
  padding-top: clamp(28px, 4vw, 48px);
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}
.hero-facts div {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-right: 1px solid var(--border);
}
.hero-facts div:last-child {
  border-right: 0;
}
.hero-facts div:not(:first-child) {
  padding-left: var(--space-4);
}
.hero-facts dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.hero-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Seitenkopf der Unterseiten. Frueher stand hier Text auf weissem Grund -
   die Seiten fingen dadurch aus dem Nichts an. Jetzt traegt ein gruenes
   Band mit der Bildmarke den Anfang, wie beim Hero der Startseite, nur
   ruhiger und ohne Foto.                                                   */
.page-head {
  background: var(--spruce-800);
  color: var(--fog-100);
  padding: clamp(52px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
}
.page-head h1 {
  max-width: 16ch;
  margin-bottom: var(--space-4);
  color: var(--fog-50);
}
.page-head .eyebrow {
  color: var(--lake-300);
}
.page-head .lead {
  max-width: 54ch;
  color: var(--on-dark-muted);
}
/* Drei Eckdaten der jeweiligen Seite, damit der Kopf etwas zu sagen hat */
.page-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-light);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--fog-200);
}
.page-facts li {
  padding-right: var(--space-4);
  margin-right: var(--space-4);
  border-right: 1px solid var(--line-light);
}
.page-facts li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

/* Bildmarke als Wasserzeichen im Hintergrund eines Bandes. Die SVG-Datei
   dient dabei als Maske, deshalb nimmt das Zeichen die Textfarbe des
   Bandes an und funktioniert auf hellem wie auf dunklem Grund.            */
.mark-bg {
  position: relative;
  overflow: hidden;
}
.mark-bg > * {
  position: relative;
  z-index: 1;
}
.mark-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--mark-right, -4%);
  width: var(--mark-size, 400px);
  height: var(--mark-size, 400px);
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--logo-mask) no-repeat center / contain;
  mask: var(--logo-mask) no-repeat center / contain;
  opacity: var(--mark-opacity, 0.07);
  pointer-events: none;
}
/* Ohne Maskenunterstuetzung bliebe je ein farbiges Rechteck stehen */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .mark-bg::before,
  .brand-mark {
    display: none;
  }
}

/* --------------------------------------------------- 7. Split ------------ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.split-figure {
  margin: 0;
}
.split-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split--portrait .split-figure img {
  aspect-ratio: 4 / 5;
}
.split--reverse .split-figure {
  order: 2;
}
.split-figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* --------------------------------------------------- 8. Zimmerzeilen ----- */
/* Zeilen statt Karten: Gaeste vergleichen Zimmer, und vergleichen faellt
   leichter, wenn Preise in einer Spalte untereinander stehen.              */

.rooms {
  border-top: 1px solid var(--spruce-900);
}
.room {
  display: grid;
  grid-template-columns: 300px 1fr 190px;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.room-figure {
  margin: 0;
}
.room-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.room h3 {
  margin-bottom: var(--space-2);
}
.room p {
  color: var(--text-muted);
  max-width: 52ch;
}
.room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.room-tags li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.room-tags li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent);
  flex: 0 0 auto;
}
.room-price {
  text-align: right;
}
.room-price .amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.room-price .unit {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.room-price .btn {
  margin-top: var(--space-4);
  width: 100%;
}

/* --------------------------------------------------- 9. Waldband --------- */
/* Farbiger Abschnitt, der die Seite einmal beruhigt. Nur einmal je Seite. */

.band {
  background: var(--band);
  color: var(--fog-100);
}
.band h2,
.band h3 {
  color: var(--fog-50);
}
.band p {
  color: var(--on-dark-muted);
}
.band .eyebrow {
  color: var(--lake-300);
}
.band .link {
  color: var(--fog-50);
  border-bottom-color: var(--lake-300);
}
.band .link:hover {
  border-bottom-color: var(--fog-50);
}
.band :focus-visible {
  outline-color: var(--fog-50);
}
.band .btn--ghost {
  color: var(--fog-50);
  border-color: var(--line-light);
}
.band .btn--ghost:hover {
  background: transparent;
  border-color: var(--fog-50);
}
.band .btn--primary {
  background: var(--fog-50);
  color: var(--spruce-900);
  border-color: var(--fog-50);
}
.band .btn--primary:hover {
  background: #fff;
  border-color: #fff;
}
.band .rule-double {
  border-color: var(--line-light);
}

/* --------------------------------------------------- 10. Bildkacheln ----- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.tile {
  margin: 0;
  position: relative;
}
.tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Die mittlere Kachel steht bewusst tiefer - ein Raster, das nicht wie ein
   Baukasten wirkt. Ab Tablet abgeschaltet.                                 */
.tiles .tile:nth-child(2) {
  margin-top: var(--space-6);
}
.tile figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* --------------------------------------------------- 11. Speisefolge ----- */

.menu-list {
  max-width: 760px;
}
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.menu-item h3 {
  font-size: 1.25rem;
  margin: 0;
}
.menu-item p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.97rem;
  max-width: 58ch;
}
.menu-item .price {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* --------------------------------------------------- 12. Ablauf ---------- */

.steps {
  border-top: 1px solid var(--border);
}
.step {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(20px, 3vw, 56px);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.step-time {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding-top: 4px;
}
.step h3 {
  margin-bottom: var(--space-2);
}
.step p {
  color: var(--text-muted);
  max-width: 58ch;
}

/* --------------------------------------------------- 13. Fakten ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.fact {
  padding-top: var(--space-4);
  border-top: 1px solid var(--spruce-900);
}
.fact p {
  font-size: 0.97rem;
  color: var(--text-muted);
}
.fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- 14. Listen ---------- */

.checklist {
  display: grid;
  gap: var(--space-2);
}
.checklist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--text-muted);
}
.checklist li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  flex: 0 0 auto;
  transform: translateY(-3px);
}
/* Zweispaltig, wenn die Liste ohne Bild ueber die volle Breite laeuft */
.checklist--two {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
}

.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.columns--two {
  grid-template-columns: repeat(2, 1fr);
}
.column {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-right: 1px solid var(--border);
}
.column:last-child {
  border-right: 0;
  padding-right: 0;
}
.column:not(:first-child) {
  padding-left: var(--space-5);
}
.column-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.column h3 {
  margin-bottom: var(--space-3);
}
.column p {
  color: var(--text-muted);
  font-size: 0.97rem;
}

/* --------------------------------------------------- 15. Tabellen -------- */

/* Sicherung: sollte eine Zeile doch einmal zu breit werden, scrollt die
   Tabelle in ihrem eigenen Kasten, statt am Seitenrand abgeschnitten zu
   werden - body hat overflow-x: hidden und wuerde den Ueberlauf stumm
   verschlucken.                                                          */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--space-4) var(--space-3) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  vertical-align: top;
}
.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--space-3);
  border-bottom-color: var(--spruce-900);
}
/* Zahlenspalten durchgehend rechtsbuendig und in der Schreibmaschine -
   sonst steht eine Preisspalte links und die naechste rechts. */
.data-table td {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  text-align: right;
}
.data-table thead th:not(:first-child) {
  text-align: right;
}
.data-table td:last-child,
.data-table thead th:last-child {
  padding-right: 0;
}

/* --------------------------------------------------- 16. Zitat ----------- */

.quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-style: italic;
  line-height: 1.4;
}
.quote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------- 17. Hinweise -------- */

.note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  font-size: 0.95rem;
}
.note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--accent);
}
.note--alert {
  background: var(--rowan-050);
  border-left-color: var(--rowan-600);
}
.note--alert svg {
  color: var(--rowan-600);
}
.note p {
  margin: 0;
}

/* --------------------------------------------------- 18. FAQ ------------- */

.faq {
  max-width: 820px;
  border-top: 1px solid var(--border);
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--accent);
}
.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(225deg) translate(-3px, -3px);
}
.faq details p {
  padding: 0 0 var(--space-4);
  max-width: 62ch;
  color: var(--text-muted);
}

/* --------------------------------------------------- 19. CTA-Band -------- */

/* Das zweite Farbband: Seeblau als Gegenstueck zum Tannengruen der Kueche */
.cta-band {
  background: var(--band-deep);
  color: var(--fog-100);
  padding: clamp(44px, 7vw, 88px) clamp(24px, 5vw, 72px);
  text-align: center;
}
.cta-band h2 {
  color: var(--fog-50);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-band p {
  color: var(--on-dark-muted);
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-band .btn-row {
  justify-content: center;
}
.cta-band .btn--primary {
  background: var(--fog-50);
  color: var(--lake-800);
  border-color: var(--fog-50);
}
.cta-band .btn--primary:hover {
  background: #fff;
  border-color: #fff;
}
.cta-band .btn--ghost {
  color: var(--fog-50);
  border-color: var(--line-light);
}
.cta-band .btn--ghost:hover {
  background: transparent;
  border-color: var(--fog-50);
}
.cta-band :focus-visible {
  outline-color: var(--fog-50);
}

/* --------------------------------------------------- 20. Formular -------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.field {
  display: grid;
  gap: var(--space-2);
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .req {
  color: var(--rowan-600);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease);
}
.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--lake-600);
}
.field .hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.consent-field {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.consent-row input {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.error {
  display: none;
  font-size: 0.85rem;
  color: var(--rowan-600);
}
.has-error .error {
  display: block;
}
.has-error input,
.has-error select,
.has-error textarea {
  border-color: var(--rowan-600);
}

.form-success {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}
.form-success.is-visible {
  display: block;
}

.contact-aside {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.contact-block h4 {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--spruce-900);
}
.contact-block p {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
}
.contact-block a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.contact-block a:hover {
  border-color: var(--text);
}
.contact-hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- 21. Fusszeile ------- */

/* Die Fusszeile ist das Gegenstueck zum Kopf: dasselbe Tannengruen, damit
   das helle Blatt oben und unten sauber abschliesst.                       */
.site-footer {
  background: var(--spruce-900);
  color: var(--fog-100);
  padding: clamp(52px, 7vw, 88px) 0 var(--space-5);
  font-size: 0.94rem;
  /* grosses Wasserzeichen, das rechts aus dem Bild laeuft */
  --mark-size: 460px;
  --mark-right: -7%;
  --mark-opacity: 0.06;
}
/* Auf hellem Grund traegt das Zeichen die dunkle Textfarbe und muss
   deshalb schwaecher stehen als auf den gruenen Baendern. */
.section--sand.mark-bg,
.section--surface.mark-bg {
  --mark-opacity: 0.05;
}
.site-footer h4 {
  color: var(--spruce-300);
}
.site-footer :focus-visible {
  outline-color: var(--fog-50);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: var(--space-6);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.site-footer p {
  color: var(--on-dark-muted);
  margin-bottom: var(--space-3);
}
.site-footer a {
  color: var(--on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-footer a:hover {
  color: var(--fog-50);
  border-bottom-color: var(--lake-300);
}
.footer-links li {
  margin-bottom: var(--space-2);
}
.footer-hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--line-light-soft);
  color: var(--on-dark-muted);
  font-variant-numeric: tabular-nums;
}

.demo-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-light);
  font-size: 0.85rem;
  color: var(--on-dark-muted);
}
.demo-note a {
  border-bottom-color: var(--lake-300);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-light-soft);
  font-size: 0.82rem;
}
.footer-bottom p {
  margin: 0;
  color: var(--spruce-300);
}

.demo-note-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}
.demo-note-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-note-links a:hover,
.demo-note-links a:focus-visible {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------- 22. Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------- 23. Responsive ------ */

@media (max-width: 1024px) {
  .room {
    grid-template-columns: 240px 1fr 160px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero-facts {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-facts div:nth-child(2) {
    border-right: 0;
  }
  .hero-facts div:nth-child(3),
  .hero-facts div:nth-child(4) {
    border-top: 1px solid var(--border);
  }
  .hero-facts div:nth-child(3) {
    padding-left: 0;
  }
  .tiles .tile:nth-child(2) {
    margin-top: 0;
  }
}

@media (max-width: 780px) {
  body {
    font-size: 16px;
  }
  /* Handy: Bild und Text stehen untereinander statt uebereinander. So ist
     das Haus vollstaendig zu sehen, und die Schrift liegt nicht darauf. */
  .hero {
    grid-template-areas: "media" "text";
    min-height: 0;
  }
  .hero-media {
    grid-area: media;
  }
  .hero-media::after {
    display: none;
  }
  .hero-media img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 62% 56%;
  }
  .hero-inner {
    grid-area: text;
    /* dieselben Regeln, nur andere Token: unter dem Bild wird dunkel auf
       hell gesetzt statt hell auf Bild */
    --hero-fg: var(--text);
    --hero-fg-muted: var(--text-muted);
    --hero-eyebrow: var(--accent);
    --hero-btn-bg: var(--btn-primary-bg);
    --hero-btn-fg: var(--btn-primary-fg);
    --hero-btn-bg-hover: var(--spruce-900);
    --hero-ghost-border: var(--border);
    --hero-ghost-border-hover: var(--accent);
    align-self: start;
    padding: clamp(28px, 6vw, 40px) 0 0;
  }
  .hero-inner h1 {
    max-width: 14ch;
  }
  .hero-inner .lead {
    max-width: 44ch;
  }
  .split,
  .split--portrait {
    grid-template-columns: 1fr;
  }
  .split--reverse .split-figure {
    order: 0;
  }
  .split-figure img,
  .split--portrait .split-figure img {
    aspect-ratio: 3 / 2;
  }
  /* Zimmerzeile wird zur Karte: Bild oben, Preis unten mit Trennlinie */
  .room {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .room-figure img {
    aspect-ratio: 3 / 2;
  }
  .room-price {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }
  .room-price .unit {
    margin-top: 0;
  }
  .room-price .btn {
    width: 100%;
    margin-top: var(--space-2);
  }
  .tiles,
  .facts,
  .form-grid,
  .columns,
  .columns--two,
  .checklist--two {
    grid-template-columns: 1fr;
  }
  .columns {
    border-top: 0;
  }
  .column,
  .column:not(:first-child) {
    padding: var(--space-4) 0;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .tile img {
    aspect-ratio: 3 / 2;
  }
  .step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* Das Wasserzeichen darf auf schmalen Seiten nicht mit dem Text streiten */
  .mark-bg {
    --mark-size: 260px;
    --mark-right: -22%;
    --mark-opacity: 0.05;
  }
}

@media (max-width: 560px) {
  :root {
    --nav-h: 68px;
  }
  .brand-sub {
    display: none;
  }
  .btn {
    width: 100%;
  }
  .btn-row {
    flex-direction: column;
  }
  .hero-facts {
    grid-template-columns: 1fr;
  }
  .hero-facts div,
  .hero-facts div:not(:first-child) {
    padding: var(--space-3) 0;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .hero-facts div:first-child {
    border-top: 0;
  }
  .menu-item {
    grid-template-columns: 1fr;
  }
  .menu-item .price {
    order: 3;
  }
  /* Die Preistabelle lief hier 20px ueber den rechten Rand - die
     Hauptsaison-Spalte war am Handy nicht mehr zu sehen. Enger gesetzt und
     mit umbrechenden Zeilenkoepfen passen alle vier Spalten wieder ins
     Bild; ein Gast vergleicht Preise, dafuer muessen beide Saisonspalten
     nebeneinander stehen.                                                */
  .data-table th,
  .data-table td {
    padding: var(--space-3) var(--space-2) var(--space-3) 0;
  }
  .data-table thead th {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
  .data-table td {
    font-size: 0.88rem;
  }
  .data-table tbody th {
    font-size: 0.94rem;
    line-height: 1.35;
  }
  .demo-note,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Eckdaten untereinander statt mit Trennstrichen nebeneinander */
  .page-facts {
    flex-direction: column;
  }
  .page-facts li {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }
}

/* --------------------------------------------------- Tippflaechen -------- */
/* Am Telefon ist die Telefonnummer das, was tatsaechlich angetippt wird. Als
   reine Textzeile war sie 21px hoch. inline-flex statt Innenabstand, damit
   die Unterstreichung weiter am Text klebt und nicht am Kasten.           */
@media (pointer: coarse) {
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}