/* =========================================================
   ELITE BACKGROUND SLIDER – FRONTEND
   Der Slider ist ausschließlich ein Hintergrund-Layer.
   Enfold-Inhalte bleiben darüber vollständig editierbar.
   ========================================================= */

.ebs-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    isolation: isolate;
}

.ebs-host {
    position: relative !important;
    overflow: hidden;
}

/* Enfold-Content über den Hintergrund legen. */
.ebs-host > .container,
.ebs-host > .av-section-color-overlay-wrap > .container,
.ebs-host > .av-section-color-overlay-wrap,
.ebs-host > .container_wrap {
    position: relative;
    z-index: 2;
}

.ebs-stage,
.ebs-slide,
.ebs-slide__media,
.ebs-slide__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ebs-slide {
    opacity: 0;
    z-index: 0;
    transition: opacity var(--ebs-fade, 1200ms) ease;
    pointer-events: none;
}

.ebs-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.ebs-slide__media {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--ebs-pos-d, 50% 50%);
    transform: scale(1.001);
    transform-origin: center center;
    will-change: transform;
}

.ebs-slide__overlay {
    z-index: 2;
    pointer-events: none;
}

/* =========================================================
   BILDBEWEGUNGEN
   Nur der aktive Slide bewegt sich.
   ========================================================= */

.ebs-effect-ken-in .ebs-slide.is-active .ebs-slide__media {
    animation: ebsKenIn var(--ebs-duration, 5500ms) linear forwards;
}
.ebs-effect-ken-out .ebs-slide.is-active .ebs-slide__media {
    animation: ebsKenOut var(--ebs-duration, 5500ms) linear forwards;
}
.ebs-effect-pan-left .ebs-slide.is-active .ebs-slide__media {
    animation: ebsPanLeft var(--ebs-duration, 5500ms) linear forwards;
}
.ebs-effect-pan-right .ebs-slide.is-active .ebs-slide__media {
    animation: ebsPanRight var(--ebs-duration, 5500ms) linear forwards;
}

@keyframes ebsKenIn {
    from { transform: scale(1.001); }
    to   { transform: scale(calc(1 + (var(--ebs-strength, 6) * .01))); }
}
@keyframes ebsKenOut {
    from { transform: scale(calc(1 + (var(--ebs-strength, 6) * .01))); }
    to   { transform: scale(1.001); }
}
@keyframes ebsPanLeft {
    from { transform: scale(1.06) translateX(calc(var(--ebs-strength, 6) * .18%)); }
    to   { transform: scale(1.06) translateX(calc(var(--ebs-strength, 6) * -.18%)); }
}
@keyframes ebsPanRight {
    from { transform: scale(1.06) translateX(calc(var(--ebs-strength, 6) * -.18%)); }
    to   { transform: scale(1.06) translateX(calc(var(--ebs-strength, 6) * .18%)); }
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.ebs-nav {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ebs-nav-gap, 10px);
    pointer-events: auto;
}

.ebs-nav__item {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: var(--ebs-nav-color, #fff);
    opacity: var(--ebs-nav-opacity, .55);
    cursor: pointer;
    transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}

.ebs-nav__item:hover,
.ebs-nav__item:focus-visible { opacity: 1; }
.ebs-nav__item.is-active { background: var(--ebs-nav-active, #009fe3); opacity: 1; transform: scale(1.08); }

.ebs-nav-small-dot .ebs-nav__item { width: 7px; height: 7px; border-radius: 50%; }
.ebs-nav-large-dot .ebs-nav__item { width: 13px; height: 13px; border-radius: 50%; }
.ebs-nav-ring .ebs-nav__item { width: 13px; height: 13px; border-radius: 50%; background: transparent; border: 1.5px solid var(--ebs-nav-color,#fff); }
.ebs-nav-ring .ebs-nav__item.is-active { background: var(--ebs-nav-active,#009fe3); border-color: var(--ebs-nav-active,#009fe3); }
.ebs-nav-short-line .ebs-nav__item { width: 22px; height: 3px; border-radius: 999px; }
.ebs-nav-long-line .ebs-nav__item { width: 42px; height: 3px; border-radius: 999px; }

/* Positionen unten / oben */
.ebs-nav-pos-bottom-left .ebs-nav { left: var(--ebs-nav-offset); bottom: var(--ebs-nav-offset); }
.ebs-nav-pos-bottom-center .ebs-nav { left: 50%; bottom: var(--ebs-nav-offset); transform: translateX(-50%); }
.ebs-nav-pos-bottom-right .ebs-nav { right: var(--ebs-nav-offset); bottom: var(--ebs-nav-offset); }
.ebs-nav-pos-top-left .ebs-nav { left: var(--ebs-nav-offset); top: var(--ebs-nav-offset); }
.ebs-nav-pos-top-center .ebs-nav { left: 50%; top: var(--ebs-nav-offset); transform: translateX(-50%); }
.ebs-nav-pos-top-right .ebs-nav { right: var(--ebs-nav-offset); top: var(--ebs-nav-offset); }

/* Seitliche Positionen = vertikale Navigation */
.ebs-nav-pos-left-top .ebs-nav,
.ebs-nav-pos-left-center .ebs-nav,
.ebs-nav-pos-left-bottom .ebs-nav,
.ebs-nav-pos-right-top .ebs-nav,
.ebs-nav-pos-right-center .ebs-nav,
.ebs-nav-pos-right-bottom .ebs-nav { flex-direction: column; }

.ebs-nav-pos-left-top .ebs-nav { left: var(--ebs-nav-offset); top: var(--ebs-nav-offset); }
.ebs-nav-pos-left-center .ebs-nav { left: var(--ebs-nav-offset); top: 50%; transform: translateY(-50%); }
.ebs-nav-pos-left-bottom .ebs-nav { left: var(--ebs-nav-offset); bottom: var(--ebs-nav-offset); }
.ebs-nav-pos-right-top .ebs-nav { right: var(--ebs-nav-offset); top: var(--ebs-nav-offset); }
.ebs-nav-pos-right-center .ebs-nav { right: var(--ebs-nav-offset); top: 50%; transform: translateY(-50%); }
.ebs-nav-pos-right-bottom .ebs-nav { right: var(--ebs-nav-offset); bottom: var(--ebs-nav-offset); }

/* Seitliche Striche um 90° drehen, damit sie wie Marker wirken. */
.ebs-nav-pos-left-top.ebs-nav-short-line .ebs-nav__item,
.ebs-nav-pos-left-center.ebs-nav-short-line .ebs-nav__item,
.ebs-nav-pos-left-bottom.ebs-nav-short-line .ebs-nav__item,
.ebs-nav-pos-right-top.ebs-nav-short-line .ebs-nav__item,
.ebs-nav-pos-right-center.ebs-nav-short-line .ebs-nav__item,
.ebs-nav-pos-right-bottom.ebs-nav-short-line .ebs-nav__item,
.ebs-nav-pos-left-top.ebs-nav-long-line .ebs-nav__item,
.ebs-nav-pos-left-center.ebs-nav-long-line .ebs-nav__item,
.ebs-nav-pos-left-bottom.ebs-nav-long-line .ebs-nav__item,
.ebs-nav-pos-right-top.ebs-nav-long-line .ebs-nav__item,
.ebs-nav-pos-right-center.ebs-nav-long-line .ebs-nav__item,
.ebs-nav-pos-right-bottom.ebs-nav-long-line .ebs-nav__item { transform: rotate(90deg); margin: 8px 0; }

/* =========================================================
   PROGRESS-KREIS
   ========================================================= */

.ebs-progress {
    position: absolute;
    z-index: 5;
    width: var(--ebs-progress-size,48px);
    height: var(--ebs-progress-size,48px);
    pointer-events: none;
}
.ebs-progress svg { display:block; width:100%; height:100%; transform:rotate(-90deg); }
.ebs-progress circle { fill:none; stroke-width:var(--ebs-progress-stroke,3px); }
.ebs-progress__track { stroke:var(--ebs-progress-track,rgba(255,255,255,.25)); }
.ebs-progress__bar { stroke:var(--ebs-progress-color,#009fe3); stroke-linecap:round; transition:stroke-dashoffset .1s linear; }
.ebs-progress__number { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; }

.ebs-progress-pos-bottom-left .ebs-progress { left:var(--ebs-progress-offset); bottom:var(--ebs-progress-offset); }
.ebs-progress-pos-bottom-center .ebs-progress { left:50%; bottom:var(--ebs-progress-offset); transform:translateX(-50%); }
.ebs-progress-pos-bottom-right .ebs-progress { right:var(--ebs-progress-offset); bottom:var(--ebs-progress-offset); }
.ebs-progress-pos-top-left .ebs-progress { left:var(--ebs-progress-offset); top:var(--ebs-progress-offset); }
.ebs-progress-pos-top-center .ebs-progress { left:50%; top:var(--ebs-progress-offset); transform:translateX(-50%); }
.ebs-progress-pos-top-right .ebs-progress { right:var(--ebs-progress-offset); top:var(--ebs-progress-offset); }
.ebs-progress-pos-left-top .ebs-progress { left:var(--ebs-progress-offset); top:var(--ebs-progress-offset); }
.ebs-progress-pos-left-center .ebs-progress { left:var(--ebs-progress-offset); top:50%; transform:translateY(-50%); }
.ebs-progress-pos-left-bottom .ebs-progress { left:var(--ebs-progress-offset); bottom:var(--ebs-progress-offset); }
.ebs-progress-pos-right-top .ebs-progress { right:var(--ebs-progress-offset); top:var(--ebs-progress-offset); }
.ebs-progress-pos-right-center .ebs-progress { right:var(--ebs-progress-offset); top:50%; transform:translateY(-50%); }
.ebs-progress-pos-right-bottom .ebs-progress { right:var(--ebs-progress-offset); bottom:var(--ebs-progress-offset); }

@media (max-width: 767px) {
    .ebs-slide__media { background-position: var(--ebs-pos-m, 50% 50%); }
    .ebs-slider.ebs-hide-nav-mobile .ebs-nav { display:none !important; }
    .ebs-slider.ebs-hide-progress-mobile .ebs-progress { display:none !important; }
    .ebs-slider.ebs-disable-effect-mobile .ebs-slide__media { animation:none !important; transform:scale(1.001) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ebs-slide { transition-duration:.2s !important; }
    .ebs-slide__media { animation:none !important; transform:scale(1.001) !important; }
}
