/* =========================================================
   Sadha Yoga — gemeinsames Stylesheet
   Farben und Schriften stehen alle hier oben. Wenn du etwas
   ändern willst, änderst du es hier einmal für alle Seiten.
   ========================================================= */

:root{
  --ink:        #1c1a17;   /* Fließtext und Überschriften */
  --muted:      #6b645c;   /* Nebentext */
  --paper:      #fbf9f6;   /* Seitenhintergrund */
  --paper-alt:  #f2ede5;   /* abgesetzte Abschnitte */
  --line:       #e0d8cc;   /* Trennlinien */
  --accent:     #a8642a;   /* Links und Buttons */
  --accent-dk:  #7d4a1e;

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Jost", system-ui, -apple-system, sans-serif;

  --wrap: 1140px;
  --narrow: 46rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--accent); }
a:hover{ color:var(--accent-dk); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.narrow{ width:min(100% - 2.5rem, var(--narrow)); margin-inline:auto; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.2;
  margin:0;
  letter-spacing:.005em;
}
h1{ font-size:clamp(2.4rem, 5.5vw, 3.8rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.8rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.75rem); }

p{ margin:0 0 1.1rem; }
p:last-child{ margin-bottom:0; }

.kicker{
  font-family:var(--body);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1rem;
}

.center{ text-align:center; }
.muted{ color:var(--muted); }

/* ---------- Kopfzeile ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(251,249,246,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.9rem 0;
}
.brand img{ height:44px; width:auto; }
.site-nav{ display:flex; gap:2rem; }
.site-nav a{
  color:var(--ink); text-decoration:none;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem 0; border-bottom:1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ border-bottom-color:var(--accent); }

/* Sprachumschalter */
.lang{
  display:flex; align-items:center; gap:.5rem;
  margin:0; font-size:.8rem; letter-spacing:.1em;
}
.lang a{ color:var(--muted); text-decoration:none; }
.lang a:hover{ color:var(--accent); }
.lang span[aria-hidden]{ color:var(--line); }
.lang__on{ color:var(--ink); font-weight:500; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--body); font-weight:400;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.95rem 2.2rem;
  text-decoration:none; cursor:pointer;
  border:1px solid var(--accent);
  background:var(--accent); color:#fff;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--accent-dk); border-color:var(--accent-dk); color:#fff; }
.btn--outline{ background:transparent; color:var(--accent); }
.btn--outline:hover{ background:var(--accent); color:#fff; }
.btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.75); }
.btn--light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(78vh, 640px);
  display:grid; place-items:center;
  text-align:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,14,.30) 0%, rgba(20,17,14,.52) 100%);
}
.hero__text{
  position:relative; z-index:1;
  color:#fff; padding:5rem 1.5rem;
  max-width:44rem;
}
.hero__text .kicker{ color:rgba(255,255,255,.8); }
.hero__text h1{ text-shadow:0 1px 24px rgba(0,0,0,.35); }
.hero__text p{ margin-top:1rem; font-size:1.1rem; color:rgba(255,255,255,.92); }
.hero__text .btn{ margin-top:2rem; }

.hero--slim{ min-height:min(52vh, 440px); }

/* ---------- Abschnitte ---------- */
.section{ padding:clamp(3.5rem, 8vw, 6rem) 0; }
.section--alt{ background:var(--paper-alt); }

/* Logo als Trenner, wie auf der bisherigen Seite */
.divider{ text-align:center; padding:clamp(2rem, 5vw, 3.2rem) 0; }
.divider img{ height:46px; width:auto; margin-inline:auto; opacity:.85; }

/* ---------- Zitat ---------- */
.quote{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1.1fr .9fr;
  align-items:center;
}
.quote blockquote{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.5rem, 3.2vw, 2.2rem);
  line-height:1.35;
  font-style:italic;
}
.quote cite{
  display:block; margin-top:1.5rem;
  font-family:var(--body); font-style:normal;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.quote img{ width:100%; height:auto; }

/* ---------- Drei Vorteile ---------- */
.pillars{
  display:grid; gap:clamp(2rem, 4vw, 3.5rem);
  grid-template-columns:repeat(3, 1fr);
  margin-top:3rem;
}
.pillar h3{ margin-bottom:.8rem; }
.pillar p{ color:var(--muted); font-size:.98rem; }
.pillar__rule{ width:2rem; height:1px; background:var(--accent); margin-bottom:1.3rem; }

/* ---------- Lehrer ---------- */
.teacher{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  max-width:60rem; margin-inline:auto;
}
/* Rundes Porträt. Wirkt der Bildausschnitt ungünstig, den zweiten
   Wert bei object-position ändern: kleiner = weiter nach oben. */
.teacher img{
  width:min(100%, 340px);
  aspect-ratio:1;
  height:auto;
  object-fit:cover;
  object-position:center 25%;
  border-radius:50%;
  justify-self:center;
}
.teacher h3{ margin-bottom:.3rem; }
.teacher__role{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.6rem;
}
.creds{ list-style:none; margin:0 0 2rem; padding:0; }
.creds li{
  padding:.85rem 0; border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.creds li:first-child{ border-top:1px solid var(--line); }
.creds strong{ font-weight:500; display:block; }
.creds span{ color:var(--muted); font-size:.88rem; }

/* ---------- Kurskarten ---------- */
.courses{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
}
.course{
  background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.course__body{ padding:1.9rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }

/* Bild oben in der Kurskarte. Karten ohne Bild bleiben unverändert nutzbar. */
.course__media{
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:var(--paper-alt);
  border-bottom:1px solid var(--line);
}
.course__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.course:hover .course__media img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){
  .course:hover .course__media img{ transform:none; }
}

.course__tag{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.course h3{ font-size:1.5rem; }
.course__meta{ font-size:.9rem; color:var(--muted); }
.course p{ font-size:.95rem; color:var(--muted); flex:1; }
.course__price{ font-family:var(--display); font-size:1.7rem; }
.course__price{
  font-family:var(--body); font-weight:500;
  font-size:1.45rem; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.course .btn{ align-self:flex-start; margin-top:.5rem; }

/* Zitate innerhalb einer Kurskarte */
.quotes{ display:grid; gap:1.4rem; margin:1.4rem 0 .3rem; }
.quotes blockquote{
  margin:0; padding-left:1.3rem;
  border-left:2px solid var(--accent);
  font-family:var(--display); font-style:italic;
  font-size:1.12rem; line-height:1.45;
  color:var(--ink);
}
.quotes cite{
  display:block; margin-top:.7rem;
  font-family:var(--body); font-style:normal;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

.quotes--closing{ margin:2rem 0 0; }

.price-block{
  margin-top:2rem; padding-top:1.4rem;
  border-top:2px solid var(--ink);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.price-block__label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .25rem;
}
.price-block__amount{
  font-family:var(--body); font-weight:500;
  font-size:2.6rem; line-height:1; letter-spacing:-.015em;
  margin:0; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.price-block__note{ font-size:.82rem; color:var(--muted); margin:.4rem 0 0; }
.price-block .btn{ align-self:center; margin-top:0; }

@media (max-width:520px){
  .price-block{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .price-block .btn{ align-self:stretch; text-align:center; }
}


/* ---------- Einzelner Kurs, hervorgehoben ----------
   Wird verwendet, solange nur ein Termin ausgeschrieben ist.
   Bild links, alle Details rechts.                            */
.course--featured{
  grid-column:1 / -1;          /* immer über die volle Rasterbreite */
  display:grid;
  grid-template-columns:1fr 1.15fr;
  max-width:64rem;
  margin:0 auto 1rem;
}
.course--featured .course__media{
  aspect-ratio:auto;
  height:100%;
  min-height:22rem;
  border-bottom:none;
  border-right:1px solid var(--line);
}
.course--featured .course__body{ padding:2.4rem 2.2rem; gap:.7rem; }
.course--featured h3{ font-size:2.1rem; }

/* Ort, Termin, Adresse, Sprache */
.facts{ margin:1.4rem 0 0; }
.facts div{
  display:grid; grid-template-columns:6.5rem 1fr;
  gap:.9rem; padding:.7rem 0;
  border-bottom:1px solid var(--line); font-size:.95rem;
}
.facts div:first-child{ border-top:1px solid var(--line); }
.facts dt{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-top:.28rem;
}
.facts dd{ margin:0; }

/* Sitzungsplan */
.schedule{ margin:1.8rem 0 .4rem; }
.schedule__day{ margin-bottom:1.1rem; }
.schedule__day:last-child{ margin-bottom:0; }
.schedule h4{
  font-family:var(--body); font-weight:500;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 .5rem; color:var(--accent);
}
.schedule ol{ list-style:none; margin:0; padding:0; }
.schedule li{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.4rem 0; font-size:.95rem;
  border-bottom:1px dotted var(--line);
}
.schedule li span:first-child{ color:var(--muted); }
.schedule li span:last-child{ font-variant-numeric:tabular-nums; }

@media (max-width:820px){
  .course--featured{ grid-template-columns:1fr; }
  .course--featured .course__media{
    aspect-ratio:3 / 2; min-height:0;
    border-right:none; border-bottom:1px solid var(--line);
  }
  .course--featured .course__body{ padding:1.9rem 1.6rem; }
  .facts div{ grid-template-columns:1fr; gap:.15rem; }
}


/* ---------- Formular ---------- */
.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.field{ display:grid; gap:.4rem; }
.field label{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.field input, .field textarea{
  font-family:var(--body); font-size:1rem; font-weight:300; color:var(--ink);
  background:#fff; border:1px solid var(--line);
  padding:.8rem .95rem;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.field textarea{ min-height:9rem; resize:vertical; }
.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.85rem; color:var(--muted); }
.consent input{ margin-top:.45rem; }

/* ---------- Fußzeile ---------- */
.site-foot{
  background:var(--paper-alt);
  border-top:1px solid var(--line);
  padding:3.5rem 0 2.5rem;
  text-align:center;
}
.site-foot__logo{ height:56px; width:auto; margin:0 auto 2rem; }
.foot-nav{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:1.6rem; margin-bottom:2.5rem;
}
.foot-nav a{
  color:var(--ink); text-decoration:none;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}
.foot-nav a:hover{ color:var(--accent); }
/* Zum Anpassen nur den Wert 240px ändern. */
.site-foot__partner{
  width:min(240px, 75%);
  height:auto;
  margin:0 auto 2rem;
  opacity:.9;
}
@media (max-width:520px){
  .site-foot__partner{ width:min(200px, 80%); }
}
.site-foot__contact{ font-size:.95rem; margin-bottom:1.8rem; }
.site-foot__contact .kicker{ margin-bottom:.4rem; }
.copyright{ font-size:.78rem; color:var(--muted); letter-spacing:.04em; }

/* ---------- Rechtstexte ---------- */
.legal h2{ font-size:1.5rem; margin:2.5rem 0 .7rem; }
.legal .note{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:1.1rem 1.3rem; font-size:.92rem; color:var(--muted); margin-bottom:2rem;
}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .quote{ grid-template-columns:1fr; }
  .quote img{ order:-1; }
  .pillars{ grid-template-columns:1fr; gap:2.5rem; }
  .teacher{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .site-head__inner{ flex-direction:column; gap:.8rem; }
  .site-nav{ gap:1.4rem; font-size:.8rem; }
  .brand img{ height:38px; }
  .hero{ min-height:min(70vh, 520px); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}