/* ===== Body & Soul Paradise — recreation ===== */
@font-face{
  font-family:"Cinzel";
  src:url("fonts/cinzel.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Pinyon Script";
  src:url("fonts/pinyon.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --gold:#c6a455;
  --gold-bright:#d9bd73;
  --gold-deep:#a9863c;
  --btn-gold:#b89a3e;
  --cream:#f7f3ea;
  --ink:#2c4a50;            /* teal-navy text on cream */
  --ink-soft:#3c5a60;
  --red-1:#7c1622;
  --red-2:#4a0b13;
  --red-3:#230406;
  --text-light:#e9dcd2;
  --text-dim:#c9b6ac;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Cinzel",serif;
  background:#230406;
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
picture{display:contents;}
a{text-decoration:none;color:inherit;}

/* ---------- shared type ---------- */
.script{font-family:"Pinyon Script",cursive;font-weight:400;color:var(--gold);line-height:1.15;}
.caps{font-family:"Cinzel",serif;letter-spacing:.06em;}
.body-text{
  font-family:"Cinzel",serif;
  font-size:15px;
  line-height:1.95;
  letter-spacing:.045em;
  font-weight:400;
}
.gold{color:var(--gold);}

.rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:26px auto;border:0;opacity:.7;}

/* ---------- backgrounds ---------- */
.bg-red{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% 8%, #8a1826 0%, #6a1019 28%, #45090f 62%, #230406 100%);
}
.lotus-watermark{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:
    radial-gradient(40% 55% at 50% 60%, rgba(255,170,160,.10), transparent 70%);
}
.gold-dust{position:absolute;inset:0;pointer-events:none;opacity:.8;}

/* ---------- buttons ---------- */
.btns{display:flex;gap:16px;flex-wrap:wrap;}
.btns.center{justify-content:center;}
.btn{
  font-family:"Cinzel",serif;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 26px;border-radius:4px;cursor:pointer;
  transition:.25s ease;display:inline-block;
}
.btn-wa{background:var(--btn-gold);color:#fff;border:1px solid var(--btn-gold);}
.btn-wa:hover{background:#cbab48;border-color:#cbab48;}
.btn-call{background:transparent;color:var(--gold-bright);border:1px solid var(--gold-deep);}
.btn-call:hover{background:rgba(198,164,85,.14);}

.book{margin-top:38px;}
.book .script{font-size:38px;margin-bottom:14px;}

/* ---------- nav ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:22px clamp(18px,4vw,80px);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease, padding .3s ease;
  border-bottom:1px solid rgba(214,184,120,.18);
}
header.nav.scrolled{background:rgba(40,7,10,.92);padding:14px clamp(18px,4vw,80px);backdrop-filter:blur(6px);}
.nav-links{display:flex;gap:clamp(14px,1.8vw,30px);list-style:none;}
.nav-links a{
  font-family:"Cinzel",serif;font-size:clamp(12.5px,1vw,14px);letter-spacing:.06em;
  white-space:nowrap;
  color:var(--text-light);transition:color .2s;padding:4px 0;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold-bright);}
.nav-social{position:absolute;right:34px;top:50%;transform:translateY(-50%);display:flex;gap:12px;}
.soc{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #b81f2b, #7c1622);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .2s;
}
.soc:hover{transform:translateY(-2px);}
.soc svg{width:18px;height:18px;fill:#fff;}
.nav-toggle{display:none;position:absolute;left:30px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;}
.nav-toggle span{width:26px;height:2px;background:var(--gold-bright);display:block;}

/* ---------- hero ---------- */
/* Height-aware: padding and vertical rhythm scale with the viewport height so
   the whole stack fits a short laptop screen without scrolling, yet doesn't
   leave a big gap on a tall one. svh avoids the mobile URL-bar jump. */
.hero{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(92px,13vh,124px) 20px clamp(40px,7vh,64px);
  overflow:hidden;
}
/* Full-bleed cover so the lotus+buddha fill the whole hero — no bare red strip
   for the "Willkommen" line to float on. object-position keeps the buddha to
   the right and the lotus roughly centred behind the headline. */
.hero-buddha{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:66% 38%;
}
/* Soft scrim: darkens just enough for white/gold text to stay legible over the
   imagery without hiding the lotus. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 35%, rgba(35,4,6,.45) 100%),
    linear-gradient(180deg, rgba(35,4,6,.35) 0%, transparent 22%, transparent 62%, rgba(35,4,6,.5) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:760px;}
.hero-welcome{font-size:clamp(15px,1.6vw,20px);letter-spacing:.14em;color:var(--text-light);font-weight:500;}
.hero-title{font-size:clamp(40px,5.4vw,64px);margin:clamp(18px,3.4vh,34px) 0;}
.hero-sub{max-width:560px;margin:0 auto;color:var(--text-light);}
.stars{color:var(--gold);letter-spacing:6px;font-size:15px;margin-top:clamp(14px,2.4vh,22px);}
.rating{font-size:13px;letter-spacing:.08em;margin-top:8px;color:var(--text-light);}
.hero .book{margin-top:clamp(22px,4vh,38px);}
.hero .book .script{font-size:clamp(29px,3.6vw,38px);}

/* ---------- sections ---------- */
section{position:relative;}
.sec-pad{padding:90px 24px;}
.container{max-width:1180px;margin:0 auto;position:relative;z-index:2;}
.center{text-align:center;}

/* cream intro */
.cream{background:var(--cream);color:var(--ink);}
.cream .lead{max-width:1000px;margin:30px auto 0;text-align:center;color:var(--ink-soft);font-size:16px;line-height:2;letter-spacing:.04em;}

/* 3 ayurveda cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:60px;}
.acard{
  position:relative;border-radius:14px;overflow:hidden;min-height:360px;
  padding:46px 34px;text-align:center;color:var(--text-light);
  /* buddha.png as the tile background; the dark gradient on top keeps the
     gold/light text readable over the imagery. */
  background:
    linear-gradient(180deg, rgba(30,5,8,.62) 0%, rgba(18,3,5,.82) 100%),
    url('buddha.png') center/cover no-repeat;
  background:
    linear-gradient(180deg, rgba(30,5,8,.62) 0%, rgba(18,3,5,.82) 100%),
    image-set(url('buddha.webp') type('image/webp'), url('buddha.png') type('image/png')) center/cover no-repeat;
  box-shadow:0 22px 40px -18px rgba(0,0,0,.6);
}
/* Vary the focal point so the three tiles don't show an identical crop. */
.acard:nth-child(1){background-position:left center,left center;}
.acard:nth-child(2){background-position:center,center;}
.acard:nth-child(3){background-position:right center,right center;}
.acard .ac-title{font-family:"Pinyon Script",cursive;color:var(--gold);font-size:40px;line-height:1.1;margin-bottom:6px;}
.acard .ac-rule{width:90px;height:1px;background:var(--gold);opacity:.7;margin:18px auto 26px;}
.acard p{font-size:14px;line-height:1.95;letter-spacing:.05em;}

/* dark photo section */
.dark-sec{background:#150c08;color:var(--text-light);position:relative;overflow:hidden;}
.dark-sec .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;}
.dark-sec .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,4,.7),rgba(10,6,4,.85));}
.sec-script-title{font-family:"Pinyon Script",cursive;color:var(--gold);font-size:54px;text-align:center;line-height:1.1;}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal-banner{
  position:relative;text-align:center;
  padding:clamp(120px,18vh,180px) 24px clamp(40px,7vh,70px);
}
.legal-banner .sec-script-title{color:var(--gold);}
.legal-banner .kicker{
  font-family:"Cinzel",serif;font-weight:600;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text-light);opacity:.85;margin-bottom:14px;
}
.legal{background:var(--cream);color:var(--ink);}
.legal .container{max-width:880px;}
.legal-block{margin-bottom:46px;}
.legal h2{
  font-family:"Pinyon Script",cursive;color:var(--gold-deep);
  font-size:clamp(30px,3.4vw,42px);line-height:1.15;margin-bottom:18px;
}
.legal h3{
  font-family:"Cinzel",serif;font-weight:600;color:var(--ink);
  font-size:17px;letter-spacing:.06em;margin:28px 0 10px;
}
.legal p{
  font-family:"Cinzel",serif;color:var(--ink-soft);
  font-size:14.5px;line-height:1.95;letter-spacing:.03em;margin-bottom:14px;
}
.legal .addr p{margin-bottom:2px;}
.legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(169,134,60,.5);transition:color .2s;}
.legal a:hover{color:#8a6a2c;}
.legal .rule{margin:0 auto 40px;}

/* bordered mini cards */
.border-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px;}
.bcard{border:1px solid rgba(198,164,85,.5);padding:34px 26px;text-align:center;background:rgba(20,10,8,.35);}
.bcard .bc-title{font-family:"Pinyon Script",cursive;color:var(--gold);font-size:30px;line-height:1.15;margin-bottom:18px;}
.bcard p{font-size:13.5px;line-height:1.9;letter-spacing:.05em;color:var(--text-dim);}

/* raindrop product */
.raindrop-why{background:var(--cream);}
.raindrop-why-title{
  font-family:"Pinyon Script",cursive;
  color:#b81f2b;
  font-size:58px;
  text-align:center;
  line-height:1.1;
  margin-bottom:44px;
}
.three-dark{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tdcard{position:relative;min-height:280px;border-radius:6px;overflow:hidden;padding:34px 28px;color:var(--text-light);
  background-size:cover;background-position:center;}
.tdcard .tdov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,4,.55),rgba(10,6,4,.82));}
.tdcard .tdinner{position:relative;z-index:2;}
.tdcard .td-title{font-family:"Pinyon Script",cursive;color:var(--gold);font-size:27px;margin-bottom:14px;line-height:1.1;}
.tdcard p{font-size:13px;line-height:1.85;letter-spacing:.04em;}

/* expectation overlay section */
.expect{text-align:center;}
.expect .body-text{max-width:820px;margin:0 auto;color:var(--text-light);}
.expect h3{font-family:"Cinzel",serif;color:var(--gold);font-size:26px;letter-spacing:.05em;margin:46px 0 22px;font-weight:600;}

/* ---------- service cards ---------- */
.service{padding:70px 24px;}
.service.svc-dark{background:
  radial-gradient(120% 120% at 88% 50%, #7c1622 0%, #4a0b13 38%, #240406 66%, #0d0203 100%);}
.service.svc-dark .svc-tags{color:#9a7a36;}
.svc-inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;position:relative;z-index:2;}
.svc-text .svc-title{font-family:"Pinyon Script",cursive;color:var(--gold);font-size:42px;line-height:1.12;}
.svc-rule{width:170px;height:1px;background:var(--gold-deep);opacity:.7;margin:22px 0 26px;}
.svc-desc{color:var(--text-light);max-width:440px;}
.svc-tags{display:flex;flex-wrap:wrap;gap:26px;margin:28px 0;color:var(--gold-deep);font-size:12px;letter-spacing:.05em;}
.svc-tag{display:flex;align-items:flex-start;gap:8px;max-width:150px;line-height:1.4;}
.svc-tag svg{width:15px;height:15px;fill:var(--gold);flex-shrink:0;margin-top:1px;}
.price-table{margin:20px 0 6px;border-top:1px solid rgba(198,164,85,.45);}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid rgba(198,164,85,.45);
  font-size:15px;letter-spacing:.06em;color:var(--text-light);}
.price-row .dur{color:var(--text-light);}
.price-row .amt{color:#fff;}
.svc-img{border-radius:12px;overflow:hidden;box-shadow:0 20px 44px -20px rgba(0,0,0,.7);}
.svc-img img{width:100%;height:100%;object-fit:cover;}
.svc-extra{margin-top:14px;}
.svc-extra h3{font-family:"Cinzel",serif;color:#fff;font-size:14px;letter-spacing:.05em;margin:16px 0 8px;}
.svc-extra p{color:var(--text-light);font-size:13.5px;line-height:1.85;letter-spacing:.04em;margin-bottom:8px;}

/* about */
.about{background:var(--cream);color:var(--ink);}
.about-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.about h2{font-family:"Pinyon Script",cursive;color:var(--gold-deep);font-size:48px;margin-bottom:30px;}
.about p{color:var(--ink-soft);font-size:14.5px;line-height:1.95;letter-spacing:.04em;margin-bottom:18px;}
.about-photo img{width:100%;border-radius:10px;box-shadow:0 20px 40px -18px rgba(0,0,0,.35);}
.about-quote{font-family:"Pinyon Script",cursive;color:var(--gold-deep);font-size:32px;text-align:center;margin-top:28px;line-height:1.5;}

/* contact */
.contact{background:#160d08;}
.contact .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;}
.contact .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,7,4,.85),rgba(12,7,4,.55));}
.contact-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;position:relative;z-index:2;align-items:start;}
.contact h2{font-family:"Pinyon Script",cursive;color:var(--gold);font-size:42px;line-height:1.15;}
.contact .intro{color:var(--text-light);margin:22px 0 8px;max-width:340px;}
.loc{background:rgba(20,12,8,.45);border:1px solid rgba(198,164,85,.18);padding:28px 26px;border-radius:6px;}
.loc h3{font-family:"Cinzel",serif;color:var(--gold);font-size:17px;letter-spacing:.05em;line-height:1.4;margin-bottom:22px;font-weight:600;}
.loc .row{display:flex;gap:12px;align-items:flex-start;color:var(--text-light);font-size:13.5px;line-height:1.6;letter-spacing:.04em;margin-bottom:16px;}
.loc .row svg{width:16px;height:16px;fill:var(--gold);flex-shrink:0;margin-top:2px;}
.loc .maps-link{margin-top:18px;}

/* footer */
footer{background:radial-gradient(120% 120% at 80% 60%, #6a1019, #2a0508 70%, #120203);padding:80px 24px 60px;position:relative;}
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:40px;position:relative;z-index:2;}
.foot-brand{display:flex;align-items:center;justify-content:center;}
.foot-logo{width:min(240px,82%);height:auto;display:block;}
.foot-col h4{font-family:"Cinzel",serif;color:var(--gold);font-size:14px;letter-spacing:.08em;margin-bottom:24px;font-weight:600;}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:14px;}
.foot-col a{font-family:"Cinzel",serif;font-size:13px;letter-spacing:.05em;color:var(--text-light);transition:color .2s;}
.foot-col a:hover{color:var(--gold-bright);}
.foot-contact .row{display:flex;gap:10px;align-items:flex-start;color:var(--text-light);font-size:13px;line-height:1.5;letter-spacing:.04em;margin-bottom:16px;font-family:"Cinzel",serif;}
.foot-contact .row svg{width:15px;height:15px;fill:var(--gold);flex-shrink:0;margin-top:2px;}
.foot-name{font-family:"Cinzel",serif;color:var(--gold);font-size:15px;letter-spacing:.06em;margin-bottom:20px;}
.foot-btns{margin-top:24px;}

/* gold dust dots */
.dust{position:absolute;border-radius:50%;background:var(--gold);pointer-events:none;}

/* ---------- responsive ---------- */
/* Free up room for the links before the bar gets tight — the social icons
   are duplicated in the footer, so dropping them here costs nothing. */
@media(max-width:1100px){
  .nav-social{display:none;}
}
/* Layout grids stack well before the nav needs to. */
@media(max-width:1200px){
  .hero-title{font-size:48px;}
  /* Keep the image full-bleed; the ::after scrim already handles legibility,
     so only a light dim is needed. */
  .hero-buddha{opacity:.8;}
  .card-grid,.border-cards,.three-dark{grid-template-columns:1fr;}
  .svc-inner{grid-template-columns:1fr;gap:30px;}
  .about-grid{grid-template-columns:1fr;gap:34px;}
  .contact-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
/* Only now does the full nav stop fitting — collapse to the hamburger. */
@media(max-width:880px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(30,5,8,.97);padding:10px 0;border-top:1px solid rgba(214,184,120,.2);}
  .nav-links.open{display:flex;}
  .nav-links li{text-align:center;padding:12px 0;}
  .nav-links a{font-size:14px;}
  .nav-toggle{display:flex;}
  header.nav{justify-content:flex-start;padding-left:70px;}
  .nav-social{right:18px;}
  .hero-title{font-size:42px;}
  /* Portrait crops show only a narrow slice of the wide artwork; the buddha
     sits at ~85% of the image width, so shift the focal point onto him. */
  .hero-buddha{object-position:92% 42%;}
}
@media(max-width:560px){
  .sec-pad{padding:60px 20px;}
  .hero-title{font-size:34px;}
  .sec-script-title{font-size:38px;}
  .foot-grid{grid-template-columns:1fr;text-align:center;}
  .foot-contact .row,.foot-col ul{justify-content:center;}
}