a {
    color:#009fe3;
        text-decoration: none;
}

a:hover {
    color:#009fe3;
    text-decoration: underline;
}




.row-divide{

    padding-bottom:15px;
}


 .col-divide{

}



 @media (min-width: 760px) {   .col-divide{

    border-right:15px solid white
}





}

.green{

    background-color:#68b436;



}


.grey{

    background-color:#808080;
    padding: 0px;

}



.impressum{

      background-color:#808080;


}

.logo{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    margin-bottom: 10px;
}


.adresse{
  color: #575755;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 15px solid #575755;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.head{
    color:#009fe3;
    font-weight: bold
}

.was{

    padding:30px;
    color: white;
    font-size: 20px;

    overflow: hidden;



}





.was-link{
  position:absolute; left: 15px;
    white-space: nowrap;

     color: white;
    text-decoration: none;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}


.was:hover .was-link{

     left: -1000px;


}



.was-link a{

     color: white;
    text-decoration: none;

}




    .flexbox{
    position:relative;


    padding: 0px;
         display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
    flex-wrap: wrap ;

    }



@media (min-width: 760px){
    .flexbox{
  position:relative;
  background:#808080;

    padding: 0px;
         display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
    flex-wrap: wrap ;


    }}







.wir{

    padding: 0px;
    outline:15px solid white;

    position: relative;
    overflow: hidden;

}



.close-over{
    text-align: center;
    padding-top:10px;
    font-size: 30px;
    font-weight: 900;
    color:#808080;
    position:absolute;
    z-index: 999;
    background-color: white;
    width: 50px;
    height: 50px;
    right: 15px;
    top:0px;
    margin-top: -10px;
    border-radius: 10px;
    opacity: 0;
       -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;

}


.close-over a{
    color:#808080;
    text-decoration: none;
}

.close-over:focus{
    color:#808080;
}




 .over-label

{position: absolute;
    color: white;
text-align: center;
    width: 100%;
    bottom:30px;
    z-index: 999;

}

 .over-label a

{
    text-decoration: none;
    color: white;

}

.over-label-button{
    z-index: 999;
         background-color: rgba(0,0,0,0.4);
    color:white;
    padding:10px;
    border-radius: 10px;
opacity: 100;
         -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}



.over{
   position: absolute;
     padding: 30px;
    color: white;
    top:500px;




    width: 100%;
    height: 100%;
    bottom:0%;
    opacity: 0;
    background-color: rgba(0,0,0,0.6);
      -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;

z-index: 0;

}



@media (min-width: 760px){.wir .over{
   position: absolute;
   top:0px;
    color: white;
     display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
   display: flex;
  align-items: center;
    justify-content: center;



    width: 100%;
    height: 100%;
    bottom:0%;
    opacity: 0;
    background-color: rgba(0,0,0,0.6);
      -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    z-index: 0;


    }}


.wir:hover .over{
    opacity: 100;
    top:0px;
   z-index: 0;
}



.wir:hover .over-label-button{
    opacity: 0;

}

 .wir:hover .over-label

{position: absolute;


}

.wir:hover .close-over{
    opacity: 100;

}



.close-over:hover ~  .over{
    opacity: 0;
    top:500px;
}

.close-over:hover{
    opacity: 0;
    margin-top: -50px;

}

.close-over:hover ~ .over-label .over-label-button{
    opacity: 100;

}



.flex{
  color:white;
  padding:20px;

    overflow: hidden;



}



.wie{

    align-self: flex-end;
    text-align: right;
    color: white;
    font-size: 20px;
    padding:20px;
    padding-right: 50px;
       display:block;

    position: relative;


}

.wie-genau{

    color: white;
    font-size: 14px;
    padding: 30px;
  background:#808080;
margin-top: 15px;
    margin-bottom: 15px;

}

@media (min-width: 760px){.wie-genau{

    padding: 0px;


}
}


#toggle {
  position:absolute;
  appearance:none;

  left:-100%;
  top:-100%;
}

#toggle + label {



    padding-left: 20px;
    text-align: right;
    font-size: 20px;
    padding-right: 20px;

-webkit-font-smoothing: antialiased;
cursor: pointer;

  transition:all 500ms ease;
}


#toggle + label:after {
  content:"wie man uns erreicht"
}




#toggle:checked ~ .wie-genau {
  height:200px;
}

#toggle:checked ~ .wie-link {

}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"wie man uns erreicht"
}


.wie-genau a{

    color: white;




}


.flex .wie-genau{
    text-align: right;
    color: white;
    font-size: 14px;
    position: absolute;
    right: 40px;
    padding-left: 40px;
      bottom:80%;
    opacity: 0;
    z-index: 999;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;


}


.flex:hover .wie-genau{
     opacity: 100;
      bottom:20px;


}


.grey a{
    color: white;
    text-decoration: none;



}


.flex .wie-link{

  position: absolute;
    bottom: 20px;
    right:20px;
    padding-left: 20px;
    text-align: right;
    font-size: 20px;
    padding-right: 20px;
    opacity: 100;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}


.flex:hover .wie-link{
      opacity: 0;


}


    .was-grob{
  position: relative;
     left: 0px;
    padding-right:200px;
    padding-bottom: 40px;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
     opacity: 100;
}



.was-genau{
    position: relative;
  left: 0px;
    color: white;
    font-size: 14px;
        -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
 opacity: 100;

}



@media (min-width: 760px){

.was-grob{
  position: relative;
     left: 1200px;
    padding-right:200px;
    padding-bottom: 40px;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
     opacity: 0;
}



.was-genau{
    position: relative;
  left: 1500px;
    color: white;
    font-size: 14px;
        -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
 opacity: 0;

    }}


.was-genau-fake{
    position: relative;
  left: 1500px;
    color: white;
    font-size: 14px;

    opacity: 0;

}

.was:hover .was-grob{

     left: 0px;
 opacity: 100;

    }

.was:hover .was-genau{

    left: 0px;
 opacity: 100;

    }





.wer{

    padding-bottom: 35px;
    padding-right: 10px;
    text-align: right;
    color: white;
    font-size: 20px;
    opacity: 100;
      -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;

}


.wer a{

   color: white;
    text-decoration: none;

}



target{
       background: black;
}

.trigger1:hover  ~ .target .flexbox .wir .over{
        opacity: 100;
 bottom:0px;

}

.trigger1:hover .wer{
        opacity: 0;


}

.test{
       background: green;

}


.test:hover{
       background: black;

}

.test2{
       background: green;

}

.test2:hover ~ .test {
       background: black;

}

.pfeil:after{
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
    top:10px;
    margin-left: 5px;
  border: 0 solid transparent;
  border-right: .3rem solid white; /* Im unteren Beispiel .0625rem */
  border-bottom: .3rem solid white; /* Im unteren Beispiel .0625rem */
  transform: rotate(-45deg);

}



.pfeil-text{
 position: relative;
    top:-8px;

}

.pfeil-text:after{
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
    top:10px;
    margin-left: 10px;
  border: 0 solid transparent;
  border-right: .3rem solid #808080; /* Im unteren Beispiel .0625rem */
  border-bottom: .3rem solid #808080; /* Im unteren Beispiel .0625rem */
  transform: rotate(45deg);

}

.pfeil-oben:after{
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
    margin-top:15px;
    margin-left: -20px;
  border: 0 solid transparent;
  border-right: .3rem solid white; /* Im unteren Beispiel .0625rem */
  border-bottom: .3rem solid white; /* Im unteren Beispiel .0625rem */
  transform: rotate(-135deg);

}


.pfeil-oben2{
     position: absolute;
    top:8px;
    left:70px;
}

.pfeil-oben2:after{
  content: "";
  width: 4rem;
  height: 4rem;
  position: absolute;

  border: 0 solid transparent;
  border-right: .6rem solid #eeeeee; /* Im unteren Beispiel .0625rem */
  border-bottom: .6rem solid #eeeeee; /* Im unteren Beispiel .0625rem */
  transform: rotate(-135deg);

}

.pfeil-oben-mobile{
     position: absolute;
    top:0px;
    right: 50px;
}

.pfeil-oben-mobile:after{
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;

  border: 0 solid transparent;
  border-right: .6rem solid #eeeeee; /* Im unteren Beispiel .0625rem */
  border-bottom: .6rem solid #eeeeee; /* Im unteren Beispiel .0625rem */
  transform: rotate(-135deg);

}

.pfeil-oben3{
     position: absolute;
    top:70px;
    left:70px;
}

.pfeil-oben3:after{
  content: "";
  width: 15rem;
  height: 15rem;
  position: absolute;

  border: 0 solid transparent;
  border-right: 4rem solid #eeeeee; /* Im unteren Beispiel .0625rem */
  border-bottom: 4rem solid #eeeeee; /* Im unteren Beispiel .0625rem */
  transform: rotate(-135deg);

}

.pfeil-unten:after{
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
   margin-top: 7px;
  margin-left:-20px;
  border: 0 solid transparent;
  border-right: .3rem solid white; /* Im unteren Beispiel .0625rem */
  border-bottom: .3rem solid white; /* Im unteren Beispiel .0625rem */
  transform: rotate(45deg);

}


.text{
    position: absolute;
    margin-top: 20px;
    font-size: 14px;
    padding:0px;
}



.button{
    text-align: center;
    display:block;

    padding:7px;
    padding-right: 23px;
    background: white;
    color:#808080;

}

.button:hover{

    text-decoration: none;
    color:#808080;

}

.button:focus{

    text-decoration: none;
    color:#808080;

}




#vita{


    background:#eeeeee; padding-top:20px; margin-bottom:20px; margin-top:60px;

}


#impressum{


    padding-top:20px; margin-bottom:40px

}


.hoch{
    top: 10px;

    text-decoration: none;


}


.hoch a{

    text-decoration: none;


}


.ref{
    margin-top:15px;
     margin-left:-15px;


     background: #eeeeee;

}


.reftxt {

    text-align: right;
   padding:30px;
    padding-right:30px;
     padding-left:50px;


}

@media (min-width: 1200px) {
    .reftxt {
    text-align: right;
   padding:30px;
    padding-right:0px;
     padding-left:50px;


}}



.refimg {

 padding:20px;
     padding-top:0px;

    }


@media (min-width: 760px) {.refimg {

 padding:40px;


    }}

.fill{

    padding:40px;


}

.fill a{

   color: white;


}

.haftung{
    z-index: 0;
}

.datenschutz{
     z-index: 500;
}

.datenschutz .erklaerung{
    position: absolute;
    width:100%;
    background-color: white;
    display: none;
   bottom:0px;
    left:0px;
    z-index: 500;
    padding: 30px;
    border:2px solid #808080;
    border-radius: 10px;
}

@media (min-width: 760px) {.datenschutz .erklaerung{
    position: absolute;
    width:500px;
    background-color: white;
    display: none;
   bottom:0px;
   left:-200px;
    z-index: 500;
    padding: 30px;
    border:2px solid #808080;
    border-radius: 10px;
    }}

.datenschutz:hover .erklaerung{

    display:inline-block;
      z-index: 500;
}