@charset "UTF-8";
:root {
  /* Standardwerte */
  --mySlidCaro-offset: 50px;
  --mySlidCaro-transition-duration: 0.5s;
  --mySlidCaro-slide-gap: 25px;
  --mySlidCaro-visible-slides: 5;
  /* 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-slide-width: 60%;
  --mySlidCaro-scrollbar-width: 0;
  /* 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: auto; }
  .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 */
    cursor: grab;
    user-select: none; }
    .mySlidCaroWrapper .mySlidCaroWrapperInner.dragging {
      cursor: grabbing; }
      .mySlidCaroWrapper .mySlidCaroWrapperInner.dragging a {
        pointer-events: none; }
  .mySlidCaroWrapper .mySlidCaroContainer {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0; }
    .mySlidCaroWrapper .mySlidCaroContainer .mySlidCaroSlide {
      position: absolute;
      width: var(--mySlidCaro-slide-width, 100%);
      transition: none; }
      .mySlidCaroWrapper .mySlidCaroContainer .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 .mySlidCaroContainer .mySlidCaroSlide img {
        max-width: 100%;
        object-fit: cover;
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 7;
        -webkit-user-drag: none;
        user-select: none; }
      @media (max-width: 768px) {
        .mySlidCaroWrapper .mySlidCaroContainer .mySlidCaroSlide {
          top: 0 !important; } }
    .mySlidCaroWrapper .mySlidCaroContainer.native-snap {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      column-gap: var(--mySlidCaro-slide-gap);
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; }
      .mySlidCaroWrapper .mySlidCaroContainer.native-snap::-webkit-scrollbar {
        display: none; }
      .mySlidCaroWrapper .mySlidCaroContainer.native-snap .mySlidCaroSlide {
        position: static !important;
        flex: 0 0 var(--mySlidCaro-slide-width, 100%);
        scroll-snap-align: start;
        /* alle Desktop-Styles deaktivieren */
        top: auto !important;
        z-index: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important; }
  .mySlidCaroWrapper .mySlidCaroPrev,
  .mySlidCaroWrapper .mySlidCaroNext {
    position: static;
    background: #7b0309;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1000;
    margin-bottom: 1rem; }
  .mySlidCaroWrapper .mySlidCaroPrev.disabled,
  .mySlidCaroWrapper .mySlidCaroNext.disabled {
    background: #ccc;
    cursor: default; }

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative; }

.swipe-wrap {
  overflow: hidden;
  position: relative; }

.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
  background-color: red;
  padding: 5rem; }

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