nav.main a:focus,
.carousel .dots .dot:focus,
a:focus, button:focus{
    outline: 3px solid var(--submenu-active-color);
}

/*.carousel-dots:focus,
.carousel-dots:focus-within{
    outline: 3px solid var(--submenu-active-color);
}*/

.carousel-dots .dot button{
    all: unset;
    width: 100%;
    height: 100%;
    appearance: none;
}

.carousel-dots .dot.active:focus,
.carousel-dots .dot:focus,
.carousel-dots .dot.active:focus-within,
.carousel-dots .dot:focus-within{
    outline: 3px solid var(--submenu-active-color);
}


@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


@media (prefers-contrast: more) {
    header .main-menu-wrapper a,
    section.cover .content *{
        filter: contrast(2)!important;
    }

    section .button{
        color: #fff!important;
        background: #000!important;
    }

    section.cover .content a.btn{
        background: #fff!important;
        color: #000!important;
    }

    footer .credits .heart,
    footer,
    footer a,
    footer button{
        color: #fff!important;
        opacity: 1!important;
    }

    .high-contrast section .button{
        color: #fff!important;
        background: #000!important;
    }

    .high-contrast section.cover .content a.btn{
        background: #fff!important;
        color: #000!important;
    }
}

@media (prefers-contrast: custom) {
    :root {
        /* Overwrite variables for the custom contrast theme */
        --text-color: CanvasText; /* System color keyword */
        --background-color: Canvas; /* System color keyword */
        --link-color: LinkText; /* System color keyword */
    }

    section a,
    .carousel-dots .dot.active,
    section.headline-news .stripe-bg + .container .dots .dot.active,
    .button{
        color: var(--text-color)!important;
        background: var(--link-color)!important;
    }

    /* Additional overrides for clarity if needed */
    nav.main a:focus, .carousel .dots .dot:focus, a:focus, button:focus,
    a:focus {
        outline: 2px solid Highlight; /* Ensure focus rings are visible */
    }
}

.high-contrast header .main-menu-wrapper a,
.high-contrast section.cover .content *{
    filter: contrast(2)!important;
}

.high-contrast footer .credits .heart,
.high-contrast footer,
.high-contrast footer a,
.high-contrast footer button{
    color: #fff!important;
    opacity: 1!important;
}

.high-contrast section .button{
    color: #fff!important;
    background: #000!important;
}

.high-contrast section.cover .content a.btn{
    background: #fff!important;
    color: #000!important;
}