@font-face {
	font-family: Xolonium;
	src: url("../font/Xolonium-Regular.ttf");
}
#navwrapper input, #navwrapper label, #navwrapper {display: none}
/**** Ausserhalb der Media-Query werden Input und Label ausgeblendet ****/

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

    /****
    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 {height: auto; width: 100%; margin: 0; padding: 0 30px;}
    #navwrapper {display: block; position: absolute; top: 93px; left: 0;z-index: 100; width: 100%}
    #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: #dc2b18;
        text-align: center;}  
    
    #nav_button ~ul li ul {
        margin: 10px
    }
    
    #nav_button ~ul li a {color: #fff; text-decoration: none; font-family: "Xolonium";}
    
    
    
    #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}
}