﻿/*Allgemein*/

* {
    margin:0;
    padding:0;
    
}





/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts2/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('fonts2/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts2/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts2/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts2/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts2/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('fonts/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}



#space {
    display: none;
   height:0px;
}

#unterer_teil {
    display:none;
}

#ueberschrift {
    display:block;
    color:black;
    font-family: "Roboto";
     
    font-size: 1.6em;
color: black
}

#schriftzug{
    
     font-family: "Roboto";
     font-weight: 500;
     font-size: 2.2em;
     padding-top:  50px;
    padding-left:100px;
}

 /*#navigation{
    font-family: "Roboto";
    font-weight: 700;
    float: right;
    width: 350px;
    height: 30px;
    left:200px;
   margin-top:   -25px;
    margin-right: 12px;
    background-color: "white";
}
*/

#main{
    width: 960px;
    max-width:92%;
    margin-left: 5%;
   
    margin-top: 0px;
    top:400px;
    
    height:auto;
    background-color: white;    
    margin: 0 auto;
}

 .dropdown { 
        display:none;

}



#logo{
    float: left;
    top:42px;
    margin-top: 20px;
    margin-left:20px;
    height:62px;
    width:77px;
    background-color: aqua;
background:
    
    url(pictures/logo1.png);
    background-size: contain
}


 #sprache2{
            display: none;

        }

#sprache{   
    padding-top:13px;
    margin-left:500px;
    margin-right:36px;
    margin-bottom: 0;
    font-weight: 500;
    font-family: "Open Sans";
    font-size: 14px;
    float: right;
}





#untertitel{   
    padding-top:13px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom: 0;
    font-weight: 500;
    font-family: "Open Sans";
    font-size: 16px;

}




#haupttext{   
    padding-top:40px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom: 20;
    font-family: "Open Sans";
    font-size: 16px;
font-weight: 100;
}

.BUTTON_PWK {
   -webkit-border-radius: 68px;
   -moz-border-radius: 68px;
   border-radius: 68px;
   height: 0px;
   line-height: 0px;
   color: #FFFFFF;
   font-family: Arial;
   margin-top:   -25px;
    
   text-align: center:
  
   font-size: 14px;
   font-weight: 400;
   margin-left:-4px;
    margin-right: 10px;
    padding: 14px;
   background-color: #4763B3;
   
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
    float: right;
    
}

#buttons{
    margin-right: 22px;
    margin-top:-10px;
}

.BUTTON_PWK:hover {
   background: #1E62D0;
   text-decoration: none;
box-shadow: 1px 12px 18px 0px #cccccc;
   -webkit-box-shadow: 1px 12px 18px 0px #cccccc;
   -moz-box-shadow: 1px 12px 18px 0px #cccccc;

}


#liste1 {
    line-height: 1.18;
    margin-left:20px;
    
}


/* Kleines Ausgabeformat -----------------------*/


@media screen and (max-width: 900px){
     
   .line1 {
    width: 100%;
    margin-left:0px;
    display: border;
}
    
    
    #space {
    background-color: white;
    
    height: 700px;
    display:block;
}
    
    
    #unterer_teil {
    display:block;
}
    
    
    .dropdown {
          
        display:block;
    }

        label {
            display: block;
            cursor: pointer;
        }


        #buttons{
            display: none;

        }

        
    #sprache{
            display: none;

        }

    
    /* deutsch - englisch link Schalter */
    #sprache2{   
    display:block;
    margin-left:20px;
    margin-right:36px;
    margin-bottom: 0;
    font-weight: 500;
    font-family: "Open Sans";
    
        font-size: 16px;
    float: left;
}
    
    
    #untertitel {

            padding-top: 2px;
        }

    #ueberschrift {
    display:block;
    font-size: 26
   font-weight: bold;
        4px;
    font-family: "Roboto";
    }    
    
    #haupttext{   
            padding-top:100px;}

#dtslink {
  display: none;  
    
}

}


/*-----------------------------------------------*/



.headpicture {
    
    width:96%;
    height:auto;
    
    background:
    url(pictures/banner.jpg);
    background-size:cover;
    float: left;
    top:0px;
    margin-top: 20px;
    margin-left:20px;
    
}



/* Oberen teil löschen ----------------------------------------*/


input[type=checkbox] {
  display: none;
}



nav ul {
  max-height: 0px;
  overflow: hidden;
  list-style: none;
  transition: all 1s cubic-bezier(.325, 1, .22, 1);
  background-color: #4763B3

}




/* Parameter für Dropdown-Menü Mobil-Format   */


nav li {
  /* Breite der Trennlinien im Dropdownmenü */
    border-bottom: .18rem solid white;
  color: #4763B3;
  font-size: 26px;
  fontb
    padding: 5px 0;
  display: flex;
  justify-content: center;
}

nav li:last-of-type {
  margin-bottom: .225rem;
 
}

nav li a {
  font-family: Nunito;
  text-decoration: none;
  color: white

}
nav li a:hover{
  text-decoration: none;
color: #BFD0E1
}

input[type=checkbox]:checked ~ nav ul {
  height: auto;
  
    /*Maximale Höhe des Dropdownmenüs */
    max-height: 16.5rem;
  transition: all 1s cubic-bezier(.5, 1, .22, 1);
}

.hamburger {
  
  display: block;
  
  position: absolute;
  top: 26px;
  right: 30px;
  height: 20px;
  width: 20px;
  cursor: pointer;
  transition: all 1s cubic-bezier(.19, 1, .22, 1);

    
}

.line {
  position: absolute;
  display: block;
  background: #3d3d3d;
  width: 18px;
  height: .15rem;
  border-radius: .rem;
  left: 0;
  transition: all .6s cubic-bezier(.5, .1, 0, 1.2);
}

.line-1 {
  top: 0;
}

.line-2 {
  top: 7px;
  width: 14px;
  transform: translateX(2px);
  -webkit-transform: translateX(2px);
}

.line-3 {
  top: 14px;
}



input[type=checkbox]:checked ~ label .line-1 {
  top: 0px;
  width: 22px;
  transform: translateX(-11px) rotate(-45deg) translateY(12px);
}

input[type=checkbox]:checked ~ label .line-2 {
  opacity: 0;
}

input[type=checkbox]:checked ~ label .line-3 {
  top: 14px;
  width: 22px;
  transform: translateX(-8px) rotate(45deg) translateY(-8px);
}

