/* ************************************/
/* CSS für das Sprachwechselmenü      */
/* ************************************/
.parent-language-menu {
    position: relative;
    width: 3em;
    height: 2em;
    margin: 0;
    padding: 0;
    min-width: 3.2em;
}

.language-menu {
    width: 3.2em;
    height: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Erhöht, damit das Menü beim Aufklappen über dem Content liegt */
}

/* WICHTIG: Damit die Bilder (Flaggen) nicht aus ihren Boxen ausbrechen */
.language-menu img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sorgt dafür, dass die Flaggen sauber skalieren */
    display: block;
}

.button-language-menu .icon {
    position: absolute;
    width: 84%;
    height: 84%;
    top: 6%;
    left: 8%;
    z-index: 1;
    pointer-events: none; /* Verhindert, dass das Icon Mausklicks abfängt */
}

.button-language-menu {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}

/* Versteckt das Dropdown-Menü im Standardzustand */
.scroll-language-menu {
    display: none;
}

/* Zeigt das Menü beim Drüberfahren (Hover) an */
.language-menu:hover .scroll-language-menu {
    display: block;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
}

.language-menu:hover .flag {
    position: relative;
    display: block; /* Auf 'block' geändert, damit die Flaggen untereinander stehen */
    width: 90%;
    height: 1.8em; /* Feste Höhe für die einzelnen auswählbaren Flaggen */
    margin: 5% auto; /* Zentriert die Flaggen im Menü mit etwas Abstand */
    padding: 0;
}

.language-menu:hover .flag a{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.language-menu:hover .flag a img {
    width: 100%;
    height: 100%;
}