@keyframes sichtbarkeitsWechsel {
    0%  {opacity: 0;}
    9% {opacity: 1;}
    20%{opacity: 1;}
    32% {opacity: 1;}
    40%{opacity: 0;}
    50% {opacity:0;}
    60%{opacity: 0;}
    70% {opacity: 0;}
    80%{opacity: 0;}
    90% {opacity: 0;}
    100%{opacity: 0;}
}


  *{
    padding: 0%;
    margin: 0%;
    font-family: sans-serif;
    box-sizing: border-box;
}

 
body{
    background: url(http://hintergrundbild.org/wallpaper/full/a/a/d/66421-top-wiese-hintergrundbilder-1920x1200-fuer-phones.jpg) fixed ;
    background-size: 1500px 1200px;
}

h1{
    font-size: 2.5em;
}

.clear{clear:both;}

a{ 
    text-decoration: none;
    color: black;
}

#wrapper , #footer{
    width: 75%;
    margin-left:12.5%;
    margin-top: 4%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 100px rgba(175, 255, 118, 0.65);
    max-width: 1300px;
}




#footer{
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 0.7rem;
    padding:10px;
    padding-left: 8%;
    padding-right:8%; 
    text-align: center;
    line-height: 1.1rem;
}

#footer a{
    margin: 5%;
    transition: color 1s;
}


#footer a:hover {
    color: #006100;
}

#wrapperheader{
    width: 95%;
    margin: auto;
    margin-left: 2.5%;
}

#wrapperheader a{font-family: 'Dancing Script', cursive;}

#nav{
    position: absolute;
    width: 70%;
    left:15%;
}

#logo{
    padding-top:20%;
    width:35%;
    background: url(logo.png);
    background-size: 100% 100%;
    background-blend-mode: lighten;
    margin:auto;
}



#trennstrich{
    height: 3px;
    width:90%;
    background: #21460A;
    margin: auto;
    margin-bottom:5px;
    margin-top:5px;

}


    
#ÜberUns , #Impressum  , #Produkte , #Kontakt , #Startseite {
    width: 19%;
    background: rgba(106, 187, 1, 0.7);
    float: left;
    margin: 0.5%;
    text-align: center;
    line-height: 2;
    font-size: 1.9rem;  
    border:  2px solid  #21460A; 
  
}

#ÜberUns:hover , #Impressum:hover , #ÜberUns:hover , #Produkte:hover , #Kontakt:hover , #Startseite:hover {
    background: #4C9B18;
}

 #p1, #p2 , #p3 , #p4, #p5 ,#p6 , #p7{

    width: 70%;
    margin-left:15%;
    margin-right:15%;
    margin-top:10px; 
  
}



#überschrift {
    margin-top: 120px;
    text-align: center;
    font-family: 'Sacramento';
    font-size: 2.5em
}

#überschrift2{
    margin-top: 50px;
    margin-bottom:20px; 
    text-align: center;
    font-family: 'Sacramento';
}

#überschrift3{
    margin-top: 50px;
    margin-bottom:20px; 
    text-align: center;
    font-family: 'Sacramento';
}

#überschrift4{
    margin-top: 60px;
    margin-bottom:20px; 
    text-align: center;
    font-family: 'Sacramento';
}

#überschrift5 ,#überschrift6 ,#überschrift7, #überschrift8{
    margin-left: 20%; 
    font-family: 'Sacramento';
    font-size: 35px;
    margin-top: 50px;
}

#überschrift5{
    margin-top: 20px;
}


#p7{
    padding-bottom:50px;
}

#Bilderkiste
{
    position: static;
    width: 400px;
    height: 300px;
    float: right;
    margin-left: 4%;
    margin-right: 8%;
    margin-bottom: 50px;
    margin-top: 50px;
    
    
}

.Bilderkiste{
    box-shadow: 10px 10px 10px gray;
}

#Bilderkiste2 ,#BilderkisteWirSindEinzigartig{
    position: static;
    width: 400px;
    height: 300px;
    float: left;
    margin-left: 8%;
    margin-right: 4%;
    margin-bottom: 50px;
    margin-top: 50px;
    z-index: 1;
    box-shadow: -10px 10px 10px gray;
    
}

#Bilderkiste3, #Bilderkiste4, #Bilderkiste5, #Bilderkiste6{
    position: static;
    width: 200px;
    height: 150px;
    float: right;
    margin-top: 3%;
    margin-bottom: 2%;
    margin-right: 4%;
    margin-left: 4%;
}






.BilderMitÜbergang{
    position: absolute;
    opacity: 0;    
}

#bild4, #bild10,  #bild16 ,#einzigartig1{
    animation: sichtbarkeitsWechsel 30s ;
    animation-iteration-count : infinite;
}

#bild1 p{
    position:absolute;
    font-size: 40px;
    font-family:'Sacramento' ;
    text-align: center;
    top: -50px;
    left: 60px;
    color: #2E1E03;
}

#einzigartig3 p{
    position:absolute;
    font-size: 35px;
    font-family: 'Indie Flower';
    text-align: center;
    transform: rotate(4deg);
    bottom: 0px;
    left: 34px;
    color: #000000;
}

#einzigartig1 p{
    position:absolute;
    font-size: 30px;
    font-family: 'Indie Flower';
    text-align: center;
    transform: rotate(-5deg);
    top: 75px;
    left: 190px;
    color: #221400;
}

#bild5, #bild11, #bild17,#einzigartig2{
    animation: sichtbarkeitsWechsel 30s ;
    animation-delay: 10s;
    animation-iteration-count : infinite;
}

#bild2 p{
    position:absolute;
    font-size: 40px;
    font-family:'Sacramento' ;
    text-align: center;
    transform: rotate(7deg);
    bottom: -55px;
    left: -20px;
}

#bild6, #bild12, #bild18,#einzigartig3{
    animation: sichtbarkeitsWechsel 30s ;
    animation-delay: 20s;
    animation-iteration-count : infinite;
}

#bild3 p{
    position:absolute;
    font-size: 40px;
    font-family:'Sacramento' ;
    bottom:-10px;
    right: 15%;
    text-align: center;
    color: #094709;
}

#bild1, #bild7, #bild13{
    animation: sichtbarkeitsWechsel 25s ;
    animation-iteration-count : infinite;
}

#bild4 p{
    position:absolute;
    font-size: 40px;
    font-family:'Sacramento' ;
    top:-60px;
    left: 10%;
    text-align: center;
    transform: rotate(3deg);
}


#bild2, #bild8, #bild14{
    animation: sichtbarkeitsWechsel 25s ;
    animation-iteration-count : infinite;
    animation-delay: 8s;
}

#bild5 p{
    position:absolute;
    font-size: 40px;
    font-family:'Sacramento' ;
    bottom:-50px;
    left: 10%;
    text-align: center;
}

#bild3 , #bild9, #bild15{
    animation: sichtbarkeitsWechsel 25s ;
    animation-iteration-count : infinite;
    animation-delay: 16s;
    
}

#bild6 p{
    position:absolute;
    font-size: 35px;
    font-family:'Sacramento' ;
    top:-60px;
    left: 10%;
    text-align: center;
}


#Produktunterpunkte{
    display: none;
    z-index: 4;
}

#Produkte:hover #Produktunterpunkte{
    display:block;
    position: absolute;
    width: calc(19% - 3px);
    background: #4C9B18;
  
}



#Gemüse , #Obst , #Nüsse , #Getreide, #Sonstiges{
    border:  2px solid  #21460A; 
    height: 60px;;
    font-size: 1.6rem;
    border-top: none; 
}

#Gemüse {
    border-top :2px solid  #21460A;
}
.Kaskade{
    border:  2px solid  #21460A; 
    border-bottom: none;
    height: 90%;
    font-size: 0.9em;
    position: relative;
    display: none;
    left: 100%;
    top:-70%;
    z-index: 10;
}

.Kaskade:last-child{
    border-bottom:  2px solid  #21460A; 
}


#Gemüse:hover #Blattgemüse,#Gemüse:hover #Fruchtgemüse, #Gemüse:hover #Zwiebeln, #Gemüse:hover #Hülsenfrüchte, #Gemüse:hover ,
 #Obst:hover , #Nüsse:hover , #Getreide:hover,#Sonstiges:hover,
 #Getreide:hover #Quinoa, #Getreide:hover #Couscous,#Getreide:hover #Weizen, #Getreide:hover #Roggen,
 #Nüsse:hover #Erdnüsse, #Nüsse:hover #Walnüsse,#Nüsse:hover #Mandeln, #Nüsse:hover #Maronen,
 #Obst:hover #Beeren,#Obst:hover #Südfrüchte, #Obst:hover #Steinobst, #Obst:hover #Kernobst, #Obst:hover , #Obst:hover , #Nüsse:hover , #Getreide:hover    
 {
    display: block;
    background: #3D7C13;
} 

#Nüsse:hover #Erdnüsse:hover , #Nüsse:hover #Walnüsse:hover, #Nüsse:hover #Maronen:hover, #Nüsse:hover #Mandeln:hover,
#Getreide:hover #Quinoa:hover , #Getreide:hover #Couscous:hover, #Getreide:hover #Roggen:hover, #Getreide:hover #Weizen:hover,
#Kernobst:hover #Birnen, #Kernobst:hover #Äpfel ,#Obst:hover #Kernobst:hover ,
#Beeren:hover #Himbeeren, #Beeren:hover #Brombeeren, #Beeren:hover #Heidelbeeren, #Beeren:hover #Erdbeeren ,#Obst:hover #Beeren:hover,
#Steinobst:hover #Pflaumen , #Steinobst:hover #Zwetschgen, #Obst:hover #Steinobst:hover,
#Südfrüchte:hover #Anannas, #Südfrüchte:hover #Pfirsiche, #Südfrüchte:hover #Orangen, #Südfrüchte:hover #Zitronen, #Obst:hover #Südfrüchte:hover,
#Hülsenfrüchte:hover #Erbsen, #Hülsenfrüchte:hover #Bohnen ,#Gemüse:hover #Hülsenfrüchte:hover ,
#Blattgemüse:hover #Salat, #Blattgemüse:hover #Spinat, #Blattgemüse:hover #Rucola, #Blattgemüse:hover #Kohl ,#Gemüse:hover #Blattgemüse:hover,
#Zwiebeln:hover #Frühlingszwiebeln , #Zwiebeln:hover #Speisezwiebeln, #Gemüse:hover #Zwiebeln:hover,
#Fruchtgemüse:hover #Avocado, #Fruchtgemüse:hover #Mais , #Fruchtgemüse:hover #Kürbis, #Fruchtgemüse:hover #Zuchini, #Gemüse:hover #Fruchtgemüse:hover
{
    display: block;
    background: #366B11;
} 





#Obst:hover #Beeren:hover #Himbeeren:hover ,
#Obst:hover #Beeren:hover #Brombeeren:hover ,
#Obst:hover #Beeren:hover #Heidelbeeren:hover,
#Obst:hover #Beeren:hover #Erdbeeren:hover,
#Obst:hover #Kernobst:hover #Äpfel:hover,
#Obst:hover #Kernobst:hover #Birnen:hover,
#Obst:hover #Steinobst:hover #Pflaumen:hover,
#Obst:hover #Steinobst:hover #Zwetschgen:hover,
#Obst:hover #Südfrüchte:hover #Anannas:hover,
#Obst:hover #Südfrüchte:hover #Pfirsiche:hover,
#Obst:hover #Südfrüchte:hover #Orangen:hover,
#Obst:hover #Südfrüchte:hover #Zitronen:hover,
#Gemüse:hover #Blattgemüse:hover #Salat:hover ,
#Gemüse:hover #Blattgemüse:hover #Spinat:hover ,
#Gemüse:hover #Blattgemüse:hover #Rucola:hover,
#Gemüse:hover #Blattgemüse:hover #Kohl:hover,
#Gemüse:hover #Blattgemüse:hover #Kohl:hover #Chinakohl,
#Gemüse:hover #Blattgemüse:hover #Kohl:hover #Spitzkohl,
#Gemüse:hover #Hülsenfrüchte:hover #Bohnen:hover,
#Gemüse:hover #Hülsenfrüchte:hover #Erbsen:hover,
#Gemüse:hover #Zwiebeln:hover #Frühlingszwiebeln:hover,
#Gemüse:hover #Zwiebeln:hover #Speisezwiebeln:hover,
#Gemüse:hover #Fruchtgemüse:hover #Avocado:hover,
#Gemüse:hover #Fruchtgemüse:hover #Mais:hover,
#Gemüse:hover #Fruchtgemüse:hover #Kürbis:hover,
#Gemüse:hover #Fruchtgemüse:hover #Zuchini:hover
{
    display: block;
    background: #2E5A0E;  
} 






#Gemüse:hover #Blattgemüse:hover #Kohl:hover #Chinakohl:hover,
#Gemüse:hover #Blattgemüse:hover #Kohl:hover #Spitzkohl:hover
{
    display: block;
    background: #2C530E;
   
} 



@media only screen and (max-width: 1050px) {
    #wrapper , #footer{
        width: 80%;
        margin-left:10%;       
    }
   
}

@media only screen and (max-width: 950px) {
    #wrapper , #footer{
        width: 85%;
        margin-left:7.5%;    
    }
   
    #ÜberUns , #Impressum  , #Produkte , #Kontakt , #Startseite {
        line-height: 1.9;
        font-size: 1.8rem;  
      
        
    }

    #Gemüse , #Obst , #Nüsse , #Getreide, #Sonstiges{
        height: 50px;
        font-size: 1.45rem;
    }

    .Kaskade{
        height: 100%; 
        top:-85%;
     
    }

   
}

@media only screen and (max-width: 850px) {
    #wrapper , #footer{
        width: 90%;
        margin-left:5%;
    }
    #ÜberUns , #Impressum  , #Produkte , #Kontakt , #Startseite {
        line-height: 1.8;
        font-size: 1.7rem;      
    }

    #Gemüse , #Obst , #Nüsse , #Getreide, #Sonstiges{
        height: 40px;
        font-size: 1.3rem;
    }

    #Bilderkiste2 ,#BilderkisteWirSindEinzigartig,#Bilderkiste{
        width: 266px;
        height: 200px;
        margin-bottom: 30px;
        margin-top: 30px;        
    }

    .BilderMitÜbergang img{
        width: 266px;
        height: 200px;
    }

    #Bilderkiste3, #Bilderkiste4, #Bilderkiste5, #Bilderkiste6{
        width: 200px;
        height: 150px;
        margin-top: 5%;
        margin-bottom: 5%;
     

    }

    #Bilderkiste3 img, #Bilderkiste4 img, #Bilderkiste5 img, #Bilderkiste6 img{
        width: 200px;
        height: 150px;
    }
  

    #bild1 p{
        font-size: 35px;
        top: -40px;
        left: 20px;
    }
    
    #einzigartig1 p{
        font-size: 25px;
        top: 0px;
        left: 125px;
    }
    
    
    #bild2 p{
        display: none;
    }
    

    #bild3 p{
        font-size: 35px;
        bottom:-10px;
        right: 5%;
        
    }
    
    
    #bild4 p{
        font-size: 32px;
        top:-50px;
        left: 5%;
    }

    #bild5 p{
        font-size: 30px;
        bottom:-38px;
        left: 10%;
    }
    

    #bild6 p{
        font-size: 28px;
        top:-40px;
        left: 0%;
        transform: rotate(0deg);
    }

    #einzigartig3 p{
        display:none;
     }


     body{
        background: url(http://hintergrundbild.org/wallpaper/full/a/a/d/66421-top-wiese-hintergrundbilder-1920x1200-fuer-phones.jpg) fixed ;
        background-size: 2250px 1800px;
    }
    
}

@media only screen and (max-width: 800px) {
    #Produkte, #Startseite {
        width: 48%;
        margin: 1%;       
    }

    #ÜberUns , #Impressum  , #Kontakt {
        width: 30%;
        margin: 1%;       
    }

    #Kontakt {
        margin-left:3%;       
        margin-right:3%; 
    }

    #Produkte:hover #Produktunterpunkte{     
        width: calc(30% - 2px);     
        margin-left: 18%;
    }

    .Kaskade{
        left: -100%;
        
        }

    #überschrift{
        margin-top: 165px;
    }

   
}

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

  
    #Bilderkiste ,#Bilderkiste2 ,#BilderkisteWirSindEinzigartig{
        margin-left: calc(50% - 133px);
        margin-right:  calc(50% - 133px);
        margin-top:10px;
        box-shadow: 10px 10px 10px gray,-10px 10px 10px gray;
    }

  


    #Produkte, #Startseite {
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        line-height: 1.7;
    }

    #ÜberUns , #Impressum  , #Kontakt {
        width: 30%;
        margin-left: 0px;
        margin-right: 0px;
        line-height: 1.7;
    }

    #Kontakt{
        margin-left: 5%;
        margin-right: 5%;
    }

    #Produkte:hover #Produktunterpunkte{     
        width: 33.333% ;     
        margin-left: calc(65% - 2px);
    }

    .Kaskade{
        top: -90%;
    }


    #Gemüse:hover #Blattgemüse:hover #Kohl:hover #Chinakohl,
    #Gemüse:hover #Blattgemüse:hover #Kohl:hover #Spitzkohl{
        display: none;
    }


 

    #überschrift {
        margin-top: 190px;
        
    }
}

@media only screen and (max-width: 550px) {
    
      #Produkte, #Startseite,#ÜberUns , #Impressum  , #Kontakt {
          width: 100%;
          margin-left: 0%;
          margin-right: 0%;
          line-height: 1.2;
      }
  
      #überschrift{
          margin-top: 250px;
      }
      
      #p1, #p2 , #p3 , #p4, #p5 ,#p6 , #p7{
          
              width: 80%;
              margin-left:10%;
              margin-right:10%;
              margin-top:10px; 
            
          }
  
      
          #Bilderkiste3, #Bilderkiste4, #Bilderkiste5, #Bilderkiste6{
              width: 133px;
              height: 100px;
              
          }
      
          #Bilderkiste3 img, #Bilderkiste4 img, #Bilderkiste5 img, #Bilderkiste6 img{
              width: 133px;
              height: 100px;
          }
          
  
          #Produkte:hover #Produktunterpunkte{
              display:none;
          }
      
  
    
  }

  @media only screen and (max-width: 350px) {
    
    #Bilderkiste2 ,#BilderkisteWirSindEinzigartig,#Bilderkiste{
      box-shadow: none;     
    }

    
  }
  @media only screen and (min-width: 1000px) {
     
#ÜberUns , #Impressum  , #Produkte , #Kontakt , #Startseite {
  max-width: 220px;
}
  }

  @media only screen and (min-width: 1500px) {
    

  body{
    background: url(http://hintergrundbild.org/wallpaper/full/a/a/d/66421-top-wiese-hintergrundbilder-1920x1200-fuer-phones.jpg) fixed ;
    background-size: 2500px 1750px;
    
   
    }

    #Bilderkiste3, #Bilderkiste4, #Bilderkiste5, #Bilderkiste6{
       margin-top:10px;
    }

    

}

@media only screen and (min-width: 1650px) {
    
    #Produkte:hover #Produktunterpunkte{
        display:block;
        position: absolute;
        width: calc(220px - 4px);
        background: #4C9B18;
      
    }
}


@media only screen and (min-width: 1900px) {
    
   
  body{
    background: url(http://hintergrundbild.org/wallpaper/full/a/a/d/66421-top-wiese-hintergrundbilder-1920x1200-fuer-phones.jpg) fixed ;
    background-size: 2500px 1750px;
    
   
    }

    #ÜberUns , #Impressum  , #Produkte , #Kontakt , #Startseite {
        width:220px;
        margin-left: 20px;
        margin-right: 20px;
       
    }

    #wrapper , #footer{
        width:1300px;
        margin-left:calc((100% - 1300px)/2);
      
    }

    #nav{

        left:calc((100% - 1300px)/2);
    }
  }


  @media only screen and (max-width: 750px), screen and  (min-height: 1200px) {
    
            body{
                background-size: 2000px 1600px;
            }
            
      }

@media only screen and (max-width: 750px), screen and  (min-height: 1600px) {
    
            body{
                background-size: 3000px 2400px;
            }
            
    }