/* ===== Matahari Yoga – Styles (clean build) ===== */
:root{
  --bg:#f4f1eb;
  --paper:#ffffff;
  --ink:#2a2a2a;
  --muted:#6a6a6a;
  --gold:#b9904a;
  --teal:#3b8f87;
  --sand:#efe6d9;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;scroll-behavior:smooth}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;margin:0 0 .4em}
h1{font-size:clamp(28px,4vw,48px);}
h2{font-size:clamp(24px,3vw,34px);color:var(--gold)}
h3{font-size:20px}
p{margin:.6em 0}
a{color:var(--teal);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}
.container{width:min(1100px,92%);margin-inline:auto}

.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee}
.head-wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);text-decoration:none}
.brand .brand-text em{font-weight:400;font-style:normal;color:var(--gold)}
.brand-logo{height:28px;width:auto}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav a{padding:10px 12px;border-radius:999px}
.nav .cta{background:var(--gold);color:#fff}
.nav .nav-divider{display:none}
.hamburger{display:none;margin-right:6px;border:0;background:transparent;padding:8px;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:#333;margin:5px 0}

/* Backdrop for drawer */
.nav-backdrop{position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.25);backdrop-filter:saturate(80%) blur(1px);z-index:900}

.hero.hero-clean{background:linear-gradient(180deg,#f7f3ed 0%, #efe6d9 100%);min-height:52vh;display:grid;place-items:center;position:relative}
.hero-inner{position:relative;text-align:center;color:#222;padding:70px 0}
.hero-logo{height:84px;width:auto;margin-bottom:8px}
.hero-title{font-weight:700;letter-spacing:.04em;color:#2b2b2b}
.hero-sub{font-family:'Playfair Display',Georgia,serif;font-size:clamp(18px,2.4vw,26px);color:#fff;background:var(--gold);display:inline-block;padding:6px 16px;border-radius:999px;margin:.4em 0 1em}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow)}
.btn-hero{background:var(--gold)}

.section{padding:56px 0;background:var(--paper)}
.section.alt{background:var(--sand)}
.lead{color:#444;max-width:70ch}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.figure img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.figure-wide img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px}
.card{background:var(--sand);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

.booking{background:linear-gradient(135deg,var(--sand),#fff)}
.booking-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.booking .btn{background:var(--gold)}

.quote blockquote,#quote-text{font-size:clamp(18px,2.5vw,26px);font-family:'Playfair Display',Georgia,serif;margin:0}
.quote cite{display:block;margin-top:.6em;color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}

.map-embed{width:100%;max-width:520px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.map-embed iframe{display:block;width:100%;height:220px;border:0}

.site-footer{background:#fff;border-top:1px solid #eee;padding:36px 0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;justify-items:center;text-align:center}
.footer-logo{height:34px;width:auto;margin-bottom:6px}
.copyright{color:#666}

/* Panels (Kontakt/Impressum) */
.panel{position:fixed;inset:0;background:rgba(0,0,0,.18);display:none;align-items:stretch;justify-content:flex-end;z-index:1200}
.panel.show{display:flex}
.panel-inner{background:#fff;width:min(720px,96%);max-width:720px;height:100%;padding:24px 20px 28px;overflow:auto;border-left:1px solid #eee}
.panel-close{position:sticky;top:0;float:right;background:#0000;border:0;font-size:28px;cursor:pointer}

/* Mobile nav drawer (half width) */
@media (max-width: 980px){
  .nav{display:none;position:fixed;top:64px;left:0;height:calc(100vh - 64px);width:60vw;max-width:420px;background:#fff;border-right:1px solid #eee;flex-direction:column;padding:12px;z-index:950}
  .nav.open{display:flex}
  .nav .nav-divider{display:block;height:1px;background:#eee;margin:8px 0;border:0}
  .hamburger{display:block}
  .nav-backdrop[hidden]{display:none}
}

@media (max-width: 860px){
  .two-col{grid-template-columns:1fr}
  .booking-wrap{flex-direction:column;align-items:flex-start}
  .site-header{min-height:64px}
}


/* Hero width + big title */
.hero-inner{max-width:50vw}
.hero-title{text-transform:lowercase;font-size:clamp(36px,7vw,84px);}

/* Cards: vertical stack for .single-col */
.cards.single-col{grid-template-columns:1fr}

/* Contact form single column and full width */
.contact .grid.onecol{display:block}
.contact input[type="text"], .contact textarea{width:100%}

/* Spacer lines for requested blank lines */
.spacer-line{height:18px}

/* Panel spacing */
.panel-inner h3{margin-top:14px}
/* Extra spacing below mail button */
.contact .btn{margin-top:8px}
.contact .small{margin-top:8px;display:block}
/* Hero on small screens: full width */
@media (max-width: 860px){
  .hero-inner{max-width:92%}
}


/* Hero: 2/3 width logo and square Namasté block */
.hero-inner{max-width:50vw}
.hero-logo.big{width:66%; height:auto; max-width:720px}
.namaste-badge{display:inline-grid; place-items:center; width:160px; height:160px; background:#ffffff; border:2px solid var(--gold); 
  color:#2a2a2a; font-family:"Playfair Display", Georgia, serif; font-size:28px; letter-spacing:.02em; 
  margin:16px auto 0; border-radius:18px; box-shadow:var(--shadow)}

/* Compact spacing under image breaks */
.section-image.compact{padding-bottom:32px}
@media (max-width: 860px){
  .hero-inner{max-width:92%}
  .hero-logo.big{width:82%;}
  .namaste-badge{width:130px;height:130px;font-size:22px}
}


/* Square hero container + elongated Namasté button */
.hero.hero-clean{background:linear-gradient(180deg,#f7f3ed 0%, #efe6d9 100%);display:grid;place-items:center;padding:32px 0}
.hero-inner.hero-square{width:min(680px,62vw);aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent}
.hero-logo.big{width:66%;height:auto;max-width:720px}
.namaste-pill{display:inline-block;margin:10px auto 0;padding:10px 22px;border-radius:999px;border:2px solid var(--gold);color:#2a2a2a;
  font-family:"Playfair Display",Georgia,serif;font-size:22px;letter-spacing:.02em;text-decoration:none;box-shadow:var(--shadow);background:#fff}
.namaste-pill:hover{text-decoration:none;opacity:.96}

/* Compact spacing under image break sections (same for both) */
.section-image.compact{padding-top:24px;padding-bottom:24px}

@media (max-width: 860px){
  .hero-inner.hero-square{width:92vw}
  .hero-logo.big{width:82%}
  .namaste-pill{font-size:18px;padding:8px 18px;margin-top:8px}
}


/* ---- Spacing fixes (v2) ---- */
.section{padding:48px 0} /* was 56px */
.section-image.compact{padding-top:16px;padding-bottom:16px}
.section-image.compact + .section{padding-top:28px}
.section h2{margin-top:0}
.two-col{align-items:start}

/* Hero tweaks */
.hero-logo.big{border-radius:14px}
.namaste-pill{border-width:1px;padding:6px 18px;margin-top:6px}


/* ===== Spacing revamp ===== */
:root{
  --section-pad-y: 52px;       /* base vertical padding for sections */
  --image-pad-compact: 18px;   /* compact image sections top/bottom */
  --after-image-top: 28px;     /* following section top padding after an image */
}
.section{padding: var(--section-pad-y) 0}
.section-image.compact{padding-top: var(--image-pad-compact); padding-bottom: var(--image-pad-compact)}
.section-image.compact + .section{padding-top: var(--after-image-top)}
/* specific top spacing tweaks */
.section-image.img-nebel{padding-top: 26px}   /* Wald Nebel: etwas größer oben */
.section-image.img-lotus{padding-top: 26px}   /* Schneidersitz: etwas größer oben */
.section-image.img-sonne{padding-top: 30px}   /* Wald Sonne: oben etwas mehr */

/* Ensure headings do not add extra gap and content alignment feeling centered */
.section h2{margin-top:0}
.container{align-items:center}

/* Hero tweaks (fine-tuning) */
.hero-logo.big{border-radius:14px}
.namaste-pill{border-width:1px;padding:6px 18px;margin:6px auto 2px}

/* Instagram icon alignment */
a .ig{vertical-align:-2px;margin-right:6px}
.footer-brand a .ig{margin-right:6px}


/* Hero: center-only logo (no pill) */
.hero-inner.hero-square{display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero-logo.centered-only{margin:0 auto}

/* Spacer before Learning cards under Erfahrungen */
#erfahrungen .spacer-line{height:18px}
#erfahrungen .cards{margin-top:12px}


/* ===== Animations ===== */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hero logo: short entrance */
.hero-animate {
  animation: slideUp 420ms ease-out 80ms both;
}
/* On-scroll reveal: default hidden until JS adds .visible */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.visible { animation: slideUp 420ms ease-out both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-animate, .reveal.visible { animation: none !important; opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===== Nav spacing tighten ===== */
.nav { gap: 10px; }
.nav a { padding: 8px 10px; }
@media (max-width: 980px){
  .nav { padding: 8px; }
  .nav a { padding: 10px 8px; }
}


/* === Overrides: slower animations & tighter nav spacing === */
/* ~3x slower slideUp */
.hero-animate { animation-duration: 1260ms !important; animation-delay: 100ms !important; }
.reveal.visible { animation-duration: 1200ms !important; }

/* Nav spacing slightly tighter */
.nav { gap: 8px !important; }
.nav a { padding: 6px 8px !important; }
@media (max-width: 980px){
  .nav { padding: 6px !important; }
  .nav a { padding: 9px 8px !important; }
}


/* === Unified 950ms animations and deeper slide === */
@keyframes slideUpLong {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate,
.reveal.visible {
  animation-name: slideUpLong !important;
  animation-duration: 950ms !important;
  animation-timing-function: ease-out !important;
}


/* === Hero square block with equal padding (all sides) and centered logo === */
.hero.hero-clean{display:grid;place-items:center;padding:32px 0;background:linear-gradient(180deg,#f7f3ed 0%, #efe6d9 100%);}
.hero-inner.hero-square{
  width:min(680px,62vw);
  aspect-ratio:1/1;
  padding:clamp(16px,5vw,48px); /* equal padding on all sides */
  display:grid;
  place-items:center;
  background:transparent;
}
.hero-logo.big{width:66%;max-width:720px;height:auto;border-radius:14px;margin:0}

/* === Unified 950ms slide animation, repeatable via .visible toggle === */
@keyframes slideUpLong {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Baseline hidden for any .reveal candidate */
.reveal { opacity: 0; transform: translateY(40px); }
/* Animate when visible */
.reveal.visible { animation: slideUpLong 950ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 860px){
  .hero-inner.hero-square{width:92vw}
  .hero-logo.big{width:82%}
}


/* === Tighter Hero Padding for Perfect Centering === */
.hero-inner.hero-square{
  padding: clamp(8px, 3vw, 24px) !important; /* reduced from 16-48px */
}


/* Booking cards - single-field form */
.booking-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
.booking-card{background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:var(--shadow);padding:14px}
.booking-card h3{margin:0 0 .25em;font-size:18px;color:var(--gold)}
.booking-meta{font-size:14px;color:#555;margin:.25em 0 .6em}
.booking-cap{font-weight:600;margin:.4em 0}
.booking-card form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px;align-items:center}
.booking-card input[type="text"], input[type="email"]{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
.booking-card button{background:var(--teal);color:#fff;border:0;border-radius:999px;padding:10px 14px;cursor:pointer;white-space:nowrap}
.booking-card .small{font-size:12px;color:#777;margin-top:6px}


/* Erfolgsmeldung nach Buchung */
.notice-success {
  background: rgba(239,230,217,0.8); /* sanftes Sand */
  border: 1px solid var(--gold);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 14px;
  box-shadow: var(--shadow);
  animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- Read-more / line clamp --- */
.clamp-6{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;position:relative}
.clamp-6:not(.open){-webkit-line-clamp:6}
.clamp-6::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(180deg,rgba(239,230,217,0),rgba(239,230,217,.9));pointer-events:none;opacity:0;transition:opacity .2s ease}
.card .clamp-6:not(.open)::after{opacity:1}
.read-toggle{display:inline-block;margin-top:10px;padding:6px 10px;border:0;border-radius:999px;background:var(--gold);color:#fff;cursor:pointer;box-shadow:var(--shadow)}
.read-toggle[aria-expanded="true"]{background:var(--teal)}


/* Bild7 im Zitat-Container: kompakte Abstände */
.fig-bild7-in-quote{margin:0 0 12px 0}
.fig-bild7-in-quote img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}


/* Gold-styled button (like booking button) */
.btn-gold{ background: var(--gold); color:#fff; }
.btn-gold:hover{ opacity:.95; text-decoration:none }


/* ==== NAV COLOR HARMONIZATION (sand tones) ==== */
:root{
  --sand-bg: #f7f3ef;   /* soft, warm background */
  --sand-ink: #7a6e61;  /* warm gray for links */
  --sand-accent: #c2a27e; /* subtle sand-gold for hovers/active */
}

/* Header background softened to sand tone */
.site-header{
  background: var(--sand-bg) !important;
  border-bottom: 1px solid #eee;
}

/* Desktop navigation links */
nav#site-nav a{
  color: var(--sand-ink) !important;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
nav#site-nav a:hover,
nav#site-nav a:focus{
  color: var(--sand-accent) !important;
  border-bottom-color: var(--sand-accent);
  text-decoration: none;
}

/* Active/selected hint (if JS adds a class/attribute) */
nav#site-nav a.is-active,
nav#site-nav a[aria-current="page"],
nav#site-nav a[aria-current="true"]{
  color: var(--sand-accent) !important;
  border-bottom-color: var(--sand-accent);
}

/* CTA keeps brand gold but on sand background */
.nav .cta{
  background: var(--gold) !important;
  color: #fff !important;
}
.nav .cta:hover{
  opacity:.95;
}

/* Mobile drawer background & divider tint */
@media (max-width: 980px){
  .nav{
    background: var(--sand-bg) !important;
    border-right: 1px solid #e9e1d6;
  }
  .nav .nav-divider{
    background: #e9e1d6 !important;
  }
}


/* === Kontakt – dezente Labels & Link-Hover (sand palette) === */
#panel-kontakt .contact-label {
  color: #7a6e61;           /* warm-grau (sekundär) */
  font-weight: 600;
}
#panel-kontakt a:hover {
  color: #c2a27e;           /* sand-gold Akzent im Hover */
}
#panel-kontakt .spacer-line {
  border: 0;
  height: 1px;
  background: #e9e1d6;      /* feiner sandiger Divider */
  margin: 0.8rem 0 1rem;
}



/* === Bild7 (Zitat) – neutral weiß, keine Tönung === */
.fig-bild7-in-quote img{
  background:#fff !important;
  filter:none !important;
  mix-blend-mode: normal !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}



/* === Legal / Datenschutz – unauffälliger Stil === */
#panel-impressum .legal-heading{
  font-size: 0.95rem;
  letter-spacing: .02em;
  color: #7a6e61;
  margin: .75rem 0 .35rem;
  font-weight: 600;
}
#panel-impressum .legal-note{
  font-size: .92rem;
  color: #6f675c;
  line-height: 1.6;
}
#panel-impressum .legal-note a{
  color: #7a6e61;
  text-decoration: underline;
}
#panel-impressum .legal-note p{ margin: 0 0 .65rem; }



/* === Footer Instagram link: harmonize with sand palette === */
.site-footer a{
  color: var(--sand-ink);
  text-decoration: none;
}
.site-footer a:hover{
  color: var(--sand-accent);
  text-decoration: underline;
}

/* === Ort: make the Google Maps button match the Bavaya-Homepage (gold) === */
#ort a.btn[href*="maps.google"],
#ort a.btn[href*="google.com/maps"],
#ort a.btn[href*="goo.gl/maps"]{
  background: var(--gold) !important;
  color:#fff !important;
  box-shadow: var(--shadow);
}
#ort a.btn[href*="maps.google"]:hover,
#ort a.btn[href*="google.com/maps"]:hover,
#ort a.btn[href*="goo.gl/maps"]:hover{
  opacity:.95;
  text-decoration: none;
}


/* === Fine divider lines (Impressum + Ort) to match Kontakt === */
#panel-impressum .spacer-line,
#ort .spacer-line{
  border: 0;
  height: 1px;
  background: #e9e1d6;
  margin: 0.8rem 0 1rem;
}


/* === Ort: Google Maps button matches Bavaya-Homepage (gold) === */
#ort a.btn[href*="maps.google"],
#ort a.btn[href*="google.com/maps"],
#ort a.btn[href*="goo.gl/maps"]{
  background: var(--gold) !important;
  color:#fff !important;
  box-shadow: var(--shadow);
}
#ort a.btn[href*="maps.google"]:hover,
#ort a.btn[href*="google.com/maps"]:hover,
#ort a.btn[href*="goo.gl/maps"]:hover{
  opacity:.95;
  text-decoration: none;
}


/* === Bild7: force neutral white (no tint), strongest selectors === */
.fig-bild7-in-quote,
.fig-bild7-in-quote * {
  background: #fff !important;
  mix-blend-mode: normal !important;
}
.fig-bild7-in-quote img,
img[src*="bild7"],
img[src*="Bild7"] {
  background: #fff !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.06); /* keep a soft shadow */
}
/* Remove any decorative overlays just in case */
.fig-bild7-in-quote::before,
.fig-bild7-in-quote::after {
  content: none !important;
  display: none !important;
}


/* === Fine divider line under Yoga‑Stile lead === */
#stile .spacer-line{
  border: 0;
  height: 1px;
  background: #e9e1d6;
  margin: 0.8rem 0 1rem;
}



/* === Fix: prevent inherited tint on quote section (Bild7 only) === */
#quote,
#quote .section,
#quote .container {
  background: #fff !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}