/* ============================================================
   Fallstudien (Unterseiten von /referenzen/, Prefix fs-)
   Erste Seite: page-gero.php (09/2026). Basis ist das lp-Skelett aus
   leistung-shared.css (Hero, #mehr, Media, Deep, CTA-Box) plus
   inc/ablauf.php; hier nur die Fallstudien-spezifischen Bausteine:
   Kicker, Zahlen-Band, Ergebnis-Karte, Zitat, Leistungs-Links.
   Werte orientieren sich an systemhauswechsel.css / base.css
   (.ablauf-schritt, .faq-liste, .start-fakten).
   ============================================================ */

/* Spans in Headlines brechen als Einheit um (wie sw-) */
.fs-hero .lp-intro-headline span,
.fs-hero .lp-intro-block-headline span,
.fs-deep .lp-media-headline span,
.fs-cta .lp-cta-headline span {
  display: inline-block;
}

/* Kicker "Fallstudie" über der H1 */
.fs-kicker {
  color: #32b4a2;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.fs-hero .lp-intro-block-headline {
  max-width: 900px;
}

/* Zahlen-Band (dunkles Band wie .start-fakten, große Werte wie .un-fakten) */
.fs-fakten {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 64px;
  padding: 34px 30px;
  background-color: #1c3346;
  color: #fdfeff;
  text-align: center;
}
.fs-fakt {
  flex: 0 1 190px;
}
.fs-fakt-wert {
  font-size: 40px;
  line-height: 1.1;
  color: #32b4a2;
  font-variant-numeric: tabular-nums;
}
.fs-fakt-label {
  font-size: 15px;
  line-height: 1.35;
  margin-top: 6px;
  color: rgba(253, 254, 255, 0.82);
}

/* Ausgangslage (Bild rechts), wie .sw-media über dem Verlauf */
.fs-media {
  position: relative;
  z-index: 3;
}
/* Vor-Headline "Ausgangslage" als eigene Zeile */
.fs-media .lp-media-headline-light span {
  display: block;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Ablauf-Baustein: drei lange Schritte brauchen mehr Breite als 1000px */
.fs-ablauf .ablauf-section > .section-inner {
  max-width: 1400px;
}

/* Deep-Sektion: Text-Bild-Block + Karten */
.fs-deep .lp-media-headline {
  color: #fdfeff;
}
.fs-deep .lp-media-headline span {
  /* wie .lp-media-headline-light span: dunkelblau auf Verlauf, gruen waere unsichtbar */
  color: #223a4f;
}
.fs-cta .lp-cta-headline span {
  color: #32b4a2;
}

/* Ergebnis-Karte (weiße Karte wie .faq-liste) */
.fs-ergebnis {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1000px;
  margin: 90px auto 0;
  background-color: #fdfeff;
  border-radius: var(--border-radius-global, 15px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  padding: 40px 48px 34px;
}
.fs-ergebnis-headline {
  color: #223a4f;
  margin: 0 0 22px;
}
.fs-ergebnis-headline span {
  color: #32b4a2;
}
.fs-ergebnis-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.fs-ergebnis-liste li {
  position: relative;
  padding-left: 36px;
  font-size: 18px;
  line-height: 1.5;
  color: #2f2f2f;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
.fs-ergebnis-liste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 14px;
  border-right: 3px solid #32b4a2;
  border-bottom: 3px solid #32b4a2;
  transform: rotate(45deg);
}

/* Kundenstimme */
.fs-zitat {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1000px;
  margin: 50px auto 0;
  padding: 0 48px;
  text-align: center;
}
.fs-zitat-text {
  margin: 0;
  font-size: 26px;
  line-height: 1.45;
  font-weight: 300;
  color: #fdfeff;
}
.fs-zitat-autor {
  margin-top: 18px;
  font-size: 17px;
  color: rgba(253, 254, 255, 0.82);
}
.fs-zitat-autor span {
  color: #223a4f;
}

/* Eingesetzte Leistungen (Link-Chips) */
.fs-leistungen {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1000px;
  margin: 60px auto 0;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fs-leistungen-label {
  color: rgba(253, 254, 255, 0.82);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fs-leistungen-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.fs-leistungen-links a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid rgba(253, 254, 255, 0.45);
  border-radius: 999px;
  color: #fdfeff;
  font-size: 16px;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.fs-leistungen-links a:hover,
.fs-leistungen-links a:focus-visible {
  border-color: #32b4a2;
  background-color: rgba(50, 180, 162, 0.16);
  color: #fdfeff;
}

/* CTA-Box wie sw-cta (in der Deep-Sektion) */
.fs-cta.lp-cta-box {
  margin-top: 100px;
  padding-top: 0;
  padding-bottom: 0;
}
.fs-cta .lp-cta-content {
  padding-top: 50px;
  padding-bottom: 50px;
}
.fs-cta .lp-cta-inner {
  max-width: 800px;
}
.fs-cta .lp-cta-headline {
  color: #fdfeff;
  margin-bottom: 15px;
}

@media (max-width: 1399px) {
  .fs-cta .lp-cta-content {
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .fs-hero .lp-intro-block {
    padding-top: 43px;
  }
  .fs-kicker {
    font-size: 15px;
    margin-bottom: 10px;
  }
  .fs-fakten {
    gap: 18px 28px;
    padding: 26px 20px;
  }
  .fs-fakt {
    flex-basis: 130px;
  }
  .fs-fakt-wert {
    font-size: 30px;
  }
  .fs-fakt-label {
    font-size: 13px;
  }
  .fs-media .section-inner {
    padding-bottom: 85px;
  }
  .fs-media .lp-media-col-text--wide {
    padding-top: 29px;
  }
  .fs-media .lp-media-col-img--shadow {
    padding-bottom: 0;
  }
  .fs-deep .lp-media-columns > .lp-media-col-img {
    padding-bottom: 20px;
  }
  .fs-deep .lp-media-headline {
    font-size: 30px;
  }
  .fs-deep .lp-media-text {
    align-items: flex-start;
  }
  .fs-ergebnis {
    margin-top: 60px;
    padding: 28px 22px 24px;
  }
  .fs-ergebnis-liste li {
    font-size: 16px;
  }
  .fs-zitat,
  .fs-leistungen {
    padding: 0 10px;
  }
  .fs-zitat-text {
    font-size: 21px;
  }
  .fs-cta.lp-cta-box {
    margin-top: 70px;
  }
  .fs-cta .lp-cta-content {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media (max-width: 479px) {
  /* Kicker rutscht auf dem Handy sonst ins Hero-Bild */
  .fs-hero .lp-intro-content {
    padding-top: 30px;
  }
  .fs-cta .lp-cta-copy {
    font-size: 20px;
    margin-bottom: 0;
  }
}