/* 
    Author     : Grischa
*/
/*text und formelles*/
*, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
}
body {
	-webkit-text-size-adjust: 100%;
}
.spacer {
    width: 100%;
    display: block;
}
.clearer {
    clear: both;
}
*, html {
	font-family: "helvetica light", helvetica, sans-serif;
	font-size: 16px;
	font-weight: lighter;
	color: rgb(200, 200, 200);
}
@media only screen and (max-width: 590px){
	*, html {
		font-size: 20px;
	}
}	
a, a h2, a:active, a:hover, a:visited {
	text-decoration: none;
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;
}
a {
	text-decoration: underline;
}
header a, .header a, #nav a {
	text-decoration: none;
}
a:hover, nav ul li a.active, a h2:hover {
	color: white;
}

h1 {
    font-size: 2.4em;
}
h2 {
    font-size: 1.5em;
}
h3, h4 {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
nav ul li ul li {
    font-size: 1em;
}
nav ul li a {
	font-size: 1.5em;
}
nav ul li ul li a {
	font-size: 1em;
}
p {
	line-height: 1.2em;
}
main li {
	line-height: 1.4em;
}
article img {
	max-width: 100%;
	height: auto;
}


/* Struktur */
html, body {
    background: #0D3755;
	margin: 0;
	padding: 0;
	height: 100%;
    width: 100%;
}
body {
 display: flex;
 flex-direction: column;
}
#wrap {
    width: 100%;
    margin: 0;
    padding: 0;
	flex: 1 0 auto;
}
header.start h1 {
    float: left;
    margin-left: 10%;       /*max, responsive unten*/
    margin-bottom: 0;
    padding: 2em;
    text-align: right;
    margin-top: 350px;      /*max, responsive unten*/
}
header h2, div.header h2 {
    padding: 1.3em 2em 1em 4.16667%;
	margin: 0;
}
div.header h2 {
	padding-top: 1em;
}
div.header {
	display: none;
	border-bottom: 1px solid rgb(200,200,200);
	margin-bottom: 1em;
}
header, #navwrap, main, footer {
    display: block;
}
header, #navwrap.start, footer {
    /* height: 1px; */
}
div.imgwrap {
	line-height: 0;
}
#navwrap img {
    width: 100%;
}
@media only screen and (min-width: 591px){
	img.undernav {
		display: none;
	}
  	.spacer.bottom {
  		height: 6em;
  	}
}
@media only screen and (max-width: 590px){
	img.overnav {
		display: none;
	}
	img.undernav {
		min-height: 0.3em;
		vertical-align: top;
	}
}

img.titelbild {
	width: 60%;
}
main article {
	margin: 0 auto;
	padding: 2em 1em;
	width: 70%;
	max-width: 720px;
	position: relative;
	top: 50%;
}
main article table tr td {
	vertical-align: top;
	padding: 0.5em 0.5em 0.5em 0;
}
@media only screen and (min-width: 591px){
	/* überbleibsel vor Flexbox
	main article {
		transform: translateY(-3em);
	}
	*/
}
/* falls oben bündig 
position: relative;
top: 50%;
transform: translateY(-50%);
*/

/* Tabelle Persönliche Ausbildung */
table.ausbildung td {
vertical-align: top;
}

footer p {
	padding: 0 1em 0.5em;
	flex-shrink: 0;
}
footer img {
	display: none;
}
@media only screen and (min-width: 591px){
	footer p {
		padding: 0 2em 1em;
	}
	main article {
		padding: 2em;
	}
}
@media only screen and (min-width: 720px){
	footer p {
		padding: 0 4.16667% 1em;
	}
}



/*lange Artikel*/
ul.mehr {
	padding: 0;
	margin: 0 auto;
}
ul.mehr li {
	text-decoration: none;
	display: block;
	text-align: center;
}
ul.re li {
	text-align: left;
}




/*nav*/
@media only screen and (min-width: 591px){
	nav ul {
		margin: 0px auto;
		padding: 0;
		position: relative;
		float: left;
		width: 100%;
	}
	nav ul li:not(.level2) {
		display: inline;
		margin: 0;
		padding: 0;
		float: left;
		position: relative;
		width: 25%;
	}
	nav ul li.first:not(.level2) {
		margin-left: calc(4.16667% - 0.5em);
	}
	nav ul li.last:not(.level2) {
		width: 20.8333%;
	}
	nav ul li ul {
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
		z-index: 99999;
		-webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
		-moz-transition: opacity 0.2s linear, visibility 0.2s linear;
		-o-transition: opacity 0.2s linear, visibility 0.2s linear;
		transition: opacity 0.2s linear, visibility 0.2s linear;
	}
	nav ul li ul:not(.start) {
		position: absolute;
		visibility: none;
		opacity: 0;
	}
	nav ul li:hover ul {
		visibility: show;
		opacity: 1;
	}
	nav ul li a {
		width: 100%;
		background: #0D3755;
		padding: 1em 0.5em 0 0.5em;
		display: inline-block;
	}
	nav ul li ul li {
		padding: 0;
	}
	nav ul li ul li a {
		padding: 1em 0.75em 0 0.75em;
	}
	nav ul li ul li.last a {
		padding-bottom: 0.75em;
	}
}









/*responsive stuff*/
/*button*/
div.buttonwrap {
	width: 100%;
	margin: 0;
	padding: 1em;
}
.nav {
	display: block;
	float: left;
	height: 3.5em;
	width: 4.5em;
	margin: 0;
	padding: 0.7em;
	background: transparent;

	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;

	border: 1px solid rgb(200,200,200);
}
.nav span.line {
    float: left;
    margin: 0.45em auto 0;
    width: 100%;
    height: 0.25em;
    background-color: rgb(200,200,200);

	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	border-radius: 0.2em;
}
button.nav span.line.first {
	margin-top: 0;
}
button:hover {
cursor:pointer;
}
@media only screen and (min-width: 591px) {
	div.buttonwrap {
		display: none;
	}
}


/*dropdown*/
@media only screen and (max-width: 590px){
	header:not(.start) {
		display: none;
	}
	div.header {
		display: block;
	}
  #nav {
	  margin: 0;
	  width: 100%;
	  clear: both;
	  display: none;
	  overflow: hidden;
	  -webkit-transition: max-height 0.5s ease;
	  transition: max-height 0.7s ease;
  }
  #nav.start {
      display: block
  }
  #nav.on {
	  height: auto;
	  max-height: 2000px;
  }
  ul#navul {
  		border-top: 1px solid rgb(200,200,200);
	  margin: 0;
	  padding: 1em 0.1em 1em 2em;
	  width: 100%;
	  background: rgba(255,255,255,0.1);
	  list-style-type: none;
  }
  ul#navul li, ul#navul li a, ul#navul li ul li, ul#navul li ul li a {
	  margin: 0;
	  padding: 0.2em 0;
	  width: 100%;
  }
  ul#navul li ul {
	  margin: 0;
	  width: 100%;
	  padding-left: 2em;
	  display: block;
	  list-style-type: none;
  } 
  ul#navul.on {
		  display: block;
	  }
}




/*main article and titelbild width*/
@media only screen and (max-width: 800px){
    main article, input, textarea {
        width: 100%;
    }
}
@media only screen and (max-width: 590px){
	img.titelbild {
		width: 100%;
	}
}


/*header margins & font-sizes*/
@media only screen and (max-width: 1100px){
    header.start h1 {
		font-size: 2em;
    }
}
@media only screen and (max-width: 900px){
    header.start h1 {
		font-size: 1.9em;
		margin-left: 0;
    }
}
@media only screen and (max-width: 590px){
    header.start h1 {
		font-size: 1.5em;
		margin-left: 0;
		padding: 2em 1em;
		margin-top: 0;
    }
}


@media only screen and (max-height: 1100px) and (min-width: 590px){
    header.start h1 {
        margin-top: 290px;
    }
}
@media only screen and (max-height: 1000px) and (min-width: 590px){
    header.start h1 {
        margin-top: 240px;
    }
}
@media only screen and (max-height: 900px) and (min-width: 590px){
    header.start h1 {
        margin-top: 190px;
    }
}
@media only screen and (max-height: 800px) and (min-width: 590px){
    header.start h1 {
        margin-top: 140px;
    }
}
@media only screen and (max-height: 700px) and (min-width: 590px){
    header.start h1 {
        margin-top: 80px;
    }
}
@media only screen and (max-height: 600px) and (min-width: 590px){
    header.start h1 {
        margin-top: 0px;
    }
}



/*form*/
.nav.long {
width: 100%;
margin-bottom: 2em;
margin-top: 0.2em;
padding: 1em;
}
button.nav.long {
	background: rgba(255,255,255,0.1);
}
textarea.nav.long {
	height:20em;
	resize: vertical;
}
span.error {
	padding: 0 0 1em 0;
	color: red;
}