/** ARIA NAVIGATION NEU */
@media screen and (max-width: 700px) {
    .menubar-navigation {
        display: grid;
    }
}

.navi_big {
    font-size: 20px;
    height: 41px;
    line-height: 30px;
}

.menubar-navigation {
    margin: 0;
    font-size: 110%;
    list-style: none;
}

.menubar-navigation li {
    margin: 0;
    padding: 0;
    border: 0 solid black;
    list-style: none;
}

.menubar-navigation > li {
    display: inline-block;
    position: relative;
}

.menubar-navigation > li li {
    display: block;
}

.menubar-navigation > li > [role="menuitem"] {
    display: inline-block;
    margin: 2px;
    padding: 4px 4px 8px;
    border: 0 solid #eee;
    color: var(--color-primary-blue) !important;
    font-weight: bold;
}

.menubar-navigation [role="separator"] {
    padding-top: 3px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='0' y1='6' x2='12' y2='6' style='stroke:black;stroke-width:1' /%3E%3C/svg%3E%0A");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: repeat-x;
}

.menubar-navigation [role="menu"] [role="menuitem"],
.menubar-navigation [role="menu"] [role="separator"] {
    display: block;
    margin: 2px;
    padding: 4px;
    padding-left: 8px;
    background-color: #fff;
    border: 0 solid #eee;
    color: black;
}

.menubar-navigation [role="menu"] {
    display: none;
    position: absolute;
    padding: 7px 4px;
    border: 1px solid #A8A8A8;
    margin: 0px 0px 0px -16px;
    background-color: #fff;
}

.menubar-navigation [role="group"] {
    margin: 0;
    padding: 0;
}

/* aria-current styling */

.menubar-navigation > .submenu-startseite-nav > [role="menuitem"][aria-current],
.menubar-navigation > .submenu-startseite-nav > [role="menuitem"].aria-current-path {
    padding-bottom: 2px;
    background: url(images/bg_nav-startseite.svg) repeat-x scroll left bottom #FFFFFF;
}

.menubar-navigation > .submenu-planung-nav > [role="menuitem"][aria-current],
.menubar-navigation > .submenu-planung-nav > [role="menuitem"].aria-current-path {
    padding-bottom: 2px;
    background: url(images/bg_nav-planung.svg) repeat-x scroll left bottom #FFFFFF;
}

.menubar-navigation > .submenu-bewirtschaftung-nav > [role="menuitem"][aria-current],
.menubar-navigation > .submenu-bewirtschaftung-nav > [role="menuitem"].aria-current-path {
    padding-bottom: 2px;
    background: url(images/bg_nav-bewirtschaftung.svg) repeat-x scroll left bottom #FFFFFF;
}

.menubar-navigation > .submenu-verwaltung-nav > [role="menuitem"][aria-current],
.menubar-navigation > .submenu-verwaltung-nav > [role="menuitem"].aria-current-path {
    padding-bottom: 2px;
    background: url(images/bg_nav-verwaltungsfunktionen.svg) repeat-x scroll left bottom #FFFFFF;
}

.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current] {
    padding-left: 4px;
    border-left: 4px solid #034575;
}

/* focus styling */

.menubar-navigation.focus {
    padding: 0;
    border: #034575 solid 3px;
}

.menubar-navigation > li > [aria-expanded="true"],
.menubar-navigation > li > [role="menuitem"]:focus,
.menubar-navigation > li > [role="menuitem"]:hover {
    outline: none;
    background-color: transparent;
    border: none;
}

.menubar-navigation > li > [role="menuitem"]:focus,
.menubar-navigation > li > [role="menuitem"]:hover {
    padding: 2px;
    padding-bottom: 4px;
    border: none;
}

.menubar-navigation [role="menu"] [aria-expanded="true"],
.menubar-navigation [role="menu"] [role="menuitem"]:focus,
.menubar-navigation [role="menu"] [role="menuitem"]:hover {
    outline: none;
    background-color: #ccc;
}

.menubar-navigation [role="menu"] [role="menuitem"]:focus,
.menubar-navigation [role="menu"] [role="menuitem"]:hover {
    padding: 2px;
    padding-left: 6px;
    border: 1px solid #A8A8A8 !important;
    background-color: #eee;
    text-decoration: none;
}

.menubar-navigation > li > [aria-expanded="true"].aria-current-path,
.menubar-navigation > li > [role="menuitem"].aria-current-path:focus,
.menubar-navigation > li > [role="menuitem"].aria-current-path:hover,
.menubar-navigation > li > [role="menuitem"][aria-current]:focus,
.menubar-navigation > li > [role="menuitem"][aria-current]:hover {
    padding-bottom: 2px;
    border: none;
}

.menubar-navigation [role="menu"] [aria-expanded="true"].aria-current-path,
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:focus,
.menubar-navigation [role="menu"] [role="menuitem"].aria-current-path:hover,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:focus,
.menubar-navigation [role="menu"] [role="menuitem"][aria-current]:hover {
    padding-left: 4px;
    border-left: 4px solid #034575;
}


.submenu-startseite-nav.aria-current-path,
.submenu-startseite-nav:focus,
.submenu-startseite-nav:hover,
.submenu-startseite-nav:focus,
.submenu-startseite-nav:focus-within,
.submenu-startseite-nav:hover {
    background: url(images/bg_nav-startseite.svg) repeat-x scroll left bottom #FFFFFF;
    text-decoration: none !important;
    border: 1px solid #A8A8A8;
}

.submenu-planung-nav.aria-current-path,
.submenu-planung-nav:focus,
.submenu-planung-nav:hover,
.submenu-planung-nav:focus,
.submenu-planung-nav:focus-within,
.submenu-planung-nav:hover {
    background: url(images/bg_nav-planung.svg) repeat-x scroll left bottom #FFFFFF;
    text-decoration: none !important;
    border: 1px solid #A8A8A8;
}

.submenu-bewirtschaftung-nav.aria-current-path,
.submenu-bewirtschaftung-nav:focus,
.submenu-bewirtschaftung-nav:hover,
.submenu-bewirtschaftung-nav:focus,
.submenu-bewirtschaftung-nav:focus-within,
.submenu-bewirtschaftung-nav:hover {
    background: url(images/bg_nav-bewirtschaftung.svg) repeat-x scroll left bottom #FFFFFF;
    text-decoration: none !important;
    border: 1px solid #A8A8A8;
}

.submenu-verwaltung-nav.aria-current-path,
.submenu-verwaltung-nav:focus,
.submenu-verwaltung-nav:hover,
.submenu-verwaltung-nav:focus,
.submenu-verwaltung-nav:focus-within,
.submenu-verwaltung-nav:hover {
    background: url(images/bg_nav-verwaltungsfunktionen.svg) repeat-x scroll left bottom #FFFFFF;
    text-decoration: none !important;
    border: 1px solid #A8A8A8;
}

.menubar-navigation.focus {
    border: none !important;
}

.menubar-navigation a:focus {
    border: none !important;
}

/** ARIA NAVIGATION NEU ENDE */