.slick-autoplay-toggle-button {
  right: auto;
  left: calc(1.5em - 14px);
  bottom: calc(1.5em - 20px);
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  min-width: 3rem;
  min-height: 3rem;
  --tw-bg-opacity: 1;
  background-color: rgba(250,240,232,var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(var(--primary,0,0,0),var(--tw-text-opacity));
  opacity: var(--tw-bg-opacity);
  display: inline-flex;
  align-items: center;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255/var(--tw-border-opacity));
  text-align: center;
  vertical-align: top;
  font-weight: 700;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
  @media (min-width: 640px) {
    left: 1rem;
    bottom: 1rem;
    right: auto;
  }
  &:hover {
    --tw-shadow: 0px 0px 2px 2px #5ca0ff;
    --tw-shadow-colored: 0px 0px 2px 2px var(--tw-shadow-color);
    box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
  }
  span {
    margin: auto;
    &:before {
      display: block;
      color: rgba(var(--primary,0,0,0),var(--tw-text-opacity));
    }
  }
}

.frontpageslider {
  .slick-list {
    height: 100%;
    .slick-track {
      height: 100%;
      .slick__slide,
      .slick-slide {
        height: 100%;
        .slide__content {
          height: 100%;
          justify-content: center;
          flex-direction: column;
          display: flex;
          .media {
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            picture {
              @media (max-width: 639px) {
                min-width: 100%;
                min-height: 100%;
              }
              img {
                object-fit: cover;
                object-position: center;
                max-width: unset;
                width: 100%;
                height: 100%;
                @media (min-width: 640px) {
                  width: 100%;
                  height: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}

.externslider {
  @media (max-width: 639px){
    margin-bottom: 6.5rem;
  }
  padding: .25rem;
  @media (min-width: 1280px) {
    /*padding-left: 4rem;
    padding-right: 4rem;*/
  }
  .slick__arrow {
    position: relative;
    z-index: 2;
    bottom: -3rem;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    @media (min-width: 640px) {
      position: absolute;
      z-index: 2;
      top: 50%;
      bottom: auto;
      left: 0;
      height: 2px;
      margin-top: -1px;
      transform: translateY(-50%);
    }
  }
  button {
    height: 2rem;
    width: 2rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    @media (min-width: 640px) {
      font-size: 2.25rem;
      line-height: 2.5rem;
      height: 3rem;
      width: 3rem;
    }

    &.slick-prev {
      right: auto;
      left: .75rem;
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    &.slick-next {
      left: auto;
      right: .75rem;
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    .svg-inline--fa {
      height: 1.5rem;
      width: 1.5rem;
      font-size: 1.5rem;
      margin: auto;
      @media (min-width: 640px) {
        height: 2.25rem;
        width: 2.25rem;
        font-size: 2.25rem;
      }
    }

    &:hover {
      cursor: pointer;
      --tw-shadow: 0px 0px 2px 2px #5ca0ff;
      --tw-shadow-colored: 0px 0px 2px 2px var(--tw-shadow-color);
      box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
    }
    &.slick-hidden {
      display: block;
    }
    &.visually-hidden {
      visibility: visible;
      clip: unset;
    }
  }
  .slick__slider {
    margin: 0 1rem;
    @media (min-width: 640px) {
      margin: 0 4.25rem;
    }
    .slick-list {

      .slick-slide {
        @media (min-width: 640px) {
          padding: 1rem;
        }
        article {
          max-width: 100%;
            > div {
              height: 100%;
            }

          &.media {
            height: 100%;
            padding: 0;
          }
          @media (min-width: 640px) {
            flex-direction: row;
          }
        }
        img {
          height: 100%;
          object-fit: scale-down;
        }
        .node-page {
          article {
            width: 100%;
          }
        }
        .card-content {
          position: relative;
          .fulltext_on_hover {
            display: none;
          }
          &:hover {
            .fulltext_on_hover {
              display: block;
              /*padding*/
            }
          }
        }
      }
    }
  }
}

.slide-heading {
  font-size: 1.5rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-transform: uppercase;
  line-height: 2rem;
  font-weight: 400;
  @media (min-width: 1280px) {
    font-size: 2rem;
    line-height: 2.5rem;

  }
  &.altersbereich {
    > div {
      > div:last-child {
        font-weight: 700;
      }
    }
  }
}

.slideshow {
  .fp-imageloader {
    div {
      height: 100%;
      margin-bottom: 0;
    }
  }
  h1 {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
  }
  h1 .headline {
    display: block;
    background-color: rgba(var(--primary-200, 0, 0, 0), .8);
    padding-left: .5rem;
    padding-right: .5rem;
    width: fit-content;
  }
  h1 .headline.sub {
    margin-top: .25rem;
    font-weight: 700;

    &.font-normal {
      font-weight: 400;
    }
  }
  @media (min-width: 640px) {
    h1 {
      font-size: 2rem;
    }
    h1 .headline.sub {
      margin-top: .5rem;
    }
  }
  @media (min-width: 1280px) {
    h1 {
      font-size: 2.25rem;
    }
  }
  @media (min-width: 1920px) {
    .fp-imageloader {
      height: 45rem !important;
    }
  }
  @media (min-width: 2560px) {
    .fp-imageloader {
      height: 52rem !important;
    }
  }
}

.view-full {
  .views-element-container {
    width: 100%;
  }
}

.slick--optionset--paragraphslider {
  .slick__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    bottom: auto;
    margin-top: -1px;
    transform: translateY(-50%);
    .slick-arrow {
      height: 2rem;
      width: 2rem;
      pointer-events: none;
      @media (min-width: 640px) {
        height: 3rem;
        width: 3rem;
      }

      &.previous {
        right: auto;
        left: 0;
      }

      &.next {
        left: auto;
        right: 0;
      }

      .svg-inline--fa {
        height: 1.25rem;
        width: 1.25rem;
        margin: auto;
      }

      &:hover {
        cursor: pointer;
        --tw-shadow: 0px 0px 2px 2px #5ca0ff;
        --tw-shadow-colored: 0px 0px 2px 2px var(--tw-shadow-color);
        box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
      }
    }
  }
}

.slick-disabled {
  opacity: .3;
}

.slick--less {
  .slick__slider {
    .slick-list {
      padding: 0;
      .news-card {
        margin: 0 auto;
        text-align: left;
      }
    }
  }
  nav {
    opacity: .25;
    svg {
      height: 100%;
    }
    button {
      &:hover {
        cursor: default;
      }
    }
  }
}
.slick-dots {
  bottom: -4.5rem;
  li {
    width: 36px;
    height: 36px;
    button {
      width: 36px;
      height: 36px;
      display: inline-block;
      .slick-dot-icon {
        width: 36px;
        height: 36px;
        display: inline-block;
        position: relative;
        &::before {
          font-size: 36px;
        }
      }
    }
    &.slick-active {
      button {
        .slick-dot-icon {
          &::before {
            font-size: 36px;
            margin: 0;
          }
        }
      }
    }
  }
}

.page-node-type-homepage {
  .slick--less {
    nav {
      opacity: 0;
      display: none;
    }
  }
}