#language-switch-icon
{

    position: fixed;
    bottom: 2vh;
    right: 2vh;
    width: 5vh;

    z-index: 120;

    transition: filter 0.1s ease; /* Macht den Übergang flüssig */

}



#language-options-container
{

    display: none;
    position: fixed;
    bottom: 7vh;
    right: 2vh;
    width: 5vh;

    z-index: 120;

}



#language-options-container:hover
{
    display: block;
}



.language-option
{

    width: 5vh;

}



.language-option:hover
{
    scale: 1.1;
}



/* 1. Zeigen, wenn das Icon gehovert wird */
#language-switch-icon:hover + #language-options-container,
/* 2. Offen halten, wenn der Container selbst gehovert wird */
#language-options-container:hover
{

    display: block;

}



/* Das Icon wird grau, wenn man direkt darüber hovert */
#language-switch-icon:hover
{
    filter: grayscale(100%);
}



/* Das Icon bleibt auch grau, wenn man im offenen Menü herumfährt */
#language-options-container:hover ~ #language-switch-icon, /* Falls das Icon im HTML NACH dem Container kommt */
#language-switch-icon:has(~ #language-options-container:hover)
{

    /* Falls das Icon VOR dem Container kommt */
    filter: grayscale(100%);

}


/*
@media (max-width: 660px)
{

    #language-switch-icon
    {

        bottom: 1vh;
        right: 28vh;
        width: 5vh;

    }



    #language-options-container
    {

        bottom: 6vh;
        right: 28vh;
        width: 5vh;

    }

}
*/