body{
    margin: 0em;
    background: rgb(253, 253, 251);
 }

 #toolbar{
   height: 5em;
   width: 100%;
   background-color: rgba(253, 253, 251, 0.589);
   position: fixed;
   align-items: center;
   display: flex;
   top: 0;
   z-index: 8000;
   box-shadow: 1px 1px 12px 1px rgba(0 0 0 /25%);
}

 .nav-hinein{
    animation-duration: 400ms;
    animation-name: navhinein;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
 }
 
 .nav-hinaus{
    animation-duration: 400ms;
    animation-name: navhinaus;
    animation-fill-mode: forwards;
 }

 
 @keyframes navhinein{
    from {left: -280px;}
    to   {left: 0px;}
 }
 
 @keyframes navhinaus{
    from {left: 0px;}
    to   {left: -280px;}
 }
 main{
    margin-top: 130px;
    padding-right: 8%;
    padding-left: 8%;
 }

 a{
    text-decoration: none;
    color: rgb(39, 37, 37);
    font-family: 'Overlock SC'; 
    font-size: 15px;
 }
 
 .titel{
   display: block;
   margin-left: 1em;
    font-weight: bolder;
    font-size: 2em;
   font-family: 'Arizonia';
  color: rgb(41, 40, 40);
}


.fotografie{
    display: block;
    text-align: center;
   font-weight: bolder;
   font-family: 'Cinzel Decorative'; 
   font-size: 5em;
   color: rgb(255, 172, 46);
}


 h2{
    color:black;
    font-family: 'Cinzel Decorative';
    font-size: 3em;
     padding-top: 30px;
 }


 h3{
   color:black;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   text-align: left;
   padding-top: 30px;
 }

 h5{
   color:black;
   font-size: 1em;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   text-align: left;
   margin-bottom: 0%;
 }
 
 p{
    padding-top: 10px;
   color: black; 
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   font-size: 15px;
 }
 

 .wiederspruch{
   padding-top: 10px;
   color: black; 
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   font-size: 1em;
 }
nav{
   left: -280px;
   top: 80px;
   width: 260px;
   height: calc(100vh - 80px);
   background: rgb(53, 52, 50);
   position: fixed;
   z-index: 8000;     
}
 
 .icon-button{
   padding-left: 0.7em;
   padding-top: 0.3em;
    cursor: pointer;
    font-family: "Material Icons";
    font-size: 3.5em;
    border-radius: 5em;
    background: transparent;
    border-style: none;
    color: rgb(39, 37, 37);
 }
 nav ul{
    list-style-type: none;
    padding:  2em 0 0 0;
    margin: 0;
    
 }
 
 nav ul li{
    padding-left: 10px;
    padding-top: 20px;
    display: inline-block;
    margin-left: 40px;
    margin-right:25px;
 }
 
 nav ul li a{
    padding-left: 10px;
    text-decoration: none;
    color :white;
    text-transform: uppercase;
    font-family: 'Baloo Paaji 2';
    font-size: 20px;
 }
  
 #foto-startseite{
    max-width: 80%;
    display: block;
    margin: auto;
    padding-top: 6em;
 }
 
 .impressumDatenschutz{
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   padding-top: 1.5em;
    text-align: center;
}

.Datenschutz{
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   padding-top: 1.5em;
   text-align: center;
}

.untertitel{
   text-transform: uppercase;
   font-family: 'Cinzel Decorative';
   font-weight: 500;
   font-size: 15px;
   color: white;
   position: relative;
   letter-spacing: 1px;
   bottom: 72px;
   left: 16px;
}
  
 /* Kontakt*/
 #interesse{
    padding-left: 7px;  
 }
 
 .kontakt{
    padding-left: 20em;
    padding-right:20em;
    color: rgb(255, 255, 255);
 }
 
 .textfeld{
    width: 30px;
    height: 70px;
 }
 

 #name{
    padding-left: 30px;
    padding-top: 10px;
 }
 #mail{
    padding-left: 30px;
    padding-top: 10px;
 }
 #telefon{
    padding-left: 30px;
    padding-top: 10px;
 }
 #webseite{
    padding-left: 30px;
    padding-top: 10px;
 }
 
.footer{
   margin: 0 0 30px 0;
   padding-top: 8em;
   
 }
 .footer a{
   padding: 19px 8px 30px 30px;
    text-decoration: underline;
    color: black;
    font-size: 15px;  
 }


 .footer-item{
  
   font-size: 30px;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   justify-items: center;
   text-align: center;
}

@media (min-width: 360px) {
   .footer{
       grid-template-columns: 1fr 1fr 1fr;
   }
}

@media (max-width: 600px) {
   .footer{
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
   }
}
 #copy{
    color:black;
    text-align: center;
    margin: 0;
    padding-bottom: 16px;
    font-size: 15px;
    font-family: 'Overlock SC', cursive;
 }

 .ich-grid{
   padding-top: 40px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   grid-auto-rows: 20vw;
   column-gap: 5px;
   row-gap: 5px;
} 

.ich-foto{
   padding-top: 2em ;
   padding-left: 2em;
   transition: 3s ease;
   max-width: 80%;
   object-fit: cover;
   cursor: pointer;
}

.galerie-element .ich-foto:hover{
   transform: scale(1.1);
}

#audio_with_controls{
min-width: 2em;
max-width: 5em;
line-height: inherit;
display: block;
margin: auto;   
}