body{
    margin: 0 ;
    padding: 0;
    font-family: 'conduit light', 'conduit', sans-serif;
    background-color: black;
    font-size: 1.1em;
}
header{
    width: 100%;
    height: 105px;
    position: fixed;
	display: block;
    background-color: black;
	transition: top 0.3s;
    border-color: #0060a9;
    border-width: 0px;
    border-bottom-width: 2.5px;
    border-style:solid;   
}

div{
    color:white;
}

p{
    font-size: 12pt;
    color:white;
}

h1{
    transition-duration: 0.2s;
    font-size: 3.8em;
    color: white;
    text-align: center;
    margin-top: -16%;
    margin-bottom: 1.4em;
    padding-right: 2.7em;  /*<-- Titel ist bewusst nicht in der Mitte*/
    font-family: 'conduit light';
}

h2{
    transition-duration: 0.2s;
    color: white;
    font-size: 1.3em;
    text-align: left;
    margin-top: 1.4em;
    margin-bottom: 1em;
    font-family: 'conduit light';
}

.logo{
    transition-duration: 0.3s;
    width: 250px;
    float: left;
    margin: 2% 0 0 2%;
    justify-content: right;
    margin: 0;
    margin-right: 1em;
    padding: 35px 20px;
    list-style: none;
    display: flex; 
}

.menubutton{
    display:none;
    visibility: hidden;
    justify-content: right;
    margin: 0;
    margin-left:5%;
    margin-right:5%;
    padding: 0;
    list-style: none;
    display: flex;
    text-align: left;
    font-size: 55px;  
}

.header_nav {
    justify-content: right;
    margin: 0;
    margin-left:5%;
    margin-right:5%;
    padding: 0;
    list-style: none;
    display: flex;
    text-align: left;

}

.links_header a{
    display: block;
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 28px;
}  

.centered{
    text-align: center;
    margin-left:5%;
    margin-right:5%;
}
    /* Grid*/

  .grid_1{
    display: grid;
    margin: 0 auto;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    
    grid-template-areas:
    "s_A s_A s_A s_A s_A s_A" 
    "s_1 s_1 s_2 s_2 s_3 s_3"
    "f_n_l f_n_l f_n_l s_n_l s_n_l s_n_l"
    "f_n f_n f_n s_n s_n s_n"
    "s_l s_l z_l z_l c_l c_l"
    "s s z z c c"
    "m_l m_l m_l m_l m_l m_l"
    "m m m m m m"
    "b_d_l b_d_l b_d_l p_l p_l p_l"
    "b_d b_d b_d p p p"
    "l_l l_l l_l l_l l_l l_l"
    "l_c l_c l_b l_b l_d l_d"
    "o_l o_l o_l o_l o_l o_l"
    " o o o o o o";
  }
 
  form{
    font-size: 1.8em;
    margin-left:5%;
    margin-right:5%;
    padding: 0;
  }


  /* Grid Definitionen */

  .salutation_A{
    grid-area: s_A;
}
  .salutation_1{
      grid-area: s_1;
  }
  .salutation_2{
    grid-area: s_2;
}
.salutation_3{
    grid-area: s_3;
}
.first_name_label{
    grid-area: f_n_l;
}
.first_name{
    grid-area: f_n;
    width: 100%;
}
.second_name_label{
    grid-area: s_n_l;
}
.second_name{
    grid-area: s_n;
    width: 100%;
}
.street_label{
    grid-area: s_l;
}
.street{
    grid-area: s;
    width: 100%;
}
.zip_label{
    grid-area: z_l;
}
.zip{
    grid-area: z;
    width: 100%;
}
.city_label{
    grid-area: c_l;
}
.city{
    grid-area: c;
    width: 100%;
}
.mail_label{
    grid-area: m_l;
}
.mail{
    grid-area: m;
    width: 100%;
}
.birth_date_label{
    grid-area: b_d_l;
}
.birth_date{
    grid-area: b_d;
    width: 100%;
}
.phone_label{
    grid-area: p_l;
}
.phone{
    grid-area: p;
    width: 100%;
}
.licence_label{
    grid-area: l_l;
}
  .licence_b{
      grid-area: l_b;
  }
  .licence_c{
    grid-area: l_c;
}
.licence_d{
    grid-area: l_d;
}
.other_label{
    grid-area: o_l;
}
.other{
    grid-area: o;
    width: 100%;
}

/* Teil 2*/
.grid_2{
    display: grid;
    margin: 0 auto;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    
    grid-template-areas:
    "p_l p_l p_l v_l v_l v_l"
    " p p p v v v"
    "a_l a_l a_l e_c_l e_c_l e_c_l"
    "a a a e_c e_c e_c";
  }
  form{
    font-size: 1.8em;
    margin-left:5%;
    margin-right:5%;
    padding: 0;
  }


  /* Grid Definitionen */

.photo_label{
    grid-area: p_l;
}
.photo{
    grid-area: p;
    width: 100%;
}
.vitae_label{
    grid-area: v_l;
}
.vitae{
    grid-area: v;
    width: 100%;;
}
.application_label{
    grid-area: a_l;
}
.application{
    grid-area: a;
    width: 100%;
}
.employment_certificate_label{
    grid-area: e_c_l;
}
.employment_certificate{
    grid-area: e_c;
    width: 100%;
}


/*Footer*/


footer{
    border-color: #0060a9;
    border-width: 0px;
    border-top-width: 2.5px;
    border-style:solid;
    padding-left:5%;
    padding-right:5%;

    
}

.footer_nav {
    justify-content: right;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    text-align: left;
    grid-area: f_nav;
}

.links_footer a{
    display: block;
    padding: 60px 20px;
    text-align: center;
    text-decoration: none;
    color: white;
}
a:hover {
    color:#85a4d2;
  }

  .grid_footer{
    font-size: 10pt;
    display: grid;
    margin: 0 auto;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    
    grid-template-areas:
    "copy f_nav";
  }

  .copyright{
    grid-area: copy;
    display: flex;
    align-items:center;

  }

  /* Input */

  input{
    font-family: 'conduit light';
    font-size: 0.9em;
    border-radius: 4px;
    border: 2px solid#85a4d2;
    background-color: white;
    height: 48px;
    margin-top: 12px;
    margin-bottom: 25px;    
  }


  .radio_1 input{
    height: 1em;
    width: 1em;
    padding-left: 35px;
  }

  .check_1 input{
    height: 1em;
    width: 1em;
    padding-left: 35px;
  }

  .special_placeholder{
    color: gray;
    display: inline-block;
    padding-top: 5px;
    height: 43px;


  }
  

  /*Button*/

.button {
    display: inline-block;
    background-color: #0060a9;
    border-radius: 5px;
    border: 2px solid#85a4d2;
    color: white;
    text-align: center;
    width: 145px;
    font-size: 0.9em;
    margin-top: 1em;
    margin-bottom: 4.5em;
    font-family: 'conduit light';
    height: 52px;
    }
.button_main {
    display: inline-block;
    background-color: #0060a9;
    border-radius: 5px;
    border: 2px solid#85a4d2;
    color: white;
    text-align: center;
    width: 220px;
    font-size: 0.9em;
    margin-top: 1em;
    margin-bottom: 4.5em;
    font-family: 'conduit light';
    height: 52px;
    }

.button:hover {
    background-color: white;
    color: black;
    transition: all 0.2s;
    }
.button_main:hover {
    background-color: white;
    color: black;
    transition: all 0.2s;
    } 



/* Für kleinere Bildschrime*/
    @media screen and (max-width:1000px){


        nav{
            visibility: hidden;
        }
        .grid_1{
            transition-duration: 0.3s;
            display: grid;
            margin: 0 auto;
            width: 100%;
            grid-template-columns: 1fr;
            grid-column-gap: 20px;
            
            grid-template-areas:
            "s_A" 
            "s_1"
            "s_2"
            "s_3"
            "f_n_l"
            "f_n"
            "s_n_l"
            "s_n"
            "s_l"
            "s"
            "z_l"
            "z"
            "c_l"
            "c"
            "m_l"
            "m"
            "b_d_l"
            "b_d"
            "p_l"
            "p"
            "l_l"
            "l_c"
            "l_b"
            "l_d"
            "o_l"
            "o";
        }

        .grid_2{
            transition-duration: 0.3s;
            display: grid;
            margin: 0 auto;
            width: 100%;
            grid-template-columns: 1fr;
            grid-column-gap: 20px;
            
            grid-template-areas:    /*Bewerbungsschreiben ist bewusst über Lebenslauf*/
            "p_l"
            "p"
            "a_l"
            "a"
            "v_l"
            "v"
            "e_c_l"
            "e_c"
          }
        body{
            font-size:1em;
        }

        h1{
            transition-duration: 0.3s;
            font-size: 3.4em;
            margin-top: -18%;
            margin-bottom: 1.2em;
            padding-right: 2em;
        }
        h2{
            transition-duration: 0.3s;
            margin-top: 1em;
            margin-bottom: 1em;
            
        }
        nav{
            display:none;
        }
        .menubutton{
            visibility: visible;
            display: block;
            padding: 25px 20px;
            text-align: right;
            text-decoration: none;
            color: white;
            font-size: 52px;      
        } 
        .logo{
            transition-duration: 0.3s;
            width: 300px;
        }
    }


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

        body{
            font-size:0.8em;
        }
        h1{
            transition-duration: 0.3s;
            padding-right: 1.5em;
        }
    }