/* ==========================================================================
   Param Yoga Fürth — Stylesheet
   Nachbau der WordPress-Seite (Hudson-Theme) als statische Website.
   Design-Tokens extrahiert aus dem Original-Theme-CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lokale Webfonts (DSGVO-konform, keine externen Requests)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/merriweather-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/merriweather-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Pathway Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pathway-gothic-one-normal-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/indie-flower-normal-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url('../fonts/fontawesome-webfont.woff2') format('woff2'),
       url('../fonts/fontawesome-webfont.woff') format('woff');
}

/* --------------------------------------------------------------------------
   2. Design-Tokens (aus style_dynamic.css / stylesheet.min.css des Themes)
   -------------------------------------------------------------------------- */

:root {
  /* Markenfarben */
  --akzent:        #b79678;  /* Bronze — Links, aktive Menüpunkte, Buttons */
  --akzent-warm:   #b48360;  /* wärmeres Bronze — Hover, Icons */
  --akzent-dunkel: #986a40;  /* dunkles Bronze — Hover-Zustände */
  --text:          #787875;  /* Fließtext */
  --ueberschrift:  #2b2622;  /* Überschriften */
  --dunkel:        #1c1b19;  /* dunkle Flächen / Footer */
  --dunkel-2:      #222527;
  --hell:          #f8f8f8;  /* helle Sektionshintergründe */
  --weiss:         #ffffff;
  --grau:          #9a9a9a;
  --linie:         #ededed;  /* Trennlinien */

  /* Typografie */
  --font-fliesstext: 'Open Sans', sans-serif;
  --font-serif:      'Playfair Display', serif;
  --font-italic:     'Merriweather', serif;
  --font-schmal:     'Pathway Gothic One', sans-serif;
  --font-hand:       'Indie Flower', cursive;

  /* Layout */
  --container: 1100px;
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-schmal);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; display: inline-block; }

/* --------------------------------------------------------------------------
   4. Typografie (Werte 1:1 aus dem Original)
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; color: var(--ueberschrift); }

h1 {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.5em;
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: uppercase;
}
h2 {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 45px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: capitalize;
}
/* H1 der Startseite: SEO-Überschrift, sieht aber aus wie eine H2 */
h1.wie_h2 { line-height: 45px; letter-spacing: 0; text-transform: capitalize; }
h3 {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h4 {
  font-family: var(--font-italic);
  font-size: 15px;
  line-height: 29px;
  font-style: italic;
  font-weight: 300;
  text-transform: none;
}
h5 {
  font-family: var(--font-fliesstext);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h6 {
  font-family: var(--font-fliesstext);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

p {
  margin: 0 0 15px;
  font-family: var(--font-fliesstext);
  font-size: 14px;
  line-height: 27px;
  font-weight: 400;
  color: var(--text);
}

a { color: var(--akzent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--akzent-dunkel); }

ul, ol { font-family: var(--font-fliesstext); font-size: 14px; line-height: 27px; }

/* --------------------------------------------------------------------------
   5. Layout-Container
   -------------------------------------------------------------------------- */

.container { width: 100%; }
.container_inner {
  width: var(--container);
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

/* Sektionen */
.section { position: relative; }
.section .section_inner {
  width: var(--container);
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   6. Buttons (qbutton-Stil des Themes)
   -------------------------------------------------------------------------- */

.qbutton {
  display: inline-block;
  font-family: var(--font-fliesstext);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--weiss);
  background-color: var(--akzent);
  border: 2px solid var(--akzent);
  padding: 0 23px;
  line-height: 43px;
  height: 47px;
  cursor: pointer;
  text-align: center;
  transition: color .2s, background-color .2s, border-color .2s;
}
.qbutton:hover {
  color: var(--weiss);
  background-color: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
}
.qbutton.white {
  color: var(--weiss);
  background-color: transparent;
  border-color: var(--weiss);
}
.qbutton.white:hover {
  color: var(--ueberschrift);
  background-color: var(--weiss);
}

/* --------------------------------------------------------------------------
   7. Header (fixiert, halbtransparent weiß wie im Original)
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}
.kopf_leiste {
  background-color: rgba(255, 255, 255, 0.78);
  transition: background-color .3s ease;
}
.kopf.gescrollt .kopf_leiste { background-color: rgba(255, 255, 255, 0.97); }

.kopf_inner {
  display: flex;
  align-items: center;
  height: 70px;
}
.logo { flex: 0 0 auto; margin-right: 40px; }
.logo img { display: block; height: 55px; width: auto; }

.hauptmenue { flex: 1 1 auto; }
.hauptmenue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.hauptmenue li { position: relative; }
.hauptmenue a {
  display: block;
  font-family: var(--font-fliesstext);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
  line-height: 70px;
  padding: 0 2px;
}
.hauptmenue a span {
  display: inline-block;
  padding: 0 21px;
  border-right: 1px solid #534741;
  line-height: 1.2;
}
.hauptmenue li.letzter a span { border-right: none; }
.hauptmenue a:hover, .hauptmenue li.aktiv a { color: var(--akzent); }

/* Mobile-Menü */
.mobil_menue_knopf {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.mobil_menue_knopf span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  margin: 5px 0;
}
.mobil_menue {
  display: none;
  background: var(--weiss);
  border-top: 1px solid var(--linie);
}
.mobil_menue.offen { display: block; }
.mobil_menue ul { list-style: none; margin: 0; padding: 0 25px; }
.mobil_menue li { border-bottom: 1px solid var(--linie); }
.mobil_menue li:last-child { border-bottom: none; }
.mobil_menue a {
  display: block;
  padding: 13px 0;
  font-family: var(--font-fliesstext);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
}

/* --------------------------------------------------------------------------
   8. Hero (bildschirmfüllend, quasi-statisch — Inhalt scrollt darüber)
   -------------------------------------------------------------------------- */

.hero {
  height: 100vh;
  background-image: url('../img/Slider-Param-Yoga-Fürth-Logo-e1562917062790.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   9. Überlappender Inhalt (weißer Kasten mit Muster-Rahmen wie im Original)
   -------------------------------------------------------------------------- */

.inhalt_umschlag {
  position: relative;
  z-index: 100;
  width: var(--container);
  max-width: calc(100% - 20px);
  margin: -75px auto 0;
  padding: 15px;
  background-image: url('../img/space_around_content_patern.png');
  background-repeat: repeat;
}
.inhalt {
  background: var(--weiss);
  padding: 45px 50px 25px;
}

/* Sektionen */
.sektion { margin-bottom: 55px; }
.zentriert { text-align: center; }

/* Text-Trenner mit Linien (edgt_line_before/after des Themes) */
.text_trenner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 10px;
}
.text_trenner .linie {
  flex: 0 1 100px;
  border-bottom: 1px solid #f0ded6;
}
.text_trenner.schmal .linie { flex-basis: 100px; }
.text_trenner.breit .linie { flex-basis: 250px; }
.text_trenner .trenner_text {
  padding: 0 15px;
  font-family: var(--font-italic);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  color: var(--akzent-dunkel);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Muster-Rahmen & Boxen (Schraffur des Themes)
   -------------------------------------------------------------------------- */

.muster_rahmen {
  display: block;
  padding: 12px;
  background-image: url('../img/space_around_content_patern.png');
  background-repeat: repeat;
}
.muster_rahmen img { display: block; width: 100%; height: auto; }

/* Graue Muster-Box mit Text (Sektion Innenstadt) */
.muster_box {
  background-image: url('../img/space_around_content_patern.png');
  background-repeat: repeat;
  display: flex;
  align-items: center;
}
.muster_box_inner { padding: 40px 45px; }

/* --------------------------------------------------------------------------
   11. Karten & Spalten
   -------------------------------------------------------------------------- */

.karten_reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* Kurse-Seite: 4 Karten in 2 Spalten, spaltenweise gefüllt wie im Original
   (links Mo-Kurse, rechts Di-Kurse) */
.karten_reihe.kurse_raster {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}
.karte h5 { margin-top: 18px; }
.karte .kurs_zeiten { color: var(--akzent-dunkel); }

.zwei_spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.zwei_spalten .spalte > img { display: block; width: 100%; height: auto; }

/* Willkommen: kursive Kleintitel mit nachlaufender Linie */
.klein_titel {
  display: flex;
  align-items: center;
  font-family: var(--font-italic);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  color: var(--akzent-dunkel);
  margin-bottom: 22px;
}
.klein_titel .titel_linie {
  flex: 1;
  border-bottom: 1px solid #e5e5e5;
  margin-left: 15px;
}

/* Initial-Boxen (Drop Caps) */
.initial {
  float: left;
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 48px;
  color: var(--ueberschrift);
  border: 1px solid var(--ueberschrift);
  width: 52px;
  height: 52px;
  text-align: center;
  margin: 6px 15px 5px 0;
}

.ganze_breite_bild { margin-top: 30px; }
.ganze_breite_bild img { display: block; width: 100%; height: auto; }

/* Wirkungs-Listen (Workshops) */
ul.wirkungen { padding-left: 20px; }
ul.wirkungen li { margin-bottom: 6px; }

/* Rechtstext-Seiten (Impressum, Datenschutz, AGB, Cookies) */
.rechtstext { max-width: 820px; }
.rechtstext h1,
.rechtstext h2,
.rechtstext h3,
.rechtstext h4 { margin-top: 32px; }
.rechtstext h4 { color: var(--ueberschrift); font-style: normal; font-family: var(--font-serif); font-size: 18px; }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.rechtstext td, .rechtstext th { border: 1px solid #e5e5e5; padding: 8px 12px; font-family: var(--font-fliesstext); font-size: 13px; text-align: left; }
.rechtstext a { word-break: break-word; }

/* --------------------------------------------------------------------------
   12. Kursblöcke (Textbox mit Rahmen + Foto, abwechselnd)
   -------------------------------------------------------------------------- */

.kurs_reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
  align-items: stretch;
}
.kurs_box { display: flex; }
.kurs_box_inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fdfdfd;
  border: 1px solid #e5e5e5;
  padding: 55px 45px;
  text-align: center;
}
.kurs_box_inner h3 { margin-bottom: 0; }
.kurs_box_inner p { margin-bottom: 0; }
.kurs_box_inner a { color: var(--akzent); }
.kurz_linie {
  display: block;
  width: 60px;
  margin: 22px auto;
  border-bottom: 1px solid var(--akzent);
}
.kurs_foto img { width: 100%; height: 100%; object-fit: cover; }

/* Zenamu-Kalender */
#zenamu-calendar { margin: 35px 0; min-height: 300px; }

/* --------------------------------------------------------------------------
   12b. Titel-Band der Unterseiten (422px, fixiertes Hintergrundbild)
   -------------------------------------------------------------------------- */

.titel_band {
  height: 422px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.titel_band h1 {
  color: var(--weiss);
  margin: 60px 0 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
/* Unterseiten: Inhalt ohne Hero direkt unter dem Titel-Band */
.inhalt_umschlag.unterseite { margin-top: -40px; }

/* --------------------------------------------------------------------------
   12c. FAQ-Akkordeons (native details/summary)
   -------------------------------------------------------------------------- */

.faq details {
  border: 1px solid #e5e5e5;
  background: #fdfdfd;
  margin-bottom: 10px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 45px 16px 20px;
  font-family: var(--font-italic);
  font-size: 15px;
  font-style: italic;
  font-weight: 300;
  color: var(--ueberschrift);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-fliesstext);
  font-style: normal;
  font-size: 18px;
  color: var(--akzent);
}
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 20px 16px; }

/* --------------------------------------------------------------------------
   12d. Kontaktformular
   -------------------------------------------------------------------------- */

.kontakt_formular label {
  display: block;
  font-family: var(--font-fliesstext);
  font-size: 14px;
  color: var(--text);
  margin: 18px 0 6px;
}
.kontakt_formular input[type="text"],
.kontakt_formular input[type="email"],
.kontakt_formular textarea {
  width: 100%;
  border: 1px solid #e5e5e5;
  background: #fdfdfd;
  padding: 11px 14px;
  font-family: var(--font-fliesstext);
  font-size: 14px;
  color: var(--text);
}
.kontakt_formular input:focus,
.kontakt_formular textarea:focus {
  outline: none;
  border-color: var(--akzent);
}
.kontakt_formular textarea { min-height: 180px; resize: vertical; }
.kontakt_formular .senden { margin-top: 22px; }
/* Honeypot unsichtbar */
.hp_feld { position: absolute !important; left: -9999px !important; }
.formular_meldung { display: none; padding: 14px 18px; margin-top: 18px; font-family: var(--font-fliesstext); font-size: 14px; }
.formular_meldung.ok { display: block; border: 1px solid #9dbb96; color: #4e7247; background: #f2f8f0; }
.formular_meldung.fehler { display: block; border: 1px solid #c98c8c; color: #8c4646; background: #fbf1f1; }

/* --------------------------------------------------------------------------
   12e. Blog
   -------------------------------------------------------------------------- */

.blog_liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 35px;
}
.blog_karte_bild { display: block; overflow: hidden; }
.blog_karte_bild img { display: block; width: 100%; height: 260px; object-fit: cover; }
.blog_karte_text { padding-top: 18px; }
.blog_karte h3 { margin: 6px 0 12px; }
.blog_karte h3 a { color: var(--ueberschrift); }
.blog_karte h3 a:hover { color: var(--akzent); }
.beitrag_meta {
  font-family: var(--font-fliesstext);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 4px;
}
.weiterlesen { font-family: var(--font-fliesstext); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* Einzelner Artikel */
.blog_artikel { max-width: 820px; }
.blog_artikel .beitrag_meta { text-align: center; margin-bottom: 30px; }
.beitrag_text img { display: block; margin: 25px auto; height: auto; }
.beitrag_text h2 { font-size: 26px; line-height: 38px; margin-top: 30px; }
.beitrag_text h3 { margin-top: 26px; }
.zurueck { margin-top: 45px; text-align: center; }
.zurueck a { font-family: var(--font-fliesstext); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.fuss {
  background: var(--weiss);
  text-align: center;
  padding: 45px 0 35px;
}
.fuss .siegel { display: block; margin: 0 auto 20px; max-width: 160px; }
.fuss .social { margin-bottom: 18px; }
.fuss .social a {
  display: inline-block;
  color: var(--akzent-dunkel);
  margin: 0 6px;
}
.fuss .social a:hover { color: var(--akzent); }
.fuss p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--grau);
}
.fuss .kontaktzeile span { margin: 0 7px; }
.fuss_links { margin-top: 18px; font-family: var(--font-fliesstext); font-size: 12px; letter-spacing: 1px; color: var(--grau); }
.fuss_links a { color: var(--grau); }
.fuss_links a:hover { color: var(--akzent); }

/* Nach-oben-Button */
.nach_oben {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 48px;
  height: 48px;
  background: var(--hell) url('../img/space_around_content_patern.png');
  border: 1px solid var(--linie);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;
}
.nach_oben.sichtbar { display: flex; }
.pfeil_hoch {
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--akzent-dunkel);
  border-left: 2px solid var(--akzent-dunkel);
  transform: rotate(45deg) translateY(2px);
}

/* --------------------------------------------------------------------------
   13b. Cookie-Hinweis (unten rechts, dezent)
   -------------------------------------------------------------------------- */

/* Karte (OpenStreetMap / Leaflet) auf der Kontaktseite */
.karte_osm {
  height: 420px;
  width: 100%;
  border: 1px solid var(--linie);
  border-radius: 2px;
  z-index: 0;
}
.karte_osm a { box-shadow: none; }
@media (max-width: 600px) { .karte_osm { height: 320px; } }

.cookie_hinweis {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 360px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  box-shadow: 0 6px 30px rgba(0,0,0,.12);
  padding: 22px 24px;
  z-index: 200;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
}
.cookie_hinweis.sichtbar { opacity: 1; transform: translateY(0); }
.cookie_hinweis p { font-size: 13px; line-height: 22px; margin-bottom: 15px; }
.cookie_hinweis .qbutton { height: 40px; line-height: 36px; font-size: 12px; padding: 0 20px; }
.cookie_knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie_knoepfe .qbutton { flex: 1 1 auto; text-align: center; }
/* "Ablehnen" optisch gleichwertig, aber dezenter (kein Dark-Pattern) */
.cookie_hinweis .cookie_ablehnen { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.fuss_links .cookie_einstellungen { cursor: pointer; }

@media (max-width: 600px) {
  .cookie_hinweis { left: 15px; right: 15px; max-width: none; bottom: 15px; }
}

/* --------------------------------------------------------------------------
   14. Responsive (Breakpoints des Themes: 1200 / 1000 / 768 / 600)
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --container: 960px; }
}

@media (max-width: 1000px) {
  :root { --container: 100%; }
  .inhalt_umschlag { max-width: 100%; margin-top: -60px; }
  .hauptmenue { display: none; }
  .mobil_menue_knopf { display: block; }
  .kopf_inner { justify-content: flex-start; }
  .logo { margin-left: auto; margin-right: auto; padding-right: 44px; }
  .hero { background-attachment: scroll; }
}

@media (max-width: 768px) {
  .karten_reihe, .karten_reihe.kurse_raster { grid-template-columns: 1fr; }
  .karten_reihe.kurse_raster { grid-auto-flow: row; grid-template-rows: none; }
  .zwei_spalten { grid-template-columns: 1fr; }
  .blog_liste { grid-template-columns: 1fr; }
  .kurs_reihe { grid-template-columns: 1fr; }
  .inhalt { padding: 30px 20px 15px; }
  .muster_box_inner { padding: 30px 25px; }
  .kurs_box_inner { padding: 35px 25px; }
  h2 { font-size: 24px; line-height: 36px; }
  .text_trenner .linie { flex-basis: 40px; }
}