@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/*.menue {
    padding: 5px 0;
    width: 100%;
    text-align: center;
    background-color: lightblue;
}
    */

navheader {
    background-color: lightblue;
    width: 100%;
    float: left ;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

#menue {
    display: block;
    padding: 8px;
    text-decoration: none;
    float: left;
    height: 17px;
    width: auto;
}

#steuerung li {
    list-style: none;
    float: left;
}

#steuerung a {
    display: table-cell;
    height: 100%;
    width: 100%;
    padding: 8px; /* 0.5em x 16= 8px*/
    text-decoration: none;
    color: white;
    background-color: gray;
}

.menue-button {
    display: none;
}

#steuerung {
    float: right;
}

#steuerung a:hover {
    color: black;
    background: orange;
}

nav1 {
    display: block;
}

nav2 {
    display: none;
}

/*------------------------------------------------------------------
CSS erweitern um MENÜ-Button und entsprechende Steuerung 
Menü-Button oben rechts einblenden bei kleiner als 600px
-------------------------------------------------------------------*/
@media only screen and ( max-width: 640px ) {
    nav1 {
        display: none;
    }

    nav2 {
        position: relative;
        top: 35px;
        display: block;
        background-color: #efefef;
       
    }

    #menue {
        display: none;
    }
        .menue-button {
        display: block;
    }

    .menue-button {
        background-color: darkblue;
        display: block;
        position: absolute;
        right: 0px;
        top: 50px;
        padding: 8px; /*0.5em x 16*/
        color: white;
        
        z-index: 1;
        text-decoration: none;
    }

    #steuerung {
        float: left;
        width: 100%;
        display: none;
    }

    #steuerung li {
        width: 100%;
        border-bottom: 2px solid silver;
    }

    .menue-button:hover {
        color: black;
        background: orange;
    }
}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices)*/
#nav-menue:target #steuerung {
    display: block;
}

/* ausblenden des Menü-Bottons zum Öffnen - somit wird der zum Schließen sichtbar*/
#nav-menue:target .menue-button-beschr-open {
    display: none;
}