:root{
  --navy:#0f2238;
  --navy-2:#0c1b2b;
  --sand:#f2eadf;
  --text:#18202c;
  --ink:#0f2238;
  --muted:#5d6879;
  --gold:#c8a36f;
  --line:#e6ded2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  line-height:1.6;
  background:var(--sand);
}

/* Container */
.container{width:min(1120px,92vw);margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, var(--navy), var(--navy-2));
  color:white;border-bottom:1px solid #0b1a2a;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;flex-direction:column;color:#fff;text-decoration:none;line-height:1;gap:0}
.brand__top{font-size:.78rem;letter-spacing:.04em;opacity:.85}
.brand__main{font-family:"Playfair Display",serif;font-weight:700;font-size:1.35rem}
.brand__sub{font-size:.7rem;letter-spacing:.1em;opacity:.85}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.menu a{color:#e8eef6;text-decoration:none;padding:.5rem .2rem}
.menu a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:12px;border:1px solid #27415f;background:#132844;color:#eaf0f6;text-decoration:none}
.btn--brand{background:var(--gold);border-color:transparent;color:#2d261b}

/* Hero */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy);color:white;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:url('/assets/img/hero.jpg') center/cover no-repeat;
  filter:saturate(110%) contrast(102%);
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0b203980 0%, #0b2039 90%);
}
.hero .container{padding:86px 0}
.hero h1{
  font-family:"Playfair Display",serif;font-weight:800;
  font-size:clamp(36px,6.5vw,66px);
  letter-spacing:.2px;margin:0 0 .5rem;
  text-shadow:0 4px 18px #0006;
}
.hero p{max-width:60ch;margin:.25rem 0 1.25rem;color:#eaeff6}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* Pfoten-Hintergrund dezent */
.paws{
  --p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 64 64'%3E%3Cpath fill='%23ffffff' fill-opacity='.18' d='M22 36c-6 0-10 4-10 9s4 9 10 9 10-4 10-9-4-9-10-9zM11 22c-2 2-1 6 2 8s6 1 8-2 1-6-2-8-6-1-8 2zm14-8c-3 1-4 4-3 7s4 4 7 3 4-4 3-7-4-4-7-3zm14 6c-3 0-5 3-5 6s3 5 6 5 5-3 5-6-3-5-6-5zm8 10c-4-1-8 2-9 6s2 8 6 9 8-2 9-6-2-8-6-9z'/%3E%3C/svg%3E");
  background-image:var(--p);
  background-size:220px 220px;
  background-repeat:repeat;
  background-position:top right;
}

/* Sections */
section{padding:54px 0}
h2{font-family:"Playfair Display",serif;font-weight:700;font-size:clamp(24px,3.2vw,36px);color:var(--ink);margin:0 0 16px}
.lead{color:#2a3442;font-size:1.05rem}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.col-6{grid-column:span 6}
@media (max-width:900px){.col-6{grid-column:span 12}}

/* Cards / lists */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{display:flex;gap:10px;margin:.35rem 0}
.badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;margin:.25rem .35rem .25rem 0;font-size:.95rem}
.checks{color:#1c6b3c}

/* Footer */
.site-footer{background:#0e2136;color:#e9eef5;border-top:1px solid #0b1a2a}
.site-footer .foot-grid{display:flex;justify-content:space-between;gap:18px;padding:22px 0}
.site-footer a{color:#d6e6f7}

/* ===========================================================
   Preise & Anfrage – Ergänzungen (SCOPED, KEINE GLOBALEN OVERRIDES)
   Diese Styles wirken nur auf Elemente der Preise-Seite.
   =========================================================== */

/* Saison-Info-Zeile */
#season-info{
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
  background:#fcfbf8; border:1px dashed #eadfcd; border-radius:12px;
  padding:10px 12px; margin:6px 0 10px;
}
#season-info #season-name{ font-weight:800 }
#season-info #season-rate{ font-weight:700 }
#season-info #season-mode, #season-info #season-min{ color:#6b7280 }

/* Preisbox */
.pricecard{
  margin-top:10px; background:#fffdf9; border:1px solid #e6ded2;
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.05); overflow:hidden;
}
.pricecard h3{ margin:10px 14px; font-size:18px; font-weight:700 }
.pricecard .plist .prow{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  padding:10px 14px; border-top:1px dashed #eee2d2;
}
.pricecard .plist .prow:first-child{ border-top:1px solid #eee2d2 }
.pricecard .plist .value{ font-weight:700 }
.pricecard .plist .muted{ color:#6b7280 }

/* Hinweis bei Nicht-Verfügbarkeit */
#availability-warning{ margin-top:10px; color:#b91c1c }

/* Buttons NUR für Preis-/Anfrage-Flow (keine globalen .btn-Overrides!) */
#btn-open-request,
#rq_submit{
  margin-top:12px; padding:12px 16px; border-radius:12px;
  border:1px solid #0f172a; background:#0f172a; color:#fff; font-weight:700;
  cursor:pointer; transition:transform .08s ease, box-shadow .12s ease, opacity .2s ease;
}
#btn-open-request:hover,
#rq_submit:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12) }
#btn-open-request:disabled,
#btn-open-request.btn--disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none }

/* Anfrage-Zusammenfassung & Aktionen */
#request-card .rq-summary{
  background:#f8fafc; border:1px solid #e6ded2; border-radius:12px;
  padding:10px 12px; margin:6px 0 12px; color:#374151;
}
#request-card .rq-summary .caption{ color:#6b7280 }
#request-card .rq-actions{
  grid-column:span 2; display:flex; gap:10px; align-items:center; justify-content:flex-end;
}

/* Kautionshinweis */
#request-card .deposit-note,
#request-card > form > div[style*="background:#f8fafc"]{
  grid-column:span 2; color:#374151; background:#fff8eb !important;
  border:1px solid #f1e2c9 !important; border-radius:10px; padding:10px; margin:2px 0 4px;
}

/* ===== Preise & Anfrage – Premium-Ergänzungen (scoped) ===== */

/* Saisonkarte */
#season-card{ box-shadow:0 6px 20px rgba(0,0,0,.05) }
#season-card #season-rate-night,
#season-card #season-rate-week{ font-size:1.05rem }

/* Preisbox */
.pricecard{ border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.06) }
.pricecard .value{ font-weight:800 }
.pricecard .muted{ color:#5d6879 }

/* Buttons nur hier */
#btn-open-request, #rq_submit{
  background:#0f172a; border:1px solid #0b1a2a; color:#fff; font-weight:800;
  padding:12px 16px; border-radius:12px; transition:transform .08s ease, box-shadow .12s ease, opacity .2s ease;
}
#btn-open-request:hover, #rq_submit:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12) }
#btn-open-request:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none }

/* Anfragekarte */
#request-card .deposit-note{ background:#fff8eb !important; border:1px solid #f1e2c9 !important; }
#request-card .caption{ color:#6b7280 }

/* ===== Preisrechner – Premium Controls (scoped) ===== */
.calc-controls{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  margin-bottom:10px;
}
#price-calc label{
  display:block;
  font-weight:700;
  color:var(--ink);
  font-size:.92rem;
  letter-spacing:.01em;
  margin:0 0 6px;
}
#price-calc .field{ position:relative }

/* Inputs & Selects – edel, mit Fokus-Ring */
#price-calc input[type="date"],
#price-calc select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.04);
  font-size:.95rem;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
#price-calc input[type="date"]:focus,
#price-calc select:focus{
  outline:0;
  border-color:#0f172a;
  box-shadow:0 0 0 3px rgba(15,23,42,.14);
  background:#fff;
}

/* Select mit eigener Pfeil-Ikone */
#price-calc .field.select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:34px;
}
#price-calc .field.select::after{
  content:""; position:absolute; right:12px; top:36px; width:14px; height:14px; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2318202c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") center/14px 14px no-repeat;
}

/* Date mit dezentem Kalender-Icon (überlagert, nicht klickbar) */
#price-calc .field.date::after{
  content:""; position:absolute; right:10px; top:36px; width:18px; height:18px; pointer-events:none; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2318202c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}

/* Kleine Hover-Aufhellung */
#price-calc input[type="date"]:hover,
#price-calc select:hover{
  background:#fcfcff;
}

/* ===== Buchungsanfrage – Premium Look (scoped) ===== */
.booking-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 36px rgba(0,0,0,.07);
}
.booking-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.booking-summary{
  display:inline-block;
  background:#0f172a; color:#fff; padding:6px 12px; border-radius:999px;
  font-weight:700; font-size:.9rem; white-space:nowrap;
}

/* Grid */
.booking-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.booking-grid .field{ position:relative }
.booking-grid .field--wide{ grid-column:span 2 }

/* Labels */
.booking-grid label{
  display:block; font-weight:700; color:var(--ink); margin:0 0 6px; letter-spacing:.01em;
}
.label-req::after{
  content:"*"; color:#b91c1c; margin-left:6px; font-weight:800;
}

/* Inputs */
.booking-grid input[type="text"],
.booking-grid input[type="email"],
.booking-grid input[type="tel"],
.booking-grid input[type="date"],
.booking-grid textarea{
  width:100%; border-radius:12px; border:1px solid var(--line);
  background:#fff; padding:10px 12px; font-size:.95rem;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.04);
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.booking-grid textarea{ resize:vertical }

.booking-grid input:focus,
.booking-grid textarea:focus{
  outline:0; border-color:#0f172a; box-shadow:0 0 0 3px rgba(15,23,42,.14);
  background:#fff;
}

/* Note & Actions */
.booking-note{
  grid-column:span 2;
  color:#374151; background:#fff8eb; border:1px solid #f1e2c9;
  border-radius:12px; padding:10px; margin-top:2px;
}
.booking-actions{
  grid-column:span 2; display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin-top:4px;
}
@media (max-width: 760px){
  .booking-grid{ grid-template-columns:1fr }
  .booking-grid .field--wide, .booking-note, .booking-actions{ grid-column:span 1 }
  .booking-head{ flex-direction:column; align-items:flex-start; gap:6px }
}

/* ===== Buchungsanfrage: schöne Zusammenfassung rechts ===== */
.booking-summary-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  max-width: min(560px, 100%);
}
.bs-top{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  line-height:1;
  white-space:nowrap;
}
.chip--light{
  background:#f1f5f9;
  color:var(--ink);
  border:1px solid var(--line);
  font-weight:600;
}
.chip--accent{
  background:var(--gold);
  color:#2d261b;
  font-weight:800;
}
.bs-meta{
  background:#fff;
  border:1px dashed #eadfcd;
  border-radius:12px;
  padding:8px 10px;
  color:#374151;
  font-size:.9rem;
  max-width:100%;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
@media (max-width: 840px){
  .booking-summary-card{ align-items:flex-start }
  .bs-top{ justify-content:flex-start }
}

.bank-box code{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;padding:.1rem .35rem}

/* Nur im Hero alles hell/weiß, Rest bleibt dunkel */
.hero h1,
.hero .lead,
.hero .btn,
.hero .chip,
.hero .container { color: #fff; }

/* Sichere Lesbarkeit auf dem Bild */
.hero .hero__veil { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); }

/* Basis-Textfarbe außerhalb des Hero */
body { color: #111; }

/* Mobile Grid-Fix */
@media (max-width: 900px) {
  .grid { display: block; }
  .col-6 { width: 100%; }
}

/* Bild sauber responsiv */
img { max-width: 100%; height: auto; }

/* Badges für Entfernungen */
.badge {
  display: inline-block;
  background: #f2eadf;   /* dezenter Sand-Hintergrund */
  color: #0f2238;        /* dunkle Schrift */
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  margin: 3px 4px 3px 0;
  white-space: nowrap;
}

/* Mobile: Badges umbrechen und volle Breite */
@media (max-width:640px){
  .badge {
    display: block;
    margin: 4px 0;
    max-width: fit-content;
  }
}