/*
 * coachings.css – Seite "Coachings" (/coachings)
 * ─────────────────────────────────────────────────────────────────
 * Spezifische Stile für die Coachings-Seite.
 * Mobile First.
 * ─────────────────────────────────────────────────────────────────
 */


/* ════════════════════════════════════════
   EINLEITUNGSTEXT-SEKTION
════════════════════════════════════════ */

.coachings-intro {
  padding: var(--sektion-y-s) var(--aussen-mobil);
  background-color: var(--weiss);
}

.coachings-intro__statement {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--schwarz);
  line-height: 1.2;
}

.coachings-intro__text p {
  font-size: var(--fs-text);
  color: var(--textgrau);
  line-height: 1.8;
}

@media (min-width: 768px) {
  .coachings-intro {
    padding: var(--sektion-y-m) var(--aussen-tablet);
  }
  .coachings-intro__statement {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  .coachings-intro {
    padding: var(--sektion-y-l) var(--aussen-desktop);
  }
  .coachings-intro__statement {
    font-size: 40px;
  }
}


/* ════════════════════════════════════════
   COACHING-KARTEN-RASTER
════════════════════════════════════════ */

.coachings-raster {
  padding: var(--sektion-y-s) var(--aussen-mobil);
  background-color: var(--weiss);
}

/* Jede Karte hat einen Hover-Effekt */
.nc-karte {
  cursor: default;
  transition: transform var(--transition-standard);
}

.nc-karte:hover {
  transform: translateY(-4px);
}

/* Trennlinie zwischen Kartenraster und Ergänzungstext */
.coachings-hinweis {
  padding: var(--sektion-y-s) var(--aussen-mobil);
  background-color: var(--weiss);
  border-top: 1px solid var(--trennlinie-hell);
}

.coachings-hinweis p {
  font-size: var(--fs-klein);
  color: var(--textgrau-hell);
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--gap-m);
}

@media (min-width: 768px) {
  .coachings-raster {
    padding: var(--sektion-y-m) var(--aussen-tablet);
  }
  .coachings-hinweis {
    padding: var(--sektion-y-m) var(--aussen-tablet);
  }
}

@media (min-width: 1024px) {
  .coachings-raster {
    padding: var(--sektion-y-l) var(--aussen-desktop);
  }
  .coachings-hinweis {
    padding: var(--sektion-y-l) var(--aussen-desktop);
  }
}


/* ════════════════════════════════════════
   MARKEN-STATEMENT SEKTION
   (schwarzer Hintergrund, zweispaltig)
════════════════════════════════════════ */

.coachings-statement {
  background-color: var(--schwarz);
  padding: var(--sektion-y-s) var(--aussen-mobil);
  color: var(--weiss);
}

.coachings-statement__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--weiss-60);
  display: block;
  margin-bottom: 16px;
}

.coachings-statement__titel {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 300;
  color: var(--weiss);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.coachings-statement__text p {
  font-size: var(--fs-text);
  font-weight: 300;
  color: var(--weiss-80);
  line-height: 1.8;
}

@media (min-width: 768px) {
  .coachings-statement {
    padding: var(--sektion-y-m) var(--aussen-tablet);
  }
  .coachings-statement__titel {
    font-size: 48px;
  }
}

@media (min-width: 1024px) {
  .coachings-statement {
    padding: var(--sektion-y-l) var(--aussen-desktop);
  }
  .coachings-statement__titel {
    font-size: 60px;
  }
}