#navwrapper input, #navwrapper label, #navwrapper {display: none}
/**** Ausserhalb der Media-Query werden Input und Label ausgeblendet ****/

@media screen and (max-width: 630px) {

    /****
    Responsive Code für Template
    ****/
    
    html, body, header, {width: 100%; height: auto; position: relative; margin: 0; padding: 0; font-size: 17px; line-height: 28px; background: none; background-color: #f1d6c3}

    
    
    
    /****
    Responsive Code für Navigation
    ****/
    
    #navwrapper * {-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out}

    nav {display: none}
    
    #navwrapper {display: block; position: relative; z-index: 200}

    #navwrapper label {
        display: block;        /* Button wird eingeblendet, ist ausserhalb des Responsive Codes auf display: none */
        width: 100%;
        text-align: center;
        margin: 15px auto; padding: 0;
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        transition: all .2s ease-out}

    #nav_button ~ ul, #nav_button ~ ul li {
        max-height: 0;
        overflow: hidden;        /* max-height: 0; und overflow: hidden; sorgen dafür, dass die Navigationspunkte nicht sichtbar sind */
        list-style-type: none;
        width: 100%;
        text-align: center;
        margin: 5px 0;
        list-style-image: none;
        background-image: none}

    #nav_button ~ul li{
        padding: 5px 30px;
        background: #663266;
        /*text-align: center;*/}        /*Einkommentieren, wenn Navigation zentriert sein soll*/
    
    #nav_button ~ul li a{
    color: #fff; text-decoration: none; text-transform: uppercase
    }
    
    #nav_button ~ul li .aktiv {color: #D2AB6E}
    
    #nav_button ~ul li:hover{background:#743a74; border-top: 1px solid #d2ab6e }

    #nav_button:checked ~ul { max-height: 500px; overflow: visible}

    #nav_button:checked ~label {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)}

    #nav_button:checked ~ul li {
        max-height: 60px;
        height: 40px;
        overflow: visible;            /* sobald der Button oberhalb der Navigation genutzt wird, bekommt die Navigation eine andere Höhe und der Overflow wird angezeigt. So kann der Inhalt der Navigation eingeblendet und animmiert werden. */
        line-height: 30px;
        }
}