/* =========================================================================
   Ferienwohnungen Zinnowitz – Villa Michaelis & Ostsee YOLO
   Haupt-Stylesheet
   -------------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Design-Tokens (Farben, Abstände, Schriften)  -> hier Farben ändern
     2. Grundlagen / Reset
     3. Typografie
     4. Layout-Hilfsklassen
     5. Kopfbereich & Navigation
     6. Buttons
     7. Startseite / Hero / Suchbox
     8. Karten (Wohnungsübersicht) & Filter
     9. Detailseiten (Galerie, Daten, Kalender)
    10. FAQ, Info-Boxen, Platzhalter
    11. Formulare
    12. Karte (Anfahrt) & Cookie-Banner
    13. Fußbereich
    14. Barrierefreiheit & Bewegungsreduzierung
   ========================================================================= */

/* ---------- 1. Design-Tokens ------------------------------------------- */
:root {
  /* Farben – zentrale Stelle zum Anpassen des Farbschemas */
  --sonne:        #f6c445;   /* warmes, helles Gelb (Akzent, Buttons)      */
  --sonne-dunkel: #e0ac26;   /* Gelb für Hover-Zustände                    */
  --sonne-hell:   #fdf3d4;   /* sehr helles Gelb für Flächen               */
  --sand:         #faf6ee;   /* heller Sandton (Abschnitts-Hintergrund)    */
  --duene:        #e7ddc8;   /* Beige für Linien und Rahmen                */
  --ostsee:       #1f5d72;   /* Ostsee-Blau (Links, Sekundärelemente)      */
  --ostsee-hell:  #e6f0f3;   /* helles Blau für Info-Flächen               */
  --tiefsee:      #12333d;   /* dunkle Schrift                             */
  --tiefsee-weich:#41595f;   /* gedämpfte Schrift                          */
  --weiss:        #ffffff;
  --warnung:      #9a3412;   /* Hinweise, Pflichtangaben                   */

  /* Abstände */
  --raum-xs: .5rem;
  --raum-s:  1rem;
  --raum-m:  1.75rem;
  --raum-l:  3rem;
  --raum-xl: 5rem;

  /* Radien und Schatten */
  --radius:   14px;
  --radius-l: 22px;
  --schatten:      0 2px 8px rgba(18, 51, 61, .06);
  --schatten-hoch: 0 10px 30px rgba(18, 51, 61, .12);

  /* Schriften – lokal/systemseitig, kein externer Ladevorgang (Datenschutz).
     Einzige Schriftdatei: Caveat Brush (frei, OFL) für die Hausmarke Ostsee YOLO. */
  --schrift-titel: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --schrift-text:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breite: 1180px;
}

/* Freie Schrift für die Hausmarke Ostsee YOLO – selbst gehostet, keine
   Verbindung zu Google. Caveat Brush, SIL Open Font License 1.1
   (Lizenztext: assets/fonts/OFL-CaveatBrush.txt). Der Browser lädt die Datei
   nur auf Seiten, auf denen der Schriftzug vorkommt. */
@font-face {
  font-family: "Caveat Brush";
  src: url("../fonts/CaveatBrush-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Grundlagen ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tiefsee);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ostsee); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tiefsee); }

hr { border: 0; border-top: 1px solid var(--duene); margin: var(--raum-m) 0; }

/* ---------- 3. Typografie ---------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tiefsee);
  margin: 0 0 var(--raum-s);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); margin-top: 0; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; font-family: var(--schrift-text); letter-spacing: .02em; }
p  { margin: 0 0 var(--raum-s); }

/* Kleine Überzeile über Überschriften */
.ueberzeile {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ostsee);
  margin-bottom: .6rem;
}

.lead { font-size: 1.15rem; color: var(--tiefsee-weich); max-width: 60ch; }

/* Signaturelement: feine Wellenlinie unter Abschnittsüberschriften */
.welle {
  display: block;
  width: 74px; height: 10px;
  margin: 0 0 var(--raum-m);
  background-repeat: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='10' viewBox='0 0 37 10'%3E%3Cpath d='M0 6 Q4.6 0 9.25 6 T18.5 6 T27.75 6 T37 6' fill='none' stroke='%23f6c445' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.welle-mitte { margin-left: auto; margin-right: auto; }

/* ---------- 4. Layout --------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wrap-schmal { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

.abschnitt { padding: var(--raum-xl) 0; }
.abschnitt-schmal { padding: var(--raum-l) 0; }
.flaeche-sand { background: var(--sand); }
.flaeche-gelb { background: var(--sonne-hell); }

.raster { display: grid; gap: var(--raum-m); }
/* Spalten dürfen schmaler werden als ihr längstes Wort – sonst schiebt sich die Seite auf dem Handy seitlich */
.raster > * { min-width: 0; }
@media (min-width: 640px)  { .raster-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px)  { .raster-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .raster-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .raster-2-3 { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.mitte { text-align: center; }
.abstand-oben { margin-top: var(--raum-m); }

/* Sprungmarke für Tastaturnutzung */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tiefsee); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 5. Kopfbereich & Navigation --------------------------------- */
/* Sprachleiste über dem Kopf: Deutsch | English (englische Seiten in en/) */
.sprachleiste { background: var(--sand); border-bottom: 1px solid var(--duene); font-size: .88rem; }
.sprachleiste nav { display: flex; justify-content: flex-end; gap: .2rem; }
.sprachleiste a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .75rem; border-radius: 8px; color: var(--tiefsee); text-decoration: none; }
.sprachleiste a:hover { background: var(--weiss); }
.sprachleiste a[aria-current="true"] { font-weight: 700; color: var(--ostsee); text-decoration: underline; text-underline-offset: 4px; }

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--duene);
}
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-s); padding: .7rem 0; min-height: 68px;
}
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--tiefsee); }
.logo svg { width: 42px; height: 42px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; }
.logo-zusatz { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tiefsee-weich); }

.haupt-nav ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.haupt-nav a {
  text-decoration: none; color: var(--tiefsee); font-weight: 500; font-size: .97rem;
  padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.haupt-nav a:hover { border-bottom-color: var(--sonne); }
.haupt-nav a[aria-current="page"] { border-bottom-color: var(--ostsee); font-weight: 600; }

.nav-schalter {
  display: none; align-items: center; gap: .5rem;
  background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius);
  padding: .6rem .8rem; font: inherit; font-size: .95rem; color: var(--tiefsee); cursor: pointer;
}
.nav-schalter-balken { display: block; width: 20px; height: 2px; background: var(--tiefsee); position: relative; }
.nav-schalter-balken::before, .nav-schalter-balken::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--tiefsee);
}
.nav-schalter-balken::before { top: -6px; }
.nav-schalter-balken::after  { top: 6px; }

@media (max-width: 1079px) { /* bis 1079 px passt die volle Navigation nicht neben Logo und Knopf */
  .nav-schalter { display: inline-flex; }
  .haupt-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--weiss); border-bottom: 1px solid var(--duene);
    box-shadow: var(--schatten-hoch);
    max-height: calc(100dvh - 68px); overflow-y: auto;
    display: none;
  }
  .haupt-nav.offen { display: block; }
  .haupt-nav ul { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.5rem; }
  .haupt-nav li { border-bottom: 1px solid var(--sand); }
  .haupt-nav a { display: block; padding: .95rem .2rem; font-size: 1.05rem; }
  .kopf .kopf-cta { display: none; } /* höhere Spezifität, sonst gewinnt .btn { display } */
}

/* Dauerhaft sichtbare Buchungsleiste auf kleinen Bildschirmen */
.mobil-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
  display: none; gap: .6rem; padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); border-top: 1px solid var(--duene);
  box-shadow: 0 -4px 16px rgba(18,51,61,.08);
}
.mobil-leiste .btn { flex: 1; padding: .8rem .6rem; font-size: .95rem; }
@media (max-width: 1023px) { .mobil-leiste { display: flex; } body { padding-bottom: 4.5rem; } }

/* Brotkrumen */
.brotkrumen { font-size: .87rem; padding: var(--raum-s) 0 0; color: var(--tiefsee-weich); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.brotkrumen li::after { content: "›"; margin-left: .45rem; color: var(--duene); }
.brotkrumen li:last-child::after { content: ""; }

/* ---------- 6. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; min-height: 48px;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--schrift-text); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-haupt { background: var(--sonne); color: var(--tiefsee); box-shadow: var(--schatten); }
.btn-haupt:hover { background: var(--sonne-dunkel); color: var(--tiefsee); }
.btn-zweit { background: var(--weiss); color: var(--tiefsee); border-color: var(--tiefsee); }
.btn-zweit:hover { background: var(--tiefsee); color: var(--weiss); }
.btn-klein { padding: .6rem 1.1rem; min-height: 42px; font-size: .92rem; }
.btn-block { width: 100%; }
.kopf-cta { padding: .65rem 1.2rem; min-height: 44px; font-size: .95rem; }

/* ---------- 7. Hero & Suchbox ------------------------------------------- */
.hero { position: relative; background: var(--sand); }
.hero-bild {
  position: relative; min-height: clamp(340px, 56vh, 560px);
  display: grid; align-items: end;
  background: linear-gradient(180deg, #dfeaee 0%, #f4ecdc 100%);
  overflow: hidden;
}
.hero-bild > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-schleier {
  position: absolute; inset: 0;
  background: rgba(18, 51, 61, .48);   /* Rückfallfarbe für ältere Browser */
  background: linear-gradient(180deg, rgba(18,51,61,.28) 0%, rgba(18,51,61,.68) 100%);
}
.hero-inhalt { position: relative; padding: var(--raum-l) 0; color: #fff; }
.hero-inhalt h1 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); max-width: 18ch; }
.hero-inhalt p { color: #fff; font-size: 1.15rem; max-width: 48ch; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero-inhalt .ueberzeile { color: var(--sonne); }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--raum-s); }

/* Verfügbarkeitssuche */
.suchbox {
  background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius-l);
  box-shadow: var(--schatten-hoch); padding: var(--raum-m);
}
.hero .suchbox { margin-top: -2.5rem; position: relative; z-index: 2; }
.suchbox-felder { display: grid; gap: var(--raum-s); }
@media (min-width: 760px) {
  .suchbox-felder { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
}
.suchbox h2 { font-size: 1.25rem; margin-bottom: .3rem; }

/* Merkmalsreihe */
.merkmale { display: grid; gap: var(--raum-s); list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .merkmale { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .merkmale { grid-template-columns: repeat(4, 1fr); } }
.merkmale li {
  background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; display: flex; gap: .8rem; align-items: flex-start;
}
.merkmale strong { display: block; font-family: var(--schrift-titel); font-size: 1.05rem; }
.merkmale span { color: var(--tiefsee-weich); font-size: .95rem; }
.merkmal-symbol { flex: none; width: 34px; height: 34px; color: var(--ostsee); }

/* ---------- 8. Karten & Filter ------------------------------------------ */
.karte {
  background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius-l);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--schatten); transition: transform .2s ease, box-shadow .2s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.karte-bild { aspect-ratio: 3 / 2; background: var(--sand); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-inhalt { padding: 1.35rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.karte-inhalt h3 { margin: 0; }
.karte-haus { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ostsee); font-weight: 600; }
.karte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .95rem; color: var(--tiefsee-weich); }
.karte-liste li { display: flex; gap: .5rem; }
.karte-liste li::before { content: "•"; color: var(--sonne-dunkel); font-weight: 700; }
.karte-preis { font-family: var(--schrift-titel); font-size: 1.1rem; padding-top: .3rem; border-top: 1px solid var(--sand); }
.karte-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .4rem; }
.karte-knoepfe .btn { flex: 1 1 auto; }

/* Kennzeichnung Etage/Freisitz */
.plakette {
  display: inline-block; background: var(--sonne-hell); color: var(--tiefsee);
  border: 1px solid var(--sonne); border-radius: 999px;
  padding: .2rem .7rem; font-size: .8rem; font-weight: 600;
}
.plakette-blau { background: var(--ostsee-hell); border-color: #b9d3db; }

.filter {
  background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius-l);
  padding: var(--raum-m); box-shadow: var(--schatten); margin-bottom: var(--raum-m);
}
.filter-felder { display: grid; gap: var(--raum-s); }
@media (min-width: 720px) { .filter-felder { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .filter-felder { grid-template-columns: repeat(6, 1fr); } }
.filter-fuss { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: var(--raum-s); }
.treffer-text { font-weight: 600; }

/* ---------- 9. Detailseiten --------------------------------------------- */
.galerie { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .galerie { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 1fr; }
  .galerie > :first-child { grid-column: 1; grid-row: 1 / span 2; }
}
.galerie figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

.daten-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.daten-tabelle th, .daten-tabelle td { text-align: left; padding: .7rem .4rem; border-bottom: 1px solid var(--duene); vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.daten-tabelle th { width: 42%; font-weight: 600; }
/* Vergleichstabelle (ferienwohnungen.html): Wörter nicht zerteilen, auf dem Handy seitlich wischen */
.tabelle-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle-rollen:focus-visible { outline: 3px solid var(--ostsee); outline-offset: 2px; }
.vergleich-tabelle { table-layout: auto; }
.vergleich-tabelle th, .vergleich-tabelle td { width: auto; white-space: nowrap; overflow-wrap: normal; hyphens: manual; padding-right: 1.2rem; }
.wisch-hinweis { display: none; }
@media (max-width: 860px) { .wisch-hinweis { display: block; } }

.seiten-box {
  background: var(--sand); border: 1px solid var(--duene); border-radius: var(--radius-l);
  padding: var(--raum-m); position: sticky; top: 92px;
}
@media (max-width: 899px) { .seiten-box { position: static; } }

.ausstattung { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 620px) { .ausstattung { grid-template-columns: repeat(2, 1fr); } }
.ausstattung li { display: flex; gap: .55rem; align-items: flex-start; }
.ausstattung li::before { content: "✓"; color: var(--ostsee); font-weight: 700; flex: none; }

/* Übersichtliche Infoliste (zinnowitz.html: Freizeit und Familie, Einkaufen und Essen) */
.infoliste { margin: 0; }
.infoliste > div { padding: .75rem 0; border-bottom: 1px solid var(--duene); }
.infoliste > div:first-child { padding-top: 0; }
.infoliste > div:last-child { border-bottom: 0; }
.infoliste dt { font-weight: 700; color: var(--ostsee); margin-bottom: .15rem; }
.infoliste dd { margin: 0; }
.infoliste dd ul { margin: .15rem 0 0; padding-left: 1.15rem; }
.infoliste dd li { margin-bottom: .15rem; }
/* lange Aufzählungen (ab 6 Punkten) auf breiten Bildschirmen zweispaltig */
@media (min-width: 1100px) { .infoliste dd ul.zweispaltig { columns: 2; column-gap: 1.8rem; } .infoliste dd li { break-inside: avoid; } }

/* Belegungskalender (assets/js/kalender.js, Daten aus api/belegung.php) */
.kalender { background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius); padding: var(--raum-s); }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.kalender-kopf strong { font-family: var(--schrift-titel); font-size: 1.25rem; }
.kalender-nav { background: var(--weiss); border: 1px solid var(--duene); border-radius: 10px; width: 48px; height: 48px; flex: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--tiefsee); touch-action: manipulation; }
.kalender-nav:hover { background: var(--sand); }
.kalender-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kalender-raster div { display: grid; place-items: center; min-height: 44px; padding: .2rem .1rem; font-size: 1.05rem; font-weight: 600; border-radius: 8px; }
.kalender-raster .kalender-wochentag { min-height: 0; font-weight: 600; color: var(--tiefsee-weich); font-size: .8rem; text-transform: uppercase; }
.kalender-raster .tag-vergangen, .kalender-raster .tag-leer { font-weight: 400; }
.kalender-raster [data-datum] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kalender-raster .tag-gewaehlt { box-shadow: inset 0 0 0 2px var(--tiefsee); }
/* gewählter Zeitraum: Anreise, Nächte dazwischen, Abreise */
.kalender-raster .tag-anreise, .kalender-raster .tag-abreise {
  background: var(--tiefsee); color: var(--weiss); box-shadow: none;
}
.kalender-raster .tag-spanne { box-shadow: inset 0 0 0 2px var(--tiefsee); }
.kalender-auswahl { margin: .7rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: var(--ostsee-hell); font-weight: 600; font-size: 1rem; }
.kalender-auswahl:empty { display: none; }
/* Mehrere Monate nebeneinander (data-monate, nur ab 800 px – sonst einer) */
.kalender-monate { display: grid; grid-template-columns: repeat(var(--monate, 1), minmax(0, 1fr)); gap: 1.2rem 2.5rem; }
.kalender-monatsname { display: block; text-align: center; font-family: var(--schrift-titel); font-size: 1.1rem; margin-bottom: .4rem; }
@media (max-width: 480px) {
  .kalender { padding: .8rem .5rem; }
  .kalender-raster { gap: 3px; }
}
.tag-belegt { background: #e9c9c3; color: #7a3b30; text-decoration: line-through; }
.tag-frei { background: #d9eedf; color: #1d5a33; }
.tag-teilweise { background: var(--sonne-hell); color: var(--tiefsee); }
.tag-vergangen { background: transparent; color: #b8b2aa; }
.tag-unbekannt { background: var(--sand); color: var(--tiefsee-weich); }
.kalender-nav:disabled { opacity: .35; cursor: default; }
.legende-punkt.tag-frei, .legende-punkt.tag-belegt, .legende-punkt.tag-teilweise { text-decoration: none; }
.tag-leer { background: transparent; }
.kalender-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-size: .95rem; color: var(--tiefsee-weich); }
.legende-punkt { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -2px; margin-right: .35rem; }

/* ---------- 10. FAQ, Hinweise, Platzhalter ------------------------------ */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius); padding: 0;
}
.faq summary {
  cursor: pointer; padding: 1.05rem 1.2rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ostsee); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 1.2rem 1.2rem; color: var(--tiefsee-weich); }

.hinweis {
  border-left: 4px solid var(--sonne); background: var(--sonne-hell);
  padding: 1.1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: var(--raum-s) 0;
}
.hinweis-blau { border-left-color: var(--ostsee); background: var(--ostsee-hell); }
.hinweis-rot { border-left-color: var(--warnung); background: #fdf1ec; }
.hinweis h3 { font-family: var(--schrift-text); font-size: 1rem; margin-bottom: .3rem; }
.hinweis :last-child { margin-bottom: 0; }

/* Einheitliche Kennzeichnung fehlender Inhalte */
.ph {
  display: inline-block; background: #fff6d9; border: 1px dashed var(--sonne-dunkel);
  border-radius: 6px; padding: 0 .4rem; font-size: .92em; color: #6b4e05; font-style: normal;
}

/* Bildplatzhalter */
.bild-ph { background: var(--sand); border: 1px dashed var(--duene); }

/* ---------- 11. Formulare ----------------------------------------------- */
.feld { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--raum-s); }
.feld label { font-weight: 600; font-size: .95rem; }
.feld-hinweis { font-size: .85rem; color: var(--tiefsee-weich); }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--tiefsee);
  background: var(--weiss); border: 1px solid #c9d3d6; border-radius: 10px;
  padding: .75rem .85rem; min-height: 48px; width: 100%;
}
textarea { min-height: 140px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ostsee); outline-offset: 1px; border-color: var(--ostsee); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--warnung); background: #fdf7f5; }
.fehlertext { color: var(--warnung); font-size: .88rem; font-weight: 600; min-height: 0; }
.fehlertext:empty { display: none; }

.pflicht { color: var(--warnung); }

.kontroll-feld { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: var(--raum-s); }
.kontroll-feld input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .2rem; accent-color: var(--ostsee); }
.kontroll-feld label { font-weight: 400; font-size: .95rem; }
.kontroll-feld input[type="radio"] { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .2rem; accent-color: var(--ostsee); }
/* Auswahl mit Optionsknöpfen (z. B. „Anreise mit Fahrzeug?“ auf buchen.html) */
fieldset.auswahlgruppe { border: 0; padding: 0; margin: 0 0 var(--raum-s); min-width: 0; }
fieldset.auswahlgruppe legend { font-weight: 600; padding: 0 0 .5rem; }
fieldset.auswahlgruppe .kontroll-feld { margin-bottom: .5rem; }

.formular-melder:empty { display: none; }
.formular-melder { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: var(--raum-s); font-weight: 600; }
.melder-erfolg { background: #e7f4ec; border-left: 4px solid #1d6f42; color: #14532d; }
.melder-fehler { background: #fdf1ec; border-left: 4px solid var(--warnung); color: var(--warnung); }

/* Honigtopf-Feld gegen automatisierte Spam-Eintragungen: für Menschen unsichtbar */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.preis-uebersicht { list-style: none; margin: 0 0 var(--raum-s); padding: 0; }
.preis-uebersicht li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--duene); }
.preis-uebersicht li:last-child { border-bottom: 0; font-weight: 700; font-size: 1.1rem; }

/* Preisrechner auf buchen.html (assets/js/preisrechner.js) */
.preis-info li:last-child { font-weight: 400; font-size: inherit; }
.preisrechner [data-preis-inhalt] { transition: opacity .2s; }
.preisrechner.laedt [data-preis-inhalt] { opacity: .45; }
.preis-kopf { font-weight: 600; color: var(--ostsee); margin-bottom: .2rem; }
.preisrechner { background: var(--sand); border: 1px solid var(--duene); border-radius: var(--radius); padding: 1rem 1.2rem; }
.preis-frei { color: #1d6b3a; font-weight: 600; margin: 0 0 .4rem; }
.preis-aufstellung .preis-zwischensumme { font-weight: 600; border-top: 2px solid var(--duene); }
.preis-aufstellung .preis-endpreis { font-family: var(--schrift-titel); font-size: 1.3rem; border-top: 2px solid var(--tiefsee); }
.buchungswahl { display: grid; gap: 1rem; margin: 1.2rem 0 .8rem; }
@media (min-width: 700px) { .buchungswahl { grid-template-columns: 1fr 1fr; } }
.buchungswahl-option { background: var(--weiss); border: 1px solid var(--duene); border-radius: var(--radius); padding: 1rem; }
.buchungswahl-option .feld-hinweis { margin: .6rem 0 0; }
.buchungswahl .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
[data-buchen-hinweis] { color: var(--warnung); }
.feld-anzahl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.feld-anzahl label { margin: 0; }
.feld-anzahl input { width: 5.5rem; flex: none; }
.feld-anzahl[hidden] { display: none; }
/* Zusätzlicher Stellplatz: Erklärung in eigener Zeile unter Feld und Knöpfen */
.feld-anzahl[data-stellplatz] { flex-wrap: wrap; row-gap: .3rem; }
.feld-anzahl > p.feld-hinweis { flex: 1 0 100%; margin: 0; }

/* Mengenfelder mit großen Plus-/Minus-Knöpfen (assets/js/main.js, 7b) */
.zaehler { display: inline-flex; align-items: stretch; gap: .4rem; max-width: 100%; }
.zaehler input[type="number"] {
  width: 4.5rem; flex: none; text-align: center; font-weight: 600; font-size: 1.1rem; padding-left: .3rem; padding-right: .3rem;
  -moz-appearance: textfield; appearance: textfield;
}
.zaehler input[type="number"]::-webkit-inner-spin-button,
.zaehler input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.zaehler-knopf {
  width: 48px; min-width: 48px; height: 48px; flex: none; padding: 0;
  border: 1px solid var(--ostsee); border-radius: 10px; background: var(--weiss); color: var(--ostsee);
  font: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.zaehler-knopf:hover:not(:disabled) { background: var(--ostsee); color: var(--weiss); }
.zaehler-knopf:active:not(:disabled) { transform: scale(.94); }
.zaehler-knopf:focus-visible { outline: 3px solid var(--sonne-dunkel); outline-offset: 2px; }
.zaehler-knopf:disabled { border-color: #c9d3d6; color: #b3bec2; cursor: default; }
.feld-anzahl .zaehler input[type="number"] { width: 3.8rem; }
@media (max-width: 420px) {
  .feld-anzahl { flex-wrap: wrap; gap: .4rem 1rem; }
}

/* Freie Wohnungen zum Zeitraum (assets/js/preisrechner.js, api/frei.php) */
.freie-liste { list-style: none; margin: .6rem 0 .4rem; padding: 0; }
.freie-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--duene);
}
.freie-liste li:last-child { border-bottom: 0; }
.freie-liste .freie-haus { color: var(--tiefsee-weich); font-weight: 400; font-size: .9rem; }
.freie-liste .freie-preis { font-size: .9rem; color: var(--tiefsee-weich); }
.freie-liste .btn { flex: none; }
.freie-liste .freie-belegt { opacity: .65; }
/* Im Auswahlfeld gesperrte (belegte) Ferienwohnungen */
select option:disabled { color: #9aa7ab; }

/* Große Datumsauswahl (assets/js/main.js, 7c) */
.datum-huelle { display: flex; align-items: stretch; gap: .4rem; width: 100%; }
.datum-huelle input[type="date"] { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; }
.datum-huelle input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input.datum-nur-kalender { cursor: pointer; }
.datum-knopf {
  flex: none; width: 48px; min-height: 48px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--ostsee); border-radius: 10px; background: var(--weiss); color: var(--ostsee);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.datum-knopf svg { width: 26px; height: 26px; }
.datum-knopf:hover { background: var(--ostsee); color: var(--weiss); }
.datum-knopf:focus-visible { outline: 3px solid var(--sonne-dunkel); outline-offset: 2px; }

.datumwahl {
  border: 0; padding: 0; width: min(28rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem);
  overflow: auto; border-radius: var(--radius-l); background: var(--weiss); color: var(--tiefsee); box-shadow: var(--schatten-hoch);
}
.datumwahl::backdrop { background: rgba(18, 51, 61, .6); }
.datumwahl-innen { padding: 1rem 1.1rem 1.2rem; }
.datumwahl-kopf, .datumwahl-monat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.datumwahl-titel { margin: 0; font-size: 1.3rem; }
.datumwahl-info { margin: .3rem 0 .8rem; font-size: .95rem; color: var(--tiefsee-weich); }
.datumwahl-monat { margin-bottom: .5rem; }
.datumwahl-monat strong { font-family: var(--schrift-titel); font-size: 1.25rem; }
.datumwahl-knopf {
  width: 48px; height: 48px; flex: none; padding: 0; border: 1px solid var(--duene); border-radius: 10px;
  background: var(--weiss); color: var(--tiefsee); font: inherit; font-size: 1.7rem; line-height: 1;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.datumwahl-knopf:hover:not(:disabled) { background: var(--sand); }
.datumwahl-knopf:disabled { opacity: .35; cursor: default; }
.datumwahl-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.datumwahl-wochentag { text-align: center; font-size: .8rem; font-weight: 600; text-transform: uppercase; color: var(--tiefsee-weich); padding: .2rem 0; }
.datumwahl-tag {
  min-height: 48px; padding: 0; border: 2px solid transparent; border-radius: 10px;
  background: var(--ostsee-hell); color: var(--tiefsee); font: inherit; font-size: 1.15rem; font-weight: 600;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.datumwahl-tag:hover:not([aria-disabled="true"]) { border-color: var(--ostsee); }
.datumwahl-tag.ist-frei { background: #d9eedf; color: #1d5a33; }
.datumwahl-tag.im-zeitraum { background: var(--sonne-hell); color: var(--tiefsee); }
.datumwahl-tag[aria-disabled="true"] { background: transparent; color: #b8b2aa; font-weight: 400; cursor: default; }
.datumwahl-tag.ist-belegt { background: #e9c9c3; color: #7a3b30; text-decoration: line-through; }
.datumwahl-tag.ist-heute { border-color: var(--sonne-dunkel); }
.datumwahl-tag.ist-anreise, .datumwahl-tag.ist-abreise, .datumwahl-tag[aria-pressed="true"] { background: var(--ostsee); border-color: var(--ostsee); color: var(--weiss); }
.datumwahl-tag:focus-visible { outline: 3px solid var(--sonne-dunkel); outline-offset: 2px; }
.datumwahl-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .8rem 0 0; font-size: .85rem; color: var(--tiefsee-weich); }
.datumwahl-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.datumwahl-fuss [hidden] { display: none; }
/* Handy: Kalender als Blatt am unteren Rand, Tage so breit wie möglich */
@media (max-width: 520px) {
  .datumwahl { width: 100%; margin: auto 0 0; max-height: 100vh; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .datumwahl-innen { padding: .9rem .6rem calc(1rem + env(safe-area-inset-bottom)); }
  .datumwahl-raster { gap: 3px; }
  .datumwahl-fuss .btn { flex: 1 1 0; }
}

/* ---------- 12. Lage (Adresse, ohne externe Karte) ---------------------- */
.karten-platz {
  border-radius: var(--radius-l);
  border: 1px solid var(--duene); background: var(--ostsee-hell);
  text-align: center; padding: var(--raum-m);
}

/* ---------- 12a. Fotofächer und Bildfolge (Seebrücke) -------------------- */
.faecher {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  cursor: pointer; overflow: hidden; font: inherit; color: inherit;
  background: linear-gradient(160deg, var(--ostsee-hell), var(--sand));
}
.karte-bild .faecher img {
  position: absolute; top: 10%; left: 13%; width: 74%; height: 76%; object-fit: cover;
  border: 4px solid var(--weiss); border-radius: 10px; box-shadow: var(--schatten-hoch);
  transition: transform .35s ease;
}
.faecher .faecher-b { transform: rotate(-8deg) translateX(-9%); }
.faecher .faecher-c { transform: rotate(7deg) translateX(9%); }
.faecher:hover .faecher-b, .faecher:focus-visible .faecher-b { transform: rotate(-13deg) translateX(-17%); }
.faecher:hover .faecher-c, .faecher:focus-visible .faecher-c { transform: rotate(12deg) translateX(17%); }
.faecher:hover .faecher-a, .faecher:focus-visible .faecher-a { transform: scale(1.04); }
.faecher:focus-visible { outline: 3px solid var(--sonne-dunkel); outline-offset: -3px; }
.faecher-hinweis {
  position: absolute; right: .8rem; bottom: .7rem; padding: .35rem .8rem; border-radius: 999px;
  background: var(--tiefsee); color: var(--weiss); font-size: .85rem; font-weight: 600;
}
html:not(.js) .faecher-hinweis { display: none; }

.bildfolge {
  width: min(960px, calc(100% - 1.5rem)); max-width: none;
  max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem);
  padding: 0; border: 0; border-radius: var(--radius-l); overflow: auto;
  background: var(--weiss); color: var(--tiefsee); box-shadow: var(--schatten-hoch);
}
.bildfolge::backdrop { background: rgba(18, 51, 61, .72); }
.bildfolge-kopf {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.2rem; background: var(--weiss); border-bottom: 1px solid var(--duene);
}
.bildfolge-kopf h2 { margin: 0; font-size: 1.35rem; }
.bildfolge-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.bildfolge-band::-webkit-scrollbar { display: none; }
.bildfolge-band figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.bildfolge-band img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sand); }
.bildfolge-band figcaption { padding: .5rem 1.2rem 0; font-size: .95rem; color: var(--tiefsee-weich); }
.bildfolge-steuerung { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .7rem; }
.bildfolge-knopf {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--tiefsee);
  background: var(--weiss); color: var(--tiefsee); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.bildfolge-knopf:hover { background: var(--tiefsee); color: var(--weiss); }
.bildfolge-text { padding: 0 1.2rem 1.4rem; }
.bildfolge-text h3 { margin-top: .4rem; }
.zeitleiste { list-style: none; margin: 0 0 1rem .4rem; padding: 0; border-left: 3px solid var(--sonne); }
.zeitleiste li { position: relative; padding: 0 0 1rem 1.2rem; }
.zeitleiste li::before {
  content: ""; position: absolute; left: -8.5px; top: .35rem; width: 14px; height: 14px;
  border-radius: 50%; background: var(--weiss); border: 3px solid var(--ostsee);
}
.zeitleiste strong { display: block; font-family: var(--schrift-titel); color: var(--ostsee); }
@media (prefers-reduced-motion: reduce) {
  .karte-bild .faecher img { transition: none; }
  .bildfolge-band { scroll-behavior: auto; }
}

/* ---------- 12b. Hausmarken ------------------------------------------------ *
 * Villa Michaelis: Engel (Zeichnung der Betreiberin) und Schriftzug als Foto der
 *   Fassadenbeschriftung, Dunkelblau #000066 wie auf der alten Website.
 * Ferienhaus Ostsee YOLO: Petrol #008080 wie in der Hausordnung, Pinselschrift
 *   Caveat Brush (frei, SIL Open Font License, selbst gehostet).
 * Nur freie Schriften bzw. die Systemschriften der Besucher – es werden keine
 *   lizenzpflichtigen Schriften eingebunden oder als Bild verwendet.
 * -------------------------------------------------------------------------- */
:root { --villa: #000066; --yolo: #008080; }
.hausmarke { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.3rem); margin-bottom: var(--raum-s); }
.hausmarke h1, .hausmarke h3 { margin: 0; }
.hausmarke .engel { width: clamp(52px, 8vw, 76px); height: auto; flex: none; }
.haus-villa, .haus-yolo { line-height: 1; }
.haus-villa .schriftzug { display: block; width: auto; max-width: 100%; height: clamp(2.3rem, 6.5vw, 3.6rem); }
.haus-untertitel {
  display: block; margin-top: .45rem; font-family: var(--schrift-text);
  font-weight: 400; font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: .04em; color: var(--villa);
}
.haus-yolo { font-family: var(--schrift-text); color: var(--yolo); }
.haus-yolo .haus-vorzeile {
  display: block; margin-bottom: .45rem; font-size: .8rem;
  font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--yolo);
}
.haus-yolo-name {
  display: block; font-family: "Caveat Brush", var(--schrift-text); font-weight: 400;
  letter-spacing: .01em; line-height: 1; font-size: clamp(2.8rem, 8vw, 4.4rem);
}
.hausmarke-klein .engel { width: 46px; }
.hausmarke-klein .schriftzug, .haus-klein.haus-villa .schriftzug { height: 1.9rem; }
.haus-klein .haus-yolo-name { font-size: 2.4rem; }
.hausmarke-klein .haus-untertitel { font-size: .95rem; margin-top: .3rem; }

/* Fotofächer über dem Adresskasten im Abschnitt „Lage“ */
.lage-faecher { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--duene); margin-bottom: var(--raum-s); }

/* ---------- 13. Fußbereich ---------------------------------------------- */
.fuss { background: var(--tiefsee); color: #d8e4e8; padding: var(--raum-xl) 0 var(--raum-m); margin-top: var(--raum-xl); }
.fuss a { color: #fff; }
.fuss h3 { color: #fff; font-size: 1.05rem; font-family: var(--schrift-text); letter-spacing: .04em; }
.fuss-raster { display: grid; gap: var(--raum-m); }
@media (min-width: 700px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fuss-unten {
  margin-top: var(--raum-m); padding-top: var(--raum-s); border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .88rem;
}
.fuss .logo-name, .fuss .logo-zusatz { color: #fff; }
.fuss .ph { background: rgba(255,255,255,.12); color: #ffe9a8; border-color: var(--sonne); }

/* ---------- 14. Barrierefreiheit ----------------------------------------- */
:focus-visible { outline: 3px solid var(--ostsee); outline-offset: 2px; border-radius: 4px; }
.kopf :focus-visible, .fuss :focus-visible { outline-color: var(--sonne); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .karte:hover { transform: none; }
}

/* Sanftes Einblenden beim Scrollen (wird per JavaScript aktiviert) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Druckansicht */
@media print {
  .kopf, .fuss, .mobil-leiste, .karte-knoepfe, .btn { display: none !important; }
  body { padding: 0; font-size: 11pt; }
}