/** .eot Formate (Embedded OpenType) **/
@font-face { font-family: DINWeb-Black;	src: url("/res/fonts/DINWeb/DINWeb-Black.eot"); }
@font-face { font-family: DINWeb-Bold; src: url("/res/fonts/DINWeb/DINWeb-Bold.eot"); }
@font-face { font-family: DINWeb-BoldIta; src: url("/res/fonts/DINWeb/DINWeb-BoldIta.eot"); }
@font-face { font-family: DINWeb-Light; src: url("/res/fonts/DINWeb/DINWeb-Light.eot"); }
@font-face { font-family: DINWeb-Medium; src: url("/res/fonts/DINWeb/DINWeb-Medium.eot"); }
@font-face { font-family: DINWeb; src: url("/res/fonts/DINWeb/DINWeb.eot"); }


/** .woff Formate (Web Open Font Format) **/
@font-face { font-family: DINWeb-Black; src: url("/res/fonts/DINWeb/DINWeb-Black.woff"); }
@font-face { font-family: DINWeb-Bold; src: url("/res/fonts/DINWeb/DINWeb-Bold.woff"); }
@font-face { font-family: DINWeb-BoldIta; src: url("/res/fonts/DINWeb/DINWeb-BoldIta.woff"); }
@font-face { font-family: DINWeb-Light; src: url("/res/fonts/DINWeb/DINWeb-Light.woff"); }
@font-face { font-family: DINWeb-Medium; src: url("/res/fonts/DINWeb/DINWeb-Medium.woff"); }
@font-face { font-family: DINWeb; src: url("/res/fonts/DINWeb/DINWeb.woff"); }


body, html { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 10px; font-family: DINWeb-Light, Arial, Helvetica; }

/** Positionierungen **/
.fl { float: left; }
.fr { float: right; }
.pf { position: fixed; }
.pr { position: relative; }
.pa { position: absolute; }
.pt0 { top: 0; }
.pb0 { bottom: 0; }
.pl0 { left: 0; }
.pr0 { right: 0; }
.full { width: 100%; }

#resButton { z-index: 100; }
#resTopDown, #resRightLeft { z-index: 90; }
#top { z-index: 70; }
section  { z-index: 20;}
figure .claim { z-index: 10; }

/** Schriften **/
h1 { font-size: 4em; line-height: 1em; padding: 0; margin: 0; }
h2 { font-size: 3em; line-height: 1.2em; padding: 0; margin: 0; }
h3 { font-size: 2em; line-height: 1em; padding: 0; margin: 0 0 .4em 0; }
p, ul, form { font-size: 1.6em; line-height: 1.3em; }

h1, .teaser, nav, .button { font-family: DINWeb-BoldIta; }
h3, strong { font-family: DINWeb-Bold; }

#animatContainer > div:nth-of-type(1) { font-size: 20em; margin-bottom: .3em; }
#animatContainer > div:nth-of-type(2) { font-size: 5em; }

#animatContainer, figure .claim, a.button { text-transform: uppercase; }

/** Color **/
h1, h2, h3, .textContent .preis, .breadcrumb, strong { color: #000; }
#animatContainer, .teaser, figure .claim, .teaser a, a.button, nav a { color: #fff; }
nav a:hover, nav a.aktiv { color: #b9061a}

/** Background **/
#teaserContainer, #top.action, .textContent, .teaser .overlay { background: #fff; }
#resButton div, .button, .teaser.rot, #resRightLeft, .kontaktIntro { background-color: #e2001a; }
#animatContainer, figure .box { background-color: rgba(184,7,24,.6); }
a.button:hover { background-color: #b9061a; }

/** Animate **/
.teaser, figure .single { 
		-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: bottom; }
.teaser .overlay, .teaser .button, #top { -webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear }
#animatContainer > div:nth-of-type(1) { -webkit-transition: right .5s ease-in-out;
		-moz-transition: right .5s ease-in-out;
		-o-transition: right .5s ease-in-out;
		transition: right .5s ease-in-out }
#animatContainer > div:nth-of-type(2) { -webkit-transition: left 1s ease-in-out;
		-moz-transition: left 1s ease-in-out;
		-o-transition: left 1s ease-in-out;
		transition: left 1s ease-in-out }


/** Font Family **/
#animatContainer > div:nth-of-type(1) { font-family: DINWeb; }
#animatContainer > div:nth-of-type(2), figure .button span { font-family: DINWeb-Bold; }

/** Responsive Menü Button **/
#resButton { position: fixed; right: 2em; top: 0; font-size: 1.5em; margin: .5em 0 0 0; }
#resButton div { width: 2em; height: .2em; margin: .4em 0; }
#resButton:hover { cursor: pointer; }

/** Responsive Menü SlideDown **/
#resTopDown { position: fixed; width: 100%; height: 100%; top: -100%; }
#resRightLeft { position: fixed; width: 100%; height: 100%; right: -100%;  }
#resRightLeft.open { right: -80%; }

a.button { display: inline-block; padding: .5em 2em; border: none; color: #fff; text-decoration: none; }
a.logo { position: absolute; }
a.logo img { height: 3em; margin: 1em 0 0 4em; }
.teaser a { text-decoration: none; }
.in800 { display: none; }

.mitarbeiter img { display: block; width: 100%; margin-bottom: 2em; }

#top { position: fixed; width: 100%; height: 5em; }


nav ul { padding: 4em 0 0 2em; font-size: 3em; }
nav li { padding: .25em 0; }
nav a { text-decoration: none; }

.c_12 { width: 90%; }


figure { width: 100%; height: 70%; }
figure.max { width: 100%; height: 100%; }
figure .box { position: absolute; z-index: 10; top: calc(50% - 16em); left: calc(50% - 23em);  }
figure .box img { width: 30em; margin: 10em 8em; }
figure .single { height: 100%; }
figure .button { padding: .5em 1em .2em 1em; position: absolute; z-index: 1; bottom: 6%; left: 50%; }
figure .button img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); height: 1em; width: 1em; }
.wm_directAccess { position: absolute; list-style-type: none; right: 2%; bottom: 32%; z-index: 10; }
.wm_directAccess > li { float: left; margin-right: .5em; border: 1px solid #b9061a; margin-bottom: .5em; width: 1em; height: 1em; }

section { position: relative;}
section.single { padding-top: 15em; }

.teaser { width: 19.89%;float: left;margin-right: .133%;background-position: 50% 50%;overflow: hidden;text-align: center; }
.teaser.vierspalter { width: 24.9%; }
.teaser.rot { background-image: url(/res/img/svg/symbol.svg); background-repeat: no-repeat; background-size: 50%; background-position: 114% 114%; } 
.teaser:not(.vierspalter):nth-of-type(5n) { margin-right: 0; }
.teaser.vierspalter:nth-of-type(4n) { margin-right: 0; }
.teaser .overlay { position: absolute; width: 100%; height: 100%; opacity: 0; }
.teaser .name { font-size: 4em; line-height: 1em; position: relative; top: 50%; margin-top: -.5em; }
.teaser .button { position: absolute; bottom: 0em; width: 100%; text-align: left; }
.teaser .button > div { display: inline-block; font-size: 2em; line-height: 1em; width: calc(100% - 2em); padding: .5em 1em; }
.teaser .button > div span { position: absolute; }
.teaser .button > div .hover { opacity: 0; }
.teaser .button img { height: .5em; float: right; margin-top: .3em; }
.teaser:hover { cursor: pointer; }
.teaser:nth-of-type(1):hover { cursor: initial; }


.teaserPage { padding-top: 5em; height: calc(100% - 5em); }
.teaserPage .teaser { height: 49.7% !important; }

.textContent { padding-bottom: 15em; }
.textContent .breadcrumb { padding: 2em 0 4em 0; display: block; font-family: DINWeb-BoldIta;}
.textContent hgroup { padding-bottom: 4em; }
.textContent article { padding-bottom: 4em; }
.textContent .preis { padding: .5em 0; display: block; border-top: 2px solid; border-bottom: 1px solid ; border-color: #e2001a; }
.textContent .preis span:nth-of-type(2) { float: right; }
.textContent p .button { float: right; margin: 2em 0; }
.textContent ul { list-style-image: url(/res/img/svg/listStyleType.svg); padding: 1em 0 0 1em; }

.kurslogo { position: absolute; right: 0; width: 50%; }

.kontaktIntro { border-top: 5em solid #fff; height: 25%; }
.kontaktIntro { background-image: url(/res/img/svg/symbol.svg); background-repeat: no-repeat; background-size: 27%; background-position: 106% 38%; }



fieldset { border: 0; margin: 0 0 1em 0; padding: 0; }
input, textarea { border: 0; padding: .5em 1em; width: calc(100% - 2em); background: #eceded; }
input { height: 1.5em; }
textarea { height: 12.7em; }
label { display: block; width: 100%; line-height: 2em; } 
button { border: 0; color: #fff; padding: .5em 4em; float: right; }



@media screen and (max-width: 1300px) {
	.teaser .button > div { font-size: 1.4em; }
    #resRightLeft.open { right: -70%; }
}
@media screen and (max-width: 1100px) {
	.teaser .name { font-size: 3em; }
}
@media screen and (max-width: 900px) {
    #resRightLeft.open { right: -50%; }
    .textContent .preis span { width: 100%; }
}
@media screen and (max-width: 1000px) {
	.teaser .button > div { font-size: 1.3em; }
}
@media screen and (max-width: 900px) and (orientation : portrait) {
    figure, figure.max { height: 50%; }
    .wm_directAccess { bottom: 52%; }
}
@media screen and (min-width: 800px) {	
    .teaser:hover .overlay { opacity: 0.8; }
    .teaser:hover .button > div .hover { opacity: 1; }
    .teaser:hover .button > div .default { opacity: 0; }
    .teaser:hover > a .button, a.button:hover { background-color: #b9061a; }
}
@media screen and (max-width: 800px) {	
	.teaser { width: 49.75%; margin-right: .5%; }
    .teaser:nth-of-type(4n), .teaser:not(.vierspalter):nth-of-type(5n) { margin-right: .5%; }
    .teaser:nth-of-type(2n), .teaser.rot { margin-right: 0 !important; }
    .minWidth { width: 99% !important; }
    .in800 { display: inline-block; }
    .textContent { padding-bottom: 6em; }
    .teaser .button > div .hover { display: none; }
    .teaser .button > div .default { opacity: 1; }
    .mitarbeiter img { width: 30%; float: left; margin-right: 5%; }
    .mitarbeiter ul { padding-left: calc(35% + 1em); }
    .mitarbeiter > div { margin-bottom: 2em !important; }
}
@media screen and (max-width: 600px) {
	.mitarbeiter img { width: 100%; }
    .mitarbeiter ul { padding-left: 1em; }
    .mitarbeiter > div { margin-bottom: 4em !important; }
}

@media screen and (max-width: 500px) {
	h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    p, h3, ul, form { font-size: 1.4em;}
	a.logo img { height: 2em; margin: 1em 0 0 1em; }
    #resButton { margin: .2em 0 0 0;  }
    #resRightLeft.open { right: 0%; }
    #top { height: 4em; }
    nav ul { padding: 3em 0 0 2em; }
    .textContent .breadcrumb { padding: 2em 0 1em 0; }
    button { display: block; width: calc(100% - 0em); padding: 1em 4em; }
    section.single { padding-top: 5em; }
    a.button { width: calc(100% - 4em); text-align: center; padding: 1em 2em; }
    .teaser .button { min-height: 4.5em; }
    .teaser .button > div span { position: relative; }
    #resButton { right: 1em; }
}