/* ==========================================================================
   kerngefühl pilates — Design Tokens & Styles
   ========================================================================== */

:root {
  /* Kernpalette -- bewusst auf 4 Farben reduziert */
  --salbei: #415649;
  --terrakotta: #B97B63;
  --terrakotta-dark: #9D6954; /* Hover-Ton für Terrakotta-Buttons, 15% abgedunkelt */
  --anthrazit: #575756;
  --creme: #F8F6F2;

  /* Heller Salbei-Ton, nur für Text auf dem dunklen Anthrazit-Grund
     (Kontakt-Sektion): das dunkle Salbei selbst hat dort zu wenig
     Kontrast (≈1.1:1), diese Aufhellung (Salbei + 75% Creme) erreicht
     wieder WCAG-AA-Niveau (4.5:1). */
  --salbei-on-dark: #CACEC8;

  /* Abgeleiteter Ton für alternierende Sektionsflächen --
     kein eigenständiger fünfter Farbwert, sondern rechnerisch
     Creme + 24% Salbei (fest berechnet statt via color-mix(), damit
     die Browser-Unterstützung keine Rolle spielt). */
  --creme-tint: #E3E8E2;

  /* Typografie */
  --font-display: 'Lora', serif;
  --font-body: 'Montserrat', sans-serif;

  /* Abstände */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 3rem;
  --space-6: 7rem; /* vertikaler Sektionsabstand, von 8rem um 12.5% reduziert */

  --max-width: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--anthrazit);
  background: var(--creme);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* schützt vor horizontalem Scroll durch die Bewegungslinie im Rand */
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  color: var(--anthrazit);
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--space-2); }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  position: relative;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terrakotta);
  margin-bottom: var(--space-2);
}

.section {
  /* unten etwas weniger Luft als oben -- der Hintergrundwechsel zur
     naechsten Sektion bildet die eigentliche Grenze, der Inhalt soll
     nicht zusaetzlich davor "schweben" */
  padding: var(--space-6) 0 var(--space-5) 0;
}

.section--tint { background: var(--creme-tint); }

.section--anthrazit {
  background: var(--anthrazit);
  color: var(--creme);
}
.section--anthrazit h2,
.section--anthrazit .eyebrow { color: var(--creme); }
.section--anthrazit .eyebrow { color: var(--salbei-on-dark); }

.section-head {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  text-align: center;
}

/* --------------------------------------------------------------------
   Signature-Element: Bewegungslinie
   -- ein Segment pro Sektion, jeweils dicht am Content statt am
      aeusseren Seitenrand: bei Hero/Methode/Kurse/Kontakt sitzt die
      Linie als eigene schmale Spalte in der bestehenden Grid-Luecke
      zwischen zwei Elementen (Text/Foto, Bild/Text, Karte/Karte,
      Kontaktdaten/Button); bei Wirkung direkt neben der zentrierten
      Section-Head-Box; bei "Wer bin ich" ueberlappt sie die linke
      Kante des Portraitfotos. Negative margin-top/top-Werte entsprechen
      dem oberen Innenabstand der jeweiligen Sektion, damit die Linie
      exakt an deren Hintergrundkante beginnt.
   -------------------------------------------------------------------- */
.movement-line {
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.movement-line svg {
  width: 100%;
  height: 100%;
  display: block;
}

.movement-line path {
  fill: none;
  stroke: var(--salbei);
  stroke-width: 2.5;
}

/* Auf dem dunklen Anthrazit-Grund (Kontakt) hat das dunkle Salbei zu
   wenig Kontrast und würde praktisch verschwinden -- gleiche Logik wie
   beim Eyebrow-/Label-Text, siehe --salbei-on-dark weiter oben. */
.movement-line--on-dark path {
  stroke: var(--salbei-on-dark);
}

/* Hero ist die einzige Sektion, die keinen Hintergrundwechsel zum
   Header hat -- "Sektionsanfang" ist dort optisch nicht erkennbar.
   Deshalb beginnt diese Linie als einzige ganz oben an der Seite
   (Hoehe des Headers, 90px gemessen) und reicht bis in die Headline
   hinein. Sie ist -- anders als Kontakt -- kein Grid-Item mehr,
   sondern wie Methode/Kurse/Wirkung/About absolut positioniert, damit
   sie unabhaengig von der Grid-Spalte frei ueber dem "l" von "pilates"
   in der Headline enden kann. */
.movement-line--hero {
  position: absolute;
  width: 64px;
  height: 370px;
  top: -170px; /* = -(var(--space-5) 80px + Header-Hoehe 90px) */
  left: calc(50% - 230px); /* zentriert ueber dem "l" von "pilates" in der H1 */
}

.movement-line--methode,
.movement-line--wirkung,
.movement-line--kurse,
.movement-line--about {
  position: absolute;
  top: -112px; /* = -var(--space-6) */
  width: 64px;
}

/* Methode & Kurse: beide Grids sind symmetrisch (1fr/1fr) und spannen
   die volle Container-Breite -- die Luecken-Mitte liegt daher immer
   exakt bei 50%, unabhaengig von der Fensterbreite. */
.movement-line--methode {
  height: 330px;
  left: calc(50% + 245px);
}

/* Wirkung: kein Zwei-Spalten-Grid vorhanden -- dicht links neben der
   zentrierten 640px-Section-Head-Box (640/2 + 24px Abstand + 64px
   Linienbreite = 408px). */
.movement-line--wirkung {
  height: 340px;
  left: calc(50% - 370px);
}

.movement-line--kurse {
  height: 580px;
  left: calc(50% + 270px);
}

/* Wer bin ich: ueberlappt die linke Kante des Portraitfotos (Bildspalte
   beginnt bei Container-Innenabstand 28px, Linie halb ueberlappend). */
.movement-line--about {
  height: 820px;
  left: calc(50% - 500px);
}

/* Zwei Techniken, je nachdem ob sich die Luecke robust ueber eine
   Grid-Spalte abbilden laesst oder nicht:

   1) Hero & Kontakt: die Linie ist eine echte, eigene Grid-Spalte
      innerhalb des jeweiligen Zwei-Spalten-Grids (siehe
      grid-template-columns bei .hero .container / .contact-grid).
      Dadurch ist die x-Position immer exakt in der Luecke, unabhaengig
      von der Fensterbreite. "margin-top" entspricht dem negativen
      oberen Innenabstand der Sektion, damit die Linie trotzdem an der
      Hintergrundkante der Sektion beginnt statt erst an der Zeile, in
      der sie im Grid steht.

   2) Methode, Kurse, Wirkung, Wer bin ich: hier liegt die eigentliche
      Luecke nicht direkt am Sektionsanfang (Ueberschrift o.ae. davor),
      daher sind diese vier direkte Kinder von .container, absolut
      positioniert, mit "top" = negativer oberer Innenabstand der
      Sektion (-7rem) und "left" auf die jeweilige Luecke berechnet. */

.movement-line--kontakt {
  width: 64px;
  height: 480px;
  margin-top: calc(-1 * var(--space-6)); 
  left: calc(50% - 500px);
  /*align-self: start;
  justify-self: center; */
}

@media (max-width: 1100px) {
  .movement-line { display: none; }
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--terrakotta);
  color: var(--creme);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 2rem;
  border-radius: 2px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  background: var(--terrakotta-dark);
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--salbei);
  outline-offset: 2px;
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--creme);
  color: var(--creme);
}

.btn--outline:hover {
  background: var(--creme);
  color: var(--anthrazit);
}

/* --------------------------------------------------------------------
   Header
   -------------------------------------------------------------------- */
.site-header {
  padding: var(--space-3) 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}

.site-nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--anthrazit);
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--terrakotta);
  transition: width 0.2s ease;
}

.site-nav a:hover::after { width: 100%; }

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.hero { padding: var(--space-5) 0; }

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  column-gap: var(--space-5);
  align-items: center;
}

.hero-instructor {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--salbei);
  font-size: 1.1rem;
}

.hero-sub {
  max-width: 40ch;
  margin-bottom: var(--space-3);
}

.hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* --------------------------------------------------------------------
   Methode
   -------------------------------------------------------------------- */
.methode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.methode-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 4px;
}

.intro-text {
  font-size: 1.1rem;
}

@media (max-width: 860px) {
  .methode-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Wirkung
   -------------------------------------------------------------------- */
.contrast-statement {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.55rem; /* ein Schriftgrad größer, war 1.4rem */
  max-width: 760px;
  margin: 0 auto var(--space-4);
}

.contrast-statement .dot {
  margin: 0 0.4em;
  color: var(--salbei);
}

.contrast-statement em {
  display: block;
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--terrakotta);
  font-size: 1.75rem; /* ein Schriftgrad größer, war 1.6rem */
}

.value-grid {
  display: grid;
  gap: var(--space-3);
}

.value-grid--3 { grid-template-columns: repeat(3, 1fr); }

.value-tile {
  border-left: 2px solid var(--salbei);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.value-tile p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

@media (max-width: 760px) {
  .value-grid--3 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Kurse
   -------------------------------------------------------------------- */
.offering-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.offering-card {
  background: var(--creme);
  padding: var(--space-4);
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.offering-subtitle {
  color: var(--terrakotta);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

.feature-list li {
  position: relative;
  padding-left: 1.4rem;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: var(--salbei);
  border-radius: 50%;
}

@media (max-width: 760px) {
  .offering-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
}

/* Galerie-Carousel */
.gallery {
  position: relative;
  max-width: 760px;
  margin: var(--space-4) auto 0;
}

.gallery-track {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--creme);
}

.gallery-slide {
  position: absolute;
  inset: 0;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: var(--creme);
  color: var(--anthrazit);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.2s ease;
}

.gallery-nav:hover { background: var(--terrakotta); color: var(--creme); }
.gallery-nav--prev { left: var(--space-2); }
.gallery-nav--next { right: var(--space-2); }

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.gallery-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--creme-tint);
  cursor: pointer;
  padding: 0;
}

.gallery-dot.is-active { background: var(--terrakotta); }

/* --------------------------------------------------------------------
   Wer bin ich
   -------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  align-items: start;
}

.about-grid h2 {
  margin-bottom: var(--space-3);
}

.about-visual {
  position: sticky;
  top: var(--space-4);
}

.about-visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}

.about-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--terrakotta);
  border-left: 2px solid var(--terrakotta);
  padding-left: var(--space-3);
  margin: var(--space-4) 0;
}

.qualifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.qualifications-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
}

.qualifications-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--salbei);
  border-radius: 50%;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { position: static; }
}

/* --------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 64px 1fr;
  column-gap: var(--space-4);
  align-items: center;
}

@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1.2fr 1fr; column-gap: var(--space-5); }
}

.contact-details {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-1);
}

.contact-details .label {
  display: inline-block;
  width: 6.5rem;
  color: var(--salbei-on-dark);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-grid .btn--outline {
  justify-self: start;
}

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-4) 0;
  text-align: center;
  border-top: 1px solid rgba(87, 87, 86, 0.12);
}

.site-footer .wordmark {
  font-size: 1.1rem;
  margin-bottom: var(--space-1);
}

.site-footer .claim {
  color: var(--salbei);
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
}

.site-footer .fine-print {
  font-size: 0.8rem;
  opacity: 0.6;
  margin: 0;
}