/* ============================================================
   Bültenhus – Gestaltungsvorschlag "Reetdach am Bodden"
   Editorial/warmes Design, inspiriert durch eine Nachbarseite,
   umgesetzt als eigenständiger, vollständiger Seiten-Satz.

   Farben:  --sand #FAF3E7 (Papier)      --ink #20302E (Text, dunkel)
            --teal #1F5C63 (Bodden-Wasser, Überschriften)
            --gold #B98B4E (Reetdach, Label/Trenner)
            --terracotta #C1552E (Abendhimmel, CTA-Akzent)
            --line #E4D9C4 (warme Sand-Trennlinie)
   Schrift: Fraunces (Display-Serif) für Headlines & Zahlen;
            Karla (humanistische Grotesk) für Fließtext & Labels.
   ============================================================ */

:root{
  --sand:#FAF3E7;
  --sand-deep:#F2E8D6;
  --ink:#20302E;
  --ink-soft:#4B5A56;
  --teal:#1F5C63;
  --teal-deep:#163F44;
  --gold:#B98B4E;
  --terracotta:#C1552E;
  --terracotta-deep:#9E4324;
  --line:#E4D9C4;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Karla", ui-sans-serif, system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  color:var(--teal);
  font-weight:600;
  text-wrap:balance;
  margin:0 0 14px;
}
h2{ font-size:clamp(1.5rem, 3.2vw, 2rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 16px; color:var(--ink-soft); }
ul{ margin:0 0 16px; padding-left:20px; color:var(--ink-soft); }
li{ margin-bottom:6px; }

a{ color:var(--teal-deep); }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--terracotta);
  outline-offset:2px;
}

.eyebrow{
  display:inline-block;
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}

.wrap{ max-width:1040px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:740px; margin:0 auto; padding:0 28px; }

hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- header / nav ---------- */
.site-header{
  background:var(--sand);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
}
.header-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  flex-wrap:wrap;
  gap:10px 20px;
}
.brand{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  font-size:1.5rem;
  color:var(--teal);
  text-decoration:none;
  letter-spacing:0.01em;
}
.brand span{ color:var(--terracotta); }

.main-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
}
.main-nav a{
  color:var(--ink);
  font-family:"Karla", sans-serif;
  font-weight:500;
  font-size:14px;
  text-decoration:none;
  padding:6px 2px;
  display:inline-block;
  border-bottom:2px solid transparent;
}
.main-nav a.current,
.main-nav a:hover{
  border-bottom-color:var(--terracotta);
  color:var(--teal-deep);
}
.main-nav .anfrage-link{
  font-weight:700;
  color:var(--terracotta-deep);
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--teal);
  color:var(--teal);
  padding:7px 12px;
  font-family:"Karla", sans-serif;
  font-size:14px;
  border-radius:999px;
  cursor:pointer;
}

@media (max-width:860px){
  .main-nav{ display:none; width:100%; order:3; }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:2px; padding:10px 0 4px; }
  .main-nav a{ display:block; padding:9px 0; border-bottom:none; border-left:2px solid transparent; padding-left:10px; }
  .main-nav a.current, .main-nav a:hover{ border-left-color:var(--terracotta); border-bottom:none; background:var(--sand-deep); }
  .nav-toggle{ display:inline-block; }
}

/* ---------- proposal banner ---------- */
.proposal-banner{
  background:var(--teal-deep);
  color:var(--sand);
  text-align:center;
  padding:9px 16px;
  font-size:13px;
  font-family:"Karla", sans-serif;
}
.proposal-banner strong{ color:#fff; }

/* ---------- hero (full-bleed, homepage + detail pages) ---------- */
.hero{
  position:relative;
  min-height:min(80vh, 620px);
  display:flex;
  align-items:flex-end;
  background:var(--ink) center/cover no-repeat;
  overflow:hidden;
}
.hero.hero-small{ min-height:340px; }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,20,18,0) 35%, rgba(15,20,18,0.45) 100%);
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1040px;
  margin:0 auto;
  padding:56px 28px 48px;
  width:100%;
}
.hero .eyebrow{ color:#fff; opacity:0.95; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
.hero h1{
  color:#fff;
  font-size:clamp(2.1rem, 5.2vw, 3.4rem);
  line-height:1.08;
  margin:12px 0 0;
  text-shadow:0 2px 16px rgba(0,0,0,0.45);
}
.hero p{ color:var(--sand-deep); max-width:52ch; font-size:17.5px; margin:16px 0 0; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
.hero .stars{ color:var(--gold); letter-spacing:2px; font-size:15px; }

/* ---------- section rhythm ---------- */
section{ padding:70px 0; }
section.tight{ padding:48px 0; }
.section-head{ margin-bottom:32px; }

/* ---------- intro / facts (homepage) ---------- */
.intro-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:start;
}
.facts{
  display:flex;
  flex-direction:column;
  gap:20px;
  border-left:1px solid var(--line);
  padding-left:26px;
}
.fact .num{
  font-family:"Fraunces", serif;
  font-size:2rem;
  color:var(--terracotta);
  line-height:1;
}
.fact .label{ font-size:13px; color:var(--ink-soft); margin-top:4px; }

@media (max-width:640px){
  .intro-grid{ grid-template-columns:1fr; }
  .facts{ border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:20px; flex-direction:row; flex-wrap:wrap; }
  .fact{ flex:1 1 30%; }
}

/* ---------- apartment showcase (full-bleed alternating rows) ---------- */
.apt-row{ display:grid; grid-template-columns:1.1fr 1fr; align-items:center; }
.apt-row.reverse{ direction:rtl; }
.apt-row.reverse > *{ direction:ltr; }
.apt-photo{ overflow:hidden; height:100%; min-height:320px; }
.apt-photo img{ width:100%; height:100%; object-fit:cover; }
.apt-text{ padding:40px 44px; }
.apt-text h3{ font-size:1.6rem; margin-bottom:6px; }
.apt-meta{
  font-family:"Karla", sans-serif;
  font-size:13.5px;
  color:var(--gold);
  font-weight:700;
  letter-spacing:0.03em;
  margin-bottom:12px;
}
.apt-text p{ max-width:44ch; }
.apt-text .btn{ margin-top:6px; }

@media (max-width:760px){
  .apt-row, .apt-row.reverse{ grid-template-columns:1fr; direction:ltr; }
  .apt-photo{ min-height:240px; }
  .apt-text{ padding:30px 28px; }
}

/* ---------- lage band (full-bleed, homepage + Lage-Seite) ---------- */
.lage-band{
  position:relative;
  background:var(--ink) center/cover no-repeat;
  color:#fff;
  padding:80px 0;
}
.lage-band::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,63,68,0.55), rgba(18,30,28,0.86));
}
.lage-inner{ position:relative; z-index:1; }
.lage-band .eyebrow{ color:var(--sand-deep); }
.lage-band h2{ color:#fff; margin:10px 0 18px; }
.lage-band p{ color:var(--sand-deep); max-width:58ch; font-size:17px; }

/* ---------- caption duo ---------- */
.caption-duo{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.caption-duo figure{ margin:0; }
.caption-duo img{ border-radius:6px; height:260px; width:100%; object-fit:cover; }
.caption-duo figcaption{ font-size:13px; color:var(--ink-soft); margin-top:10px; }
@media (max-width:640px){ .caption-duo{ grid-template-columns:1fr; } }

/* ---------- justified gallery (Wohnung-Seiten) ---------- */
/* Echte Petersburger-Hängung: jedes Foto behält sein eigenes Format (kein
   Zuschneiden), die Bilder werden zeilenweise so skaliert, dass jede Zeile
   die volle Breite exakt ausfüllt - geschlossene Außenkontur ohne Löcher.
   Die Zeilen werden in JS aus dem echten Seitenverhältnis jedes Fotos
   berechnet (siehe js/main.js, layoutJustifiedGalleries). */
.justified-gallery{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.justified-gallery img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  transition:opacity .2s ease;
}
.justified-gallery img:hover{ opacity:0.92; }
.justified-row{
  display:flex;
  gap:10px;
}
.justified-row img{ width:auto; flex-shrink:0; }

/* ---------- amenities two-column ---------- */
.amenity-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 40px;
}
@media (max-width:640px){ .amenity-columns{ grid-template-columns:1fr; } }

/* ---------- price table ---------- */
.price-table-wrap{
  overflow-x:auto;
  margin:8px 0 16px;
  border-radius:8px;
}
.price-table{
  width:100%;
  min-width:420px;
  border-collapse:collapse;
  margin:0;
  font-size:15px;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(32,48,46,0.06);
}
.price-table th, .price-table td{
  border-bottom:1px solid var(--line);
  padding:12px 14px;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.price-table thead th{
  background:var(--teal);
  color:#fff;
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  border-bottom:none;
}
.price-table tbody th{ font-weight:700; color:var(--ink); }
.price-note{ font-size:13px; color:var(--ink-soft); }

.season-block{
  background:var(--sand-deep);
  border-left:3px solid var(--gold);
  padding:14px 18px;
  border-radius:0 6px 6px 0;
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.season-block p{ margin:0 0 6px; color:var(--ink-soft); }
.season-block p:last-child{ margin-bottom:0; }
.season-block strong{ color:var(--ink); }

.house-rules{
  background:var(--sand-deep);
  border-left:3px solid var(--terracotta);
  padding:14px 18px;
  border-radius:0 6px 6px 0;
  font-size:14px;
  color:var(--ink-soft);
  margin:18px 0;
}
.house-rules strong{ color:var(--terracotta-deep); }

/* ---------- Verfügbarkeitskalender ----------
   Live-Daten vom Buchungssystem unseres Vermittlers (Godewind / V-Office),
   werden bei jedem Seitenaufruf frisch geladen - siehe js/availability.js. */
.avail-calendar{ margin:6px 0 10px; }
.avail-calendar__status{
  font-size:14px;
  color:var(--ink-soft);
  padding:18px 0;
}
.avail-calendar__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.avail-calendar__nav button{
  font-family:"Karla", sans-serif;
  font-size:13px;
  color:var(--teal);
  background:none;
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 16px;
  cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.avail-calendar__nav button:hover:not(:disabled){ background:var(--sand-deep); }
.avail-calendar__nav button:disabled{ opacity:0.35; cursor:default; }
.avail-calendar__range{ font-family:"Fraunces", serif; font-size:15px; color:var(--ink); }
.avail-calendar__months{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}
@media (max-width:640px){ .avail-calendar__months{ grid-template-columns:1fr; } }
.avail-month__title{
  font-family:"Fraunces", serif;
  font-size:16px;
  color:var(--ink);
  margin:0 0 10px;
  text-transform:capitalize;
}
.avail-month__grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
}
.avail-month__dow{
  font-size:11px;
  text-align:center;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding-bottom:4px;
}
.avail-day{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12.5px;
  border-radius:5px;
  color:var(--ink);
}
.avail-day--empty{ visibility:hidden; }
.avail-day--unknown{ color:var(--line); }
.avail-day--frei{ background:rgba(31,92,99,0.13); color:var(--teal-deep); font-weight:600; }
.avail-day--belegt{ background:var(--sand-deep); color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--terracotta); text-decoration-thickness:1.5px; }
.avail-calendar__legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:18px;
  font-size:12.5px;
  color:var(--ink-soft);
}
.avail-calendar__legend span{ display:inline-flex; align-items:center; gap:6px; }
.avail-calendar__legend i{
  width:13px; height:13px; border-radius:3px; display:inline-block; flex-shrink:0;
}
.avail-calendar__legend .sw-frei{ background:rgba(31,92,99,0.13); }
.avail-calendar__legend .sw-belegt{ background:var(--sand-deep); }
.avail-calendar__source{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-top:10px;
}
.avail-calendar__source a{ color:var(--teal); }
.avail-calendar__disclaimer{
  font-size:12.5px;
  font-style:italic;
  color:var(--ink-soft);
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.avail-calendar__disclaimer a{ color:var(--teal); font-style:normal; }

/* ---------- map ---------- */
.map-embed{
  margin:10px 0 6px;
  border-radius:8px;
  overflow:hidden;
  line-height:0;
  box-shadow:0 4px 18px rgba(32,48,46,0.12);
}
.map-embed iframe{ display:block; width:100%; height:400px; border:0; }
@media (max-width:600px){ .map-embed iframe{ height:280px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--terracotta);
  color:#fff;
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:15px;
  padding:13px 26px;
  border-radius:999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(158,67,36,0.25);
  transition:transform 0.15s ease;
}
.btn:hover{ transform:translateY(-1px); color:#fff; }
.btn-light{
  background:#fff;
  color:var(--terracotta-deep);
}

/* ---------- cta band ---------- */
.cta-band{
  background:var(--terracotta);
  color:var(--sand);
  text-align:center;
  padding:64px 0;
}
.cta-band h2{ color:#fff; font-size:clamp(1.6rem,4vw,2.2rem); }
.cta-band p{ color:#fce9dd; margin:12px 0 26px; }
.cta-band .btn{ background:#fff; color:var(--terracotta-deep); }
.cta-sub{ margin-top:22px; font-size:14px; color:#fce9dd; }
.cta-sub a{ color:#fce9dd; text-decoration:underline; }
.signature{
  font-family:"Lucida Handwriting", "Mrs Saint Delafield", cursive;
  font-size:1.5rem;
  color:#fff;
  margin-top:20px;
  line-height:1.3;
}

/* ---------- wa badge ---------- */
.wa-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  background:#25D366;
  flex-shrink:0;
  vertical-align:middle;
  margin-right:8px;
}
.wa-badge svg{ width:14px; height:14px; display:block; }
a.wa-link{ display:inline-flex; align-items:center; }
a.wa-link:hover{ text-decoration:underline; }

/* ---------- contact box / form ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:44px;
  align-items:start;
}
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-card{
  background:var(--sand-deep);
  border-radius:10px;
  padding:26px 28px;
}
.contact-card h3{ font-size:1.2rem; }
.contact-card p{ margin-bottom:8px; }

form.contact-form label{
  display:block;
  margin:14px 0 5px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
}
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="number"],
form.contact-form textarea{
  width:100%;
  padding:11px 13px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  border-radius:6px;
}
form.contact-form input:focus,
form.contact-form textarea:focus{
  outline:none;
  border-color:var(--teal);
}
form.contact-form textarea{ min-height:120px; }
form.contact-form .field-row{
  display:flex;
  gap:16px;
}
form.contact-form .field-row > div{ flex:1; }
@media (max-width:480px){ form.contact-form .field-row{ flex-direction:column; gap:0; } }
form.contact-form .checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:8px 0;
}
form.contact-form .checkbox-row input{ width:auto; margin-top:4px; }
.required-note{ font-size:12px; color:var(--ink-soft); margin-top:12px; }

/* ---------- placeholder / legal notes ---------- */
.placeholder-note{
  background:#FBE9D0;
  border:1px solid var(--gold);
  padding:12px 16px;
  border-radius:6px;
  font-size:13.5px;
  color:var(--ink);
}

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--teal-deep);
  color:var(--sand-deep);
  font-size:13.5px;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:26px 28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 20px;
}
.footer-inner a{ color:var(--sand-deep); }

/* ---------- generic page (Impressum, Lage, Umgebung, Anfrage) ---------- */
.page-body{ padding:56px 0 70px; }
.page-body h1{ font-size:clamp(1.9rem, 4.4vw, 2.6rem); }

/* ---------- reveal-on-scroll: entfernt ----------
   Der frühere Fade-in-Effekt beim Scrollen hat auf dem Live-Server
   wiederholt zu Problemen geführt (u. a. ein Wettlauf mit dem Nachladen
   der Google-Schriftart, der Abschnitte dauerhaft unsichtbar ließ - die
   "große weiße Fläche"). Inhalte sind jetzt immer direkt sichtbar,
   unabhängig von Ladezeiten, Schriftart-Timing oder JavaScript. */
@media (prefers-reduced-motion: reduce){
  .reveal.reveal-pending{ opacity:1; transform:none; transition:none; }
}