.wp-block-bitv-slide-frame.slide-frame { display: flex; flex-direction: column; gap: calc(var(--bitv-gap-module, 24px) / 2); width: 100%; position: relative; --bitv-slide-pfeil: 44px; --bitv-slide-anschnitt: calc(var(--bitv-slide-pfeil) + 18px); --bitv-slide-schatten: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.14); --bitv-slide-schattenraum: 32px; --bitv-slide-schatten-nachbar: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18); } @media (max-width: 767.98px) { .wp-block-bitv-slide-frame.slide-frame { margin-bottom: calc(var(--bitv-slide-pfeil) / 2); } } .gray .wp-block-bitv-slide-frame.slide-frame { --bitv-slide-schatten: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); --bitv-slide-schatten-nachbar: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); } .wp-block-bitv-slide-frame .swiper-slide { width: calc(100% - 2 * var(--bitv-slide-anschnitt)); } .wp-block-bitv-slide-frame.slide-frame .swiper-slide { height: auto; } .wp-block-bitv-slide-frame .slide-frame__viewport { width: 100%; padding-block: var(--bitv-slide-schattenraum); margin-block: calc(-1 * var(--bitv-slide-schattenraum)); } .wp-block-bitv-slide-frame .swiper-slide-active { box-shadow: var(--bitv-slide-schatten); } .wp-block-bitv-slide-frame .swiper-slide:not(.swiper-slide-active) { cursor: pointer; } .wp-block-bitv-slide-frame .swiper-slide:not(.swiper-slide-active) { box-shadow: var(--bitv-slide-schatten-nachbar); } .wp-block-bitv-slide-frame .swiper-slide:not(.swiper-slide-active) .wp-block-image img { filter: grayscale(1); opacity: 0.25; transition: opacity 0.25s ease, filter 0.25s ease; } .wp-block-bitv-slide-frame .swiper-slide { transition: box-shadow 0.35s ease; } @media (prefers-reduced-motion: reduce) { .wp-block-bitv-slide-frame .swiper-slide { transition: none; } } .wp-block-bitv-slide-frame .slide-frame__nav { position: absolute; top: calc(100% - var(--bitv-slide-pfeil) / 2); width: var(--bitv-slide-pfeil); height: var(--bitv-slide-pfeil); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: #1F5DA6; color: #fff; cursor: pointer; z-index: 2; } .wp-block-bitv-slide-frame .slide-frame__nav--prev { left: var(--bitv-slide-anschnitt); } .wp-block-bitv-slide-frame .slide-frame__nav--next { right: var(--bitv-slide-anschnitt); } .wp-block-bitv-slide-frame .slide-frame__nav:hover { background: #143C6B; } .wp-block-bitv-slide-frame .slide-frame__nav[aria-disabled="true"] { display: none; } .wp-block-bitv-slide-frame .slide-frame__playpause { position: absolute; top: 0; right: 0; width: var(--bitv-slide-pfeil); height: var(--bitv-slide-pfeil); padding: 0; border: 0; background: #1F5DA6; color: #fff; cursor: pointer; z-index: 2; } .wp-block-bitv-slide-frame .slide-frame__nav[hidden], .wp-block-bitv-slide-frame .slide-frame__playpause[hidden] { display: none; } .wp-block-bitv-slide-frame .slide-frame__nav, .wp-block-bitv-slide-frame .slide-frame__playpause { min-width: 0; margin: 0; line-height: normal; } .wp-block-bitv-slide-frame .slide-frame__nav { margin: 0 -16px; } .wp-block-bitv-slide-frame .slide-frame__nav:focus-visible, .wp-block-bitv-slide-frame .slide-frame__playpause:focus-visible { outline: 4px dotted #1F5DA6; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wp-block-bitv-slide-frame .swiper-wrapper { transition-duration: 0ms !important; } } .wp-block-bitv-slide-frame.perspektive { --bitv-slide-anschnitt: 15.5%; container-type: inline-size; } .wp-block-bitv-slide-frame.perspektive .swiper-slide { transition: transform 0.35s ease, box-shadow 0.35s ease; } .wp-block-bitv-slide-frame.perspektive .swiper-slide-prev { transform-origin: right center; transform: perspective(70.4cqw) rotateY(-70deg); } .wp-block-bitv-slide-frame.perspektive .swiper-slide-next { transform-origin: left center; transform: perspective(70.4cqw) rotateY(70deg); } .wp-block-bitv-slide-frame.perspektive .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) { transform: perspective(70.4cqw) rotateY(-70deg); } .wp-block-bitv-slide-frame.perspektive .swiper-slide:not(.swiper-slide-active) .wp-block-image img { opacity: 0.45; } @media (prefers-reduced-motion: reduce) { .wp-block-bitv-slide-frame.perspektive .swiper-slide { transition: none; } }