/* ============================================================
   mm-bs5-carousel – Frontend-Styles
   ------------------------------------------------------------
   Mobile Strategien (Klasse am .carousel):
     carousel-fixed-sm-none      Bild wird skaliert (Bootstrap-Standard)
     carousel-fixed-sm-left      feste Höhe, linker Bildrand fix
     carousel-fixed-sm-center    feste Höhe, Bild zentriert
     carousel-fixed-sm-right     feste Höhe, rechter Bildrand fix
     carousel-fixed-sm-dedicated <picture> mit eigenem mobilem Bild,
                                 kein zusätzliches CSS nötig
   Breakpoint (Klasse am .carousel): carousel-bp-sm|md|lg|xl
   Feste Höhe: CSS-Variable --mm-carousel-sm-height (Inline-Style)
   ============================================================ */

.carousel picture {
  display: block;
}

.carousel picture img {
  width: 100%;
}

/* ---------- Breakpoint sm: bis 575.98px ---------- */
@media (max-width: 575.98px) {

  .carousel-bp-sm.carousel-fixed-sm-left .carousel-inner,
  .carousel-bp-sm.carousel-fixed-sm-left .carousel-item,
  .carousel-bp-sm.carousel-fixed-sm-center .carousel-inner,
  .carousel-bp-sm.carousel-fixed-sm-center .carousel-item,
  .carousel-bp-sm.carousel-fixed-sm-right .carousel-inner,
  .carousel-bp-sm.carousel-fixed-sm-right .carousel-item {
    height: var(--mm-carousel-sm-height, 400px);
    overflow: hidden;
    position: relative;
  }

  .carousel-bp-sm.carousel-fixed-sm-left .carousel-item img,
  .carousel-bp-sm.carousel-fixed-sm-center .carousel-item img,
  .carousel-bp-sm.carousel-fixed-sm-right .carousel-item img {
    position: absolute;
    top: 0;
    display: block;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }

  .carousel-bp-sm.carousel-fixed-sm-left .carousel-item img {
    left: 0;
    right: auto;
    transform: none;
  }

  .carousel-bp-sm.carousel-fixed-sm-center .carousel-item img {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .carousel-bp-sm.carousel-fixed-sm-right .carousel-item img {
    right: 0;
    left: auto;
    transform: none;
  }
}

/* ---------- Breakpoint md: bis 767.98px ---------- */
@media (max-width: 767.98px) {

  .carousel-bp-md.carousel-fixed-sm-left .carousel-inner,
  .carousel-bp-md.carousel-fixed-sm-left .carousel-item,
  .carousel-bp-md.carousel-fixed-sm-center .carousel-inner,
  .carousel-bp-md.carousel-fixed-sm-center .carousel-item,
  .carousel-bp-md.carousel-fixed-sm-right .carousel-inner,
  .carousel-bp-md.carousel-fixed-sm-right .carousel-item {
    height: var(--mm-carousel-sm-height, 400px);
    overflow: hidden;
    position: relative;
  }

  .carousel-bp-md.carousel-fixed-sm-left .carousel-item img,
  .carousel-bp-md.carousel-fixed-sm-center .carousel-item img,
  .carousel-bp-md.carousel-fixed-sm-right .carousel-item img {
    position: absolute;
    top: 0;
    display: block;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }

  .carousel-bp-md.carousel-fixed-sm-left .carousel-item img {
    left: 0;
    right: auto;
    transform: none;
  }

  .carousel-bp-md.carousel-fixed-sm-center .carousel-item img {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .carousel-bp-md.carousel-fixed-sm-right .carousel-item img {
    right: 0;
    left: auto;
    transform: none;
  }
}

/* ---------- Breakpoint lg: bis 991.98px ---------- */
@media (max-width: 991.98px) {

  .carousel-bp-lg.carousel-fixed-sm-left .carousel-inner,
  .carousel-bp-lg.carousel-fixed-sm-left .carousel-item,
  .carousel-bp-lg.carousel-fixed-sm-center .carousel-inner,
  .carousel-bp-lg.carousel-fixed-sm-center .carousel-item,
  .carousel-bp-lg.carousel-fixed-sm-right .carousel-inner,
  .carousel-bp-lg.carousel-fixed-sm-right .carousel-item {
    height: var(--mm-carousel-sm-height, 400px);
    overflow: hidden;
    position: relative;
  }

  .carousel-bp-lg.carousel-fixed-sm-left .carousel-item img,
  .carousel-bp-lg.carousel-fixed-sm-center .carousel-item img,
  .carousel-bp-lg.carousel-fixed-sm-right .carousel-item img {
    position: absolute;
    top: 0;
    display: block;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }

  .carousel-bp-lg.carousel-fixed-sm-left .carousel-item img {
    left: 0;
    right: auto;
    transform: none;
  }

  .carousel-bp-lg.carousel-fixed-sm-center .carousel-item img {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .carousel-bp-lg.carousel-fixed-sm-right .carousel-item img {
    right: 0;
    left: auto;
    transform: none;
  }
}

/* ---------- Breakpoint xl: bis 1199.98px ---------- */
@media (max-width: 1199.98px) {

  .carousel-bp-xl.carousel-fixed-sm-left .carousel-inner,
  .carousel-bp-xl.carousel-fixed-sm-left .carousel-item,
  .carousel-bp-xl.carousel-fixed-sm-center .carousel-inner,
  .carousel-bp-xl.carousel-fixed-sm-center .carousel-item,
  .carousel-bp-xl.carousel-fixed-sm-right .carousel-inner,
  .carousel-bp-xl.carousel-fixed-sm-right .carousel-item {
    height: var(--mm-carousel-sm-height, 400px);
    overflow: hidden;
    position: relative;
  }

  .carousel-bp-xl.carousel-fixed-sm-left .carousel-item img,
  .carousel-bp-xl.carousel-fixed-sm-center .carousel-item img,
  .carousel-bp-xl.carousel-fixed-sm-right .carousel-item img {
    position: absolute;
    top: 0;
    display: block;
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
  }

  .carousel-bp-xl.carousel-fixed-sm-left .carousel-item img {
    left: 0;
    right: auto;
    transform: none;
  }

  .carousel-bp-xl.carousel-fixed-sm-center .carousel-item img {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .carousel-bp-xl.carousel-fixed-sm-right .carousel-item img {
    right: 0;
    left: auto;
    transform: none;
  }
}