@charset "UTF-8";
:root {
  /* Standardwerte */
  --mySlidCaro-offset: 30px;
  --mySlidCaro-transition-duration: 1s;
  --mySlidCaro-slide-gap: 5px;
  --mySlidCaro-visible-slides: 3;
  /* Zahl gibt an wie viel Elemente rechts des aktiven Slides sichtbar sind. Bei 1 sind mindestens 5, bei 2 sind min 7, bei 3 sind min 9 Slides, bei 4 min 11 Slides usw. notwendig damit das klappt und nicht zu unschönen Effekten führt.*/
  --mySlidCaro-scrollbar-width: 0px;
  /* Muss nicht gesetzt werden, da es von JS überschrieben wird */ }

.mySlidCaroWrapper {
  position: relative;
  width: calc(100vw - var(--mySlidCaro-scrollbar-width));
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  display: flow-root;
  height: calc( 400px + var(--mySlidCaro-offset) );
  /* 400px is the slide height */ }
  .mySlidCaroWrapper .mySlidCaroWrapperInner {
    position: relative;
    left: calc(50% + var(--mySlidCaro-scrollbar-width) / 2);
    transform: translateX(-50%);
    touch-action: pan-y pinch-zoom;
    /* Erlaubt grundsätzlich vertikales Scrollen */ }
  .mySlidCaroWrapper .mySlidCaroContainer {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0; }
  .mySlidCaroWrapper .mySlidCaroSlide {
    position: absolute;
    width: 100%;
    transition: none; }
    .mySlidCaroWrapper .mySlidCaroSlide:not(.no-transition) {
      transition: transform var(--mySlidCaro-transition-duration) ease-out, top var(--mySlidCaro-transition-duration) ease, opacity var(--mySlidCaro-transition-duration) ease; }
    .mySlidCaroWrapper .mySlidCaroSlide img {
      max-width: 100%;
      object-fit: cover;
      width: 100%;
      aspect-ratio: 3 / 1; }
    @media (max-width: 768px) {
      .mySlidCaroWrapper .mySlidCaroSlide {
        top: 0 !important; } }
  .mySlidCaroWrapper .mySlidCaroPrev,
  .mySlidCaroWrapper .mySlidCaroNext {
    position: absolute;
    top: 0px;
    background: red;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1000; }
  .mySlidCaroWrapper .mySlidCaroPrev.disabled,
  .mySlidCaroWrapper .mySlidCaroNext.disabled {
    background: #ccc;
    cursor: default; }
  .mySlidCaroWrapper .mySlidCaroPrev {
    left: 0; }
  .mySlidCaroWrapper .mySlidCaroNext {
    left: 80px; }

/*# sourceMappingURL=mySlidCaro.css.map */