/* General Style */
body {
    background:#5a5958;
    font-size: 100%;
    margin: 0em;
    padding: 0em;
    /*background-image: url("bilder/fp4.jpg");*/
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    font-weight: 200;
}
h1 {
    font-size: 3.0em;
    line-height: 1.4em;
    font-family: 'promptextrabold', Tahoma;
    /*font-weight: 200;*/
    color: #ccff00;
    margin: 0em;
    padding: 2em 0.8em 0.8em 0.8em  ;
    text-shadow: 2px 2px  #8e8e8e9a;
    background-color: #474844;
    text-align: center;
    border-bottom: 0.1em solid #ccff00;
}
h2 {
    font-size: 2.5em;
    line-height: 1.2em;
    font-family: 'promptextrabold', Tahoma;
    /*font-weight: 200;*/
    color: #ccff00;
    margin: 0em;
    padding: 2em 0.8em 0.8em 0.8em  ;
    text-shadow: 2px 2px  #8e8e8e9a;
    background-color: #474844;
    text-align: center;
    border-bottom: 0.1em solid #ccff00;
}

p {
    font-size: 1.6em;
    font-weight: 200;
    line-height: 1.6em;
    font-family: 'promptextralight', Tahoma;
    color: #2f2d2c;
    margin: 0em;
    padding: 0.8em 0.8em 0.8em 0.8em;
    
}

ul {
    margin: 0px;
    padding: 0px;
}
li {
    list-style: disc;
    font-family: 'promptextralight', Tahoma;
    /*font-weight: 200;*/
    color: #2f2d2c;
    padding: 0.5em 0em 0em 0em;
}
.left_alignment { 
    text-align: left; 
    padding-left: 1em;
}


img {
    
    height: auto;
    max-width: 100%;
    
}
a {
    text-decoration: none;
}

/*On Top Bar*/
#menubar {
    padding: 1.0em 1.8em ;
    background:#5a5958 ;
    position: sticky;
    top: 0;  
    display: none;    
}

#menubar ul {
    display:  inline;
    width: 1em;
}
#menubar ul li {
    display: inline;
    padding:0.0em 1.5em;
}
#menubar ul li a.menubutton{
    display: none;
}
#menubar ul li a.bonka{
    display: none;
   
 }
 #menubar ul li a.zaehler{
    display: inline;
    padding-left: 40em;
    max-width: 5em;
    }
    #menubar img{
        max-width: 10em;
    }


header img{
    width: 100%;
}

/* Navigation*/
nav2 {
    position: fixed;
    top: 5;
    display: none;
    background:#5a5958 ;
    text-align: center;
    margin: auto;
    width:100%;
}

nav2 ul{
    display: block;
   
}
nav2 ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
}

nav2 ul li img{
    max-height: 2.0em;
    max-width: 5em;
}

nav2 ul li a{
    color: #ffffff;
    font-size: 1.125em;
    line-height: 2.5em;
    padding: 0.563em 0.938em 0.375em 0.938em;
    transition:background 0.2s;
    -web-transition:background 0.2s;
}
nav2 ul li a:hover{
    background-color: ##ccff00;  
    border-bottom: 0.25em solid #ccff00;
}

nav2 ul li a.active{
    border-bottom: 0.25em solid #ccff00;
}

/* Navigation*/
nav {
    display: block;
    height: 2.5em;
    background:#5a5958 ;
    text-align: center;
    margin: auto;
}
nav ul{
    display: block;
   
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
}

nav ul li img{
    max-height: 2.0em;
    max-width: 5em;
}

nav ul li a{
    color: #ffffff;
    font-size: 1.125em;
    line-height: 2.5em;
    padding: 0.563em 0.938em 0.375em 0.938em;
    transition:background 0.2s;
    -web-transition:background 0.2s;
}
nav ul li a:hover{
    background-color: #c8f903a1;  
    border-bottom: 0.25em solid #ccff00;
    
}

nav ul li a.active{
    border-bottom: 0.25em solid #ccff00;
}


/* Conntent Area */

.logo{
    background:#ffffff ;
    
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
}
/*Main*/
#main{
    max-width: 1080px;
    display: block;
    width: 96%;
    margin: auto;
    padding: 0.5em;
}


#main article{
    display:block;
    background-color: #cccbcb;   
    text-align: center;
}
#main article img{
    /*max-width: 100%;
    /*box-shadow: 5px 5px 3px 3px #5a5958;
    border-radius: 10px;*/
    margin: auto;
}

/* Footer */
footer {
    display: block;
    background: #5a5958;
    text-align: center;
    margin: auto;
}
footer ul{
    display: block;
    width: 100%;
    margin: 0px auto;
}
footer ul li{
    display: inline;
    font-size: 1em;
    line-height: 2.8em;
    color: #e2d8d8;
    padding: 0em 0.625em 0em 0.625em;
}
footer ul li a{
    color: #ffffff;
}
div{
    display: inline-block;
    vertical-align: top;
}
.normal{
    width: 46%;
    padding: 0.8em 0.8em 0.8em 0.8em;
    text-align: justify;
}
/* Media Style */
@media screen and (max-width:800px) {
    body{
        font-size: 100%;
    }
    div{
        display: block;
    }
    .normal{
        max-width: 100%;
        width: 96%;
        padding: 0.8em 0.8em 0.8em 0.8em;
        text-align: justify;}
} 
@media screen and (max-width:600px) {
    body{
        font-size: 90%;
    }
    
    #main article{
        width:100%;
        display: block;
        margin: 0.625em 0em 0.625em 0em;
        
    }
}

@media screen and (min-width:550px) {
    nav.nav{
        display: block !important;
    }
    header{
        display: block;
        background:#3f3e3d;
        text-align:center ;
    }
       
}
@media screen and (max-width:550px) {
    body{
        font-size: 80%;
    }
    #menubar {
    display: block;
    }
    #menubar ul li a.menubutton{
        display: inline;
    }
    
    #menubar ul li a.menubutton img{
        width: 2em;
    }
    #menubar ul li a.bonka{
        display: inline;
    }
    nav {
        display: none;
        position: fixed;
        top: 100;
        height: auto;
    }
    nav ul li {
        display: block;
        margin: 0.3em 0em 0.3em 0em;
    }
    nav2 {
        display: none;
        }
    header{
        display: none;
        background:#3f3e3d;
        text-align:center ;
    }
   
}