.flag {
    display: inline-block;
    width: 1.5em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-bottom: 0.1em;
}
/* Deutsche Flagge */
.flag-de-de {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fc0' d='M0 320h640v160H0z'/%3E%3Cpath fill='%23000001' d='M0 0h640v160H0z'/%3E%3Cpath fill='red' d='M0 160h640v160H0z'/%3E%3C/svg%3E");
}

/* Britische Flagge */
.flag-en {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23012169' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23FFF' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z'/%3E%3Cpath fill='%23C8102E' d='m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z'/%3E%3Cpath fill='%23FFF' d='M241 0v480h160V0zM0 160v160h640V160z'/%3E%3Cpath fill='%23C8102E' d='M0 193v96h640v-96zM273 0v480h96V0z'/%3E%3C/svg%3E");
}

/* Spanische Flagge */
.flag-es {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NTAgNTAwIj48cGF0aCBmaWxsPSIjYzYwYjFlIiBkPSJNMCAwaDc1MHYyNTBIMHoiLz48cGF0aCBmaWxsPSIjYzYwYjFlIiBkPSJNMCAyNTBoNzUwdjI1MEgweiIvPjxwYXRoIGZpbGw9IiNmZmM0MDAiIGQ9Ik0wIDEyNWg3NTB2MjUwSDB6Ii8+PC9zdmc+");
}

/* Niederländische Flagge */
.flag-nl {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23ae1c28' d='M0 0h640v160H0z'/%3E%3Cpath fill='%23fff' d='M0 160h640v160H0z'/%3E%3Cpath fill='%2321468b' d='M0 320h640v160H0z'/%3E%3C/svg%3E");
}

/*****************************************
  Navigation and Menu
 */

#navigation {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    height: 100%;
}

@media only screen and (max-width: 1024px) {
    #navigation {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

/* Wrapper für Mobile-Navigation */
.sano-nav-wrapper {
    display: block;
}

/* Sprachauswahl-Flaggen */
.sano-nav-language {
    display: none;
}

/* Hauptmenü-Styling */
.sano-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    color: black;
    height: 100%;
}

.sano-nav a.sano-main-menu:after {
    content: "\e62d";
    display: inline-block;
    margin: 0 0 0 5px;
    vertical-align: top;
    transition: 0s;
    font-family: ET-Extra!important;
}

.sano-nav a.sano-main-menu {
    border-bottom: 2px solid rgba(255,255,255,.1);
    font-weight: 600;
    padding: 15px 0 15px 0;
    margin: 28px 0 27px 20px;
    color: black;
    cursor: pointer;
}

.sano-nav a.sano-main-menu:hover {
    border-bottom: 2px solid #2c6e49!important;
}

.sano-menu-item {
    position: relative;
}

.sano-menu-item a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #ffffff;
    transition: color 0.3s ease;
}

.sano-menu-item a:hover {
    color: #2c6e49;
}

/* Submenü-Styling */
.sano-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #2c6e49!important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 300px;
    z-index: 100;
    border-radius: 4px;
}

.sano-sub-menu .sano-menu-item {
    width: 100%;
}

.sano-menu-item .sano-menu-item a:hover {
    color: white;
    background-color: #000000bf!important;
}

/* Dritte Ebene */
.sano-sub-sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #2c6e49!important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 250px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* Plus/Minus Icons für Sub-Sub-Menü */
.sano-sub-menu .sano-menu-item.has-children > a {
    position: relative;
    padding-right: 30px;
}

.sano-sub-menu .sano-menu-item.has-children > a:after {
    content: "\e62f";
    font-family: 'ET-Extra';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 18px;
}

.sano-sub-menu .sano-menu-item.has-children.active > a:after {
    content: "\e62f";
    font-family: 'ET-Extra';
}

/* Desktop-Hover und Click-Effekte */
@media (min-width: 1024px) {
    /* Erstes Submenü bei Hover */
    .sano-menu-item:hover > .sano-sub-menu {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    /* Sub-Sub-Menü nur bei Klick, nicht bei Hover */
    .sano-sub-menu .sano-menu-item > .sano-sub-sub-menu {
        display: none;
    }

    /* Plus/Minus Icons für Sub-Sub-Menü im Desktop */
    .sano-sub-menu .sano-menu-item.has-children > a {
        position: relative;
        padding-right: 30px;
    }

    /* Position des Sub-Sub-Menüs */
    .sano-sub-sub-menu {
        left: 100%;
        top: 0;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}


/* Mobile Navigation */
#et-mobile-navigation {
    display: none;
}

.show-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.show-menu-button {
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    margin-top: 33px;
    background-color: transparent;
}

.show-menu-button span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.show-menu-button span:nth-child(1) { top: 0; }
.show-menu-button span:nth-child(2) { top: 6px; }
.show-menu-button span:nth-child(3) { top: 20px; }

.sano-menu-item-language {
    display: block!important;
}

.sano-menu-item-language .sano-sub-menu {
    min-width: 160px!important;
    left: -87px;
}

/* Mobile Menü Styling */
@media (max-width: 1023px) {
    #et-mobile-navigation {
        display: block;
        position: relative;
        z-index: 1001;
    }

    .sano-nav-wrapper {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #2c6e49!important;
        flex-direction: column;
        padding: 25px 0 0 0!important;
        overflow-y: auto;
        z-index: 1000;
    }

    .sano-nav-wrapper.active {
        display: flex;
    }

    /* Sprachauswahl im Mobile-Menü */
    .sano-nav-language {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        margin-left: 10px;
        padding: 0 0 10px 0;
    }

    .sano-nav-language a {
        padding: 8px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        margin-right: 8px;
    }

    .sano-nav-language a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .sano-nav-language .flag {
        width: 28px;
        height: 19px;
    }

    .sano-nav {
        flex-direction: column;
        height: auto;
        width: 100%;
    }

    .sano-nav li {
        margin: 0;
    }

    .sano-nav a.sano-main-menu {
        border: none;
        padding: 15px 10px!important;
        margin: 25px 0 0 0!important;
        background-color: rgba(255, 255, 255, 0.5);
        font-size: 1.2em;
    }

    .sano-nav a.sano-main-menu:hover {
        border: none!important;
    }

    .sano-nav a.sano-main-menu:after {
        content: none!important;
    }

    .sano-main-menu {
        color: #000000!important;
        padding: 12px 10px!important;
    }

    .sano-main-menu a {
        padding: 12px 10px!important;
    }

    .sano-menu-item a {
        padding: 12px 10px!important;
    }

    .sano-menu-item a {
        color: #fff;
        font-size: 1.1em;
    }

    /* Erste und zweite Ebene immer sichtbar */
    .sano-sub-menu {
        position: static;
        box-shadow: none;
        background: transparent !important;
        display: block !important;
        padding-left: 0;
        width: 100%;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sano-sub-menu .sano-menu-item.has-children > a:after {
        content: none;
    }

    /* Nur Sub-Sub-Menü versteckt */
    .sano-sub-sub-menu {
        position: static;
        box-shadow: none;
        display: none;
        /*        padding-left: 20px!important; */
        background: rgba(255, 255, 255, 0.1) !important;
        width: 100%;
    }

    /* Pfeil nur für Sub-Sub-Menü Items */
    .sano-sub-menu .sano-menu-item.has-children > a {
        position: relative;
    }

    .sano-sub-menu .sano-menu-item.has-children > a:after {
        content: '+';
        position: absolute;
        right: 10px!important;
        top: 30%;
        transform: translateY(-35%);
        transition: transform 0.3s ease;
        font-size: 26px;
    }

    .sano-sub-menu .sano-menu-item.has-children.active > a:after {
        content: '+';
        transform: translate(20%, -30%) rotate(45deg);
    }

    /* Hamburger-Menü Animation */
    .show-menu.active .show-menu-button span:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
    }

    .show-menu.active .show-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .show-menu.active .show-menu-button span:nth-child(3) {
        transform: rotate(-45deg);
        top: 10px;
    }

    /* Animation für Sub-Sub-Menü */
    .sano-nav .sano-sub-menu .sano-menu-item .sano-sub-sub-menu {
        display: none;
    }

    .sano-nav .sano-sub-menu .sano-menu-item .sano-sub-sub-menu {
        display: none;
        position: static;
        visibility: visible;
        opacity: 1;
        background-color: transparent;
        box-shadow: none;
        padding-left: 0;
        width: 100%;
    }

    .sano-nav .sano-sub-menu .sano-menu-item .sano-sub-sub-menu a {
        padding-left: 20px!important;
    }

    .sano-menu-item-language {
        display: none!important;
    }
}