@import url("fonts.css");

/* =========================================================
   Hotel Willinger Mitte

   Ruhig, warm, viel Luft. Die Bilder tragen die Seite, die
   Schrift ordnet, die Bewegung bleibt klein und beilaeufig.
   Drei Schriften: Vollkorn setzt die Ueberschriften, Manrope
   den Text und die Versalien, Caveat kommt nur fuer die paar
   Zeilen, die klingen sollen, als haette sie jemand von Hand
   danebengeschrieben.
   ========================================================= */

/* ---------------------------------------------------------
   1. Grundlagen
   --------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Flaechen */
  --paper: #faf8f4;
  --linen: #f2ede4;
  --sand: #e7ded0;
  --nacht: #1a1712;

  /* Schrift */
  --ink: #1f1b16;
  --ink-soft: #554d43;
  --ink-faint: #665d52;

  /* Akzente */
  --haus: #a6301d;
  --haus-tief: #7f2114;
  /* Rot als Schriftfarbe darf heller sein als das Rot unter weisser Schrift. */
  --haus-text: #a6301d;
  --haus-soft: #f7e8e4;
  --gold: #755c2f;
  --gold-hell: #d9c391;

  --line: rgba(31, 27, 22, 0.16);
  --line-soft: rgba(31, 27, 22, 0.08);

  /* Raster */
  --wrap: 1180px;
  --wrap-weit: 1560px;
  --wrap-eng: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Rhythmus */
  --luft-s: clamp(2.2rem, 1.8rem + 1.4vw, 3.2rem);
  --luft-m: clamp(3.2rem, 2.6rem + 2.6vw, 5.4rem);
  --luft-l: clamp(4rem, 3.2rem + 3.4vw, 7rem);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --schatten: 0 30px 70px rgba(31, 27, 22, 0.14);
  --schatten-soft: 0 14px 38px rgba(31, 27, 22, 0.08);

  --serif: "Vollkorn", "Vollkorn Placeholder", Georgia, serif;
  --sans: "Manrope", "Manrope Placeholder", system-ui, sans-serif;
  --hand: "Caveat", "Caveat Placeholder", cursive;
}

/* Der Abend faerbt die ganze Seite um, nicht nur die Bilder. */
html[data-licht="nacht"] {
  color-scheme: dark;
  --paper: #16130f;
  --linen: #1d1a15;
  --sand: #262118;
  --nacht: #0c0a07;
  --ink: #f6f2ea;
  --ink-soft: #cabfae;
  --ink-faint: #a49a8a;
  --haus: #cb4c31;
  --haus-tief: #a6301d;
  --haus-text: #e26a4a;
  --haus-soft: rgba(203, 76, 49, 0.18);
  --gold: #c2a469;
  --gold-hell: #e2caa0;
  --line: rgba(246, 242, 234, 0.18);
  --line-soft: rgba(246, 242, 234, 0.09);
  --schatten: 0 30px 70px rgba(0, 0, 0, 0.55);
  --schatten-soft: 0 14px 38px rgba(0, 0, 0, 0.4);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  overflow-x: hidden;
  transition: background-color 0.9s var(--ease-soft), color 0.9s var(--ease-soft);
}

/* Deutsche Wortungetueme brauchen Trennung, sonst reisst der Flattersatz.
   Nur im Fliesstext, nie in Ueberschriften oder Versalien. */
p, li, dd, .lead, .muted, .fragen details > p, .notiz {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  text-wrap: pretty;
}
h1, h2, h3, h4, .kicker, .merkmal, .btn, .textlink, .band span, .etage__name,
.aufzug__schild, th, .zimmer__preis, .schreib { hyphens: manual; -webkit-hyphens: manual; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
::selection { background: var(--sand); color: var(--ink); }
:focus-visible { outline: 2px solid var(--haus); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------
   2. Schrift
   --------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.6rem); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.95rem, 1.35rem + 2.3vw, 3.2rem); letter-spacing: -0.018em; }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.7rem); }
h4 { font-family: var(--sans); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
h1 em, h2 em, h3 em { font-style: italic; }

p { margin: 0 0 1.15em; max-width: 64ch; }
/* Vollkorn hat Mediaevalziffern. Im Fliesstext sehen sie besser aus,
   in Tabellen und Preisen brauchen wir gleiche Breiten. */
.zahl b, .zimmer__preis, .preise td, .wege em, .tafel dd,
.rechner__summe, .aufenthalt__summe b, .aufenthalt__daten b {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
p:last-child { margin-bottom: 0; }
.lead {
  font-size: clamp(1.08rem, 1rem + 0.55vw, 1.3rem);
  line-height: 1.68;
  color: var(--ink-soft);
}
.muted { color: var(--ink-soft); }
strong { font-weight: 700; }

/* Kleine Versalien mit weiter Laufweite, das ordnende Signal der Seite */
.kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.kicker--hell { color: var(--gold-hell); }

/* Die handschriftlichen Zwischenrufe */
.schreib {
  display: block;
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--haus-text);
  transform: rotate(-2.2deg);
  transform-origin: left center;
}
.schreib--mitte { transform: rotate(-1.6deg); }
.schreib--hell { color: var(--gold-hell); }
.schreib--klein { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }

/* Die kurzen Zierstriche unter den Ueberschriften sind raus. Sie standen
   auf jeder zweiten Seite und haben nichts erzaehlt. Den Abstand macht
   jetzt der Satz selbst. */
h2 + p, h2 + .lead, h3 + p { margin-top: 1.1rem; }

/* ---------------------------------------------------------
   3. Raster
   --------------------------------------------------------- */
.wrap { width: min(100% - (2 * var(--gutter)), var(--wrap)); margin-inline: auto; }
.wrap--weit { width: min(100% - (2 * var(--gutter)), var(--wrap-weit)); margin-inline: auto; }
.wrap--eng { width: min(100% - (2 * var(--gutter)), var(--wrap-eng)); margin-inline: auto; }

.abschnitt { padding-block: var(--luft-m); }
.abschnitt--gross { padding-block: var(--luft-l); }
.abschnitt--eng { padding-block: var(--luft-s); }
.sec--linen { background: var(--linen); }
.sec--sand { background: var(--sand); }
.sec--nacht { background: var(--nacht); color: #f6f2ea; }
.sec--nacht p, .sec--nacht li, .sec--nacht .lead, .sec--nacht .muted { color: rgba(246, 242, 234, 0.82); }
.sec--nacht h2, .sec--nacht h3, .sec--nacht h4 { color: #fff; }

.intro-mitte { max-width: 58ch; margin-inline: auto; text-align: center; }
.intro-mitte p { margin-inline: auto; }
.intro-mitte .schreib { transform-origin: center; }

.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--bild-gross { grid-template-columns: 0.85fr 1.15fr; }
  .split--bild-zuerst > .split__bild { order: -1; }
  .split__text { max-width: 40rem; }
}

.kopfblock { max-width: 44rem; margin-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.6rem); }
.kopfblock--mitte { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------
   4. Schaltflaechen und Links
   --------------------------------------------------------- */
.btn {
  --bg: var(--haus); --fg: #fff; --rand: var(--haus);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  padding: 1.02rem 1.9rem;
  border: 1px solid var(--rand); border-radius: 2px;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 0.73rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.17em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.3s var(--ease);
}
/* Die Fuellung laeuft von unten hoch, statt nur die Farbe umzuschalten. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--haus-tief); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: translateY(1px); }

.btn--hell { --bg: #fdfbf7; --fg: #1f1b16; --rand: #fdfbf7; }
.btn--hell::before { background: #fff; }
.btn--hell:hover { color: #1f1b16; }

.btn--linie { --bg: transparent; --fg: var(--ink); --rand: var(--line); }
.btn--linie::before { background: var(--ink); }
.btn--linie:hover { color: var(--paper); border-color: var(--ink); }

.auf-bild .btn--linie, .sec--nacht .btn--linie, .menue .btn--linie {
  --fg: #fff; --rand: rgba(255, 255, 255, 0.55);
}
.auf-bild .btn--linie::before, .sec--nacht .btn--linie::before, .menue .btn--linie::before { background: #fff; }
.auf-bild .btn--linie:hover, .sec--nacht .btn--linie:hover, .menue .btn--linie:hover {
  color: #1f1b16; border-color: #fff;
}

.textlink {
  position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.17em;
  text-decoration: none; padding-bottom: 0.55rem; color: inherit;
  transition: color 0.3s var(--ease);
}
.textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform-origin: right; transform: scaleX(1);
  transition: transform 0.45s var(--ease);
}
.textlink:hover::after { transform-origin: left; animation: strichNeu 0.55s var(--ease); }
@keyframes strichNeu { 0% { transform: scaleX(1); transform-origin: right; }
  49% { transform: scaleX(0); transform-origin: right; }
  50% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; } }
.textlink svg { width: 0.85rem; height: 0.85rem; transition: transform 0.45s var(--ease); }
.textlink:hover svg { transform: translateX(5px); }
.textlink:hover { color: var(--haus-text); }
.sec--nacht .textlink, .auf-bild .textlink { color: #fff; }
.sec--nacht .textlink::after, .auf-bild .textlink::after { background: var(--gold-hell); }
.sec--nacht .textlink:hover, .auf-bild .textlink:hover { color: var(--gold-hell); }

/* ---------------------------------------------------------
   5. Kopfzeile
   --------------------------------------------------------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  border-bottom: 1px solid transparent; background: transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.topbar__innen {
  position: relative;
  width: min(100% - (2 * var(--gutter)), var(--wrap-weit));
  margin-inline: auto; min-height: 88px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.is-gescrollt .topbar {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-color: var(--line-soft);
  backdrop-filter: blur(14px);
}
.is-gescrollt .topbar__innen { min-height: 68px; }

/* Wortmarke sitzt mittig, wie bei den guten Hotelseiten */
.marke {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; text-decoration: none;
}
.marke img { height: clamp(42px, 4.4vw, 58px); width: auto; transition: height 0.45s var(--ease); }
.is-gescrollt .marke img { height: clamp(36px, 3.6vw, 46px); }
.marke .logo-hell { display: block; }
.marke .logo-dunkel { display: none; }
.is-gescrollt .marke .logo-hell,
.seite--hell .marke .logo-hell { display: none; }
.is-gescrollt .marke .logo-dunkel,
.seite--hell .marke .logo-dunkel { display: block; }
.ist-menue-offen .marke .logo-hell { display: block; }
.ist-menue-offen .marke .logo-dunkel { display: none; }

.topbar__links, .topbar__rechts { display: flex; align-items: center; gap: 0.9rem; flex: 0 0 auto; }
.topbar__rechts { justify-content: flex-end; }

.nav { display: none; }
@media (min-width: 1200px) {
  .nav { display: flex; align-items: center; gap: 0.2rem; }
  .nav a {
    position: relative; text-decoration: none; white-space: nowrap;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.92); padding: 0.7rem 0.75rem;
    transition: color 0.35s var(--ease);
  }
  .nav a::after {
    content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.4rem; height: 1px;
    background: currentColor; opacity: 0.8;
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .is-gescrollt .nav a, .seite--hell .nav a { color: var(--ink-soft); }
  .is-gescrollt .nav a:hover, .seite--hell .nav a:hover,
  .is-gescrollt .nav a[aria-current="page"], .seite--hell .nav a[aria-current="page"] { color: var(--ink); }
  .btn--menue { display: none; }
}

.topbar__tel {
  display: none; text-decoration: none; white-space: nowrap;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; color: #fff;
}
.is-gescrollt .topbar__tel, .seite--hell .topbar__tel { color: var(--ink); }
.ist-menue-offen .topbar__tel { color: #fff; }
@media (min-width: 900px) { .topbar__tel { display: inline-flex; } }
.topbar .btn { padding: 0.82rem 1.3rem; }
@media (max-width: 719px) { .topbar__rechts > .btn { display: none; } }

/* Menueknopf */
.btn--menue {
  width: 42px; height: 42px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.btn--menue span {
  display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 2px;
  transition: transform 0.5s var(--ease-soft), background-color 0.4s var(--ease), width 0.4s var(--ease);
}
.btn--menue span + span { margin-top: 6px; width: 16px; }
.btn--menue:hover span + span { width: 22px; }
.is-gescrollt .btn--menue span, .seite--hell .btn--menue span { background: var(--ink); }
.ist-menue-offen .btn--menue span { background: #fff; width: 22px; }
.ist-menue-offen .btn--menue span:first-child { transform: translateY(3.75px) rotate(45deg); }
.ist-menue-offen .btn--menue span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Schalter fuer Jahreszeit und Tageszeit */
.schalter {
  display: inline-flex; align-items: center; gap: 0; padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  background: rgba(26, 23, 18, 0.26); backdrop-filter: blur(8px);
}
.is-gescrollt .schalter, .seite--hell .schalter {
  border-color: var(--line); background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.ist-menue-offen .schalter { border-color: rgba(255, 255, 255, 0.35); background: rgba(26, 23, 18, 0.35); }
.schalter button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  font-family: var(--sans); font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.8); padding: 0.52rem 0.85rem;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.is-gescrollt .schalter button, .seite--hell .schalter button { color: var(--ink-faint); }
.ist-menue-offen .schalter button { color: rgba(255, 255, 255, 0.8); }
.schalter svg { width: 0.82rem; height: 0.82rem; }
.schalter button[aria-pressed="true"] { background: #fdfbf7; color: #1f1b16; }
.is-gescrollt .schalter button[aria-pressed="true"],
.seite--hell .schalter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ist-menue-offen .schalter button[aria-pressed="true"] { background: #fdfbf7; color: #1f1b16; }
@media (max-width: 1099px) { .schalter button span { display: none; } .schalter button { padding: 0.52rem 0.7rem; } }
@media (max-width: 599px) { .schalter--licht { display: none; } }

/* ---------------------------------------------------------
   6. Menue als Etagen
   --------------------------------------------------------- */
.menue {
  position: fixed; inset: 0; z-index: 55; background: var(--nacht); color: #f6f2ea;
  display: grid; align-content: center; padding: 7rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden; overflow-y: auto;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.ist-menue-offen .menue { opacity: 1; visibility: visible; }
.menue a:not(.btn) { text-decoration: none; color: #f6f2ea; }
.aufzug { width: min(100%, 62rem); margin-inline: auto; display: grid; }
.aufzug__schild {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--gold-hell); margin-bottom: 1.4rem;
}
.etage {
  display: grid; grid-template-columns: 3.4rem 1fr 128px;
  grid-template-areas: "nr name bild" "nr satz bild";
  align-items: center; column-gap: 1.4rem; padding: 1rem 0;
  border-top: 1px solid rgba(246, 242, 234, 0.14);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.etage:last-of-type { border-bottom: 1px solid rgba(246, 242, 234, 0.14); }
.ist-menue-offen .etage { opacity: 1; transform: none; }
.ist-menue-offen .etage:nth-of-type(2) { transition-delay: 0.05s; }
.ist-menue-offen .etage:nth-of-type(3) { transition-delay: 0.1s; }
.ist-menue-offen .etage:nth-of-type(4) { transition-delay: 0.15s; }
.ist-menue-offen .etage:nth-of-type(5) { transition-delay: 0.2s; }
.ist-menue-offen .etage:nth-of-type(6) { transition-delay: 0.25s; }
.etage__nr {
  grid-area: nr; align-self: center; width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(246, 242, 234, 0.22);
  font-family: var(--serif); font-size: 0.92rem; color: var(--gold-hell);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.etage__name {
  grid-area: name; align-self: end; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.12;
  transition: transform 0.45s var(--ease);
}
.etage__satz {
  grid-area: satz; align-self: start; font-size: 0.76rem;
  color: rgba(246, 242, 234, 0.58); transition: transform 0.45s var(--ease);
}
.etage__bild { grid-area: bild; overflow: hidden; align-self: center; }
.etage__bild img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; opacity: 0.5;
  transition: opacity 0.4s var(--ease), transform 0.9s var(--ease-soft);
}
.etage:hover .etage__bild img, .etage:focus-visible .etage__bild img { opacity: 1; transform: scale(1.06); }
.etage:hover .etage__name, .etage:hover .etage__satz,
.etage:focus-visible .etage__name, .etage:focus-visible .etage__satz { transform: translateX(9px); }
.etage:hover .etage__nr, .etage:focus-visible .etage__nr {
  background: var(--gold-hell); color: var(--nacht); border-color: var(--gold-hell);
}
.etage[aria-current="page"] .etage__nr { background: var(--haus); color: #fff; border-color: var(--haus); }
@media (max-width: 719px) {
  .etage { grid-template-columns: 2.6rem 1fr; grid-template-areas: "nr name" "nr satz"; }
  .etage__bild { display: none; }
  .etage__nr { width: 2.2rem; height: 2.2rem; font-size: 0.78rem; }
}
.menue__fuss {
  width: min(100%, 62rem); margin: 2.2rem auto 0;
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
}
.menue__adresse { font-size: 0.82rem; color: rgba(246, 242, 234, 0.6); margin-left: auto; }

/* ---------------------------------------------------------
   7. Hero
   --------------------------------------------------------- */
.hero {
  position: relative; min-height: clamp(580px, 94dvh, 980px);
  display: grid; align-items: end; overflow: hidden; color: #fff;
}
.hero__bild { position: absolute; inset: 0; z-index: 0; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .hero__bild img { animation: ruhigerZoom 18s var(--ease-soft) forwards; }
}
@keyframes ruhigerZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Der Schleier muss auch auf hellem Himmel und auf Schnee tragen. */
  background:
    linear-gradient(to top, rgba(14, 11, 8, 0.86) 0%, rgba(14, 11, 8, 0.66) 26%,
                    rgba(14, 11, 8, 0.4) 55%, rgba(14, 11, 8, 0.2) 74%, rgba(14, 11, 8, 0.52) 100%),
    radial-gradient(150% 105% at 18% 88%, rgba(14, 11, 8, 0.56) 0%, transparent 66%);
}
.hero__innen {
  position: relative; z-index: 2;
  width: min(100% - (2 * var(--gutter)), var(--wrap-weit)); margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  max-width: min(100% - (2 * var(--gutter)), 60rem);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .kicker { color: #eddcb8; }
.hero .schreib { color: #ffe6b8; }
.hero__sub {
  margin-top: 1.5rem; max-width: 44ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.18rem); line-height: 1.7;
}
.hero__aktion { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.hero h1, .hero .kicker, .hero__sub, .hero .schreib { text-shadow: 0 1px 24px rgba(14, 11, 8, 0.5); }
.hero--innen { min-height: clamp(420px, 66dvh, 640px); }
.hero--mitte .hero__innen { text-align: center; margin-inline: auto; }
.hero--mitte h1 { margin-inline: auto; }
.hero--mitte .hero__sub { margin-inline: auto; }
.hero--mitte .hero__aktion { justify-content: center; }

/* Die kleine Zeile ueber der Ueberschrift: Fakten, keine Werbung */
.metazeile {
  position: absolute; z-index: 2; top: calc(88px + 1.4rem); left: 50%;
  transform: translateX(-50%);
  width: min(100% - (2 * var(--gutter)), var(--wrap-weit));
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.72);
}
.metazeile span { display: inline-flex; align-items: center; gap: 0.5rem; }
.metazeile svg { width: 0.8rem; height: 0.8rem; opacity: 0.8; }
@media (max-width: 899px) { .metazeile { display: none; } }

/* Scrollhinweis */
.hinweis-runter {
  position: absolute; z-index: 2; bottom: 1.6rem; right: var(--gutter);
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.72);
}
.hinweis-runter::after {
  content: ""; width: 1px; height: 30px; background: currentColor;
  animation: tropfen 2.4s var(--ease) infinite;
}
@keyframes tropfen {
  0%, 100% { transform: scaleY(0.25); transform-origin: top; opacity: 0.5; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
@media (max-width: 899px) { .hinweis-runter { display: none; } }

/* ---------------------------------------------------------
   8. Jahreszeit und Abend
   --------------------------------------------------------- */
.saisonbild { position: relative; overflow: hidden; }
.saisonbild img { width: 100%; height: 100%; object-fit: cover; }
.saisonbild img + img { position: absolute; inset: 0; }
.hero__bild .saisonbild,
.streifen__bild .saisonbild,
.abschluss__bild .saisonbild,
.bildkarte__bild .saisonbild { position: absolute; inset: 0; }
.saisonbild [data-jahreszeit], .saisonbild [data-abend] { transition: opacity 1.1s var(--ease-soft); }
html[data-saison="sommer"] [data-jahreszeit="winter"] { opacity: 0; }
html[data-saison="sommer"] [data-jahreszeit="sommer"] { opacity: 1; }
html[data-saison="winter"] [data-jahreszeit="winter"] { opacity: 1; }
html[data-saison="winter"] [data-jahreszeit="sommer"] { opacity: 0; }
.saisonbild [data-abend] { position: absolute; inset: 0; opacity: 0; }
html[data-licht="nacht"] .saisonbild [data-abend] { opacity: 1; }
html[data-saison="sommer"] .nur-winter { display: none; }
html[data-saison="winter"] .nur-sommer { display: none; }

/* Der weiche Lichtwechsel beim Umschalten von Morgen auf Abend */
.lichtwisch {
  position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 0%, rgba(255, 226, 172, 0.42) 40%,
              rgba(255, 246, 228, 0.78) 50%, rgba(126, 146, 196, 0.4) 60%, transparent 100%);
  background-size: 250% 100%; background-position: 130% 0;
}
.lichtwisch.laeuft { animation: wischen 1.2s var(--ease-soft); }
@keyframes wischen {
  0% { opacity: 0; background-position: 130% 0; }
  20% { opacity: 1; } 80% { opacity: 1; }
  100% { opacity: 0; background-position: -55% 0; }
}
@media (prefers-reduced-motion: reduce) { .lichtwisch { display: none; } }

/* ---------------------------------------------------------
   9. Bilder
   --------------------------------------------------------- */
.bild { position: relative; overflow: hidden; }
.bild img { width: 100%; object-fit: cover; transition: transform 1.6s var(--ease-soft); }
.bild--hoch img { aspect-ratio: 4 / 5; }
.bild--quer img { aspect-ratio: 4 / 3; }
.bild--breit img { aspect-ratio: 16 / 9; }
.bild--pano img { aspect-ratio: 21 / 9; }
.bild--quadrat img { aspect-ratio: 1 / 1; }
.bild--zoom:hover img, button.bild:hover img { transform: scale(1.04); }
button.bild {
  border: 0; padding: 0; background: none; cursor: zoom-in;
  display: block; width: 100%; font: inherit; color: inherit;
}
.notiz {
  display: block; margin-top: 0.8rem; font-family: var(--serif); font-style: italic;
  font-size: 0.93rem; color: var(--ink-faint);
}
.sec--nacht .notiz, .streifen .notiz { color: rgba(246, 242, 234, 0.68); }

/* Bilder fahren beim Sichtbarwerden von unten auf */
.bild-auf img, .bild-auf > .saisonbild { clip-path: inset(0 0 100% 0); }
.bild-auf.ist-da img, .bild-auf.ist-da > .saisonbild {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.85s var(--ease), transform 1.6s var(--ease-soft);
}

.bildpaar { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .bildpaar { grid-template-columns: 1fr 1fr; align-items: start; }
  .bildpaar > :last-child { margin-top: clamp(2.5rem, 7vw, 6rem); }
}

/* Vollflaechige Bildkarte mit eingesetztem Textblock */
.bildkarte { position: relative; overflow: hidden; min-height: clamp(420px, 68vh, 760px); display: grid; }
.bildkarte__bild { position: absolute; inset: 0; z-index: 0; }
.bildkarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.bildkarte::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(14, 11, 8, 0.68) 0%, rgba(14, 11, 8, 0.28) 48%, transparent 78%);
}
.bildkarte__innen {
  position: relative; z-index: 2; align-self: center;
  width: min(100% - (2 * var(--gutter)), var(--wrap-weit)); margin-inline: auto;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.bildkarte__block {
  max-width: 34rem; background: color-mix(in srgb, var(--paper) 96%, transparent);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  box-shadow: var(--schatten);
}
.bildkarte--rechts .bildkarte__block { margin-left: auto; }
.bildkarte--rechts::after {
  background: linear-gradient(260deg, rgba(14, 11, 8, 0.68) 0%, rgba(14, 11, 8, 0.28) 48%, transparent 78%);
}
.bildkarte__block h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.bildkarte__block p { font-size: 1rem; }

/* Breiter Bildstreifen mit Text direkt darauf */
.streifen {
  position: relative; min-height: clamp(420px, 62vh, 740px);
  display: grid; align-items: center; overflow: hidden; color: #fff;
}
.streifen__bild { position: absolute; inset: 0; z-index: 0; }
.streifen__bild img { width: 100%; height: 100%; object-fit: cover; }
.streifen::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(92deg, rgba(14, 11, 8, 0.86) 0%, rgba(14, 11, 8, 0.6) 46%, rgba(14, 11, 8, 0.2) 86%);
}
.streifen__innen {
  position: relative; z-index: 2;
  width: min(100% - (2 * var(--gutter)), var(--wrap)); margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.streifen h2 { color: #fff; max-width: 16ch; }
.streifen p { color: rgba(255, 255, 255, 0.9); max-width: 46ch; }
.streifen h2, .streifen p { text-shadow: 0 1px 20px rgba(14, 11, 8, 0.4); }

/* Galerie */
.galerie { display: grid; gap: clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie > * { aspect-ratio: 1 / 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; }

/* Ziehbare Bildstrecke */
.strecke { position: relative; }
.strecke__spur {
  display: flex; gap: clamp(0.8rem, 0.5rem + 1vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: var(--gutter); padding-bottom: 1.6rem;
  scrollbar-width: none; cursor: grab;
}
.strecke__spur::-webkit-scrollbar { display: none; }
.strecke__spur.zieht { cursor: grabbing; scroll-snap-type: none; }
.strecke__spur > * { flex: 0 0 min(78vw, 460px); scroll-snap-align: center; }
.strecke__spur img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strecke__hinweis {
  display: flex; align-items: center; gap: 0.7rem; justify-content: center;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-faint);
}
.strecke__hinweis::before, .strecke__hinweis::after { content: ""; width: 24px; height: 1px; background: var(--line); }

/* Vergleichsregler Winter gegen Sommer */
.vergleich { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.vergleich img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.vergleich__oben { position: absolute; inset: 0; clip-path: inset(0 var(--rest, 50%) 0 0); }
.vergleich__oben img { height: 100%; }
.vergleich__griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px;
  background: rgba(255, 255, 255, 0.92); transform: translateX(-1px); pointer-events: none;
}
.vergleich__griff::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #fdfbf7; box-shadow: 0 10px 28px rgba(14, 11, 8, 0.32);
}
.vergleich__griff svg {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 30px; height: 13px; transform: translate(-50%, -50%);
  color: #1f1b16;
}
.vergleich__schild {
  position: absolute; z-index: 3; bottom: 1rem;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em;
  color: #fff; background: rgba(14, 11, 8, 0.5); padding: 0.42rem 0.85rem; backdrop-filter: blur(6px);
}
.vergleich__schild--links { left: 1rem; }
.vergleich__schild--rechts { right: 1rem; }
.vergleich input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0;
}

/* Lichtkasten */
.lichtkasten {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(12, 10, 7, 0.95); padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lichtkasten.ist-offen { opacity: 1; visibility: visible; }
.lichtkasten img { max-width: 100%; max-height: 82dvh; width: auto; object-fit: contain; }
.lichtkasten__zu, .lichtkasten__pfeil {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  transition: opacity 0.3s var(--ease);
}
.lichtkasten__zu { top: 1rem; right: 1rem; }
.lichtkasten__pfeil { top: 50%; transform: translateY(-50%); }
.lichtkasten__pfeil--zurueck { left: 0.4rem; }
.lichtkasten__pfeil--vor { right: 0.4rem; }
.lichtkasten__zu:hover, .lichtkasten__pfeil:hover { opacity: 0.6; }
.lichtkasten__zaehler {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7); font-size: 0.68rem; letter-spacing: 0.2em;
}

/* ---------------------------------------------------------
   10. Siegel
   --------------------------------------------------------- */
.siegel {
  position: relative; width: clamp(132px, 15vw, 176px); aspect-ratio: 1;
  display: grid; place-items: center; text-align: center; flex: 0 0 auto;
}
.siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.siegel svg text { font-family: var(--sans); font-size: 8.2px; font-weight: 800; letter-spacing: 2.6px; fill: var(--gold); text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .siegel svg { animation: dreh 34s linear infinite; } }
@keyframes dreh { to { transform: rotate(360deg); } }
.siegel__kern {
  display: grid; gap: 0.1rem; width: 58%;
  font-family: var(--serif); line-height: 1.05;
}
.siegel__kern b { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 500; color: var(--haus); }
.siegel__kern span { font-family: var(--sans); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.siegel--hell .siegel__kern b { color: var(--gold-hell); }
.siegel--hell .siegel__kern span { color: rgba(246, 242, 234, 0.7); }
.siegel--hell svg text { fill: var(--gold-hell); }

/* ---------------------------------------------------------
   11. Inhalte
   --------------------------------------------------------- */
/* Zahlen */
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 940px) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.zahl { text-align: center; }
.zahl b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.2rem); line-height: 1;
  color: var(--haus-text); font-variant-numeric: tabular-nums;
}
.zahl > span {
  display: block; margin-top: 0.8rem; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.17em; color: var(--ink-faint); line-height: 1.6;
}
.sec--nacht .zahl b { color: var(--gold-hell); }
.sec--nacht .zahl > span { color: rgba(246, 242, 234, 0.72); }

/* Zimmerliste */
.zimmer-liste { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .zimmer-liste { grid-template-columns: repeat(2, 1fr); } }
.zimmer { display: grid; gap: 1.4rem; align-content: start; }
.zimmer__bild { overflow: hidden; }
.zimmer__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.6s var(--ease-soft); }
.zimmer:hover .zimmer__bild img { transform: scale(1.04); }
.zimmer__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.zimmer__preis {
  font-family: var(--serif); font-size: 1.4rem; color: var(--haus-text);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.zimmer__preis small {
  display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); text-align: right; margin-top: 0.2rem;
}
.zimmer__merkmale {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  padding-block: 0.9rem; border-block: 1px solid var(--line-soft);
}
.merkmal { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-faint); font-weight: 700; }
.zimmer .textlink { justify-self: start; }

/* Zimmerkarte mit Tiefe */
.tiefe { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 3rem); align-items: center; }
@media (min-width: 960px) {
  .tiefe { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 5rem); }
  .tiefe--gedreht .tiefe__buehne { order: 2; }
}
.tiefe + .tiefe { margin-top: clamp(3.5rem, 2rem + 6vw, 8rem); }
.tiefe__buehne { position: relative; padding: clamp(1.8rem, 4.5vw, 3.2rem) clamp(0.8rem, 3vw, 2.4rem) clamp(2.2rem, 5vw, 3.6rem); }
.tiefe__wort {
  position: absolute; inset-inline: 0; top: 0; z-index: 0; text-align: center;
  font-family: var(--serif); font-weight: 700; line-height: 1;
  font-size: clamp(2.6rem, 8vw, 5.8rem); color: var(--sand);
}
.tiefe__gross { position: relative; z-index: 1; overflow: hidden; box-shadow: var(--schatten); }
.tiefe__gross img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tiefe__klein {
  position: absolute; z-index: 2; right: clamp(0.4rem, 2vw, 1.4rem); bottom: clamp(0.4rem, 2vw, 1rem);
  width: clamp(100px, 26%, 178px); overflow: hidden;
  border: 6px solid var(--paper); box-shadow: var(--schatten);
}
.tiefe__klein img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tiefe__text { display: grid; gap: 1.1rem; align-content: start; }
[data-tiefe] { will-change: transform; }

/* Leistungen */
.leistungen { display: grid; gap: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .leistungen--4 { grid-template-columns: repeat(4, 1fr); } }
.leistung { display: grid; gap: 0.6rem; align-content: start; }
.leistung svg { width: 1.5rem; height: 1.5rem; color: var(--gold); margin-bottom: 0.3rem; }
.leistung p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.sec--nacht .leistung svg { color: var(--gold-hell); }

.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }
.haken li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.85rem; align-items: start; }
.haken svg { width: 0.95rem; height: 0.95rem; color: var(--gold); margin-top: 0.45rem; }
.sec--nacht .haken svg { color: var(--gold-hell); }

/* Gastgeber */
.gastgeber { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .gastgeber { grid-template-columns: 1fr 1fr; } }
.split .gastgeber { grid-template-columns: 1fr; gap: 1.6rem; }
.person { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; }
.person__zeichen {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--haus); color: #fff; font-family: var(--serif); font-size: 1.4rem; line-height: 1;
}
.person h3 { font-size: 1.25rem; margin-bottom: 0.1rem; }
.person__rolle {
  display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em;
  font-weight: 800; color: var(--gold); margin-bottom: 0.6rem;
}
.person p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* Gaestestimme */
.stimme { text-align: center; max-width: 36ch; margin-inline: auto; }
.stimme blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.7vw, 2.4rem); line-height: 1.34;
}
.stimme figcaption {
  margin-top: 1.5rem; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--ink-faint);
}
.sec--nacht .stimme figcaption { color: rgba(246, 242, 234, 0.7); }
.stimme__sterne { display: flex; gap: 0.35rem; justify-content: center; margin-bottom: 1.4rem; color: var(--gold); }
.stimme__sterne svg { width: 0.9rem; height: 0.9rem; }
.sec--nacht .stimme__sterne { color: var(--gold-hell); }

/* Tafel mit Zeiten */
.tafel { background: var(--nacht); color: #f6f2ea; padding: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.tafel h3 { color: #fff; }
.tafel dl { margin: 1.6rem 0 0; display: grid; gap: 0; }
.tafel div { display: flex; align-items: baseline; gap: 1rem; padding-block: 0.8rem; border-bottom: 1px dashed rgba(246, 242, 234, 0.2); }
.tafel dt { flex: 0 0 auto; font-size: 0.87rem; color: rgba(246, 242, 234, 0.82); }
.tafel dd {
  margin: 0 0 0 auto; font-family: var(--serif); font-size: 1.02rem;
  color: var(--gold-hell); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Preistabelle */
.preise { width: 100%; border-collapse: collapse; }
.preise th, .preise td { text-align: left; padding: 1rem 0.7rem; border-bottom: 1px solid var(--line-soft); font-size: 0.94rem; }
.preise th { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.17em; color: var(--ink-faint); font-weight: 800; }
.preise td:last-child, .preise th:last-child { text-align: right; }
.preise td:last-child { font-family: var(--serif); font-size: 1.12rem; color: var(--haus-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.preise tr:last-child td { border-bottom: 0; }

/* Ehrlich gesagt */
.ehrlich { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .ehrlich { grid-template-columns: 1fr 1fr; } }
.ehrlich h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.ehrlich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ehrlich li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.ehrlich li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 1px; background: var(--gold); }
.ehrlich--nein li::before { background: var(--ink-faint); }

/* Gehzeiten */
.wege { list-style: none; margin: 0; padding: 0; display: grid; }
.wege li {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding-block: 0.9rem; border-bottom: 1px solid var(--line-soft);
}
.wege li:first-child { border-top: 1px solid var(--line-soft); }
.wege b { font-weight: 600; font-size: 0.98rem; }
.wege small { display: block; font-size: 0.76rem; color: var(--ink-faint); font-weight: 400; margin-top: 0.15rem; }
.wege em {
  font-style: normal; font-family: var(--serif); font-size: 1.08rem; color: var(--haus-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Mitlaufende Textspalte */
.mitlauf { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) {
  .mitlauf { grid-template-columns: 0.82fr 1.18fr; }
  .mitlauf__fest { position: sticky; top: 8rem; }
  .mitlauf__strecke > :nth-child(even) { margin-left: clamp(2rem, 8%, 6rem); }
  .mitlauf__strecke > :nth-child(odd) { margin-right: clamp(2rem, 8%, 6rem); }
}
.mitlauf__strecke { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); }

/* Kapitelnummer */
.kapitel { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.kapitel b { font-family: var(--serif); font-weight: 500; font-size: 0.86rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.kapitel span { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.26em; color: var(--ink-faint); }
.sec--nacht .kapitel b, .streifen .kapitel b, .bildkarte--dunkel .kapitel b { color: var(--gold-hell); }
.sec--nacht .kapitel span, .streifen .kapitel span { color: rgba(246, 242, 234, 0.7); }
.sec--nacht .kapitel::before, .streifen .kapitel::before { background: var(--gold-hell); }

/* Wochenendrechner */
.rechner { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rechner { grid-template-columns: 1fr 0.85fr; } }
.rechner__steuer { display: grid; gap: 1.5rem; }
.wahl { display: grid; gap: 0.65rem; }
.wahl > span { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); }
.wahl__reihe { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wahl__reihe label {
  cursor: pointer; border: 1px solid var(--line); padding: 0.58rem 1rem;
  font-size: 0.78rem; font-weight: 700; color: var(--ink-soft);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.wahl__reihe label:hover { border-color: var(--ink-faint); }
.wahl__reihe input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__reihe label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rechner__blatt {
  background: var(--nacht); color: #f6f2ea; padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  display: grid; gap: 0; align-content: start;
}
.rechner__blatt h3 { color: #fff; font-size: 1.1rem; }
.rechner__summe {
  font-family: var(--serif); font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.6rem); line-height: 1;
  color: var(--gold-hell); font-variant-numeric: tabular-nums; margin-top: 0.8rem; white-space: nowrap;
}
.rechner__zeile {
  display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.55rem;
  border-bottom: 1px dashed rgba(246, 242, 234, 0.2); font-size: 0.88rem; color: rgba(246, 242, 234, 0.82);
}
.rechner__zeile b { font-weight: 700; color: #fff; white-space: nowrap; }
.rechner__fuss { font-size: 0.78rem; color: rgba(246, 242, 234, 0.62); margin-top: 0.9rem; }
.rechner__blatt .btn { margin-top: 1.3rem; }

/* Fragen */
.fragen { display: grid; }
.fragen details { border-bottom: 1px solid var(--line-soft); }
.fragen details:first-child { border-top: 1px solid var(--line-soft); }
.fragen summary {
  cursor: pointer; list-style: none; padding: 1.5rem 0;
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.4rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  transition: color 0.3s var(--ease);
}
.fragen summary:hover { color: var(--haus-text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; width: 0.55rem; height: 0.55rem; flex: 0 0 auto;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg); transition: transform 0.45s var(--ease);
}
.fragen details[open] summary::after { transform: rotate(-135deg); }
.fragen details > p { margin: 0 0 1.5rem; color: var(--ink-soft); max-width: 70ch; }

/* Formular */
.formular {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid var(--line-soft);
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); box-shadow: var(--schatten-soft);
}
.formular-raster { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .formular-raster { grid-template-columns: 1fr 1fr; } .feld--breit { grid-column: 1 / -1; } }
.feld { display: grid; gap: 0.4rem; }
.feld label { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }
.feld input, .feld select, .feld textarea {
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: 0.8rem 0.9rem; width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--haus); outline: none; box-shadow: 0 0 0 3px var(--haus-soft);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--ink-faint); }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--haus); }
.feld .fehler { font-size: 0.78rem; color: var(--haus-text); font-weight: 600; display: none; }
.feld--fehler .fehler { display: block; }
.formular-hinweis { font-size: 0.84rem; color: var(--ink-soft); }
.formular-status {
  display: none; border: 1px solid var(--haus); background: var(--haus-soft);
  padding: 1rem 1.2rem; margin-bottom: 1.3rem;
}
.formular-status.ist-sichtbar { display: block; }
.formular-status b { display: block; margin-bottom: 0.2rem; }
input[type="checkbox"] { width: auto; accent-color: var(--haus); }
.einwilligung {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.75rem; align-items: start;
  font-size: 0.85rem; color: var(--ink-soft);
}
.einwilligung a { color: var(--ink); font-weight: 600; }
.einwilligung--fehler { color: var(--haus-text); }

/* Anfrageseite mit Aufenthaltskarte */
.anfrageseite { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 1040px) {
  .anfrageseite { grid-template-columns: 1.25fr 0.75fr; align-items: start; }
  .aufenthalt { position: sticky; top: 7rem; }
}
.aufenthalt__blatt {
  background: var(--nacht); color: #f6f2ea; box-shadow: var(--schatten);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
}
.aufenthalt__kopf {
  display: flex; align-items: center; gap: 0.9rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(246, 242, 234, 0.18);
}
.aufenthalt__kopf img { width: 54px; height: auto; flex: 0 0 auto; }
.aufenthalt__kopf span { font-family: var(--serif); font-size: 1rem; line-height: 1.25; color: #fff; }
.aufenthalt__bild { overflow: hidden; margin: 1.1rem 0; }
.aufenthalt__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity 0.4s var(--ease); }
.aufenthalt__daten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.1rem; padding-bottom: 1.1rem; }
.aufenthalt__daten span, .aufenthalt__zeile span, .aufenthalt__summe span {
  display: block; font-size: 0.57rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.2em; color: rgba(246, 242, 234, 0.55);
}
.aufenthalt__daten b { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: #fff; display: block; margin-top: 0.22rem; }
.aufenthalt__zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.65rem; border-top: 1px dashed rgba(246, 242, 234, 0.2);
}
.aufenthalt__zeile b { font-size: 0.9rem; color: #fff; font-weight: 600; text-align: right; }
.aufenthalt__summe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: 1rem; margin-top: 0.4rem; border-top: 1px solid rgba(246, 242, 234, 0.25);
}
.aufenthalt__summe b {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
  color: var(--gold-hell); line-height: 1; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.aufenthalt__fuss { margin: 0.9rem 0 0; font-size: 0.76rem; color: rgba(246, 242, 234, 0.6); }
.aufenthalt__balken { height: 2px; background: rgba(246, 242, 234, 0.16); margin-top: 1.1rem; }
.aufenthalt__balken i { display: block; height: 100%; background: var(--gold-hell); transition: width 0.5s var(--ease); }
.aufenthalt.ist-fertig .aufenthalt__blatt { outline: 1px solid var(--gold-hell); outline-offset: 6px; }

/* Kontakt */
.kontakt-raster { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: 1fr 1fr; } }
.kontakt-block { display: grid; gap: 0.35rem; align-content: start; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line-soft); }
.kontakt-block h4 { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 0.35rem; }
.kontakt-block a { text-decoration: none; font-weight: 600; }
.kontakt-block a:hover { color: var(--haus-text); }
.karte { overflow: hidden; min-height: 400px; background: var(--linen); }
.karte iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }

/* Abschluss */
.abschluss { position: relative; overflow: hidden; color: #fff; }
.abschluss__bild { position: absolute; inset: 0; z-index: 0; }
.abschluss__bild img { width: 100%; height: 100%; object-fit: cover; }
.abschluss::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(14, 11, 8, 0.72); }
.abschluss__innen {
  position: relative; z-index: 2; text-align: center;
  width: min(100% - (2 * var(--gutter)), 48rem); margin-inline: auto;
  padding-block: clamp(4.5rem, 3rem + 5vw, 8rem);
}
.abschluss h2 { color: #fff; margin-inline: auto; }
.abschluss p { color: rgba(255, 255, 255, 0.9); margin-inline: auto; }
.abschluss h2, .abschluss p { text-shadow: 0 1px 20px rgba(14, 11, 8, 0.4); }
.abschluss__aktion { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2rem; }

/* ---------------------------------------------------------
   12. Buchungsleiste
   --------------------------------------------------------- */
.anfrageleiste { position: relative; z-index: 5; background: var(--linen); border-bottom: 1px solid var(--line-soft); }
.anfrageleiste form {
  width: min(100% - (2 * var(--gutter)), var(--wrap-weit)); margin-inline: auto;
  display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: end;
  padding-block: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
}
@media (min-width: 940px) { .anfrageleiste form { grid-template-columns: 1fr 1fr 1fr auto; gap: 2.2rem; } }
.anfrageleiste .feld input, .anfrageleiste .feld select {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.45rem 0 0.55rem;
}
.anfrageleiste .feld input:focus, .anfrageleiste .feld select:focus { box-shadow: none; border-color: var(--haus); }
.anfrageleiste .btn { width: 100%; }
@media (min-width: 940px) { .anfrageleiste .btn { width: auto; } }

/* Die dauerhafte Leiste unten, wie bei den grossen Hotelseiten */
.buchungsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-top: 1px solid var(--line-soft); backdrop-filter: blur(14px);
  transform: translateY(110%); transition: transform 0.5s var(--ease);
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
}
.is-gescrollt .buchungsleiste { transform: none; }
.ist-menue-offen .buchungsleiste, .lichtkasten.ist-offen ~ .buchungsleiste { transform: translateY(110%); }
.buchungsleiste__innen {
  width: min(100%, var(--wrap-weit)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; align-items: center;
}
@media (min-width: 960px) {
  .buchungsleiste__innen { grid-template-columns: auto 1fr auto auto; gap: 1.6rem; }
}
.buchungsleiste__satz {
  display: none; font-family: var(--serif); font-size: 1rem; color: var(--ink); white-space: nowrap;
}
.buchungsleiste__felder { display: none; gap: 1.6rem; align-items: end; }
@media (min-width: 960px) {
  .buchungsleiste__satz { display: block; }
  .buchungsleiste__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buchungsleiste__innen > .btn { width: auto; }
}
.buchungsleiste .feld label { font-size: 0.55rem; letter-spacing: 0.2em; }
.buchungsleiste .feld input, .buchungsleiste .feld select {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 0.25rem 0 0.35rem; font-size: 0.92rem;
}
.buchungsleiste .btn { padding: 0.85rem 1.4rem; }
/* Platz unter dem Footer, damit die fixe Leiste am Seitenende nichts verdeckt */
body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
@media (max-width: 1023px) { body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); } }

/* ---------------------------------------------------------
   13. Brotkrumen, Fliesstextseiten, Fuss
   --------------------------------------------------------- */
.krumen {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.76); display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.krumen a { text-decoration: none; color: inherit; }
.krumen a:hover { color: #fff; }
.seite--hell .krumen { color: var(--ink-faint); }
.hero--mitte .krumen { justify-content: center; }

.text h2 { font-size: clamp(1.45rem, 1.3rem + 0.9vw, 2rem); margin-top: 2.8rem; margin-bottom: 0.8rem; }
.text h3 { margin-top: 1.8rem; margin-bottom: 0.4rem; }
.text p, .text li { color: var(--ink-soft); }
.text ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin-bottom: 1.3rem; }
.text a { color: var(--ink); font-weight: 600; }

.fuss { background: var(--nacht); color: #f6f2ea; padding-block: clamp(3.5rem, 2.5rem + 3vw, 6rem) 2rem; }
.fuss__raster { display: grid; gap: 2.6rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.fuss h4 { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-hell); font-weight: 800; margin-bottom: 1.2rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fuss a, .fuss li { text-decoration: none; color: rgba(246, 242, 234, 0.8); font-size: 0.92rem; transition: color 0.3s var(--ease); }
.fuss a:hover { color: #fff; }
.fuss__marke img { width: 180px; height: auto; margin-bottom: 1.3rem; }
.fuss__marke p { font-size: 0.92rem; color: rgba(246, 242, 234, 0.8); max-width: 32ch; }
.sozial { display: flex; gap: 1.3rem; margin-top: 1.5rem; }
.sozial a { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(246, 242, 234, 0.3); }
.sozial a:hover { border-color: var(--gold-hell); }
.fuss__spruch {
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding-top: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  border-top: 1px solid rgba(246, 242, 234, 0.16);
  font-family: var(--hand); font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem);
  color: var(--gold-hell); text-align: center; max-width: none; line-height: 1.15;
}
.fuss__unten {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; justify-content: space-between;
  font-size: 0.8rem; color: rgba(246, 242, 234, 0.62);
}
.fuss__unten nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }

/* ---------------------------------------------------------
   14. Bewegung beim Sichtbarwerden
   --------------------------------------------------------- */
.auf { opacity: 0; transform: translateY(14px); }
.auf.ist-da {
  opacity: 1; transform: none;
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
}
.auf.ist-da.v1 { transition-delay: 0.07s; }
.auf.ist-da.v2 { transition-delay: 0.14s; }
.auf.ist-da.v3 { transition-delay: 0.21s; }

/* Ueberschriften steigen zeilenweise auf */
.zeilen span { display: block; overflow: hidden; padding: 0.05em 0 0.12em; margin: -0.05em 0 -0.12em; }
.zeilen span > i { display: block; font-style: inherit; transform: translateY(105%); }
.zeilen.ist-da span > i { transform: none; transition: transform 0.75s var(--ease); }
.zeilen.ist-da span:nth-child(2) > i { transition-delay: 0.07s; }
.zeilen.ist-da span:nth-child(3) > i { transition-delay: 0.14s; }
.zeilen.ist-da span:nth-child(4) > i { transition-delay: 0.21s; }

/* Fortschrittsfaden */
.faden { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; background: transparent; }
.faden i { display: block; height: 100%; width: 0; background: var(--haus); transition: width 0.12s linear; }

@media (prefers-reduced-motion: reduce) {
  .auf, .auf.ist-da { opacity: 1; transform: none; transition: none; }
  .zeilen span > i { transform: none; }
  .bild-auf img, .bild-auf > .saisonbild { clip-path: none; }
  .buchungsleiste { transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------
   15. Hilfen
   --------------------------------------------------------- */
.nur-lesbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: 50%; top: 0.6rem; transform: translate(-50%, -200%);
  z-index: 80; background: var(--haus); color: #fff; padding: 0.8rem 1.4rem;
  text-decoration: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800;
  transition: transform 0.3s var(--ease);
}
.sprung:focus { transform: translate(-50%, 0); }

/* Ruhige Faktenreihe statt Laufband */
.band {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 0; padding-block: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border-block: 1px solid var(--line-soft);
}
.band span {
  display: inline-flex; align-items: center;
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-faint); padding-inline: clamp(0.8rem, 2vw, 1.8rem);
}
.band span + span { border-left: 1px solid var(--line-soft); }
@media (max-width: 719px) {
  .band span + span { border-left: 0; }
  .band span { padding-inline: 0.7rem; font-size: 0.6rem; letter-spacing: 0.14em; }
}

/* Im Abendmodus ist auch die feste Kopfzeile dunkel, dort gehoert das helle Logo hin. */
html[data-licht="nacht"].is-gescrollt .marke .logo-hell,
html[data-licht="nacht"] .seite--hell .marke .logo-hell { display: block; }
html[data-licht="nacht"].is-gescrollt .marke .logo-dunkel,
html[data-licht="nacht"] .seite--hell .marke .logo-dunkel { display: none; }

/* Auf dem Handy ist oben kein Platz fuer beide Schalter.
   Dort stehen sie im Menue, wo sie in Ruhe zu treffen sind. */
.menue__schalter { display: none; }
@media (max-width: 599px) {
  .menue__schalter {
    display: flex; flex-wrap: wrap; gap: 0.7rem;
    width: min(100%, 62rem); margin: 1.6rem auto 0;
    padding-top: 1.4rem; border-top: 1px solid rgba(246, 242, 234, 0.14);
  }
  .menue__schalter .schalter { border-color: rgba(246, 242, 234, 0.3); background: rgba(246, 242, 234, 0.06); }
  .menue__schalter .schalter button { color: rgba(246, 242, 234, 0.75); }
  .menue__schalter .schalter button span { display: inline; }
  .menue__schalter .schalter button[aria-pressed="true"] { background: #fdfbf7; color: #1f1b16; }
}

/* =========================================================
   Feinschliff
   Die Dinge, die man einzeln nicht bemerkt und zusammen
   dann doch: Papierkorn, Haarlinien an den Bildern, ein
   ordentliches Formular, gezeichnete Bedienelemente.
   ========================================================= */

/* ---------- Papierkorn ----------
   Ein sehr feines Rauschen über der ganzen Seite. Nimmt den
   Flächen das Digitale, ohne dass man es bewusst sieht. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.032; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
html[data-licht="nacht"] body::after { mix-blend-mode: screen; opacity: 0.045; }
@media print { body::after { display: none; } }

/* ---------- Haarlinie an Bildern ----------
   Ohne sie franst ein helles Foto auf hellem Papier aus. */
.bild::after, .zimmer__bild::after, .tiefe__gross::after,
.aufenthalt__bild::after, .etage__bild::after, .strecke__spur > *::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(31, 27, 22, 0.08);
}
html[data-licht="nacht"] .bild::after,
html[data-licht="nacht"] .zimmer__bild::after,
html[data-licht="nacht"] .tiefe__gross::after {
  box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.1);
}
.zimmer__bild, .tiefe__gross, .aufenthalt__bild, .etage__bild { position: relative; }
.strecke__spur > * { position: relative; }

/* ---------- Kicker bekommt eine kleine Vorlinie ---------- */
/* Kicker ohne Vorlinie. */
.intro-mitte .kicker, .kopfblock--mitte .kicker, .abschluss .kicker,
.hero--mitte .kicker { text-align: center; }

/* ---------- Trennzeichen zwischen Kapiteln ---------- */
/* Trennzeichen: nur die Kanne, keine Linien daneben. */
.raute {
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); padding-block: clamp(1rem, 0.8rem + 1.4vw, 2.2rem);
}

/* ---------- Formular, gezeichnet statt geerbt ---------- */
.feld { position: relative; }
.feld label .pflicht { color: var(--haus-text); margin-left: 0.25rem; }

/* Auswahlfelder bekommen einen eigenen Winkel statt des Systempfeils */
.feld select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.4rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
  background-position: right 1.05rem top 55%, right 0.63rem top 55%;
  background-size: 7px 7px; background-repeat: no-repeat;
  color: var(--ink);
}
.anfrageleiste .feld select, .buchungsleiste .feld select { padding-right: 1.8rem; background-position: right 0.55rem top 58%, right 0.13rem top 58%; }
.feld input[type="date"] { cursor: pointer; }
.feld input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45; cursor: pointer; transition: opacity 0.3s var(--ease);
}
.feld input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }
html[data-licht="nacht"] .feld input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--ink-faint); }

/* Eine gezeichnete Ankreuzflaeche, die zum Rest passt */
.einwilligung input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.1rem; height: 1.1rem; margin: 0.28rem 0 0; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 2px; background: transparent;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.einwilligung input[type="checkbox"]::after {
  content: ""; width: 0.55rem; height: 0.3rem;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg) scale(0.4); opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.einwilligung input[type="checkbox"]:hover { border-color: var(--ink-faint); }
.einwilligung input[type="checkbox"]:checked { background: var(--haus); border-color: var(--haus); }
.einwilligung input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1) translate(1px, -1px); opacity: 1; }
.einwilligung--fehler input[type="checkbox"] { border-color: var(--haus); }

/* Fehlermeldung schiebt sich auf, statt zu springen */
.feld .fehler {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height 0.35s var(--ease), opacity 0.3s var(--ease), margin-top 0.35s var(--ease);
}
.feld--fehler .fehler { max-height: 4rem; opacity: 1; margin-top: 0.1rem; }
.feld .fehler::before { content: "\2192\00a0"; }

/* Der Status oben im Formular kommt eingeblendet */
.formular-status { animation: statusAuf 0.5s var(--ease); }
@keyframes statusAuf { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Fragen: gleitendes Aufklappen ---------- */
.fragen details > p {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  margin-bottom: 0; transition: grid-template-rows 0.42s var(--ease), margin-bottom 0.42s var(--ease);
}
.fragen details > p > span { min-height: 0; overflow: hidden; }
.fragen details[open] > p { grid-template-rows: 1fr; margin-bottom: 1.5rem; }
.fragen summary { position: relative; }
.fragen summary::before {
  content: ""; position: absolute; left: -1rem; right: -1rem; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none;
}
.fragen summary:hover::before { opacity: 1; }
.fragen summary > span { position: relative; }

/* ---------- Galerie: Lupe beim Darüberfahren ---------- */
button.bild { position: relative; }
button.bild::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(14, 11, 8, 0.28); opacity: 0; transition: opacity 0.4s var(--ease);
}
button.bild:hover::before, button.bild:focus-visible::before { opacity: 1; }
button.bild .lupe {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75);
  transform: translate(-50%, -50%) scale(0.8); opacity: 0;
  display: grid; place-items: center; color: #fff; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
button.bild .lupe::before, button.bild .lupe::after {
  content: ""; position: absolute; background: currentColor;
}
button.bild .lupe::before { width: 13px; height: 1px; }
button.bild .lupe::after { width: 1px; height: 13px; }
button.bild:hover .lupe, button.bild:focus-visible .lupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Lichtkasten: Bildunterschrift ---------- */
.lichtkasten__text {
  position: absolute; bottom: 3.4rem; left: 50%; transform: translateX(-50%);
  width: min(92%, 54rem); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}
.lichtkasten img { transition: opacity 0.3s var(--ease); }
.lichtkasten.laedt img { opacity: 0.25; }

/* ---------- Rollbalken ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border: 3px solid var(--paper); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 38%, transparent); }

/* ---------- Auswahl und Markierung ---------- */
::selection { background: color-mix(in srgb, var(--haus) 22%, transparent); color: var(--ink); }
::target-text { background: color-mix(in srgb, var(--gold) 30%, transparent); }

/* content-visibility haben wir wieder ausgebaut: es hat beim Springen zu
   einem Abschnitt leere Flaechen hinterlassen. Die Bilder laden ohnehin
   verzoegert, der Gewinn war den Aerger nicht wert. */

/* ---------- Druck ---------- */
@media print {
  :root { --paper: #fff; --ink: #000; --ink-soft: #333; --line: #bbb; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .topbar, .menue, .buchungsleiste, .faden, .lichtwisch, .anfrageleiste,
  .hinweis-runter, .metazeile, .schalter, .strecke__hinweis, .sprung,
  .lichtkasten, .vergleich__griff, .siegel svg { display: none !important; }
  .hero, .bildkarte, .streifen, .abschluss { min-height: 0; color: #000; }
  .hero::after, .bildkarte::after, .streifen::after, .abschluss::after { display: none; }
  .hero__bild, .bildkarte__bild, .streifen__bild, .abschluss__bild { position: static; }
  .hero h1, .hero__sub, .streifen h2, .streifen p, .abschluss h2, .abschluss p {
    color: #000; text-shadow: none;
  }
  .sec--nacht, .tafel, .rechner__blatt, .aufenthalt__blatt, .fuss {
    background: #fff !important; color: #000 !important;
  }
  .sec--nacht *, .tafel *, .rechner__blatt *, .aufenthalt__blatt *, .fuss * { color: #000 !important; }
  .auf, .bild-auf img, .zeilen span > i { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fragen details > p { grid-template-rows: 1fr; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  section, .zimmer, .tiefe, .fragen details { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* Wenn statt einer Summe ein Satz in der Karte steht, wird er klein gesetzt. */
.aufenthalt__summe b.ist-text {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 700;
  line-height: 1.45; letter-spacing: 0.01em; white-space: normal;
  color: rgba(246, 242, 234, 0.7); max-width: 12rem;
}
.rechner__summe.ist-text { font-family: var(--sans); font-size: 1rem; white-space: normal; }

/* =========================================================
   Das eigene Gesicht

   Bis hierher war die Seite sauber, aber austauschbar. Was
   sie unverwechselbar macht, kommt aus dem Haus: der
   Bierdeckel auf dem Tresen, die Kupferkanne im Namen, die
   handgeschriebene Wortmarke, die Notiz an den Rand.
   Dazu ein Satzspiegel, der bewusst nicht aufgeht.
   ========================================================= */

/* ---------- Der Bierdeckel ----------
   Kein Siegel und kein Abzeichen: ein Bierdeckel. Pappe,
   doppelter Druckring, leicht schief, weil er so liegt. */
.deckel {
  position: relative; flex: 0 0 auto;
  width: clamp(124px, 14vw, 168px); aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  background: #e9e1d0; border-radius: 50%;
  transform: rotate(-6deg);
  box-shadow:
    0 2px 0 #d6cab1,
    0 3px 0 #cdc0a5,
    0 14px 26px rgba(31, 27, 22, 0.16);
  transition: transform 0.6s var(--ease);
}
.deckel::before, .deckel::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.deckel::before { inset: 7%; border: 2px solid var(--haus); opacity: 0.85; }
.deckel::after { inset: 10.5%; border: 1px solid var(--haus); opacity: 0.55; }
.deckel:hover { transform: rotate(-2deg) scale(1.02); }
.deckel__inhalt { position: relative; z-index: 1; display: grid; gap: 0.12rem; width: 78%; }
.deckel__inhalt b {
  font-family: var(--serif); font-weight: 600; line-height: 0.95;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); color: var(--haus);
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.deckel__inhalt span {
  font-family: var(--sans); font-size: 0.52rem; font-weight: 800;
  letter-spacing: 0.17em; text-transform: uppercase; color: #6a5f4c; line-height: 1.5;
}
.deckel--klein { width: clamp(94px, 9.5vw, 118px); transform: rotate(5deg); }
.deckel--klein .deckel__inhalt b { font-size: clamp(0.92rem, 0.8rem + 0.45vw, 1.12rem); }
.deckel--klein .deckel__inhalt span { font-size: 0.46rem; letter-spacing: 0.13em; }
/* Auf dunklem Grund bleibt die Pappe hell, das ist der Witz daran */
html[data-licht="nacht"] .deckel { box-shadow: 0 2px 0 #cdc0a5, 0 3px 0 #bfb096, 0 14px 30px rgba(0, 0, 0, 0.6); }

/* ---------- Die Kupferkanne als Signet ---------- */
.kanne { display: block; color: var(--haus); }
.kanne svg { width: 100%; height: 100%; display: block; }
.kanne--trenner { width: 34px; }

.raute { gap: 1.3rem; }
.raute .kanne { width: 30px; color: var(--gold); opacity: 0.85; }

/* ---------- Handgezogene Betonung ----------
   Ein Strich, der aussieht, als hätte ihn jemand mit dem
   Kugelschreiber gezogen. Er wird beim Sichtbarwerden
   gezeichnet, nicht eingeblendet. */
.betont { position: relative; display: inline-block; white-space: nowrap; }
.betont svg {
  position: absolute; left: -2%; right: -2%; bottom: -0.32em; width: 104%; height: 0.42em;
  overflow: visible; pointer-events: none;
}
.betont svg path {
  fill: none; stroke: var(--haus-text); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  opacity: 0.85;
}
.betont.ist-da svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s var(--ease-soft) 0.25s;
}
.sec--nacht .betont svg path, .auf-bild .betont svg path { stroke: var(--gold-hell); }
@media (prefers-reduced-motion: reduce) { .betont svg path { stroke-dashoffset: 0; } }

/* ---------- Randnotiz ----------
   Steht im äußeren Rand, leicht schief, mit einem kleinen
   Pfeil zum Text. Auf schmalen Bildschirmen rückt sie ein. */
.randnotiz {
  position: relative; font-family: var(--hand); font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.45rem); line-height: 1.2;
  color: var(--ink-faint); transform: rotate(-2.6deg); max-width: 15rem;
  margin-block: 1.4rem;
}
.randnotiz::before {
  content: ""; position: absolute; left: -2.6rem; top: 0.3em;
  width: 2rem; height: 1.3rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cpath d='M2 20C10 6 24 2 37 7' fill='none' stroke='%23665d52' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M30 3l7 4-4 7' fill='none' stroke='%23665d52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0.6;
}
@media (min-width: 1280px) {
  .randnotiz--aussen {
    position: absolute; right: calc(100% + 2.5rem); top: 0; width: 13rem; margin: 0;
    text-align: right;
  }
  .randnotiz--aussen::before { left: auto; right: -2.4rem; transform: scaleX(-1); }
}
@media (max-width: 767px) { .randnotiz { margin-left: 2.8rem; } }

/* ---------- Grosse Kapitelziffer im Rand ---------- */
.kapitelzahl {
  font-family: var(--serif); font-weight: 600; line-height: 0.8;
  font-size: clamp(3.4rem, 2rem + 6vw, 7.5rem);
  color: var(--sand); display: block; margin-bottom: -0.1em;
  font-variant-numeric: lining-nums;
}
html[data-licht="nacht"] .kapitelzahl { color: color-mix(in srgb, var(--ink) 13%, transparent); }

/* ---------- Editorischer Anfang ----------
   Kein mittig gesetzter Block, sondern ein Satzspiegel, der
   bewusst nicht aufgeht: Ziffer links im Rand, Text im
   breiten Feld, Notiz aussen. */
.anfang { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; position: relative; }
@media (min-width: 900px) {
  .anfang { grid-template-columns: minmax(6rem, 0.75fr) minmax(0, 2.4fr) minmax(10rem, 1.05fr); align-items: start; }
  .anfang__rand { grid-column: 1; padding-top: 0.6rem; }
  .anfang__text { grid-column: 2; }
  .anfang__notiz { grid-column: 3; padding-top: 5.5rem; }
}
@media (max-width: 899px) { .anfang__rand, .anfang__notiz { grid-column: 1; } }
.anfang__text > h2 { max-width: 20ch; }

/* Initiale im ersten Absatz */
.initial::first-letter {
  float: left; font-family: var(--serif); font-weight: 500;
  font-size: 3.5em; line-height: 0.78; padding: 0.06em 0.12em 0 0;
  color: var(--haus-text);
}

/* ---------- Geklebtes Foto ----------
   Ein Bild, das aussieht, als hätte es jemand ins Album
   geklebt. Genau einmal auf der Seite, sonst wird es albern. */
.geklebt { position: relative; }
.geklebt::before, .geklebt::after {
  content: ""; position: absolute; z-index: 3; width: 78px; height: 26px;
  background: rgba(233, 225, 208, 0.72);
  box-shadow: 0 1px 4px rgba(31, 27, 22, 0.16);
}
.geklebt::before { top: -11px; left: -16px; transform: rotate(-26deg); }
.geklebt::after { bottom: -11px; right: -16px; transform: rotate(-26deg); }
html[data-licht="nacht"] .geklebt::before, html[data-licht="nacht"] .geklebt::after {
  background: rgba(246, 242, 234, 0.2);
}

/* ---------- Versetzte Bildpaare ----------
   Zwei Bilder, die sich überlappen, statt nebeneinander zu
   stehen. Bricht das brave Raster auf. */
.versatz { position: relative; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 860px) {
  .versatz { grid-template-columns: repeat(12, 1fr); gap: 0; }
  .versatz__gross { grid-column: 1 / span 8; grid-row: 1; z-index: 1; align-self: start; }
  .versatz__klein {
    grid-column: 7 / span 6; grid-row: 1; z-index: 2;
    align-self: end; margin-bottom: -2.5rem;
    border: 8px solid var(--paper); box-shadow: var(--schatten);
  }
  .versatz--gedreht .versatz__gross { grid-column: 5 / span 8; }
  .versatz--gedreht .versatz__klein { grid-column: 1 / span 6; }
  .versatz + * { margin-top: 3.5rem; }
}

/* ---------- Tafel wird zur Schiefertafel ---------- */
.tafel {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
    var(--nacht);
  border: 10px solid #4b3a25;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--schatten-soft);
}
.tafel h3 { font-family: var(--hand); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); color: var(--gold-hell); }
.tafel dd { font-family: var(--hand); font-size: 1.25rem; }

/* ---------- Zimmerpreis als Deckel ----------
   Der Deckel liegt auf dem Foto, nicht daneben. Er muss innerhalb
   des Bildrahmens bleiben, der schneidet ab. */
.zimmer { position: relative; }
.zimmer__bild .deckel--klein {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
}

/* =========================================================
   Brett „jetzt im Haus"
   Links das Ziffernblatt mit dem Frühstücksfenster, rechts
   der Satz, daneben die Zahl, die gerade zählt, darunter der
   ganze Tag als Band mit einer Marke auf der echten Uhrzeit.
   ========================================================= */
.jetzt {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  padding: clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  display: grid; gap: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}
.jetzt__kopf { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .jetzt__kopf { grid-template-columns: auto 1fr auto; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); } }

/* Ziffernblatt */
.jetzt__uhr { width: clamp(96px, 11vw, 132px); justify-self: center; }
.jetzt__uhr svg { width: 100%; height: auto; display: block; }
.jetzt__uhr .blatt { fill: none; stroke: var(--line); stroke-width: 1.2; }
.jetzt__uhr .striche line { stroke: var(--ink-faint); stroke-width: 1.4; opacity: 0.55; }
.jetzt__uhr .striche .strich-lang { stroke: var(--ink-soft); stroke-width: 2; opacity: 0.9; }
.jetzt__uhr .fenster {
  fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; opacity: 0.5;
}
.jetzt[data-lage="fruehstueck"] .jetzt__uhr .fenster { opacity: 1; stroke: var(--haus); }
.jetzt__uhr .zeiger { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.jetzt__uhr .zeiger--min { stroke-width: 1.6; }
.jetzt__uhr .mitte { fill: var(--haus); }

/* Satz */
.jetzt__text { display: grid; gap: 0.4rem; }
.jetzt__lage {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: start;
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--ink-faint);
}
.jetzt__lage i { width: 7px; height: 7px; border-radius: 50%; background: var(--haus); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .jetzt__lage i { animation: pochen 2.8s var(--ease) infinite; }
}
@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--haus) 45%, transparent); }
  60% { box-shadow: 0 0 0 7px transparent; }
}
.jetzt__lage i.ruht { background: var(--ink-faint); animation: none; }
.jetzt h3 { font-size: clamp(1.2rem, 1.05rem + 0.85vw, 1.7rem); }
.jetzt p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; max-width: 46ch; }

/* Die Zahl, die gerade zählt */
.jetzt__zahl { text-align: center; justify-self: center; display: grid; gap: 0.2rem; min-width: 7rem; }
.jetzt__zahl b {
  display: block; font-family: var(--serif); font-weight: 500; line-height: 0.95;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); color: var(--haus-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.jetzt__zahl span {
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-faint); line-height: 1.4;
}

/* Der Tag als Band */
.tagesband { display: grid; gap: 0.5rem; }
.tagesband__spur {
  position: relative; height: 2.6rem; border-radius: 2px; overflow: visible;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.tagesband__teil {
  position: absolute; top: 0; bottom: 0; display: grid; place-items: center;
  overflow: hidden; border-right: 1px solid var(--paper);
}
.tagesband__teil:last-of-type { border-right: 0; }
.tagesband__teil i {
  font-style: normal; font-size: 0.58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.13em; white-space: nowrap;
  padding-inline: 0.4rem;
}
.tagesband__teil--fruehstueck { background: color-mix(in srgb, var(--gold) 34%, transparent); }
.tagesband__teil--fruehstueck i { color: #4a3a18; }
/* Das Abreisefenster ist eine halbe Stunde breit, da passt keine Schrift hinein. */
.tagesband__teil--abreise { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.tagesband__teil--abreise i { display: none; }
.tagesband__teil--tag { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.tagesband__teil--tag i { color: var(--ink-faint); }
.tagesband__teil--abend { background: color-mix(in srgb, var(--haus) 82%, transparent); }
.tagesband__teil--abend i { color: #fff; }
html[data-licht="nacht"] .tagesband__teil--fruehstueck i { color: #2a2109; }

/* Die Marke auf der echten Uhrzeit */
.tagesband__jetzt {
  position: absolute; top: -0.45rem; bottom: -0.45rem; width: 2px; z-index: 3;
  background: var(--ink); transform: translateX(-1px);
  transition: left 0.6s var(--ease);
}
.tagesband__jetzt b {
  position: absolute; bottom: calc(100% + 0.3rem); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-family: var(--sans);
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
  padding: 0.16rem 0.4rem; border-radius: 2px; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.tagesband__jetzt b::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--ink);
}
.tagesband__skala { position: relative; height: 1rem; }
.tagesband__skala span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 0.56rem; font-weight: 700; color: var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (max-width: 639px) {
  .tagesband__teil i { font-size: 0.5rem; letter-spacing: 0.06em; }
}

/* ---------- Schrittfolge ----------
   Für alles, was einen Ablauf hat: Anfrage, Gruppenbuchung, Anreise. */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); counter-reset: none; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(2, 1fr); gap: clamp(1.8rem, 1.2rem + 2vw, 3rem); } }
.schritt { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.schritt__nr {
  font-family: var(--serif); font-weight: 500; font-size: 1rem; line-height: 1;
  color: var(--gold); font-variant-numeric: lining-nums tabular-nums;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; flex: 0 0 auto;
}
.schritt h4 { margin-bottom: 0.3rem; }
.schritt p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
.sec--nacht .schritt__nr { color: var(--gold-hell); border-color: rgba(246, 242, 234, 0.25); }

/* Notiz auf der Schiefertafel */
.tafel__notiz {
  margin: 1.4rem 0 0; font-family: var(--hand); font-size: 1.15rem;
  color: rgba(246, 242, 234, 0.75); line-height: 1.25; transform: rotate(-1.4deg);
}

/* Zwei Spalten für längere Aufzählungen */
.zwei-spalten { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .zwei-spalten { grid-template-columns: 1fr 1fr; } }

/* Kleine Kennzahlenreihe, ruhiger als die große Zahlenzeile */
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
@media (min-width: 760px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }
.kennzahl b {
  display: block; font-family: var(--serif); font-weight: 500; line-height: 1;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: var(--haus-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.kennzahl span {
  display: block; margin-top: 0.5rem; font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--ink-faint); line-height: 1.5;
}
.sec--nacht .kennzahl b { color: var(--gold-hell); }
.sec--nacht .kennzahl span { color: rgba(246, 242, 234, 0.7); }

/* Der Deckel liegt auch auf der Tiefenkarte über dem Foto. */
.tiefe__gross .deckel--klein { position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 3; }

/* Die Kanne als Zeichen über einem mittig gesetzten Kopfblock. */
.kopfblock--mitte .kanne { margin-inline: auto; color: var(--gold); }

/* Sprachwahl */
.sprachwahl { position: relative; font: 600 .72rem/1 var(--sans); letter-spacing: .12em; }
.sprachwahl summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; height: 2.25rem; padding: 0 .7rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; opacity: .9; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary::after { content: ""; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sprachwahl[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.sprachwahl__liste { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; min-width: 11rem; padding: .4rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: .6rem; box-shadow: var(--schatten); }
.sprachwahl__liste a { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: .4rem; text-decoration: none; color: var(--ink); letter-spacing: .1em; }
.sprachwahl__liste a span { font-weight: 400; letter-spacing: 0; font-size: .9rem; text-transform: none; color: var(--ink-soft); }
.sprachwahl__liste a:hover, .sprachwahl__liste a[aria-current] { background: var(--linen); }
.is-gescrollt .topbar__rechts .sprachwahl, .seite--hell .topbar__rechts .sprachwahl { color: var(--ink); }
.topbar__rechts .sprachwahl { color: #fff; }
.menue__schalter .sprachwahl { color: inherit; }
.menue__schalter .sprachwahl__liste { right: auto; left: 0; top: auto; bottom: calc(100% + .5rem); }
@media (max-width: 960px) { .topbar__rechts .sprachwahl { display: none; } }

/* Kopfzeile: Menü erst ab 1500 px ausgeschrieben, Schalter wandern darunter ins Menü */
@media (min-width: 1200px) and (max-width: 1499px) { .nav { display: none; } }
@media (max-width: 1699px) { .topbar__rechts .schalter { display: none; } }
@media (min-width: 1500px) and (max-width: 1699px) { .nav a { padding: 0.7rem 0.55rem; letter-spacing: 0.12em; } }

/* ---------------------------------------------------------
   Themenseiten (SEO-Cluster): Ortszeile im H1, Kopf mit Tafel,
   Bild im Kapitel, Anfrage mitten im Text, Querverweise, Fusszeile
   --------------------------------------------------------- */
.h1-ort > i {
  font-family: var(--sans);
  font-size: clamp(0.66rem, 0.6rem + 0.25vw, 0.8rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.28em; line-height: 1.4;
  color: #eddcb8; padding-bottom: 0.9rem;
}
.extra-kopf { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .extra-kopf--tafel { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; } }
.extra-kopf .lead { margin: 0; max-width: 62ch; }
.extra-kopf__tafel .tafel { margin: 0; }
.liste { padding-left: 1.2rem; display: grid; gap: 0.45rem; margin: 1.2rem 0 0; }
.extra-bild { margin-top: 1.8rem; }
.extra-cta {
  margin-top: 1.8rem; padding: 1.3rem 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem;
  align-items: center; justify-content: space-between;
  background: var(--linen); border-radius: 4px;
}
.extra-cta p { margin: 0; max-width: 46ch; font-weight: 600; }
.weiter__titel { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); margin-bottom: 1.2rem; }
.weiter__liste { display: grid; gap: 0.2rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .weiter__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .weiter__liste { grid-template-columns: 1fr 1fr 1fr; } }
.weiter__liste a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.weiter__liste a svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform 0.3s var(--ease); }
.weiter__liste a:hover svg { transform: translateX(4px); }
.fuss__themen { margin-top: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem); }
.fuss__themen div { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.fuss__themen a { font-size: 0.86rem; }
/* Innenseiten auf dem Handy: Brotkrumen unter die Kopfzeile, nicht auf das Logo */
@media (max-width: 759px) { .hero--innen .hero__innen { padding-top: 6.2rem; } .hero--innen .krumen { margin-bottom: 1.2rem; } }

/* Handy: Zeiten-Tafel und Split-Spalten dürfen nicht breiter als der Bildschirm werden */
.split > * { min-width: 0; }
@media (max-width: 599px) {
  .tafel dt { flex: 0 1 auto; min-width: 0; }
  .tafel dd { white-space: normal; text-align: right; min-width: 0; }
}