/* ==========================================================================
   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-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;
}

/* Die Marke ist der Name selbst: „Ferienhäuser Minkner", darunter der Ort.
   Das Kreiszeichen davor ist entfallen — zwei Zeichen nebeneinander (Symbol
   und Schriftzug) haben sich um dieselbe Aufmerksamkeit gestritten. */
.brand{ display:flex; align-items:center; flex:none; }
.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; white-space:nowrap;
}
.brand__sub{
  font-weight:300;
  font-size:1.05rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.65; margin-top:.45rem;
}

.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; overflow:hidden; }
.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__stage{
  margin:0; display:grid; justify-items:center; gap:1.6rem;
  max-width:100%;
}
.lightbox img{ max-width:100%; max-height:80svh; border-radius:var(--r-m); }
.lightbox__cap{
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-align:center;
}
.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); }

/* Blaettern. Die Knoepfe liegen am Rand und ueberdecken das Bild nicht —
   auf schmalen Schirmen ruecken sie nach unten neben die Bildunterschrift. */
.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:5.6rem; height:5.6rem; border:0; border-radius:100%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  transition:background .25s var(--e-soft), scale .25s var(--e-soft);
}
.lightbox__nav svg{ width:2.6rem; height:2.6rem; }
.lightbox__nav:hover{ background:rgba(255,255,255,.28); scale:1.06; }
.lightbox__nav:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.lightbox__nav--prev{ left:2.4rem; }
.lightbox__nav--next{ right:2.4rem; }
.lightbox__nav[hidden]{ display:none; }

@media (max-width:700px){
  .lightbox__nav{ top:auto; bottom:2.4rem; translate:0 0; width:5rem; height:5rem; }
  .lightbox__nav--prev{ left:calc(50% - 7rem); }
  .lightbox__nav--next{ right:calc(50% - 7rem); }
  .lightbox__cap{ margin-bottom:7rem; }
}

/* ------------------------------------------------- KI-Kennzeichnung (Art. 50) */

/* Die Kacheln werden je nach Zustand unterschiedlich stark beschnitten
   (schmal, dann breit) — eine ins Bild gebrannte Ecke wäre mal sichtbar, mal
   weg. Deshalb sitzt das Kennzeichen als Auflage über dem Bild und wandert
   nicht mit dem Zuschnitt. Maschinenlesbar steht der Hinweis zusätzlich im
   JPEG-Kommentar der Datei.
   Die Klasse hängt am einzelnen Bild: in dieser Reihe stehen KI-Bilder und
   echte Fotos nebeneinander, und ein echtes Foto zu kennzeichnen wäre eine
   Falschaussage. */
.zone--ki::after{
  content:"";
  position:absolute; right:1.2rem; bottom:1.2rem; z-index:3;
  width:7.2rem; height:2.4rem;
  background:url("../img/ai-generated.svg") right bottom / contain no-repeat;
  opacity:.9; pointer-events:none;
}
/* Dieselbe Auflage auf der Ausflugsseite. Auch dort steht KI neben echt. */
.spot--ki .spot__pic::after{
  content:"";
  position:absolute; right:1rem; bottom:1rem; z-index:3;
  width:6.4rem; height:2.2rem;
  background:url("../img/ai-generated.svg") right bottom / contain no-repeat;
  opacity:.9; pointer-events:none;
}

@media (max-width:700px){
  .zone--ki::after{ width:6rem; height:2rem; right:1rem; bottom:1rem; }
  .spot--ki .spot__pic::after{ width:5.6rem; height:1.9rem; }
}

/* ------------------------------------------------------------- Grundrisse -- */

/* Zwei Zeichnungen nebeneinander, auf Papierfarbe. Die SVGs bringen ihren
   eigenen hellen Grund mit — der Rahmen setzt sie nur ab. */
.plans{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem;
  align-items:start;
}
.plans figure{ margin:0; cursor:zoom-in; }
.plans img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line);
  background:#f4f2ee;
}
.plans figcaption{
  padding-top:1rem;
  font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
@media (max-width:700px){
  .plans{ grid-template-columns:1fr; gap:3rem; }
}

/* -------------------------------------------------------------- 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; }

/* ------------------------------------------------------------ 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; }
  .subhero{ min-height:auto; padding-top:14rem; }
  /* Häuser, Bewertungen und Ausflugsziele werden hier zur Wischreihe —
     siehe „Wischreihen" am Ende der Datei. */

  .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. */
  /* Das geöffnete Versprechen klappt nach unten über den folgenden Abschnitt,
     statt den Hero länger zu machen — das Bild bleibt, wo es ist. Dafür darf
     der Hero nicht mehr kappen (das übernimmt .hero__media fürs Bild) und
     muss über dem nächsten Abschnitt liegen. */
  .hero{ flex-direction:column; justify-content:center; align-items:stretch; padding-bottom:12rem;
         overflow:visible; z-index:5; }
  .hero__body{ padding-top:10rem; width:100%; }
  /* inset:auto ist Pflicht: die Desktop-Regel setzt right/bottom, und an
     einem relativ positionierten Element verschieben die den Knopf nach
     links oben — er lag dann über dem Text statt unter „Häuser ansehen". */
  .promise{ position:relative; inset:auto; width:100%; margin-top:3rem; }
  .promise__btn{ margin-left:0; width:100%; justify-content:space-between; }
  .promise__body{
    position:absolute; left:0; right:0; top:calc(100% + 1.2rem); bottom:auto;
    width:auto; height:auto;
    border-radius:var(--r-xl); padding:3rem; place-items:start;
    box-shadow:0 2.4rem 6rem rgba(0,0,0,.28);
  }
}

@media (max-width:520px){
  /* „Ferienhäuser Minkner" ist länger als das frühere „Minkner": auf dem
     Handy eine Stufe kleiner, damit neben dem Burger Platz bleibt. */
  .brand__name{ font-size:1.9rem; }
  .brand__sub{ font-size:.95rem; letter-spacing:.16em; }
}

@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); }
}

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

/* ===========================================================================
   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; }

/* Je Haus eine Spalte: oben die Auswahl, darunter der Weg zur Hausseite.
   Der Link ist bewusst leiser als der Buchen-Knopf — er führt vom Formular
   weg, nicht hinein. Der Grund des Abschnitts ist --soft, deshalb weiß statt
   durchsichtig: sonst wäre beim Überfahren kein Unterschied zu sehen. */
.house-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.house-opt .house-pick{ width:100%; }
.btn--klein{
  padding:1rem 2.2rem;
  font-size:1.45rem;
}
.house-opt__link{
  margin-left:.4rem;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);
}
.house-opt__link:hover{
  background:var(--lilac-tint);
  box-shadow:inset 0 0 0 1px var(--lilac);
}

/* --- 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; }
/* Vor- und Nachname nebeneinander, auf dem Handy untereinander. */
.book__name{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); column-gap:1.6rem; }
.book__anrede{ max-width:22rem; }

.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);
  }
  /* Ab hier zeigt buchen.js nur einen Monat in voller Breite. Quadratische
     Zellen würden auf dem Tablet riesig — die Höhe wächst deshalb nur mit,
     bis Tag und Preis bequem Platz haben. */
  .cal2__day{ aspect-ratio:auto; height:clamp(4.4rem, 12vw, 6.4rem); }
  /* Bei einem Monat steht sein Name schon in der Leiste darüber. */
  .cal2__month:only-child h4{ display:none; }
}

@media (max-width:640px){
  .book__form{ padding:2rem; }
  .cal2__month{ padding:1.4rem; }
  /* Der Preis bleibt stehen — mit nur einem Monat ist die Zelle breit genug. */
  .cal2__day span{ font-size:1.4rem; }
  .cal2__day em{ font-size:1rem; letter-spacing:-.01em; }
  .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 der Mengenwähler — minus, Zahl, plus.
   --------------------------------------------------------------------------- */

.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; }
/* Die Personenzahl steht als erste Zeile mit in der Liste, gehört aber nicht
   zum Dazubuchen: etwas mehr Luft darunter trennt sie leise ab. */
.extra--personen{ padding-top:.6rem; }
.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; }

/* Der Mengenwähler.

   Ein nacktes <input type="number"> hat auf dem Handy zwei winzige Pfeilchen,
   die niemand trifft, und am Rechner sieht man ihm gar nicht an, dass man
   daran drehen kann. Deshalb zwei richtige Knöpfe links und rechts, die Zahl
   dazwischen. Das Feld bleibt erhalten: es trägt den Wert ins Formular und
   lässt sich weiterhin direkt beschreiben. */
.anzahl{
  flex:none;
  display:inline-flex; align-items:stretch;
  border-radius:var(--r-pill);
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden;
  transition:box-shadow .3s var(--e-out);
}
.anzahl:focus-within{ box-shadow:inset 0 0 0 1.5px var(--lilac); }

.anzahl__knopf{
  flex:none;
  width:4.4rem;
  border:0; padding:0; margin:0;
  background:none; color:var(--ink-2);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background-color .25s var(--e-out), color .25s var(--e-out);
}
.anzahl__knopf svg{ width:1.8rem; height:1.8rem; fill:none; }
.anzahl__knopf:hover{ background:var(--soft); color:var(--ink); }
.anzahl__knopf:focus-visible{ outline:2px solid var(--lilac); outline-offset:-2px; }

/* Am unteren Anschlag ist „weniger" sinnlos — der Knopf bleibt stehen, damit
   die Breite nicht springt, wird aber sichtbar untätig. */
.anzahl__knopf[disabled]{ color:var(--line); cursor:default; background:none; }

/* Gilt fuer jedes Zaehlfeld — die Zusatzoptionen und die Personenzahl
   benutzen dasselbe Bauteil. */
.anzahl input{
  flex:none;
  width:4.2rem; padding:1.2rem 0;
  text-align:center;
  font-variant-numeric:tabular-nums;
  border:0; border-radius:0; box-shadow:none;
  background:none;
  -moz-appearance:textfield;
  appearance:textfield;
}
.anzahl input:focus{ outline:0; box-shadow:none; }
.anzahl input::-webkit-outer-spin-button,
.anzahl input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}


/* Steht etwas drin, soll man das von weitem sehen. */
.anzahl.is-gesetzt{ box-shadow:inset 0 0 0 1.5px var(--lilac); }
.anzahl.is-gesetzt input{ color:var(--lilac-dark); font-weight:500; }

/* -------------------------------------------------------------- Wischreihen --

   Auf Handy und Tablet stehen Häuser, Bewertungen und Ausflugsziele nicht
   untereinander, sondern in einer Reihe zum Seitwärtswischen. Jede Karte ist
   etwas schmaler als der Bildschirm, damit die nächste am Rand hervorschaut
   — das zeigt ohne Worte, dass es weitergeht. Die Punkte darunter setzt
   main.js (swipe()), sie zeigen die Stelle und springen beim Antippen.

   Steht bewusst am Dateiende: .says__list und .houses__grid sind weiter oben
   als Raster definiert und würden die Reihe sonst überschreiben.
   --------------------------------------------------------------------------- */

.swipe-dots{ display:none; }

@media (max-width:880px){
  .swipe{
    /* position:relative ist Pflicht: sonst entkommen absolut gesetzte
       Kinder (etwa der Vorlesetext .vh in den Bewertungssternen) der
       Kappung, liegen rechts neben dem Bildschirm und machen die ganze
       Seite breiter — auf dem iPhone ließ sich deshalb herauszoomen. */
    position:relative;
    display:flex; flex-direction:row; align-items:stretch;
    gap:1.4rem;
    /* Die Reihe reicht bis an den Bildschirmrand, die erste Karte steht
       trotzdem auf der Linie des Textes darüber. */
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    max-width:none;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .swipe::-webkit-scrollbar{ display:none; }
  .swipe > *{ flex:0 0 84%; min-width:0; scroll-snap-align:start; }

  /* Die Ausflugsziele stehen außerhalb von .wrap und bringen den Rand selbst mit. */
  .strip.swipe{ margin-inline:0; height:auto; }

  .swipe-dots{
    display:flex; justify-content:center; gap:.2rem;
    margin-top:1.8rem;
    color:var(--lilac);
  }
  .zones .swipe-dots,
  .houses .swipe-dots{ color:#fff; }
  /* Der sichtbare Punkt ist klein, die Tippfläche nicht. */
  .swipe-dots button{
    display:grid; place-items:center;
    width:2.8rem; height:2.8rem; padding:0;
    border:0; background:none; color:inherit; cursor:pointer;
  }
  .swipe-dots button::after{
    content:''; display:block;
    width:.8rem; height:.8rem; border-radius:.4rem;
    background:currentColor; opacity:.35;
    transition:width .3s var(--e-soft), opacity .3s var(--e-soft);
  }
  .swipe-dots button[aria-current="true"]::after{ width:2.2rem; opacity:1; }
  .swipe-dots button:focus-visible{ outline:2px solid currentColor; outline-offset:-2px; border-radius:.6rem; }

  /* --- Ausflugsziele als Karten ---------------------------------------
     Kein Aufklappen mehr: in der Reihe ist jede Karte gleich offen. Der
     Text steht im Fluss statt absolut unten — so schiebt ein langer Titel
     nichts mehr unter das Symbol, und alle Karten wachsen auf die Höhe der
     längsten. */
  .zone{
    flex:0 0 84%;
    display:flex; flex-direction:column; justify-content:flex-end;
    min-height:44rem;
  }
  .zone img,
  .zone.is-active img{ filter:brightness(.85); }
  .zone__grad{
    background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.78) 100%);
  }
  .zone__ico{ top:2rem; left:2rem; width:4.4rem; height:4.4rem; }
  .zone__ico svg{ width:2.1rem; height:2.1rem; }
  .zone .zone__ico{ background:var(--lilac); box-shadow:none; }
  .zone__body{ position:relative; padding:8.4rem 2.2rem 2.4rem; }
  .zone--ki .zone__body{ padding-bottom:4rem; }
  .zone__body h3,
  .zone.is-active .zone__body h3{ font-size:2.2rem; transform:none; overflow-wrap:break-word; hyphens:auto; }
  .zone .zone__more{ grid-template-rows:1fr; opacity:1; }
  .zone__more p{ margin:1.2rem 0 1.4rem; }
  .zone__more p:last-child{ margin-bottom:0; }

  .house{ flex-basis:86%; }
}