/* ============================================================
   WORLD SOUL — Retreat Website
   Gemeinsames Stylesheet für alle Seiten.

   Aufbau:
   1. Farben & Variablen  (hier änderst du Farben zentral)
   2. Grund-Styles / Reset
   3. Typografie
   4. Layout-Helfer
   5. Navigation
   6. Buttons
   7. Sektionen (Hero, Karten, grüne Blöcke, ...)
   8. Footer
   9. Buchen- & Schedule-Seite
   10. Responsive / Handy
   ============================================================ */

/* 0. SCHRIFTEN (selbst gehostet – keine Google-Fonts-Verbindung nötig)
   Dateien liegen in assets/fonts/. Lizenz: SIL Open Font License. ------ */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/cormorant-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/cormorant-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/cormorant-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/cormorant-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/inter-700.woff2") format("woff2");
}

/* 1. FARBEN & VARIABLEN ------------------------------------- */
:root {
  --cream:        #e7dfce;   /* warmer Creme-Hintergrund (Haupt) */
  --cream-warm:   #d3c7b0;   /* wärmerer Sand-Ton (deutlicher)   */
  --card:         #efe9dc;   /* Karten & Felder: warmes Off-White, nie reinweiß */
  --cocoa:        #6d5c46;   /* warmes, helleres Braun (aus dem Hero-Bild) für dunkle Blöcke */
  --forest:       #2b3524;   /* tiefes Waldgrün          */
  --forest-soft:  #3a4632;   /* etwas helleres Grün      */
  --ink:          #2a2823;   /* dunkler Text             */
  --ink-soft:     #6c665b;   /* gedämpfter Text          */
  --gold:         #d9a441;   /* Honig-Gold Akzent        */
  --line:         rgba(42,40,35,0.14);

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1200px;            /* maximale Inhaltsbreite    */
  --gutter: clamp(20px, 5vw, 72px);
}

/* 2. GRUND-STYLES ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* 3. TYPOGRAFIE -------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.01em;
}

.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.05;
}

h2.section-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  text-align: center;
}
/* große "Mind · Body · Spirit · Community"-Überschrift: größer + mehr Wortabstand */
h2.mbsc-title {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  word-spacing: 0.55em;
  margin-top: clamp(30px, 5vw, 72px);   /* mehr Abstand zu den kleinen Wörtern darüber */
  text-wrap: balance;   /* falls Umbruch nötig: ausgewogen, nie ein Wort allein */
}

/* kleines Label über Überschriften (z.B. "THE RETREAT") */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.eyebrow.center { text-align: center; }

.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
}

.muted { color: var(--ink-soft); }

/* 4. LAYOUT-HELFER ----------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide { max-width: 1440px; }

section { padding: clamp(64px, 11vw, 140px) 0; }

.text-center { text-align: center; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 5. NAVIGATION -------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
/* Zustand, wenn man nach unten gescrollt hat (per JS gesetzt) */
.nav.scrolled {
  background: rgba(231,223,206,0.92);
  backdrop-filter: blur(10px);
  padding: 14px var(--gutter);
  box-shadow: 0 1px 0 var(--line);
}

.nav-logo {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
}
.nav-center { display: flex; gap: 40px; }
.nav-link {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.3s ease;
}
.nav-link:hover { color: #fff; }

/* Auf hellem Hintergrund (gescrollt) Text dunkel */
.nav.scrolled .nav-logo,
.nav.scrolled .nav-link { color: var(--ink); }
.nav.scrolled .nav-link:hover { color: var(--gold); }

/* Unterseiten (Buchen / Schedule): Nav immer auf hellem Grund lesbar */
.nav-solid { position: fixed; background: rgba(231,223,206,0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav-solid .nav-logo, .nav-solid .nav-link { color: var(--ink); }
.nav-solid .nav-link:hover { color: var(--gold); }
.nav-solid .nav-book { background: var(--forest); color: var(--cream); }
.nav-solid .nav-toggle span { background: var(--ink); }

.nav-book {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  padding: 11px 22px;
  border-radius: 999px;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.nav-book:hover { transform: translateY(-2px); background: #fff; }
.nav.scrolled .nav-book { background: var(--forest); color: var(--cream); }

/* mobiles Menü: auf Desktop komplett ausgeblendet */
.mobile-menu { display: none; }

/* Hamburger (nur Handy sichtbar) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  transition: all 0.3s ease;
}
.nav.scrolled .nav-toggle span { background: var(--ink); }

/* 6. BUTTONS ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark  { background: var(--forest); color: var(--cream); }
.btn-dark:hover { background: var(--forest-soft); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn .arrow { transition: transform 0.3s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* 7. SEKTIONEN --------------------------------------------- */

/* Hero (großes Bild oben) */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  padding: 0 var(--gutter);
}
.hero::after {   /* Verdunkelung, damit weiße Schrift lesbar ist */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,14,0.45) 0%, rgba(20,18,14,0.15) 40%, rgba(20,18,14,0.55) 100%);
  z-index: 1;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.hero .eyebrow { color: rgba(255,255,255,0.85); }
/* Umbruch-Steuerung der Hero-Kategorienzeile */
.m-break { display: none; }
.hero .display {
  max-width: none;
  font-size: clamp(2.7rem, 7.8vw, 6rem);   /* größer, ragt weiter ins Bild */
  line-height: 1.06;
}
.hero-foot {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 6vh, 64px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-foot .lead { color: #fff; max-width: 32ch; font-style: italic; }
.hero-foot .explore {
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px; color:#fff;
}

/* Intro-Satz (zentriert, groß) */
.statement { text-align: center; }
.brand-logo {
  display: block; width: clamp(120px, 15vw, 175px); height: auto;
  margin: 0 auto clamp(22px, 4vw, 38px);
}
.statement .big {
  font-size: clamp(2.15rem, 4.8vw, 3.7rem);
  max-width: 34ch;
  margin: 0 auto;
}
.pillars {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 12px 30px; margin-top: 2.6rem;
  font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft);
}
.pillars .word { text-indent: 0.32em; } /* letter-spacing rechts ausgleichen für optische Mitte */
.pillars .sep { color: var(--ink-soft); opacity: 0.5; }

/* Karten-Raster MIND / BODY / SPIRIT / COMMUNITY */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(40px, 6vw, 70px);
}
.card {
  position: relative;
  aspect-ratio: 3 / 2.55;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.2s ease;
}
.card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(15,14,11,0.78) 100%);
}
.card:hover img { transform: scale(1.06); }
.card-body { position: relative; z-index: 2; padding: clamp(20px, 3vw, 34px); }
.card-body h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.card-body p {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  text-transform: none;
}

/* Bild-Text-Split ("Because the most lasting shift...") */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}
.split-media { min-height: 520px; position: relative; }
.split-media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.split-text {
  background: var(--cream-warm);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 90px);
}
.split-text h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); max-width: 16ch; }
.split-text .lead { margin-top: 1.6rem; max-width: 40ch; }

/* Grüner Block */
.dark {
  background: var(--forest);
  color: var(--cream);
}
.dark .eyebrow { color: rgba(243,238,230,0.6); }
.dark .muted { color: rgba(243,238,230,0.72); }
.dark .lead { color: rgba(243,238,230,0.95); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }
.dark .interconnect { color: rgba(243,238,230,0.72); }
.dark .signature,
.dark .brand,
.closing.dark .signature,
.closing.dark .brand { color: rgba(243,238,230,0.9); }
.dark .small,
.dark .prose p.small { color: rgba(243,238,230,0.9); }

/* warme dunkle Variante (Kakao/Braun statt Grün) */
.dark.dark--cocoa { background: var(--cocoa); }
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(40px, 6vw, 70px);
}
.value .num {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; color: rgba(237,231,221,0.5);
}
.value h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 14px 0 10px; }
.value p { margin: 0; font-size: 0.95rem; color: rgba(237,231,221,0.72); }

/* "A return to what truly matters" – Textblock */
.prose { max-width: 620px; margin: 0 auto; }
.prose .lead + .lead { margin-top: 1.4rem; }
.prose p.small {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}

/* Aktivitäten-Liste */
.activities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  max-width: 900px; margin: clamp(40px,6vw,64px) auto 0;
}
.activity h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 12px;
}
.activity p { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5; }

/* Transformation-Wörter */
.transform-words {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  letter-spacing: 0.04em;
}

/* Core values (dreispaltig hell) */
.corevals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 50px); text-align: center;
  margin-top: clamp(30px, 4vw, 50px);
}
.coreval h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-serif);
}
.coreval p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.interconnect {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(40px, 6vw, 70px);
  font-style: italic;
}

/* Abschluss-CTA */
.closing { text-align: center; }
.closing .display { max-width: 16ch; margin: 0 auto 1.4rem; }
.closing .muted { max-width: 46ch; margin: 0 auto 2.2rem; }
.closing .signature {
  margin-top: 2.6rem; font-family: var(--font-serif); font-style: italic; color: var(--ink-soft);
}
.closing .brand {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; margin-top: 1.2rem; color: var(--ink-soft);
}

/* Slider (Unterkunft / The Space) – horizontal durchblättern mit Pfeilen.
   Weitere Bilder einfach als <img class="slide"> ergänzen. */
.slider {
  position: relative;
  max-width: 1100px;
  margin: clamp(40px, 6vw, 64px) auto 0;
}
.slider-track {
  display: flex;
  gap: clamp(12px, 1.5vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider .slide {
  flex: 0 0 auto;
  height: clamp(320px, 56vh, 560px);
  width: auto;
  max-width: none;          /* globales img max-width:100% aufheben, sonst gestaucht */
  border-radius: 6px;
  scroll-snap-align: center;
  display: block;
}
.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(43,53,36,0.82); color: var(--cream);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.slider-btn:hover { background: var(--forest); }
.slider-btn svg { width: 22px; height: 22px; }
.slider-btn.prev { left: clamp(6px, 1.5vw, 16px); }
.slider-btn.next { right: clamp(6px, 1.5vw, 16px); }

/* Gästehaus-Hinweis + Karte */
.stay-info {
  max-width: 620px; margin: clamp(32px, 5vw, 46px) auto 0; text-align: center;
  font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55; color: var(--ink);
}
.stay-info a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.map {
  max-width: 1100px; margin: clamp(24px, 4vw, 36px) auto 0;
}
.map img {
  width: 100%; height: auto; border-radius: 6px; display: block;
}
.map-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.map-link:hover { color: var(--gold); }

/* Team / Gastgeber */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px);
  max-width: 960px; margin: clamp(40px, 6vw, 70px) auto 0;
}
.team-card { text-align: left; }
.team-photo {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; margin-bottom: 20px;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-card .role {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px;
}
.team-card h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.team-card p { margin: 12px 0 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.65; }

/* FAQ (Akkordeon) */
.faq { max-width: 760px; margin: clamp(36px, 5vw, 60px) auto 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left; color: var(--ink);
  font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.faq-icon { flex: none; font-family: var(--font-sans); font-size: 1.4rem; line-height: 1; color: var(--ink-soft); transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
}
.faq-a-inner { padding: 0 4px 22px; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; max-width: 62ch; }

/* 8. FOOTER ------------------------------------------------ */
.footer {
  background: var(--forest);
  color: rgba(243,238,230,0.85);
  padding: 44px var(--gutter);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  flex-wrap: wrap;
}
.footer .brand {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.footer .tag { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; margin: 8px 0 0; }
.footer-links {
  display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: center;
}
.footer-links a {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,238,230,0.8);
  transition: color 0.3s ease;
}
.footer-links a:hover { color: var(--gold); }
.footer .copy { font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(243,238,230,0.55); }

/* Rechtsseiten (Impressum / Datenschutz) */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 2.4rem 0 0.6rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.legal a { color: var(--ink); text-decoration: underline; }
.legal ul { padding-left: 1.2rem; }
.legal .note {
  background: var(--cream-warm); border-left: 3px solid var(--gold);
  padding: 16px 20px; border-radius: 6px; margin: 2rem 0; font-size: 0.92rem;
}

/* 9. BUCHEN- & SCHEDULE-SEITE ------------------------------ */
.page-hero {
  min-height: 52vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 140px var(--gutter) 60px;
  background: var(--cream-warm);
}
.page-hero .display { max-width: 18ch; }
.page-hero .muted { max-width: 42ch; margin-top: 1.2rem; }

/* dunkle Kopfzeile für Unterseiten (z.B. Booking) – etwas heller als die Blöcke */
.page-hero--dark { background: #6e5c44; color: var(--cream); }
.page-hero--dark .display { color: var(--cream); }
.page-hero--dark .eyebrow { color: rgba(243,238,230,0.6); }
.page-hero--dark .muted { color: rgba(243,238,230,0.75); }

/* grüne Kopfzeile (z.B. Retreat Schedule) */
.page-hero--forest { background: var(--forest); color: var(--cream); }
.page-hero--forest .display { color: var(--cream); }
.page-hero--forest .eyebrow { color: rgba(243,238,230,0.6); }
.page-hero--forest .muted { color: rgba(243,238,230,0.78); }

/* Datumsanzeige (Retreat-Termin) */
.dates-line {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  letter-spacing: 0.03em;
  color: var(--gold);
  margin: 0;
}

/* Preis-/Buchungskarte */
.booking-wrap { max-width: 560px; margin: 0 auto; }
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(30px, 5vw, 48px);
  text-align: center;
  box-shadow: 0 30px 60px -40px rgba(42,40,35,0.4);
}
.price-card .eyebrow { margin-bottom: 0.8rem; }
.price-card .price {
  font-family: var(--font-serif); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1;
}
.price-card .price small {
  display: block; font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.1em;
  color: var(--ink-soft); margin-top: 8px; text-transform: uppercase;
}
.price-options {
  display: flex; justify-content: center; gap: clamp(16px, 4vw, 40px);
  margin: 6px 0 4px; flex-wrap: wrap;
}
.price-opt { text-align: center; }
.price-opt .amt { display: block; font-family: var(--font-serif); font-size: clamp(2.1rem, 5vw, 2.9rem); line-height: 1; }
.price-opt .lbl {
  display: block; margin-top: 8px; font-family: var(--font-sans);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.price-roomnote {
  text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin: 10px 0 0;
}
.price-incl {
  text-align: center; font-family: var(--font-sans); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0 0;
}
.price-card ul {
  list-style: none; padding: 0; margin: 28px 0;
  text-align: left; display: grid; gap: 12px;
}
.price-card li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.98rem; color: var(--ink);
}
.price-card li::before { content: "✦"; color: var(--gold); flex: none; }
.price-card .btn { width: 100%; justify-content: center; }
.price-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 16px; }

/* WhatsApp-Kontakt (zwei Hosts) */
.wa-hosts {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px); margin-top: 40px;
}
.wa-host { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wa-btn { min-width: 220px; justify-content: center; }
.wa-btn svg { width: 20px; height: 20px; }
.wa-name {
  margin: 0; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.wa-name strong {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.2rem; color: var(--ink);
}
.wa-name span {
  font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-soft);
}
.contact-emails {
  text-align: center; margin: 34px auto 0; max-width: 46ch;
  font-size: 0.95rem; color: var(--ink-soft);
}
.contact-emails a { color: var(--ink); text-decoration: underline; }
.contact-emails a:hover { color: var(--gold); }

/* einfaches Kontakt-/Anfrageformular */
.form { display: grid; gap: 16px; margin-top: 40px; text-align: left; }
.form label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.form input, .form textarea {
  width: 100%; font-family: var(--font-sans); font-size: 1rem;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }

/* Schedule / Tagesablauf */
.schedule-list { max-width: 720px; margin: 0 auto; display: grid; gap: 0; }
.schedule-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: 1px solid var(--line); }
.schedule-row .time {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 6px;
}
.schedule-row h3 { font-size: 1.5rem; }
.schedule-row .opt {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  vertical-align: middle;
}
.schedule-row p { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.98rem; }

/* 10. RESPONSIVE / HANDY ----------------------------------- */
@media (max-width: 820px) {
  .nav-center, .nav > .nav-book { display: none; }
  .nav-toggle { display: block; }

  /* mobiles Menü */
  .mobile-menu {
    position: fixed; inset: 0;
    background: var(--forest);
    color: var(--cream);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 90px var(--gutter) 56px;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.7,0,0.2,1);
    z-index: 105;
  }
  .mobile-menu.open { transform: translateY(0); }
  .mobile-menu-inner {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  }
  .mobile-menu .mm-link {
    font-family: var(--font-serif); font-size: 2.5rem; line-height: 1.45; color: var(--cream);
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease;
  }
  .mobile-menu .mm-link:active { color: var(--gold); }
  .mobile-menu.open .mm-link { opacity: 1; transform: none; }
  .mobile-menu.open .mm-link:nth-child(1) { transition-delay: 0.10s; }
  .mobile-menu.open .mm-link:nth-child(2) { transition-delay: 0.17s; }
  .mobile-menu .mm-cta {
    margin-top: 30px;
    font-family: var(--font-sans); font-size: 0.75rem; color: var(--ink);
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s, background 0.3s ease;
  }
  .mobile-menu.open .mm-cta { opacity: 1; transform: none; }
  .mobile-menu-tag {
    position: absolute; left: 0; right: 0; bottom: 44px; margin: 0;
    text-align: center; font-family: var(--font-serif); font-style: italic;
    font-size: 1.05rem; color: rgba(243,238,230,0.6);
    opacity: 0; transition: opacity 0.6s ease 0.34s;
  }
  .mobile-menu.open .mobile-menu-tag { opacity: 1; }

  /* vier kleine Wörter auf dem Handy in eine Zeile */
  .pillars { gap: 5px 10px; font-size: 0.54rem; letter-spacing: 0.14em; }

  .cards { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 320px; order: -1; }
  .values { grid-template-columns: 1fr; text-align: center; }
  .activities { grid-template-columns: 1fr; }
  .corevals { grid-template-columns: 1fr; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .schedule-row { grid-template-columns: 1fr; gap: 6px; }
  .booking-wrap { padding: 0 var(--gutter); }   /* Seitenabstand auf dem Handy */
  /* Hero-Kategorienzeile: "Culture · Inner Discovery" gemeinsam in Zeile 2 */
  .d-sep { display: none; }
  .m-break { display: block; }
  .schedule-list,
  .legal { padding-left: var(--gutter); padding-right: var(--gutter); }
  .team { grid-template-columns: 1fr; }
}

/* Menü-Icon zu X animieren */
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--cream); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--cream); }

/* Bewegung reduzieren, wenn vom Nutzer gewünscht */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}