/* Der Container-Button */
.lang-btn {
    position: fixed;
    bottom: 30px;           /* Etwas Abstand vom Rand */
    left: 30px;
    width: 50px;            /* Feste Breite */
    height: 50px;           /* Feste Höhe (gleich wie Breite für Kreis) */
    
    border-radius: 50%;     /* Macht den Button perfekt rund */
    border: 2px solid var(--color-primary); /* Weißer Rand zur Abhebung vom Hintergrund */
    
    padding: 0;             /* Kein Padding, damit das Bild randlos ist */
    background-color: var(--color-bg); /* Fallback Hintergrund */
    cursor: pointer;
    z-index: 10000;         /* Über allem anderen (auch über Mobile Menüs) */
    
    overflow: hidden;       /* Schneidet die Ecken der Flagge ab */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Schöner Schatten für Tiefe */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lang-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

    /* 90deg = Grünlich | 180deg = Bläulich | 280deg = Violett */
    filter: sepia(100%) hue-rotate(180deg) saturate(3) opacity(0.8);
    transition: filter 0.3s ease;
}

.lang-btn:hover img {
    /* Zurück zum Original beim Hover */
    filter: none;
}

/* --- Mobile Anpassungen (Bildschirme kleiner als 768px) --- */
@media (max-width: 768px) {
    .lang-btn {
        bottom: 20px;       /* Etwas näher am Rand auf kleinen Screens */
        left: 20px;
        width: 45px;        /* Etwas kleiner, um nicht zu stören */
        height: 45px;
    }
    
    /* Optional: Verhindert, dass der Button beim Tippen auf Touchscreens
       "kleben" bleibt (Hover-Status entfernen) */
    .lang-btn:hover {
        transform: none;
    }
    
    .lang-btn:active {
        transform: scale(0.95); /* Klickeffekt auf Handy */
    }
}