/* =========================================================
   MOBILE REFERENCES  –  max-width: 768px
   Referenzen als horizontales Karussell mit Dot-Navigation.
   ========================================================= */

/* Desktop: mobile-only Elemente versteckt */
.references-subtitle {
   display: none;
}

.references-mobile-headline {
   display: none;
}

.carousel-viewport {
   overflow: visible;
}

.carousel-track {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.carousel-dots {
   display: none;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
   #references {
      width: 100%;
      flex: none;
      padding: 60px 26px 40px;
      align-items: flex-start;
   }

   /* Desktop section-label auf Mobile ausblenden */
   #references .section-label {
      display: none;
   }

   /* stretch → .references-content bekommt volle Breite */
   .references-wrapper {
      flex-direction: column;
      gap: 8px;
      width: 100%;
      align-items: stretch;
   }

   .references-content {
      width: 100%;
      gap: 8px;
   }

   .references-mobile-headline {
      display: block;
      font-size: 40px;
      font-weight: 700;
      color: var(--color-main);
      line-height: 1.2;
      margin-bottom: 0;
   }

   .references-subtitle {
      display: block;
      font-size: 15px;
      color: var(--color-white);
      margin-bottom: 16px;
   }

   .carousel-viewport {
      overflow: hidden;
      width: 100%;
   }

   .carousel-track {
      display: flex;
      flex-direction: row;
      gap: 0;
      transition: transform 0.35s ease;
      will-change: transform;
   }

   /* display:flex explizit, damit flex-direction: column greift */
   .reference-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      flex-shrink: 0;
      width: 100%;
      max-width: none;
      padding: 20px;
      box-sizing: border-box;
   }

   .reference-card blockquote {
      flex: none;
      text-align: left;
      width: 100%;
   }

   .reference-divider {
      width: 100%;
      height: 1px;
      align-self: auto;
   }

   .reference-author {
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 16px;
      min-width: auto;
      width: 100%;
   }

   .carousel-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding-top: 16px;
      width: 100%;
   }

   .carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: transparent;
      border: 2px solid var(--color-main);
      cursor: pointer;
      padding: 0;
      transition: width 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
      flex-shrink: 0;
   }

   .carousel-dot.is-active {
      width: 26px;
      border-radius: 5px;
      background-color: var(--color-main);
      border-color: var(--color-main);
   }
}