/* ==========================================================================
   Anlage Carousel - Wiederverwendbares Bilder-Carousel
   --------------------------------------------------------------------------
   Verwendet auf:
   - /sommermitgliedschaft  (5 Slides, Anlage-Bilder)
   - /gastronomie           (3 Slides, Terrasse + Anlage)

   Konzept:
   - Desktop: feste Höhe (400px) für ein konsistentes Layout neben dem Textblock
   - Tablet/Mobile: variables Seitenverhältnis (16:10), damit das Carousel
     proportional mitskaliert und nie "lang und schmal" wird
   ========================================================================== */

.anlage-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

/* --- Container & Slides --------------------------------------------------- */

.anlage-carousel .carousel-inner,
.anlage-carousel .carousel-inner .item {
  height: 400px;            /* Desktop-Default */
}

.anlage-carousel .carousel-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Bild füllt Container, Überstand wird mittig zugeschnitten */
  object-position: center;
  display: block;
}

/* Tablet (iPad Portrait & kleinere Tablets): Carousel ist hier vollbreit,
   daher arbeiten wir mit Aspect-Ratio statt fester Höhe.
   Greift zwischen 768px und 991px. */
@media (max-width: 991px) and (min-width: 768px) {
  .anlage-carousel .carousel-inner,
  .anlage-carousel .carousel-inner .item {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Mobile: Aspect-Ratio bleibt, sorgt für proportionale Skalierung */
@media (max-width: 767px) {
  .anlage-carousel .carousel-inner,
  .anlage-carousel .carousel-inner .item {
    height: auto;
    aspect-ratio: 4 / 3;    /* etwas höher proportional, damit auf kleinen Screens nicht zu flach */
    min-height: 220px;      /* Sicherheitsuntergrenze auf sehr schmalen Geräten */
  }
}

/* Fallback für sehr alte Browser ohne aspect-ratio Support (vor 2021).
   Setzt sich gegen aspect-ratio nicht durch, weil aspect-ratio danach kommt. */
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 991px) and (min-width: 768px) {
    .anlage-carousel .carousel-inner,
    .anlage-carousel .carousel-inner .item {
      height: 450px;
    }
  }
  @media (max-width: 767px) {
    .anlage-carousel .carousel-inner,
    .anlage-carousel .carousel-inner .item {
      height: 280px;
    }
  }
}

/* --- Steuerelemente: Pfeile links/rechts ---------------------------------- */

.anlage-carousel .carousel-control {
  width: 8%;
  background: none;
  opacity: 0.85;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.anlage-carousel .carousel-control:hover,
.anlage-carousel .carousel-control:focus {
  opacity: 1;
}

.anlage-carousel .carousel-control .fa {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: #fff;
}

.anlage-carousel .carousel-control.left .fa  { left: 15px; }
.anlage-carousel .carousel-control.right .fa { right: 15px; }

/* --- Indikatoren (Punkte unten) ------------------------------------------- */

.anlage-carousel .carousel-indicators {
  bottom: 5px;
  margin-bottom: 0;
}

.anlage-carousel .carousel-indicators li {
  border-color: #fff;
}

.anlage-carousel .carousel-indicators .active {
  background-color: #6b8e23;
  border-color: #6b8e23;
}

/* --- Accessibility: Reduced Motion ---------------------------------------- */
/* Nutzer, die "Bewegung reduzieren" im Betriebssystem aktiviert haben,
   bekommen den Auto-Slide-Effekt deaktiviert. Wichtig für Menschen mit
   vestibulären Störungen. */

@media (prefers-reduced-motion: reduce) {
  .anlage-carousel .item {
    transition: none !important;
  }
}