/* Farben
 * Rot rgb(180,0,20)
 * Dunkelgrau rgb(85,85,85)
 * Hellgrau rgb(210,210,212)
 * sehr helles Grau rgb(245,245,246)
 */

/* Seitenaufteilung in 7
 * col1 = 14.2857%
 * col2 = 28.5714%
 * col3 = 42.8571%
 * col4 = 57.1429%
 * col5 = 71.4286 %
 */

/* Größenangaben
 * als Standard wird 1 em = 18 px angenommen
 * Andere Größenverhältnisse funktionieren auch, dann werden die Grafiken allerdings skaliert
*/

/* ALLGEMEINES --------------------------------------------------------------------------------*/
*
{	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0em;
	padding:0em;
}
ul 
{
	list-style-type: none;
}
header, footer, main, aside, article, nav /* Normalisieren der default CSS-Browser-Einstellungen*/
{
	display:block;
}

/* Auf einem NORMALEM LAPTOPBILDSCHIRM ----------------------------------------------------
   oder wenn der Browser auf einem großen Screen nicht als Vollbild geöffnet wird ---------*/
   
/* LAYOUT*/
#breitenTest{width:800px; background-color: green;}

header
{
	/* 3:5 Verhältnis zu nav */
	margin-left: 14.2857%;
	height:24em;
	width: 57.1429%;
}

#firmenname
{
	padding-top: 6em;
}

#name /* span, damit die Hintergrundfarbe nur direkt um die Beschriftung zu sehen ist. */
{
	padding: 0.5em;
	background-color: rgb(210,210,212);
	font-size: 1.43em; /* 1.1*1.3 um es an die h1 anzupassen. */
	font-weight: bold;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#logoContainer_oben
{
	margin-top: 11.77em;
	padding-right: 0.2em; /* gleicht die border-breite in der main aus, so dass die beiden Logoteile aufeinander passen */
	width: 100%;
	text-align: right;
}

#logoContainer_unten
{
	width: 100%;
	text-align: right;
}

main
{
	float:left;
	margin-left:14.2857%;
	width:57.1429%; /* col:4 */
	border-left: 0.2em solid rgb(180,0,20);
	border-right: 0.2em solid rgb(180,0,20);
	border-top: 0.2em solid rgb(180,0,20);
	border-bottom: none;
	background-color: rgb(245,245,246);
}

#asideInfo
{
	float:left;
	width:28%;	/* col:2 */
	padding-left: 1em;
	padding-right: 1em;
}
#standort
{
	margin-bottom: 3em;
	padding: 0.3em;
	/*background-color: rgb(210,210,212);*/
	/*color: rgb(85,85,85);*/
	color: rgb(245,245,246);
	font-size: 0.8em;
	letter-spacing: 0.075em;
}

body > footer
{	
	clear:both;
	width:100%;
	border-top: 0.3em solid rgb(85,85,85);
	padding-top: 3em;
	background-color: rgb(210,210,212);
	color: rgb(85,85,85);
	font-size: 0.8em;
	text-align: center;
}

body > footer > *
{
	padding-left: 3em;
	padding-right: 3em;
}

#background
{
	display: block;
	position: absolute;
	top: 2.5em;
	left: 0em;
	z-index: -1;
	width: 100%;
	height: auto;
}

#backgroundPic
{
	position: absolute;
	left: 0em;
	top: 45em;
	width: 14.2857%;
	padding-left: 1em;
	padding-right: 1em;
}

#backgroundPic > p, #backgroundPic > ul
{
	margin-bottom: 1.5em;
	font-size: 0.8em;
}
#backgroundPic > h2
{
	font-size: 0.8em;
	font-weight: bold;
}

/* TYPO FÜR ALLE -----------------------------------------*/

@font-face{font-family: kippCI; src: url(../typo/ITCFranklinGothicStd-Book.otf) format(opentype);}
@font-face{font-family: kippCI; src: url(../typo/ITCFranklinGothicStd-Demi.otf) format(opentype); font-weight: bold;}
@font-face{font-family: kippCI; src: url(../typo/ITCFranklinGothicStd-BookIt.otf) format(opentype); font-style: oblique;}
@font-face{font-family: kippCI; src: url(../typo/ITCFranklinGothicStd-DemiIt.otf) format(opentype); font-weight: bold; font-style: oblique;}

body
{
	background-color: rgb(210,210,212);
	color: rgb(85,85,85);
	font-family: kippCI, arial;
	font-weight:normal;
	line-height: 1.7em;	
}

a 
{
	color: rgb(85,85,85); 
	text-decoration: underline;
}
a:visited {color: rgb(210,210,212);}
a:hover {color: rgb(180,0,20);}

/* TYPO NAVIGATION --------------------------------------*/

#navFacility
{
	float: left;
	width:14.2857%;
}
#navFacility li 
{
	display:inline-block;
	white-space: nowrap;
	overflow-x: visible;
}
#navFacility li a 
{
	padding: 0.3em 1em;
	margin-left: 0.2em;
	margin-right: 0.2em;
	
	text-decoration: none;
	color: rgb(245,245,246);
}
#navFacility li a:link {background-color: rgb(180,0,20);}
#navFacility li a:visited 
{
	background-color: rgb(180,0,20); 
	font-style: oblique;
}
#navFacility li a:hover {background-color: rgb(85,85,85);}

#navTargetgroup
{
	clear:both;
	position:absolute;
	left:0em;
	top:32em;
	width:14.2857%;/* col:1*/
}
#navTargetgroup li a 
{	
	display:block;
	width:100%;
	border-bottom: 0.2em solid rgb(210,210,212);
	padding-top: 0.25em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	color: rgb(245,245,246);
	font-size: 0.8em;
	letter-spacing: 0.075em;
	text-decoration: none;
}
#navTargetgroup li a:link 
{
	border-left: 0.5em solid rgb(85,85,85); 
	background-color: 
	rgb(180,0,20);
}
#navTargetgroup li a:visited 
{
	border-left: 0.5em solid rgb(180,0,20); 
	background-color: rgb(180,0,20); 
	font-style: oblique;
}
#navTargetgroup li a:hover 
{
	border-left: 0.5em solid rgb(85,85,85); 
	background-color: rgb(85,85,85);
}

#navMain
{
	position:fixed;
	height: 3.5em;
	width:100%;
	padding-left: 14.2857%;
	background-color: rgb(180,0,20);
	color: rgb(245,245,246);
	font-size: 0.8em;
}
/* Primäres Level */
#navMain > ul 
{
	margin-right: 1em;
	width:100%; 
	height:100%;
	white-space: nowrap;
	overflow-x: visible;
}
#navMain > ul > li
{
	display: inline-block;
	position: relative;
	margin-left: 0.7em;
	height:100%;
	border-top: 0.8em solid rgb(85,85,85);
	padding-bottom: 1em;
	padding-top: 0.3em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
	letter-spacing: 0.075em;
	white-space: nowrap;
}
#navMain > ul > li:hover 
{
	background-color: rgb(85,85,85);
}
/* Sekundäres Level */
#navMain li ul 
{
	display:block;
	position: absolute;
	top: 2.7em;
	left: 0em;
	width:13em;
	border-top: 0.16em solid rgb(245,245,246);
	background-color: rgb(85,85,85);
	/* unsichtbar machen (außer für screenreader) */
	font: 0/0 kippCI;
	z-index: -1;
}
#navMain li:hover ul 
{
	/* sichtbar machen */
	font: inherit; 
	z-index: auto;
}
#navMain li ul li 
{
	display: block;
	clear: both;
	width:100%;
	border-bottom: 0.2em solid rgb(245,245,246);
	background-color: rgb(180,0,20);
	font-size: 1em;
}
#navMain li ul li a
{
	display: block;
	width:100%;
	padding-bottom: 0.5em;
	padding-top: 0.3em;
	padding-left: 1.5em;
	text-decoration: none;
	color: rgb(245,245,246);
}
#navMain li ul li a:link 
{
	border-left: 0.5em solid rgb(85,85,85);
}
#navMain li ul li a:visited 
{
	border-left: 0.5em solid rgb(180,0,20); 
	font-style: oblique;
}
#navMain li ul li a:hover 
{
	border-left: 0.5em solid rgb(85,85,85); 
	background-color: rgb(85,85,85);
}


/* TYPO ARTIKEL -----------------------------------------*/

article 
{
	padding: 1.5em 2em 1.5em 2em;
	/* Gilt für den gesamten Artikel-Bereich, also Vorsicht mit Größenangaben */
	font-size: 1em;
}
article > footer
{
	margin-left:auto;
	margin-right:auto; 
	width:60%;
	font-size: 0.73em;
	font-style: oblique;
	text-align: center;
}
article > footer > hr
{
	color: rgb(180,0,20);
}
.readingP
{
	margin-bottom: 1.5em;
	width: 100%;
}

.shortTextP
{
	margin-bottom: 1.5em;
	width: 100%;
}

.readingUl
{
	margin: 0em;
	padding: 0em;
	padding-bottom: 1em;
	list-style-position: inside;
	list-style-type: square;
}

h1
{
	padding-bottom: 1.5em;
	font-size: 1.3em;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
}
img.zeichenH
{
	margin-right: 0.5em;
	vertical-align: middle;
}
h2
{
	font-weight: bold;
	font-size: 1em;
}

/* TYPO MARGIN-----------------------------------------*/

/* In jedem Zustand gültig. */
aside
{
	float: left;
	margin-bottom: 1em;
	max-width: 22em;
	border: 0.2em solid rgb(180,0,20);
	padding: 0.75em 0.75em 1.5em 0.75em;
	background-color: rgb(85,85,85);
	color: rgb(245,245,246);	
}

.asideP {font-size:0.8em;}

.asideH1 
{
	font-size:1.1em;
	padding-bottom: 0em;
}

/* BILDER, BILDGALERIE ---------------------------------------------*/

.picGallery
{
	margin-bottom: 1.5em;
	width:100%;
	padding: 1em 1em 2em 1em;
	background-color: rgb(85,85,85);
}
h1.picGaleryH1
{
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	color: rgb(245,245,246);
	font-size: 1em;
}
p.picGaleryP
{
	color: rgb(245,245,246);
}
/* Dieser Teil sollte auch ohne eine Bildgalerie funktionieren. */

figure {width:100%;}
figure > img
{
	width:100%;
	height: auto;
	max-width: 800px;
}
figure.mitarbeiter > img
{
	width:300px;
	height: auto;
}
figcaption
{
	max-width:40em;
	border-left: 0.1em solid rgb(245,245,246);
	padding-left: 0.5em;
	background-color: rgb(85,85,85);
	color: rgb(245,245,246);
	font-size: 0.98em; /* kompensiert die inverse Schrift, die sonst zu groß und zu breit wirkt. */
}
/* Auswahl, Thumbs */
ul.ulThumb 
{
	margin-bottom: 1em;
	width:100%;
}
li.liThumb
{
	display: inline-block;
	margin-right: 0.2em;
}
li.liThumb img
{
	width:5em;
	height: auto;
	border: 0.1em solid rgb(210,210,212);
}
li.liThumb img:hover
{
	border: 0.1em solid rgb(180,0,20);
	cursor: pointer;
}

/* TYPO SPECIAL CASES ----------------------------------*/

#kontakt
{
	float:left;
	width:42.8571%;
	font-weight: bold;
	font-style: oblique;
	letter-spacing: 0.075em;
}
.adressIcon
{
	margin: 0em 0.2em;
}
.block
{
	white-space: nowrap;
}
#leistungskatalog
{
	float:left;
	width:42.8571%;
	font-weight: bold;
	font-style: oblique;
	letter-spacing: 0.075em;
}
#leistungskatalog li
{
	display:inline-block;
	padding: 0em 0.25em;
	white-space: nowrap;
}
#untererSeitenrand 
{
	clear: both;
	width:100%;
	height:0.5em;
}

.bildAbdecken
{
	padding: 0.5em 0.3em;
	background-color: rgb(210,210,212);
}

/* Für MOBILE GERÄTE ---------------------------------------------------------------------------*/
@media only screen and (max-width:800px)
{
	/* Alle Elemente über gesamte Breite 
	 * Asides unter dem Text einbringen als nachladbarer Bereich
	 * Kleineres Logo verwenden.
	 * footer: Leistungen ausblenden?
	*/
	#navMain, header, main
	{
		clear: both;
		margin: 0em;
		width: 100%;
		padding: 0em;
	}
	#navTarget
	{
		position: ;
		width: 100%;
	}
	#asideInfo
	{
		clear: both;
		width: 100%;
	}
	aside
	{
		max-width: 100%;
	}
}

/* Auf besonders GROSSEN BILDSCHIRMEN im Vollbildmodus ---------------------------------------- */
@media only screen and (min-width: 95em)
{
	/* größeres Logo verwenden
	 * insgesamt größere Bilder verwenden
	 */
	header
	{
		height:30em;
	}
	#backgroundPic
	{
		top: 51em;
	}
	#logoContainer_oben
	{
		margin-top:17.78em;
	}
	#navTargetgroup
	{
		top:38em;
	}
	.readingP
	{
		-moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
	}
}