/* 
 * Translation Flags Language Switcher CSS
 * Alle CSS-Styles für die Translation-Flags (Language-Switcher)
 * Farben müssen via Custom Properties aus der colors.css genutzt werden
 *
 * Änderungsprotokoll: 2026-08-21 | parent-agent | @skill-css-rules, @skill-change-provenance | base- Präfix-Klassen an Template base.html angeglichen
 */

/* .base-language-switcher-container | Änderungsprotokoll: 2026-08-21 | parent-agent | @skill-css-rules, @skill-change-provenance | Vendor-Theme1-Selektoren übernommen */
.base-language-switcher-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* .base-language-switcher | Änderungsprotokoll: 2026-08-21 | parent-agent | @skill-css-rules, @skill-change-provenance | HTML nutzt base-language-switcher; Desktop margin-left auto */
.base-language-switcher {
    position: relative;
    top: auto;
    right: auto;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

@media (min-width: 1024px) {
    .base-language-switcher {
        margin-left: auto;
    }
}

/* .base-language-switcher-mobile | Änderungsprotokoll: 2026-08-21 | parent-agent | @skill-css-rules, @skill-change-provenance | Mobile-Overlay-Flaggen */
.base-language-switcher-mobile {
    display: none;
}

/* .base-language-flag-link | Änderungsprotokoll: 2026-08-21 | parent-agent | @skill-css-rules, @skill-change-provenance | Ein-Klassen-Selektor laut CSS-Regeln */
.base-language-flag-link {
    display: inline-block;
    text-decoration: none;
    transition: opacity var(--transition-fast);
    line-height: 0;
    border: none;
    outline: none;
    box-shadow: none;
    opacity: 0.75;
}

.base-language-flag-link:hover {
    opacity: 1;
}

.base-active {
    opacity: 1;
}

/* .base-flag-icon | Änderungsprotokoll: 2026-08-21 | parent-agent | @skill-css-rules, @skill-change-provenance | Ein-Klassen-Selektor laut CSS-Regeln */
.base-flag-icon {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    border: none;
    outline: none;
    box-shadow: none;
    flex-shrink: 0;
    display: block;
}