body, html {margin:0;padding:0; font-family: 'Helvetica', sans-serif; color:#333;}


h1 {font-family: 'Helvetica', sans-serif;
font-weight: 200;font-size: 2.5em; color:#555; margin: 0;}

h2 {font-family: 'Helvetica', sans-serif;
font-weight: 200; font-size: 1.5em; color:#555; margin: 0;}

  p{font-weight: 200;}

.nummer {color: white;}
.nummer_top {color: white;}
.header_schrift {white-space: nowrap;
   position: relative;
top: 50%;
padding-left: 5%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);}


a:link { text-decoration: none;font-weight: 200; }
a:visited { text-decoration: none;font-weight: 200;  }
a:active { text-decoration: none;font-weight: 200;  }
a:hover {text-decoration:none; font-weight: 200; }


p {line-height: 1.5em;}


header {width:100%; height:20%; display: block;}

.logo {top:0;}


#text {max-width:50%; padding:5%;}

#cookies {width: 80vw;padding-left: 5vw; padding-right: 15vw; padding-top: 5vh; position: fixed; height: 20vh; z-index: 99999; bottom: 0;background-color: white; border-top: 1px solid palevioletred}




#navigation {
   height:10%;
    width:100%;
  z-index: 1004;
    overflow: hidden;}


#unterpunkt { width:20%; height: 100%; float: left;
    text-align: center;
   background-color:palevioletred; }


.nav_text {
   position: relative;
    color: white;} 



#unterpunkt:hover {color:palevioletred; background-color: white; transition: 0.3s;}


.nav_schrift {   position: relative;
top: 50%;
margin-top: -0.5em;
}


#close {display: none;}


#start { 
    height:70%;
   
background: url(bilder/barth_team.jpg) no-repeat center center ;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
background-position: 50% 20%}





.pink {background-color:palevioletred; color:white;}





#leistungen,#philosophie,#aktuelles, {position:relative;
    width:100%;


 
}

#kontakt {height:85%;
  width:100%;
 
background-color: palevioletred;
    color: white;
 }








footer {width:97.5%;background-color:white; 
   position:relative; 


    padding-right:2.5%;

    z-index:100;
    height: 15%;
}

#geschichten {position:relative;
    overflow: hidden;

    width:100%;
    height:100%;
 background-color:white;}




#geschichten_nav_links {position: absolute;


background-color: white;
width:8%;
    top:0;
    left:0;
    height:100%;
    
    
}

#geschichten_nav_rechts {position: absolute;

width:8%;

    background-color: white;
    right:0;
    height:100%;
    top:0;
}

.arrows {position: absolute; width:25px;
    height:auto; top:50%;left:50%;
margin-top:-22px;margin-left:-15px;}

.arrows_right {position: absolute; width:25px;
    height:auto; top:50%;left:50%;
margin-top:-22px;margin-left:-10px;
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);}


#geschichte_01 {position:absolute;



    width:100%;
    height:100%;
     z-index: 102;
    color: white;
   
   
background: url(bilder/geschichte_02.jpg) no-repeat center center ;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    width:100%;
    height:100%;
    z-index: 103;
    
  
   
   
}


#geschichte_02 {position:absolute;
display:none;
background: url(bilder/geschichte_01.jpg) no-repeat center center ;
 background-size: 80%;
    width:100%;
    height:100%;
    z-index: 103;
    background-color: white;
    
   
}


#geschichte_03 {position:absolute;
background: url(bilder/geschichte_06.jpg) no-repeat center center ;
       background-color: white;
      background-size: 80%;
    display:none;

    width:100%;
    height:100%;
    z-index: 104;
    
}



#geschichte_04 {position:absolute;
background: url(bilder/geschichte_04.jpg) no-repeat center center ;
       background-color: white;
     background-size: 100%;
    background-position: 50% 0%;
display: none;
    width:100%;
    height:100%;
    z-index: 104;
    
}




#geschichte_05 {position:absolute;
background: url(bilder/geschichte_05.jpg) no-repeat center center ;
       background-color: white;
     -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    display:none;

    width:100%;
    height:100%;
    z-index: 104;
    
}



#geschichte_06 {position:absolute;
background: url(bilder/geschichte_03.jpg) no-repeat center center ;
    background-size:70%;
    background-color: white;
    display:none;

    width:100%;
    height:100%;
    z-index: 104;
    
}

#geschichte_0fabi {position:absolute;
    background: url(bilder/geschichte_07.jpg) no-repeat center center ;
        background-size:70%;
        background-color: white;
        display:none;
    
        width:100%;
        height:100%;
        z-index: 104;
        
    }
    

#geschichte_02:target,#geschichte_03:target,#geschichte_04:target,#geschichte_05:target,#geschichte_06:target,#geschichte_0fabi:target
{transition: 0.5s;display:block;}




.geschichte_text{background-color:white; color:#555;
bottom:-17px;position: absolute;
padding: 2.5%;
    padding-left: 5%;
    padding-right: 45%;
width:55%;
   z-index: 1000;}

 .geschichte_headline {width:100%; position: absolute; background-color: white; left:0%;padding-left:5%; top:0;      z-index: 1000;}

 .leistungen {
list-style-type:square; margin:0; padding-right:0;
    line-height: 30px;
font-size: 1.5em;
     font-weight: 200;
color:#555; }




@media (max-width:838px) {
    
    #geschichte_04 {
     -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;    
}
#geschichte_0fabi{
background-position: right;
}
    
    #geschichte_06,#geschichte_0fabi{position:absolute;
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
}


@media (max-width:650px) {
      
    .nummer_top {color:white; font-size:1em;}
    
    .nummer {color:white;
    font-size: 2em;}
    
    
    #geschichte_02,#geschichte_0fabi {
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

        #geschichte_01 {

       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;   
}

    
    #text {max-width:70%; padding:5%;}
    
    
   
    
    
    
    #geschichten_nav_links, #geschichten_nav_rechts {
        opacity: 1.0;padding:10px;
    height:10%;width:35px;top:45%;}  
    
}


@media (max-width:515px) {
    
    #geschichte_03,#geschichte_0fabi {  
       
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}
    
    
      .nav_schrift {   
      position: relative;
top:50%;
}
    
    header {background-color: palevioletred; height:100px;}
    
    .header_schrift  { font-size: 1em;  padding-left:5%; width:100px; white-space:normal; color: white;}
    
    p{font-size: 0.9em;
    line-height: 1.35em;}
   
    
    #text{max-width:60%; padding-left:5%; padding-top: 2.5%; }
    
   #navigation {
       display: block;
       position: fixed;
   height:100px;
   width:100px;
       right: 0%;
       top:0;
   background-color: palevioletred;
       overflow: hidden;   
} 
    
        
    .mobile_navi {position: fixed;
        z-index: 1005;
height:100px;
   width:100px;
       right: 0%;
        top:0; 
        display: none;
  }
   
    
    #unterpunkt {
    clear: both; 
        height:50px;
 width: 100%;
    }
    
    #close {width:100%;height:100%;
    display: block;
    position: fixed;

    z-index: 1004;
    top:0;}
    
    #close:target {display:none;}
    
    
    .nav_text {display: block;}
    
    #navigation:not(:target) > .nav_text {display: none;}
        
    
      #navigation:not(:target) > .close {display: none;}
    

    #navigation:not(:target) > .mobile_navi {background-image: url(bilder/navi.png);
   background-size: 60%;
        display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;}
    
  
    
    #navigation:target {height:250px; width: 50%; transition: 0.5s; }
      
}