@font-face{

 font-family: uwe;
    src: url("fonts/Roboto-VariableFont_wdth,wght.ttf");

} 


.logo1{
position: relative;
top:0px;
margin-bottom: 0px;
z-index: -10;
left: 0px;
display: grid;
grid-template-columns: 1fr 2fr ;
gap: 5px ;
font-size: 3rem;
max-width: 88%;
max-height: 10rem;
min-width:  85%;
min-height: 200px;
}



.logo{
width: 240px;
height: 200px;
z-index: -1;
left: 0px;
    
}


.überschrift{
animation-name: drop-in;
animation-duration: 800ms;
animation-fill-mode: forwards;


}


 @keyframes drop-in{
    0%{ transform: translateY(-3000px);}
    
    


      33%{ transform: translateY(0px);}

    

      66%{ transform: translateY(-50px);}


    


    100%{ transform: translateY(-18px);}
    
 }





.Kontakt1{

    height: 12rem; 
    gap: 5px;
    display: grid;
    grid-template-columns:  0.5fr 2fr 0.5fr 2fr;
}


.Kontakt-item1{
font-size: 2.2rem;
color: black;
}


.Kontakt-bild{
width: 4rem;
height: 4rem;
}












.text-con{

    height: 20rem;
    border-radius: 15px;
    font-size: 2rem;
    color: black;
}








.nav ul{

list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;

}


.nav a{
display: block;
text-align: center;
color: rgb(0, 0, 0);
font-family: uwe;
font-size: 1.5rem;
padding: 10px;

}

nav a:hover{
text-shadow: 5px 5px 8px rgb(0, 0, 0);
}

.nav li{
  float: left;  
 
}


.navi{
   
    top: 0px;
    right: 0px;
    width: 9rem;
   height: 10rem;
    z-index: 10;
    float: right;
   
}




















.background-top{
    height: 28rem;
    z-index: -10;
    position: relative;
    width: 100%;
    margin-top:10px ;

}



.top{
    width: 100%;
    height: 100%;
}


















.body{

margin: 0px;
padding: 0px;
font-family: uwe;
background-color: rgb(255, 255, 255);
z-index: 10;
color: white;
}









.box0{
border: 3px solid rgba(0, 0, 0, 0);



}


.Angebote{
text-align: center;
  border-radius: 20px;
   text-shadow: 1px 1px 2px black; 
   color: black;
}





.Grid-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr ;
gap: 10px ;
text-align: center;
min-height: 3.5rem;
min-width: 3.5rem;
}


.Grid-item{
    margin: 3vh;
    border: 3px solid black;
    border-radius: 8px;
    box-shadow: 5px 6px 10px black;
    transform: scale(1);
    background-color: rgba(33, 33, 33, 0.651);
    
}




.Grid-container2{
display: grid;
grid-template-columns: 1fr 1fr  ;
gap: 10px ;
text-align: center;

}


.Grid-item2{
    margin: 3vh;
    border: 3px solid black;
    background-color: rgb();
    border-radius: 8px;
    box-shadow: 5px 6px 10px black;
    transform: scale(1);
    padding: 5px;
    background-color: rgba(33, 33, 33, 0.651);
    
}







.bild1{
    width: 100%;
    height: 100%;
}


.Grid-item:hover{
    margin: 20px;
    border: 3px solid black;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 8px 10px 20px black;
    transform: scale(1.15);
    transition: all 350ms;
}








.Grid-item2:hover{
    margin: 20px;
    border: 3px solid black;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 8px 10px 20px black;
    transform: scale(1.075);
    transition: all 350ms;
}








.Preise-con{
background-color: rgba(33, 33, 33, 0.75);
text-align: center;
height: 46rem;
width: 45%;
display: grid;
font-size: 2.75rem;
text-align: center;

}






.Preise-bild{
    width: 100%;
    height: 46rem;
    float: left;
}










.Kontakt{
    border: 3px solid black;
    height: 10rem;
    width: 100%;
    background-color: rgba(33, 33, 33, 0.75);
    bottom: 0px;
    display: grid;
}


.Kontakt-item{

    font-size: 20px;

}













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

    


    


    
.body{
    grid-template-columns: 1fr;
}




.überschrift{
    grid-template-columns: 1fr;
    font-size: 2rem;
}





.nav{
    grid-template-columns: 1fr;
}


.navi{
position: relative;
float: left;
height: fit-content;
width: 100%;
top: 200px;
}

.Angebote{
    grid-template-columns: 1fr;
}


.bild1{
    grid-template-columns: 1fr;
}


.Grid-container{
    grid-template-columns: 1fr 1fr;
}


.Grid-item{
    grid-template-columns: 1fr;
}


.logo{
    width: 240px;
height: 160px;
z-index: -1;
left: 0px
}


.logo1{
   position: relative;
top:0px;
margin-bottom: 70px;
z-index: -10;

display: grid;
grid-template-columns: 2fr  ;
gap: 0px ;
font-size: 3rem;
max-width: 88%;
max-height: 10rem;
min-width:  85%;
min-height: 200px;
text-align: center;
}



.box0{
    grid-template-columns: 1fr;
}




.überschrift{
  font-size: 5rem;
  margin-top: 75px;
 margin-bottom: 50px;
  
}

.Kontakt1{
   height: 12rem; 
    gap: 22px;
    display: grid;
    grid-template-columns:  1fr 2fr 1fr 2fr;
    width: 90%;
}

.Kontakt-item1{
   font-size: 14px;
}

.Kontakt-bild{
    grid-template-columns: 1fr;
}

.text-con{
    font-size: 1.5rem;
    height:fit-content;
    width: fit-content;
}

.background-top{
    grid-template-columns: 1fr;
    width: 100%;
    height: 10rem;
}

.top{
   width: 100%;
    height: 10rem;
}

.Grid-container2{
    grid-template-columns: 1fr;
}

.Grid-item2{
    grid-template-columns: 1fr;
}

.bild1{
    grid-template-columns: 1fr;
}

.Preise-con{
    width: 100%;
    grid-template-columns: 3fr ;
    font-size: 1.3rem;
}

.Preise-bild{
    grid-template-columns: 1fr;
    width: 100%;
}

.Kontakt{
    grid-template-columns: 1fr;
}

.Kontakt-item{
    grid-template-columns: 1fr;
}


}