/* ========= Grundwerte ========= */
:root{
  --brown:#6d4b3b; --brown-deep:#4f362a;
  --sand:#e9e1d7; --beige:#f7f3ef; --sage:#a6b39a;
  --white:#ffffff; --text:#3b3029;
  --shadow:0 12px 34px rgba(0,0,0,.08);
  --radius:18px;
  --maxw:1200px; --blockw:980px;
}

/* ========= Hintergrund mit Bild + Overlay ========= */
html, body{
  margin:0; padding:0; line-height:1.65; color:var(--text);
  font-family:"Amiri", serif;
  background: url('pictures/IMG_9126.jpg') center/cover fixed no-repeat;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background: rgba(247, 243, 239, 0.78);
  z-index:-1;
}

/* ========= Topbar ========= */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(109,75,59,.12);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px;
}
.id-block{line-height:1.15}
.id-name{font-family:"Bodoni Moda","Didot","Bodoni MT",serif; font-weight:700; font-size:1.25rem; color:var(--brown-deep)}
.id-sub{opacity:.85}
.spacer{flex:1}

/* ========= Bühne & Blöcke ========= */
.stage{max-width:var(--maxw); margin:0 auto; padding:22px}
.block{
  width:min(100%, var(--blockw));
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:60px 34px;
  margin:80px auto;
}

/* ========= Versatz am Desktop ========= */
.offset-center{transform:none}
.offset-left{transform:none}
.offset-right{transform:none}
@media (min-width:1024px){
  .offset-left  { transform: translateX(-10%); }
  .offset-right { transform: translateX( 10%); }
}

/* ========= Typografie ========= */
.section-title{
  font-family:"Cinzel", serif; font-weight:700;
  color:var(--brown-deep); margin:0 0 18px; font-size:clamp(1.4rem,2.5vw,2rem);
}
.center{text-align:center}
.lead{max-width:70ch; margin:0 auto; opacity:.95}
.hero-title{
  font-family:"Cinzel", serif; font-weight:700; color:var(--brown-deep);
  text-align:center; font-size:clamp(1.6rem,2.6vw,2.2rem); margin:6px 0 12px;
}

/* ========= Quick Actions ========= */
.quick{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px;
}
.pill{
  display:inline-block; text-decoration:none; color:var(--brown);
  padding:12px 18px; border-radius:999px; background:#fff;
  border:1px solid rgba(109,75,59,.18); box-shadow:var(--shadow); font-weight:700;
}
.pill.primary{background:var(--brown); color:#fff; border-color:transparent}
.btn{cursor:pointer}
.btn.pill{padding:10px 16px}

/* ========= Teaser Women/Men ========= */
.teasers{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.teaser{display:flex; flex-direction:column; align-items:center; gap:12px}
.oval-teaser{
  width:220px; height:150px; border-radius:60%/45%; overflow:hidden;
  border:2px solid rgba(166,179,154,.35); box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.oval-teaser img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ========= Services (nur Ovale) ========= */
.services{display:grid; gap:22px}
.services.three{grid-template-columns:repeat(3,1fr)}
.services.two{grid-template-columns:repeat(2,1fr)}
.service-card{
  background:#fff; border:1px solid rgba(109,75,59,.10);
  border-radius:16px; box-shadow:var(--shadow);
  padding:22px; text-align:center;
}
.oval-img{
  width:160px; height:110px; margin:4px auto 10px;
  border-radius:60%/45%; overflow:hidden;
  border:2px solid rgba(166,179,154,.35);
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}
.oval-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.03)}
.svc-title{font-family:"Bodoni Moda","Didot","Bodoni MT",serif; font-weight:800; color:var(--brown-deep); margin:6px 0 4px; font-size:1.05rem}
.svc-desc{max-width:54ch; margin:0 auto 12px; opacity:.95}

/* ========= Head-Spa Intro ========= */
.hs-intro{ max-width: 70ch; margin: 0 auto 22px; }
.hs-line{
  font-family:"Cinzel", serif;
  font-weight:700;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--brown-deep);
  margin: 0 0 8px;
}
.hs-body{
  font-family:"Amiri", serif;
  font-size: clamp(1rem, 1.7vw, 1.05rem);
  opacity:.95;
  margin: 0 0 10px;
}

/* ========= CTA Buttons (Women/Men) ========= */
.cta-row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:18px;
}
.pill.big{ padding:14px 22px; font-size:1.05rem; }

/* ========= Split-Layout ========= */
.split{
  display:flex; align-items:center; gap:40px;
}
.split.reverse{ flex-direction: row-reverse; }
.split-img img{
  width:300px; height:360px; object-fit:cover;
  border-radius:14px; box-shadow:var(--shadow);
}
.split-text{ flex:1; }

/* ========= Hinweise ========= */
.note{
  font-style:italic;
  opacity:.9;
  margin-top:20px;
}

/* ========= WhatsApp Button ========= */
.whatsapp-btn{
  background:#25D366; color:#fff; border-radius:999px;
  padding:14px 22px; text-decoration:none; font-weight:700;
  box-shadow:var(--shadow); display:inline-block;
}
.whatsapp-btn:hover{ filter:brightness(0.95); }

/* ========= Responsive ========= */
@media (max-width:980px){
  .teasers{grid-template-columns:1fr}
  .services.three{grid-template-columns:1fr}
  .services.two{grid-template-columns:1fr}
  .split{flex-direction:column}
  .split.reverse{flex-direction:column}
  .split-img img{width:100%; height:260px}
}
@media (max-width:720px){
  .block{padding:46px 24px; margin:64px auto}
  .pill.big{ width:100%; text-align:center; }
}

/* ===== Fixiertes, dezentes Logo am unteren Rand ===== */
.sticky-logo-only {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 0.85;
  pointer-events: none; /* verhindert, dass Klicks blockiert werden */
}

.sticky-logo-only img {
  height: clamp(140px, 15vw, 220px);
  opacity: 0.7;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  transition: opacity 0.3s ease;
}

.sticky-logo-only img:hover {
  opacity: 0.9;
}


/* ===== Elegante Logo-Animation beim Scrollen ===== */
.sticky-logo-only img {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  height: clamp(140px, 15vw, 220px);
  opacity: 0.75;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18));
  transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 999;
}

/* Logo wird beim Scrollen leicht kleiner und transparenter */
body.scrolled .sticky-logo-only img {
  opacity: 0.4;
  transform: translateX(-50%) scale(0.9);
}

/* ===== Edle Hervorhebung für "Termin anfragen"-Kästchen ===== */
#termin.block {
  background: rgba(245, 240, 230, 0.95); /* sanftes Beige oder Creme */
  border: 1px solid rgba(109, 75, 59, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 70px 40px; /* etwas mehr Raum */
  margin-top: 120px;  /* Abstand vom vorherigen Block */
  margin-bottom: 120px;
  border-radius: 22px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#termin.block:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}



/* ===== Abstand unter dem letzten Block ===== */
body {
  padding-bottom: 120px; /* sorgt für mehr Raum am Seitenende */
}