/* ═══════════ Villa Santa Elena · v2 additions ═══════════
   Complements the deployed styles (styles-*.css / routes-*.css).
   Same design language: Cormorant Garamond display, Inter Tight body,
   ink #0e2a3a · parchment #f3efe6 · gold #d9a75e. */

/* Kein horizontaler Überlauf — clip (nicht hidden!) lässt sticky intakt */
html, body { overflow-x: clip; }

:root {
  --vse-ink: #0e2a3a;
  --vse-paper: #f3efe6;
  --vse-gold: #d9a75e;
  --vse-gold-deep: #b4823d;
  --vse-muted: #9fb4bf;
}

/* ── Lesbarkeit über dem Filmmaterial ──────────────────────────
   KEINE Fläche hinter dem Text. Hier lag eine: ein radialer Verlauf auf
   .scroll-scrub__copy::before, aufgezogen auf einen Kasten von
   inset -4rem/-6rem. Die Ellipse reicht weiter als der Kasten, also
   stand an dessen senkrechter Kante eine sichtbare Stufe — über dem
   hellen Meer ein dunkles Rechteck, im Innen-Rundgang ein milchiger
   Fleck über der Einrichtung. Davor stand an derselben Stelle schon ein
   WEISSER Textschatten mit 20 px Weichzeichnung, also eine Wolke.

   Ersatz: der Untergrund wird als Ganzes abgestuft, auf der Bühne
   selbst. Randverankert, damit im Bild keine Kante entstehen kann, und
   eine einzige Fläche statt einer pro Kapitel — deshalb beidseitig, denn
   die Kapitel wechseln die Seite (arrival/coast/dusk/stair links,
   villa/kitchen/roof rechts). Am Text bleibt nur der enge Saum. */
.scroll-scrub__copy::before { display: none; }

.scroll-scrub:not(.scroll-scrub--inside) .scroll-scrub__copy {
  text-shadow: 0 1px 3px rgba(8, 24, 34, .5);
}
/* Über weißen Fassaden verliert das gedämpfte Blaugrau zu viel.
   Der Fliesstext bleibt leiser als die Zeile, aber hell genug. */
.scroll-scrub:not(.scroll-scrub--inside) .scroll-scrub__body {
  color: color-mix(in srgb, var(--ss-ink) 76%, var(--ss-muted));
}
.scroll-scrub:not(.scroll-scrub--inside) .scroll-scrub__tags li {
  border-color: color-mix(in srgb, var(--ss-ink) 42%, transparent);
}

.scroll-scrub__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ss-bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--ss-bg) 40%, transparent) 22%,
      color-mix(in srgb, var(--ss-bg) 18%, transparent) 44%,
      transparent 66%),
    linear-gradient(270deg,
      color-mix(in srgb, var(--ss-bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--ss-bg) 40%, transparent) 22%,
      color-mix(in srgb, var(--ss-bg) 18%, transparent) 44%,
      transparent 66%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--ss-bg) 42%, transparent) 0%,
      transparent 30%),
    /* Leichte Gesamtabstufung: der Film wird als Ganzes ruhiger,
       statt dass hinter der Schrift ein Fleck entsteht. */
    color-mix(in srgb, var(--ss-bg) 14%, transparent);
}

.scroll-scrub--inside .scroll-scrub__body { color: #33434d; }

/* ── Inside walkthrough: light stage variant ─────────────────── */
/* Dunkle Schrift auf hellen Renderings: hier genügt ein Hauch,
   sonst wird die Einrichtung milchig. */
.scroll-scrub--inside .scroll-scrub__stage::after {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ss-bg) 60%, transparent) 0%,
      color-mix(in srgb, var(--ss-bg) 42%, transparent) 20%,
      color-mix(in srgb, var(--ss-bg) 30%, transparent) 38%,
      color-mix(in srgb, var(--ss-bg) 17%, transparent) 52%,
      transparent 74%),
    linear-gradient(270deg,
      color-mix(in srgb, var(--ss-bg) 60%, transparent) 0%,
      color-mix(in srgb, var(--ss-bg) 42%, transparent) 20%,
      color-mix(in srgb, var(--ss-bg) 30%, transparent) 38%,
      color-mix(in srgb, var(--ss-bg) 17%, transparent) 52%,
      transparent 74%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--ss-bg) 30%, transparent) 0%,
      transparent 26%);
}
/* Das helle Gold der Marke steht auf hellen Vorhängen zu schwach —
   im Rundgang bekommt die Vorzeile einen Schuss Tinte. */
.scroll-scrub--inside .scroll-scrub__kicker {
  color: color-mix(in srgb, var(--ss-accent) 74%, var(--ss-ink));
}
/* Die Chips erbten aus shell.css helle Schrift (--ve-bone) — im hellen
   Innen-Rundgang standen sie damit weiß auf Marmor und waren praktisch
   unsichtbar. Hier gilt die dunkle Schrift der Szene. */
.scroll-scrub--inside .scroll-scrub__tags li {
  color: var(--ss-ink);
  border-color: color-mix(in srgb, var(--ss-ink) 45%, transparent);
}
/* Auch die beiden Aktions-Links erben aus shell.css die helle Schrift und
   das helle Gold — beides für dunkle Abschnitte gedacht. Im hellen
   Rundgang gelten Schrift und tiefes Gold der Szene. */
.scroll-scrub--inside .v-viewfinder,
.scroll-scrub--inside .v-route-link { color: var(--ss-ink); }
.scroll-scrub--inside .v-viewfinder span[aria-hidden] { border-color: var(--ss-accent); }
.scroll-scrub--inside .v-route-link .route-arrow { color: var(--ss-accent); }
.scroll-scrub--inside .v-route-link .route-path {
  border-bottom-color: color-mix(in srgb, var(--ss-accent) 70%, transparent);
}

.scroll-scrub--inside .scroll-scrub__route-button[aria-current=step] { color: var(--ss-ink); }
.scroll-scrub--inside .scroll-scrub__progress {
  background: color-mix(in srgb, var(--ss-ink) 18%, transparent);
}

/* Crossfade ist scrollgebunden: v2.js setzt Opacity/Scale direkt, ohne
   Zeit-Transition — vor- und zurückscrollen blendet identisch. */
.scroll-scrub__layer { will-change: opacity, transform; }

/* ── Rooms head ───────────────────────────────────────────────── */
.v2-rooms-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ── Level explorer ───────────────────────────────────────────── */
.v2-explorer {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .v2-explorer { grid-template-columns: 1fr; } }

.v2-level-tabs { display: flex; flex-direction: column; gap: .25rem; }
.v2-level-tab {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 1rem; min-height: 2.75rem;
  background: transparent; border: 0;
  border-left: 2px solid color-mix(in srgb, var(--vse-paper) 18%, transparent);
  color: var(--vse-muted); font: inherit; text-align: left; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.v2-level-tab:hover { color: var(--vse-paper); }
.v2-level-tab.is-active {
  color: var(--vse-paper);
  border-left-color: var(--vse-gold);
  background: color-mix(in srgb, var(--vse-paper) 5%, transparent);
}
.v2-level-tab:focus-visible { outline: 2px solid var(--vse-gold); outline-offset: 2px; }
.v2-level-num {
  font-size: .75rem; letter-spacing: .18em;
  color: var(--vse-gold); font-weight: 600;
}
.v2-level-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600;
}

.v2-section-svg { width: 100%; max-width: 22rem; margin-top: 2rem; display: block; }
.v2-section-svg .svg-slab {
  fill: color-mix(in srgb, var(--vse-paper) 6%, transparent);
  stroke: color-mix(in srgb, var(--vse-paper) 40%, transparent);
  stroke-width: 1.2;
  transition: fill .3s ease, stroke .3s ease;
}
.v2-section-svg .svg-window {
  fill: color-mix(in srgb, var(--vse-gold) 10%, transparent);
  stroke: color-mix(in srgb, var(--vse-paper) 30%, transparent);
  stroke-width: 1;
}
.v2-section-svg .svg-louvers line {
  stroke: color-mix(in srgb, var(--vse-gold) 55%, transparent); stroke-width: 1.4;
}
.v2-section-svg .svg-pergola {
  stroke: color-mix(in srgb, var(--vse-paper) 45%, transparent); stroke-width: 1.4;
  fill: none;
}
.v2-section-svg .svg-plants {
  stroke: color-mix(in srgb, var(--vse-gold) 60%, transparent); stroke-width: 1.2;
  fill: none; stroke-linecap: round;
}
.v2-section-svg .svg-ground { stroke: color-mix(in srgb, var(--vse-paper) 45%, transparent); stroke-width: 1.4; }
.v2-section-svg .svg-pool { fill: color-mix(in srgb, #6ecbd4 40%, transparent); stroke: none; }
.v2-svg-level { cursor: pointer; }
.v2-svg-level.is-active .svg-slab {
  fill: color-mix(in srgb, var(--vse-gold) 16%, transparent);
  stroke: var(--vse-gold);
}
.v2-svg-level:hover .svg-slab { stroke: color-mix(in srgb, var(--vse-gold) 70%, transparent); }

/* room cards */
.v2-room-list { display: grid; gap: .5rem; }
.v2-room {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1.25rem;
  align-items: center;
  padding: .9rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--vse-paper) 14%, transparent);
  background: transparent; border-top: 0; border-left: 0; border-right: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer; width: 100%;
  transition: background .25s ease;
  animation: v2-room-in .45s ease both;
}
.v2-room:hover { background: color-mix(in srgb, var(--vse-paper) 5%, transparent); }
.v2-room:focus-visible { outline: 2px solid var(--vse-gold); outline-offset: 2px; }
.v2-room[data-static] { cursor: default; }
.v2-room[data-static]:hover { background: transparent; }
@keyframes v2-room-in {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}
.v2-room-thumb {
  width: 5.5rem; height: 3.6rem; object-fit: cover; border-radius: 2px;
  filter: saturate(.92);
}
.v2-room-thumb--empty {
  width: 5.5rem; height: 3.6rem; border-radius: 2px;
  border: 1px dashed color-mix(in srgb, var(--vse-paper) 25%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--vse-muted); font-size: .7rem; letter-spacing: .12em;
}
.v2-room-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 600;
  color: var(--vse-paper); margin: 0;
}
.v2-room-fact { margin: .15rem 0 0; font-size: .85rem; color: var(--vse-muted); }
.v2-room-open {
  color: var(--vse-gold); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 560px) {
  .v2-room { grid-template-columns: 4.25rem 1fr; }
  .v2-room-open { display: none; }
  .v2-room-thumb, .v2-room-thumb--empty { width: 4.25rem; height: 2.9rem; }
}

/* ── Essentials strip ─────────────────────────────────────────── */
.v2-essentials { margin-top: clamp(3rem, 6vw, 5rem); }
.v2-ess-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
@media (max-width: 900px) { .v2-ess-grid { grid-template-columns: repeat(2, 1fr); } }
.v2-ess {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--vse-paper) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--vse-paper) 10%, transparent);
  border-radius: 3px;
  color: inherit; font: inherit; text-align: left; cursor: default;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.v2-ess:hover {
  border-color: color-mix(in srgb, var(--vse-gold) 55%, transparent);
  background: color-mix(in srgb, var(--vse-paper) 7%, transparent);
  transform: translateY(-2px);
}
.v2-ess svg {
  width: 1.9rem; height: 1.9rem; margin-bottom: .4rem;
  fill: none; stroke: var(--vse-gold); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.v2-ess-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem; font-weight: 600; color: var(--vse-paper);
}
.v2-ess-sub { font-size: .82rem; color: var(--vse-muted); line-height: 1.4; }

/* ── Gallery: clickable + lightbox ────────────────────────────── */
.v-gallery-item { cursor: zoom-in; }
.v2-lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--vse-ink) 92%, black);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.v2-lightbox[hidden] { display: none; }
.v2-lightbox figure { margin: 0; max-width: min(92vw, 78rem); text-align: center; }
.v2-lightbox img {
  max-width: 100%; max-height: 82dvh; object-fit: contain;
  border-radius: 2px;
}
.v2-lightbox figcaption { margin-top: .8rem; color: var(--vse-muted); }
.v2-lb-close, .v2-lb-prev, .v2-lb-next {
  position: absolute;
  background: transparent; border: 1px solid color-mix(in srgb, var(--vse-paper) 25%, transparent);
  color: var(--vse-paper); font-size: 1.15rem; line-height: 1;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .25s ease, background .25s ease;
}
.v2-lb-close:hover, .v2-lb-prev:hover, .v2-lb-next:hover {
  border-color: var(--vse-gold);
  background: color-mix(in srgb, var(--vse-gold) 15%, transparent);
}
.v2-lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.v2-lb-prev { left: clamp(.75rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.v2-lb-next { right: clamp(.75rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ── Sprach-Toggle ────────────────────────────────────────────── */
.v2-lang { display: flex; gap: .15rem; align-items: center; }
.v2-lang-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--vse-muted); font: inherit; font-size: .72rem;
  letter-spacing: .14em; font-weight: 600;
  padding: .5rem .45rem; min-height: 2.25rem;
  transition: color .25s ease;
}
.v2-lang-btn:hover { color: var(--vse-paper); }
.v2-lang-btn.is-active {
  color: var(--vse-gold);
  text-decoration: underline; text-underline-offset: .35em;
  text-decoration-thickness: .12em;
}
.v2-lang-btn:focus-visible { outline: 2px solid var(--vse-gold); outline-offset: 2px; }

/* ── Scroll-Reveals ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ── Parallax-Figuren ─────────────────────────────────────────── */
figure[data-parallax] { overflow: hidden; }
figure[data-parallax] img { will-change: transform; transform: scale(1.15); }

/* ── Band-Knopf gerade stellen ────────────────────────────────
   shell.css kippt `.v-band` um `skewY(-.7deg)`. Von den drei Bändern
   tragen zwei `data-reveal`, und `[data-reveal].is-revealed` setzt
   `transform: none` — die beiden standen also längst gerade, nur das
   Galerie-Band blieb als einziges schief stehen. Jetzt stehen alle drei
   gerade; die Ausnahme greift nur beim Band ohne Reveal, damit die
   Einblend-Bewegung der anderen beiden unberührt bleibt. */
.v-band:not([data-reveal]) { transform: none; }
.v-band:hover { transform: none; }

/* ── Galerie-CTA-Band ─────────────────────────────────────────── */
.v2-gallery-cta {
  max-width: 72rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0 clamp(1.25rem, 6vw, 6rem);
  text-align: center;
}
.v2-gallery-cta-line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-style: italic;
  color: var(--vse-paper); margin: 0 0 1.2rem;
}

/* ── Rail-CTA (Lage) ──────────────────────────────────────────── */
.v2-rail-cta { margin-top: 1.5rem; display: inline-block; }

/* ── Sticky-CTA ───────────────────────────────────────────────── */
.v2-sticky-cta {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.4rem; border-radius: 999px;
  background: var(--vse-gold); color: #17303f;
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(4, 16, 24, .45);
  transform: translateY(180%); opacity: 0;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease,
    background .25s ease;
}
.v2-sticky-cta.is-visible { transform: none; opacity: 1; }
.v2-sticky-cta:hover { background: #e6b76f; }
.v2-sticky-cta:focus-visible { outline: 2px solid var(--vse-paper); outline-offset: 3px; }

/* ── Griechisch: Didot-Serif + Inter (Cormorant/Inter Tight haben kein
      griechisches Alphabet) ────────────────────────────────────── */
html[lang="el"] body { font-family: "Inter", "Inter Tight", system-ui, sans-serif; }
html[lang="el"] .v-display, html[lang="el"] .scroll-scrub__title,
html[lang="el"] .v-location-line, html[lang="el"] .v-gallery-line,
html[lang="el"] .v-rate-name, html[lang="el"] .v-form-head,
html[lang="el"] .v2-level-name, html[lang="el"] .v2-room-name,
html[lang="el"] .v2-ess-title, html[lang="el"] .v-footer-wordmark,
html[lang="el"] .v-numeral-big, html[lang="el"] .v-cal-title,
html[lang="el"] .v2-gallery-cta-line {
  font-family: "GFS Didot", "Cormorant Garamond", Georgia, serif;
}

/* ── Seiten-Fortschritt (Goldlinie ganz oben) ─────────────────── */
.v2-page-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: color-mix(in srgb, var(--vse-paper) 8%, transparent);
  pointer-events: none;
}
.v2-page-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--vse-gold-deep), var(--vse-gold));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ── Wort-Masken für Headlines ────────────────────────────────── */
[data-splitreveal] .v2-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
}
[data-splitreveal] .v2-wi {
  display: inline-block; transform: translateY(118%);
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
[data-splitreveal].is-revealed .v2-wi { transform: none; }

/* ── Eyebrows: Buchstaben-Spreizung läuft beim Reveal zusammen ── */
.v2-tracking { letter-spacing: .32em; }
.v2-tracking.is-revealed { letter-spacing: .14em; }
[data-reveal].v2-tracking {
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1),
    letter-spacing 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* ── Essentials: Gold-Glanz zieht einmal über die Karte ───────── */
.v2-ess { position: relative; overflow: hidden; }
.v2-ess::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%,
    color-mix(in srgb, var(--vse-gold) 22%, transparent) 50%, transparent 62%);
  transform: translateX(-140%);
}
.v2-ess.is-revealed::after { animation: v2-shine 1.1s ease .5s forwards; }
@keyframes v2-shine { to { transform: translateX(140%); } }

.v2-gallery-scrolly { overflow-x: clip; position: relative; }

/* ── Galerie: vertikaler Scroll fährt die Leiste quer ─────────── */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .v2-gallery-scrolly { min-height: 280vh; }
  .v2-gallery-stage {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
    gap: clamp(1.5rem, 3vh, 3rem);
    padding-top: 5.5rem; /* Platz für die fixe Nav */
    box-sizing: border-box;
  }
  .v2-gallery-scrolly .v-gallery-strip {
    overflow: visible; will-change: transform;
  }
}

/* ── Buchung: Kalender kippt herein, Stempel drückt auf ───────── */
[data-reveal][data-tilt] {
  transform: perspective(900px) rotateX(9deg) translateY(34px);
  transform-origin: top center;
}
[data-reveal][data-stamp] {
  transform: scale(1.3) rotate(-5deg);
  transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
/* Revealed-Zustand muss die Effekt-Ausgangslagen schlagen (Kaskade!) */
[data-reveal][data-tilt].is-revealed,
[data-reveal][data-stamp].is-revealed { transform: none; }

/* ── Fußweg-Linie Haus → Meer (scrollt sich voll) ─────────────── */
.v2-walk { width: min(20rem, 70%); display: block; margin: 1.2rem 0 0; }
.v2-walk #walk-path {
  fill: none; stroke: var(--vse-gold); stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.v2-walk .v2-walk-house {
  fill: none; stroke: color-mix(in srgb, var(--vse-paper) 55%, transparent);
  stroke-width: 1.4; stroke-linejoin: round;
}
.v2-walk .v2-walk-sea {
  fill: none; stroke: color-mix(in srgb, #6ecbd4 70%, transparent);
  stroke-width: 1.4; stroke-linecap: round;
}

/* ── FAQ: weiches Auf- und Zuklappen ──────────────────────────── */
:root { interpolate-size: allow-keywords; }
.v-faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .45s cubic-bezier(.22, 1, .36, 1),
    content-visibility .45s;
  transition-behavior: allow-discrete;
}
.v-faq details[open]::details-content { block-size: auto; }

/* ── Footer-Stern dreht mit dem Scroll ────────────────────────── */
.v-footer-mark { will-change: transform; }

/* ── Geisterwörter: riesige Umriss-Serifen hinter den Sektionen ─ */
.v2-has-ghost { position: relative; overflow-x: clip; }
.v2-has-ghost > .v-section-inner { position: relative; z-index: 1; }
.v2-ghost {
  position: absolute; top: clamp(.5rem, 3vw, 2.5rem); left: -2vw;
  z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(6rem, 17vw, 15rem); font-weight: 600; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--vse-paper) 11%, transparent);
  will-change: transform;
}
.v2-ghost--stage { top: auto; bottom: 4vh; }

/* ── Essentials-CTA ───────────────────────────────────────────── */
.v2-ess-cta {
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2.5rem;
}
.v2-ess-cta-line {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-style: italic;
  color: var(--vse-paper); margin: 0;
}

/* ── Ein Tag in der Villa ─────────────────────────────────────── */
.v2-day { position: relative; min-height: 520vh; background: var(--vse-ink); }
.v2-day-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.v2-day-panel {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .7s ease;
}
.v2-day-panel.is-on { opacity: 1; }
.v2-day-panel img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform; transform: scale(1.04);
}
.v2-day-panel::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(75deg, color-mix(in srgb, var(--vse-ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--vse-ink) 30%, transparent) 42%, transparent 68%);
}
.v2-day-panel[data-tint="dawn"]::after {
  background:
    linear-gradient(75deg, color-mix(in srgb, var(--vse-ink) 78%, transparent) 0%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, #f0b98a 14%, transparent), transparent 55%);
}
.v2-day-panel[data-tint="dusk"]::after {
  background:
    linear-gradient(75deg, color-mix(in srgb, var(--vse-ink) 80%, transparent) 0%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, #d9863c 22%, transparent), transparent 65%);
}
.v2-day-panel[data-tint="night"]::after {
  background:
    linear-gradient(75deg, color-mix(in srgb, var(--vse-ink) 82%, transparent) 0%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, #061722 55%, transparent), color-mix(in srgb, #0a2233 25%, transparent));
}
.v2-day-hud {
  position: absolute; z-index: 2;
  left: clamp(1.25rem, 6vw, 6rem); bottom: clamp(2.5rem, 11vh, 7rem);
  max-width: min(34rem, 82vw);
}
.v2-day-kicker { color: var(--vse-gold); }
.v2-day-time {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 600; line-height: 1;
  color: var(--vse-paper); margin: .5rem 0 1rem;
  text-shadow: 0 2px 3px rgba(4, 16, 24, .5);
  font-variant-numeric: tabular-nums;
}
.v2-day-time.is-swap { animation: v2-time-in .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes v2-time-in {
  from { opacity: 0; transform: translateY(18%); }
  to { opacity: 1; transform: none; }
}
.v2-day-block { display: none; }
.v2-day-block.is-on { display: block; animation: v2-time-in .6s cubic-bezier(.22, 1, .36, 1); }
.v2-day-block h3 {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600;
  color: var(--vse-paper); margin: 0 0 .5rem;
}
.v2-day-block p {
  color: #b9c7ce; font-size: clamp(.95rem, 1.3vw, 1.1rem);
  line-height: 1.55; margin: 0;
  text-shadow: 0 1px 3px rgba(4, 16, 24, .5);
}
.v2-day-line {
  height: 2px; margin-top: 1.4rem;
  background: color-mix(in srgb, var(--vse-paper) 16%, transparent);
}
.v2-day-line span {
  display: block; height: 100%;
  background: var(--vse-gold);
  transform: scaleX(0); transform-origin: 0 50%;
}
.v2-day-cta {
  position: absolute; z-index: 3; bottom: 5vh;
  left: auto; right: clamp(1.5rem, 6vw, 6rem);
  text-align: right; pointer-events: none;
}
@media (max-width: 700px) {
  .v2-day-cta { right: 1.25rem; left: 1.25rem; text-align: right; bottom: 3vh; }
}
.v2-day-cta a { pointer-events: auto; }
.v2-day-cta-line {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-style: italic;
  color: var(--vse-paper); margin: 0 0 1rem;
  text-shadow: 0 2px 3px rgba(4, 16, 24, .6);
}

/* ── Stilisierte Lage-Karte ───────────────────────────────────── */
.v2-map { width: 100%; height: auto; display: block;
  background: color-mix(in srgb, var(--vse-paper) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--vse-paper) 10%, transparent);
  border-radius: 3px;
}
.map-coast { fill: none; stroke: color-mix(in srgb, var(--vse-gold) 78%, transparent); stroke-width: 2; stroke-linecap: round; }
.map-wave { fill: none; stroke: color-mix(in srgb, #6ecbd4 55%, transparent); stroke-width: 1.4; stroke-linecap: round; }
.map-walkline {
  fill: none; stroke: var(--vse-gold); stroke-width: 1.5;
  stroke-dasharray: 3 5; stroke-linecap: round;
  opacity: 0; transition: opacity .6s ease .9s;
}
.v2-map-fig.is-revealed .map-walkline { opacity: 1; }
.map-house { fill: color-mix(in srgb, var(--vse-gold) 25%, transparent); stroke: var(--vse-gold); stroke-width: 1.5; stroke-linejoin: round; }
.map-marker circle { fill: var(--vse-ink); stroke: var(--vse-gold); stroke-width: 1.6; }
.map-label { font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif; font-size: 16px; font-weight: 600; fill: var(--vse-paper); }
.map-label--villa { font-size: 18px; font-style: italic; fill: var(--vse-gold); }
.map-sea { font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif; font-style: italic; font-size: 14px; letter-spacing: .34em; fill: color-mix(in srgb, var(--vse-paper) 42%, transparent); }
.map-small { font-size: 12px; letter-spacing: .06em; fill: var(--vse-muted); }
.map-north { fill: color-mix(in srgb, var(--vse-paper) 45%, transparent); }
.map-note { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: color-mix(in srgb, var(--vse-paper) 30%, transparent); }
.map-marker {
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s);
}
.v2-map-fig.is-revealed .map-marker { opacity: 1; transform: none; }

/* ── Vertrauens-Chips im Buchungsformular ─────────────────────── */
.v2-trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  list-style: none; margin: 1rem 0 1.4rem; padding: 0;
}
.v2-trust li {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vse-muted);
}
.v2-trust li::before {
  content: "✦"; color: var(--vse-gold); margin-right: .45rem;
}

/* ── Neubau-Hinweis im Buchungsformular ───────────────────────── */
.v2-build-note {
  border: 1px solid color-mix(in srgb, var(--vse-gold) 35%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--vse-gold) 7%, transparent);
  color: color-mix(in srgb, var(--vse-paper) 88%, transparent);
  font-size: .84rem; line-height: 1.5;
  padding: .7rem .95rem; margin: 0 0 1.2rem;
}

/* ── Stempel-Knopf atmet golden ───────────────────────────────── */
.v-stamp.is-revealed { animation: v2-stamp-breathe 3.2s ease-in-out 1s infinite; }
@keyframes v2-stamp-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vse-gold) 0%, transparent); }
  50% { box-shadow: 0 0 26px 2px color-mix(in srgb, var(--vse-gold) 28%, transparent); }
}

/* ── Abschluss: Golden-Hour-Vollbild ──────────────────────────── */
.v2-closer { position: relative; min-height: 92vh; min-height: 92dvh; display: flex; align-items: center; overflow: hidden; }
.v2-closer-bg { position: absolute; inset: 0; margin: 0; }
.v2-closer-bg img { width: 100%; height: 100%; object-fit: cover; }
.v2-closer::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(80deg, color-mix(in srgb, var(--vse-ink) 82%, transparent) 0%,
      color-mix(in srgb, var(--vse-ink) 35%, transparent) 48%, transparent 75%),
    linear-gradient(0deg, color-mix(in srgb, var(--vse-ink) 65%, transparent), transparent 40%);
}
.v2-closer-inner {
  position: relative; z-index: 2;
  padding: clamp(2rem, 8vw, 8rem);
  max-width: 46rem;
}
.v2-closer-line {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-weight: 600; line-height: 1.02;
  letter-spacing: -.03em; color: var(--vse-paper); margin: 0 0 1.2rem;
}
.v2-closer-sub {
  color: #b9c7ce; font-size: clamp(1rem, 1.5vw, 1.2rem); margin: 0 0 2rem;
}
.v2-closer-cta {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.1rem 2.2rem; border-radius: 999px;
  background: var(--vse-gold); color: #17303f;
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 10px 40px rgba(4, 16, 24, .5);
  transition: background .25s ease, transform .3s ease;
}
.v2-closer-cta:hover { background: #e6b76f; transform: translateY(-2px); }
.v2-closer-cta:focus-visible { outline: 2px solid var(--vse-paper); outline-offset: 3px; }

/* ── Film-Korn über der ganzen Seite ──────────────────────────── */
.v2-grain {
  position: fixed; inset: 0; z-index: 65; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ── Nav taucht beim Runterscrollen weg ───────────────────────── */
.v-nav { transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.v-nav.is-hidden { transform: translateY(-140%); opacity: 0; }

/* ── Scroll-gescrubbte Zahlen: feste Breite, keine Sprünge ────── */
.v2-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Custom-Cursor (nur Desktop) ──────────────────────────────── */
.v2-has-cursor, .v2-has-cursor * { cursor: none !important; }
.v2-cursor { pointer-events: none; }
.v2-cursor-dot {
  position: fixed; top: -4px; left: -4px; z-index: 99;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vse-gold);
}
.v2-cursor-ring {
  position: fixed; top: -19px; left: -19px; z-index: 98;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--vse-gold) 60%, transparent);
  transition: border-color .25s ease, background .25s ease;
}
.v2-cursor-ring.is-active {
  border-color: var(--vse-gold);
  background: color-mix(in srgb, var(--vse-gold) 10%, transparent);
}

/* ── Magnetische CTAs ─────────────────────────────────────────── */
[data-magnet] { transition: translate .3s cubic-bezier(.22, 1, .36, 1); }

/* ── 3D-Tilt: schnelle Transform-Reaktion trotz Reveal ────────── */
.v2-ess.is-revealed {
  transition: opacity .8s ease, transform .16s ease-out,
    border-color .3s ease, background .3s ease;
}
.v-gallery-item { transition: transform .16s ease-out; }
.v2-room { transition: background .25s ease, transform .16s ease-out; }

/* ── Sonne/Mond im Tages-Kapitel ──────────────────────────────── */
.v2-sky { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; }
.v2-sun {
  position: absolute; top: -18px; left: -18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, #ffedbd, #e8b45f 58%, transparent 72%);
  box-shadow: 0 0 44px 14px rgba(233, 180, 95, .32);
  transition: opacity .6s ease, box-shadow .6s ease;
}
.v2-sky.is-dusk .v2-sun {
  background: radial-gradient(circle, #ffd09a, #d9863c 58%, transparent 72%);
  box-shadow: 0 0 44px 14px rgba(217, 134, 60, .38);
}
.v2-moon {
  position: absolute; top: -13px; left: -13px;
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset -7px -4px 0 0 rgba(243, 239, 230, .85),
    0 0 26px 8px rgba(243, 239, 230, .12);
  opacity: 0; transition: opacity .6s ease;
}
.v2-sky.is-night .v2-sun { opacity: 0; }
.v2-sky.is-night .v2-moon { opacity: 1; }

/* ── Scroll-Hinweis im Hero ───────────────────────────────────── */
/* Der Hinweis lag genau auf der Kapitelzeile des Scroll-Films — beide sitzen
   unten mittig, gemessen ueberlappten sie auf JEDER Fensterhoehe (720 bis
   1180 px): "SCROLLEN" stand ueber "DIE VILLA". Der Abstand rechnet jetzt die
   Kapitelzeile mit (deren bottom-Wert plus ihre Hoehe von 2,75rem plus Luft). */
.v2-scrollhint {
  position: absolute; z-index: 6; left: 50%;
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + 3.75rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  pointer-events: none;
  transition: opacity .6s ease;
}
.v2-scrollhint.is-gone { opacity: 0; }
.v2-scrollhint-line {
  width: 1px; height: 44px; overflow: hidden; position: relative;
  background: color-mix(in srgb, var(--vse-paper) 18%, transparent);
}
.v2-scrollhint-line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--vse-gold);
  animation: v2-hintdrop 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes v2-hintdrop {
  0% { top: -50%; }
  70%, 100% { top: 110%; }
}
.v2-scrollhint-label {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--vse-paper) 65%, transparent);
}

/* ── Mobile Nav: kompakt, nichts quetscht ─────────────────────── */
@media (max-width: 720px) {
  .v-nav {
    gap: .45rem;
    padding: .45rem .5rem .45rem .85rem;
    max-width: calc(100vw - 1.25rem);
  }
  .v-nav-wordmark { font-size: .68rem; letter-spacing: .16em; }
  .v2-lang { gap: 0; }
  .v2-lang-btn { padding: .45rem .3rem; font-size: .66rem; min-height: 2rem; }
}
@media (max-width: 480px) {
  /* Die Nav-Pille fliegt raus — Hero-CTA und Sticky-CTA übernehmen */
  .v-nav .v-pill { display: none; }
  .v-nav { padding-right: .85rem; }
}

/* ── Skip-Link (nur bei Tastaturfokus sichtbar) ───────────────── */
.v2-skip {
  position: absolute; left: -9999px; top: 0;
}
.v2-skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  background: var(--vse-gold); color: #17303f;
  padding: .8rem 1.2rem; border-radius: 3px; text-decoration: none;
  font-weight: 600;
}

/* ── Klimadiagramm „Beste Reisezeit" ──────────────────────────── */
.v2-climate svg {
  width: 100%; height: auto; display: block;
  background: color-mix(in srgb, var(--vse-paper) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--vse-paper) 10%, transparent);
  border-radius: 3px;
}
.cl-grid line { stroke: color-mix(in srgb, var(--vse-paper) 10%, transparent); stroke-width: 1; }
.cl-axis { font-size: 10px; fill: var(--vse-muted); text-anchor: end; }
.cl-sun { fill: color-mix(in srgb, var(--vse-gold) 26%, transparent); }
.cl-air { fill: none; stroke: var(--vse-gold); stroke-width: 2.2; stroke-linecap: round; }
.cl-water { fill: none; stroke: #6ecbd4; stroke-width: 2; stroke-linecap: round; }
.cl-months text { font-size: 10.5px; fill: var(--vse-muted); text-anchor: middle; letter-spacing: .04em; }
.cl-peak { font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif; font-size: 16px; font-weight: 600; }
.cl-peak--air { fill: var(--vse-gold); }
.cl-peak--water { fill: #6ecbd4; }
.cl-band--w { fill: color-mix(in srgb, var(--vse-paper) 18%, transparent); }
.cl-band--s { fill: color-mix(in srgb, var(--vse-gold) 45%, transparent); }
.cl-band--hs { fill: color-mix(in srgb, var(--vse-gold) 85%, transparent); }
.v2-climate-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .8rem;
  font-size: .72rem; letter-spacing: .08em; color: var(--vse-muted);
}
.cl-key::before {
  content: ""; display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; margin-right: .4rem; vertical-align: -1px;
}
.cl-key--air::before { background: var(--vse-gold); }
.cl-key--water::before { background: #6ecbd4; }
.cl-key--sun::before { background: color-mix(in srgb, var(--vse-gold) 30%, transparent); }
.cl-source { margin-left: auto; opacity: .75; }

.v2-season-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  margin-top: 1.25rem;
}
@media (max-width: 700px) { .v2-season-chips { grid-template-columns: repeat(2, 1fr); } }
.v2-season-chip {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.2rem; border-radius: 3px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--vse-paper) 12%, transparent);
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.v2-season-chip:hover {
  border-color: color-mix(in srgb, var(--vse-gold) 60%, transparent);
  background: color-mix(in srgb, var(--vse-paper) 5%, transparent);
  transform: translateY(-2px);
}
.v2-season-chip--hot { border-color: color-mix(in srgb, var(--vse-gold) 40%, transparent); }
.v2-chip-name {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: 1.3rem; font-weight: 600; color: var(--vse-paper);
}
.v2-chip-price { color: var(--vse-gold); font-weight: 600; }
.v2-chip-price i { font-style: normal; font-size: .72em; color: var(--vse-muted); font-weight: 400; }

/* ── Preisrechner im Formular ─────────────────────────────────── */
.v2-quote {
  border: 1px solid color-mix(in srgb, var(--vse-paper) 14%, transparent);
  border-radius: 3px; padding: .9rem 1.1rem; margin: .25rem 0 .75rem;
  background: color-mix(in srgb, var(--vse-paper) 3%, transparent);
}
.v2-quote[hidden] { display: none; }
.v2-quote-row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .88rem; color: var(--vse-muted); padding: .18rem 0;
}
.v2-quote-total {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .5rem; padding-top: .55rem;
  border-top: 1px solid color-mix(in srgb, var(--vse-paper) 16%, transparent);
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: 1.25rem; font-weight: 600; color: var(--vse-paper);
}
.v2-quote-total span:last-child { color: var(--vse-gold); }
.v2-quote-warn { color: #e0a35c; font-size: .82rem; margin: .5rem 0 0; }
.v2-quote-note { color: var(--vse-muted); font-size: .75rem; margin: .5rem 0 0; }

/* ── Direkt-buchen-Leiste ─────────────────────────────────────── */
.v2-direct {
  display: flex; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--vse-paper) 10%, transparent);
}
.v2-direct-head {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-style: italic;
  color: var(--vse-paper); margin: 0;
}
.v2-direct-list {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  list-style: none; margin: 0; padding: 0;
}
.v2-direct-list li {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vse-muted);
}
.v2-direct-list li::before { content: "✦"; color: var(--vse-gold); margin-right: .45rem; }

/* ── Galerie-Hover-Clips ──────────────────────────────────────── */
.v-gallery-item { position: relative; }
.v2-hoverclip {
  position: absolute; top: 0; left: 0; width: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.v-gallery-item.is-playing .v2-hoverclip { opacity: 1; }

/* ── Formularfokus in Gold ────────────────────────────────────── */
.v-input:focus, .v-select:focus, .v-textarea:focus {
  border-color: var(--vse-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vse-gold) 16%, transparent);
  outline: none;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2-room { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .v2-sticky-cta { transition: none; }
  figure[data-parallax] img { transform: none; }
  [data-splitreveal] .v2-wi { transform: none; transition: none; }
  .v2-tracking { letter-spacing: .14em; }
  .v2-ess.is-revealed::after { animation: none; }
  .v2-gallery-scrolly { min-height: 0; }
  .v-faq details::details-content { transition: none; }
  .v2-walk #walk-path { stroke-dashoffset: 0; }
  .v2-ghost { transform: none; }
  .v2-day { min-height: 0; }
  .v2-day-stage { position: relative; }
  .v2-day-panel { position: relative; opacity: 1; transition: none; }
  .v2-day-panel:not(:first-child) { display: none; }
  .v-stamp.is-revealed { animation: none; }
  .v2-day-time.is-swap, .v2-day-block.is-on { animation: none; }
  /* translate(-50%) ist die Zentrierung aus shell-slim.css (left: 50%), nicht Animation */
  .v-nav, .v-nav.is-hidden { transform: translate(-50%); opacity: 1; transition: none; }
  .v2-grain { display: none; }
  .v2-sky { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RATGEBER-SEITEN (Protaras-Guide) — eigenes, ruhigeres Layout
   ═══════════════════════════════════════════════════════════════ */
.g-page { padding-top: clamp(6rem, 12vh, 9rem); }
.g-wrap { max-width: 46rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2rem); }
.g-wrap--wide { max-width: 62rem; }

/* Brotkrumen */
.g-crumbs {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vse-muted); margin-bottom: 1.5rem;
}
.g-crumbs a { color: var(--vse-muted); text-decoration: none; }
.g-crumbs a:hover { color: var(--vse-gold); }
.g-crumbs span { margin: 0 .5rem; opacity: .5; }

/* Kopf */
.g-hero { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.g-kicker {
  font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--vse-gold); margin: 0 0 1rem;
}
.g-h1 {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 600;
  line-height: 1.05; letter-spacing: -.02em;
  color: var(--vse-paper); margin: 0 0 1.2rem;
}
.g-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65;
  color: #b9c7ce; margin: 0;
}

/* Fließtext */
.g-body h2 {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 600;
  color: var(--vse-paper); margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
  scroll-margin-top: 6rem;
}
.g-body h3 {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600;
  color: var(--vse-paper); margin: 2rem 0 .6rem;
}
.g-body p { color: #b3c1c9; line-height: 1.75; margin: 0 0 1.1rem; font-size: 1.02rem; }
.g-body a { color: var(--vse-gold); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.g-body ul { color: #b3c1c9; line-height: 1.7; padding-left: 1.1rem; margin: 0 0 1.2rem; }
.g-body li { margin-bottom: .45rem; }
.g-body strong { color: var(--vse-paper); font-weight: 600; }

/* Faktenkasten (GEO: zitierfähige Kernaussagen) */
.g-facts {
  border-left: 2px solid var(--vse-gold);
  background: color-mix(in srgb, var(--vse-paper) 4%, transparent);
  padding: 1.1rem 1.3rem; margin: 1.8rem 0; border-radius: 0 3px 3px 0;
}
.g-facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.2rem; }
.g-facts dt { color: var(--vse-muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.g-facts dd { color: var(--vse-paper); margin: 0; font-size: .95rem; }

/* Karten-Raster (Strände, Ziele) */
.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin: 1.5rem 0 2rem; }
.g-card {
  border: 1px solid color-mix(in srgb, var(--vse-paper) 12%, transparent);
  border-radius: 3px; padding: 1.1rem 1.2rem;
  transition: border-color .3s ease, transform .3s ease;
}
.g-card:hover { border-color: color-mix(in srgb, var(--vse-gold) 50%, transparent); transform: translateY(-2px); }
.g-card h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.g-card p { font-size: .9rem; margin: 0; line-height: 1.55; }
.g-card-meta { display: block; margin-top: .6rem; color: var(--vse-gold); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }

/* CTA zurück zur Villa */
.g-cta {
  border-top: 1px solid color-mix(in srgb, var(--vse-paper) 12%, transparent);
  margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.g-cta-line {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-style: italic;
  color: var(--vse-paper); margin: 0 0 .6rem;
}
.g-cta-sub { color: var(--vse-muted); margin: 0 0 1.5rem; font-size: .95rem; }

/* Weiterlesen */
.g-more { margin-top: clamp(2.5rem, 5vw, 4rem); }
.g-more-head { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--vse-muted); margin: 0 0 1rem; }
.g-more-list { display: grid; gap: .4rem; }
.g-more-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 0; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--vse-paper) 10%, transparent);
  color: var(--vse-paper);
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif; font-size: 1.2rem;
  transition: color .25s ease;
}
.g-more-list a:hover { color: var(--vse-gold); }
.g-more-list a::after { content: "→"; color: var(--vse-gold); font-family: system-ui, sans-serif; font-size: .9rem; }

/* FAQ auf Ratgeberseiten */
.g-faq { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.g-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--vse-paper) 12%, transparent);
}
.g-faq summary {
  cursor: pointer; padding: 1rem 0; color: var(--vse-paper);
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif; font-size: 1.2rem;
  list-style: none;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; float: right; color: var(--vse-gold); }
.g-faq details[open] summary::after { content: "×"; }
.g-faq p { color: #b3c1c9; line-height: 1.7; margin: 0 0 1rem; font-size: .97rem; }

/* Bauhinweis unter dem Handlungsaufruf der Ratgeberseiten. Bewusst ruhig
   gesetzt, aber nicht versteckt: er gehoert neben den Knopf, nicht in eine
   zugeklappte Fussnote. */
.g-cta-bau {
  max-width: 46ch;
  margin: 1.1rem auto 0;
  color: var(--vse-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

/* Bauhinweis direkt unter den Preisen. Er stand vorher nur im letzten,
   zugeklappten FAQ-Eintrag bei 95 % Seitentiefe — also unterhalb des
   Buchungsformulars, auf das jeder Handlungsaufruf springt. Wer Preise liest,
   soll den Bauzustand im selben Blick sehen. */
.v-rates-build {
  margin-top: 0.45rem;
  opacity: 0.85;
}

/* Auf schmalen Geraeten reicht der Platz im Hero nicht fuer Kapitelzeile,
   Buchungsknopf UND Scrollhinweis — gemessen ueberlappte "SCROLLEN" dort den
   Knopf "Verfuegbarkeit pruefen". Auf einem Telefon ist Scrollen ohnehin die
   selbstverstaendliche Geste, der Hinweis ist reine Zier. Also weg damit. */
@media (max-width: 1023px) {
  .v2-scrollhint { display: none; }
}

/* ── Bedienbarkeit (Audit 02.09.2026) ─────────────────────────────
   Der Sprachschalter bestand aus drei ~26-px-Tasten ohne Abstand;
   Tippflaechen unter 44 px gelten als zu klein (WCAG 2.5.8 nennt 24 px
   Minimum, Apple empfiehlt 44). Kalender- und Formularregeln liegen in
   villa.css der App — hier nur, was zum v2-Markup gehoert. */
.v2-lang { gap: 0.35rem; }
.v2-lang-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ── Mobilmenü ────────────────────────────────────────────────────
   Unterhalb von 1024 px versteckt villa.css die Kopfleisten-Links; bis zum
   Audit führte dort KEIN Weg aus der Leiste (kein Burger, unter ~500 px auch
   keine Buchungs-Pill). */
.v-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.v-nav-burger span {
  display: block;
  height: 2px;
  background: var(--vse-paper);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.v-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.v-nav-burger:focus-visible { outline: 2px solid var(--vse-gold); outline-offset: 3px; }

.v-mobilmenu {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* "safe center" statt center: bei zu wenig Höhe (Querformat) zentriert
     center nach oben AUS dem Bild heraus — Einträge waren dann unerreichbar.
     Dazu scrollbar machen, damit im Zweifel gewischt werden kann. */
  justify-content: safe center;
  gap: 1.1rem;
  padding: 5.5rem clamp(1.5rem, 8vw, 3rem) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--vse-ink) 96%, black);
}

/* Im Querformat ist die Höhe der Engpass: oben anlegen und Schrift kleiner. */
@media (max-height: 620px) {
  .v-mobilmenu {
    justify-content: flex-start;
    gap: 0.7rem;
    padding-top: 4.5rem;
  }
  .v-mobilmenu-link { font-size: clamp(1.2rem, 4.5vh, 1.6rem); }
}
.v-mobilmenu[hidden] { display: none; }
.v-mobilmenu-link {
  font-family: "Cormorant Garamond", "GFS Didot", Georgia, serif;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  color: var(--vse-paper);
  text-decoration: none;
}
.v-mobilmenu-link:focus-visible,
.v-mobilmenu-cta:focus-visible { outline: 2px solid var(--vse-gold); outline-offset: 4px; }
.v-mobilmenu-cta {
  margin-top: 1.2rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--vse-gold);
  color: #17303f;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 1023px) {
  .v-nav-burger { display: flex; }
}

/* Am Handy sitzt die Kapitelleiste der Scroll-Filme am unteren Rand (bottom
   ~1,75rem, Höhe 2,75rem). Der Sticky-CTA lag genau darauf und machte jeden
   Kapitel-Knopf untippbar. Ihn deshalb auszublenden war der falsche Weg — das
   hinterließ zwei lange Zonen ohne jeden Buchungsweg. Er parkt jetzt darüber. */
@media (max-width: 860px) {
  .v2-sticky-cta {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}