.skhs-slider {
    --skhs-height-desktop: 760px;
    --skhs-height-mobile: 620px;
    --skhs-overlay: .28;
    --skhs-font: inherit;
    --skhs-horizontal-desktop: center;
    --skhs-vertical-desktop: middle;
    --skhs-horizontal-mobile: center;
    --skhs-vertical-mobile: bottom;
    --skhs-title-desktop: 112px;
    --skhs-title-mobile: 64px;
    --skhs-subtitle-desktop: 35px;
    --skhs-subtitle-mobile: 24px;
    --skhs-title-weight: 800;
    --skhs-subtitle-weight: 500;
    --skhs-text-color: #fff;
    --skhs-text-width-desktop: 760px;
    --skhs-text-width-mobile: 520px;
    position: relative;
    width: 100%;
    min-height: var(--skhs-height-desktop);
    overflow: hidden;
    background: #111;
    isolation: isolate;
    z-index: 0;
}

.skhs-slides,
.skhs-slide,
.skhs-overlay {
    position: absolute;
    inset: 0;
}

.skhs-slide {
    opacity: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.035);
    transition: opacity 1.1s ease, transform 7s ease;
    will-change: opacity, transform;
}

.skhs-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.skhs-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, var(--skhs-overlay));
}

.skhs-content {
    position: relative;
    z-index: 2;
    width: min(1080px, calc(100% - 48px));
    min-height: var(--skhs-height-desktop);
    margin: 0 auto;
    display: flex;
    padding: 72px 0 88px;
    box-sizing: border-box;
}

.skhs-copy {
    width: min(var(--skhs-text-width-desktop), 100%);
    color: var(--skhs-text-color);
    font-family: var(--skhs-font);
    text-shadow: 0 2px 20px rgba(0,0,0,.22);
}

/* Horizontale Position des gesamten Textblocks */
.skhs-slider[style*="--skhs-horizontal-desktop:left"] .skhs-content { justify-content: flex-start; }
.skhs-slider[style*="--skhs-horizontal-desktop:center"] .skhs-content { justify-content: center; }
.skhs-slider[style*="--skhs-horizontal-desktop:right"] .skhs-content { justify-content: flex-end; }

.skhs-slider[style*="--skhs-horizontal-desktop:left"] .skhs-copy { text-align: left; }
.skhs-slider[style*="--skhs-horizontal-desktop:center"] .skhs-copy { text-align: center; }
.skhs-slider[style*="--skhs-horizontal-desktop:right"] .skhs-copy { text-align: right; }

/* Vertikale Position */
.skhs-slider[style*="--skhs-vertical-desktop:top"] .skhs-content { align-items: flex-start; }
.skhs-slider[style*="--skhs-vertical-desktop:middle"] .skhs-content { align-items: center; }
.skhs-slider[style*="--skhs-vertical-desktop:bottom"] .skhs-content { align-items: flex-end; }

.skhs-title {
    margin: 0 0 .18em !important;
    padding: 0 !important;
    color: var(--skhs-text-color) !important;
    font-family: inherit !important;
    font-size: var(--skhs-title-desktop) !important;
    line-height: .94 !important;
    letter-spacing: -.045em;
    font-weight: var(--skhs-title-weight) !important;
    max-width: 100%;
}

.skhs-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--skhs-text-color) !important;
    font-family: inherit !important;
    max-width: 100%;
    font-size: var(--skhs-subtitle-desktop) !important;
    line-height: 1.17 !important;
    font-weight: var(--skhs-subtitle-weight) !important;
}

/* Auch die Elemente selbst passend im Block ausrichten */
.skhs-slider[style*="--skhs-horizontal-desktop:left"] .skhs-title,
.skhs-slider[style*="--skhs-horizontal-desktop:left"] .skhs-subtitle { margin-left: 0 !important; margin-right: auto !important; }
.skhs-slider[style*="--skhs-horizontal-desktop:center"] .skhs-title,
.skhs-slider[style*="--skhs-horizontal-desktop:center"] .skhs-subtitle { margin-left: auto !important; margin-right: auto !important; }
.skhs-slider[style*="--skhs-horizontal-desktop:right"] .skhs-title,
.skhs-slider[style*="--skhs-horizontal-desktop:right"] .skhs-subtitle { margin-left: auto !important; margin-right: 0 !important; }

.skhs-dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.skhs-dot {
    appearance: none;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.skhs-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

.skhs-empty {
    padding: 24px;
    background: #fff5cc;
    border: 1px solid #e7c94f;
}

@media (max-width: 767px) {
    .skhs-slider,
    .skhs-content {
        min-height: var(--skhs-height-mobile);
    }

    .skhs-content {
        width: min(100% - 32px, 1080px);
        padding: 56px 0 84px;
    }

    .skhs-slider[style*="--skhs-horizontal-mobile:left"] .skhs-content { justify-content: flex-start; }
    .skhs-slider[style*="--skhs-horizontal-mobile:center"] .skhs-content { justify-content: center; }
    .skhs-slider[style*="--skhs-horizontal-mobile:right"] .skhs-content { justify-content: flex-end; }

    .skhs-slider[style*="--skhs-horizontal-mobile:left"] .skhs-copy { text-align: left; }
    .skhs-slider[style*="--skhs-horizontal-mobile:center"] .skhs-copy { text-align: center; }
    .skhs-slider[style*="--skhs-horizontal-mobile:right"] .skhs-copy { text-align: right; }

    .skhs-slider[style*="--skhs-vertical-mobile:top"] .skhs-content { align-items: flex-start; }
    .skhs-slider[style*="--skhs-vertical-mobile:middle"] .skhs-content { align-items: center; }
    .skhs-slider[style*="--skhs-vertical-mobile:bottom"] .skhs-content { align-items: flex-end; }

    .skhs-copy {
        width: min(var(--skhs-text-width-mobile), 100%);
    }

    .skhs-title {
        font-size: var(--skhs-title-mobile) !important;
        max-width: 100%;
    }

    .skhs-subtitle {
        font-size: var(--skhs-subtitle-mobile) !important;
    }

    .skhs-slider[style*="--skhs-horizontal-mobile:left"] .skhs-title,
    .skhs-slider[style*="--skhs-horizontal-mobile:left"] .skhs-subtitle { margin-left: 0 !important; margin-right: auto !important; }
    .skhs-slider[style*="--skhs-horizontal-mobile:center"] .skhs-title,
    .skhs-slider[style*="--skhs-horizontal-mobile:center"] .skhs-subtitle { margin-left: auto !important; margin-right: auto !important; }
    .skhs-slider[style*="--skhs-horizontal-mobile:right"] .skhs-title,
    .skhs-slider[style*="--skhs-horizontal-mobile:right"] .skhs-subtitle { margin-left: auto !important; margin-right: 0 !important; }
}


/* Divi-Header und Navigation immer oberhalb des Sliders halten.
   Es wird nur der z-index gesetzt, damit sticky/fixed Header-Einstellungen erhalten bleiben. */
#main-header,
#top-header,
.et-l--header,
.et-l--header .et_builder_inner_content,
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu__menu,
.et-l--header .et_mobile_nav_menu,
.et-l--header .mobile_nav,
.et-l--header .et_mobile_menu {
    z-index: 99999 !important;
}

/* Der Slider bleibt in seinem eigenen, niedrigen Stapelkontext. */
.skhs-slider,
.skhs-slider .skhs-slides,
.skhs-slider .skhs-content,
.skhs-slider .skhs-dots {
    position: relative;
}

.skhs-slider {
    z-index: 0 !important;
}

.skhs-slider .skhs-slides {
    position: absolute;
    z-index: 0;
}

.skhs-slider .skhs-content {
    z-index: 2;
}

.skhs-slider .skhs-dots {
    position: absolute;
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .skhs-slide {
        transition: opacity .2s linear;
        transform: none;
    }
}