/* ==========================================================================
   MELLI'S YOGA — STYLESHEET
   Stil: "Der Pfad" — editorial, ruhig, mit durchlaufendem Weg-Signature-Element
   Türkis als Highlight-Farbe (Buttons, Links, Akzent-Flächen)
   Coralle als zweiter, zurückhaltenderer Akzent

   AUFBAU DIESER DATEI:
   1. Grundfarben & Schriften (hier änderst du z.B. die Farben zentral)
   2. Allgemeine Basis-Regeln
   3. Navigation
   4. Wiederkehrende Bausteine (Buttons, Fotos, Karten, Trenner)
   5. Footer
   6. Der Pfad — Signature-Element (Wegline + Wegpunkte)
   7. Seiten-spezifische Bereiche
   ========================================================================== */

/* 1. GRUNDFARBEN & SCHRIFTEN --------------------------------------------- */
/* Bewusste Entscheidung: Systemschriften statt Google Fonts.
   Dadurch lädt die Seite KEINE Schrift von einem externen Server nach —
   das spart einen Absatz in der Datenschutzerklärung und macht die Seite
   unabhängig von Google. Georgia (Serife) und die System-UI-Schrift
   (Segoe UI / San Francisco / Roboto, je nach Betriebssystem) sind auf
   praktisch jedem Gerät bereits vorhanden. */
:root {
  --cream:        #f7f6f2;   /* Hintergrund, hell & frisch statt schwerem Beige */
  --paper:        #ffffff;   /* Karten/Foto-Weiß */
  --text-dunkel:  #52564f;   /* Haupttext, neutraleres Dunkelgrau statt Braun */
  --text-hell:    #838a83;   /* Fließtext, heller, kühler */
  --tuerkis:      #5da39c;   /* Haupt-Highlight */
  --tuerkis-dunkel: #0e5e68; /* für Text auf hellem Grund / kräftige Flächen */
  --tuerkis-hell: #e4f0ee;   /* zarter Flächenton für Akzent-Bereiche */
  --coralle:      #c17a5e;   /* zweiter, zurückhaltender Akzent */
  --linie:        #e5e7e0;   /* zarte Trennlinien */
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--cream);
  color: var(--text-dunkel);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
  position: relative;
}

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

.wrap { max-width: 1180px; margin:0 auto; padding: 0 6vw 0 calc(6vw + 34px); }

h1, h2, h3 { font-family:Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-weight:500; color: var(--text-dunkel); }

.eyebrow {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--coralle);
  margin-bottom: 12px;
  display:block;
}

.eyebrow.coralle { color: var(--coralle); }
.eyebrow.tuerkis { color: var(--tuerkis-dunkel); }

p.lead {
  font-size: 17px;
  color: var(--text-hell);
  max-width: 46ch;
  line-height: 1.9;
}

/* 3. NAVIGATION ------------------------------------------------------------ */
header.site-nav {
  background: var(--tuerkis-dunkel);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 13px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo-lockup { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-lockup img {
  width:40px; height:40px; border-radius:50%;
  transform: rotate(-4deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.logo-lockup span {
  font-family:Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-size: 21px;
  color: var(--text-dunkel);
}
header.site-nav .logo-lockup span { color: #fff; }

nav.main-links ul { list-style:none; display:flex; gap:2rem; }
nav.main-links a {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
nav.main-links a:hover,
nav.main-links a.active {
  color: #fff;
  border-color: var(--coralle);
}

/* Mobile Navigation: einfacher Umbruch ohne JavaScript */
@media (max-width: 720px) {
  header.site-nav { flex-direction:column; gap:18px; text-align:center; }
  nav.main-links ul { flex-wrap:wrap; justify-content:center; gap:1.2rem 1.6rem; }
}

/* 4. WIEDERKEHRENDE BAUSTEINE ---------------------------------------------- */

/* Buttons */
.btn {
  display:inline-block;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration:none;
  padding: 15px 32px;
  border-radius: 2px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary {
  background: var(--tuerkis-dunkel);
  color: #fff;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(14,94,104,0.3); }
.btn-secondary {
  background:none;
  color: var(--tuerkis-dunkel);
  font-style: normal;
  border-bottom: 2px solid var(--coralle);
  padding: 4px 2px 6px;
  border-radius: 0;
}

/* Foto-Darstellung: organischer "Riss"-Zuschnitt statt Polaroid-Rahmen */
.polaroid {
  display:inline-block;
  position: relative;
}
.polaroid img, .polaroid .platzhalter-bild {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display:block;
  clip-path: polygon(5% 0%, 100% 3%, 96% 97%, 2% 100%);
  box-shadow: 0 20px 40px rgba(14,94,104,0.16);
}
.polaroid .platzhalter-bild {
  background: linear-gradient(160deg, var(--tuerkis-hell), #e8ded0);
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-style:italic; color: var(--text-hell); font-size: 19px;
  text-align:center; padding: 20px;
}
.polaroid figcaption {
  position:absolute; bottom:-14px; right:14px;
  background: var(--coralle); color:#fff;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight:600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 2px;
}
.polaroid.dreh-links, .polaroid.dreh-rechts { transform:none; }

/* Handgezeichneter Trenner zwischen Sektionen */
.trenner { display:flex; justify-content:center; padding: 10px 0 6px; }
.trenner svg { width: 160px; height: 20px; }

/* Akzent-Fläche (Türkis, zart) für Zitat/Highlight-Bereiche */
.akzent-flaeche {
  background: var(--tuerkis-hell);
  border-radius: 4px;
  padding: 60px 6vw;
  text-align:center;
}
.akzent-flaeche blockquote {
  font-family:Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--tuerkis-dunkel);
  max-width: 46ch;
  margin: 0 auto 14px;
  line-height: 1.6;
}
.akzent-flaeche cite {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-style:normal;
  font-weight: 600;
  font-size: 14px;
  color: var(--coralle);
}

/* Karten (für Kurse / Werte / Specials) */
.karten-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}
.karte {
  background: var(--paper);
  border-radius: 2px;
  padding: 30px 26px;
  border-left: 3px solid var(--tuerkis);
}
.karte.coralle-linie { border-left-color: var(--coralle); }
.karte-icon { width:34px; height:34px; margin-bottom:14px; display:block; }
.karte h3 { font-family:Georgia, 'Iowan Old Style', 'Times New Roman', serif; font-style:italic; font-weight:500; font-size: 20px; margin-bottom: 10px; }
.karte .meta {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--tuerkis-dunkel);
  font-size: 13px;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  display:block;
}
.karte p { color: var(--text-hell); font-size: 15px; line-height:1.75; }

section { padding: 8vh 0; }
section.eng { padding: 5vh 0; }

.section-kopf { text-align:center; margin-bottom: 6vh; }
.section-kopf h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight:400; }

/* Abschließende CTA-Bänder */
.cta-band {
  background: var(--tuerkis-dunkel);
  color: #f7f6f2;
  text-align:center;
  padding: 8vh 6vw;
  border-radius: 4px;
}
.cta-band h2 { color:#fff; font-style: italic; font-weight:400; margin-bottom: 18px; }
.cta-band .btn-primary { background: var(--coralle); }

/* 5. FOOTER ----------------------------------------------------------------- */
footer.site-footer {
  padding: 6vh 6vw 5vh;
  text-align:center;
  color: var(--text-hell);
  font-size: 14px;
}
footer.site-footer .logo-lockup { justify-content:center; margin-bottom: 18px; }
footer.site-footer nav.main-links { margin-bottom: 18px; }
footer.site-footer nav.main-links ul { justify-content:center; }
footer.site-footer .social a { margin: 0 8px; text-decoration:underline; color: var(--tuerkis-dunkel); }
footer.site-footer .copyright { margin-top: 20px; font-size:12px; color:#a89f8f; }

/* 6. DER PFAD — SIGNATURE-ELEMENT ------------------------------------------ */
/* Eine dünne Linie läuft am linken Rand die ganze Seite entlang, mit kleinen
   Wegpunkten an jedem Abschnitt. Sinnbild für einen langen, persönlichen Weg.
   Zieht sich beim Scrollen selbst nach — rein dekorativ, ohne Einfluss auf den Inhalt. */
[id^="pfad-svg"]{position:absolute; left:18px; top:0; width:3px; height:100%; z-index:1; pointer-events:none;}
[id^="pfad-svg"] path{fill:none; stroke:var(--tuerkis); stroke-width:2; stroke-linecap:round;}
.waypoint{position:absolute; left:12px; width:15px; height:15px; border-radius:50%; background:var(--cream); border:2.5px solid var(--coralle); z-index:2;}
@media (max-width: 820px) {
  [id^="pfad-svg"], .waypoint { display:none; }
  .wrap { padding-left: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
  [id^="pfad-svg"] path { stroke-dashoffset: 0 !important; }
}

/* 8. RECHTSTEXT-SEITEN (Impressum, Datenschutz) ----------------------------- */
/* Bewusst zurückhaltend gestaltet: kein Pfad-Element, keine Karten, keine
   Fotos, kein CTA - nur gut lesbarer Fließtext im gleichen Look wie der Rest
   der Seite (gleiche Farben/Schrift), aber ohne den "Marketing"-Baukasten. */
.rechtstext-hero {
  padding: 8vh 0 5vh;
  text-align: center;
}
.rechtstext-hero h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 400;
}
.rechtstext-stand {
  color: var(--text-hell);
  font-size: 14px;
  margin-top: 10px;
}
.rechtstext {
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 12vh;
  color: var(--text-dunkel);
}
.rechtstext h2 {
  font-size: 1.4rem;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.6em; margin-bottom: 0.5em; }
.rechtstext p, .rechtstext li { font-size: 15.5px; line-height: 1.85; color: var(--text-dunkel); }
.rechtstext ul, .rechtstext ol { margin: 0.8em 0 1.2em 1.3em; }
.rechtstext li { margin-bottom: 0.5em; }
.rechtstext a { color: var(--tuerkis-dunkel); text-decoration: underline; }
.rechtstext .index { list-style:none; margin:0; padding:0; }
.rechtstext .index li { margin-bottom: 6px; }
.rechtstext .seal { margin-top: 3em; font-size: 12.5px; color: var(--text-hell); }
.rechtstext .seal a { color: var(--text-hell); }