/* ============================================================
   Ferienwohnungen an der Ostsee – gemeinsame Basis
   Enthält: Farben, Typografie, Header, Navigation, Footer,
            Wellen-Divider, Scroll-Reveal.
   Seitenspezifisches CSS bleibt in der jeweiligen HTML-Datei.
   ============================================================ */

:root{
  --ink-deep: #0F2A33;
  --parchment: #F6EFE2;
  --parchment-soft: #FBF6EC;
  --chart: #C97A3D;
  --chart-dark: #A35F2B;
  --tide: #4FA8A0;
  --tide-bright: #6FC4BC;
  --ink: #1C1A16;
  --ink-soft: #5C5750;
  --white: #FFFFFF;
  --max-width: 1180px;
  --header-h: 70px;   /* Höhe des Headers – wird u. a. vom Hero-Bild genutzt */

  /* Rückwärtskompatible Aliase, damit bestehende Regeln weiter greifen */
  --sand-light: var(--parchment);
  --sand: #EADFC8;
  --wood: var(--chart);
  --wood-dark: var(--chart-dark);
  --sea: var(--ink-deep);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  color: var(--ink);
  background: var(--parchment);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color: var(--ink);
}

.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
}

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

.wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* Beim Sprung auf einen Anker (#galerie, #anfrage, #suche) genug Abstand
   lassen, damit der Abschnitt nicht unter dem klebenden Header beginnt. */
[id]{ scroll-margin-top: calc(var(--header-h) + 14px); }

/* hidden zuverlässig durchsetzen, auch bei Flex- und Grid-Elementen */
[hidden]{ display: none !important; }

/* ============================================================
   Bedienung auf Handys
   ============================================================ */

/* Safari auf dem iPhone zoomt beim Antippen in ein Eingabefeld hinein,
   sobald dessen Schrift kleiner als 16px ist. Der Besucher landet dann in
   einer vergrößerten, seitlich verschobenen Ansicht. */
@media (max-width: 860px){
  input, select, textarea{ font-size: 16px !important; }
}

/* Auf schmalen Bildschirmen sind 28px Rand links und rechts zu viel –
   das sind 56 von 390 Pixeln, also ein Siebtel der Breite. */
@media (max-width: 560px){
  .wrap{ padding: 0 18px; }
  .logo{ font-size: 1.15rem; }
  .logo span{ font-size: 0.58rem; letter-spacing: 0.14em; }
  footer{ padding: 34px 0 26px; }
  .footer-legal{ padding-top: 14px; }
}

/* Kein waagerechtes Wegscrollen: Ein einzelnes zu breites Element würde
   sonst die ganze Seite verschiebbar machen.

   "hidden" hat dabei einen teuren Nebeneffekt: es macht body zu einem
   eigenen Scroll-Container. Alles, was mit "position: sticky" arbeitet,
   klebt dann an diesem Container statt am Fenster – und weil der nie
   scrollt, klebt es faktisch gar nicht. Das betraf den Header und die
   Buchungskarte auf den Wohnungsseiten.

   "clip" verhindert dasselbe seitliche Scrollen, erzeugt aber keinen
   Scroll-Container. Sticky funktioniert damit wieder. Ältere Browser,
   die clip nicht kennen, bleiben bei hidden – dort ist die Seite dann
   wie bisher, nur ohne klebende Elemente. */
html, body{ overflow-x: hidden; }
@supports (overflow-x: clip){
  html, body{ overflow-x: clip; }
}
img, svg, video, table{ max-width: 100%; }

/* Finger brauchen mehr Fläche als Mauszeiger. Empfohlen sind mindestens
   44 x 44 Pixel; die Schaltflächen waren teils nur 26 Pixel groß. */
@media (pointer: coarse){
  .guest-btn{ width: 44px; height: 44px; font-size: 1.25rem; }
  .trip-cal-month-head .nav-btn{ width: 40px; height: 40px; font-size: 1rem; }
  .calendar-nav button{ width: 40px; height: 40px; }
  .carousel-arrow{ width: 46px; height: 46px; }
  .lightbox-nav{ width: 48px; height: 48px; }
  .lightbox-close{ width: 48px; height: 48px; }
  .gallery-cta-arrow{ width: 40px; height: 40px; }
  .trip-cal-day{ min-height: 40px; }
  .faq-item summary{ padding-top: 20px; padding-bottom: 20px; }
}

/* Sichtbarer Fokus für Tastaturbedienung */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--tide);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sprunglink für Screenreader / Tastatur */
.skip-link{
  position:absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 4px 0;
}
.skip-link:focus{ left: 0; }

.eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--chart-dark);
  margin-bottom: 18px;
  display:block;
}

/* ============================================================
   Header – auf allen Seiten identisch
   ============================================================ */
header{
  position: sticky;
  top: 0;
  left: 0; right: 0;
  z-index: 100;
  padding: 0;
  background: var(--ink-deep);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
/* align-items:stretch, damit die Navigationspunkte die volle Höhe
   des Headers einnehmen und über die ganze Fläche anklickbar sind. */
header .wrap{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.logo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 10px 0;
  font-family:'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--white);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
  line-height: 1.2;
}
.logo span{
  display:block;
  font-family:'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
  text-shadow: none;
}

nav{ display:flex; align-items:stretch; }

/* Jeder Punkt füllt die Header-Höhe aus: die gesamte Fläche ist Klickziel,
   nicht nur die Textzeile. */
nav a{
  display:flex;
  align-items:center;
  padding: 0 15px;
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.9;
  position: relative;
  transition: background 0.15s ease, opacity 0.15s ease;
}
nav a:hover,
nav a:focus-visible{
  opacity: 1;
  background: rgba(255,255,255,0.10);
}
nav a:focus-visible{ outline-offset: -3px; }

nav a.active{
  opacity: 1;
  background: rgba(255,255,255,0.07);
  text-decoration: none;
}
/* Markierung der aktuellen Seite als Balken am unteren Rand */
nav a.active:not(.nav-kontakt):not(.nav-buchen)::after{
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  background: var(--tide-bright);
  border-radius: 3px 3px 0 0;
}

/* Die beiden Schaltflächen bleiben Pillen und werden mittig gesetzt */
nav a.nav-kontakt,
nav a.nav-buchen{
  align-self: center;
  margin-left: 10px;
}
nav a.nav-kontakt{
  background: var(--chart-dark);
  color: var(--white);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  opacity: 1;
  transition: background 0.2s ease;
}
nav a.nav-kontakt:hover,
nav a.nav-kontakt:focus-visible{ background: var(--chart); }
nav a.nav-kontakt.active{ text-decoration: none; box-shadow: 0 0 0 2px rgba(111,196,188,0.75); }

/* Buchen: der auffälligste Punkt im Header */
nav a.nav-buchen{
  background: var(--tide-bright);
  color: var(--ink-deep);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  opacity: 1;
  transition: background 0.2s ease, transform 0.15s ease;
}
nav a.nav-buchen:hover,
nav a.nav-buchen:focus-visible{ background: #8AD5CE; transform: translateY(-1px); }
nav a.nav-buchen.active{ text-decoration: none; }

/* ---------- Burger-Button (nur mobil sichtbar) ---------- */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}
.nav-toggle span{
  display:block;
  height: 2px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

/* ---------- Mobile Navigation ---------- */
@media (max-width: 880px){
  /* Der Header bleibt beim Scrollen stehen.
     Hier bewusst "fixed" statt "sticky": fixed hängt nicht davon ab, ob
     ein Vorfahre zum Scroll-Container geworden ist. Selbst in Browsern
     ohne "overflow: clip" (siehe oben) bleibt der Header damit stehen.
     Den Platz, den er aus dem Textfluss nimmt, ersetzt padding-top am
     body. */
  :root{ --header-h: 62px; }

  header{
    position: fixed;
    top: 0; left: 0; right: 0;
  }
  body{ padding-top: var(--header-h); }

  .nav-toggle{ display:flex; }

  header .wrap{ flex-wrap: wrap; align-items: center; min-height: var(--header-h); }

  nav{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  /* Auf kleinen Displays darf das offene Menü nie länger sein als der
     Bildschirm – sonst sind die untersten Punkte nicht erreichbar. */
  nav.open{
    max-height: calc(100vh - var(--header-h) - 16px);
    max-height: calc(100dvh - var(--header-h) - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Auf dem Handy ist ohnehin jede Zeile über die volle Breite anklickbar */
  nav a{
    margin-left: 0;
    padding: 15px 10px;
    font-size: 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
  }
  nav a:first-child{ margin-top: 10px; }
  nav a.active::after{ display: none; }
  nav a.nav-kontakt{
    margin: 14px 0 6px;
    text-align:center;
    padding: 12px 16px;
    font-size: 0.92rem;
    border-top: none;
  }
  nav a.nav-buchen{
    margin: 14px 0 8px;
    text-align:center;
    padding: 14px 16px;
    font-size: 0.96rem;
    border-top: none;
    order: -1;
  }
  nav a.nav-kontakt, nav a.nav-buchen{
    align-self: stretch;
    justify-content: center;
  }
  nav a.nav-buchen:hover{ transform: none; }
}

/* ============================================================
   Footer – auf allen Seiten identisch
   ============================================================ */
footer{
  padding: 44px 0 32px;
  background: var(--ink-deep);
  color: rgba(255,255,255,0.62);
  font-size: 0.85rem;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap: 24px;
}
footer strong{
  color: rgba(255,255,255,0.92);
  font-family:'Fraunces', serif;
  font-weight: 500;
  font-size: 1.05rem;
  display:block;
  margin-bottom: 4px;
}
.footer-brand span{ display:block; }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 6px 22px; }
.footer-nav a{
  color: rgba(255,255,255,0.72);
  transition: color 0.15s ease;
}
.footer-nav a:hover{ color: var(--tide-bright); }
.footer-legal{
  width:100%;
  text-align:center;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.8rem;
}
.footer-legal a{ color: rgba(255,255,255,0.62); text-decoration: underline; }
.footer-legal a:hover{ color: rgba(255,255,255,0.92); }

@media (max-width: 640px){
  footer .wrap{ flex-direction: column; gap: 18px; }
  .footer-nav{ flex-direction: column; gap: 8px; }
}

/* ============================================================
   Tiefenkontur / Wellen-Divider
   ============================================================ */
.tide-divider{
  width:100%;
  height:56px;
  display:block;
  position: relative;
}
.tide-divider svg{ width:100%; height:100%; display:block; overflow: visible; }

/* Höhen der beiden Muster – gesetzt von werkzeuge/trennlinien-setzen.js */
.tide-divider--brandung{ height: 88px; }
.tide-divider--rippel{ height: 76px; }

/* ---- Linien zeichnen sich beim Hereinscrollen ein ---- */
.tide-divider .linie{
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.7s ease-out;
}
.tide-divider.in-view .linie{ stroke-dashoffset: 0; }

/* Bei vielen Linien versetzt, damit sie nacheinander erscheinen */
.tide-divider .linie:nth-child(2){ transition-delay: 0.06s; }
.tide-divider .linie:nth-child(3){ transition-delay: 0.12s; }
.tide-divider .linie:nth-child(4){ transition-delay: 0.18s; }
.tide-divider .linie:nth-child(5){ transition-delay: 0.24s; }
.tide-divider .linie:nth-child(6){ transition-delay: 0.30s; }
.tide-divider .linie:nth-child(7){ transition-delay: 0.36s; }
.tide-divider .linie:nth-child(8){ transition-delay: 0.42s; }
.tide-divider .linie:nth-child(9){ transition-delay: 0.48s; }
.tide-divider .linie:nth-child(10){ transition-delay: 0.54s; }

/* ---- Gefüllte Flächen laufen von unten auf ---- */
.tide-divider .flaeche{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease-out, transform 1.1s ease-out;
}
.tide-divider.in-view .flaeche{ opacity: 1; transform: translateY(0); }
.tide-divider.in-view .flaeche:nth-child(2){ transition-delay: 0.10s; }
.tide-divider.in-view .flaeche:nth-child(3){ transition-delay: 0.20s; }
.tide-divider.in-view .flaeche:nth-child(4){ transition-delay: 0.30s; }

/* ---- Sanftes Driften, erst nachdem alles erschienen ist ---- */
.tide-divider.in-view .drift-1{ animation: contour-drift 11s ease-in-out infinite; animation-delay: 1.8s; }
.tide-divider.in-view .drift-2{ animation: contour-drift 8s ease-in-out infinite reverse; animation-delay: 1.8s; }
.tide-divider.in-view .drift-3{ animation: contour-drift 14s ease-in-out infinite; animation-delay: 1.8s; }
@keyframes contour-drift{
  0%, 100%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(9px) translateY(-2px); }
}

/* ============================================================
   Scroll-Reveal
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.revealed{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Bewegungsreduktion respektieren
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
  .reveal{ opacity: 1; transform: none; }
  .tide-divider path{ stroke-dashoffset: 0; }
}