.aio-slider {
    display: flex;
    flex-direction: column;
    height: 20rem;
}

@media (min-width: 768px) {
    .aio-slider {
        height: 30rem;
    }
}

@media (min-width: 1100px) {
    .aio-slider {
        height: 48rem;
    }
}

.aio-viewbox {
    position: relative;
    width: 100%;
    background-color: #000;
    height: 100%;
}

/* Slider Bild */
.aio-image {
    margin: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: -1000vw;
    opacity: 0;
    /*transition: opacity 1.5s ease-in-out;*/
    transition: opacity 5s ease-in-out;
}

.aio-image.aio-image--loaded {
    left: 0;
    opacity: 0;
    z-index: 5;
}

.aio-image.aio-image--current {
    left: 0;
    opacity: 100;
    z-index: 2;
}

.aio-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Bildbeschriftung */
.aio-caption {
    position: absolute;
    bottom: 1rem;
}

.aio-caption.center {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.aio-caption.left {
    left: 1rem;
}

.aio-caption.right {
    right: 1rem;
}

/* Slider arrows */
.aio-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3rem;
    width: 2rem;
    padding: 0.5rem;
    background-color: #ffffff88;
    /*background: rgb(221,221,221);*/
    /*background: linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 95%);*/
    cursor: pointer;
    z-index: 10;
}

/* Für Touschscreens blenden wir die Pfeile aus */
@media (hover: none) {
    .aio-arrow.aio-no-touch {
        display: none;
    }
}

.aio-arrow:hover .aio-arrow-inner {
    filter: invert(58%) sepia(98%) saturate(1246%) hue-rotate(5deg) brightness(94%) contrast(101%);
}

.aio-arrow.aio-arrow--left {
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

.aio-arrow.aio-arrow--right {
    border-top-left-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
}

.aio-arrow--left {
    left: 0;
    text-align: start;
}

.aio-arrow--right {
    right: 0;
    text-align: end;
}

.aio-arrow-inner {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position-y: center;
}

.aio-arrow--left .aio-arrow-inner {
    background-image: url("./icons/arrow-left.svg");
    background-position-x: left;
}

.aio-arrow--right .aio-arrow-inner {
    background-image: url("./icons/arrow-right.svg");
    background-position-x: right;
}

/* Thumbnailbar */
.aio-thumbnail-bar {
    width: 100%;
    scrollbar-width: none; /* nur für Firefox */
}

/* Für Site Editor Preview; thumbnails overflowen ansonsten */
.editor-styles-wrapper .aio-thumbnail-bar {
    overflow: hidden;
}

/* für Chrome & Safari */
.aio-thumbnail-bar::-webkit-scrollbar {
    display: none;
}

/* Bessere Ansicht der Block Preview im Editor */
.acf-block-preview .aio-thumbnail-bar {
    display: flex;
}

.aio-thumbnail {
    margin: 0;
    filter: brightness(0.5);
    transition: filter 0.4s ease-in-out;
}

.aio-thumbnail--current {
    filter: brightness(1);
}

/* glider CSS Anpassungen */
.glider.draggable {
    cursor: pointer;
}