.jade-h-slider-wrap {
    position: relative;
}

.jade-h-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */

    /*
     * Bricht wie die Pfeile bis zum Viewport-Rand aus, damit die
     * Overflow-Abschneidekante am Bildschirmrand liegt statt am
     * Satzspiegel-Rand. Ohne das wird der nächste Slide schon an
     * der (schmaleren) Content-Breite maskiert, bevor er sichtbar
     * ins Bild rutschen kann.
     */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.jade-h-slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Jedes direkte Kind (z.B. eine Fusion Builder Row) wird eine volle Slide */
.jade-h-slider-track > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 100%;
    box-sizing: border-box;

    /*
     * Der Track ist 100vw breit (siehe oben), damit der nächste Slide
     * beim Sliden schon am Bildschirmrand sichtbar wird. Damit der
     * INHALT jeder Slide trotzdem im gewohnten Satzspiegel bleibt
     * (statt an den echten Bildschirmrändern zu kleben), bekommt jede
     * Slide links/rechts so viel Padding, dass genau die per JS
     * gemessene Satzspiegel-Breite (--jade-content-width) übrig
     * bleibt. Fallback 1200px, falls die Variable aus irgendeinem
     * Grund noch nicht gesetzt ist (z.B. sehr kurz vor JS-Ausführung).
     */
    padding-left: calc((100vw - var(--jade-content-width, 1200px)) / 2);
    padding-right: calc((100vw - var(--jade-content-width, 1200px)) / 2);
}

/* ===== FUNKTIONS-KLASSEN (Positionierung/Verhalten) — bitte nicht anfassen ===== */

.jade-h-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/*
 * Bricht aus dem Satzspiegel bis zum Viewport-Rand aus.
 * Funktioniert, weil .jade-h-slider-wrap horizontal zentriert auf der Seite liegt
 * (Standard bei Avada-Containern) — 50% (relativ zum Wrap) minus 50vw (halbe
 * Viewport-Breite) landet exakt am Bildschirmrand, unabhängig von der Wrap-Breite.
 * Den Wert nach dem "+" (Abstand zum Rand) frei anpassen.
 */
.jade-h-slider-arrow.prev {
    left: calc(50% - 50vw + 16px);
}

.jade-h-slider-arrow.next {
    right: calc(50% - 50vw + 16px);
}

.jade-h-slider-arrow[disabled] {
    cursor: default;
}

.jade-h-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.jade-h-slider-dot {
    padding: 0;
    border: none;
    cursor: pointer;
}

/* ===== DESIGN-KLASSEN — hier frei gestalten ===== */

.jds-arrow {
    background: rgba(255, 255, 255, 0.85);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease;
}

.jds-arrow:hover {
    background: #fff;
}

.jds-arrow[disabled] {
    opacity: 0.3;
}

.jds-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.2s ease;
}

.jds-dot:hover {
    background: #999;
}

.jds-dot.active {
    background: currentColor;
}

@media (max-width: 640px) {
    .jds-arrow {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .jade-h-slider-arrow.prev,
    .jade-h-slider-arrow.next {
        left: calc(50% - 50vw + 8px);
        right: calc(50% - 50vw + 8px);
    }
}