/* ===============================================================================
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark ====================== */
	
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0; padding:0; border:0; outline:0;
	font-size:100%; /* Correct text resizing oddly in IE6/7 when body font-size is set using em units */
	vertical-align:baseline;
	background:transparent; }

/* =============================================================================
	HTML5 BOILERPLATE ======================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* Corrects block display not defined in IE6/7/8/9 & FF3 */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* Corrects inline-block display not defined in IE6/7/8/9 & FF3 */
audio:not([controls]) { display:none; height:0; } /* Prevents modern browsers from displaying 'audio' without controls; Remove excess height in iOS5 devices */
[hidden] { display: none; } /* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4; Known issue: no IE6 support */

html {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust: 100%; }

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizeLegibility; }

button, input, select, textarea {
	font: 100% sans-serif; /* Correct font-size not inheriting in all browsers */
	margin: 0; /* Remove margins in FF3/4 S5 Chrome */
	vertical-align: baseline; *vertical-align: middle; } /* Define consistent vertical alignment display in all browsers */

textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Remove default vertical scrollbar in IE6/7/8/9 & Allow only vertical resizing */

button, input { line-height: normal; } /* Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) */

/* Display hand cursor for clickable form elements, Allow styling of clickable form elements in iOS & Correct inner spacing displayed oddly in IE7 (doesn't effect IE6): */
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *width:auto; *overflow: visible; }

button[disabled], input[disabled] { cursor: default; } /* Re-set default cursor for disabled elements */

/* Consistent box sizing and appearance: */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Remove inner padding and border in FF3/4 */

/* Colors for form validity: */
input:valid, textarea:valid { color: inherit; }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* Remove text-shadow in selection highlight: */
::-moz-selection { background: gray; color: #fff; text-shadow: none; }
::selection      { background: gray; color: #fff; text-shadow: none; }

img { -ms-interpolation-mode: bicubic; /* Improve image quality when scaled in IE7 */
	vertical-align: middle; } /* Remove the gap between images and borders on image containers */

svg:not(:root) { overflow: hidden; } /* Correct overflow not hidden in IE9 */

label { cursor: text; } /* Indicate that 'label' will shift focus to the associated form element */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } /* Correct color not inheriting in IE6/7/8/9 & alignment displayed oddly in IE6/7 */

/* tables still need cellspacing="0" in the markup */
table { border-collapse: collapse; border-spacing: 0; }
td, td img { vertical-align: top; }

/* =============================================================================
	TYPOGRAPHIE ============================================================== */

ul, ol { margin: 5px 0; padding: 0 0 0 12px; }
ol { list-style-type: decimal; }

nav ul, nav ol { padding:0; margin:0; list-style: none; list-style-image: none; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor:help; }

b, strong { font-weight: bold; }

blockquote, q { quotes:none; margin: 1em 40px; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

del { text-decoration: line-through; }

dfn, i, em { font-style: italic; margin-right:.2em; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #111; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* Redeclare monospace font family */

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* Improve readability of pre-formatted text in all browsers */

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* =============================================================================
   Non-Semantic Helper Classes =============================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Optisch verstecken (auch von Screenreader), aber behalte den Platz im Layout */
.invisible { visibility: hidden; }

/* Der glorreiche CLEARFIX: Aktualisiert, um einen Einsturz der Außenabstände in Kind-Elementen zu verhindern: j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* Clearfix-Fix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

/* =============================================================================
   Allgemeines Styling ========================================================= */
   
*{
	/* apply a natural box layout model to all elements: */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body{
	background: url('graphics/bg4.jpg') repeat top left lightgrey;
	font: 1em/1.5 'Open Sans', sans-serif;
	font-weight: 300;
	color: #505050;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
}

/* =============================================================================
   Generisches Text Styling ==================================================== */
   
	h1, h2, h3, h4, h5, h6{
		color: #801621;
		font-weight: 400;
		margin-bottom: 13px;
	}
	
	h1{
		text-indent: -9999em;
	}
	
	p,li,td{
		font-size: 0.875em;
	}
	
	ul{
		list-style: square;
		margin-left: 1em;
	}
	
	.vita li{
		list-style: square;
	}
	
	.vita li span{
		min-width: 80px;
		display: inline-block;
		vertical-align: top;
	}
	
	.vita li span + span{
		width: calc( 100% - 80px);
		width: -webkit-calc( 100% - 80px);
	}
	
	p{
		margin-bottom: 13px;
		text-align: left;
	}
   
	a{
		color: #801621;
		text-decoration: none;
	}
	
	a:hover{
		text-decoration: underline;
	}
   
	img.icon{
		width: 30px !important;
		height: 30px !important;
		margin: 0 !important;
	}
	
	li.nobull, ul.nobull{
		list-style: none;
	}
	
	ul.nomargin{
		list-style: none;
		margin-left: 0 !important;
	}
	
	li.nobull a{padding-left: 8px;}
   
/* =============================================================================
   #masthead Styling =========================================================== */
   
	header#masthead {
		width: 100%;
		position: absolute;
		z-index: 1000;
		background-color: white;
		border-bottom: 1px solid #aaa;
		box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
	}
	
	header#masthead div{
		text-align: center;
		width: 320px;
		margin: 0 auto;
	}
	
	#logo img{
		width: 200px;
		padding: 5px 0;
		margin: 5px 60px 0 10px;
	}
	
/* =============================================================================
   #masthead nav Styling ======================================================= */
   
	header#masthead{
		min-height: 9em;
	}
   
   	#masthead nav li{
		font-size: 16px;
		display: inline-block;
		padding: 0 4px;
		font-weight: 400;
	}
   
	#masthead nav a{
		color: #505050;
		text-decoration: none;		
		display: block;
		width: 100%;
		padding: 0.5em 0;
	}
	
	#masthead nav a:hover, #masthead nav li.active a{
		color: #801621;
	}
	
	.swipe #masthead nav a:hover{
		color: #505050;
	}
	
/* =============================================================================
   #viewport Styling ===========================================================
   =============================================================================
   Dieses div schaut auf das "Fließband" auf dem die article liegen ============ */
   
	#viewport{
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 10;
	}
	
	#viewport > div{
		width: 500%;
	}
	
/* =============================================================================
   article.page Styling ======================================================== */
   
	article.page{
		width: 20%;
		float: left;
		height: 0;
		padding-top: 9em;
	}
	
	.unroll article.page{
		padding-top: 20em;
	}
	
	article.page.active{
		height: auto;
	}
	
	.page header{
		width: 100%;
	}
	
/* =============================================================================
   article.page Styling ======================================================== */
	
	.page > header{
		overflow: hidden;
		border-radius: 0 0 2px 2px;
		box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
		display: block;
	}
	
	.page header figure{
		position: relative;
	}
	
	.page header figcaption{
		position: absolute;
		bottom: 0;
		padding: 5px 21px;
		width: 100%;
		font-size: 0.875em;
		color: white;
		background-color: #878787;
		background-color: rgba(64,64,64,.7);
	}
	
	.page header figure img{
		width: 100%;
		max-height:275px;
	}
	
/* =============================================================================
   .page section Styling ======================================================= */
	
	.page > div{
		background-color: white;
		overflow: hidden;
		margin: 2em 0 2em;
	}
	
	.page.active > div{
		box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
	}
	
	.page section{
		background-color: white;
		padding: 0px 5px 1em 5px;
		border-bottom: 1px solid #E5E5E5;
	}
	
	.page section header{
		background: url('graphics/punkte.png') 21px 0.6em no-repeat;
		padding-left: 78px;
		padding-right: 21px;
		margin: 20px 0;
	}
	
	.page section header h2{
		font-weight: bold;
	}
	
	.page section > div{
		padding: 1em 21px 0 21px;
	}
	
	.page section > div > div{
		margin-bottom: 3em;
	}
	
	.page section > div img{
		width: 100%;
		margin-bottom: 13px;
	}
	
	.page section figure{
		position: relative;
	}
	
	.page section figcaption{
		display: block;
		position: absolute;
		bottom: 13px;
		left: 16px;
		z-index: 100;
		height: 12px;
		width: 30px;
		background: url('graphics/img-pfeil-high.png') no-repeat center center transparent;
		background-size: 100%;
	}
	
	.page div#leistungsspektrum section{
		background: url('graphics/arrow-down.png') no-repeat 92% 10px transparent;
		background-size: 23px 7px;
		margin-top: 20px;
	}
	
	.page div#leistungsspektrum section header{
		cursor: pointer;
		margin-top: 0;
		padding-right: 64px;
	}
	
	.page div#leistungsspektrum section.intro header{
		cursor: default;
		padding-right: 21px;
	}
	
	.page div#leistungsspektrum section.intro{
		background: none;
	}
	
	.page div#leistungsspektrum section.open{
		background-image: url('graphics/arrow-top.png');
	}
	
	.page div#leistungsspektrum section div{
		height: 0;
		margin-bottom: 0;
		padding-top: 0;
		overflow: hidden;
	}
	
	.page div#leistungsspektrum section div.open,
	.page div#leistungsspektrum section.intro div{
		height: auto;
		margin-bottom: 3em;
		padding-top: 1em;
		overflow: hidden;
	}
	
	#galerie{
		text-align: center;
		width: 100%;
		min-height: 500px;
		position: relative;
	}
	#galerie img{
		width: 250px;
		padding: 10px;
		display: inline-block;
		margin: 0;
	}
	
	#galerie .load{
		width: 100%;
		height: 100%;
		min-height: 500px;
		background: url('graphics/loading.gif') no-repeat center center transparent;
		background: url('graphics/loading.gif') no-repeat center center rgba(255,255,255,.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
/* =============================================================================
   .page footer Styling ======================================================== */	
	
	.page footer{
		padding: 13px 26px 13px 26px;
		position: relative;
		z-index: 100;
		color: #801621;
		border-bottom: 1px solid #801621;
	}
	
	.page footer p{
		margin: 0;
		font-style: italic;
	}
	
/* =============================================================================
   footer#mastfoot Styling ===================================================== */
	
	footer#mastfoot{
		padding: 0 31px 0 31px;
		margin-bottom: 4em;
		position: relative;
	}
	
	footer#mastfoot p{
		text-align: left;
		font-size: 0.75em;
	}
	
	footer#mastfoot p span{
		display: inline-block;
		width: 35px;
	}
	
	footer#mastfoot a{
		color: #575757;
		text-decoration: underline;
	}
	
	footer#mastfoot a:hover{
		color: #801621;
	}
	
	footer#mastfoot span.mobile{
		display: none;
	}
	
	footer#mastfoot span.br {
		display: block;
		visibility: hidden;
		width: auto;
	}
	
/* =============================================================================
   Formular Styling ============================================================ */

	form{
		font-size: 0.8em;
	}
	   
	form div{
		position: relative;
	}
	   
	form	label{
		position: absolute;
		top:0;
		left: 0;
		padding: 4px 6px;
	}

	form .hasInput label{
		display: none;
	}

	form input, form textarea{
		padding: 5px;
		width: 100%;
		margin-bottom: 16px;
		border: 1px solid #ddd;
		box-shadow: 0 0 2px 0 #ddd inset;
		font-family: inherit;
	}

	form textarea{
		height: 150px;
		width: 100%;
	}

	form input:focus + label,
	form textarea:focus + label{
		opacity: 0.5;
	}

	form textarea:focus,
	form input:focus{
		border: 1px solid #801621;
		box-shadow: 0 0 5px 0px #801621;
	}
	
	form input[type=checkbox]:focus{
		box-shadow: none;
	}

	form input[type="submit"]:hover,form input[type="submit"]:focus{
		background-color: #9C313D;
		box-shadow: none;
	}
	
	form input[type="submit"]{
		width: 100%;
		background-color: #801621;
		color: white;
		border: 0px solid transparent;
		border: 1px solid #fff;
	}

	form input[type="submit"][disabled]{
		color: #aaa;
		background-color: #F0F0F0;
		border: 1px solid #ddd;
	}

	form input[type="submit"][disabled]:hover{
		background-color: #F0F0F0;
	}

	form p{
		float: left;
		font-size: 1em;
		padding: 0 !important;
	}

	form input.non-validate,
	form textarea.non-validate{
		background-color: #fee;
		border: 1px solid #f00;
	}

	form input[type="checkbox"]{
		float: left;
		margin: 4px 6px 16px 0;
		width: auto;
	}

	form .warning{
		color: #801621;
		font-weight: bold;
		display: none;
	}
	
	.required{
		display: none;
	}

/* =============================================================================
   Nach oben Button Styling ==================================================== */
   
	#toTop{
		position: fixed;
		bottom: 1em;
		right: 1em;
		z-index: 10000;
		overflow: hidden;
		border-radius: 2px;
		line-height: 1em;
		font-size: 13px;
	}
	
	#toTop a{
		display: inline-block;
		padding: 6px;
		/*background-color: #E7E7E7;*/
		line-height: 1em;
		color: white;
		background-color: #801621;
		background-color: rgba(128,22,33,.9);
	}
	
	#toTop a:hover{
		text-decoration: none;
	}
	
	#toTop .left{
		margin-right: 1px;
	}
	
	#toTop .right{
		margin-left: 1px;
	}
	
	#toTop.first .left, #toTop.last .right{
		color: transparent;
	}
	
@media only screen and (min-width: 480px) {
	article.page{
		padding-top: 10em;
	}
	
	.page header figcaption{
		font-size: 1em;
	}
	
	header#masthead div{
		width: 100%;
		max-width: 960px;
	}

	.page > header{
		display: block;
		max-width: 900px;
		margin: 0 auto;
	}
	
	.page div#leistungsspektrum section header{
		padding-right: 21px;
	}
}

@media only screen and (max-width: 567px){
	#masthead nav{
		margin-bottom: 20px;
		width: 100%;
		clear: both;
	}

	#masthead nav ul{
		overflow: hidden;
		max-height: 0;
	}

	#masthead nav ul.unroll{
		max-height: 45em;
	}

	#masthead nav li{
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 2px;
	}

	#masthead nav a, #jump{
		display: block;
		width: 100%;
		padding: 5px;
	}

	#jump{
		text-align: center;
		font-weight: bold;
		font-size: 2em;
		line-height: 0.9em;
		text-shadow: 0 0 2px white;
		clear: both;
		margin-bottom: 2px;
		color: #878787;
		text-decoration: none;
	}

	#masthead nav a:hover, #masthead nav :hover > a, #masthead nav .active > a, #jump.active{
		color: #801621;
	}

	#masthead nav ul ul a{
		padding-left: 35px;
	}

	#masthead nav ul ul ul a{
		padding-left: 65px;
	}
}

@media only screen and (min-width: 480px){
	footer#mastfoot span.br {
		display: inline-block;
		padding: 0 0.5em;
		visibility: visible;
	}
}

@media only screen and (min-width: 568px){
	#jump{
		display: none;
	}

	#masthead nav{
		display: block;
		width: 100%;
		font-size: 0.1px;
		text-align: justify;
	}
	
	#masthead nav ul:last-child:after{
		content: ' ';
		display: inline-block;
		width: 100%;
	}
}

@media only screen and (min-width: 600px){

	.page header figcaption{
		padding: 12px 21px;
	}
	
	.page section header{
		font-size: 1.125em;
	}

	.page section > div{
		padding: 1em 21px 0 78px;
		margin-bottom: 3em;
	}
	
	.page section h3,.page section p{
		padding-left: 16px;
	}
	
	.page section .nopic h3,.page section .nopic p{
		padding-left: 0;
	}
	
	ul{
		margin-left: 2em;
	}
	
	.page section div.half{
		width: 50%;
		/*width: calc(50% - 38px);*/
		float: left;
		padding: 0 20px 0 0;
		margin-bottom: 64px;
	}
	
	.page section div.half:nth-of-type(even){
		padding: 0 0 0 20px;
	}
	
	.page section div.half:nth-of-type(odd){
		padding: 0 20px 0 0;
	}
	
	form div{
		margin: 0 0 0 16px;
	}
	
	.page div#leistungsspektrum section.open{
		background-image: url('graphics/arrow-top.png');
	}
	
	.page div#leistungsspektrum section{
		background: url('graphics/arrow-down.png') no-repeat 95% 4px transparent;
		background-size: 46px 14px;
	}
	
	.page footer{
		padding: 13px 26px 13px 78px;
	}
	
	footer#mastfoot{
		padding: 13px 26px 13px 78px;
	}
}

@media only screen and (min-width: 620px){
	footer#mastfoot > p{
		float: left;
		margin-top: 2.5em;
	}
	
	footer#mastfoot div{
		float: right;
	}
}

@media only screen and (min-width: 768px){
	header#masthead {
		height: 5.5em;
		min-height: 0;
	}

	header#masthead div{
		text-align: left;
	}
	
	header#masthead nav{
		float: right;
		width: 68%;
		/* 
			max-width: 480px; 
		*/
		margin-top: 24px;
		padding-right: 1em;
	}
	
	header#masthead #logo{
		margin-left: 0.5%;
	}
	
	header#masthead #logo img{
		margin-right: 0;
		float: left;
	}

	article.page{
		padding-top: 5.5em;
	}
	
	.page > header{
		width: 90%;
	}
	
	article.page > div{
		width: 90%;
		max-width: 900px;
		margin: 2em auto 2em;
		border-radius: 2px 2px 0 0;
	}
	
	.page section > div{
		padding: 1em 48px 0 78px;
	}
	
	.page section div.half h3, .page section div.half p, .page section div.half ul{
		padding-right: 8%;
	}
	
	form div{
		margin: 0 8% 0 16px;
	}
	
	.page section > div img{
		margin-bottom: 26px;
	}
	
	.page section figcaption{
		bottom: 26px;
	}
	
	footer#mastfoot{
		width: 92%;
		max-width: 900px;
		margin: 0em auto 2em;
	}
	
	footer#mastfoot  br.mobile{
		display: none;
	}
	
	footer#mastfoot span.mobile{
		display: inline;
	}
	
	footer#mastfoot > p{
		float: none;
		margin-top: 0em;
	}
	
	footer#mastfoot div{
		float: none;
	}
	
	footer#mastfoot p.float{
		float: left;
		padding-right: 5em;
	}
	
	footer#mastfoot p.nonfloat{
		padding-top: 6em;
	}
	
	.page section > div img.anfahrtsskizze{
		width: 75%;
		margin: 1em 12.5%;
	}
}

@media only screen and (min-width: 1000px){
	#toTop{
		right: calc(50% - 430px);
	}

	header#masthead nav{
		float: right;
		width: 66%;
	}
	
	header#masthead #logo{
		margin-left: 0;
	}
}