/* ===== Just Yoga Retreat – Stylesheet =====
   Concept: "a printed retreat invitation"
   Typography mirrors the flyer: a flowing script (Great Vibes, in place of
   the flyer's "Breathing") for the brand, with Montserrat for everything else.
   Hairline rules, tracked labels, centered date lockups.
   Palette grounded in Allgäu forest + Ayurveda earth. */

:root {
  --script: "Great Vibes", "Segoe Script", cursive;
  --sans: "Montserrat", system-ui, -apple-system, sans-serif;

  --paper: #f1ece3; /* warm oat – page background        */
  --paper-2: #e7e0d2; /* sand – tinted sections            */
  --white: #fbf9f4; /* warm white – card surfaces        */
  --forest: #2e3b31; /* deep evergreen – dark sections    */
  --forest-2: #3d4f41;
  --sage: #7c9472; /* soft green – structural accent    */
  --sage-dim: #65795b;
  --clay: #b27753; /* warm earth – small labels only    */
  --ink: #2b322b; /* body text                         */
  --muted: #5d655a; /* secondary text                    */
  --line: #d6cfc0; /* hairlines                         */

  --shadow: 0 22px 48px -28px rgba(46, 59, 49, 0.5);
  --shadow-sm: 0 10px 26px -18px rgba(46, 59, 49, 0.45);
  --radius: 8px;
  --radius-sm: 5px;
  --maxw: 1140px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.68;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Typography ===== */
h1,
h2,
h3 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.16;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.8rem, 3.3vw, 2.5rem);
}
h3 {
  font-size: 1.18rem;
  font-weight: 600;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--forest-2);
  text-underline-offset: 3px;
  text-decoration-color: var(--clay);
}
a:hover {
  color: var(--clay);
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: clamp(72px, 10vw, 116px) 0;
}
.section--tint {
  background: var(--paper-2);
}
.section--teal {
  background: var(--forest);
  color: #e7ece6;
}
.section--teal h2 {
  color: #fff;
}
[id] {
  scroll-margin-top: 90px;
}

/* Eyebrow – the recurring "invitation label" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clay);
  margin: 0 0 18px;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.center .eyebrow {
  justify-content: center;
}
.section--teal .eyebrow {
  color: #c9a98e;
}

.lead {
  font-size: 1.16rem;
  color: var(--muted);
}
.center {
  text-align: center;
}
.measure {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    transform 0.25s var(--ease),
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--forest);
  color: #fff;
}
.btn--primary:hover {
  background: var(--forest-2);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
.btn--solid-teal {
  background: var(--forest);
  color: #fff;
}
.btn--solid-teal:hover {
  background: var(--forest-2);
  color: #fff;
}

/* Hero primary CTA: warm cream so it stands out on the green photo */
.hero .btn--primary {
  background: var(--paper);
  color: var(--forest);
}
.hero .btn--primary:hover {
  background: #fff;
  color: var(--forest);
}

/* ===== Header / Nav ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 56px);
  transition:
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    padding 0.35s var(--ease);
}
/* Scrolled background lives on a ::before, NOT on the header itself.
   backdrop-filter on the header would make it the containing block for the
   fixed mobile nav (which then jumps out of view on scroll). The pseudo
   keeps the blur effect without affecting fixed-position descendants. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(241, 236, 227, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.site-header.scrolled::before {
  opacity: 1;
}
.site-header.scrolled {
  padding-top: 13px;
  padding-bottom: 13px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.brand__script {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.01em;
}
.brand__kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.62rem;
}
.site-header.scrolled .brand {
  color: var(--forest);
  text-shadow: none;
}
.nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  transition: opacity 0.2s;
}
.nav a:hover {
  opacity: 0.7;
}
.site-header.scrolled .nav a {
  color: var(--ink);
  text-shadow: none;
}
.nav .btn {
  padding: 10px 22px;
  text-shadow: none;
}
/* the Anmelden button keeps white text on its dark fill, scrolled or not */
.nav a.btn--primary,
.site-header.scrolled .nav a.btn--primary {
  color: #fff;
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: 0.3s;
}
.site-header.scrolled .nav-toggle span {
  background: var(--ink);
}
/* Hamburger wird zum X, sobald das mobile Menü offen ist.
   Die Striche bleiben weiß (auch im scrolled-Zustand), da sie auf dem
   grünen Menü-Panel liegen. */
.nav-toggle.is-open span,
.site-header.scrolled .nav-toggle.is-open span {
  background: #fff;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 120px 24px 96px;
  background:
    linear-gradient(
      180deg,
      rgba(30, 40, 33, 0.46),
      rgba(30, 40, 33, 0.3) 38%,
      rgba(30, 40, 33, 0.74)
    ),
    url("images/hof.jpg") center/cover no-repeat;
}
.hero__inner {
  max-width: 860px;
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.76rem;
  font-weight: 700;
  opacity: 0.92;
  margin: 0 0 40px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.42);
}
.hero__script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.6rem, 13vw, 8rem);
  line-height: 0.9;
}
.hero__kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5em;
  font-size: clamp(1rem, 2.6vw, 1.7rem);
  padding-left: 0.5em;
}
.hero__date {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  margin: 48px 0 10px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero__date::before,
.hero__date::after {
  content: "";
  width: clamp(26px, 8vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.hero__place {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0.88;
  margin: 0 0 40px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
  animation: bob 2.4s infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 9px);
  }
}

/* ===== Intro ===== */
.intro {
  text-align: center;
}
.intro .big {
  font-family: var(--sans);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.32;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.01em;
  max-width: 860px;
  margin: 0 auto 0.9em;
}
.intro .big em {
  font-style: italic;
  color: var(--sage-dim);
}

/* ===== Highlights (Das erwartet Dich) ===== */
.highlights {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
}
.highlight {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
/* drop the divider under the bottom-most card in each column */
.highlight:last-child,
.highlight:nth-last-child(2) {
  border-bottom: none;
}
.highlight__ic {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--sage-dim);
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.highlight__ic svg {
  width: 24px;
  height: 24px;
}
.highlight:hover .highlight__ic {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  transform: translateY(-3px);
}
.highlight h3 {
  font-size: 1.12rem;
  margin: 0 0 3px;
}
.highlight p {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .highlights {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  /* single column: restore divider on the second-to-last item */
  .highlight:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .highlight:last-child {
    border-bottom: none;
  }
}

/* ===== Split rows ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.split--rev .split__media {
  order: 2;
}
.split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split__media img {
  display: block;
  width: 100%;
  border: 0;
}
.split__media img.media-zoom {
  transform: scale(1.4);
  transform-origin: center center;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.checklist li {
  position: relative;
  padding: 0 0 14px 34px;
  color: var(--ink);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 17px;
  height: 9px;
  border-left: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  transform: rotate(-45deg);
}

/* ===== Gallery ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.gallery figure {
  margin: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery img {
  display: block;
  width: 100%;
  height: 222px;
  object-fit: cover;
  border: 0;
  transition: transform 0.6s var(--ease);
}
.gallery figure:hover img {
  transform: scale(1.05);
}
.gallery .wide {
  grid-column: span 2;
}

/* ===== Prices ===== */
.prices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.price-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.price-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.price-card .label {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.74rem;
  color: var(--sage-dim);
}
.price-card .amount {
  font-family: var(--sans);
  font-size: 2.7rem;
  font-weight: 700;
  color: var(--forest);
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
  line-height: 1;
}
.price-card p {
  color: var(--muted);
  margin: 0;
}

/* ===== Mantra band ===== */
.mantra {
  text-align: center;
}
.mantra blockquote {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 840px;
  color: #fff;
}
.mantra cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 26px;
  color: #c9a98e;
}

/* ===== Form ===== */
.form-wrap {
  max-width: 660px;
  margin: 44px auto 0;
}
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 48px);
}
.field {
  margin-bottom: 20px;
  text-align: left;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-dim);
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  transition:
    border 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(124, 148, 114, 0.22);
  background: #fff;
}
.field textarea {
  resize: vertical;
  min-height: 140px;
}
.form-card .btn {
  width: 100%;
  margin-top: 4px;
}
.form-note {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin: 16px 0 0;
}
.form-status {
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-weight: 600;
  display: none;
}
.form-status.ok {
  display: block;
  background: rgba(124, 148, 114, 0.18);
  color: var(--sage-dim);
}
.form-status.err {
  display: block;
  background: rgba(180, 80, 70, 0.12);
  color: #a9453c;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--forest);
  color: #c4cfc2;
  padding: 60px 0 38px;
  text-align: center;
}
.site-footer .fbrand {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.6rem;
  color: #fff;
  margin-bottom: 10px;
}
.site-footer p {
  margin: 5px 0;
  font-size: 0.9rem;
}
.site-footer a {
  color: #b8cab0;
  text-decoration-color: #c9a98e;
}

/* ===== Legal subpages (Impressum / Datenschutz) ===== */
/* Solid header variant: no hero behind it, so text must be dark from the start. */
.site-header--solid {
  position: fixed;
}
.site-header--solid::before {
  opacity: 1;
}
.site-header--solid .brand {
  color: var(--forest);
  text-shadow: none;
}
.legal-back {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  text-decoration-color: var(--clay);
}
.legal-back:hover {
  color: var(--clay);
}

.legal-main {
  padding: clamp(120px, 16vw, 168px) 0 clamp(56px, 8vw, 96px);
}
.legal-main .container {
  max-width: 760px;
}
.legal-main h1 {
  font-size: clamp(2rem, 5vw, 2.7rem);
  margin-bottom: 0.6em;
}
.legal-main h2 {
  font-size: 1.25rem;
  margin: 2em 0 0.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
}
.legal-main h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.legal-main h3 {
  font-size: 1.02rem;
  margin: 1.4em 0 0.3em;
}
.legal-main p,
.legal-main li {
  color: var(--ink);
}
.legal-main address {
  font-style: normal;
  line-height: 1.7;
  margin: 0 0 1.1em;
}
.legal-main ul {
  padding-left: 1.2em;
  margin: 0 0 1.1em;
}
.legal-main li {
  margin-bottom: 0.4em;
}
.legal-main .muted {
  color: var(--muted);
  font-size: 0.92rem;
}
/* Highlight unfilled placeholders so they are easy to spot and replace. */
.legal-main .ph {
  background: rgba(178, 119, 83, 0.14);
  color: var(--clay);
  padding: 0 0.3em;
  border-radius: 3px;
  font-weight: 600;
}
.legal-main .updated {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 2.5em;
}

/* Footer legal links */
.site-footer .footer-links {
  margin-top: 18px;
  font-size: 0.85rem;
}
.site-footer .footer-links a {
  margin: 0 10px;
}

/* ===== Reveal animation ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ===== Focus ===== */
:focus-visible {
  outline: 2px solid var(--sage-dim);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    background: var(--forest);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    padding: 40px;
  }
  .nav.open {
    transform: none;
  }
  .nav a {
    color: #fff !important;
    text-shadow: none;
    font-size: 1rem;
  }
  .nav-toggle {
    display: block;
    z-index: 60;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split--rev .split__media {
    order: 0;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery .wide {
    grid-column: span 2;
  }
  .prices {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .gallery img {
    height: 172px;
  }
  .hero__eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.66rem;
  }
  .hero__place {
    letter-spacing: 0.16em;
  }
  .hero__date {
    gap: 14px;
  }
}

/* ===== Reduced motion =====
   Disable decorative reveal/hover animation, but keep smooth in-page
   scrolling — the navigation relies on it and the user wants it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}