/* ==========================================================================
   Urlaubsplatzl — Hero der Startseite mit Suchfenster („Fenster“, seit 30.09.2026)
   Eingebunden auf index.html, en/index.html, nl/index.html. Entstanden als
   Testvariante 2c (29.09.2026); die uebrigen Testvarianten sind
   mit dem Test entfernt worden.
   Klassen: .hv* = Hero · .hvp = Fenster · .hvk = Kalender · .hvs = Zaehler
            .hvd = Dock · .hvt = Uebergang · .hvf = Figuren · .hvl = Wohnungs-Chips
   ========================================================================== */

/* ---------- Startzustaende bis zum Auftritt (nur mit JS) ----------
   Notfall: laeuft das Skript nicht, blendet die Animation nach 4 s alles ein. */
@media (prefers-reduced-motion: no-preference) {
  /* Der Satz unter dem Titel ist bewusst NICHT dabei: er steht vom ersten
     Bild an da und ist am Telefon das groesste frueh sichtbare Element (LCP).
     War er bis zum Auftritt verborgen, kam LCP gedrosselt erst nach 4,1 s
     statt 1,4 s wie beim alten Hero (gemessen 30.09.2026). */
  html.js:not(.hv-ready) [data-page="home"] .nav,
  html.js:not(.hv-ready) .hv [data-hv-in],
  html.js:not(.hv-ready) .hv [data-hv-title] {
    opacity: 0;
    animation: hv-notfall .01s 4s forwards;
  }
}
@keyframes hv-notfall { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Grundgeruest (aus Variante 2 „Panorama“; das Fenster-Aussehen setzt der
   Abschnitt „Fenster“ weiter unten darueber)
   ========================================================================== */
.hv2 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + 5vh) var(--gutter) clamp(2rem, 5.5vh, 4rem);
  color: var(--paper);
  background: var(--pine);
  isolation: isolate;
  overflow: clip;
}
.hv2__drift { position: absolute; inset: -3%; }
.hv2__pic, .hv2__pic img { display: block; width: 100%; height: 100%; }
.hv2__pic { will-change: transform; transform-origin: 50% 60%; }
.hv2__pic img {
  object-fit: cover;
  object-position: 50% 42%;
  animation: hv2-kenburns 34s ease-in-out infinite alternate;
}
@keyframes hv2-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.2%, -1.4%, 0); }
}
.hv2__sparks { position: absolute; inset: 0; pointer-events: none; }
.hv2__sparks i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--g); height: var(--g);
  border-radius: 50%;
  background: #F3DFAE;
  box-shadow: 0 0 10px 2px rgba(243, 223, 174, .55);
  opacity: 0;
  animation: hv2-staub var(--d) linear var(--v) infinite;
}
@keyframes hv2-staub {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  15%  { opacity: .85; }
  70%  { opacity: .5; }
  100% { transform: translate3d(var(--dx), -36vh, 0); opacity: 0; }
}

.hv2__inner {
  position: relative;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vh, 1.6rem);
}
.hv2__kicker { color: rgba(244, 239, 229, .82); }
.hv2__title {
  font-size: clamp(2.7rem, 7.4vw, 7.6rem);
  color: var(--paper);
  text-shadow: 0 4px 60px rgba(0, 0, 0, .28);
  margin-bottom: clamp(.4rem, 1.5vh, 1.2rem);
}
.hv2__title em { color: var(--gold); }
/* nur waehrend des Auftritts — die Zeichen bleiben danach geteilt (siehe
   auftritt() in hero-suche.js), dauerhaftes will-change hiesse eine eigene
   Grafikebene je Buchstabe */
.hv2:not(.is-bereit) .hv2__title .hv-z { will-change: transform; }

/* Die Satz-Suche */
.hv2__card {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  width: min(100%, 72rem);
  padding: 1.05rem 1.05rem 1.05rem 1.8rem;
  border-radius: 1.7rem;
  background: rgba(18, 28, 22, .44);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(244, 239, 229, .16), inset 0 1px 0 rgba(244, 239, 229, .2);
}
.hv2__card::before {
  /* langsam umlaufender Goldrand */
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--hv-winkel, 0deg), transparent 0 70%, rgba(201, 170, 107, .9) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: hv2-rand 7s linear infinite;
  pointer-events: none;
}
@property --hv-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hv2-rand { to { --hv-winkel: 360deg; } }
/* Ist der Hero aus dem Bild, halten seine Dauer-Animationen an (Rand, Staub,
   Licht) — die Klasse setzt hero-suche.js */
.hv.is-weg *, .hv.is-weg *::before, .hv.is-weg *::after { animation-play-state: paused !important; }

.hv2__satz {
  flex: 1 1 34rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .55rem;
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -.005em;
}
.hv2__wort { white-space: nowrap; }
.hv2__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .52em 1em .52em .85em;
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: clamp(.92rem, 1.1vw, 1.02rem);
  font-weight: 650;
  line-height: 1.2;
  color: var(--paper);
  background: rgba(244, 239, 229, .1);
  box-shadow: inset 0 0 0 1.5px rgba(244, 239, 229, .38);
  /* NIE transform transitionieren: GSAP animiert transform (Auftritt,
     Wackeln) und liest sonst einen Zwischenwert als Ziel — die Pille blieb
     18 px zu tief haengen. Der Hover-Hub laeuft ueber die eigene
     Eigenschaft translate, die sich mit transform nur addiert. */
  transition: background .35s, box-shadow .35s, color .35s, translate .45s var(--ease-out);
}
.hv2__pill:hover, .hv2__pill:focus-visible {
  background: rgba(201, 170, 107, .2);
  box-shadow: inset 0 0 0 1.5px var(--gold);
  translate: 0 -2px;
}
.hv2__pill.is-gefuellt { background: var(--paper); color: var(--pine); box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .5); }
.hv2__pill.is-gefuellt .hv2__pill-icon { color: var(--gold-deep); }
.hv2__pill-icon { width: 1.2em; height: 1.2em; flex: none; color: var(--gold); }
.hv2__pill-sub { font-weight: 500; opacity: .6; }
.hv2__pill-sub:empty { display: none; }
.hv2__ping {
  position: absolute;
  top: -3px; right: -2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.hv2__ping::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold);
  animation: hv2-ping 1.8s var(--ease-out) infinite;
}
@keyframes hv2-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }
.hv2.is-bereit:not(.is-beruehrt) .hv2__ping { opacity: 1; transform: scale(1); }

.hv2__go {
  flex: none;
  font-size: 1.02rem;
  padding: 1.2em 2.05em;
  box-shadow: 0 16px 44px -14px rgba(201, 170, 107, .85);
}

.hv2__live { display: grid; gap: .6rem; max-width: 64rem; }
.hv2__passt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .45rem; }
.hv2__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.7rem;
  font-size: .84rem;
  color: rgba(244, 239, 229, .74);
}
.hv2__trust li { display: block; }
.hv2__trust li + li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin: -.15em .7em 0 0;
}
.hv2__trust b { color: var(--paper); }
.hv2__sterne { color: var(--gold); letter-spacing: .08em; font-size: .9em; }

@media (max-width: 700px) {
  .hv2 { padding-bottom: 1.4rem; justify-content: flex-end; }
  .hv2__title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); margin-bottom: 0; }
  .hv2__kicker { font-size: .62rem; letter-spacing: .16em; }
  .hv2__kicker::before { width: 1.4em; }
  .hv2__card { padding: 1rem 1rem 1.05rem 1.15rem; border-radius: 1.35rem; gap: .8rem; }
  .hv2__satz { flex-basis: 100%; font-size: 1.14rem; gap: .4rem .45rem; }
  .hv2__go { width: 100%; justify-content: center; padding: 1.1em 1.4em; }
  .hv2__trust { font-size: .76rem; gap: .35rem 1rem; }
  .hv2__trust li:nth-child(3) { display: none; }
  .hv2__passt .hvl small { display: none; }
}

/* ==========================================================================
   Wohnungs-Chips (Hero V2 dunkel, sonst hell)
   ========================================================================== */
.hvl__titel { font-size: .8rem; font-weight: 600; margin-right: .2rem; opacity: .8; }
.hvl {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding: .32em .8em;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 650;
  background: rgba(20, 24, 21, .06);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 21, .12);
  transition: opacity .45s, background .45s, box-shadow .45s, color .45s;
}
.hvl small { font-weight: 500; opacity: .7; font-size: .92em; }
.hvl.is-ja::before { content: "✓"; color: var(--gold-deep); font-weight: 800; }
.hvl.is-nein { opacity: .38; text-decoration: line-through; text-decoration-thickness: 1px; }
.hv2__passt .hvl { background: rgba(244, 239, 229, .1); box-shadow: inset 0 0 0 1px rgba(244, 239, 229, .2); color: var(--paper); }
.hv2__passt .hvl.is-ja::before { color: var(--gold); }
.hv2__passt .hvl__titel { color: rgba(244, 239, 229, .85); }

/* ==========================================================================
   Figuren (die kleine Runde)
   ========================================================================== */
.hvf-gruppe { display: inline-flex; align-items: flex-end; }
.hvf { display: inline-block; color: var(--pine); line-height: 0; transform-origin: 50% 100%; }
.hvf svg { width: 100%; height: 100%; }
.hvf--erw { width: 1.35rem; height: 1.6rem; margin-right: -.12rem; }
.hvf--kind { width: 1rem; height: 1.15rem; margin-right: -.05rem; color: var(--gold-deep); }
.hvf--tier { width: 1rem; height: 1rem; margin-left: .15rem; color: var(--stone); }
[data-out="figuren"] { display: flex; align-items: flex-end; gap: .35rem; min-height: 1.7rem; }

/* ==========================================================================
   Zaehler
   ========================================================================== */
.hvs {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.hvs__text b { display: block; font-weight: 700; font-size: .98rem; }
.hvs__text small { font-size: .8rem; color: var(--stone); }
.hvs__knoepfe { display: flex; align-items: center; gap: .55rem; }
.hvs__knopf {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.3rem; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .3s, background .3s, transform .2s var(--ease-out), opacity .3s;
}
.hvs__knopf:hover { box-shadow: inset 0 0 0 1.5px var(--gold); background: rgba(201, 170, 107, .14); }
.hvs__knopf:active { transform: scale(.88); }
.hvs__knopf[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }
.hvs__fenster { display: inline-block; min-width: 1.6rem; text-align: center; overflow: hidden; }
.hvs__wert { display: inline-block; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hvs--kompakt { flex-direction: column; align-items: center; gap: .25rem; padding: 0; border: 0; }
.hvs--kompakt .hvs__text { text-align: center; order: 2; }
.hvs--kompakt .hvs__text b { font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.hvs--kompakt .hvs__text small { display: none; }
.hvs--kompakt .hvs__knopf { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; }
.hvs--kompakt .hvs__knoepfe { gap: .25rem; }
.hvs--kompakt .hvs__wert { font-size: 1.2rem; }

/* ==========================================================================
   Fenster (Popover / Bottom-Sheet)
   ========================================================================== */
.hvp { position: fixed; inset: 0; z-index: 2600; }
.hvp[hidden] { display: none; }
.hvp__hinter {
  position: absolute; inset: 0;
  background: rgba(14, 20, 16, .3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hvp__panel {
  position: absolute;
  width: min(47rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2rem);
  overflow: auto;
  padding: 1.35rem 1.5rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 1.5rem;
  box-shadow: 0 50px 110px -35px rgba(14, 20, 16, .6), 0 0 0 1px rgba(20, 24, 21, .06);
  outline: none;
}
.hvp[data-art="gaeste"] .hvp__panel { width: min(27rem, calc(100vw - 2rem)); }
.hvp__griff { display: none; }
.hvp__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.hvp__titel { font-family: var(--font-display); font-size: 1.6rem; font-weight: 380; line-height: 1.1; }
.hvp__unter { margin-top: .3rem; font-size: .88rem; color: var(--ink-soft); min-height: 1.3em; }
.hvp__unter.is-warnung { color: var(--stempel, #A8432C); font-weight: 600; }
.hvp__zu {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .3s, transform .4s var(--ease-out);
}
.hvp__zu svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hvp__zu:hover { background: rgba(201, 170, 107, .18); transform: rotate(90deg); }
.hvp__fuss {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.2rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.hvp__fuss-links { flex: 1 1 16rem; min-width: 0; }
.hvp__fuss-rechts { margin-left: auto; }
.hvp__ok { padding: .95em 1.6em; }
.hvp__ohne { font-size: .85rem; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--gold); }
.hvp__ohne:hover { color: var(--ink); }

/* Kalender */
.hvk { position: relative; }
.hvk__leiste { position: absolute; left: 0; right: 0; top: -.15rem; display: flex; justify-content: space-between; pointer-events: none; z-index: 2; }
.hvk__nav {
  pointer-events: auto;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .3s, opacity .3s;
}
.hvk__nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hvk__nav:hover:not(:disabled) { background: rgba(201, 170, 107, .18); }
.hvk__nav:disabled { opacity: .25; cursor: default; }
.hvk__monate { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
/* Marke am Listenende (Telefon): kommt sie in Sicht, haengt das Skript die
   naechsten Monate an */
.hvk__mehr { height: 1px; }
.hvk__titel { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; text-align: center; margin: .2rem 0 .8rem; }
.hvk__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; }
.hvk__wt { padding-bottom: .45rem; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); text-align: center; }
.hvk__tag {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: .92rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  isolation: isolate;
  border-radius: 50%;
}
.hvk__tag > span { position: relative; z-index: 1; transition: color .25s; }
.hvk__tag::before {
  content: "";
  position: absolute; inset: 10% 0;
  background: rgba(201, 170, 107, .24);
  z-index: -2;
  opacity: 0;
  transform: scaleX(var(--band, 1));
  transform-origin: left center;
  transition: opacity .25s;
}
.hvk__tag.is-drin::before, .hvk__tag.mit-ende::before, .hvk__tag.is-ende::before { opacity: 1; }
.hvk__tag.mit-ende::before { left: 50%; }
.hvk__tag.is-ende::before { right: 50%; }
.hvk__raster > .hvk__tag:nth-child(7n + 1).is-drin::before { border-radius: 99px 0 0 99px; }
.hvk__raster > .hvk__tag:nth-child(7n).is-drin::before { border-radius: 0 99px 99px 0; }
.hvk__tag::after {
  content: "";
  position: absolute; inset: 7%;
  border-radius: 50%;
  background: var(--gold);
  z-index: -1;
  transform: scale(0);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .25s;
}
.hvk__tag:hover::after, .hvk__tag:focus-visible::after { transform: scale(1); background: rgba(201, 170, 107, .3); }
.hvk__tag.is-start::after, .hvk__tag.is-ende::after { transform: scale(1); background: var(--gold); }
.hvk__tag.is-start, .hvk__tag.is-ende { color: var(--pine); font-weight: 750; }
.hvk__tag.is-heute > span { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.hvk__tag.is-vergangen { color: rgba(20, 24, 21, .2); pointer-events: none; }
.hvk__tag.is-gesperrt { color: rgba(20, 24, 21, .27); }
.hvk__tag.is-gesperrt > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.hvk__tag.is-zukurz { color: rgba(20, 24, 21, .32); }
.hvk__tag.is-gesperrt:hover::after, .hvk__tag.is-zukurz:hover::after { transform: scale(0); }
.hvk__tag[aria-disabled="true"] { cursor: not-allowed; }
.hvk__punkt {
  position: absolute; bottom: 13%; left: 50%;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: var(--gold-deep);
  z-index: 1;
}
.hvk__tag.is-start .hvk__punkt, .hvk__tag.is-ende .hvk__punkt { background: var(--pine); }
.hvk__legende .hvk__punkt { position: static; display: inline-block; margin: 0 .5em .12em 0; vertical-align: middle; }
.hvk__legende { font-size: .78rem; color: var(--ink-soft); line-height: 1.45; }
.hvk__legende + .hvk__legende { margin-top: .2rem; }
/* Herbstrabatt: eigene, waermere Punktfarbe als der Fruehbucher */
.hvk__punkt--herbst { background: #B8612B; }
.hvk__tag.is-start .hvk__punkt--herbst, .hvk__tag.is-ende .hvk__punkt--herbst { background: var(--pine); }
.hvk__schnell { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; }
.hvk__schnell > span { font-weight: 700; color: var(--stone); margin-right: .15rem; }
.hvk__schnell button {
  padding: .45em .95em;
  border-radius: 99px;
  font-size: .8rem; font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .3s, box-shadow .3s;
}
.hvk__schnell button:hover { background: rgba(201, 170, 107, .16); box-shadow: inset 0 0 0 1px var(--gold); }
.hvk__blase {
  position: absolute; z-index: 3;
  padding: .3em .7em;
  border-radius: 99px;
  background: var(--pine); color: var(--paper);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 6px)) scale(.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1), left .2s var(--ease-out), top .2s var(--ease-out);
}
.hvk__blase::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 8px; height: 8px; margin-left: -4px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 1px;
}
.hvk__blase.is-da { opacity: 1; transform: translate(-50%, calc(-100% - 6px)) scale(1); }

/* Gaeste im Fenster */
.hvg__runde { justify-content: center; min-height: 2.4rem; padding: .3rem 0 .8rem; border-bottom: 1px solid var(--line); }
.hvg__runde .hvf--erw { width: 1.8rem; height: 2.1rem; }
.hvg__runde .hvf--kind { width: 1.3rem; height: 1.5rem; }
.hvg__runde .hvf--tier { width: 1.3rem; height: 1.3rem; }
.hvg__passt { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin-top: 1rem; }

@media (max-width: 700px) {
  .hvp__hinter { background: rgba(14, 20, 16, .5); }
  .hvp__panel,
  .hvp[data-art="gaeste"] .hvp__panel {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    max-height: 90svh;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.1rem max(1rem, env(safe-area-inset-bottom));
    border-radius: 1.4rem 1.4rem 0 0;
  }
  .hvp__griff { display: block; width: 2.6rem; height: 5px; margin: 0 auto .8rem; border-radius: 3px; background: rgba(20, 24, 21, .16); flex: none; }
  .hvp__kopf { flex: none; margin-bottom: .6rem; }
  .hvp__titel { font-size: 1.4rem; }
  .hvp__inhalt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
  .hvp__fuss { flex: none; margin-top: .7rem; padding-top: .8rem; }
  .hvp__fuss-rechts { width: 100%; }
  .hvp__ok { width: 100%; justify-content: center; }
  .hvk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* Platzhalter, solange die Monate im naechsten Schritt entstehen — so hoch
     wie die Liste, damit das Blatt beim Befuellen nicht springt */
  .hvk--warten { flex: none; height: 56svh; }
  .hvk__leiste { display: none; }
  .hvk__monate { grid-template-columns: 1fr; gap: 1.4rem; overflow-y: auto; overscroll-behavior: contain; max-height: 56svh; padding-right: .2rem; }
  .hvk__titel { text-align: left; margin-bottom: .5rem; }
  .hvk__tag { font-size: .95rem; }
}

/* ==========================================================================
   Dock — die Suche faehrt mit
   ========================================================================== */
.hvd {
  position: fixed;
  z-index: 700;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 160%);
  opacity: 0;
  pointer-events: none;
  transition: transform .7s var(--ease-out), opacity .45s;
}
.hvd.is-sichtbar { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.hvd__innen {
  display: flex; align-items: center; gap: .25rem;
  padding: .4rem;
  border-radius: 99px;
  background: rgba(28, 43, 35, .93);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--paper);
  box-shadow: 0 24px 60px -20px rgba(14, 20, 16, .6), inset 0 0 0 1px rgba(244, 239, 229, .12);
}
.hvd__feld {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .8em 1.15em;
  border-radius: 99px;
  font-size: .9rem; font-weight: 650;
  white-space: nowrap;
  transition: background .3s;
}
.hvd__feld svg { width: 1.15em; height: 1.15em; color: var(--gold); flex: none; }
.hvd__feld:hover, .hvd__feld:focus-visible { background: rgba(244, 239, 229, .1); }
.hvd__feld + .hvd__feld { position: relative; }
.hvd__feld + .hvd__feld::before { content: ""; position: absolute; left: -.15rem; top: 25%; bottom: 25%; width: 1px; background: rgba(244, 239, 229, .18); }
.hvd__go {
  display: inline-flex; align-items: center; gap: .5em;
  margin-left: .2rem;
  padding: .82em 1.35em;
  border-radius: 99px;
  background: var(--gold); color: var(--pine);
  font-size: .9rem; font-weight: 750;
  transition: background .35s, transform .35s var(--ease-out);
}
.hvd__go svg { width: 1em; height: 1em; }
.hvd__go:hover { background: var(--paper); transform: scale(1.03); }
body.menu-open .hvd,
body.modal-open .hvd,
body.act-open .hvd,
body:has(.consent.is-visible) .hvd { opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 700px) {
  .hvd { left: .6rem; right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom)); transform: translateY(160%); }
  /* Am Handy keine Unschaerfe hinter der Leiste: bei 93 % Deckkraft sieht man
     sie nicht, aber sie muss bei jedem Scrollbild neu gerechnet werden */
  .hvd__innen { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 43, 35, .97); }
  .hvd.is-sichtbar { transform: none; }
  .hvd__innen { justify-content: space-between; }
  .hvd__feld { flex: 1 1 0; min-width: 0; padding: .78em .7em; font-size: .82rem; overflow: hidden; }
  .hvd__feld span { overflow: hidden; text-overflow: ellipsis; }
  .hvd__go { padding: .8em 1.05em; font-size: .85rem; }
}

/* ==========================================================================
   Uebergang zur Buchung
   ========================================================================== */
.hvt {
  position: fixed; inset: 0; z-index: 2700;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: var(--pine);
  color: var(--paper);
  text-align: center;
}
.hvt[hidden] { display: none; }
.hvt__herz { display: block; width: 4.4rem; height: auto; margin: 0 auto 1.6rem; color: var(--gold); }
.hvt__titel { font-family: var(--font-display); font-weight: 340; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; }
.hvt__titel em { font-style: italic; color: var(--gold); }
.hvt__zeile { margin-top: 1rem; font-size: .9rem; font-weight: 600; letter-spacing: .08em; color: rgba(244, 239, 229, .7); }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .hv2__pic img, .hv2__sparks, .hv2__card::before, .hv2__ping::after { animation: none !important; }
  .hv2__sparks { display: none; }
}

/* ==========================================================================
   Fenster (Variante 2c vom 29.09.2026, live seit 30.09.2026)
   Variante 2 ohne Hintergrundbild: heller Grund, die Satz-Suche als dunkle
   Karte, rechts das Haus als Bogenfenster wie in Variante 3. Das Bild ist
   groesser als der Rahmen und laeuft gegen den Zeiger (Blick durchs Fenster).
   ========================================================================== */
.hv2--fenster {
  justify-content: center;
  padding-top: calc(var(--nav-h) + 3vh);
  color: var(--ink);
  background:
    radial-gradient(70% 60% at 78% 40%, #FBF8F1 0%, rgba(251, 248, 241, 0) 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.hv2f__licht {
  position: absolute;
  right: -12vw; top: -10vw;
  width: 62vw; height: 62vw;
  z-index: -1;
  pointer-events: none;
}
.hv2f__licht::before {
  /* eigenes Element fuer das Atmen: GSAP bewegt das aeussere, eine CSS-
     Animation am selben Element wuerde dessen transform ueberschreiben */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 170, 107, .32), rgba(201, 170, 107, .08) 55%, transparent 72%);
  animation: hv2f-atmen 9s ease-in-out infinite alternate;
}
@keyframes hv2f-atmen { to { transform: scale(1.08) translate3d(-2%, 2%, 0); opacity: .75; } }
.hv2--fenster .hv2__sparks { z-index: 0; }
.hv2--fenster .hv2__sparks i { background: var(--gold); box-shadow: 0 0 8px 1px rgba(201, 170, 107, .55); }

.hv2f__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
  align-items: center;
  gap: 2rem 4.5vw;
}
.hv2--fenster .hv2__inner { max-width: none; margin: 0; }
.hv2--fenster .hv2__kicker { color: var(--stone); }
.hv2--fenster .hv2__title { font-size: clamp(2.6rem, 5.6vw, 6.4rem); color: var(--ink); text-shadow: none; }
.hv2--fenster .hv2__title em { color: var(--gold-deep); }
/* Der Satz des frueheren Heros bleibt — er gehoert zu den Keyword-Massnahmen
   vom 15.09.2026, die ab 13.10. gemessen werden (Christians Entscheidung
   30.09.). Klasse und Zeilenumbruch sind Suchstring von build-en/build-nl:
   das Markup in index.html nicht umformatieren. */
.hv2--fenster .hero__meta-copy {
  max-width: 31rem;
  margin: calc(-1 * clamp(.2rem, 1vh, .6rem)) 0 .3rem;
  font-size: clamp(.95rem, 1.05vw, 1.06rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hv2--fenster .hv2__card {
  color: var(--paper);
  background: var(--pine);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 44px 80px -44px rgba(20, 24, 21, .6), inset 0 0 0 1px rgba(244, 239, 229, .08);
}
.hv2--fenster .hv2__passt .hvl { background: rgba(20, 24, 21, .06); box-shadow: inset 0 0 0 1px rgba(20, 24, 21, .12); color: var(--ink); }
.hv2--fenster .hv2__passt .hvl.is-ja::before { color: var(--gold-deep); }
.hv2--fenster .hv2__passt .hvl__titel { color: var(--ink-soft); }
.hv2--fenster .hv2__trust { color: var(--ink-soft); }
.hv2--fenster .hv2__trust b { color: var(--ink); }
.hv2--fenster .hv2__sterne { color: var(--gold-deep); }

/* Die Karte in zwei Zeilen: oben der Satz, unten links was die Wahl bedeutet
   (Zeitraum, Rabatte), rechts der Knopf. Vorher brach der Knopf allein in die
   zweite Zeile und liess rechts daneben eine leere Flaeche stehen. */
.hv2--fenster .hv2__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.15rem;
  padding: 1.55rem 1.2rem 1.2rem 1.8rem;
  isolation: isolate;
  overflow: hidden;
}
/* Der umlaufende Goldrand DREHT sich hier als eigene Ebene (transform), statt
   dass der Browser die Karte fuer jeden Winkel neu malt: gemessen am 29.09.
   malte die Winkel-Animation (@property) Karte samt Hausbild in JEDEM Bild
   neu, auch im Stillstand — am Handy ruckelte davon das Scrollen. Geht nur, weil
   die Karte hier deckend ist: ::after fuellt sie bis auf den 1-px-Rand. */
.hv2--fenster .hv2__card::before {
  inset: auto;
  left: 50%; top: 50%;
  width: 150%;
  aspect-ratio: 1;
  margin: -75% 0 0 -75%; /* beide Prozent von der Kartenbreite — Mittelpunkt = Kartenmitte */
  padding: 0;
  border-radius: 0;
  z-index: -1;
  background: conic-gradient(transparent 0 70%, rgba(201, 170, 107, .9) 82%, transparent 92%);
  -webkit-mask: none;
  mask: none;
  animation: hv2-drehen 7s linear infinite;
}
.hv2--fenster .hv2__card::after {
  content: "";
  position: absolute; inset: 1px;
  z-index: -1;
  border-radius: calc(1.7rem - 1px);
  background: var(--pine);
  pointer-events: none;
}
@keyframes hv2-drehen { to { transform: rotate(360deg); } }
.hv2f__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(244, 239, 229, .12);
}
.hv2f__info { flex: 1 1 15rem; min-width: 0; display: grid; gap: .5rem; }
.hv2f__kurz { font-size: .9rem; line-height: 1.4; color: rgba(244, 239, 229, .78); }
.hv2f__rabatte { display: flex; flex-wrap: wrap; gap: .35rem; }
.hv2f__rabatte:empty { display: none; }
.hv2f__rabatt {
  display: inline-flex;
  align-items: center;
  padding: .32em .8em;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--pine);
  background: var(--gold);
}
/* noch nichts gewaehlt: der Herbstrabatt als Einladung, nicht als Zusage */
.hv2f__rabatt--werbung { color: var(--gold); background: rgba(201, 170, 107, .14); box-shadow: inset 0 0 0 1px rgba(201, 170, 107, .45); }
.hv2f__rabatt--tipp { color: rgba(244, 239, 229, .85); background: none; box-shadow: none; outline: 1px dashed rgba(201, 170, 107, .6); outline-offset: -1px; }
.hv2--fenster .hv2__go { margin-left: auto; }

.hv2f__fenster {
  position: relative;
  justify-self: end;
  width: min(100%, 27rem);
  aspect-ratio: 3 / 4.3;
  will-change: transform;
}
.hv2f__rahmen {
  position: absolute; inset: 0;
  border-radius: 999px 999px 1.6rem 1.6rem;
  overflow: hidden;
  background: var(--paper-2);
  /* Fensterrahmen: breiter heller Rand, darum eine feine Goldlinie */
  box-shadow:
    0 0 0 10px rgba(252, 250, 245, .95),
    0 0 0 11px rgba(168, 137, 76, .38),
    0 70px 110px -55px rgba(20, 24, 21, .6);
}
.hv2--fenster .hv2__drift { position: absolute; inset: -9%; }
.hv2--fenster .hv2__pic img { object-position: 50% 40%; }
.hv2f__glanz {
  position: absolute; inset: 0;
  background: radial-gradient(28rem 20rem at var(--mx, 30%) var(--my, 18%), rgba(255, 255, 255, .38), transparent 62%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hv2f__schatten {
  position: absolute;
  left: 12%; right: 12%; bottom: -2.4rem;
  height: 1.8rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 24, 21, .2), transparent);
  filter: blur(4px);
  pointer-events: none;
}
.hv2f__badge {
  position: absolute;
  left: -2.8rem; bottom: 16%;
  z-index: 2;
  width: clamp(92px, 8vw, 120px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pine);
  box-shadow: 0 18px 40px -16px rgba(20, 24, 21, .6);
}

@media (max-width: 1100px) and (min-width: 901px) {
  .hv2f__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  /* das Siegel ragte hier in die Suchkarte */
  .hv2f__badge { left: -1.6rem; }
}
/* Tablet: zwei Spalten wie am Desktop, das Fenster schmaler. Bis 30.09.
   galt hier schon das Telefon-Layout (Fenster oben rechts ueber dem
   Titel) — bei 700–900 px ist der Titel aber nur zweizeilig, und die
   Suchkarte schob sich unter das Fenster (verdeckte „2 Erwachsene“). */
@media (max-width: 900px) and (min-width: 701px) {
  .hv2f__grid { grid-template-columns: minmax(0, 1fr) 31vw; gap: 2rem 3.5vw; }
  .hv2--fenster .hv2__title { font-size: clamp(2.4rem, 6.4vw, 3.4rem); }
  .hv2f__badge { width: 84px; left: -1.6rem; bottom: 10%; }
}
/* Telefon: ein Raster statt eines absolut gesetzten Fensters. Bis 30.09.
   stand das Fenster absolut oben rechts, und Titel und Karte hielten nur
   Abstand, solange der Titel vierzeilig umbrach — bei 600–700 px lag die
   Karte unter dem Fenster. Jetzt spannt das Fenster die Zeilen von Titel
   und Satz; die Karte beginnt immer darunter, egal wie hoch beide werden.
   .hv2__inner loest sich dafuer auf (display: contents) — sein Scroll-
   Ausblenden (szene() in hero-suche.js) entfaellt am Telefon damit.
   Fenster 36vw/12rem und Titel 8.1vw (bis 30.09.: 28vw/9.5rem und 10vw):
   so ist das Hausfoto das groesste Element und LCP faellt aufs erste Bild
   (gemessen 5 Laeufe, CPU 4x: Median 2,9 → 1,6 s). Mit 10vw braeche
   „Urlaubsplatzl“ neben dem breiteren Fenster mitten im Wort. */
@media (max-width: 700px) {
  .hv2--fenster { justify-content: flex-start; padding-top: calc(var(--nav-h) + 1.2rem); }
  .hv2f__grid { grid-template-columns: minmax(0, 1fr) min(36vw, 12rem); column-gap: 4vw; row-gap: clamp(.9rem, 2.2vh, 1.3rem); align-items: start; }
  .hv2--fenster .hv2__inner { display: contents; }
  /* Die H1 (Kicker) bleibt am Telefon so gross wie im alten Hero (.72rem,
     main.css) — ihre Groesse ist eine vertagte Markenentscheidung und die
     Startseite steht in der Keyword-Messung; der Testhero hatte .62rem */
  .hv2--fenster .hv2__kicker { font-size: .72rem; letter-spacing: .22em; }
  .hv2--fenster .hv2__inner > * { grid-column: 1 / -1; }
  .hv2--fenster .hv2__title, .hv2--fenster .hero__meta-copy { grid-column: 1; }
  .hv2--fenster .hv2__title { font-size: clamp(1.5rem, 8.1vw, 3.6rem); margin-bottom: 0; }
  .hv2--fenster .hero__meta-copy { font-size: .9rem; line-height: 1.5; margin: 0; }
  .hv2f__fenster { grid-column: 2; grid-row: 2 / span 2; width: 100%; margin-top: .3rem; }
  .hv2f__rahmen { box-shadow: 0 0 0 5px rgba(252, 250, 245, .95), 0 0 0 6px rgba(168, 137, 76, .38), 0 30px 50px -30px rgba(20, 24, 21, .55); }
  .hv2f__badge, .hv2f__schatten { display: none; }
  .hv2f__licht { width: 110vw; height: 110vw; right: -40vw; top: -20vw; }
  .hv2--fenster .hv2__card { gap: .9rem; padding: 1.15rem 1rem 1rem 1.15rem; }
  .hv2--fenster .hv2__card::after { border-radius: calc(1.35rem - 1px); }
  .hv2f__fuss { padding-top: .9rem; gap: .75rem; }
  .hv2f__info { flex-basis: 100%; }
  .hv2f__kurz { font-size: .84rem; }
  .hv2--fenster .hv2__go { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hv2f__licht::before { animation: none !important; }
}