.gkk-hero-slider {
    --gkk-hero-height: 500px;

    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.45;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-horizontal-gap: 6px;

    position: relative;
    display: block;
    width: 100%;
    height: var(--gkk-hero-height);
    min-height: var(--gkk-hero-height);
    overflow: hidden;
    background-color: #111;
}

/*
 * Layout 1
 */
.gkk-hero-slider[data-layout="1"] {
    --gkk-hero-height: 700px;
}

/*
 * Layout 2: volle Bildschirmhöhe
 */
.gkk-hero-slider[data-layout="2"] {
    --gkk-hero-height: 100vh;
    --gkk-hero-height: 100svh;
}

/*
 * Swiper selbst und alle inneren Elemente
 * müssen die Höhe des äußeren Elements übernehmen.
 */
.gkk-hero-slider > .swiper,
.gkk-hero-slider .swiper-wrapper,
.gkk-hero-slider .swiper-slide {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.gkk-hero-slider .swiper {
    position: relative;
    display: block;
    overflow: hidden;
}

.gkk-hero-slider .swiper-wrapper {
    position: relative;
    display: flex;
    box-sizing: content-box;
}

.gkk-hero-slider .swiper-slide {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

/*
 * Medienebene füllt den kompletten Slide aus.
 */
.gkk-hero-slider__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*
 * Globale img/video-Regeln wie height:auto
 * werden hier bewusst überschrieben.
 */
.gkk-hero-slider__image,
.gkk-hero-slider__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center center;
}

/*
 * Video-Browser setzen teilweise eigene
 * Seitenverhältnisse und Größen.
 */
.gkk-hero-slider__video {
    border: 0;
}

/*
 * Dunkles Overlay.
 */
.gkk-hero-slider__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.55);
}

/*
 * Inhalt über Bild und Overlay.
 */
.gkk-hero-slider__content {
    position: absolute;
    z-index: 2;
    inset: 0;

    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;

}

.gkk-hero-slider__content > .container {
    width: 100%;
    max-width: 1170px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.gkk-hero-slider__copy {
    width: min(100%, 70rem);
    transform: translateY(55px);
}

.gkk-hero-slider__title {
    max-width: 65rem;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.75rem);
    line-height: 1.08;
    transform-origin: left center;
}

.gkk-hero-slider__cta {
    display: inline-flex;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    transform-origin: left center;
}

.gkk-hero-slider__play {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 80px;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transform-origin: center;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.gkk-hero-slider__play i {
    display: block;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.gkk-hero-slider__play:hover,
.gkk-hero-slider__play:focus,
.gkk-hero-slider__play:focus-visible {
    border: 0;
    background: transparent;
    color: #fff;
    text-decoration: none;
    box-shadow: none;
    opacity: 0.85;
    transform: scale(1.06);
}

.gkk-hero-slider .swiper-pagination {
    z-index: 5;
    bottom: 20px;
}

.gkk-hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 7px !important;
    border: 0;
    border-radius: 0;
    background-color: #fff;
    opacity: 1;
    transition: background-color 180ms ease;
}

.gkk-hero-slider .swiper-pagination-bullet-active {
    background-color: #13856f;
}

/*
 * Animation erst aktivieren, wenn Swiper geladen wurde.
 */
.gkk-hero-slider.is-ready .gkk-hero-slider__title,
.gkk-hero-slider.is-ready .gkk-hero-slider__cta {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.75);
}

.gkk-hero-slider.is-ready
.swiper-slide-active
.gkk-hero-slider__title {
    animation: gkk-hero-reveal 500ms 1000ms both
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gkk-hero-slider.is-ready
.swiper-slide-active
.gkk-hero-slider__cta {
    animation: gkk-hero-reveal 500ms 1500ms both
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes gkk-hero-reveal {
    from {
        opacity: 0;
        transform: translateY(1.25rem) scale(0.75);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 767px) {
    .gkk-hero-slider {
        --gkk-hero-height: 500px;
    }

    .gkk-hero-slider[data-layout="1"] {
        --gkk-hero-height: 600px;
    }

    .gkk-hero-slider[data-layout="2"] {
        --gkk-hero-height: 100vh;
        --gkk-hero-height: 100svh;
    }

    .gkk-hero-slider__copy {
        transform: translateY(1.5rem);
    }

    .gkk-hero-slider__title {
        font-size: clamp(1.9rem, 8vw, 3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gkk-hero-slider.is-ready .gkk-hero-slider__title,
    .gkk-hero-slider.is-ready .gkk-hero-slider__cta,
    .gkk-hero-slider.is-ready
    .swiper-slide-active
    .gkk-hero-slider__title,
    .gkk-hero-slider.is-ready
    .swiper-slide-active
    .gkk-hero-slider__cta {
        opacity: 1;
        transform: none;
        animation: none;
    }
}