/* =========================================
   NETX CUSTOM LANGUAGE SWITCHER (Complete)
   ========================================= */

/* --- 1. TRIGGER BUTTON --- */
.header__lang .lang-select__label {
    font-size: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.header__lang .lang-select__label::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a6aab5'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

.header__lang .lang-select__label::after {
    font-size: 16px !important;
    color: #333;
    font-weight: 400 !important;
    text-transform: uppercase;
    content: "EN"; 
}

html[lang^="de"] .header__lang .lang-select__label::after {
    content: "DE"; 
}

/* --- 2. CHEVRON & CONTAINER --- */
.header__lang .lang-select__arrow svg { display: none !important; }

.header__lang .lang-select__arrow::after {
    content: "";
    display: inline-block;
    width: 0; 
    height: 0; 
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333;
    margin-left: 2px;
    transform: translateY(1px);
}

.header__lang .lang-select__nav {
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border: 1px solid #e6e6e6 !important;
    margin-top: 8px !important;
    min-width: 140px;
}

/* --- 3. DROPDOWN ITEMS --- */
.header__lang .lang-select__nav li a {
    font-size: 0 !important;
    display: flex !important;
    align-items: center;
    padding: 10px 15px !important;
}

.header__lang .lang-select__nav li a::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.header__lang .lang-select__nav li a::after {
    font-size: 15px !important;
    color: #333;
    font-weight: 400 !important;
}

.header__lang .lang-select__nav li a:hover {
    background-color: #f2f2f4 !important;
}

/* --- 4. LOGIC: FLAGS & TEXT --- */
/* English Items (US Flag) */
.header__lang .lang-select__nav li a::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23EDEDED' d='M120.009 0H0v80h120.009V0Z'/%3E%3Cpath fill='%23CC0B1B' d='M0 73.8455h120.009V80H0v-6.1545ZM0 0h120.009v6.1545H0V0Zm0 12.309h120.009v6.1546H0V12.309Zm0 12.3091h120.009v6.1545H0v-6.1545Zm0 12.309h120.009v6.1545H0v-6.1545Zm0 12.309h120.009v6.1545H0v-6.1545Zm0 12.3003h120.009v6.1545H0v-6.1545Zm0 12.309h120.009v6.1546H0v-6.1546Z'/%3E%3Cpath fill='%232C4DB5' d='M60.8007 0H0v43.0729h60.8007V0Z'/%3E%3C/svg%3E");
}
.header__lang .lang-select__nav li a::after { content: "Englisch"; }

/* German Items (DE Flag) */
.header__lang .lang-select__nav li a[href*="/de/"]::before,
.header__lang .lang-select__nav li.de a::before,
html[lang^="de"] .header__lang .lang-select__nav li a[href^="javascript"]::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%23161616' d='M120 0H0v26.5224h120V0Z'/%3E%3Cpath fill='%23D00100' d='M120 26.5225H0v26.7388h120V26.5225Z'/%3E%3Cpath fill='%23F3DE3A' d='M120 53.2612H0V80h120V53.2612Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.header__lang .lang-select__nav li a[href*="/de/"]::after,
.header__lang .lang-select__nav li.de a::after,
html[lang^="de"] .header__lang .lang-select__nav li a[href^="javascript"]::after {
    content: "Deutsch" !important;
}

/* --- 5. ACTIVE STATE --- */
html[lang^="en"] .header__lang .lang-select__nav li:not(.de):not(:has(a[href*="/de/"])) a::after {
    text-decoration: underline;
    text-decoration-color: #08a97e;
    text-decoration-thickness: 2px;
}
html[lang^="de"] .header__lang .lang-select__nav li:has(a[href*="/de/"]) a::after,
html[lang^="de"] .header__lang .lang-select__nav li a[href^="javascript"]::after {
    text-decoration: underline;
    text-decoration-color: #08a97e;
    text-decoration-thickness: 2px;
}

/* --- 6. RESPONSIVE FIX (Squeeze Above Nav) --- */
/* This forces the Tools to stack ABOVE the Nav when screen space is tight (Tablet/Narrow Desktop) */
@media screen and (min-width: 1025px) and (max-width: 1450px) {
    
    /* 1. Force Items to Wrap cleanly */
    .header__center .col-s9 > .flex {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-content: center;
    }

    /* 2. Push Navigation to the bottom (Order 3) */
    .header__nav {
        order: 3;
        margin-top: 10px;
        margin-bottom: 5px;
        width: 100%; /* Forces it to its own line */
        justify-content: flex-end;
    }

    /* 3. Keep Tools at the top (Order 1 & 2) */
    .header__search { order: 1; }
    .header__lang   { order: 1; }
    .header_buttons { order: 2; }
}
```[[1](https://www.google.com/url?sa=E&q=https%3A%2F%2Fwww.netx.net%2Fabout-netx)]