nav > ul {
    list-style:none;
// Safari hack, see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:relative;
    font-family: sans-serif;
}

nav li {
    margin: 0.5em;
    padding: 0;
    font-size: 1rem;
    flex: 1 1 0%;
    position: relative;
}

nav li ul li{
    margin: 0.5em 0.7em;
}


@media (min-width: 45em) {
    nav > ul {
        flex-direction: row;
        height: 3em;
    }
    nav li {
        flex: 1;
        flex-basis: 10em;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 1em;
    }
}

nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border: thin solid var(--border-color);
    border-radius: 5px;
    color: var(--link-color);

    background-color: var(--background-color);
    transition: all .25s ease-in;
    position: relative;
}

nav li[aria-current] a {
    background-color: var(--accent2-color);
    color: var(--accent1-color);
}


nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
    color: var(--background-color);
    color: var(--link-color);
    background-color: var(--accent1-color);
    background-color: rgba(133, 210, 98, 0.43);
    background-color: rgb(163, 222, 175);
}

/*     submenu navigation links      */
nav ul ul {
    visibility: hidden;
    height: 0;
    z-index: 1000;
    margin:0;
    padding:0;
    padding-bottom: 20px;
}
nav ul li {
    display: block;
    /* width: 15em; */
}

/*     Show the submenu on hover, focus     */
nav li:hover > ul {
    visibility: visible;
    height: auto;
}
nav li:focus-within > ul,
.visible {
    visibility: visible;
    height: auto;
}

[aria-expanded] {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    width:2em;
    height:2em;
    padding: 0;
    color: var(--accent1-color);
    background: var(--background-color); /* damit er bei nav a:focus noch sichtbar ist */
   /* transform: rotate(90deg);*/
    outline:transparent;
    border: thin solid var(--background-color);
    border-radius: 0.3em;
}

[aria-expanded] svg {
    pointer-events: none;
    fill: var(--accent1-color);
    border-radius: 0.3em;
    z-index:10;
}

nav li:hover [aria-expanded] svg {
    background: var(--accent1-color);
    fill: var(--background-color);
    fill: var(--accent_fill-color);
}

nav li:focus [aria-expanded] svg {
    background: var(--background-color);
    fill: var(--accent1-color);
    fill: var(--accent_fill-color);
}

[aria-expanded]:focus svg,
[aria-expanded]:hover svg{
    fill: var(--background-color);
    background: var(--accent1-color);
    background: var(--accent_fill-color);

}

[aria-expanded="true"] svg {
    transform: translate(0,0) rotate(90deg);
}

.visually-hidden,
[visually-hidden="true"] {
    position: absolute !important;
    clip-path: rect(1px, 1px, 1px, 1px) !important;
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
}



a:focus{
    outline:1px solid #54905c;
    outline-offset: 2px;
    color:#54905c;
}


@media (max-width: 44.99em) {
    ul.submenu {
        box-shadow: 0px 8px 94px rgba(0, 0, 0, 0.3);
        background-color: transparent;
    }
}

@media (min-width: 45em) {
    ul.submenu {
        box-shadow: 0px 8px 194px rgba(0, 0, 0, 0.0);
        background-color: #eee;
    }
}


:root {
    --background-color: #656565;
    --background-color: #eee;
    --background-color: #fff;

    --border-color: #aaa;

    --accent1-color: darkred;
    --accent1-color: #eee;


    --accent2-color: darkred;
    --accent2-color: #d7d7d7;

    --accent_fill-color: #aaa;


    --text-color: black;

    --link-color: gold;
    --link-color: #444;

    /*
    --background-color: midnightblue;
    --accent1-color: gold;
    --accent2-color: darkred;
    --text-color: black;
    */

    /*
    https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS_Menu8.html#view_result
    */
}