/* ===========================================================
   Gabriele Stangl — Heilarbeit · shared styles
   Palette: Off-White #F7F3EF · Mauve #A98F9D/#B7A1AE · Aubergine #6B5566
   Sage #C9D3C6/#ECF1E8 · Text #3E3236/#4A3B40
   Fonts: Fraunces (serif headings) · Hanken Grotesk (sans body)
   =========================================================== */

html, body { margin:0; padding:0; background:#F7F3EF; overflow-x:hidden; }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
       font-family:'Hanken Grotesk', sans-serif; color:#3E3236; }
* { box-sizing:border-box; }
a { color:inherit; }

/* ---- Nav ---- */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center;
       justify-content:space-between; gap:24px; flex-wrap:wrap; padding:18px 40px;
       background:rgba(247,243,239,0.88); backdrop-filter:blur(10px);
       -webkit-backdrop-filter:blur(10px); border-bottom:1px solid #E6DDD6; }
.nav-brand { display:flex; align-items:center; gap:14px; text-decoration:none; }
.nav-mark { display:flex; align-items:center; justify-content:center; width:46px; height:46px;
            border-radius:50%; border:1.5px solid #B7A1AE; color:#4A3B40;
            font-family:'Fraunces',serif; font-size:21px; letter-spacing:0.04em; flex-shrink:0; }
.nav-links { display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.nav-link { text-decoration:none; white-space:nowrap; color:#8A7980; font-weight:500;
            font-size:15px; letter-spacing:0.01em; padding-bottom:3px;
            border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s; }
.nav-link:hover { color:#4A3B40; }
.nav-link.active { color:#4A3B40; font-weight:600; border-bottom-color:#B7A1AE; }

/* ---- Buttons ---- */
.btn-solid { display:inline-flex; align-items:center; padding:15px 30px; background:#6B5566;
             color:#F7F3EF; text-decoration:none; border-radius:2px; font-size:15px; font-weight:500;
             letter-spacing:0.06em; transition:background .2s; }
.btn-solid:hover { background:#574354; }
.btn-outline { display:inline-flex; align-items:center; padding:15px 30px; background:transparent;
               color:#7A6770; text-decoration:none; border:1.5px solid #CBBAC2; border-radius:2px;
               font-size:15px; font-weight:500; letter-spacing:0.06em;
               transition:border-color .2s, color .2s; }
.btn-outline:hover { border-color:#B7A1AE; color:#4A3B40; }
.btn-cta { display:inline-flex; align-items:center; padding:16px 34px; background:#6B5566;
           color:#F7F3EF; text-decoration:none; border-radius:2px; font-size:15px; font-weight:500;
           letter-spacing:0.06em; transition:background .2s; }
.btn-cta:hover { background:#574354; }
.btn-block { display:block; text-align:center; padding:15px; background:#6B5566;
             color:#F7F3EF; text-decoration:none; border-radius:2px; font-size:15px; font-weight:600;
             letter-spacing:0.04em; transition:background .2s; }
.btn-block:hover { background:#574354; }

/* ---- Tiles (start page) ---- */
.tile { display:flex; flex-direction:column; text-decoration:none; background:#FFFFFF;
        border:1px solid #EAE0DA; border-radius:5px; padding:40px 32px;
        transition:transform .25s, box-shadow .25s, border-color .25s; }
.tile:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(120,95,105,0.12);
              border-color:#DCC9D1; }

/* ---- Footer ---- */
.footer-link { text-decoration:none; color:#5C4D52; font-size:14.5px; transition:color .2s; }
.footer-link:hover { color:#9D8391; }

.eyebrow { margin:0 0 14px; font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase;
           color:#A98F9D; font-weight:500; }

/* ---- Hero: text left, animated mandala right ---- */
.hero { position:relative; overflow:hidden; }
.hero-wrap {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.04fr 0.96fr; gap:56px; align-items:center;
}
.hero-content { position:relative; z-index:1; text-align:left; }
.hero-cta { display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; }
.hero-art { display:flex; align-items:center; justify-content:center; }
.mandala-hero {
  width:100%; max-width:500px; opacity:1;
  pointer-events:none; user-select:none;
  animation:mBreathe 12s ease-in-out infinite, mGlow 7s ease-in-out infinite;
  will-change:transform, filter;
}
@keyframes mBreathe {
  0%,100% { transform:scale(1)     translateY(0); }
  50%     { transform:scale(1.025) translateY(-6px); }
}
@keyframes mGlow {
  0%,100% { filter:drop-shadow(0 10px 26px rgba(107,85,102,0.16)) drop-shadow(0 0 14px rgba(143,166,131,0.28)); }
  50%     { filter:drop-shadow(0 14px 32px rgba(107,85,102,0.22)) drop-shadow(0 0 30px rgba(143,166,131,0.50)); }
}
.mandala-foot {
  position:absolute; right:-90px; bottom:-110px; width:340px;
  opacity:0.5; pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(138,163,127,0.28));
}

/* ---- Soft section transitions (feather edges into neighbouring cream) ---- */
.sec-sage  { background:linear-gradient(180deg, #F7F3EF 0%, #ECF1E8 15%, #ECF1E8 85%, #F7F3EF 100%); }
.sec-mauve { background:linear-gradient(180deg, #F7F3EF 0%, #D8C9CF 20%, #D8C9CF 80%, #EFE6E2 100%); }
.sec-cream { background:linear-gradient(180deg, #F7F3EF 0%, #F4EFEA 40%, #F4EFEA 100%); }

/* ---- Scroll reveal (only when JS is active, so content never hides without JS) ---- */
html.js section, html.js footer { opacity:0; transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.js section.in, html.js footer.in { opacity:1; transform:none; }

@media (max-width:880px){
  .grid-3 { grid-template-columns:1fr !important; }
  .grid-2 { grid-template-columns:1fr !important; }
  .grid-facts { grid-template-columns:1fr 1fr !important; }
  .price-row { flex-wrap:wrap; }
  .offer-media { order:-1; }
  .hero-h1 { font-size:46px !important; }
  .sec-pad { padding-left:24px !important; padding-right:24px !important; }
  .footer-grid { grid-template-columns:1fr !important; }
  .hero-wrap { grid-template-columns:1fr; gap:30px; }
  .hero-content { text-align:center; }
  .hero-cta { justify-content:center; }
  .hero-art { order:2; }
  .hero-prose { margin-left:auto; margin-right:auto; }
  .mandala-hero { max-width:300px; opacity:0.9; }
}
@media (prefers-reduced-motion: reduce){
  .mandala-hero { animation:none; }
  html.js section, html.js footer { opacity:1 !important; transform:none !important; transition:none !important; }
}