/* Navi-Links im Overlay */

.navi-overlay .navi-overlay-link, .navi-overlay-link a :not(.gs_YWAysw a) {
    font-size: clamp(1rem, 12vw, 3.5rem) !important;
    font-family: var(--wp--preset--font-family--clash-display) !important;
    padding: 0 0 0 0rem !important;
    text-transform: lowercase;
    width: max-content !important;
}


.navi-overlay-link {
    display: inline-block;
    text-align: start;
    border-radius: 0px;
    color: inherit;
    height: rem;
    background-image: linear-gradient(var(--wp--preset--color--tertiary), var(--wp--preset--color--tertiary));
    background-size: 0% 4px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

@keyframes underline-navilink-sec {
    0%{
        background-image: linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary));
        background-size: 0% 4px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    100%{
        background-image: linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary));
        background-size: 100% 4px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
}

.navi-overlay-link:hover {
    animation: underline-navilink-sec ease-in-out 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: var(--wp--preset--color--secondary)!important;
}

/* Navi-Links negativ+positiv */

.navi-link-effekt span {
    display: inline-block;
    text-align: start;
    border-radius: 0px;
    color: inherit;
    height: 1.65rem;
    background-image: linear-gradient(var(--wp--preset--color--tertiary), var(--wp--preset--color--tertiary));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}

@keyframes underline-sec {
    0%{
        background-image: linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary));
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    100%{
        background-image: linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary));
        background-size: 100% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }
}

.navi-link-effekt span:hover {
    animation: underline-sec ease-in-out 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: var(--wp--preset--color--secondary);
}