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

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

    /****
    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}
    #navwrapper {display: block; margin-top: -9px;position: fixed; top:80px; right: 0; z-index: 102;}
    nav {height: auto; width: 100%; margin: 0; padding: 0 30px;}

    #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;
        text-align: center;
        margin: 5px 0;
        list-style-image: none;
        background-image: none}

    #nav_button ~ul li{
        padding: 5px 30px;
        background-color: #336DBA;
        text-align: center;}  
    
  #navwrapper a {text-decoration: none;color: #fff; text-transform: uppercase}
    #navwrapper a:hover {color:#EA202D;}
    
    
    
    #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;
        border-top: 1px solid #ddd}
}