@import url(normalize.css);

/*Allgemeine Formatierungen*/

*{
    box-sizing:border-box; 
    font-family: 'Lato', sans-serif;
    }
    
    ul,ol{
        list-style-type:none;
        padding:0;
        margin:0;
    }
    
    a{
        text-decoration: none;
    }

    h1,h2,h3,h4,h5,h6{
        text-transform: uppercase;
    }


    /*CSS-Raster*/

.row{
    overflow: hidden;   
   }
    
       .drittel{           
        width: 30%; 
        float: left;
        margin-right: 5%;
       }
    
       .zweidrittel{
        width: 65%;
        float: left;
        margin-right: 5%;          
    
       }
       .drittel:last-child,
       .zweidrittel:last-child{
           margin-right: 0;
       }


       #aktiv{
        border-bottom: 3px solid rgb(223,233,183);
     }

    
 /*Headerbox*/
    .headerbox{
    max-width: 1200px;
    padding: 2.5em 1em 5em;
    margin: auto; 
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
    }

    strong.skobel{
        display: block;
        font-size: 3em;
        float: left;
        margin-top: -0.16em;
         }
       
    strong.skobel a{
            color: rgb(0,0,0);
            font-weight: bolder;
             }
       
   /*navigation*/
    nav {
        float: right;
        }
  
    nav ul {
        text-align: right;
        }
  
    nav ul li {
        display: inline-block;
        margin-left: 35px;
        }
    
    nav ul li:first-child {
        margin-left: 0;
         }

    nav ul li a {
        color: rgb(0,0,0);
        text-transform: uppercase;
        
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;   

         }

     nav ul li a:hover {
            color: rgba(0,0,0,0.5);
            text-transform: uppercase;
         }
          
         
 /*innerbox*/

    .innerbox{
    max-width: 1200px;
    margin: auto; 
  
    }

/*First Screen*/

#first-screen {
    height: 660px;
    position: relative;
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
}


#first-screen img{
    padding-left: 0.35em;
    width: 78%;
    float: right;
    overflow: hidden;
    line-height: 0;
}


#first-screen h1{
    text-align: left;
    padding-left: 0.35em;
    font-size: 2.8em;
    float: left;
    z-index: 12;
    margin-top: -3.0em;  
}

/*Biografisches*/


.biografisches{
    height: 400px;
    position: relative;
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
    }
    
    .biografisches .drittel{
        text-align: center;
       }
    
    .biografisches h1{
        text-align: left;
        padding-left: 0.35em;
        padding-top: 0.3em;
        font-size: 2.5em;
    }
    
    .biografisches img{
         width: 63%;
    }
    
    .biografisches p{
        font-size: 1.3em;
        line-height: 1.7em;
        padding-top: 0.7em;
        letter-spacing: 0.03em;
    }
    

/*Biografisches-Mobil*/

.biografisches-mobil{  
display: none;
}

/*Schwerpunkte*/

.schwerpunkte{
    height: 718px;
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
     }


.schwerpunkte .drittel{
    text-align: center;
   }

.schwerpunkte h1{
    padding-top: 0.3em;
    padding-bottom: 0.2em;
    text-align: left;
    padding-left: 0.35em;
    font-size: 2.5em;  
}

.schwerpunkte h2{
    font-size: 2.1em;
    
}

.schwerpunkte .iconbox{
    margin-top: 1.7em;
    margin-bottom: -1.5em;
    border-bottom: 0; 
}

.schwerpunkte img{
width: 62%;
}

.schwerpunkte p{
    padding-left: 3em;
    padding-right: 3em;
    padding-bottom: 1.75em;
    font-size: 1.3em;
    letter-spacing: 0.03em;
    line-height: 1.7em;
}


.schwerpunkte .row{
    background-color: rgb(223,233,183);
}



/*Datenschutz*/

.datenschutz{
    height: 552em;
    position: relative;
    }
    
    .datenschutz .drittel{
        text-align: center;
       }
    
    .datenschutz h1{
        padding-top: 0.3em;
        font-size: 2.5em;
    }
    
    .datenschutz h2{
        padding-top: 0.6em;
        font-size: 1.8em;
    }

    .datenschutz h4{
        padding-top: 0.8em;
        font-size: 1em;   
    }

    .datenschutz p{
        font-size: 0.9em;
        line-height: 1.7em;
    }

    .datenschutz li{
        font-size: 0.9em;
        line-height: 1.7em;
        padding-left: 1em;
    }
    
    .aufzaehlung{
    list-style-type: disc !important; 
    padding-left: 1em;
    }

    .datenschutz img{
         width: 62%;
    }
    
    

/*Impressum*/

.impressum{
    height: 980px;
    position: relative;
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
    }
    
    .impressum .drittel{
        text-align: center;
       }
    
    .impressum h1{
        padding-top: 0.3em;
        font-size: 2.5em;
       
    }
    
    .impressum h2{
        padding-top: 0.6em;
        font-size: 1.8em;
    }

    .impressum h3{
        padding-top: 0.3em;
        font-size: 1.5em;
        text-transform: none;  
    }
    
    .impressum img{
         width: 62%;
    }
      
    .impressum p{
        font-size: 1.3em;
        line-height: 1.7em;
        padding-left: 0.2rem;
        padding-bottom: 1.6em;
        letter-spacing: 0.03em;
    }
    
    
     
    .impressum p:last-child{ 
        border-bottom: 0;
    }
    

    /* Quellenangaben */
    .quelle strong,
     a{
        font-size: 0.8em;
    }

    
    .quelle a{
       color: rgba(0,0,0,0.7);
   }


   .quelle a:hover{
    color: rgba(0,0,0,0.4);
}





/*E-Mail*/

#e-mail{
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
}

#e-mail .innerbox{
    width: 99%;
    padding-bottom: 1.2em;
    padding-left: 0.35em; 
    padding-right: 0.35em; 
    position: relative;
}

#e-mail h1{
    padding-top: 0.3em;
    padding-left: 0.35em;
    font-size: 2.5em;
}

#e-mail img{
    width: 62%;
}


#e-mail p{
    font-size: 1.3em;
    line-height: 1.7em;
    padding-top: 0.7em;
    padding-bottom: 0.8em;
  
}

#e-mail p a{
    
    font-size: inherit;
     color: rgb(0,0,0);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;   
    
}

#e-mail p a:hover{
     color:rgba(0,0,0,0.5);
}





/*Kontakt mobil*/

#contact-mobil{
    border-bottom: 0.3em rgba(0,0,0,0.7) dotted;
}

#contact-mobil .innerbox{
    width: 99%;
    padding-bottom: 1.2em;
    padding-left: 0.35em; 
    padding-right: 0.35em; 
    position: relative;
}

#contact-mobil h1{
    padding-top: 0.3em;
    padding-left: 0.35em;
    font-size: 2.5em;
}

#contact-mobil p{
    font-size: 1.2em;
    padding-bottom: 0.2em;
}

#contact-mobil p a{
    font-size: 1.2em;
     color: rgb(0,0,0);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;     
}

#contact-mobil p a:hover{
     color:rgba(0,0,0,0.5);
}


#contact-mobil{
    display: none;
}









    /*Footer*/


    .footer{
        margin-top: 1.8em;
        background-color: rgb(200,200,200);
        padding: 0.8em 2.5em;
        position: relative;
        max-width: 1200px;
    } 





/* BREAKPOINTS für kleinere Geräte anpassen /////////////////////////////////////// */


/* Breakpoint für Geräte bis 785px ////////////////////////////////////// */

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

/* headerbox */
.headerbox{
    max-width: 700px;
    margin: auto; 
    border-bottom: 0.26em rgba(0,0,0,0.7) dotted;
    }

    strong.skobel{
        font-size: 2.7em;
         }

         
 /* innerbox */
    .innerbox{
    max-width: 700px;
    margin: auto; 
    }

/* First Screen */

#first-screen {
    height: 370px;
    border-bottom: 0.26em rgba(0,0,0,0.7) dotted;
}

#first-screen img{
    width: 75%;
}

#first-screen h1{
    font-size: 2.4em;
  
}


/* biografisches */

.biografisches{
    height: 500px;
    position: relative;
    border-bottom: 0.26em rgba(0,0,0,0.7) dotted;
    }
    
    .biografisches h1{
        padding-top: 0.7em;
        font-size: 1.6em;
    }
    
    .biografisches img{
         width: 58%;
    }

    .biografisches p{
        font-size: 1.25em;
        line-height: 1.5em;
    }


    .schwerpunkte {
        height: 630px;
        border-bottom: 0.26em rgba(0,0,0,0.7) dotted;
         }
    
    .schwerpunkte .drittel{
        text-align: center;
       }
    
    .schwerpunkte h1{
        font-size: 1.6em;
    }
    
    .schwerpunkte h2{
        font-size: 1.4em;
    }
    
    .schwerpunkte p{
        padding-left: 2em;
        padding-right: 2em;
        padding-bottom: 1.3em;
        font-size: 1.25em;
        line-height: 1.5em;
    }


    .footer{
        margin-top: 1.2em;
    } 


    .datenschutz h1{
        font-size: 1.6em;
    }

    .datenschutz h2{
        padding-top: 0.4em;
        font-size: 1.3em;
    }


    .impressum h1{
        font-size: 1.6em;
    }

    .impressum h2{
        padding-top: 0.4em;
        font-size: 1.3em;
    }

    #e-mail{
        border-bottom: 0.26em rgba(0,0,0,0.7) dotted;
    }
    


 
} /* bis 785px */




/* Breakpoint für Geräte bis 600x ////////////////////////////////////// */


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

   
  
    .headerbox{
        max-width: 570px;
        padding: 1.3em 0.8em 4em;
        margin: auto; 
        border-bottom: 0.2em rgba(0,0,0,0.7) dotted;
        }

    nav ul li {
        display: inline-block;
        font-size: 0.8em;
        margin-left: 25px;
        }

    .innerbox{
        max-width: 570px;
        margin: auto; 
        }

     #first-screen {
        height: 300px;
        border-bottom: 0.2em rgba(0,0,0,0.7) dotted;
         }

    #first-screen h1{
        font-size: 1.8em;
        }

         /*Biografisches*/

        .biografisches{
            display: none;
        }
    
     /*Biografisches-mobil*/   

    
.biografisches-mobil{
    display: block;
    height: 198px;
    position: relative;
    border-bottom: 0.2em #000000b3 dotted;
    }
    
    .biografisches-mobil .drittel{
        text-align: center;
       }
    
    .biografisches-mobil h1{
        text-align: left;
        padding-left: 0.35em;
        padding-top: 0.3em;
        font-size: 1.34em;
    }
    
    .biografisches-mobil img{
         width: 63%;
    }
    
    .biografisches-mobil p{
        font-size: 1em;
        line-height: 1.6em;
        padding-top: 0.12em;
        letter-spacing: 0.03em;
    }



    .schwerpunkte {
            height: 353px;
            border-bottom: 0.2em rgba(0,0,0,0.7) dotted;
             }

        
    .schwerpunkte h1{
        font-size: 1.34em;
        }

    .schwerpunkte h2{
            font-size: 1.1em;
        }    


   .schwerpunkte .iconbox{
         margin-top: 1em;
         margin-bottom: -1.2em;
         border-bottom: 0; 
        }
        
        .schwerpunkte img{
        width: 58%;
        }   

    .schwerpunkte p{
        padding-left: 1.5em;
        padding-right: 1.5.em;
        padding-bottom: 1.3em;
        font-size: 0.8em;
        letter-spacing: 0.01em;
        line-height: 1.2em;
        }


    #contact-mobil {
            height: 92px;
        }


    #contact-mobil p{
            font-size: 1em;
            padding-bottom: 0.2em;
          
        }
        
     #contact-mobil p a{
            font-size: 1em;
             color: rgb(0,0,0);
        }


    #e-mail{
        display: none;
        }
    
        
    #contact-mobil{
    display: block;
    border-bottom: 0.2em rgba(0,0,0,0.7) dotted;
    }
    
    #contact-mobil h1{
        font-size: 1.34em;
        }

        .datenschutz img{
            width: 80%;
       }
       


        .datenschutz h1{
            font-size: 1.2em;
        }
    
        .datenschutz h2{
            padding-top: 0.3em;
            font-size: 1.05em;
        }

        .datenschutz p{
           font-size: 0.6em;
           line-height: 1.1em;
        }
   
        .datenschutz ul{
            font-size: 0.6em !important; 
            line-height: 1.1em;
         }
    
        .impressum h1{
            font-size: 1.2em;
        }
    
        .impressum h2{
            padding-top: 0.3em;
            font-size: 1.05em;
        }

        .impressum p{

            font-size: 1.05em;
        }


        .footer{
            background-color: rgb(200,200,200);
            padding: 0.3em 0.8em;
            font-size: 0.8em;    
        } 


} /* bis 600px */


/* Breakpoint für Geräte bis 400px ////////////////////////////////////// */

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

    .headerbox{
        max-width: 354px;
        padding: 0.9em 0.2em 3em;
        margin: auto; 
        border-bottom: 0.16em rgba(0,0,0,0.7) dotted;
        }


     strong.skobel{
         font-size: 2.17em;
         padding-top: 0.05em;
         padding-left: 0.12em;
         }

    nav ul li {
         display: inline-block;
         font-size: 0.54em;
         margin-left: 25px;
         }
        
     /* innerbox */
     .innerbox{
        max-width: 354px;
        margin: auto; 
        }     

     #first-screen{
        height: 260px;
        border-bottom: 0.16em rgba(0,0,0,0.7) dotted;
        }

     #first-screen img{
            padding-top: 0.5em;
            padding-left: 0.35em;
            width: 82%;
            float: right;
            overflow: hidden;
            line-height: 0;
        }
            
    #first-screen h1{
        font-size: 1.54em;
        margin-top: -0.86em;
        }

    .biografisches-mobil{
            display: block;
            height: 199px;
            position: relative;
            border-bottom: 0.16em #000000b3 dotted;
            }    
        
     .biografisches-mobil img{
         width: 72%;
         padding-top: 1.1em;
       }           
        

    .biografisches-mobil h1{
        display: none;
         }

    .biografisches-mobil p{
        font-size: 0.8em;
        line-height: 1.6em;
             }

     .schwerpunkte{
        display: none;
         }

    #contact-mobil{
            display: block;
            height: 100px;
            border-bottom: 0.16em rgba(0,0,0,0.7) dotted;
            }

    #contact-mobil h1{
            font-size: 1.3em;
            padding-top: 0.1em;
            
             }

             #contact-mobil p{
                font-size: 0.8em;
                line-height: 1.6em;
                padding-bottom: 0.2em;
                }
                
             #contact-mobil p a{
                    font-size: 1em;
                     color: rgb(0,0,0);   
                 }
            
            .datenschutz h1{
                    font-size: 1.0em;
                }    

             .datenschutz h2{
                    padding-top: 0.3em;
                    font-size: 0.9em;
                }

            .datenschutz h4{
                    padding-top: 0.8em;
                    font-size: 0.8em;   
                }


                .impressum{
                    height: 980px;
                    position: relative;
                    border-bottom: 0.16em rgba(0,0,0,0.7) dotted;
                    }

            .impressum h1{
                    font-size: 1.0em;
                }

            .impressum h2{
                    padding-top: 0.5em;
                    font-size: 0.8em;
                }

           .impressum h3{
                font-size: 0.9em;
                }

                .impressum p{
                    font-size: 0.9em;
                    line-height: 1.6em;
                }

                .impressum img{
                    width: 80%;
               }


            .footer{
                font-size: 0.6em;
                padding-left: 1em;    
            } 
    


} /* bis 400px */













 /* Datenschutzkonforme Einbindung der Google-Schrift Lato */

/* lato-regular - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/lato-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* lato-italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local(''),
         url('../fonts/lato-v23-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/lato-v23-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* lato-700 - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/lato-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/lato-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* lato-700italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local(''),
         url('../fonts/lato-v23-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/lato-v23-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* lato-900 - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: local(''),
         url('../fonts/lato-v23-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/lato-v23-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* lato-900italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    src: local(''),
         url('../fonts/lato-v23-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/lato-v23-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }