/* ==========================================================
   SPVGG BAYREUTH BUTTON SYSTEM
   Responsive / Premium / Glass Button System

   Button appearance intentionally remains close
   to the established SpVGG button design.
   ========================================================== */


/* ==========================================================
   01. BASE
   ========================================================== */

.spvgg-btn,
.btn-spvgg,
.btn-spvgg-dark,
.btn-spvgg-yellow,
.btn-spvgg-outline,
.btn-spvgg-outline-dark,
.btn-spvgg-outline-yellow,
.spvgg-filter {

    --btn-height:
        clamp(2rem, 2.2vw, 2.25rem);

    --btn-py:
        clamp(.45rem, .6vw, .55rem);

    --btn-px:
        clamp(.9rem, 1.25vw, 1.25rem);

    --btn-font:
        clamp(.6875rem, .72vw, .75rem);
}


/* ==========================================================
   02. SIZE MODIFIERS
   ========================================================== */

.btn-small,
.spvgg-btn.btn-small {

    --btn-height:
        clamp(1.8rem, 2vw, 1.95rem);

    --btn-py:
        clamp(.35rem, .45vw, .4rem);

    --btn-px:
        clamp(.7rem, 1vw, .9rem);

    --btn-font:
        clamp(.625rem, .68vw, .6875rem);
}


.btn-medium,
.spvgg-btn.btn-medium {

    --btn-height:
        clamp(2rem, 2.2vw, 2.25rem);

    --btn-py:
        clamp(.45rem, .6vw, .55rem);

    --btn-px:
        clamp(.9rem, 1.25vw, 1.25rem);

    --btn-font:
        clamp(.6875rem, .72vw, .75rem);
}


.btn-large,
.spvgg-btn.btn-large {

    --btn-height:
        clamp(2.3rem, 2.6vw, 2.625rem);

    --btn-py:
        clamp(.55rem, .7vw, .65rem);

    --btn-px:
        clamp(1.1rem, 1.5vw, 1.5rem);

    --btn-font:
        clamp(.75rem, .82vw, .8125rem);
}


.btn-full {
    width: 100% !important;
}


/* ==========================================================
   03. ELEMENTOR BUTTON — BASE
   ========================================================== */

.btn-spvgg a.elementor-button,
.btn-spvgg-dark a.elementor-button,
.btn-spvgg-yellow a.elementor-button,
.btn-spvgg-outline a.elementor-button,
.btn-spvgg-outline-dark a.elementor-button,
.btn-spvgg-outline-yellow a.elementor-button {

    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        var(--btn-height) !important;

    min-width:
        clamp(8rem, 10vw, 9rem) !important;

    padding:
        var(--btn-py)
        var(--btn-px) !important;

    box-sizing:
        border-box !important;

    font-family:
        var(--font-family-body) !important;

    font-size:
        var(--btn-font) !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        var(--btn-letter-spacing) !important;

    text-transform:
        uppercase !important;

    text-decoration:
        none !important;

    border-radius:
        var(--btn-radius) !important;

    overflow:
        hidden !important;

    isolation:
        isolate;

    transform:
        translateZ(0);

    transition:
        background var(--btn-transition),
        color var(--transition),
        border-color var(--btn-transition),
        box-shadow var(--btn-transition),
        transform var(--btn-transition) !important;
}


.btn-spvgg .elementor-widget-container,
.btn-spvgg-dark .elementor-widget-container,
.btn-spvgg-yellow .elementor-widget-container,
.btn-spvgg-outline .elementor-widget-container,
.btn-spvgg-outline-dark .elementor-widget-container,
.btn-spvgg-outline-yellow .elementor-widget-container {

    width:
        auto !important;
}


.btn-spvgg a.elementor-button .elementor-button-content-wrapper,
.btn-spvgg-dark a.elementor-button .elementor-button-content-wrapper,
.btn-spvgg-yellow a.elementor-button .elementor-button-content-wrapper,
.btn-spvgg-outline a.elementor-button .elementor-button-content-wrapper,
.btn-spvgg-outline-dark a.elementor-button .elementor-button-content-wrapper,
.btn-spvgg-outline-yellow a.elementor-button .elementor-button-content-wrapper {

    position:
        relative;

    z-index:
        3;
}


.btn-spvgg a.elementor-button *,
.btn-spvgg-dark a.elementor-button *,
.btn-spvgg-yellow a.elementor-button *,
.btn-spvgg-outline a.elementor-button *,
.btn-spvgg-outline-dark a.elementor-button *,
.btn-spvgg-outline-yellow a.elementor-button * {

    color:
        inherit !important;

    fill:
        currentColor !important;

    font:
        inherit !important;
}


/* ==========================================================
   04. SUBTLE GLASS HIGHLIGHT
   ========================================================== */

.btn-spvgg a.elementor-button::before,
.btn-spvgg-dark a.elementor-button::before,
.btn-spvgg-yellow a.elementor-button::before,
.btn-spvgg-outline a.elementor-button::before,
.btn-spvgg-outline-dark a.elementor-button::before,
.btn-spvgg-outline-yellow a.elementor-button::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.06) 0%,
            rgba(255,255,255,0) 42%
        );

    opacity:
        .7;

    transition:
        opacity var(--transition);

    z-index:
        -1;
}


/* ==========================================================
   05. FILLED — DARK
   ========================================================== */

.btn-spvgg a.elementor-button {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,0) 32%
        ),
        var(--surface-dark) !important;

    color:
        var(--club-yellow) !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   06. FILLED — LIGHT
   ========================================================== */

.btn-spvgg-dark a.elementor-button {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,.04) 32%
        ),
        var(--bg-soft) !important;

    color:
        var(--text-heading) !important;

    border:
        1px solid rgba(0,0,0,.12) !important;

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   07. FILLED — YELLOW
   ========================================================== */

.btn-spvgg-yellow a.elementor-button {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,0) 32%
        ),
        var(--club-yellow) !important;

    color:
        var(--club-black) !important;

    border:
        1px solid rgba(255,233,0,.90) !important;

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   08. OUTLINE — LIGHT
   ========================================================== */

.btn-spvgg-outline a.elementor-button {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.03) 42%,
            rgba(255,255,255,0) 100%
        ) !important;

    color:
        var(--text-heading) !important;

    border:
        1px solid rgba(0,0,0,.14) !important;

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   09. OUTLINE — DARK
   ========================================================== */

.btn-spvgg-outline-dark a.elementor-button {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.025) 42%,
            rgba(255,255,255,0) 100%
        ) !important;

    color:
        var(--club-yellow) !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   10. OUTLINE — YELLOW
   ========================================================== */

.btn-spvgg-outline-yellow a.elementor-button {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.03) 42%,
            rgba(255,255,255,0) 100%
        ) !important;

    color:
        var(--club-yellow) !important;

    border:
        1px solid rgba(255,233,0,.80) !important;

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   11. HOVER — DARK
   ========================================================== */

.btn-spvgg a.elementor-button:hover {

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.02) 35%,
            rgba(255,255,255,.07) 100%
        ),
        var(--surface-dark) !important;

    color:
        var(--club-yellow) !important;

    border-color:
        rgba(255,255,255,.24) !important;
}


/* ==========================================================
   12. HOVER — LIGHT
   ========================================================== */

.btn-spvgg-dark a.elementor-button:hover {

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.01) 55%,
            rgba(0,0,0,.035) 100%
        ),
        var(--bg-soft) !important;

    color:
        var(--text-heading) !important;

    border-color:
        rgba(0,0,0,.16) !important;
}


/* ==========================================================
   13. HOVER — YELLOW
   ========================================================== */

.btn-spvgg-yellow a.elementor-button:hover {

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.025) 35%,
            rgba(0,0,0,.12) 100%
        ),
        var(--club-yellow) !important;

    color:
        var(--club-black) !important;

    border-color:
        rgba(0,0,0,.10) !important;
}


/* ==========================================================
   14. HOVER — OUTLINE
   ========================================================== */

.btn-spvgg-outline a.elementor-button:hover {

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.01) 55%,
            rgba(0,0,0,.035) 100%
        ),
        var(--bg-soft) !important;

    color:
        var(--text-heading) !important;

    border-color:
        rgba(0,0,0,.16) !important;
}


.btn-spvgg-outline-dark a.elementor-button:hover {

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.02) 35%,
            rgba(255,255,255,.07) 100%
        ),
        var(--surface-dark) !important;

    color:
        var(--club-yellow) !important;

    border-color:
        rgba(255,255,255,.24) !important;
}


.btn-spvgg-outline-yellow a.elementor-button:hover {

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.025) 35%,
            rgba(0,0,0,.12) 100%
        ),
        var(--club-yellow) !important;

    color:
        var(--club-black) !important;

    border-color:
        rgba(0,0,0,.10) !important;
}


/* ==========================================================
   15. GENERAL HOVER
   ========================================================== */

.btn-spvgg a.elementor-button:hover,
.btn-spvgg-dark a.elementor-button:hover,
.btn-spvgg-yellow a.elementor-button:hover,
.btn-spvgg-outline a.elementor-button:hover,
.btn-spvgg-outline-dark a.elementor-button:hover,
.btn-spvgg-outline-yellow a.elementor-button:hover {

    transform:
        translateY(-1px)
        scale(1.015) !important;

    box-shadow:
        var(--btn-shadow-hover) !important;
}


.btn-spvgg a.elementor-button:hover::before,
.btn-spvgg-dark a.elementor-button:hover::before,
.btn-spvgg-yellow a.elementor-button:hover::before,
.btn-spvgg-outline a.elementor-button:hover::before,
.btn-spvgg-outline-dark a.elementor-button:hover::before,
.btn-spvgg-outline-yellow a.elementor-button:hover::before {

    opacity:
        .4;
}


/* ==========================================================
   16. ACTIVE / FOCUS
   ========================================================== */

.btn-spvgg a.elementor-button:active,
.btn-spvgg-dark a.elementor-button:active,
.btn-spvgg-yellow a.elementor-button:active,
.btn-spvgg-outline a.elementor-button:active,
.btn-spvgg-outline-dark a.elementor-button:active,
.btn-spvgg-outline-yellow a.elementor-button:active {

    transform:
        translateY(0)
        scale(.985) !important;

    box-shadow:
        var(--btn-shadow) !important;
}


.btn-spvgg a.elementor-button:focus-visible,
.btn-spvgg-dark a.elementor-button:focus-visible,
.btn-spvgg-yellow a.elementor-button:focus-visible,
.btn-spvgg-outline a.elementor-button:focus-visible,
.btn-spvgg-outline-dark a.elementor-button:focus-visible,
.btn-spvgg-outline-yellow a.elementor-button:focus-visible {

    outline:
        2px solid var(--club-yellow) !important;

    outline-offset:
        3px !important;
}


/* ==========================================================
   17. FULL WIDTH
   ========================================================== */

.btn-full a.elementor-button {

    width:
        100% !important;

    min-width:
        0 !important;

    justify-content:
        center !important;
}
.btn-full-footer a.elementor-button {

    width:
        100% !important;

    min-width:
        0 !important;

    justify-content:
        space-between !important;
}

/* ==========================================================
   18. HTML BUTTON
   ========================================================== */

.spvgg-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        var(--btn-height);

    padding:
        var(--btn-py)
        var(--btn-px);

    box-sizing:
        border-box;

    font-family:
        var(--font-family-body);

    font-size:
        var(--btn-font);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        var(--btn-letter-spacing);

    text-transform:
        uppercase;

    text-decoration:
        none;

    border-radius:
        var(--btn-radius);

    cursor:
        pointer;

    overflow:
        hidden;

    transform:
        translateZ(0);

    transition:
        background var(--btn-transition),
        color var(--transition),
        border-color var(--btn-transition),
        box-shadow var(--btn-transition),
        transform var(--btn-transition);
}


/* ==========================================================
   19. HTML BUTTON — DARK
   ========================================================== */

.spvgg-btn.spvgg-btn-dark {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,0) 32%
        ),
        var(--surface-dark);

    color:
        var(--club-yellow);

    border:
        1px solid rgba(255,255,255,.16);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   20. HTML BUTTON — YELLOW
   ========================================================== */

.spvgg-btn.spvgg-btn-yellow {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,0) 32%
        ),
        var(--club-yellow);

    color:
        var(--club-black);

    border:
        1px solid rgba(255,233,0,.90);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   21. HTML BUTTON — LIGHT
   ========================================================== */

.spvgg-btn.spvgg-btn-light {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,.04) 32%
        ),
        var(--bg-soft);

    color:
        var(--text-heading);

    border:
        1px solid rgba(0,0,0,.12);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   22. HTML BUTTON — OUTLINE
   ========================================================== */

.spvgg-btn.spvgg-btn-outline {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.03) 42%,
            rgba(255,255,255,0) 100%
        );

    color:
        var(--text-heading);

    border:
        1px solid rgba(0,0,0,.14);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   23. HTML BUTTON — OUTLINE DARK
   ========================================================== */

.spvgg-btn.spvgg-btn-outline-dark {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.025) 42%,
            rgba(255,255,255,0) 100%
        );

    color:
        var(--club-yellow);

    border:
        1px solid rgba(255,255,255,.20);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   24. HTML BUTTON — OUTLINE YELLOW
   ========================================================== */

.spvgg-btn.spvgg-btn-outline-yellow {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.03) 42%,
            rgba(255,255,255,0) 100%
        );

    color:
        var(--club-yellow);

    border:
        1px solid rgba(255,233,0,.80);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   25. HTML BUTTON SIZES
   ========================================================== */

.spvgg-btn.btn-small {

    min-height:
        clamp(1.8rem, 2vw, 1.95rem);

    padding:
        clamp(.35rem, .45vw, .4rem)
        clamp(.7rem, 1vw, .9rem);

    font-size:
        clamp(.625rem, .68vw, .6875rem);
}


.spvgg-btn.btn-medium {

    min-height:
        clamp(2rem, 2.2vw, 2.25rem);

    padding:
        clamp(.45rem, .6vw, .55rem)
        clamp(.9rem, 1.25vw, 1.25rem);

    font-size:
        clamp(.6875rem, .72vw, .75rem);
}


.spvgg-btn.btn-large {

    min-height:
        clamp(2.3rem, 2.6vw, 2.625rem);

    padding:
        clamp(.55rem, .7vw, .65rem)
        clamp(1.1rem, 1.5vw, 1.5rem);

    font-size:
        clamp(.75rem, .82vw, .8125rem);
}


.spvgg-btn.btn-full {

    display:
        flex;

    width:
        100%;

    min-height:
        clamp(2.3rem, 2.6vw, 2.625rem);

    justify-content:
        center;
}


/* ==========================================================
   26. HTML BUTTON HOVER
   ========================================================== */

.spvgg-btn.spvgg-btn-dark:hover,
.spvgg-btn.spvgg-btn-outline-dark:hover {

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.02) 35%,
            rgba(255,255,255,.07) 100%
        ),
        var(--surface-dark);

    color:
        var(--club-yellow);

    border-color:
        rgba(255,255,255,.24);
}


.spvgg-btn.spvgg-btn-yellow:hover,
.spvgg-btn.spvgg-btn-outline-yellow:hover {

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.025) 35%,
            rgba(0,0,0,.12) 100%
        ),
        var(--club-yellow);

    color:
        var(--club-black);

    border-color:
        rgba(0,0,0,.10);
}


.spvgg-btn.spvgg-btn-light:hover,
.spvgg-btn.spvgg-btn-outline:hover {

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.01) 55%,
            rgba(0,0,0,.035) 100%
        ),
        var(--bg-soft);

    color:
        var(--text-heading);

    border-color:
        rgba(0,0,0,.16);
}


/* ==========================================================
   27. HTML BUTTON GENERAL HOVER
   ========================================================== */

.spvgg-btn:hover {

    transform:
        translateY(-1px)
        scale(1.015);

    box-shadow:
        var(--btn-shadow-hover);
}


.spvgg-btn:active {

    transform:
        translateY(0)
        scale(.985);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   28. ARROW BUTTON
   ========================================================== */

.btn-arrow a.elementor-button::after,
.spvgg-btn.btn-arrow::after {

    content:
        "→";

    display:
        inline-block;

    margin-left:
        .45rem;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(.95rem, 1.15vw, 1.1rem);

    font-weight:
        900;

    line-height:
        .8;

    letter-spacing:
        0;

    transform:
        scaleX(1.08);

    transform-origin:
        center;

    transition:
        transform var(--btn-transition);
}


.btn-arrow a.elementor-button:hover::after,
.spvgg-btn.btn-arrow:hover::after {

    transform:
        translateX(.3rem)
        scaleX(1.08);
}


/* ==========================================================
   29. ROUND CONTROLS
   ========================================================== */

.spvgg-control {

    width:
        clamp(2.5rem, 3vw, 2.75rem);

    height:
        clamp(2.5rem, 3vw, 2.75rem);

    min-width:
        clamp(2.5rem, 3vw, 2.75rem);

    min-height:
        clamp(2.5rem, 3vw, 2.75rem);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    box-sizing:
        border-box;

    background:
        var(--club-white) !important;

    color:
        var(--text-heading) !important;

    border:
        1px solid rgba(0,0,0,.12) !important;

    border-radius:
        50% !important;

    cursor:
        pointer;

    text-decoration:
        none;

    box-shadow:
        var(--btn-shadow) !important;

    transform:
        none !important;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition) !important;
}


.spvgg-control span,
.spvgg-control svg {

    display:
        block;

    width:
        1rem;

    height:
        auto;

    margin:
        0;

    padding:
        0;

    color:
        var(--text-heading) !important;

    fill:
        currentColor !important;

    transform:
        none !important;

    transition:
        transform var(--btn-transition) !important;
}


/* ==========================================================
   30. ROUND CONTROLS — HOVER
   ========================================================== */

.spvgg-control:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {

    background:
        var(--club-white) !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.18) 48%,
            rgba(255,233,0,.04) 100%
        ) !important;

    color:
        var(--text-heading) !important;

    border-color:
        rgba(0,0,0,.14) !important;

    box-shadow:
        var(--btn-shadow-hover) !important;

    transform:
        translateY(-1px) !important;
}


.spvgg-control-prev:hover span,
.spvgg-control-prev:hover svg {

    transform:
        translateX(-.2rem) !important;
}


.spvgg-control-next:hover span,
.spvgg-control-next:hover svg {

    transform:
        translateX(.2rem) !important;
}


/* ==========================================================
   31. ROUND CONTROLS — ACTIVE
   ========================================================== */

.spvgg-control:active {

    background:
        var(--club-white) !important;

    background-image:
        none !important;

    color:
        var(--text-heading) !important;

    border-color:
        rgba(0,0,0,.12) !important;

    box-shadow:
        var(--btn-shadow) !important;

    transform:
        scale(.96) !important;
}


/* ==========================================================
   32. ROUND CONTROLS — FOCUS
   ========================================================== */

.spvgg-control:focus {

    outline:
        none !important;

    background:
        var(--club-white) !important;

    background-image:
        none !important;
}


.spvgg-control:focus-visible {

    outline:
        2px solid var(--club-yellow) !important;

    outline-offset:
        3px !important;
}


/* ==========================================================
   33. ROUND CONTROLS — DISABLED
   ========================================================== */

.spvgg-control.is-disabled,
.spvgg-control[aria-disabled="true"],
.spvgg-control:disabled {

    background:
        var(--bg-soft) !important;

    background-image:
        none !important;

    color:
        var(--text-heading) !important;

    opacity:
        .35 !important;

    cursor:
        default;

    pointer-events:
        none;

    transform:
        none !important;

    box-shadow:
        none !important;
}


.spvgg-control::before,
.spvgg-control::after {

    display:
        none !important;

    content:
        none !important;
}


/* ==========================================================
   34. FILTER BUTTONS
   ========================================================== */

.spvgg-filter {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        6px 12px;

    box-sizing:
        border-box;

    background:
        var(--club-white);

    color:
        var(--text-heading);

    border:
        1px solid rgba(0,0,0,.12);

    border-radius:
        var(--btn-radius) !important;

    font-family:
        var(--font-family-body);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        var(--btn-letter-spacing);

    text-transform:
        uppercase;

    text-decoration:
        none;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        var(--btn-shadow);

    transition:
        background var(--btn-transition),
        color var(--transition),
        border-color var(--btn-transition),
        box-shadow var(--btn-transition),
        transform var(--btn-transition);
}


/* ==========================================================
   35. FILTER HOVER
   ========================================================== */

.spvgg-filter:hover {

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.03) 100%
        );

    color:
        var(--text-heading);

    border-color:
        rgba(0,0,0,.16);

    box-shadow:
        var(--btn-shadow-hover);
}


/* ==========================================================
   36. FILTER ACTIVE
   ========================================================== */

.spvgg-filter.active,
.spvgg-filter.is-active,
.spvgg-filter[aria-selected="true"],
.spvgg-filter[aria-pressed="true"] {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,0) 45%
        ),
        var(--club-yellow);

    color:
        var(--club-black);

    border-color:
        var(--club-yellow);

    box-shadow:
        var(--btn-shadow);
}


/* ==========================================================
   37. FILTER ACTIVE HOVER
   ========================================================== */

.spvgg-filter.active:hover,
.spvgg-filter.is-active:hover,
.spvgg-filter[aria-selected="true"]:hover,
.spvgg-filter[aria-pressed="true"]:hover {

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.015) 55%,
            rgba(0,0,0,.07) 100%
        ),
        var(--club-yellow);

    color:
        var(--club-black);

    border-color:
        var(--club-yellow);

    box-shadow:
        var(--btn-shadow-hover);
}


/* ==========================================================
   38. FILTER FOCUS
   ========================================================== */

.spvgg-filter:focus {

    outline:
        none;
}


.spvgg-filter:focus-visible {

    outline:
        2px solid var(--club-yellow);

    outline-offset:
        3px;
}


/* ==========================================================
   39. FILTER GROUP
   ========================================================== */

.spvgg-filter-group {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;
}


/* ==========================================================
   40. MOBILE FILTER DROPDOWN
   ========================================================== */

.spvgg-filter-mobile-toggle {

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    position:
        relative;

    display:
        none;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        auto;

    min-width:
        7rem;

    max-width:
        max-content;

    min-height:
        30px;

    padding:
        6px 10px;

    box-sizing:
        border-box;

    margin:
        0;

    background:
        #fff !important;

    color:
        var(--text-heading) !important;

    border:
        1px solid rgba(0,0,0,.12) !important;

    border-radius:
        var(--btn-radius) !important;

    box-shadow:
        var(--btn-shadow) !important;

    font-family:
        var(--font-family-body) !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        var(--btn-letter-spacing) !important;

    text-transform:
        uppercase;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    cursor:
        pointer;

    overflow:
        hidden;

    outline:
        none;

    transition:
        background var(--btn-transition),
        border-color var(--btn-transition),
        box-shadow var(--btn-transition),
        transform var(--btn-transition);
}


/* ==========================================================
   41. MOBILE TOGGLE TEXT
   ========================================================== */

.spvgg-filter-mobile-current {

    display:
        block;

    color:
        inherit !important;
}


/* ==========================================================
   42. MOBILE TOGGLE ICON
   ========================================================== */

.spvgg-filter-mobile-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        .9rem;

    height:
        .9rem;

    margin-left:
        .5rem;

    color:
        inherit !important;

    font-size:
        .8rem;

    line-height:
        1;

    transition:
        transform var(--btn-transition);
}


/* ==========================================================
   43. MOBILE TOGGLE HOVER
   ========================================================== */

.spvgg-filter-mobile-toggle:hover {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.03) 100%
        ) !important;

    color:
        var(--text-heading) !important;

    border-color:
        rgba(0,0,0,.16) !important;

    box-shadow:
        var(--btn-shadow-hover) !important;

    transform:
        translateY(-1px);
}


/* ==========================================================
   44. MOBILE TOGGLE OPEN
   ========================================================== */

.spvgg-filter-group.is-open
.spvgg-filter-mobile-toggle {

    background:
        var(--club-yellow) !important;

    color:
        var(--club-black) !important;

    border-color:
        var(--club-yellow) !important;

    box-shadow:
        var(--btn-shadow) !important;
}


.spvgg-filter-group.is-open
.spvgg-filter-mobile-icon {

    transform:
        rotate(180deg);
}


/* ==========================================================
   45. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .spvgg-filter-group {

        position:
            relative;

        display:
            inline-block;

        width:
            auto;

        margin:
            0;
    }


    .spvgg-filter-group
    > .spvgg-filter-mobile-toggle {

        display:
            inline-flex !important;
    }


    .spvgg-filter-group
    > .spvgg-filter-list {

        display:
            none;

        position:
            absolute;

        top:
            calc(100% + .35rem);

        left:
            0;

        right:
            auto;

        width:
            max-content;

        min-width:
            100%;

        max-width:
            calc(100vw - 2rem);

        z-index:
            50;

        padding:
            .3rem;

        background:
            rgba(250,250,250,.96);

        border:
            1px solid rgba(0,0,0,.10);

        border-radius:
            var(--btn-radius) !important;

        box-shadow:
            var(--shadow-md);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);
    }


    .spvgg-filter-group.is-open
    > .spvgg-filter-list {

        display:
            flex;

        flex-direction:
            column;

        gap:
            .15rem;
    }


    .spvgg-filter-list
    .spvgg-filter {

        width:
            auto;

        min-width:
            100%;

        min-height:
            30px;

        padding:
            6px 10px;

        justify-content:
            flex-start;

        border:
            0 !important;

        border-radius:
            var(--btn-radius) !important;

        background:
            transparent;

        box-shadow:
            none;

        font-size:
            11px;

        transform:
            none;
    }


    .spvgg-filter-list
    .spvgg-filter:hover {

        background:
            rgba(0,0,0,.035);

        border:
            0 !important;

        box-shadow:
            none;

        transform:
            none;
    }


    .spvgg-filter-list
    .spvgg-filter.is-active,

    .spvgg-filter-list
    .spvgg-filter.active {

        background:
            var(--club-yellow);

        border:
            0 !important;

        box-shadow:
            none;
    }

}


/* ==========================================================
   46. VERY SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .spvgg-filter-mobile-toggle {

        min-height:
            30px;

        padding:
            6px 10px;

        font-size:
            11px !important;
    }


    .spvgg-filter-list
    .spvgg-filter {

        min-height:
            30px;

        padding:
            6px 10px;

        font-size:
            11px;
    }

}


/* ==========================================================
   47. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .btn-spvgg a.elementor-button,
    .btn-spvgg-dark a.elementor-button,
    .btn-spvgg-yellow a.elementor-button,
    .btn-spvgg-outline a.elementor-button,
    .btn-spvgg-outline-dark a.elementor-button,
    .btn-spvgg-outline-yellow a.elementor-button,
    .spvgg-btn,
    .spvgg-control,
    .spvgg-filter,
    .spvgg-filter-mobile-toggle {

        transition:
            none !important;
    }


    .btn-spvgg a.elementor-button::before,
    .btn-spvgg-dark a.elementor-button::before,
    .btn-spvgg-yellow a.elementor-button::before,
    .btn-spvgg-outline a.elementor-button::before,
    .btn-spvgg-outline-dark a.elementor-button::before,
    .btn-spvgg-outline-yellow a.elementor-button::before {

        display:
            none !important;
    }

}

/* ==========================================================
   ROUND ARROW — SIMPLE NEXT
   ========================================================== */

.spvgg-control-arrow {

    width:
        clamp(2.5rem, 3vw, 2.75rem);

    height:
        clamp(2.5rem, 3vw, 2.75rem);

    min-width:
        clamp(2.5rem, 3vw, 2.75rem);

    min-height:
        clamp(2.5rem, 3vw, 2.75rem);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    box-sizing:
        border-box;

    background:
        transparent !important;

    color:
        var(--text-heading) !important;

    border:
        1px solid rgba(0,0,0,.16) !important;

    border-radius:
        50% !important;

    cursor:
        pointer;

    text-decoration:
        none;

    box-shadow:
        none !important;

    transform:
        none !important;

    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition) !important;
}


/* Pfeil */

.spvgg-control-arrow span {

    display:
        block;

    margin:
        0;

    padding:
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        1.25rem;

    font-weight:
        400;

    line-height:
        1;

    color:
        inherit !important;

    transform:
        translateX(0);

    transition:
        transform var(--btn-transition);
}


/* Hover */

.spvgg-control-arrow:hover {

    background:
        transparent !important;

    color:
        var(--club-yellow) !important;

    border-color:
        var(--club-yellow) !important;

    box-shadow:
        none !important;

    transform:
        translateY(-1px) !important;
}


.spvgg-control-arrow:hover span {

    transform:
        translateX(.2rem);
}


/* Active */

.spvgg-control-arrow:active {

    background:
        transparent !important;

    border-color:
        var(--club-yellow) !important;

    box-shadow:
        none !important;

    transform:
        scale(.96) !important;
}


/* Focus */

.spvgg-control-arrow:focus {

    outline:
        none !important;

}


.spvgg-control-arrow:focus-visible {

    outline:
        2px solid var(--club-yellow) !important;

    outline-offset:
        3px !important;
}