/* ---------------------------------------------------------------------------
   Pilates mit Meli - melaniehofer.at

   Farben, Schriften und Abstaende sind aus dem vorherigen WordPress-Theme
   (Twenty Twenty-Four mit eigener Palette) uebernommen:
     Seitenhintergrund   accent-4  #b1c5a4
     Sektionshintergrund           #c8d6bf
     "Kurse und Preise"  accent-2  #c2a990
     Schrift             Open Sans 500 / 1.55, Ueberschriften ebenfalls 500
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/opensans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --seite: #b1c5a4;   /* Seitenhintergrund, im alten Theme "accent-4" */
  --band: #c8d6bf;    /* hellere Sektionen */
  --sand: #c2a990;    /* Sektion "Kurse und Preise" */
  --text: #111111;
  --text-leise: #3f4b39;
  --akzent: #8f3a22;  /* nur Hover, Fokus und Buttons */
  --linie: rgba(17, 17, 17, 0.18);

  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --inhalt: 800px;    /* content-size des alten Themes */
  --breit: 1280px;    /* wide-size des alten Themes */

  --raum-20: min(1.5rem, 2vw);
  --raum-30: min(2.5rem, 3vw);
  --raum-40: min(4rem, 5vw);
  --raum-50: min(6.5rem, 8vw);
}

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

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

body {
  margin: 0;
  background: var(--seite);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--raum-20);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.283), 3.27rem);
  line-height: 1.15;
}
h2 { font-size: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.083), 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem); }

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

strong, b { font-weight: 700; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
a:hover, a:focus-visible { color: var(--akzent); }

img, svg { max-width: 100%; height: auto; display: block; }

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

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: #ffffff;
  padding: 0.6rem 1rem;
  border-radius: 4px;
}

/* --- Rahmen ---------------------------------------------------------------- */

.wrap {
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--raum-50);
}
.wrap-narrow {
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: var(--raum-50);
}
.zentriert { text-align: center; }

.band { padding-block: var(--raum-50); }
.band--hell { background: var(--band); }
.band--sand { background: var(--sand); }

/* --- Header ---------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--linie); }
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-20);
  padding-block: 0.75rem;
}
.logo { display: block; }
.logo img { width: 110px; height: auto; }

.site-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-20);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.site-header nav a { text-decoration: none; }
.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --- Startseite ------------------------------------------------------------ */

.hero {
  padding-top: var(--raum-50);
  padding-bottom: var(--raum-30);
  text-align: center;
}
.hero h1 { margin-bottom: var(--raum-30); }

.hero-bild { margin: 0 auto var(--raum-20); }
.hero-bild img { width: 100%; border-radius: 12px; }

.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-40);
  align-items: center;
}
.spalte-bild { margin: 0; }
.spalte-bild img { width: 100%; border-radius: 12px; }

.qualifikationen {
  list-style: none;
  margin: var(--raum-30) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--raum-30);
  text-align: center;
}
/* subgrid haelt Titel, Anbieter und Abschluss ueber alle Spalten auf einer Linie */
@supports (grid-template-rows: subgrid) {
  .qualifikationen { grid-template-rows: auto; }
  .qualifikationen > li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0.2rem;
    align-content: start;
  }
}
.qualifikationen h3 { margin-bottom: 0.3rem; font-weight: 700; }
.qualifikationen p { margin-bottom: 0.2rem; font-size: 0.9rem; }
.qualifikationen .abschluss { color: var(--text-leise); }

.zitate {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-30);
  margin-top: var(--raum-40);
  text-align: center;
}
.zitate blockquote { margin: 0; font-size: 0.95rem; }
.zitate blockquote footer {
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.ort { margin-bottom: var(--raum-30); }

.termine, .preise {
  list-style: none;
  margin: 0 auto var(--raum-30);
  padding: 0;
  max-width: 24rem;
}
.termine li { margin-bottom: 0.4rem; }
.preise li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
  text-align: left;
}
.preise li:last-child { border-bottom: none; }
.preis-wert { white-space: nowrap; font-weight: 700; }

.fussnoten { font-size: 0.85rem; }
.fussnoten p { margin-bottom: 0.3rem; }

.infos {
  margin: var(--raum-30) 0 0;
  padding-left: 1.3rem;
}
.infos li { margin-bottom: var(--raum-20); }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: var(--raum-40);
}
.button {
  display: inline-block;
  background: var(--text);
  color: #ffffff;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid var(--text);
}
.button:hover, .button:focus-visible {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #ffffff;
}
.button--sekundaer { background: transparent; color: var(--text); }
.button--sekundaer:hover, .button--sekundaer:focus-visible {
  background: var(--text);
  color: #ffffff;
  border-color: var(--text);
}

/* --- Rechtstexte ----------------------------------------------------------- */

.rechtstext {
  max-width: var(--inhalt);
  margin-inline: auto;
  padding: var(--raum-50);
  font-size: 0.95rem;
}
.rechtstext h1 { margin-bottom: var(--raum-30); }
.rechtstext h2 {
  font-size: clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.767), 1.85rem);
  margin-top: var(--raum-40);
}
.rechtstext ul { padding-left: 1.3rem; }
.rechtstext li { margin-bottom: 0.4rem; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--linie);
  padding-block: var(--raum-50) var(--raum-30);
  font-size: 0.9rem;
}
/* Spalten so breit wie ihr Inhalt und mittig gesetzt - wie im alten Footer */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-40);
}
.footer-col { min-width: 8rem; }
.footer-col h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.3rem; }
.copyright {
  text-align: center;
  margin-top: var(--raum-40);
  font-size: 0.8rem;
  color: var(--text-leise);
}

/* --- Ab Tablet ------------------------------------------------------------- */

@media (min-width: 48rem) {
  .zwei-spalten { grid-template-columns: 45fr 55fr; }
  .zitate { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}