body, html { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 10px; font-family: Arial, Helvetica, times; color: #8c8b8b; }
.in1000 { display: none; }



/** Schriften **/
h1 { font-size: 2.4em; line-height: 1em; font-weight: bold; }
h2 { font-size: 3em; line-height: 1em; padding: 0; margin: 0 0 2em 0; }
h3 { font-size: 2em; line-height: 1em; padding: 0; margin: 0 0 1em 0; font-weight: bold; }
p { margin-bottom: 2em; }
p, input, textarea, button, article ul { font-size: 1.5em; line-height: 1.3em; font-weight: 100;  }
.teaser a ul { font-size: 1.2em; line-height: 1.3em; }
.teaser a .button { font-size: 1.5em; font-weight: bold; letter-spacing: .02em; }



/** color **/
strong { color: #000; font-weight: bold; }
aside .button, button, nav > ul a { color: #fff; }
input, textarea, .teaser a li, nav > ul ul a, p strong { color: #8c8b8b }
p a, header a { color: #000; text-decoration: underline; }



/** background**/
button { background: #8c8b8b; }
.kontakt { background: #F5F5F5; }
footer, .teaser ul { background: #e6e6e6; }
body, header, .animation { background: #fff; }



/** header **/
header { position: fixed; z-index: 20; width: 100%; height: 5.5em; border-bottom: 1px solid #8c8b8b; }
header div { color: #000; font-weight: bold; margin: 0 auto; display: block; width: auto; float: right; margin-right: 6em; font-size: 2em; padding-top: 1.2em; }
header div img { height: 1em; width: 1em; display: inline; vertical-align: top; margin-right: .2em }
.headerSpacer { height: 5.5em; }
.farbbalken { position: fixed; width: 100%; height: 1.5em; z-index: 100; }
.logo { position: fixed; left: 2%; top: 2.5em; height: 2em; width: auto; }



/** Menü **/
nav > ul { padding: 3.5em 0 0 22%; font-size: 3em; font-weight: bold; }
nav > ul a { text-decoration: none; padding: .5em 0; display: block; }
nav > ul ul { padding: 0 0 1em 0; font-size: .7em; }
nav > ul ul a { font-weight: normal; padding: .3em 0; }
nav > ul a:hover, nav > ul a.aktiv { color: #0AA3FF; }



/** content **/
.hgroup { margin: 6em 0 0 0 ; }
article { padding-top: 4em; }
article ul { list-style-type: disc; padding: 0 10% 3em 1.5em; }
article ul li { padding-bottom: .6em; }
.c_12 { width: 60%; }
img { width: 100%; display: block; }
img.drittel { width: 32%; margin-right: 1%; float: left; }
img.halb { width: 49%; margin-right: 1%; float: left; }
img.full { width: 100%; }
img.drittel, img.halb, img.full { margin-bottom: .8em; }



/** figure **/
figure { position: relative; height: 80%; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		-webkit-transform: translateZ(0); 
		-moz-transform: translateZ(0); 
		-o-transform: translateZ(0); 
		transform: translateZ(0);; background-position: center; }
figure.max { height: 100%; overflow: auto; overflow: hidden; }
.scrollButton { position: absolute; z-index: 20; left: 50%; margin-left: -22px; bottom: 3em;  
		-webkit-animation: bounce 4s ease infinite;
		-moz-animation: bounce 4s ease infinite;
		-ms-animation: bounce 4s ease infinite;
		-o-animation: bounce 4s ease infinite;
		animation: bounce 4s ease infinite; padding: 30px; }
.scrollButton div { border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #ffff00; }
.claim { position: absolute; z-index: 19; bottom: 1.8em; left: 1em; color: #fff; font-size: 7em; font-weight: bold; }
.claim span { background-color: rgba(23,41,130,0.5); line-height: .9em; padding: 0 .2em; display: inline-block; }
.claim span:last-child { color: #ffff00 }
.startseiteGif { height: 100%; width: auto; display: none; }



/** aside **/
aside { position: relative; overflow: hidden; padding-top: 4em; }
.teaser { background-size: 200% 100%; }
.teaser a { text-decoration: none; outline: none; border: none; }
.teaser a .imgContainer { overflow: hidden; }
.teaser a img { height: 100%; }
.teaser a .button { padding: 1em 1.5em; background-size: 200% 200%; }
.teaser a .button span { float: right; }
.teaser a ul { padding: 0 1.5em; }
.teaser a li { border-bottom: 1px solid #8c8b8b; padding: .8em 0; }
.teaser a li:first-child { padding-top: 2em; }
.teaser a li:last-child { border: none; }
.teaser a:hover > .imgContainer img { 
		-webkit-transform: scale(1.01,1.01);
		-moz-transform: scale(1.01,1.01);
		-ms-transform: scale(1.01,1.01);
		-o-transform: scale(1.01,1.01); 
		transform: scale(1.01,1.01) }
.teaser a li:hover { background-size: 100% 100%; }
.teaser.blauEffekt a li:hover { color: #0057a3; }
.teaser.gelbEffekt a li:hover { color: #fcb121; }
.teaser.aquaEffekt a li:hover { color: #0AA3FF; }
.teaser.pinkEffekt a li:hover { color: #cb08ed; }
.teaser.rotEffekt a li:hover { color: #c1272d; }
.teaser.orangeEffekt a li:hover { color: #e85828; }



/** Kontaktformular **/
.kontakt { padding-top: 5em; margin-top: 6em;  }
form { padding-bottom: 10em; }
fieldset { margin-bottom: 2em; }
input, textarea { border: 1px solid #e6e6e6; padding: 1.3em 1em .5em 1em; }
input { width: calc(90% - 2px - 2em); }
textarea { width: calc(100% - 2px - 2em); height: 10.3em; }
label { padding-left: .5em; margin-top: 0.5em; position: absolute; }
button { border: none; padding: .3em 4em; text-decoration: underline; float: right; text-decoration: none; background-size: 400% 100% !important;  }



/** Footer **/
footer { padding: 6em 0; }
footer p span { display: inline-block; width: 4.5em; }

/* .invalid class prevents CSS from automatically applying */
.KontaktForm input:required:invalid, 
.KontaktForm textarea:required:invalid {
	background: red !important;
}
 
/* Mark valid inputs during .invalid state */
.KontaktForm input:required:valid, 
.KontaktForm textare:required:valid {
	background: #fff;
}



/** Animationen **/
@-webkit-keyframes bounce { 0%{ bottom: 3em; } 50%{ bottom: 5em; } 100%{ bottom: 3em; } }
@-moz-keyframes bounce { 0%{ bottom: 3em; } 50%{ bottom: 5em; } 100%{ bottom: 3em; } }
@-o-keyframes bounce { 0%{ bottom: 3em; } 50%{ bottom: 5em; } 100%{ bottom: 3em; } }
@keyframes bounce { 0%{ bottom: 3em; } 50%{ bottom: 5em; } 100%{ bottom: 3em; } }


@media screen and (-webkit-min-device-pixel-ratio:0) {
	nav > ul a:hover, nav > ul a.aktiv { background: linear-gradient(270deg, #ffff00, #ff7900, #ff0000, #ff00f3, #b055ff, #6cb6ff, #005ac6); background-size: 100% 100%; 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;}
	.teaser.blauEffekt a li:hover { background: linear-gradient(270deg, #0057a3, #45b9ff); 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;; color: #0057a3; }
    .teaser.gelbEffekt a li:hover { background: linear-gradient(90deg, #e85828, #f7931e); 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;; color: #fcb121; }
    .teaser.aquaEffekt a li:hover { background: linear-gradient(270deg, #0AA3FF, #00ffff); 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;; color: #0AA3FF; }
    .teaser.pinkEffekt a li:hover { background: linear-gradient(270deg, #cb08ed, #fb5272); 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;; color: #cb08ed; }
    .teaser.rotEffekt a li:hover { background: linear-gradient(270deg, #c1272d, #ff1d25); 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;; color: #c1272d; }
    .teaser.orangeEffekt a li:hover { background: linear-gradient(270deg, #e85828, #f7931e); 
		-webkit-background-clip: text;
		-moz-background-clip: text;
		-ms-background-clip: text;
		-o-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		-moz-text-fill-color: transparent;
		-ms-text-fill-color: transparent;
		-o-text-fill-color: transparent;
		text-fill-color: transparent;; color: #e85828; }
}


@media screen and (max-width: 1400px) {
	.c_12 { width: 80%; }
}
@media screen and (max-width: 1100px) {
	.claim { font-size: 8em; }
}
@media screen and (max-width: 1000px) {
	.in1000 { display: block; }
    .out1000 { display: none !important; }
    footer .c_12 .g_5, footer .c_12 .g_3 { width: 49%; }
}
@media screen and (max-width: 900px) {
	.c_12 { width: 90%; }
    img.drittel, img.halb, img.full { margin-bottom: .5em; }
}

@media screen and (max-width: 800px) {
	.claim { font-size: 6em; bottom: 10%; }
    .teaser a ul { padding: 0 1em; font-size: 1.1em; }
    figure, figure.max { height: 80%; }
    .scrollButton { display: none; }
    
    .startseiteGif { display: none; }
}


@media screen and (max-width: 750px) {
	.mitarbeiter .g_6 { width: 99%; margin-bottom: 2em; }
    .contentListe .g_4 { width: 99%; }
    .mitarbeiter .g_6 img { width: 45%; float: left; margin-right: 5%; }
    article ul { padding: 0 0 2em 1.5em; }
}

@media screen and (max-width: 700px) {
    .teaser a ul { height: 0; overflow: hidden; }
    .kontakt .g_6 { width: 99%; }
    .c_12 .g_6 { width: 99%; }
    input { width: calc(100% - 2px - 2em); }
    button { float: none; margin: 0 auto; display: block; }
    footer .c_12 .g_5, footer .c_12 .g_3 { width: 99%; }
    form { padding-bottom: 5em; }
}


@media screen and (max-width: 600px) {
	h3 { margin: 0 0 1em 0; }
    h2 { font-size: 2em; margin: 0 0 1em 0; }
	.out600 { display: none; }
    .teaser.g_4 { width: 49%; }
    .teaser a .button { padding: .5em .5em; }
    aside .claim { font-size: 4em; }
    header div { margin-right: 4em; font-size: 1.5em; padding-top: 1.8em; }
    .hgroup { margin: 3em 0 0 0; }
    .kontakt { margin-top: 3em; padding-top: 3em; }
    form { padding-bottom: 3em; }
    article { padding-top: 2em; }
    article ul li { padding-bottom: .4em; }
    input, textarea { padding: 1em 1em .3em 1em; }
    textarea { height: 6em; }
    fieldset { margin-bottom: 1em; }
    img.drittel, img.halb, img.full { margin-bottom: .3em; }
}

@media screen and (max-width: 500px) {
	figure { height: 50%; }  
    bottom: 0;
    background-color: rgba(255,255,255,.7);
    padding: .5em .5em 1em .5em;
    margin-bottom: 0;
    width: calc(100% - 1em);}
}

@media screen and (max-width: 550px) {
	.claim { font-size: 4em; }
}
@media screen and (max-width: 400px) {
	.claim { font-size: 3em; }
    aside .claim { font-size: 2em; }
}