* { padding: 0; margin: 0;}
#wrapper {
    background-color: blue;    
}
#header {
    width: 100%;
    height: 250px;
    display: block;
    background: url(kohle.jpg);
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;      
}
#headline {
    display: flex;
    align-items: center;
    justify-content: center;
}
#logo {
    float: left;
    width: 160px;
    height: auto;
    margin: 20px 50px ;
}
#headline {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: 180px;
}
.NB {
    color: white;    
    align-items: center;
    justify-content: center;
    text-align: center; 
    font-size: 80px;         
}
.jahre { 
    font-size: 50px;   
    color: gold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.navbar{    
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #2d2e31;        
}
.navi {
    display: flex;    
    align-items: center;
    justify-content: space-between;
    margin: 0px 80px 0px 80px;
    list-style-type: none;
}
li  {
    
    margin: 10px;
    font-size: 30px;
    font-weight: 800; 
    text-decoration: none;     
}
li a {
    text-decoration: none;
    color: white;
    padding: 5.5px;
}
li a:hover {
    text-decoration: none;
    background-color: white;
    color: black;
    padding: 8px;       
}
#background {
    background: #8c8c8c url(denim.webp) fixed repeat left top;  
    border: none; 
    margin-bottom: 0xp;          
}
h1 {
    text-align: center;
    font-size: 50px;
    color: white;
    margin-top: 80px;
}
h2 {
    text-align: center;
    font-size: 50px;
    color: white;
    margin-top: 30px;
}
p {
    text-align: center;
    font-size: 30px;
    color: white;
    margin-top: 30px;
}
#textfeld {
    width: 1200px; 
    margin: 0 auto;  
}
footer {
    display: flex;
    background-color: #2d2e31;
    height: 50px;
    align-items: center;
    justify-content: center;    
}
.footer {
    list-style-type: none;
    align-items: center;
    justify-content: center;
    display: flex;    
}
.fettbrand {
    border-radius: 10%;
    width: 600px;
    height: auto;
}
.wichtig {
    color: red;
    font-weight: 700;
    text-shadow: 2px 2px 4px #000000;
}
.person {
    text-decoration: underline;
}
#helfer {
    text-align: center;
    color: white; 
    list-style-type: disc;
    list-style-position: inside;
    font-size: 10px;    
}
.helferli {
    font-size: 30px;
    font-weight: 540;
}
.heimi {    
    border-radius: 10%;
    width: 600px;
    height: auto;    
}
.schulung {    
    border-radius: 10%;
    width: 600px;
    height: auto;    
}
.flogo {
    border-radius: 10%;
    width: 250px;
}
.hekatron {    
    border-radius: 10%;
    width: 600px;
    height: auto;    
}
.hekatron_logo {
    width: 300px;
    height: auto;
}
address {
    font-style: normal;
    font-size: 30px;
    color: white;
    text-align: center;
}
p.sachkundige {
    
    font-size: 30px;
    color: white;
    text-align: center;
}
address a {
    color: white;
    text-decoration: none;
}
address a:hover {
    color: red;
}
.sachkundige {
    font-size: 40px;
}
.sachkundige a {
    color: white;
    text-decoration: none;
}
.sachkundige a:hover {
    color: red;
    text-decoration: none;
}
#datenschutz a {
    color: red;    
}
#datenschutz a:after {
    color: red;
}
#datenschutz {
    width: auto;
    text-align: center;
    margin: 0px 100px 0px 100px;
}
.maps-container {
    display: flex;
    align-items: center;
    justify-content: center;    
}
#toggle_button{
    display: none;
}
label[for="toogle_button"]{
    display: none;
}
span.material-symbols-outlined {
    display: none; 
}
address a{
    color: violet;
}
.sachkundige a{
    color: violet;
}



@media only screen and (max-width: 800px) {
    #header {
    width: 100%;
    height: 250px;
    display: block;
    background: url(kohle.jpg);
    background-position: center;
    background-repeat: no-repeat; 
    background-size: cover;      
}
	#logo {
        float: left;
        width: 90px;
        height: auto;
        margin: 60px 10px 10px ;
    } 
    .jahre { 
        font-size: 1em;   
        color: gold;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0 35px 0 0;
    }
    #headline {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0 10px 0 0px;
    }
    #textfeld {
        width: 360px;        
    }
    .brandklassen {
        width: 300px;
    }
    footer li {
        font-size: 20px;
    }
    img {
        width: 360px;
    }
    .navbar{    
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: #2d2e31;        
    }
    .navbar a {
        font-size: 20px;
        text-align: right;
    }
    .navi  {
        margin: 0;
        padding: 0; 
        align-items: start;
        background-color: #8c8c8c; 
        margin-right: 50%;      
    }    
.material-symbols-outlined {
 color: white;
 justify-content: start;
 align-items: center; 
}
ul.navi {
    display: none;
    flex-direction: column;
}
#toggle_button:checked ~ ul.navi{
    display: flex;
}
span.material-symbols-outlined {
    display: flex ; 
    font-size: 40px;
    justify-content: start;
    align-items: center;
    margin-left: 10px;
    margin-top: 5px;
}
.flogo{
    width: 100px;
}
.fettbrand {
    width: 90%;
    justify-content: center;
    align-items: center;
}
.heimi {
    width: 90%;
    justify-content: center;
    align-items: center;
}
.schulung {
    width: 100%;
    justify-content: center;
    align-items: center;
}
.hekatron {
    width: 100%;
    justify-content: center;
    align-items: center;
}
h1{
    font-size: 9vw;
    text-align: center;
    margin: 40px 0px 20px 0px;   
}
h2{
    font-size: 9vw;
    text-align: center;
    margin: 25px 0px 20px 0px;  
}
#datenschutz {
    width: auto;
    margin: 0;   
}
p {
    width: 80%;
    margin: 0px 0px 0px 35px;     
    font-size: 30px;    
}
p.NB{
    font-size: 2.5em !important;    
}
.wichtig {
    width: 80%; 
}
#datenschutz a {
    width: auto;
    font-size: 10px;
    max-width: 90%;       
}
#datenschutz h1 {
    width: auto;
    font-size: 30px;       
}#datenschutz h2 {
    width: auto;
    font-size: 25px;       
}
li.helferli{
    font-size: 30px;
}
address {
    width: 80%;
    margin: 0px 0px 20px 35px;     
    font-size: 30px;    
}
}


@media only screen and (min-width: 801px) and (max-width: 1470px) {

    .navbar {
        max-width: 900%;
    }
    .navi {
        margin: 0px 0px;
    }
    ul a {
        font-size: 0.5em;
        max-width: 90%;
    }
    #textfeld {
        width: 80%;
    }
}

@media only screen and (max-width: 360px) {
    p.NB {
        font-size: 1.9em !important;
    }
    #textfeld {
        width: 320px;
    }
    p {
        font-size: 20px;
    }
    footer a {
        width: 320px;
        font-size: 15px;
    }
    .navi a {
        font-size: 15px;
    }
    .brandklassen {
        width: 260px;
    }
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 23px;
    }
    #helfer li {
        font-size: 20px;
    }
    .hekatron_logo {
        width: 240px;
    }
    address {
        font-size: 20px;
    }
    p.sachkundige {
        font-size: 20px;
    }
}