/* ==========================================================================
   Lokale Schriften - identische woff2-Dateien und Angaben wie von Google
   ausgeliefert (Subsets: latin + latin-ext). Keine externen Requests.
   ========================================================================== */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/marcellus-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../../fonts/marcellus-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../../../../fonts/karla-variable-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../../../../fonts/karla-variable-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Silberbach - Wald & Spa. Demo von Meiers Seiten
   Farbwelt: Moorgruen (durchgehend dunkel), Jade, Nebel, Terracotta
   Schriften: Marcellus (Ueberschriften, Versalien mit weiter Laufweite)
              + Karla (Fliesstext, Zahlen, Formulare)
   Haltung: Die Seite laeuft von oben bis unten auf dunklem Grund. Bilder
            sind gross und ruhig, Text steht in schmalen Spalten daneben.
            Signatur ist der Bogen: Hochformate und Kacheln sind oben
            gerundet wie ein Torbogen.
   Bewusst anders als die uebrigen Demos: keine hellen Karten auf hellem
   Grund, kein Rasterlayout aus gleich grossen Kacheln, sondern ein
   Vollbild-Slider als Auftakt und danach ganzflaechige Bildbloecke.
   Vom Vorbild uebernommen (jagdhof-roehrnbach.de): der wischbare
   Vollbild-Slider, die Anfrageleiste unter dem Kopf, die nummerierte
   Gruendeliste und die ausklappbaren Textbloecke am Seitenende.
   ========================================================================== */

/* --------------------------------------------------- 1. Tokens ----------- */

:root {
  /* --- 1.1 Primitive ----------------------------------------------------- */
  --moor-950: #08110d;
  --moor-900: #0d1a14;
  --moor-850: #112017;
  --moor-800: #16281e;
  --moor-700: #1e3729;
  --moor-600: #2a4a37;

  --jade-500: #4f9b80;
  --jade-400: #6cb69a;
  --jade-300: #9ed3bd;
  --jade-100: #d5ece2;

  --mist-100: #e6efe9;
  --mist-300: #c2d3c8;
  --mist-500: #a8bcb0;
  --mist-700: #7b9186;

  --terracotta: #c47a54;
  --terracotta-soft: #dda184;

  /* --- 1.2 Semantisch ---------------------------------------------------- */
  --bg: var(--moor-900);
  --bg-deep: var(--moor-950);
  --bg-raised: var(--moor-800);
  --bg-band: var(--moor-850);

  --text: var(--mist-100);
  --text-soft: var(--mist-500);
  --text-faint: var(--mist-700);
  --heading: #f2f7f3;

  --accent: var(--jade-400);
  --accent-deep: var(--jade-500);
  --accent-pale: var(--jade-100);
  --figure: var(--terracotta-soft); /* Preise und Kennzahlen */

  --line: rgba(158, 211, 189, 0.16);
  --line-strong: rgba(158, 211, 189, 0.3);

  /* --- 1.3 Komponente ---------------------------------------------------- */
  --container: 1240px;
  --measure: 62ch;
  --arch: 999px 999px 6px 6px; /* Bogen: die Signatur dieser Seite */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;
}

/* --------------------------------------------------- 2. Grundlagen ------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Die Seite ist durchgehend dunkel. Ohne diese Angabe bleiben die Teile,
     die der Browser selbst zeichnet, hell: Scrollbalken, Schreibmarke und
     vor allem der Datumswaehler der Anfrageleiste. Eine Zeile statt eines
     nachgebauten Scrollbalkens.                                          */
  color-scheme: dark;
}

::selection {
  background: var(--jade-400);
  color: var(--moor-950);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Karla', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  font-family: 'Marcellus', 'Times New Roman', serif;
  font-weight: 400;
  color: var(--heading);
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
}

h2 {
  font-size: clamp(1.9rem, 3.9vw, 3rem);
}

h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  margin-bottom: var(--space-2);
}

h4 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-pale);
  margin: 0 0 var(--space-1);
}

p {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

a:hover {
  color: var(--accent-pale);
}

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

/* Nur fuer Vorleseprogramme sichtbar - traegt die Ueberschrift des Heros
   und die Tabellenbeschriftungen.                                        */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--moor-950);
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.container--narrow {
  max-width: 860px;
}

.section {
  padding: clamp(4rem, 9vw, var(--space-7)) 0;
}

.section--tight {
  padding: clamp(3rem, 6vw, var(--space-5)) 0;
}

.section--band {
  background: var(--bg-band);
}

.section--deep {
  background: var(--bg-deep);
}

/* Eyebrow: Marcellus in Versalien, davor ein kurzer Strich ---------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-2);
  font-family: 'Marcellus', serif;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.eyebrow--center {
  justify-content: center;
}

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.65;
  color: var(--text);
}

.muted {
  color: var(--text-soft);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, var(--space-5));
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head--center p {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------- 3. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: 'Marcellus', serif;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--moor-950);
}

.btn--primary:hover {
  background: var(--accent-pale);
  color: var(--moor-950);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-pale);
  background: rgba(108, 182, 154, 0.08);
}

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

/* Textlink mit Pfeil ------------------------------------------------------ */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Marcellus', serif;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.4rem;
}

.link svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.25s var(--ease);
}

.link:hover {
  border-bottom-color: var(--accent);
}

.link:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------- 4. Kopfzeile -------- */
/* Liegt ueber dem Vollbild-Hero und wird erst beim Scrollen gefuellt.       */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(8, 17, 13, 0.94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 5.25rem;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--heading);
}

.brand-name {
  font-family: 'Marcellus', serif;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.brand-sub {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

.main-nav a {
  position: relative;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 0.5rem 0;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.15rem;
  height: 1px;
  background: var(--accent);
  transition: right 0.3s var(--ease);
}

.main-nav a:hover::after,
.main-nav a[aria-current='page']::after {
  right: 0;
}

.main-nav a[aria-current='page'] {
  color: var(--accent-pale);
}

.nav-cta {
  flex: none;
}

.nav-cta-mobile {
  display: none;
}

/* Menuetaste: drei Striche, die sich zum Kreuz drehen --------------------- */
.nav-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 1.35rem;
  height: 1px;
  background: var(--text);
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}

.nav-toggle span {
  top: 50%;
  margin-top: -0.5px;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  left: 0;
  transform: none;
}

.nav-toggle span::before {
  top: -0.42rem;
}

.nav-toggle span::after {
  top: 0.42rem;
}

/* --------------------------------------------------- 5. Hero-Slider ------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--moor-950);
}

.hero-slides {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale3d(1.06, 1.06, 1);
  transition: transform 8s linear;
  backface-visibility: hidden;
  will-change: transform;
}

.hero-slide.is-active img {
  transform: scale3d(1, 1, 1);
}

/* Zwei Verlaeufe: unten fuer den Text, oben fuer die Kopfzeile             */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(8, 17, 13, 0.94) 0%,
      rgba(8, 17, 13, 0.78) 30%,
      rgba(8, 17, 13, 0.34) 58%,
      rgba(8, 17, 13, 0.05) 82%
    ),
    linear-gradient(to bottom, rgba(8, 17, 13, 0.6) 0%, rgba(8, 17, 13, 0) 24%);
}

/* Der Verlauf der Folie sorgt fuer die Stimmung, dieser hier fuer die
   Lesbarkeit: er haengt am Textblock und traegt deshalb auf jeder der fuenf
   Folien gleich weit - auch auf dem hellen Waldsee im Morgenlicht, wo der
   Folienverlauf allein zu schwach ist.                                   */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(9rem, 16vh, 12rem);
  padding-top: 8rem;
}

.hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 17, 13, 0.86) 0%,
    rgba(8, 17, 13, 0.76) 45%,
    rgba(8, 17, 13, 0.45) 76%,
    rgba(8, 17, 13, 0) 100%
  );
}

.hero-inner > .container {
  position: relative;
  z-index: 1;
}

/* Ab Tablet steht das Zitat nur links. Der Verlauf darf dann auch nur dort
   liegen - sonst legt er sich ueber die Fensterfront, die den Blick in den
   Wald zeigt. Die Maske blendet ihn zur Oberkante hin aus, damit die Kante
   des Textblocks nicht als Streifen im Bild steht.                       */
@media (min-width: 861px) {
  .hero-inner::before {
    background: linear-gradient(
      to right,
      rgba(8, 17, 13, 0.88) 0%,
      rgba(8, 17, 13, 0.8) 32%,
      rgba(8, 17, 13, 0.38) 60%,
      rgba(8, 17, 13, 0) 82%
    );
    -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 100%);
    mask-image: linear-gradient(to top, #000 58%, transparent 100%);
  }
}

/* Alle fuenf Textblocke liegen in derselben Rasterzelle uebereinander. So
   bestimmt der laengste Satz die Hoehe, und der Text springt beim Wechsel
   nicht - der Hero steht unten (align-items: flex-end), jede Hoehenaenderung
   waere sonst als Ruckeln nach oben sichtbar.                            */
.hero-caption {
  display: grid;
  max-width: 46rem;
}

/* Die Zitate sind Zitate, keine Ueberschriften: fuenf wechselnde <h1> haben
   die Seite ohne verwertbare Ueberschrift gelassen - vorgelesen wurde ein
   Kneipp-Satz, nicht der Name des Hauses. Der steht jetzt als einzige <h1>
   unsichtbar davor, die Zitate stehen als <blockquote> und sehen aus wie
   zuvor.                                                                  */
.hero-caption blockquote {
  margin: 0;
  font-family: 'Marcellus', 'Times New Roman', serif;
  font-weight: 400;
  color: var(--heading);
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-wrap: balance;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
}

/* Quellenangabe direkt unter dem Zitat, klein --------------------------- */
.hero-caption cite {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-pale);
}

/* Sachliche Kurzbeschreibung, bewusst schlicht statt literarisch --------- */
.hero-desc {
  margin: var(--space-2) 0 0;
  max-width: 28rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--mist-500);
}

/* Die Textebene wechselt mit der Folie ------------------------------------ */
.hero-text {
  grid-area: 1 / 1;
  opacity: 0;
  /* visibility statt display: nimmt den Block aus dem Vorlesebaum, laesst
     aber seinen Platz im Raster stehen. */
  visibility: hidden;
}

.hero-text.is-active {
  opacity: 1;
  visibility: visible;
  animation: heroText 0.9s var(--ease) both;
}

@keyframes heroText {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Bedienung: Zaehler, Striche, Pfeile ------------------------------------ */
.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  /* muss ueber der Anfrageleiste bleiben, die den Hero um 3.5rem ueberlappt */
  bottom: clamp(4.75rem, 7vh, 6rem);
  z-index: 3;
}

.hero-controls-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero-count {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--mist-300);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.hero-count b {
  font-weight: 600;
  color: var(--heading);
}

.hero-dots {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 12rem;
  max-width: 22rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-dots li {
  flex: 1;
  display: flex;
}

.hero-dot {
  flex: 1;
  height: 2.75rem; /* Trefferflaeche, der Strich sitzt in der Mitte */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.hero-dot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(230, 239, 233, 0.28);
}

.hero-dot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.hero-dot:hover::after,
.hero-dot[aria-current='true']::after {
  transform: scaleX(1);
}

/* Laeuft die Folie automatisch weiter, waechst der Strich mit - die Dauer
   muss zu DELAY in script.js passen */
.hero-dot[aria-current='true'].is-running::after {
  animation: dotFill 6s linear both;
}

@keyframes dotFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-arrows {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
}

.hero-arrow {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(8, 17, 13, 0.35);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hero-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--moor-950);
}

.hero-arrow svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Der Hinweis gilt nur fuer Finger - mit der Maus wischt niemand */
.hero-hint {
  display: none;
  position: absolute;
  right: clamp(1.25rem, 5vw, 3rem);
  top: 50%;
  z-index: 3;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mist-500);
  pointer-events: none;
}

@media (pointer: coarse) {
  .hero-hint {
    display: block;
  }

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

/* --------------------------------------------------- 6. Anfrageleiste ---- */
/* Schiebt sich unter den Hero und ueberlappt ihn leicht.                    */

.bookbar-wrap {
  position: relative;
  z-index: 10;
  margin-top: -3.5rem;
}

.bookbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(4, 10, 7, 0.55);
}

.bookbar-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line);
}

.bookbar-field label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.bookbar-field input,
.bookbar-field select {
  border: 0;
  background: transparent;
  color: var(--heading);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.2rem 0;
  min-height: 2rem;
  width: 100%;
  color-scheme: dark;
}

.bookbar-field select option {
  background: var(--bg-raised);
  color: var(--heading);
}

.bookbar .btn {
  border-radius: 0;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

/* --------------------------------------------------- 7. Intro ------------ */

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.intro-figure {
  margin: 0;
}

.intro-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--arch);
}

.intro-figure figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

/* --------------------------------------------------- 8. Welten ----------- */
/* Ganzflaechige Bildbloecke statt Karten: das Bild ist der Block.           */

.worlds {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
}

.world {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 52vh, 34rem);
  padding: var(--space-3);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  background: var(--moor-950);
}

.world img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.world::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 17, 13, 0.94) 6%,
    rgba(8, 17, 13, 0.5) 46%,
    rgba(8, 17, 13, 0.15) 100%
  );
  transition: background-color 0.4s var(--ease);
}

.world:hover img,
.world:focus-visible img {
  transform: scale(1.05);
}

.world-body {
  position: relative;
  z-index: 2;
  width: 100%;
}

.world-body h3 {
  margin-bottom: 0.35rem;
}

.world-body p {
  font-size: 0.95rem;
  color: var(--mist-300);
  margin-bottom: var(--space-2);
}

.world-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Marcellus', serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.world-more svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s var(--ease);
}

.world:hover .world-more svg {
  transform: translateX(4px);
}

/* --------------------------------------------------- 9. Gruende ---------- */
/* Nummerierte Liste in zwei Spalten, direkt vom Vorbild uebernommen.        */

.reasons {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: reason;
}

.reasons li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.75rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  counter-increment: reason;
}

.reasons li::before {
  content: counter(reason, decimal-leading-zero);
  font-family: 'Marcellus', serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.15rem;
}

/* --------------------------------------------------- 10. Kennzahlen ------ */

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.figures div {
  background: var(--bg-deep);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--space-2);
  text-align: center;
}

.figures dt {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}

.figures dd {
  margin: 0;
  font-family: 'Marcellus', serif;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--figure);
}

/* --------------------------------------------------- 11. Angebote -------- */

.offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.offer:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.offer-figure {
  margin: 0;
  overflow: hidden;
}

.offer-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.offer-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.offer-nights {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.offer-body p {
  font-size: 0.97rem;
  color: var(--text-soft);
}

.offer-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: 0.93rem;
  color: var(--text-soft);
}

.offer-list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.28rem 0;
}

.offer-list svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.42rem;
  color: var(--accent);
}

.offer-price {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.offer-price .amount {
  font-family: 'Marcellus', serif;
  font-size: 1.7rem;
  color: var(--figure);
  line-height: 1;
}

.offer-price .unit {
  font-size: 0.8rem;
  color: var(--text-faint);
  letter-spacing: 0.08em;
}

/* --------------------------------------------------- 13. Bildpaar -------- */
/* Zwei Hochformate im Bogen, versetzt gesetzt.                              */

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.pair figure {
  margin: 0;
}

.pair figure:nth-child(2) {
  margin-top: clamp(2rem, 7vw, 5rem);
}

.pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--arch);
}

.pair figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* --------------------------------------------------- 14. Ausklapper ------ */

.accordion {
  border-top: 1px solid var(--line);
}

.accordion details {
  border-bottom: 1px solid var(--line);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Marcellus', serif;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  color: var(--heading);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: '';
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform 0.3s var(--ease);
}

.accordion details[open] summary::after {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}

.accordion summary:hover {
  color: var(--accent-pale);
}

.accordion-body {
  padding: 0 0 var(--space-3);
}

.accordion-body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------- 15. Abschluss-CTA --- */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(4rem, 10vw, 7.5rem) var(--space-3);
  background: var(--moor-950);
}

.cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(8, 17, 13, 0.55) 0%,
    rgba(8, 17, 13, 0.9) 78%
  );
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.cta-inner p {
  margin-left: auto;
  margin-right: auto;
}

.cta .btn-row {
  justify-content: center;
}

/* --------------------------------------------------- 16. Listen ---------- */
/* Preiszeilen fuer Zimmer und Anwendungen: Zeile statt Karte.              */

.rows {
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: 15rem 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}

/* Zimmerzeilen kommen ohne Bild aus: fuer die Zimmer selbst gibt es kein
   eigenes Bildmaterial, und ein beliebiges Spa-Foto waere irrefuehrend. */
.row--plain {
  grid-template-columns: 1fr auto;
}

.row-figure {
  margin: 0;
}

.row-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.row-body h3 {
  margin-bottom: 0.5rem;
}

.row-body p {
  color: var(--text-soft);
  font-size: 0.99rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.tags li {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--line);
  padding: 0.35rem 0.7rem;
}

.row-price {
  text-align: right;
  min-width: 10rem;
}

.row-price .amount {
  display: block;
  font-family: 'Marcellus', serif;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--figure);
}

.row-price .unit {
  display: block;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

/* Anwendungsliste ohne Bild ---------------------------------------------- */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.price-list--inset {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

.price-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.price-list h3 {
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}

.price-list p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.price-list .amount {
  font-family: 'Marcellus', serif;
  font-size: 1.35rem;
  color: var(--figure);
  white-space: nowrap;
}

.price-list .duration {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.15rem;
  text-align: right;
}

/* --------------------------------------------------- 17. Kacheln --------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.tile {
  margin: 0;
}

.tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--arch);
}

.tile figcaption {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* Kleine Merkmalsspalten -------------------------------------------------- */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.notes--spaced {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.note {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-2);
}

.note p {
  font-size: 0.97rem;
  color: var(--text-soft);
  margin: 0;
}

.note strong {
  display: block;
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--figure);
  margin-bottom: 0.3rem;
}

/* --------------------------------------------------- 18. Seitenkopf ------ */
/* Unterseiten: kein Slider, sondern ein ruhiges Bildband.                   */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 62vh, 38rem);
  overflow: hidden;
  background: var(--moor-950);
}

.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(8, 17, 13, 0.94) 4%,
      rgba(8, 17, 13, 0.42) 55%,
      rgba(8, 17, 13, 0.2) 100%
    ),
    linear-gradient(to bottom, rgba(8, 17, 13, 0.65) 0%, rgba(8, 17, 13, 0) 26%);
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 9rem;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.page-hero-inner p {
  color: var(--mist-300);
  max-width: 44ch;
}

/* --------------------------------------------------- 19. Formular -------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-raised);
  color: var(--heading);
  font-family: inherit;
  font-size: 1rem;
  color-scheme: dark;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.65;
}

.field select option {
  background: var(--bg-raised);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(108, 182, 154, 0.25);
}

.field .error {
  display: none;
  font-size: 0.85rem;
  color: var(--terracotta-soft);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--terracotta);
}

.field.has-error .error {
  display: block;
}

.consent-field {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-soft);
}

.consent-field input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.42rem;
  flex: none;
  accent-color: var(--accent-deep);
}

.consent-field .error {
  display: none;
  font-size: 0.85rem;
  color: var(--terracotta-soft);
}

.consent-field.has-error .error {
  display: block;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--text-faint);
  max-width: none;
}

.form-success {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent-deep);
  background: rgba(79, 155, 128, 0.12);
}

.form-success.is-visible {
  display: block;
}

.form-success p:last-child {
  margin-bottom: 0;
}

/* Kontaktspalte ----------------------------------------------------------- */
.contact-aside {
  border: 1px solid var(--line);
  padding: var(--space-3);
  background: var(--bg-raised);
}

.contact-aside dl {
  margin: 0;
}

.contact-aside dt {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--space-3);
}

.contact-aside dt:first-child {
  margin-top: 0;
}

.contact-aside dd {
  margin: 0.35rem 0 0;
  color: var(--text);
}

.hours {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.hours li:last-child {
  border-bottom: 0;
}

.hours span:last-child {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- 20. Fusszeile ------- */

.site-footer {
  background: var(--moor-950);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0 var(--space-3);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: var(--space-2);
}

.site-footer p {
  color: var(--text-soft);
}

.site-footer a {
  color: var(--text-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent-pale);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  padding: 0.28rem 0;
}

.demo-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-faint);
}

.demo-note a {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  padding-top: var(--space-3);
  font-size: 0.85rem;
  color: var(--text-faint);
}

.footer-bottom p {
  margin: 0;
  color: inherit;
}

/* --------------------------------------------------- 21. Einblenden ------ */

.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------- 22. Responsive ------ */

@media (max-width: 1024px) {
  .worlds {
    grid-template-columns: 1fr;
  }

  .world {
    min-height: 20rem;
  }

  .offers,
  .tiles,
  .notes {
    grid-template-columns: repeat(2, 1fr);
  }

  .figures {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .row {
    grid-template-columns: 12rem 1fr;
  }

  .row--plain {
    grid-template-columns: 1fr auto;
  }

  .row-price {
    grid-column: 2;
    text-align: left;
  }

  /* Zeilen ohne Bild behalten die rechte Spalte, dort passt der Preis noch */
  .row--plain .row-price {
    text-align: right;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: block;
    order: 3;
  }

  .nav-cta {
    display: none;
  }

  .nav-cta-mobile {
    display: inline-flex;
    margin-top: var(--space-2);
  }

  /* Vollflaechiges Menue statt Klappliste - auf dunklem Grund ruhiger */
  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    padding: 6rem clamp(1.5rem, 8vw, 3rem) 3rem;
    background: var(--moor-950);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
      visibility 0.3s;
    overflow-y: auto;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .main-nav a {
    font-family: 'Marcellus', serif;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    text-transform: none;
    padding: 0.5rem 0;
  }

  .main-nav a::after {
    display: none;
  }

  .nav-toggle {
    position: relative;
    z-index: 95;
  }

  .nav-toggle[aria-expanded='true'] span {
    background: transparent;
  }

  .nav-toggle[aria-expanded='true'] span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .intro,
  .pair {
    grid-template-columns: 1fr;
  }

  .pair figure:nth-child(2) {
    margin-top: 0;
  }

  .reasons {
    columns: 1;
  }

  .bookbar {
    grid-template-columns: 1fr 1fr;
  }

  .bookbar-field:nth-child(2) {
    border-right: 0;
  }

  .bookbar-field:nth-child(3) {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .bookbar .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .offers,
  .tiles,
  .notes,
  .figures {
    grid-template-columns: 1fr;
  }

  .row {
    grid-template-columns: 1fr;
  }

  .row-price {
    grid-column: 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Zwei Datumsfelder nebeneinander werden hier zu schmal zum Tippen */
  .form-grid {
    grid-template-columns: 1fr;
  }

  .price-list li {
    grid-template-columns: 1fr;
  }

  .price-list .amount,
  .price-list .duration {
    text-align: left;
  }

  /* Die Punkte rutschen hier in eine eigene Zeile - der Text darueber
     braucht entsprechend mehr Luft nach unten */
  .hero-inner {
    padding-bottom: clamp(12rem, 22vh, 15rem);
  }

  .hero-controls-inner {
    gap: var(--space-2);
  }

  .hero-dots {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .hero-arrows {
    margin-left: auto;
  }

  .bookbar-wrap {
    margin-top: -2rem;
  }
}

/* --------------------------------------------------- 23. Bewegung aus ---- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-slide img {
    transform: none;
  }
}