uix-site-links {
    & {
        display: flex;
        width: 100%;
        gap: 10px;
        flex-direction: column;
    }
    
    a:link, a:visited, a:active {
        font-family: Cambria;
        font-weight: bold;
        text-decoration: none;
        font-size: larger;
        color: white;
        background-color: rgb(53, 53, 53, 0.5);
        border-top: 1px solid rgb(255, 255, 255);
        border-bottom: 1px solid rgb(255, 255, 255);
    }
    
    a:hover {
        color: rgb(53, 53, 53);
        background-color: rgb(255, 255, 255, 0.5);
        text-decoration: none;
        border-top: 1px solid rgb(53, 53, 53);
        border-bottom: 1px solid rgb(53, 53, 53);
    }
    
    .popovertrigger, a {
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    
    /* nur der Wrapper bekommt height: 30px */
    .popovertrigger {
        position: relative;
        display: inline-block; /* wichtig */
        /* Höhe jetzt automatisch vom Inhalt */
    }
    
    /* Link im Wrapper bekommt gleiche Optik wie andere Links */
    .popovertrigger > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 10px; /* optional für Abstand links/rechts */
        font-family: Cambria;
        font-weight: bold;
        font-size: larger;
        color: white;
        text-decoration: none;
        background-color: rgba(53, 53, 53, 0.5);
        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }
    
    .popover {
        display: none;
        position: absolute;
        top: 100%; /* direkt unter dem Link */
        left: 0;
        padding: 10px;
        width: 100%;
        z-index: 100;
        flex-direction: column;
        gap: 5px;
    
        color: rgb(53, 53, 53);
        background-color: rgb(255, 255, 255, 0.5);
        border-bottom: 1px solid rgb(53, 53, 53);
    }
    
    .linkbutton {
        all: unset; /* entfernt Browser-Default-Styling */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 30px;
        font-family: Cambria;
        font-weight: bold;
        font-size: larger;
        color: white;
        background-color: rgba(53, 53, 53, 0.5);
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        cursor: pointer; /* wichtig für Hover-Feedback */
    }
    
    /* Hover-Effekt wie bei Links */
    .linkbutton:hover {
        color: rgb(53, 53, 53);
        background-color: rgba(255, 255, 255, 0.5);
        border-top: 1px solid rgb(53, 53, 53);
        border-bottom: 1px solid rgb(53, 53, 53);
    }
    
    #submenu[popover] {
        border: 0px;
        top: 0;
        width: 70vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        left: 0;
        box-shadow: 10px 0px 20px black;
        &::backdrop {
            backdrop-filter: blur(20px);
        }
        transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete;
        opacity: 1;
        z-index: 9999;
        transform: translateX(-70vw);
    
        &:popover-open {
            opacity: 1;
            transform: none;
    
            /* [[UIX moved @starting-style]] */
        }
    }
    
    @media (min-width: 950px) {
        & {
            flex-direction: row;
        }
        [popover] {
            display: none;
            &::backdrop {
                backdrop-filter: blur(0px);
            }
        }
    
        .popovertrigger > a:hover {
            color: rgb(53, 53, 53);
            background-color: rgba(255, 255, 255, 0.5);
            border-top: 1px solid rgb(53, 53, 53);
            border-bottom: 0px;
        }
    
        .popovertrigger:hover .popover {
            display: flex;
    
            .submenu {
                display: none;
            }
        }
    
        .popover > .catlinks {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
    }
    
}

@starting-style {
            & {
                opacity: 0;
                transform: translateX(-70vw);
            }
        }