/*!
 * WAB Slider – Grundlayout, Navigation und Text-Animationen.
 * Farben und Abstände lassen sich über die CSS-Variablen in .wab-slider im eigenen Theme überschreiben.
 */

.wab-slider {
    --wab-gap: 0px;
    --wab-inset: 6%;
    --wab-content-max: 640px;
    --wab-nav-bg: rgba(255, 255, 255, .85);
    --wab-nav-color: #111;
    --wab-dot-color: rgba(255, 255, 255, .5);
    --wab-dot-active: #fff;
    --wab-btn-radius: var(--wab-radius-button, 4px);
    --wab-headline-size: var(--wab-h1-size, clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem));
    position: relative;
}

.wab-slider--nav-dark {
    --wab-nav-bg: rgba(0, 0, 0, .65);
    --wab-nav-color: #fff;
    --wab-dot-color: rgba(0, 0, 0, .3);
    --wab-dot-active: #111;
}

/* Vor der Initialisierung nur den ersten Slide zeigen */
.wab-slider__track:not(.slick-initialized) > .wab-slide ~ .wab-slide {
    display: none;
}

/* Abstand zwischen den Slides */
.wab-slider .wab-slider__track .slick-list {
    margin: 0 calc(var(--wab-gap) / -2);
}

.wab-slider .wab-slider__track .slick-slide {
    box-sizing: border-box;
    padding: 0 calc(var(--wab-gap) / 2);
}

/* ------------------------------------------------------------------ */
/* Slide und Höhe                                                      */
/* ------------------------------------------------------------------ */

.wab-slide {
    position: relative;
}

.wab-slide__inner {
    position: relative;
    overflow: hidden;
}

.wab-slider--height-fixed .wab-slide__inner {
    height: var(--wab-height);
}

.wab-slider--height-ratio .wab-slide__inner {
    aspect-ratio: var(--wab-ratio);
}

@media (max-width: 1024px) {
    .wab-slider--height-fixed .wab-slide__inner {
        height: var(--wab-height-md);
    }
}

@media (max-width: 767px) {
    .wab-slider--height-fixed .wab-slide__inner {
        height: var(--wab-height-sm);
    }

    .wab-slider--height-ratio .wab-slide__inner {
        aspect-ratio: var(--wab-ratio-sm);
    }
}

/* ------------------------------------------------------------------ */
/* Medien                                                              */
/* ------------------------------------------------------------------ */

.wab-slide__media,
.wab-slide__media figure {
    position: relative;
    margin: 0;
}

.wab-slide__media img,
.wab-slide__video {
    display: block;
    width: 100%;
    height: auto;
}

.wab-slider--height-fixed .wab-slide__media,
.wab-slider--height-ratio .wab-slide__media {
    position: absolute;
    inset: 0;
}

.wab-slider--height-fixed .wab-slide__media figure,
.wab-slider--height-ratio .wab-slide__media figure,
.wab-slider--height-fixed .wab-slide__media picture,
.wab-slider--height-ratio .wab-slide__media picture {
    height: 100%;
}

.wab-slider--height-fixed .wab-slide__media img,
.wab-slider--height-ratio .wab-slide__media img,
.wab-slider--height-fixed .wab-slide__video,
.wab-slider--height-ratio .wab-slide__video,
.wab-slide__video.is-cover {
    height: 100%;
    object-fit: cover;
    object-position: var(--wab-object-position, center);
}

.wab-slider--height-fixed .wab-slide__video,
.wab-slider--height-ratio .wab-slide__video {
    position: absolute;
    inset: 0;
}

/* Alternatives Bild für Smartphones */
.wab-slide__figure--mobile {
    display: none;
}

@media (max-width: 767px) {
    .wab-slide__media:has(.wab-slide__figure--mobile) .wab-slide__figure:not(.wab-slide__figure--mobile) {
        display: none;
    }

    .wab-slide__figure--mobile {
        display: block;
    }
}

/* YouTube / Vimeo */
.wab-slide__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    container-type: size;
}

.wab-slider--height-fixed .wab-slide__embed,
.wab-slider--height-ratio .wab-slide__embed {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.wab-slide__embed figure,
.wab-slide__embed figure picture,
.wab-slide__embed figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s;
}

.wab-slide__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hintergrundvideo: 16:9-Player füllt die Fläche vollständig aus */
.wab-slide__embed.is-cover iframe {
    inset: auto;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.wab-slide__embed.is-loaded figure {
    opacity: 0;
    pointer-events: none;
}

.wab-slide__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background .2s, transform .2s;
}

.wab-slide__play:hover,
.wab-slide__play:focus-visible {
    background: rgba(0, 0, 0, .85);
    transform: translate(-50%, -50%) scale(1.08);
}

.wab-slide__play svg {
    width: 36px;
    height: 36px;
    margin-left: 4px;
    fill: currentColor;
}

.wab-slide__consent {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 4;
    width: max-content;
    max-width: 90%;
    margin: 0;
    padding: 4px 10px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .75rem;
    text-align: center;
    transform: translateX(-50%);
}

.is-loaded > .wab-slide__play,
.is-loaded > .wab-slide__consent {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Overlay, Link, Inhalt                                               */
/* ------------------------------------------------------------------ */

.wab-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.wab-slide__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.wab-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wab-slide__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    padding: var(--wab-inset);
    pointer-events: none;
}

/* Automatische Höhe: Bild und Text liegen in derselben Rasterzelle. Ist der Text höher als das Bild,
   wächst der Slide mit und das Bild füllt die Fläche (cover), statt den Text abzuschneiden. */
.wab-slider--height-auto .wab-slide__inner {
    display: grid;
}

/* Alle Slides so hoch wie der höchste, sonst blitzt beim Überblenden unter kürzeren Slides der Hintergrund durch */
.wab-slider--height-auto .slick-track {
    display: flex;
}

.wab-slider--height-auto .slick-track > .wab-slide {
    display: flex;
    flex-direction: column;
    float: none;
    height: auto;
}

.wab-slider--height-auto .slick-track > .wab-slide > .wab-slide__inner {
    flex: 1 0 auto;
}

.wab-slider--height-auto .wab-slide__media,
.wab-slider--height-auto .wab-slide__content {
    grid-area: 1 / 1;
}

.wab-slider--height-auto .wab-slide__content {
    position: relative;
    inset: auto;
}

.wab-slider--height-auto .wab-slide__media figure,
.wab-slider--height-auto .wab-slide__media picture {
    height: 100%;
}

.wab-slider--height-auto .wab-slide__media img,
.wab-slider--height-auto .wab-slide__video {
    height: 100%;
    object-fit: cover;
    object-position: var(--wab-object-position, center);
}

.wab-slide__box {
    max-width: var(--wab-content-max);
    pointer-events: auto;
}

/* Feste Größen: Box nimmt die Breite immer ein, wird aber nie breiter als der Slide */
.wab-slide__box--size-s,
.wab-slide__box--size-m,
.wab-slide__box--size-l,
.wab-slide__box--size-xl,
.wab-slide__box--size-full {
    box-sizing: border-box;
    width: min(100%, var(--wab-content-max));
    max-width: none;
}

/* Stufen deutlich abgesetzt von „Automatisch“ (Standard 640px Text + Innenabstand ≈ 720px) */
.wab-slide__box--size-s { --wab-content-max: 440px; }
.wab-slide__box--size-m { --wab-content-max: 580px; }
.wab-slide__box--size-l { --wab-content-max: 880px; }
.wab-slide__box--size-xl { --wab-content-max: 1080px; }
.wab-slide__box--size-full { --wab-content-max: 100%; }

.wab-slide__box > :first-child { margin-top: 0; }
.wab-slide__box > :last-child { margin-bottom: 0; }

.wab-slide__box--dark,
.wab-slide__box--light,
.wab-slide__box--blur {
    padding: clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--wab-radius-box, 6px);
}

.wab-slide__box--dark { background: rgba(0, 0, 0, .6); }
.wab-slide__box--light { background: rgba(255, 255, 255, .88); }
.wab-slide__box--blur {
    background: rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Positionen: justify = waagerecht, align = senkrecht */
.wab-pos--top-left { justify-content: flex-start; align-items: flex-start; }
.wab-pos--top-center { justify-content: center; align-items: flex-start; }
.wab-pos--top-right { justify-content: flex-end; align-items: flex-start; }
.wab-pos--center-left { justify-content: flex-start; align-items: center; }
.wab-pos--center-center { justify-content: center; align-items: center; }
.wab-pos--center-right { justify-content: flex-end; align-items: center; }
.wab-pos--bottom-left { justify-content: flex-start; align-items: flex-end; }
.wab-pos--bottom-center { justify-content: center; align-items: flex-end; }
.wab-pos--bottom-right { justify-content: flex-end; align-items: flex-end; }

@media (max-width: 767px) {
    .wab-pos-sm--top-left { justify-content: flex-start; align-items: flex-start; }
    .wab-pos-sm--top-center { justify-content: center; align-items: flex-start; }
    .wab-pos-sm--top-right { justify-content: flex-end; align-items: flex-start; }
    .wab-pos-sm--center-left { justify-content: flex-start; align-items: center; }
    .wab-pos-sm--center-center { justify-content: center; align-items: center; }
    .wab-pos-sm--center-right { justify-content: flex-end; align-items: center; }
    .wab-pos-sm--bottom-left { justify-content: flex-start; align-items: flex-end; }
    .wab-pos-sm--bottom-center { justify-content: center; align-items: flex-end; }
    .wab-pos-sm--bottom-right { justify-content: flex-end; align-items: flex-end; }
}

/* Typografie */
.wab-slide--text-light .wab-slide__content { color: #fff; }
.wab-slide--text-dark .wab-slide__content { color: #111; }
.wab-slide--text-light .wab-slide__box--none { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.wab-slide__box--light { color: #111; text-shadow: none; }

.wab-slide__topline {
    margin: 0 0 .5em;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wab-slide__headline {
    margin: 0 0 .4em;
    color: inherit;
    font-size: var(--wab-headline-size);
    line-height: 1.1;
}

.wab-slide__text {
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    line-height: 1.5;
}

.wab-slide__text a { color: inherit; }

.wab-slide__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25em;
}

.wab-slide__box[style*="center"] .wab-slide__links { justify-content: center; }
.wab-slide__box[style*="right"] .wab-slide__links { justify-content: flex-end; }

/* Buttons */
.wab-btn {
    display: inline-block;
    padding: .75em 1.6em;
    border: 2px solid transparent;
    border-radius: var(--wab-btn-radius);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}

.wab-btn:hover,
.wab-btn:focus-visible {
    transform: translateY(-2px);
}

.wab-slide--text-light .wab-btn--primary { background: #fff; color: #111; }
.wab-slide--text-dark .wab-btn--primary,
.wab-slide__box--light .wab-btn--primary { background: #111; color: #fff; }
.wab-btn--secondary { background: rgba(127, 127, 127, .35); color: inherit; }
.wab-btn--outline { border-color: currentColor; color: inherit; }
.wab-btn--outline:hover { background: rgba(127, 127, 127, .2); }
.wab-btn--text { padding-inline: 0; color: inherit; text-decoration: underline; text-underline-offset: .25em; }

/* ------------------------------------------------------------------ */
/* Pfeile                                                              */
/* ------------------------------------------------------------------ */

.wab-slider .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: var(--wab-nav-bg);
    color: var(--wab-nav-color);
    font-size: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .2s, background .2s;
}

.wab-slider .slick-arrow::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.wab-slider .slick-prev::before { margin-left: 5px; transform: rotate(-135deg); }
.wab-slider .slick-next::before { margin-right: 5px; transform: rotate(45deg); }
.wab-slider .slick-arrow.slick-disabled { opacity: .35; cursor: default; }
.wab-slider .slick-arrow:hover:not(.slick-disabled) { opacity: .85; }

.wab-slider--arrows-circle .slick-arrow { border-radius: 50%; }
.wab-slider--arrows-square .slick-arrow { border-radius: 0; }
.wab-slider--arrows-plain .slick-arrow { background: none; color: var(--wab-dot-active); }
.wab-slider--arrows-plain .slick-arrow::before { width: 20px; height: 20px; }

.wab-slider--arrows-inside .slick-prev { left: 16px; }
.wab-slider--arrows-inside .slick-next { right: 16px; }

.wab-slider--arrows-outside { padding-inline: 64px; }
.wab-slider--arrows-outside .slick-prev { left: -64px; }
.wab-slider--arrows-outside .slick-next { right: -64px; }
.wab-slider--arrows-outside.wab-slider--nav-light .slick-arrow { box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }

[dir="rtl"] .slick-prev { right: 16px; left: auto; }
[dir="rtl"] .slick-next { right: auto; left: 16px; }

/* Vertikaler Slider: Pfeile oben und unten */
.wab-slider .slick-vertical .slick-prev { top: 16px; left: 50%; transform: translateX(-50%) rotate(90deg); }
.wab-slider .slick-vertical .slick-next { top: auto; bottom: 16px; left: 50%; right: auto; transform: translateX(-50%) rotate(90deg); }

@media (max-width: 767px) {
    .wab-slider--arrows-outside { padding-inline: 0; }
    .wab-slider--arrows-outside .slick-prev { left: 8px; }
    .wab-slider--arrows-outside .slick-next { right: 8px; }
    .wab-slider .slick-arrow { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------------ */
/* Punkte                                                              */
/* ------------------------------------------------------------------ */

.wab-slider .slick-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wab-slider--dots-inside .slick-dots {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 5;
}

.wab-slider--dots-below .slick-dots {
    margin-top: 14px;
    --wab-dot-color: rgba(0, 0, 0, .25);
    --wab-dot-active: #111;
}

.wab-slider--dots-below.wab-slider--nav-dark .slick-dots {
    --wab-dot-color: rgba(0, 0, 0, .25);
    --wab-dot-active: #111;
}

.wab-slider .slick-dots li { margin: 0; padding: 0; }
.wab-slider .slick-dots li::before { display: none; }

.wab-slider .slick-dots button {
    display: block;
    padding: 0;
    border: 0;
    background: var(--wab-dot-color);
    cursor: pointer;
    transition: background .2s, width .2s;
}

.wab-slider .slick-dots .slick-active button { background: var(--wab-dot-active); }

.wab-slider--dots-dots .slick-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    font-size: 0;
}

.wab-slider--dots-lines .slick-dots button {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    font-size: 0;
}

.wab-slider--dots-lines .slick-dots .slick-active button { width: 44px; }

.wab-slider--dots-numbers .slick-dots button {
    min-width: 30px;
    height: 30px;
    border-radius: 15px;
    color: var(--wab-nav-color);
    font-size: .8rem;
    font-weight: 600;
}

.wab-slider--dots-numbers .slick-dots .slick-active button { color: var(--wab-nav-bg); }

/* ------------------------------------------------------------------ */
/* Thumbnail-Navigation                                                */
/* ------------------------------------------------------------------ */

.wab-slider__thumbs {
    margin-top: 8px;
}

.wab-slider__thumbs .slick-list { margin: 0 -4px; }

.wab-slider__thumb {
    box-sizing: border-box;
    padding: 0 4px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
}

.wab-slider__thumb:hover,
.wab-slider__thumb.slick-current { opacity: 1; }
.wab-slider__thumb figure { margin: 0; }
.wab-slider__thumb img { display: block; width: 100%; height: auto; }

.wab-slider__thumb-title {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 4px;
    background: #eee;
    font-size: .75rem;
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Text-Animationen                                                    */
/* ------------------------------------------------------------------ */

.wab-slider--js [data-wab-anim] {
    opacity: 0;
}

.wab-slider--js .is-animated [data-wab-anim] {
    animation-duration: var(--wab-anim-duration, 800ms);
    animation-timing-function: var(--wab-anim-easing, ease);
    animation-delay: var(--wab-anim-delay, 0ms);
    animation-fill-mode: both;
}

.is-animated [data-wab-anim="fade"] { animation-name: wab-fade; }
.is-animated [data-wab-anim="fadeUp"] { animation-name: wab-fade-up; }
.is-animated [data-wab-anim="fadeDown"] { animation-name: wab-fade-down; }
.is-animated [data-wab-anim="fadeLeft"] { animation-name: wab-fade-left; }
.is-animated [data-wab-anim="fadeRight"] { animation-name: wab-fade-right; }
.is-animated [data-wab-anim="zoomIn"] { animation-name: wab-zoom-in; }
.is-animated [data-wab-anim="zoomOut"] { animation-name: wab-zoom-out; }
.is-animated [data-wab-anim="slideUp"] { animation-name: wab-slide-up; }
.is-animated [data-wab-anim="slideDown"] { animation-name: wab-slide-down; }
.is-animated [data-wab-anim="slideLeft"] { animation-name: wab-slide-left; }
.is-animated [data-wab-anim="slideRight"] { animation-name: wab-slide-right; }
.is-animated [data-wab-anim="flipX"] { animation-name: wab-flip-x; }
.is-animated [data-wab-anim="flipY"] { animation-name: wab-flip-y; }
.is-animated [data-wab-anim="rotateIn"] { animation-name: wab-rotate-in; }
.is-animated [data-wab-anim="blurIn"] { animation-name: wab-blur-in; }
.is-animated [data-wab-anim="bounceIn"] { animation-name: wab-bounce-in; }
.is-animated [data-wab-anim="trackingIn"] { animation-name: wab-tracking-in; }
.is-animated [data-wab-anim="revealRight"] { animation-name: wab-reveal-right; }
.is-animated [data-wab-anim="revealUp"] { animation-name: wab-reveal-up; }

@keyframes wab-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wab-fade-up { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes wab-fade-down { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes wab-fade-left { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes wab-fade-right { from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes wab-zoom-in { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }
@keyframes wab-zoom-out { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }
@keyframes wab-slide-up { from { opacity: 0; transform: translate3d(0, 100vh, 0); } 1% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wab-slide-down { from { opacity: 0; transform: translate3d(0, -100vh, 0); } 1% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wab-slide-left { from { opacity: 0; transform: translate3d(-100vw, 0, 0); } 1% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wab-slide-right { from { opacity: 0; transform: translate3d(100vw, 0, 0); } 1% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wab-flip-x { from { opacity: 0; transform: perspective(600px) rotateX(90deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes wab-flip-y { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } to { opacity: 1; transform: perspective(600px) rotateY(0); } }
@keyframes wab-rotate-in { from { opacity: 0; transform: rotate(-12deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wab-blur-in { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes wab-bounce-in {
    0% { opacity: 0; transform: scale(.3); }
    50% { opacity: 1; transform: scale(1.06); }
    70% { transform: scale(.95); }
    100% { opacity: 1; transform: none; }
}
@keyframes wab-tracking-in { from { opacity: 0; letter-spacing: -.5em; } 40% { opacity: .6; } to { opacity: 1; letter-spacing: normal; } }
@keyframes wab-reveal-right { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes wab-reveal-up { from { opacity: 1; clip-path: inset(100% 0 0 0); transform: translate3d(0, 20px, 0); } to { opacity: 1; clip-path: inset(0); transform: none; } }

/*
 * „Bewegung reduzieren“ im Betriebssystem (unter Windows z. B. „Animationen in Windows anzeigen“ = aus):
 * rm-soft = nur nacheinander einblenden, ohne Bewegung; rm-off = keine Animation; rm-full = ignorieren
 */
@media (prefers-reduced-motion: reduce) {
    .wab-slider--rm-soft .is-animated [data-wab-anim] {
        animation-name: wab-fade !important;
    }

    .wab-slider--rm-off.wab-slider--js [data-wab-anim] {
        opacity: 1;
        animation: none !important;
    }
}