/* ============================================================
   SONIDO DEL MAR, Stylesheet
   Editorial / maritim. Mobile-first.
   Farbwelt: tiefes Petrol -> Aquamarin, Weiß/Sand als Ruhepol.
   ============================================================ */

:root{
  /* --- Aquamarin-Skala --- */
  --deep:    #052a31;   /* fast schwarzes Petrol */
  --petrol:  #06414c;
  --teal:    #0b6e78;
  --aqua:    #17a2a5;
  --aqua-lt: #58c9c4;
  --mint:    #a8e5df;
  --foam:    #e2f5f2;

  /* --- Ruhepol --- */
  --sand:    #f6f2ec;
  --paper:   #fbfaf8;
  --white:   #ffffff;

  --ink:     #10262b;
  --ink-mid: #43676c;
  --ink-soft:#7d9a9d;
  --line:    rgba(6,65,76,.14);

  --busy:    #c2705f;   /* belegte Tage: warmer Kontrast zum Aqua */

  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --r: 4px;
  --ease: cubic-bezier(.16,.84,.34,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--deep); color:var(--foam); padding:.75rem 1.25rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; }

/* ---------- Layout-Helfer ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }
.section{ padding-block:clamp(4.5rem,11vw,9rem); position:relative; }

.eyebrow{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:var(--aqua); margin:0 0 1.1rem;
}

.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,7.2vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1.8rem;
  color:var(--deep);
}
.display--sm{ font-size:clamp(2rem,4.6vw,3.2rem); }
.display em{ font-style:italic; color:var(--teal); }

.lead{ font-size:clamp(1.1rem,1.02rem + .45vw,1.3rem); color:var(--ink-mid); line-height:1.62; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.15rem var(--pad);
  color:var(--white);
  transition:background .5s var(--ease), color .5s var(--ease),
             padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid{
  background:rgba(251,250,248,.92);
  backdrop-filter:blur(14px);
  color:var(--deep);
  padding-block:.7rem;
  box-shadow:0 1px 0 var(--line);
}

.brand{
  font-family:var(--serif); font-size:1.15rem; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
}
.brand span{ font-style:italic; opacity:.8; }

.header__right{ display:flex; align-items:center; gap:1.4rem; }

/* Sprachumschalter, auch auf dem Handy sichtbar */
.lang-toggle{
  flex:none; min-width:2.9rem; padding:.42rem .7rem;
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:inherit; background:transparent;
  border:1px solid currentColor; border-radius:999px;
  cursor:pointer; opacity:.85;
  transition:background .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.lang-toggle:hover{ background:var(--aqua); border-color:var(--aqua); color:var(--white); opacity:1; }

.site-nav{ display:none; align-items:center; gap:1.9rem; }
.site-nav a{
  text-decoration:none; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:400; position:relative; opacity:.92;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-cta{
  border:1px solid currentColor; padding:.5rem 1.1rem; border-radius:999px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--aqua); border-color:var(--aqua); color:var(--white); }

@media (min-width:900px){ .site-nav{ display:flex; } }

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--deep);
}
.hero__media{ position:absolute; inset:-12% 0 -12% 0; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }

/* Zwei Verläufe über dem Titelbild. Das Meer glitzert stark, weißer
   Text würde darin sonst verschwinden. Der senkrechte Verlauf dunkelt
   oben (Navigation) und unten (Titel) ab, der waagerechte nimmt der
   linken Seite die Helligkeit, wo Titel und Subline stehen. Rechts
   bleibt das Wasser hell. */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(5,42,49,.62) 0%, rgba(5,42,49,.22) 45%,
                    rgba(5,42,49,0) 75%),
    linear-gradient(to bottom, rgba(5,42,49,.55) 0%, rgba(5,42,49,.12) 26%,
                    rgba(5,42,49,.46) 58%, rgba(5,42,49,.88) 100%);
}

.hero__inner{
  position:relative; z-index:2;
  /* unten genug Luft, damit die Subline nie im Scroll-Hinweis landet */
  padding:0 var(--pad) clamp(7.5rem,17vh,9.5rem);
  width:100%; max-width:var(--wrap); margin-inline:auto;
  color:var(--white);
}
.hero__eyebrow{
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  margin:0 0 1.4rem; color:var(--mint);
}
.hero__title{
  font-family:var(--serif); font-weight:300;
  /* auch die Fensterhöhe begrenzt die Größe, sonst sprengt der Titel
     flache Fenster (Laptop im Querformat) */
  font-size:clamp(3rem, min(16vw, 19vh), 9.5rem);
  line-height:.92; letter-spacing:-.035em;
  margin:0 0 1.5rem;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__title em{ font-style:italic; color:var(--mint); }

.hero__sub{
  font-size:clamp(1rem,.95rem + .4vw,1.28rem);
  font-weight:300; letter-spacing:.02em; margin:0; max-width:34ch;
  color:rgba(255,255,255,.9);
}

.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:1.6rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  text-decoration:none; color:rgba(255,255,255,.8);
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
}
.hero__scroll-line{
  width:1px; height:52px; background:rgba(255,255,255,.45); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; inset:0; background:var(--mint);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}
/* Ab Tablet nach rechts, damit der Hinweis nie mit der Subline kollidiert */
@media (min-width:820px){
  .hero__scroll{ left:auto; right:var(--pad); transform:none; align-items:flex-end; }
  .hero__scroll-line{ height:64px; }
}

/* Hero-Intro (Fallback ohne GSAP: CSS-Animation) */
[data-hero]{ opacity:0; transform:translateY(26px); }
.no-gsap [data-hero]{ animation:heroIn 1.1s var(--ease) forwards; }
.no-gsap [data-hero="1"]{ animation-delay:.15s; }
.no-gsap [data-hero="2"]{ animation-delay:.30s; }
.no-gsap [data-hero="3"]{ animation-delay:.42s; }
.no-gsap [data-hero="4"]{ animation-delay:.60s; }
.no-gsap [data-hero="5"]{ animation-delay:.85s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ============================================================
   2 · INTRO
   ============================================================ */
.intro{ background:var(--paper); }
.intro__cols{ display:grid; gap:1.4rem; }
@media (min-width:820px){
  .intro__cols{ grid-template-columns:1.05fr 1fr; gap:3.2rem; }
}
.intro p{ margin:0; color:var(--ink-mid); }

.facts{
  list-style:none; margin:clamp(3rem,6vw,4.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:760px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts li{
  background:var(--paper); padding:1.6rem 1.2rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.facts strong{
  font-family:var(--serif); font-weight:300; font-size:1.9rem;
  line-height:1; color:var(--teal);
}
.facts span{ font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft); line-height:1.4; }

/* ============================================================
   3 · ROOMTOUR (Video)
   ============================================================ */
.roomtour{
  background:linear-gradient(180deg, var(--paper) 0%, var(--foam) 100%);
}
.roomtour__grid{ display:grid; gap:clamp(2.2rem,5vw,4rem); align-items:center; }
@media (min-width:900px){
  .roomtour__grid{ grid-template-columns:1fr auto; }
}
.roomtour__text .lead{ max-width:42ch; }
.roomtour__tags{ margin-top:1.6rem; }

/* Das Video ist im Hochformat aufgenommen (Handy). Es bekommt deshalb
   einen schmalen, hohen Rahmen statt der vollen Breite, und wird nicht
   über seine native Auflösung hinaus aufgeblasen. */
.video-card{
  margin:0; justify-self:center;
  width:min(100%, 340px);
  border-radius:14px; overflow:hidden;
  background:var(--deep);
  box-shadow:0 40px 90px -35px rgba(5,42,49,.75);
}
.video-shell{ position:relative; display:block; line-height:0; }
.video-card video{
  display:block; width:100%; height:auto;
  aspect-ratio:9/16; object-fit:cover;
  background:var(--deep);
}

/* Eigener Abspielknopf über dem ganzen Video. Native controls sind
   bewusst aus, sonst gäbe es Lautstärke und Vollbild zurück. */
.video-toggle{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center;
  border:0; padding:0; cursor:pointer;
  background:linear-gradient(to bottom, rgba(5,42,49,.12), rgba(5,42,49,.35));
  transition:opacity .45s var(--ease), background .45s var(--ease);
}
.video-toggle__icon{
  width:4.2rem; height:4.2rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(5,42,49,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.video-toggle:hover .video-toggle__icon{ transform:scale(1.08); background:rgba(23,162,165,.75); }
/* Dreieck für Abspielen */
.video-toggle__icon::before{
  content:""; width:0; height:0; margin-left:5px;
  border-left:15px solid var(--white);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
/* Während der Wiedergabe: zwei Balken, und der Knopf tritt zurück */
.is-playing .video-toggle{ opacity:0; background:transparent; }
.is-playing .video-toggle:hover,
.is-playing .video-toggle:focus-visible{ opacity:1; }
.is-playing .video-toggle__icon::before{
  width:5px; height:19px; margin-left:0; border:0;
  background:var(--white); box-shadow:9px 0 0 var(--white);
  transform:translateX(-4px);
}

/* Fortschritt, klickbar zum Springen */
.video-progress{
  position:absolute; left:0; right:0; bottom:0; height:12px;
  display:flex; align-items:flex-end; cursor:pointer;
  background:linear-gradient(to top, rgba(5,42,49,.45), rgba(5,42,49,0));
}
.video-progress__bar{
  display:block; width:0; height:3px; background:var(--aqua-lt);
  transition:width .15s linear;
}
.video-progress:hover .video-progress__bar{ height:5px; }
.video-card figcaption{
  padding:.8rem 1.1rem;
  font-size:.78rem; letter-spacing:.02em;
  color:var(--mint); background:var(--petrol);
}
.video-card p{ color:var(--mint); padding:1rem; margin:0; font-size:.9rem; }

/* ============================================================
   4 · GALERIE / FEATURES
   ============================================================ */
.gallery{ background:var(--sand); }

.feature{
  display:grid; gap:1.8rem;
  margin-top:clamp(3rem,8vw,6.5rem);
  align-items:center;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
}
@media (min-width:900px){
  .feature{ grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,5vw,5rem); }
  .feature--flip .feature__media{ order:2; }
  .feature--flip .feature__text{ order:1; }
}

.feature__media{
  margin:0; overflow:hidden; border-radius:var(--r);
  aspect-ratio:4/3; background:var(--foam);
  box-shadow:0 24px 60px -30px rgba(5,42,49,.55);
}
@media (min-width:900px){ .feature__media{ aspect-ratio:5/4; } }
.feature__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); will-change:transform;
  transition:filter .8s var(--ease);
}
/* Hover arbeitet mit filter/shadow statt transform, die Transform-
   Ebene gehört beim Scrollen GSAP, sonst überschreiben sich beide. */
.feature__media:hover img{ filter:saturate(1.12) brightness(1.04); }
.feature__media{ transition:box-shadow .8s var(--ease); }
.feature__media:hover{ box-shadow:0 32px 70px -28px rgba(5,42,49,.7); }

.feature__num{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.2em;
  color:var(--aqua); margin:0 0 .9rem;
}
.feature__text h3{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.1;
  letter-spacing:-.015em; margin:0 0 1rem; color:var(--deep);
}
.feature__text p{ margin:0 0 1.4rem; color:var(--ink-mid); }

.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.tags li{
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.42rem .85rem; border:1px solid var(--line); border-radius:999px;
  color:var(--teal); background:rgba(255,255,255,.55);
}

/* ============================================================
   5 · FOTOGALERIE
   ============================================================ */
.photos{ background:var(--paper); }
.photos__lead{ max-width:52ch; }

.photo-grid{
  display:grid; gap:clamp(.9rem,2vw,1.4rem);
  margin-top:clamp(2.5rem,6vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .photo-grid{ grid-template-columns:repeat(3,1fr); }
  /* das Querformat vom Pool nimmt zwei Spalten ein */
  .photo--wide{ grid-column:span 2; }
}

.photo{
  margin:0; position:relative; overflow:hidden;
  border-radius:var(--r); background:var(--foam);
  box-shadow:0 20px 50px -30px rgba(5,42,49,.6);
}
.photo img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:3/4;
  transition:transform 1.4s var(--ease), filter .8s var(--ease);
}
.photo--wide img{ aspect-ratio:4/3; }
.photo:hover img{ transform:scale(1.05); filter:saturate(1.08); }

.photo figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:2.6rem 1.1rem .95rem;
  font-size:.82rem; line-height:1.45; color:var(--white);
  background:linear-gradient(to top, rgba(5,42,49,.85) 0%, rgba(5,42,49,.45) 55%, rgba(5,42,49,0) 100%);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.photo:hover figcaption,
.photo:focus-within figcaption{ opacity:1; transform:none; }
/* Auf Touchgeräten gibt es kein Hover, dort dauerhaft zeigen */
@media (hover:none){
  .photo figcaption{ opacity:1; transform:none; }
}

/* ============================================================
   6 · BEWERTUNGEN
   ============================================================ */
.ratings{ background:var(--paper); }
.ratings > .wrap > p{ color:var(--ink-mid); margin:0; max-width:52ch; }

.scores{
  list-style:none; margin:clamp(2.2rem,5vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:760px){ .scores{ grid-template-columns:repeat(4,1fr); } }
.scores li{
  background:var(--paper); padding:1.5rem 1.2rem;
  display:flex; flex-direction:column-reverse; gap:.3rem;
}
.scores strong{
  font-family:var(--serif); font-weight:300; font-size:2rem;
  line-height:1; color:var(--teal);
}
.scores span{ font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft); }

/* ============================================================
   7 · LAGE
   ============================================================ */
.location{
  padding:0; position:relative; min-height:88svh;
  display:flex; align-items:center; overflow:hidden; background:var(--deep);
}
.location__media{ position:absolute; inset:-10% 0; margin:0; will-change:transform; }
.location__media img{ width:100%; height:100%; object-fit:cover; }
.location::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(5,42,49,.88) 0%, rgba(5,42,49,.62) 46%, rgba(5,42,49,.15) 100%);
}
.location__panel{
  position:relative; z-index:2; color:var(--white);
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(5rem,12vw,8rem) var(--pad);
}
.location__panel .display{ color:var(--white); }
.location__panel > p{ max-width:46ch; color:rgba(255,255,255,.86); margin:0; }
.location__panel .eyebrow{ color:var(--mint); }

.distances{
  list-style:none; margin:2.6rem 0 0; padding:0; display:grid; gap:0;
  max-width:34rem;
}
.distances li{
  display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline;
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.16);
}
.distances span{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mint); }
.distances strong{ font-weight:400; font-size:.95rem; color:rgba(255,255,255,.94); text-align:right; }

/* ============================================================
   8 · ANREISE UND KARTE
   ============================================================ */
.arrival{ background:var(--sand); }
.arrival__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:900px){
  .arrival__grid{ grid-template-columns:.85fr 1.15fr; }
}
.arrival__address{
  font-style:normal; font-size:1.02rem; line-height:1.85;
  color:var(--deep); margin:0 0 1.4rem;
  padding-left:1rem; border-left:2px solid var(--aqua);
}
.arrival__text > p{ color:var(--ink-mid); margin:0; max-width:42ch; }

.arrival__links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
/* doppelte Klasse im Selektor, damit diese Regeln die .btn-Basis schlagen,
   die weiter unten im Stylesheet steht */
.btn.btn--ghost{
  display:inline-block; width:auto; margin:0;
  text-decoration:none; text-align:center;
  background:transparent; color:var(--teal);
  border:1px solid rgba(11,110,120,.4);
  border-radius:999px; padding:.75rem 1.4rem;
}
.btn.btn--ghost:hover{
  background:var(--teal); color:var(--white);
  border-color:var(--teal); box-shadow:none; transform:translateY(-2px);
}

.map-card{
  margin:0; overflow:hidden; border-radius:var(--r);
  background:var(--foam);
  box-shadow:0 28px 70px -35px rgba(5,42,49,.6);
}
.map-card__frame{
  display:block; width:100%; height:clamp(320px,48vh,460px);
  border:0;
}
.map-card__placeholder{
  position:relative;
  height:clamp(320px,48vh,460px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; text-align:center; padding:2rem 1.5rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(88,201,196,.28) 0%, rgba(88,201,196,0) 55%),
    radial-gradient(circle at 75% 70%, rgba(23,162,165,.22) 0%, rgba(23,162,165,0) 50%),
    var(--foam);
}
/* angedeutete Küstenlinie im Hintergrund */
.map-card__placeholder::after{
  content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(to top, rgba(11,110,120,.22), rgba(11,110,120,0));
  clip-path:polygon(0 55%, 18% 42%, 38% 52%, 60% 34%, 82% 46%, 100% 30%, 100% 100%, 0 100%);
}
.map-card__pin{
  width:2.6rem; height:2.6rem; border-radius:50% 50% 50% 0;
  background:var(--teal); transform:rotate(-45deg);
  display:grid; place-items:center; position:relative; z-index:1;
  box-shadow:0 10px 22px -10px rgba(5,42,49,.7);
}
.map-card__pin span{
  width:.8rem; height:.8rem; border-radius:50%; background:var(--foam);
}
.map-card__label{
  margin:0; position:relative; z-index:1;
  font-family:var(--serif); font-size:1.15rem; color:var(--deep);
}
.map-card__placeholder .btn{
  position:relative; z-index:1; width:auto; margin:0; padding:.8rem 1.6rem;
}
.map-card__note{
  margin:0; position:relative; z-index:1;
  font-size:.76rem; color:var(--ink-soft); max-width:30ch;
}
.map-card figcaption{
  padding:.85rem 1.2rem; font-size:.8rem;
  color:var(--mint); background:var(--petrol);
}

/* ============================================================
   9 · DIREKT ANFRAGEN
   ============================================================ */
.direct{ background:var(--paper); }
.benefits{ display:grid; gap:1px; margin-top:clamp(2.8rem,6vw,4rem); background:var(--line); border:1px solid var(--line); }
@media (min-width:820px){ .benefits{ grid-template-columns:repeat(3,1fr); } }
.benefit{ background:var(--paper); padding:2rem 1.6rem; }
.benefit__ico{
  display:grid; place-items:center; width:2.6rem; height:2.6rem; margin-bottom:1.1rem;
  border-radius:50%; background:var(--foam); color:var(--teal);
  font-family:var(--serif); font-size:1.1rem;
}
.benefit h3{ font-family:var(--serif); font-weight:400; font-size:1.2rem; margin:0 0 .5rem; color:var(--deep); }
.benefit p{ margin:0; font-size:.95rem; color:var(--ink-mid); }
.direct__note{
  margin-top:2rem; font-size:.9rem; color:var(--ink-soft); font-style:italic;
}

/* ============================================================
   10 · PREISE
   ============================================================ */
.prices{ background:var(--sand); }

.price-table{
  list-style:none; margin:clamp(2.2rem,5vw,3rem) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.price-table li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; padding:1.05rem .2rem;
  border-bottom:1px solid var(--line);
}
.price-table__span{ color:var(--ink-mid); font-size:.98rem; }
.price-table__value{
  font-family:var(--serif); font-weight:400;
  font-size:1.5rem; color:var(--teal); white-space:nowrap;
}
/* Auf schmalen Displays untereinander statt nebeneinander */
@media (max-width:479px){
  .price-table li{ flex-direction:column; gap:.15rem; }
  .price-table__value{ font-size:1.35rem; }
}

.prices__included{
  margin:1.8rem 0 0; font-size:.92rem; color:var(--ink-soft);
  max-width:56ch; line-height:1.7;
}

/* ============================================================
   11 · VERFÜGBARKEIT + FORMULAR
   ============================================================ */
.booking{
  background:linear-gradient(180deg, var(--deep) 0%, var(--petrol) 100%);
  color:var(--white);
}
.booking .display{ color:var(--white); }
.booking .eyebrow{ color:var(--aqua-lt); }

.booking__grid{ display:grid; gap:1.5rem; margin-top:clamp(2.5rem,6vw,3.5rem); }

/* Linke Spalte neben dem Formular: kurzer Text und die Eckdaten zum
   Aufenthalt. Sie stand früher im Hinweistext unter dem Kalender. */
.booking__side .lead{ color:rgba(255,255,255,.82); margin:0; max-width:40ch; }
.booking__side .distances{ margin-top:2.2rem; }
@media (min-width:980px){
  .booking__side{ padding-top:.5rem; }
  .booking__grid{ gap:clamp(2rem,4vw,3.5rem); }
}
/* Grid-Kinder dürfen schrumpfen, sonst drücken die Datumsfelder
   (die haben eine eigene Mindestbreite) die Karten über den Rand */
.booking__grid > *,
.calendar__months > *,
.field-row > *{ min-width:0; }
@media (min-width:980px){
  .booking__grid{ grid-template-columns:1.08fr .92fr; gap:2rem; align-items:start; }
}

.calendar-card,.form-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:clamp(1.25rem,3.5vw,2rem);
  backdrop-filter:blur(6px);
}

/* ---- Kalender ---- */
.calendar__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.calendar__title{
  margin:0; font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em; text-align:center; flex:1;
}
.cal-nav{
  flex:none; width:2.4rem; height:2.4rem; border-radius:50%;
  background:transparent; border:1px solid rgba(255,255,255,.25);
  color:var(--white); font-size:1.15rem; line-height:1; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.cal-nav:hover:not(:disabled){ background:var(--aqua); border-color:var(--aqua); transform:scale(1.08); }
.cal-nav:disabled{ opacity:.28; cursor:not-allowed; }

.calendar__months{ display:grid; gap:1.8rem; }
@media (min-width:640px){ .calendar__months{ grid-template-columns:1fr 1fr; gap:1.5rem; } }

.month__name{
  margin:0 0 .8rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--aqua-lt); text-align:center;
}
.month__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.month__dow{
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; color:rgba(255,255,255,.42); padding-bottom:.4rem;
}

.day{
  aspect-ratio:1; display:grid; place-items:center;
  font-size:.85rem; font-variant-numeric:tabular-nums;
  border:0; background:transparent; color:rgba(255,255,255,.92);
  border-radius:2px; cursor:pointer; padding:0;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.day:hover:not(:disabled){ background:rgba(255,255,255,.16); transform:scale(1.08); }
.day--empty{ visibility:hidden; }
.day--past{ color:rgba(255,255,255,.2); cursor:not-allowed; }
.day--busy{
  color:rgba(255,255,255,.34); cursor:not-allowed;
  background:
    repeating-linear-gradient(135deg,
      rgba(194,112,95,.42) 0 3px, rgba(194,112,95,0) 3px 6px);
}
.day--unknown{ color:rgba(255,255,255,.55); cursor:default; }
.day--sel{ background:var(--aqua) !important; color:#04262b !important; font-weight:500; }
.day--range{ background:rgba(88,201,196,.28); color:var(--white); }
.day--today{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }

.calendar__status{
  margin:1.3rem 0 0; font-size:.85rem; color:var(--mint);
  min-height:1.2em;
}
.calendar__status.is-error{ color:#f0b6a8; }

.legend{ list-style:none; display:flex; flex-wrap:wrap; gap:1.1rem; margin:1rem 0 0; padding:0; font-size:.76rem; color:rgba(255,255,255,.72); }
.legend li{ display:flex; align-items:center; gap:.45rem; }
.dot{ width:.7rem; height:.7rem; border-radius:2px; display:inline-block; }
.dot--free{ background:rgba(255,255,255,.28); }
.dot--busy{ background:repeating-linear-gradient(135deg, rgba(194,112,95,.85) 0 3px, rgba(194,112,95,.15) 3px 6px); }
.dot--sel{ background:var(--aqua); }

.calendar__hint{ margin:1rem 0 0; font-size:.8rem; color:rgba(255,255,255,.55); line-height:1.55; }

/* ---- Formular ---- */
.form-card h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:0 0 .5rem; }
.form-card__sub{ margin:0 0 1.6rem; font-size:.9rem; color:rgba(255,255,255,.66); }

.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.field label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua-lt); }
.field .opt{ letter-spacing:.04em; text-transform:none; color:rgba(255,255,255,.4); }

.field input,.field select,.field textarea{
  min-width:0; max-width:100%;
  font-family:var(--sans); font-size:.95rem; font-weight:300;
  color:var(--white); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); border-radius:2px;
  padding:.72rem .85rem; width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.34); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--aqua); background:rgba(255,255,255,.12);
}
.field input[aria-invalid="true"]{ border-color:#e08f7d; }
.field select option{ background:var(--petrol); color:var(--white); }
.field textarea{ resize:vertical; min-height:6rem; }
/* Datums-Icon im Dark-Feld sichtbar machen */
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.6; cursor:pointer; }

.field--nights output{
  display:block; padding:.72rem .85rem;
  border:1px dashed rgba(255,255,255,.18); border-radius:2px;
  font-family:var(--serif); font-size:1rem; color:var(--mint);
}

.btn{
  margin-top:.6rem; width:100%;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.5rem; border:0; border-radius:2px; cursor:pointer;
  background:var(--aqua); color:#03222a; font-weight:500;
  transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{ background:var(--mint); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(88,201,196,.8); }
.btn:active{ transform:none; }

.form-msg{ margin:.9rem 0 0; font-size:.86rem; min-height:1.2em; color:var(--mint); }
.form-msg.is-error{ color:#f0b6a8; }

/* ============================================================
   12 · FOOTER
   ============================================================ */
.site-footer{ background:var(--deep); color:rgba(255,255,255,.72); padding-block:clamp(3rem,7vw,4.5rem); }
.footer__grid{ display:grid; gap:2rem; }
@media (min-width:820px){
  .footer__grid{ grid-template-columns:1fr auto; align-items:start; }
  .footer__copy{ grid-column:1 / -1; }
}
.footer__brand{ font-family:var(--serif); font-size:1.5rem; color:var(--white); margin:0 0 .3rem; }
.footer__line{ margin:0; font-size:.88rem; max-width:44ch; }
.footer__contact{ margin-top:.7rem !important; font-size:.88rem; }
.footer__contact a{
  text-decoration:none; color:var(--mint);
  border-bottom:1px solid rgba(168,229,223,.3);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer__contact a:hover{ color:var(--white); border-color:var(--white); }

.legal__contact a{ color:var(--teal); }

.footer__licence{ margin-top:.5rem !important; font-size:.76rem; color:rgba(255,255,255,.45); letter-spacing:.04em; }
.footer__nav{ display:flex; flex-direction:column; gap:.6rem; }
.footer__nav a{ text-decoration:none; font-size:.86rem; letter-spacing:.04em; transition:color .3s var(--ease); }
.footer__nav a:hover{ color:var(--mint); }
.footer__nav span{ color:var(--aqua-lt); }
.footer__copy{ margin:0; font-size:.76rem; color:rgba(255,255,255,.4); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); }

/* ============================================================
   SCROLL-REVEALS (IntersectionObserver, siehe js/main.js)
   ============================================================ */
.reveal,
.reveal-stagger > *{
  opacity:0; transform:translateY(34px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.reveal.is-in,
.reveal-stagger > .is-in{ opacity:1; transform:none; }

.reveal-stagger > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger > *:nth-child(3){ transition-delay:.18s; }
.reveal-stagger > *:nth-child(4){ transition-delay:.27s; }

/* ============================================================
   IMPRESSUM (eigene Seite)
   ============================================================ */
.legal{ padding-block:clamp(7rem,14vw,10rem) clamp(4rem,8vw,6rem); }
.legal h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 2rem; color:var(--deep); }
.legal h2{ font-family:var(--serif); font-weight:400; font-size:1.35rem; margin:2.6rem 0 .7rem; color:var(--teal); }
.legal p{ color:var(--ink-mid); margin:0 0 1rem; }
.legal .todo{
  background:var(--foam); border-left:3px solid var(--aqua);
  padding:1rem 1.2rem; font-size:.9rem; color:var(--petrol);
}
.legal a.back{ display:inline-block; margin-top:2.5rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }

/* ============================================================
   REDUZIERTE BEWEGUNG
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-stagger > *,[data-hero]{ opacity:1 !important; transform:none !important; }
  .hero__media,.location__media,.feature__media img{ transform:none !important; }
}