@charset "utf-8";

body {
	line-height: 1.4;
	font-size: 13pt;
	font-family: "Century Gothic";
	background-color: #f5f5f5;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}


h1 {
	font-size: 45px;
}
h2 {
	font-size: 32px;
}
h3 {
	font-size: 28px;
}
h4 {
	font-size: 26px;
}
h5 {
	font-size: 18px;
}
h6 {
	font-size: 14px;
}

@media only screen and (max-width: 490px) {
h1 {
	font-size: 35px;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 26px;
}
h4 {
	font-size: 26px;
}
h5 {
	font-size: 16px;
}
h6 {
	font-size: 14px;
}
}



a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
	border: none;
}
/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
	color: #888;
	text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none;
}
/* ~~ Dieser Container fester Breite umgibt alle anderen Blockelemente. ~~ */
.container {
	background-color: #f5f5f5;
	margin: 0 auto;
}
.content {
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
}

.content_inhalt{
/*	text-align:left;
	padding-left:50px;
	padding-top:50px;
	padding-bottom:150px;
	background-color:#eee;
	clear:both;
*/
}
@media only screen and (max-width: 490px) {

	.content_inhalt{
		padding-left:20px;
	}
}


/* ~~ Fußzeile ~~ */
footer {
	position: relative;/* Liefert "hasLayout" für Internet Explorer 6, zum korrekten Rücksetzen der schwebenden Ausrichtung. */
	clear: both; /* Diese "clear"-Eigenschaft ermöglicht es dem .container-Block, das Ende der Spalten zu erkennen und sie korrekt zu umschließen. */
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. ~~ */
header {
	background-color: #f5f5f5;
	margin-left: auto;
	margin-right: auto;
	max-width: 1280px;
	min-width: 260px;
	min-height: 70px;
	height: 170px;
}


@media only screen and (max-width: 490px) {
	header {
	height:inherit;
	position:relative;
	}
}


/*Unterstützung für HTML5 - Legt für die neuen HTML5-Tags die Eigenschaft "display:block" fest, damit die Tags in den Browsern korrekt dargestellt werden. */
header, section, footer, aside, article, figure {
	display: block;
}

#header_logo_oben    {
	width: 120px;
	height: 75px;
	background-repeat: no-repeat;
	background-image: url(bilder/loehnert_logo.png);
	float: none;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#header_logo_unten    {
/*	width: 120px;
	height: 75px;
	background-repeat: no-repeat;
	background-image: url(bilder/loehnert_logo.png);
	float:;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto; */
	display: none;
}


@media only screen and (max-width: 490px) {
	#header_logo_oben    {
	width: 80px;
	height: 50px;
	background-repeat: no-repeat;
	background-image: url(bilder/loehnert_logo.png);
	background-size: auto 70%;
	background-position: 50% 50%;
	float: left;
	margin-top: 10px;
	margin-left: 10px;
	z-index: 100;
	position:absolute;
	
	display: non;
	}
}



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



#nav_container{
/*	position: relative;
	font-size: 14px;
	height: 100px; */
	margin-left:auto;
	margin-right: auto;
	float: none;
	width:auto;
	width: 100%;
	padding-top: 10px;
	z-index: 200;
}

@media only screen and (max-width: 490px) {
	#nav_container{
		padding-top: 0;
		position: relative;
	}
}



/* ---------------- ENDE NAVIGATION ------------------ */


#sliderbox {
	/*background-color: #FFAE00;*/
	background-image: url(bilder/lisrt_schriften_hintergrund.png), -webkit-linear-gradient(270deg,rgba(255,201,95,1.00) 0%,rgba(248,170,17,1.00) 100%);
	background-image: url(bilder/lisrt_schriften_hintergrund.png), linear-gradient(180deg,rgba(255,201,95,1.00) 0%,rgba(248,170,17,1.00) 100%);
}
@media only screen and (max-width: 490px) {
	#sliderbox {
		max-height: 333px;
		position:relative;
		float:left;
	}
}


#slider {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.Kapitel {
	background-color: #f5f5f5;
	margin-left: auto;
	margin-right: auto;
	padding-top:40px;
	padding-bottom:50px;
	max-width: 1280px;
/*	border-bottom: medium solid #ffbf40;  */
	text-align: left;
	min-height: 280px;
	clear: left;
}
.Kapitel_Uberschrift {
	padding-top: 0px;
	width: 80%;
		
}
.Kapitel_text {
	padding-bottom: 0px;
	width: 80%;
}
@media only screen and (max-width: 490px) {
	.Kapitel{
		padding-bottom:50px;
	}
	.Kapitel_Uberschrift {
		font-size:28px;
		padding-top: 0px;
		margin-right: 20px;
		margin-left: 20px;
		width: auto;
		
	}
	.Kapitel_text {
		margin-top: 40px;
		margin-right: 20px;
		margin-left: 20px;
		margin-bottom: 0px;
		width: auto;
	}
}




#Kapitel1{
	background-position: 95% 10%;
	background-size: 20% auto;
}
#Kapitel1_Uberschrift{
	display:none;
}
#Kapitel1_Uberschrift_getrennt{
	display: block;
	line-height: 1.1;
}


@media only screen and (max-width: 490px) {
	#Kapitel1{
	background-position: 95% 7%;
	background-size: 20% auto;
	}

}



/* einsatzgebiete------------------------------------------------------- */

#Kapitel2{
	background-size: 28% auto;
}
#Kapitel2_Uberschrift{
	margin-left:37%;
	width: 60%;
}
#Kapitel2_text{
	margin-left:37%;
	width: 60%;
}
@media only screen and (max-width: 490px) {
	#Kapitel2{
	background-size: 20% auto;
	background-position: 97% 0%;
	}
	#Kapitel2_Uberschrift{
		margin-left:20px;
		width: auto;
	}
	#Kapitel2_text{
		margin-left:20px;
		width: auto;
	}
}



/* einfache erstellung------------------------------------------------------- */


#Kapitel3{
	background-position: 98% -10%;
	background-size: 28% auto;
}
@media only screen and (max-width: 490px) {
	#Kapitel3{
	background-position: 98% -2%;
	background-size: 22% auto;
	}
}



/* parallele abläufe------------------------------------------------------- */
#Kapitel4{
	background-position: 3% -7%;
}

#Kapitel4_Uberschrift{
	width:55%;
}
#Kapitel4_text{
	width:55;
}
@media only screen and (max-width: 490px) {
	#Kapitel4{
	background-size: 25% auto;
	background-position: 96% -1%;
	}
	#Kapitel4_Uberschrift{
	margin-left:20px;
	width:auto;
	}
	#Kapitel4_text{
	margin-left:20px;
	width:auto;
	}
}



/* wiederverwendbarkeit------------------------------------------------------- */



@media only screen and (max-width: 490px) {
	#Kapitel5{
	background-size: 20% auto;
	}
}



/* Lizenzmodell ------------------------------------------------------- */



@media only screen and (max-width: 490px) {
	#Kapitel6{
	background-size: 20% auto;
	background-position: 96% -1%;
	}
	#Kapitel6_Uberschrift{
	margin-left:20px;
	width:auto;
	}
	#Kapitel6_text{
	margin-left:20px;
	width:auto;
	}
}



/* beratung ------------------------------------------------------- */

#Kapitel7_Uberschrift{
	width:55%;
}
#Kapitel7_text{
	width:;
}



@media only screen and (max-width: 490px) {
	#Kapitel7{
	background-size: 20% auto;
	}
	#Kapitel7_Uberschrift{
	width:70%;
	}
}



/* ------------------------------------------------------- */
@media only screen and (max-width: 490px) {
	#Kapitel8{
	background-size: 20% auto;
	}
}




/* ------------------------------------------------------- */

@media only screen and (max-width: 490px) {
	#Kapitel9{
	background-size: 20% auto;
	}
	#Kapitel9_text{
		width: auto;
}

}

/* ---------------- ENDE Kapitel ------------------ */







/* ---------------- details ------------------ */

.details {
	padding-left: 30px;
}

/* ---------------- box 1 ------------------ */


.details_box1_themakasten{
	width: 100%;
	float:none;
	margin: 0 0px 0 0;
}

.details_box1_uberschrift{
	margin-left: 0px;

}

.details_box1_text{
	margin-left: 0px;
}




/* ---------------- Klassen box 2 und 3 ------------------ */

.details_box{
/*	padding-left: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 0px;*/
}

.details_box_thema{
	font-size: 24pt;
/*	margin-top: 50px;
	margin-bottom: 30px;*/
}

.details_box_uberschrift{
/*	color:#ffbf40;*/
}

.details_box_text_uberschrift{
/*	font-size:15pt;
	font-weight:bold;
	width: ;	
	line-height:1.2;
	margin-bottom: 10px;*/
}

.details_box_text{
	width: 70%;
/*	margin-right: 60px;
	margin-bottom: 30px;
	display: inline-block;
	vertical-align:top;*/
}



@media only screen and (max-width: 490px) {
	.details_box_text{
		width: 95%;
		/*margin-right: 10px;
		margin-bottom: 30px;
		display: inline-block;
		vertical-align:top;*/
	}
}


/* ---------------- ENDE Klassen box 2 und 3 ------------------ */

/* ---------------- ENDE details ------------------ */






/* ----------------------- Fußzeile --------------------- */
#Inhaltsverzeichnis{
}

#Inhaltsverzeichnis_block{
}

#Inhaltsverzeichnis_block a{
}

#Inhaltsverzeichnis_text{
}


@media only screen and (max-width: 490px) {
	
	#Inhaltsverzeichnis{
		display:block;
		padding-left:0px;
		margin-bottom: 50px;

	}

	#Inhaltsverzeichnis_block{
		width:250px;
		padding-right:0px;
		margin-top:50px;
		margin-left:auto;
		margin-right:auto;
		display:block;
		
		/*
		margin-top: 20px;
		width: 230px;
		float:left;
		
		padding-right:70px;
		padding-bottom:20px;*/
	}

	#Inhaltsverzeichnis_block a{
	}
	
	#Inhaltsverzeichnis_ueberschrift{
		font-size: 150%;
	}

	#Inhaltsverzeichnis_text{
		padding:5px 0 5px 0;
		font-size:120%;
	}
}
/* ---------------- ENDE Inhaltsverzeichnis ------------------ */


/* ---------------- Adresse ------------------ */
address {

}
address ul{

}
address ul li{
}

@media only screen and (max-width: 490px) {
	address {
		margin-left:auto;
		margin-right:auto;
		padding-left:0px;
		width:250px;
	}
	address ul li{
		padding-right:0px;
		width: 100%;
		display:inline-block;
	}
}
/* ---------------- ENDE Adresse ------------------ */

/* ----------------------- ENDE Fußzeile --------------------- */






/* ---------------- Unternehmen ---------------------*/


#unternehmen{

}



@media only screen and (max-width: 490px) {
#unternehmen_bild{
	float: none;
	width: 100%;
	height: 0;
	padding-bottom:55%;
	background-image: url(bilder/mitarbeiter.png);
	background-repeat: no-repeat;
	background-size: 99% auto;
	background-position: 100% 0%;
	position: relative;
}
}


#firmengeschichte_box{
	width: 100%;
	margin-left:auto;
	margin-right:auto;
	float: none;
	margin-bottom:70px;
	}

#firmengeschichte{
	width: 100%;
	padding-right: 30px;
	position:relative;
	float:none;
	}

#iso_logo{
	width: 40%;
	padding-bottom: 40%;
	
/*	
	height: 0;
	
	margin-top:20px;
	margin-bottom:20px;
	background-image:url(bilder/zertlogo_9001_2008.png);
	background-repeat: no-repeat;
	background-size: 99% auto;
	background-position: 0% 50%;
*/
}
	
	
	
/* ---------------- ENDE Unternehmen ---------------------*/




/* --------------------- Kontakt -------------------------*/

#kontakt_content{
	width: 100%;
	float: none;
}

#kontakt{
	float:none;
	margin-bottom:50px;
	width:90%;	
	padding-right:0px;
/*	position:relative;
	
*/
}

#standort{
	width: 90%;
/*	float:left;
	position:relative;
	margin-bottom:50px;
*/
}


#google_maps{
	/*padding-top:50px;*/
}


/* --------------------- ENDE Kontakt -------------------------*/




/* --------------------- download -------------------------*/


#download_software{
	float:none;
	width:90%;
	margin-bottom:80px;
}

#download_software_link{
	
/*	height:50px;
	width:320px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	margin-top:30px;
	margin-bottom:30px;
	background-image:url(bilder/download2.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:auto 100%;
*/
}

@media only screen and (max-width: 490px) {
	#download_software_link{
		height:50px;
	
	}
}


#download_datenblatt{
	float:none;
	width:90%;
/*	
	
*/}
#download_datenblatt_link{
/*	width:100px;
	height:100px;
	margin-left:30%;
*/
}


/* --------------------- ENDE download -------------------------*/


/* ---------------- telefon-service ---------------------*/
#telservice{
	text-align:left;
}

#telservice_inhalt{
}
#telservice_inhalt2{
}

#telservice_button{
}


@media only screen and (max-width: 490px) {
	#telservice{
		display:none;
	}
	
	#telservice_button{
		display:none;
	}

	#telservice_inhalt{
		font-size: 13pt;
	}
	
	#telservice_inhalt2{
		font-size: 13pt;
		padding-bottom:px;
	}

}




/* ---------------- ENDE telefon-service ---------------------*/