/* ############################################# */
/* #    Hauptmenü                              # */
/* ############################################# */

.main-nav:after {
    clear: both;
    content: "\00a0";
    display: block;
    height: 0;
    font: 0px/0 serif;
    overflow: hidden;
}
.nav-brand {
    float: left;
    margin: 0;
}
.nav-brand a {
    display: block;
    padding: 11px 11px 11px 20px;
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 17px;
    text-decoration: none;
}
#main-menu {
    clear: both;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 0 -25px;
}

#main-menu.sm {
    z-index: 55;
}

/* Mobile menu toggle button */
.main-menu-btn {
    float: right;
    margin: 5px 10px;
    position: relative;
    display: block;
    width: 23px;
    height: 60px;
    text-indent: 29px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: var(--color-black);
}

/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
    position: absolute;
    top: 50%;
    left: 2px;
    height: 2px;
    width: 24px;
    background: var(--color-gray-dark);
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.main-menu-btn-icon:before {
    content: '';
    top: -7px;
    left: 0;
}
.main-menu-btn-icon:after {
    content: '';
    top: 7px;
    left: 0;
}

/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
    height: 0;
    background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
    top: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
    display: none;
}
#main-menu-state:checked ~ #main-menu {
    display: block;
}

.sm-simple a .sub-arrow {
    right: 28px;
}

/* #### Bildschirm größer 768px #### */
@media (min-width: 768px) {
    .main-nav {
        height: 70px;
    }
    #main-menu {
        float: right;
        clear: none;
        height: 70px;
        margin: inherit;
    }

    /* hide the button in desktop view */
    .main-menu-btn {
        position: absolute;
        top: -99999px;
    }

    /* always show the menu in desktop view */
    #main-menu-state:not(:checked) ~ #main-menu {
        display: block;
    }

    /* Menühöhe, Abstände*/
    #main-menu > li, #main-menu > li > a {
        height: 70px;
    }
    #main-menu > li > a{
        padding: 27px 15px;
    }
    #main-menu > li > a.has-submenu {
        padding-right: 25px;
    }
    .sm-simple ul a.has-submenu {
        padding-right: 25px;
    }

    /* Menü-Pfeile */
    .sm-simple a span.sub-arrow {
        top: 50%;
        margin-top: -3px;
        right: 10px;
        width: 0;
        height: 0;
        border: solid var(--color-gray-light);
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 2px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .sm-simple ul a .sub-arrow {
        left: auto;
        right: 15px;
        margin-top: -4.02px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    .sm-simple ul {
        border: solid 1px var(--color-gray-lighter);
        box-shadow: none;
    }
    .sm-simple > li {
        border: none;
    }

    /* #### Markierung #### */
    #main-menu li.active > a,
    #main-menu li.spacer:has(.active) > a,
    #main-menu li.spacer:has(.current) > a {
        background-color: var(--color-gray-lightest);
    }
    #main-menu li.current > a {
        background-color: var(--color-gray-lighter);
    }
    #main-menu li.active > a:hover,
    #main-menu li.spacer:has(.active) > a:hover,
    #main-menu li.current > a:hover,
    #main-menu li.spacer:has(.current) > a:hover {
        background-color: var(--color-gray-lighter);
    }
}

/* #### Allgemeiner Style #### */
.sm-simple {
    border: none;
    box-shadow: none;
}
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}
li.current > a,
li.spacer > a {
    cursor: default;
}

/* ############################################# */
/* #    Breadcrumb                             # */
/* ############################################# */
#breadcrumb {
    background: var(--color-gray-lightest);
    padding: 8px 0;
}
.breadcrumb {
    margin: 0;
    font-size: 14px;
}
    .breadcrumb ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
        .breadcrumb li {
            display: inline; 
        }
            .breadcrumb li a {
                color: var(--color-gray);
                text-decoration: none;
            }
    .breadcrumb .active::after,
    .breadcrumb .spacer::after  {
        content: "/";
        color: var(--color-gray-light);
    }
    .breadcrumb .current a span,
    .breadcrumb .spacer span {
        color: var(--color-gray-light);
    }

/* ############################################# */
/* #    Sprachmenü                             # */
/* ############################################# */

#language_menu {
    float: inherit;
    font-size: 16px;
    position: relative;
}
    #language_menu ul {
        list-style: none;
        display: inline;
        margin: 0;
        padding: 0;
    }
        #language_menu ul::before {
            font-family: "Font Awesome 6 Free";
            content: "\f0ac";
            font-weight: 900;
            font-size: 18px;
            color: var(--color-white);
            padding-right: 5px;
            position: relative;
            top: 1px;
        }
        #language_menu ul li{
            display: inline;
        }
        #language_menu ul > li:first-of-type::after{
            content: ' / ';
            font-weight: normal;
        }
        #language_menu ul .active{
            font-weight: 700;
        }
            #language_menu ul li a{
                color: var(--color-white);
                text-decoration: none;
            }

/* #### Bildschirm größer 500px #### */
@media (min-width: 500px) {
    #language_menu {
        float: right;
    }
}