/**
 * Internationalisierung (i18n) CSS - Todo 198
 * Styles für Sprachumschaltung mit Flaggen
 */

/* Language Switcher */
.language-switcher {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
}

.lang-flag {
    display: inline-block;
    margin: 0 3px;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.2s ease;
    opacity: 1; /* Nicht-aktive Sprachen sind voll sichtbar */
}

.lang-flag:hover {
    opacity: 1;
    transform: scale(1.1);
    text-decoration: none;
}

.lang-flag.active {
    opacity: 0.4; /* Aktive Sprache ist gedimmt */
    pointer-events: none; /* Nicht klickbar wenn aktiv */
    box-shadow: none;
    border: none !important;
    transform: none;
}

.lang-flag img {
    width: 20px;
    height: 14px;
    border: none;
    border-radius: 2px;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* CSS-basierte Flaggen als Fallback */
.flag-de, .flag-en {
    display: inline-block;
    width: 20px;
    height: 14px;
    border: none;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.flag-de {
    background: linear-gradient(to bottom, 
        #000000 0%, 
        #000000 33.33%, 
        #dd0000 33.33%, 
        #dd0000 66.66%, 
        #ffcc00 66.66%, 
        #ffcc00 100%);
}

.flag-en {
    background: #012169;
    background-image: 
        linear-gradient(45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
        linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
        linear-gradient(0deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
        linear-gradient(45deg, transparent 40%, #c8102e 40%, #c8102e 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, #c8102e 40%, #c8102e 60%, transparent 60%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .language-switcher {
        margin-left: 10px;
    }
    
    .lang-flag img {
        width: 18px;
        height: 13px;
    }
}

/* Animation für Sprachumschaltung */
.i18n-fade-in {
    animation: i18nFadeIn 0.3s ease-in;
}

@keyframes i18nFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}