@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0 ;
    padding: 0;
}

html, body{
  overflow-x: hidden;
  height: 100%;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}




body{
  font-family: 'Poppins', sans-serif;


  width: 100%;
 





}


#wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;

  width: 100%;
text-decoration: none !important;
 
}

.header {
position: absolute;

    top: 0px;
    left: 0px;
        width: 100%; 

        height: 46.875em;
      
        background: rgb(237,251,63);
        background: radial-gradient(circle, rgba(237,251,63,1) 0%, rgba(70,230,252,1) 100%);
        z-index: 11;
    }  

    #top{
      position: absolute;
      top: 0px;
      left: 0px;
    }
    @media only screen and (max-height: 431px) {
      #top{
        position: absolute;
        top: 110px;
        left: 0px;
      }
    }
 
 
    #header-boden {
      position: absolute;
      top: 401px;
      left: 999px;
      background-image: url("../img/graslandschaft51000rew.png");
      background-repeat: no-repeat;
      width: 62.5em;
      height: 23.313em;
      
      z-index: 13;
   
      }


#t45 {                  /*header-boden */
position: absolute;
top: 401px;
left: 0px;
width: 62.5em;
height: 23.313em;

z-index: 13;
}
 
        @media only screen and (max-width: 431px) {
          #t45{
          
            top: 401px;
            left: -570px;
          
        
             
                
              }
              
                }  


#header-boden1 {
background-image: url("../img/baumlandschaft1000scharfrewohne2.png") ;
position: absolute;
width: 62.5em;
height: 19.188em;
top: 121px;
left: 999px;
background-repeat: no-repeat;
z-index: 14;
}

    


#t4 {                         /*header-boden1 */

position: absolute;
width: 62.5em;
height: 19.188em;

top: 121px;
left: 0px;
z-index: 19;

}
@media only screen and (max-width: 681px) {
  #t4{
  
    top: 121px;
    left: -320px;
  

     
        
      }
      
        }      

        @media only screen and (max-width: 431px) {
          #t4{
          
            top: 121px;
            left: -420px;
          
        
             
                
              }
              
                }      

#header-boden2 {
position: absolute;
top: 680px;
left: 999px;
width: 62.5em;
height: 21.938em;
background-image: url("../img/moos-erde1000rew.png");
background-repeat: no-repeat;
z-index: 15;
}

#t46 {                             /*header-boden1 */
position: absolute;
top: 680px;
left: 0px;
width: 62.5em;
height: 21.938em;

z-index: 15;
}


        @media only screen and (max-width: 431px) {
          #t46{
          
            top: 680px;
            left: -570px;
          
        
             
                
              }
              
                }  

#footer-decke {                   /*Reihe 5 unten */
position: absolute;
top: 2751px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 3;

}

#t44 {                            /*Reihe 5 unten */
position: absolute;
top: 2751px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 3;

}

        @media only screen and (max-width: 431px) {
          #t44{
          
            top: 2751px;
            left: -570px;
          
        
             
                
              }
              
                }  


#mitte-oben {                      /* Reihe 1 oben */
position: absolute;
top: 970px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}


#t50 {                          /* Reihe 1 oben */
position: absolute;
top: 970px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 18;
}

        @media only screen and (max-width: 431px) {
          #t50{
          
            top: 970px;
            left: -570px;
          
        
             
                
              }
              
                } 

#mitte-oben-unten {               /* Reihe 1 unten */
position: absolute;
top: 1220px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}


#t51 {                            /* Reihe 1 unten */
position: absolute;
top: 1220px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 17;
}

        @media only screen and (max-width: 431px) {
          #t51{
          
            top: 1220px;
            left: -570px;
          
        
             
                
              }
              
                } 

#mitte-mitte-oben {           /* Reihe 2 oben */
position: absolute;
top: 1349px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}


#t52 {                          /* Reihe 2 oben */
position: absolute;
top: 1349px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 18;
}

        @media only screen and (max-width: 431px) {
          #t52{
          
            top: 1349px;
            left: -570px;
          
        
             
                
              }
              
                } 

#mitte-mitte-unten {            /* Reihe 2 unten */
position: absolute;
top: 1600px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}


#t53 {                        /* Reihe 2 unten */
position: absolute;
top: 1600px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 18;
}
 
        @media only screen and (max-width: 431px) {
          #t53{
          
            top: 1600px;
            left: -570px;
          
        
             
                
              }
              
                }


#mitte-mitte-mitte-oben {         /*  Reihe 3 oben */
position: absolute;
top: 1735px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;

z-index: 19;
}

#t54 {
position: absolute;               /*  Reihe 3 oben */
top: 1735px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 19;

}
 
        @media only screen and (max-width: 431px) {
          #t54{
          
            top: 1735px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-mitte-mitte-unten {        /*  Reihe 3 unten */
position: absolute;
top: 1984px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}

#t55 {                            /*  Reihe 3 unten */
position: absolute;
top: 1984px;
left: 0px;
width: 62.5em;

height: 15.813;
z-index: 18;
}

        @media only screen and (max-width: 431px) {
          #t55{
          
            top: 1984px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-mitte-unten-oben {       /*  Reihe 6 oben */
position: absolute;
top: 2882px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;
z-index: 19;
}

#t59 {                           /*  Reihe 6 oben */
position: absolute;
top: 2882px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 19;

}

        @media only screen and (max-width: 431px) {
          #t59{
          
            top: 2882px;
            left: -570px;
          
        
             
                
              }
              
                }


#mitte-mitte-unten-unten {         /*  Reihe 7 oben */ 
position: absolute;
top: 3134px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}

#t60 {                            /*  Reihe 7 oben */
position: absolute;
top: 3134px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 18;

}
 
        @media only screen and (max-width: 431px) {
          #t60{
          
            top: 3134px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-unten-unten-oben {            /* Reihe 8 oben */
position: absolute;
top: 3656px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;
z-index: 23;
}

#t61 {                                 /* Reihe 8 oben */
position: absolute;
top: 3656px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 23;

}

        @media only screen and (max-width: 431px) {
          #t61{
          
            top: 3656px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-unten-unten-unten {            /* Reihe 8 unten */
position: absolute;
top: 3900px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}

#t62 {                                /* Reihe 8 unten */
position: absolute; 
top: 3900px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 18;
}
 
        @media only screen and (max-width: 431px) {
          #t62{
          
            top: 3900px;
            left: -570px;
          
        
             
                
              }
              
                }

#unten-unten-unten-oben {           /* Reihe 9  */
position: absolute;
top: 4035px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;

z-index: 19;
}

#t63 {                               /* Reihe 9  */ 
position: absolute;
top: 4035px;
left: 0px;
width: 62.5em;


height: 15.813em;
z-index: 19;

}
 
        @media only screen and (max-width: 431px) {
          #t63{
          
            top: 4035px;
            left: -570px;
          
        
             
                
              }
              
                }

#unten-unten-unten-unten {
position: absolute;
top: 4216px;
left: 999px;
width: 62.5em;
height: 24.938em;
background-image: url("../img/kante1000rew.png");
background-repeat: no-repeat;
z-index: 23;
}

#t64 {                     /* kante unten  */ 
position: absolute;
top: 4216px;
left: 0px;
width: 62.5em;

height: 24.938em;
z-index: 23;
}

        @media only screen and (max-width: 431px) {
          #t64{
          
            top: 4216px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-unten-oben {              /* Reihe 4 oben */
position: absolute;
top: 2114px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;
z-index: 19;
}


#t57 {                           /* Reihe 4 oben */
position: absolute;
top: 2114px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 19;

}

        @media only screen and (max-width: 431px) {
          #t57{
          
            top: 2114px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-unten-unten {              /* Reihe 4 unten */
position: absolute;
top: 2366px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenunten1000rew.png");
background-repeat: no-repeat;
z-index: 18;
}


#t58 {                             /* Reihe 4 unten */
position: absolute;
top: 2366px;
left: 0px;
width: 62.5em;

height: 15.813em;



z-index: 18;

}

        @media only screen and (max-width: 431px) {
          #t58{
          
            top: 2366px;
            left: -570px;
          
        
             
                
              }
              
                }

#footer-unten-oben {              /* Reihe 5 oben */
position: absolute;
top: 2504px;
left: 999px;
width: 62.5em;
height: 15.813em;
background-image: url("../img/erdeobenoben1000rew.png");
background-repeat: no-repeat;
z-index: 19;
}

#t56 {                           /* Reihe 5 oben */
position: absolute;
top: 2504px;
left: 0px;
width: 62.5em;

height: 15.813em;
z-index: 19;
}

        @media only screen and (max-width: 431px) {
          #t56{
          
            top: 2504px;
            left: -570px;
          
        
             
                
              }
              
                }
#nach-unten{
  position: absolute;
  top: 4836px; 
  left: 0px;
}
@media only screen and (max-width: 1280px) {
  #nach-unten{
    position: absolute;
   bottom: 0px; 
    left: 0px;
  }
    }


    @media all and (orientation:landscape) and (max-width: 1000px) {
      #nach-unten{
        position: absolute;
        top: 5200px; 
        left: 0px !important;
      }}

#pre-footer {
position: absolute;
top: 4586px;
width: 100%;

height: 220px;
left: 0px;

 background-image: url("../img/matrix.gif");
background-repeat: repeat-x;
}


        @media only screen and (max-width: 431px) {
          #tpre-footer{
          
           width: 430px;
          
        
             
                
              }
              
                }
#pre-footer2 {
  position: absolute;
  top: 4805px;
  left: 0px;
  width: 100%;

  height: 220px;

   background-image: url("../img/matrix.gif");
  background-repeat: repeat-x;
  }

          @media only screen and (max-width: 431px) {
            #tpre-footer2{
            
             width: 430px;
            
          
               
                  
                }
                
                  }
  #t7  {   
    width: 16.875em;  
    height:20.125em ;                     /* Zebra */
  

 }

#Image7{
/* Zebra */
position: absolute;
left: 220px;
top: 200px;
width: 40.25em;  
height:20.125em ;                     /* Zebra */

  z-index: 119;
 }
 #transzebra{
  position: absolute;
left: 440px;
top: 200px;
  width: 41.5em;  
  height:20.75em ; 
  z-index: 120;
}


 @media only screen and (max-width: 1024px) {
  #Image7  {                         
        left: 140px;
        top: 200px;
     
     }
    }
 
    @media only screen and (max-width: 768px) {
      #Image7  {                         
            left: 60px;
            top: 200px;
        
         }
        }
 
        @media only screen and (max-width: 431px) {
          #Image7  {                         
                left: 10px;
                top: 200px;
            
             }
            }
           
 #t3  {                       /* Gedankentasche */

width: 167px;
height: 300px;

}
#Image3  {                       /* Gedankentasche */
  position: absolute;
  top: 170px;
  left: 485px;
  width: 167px;
  height: 300px;
  z-index: 131;
  }
@media only screen and (max-width: 1024px) {
  #Image3  {                       
    position: absolute;
    top: 170px;
    left:385px;
    z-index: 131;
    }
    }
    @media only screen and (max-width: 768px) {
      #Image3  {                       
        position: absolute;
        top: 170px;
        left:335px;
        z-index: 131;
        }
        }  
        @media only screen and (max-width: 431px) {
          #Image3  {                       
            position: absolute;
            top: 170px;
            left:175px;
            z-index: 131;
            }
            } 
#t49  {                        /*Baumstumpf */
position: absolute; 
width: 8.125em;
height: 7.688em;
top: 440px;
left: 510px;
z-index: 121;
}
@media only screen and (max-width: 1024px) {
  #t49  {                        
    position: absolute; 
    
    top: 440px;
    left: 410px;
    z-index: 121;
    }
}
@media only screen and (max-width: 768px) {
  #t49  {                        
    position: absolute; 
    
    top: 440px;
    left: 360px;
    z-index: 121;
    }
}
@media only screen and (max-width: 431px) {
  #t49  {                        
    position: absolute; 
    
    top: 440px;
    left: 200px;
    z-index: 121;
    }
}
#selbst {position: absolute;
  top: 790px;
  left: 0px;
}
@media only screen and (max-height: 431px) {
  #selbst {
    position: absolute;
    top: 1010px;
    left: 0px;
  }
}

#t2  {                        /* Sonnenblume/Selbstdarstellung */
  position: absolute;
  left: 610px;
  top: 340px;
  height: 12.5em;
  width: 12.5em;
  z-index: 222;
 

 }


 @media only screen and (max-width: 1280px) {
  #t2  {                       
    position: absolute;
    left: 510px;
    top: 340px;
  
   
  
   }
    }
 @media only screen and (max-width: 1024px) {
  #t2  {                       
    position: absolute;
    left: 430px;
    top: 340px;
    z-index: 222;
   
  
   }
    }

    @media only screen and (max-width: 940px) {
      #t2  {                       
        position: absolute;
        left: 340px;
        top: 340px;
        z-index: 222;
       
      
       }
        }
      
    @media only screen and (max-width: 768px) {
      #t2  {                       
        position: absolute;
        left: 290px;
        top: 340px;
        z-index: 222;
       
      
       }
        }
        @media only screen and (max-width: 431px) {
          #t2  {                       
            position: absolute;
            left: 120px;
            top: 340px;
            z-index: 222;
           
          
           }
            }

       

 #footer-bild{
  background-image: url("../img/leuchtsee1000rew.png");
  position: absolute;
  background-repeat: no-repeat;
  left: 999px;
  top: 4956px;
  height: 24.813em;
  width: 62.5em;
  z-index: 22;
 }

 #t72{
  position: absolute;
  left: 0px;
  top: 4956px;
  height: 24.813em;
  width: 62.5em;
  
  z-index: 22;
 }



 #unten{                      /* Abschluss Background */
  background-image: url("../img/ganzganzunten1000rew.png");
  position: absolute;
  background-repeat: no-repeat;
  left: 999px;
  top: 5346px;
  height: 15.438em;
  width: 62.5em;
  z-index: 22;
 }
  #t75{                         /* Abschluss Background */
  position: absolute;
  left: 0px;
  top: 5346px;
  height: 15.438em;
  width: 62.5em;
  
  z-index: 22;
 }


 #t76{                        /* Boot 200 Impressum*/
  position: absolute;
  left: 890px;
  top: 5326px;
  height: 93px;
  width: 200px;
  background: #faf8f800;
  z-index: 123;
  transition: rotate 250ms ease-in-out;
  border: none;
 }
 #t76:hover{
  rotate: 30deg;

 
 }

 @media only screen and (max-width: 1280px) {
  #t76  {                       
    position: absolute;
    left: 820px;
    top: 5326px;
    z-index: 123;
   
  
   }
    }
    @media only screen and (max-width: 1024px) {
      #t76  {                       
        position: absolute;
        left: 760px;
        top: 5326px;
        z-index: 123;
       
      
       }
        }
        @media only screen and (max-width: 940px) {
          #t76  {                       
            position: absolute;
            left: 700px;
            top: 5300px;
            width: 172px !important;
            height: 80px !important;
       
          
           
          
           }
            } 
          
        @media only screen and (max-width: 768px) {
          #t76  {                       
            position: absolute;
            left: 570px;
            top: 5326px;
            width: 129px !important;
            height: 60px !important;
       
          
           
          
           }
            } 
          /*
            @media only screen and (max-width: 431px) {
              #t76  {                       
                position: absolute;
                left: 300px;
                top: 5326px;
                width: 86px !important;
                height: 40px !important;
           
              
               
              
               }
                } 
               */
                @media only screen and (max-height: 500px) {
                  #t76  {                       
                    position: absolute;
                    left: 710px;
                    top: 5326px;
                    width: 172px !important;
                    height: 80px !important;
               
                  
                   
                  
                   }
                }
                     
 #t77{                        /* Boot soziales 250 */
  position: absolute;
  left: 230px;
  top: 5316px;
  height: 7.25em;
  width: 15.625em;
  z-index: 122;
  background: #faf8f800;
  transition: rotate 250ms ease-in-out;
 }
 #t77:hover{
  rotate: 30deg;

 
 }
 @media only screen and (max-width: 1280px) {
  #t77  {                       
    position: absolute;
    left: 280px;
    top: 5316px;
    z-index: 123;
   
  
   }
    }

    @media only screen and (max-width: 1024px) {
      #t77  {                       
        position: absolute;
        left: 130px;
        top: 5336px;
        z-index: 123;
       
      
       }
        } 
        @media only screen and (max-width: 940px) {
          #t77  {                       
            position: absolute;
            left: 100px;
            top: 5336px;
            width: 214px !important;
            height: 100px !important;
       
          
           
          
           }
            } 
        @media only screen and (max-width: 768px) {
          #t77  {                       
            position: absolute;
            left: 120px;
            top: 5366px;
            width: 172px !important;
            height: 80px !important;
       
          
           
          
           }
            } 
            @media only screen and (max-width: 431px) {
              #t77  {                       
                position: absolute;
                left: 60px;
                top: 5386px;
                width: 129px !important;
                height: 60px !important;
           
              
               
              
               }
                }    
  #t78{                       /* Boot 300 kontakt */
  position: absolute;
  left: 630px;
  top: 5410px;
  height: 8.75em;
  width: 18.75em;
  z-index: 122;
  transition: rotate 250ms ease-in-out;
 }
 
 #t78:hover{
  rotate: -30deg;
 }

 @media only screen and (max-width: 1280px) {
  #t78  {                       
    position: absolute;
    left: 550px;
    top: 5410px;
    z-index: 123;
   
  
   }
    }

    @media only screen and (max-width: 1024px) {
      #t78  {                       
        position: absolute;
        left: 420px;
        top: 5410px;
   
      
       
      
       }
        }
        @media only screen and (max-width: 940px) {
          #t78  {                       
            position: absolute;
            left: 400px;
            top: 5410px;
            width: 257px !important;
            height: 120px !important;
       
          
           
          
           }
            }    
        @media only screen and (max-width: 768px) {
          #t78  {                       
            position: absolute;
            left: 380px;
            top: 5430px;
            width: 214px !important;
            height: 100px !important;
       
          
           
          
           }
            }   
            @media only screen and (max-width: 431px) {
              #t78  {                       
                position: absolute;
                left: 190px;
                top: 5380px;
                width: 172px !important;
                height: 80px !important;
           
              
               
              
               }
                }   
           
  #t73{
  position: absolute;
  left: 0px;
  top: 930px;
  height: 7.938em;
  width: 16.875em;
  z-index: 122;
 }

 #t74{
  position: absolute;
  left: 1229px;
  top: 890px;
  height: 2.313em;
  width: 4.813em;
  z-index: 122;
 }

 @media only screen and (max-width: 1280px) {
  #t74  {                       
    position: absolute;
    left: 1120px;
    top: 896px;
   
   
  
   }
    }
    @media only screen and (max-width: 1024px) {
      #t74  {                       
        position: absolute;
        left: 750px;
        top: 896px;
    
       
      
       }
        }
    
        @media only screen and (max-width: 768px) {
          #t74  {                       
            position: absolute;
            left: 110px;
            top: 896px;
     
           
          
           }
            }
            @media only screen and (max-width: 431px) {
              #t74  {                       
                position: absolute;
                left: 90px;
                top: 896px;
               
               
              
               }
                }
 #t90{
  position: absolute;
  left: 220px;
  top:793px;
  height: 7.625em;
  width: 9.375em;
  z-index: 122;
 }
 @media only screen and (max-width: 431px) {
  #t90  {                       
    position: absolute;
    left: 50px;
    top: 755px;
  
   
  
   }
    }
#t91{
  position: absolute;
  left: 850px;
  top: 800px;
  height: 2.313em;
  width: 4.625em;
  z-index: 122;

 }
 @media only screen and (max-width: 1024px) {
  #t91  {                       
    position: absolute;
    left: 550px;
    top: 896px;

   
  
   }
    }
 @media only screen and (max-width: 768px) {
  #t91  {                       
    position: absolute;
    left: 560px;
    top: 896px;

   
  
   }
    }
    @media only screen and (max-width: 431px) {
      #t91  {                       
        position: absolute;
        left: 280px;
        top: 806px;
    
       
      
       }
        }
 #t92{
  position: absolute;
  left: 890px;
  top: 977px;
  height: 2.375em;
  width: 4.813em;
  z-index: 122;
  
 }
 @media only screen and (max-width: 1024px) {
  #t92  {                       
    position: absolute;
    left: 370px;
    top: 896px;
   
   
  
   }
    }
    @media only screen and (max-width: 940px) {
      #t92{
      
        top: 896px;
        left: 220px;
      
    
         
            
          }
          
            } 
            
    @media only screen and (max-width: 431px) {
      #t92  {                       
        position: absolute;
        left: 220px;
        top: 896px;
      
       
      
       }
        }
 #t93{
  position: absolute;
  left: 300px;
  top: 987px;
  height: 39px;
  width: 77px;
  z-index: 122;
 }
 #t94{
  position: absolute;
  left: 990px;
  top: 830px;
  height: 2.563em;
  width: 4.813em;
  z-index: 122;
 }
 @media only screen and (max-width: 1024px) {
  #t94  {                       
    position: absolute;
    left: 620px;
    top: 830px;
   
 
  
   }
    }
    @media only screen and (max-width: 431px) {
      #t94  {                       
        position: absolute;
        left: 300px;
        top: 896px;
      
       
      
       }
        }
 #t95{
  position: absolute;
  left: 170px;
  top: 980px;
  height: 2.625em;
  width:4.813em;
  z-index: 122;
 }
 #t96{
  position: absolute;
  left: 600px;
  top: 890px;
  height: 3.625em;
  width: 1.875em;
  z-index: 122;
 
 }
 @media only screen and (max-width: 1024px) {
  #t96  {                       
    position: absolute;
    left: 40px;
    top: 896px;
  
   
  
   }
    }
 
 @media only screen and (max-width: 768px) {
  #t96  {                       
    position: absolute;
    left: 40px;
    top: 896px;
 
   
  
   }
    }
    @media only screen and (max-width: 431px) {
      #t96  {                       
        position: absolute;
        left: 20px;
        top: 856px;
    
       
      
       }
        }
 #t97{                          /* Elster */
  position: absolute;
  left: 920px;
  top:490px;
  height: 7.5em;
  width: 12.5em;
  transition: top 150ms ease-in;
  z-index: 122;
 }
 @media only screen and (max-width: 1280px) {
  #t97 {
    position: absolute;
  left: 760px;
  }
 }
 @media only screen and (max-width: 1024px) {
  #t97 {
    position: absolute;
  left: 660px;
  }
}
@media only screen and (max-width: 940px) {
  #t97 {
    position: absolute;
  left: 630px;
  }
}
@media only screen and (max-width: 768px) {
  #t97 {
    position: absolute;
  left: 520px;
  }
}
@media only screen and (max-width: 431px) {
  #t97 {
    position: absolute;
    top:630px;
    left: 170px;
  }
}
 #t97:hover{
  position: absolute;
  top:450px;
 }
  @media only screen and (max-width: 431px) {
    #t97:hover{
      position: absolute;
      top:580px;
    }
  }

 #t98{                          /* Pinguin */
  position: absolute;
  left: 470px;
  top: 5056px;
  height: 197px;
  width: 300px;
  z-index: 122;
 }
 @media only screen and (max-width: 768px) {
  #t98  {                       
    position: absolute;
    left: 430px;
    top: 5056px;
   

  
   
  
   }
    } 
    @media only screen and (max-width: 431px) {
      #t98  {                       
        position: absolute;
        left: 190px;
        top: 5136px;
        height: 144px;
        width: 220px;
      
    
      
       
      
       }
        } 
 #t99{                        /* Eisbaer */
  position: absolute;
  left: 210px;
  top:4976px;
  height: 131px;
  width: 100px;
  z-index: 122;
 }
 @media only screen and (max-width: 431px) {
  #t99  {                       
    position: absolute;
    left: 100px;
    top: 5036px;
   
    height: 105px;
    width: 80px;
  
   
  
   }
    } 
#t200{  
  position:absolute;                      /* Schnecke 11 */
  top: 990px;
  left: 1200px;
  width: 4.813em;
  height: 2.5em;
  z-index: 122;
}
@media only screen and (max-width: 1280px) {
  #t200  {                       
    position: absolute;
    left: 1100px;
    top: 990px;
   
   
  
   }
    }
    @media only screen and (max-width: 1024px) {
      #t200  {                       
        position: absolute;
        left: 620px;
        top: 990px;
       
       
      
       }
        }
    
        @media only screen and (max-width: 768px) {
          #t200  {                       
            position: absolute;
            left: 520px;
            top: 990px;
  
           
          
           }
            }
           
            
        @media only screen and (max-width: 431px) {
          #t200  {                       
            position: absolute;
            left: 20px;
            top: 960px;

           
          
           }
            }
           
 #t80{
  position: absolute;
  left: 700px;
  top: 1000px;
  height: 2.438em;
  width: 4.813em;
  z-index: 122;
 }
 @media only screen and (max-width: 768px) {
  #t80  {                       
    position: absolute;
    left: 300px;
    top: 780px;
 
   
  
   }
    }

 @media only screen and (max-width: 431px) {
  #t80  {                       
    position: absolute;
    left: 200px;
    top: 780px;
   
   
  
   }
    }
   
 #t81{                        /* Frosch */
  position: absolute;
  left: 745px;
  top: 2480px;
  height: 67px;
  width:80px;
  z-index: 122;
 }
 @media only screen and (max-width: 1280px) {
  #t81  {                       
    position: absolute;
    top: 2480px;
    left: 470px;
   
  
   }
    }
    @media only screen and (max-width: 1024px) {
      #t81  {                       
        position: absolute;
        top: 2480px;
        left: 400px;
       
      
       }
        }
        @media only screen and (max-width: 940px) {
          #t81  {                       
            position: absolute;
            top: 2480px;
            left: 310px;
            height: 59px !important;
            width: 70px !important;
          
           
          
           }
            }
        @media only screen and (max-width: 768px) {
          #t81  {                       
            position: absolute;
            top: 2480px;
            left: 280px;
            height: 59px !important;
            width: 70px !important;
          
          
           }
            }
            @media only screen and (max-width: 431px) {
              #t81  {                       
                position: absolute;
                top: 2480px;
                left: 170px;
                height: 59px !important;
                width: 70px !important;
              
              
               }
                }
     
 #zaun{
  background-image: url("../img/zaun1000rew.png");
  position: absolute;
  background-repeat: no-repeat;
  left: 999px;
  top: 4096px;
  height: 8.188em;
  width: 62.5em;
  z-index: 20;
 }

 #t83{                  /* Zaun */
  position: absolute;
  left: 0px;
  top: 4096px;
  height: 8.188em;
  width: 62.5em;
  
  z-index: 23;
 }
 
        @media only screen and (max-width: 431px) {
          #t83{
          
            top: 4096px;
            left: -570px;
          
        
             
                
              }
              
                }
#t8  { 
position: absolute;
    left: 323px;
    top: 2760px;
  z-index: 119;
 }

 #mitte-mitte-mitte-mitte-oben{                /* Ebene 7 oben */
  background-image: url("../img/erdeobenoben1000rew.png");
  position: absolute;
  background-repeat: no-repeat;
  top: 3269px;
  left: 999px;
  width: 62.5em;

height: 15.813em; 
z-index: 44;
 }


#t100 {
  position: absolute;                         /* Ebene 7 oben */
  top: 3269px;
  left: 0px;
  width: 62.5em;
  
  height: 15.813em; 

  z-index: 44;
}

        @media only screen and (max-width: 431px) {
          #t100 {
          
            top: 3269px;
            left: -570px;
          
        
             
                
              }
              
                }

#mitte-mitte-mitte-mitte-unten{               /* Ebene 7 unten */
  background-image: url("../img/erdeobenunten1000rew.png");
  position: absolute;
  background-repeat: no-repeat;
  top: 3521px;
  left: 999px;
  width:62.5em;

height: 15.813em; 
z-index: 22;
 }


#t101 {
  position: absolute;                         /* Ebene 7 unten */
  top: 3521px;
  left: 0px;
  width: 62.5em;
  
  height: 15.813em; 
 
  z-index: 22;
}

        @media only screen and (max-width: 431px) {
          #t101{
          
            top: 3521px;
            left: -570px;
          
        
             
                
              }
              
                }
#t102 {
  position: absolute;
  left: 350px;
  top: 1780px;
  z-index: 44;
}
#Image17 { 
  position: absolute;
  top: 52px;
  left: 380px;
  width: 300px;
  height: 250px;

  z-index: 153;

}
@media only screen and (max-width: 1280px) {
  #Image17  {                       
    position: absolute;
    top: 42px;
    left: 90px;
 
  
   }
    } 
@media only screen and (max-width: 1024px) {
  #Image17  {                       
    position: absolute;
    top: 46px;
    left: 50px;
 
  
   }
    } 
    @media only screen and (max-width: 940px) {
      #Image17  {                       
        position: absolute;
        top: 82px;
        left: 60px;
     
        width: 240px !important;
        height: 200px !important;
      
       }
        } 



     

    @media only screen and (max-width: 768px) {
      #Image17  {                       
        position: absolute;
        top: 92px;
        left: 30px;
        width: 228px !important;
      height: 190px !important;
   
      
       }
        }   
        @media only screen and (max-width: 431px) {
          #Image17  {                       
            position: absolute;
            top: -302px;
            left: 10px;
            width: 192px !important;
          height: 160px !important;
   
          
           }
            }  
#gal1{
   

    width: 300px;
    height: 250px;
   
}

#Image18 { 
  position: absolute;
  top: 46px;
  left: 725px;
  z-index: 153;
  width: 300px;
  height:256px;
}
@media only screen and (max-width: 1280px) {
  #Image18  {                       
    position: absolute;
    top: 42px;
    left: 450px;
 
  
   }
    } 
@media only screen and (max-width: 1024px) {
  #Image18  {                       
    position: absolute;
    top: 29px;
    left: 370px;
 
  
   }
    } 
    @media only screen and (max-width: 940px) {
      #Image18  {                       
        position: absolute;
        top: 82px;
        left: 310px;
     
        width: 234px !important;
        height: 200px !important;
      
       }
        } 

    @media only screen and (max-width: 768px) {
      #Image18  {                       
        position: absolute;
        top: 94px;
        left: 270px;
        width: 222px !important;
      height: 190px !important;
     
      
       }
        }   
        @media only screen and (max-width: 431px) {
          #Image18  {                       
            position: absolute;
            top: -302px;
            left: 200px;
            width: 192px !important;
          height: 160px !important;
   
          
           }
            }          
#gal2{
  width: 300px;
  height:256px;
}

#Image19 { 
  position: absolute;
  top: 46px;
  left: 1070px;
  width: 300px;
  height:256px;
  z-index: 153;
}
@media only screen and (max-width: 1280px) {
  #Image19  {                       
    position: absolute;
    top: 42px;
    left: 800px;
 
 
  
   }
    } 


@media only screen and (max-width: 1024px) {
  #Image19  {                       
    position: absolute;
    top: 38px;
    left: 700px;
 
 
  
   }
    } 
    @media only screen and (max-width: 940px) {
      #Image19  {                       
        position: absolute;
        top: 82px;
        left: 570px;
     
        width: 234px !important;
        height: 200px !important;
      
       }
        } 
    @media only screen and (max-width: 768px) {
      #Image19  {                       
        position: absolute;
        top: 92px;
        left: 510px;
        width: 222px !important;
      height: 190px !important;
      z-index: 153;
      
       }
        }   
        @media only screen and (max-width: 431px) {
          #Image19  {                       
            position: absolute;
            top: 85px;
            left: 5px;
            width: 192px !important;
            height: 160px !important;
          
           }
            }       
#gal3{

  width: 300px;
  height:256px;
 
}
#Image20 { 
  position: absolute;
  top: 415px;
  left: 380px;
  z-index: 153;
  width: 300px;
  height:256px;
}

@media only screen and (max-width: 1280px) {
  #Image20  {                       
    position: absolute;
    top: 405px;

    left: 150px;
 
  
   }
    }

@media only screen and (max-width: 1024px) {
  #Image20  {                       
    position: absolute;
    top: 405px;

    left: 70px;
 
  
   }
    } 
    @media only screen and (max-width: 940px) {
      #Image20  {                       
        position: absolute;
        top: 455px;
        left: 40px;

        width: 234px !important;
        height: 200px !important;
      
       }
        } 
    @media only screen and (max-width: 768px) {
      #Image20  {                       
        position: absolute;
        top: 445px;
        left: 20px;
        width: 222px !important;
      height: 190px !important;
  
      
       }
        }   
        @media only screen and (max-width: 431px) {
          #Image20  {                       
            position: absolute;
            top: 85px;
            left: 200px;
            width: 192px !important;
            height: 160px !important;
          
           }
            }         
#gal4{
  width: 300px;
  height:256px;
}

#Image21 { 
  position: absolute;
  top: 415px;
  left: 980px;
  z-index: 153;
  width: 167px;
  height:256px;
}
@media only screen and (max-width: 1280px) {
  #Image21  {                       
    position: absolute;
    top: 395px;

    left: 620px;
 
  
   }
    }
@media only screen and (max-width: 1024px) {
  #Image21  {                       
    position: absolute;
    top: 395px;

    left: 490px;
 
  
   }
    } 
    @media only screen and (max-width: 940px) {
      #Image21  {                       
        position: absolute;
        top: 405px;
        left: 390px;

        width: 180px !important;
        height: 276px !important;
      
       }
        } 
    @media only screen and (max-width: 768px) {
      #Image21  {                       
        position: absolute;
        top: 445px;
        left: 390px;
        width: 150px !important;
      height: 230px !important;
  
      
       }
        } 
        @media only screen and (max-width: 431px) {
          #Image21  {                       
            position: absolute;
            top: 445px;
            left: 20px;
            width: 130px !important;
          height: 200px !important;
      
          
           }
            }      
#gal5{

  width: 167px;
  height:256px;
}


#Image22 { 
  position: absolute;
  top: 415px;
  left: 1180px;
  z-index: 153;
  width: 167px;
  height:256px;
}
@media only screen and (max-width: 1280px) {
  #Image22  {                       
    position: absolute;
    top: 395px;

    left: 870px;
 
  
   }
    } 
@media only screen and (max-width: 1024px) {
  #Image22  {                       
    position: absolute;
    top: 395px;

    left: 760px;
 
  
   }
    } 
    @media only screen and (max-width: 940px) {
      #Image22  {                       
        position: absolute;
        top: 405px;
        left: 620px;

        width: 180px !important;
        height: 276px !important;
      
       }
        } 
    @media only screen and (max-width: 768px) {
      #Image22  {                       
        position: absolute;
        top: 445px;
        left: 580px;
        width: 150px !important;
      height: 230px !important;
    
      
       }
        } 
        @media only screen and (max-width: 431px) {
          #Image22  {                       
            position: absolute;
            top: 445px;
            left: 230px;
            width: 130px !important;
          height: 200px !important;
        
          
           }
            } 
#gal6{
 
  width: 167px;
  height:256px;
  
}
#galerie-bereich{
  position: absolute;
  top: 1900px;
  left: 0px;
  
  
}
#galerie-treff{
  position: absolute;
  top: 1900px;
  left: 0px; 
}
@media only screen and (max-width: 431px) {
  #galerie-treff{
    position: absolute;
    top: 1480px;
    left: 0px;

  
   }
    } 


#selbstdarstellung{
  display: flex;
  position: absolute;
  width: 1000px;
  height: 400px;
  top: 790px;
  left: 0px;
justify-content: center;
}

#movie2{
  position: absolute;
  left: 0px;
  top: 460px;

 
 
  
}


  
    
    #movie2 iframe{
      position: absolute;
      top: 10px;
      left: 310px;
      width: 960px;
      height: 240px;
  
          z-index: 154;
    }
    @media only screen and (max-width: 1280px) {
      #movie2 iframe{
        position: absolute;
        top: 10px;
        left: 160px;
      
    
         
         
            
          }
          
            }  
 
            @media only screen and (max-width: 1024px) {
              #movie2 iframe{
                position: absolute;
                top: 30px;
                left: 20px;
              
            

                 
                    
                  }
                  
                    }  
         
                    @media only screen and (max-width: 940px) {
                      #movie2 iframe{
                        position: absolute;
                        top: 30px;
                        left: 80px;
                      
                    
                        width: 700px !important;
                        height: 175px !important;
                         
                            
                          }
                          
                            }  
        @media only screen and (max-width: 768px) {
          #movie2 iframe{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 600px !important;
            height: 150px !important;
        
           
             
                
              }
              
                }  
     @media only screen and (max-width: 431px) {
       #movie2 iframe{
        position: absolute;
        top: 390px;
        left: 0px;
        width: 400px !important;
        height: 100px !important;
                
                   
                     
                        
                      }
                      
                        }  
                         
     /*
                @media only screen and (max-width: 500px) {
                  #movie2 iframe{
                    position: absolute;
                    top: 30px;
                    left: 0px;
                    width: 500px !important;
                    height: 125px !important;
                
                        z-index: 154;
                     
                        
                      }
                      
                        }  
                    
            
      
                        @media only screen and (max-width: 412px) {
                          #movie2 iframe{
                            position: absolute;
                            top: 30px;
                            left: 0px;
                            width: 412px !important;
                            height: 103px !important;
                        
                                z-index: 154;
                             
                                
                              }
                              
                                }  
                            
              */      





  #movie3 iframe {                       
    position: absolute;
    top: 70px;
    left: 350px;
    
  width: 367px; 
  height: 250px;
    z-index: 154;
   
  
   }
   @media only screen and (max-width: 1280px) {
    #movie3 iframe{
      position: absolute;
      top: 90px;
      left: 240px;
  
          
        }
        
          }
   
@media only screen and (max-width: 1024px) {
  #movie3 iframe{
    position: absolute;
    top: 90px;
    left: 120px;
 
    
  }
  
    }

    @media only screen and (max-width: 940px) {
      #movie3 iframe{
        position: absolute;
        top: 90px;
        left: 70px;
        width: 323px !important;
        height: 220px !important;
        
      }
      
        }
       
    @media only screen and (max-width: 768px) {
      #movie3 iframe{
        position: absolute;
        top: 90px;
        left: 50px;
        width: 294px !important;
        height: 200px !important;
        
      }
      
        }
        @media only screen and (max-width: 431px) {
          #movie3 iframe{
            position: absolute;
            top: 90px;
            left: 40px;

            
          }
          
            }    

#movie4 iframe {                       
  position: absolute;
  top: 70px;
  left: 860px;
  width: 367px; 
  height: 250px;
  z-index: 154;

 }

 
@media only screen and (max-width: 1280px) {
  #movie4 iframe {                       
    position: absolute;
    top: 85px;
    left: 730px;
   
  
   }
    }
    @media only screen and (max-width: 1024px) {
      #movie4 iframe {                       
        position: absolute;
        top: 90px;
        left: 560px;
       
      
       }
        }
        @media only screen and (max-width: 940px) {
          #movie4 iframe{
            position: absolute;
            top: 90px;
            left: 450px;
            width: 323px !important;
            height: 220px !important;
            
          }
          
            }
        @media only screen and (max-width: 768px) {
          #movie4 iframe{
            position: absolute;
            top: 90px;
            left: 400px;
            width: 294px !important;
            height: 200px !important;
                z-index: 154;
             
                
              }
              
                }  
                @media only screen and (max-width: 431px) {
                  #movie4 iframe{
                    position: absolute;
                    top: 490px;
                    left: 40px;
                    width: 294px !important;
                    height: 200px !important;
                        z-index: 154;
                     
                        
                      }
                      
                        }          
               
iframe {
  border: 10px solid rgb(0, 0, 0);
}
#videos{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 2930px;
  left: 0px;
  z-index: 154;
}

@media only screen and (max-width: 1280px) {
  #videos {                       
    position: absolute;
    top: 2930px;
    left: 0px;

   
  
   }
    }

  .bubble31 {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 90px;
	
	width: 90px;

  text-align: center;
 
}
.bubble32 {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 110px;
	
	width: 110px;

  text-align: center;
  justify-content: center;
    align-items: center;
  
}
.bubble33 {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

    height: 110px;
	
	width: 110px;
    text-align: center;

}
.bubble34 {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 90px;

	width: 90px;
 
  text-align: center;
 
}





/*
untere Navigation 



input[type="checkbox"] {
	display:none;
}
input[type="checkbox"]:checked ~ .boot200,
input[type="checkbox"]:checked ~ .boot200-background {
	display: block;
}
.boot200-background {
	width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.19);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 9998;
}

.boot200 {
    position: fixed;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;	
    font-family: 'Poppins', sans-serif;
	  font-weight: bold;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;

  width: 34.938em;
  height: 50em;
  background: #faf8f800;
  background-image: url(../img/dampf559-800rew.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
 
  box-shadow: none !important;
  border: none !important;

align-items: center;
  justify-content: center;
 

 
    z-index: 9999;



}
@media only screen and (max-width: 1280px) {
  .boot200 {                       
    top: 600px;
    left: -200px;
   
  
   }
    }
    @media only screen and (max-width: 1024px) {
      .boot200 {                       
        top: 600px;
        left: -400px;
       
      
       }
        }  
        @media only screen and (max-width: 940px) {
          .boot200 {                       
            top: -100px;
            left: -600px;
           
          
           }
            }  
            @media only screen and (max-width: 431px) {
              .boot200 {                       
                top: 900px;
                left: -600px;
               
              
               }
                }  
.boot200-inhalt{
  text-align: center;
  padding-top: 170px;
 line-height: 2em;
  font-size: 1.3em;



}

.boot200-inhalt a {

  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.boot200-inhalt a:hover { 
  font-size: 1.7em;
}


.boot200 ul li {
text-decoration: none !important;
color: #080000 !important;
list-style-type: none;
}
.boot200 li a{
text-decoration: none !important;
color: #080000 !important;

}
.boot200 li a:hover{
  font-size: 1.5em;

}
*/
input[type="checkbox"] {
	display:none;
}
input[type="checkbox"]:checked ~ .boot300,
input[type="checkbox"]:checked ~ .boot300-background {
	display: block;
}
.boot300-background {
	width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.19);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 9998;
}
.boot300 {
    position: fixed;
    top: -170px;
    left: -290px;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;	
    font-family: 'Poppins', sans-serif;
	font-weight: bold;


  width: 700px;
  height: 800px;
  background: #faf8f800;
  background-image: url(../img/dampf700-800.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #080000;
  box-shadow: none !important;
  border: none !important;
text-align: center;
align-items: center;
  justify-content: center;
 
    z-index: 9999;
}

   
  
@media only screen and (max-width: 1280px) {
  .boot300 {                       
    top: 400px;
    left: -800px;
   
  
   }
    }
    @media only screen and (max-width: 940px) {
      .boot300 {                       
        top: 200px;
        left: 0px;
       
      
       }
        }
    @media only screen and (max-width: 768px) {
      .boot300 {                       
        top: 580px;
        left: 00px;
       
      
       }
        }
    
        @media only screen and (max-width: 431px) {
          .boot300 {                       
            top: 960px;
            left: -580px;
           
          
           }
            }
.boot300-inhalt{
  
  padding: 80px;

}
input[type="checkbox"] {
	display:none;
}
input[type="checkbox"]:checked ~ .boot250,
input[type="checkbox"]:checked ~ .boot250-background {
display: block;
}
.boot250-background {
	width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.19);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 9998;
}
.boot250 {
  position: fixed;
  top: 80px;
  left: -1000px;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;	
  font-family: 'Poppins', sans-serif;
	font-weight: bold;
  width: 253px;
  height: 500px;
  background: #faf8f800;
  background-image: url(../img/dampfwolke253-500.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #080000;
  box-shadow: none !important;
  border: none !important;
  text-align: center;
  align-items: center;
  justify-content: center;

  z-index: 9999;
}
@media only screen and (max-width: 1280px) {
  .boot250 {                       
    top: 700px;
    left: -1240px;
   
  
   }
    }
    @media only screen and (max-width: 940px) {
      .boot250 {                       
        top: 0px;
        left: -190px;
       
      
       }
        }
    @media only screen and (max-width: 768px) {
      .boot250 {                       
        top: 40px;
        left: 0px;
       
      
       }
        }
    
        @media only screen and (max-width: 431px) {
          .boot250 {                       
            top: 1200px;
            left: -530px;
           
          
           }
            }
        
.boot250-inhalt{
  position: relative;
 
  padding: 100px;

  

}
.boot250-inhalt img {
  width: 100%; 
  height: 100%;
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.boot250-inhalt img:hover { 
  width: 155%;
  height: 155%;
}

.boot250 ul li {
text-decoration: none !important;
color: #080000 !important;
list-style-type: none;
padding-top: 20px;
}
.boot250 li a{
text-decoration: none !important;
color: #080000 !important;

}

/* Kontaktformular */

button {
  overflow: hidden;
}

button, select {
  text-transform: none;
}

button, input, select, textarea {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  font: inherit;
  margin: 0;
}

input {
  line-height: normal;
}

textarea {
overflow: auto;
}

#container {
 padding-left: 70px;
 padding-right: 50px;
  max-width: 48em;
  margin: 60px auto;
  position: relative;
}

form {
  padding: 37.5px;
  margin: 50px 0;
}

h1 {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color:   yellow;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  text-transform: uppercase;
}

.underline {
  border-bottom: solid 2px rgba(255, 255, 0, 0.626);
  margin: -0.512em auto;
  width: 80px;
}



.email {

	width: 100%;
}

input[type='text'], [type='email'], select, textarea {
	background: none;
  border: none;
	border-bottom: solid 2px rgba(255, 255, 0, 0.626);
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
	font-size: 1.000em;
  font-weight: 400;
  letter-spacing: 1px;
	margin: 0em 0 1.875em 0;
	padding: 0 0 0.875em 0;
  text-transform: uppercase;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
input[type='text']:hover, [type='email']:hover, textarea:hover {
	outline: none;
  font-size: 1.2em;
}
input[type='text']:focus, [type='email']:focus, textarea:focus {
	outline: none;
	padding: 0 0 0.875em 0;
  font-size: 1.5em;
}

.message {
	float: none;
}

.name {
	float: left;
	width: 100%

}

select {
  background: url('../img/arrow48down.png') no-repeat right;
  outline: none;

}

select::-ms-expand {
  display: none;
}

.subject {
  width: 100%;


}
.subject:hover {
 
  font-size: 1.2em;
}
#subject_input:hover {
  
color: #e5ef4d;
 

}
.telephone {
  width: 100%;
}

textarea {
	line-height: 150%;
	height: 150px;
	resize: none;
  width: 100%;
  
}

::-webkit-input-placeholder {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
}

:-moz-placeholder { 
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
	opacity: 1;
}

::-moz-placeholder {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
	opacity: 1;
}

:-ms-input-placeholder {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
}

#form_button {
  background: none;
  border: solid 2px yellow;
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
 
  display: inline-block;
  font-size: 0.875em;
  font-weight: bold;
  outline: none;
  padding: 20px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#form_button:hover {
  background: #3ddc0889;
  color: #b00808;
  text-shadow: -1px 0 yellow, 0 1px yellow, 1px 0 yellow, 0 -1px yellow;
  border: solid 4px yellow;
  font-size: 1.1em;
}

@media screen and (max-width: 768px) {
  #container {
    margin: 20px auto;
    width: 95%;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 26px;
  }
  
  .underline {
    width: 1.625em;
  }
  
  #form_button {
    padding: 15px 25px;
  }
}

@media screen and (max-width: 420px) {
  h1 {
    font-size: 1.125em;
  }
  
 
  
  .underline {
    width: 3.313em;
  }
  
  input[type='text'], [type='email'], select, textarea {
    font-size: 0.875em;
  }
}


/*
linke Navigation
*/

.dropbtn {

  -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
    height: 120px;	
	  width: 120px;
    background-color: #e9c047;
    align-items: center;
    justify-content: center;
   
    overflow: hidden;
    border: none;
    display: flex;
   text-decoration: none !important;
  	flex-direction: column;
    max-height: 80vw;
    max-width: 80vw;  
    list-style: none;
    transition: width 150ms ease-in-out;
    transition: height 150ms ease-in-out;

}
@media screen and (max-width: 460px) {
  .dropbtn {
    height: 100px;	
	  width: 100px;

  }}
.dropbtn:hover, .dropbtn:focus {
  background-color: #e5ef4d;
  height: 130px;	
  width: 130px;
  text-decoration: none !important;
}
@media screen and (max-width: 460px) {
  .dropbtn:hover, .dropbtn:focus {
    height: 110px;	
	  width: 110px;

  }}
.dropdown {
  position: fixed;
  top: 20px;
  left: 20px;
  display: inline-block;
  list-style: none;
  z-index: 200;
  text-decoration: none !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100px;
  text-decoration: none !important;
  overflow: auto;
  z-index: 1; 
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: none;
  flex-direction: column;
 

}


@media all and (orientation:landscape) and (max-width: 1000px) {
  .dropdown {
    position: fixed;
    top: 20px;
    left: 20px;
    display: inline-block;
    list-style: none;
    z-index: 200;
    text-decoration: none !important;
  

  }}

@media all and (orientation:landscape) and (max-width: 1000px) {
  .dropdown-content {
    display: none;
    position: absolute;
    min-width: 660px;
    margin-top: -290px;
    text-decoration: none !important;
  position: sticky;

    z-index: 1; 
    transform: rotate(270deg);

   
    border: none;

  
  }}

.dropdown-content a {
  -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	 border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

  height: 80px;
	width: 80px;
  background-color: #e9c14795;   
  color: rgb(18, 4, 89);
  font-size: 1rem;
  font-family: 'Poppins' sans-serif;
  font-weight: bold;
  text-decoration: none !important;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: none;


}
@media all and (orientation:landscape) and (max-width: 1000px){ 
.dropdown-content a {
  -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	 border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
  text-decoration: none !important;
  height: 60px;
	width: 60px;
  background-color: #e9c14795;   
  color: rgb(18, 4, 89);
  font-size: 1rem;
  font-family: 'Poppins' sans-serif;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: none;
	flex-direction: row;
  transform: rotate(-270deg);

}}
@media only screen and (max-height: 500px) {
  .dropdown-content a {
    height: 40px;
    width: 80px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
     border-radius: 50%;
     flex-direction: row !important;
     text-decoration: none !important;
  }}
  @media only screen and (max-height: 1024px) {
    .dropdown-content a {
      height: 70px;
      width: 70px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
       border-radius: 50%;
       text-decoration: none !important;
    }}
.dropdown a:hover {
  background-color: #e9c147f5;
  height: 90px;
	width: 90px;
  font-size: 1.2rem;
  text-decoration: none !important;
}
.dropdown li{
  text-decoration: none !important;

}
.show {
  text-decoration: none !important;
  display: block;}


   


nav {
  z-index: 300;
  position: fixed;
  text-decoration: none !important;
}




/* Elster-Modal */

input[type="checkbox"] {
	display:none;
}
input[type="checkbox"]:checked ~ .modal,
input[type="checkbox"]:checked ~ .modal-background {
	display: block;
}
.modal-background {
	width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.19);
    position: fixed;
    display: none;
    z-index: 9998;
}
.modal {
    position: fixed; 

    display: none;	
    font-family: 'Poppins', sans-serif;
	font-weight: bold;
  font-size: 1.05em;
  width: 800px;
  height: 395px;
  background: #faf8f800;
  background-image: url(../img/wolke800.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-shadow: -1px 0 yellow, 0 1px yellow, 1px 0 yellow, 0 -1px yellow;
  color: black;
  letter-spacing: 1.3px;
  box-shadow: none !important;
  border: none !important;
  text-align: center;
  align-items: center;
  justify-content: center;

 
    z-index: 9999;
}
@media only screen and (max-width: 940px) {
  .modal {
    width: 630px;
    height: 500px;
 max-width: 915px; 
  }
}
@media only screen and (max-width: 768px) {
  .modal {
    width: 630px;
    height: 500px;
 
  }
}
@media only screen and (max-width: 431px) {
  .modal {
    width: 430px;
    height: 500px;
   
  }
}
.modal-inhalt{
  
  padding: 100px;
  border: none;

}
.modal-inhalt h1 {
text-shadow: -2.5px 0 yellow, 0 2.5px yellow, 2.5px 0 yellow, 0 -2.5px yellow;
  color: black;
  font-size: 2.2em;
  position: relative;



}
@media only screen and (max-width: 431px) {
  .modal-inhalt h1 {
    font-size: 1.8em;
  }
}
@media only screen and (max-width: 431px) {
  .modal-inhalt{
  margin-top: 80px;
    padding: 60px;
  
  }
}

input[type="checkbox"]:checked ~ .modal2,
input[type="checkbox"]:checked ~ .modal2-background {
	display: block;
}






.modal2-background {
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.177);
    position: fixed;
    display: none;
    bottom: 0%;
    left:0%;
    z-index: 898;
  

}
.modal2 {
    position: fixed; 

    display: none;	
    font-family: 'Poppins', sans-serif;
	font-weight: bold;

  width: 495px;
  height: 500px;
  background: #faf8f800;
  background-image: url(../img/dampf559-800rew.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;

  margin: auto;
  text-decoration: none !important;


top: 20%;
  left:20%;
    z-index: 889;
}
@media only screen and (max-width: 940px) {
  .modal2 {
    width: 530px;
    height: 400px;
 max-width: 915px; 
  }
}
@media only screen and (max-width: 768px) {
  .modal2 {
    width: 630px;
    height: 500px;
 
  }
}
@media only screen and (max-width: 431px) {
  .modal2 {
    width: 430px;
    height: 500px;
   
  }
}
@media only screen and (max-height: 500px) {
  .modal2 {
    width: 330px;
    height: 400px;
   
  }
}
.modal2-inhalt{
  bottom: 0%;
  padding: 100px;
  position: relative;
  border: none;
  text-align: center;
  margin: auto;
 line-height: 1.6em;
  font-size: 1.2em;
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;

}
.modal2-inhalt h1 {

  font-size: 2.2em;
  position: relative;



}
@media only screen and (max-width: 431px) {
  .modal2-inhalt h1 {
    font-size: 1.8em;
  }
}
@media only screen and (max-width: 431px) {
  .modal2-inhalt{
  margin-top: 80px;
    padding: 60px;
  
  }
}

@media only screen and (max-height: 500px){
  .modal2-inhalt {

   line-height: 1.4em;
    font-size: 1.1em;
  }
}

.modal2-inhalt a {

  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;

  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.modal2-inhalt a:hover { 
  font-size: 1.5em !important;
}





input[type="checkbox"]:checked ~ .modal2,
input[type="checkbox"]:checked ~ .modal2-background {
  display: block;
}

.modal2-background {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.177);
  position: fixed;
  display: none;
  bottom: 0;
  left: 0;
  z-index: 898;
}

.modal2 {
  position: fixed;
  display: none;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  width: 495px;
  height: 500px;
  background: #faf8f800;
  background-image: url('../img/dampf559-800rew.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  margin: auto;
  top: 20%;
  left: 20%;
  z-index: 889;
}

@media only screen and (max-width: 940px) {
  .modal2 {
    width: 530px;
    height: 400px;
    max-width: 915px;
  }
}

@media only screen and (max-width: 768px) {
  .modal2 {
    width: 630px;
    height: 500px;
  }
}

@media only screen and (max-width: 431px) {
  .modal2 {
    width: 430px;
    height: 500px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2 {
    width: 330px;
    height: 400px;
  }
}

.modal2-inhalt {
  bottom: 0;
  padding: 100px;
  position: relative;
  border: none;
  text-align: center;
  margin: auto;
  line-height: 1.6em;
  font-size: 1.2em;
  color: yellow;
}

.modal2-inhalt h1 {
  font-size: 2.2em;
  position: relative;
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt h1 {
    font-size: 1.8em;
  }
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt {
    margin-top: 80px;
    padding: 60px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2-inhalt {
    line-height: 1.4em;
    font-size: 1.1em;
  }
}

.modal2-inhalt a {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  transition: all 0.3s;
}

.modal2-inhalt a:hover { 
  font-size: 1.5em !important;
}


input[type="checkbox"]:checked ~ .modal2,
input[type="checkbox"]:checked ~ .modal2-background {
  display: block;
}

.modal2-background {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.177);
  position: fixed;
  display: none;
  bottom: 0;
  left: 0;
  z-index: 898;
}

.modal2 {
  position: fixed;
  display: none;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  width: 495px;
  height: 500px;
  background: #faf8f800;
  background-image: url('../img/dampf559-800rew.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  margin: auto;
  top: 20%;
  left: 20%;
  z-index: 889;
}

@media only screen and (max-width: 940px) {
  .modal2 {
    width: 530px;
    height: 400px;
    max-width: 915px;
  }
}

@media only screen and (max-width: 768px) {
  .modal2 {
    width: 630px;
    height: 500px;
  }
}

@media only screen and (max-width: 431px) {
  .modal2 {
    width: 430px;
    height: 500px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2 {
    width: 330px;
    height: 400px;
  }
}

.modal2-inhalt {
  bottom: 0;
  padding: 100px;
  position: relative;
  border: none;
  text-align: center;
  margin: auto;
  line-height: 1.6em;
  font-size: 1.2em;
  color: yellow;
}

.modal2-inhalt h1 {
  font-size: 2.2em;
  position: relative;
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt h1 {
    font-size: 1.8em;
  }
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt {
    margin-top: 80px;
    padding: 60px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2-inhalt {
    line-height: 1.4em;
    font-size: 1.1em;
  }
}

.modal2-inhalt a {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  transition: all 0.3s;
}

.modal2-inhalt a:hover {
  font-size: 1.5em;
}


input[type="checkbox"]:checked ~ .modal2,
input[type="checkbox"]:checked ~ .modal2-background {
  display: block;
}

.modal2-background {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.177);
  position: fixed;
  display: none;
  bottom: 0;
  left: 0;
  z-index: 898;
}

.modal2 {
  position: fixed;
  display: none;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  width: 495px;
  height: 500px;
  background: #faf8f800;
  background-image: url('../img/dampf559-800rew.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  margin: auto;
  top: 20%;
  left: 20%;
  z-index: 889;
}

@media only screen and (max-width: 940px) {
  .modal2 {
    width: 530px;
    height: 400px;
    max-width: 915px;
  }
}

@media only screen and (max-width: 768px) {
  .modal2 {
    width: 630px;
    height: 500px;
  }
}

@media only screen and (max-width: 431px) {
  .modal2 {
    width: 430px;
    height: 500px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2 {
    width: 330px;
    height: 400px;
  }
}

.modal2-inhalt {
  bottom: 0;
  padding: 100px;
  position: relative;
  border: none;
  text-align: center;
  margin: auto;
  line-height: 1.6em;
  font-size: 1.2em;
  color: yellow;
}

.modal2-inhalt h1 {
  font-size: 2.2em;
  position: relative;
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt h1 {
    font-size: 1.8em;
  }
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt {
    margin-top: 80px;
    padding: 60px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2-inhalt {
    line-height: 1.4em;
    font-size: 1.1em;
  }
}

.modal2-inhalt a {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  transition: all 0.3s;
}

.modal2-inhalt a:hover {
  font-size: 1.5em;
}
*/
/* Modal Visibility Control */
input[type="checkbox"]:checked ~ .modal2,
input[type="checkbox"]:checked ~ .modal2-background {
  display: block;
}

/* Modal Background */
.modal2-background {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.177);
  position: fixed;
  display: none;
  bottom: 0;
  left: 0;
  z-index: 898;
}

/* Modal Box */
.modal2 {
  margin: auto;
  display: none;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  background: #faf8f810;
  background-image: url('../img/dampf559-800rew.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  border: none !important;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  width: 495px;
  height: 500px;
  top: 20%;
  left: 20%;
  position: fixed;
}

/* Responsive Modal Adjustments */
@media only screen and (max-width: 940px) {
  .modal2 {
    width: 530px;
    height: 400px;
    max-width: 915px;
  }
}

@media only screen and (max-width: 768px) {
  .modal2 {
    width: 630px;
    height: 500px;
  }
}

@media only screen and (max-width: 431px) {
  .modal2 {
    width: 430px;
    height: 500px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2 {
    width: 330px;
    height: 400px;
  }
}

/* Modal Content Styling */
.modal2-inhalt {
  bottom: 0;
  padding: 100px;
  position: relative;
  border: none;
  text-align: center;
  margin: auto;
  line-height: 1.6em;
  font-size: 1.2em;
  color: yellow;
}

/* Modal Header */
.modal2-inhalt h1 {
  font-size: 2.2em;
  position: relative;
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt h1 {
    font-size: 1.8em;
  }
}

@media only screen and (max-width: 431px) {
  .modal2-inhalt {
    margin-top: 80px;
    padding: 60px;
  }
}

@media only screen and (max-height: 500px) {
  .modal2-inhalt {
    line-height: 1.4em;
    font-size: 1.1em;
  }
}

/* Modal Links */
.modal2-inhalt a {
  text-decoration: none;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: yellow;
  transition: all 0.3s;
}

.modal2-inhalt a:hover {
  transform: scale(1.5); /* Scale up on hover */
}

/* Close Button */
.hbp-logo-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.hbp-logo-close:hover,
.hbp-logo-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}