/* ==========================================================================
   Ferienhäuser Minkner — Designsystem

   Übernommen aus dem Spreezeit-Hotels-Projekt (dessen Tokens wiederum 1:1
   aus dem Stylesheet von belvita.it stammen): Akzent #9d89c8, dunkle
   Sektionen #426675, Text #0a0a0a, Grau #959ea9, heller Grund #f6f8f9,
   Linien #dfdfdf/#e6e6e6.

   Typografie nach demselben Prinzip: html auf 62.5% (1rem = 10px), danach
   glatte rem-Werte (5rem Hero, 4rem Sektionstitel, 1.6rem Fließtext).
   Skaliert wird über die Wurzelgröße pro Breakpoint, nicht über clamp().

   Ergänzt gegenüber der Vorlage: Spec-Tabellen der Häuser, Lagekarte mit
   Gehzeiten, Ausflugslisten, Anfrageformular, Galerie mit Lightbox,
   Belegungskalender, Unterseiten-Kopf und Rechtstexte.
   ========================================================================== */

:root{
  /* Farben */
  --lilac:      #9d89c8;
  --lilac-dark: #8a74ba;
  --lilac-tint: #e9e5f1;
  --teal:       #426675;
  --teal-dark:  #365662;
  --ink:        #0a0a0a;
  --ink-2:      #393939;
  --grey:       #959ea9;
  --line:       #dfdfdf;
  --line-2:     #e6e6e6;
  --soft:       #f6f8f9;
  --star:       #ffc107;

  --font-display: 'Figtree', system-ui, sans-serif;
  --font-text:    'Inter', system-ui, sans-serif;

  /* Radien */
  --r-s:  .6rem;
  --r-m:  .8rem;
  --r-l:  .9rem;
  --r-xl: 1.4rem;
  --r-pill: 10rem;

  /* Raster */
  --gut: 4rem;
  --sec: 10rem;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.32,.72,0,1);

  --z-book: 60;
  --z-nav:  70;
  --z-menu: 90;
  --z-box: 120;
}

html{ font-size:62.5%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (max-width:1600px){ html{ font-size:56.3%; } }
@media (max-width:1366px){ html{ font-size:50%;   } }
@media (max-width:1024px){ html{ font-size:62.5%; } }
@media (max-width:350px){  html{ font-size:56.3%; } }
@media (max-width:320px){  html{ font-size:50%;   } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

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

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--font-text);
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

[hidden]{ display:none !important; }
::selection{ background:var(--lilac); color:#fff; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--lilac);
  outline-offset:3px;
  border-radius:.4rem;
}

.skip{
  position:fixed; top:2rem; left:2rem; z-index:200;
  background:var(--ink); color:#fff;
  padding:1.2rem 2rem; border-radius:var(--r-pill);
  transform:translateY(-400%);
  transition:transform .3s var(--e-out);
}
.skip:focus{ transform:translateY(0); }

.wrap{ width:min(100% - 2 * var(--gut), 150rem); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2 * var(--gut), 96rem); margin-inline:auto; }

/* <picture> muss die Box seines Containers annehmen, sonst greift
   height:100% am <img> nicht und object-fit bleibt wirkungslos. */
.hero__media picture,
.subhero__media picture,
.houses__bg picture,
.house__core picture,
.zone picture,
.band__photo picture,
.foot__bg picture{ display:block; width:100%; height:100%; }

/* ---------------------------------------------------------------- Typo -- */

.h-hero{
  font-family:var(--font-display);
  font-weight:300;
  font-size:5rem;
  line-height:1;
  letter-spacing:-.01em;
  margin:0;
}
.h2{
  font-family:var(--font-display);
  font-weight:300;
  font-size:4rem;
  line-height:1.2;
  letter-spacing:-.005em;
  margin:0 0 .6em;
}
.h3{
  font-family:var(--font-display);
  font-weight:300;
  font-size:2.8rem;
  line-height:1.2;
  margin:0;
}
.h4{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.9rem;
  line-height:1.2;
  margin:0 0 .5em;
}

.rte b,.rte strong{ font-weight:600; color:var(--ink); }

.lead{
  font-size:1.6rem;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 2em;
  max-width:62rem;
}
.lead--wide{ max-width:82rem; }
.lead--light{ color:rgba(255,255,255,.86); }
.lead--light b,.lead--light strong{ color:#fff; }
.h2--light,.h3--light,.h-hero--light{ color:#fff; }
.mb0{ margin-bottom:0; }

.eyebrow{
  display:block;
  font-family:var(--font-display);
  font-size:1.4rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--lilac);
  margin:0 0 1.4em;
}
.eyebrow--light{ color:rgba(255,255,255,.75); }

.note{ font-size:1.4rem; line-height:1.6; color:var(--grey); }

/* -------------------------------------------------------------- Buttons -- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  padding:1.4rem 3rem;
  border:0; border-radius:var(--r-pill);
  background:var(--lilac); color:#fff;
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:500; line-height:1.2;
  cursor:pointer;
  transition:background-color .4s var(--e-out), transform .4s var(--e-soft);
}
.btn:hover{ background:var(--lilac-dark); }
.btn:active{ transform:scale(.98); }
.btn svg{ width:1.6rem; height:1.6rem; flex:none; }

.btn--ghost{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.26); }

.btn--outline{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--outline:hover{ background:var(--soft); box-shadow:inset 0 0 0 1px var(--grey); }

.btn--white{ background:#fff; color:var(--ink); }
.btn--white:hover{ background:var(--lilac-tint); }

/* Derselbe Umriss-Knopf, aber auf dunklem Grund: dort ist der schwarze Text
   von .btn--outline unlesbar. */
.btn--outline.btn--onlight{
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.btn--outline.btn--onlight:hover{
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px #fff;
}

.tlink{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:500;
  color:var(--lilac);
}
.tlink svg{ width:1.5rem; height:1.5rem; transition:transform .4s var(--e-soft); }
.tlink:hover svg{ transform:translateX(.4rem); }
.tlink--light{ color:#fff; }

.ctarow{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.ctarow--center{ justify-content:center; }

/* ------------------------------------------------------------------ Nav -- */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding:2rem var(--gut);
  color:#fff;
  transition:background-color .5s var(--e-soft),
             box-shadow .5s var(--e-soft),
             color .5s var(--e-soft);
}
.nav.is-scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line-2);
}
.nav__inner{
  display:flex; align-items:center; gap:4rem;
  width:min(100%,168rem); margin-inline:auto;
}

.brand{ display:flex; align-items:center; gap:1.2rem; flex:none; }
.brand__mark{
  position:relative; width:3.4rem; height:3.4rem; flex:none;
  border-radius:100%;
  box-shadow:inset 0 0 0 1px currentColor;
  opacity:.85;
}
/* Angedeutetes Giebeldach im Kreis — die Marke sind zwei kleine Häuser */
.brand__mark::before{
  content:''; position:absolute; left:50%; top:1rem; translate:-50% 0;
  width:1.1rem; height:1.1rem;
  border-left:1px solid currentColor; border-top:1px solid currentColor;
  rotate:45deg;
}
.brand__mark::after{
  content:''; position:absolute; left:50%; bottom:1rem; translate:-50% 0;
  width:1.6rem; height:1px; background:currentColor;
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{
  font-family:var(--font-display); font-weight:500;
  font-size:2.2rem; letter-spacing:.01em;
}
.brand__sub{
  font-size:.95rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.7; margin-top:.3rem;
}

.nav__links{ display:flex; gap:3.2rem; margin-inline:auto; }
.nav__links a{
  position:relative;
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:400;
  padding-block:.4rem;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e-soft);
}
.nav__links a:hover::after,.nav__links a.is-current::after{ transform:scaleX(1); }
.nav__links a.is-current::after{ background:var(--lilac); }

.nav__side{ display:flex; align-items:center; gap:2.4rem; flex:none; }
.nav__side > a:not(.btn){ font-family:var(--font-display); font-size:1.6rem; }

.burger{
  display:none; position:relative; flex:none;
  width:4.4rem; height:4.4rem; border:0; border-radius:100%;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  cursor:pointer;
}
.nav.is-scrolled .burger{ background:var(--soft); box-shadow:inset 0 0 0 1px var(--line); }
.burger span{
  position:absolute; left:50%; width:1.8rem; height:1.5px; border-radius:2px;
  background:currentColor;
  transition:transform .5s var(--e-soft);
}
.burger span:nth-child(1){ transform:translate(-50%,-.45rem); }
.burger span:nth-child(2){ transform:translate(-50%,.45rem); }
body.menu-open .burger span:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform:translate(-50%,0) rotate(-45deg); }

/* ------------------------------------------------------- Mobile Overlay -- */

.menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--teal);
  color:#fff;
  display:grid; place-items:center;
  opacity:0; transition:opacity .45s var(--e-soft);
}
.menu.is-open{ opacity:1; }
.menu__inner{ width:min(100% - 6rem,56rem); }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  display:flex; align-items:baseline; gap:1.6rem;
  font-family:var(--font-display); font-weight:300;
  font-size:3.2rem; line-height:1.3;
  padding-block:.5rem;
  border-bottom:1px solid rgba(255,255,255,.16);
  opacity:0; transform:translateY(2rem);
}
.menu__links a span{ font-family:var(--font-text); font-size:1.2rem; opacity:.5; flex:none; }
.menu.is-open .menu__links a{
  opacity:1; transform:translateY(0);
  transition:opacity .6s var(--e-out), transform .7s var(--e-out);
}
.menu.is-open .menu__links a:nth-child(1){ transition-delay:.05s; }
.menu.is-open .menu__links a:nth-child(2){ transition-delay:.11s; }
.menu.is-open .menu__links a:nth-child(3){ transition-delay:.17s; }
.menu.is-open .menu__links a:nth-child(4){ transition-delay:.23s; }
.menu.is-open .menu__links a:nth-child(5){ transition-delay:.29s; }
.menu.is-open .menu__links a:nth-child(6){ transition-delay:.35s; }
.menu__foot{
  display:flex; flex-wrap:wrap; gap:.6rem 3rem;
  margin-top:4rem; font-size:1.6rem; opacity:.8;
}

/* ----------------------------------------------------------------- Hero -- */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:0 var(--gut) 16rem;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 44%;
  transform:scale(1.1);
  animation:kenburns 26s var(--e-soft) forwards;
}
@keyframes kenburns{ to{ transform:scale(1); } }

.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.62) 100%),
    /* Die Kirchenfassade steht in der Sonne — links zusätzlich abdunkeln,
       sonst verschwindet die weiße Headline in der hellen Wand. */
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 68%);
}

.hero__body{ width:min(100%,150rem); margin-inline:auto; }
.hero__lead{
  font-size:1.6rem; line-height:1.7;
  color:rgba(255,255,255,.9);
  max-width:52rem;
  margin:2.4rem 0 3.2rem;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero__title .line__i{ display:block; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1.2rem; }

/* Versprechen — bei Belvita ein großer Kreis unten rechts */
.promise{
  position:absolute; right:var(--gut); bottom:16rem; z-index:3;
  width:47rem;
}
.promise__btn{
  display:flex; align-items:center; gap:1.6rem;
  margin-left:auto;
  padding:1.4rem 1.4rem 1.4rem 2.6rem;
  border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  color:var(--ink);
  font-family:var(--font-display); font-size:1.6rem; font-weight:500;
  cursor:pointer;
  transition:background-color .4s var(--e-out);
}
.promise__btn:hover{ background:#fff; }
.promise__btn i{
  display:grid; place-items:center;
  width:3.2rem; height:3.2rem; flex:none;
  border-radius:100%; background:var(--lilac); color:#fff;
  transition:transform .5s var(--e-soft);
}
.promise__btn i svg{ width:1.6rem; height:1.6rem; }
.promise__btn[aria-expanded="true"] i{ transform:rotate(135deg); }

.promise__body{
  position:absolute; right:0; bottom:calc(100% + 1.6rem);
  width:47rem; height:47rem;
  border-radius:100%;
  background:var(--lilac);
  color:#fff;
  display:grid; place-items:center;
  /* Der Text steht in einem Kreis: an den Rändern bleibt weniger Platz als
     die Kastenbreite verspricht. Das Polster muss großzügiger sein als bei
     einem Rechteck, sonst berühren die Zeilen die Rundung. */
  padding:7.2rem;
  overflow:hidden;
}
.promise__body h3{
  font-family:var(--font-display); font-weight:300;
  font-size:2.2rem; line-height:1.2; margin:0 0 1.2rem;
}
.promise__body ul{ margin:0; padding:0; list-style:none; }
.promise__body li{
  font-size:1.4rem; line-height:1.5;
  padding-block:.6rem;
  border-top:1px solid rgba(255,255,255,.28);
}
.promise__body li:first-child{ border-top:0; }

/* ------------------------------------------------------ Unterseiten-Kopf -- */

.subhero{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:min(62svh,60rem);
  padding:16rem var(--gut) 6rem;
  color:#fff; overflow:hidden;
  background:var(--teal);
}
.subhero--flat{ min-height:auto; padding-bottom:5rem; }
.subhero__media{ position:absolute; inset:0; z-index:-2; }
.subhero__media img{ width:100%; height:100%; object-fit:cover; }
.subhero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.66) 100%);
}
.subhero__body{ width:min(100%,150rem); margin-inline:auto; }
.subhero .lead{ margin:2.4rem 0 0; }

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin-bottom:2rem;
  font-size:1.4rem; color:rgba(255,255,255,.7);
}
.crumb a:hover{ color:#fff; }
.crumb span[aria-hidden]{ opacity:.5; }

/* ---------------------------------------------------------------- Intro -- */

.intro{ padding:var(--sec) 0; background:#fff; }
.intro--soft{ background:var(--soft); }
.intro__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8rem; align-items:center;
}
.intro__grid--rev .intro__media{ order:-1; }

/* Text- und Bildspalte oben und unten auf einer Linie: die Überschrift
   beginnt auf Höhe des ersten Bildes, die Knöpfe sitzen auf Höhe der
   unteren Bildkante. Sonst hängt unter der kürzeren Spalte Leerraum. */
.intro__grid--top{ align-items:stretch; }
.intro__grid--top .intro__copy{ display:flex; flex-direction:column; }
.intro__grid--top .intro__copy .ctarow{ margin-top:auto; padding-top:4rem; }
.intro__copy .rte p{ font-size:1.6rem; line-height:1.8; color:var(--ink-2); margin:0 0 1.4em; }
.intro__copy .rte p:last-child{ margin-bottom:0; }

.pillars{
  list-style:none; margin:4rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 4rem;
}
.pillars li{ padding:2.4rem 0; border-top:1px solid var(--line); }
.pillars h4{ margin-bottom:.4em; }
.pillars p{ margin:0; font-size:1.4rem; line-height:1.6; color:var(--grey); }

.intro__media{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.intro__media figure{ margin:0; }
.intro__media img{ width:100%; border-radius:var(--r-xl); }
.intro__media figure:first-child{ grid-column:span 2; }
.intro__media figcaption{
  padding-top:1rem;
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
.intro__single{ margin:0; }
.intro__single img{ width:100%; border-radius:var(--r-xl); }
.intro__single figcaption{
  padding-top:1rem;
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}

/* ------------------------------------------------------------ Hausauswahl -- */

.houses{
  position:relative; isolation:isolate;
  /* Der obere Abstand muss die Weiß-Ausblendung überbrücken,
     sonst steht die Überschrift im milchigen Bereich. */
  padding:34rem 0 var(--sec);
  color:#fff;
  overflow:hidden;
  background:var(--teal);
}
.houses__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; opacity:.55; }
.houses__bg img{
  position:absolute; left:0; top:-10%;
  width:100%; height:120%; object-fit:cover;
}
.houses__fade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom,
      #fff 0, rgba(255,255,255,.92) 70px,
      rgba(160,176,182,.7) 160px,
      rgba(66,102,117,.7) 250px,
      rgba(66,102,117,.72) 320px),
    linear-gradient(to bottom, rgba(66,102,117,.5), rgba(54,86,98,.88));
}
.houses__head{ max-width:78rem; margin-bottom:6rem; }

/* Zwei Häuser: mittige Zweierspalte statt Belvitas Dreierraster */
.houses__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem;
  max-width:112rem;
}

.house{ display:flex; flex-direction:column; }
/* display:block ist Pflicht — die Karte ist ein <a>, und aspect-ratio
   greift an einem Inline-Element nicht. */
.house__core{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  aspect-ratio:16/11;
}
.house__core img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--e-soft);
}
.house:hover img{ transform:scale(1.05); }
.house__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.41) 48.58%, rgba(0,0,0,.52) 100%);
}
.house__badge{
  position:absolute; top:2rem; left:2rem;
  padding:.8rem 1.5rem; border-radius:var(--r-pill);
  font-family:var(--font-display);
  font-size:1.2rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  backdrop-filter:blur(6px);
}
.house__price{
  position:absolute; right:2rem; bottom:2rem;
  display:flex; align-items:baseline; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:var(--r-pill);
  background:#fff; color:var(--ink);
}
.house__price b{ font-family:var(--font-display); font-size:1.8rem; font-weight:500; }
.house__price span{ font-size:1.3rem; color:var(--grey); }

.house__meta{ padding-top:2rem; display:flex; flex-direction:column; flex:1; }
.house__meta .h3{ margin-bottom:.3rem; }
.house__sub{ margin:0; font-size:1.6rem; color:rgba(255,255,255,.7); }

/* Alles Wichtige ohne Klick sichtbar */
.house__spec{
  margin:2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 3rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.house__spec div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.house__spec div:nth-last-child(-n+2){ border-bottom:0; }
.house__spec dt{
  font-size:1.2rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6); white-space:nowrap;
}
.house__spec dd{
  margin:0; text-align:right;
  font-family:var(--font-display); font-size:1.5rem; font-weight:500;
}

/* Der Knopf steht mittig unter der Karte und ist das Ziel der Karte —
   vorher war es ein Textlink neben einer Preisnotiz und ging unter. */
.house__foot{
  display:flex; justify-content:center;
  margin-top:auto; padding-top:2.8rem;
}
.house__foot .btn{ min-width:22rem; }

/* ------------------------------------------------------- Ausstattungsstrip -- */

.zones{ background:var(--teal); color:#fff; padding:0 0 var(--sec); }
.zones__head{ max-width:70rem; padding-block:0 6rem; }

.strip{ display:flex; gap:1.2rem; padding-inline:var(--gut); height:56rem; }
.zone{
  position:relative; flex:1 1 0; min-width:0;
  border-radius:var(--r-xl);
  overflow:hidden; cursor:pointer; isolation:isolate;
  transition:flex-grow .8s var(--e-soft);
}
.zone.is-active{ flex-grow:2.6; }
.zone img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:filter .8s var(--e-soft), transform 1s var(--e-soft);
  filter:brightness(.8);
}
.zone.is-active img{ filter:brightness(.92); }
.zone__grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.41) 48.58%, rgba(0,0,0,.66) 100%);
}
.zone__ico{
  position:absolute; top:2.4rem; left:2.4rem;
  display:grid; place-items:center;
  width:5rem; height:5rem; border-radius:100%;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  transition:background-color .6s var(--e-soft);
}
.zone__ico svg{ width:2.4rem; height:2.4rem; }
.zone.is-active .zone__ico{ background:var(--lilac); box-shadow:none; }

.zone__body{ position:absolute; left:0; right:0; bottom:0; padding:3rem; }
.zone__body h3{
  font-family:var(--font-display); font-weight:300;
  font-size:2.2rem; line-height:1.2; margin:0;
  /* Die Titel hießen hier früher „Küche" und „Wohnen" und passten in eine
     Zeile. Ausflugsziele heißen „Kahnfahrt ab dem Großen Hafen" — sie
     müssen umbrechen dürfen, sonst schneidet die schmale Karte sie ab. */
  white-space:normal;
  transform-origin:left bottom;
  transition:transform .8s var(--e-soft);
}
/* Nur die offene Karte vergrößert den Titel. Bei mehrzeiligen Namen wäre
   das Hochskalieren zu viel, deshalb etwas zurückhaltender als früher. */
.zone.is-active .zone__body h3{ transform:scale(1.18); }
.zone__more{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .8s var(--e-soft), opacity .5s var(--e-soft);
}
.zone__more > *{ overflow:hidden; min-height:0; }
.zone.is-active .zone__more{ grid-template-rows:1fr; opacity:1; transition-delay:0s,.2s; }
.zone__more p{
  margin:1.6rem 0 2rem; max-width:42rem;
  font-size:1.4rem; line-height:1.7; color:rgba(255,255,255,.88);
}

/* ------------------------------------------------------------------ Lage -- */

.locate{ background:var(--soft); padding:var(--sec) 0; }
.locate__head{ max-width:78rem; margin-bottom:6rem; }
.locate__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:6rem; align-items:start;
}
.mapfig{ margin:0; }
.mapfig img{ width:100%; border-radius:var(--r-xl); }
.mapfig figcaption{
  display:flex; align-items:baseline; gap:1rem;
  padding-top:1.4rem;
  font-size:1.4rem; line-height:1.6; color:var(--grey);
}
/* Handgezeichneter Kringel statt Kartennadel */
.mapfig figcaption::before{
  content:''; flex:none; translate:0 -.1rem;
  width:1.3rem; height:1.05rem;
  border:1.5px solid #d6412f; border-radius:50%;
  rotate:-8deg;
}

.walk{ list-style:none; margin:0; padding:0; }
.walk li{
  display:grid; grid-template-columns:8rem minmax(0,1fr); gap:2rem;
  padding:1.8rem 0;
  border-top:1px solid var(--line);
}
.walk li:first-child{ border-top:0; padding-top:0; }
.walk b{
  font-family:var(--font-display); font-weight:500;
  font-size:1.6rem; color:var(--lilac);
}
.walk span{ display:block; font-family:var(--font-display); font-size:1.8rem; font-weight:400; line-height:1.3; }
.walk em{ display:block; margin-top:.3rem; font-style:normal; font-size:1.4rem; color:var(--grey); }

/* ------------------------------------------------------- Ausflugsziele --- */

.places{ list-style:none; margin:0; padding:0; }
.place{
  display:grid;
  grid-template-columns:6rem minmax(0,20rem) minmax(0,16rem) minmax(0,1fr);
  /* Zwei Zeilen mit Namen: die Beschreibung steht unter Name, Entfernung
     und Schlagworten und darf über die volle Breite laufen. Fehlt sie,
     kollabiert die Zeile auf null — deshalb ist der Zeilenabstand klein. */
  grid-template-areas:
    "no name meta tags"
    ".  text text text";
  column-gap:2rem;
  row-gap:1rem;
  align-items:baseline;
  padding:2.4rem 0;
  border-top:1px solid var(--line);
}
.place__no{ grid-area:no; }
.place__name{ grid-area:name; }
.place__meta{ grid-area:meta; }
.place__tags{ grid-area:tags; }
.place__text{
  grid-area:text;
  max-width:72rem;
  font-size:1.45rem; line-height:1.65;
  color:var(--ink-2);
}
.places--light .place__text{ color:rgba(255,255,255,.78); }
.places--light .place{ border-color:rgba(255,255,255,.18); }
.place__no{
  font-family:var(--font-display); font-size:1.4rem; font-weight:500;
  color:var(--lilac);
}
.place__name{ font-family:var(--font-display); font-size:2.2rem; font-weight:400; line-height:1.2; }
.place__meta{ font-size:1.4rem; color:var(--grey); }
.places--light .place__meta{ color:rgba(255,255,255,.6); }
.place__tags{ display:flex; flex-wrap:wrap; gap:.8rem; }
.place__tags span{
  padding:.5rem 1.2rem; border-radius:var(--r-pill);
  font-size:1.3rem; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.places--light .place__tags span{ color:rgba(255,255,255,.86); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }

/* --------------------------------------------------------------- Fakten -- */

.band{ position:relative; background:var(--soft); padding-top:var(--sec); }
.band--white{ background:#fff; }
.band__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6rem; align-items:center;
  padding-bottom:8rem;
}
.proof{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem 2.4rem;
}
.proof strong{
  display:block;
  font-family:var(--font-display); font-weight:300;
  font-size:4rem; line-height:1; color:var(--lilac);
  margin-bottom:.6rem;
}
.proof span{ font-size:1.4rem; line-height:1.5; color:var(--grey); display:block; max-width:24rem; }

.band__photo{ position:relative; }
.band__photo img{
  width:100%; height:62rem; object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 22%);
}
.band__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 46%,
    rgba(10,10,10,.22) 74%,
    rgba(10,10,10,.72) 93%,
    var(--ink) 100%);
}
/* ------------------------------------------------------------- Checkliste -- */

.checklist{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
}
.checklist li{
  position:relative;
  padding:1.6rem 0 1.6rem 3.4rem;
  border-top:1px solid var(--line);
  font-size:1.5rem; line-height:1.7; color:var(--ink-2);
}
.checklist li:first-child{ border-top:0; }
.checklist li::before{
  content:''; position:absolute; left:.4rem; top:2.4rem;
  width:1rem; height:.5rem;
  border-left:1.5px solid var(--lilac); border-bottom:1.5px solid var(--lilac);
  rotate:-45deg;
}
.checklist b{ font-weight:600; color:var(--ink); }
.checklist--light li{ border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.82); }
.checklist--light b{ color:#fff; }

/* ------------------------------------------------------------ Eckdatenband -- */

.specs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.specs li{ padding:2.4rem 3rem 2.4rem 0; border-left:1px solid var(--line); padding-left:3rem; }
.specs li:first-child{ border-left:0; padding-left:0; }
.specs b{
  display:block;
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--grey);
  margin-bottom:.8rem;
}
.specs span{ font-family:var(--font-display); font-size:2.2rem; font-weight:400; line-height:1.2; }
.specs--light{ border-color:rgba(255,255,255,.22); }
.specs--light li{ border-left-color:rgba(255,255,255,.22); }
.specs--light b{ color:rgba(255,255,255,.6); }

/* --------------------------------------------------------------- Galerie -- */

.gallery{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem;
}
.gallery figure{ margin:0; cursor:zoom-in; }
.gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-xl);
  transition:transform .8s var(--e-soft);
}
.gallery figure:hover img{ transform:scale(1.02); }
.gallery figcaption{
  padding-top:1rem;
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}

.lightbox{
  position:fixed; inset:0; z-index:var(--z-box);
  display:grid; place-items:center;
  padding:var(--gut);
  background:rgba(10,10,10,.92);
  opacity:0; transition:opacity .35s var(--e-soft);
}
.lightbox.is-open{ opacity:1; }
.lightbox img{ max-width:100%; max-height:86svh; border-radius:var(--r-m); }
.lightbox__close{
  position:absolute; top:2.4rem; right:2.4rem;
  width:4.8rem; height:4.8rem; border:0; border-radius:100%;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer;
}
.lightbox__close:hover{ background:rgba(255,255,255,.26); }

/* -------------------------------------------------------------- Kalender -- */

.calbox{
  background:#fff; border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:3rem;
  margin-bottom:3rem;
}
.calbox__head{
  display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem;
  align-items:baseline; justify-content:space-between;
  margin-bottom:2.4rem;
}
.calbox__head h3{ margin:0; }
.calbox .tfw-calendar-app{ min-height:8rem; }

/* ------------------------------------------------------------- Anfrage --- */

.ask{ background:#fff; padding:var(--sec) 0; }
.ask__head{ max-width:78rem; margin-bottom:6rem; }
.ask__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:6rem; align-items:start;
}

/* Weiß mit Haarlinie statt --soft: die Karte steht auch in einer
   --soft-Sektion und wäre dort sonst unsichtbar. */
.host{
  background:#fff; border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:3.5rem;
}
.host small{
  display:block;
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); margin-bottom:1rem;
}
.host b{
  display:block;
  font-family:var(--font-display); font-weight:400;
  font-size:2.8rem; line-height:1.2; margin-bottom:2rem;
}
.host__rows{ display:flex; flex-direction:column; gap:1.2rem; }
.host__rows > *{
  display:flex; align-items:center; gap:1.2rem;
  font-size:1.6rem; color:var(--ink-2);
}
.host__rows svg{ width:1.8rem; height:1.8rem; flex:none; color:var(--lilac); }
.host__rows a:hover{ color:var(--ink); }

.form{ display:grid; gap:2rem; }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.field{ display:flex; flex-direction:column; gap:.8rem; }
.field--full{ grid-column:span 2; }
.field label{
  font-family:var(--font-display);
  font-size:1.3rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; color:var(--grey);
}
.field input,.field select,.field textarea{
  font:inherit; font-size:1.6rem; color:var(--ink);
  background:#fff;
  border:0; border-radius:var(--r-m);
  box-shadow:inset 0 0 0 1px var(--line);
  padding:1.4rem 1.6rem;
  transition:box-shadow .3s var(--e-out);
}
.field textarea{ min-height:12rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; box-shadow:inset 0 0 0 1.5px var(--lilac);
}
.field--check{
  grid-column:span 2;
  flex-direction:row; align-items:flex-start; gap:1.2rem;
}
.field--check input{ width:2rem; height:2rem; flex:none; margin-top:.2rem; accent-color:var(--lilac); }
.field--check label{
  font-family:var(--font-text); font-size:1.4rem; line-height:1.6;
  letter-spacing:0; text-transform:none; font-weight:400; color:var(--ink-2);
}
.field--check a{ color:var(--lilac); text-decoration:underline; text-underline-offset:3px; }

.form__foot{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
  align-items:center; justify-content:space-between;
}
.form__note{ margin:0; font-size:1.4rem; color:var(--grey); max-width:38rem; }

/* --------------------------------------------------------------- Footer -- */

.foot{
  position:relative; isolation:isolate;
  background:var(--ink); color:#fff;
  padding:var(--sec) 0 12rem;
  overflow:hidden;
}
.foot--slim{ padding:var(--sec) 0 6rem; }
.foot__bg{ position:absolute; inset:0; z-index:-2; opacity:.12; overflow:hidden; }
.foot__bg img{
  position:absolute; left:0; top:-8%;
  width:100%; height:116%; object-fit:cover; object-position:50% 30%;
}
.foot__lead{ max-width:64rem; margin-bottom:8rem; }
.foot__cols{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4rem; padding-bottom:6rem;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.foot__col h4{
  font-family:var(--font-display); font-weight:400;
  font-size:2.2rem; line-height:1.2; margin:0 0 1.6rem;
}
.foot__col p{ margin:0 0 1.4rem; font-size:1.6rem; line-height:1.7; color:rgba(255,255,255,.72); }
.foot__col a{ color:rgba(255,255,255,.72); transition:color .3s var(--e-out); }
.foot__col a:hover{ color:#fff; }
.foot__col ul{ list-style:none; margin:0; padding:0; }
.foot__col li{ margin-bottom:.8rem; font-size:1.6rem; }
.foot__bar{
  display:flex; flex-wrap:wrap; gap:1.6rem 3rem;
  justify-content:space-between; align-items:center;
  padding-top:3rem;
  font-size:1.4rem; color:rgba(255,255,255,.5);
}
.foot__bar nav{ display:flex; gap:2.4rem; }
.foot__bar a:hover{ color:#fff; }

/* ------------------------------------------------------------ Anfrageleiste -- */

.bookbar{
  position:fixed; z-index:var(--z-book);
  left:50%; bottom:2.4rem; translate:-50% 0;
  width:min(100% - 3rem,74rem);
  transition:transform .7s var(--e-soft), opacity .4s var(--e-soft);
}
.js .bookbar{ transform:translateY(160%); opacity:0; }
.js .bookbar.is-in{ transform:translateY(0); opacity:1; }

.bookbar__pill{
  display:flex; align-items:center; gap:.4rem;
  padding:.8rem .8rem .8rem 2rem;
  border-radius:var(--r-pill);
  background:#fff;
  box-shadow:0 .4rem 1.2rem rgba(0,0,0,.06), 0 2.4rem 5rem rgba(0,0,0,.14);
}
.bf{
  position:relative;
  display:flex; align-items:center; gap:1.2rem;
  flex:1 1 0; min-width:0;
  padding:.8rem 1rem;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color .3s var(--e-out);
}
.bf:hover{ background:var(--soft); }
.bf > i{ display:block; width:2rem; height:2rem; flex:none; color:var(--ink); }
.bf > i svg{ width:100%; height:100%; }
.bf__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.bf__k{ font-family:var(--font-display); font-size:1.4rem; font-weight:500; color:var(--ink); }
.bf__v{ font-size:1.4rem; color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bf.is-set .bf__v{ color:var(--lilac); font-weight:500; }
.bf--guests .g-num{ font-weight:500; }
.bf input[type="date"]{
  position:absolute; inset:0; opacity:0;
  width:100%; height:100%; border:0; padding:0; margin:0;
  cursor:pointer; font:inherit;
}
.bf__sep{ width:1px; height:2.8rem; background:var(--line); flex:none; }

.bf--guests{ cursor:default; flex:0 0 auto; }
.bf--guests .bf__v{ overflow:visible; text-overflow:clip; }
.stepper{ display:flex; gap:.3rem; margin-left:auto; flex:none; }
.stepper button{
  width:2.4rem; height:2.4rem; border:0; border-radius:100%;
  background:var(--soft); color:var(--ink);
  font-size:1.4rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background-color .3s var(--e-out);
}
.stepper button:hover{ background:var(--lilac-tint); }

.bookbar__go{
  display:flex; align-items:center; gap:.8rem; flex:none;
  padding:1.4rem 2.4rem;
  border:0; border-radius:var(--r-pill);
  background:var(--lilac); color:#fff;
  font-family:var(--font-display); font-size:1.6rem; font-weight:500;
  cursor:pointer;
  transition:background-color .35s var(--e-out);
}
.bookbar__go i{ display:block; width:1.8rem; height:1.8rem; }
.bookbar__go:hover{ background:var(--lilac-dark); }

/* ------------------------------------------------------------ Rechtstexte -- */

.legal{ padding:calc(var(--sec) + 8rem) 0 var(--sec); background:#fff; }
.legal__wrap{ width:min(100% - 2 * var(--gut),76rem); margin-inline:auto; }
.legal h1{
  font-family:var(--font-display); font-weight:300;
  font-size:4rem; line-height:1.15; margin:0 0 3rem;
}
.legal h2{
  font-family:var(--font-display); font-weight:400;
  font-size:2.2rem; line-height:1.25;
  margin:4rem 0 1.2rem; padding-top:2.4rem;
  border-top:1px solid var(--line);
}
.legal h3{ font-family:var(--font-display); font-size:1.7rem; font-weight:500; margin:2.4rem 0 .8rem; }
.legal p,.legal li{ font-size:1.6rem; line-height:1.8; color:var(--ink-2); }
.legal p{ margin:0 0 1.4rem; }
.legal ul{ margin:0 0 1.4rem; padding-left:2rem; }
.legal li{ margin-bottom:.6rem; }
.legal a{ color:var(--lilac); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--ink); }
.legal__back{
  display:inline-flex; align-items:center; gap:.8rem;
  margin-bottom:3rem;
  font-family:var(--font-display);
  font-size:1.3rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
.legal__back:hover{ color:var(--ink); }
.legal__back svg{ width:1.4rem; height:1.4rem; transition:transform .5s var(--e-soft); }
.legal__back:hover svg{ transform:translateX(-.4rem); }
.legal__note{
  margin-top:4rem; padding:2.4rem 3rem;
  border-radius:var(--r-xl);
  background:var(--lilac-tint);
  font-size:1.5rem; line-height:1.7; color:var(--ink-2);
}

/* ------------------------------------------------------- Scroll-Reveals -- */
/* Ohne JavaScript bleibt alles sichtbar – erst .js blendet zum Reveal aus. */
.js .rv,.js [data-rv]{ opacity:0; }

/* ------------------------------------------------------------ Responsive -- */

@media (max-width:1200px){
  .nav__links{ display:none; }
  .nav__side .btn,.nav__side > a:not(.btn){ display:none; }
  .burger{ display:block; }
  .nav__inner{ justify-content:space-between; }
  .nav__side{ margin-left:auto; }
}

@media (max-width:1024px){
  :root{ --gut:2.4rem; --sec:6rem; }
  .h-hero{ font-size:3.3rem; }
  .h2{ font-size:2.8rem; }
  .h3{ font-size:2.2rem; }
  .band__caption{ font-size:2rem; }
  .proof strong{ font-size:2.8rem; }
  .hero__lead,.lead{ font-size:1.4rem; }

  .intro__grid{ grid-template-columns:1fr; gap:4rem; }
  .intro__grid--rev .intro__media{ order:0; }
  .pillars{ grid-template-columns:1fr; }
  .locate__grid{ grid-template-columns:1fr; gap:4rem; }
  .band__grid{ grid-template-columns:1fr; gap:4rem; }
  .band__photo img{ height:38rem; }
  .ask__grid{ grid-template-columns:1fr; gap:4rem; }
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .specs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .specs li:nth-child(odd){ border-left:0; padding-left:0; }
  .specs li:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .specs--light li:nth-child(-n+2){ border-bottom-color:rgba(255,255,255,.22); }

  .place{
    grid-template-columns:4rem minmax(0,1fr);
    grid-template-areas:
      "no   name"
      ".    meta"
      ".    text"
      ".    tags";
    row-gap:.8rem;
  }
  .place__text{ font-size:1.35rem; }
  .place__meta{ grid-column:2; }
  .place__tags{ grid-column:2; }
}

@media (max-width:880px){
  .houses{ padding-top:28rem; }
  .houses__grid{ grid-template-columns:1fr; gap:4.5rem; }
  .subhero{ min-height:auto; padding-top:14rem; }

  .strip{ flex-direction:column; height:auto; gap:1.2rem; }
  /* Gleiche Höhe in beiden Zuständen: die Karten öffnen sich hier beim
     Scrollen von selbst, eine wachsende Karte würde den Text unter dem
     Finger wegschieben. Der Text blendet im Bild ein statt es zu dehnen. */
  .zone{ flex:none; height:34rem; }
  .zone.is-active{ height:34rem; }
  .zone__body h3{ white-space:normal; }

  .foot__cols{ grid-template-columns:1fr; gap:3.5rem; }

  /* Hero wird zur Spalte, sonst rutscht das Versprechen als Flex-Item
     neben den Text und erzeugt horizontalen Überlauf. */
  .hero{ flex-direction:column; justify-content:center; align-items:stretch; padding-bottom:12rem; }
  .hero__body{ padding-top:10rem; width:100%; }
  .promise{ position:static; width:100%; margin-top:3rem; }
  .promise__btn{ margin-left:0; width:100%; justify-content:space-between; }
  .promise__body{
    position:static; width:100%; height:auto; margin-top:1.2rem;
    border-radius:var(--r-xl); padding:3rem; place-items:start;
  }
}

@media (max-width:767px){
  .intro__media{ gap:1rem; }
  .gallery{ grid-template-columns:1fr; }
  .form__grid{ grid-template-columns:1fr; }
  .field--full,.field--check{ grid-column:span 1; }
  .proof{ grid-template-columns:1fr; gap:2rem; }
  .proof span{ max-width:none; }
  .house__spec{ grid-template-columns:1fr; }
  .house__spec div:nth-last-child(2){ border-bottom:1px solid rgba(255,255,255,.12); }
  .calbox{ padding:2rem; }
  .host{ padding:2.4rem; }

  .specs{ grid-template-columns:1fr; }
  .specs li{ border-left:0; padding-left:0; border-bottom:1px solid var(--line); }
  .specs li:last-child{ border-bottom:0; }
  .specs--light li{ border-bottom-color:rgba(255,255,255,.22); }

  .bookbar{ width:calc(100% - 2rem); bottom:1rem; }
  .bookbar__pill{ padding:.6rem .6rem .6rem 1.2rem; gap:0; }
  .bf{ gap:.7rem; padding:.6rem .5rem; }
  .bf > i{ width:1.7rem; height:1.7rem; }
  .bf__sep{ display:none; }
  .bf--guests .bf__k,.bf--guests .g-word{ display:none; }
  .bf--guests .bf__v{ font-size:1.5rem; color:var(--ink); }
  .bf--guests{ flex:none; padding-inline:.4rem; gap:.5rem; }
  .bf__k{ font-size:1.2rem; }
  .bf__v{ font-size:1.2rem; }
  .stepper{ gap:.2rem; }
  .stepper button{ width:2.2rem; height:2.2rem; }
  .bookbar__go{ padding:1.2rem 1.4rem; }
  .bookbar__go span{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__media img{ transform:none; }
  .js .rv,.js [data-rv]{ opacity:1 !important; }
  .js .bookbar{ transform:none; opacity:1; }
}

/* ===========================================================================
   Buchungsblock
   Ersetzt das frühere Anfrageformular. Links der Kalender mit den freien
   Tagen, rechts das Formular mit mitlaufender Preisübersicht.
   =========================================================================== */

.book{ padding:var(--sec) 0; background:var(--soft); }

.book__head{ max-width:62rem; margin:0 0 5rem; }
.book__head .lead{ margin-bottom:0; }

.book__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:4rem;
  align-items:start;
}

/* --- Haus wählen -------------------------------------------------------- */

.book__houses{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:1.2rem;
  margin-bottom:2.4rem;
}

.house-pick{ position:relative; display:block; cursor:pointer; }
/* Der Radio-Knopf wird verdeckt, nicht entfernt: mit 0×0 fällt er in
   manchen Browsern aus der Tastaturreihenfolge, mit der Clip-Technik nicht. */
.house-pick input{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.house-pick span{
  display:block;
  padding:1.6rem 1.8rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  transition:border-color .18s var(--e-out), box-shadow .18s var(--e-out);
}
.house-pick b{ display:block; font-size:1.7rem; font-weight:500; }
.house-pick em{
  display:block; font-style:normal;
  font-size:1.3rem; color:var(--grey); margin-top:.3rem;
}
.house-pick:hover span{ border-color:var(--grey); }
.house-pick input:checked + span{
  border-color:var(--lilac);
  box-shadow:inset 0 0 0 1px var(--lilac);
}
.house-pick input:focus-visible + span{ outline:2px solid var(--lilac); outline-offset:2px; }

/* --- Kalender ----------------------------------------------------------- */

.cal2{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
}

.cal2__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.6rem;
  padding:1.6rem 2rem;
  border-bottom:1px solid var(--line-2);
}
.cal2__title{ font-size:1.5rem; font-weight:500; }
.cal2__nav{
  flex:none;
  width:3.6rem; height:3.6rem;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  font:inherit; font-size:1.5rem; color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.cal2__nav:hover:not(:disabled){ background:var(--soft); border-color:var(--grey); }
.cal2__nav:disabled{ opacity:.3; cursor:not-allowed; }

.cal2__months{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));
}
.cal2__month{ padding:2rem; }
.cal2__month + .cal2__month{ border-left:1px solid var(--line-2); }
.cal2__month h4{
  margin:0 0 1.4rem;
  font-size:1.4rem; font-weight:500;
  text-align:center;
}

.cal2__grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:.3rem;
}
.cal2__wd{
  text-align:center;
  font-size:1.1rem; color:var(--grey);
  padding-bottom:.6rem;
}

.cal2__day{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem;
  aspect-ratio:1;
  min-width:0;
  padding:0;
  border:0;
  border-radius:var(--r-s);
  background:var(--soft);
  font:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.cal2__day span{ font-size:1.3rem; line-height:1; }
.cal2__day em{
  font-style:normal;
  font-size:1.05rem; line-height:1;
  color:var(--grey);
  font-variant-numeric:tabular-nums;
}
.cal2__day:hover:not(:disabled){ background:var(--lilac-tint); }
.cal2__day:focus-visible{ outline:2px solid var(--lilac); outline-offset:1px; }

.cal2__day.is-out{ background:transparent; color:var(--line); cursor:default; }
.cal2__day.is-out em{ display:none; }
.cal2__day.is-busy{
  background:transparent;
  color:#c4cbd1;
  cursor:not-allowed;
  text-decoration:line-through;
}
.cal2__day.is-busy em{ display:none; }

.cal2__day.is-between{ background:var(--lilac-tint); border-radius:0; }
.cal2__day.is-from,
.cal2__day.is-to{ background:var(--lilac); color:#fff; }
.cal2__day.is-from em,
.cal2__day.is-to em{ color:rgba(255,255,255,.75); }
.cal2__day.is-from{ border-radius:var(--r-s) 0 0 var(--r-s); }
.cal2__day.is-to{ border-radius:0 var(--r-s) var(--r-s) 0; }
.cal2__day.is-from.is-to{ border-radius:var(--r-s); }

.cal2__legend{
  display:flex; gap:2rem; flex-wrap:wrap;
  margin:0;
  padding:1.4rem 2rem;
  border-top:1px solid var(--line-2);
  font-size:1.2rem; color:var(--grey);
}
.cal2__legend span{ display:inline-flex; align-items:center; gap:.6rem; }
.cal2__legend i{ width:1.2rem; height:1.2rem; border-radius:.3rem; flex:none; }
.cal2__i-free{ background:var(--soft); box-shadow:inset 0 0 0 1px var(--line); }
/* Ein weißes Kästchen neben einem weißen Kästchen erklärt nichts. Der
   diagonale Strich nimmt auf, wie belegte Tage im Kalender aussehen. */
.cal2__i-busy{
  background:
    linear-gradient(to top right,
      transparent calc(50% - .5px), var(--grey) calc(50% - .5px),
      var(--grey) calc(50% + .5px), transparent calc(50% + .5px)),
    #fff;
  box-shadow:inset 0 0 0 1px var(--line);
}
.cal2__i-sel{ background:var(--lilac); }

/* --- Datumsfelder ------------------------------------------------------- */

.book__dates{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.6rem;
  margin-top:2rem;
}

/* --- Formularseite ------------------------------------------------------ */

.book__form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:2.8rem;
}
.book__form .field{ margin-bottom:1.8rem; }

.book__sum{
  background:var(--soft);
  border-radius:var(--r-l);
  padding:1.8rem 2rem;
  margin-bottom:2.4rem;
}
.book__sum ul{ list-style:none; margin:0 0 1.2rem; padding:0; }
.book__sum li{
  display:flex; justify-content:space-between; gap:1.6rem;
  font-size:1.4rem;
  padding:.4rem 0;
  color:var(--ink-2);
}
.book__sum li b{ font-weight:500; white-space:nowrap; }

.book__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.6rem;
  margin:0;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.book__total span{ font-size:1.4rem; color:var(--ink-2); }
.book__total b{ font-size:2.2rem; font-weight:500; }

.book__note{
  margin:.8rem 0 0;
  font-size:1.2rem; color:var(--grey);
}
.book__note:empty{ display:none; }

.book__small{
  margin:1.6rem 0 0;
  font-size:1.2rem; line-height:1.6; color:var(--grey);
}
.book__small a{ color:var(--teal); text-decoration:underline; }

.btn--wide{ width:100%; justify-content:center; }

/* Fangfeld gegen Skripte — für Menschen nicht vorhanden. */
.hp{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* --- Meldungen ---------------------------------------------------------- */

.book__error{
  background:#fbeeec;
  border:1px solid #eccfca;
  color:#8c2b24;
  border-radius:var(--r-m);
  padding:1.4rem 1.8rem;
  margin-bottom:1.6rem;
  font-size:1.4rem;
}

.book__done{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:3.6rem;
  max-width:64rem;
}
.book__done h3{
  margin:0 0 1.6rem;
  font-family:var(--font-display);
  font-size:2.8rem; font-weight:300;
}
.book__done p{ font-size:1.5rem; line-height:1.7; margin-bottom:1.6rem; }
.book__done-price{ font-size:2.4rem; font-weight:500; }
.book__done-price span{
  display:block;
  font-size:1.3rem; font-weight:400; color:var(--grey);
  margin-top:.3rem;
}

/* ===========================================================================
   Ausflugsziele — die vier Karten auf der Startseite
   Ersetzt den früheren Ausstattungs-Strip.
   =========================================================================== */

.spots{ padding:var(--sec) 0; }

.spots__head{ max-width:62rem; margin:0 0 5rem; }
.spots__head .lead{ margin-bottom:0; }

.spots__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
  gap:2.4rem;
}

.spot{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color .2s var(--e-out), transform .3s var(--e-out);
}
.spot:hover{ border-color:var(--grey); transform:translateY(-.3rem); }

.spot__media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--teal);
  overflow:hidden;
}
.spot__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Ohne Foto bleibt eine ruhige Fläche mit der Nummer — besser als ein
   Platzhalterbild, das so tut, als wäre es das Ziel. */
.spot__media--leer{
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--teal) 0%, var(--teal-dark) 100%);
}
.spot__no{
  font-family:var(--font-display);
  font-size:5.4rem; font-weight:300;
  color:rgba(255,255,255,.28);
  line-height:1;
}

.spot__body{
  flex:1;
  display:flex; flex-direction:column;
  padding:2.4rem;
}
.spot__meta{
  font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lilac-dark); font-weight:500;
  margin-bottom:.8rem;
}
.spot__body h3{
  margin:0 0 1rem;
  font-family:var(--font-display);
  font-size:2.2rem; font-weight:300; line-height:1.2;
}
.spot__body p{
  margin:0 0 1.6rem;
  font-size:1.4rem; line-height:1.65; color:var(--ink-2);
}
.spot__tags{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.spot__tags li{
  font-size:1.15rem;
  padding:.3rem .9rem;
  border-radius:var(--r-pill);
  background:var(--soft);
  color:var(--ink-2);
}
.spot__link{
  margin-top:auto;
  font-size:1.3rem; font-weight:500;
  color:var(--teal);
  display:inline-flex; align-items:center; gap:.5rem;
}
.spot__link:hover{ color:var(--lilac-dark); }

.spots__cta{ margin-top:4rem; }

@media (max-width:1100px){
  .book__grid{ grid-template-columns:1fr; gap:3rem; }
  .cal2__months{ grid-template-columns:1fr; }
  .cal2__month + .cal2__month{
    border-left:0;
    border-top:1px solid var(--line-2);
  }
}

@media (max-width:640px){
  .book__form{ padding:2rem; }
  .cal2__month{ padding:1.4rem; }
  .cal2__day em{ display:none; }
  .cal2__bar{ padding:1.2rem 1.4rem; }
  .cal2__legend{ padding:1.2rem 1.4rem; gap:1.2rem; }
  .book__done{ padding:2.4rem; }
  .spot__body{ padding:2rem; }
}

/* Nur für Vorleseprogramme — sichtbar ist der Text nicht. */
.vh{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* --- Ausflugsziel-Karten ohne Foto -------------------------------------
   Solange kein Bild hinterlegt ist, bleibt eine ruhige Fläche mit der
   Nummer stehen. Besser als ein Platzhalterfoto, das etwas anderes zeigt
   als das Ziel. */
.zone--leer{
  background:linear-gradient(160deg, var(--teal) 0%, var(--teal-dark) 100%);
}
.zone__no{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-size:9rem; font-weight:300;
  color:rgba(255,255,255,.14);
  line-height:1;
  pointer-events:none;
}
.zone__meta{
  font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin-bottom:.8rem;
}
.zone__link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#fff; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:.2rem;
}
.zone__link:hover{ border-color:#fff; }

/* ------------------------------------------------------ Ausflugsziel-Karten --

   Auf der Ausflugsziele-Seite haben nur einige Ziele ein Bild. Die bekommen
   eine Karte, der Rest bleibt in der Liste darunter. Das Raster füllt sich
   selbst — bei einer Karte steht sie halb so breit wie bei vieren, ohne
   dass die Seite auseinanderfällt.
   --------------------------------------------------------------------------- */

.spots{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2.4rem;
  grid-template-columns:repeat(auto-fill, minmax(30rem, 1fr));
}
.spot{ display:flex; flex-direction:column; }

.spot__pic{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  aspect-ratio:4 / 3;
  background:var(--soft);
}
.spot__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--e-soft);
}
.spot:hover .spot__pic img{ transform:scale(1.045); }

/* Die Entfernung sitzt im Bild — sie ist die Information, nach der man auf
   dieser Seite als erstes sucht. */
.spot__weg{
  position:absolute; left:1.2rem; bottom:1.2rem;
  padding:.5rem 1.2rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  font-size:1.25rem; color:var(--ink);
}

.spot__body{ padding-top:1.6rem; display:flex; flex-direction:column; flex:1; }
.spot__name{
  font-family:var(--font-display); font-weight:400;
  font-size:2rem; line-height:1.25; margin:0 0 .6rem;
}
.spot__text{
  margin:0 0 1.4rem;
  font-size:1.45rem; line-height:1.65; color:var(--ink-2);
}
.spot__tags{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 1.4rem; }
.spot__tags span{
  padding:.4rem 1.1rem; border-radius:var(--r-pill);
  font-size:1.25rem; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}
.spot__link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:1.45rem; color:var(--teal);
}
.spot__link svg{ flex:none; }

.spots--light .spot__name{ color:#fff; }
.spots--light .spot__text{ color:rgba(255,255,255,.78); }
.spots--light .spot__tags span{ color:rgba(255,255,255,.86); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.spots--light .spot__link{ color:#fff; }

@media (max-width:600px){
  .spots{ grid-template-columns:1fr; gap:2rem; }
}

/* ---------------------------------------------------------- Gästestimmen --

   Bei zwei Häusern gibt es keine hundert Bewertungen. Das Raster ist deshalb
   auf wenige Karten ausgelegt: drei nebeneinander, bei weniger füllen sie
   die Breite, ohne dass ein Loch entsteht.
   --------------------------------------------------------------------------- */

.says{ padding:var(--sec) 0; background:var(--soft); }
.says__head{ max-width:70rem; margin-bottom:5rem; }
.says__avg{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.8rem;
  margin:1.6rem 0 0; font-size:1.5rem;
}
.says__avg .stars{ color:var(--lilac); font-size:1.9rem; letter-spacing:.1em; }
.says__avg b{ font-size:1.8rem; }

.says__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit, minmax(30rem, 1fr));
}
.say{
  background:#fff; border-radius:var(--r-xl);
  padding:2.8rem 2.6rem;
  display:flex; flex-direction:column;
}
.say__stars{ margin:0 0 1.2rem; color:var(--lilac); font-size:1.6rem; letter-spacing:.12em; }
.say__text{
  margin:0 0 2rem;
  font-size:1.55rem; line-height:1.7; color:var(--ink-2);
  /* Anführungszeichen kommen aus der Schrift, nicht aus dem Text — so
     bleibt der Text im Admin genau der, den der Gast geschrieben hat. */
  quotes:'„' '“';
}
.say__text::before{ content:open-quote; }
.say__text::after{ content:close-quote; }

.say__who{
  margin:auto 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  font-size:1.35rem; color:var(--grey);
}
.say__who b{ color:var(--ink); font-size:1.45rem; }
.say__who em{
  font-style:normal; margin-left:auto;
  padding:.35rem 1rem; border-radius:var(--r-pill);
  font-size:1.2rem; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
}

@media (max-width:600px){
  .says__list{ grid-template-columns:1fr; }
  .say{ padding:2.2rem 1.8rem; }
  .say__who em{ margin-left:0; }
}

/* ------------------------------------------------------- Zusatzoptionen --

   Im Buchungsformular unter der Personenzahl: links steht, was es ist und
   was es kostet, rechts ein schmales Zahlenfeld.
   --------------------------------------------------------------------------- */

.extras{
  border:0; margin:0 0 1.8rem; padding:1.8rem 0 0;
  border-top:1px solid var(--line);
}
.extras legend{
  padding:0; font-size:1.2rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
}
.extra{
  display:flex; align-items:flex-start; gap:1.6rem;
  padding:1.4rem 0; border-bottom:1px solid var(--line);
}
.extra:last-child{ border-bottom:0; }
.extra[hidden]{ display:none; }
.extra__text{ flex:1; min-width:0; }
.extra__text label{ display:block; font-size:1.5rem; color:var(--ink); margin:0 0 .2rem; }
.extra__text span{ display:block; font-size:1.3rem; color:var(--grey); }
.extra__text em{ display:block; font-style:normal; font-size:1.25rem; color:var(--grey); margin-top:.3rem; }
.extra input{
  flex:none; width:7rem; text-align:center;
  font-variant-numeric:tabular-nums;
}