/* Villa Grille – Grundgerüst aller Seiten.
   Farben und Typografie stammen unverändert aus der bisherigen Startseite. */

:root{
  --cream:#F7F3EC;
  --oak:#C9A87C;
  --black:#1C1C1A;
  --sage:#9AA88F;
  --linie:rgba(201,168,124,0.35);
  --gedaempft:rgba(28,28,26,0.6);
}
*{ margin:0; padding:0; box-sizing:border-box; }

/* Sicherheitsnetz gegen seitliches Verrutschen: Wird irgendwo doch einmal
   ein Element zu breit, wird es abgeschnitten statt die ganze Seite nach
   rechts zu schieben. Bewusst 'clip' und nicht 'hidden' – 'hidden' würde
   die klebende Kopfzeile (position:sticky) außer Kraft setzen. */
@supports (overflow:clip){
  html{ overflow-x:clip; }
}

body{
  background:var(--cream);
  color:var(--black);
  font-family:'Inter', sans-serif;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  background:var(--black); color:var(--cream);
  padding:.7rem 1.1rem; border-radius:0 0 8px 0; font-size:.9rem;
}
.skip:focus{ left:0; }

a{ color:inherit; }

/* ---------------------------------------------------------- Kopfzeile */

.kopf{
  border-bottom:1px solid var(--linie);
  background:rgba(247,243,236,0.92);
  backdrop-filter:saturate(1.4) blur(8px);
  position:sticky; top:0; z-index:5;
}
.kopf-innen{
  max-width:760px; margin:0 auto; padding:.7rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.marke{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--black); }
.marke-logo{ width:30px; height:30px; flex:0 0 auto; }
.marke-name{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:.35rem 1rem; flex-wrap:wrap; font-size:.85rem; }
.nav a{ text-decoration:none; color:var(--gedaempft); padding:.25rem 0; border-bottom:1px solid transparent; }
.nav a:hover{ color:var(--black); }
.nav a[aria-current="page"]{ color:var(--black); border-bottom-color:var(--oak); }
.nav .nav-cta{
  background:var(--oak); color:var(--black); border:0;
  padding:.4rem 1rem; border-radius:999px; font-weight:500;
}
.nav .nav-cta:hover{ opacity:.85; color:var(--black); }
.nav .nav-sprache{
  border:1px solid var(--linie); border-radius:999px;
  padding:.25rem .7rem; font-size:.78rem; letter-spacing:.04em;
}

/* ---------------------------------------------------------- Raster */

.wrap{ max-width:760px; margin:0 auto; padding:3rem 1.5rem 3rem; }
.wrap-schmal{ max-width:620px; }
section{ margin-bottom:2.6rem; }
.divider{ width:48px; height:1px; background:var(--oak); margin:2.8rem auto; }

/* ---------------------------------------------------------- Typografie */

.hero{ text-align:center; margin-bottom:3.2rem; }
.hero .logo{ width:96px; height:96px; margin-bottom:1.5rem; }
.hero .eyebrow{
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oak); margin-bottom:.9rem;
}
.hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500; font-size:clamp(2.6rem, 8vw, 3.6rem);
  letter-spacing:.08em; line-height:1.1; margin-bottom:1.3rem;
}
.hero .lead{ font-size:1.02rem; max-width:560px; margin:0 auto; }

h1.seitentitel{
  font-family:'Cormorant Garamond', serif;
  font-weight:500; font-size:clamp(2rem, 6vw, 2.8rem);
  letter-spacing:.03em; line-height:1.15; margin-bottom:.6rem;
}
.kicker{
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sage); margin-bottom:.3rem;
}
h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:600; font-size:1.7rem; margin-bottom:.7rem;
}
h3{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.2rem; margin-bottom:.25rem; }
p{ font-size:.95rem; margin-bottom:.7rem; }
.lead-gross{ font-size:1.05rem; color:var(--gedaempft); margin-bottom:1.6rem; }

/* ---------------------------------------------------------- Karten */

.feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem; }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{
  background:#fff; border:1px solid var(--linie);
  border-radius:12px; padding:1.15rem 1.3rem;
}
.feature.highlight{ border-color:var(--oak); border-width:1.5px; }
.feature p{ font-size:.86rem; margin:0; }

/* ---------------------------------------------------------- Buttons */

.btn{
  display:inline-block; text-decoration:none;
  font-weight:500; font-size:.9rem; letter-spacing:.04em;
  padding:.75rem 1.6rem; border-radius:999px;
  transition:opacity .15s ease;
}
.btn:hover{ opacity:.85; }
.btn-gold{ background:var(--oak); color:var(--black); }
.btn-ghost{ border:1.5px solid rgba(247,243,236,0.6); color:var(--cream); }
.btn-linie{ border:1.5px solid var(--oak); color:var(--black); }
.btn-row{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

.booking{
  background:var(--black); color:var(--cream);
  border-radius:14px; padding:2rem 1.8rem; text-align:center;
}
.booking h2{ color:var(--cream); }
.booking p{ color:rgba(247,243,236,0.8); max-width:480px; margin:0 auto 1.2rem; }

/* ---------------------------------------------------------- Preis-Kurzfassung */

.preis-teaser{
  background:#fff; border:1px solid var(--linie); border-radius:12px;
  padding:1.5rem 1.4rem; text-align:center;
}
.preis-teaser-zahl{
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size:2.6rem; line-height:1; margin-bottom:.6rem;
  font-variant-numeric:lining-nums;
}
.preis-teaser-zahl span{
  display:block; font-family:'Inter',sans-serif; font-weight:300;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage); margin-top:.45rem;
}
.preis-teaser-text{ max-width:44ch; margin:0 auto 1.2rem; color:var(--gedaempft); }

/* ---------------------------------------------------------- Galerie */

.galerie{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.7rem; margin:1.4rem 0; }
.galerie figure{ margin:0; }
.galerie.gross{ grid-template-columns:1fr; }
@media (max-width:520px){ .galerie{ grid-template-columns:1fr; } }
.galerie img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:10px; background:#efe8dd; aspect-ratio:4/3;
}
.galerie figcaption{ font-size:.78rem; color:var(--gedaempft); margin-top:.35rem; }
.galerie .platzhalter{
  aspect-ratio:4/3; border-radius:10px;
  border:1px dashed var(--linie); background:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--sage); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1rem;
}

/* ---------------------------------------------------------- Ausstattungsliste */

.ausstattung{
  list-style:none; padding:0; margin:1.2rem 0 0;
  columns:2; column-gap:1.6rem;
}
@media (max-width:520px){ .ausstattung{ columns:1; } }
.ausstattung li{
  font-size:.9rem; padding:.35rem 0 .35rem 1.4rem; position:relative;
  break-inside:avoid;
}
.ausstattung li::before{
  content:''; position:absolute; left:.15rem; top:.95rem;
  width:6px; height:6px; border-radius:50%; background:var(--oak);
}

/* ---------------------------------------------------------- Fakten */

.fakten{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 0; padding:0; list-style:none; }
.fakten li{
  font-size:.8rem; color:var(--gedaempft);
  background:#fff; border:1px solid var(--linie);
  border-radius:999px; padding:.35rem .85rem;
}

/* ---------------------------------------------------------- Fußzeile */

.fuss{
  text-align:center; padding:2.5rem 1.5rem 3rem;
  border-top:1px solid var(--linie);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(28,28,26,0.45);
}
.fuss p{ font-size:inherit; margin:0; }
.fuss-links{ margin-top:.7rem !important; }
.fuss-links a{ text-decoration:none; border-bottom:1px solid rgba(28,28,26,0.2); margin:0 .5rem; }
.fuss-links a:hover{ color:var(--black); }

/* ---------------------------------------------------------- Kleinkram */

@media (max-width:430px){
  .kopf-innen{ justify-content:center; padding:.6rem 1rem; }
  .nav{ justify-content:center; width:100%; }
  .wrap{ padding-left:1.1rem; padding-right:1.1rem; }
}