/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ende reset-styles */


html, body {
	margin: 0;
	padding: 0;
}

body { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 100.01%;
	line-height: 100%;
	color:#000000;
	background-color: #ffffff;
	}


/*
dunkles rot:601339
helles rot: BE1A1A
*/


/*wird nur in screenreadern u.ae. angezeigt */
.aural, #navskip p, #nachoben, .nurprint {
	position: absolute;
	top: -100em;
	left: -100em	
}


#navskip p a:hover, 
#navskip p a:focus, 
#navskip p a:active {
    position: absolute;
	left: 103em;
    top: 100.5em;
	z-index: 100;
}
#navskip p a:link, 
#navskip p a:visited {
    color: #cc0000;
    font-size: 1em;
    position: absolute;
    width: 10em;
}

/* ### START hauptspalten ### */
div#wrapper { 
	width: 94%; /* kein fester Wert moeglich */
	max-width: 794px;
	margin: 0 auto;
}	

div#inner { 
	float: left;
 	position: relative;
	width: 100%;
	border-left: 0.0625em solid #cccccc;
    padding: 0;
}

header {
	float: left;
 	position: relative;
	width: 47.625em;
	padding: 1.75em 0 2.375em 0;
	border-bottom: 0.0625em solid #cccccc;
    margin: 0 0 0 2em;
}


div#logo {
	float: left;
	width: 11.25em;
	margin: 1em 2.375em 0 0;
}


header figure {
	float: left;
	width: 34em; /*22.625em;*/
	height: 11.375em;
	background-color: #761233; 
}


div#main {
	float: left;
	position: relative;
	width: 34em; 
	margin: 1.5em 0 1em 0; 
}


nav	{
	float: left;
    margin: 1.625em 2.375em 0 2em;
    position: relative;
    width: 11.25em;	
}


footer {
	clear: left;
	float: left;
	position: relative;
	width: 100%; 
	border-top: 0.0625em solid #cccccc;
	margin: 1.875em 0 0 0;
	padding: 1em 0 0.625em 0;
}

	
/* ### END hauptspalten ### */


/* ### START navselemente ### */

nav li {
	font-size: 1em;	
}

	
nav ul, nav ul li { /*margin + padding wegen liste ohne einzug */
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
	text-align: right;
	}
	
nav ul li { /*abstand navbloecke*/
	border-top: 0.0625em solid #cccccc;
	text-transform: lowercase;
}

	
nav ul li a {
	display: block;
	padding: 0.5em 0 0.5em 1.75em;
	margin: 0 0 0 0;
	text-decoration: none;
}
	


nav ul li a:focus,
nav ul li a:hover,
nav ul li a:active {
	background: url(img/highlight-nav.gif) no-repeat 0 0;
	color: #be1a1a;
}

/* focus zusaetzlich durch underline hervorheben wg 2.2.1 benutzerdefinierter hintergrund*/
nav ul li a:focus,
nav ul li a:active {
	text-decoration: underline;
}


nav ul li.navhier, 
nav ul li.mitsubnav { 
	color: #be1a1a;
	font-weight: bold;
	background: url(img/highlight-nav.gif) no-repeat 0 0;
	padding: 0.5em 0 0.5em 0;
}


span.navhier {
	color: #be1a1a;
	font-weight: bold;
}

nav ul li ul {
	margin: 0.375em 0 0.375em 0;
	background-color:#ffffff;
}


nav ul li ul li {
	border: 0; 
	font-size: 1.457em;	
	margin: 0 0 0 0;
}

nav ul li ul li a {
	display: block;
	padding: 0.125em 0 0.125em 0;
	text-decoration: none;
	font-weight: normal;
}

nav ul li ul li a:focus,
nav ul li ul li a:hover,
nav ul li ul li a:active {
	background-image: url();
	text-decoration: underline;
	color: #be1a1a;
}

nav ul li.mitsubnav ul li {
	color: #be1a1a;
	background-color:transparent;
}

nav ul li.mitsubnav ul li a.subnavhier {
	color:#be1a1a;
	font-weight: bold;
	text-decoration: none;
}	


footer span {
	padding: 0 0.5em 0 0;
}


.googlemap {
	margin: 2em 0 0 0;
}


/* ### END navselemente ### */





/* ### START inhalt mitte  ### */
h1 {
	margin: 0 0 0.5em 0; 
	font-size: 1.125em;
	line-height: 140%;
	font-weight: normal;
	color: #601339;
}

h2, h3, h4, h5 {
	font-size: 0.687em;
	/*line-height: 140%;*/
	font-weight: bold;
	margin: 0.625em 0 0em 0; 
	padding: 0.625em 0 0 0; 
	color:#444444;
	}

section.aktuell h1 {
	font-size: 0.687em;
 	color: #601339;
	font-weight: bold;
	margin: 0.1375em 0 0.125em 0;
	padding: 0.5em 0 0 0;
	border-top: 0.0625em solid  #761233;
}

h1 + section.referenz {
	padding: 0.625em 0 1.25em;
}

a {
	color: #601339;
	text-decoration: underline;
}

#content a:visited {
	color: #000000;
}

#content a:focus,
#content a:active {
	background-color: #cccccc;
}

#content h2 a.anchor {
	color: #444444;
	text-decoration: none;
}

b, strong 	{
	font-weight:bold;
}
	

p, ul { 
	font-size: 0.687em;
	margin: 0 0 1.2em 0;
}


section.referenz {
	float: left;
	margin: 0 0 0.625em 0;
	border-bottom: 0.0625em solid #cccccc;
	padding: 0.625em 0 1.25em 0;	
}

section.referenz h2 {
	margin: 0 0 0.25em 0; 

}

#texteinspaltig {
	/*width: 31em;*/
	width: 30em;
	margin: 0 4em 0 0;
}

/*start home*/
#linkespalte {
    float: left;
    margin: 0 1.875em 0 0;
    width: 20.6275em;
}


section.aktuell {
	float: left;
   	width: 11.375em;
}

section.teaser {
	float: left;
	position: relative;
	border-bottom: 0.0625em solid  #cccccc;
	padding: 0.625em 0 0.625em 0;	
	margin: 0 0 0 0;
}


.teaser h2 {
	padding: 0;	
}

.teaser p {
	margin: 0 0 0.625em 0; 
}

.teaser img {
	margin: 0 0 0.625em 0; 
}

/*end home*/

.textspalte {
	float: left;
	width: 21.375em;
	margin: 0 1.25em 0 0;
}


section.referenz figure {
	width: 11.375em;
	float: left;
	margin: 0 0 0.625em 0;
}


section.referenz figure img {
	padding: 0.625em;
}

section.teaser figure img,
section.referenz figure img {
	border: 0.0625em solid #cccccc;
	padding: 0.625em;
}


article figure img {
	margin: 0.25em 0.312em 1em 0; 
}



#main ul {
	list-style-type: disc;
	list-style-position: outside;
	margin: 0 0 0 1.2em;
	padding: 0;
}	


#main ul.sitemap {
	list-style-type: none;
	margin: 0 0 0 0;
}

#main ul.sitemap li {
	list-style-type: none;
	padding: 0 0 0.312em 0;
	
}

#main ul li ul  {
	padding: 0.25em 0 0 0.5em;
	
}

#main ul li ul li {
	font-size: 1.4625em;
}

ul.leistungen li{
	margin-bottom: 0.75em;
}




/* #### start versionen ###
320 x 480 (iPhone)
480 x 640 (small tablet)
768 x 1024 (iPad - Portrait)
1024 x 768 (iPad - Landscape)
*/

/*814 = designbreite von 794 zzgl. 20 px scrollbalken, fall tritt schon vor ipad-portrait ein*/
@media only screen and (max-width: 814px) {
	

	div#wrapper { 
		width: 38.25em; /*612px breite inkl kopfbild, ohne farbblock*/
	}	

			
	header {
		width: 36.25em;
		margin: 0 0 0 2em;
	}
	
	
	header figure {
		float: left;
		width: 22.625em; /*farbblock rechts verschwindet;*/
		height: 11.375em;
		background-color: #761233; 
	}

	
	div#main {
		width: 22.625em; 
	}
	
	#texteinspaltig {
		width: 100%;
		margin: 0 0 0 0;
	}

	.textspalte {
		width: 100%;
		margin: 0 0 0 0;
	}

	section.referenz {
		padding: 0 0 1.75em 0;
		border-bottom: 0.0625em solid #cccccc;
	}

}


/*zweispaltiges layout ist faktisch 612px breit*/
@media only screen and (max-width: 612px) {	

	#navskip p a:hover, 
	#navskip p a:focus, 
	#navskip p a:active {
    position: absolute;
	left: 101.5em;
    top: 100em;
	z-index: 100;
	}

	div#wrapper { 
		width: 94%; 
		max-width: 460px; /*480 abzgl scroll*/
		min-width: 220px;
		margin: 0; /*wichtig wg raendern*/
	}	


	div#inner {
		border-left: 0;
		width: 100%; 
		max-width: 460px; /*480 abzgl scroll*/
		min-width: 220px;
	}
			
	header {
		width: 100%; 
		max-width: 450px; /*480 abzgl scroll abzgl raender */
		min-width: 210px;
		margin: 0 0.625em 0 0.625em;
		padding: 0.625em 0 0.625em 0;
		border-bottom: 0;
	}

	
	div#logo {
   		 margin: 0 0 0 0;
	}
	
	header figure {
		display: none;
		}


	div#main {
		width: 100%; 
		max-width: 450px; /*480 abzgl scroll abzgl raender */
		min-width: 210px;
		margin: 0 0.625em 0 0.625em;
	}

	.textspalte,
	.impressumtext {
		width: 100%;
	}

	section.referenz figure {
		width: 100%;
	}

	
	nav	{
		width: 100%; 
		max-width: 450px; /*480 abzgl scroll abzgl raender */
		min-width: 210px;
		margin: 0 0.625em 0.625em 0.625em;
	}

	nav ul, nav ul li {
     	text-align: left;

	}


	nav ul li a,
	nav ul li.navhier,
	nav ul li.mitsubnav {
     	padding: 0.375em 0 0.375em 0.5em;
	}

	nav ul li.navhier, nav ul li.mitsubnav,nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
    	background: url("") no-repeat #b0003c;
    	color: #ffffff;
	}

	nav ul li ul {
		display: inline;
		margin:  0;
		background-color: transparent;
	}

	nav ul li ul:before {
		content: ": ";
	}

	nav ul li.mitsubnav ul li {
    	display: inline;/* kein float!*/
		border: 0;	
		border-right: 0.0625em solid #ffffff;
		background-color: #b0003c;
    	color: #ffffff;
	}

	nav ul li ul li a {
    	display: inline;
		padding: 0 0.5em 0 0.4em;
		color: #ffffff;
	}

	nav ul li ul li a:focus, nav ul li ul li a:hover, nav ul li ul li a:active {
		color: #ffffff;
		text-decoration: underline;
	}

	nav ul li.mitsubnav ul li a.subnavhier {
		color: #ffffff;
		font-weight: bold;
	}
	
	h1 {
	font-size: 1em;
	line-height: 140%;

	}

}