/* ============================================================
   Seite: Referenzen (Page-ID 233)
   Nur Seitenspezifisches — gemeinsame Bausteine in leistung-shared.css
   (Werte aus Original 233.css + universal.css, Element-IDs im Kommentar)
   ============================================================ */

/* Header: aktueller Menüpunkt bekommt im Original die dunkle Pill
   (.current-menu-item) — Nav-Markup ist geteilt, daher seitenlokal */
body.page-id-233 .nav-main .nav-item a[href="/referenzen/"],
body.page-id-233 .nav-offcanvas .nav-item a[href="/referenzen/"] {
  background: var(--primary-1000);
}

/* Original .ct-span ist inline-block: "Das sagen<br>" bricht dadurch
   NICHT extra um (kein Leerzeilen-Umbruch nach dem Span) */
.ref-hero .lp-intro-headline span {
  display: inline-block;
}

/* Durch den Block-Span würde die Content-Box schmaler (shrink-to-fit);
   im Original füllt sie die verfügbare Breite (max. 700px) */
.ref-hero .lp-intro-content {
  width: 100%;
}

/* ------------------------------------------------------------
   #referenzen (first-section im Hero): Intro-Text
   ------------------------------------------------------------ */
.ref-intro-block {
  width: 100%;
  padding: 107px 50px 59px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* #div_block-10919-233 */
.ref-intro-text {
  width: 60%;
  padding-left: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  z-index: 99;
  position: relative;
  margin-bottom: 63px;
}

/* #text_block-10920-233 */
.ref-intro-headline {
  line-height: 1.2;
  color: #fdfeff;
  margin-bottom: 20px;
  max-width: 700px;
  text-align: center;
}

/* #text_block-10923-233 */
.ref-intro-copy {
  margin-bottom: 34px;
  color: #fdfeff;
  font-weight: 300;
  font-size: 22px;
  text-align: center;
}

/* ------------------------------------------------------------
   section-10949-233: Kundenstimmen-Grid
   ------------------------------------------------------------ */
.ref-grid-section .section-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 50px 85px;
}

/* #_dynamic_list-10950-233 */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 20px;
  align-items: stretch;
  position: relative;
  z-index: 3;
  width: 100%;
}

/* [data-id="div_block-10951-233"] */
.ref-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  padding: 30px;
  border: 1px solid #ffffff;
}

/* [data-id="image-10956-233"] */
.ref-card-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

/* [data-id="text_block-10963-233"] */
.ref-card-name {
  color: #fdfeff;
  font-size: 22px;
}

/* [data-id="text_block-10997-233"] */
.ref-card-role {
  font-size: 12px;
  font-weight: 300;
  color: #223a4f;
  font-style: italic;
}

/* [data-id="text_block-11002-233"] */
.ref-card-quote {
  font-weight: 300;
  text-align: center;
  color: #223a4f;
  font-size: 18px;
  margin-top: 5px;
}

/* ============================================================
   Breakpoints
   ============================================================ */

@media (max-width: 1399px) {
  /* #div_block-10919-233 */
  .ref-intro-text {
    padding-left: 0;
    width: 100%;
  }

  /* #_dynamic_list-10950-233 */
  .ref-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-column-gap: 20px;
  }

  /* Karten */
  .ref-card {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767px) {
  /* #referenzen */
  .ref-intro-block {
    padding-top: 44px;
    padding-bottom: 27px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* #div_block-10919-233 */
  .ref-intro-text {
    padding-bottom: 0;
  }

  /* #text_block-10920-233 */
  .ref-intro-headline {
    font-size: 30px;
  }

  /* #text_block-10923-233 */
  .ref-intro-copy {
    margin-bottom: 0;
    font-size: 20px;
  }

  /* #section-10949-233 inner */
  .ref-grid-section .section-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* #_dynamic_list-10950-233 */
  .ref-grid {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
  }
}

@media (max-width: 479px) {
  /* #referenzen */
  .ref-intro-block {
    padding-left: 20px;
    padding-right: 20px;
  }
}