@charset "utf-8";
@import url(fonts.css);

/*=== Für CMS Debugausgaben ===*/
.cms4d_odebug{
	color:rgb(0,0,0);
	background-color:white;
	font-family:Verdana;
	font-size:11px;
	text-align:left;
	padding:10px;
	float:left;
	clear:both;
	width:100%;
}
.cms4d_odebug h1{
	color:rgb(0,0,0);
	font-size:16px;
	text-indent:0px;
	background-image:none;
}
.cms4d_odebug pre{
	color:rgb(0,0,0);
	font-family:Verdana;
}


/*========== 30.07.2014, dogan ===============*/
html{
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:none;
	-moz-text-size-adjust:none;

	width:100%;
	min-width:100%;
	float:left;
	clear:both;
}
body{
	color:rgb(102,102,102);
	background-color:rgb(62,171,160);
	margin:0;
	padding:0;

	font-family:sourcesanspro_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	font-size:18px;

	width:100%;
	min-width:100%;
	float:left;
	clear:both;

	background-image:url(images-wd/body-bg.png);
	background-position:left top;
	background-repeat:repeat-x;
}


@media print{
	body{
		color:black;
		background-color:white;
		text-align:left;
		margin:0;
		padding:0;
	}
}
/*IE Tabellenfehler*/
table{
	font-size:1em;
}



/*========= Layout Seite ==========*/
@media screen, projection{

	.page_container{
		max-width:1024px;
		margin:0 auto;
		position:relative;
		/*Wird für alle Browser, die mediaqueries unterstützen unten aufgehoben.*/
		min-width:1024px;
	}
		.page_container2{
			width:100%;
			float:left;
			clear:both;
			position:relative;
			padding-bottom:40px;
		}
			/*Dieser Container liefert die weiße Hintergrundfarbe für die Inhalte und insgesamt den Schlagschatten. Nur der head-Berreich liegt außerhalb direkt unter page_container2*/
			.inner_page_container{
				width:100%;
				float:left;
				clear:both;
				position:relative;
				background-color:white;
				-webkit-box-shadow:5px 5px 10px 0px rgba(0,0,0,0.2);
				box-shadow:5px 5px 10px 0px rgba(0,0,0,0.2);
				padding-top:30px;
				/*BEACHTE: außer auf der Startseite in der Desktopansicht, muss .head_row .inner_page_container immer im zIndex überlagern. Ansonsten kann
				das nach unten heraushängende Logo den .inner_page_container nicht optisch überschneiden.
				Bei Startseitenlayout gibt es allerdings die Ausnahme, dass hier die Stele mit dem Logo nach oben aus .inner_page_container herausragt und
				nun umgekehrt .inner_page_container .head_row im zIndex überlagern muss. Dies führt in der Normalkonstellation leider dazu, dass der Hyperlink (Home) auf dem Logo
				dann nur teilweise, nämlich im unteren Bereich anklickbar ist. Der obere Bereich wird von .head_row überdeckt, so dass nur der IE auch dort einen Click auswertet.
				Hier wird also zunächst der Standardfall definiert, wonach .inner_page_container einen kleineren zIndex hat als .head_row und .fmenu0_row (WICHTIG).
				Nur für die Startseite und nur für viewports > 1024 wird dann eine andere z-Reihenfolge definiert. s.a. unten vieport 1024.*/
				z-index:550;
			}
				body.page-start .inner_page_container{
					z-index:750;
				}
				.row, .floater{
					width:100%;
					float:left;
					clear:both;
					position:relative;
					-webkit-box-sizing:border-box;
					-moz-box-sizing:border-box;
					box-sizing:border-box;
				}
				.hpad_1{
					padding-left:30px;
					padding-right:30px;
				}


	/*==================== A U F B A U =================*/
	/*Die Startseite stellt bezgl. des Kopfbereiches einen absoluten Sonderfall dar. Der Aufbau ist mit der Logo-Stele links ziemlich komplex.
	Die Preistabelle wird hier als echte TABLE angezeigt und passt sich ab <= 1024 der Höhe des rechts stehenden Sliders an.
	Das Layout der anderen Inhaltsseiten hat einen einfacheren Aufbau:
	-	Das topmenu und Kopfbild/Slider dehnen sich über 100% der Layoutbreite aus, und das Kopfbild bestehend aus
		Bildcollagen von 2-3 Fotos ist deutlich niedriger als auf der Startseite.
	-	Die Preistabelle wird als floatende Boxen unterhalb der top_row angezeigt und geht bei kleineren Viewportbreiten von 4 zu 2 zu 1 Spalte über.
	Dieses vereinfachte Layout soll aber auch weitgehend für die Startseite verwendet werden ab viewportbreiten < 1024. Ausnahme ist hier,
	dass auf der Startseite die Preitabelle bis zu viewport 664px links neben dem Kopfbild angezeigt wird.
	Erst ab viewport < 664px sehen sehen die Layouts für Startseite und normale Inhaltsseiten identisch aus.
	*/


	/*=== Kopf Logo, Slogan ===*/
	.head_row{
		height:100px;
		padding-left:30px;
		padding-right:30px;
		z-index:700;
	}
		.head_row img{
			display:block;
			max-width:100%;
			width:auto;
			height:auto;
			border:none;
		}
		.head_left{
			float:left;
			position:relative;
			padding:16px 0 0 20px;
			z-index:20;
		}
		.head_right{
			float:right;
			position:relative;
			text-align:right;
			font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
			font-size:28px;
			line-height:1.3em;
			color:white;
			text-shadow:3px 3px 4px rgba(0,0,0,0.1);
			padding:16px 30px 0 0;
			z-index:10;
		}
			.slogan_1{
				float:right;
				clear:both;
			}
			.slogan_2{
				float:right;
				clear:both;
			}
				.slogan_2 > span{
					float:left;
					margin-left:0.7em;
				}
					.slogan_2 > span:first-child{
						margin:0;
					}
				/*Jeder SPAN unterhalb von slogan_2 erhält ein Bullet*/
				.slogan_2 > span:before{
					/*icon-ok-sign*/
					content:'\e651';
					font-family:fontawesome_icons;
					margin-right:0.25em;
					color:rgb(255,224,0);
				}

	/*=== fmenu mobile ===*/
	.fmenu0_row{
		background-color:rgb(62,171,160);
		height:60px;
		z-index:600;
	}


	/*=== Topmenu, einfach nur Level 0 ===*/
	.topmenu_row{
		margin-left:30px;
		max-width:964px;
		height:60px;
		background-color:rgb(62,171,160);
	}
		.topmenu_container{
			padding-right:30px;
		}

	/*=== Kopfbild, Slider, Kraftstoffpreise... ===*/
	/*Das gesamte Kopflayout ist für die Desktopansicht zunächst absolute statisch festgelegt. Ab viewportbreiten <= 1024 wird das Layout
	komplett auf fluid umgestellt und die Kraftstoffpreis-Tabelle dehnt sich über die volle höhe aus. Logo und bestimmte andere Teile werden
	ausgeblendet und müssen durch doppelt vorhandene Elemente an andere Stelle angezeigt werden. s.u. @media 1024*/
	.top_row{
		width:964px;
		margin-left:30px;
		background-color:rgb(0,138,210);
		z-index:500;
	}
		.top_left{
			position:absolute;
			left:0;
			top:0;
			width:300px;
			height:100%;
			z-index:20;
		}
			/*--- Stele, Logo, Preistabelle desktop ---*/
			.stele_box{
				/*Dieser Container schneidet den box-shadow unten ab. Damit der Schatten rechts auf .right_col fallen kann, muss der Container breiter sein.*/
				position:absolute;
				width:330px;
				height:640px;
				left:0;
				top:-170px;
				overflow:hidden;
			}
				.stele{
					position:absolute;
					width:300px;
					height:680px;
					background:rgb(42,184,192) url(images-wd/stele-bg.png) no-repeat center top;
					-webkit-box-shadow:10px 10px 20px 0px rgba(0,0,0,0.2);
					box-shadow:10px 10px 20px 0px rgba(0,0,0,0.2);
				}
			.wdt_logo_start_desktop{
				position:absolute;
				left:35px;
				top:-135px;
			}
				.wdt_logo_start_desktop img{
					display:block;
					border:none;
				}
			
		.top_right{
			width:100%;
			float:left;
			position:relative;
			z-index:10;
		}
			/*Slider*/
			.topimg_pcontainer, .topimg_container{
				width:100%;
				float:left;
				clear:both;
				position:relative;
			}

	/*=== AUSNAHMEN ===*/
	/*--- Standard ---*/
	.top_left{
		display:none;
	}

	/*--- Start ---*/
	body.page-start .head_left{
		/*Das kleine Logo des fluid Layout wird für die Startseite erst ab 1024 eingeblendet*/
		display:none;
	}
	body.page-start .top_row{
		height:470px;
	}
		body.page-start .top_left{
			display:block;
		}
		body.page-start .top_right{
			float:right;
			width:664px;
		}







	/*=== hmenu, zentriert ===*/
	.hmenu_row{
		margin-left:30px;
		max-width:964px;
		z-index:400;
	}
		.hmenu_container{
			position:relative;
			line-height:0;
			text-align:center;
			background:rgb(62,171,160) url(images-wd/hmenu-bg.png) center center repeat-x;
		}
			.hmenu_center{
				display:inline-block;
				margin:0 auto;
				position:relative;
				line-height:1em;
				text-align:left;
			}


	/*=== Inhalt ===*/
	.content_row{
		padding-top:10px;
		z-index:300;
	}
		/*Breadcrumb oben/unten, nur mobile. s.u. viewport <= 1000px*/
		.bcmenu_top{
			/*etwas nach oben in den Schattenbereich der Kopfbildes ziehen*/
			/*margin-top:-15px;*/
			margin-bottom:10px;
			display:none;
		}
		.bcmenu_bottom{
			padding-top:10px;
			border-top:1px dashed rgb(204,204,204);
			margin-bottom:10px;
			text-align:center;
			display:none;
		}
		
			/*Auf Startseite nicht einblenden*/
			body.page-start .bcmenu_top, body.page-start .bcmenu_bottom{
				display:none;
			}

		.content_container{
		}
			/* 1) Standardlayout: center_col über volle Breite, left_col ausgeblendet.*/
			.center_col{
				width:100%;
				float:left;
				position:relative;
				z-index:10;
			}
			.left_col{
				width:25%;
				float:left;
				margin-right:-100%;
				position:relative;
				padding-bottom:40px;
				display:none;
				z-index:20;
			}
			/* 2) Standardlayout mit Submenu: left_col feste Breite, center_col floatet im verbleibenden rechten Raum.*/
			body.smenu_lvl_1 .left_col{
				display:block;
			}
			body.smenu_lvl_1 .center_col{
				/*.left_col räumt mit margin-right:-100% den Raum rechts komplett frei, so dass .center_col nach oben rutschen kann.
				Damit die Textinhalte .left_col aber nicht überdecken, erhält .center_col ein padding-left in der gleichen Breite wie .left_col+spaltenabstand*/
				padding-left:28.2%;
			}
				body.smenu_lvl_1 .html_content{
				}



	/*Footermenus, Adresse, ...*/
	.footer_row{
		font-size:16px;
		line-height:1.2em;
		border-top:1px solid rgb(204,204,204);
		padding-top:17px;
	}
		.footer_headline{
			font-family:sourcesanspro_semibold, Arial, Helvetica, sans-serif;
			font-size:32px;
			line-height:1em;
			text-align:center;
			color:rgb(62,171,160);
			margin-bottom:17px;
		}

		/*Der Hintergrundverlauf einiger Boxen kommt aus der Zusatzklasse gradient_2_v. siehe HTML*/
		.footer_block{
			border-top:1px solid rgb(101,188,179);
			color:white;
			padding-top:1em;
			padding-bottom:1em;
			text-align:center;
		}
			.footer_block p{
				margin-bottom:1em;
			}
			.footer_block h1,
			.footer_block h2,
			.footer_block h3,
			.footer_block h4,
			.footer_block h5,
			.footer_block h6{
				color:inherit;
				font-size:1.25em;
				margin-bottom:0.5em;
			}


		.footer_controls_container{
			width:100%;
			float:left;
			clear:both;
			position:relative;
		}
			.footer_nav_container{
				width:100%;
				float:left;
				clear:both;
				position:relative;
			}
			.footer_controls{
				width:100%;
				float:left;
				clear:both;
				position:relative;
				text-align:center;
			}
				.footer_controls .btn{
					display:inline-block;
					margin-left:20px;
					padding:3px 0 5px 0;
					color:inherit;
				}
					.footer_controls .btn:first-child{
						margin-left:0;
					}
					.footer_controls .btn:before{
						font-family:'fontawesome_icons';
						padding-right:0.25em;
					}
						.footer_controls .btn.back:before{
							/*icon-arrow-left*/
							content:'\e658';
						}
						.footer_controls .btn.top:before{
							/*icon-arrow-up*/
							content:'\e65a';
						}
						.footer_controls .btn.print:before{
							/*icon-print*/
							content:'\e62a';
						}

		.footer_address{
			width:100%;
			float:left;
			clear:both;
			position:relative;
			color:inherit;
			padding-top:1em;
			padding-bottom:1em;
			word-break:keep-all;
			font-size:15px;
			text-align:center;
		}
			.footer_address a{
				color:inherit;
			}

}


@media print{
	html, body{
		background-color:white;
		background-image:none;
		/*Grundschrift normalisieren*/
		font-size:16px;
	}

	/*Allgemeine Klasse, um Elemente von der Druckausgabe auszunehmen*/
	*.noprint{
		display:none;
	}


	.head_container{
		display:none;
	}
	.top_container{
		display:none;
	}
	.topmenu_row{
		display:none;
	}
	.top_row, .top_img_row, .top_img_pcontainer, .top_img_container{
		display:none;
	}
		.top_img_row{
			width:100%;
			float:left;
			clear:both;
			padding-bottom:20px;
		}
		/*Slider Controls im Kopfbild ausblenden*/
		.top_img_row .cms4d_slider3_cbtn, .top_img_row .cms4d_slider3_ibtn_container, .slider0_ibtn_row{
			display:none;
		}
	.katmenu_row, .katmenu_outer_container, .katmenu_container{
		display:none;
	}
	.fmenu0_row{
		display:none;
	}
	.treemenu_container, .bcmenu_container, .katmenu_container, .submenu_container{
		display:none;
	}
	.left_col{
		display:none;
	}
	.right_col{
		display:none;
	}
	.content_container{
		background-image:none;
		padding:0;
		margin:0;
	}
	.bcmenu_top, .bcmenu_bottom{display:none;}

	.footer_address{
		width:100%;
		float:left;
		clear:both;
		border-top:1px solid black;
		padding-top:20px;
		font-size:12px;
	}
		.footer_address > span{
			display:inline-block;
		}
	.footer_controls_container, .footer_logos{
		display:none;
	}

	/*Startseite*/
	.kats1{
		display:none;
	}
}

/*--- Absatz-Formate ---*/
@media screen{
	pre{
		font-size:1em;
		clear:both;
	}

	p{
		line-height:1.45em;
		margin:0;
		padding:0;
		margin-bottom:1.8em;
	}
	/*Bei aufeinanderfolgenden Absätzen den Abstand zum Vorangehenden Absatz verringern*/
	p + p{
		margin-top:-0.5em;
	}

	h1, h2, h3, h4, h5, h6{
		color:rgb(62,171,160);
		font-family:sourcesanspro_semibold, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
		margin:0 0 0.5em 0;
		padding:0;
		font-weight:normal;
		font-size:1em;
		line-height:1.2em;
		/*Headlines im normalen Text immer clearen*/
		clear:both;
	}
	h1{
		margin-bottom:0.5em;
		font-weight:normal;
		font-size:1.8em;
	}
	h2{
		font-size:1.167em;
		margin-bottom:0.75em;
	}
	h3{
		font-size:1.083em;
	}
	h4, h5, h6{
		font-size:1em;
	}


	address{
		font-style:normal;
		font-size:0.8em;
		line-height:normal;
	}

	a{
		color:rgb(62,171,160);
		text-decoration:none;
	}
	.html_content a:hover{
		text-decoration:underline;
	}
	a:active, a:visited{
		text-decoration:none;
	}


	/*normale HR, alle ab IE7*/
	hr{
		height:1px;
		overflow:hidden;
		border:none;
		border-top:1px solid rgb(204,204,204);
		padding:0;
		margin:0 0 1.8em 0;
		clear:both;
		float:none;
	}
	/*hr gestrichelt*/
	hr.dashed{
		border-top:1px dashed rgb(204,204,204);
	}
	/*hr mit schlagschatten per bg-image*/
	hr.shadow{
		border:none;
		height:15px;
		background:url(images-wd/hr-shadow-down.png) no-repeat center top;
		background-size:contain;
	}

	/*fette Darstellung bei strong und b deaktivieren, da sonst der verwendete fette Schriftschnitt nochmals mit einer Outline gezeichnet wird.*/
	strong, b{
		font-family:sourcesanspro_bold, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
		font-weight:normal;
		/*Leider ist die Darstellung der gewünschten open_sans_regular mit Cleartype in großen Schriftgrößen ausgefranst.
		Deshalb kommt hier doch die opens_sans_semibld zum Einsatz. Die Schriftfarbe ist etwas heller als der Normaltext, damit die Schrift nicht ganz so schwer aussieht.*/
		color:rgb(90,90,90);
	}
		a strong, a b{
			color:inherit;
		}

}
@media print{
	h1{
		color:black;
		font-size:1.2em;
		margin:0 0 1em 0;
		padding:0;
		background-image:none;
	}
	h2{
		color:black;
		font-size:1.1em;
		margin:0 0 0.5em 0;
		padding:0;
		background-image:none;
	}
	h3, h4{
		color:black;
		font-size:1em;
		margin:0 0 0.5em 0;
		padding:0;
		background-image:none;
	}
	p{
		margin:0 0 1em 0;
		padding:0;
	}
}


/*--- IE8 Browser-Hinweis ---*/
.ie8_browser_notice{
	color:black;
	background-color:rgb(240,180,0);
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.2em;
	text-align:center;
	padding:10px;
}



/*==================== CMS4D GRID ====================*/
/*abweichender Spaltenabstand in diesem Projekt, für grid 964/32*/
div[class*=c4g_grid_]{margin-left:-32px;padding-bottom:32px;}
	div[class*=c4g_grid_] > div{border-width:32px;}
/*Durch die Zusatzklasse wird das padding unten herausgenommen*/
div[class*=c4g_grid_].no_padding_bottom{padding-bottom:0;}

/*Floatende Bilder im Inhaltstext mit den Standardklassen bild_links, bild_rechts.
Diese sollen nicht breiter als 50% sein, um ausreichend Raum für den text zu lassen.*/
.html_content img.bild_links, .html_content img.bild_rechts{
	max-width:50%;
}
	.html_content img.bild_links{
		margin:0 32px 10px 0;
	}
	.html_content img.bild_rechts{
		margin:0 0 10px 32px;
	}


/*=== Zentrale Verlaufsdefinitionen ===*/
/*Türkis nach Dunkelblau bzw. horizontal umgekehrt.*/
.gradient_1_h{
	background: #008ad2; /* Old browsers */
	background: -moz-linear-gradient(left,  #008ad2 0%, #2ab8c0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#008ad2), color-stop(100%,#2ab8c0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #008ad2 0%,#2ab8c0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #008ad2 0%,#2ab8c0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #008ad2 0%,#2ab8c0 100%); /* IE10+ */
	background: linear-gradient(to right,  #008ad2 0%,#2ab8c0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ad2', endColorstr='#2ab8c0',GradientType=1 ); /* IE6-9 */
}
.gradient_1_v{
	background: #2ab8c0; /* Old browsers */
	background: -moz-linear-gradient(top,  #2ab8c0 0%, #008ad2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ab8c0), color-stop(100%,#008ad2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2ab8c0 0%,#008ad2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2ab8c0 0%,#008ad2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2ab8c0 0%,#008ad2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2ab8c0 0%,#008ad2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab8c0', endColorstr='#008ad2',GradientType=0 ); /* IE6-9 */
}
/*Logo Grundfarbe nach Türkis dunkel bzw. horizontal umgekehrt.*/
.gradient_2_v{
	background: #3eaba0; /* Old browsers */
	background: -moz-linear-gradient(top,  #3eaba0 0%, #349188 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3eaba0), color-stop(100%,#349188)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #3eaba0 0%,#349188 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #3eaba0 0%,#349188 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #3eaba0 0%,#349188 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #3eaba0 0%,#349188 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3eaba0', endColorstr='#349188',GradientType=0 ); /* IE6-9 */
}
.gradient_2_h{
	background: #349188; /* Old browsers */
	background: -moz-linear-gradient(left,  #349188 3%, #3eaba0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(3%,#349188), color-stop(100%,#3eaba0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #349188 3%,#3eaba0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #349188 3%,#3eaba0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #349188 3%,#3eaba0 100%); /* IE10+ */
	background: linear-gradient(to right,  #349188 3%,#3eaba0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#349188', endColorstr='#3eaba0',GradientType=1 ); /* IE6-9 */
}


/*========= Kraftstoffpreis-Tabellen =========*/
/*Je nach übergeordneter Containerklasse werden bestimmte Textformate für beide Auflistungen gleich formatiert: ksp1 und ksp2*/
.ksp1, .ksp2{
	font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
	/*Alle inneren Schriftgrößen werden mit em relativ zur Basis Schriftgröße angelegt, so dass alle Inhalte auf einmal skaliert werden können.*/
	font-size:18px;
	line-height:1em;
}
.ksp1.ksp_box{
	position:absolute;
	width:100%;
	height:350px;
	left:0;
	bottom:0;
	overflow:hidden;
	color:white;
}
	/*Tabelle nur für Startseite*/
	.ksp1 .ksp_table_container{
		position:absolute;
		width:230px;
		height:270px;
		left:35px;
		bottom:60px;
		overflow:hidden;
		/*BEACHTE: leider kann der Hintergrundverlauf nicht über einen CSS gradient gesetzt werden, da IE9 dann spinnt und den Schatten nach innen nicht rendert.
		Deshalb hier über ein Hintergrundbild mit box-size.*/
		background:rgb(0,138,210) url(images-wd/ksp-box-bg.png) center top repeat-y;
		background-size:contain;
		-webkit-box-shadow:inset 10px 10px 20px 0px rgba(0,0,0,0.4);
		box-shadow:inset 10px 10px 20px 0px rgba(0,0,0,0.4);
		/*Oben padding, damit für erste TR mehr Raum bleibt*/
		padding-top:8px;
	}
		.ksp1 table{
			width:100%;
			height:100%;
			border:0;
			border-collapse:collapse;
		}
			.ksp1 tbody{
				width:100%;
			}
				.ksp1 tr{
					width:100%;
				}
					.ksp1 td{
						border:1px solid rgba(255,255,255,0.5);
						border-left-style:none;
						border-right-style:none;
						border-bottom-style:none;
						text-align:center;
						vertical-align:middle;
						padding:0;
						width:100%;
						/*In der Desktopansicht sind zunächst nur die Preise zu sehen. Die Datumsangabe wird bis 1024 ausgeblendet. Deshalb sind die TD hier zunächst 25% hoch.Später 22% s.u. media 1024*/
						height:25%;
					}
			.ksp1 tr:first-child td{
				border-top-style:none;
			}

	.ksp1 .ksp_item{
		width:100%;
		max-width:230px;
		display:inline-block;
		position:relative;
		line-height:1em;
		text-align:left;
		padding:5px 10px 10px 20px;
	}
		/*Innere Textformate für beide Erscheinungsformen*/
		.ksp1 .ksp_name, .ksp2 .ksp_name{
			float:left;
			position:relative;
		}
			/*Name: z.B. Normal*/
			.ksp1 .ksp_n1, .ksp2 .ksp_n1{
				width:100%;
				display:block;
				font-family:roboto2014_condensed_bold, Arial, Helvetica, sans-serif;
				/*Basis: 24px*/
				font-size:1.3333em;
				line-height:1em;
				text-shadow:2px 2px 4px rgba(0,0,0,0.2);
			}
			.ksp1 .sub, .ksp2 .sub{
				display:block;
				padding-top:7px;
			}
				/*Zusatz: z.B. bleifrei*/
				.ksp1 .ksp_n2, .ksp2 .ksp_n2{
					text-shadow:2px 2px 4px rgba(0,0,0,0.2);
				}
				/*Oktanzahl*/
				.ksp1 .ksp_n3, .ksp2 .ksp_n3{
					color:black;
				}
				/*OKTAN*/
				.ksp1 .ksp_n4, .ksp2 .ksp_n4{
					color:black;
					/*Basis: 8px*/
					font-size:0.4444em;
					line-height:1em;
					margin-left:-0.2em;
				}

		.ksp1 .ksp_preis, .ksp2 .ksp_preis{
			float:right;
			position:relative;
			/*Basis:40px*/
			font-family:roboto2014_condensed_bold, Arial, Helvetica, sans-serif;
			font-size:2.2222em;
			line-height:0.6em;
			text-shadow:3px 3px 4px rgba(0,0,0,0.2);
			padding-top:0.3em;
			white-space:nowrap;
		}
			/*1000er Stelle hochgestellt. Ist leider mit SUP-Element in den verschiedenen Browsern zu unterschiedlich. Deshalb Formatierung über untergeordneten SPAN*/
			.ksp1 .ksp_preis > span, .ksp2 .ksp_preis > span{
				font-family:roboto2014_condensed_light, Arial, Helvetica, sans-serif;
				/*Basis: 17px*/
				font-size:0.6em;
				line-height:1em;
				display:inline-block;
				position:relative;
				top:-0.55em;
				padding-left:0.2em;
			}
		/*Anmerkung letzte Preisänderung*/
		.ksp1 .ksp_n5{
			font-size:0.6em;
		}
		/*--- Ausnahmen ---*/
		.ksp1 .diesel .ksp_item{
			padding-top:0.6em;
			padding-bottom:0.8em;
		}
		.ksp1 .diesel .ksp_name{
			padding-top:0.25em;
		}
		.ksp1 .diesel .ksp_preis{
			padding-top:0.1em;
		}
		/*TR zunächst unsichtbar*/
		.ksp1 tr.ksp_datum{
			display:none;
		}
			.ksp1 .ksp_datum td{
				height:12%;
			}
		/*DIV zunächst sichtbar*/
		.ksp1 div.ksp_datum{
			position:absolute;
			bottom:22px;
			width:100%;
			text-align:center;
			font-size:13px;
			color:black;
			display:block;
			z-index:20;
		}
	/*--- Abweichungen für floatende Auflistung ---*/
	/*Das Layout ist ab <=1024 zunächst 4 spaltig und bricht sukzessive dann zu 2 spaltig und 1 spaltig um.
	Ab <= 644px wird dann auch für die Startseite immer nur noch die floatende Auflistung angezeigt.*/
	.ksp2.ksp_box{
		width:964px;
		float:left;
		clear:both;
		margin-left:30px;
		position:relative;
		overflow:hidden;
		color:white;
	}
		.ksp2 .ksp_items{
			width:100%;
			float:left;
			clear:both;
			position:relative;
			background-color:rgb(42,184,192);
		}
			.ksp2 .ksp_item{
				width:25%;
				float:left;
				position:relative;
				padding:0.35em 6px 0.6em 10px;
				border:1px solid rgba(255,255,255,0.5);
				border-right-style:none;
				/*border-bottom-style:none;*/
				border-bottom-color:rgba(0,0,0,0.2);
				min-height:3.8em;
			}
				.ksp2 .ksp_item:first-child{
					border-left-style:none;
				}
		.ksp2 .ksp_datum{
			width:100%;
			float:left;
			clear:both;
			position:relative;
			font-size:12px;
			color:rgb(153,153,153);
			text-align:right;
			padding:2px 5px 0 5px;
		}
	/*--- Ausnahmen ---*/
	body.page-start .ksp2{
		display:none;
	}




/*========= Flexbox 33/66 allgemein für Spaltenabstand 32px =========*/
.fbox_33_66, .fbox_33_66 *{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.fbox_33_66{
	/*1 Spaltenabstand nach links aus dem Container ziehen, um die Innenbreite des Containers auf die erforderliche Breite zu erhöhen.*/
	margin-left:-32px;
	position:relative;
}
	.fbox_33_66 a, .fbox_33_66 a:hover{
		text-decoration:none;
		color:inherit;
	}
	.fbox_33_66 img{
		display:block;
		border:none;
	}
	.fbox_33_66 p{
		line-height:inherit;
		margin-bottom:0;
	}
		.fbox_33_66 p+p{
			margin-top:0.8em;
		}
/*Layout:
- ist kein Bild vorhanden, so entspricht das Layout einer 100% Spalte.
- ist ein Bild vorhanden (.box_img+...), so entspricht das Layout einer Aufteilung von 33/66 mit 40px Spaltenbreite.
Im Layout liegen die 4 Standardcontainer direkt als Geschwister auf einer Ebene, so dass sie unabhängig voneinander
über die volle Breite gezogen werden können (.box_link).
*/
.fbox_33_66 .box_img{
	float:left;
	width:33.4%;
	/*rechts Platz freischaufeln, so dass die nachfolgenden floats nach oben rutschen können.*/
	margin-right:-100%;
	/*1 Spaltenabstand links*/
	border-left:32px solid transparent;
	position:relative;
	z-index:100;
}
	/*Ohne Bild -> Texte über volle Breite*/
	.fbox_33_66 .box_head, .fbox_33_66 .box_body, .fbox_33_66 .box_link{
		width:100%;
		float:left;
		clear:right;
		position:relative;
		/*1 Spaltenabstand links*/
		border-left:32px solid transparent;
	}
		/*Mit Bild -> Texte 33/66
		Hierbei sind die unterschiedlichen Position 1-4 beim Nachbarselektor + zu berücksichtigen - und, ob die Elemente überhaupt in der Reihenfolge vorliegen.*/
		.fbox_33_66 .box_img+.box_head, .fbox_33_66 .box_img+.box_body, .fbox_33_66 .box_img+.box_link,
		.fbox_33_66 .box_img+*+.box_body,
		.fbox_33_66 .box_img+*+*+.box_link{
			width:66.6%;
			/*Durch das relative Positionieren auf den Beginn der 2. Spalte überdecken sich die Element nicht.*/
			left:33.4%;
		}

	/*Alle Headlines in box_head*/
	.fbox_33_66 .box_head{
		margin-bottom:0.5em;
	}
	.fbox_33_66 .box_head > *:first-child{
		margin:0;
		/*Die Headlines haben tyischerweise größeren Raum über den Großbuchstaben (ÜÄ...). Dadurch bildet sich bei Inhaltsboxen ohne Bild, wo der Text direkt die Oberkante des
		Inhaltes darstellt ein optisch zu großer Raum bis zur Oberkante der Box. Deshalb werden die Headlines zunächst negativ nach oben gezogen.
		Sollte aber typischeerweise ein .box_img vorhanden sein, so stellt dieses die Oberkante des Inhaltes und die Headlines werden wieder in Normalposition gebracht.*/
		margin-top:-0.26em;
		/*WICHTIG: das standardmäßige clearen der Headlines wird aufgehoben, da dies den gewünschten Layoutfluss behindern kann.*/
		clear:none;
	}
		/*Wenn Bild vorhanden, normaler Raum über Headlines*/
		.fbox_33_66 .box_img+.box_head > *:first-child{
			margin:0;
			margin-top:0;
		}



/*=== Flexbox einspaltig allgemein ===*/
.fbox, .fbox *{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
	.fbox img{
		display:block;
		max-width:100%;
		width:auto;
		height:auto;
		border:none;
	}
	.fbox a, .fbox a:hover{
		color:inherit;
		text-decoration:none;
	}
	.fbox .box_head, .fbox .box_img, .fbox .box_body, .fbox .box_link{
		width:100%;
		float:left;
		clear:both;
		position:relative;
		line-height:inherit;
	}
	/*Headlines ohne margin*/
	.fbox .box_head *:first-child{
		margin:0;
	}
	.fbox p{
		line-height:inherit;
		margin-bottom:0;
	}
		.fbox p+p{
			margin-top:0.8em;
		}



/*=== boxen start Bonusprogrammer ===*/
.bonus_row{
	font-size:16px;
	line-height:1.2em;
}
	.bonus_row .box_head{
		text-shadow:2px 2px 4px rgba(0,0,0,0.2);
		padding:9px 15px 12px 15px;
		background-color:rgb(62,171,160);
		line-height:1em;
	}
		/*alle Headlines in head gleich*/
		.bonus_row .box_head > *:first-child{
			font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
			color:white;
			font-size:24px;
		}
		/*Alle headlines im body gleich*/
		.bonus_row .box_body h1,
		.bonus_row .box_body h2,
		.bonus_row .box_body h3,
		.bonus_row .box_body h4,
		.bonus_row .box_body h5,
		.bonus_row .box_body h6{
			font-size:1.25em;
			color:rgb(62,171,160);
			margin-bottom:0.5em;
		}
	.bonus_row .box_img{
		margin-bottom:15px;
	}

	/*Link Button volle Breite, hier mit zusätzlichem DIV*/
	.bonus_row .box_link{
		margin-top:1em;
	}
		.bonus_row .box_link .btn{
			color:white;
			font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
			font-size:24px;
			line-height:1em;
			text-shadow:2px 2px 4px rgba(0,0,0,0.2);
			background:rgb(57,159,148) url(images-wd/btn-bg-green.png) repeat-x left center;
			border-radius:5px;
			position:relative;
			padding:10px 50px 16px 15px;
		}
			.bonus_row .box_link .btn > span{
				display:inline-block;
			}
			.bonus_row .box_link .btn > span:after{
				/*icon-circle-arrow-right*/
				content:'\e69d';
				font-family:fontawesome_icons;
				font-size:36px;
				margin-top:4px;
				margin-bottom:-1em;
				display:inline-block;
				position:absolute;
				right:10px;
			}



/*=== boxen footer locations ===*/
.footer_locations{
	font-size:15px;
	line-height:1.2em;
	text-align:center;
}
	.footer_locations h1,
	.footer_locations h2,
	.footer_locations h3,
	.footer_locations h4,
	.footer_locations h5,
	.footer_locations h6,
	.footer_locations p{
		font-size:inherit;
	}
	.footer_locations .box_img{
		margin-bottom:15px;
	}
		/*Bild zentrieren*/
		.footer_locations .box_img img{
			margin:0 auto;
		}
	.footer_locations .box_link > span:after{
		/*icon-circle-arrow-right*/
		content:'\e69d';
		font-family:fontawesome_icons;
		display:inline-block;
		padding-left:0.25em;
		color:rgb(62,171,160);
	}



/*==================== SLIDER ====================*/
/*=== Slider0 top ===*/
/*--- slider0 controls---*/
.slider0 .cms4d_slider3_cbtn{
	top:40%;
	/*Die Pfeiltasten erscheinen nur bei :hover. Da aber der Linkspfeil vom drop-shadow der Stele links überlagert wird, wird dort kein
	Mausclick empfangen. Also wird der Linkspfeil zunächst nicht mit eingeblendet. Erst wenn der drop-shadow ab <=1024 verschwindet, wird
	auch der Linkspfeil bei :hover mit eingeblendet.*/
	display:none;
}
	.slider0:hover .cms4d_slider3_cbtn_r{
		display:block;
	}
.slider0 .cms4d_slider3_ibtn_container{
	top:9px;
	right:0px;
	bottom:auto;
	left:auto;
	text-align:right;
}
	.slider0 .cms4d_slider3_ibtn{
		width:14px;
		height:14px;
		margin:0 9px 0 0;
	}
/*--- Textboxen Start ---
Für die Startseite MUSS auf jeden Fall unter dem Bild noch eine Textbox mit min-height 60px angezeigt werden.
Dies gibt dem Slider die zusätzliche Höhe, die sicherstellt, dass die Preistabelle links bis zu einer min. Viewportbreite
von >=646px in voller Höhe zu sehen ist.
Damit die Textboxen später für die mobile Ansicht unter das Kopfbild floaten können, müssen alle Elemente zu einem Slide
innerhalb eines .layer zusammengefasst werden. Dadruch können sie zusammen das .slide auseinanderdrücken, wenn sie auf float geschaltet werden s.u.
Zudem kann auf jedem .slide noch eine Klasse gesetzt werden, die z.B. definiert, wo die sbox1 angeordnet wird. 
*/
.slider0{
	font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
	font-size:40px;
	line-height:1em;
	color:white;
}
	.slider0 img{
		display:block;
	}
	/*IMG und DIV.sbox1 sind wiederum in einem DIV verschachtelt, so dass sich .sbox1 nur an der Höhe der Bildes Orientiert, nicht an der Gesamthöhe des slider0*/
	.slider0 .sgroup{
		width:100%;
		float:left;
		clear:both;
		position:relative;
	}

	/*zunächst alle Blockformate vereinheitlichen*/
	.slider0 h1,
	.slider0 h2,
	.slider0 h3,
	.slider0 h4,
	.slider0 h5,
	.slider0 h6,
	.slider0 p
	{
		color:inherit;
		font-family:inherit;
		font-size:inherit;
		/*Damit die boxen unten immer gleichen Abstand zum letzten Inhalt haben, wird der Abstand nur oben verteilt.*/
		margin:0;
		margin-top:0.5em;
		padding:0;
	}
	.slider0 a{
		color:inherit;
		text-decoration:none;
	}
		/*Blockformate*/
		.slider0 h1, .slider0 h2{
			font-size:1em;
			line-height:1.2em;
			margin-top:0.24em;
			font-family:roboto2014_condensed_bold, Arial, Helvetica, sans-serif;
		}
		.slider0 h3,.slider0 h4,.slider0 h5,.slider0 h6{
			font-size:0.75em;
			line-height:1.2em;
			margin-top:0.4em;
		}
		.slider0 p{
			font-size:0.6em;
			line-height:1.2em;
			margin-top:0.2em;
		}

.slider0 .sbox1{
	/*BEACHTE: diese box hat eine zusätzliche Klasse gradient_1_v, die den Verlaufshintergrund erzeugt. s. HTML*/
	border:1px solid white;
	border-right-style:none;
	background-color:rgb(0,138,210);
	-webkit-box-shadow:8px 8px 10px 0px rgba(0,0,0,0.4);
	box-shadow:8px 8px 10px 0px rgba(0,0,0,0.4);
	text-shadow:3px 3px 4px rgba(0,0,0,0.1);
	position:absolute;
	padding:0 0.75em 0.5em 0.5em;
	top:auto;
	right:0;
	bottom:8%;
}
	/*Abweichungen je nach*/
	/*
	.slider0 .slide_top_1 .sbox1{
		top:9.4%;
		bottom:auto;
	}
	*/
.slider0 .sbox2{
	width:100%;
	min-height:60px;
	float:left;
	clear:both;
	font-size:23px;
	line-height:1.2em;
	text-align:right;
	text-shadow:2px 2px 4px rgba(0,0,0,0.2);
	/*padding:14px 30px 16px 10px;*/
	/*BEACHTE: hier trat in allen Browsern der Effekt auf, dass beim Überblenden zweier Slides die Texte nicht weich überblendet werden, sondern von sichtbar zu unsichtbar springen.
	Dies kässt sich unterbinden, indem dieser DIV-Container selbst eine background-color setzt.*/
	background-color:rgb(0,138,210);
}
	/*BEACHTE: da der Streifen für die Desktopansicht zunächst eine definierte gleichbleibende min-height haben soll, kann das padding für den Texte nicht direkt auf .sbox2 gesetzt werden.
	Verschiedene Browser zeigen dann einen Darstellungsfehler in der Gesamthöhe. Deshalb wird für das Padding ein extra DIV verwendet. Dies behebt die Fehler.*/
	.slider0 .sbox2 .pad{
		display:inline-block;
		padding:14px 30px 15px 0;
	}
		.slider0 .sbox2 .pad:before{
			/*icon-circle-arrow-right*/
			content:'\e69d';
			font-family:fontawesome_icons;
			display:inline-block;
			padding-right:0.2em;
		}




/*=== Slider1 Start Aktuelles ===*/
.slider1_row{
	margin-bottom:30px;
}
.slider1{
	font-size:16px;
}
/*--- Controls ---*/
.slider1_header{
	width:100%;
	float:left;
	clear:both;
	position:relative;
	color:white;
	background-color:rgb(62,171,160);
	font-size:24px;
	line-height:1em;
	text-shadow:2px 2px 4px rgba(0,0,0,0.2);
	padding:9px 15px 12px 15px;
	margin-bottom:10px;
}
	.slider1_header > *:first-child{
		margin-bottom:0.5em;
		font-weight:normal;
		color:inherit;
		float:left;
		font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
		font-size:inherit;
		margin:0;
	}
		.slider1_header a, .slider1_header a:hover{
			text-decoration:none;
			color:inherit;
		}
	.slider1_cbtn_container{
		float:right;
		margin:4px 0 -1em 0;
	}
		.slider1_cbtn{
			font-size:1.5em;
			display:inline-block;
			margin-left:0.5em;
			color:inherit;
			cursor:pointer;
		}
			.slider1_cbtn:before{
				/*icon-chevron-sign-left*/
				content:'\e716';
				font-family:fontawesome_icons;
			}
				.slider1_cbtn_right:before{
					/*icon-chevron-sign-right*/
					content:'\e717';
				}
	/*--- Absatzformate ---*/
	.slider1 p{
		line-height:1.2em;
	}
		.slider1 h1, .slider1 h2{
			font-size:1.25em;
			margin-bottom:0.5em;
		}
		.slider1 h3{
			color:rgb(102,102,102);
			font-size:1.125em;
			margin-bottom:0.5em;
		}
		.slider1 h4,
		.slider1 h5,
		.slider1 h6{
			color:rgb(102,102,102);
			font-size:1em;
			margin-bottom:0.5em;
		}
	/*--- Link Button ---*/
	.slider1 .box_link{
		margin-top:1em;
	}
		.slider1 .box_link > span{
			font-size:1em;
			line-height:1em;
			color:white;
			background-color:rgb(62,171,160);
			display:inline-block;
			border-radius:5px;
			padding:5px 7px 4px 7px;
		}
			.slider1 .box_link > span:after{
				/*icon-caret-right*/
				content:'\e6bf';
				font-family:fontawesome_icons;
				margin-left:0.4em;
			}



/*=== Artikelslider Start, islider ===*/
/*s.a. Cms4d.ItemSlider-1.0.0.css
Der SLider starttet mit 4 Spalten. Mit abnehmender Viewportbreite verringert sich Spaltenzahl sukzessive bis auf eine Spalte. s.u. viewports
*/
.artslider0_row{
	margin-top:20px;
}
.artslider0{
	margin-bottom:10px;
}
	/*--- Controls ---*/
	.artslider0 .cms4d_islider_ibtn_container{
		margin-top:15px;
	}

	/*--- Header ---*/
	.artslider0_header{
		width:100%;
		float:left;
		clear:both;
		position:relative;
		color:white;
		background-color:rgb(255,0,0);
		font-size:24px;
		line-height:1em;
		text-shadow:2px 2px 4px rgba(0,0,0,0.2);
		padding:9px 15px 12px 15px;
		margin-bottom:10px;
	}
		.artslider0_header a, .artslider0_header a:hover{
			text-decoration:none;
			color:inherit;
		}
		/*Text links*/
		.artslider0_header a > *:first-child{
			margin-bottom:0.5em;
			font-weight:normal;
			color:inherit;
			float:left;
			font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
			font-size:inherit;
			line-height:inherit;
			margin:0;
		}
			.artslider0_header a > *:first-child:before{
				/*icon-shopping-cart*/
				content:'\e671';
				font-family:fontawesome_icons;
				margin-right:0.5em;
			}
		/*Text rechts*/
		.artslider0_header .link_produkte{
			float:right;
			font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
			font-size:inherit;
			line-height:inherit;
			margin:0;
		}
			.artslider0_header .link_produkte:after{
				/*icon-circle-arrow-right*/
				content:'\e69d';
				font-family:fontawesome_icons;
				margin-left:0.2em;
			}

	/*--- Items ---*/
	.artslider0 a{
		text-decoration:none;
		color:inherit;
	}
	.artslider0 .art_img, .artslider0 .art_name, .artslider0 .art_info{
		width:100%;
		float:left;
		clear:both;
		position:relative;
	}
	.artslider0 .art_item{
		width:100%;
		height:100%;
		float:left;
		clear:both;
		position:relative;
		font-size:18px;
		line-height:1.2em;
		text-align:center;
		border-left:1px solid rgb(204,204,204);
	}
		.artslider0 .cms4d_islider_slider > div:first-child .art_item{
			border-left:none;
		}
		.artslider0 .art_item a{
			float:left;
			clear:both;
			width:100%;
			height:100%;
			position:relative;
			/*Nach unten wird Platz gleassen, damit eine zweizeilige Preisbeschreibung Platz hat. Da alle Preise am Fuß der Spalte stehen sollen,
			müssen diese position:absolute bottom:0 sein. Dadurch rutschen sie an die Unterkante der Spalte. s.u.*/
			padding-bottom:4em;
		}
		/*Bild*/
		.artslider0 .art_img{
			margin-bottom:10px;
			z-index:10;
		}
			.artslider0 .art_img img{
				display:block;
				margin:0 auto;
				max-height:244px;
			}
		/*Artikelname*/
		.artslider0 .art_name{
			font-family:sourcesanspro_semibold, Arial, Helvetica, sans-serif;
			font-size:1.1112em;
			color:rgb(62,171,160);
			margin-bottom:0.5em;
			padding:0 5px;
		}
		/*Artikeltext*/
		.artslider0 .art_info{
			padding:0 5px;
		}
			.artslider0 .art_info p{
				margin-bottom:0.5em;
			}
		/*Preisblock, am Fuß der Spalte ausgerichtet*/
		.artslider0 .art_price{
			width:100%;
			position:absolute;
			bottom:0;
			padding:0 5px;
		}
			/*Preisinfo*/
			.artslider0 .art_price .info{
				font-size:0.9em;
				margin-bottom:0em;
			}
			/*Preis*/
			.artslider0 .art_price .price{
				font-family:sourcesanspro_bold, Arial, Helvetica, sans-serif;
				font-size:2.2em;
				line-height:1em;
				color:red;
				/*Preis und Euro-Zeichen sollen nicht getrennt werden.*/
				white-space:nowrap;
			}
			.artslider0 .art_price .grundpreis{
				font-size:0.8em;
				line-height:1.1em;
			}
			.artslider0 .art_price .mwst{
				font-size:0.8em;
				line-height:1.1em;
			}

	/*--- Ausnahme Aktionsartikel ---*/
	/*Es wird auch ein allgemeiner Störer eingeblendet. ACHTUNG: wird erst ab IE9 korrekt über dem folgenden Inhalt angezeigt. IE8 fehlerhaft...*/
	.artslider0 .aktion a:before{
		content:url(images-wd/artikel-stoerer-aktion.png);
		display:block;
		position:absolute;
		left:4px;
		top:0;
		z-index:100;
	}
	.artslider0 .aktion.aktion1 a:before{
		content:url(images-wd/artikel-stoerer-aktion.png);
	}
	.artslider0 .aktion.aktion2 a:before{
		content:url(images-wd/artikel-stoerer-neu.png);
	}
	.artslider0 .aktion.aktion3 a:before{
		content:url(images-wd/artikel-stoerer-5plus1.png);
	}
	.artslider0 .aktion.aktion4 a:before{
		content:url(images-wd/artikel-stoerer-aktion-5plus1.png);
	}
		.artslider0 .aktion .art_info{
			font-family:sourcesanspro_semibold, Arial, Helvetica, sans-serif;
			font-size:1.1112em;
			/*color:red;*/
		}
	/*--- vertikale Trennlinien ---*/
	/*Alle Browser ab IE9+
	Je nachdem, wieviele Items auf einmal zu sehen sind, müssen auch die Trennlinien sichtbar oder unsichtbar gemacht werden.
	Dabei sollen immer nur zwischen den Items der Gruppe ein Trenner zu sehen sein, nicht aber beim ersten Item der nächsten Gruppe rechts.
	Sonst würde diese Linie je nach Rundungsverhalten des Browsers sporadisch am rechten Rand des Sliders zu sehen sein.
	Im allgemeinen Cms4d.ItemSlider CSS sind momentan bis zu 5 Spalten vordefiniert (..., .cms4d_islider_cols_5).
	Je nach Projekt muss das Verhalten je nach initialer Spaltenzahl und Änderung der Spaltenzahl bei Verkleinerung des Viewports hier und
	in den einzelnen mediaqueries definiert werden.
	Bei diesem Projekt wird mit 4 Spalten gestartet. Um zum gewünschten Ergebnis zu kommen, werden zunächst alle Trenner solid geschaltet und
	dann die unerwünschten Linien hidden. Gleiches Verfahren auch bei abnehmender Spaltenzahl (s.u.)*/
	.artslider0 .cms4d_islider_slider > div:nth-child(1n) .art_item{border-left-style:solid;}
	.artslider0 .cms4d_islider_slider > div:nth-child(4n-3) .art_item{border-left-style:hidden;}
	




/*==================== NAVIGATION ====================*/
/*---------------- Hauptmenu ------------*/
/*
BEACHTE: in diesem Projekt teilen sich topmenu und hmenu die meisten Formate. Die Abweichungen für topmenu werden nach hmenu definiert.
Damit das funktioniert sind auf dem topmenu-DIV zwei Klassen gesetzt: hmenu UND topmenu (s. HTML Ausgabe).
*/
/*--- Hauptmenu Dropdown ---*/
.hmenu{
	font-size:18px;
	line-height:1em;
	font-family:roboto2014_condensed_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	float:left;
	position:relative;
}
.hmenu a, hmenu a:hover{
	text-decoration:none;
	color:white;
}
.hmenu a{
	display:block;
}
	.hmenu a.lvl0{
		font-size:28px;
		text-shadow:2px 2px 4px rgba(0,0,0,0.2);
		padding:18px 20px 22px 20px;
	}
		.hmenu a.lvl0 > span{
			display:inline-block;
		}
			/*Icons*/
			.hmenu a.lvl0 > span:before{
				/*icon-circle-arrow-right*/
				content:'\e69d';
				font-family:fontawesome_icons;
				display:inline-block;
				padding-right:0.2em;
			}
			.hmenu li.produkte a.lvl0 > span:before{
				/*icon-shopping-cart*/
				content:'\e671';
			}
			.hmenu li.aktionen a.lvl0 > span:before{
				/*icon-star*/
				content:'\e603';
			}
			.hmenu li.bonusprogramme a.lvl0 > span:before{
				/*icon-user*/
				content:'\e605';
			}
			.hmenu li.monatskunden a.lvl0 > span:before{
				/*icon-credit*/
				content:'\e692';
			}

			/*Home nur als Icon Haus, Text ausblenden*/
			.hmenu li.page-start a.lvl0:before{
				/*icon-home*/
				content:'\e612';
				font-family:fontawesome_icons;
				color:inherit;
				display:inline-block;
				line-height:0.5em;
			}
				.hmenu li.page-start > a.lvl0 > span{
					display:none;
				}
				/*act, on*/
				.hmenu li.page-start a.lvl0.on:before{
				}

.hmenu .sub{
	width:300px;
	padding-bottom:30px;
}
/*keine abgerundeten Ecken*/
.hmenu .sub2{
	border-radius:0;
}
	.hmenu .sub a{
		border-top:1px solid rgb(230,230,230);
		color:rgb(102,102,102);
	}
		.hmenu .sub li:first-child a{
			border-top:none;
		}
		.hmenu .sub a > span{
			display:inline-block;
			/*Damit bei mehrzeilig umbrechenden Beschriftungen das Bullet außerhalb des Textblocks liegt, wird im span links eine
			große margin gesetzt und das Bullet negativ nach links aus dem Container gezogen.*/
			padding:12px 10px 12px 2em;
		}
			.hmenu .sub a > span:before{
				/*icon-circle-blank*/
				/*content:'\e6ee';*/
/*icon-stop*/
content:'\e647';
				font-family:fontawesome_icons;
				color:rgb(195,229,226);
				display:inline-block;
				margin:0 0.4em 0 -1.3em;
			}
	/*act, on*/
	.hmenu a.lvl0:hover > span:before,
	.hmenu a.lvl0.act > span:before,
	.hmenu a.lvl0.on > span:before,
	.hmenu li.page-start a.lvl0.on:before{
		color:rgb(255,224,0);
	}
		.hmenu .sub a:hover, .hmenu .sub a.act, .hmenu .sub a.on, .sub .sub a.on{
			color:black;
		}
		.hmenu .sub a.act, .hmenu .sub a.on{
			background-color:rgb(245,245,245);
		}
		/*Pfeilspitze von Sub zu lvl0 farbig an bg der aktiven Tasten im sub anpassen, wenn der erste Untermenupunkt aktiv ist.
		Dies ist durch die Zusatzklasse li.fc_act markiert. s.a. Cms4d.DropDown3-1.3.1.css*/
		.hmenu li.lvl0.hascn.cms4d_js_open.fc_act:after{
			border-bottom-color:rgb(245,245,245);
		}
		.hmenu .sub a:hover > span:before, .hmenu .sub a.act > span:before, .hmenu .sub a.on > span:before{
			/*icon-circle*/
			/*content:'\e6f2';*/
		}
		.hmenu .sub a.on > span:before{
			color:rgb(62,171,160);
		}
		.hmenu .sub a:hover > span:before, .hmenu .sub a.act > span:before{
			color:rgb(62,171,160);
		}

/*--------- topmenu Dropdown, oberhalb Kopfbild -------*/
/*Hier werden nur noch die Abweichungen vom hmenu definiert.*/
.topmenu{
	float:right;
	clear:both;
	position:relative;
}
	.topmenu a.lvl0{
		/*Damit die Werte nicht in der Folge durch hmenu Änderungen überschrieben wird, wird hier important gesetzt.*/
		font-size:28px !important;
		padding-left:38px !important;
		padding-right:0 !important;
	}
			/*Icons*/
			.topmenu li.anfahrt > a.lvl0 > span:before{
				/*icon-compass*/
				content:'\e72c';
			}
			.topmenu li.zeiten > a.lvl0 > span:before{
				/*icon-time*/
				content:'\e614';
			}
			.topmenu li.kontakt > a.lvl0 > span:before{
				/*icon-envelope-alt*/
				content:'\e6c4';
			}
			.topmenu li.search > a.lvl0 > span:before{
				/*icon-search*/
				content:'\e600';
			}





/*--- Submenu Treeview ---*/
.smenu_1_container{
	width:100%;
	float:left;
	clear:both;
	margin-top:-5px;
}
.tree{
	width:100%;
	float:left;
	clear:both;
	/*font-family:roboto2014_condensed_light, Arial, Helvetica, sans-serif;*/
	font-size:18px;
	line-height:1em;
}
.tree ul, .tree li{
	list-style:none;
	padding:0;
	margin:0;
	display:block;
}
.tree a{
	display:block;
	text-decoration:none;
	color:rgb(102,102,102);
}
.tree a > span{
	display:block;
}
	/*Level 0*/
	.tree a.lvl0.first{
	}
		.tree a.lvl0.first{
		}
		.tree a.lvl0 > span{
			padding:0.5em 0 0.5em 0;
		}
			.tree a.lvl0 > span:before{
				/*icon-circle-blank*/
				/*content:'\e6ee';*/
/*icon-stop*/
content:'\e647';
				font-family:fontawesome_icons;
				display:inline-block;
				color:rgb(195,229,226);
				/*Bullet nach links ins padding ziehen*/
				margin-left:-1.4em;
				/*erste Zeile korrigieren*/
				margin-right:0.5em;
			}
		/*act, on*/
		.tree a.lvl0.act, .tree a.lvl0.on{
			color:black;
		}
			.tree a.lvl0.on{
				color:black;
			}
			.tree a.lvl0.act > span:before, .tree a.lvl0.on > span:before{
				/*icon-circle*/
				/*content:'\e6f2';*/
/*icon-stop*/
content:'\e647';
				color:rgb(62,171,160);
			}
			.tree a.lvl0.on > span:before{
				color:rgb(62,171,160);
			}

	/*Level n*/
	.tree .sub{
		font-size:0.9em;
		padding-bottom:10px;
	}
	.tree .sub2{
		display:block;
	}
		.tree .sub a{
			padding:0.4em 0 0.4em 0;
		}
			.tree .sub a span:before{
				/*icon-circle-blank*/
				/*content:'\e6ee';*/
/*icon-stop*/
content:'\e647';
				font-family:fontawesome_icons;
				color:rgb(195,229,226);
				/*Bullet nach links ins padding ziehen*/
				margin-left:-1.2em;
				/*erste Zeile korrigieren*/
				margin-right:0.35em;
			}
		/*act, on*/
		.tree .sub a.act{
			color:rgb(51,50,49);
		}
			.tree .sub a.on{
				color:black;
			}
			.tree .sub a.act > span:before, .tree .sub a.on > span:before{
				/*icon-circle*/
				/*content:'\e6f2';*/
/*icon-stop*/
content:'\e647';
				color:rgb(62,171,160);
			}
			.tree .sub a.on > span:before{
				color:rgb(62,171,160);
			}

		/*hover*/
		.tree a:hover{
			color:black;
		}
			.tree a:hover > span:before{
				/*icon-circle*/
				/*content:'\e6f2';*/
/*icon-stop*/
content:'\e647';
				color:rgb(62,171,160);
			}

	/*Einrückungen / Offsets*/
	.tree a.lvl0{padding-left:1.4em;}
	/*Einrückung ab lvl1: für durchgängig ab lvl0 gleich formatierte Treeviews = Standardeinrückung lvl0 + (Standardeinrückung lvln * n).*/
	.tree a.lvl1{padding-left:2.8em;}
	.tree a.lvl2{padding-left:4.1em;}
	.tree a.lvl3{padding-left:5.35em;}
	.tree a.lvl4{padding-left:6.65em;}
	.tree a.lvl5{padding-left:7.9em;}
	.tree a.lvl6{padding-left:9.2em;}
	.tree a.lvl7{padding-left:10.5em;}
	.tree a.lvl8{padding-left:11.75em;}






/*--- fmenu0 ---*/
.fmenu0_row{
	display:none;
}
.fmenu0_btn_container{
	z-index:20;
	float:right;
	position:relative;
	margin:10px 20px 0 0;
}
	.fmenu0_btn{
		font-family:roboto2014_condensed_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
		font-size:20px;
		line-height:1em;
		/*Wird nach oben aus dem Container gezogen und überlagert .top_row.*/
/*		position:absolute;
		right:5px;
		top:-46px;*/
	}
		/*Button Fmenu öffnen*/
		.fmenu0_btn .btn_fmenu_opener{
			float:left;
			position:relative;
			color:rgb(102,102,102);
			background-color:white;
			border:1px solid rgb(204,204,204);
			border-radius:5px;
			cursor:pointer;
		}
			.fmenu0_btn .btn_fmenu_opener > span:before{
				/*icon-reorder*/
				content:'\e6af';
				font-family:'fontawesome_icons';
				display:inline-block;
				position:relative;
				font-size:1.05em;
				padding:10px 10px 7px 10px;
			}
			.fmenu0_btn .btn_fmenu_opener > span:after{
				content:'MENÜ';
				display:inline-block;
				padding-right:0.5em;
			}
				/*wenn FMenu offen*/
				.fmenu0_btn .btn_fmenu_opener.open{
					color:rgb(153,153,153);
					background-color:rgb(235,235,235);
					border-color:rgb(153,153,153);
					border-bottom-left-radius:0;
					border-bottom-right-radius:0;
					border-bottom:none;
					padding-bottom:10px;
						margin-bottom:-1px;
				}
					.fmenu0_btn .btn_fmenu_opener.open > span:before{
						/*icon-remove*/
						content:'\e60b';
						margin:0 2px 0 3px;
					}
				#fmenu0_container .cms4d_fmenu_content{
					border-top:1px solid rgb(153,153,153);
				}
#fmenu0_container{
	z-index:10;
}
	.cms4d_fmenu_head, .cms4d_fmenu_body, .cms4d_fmenu_footer{
		background-color:rgb(235,235,235);
		color:black;
	}
		/*Icon: zurück zur aktuellen Seite, r/o neben Menütitel*/
		.cms4d_fmenu_head .btn.act:before{
			/*icon-file2*/
			content:'\e738';
			color:rgb(102,101,99);
		}
		/*Taste allgemein*/
		.cms4d_fmenu .fbtn{
			background-color:white;
			border-color:rgb(204,204,204);
		}
			/*Icon: Taste mit eigenem Seitenlink, Doc Symbol links vor Text*/
			.cms4d_fmenu .flbl a:before{
				color:rgb(153,152,151);
			}
			/*Icon: Taste allgemein, Symbol Pfeil nach rechts - nächste Ebene*/
			.cms4d_fmenu .fcbtn > span{
				background-color:rgb(153,153,153);
			}
			/*--- act, on ---*/
			/*aktive Taste*/
			.cms4d_fmenu .fcol.on .fbtn{
				font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
				background-color:rgb(245,215,51);
				border-color:rgb(153,153,153);
			}
				/*Icon aktive Taste*/
				.cms4d_fmenu .fcol.on .flbl a:before{
					color:rgb(102,101,99);
				}
				/*Text aktive Taste*/
				.cms4d_fmenu .fcol.on .flbl a {
					color:rgb(51,51,51);
				}
		.cms4d_fmenu_footer .btn{
			background-color:rgb(153,153,153);
		}



/*--- Breadcrumb Menü ---*/
/*Home Button nur Icon*/
.bcmenu .btn.home > span{display:none;}
	.bcmenu .btn.home:after{
		/*icon-home*/
		content:'\e612';
		font-family:fontawesome_icons;
		display:inline-block;
	}
.bcmenu .btn.on > span{
	color:rgb(51,51,51);
}



/*--- Footer nav ---*/
.footer_menu_row{
	padding-bottom:1.2em;
}
.footer_nav{
	width:100%;
	float:left;
	clear:both;
	text-align:center;
	font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
	font-size:28px;
	line-height:1em;
	text-shadow:2px 2px 4px rgba(0,0,0,0.2);
}
.footer_nav ul, .footer_nav li{
	list-style:none;
	display:inline-block;
	margin:0;
	padding:0;
}
	.footer_nav a{
		text-decoration:none;
		display:block;
		color:inherit;
		white-space:nowrap;
	}
		.footer_nav a > span{
			display:block;
			padding:5px 5px 5px 5px;
			margin:0 5px 5px 5px;
		}
		.footer_nav a > span:before{
			/*icon-circle-arrow-right*/
			content:'\e69d';
			font-family:fontawesome_icons;
			display:inline-block;
			color:white;
			margin-right:0.25em;
		}

	/*act, on*/
	.footer_nav a:hover, .footer_nav a.act, .footer_nav a.on{
	}
		.footer_nav a:hover > span:before, .footer_nav a.act > span:before, .footer_nav a.on > span:before{
			color:rgb(255,224,0);
		}
		.footer_nav a.on > span:before{
			color:rgb(255,224,0);
		}
	/*Icons, s.a. oben hmenu und topmenu*/
	.footer_nav li.page-start a.lvl0 > span:before{
		/*icon-home*/
		content:'\e612';
	}
	.footer_nav li.produkte a.lvl0 > span:before{
		/*icon-shopping-cart*/
		content:'\e671';
	}
	.footer_nav li.aktionen a.lvl0 > span:before{
		/*icon-star*/
		content:'\e603';
	}
	.footer_nav li.bonusprogramme a.lvl0 > span:before{
		/*icon-user*/
		content:'\e605';
	}
	.footer_nav li.monatskunden a.lvl0 > span:before{
		/*icon-credit*/
		content:'\e692';
	}
	.footer_nav li.anfahrt > a.lvl0 > span:before{
		/*icon-compass*/
		content:'\e72c';
	}
	.footer_nav li.zeiten > a.lvl0 > span:before{
		/*icon-time*/
		content:'\e614';
	}
	.footer_nav li.kontakt > a.lvl0 > span:before{
		/*icon-envelope-alt*/
		content:'\e6c4';
	}
	.footer_nav li.weblinks > a.lvl0 > span:before{
		/*icon-globe*/
		content:'\e6a0';
	}




/*--- Bildformate ---*/
.html_content img, .left_col img, .right_col img{
	max-width:100%;
	width:auto;
	height:auto;
}
img.bild_links{

	float:left;
	margin:0 20px 10px 0;

	border:1px solid #224191;
	border:none;
}

img.bild_rechts{
	float:right;
	margin:0 0 10px 20px;

	border:1px solid #224191;
	border:none;
}



.container_rel{
	/*allgemein Für NS7*/
	position:relative;
}


/*--- Listen-Formate ---*/
@media screen{
	/*Ab IE8 Liste im Inhalt: Einrückung und Bullets skalieren mit Grundschriftart, */
	.html_content ul, .html_content li{
		list-style:none;
		margin:0;
		padding:0;
		position:relative;
	}
		/*Abstand der Items vertikal*/
		.html_content li{
			margin-top:0.5em;
		}
		/*Einrückungen*/
		.html_content ul{
			/*Level-0 mit Abstand vertikal zum vorherigen und folgenden Inhalt*/
			margin:1.5em 0 1.5em 1.3em;
		}
			.html_content ul ul{
				/*Level-n ohne Abstand vertikal*/
				margin-top:0;
				margin-bottom:0;
			}
		/*Bullets*/
		.html_content ul li:before{
			/*icon-circle*/
				content:'\e6f2';
			/*icon-circle-blank*/
				/*content:'\e6ee';*/
			/*icon-stop*/
				/*content:'\e647';*/
			/*icon-star*/
				/*content:'\e603';*/
			font-family:'fontawesome_icons';
			display:inline-block;
			position:relative;
			font-size:1em;
			left:-1.4em;
			margin-right:-0.9em;
			color:rgb(204,204,204);
		}
			/*Bullets ab Level 1*/
			.html_content li li:before{
			}

		/*--- Liste mit großen OK icons ---*/
		.html_content ul.oklist{
			margin-left:1.9em;
		}
			.html_content ul.oklist li:before{
				/*icon-ok-sign*/
				content:'\e651';
				font-size:1.4em;
				top:-0.05em;
				left:-1.35em;
				color:rgb(131,187,33);
			}

		/*Beginnende Blockelemente in LI müssen inline-block sein, da das Element sonst erst unterhalb der Grundlinie
		des Bullets beginnt. Das Bullet ist inline-block und soll ja in einer Zeile mit dem Inhaltstext stehen.
		ACHTUNG: dies gilt immer nur für das erste Element, da sonst die folgenden rechts hoch rutschen würden !*/
		li h1:first-child, li h2:first-child, li h3:first-child, li h4:first-child, li h5:first-child, li h6:first-child,
		li p:first-child, li pre:first-child,
		li div:first-child
		{
			display:inline-block;
			clear:both;
		}


	dir, menu{
		margin:1em 0 1em 17px;
		padding:0;
	}
	dir li, menu li{
		margin:0 0 1em 0;
		padding:0;
	}
	dir dir, menu menu{
		margin:1em 0 0 17px;
	}


	dl{
		margin:0 0 1em 0;
		padding:0;
	}
	dl dd{
		color:rgb(102,102,102);
		margin:0 0 1em 0;
		padding:0;
	}
	dl dl{
		margin:1em 0 1em 20px;
	}

	/*als Textbox*/
	dl dt{
		border:1px solid rgb(204,204,204);
		color:black;
		margin:0 0 1em 0;
		padding:9px 10px 10px 10px;
		background-color:rgb(240,240,240);
	}
}
@media print{
	ul{
		margin:1em 0 1em 17px;
		padding:0;
		background-image:none;
	}
	ul li{
		padding:0;
		margin:0 0 1em 0;
		background-image:none;
	}
	ul ul{
		margin:1em 0 0 17px;
		background-image:none;
	}


	dir, menu{
		margin:1em 0 1em 17px;
		padding:0;
	}
	dir li, menu li{
		margin:0 0 1em 0;
		padding:0;
	}
	dir dir, menu menu{
		margin:1em 0 0 17px;
	}


	dl{
		margin:0 0 1em 0;
		padding:0;
	}
	dl dd{
		color:rgb(110,110,99);
		margin:0 0 1em 0;
		padding:0;
	}
	dl dl{
		margin:1em 0 1em 20px;
	}

	dl dt{
		border:1px solid black;
		color:black;
		margin:0 0 1em 0;
		padding:10px;
		background-color:white;
	}
}







/*======== VIEWPORTS ======*/
/*--- Alle Browser, die mediaqueries unterstützen, ab IE9 ---*/
@media screen and (width){
	/*--- IE8 Layoutbreiten-Begrenzung aufheben ---*/
	/*Für alle Browser, die mediaqueries unterstützen darf das Layout jetzt schrumpfen. Min. 320px, iPhone3 hoch*/
	.page_container{
		min-width:320px;
	}
}

/*Ab Layout-Basisbreite+padding: 964+30+30 <= 1024*/
@media screen and (max-width:1024px){
	/*Alle Elemente mit show_desktop pauschal ausblenden*/
	.show_desktop{
		display:none !important;
	}

	/*=== Layout ===*/
	.inner_page_container{
		-webkit-box-shadow:none;
		box-shadow:none;
	}
		/*Ausname in z-Reihenfolge für Startseitenlayout aufheben. .head_row (zIndex:700) und .fmenu0_row (zIndex:600) müssen jetzt im zIndex über .inner_page_container liegen.*/
		body.page-start .inner_page_container{
			z-index:550;
		}


	/*--- Kopfbereich komplett umbauen auf fluid layout ---*/
	.head_left{
		padding-left:0;
		/*Sicherstellen, dass das klenie Logo sowohl für die Startseite, als auch auf den normalen Inhaltsseiten eingeblendet wird*/
		display:block !important;
	}
	.head_right{
		padding-right:0;
	}

	.top_row, body.page-start .top_row{
		width:100%;
		height:auto;
		margin-left:0;
	}
		/*BEACHTE: bei 1024 ist eine exakte Teilung in drei Spalten nicht geradzahlig möglich. Um Blitzer zwischen left_col und right_col
		zu vermeiden, wird hier ein geringer Überlappungsbereich gesetzt. Dies ist möglich, da left_col nicht mehr floatet und deshalb
		für right_col ein Wert zulässig ist, der in der Summe mit left_col einen Wert > 100% ergibt.
		So überschneidet left_col right_col immer um ein paar Pixel.*/
		.top_left{
			width:35.4%;
		}
		body.page-start .top_right{
			/*Ergibt bei 1024 gerundet in den meisten Browsern einen Startwert, der genau der Ursprungsbreite der Kopfbilder (664px) entspricht.*/
			width:64.8%;
		}

	/*=== Kraftstoffpreistabellen ===*/
	.ksp1.ksp_box{
		height:100%;
		bottom:auto;
		top:0;
	}
		.ksp1 .ksp_table_container{
			width:100%;
			height:100%;
			max-height:inherit;
			left:0;
			top:0;
		}
			.ksp1 td{
				height:22%;
			}
		.ksp1 tr.ksp_datum{
			display:table-row;
		}
	.ksp2.ksp_box{
		width:100%;
		margin-left:0;
	}

	/*=== slider0 ===*/
	/*Ab jetzt auch Linkspfeil bei :hover einblenden*/
	.slider0:hover .cms4d_slider3_cbtn_l{
		display:block;
	}
	.slider0 .sbox2{
		font-size:20px;
		min-height:inherit;
	}
		.slider0 .sbox2 .pad{
			padding-bottom:17px;
		}


	/*--- Startseite Bonusprogramme ---*/
	.bonus_row .box_head > *:first-child{
		font-size:20px;
	}
		.bonus_row .box_link .btn{
			font-size:20px;
		}
			.bonus_row .box_link .btn > span{
				padding-top:2px;
			}
			.bonus_row .box_link .btn > span:after{
				font-size:24px;
				margin-top:2px;
			}




	/*linke Spalte schmaler und Tree Schrift etwas kleiner*/
	.left_col{
		margin-left:-10px;
	}
		.tree{
			font-size:18px;
		}
		body.smenu_lvl_1 .center_col{
			padding-left:27.2%;
		}


	/*=== Navigation ===*/
	.topmenu_row{
		background-color:rgb(62,171,160);
	}
	.hmenu_row, .topmenu_row{
		margin-left:0;
		max-width:none;
	}
}

/*--- ab kleiner XGA 1024, < iPad quer ---*/
@media screen and (max-width:1000px){
	.hpad_1{padding-left:20px;padding-right:20px;}

	/*linke Spalte wieder zurücksetzen, da hpad kleiner wird*/
	.left_col{
		margin-left:0;
	}

	/*=== Navigation ===*/
	.hmenu a.lvl0{
		padding-left:15px;
		padding-right:15px;
	}
	.footer_nav{
		font-size:20px;
	}
		.footer_nav a > span{
			margin-bottom:10px;
		}
}


@media screen and (max-width:939px){
	/*=== cms4d grid ===*/
	/*Ab hier Spaltenabstand für alle Layoutkombinationen pauschal verkleinern*/
	div[class*=c4g_grid_]{margin-left:-20px;padding-bottom:20px;}
		div[class*=c4g_grid_] > div{border-left-width:20px;border-top-width:20px;}
	/*Margin bei im Inhalt fließenden Bildern verringern*/
	.html_content img.bild_links{margin:0 30px 10px 0;}
	.html_content img.bild_rechts{margin:0 0 10px 30px;}

	/*=== fbox_33_66 ===*/
	/*Spaltenabstand verringern*/
	.fbox_33_66{
		margin-left:-20px;
	}
		.fbox_33_66 .box_img, .fbox_33_66 .box_head, .fbox_33_66 .box_body, .fbox_33_66 .box_link{
			border-left-width:20px;
		}


	/*=== Layout ===*/
	/*--- top ---*/
	.top_row{
		/*Logo und Slogan floaten ab jetzt und drücken den container .top_row gemäß ihrer Inhaltshöhe auseinander.*/
		min-height:inherit;
		/*der Abstand zum folgenden Kopfbild wird vom jetzt eingeblendeten fmenu_row gestellt.*/
		margin-bottom:auto;
	}
		.top_slogan_box{
			position:inherit;
			float:right;
			top:4px;
		}
		.top_logo_box{
			left:auto;
			top:auto;
			position:inherit;
			float:left;
		}

	.left_col{
		margin-left:-5px;
	}

	/*=== slider0 ===*/
	.slider0 .sbox1{
		font-size:30px;
	}
		/*
		.slider0 .slide_top_1 .sbox1{
			top:11%;
		}
		*/


	/*=== Navigation ===*/
	.hmenu a.lvl0{
		padding-left:10px;
		padding-right:10px;
	}
}

@media screen and (max-width:900px){
	/*=== Kraftstoffpreistabellen ===*/
	.ksp2{font-size:17px;}
		.ksp2 .ksp_item{padding-left:8px;}
		.ksp2 .ksp_preis{font-size:2em;}

	/*=== slider0 ===*/
	.slider0 .sbox2 span+span{
		/*Zweite Zeile umbrechen*/
		display:block;
	}

	/*=== Artikelslider ===*/
	.artslider0 .art_item{
		font-size:16px;
	}

	/*=== Navigation ===*/
	.hmenu a.lvl0{
		font-size:24px;
	}
}



/*--- grosse Tablets hoch ---*/
@media screen and (max-width:840px){
	/*=== Layout ===*/
	.head_row{
		padding-left:20px;
		padding-right:20px;
	}

	/*=== Artikelslider ===*/
	/*3 Spalten*/
	.artslider0 .cms4d_islider_slider > div{width:33.3334%;}
		.artslider0 .cms4d_islider_slider > div:nth-child(1n) .art_item{border-left-style:solid;}
		.artslider0 .cms4d_islider_slider > div:nth-child(3n-2) .art_item{border-left-style:hidden;}


	/*=== Navigation ===*/
	.topmenu_container{
		padding-right:20px;
	}
}

/*--- ab kleiner iPad ---*/
@media screen and (max-width:840px){
	/*=== Layout ===*/
	/*Slogans*/
	.head_right{
		font-size:24px;
	}
		.head_left{
			width:120px;
		}
	.inner_page_container{
		padding-top:0;
	}
	/*--- left_col, submenu ---*/
	/*Submenu ausblenden, center_col immer über volle Breite*/
	body.smenu_lvl_1 .left_col{
		display:none;
	}
	body.smenu_lvl_1 .center_col{
		padding-left:0;
	}

	/*=== Kraftstoffpreistabellen ===*/
	/*Preis bricht nach unten um, alle an Unterkante ausgerichtet*/
	.ksp2 .ksp_item{
		min-height:6.2em;
	}
		.ksp2 .ksp_preis{
			position:absolute;
			right:6px;
			bottom:0.35em;
		}

	/*=== slider0 ===*/
	.slider0 .sbox2{
		background-color:rgb(62,171,160);
	}

	/*=== Navigation ===*/
	/*Ab jetzt nur noch mobile Menü*/
	.topmenu_row{
		display:none;
	}
	.hmenu_row{
		display:none;
	}
	/*FMenu mobile einblenden*/
	.fmenu0_row{display:block;}
	/*Breadrumb oben/unten*/
	.bcmenu_top, .bcmenu_bottom{display:block;}
}
@media screen and (max-width:708px){
	/*=== cms4d grid ===*/
	/*Inline Bilder: ab hier schrumpfen alle inline Bilder gleich schnell mit gleicher Breite*/
	.content_container img.bild_links, .content_container img.bild_rechts{
		max-width:42%;
	}

	/*=== fbox_33_66 ===*/
	/*Texte neben Bild floaten jetzt regulär rechts um Bild*/
	.fbox_33_66 .box_img{
		margin-right:20px;
		margin-bottom:5px;
	}
		.fbox_33_66 .box_img+.box_head, .fbox_33_66 .box_img+.box_body, .fbox_33_66 .box_img+.box_link,
		.fbox_33_66 .box_img+*+.box_body,
		.fbox_33_66 .box_img+*+*+.box_link{
			float:inherit;
			clear:none;
			width:auto;
			display:block;
			left:auto;
		}
		/*Headlines kleiner und Clearing unterbinden, damit sie rechts neben dem Bild floaten können*/
		.fbox_33_66 h1,
		.fbox_33_66 h2,
		.fbox_33_66 h3,
		.fbox_33_66 h4,
		.fbox_33_66 h5,
		.fbox_33_66 h6{
			clear:inherit;
			font-size:1em;
		}
		.fbox_33_66 h1, .fbox_33_66 h2{
			font-size:18px;
		}

}


/*viewport < Ursprungsbreite Kopfbilder Slider0 (664px) ---*/
@media screen and (max-width:663px){
	/*=== Layout ===*/
	body.page-start .top_left{
		display:none;
	}
	.top_right, body.page-start .top_right{
		width:100%;
	}
	/*=== Kraftstoffpreistabellen ===*/
	/*Ab jetzt wird die Preis-Tabelle neben dem Kopfbild ausgeblendet und für ALLE Seiten die Auflistung unterhalb des Kopfbildes angezeigt.*/
	body.page-start .ksp2{
		display:block;
	}

	/*=== slider0 ===*/
	.slider0 .sbox1{
		font-size:30px;
	}

	/*=== Artikelslider ===*/
	.artslider0_header{font-size:20px;}
		/*2 Spalten*/
		.artslider0 .cms4d_islider_slider > div{width:50%;}
			.artslider0 .cms4d_islider_slider > div:nth-child(1n) .art_item{border-left-style:solid;}
			.artslider0 .cms4d_islider_slider > div:nth-child(2n-1) .art_item{border-left-style:hidden;}
		/*Indexpunkte deutlich kleiner als optische Marker. Ab jetzt Navigation im Wesentlichen nur noch über icbtn*/
		.artslider0 .cms4d_islider_ibtn_inner_container{
			font-size:0.3em;
		}
}

@media screen and (max-width:660px){
	/*=== cms4d grid ===*/
	/*Spaltenzahlen anpassen*/
	div.c4g_grid_6 > div
	,div.c4g_grid_5 > div{width:25%;}
		div.c4g_grid_6 > div:nth-child(1n)
		,div.c4g_grid_5 > div:nth-child(1n){clear:none;border-top-style:none;}
		div.c4g_grid_6 > div:nth-child(4n+1)
		,div.c4g_grid_5 > div:nth-child(4n+1){clear:left;}
			div.c4g_grid_6 > div:nth-child(1n+5)
			,div.c4g_grid_5 > div:nth-child(1n+5){border-top-style:solid;}
	div.c4g_grid_3 > div{width:50%;}
		div.c4g_grid_3 > div:nth-child(1n){clear:none;border-top-style:none;}
		div.c4g_grid_3 > div:nth-child(2n+1){clear:left;}
			div.c4g_grid_3 > div:nth-child(1n+3){border-top-style:solid;}

}



/*--- Smartphone gross quer (z.B. Galaxy S3) ---*/
@media screen and (max-width:640px){
}

/*--- kleine Tablets, Smartphone mittel quer ab <= 610px ---*/
@media screen and (max-width:610px){
	/*=== Layout ===*/
	.head_row{
		height:80px;
		padding-left:15px;
	}
		.head_left{
			width:100px;
		}
		.head_right{
			width:100%;
			padding-left:120px;
			margin-left:-120px;
			font-size:20px;
		}
}
@media screen and (max-width:564px){
}
@media screen and (max-width:533px){
	/*=== Layout ===*/
	.head_right{
		font-size:16px;
	}
}
@media screen and (max-width:500px){
	/*=== Artikelslider ===*/
	.artslider0_header{
		padding-left:10px;
		padding-right:10px;
	}
	/*Text rechts ausblenden - es bleibt nur noch das bullet*/
	.artslider0_header .link_produkte > span{
		display:none;
	}
		.artslider0_header .link_produkte:after{
			margin-left:0;
		}
}



/*--- Smartphone quer < 480px (iPhone=480) ---*/
@media screen and (max-width:470px){
	/*=== cms4d fmenu ===*/
	/*einspaltig*/
	.cms4d_fmenu .fcol{
		width:100%;
		clear:both;
	}

	/*=== Layout ===*/
	.head_row{
		height:auto;
		padding-left:10px;
		padding-right:15px;
		padding-bottom:10px;
	}
		.head_left{
			width:80px;
			padding-top:11px;
		}
		.head_right{
			padding-left:95px;
			margin-left:-95px;
		}
			.slogan_1{
				font-size:18px;
			}
				/*erste Sloganzeile umbrechen*/
				.slogan_1 > span{
					display:block;
				}
			.slogan_2{
				padding-top:10px;
				font-size:12px;
			}
				.slogan_2 > span{
					margin-left:0.5em;
				}

	/*=== Kraftstoffpreistabellen ===*/
	/*2 spaltig*/
	.ksp2 .ksp_item{
		width:50%;
		min-height:6em;
	}


	/*=== slider0 ===*/
	/*Indexbuttons nur noch als optische Marker*/
	.slider0 .cms4d_slider3_ibtn_container{
		top:4px;
	}
		.slider0 .cms4d_slider3_ibtn{
			width:8px;
			height:8px;
			margin:0 4px 0 0;
		}
	.slider0 .sbox1{
		font-size:24px;
	}
	.slider0 .sbox2{
		font-size:18px;
	}

	/*=== Artikelslider ===*/
	/*1 Spalte, alle Trennlinien ausblenden*/
	.artslider0 .cms4d_islider_slider > div{width:100%;}
		.artslider0 .cms4d_islider_slider > div:nth-child(1n) .art_item{border-left-style:hidden;}

	/*=== Navigation ===*/
	.fmenu0_btn_container{
		margin-right:15px;
	}


	/*=== Artikel-Liste ===*/
	.artikel_liste .prev_image_shop{
		width:26% !important;
	}
	.artikel_liste .artikel_content{
		width:70% !important;
	}

	.artikel_liste .detail_image_shop{
		width:100% !important;
	}
	.artikel_liste .detail_image_shop img{
		width:auto !important;
	}
	.artikel_liste .artikel_content_detail{
		width:100% !important;
	}

}



/*--- Smartphone hoch ab <= 400px ---*/
@media screen and (max-width:400px){
	/*=== cms4d grid ===*/
	/*Für alle Grids nur noch einspaltig*/
	div[class*=c4g_grid_] > div{width:100%;clear:both;}
		div[class*=c4g_grid_] > div:nth-child(1n+2){border-top-style:solid;}
	div.c4g_grid_33_66 > div{width:100%;}
		div.c4g_grid_33_66 > div:first-child{width:100%;}
	div.c4g_grid_66_33 > div{width:100%;}
		div.c4g_grid_66_33 > div:first-child{width:100%;}
	/*Inline Bilder: ab jetzt max. breit und durch display:block alleinstehend in ihrer Zeile*/
	.content_container img.bild_links, .content_container img.bild_rechts{
		float:none;
		max-width:100%;
		display:block;
		margin-left:0;
		margin-right:0;
	}
	/*Allgemeine Sonder-Regel, die beim Setzen der Zusatzklasse .c4g_final_2 ab hier bei einem zweispaltigen Grid endet.
	Dies wird z.B. für Thumbnailgalerien oder Logo Grids verwendet, die auch auf einem Handy (320, zweispaltig) noch gut lesbar/klickbar sind.*/
	div.c4g_final_2[class*=c4g_grid_] > div{
		width:50%;
		clear:none;
		border-top-style:solid;
	}
		div.c4g_final_2[class*=c4g_grid_] > div:nth-child(1), div.c4g_final_2[class*=c4g_grid_] > div:nth-child(2){
			border-top-style:none;
		}
		div.c4g_final_2[class*=c4g_grid_] > div:nth-child(2n-1){
			clear:left;
		}


	/*=== fbox_33_66 ===*/
	/*Alle Elemente über volle Breite floaten*/
	.fbox_33_66{
		margin-left:0;
	}
		.fbox_33_66 .box_img{
			margin-bottom:15px;
		}
		.fbox_33_66 .box_img, .fbox_33_66 .box_head, .fbox_33_66 .box_body, .fbox_33_66 .box_link,
		.fbox_33_66 .box_img+.box_head, .fbox_33_66 .box_img+.box_body, .fbox_33_66 .box_img+.box_link,
		.fbox_33_66 .box_img+*+.box_body,
		.fbox_33_66 .box_img+*+*+.box_link{
			width: 100% !important;
			float: left !important;
			clear: both !important;
			border-left: none !important;
			left: auto !important;
		}


	/*---layout ---*/
	.hpad_1{
		padding-left:10px;
		padding-right:10px;
	}

	/*=== footer ===*/
	.footer_headline{
		font-size:28px;
	}
}



/*--- Minimale Layoutbreite: Smartphone hoch bis 320px, typisch iPhone und andere hoch ---*/
@media screen and (max-width:320px){
}







/*--- Container Formate ----*/
fieldset{
	border:none;
	padding:0px;
	margin:0px;
}
.box_headline_1 *, .box_headline_2 *{
	margin:0;
	padding:0;
}
.box_headline_1{
	color:white;
	background-color:rgb(169,14,14);
	text-align:left;
	font-size:1em;
	font-weight:bold;
	margin:0;
	padding:6px 0 7px 9px;
}
.box_headline_2{
	color:white;
	background-color:rgb(205,131,26);
	text-align:left;
	font-size:1em;
	font-weight:bold;
	margin:0;
	padding:6px 0 7px 9px;
}




/*Hilfsklassen*/
.clearboth{
	float:none;
	clear:both;
}
.displaynone{
	display:none;
}


/*=== cms4d Module ===*/
.cms4dmodul_2_teaser_modulcontainer, .cms4dmodul_3_teaser_modulcontainer{
	padding:0px;
	width:420px;
	float:right;
	margin-left:40px;
}
.cms4dmodul_2_teaser_modulcontainer ul, .cms4dmodul_2_teaser_modulcontainer li, .cms4dmodul_3_teaser_modulcontainer ul, .cms4dmodul_3_teaser_modulcontainer li{
	list-style:none;
	float:left;
	margin:0;
	padding:0;
	width:420px;
	
}
.cms4dmodul_2_teaser_modulbodycontainer, .cms4dmodul_3_teaser_modulbodycontainer{
	padding:0px;
	width:420px;
}
.cms4dmodul_2_teaser_modulbodycontainer ul li, .cms4dmodul_3_teaser_modulbodycontainer ul li{
	background-image:none;
	margin:0;
	padding:0;

}

.cms4dmodul_2_teaser_headline, .cms4dmodul_3_teaser_headline{
	color:rgb(136,119,96);
}

.cms4dmodul_2_liste_modulbodycontainer .news_liste_hr, .cms4dmodul_3_liste_modulbodycontainer .news_liste_hr{
}


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

.cms4dmodul_2_liste_modulcontainer, .cms4dmodul_3_liste_modulcontainer{
	margin-bottom:0px;
}
.cms4dmodul_2_liste_modulcontainer ul, .cms4dmodul_2_liste_modulcontainer li{
	margin:0;
	padding:0;
}
.cms4dmodul_3_liste_modulcontainer ul, .cms4dmodul_3_liste_modulcontainer li{
	list-style:none;
	margin:0;
	padding:0;
}
.cms4dmodul_2_liste_modulbodycontainer{
	margin:0;
	padding:0;
}
.cms4dmodul_3_liste_modulbodycontainer{
	background-color:transparent;
	padding:0px;
}
.cms4dmodul_2_liste_modulbodycontainer ul li, .cms4dmodul_3_liste_modulbodycontainer ul li{
	background-image:none;
	margin:0;
	padding:0;
}

.cms4dmodul_2_liste_headline, .cms4dmodul_3_liste_headline{
}

.cms4dmodul_2_liste_modulbodycontainer .news_liste_hr, .cms4dmodul_3_liste_modulbodycontainer .news_liste_hr{
	border-top:1px solid white;
}

.cms4dmodul_2_liste_modulbodycontainer h2, .cms4dmodul_3_liste_modulbodycontainer .news_liste_hr{
	border-top:1px solid white;
}





/*htmlfragment_teaser*/
.htmlfragment_teaser
{
    
}
.html_teaser p{
	margin:0 0 0.5em 0;
}
.html_teaser_hr{
	border-top:1px dashed rgb(153,153,153);
	height:1em;
	margin-top:1em;
	clear:both;
}

.news_teaser{
	float:left;
	border-top:1px solid #E5DDC9;
	padding-top:1em;
	margin-bottom:1.2em;
	width:420px;
	font-size:0.9em;
}

.news_teaser h4{
	font-size:1.35em;
}
.news_teaser h4 a, .news_teaser h4 a:hover{
	color:rgb(179,157,107);
	text-decoration:none;
}

.news_teaser_date{
	font-weight:bold;
	font-size:1em;
}
.news_teaser_lnk{
	font-weight:bold;
}
.news_teaser .data_img_container{
	width:220px;
	overflow:hidden;
}
.news_teaser .data_img{
	border:none;
	margin-bottom:0.75em;
}

.news_teaser ul{
	list-style:none;
	margin:0;
	padding:0;
}
.news_teaser ul ul{
	list-style:none;
	margin:0 0 0 9px;
	padding:0;
}
.news_teaser ul li{
	padding:0;
	margin:0 0 0 -8px;
}

.news_teaser p{
	line-height:1.2em;
	padding:0;
	margin-bottom:0.6em;
}
.news_teaser p a, .news_teaser p a:hover{
	color:rgb(110,92,67);
	text-decoration:none;
}





/*=== Info Box 1, cms4dmodul -1 ===*/
/*für alle*/
.ibox_1_1 .body, .ibox_1_2 .body, .ibox_2_1 .body, .ibox_2_2 .body{
	border:1px solid #B0BCC4;
	background-color:#E9ECEF;
	padding:9px 9px 0 9px;
}
.ibox_1_1 img, .ibox_1_2 img, .ibox_2_1 img, .ibox_2_2 img{
	border:1px solid #B0BCC4;
	width:120px;
	height:90px;
	overflow:hidden;
	background-color:white;
}
/*Extraklasse für Modul-Container DIV, für kleinere Texte*/
.smalltext .body{
	font-size:9px;
}
.smalltext .ltable .td_left{
	padding-right:9px;
}

@media all{
	/*Die beiden Stile für ibox_1_1 sind bis auf die Überschrift (Farbe) identisch*/
	.cms4dmodul_-1_1_modulcontainer{
		margin-bottom:15px;
	}
	.ibox_1_1, .ibox_1_2{
	}
	.ibox_1_1_body_container{
	}
	.ibox_1_1 a, .ibox_1_2 a{
		color:black;
	}
	.ibox_1_1 a:hover, .ibox_1_2 a:hover{
	}
	.ibox_1_1 a.lnk_href, .ibox_1_2 a.lnk_href{
		color:rgb(153,0,102);
		font-weight:bold;
	}
	.ibox_1_1 .h_txt{
		color:black;
		font-size:1.2em;
		margin:0 0 0.5em 0;
		padding:0;
	}
	.ibox_1_2 .h_txt{
		color:black;
		font-size:1.2em;
		margin:0 0 0.5em 0;
		padding:0;
	}
	.ibox_1_1 a.h_txt, .ibox_1_2 a.h_txt{
		border:none;
		background-color:transparent;
		background-image:none;
		margin:0;
		padding:0;
		font-size:1em;
	}
	.ibox_1_1 .s_txt, .ibox_1_2 .s_txt{
		font-size:9px;
	}
	.ibox_1_1 .i_txt{
	}
	.ibox_1_1 .b_txt{
	}
	.ibox_1_1 .ltable, .ibox_1_1 .ltable{
		width:100%;
	}
	.ibox_1_1 .td_left, .ibox_1_2 .td_left{
		padding:0 15px 9px 0;
 	}
	.ibox_1_1 .td_right, .ibox_1_2 .td_right{
		width:100%;
 	}




	.cms4dmodul_-1_2_modulcontainer{
		margin-bottom:15px;
	}
	.ibox_2_1{
	}
	.ibox_2_1_body_container{
	}
	.ibox_2_1 a, .ibox_2_2 a{
		color:black;
	}
	.ibox_2_1 a:hover, .ibox_2_2 a:hover{
	}
	.ibox_2_1 a.lnk_href, .ibox_2_2 a.lnk_href{
		color:rgb(153,0,102);
		font-weight:bold;
	}
	.ibox_2_1 .h_txt{
		border-left:8px solid rgb(153,0,102);
		border-top:1px solid rgb(204,204,204);
		border-right:1px solid rgb(153,153,153);
		border-bottom:1px solid rgb(153,153,153);
		color:rgb(0,0,0);
		font-size:1em;
		margin:0;
		/*padding:5px 9px 7px 7px;*/
		padding:4px 9px 6px 7px;
		background-color:rgb(204,204,204);
		background-image:url(images-wd/box-headline-bg-hellgrau.gif);
		background-repeat:repeat-x;
	}
	.ibox_2_2 .h_txt{
		border-top:1px solid rgb(184,77,148);
		border-bottom:1px solid rgb(153,0,102);
		color:white;
		font-size:1em;
		margin:0;
		/*padding:5px 9px 7px 9px;*/
		padding:4px 9px 6px 9px;
		background-color:rgb(153,0,102);
		background-image:url(images-wd/box-headline-bg-violett.gif);
		background-repeat:repeat-x;
	}
	.ibox_2_1 a.h_txt, .ibox_2_2 a.h_txt{
		border:none;
		background-color:transparent;
		background-image:none;
		margin:0;
		padding:0;
	}
	.ibox_2_1_image_container, .ibox_2_2_image_container{
		margin-bottom:1em;
	}
	.ibox_2_1 .s_txt, .ibox_2_2 .s_txt{
		font-size:9px;
	}
	.ibox_2_1 .i_txt{
	}
	.ibox_2_1 .b_txt{
	}
}



/*--- Bildergalerie ---*/
.bildergalerie_container{
	margin-bottom:30px;
	width:100%;
	float:left;
}
.img_register{
	margin:0 0 1em 0;
}
.img_register .but_fwd_back{
	color:black;
	border:1px solid #D2D2D2;
	background-color:#EAEAEA;
	font-weight:bold;
	text-decoration:none;
	padding:1px 4px 2px 4px;
	margin-right:4px;
	float:left;
}
.img_register .but_fwd_back:hover{
	color:white;
	background-color:#AA8345;
	text-decoration:none;
}

.img_register .but_fwd_back_on{
	color:white;
	border:1px solid #D2D2D2;
	background-color:#AA8345;
	font-weight:bold;
	text-decoration:none;
	padding:1px 4px 2px 4px;
	margin-right:4px;
	float:left;
}

.bildergalerie_liste{
	width:100%;
	float:left;
	padding:0px;
	margin:0 auto;
}

.bildergalerie_liste .thumb_container{
	width:120px;
	height:80px;
	overflow:hidden;
	float:left;
	border:1px solid #224191;
	margin-right:10px;
	margin-bottom:10px;
	border-radius:10px;
}
.bildergalerie_liste .thumb_container img{
	width:120x;
	height:80px;
	min-width:120px;
	min-height:80px;
	max-width:120px;
	max-height:80px;
	border:none;
}

@media screen and (max-width:760px){

	.bildergalerie_liste .thumb_container{
		width:118px;
		height:auto;
	}
	.bildergalerie_liste img{
		width:118px;
		height:auto;
	}
}


/*--- Platzhalter Bildergalerien ---*/
.bildergalerie1{
	width:100%;
	float:left;
}
.bildergalerie1 .galerie_content{
	width:100%;
	float:left;
	max-height:315px;
	overflow:hidden;
}

	.bildergalerie1 .galerie_content .big{
		float:left;
		width:50%;
	}
		.bildergalerie1 .galerie_content .big img{
			width:100%;
			max-width:430px;
		}

	.bildergalerie1 .galerie_content .thumb{
		float:left;
		width:50%;
		height:150px;
	}
		.bildergalerie1 .galerie_content .thumb img{
			width:47%;
			margin:0px 0px 3% 3%;
			float:left;
		}
		.bildergalerie1 .galerie_content .thumb a:nth-child(3) img{
			margin-bottom:0;
		}
		.bildergalerie1 .galerie_content .thumb a:nth-child(4) img{
			margin-bottom:0;
		}

	.bildergalerie1 .thumb2{
		display:none;
		float:left;
		width:100%;
		margin-top:1.5%;
		padding:10px 0px 0px 12px;
		background-color:#F0F0EE;
		border-radius:5px;

		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
		.bildergalerie1 .thumb2 img{
			width:82px;
			height:46px;
			float:left;
			margin:0 10px 10px 0px;
			border:1px solid rgb(190,190,190);
			border-radius:2px;
		}


@media screen and (max-width:470px){

	.bildergalerie1 .galerie_content{
		max-height:none;
		overflow:visible;
	}
		.bildergalerie1 .galerie_content .big{
			width:100%;
			margin-bottom:2%;
		}
		.bildergalerie1 .galerie_content .thumb{
			width:100%;
			height:auto;
		}
			.bildergalerie1 .galerie_content .thumb img{
				width:49%;
				margin:0 2% 2% 0;
			}
			.bildergalerie1 .galerie_content .thumb a:nth-child(2) img{
				margin-right:0;
			}
			.bildergalerie1 .galerie_content .thumb a:nth-child(4) img{
				margin-right:0;
			}

	.bildergalerie1 .thumb2{
		margin-top:0.5%;
	}
}


.bildergalerie2{
	width:100%;
	float:left;
}
.bildergalerie2 .galerie_content{
	width:100%;
	float:left;
	max-height:315px;
	overflow:hidden;
}

	.bildergalerie2 .galerie_content .thumb{
		float:left;
		width:50%;
	}
		.bildergalerie2 .galerie_content .thumb img{
			width:47%;
			margin:0 3% 3% 0;
			float:left;
		}


@media screen and (max-width:470px){

	.bildergalerie2 .galerie_content{
		max-height:none;
		overflow:visible;
	}
		.bildergalerie2 .galerie_content .thumb{
			width:100%;
			height:auto;
		}
			.bildergalerie2 .galerie_content .thumb img{
				width:49%;
				margin:0 2% 2% 0;
			}
			.bildergalerie2 .galerie_content .thumb a:nth-child(2) img{
				margin-right:0;
			}
			.bildergalerie2 .galerie_content .thumb a:nth-child(4) img{
				margin-right:0;
			}
}



/*--- Event Liste/Details ---*/
.event_register{
	width:100%;
	float:left;
}
.event_register a, .event_register a:hover{
	color:white;
	border:1px solid #224191;
	background-color:#6C8DC5;
	padding:4px 4px 4px 4px;
	margin-right:4px;
	float:left;
	text-decoration:none;
	font-size:0.9em;
	border-radius:5px;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.event_register .year_buttons{
	float:left;
	clear:both;
	margin-bottom:4px;
}
.event_register .year_buttons a:hover{
	color:white;
	background-color:#224191;
	text-decoration:none;
}
.event_register .but_y{
	background-color:#6C8DC5;
}
.event_register .act_year{
	border:1px solid #224191;
	color:white;
	background-color:#224191;
	font-weight:bold;
	padding:4px 8px 4px 8px;
	margin-right:2px;
	float:left;
	font-size:0.9em;
	border-radius:5px;
}

.event_register .month_buttons{
	clear:left;
}
.event_register .month_buttons a:hover{
	color:white;
	background-color:#224191;
	text-decoration:none;
}
.event_register .but_m{
	color:black;
	border:1px solid #224191;
	background-color:#E5F1FF;
	margin-bottom:4px;
}
.event_register .but_m_act{
	border:1px solid #224191;
	background-color:#6C8DC5;
	margin-bottom:4px;
}
.event_register .but_m_on{
	border:1px solid #224191;
	color:white;
	background-color:#476BB3;
	font-weight:bold;
	margin-bottom:4px;
}
.event_register .monat_name{
	margin:5px 0 0 0;
	font-weight:bold;
	padding-bottom:0.8em;
	border-bottom:1px solid #6C8DC5;
}

.event_liste{
	float:left;
	width:100%;
	margin-bottom:2em;
}
.event_liste ul{
	list-style:none;
	margin:0;
	padding:0;
}
.event_liste ul li{
	background-image:none;
	list-style:none;
	margin:15px 0 0 0;
	padding:0 0 5px 0;
	float:left;
	width:100%;
	clear:both;
	border-bottom:1px solid #6C8DC5;
}
.event_liste ul li:before{
	display:none;
}
.event_liste ul li:last-child{
	border-bottom:none;
}
.event_liste .content{
	float:left;
	width:100%;
}
.event_liste .headline{
}
.event_liste .headline a{
	color:#224191;
	text-decoration:none;
}
.event_liste .headline a:hover{
	color:#224191;
	text-decoration:none;
}

.event_liste .body_text{
	float:left;
	max-width:385px;
}

.event_liste .body_text_max{
	min-width:100%;
}

.event_liste .body_text a, .event_liste .body_text a:hover{
	color:rgb(51,51,102);
	text-decoration:none;
}

.event_liste .body_text p{
	margin-bottom:0.5em;
}

.event_liste_date{
	margin-bottom:0.5em;
	font-size:0.9em;
	font-weight:bold;
	color:black;
}

.event_liste .data_img_container{
	width:200px;
	overflow:hidden;
	float:left;
	margin-top:-5px;
	margin-right:15px;
	margin-bottom:10px;
}
.event_liste .data_img{
	border:none;
	margin-top:5px;
}
.event_liste .data_img_txt{
	font-size:9px;
}

.event_liste .event_liste_lnk{
	width:100%;
	float:left;
	clear:both;
	text-align:left;
	padding-top:0.9em;
	font-size:14px;
	position:relative;
	margin-bottom:0.5em;
}
	.event_liste .event_liste_lnk span{
		font-family:open_sans_semibold, Arial, Helvetica, sans-serif;
		display:inline-block;
	}
	.event_liste .event_liste_lnk span:after{
		content:'\e69d';
		display:inline-block;
		font-family:'fontawesome_icons';
		font-size:1.4em;
		color:#476BB3;
		padding-left:0.5em;
		position:relative;
		top:2px;
	}


@media screen and (max-width:1023px){
	.event_liste .data_img_container{
		max-width:37%;
		margin-right:3%;
	}
	.event_liste .body_text{
		max-width:60%;
	}
}
@media screen and (max-width:480px){
	.event_liste .data_img_container{
		width:100%;
		max-width:100%;
		margin-right:0;
	}
	.event_liste .body_text{
		width:100%;
		max-width:100%;
	}
}



/*--- News Liste/Details ---*/
.news_liste{
	float:left;
	width:100%;
	margin-bottom:2em;
}
.news_liste ul{
	list-style:none;
	margin:0;
	padding:0;
}
.news_liste ul li{
	background-image:none;
	list-style:none;
	margin:15px 0 0 0;
	padding:0 0 5px 0;
	float:left;
	width:100%;
	clear:both;
	border-bottom:1px solid #6C8DC5;
	border-bottom:none;
}
.news_liste ul li:before{
	display:none;
}
.news_liste ul li:last-child{
	border-bottom:none;
}
.news_liste .content{
	float:left;
	width:100%;
}

.news_liste .body_text{
	float:left;
	/*max-width:385px;*/
	width:62%;
}
.news_liste .body_text_max{
	min-width:100%;
}
.news_liste .body_text a, .news_liste .body_text a:hover{
	color:rgb(51,51,102);
	text-decoration:none;
}
.news_liste .body_text p{
	margin-bottom:0.8em;
}
.news_liste .body_text p:last-child{
	float:left;
	margin-bottom:0em;
}

.news_liste .headline{
	font-size:1.0em;
	color:white;
	position:relative;
	padding:4px 14px 6px 14px;
	border-radius:10px;
	background-color:rgb(34,65,145);
	z-index:20;
	width:100%;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
	.news_liste .headline a:after{
		content:'\e69d';
		font-family:fontawesome_icons;
		font-size:1.15em;
		float:right;
		display:none;
	}

.news_liste .headline a, .news_liste .headline a:hover{
	color:white;
	text-decoration:none;
	display:block;
}

.news_liste_date{
	margin-bottom:0.5em;
	font-size:0.9em;
	font-weight:bold;
	color:black;
}
.news_liste .data_img_container{
	width:200px;
	width:35%;
	overflow:hidden;
	float:left;
	margin-top:-5px;
	margin-right:15px;
	margin-bottom:10px;

	margin-right:3%;
}
.news_liste .data_img{
	border:none;
	margin-top:5px;
	border-radius:10px;
}
.news_liste .data_img_txt{
	font-size:9px;
}
.news_liste .body_text ul, .news_liste .body_text li{
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}
	.news_liste .body_text li{
		margin-top:0.5em;
		border:none;
	}
	.news_liste .body_text ul{
		margin:1.5em 0 1.5em 1.3em;
	}
	.news_liste .body_text ul ul{
		margin-top:0;
		margin-bottom:0;
	}
	.news_liste .body_text ul li:before{
		content:'\e6f2';
		font-family:'fontawesome_icons';
		display:inline-block;
		position:relative;
		font-size:1em;
		left:-1.4em;
		margin-right:-0.9em;
		color:rgb(210,211,211);
	}

.news_liste .news_liste_lnk{
	width:100%;
	float:left;
	clear:both;
	text-align:left;
	padding-top:0.9em;
	font-size:14px;
	position:relative;
	margin-bottom:0.5em;
}
	.news_liste .news_liste_lnk span{
		font-family:open_sans_semibold, Arial, Helvetica, sans-serif;
		display:inline-block;
	}
	.news_liste .news_liste_lnk span:after{
		content:'\e69d';
		display:inline-block;
		font-family:'fontawesome_icons';
		font-size:1.4em;
		color:#476BB3;
		padding-left:0.5em;
		position:relative;
		top:2px;
	}


.news_details{
}
.news_details_date{
	margin-bottom:15px;
	font-weight:bold;
}

.news_details h2, .news_details h3, .news_details h4, .news_details h5, .news_details h6{
	clear:none;
}

.news_details address{
	margin:0 0 1em 0;
}
@media screen{
	.news_details_backlink_top{
		float:right;
	}
		.news_details_backlink_top span{
			font-size:1em;
			line-height:1em;
			color:white;
			background-color:rgb(62,171,160);
			display:inline-block;
			border-radius:5px;
			padding:5px 7px 4px 7px;
		}
		.news_details_backlink_top span:before{
			/*icon-caret-left*/
			content:'\e6be';
			font-family:'fontawesome_icons';
			margin-right:0.4em;
		}
}
@media print{
	.news_details_backlink_top{
		display:none;
	}
}

.news_details .data_img_container{
	float:right;
	width:auto;
	max-width:40%;
	margin:0px 0px 20px 20px;
	border:1px solid #224191;
	border:none;
	border-radius:10px;
	overflow:hidden;
	position:relative;
}
.news_details .data_img{
	width:100%;
}
.news_details .data_img a{
	display:block;
	position:relative;
	z-index:10;
}
.news_details .data_img img{
	border:none;
	width:100%;
}
.news_details .data_img_txt{
	font-size:0.8em;
	text-align:center;
	margin-top:1px;
}



@media screen and (max-width:1023px){
	.news_liste .data_img_container{
		max-width:34%;
		margin-right:3%;
	}
	.news_liste .body_text{
		max-width:63%;
	}
}
@media screen and (max-width:760px){
	.news_liste .data_img_container{
		max-width:28%;
		margin-right:3%;
	}
	.news_liste .body_text{
		max-width:69%;
	}
}
@media screen and (max-width:640px){
	.news_liste .data_img_container{
		max-width:35%;
		margin-right:3%;
	}
	.news_liste .body_text{
		max-width:62%;
	}
}
@media screen and (max-width:480px){
	.news_liste .data_img_container{
		width:100%;
		max-width:100%;
		margin-right:0;
	}
	.news_liste .body_text{
		width:100%;
		max-width:100%;
	}
	.news_details .data_img_container{
		width:100%;
		max-width:100%;
	}
}



/*--- News Liste Accordion ---*/
.accordion{
	float:left;
	width:100%;
}
.accordion ul{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
}
.accordion ul li{
	background-image:none;
	list-style:none;
	float:left;
	clear:both;
	width:100%;
	margin:0 0 1em 0;
	padding:0;
}
.accordion ul li:before{
	display:none;
}

.accordion h2.head_close{
	font-family:open_sans_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	margin:0;
	font-size:1em;
	font-weight:normal;
	background-color:#6C8DC5;
	padding:5px 10px 5px 10px;
	color:white;
	width:100%;
	cursor:pointer;
	border-radius:5px;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.accordion h2.head_close:before{
	font-family:fontawesome_icons;
	content:'\e69d';
	font-size:28px;
	float:left;
	margin:6px 10px 4px 0px;
}

.accordion h2.head_open{
	font-family:open_sans_regular, Arial, 'Arial Unicode MS', Helvetica, sans-serif;
	margin:0;
	font-size:1em;
	font-weight:normal;
	background-color:#476BB3;
	padding:5px 10px 5px 10px;
	color:white;
	width:100%;
	cursor:pointer;
	border-radius:5px 5px 0px 0px;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.accordion h2.head_open:before{
	font-family:fontawesome_icons;
	content:'\e69f';
	font-size:28px;
	float:left;
	margin:6px 10px 4px 0px;
}

.accordion .body{
	display:none;
	padding:12px 15px 1px 15px;
	background-color:#E5F1FF;
	border-radius:0px 0px 5px 5px;
}

.accordion .body p{
	margin-bottom:1em;
}

.accordion .body a{
	color:#224191;
	font-weight:bold;
}



/*--- HTML-Fragment Liste ---*/
.htmlfragment_liste{
	background-image:none;
	background-color:transparent;
	border:none;
	margin:0px;
	padding:0px;
}
.htmlfragment_liste ul{
	margin:0px;
	padding:0px;
	list-style:none;
	background-image:none;
	background-color:transparent;
}
.htmlfragment_liste ul li{
	margin:0 0 0px 0;
	padding:0;
	background-image:none;
	background-color:transparent;
}

.htmlfragment_liste ul ul{
	/*aus optischen Gründen 1px weiter nach rechts für die erste UL*/
	margin:1em 0 1em 13px;
	padding:0;
	list-style:none;
}
.htmlfragment_liste ul ul li{
	padding:0 0 0 17px;
	margin:0 0 0.2em -12px;
	background-image:url(images-wd/li-bullet.gif);
	background-repeat:no-repeat;
	background-position:0 6px;
}

.htmlfragment_liste ul ul ul{
	margin:1em 0 0 17px;
}



/*=== Sitemap ===*/
@media screen, projection{
	.sitemap{
		line-height:normal;
	}

	.sitemap a{
		color:black;
	}

	.sitemap a:hover{

	}
	.sitemap ul li{
		font-weight:bold;
		margin-bottom:1.5em;
	}
	.sitemap ul li a{
		color:rgb(102,102,102);
	}
	.sitemap ul li ul li{
		font-weight:normal;
		margin-bottom:0.5em;

	}
}
@media print{
}



/*--- Paging-Buttons ---*/
.paging_bt1{
	cursor:pointer;
	border:1px solid black;
	background-color:#EDF4D4;
	color:#496606;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
	border:1px solid #496606;
	border-radius:3px;
}
.paging_bt1:hover{
	text-decoration:none;
}

.paging_bt2{
	cursor:pointer;
	border:1px solid black;
	background-color:#496606;
	color:white;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
	border:1px solid #496606;
	border-radius:3px;
}
.paging_bt2:hover{
	text-decoration:none;
}




/*--- Artikel Liste ---*/
.artikel_liste{
	width:100%;
	float:left;
	margin-bottom:1em;
}

.artikel_liste ul{
	float:left;
	width:100%;
	margin:0;
	padding:0px;
	list-style:none;
}

.artikel_liste ul li{
	width:100%;
	float:left;
	margin:0px 0px 20px 0px;
	padding:20px 0 20px 0;
	background-image:none;
	border-bottom:1px solid #CCCCCC;
}
	.artikel_liste ul li:first-child{
		border-top:1px solid #CCCCCC;
	}
	.artikel_liste ul li:last-child{
		margin-bottom:20px;
	}
	.artikel_liste ul li:before{
		content:'';
	}

.artikel_liste h2, .artikel_liste h2 a{
	text-decoration:none;
	font-size:1.2em;
}

.artikel_liste h1{
	width:100%;
	float:left;
}

.artikel_liste .prev_image_shop{
	float:left;
	width:14%;
	text-align:center;
	margin-right:4%;
	overflow:hidden;
}
.artikel_liste .detail_image_shop{
	float:left;
	width:26%;
	text-align:center;
	margin-right:4%;
	overflow:hidden;
}
	.artikel_liste .prev_image_shop img, .artikel_liste .detail_image_shop img{
		/*width:100%;*/
	}
	.artikel_liste .aktion:before{
		content:url(images-wd/artikel-stoerer-aktion.png);
		display:block;
		position:absolute;
		left:4px;
		top:0px;
		z-index:100;
	}
		.artikel_liste .aktion.aktion1:before{
			content:url(images-wd/artikel-stoerer-aktion.png);
		}
		.artikel_liste .aktion.aktion2:before{
			content:url(images-wd/artikel-stoerer-neu.png);
		}
		.artikel_liste .aktion.aktion3:before{
			content:url(images-wd/artikel-stoerer-5plus1.png);
		}
		.artikel_liste .aktion.aktion4:before{
			content:url(images-wd/artikel-stoerer-aktion-5plus1.png);
	}	

.artikel_liste .artikel_content{
	float:left;
	width:82%;
}
.artikel_liste .artikel_content_detail{
	float:left;
	width:70%;
}
	.artikel_liste .artikel_content p, .artikel_liste_detail .artikel_content p{
		margin-bottom:0.5em;
	}

.artikel_liste .detail_link{
	margin-top:1em;
}
	.artikel_liste .detail_link > span{
		font-size:1em;
		line-height:1em;
		color:white;
		background-color:rgb(62,171,160);
		display:inline-block;
		border-radius:5px;
		padding:5px 7px 4px 7px;
	}
		.artikel_liste .detail_link > span:after{
			/*icon-caret-right*/
			content:'\e6bf';
			font-family:fontawesome_icons;
			margin-left:0.4em;
		}

.artikel_liste .artikel_link_back{
	float:right;
}
	.artikel_liste .artikel_link_back > span{
		font-size:1em;
		line-height:1em;
		color:white;
		background-color:rgb(62,171,160);
		display:inline-block;
		border-radius:5px;
		padding:5px 7px 4px 7px;
	}
		.artikel_liste .artikel_link_back > span:before{
			/*icon-caret-right*/
			content:'\e6be';
			font-family:fontawesome_icons;
			margin-right:0.4em;
		}

.artikel_liste .ausfuehrung{
	font-weight:bold;
	margin-bottom:0.5em;
}

.artikel_liste .preis_container{
	float:right;
	margin-left:20px;
	text-align:right;
}
	.artikel_liste .preis{
		color:red;
		font-size:1.8em;
		font-family:sourcesanspro_bold, Arial, Helvetica, sans-serif;
		line-height:1em;
		white-space:nowrap;
		margin-bottom:0.15em;
	}
	.artikel_liste .grundpreis{
		font-size:0.8em;
		line-height:1.1em;
	}
	.artikel_liste .mwst{
		font-size:0.8em;
		line-height:1.1em;
	}

.artikel_liste .preis_detail_container{
	float:left;
	width:100%;
}
	.artikel_liste .preis_detail{
		color:red;
		font-size:1.8em;
		font-family:sourcesanspro_bold, Arial, Helvetica, sans-serif;
		line-height:1em;
		white-space:nowrap;
		float:left;
		width:100%;
		margin-bottom:0.2em;
	}

	.artikel_liste .preis_detail_container .grundpreis{
		font-size:0.8em;
		line-height:1.1em;
	}
	.artikel_liste .preis_detail_container .mwst{
		font-size:0.8em;
		line-height:1.1em;
	}


.paging{
	float:left;
	width:100%;
	padding:10px 0px 10px 0px;
	text-align:right;
}
.paging .paging_bt1{
	font-size:1em;
	font-family:roboto2014_condensed_bold, Arial, Helvetica, sans-serif;
	color:white;
	border:1px solid #CCCCCC;
	background-color:#3EABA0;
	font-weight:bold;
	text-decoration:none;
	padding:1px 4px 1px 4px;
	margin-right:4px;
	border-radius:3px;
}
.paging .paging_bt1:hover{
	color:white;
	background-color:#008AD2;
	text-decoration:none;
}

.paging .paging_bt2{
	font-size:1em;
	font-family:roboto2014_condensed_bold, Arial, Helvetica, sans-serif;
	color:white;
	border:1px solid #CCCCCC;
	background-color:#008AD2;
	font-weight:bold;
	text-decoration:none;
	padding:1px 4px 1px 4px;
	margin-right:4px;
	border-radius:3px;
}





/*--- Suche ---*/
.suche_container{
	float:right;
	padding-left:38px;
	padding-top:10px;
}
	.suche_icon:before{
		font-size:28px;
		font-family:fontawesome_icons;
		color:white;
		content:'\e600';
		float:left;
		margin:2px 5px 0px 0px;
	}

	.suche_container_mobile{
		padding-top:8px;
		padding-left:0px;
		padding-right:28px;
	}
		.suche_container_mobile .suche_icon:before{
			content:'';
			margin:0;
		}

		.suche_container_mobile .suche_button{
			width:38px;
			height:38px;
			margin-left:2px;
		}
			.suche_container_mobile .suche_button:before{
				font-size:22px;
			}

.suche_eingabe{
	width:130px;
	border:1px solid white;
	border-radius:3px;
	font-size:18px;
	padding:1px 4px 4px 4px;
	height:31px;
}

.suche_button{
	width:31px;
	height:31px;
	border:1px solid white;
	background-color:#3EABA0;
	border-radius:3px;
	margin-left:6px;
	cursor:pointer;
	text-align:center;
	margin-right:-4px;
}
	.suche_button:before{
		font-size:18px;
		font-family:fontawesome_icons;
		color:white;
		content:'\e600';
		margin-left:-2px;
	}



.suchergebnis{
	width:100%;
	float:left;
}

	.suchergebnis .li{
		width:100%;
		float:left;
		margin-bottom:1.5em;
		position:relative;
	}

	.suchergebnis .li .icon{
		float:left;
		width:90px;
		line-height:1em;
		padding-top:40px;
	}

	.suchergebnis .li .icon:before{
		content:'\e6d9';
		font-family:fontawesome_icons;

		font-size:58px;

		/*
		font-size:48px;
		position:absolute;
		left:0px;
		top:0px;
		*/
	}
		.suchergebnis .li .icon.icon_sitemap:before{
			content:'\e6d9';
			font-size:48px;
		}
		.suchergebnis .li .icon.icon_pdf:before{
			content:'\e6d9';
		}
		.suchergebnis .li .icon.icon_artikel:before{
			content:'\e671';
			font-size:40px;
		}


	.suchergebnis .li .content{
		float:left;
		padding-left:50px;
		color:#333333;
	}
		.suchergebnis .li .content .headline{
			font-weight:bold;
		}
		.suchergebnis .li .content .sinfo{
			font-size:0.9em;
		}
			.suchergebnis .li .content .sinfo p{
				margin:0;
			}


	.suchergebnis .li .img_artikelsuche{
		width:90px;
		height:90px;
		float:left;
		text-align:center;
		margin-right:10px;
		border:1px solid #3EABA0;
		border-radius:4px;
		padding:5px;
		line-height:1px;
	}
		.suchergebnis .li .img_artikelsuche img{
			max-width:90px;
			max-height:90px;
		}

	.suchergebnis .li .content_artikelsuche{
		float:left;
		color:#333333;
		width:calc(100% - 112px);
	}
		.suchergebnis .li .content_artikelsuche .headline{
			font-weight:bold;
		}
		.suchergebnis .li .content_artikelsuche .sinfo{
			font-size:0.9em;
		}
			.suchergebnis .li .content_artikelsuche .sinfo p{
				margin:0;
			}


@media screen and (max-width:540px){
	.suche_container_mobile{
		padding-right:13px;
	}
}

@media screen and (max-width:840px){.suche_eingabe{width:200px;}}
@media screen and (max-width:540px){.suche_eingabe{width:160px;}}
@media screen and (max-width:520px){.suche_eingabe{width:140px;}}
@media screen and (max-width:500px){.suche_eingabe{width:130px;}}
@media screen and (max-width:470px){.suche_eingabe{width:200px;}}
@media screen and (max-width:410px){.suche_eingabe{width:130px;}}






/*--- Formularfelder ---*/
.ft1{
	font-family:open_sans_regular, Arial, "Arial Unicode MS", Helvetica, sans-serif;
	color:black;
	font-size:14px;
	width:220px;
	background-color:white;
	border:1px solid #DDDDDD;
	border-radius:5px;
	padding:6px;
}
.ft1:focus{
	background-color:#F0F0F0;
}

.ft2{
	font-family:open_sans_regular, Arial, "Arial Unicode MS", Helvetica, sans-serif;
	color:black;
	font-size:14px;
	width:50px;
	background-color:white;
	border:1px solid #DDDDDD;
	border-radius:5px;
	padding:4px;
}
.ft2:focus{
	background-color:#F0F0F0;
}


.ta1{
	font-family:open_sans_regular, Arial, "Arial Unicode MS", Helvetica, sans-serif;
	color:black;
	font-size:14px;
	width:90%;
	max-width:470px;
	height:152px;
	background-color:white;
	border:1px solid #DDDDDD;
	border-radius:5px;
	padding:4px;
}

.ta1:focus{
	background-color:#F0F0F0;
}


.fs1{
	font-family:open_sans_regular, Arial, "Arial Unicode MS", Helvetica, sans-serif;
	color:black;
	font-size:14px;
	background-color:white;
	border:1px solid #DDDDDD;
	border-radius:5px;
	padding:4px;
	max-width:100%;
	width:auto;
}


.bt1{
	font-size:0.9em;
	line-height:1em;
	color:white;
	background-color:rgb(62,171,160);
	display:inline-block;
	border-radius:5px;
	padding:6px 8px 6px 8px;
	border:none;
}
.bt1:hover{
}

.bt2{
	color:white;
	font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
	font-size:22px;
	line-height:1em;
	text-shadow:2px 2px 4px rgba(0,0,0,0.2);
	background:rgb(57,159,148) url(images-wd/btn-bg-green.png) repeat-x left center;
	border-radius:5px;
	position:relative;
	padding:8px 50px 14px 13px;
	display:inline-block;
	text-decoration:none;
}
	.bt2:after{
		/*icon-circle-arrow-right*/
		content:'\e69d';
		font-family:fontawesome_icons;
		font-size:30px;
		margin-top:4px;
		margin-bottom:-1em;
		display:inline-block;
		position:absolute;
		right:10px;
	}
	a.bt2:hover{
		text-decoration:none;
	}

@media screen and (max-width:480px){
	.bt2{

		display:block;
		width:100%;

		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		margin-top:3em;
	}

}



/*--- Kundenspezifische Klassen für HTML-Editor ---*/
a.lnk_button1{
	color:white;
	font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
	font-size:24px;
	line-height:1em;
	text-shadow:2px 2px 4px rgba(0,0,0,0.2);
	background:rgb(57,159,148) url(images-wd/btn-bg-green.png) repeat-x left center;
	border-radius:5px;
	position:relative;
	padding:10px 50px 16px 15px;
	text-decoration:none;
}
a.lnk_button1:after{
	content:'\e69d';
	font-family:fontawesome_icons;
	font-size:36px;
	margin-top:4px;
	margin-bottom:-1em;
	display:inline-block;
	position:absolute;
	right:10px;
}
a.lnk_button1:hover,a.lnk_button1:focus{
	text-decoration:none;
}


a.lnk_button1_s{
	font-size:0.8em;
	border-radius:5px;
	padding:2px 8px 3px 9px;
	text-decoration:none;
	text-align:left;
	background-color:#224191;
	color:white;

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.lnk_button1_s:after{
	content:'\e6e7';
	font-family:'fontawesome_icons';
	padding-left:0.5em;
}
a.lnk_button1_s:hover,a.lnk_button1:focus{
	text-decoration:none;
	color:white;
}



a.lnk_extern{
}
a.lnk_extern:after{
	font-family:'fontawesome_icons';
	font-size:0.8em;
	content:' \e684';
}

a.lnk_intern{
}
a.lnk_intern:after{
	font-family:'fontawesome_icons';
	font-size:0.8em;
	content:' \e63f';
}

a.lnk_intern2{
	color:#333366;
}
a.lnk_intern2:after{
	font-family:'fontawesome_icons';
	font-size:0.8em;
	content:' \e63f';
}

a.lnk_dokument, a.lnk_dokument:hover{
	color:white;
	font-family:roboto2014_condensed_regular, Arial, Helvetica, sans-serif;
	font-size:18px;
	line-height:1em;
	text-shadow:2px 2px 4px rgba(0,0,0,0.2);
	background:rgb(57,159,148) url(images-wd/btn-bg-green.png) repeat-x left center;
	border-radius:5px;
	position:relative;
	padding:5px 10px 8px 10px;
	text-decoration:none;
}
a.lnk_dokument:before{
	font-family:'fontawesome_icons';
	content:'\e6d9  ';
}

a.lnk_mail, a.lnk_mail:hover{
}
a.lnk_mail:before{
	font-family:'fontawesome_icons';
	content:'\e6c4  ';
}

.infobox1{
	float:left;
	width:100%;
	border:2px solid #224191;
	border:none;
	background-color:#E5f1ff;
	padding:15px;
	margin-bottom:2em;
	border-radius:15px;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
	.infobox1 h2{
		color:white;
		background-color:#91AFD7;
		padding:10px;
		border-radius:15px;
	}
	.infobox1 h3{
		color:white;
		background-color:#E67700;
		padding:10px;
		border-radius:15px;
		float:left;
	}
	.infobox1 ul li:before{
		color:#D90000;
	}
	.infobox1 .bild_rechts, .infobox1 .bild_links{
		border:none;
		border-radius:0px;
	}


/*--- Tabellen ---*/

.tbl1{

	width:100%;
	border-collapse:collapse;

	empty-cells:show;

	font-size:1em;
	margin-bottom:30px;

}

	.tbl1, .tbl1 tr, .tbl1 td{
		background-color:#E5F1FF;
	}

	.tbl1 td{
		padding:15px;
		word-wrap:break-word;

		vertical-align:center;

		border-bottom:1px solid #6C8DC5;
	}

	.tbl1 p{

		padding:0;

		margin:0;

		line-height:inherit;

	}

	.tbl1 tr:first-child td{
		color:black;

		background-color:#6C8DC5;
		color:white;
		border-bottom:none;
	}
	.tbl1 tr:nth-child(2n+3) td{
	}

	.tbl1 tr+tr td{
		width:auto;

	}
	.tbl1 tr+tr td img{

		width:100%;
		max-width:150px;
	}

	.tbl1 tr+tr td+td{

		width:auto;
	}
	.tbl1 tr+tr td+td+td{
		width:auto;
	}


@media screen and (max-width:480px){
	.tbl1{

		font-size:0.9em;
	}

	.tbl1 td{
		padding:5px;
	}

}
@media screen and (max-width:400px){
	.tbl1{

		font-size:0.8em;
	}

	.tbl1 td{
		padding:4px;
	}

}



/*--- GoogleMap ---*/
#gm_error{
	float:left;
	margin:25px 0px 5px 0px;
}
#map{
	margin-bottom:1em;
	border:1px solid #CCCCCC;
	height:400px;
	width:100%;
}
#map img{
	max-width:none;
}
#route{
	margin-left:0px;
	margin-bottom:1.5em;
}




.slider_close{
	cursor:pointer;
	position:relative;
	margin-left:30px;
}
	.slider_close img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_close:after{
		content:'\e650';
		font-family:'fontawesome_icons';
		color:white;
		font-size:42px;
	}

.slider_play{
	cursor:pointer;
	position:relative;
	margin-left:40px;
}
	.slider_play img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_play:after{
		content:'\e645';
		font-family:'fontawesome_icons';
		color:white;
		font-size:42px;
	}

.slider_stop{
	cursor:pointer;
	position:relative;
	margin-left:40px;
}
	.slider_stop img{
		width:36px;
		height:36px;
		position:absolute;
		top:0px;
		left:0px;
	}
	.slider_stop:after{
		content:'\e646';
		font-family:'fontawesome_icons';
		color:white;
		font-size:42px;
	}

.slider_index{
	position:relative;
	margin-left:30px;
	font-size:42px;
	color:white;
	font-family:'roboto_bold';
	font-family:'sourcesanspro_bold';
}


#zoom_slider_content{
}


.jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
	background: url(../jssor/b02.png) no-repeat;
	overflow: hidden;
	cursor: pointer;
}

.jssorb13 div {
	background-position: -5px -5px;
}

.jssorb13 div:hover, .jssorb13 .av:hover {
	background-position: -35px -5px;
}

.jssorb13 .av {
	background-position: -65px -5px;
}

.jssorb13 .dn, .jssorb13 .dn:hover {
	background-position: -95px -5px;
}

.jssora20l, .jssora20r, .jssora20ldn, .jssora20rdn
{
	position: absolute;
	cursor: pointer;
	display: block;
	background: url(../jssor/a13.png) no-repeat;
	overflow:hidden;
}
.jssora20l { background-position: -3px -33px; }
.jssora20r { background-position: -63px -33px; }
.jssora20l:hover { background-position: -123px -33px; }
.jssora20r:hover { background-position: -183px -33px; }
.jssora20ldn { background-position: -243px -33px; }
.jssora20rdn { background-position: -303px -33px; }

@media screen and (max-width:939px){
	.jssora20l, .jssora20r, .jssora20ldn, .jssora20rdn{display:none}
}