/****** Navigation, wenn keine Media Queries greifen ******/

nav[role="navigation"] {
    background: rgba(255,255,255,0.6);
    color: #333;
}

nav[role="navigation"] ul {
    padding: 0;
    margin: 0;
}

nav[role="navigation"] li {
    display: inline-block;
    padding: 1em;
    margin: 0;
}

nav[role="navigation"] li a {
    font-family: 'Open Sans', tahoma, arial, sans-serif;
    text-decoration: none;
    color: #555555;
}

nav[role="navigation"] li.active a {
    text-decoration: underline;
}

nav li a:first-child {
    padding-left: 0;
}

body {
    min-width: 280px;
}

nav[role="navigation"] div.menubutton {
    display: none;
}

nav[role="navigation"] div.menubutton.fixed {
    display: block;
}

nav[role="navigation"] div.menubutton a:hover {
    text-decoration: none;
}

/****** Mobile Navigation ******/
@media screen and (min-width:200px) and (max-width:1399px) {
    /* Menü-Button sichtbar machen */
    nav[role="navigation"] div.menubutton {
        display: block;
    }
    
    body {
        position: relative; /* Bezugspunkt für div.menubutton */
    }

    /* Schatten zur Trennung des Menüs */
    header[role="banner"] {
        box-shadow: 0 2px 6px rgba(51,51,51,0.3);
    }

    /* Positionierung Menü-Buttons */
    div.menubutton {
        display: block;
        position: absolute;
        right: 1em;
        top: 1em;
        z-index: 1000;
    }

    /* Gestaltung des Menü-Buttons */
    div.menubutton a {
        display: block;
        color: white;
        background: rgba(221,210,197,1);
        text-decoration: none;
        padding: 0.5em;
        border-radius: 0.25em;
        border: none;
    }

    div.menubutton a.shownavlist:after {
        font-size: 11px;
        font-size: 0.6875rem;
    }

    div.menubutton a.hidenavlist:after {
        font-size: 11px;
        font-size: 0.6875rem;
    }
    
    div.menubutton a.hidenavlist {
        display: none;
    }
    
    /* Basisgestaltung für den Navigationsbereich */
    nav[role="navigation"] {
        padding: 0 1rem;
        margin: 0;
        background: rgba(255,255,255,0.6);
    }

    nav[role="navigation"] ul#navlist {
        max-height: 0; /* Ausblenden der Navigation */
        overflow: hidden;
        transition: 0.25s;
        list-style-type: none;
        border-radius: 0 0 1rem 1rem;
        margin: 0;
    }
    
    nav[role="navigation"] li {
        display: block;
        border-bottom: 1px solid #ddd;
        background: rgba(221,210,197,1);
    }
    
    nav[role="navigation"] li:last-of-type {
        border-bottom: 0;
    }
    
    nav[role="navigation"] li a {
        font-family: 'Open Sans', tahoma, arial, sans-serif;
        display: block;
        text-decoration: none;
        color: #555555;
    }

    nav[role="navigation"] li:hover,
    nav[role="navigation"] li:focus {
        color: white;
        text-decoration: underline;
        background: rgba(221,210,197,1);
    }

    nav[role="navigation"] li.active {
        background: rgba(221,210,197,1);
        color: white;
        text-decoration: none;
    }
    
    /* Einblenden der Navigation */
    #menu:target nav[role="navigation"] ul#navlist {
        max-height: 65rem;
    }

    /* Ausblenden des v-Menü-Buttons (mit Pfeil gegen unten) */
    #menu:target a.shownavlist {
        display: none;
    }

    /* Einblenden des ^-Menü-Buttons (mit Pfeil gegen oben) */
    #menu:target a.hidenavlist {
        display: block;
    }
}

/****** Desktop-Navigation ******/
@media screen and (min-width: 1400px) {
    header[role="banner"] {
        /* box-shadow: 0 2px 6px rgba(51,51,51,0.3); */
    }

    nav[role="navigation"] {
        background: rgba(221,210,197,1);
        margin: 0;
        border-radius: 0;
    }
    
    nav[role="navigation"] ul {
        position: relative;
        margin: 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        margin-left: 1.041666666667%;
        margin-right: 1.041666666667%;
    }
    
    nav[role="navigation"] li {
        list-style-type: none;
        display: inline-block;
        font-size: 1.2rem;
        font-weight: normal;
        background-color: rgba(221,210,197,1);
        margin: 0 0.5rem;
        min-width: 8rem;
        padding: 0;
    }

    nav[role="navigation"] li:first-of-type {
        margin-left: 0;
    }

    nav[role="navigation"] li:last-of-type {
        margin-right: 0;
    }

    nav[role="navigation"] li:first-of-type a {
        padding-left: 0;
    }

    nav[role="navigation"] li:last-of-type a {
        padding-right: 0;
    }

    nav li:first-child {
        /* margin-left: 10px; */
    }
    
    nav[role="navigation"] li a {
        font-family: 'Open Sans', tahoma, arial, sans-serif;
        display: block;
        color: #555555;
        text-decoration: none;
        border-radius: 0;
        padding: 1rem;
        height: 100%;
        width: 100%;
    }

    nav[role="navigation"] li.active {
        background: rgba(221,210,197,1);
        color: white;
        text-decoration: none;
    }

    nav[role="navigation"] li:hover,
    nav[role="navigation"] li:focus {
        color: white;
        text-decoration: underline;
        background: rgba(221,210,197,1);
    }

    .navwrap {
        width: 97.91666666666667%;
    }
    
    nav[role="navigation"] div.menubutton.fixed {
    }
    
    nav[role="navigation"] div.menubutton.fixed a {
        background: rgba(221,210,197,1);
        color: #555555;
        display: block;
        border-radius: 0.25em;
    }
}