/* =========================================================================
   VILLA AVATELLI – Erscheinungsbild "Boutique Grid" (Variante C)

   Helle Galerie-Anmutung: Alabaster als Grundfläche, Sand als Ruhepol,
   Marcellus über Inter. Gleiche Inhalte und gleiche Bausteine wie die
   dunkle Variante – nur anders eingekleidet.
   ========================================================================= */
:root{
  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --track-eyebrow:.22em;
  --shell:1320px;
  --sp-section:clamp(52px,6vw,96px);
  --radius:0px;

  --alabaster:#FBF9F5;
  --alabaster-2:#F3EDE3;
  --sand:#E7DCC9;
}

body{font-weight:400;font-size:clamp(16px,1vw,17.5px);line-height:1.7}
h1,h2,h3,h4{letter-spacing:.005em}
.lead{font-weight:400}

/* ---------- Flächen ---------- */
.section--tint{background:var(--alabaster-2)}
/* Das Kontrastkapitel ist hier der Sandblock */
.section--light{background:var(--sand);color:var(--ink)}
.section--light h2,.section--light h3{color:var(--ink)}
.section--light .pair,.section--light .amen__group{background:#fff;border-color:rgba(17,29,34,.1)}
.section--light .note{background:rgba(255,255,255,.7);border-color:var(--brass)}
.section--light .rates thead tr{background:rgba(255,255,255,.6)}

/* ---------- Auszeichnungen ---------- */
.eyebrow{font-weight:500}
.eyebrow::before{width:26px;background:var(--brass)}
.btn{letter-spacing:.06em;border-radius:0}
.btn--primary{background:var(--ink)}
.btn--primary:hover{background:var(--lago)}
.tlink{letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;font-weight:500}
.pull{border-left-width:2px}

/* ---------- Kopfzeile ---------- */
.site-header.is-stuck{background:rgba(251,249,245,.97)}
.nav-desktop a{font-size:.82rem;letter-spacing:.09em;font-weight:500}
.anchornav{background:rgba(251,249,245,.96);backdrop-filter:blur(10px)}
.anchornav a{font-weight:500;letter-spacing:.04em}

/* ---------- Marken-/Claimband ---------- */
.brandband{padding-block:clamp(48px,6vw,88px)}
.brandband__kicker{letter-spacing:.34em;color:var(--brass)}
.brandband h1{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.2;max-width:20ch}
.brandband p{color:#3A484E;max-width:58ch}

/* ---------- Suitenzeile ---------- */
.suite-row__no{color:var(--sand)}
.suite-row__facts{color:var(--brass)}
.suite-row__price strong{color:var(--ink)}

/* ---------- Doppelblöcke ---------- */
.pair{background:#fff;border-color:rgba(17,29,34,.1)}
.section--tint .pair{background:#fff}
.pair h3{color:var(--ink);font-size:1.28rem}

/* ---------- Ausstattungsgruppen ---------- */
.amen__group{background:#fff;border:1px solid rgba(17,29,34,.1);
  padding:clamp(20px,2.2vw,30px)}
.amen__group h3{color:var(--ink);letter-spacing:.14em;border-bottom:1px solid var(--sand)}

/* ---------- Suitenblöcke ---------- */
.suite-block__head{border-color:var(--ink)}
.suite-block__cap{color:var(--brass)}

/* ---------- Kennzahlen ---------- */
.stats{border-color:rgba(17,29,34,.18)}
.stats dt{color:var(--lago)}

/* ---------- Preistabelle ---------- */
.rates{border-top:1px solid var(--ink)}
.rates caption{color:var(--ink)}
.rates thead tr{background:var(--sand)}
.rates th{color:var(--ink);font-weight:600}
.rates th,.rates td{padding:15px 14px}
.rates .amount{font-family:var(--serif)}

/* ---------- Hinweisbox ---------- */
.note{background:var(--alabaster-2);border-left-width:2px}

/* ---------- Formular ---------- */
.choice{border-radius:0}
.aside-card{background:var(--sand);border-color:transparent}
.aside-card a{border-color:rgba(17,29,34,.28)}

/* ---------- Schmaler Abschluss ---------- */
.cta-slim{background:var(--ink)}
.cta-slim .btn--primary{background:#FAF7F2;color:var(--ink);border-color:#FAF7F2}
.cta-slim .btn--primary:hover{background:#fff;border-color:#fff}
.cta-slim .btn--ghost{border-color:rgba(250,247,242,.5);color:#FAF7F2}
.cta-slim .btn--ghost:hover{background:rgba(250,247,242,.12)}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--ink)}