/* ============================================================   GLOBALER SCHUTZ GEGEN HORIZONTALEN SEITEN-OVERFLOW   ============================================================   Verhindert, dass die Website auf Smartphones seitlich   verschoben werden kann.   Zusätzlich werden die Carousel-Pfeile auf kleinen Screens   innerhalb des Viewports gehalten.   ============================================================ */

/* ------------------------------------------------------------   1. Dokument auf Viewportbreite begrenzen   ------------------------------------------------------------ */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

/* * In Browsern, die overflow: clip unterstützen, * verwenden wir clip statt hidden. */

/* ------------------------------------------------------------   2. Medien dürfen ihre Container nicht verbreitern   ------------------------------------------------------------ */

img, picture, video, canvas, svg, iframe {
  max-width: 100%;
}

/* ------------------------------------------------------------   3. Flex- und Grid-Inhalte dürfen schrumpfen   ------------------------------------------------------------ */

.container, .container-fluid, .row, [class^="col-"], [class*=" col-"] {
  min-width: 0;
}

/* ============================================================   TESTIMONIAL-CAROUSEL   ============================================================   Auf großen Screens dürfen die Pfeile weiterhin etwas   außerhalb des eigentlichen Inhalts stehen.   Auf kleinen Screens werden sie jedoch IN den Viewport   geschoben.   Ursache laut Browser-Test:   prev:   left: -24px   next:   right: -24px   Dadurch entsteht horizontaler Overflow.   ============================================================ */

@media (max-width: 767.98px) {
  #testimonialCarousel {
    position: relative;
    width: 100%;
    max-width: 100%;
  }
}

/* * Linker Pfeil:     *     * vorher:     * left: -24px     *     * jetzt vollständig innerhalb des Viewports. */

@media (max-width: 767.98px) {
  #testimonialCarousel .carousel-control-prev {
    left: 0 !important;
    width: 48px !important;
  }
}

/* * Rechter Pfeil:     *     * vorher:     * right: -24px     *     * jetzt vollständig innerhalb des Viewports. */

@media (max-width: 767.98px) {
  #testimonialCarousel .carousel-control-next {
    right: 0 !important;
    width: 48px !important;
  }
}

/* ============================================================   SEHR KLEINE SCREENS   ============================================================ */

@media (max-width: 420px) {
  #testimonialCarousel .carousel-control-prev {
    left: 0 !important;
  }
}

@media (max-width: 420px) {
  #testimonialCarousel .carousel-control-next {
    right: 0 !important;
  }
}